/* ============================================================
Fortuna — elite demo base
One token system, two variants (A cool-product / B warm-elite),
light + dark themes. Surfaces sit up an elevation scale, never
at pure black — the fix for "too dark".
============================================================ */
/* ---------- DARK (default) · variant A: cool graphite ---------- */
:root{
--bg:#101013;
--surf-1:#17171B;
--surf-2:#1D1D22;
--surf-3:#26262C;
--line:rgba(255,255,255,.075);
--line-2:rgba(255,255,255,.13);
--fg:#ECECEE;
--fg-muted:#A6A6AE;
--fg-faint:#71717B;
--gold:#C6A265;
--gold-strong:#D9BC82;
--gold-dim:#93794A;
--gold-tint:rgba(198,162,101,.10);
--gold-line:rgba(198,162,101,.32);
--ok:#63BE8B;
--err:#E5636B;
--shadow:0 1px 2px rgba(0,0,0,.4),0 12px 34px -12px rgba(0,0,0,.6);
--glow:radial-gradient(80% 60% at 78% -8%, rgba(198,162,101,.09), transparent 60%);
--display:'Manrope',system-ui,sans-serif;
--body:'Manrope',system-ui,sans-serif;
--data:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
--h1-weight:800;
--h1-tracking:-.028em;
--radius:12px;
--radius-sm:9px;
--radius-lg:18px;
--pad-sec:clamp(56px,8vw,104px);
--maxw:1200px;
}
/* ---------- DARK · variant B: warm espresso, serif headline ---------- */
:root[data-variant="b"]{
--bg:#141210;
--surf-1:#1C1915;
--surf-2:#231F19;
--surf-3:#2C271F;
--line:rgba(255,246,230,.08);
--line-2:rgba(255,246,230,.15);
--fg:#F4EFE5;
--fg-muted:#BCB2A2;
--fg-faint:#8B8173;
--gold:#BE9A5A;
--gold-strong:#DAC49A;
--gold-dim:#8C7345;
--gold-tint:rgba(190,154,90,.10);
--gold-line:rgba(190,154,90,.34);
--glow:radial-gradient(90% 70% at 82% -12%, rgba(190,154,90,.11), transparent 62%);
--display:'Playfair Display',Georgia,serif;
--data:'Manrope',system-ui,sans-serif;
--h1-weight:500;
--h1-tracking:-.012em;
--radius:14px;
--radius-sm:10px;
--radius-lg:22px;
--pad-sec:clamp(64px,9vw,128px);
--maxw:1180px;
}
/* ---------- LIGHT (shared warm ivory) ---------- */
:root[data-theme="light"]{
--bg:#F6F3EE;
--surf-1:#FFFFFF;
--surf-2:#FBFAF6;
--surf-3:#EFEBE3;
--line:rgba(26,20,12,.11);
--line-2:rgba(26,20,12,.18);
--fg:#1B1712;
--fg-muted:#57514A;
--fg-faint:#8A8176;
--gold:#9C7833;
--gold-strong:#84631F;
--gold-dim:#B79B62;
--gold-tint:rgba(156,120,51,.10);
--gold-line:rgba(156,120,51,.30);
--shadow:0 1px 2px rgba(60,45,20,.06),0 14px 34px -16px rgba(60,45,20,.22);
--glow:radial-gradient(80% 60% at 78% -8%, rgba(156,120,51,.07), transparent 60%);
}
:root[data-theme="light"][data-variant="b"]{
--bg:#F7F2E9;
--surf-3:#EFE7D8;
--gold:#93701F;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
margin:0;
background:var(--glow),var(--bg);
color:var(--fg);
font-family:var(--body);
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
transition:background-color .3s ease,color .3s ease;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(18px,4vw,40px)}
.section{padding-block:var(--pad-sec)}
.section + .section{padding-top:0}
/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;color:var(--fg);overflow-wrap:anywhere;min-width:0}
h1{font-weight:var(--h1-weight);letter-spacing:var(--h1-tracking);font-size:clamp(2.3rem, 1.5rem + 3.4vw, 4rem);line-height:1.04}
h2{font-weight:var(--h1-weight);letter-spacing:var(--h1-tracking);font-size:clamp(1.7rem, 1.2rem + 1.9vw, 2.7rem);line-height:1.1}
h3{font-weight:700;font-size:1.16rem;line-height:1.25}
:root[data-variant="b"] h3{font-weight:600}
p{margin:0}
.lede{font-size:clamp(1.08rem, 1rem + .4vw, 1.28rem);color:var(--fg-muted);max-width:56ch}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--data);font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--gold-line)}
.data{font-family:var(--data);font-variant-numeric:tabular-nums}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:60ch}
.sec-head.center{align-items:center;text-align:center;margin-inline:auto}
/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transition:background-color .3s ease,border-color .3s ease}
.hdr__in{display:flex;align-items:center;gap:var(--s-4);height:var(--hdr-row)}
.brand{display:flex;align-items:center;gap:12px}
.brand__mark{width:54px;height:54px;border-radius:50%;object-fit:contain}
.brand__txt{display:flex;flex-direction:column;line-height:1}
.brand__name{font-family:'Cinzel',var(--display);font-weight:700;letter-spacing:.16em;font-size:1.02rem}
.brand__sub{font-family:var(--data);font-size:.58rem;letter-spacing:.44em;color:var(--gold);margin-top:4px}
/* transparent chrome over the dark brand hero, solidify on scroll */
.has-brandhero .hdr{background:transparent;border-bottom-color:transparent}
.has-brandhero .hdr.is-solid{background:color-mix(in srgb,var(--bg) 85%,transparent);border-bottom-color:var(--line)}
/* the sticky header sits ABOVE the hero (not over it), so it's transparent
over the PAGE bg — force light chrome only in dark theme (dark page). */
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .brand__name{color:#F4EFE5}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .nav a{color:rgba(244,239,229,.84)}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .nav a:hover{color:#fff}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .ttoggle{border-color:rgba(244,239,229,.28)}
.nav{display:none;gap:26px;margin-left:12px}
.nav a{font-size:.92rem;color:var(--fg-muted);transition:color .15s}
.nav a:hover{color:var(--fg)}
.hdr__act{margin-left:auto;display:flex;align-items:center;gap:12px}
@media(min-width:900px){.nav{display:flex}}
/* theme toggle */
.ttoggle{display:inline-flex;align-items:center;gap:0;border:1px solid var(--line-2);border-radius:20px;padding:3px;background:var(--surf-1)}
.ttoggle button{border:0;background:transparent;color:var(--fg-faint);width:30px;height:26px;border-radius:16px;cursor:pointer;display:grid;place-items:center;transition:.15s}
.ttoggle button svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none}
.ttoggle button[aria-pressed="true"]{background:var(--gold-tint);color:var(--gold)}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:.96rem;padding:13px 22px;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:transform .12s ease,background-color .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none}
.btn--gold{background:var(--gold);color:#17130B;border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-strong);border-color:var(--gold-strong)}
:root[data-theme="light"] .btn--gold{color:#fff}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line-2)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--sm{padding:9px 16px;font-size:.88rem}
.link{display:inline-flex;align-items:center;gap:7px;color:var(--gold);font-weight:600;font-size:.94rem}
.link svg{width:17px;height:17px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .15s}
.link:hover svg{transform:translateX(3px)}
/* home pillar link rail (sec_pillar) — shipped with zero CSS, so the arrow
icon rendered at raw SVG default size (a giant filled black triangle,
since it also had no fill:none/stroke). Sized identically to .link svg. */
.pillar-links{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.pillar-links li{border-bottom:1px solid var(--line-soft)}
.pillar-links a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 2px;color:var(--fg);font-weight:600}
.pillar-links a:hover{color:var(--gold)}
.pillar-links a svg{width:17px;height:17px;flex:none;stroke:currentColor;stroke-width:2;fill:none;transition:transform .15s}
.pillar-links a:hover svg{transform:translateX(3px)}
/* ---------- hero ---------- */
.hero{position:relative;padding-top:clamp(44px,7vw,88px);padding-bottom:var(--pad-sec)}
.hero__grid{display:grid;gap:clamp(34px,5vw,64px);align-items:center}
@media(min-width:960px){.hero__grid{grid-template-columns:1.05fr .95fr}}
.hero__copy{display:flex;flex-direction:column;gap:22px;max-width:38ch}
.hero h1 em{font-style:normal;color:var(--gold)}
:root[data-variant="b"] .hero h1{position:relative}
.hero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
/* console widget */
.console{border:1px solid var(--line-2);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--surf-2),var(--surf-1));box-shadow:var(--shadow);overflow:hidden}
.console__bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surf-3)}
.console__dots{display:flex;gap:6px}
.console__dots span{width:10px;height:10px;border-radius:50%;background:var(--line-2)}
.console__file{font-family:var(--data);font-size:.76rem;color:var(--fg-faint)}
.console__live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--data);font-size:.72rem;color:var(--gold)}
.console__live .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(99,190,139,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(99,190,139,.5)}70%{box-shadow:0 0 0 7px rgba(99,190,139,0)}100%{box-shadow:0 0 0 0 rgba(99,190,139,0)}}
@media (prefers-reduced-motion:reduce){.console__live .dot{animation:none}}
.console__body{padding:20px}
.console__cap{font-family:var(--data);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:14px}
.rc{display:none;flex-direction:column;gap:11px}
.rc.on{display:flex;animation:fade .4s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.rc__tag{align-self:flex-start;font-family:var(--data);font-size:.72rem;color:var(--gold);background:var(--gold-tint);border:1px solid var(--gold-line);border-radius:20px;padding:4px 11px}
.cline{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.cline .k{font-family:var(--data);font-size:.72rem;letter-spacing:.1em;color:var(--fg-faint)}
.cline .v{font-family:var(--data);font-variant-numeric:tabular-nums;font-size:.98rem;color:var(--fg);text-align:right}
.rc__total{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.rc__total .k{font-size:.82rem;color:var(--fg-muted)}
.rc__total .v{font-family:var(--data);font-weight:700;font-size:1.5rem;color:var(--gold-strong);font-variant-numeric:tabular-nums}
.rc-dots{display:flex;gap:7px;justify-content:center;margin-top:16px}
.rc-dots button{width:7px;height:7px;border-radius:50%;border:0;background:var(--line-2);cursor:pointer;padding:0;transition:.2s}
.rc-dots button.on{background:var(--gold);width:22px;border-radius:4px}
.console__note{display:flex;gap:9px;align-items:flex-start;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem;color:var(--fg-faint);line-height:1.5}
.console__note svg{width:15px;height:15px;flex:none;stroke:var(--gold);stroke-width:1.8;fill:none;margin-top:2px}
/* ---------- trust / proof strip ---------- */
.proof{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
@media(min-width:720px){.proof{grid-template-columns:repeat(4,1fr)}}
.proof__cell{background:var(--bg);padding:24px 22px;display:flex;flex-direction:column;gap:5px}
.proof__n{font-family:var(--data);font-weight:700;font-size:clamp(1.7rem, 1.3rem + 1.3vw, 2.3rem);color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.proof__n em{font-style:normal;color:var(--gold);font-size:.68em}
.proof__l{font-size:.86rem;color:var(--fg-muted)}
/* client logo strip */
.logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(20px,5vw,52px);opacity:.9}
.logos__lbl{width:100%;text-align:center;font-family:var(--data);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg-faint);margin-bottom:4px}
.logos span{font-family:var(--data);font-weight:600;letter-spacing:.06em;font-size:1.02rem;color:var(--fg-muted)}
/* ---------- command ---------- */
.cmd-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;justify-content:center;padding:18px 24px;border:1px solid var(--gold-line);border-radius:var(--radius);background:var(--gold-tint);margin-bottom:26px}
.cmd-bar .rank{font-family:var(--data);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.cmd-bar .who{font-family:var(--display);font-weight:var(--h1-weight);font-size:1.25rem}
.cmd-bar .who em{font-style:normal;color:var(--fg-muted);font-size:.72em;font-weight:400}
.cmd-bar .note{font-size:.88rem;color:var(--fg-muted)}
.cmd-grid{display:grid;gap:16px}
@media(min-width:760px){.cmd-grid{grid-template-columns:1fr auto 1fr;align-items:center}}
.gen{background:var(--surf-1);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.gen__role{font-family:var(--data);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.gen__role em{font-style:normal;color:var(--fg-faint)}
.gen__name{font-family:var(--display);font-weight:var(--h1-weight);font-size:1.5rem;margin:6px 0 4px}
.gen__meta{font-family:var(--data);font-size:.78rem;color:var(--fg-faint)}
.gen__team{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.gen__team span{font-size:.82rem;color:var(--fg-muted);background:var(--surf-3);border:1px solid var(--line);border-radius:16px;padding:5px 12px}
.cmd-link{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--gold);font-family:var(--data);font-size:.72rem;text-align:center}
.cmd-link svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.6;fill:none}
/* ---------- cards / segments ---------- */
.grid{display:grid;gap:16px}
.grid-4{grid-template-columns:1fr}
@media(min-width:640px){.grid-4{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.grid-4{grid-template-columns:repeat(4,1fr)}}
.card{position:relative;display:flex;flex-direction:column;background:var(--surf-1);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s-4);transition:border-color .18s}
/* one hover signal only, per the audit — border-color alone, no stacked
background+lift; icon sits inline beside the heading, not stacked above it */
.card:hover{border-color:var(--line-2)}
.card__head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.card__ic{width:42px;height:42px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--gold-tint);border:1px solid var(--gold-line)}
.card__ic svg{width:21px;height:21px;stroke:var(--gold);stroke-width:1.8;fill:none}
.card__head h3{margin:0}
.card__meta{font-family:var(--data);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-faint);margin:2px 0 10px}
.card p{color:var(--fg-muted);font-size:.94rem}
.card .link{margin-top:auto;padding-top:16px}
/* driver review carousel (.rvw*) — short single-quote cards, native
scroll-snap for the swipe/scroll interaction, prev/next buttons as a
progressive-enhancement layer (see demo.js) on top of that. */
.rvw__track{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;
scroll-padding-inline:var(--s-3);-webkit-overflow-scrolling:touch;
padding:4px 4px var(--s-3);margin:0 -4px;scrollbar-width:none}
.rvw__track::-webkit-scrollbar{display:none}
.rvw__track:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--radius)}
/* the same edge-fade the org chart uses (see .orgwrap): the card the viewport
cuts through was ending mid-word against a hard edge, which reads as broken
rather than as "there is more". A mask, not a gradient overlay, because it
is background-agnostic — the section behind this sits on --bg in one theme
and --surf-1 in the other, and a painted overlay would be wrong in one of them.
Asymmetric on purpose: the track rests flush to a card's left edge, so the
left needs a hairline only, while the right is always a mid-card cut.
Dropped while focused — the mask clips to the border box and would otherwise
swallow the focus ring, which sits 3px outside it. */
.rvw__car:not(.is-static) .rvw__track:not(:focus-visible){
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 60px),transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 60px),transparent 100%)}
/* a real default border, not transparent-until-hover: unlike the .card grid
(which reads as distinct tiles via its own gap/section structure), these
sit edge-to-edge in a carousel on a near-black page — surf-1 vs bg alone
(28,25,21 vs 20,18,16) measured as visually indistinguishable. */
.rvw{flex:0 0 auto;width:min(300px,82vw);scroll-snap-align:start;
display:flex;flex-direction:column;background:var(--surf-1);border:1px solid var(--line-2);
border-radius:var(--radius);padding:24px;transition:border-color .18s}
.rvw:hover{border-color:var(--gold-line)}
.rvw__stars{display:flex;gap:3px;margin-bottom:14px}
.rvw__stars svg{width:15px;height:15px;fill:var(--gold);stroke:none}
.rvw__quote{flex:1;font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.52;color:var(--fg)}
.rvw__who{margin-top:16px;padding-top:12px;border-top:1px solid var(--line-soft);font-family:var(--data);font-size:.78rem;letter-spacing:.04em;color:var(--gold-ink)}
.rvw__note{text-align:center;color:var(--fg-faint);font-size:.85rem;margin-top:18px}
/* prev/next — off by default (mobile relies on the native swipe already in
.rvw__track); shown as a row below the track, not overlapping the cards
(an absolute -8px overlay on top of the flush-edge first/last card was
the previous approach and it visibly sat on top of the card) */
.rvw__nav-row{display:none}
@media(min-width:640px){
.rvw__nav-row{display:flex;justify-content:center;gap:10px;margin-top:22px}
.rvw__nav{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
border:1px solid var(--line-2);background:transparent;
color:var(--fg-muted);cursor:pointer;transition:color .16s,border-color .16s}
.rvw__nav:hover{color:var(--gold);border-color:var(--gold-line)}
/* every card already fits -- nothing to page through */
.rvw__car.is-static .rvw__nav-row{display:none}
.rvw__nav svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.8;fill:none}
}
.checks__note{color:var(--fg-faint);font-size:.85rem;margin-top:14px}
/* flagship card is genuinely bigger, not just tinted — larger icon, larger
heading, more generous padding, so it reads as the recommended tier
rather than the same tile with a different border colour.
.card.card--flag (not bare .card--flag): a later same-specificity
".card{border-color:transparent;background:var(--surf-1)}" from the
premium pass was winning on source order and silently killing this
card's border + gradient entirely — found live while re-checking this
exact card in a browser, not visible from the CSS alone. The compound
selector outranks it regardless of source order from here on. */
.card.card--flag{border-color:var(--gold-line);background:linear-gradient(180deg,var(--gold-tint),var(--surf-1));padding:30px}
.card--flag .card__ic{width:50px;height:50px}
.card--flag .card__ic svg{width:25px;height:25px}
.card--flag h3{font-size:1.3rem}
.flag-badge{position:absolute;top:-11px;left:22px;font-family:var(--data);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#17130B;background:var(--gold);padding:4px 11px;border-radius:14px;font-weight:700}
:root[data-theme="light"] .flag-badge{color:#fff}
/* ---------- zones teaser ---------- */
.zones{display:grid;gap:16px}
@media(min-width:680px){.zones{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.zones{grid-template-columns:repeat(3,1fr)}}
.zone{background:var(--surf-1);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:border-color .18s,background .18s}
.zone:hover{border-color:var(--gold-line);background:var(--surf-2)}
.zone__code{font-family:var(--data);font-size:.7rem;letter-spacing:.06em;color:var(--fg-faint)}
.zone h3{margin:8px 0 12px;font-size:1.08rem}
.zone__by{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--fg-muted);padding-top:12px;border-top:1px solid var(--line)}
.zone__by b{color:var(--fg);font-weight:600}
.zone__by .yrs{margin-left:auto;font-family:var(--data);font-size:.74rem;color:var(--gold)}
/* ---------- CTA band ---------- */
.cta{position:relative;text-align:center;border:1px solid var(--gold-line);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--surf-2),var(--surf-1));padding:clamp(40px,6vw,72px) 24px;display:flex;flex-direction:column;align-items:center;gap:18px;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
.cta>*{position:relative}
.cta .hero__ctas{justify-content:center;margin-top:6px}
/* ---------- footer ---------- */
.ft{border-top:1px solid var(--line);margin-top:var(--pad-sec);padding-block:44px 28px}
.ft__mast{display:flex;flex-direction:column;align-items:flex-start;gap:2px;max-width:52ch}
.ft__tagline{color:var(--fg-muted);font-size:.92rem;max-width:40ch;margin-top:14px}
/* dense colophon index — one flowing mono-set block, not three boxed columns */
.ft__index{margin-top:var(--s-6);padding-top:var(--s-5);border-top:1px solid var(--line);
font-family:var(--data);font-size:.86rem;line-height:2;color:var(--fg-muted);max-width:72ch}
.ft__index p{margin:0 0 6px}
.ft__idx-h{color:var(--gold-ink);text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;margin-right:12px}
.ft__index a{color:var(--fg-muted)}
.ft__index a:hover{color:var(--gold)}
/* ::after on the preceding link, not ::before on the following one — below
820px these anchors are inline-block (atomic), so a leading dot wrapped with
its link and the column started "· Net pay calculator". */
.ft__index a:not(:last-child)::after{content:"·";margin:0 9px;color:var(--fg-faint)}
.ft__bot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);font-family:var(--data);font-size:.78rem;color:var(--fg-faint)}
.ft__mono{font-family:var(--data);font-size:.8rem;color:var(--fg-faint);margin-top:14px}
/* A byline sitting directly in a prose column had no measure of its own, so it
ran the container's full 760px while every paragraph under it stopped at
--measure-body (52ch). Two different right edges, stacked — which is what
read as the text being crooked (Max, 2026-09-05). */
.container--prose > .ft__mono{max-width:var(--measure-body);margin-bottom:var(--s-4)}
.tbd{color:var(--gold);border-bottom:1px dotted var(--gold-line)}
/* demo ribbon */
.ribbon{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:center;padding:9px 16px;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--gold-line);font-family:var(--data);font-size:.78rem;color:var(--fg-muted)}
.ribbon b{color:var(--gold)}
.ribbon a{color:var(--fg);border-bottom:1px solid var(--line-2)}
.ribbon a:hover{color:var(--gold);border-color:var(--gold)}
body{padding-bottom:52px}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}
/* ============================================================
CREST / EMBLEM FURNITURE (logo used across the site, never
hijacking the functional hero — per the objective judge panel)
============================================================ */
.hero{overflow:hidden}
.hero .container{position:relative;z-index:2}
.hero__crest{position:absolute;z-index:0;pointer-events:none;top:50%;right:-5%;transform:translateY(-50%);width:min(560px,50vw);opacity:.05}
:root[data-variant="b"] .hero__crest{top:-6%;right:auto;left:50%;transform:translateX(-50%);width:min(640px,86vw);opacity:.045}
:root[data-theme="light"] .hero__crest{opacity:.07}
/* small crest divider between major blocks */
.crest-div{display:flex;align-items:center;justify-content:center;gap:20px;margin-block:6px}
.crest-div::before,.crest-div::after{content:"";height:1px;flex:0 1 140px;background:linear-gradient(90deg,transparent,var(--gold-line))}
.crest-div::after{background:linear-gradient(90deg,var(--gold-line),transparent)}
.crest-div img{width:38px;height:38px;opacity:.92;flex:none}
/* signature brand band — the ONE place the full ornate emblem leads */
.emblemband__plaque{position:relative;border:1px solid var(--gold-line);border-radius:var(--radius-lg);background:radial-gradient(130% 150% at 50% -25%,#211a11,#0f0c08 62%);padding:clamp(38px,6vw,72px) 24px;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;overflow:hidden}
.emblemband__plaque::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 40%,rgba(198,162,101,.10),transparent 70%);pointer-events:none}
.emblemband__eyebrow{font-family:var(--data);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.emblemband__img{width:min(760px,94%);height:auto;position:relative;z-index:1;filter:drop-shadow(0 8px 26px rgba(0,0,0,.55))}
/* no italic face ships in Playfair/Cinzel/Manrope (upright-only), so a
real oblique here would be a synthetic-italic tell — normal weight instead */
.emblemband__motto{font-family:var(--display);font-style:normal;color:var(--gold-strong);font-size:clamp(1.15rem, .95rem + .8vw, 1.6rem);letter-spacing:.01em}
:root[data-variant="a"] .emblemband__motto{font-weight:700}
.emblemband__sub{max-width:52ch;color:#C9BEA8;font-size:.96rem}
/* footer seal */
.ft__brand{display:flex;align-items:center;gap:18px}
.ft__seal{flex:none;width:116px;height:116px;border-radius:50%;border:1px solid var(--gold-line);display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#1b160e,#0d0b08);background-image:var(--mk);background-size:contain;background-position:center;background-repeat:no-repeat;overflow:hidden}
:root[data-theme="light"] .ft__seal{background-image:var(--mkl)}
/* ============================================================
ORG TREE (family-tree chain of command: connectors + two-way
arrows for effective communication + drop-in photo medallions)
============================================================ */
.org{display:flex;flex-direction:column;align-items:center;width:100%}
.node{display:flex;align-items:center;gap:15px;background:var(--surf-1);border:1px solid var(--line);border-radius:var(--radius);padding:15px 20px;transition:border-color .18s,background .18s}
.node:hover{border-color:var(--gold-line);background:var(--surf-2)}
.node__photo{flex:none;width:62px;height:62px;border-radius:50%;background:radial-gradient(circle at 50% 32%,var(--surf-3),var(--surf-2));border:1.5px solid var(--gold-line);display:grid;place-items:center;overflow:hidden;box-shadow:inset 0 0 0 3px rgba(0,0,0,.22)}
.node__photo span{font-family:var(--data);font-weight:700;color:var(--gold);font-size:1.05rem}
.node__photo img{width:100%;height:100%;object-fit:cover}
.node__body{display:flex;flex-direction:column;gap:2px;text-align:left;min-width:0}
.node__rank{font-family:var(--data);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.node__rank em{font-style:normal;color:var(--fg-faint)}
.node__name{font-family:var(--display);font-weight:var(--h1-weight);font-size:1.1rem;line-height:1.15}
.node__name em{font-style:normal;color:var(--fg-muted);font-size:.74em;font-weight:400}
.node__meta{font-family:var(--data);font-size:.7rem;color:var(--fg-muted)}
.org__node--cmd.node{max-width:440px;border-color:var(--gold-line);background:linear-gradient(180deg,var(--gold-tint),var(--surf-1))}
.org__node--cmd .node__photo{width:74px;height:74px}
.org__node--cmd .node__name{font-size:1.28rem}
/* connectors + two-way arrows */
.org__conn{position:relative;display:flex;align-items:center;justify-content:center;height:44px;width:100%}
.org__conn::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);width:1.5px;background:var(--gold-line)}
.arrow2{position:relative;z-index:1;width:24px;height:24px;stroke:var(--gold);stroke-width:1.7;fill:none;background:var(--bg);border:1px solid var(--gold-line);border-radius:7px;padding:3px}
/* generals row */
.org__generals{display:grid;grid-template-columns:1fr;gap:20px;width:100%}
.branch{display:flex;flex-direction:column;align-items:center;width:100%;min-width:0}
.branch>.node{width:100%;max-width:400px}
.org__cross{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0}
.org__cross .arrow2{transform:rotate(90deg)}
.org__cross span{font-family:var(--data);font-size:.66rem;letter-spacing:.06em;color:var(--gold);text-align:center;max-width:120px}
/* officers under a general */
.spokes{display:none;width:100%;max-width:480px;margin:0 auto;overflow:visible}
.spokes path{stroke:var(--gold-line);stroke-width:2;fill:none}
.branch__vconn{display:flex}
.branch__officers{display:grid;grid-template-columns:1fr;gap:12px;width:100%}
.node--sm.node{position:relative;flex-direction:column;text-align:center;align-items:center;gap:9px;padding:16px 12px}
.node--sm .node__photo{width:50px;height:50px}
.node--sm .node__photo span{font-size:.9rem}
.node--sm .node__body{text-align:center;align-items:center}
.node--sm .node__name{font-size:.98rem}
.photo-note{font-family:var(--data);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint);opacity:.75}
@media(min-width:600px){
.branch__officers{grid-template-columns:repeat(3,1fr)}
.spokes{display:block}
.branch__vconn{display:none}
}
@media(min-width:820px){
.org__generals{grid-template-columns:1fr auto 1fr;align-items:start;gap:14px}
.org__cross{align-self:stretch;justify-content:flex-start;padding-top:26px}
.org__cross .arrow2{transform:none}
}
/* ============================================================
BRAND HERO — full-screen "act 1": the full emblem leads, with
the motto + value + call CTA. Always a dark cinematic ground.
============================================================ */
/* full-screen brand hero — always a dark stage (both themes); emblem
flex-grows to fill the whole viewport height, foot stays compact */
.brandhero{position:relative;height:calc(100svh - var(--hdr-h));background:#080A0D;overflow:hidden;padding:6px 8px 34px}
.brandhero__emblem{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.brandhero__cue{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:4px;color:rgba(244,239,229,.55);font-family:var(--data);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase}
.brandhero__cue svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.7;fill:none;animation:cuebob 1.8s ease-in-out infinite}
@keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media (prefers-reduced-motion:reduce){.brandhero__cue svg{animation:none}}
@media(max-width:640px){.brandhero{padding:10px 8px 38px}}
/* Act 2 opens with tagline + value line + CTAs */
.pitch{text-align:center;max-width:44ch;margin:0 auto;display:flex;flex-direction:column;gap:14px;align-items:center}
/* one bookend biased left instead of both centred — see FAQ page, which
otherwise opens and closes on the same centred axis with nothing but a
naturally-left/asymmetric accordion between them. */
.pitch--left{text-align:left;margin:0;align-items:flex-start}
.pitch--left .lede{margin-inline:0}
.pitch__tagline{font-family:'Cinzel',var(--display);letter-spacing:.2em;text-transform:uppercase;font-size:clamp(.82rem, .72rem + .5vw, 1.08rem);color:var(--gold)}
.pitch h1{font-family:var(--display);font-weight:500;font-size:clamp(1.7rem, 1.2rem + 2vw, 2.7rem);line-height:1.1;color:var(--fg)}
:root[data-variant="a"] .pitch h1{font-weight:700}
.pitch__ctas{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:6px}
/* money-proof section wrapper (relocated rate-con console) */
.moneyproof{display:flex;flex-direction:column;align-items:center;gap:28px}
.moneyproof .console{width:100%;max-width:640px}
/* pricing red-flags accordion (native, no JS) */
.rflags{display:flex;flex-direction:column;gap:10px;margin-top:20px}
details.rf{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surf-1);overflow:hidden;transition:border-color .18s}
details.rf[open]{border-color:var(--gold-line)}
details.rf summary{cursor:pointer;list-style:none;padding:15px 18px;display:flex;align-items:center;gap:12px;font-weight:600;font-size:.95rem}
details.rf summary::-webkit-details-marker{display:none}
details.rf summary svg{flex:none;width:18px;height:18px;stroke:var(--gold);stroke-width:1.8;fill:none}
details.rf summary::after{content:"";margin-left:auto;flex:none;width:8px;height:8px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(45deg);transition:transform .2s}
details.rf[open] summary::after{transform:rotate(-135deg)}
details.rf .rf__a{padding:0 18px 16px 48px;color:var(--fg-muted);font-size:.9rem}
/* ============================================================
Multi-page chrome: skip-link, language switcher, active nav,
contact form (added for the full elite site)
============================================================ */
.skip-link{position:absolute;left:-9999px;top:0;z-index:var(--z-skip);background:var(--gold);color:#17130B;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600}
.skip-link:focus{left:0}
.nav a.is-active{color:var(--gold)}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .nav a.is-active{color:var(--gold-strong)}
.lang{position:relative}
.lang__toggle{display:inline-flex;align-items:center;gap:6px;background:var(--surf-1);border:1px solid var(--line-2);border-radius:20px;padding:7px 11px;cursor:pointer;color:var(--fg);font-family:var(--data);font-weight:600;font-size:.78rem;letter-spacing:.04em}
.lang__chev{width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;transition:transform .2s}
.lang[aria-expanded="true"] .lang__chev{transform:rotate(180deg)}
.lang__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:158px;background:var(--surf-1);border:1px solid var(--line-2);border-radius:12px;padding:6px;list-style:none;margin:0;box-shadow:var(--shadow);z-index:var(--z-panel)}
.lang__menu[hidden]{display:none}
.lang__menu li{margin:0}
.lang__menu a{display:block;padding:9px 12px;border-radius:8px;color:var(--fg-muted);font-size:.92rem}
.lang__menu a:hover{background:var(--surf-3);color:var(--fg)}
.lang__menu [aria-selected="true"] a{color:var(--gold);font-weight:600}
.contact-grid{display:grid;gap:26px;margin-top:32px;align-items:start;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.contact-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.contact-actions{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.contact-actions .btn{min-width:260px;justify-content:center}
.contact-actions .ft__mono{margin-top:4px}
.cform{display:flex;flex-direction:column;gap:12px;background:var(--surf-1);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.cinput{width:100%;background:var(--surf-2);border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:13px 14px;color:var(--fg);font-family:var(--body);font-size:.98rem;transition:border-color .15s}
.cinput::placeholder{color:var(--fg-faint)}
.cinput:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
/* themed invalid state — a required field left empty (or filled wrong) used to
fall back to the browser's native red/blue outline, which clashes with the
dark engraved-gold theme. :not(:placeholder-shown) keeps a pristine empty
field from flagging red before the reader has touched it; :user-invalid is
the same idea natively, for browsers that support it. */
.cinput:invalid:not(:placeholder-shown){border-color:var(--err)}
.cinput:user-invalid{border-color:var(--err)}
.cinput:disabled{opacity:.55;cursor:not-allowed;background:var(--surf-1)}
textarea.cinput{resize:vertical;min-height:88px}
/* ============================================================
CRITIQUE-FLEET FIXES (P0/P1/P2) — 2026-07-19
============================================================ */
/* P0: no-JS fallback so .reveal never leaves the page blank */
html:not(.js) .reveal{opacity:1 !important;transform:none !important}
/* token contrast: lift dark microcopy to ~5.2:1 */
:root[data-variant="b"]{--fg-faint:#968C7C}
/* light theme: darker gold-ink for text (gold on cream failed AA) */
:root[data-theme="light"][data-variant="b"]{--gold-ink:#7A5D18}
:root[data-theme="light"]{--gold-ink:#7A5D18}
:root{--gold-ink:var(--gold)}
.eyebrow,.pitch__tagline,.node__rank,.gen__role,.zone__by .yrs,.console__live,.link,.card .link{color:var(--gold-ink)}
:root[data-theme="light"] .link,:root[data-theme="light"] .ft__index a{text-decoration:underline;text-underline-offset:2px;text-decoration-color:color-mix(in srgb,var(--gold-ink) 45%,transparent)}
:root[data-theme="light"] .rc__total .v{color:#5E4611}
/* P1: H1 must dominate the repeating h2 scale */
.pitch h1{font-size:clamp(2.4rem, 1.8rem + 2.6vw, 3.4rem);line-height:1.04}
/* P1: pitch tagline is a Manrope eyebrow, not Cinzel (legibility + Cinzel=wordmark-only) */
.pitch__tagline{font-family:var(--data);letter-spacing:.18em;font-weight:600;font-size:.8rem}
/* P1: wordmark + brand sub legibility (Cinzel needs air) */
.brand__name{letter-spacing:.2em}
.brand__sub{letter-spacing:.3em;font-size:.66rem}
/* P1: trust-stats read as one elevated plaque + stop mashing the CTA row */
.proof{margin-top:clamp(28px,4vw,52px);box-shadow:var(--shadow);border-radius:var(--radius)}
.proof__cell{background:var(--surf-1)}
.proof__n em{color:var(--gold-ink)}
/* P1: reassurance strip under primary CTAs */
.reassure{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-top:14px;font-family:var(--data);font-size:.78rem;color:var(--fg-muted)}
.reassure span{display:inline-flex;align-items:center;gap:6px}
.reassure span::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
.hero-subline{font-family:var(--data);font-size:.86rem;letter-spacing:.02em;color:var(--fg-muted);margin-top:2px}
/* quick win: warm the 'live' dot to gold (strict gold palette) */
.console__live{color:var(--gold-ink)}
.console__live .dot{background:var(--gold);box-shadow:0 0 0 0 rgba(190,154,90,.6);animation:pulseg 2.4s infinite}
@keyframes pulseg{0%{box-shadow:0 0 0 0 rgba(190,154,90,.5)}70%{box-shadow:0 0 0 7px rgba(190,154,90,0)}100%{box-shadow:0 0 0 0 rgba(190,154,90,0)}}
/* P2: equipment strip as gold-hairline chips (was a placeholder-looking text row) */
.logos{gap:12px 12px}
.logos span{border:1px solid var(--gold-line);border-radius:20px;padding:7px 15px;color:var(--fg-muted);font-size:.86rem;background:var(--surf-1)}
.logos__lbl{border:0;background:none;padding:0}
/* P2: org spokes span the full officer-grid width so arrows hit the cards */
.spokes{max-width:none}
/* P2: demote structural gold in the crew (reserve gold for ranks/commander) */
.spokes path{stroke:var(--line-2)}
.arrow2{stroke:var(--fg-faint);border-color:var(--line-2)}
.node{border-color:var(--line)}
.branch__vconn .arrow2,.org__conn .arrow2{stroke:var(--gold-ink)}
/* P2: kill the double gap between final CTA and footer */
.ft{margin-top:0}
/* P2: measure caps so prose/accordion don't run 100+ ch */
.rf__a,.pitch .lede,.sec-head .lede{max-width:66ch}
.sec-head.center .lede{margin-inline:auto}
/* P2: touch targets */
@media(max-width:900px){.ttoggle button{min-width:40px;min-height:38px}}
/* P1: phone hero — stop forcing 100svh of mostly-empty black */
@media(max-width:640px){
.brandhero{height:auto;min-height:0;padding:28px 8px 24px}
.brandhero__emblem{position:static;height:auto;width:100%;max-height:56svh}
.brandhero__cue{display:none}
}
/* P1: mobile nav (hamburger) — full 8-section site needs navigation on phones */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:22px;height:2px;background:var(--fg);border-radius:2px;transition:.2s}
.has-brandhero .hdr:not(.is-solid) .nav-toggle span{background:#F4EFE5}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .nav-toggle span{background:#F4EFE5}
.mobilenav{position:fixed;inset:var(--hdr-h) 0 auto 0;max-height:calc(100svh - var(--hdr-h));overflow-y:auto;-webkit-overflow-scrolling:touch;background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transform:translateY(calc(-100% - var(--hdr-h) - 8px));transition:transform .28s ease;z-index:var(--z-mobilenav);padding:8px 0 14px}
.mobilenav.open{transform:none}
.mobilenav a{display:block;padding:11px 22px;color:var(--fg);font-size:1.05rem;border-bottom:1px solid var(--line-soft)}
.mobilenav a.is-active{color:var(--gold)}
/* Solutions accordion inside the mobile panel: collapsed by default, same
[data-dd]/aria-expanded toggle as the desktop Solutions flyout (see .nav__dd
below) -- this is what lets the panel fit one screen without scrolling. */
.mobilenav__acc{border-bottom:1px solid var(--line-soft)}
.mobilenav__accbtn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 22px;background:none;border:0;color:var(--fg);font:inherit;font-size:1.05rem;text-align:left;cursor:pointer}
.mobilenav__accbtn.is-active{color:var(--gold)}
.mobilenav__accbtn .lang__chev{color:var(--fg-faint)}
.mobilenav__acc[aria-expanded="true"] .mobilenav__accbtn .lang__chev{transform:rotate(180deg)}
.mobilenav__subwrap{max-height:0;overflow:hidden;transition:max-height .25s ease}
.mobilenav__acc[aria-expanded="true"] .mobilenav__subwrap{max-height:320px}
@media(max-width:900px){.nav-toggle{display:flex}}
/* mobile sticky action bar (persistent Call) -- stays visible even while the
hamburger panel is open (P0 fix: the panel used to hide this bar and carry
its own duplicate Call button instead; one reachable Call CTA beats two). */
/* one source of truth for how much screen the bar eats: 10px pad + the 53px the
.btn actually renders at (13px block padding around a 27px line box, not the
48px min-height) + 10px pad + the 1px top rule. Anything that has to clear
the bar reads this instead of re-guessing it. */
:root{--bar-h:74px}
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-bar);display:none;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--gold-line)}
.actionbar .btn{flex:1;justify-content:center;min-height:48px}
.actionbar .btn--ghost{flex:0 0 auto;min-width:52px}
@media(max-width:820px){
.actionbar{display:flex}
/* Bottom breathing room under a bar that overlays the page. The old flat
70px was 4px SHORT of the bar and ignored the home-indicator inset
entirely, so on a notched phone the last footer links sat under the bar
with no scroll position that could free them. 74 + 16px of air + the inset.
:has() keeps the reservation on pages that actually carry the bar --
404.html is the one page without it and must not gain a phantom gap. */
body:has(.actionbar){padding-bottom:calc(var(--bar-h) + 16px + env(safe-area-inset-bottom))}
/* the panel must stop above the action bar, not behind it, once both are
visible at once (below 820px only -- 821-900px has the hamburger but no
action bar, so it keeps the old unconstrained bottom there). +env() term
matches the action bar's own bottom padding so this still clears it on
notched phones, where the home-indicator inset makes the bar taller. */
.mobilenav{inset:var(--hdr-h) 0 0 0;bottom:calc(76px + env(safe-area-inset-bottom));max-height:calc(100svh - 150px - env(safe-area-inset-bottom))}
}
/* ============================================================
PREMIUM PASS (redesign-skill) — kill AI-slop rounded blocks,
go editorial/engraved: hairline rules, no floating pills,
grain texture, warm-tinted shadows. 2026-07-19
============================================================ */
/* warm-tinted, softer shadow (was near-black generic) */
:root{--shadow:0 1px 2px rgba(20,12,4,.35), 0 18px 46px -18px rgba(0,0,0,.55)}
:root[data-theme="light"]{--shadow:0 1px 2px rgba(80,60,20,.06), 0 20px 44px -22px rgba(80,60,20,.20)}
/* subtle film grain to break digital flatness (fixed, non-blocking) */
body::after{content:"";position:fixed;inset:0;z-index:var(--z-scrim);pointer-events:none;opacity:.035;mix-blend-mode:overlay;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme="light"] body::after{opacity:.02;mix-blend-mode:multiply}
/* ---- reassurance: one quiet engraved line, NOT floating chips ---- */
.reassure{gap:0 22px;font-size:.76rem;letter-spacing:.02em;color:var(--fg-faint);margin-top:20px}
.reassure span{position:relative}
.reassure span::before{display:none}
.reassure span+span::before{content:"";display:inline-block;width:1px;height:11px;margin-right:22px;background:var(--gold-line);vertical-align:-1px}
/* ---- equipment: editorial line, not a full-width pill + badge row ---- */
.logos{flex-direction:column;gap:12px}
.logos .logos__lbl{width:auto;border:0;background:none;padding:0;margin:0;font-size:.68rem;letter-spacing:.22em;color:var(--fg-faint)}
.logos span:not(.logos__lbl){border:0;background:none;padding:0 2px;border-radius:0;font-family:var(--display);font-size:1.02rem;letter-spacing:.01em;color:var(--fg-muted)}
.logos__row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:0 18px}
/* the separator hangs off the word BEFORE it, never the word after.
As a ::before it belonged to the following flex item, so when the row wrapped
the item carried its dot onto the next line and the list started "· Step Deck".
Same spacing either way: 18px flex gap on one side, 18px margin on the other. */
.logos__row span:not(:last-child)::after{content:"·";color:var(--gold-line);margin-left:18px}
/* ---- trust stats: engraved ledger BAND, not a floating shadowed card ---- */
.proof{box-shadow:none;border-radius:0;border-left:0;border-right:0;border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line);background:transparent;gap:1px}
.proof__cell{background:transparent;padding:26px 22px}
.proof__cell + .proof__cell{border-left:1px solid var(--line)}
@media(max-width:720px){.proof__cell:nth-child(3){border-left:0}.proof__cell:nth-child(n+3){border-top:1px solid var(--line)}}
/* ---- radius discipline: soften containers, tighten inner, no pill-everywhere ---- */
.zone,.card,.gen,.cform,.contact-form{border-radius:14px}
.node,.node--sm{border-radius:11px}
.btn{border-radius:10px}
/* ---- cards: drop the border, let spacing + subtle surface carry them ---- */
.card{border-color:transparent;background:var(--surf-1)}
.card:hover{border-color:var(--gold-line)}
.zone{border-color:transparent}
.zone:hover{border-color:var(--gold-line)}
/* ---- more air (marketing page, let it breathe) ---- */
:root,:root[data-variant="b"]{--pad-sec:clamp(76px,10vw,146px)}
.sec-head{margin-bottom:40px}
/* section rhythm: opt-in quiet hairline divider between major acts */
.section--div > .container::before{content:"";display:block;width:52px;height:1px;background:var(--gold-line);margin:0 auto clamp(40px,6vw,72px)}
/* ---- blog / field notes ---- */
.postlist{display:grid;gap:18px}
@media(min-width:760px){.postlist{grid-template-columns:1fr 1fr}}
.post{display:flex;flex-direction:column;gap:9px;background:var(--surf-1);border:1px solid transparent;border-radius:14px;padding:26px;transition:border-color .18s,background .18s,transform .18s}
.post:hover{border-color:var(--gold-line);background:var(--surf-2);transform:translateY(-3px)}
.post__date{font-family:var(--data);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-faint)}
.post h3{font-size:1.26rem;line-height:1.22}
.post p{color:var(--fg-muted);font-size:.95rem;flex:1}
.post .link{padding-top:6px}
.prose{color:var(--fg-muted);font-size:1.06rem;line-height:1.72}
.prose p{margin:0 0 1.1em;max-width:var(--measure-body)}
.prose strong{color:var(--fg);font-weight:600}
.reviews-empty{border:1px solid var(--gold-line);border-radius:18px;background:linear-gradient(180deg,var(--gold-tint),transparent);padding:clamp(36px,6vw,64px) 26px}
/* ---- console: show ALL rate-cons in a static grid on desktop (don't hide the sell) ---- */
@media(min-width:820px){
.moneyproof .console{max-width:780px}
.rc-slides{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.rc-slides .rc{display:flex !important;animation:none;background:var(--surf-2);border:1px solid var(--line);border-radius:12px;padding:16px}
.rc-dots{display:none}
}
/* ---- de-shout org roles + photo notes (caps overload from the audit) ---- */
.node__rank,.gen__role{text-transform:none;font-variant:all-small-caps;letter-spacing:.03em;font-size:.76rem}
/* ============================================================
ORG CHART REFINE — de-boxed clean connectors + more air
============================================================ */
.arrow2{border:0 !important;background:none !important;padding:0;border-radius:0;width:22px;height:22px;stroke:var(--gold);stroke-width:1.5}
.org{gap:0}
.node{padding:18px 22px;gap:16px}
.org__node--cmd.node{padding:20px 24px}
.org__conn{height:52px}
.org__generals{gap:clamp(18px,2.6vw,38px);align-items:center}
.branch{gap:0}
.branch>.node{margin-bottom:6px}
.branch__officers{gap:16px;margin-top:2px}
.node--sm.node{padding:18px 12px 20px}
.spokes{max-width:none;margin:6px auto 0}
.spokes path{stroke:var(--line-2);stroke-width:1.6}
/* the "cover each other" cross: refined horizontal link with reaching hairlines */
.org__cross{position:relative;gap:10px;padding:0 6px;align-self:center}
.org__cross .arrow2{width:28px;height:28px;stroke:var(--gold)}
.org__cross span{font-size:.68rem;letter-spacing:.06em;color:var(--gold);max-width:96px;line-height:1.3}
.org__cross::before,.org__cross::after{content:"";position:absolute;top:14px;width:clamp(10px,1.4vw,22px);height:1.5px;background:var(--gold-line)}
.org__cross::before{right:100%}
.org__cross::after{left:100%}
/* commander connector: a clean gold hairline, small down chevron only */
.org__conn::before{width:1.5px;background:var(--gold-line)}
@media(max-width:820px){
.org__cross::before,.org__cross::after{display:none}
.org__generals{gap:8px}
}
/* ============================================================
PROSE — blog posts + content pages (how-it-works, why, legal)
============================================================ */
.prose h2{font-family:var(--display);font-weight:600;color:var(--fg);font-size:clamp(1.35rem,1.1rem + .9vw,1.7rem);line-height:1.22;letter-spacing:-.01em;margin:1.7em 0 .5em}
.prose h2:first-child,.prose > :first-child{margin-top:0}
.prose h3{font-family:var(--display);font-weight:600;color:var(--fg);font-size:1.16rem;line-height:1.3;margin:1.4em 0 .4em}
/* +1.35em cancels the list indent (1.15em here + .2em on the li) so list TEXT
starts and ends on the same measure as the paragraphs above it */
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.15em;max-width:calc(var(--measure-body) + 1.35em)}
.prose li{margin:0 0 .5em;padding-left:.2em}
.prose li::marker{color:var(--gold)}
.prose a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:color .16s}
.prose a:hover{color:var(--gold)}
.prose blockquote{margin:1.4em 0;padding:.2em 0 .2em 1.1em;border-left:2px solid var(--gold-line);color:var(--fg-muted);font-style:normal}
.prose hr{border:0;height:1px;background:var(--gold-line);margin:2.2em 0;max-width:var(--measure-body)}
.prose h2 + p,.prose h3 + p{margin-top:0}
/* ============================================================
MOBILE HEADER OVERFLOW FIX — header Call is redundant with the
sticky bottom actionbar; drop it on phones + tighten the cluster
so brand + theme + lang + hamburger fit 360px with no side-scroll.
============================================================ */
@media(max-width:820px){
.hdr__act .btn--gold{display:none}
.hdr__in{gap:12px}
.hdr__act{gap:8px;margin-left:auto}
}
@media(max-width:400px){
.hdr__act{gap:6px}
.ttoggle button{min-width:34px;padding-left:8px;padding-right:8px}
.brand__mark{width:44px;height:44px}
}
html,body{overflow-x:clip}
/* ============================================================
FINAL UX-CRITIQUE PASS (2026-07-20) — trust→call polish
============================================================ */
/* #1 visible, selectable phone number (footer + contact hero) */
.ft__tel{display:inline-flex;align-items:center;gap:9px;margin:4px 0 10px;font-family:var(--data);font-size:1.16rem;letter-spacing:.02em;color:var(--gold-ink);font-weight:600}
.ft__tel:hover{color:var(--gold)}
.ft__tel svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7}
.phone-lg{display:inline-flex;align-self:flex-start;font-family:var(--data);font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem);font-weight:600;letter-spacing:.01em;color:var(--gold-ink);margin-bottom:6px}
.phone-lg:hover{color:var(--gold)}
/* #7 persistent form labels (was placeholder-only) */
.cfield{display:block;margin-bottom:14px}
.clabel{display:block;font-size:.82rem;letter-spacing:.02em;color:var(--fg-muted);margin:0 0 6px 2px}
.cfield .cinput{margin-bottom:0;width:100%}
/* #9 console small labels: fg-faint fails AA on the lighter bar — bump to fg-muted */
.console__file,.console__cap,.console__note,.cline .k{color:var(--fg-muted)}
/* #15/#16 touch targets >= 44px (older audience, primary controls) */
@media(max-width:900px){
.nav-toggle{min-width:44px;min-height:44px;padding:11px;justify-content:center}
.lang__toggle{min-height:44px;padding-top:11px;padding-bottom:11px}
.ttoggle button{min-height:44px}
}
/* #4 mobile header at <=430px. HISTORY: the two-button segmented toggle is ~76px
wide and used to overlap the brand wordmark, so the header copy was hidden here
and the toggle survived only inside the hamburger panel. Owner asked for it back
in the header (2026-08-24) -- hiding it again is not an option, so the WIDTH is
fixed instead: show only the theme you are NOT on, i.e. one button, ~52px total.
Tapping it switches, which is the standard phone pattern.
Both buttons stay in the DOM, so demo.js's click delegation and aria-pressed sync
are untouched; display:none keeps the inactive one out of the a11y tree, so a
screen reader is offered exactly one control, correctly labelled ("Light theme" /
"Світла тема" = the theme it takes you to).
Driven by data-theme, NOT aria-pressed: data-theme is set by the blocking head
script before first paint, while aria-pressed is only synced once the deferred
demo.js runs -- keying off it would flash the wrong icon on every load.
The panel copy (.mobilenav__ttoggle) is gone: one toggle, one place. */
@media(max-width:430px){
:root[data-theme="dark"] .hdr__act .ttoggle button[data-set-theme="dark"]{display:none}
:root[data-theme="light"] .hdr__act .ttoggle button[data-set-theme="light"]{display:none}
/* only one button shows, so the "selected" gold pill is meaningless here -- and
it would flash on light-theme loads from the stale aria-pressed in the HTML */
.hdr__act .ttoggle button{background:transparent;color:var(--fg-muted);min-width:44px}
.brand__name{font-size:.94rem;letter-spacing:.11em}
.brand__sub{letter-spacing:.34em}
.brand{gap:9px}
.hdr__in{gap:8px}
.hdr__act{gap:6px}
}
/* 365px and below (iPhone SE class). Measured at 320px: brand 126 + actions 168
+ gaps + 2x18px container padding = 302 against 284 usable, i.e. the hamburger
was pushed hard onto the viewport edge (overflow-x:clip hid it rather than
fixing it). Every element in the row gives back a few px instead of one of them
disappearing. Re-measure with the header rects, not by eye, if this changes. */
@media(max-width:365px){
.hdr__in{padding-left:12px;padding-right:12px;gap:6px}
.brand{gap:7px}
.brand__mark{width:36px;height:36px}
.brand__name{font-size:.82rem;letter-spacing:.06em}
.brand__sub{font-size:.52rem;letter-spacing:.2em}
.hdr__act{gap:4px}
.lang__toggle{padding-left:8px;padding-right:8px;gap:4px}
}
/* #19 footer links: roomier tap targets on phones */
@media(max-width:640px){
.ft__index a{display:inline-block;padding-block:7px}
.ft__index{line-height:2.3}
}
/* #18 rate-console dots: keep the 7px visual dot, expand the hit area to >=24px */
.rc-dots button{position:relative}
.rc-dots button::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px}
/* P3 polish: prose headings share the body measure (were full-width vs the
paragraph cap). --measure-body is in `ch`, which re-resolves against the
HEADING's larger font-size and would land ~60% wider -- so headings take the
absolute twin, which is the same length in px as 52ch of 1.06rem body text. */
.prose h2,.prose h3{max-width:var(--measure-body-abs)}
/* ============================================================
ORG CHART v2 (2026-07-20) — clean hairline tree, no scattered
chevrons. Cards are NOT links, so no hover affordance.
Commander → bus → generals → bus → officers. One ↔ = "cover".
============================================================ */
/* cards are informational, not clickable → kill the misleading hover lift */
.node:hover,.node--sm:hover{border-color:var(--line);background:var(--surf-1)}
.org__node--cmd.node,.org__node--cmd.node:hover{border-color:var(--gold-line);background:linear-gradient(180deg,var(--gold-tint),var(--surf-1))}
.node,.node--sm{cursor:default;transition:none}
/* trunk under the commander */
.org__trunk{width:1.5px;height:34px;background:var(--gold-line);margin:0 auto}
/* --- mobile (stacked): simple vertical connectors between cards --- */
.branch__vconn{width:1.5px;height:26px;background:var(--gold-line);margin:6px auto}
.org__cross-h{display:inline-flex;align-items:center;gap:8px}
.org__cross-ln{width:20px;height:1.5px;background:var(--gold-line);display:inline-block}
.org__cross .arrow2{width:26px;height:26px;stroke:var(--gold);fill:none;border:0;background:none;transform:none}
.org__cross-cap{font-family:var(--data);font-size:.66rem;letter-spacing:.05em;color:var(--gold);text-align:center;line-height:1.3}
.org__cross{display:flex;flex-direction:column;align-items:center;gap:7px;padding:10px 0}
/* --- desktop tree (>=820px): buses + drops --- */
@media(min-width:820px){
.org__generals{position:relative;padding-top:34px;align-items:start !important}
/* horizontal bus joining the two general drops */
.org__generals::before{content:"";position:absolute;top:0;left:25%;right:25%;height:1.5px;background:var(--gold-line)}
.branch{position:relative}
/* vertical drop from bus down to each general card */
.branch::before{content:"";position:absolute;top:-34px;left:50%;transform:translateX(-50%);width:1.5px;height:34px;background:var(--gold-line)}
/* general → officers */
.branch__vconn{display:block;height:26px;margin:0 auto}
.branch__officers{position:relative;padding-top:26px}
.branch__officers::before{content:"";position:absolute;top:0;left:16.6%;right:16.6%;height:1.5px;background:var(--gold-line)}
.node--sm{position:relative}
.node--sm::before{content:"";position:absolute;top:-26px;left:50%;transform:translateX(-50%);width:1.5px;height:26px;background:var(--gold-line)}
/* cover-each-other sits centered in the middle column, at mid height */
.org__cross{align-self:center;padding:0}
.org__cross-ln{width:clamp(14px,2vw,30px)}
/* neutralize older appended overrides that re-added chevrons/spacing */
.org__cross::before,.org__cross::after{display:none}
}
.spokes{display:none !important}
/* audit quick-wins (2026-07-20): hero phone, honeypot, thank-you */
.phone-lg{display:inline-flex;align-items:center;gap:9px}
.phone-lg svg{width:.86em;height:.86em;fill:none;stroke:currentColor;stroke-width:1.7}
.phone-lg--hero{justify-content:center;align-self:center;margin:2px auto 2px;font-size:clamp(1.35rem,1.1rem + 1.1vw,1.7rem)}
.pitch--center .phone-lg--hero,.pitch .phone-lg--hero{align-self:center}
/* Web3Forms honeypot: hidden from humans + AT, catches bots */
.hp{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
/* ============================================================
ORG CHART v3 (2026-07-20) — two-way GOLD arrows between the
3 leadership nodes (commander <-> each general, general <-> general),
drawn by JS from live card positions. Officer hairline tree + the
"cover each other" cross stay as-is. Desktop only.
============================================================ */
.org{position:relative}
.org > .node,.org > .org__node--cmd,.org__generals{position:relative;z-index:1}
.org__wires{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.org__wires .ow-g path{fill:none;stroke:var(--gold-line);stroke-width:2.4;stroke-linecap:round;opacity:.9}
.org__wires marker path{fill:none;stroke:var(--gold);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:820px){
/* the diagonal arrows replace the old commander->generals hairline bus + drops */
.org__generals::before{display:none}
.branch::before{display:none}
.org__generals{padding-top:64px} /* room for the arrows above the generals */
}
@media(max-width:819px){ .org__wires{display:none} } /* stacked layout uses the vertical hairlines */
/* ============================================================
TRUST BLOCK (2026-07-20) — guarantee-led, no-DOT trust signals.
Editorial: engraved guarantee statement + hairline trust points.
============================================================ */
.trust__offer{max-width:820px;margin:6px auto 0;text-align:center;border:0;padding:26px 8px 4px;position:relative;
font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,1.05rem + 1.1vw,2rem);line-height:1.32;color:var(--fg)}
.trust__offer::before{content:"";display:block;width:46px;height:1px;background:var(--gold-line);margin:0 auto 22px}
.trust__grid{display:grid;grid-template-columns:1fr;gap:0;max-width:960px;margin:clamp(34px,5vw,54px) auto 0}
@media(min-width:760px){.trust__grid{grid-template-columns:repeat(3,1fr)}}
.trust__pt{padding:22px 26px;border-top:1px solid var(--line)}
@media(min-width:760px){.trust__pt{border-top:0;border-left:1px solid var(--line)}.trust__pt:first-child{border-left:0}}
.trust__pt h3{font-family:var(--display);font-weight:600;font-size:1.12rem;color:var(--gold-ink);margin:0 0 8px}
.trust__pt p{color:var(--fg-muted);font-size:.96rem;line-height:1.6;margin:0}
/* ============================================================
VALUE STACK (2026-07-20) — Hormozi-style offer clarity, honest.
Capstone item = dedicated lanes / priority brokers (earned access).
============================================================ */
.stack{list-style:none;padding:0;margin:8px auto 0;display:grid;gap:15px;max-width:720px}
.stack li{display:flex;gap:13px;align-items:flex-start;line-height:1.55}
.stack li svg{width:21px;height:21px;flex-shrink:0;margin-top:2px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stack li span{color:var(--fg-muted);font-size:1.04rem}
.stack__hero{border-top:1px solid var(--gold-line);padding-top:17px;margin-top:6px}
.stack__hero span{color:var(--fg);font-weight:500}
.stack__note{max-width:var(--measure-body);margin:clamp(26px,4vw,40px) auto 0;text-align:center;color:var(--fg-faint);font-size:.98rem;line-height:1.62}
/* ============================================================
NAV: Solutions dropdown (desktop) + mobile sub-links (2026-07-20)
============================================================ */
.nav__dd{position:relative;display:flex;align-items:center}
.nav__ddbtn{background:none;border:0;color:var(--fg-muted);font:inherit;font-size:.92rem;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:0;transition:color .15s}
.nav__ddbtn:hover,.nav__dd:hover .nav__ddbtn,.nav__ddbtn.is-active{color:var(--fg)}
.nav__ddbtn.is-active{color:var(--gold)}
.nav__ddbtn .lang__chev{width:13px;height:13px;transition:transform .18s}
.nav__dd:hover .nav__ddbtn .lang__chev,.nav__dd[aria-expanded="true"] .nav__ddbtn .lang__chev{transform:rotate(180deg)}
:root[data-theme="dark"] .has-brandhero .hdr:not(.is-solid) .nav__ddbtn{color:rgba(244,239,229,.84)}
.ddmenu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(2px);min-width:236px;
background:color-mix(in srgb,var(--bg) 97%,transparent);backdrop-filter:blur(16px);border:1px solid var(--line-2);
border-radius:13px;padding:8px;display:grid;gap:1px;opacity:0;visibility:hidden;transition:opacity .16s,transform .16s;box-shadow:var(--shadow);z-index:var(--z-dropdown)}
.nav__dd:hover .ddmenu,.nav__dd[aria-expanded="true"] .ddmenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(8px)}
.ddmenu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px} /* hover bridge */
.ddmenu a{display:block;padding:10px 13px;border-radius:8px;color:var(--fg-muted);font-size:.92rem;white-space:nowrap;transition:background .14s,color .14s}
.ddmenu a:hover{background:var(--gold-tint);color:var(--fg)}
.ddmenu__all{color:var(--gold-ink);border-top:1px solid var(--line);margin-top:5px;padding-top:12px;font-weight:600}
/* mobile: indented segment sub-links under Solutions */
.mobilenav__sub{padding-left:38px !important;font-size:.98rem !important;color:var(--fg-muted) !important}
.mobilenav__sub::before{content:"—";margin-right:9px;color:var(--gold-line)}
/* guide (glossary) lead definition = snippet target, set apart */
.guide__def{font-size:clamp(1.1rem,1rem + .55vw,1.32rem);line-height:1.56;color:var(--fg);border-left:2px solid var(--gold-line);padding-left:20px;margin:0}
/* value-stack capstone: gold crown marks the premium / earned-access tier */
.stack__crown{width:25px;height:25px;flex-shrink:0;margin-top:1px;object-fit:contain}
/* ============================================================
VS TABLE (2026-07-20) — "typical dispatcher" vs Fortuna.
Contrasts PRACTICES only; names no competitor.
============================================================ */
.vs{margin:8px auto 0;max-width:860px}
.vs__head{display:none;grid-template-columns:1fr 1fr;gap:26px;padding:0 4px 12px;
font-family:var(--data);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-faint)}
.vs__uslabel{color:var(--gold)}
.vs__row{display:grid;grid-template-columns:1fr;gap:10px;padding:20px 4px;border-top:1px solid var(--line)}
.vs__row:first-of-type{border-top:1px solid var(--gold-line)}
.vs__them{color:var(--fg-faint);font-size:.98rem;line-height:1.55;margin:0;text-decoration:line-through;text-decoration-color:rgba(190,154,90,.35);text-decoration-thickness:1px}
.vs__us{color:var(--fg);font-size:1.02rem;line-height:1.55;margin:0;display:flex;gap:11px;align-items:flex-start}
.vs__us svg{width:19px;height:19px;flex-shrink:0;margin-top:3px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:720px){
.vs__head{display:grid}
.vs__row{grid-template-columns:1fr 1fr;gap:26px;align-items:start}
}
/* ============================================================
FORTUNA · BLOCK SYSTEM v1 — Phase 0: tokens + bug fixes
Appended 2026-07-22. Tokens verified against the variant-b
:root block (base.css:41-67) and the --pad-sec override (:588).
Appended last, so equal-specificity rules win by source order.
============================================================ */
:root,:root[data-variant="b"]{
/* spacing scale — retires the ad-hoc gap/padding values */
--s-1:6px; --s-2:10px; --s-3:16px; --s-4:24px; --s-5:34px; --s-6:52px;
--s-7:clamp(56px,7vw,88px); /* between chapters; --pad-sec = between acts */
/* measure */
--measure:68ch;
--measure-lede:60ch;
--measure-wide:920px;
/* chrome */
/* The header is the .hdr__in row PLUS .hdr's 1px bottom border. --hdr-h was
the row only (74px), so every `margin-top:calc(var(--hdr-h) * -1)` left the
border's row of page background showing at y=0 — a 1px cream line above the
photo heroes in the light theme, which on a 3x phone reads as a white stripe
across the top of the header (Max, 2026-09-02). Derived now, not typed. */
--hdr-row:74px; /* .hdr__in height, base.css:134 */
--hdr-h:calc(var(--hdr-row) + 1px); /* + .hdr border-bottom, base.css:133 */
/* FIX: referenced at base.css:532 (.mobilenav a) but never defined anywhere */
--line-soft:var(--line);
/* z-index scale — retires the raw literals (50/60/61/70/80/100) that had
.ribbon, .actionbar and .ddmenu all sharing the value 60 despite being
three unrelated layers (a bottom bar, another bottom bar, a dropdown). */
--z-sticky:50; /* .hdr */
--z-dropdown:60; /* .ddmenu — desktop Solutions flyout */
--z-bar:65; /* .ribbon, .actionbar — fixed bottom bars */
--z-panel:70; /* .lang__menu — floating language panel */
--z-mobilenav:75; /* .mobilenav — full-screen mobile overlay, sits above the bars */
--z-scrim:80; /* body::after film grain */
--z-skip:100; /* .skip-link — always reachable above everything */
}
/* FIX: no scroll-margin existed anywhere, so the sticky 74px header
covered the target of every in-page anchor. */
[id]{scroll-margin-top:calc(var(--hdr-h) + 16px)}
/* the ONE prose container width — retires the hand-typed inline max-widths.
Written as .container.container--prose so source order can never break it. */
.container.container--prose{max-width:760px}
.container.container--wide{max-width:var(--measure-wide)}
/* ---- READING MEASURE ---------------------------------------
The container above is NOT the measure and must not become one: the lede,
the figures, the tables and the calculator all want its full 760px. The
measure belongs on the running text itself.
Why 52 and not 68: `ch` is the advance width of "0", and Manrope's average
glyph is about three quarters of that, so a 68ch cap measured out at 86-94
REAL characters per line (blog post 88, /about/ 86, blog hub 90, .stack__note
90) — a third wider than the 60-75 that reads comfortably. 52ch puts the same
copy at 67-69 with a 74-character worst line, and leaves the 20px lede
(which was already fine at ~76) untouched.
--measure-body-abs is the SAME length expressed absolutely, for text set at
a different font-size, where `ch` would re-resolve to the wrong width. */
/* 52ch -> 62ch (2026-09-05). 52 sat at the narrow end of the readable 45-75ch
band while the prose container is 760px, so every paragraph stopped about two
thirds across and left a ragged column of empty space beside it. 62ch lands
near the 66ch optimum and fills the column without passing the 75ch limit
where the eye starts losing the return sweep. -abs is the same ratio: the
headings need an absolute value because `ch` re-resolves against the display
face, which is a different width to the body face. */
:root{--measure-body:62ch;--measure-body-abs:40rem}
/* the blog / guides hub intro: a bare classless
in the prose container,
outside .prose, so it never inherited the paragraph cap */
.container--prose > p:not([class]){max-width:var(--measure-body-abs)}
/* FIX: the reduced-motion guard for the console dot exists at base.css:193,
but the animation is re-declared at :492 with equal specificity and wins on
source order — so the dot kept pulsing for users who asked it not to. */
@media (prefers-reduced-motion:reduce){
:root .console__live .dot{animation:none}
}
/* ---- ground-tone bands -------------------------------------
.section + .section{padding-top:0} is base.css:114 (0,2,0);
these are written at 0,3,0 so a band always keeps its own air. */
.section--band{background:var(--surf-1);border-block:1px solid var(--line)}
.section + .section.section--band{padding-top:var(--pad-sec)}
.section.section--band + .section{padding-top:var(--pad-sec)}
/* ---- BEAT — the short prose unit (under ~120 words) ---------
Hairline-separated sub-units inside ONE section. Three 90-word beats
read as three ledger entries; three 90-word "chapters" read as the
wall of text we are removing. */
.beats{display:flex;flex-direction:column}
.beat{padding-block:var(--s-6)}
.beat:first-child{padding-top:0}
.beat:last-child{padding-bottom:0}
.beat + .beat{border-top:1px solid var(--line)}
.beat__t{font-family:var(--display);font-weight:600;color:var(--fg);
font-size:clamp(1.28rem,1.06rem + .82vw,1.58rem);line-height:1.22;letter-spacing:-.01em;
margin:0 0 var(--s-3);padding-top:var(--s-3);position:relative}
.beat__t::before{content:"";position:absolute;top:0;left:0;width:34px;height:1px;background:var(--gold-line)}
.beat__b > :last-child{margin-bottom:0}
/* ---- CHAPTER — the long prose unit (120+ words) ------------- */
.chapter__t{font-family:var(--display);font-weight:600;color:var(--fg);
font-size:clamp(1.46rem,1.18rem + 1.05vw,1.94rem);line-height:1.18;letter-spacing:-.012em;
margin:0 0 var(--s-4);padding-top:var(--s-4);position:relative}
.chapter__t::before{content:"";position:absolute;top:0;left:0;width:34px;height:1px;background:var(--gold-line)}
.chapter__b > :last-child{margin-bottom:0}
/* ---- CHECKS — the list every guide already carries ----------
Deliberately NOT a card: no border box, no radius, no shadow.
Hairline + whitespace + the existing check icon. */
/* +17px icon +var(--s-3) column gap: the cap has to land the TEXT column on the
same measure as the paragraphs these lists sit between, not the whole grid */
.checks__l{list-style:none;margin:var(--s-4) 0 0;padding:0;display:grid;gap:var(--s-3);
max-width:calc(var(--measure-body) + 17px + var(--s-3))}
.checks__l li{display:grid;grid-template-columns:auto 1fr;gap:var(--s-3);align-items:start;
margin:0;padding:0;color:var(--fg-muted);font-size:1.06rem;line-height:1.6}
.checks__l li svg{width:17px;height:17px;margin-top:.3em;fill:none;stroke:var(--gold);
stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.checks__l li strong{color:var(--fg);font-weight:600}
.checks .prose > :last-child{margin-bottom:0}
/* ---- section--head ------------------------------------------
The page head used to carry inline padding-bottom:0. Combined with
base.css:114 (.section + .section{padding-top:0}) that left the first
content block flush against the lede with zero air between them.
A real bottom pad on the head restores the gap without re-introducing
top padding on every following block. */
.section--head{padding-bottom:var(--s-6)}
/* ---- FIG — editorial imagery --------------------------------
Deliberately frameless: no border, no radius, no shadow. The image
sits on the ground with a single gold hairline under it, the same
hairline vocabulary as .beat__t. A vignette blends the bottom edge
into the near-black page so the photo does not read as a pasted
rectangle — the tell that separates a document from a designed page. */
.section--fig{padding-block:calc(var(--pad-sec) * .62)}
.fig{margin:0;position:relative}
.fig img{display:block;width:100%;height:auto;object-fit:cover;
filter:saturate(.88) contrast(1.04) brightness(.92)}
.fig::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;
background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.fig figcaption{margin-top:var(--s-3);font-family:var(--data);font-size:.72rem;
letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint)}
:root[data-theme="light"] .fig img{filter:saturate(.9) contrast(1.02) brightness(.96)}
:root[data-theme="light"] .fig::after{height:22%}
/* ---- PAGEHEAD — one axis, one measure ----------------------
The defect this replaces: .pitch centres the h1 + lede at 44ch while the
prose beneath runs left-aligned at 760px. Two alignments and two measures
on the same page is what reads as "crooked". This head shares the body's
left axis and the body's container, so the eye follows a single edge from
the eyebrow all the way to the footer. */
.pagehead{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:var(--s-3)}
.pagehead__back{margin-bottom:var(--s-2)}
.pagehead__h{font-family:var(--display);font-weight:500;color:var(--fg);
font-size:clamp(2rem,1.5rem + 2.2vw,3.1rem);line-height:1.06;letter-spacing:-.015em;
margin:0;max-width:18ch;text-wrap:balance}
.pagehead__lede{margin:0;max-width:58ch;color:var(--fg-muted);
font-size:clamp(1.08rem,1rem + .4vw,1.24rem);line-height:1.62}
.phone-lg--head{align-self:flex-start;margin:var(--s-2) 0 0;
font-size:clamp(1.3rem,1.1rem + .9vw,1.62rem)}
@media(max-width:520px){
.pagehead__h{max-width:none}
}
/* ---- PHERO — the full-bleed photographic hero ---------------
The photograph is the stage, not an illustration parked inside the article.
Fixed height + object-fit:cover on an absolutely-positioned img is the crop-safe
recipe (an auto-sized replaced element inside a flex/grid track grows to its
intrinsic height and overflows — that bug cost us a round trip before). */
.phero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
background:var(--bg);margin-top:calc(var(--hdr-h) * -1); /* transparent header sits over it */
/* Full viewport. cover() will crop the 16:9 frame — that is why every scene
carries its own object-position (FOCUS in build_elite.py) instead of a blind
"center", and why phones get a separately-composed portrait file. */
min-height:100svh}
/* Two scrims, not one flat wash: a light veil at the top so the nav stays legible,
and a deep well at the bottom that the type sits in. A single even overlay would
turn an already near-black photograph into mud. */
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;
background:
linear-gradient(to bottom,rgba(8,10,13,.78) 0,rgba(8,10,13,.30) 16%,rgba(8,10,13,0) 34%),
linear-gradient(to top,var(--bg) 0,rgba(8,10,13,.93) 13%,rgba(8,10,13,.80) 26%,rgba(8,10,13,.46) 43%,rgba(8,10,13,0) 68%)}
.phero__in{position:relative;z-index:2;display:flex;flex-direction:column;
align-items:flex-start;text-align:left;gap:var(--s-3);
/* end padding at exactly 1.3x start padding at every fluid width (7.8/6) —
was 7/6≈1.167, short of the hero-fit gate's 1.3x floor */
padding-block:clamp(46px,6vw,86px) clamp(60px,7.8vw,112px)}
/* Sized down from clamp(2.9rem,2rem + 4.1vw,5.4rem)/15ch (Max, 2026-09-05: a
long headline at 86px over a 15ch measure ran six lines and ate the whole
first screen). 4rem at the top end with an 18ch measure — the same measure
.pagehead__h already uses — keeps the same presence at two lines fewer. */
.phero__h{font-family:var(--display);font-weight:500;color:#F6F2E9;margin:0;
font-size:clamp(2.5rem,1.8rem + 2.7vw,4rem);line-height:1.03;letter-spacing:-.022em;
max-width:18ch;text-wrap:balance;text-shadow:0 2px 30px rgba(0,0,0,.55)}
.phero__lede{margin:0;max-width:52ch;color:rgba(246,242,233,.86);
font-size:clamp(1.08rem,1rem + .42vw,1.26rem);line-height:1.6;
text-shadow:0 1px 18px rgba(0,0,0,.55)}
.phero .eyebrow{color:var(--gold-strong)}
.phero .phone-lg--head{color:#EBC98A;margin-top:var(--s-2)}
.phero .phone-lg--head:hover{color:#fff}
/* The hero is a dark stage in BOTH themes — gold and photographs both die on
cream, and the nav sits on the image regardless of the reader's theme.
The light-theme scrim itself is further down, next to the daylight imagery
it is tuned against; it must NOT fade to cream (a light gradient over a
photograph turns the bottom of the frame into grey mud). */
:root[data-theme="light"] .phero{border-bottom:1px solid var(--line)}
/* Portrait viewport + landscape photograph = a side crop no focal point can undo.
A full-height slice shows mostly empty sky with the subject sliced off the
bottom, so on phones the hero becomes a shorter band focused on the subject. */
@media(max-width:640px){
.phero{min-height:clamp(560px,84svh,780px)}
/* the mobile file is already cropped to its subject */
.phero__lede{font-size:1.02rem;max-width:none}
.phero__h{font-size:clamp(2.2rem,1.6rem + 3vw,3rem)}
}
@media(max-height:560px) and (min-width:900px){ /* wide-and-short windows */
.phero{min-height:520px}
}
@media (prefers-reduced-motion:reduce){}
/* ---- PHERO additions: back-link, kicker, scroll cue ---------
The type block is anchored to the lower-left of the frame and rises on load,
so the photograph reads first and the words arrive a beat later. */
.phero__back{color:rgba(246,242,233,.72);margin-bottom:var(--s-2)}
.phero__back:hover{color:#fff}
.phero__kicker{margin:0;max-width:56ch;color:rgba(246,242,233,.7);
font-size:1rem;line-height:1.55;text-shadow:0 1px 16px rgba(0,0,0,.6)}
.phero__in > *{animation:pheroRise .7s cubic-bezier(.2,.7,.3,1) both}
.phero__in > :nth-child(2){animation-delay:.06s}
.phero__in > :nth-child(3){animation-delay:.12s}
.phero__in > :nth-child(4){animation-delay:.18s}
.phero__in > :nth-child(5){animation-delay:.24s}
@keyframes pheroRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* a hairline that walks down the frame — the only motion in the hero */
.phero__cue{position:absolute;left:50%;bottom:22px;width:1px;height:46px;
background:linear-gradient(to bottom,transparent,var(--gold-line));overflow:hidden}
.phero__cue::after{content:"";position:absolute;inset:0;background:var(--gold-strong);
animation:cueRun 2.6s cubic-bezier(.6,0,.4,1) infinite}
@keyframes cueRun{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){
.phero__in > *{animation:none}
.phero__cue::after{animation:none;opacity:.5}
}
@media(max-width:700px){
.phero__h{max-width:none}
.phero__cue{display:none}
}
/* short-and-wide windows: a 100svh hero would be a letterbox slit */
@media(max-height:620px) and (min-width:900px){
.phero{min-height:560px}
}
/* ---- PHERO imagery: night by default, daylight in light theme -------
Each scene exists as a night and a daylight exposure of the SAME framing.
Handing the four files to CSS as custom properties means the browser fetches
only the one whose rule actually matches — a second would be downloaded
even with display:none. */
.phero__pic{position:absolute;inset:0;background-size:cover;background-repeat:no-repeat;
background-image:var(--hn);background-position:var(--hf,50% 50%);
filter:saturate(.94) contrast(1.03)}
:root[data-theme="light"] .phero__pic{background-image:var(--hd);filter:saturate(.96) contrast(1.02)}
@media(max-width:700px){
/* the phone files are already composed around their subject */
.phero__pic{background-image:var(--hnm);background-position:50% 50%}
:root[data-theme="light"] .phero__pic{background-image:var(--hdm)}
}
/* ---- light-theme scrim: printed to the photograph, sized to the type -------
Daylight frames are bright, so the type well has to be deeper than it is at
night — otherwise ivory text on a white sky is unreadable. The first attempt
at that was one fixed full-frame wash (top 40% at up to .84, bottom 72% at up
to .96) and it failed in BOTH directions, measured on the live site:
· on the dark daylight frames it crushed the picture to 15–35/255 — readers
reported it as "the photo doesn't load when I switch themes";
· on the bright ones the type block reaches ABOVE where that well ended, so
the back-link and the gold eyebrow sat on bare sky at 1.0–2.4:1.
Two fixes, both structural rather than a nudge of the numbers:
1. The well is sized to the TYPE BLOCK, not to the frame. .phero__in is
bottom-anchored and its height swings from 433px to 868px with the length
of the headline, so any fixed percentage misses the top of a long hero and
drowns the bottom of a short one. Hung on .phero__in it always starts just
above the first line and always reaches the bottom edge.
2. Its depth is per photograph — --st (header band) and --sw (type well),
emitted by SCRIM in build_elite.py. The daylight exposures run from mean
L≈100 to L≈226; no single opacity can serve both ends of that.
Both are solved from rendered pixels, not chosen by eye: every hero and header
text element must clear WCAG AA (4.5:1 body, 3:1 for the large h1) against the
90th-percentile-brightest pixel inside its own box. */
:root[data-theme="light"] .phero::after{
/* the nav sits on this band and has to carry the wordmark and the gold
eyebrow over a daylight sky — but it is the HEADER's band, ~74px of it,
so it releases the picture by 24% of the frame instead of 40% */
background:linear-gradient(to bottom,
rgb(8 10 13/var(--st,.7)) 0,
rgb(8 10 13/calc(var(--st,.7) * .86)) 6%,
rgb(8 10 13/calc(var(--st,.7) * .42)) 12%,
rgb(8 10 13/calc(var(--st,.7) * .12)) 18%,
rgb(8 10 13/0) 24%)}
/* z-index:-1 keeps it inside .phero__in's own stacking context (z-index:2):
under the type, over the photograph. inset pulls it 48px above the block and
full-bleed sideways; .phero's overflow:hidden clips the overhang. */
:root[data-theme="light"] .phero__in::before{
content:"";position:absolute;z-index:-1;inset:-48px -50vw 0;pointer-events:none;
/* 88px to reach full depth, from 48px above the block: .phero__in's own top
padding is 46px at its smallest, so the first line — the back-link, the
weakest colour in the hero at .72 alpha — always lands past the ramp. */
background:linear-gradient(to bottom,
rgb(8 10 13/0) 0,
rgb(8 10 13/calc(var(--sw,.7) * .5)) 44px,
rgb(8 10 13/var(--sw,.7)) 88px,
rgb(8 10 13/var(--sw,.7)) 100%)}
@media (prefers-reduced-motion:reduce){.phero__pic{filter:none}}
/* ---- dropdown panel is its own surface, never the hero ------
The header's over-the-photo text rules must stop at the panel edge: the
dropdown has its own background, so ivory-on-photo becomes ivory-on-cream
inside it. Scoped by .ddmenu so it holds in every theme and on every page. */
.hdr .ddmenu a,
.has-phero .hdr:not(.is-solid) .ddmenu a,
:root[data-theme="light"] .has-phero .hdr:not(.is-solid) .ddmenu a{color:var(--fg)}
.hdr .ddmenu a:hover,
:root[data-theme="light"] .has-phero .hdr:not(.is-solid) .ddmenu a:hover{color:var(--gold-ink);background:var(--surf-2)}
/* same guard for the mobile sheet, which is also an opaque surface */
.hdr .mobilenav a,
:root[data-theme="light"] .has-phero .hdr:not(.is-solid) .mobilenav a{color:var(--fg)}
/* ---- header-over-a-dark-stage, independent of theme -----------------
Both hero kinds — the gold emblem on the home page and the photographic
heroes elsewhere — are dark in BOTH themes by design. So the floating
header's colours must follow WHAT IS BEHIND IT, not the reader's theme.
Keying these to [data-theme="dark"] (as the original rules did) left the
light theme painting dark text onto a dark hero, and my first patch keyed
them to light and broke the mirror case. One theme-agnostic rule fixes both.
Once .is-solid applies (scrolled), the header has its own ground and the
normal theme colours take over again. */
/* A photographic hero is dark in BOTH themes -> header text is always light. */
.has-phero .hdr:not(.is-solid) .brand__name{color:#F4EFE5}
.has-phero .hdr:not(.is-solid) .nav > a,
.has-phero .hdr:not(.is-solid) .nav__ddbtn{color:rgba(244,239,229,.86)}
.has-phero .hdr:not(.is-solid) .nav > a:hover,
.has-phero .hdr:not(.is-solid) .nav__ddbtn:hover{color:#fff}
.has-phero .hdr:not(.is-solid) .nav > a.is-active{color:var(--gold-strong)}
.has-phero .hdr:not(.is-solid) .ttoggle{border-color:rgba(244,239,229,.3)}
.has-phero .hdr:not(.is-solid) .nav-toggle span{background:#F4EFE5}
/* The home emblem band now FOLLOWS the theme (black engraving on cream in light),
so only the dark theme needs the light header text there. */
:root[data-theme="dark"] .has-brandhero:not(.has-phero) .hdr:not(.is-solid) .brand__name{color:#F4EFE5}
:root[data-theme="dark"] .has-brandhero:not(.has-phero) .hdr:not(.is-solid) .nav > a,
:root[data-theme="dark"] .has-brandhero:not(.has-phero) .hdr:not(.is-solid) .nav__ddbtn{color:rgba(244,239,229,.86)}
:root[data-theme="dark"] .has-brandhero:not(.has-phero) .hdr:not(.is-solid) .nav-toggle span{background:#F4EFE5}
/* ============================================================
OPENING BAND (2026-07-24) — the crest and the pitch share the
FIRST SCREEN.
Before this block .brandhero was height:calc(100svh - 74px)
filled by the crest alone, so the H1, the lede and the phone
CTA were a full scroll below the fold on every viewport wider
than 640px. Capping the crest alone cannot fix it: at 1280x800
the header + the 128px section pad + the 44ch pitch already
measure 881px against a 725px budget. So the crest and the copy
share the band side by side from 1024px up.
The crest is never cropped and never scaled non-uniformly — it
keeps object-fit:contain and is bounded by max-width/max-height
only, so it always renders at its true 2000:1171 ratio.
The band is a dark stage in BOTH themes, exactly like .phero,
and it is pulled up under the sticky header. That is what makes
the theme-agnostic header rules directly above this comment
TRUE: until now .brandhero started *below* the header, so in the
light theme the header painted #F4EFE5 onto the #F7F2E9 page.
============================================================ */
.opening{position:relative;background:#080A0D;
margin-top:calc(var(--hdr-h) * -1);padding-top:var(--hdr-h);
padding-bottom:clamp(24px,4vh,56px)}
.opening > .brandhero{background:transparent}
.opening > #pitch{padding-top:clamp(16px,2.4vh,30px)}
/* The ground under this band is #080A0D in BOTH themes, so every
colour inside it is a literal. The light-theme tokens are all
dark (--fg #1B1712, --fg-muted #57514A, --gold-strong #84631F,
--line-2 rgba(26,20,12,.18)) and would disappear here. This is
the same rule .phero already follows. */
.opening .pitch__tagline{color:#DAC49A}
.opening .hero-subline{color:rgba(246,242,233,.60)}
.opening .pitch h1{color:#F6F2E9}
.opening .pitch .lede{color:rgba(246,242,233,.86)}
.opening .phone-lg--hero{color:#EBC98A}
.opening .phone-lg--hero:hover{color:#fff}
.opening .btn--gold{background:#BE9A5A;border-color:#BE9A5A;color:#17130B}
.opening .btn--ghost{color:#F6F2E9;border-color:rgba(246,242,233,.30)}
.opening .btn--ghost:hover{color:#DAC49A;border-color:#DAC49A}
.opening .reassure{color:rgba(246,242,233,.62)}
.opening .reassure span+span::before{background:rgba(190,154,90,.34)}
/* same reason: --gold-strong is #84631F in light theme, unreadable
on the band the header now floats over */
.has-brandhero .hdr:not(.is-solid) .nav > a.is-active{color:#DAC49A}
/* Phones: the crest already stopped eating 100svh here
(base.css:519-523). This only reclaims the section padding that
pushed the phone CTA 8px past the fold on a 390x844 screen. */
@media(max-width:640px){
.brandhero{padding:14px 8px 16px}
}
/* Tablet and up: the crest stops being the entire first screen.
38svh keeps it the largest object on the page without letting it
push the sales copy out of view; 360px stops it ballooning on
tall portrait tablets. */
@media(min-width:641px){
.opening{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.brandhero{height:auto;min-height:0;padding:clamp(10px,1.6vh,22px) 8px clamp(12px,1.8vh,24px)}
.brandhero__emblem{width:auto;height:auto;max-width:100%;max-height:min(38svh,360px);margin-inline:auto}
.brandhero__cue{display:none}
.pitch{max-width:min(680px,92vw)}
.pitch .lede{max-width:56ch}
}
/* Laptop and up: crest and copy stand side by side, both centred
in the 100svh band. 1.28fr/1fr keeps the crest the dominant
object; from 1360px it takes 1.45fr because the copy column has
stopped needing the width. The padding-inline max() keeps the
dark ground full-bleed while capping the content at 1380px. */
@media(min-width:1024px){
.opening{display:grid;align-items:center;
grid-template-columns:minmax(0,1.28fr) minmax(0,1fr);
column-gap:clamp(24px,2.8vw,56px);
padding-inline:max(clamp(20px,3vw,44px), calc((100% - 1380px) / 2))}
.opening > .brandhero{height:auto;min-height:0;padding:0;overflow:visible}
.opening .brandhero__emblem{width:auto;height:auto;max-width:100%;
max-height:calc(100svh - 150px);margin-inline:auto}
.opening > #pitch{padding:0}
.opening > #pitch > .container{padding-inline:0;max-width:none}
.opening .pitch{max-width:none;gap:12px;text-align:left;align-items:flex-start}
.opening .pitch .lede{max-width:46ch}
.opening .pitch__ctas{justify-content:flex-start}
.opening .pitch .phone-lg--hero{align-self:flex-start;justify-content:flex-start;margin-inline:0}
.opening .reassure{justify-content:flex-start}
}
@media(min-width:1360px){
.opening{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
}
/* FIX (bug B2): `1.2rem+1.4vw` is invalid CSS — inside clamp()/calc()
the + operator must be surrounded by whitespace, so BOTH of these
declarations were being dropped by the parser and the hero phone
number has been rendering at the inherited 17px instead of
21.6-27.2px. Verified in the CSSOM: base.css:686 appears with no
font-size at all. */
.phone-lg{font-size:clamp(1.5rem, 1.2rem + 1.4vw, 2rem)}
.phone-lg--hero{font-size:clamp(1.35rem, 1.1rem + 1.1vw, 1.7rem)}
/* ============================================================
LEGIBILITY SWEEP — findings from the Sonnet audit fleet.
============================================================ */
/* ---- The audit fleet reported the home header floating over the page
background. It does NOT: build_elite.py emits a
wrapper whose margin-top already pulls the dark plate under the sticky
header, verified live (opening.top = 0, header 0-75px, ivory nav at
18.3:1 in BOTH themes). The fleet had read a stale copy of index.html.
The symptom in the screenshot was the leaked header colour rule, fixed
above by keying header colours to the BACKDROP instead of the theme. */
/* ---- HIGH: the hero eyebrow was the one element on the dark stage still using
a theme-swapping token (--gold-strong flips to #84631F in light), measuring
1.33-3.17:1 over the photographs. Its sibling .phone-lg--head is already
hardcoded for exactly this reason. */
.phero .eyebrow{color:#EBC98A;text-shadow:0 1px 2px rgba(0,0,0,.62),0 1px 18px rgba(0,0,0,.5)}
/* ---- THE MERGE: one leaking token caused ~20 "washed-out text" symptoms.
:root[data-variant="b"]{--fg-faint:#968C7C} is tuned for the DARK surface but
carries no [data-theme] qualifier, and every page ships data-variant="b" — so
it beat the light value by source order and LIGHTENED faint text on cream
(2.97:1). Same specificity, later in source, so this wins for light only. */
:root[data-theme="light"]{--fg-faint:#6E6659}
/* ---- prose deserves more than a micro-label: 5.08:1 -> 7.03:1 */
.stack__note,.vs__them,.reassure,.ft__bot,.ft__mono,.console__note{color:var(--fg-muted)}
/* ---- type-size floors for a 30-70 year-old audience, much of it on a phone:
sentences >= 16px, uppercase micro-labels >= 12px, form controls >= 16px
(below 16px iOS Safari zooms the page on focus). */
.clabel{font-size:1rem}
.cinput{font-size:1.05rem}
.node__meta{font-size:.88rem}
details.rf summary{font-size:1rem}
details.rf .rf__a{font-size:1rem}
.post p{font-size:1rem}
.reassure{font-size:.88rem}
.logos .logos__lbl{font-size:.75rem}
.console__cap{font-size:.75rem}
.zone__code{font-size:.75rem}
.cline .k{font-size:.75rem}
.post__date{font-size:.75rem}
.card__meta{font-size:.75rem}
.vs__head{font-size:.78rem}
.ft h4{font-size:.78rem}
.ft__bot{font-size:.82rem}
.ft__mono{font-size:.85rem}
/* ============================================================
LIGHT-THEME HOME STAGE — the mono engraving Max supplied.
The gold emblem was rejected on white ("на білому виглядає жахливо")
because gold engraving washes out. The MONO black artwork does not,
so in light theme the opening band becomes the page's own cream and
the emblem swaps to the black engraving. #FFFFFF inside the source SVG
was recoloured to #F7F2E9 before rasterising, so the plate has no edge.
============================================================ */
.brandhero__emblem{background-image:var(--em);background-size:contain;
background-position:center;background-repeat:no-repeat;
/* it is a div now, not an , so it carries no intrinsic size —
the frame's own ratio has to be declared or the box collapses to 0 */
display:block;width:100%;height:auto;aspect-ratio:2000/1171;max-height:100%;
margin-inline:auto}
@media(min-width:641px){
.brandhero__emblem{width:100%;height:auto;max-width:100%;max-height:min(38svh,360px)}
}
/* The light hero art carries NO alpha: like the dark variants (matted onto
#080A0D) it is flattened onto the exact light band colour: #F7F2E9, which is
--bg from :root[data-theme="light"][data-variant="b"] -- NOT the #F6F3EE
earlier in the light block, which that variant overrides on every page.
That halved the files: the ragged alpha edge of the guilloche engraving cost
more bytes than the picture itself (168KB -> 86KB at 800px). Consequence: the
band under the crest must stay #F7F2E9 or the art paints a visible rectangle.
Re-matte hero-logo-light-*.webp from hero-logo-light.webp (which keeps its
alpha, and is the master) if that colour ever moves. */
:root[data-theme="light"] .brandhero__emblem{background-image:var(--eml)}
:root[data-theme="light"] .opening{background:var(--bg)}
:root[data-theme="light"] .opening > .brandhero{background:transparent}
/* the band is now light, so every literal that was hardcoded for the dark
stage has to come back to the theme tokens */
:root[data-theme="light"] .opening .pitch__tagline{color:var(--gold-strong)}
:root[data-theme="light"] .opening .hero-subline{color:var(--fg-muted)}
:root[data-theme="light"] .opening .pitch h1{color:var(--fg)}
:root[data-theme="light"] .opening .pitch .lede{color:var(--fg-muted)}
:root[data-theme="light"] .opening .phone-lg--hero{color:var(--gold-ink)}
:root[data-theme="light"] .opening .phone-lg--hero:hover{color:var(--gold-strong)}
:root[data-theme="light"] .opening .btn--ghost{color:var(--fg);border-color:var(--line-2)}
:root[data-theme="light"] .opening .btn--ghost:hover{color:var(--gold-strong);border-color:var(--gold-strong)}
:root[data-theme="light"] .opening .reassure{color:var(--fg-faint)}
/* ============================================================
SHORT-VIEWPORT STACK (2026-07-24, audit #1 follow-up)
============================================================
641-1023px is still the stacked crest-over-copy layout (the grid
only starts at 1024px), and the "Tablet and up" block earlier in
this file sizes the crest for a TALL 641-1023px viewport (a phone
turned sideways, a portrait tablet). On a SHORT one — a
non-maximized laptop window or a 1024x600-class screen, measured
failures at 1023x692 and 978x692 — that same 38svh/360px crest plus
the full pitch stack (tagline, subline, H1, lede, phone, CTAs,
reassurance strip) no longer fits above the fold: the phone CTA
lands near 750px on a 692px-tall screen.
Lowering the 1024px grid breakpoint instead would change the
tablet-landscape composition (screenshot in the wave-2 handoff),
so this stays scoped to width x height instead. It has to live at
the END of the file: it shares selectors with the "Tablet and up"
and "LIGHT-THEME HOME STAGE" blocks above (equal specificity), and
an earlier position was silently overridden by their later,
width-only rules matching the same viewport.
The crest keeps object-fit:contain — shrunk, never cropped or
squashed — and the hero-subline (a restatement of the H1, not
required content) steps aside so the mandatory H1 + lede + phone +
CTAs still fit. */
@media(min-width:641px) and (max-width:1023px) and (max-height:760px){
.opening{padding-bottom:clamp(10px,2vh,20px)}
.brandhero{padding:clamp(4px,1vh,10px) 8px clamp(4px,1vh,10px)}
.brandhero__emblem{max-height:min(19svh,150px)}
.pitch{gap:8px;max-width:min(720px,94vw)}
.pitch .hero-subline{display:none}
.pitch h1{font-size:clamp(1.8rem, 1.4rem + 1.8vw, 2.4rem);line-height:1.08}
.pitch .lede{max-width:62ch}
.pitch .phone-lg--hero{margin-top:0}
.pitch__ctas{margin-top:2px}
.reassure{margin-top:6px}
}
:root[data-theme="light"] .opening .reassure span+span::before{background:var(--line-2)}
:root[data-theme="light"] .has-brandhero .hdr:not(.is-solid) .nav > a.is-active{color:var(--gold-strong)}
/* base.css:528 paints the burger #F4EFE5 for any .has-brandhero page and is not
theme-scoped — invisible now that the home stage is cream in light theme.
Photographic heroes are unaffected: they stay dark in both themes. */
:root[data-theme="light"] .has-brandhero:not(.has-phero) .hdr:not(.is-solid) .nav-toggle span{background:var(--fg)}
:root[data-theme="light"] .has-brandhero:not(.has-phero) .hdr:not(.is-solid) .ttoggle{border-color:var(--line-2)}
:root[data-theme="light"] .opening .brandhero__cue{color:var(--fg-faint)}
/* ---- nav mark: the Franklin crest, identical in both themes --------
Earlier attempts swapped in a cream-disc variant (showed as a white
ring on transparent headers) and then a bare "F" letterform (wrong
mark entirely). Both themes now render the same gold-on-black medallion
at the same size — it already reads cleanly on light and dark alike. */
.brand__mark{display:block;background-image:var(--mk);background-size:contain;
background-position:center;background-repeat:no-repeat}
:root[data-theme="light"] .brand__mark{background-image:var(--mkl);border-radius:50%}
/* ============================================================
ORG CHART — one shape at every width, two-way arrows throughout
------------------------------------------------------------
Previously the SVG only wired commander<->generals and general<->general,
the general->officer bus was drawn with CSS pseudo-elements (so it could
never carry arrowheads), and below 820px the script bailed out entirely and
the whole thing reflowed into a stacked list. Now every connector is one
SVG path with a head at BOTH ends, and the chart keeps its real shape on a
phone — it pans instead of collapsing.
============================================================ */
.orgwrap{width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
scrollbar-width:thin;padding-bottom:6px}
.orgwrap > .org{min-width:940px}
/* the chart holds its two-branch grid at every width */
.org__generals{grid-template-columns:1fr auto 1fr;align-items:start;gap:clamp(18px,2.6vw,38px)}
.branch__officers{grid-template-columns:repeat(3,1fr)}
.org__cross{flex-direction:column;align-self:stretch;justify-content:flex-start;padding-top:26px}
.org__cross .arrow2{transform:none}
.org__cross::before,.org__cross::after{display:block}
/* SVG owns every connector now — retire the CSS-drawn ones so nothing doubles */
.branch__vconn,
.branch::before,
.branch__officers::before,
.org__conn::before{display:none !important;content:none !important}
.org__conn{height:34px}
/* a soft edge-fade tells the reader the chart continues past the screen */
@media(max-width:980px){
.orgwrap{position:relative;
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 14px,#000 calc(100% - 14px),transparent 100%)}
}
/* base.css:794 hid the wires below 820px for the old stacked fallback.
The chart now keeps its real shape at every width, so the wires must
draw on phones too — that hidden SVG was the whole "каша" on mobile. */
@media(max-width:819px){ .org__wires{display:block} }
.org{position:relative}
/* ---- footer social row ---------------------------------------
One icon per network that actually has a URL. Hairline circles, no
brand colours — the footer is engraved, not a widget shelf. */
.ft__soc{display:flex;gap:10px;margin-top:var(--s-4)}
.ft__soc-l{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
border:1px solid var(--line-2);color:var(--fg-muted);transition:color .16s,border-color .16s,background .16s}
.ft__soc-l:hover{color:var(--gold-strong);border-color:var(--gold-line);background:var(--gold-tint)}
.ft__soc-l svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.ft__soc-l svg path[fill="currentColor"]{stroke:none}
/* connector weight: the hairline read as tentative next to the cards */
.org__wires .ow-g path{stroke:var(--gold-line);stroke-width:1.7;opacity:1;
stroke-linejoin:round;stroke-linecap:butt}
.org__wires marker path{stroke:var(--gold-strong);stroke-width:1.9}
/* ============================================================
DATA BLOCKS — the tables and procedures already in the copy
------------------------------------------------------------
Every blog post and guide ships a real comparison table and most carry a
numbered procedure. Until now base.css had ZERO rules for either, so they
rendered at browser default: white grid lines on a near-black page, header
cells indistinguishable from data, and a wide table shoving the whole page
sideways on a phone. These are ruled specimen blocks, not bordered cards:
hairlines and ground-tone only, matching the .beat/.chapter vocabulary.
============================================================ */
/* ---- LEDGER (tables) ---- */
.ledger{margin:var(--s-5) 0;overflow-x:auto;-webkit-overflow-scrolling:touch;
border-top:1px solid var(--gold-line);border-bottom:1px solid var(--gold-line)}
.ledger:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.ledger table{width:100%;min-width:min(560px,100%);border-collapse:collapse;
font-size:.97rem;line-height:1.5}
.ledger thead th{font-family:var(--data);font-size:.72rem;font-weight:600;
letter-spacing:.12em;text-transform:uppercase;color:var(--gold-ink);
text-align:left;vertical-align:bottom;padding:14px 16px 11px;
border-bottom:1px solid var(--gold-line);white-space:nowrap}
.ledger tbody td{padding:13px 16px;color:var(--fg-muted);vertical-align:top;
border-top:1px solid var(--line)}
.ledger tbody tr:first-child td{border-top:0}
/* the first column is the row's question/label — it carries the reading spine */
.ledger tbody td.lbl{color:var(--fg);font-weight:500}
/* figures line up in columns and never wrap mid-number */
.ledger td.num{font-family:var(--data);font-variant-numeric:tabular-nums;
color:var(--fg);white-space:nowrap;text-align:right}
.ledger thead th:last-child:not(:first-child){text-align:left}
/* zebra is a dated pattern; a whisper of ground on hover is enough */
.ledger tbody tr:hover td{background:var(--gold-tint)}
@media(hover:none){.ledger tbody tr:hover td{background:none}}
@media(max-width:520px){
.ledger table{font-size:.92rem}
.ledger thead th,.ledger tbody td{padding-inline:12px}
}
/* ---- RAIL (numbered procedures) ----
A real sequence deserves to read as one: a gold spine down the left with
engraved numerals, instead of the browser's default "1." in body type. */
ol.rail{list-style:none;margin:var(--s-5) 0;padding:0 0 0 var(--s-6);
counter-reset:rail;position:relative;max-width:68ch}
ol.rail::before{content:"";position:absolute;left:14px;top:6px;bottom:6px;
width:1px;background:var(--gold-line)}
ol.rail > li{counter-increment:rail;position:relative;margin:0 0 var(--s-4);
padding-left:2px;color:var(--fg-muted);line-height:1.62}
ol.rail > li:last-child{margin-bottom:0}
ol.rail > li::before{content:counter(rail,decimal-leading-zero);
position:absolute;left:calc(var(--s-6) * -1);top:1px;width:28px;
font-family:var(--data);font-size:.72rem;font-weight:600;letter-spacing:.06em;
color:var(--gold-ink);text-align:center;
background:var(--bg);padding:3px 0}
ol.rail > li strong{color:var(--fg);font-weight:600}
/* inside a banded chapter the numerals must sit on the band, not the page */
.section--band ol.rail > li::before{background:var(--surf-1)}
@media(max-width:520px){
ol.rail{padding-left:var(--s-5)}
ol.rail::before{left:10px}
ol.rail > li::before{left:calc(var(--s-5) * -1);width:22px}
}
/* a warning list keeps the same rhythm, only the glyph and its colour change */
.checks--warn .checks__l li svg{stroke:var(--gold-strong);fill:none;stroke-width:1.9}
:root[data-theme="light"] .checks--warn .checks__l li svg{stroke:#8A5A12}
/* ---- STEPS — a procedure the copy already numbered ----------------
/how-it-works/ is written as seven numbered stages. Rendering them as plain
prose threw that structure away. The numeral comes from a counter (the copy's
own "1. " is stripped in the generator) so the sequence can never drift out
of order when a stage is added or moved. */
ol.steps{list-style:none;margin:0;padding:0;counter-reset:step;position:relative}
ol.steps::before{content:"";position:absolute;left:19px;top:14px;bottom:14px;
width:1px;background:var(--gold-line)}
.step{counter-increment:step;position:relative;padding:0 0 var(--s-6) var(--s-7)}
.step:last-child{padding-bottom:0}
.step::before{content:counter(step,decimal-leading-zero);position:absolute;
left:0;top:0;width:40px;height:40px;display:grid;place-items:center;
font-family:var(--data);font-size:.78rem;font-weight:600;letter-spacing:.04em;
color:var(--gold-ink);background:var(--bg);
border:1px solid var(--gold-line);border-radius:50%}
.step__t{font-family:var(--display);font-weight:600;color:var(--fg);
font-size:clamp(1.2rem,1.02rem + .72vw,1.46rem);line-height:1.24;
letter-spacing:-.008em;margin:6px 0 var(--s-3)}
.step__b > :last-child{margin-bottom:0}
.section--band ol.steps .step::before{background:var(--surf-1)}
@media(max-width:520px){
.step{padding-left:calc(var(--s-6) + 6px)}
.step::before{width:34px;height:34px;font-size:.72rem}
ol.steps::before{left:16px}
}
/* ============================================================
HERO FIRST-SCREEN FIT — mobile + portrait tablet (2026-08-01)
============================================================
Design-critique finding: on a real portrait tablet (768x1024,
iPad-class) the H1 didn't start until y=582 and the "Call the
dispatch desk" CTA landed at y=869-921 — inside the 1024px
viewport only by a hair. RU/UA copy (routinely longer than EN,
see the nav-wrap incident) or a slightly shorter real device
viewport tips that below the fold. Two things were fighting
the fix here:
1) the "Tablet and up" crest cap (min(38svh,360px), line ~1210)
is sized for landscape/short windows, not tall portrait ones;
2) .opening's justify-content:center (line ~1208) is a no-op
today — content already exceeds min-height:100svh, so there
is nothing to center — but it starts re-adding padding the
moment the crest above is shrunk enough to fit, quietly
eating back about half of any savings.
Verified live at 768x1024: crest 360->220px alone only moved
ctaBottom 921->830; adding justify-content:flex-start moved it
to 729 (243px of margin left against the 1024px viewport).
Mobile (<=640px) had the same shape of problem at a smaller
scale: ctaBottom landed at 844 against an 812px viewport (32px
over — enough to matter once RU/UA text runs longer). Fixed by
tightening the pitch gap/margins already used for the
SHORT-VIEWPORT STACK case above, plus a modest crest cap —
the hero-subline stays visible here (it states what the service
IS, not just a restatement of the H1, unlike the short-viewport
case where hiding it was fine).
Placed at the END of the file on purpose — see the
SHORT-VIEWPORT STACK comment above for why: same selectors,
same specificity, so source order decides the winner. */
@media(max-width:640px){
.opening .pitch{gap:8px}
.opening .pitch__ctas{margin-top:2px}
.opening .reassure{margin-top:6px}
.brandhero{padding:10px 8px 10px}
.brandhero__emblem{max-height:160px}
}
@media(min-width:641px) and (max-width:1023px) and (min-height:761px){
.opening{min-height:0;justify-content:flex-start}
.brandhero__emblem{max-height:min(24svh,220px)}
}
/* ============================================================
NET PAY CALCULATOR (/net-pay-calculator/)
Reuses what already exists rather than restating it: the contact
form's field furniture (.cform/.cfield/.clabel/.cinput) and the
rate-con console's line rows (.cline with .k/.v, .rc__total for
the one figure that matters). Both are already theme-complete, so
the tool inherits light and dark for free -- including the
light-theme .rc__total .v override 900 lines above.
Only what those two genuinely do not have gets a rule here: the
$ / % / $/mi unit adornments inside a field, the help line under
a field, the period segmented control, and the result panel.
Every colour is a token, never a literal, for the same reason:
colour keys to the backdrop, and the backdrop changes with theme.
============================================================ */
.calc{display:flex;flex-direction:column;gap:var(--s-4)}
/* .cfield already carries margin-bottom, so .cform's own flex gap would
double every gutter on a ten-field form. */
.calc .cform{gap:0}
.calc__grid{display:block}
@media(min-width:700px){
.calc__grid{display:grid;grid-template-columns:1fr 1fr;column-gap:18px}
}
/* flex, not block: an inline-level inside a block wrapper leaves a
baseline descender gap at the bottom, which throws the absolutely-centred
unit glyph a couple of pixels low. As a flex item there is no gap, so
top:50% lands the $ / % exactly on the input's centre line. */
.calc__inwrap{position:relative;display:flex}
.calc__unit{position:absolute;left:13px;top:50%;transform:translateY(-50%);
font-family:var(--data);font-size:.9rem;color:var(--fg-faint);pointer-events:none}
.calc__unit--suf{left:auto;right:13px}
.calc__in--pre{padding-left:32px}
.calc__in--suf{padding-right:58px}
.calc__help{display:block;margin:6px 2px 0;font-size:.82rem;line-height:1.55;color:var(--fg-faint)}
/* The global reset is a{color:inherit;text-decoration:none}, so a link inside a
field hint would be invisible. The form is not inside .prose, so it needs the
same treatment .prose a gets, scoped here. */
.calc__help a{color:var(--gold-ink);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
/* Period picker: a fieldset so the legend labels both radios for a screen
reader, styled flat so it does not read as a second panel inside the form. */
.calc__seg{border:0;padding:0;margin:0 0 18px;min-width:0}
.calc__seg .clabel{padding:0}
.calc__segrow{display:flex;flex-wrap:wrap;gap:8px}
/* The two :has() rules below were reported as failing to repaint on a period
switch. NOT REPRODUCED, 2026-08-12: :has() invalidates correctly here. What is
actually frozen is the TRANSITION on background/border-color/color, because a
browser pane that is not compositing frames never advances the transition
clock -- so any transitioned property reads its start value forever, whatever
selector set it. Proof, same page, same clicks: an untransitioned property
under :has() (box-shadow, outline) tracks :checked on every click, and the
background snaps to the right value the instant `transition:none` is applied.
An adjacent-sibling rewrite (`input:checked + span`) shows the identical
freeze, which is what rules the selector out as the cause. Left as it was. */
.calc__segopt{flex:1 1 150px;display:flex;align-items:center;justify-content:center;gap:9px;
padding:11px 14px;border:1px solid var(--line-2);border-radius:var(--radius-sm);
background:var(--surf-2);color:var(--fg-muted);font-size:.94rem;cursor:pointer;
transition:border-color .15s,color .15s,background .15s}
.calc__segopt:hover{border-color:var(--gold-line);color:var(--fg)}
.calc__segopt input{accent-color:var(--gold);margin:0;flex:none}
.calc__segopt:has(input:checked){border-color:var(--gold);background:var(--gold-tint);color:var(--fg)}
.calc__segopt:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.calc__check{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.calc__check input{accent-color:var(--gold);flex:none;width:17px;height:17px;margin:2px 0 0}
.calc__check .clabel{margin:0;color:var(--fg)}
.calc__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.calc__actions[hidden]{display:none}
.calc__actions .btn{flex:1 1 210px;justify-content:center}
/* Without JS the Calculate button is a 49px gold primary CTA whose only handler
is in calc.js -- it swallows every tap. Same `.js` flag base.css already uses
for .reveal at the top of this file; the flag is set by the sha-pinned inline
script in head(), so nothing here needs a CSP change. */
.calc__nojs{display:none}
html:not(.js) .calc__actions{display:none}
html:not(.js) .calc__nojs{display:block;margin:14px 0 0;font-size:.88rem;line-height:1.6;
color:var(--fg-muted);border-left:2px solid var(--gold-line);padding-left:13px}
/* The result panel carries the gold hairline the form does not: on a page whose
whole point is one number, the eye needs to know which box that number is in. */
.calc__out{background:var(--surf-1);border:1px solid var(--gold-line);border-radius:var(--radius);padding:24px}
.calc__out:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.calc__out h2{margin:0;font-size:1.24rem}
.calc__period{margin:8px 0 0;font-family:var(--data);font-size:.72rem;
letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.calc__rows{display:flex;flex-direction:column;gap:11px;margin-top:20px}
.calc__rows[hidden]{display:none}
/* .cline is display:flex, so the bare [hidden] attribute would not hide the
linehaul row on its own. */
.calc__rows .cline[hidden]{display:none}
/* Sits inside the panel, immediately under the numbers it is about: the loss
warning and the "no total yet" line are both readings of the figures above,
not footnotes. */
.calc__flag{margin:16px 0 0;padding-left:13px;border-left:2px solid var(--line-2);
font-size:.88rem;line-height:1.6;color:var(--fg-muted)}
.calc__flag[hidden]{display:none}
.calc__flag--loss{border-left-color:var(--gold);color:var(--fg)}
.calc__out .rc__total{margin-top:8px;padding-top:14px;border-top:1px solid var(--gold-line)}
.calc__empty{margin:16px 0 0;color:var(--fg-muted);font-size:.95rem;line-height:1.62}
/* Sits directly under the numbers, deliberately -- a disclaimer in the footer is
a disclaimer nobody reading the result will ever see. */
.calc__note{margin:20px 0 0;padding-top:15px;border-top:1px solid var(--line);
font-size:.82rem;line-height:1.6;color:var(--fg-faint)}
/* ============================================================
MOBILE LANDING PASS (2026-09-01) — owner review of the phone view.
Appended last on purpose: every rule below is an override of an
earlier block, so it must win by source order.
============================================================ */
/* ---- 6. gold buttons in the light theme: bronze, white type, AA+ ----
#7A5B20 on white measures 6.3:1; the old #9C7833 with white type was 3.9:1
and failed AA for body-size text (the phone CTA, the sticky bar button). */
:root[data-theme="light"]{--gold-btn:#7A5B20;--gold-btn-h:#66491A}
:root[data-theme="light"] .btn--gold,
:root[data-theme="light"] .opening .btn--gold,
:root[data-theme="light"] .actionbar .btn--gold{background:var(--gold-btn);border-color:var(--gold-btn);color:#fff}
:root[data-theme="light"] .btn--gold:hover,
:root[data-theme="light"] .opening .btn--gold:hover{background:var(--gold-btn-h);border-color:var(--gold-btn-h)}
/* ---- 2. header: theme pill and language pill are the same control size ----
Hamburger range (<=900px) shows ONE theme button (the theme you are not on),
the rule that used to apply only <=430px. Both pills: 62x44, same radius. */
@media(max-width:900px){
:root[data-theme="dark"] .hdr__act .ttoggle button[data-set-theme="dark"]{display:none}
:root[data-theme="light"] .hdr__act .ttoggle button[data-set-theme="light"]{display:none}
.hdr__act .ttoggle{padding:0;border-radius:22px;height:44px;box-sizing:border-box}
.hdr__act .ttoggle button{width:60px;min-width:60px;height:42px;min-height:42px;border-radius:22px;
background:transparent;color:var(--fg-muted);padding:0}
.hdr__act .lang__toggle{width:62px;min-width:62px;height:44px;min-height:44px;padding:0;
justify-content:center;border-radius:22px;box-sizing:border-box;gap:5px}
}
/* ---- 1./3. hero on phones: no tagline, crest as wide as the screen,
tight vertical rhythm so crest + subline + H1 + lede + phone share one screen ---- */
@media(max-width:640px){
.opening .brandhero{height:auto;min-height:0;padding:4px 4px 0}
.opening .brandhero__emblem{width:100%;max-width:none;height:auto;max-height:none;
aspect-ratio:800/468;margin-inline:auto}
.opening #pitch{padding-top:6px}
.opening .pitch{gap:9px}
.opening .hero-subline{font-size:.8rem;margin-top:0}
.opening .pitch h1{font-size:clamp(1.85rem,1.3rem + 2.4vw,2.25rem);line-height:1.06}
.opening .pitch .lede{font-size:.98rem;line-height:1.5}
.opening .phone-lg--hero{margin:0 auto;font-size:1.5rem}
/* 6. one width for all three CTAs, stacked */
.opening .pitch__ctas{flex-direction:column;align-items:stretch;width:100%;gap:10px;margin-top:2px}
.opening .pitch__ctas .btn{width:100%;justify-content:center;min-height:50px}
/* 7. reassurance line: one item per row, a gold dot each — the vertical bar
separator belonged to the FOLLOWING item and led the wrapped line */
.opening .reassure{flex-direction:column;align-items:center;gap:7px;margin-top:14px;font-size:.8rem;color:var(--fg-muted)}
.opening .reassure span{display:inline-flex;align-items:center;gap:8px}
.opening .reassure span::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);margin:0}
.opening .reassure span+span::before{width:5px;height:5px;border-radius:50%;background:var(--gold);margin:0}
}
/* ---- 4./5. driver reviews: photo strip, tighter card, visible paging ---- */
/* padding:0 here was staged for a .rvw__pic photo strip inside a .rvw__body
wrapper; the design went a different way (a round face beside the name) and
the wrapper never reached the markup, so the cards lost their inset and the
stars and the avatar ended up hard against the edges (Max, 2026-09-02). */
.rvw{padding:22px 22px 20px;overflow:hidden;width:min(300px,76vw)}
.rvw__stars{margin-bottom:10px}
.rvw__stars svg{width:14px;height:14px}
.rvw__quote{font-size:1rem;line-height:1.48}
.rvw__quote{flex:0 0 auto}
.rvw__who{margin-top:auto;padding-top:10px}
.rvw__quote + .rvw__who{margin-top:auto}
.rvw__body{gap:0}
.rvw__quote{margin-bottom:14px}
/* the right-hand fade was 60px and swallowed the peeking next card — the one
thing on a phone that says "there is more". A hairline fade only. */
.rvw__car:not(.is-static) .rvw__track:not(:focus-visible){
-webkit-mask-image:linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 22px),transparent 100%);
mask-image:linear-gradient(to right,transparent 0,#000 10px,#000 calc(100% - 22px),transparent 100%)}
.rvw__track{scroll-padding-inline:4px}
/* prev / dots / next at every width; hidden only when the whole set fits */
.rvw__nav-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:14px}
.rvw__car.is-static .rvw__nav-row{display:none}
.rvw__nav{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
border:1px solid var(--line-2);background:transparent;color:var(--fg);cursor:pointer;padding:0}
.rvw__nav:hover{border-color:var(--gold);color:var(--gold)}
.rvw__nav svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.rvw__dots{display:flex;align-items:center;gap:7px}
.rvw__dots button{position:relative;width:7px;height:7px;border-radius:50%;border:0;padding:0;
background:var(--line-2);cursor:pointer;transition:transform .15s,background .15s}
.rvw__dots button::after{content:"";position:absolute;inset:-9px} /* 25px hit area */
.rvw__dots button.is-on{background:var(--gold);transform:scale(1.35)}
@media(max-width:640px){
.rvw__nav{width:44px;height:44px}
.rvw__nav-row{margin-top:10px}
}
/* ---- 9. org chart ----
Phones and tablets (<=819px): a vertical tree with a left rail — commander,
then each team as general + three officer chips, a "cover each other" pill
between the two teams. Every link is a two-way arrow, drawn as a data-URI
SVG so it themes via a custom property. Nothing scrolls sideways any more.
Desktop (>=820px): the JS-drawn tree, with general->officer links now
orthogonal (bus + drops) instead of splayed diagonals, and stronger ink. */
:root{--arr2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M1.5 5h21M5.5 1.5 1.5 5l4 3.5M18.5 1.5l4 3.5-4 3.5' fill='none' stroke='%23C6A265' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--wire:rgba(198,162,101,.62)}
:root[data-theme="light"]{--arr2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 10'%3E%3Cpath d='M1.5 5h21M5.5 1.5 1.5 5l4 3.5M18.5 1.5l4 3.5-4 3.5' fill='none' stroke='%239C7833' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--wire:rgba(156,120,51,.6)}
@media(max-width:819px){
/* ---- 9. org chart on phones/tablets: the SAME shape as desktop —
commander centred on top, the two generals side by side under a bus,
each general's three officers stacked under them on one spine.
All connectors are CSS (orthogonal, Miro-style); the JS wires stay off. */
.orgwrap{overflow:visible;padding-bottom:0;-webkit-mask-image:none;mask-image:none;max-width:600px;margin-inline:auto}
.orgwrap > .org{min-width:0}
.org__wires{display:none !important}
.org{gap:0;align-items:center;position:relative}
/* commander: centred block + a stub down to the bus */
.org__node--cmd.node{position:relative;max-width:300px;width:auto;padding:10px 14px;gap:12px;margin:0 auto}
.org__node--cmd::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:18px;background:var(--wire)}
.org__node--cmd .node__photo{width:42px;height:42px}
.org__node--cmd .node__photo span{font-size:.76rem}
.org__node--cmd .node__rank{font-size:.54rem}
.org__node--cmd .node__name{font-size:1.02rem;line-height:1.15}
.org__node--cmd .node__meta{font-size:.64rem;line-height:1.25}
/* two teams side by side: [team] [30px link column] [team] */
.org__generals{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);column-gap:0;row-gap:0;width:100%;margin-top:18px;align-items:start}
.branch{position:relative;padding-top:28px;gap:0;min-width:0;display:flex;flex-direction:column;align-items:stretch}
/* explicit cells: the caption also lives in row 1 (overlapping the bus), so
auto-placement would otherwise squeeze the East team into the 30px column */
.org__generals > .branch:first-child{grid-column:1;grid-row:1}
.org__generals > .branch:last-child{grid-column:3;grid-row:1}
/* bus: each team draws its half, reaching to the middle of the link column */
/* an older block sets content:none !important on these pseudo-elements, so the
content must be !important too or the bus and spine never render */
.branch::before{content:"" !important;display:block !important;position:absolute;top:0;height:1.5px;background:var(--wire)}
.org__generals > .branch:first-child::before{left:50%;right:-15px}
.org__generals > .branch:last-child::before{left:-15px;right:50%}
/* drop from the bus into the general block */
.branch::after{content:"";position:absolute;top:0;left:50%;width:1.5px;height:28px;background:var(--wire)}
.branch > .node{width:100%;max-width:none;margin:0}
.node--gen.node{position:relative;z-index:1;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:10px 8px;min-height:0;box-sizing:border-box}
.node--gen .node__body{align-items:center;text-align:center;gap:2px;width:100%}
.node--gen .node__photo{width:34px;height:34px}
.node--gen .node__photo span{font-size:.66rem}
.node--gen .node__rank{font-size:.5rem;letter-spacing:.08em;line-height:1.3}
.node--gen .node__name{font-size:.94rem;line-height:1.1}
.node--gen .node__meta{font-size:.6rem;line-height:1.25}
.node--gen::before{display:none}
/* officers: stacked under their general, one spine running behind the blocks */
.branch__vconn{display:none !important}
.branch__officers{display:flex;flex-direction:column;gap:8px;position:relative;margin-top:8px;padding:0;width:100%}
.branch__officers::before{content:"" !important;display:block !important;position:absolute;left:50%;top:-8px;bottom:20px;width:1.5px;background:var(--wire)}
.node--sm.node{position:relative;z-index:1;flex-direction:row;align-items:center;text-align:left;gap:8px;padding:7px 8px;min-height:0;border-radius:9px;box-sizing:border-box}
.node--sm::before{display:none}
.node--sm .node__photo{width:26px;height:26px;flex:none}
.node--sm .node__photo span{font-size:.54rem}
.node--sm .node__body{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;text-align:left;gap:1px;min-width:0}
.node--sm .node__name{order:0;flex:none;font-size:.8rem;line-height:1.1}
.node--sm .node__rank{order:1;font-size:.48rem;letter-spacing:.06em;line-height:1.3}
.node--sm .node__meta{order:2;font-size:.58rem;line-height:1.2}
/* "cover each other 24/7": the two-way arrow sits between the generals,
its caption becomes a line under the whole chart */
.org__cross{display:contents}
.org__cross::before,.org__cross::after{display:none}
.org__cross-h{grid-column:2;grid-row:1;display:flex;align-items:flex-start;justify-content:center;align-self:start;padding-top:calc(28px + 30px);gap:0;height:auto}
.org__cross-ln{display:none}
.org__cross-h .arrow2{width:22px;height:22px;transform:none;stroke:var(--gold)}
/* the caption rides ON the bus between commander and generals, like a label
on a diagram edge — the loose footnote with a data-URI arrow under the chart
read as an orphan (Max, 2026-09-02). Text only; the ⟷ lives between the
generals. .org__cross span{max-width:120px} from the desktop block outranks
a bare class, hence the two-class selector. */
.org__cross .org__cross-cap{grid-column:1 / 4;grid-row:1;align-self:start;justify-self:center;position:relative;z-index:3;
display:block;width:auto;max-width:62%;margin-top:-8px;padding:2px 9px;background:var(--bg);border-radius:8px;
text-align:center;text-wrap:balance;font-family:var(--data);font-size:.56rem;letter-spacing:.07em;text-transform:uppercase;
color:var(--gold);line-height:1.25}
}
@media(max-width:360px){
.org__generals{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr)}
.org__generals > .branch:first-child::before{right:-12px}
.org__generals > .branch:last-child::before{left:-12px}
.node--sm .node__name{font-size:.74rem}
}
@media(min-width:820px){
.branch__officers{padding-top:0 !important;margin-top:56px}
.org__wires .ow-g path{stroke:var(--wire);stroke-width:1.8}
.org__wires marker path{stroke:var(--gold);stroke-width:1.9}
.org__cross-cap{max-width:110px}
}
/* ============================================================
FACES (2026-09-02) — driver portraits on the review cards and
dispatcher portraits in the org-chart medallions. Both are AI
stand-ins and both sections say so in a visible line.
============================================================ */
/* the shared portrait: fills whatever round slot it is dropped into */
.face{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
border-radius:50%;background:var(--surf-2)}
/* --- org chart medallions -------------------------------------------------
The monogram slot already draws the ring and the inset shadow; a photo just
replaces the letters inside it, so the engraved frame survives. */
.node__photo:has(.face){background:none;padding:0}
.node__photo .face{box-shadow:inset 0 0 0 2px rgba(0,0,0,.28)}
.org__note{margin-top:22px;text-align:center;color:var(--fg-faint);
font-family:var(--data);font-size:.76rem;line-height:1.45}
/* --- review cards ---------------------------------------------------------
The name row becomes a face + name pair. This replaces the wide photo strip
sketched in the mobile pass — a 5:2 letterbox cropped every face in half. */
.rvw__who{display:flex;align-items:center;gap:11px}
.rvw__face{flex:none;display:block;width:40px;height:40px;border-radius:50%;
overflow:hidden;border:1px solid var(--gold-line)}
.rvw__face span{display:grid;place-items:center;width:100%;height:100%;
font-family:var(--data);font-size:.7rem;color:var(--gold-ink);background:var(--surf-2)}
.rvw__name{min-width:0}
@media(max-width:640px){
.rvw__face{width:36px;height:36px}
.org__note{font-size:.72rem;margin-top:18px}
}
/* ============================================================
HEADER + ORG CHART — owner review 2026-09-02
============================================================ */
/* The grey hairline that ran the full width of the header and crossed the
logo was .mobilenav: fixed, offset by --hdr-h, and closed with
translateY(-120%) -- 120% of ITS OWN height, which for a 322px panel left
its 1px bottom border sitting at y=10. The closed transform now overshoots
past the top of the viewport whatever the panel's height, and the panel is
gone entirely above the hamburger breakpoint, where nothing can open it. */
@media(min-width:901px){ .mobilenav{display:none} }
/* One two-way arrow between the generals, drawn by demo.js, with its caption
under it -- nothing else. The stub hairlines (.org__cross::before/::after)
and the second inline arrow (.org__cross-h) stacked two more rules and a
second arrowhead above it. */
@media(min-width:820px){
.org__cross-h{display:none}
.org__cross::before,.org__cross::after{display:none}
.org__cross{padding:0}
.org__cross .org__cross-cap{margin-top:38px;max-width:150px}
}
/* the owner's slot carries no portrait on purpose: a plain broad-shouldered
silhouette, the way a profile reads before anyone uploads a picture */
.face--sil{display:block;width:78%;height:78%;margin:auto;fill:var(--gold);opacity:.42;box-shadow:none}
.node__photo .face--sil{box-shadow:none}
/* review card breathing room: the stars sit off the top edge, the face row off
the bottom, and neither touches the rounded corner */
.rvw__stars{margin-top:2px}
.rvw__who{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px}
.rvw__face{margin-left:0}
@media(max-width:640px){ .rvw{padding:18px 18px 16px} }
/* ============================================================
TOP-OF-PAGE DEAD SPACE (2026-09-05)
.section carries --pad-sec on BOTH edges — 146px at 1440px, 76px on
a phone. Between two acts that is the rhythm of the page. On the
FIRST section there is no act above it, only the header, so the same
value became a band of nothing between the nav and the H1: measured
144px desktop / 76px mobile on /net-pay-calculator/, /pricing/,
/faq/, /contact/, /how-it-works/, /why-fortuna/, /blog/, /guides/,
/solutions/, /privacy/ and every guide page.
.section--head (:1171) only ever trimmed the BOTTOM, which is why
this survived it. Pages that open with a full-bleed photo hero are
untouched by design: .phero and .brandhero are not .section, so this
selector cannot reach them.
============================================================ */
main > .section:first-child{padding-top:clamp(26px,3vw,46px)}
/* ============================================================
NET PAY CALCULATOR — LAYOUT PASS (2026-09-05)
Two faults, both measured at 1440px:
1. The tool sat in .container--prose (760px, 680px of content), so
grid-template-columns:1fr 1fr resolved to two 306px columns and
the help lines wrapped four to nine times each. The tool and its
own page head now share the 920px container, which puts the
columns near 400px and roughly halves that wrapping.
2. `display:grid` puts the two fields of a row in a SHARED row box:
the taller one sets the height and the shorter one is followed by
a void. "Gross pay" measured 297px tall holding 195px of content,
because "Of that gross, fuel surcharge…" beside it ran 183px of
help on its own. Five rows, five voids — that is the crookedness.
Multi-column has no row boxes. Fields flow one after another and
the browser balances the two columns by height, so a short field
is followed by the next field, never by a gap. break-inside stops
a field being split across the column boundary.
============================================================ */
@media(min-width:700px){
.calc__grid{display:block;columns:2;column-gap:32px}
.calc__grid > .cfield{break-inside:avoid;margin-bottom:20px}
}
/* the help line is guidance, not body copy — it was set at .82rem/1.55, the
same as a paragraph, which is what made nine of them read as an essay
wrapped around a form. Tightened only where there ARE nine of them at once:
on a phone they arrive one at a time and this audience is not young, so
.82rem stays below 700px. */
@media(min-width:700px){ .calc__help{font-size:.78rem;line-height:1.5;margin-top:5px} }
/* the result panel is the payoff, so it gets the width the form has and
its rows get room to be read across */
.calc__out{padding:26px clamp(20px,3vw,30px)}
/* the tool is 840px wide now, so anything with `flex:1 1 …` inside it grew to
match: the two period options became 416px slabs and the Calculate button a
840px bar. Cap the controls; the grid and the result panel keep the width. */
.calc__segrow{max-width:430px}
.calc .cform > .calc__actions{max-width:430px}
/* the tax-reserve field is the one .cfield outside the two columns, so its help
line ran the full 840px — about 150 characters. Everything inside a column is
already narrower than this cap, so it only bites where it should. */
.calc__help{max-width:58ch}
/* phone: 150px is the flex-basis that made the two period options wrap onto
two rows inside a 304px column — a segmented control that is not on one
line has stopped being a segmented control. */
@media(max-width:640px){
.calc__segopt{flex:1 1 128px;padding-inline:10px}
/* the two Money CTAs stack here, so they must be one width, the same rule
the hero CTAs already follow after the 2026-09-01 landing pass */
.moneyproof .pitch__ctas{flex-direction:column;align-items:stretch;width:100%}
.moneyproof .pitch__ctas .btn{justify-content:center}
}
/* ============================================================
TOOL CARD (2026-09-05)
One quiet row pointing at /net-pay-calculator/ from the two pages whose
subject is the arithmetic it does — /pricing/ and the owner-operator net-pay
post. Not a CTA band: both pages already close with one, and a second gold
button reads as a second ask. Same furniture as .calc__out — surface plate,
gold hairline — so it belongs to the page rather than sitting on top of it.
============================================================ */
.toolcard{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
background:var(--surf-1);border:1px solid var(--gold-line);
border-radius:var(--radius);padding:20px clamp(18px,3vw,26px)}
.toolcard__ic{flex:none;display:grid;place-items:center;width:46px;height:46px;
border-radius:50%;background:var(--gold-tint);border:1px solid var(--gold-line)}
.toolcard__ic svg{width:22px;height:22px;stroke:var(--gold);stroke-width:1.6;fill:none}
.toolcard__body{flex:1 1 240px;min-width:0}
.toolcard__h{font-size:1.06rem;line-height:1.3;margin:0 0 5px}
.toolcard__body p{margin:0;font-size:.88rem;line-height:1.55;color:var(--fg-muted)}
.toolcard .btn{flex:none}
@media(max-width:600px){
.toolcard{gap:14px}
.toolcard .btn{width:100%;justify-content:center}
}