/* ==========================================================================
   Vistaria — PLATE.

   The whole visual world in one file. It loads LAST and overrides values in
   `tokens.css` and in the legacy inline block, so both design-system branches
   land on the same look without either being rewritten. Names are never
   changed here — only values — because fifty-five templates read these names
   and a rename is fifty-five silent breakages.

   The rule, taken from the logomark rather than from taste: the V is built
   from extruded facets with a lit top face and a darker side. So every raised
   thing here is a flat plane with a SOLID offset in a darker tone of its own
   colour. No blur, no gradient, no glow, no radius. See DESIGN.md.
   ========================================================================== */

/* ⚠️ THE RESET, and why it lives here.

   `box-sizing:border-box` was declared ONLY in the legacy inline block in
   _lab_head.html — the block that is skipped entirely when a page sets
   `ds_fusion`. So seven pages (team, property, seeker setup, support agent,
   manager, sales report, IG results) had been running on the browser default,
   `content-box`, since the fusion branch was introduced.

   It was survivable while borders were 1px and added 2px to a width. This
   world's borders are 3px, so every bordered element grew by 6px and the team
   page began overflowing its viewport horizontally — first visible in RTL,
   where the overflow runs off the start edge instead of the end.

   Declared here because plate.css is the one stylesheet both branches load.
*/
*,*::before,*::after{box-sizing:border-box}

@font-face{
  font-family:'Archivo';
  src:url('/static/lab/fonts/Archivo-var.woff2') format('woff2-variations');
  font-weight:100 900; font-stretch:62% 125%; font-display:swap;
}

:root,
html[data-ds="fusion"]{
  /* ── ground and ink ─────────────────────────────────────────────────── */
  --bg:#F4F2EA;
  --bg2:#EAE7DC;
  --surface:#FFFFFF;
  --raised:#FFFFFF;
  --inset:#EAE7DC;
  --text:#101418;
  --ink:#101418;
  --muted:#525862;
  --faint:#6A7079;
  --dim:#6A7079;

  /* ⚠️ Rules are INK, not a tint. A hairline grey rule is the card look this
     world replaced; a plate is bounded by a real edge. */
  --line:rgba(16,20,24,.92);
  --line-soft:rgba(16,20,24,.16);
  --line-bright:rgba(16,20,24,.92);
  --line-field:rgba(16,20,24,.92);

  /* ── the logo's own colours ─────────────────────────────────────────── */
  --lime:#BAE93C;   --lime-x:#7FA524;
  --teal:#0E7567;   --teal-x:#08453C;

  /* ⚠️ `--action` is TEAL, not lime, and this is deliberate.
     #BAE93C on white is 1.4:1 — invisible as type. Components use --action
     for text, borders and fills interchangeably, so it must be a colour that
     survives all three. Lime is a FIELD colour: ink on lime is 9.2:1, and it
     is applied by the components that own a full plane, never to a word. */
  --action:#0E7567;  --action-hi:#0A5D52;  --action-text:#FFFFFF;
  --on-action:#FFFFFF;
  --signal:#0E7567;  --signal-faint:rgba(14,117,103,.10);
  --ok:#0E7567;
  --danger:#B4231F;  --on-danger:#FFFFFF;
  --warn:#8A5109;

  --action-rgb:14,117,103;
  --signal-rgb:14,117,103;
  --text-rgb:16,20,24;
  --bg-rgb:244,242,234;
  --surface-rgb:255,255,255;
  --raised-rgb:255,255,255;

  /* ── depth is a solid offset ────────────────────────────────────────── */
  --el-1:3px 3px 0 var(--ink);
  --el-2:6px 6px 0 var(--ink);
  --el-3:9px 9px 0 var(--ink);
  --float:6px 6px 0 var(--ink);

  /* ⚠️ Zeroed, not reduced. A 2px radius on a plate reads as a rounding
     mistake rather than a decision; the world has corners. */
  --r-s:0; --r-m:0; --r-l:0; --r-xl:0;

  /* ── type ───────────────────────────────────────────────────────────── */
  --font:'Archivo',system-ui,-apple-system,"Segoe UI",Roboto,
         "Noto Sans","Noto Sans SC","Noto Sans JP","Noto Sans KR",sans-serif;
  --mono:'Archivo',ui-monospace,SFMono-Regular,Consolas,monospace;

  /* ⚠️ The z-ladder is declared HERE, globally, not only in the fusion branch.
     The masthead rule below says `z-index:var(--z-nav)`, and `--z-nav` used to
     exist only under [data-ds="fusion"]. On a legacy page the variable was
     undefined, the declaration became invalid, z-index computed to `auto`, and
     a sticky element with no stacking context lets the page scroll straight
     over it. The header looked transparent; it was actually underneath. */
  --z-nav:80; --z-progress:90; --z-modal:100; --z-toast:110;

  /* ── ambient effects: off. paper does not glow. ─────────────────────── */
  --amb-warm:0; --amb-cool:0; --amb-spot:0; --grain-op:0;
  --sheen:transparent;
  --scrim:rgba(16,20,24,.62);
  --tint-hover:rgba(16,20,24,.07);
  --shimmer:rgba(16,20,24,.06);
  --spinner-track:rgba(16,20,24,.18);

  /* the sample-report artifact keeps its own warmer paper */
  --paper:#FBF8EF; --paper-rule:rgba(16,20,24,.16); --paper-edge:rgba(16,20,24,.2);
  --paper-accent:#0E7567;
}

/* Arabic script has no width axis and no capitals — it gets Vazirmatn and the
   Latin display treatment is scoped away from it in the component rules. */
html[dir="rtl"], html[data-ds="fusion"][dir="rtl"]{
  --font:'Vazirmatn',system-ui,-apple-system,sans-serif;
  --mono:'Vazirmatn',ui-monospace,monospace;
}

/* ══ The world's own primitives ════════════════════════════════════════ */
body{
  background:var(--bg) !important;
  background-image:none !important;   /* the grid texture belonged to the old world */
  color:var(--text);
}

/* Nothing in this world is round. Stated once, globally, rather than hunted
   down in fifty-five files — a single radius that survives is the whole
   difference between a plate and a card. */
:where(button,input,select,textarea,a,div,section,article,aside,header,footer,
       nav,span,img,svg,table,td,th,li,ul,ol,label,form,dialog,details,summary){
  border-radius:0 !important;
}

::selection{background:var(--lime);color:var(--ink)}

:where(a,button,input,select,textarea,[role=button],[role=switch],[tabindex]):focus-visible{
  outline:3px solid var(--ink);outline-offset:3px;
}

/* ══ Plate utilities — the vocabulary pages build with ═════════════════ */
.pl        {box-shadow:6px 6px 0 var(--ink)}
.pl-sm     {box-shadow:4px 4px 0 var(--ink)}
.pl-teal   {box-shadow:6px 6px 0 var(--teal-x)}
.pl-lime   {box-shadow:6px 6px 0 var(--lime-x)}
.plate-ink {background:var(--ink);color:var(--bg)}
.plate-lime{background:var(--lime);color:var(--ink)}
.plate-teal{background:var(--teal);color:#fff}

/* The display setting. ⚠️ Latin only — see DESIGN.md. */
.dsp{font-weight:900;font-stretch:68%;letter-spacing:-.042em;line-height:.9;
     text-transform:uppercase}
html[dir="rtl"] .dsp,
html[lang^="ja"] .dsp, html[lang^="zh"] .dsp, html[lang^="ko"] .dsp{
  font-stretch:100%;text-transform:none;letter-spacing:-.01em;line-height:1.15;
}
.lbl{font-weight:740;font-stretch:114%;font-size:.68rem;letter-spacing:.12em;
     text-transform:uppercase}
html[dir="rtl"] .lbl{font-stretch:100%;letter-spacing:.02em;text-transform:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ==========================================================================
   The landing, in the plate world. Every section is one figure and at most
   two short lines — the rule from DESIGN.md, enforced by the layout itself:
   there is nowhere on a tile for a third sentence to go.
   ========================================================================== */

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── statement + field, on one line at desk width ───────────────────────── */
.pl-top{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(1.2rem,3vw,3rem);
  flex-wrap:wrap;padding:clamp(1.4rem,3.4vw,2.4rem) clamp(1.1rem,3vw,2.4rem) clamp(1.2rem,2.6vw,1.7rem)}
.pl-h1{font-size:clamp(2.2rem,5.6vw,4.6rem);margin:0}
.pl-h1 mark{background:var(--lime);color:var(--ink);padding:0 .07em}
.pl-form{flex:0 1 32rem;min-width:min(100%,20rem)}
.pl-row{display:flex;gap:.6rem}
.pl-row .field{flex:1 1 11rem;min-width:0;font:inherit;font-weight:700;font-size:1rem;
  background:#fff;color:var(--ink);border:3px solid var(--ink);padding:.8rem .95rem}
.pl-go{font:inherit;font-weight:900;font-stretch:88%;font-size:1rem;background:var(--lime);
  color:var(--ink);border:3px solid var(--ink);padding:.8rem 1.4rem;cursor:pointer;
  box-shadow:6px 6px 0 var(--ink);white-space:nowrap;text-transform:uppercase;
  display:inline-block;text-decoration:none;text-align:center}
html[dir="rtl"] .pl-go{text-transform:none}
.pl-go:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.pl-fine{font-weight:640;font-size:.83rem;color:var(--muted);margin-top:.75rem}
.pl-form .estep{margin-top:.6rem;display:none}
.pl-form .estep.on{display:block}
.pl-form .estep .field{width:100%;font:inherit;font-weight:640;background:#fff;color:var(--ink);
  border:3px solid var(--ink);padding:.7rem .9rem;margin-top:.45rem}
.pl-form .hint{font-weight:640;font-size:.85rem;margin-top:.55rem}

/* ── the five ───────────────────────────────────────────────────────────── */
.pl-team{display:grid;grid-template-columns:repeat(5,1fr);border-top:3px solid var(--ink)}
@media(max-width:1080px){.pl-team{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pl-team{grid-template-columns:1fr}}
.pl-team .st{border-inline-end:3px solid var(--ink);border-bottom:3px solid var(--ink);
  display:grid;grid-template-rows:1fr auto;min-height:clamp(20rem,54vh,31rem)}
.pl-team .st:last-child{border-inline-end:0}
.pl-team .art{display:grid;place-items:center;padding:1.8rem 1.2rem;background:#fff}
.pl-team .fill-lime .art{background:var(--lime)}
.pl-team .fill-ink .art{background:var(--ink)}
/* ⚠️ FIXED, not min: a min-height still grows on a third wrapped line, and
   five captions at five heights puts the dividing rule at five heights, which
   is exactly what reads as unfinished. Copy is written to fit two lines. */
.pl-team .cap{padding:.72rem clamp(.8rem,1.4vw,1.05rem) .9rem;border-top:3px solid var(--ink);
  height:6.4rem}
.pl-team .cap .l{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.pl-team .cap h3{font-weight:900;font-stretch:80%;font-size:clamp(1rem,1.35vw,1.2rem);letter-spacing:-.03em}
.pl-team .cap b{font-weight:880;font-stretch:84%;font-size:.98rem;white-space:nowrap}
.pl-team .cap b em{font-style:normal;font-weight:620;font-stretch:110%;font-size:.72rem;color:var(--muted)}
.pl-team .cap b.tbd{font-weight:700;font-stretch:108%;font-size:.76rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em}
.pl-team .cap p{margin-top:.4rem;font-weight:530;font-size:.875rem;line-height:1.42;color:#2E343C}

/* ── bands: pricing, faq ────────────────────────────────────────────────── */
.pl-band{border-bottom:3px solid var(--ink)}
.pl-bandhead{background:var(--ink);color:var(--bg);padding:.65rem clamp(1.1rem,3vw,2.4rem);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:baseline}
.pl-bandhead b{font-weight:880;font-stretch:88%;font-size:1.02rem}
.pl-bandhead .lbl{color:#A9B0BA}
.pl-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.pl-tiers .tier{padding:1.2rem clamp(1rem,2vw,1.5rem) 1.4rem;border-inline-end:3px solid var(--ink);
  display:flex;flex-direction:column;gap:.75rem}
.pl-tiers .tier:last-child{border-inline-end:0}
.pl-tiers .tier.pick{background:var(--lime)}
.pl-tiers .th{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;flex-wrap:wrap;
  padding-bottom:.6rem;border-bottom:3px solid var(--ink)}
.pl-tiers .th h3{font-weight:900;font-stretch:82%;font-size:1.2rem;letter-spacing:-.03em}
.pl-tiers .th b{font-weight:900;font-stretch:76%;font-size:1.5rem;letter-spacing:-.03em}
.pl-tiers .th b em{font-style:normal;font-weight:620;font-stretch:110%;font-size:.72rem;color:var(--muted)}
.pl-tiers ul{list-style:none;display:grid;gap:.42rem;flex:1 1 auto}
.pl-tiers li{font-weight:530;font-size:.88rem;line-height:1.4;padding-inline-start:1.1rem;position:relative}
.pl-tiers li::before{content:"";position:absolute;inset-inline-start:0;top:.42em;
  width:.5rem;height:.5rem;background:var(--teal)}
.pl-tiers .tier.pick li::before{background:var(--ink)}
.tier-go{font-size:.9rem;padding:.62rem 1rem}

.pl-faq{display:grid}
.pl-faq .fitem{border-bottom:2px solid var(--line-soft)}
.pl-faq .fitem:last-child{border-bottom:0}
.pl-faq .fq{width:100%;text-align:start;background:none;border:0;font:inherit;font-weight:780;
  font-size:1rem;color:var(--ink);padding:1rem clamp(1.1rem,3vw,2.4rem);cursor:pointer;
  display:flex;justify-content:space-between;gap:1rem;align-items:center}
.pl-faq .fa{display:none;padding:0 clamp(1.1rem,3vw,2.4rem) 1.1rem;max-width:62ch}
.pl-faq .fitem.on .fa{display:block}
.pl-faq .fa p{font-weight:520;font-size:.95rem;line-height:1.55;color:var(--muted)}

/* ── close ──────────────────────────────────────────────────────────────── */
.pl-close{padding:clamp(2rem,5vw,3.4rem) clamp(1.1rem,3vw,2.4rem)}
.pl-close h2{font-size:clamp(1.9rem,4.4vw,3.4rem);margin-bottom:1.2rem;max-width:18ch}
.pl-close form{max-width:34rem}
.pl-close .success,.pl-form .success{display:none}
.pl-close .success.on,.pl-form .success.on{display:block}

/* ── the masthead, in the plate world ───────────────────────────────────── */
#nav{background:var(--bg);border-bottom:3px solid var(--ink);position:sticky;top:0;z-index:var(--z-nav)}
#nav .nav-in{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;
  max-width:none;padding:.8rem clamp(1.1rem,3vw,2.4rem)}
#nav .logo{font-weight:900;font-stretch:70%;font-size:1.36rem;letter-spacing:-.045em;
  text-decoration:none;color:var(--ink)}
#nav .logo span{color:var(--teal)}
#nav .nav-links{display:flex;gap:1.3rem}
#nav .nav-links a{color:var(--ink);text-decoration:none;font-weight:680;font-stretch:108%;font-size:.85rem}
#nav .nav-links a:hover{background:var(--lime)}
#nav .nav-actions{display:flex;gap:.6rem;align-items:center}
#nav .btn{border:3px solid var(--ink);background:var(--bg);color:var(--ink);
  font-weight:800;font-stretch:96%;text-decoration:none;box-shadow:none}
/* the one lime plate in the masthead — the page's primary action */
#nav .btn-fill,#nav .nav-cta{background:var(--lime);color:var(--ink);border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink)}
#nav .btn-fill:active,#nav .nav-cta:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
#nav .tgl{border:3px solid var(--ink);background:var(--bg);color:var(--ink);
  width:2.3rem;height:2.3rem;display:grid;place-items:center;cursor:pointer}

/* the hero sat in a container built for a centred page — the plate layout is
   full-bleed, so the old max-width and vertical padding are removed here. */
#hero{padding:0}
#hero .wrap{max-width:none;padding:0}
.pl-team,.pl-band{margin:0}
.pl-tiers .tnums{display:flex;gap:1.2rem;padding-top:.55rem;border-top:2px solid var(--line-soft);
  font-weight:600;font-size:.82rem;color:var(--muted)}
.pl-tiers .tnums b{font-weight:900;font-stretch:78%;font-size:1.15rem;color:var(--ink);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
/* the tile IS the buy button for a sellable line */
.pl-team .cap{position:relative}
.pl-team .hire{position:absolute;inset-inline-end:clamp(.8rem,1.4vw,1.05rem);bottom:.75rem;
  font-weight:880;font-stretch:92%;font-size:.8rem;text-decoration:none;color:var(--ink);
  background:var(--lime);border:2px solid var(--ink);padding:.22rem .55rem;
  box-shadow:3px 3px 0 var(--ink)}
.pl-team .fill-lime .hire{background:#fff}
.pl-team .hire:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.pl-team .cap p{padding-inline-end:5.2rem}
/* caption: the hire chip sits IN the flow, so text can never run under it —
   the absolute version clipped "search for." on three of five tiles. */
.pl-team .cap{height:auto;min-height:7.6rem;display:flex;flex-direction:column;gap:.35rem}
.pl-team .cap p{padding-inline-end:0;flex:1 1 auto}
.pl-team .hire{position:static;align-self:flex-start;margin-top:.1rem}
.pl-team .cap b em.fr{font-weight:600;font-stretch:110%;font-size:.7rem;color:var(--muted);
  text-transform:lowercase;margin-inline-end:.15rem}
/* no empty bands between sections */
#hero .pl-top{padding-bottom:clamp(1.4rem,3vw,2rem)}
.pl-team{border-top:3px solid var(--ink)}

/* ⚠️ The dead band under the hero was the old page shell: #hero still sat
   inside a section that carried the legacy vertical rhythm. The plate layout
   is full-bleed and butts its own rules together, so the shell's padding is
   removed rather than tuned. */
#hero,#hero>.wrap,#hero .pl-top{margin:0}
#hero{padding-block:0 !important}
main#main{padding-block:0 !important}
main#main>section{margin-block:0 !important}

/* Every tile reserves the hire row, whether or not it has one — otherwise the
   two sellable tiles are taller and the captions stop aligning. */
.pl-team .cap{min-height:8.4rem}
.pl-team .cap::after{content:"";display:block;min-height:1.65rem}
.pl-team .cap:has(.hire)::after{display:none}

/* ⚠️ The masthead override above set a single flex row with no mobile rule, so
   the links wrapped over the logo. Below the breakpoint the section links move
   out of the bar — the page is short enough to scroll — and the bar keeps the
   two things a phone visitor needs: who this is, and the way in. */
@media(max-width:860px){
  #nav .nav-in{gap:.6rem;padding:.7rem clamp(.9rem,4vw,1.2rem)}
  #nav .nav-links{display:none}
  #nav .logo{font-size:1.2rem}
  #nav .nav-actions{gap:.45rem}
  #nav .nav-actions .btn{padding:.42rem .7rem;font-size:.78rem}
  .pl-top{padding-top:1.1rem}
  .pl-h1{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .pl-row{flex-wrap:wrap}
  .pl-row .field,.pl-row .pl-go{flex:1 1 100%}
}

/* ==========================================================================
   The shared component vocabulary, in the plate world.

   Every remaining page (results, dashboard, team, blog, login, checkout,
   support, legal) is built from these same class names. Restating them here
   converts all of them at once — the same reason the token layer is a single
   file: fifty-five templates cannot each be hand-edited without one of them
   silently keeping the old look.
   ========================================================================== */

/* ── a card is not a card. it is a plate. ───────────────────────────────── */
.card,.plate,.panel,.box,.tile{
  background:var(--surface);
  border:3px solid var(--ink) !important;
  box-shadow:6px 6px 0 var(--ink);
  padding:clamp(1rem,2vw,1.5rem);
}
.card.flat,.plate.flat{box-shadow:none}
/* nested plates would stack shadow on shadow into mud */
.card .card,.plate .plate,.card .plate,.plate .card{box-shadow:none;border-width:2px !important}

.card-label,.sec-label,.eyebrow{
  font-weight:740;font-stretch:114%;font-size:.66rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
html[dir="rtl"] .card-label,html[dir="rtl"] .sec-label,html[dir="rtl"] .eyebrow{
  font-stretch:100%;letter-spacing:.02em;text-transform:none}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  border:3px solid var(--ink);background:var(--surface);color:var(--ink);
  font-weight:840;font-stretch:94%;letter-spacing:-.01em;
  box-shadow:4px 4px 0 var(--ink);text-decoration:none;
}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn-fill,.btn-primary,.btn.primary{background:var(--lime);color:var(--ink);border-color:var(--ink)}
.btn-ghost,.btn.ghost,.btn-quiet{background:transparent;box-shadow:none}
.btn-lg{padding:.85rem 1.6rem;font-size:1rem}
.btn[disabled],.btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}

/* ── fields ─────────────────────────────────────────────────────────────── */
.field,input[type=text],input[type=url],input[type=email],input[type=search],
input[type=number],input[type=password],select,textarea{
  border:3px solid var(--ink);background:#fff;color:var(--ink);
  font-weight:640;box-shadow:none;
}
.field::placeholder,input::placeholder,textarea::placeholder{color:var(--muted);opacity:.75}

/* ── chips: flat ink or flat lime, never a pill ─────────────────────────── */
.badge,.tag,.chip,.pill{
  border:2px solid var(--ink);background:var(--surface);color:var(--ink);
  font-weight:820;font-stretch:100%;font-size:.72rem;letter-spacing:.02em;
  padding:.18rem .5rem;box-shadow:none;
}
.badge.ok,.tag.ok,.badge.good{background:var(--lime)}
.badge.bad,.tag.bad,.badge.danger{background:var(--danger);color:#fff;border-color:var(--ink)}
.badge.warn,.tag.warn{background:#FFD400}

/* ⚠️ The status lamp is a SQUARE here. A dot with a glow was the previous
   world's device and the design detector's `dark-glow` finding; a plate world
   signals state with a filled square and a ring. */
.led{width:.7rem;height:.7rem;border:2px solid var(--ink);box-shadow:none;background:var(--surface)}
.led.on,.led.ok,.led.live{background:var(--lime)}
.led.off{background:var(--surface)}
.led.bad,.led.down{background:var(--danger)}
.led.warn{background:#FFD400}

/* ── notices ────────────────────────────────────────────────────────────── */
.notice,.alert,.callout,.banner{
  border:3px solid var(--ink);background:var(--surface);box-shadow:4px 4px 0 var(--ink);
  padding:.85rem 1rem;
}
.notice.ok,.alert.ok{background:var(--lime)}
.notice.warn,.alert.warn{background:#FFF3C4}
.notice.bad,.alert.bad,.alert.error{background:#FFE3E1}

/* ── tables read as a ledger, not a card ────────────────────────────────── */
table{border-collapse:collapse;width:100%}
table th{border-bottom:3px solid var(--ink);text-align:start;
  font-weight:740;font-stretch:112%;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding:.55rem .5rem}
html[dir="rtl"] table th{font-stretch:100%;letter-spacing:.02em;text-transform:none}
table td{border-bottom:1px solid var(--line-soft);padding:.62rem .5rem;font-weight:560}
table td b,table td strong{font-weight:860;font-variant-numeric:tabular-nums}

/* ── links ──────────────────────────────────────────────────────────────── */
a:not(.btn):not(.logo):not(.brand):not(.hire):not(.pl-go):not(.nav-cta):not(.tgl):not([class*=nav]){color:var(--teal);text-underline-offset:.18em}
a:not(.btn):not(.logo):not(.brand):not(.hire):not(.pl-go):not(.nav-cta):not(.tgl):not([class*=nav]):hover{background:var(--lime);color:var(--ink)}

/* ── headings take the display setting, at page scale ───────────────────── */
h1,h2{font-weight:900;font-stretch:74%;letter-spacing:-.035em;line-height:1.02}
h3,h4{font-weight:880;font-stretch:84%;letter-spacing:-.025em}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{
  font-stretch:100%;letter-spacing:-.005em;line-height:1.25}

/* ── progress / meters become filled bars with an ink edge ──────────────── */
progress,.bar,.meter{border:2px solid var(--ink);background:var(--surface);height:.85rem}
.bar>i,.bar>span,.meter>i{background:var(--lime);display:block;height:100%}

/* ==========================================================================
   BLOG — a Read surface. Different rules from the landing: comprehension and
   wayfinding outrank expression, so the display setting is used once at the
   top and the reading column is left alone.
   ========================================================================== */

/* ⚠️ The centred head lives in each blog template's OWN <style>, not in a
   shared class — the first attempt at this wrote guessed selectors here and
   changed nothing at all. Fixed at the source in lab_blog/*.html instead;
   what stays here is only what is genuinely shared. */

/* the index reads as a numbered ledger, which is what an archive is */
.post-row,.plist li,.post-item{border-bottom:2px solid var(--line-soft)}
.post-row .n,.post-item .n{font-weight:900;font-stretch:70%;color:var(--teal);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em}

/* tag chips: the component rule loses to page CSS here, so it is restated
   with the page's own selector depth rather than with !important sprayed
   across the shared layer. */
.tags a,.tag-list a,.chips a,.topics a{
  border:2px solid var(--ink) !important;background:var(--surface);color:var(--ink) !important;
  font-weight:780;font-size:.8rem;padding:.3rem .7rem;text-decoration:none;box-shadow:none}
.tags a:hover,.tag-list a:hover,.chips a:hover,.topics a:hover{background:var(--lime)}

/* ── the article itself ─────────────────────────────────────────────────── */
/* ⚠️ the reading measure is rem, never ch: `ch` is the width of "0", and in
   Vazirmatn that is a very different pixel width than in Archivo — 68ch lands
   at ~464px in Persian and the column collapses. */
.post-body,.article-body,.prose{max-width:38rem}
.post-body h2,.article-body h2,.prose h2{font-stretch:82%;letter-spacing:-.03em;
  margin-block:2rem .6rem;padding-top:.9rem;border-top:3px solid var(--ink)}
.post-body h3,.article-body h3,.prose h3{margin-block:1.5rem .4rem}
.post-body p,.article-body p,.prose p{font-weight:460;line-height:1.72;margin-bottom:1rem}
.post-body blockquote,.prose blockquote{border:0;border-inline-start:6px solid var(--lime);
  padding-inline-start:1rem;font-weight:620;margin-block:1.2rem}
.post-body pre,.prose pre{border:3px solid var(--ink);background:var(--surface);
  box-shadow:4px 4px 0 var(--ink);padding:1rem;overflow-x:auto}
.post-body img,.prose img{border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);max-width:100%;height:auto}
.post-body ul,.prose ul{list-style:none;display:grid;gap:.4rem;margin-bottom:1rem}
.post-body ul li,.prose ul li{padding-inline-start:1.15rem;position:relative}
.post-body ul li::before,.prose ul li::before{content:"";position:absolute;
  inset-inline-start:0;top:.62em;width:.5rem;height:.5rem;background:var(--teal)}

/* ==========================================================================
   DARK — a real second palette, not the light one under a different name.

   ⚠️ The first version of this file listed `[data-theme="dark"]` alongside the
   light selectors and gave it the SAME values, so the toggle moved a class and
   changed nothing. A colour defined in only one theme is a bug that stays
   invisible until someone flips the switch; a colour defined identically in
   both is the same bug wearing a disguise.

   The world does not change in the dark — planes still have solid extruded
   edges. What changes is which surface is the ground: ink becomes the paper,
   and the offset deepens instead of darkening, because a shadow the colour of
   the text would read as a second copy of the object.
   ========================================================================== */
html[data-theme="dark"],
html[data-ds="fusion"][data-theme="dark"]{
  color-scheme:dark;

  --bg:#12161C;
  --bg2:#0C1015;
  --surface:#1A2029;
  --raised:#222A35;
  --inset:#0C1015;

  --text:#F4F2EA;
  --ink:#F4F2EA;              /* the mark is now paper */
  --muted:#A7B0BC;
  --faint:#8D96A3;
  --dim:#8D96A3;

  --line:rgba(244,242,234,.88);
  --line-soft:rgba(244,242,234,.16);
  --line-bright:rgba(244,242,234,.88);
  --line-field:rgba(244,242,234,.88);

  /* ⚠️ Lime is unchanged — it was always a dark-ground colour (11:1 here,
     1.4:1 on white), which is why the light theme may only ever use it as a
     field. Teal is the one that must move: #0E7567 on this ground is 2.4:1
     and fails as text, so the dark theme takes the brighter cut. */
  --lime:#BAE93C; --lime-x:#5F8A18;
  --teal:#3BDCBA; --teal-x:#0E7567;

  --action:#3BDCBA; --action-hi:#5CE9CC; --action-text:#0C1015;
  --on-action:#0C1015;
  --signal:#3BDCBA; --signal-faint:rgba(59,220,186,.14);
  --ok:#BAE93C;
  --danger:#FF6B63; --on-danger:#0C1015;
  --warn:#FFC94D;

  --action-rgb:59,220,186;
  --signal-rgb:59,220,186;
  --text-rgb:244,242,234;
  --bg-rgb:18,22,28;
  --surface-rgb:26,32,41;
  --raised-rgb:34,42,53;

  /* the offset deepens rather than inverting: a paper-coloured shadow behind a
     paper-coloured rule reads as a doubled object, not as depth */
  --el-1:3px 3px 0 #05070A;
  --el-2:6px 6px 0 #05070A;
  --el-3:9px 9px 0 #05070A;
  --float:6px 6px 0 #05070A;

  --scrim:rgba(5,7,10,.7);
  --tint-hover:rgba(244,242,234,.09);
  --shimmer:rgba(244,242,234,.07);
  --spinner-track:rgba(244,242,234,.2);

  --paper:#1A2029; --paper-ink:#F4F2EA; --paper-ink-2:#C6CDD6;
  --paper-rule:rgba(244,242,234,.18); --paper-edge:rgba(244,242,234,.22);
  --paper-accent:#3BDCBA;
}

/* the plate utilities and component shadows follow the ground */
html[data-theme="dark"] .pl,
html[data-theme="dark"] .card,html[data-theme="dark"] .plate,
html[data-theme="dark"] .panel,html[data-theme="dark"] .box,
html[data-theme="dark"] .tile,html[data-theme="dark"] .notice,
html[data-theme="dark"] .alert,html[data-theme="dark"] .btn,
html[data-theme="dark"] .pl-go,html[data-theme="dark"] .hire,
html[data-theme="dark"] .pl-row .field{box-shadow:6px 6px 0 #05070A}
html[data-theme="dark"] .pl-sm,html[data-theme="dark"] #nav .btn-fill,
html[data-theme="dark"] #nav .nav-cta{box-shadow:4px 4px 0 #05070A}
html[data-theme="dark"] .plate-ink{background:#F4F2EA;color:#12161C}
html[data-theme="dark"] .pl-team .fill-ink .art{background:#05070A}
html[data-theme="dark"] .pl-team .art{background:var(--surface)}
html[data-theme="dark"] .pl-team .fill-lime .art{background:var(--lime)}
html[data-theme="dark"] .pl-team .cap p{color:var(--muted)}
html[data-theme="dark"] .pl-bandhead{background:#F4F2EA;color:#12161C}
html[data-theme="dark"] .pl-bandhead .lbl{color:#4A525C}
html[data-theme="dark"] .pl-tiers .tier.pick{background:var(--lime)}
html[data-theme="dark"] .pl-tiers .tier.pick *{color:#12161C}
html[data-theme="dark"] .pl-h1 mark{background:var(--lime);color:#12161C}
html[data-theme="dark"] .pl-row .field,
html[data-theme="dark"] input,html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:var(--surface);color:var(--text)}
html[data-theme="dark"] .pl-go{background:var(--lime);color:#12161C}
/* ⚠️ Scoped. `.hire` is a chip on the landing and a class on the whole staff
   CARD in the dashboard; unscoped, this rule painted those cards lime with
   near-invisible text in dark mode. A class name is not a contract — check
   where else it lives before styling it globally. */
html[data-theme="dark"] .pl-team .hire{background:var(--lime);color:#12161C}
html[data-theme="dark"] .pl-team .fill-lime .hire{background:var(--surface);color:var(--text)}
html[data-theme="dark"] ::selection{background:var(--lime);color:#12161C}
html[data-theme="dark"] :where(a,button,input,select,textarea,[role=button],[tabindex]):focus-visible{
  outline-color:var(--lime)}

/* ==========================================================================
   The masthead is opaque. ⚠️ It shipped at 85% with a 12px backdrop blur, so
   body text slid visibly underneath it on every scroll — and blur is banned in
   this world anyway (DESIGN.md): a plane you can see through has no thickness.
   ========================================================================== */
nav,#nav,header nav,.nav,.navbar{
  background:var(--bg) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-block-end:3px solid var(--ink) !important;
}
nav.scrolled,#nav.scrolled{border-block-end-color:var(--ink) !important}

/* ==========================================================================
   ⚠️ THE LIME TRAP.

   `--ink` flips with the theme (ink in light, paper in dark). Lime does not —
   it is the same #BAE93C in both, because it was always a dark-ground colour.
   So `color:var(--ink)` on a lime field is correct in light and unreadable in
   dark: paper on lime is 1.5:1. DESIGN.md warns that lime can never carry a
   word; this is the same rule from the other side — what sits ON lime must be
   a fixed dark, never a token that moves.

   `--on-lime` is that fixed dark, identical in both themes. Every lime surface
   in the codebase sets its text from it.
   ========================================================================== */
:root,html[data-theme="dark"]{--on-lime:#12161C}

.plate-lime,.btn-fill,.btn-primary,.btn.primary,.pl-go,.pl-team .hire,
.pl-h1 mark,.badge.ok,.tag.ok,.badge.good,.notice.ok,.alert.ok,
.pl-tiers .tier.pick,.foot-cta{color:var(--on-lime)}
.pl-tiers .tier.pick *,.notice.ok *,.alert.ok *,.foot-cta *{color:var(--on-lime)}
#nav .btn-fill,#nav .nav-cta{background:var(--lime);color:var(--on-lime)}
#nav .btn-fill .t,#nav .nav-cta .t{color:var(--on-lime)}
.pl-go .t,.btn-fill .t,.btn-primary .t{color:var(--on-lime)}
.pl-tiers .tier.pick li::before{background:var(--on-lime)}
/* the lime tile's own hire chip is the inverse — a paper plate on lime */
.pl-team .fill-lime .hire{background:var(--surface);color:var(--text)}

/* the masthead must sit above everything that scrolls under it, on every page */
nav,#nav,header nav,.nav,.navbar{position:sticky;top:0;z-index:80}

/* ==========================================================================
   Legacy colour names, remapped rather than hunted down.

   ⚠️ Twenty-nine templates still say `var(--emerald)` and `var(--indigo)` —
   forty-one times in the landing alone. Those names are defined in the legacy
   inline block in _lab_head.html, so without this they kept resolving to the
   OLD emerald and the old indigo: a page could be fully converted everywhere
   else and still draw its rules and accents in the previous world's colours.
   Renaming them across twenty-nine files is twenty-nine chances to miss one.
   ========================================================================== */
:root,html[data-ds="fusion"],html[data-theme="dark"]{
  --emerald:var(--teal);
  --emerald-soft:var(--signal-faint);
  --emerald-ink:var(--on-lime);
  --indigo:var(--teal);
  --indigo-soft:var(--signal-faint);
  --rule:var(--line-soft);
  --rule-soft:var(--line-soft);
}

/* ⚠️ Blur is banned in this world — a plane you can see through has no
   thickness. Eight templates still carry a backdrop-filter from the old
   glassmorphic shell (the app bar, the PWA sheet, the blog navs). */
*{backdrop-filter:none !important;-webkit-backdrop-filter:none !important}

/* ⚠️ `.field` means two different things in this codebase: on the landing it
   IS the input, on the login and checkout it is a WRAPPER holding a <label>
   and an input. The shared rule gave both a 3px box, so the wrapper drew a
   plate around a plate and the label ended up sitting inside the input's
   frame. `:has()` tells the two apart — the wrapper is the one containing a
   control. */
.field:has(input),.field:has(select),.field:has(textarea){
  border:0 !important;background:transparent;padding:0;box-shadow:none}
/* ⚠️ NOT uppercase. The micro-label treatment is right for "Email address"
   and wrong for the property form, whose labels are full questions — and
   uppercase has no meaning at all in Arabic script, which four of eighteen
   locales use. A form label is read, not scanned. */
.field:has(input)>label,.field:has(select)>label,.field:has(textarea)>label{
  font-weight:760;font-size:.82rem;line-height:1.35;color:var(--muted);
  margin-block-end:.4rem;display:block}
.field>input,.field>select,.field>textarea{width:100%}

/* A form's own submit is that page's primary action and takes the lime plate.
   Secondary buttons stay paper — this is the one place per view where the
   brand's field colour is spent. */
form button.btn[type=submit],form button[type=submit].btn{
  background:var(--lime);color:var(--on-lime);border:3px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);font-weight:880}
form button.btn[type=submit]:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
form button[type=submit][disabled]{background:var(--surface);color:var(--muted)}

/* ⚠️ `--warn` was #8A5109 — a brown. It draws the 10px technical-score ring on
   the report, so a perfectly ordinary score of 72 (grade B) rendered as a mud
   ring on cream: it read as damage rather than as caution. A caution colour has
   to be unmistakably yellow, and deliberately NOT the sister's orange, which is
   her action colour. */
:root,html[data-ds="fusion"]{--warn:#C08A00;--warn-soft:rgba(192,138,0,.12)}
html[data-theme="dark"]{--warn:#FFC94D;--warn-soft:rgba(255,201,77,.16)}

/* ⚠️ Telegram's brand cyan (#229ED9) is hardcoded in five places and is the
   only colour on the site from outside the palette. It was a filled cyan slab
   next to ink-edged plates — the one element that looks pasted on.
   The mark stays recognisable (the icon keeps its own colour); the BUTTON
   joins the world, because a plate is how this site says "press me". */
.btn-tg,.tg,.tgbar .btn-tg{
  background:var(--surface) !important;color:var(--ink) !important;
  border:3px solid var(--ink) !important;box-shadow:4px 4px 0 var(--ink) !important;
  font-weight:860}
.btn-tg:hover,.tg:hover{background:var(--lime) !important;color:var(--on-lime) !important}
.btn-tg:active,.tg:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink) !important}
/* the little round Telegram dot in the daily bar becomes a square chip */
.tgm-bar i{border-radius:0 !important;background:var(--teal) !important}

/* ⚠️ Same family of gap as the missing box-sizing: `.skip-link` was styled only
   in the legacy inline block, which fusion pages skip entirely — so on all
   seven of them the accessibility skip link rendered as a plain visible link
   above the masthead. Off-screen until focused, then a plate like everything
   else. Uses inset-inline-start so it lands correctly in RTL. */
.skip-link{
  position:absolute;inset-inline-start:-9999px;top:0;z-index:200;
  background:var(--lime);color:var(--on-lime);border:3px solid var(--ink);
  box-shadow:4px 4px 0 var(--ink);padding:.6rem 1.1rem;font-weight:860;
  text-decoration:none;
}
.skip-link:focus,.skip-link:focus-visible{inset-inline-start:.6rem;top:.6rem}