/* pages21.css - the public pages of baseera.tech in cPanel 2.1's systems (SITE-2; plan 2.1, section 5).
   Built on shared/css/systems.css (type, the three grounds, plates, motion tokens, certainty as a voice). Nothing here is
   inline; motion lives in classes, plays once, and stops under reduced motion. Logical properties throughout, so the
   Arabic pages lead from the right edge; figures, drawings and plates are never mirrored. */

/* ---------------------------------------------------------------- the palette. SITE-3 (D-501): sandy beige and garden
   green with Delft blue, after his reference image. SITE-5 (D-511) re-weighed it as he ruled: the Delft blue the main
   colour (headings, the main buttons, the cobalt ground); SAND the secondary, in its shades - pale, the ground, the
   dune, deep - with a faint grain of sand on the sand grounds (assets/img/sand_grain*.webp, one tile in each ground's colour, held to the screen - painted once a screen, not down the whole page, which stalled the browser's full-page picture of the longest pages);
   green kept to small accents in muted shades (the rule under the top bar, the outlined button, the range's fill,
   the card's top edge), never a ground. The tokens 2.0's stylesheets and the systems read are redefined here, so every
   page and the guide's deck take them; aubergine (--unknown) keeps its one meaning, "not known", and is used for
   nothing else. */
:root{
  --sand-050:#F7F1E3;           /* pale sand: cards, panels, grout */
  --sand-100:#EEE5D1;           /* the sand: the reading ground */
  --sand-200:#E4D6B8;           /* the dune: the second reading ground */
  --sand-300:#D3C19A;           /* deeper sand: rules, dashed edges */
  --sand-500:#A2865A;           /* the grain's own tone */
  --sand-700:#6B5434;           /* deep sand: kickers and small type on the sand */
  --sand-900:#2E281F;           /* the night sand: the ground under the pictures */
  --porcelain:var(--sand-100);
  --porcelain-2:var(--sand-050);
  --porcelain-3:#E2D6BB;
  --rule:var(--sand-300);
  --muted:#6A6150;
  --garden:#5B6E4E;             /* the green accent, muted: a rule, an outline, a fill - never a ground */
  --garden-700:#3E5134;
  --garden-050:#E3E7CF;
  --s-plate-ink:var(--sand-900);
  --s-porcelain-type:#F7F1E3;
}
html.dl body{background-color:var(--porcelain);background-image:url(/assets/img/sand_grain.webp);background-attachment:fixed}
html.dl .sys .g-porcelain{background-color:var(--sand-100);background-image:url(/assets/img/sand_grain.webp);background-attachment:fixed}
.sys .g-dune{background-color:var(--sand-200);background-image:url(/assets/img/sand_grain_dune.webp);background-attachment:fixed;color:var(--ink)}
html.dl .sys .kicker{color:var(--sand-700)}
html.dl .topbar{border-block-end-color:var(--garden)}


/* ---------------------------------------------------------------- the frame */
html.dl .topbar{font-family:var(--f-head)}
html.dl[lang="ar"] .topbar{font-family:var(--f-head-ar)}
html.dl .sys.p21{display:block}
.p21 .p21s{padding-block:clamp(2.6rem,7vw,5.2rem)}
.p21 .p21s + .p21s{border-block-start:0}
html.dl .sys.p21 .hair{inline-size:fit-content;max-inline-size:100%}
html.dl .sys .g-plate .kicker,html.dl .sys .g-cobalt .kicker{color:var(--cobalt-200)}
html.dl .sys .g-plate .deck,html.dl .sys .g-cobalt .deck{color:var(--s-porcelain-type)}
.p21 .g-plate a.linkbtn,.p21 .g-cobalt a.linkbtn{color:var(--s-porcelain-type)}
.p21 .g-plate .plate__cap,.p21 .g-cobalt .plate__cap{color:var(--cobalt-200)}
.p21 .g-plate .plate__cap b,.p21 .g-cobalt .plate__cap b{color:var(--s-porcelain-type)}
.p21 .g-plate .plate__credit,.p21 .g-cobalt .plate__credit{color:var(--cobalt-200)}
.p21 .p21head{max-inline-size:44rem;margin-block-end:clamp(1.6rem,4vw,2.6rem)}
.p21 .p21head__demo,.p21 .p21hero__demo{font-size:.8rem;color:var(--muted);margin:.6rem 0 0}
.p21 .g-plate .p21hero__demo{color:var(--cobalt-200)}

/* buttons: a solid cobalt one, a light one for dark grounds */
.p21 .p21btn{display:inline-flex;align-items:center;min-block-size:44px;padding:.62rem 1.15rem;border:1.5px solid var(--cobalt);
  border-radius:var(--s-r);background:var(--cobalt);color:var(--s-porcelain-type);font-family:var(--f-head);font-weight:600;
  font-size:.96rem;text-decoration:none;transition:background var(--m-feedback) linear,color var(--m-feedback) linear}
html.dl[lang="ar"] .p21 .p21btn{font-family:var(--f-head-ar)}
.p21 .p21btn:hover,.p21 .p21btn:focus-visible{background:var(--cobalt-700)}
.p21 .p21btn--light{background:transparent;border-color:var(--s-porcelain-type);color:var(--s-porcelain-type)}
.p21 .p21btn--light:hover,.p21 .p21btn--light:focus-visible{background:var(--s-porcelain-type);color:var(--cobalt)}
.p21 .p21btn--ghost{background:transparent;color:var(--cobalt)}
.p21 .p21btn--garden{background:transparent;border-color:var(--garden);color:var(--garden-700)}
.p21 .p21btn--garden:hover,.p21 .p21btn--garden:focus-visible{background:var(--garden);color:var(--porcelain-2)}
.p21 .p21btn:focus-visible,.p21 .p21pick:focus-visible,.p21 summary:focus-visible{outline:3px solid var(--cobalt-200);outline-offset:3px}

/* ---------------------------------------------------------------- home 1: the aerial plate, one live card of the example */
.p21hero__grid{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
/* SITE-8 (D-563): B12 from above is off the hero, so its words stand alone, as wide as a deck reads well */
.p21hero__text{max-inline-size:46rem}
.p21hero__neutral{font-weight:600;color:var(--sand-700);margin:.2rem 0 1.2rem}
.p21hero__media{position:relative}
.p21hero__plate{overflow:hidden;border-radius:var(--s-r)}
.p21hero__plate picture{display:block;overflow:hidden;border-radius:var(--s-r)}
.p21live{position:relative;background:var(--porcelain);color:var(--ink);border-radius:var(--s-r);padding:1.1rem 1.2rem 1rem;
  border-block-start:4px solid var(--garden);box-shadow:0 10px 30px rgba(40,34,20,.22);margin:1rem 0 0;max-inline-size:30rem}
@media (min-width:960px){.p21live{position:absolute;inset-inline-end:-1rem;inset-block-end:5.6rem;margin:0;inline-size:min(26rem,78%)}}
html.dl .sys .p21live__h{font-size:1.06rem;line-height:1.3;margin:0 0 .3rem;color:var(--ink)}
.p21live__ask{font-family:var(--f-head);font-weight:600;font-size:1.35rem;color:var(--cobalt);margin:.1rem 0 .2rem}
html.dl[lang="ar"] .p21live__ask{font-family:var(--f-head-ar)}
.p21live .v{margin-block-start:.35rem;font-size:.92rem;line-height:1.5}
.p21live__status{font-size:.82rem;font-weight:600;color:var(--ink);margin:.55rem 0 .7rem}
.p21live__go{margin:0}
.p21band{display:block;inline-size:100%;block-size:auto;margin:.2rem 0 .1rem}
.p21band__axis{stroke:var(--rule);stroke-width:1.5}
.p21band__range{fill:var(--garden-050);stroke:var(--garden);stroke-width:1.5}
.p21band__mid{stroke:var(--cobalt);stroke-width:2.5}
.p21band__ask{fill:var(--ink)}
.p21band__pin{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.p21band__lab{font:600 13px var(--f-head);fill:var(--muted)}
.p21band__lab--ask{fill:var(--ink)}
@media (prefers-reduced-motion:no-preference){
  .p21band__range{transform-box:fill-box;transform-origin:0 50%;animation:p21-draw 900ms var(--m-ease-enter) 300ms 1 both}
  .p21band__mid,.p21band__ask,.p21band__pin,.p21band__lab--ask{animation:p21-fade 260ms linear 1100ms 1 both}
}
@keyframes p21-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes p21-fade{from{opacity:0}to{opacity:1}}

/* ---------------------------------------------------------------- home 2: three beats, a strip of uneven panels */
.p21beats__strip{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:var(--s-grout);background:var(--rule);border:var(--s-grout) solid var(--rule)}
.p21beat .p21d{max-block-size:9rem}
@media (min-width:860px){.p21beats__strip{grid-template-columns:5fr 7fr 4fr}}
.p21beat{background:var(--porcelain-2);padding:1.2rem 1.2rem 1.4rem;display:grid;grid-template-columns:auto 1fr;column-gap:1rem;align-items:start}
@media (min-width:860px){.p21beat{display:block;padding:1.4rem 1.4rem 1.6rem}.p21beat--2{padding-block-start:2.6rem}}
.p21beat .p21d{inline-size:5.5rem;block-size:auto;grid-row:span 3}
@media (min-width:860px){.p21beat .p21d{inline-size:8.5rem;margin-block-end:.6rem}}
.p21beat__fig{font-family:var(--f-head);font-weight:600;font-size:clamp(2.4rem,7vw,3.6rem);line-height:1;color:var(--cobalt);margin:0;unicode-bidi:isolate;direction:ltr;text-align:start}
html.dl .sys .p21beat__h{margin:.3rem 0 .2rem}
.p21beat__p{margin:0;color:var(--ink)}
.p21 .p21fig{font-family:var(--f-head);font-weight:600;font-variant-numeric:lining-nums;unicode-bidi:isolate;direction:ltr}
.p21beats__note{margin:1.2rem 0 0;font-size:.92rem;color:var(--muted);max-inline-size:52rem}

/* the Delft line drawings */
.p21d__ln{fill:none;stroke:var(--cobalt);stroke-width:1.5}
.p21d__soft{stroke:var(--cobalt-200)}
.p21d__chip{fill:none;stroke:var(--cobalt-400);stroke-width:1.2}
.p21d__on{fill:var(--cobalt);stroke:var(--cobalt)}
.p21d__sig{stroke:var(--cobalt);stroke-width:2}
.p21d__dash{stroke-dasharray:3 2}
.p21d__band{fill:var(--cobalt-050);stroke:var(--cobalt);stroke-width:1.5}
.p21d__tile{stroke:var(--porcelain);stroke-width:2}
.p21d__t0{fill:#24437E}.p21d__t1{fill:#3F5F9E}.p21d__t2{fill:#A7B6D3}.p21d__t3{fill:#E6EAF3}

/* ---------------------------------------------------------------- home 3: one real line, enlarged */
.p21lesson__grid{display:grid;gap:clamp(1.4rem,4vw,2.6rem);align-items:center}
@media (min-width:900px){.p21lesson__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.p21lesson__card{background:var(--porcelain);color:var(--ink);border-radius:var(--s-r);padding:clamp(1.2rem,3vw,2rem)}
html.dl .sys .p21lesson__card h2{color:var(--cobalt)}
html.dl .sys .p21lesson__card .kicker{color:var(--cobalt-400)}
.sys .p21line--big{grid-template-columns:1.6rem 1fr;margin:1rem 0 .4rem}
.sys .p21line--big .v__text{font-size:clamp(1.25rem,3.4vw,1.7rem);line-height:1.4;font-family:var(--f-head);font-weight:500;color:var(--ink)}
html.dl[lang="ar"] .sys .p21line--big .v__text{font-family:var(--f-head-ar);line-height:1.7}
.sys .p21line--big .v__sig{inline-size:1.4rem;border-block-start-width:3px}
.sys .p21line--big .v__first{font-size:.95rem;color:var(--cobalt-400);margin-block-start:.5rem}
.sys .p21line__src{font-size:max(.74rem,12px) !important;color:var(--muted) !important}
.p21lesson__after{font-size:.92rem;color:var(--muted);margin:1rem 0 0}
.p21lesson__plate{max-inline-size:26rem;justify-self:center}

/* ---------------------------------------------------------------- home 3: SITE-4, the seasons of 2025 (D-501). The four
   pictures stacked, winter at the bottom; pages21.js sets each one's opacity as the range moves, so nothing here moves
   by itself and nothing changes under reduced motion but the step. The outlines lie over all four and never move. */
.p21seasons{inline-size:100%}
.p21seasons__stage{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--s-r);background:var(--s-plate-ink)}
.p21seasons__layer,.p21seasons__lines{position:absolute;inset:0}
.p21seasons__layer .plate__img,.p21seasons__lines{display:block;inline-size:100%;block-size:100%;border-radius:0}
.p21seasons__layer + .p21seasons__layer{opacity:0}
.p21seasons__lines{pointer-events:none}
.p21seasons__now{margin:.6rem 0 0;font-size:.92rem;color:var(--s-porcelain-type)}
.p21seasons__now b{font-weight:600;margin-inline-end:.35rem}
.p21seasons__now span{color:var(--cobalt-200)}
.p21seasons__ctl{margin-block-start:.3rem}
.p21seasons__ctl[hidden]{display:none}
.p21seasons__lab{display:block;font-size:.76rem;color:var(--cobalt-200)}
.p21seasons__range{display:block;inline-size:100%;block-size:2.75rem;margin:0;accent-color:var(--porcelain);cursor:pointer;background:transparent}
.p21seasons__ticks{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;gap:.3rem}
html.dl .sys .p21seasons__tick{font:inherit;font-size:.8rem;line-height:1.2;min-block-size:2.75rem;padding:.35rem .7rem;border:1px solid rgba(238,229,209,.45);background:transparent;color:var(--s-porcelain-type);cursor:pointer}
html.dl .sys .p21seasons__tick[aria-current="true"]{background:var(--porcelain);color:var(--ink);border-color:var(--porcelain)}
html.dl .sys .p21seasons__range:focus-visible,html.dl .sys .p21seasons__tick:focus-visible{outline:2px solid var(--porcelain);outline-offset:3px}
.p21seasons__hint{margin:.5rem 0 0;font-size:.76rem;color:var(--cobalt-200)}

/* ---------------------------------------------------------------- home 4: for firms, the Buyer Card as an object */
.p21firms__grid{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media (min-width:900px){.p21firms__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.p21card{background:var(--porcelain-2);color:var(--ink);border-radius:var(--s-r);padding:1.1rem 1.3rem 1rem;max-inline-size:24rem;
  border-block-start:6px solid var(--cobalt-400);box-shadow:0 14px 34px rgba(6,16,40,.45);justify-self:center;inline-size:100%}
@media (prefers-reduced-motion:no-preference){.p21card{transform:rotate(-1.2deg)}html[dir="rtl"] .p21card{transform:rotate(1.2deg)}}
.p21card__k{font-family:var(--f-head);font-size:max(.72rem,12px);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt-400);margin:0}
html.dl[lang="ar"] .p21card__k{font-family:var(--f-head-ar);letter-spacing:0;font-size:.84rem}
.p21card__rung{font-family:var(--f-head);font-weight:600;font-size:1.2rem;color:var(--cobalt);margin:.2rem 0 .6rem}
html.dl[lang="ar"] .p21card__rung{font-family:var(--f-head-ar)}
.p21card__dl{margin:0;display:grid;gap:0}
.p21card__dl div{display:grid;grid-template-columns:8.5rem 1fr;gap:.6rem;padding:.38rem 0;border-block-start:1px solid var(--rule)}
.p21card__dl dt{font-size:.8rem;color:var(--muted)}
.p21card__dl dd{margin:0;font-size:.92rem;font-weight:500}
.p21card__foot{margin:.7rem 0 0;padding-block-start:.6rem;border-block-start:2px solid var(--cobalt);font-size:.86rem;font-weight:600;color:var(--cobalt)}

/* ---------------------------------------------------------------- home 5: the mission over the night lights */
.p21night__plate{margin:0}                /* SITE-8: the picture alone in its band */
.p21night__plate picture{display:block;max-block-size:22rem;overflow:hidden;border-radius:var(--s-r)}
.p21night__plate .plate__img{object-fit:cover;inline-size:100%;max-block-size:22rem}
.p21night__quote{margin:0;max-inline-size:44rem}
html.dl .sys .p21night__quote .voice{color:var(--s-porcelain-type)}
.p21write__grid{display:grid;gap:1.4rem;align-items:end}
@media (min-width:860px){.p21write__grid{grid-template-columns:2fr 1fr}.p21write__again{justify-self:end}}

/* ---------------------------------------------------------------- inside a firm's site: the parts lit in turn */
.p21inside__grid{display:grid;gap:clamp(1.4rem,4vw,2.6rem);align-items:start}
@media (min-width:980px){.p21inside__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}.p21page{position:sticky;inset-block-start:5.5rem}}
.p21page .btfirmpage__part{transition:box-shadow var(--m-enter) var(--m-ease-enter),background var(--m-enter) var(--m-ease-enter)}
.p21page .btfirmpage__part.is-lit{box-shadow:0 0 0 3px var(--cobalt);background:var(--cobalt-050)}
.p21inside__hint{font-size:.88rem;color:var(--muted);margin:0 0 .5rem}
.p21picks{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.p21pick{min-block-size:44px;padding:.45rem .8rem;border:1.5px solid var(--cobalt-200);border-radius:var(--s-r);background:var(--porcelain-2);
  color:var(--cobalt);font:600 .88rem var(--f-head);cursor:pointer;transition:background var(--m-feedback) linear,border-color var(--m-feedback) linear}
html.dl[lang="ar"] .p21pick{font-family:var(--f-head-ar)}
.p21pick[aria-pressed="true"]{background:var(--cobalt);border-color:var(--cobalt);color:var(--s-porcelain-type)}
.p21parts .p21part{transition:opacity var(--m-enter) linear}
.p21parts.has-pick .p21part:not(.is-on){opacity:.5}
.p21statement{font-family:var(--f-head);font-weight:600;font-size:clamp(1.3rem,3.6vw,1.9rem);line-height:1.3;max-inline-size:44rem;margin:0}
html.dl[lang="ar"] .p21statement{font-family:var(--f-head-ar);line-height:1.6}
.p21statement__sub{max-inline-size:44rem;color:var(--cobalt-200);margin:.8rem 0 1.4rem}
.p21acts{display:flex;flex-wrap:wrap;gap:.6rem;margin:0}

/* ---------------------------------------------------------------- how it works: panels beside one held drawing */
.p21how__strip{display:grid;gap:clamp(1.6rem,4vw,3rem)}
@media (min-width:980px){.p21how__strip{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}}
.p21panel{padding-block:clamp(1.4rem,4vw,2.4rem);border-block-start:2px solid var(--rule)}
.p21panel:first-child{border-block-start:0;padding-block-start:0}
.p21panel__n{font-family:var(--f-head);font-weight:600;font-size:.82rem;letter-spacing:.14em;color:var(--cobalt-400);margin:0 0 .3rem;unicode-bidi:isolate;direction:ltr;text-align:start}
.p21panel .btdrawfig{margin:1rem 0}
/* figures stay left to right inside, but in Arabic they stand at the right edge, where the line leads */
html[dir="rtl"] .p21panel__n,html[dir="rtl"] .p21beat__fig{text-align:right}
.p21more{margin-block-start:.8rem;border:1px solid var(--rule);border-radius:var(--s-r);background:var(--porcelain-2)}
.p21more>summary{cursor:pointer;min-block-size:44px;display:flex;align-items:center;padding:.4rem .9rem;font:600 .92rem var(--f-head);color:var(--cobalt)}
html.dl[lang="ar"] .p21more>summary{font-family:var(--f-head-ar)}
.p21more[open]>summary{border-block-end:1px solid var(--rule)}
.p21more>.bthow__sec{padding:.6rem .95rem .2rem;margin:0}
.p21more .bthow__h{font-size:1.02rem;margin:.6rem 0 .3rem}
.p21held{display:none}
@media (min-width:980px){
  .p21held{display:block;position:sticky;inset-block-start:6rem;align-self:start;margin:0;padding:1.2rem;background:var(--porcelain-2);border:1px solid var(--rule);border-radius:var(--s-r)}
}
.p21held__svg{display:block;inline-size:100%;block-size:auto}
.p21held__st{opacity:0;transition:opacity var(--m-card) var(--m-ease-enter)}
.p21held[data-step="1"] [data-st="1"],.p21held[data-step="2"] [data-st="2"],.p21held[data-step="3"] [data-st="3"],
.p21held[data-step="4"] [data-st="4"],.p21held[data-step="5"] [data-st="5"],.p21held[data-step="6"] [data-st="6"]{opacity:1}
.p21twolines{margin:.6rem 0 1rem;padding:.6rem .8rem;background:var(--tile);border-radius:var(--s-r)}
.p21how__close .bthow__sec{max-inline-size:48rem}
html.dl .sys .p21how__close .bthow__h,html.dl .sys .p21how__close h2{color:var(--s-porcelain-type);font-size:1.3rem}
html.dl .sys .p21how__close p{color:var(--s-porcelain-type)}

/* ---------------------------------------------------------------- our mission: the magazine manner over two plates */
.p21mission__plate picture{display:block;max-block-size:26rem;overflow:hidden;border-radius:var(--s-r)}
.p21mission__plate .plate__img{object-fit:cover;max-block-size:26rem;inline-size:100%}
html.dl .sys .p21mission__title{color:var(--s-porcelain-type);margin:1.6rem 0 .6rem}
html.dl .sys .p21mission__lede{color:var(--s-porcelain-type);max-inline-size:44rem;margin:0}
.p21mission__cols{display:grid;gap:clamp(1.2rem,3vw,2.2rem)}
@media (min-width:900px){.p21mission__cols{grid-template-columns:1fr 1fr}}
.p21mission__part h2{font-size:clamp(1.25rem,3vw,1.6rem) !important;margin:0 0 .4rem}
.p21mission__part p{margin:0;max-inline-size:38rem}
.p21principles{counter-reset:p;list-style:none;margin:1.4rem 0 1.8rem;padding:0;display:grid;gap:1rem;max-inline-size:48rem}
.p21principle{counter-increment:p;display:grid;grid-template-columns:2.6rem 1fr;column-gap:.8rem}
.p21principle::before{content:counter(p);grid-row:span 2;font:600 2rem/1 var(--f-head);color:var(--cobalt-200)}
.p21principle__h{font-weight:600;margin:0;color:var(--s-porcelain-type)}
.p21principle p{margin:0;color:var(--s-porcelain-type)}

/* ---------------------------------------------------------------- write to us, privacy, not found */
.p21plain__note{font-size:.84rem;color:var(--muted)}
.p21three{list-style:none;margin:1rem 0 1.2rem;padding:0;display:grid;gap:.4rem}
.p21three li{font-family:var(--f-head);font-weight:600;font-size:clamp(1.08rem,2.6vw,1.3rem);color:var(--cobalt);padding-inline-start:1.6rem;position:relative}
html.dl[lang="ar"] .p21three li{font-family:var(--f-head-ar)}
.p21three li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.65em;inline-size:1rem;border-block-start:2px solid var(--cobalt)}
.p21privacy__sec h2{font-size:1.15rem !important;margin:1.4rem 0 .3rem}
.p21nf__tiles{display:grid;grid-template-columns:repeat(3,2.2rem);gap:var(--s-grout);margin:0 0 1.4rem}
.p21nf__tile{block-size:2.2rem;background:var(--cobalt-200);border-radius:1px}
.p21nf__tile--gap{background:transparent;outline:1.5px dashed var(--sand-500);outline-offset:-2px}
.p21nf section{margin-block-end:1.4rem}

/* ---------------------------------------------------------------- the firm's side: the card as an object, the ledger */
.btfirmx .fxcard{box-shadow:0 14px 34px rgba(18,48,106,.18);border-block-start:6px solid var(--cobalt-400);background:var(--porcelain-2)}
.p21ledger__cols{display:grid;gap:var(--s-grout);background:var(--rule);border:var(--s-grout) solid var(--rule);margin-block-start:.8rem}
@media (min-width:760px){.p21ledger__cols{grid-template-columns:1fr 1fr}}
.p21ledger__col{background:var(--porcelain-2);padding:1rem 1.1rem}
.p21ledger__col--never{background:var(--porcelain-3)}       /* SITE-3: aubergine means only not known */
.p21ledger__k{font:600 .78rem var(--f-head);letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);margin:0 0 .5rem}
html.dl[lang="ar"] .p21ledger__k{font-family:var(--f-head-ar);letter-spacing:0;font-size:.9rem}
.p21ledger__col--never .p21ledger__k{color:var(--ink)}
.p21ledger__col ul{margin:0;padding-inline-start:1.1rem;display:grid;gap:.35rem}

/* ---------------------------------------------------------------- SITE-6 (D-530): Mr. Ahmed Kamel's remarks under the
   interface rules (R1 to R17 of .claude/skills/interface-rules). */

/* R9, R11: the wordmark. The logo larger than anything beside it in the bar, and the English 'Baseera' set in Amiri like
   the Arabic beside it - one family for both wordmarks, Amiri carrying Latin. These rules stand here, on every page,
   rather than in shared/css/language.css and base.css: those two are copied at build time from Unit Guide 2.0, read
   only, and a file of the same name in build/site/shared would replace the whole copy. The header's markup still says
   width="38" height="38"; the size here wins. */
html.dl .topbar .mark{align-items:center;gap:.55rem}
html.dl .topbar .mark__logo{inline-size:3.5rem;block-size:3.5rem;flex:none}
html.dl .mark__ar{font-family:var(--font-ar-display);font-weight:700;font-size:1.95rem;line-height:1;color:var(--cobalt)}
html.dl .mark__en{font-family:var(--font-ar-display);font-weight:700;font-size:1.6rem;line-height:1;letter-spacing:0;text-transform:none;color:var(--cobalt);opacity:1}
@media (max-width:640px){
  html.dl .topbar .mark__logo{inline-size:2.75rem;block-size:2.75rem}
  html.dl .mark__ar{font-size:1.6rem}
  html.dl .mark__en{font-size:1.3rem}
}

/* home: the hero speaks to the buyer; its one notice small; the card's place and asking price as its heading */
html.dl .sys .p21hero h1{font-size:clamp(2.6rem,7vw,4.4rem);line-height:1.02;margin:0 0 .7rem}
html.dl[lang="ar"] .sys .p21hero h1{line-height:1.3}
.p21hero .deck{font-size:clamp(1.05rem,1.9vw,1.2rem);max-inline-size:34rem}
html.dl[lang] .sys .p21live__h{font-size:1.02rem;line-height:1.4}
html.dl .sys .p21live__h .p21fig{color:var(--cobalt)}

/* R9, R4: the brand's three line drawings under the hero, a step each, the step its heading. The line pattern kept: each
   step hangs from a Delft rule. They rise in turn once and their lines draw themselves (pages21.js adds .rise); under
   reduced motion they are simply there. */
.p21 .p21steps{list-style:none;margin:0;padding-inline:0;padding-block:clamp(2.2rem,5vw,3.4rem) 0;display:grid;gap:clamp(1rem,3vw,2.2rem);grid-template-columns:repeat(3,minmax(0,1fr))}
.p21steps__i{display:grid;align-content:start;justify-items:start;gap:.7rem;padding-block-start:1.1rem;border-block-start:2px solid var(--cobalt)}
.p21steps .p21d{inline-size:100%;max-inline-size:12rem;block-size:auto}
html.dl[lang] .sys .p21steps__h{font-size:clamp(1.25rem,2.1vw,1.45rem);line-height:1.25;margin:0;color:var(--cobalt)}
.p21 .p21steps__more{margin-block:1.2rem 0}
html.dl[lang="ar"] .sys .p21steps__h,html.dl[lang="ar"] .sys .p21flow__h,html.dl[lang="ar"] .sys .p21night__h,html.dl[lang="ar"] .sys .p21live__h{line-height:1.55}
@media (max-width:640px){
  .p21 .p21steps{grid-template-columns:1fr;gap:.2rem}
  .p21steps__i{grid-template-columns:6.5rem minmax(0,1fr);align-items:center;column-gap:1rem;padding-block:.9rem}
  .p21steps .p21d{max-inline-size:6.5rem}
}
.p21steps__i:nth-child(2).rise{transition-delay:140ms}
.p21steps__i:nth-child(3).rise{transition-delay:280ms}
.p21steps__i.rise .p21d__ln{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.2s var(--m-ease-enter) 200ms}
.p21steps__i.rise.is-in .p21d__ln{stroke-dashoffset:0}

/* home: one line to Our mission, over the night picture (the builder's place for the new one: pages21.HOME_NIGHT_PLATE) */
html.dl[lang] .sys .p21night__h{font-size:clamp(1.4rem,3.6vw,2rem);line-height:1.25;margin:0;max-inline-size:40rem}
html.dl .sys .p21night__go{color:var(--s-porcelain-type);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.28em}
html.dl .sys .p21night__go:hover{text-decoration-thickness:2px}
html.dl .sys .p21night__go:focus-visible{outline:3px solid var(--cobalt-200);outline-offset:3px}
html.dl[lang] .sys .p21write h2{margin:0}

/* how it works: the questionnaire in the open - each step's title large, each question's title the largest thing on
   its card (R8), its options small under it; no line under a title that only says it again (R7) */
.p21flow{list-style:none;margin:.6rem 0 0;padding:0;display:grid}
.p21flow__step{padding-block:1.1rem;border-block-start:1px solid var(--rule)}
.p21flow__step:first-child{border-block-start:0;padding-block-start:.4rem}
html.dl[lang] .sys .p21flow__h{font-size:clamp(1.12rem,2.3vw,1.3rem);line-height:1.35;margin:0;color:var(--cobalt)}
html.dl .p21flow .btqs{margin:.8rem 0 0}
html.dl .p21flow .btq__title{margin:0 0 .5rem;font-family:var(--f-head);font-weight:600;font-size:clamp(1.3rem,2.9vw,1.6rem);line-height:1.25;color:var(--ink)}
html.dl[lang="ar"] .p21flow .btq__title{font-family:var(--f-head-ar);line-height:1.5}
html.dl .p21flow .btq__with{margin:.9rem 0 .3rem;font-size:.9rem;color:var(--muted)}
html.dl .p21flow .btfus{margin:.6rem 0 0;padding-inline-start:1.2rem;display:grid;gap:.35rem}
html.dl .p21flow .btfu{line-height:1.6}
html.dl .p21flow .btfu__t{font-weight:600;color:var(--ink)}
html.dl .p21flow .btfu__when{font-size:.88rem;color:var(--muted)}
.p21flow__step--prefs p{margin:.45rem 0 0;max-inline-size:44rem}
/* SS-337 (D-800): the chat's opening question on How it works, quoted as the assistant's first line, at the size the
   question titles had (the largest thing in its place, the interface rules 8); the brief's line under it as a deck */
html.dl .p21flow .p21chat__q{margin:0 0 .6rem;font-family:var(--f-head);font-weight:600;font-size:clamp(1.3rem,2.9vw,1.6rem);line-height:1.25;color:var(--ink);max-inline-size:44rem}
html.dl[lang="ar"] .p21flow .p21chat__q{font-family:var(--f-head-ar);line-height:1.5}
.p21 .p21flow .p21chat__p{margin:0;max-inline-size:44rem}
.p21 .p21flow__after{margin:.4rem 0 0;max-inline-size:44rem}

/* R10: colour codes in the brand's hues - moss for, stop against, pending between; never a generic green and red. The
   brand's own values (shared/css/tokens.css: --moss, --stop, --pending) are taken here as page tokens, because 2.0's
   language.css folds those three into the one cobalt pigment for the whole site, the guide's deck among it, and these
   pages do not change the deck. Used on the firm's side's ledger: what a firm receives ruled in moss, what it never
   receives in stop. */
:root{--p21-for:#2E6350;--p21-against:#7A2E2E;--p21-between:#8A6A1F}
html.dl .p21ledger .p21ledger__col{border-block-start:3px solid var(--p21-for)}
html.dl .bthow__sec .p21ledger__col .p21ledger__k{color:var(--p21-for)}
html.dl .p21ledger .p21ledger__col--never{border-block-start-color:var(--p21-against)}
html.dl .bthow__sec .p21ledger__col--never .p21ledger__k{color:var(--p21-against)}

/* ---------------------------------------------------------------- motion once; nothing under reduced motion */
@media (prefers-reduced-motion:reduce){
  .p21home *,.p21inside *,.p21how *,.p21mission *{animation:none !important;transition-duration:1ms !important}
  .p21steps__i .p21d__ln{stroke-dasharray:none !important;stroke-dashoffset:0 !important}
  .p21card{transform:none !important}
}
/* SITE-8 (D-563): a heading kept for screen readers and search engines, out of sight */
.p21vh{position:absolute !important;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}


/* ================================================================ cPanel 2.2 (15 October 2026). The owner's words: "the
   colors of the site need to complement the delft blauw; I don't like the brownish black colour used. Please make sure
   other complementing colours are used. Arabic font is good, in english only stick with times new roman." And: make
   space for interactive, dynamic illustrations around the site, without making them yet.
   The tokens are set on html.dl, not :root, because 2.0's language.css (copied at build time, read only) sets its own on
   html.dl, which outranks :root - the reason this file's earlier :root values for --muted and --ink never showed. */

/* ---------------------------------------------------------------- 1. the palette: the Delft blue and its complements.
   The blue stays the main colour and the sand the ground; the brown blacks and brown greys go; their places are taken by
   the night the Delft blue falls into, a Delft-black ink and a cool slate. The complements of the blue - terracotta and
   ochre, the warm earths of polychrome Delft - come in small: terracotta for the kickers and small labels, ochre kept for
   the pictures (lamplight, the moon's glow). The garden green keeps its small accents. Contrast on the sand, measured:
   ink 12.9 to 1, slate 5.5, terracotta 5.8; on the night ground the porcelain type is 15.3 to 1. */
html.dl{
  --delft-night:#0E1A35;        /* the ground under the pictures (was #2E281F, a brown black) */
  --ink:#172038;                /* the reading ink, a Delft black (was #16150F, a brown black) */
  --ink-soft:#4F5B73;
  --muted:#4F5B73;              /* small type, a cool slate (was #5A5347, a brown grey) */
  --terra:#B65B3A;              /* terracotta, the warm complement: fills and accents */
  --terra-700:#8E3F25;          /* terracotta deep enough to read on the sand: kickers, small labels */
  --ochre:#C99A3B;              /* ochre: lamplight and the moon's glow in the pictures; never type on the sand */
  --ochre-050:#F4E8C8;
  --sand-700:var(--terra-700);  /* the old deep-sand slot (kickers) now terracotta, so 2.0's sheets that read it follow */
  --sand-900:var(--delft-night);
  --s-plate-ink:var(--delft-night);
}
.p21live{box-shadow:0 10px 30px rgba(14,26,53,.22)}

/* ---------------------------------------------------------------- 2. English in Times New Roman only; Arabic unchanged.
   Times New Roman is not a web font and is not sent: Windows and Apple devices have it; elsewhere the stack falls to
   Tinos or Liberation Serif, drawn to the same widths, then to the device's own serif. Every English family the pages
   name - headings, body, the voice, the figures' mono - points to it, on the English pages and on any English words
   inside an Arabic page; the English wordmark too. The serif's smaller letters are set a step larger to read the same. */
html.dl{--font-en:"Times New Roman",Times,Tinos,"Liberation Serif","Nimbus Roman",serif}
html.dl[lang="en"],html.dl [lang="en"]{--f-head:var(--font-en);--f-voice:var(--font-en);--font-display:var(--font-en);
  --font-body:var(--font-en);--font-mono:var(--font-en)}
html.dl[lang="en"] body,html.dl[lang="ar"] [lang="en"]{font-family:var(--font-en)}
html.dl .mark__en{font-family:var(--font-en)}
html.dl[lang="en"] .sys{font-size:18px;letter-spacing:.003em}
@media (min-width:900px){html.dl[lang="en"] .sys{font-size:19px}}
html.dl[lang="en"] .sys h1,html.dl[lang="en"] .sys h2,html.dl[lang="en"] .sys h3,html.dl[lang="en"] .sys .sys-head{letter-spacing:-.005em}
/* the small type outside the reading column, measured at 12 to 15 px in the serif, a step up so it reads */
@media (min-width:60rem){html.dl[lang="en"] .topbar__nav .navlink{font-size:.97rem}}
html.dl[lang="en"] footer p{font-size:.88rem}
html.dl[lang="en"] .plate__cap,html.dl[lang="en"] .p21plain__note{font-size:.86rem}
html.dl[lang="en"] .bxchip{font-size:.95rem}
html.dl[lang="en"] .p21more>summary{font-size:1rem}

/* ---------------------------------------------------------------- 3. the places for the illustrations (pages.py, ILL).
   Each place is held at its final proportion, so nothing moves when a picture arrives. A stage holds four layers that
   can move on their own - the sky and the moon, the room or street, the people, what stands in front of them - each
   filled by one inline SVG that covers the stage. The stage is a size container, so a picture can size its parts
   to the stage (cqi units). --ill-horizon is the height of the horizon in every outdoor picture, so neighbouring
   pictures can run into one another. An empty place shows a quiet frame, its horizon dotted and its beat's name, so its
   size can be judged on the page; the frame goes the moment the place is filled. A picture is decoration (aria-hidden):
   the words beside it carry the meaning. Pictures are never mirrored on the Arabic pages. */
.ill{--ill-ratio:4/3;--ill-horizon:62%;margin:0;position:relative;inline-size:100%;min-inline-size:0}
.ill__stage{position:relative;inline-size:100%;aspect-ratio:var(--ill-ratio);overflow:hidden;border-radius:var(--s-r);
  container-type:inline-size;isolation:isolate}
.ill__layer{position:absolute;inset:0;pointer-events:none}
.ill__layer>svg{display:block;inline-size:100%;block-size:100%;overflow:visible}
.ill__sky{z-index:0}.ill__set{z-index:1}.ill__cast{z-index:2}.ill__fore{z-index:3}
.ill[data-state="empty"] .ill__stage{background:rgba(18,48,106,.045);outline:1px dashed rgba(18,48,106,.34);outline-offset:-1px}
.ill[data-state="empty"] .ill__stage::after{content:"";position:absolute;inset-inline:0;inset-block-start:var(--ill-horizon);
  border-block-start:1px dotted rgba(18,48,106,.28)}
.g-cobalt .ill[data-state="empty"] .ill__stage,.g-plate .ill[data-state="empty"] .ill__stage{background:rgba(247,241,227,.05);outline-color:rgba(247,241,227,.4)}
.g-cobalt .ill[data-state="empty"] .ill__stage::after,.g-plate .ill[data-state="empty"] .ill__stage::after{border-block-start-color:rgba(247,241,227,.3)}
.ill__ph{position:absolute;left:.8rem;bottom:.6rem;z-index:4;font:italic .8rem/1.3 var(--font-en);color:inherit;opacity:.6}

/* the shapes. hero 5:4 - the prologue beside the home page's words; wide 16:9 - under the firms' words; close 3:2 - the
   epilogue beside the last band's words; side 4:3 - beside a page's heading; held 5:4 - held beside the panels of For
   Buyers; panel 2:1 - a short one in each panel of For Buyers on a narrow screen; strip 2:1 on a narrow screen, 5:2 on a
   wide one - under a band of words. On a phone no picture is taller than about two fifths of the screen, so the words
   and the next step stay in sight. */
.ill--hero{--ill-ratio:5/4}
.ill--wide{--ill-ratio:16/9;max-inline-size:34rem;margin-block-start:clamp(1.4rem,3vw,2.2rem)}
.ill--close{--ill-ratio:3/2}
.ill--side{--ill-ratio:4/3}
.ill--held{--ill-ratio:5/4}
.ill--panel{--ill-ratio:2/1;margin-block:.8rem 1.1rem}
.ill--strip{--ill-ratio:2/1;max-inline-size:60rem;margin-inline:auto}
.ill--after{margin-block-start:clamp(2rem,5vw,3.4rem)}
@media (min-width:900px){.ill--strip{--ill-ratio:5/2}}
@media (max-width:899.98px){
  .ill--hero{inline-size:min(100%,calc(42svh * 5 / 4));justify-self:center}
  .ill--side,.ill--close{inline-size:min(100%,calc(40svh * 4 / 3));justify-self:center}
}

/* home: the hero's words and the prologue side by side; the three steps stay under both */
@media (min-width:900px){.p21hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
/* home: the last band, its words and the epilogue side by side */
.p21write__grid{align-items:center}
.p21write__text{display:grid;gap:1.2rem;justify-items:start}
.p21write__text .btmail{margin:0}
@media (min-width:860px){.p21write__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}

/* For Brokers and the example: the heading's words and a place beside them, lined up with the columns under them */
.p21 .p21head--ill{max-inline-size:none;display:grid;gap:clamp(1.4rem,4vw,2.6rem);align-items:center}
.p21head__text{max-inline-size:44rem}
@media (min-width:980px){.p21 .p21head--ill{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}
.exhead--ill{display:grid;gap:clamp(1.4rem,4vw,2.6rem);align-items:center}
@media (min-width:980px){.exhead--ill{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}

/* For Buyers: the held place above the held drawing, which gets smaller so the two stay in one screen; the short places
   in the panels only where the held one is not shown */
@media (min-width:980px){
  .p21held .ill--held{inline-size:min(100%,calc((100svh - 21rem) * 5 / 4));margin:0 auto .9rem}
  .p21held .p21held__svg{max-block-size:9.5rem}
  .ill--panel{display:none}
}

/* Write to us: the words and the place side by side on a wide screen */
.p21contact__grid{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
.p21contact__text{max-inline-size:40rem}
@media (min-width:900px){.p21contact__grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}