/* ============================================================
   site.css - baseera.tech (link 37). Loaded after version 1.3's
   design language and its site sheets, and obedient to them: cobalt
   the one pigment on porcelain, near-black ink for text and every
   numeral, aubergine only for "we do not know", hairlines instead of
   shadows, no radius, no gradient, motion that settles.
   Logical properties throughout: one sheet serves rtl and ltr.
   ============================================================ */

/* ---------- the header ---------- */
html.dl .topbar__in{align-items:center}
html.dl .navlink--cta{margin-inline-start:.5rem;border:1px solid var(--cobalt);border-block-end-width:1px;padding:.36rem .8rem;font-weight:600}
html.dl .navlink--cta:hover,html.dl .navlink--cta.is-on{background-image:var(--hatch-1)}
html.dl .langbtn--site{
  font-family:var(--font-body);font-size:.8rem;letter-spacing:0;color:var(--cobalt);text-decoration:none;
  border:1px solid var(--cobalt-200);padding:.3rem .65rem;white-space:nowrap
}
html.dl .langbtn--site[lang="ar"]{font-family:var(--font-ar);font-size:.88rem}
html.dl .langbtn--site:hover{background-image:var(--hatch-1)}
html.dl .menubtn{
  appearance:none;background:transparent;border:1px solid var(--cobalt);color:var(--cobalt);cursor:pointer;
  font:inherit;font-size:.85rem;padding:.32rem .75rem;margin-inline-start:auto
}
html.dl[lang="ar"] .menubtn{font-family:var(--font-ar)}
html.dl .menubtn[aria-expanded="true"]{background-image:var(--hatch-1)}
@media (min-width:60rem){
  html.dl .menubtn{display:none!important}
}
@media (max-width:59.99rem){
  html.dl .topbar__in{flex-wrap:wrap;row-gap:.4rem}
  /* without JavaScript the links stay visible as 1.3's scrolling row; with it they fold into the menu */
  html.dl .topbar__nav{order:3;inline-size:100%;margin-inline-start:0;overflow-x:auto;flex-wrap:nowrap;border-block-start:1px solid var(--cobalt-200)}
  html.has-menu.dl .topbar__nav{display:none;flex-direction:column;overflow:visible;padding-block:.3rem .6rem}
  html.has-menu.dl .topbar__nav.is-open{display:flex}
  html.has-menu.dl .topbar__nav .navlink{padding:.62rem .2rem;font-size:.98rem;border-block-end:1px solid var(--rule)}
  html.has-menu.dl .topbar__nav .navlink.is-on{border-block-end-color:var(--cobalt)}
  html.has-menu.dl .topbar__nav .navlink--cta{margin:.6rem 0 0;justify-content:center;border:1px solid var(--cobalt);padding:.62rem .8rem}
  html.dl .langbtn--site{margin-inline-start:0}
  html.dl .menubtn{margin-inline-start:auto}
}

/* ---------- the footer: the firm strip, then the lines ---------- */
html.dl .sitefoot__in{gap:1.1rem}
html.dl .btstrip{display:grid;gap:.7rem;padding-block:.4rem 1.1rem;border-block-end:1px solid var(--rule)}
html.dl .btstrip__k{
  margin:0;font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt)
}
html.dl[lang="ar"] .btstrip__k{font-family:var(--font-ar);letter-spacing:0;font-size:.92rem;text-transform:none}
html.dl .btstrip__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.2rem}
/* the firm's own file, as supplied: sized, never recoloured, cropped or filtered */
html.dl .btfirm{margin:0;padding:0;line-height:0}
html.dl .btfirm__logo{display:block;block-size:4.2rem;inline-size:auto;max-inline-size:100%}
@media (max-width:40rem){ html.dl .btfirm__logo{block-size:3.4rem} }
html.dl .sitefoot__line a{color:var(--cobalt)}

/* ---------- home ---------- */
html.dl .bthome__h1{font-size:clamp(2.4rem,5.6vw,4.3rem);line-height:1.08}
html.dl[lang="ar"] .bthome__h1{font-family:var(--font-ar-display);line-height:1.35;font-size:clamp(2.1rem,5vw,3.8rem)}
html.dl .bthome__note{max-inline-size:32rem;margin-block-start:.9rem}
html.dl .bthome__marks .home13__line{grid-template-columns:6.2rem minmax(0,1fr)}
html.dl .bthome__intention{margin-block:1.8rem 0;max-inline-size:46rem;color:#3A3E46}
html.dl .bthome__intention .linkbtn{margin-inline-start:.3rem;white-space:nowrap}
html.dl .bthome__quote{margin:.4rem 0 1rem;padding:0;border:0}
html.dl .bthome__quote p{
  margin:0;max-inline-size:44rem;font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.3rem);line-height:1.25;color:var(--cobalt)
}
html.dl[lang="ar"] .bthome__quote p{font-family:var(--font-ar-display);line-height:1.6;font-size:clamp(1.35rem,2.6vw,2rem)}
html.dl .bthome__request{border-block-end:0}

/* ---------- our mission: the owner's words, typography only ---------- */
html.dl .btmission{max-inline-size:46rem;padding-block:clamp(2rem,6vw,4.2rem) 1rem}
html.dl .btmission__h1{margin:0 0 1rem;font-size:clamp(2.4rem,5vw,3.8rem)}
html.dl[lang="ar"] .btmission__h1{font-family:var(--font-ar-display)}
html.dl .btmission__lede{
  margin:0 0 2.2rem;font-family:var(--font-display);font-size:clamp(1.45rem,2.8vw,2.1rem);line-height:1.3;color:var(--cobalt);
  padding-block-end:1.6rem;border-block-end:1px solid var(--cobalt-200)
}
html.dl[lang="ar"] .btmission__lede{font-family:var(--font-ar-display);line-height:1.65;font-size:clamp(1.3rem,2.5vw,1.85rem)}
html.dl .btmission__part{margin-block:0 1.8rem}
html.dl .btmission__h2{margin:0 0 .45rem;font-size:clamp(1.35rem,2.4vw,1.75rem)}
html.dl[lang="ar"] .btmission__h2{font-family:var(--font-ar-display)}
html.dl .btmission__part p{margin:0;font-size:1.06rem;line-height:1.75;color:#2A2D33;max-inline-size:none}
html.dl[lang="ar"] .btmission__part p{font-size:1.1rem;line-height:1.95}
html.dl .btmission__cta{margin-block:2.4rem 0;padding-block-start:1.6rem;border-block-start:1px solid var(--cobalt-200)}

/* ---------- demonstrations: the frame ---------- */
html.dl .btdemos{padding-block:clamp(1.6rem,4.5vw,3rem) 1rem}
html.dl .btdemos__head{margin-block-end:1.4rem}
html.dl .btdemos__h1{margin:.2rem 0 .7rem;font-size:clamp(2rem,4.6vw,3.3rem)}
html.dl[lang="ar"] .btdemos__h1{font-family:var(--font-ar-display)}
html.dl .bttabs{display:flex;flex-wrap:wrap;gap:0;border-block-end:2px solid var(--cobalt);margin-block:0 1.6rem}
html.dl .bttab{
  font-size:.9rem;color:var(--cobalt);text-decoration:none;padding:.6rem .95rem;border:1px solid transparent;border-block-end:0;
  margin-block-end:-2px;white-space:nowrap
}
html.dl[lang="ar"] .bttab{font-family:var(--font-ar);font-size:.95rem}
html.dl .bttab:hover{background-image:var(--hatch-1)}
html.dl .bttab[aria-current="true"]{border-color:var(--cobalt);border-block-end:2px solid var(--porcelain);background:var(--porcelain);font-weight:600}
@media (max-width:40rem){
  html.dl .bttabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  html.dl .bttabs::-webkit-scrollbar{display:none}
  html.dl .bttab{padding:.55rem .7rem;font-size:.84rem}
}
html.dl .btpanel{margin-block:0 2.4rem}
html.js-demos.dl .btpanel:not(.is-on){display:none}
html.dl .btpanel__h{margin:0 0 .35rem;font-size:clamp(1.5rem,3vw,2.1rem)}
html.dl[lang="ar"] .btpanel__h{font-family:var(--font-ar-display)}
html.dl .btpanel__intro{margin:0 0 1.2rem;color:#3A3E46;max-inline-size:44rem}

/* ---------- 404 ---------- */
html.dl .btnotfound{padding-block:clamp(2rem,6vw,4rem)}
html.dl .btnotfound section{margin-block-end:2rem}

/* ---------- the demonstrations: forms ---------- */
html.dl .btdescribe{border:1px solid var(--cobalt-200);padding:clamp(1rem,2.6vw,1.6rem);background:var(--porcelain-2)}
html.dl .btdescribe__h{margin:0 0 .3rem;font-size:clamp(1.3rem,2.4vw,1.6rem)}
html.dl[lang="ar"] .btdescribe__h{font-family:var(--font-ar-display)}
html.dl .btform__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.9rem 1.2rem;margin-block:1rem .6rem}
html.dl .btfield{display:flex;flex-direction:column;gap:.3rem;min-inline-size:0}
html.dl .btfield__k{font-size:.8rem;font-weight:600;color:var(--cobalt)}
html.dl[lang="ar"] .btfield__k{font-size:.86rem}
html.dl .btfield__hint{font-size:.74rem;color:var(--muted)}
html.dl .btinput{
  font:inherit;font-size:.95rem;color:var(--ink);background:var(--porcelain);border:1px solid var(--cobalt-200);border-radius:0;
  padding:.55rem .6rem;min-inline-size:0;inline-size:100%
}
html.dl input.btinput{font-family:var(--font-mono)}
html.dl[lang="ar"] input.btinput::placeholder{font-family:var(--font-ar)}
html.dl .btinput:focus{outline:2px solid var(--cobalt);outline-offset:1px}
html.dl .btform__err{margin:.2rem 0 .6rem;padding:.5rem .7rem;border:1px solid var(--cobalt);color:var(--cobalt);font-size:.88rem}
html.dl .btform__acts{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:.4rem 0 0}

/* ---------- the demonstrations: the guide ---------- */
html.dl .btguide__page{padding:0}
html.dl .btguide .ghead__title{font-size:clamp(1.5rem,3vw,2.2rem);margin:.2rem 0 .3rem}
html.dl[lang="ar"] .btguide .ghead__title{font-family:var(--font-ar-display)}
html.dl .btguide .gsec__h{font-size:clamp(1.2rem,2.2vw,1.5rem)}
html.dl .btown{display:grid;gap:.35rem;margin-block:1rem 0}
html.dl .btown__row{display:flex;gap:.5rem;flex-wrap:wrap}
html.dl .btown__row .btinput{flex:1 1 14rem;font-family:inherit}
html.dl .btnext{margin-block-start:1.6rem}
html.dl .btattr{margin:.4rem 0 0}
html.dl .gstage__src a,html.dl .btattr a{color:var(--cobalt)}
html.dl .pp__swatch--1{background:rgba(36,67,126,.20)}
html.dl .pp__swatch--2{background:rgba(36,67,126,.40)}
html.dl .pp__swatch--3{background:rgba(36,67,126,.64)}

/* ---------- the spread: the middle half, hatched; the median ruled; the visitor's diamond ---------- */
html.dl .btspread{margin:1rem 0 .4rem;padding:.9rem 1rem .8rem;border:1px solid var(--rule);background:var(--porcelain-2)}
html.dl .btspread__h{font-size:.86rem;font-weight:600;color:var(--cobalt);margin:0 0 .4rem}
html.dl .btspread__per{font-weight:400;color:var(--muted)}
html.dl .btspread__svg{display:block;inline-size:100%;block-size:auto;max-inline-size:40rem}
html.dl .btspread__axis{stroke:var(--cobalt-200);stroke-width:1.2}
html.dl .btspread__frame{fill:none;stroke:var(--cobalt);stroke-width:1.2}
html.dl .btspread__med{stroke:var(--cobalt);stroke-width:3}
html.dl .btspread__lab{font-family:var(--font-mono);font-size:12px;fill:var(--ink)}
html.dl .btspread__unitline{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
html.dl .btspread__unit{fill:var(--ink);stroke:var(--porcelain);stroke-width:1.5}
html.dl .btspread__unitlab{font-family:var(--font-mono);font-size:12.5px;font-weight:600;fill:var(--ink)}
html.dl .btspread__legend{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;margin:.5rem 0 .4rem;font-size:.78rem;color:var(--muted)}
html.dl .btspread__key{display:inline-flex;align-items:center;gap:.35rem}
html.dl .btspread__boxkey{display:inline-block;inline-size:1.4rem;block-size:.75rem;border:1px solid var(--cobalt);background-image:var(--hatch-2,var(--hatch-1))}
html.dl .btspread__medkey{display:inline-block;inline-size:3px;block-size:.9rem;background:var(--cobalt)}
html.dl .btspread__cap{margin:.2rem 0 0;font-size:.8rem;color:#3A3E46;max-inline-size:none}
/* a statement's source runs the full width under it, so it never squeezes into the mark's column */
html.dl .btguide .st__src{grid-column:1 / -1}
@media (min-width:30.01rem){ html.dl .btguide .st__src{grid-column:2} }
html.dl[lang="ar"] .btmission .btmission__part p{font-size:1.16rem;line-height:2;color:var(--ink)}

/* ---------- inside a firm's own site: the drawn page ---------- */
html.dl .btinside,html.dl .bthow,html.dl .btreq{padding-block:clamp(1.6rem,4.5vw,3rem) 1rem}
html.dl .btfirmpage{margin:0 0 2rem;border:1px solid var(--cobalt);background:var(--porcelain-2);max-inline-size:62rem}
html.dl .btfirmpage__top{display:flex;justify-content:space-between;align-items:center;padding:.6rem .9rem;border-block-end:1px solid var(--cobalt-200)}
html.dl .btfirmpage__logo{border:1px dashed var(--cobalt-200);padding:.3rem .7rem;font-size:.8rem;color:var(--muted)}
html.dl .btfirmpage__nav{display:flex;gap:.4rem}
html.dl .btfirmpage__nav i{display:inline-block;inline-size:2.4rem;block-size:.45rem;background:var(--cobalt-050);border:1px solid var(--cobalt-200)}
html.dl .btfirmpage__body{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:1rem;padding:1rem}
@media (max-width:40rem){ html.dl .btfirmpage__body{grid-template-columns:minmax(0,1fr)} }
html.dl .btfirmpage__listing{display:grid;gap:.55rem;align-content:start}
html.dl .btfirmpage__pic{border:1px dashed var(--cobalt-200);background-image:var(--hatch-1);min-block-size:8.5rem;display:flex;align-items:flex-end;padding:.4rem;font-size:.75rem;color:var(--muted)}
html.dl .btfirmpage__short{inline-size:60%}
html.dl .btfirmpage__part{border:2px solid var(--cobalt);padding:.55rem .7rem;color:var(--cobalt);font-weight:600;font-size:.9rem;background:var(--porcelain)}
html.dl .btfirmpage__part--guide{display:grid;gap:.6rem;align-content:start}
html.dl .btfirmpage__lines{display:grid;gap:.4rem}
html.dl .btfirmpage__lines i{display:block;block-size:.5rem;border:1px solid var(--cobalt-200);background:var(--cobalt-050)}
html.dl .btfirmpage__lines i:nth-child(2){inline-size:80%}
html.dl .btfirmpage__lines i:nth-child(4){inline-size:60%;border-style:dashed;border-color:var(--unknown)}
html.dl .btfirmpage__no{display:inline-flex;align-items:center;justify-content:center;inline-size:1.4rem;block-size:1.4rem;border:1px solid var(--cobalt);font-family:var(--font-mono);font-size:.78rem;margin-inline-end:.35rem}
html.dl .btfirmpage__flow{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:0 1rem 1rem}
html.dl .btfirmpage__arrow{flex:1 1 3rem;min-inline-size:3rem;block-size:0;border-block-start:2px dashed var(--cobalt);position:relative}
html.dl .btfirmpage__inbox{border:1px solid var(--cobalt);padding:.55rem .8rem;font-size:.88rem;background-image:var(--hatch-1)}
html.dl .btparts{display:grid;gap:1.4rem;max-inline-size:62rem}
html.dl .btpart{padding-block-start:1rem;border-block-start:1px solid var(--cobalt-200)}
html.dl .btpart__h{margin:0 0 .3rem;font-size:clamp(1.25rem,2.2vw,1.55rem);display:flex;gap:.6rem;align-items:baseline}
html.dl[lang="ar"] .btpart__h{font-family:var(--font-ar-display)}
html.dl .btpart__no{font-family:var(--font-display);color:var(--cobalt);font-size:1.6em;line-height:1}
html.dl .btpart__where{margin:0 0 .6rem;color:#3A3E46}
html.dl .btpart__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.6rem}
@media (max-width:40rem){ html.dl .btpart__two{grid-template-columns:minmax(0,1fr)} }
html.dl .btpart__two p{margin:0;line-height:1.6}
html.dl .btpart__k{font-family:var(--font-mono);font-size:max(.7rem,12px);letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);margin-block-end:.2rem!important}
html.dl[lang="ar"] .btpart__k{font-family:var(--font-ar);letter-spacing:0;font-size:.85rem;font-weight:600;text-transform:none}
html.dl .btinside__interim{margin-block:1.8rem 0;max-inline-size:62rem}
html.dl .btinside__acts{display:flex;flex-wrap:wrap;gap:.6rem;margin-block-start:1.2rem}

/* ---------- how it works, and the privacy notice ---------- */
html.dl .bthow{max-inline-size:52rem}
html.dl .bthow__sec{padding-block:1rem .2rem;border-block-start:1px solid var(--cobalt-200)}
html.dl .bthow__h{margin:0 0 .5rem;font-size:clamp(1.3rem,2.4vw,1.7rem)}
html.dl[lang="ar"] .bthow__h{font-family:var(--font-ar-display)}
html.dl .bthow__sec p{margin:0 0 .8rem;line-height:1.75;max-inline-size:none;color:#2A2D33}
html.dl[lang="ar"] .bthow__sec p{font-size:1.05rem;line-height:1.95}
html.dl .bthow__notice{margin-block-start:1.2rem;font-size:.85rem}

/* ---------- request a demonstration ---------- */
html.dl .btreq__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.2rem,4vw,3rem);align-items:start}
@media (max-width:52rem){ html.dl .btreq__grid{grid-template-columns:minmax(0,1fr)} }
html.dl .btreq__form{display:grid;gap:.9rem;border:1px solid var(--cobalt);padding:clamp(1rem,2.6vw,1.6rem);background:var(--porcelain-2)}
html.dl .btreq__two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem}
@media (max-width:30rem){ html.dl .btreq__two{grid-template-columns:minmax(0,1fr)} }
html.dl .btreq__either{margin:-.5rem 0 0}
html.dl .btreq__consent{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.6rem;align-items:start;font-size:.92rem;line-height:1.55}
html.dl .btreq__consent input{inline-size:1.15rem;block-size:1.15rem;margin-block-start:.2rem;accent-color:var(--cobalt)}
html.dl .btreq__consent a{color:var(--cobalt)}
html.dl .btreq__err{margin:0;padding:.6rem .8rem;border:1px solid var(--cobalt);color:var(--cobalt)}
html.dl .btreq__err ul{margin:0;padding-inline-start:1.1rem}
html.dl .btreq__acts{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
html.dl .btreq__aside{border-inline-start:3px solid var(--cobalt);padding-inline-start:1rem}
html.dl .btreq__ork{margin:0 0 .3rem;font-weight:600;color:var(--cobalt)}
html.dl .btreq__aside a{color:var(--cobalt);font-weight:600}
html.dl .btreq__ok{border:1px solid var(--cobalt);padding:1.2rem 1.4rem;background-image:var(--hatch-1)}
html.dl .btreq__ok h2{margin:0 0 .4rem}
/* the honeypot: out of sight and out of reach for a person, still in the form for a program */
html.dl .bthp{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html.dl .btthanks,html.dl .btsend{padding-block:clamp(2rem,6vw,4rem)}

/* ---- cPanel 2.0, link 63, stage 2: the promotion site's pages ---------------------------------- */
/* the stated mark, as version 2.0 draws it (UnitGuideDemo_v2.0/site/site52.css) */
html.dl .epi--stated{border-style:double;border-width:3px;padding:0 .35rem}
/* home: four steps, two by two on a wide screen */
@media (min-width:60rem){ html.dl .bthome__steps4{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* his address, as a plain link */
html.dl .btmail{margin:.6rem 0 0}
html.dl .btmail__a{unicode-bidi:isolate}
html.dl .btmail--big{font-size:clamp(1.3rem,3.4vw,1.9rem);margin:1.2rem 0}
html.dl .btmail--big .btmail__a{text-decoration-thickness:2px;text-underline-offset:.25em;color:var(--cobalt-700)}
html.dl .btcontact{padding-block:clamp(1.6rem,4.5vw,3rem) 2rem}
/* how it works: contents, the three questions, the seven sections, the drawings */
html.dl .bthow__toc{margin:1rem 0 1.4rem;padding:.8rem 1rem;border:1px solid var(--cobalt-200);border-radius:var(--r);background:var(--porcelain-2)}
html.dl .bthow__tock{margin:0 0 .4rem;font-size:.85rem;color:var(--muted)}
html.dl .bthow__toc ol{margin:0;padding-inline-start:1.3rem;columns:2 14rem;column-gap:2rem}
html.dl .bthow__toc li{margin:0 0 .25rem;break-inside:avoid}
html.dl .btqs{list-style:none;margin:.4rem 0 1rem;padding:0;display:grid;gap:.8rem}
html.dl .btq{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.8rem;align-items:start;padding:.8rem;border:1px solid var(--cobalt-200);border-radius:var(--r);background:var(--porcelain-2)}
html.dl .btq__n{display:grid;place-items:center;inline-size:2rem;block-size:2rem;border-radius:50%;background:var(--cobalt-700);color:var(--porcelain);font-weight:600}
html.dl .bthow__sec .btq__title{margin:0 0 .4rem;font-weight:600;color:var(--ink)}
html.dl .bthow__sec .btq__with{margin:.7rem 0 .3rem;font-size:.9rem;color:var(--muted)}
html.dl .btq__opts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
html.dl .btq__opts .bxchip{display:inline-block;padding:.15rem .6rem;border:1px solid var(--cobalt-400);border-radius:999px;font-size:.9rem;background:var(--porcelain)}
html.dl .btsecs{margin:.2rem 0 1rem;padding-inline-start:1.4rem}
html.dl .btsecs li{margin:0 0 .3rem;line-height:1.6}
html.dl .btdrawfig{margin:.6rem 0 1rem;padding:.8rem;border:1px solid var(--cobalt-200);border-radius:var(--r);background:var(--porcelain-2)}
html.dl .btdraw{display:block;inline-size:100%;max-inline-size:34rem;block-size:auto;margin-inline:auto}
html.dl .btdraw__tile{fill:var(--porcelain);stroke:var(--cobalt-400);stroke-width:1}
html.dl .btdraw__tile--on{fill:var(--cobalt-200);stroke:var(--cobalt-700);stroke-width:1.5}
html.dl .btdraw__set{fill:var(--porcelain);stroke:var(--cobalt-400);stroke-width:1}
html.dl .btdraw__set--this{fill:var(--cobalt-200);stroke:var(--cobalt-700);stroke-width:1.5}
html.dl .btdraw__link{fill:none;stroke:var(--cobalt-700);stroke-width:1;stroke-dasharray:3 2}
html.dl .btdraw__frame{fill:none;stroke:var(--cobalt-700);stroke-width:1}
html.dl .btmarks{display:grid;gap:.35rem;margin:.3rem 0 1rem}
html.dl .bthow__sec .btmarks__line{margin:0;display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
html.dl .btbeside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:.4rem 0 1rem}
html.dl .btbeside__card{padding:.8rem;border:1px solid var(--cobalt-200);border-radius:var(--r);background:var(--porcelain-2);display:grid;gap:.45rem}
html.dl .bthow__sec .btbeside__k{margin:0;display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;font-size:.92rem}
html.dl .btbeside .btpage__cap{grid-column:1 / -1}
@media (max-width:30rem){ html.dl .btbeside{grid-template-columns:minmax(0,1fr)} }
/* a mark beside its explanation, on one row at every width */
html.dl .bthow__sec .btmarks__line{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:.6rem;align-items:baseline}
html.dl .btmarks__line .epi{justify-self:start}
/* link 66: the questions that deepen the three - titles only, no answers */
html.dl .bthow__sec .btfus{margin:.2rem 0 1rem;padding-inline-start:1.2rem;display:grid;gap:.35rem}
html.dl .bthow__sec .btfu{line-height:1.6}
html.dl .bthow__sec .btfu__t{font-weight:600;color:var(--ink)}
html.dl .bthow__sec .btfu__when{font-size:.88rem;color:var(--muted)}
/* SS-339 (29 October 2026, the owner's word 'confirm the site is mobile friendly'): no line of the page's own text under
   12 px on a phone. The marks (.epi, 2.0's .62rem mono) and the eyebrow (.66rem) are floored at 12 px; max() leaves the
   desktop sizes as they were (the root there is 19 px). The story's pictures are pictures and keep their type. */
html.dl .epi{font-size:max(.62rem,12px)}
html.dl[lang="ar"] .epi{font-size:max(.7rem,12px)}
html.dl .eyebrow{font-size:max(.66rem,12px)}
html.dl[lang="ar"] .eyebrow{font-size:max(.8rem,12px)}