/* ============================================================
   demos.css - baseera.tech (link 37): the buyer's questions, pasting a
   link, consent and the Buyer Card, and the firm's side. The same rules
   as site.css: one pigment, hairlines, hatching for tone, no radius.
   ============================================================ */

/* ---------- the buyer's questions ---------- */
html.dl .btq .jc{position:relative;max-inline-size:44rem}
html.dl .btq .dsc__bar{display:flex;align-items:center;gap:1rem;margin-block-end:1rem}
html.dl .btunder{max-inline-size:40rem}
html.dl .btres__h{margin:0 0 .4rem;font-size:clamp(1.3rem,2.4vw,1.7rem)}
html.dl[lang="ar"] .btres__h{font-family:var(--font-ar-display)}
html.dl .btres__said{margin:0 0 .6rem;color:#3A3E46}
html.dl .btres__note{margin:.4rem 0 .8rem}
html.dl .btres__list{list-style:none;margin:.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:0 1.6rem}
html.dl .btres__row{padding:.7rem 0 .75rem;border-block-start:1px solid var(--rule)}
html.dl .btres__name{display:flex;flex-direction:column;gap:.1rem;font-weight:600;color:var(--cobalt)}
html.dl .btres__dist{font-weight:400;font-size:.8rem;color:var(--muted)}
html.dl .btres__n{margin:.3rem 0 .2rem;font-size:.84rem;color:#3A3E46}
html.dl .btres__km{color:var(--muted)}
html.dl .btres__go{margin:0}
html.dl .btres__floor{margin-block:1rem 0}

/* ---------- pasting a link: the walkthrough ---------- */
html.dl .btwalk__rail{list-style:none;margin:.6rem 0 1.2rem;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
html.dl .btwalk__step{appearance:none;background:transparent;border:1px solid var(--cobalt-200);color:var(--cobalt);font:inherit;font-size:.84rem;padding:.4rem .7rem;cursor:pointer;display:inline-flex;gap:.45rem;align-items:baseline}
html.dl .btwalk__step.is-now{border-color:var(--cobalt);background-image:var(--hatch-1);font-weight:600}
html.dl .btwalk__step.is-done{color:var(--cobalt-500)}
html.dl .btwalk__no{font-family:var(--font-mono);font-size:.75rem}
html.dl .btwalk__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1rem,3vw,2.2rem);align-items:start}
@media (max-width:52rem){ html.dl .btwalk__grid{grid-template-columns:minmax(0,1fr)} }
html.dl .btwalk__h{margin:0 0 .4rem;font-size:clamp(1.25rem,2.2vw,1.55rem)}
html.dl[lang="ar"] .btwalk__h{font-family:var(--font-ar-display)}
html.dl .btwalk__lines .st{grid-template-columns:5.6rem minmax(0,1fr)}
html.dl .btwalk__lines .st.is-plain{display:block;padding-inline-start:1rem;border-inline-start:2px solid var(--cobalt-200)}
html.dl .btwalk__acts{margin-block:1.2rem 0;display:flex;gap:.6rem;flex-wrap:wrap}
html.dl .btpage{margin:0;border:1px solid var(--cobalt);background:var(--porcelain-2)}
html.dl .btpage__chrome{display:flex;align-items:center;gap:.35rem;padding:.45rem .6rem;border-block-end:1px solid var(--cobalt-200)}
html.dl .btpage__dot{inline-size:.5rem;block-size:.5rem;border:1px solid var(--cobalt-200);display:inline-block}
html.dl .btpage__url{margin-inline-start:.4rem;font-family:var(--font-mono);font-size:max(.7rem,12px);color:var(--muted)}
html.dl[lang="ar"] .btpage__url{font-family:var(--font-ar);font-size:.78rem}
html.dl .btpage__body{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:.8rem;padding:.8rem}
html.dl .btpage__pic{border:1px dashed var(--cobalt-200);background-image:var(--hatch-1);min-block-size:9rem;display:flex;align-items:flex-end;padding:.4rem;font-size:.72rem;color:var(--muted)}
html.dl .btpage__col{display:grid;gap:.5rem;align-content:start}
html.dl .btpage__bar{block-size:.6rem;background:var(--cobalt-050);border:1px solid var(--cobalt-200)}
html.dl .btpage__bar--h{block-size:auto;padding:.3rem .45rem;font-size:max(.72rem,12px);color:var(--muted)}
html.dl .btpage__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem .6rem}
html.dl .btpage__fact,html.dl .btpage__agent,html.dl .btpage__pin{display:grid;gap:.2rem;padding:.3rem;border:1px solid transparent}
html.dl .btpage__fact b,html.dl .btpage__agent b,html.dl .btpage__pin b{font-size:.68rem;font-weight:600;color:var(--cobalt)}
html.dl .btpage__pinmark{inline-size:.8rem;block-size:.8rem;border:2px dashed var(--cobalt);display:inline-block}
html.dl .btpage .is-hl{border-color:var(--cobalt);background-image:var(--hatch-1)}
html.dl .btpage__cap{padding:.5rem .8rem;border-block-start:1px solid var(--cobalt-200);font-size:max(.75rem,12px);color:var(--muted)}

/* ---------- consent and the card ---------- */
html.dl .btcon__title,html.dl .btcardv__h,html.dl .btinbox__h{margin:0 0 .35rem;font-size:clamp(1.3rem,2.4vw,1.7rem)}
html.dl[lang="ar"] .btcon__title,html.dl[lang="ar"] .btcardv__h,html.dl[lang="ar"] .btinbox__h{font-family:var(--font-ar-display)}
html.dl .btcon__lede{margin:0 0 .6rem;color:#3A3E46}
html.dl .btcon__demo{margin:0 0 1rem}
html.dl .btcon__row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem 1.4rem;align-items:start;padding:.9rem 0;border-block-start:1px solid var(--rule)}
@media (max-width:40rem){ html.dl .btcon__row{grid-template-columns:minmax(0,1fr)} }
html.dl .btcon__h{margin:0 0 .25rem;font-size:1rem;font-family:var(--font-body);font-weight:600;color:var(--cobalt)}
html.dl[lang="ar"] .btcon__h{font-family:var(--font-ar)}
html.dl .btcon__q{margin:0 0 .25rem;font-weight:600}
html.dl .btcon__p{margin:0;font-size:.9rem;color:#3A3E46}
html.dl .btcon__acts{display:flex;gap:.4rem;flex-wrap:wrap}
html.dl .btcon__b{min-inline-size:6rem}
html.dl .btcon__note,html.dl .btcon__terms{grid-column:1 / -1;margin:0}
html.dl .btcon__terms{border:1px solid var(--cobalt-200);padding:.8rem 1rem;background:var(--porcelain-2)}
html.dl .btcon__firm{margin:0 0 .6rem}
html.dl .btcon__firmk{color:var(--muted);font-size:.85rem}
html.dl .btcon__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:.6rem 1rem;margin-block-end:.5rem}
html.dl .btcon__hours{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
html.dl .btcon__hours .btinput{inline-size:auto}
html.dl .btcon__getsh{margin:.6rem 0 .2rem;font-weight:600;font-size:.88rem}
html.dl .btcon__gets ul{margin:0;padding-inline-start:1.2rem;font-size:.86rem}
html.dl .btcardv{margin-block:1.8rem 0;border:1px solid var(--cobalt);padding:clamp(1rem,2.6vw,1.5rem);background:var(--porcelain-2)}
html.dl .btcardv__list{list-style:none;margin:.6rem 0 0;padding:0}
html.dl .btcardv__row{display:grid;grid-template-columns:minmax(7rem,.8fr) minmax(0,1.4fr) auto;gap:.4rem 1rem;align-items:center;padding:.45rem 0;border-block-start:1px solid var(--rule)}
@media (max-width:40rem){ html.dl .btcardv__row{grid-template-columns:minmax(0,1fr) auto} html.dl .btcardv__k{grid-column:1 / -1} }
html.dl .btcardv__k{font-size:.8rem;color:var(--muted)}
html.dl .btcardv__v{font-weight:600}
html.dl .btcardv__row.is-hidden .btcardv__v{color:var(--muted);text-decoration:line-through}
html.dl .btcardv__seen{margin-block:1rem 0;padding-block-start:.7rem;border-block-start:1px solid var(--cobalt-200)}
html.dl .btcardv__seen p{margin:.15rem 0}
html.dl .btcardv__sk{font-weight:600;color:var(--cobalt)}
html.dl .btcardv__never{margin:.8rem 0 0;padding-inline-start:1.2rem;font-size:.85rem;color:#3A3E46}
html.dl .btcard__send{margin-block:1.2rem 0;display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}

/* ---------- the firm's side ---------- */
html.dl .btinbox__head{margin-block-end:1rem}
html.dl .btinbox__card{border:1px solid var(--cobalt);border-inline-start-width:4px;padding:1rem 1.2rem;background:var(--porcelain-2)}
html.dl .btinbox__top{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1rem}
html.dl .btinbox__new{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;border:1px solid var(--cobalt);padding:.1rem .4rem;color:var(--cobalt)}
html.dl[lang="ar"] .btinbox__new{font-family:var(--font-ar);letter-spacing:0;font-size:.8rem}
html.dl .btinbox__rung{font-weight:600;color:var(--cobalt);font-size:1.05rem}
html.dl .btinbox__rule{margin:.4rem 0 .6rem;color:#3A3E46;font-size:.9rem}
html.dl .btinbox__reasons{list-style:none;margin:0;padding:0}
html.dl .btinbox__meta{margin-block:.8rem 0;padding-block-start:.6rem;border-block-start:1px solid var(--rule);font-size:.9rem}
html.dl .btinbox__meta p{margin:.15rem 0}
html.dl .btinbox__decide{margin-block:.6rem 0}
html.dl .btinbox__ladder{margin-block:1rem}
html.dl .btinbox__ladder summary{cursor:pointer;color:var(--cobalt)}
html.dl .btinbox__rungs{margin:.5rem 0 0;padding-inline-start:1.2rem;font-size:.9rem}
html.dl .btinbox__rungs li{margin:.25rem 0}

/* ---------- link 38: the paste box and its steps ---------- */
html.dl .btpaste{margin-block-start:.8rem;display:grid;gap:.6rem;max-inline-size:44rem}
html.dl .btpaste__in{font-family:var(--font-mono);font-size:.92rem}
html.dl .btpaste__note{margin-block:.6rem 0}
html.dl .btprog{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.45rem}
html.dl .btprog__step{padding:.45rem .7rem;border:1px solid var(--rule);color:var(--muted)}
html.dl .btprog__step.is-on{border-color:var(--cobalt);color:var(--cobalt);background-image:var(--hatch-1);font-weight:600}
html.dl .btprog__url{word-break:break-all}
html.dl .btq__body{display:grid;gap:.6rem;margin-block:.6rem}

/* ---------- link 38: the engine's figure, its range, its causes ---------- */
html.dl .vprice{margin-block:.8rem .2rem;display:grid;gap:.8rem}
html.dl .vfig{border:1px solid var(--cobalt);border-inline-start-width:4px;padding:.8rem 1rem;background:var(--porcelain-2)}
html.dl .vfig p{margin:0}
html.dl .vfig__k{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cobalt)}
html.dl[lang="ar"] .vfig__k{font-family:var(--font-ar);letter-spacing:0;font-size:.82rem;text-transform:none}
html.dl .vfig__v{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;color:var(--ink);margin-block:.2rem 0!important}
html.dl .vfig__u{font-size:.9rem;font-weight:400;color:var(--muted)}
html.dl .vfig__r{font-size:.95rem;color:#3A3E46}
html.dl .vfig__s{margin-block-start:.3rem!important;font-size:.78rem;color:var(--muted)}
html.dl .vrange{margin:0}
html.dl .vcauses{border:1px solid var(--rule);padding:.8rem 1rem;background:var(--porcelain-2)}
html.dl .vcauses__h{margin:0 0 .6rem;display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
html.dl .vcauses__list{list-style:none;margin:0 0 .5rem;padding:0;display:grid;gap:.45rem}
html.dl .vcause{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(4rem,1fr) 3rem;gap:.6rem;align-items:center;font-size:.88rem}
@media (max-width:40rem){ html.dl .vcause{grid-template-columns:minmax(0,1fr) 3rem} html.dl .vcause__bar{grid-column:1 / -1;grid-row:2} }
html.dl .vcause__bar{display:block;block-size:.55rem;border:1px solid var(--cobalt-200);background:var(--porcelain)}
html.dl .vcause__fill{display:block;block-size:100%;background-image:var(--hatch-2,var(--hatch-1));border-inline-end:2px solid var(--cobalt)}
html.dl .vcause__n{text-align:end;font-weight:600}
html.dl .vsearch{margin:0;color:#3A3E46}
html.dl .vrun{margin:0}
html.dl .vwords summary{cursor:pointer;color:var(--cobalt);font-size:.85rem}
html.dl .vwords p{margin:.4rem 0 0;color:#3A3E46}
html.dl .vrefuse ul{margin:.3rem 0 0;padding-inline-start:1.2rem}
html.dl .vpersonal{margin:.3rem 0 0;color:var(--cobalt)}
html.dl .btexample{padding-block:clamp(1.6rem,4.5vw,3rem) 1rem}
html.dl .btexample__try{margin-block:1.6rem 0}

/* ---------- link 38: the broker-facing exemplar on the inside page ---------- */
html.dl .btfirmpage--real .btfirmpage__part{font-weight:400;color:var(--ink)}
html.dl .btfirmpage--real .btfirmpage__part > .btfirmpage__no + *{margin-block-start:.4rem}
html.dl .btfirmpage--real .btfirmpage__part--guide,html.dl .btfirmpage--real .btfirmpage__part--q{font-weight:600;color:var(--cobalt)}
html.dl .bxunit{margin:.3rem 0 0;font-size:clamp(1.05rem,1.9vw,1.3rem);color:var(--cobalt)}
html.dl[lang="ar"] .bxunit{font-family:var(--font-ar-display)}
html.dl .bxfacts{display:flex;flex-wrap:wrap;gap:.3rem 1.4rem;margin:.2rem 0 .3rem}
html.dl .bxfacts div{display:grid}
html.dl .bxfacts dt{font-size:.7rem;color:var(--muted)}
html.dl .bxfacts dd{margin:0;font-weight:600;color:var(--ink)}
html.dl .bxq{margin:.45rem 0 .35rem;font-weight:600;color:var(--ink)}
html.dl .bxchips{display:flex;flex-wrap:wrap;gap:.35rem;margin:0}
html.dl .bxchip{border:1px solid var(--cobalt-200);padding:.2rem .5rem;font-size:.8rem;font-weight:400;color:var(--cobalt)}
html.dl .btfirmpage--real .btfirmpage__part--guide p{margin:0;font-weight:400;color:var(--ink)}
html.dl .bxfig__k{margin-block-start:.5rem!important;font-size:.72rem;color:var(--muted)!important}
html.dl .bxfig__v{font-size:1.5rem;font-weight:600!important}
html.dl .bxfig__r{font-size:.88rem}
html.dl .bxfig__s{font-size:.72rem;color:var(--muted)!important}
html.dl .bxwithin{margin-block-start:.4rem!important;font-size:.88rem}
html.dl .bxwhy{margin-block-start:.5rem!important;font-size:.8rem;font-weight:600!important;color:var(--cobalt)!important}
html.dl .bxcauses{list-style:none;margin:.3rem 0 0;padding:0;display:grid;gap:.3rem}
html.dl .bxcause{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(3rem,1fr) 2.6rem;gap:.4rem;align-items:center;font-size:.76rem;font-weight:400;color:var(--ink)}
html.dl .bxcause__bar{inline-size:100%;block-size:.5rem}
html.dl .bxcause__track{fill:var(--porcelain);stroke:var(--cobalt-200);stroke-width:.5}
html.dl .bxcause__fill{fill:var(--cobalt-400)}
html.dl .bxopen{margin-block-start:.6rem!important}
html.dl .bxcard__f{display:block;margin-block-start:.3rem;font-weight:400;font-size:.8rem;color:var(--ink)}
html.dl .bxcard__n{display:block;font-weight:400;font-size:.74rem;color:var(--muted)}