/* Majeste site styles: one copy for every page (2026-10-19).
   Order: tokens, fonts, base and type, buttons and chips, layout, then the components (announcement bar, header,
   panels, phone sheet, rows and tiles, closing band, footer and its link hover, toast), then the subpage components.
   Every value a designer would change sitewide is a token in the :root block below: change it there and every page
   follows. Breakpoints cannot be tokens (custom properties do not work inside @media); dev/README.md lists them.
   index.html loads home.css after this file; the estimator card has estimate-teaser.css; page-only rules sit in each
   page's own <style>. Shared markup (header, panels, sheet, announcement bar, footer) lives in dev/build/partials/. */
/* ---------- tokens ---------- */
:root{color-scheme:light;
  --cream:#f0ebdd; --paper:#fbfaf6; --white:#ffffff; --ink:#292929; --ink-2:#4b473f; --muted:#6b665b; --line:#ddd5c2; --line-2:#ebe5d6;
  --gold:#a47a08; --gold-deep:#684c02; --gold-soft:#ceb78a; --green:#609648; --green-deep:#326218; --green-hover:#3f7623; --green-soft:#afcba4; --green-wash:#e6efe1; --teal:#196375;
  --sans:"Haffer","Helvetica Neue",Helvetica,Arial,sans-serif;
  --gutter:12px; --container:1160px; --pad-x:24px; --sec-y:96px;
  --r-s:8px; --r-m:12px; --r-l:16px; --r-xl:24px;
  --io:cubic-bezier(.83,0,.17,1); --out:cubic-bezier(.22,1,.36,1); --std:cubic-bezier(.4,0,.2,1); --fm:cubic-bezier(.42,0,.58,1);
  --bar-h:40px; --nav-h:72px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.16 0 0 0 0 0.16 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --g-mesh:
    radial-gradient(circle farthest-corner at 16% 20%, rgba(164,122,8,.58), rgba(164,122,8,0) 46%),
    radial-gradient(circle farthest-corner at 84% 32%, rgba(96,150,72,.55), rgba(96,150,72,0) 50%),
    radial-gradient(circle farthest-corner at 60% 106%, rgba(206,183,138,.8), rgba(206,183,138,0) 55%),
    radial-gradient(circle farthest-corner at 95% 95%, rgba(25,99,117,.34), rgba(25,99,117,0) 30%),
    #f0ebdd;
  --g-meshwhite:
    radial-gradient(circle farthest-corner at 18% 18%, rgba(206,183,138,.62), rgba(206,183,138,0) 45%),
    radial-gradient(circle farthest-corner at 86% 40%, rgba(175,203,164,.66), rgba(175,203,164,0) 50%),
    radial-gradient(circle farthest-corner at 96% 98%, rgba(25,99,117,.2), rgba(25,99,117,0) 26%),
    #ffffff;
  --g-meadow:
    radial-gradient(circle farthest-corner at 22% 86%, rgba(96,150,72,.5), rgba(96,150,72,0) 52%),
    radial-gradient(circle farthest-corner at 84% 14%, rgba(175,203,164,.85), rgba(175,203,164,0) 50%),
    radial-gradient(circle farthest-corner at 100% 100%, rgba(25,99,117,.32), rgba(25,99,117,0) 34%),
    radial-gradient(circle farthest-corner at 6% 4%, rgba(206,183,138,.45), rgba(206,183,138,0) 36%),
    #f0ebdd;
  --g-lagoon:
    linear-gradient(180deg, rgba(255,255,255,0) 58%, rgba(255,255,255,.22) 64%, rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(206,183,138,.75), rgba(206,183,138,0) 70%),
    radial-gradient(circle farthest-corner at 18% 100%, rgba(175,203,164,.8), rgba(175,203,164,0) 50%),
    radial-gradient(circle farthest-corner at 86% 104%, rgba(25,99,117,.32), rgba(25,99,117,0) 46%),
    #f0ebdd;
  --g-ring:conic-gradient(from 215deg,rgb(var(--gold-soft-rgb)) 0%,rgb(var(--green-soft-rgb)) 26%,#e2ead9 44%,rgb(var(--gold-soft-rgb)) 62%,#b99c5f 80%,rgb(var(--gold-soft-rgb)) 100%);
  --g-glow:radial-gradient(ellipse 85% 70% at 50% 112%, #ceb78a 0%, rgba(206,183,138,.55) 38%, rgba(206,183,138,0) 72%), #f0ebdd;
  --g-glowgreen:radial-gradient(ellipse 80% 90% at 50% 120%, rgba(175,203,164,.95) 0%, rgba(175,203,164,.45) 40%, rgba(175,203,164,0) 75%), #ffffff;
  --sheet-shadow:0 28px 34px rgba(50,98,24,.09),0 75px 63px rgba(50,98,24,.07),0 180px 84px rgba(50,98,24,.05),0 310px 100px rgba(50,98,24,.025),0 391px 109px rgba(50,98,24,.01);
  --card-shadow:0 1px 2px rgba(41,41,41,.05),0 8px 24px rgba(41,41,41,.06);
  /* headings */
  --hf:"Haffer","Helvetica Neue",Helvetica,Arial,sans-serif;--hfw:300;--hs:500;--htone:#9a958a;
  /* deep gradients from the family, dark enough for white type */
  --gd-mesh:radial-gradient(circle farthest-corner at 16% 18%,rgba(206,183,138,.62),rgba(206,183,138,0) 42%),radial-gradient(circle farthest-corner at 86% 30%,rgba(96,150,72,.75),rgba(96,150,72,0) 50%),radial-gradient(circle farthest-corner at 96% 96%,rgba(25,99,117,.55),rgba(25,99,117,0) 36%),linear-gradient(160deg,#3b6a25 0%,#27501a 55%,#1b3a10 100%);
  --gd-lagoon:radial-gradient(ellipse 90% 60% at 50% 0%,rgba(206,183,138,.5),rgba(206,183,138,0) 70%),radial-gradient(circle farthest-corner at 12% 100%,rgba(96,150,72,.55),rgba(96,150,72,0) 50%),linear-gradient(170deg,#1f5a66 0%,#16485a 55%,#0f3a46 100%);
  --gd-meadow:radial-gradient(circle farthest-corner at 84% 14%,rgba(175,203,164,.55),rgba(175,203,164,0) 48%),radial-gradient(circle farthest-corner at 100% 100%,rgba(25,99,117,.55),rgba(25,99,117,0) 38%),radial-gradient(circle farthest-corner at 10% 90%,rgba(206,183,138,.3),rgba(206,183,138,0) 40%),linear-gradient(150deg,#55853c 0%,#3c6c25 50%,#2a5419 100%);
  --gd-glow:radial-gradient(ellipse 85% 70% at 50% 112%,rgba(206,183,138,.85) 0%,rgba(206,183,138,.32) 40%,rgba(206,183,138,0) 72%),radial-gradient(circle farthest-corner at 90% 8%,rgba(96,150,72,.3),rgba(96,150,72,0) 40%),linear-gradient(170deg,#7a5a06 0%,#684c02 50%,#4a3601 100%);
  /* white text on Green Deep */
  --on-green:#ffffff;
  /* the header's height plus a gap: focus and jumps land below the header */
  --sp:calc(var(--nav-h) + var(--gutter) + 12px);
  /* colour channels, for see-through tints: rgba(var(--ink-rgb),.06). Comma lists on purpose: the rgba() form keeps
     gradients blending in sRGB as before (the space-separated rgb() form would switch them to Oklab) */
  --ink-rgb:41,41,41; --white-rgb:255,255,255; --green-deep-rgb:50,98,24; --green-soft-rgb:175,203,164; --green-rgb:96,150,72;
  --gold-rgb:164,122,8; --gold-deep-rgb:104,76,2; --gold-soft-rgb:206,183,138; --teal-rgb:25,99,117; --night-rgb:12,26,10;
  /* tints with a job */
  --hover-fill:rgba(var(--green-soft-rgb),.5); --hover-fill-soft:rgba(var(--green-soft-rgb),.32);
  --hdr-solid-bg:rgba(var(--white-rgb),.94); --wash-ink:rgba(var(--ink-rgb),.06);
  --pill-line:rgba(var(--ink-rgb),.28); --chip-line:rgba(var(--ink-rgb),.25); --pill-hover-bg:rgba(var(--white-rgb),.7);
  --row-hover-line:rgba(var(--gold-deep-rgb),.12); --ul-soft:rgba(var(--green-deep-rgb),.35);
  --glass-bg:rgba(var(--white-rgb),.16); --glass-line:rgba(var(--white-rgb),.3); --glass-track:rgba(var(--white-rgb),.25);
  --glass-bg-lite:rgba(var(--white-rgb),.08); --glass-line-lite:rgba(var(--white-rgb),.22);
  --on-dark-ic:rgba(var(--white-rgb),.75); --on-dark-2:rgba(var(--white-rgb),.82); --on-dark-3:rgba(var(--white-rgb),.86);
  --scrim:linear-gradient(rgba(var(--night-rgb),.4),rgba(var(--night-rgb),.4)); --est-scrim:var(--scrim);
  --ctl-line:#8c8579; --alert:#9a3412; --book-scrim:rgba(var(--night-rgb),.48);
  --g-cta-glow:radial-gradient(ellipse 60% 90% at 50% 125%,rgba(var(--green-soft-rgb),.55),rgba(var(--green-soft-rgb),0) 70%),radial-gradient(ellipse 40% 70% at 22% 130%,rgba(var(--gold-soft-rgb),.45),rgba(var(--gold-soft-rgb),0) 70%);
  /* shadows, hairlines, blur */
  --hdr-shadow:0 0 0 1px rgba(var(--ink-rgb),.06),0 12px 32px rgba(var(--ink-rgb),.08);
  --hdr-shadow-sm:0 1px 0 rgba(var(--ink-rgb),.07),0 10px 28px rgba(var(--ink-rgb),.07);
  --panel-shadow:0 0 0 1px rgba(var(--ink-rgb),.06),0 24px 64px rgba(var(--ink-rgb),.14);
  --lift-shadow:0 24px 60px rgba(27,58,16,.22);
  --hairline-in:inset 0 0 0 1px var(--line-2); --hairline-in-2:inset 0 0 0 1px var(--line); --outline-ink:inset 0 0 0 1px var(--ink);
  --blur-hdr:blur(14px) saturate(1.2); --blur-glass:blur(12px); --blur-form:blur(14px);
  /* corners (with --r-s, --r-m, --r-l, --r-xl above) */
  --r-3xs:4px; --r-2xs:3px; --r-tag:5px; --r-xs:6px; --r-logo:7px; --r-btn:10px; --r-tile:14px; --r-card:18px; --r-panel:20px; --r-big:22px;
  --r-pill:999px; --r-round:50%; --r-sheet-end:64px; --r-sheet-end-sm:32px;
  /* type: sizes */
  --fs-h0:clamp(44px,5.4vw,72px); --fs-mega:clamp(88px,11vw,168px); --fs-h0-sm:clamp(32px,calc((100vw - 64px) / 7.9),44px);
  --fs-h1:clamp(34px,4.2vw,56px); --fs-h2:clamp(30px,3.2vw,40px); --fs-h3:clamp(24px,2.4vw,30px); --fs-h3-max:30px;
  --fs-h4:24px; --fs-h5:20px; --fs-h6:18px; --fs-lead:20px; --fs-hero-sub:clamp(17px,1.4vw,20px);
  --fs-body:17px; --fs-row:16px; --fs-ui:15px; --fs-small:14px; --fs-row-sm:13.5px; --fs-cap:13px; --fs-meta:12.5px; --fs-eyebrow:12px;
  --fs-tag:11.5px; --fs-chip:11px; --fs-chip-s:10.5px; --fs-mini:10px;
  --fs-title:18px; --fs-card-title:19px; --fs-panel:22px; --fs-panel-lg:28px; --fs-panel-sm:20px;
  --fs-stat:38px; --fs-stat-sm:30px; --fs-stat-lg:44px;
  /* type: line heights, letter spacing, weights */
  --lh-h0:1.02; --lh-h1:1.06; --lh-h2:1.12; --lh-h3:1.18; --lh-h4:1.22; --lh-h5:1.3; --lh-h6:1.35;
  --lh-body:1.6; --lh-s:1.55; --lh-list:1.5; --lh-note:1.45; --lh-fn:1.35; --lh-ui:1.3; --lh-row:1.25; --lh-tight:1.2; --lh-stat:1.1;
  --ls-h0:-.018em; --ls-h1:-.015em; --ls-h2:-.01em; --ls-h3:-.015em; --ls-tight:-.01em; --ls-stat:-.02em; --ls-display:-.03em;
  --ls-eyebrow:.14em; --ls-chip:.06em; --ls-tag:.08em;
  --fw-light:300; --fw-regular:400; --fw-medium:500; --fw-semi:600;
  /* motion: durations and curves (with --io, --out, --std, --fm above) */
  --t-fast:.2s; --t-hover:.25s; --t-move:.3s; --t-draw:.35s; --t-reveal:.4s; --t-open:.45s; --t-enter:.5s; --t-enter-2:.6s; --t-brand:.75s;
  --stagger:.03s; --stagger-row:.04s;
  --ease-brand:ease; --soft:cubic-bezier(.45,0,.25,1); --pop:cubic-bezier(.2,.9,.3,1.15); --pop-2:cubic-bezier(.2,.9,.3,1.25); --decel:cubic-bezier(0,0,.58,1);
  /* layers */
  --z-skip:100; --z-toast:80; --z-proto:70; --z-sheet:60; --z-hdr:50; --z-page:3;
  /* sizes and rhythm */
  --tap:44px; --ctl-h:48px; --ctl-h-lg:56px; --ctl-h-sm:40px;
  --chip-h:22px; --chip-h-s:18px; --ph-chip-h:24px; --tag-h:20px; --logo-h:26px; --ck-size:22px; --social-size:36px; --row-h:50px;
  --card-pad:24px 26px; --card-pad-sm:20px; --tile-pad:14px 16px 16px; --grid-gap:16px; --grid-gap-sm:12px;
  --stack-gap:88px; --stack-gap-sm:64px; --head-gap:32px; --head-gap-sm:24px;
  --panel-max:1320px; --sheet-col:760px;
  --foot-pad:84px 0 32px; --cta-pad:120px 24px 150px; --cta-pad-sm:72px 20px 96px;
  --phead-pad:calc(var(--nav-h) + 80px) 0 80px; --phead-pad-md:calc(var(--nav-h) + 56px) 0 64px; --phead-pad-sm:calc(var(--nav-h) + 40px) 0 48px;
  --nav-o:.92; --ic-o:.8; --press-o:.7; --grain-o:.07; --grain-o-dark:.12; --press-scale:.98; --press-scale-icon:.92;
  /* components: text links (the footer's hover), arrows, underlines, focus rings, chevrons, lifts */
  --link-line-color:var(--gold); --link-line-w:1px; --link-line-offset:3px; --link-line-offset-touch:8px;
  --link-line-dur:var(--t-draw); --link-line-ease:var(--out);
  --link-shift:3px; --link-shift-dur:var(--t-move); --link-dim:.42; --link-dim-legal:.45;
  --link-hover-color:var(--ink); --link-color-dur:var(--t-hover);
  --arrow-shift:3px; --arrow-in:-6px;
  --ul-offset:2px; --ul-offset-l:3px; --ul-w:1px;
  --focus-w:2px; --focus-color:var(--green-deep); --focus-offset:3px; --focus-offset-tight:2px; --focus-radius:6px; --focus-on-dark:var(--white);
  --focus-halo:0 0 0 7px rgba(18,24,20,.55);
  --chev-turn:rotate(180deg); --lift:-2px; --brand-scale:1.03;
}
/* screen-size overrides: the only tokens that change with the window */
@media (max-width:1023px){:root{--sec-y:72px}}
@media (max-width:767px){:root{--sec-y:56px;--pad-x:20px;--bar-h:40px;--nav-h:64px}}
@media (max-width:543px){:root{--bar-h:58px}}
/* ---------- fonts ---------- */
@font-face{font-family:"Haffer";src:url("../fonts/haffer-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Haffer";src:url("../fonts/haffer-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Haffer";src:url("../fonts/haffer-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Haffer";src:url("../fonts/haffer-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-regular);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset);border-radius:var(--focus-radius)}
.ic{flex:none}
.wm{--h:30px;height:var(--h);width:calc(var(--h) * 3.0766);color:currentColor;overflow:visible}
.mg{width:100%;height:100%;color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:8px;z-index:var(--z-skip);background:var(--ink);color:var(--cream);padding:8px 14px;border-radius:var(--r-s);transform:translateY(-140%);transition:transform var(--t-fast) var(--std)}
.skip:focus{transform:none}

h1,h2,h3,h4,h5,h6{font-family:var(--hf);font-weight:var(--hfw);margin:0;color:var(--ink);text-wrap:balance;font-optical-sizing:auto}
h1 strong,h2 strong,h3 strong,h4 strong{font-weight:var(--hs)}

.h3,.h4{letter-spacing:var(--ls-h3)}
.h0{line-height:var(--lh-h0);letter-spacing:var(--ls-h0)}
.h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1)}
.h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2)}
.h3{font-size:var(--fs-h3);line-height:var(--lh-h3)}
.h4{font-size:var(--fs-h4);line-height:var(--lh-h4)}
.h5{font-size:var(--fs-h5);line-height:var(--lh-h5)}
.h6{font-size:var(--fs-h6);line-height:var(--lh-h6)}
.lead{font-size:var(--fs-lead);line-height:var(--lh-s);color:var(--ink-2)}
.body-m{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2)}
.body-s{font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--muted)}
.eyebrow{font-family:var(--sans);font-weight:var(--fw-semi);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ctl-h);padding:0 22px;border-radius:var(--r-btn);font-family:var(--sans);font-weight:var(--fw-medium);font-size:var(--fs-row);line-height:1;white-space:nowrap}
.btn-primary{background:var(--green-deep)}
.btn-primary:hover{background:var(--green-hover)}
.btn-outline{box-shadow:var(--outline-ink);color:var(--ink)}
.btn-outline:hover{background:var(--wash-ink)}
.btn-lg{height:var(--ctl-h-lg);padding:0 30px;font-size:var(--fs-body)}
.btn-sm{height:var(--ctl-h-sm);padding:0 16px;font-size:var(--fs-ui)}
.pill{display:inline-flex;align-items:center;gap:8px;height:var(--ctl-h-sm);padding:0 16px;border-radius:var(--r-btn);box-shadow:inset 0 0 0 1px var(--pill-line);font-weight:var(--fw-medium);font-size:var(--fs-ui);transition:background-color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std)}
.pill:hover{background:var(--pill-hover-bg);box-shadow:var(--outline-ink)}
.chip{display:inline-flex;align-items:center;gap:6px;height:var(--chip-h);padding:0 8px;border-radius:var(--r-xs);font-size:var(--fs-chip);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;background:var(--gold-soft);color:var(--ink)}
.chip.green{background:var(--green-soft)}
.chip.line{background:transparent;box-shadow:inset 0 0 0 1px var(--chip-line)}
/* ---------- containers ---------- */
.page{padding-inline:var(--gutter)}
.wrap{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}
.sec{padding-block:var(--sec-y)}
.sec-head{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:var(--sheet-col);margin-inline:auto}
.sec-head .body-m{max-width:60ch}
/* ---------- announcement + header ----------
   Majeste layout (links left, wordmark centered, actions right) with Sierra's styling.
   The header sits inside the hero frame at rest, then docks as a white bar inset by the gutter. */
.announce{display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--bar-h);padding:8px 16px;background:var(--green-deep);font-size:var(--fs-ui);line-height:var(--lh-ui);text-align:center}
.announce a{text-decoration:underline;text-underline-offset:var(--ul-offset-l);text-decoration-thickness:var(--ul-w);transition:text-decoration-thickness var(--t-hover) var(--std)}
.announce a:hover{text-decoration-thickness:2px}
.announce .ic{flex:none}
.hdr{position:sticky;top:var(--gutter);z-index:var(--z-hdr);height:var(--nav-h);margin-bottom:calc(var(--nav-h) * -1);border-radius:var(--r-m);color:var(--ink);transition:transform var(--t-draw) var(--std),background-color var(--t-draw) var(--std),box-shadow var(--t-draw) var(--std),color var(--t-draw) var(--std)}
.hdr.solid{background:var(--hdr-solid-bg);-webkit-backdrop-filter:var(--blur-hdr);backdrop-filter:var(--blur-hdr);box-shadow:var(--hdr-shadow)}
.hdr.hide{transform:translateY(calc(-100% - var(--gutter) - 6px))}
.nav{height:100%;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px;padding-inline:20px}
.nav-left{display:flex;align-items:center;gap:2px;justify-self:start;min-width:0}
.brand{display:inline-flex;align-items:center;justify-self:center;transition:transform var(--t-brand) var(--ease-brand)}
.brand:hover{transform:scale(var(--brand-scale))}
.brand .wm{--h:34px}
.nav-right{display:flex;align-items:center;gap:6px;justify-self:end}
.nav-link{display:inline-flex;align-items:center;gap:6px;height:var(--ctl-h-sm);padding:0 15px;border-radius:var(--r-pill);font-size:var(--fs-ui);font-weight:var(--fw-regular);color:inherit;opacity:var(--nav-o);white-space:nowrap;transition:background-color var(--t-hover) var(--std),color var(--t-hover) var(--std),opacity var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std)}
.nav-link .ic{transition:transform var(--t-fast) var(--std);opacity:var(--ic-o)}
.nav-link:hover,.nav-link[aria-expanded="true"]{opacity:1}
.nav-link[aria-expanded="true"] .ic{transform:var(--chev-turn)}
.nav-phone{display:inline-flex;align-items:center;gap:8px;height:var(--ctl-h-sm);padding:0 12px;border-radius:var(--r-pill);font-size:var(--fs-ui);opacity:var(--nav-o);font-variant-numeric:tabular-nums;transition:background-color var(--t-hover) var(--std),color var(--t-hover) var(--std),opacity var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std)}
.nav-phone:hover{color:var(--green-deep);opacity:1}
.menu-btn{display:none;width:var(--tap);height:var(--tap);align-items:center;justify-content:center}
/* mega menus: one shared position, centered under the header, like Sierra */
.mega{position:absolute;top:calc(100% + 8px);left:0;right:0;width:auto;transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;background:var(--white);color:var(--ink);border-radius:var(--r-panel);box-shadow:var(--panel-shadow);transition:opacity var(--t-fast) var(--fm),transform var(--t-fast) var(--fm),visibility 0s linear var(--t-fast)}
.mega::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}
.mega.open{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity var(--t-fast) var(--fm),transform var(--t-fast) var(--fm),visibility 0s}
.mega-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding-bottom:22px;border-bottom:1px solid var(--line-2)}
.mega-head .mt{font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-panel);line-height:var(--lh-tight)}
.mega-head p{margin:6px 0 0;font-size:var(--fs-ui);color:var(--muted)}
.mega-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:4px}
.mega-col .mega-gl{font-family:var(--sans);font-weight:var(--fw-regular);font-size:var(--fs-small);letter-spacing:0;text-transform:none;color:var(--muted);margin:0 0 4px 12px}
.mega-link{display:block}

.mega-link b{align-items:center;gap:8px;font-weight:var(--fw-regular);font-size:var(--fs-row);color:var(--ink)}
.mega-link>span{display:block;font-size:var(--fs-small);line-height:var(--lh-note);color:var(--muted);margin-top:3px;transition:color var(--t-fast) var(--std)}
.mega-link .chip{height:var(--chip-h-s);font-size:var(--fs-mini);padding:0 6px;color:var(--ink)}
/* mobile menu sheet */
.msheet{position:fixed;inset:0;z-index:var(--z-sheet);background:var(--white);color:var(--ink);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity var(--t-move) var(--std),visibility 0s linear var(--t-move)}
.msheet.open{opacity:1;visibility:visible;transition:opacity var(--t-move) var(--std),visibility 0s}
.msheet-top{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:var(--nav-h);margin:var(--sheet-top,var(--gutter)) var(--gutter) 0;padding:0 20px}
.msheet-top .brand{grid-column:1;justify-self:start}
.msheet-top #menuClose{grid-column:3;justify-self:end}
.msheet-body{flex:1;overflow:auto;padding:12px calc(var(--pad-x) + var(--gutter) - 8px) 24px}
.macc{border-bottom:1px solid var(--line-2)}
.macc>button,.macc>a{width:100%;display:flex;align-items:center;justify-content:space-between;padding:18px 8px;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-panel)}

.macc.open>button .ic{transform:var(--chev-turn)}
.msheet-foot{padding:16px calc(var(--pad-x) + var(--gutter));display:grid;gap:10px;border-top:1px solid var(--line-2)}
.msheet-foot .btn{width:100%}
.page{padding-top:var(--gutter)}
.grain::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:var(--grain-o);mix-blend-mode:multiply;pointer-events:none}
/* ---------- sheet: the white page that lifts off the cream ---------- */
.sheet{position:relative;z-index:var(--z-page);background:var(--white);border-radius:var(--r-m) var(--r-m) var(--r-sheet-end) var(--r-sheet-end);box-shadow:var(--sheet-shadow)}
.sheet-end{height:80px}
.sec-head .h2{max-width:22ch}
.ph-chip{display:inline-flex;align-items:center;gap:6px;height:var(--ph-chip-h);padding:0 10px;border-radius:var(--r-pill);background:var(--gold-soft);color:var(--ink);font-size:var(--fs-chip);font-weight:var(--fw-semi);letter-spacing:var(--ls-tag);text-transform:uppercase}
/* deep gradients from the family, dark enough for white type */

.db-tile,.db-card{min-width:0;background:var(--white);border-radius:var(--r-tile);box-shadow:var(--hairline-in)}
.db-tile{display:flex;flex-direction:column;gap:4px;padding:var(--tile-pad)}
.db-tl{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:26px;font-size:var(--fs-cap);color:var(--muted)}
.db-big{margin-top:4px;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-stat);line-height:var(--lh-stat);letter-spacing:var(--ls-stat);font-variant-numeric:tabular-nums;color:var(--ink)}
.db-big small{font-family:var(--sans);font-weight:var(--fw-regular);font-size:var(--fs-small);letter-spacing:0;color:var(--muted);white-space:nowrap}
.db-tile.g .db-big{font-weight:var(--hs);color:var(--green-deep)}
.db-sub{font-size:var(--fs-meta);color:var(--muted)}
.db-chip{display:inline-flex;align-items:center;flex:none;height:var(--tag-h);padding:0 7px;border-radius:var(--r-tag);background:var(--gold-soft);color:var(--ink);font-size:var(--fs-chip-s);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;white-space:nowrap}
.db-good{display:inline-flex;align-items:center;gap:4px;flex:none;height:var(--chip-h);padding:0 8px;border-radius:var(--r-pill);background:var(--green-wash);color:var(--green-deep);font-size:var(--fs-tag);font-weight:var(--fw-semi);white-space:nowrap;transition:opacity var(--t-reveal) var(--out) 1.1s,filter var(--t-reveal) var(--out) 1.1s,transform var(--t-reveal) var(--out) 1.1s}
.db-lg{flex:none;display:inline-flex;align-items:center;justify-content:center;height:var(--logo-h);min-width:var(--logo-h);padding:0 6px;border-radius:var(--r-logo);background:var(--white);box-shadow:var(--hairline-in)}
.db-lg img{height:12px;width:auto;max-width:54px;object-fit:contain}
.db-lg.sq{padding:0 4px}
.db-lg.sq img{height:16px}
.db-lg.tr img{height:16px;max-width:56px}
.db-list .db-lg{width:64px}
.db-card{padding:16px 18px}
.db-h{display:flex;align-items:center;gap:10px;min-height:28px}
.db-meta{font-size:var(--fs-meta);color:var(--muted);white-space:nowrap}
.db-list{list-style:none;margin:6px 0 0;padding:0}
.db-list li{display:flex;align-items:center;gap:12px;min-height:var(--row-h);padding:8px 0;border-top:1px solid var(--line-2)}
.db-list li:first-child{border-top:0}
.db-tx{flex:1;min-width:0}
.db-ck{flex:none;width:var(--ck-size);height:var(--ck-size);border-radius:var(--r-round);background:var(--green-wash);color:var(--green-deep);display:inline-flex;align-items:center;justify-content:center}
.db-note{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line-2);font-size:var(--fs-meta);color:var(--muted)}
.db-note svg{flex:none;color:var(--green-deep)}
.db-fn{margin:auto 0 0;font-size:var(--fs-eyebrow);line-height:var(--lh-note);color:var(--muted)}
.db-fn a{color:var(--green-deep);text-decoration:underline;text-decoration-color:var(--ul-soft);text-underline-offset:var(--ul-offset);transition:text-decoration-color var(--t-hover) var(--std)}
.db-fn a:hover{text-decoration-color:var(--green-deep)}
@media (max-width:767px){.db-tile{padding:12px 12px 14px}.db-tl{flex-direction:column-reverse;align-items:flex-start;gap:8px}.db-big{font-size:var(--fs-stat-sm)}.db-big small{display:block;margin-top:2px;font-size:var(--fs-cap)}.db-card{padding:14px}.db-list li{gap:10px;font-size:var(--fs-row-sm)}.db-list .db-lg{width:54px;padding:0 5px}.db-list .db-lg img{max-width:44px}}
.g-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap}
.g-row .h3{font-size:var(--fs-h3-max)}
.g-row a{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-medium);color:var(--green-deep)}
.end-copy{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.end-copy .body-m{max-width:42ch;margin:0}
.social{display:inline-flex;width:var(--social-size);height:var(--social-size);border-radius:var(--r-btn);align-items:center;justify-content:center;box-shadow:var(--hairline-in-2);color:var(--ink)}
.foot{position:relative}
.sec-head{gap:20px}
.cta-b{padding:var(--cta-pad);background:var(--g-cta-glow);border-radius:0 0 var(--r-sheet-end) var(--r-sheet-end)}
.cta-b .end-copy{gap:22px}
/* footer: the original structure, revealed as the page lifts away */
main{position:relative;z-index:1}
main::before{content:"";position:absolute;inset:0 0 64px 0;background:var(--cream);z-index:-1;pointer-events:none}
.foot{z-index:0;padding:var(--foot-pad)}
.foot.reveal{position:fixed;left:var(--gutter);right:var(--gutter);bottom:0}
.foot-space{height:var(--fh,0px)}
.foot-in{max-width:var(--container);margin-inline:auto;padding-inline:var(--pad-x)}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px}
.foot-brand .wm{--h:42px}
.foot-brand p{margin:18px 0 0;font-size:var(--fs-row);color:var(--ink-2)}
.foot-brand p span{display:inline-block}
.foot-contact{margin-top:18px}
/* link columns as wide as their words; on wide screens the brand block takes the rest of the row. Below about 960px the longest column narrows and wraps its links, so the three stay in one row */
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:space-between;gap:24px}
.foot-cols h2{font-family:var(--sans);font-weight:var(--fw-medium);font-size:var(--fs-small);color:var(--ink);margin:0 0 12px}
.foot-cols a,.foot-contact a{display:block;font-size:var(--fs-ui);color:var(--muted);padding:5px 0;text-wrap:balance}

.foot-bot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:64px;padding-top:22px;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--muted)}
.foot-bot nav,.foot-end{display:flex;align-items:center;gap:18px;flex-wrap:wrap}

/* below 1180 the brand block sits on top as one row, contact links at the right end; when the row is full they drop under it, on the left */
@media (max-width:1179px){.foot-top{grid-template-columns:1fr}.foot-brand{display:flex;align-items:center;flex-wrap:wrap;gap:12px 28px}.foot-brand p,.foot-contact{margin:0}.foot-brand p{flex:1 1 auto}.foot-contact{display:flex;gap:24px}}
/* phones: two across, Who it's for first */
@media (max-width:767px){.foot-cols{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}}
/* tablets: three across with tighter spacing, so the footer is about 500 to 640px tall and lifts away on a normal window (1024x600 included).
   Wide screens keep the roomier spacing at 477px, so a window under about 560px tall shows the footer in the page instead */
@media (min-width:768px) and (max-width:1179px){.foot{padding-top:56px}.foot-top{gap:32px}.foot-bot{margin-top:40px}}
@media (max-width:767px){.foot-brand{display:block}.foot-brand p{margin-top:18px}.foot-contact{display:block;margin-top:14px}}
/* footer: the hovered link lights up, its neighbours step back */

.foot .social{transition:background-color var(--t-hover) var(--std),color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std)}
.foot .social:hover{background:var(--green-deep);box-shadow:none}
.foot-brand .wm{transition:transform var(--t-brand) var(--ease-brand)}
.foot-brand a:hover .wm{transform:scale(var(--brand-scale))}
@media (hover:none){}
/* ---------- v5b ---------- */
/* white text on Green Deep everywhere */

.btn-primary,.announce,.foot .social:hover,.menu-btn{color:var(--on-green)}
.announce .ic{color:var(--on-dark-ic)}
/* nav: easier-to-see hovers */
.nav-link:hover,.nav-link[aria-expanded="true"]{background:var(--hover-fill);color:var(--green-deep)}
.nav-phone:hover{background:var(--hover-fill)}
/* mega menus: content spreads across the panel, with a visual on the right */
.mega{display:grid;grid-template-columns:minmax(0,1fr) 340px;column-gap:44px;align-items:start;padding:30px max(40px,calc((100% - var(--panel-max)) / 2)) 30px}
.mega>.mega-head{grid-column:1}
.mega>.mega-grid{grid-column:1}
.mega>.mega-vis{grid-column:2;grid-row:1/span 2;align-self:stretch}
.mega-head{margin-bottom:14px}
.mega-link{position:relative;padding:12px 14px;border-radius:var(--r-m);transition:background-color var(--t-fast) var(--std),box-shadow var(--t-fast) var(--std)}
.mega-link:hover,.mega-link:focus-visible{background:var(--cream);box-shadow:inset 0 0 0 1px var(--row-hover-line)}
.mega-link b{transition:color var(--t-fast) var(--std)}

.lk-row:is(:hover,:focus-visible)>span{color:var(--ink-2)}
.mega-vis{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:250px;border-radius:var(--r-card);overflow:hidden;padding:20px;color:var(--white);isolation:isolate;transition:transform var(--t-reveal) var(--out)}
.mega-vis:hover{transform:translateY(var(--lift))}
.mega-vis::after{content:"";position:absolute;inset:0;background-image:var(--grain);opacity:var(--grain-o-dark);mix-blend-mode:overlay;pointer-events:none}
.mega-vis>*{position:relative;z-index:1}
.mega-vis .cap{font-size:var(--fs-cap);color:var(--on-dark-2)}
.mega-vis b{font-weight:var(--fw-regular);font-size:var(--fs-card-title);line-height:var(--lh-ui);letter-spacing:var(--ls-tight)}
.mega-vis .go{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-small);font-weight:var(--fw-medium);margin-top:4px}
.mega-vis .glassy{position:relative;margin-bottom:auto;padding:12px 14px;border-radius:var(--r-tile);background:var(--glass-bg);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);box-shadow:inset 0 0 0 1px var(--glass-line);display:grid;gap:8px;font-size:var(--fs-meta)}
.mega-vis .glassy .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.mega-vis .glassy .lg2{background:var(--white);border-radius:var(--r-logo);padding:3px 7px;display:inline-flex}
.mega-vis .glassy .lg2 img{height:13px;width:auto}
.mega-vis .glassy .pb{height:6px;border-radius:var(--r-2xs);background:var(--glass-track);overflow:hidden}
.mega-vis .glassy .pb i{display:block;height:100%;width:100%;background:var(--white);border-radius:var(--r-2xs)}
@media (max-width:767px){.mega{grid-template-columns:1fr}}
.toast{position:fixed;left:50%;bottom:calc(72px + env(safe-area-inset-bottom,0px));z-index:var(--z-toast);transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--ink);color:var(--cream);padding:12px 18px;border-radius:var(--r-m);font-size:var(--fs-ui);transition:opacity var(--t-move) var(--std),transform var(--t-move) var(--std);max-width:calc(100vw - 32px);text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
/* ---------- responsive ---------- */
@media (max-width:1240px){.nav-left,.nav-phone,.nav-right .btn{display:none}.mega{display:none}.menu-btn{display:inline-flex}}

@media (max-width:767px){.announce{font-size:var(--fs-small)}.brand .wm{--h:30px}.sheet{border-radius:var(--r-m) var(--r-m) var(--r-sheet-end-sm) var(--r-sheet-end-sm)}}
@media (prefers-reduced-motion:reduce){.hdr,.mega,.btn{transition:none!important}.hdr.hide{transform:none}}
/* ---------- breakpoint audit fixes (2026-10-14) ---------- */
/* header: hiding the left links must not shift the wordmark or the menu button */
.nav>.brand{grid-column:2}
.nav>.nav-right{grid-column:3}
.brand{min-height:var(--tap)}
/* mega menus: titles keep one line, the arrow takes no room, the divider gap is the same in every panel */
.mega{grid-template-rows:auto 1fr}
.mega-link b{display:block}
.mega-link b .chip{display:inline-flex;margin:0 0 0 6px;vertical-align:2px}

@media (max-width:1365px){.mega{grid-template-columns:minmax(0,1fr) 280px;column-gap:28px;padding-inline:28px}.mega-link{padding:12px 10px}}
/* menu sheet: its top bar sits exactly where the header was */
.msheet{padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px)}
.msheet .mega-link{padding-inline:8px}
.macc-group{grid-column:1/-1;font-size:var(--fs-small);color:var(--muted);margin:14px 0 2px 8px}
.macc-group:first-child{margin-top:2px}
.macc-more{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:var(--tap);margin:6px 0 0 8px;font-weight:var(--fw-medium);color:var(--green-deep)}
.msheet-foot{padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
/* tablets: a centered column, larger rows, links in two columns, buttons side by side */
@media (min-width:768px){.msheet-body{padding:16px max(calc(var(--gutter) + 20px),calc((100% - var(--sheet-col)) / 2)) 32px}.macc>button,.macc>a{font-size:var(--fs-panel-lg);padding:24px 0}.macc>button .ic,.macc>a .ic{width:22px;height:22px}.macc-panel .mega-link{margin-inline:-8px}.macc-group,.macc-more{margin-left:0}.msheet-foot{grid-template-columns:1fr 1fr;padding:20px max(calc(var(--gutter) + 20px),calc((100% - var(--sheet-col)) / 2)) calc(20px + env(safe-area-inset-bottom,0px))}}
/* short screens (landscape phones): a slimmer top bar and tighter rows; an open list scrolls inside the sheet */
@media (max-height:520px){.msheet-top{height:56px}.msheet-foot{grid-template-columns:1fr 1fr;padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}.msheet-foot .btn{height:var(--tap)}.macc>button,.macc>a{padding-block:12px;font-size:var(--fs-panel-sm)}}
/* announcement bar on phones: the bell sits with the words, and the bar is as tall as its text */
@media (max-width:767px){.announce{display:block;min-height:0;padding:11px 16px}.announce .ic{display:inline-block;vertical-align:-3px;margin-right:6px}}

/* closing call to action: every Book link lands on its heading */
.cta-b{scroll-margin-top:calc(24px - var(--sp))}
/* phones: section spacing on the phone scale */
@media (max-width:767px){.sheet-end{height:48px}.cta-b{padding:var(--cta-pad-sm)}}
/* touch: tap targets of about 44px */
@media (pointer:coarse),(max-width:767px){.announce a{display:inline-block;padding:10px 2px;margin:-10px 0}.g-row a{min-height:var(--tap)}.foot-bot nav a,.foot-end>a:not(.social){display:inline-flex;align-items:center;min-height:var(--tap)}.foot-cols a,.foot-contact a{padding:10px 0}.foot .social{width:var(--tap);height:var(--tap)}}
/* ---------- phone and tablet nav, menu motion, full-width buttons (2026-10-14) ---------- */
/* hamburger widths: wordmark on the left, menu button on the right */
@media (max-width:1240px){.nav>.brand{grid-column:1;justify-self:start}.nav{padding-inline:36px}.msheet-top{padding:0 36px}}
@media (max-width:1023px){.nav{padding-inline:28px}.msheet-top{padding:0 28px}}
/* phones: the bar runs the full width of the screen; content lines up with the hero text */
@media (max-width:767px){.hdr{top:0;margin-inline:calc(var(--gutter) * -1);border-radius:0}.hdr.solid{box-shadow:var(--hdr-shadow-sm)}.nav{padding-inline:calc(var(--gutter) + 20px)}.msheet-top{padding:0 20px}}
/* menu button: no fill by default, two lines that cross into an X as the sheet opens */
.menu-btn{background:transparent;color:inherit;border-radius:var(--r-m);transition:background-color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std),scale var(--t-fast) var(--out)}
.menu-btn:active{scale:var(--press-scale-icon)}
@media (hover:hover){.menu-btn:hover{background:var(--hover-fill-soft)}.msheet .menu-btn:hover{background:var(--paper)}.hdr .menu-btn:hover .burger i:last-child{width:62%;left:38%}}
.burger{position:relative;display:block;width:22px;height:11px}
.burger i{position:absolute;left:0;top:0;width:100%;height:1.5px;border-radius:2px;background:currentColor}
.burger i:last-child{top:9.5px}
.hdr .burger i{transition:width var(--t-move) var(--out),left var(--t-move) var(--out)}
.msheet .burger i{transition:top .22s var(--out) .14s,transform var(--t-move) var(--out)}
.msheet.open .burger i{transition:top .22s var(--out),transform .34s var(--out) .16s}
.msheet.open .burger i:first-child{top:4.75px;transform:rotate(45deg)}
.msheet.open .burger i:last-child{top:4.75px;transform:rotate(-45deg)}
/* menu sheet: rows rise in one after another; closing fades them out together */
.msheet .macc,.msheet-foot{opacity:0;transform:translateY(16px);transition:opacity var(--t-fast) var(--std),transform var(--t-move) var(--std)}
.msheet.open .macc,.msheet.open .msheet-foot{opacity:1;transform:none;transition:opacity var(--t-enter) var(--out),transform var(--t-enter-2) var(--out)}
.msheet.open .macc{transition-delay:calc(.05s + var(--n,0) * var(--stagger-row))}
.msheet.open .msheet-foot{transition-delay:.26s}
/* accordions open and close smoothly; their links fade in a step apart */
.macc>button,.macc>a{transition:color var(--t-hover) var(--std),opacity var(--t-fast) var(--std)}
.macc>button .ic,.macc>a .ic{transition:transform var(--t-draw) var(--out)}
.macc>button:active,.macc>a:active{opacity:var(--press-o)}
@media (hover:hover){.macc>button:hover,.macc>a:hover{color:var(--green-deep)}.macc:not(.open)>button:hover .ic{transform:translateY(2px)}.macc>a:hover .ic{transform:translateX(var(--arrow-shift))}}
.macc-panel{display:grid;grid-template-rows:0fr;padding:0;transition:grid-template-rows var(--t-open) var(--out)}
.macc.open .macc-panel{display:grid;grid-template-rows:1fr}
.macc-in{min-height:0;overflow:hidden;margin-inline:-8px;padding-inline:8px;visibility:hidden;transition:visibility 0s linear var(--t-open)}
/* an open list follows the sheet: when the sheet fades out, its links go with it */
.macc.open .macc-in{visibility:inherit;transition-delay:0s}
.macc-list{padding:0 0 14px}
.macc-list>*{opacity:0;transform:translateY(-6px);transition:opacity var(--t-fast) var(--std),transform var(--t-hover) var(--std),background-color var(--t-fast) var(--std)}
.macc.open .macc-list>*{opacity:1;transform:none;transition:opacity var(--t-reveal) var(--out) calc(.06s + var(--i,0) * var(--stagger)),transform var(--t-open) var(--out) calc(.06s + var(--i,0) * var(--stagger)),background-color var(--t-fast) var(--std)}
.msheet .mega-link:active{background:var(--cream)}
@media (min-width:768px){.macc-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 24px;padding:0 0 24px}}
/* buttons: a light press on every screen; full width on phones */
.btn{transition:background-color var(--t-hover) var(--std),color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std),padding .9s var(--fm),scale var(--t-fast) var(--out)}
.btn:active{scale:var(--press-scale)}
@media (max-width:767px){.btn{width:100%}}
/* .h0 on phones: the headline fills its first line (up to 44px) */
.h0{font-size:var(--fs-h0)}
@media (max-width:767px){.h0{font-size:var(--fs-h0-sm)}}
@media (prefers-reduced-motion:reduce){.burger i,.msheet .macc,.msheet-foot,.macc-panel,.macc-list>*,.macc>button .ic,.macc>a .ic,.menu-btn,.btn{transition:none!important}.macc>a:hover .ic,.macc:not(.open)>button:hover .ic{transform:none}}
.hero-sub{max-width:31em;margin:0 0 30px;font-size:var(--fs-hero-sub);line-height:var(--lh-note);color:var(--ink-2);text-wrap:pretty}
@media (max-width:767px){.hero-sub{font-size:var(--fs-body);margin-bottom:24px}}
/* ---------- desktop dropdowns: spacing (2026-10-14) ----------
   Link text lines up with the title and the divider; the picture card follows the height of the links. */
@media (min-width:1241px){.mega{grid-template-columns:minmax(0,1fr) 320px;column-gap:40px;padding-top:32px;padding-bottom:28px}.mega-head{align-items:center;padding-bottom:26px;margin-bottom:14px}.mega>.mega-grid{margin-inline:-14px;align-content:start}.mega-col .mega-gl{margin:0 0 2px 14px}.mega>.mega-vis{min-height:0;padding:16px 18px 14px;gap:6px}.mega-vis b{font-size:var(--fs-title);line-height:var(--lh-row)}.mega-vis .go{margin-top:2px}}
@media (min-width:1241px) and (max-width:1365px){.mega{column-gap:28px}.mega>.mega-grid{margin-inline:-10px}.mega-col .mega-gl{margin-left:10px}}
/* notch and home bar: content stays inside the safe area */
.page{padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.announce{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
/* ---------- nav simplification (2026-10-18, revision 3) ----------
   Revision 4 (2026-10-18): Who it's for and What we do are dropdowns, then Insights as a plain link. The footer columns repeat the same sections in the same order. The sheet is built from the header, so it follows. */
/* plain links share the trigger pill; Case studies waits in the markup (header, sheet, footer) until a story is approved */
.nav-link[hidden],.macc[hidden],.foot-cols a[hidden]{display:none}
/* both panels: one group of rows in larger type with more room; What we do then has its foot line under a hairline */
.mega:is(#mm-auto,#mm-who) .mega-col .mega-link{padding-block:14px}
.mega:is(#mm-auto,#mm-who) .mega-col .mega-link b{font-size:var(--fs-title)}
.mega:is(#mm-auto,#mm-who) .mega-col .mega-link>span{font-size:var(--fs-ui)}
.mega .mega-foot{margin-top:17px}
/* the hairline runs the full text column, like the divider under the head (cqw is the grid's width, which reaches 14px past the text on each side) */
.mega>.mega-grid{container-type:inline-size}
.mega .mega-foot::before{content:"";position:absolute;left:14px;top:-9px;width:calc(100cqw - 28px);height:1px;background:var(--line-2)}
@media (max-width:1365px){.mega .mega-foot::before{left:10px;width:calc(100cqw - 20px)}}
.macc-list .mega-foot{grid-column:1/-1}
/* tablet sheet: the list's clip edge sits 6px outside its links, so the keyboard ring shows whole */
@media (min-width:768px){.macc-in{margin-inline:-14px;padding-inline:14px}}
/* status chip: set data-status to "live" and it goes */
.chip[data-status="live"]{display:none}
/* footer chip: the grid itself is in the footer rules. The chip stays on the line of its link's last word (.nw keeps "marketing" and the chip together, 2026-10-18), so a narrow column wraps the words and never leaves the chip on a line by itself */
.foot-cols .chip{height:var(--chip-h-s);padding:0 6px;font-size:var(--fs-mini);vertical-align:1px}
.foot-cols .nw{white-space:nowrap}
/* small phones (2026-10-18, nav revision 4): the What we do column takes a little more room, since its links are the longest of the two; under 375 the links step down to 14px */
@media (max-width:400px){.foot-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.17fr);column-gap:20px}}
@media (max-width:374px){.foot-cols a{font-size:var(--fs-small)}}
/* reduced motion: the arrow after a panel or sheet link title fades in where it stands */
@media (prefers-reduced-motion:reduce){.mega-link b::after{transform:none;transition:opacity var(--t-fast) var(--std)}}
/* panels: lines break evenly, no single word left on its own line */
.mega-head p,.mega-vis b{text-wrap:balance}
/* both panels: rows stop at 640px, so on wide panels the hover fill stays a calm size */
.mega:is(#mm-auto,#mm-who) :is(.mega-col,.mega-foot){max-width:640px}
/* the ring on the announcement link shows against the green bar */
.announce a:focus-visible{outline-color:var(--cream)}
/* reduced motion keeps the header in place, so a jump lands below it (the call to action keeps its own 24px, its padding clears the header) */
@media (prefers-reduced-motion:reduce){section[id]:not(.cta-b){scroll-margin-top:calc(var(--nav-h) + var(--gutter) - var(--sp))}}
/* ---------- nav revision 4 (2026-10-18): the Who it's for panel, and a footer with the nav's own sections ---------- */
/* fit card: the check rows sit in the glass panel, the title and the go-line below, like the sample-week card */
/* a lighter glass over the scrimmed meadow (as on the estimator teaser), so the white check rows clear 4.5:1 */
.mega-fit .glassy{gap:7px;background:var(--glass-bg-lite);box-shadow:inset 0 0 0 1px var(--glass-line-lite)}
.mega-vis .glassy .fit{display:flex;align-items:center;gap:8px;font-size:var(--fs-cap);line-height:var(--lh-ui)}
.mega-vis .glassy .fit svg{flex:none;width:16px;height:16px;padding:3px;border-radius:var(--r-round);background:var(--white);color:var(--green-deep)}
/* footer: three columns beside the brand on wide screens, with room between them */
@media (min-width:1180px){.foot-cols{column-gap:56px}}
/* phones: Who it's for and What we do side by side, then Insights across the full width, so each guide title keeps to one line */
@media (max-width:767px){.foot-cols>div:nth-child(3){grid-column:1/-1}}

/* ---------- subpages (2026-10-18) ---------- */
/* Rules only the subpages use. Page agents: use these classes, keep page-only bits in the page's own <style>, and ask the template owner for anything shared. */

/* header: solid from the top (site.js keeps it solid when there is no #hero); in-page targets land below it */
.sheet [id]{scroll-margin-top:calc(var(--nav-h) + var(--gutter) + 16px - var(--sp))}
.mega-link[aria-current="page"] b{color:var(--green-deep)}
.foot-cols a[aria-current="page"]{color:var(--ink)}

/* page head: a rounded cream frame with the Mesh gradient and grain. The header docks over its top, so the copy starts below the header.
   It sits inside main, before .sheet, with a gutter under it, so main::before still covers it for the footer reveal. */
.phead{position:relative;isolation:isolate;overflow:hidden;margin-bottom:var(--gutter);border-radius:var(--r-m);background:var(--g-mesh);padding:var(--phead-pad)}
.phead::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:var(--grain-o);mix-blend-mode:multiply;pointer-events:none}
.phead h1{max-width:18ch}
.phead .hero-sub{margin:22px 0 0}
.phead .chip{vertical-align:middle}
.phead-links{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:28px}
@media (max-width:1023px){.phead{padding:var(--phead-pad-md)}}
@media (max-width:767px){.phead{padding:var(--phead-pad-sm)}.phead .hero-sub{margin-top:16px}.phead-links{margin-top:20px}}

/* card grid: 2 columns by default (.c3 and .c4 for more), 2 on tablets, 1 on phones */
.cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.cgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cgrid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1023px){.cgrid.c3,.cgrid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.cgrid,.cgrid.c3,.cgrid.c4{grid-template-columns:minmax(0,1fr);gap:var(--grid-gap-sm)}}

/* light card: paper fill, a hairline edge, 18px corners (the homepage's results card) */
.pcard{min-width:0;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);padding:var(--card-pad)}
.pcard>h3,.pcard>.pcard-h{margin:0 0 6px}
.pcard-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pcard .eyebrow{margin:20px 0 4px}
.pcard .db-list li{min-height:var(--tap)}
@media (max-width:767px){.pcard{padding:var(--card-pad-sm)}}

/* card copy and the closing line wrap without a single word left on the last line */
.pcard :is(p,li,.db-tx span),.phead .hero-sub,.cta-b .body-m{text-wrap:pretty}

/* check row: the green check circle, then the text */
.ckrow{display:flex;align-items:flex-start;gap:10px}
.ckrow .db-ck{margin-top:1px}

/* text link: green, medium, with an arrow that nudges on hover */
.link{display:inline-flex;align-items:center;gap:6px;font-weight:var(--fw-medium);color:var(--green-deep)}

@media (pointer:coarse),(max-width:767px){.link{min-height:var(--tap)}}
@media (prefers-reduced-motion:reduce){.link .ic{transition:none}.link:hover .ic{transform:none}}

/* ---------- fix round 6 (2026-10-18) ---------- */
/* focus never lands under the header: Shift+Tab brings the header back, and the browser scrolls the focused item to the top edge.
   The padding clears the header; the scroll margins above subtract it again, so anchor jumps land where they did before. */

html{scroll-padding-top:var(--sp)}
/* card labels and rows wrap evenly, with no word left alone on the last line (the homepage's own rules match) */
.db-tl span,.db-sub{text-wrap:balance}
.db-tx span{text-wrap:pretty}
/* page-head links read in ink on the Mesh head (green fell under 4.5:1 on its gold part) */
.phead .phead-links .link,.phead .phead-links .link:hover{color:var(--ink)}

/* ---------- link hover: one component for every text link (2026-10-19) ----------
   Markup: <a class="lk [lk-row | lk-cta | lk-inline]"><span class="lk-t">Label</span>[<svg class="ic">]</a>
           a container whose links step back together gets .lk-group
   Layers: 1 tokens (:root) hold every value; 2 role defaults in :where() are variant a, today's look;
   the look was settled on 2026-10-19 (gold line). */
:root{
  --lk-rest:var(--muted); --lk-on:var(--ink); --lk-accent:var(--green-deep);
  --lk-line:var(--gold); --lk-hair:rgba(41,41,41,.2); --lk-wash:rgba(175,203,164,.45);
  --lk-thick:1px; --lk-offset:5px; --lk-ul-offset:3px;
  --lk-shift:3px; --lk-dim:.42; --lk-nudge:3px; --lk-arrow-gap:6px; --lk-arrow-shift:6px;
  --lk-t-line:var(--t-draw); --lk-t-out:var(--t-draw); --lk-t-color:var(--t-hover); --lk-t-shift:var(--t-move); --lk-t-arrow:var(--t-hover);
  --lk-ease:var(--out); --lk-ease-color:var(--std);
}
:where(.lk){
  --lk-len0:0%; --lk-len1:100%; --lk-from:0% 100%; --lk-to:0% 100%;
  --lk-th0:var(--lk-thick); --lk-th1:var(--lk-thick); --lk-hair-w:0px;
  --lk-ul0:transparent; --lk-ul1:transparent;
  --lk-move:var(--lk-shift); --lk-sib:var(--lk-dim); --lk-arrow:0; --lk-band:var(--lk-line); --lk-pad:0px; --lk-round:0px;
}
:where(.lk-row){--lk-len1:0%;--lk-move:0px;--lk-sib:1;--lk-arrow:1;--lk-rest:var(--ink);--lk-on:var(--green-deep);--lk-t-color:var(--t-fast)}
:where(.lk-cta){--lk-len1:0%;--lk-move:0px;--lk-sib:1;--lk-rest:var(--green-deep);--lk-on:var(--green-hover);--lk-t-color:var(--t-fast)}
:where(.lk-inline){--lk-len1:0%;--lk-move:0px;--lk-sib:1;--lk-rest:var(--green-deep);--lk-on:var(--green-deep);--lk-ul0:color-mix(in srgb,currentColor 35%,transparent);--lk-ul1:currentColor;--lk-ul-offset:2px}

/* the link: color, sibling step-back, nudge */
.lk{position:relative;color:var(--lk-rest)}
:where(.lk){transition:color var(--lk-t-color) var(--lk-ease-color),opacity var(--lk-t-color) var(--lk-ease-color),translate var(--lk-t-shift) var(--lk-ease)}
.lk:is(:hover,:focus-visible){color:var(--lk-on);translate:var(--lk-move) 0}
:root .lk:not(.lk-cta,.lk-inline)[aria-current="page"]{--lk-rest:var(--lk-on)}
.lk-group:has(.lk:focus-visible) .lk:not(:focus-visible){opacity:var(--lk-sib)}
@media (hover:hover){.lk-group:has(.lk:hover) .lk:not(:hover){opacity:var(--lk-sib)}}
.mega-link.lk b{color:inherit}

/* the label: drawn line (background layer 1), resting hairline (layer 2), typographic underline, arrow */
.lk .lk-t{color:inherit}
.lk-t{padding:0 var(--lk-pad) var(--lk-offset);margin:0 calc(var(--lk-pad) * -1) calc(var(--lk-offset) * -1);border-radius:var(--lk-round);
  background:linear-gradient(var(--lk-band),var(--lk-band)) var(--lk-from)/var(--lk-len0) var(--lk-th0) no-repeat,
             linear-gradient(var(--lk-hair),var(--lk-hair)) 0 100%/100% var(--lk-hair-w) no-repeat;
  text-decoration:underline var(--lk-thick) var(--lk-ul0);text-underline-offset:var(--lk-ul-offset);
  transition:color var(--lk-t-color) var(--lk-ease-color),background-size var(--lk-t-out) var(--lk-ease),text-decoration-color var(--lk-t-color) var(--lk-ease-color)}
:is(.lk:hover,.lk:focus-visible) .lk-t{
  background-position:var(--lk-to),0 100%;background-size:var(--lk-len1) var(--lk-th1),100% var(--lk-hair-w);text-decoration-color:var(--lk-ul1);
  transition-duration:var(--lk-t-color),var(--lk-t-line),var(--lk-t-color)}
.lk-t::after{content:"\2192";content:"\2192" / "";position:absolute;margin-left:var(--lk-arrow-gap);color:var(--lk-accent);opacity:0;translate:calc(var(--lk-arrow-shift) * -1) 0;pointer-events:none;
  transition:opacity var(--t-fast) var(--lk-ease-color),translate var(--lk-t-arrow) var(--lk-ease)}
:is(.lk:hover,.lk:focus-visible) .lk-t::after{opacity:var(--lk-arrow);translate:0 0}
.lk-t.lk::after,.macc>.lk .lk-t::after{content:none}
.lk-cta .ic{transition:translate var(--lk-t-arrow) var(--lk-ease)}
.lk-cta:is(:hover,:focus-visible) .ic{translate:var(--lk-nudge) 0}

/* surfaces and places: colors per surface; the :where() lines are variant a tweaks the picker overrides */
:where(.foot-bot) .lk{--lk-len1:0%;--lk-move:0px;--lk-dim:.45}
.phead .phead-links .lk-cta{--lk-rest:var(--ink);--lk-on:var(--ink)}
:is(.announce,.mega-vis,.est-result,.vcard,.on-dark) .lk,.lk:is(.mega-vis,.on-dark){--lk-rest:#fff;--lk-on:#fff;--lk-accent:#fff;--lk-line:rgba(255,255,255,.9);--lk-hair:rgba(255,255,255,.35);--lk-wash:rgba(12,26,10,.3)}
:where(.announce,.mega-vis,.est-result,.vcard,.on-dark) .lk-cta,:where(.lk-cta:is(.mega-vis,.on-dark)){--lk-ul1:currentColor}

/* reduced motion: nothing travels; lines and bands appear whole, colors and arrows fade in place */
@media (prefers-reduced-motion:reduce){
  .lk,.lk .lk-t{--lk-move:0px!important;--lk-nudge:0px!important;--lk-arrow-shift:0px!important;--lk-t-line:0s!important;--lk-t-out:0s!important;--lk-t-shift:0s!important}
}

/* ---------- page hero with media (2026-10-21): the subpage opening, Sierra's shape ----------
   The headline and the buttons on white, then one wide footage loop with the showcase on it: a centered glass panel where
   Majeste works through the process beat by beat (the match, the report, the memos, the OK in Teams, the log). The beats are
   the page's own markup; site.js plays them on a timeline while the hero is in view and starts over at the end. Under reduced
   motion the poster holds and every beat shows at once, finished. It sits inside main, before .sheet, with a gutter under it. */
.phero{position:relative;z-index:var(--z-page);margin-bottom:0;border-radius:var(--r-m) var(--r-m) 0 0;background:var(--white);padding:calc(var(--nav-h) + 72px) 0 0}
.phero+.sheet{border-top-left-radius:0;border-top-right-radius:0}
.phero h1{max-width:18ch;margin:0}
.phero .hero-sub{margin:22px 0 0}
.phero .phead-links{align-items:center;margin-top:28px}
.phero-media{position:relative;margin:48px 0 0;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/8.5;background:var(--line-2)}
.phero-media>img,.phero-vid{display:block;width:100%;height:100%;object-fit:cover}
.phero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--night-rgb),.08),rgba(var(--night-rgb),.38));pointer-events:none}
/* the showcase: a glass panel in the middle of the footage */
.phero-stage{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:24px}
.phero-panel{width:min(600px,100%);border-radius:var(--r-big);padding:16px 16px 14px;color:var(--white);background:linear-gradient(160deg,rgba(18,24,20,.46),rgba(18,24,20,.22));box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.24),var(--lift-shadow);backdrop-filter:var(--blur-glass)}
.phero-top{display:flex;align-items:center;gap:10px;padding:2px 2px 12px}
.phero-av{position:relative;flex:none;width:38px;height:38px;border-radius:var(--r-round);background:var(--cream);padding:8px;box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.08)}
.phero-av img{width:100%;height:100%;object-fit:contain}
.phero-av::before,.phero-av::after{content:"";position:absolute;inset:-5px;border-radius:var(--r-round);box-shadow:0 0 0 1px rgba(var(--gold-soft-rgb),.95);animation:phero-pulse 2.4s ease-in-out infinite;pointer-events:none}
.phero-av::after{animation-delay:1.2s}
@keyframes phero-pulse{0%{transform:scale(.92);opacity:0}35%{opacity:.9}100%{transform:scale(1.3);opacity:0}}
.phero-id{min-width:0;flex:1}
.phero-id b{display:block;font-weight:var(--fw-medium);font-size:var(--fs-small);line-height:var(--lh-tight)}
.phero-cap{display:grid;font-size:var(--fs-meta);line-height:var(--lh-ui);color:var(--on-dark-2)}
.phero-cap span{grid-area:1/1;opacity:0;transition:opacity var(--t-reveal) var(--std)}
.phero-cap span.on{opacity:1}
.phero-top .ph-chip{flex:none;background:rgba(var(--white-rgb),.78);color:var(--ink)}
/* the beats: a feed that fills from the bottom, older beats slide up under the fade */
.phero-scene{position:relative;height:332px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 44px);mask-image:linear-gradient(180deg,transparent 0,#000 44px)}
.ph-beat{display:none;flex:none;border-radius:var(--r-tile);background:rgba(var(--white-rgb),.92);color:var(--ink);padding:10px 12px 11px;box-shadow:var(--card-shadow)}
.ph-beat.in{display:block;animation:ph-in var(--t-reveal) var(--pop) both}
@keyframes ph-in{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.ph-beat.say{background:var(--green-deep);color:var(--cream);font-size:var(--fs-ui);line-height:var(--lh-ui);max-width:88%}
.ph-row{display:flex;align-items:center;gap:10px;min-height:26px}
.ph-row b{flex:1;min-width:0;font-weight:var(--fw-medium);font-size:var(--fs-small);line-height:var(--lh-tight)}
.ph-row .ph-when{font-size:var(--fs-meta);color:var(--muted);white-space:nowrap}
.ph-sub{display:block;margin-top:3px;font-size:var(--fs-cap);line-height:var(--lh-ui);color:var(--ink-2)}
.ph-bar{display:block;height:6px;margin-top:9px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden}
.ph-bar i{display:block;height:100%;width:0;border-radius:inherit;background:var(--green);transition:width var(--ph-dur,2.4s) linear}
.ph-beat.in .ph-bar i{width:100%}
.ph-n{font-variant-numeric:tabular-nums}
.ph-ok{display:inline-flex;align-items:center;gap:6px;margin-top:8px;height:var(--chip-h);padding:0 9px;border-radius:var(--r-pill);background:var(--gold-soft);color:var(--ink);font-size:var(--fs-tag);font-weight:var(--fw-semi);opacity:0;transition:opacity var(--t-fast) var(--std)}
.ph-ok.in{opacity:1}
.ph-ok.green{background:var(--green-wash);color:var(--green-deep)}
.ph-ok .db-ck{width:16px;height:16px;min-width:0}
.ph-btn{position:relative;display:inline-flex;align-items:center;gap:7px;height:32px;margin-top:9px;padding:0 13px;border-radius:var(--r-btn);background:var(--green-deep);color:var(--cream);font-weight:var(--fw-medium);font-size:var(--fs-cap);transition:background var(--t-hover) var(--std),color var(--t-hover) var(--std),scale var(--t-fast) var(--pop)}
.ph-btn.press{scale:.94}
.ph-btn.done{background:var(--green-soft);color:var(--ink)}
.ph-btn .t2{display:none}
.ph-btn.done .t1{display:none}
.ph-btn.done .t2{display:inline}
.ph-btn.press::after{content:"";position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:var(--r-round);box-shadow:0 0 0 2px var(--white);animation:ph-rip var(--t-open) ease-out forwards;pointer-events:none}
@keyframes ph-rip{from{transform:scale(.4);opacity:.9}to{transform:scale(1.4);opacity:0}}
@media (max-width:1023px){.phero{padding:calc(var(--nav-h) + 56px) 0 0}.phero-media{aspect-ratio:16/10}.phero-panel{width:100%}}
@media (max-width:767px){.phero{padding:calc(var(--nav-h) + 40px) 0 0}.phero-media{aspect-ratio:auto;min-height:560px;margin-top:32px}.phero-media>img,.phero-vid{position:absolute;inset:0}.phero-stage{position:relative;min-height:560px;padding:12px}.phero-panel{padding:12px 12px 10px}.phero-scene{height:300px}}
@media (prefers-reduced-motion:reduce){
  .phero-av::before,.phero-av::after{animation:none}
  .ph-beat.in{animation:none}.ph-bar i{transition:none}.ph-ok,.phero-cap span{transition:none}
}

/* ---------- subpage sections (2026-10-21, round 2): the components the Operations page is built from ----------
   Everything lives on the page: headings on the left, hairlines between things, pictures of the product where a picture
   helps, and no boxes around copy. The method (three treatments), the job stage that reveals one job per scroll, the
   background feed with the one ask, the security trio with its illustrations, the standards row, the hours, the quote and
   the questions. Every value is a token. Scenes use the [data-at] engine in site.js. */
.sec-head.left{align-items:flex-start;text-align:left;margin-inline:0;max-width:none}
.sec-head.left .h2{max-width:20ch}
.sec-head.left .body-m{max-width:56ch}
.sec-head+.method,.sec-head+.mmap,.sec-head+.mweek,.sec-head+.bgrun,.sec-head+.trust3,.sec-head+.hours,.sec-head+.proof{margin-top:var(--head-gap)}
.rule{height:1px;background:var(--line-2)}
/* ---- the method, A: a line with three stops that draws across ---- */
.method{position:relative;padding-top:28px}
.m-rule{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line-2)}
.m-rule i{display:block;height:100%;width:0;background:var(--gold);transition:width var(--ph-dur,2.6s) var(--out)}
.m-rule i.in{width:100%}
.msteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.mstep{position:relative;opacity:0;translate:0 8px;transition:opacity var(--t-enter) var(--std),translate var(--t-enter) var(--out)}
.mstep.in{opacity:1;translate:0 0}
.mstep::before{content:"";position:absolute;left:0;top:-36px;width:14px;height:14px;border-radius:var(--r-round);background:var(--white);box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow var(--t-hover) var(--std),background var(--t-hover) var(--std)}
.mstep.in::before{background:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}
.mstep .eyebrow{margin:0 0 10px}
.mstep h3{margin:0 0 10px;font-size:var(--fs-h4);line-height:var(--lh-h4)}
.mstep p{margin:0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty;max-width:34ch}
/* ---- the method, B and C: steps on the left light with the picture on the right ---- */
.mmap,.mweek{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.mlist{display:grid;gap:0;margin:0;padding:0;list-style:none}
.mlist li{padding:18px 0;border-top:1px solid var(--line-2);transition:opacity var(--t-reveal) var(--std)}
.mlist li:first-child{border-top:0;padding-top:0}
.mlist li:not(.on){opacity:.45}
.mlist .eyebrow{margin:0 0 6px}
.mlist h3{margin:0 0 6px;font-size:var(--fs-h4);line-height:var(--lh-h4)}
.mlist p{margin:0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty;max-width:38ch}
/* B: the ring of your systems around Majeste */
.sysring{position:relative;aspect-ratio:1;max-width:460px;margin-inline:auto}
.sysring-c{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:var(--r-round);background:var(--cream);padding:16px;box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.08)}
.sysring-c img{width:100%;height:100%;object-fit:contain}
.sysring-n{position:absolute;left:50%;top:50%;width:64px;height:48px;margin:-24px 0 0 -32px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-logo);background:var(--white);box-shadow:var(--hairline-in);transform:translate(var(--x),var(--y));opacity:.35;transition:opacity var(--t-reveal) var(--std),box-shadow var(--t-reveal) var(--std)}
.sysring-n img{height:16px;width:auto;max-width:48px;object-fit:contain}
.sysring-n.in{opacity:1;box-shadow:var(--hairline-in-2)}
.sysring-n .db-ck{position:absolute;right:-6px;top:-6px;width:18px;height:18px;opacity:0;scale:.6;transition:opacity var(--t-fast) var(--std),scale var(--t-draw) var(--pop)}
.sysring-n .db-ck.in{opacity:1;scale:1}
.sysring-s{position:absolute;left:50%;top:50%;height:2px;width:var(--len);margin-top:-1px;background:var(--gold-soft);transform-origin:0 50%;transform:rotate(var(--a)) scaleX(0);transition:transform var(--t-brand) var(--out)}
.sysring-s.in{transform:rotate(var(--a)) scaleX(1)}
/* C: the week, timed, then projected */
.tw{display:grid;gap:18px}
.tw-row{display:grid;grid-template-columns:minmax(0,1fr) 92px;gap:14px;align-items:center;font-size:var(--fs-ui);color:var(--ink-2)}
.tw-row b{display:block;font-weight:var(--fw-medium);color:var(--ink);margin-bottom:6px}
.tw-bar{position:relative;display:block;height:14px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden}
.tw-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--gold-soft);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-brand) var(--out)}
.tw-bar i.in{transform:scaleX(1)}
.tw-bar i.g{background:var(--green)}
.tw-h{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.tw-h span{display:block;font-size:var(--fs-meta);color:var(--muted)}
.tw-h .g{color:var(--green-deep);font-weight:var(--fw-medium);opacity:0;transition:opacity var(--t-reveal) var(--std)}
.tw-h .g.in{opacity:1}
.tw-sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:14px;border-top:1px solid var(--line-2);font-size:var(--fs-ui);color:var(--ink-2)}
.tw-sum b{font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h4);line-height:var(--lh-stat);color:var(--ink);font-variant-numeric:tabular-nums}
.tw-sum b .g{color:var(--green-deep);font-weight:var(--hs)}
/* ---- the jobs: one at a time, each scroll reveals the next ---- */
.jstage{position:relative;height:calc(var(--stage-n,4) * 100vh)}
.jstage-sticky{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:center}
.jstage-copy,.jstage-pics{display:grid}
.jstage-copy>.sj,.jstage-pics>.spic{grid-area:1/1}
.sj{opacity:0;translate:0 10px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out);pointer-events:none}
.sj.on{opacity:1;translate:0 0;pointer-events:auto}
.spic{opacity:0;scale:.97;transition:opacity var(--t-reveal) var(--std),scale var(--t-reveal) var(--out);pointer-events:none}
.spic.on{opacity:1;scale:1;pointer-events:auto}
.sj-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.sj-h h3{margin:0;font-size:var(--fs-h3);line-height:var(--lh-h3)}
.sj-h .logos{display:inline-flex;gap:6px}
.sj>p{margin:0 0 20px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);text-wrap:pretty;max-width:40ch}
.sj-lists{display:grid;gap:14px}
.sj-lists .eyebrow{margin:0 0 6px}
.sj-lists ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sj-lists li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-ui);line-height:var(--lh-list);color:var(--ink-2)}
.sj-lists li .db-ck{width:18px;height:18px;margin-top:2px}
.sj-lists .does li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:var(--r-round);background:var(--cream) url("../brand/palm-avatar.png") center/60% no-repeat;box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.08)}
.jstage-dots{position:absolute;left:0;bottom:48px;display:flex;gap:8px;list-style:none;margin:0;padding:0}
.jstage-dots li{width:8px;height:8px;border-radius:var(--r-round);background:var(--line);transition:background var(--t-hover) var(--std),scale var(--t-hover) var(--pop)}
.jstage-dots li.on{background:var(--gold);scale:1.3}
/* the pictures: the product, so they keep a thin edge */
.spic{min-width:0;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);padding:22px 24px 24px}
.spic .db-h{min-height:26px}
.spic .db-h h4{margin:0;font-family:var(--sans);font-weight:var(--fw-medium);font-size:var(--fs-row);line-height:var(--lh-tight)}
.mrows{list-style:none;margin:8px 0 0;padding:0}
.mrow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 22px;gap:10px;align-items:center;min-height:44px;padding:8px 0;border-top:1px solid var(--line-2);font-size:var(--fs-small);color:var(--ink);font-variant-numeric:tabular-nums}
.mrow:first-child{border-top:0}
.mrow span:nth-child(2),.mrow span:nth-child(3){color:var(--ink-2)}
.mrow .db-ck{width:18px;height:18px;opacity:0;scale:.6;transition:opacity var(--t-fast) var(--std),scale var(--t-draw) var(--pop)}
.mrow.in .db-ck{opacity:1;scale:1}
.mhead{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 22px;gap:10px;margin-top:14px;padding-bottom:8px;border-bottom:1px solid var(--line-2);font-size:var(--fs-meta);color:var(--muted)}
.msum{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line-2)}
.msum b{font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h4);line-height:var(--lh-stat);letter-spacing:var(--ls-stat);font-variant-numeric:tabular-nums}
.msum b small{font-family:var(--sans);font-size:var(--fs-cap);letter-spacing:0;color:var(--muted)}
.prow{display:flex;align-items:center;gap:10px;min-height:48px;padding:9px 0;border-top:1px solid var(--line-2);font-size:var(--fs-small);color:var(--ink)}
.prow:first-child{border-top:0}
.db-h+.prow{margin-top:14px}
.prow b{flex:1;min-width:0;font-weight:var(--fw-medium)}
.prow .pm{color:var(--muted);white-space:nowrap}
:is(.prow,.awc-it) .tag{display:inline-flex;align-items:center;height:var(--tag-h);padding:0 7px;border-radius:var(--r-tag);background:var(--gold-soft);color:var(--ink);font-size:var(--fs-chip-s);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;white-space:nowrap}
:is(.prow,.awc-it) .tag.g{background:var(--green-wash);color:var(--green-deep)}
.pfig{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.pfig div{padding:12px 12px 13px;border-radius:var(--r-xs);background:var(--white);box-shadow:var(--hairline-in)}
.pfig span{display:block;font-size:var(--fs-meta);color:var(--muted)}
.pfig b{display:block;margin-top:2px;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h4);line-height:var(--lh-stat);letter-spacing:var(--ls-stat);font-variant-numeric:tabular-nums}
.spic .ph-ok{margin-top:14px}
/* the more line */
.morejobs{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px;padding-top:24px;border-top:1px solid var(--line-2)}
.morejobs h3{margin:0;font-family:var(--sans);font-weight:var(--fw-medium);font-size:var(--fs-row);line-height:var(--lh-ui)}
.morejobs ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.morejobs li{display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:var(--r-pill);box-shadow:var(--hairline-in-2);font-size:var(--fs-ui);color:var(--ink-2);white-space:nowrap}
.morejobs .lk-cta{margin-left:auto}
/* ---- the background: the feed on the left, the one ask on the right ---- */
.bgrun{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:start}
.feed{position:relative;height:420px;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 72px);mask-image:linear-gradient(180deg,transparent 0,#000 72px)}
.fr{display:none;flex:none;align-items:center;gap:12px;min-height:46px;padding:7px 0;border-top:1px solid var(--line-2);font-size:var(--fs-small);color:var(--ink)}
.fr.in{display:flex;animation:ph-in var(--t-reveal) var(--pop) both}
.fr time{flex:none;width:68px;font-size:var(--fs-meta);color:var(--muted);font-variant-numeric:tabular-nums}
.fr span{flex:1;min-width:0}
.fr .db-ck{flex:none;width:18px;height:18px}
.fr.ask{color:var(--green-deep)}
.fr.ask .db-ck{background:var(--gold-soft);color:var(--ink)}
.feed-sum{display:flex;gap:28px;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line-2);font-size:var(--fs-ui);color:var(--ink-2)}
.feed-sum b{display:block;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-stat-sm);line-height:var(--lh-stat);letter-spacing:var(--ls-stat);color:var(--ink);font-variant-numeric:tabular-nums}
.feed-sum .g b{color:var(--green-deep);font-weight:var(--hs)}
.ask-col{display:grid;gap:14px;align-content:center;min-height:420px}
.ask-col>p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);text-wrap:pretty;max-width:36ch}
.ping{display:none;border-radius:var(--r-card);background:var(--white);box-shadow:var(--card-shadow),var(--hairline-in);padding:14px 16px 16px}
.ping.in{display:block;animation:ph-in var(--t-reveal) var(--pop) both}
.ping .db-h{min-height:24px;margin-bottom:8px}
.ping .db-h b{font-weight:var(--fw-medium);font-size:var(--fs-small)}
.ping p{margin:0 0 10px;font-size:var(--fs-small);line-height:var(--lh-ui);color:var(--ink-2)}
.ping .ph-btn{margin-top:0}
.quiet{display:none;align-items:center;gap:10px;font-size:var(--fs-ui);color:var(--muted)}
.quiet.in{display:flex;animation:ph-in var(--t-reveal) var(--out) both}
.quiet i{width:8px;height:8px;border-radius:var(--r-round);background:var(--green);animation:phero-pulse 2.4s ease-in-out infinite}
/* ---- security: three illustrated answers, then the standards row ---- */
.trust3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.t3{padding-top:22px;border-top:1px solid var(--line-2)}
.t3 h3{margin:18px 0 8px;font-size:var(--fs-h5);line-height:var(--lh-h5)}
.t3 p{margin:0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty}
.ill{height:120px;display:flex;align-items:center}
.ill-card{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;border-radius:var(--r-m);background:var(--paper);box-shadow:var(--hairline-in-2);font-size:var(--fs-row);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--ink)}
.ill-card i{display:inline-block;width:26px;height:18px;border-radius:3px;background:var(--gold-soft)}
.ill-card span{display:inline-grid}
.ill-card span>em{grid-area:1/1;font-style:normal;transition:opacity var(--t-reveal) var(--std)}
.ill-card span>em.mask{opacity:0}
.ill-card span>em.mask.in{opacity:1}
.ill-card span>em.plain{opacity:1}
.ill-card span>em.plain.in{opacity:0}
.ill-list{width:100%;display:grid;gap:8px}
.ill-list div{display:flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--ink)}
.ill-list .db-lg{width:58px}
.ill-list b{flex:1;font-weight:var(--fw-regular);color:var(--ink-2)}
.ill-list .sw{width:30px;height:18px;border-radius:var(--r-pill);background:var(--line);position:relative;transition:background var(--t-hover) var(--std)}
.ill-list .sw::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:var(--r-round);background:var(--white);transition:translate var(--t-hover) var(--out)}
.ill-list .sw.in{background:var(--green)}
.ill-list .sw.in::after{translate:12px 0}
.ill-log{width:100%;display:grid;gap:6px;font-size:var(--fs-cap);color:var(--ink-2);font-variant-numeric:tabular-nums}
.ill-log div{display:none;gap:10px;padding:4px 0;border-top:1px solid var(--line-2)}
.ill-log div.in{display:flex;animation:ph-in var(--t-reveal) var(--pop) both}
.ill-log time{flex:none;width:60px;color:var(--muted)}
.stdrow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:center;margin-top:56px;padding-top:40px;border-top:1px solid var(--line-2)}
.stdrow .eyebrow{margin:0 0 8px}
.stdrow p{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);text-wrap:pretty;max-width:40ch}
.stds{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:0}
.stds li{display:inline-flex;flex-direction:column;justify-content:center;min-height:64px;padding:0 20px;border-radius:var(--r-m);box-shadow:var(--hairline-in-2);font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h5);line-height:var(--lh-tight);color:var(--ink)}
.stds li small{font-family:var(--sans);font-size:var(--fs-meta);color:var(--muted);margin-top:2px}
/* ---- the hours, open ---- */
.hours{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;padding-top:32px;border-top:1px solid var(--line-2)}
.hours .db-tl{justify-content:flex-start;gap:10px;margin-bottom:10px}
.hpair{display:flex;align-items:center;gap:14px;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h0);line-height:var(--lh-stat);letter-spacing:var(--ls-stat);font-variant-numeric:tabular-nums}
.hpair .to{color:var(--green-deep);font-weight:var(--hs)}
.hpair .ic{width:28px;height:28px;color:var(--muted)}
.hbars{display:grid;gap:14px}
.hbar{display:grid;grid-template-columns:92px minmax(0,1fr) 48px;gap:14px;align-items:center;font-size:var(--fs-ui);color:var(--muted)}
.hbar i{display:block;height:14px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden}
.hbar i::after{content:"";display:block;height:100%;width:0;border-radius:inherit;background:var(--gold-soft);transition:width var(--t-brand) var(--out)}
.hbar.g i::after{background:var(--green)}
.hbar.in i::after{width:var(--w)}
.hbar b{text-align:right;font-weight:var(--fw-medium);color:var(--ink);font-variant-numeric:tabular-nums}
.hours .db-fn{margin:16px 0 0;max-width:44ch}
.hours .lk-cta{margin-top:12px}
/* ---- the quote and the questions, open ---- */
.proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
.qopen{margin:0;padding-top:32px;border-top:1px solid var(--line-2)}
.qopen .qtop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:22px}
.qopen .qtop img{height:22px;width:auto}
.qopen blockquote{margin:0;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--ink);text-wrap:pretty}
.qopen .qwho{margin-top:22px;font-size:var(--fs-ui);color:var(--ink-2)}
.qopen .qwho b{display:block;font-weight:var(--fw-medium);color:var(--ink)}
.faq{display:grid;gap:8px}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--row-h);padding:16px 2px;cursor:pointer;list-style:none;font-weight:var(--fw-medium);font-size:var(--fs-row);line-height:var(--lh-ui);color:var(--ink);transition:opacity var(--t-move) var(--std),color var(--t-hover) var(--std)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate var(--t-move) var(--out),translate var(--t-move) var(--out)}
.faq details.is-open summary::after{rotate:225deg;translate:0 3px}
.faq summary:hover{color:var(--green-deep)}
.qa-two.has-open details:not(.is-open) summary{opacity:.4}
.qa-two.has-open details:not(.is-open) summary:hover{opacity:1}
.faq-a{overflow:hidden}
.faq p{margin:0;padding:0 2px 18px;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty;max-width:48ch}
@media (max-width:1023px){
  .msteps{grid-template-columns:minmax(0,1fr);gap:28px}
  .method{padding-top:0}.m-rule{display:none}.mstep::before{display:none}
  .mmap,.mweek,.bgrun,.hours,.proof,.stdrow{grid-template-columns:minmax(0,1fr)}
  .mmap,.mweek{gap:32px}
  .trust3{grid-template-columns:minmax(0,1fr);gap:24px}
  .jstage{height:auto}
  .jstage-sticky{position:static;height:auto;display:block}
  .jstage-copy>.sj,.jstage-pics>.spic{grid-area:auto}
  .jstage-sticky{display:grid;grid-template-columns:minmax(0,1fr);gap:18px}
  .jstage-copy,.jstage-pics{display:contents}
  .sj:nth-child(1){order:1}.spic:nth-child(1){order:2}.sj:nth-child(2){order:3}.spic:nth-child(2){order:4}.sj:nth-child(3){order:5}.spic:nth-child(3){order:6}.sj:nth-child(4){order:7}.spic:nth-child(4){order:8}
  .spic{margin-bottom:40px}
  .sj,.spic{opacity:1;translate:0 0;scale:1;pointer-events:auto}
  .jstage-dots{display:none}
  .feed{height:360px}.ask-col{min-height:0}
}
@media (max-width:767px){
  .spic{padding:16px 16px 18px}
  .mhead span:nth-child(3),.mrow span:nth-child(3){display:none}
  .mhead,.mrow{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 22px}
  .pfig{gap:6px}.pfig div{padding:8px}
  .morejobs .lk-cta{margin-left:0}
  .hpair{font-size:var(--fs-h1)}
  .hbar{grid-template-columns:72px minmax(0,1fr) 44px;font-size:var(--fs-cap)}
  .stds li{min-height:56px;padding:0 14px;font-size:var(--fs-row)}
  .tw-row{grid-template-columns:minmax(0,1fr) 76px}
}
@media (prefers-reduced-motion:reduce){
  .mstep,.mrow .db-ck,.sysring-n,.sysring-n .db-ck,.tw-h .g{opacity:1;translate:0 0;scale:1;transition:none}
  .m-rule i,.tw-bar i,.hbar i::after,.sysring-s{transition:none}
  .fr.in,.ping.in,.ill-log div.in{animation:none}.quiet i{animation:none}
  .sj,.spic{transition:none}
}
/* a looping scene with data-fade dims over its last moment, then starts over from empty (site.js) */
:where(.scene){transition:opacity var(--t-open) var(--std)}
.scene.out{opacity:0}
/* ---------- section options (2026-10-22): the layouts the dev editor's option pill switches between ----------
   A section can carry more than one layout: .variants[data-variants] holds one .variant per layout, and every one but the first
   is hidden. The preview's editor (dev/devtools.js) shows a pill at the bottom to switch them; outside the preview the first one
   is the page. Where we start: tabs (.wt), rows (.wr), a grid (.wg), then the plain "We also set up" list (.also).
   Runs in the background: the numbers first (.bgA), live counters in one tile (.bgB), every run as a dot (.bgC). */
.variant[hidden]{display:none!important}
.sec-head.left+.variants{margin-top:40px}
.variant>.sec-head+*{margin-top:40px}
.sheet>.sec>.sec-head+*{margin-top:40px}
/* the copy beside a picture */
.wj-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.wj-h h3{margin:0;font-size:var(--fs-h4);line-height:var(--lh-h4)}
.wj-h .logos{display:inline-flex;gap:6px}
.wj-line{margin:0 0 20px;font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);text-wrap:pretty;max-width:40ch}
.wpic{min-height:320px;display:flex;align-items:center}
.wpic>.scene{width:100%}
/* A: tabs */
.wt-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line-2);margin-bottom:40px}
.wt-tab{position:relative;appearance:none;border:0;background:none;padding:14px 2px 16px;text-align:left;font:inherit;font-size:var(--fs-row);font-weight:var(--fw-medium);color:var(--muted);cursor:pointer;transition:color var(--t-hover) var(--std)}
.wt-tab:hover,.wt-tab[aria-selected="true"]{color:var(--ink)}
.wt-tab:focus-visible{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset-tight);border-radius:var(--focus-radius)}
.wt-tab i{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.wt-tab i::after{content:"";display:block;height:100%;width:0;background:var(--gold)}
.wt-tab[aria-selected="true"] i::after{width:100%}
.wt-tab.run i::after{width:0;animation:wt-fill var(--wt-dur,7s) linear forwards}
@keyframes wt-fill{to{width:100%}}
.wt-panel{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center;animation:ph-in var(--t-reveal) var(--out) both}
.wt-panel[hidden]{display:none}
/* B: rows */
.wr{display:grid;gap:80px}
.wr-row{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.wr-row:nth-child(even){grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.wr-row:nth-child(even) .rtile{order:-1}
/* C: grid */
.wg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px var(--grid-gap)}
.wg-card .rtile{margin-bottom:24px}
.wg-card .wpic{min-height:300px}
.wg-card .wj-line{margin-bottom:16px}
/* the plain list of what else we set up: text with a dot, no boxes, nothing to click but the one link */
.also{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px 32px;margin-top:72px;padding-top:28px;border-top:1px solid var(--line-2)}
.also h3{margin:0;font-family:var(--sans);font-weight:var(--fw-medium);font-size:var(--fs-row);line-height:var(--lh-ui);color:var(--ink)}
.also ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 32px;list-style:none;margin:0;padding:0}
.also li{display:flex;align-items:center;gap:10px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2);cursor:default}
.also li::before{content:"";flex:none;width:6px;height:6px;border-radius:var(--r-round);background:var(--gold-soft)}
.also p{grid-column:2;margin:6px 0 0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--muted)}
/* background, A: numbers first */
.bgA-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-bottom:56px}
.bs i{display:block;height:2px;margin-bottom:20px;background:var(--line-2);position:relative;overflow:hidden}
.bs i::after{content:"";position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-brand) var(--out)}
.bs i.in::after{transform:scaleX(1)}
.bs.g i.in::after{background:var(--green)}
.bs b{display:block;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h0);line-height:var(--lh-stat);letter-spacing:var(--ls-stat);font-variant-numeric:tabular-nums;color:var(--ink)}
.bs.g b{color:var(--green-deep);font-weight:var(--hs)}
.bs p{margin:10px 0 0;font-size:var(--fs-body);line-height:var(--lh-s);color:var(--ink-2);max-width:26ch;text-wrap:pretty}
.bgA-play{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:center}
.bgA-play .feed{height:360px}
.bgA-ask{display:grid;gap:18px}
.bgA-ask .body-m{margin:0;max-width:34ch}
.bgA-ask .ask-col{min-height:180px;align-content:start}
.bgA-note{display:flex;align-items:center;gap:10px;margin:24px 0 0;font-size:var(--fs-cap);color:var(--muted)}
/* background, B: live counters in one tile */
.bgB-lead{margin:0 0 32px;max-width:52ch}
.bgB{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:stretch}
.bgB .feed{height:400px}
.bgB-live{display:grid;align-content:start;gap:0;border-left:1px solid var(--line-2);padding-left:32px}
.lv{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:16px 0;border-top:1px solid var(--line-2);font-size:var(--fs-ui);color:var(--ink-2)}
.lv:first-child{border-top:0;padding-top:4px}
.lv b{font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-stat);line-height:var(--lh-stat);letter-spacing:var(--ls-stat);font-variant-numeric:tabular-nums;color:var(--ink)}
.lv.g b{color:var(--green-deep);font-weight:var(--hs)}
.lv-swap{display:inline-grid}
.lv-swap em{grid-area:1/1;font-style:normal;opacity:0;translate:0 8px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out)}
.lv-swap em.in{opacity:1;translate:0 0}
.bgB-ask{margin-top:20px;min-height:170px}
.bgB-lead .db-chip{margin-left:10px;vertical-align:middle}
/* background, C: the proportion */
.bgC{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.rundots{--p:10px;position:relative;width:calc(var(--p) * 48);height:calc(var(--p) * 30);margin-bottom:28px}
.rundots-field{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path 1.6s var(--out)}
.rundots-field.in{clip-path:inset(0 0 0 0)}
.rundots-field::before,.rundots-field::after{content:"";position:absolute;left:0;top:0;background:radial-gradient(circle,var(--green-soft) 0 calc(var(--p) * .28),transparent calc(var(--p) * .3)) 0 0/var(--p) var(--p)}
.rundots-field::before{width:calc(var(--p) * 48);height:calc(var(--p) * 29)}
.rundots-field::after{top:calc(var(--p) * 29);width:calc(var(--p) * 20);height:var(--p)}
.rundots-ask{--c:0;--r:0;position:absolute;left:calc(var(--p) * var(--c));top:calc(var(--p) * var(--r));width:var(--p);height:var(--p);display:grid;place-items:center;opacity:0;scale:.4;transition:opacity var(--t-reveal) var(--std),scale var(--t-reveal) var(--pop)}
.rundots-ask::before{content:"";width:calc(var(--p) * 1.3);height:calc(var(--p) * 1.3);border-radius:var(--r-round);background:var(--gold)}
.rundots-ask::after{content:"";position:absolute;inset:calc(var(--p) * -1);border-radius:var(--r-round);box-shadow:0 0 0 2px var(--gold);animation:phero-pulse 2.4s ease-in-out infinite}
.rundots-ask.in{opacity:1;scale:1}
.bgC-story p{margin:0;padding:10px 0;border-top:1px solid var(--line-2);font-size:var(--fs-body);line-height:var(--lh-s);color:var(--ink-2);opacity:0;translate:0 6px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out)}
.bgC-story p:first-child{border-top:0}
.bgC-story p.in{opacity:1;translate:0 0}
.bgC-story b{font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h4);color:var(--ink);font-variant-numeric:tabular-nums;margin-right:6px}
.bgC-story .g b{color:var(--green-deep);font-weight:var(--hs)}
.bgC-story .bgC-note{display:flex;align-items:center;gap:10px;border-top:0;font-size:var(--fs-cap);color:var(--muted)}
.bgC .feed{height:420px}
@media (max-width:1023px){
  .wt-panel,.wr-row,.wr-row:nth-child(even),.bgA-play,.bgC{grid-template-columns:minmax(0,1fr);gap:28px}
  .wr-row:nth-child(even) .rtile{order:0}
  .wg{grid-template-columns:minmax(0,1fr)}
  .also{grid-template-columns:minmax(0,1fr)}.also p{grid-column:1}
  .bgB{grid-template-columns:minmax(0,1fr)}.bgB-live{border-left:0;padding-left:0;border-top:1px solid var(--line-2);padding-top:12px}
  .bgA-stats{gap:24px}
}
@media (max-width:767px){
  .wt-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .also ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bgA-stats{grid-template-columns:minmax(0,1fr)}
  .bs b{font-size:var(--fs-h1)}
  .rundots{--p:6px}
  .wpic{min-height:0}
}
@media (prefers-reduced-motion:reduce){.wt-tab.run i::after{animation:none;width:100%}.wt-panel{animation:none}.bs i::after,.lv-swap em,.rundots-field,.rundots-ask,.bgC-story p{transition:none}.rundots-ask::after{animation:none}}

/* ---------- round 4 sections (2026-10-22): the scroll showcase, the trust, results and question layouts ----------
   The scroll showcase (.ss) pins the heading with the content, so the heading never floats away from what it heads.
   A: the list (.ssl) opens the job shown; B: labelled bars (.ssb) fill as you scroll; C: the stack (.ssc) pins each card below
   the one before. Trust: standard marks (.stdmarks), the pictures (.trust3), a checklist for IT (.itsplit). Results: the
   estimate (.resA), a sample case study (.case), a band of figures (.band). Questions: open (.qa-open), narrow, split. */
.ss{position:relative;height:calc(var(--pin-h,640px) + (var(--n,4) - 1) * 70vh)}
.ss-pin{position:sticky;top:var(--sp)}
.ss-pin .sec-head{margin-bottom:36px}
.ss-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:center}
.ss-pics{display:grid}
.ss-pics>*{grid-area:1/1;opacity:0;scale:.97;transition:opacity var(--t-reveal) var(--std),scale var(--t-reveal) var(--out);pointer-events:none}
.ss-pics>.on{opacity:1;scale:1;pointer-events:auto}
.ss .wpic{min-height:340px}
/* A: the list */
.ssl{list-style:none;margin:0;padding:0;display:grid;gap:32px}
.ssl>li{position:relative}
.ssl-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ssl-h h3{margin:0;font-size:var(--fs-h4);line-height:var(--lh-h4);color:var(--ink);transition:opacity var(--t-reveal) var(--std),transform var(--t-open) var(--out)}
.ssl-h .logos{display:inline-flex;gap:6px;transition:opacity var(--t-reveal) var(--std)}
.ssl>li:not(.on) .ssl-h h3{opacity:.36}
.ssl>li:not(.on) .ssl-h .logos{opacity:0}
.ssl-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-open) var(--out)}
.ssl>li.on .ssl-more{grid-template-rows:1fr}
.ssl-more>div{overflow:hidden;opacity:0;translate:0 6px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out)}
.ssl>li.on .ssl-more>div{opacity:1;translate:0 0;transition-delay:.12s}
.ssl-more .wj-line{margin:10px 0 0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);max-width:42ch}
.ssl-more .sj-lists{padding-top:16px}
/* the scroll cue: four pips follow the job shown, and the hint steps aside on the last one */
.ss-cue{display:flex;align-items:center;gap:14px;margin-top:40px;font-size:var(--fs-cap);color:var(--muted)}
.ss-pips{display:inline-flex;gap:6px}
.ss-pips i{width:6px;height:6px;border-radius:var(--r-pill);background:var(--line);transition:width var(--t-move) var(--out),background var(--t-hover) var(--std)}
.ss-pips i.on{width:22px;background:var(--gold)}
.ss-hint{display:inline-flex;align-items:center;gap:6px;transition:opacity var(--t-reveal) var(--std)}
.ss-hint svg{animation:ss-nudge 1.8s var(--io) infinite}
@keyframes ss-nudge{0%,100%{translate:0 -1px}50%{translate:0 3px}}
.ss-cue:has(.ss-pips i:last-child.on) .ss-hint{opacity:0}
/* B: the bars */
.ssb-bars{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:16px;margin-bottom:40px}
.ssb-bar{font-size:var(--fs-ui);font-weight:var(--fw-medium);color:var(--muted);transition:color var(--t-hover) var(--std)}
.ssb-bar.on{color:var(--ink)}
.ssb-bar i{display:block;height:3px;margin-bottom:12px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden}
.ssb-bar i::after{content:"";display:block;height:100%;background:var(--gold);transform:scaleX(var(--pi,0));transform-origin:0 50%}
.ssb-copy{display:grid}
.ssb-c{grid-area:1/1;opacity:0;translate:0 8px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out);pointer-events:none}
.ssb-c.on{opacity:1;translate:0 0;pointer-events:auto}
/* C: the stack */
.ssc{display:grid;gap:28px;margin-top:40px;padding-bottom:40px}
.ssc-card{position:sticky;top:calc(var(--sp) + var(--i) * 20px)}
.ssc-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;padding:32px;border-radius:var(--r-sheet-end-sm);background:var(--white);box-shadow:var(--hairline-in-2),var(--panel-shadow)}
.ssc .wpic{min-height:300px;padding:20px;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in)}
/* trust A: standard marks, then three answers */
.sec-head.left>.body-m{margin:16px 0 0}
.stdmarks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));list-style:none;margin:40px 0 0;padding:28px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.stdmarks li{display:flex;flex-direction:column;gap:4px;padding:0 20px;border-left:1px solid var(--line-2)}
.stdmarks li:first-child{border-left:0;padding-left:0}
.stdmarks b{font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h3);line-height:var(--lh-h3);color:var(--ink)}
.stdmarks span{font-size:var(--fs-cap);color:var(--muted)}
.trust-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:40px}
.trust-cols h3{margin:14px 0 6px;font-size:var(--fs-h5);line-height:var(--lh-h5)}
.trust-cols p{margin:0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty}
.tic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-round);background:var(--green-wash);color:var(--green-deep)}
/* trust C: for IT */
.itsplit{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.itsplit-l .h2{margin:0}
.itsplit-l .body-m{margin:16px 0 24px}
.stdlist{list-style:none;margin:0;padding:0;display:grid}
.stdlist li{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--line-2)}
.stdlist li:first-child{border-top:0}
.stdlist b{font-weight:var(--fw-medium);color:var(--ink)}
.stdlist span{font-size:var(--fs-cap);color:var(--muted)}
.itcheck ul{list-style:none;margin:0;padding:0;display:grid}
.itcheck li{display:flex;align-items:center;gap:12px;min-height:52px;padding:8px 0;border-top:1px solid var(--line-2);font-size:var(--fs-ui);color:var(--ink);opacity:.35;transition:opacity var(--t-reveal) var(--std)}
.itcheck li:first-child{border-top:0}
.itcheck li .db-ck{flex:none;scale:.6;opacity:0;transition:opacity var(--t-fast) var(--std),scale var(--t-draw) var(--pop)}
.itcheck li.in{opacity:1}
.itcheck li.in .db-ck{scale:1;opacity:1}
/* results A: the projection beside the estimator */
.resA{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.resA .hbars{margin-top:24px}
.resA .db-fn{margin:18px 0 0;max-width:46ch}
.resA-r{display:grid;gap:18px;justify-items:start}
.resA-r .body-m{margin:0;max-width:40ch}
.estmock{width:100%}
.em-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:14px 0 6px;font-size:var(--fs-ui);color:var(--ink-2)}
.em-row b{font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h4);color:var(--ink);font-variant-numeric:tabular-nums}
.em-row.big{margin-top:14px;padding-top:18px;border-top:1px solid var(--line-2)}
.em-row.big b{font-size:var(--fs-stat);color:var(--green-deep);font-weight:var(--hs)}
.em-slide{position:relative;height:6px;margin:6px 0 4px;border-radius:var(--r-pill);background:var(--line-2)}
.em-k{position:absolute;top:50%;left:0;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:var(--r-round);background:var(--green-deep);box-shadow:0 0 0 4px var(--green-wash);transition:left 3s var(--io)}
.em-k.in{left:100%}
/* results B: a sample case study */
.case{padding-top:32px;border-top:1px solid var(--line-2)}
.case-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.case-top img{height:24px;width:auto}
.case-stats,.band{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:36px}
.case-stats b,.band b{display:block;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h0);line-height:var(--lh-stat);letter-spacing:var(--ls-stat);font-variant-numeric:tabular-nums;color:var(--green-deep)}
.case-stats div>span,.band div>span{display:block;margin-top:8px;font-size:var(--fs-body);line-height:var(--lh-s);color:var(--ink-2)}
.case blockquote{margin:44px 0 0;max-width:30ch;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--ink);text-wrap:pretty}
.case-who{margin:18px 0 0;font-size:var(--fs-ui);color:var(--ink-2)}
.case-who b{display:block;font-weight:var(--fw-medium);color:var(--ink)}
.case .db-fn{margin:28px 0 0}
.case-links{display:flex;flex-wrap:wrap;gap:8px 32px;margin-top:16px}
/* results C: the band */
.band{padding:36px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.band-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-top:18px}
.band-foot .db-fn{margin:0;max-width:52ch}
.band-cta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:var(--fs-ui);color:var(--ink-2)}
/* questions */
.qa-open{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px}
.qa-open h3{margin:0 0 8px;font-size:var(--fs-h5);line-height:var(--lh-h5)}
.qa-open p{margin:0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty;max-width:46ch}
.qa-narrow{max-width:720px;margin:40px auto 0}
.qa-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 56px;align-items:start}
.qa-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.qa-split-l{position:sticky;top:var(--sp)}
.qa-split-l .h2{margin:0}
.qa-split-l .body-m{margin:16px 0 18px;max-width:30ch}
@media (max-width:1023px){
  .ss{height:auto}.ss-pin{position:static}
  .ss-grid{grid-template-columns:minmax(0,1fr);gap:20px}
  .ssl,.ss-pics,.ssb-copy{display:contents}
  .ss-pics>*,.ssb-c{grid-area:auto;opacity:1;scale:1;translate:0 0;pointer-events:auto}
  .ssl>li:nth-child(1),.ssb-c:nth-child(1){order:1}.ss-pics>:nth-child(1){order:2}
  .ssl>li:nth-child(2),.ssb-c:nth-child(2){order:3}.ss-pics>:nth-child(2){order:4}
  .ssl>li:nth-child(3),.ssb-c:nth-child(3){order:5}.ss-pics>:nth-child(3){order:6}
  .ssl>li:nth-child(4),.ssb-c:nth-child(4){order:7}.ss-pics>:nth-child(4){order:8}
  .ss-pics>*{margin-bottom:28px}
  .ssl-col{display:contents}.ss-cue{display:none}
  .ssl-more{grid-template-rows:1fr;transition:none}.ssl-more>div{opacity:1;translate:0 0}
  .ssl>li:not(.on) .ssl-h h3{opacity:1}.ssl>li:not(.on) .ssl-h .logos{opacity:1}
  .ssl{gap:0}
  .ssb-bars{display:none}
  .ssc-card{position:static}.ssc-in{grid-template-columns:minmax(0,1fr);gap:20px;padding:22px}
  .stdmarks{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:24px}.stdmarks li:nth-child(4){border-left:0;padding-left:0}
  .trust-cols,.itsplit,.resA,.qa-split{grid-template-columns:minmax(0,1fr);gap:32px}
  .qa-split-l{position:static}
  .case-stats,.band{gap:24px}
  .qa-open{gap:28px 32px}
  .qa-two{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .ss .wpic{min-height:0}
  .stdmarks{grid-template-columns:repeat(2,minmax(0,1fr))}.stdmarks li{border-left:0;padding-left:0}
  .case-stats,.band{grid-template-columns:minmax(0,1fr)}
  .case-stats b,.band b{font-size:var(--fs-h1)}
  .qa-open{grid-template-columns:minmax(0,1fr)}
  .ssc-in{padding:16px}
}
@media (prefers-reduced-motion:reduce){.ss-pics>*,.ssb-c,.ssl-more,.ssl-h h3,.itcheck li,.itcheck li .db-ck,.em-k{transition:none}}

/* the pictures of the work: each row and figure arrives in its turn, so the picture tells the job in order */
.wpic .prow[data-at],.wpic .mrow[data-at],.wpic .pfig>div[data-at]{opacity:0;translate:0 6px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out)}
.wpic .prow[data-at].in,.wpic .mrow[data-at].in,.wpic .pfig>div[data-at].in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.wpic .prow[data-at],.wpic .mrow[data-at],.wpic .pfig>div[data-at]{opacity:1;translate:0 0;transition:none}}

/* ---------- round 5 sections (2026-10-22): security seals and the record, the results ideas, the ask row ----------
   Security: a row of shield seals that draw in (.seals), then three columns with their pictures (.trust-cols .ill).
   Runs in the background: the row that needs a person is tinted and tagged until it is approved (.fr.ask). */
.seals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;list-style:none;margin:0;padding:0}
.seals li{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.seal{width:44px;height:52px;margin-bottom:10px;overflow:visible}
.seal-p{fill:var(--paper);stroke:var(--gold-soft);stroke-width:2;stroke-dasharray:140;stroke-dashoffset:140;transition:stroke-dashoffset var(--t-brand) var(--out),fill var(--t-reveal) var(--std)}
.seal-k{fill:none;stroke:var(--green-deep);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset var(--t-reveal) var(--out) .35s}
.seals li.in .seal-p{stroke-dashoffset:0;fill:var(--green-wash);stroke:var(--gold)}
.seals li.in .seal-k{stroke-dashoffset:0}
.seals b{font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h4);line-height:var(--lh-h4);color:var(--ink)}
.seals span{font-size:var(--fs-cap);color:var(--muted)}
.seal-note{margin:24px 0 0;padding-top:18px;border-top:1px solid var(--line-2);font-size:var(--fs-cap);color:var(--muted)}
.trust-cols .ill{height:132px;margin-bottom:6px}
.ill-rec{position:relative;width:100%;max-width:300px;display:grid;gap:6px;padding:14px 16px;border-radius:var(--r-m);background:var(--paper);box-shadow:var(--hairline-in-2)}
.ill-rec>div{display:flex;justify-content:space-between;gap:12px;font-size:var(--fs-cap)}
.ill-rec>div>span{color:var(--muted)}
.ill-rec b{font-weight:var(--fw-medium);color:var(--ink);font-variant-numeric:tabular-nums}
.ill-card-n{display:inline-grid}
.ill-card-n>em{grid-area:1/1;font-style:normal;text-align:right;transition:opacity var(--t-reveal) var(--std)}
.ill-card-n>em.mask{opacity:0}.ill-card-n>em.mask.in{opacity:1}
.ill-card-n>em.plain.in{opacity:0}
.ill-chip{position:absolute;right:12px;top:-12px;display:inline-flex;align-items:center;height:var(--chip-h);padding:0 9px;border-radius:var(--r-pill);background:var(--green-wash);color:var(--green-deep);font-size:var(--fs-tag);font-weight:var(--fw-semi);opacity:0;translate:0 4px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out)}
.ill-chip.in{opacity:1;translate:0 0}
#hours .db-fn{margin:18px 0 0}
.size-foot{display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;margin-top:28px;padding-top:18px;border-top:1px solid var(--line-2)}
.size-foot .db-fn{margin:0 !important;max-width:60ch}
/* runs in the background: the row that needs a person */
.fr.ask{margin:2px -10px;padding:7px 10px;border-top-color:transparent;border-radius:var(--r-s);background:rgba(var(--gold-soft-rgb),.32);box-shadow:inset 3px 0 0 var(--gold)}
.fr.ask+.fr{border-top-color:transparent}
.fr .fr-tag{display:none;flex:none;align-items:center;height:var(--chip-h);padding:0 9px;border-radius:var(--r-pill);font-size:var(--fs-tag);font-weight:var(--fw-semi);white-space:nowrap}
.fr .fr-tag.in{display:inline-flex;animation:ph-in var(--t-reveal) var(--pop) both}
.fr-tag.t-need{background:var(--gold);color:var(--white)}
.fr-tag.t-done{background:var(--green-wash);color:var(--green-deep)}
.bgB-live{position:relative}
.bgB-sample{position:absolute;right:0;bottom:0}
@media (max-width:1023px){
  .seals{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
  .bgB-sample{position:static;align-self:start;margin-top:12px}
}
@media (max-width:767px){
  .seals{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){.seal-p,.seal-k,.ill-chip,.ssl-h h3,.ssl-more,.ssl-more>div,.ss-pips i,.ss-hint{transition:none}.ss-hint svg{animation:none}.fr-tag.in{animation:none}}

/* ---------- results (2026-10-22): the hours dial. The visitor's weekly transactions run through the estimator's model;
   the ring is the total hours back, one slice per department, and the broad study closes the section (.more-done). */
.dial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"ring in" "ring legend";column-gap:64px;row-gap:36px;align-items:center}
.dl-ring{grid-area:ring;position:relative;width:min(100%,420px);aspect-ratio:1;justify-self:center}
.dl-ring svg{display:block;width:100%;height:100%;overflow:visible}
.dl-base{fill:none;stroke:var(--green-wash);stroke-width:22}
.dl-seg{fill:none;stroke-width:22;stroke-dasharray:0 600;stroke-dashoffset:var(--off);transition:stroke-dasharray 1.1s var(--out),stroke-dashoffset 1.1s var(--out)}
.dl-seg.in{stroke-dasharray:var(--len) 600}
.dl-seg.dk,.dl-legend .dk i{stroke:var(--green-deep);background:var(--green-deep)}
.dl-seg.md,.dl-legend .md i{stroke:var(--green);background:var(--green)}
.dl-seg.lt,.dl-legend .lt i{stroke:var(--green-soft);background:var(--green-soft)}
.dl-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 22%}
.dl-mid b{font-family:var(--hf);font-weight:var(--hs);font-size:var(--fs-h0);line-height:var(--lh-stat);letter-spacing:var(--ls-stat);color:var(--green-deep);font-variant-numeric:tabular-nums}
.dl-mid>span{margin-top:6px;font-size:var(--fs-ui);line-height:var(--lh-ui);color:var(--ink-2)}
.dl-in{grid-area:in;align-self:end}
.dl-in label{display:block;font-size:var(--fs-ui);color:var(--ink-2)}
.dl-field{display:flex;align-items:center;gap:12px;margin-top:10px}
.dl-field span{font-size:var(--fs-ui);color:var(--muted)}
.dl-num{height:56px;width:180px;max-width:100%;padding:0 16px;border:0;border-radius:var(--r-btn);background:var(--white);box-shadow:var(--hairline-in);font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h4);color:var(--ink);font-variant-numeric:tabular-nums;transition:box-shadow var(--t-hover) var(--std)}
.dl-num:hover{box-shadow:inset 0 0 0 1px var(--line)}
.dl-num:focus-visible{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset-tight)}
.dl-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:18px 0 0;background:transparent;cursor:pointer;touch-action:pan-y}
.dl-range::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-2xs);background:linear-gradient(90deg,var(--green-deep) var(--p,100%),var(--line-2) var(--p,100%))}
.dl-range::-moz-range-track{height:6px;border-radius:var(--r-2xs);background:var(--line-2)}
.dl-range::-moz-range-progress{height:6px;border-radius:var(--r-2xs);background:var(--green-deep)}
.dl-range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:var(--r-round);background:var(--white);box-shadow:inset 0 0 0 2px var(--green-deep);transition:scale var(--t-hover) var(--std)}
.dl-range::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:var(--r-round);background:var(--white);box-shadow:inset 0 0 0 2px var(--green-deep)}
.dl-range:hover::-webkit-slider-thumb{scale:1.1}
.dl-range:focus{outline:none}
.dl-range:focus-visible{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset);border-radius:var(--r-3xs)}
.dl-ends{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--fs-meta);color:var(--muted);font-variant-numeric:tabular-nums}
.dl-legend{grid-area:legend;align-self:start;list-style:none;margin:0;padding:0;display:grid;gap:0}
.dl-legend li{display:flex;align-items:flex-start;gap:16px;padding:18px 0;border-top:1px solid var(--line-2);opacity:.3;transition:opacity var(--t-reveal) var(--std)}
.dl-legend li:first-child{border-top:0;padding-top:0}
.dl-legend li.in{opacity:1}
.dl-legend i{flex:none;width:14px;height:14px;margin-top:10px;border-radius:var(--r-round)}
.dl-legend [data-dl-back]{display:block;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h3);line-height:var(--lh-h3);color:var(--ink);font-variant-numeric:tabular-nums}
.dl-line{display:block;margin-top:4px;font-size:var(--fs-ui);color:var(--ink-2)}
.dl-line b{font-weight:var(--fw-semi);color:var(--ink);font-variant-numeric:tabular-nums}
/* every person gets more done: the broad study under each */
.more-done{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 40px;flex-wrap:wrap;margin-top:48px;padding:28px 0 0;border-top:1px solid var(--line-2)}
.more-done p{margin:0;max-width:62ch;font-size:var(--fs-body);line-height:var(--lh-s);color:var(--ink-2)}
.more-done p b{font-weight:var(--fw-medium);color:var(--ink)}
.more-done a{font-size:var(--fs-meta);color:var(--muted);text-decoration:underline;text-underline-offset:var(--ul-offset);text-decoration-color:var(--line);transition:color var(--t-hover) var(--std)}
.more-done a:hover{color:var(--ink)}
@media (max-width:1023px){
  .dial{grid-template-columns:minmax(0,1fr);grid-template-areas:"in" "ring" "legend";row-gap:40px}
  .dl-in{max-width:420px}
}
@media (max-width:767px){
  .dl-ring{width:min(100% - 24px,280px)}
}
@media (prefers-reduced-motion:reduce){.dl-seg,.dl-legend li{transition:none}}

/* ---------- ring tile (2026-10-22): a white tile inside a thick ring of the brand gradient ----------
   The ring is a masked layer, so the corners are truly rounded and transparent. Used for the pictures of the work. */
.rtile{--ring-w:12px;position:relative;isolation:isolate;border-radius:var(--r-sheet-end-sm);background:var(--white);box-shadow:var(--card-shadow);padding:calc(var(--ring-w) + 22px);overflow:hidden}
.rtile::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:var(--ring-w);background:var(--g-ring);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.rtile::before{content:"";position:absolute;inset:var(--ring-w);z-index:3;border-radius:calc(var(--r-sheet-end-sm) - var(--ring-w));box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.07);pointer-events:none}
@media (max-width:767px){.rtile{--ring-w:8px;padding:calc(var(--ring-w) + 12px)}}
/* phones: a row of name, detail and tag puts the detail under the name, so neither is squeezed to a word per line */
@media (max-width:767px){
  .prow:has(>.pm):not(:has(>:not(b,.pm,.tag))){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px}
  .prow:has(>.pm):not(:has(>:not(b,.pm,.tag)))>.pm{grid-column:1;grid-row:2;white-space:normal}
  .prow:has(>.pm):not(:has(>:not(b,.pm,.tag)))>.tag{grid-column:2;grid-row:1/3;align-self:center}
}

/* ---------- the method in three columns (2026-10-21, revised 2026-10-22): Scribe's three-column animation, in the homepage's dress ----------
   Three white tiles, each inside a thick ring of the brand gradient. The ring is its own layer, cut out with a mask, so the tile's
   corners are truly rounded and everything outside them is transparent. Each tile plays one idea: Audit, your systems lighting up
   around Majeste and connecting to it; Test, the week timed and then projected; Deploy, the first job switched on, approved with
   one tap and logged. Under each tile, a headline and one sentence. */
.sec-head+.m3{margin-top:48px}
.m3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.m3-col{display:flex;flex-direction:column}
.m3-vis{--ring-w:12px;position:relative;isolation:isolate;height:360px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-sheet-end-sm);background:var(--white);box-shadow:var(--card-shadow);padding:calc(var(--ring-w) + 22px);overflow:hidden}
.m3-vis::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:var(--ring-w);background:var(--g-ring);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);pointer-events:none}
.m3-vis::before{content:"";position:absolute;inset:var(--ring-w);z-index:3;border-radius:calc(var(--r-sheet-end-sm) - var(--ring-w));box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.07);pointer-events:none}
.m3-vis>:not(.m3-cap){width:100%}
.m3-cap{position:absolute;left:calc(var(--ring-w) + 22px);right:calc(var(--ring-w) + 22px);bottom:calc(var(--ring-w) + 14px);display:grid;font-size:var(--fs-meta);color:var(--muted);text-align:center}
.m3-cap span{grid-area:1/1;opacity:0;transition:opacity var(--t-reveal) var(--std)}
.m3-cap span.on{opacity:1}
.m3-col h3{margin:28px 0 8px;font-size:var(--fs-h5);line-height:var(--lh-h5)}
.m3-col p{margin:0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty;max-width:34ch}
/* Audit: the ring of systems. Layers, back to front: the dashed orbit, the spokes, then Majeste and the systems, which are opaque,
   so no line ever crosses a logo. Each spoke runs from the edge of Majeste to the edge of its system, and a dot travels in along it. */
.m3 .sysring{width:260px;max-width:none;flex:none;margin-bottom:22px}
.m3 .sysring::before{content:"";position:absolute;inset:22px;z-index:0;border-radius:var(--r-round);border:1px dashed var(--line);animation:m3-orbit 48s linear infinite}
@keyframes m3-orbit{to{rotate:360deg}}
.m3 .sysring-c{z-index:2;width:56px;height:56px;margin:-28px 0 0 -28px;padding:12px;background:var(--cream)}
.m3 .sysring-c::before,.m3 .sysring-c::after{content:"";position:absolute;inset:-6px;border-radius:var(--r-round);box-shadow:0 0 0 1px rgba(var(--gold-soft-rgb),.95);animation:phero-pulse 2.4s ease-in-out infinite;pointer-events:none}
.m3 .sysring-c::after{animation-delay:1.2s}
.m3 .sysring-n{z-index:2;width:52px;height:38px;margin:-19px 0 0 -26px;opacity:1;background:var(--white);box-shadow:var(--hairline-in);transition:box-shadow var(--t-reveal) var(--std),scale var(--t-reveal) var(--pop);scale:.94}
.m3 .sysring-n img{height:13px;max-width:40px;opacity:.28;filter:grayscale(1);transition:opacity var(--t-reveal) var(--std),filter var(--t-reveal) var(--std)}
.m3 .sysring-n.in{scale:1;box-shadow:var(--hairline-in-2),0 6px 18px rgba(var(--gold-rgb),.16)}
.m3 .sysring-n.in img{opacity:1;filter:none}
.m3 .sysring-n .db-ck{z-index:1}
.m3 .sysring-s{z-index:1;width:var(--len);background:linear-gradient(90deg,var(--gold),var(--gold-soft));transform:rotate(var(--a)) translateX(var(--r0)) scaleX(0);transition:transform var(--t-brand) var(--out)}
.m3 .sysring-s.in{transform:rotate(var(--a)) translateX(var(--r0)) scaleX(1)}
.m3 .sysring-s::after{content:"";position:absolute;left:0;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:var(--r-round);background:var(--gold);opacity:0}
.m3 .sysring-s.in::after{animation:m3-dot 1.8s var(--io) .5s infinite}
@keyframes m3-dot{0%{translate:var(--len) 0;opacity:0}12%{opacity:1}88%{opacity:1}100%{translate:0 0;opacity:0}}
/* Test: the week, with the Projected label and the method link */
.m3 .tw{gap:10px}
.m3 .tw .db-tl{margin-bottom:2px}
.m3 .tw-row{grid-template-columns:minmax(0,1fr) 64px;gap:10px;font-size:var(--fs-cap)}
.m3 .tw-row b{margin-bottom:4px;font-size:var(--fs-cap)}
.m3 .tw-bar{height:10px}
.m3 .tw-h{font-size:var(--fs-cap)}
.m3 .tw-h span{font-size:var(--fs-mini)}
.m3 .tw-h .g{translate:0 4px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out)}
.m3 .tw-h .g.in{translate:0 0}
.m3 .tw-sum .g{display:inline-block;opacity:0;translate:0 6px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out)}
.m3 .tw-sum .g.in{opacity:1;translate:0 0}
.m3 .tw-sum{padding-top:10px;font-size:var(--fs-meta)}
.m3 .tw-sum b{font-size:var(--fs-row)}
.m3 .tw .db-fn{margin:6px 0 0;font-size:var(--fs-mini);line-height:var(--lh-fn)}
/* Deploy: the first job, row by row. The Approve button shows first, then it is tapped, then the log line follows. */
.m3 .dep{max-width:none;margin-bottom:22px}
.m3 .dep .prow{min-height:44px;padding:6px 0;font-size:var(--fs-cap);opacity:0;translate:0 6px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out)}
.m3 .dep .prow.in{opacity:1;translate:0 0}
.m3 .dep .prow b{font-size:var(--fs-cap)}
.m3 .dep .ph-btn{margin:10px 0 4px;height:30px;font-size:var(--fs-meta);opacity:0;translate:0 6px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out),background var(--t-hover) var(--std),color var(--t-hover) var(--std),scale var(--t-fast) var(--pop)}
.m3 .dep .ph-btn.in{opacity:1;translate:0 0}
@media (max-width:1180px) and (min-width:1024px){.m3 .sysring{scale:.88}}
@media (max-width:1023px){.m3{grid-template-columns:minmax(0,1fr);gap:40px}.m3-vis{height:auto;min-height:340px}.sec-head+.m3{margin-top:36px}}
@media (max-width:374px){.m3 .sysring{scale:.88}}
@media (prefers-reduced-motion:reduce){
  .m3 .sysring::before,.m3 .sysring-c::before,.m3 .sysring-c::after,.m3 .sysring-s.in::after{animation:none}
  .m3 .sysring-s{transition:none}.m3 .sysring-n,.m3 .sysring-n img{transition:none}
  .m3 .tw-h .g,.m3 .tw-sum .g,.m3 .dep .prow,.m3 .dep .ph-btn{translate:0 0;transition:none}
  .m3-cap span,:where(.scene){transition:none}.tw-bar i{transition:none}
}

/* ---------- area pages (operations, sales and marketing): the section rhythm, and the Planned chip in the page heading ---------- */
.sheet.area-sheet>.sec{padding-top:144px;padding-bottom:0}
/* the wrap's side padding comes back only where the sheet is narrower than the container plus that padding (below 1232px) */
@media (min-width:1232px){.sheet.area-sheet>.sec{padding-inline:0}}
.sheet.area-sheet>.sec:first-child{padding-top:136px}
.phero h1 .chip{height:26px;margin-left:10px;padding:0 10px;font-family:var(--sans);font-size:var(--fs-eyebrow);letter-spacing:var(--ls-tag);vertical-align:.32em}
@media (max-width:767px){.phero h1 .chip{height:22px;padding:0 8px;font-size:var(--fs-chip);vertical-align:.24em}}

/* ---------- sales hero (2026-10-22): a week of the marketing funnel ----------
   Four stages narrow from reach to follow-ups; each band grows in and counts its Sample figure, then a note says what Majeste
   did there, with the tools' logos. Dots drift down the funnel. A Teams request approves the new ads. The background is a
   still that drifts slowly (.phero-still), a placeholder until footage is chosen. */
.phero-still{display:block;width:100%;height:100%;object-fit:cover;transform-origin:60% 40%;animation:phero-drift 28s ease-in-out infinite alternate}
@keyframes phero-drift{from{scale:1.02;translate:0 0}to{scale:1.12;translate:-2% 1%}}
.fn{width:min(860px,100%);border-radius:var(--r-big);padding:14px 16px 18px;background:rgba(var(--white-rgb),.82);box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.6),var(--lift-shadow);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);color:var(--ink)}
.fn-bar{display:flex;align-items:center;gap:10px;padding:2px 2px 14px}
.fn-id{min-width:0;flex:1}
.fn-id b{display:block;font-weight:var(--fw-medium);font-size:var(--fs-small);line-height:var(--lh-tight)}
.fn-cap{display:grid;font-size:var(--fs-meta);line-height:var(--lh-ui);color:var(--muted)}
.fn-cap span{grid-area:1/1;opacity:0;transition:opacity var(--t-reveal) var(--std)}
.fn-cap span.on{opacity:1}
.fn-bar .ph-chip{flex:none}
.fn-scene{position:relative;display:grid;gap:8px}
.fn-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:center}
.fn-band{justify-self:center;position:relative;z-index:1;width:var(--w);height:58px;display:flex;align-items:center;gap:10px;padding:0 calc(14px + var(--d) * 4px);clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,14px 100%);background:color-mix(in srgb,var(--green-soft),var(--green-deep) calc(var(--d) * 30%));color:var(--ink);opacity:0;scale:.6 1;transition:opacity var(--t-reveal) var(--std),scale var(--t-open) var(--out)}
.fn-row:nth-child(n+4) .fn-band{color:var(--white)}
.fn-band.in{opacity:1;scale:1 1}
.fn-band span{flex:1;min-width:0;font-weight:var(--fw-medium);font-size:var(--fs-small)}
.fn-band b{font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h5);line-height:1;font-variant-numeric:tabular-nums}
.fn-band small{display:none}
.fn-note{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:58px;padding:8px 12px;border-radius:var(--r-m);background:var(--white);box-shadow:var(--hairline-in),0 6px 16px rgba(var(--ink-rgb),.06);opacity:0;translate:-12px 0;transition:opacity var(--t-reveal) var(--std),translate var(--t-open) var(--out)}
.fn-note.in{opacity:1;translate:0 0}
.fn-logos{display:flex;gap:4px}
.fn-logos .db-lg{--logo-h:26px;min-width:26px;padding:0 4px}
.fn-logos .db-lg img{height:14px}
.fn-note p{margin:0;font-size:var(--fs-cap);line-height:var(--lh-ui);color:var(--ink-2)}
.fn-note .tag{display:none;align-items:center;height:var(--tag-h);padding:0 7px;border-radius:var(--r-tag);background:var(--gold-soft);color:var(--ink);font-size:var(--fs-chip-s);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;white-space:nowrap}
.fn-note .tag.in{display:inline-flex}
.fn-note .tag.g{background:var(--green-wash);color:var(--green-deep)}
.fn-flow{position:absolute;left:0;top:0;bottom:0;width:calc(50% - 10px);pointer-events:none;z-index:2}
.fn-flow i{position:absolute;top:-6px;left:calc(50% + var(--x));width:6px;height:6px;border-radius:var(--r-round);background:var(--white);box-shadow:0 0 0 2px rgba(var(--green-deep-rgb),.25);opacity:0;animation:fn-drop 3.6s linear infinite}
.fn-flow i:nth-child(1){--x:-60px;animation-delay:.2s}
.fn-flow i:nth-child(2){--x:40px;animation-delay:.8s}
.fn-flow i:nth-child(3){--x:-20px;animation-delay:1.4s}
.fn-flow i:nth-child(4){--x:70px;animation-delay:2s}
.fn-flow i:nth-child(5){--x:-80px;animation-delay:2.6s}
.fn-flow i:nth-child(6){--x:10px;animation-delay:3.2s}
@keyframes fn-drop{0%{opacity:0;translate:0 0}10%{opacity:.9}80%{opacity:.9}100%{opacity:0;translate:calc(var(--x) * -.8) 250px}}
.pb-toast{position:absolute;left:50%;bottom:-40px;z-index:3;display:flex;align-items:center;gap:12px;width:min(460px,calc(100% - 24px));padding:12px 14px;border-radius:var(--r-l);background:var(--white);box-shadow:var(--hairline-in),var(--lift-shadow);opacity:0;translate:-50% 14px;transition:opacity var(--t-reveal) var(--std),translate var(--t-open) var(--out)}
.pb-toast.in{opacity:1;translate:-50% 0}
.pb-toast>div{min-width:0;flex:1}
.pb-toast b{display:block;font-weight:var(--fw-medium);font-size:var(--fs-small)}
.pb-toast div>span{display:block;font-size:var(--fs-cap);color:var(--ink-2)}
.pb-toast .ph-btn{flex:none;margin:0}
.fn-toast{bottom:-84px}
@media (max-width:767px){
  .fn{padding:12px 12px 14px}
  .fn-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .fn-band{height:46px;width:calc(var(--w) - 0px)}
  .fn-note{min-height:0}
  .fn-flow{width:100%}
  .pb-toast{bottom:auto;top:50%;flex-wrap:wrap;gap:10px;width:calc(100% - 16px);translate:-50% -40%}
  .pb-toast.in{translate:-50% -50%}
  .pb-toast>div{flex-basis:calc(100% - 44px)}
  .pb-toast .ph-btn{margin-left:44px}
}
@media (prefers-reduced-motion:reduce){.phero-still{animation:none}.fn-band,.fn-note,.pb-toast,.fn-cap span{transition:none}.fn-flow{display:none}}

/* ---------- systems (2026-10-22): the main systems each department runs, on both area pages (#systems, right after "Where we start.").
   Shown as the Marquee below; the footnote and the icon for systems without a logo are shared. */
.sysg-ic{color:var(--ink-2)}
.sysg-foot{display:flex;justify-content:space-between;gap:8px 32px;flex-wrap:wrap;margin-top:28px}
.sysg-foot p{margin:0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2)}

/* systems, Marquee: two slow rows of systems that drift in opposite directions and pause on hover */
.sysm{display:grid;gap:14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.sysm-row{overflow:hidden}
.sysm-track{display:flex;width:max-content;animation:sysm-run 60s linear infinite}
.sysm-row.rev .sysm-track{animation-direction:reverse}
.sysm:hover .sysm-track{animation-play-state:paused}
.sysm ul{display:flex;gap:14px;list-style:none;margin:0;padding:0 14px 0 0}
.sysm li{display:flex;align-items:center;gap:12px;height:72px;padding:0 22px 0 14px;border-radius:var(--r-pill);background:var(--white);box-shadow:var(--hairline-in);white-space:nowrap}
.sysm .db-lg{--logo-h:40px;width:72px;border-radius:var(--r-pill)}
.sysm .db-lg img{height:16px;max-width:56px}
.sysm .db-lg.sq img{height:22px}
.sysm b{font-weight:var(--fw-medium);font-size:var(--fs-row);color:var(--ink)}
.sysm li>span:last-child{font-size:var(--fs-cap);color:var(--muted)}
@keyframes sysm-run{to{translate:-50% 0}}
@media (max-width:767px){.sysm li{height:60px}}
@media (prefers-reduced-motion:reduce){
  .sysm{-webkit-mask-image:none;mask-image:none}
  .sysm-track{animation:none;width:auto}
  .sysm ul{flex-wrap:wrap}
  .sysm ul[aria-hidden]{display:none}
}

/* ---------- sales, runs in the background: Relay (2026-10-22) ----------
   A team of agents under an orchestrator, each named for its job with a badge for the platform it works in, handing the work
   along: Scout, Researcher, Analyst, Writer, your one OK, Email and LinkedIn agents, CRM agent. The orchestrator line says
   each hand-off as it happens; the card under the chain shows what that agent produced, at the scale it runs. */
.rl{display:grid;gap:0;padding-top:28px;padding-bottom:32px}
.rl>.scene{display:grid;gap:0}
.rl-chain{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));list-style:none;margin:0;padding:0}
.rl-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 6px;text-align:center}
.rl-node::before,.rl-node::after{content:"";position:absolute;top:27px;right:50%;width:100%;height:2px;background:var(--line-2)}
.rl-node::after{background:var(--green);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--t-open) var(--out)}
.rl-node:first-child::before,.rl-node:first-child::after{display:none}
.rl-node.in::after{transform:scaleX(1)}
.rl-ic{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--r-round);background:var(--white);box-shadow:var(--hairline-in);color:var(--ink-2);transition:box-shadow var(--t-reveal) var(--std),scale var(--t-open) var(--pop)}
.rl-ic img{max-width:28px;max-height:24px}
.rl-node.in .rl-ic{box-shadow:0 0 0 2px var(--green),var(--card-shadow);scale:1.06}
.rl-node.you .rl-ic{background:rgba(var(--gold-soft-rgb),.35);color:var(--ink)}
.rl-node.you.in .rl-ic{box-shadow:0 0 0 2px var(--gold),var(--card-shadow)}
.rl-node>b{font-weight:var(--fw-medium);font-size:var(--fs-small);color:var(--ink);opacity:.45;transition:opacity var(--t-reveal) var(--std)}
.rl-node>span:last-child{max-width:15ch;font-size:var(--fs-cap);line-height:var(--lh-ui);color:var(--muted);opacity:.45;transition:opacity var(--t-reveal) var(--std)}
.rl-node.in>b,.rl-node.in>span:last-child,.rl-node.in .rl-n{opacity:1}
.rl-out{display:grid;justify-items:center;min-height:218px}
.rl-card{grid-area:1/1;width:min(560px,100%);align-self:start;padding:16px 18px 10px;border-radius:var(--r-card);background:var(--white);box-shadow:var(--card-shadow),var(--hairline-in);opacity:0;translate:0 10px;transition:opacity var(--t-reveal) var(--std),translate var(--t-open) var(--out)}
.rl-card.in{opacity:1;translate:0 0}
.rl-card.you{box-shadow:var(--card-shadow),inset 0 0 0 1px var(--gold-soft)}
.rl-card .db-h{margin-bottom:6px}
.rl-card .db-h b{font-weight:var(--fw-medium);font-size:var(--fs-small)}
.rl-card .db-lg{--logo-h:28px;min-width:28px;padding:0 5px}
.rl-card .db-lg img{height:15px}
.rl-card .db-lg.sq img{height:16px}
.rl-card .prow{min-height:42px}
.rl-mail{margin:6px 0 10px;font-size:var(--fs-small);line-height:var(--lh-s);color:var(--ink-2)}
.rl-mail b{display:block;margin-bottom:6px;font-weight:var(--fw-medium);color:var(--ink)}
.rl-ask{margin:6px 0 8px;font-size:var(--fs-small);line-height:var(--lh-s);color:var(--ink-2)}
.rl-card .ph-btn{margin:0 0 8px}
@media (max-width:1023px){
  .rl-chain{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px}
  .rl-node:nth-child(5)::before,.rl-node:nth-child(5)::after{display:none}
}
@media (max-width:767px){
  .rl{padding-top:20px;padding-bottom:20px}
  .rl-chain{grid-template-columns:minmax(0,1fr);row-gap:0}
  .rl-node{flex-direction:row;align-items:center;gap:12px;padding:6px 0;text-align:left}
  .rl-node::before,.rl-node::after{top:auto;bottom:50%;right:auto;left:27px;width:2px;height:100%;transform-origin:50% 0}
  .rl-node::after{transform:scaleY(0)}
  .rl-node.in::after{transform:scaleY(1)}
  .rl-node:nth-child(5)::before,.rl-node:nth-child(5)::after{display:block}
  .rl-node:first-child::before,.rl-node:first-child::after{display:none}
  .rl-ic{flex:none;width:44px;height:44px;margin-left:5px}
  .rl-node>span:last-child{max-width:none;margin-left:auto;text-align:right}
}
@media (prefers-reduced-motion:reduce){.rl-node::after,.rl-ic,.rl-card,.rl-orch-cap span{transition:none}}

/* Relay at scale (2026-10-22): a running count under each step, and cards that show volume */
.rl-n{font-size:var(--fs-cap);color:var(--muted);opacity:.45;transition:opacity var(--t-reveal) var(--std);white-space:nowrap}
.rl-n b{font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h6);color:var(--green-deep);font-variant-numeric:tabular-nums}
.rl-node.you .rl-n b{color:var(--gold)}
.rl-out{min-height:252px}
.rl-card [data-at]{opacity:0;translate:0 6px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out)}
.rl-card [data-at].in{opacity:1;translate:0 0}
.rl-card .ph-btn[data-at]{translate:0 0}
.rl-dist{display:flex;gap:4px;height:34px;margin:6px 0 4px}
.rl-dist i{flex:0 0 var(--f);display:grid;place-items:center;border-radius:var(--r-xs);font-style:normal;font-size:var(--fs-cap);font-weight:var(--fw-semi);color:var(--white);background:var(--green-deep);transform-origin:0 50%;transform:scaleX(0);transition:transform var(--t-enter) var(--out)}
.rl-dist i:nth-child(2){background:var(--green);transition-delay:.12s}
.rl-dist i:nth-child(3){background:var(--green-soft);color:var(--ink);transition-delay:.24s}
.rl-dist.in i{transform:scaleX(1)}
.rl-fan{position:relative;display:grid;gap:8px;margin:8px 0 10px}
.rl-mail-card{min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:var(--r-m);background:var(--paper);box-shadow:var(--hairline-in)}
.rl-mail-card p{flex:1;margin:0;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fs-cap);color:var(--ink-2)}
.rl-mail-card p b{font-weight:var(--fw-medium);color:var(--ink)}
.rl-mail-card span{flex:none;font-size:var(--fs-mini);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;color:var(--muted)}
.rl-sub{margin:0 0 4px;font-size:var(--fs-cap);color:var(--muted)}
.rl-seq{display:grid}
.rl-seq-row{display:grid;grid-template-columns:52px auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:40px;border-top:1px solid var(--line-2)}
.rl-seq-row:first-child{border-top:0}
.rl-seq-row time{font-size:var(--fs-cap);color:var(--muted);font-variant-numeric:tabular-nums}
.rl-seq-row b{font-weight:var(--fw-medium);font-size:var(--fs-small);color:var(--ink)}
.rl-seq-row .tag{display:inline-flex;align-items:center;height:var(--tag-h);padding:0 7px;border-radius:var(--r-tag);background:var(--gold-soft);color:var(--ink);font-size:var(--fs-chip-s);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase}
.rl-seq-row .tag.g{background:var(--green-wash);color:var(--green-deep)}
.rl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:6px 0 10px}
.rl-stats div{padding:12px;border-radius:var(--r-xs);background:var(--paper);box-shadow:var(--hairline-in)}
.rl-stats b{display:block;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h4);line-height:var(--lh-stat);font-variant-numeric:tabular-nums;color:var(--ink)}
.rl-stats span{display:block;margin-top:2px;font-size:var(--fs-meta);color:var(--muted)}
@media (max-width:767px){.rl-n{margin-left:auto}.rl-node>span:last-child{display:none}.rl-stats{grid-template-columns:minmax(0,1fr)}.rl-mail-card{flex-direction:column;gap:4px}.rl-mail-card p{white-space:normal}}
@media (prefers-reduced-motion:reduce){.rl-card [data-at],.rl-dist i{transition:none}}

.rl-orch{display:flex;align-items:center;gap:12px;width:min(620px,100%);margin:0 auto;padding:10px 14px;border-radius:var(--r-pill);background:var(--paper);box-shadow:var(--hairline-in)}
.rl-orch-av{position:relative;flex:none;width:40px;height:40px;padding:8px;border-radius:var(--r-round);background:var(--cream);box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.08)}
.rl-orch-av img{width:100%;height:100%;object-fit:contain}
.rl-orch-av::after{content:"";position:absolute;inset:-5px;border-radius:var(--r-round);box-shadow:0 0 0 1px rgba(var(--gold-soft-rgb),.95);animation:phero-pulse 2.4s ease-in-out infinite;pointer-events:none}
.rl-orch>div{flex:1;min-width:0}
.rl-orch b{display:block;font-weight:var(--fw-medium);font-size:var(--fs-small);line-height:var(--lh-tight)}
.rl-orch-cap{display:grid;font-size:var(--fs-cap);line-height:var(--lh-ui);color:var(--ink-2)}
.rl-orch-cap span{grid-area:1/1;opacity:0;translate:0 4px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out)}
.rl-orch-cap span.on{opacity:1;translate:0 0}
.rl-bus{position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));height:34px;margin-bottom:6px}
.rl-bus::before{content:"";position:absolute;top:12px;left:6.25%;right:50%;height:2px;background:var(--line-2)}
.rl-bus::after{content:"";position:absolute;top:0;left:50%;width:2px;height:12px;margin-left:-1px;background:var(--line-2)}
.rl-ic>img{width:26px;height:26px;object-fit:contain}
.rl-bdg{position:absolute;right:-6px;bottom:-4px;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-round);background:var(--white);box-shadow:var(--hairline-in),0 2px 6px rgba(var(--ink-rgb),.08);color:var(--ink-2)}
.rl-bdg img{width:14px;height:14px;object-fit:contain}
.rl-out{margin-top:26px}
@media (max-width:1023px){.rl-bus{display:none}.rl-chain{margin-top:22px}}

/* Relay, refined (2026-10-22): each circle carries the platform's logo, large, with a small Majeste palm on its edge to say Majeste
   does the work there. A hand-off plays in order: the orchestrator line, the connector filling as a dot travels it, the agent lighting
   up, then its card. Your step is solid (no line behind it): your initials, a gold ring that pulses while it waits, a green check once
   approved, and a card with the request, sample emails and one large button. */
.rl-big{width:28px;height:28px;object-fit:contain}
span.rl-big{display:grid;place-items:center;color:var(--ink-2)}
.rl-bdg.mj{background:var(--cream)}
.rl-bdg.mj img{width:15px;height:15px}
.rl-node::after{transition:transform .9s var(--io)}
.rl-node .rl-ic{transition:box-shadow .5s var(--std),scale .6s var(--pop),filter .5s var(--std);filter:grayscale(1) opacity(.55)}
.rl-node.in .rl-ic{filter:none;transition-delay:.75s}
.rl-node>b,.rl-node>span:last-child,.rl-n{transition:opacity .5s var(--std)}
.rl-node.in>b,.rl-node.in>span:last-child,.rl-node.in .rl-n{transition-delay:.75s}
.rl-pk{position:absolute;top:24px;left:-50%;z-index:2;width:8px;height:8px;margin-left:-4px;border-radius:var(--r-round);background:var(--green);box-shadow:0 0 0 4px rgba(var(--green-rgb),.18);opacity:0;pointer-events:none}
.rl-node:first-child .rl-pk{display:none}
.rl-node.in .rl-pk{animation:rl-pk .9s var(--io) both}
@keyframes rl-pk{0%{left:-50%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(50% - 28px);opacity:0}}
.rl-card{transition:opacity .6s var(--std),translate .8s var(--out),scale .8s var(--out);scale:.985}
.rl-card.in{scale:1}
.rl-card [data-at]{transition:opacity .5s var(--std),translate .6s var(--out)}
.rl-node.you .rl-ic{background:var(--white);filter:none}
.rl-me{display:grid;place-items:center;width:42px;height:42px;border-radius:var(--r-round);background:var(--gold-soft);font-weight:var(--fw-semi);font-size:var(--fs-small);letter-spacing:.02em;color:var(--ink)}
.rl-wait{position:absolute;inset:-7px;border-radius:var(--r-round);box-shadow:0 0 0 2px var(--gold);opacity:0;pointer-events:none}
.rl-wait.in{animation:rl-wait 1.8s ease-out infinite}
@keyframes rl-wait{0%{opacity:.85;scale:.92}100%{opacity:0;scale:1.25}}
.rl-ok{position:absolute;inset:7px;display:grid;place-items:center;border-radius:var(--r-round);background:var(--green-deep);color:var(--white);opacity:0;scale:.5;transition:opacity .4s var(--std),scale .5s var(--pop)}
.rl-ok.in{opacity:1;scale:1}
.rl-ok svg{width:18px;height:18px}
.rl-samples{display:flex;align-items:stretch;gap:8px;margin:2px 0 14px}
.rl-sm{flex:1;min-width:0;display:grid;gap:5px;align-content:start;padding:10px;border-radius:var(--r-m);background:var(--paper);box-shadow:var(--hairline-in)}
.rl-sm b{font-weight:var(--fw-medium);font-size:var(--fs-meta);color:var(--ink)}
.rl-sm i{display:block;height:5px;border-radius:var(--r-2xs);background:rgba(var(--ink-rgb),.1)}
.rl-sm i.s{width:62%}
.rl-more{flex:none;align-self:center;padding:0 4px;font-size:var(--fs-meta);color:var(--muted)}
.rl-card .ph-btn.rl-go{height:40px;margin:0 0 10px;padding:0 18px;font-size:var(--fs-small)}
@media (max-width:767px){.rl-pk{display:none}.rl-big{width:22px;height:22px}.rl-sm:nth-child(3){display:none}}
@media (prefers-reduced-motion:reduce){.rl-pk,.rl-wait{display:none}.rl-node .rl-ic{filter:none}.rl-ok,.rl-card{transition:none}}

/* Relay starts from an assignment (2026-10-22): an advisor types who to target into the Orchestrator's bar and presses Run;
   the bar then says each hand-off. The last card is the quarter's results: meetings counted up, filling a calendar, with
   replies and new contacts beside it, held longer before the loop starts over. */
.rl-orch{width:min(780px,100%);align-items:flex-start;gap:14px;padding:14px 14px 14px 16px;border-radius:var(--r-card);background:var(--white);box-shadow:var(--card-shadow),var(--hairline-in)}
.rl-orch .rl-orch-av{margin-top:2px}
.rl-q{flex:1;min-width:0;display:grid;gap:6px}
.rl-q-lbl{display:flex;align-items:center;gap:8px;font-size:var(--fs-meta);color:var(--muted)}
.rl-q-field{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-btn);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h6);color:var(--ink);overflow:hidden;white-space:nowrap}
.rl-q-txt{overflow:hidden;text-overflow:ellipsis}
.rl-caret{flex:none;width:2px;height:22px;margin-left:2px;background:var(--green-deep);animation:rl-caret 1s steps(1) infinite}
@keyframes rl-caret{50%{opacity:0}}
.rl-orch .rl-orch-cap{min-height:20px;font-size:var(--fs-cap);color:var(--ink-2)}
.rl-run{flex:none;align-self:center;margin:18px 0 0}
.rl-card.win{width:min(860px,100%);padding:18px 20px 16px;box-shadow:var(--card-shadow),inset 0 0 0 1px var(--green-soft)}
.rl-win{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:16px 28px;align-items:start}
.rl-win-big b{display:block;font-family:var(--hf);font-weight:var(--hs);font-size:var(--fs-h0);line-height:var(--lh-stat);letter-spacing:var(--ls-stat);color:var(--green-deep);font-variant-numeric:tabular-nums}
.rl-win-big span{display:block;margin-top:6px;font-size:var(--fs-ui);color:var(--ink-2)}
.rl-cal{grid-row:span 2;list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rl-cal li{display:grid;grid-template-columns:72px auto minmax(0,1fr);align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:var(--r-m);background:var(--green-wash);font-size:var(--fs-small)}
.rl-cal time{font-size:var(--fs-cap);font-weight:var(--fw-semi);color:var(--green-deep);font-variant-numeric:tabular-nums}
.rl-cal b{font-weight:var(--fw-medium);color:var(--ink)}
.rl-cal span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.rl-cal li.more{display:block;min-height:0;padding:6px 12px;background:none;font-size:var(--fs-cap);color:var(--muted)}
.rl-win-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.rl-win-stats div{padding:10px 12px;border-radius:var(--r-xs);background:var(--paper);box-shadow:var(--hairline-in)}
.rl-win-stats b{display:block;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h5);line-height:var(--lh-stat);font-variant-numeric:tabular-nums;color:var(--ink)}
.rl-win-stats span{display:block;margin-top:2px;font-size:var(--fs-meta);line-height:var(--lh-ui);color:var(--muted)}
/* tablets and phones: the win stacks, so the three counts get the full width */
@media (max-width:1023px){.rl-win{grid-template-columns:minmax(0,1fr)}.rl-cal{grid-row:auto}}
@media (max-width:767px){
  .rl-orch{flex-wrap:wrap}
  .rl-orch>.rl-q{flex:1 1 calc(100% - 54px)}
  .rl-q-field{font-size:var(--fs-ui);white-space:normal;min-height:52px;padding:8px 12px}
  .rl-run{margin:0 0 0 54px}
  .rl-win-stats{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){.rl-caret{animation:none}}

/* Relay, the Orchestrator's path (2026-10-22): one line from the bar, down and left into the Scout, filled in order when Run is
   pressed (stem, run left, drop). The work then travels the chain's own connectors. The Orchestrator itself, a small palm with a
   gold ring, rides the path down to the Scout and then sits above whichever agent is working, sliding over from the last one. */
.rl-stem,.rl-hl{position:absolute;z-index:1;background:var(--green);pointer-events:none}
.rl-stem{top:0;left:50%;width:2px;height:13px;margin-left:-1px;transform:scaleY(0);transform-origin:50% 0;transition:transform .5s var(--io)}
.rl-hl{top:12px;left:6.25%;width:43.75%;height:2px;transform:scaleX(0);transform-origin:100% 50%;transition:transform .7s var(--io)}
.rl-stem.in{transform:scaleY(1)}
.rl-hl.in{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){.rl-stem,.rl-hl,.rl-d0::after{transition:none}.rl-mgr{animation:none}.rl-mgr span::after{animation:none}}

.rl-d0{position:absolute;top:12px;left:6.25%;width:2px;height:22px;margin-left:-1px;background:var(--line-2)}
.rl-d0::after{content:"";position:absolute;inset:0;background:var(--green);transform:scaleY(0);transform-origin:50% 0;transition:transform .4s var(--io)}
.rl-d0.in::after{transform:scaleY(1)}
.rl-mgr{position:absolute;top:-40px;left:50%;z-index:3;margin-left:-15px;opacity:0;pointer-events:none}
.rl-mgr.in{opacity:1;animation:rl-mgr-move .8s var(--io) both}
.rl-mgr.first.in{animation-name:rl-mgr-drop;animation-duration:1.4s}
@keyframes rl-mgr-move{from{left:-50%}to{left:50%}}
@keyframes rl-mgr-drop{from{top:-96px;left:400%;opacity:0}35%{top:-60px;left:400%;opacity:1}to{top:-40px;left:50%}}
.rl-mgr span{position:relative;display:grid;place-items:center;width:30px;height:30px;padding:6px;border-radius:var(--r-round);background:var(--cream);box-shadow:0 0 0 2px var(--gold-soft),var(--card-shadow)}
.rl-mgr span img{width:100%;height:100%;object-fit:contain}
.rl-mgr span::after{content:"";position:absolute;inset:-5px;border-radius:var(--r-round);box-shadow:0 0 0 1px rgba(var(--gold-soft-rgb),.95);animation:phero-pulse 2.4s ease-in-out infinite}
@media (max-width:1023px){.rl-mgr{display:none}}

/* ---------- Audience pages (mid-size-agencies.html first; TMCs and Enterprise TMCs follow). They differ from the area pages on
   purpose: a centered headline over three photos (.ahero-col), the week as five day cards lit one day at a time (.awc), the
   team's week before and after with the hours back per person (.aroom), photo cards for the people it helps (.apeople), the
   three steps beside a photo (.asteps, on the .wt tabs) and a fit check (.afit). Johan picked Collage and Cards (2026-10-26). ---------- */
.ahero{padding-bottom:72px}
.ahero-colhead{display:flex;flex-direction:column;align-items:center;text-align:center}
.ahero-colhead .eyebrow{margin:0 0 20px}
.ahero-colhead h1{max-width:17ch}
.ahero-colhead .phead-links{justify-content:center}
.ahero-colhead .hero-sub{margin:22px auto 0;max-width:40em}
.ahero-mosaic{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);gap:var(--grid-gap);align-items:end;margin-top:56px}
.ahero-mosaic figure{position:relative;margin:0}
.ahero-mosaic>figure>img{display:block;width:100%;height:auto;object-fit:cover;border-radius:var(--r-xl);background:var(--line-2)}
.ahero-mosaic .side>img{aspect-ratio:4/5}
.ahero-mosaic .side:first-child{margin-bottom:48px}
.ahero-mosaic .mid>img{aspect-ratio:4/3.4}
.ahero-tile{position:absolute;left:50%;bottom:-104px;translate:-50% 0;width:min(360px,82%);border-radius:var(--r-panel);background:var(--white);padding:14px 18px 6px;box-shadow:var(--lift-shadow);transition:opacity var(--t-enter) var(--std)}
.ahero-tile .db-h b{font-weight:var(--fw-medium);font-size:var(--fs-small)}
.ahero-tile .prow[data-at],.awc-it{opacity:0;translate:0 6px;transition:opacity var(--t-enter) var(--std),translate var(--t-enter) var(--out)}
.ahero-tile .prow[data-at].in,.awc-it.in{opacity:1;translate:0 0}
.ahero-sys{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin-top:144px;font-size:var(--fs-cap);color:var(--muted)}
.ahero-sys>span{margin-right:4px}
.phero-av.sm{width:28px;height:28px;padding:6px}
.sec-head.left .h2.wide{max-width:24ch}

.awc{border-radius:var(--r-xl);background:var(--g-mesh);padding:16px 20px 20px}
.awc-top{display:flex;align-items:center;gap:12px;padding:6px 4px 16px;font-size:var(--fs-small);color:var(--ink)}
.awc-cap{display:grid;flex:1;min-width:0}
.awc-cap span{grid-area:1/1;opacity:0;transition:opacity var(--t-enter) var(--std)}
.awc-cap span.on{opacity:1}
.awc-cap b{font-weight:var(--fw-medium)}
.awc-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.awc-day{position:relative;display:flex;flex-direction:column;min-width:0;border-radius:var(--r-panel);background:var(--white);padding:18px 16px 16px;box-shadow:var(--panel-shadow);opacity:.62;transition:opacity var(--t-enter-2) var(--std),translate var(--t-enter-2) var(--out),box-shadow var(--t-enter-2) var(--std)}
.awc-day:has(>.awc-on.in){opacity:1;translate:0 -6px;box-shadow:var(--lift-shadow)}
.awc-day:has(.awc-done.in){opacity:1}
.awc-on{position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 var(--r-2xs) var(--r-2xs);background:var(--gold);opacity:0;transition:opacity var(--t-enter) var(--std)}
.awc-on.in{opacity:1}
.awc-h{display:flex;align-items:center;justify-content:space-between;min-height:22px;margin-bottom:4px}
.awc-h .eyebrow{margin:0}
.awc-done{display:inline-flex;opacity:0;scale:.6;transition:opacity var(--t-fast) var(--std),scale var(--t-draw) var(--pop)}
.awc-done.in{opacity:1;scale:1}
.awc-done .db-ck{width:20px;height:20px}
.awc-day .h6{margin:0 0 10px;font-weight:var(--fw-medium)}
.awc-logos{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.awc-line{margin:0 0 8px;font-size:var(--fs-cap);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty}
.awc-it{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 8px;align-items:center;padding:10px 0;border-top:1px solid var(--line-2);font-size:var(--fs-row-sm);line-height:var(--lh-ui)}
.awc-it b{grid-column:1/-1;font-weight:var(--fw-medium);color:var(--ink)}
.awc-it>span:not(.tag){color:var(--muted);font-variant-numeric:tabular-nums}
.awc-day .awk-keep{margin-top:auto;padding-top:14px;font-size:var(--fs-cap)}
.awk-keep{display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2)}
.awk-keep .db-ck{margin-top:-1px}
.awk-keep b{font-weight:var(--fw-medium);color:var(--ink)}
.awk-foot{margin-top:32px}

.aroom{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--hairline-in);overflow:hidden}
.aroom-in{display:flex;flex-direction:column;gap:28px;padding:44px 40px;border-right:1px solid var(--line-2)}
.aroom-in label,.aroom-l{display:block;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2)}
.aroom-in .dl-field{margin-top:10px}
.aroom-step{display:inline-flex;align-items:center;gap:4px;margin-top:10px;border-radius:var(--r-btn);background:var(--white);box-shadow:var(--hairline-in);padding:4px}
.aroom-step button{appearance:none;width:var(--ctl-h);height:var(--ctl-h);border:0;border-radius:var(--r-xs);background:none;font:inherit;font-size:var(--fs-h5);color:var(--ink);cursor:pointer;transition:background-color var(--t-hover) var(--std)}
.aroom-step button:hover{background:var(--hover-fill-soft)}
.aroom-step button:focus-visible{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset-tight)}
.aroom-step output{min-width:48px;text-align:center;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h4);font-variant-numeric:tabular-nums}
.aroom-out{padding:44px 44px 36px;background:var(--white)}
.aroom-out>.eyebrow{margin:0 0 18px}
.aroom-bars{display:grid;gap:12px;margin:0 0 32px}
.aroom-bar{display:grid;grid-template-columns:104px minmax(0,1fr);gap:16px;align-items:center;font-size:var(--fs-small);color:var(--ink-2)}
.aroom-track{position:relative;display:flex;height:36px;border-radius:var(--r-s);overflow:hidden;background:var(--line-2)}
.aroom-track i{display:flex;align-items:center;min-width:0;padding:0 12px;font-style:normal;font-size:var(--fs-cap);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;transition:flex-basis var(--t-enter-2) var(--out)}
.aroom-track .all{flex:1 1 100%;background:rgba(var(--gold-soft-rgb),.55);color:var(--ink)}
.aroom-track .left{background:rgba(var(--gold-soft-rgb),.55);color:var(--ink)}
.aroom-track .back{flex:1 1 auto;background:var(--green-wash);color:var(--green-deep);box-shadow:inset 0 0 0 1.5px rgba(var(--green-deep-rgb),.25);border-radius:0 var(--r-s) var(--r-s) 0;justify-content:flex-end}
.aroom-sum{margin:0;font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--ink);text-wrap:balance}
.aroom-sum b{font-weight:var(--hs)}
.aroom-seats{display:flex;flex-wrap:wrap;gap:20px 8px;list-style:none;margin:24px 0 0;padding:0}
.aroom-seats li{display:flex;flex-direction:column;align-items:center;gap:2px;width:100px;font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--green-deep);text-align:center;animation:ph-in var(--t-reveal) var(--out) both;animation-delay:calc(var(--i,0) * var(--stagger-row))}
.aroom-seats .seat{position:relative;width:64px;height:64px;margin-bottom:8px;border-radius:var(--r-round);background:var(--line-2);box-shadow:0 0 0 3px var(--white),0 0 0 4.5px var(--green-soft)}
.aroom-seats .seat img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}
.aroom-seats .role{font-size:var(--fs-meta);font-weight:var(--fw-regular);line-height:var(--lh-tight);color:var(--muted)}
.aroom-seats li.more{justify-content:center;height:64px;width:auto;color:var(--muted)}
.aroom-so{margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line-2);font-size:var(--fs-row);line-height:var(--lh-list);color:var(--ink)}
.aroom-so b{font-weight:var(--fw-medium);color:var(--green-deep)}
.aroom .db-fn{margin:16px 0 0;max-width:60ch}
.aroom .db-fn a{color:inherit}

.apeople{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap)}
.aperson{min-width:0}
.aperson>img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-xl);background:var(--line-2)}
.aperson>div{padding:20px 4px 0}
.aperson .h5{margin:0 0 8px}
.aperson .body-s{margin:0;color:var(--ink-2);text-wrap:pretty}
.aperson .awk-keep{margin-top:14px}
/* Two places to start (2026-10-30): Operations and Sales and marketing side by side, written for each structure. Each card
   carries a short Sample of its first jobs that plays once when it comes on screen, the team's part and a link to the area page */
.sec-head+.astart{margin-top:var(--head-gap)}
.astart{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap)}
.astart-card{display:flex;flex-direction:column;align-items:flex-start;min-width:0;border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--hairline-in);padding:40px}
.astart-card .eyebrow{margin:0 0 12px}
.astart-card .h4{margin:0 0 10px}
.astart-card>.body-s{margin:0;max-width:44ch;color:var(--ink-2);text-wrap:pretty}
.astart-pic{align-self:stretch;margin-top:24px;border-radius:var(--r-panel);background:var(--white);box-shadow:var(--hairline-in);padding:14px 18px 6px}
.astart-pic .prow[data-at]{opacity:0;translate:0 6px;transition:opacity var(--t-reveal) var(--std),translate var(--t-reveal) var(--out)}
.astart-pic .prow[data-at].in{opacity:1;translate:0 0}
.astart-card .lk-cta{margin-top:auto;padding-top:24px}
@media (prefers-reduced-motion:reduce){.astart-pic .prow[data-at]{opacity:1;translate:0 0;transition:none}}

.asteps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.wt-tabs.asteps-list{display:flex;flex-direction:column;gap:8px;margin:0;border:0}
.wt-tab.astep{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:start;padding:22px 24px;border-radius:var(--r-l);transition:color var(--t-hover) var(--std),background-color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std)}
.wt-tab.astep[aria-selected="true"]{background:var(--paper);box-shadow:var(--hairline-in)}
.wt-tab.astep i{left:84px;right:24px;bottom:10px}
.astep-n{font-family:var(--hf);font-weight:var(--hfw);font-size:var(--fs-h4);line-height:var(--lh-tight);color:var(--gold-deep)}
.astep-tx b{display:block;font-size:var(--fs-h6);font-weight:var(--fw-medium);line-height:var(--lh-h6);color:var(--ink)}
.astep-tx span{display:block;margin-top:6px;font-size:var(--fs-ui);font-weight:var(--fw-regular);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty}

.afit{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--grid-gap)}
.afit-main{border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--hairline-in);padding:48px}
.afit-main .h2{margin:0 0 28px}
.afit-list{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.afit-ck{display:flex;align-items:center;gap:14px;min-height:var(--ctl-h-lg);padding:12px 16px;border-radius:var(--r-l);background:var(--white);box-shadow:var(--hairline-in);font-size:var(--fs-row);line-height:var(--lh-ui);color:var(--ink);cursor:pointer;transition:background-color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std)}
.afit-ck:hover{background:var(--hover-fill-soft)}
.afit-ck input{position:absolute;opacity:0;width:1px;height:1px}
.afit-box{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-xs);box-shadow:inset 0 0 0 1.5px var(--ctl-line);color:var(--white);transition:background-color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std)}
.afit-box svg{opacity:0;scale:.6;transition:opacity var(--t-fast) var(--std),scale var(--t-draw) var(--pop)}
.afit-ck input:checked+.afit-box{background:var(--green-deep);box-shadow:none}
.afit-ck input:checked+.afit-box svg{opacity:1;scale:1}
.afit-ck input:focus-visible+.afit-box{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset-tight)}
.afit-res{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:28px}
.afit-res p{margin:0;font-size:var(--fs-ui);color:var(--ink-2);transition:color var(--t-hover) var(--std)}
.afit.all .afit-res p{color:var(--green-deep);font-weight:var(--fw-medium)}
.afit-signs{display:flex;flex-direction:column;border-radius:var(--r-xl);background:var(--cream);padding:48px}
.afit-signs>img{display:block;width:100%;height:auto;aspect-ratio:4/3;margin-top:auto;object-fit:cover;border-radius:var(--r-l);background:var(--line-2)}
.afit-signs ul+img{margin-top:32px}
.afit-signs .h5{margin:0 0 20px}
.afit-signs ul{display:grid;gap:14px;list-style:none;margin:0 0 32px;padding:0}
.afit-signs li{position:relative;padding-left:20px;font-size:var(--fs-row);line-height:var(--lh-list);color:var(--ink)}
.afit-signs li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:var(--r-round);background:var(--gold)}

/* How we start: an animation for each step (2026-10-26) beside the numbered steps, on the .wt tabs (Johan picked Tabs). */
.ast-vis{display:grid;place-items:center;min-height:400px;border-radius:var(--r-xl);background:var(--g-mesh);padding:40px}
.ast-card{width:min(440px,100%);border-radius:var(--r-panel);background:var(--white);padding:16px 20px 14px;box-shadow:var(--panel-shadow);transition:opacity var(--t-enter) var(--std)}
.ast-card .db-h b{font-weight:var(--fw-medium);font-size:var(--fs-small)}
.ast-card .prow[data-at],.ast-card .ph-btn{opacity:0;translate:0 6px;transition:opacity var(--t-enter) var(--std),translate var(--t-enter) var(--out),background var(--t-hover) var(--std),color var(--t-hover) var(--std),scale var(--t-fast) var(--std)}
.ast-card .prow[data-at].in,.ast-card .ph-btn.in{opacity:1;translate:0 0}
.ast-card .msum{margin-top:10px;padding:12px 0 4px}
.ast-card .ph-btn{margin-top:14px}
.ast-bars{display:grid;gap:10px;margin:14px 0 4px}
.ast-bar{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:center;font-size:var(--fs-cap);color:var(--ink-2);opacity:0;transition:opacity var(--t-enter) var(--std)}
.ast-bar.in{opacity:1}
.ast-bar i{display:flex;align-items:center;height:30px;width:0;border-radius:var(--r-xs);background:rgba(var(--gold-soft-rgb),.55);overflow:hidden;font-style:normal}
.ast-bar.in i{width:var(--w);transition:width 1.2s var(--out)}
.ast-bar.now i{background:var(--green-wash);box-shadow:inset 0 0 0 1.5px rgba(var(--green-deep-rgb),.25);color:var(--green-deep)}
.ast-bar b{padding:0 10px;font-size:var(--fs-cap);font-weight:var(--fw-medium);white-space:nowrap}
.wt-panel.ast-pane{display:block}
.wt-panel.ast-pane[hidden]{display:none}

/* audience hero scenes (2026-10-26): one animation per hero, in the panel on the middle photo; the photos stay still. Mid-size:
   the Monday rows and one approval. TMCs: branch bars and a misfiled ticket. Enterprise: the systems map, the rollout or the
   review, picked in the Options pill. Security sections (.asec): a Sample card beside four plain lines, then the standards we build to. */
.ahero-tile.wide{width:min(430px,92%)}
.ahero-ask{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 4px;padding:10px 12px;border-radius:var(--r-s);background:rgba(var(--gold-soft-rgb),.28);font-size:var(--fs-cap);font-weight:var(--fw-medium);opacity:0;transition:opacity var(--t-enter) var(--std)}
.ahero-ask.in{opacity:1}
.ahero-ask .ph-btn{margin:0;height:30px;padding:0 11px}
.arev{position:relative;list-style:none;margin:12px 0 4px;padding:0}
.arev::before{content:"";position:absolute;left:5px;top:14px;bottom:14px;width:1.5px;background:var(--line-2)}
.arev li{position:relative;display:grid;grid-template-columns:12px 92px minmax(0,1fr) auto;gap:10px;align-items:center;min-height:42px;font-size:var(--fs-cap);opacity:.35;transition:opacity var(--t-enter) var(--std)}
.arev li.in{opacity:1}
.arev li>i{width:12px;height:12px;border-radius:var(--r-round);background:var(--white);box-shadow:inset 0 0 0 1.5px var(--ctl-line);transition:background-color var(--t-enter) var(--std),box-shadow var(--t-enter) var(--std)}
.arev li.in>i{background:var(--green);box-shadow:none}
.arev b{font-weight:var(--fw-medium)}
.arev li>span{color:var(--muted)}
.arev .tag{display:inline-flex;align-items:center;height:var(--tag-h);padding:0 7px;border-radius:var(--r-tag);background:var(--gold-soft);color:var(--ink);font-size:var(--fs-chip-s);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase}
.arev .tag.g{background:var(--green-wash);color:var(--green-deep)}
.ahero-tile .prow b{font-weight:var(--fw-medium)}
.abrs{display:grid;gap:8px;margin:12px 0 6px}
.abr{display:grid;grid-template-columns:64px minmax(0,1fr) 92px;gap:10px;align-items:center;font-size:var(--fs-cap);opacity:0;transition:opacity var(--t-enter) var(--std)}
.abr.in{opacity:1}
.abr b{font-weight:var(--fw-medium)}
.abr i{height:8px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden}
.abr s{display:block;height:100%;width:0;border-radius:inherit;background:var(--green)}
.abr.in s{width:100%;transition:width 1.6s var(--out)}
.abr>span{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.abr-move{display:flex;align-items:center;gap:10px;margin:8px 0 2px;padding:9px 10px;border-radius:var(--r-s);background:rgba(var(--gold-soft-rgb),.28);font-size:var(--fs-cap);opacity:0;transition:opacity var(--t-enter) var(--std)}
.abr-move.in{opacity:1}
.abr-move>span:first-child{font-weight:var(--fw-medium);white-space:nowrap}
.abr-path{position:relative;flex:1;display:flex;justify-content:space-between;align-items:center;min-width:0;color:var(--muted)}
.abr-path em{font-style:normal}
.abr-path i{position:absolute;left:52px;right:52px;top:50%;height:1.5px;background:var(--gold-soft)}
.abr-path i::after{content:"";position:absolute;top:-3.5px;left:0;width:8px;height:8px;border-radius:var(--r-round);background:var(--gold)}
.abr-move.in .abr-path i::after{animation:abr-go 1.4s var(--soft) .3s both}
@keyframes abr-go{from{left:0}to{left:calc(100% - 8px)}}
.abr-move .tag{display:inline-flex;align-items:center;height:var(--tag-h);padding:0 7px;border-radius:var(--r-tag);background:var(--green-wash);color:var(--green-deep);font-size:var(--fs-chip-s);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase}

.asec{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.asec-vis{display:grid;grid-template-columns:minmax(0,1fr);place-items:center;min-height:400px;border-radius:var(--r-xl);background:var(--g-mesh);padding:40px}
.asec-card{width:min(440px,100%);border-radius:var(--r-panel);background:var(--white);padding:16px 20px 12px;box-shadow:var(--panel-shadow)}
.asec-card .db-h b{font-weight:var(--fw-medium);font-size:var(--fs-small)}
.asec-card .prow[data-at],.amx-r[data-at],.amx-log,.asec-card .acheck[data-at]{opacity:0;translate:0 6px;transition:opacity var(--t-enter) var(--std),translate var(--t-enter) var(--out)}
.asec-card .prow[data-at].in,.amx-r[data-at].in,.amx-log.in,.asec-card .acheck[data-at].in{opacity:1;translate:0 0}
.asec-list{display:grid;gap:28px;list-style:none;margin:0;padding:0}
.asec-list li{display:flex;align-items:flex-start;gap:14px}
.asec-list .db-ck{margin-top:2px}
.asec-list .h6{margin:0 0 4px;font-weight:var(--fw-medium)}
.asec-list p{margin:0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty}
.asec-seals{margin-top:48px}
.amx{display:grid;gap:6px;margin:12px 0 10px}
.amx-r{display:grid;grid-template-columns:72px repeat(3,minmax(0,1fr));gap:6px;align-items:center;font-size:var(--fs-cap)}
.amx-r b{font-weight:var(--fw-medium)}
.amx-r>span{display:flex;align-items:center;justify-content:center;height:30px;border-radius:var(--r-xs);background:rgba(var(--gold-soft-rgb),.32);font-size:var(--fs-chip);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase}
.amx-r>span.g{background:var(--green-wash);color:var(--green-deep)}
.amx-r>span.n{background:var(--line-2);color:var(--muted)}
.amx-h>span{height:auto;background:none;font-size:var(--fs-meta);font-weight:var(--fw-medium);letter-spacing:0;text-transform:none;color:var(--muted)}
.amx-log{display:flex;gap:10px;padding-top:10px;border-top:1px solid var(--line-2);font-size:var(--fs-meta);color:var(--ink-2)}
.amx-log time{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}

/* enterprise depth: the stack by layer (.alay), building row by row under Majeste, and how large TMCs run (.acons) */
.alay{border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--hairline-in);padding:24px 28px 12px}
.alay-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;font-size:var(--fs-small)}
.alay-top b{font-weight:var(--fw-medium)}
.alay ol{position:relative;list-style:none;margin:0;padding:0}
.alay li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 150px;gap:20px;align-items:center;padding:18px 0;border-top:1px solid var(--line-2);opacity:0;translate:0 8px;transition:opacity var(--t-enter) var(--std),translate var(--t-enter) var(--out)}
.alay li.in{opacity:1;translate:0 0}
.alay-t .h6{margin:0 0 4px;font-weight:var(--fw-medium)}
.alay-t p{margin:0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty}
.alay-l{display:flex;flex-wrap:wrap;gap:8px}
.alay-l .db-lg{height:32px;padding:0 10px}
.alay li>.tag{justify-self:end;display:inline-flex;align-items:center;height:var(--tag-h);padding:0 8px;border-radius:var(--r-tag);background:var(--gold-soft);color:var(--ink);font-size:var(--fs-chip-s);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;white-space:nowrap}
.alay li>.tag.g{background:var(--green-wash);color:var(--green-deep)}
.alay+.sysg-foot{margin-top:24px}
.acons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);list-style:none;margin:0;padding:0}
.acons li{border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--hairline-in);padding:28px}
.acons .h6{margin:0 0 8px;font-weight:var(--fw-medium)}
.acons p{margin:0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty}

/* Built for the way large TMCs run: Visual cards (Johan's pick, 2026-10-26), each point with a small Sample picture (.acv) on top */
.acv{display:grid;place-items:center;border-radius:var(--r-xl);background:var(--g-mesh);padding:32px}
.acv.sm{min-height:0;padding:14px;border-radius:var(--r-l);margin:-8px -8px 22px}
.acv-card{width:min(420px,100%);min-height:196px;border-radius:var(--r-panel);background:var(--white);padding:14px 16px 10px;box-shadow:var(--panel-shadow);transition:opacity var(--t-enter) var(--std)}
.acv.sm .acv-card{width:100%;padding:10px 12px 8px}
.acv-card .prow[data-at],.acv-sys,.acv-same,.acv-arrow,.acv-gds,.acv-ndc>div{opacity:0;translate:0 6px;transition:opacity var(--t-enter) var(--std),translate var(--t-enter) var(--out)}
.acv-card .prow[data-at].in,.acv-sys.in,.acv-same.in,.acv-arrow.in,.acv-gds.in,.acv-ndc>div.in{opacity:1;translate:0 0}
.acv.sm .prow{min-height:38px;padding:7px 0;font-size:var(--fs-meta)}
.acv-card .msum .tag{display:inline-flex;align-items:center;height:var(--tag-h);padding:0 7px;border-radius:var(--r-tag);background:var(--gold-soft);color:var(--ink);font-size:var(--fs-chip-s);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase}
.acv-merge{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.acv-sys{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--r-s);background:var(--paper);box-shadow:var(--hairline-in);font-size:var(--fs-cap)}
.acv-sys b{font-weight:var(--fw-medium)}
.acv-sys span,.acv-same span{color:var(--muted)}
.acv-arrow{grid-column:1/-1;position:relative;height:22px}
.acv-arrow i{position:absolute;left:25%;right:25%;top:4px;height:12px;border:1.5px solid var(--gold-soft);border-top:0;border-radius:0 0 10px 10px}
.acv-arrow i::after{content:"";position:absolute;left:50%;bottom:-8px;width:1.5px;height:8px;background:var(--gold-soft)}
.acv-same{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-s);background:var(--green-wash);font-size:var(--fs-cap)}
.acv-same b{display:block;font-weight:var(--fw-medium);color:var(--green-deep)}
.acv-gds{display:grid;grid-template-columns:96px minmax(0,1fr) 72px;gap:10px;align-items:center;padding:7px 0;font-size:var(--fs-meta);color:var(--muted)}
.acv-gds .db-lg{width:96px}
.acv-gds i{height:8px;border-radius:var(--r-pill);background:var(--line-2);overflow:hidden}
.acv-gds s{display:block;height:100%;width:0;border-radius:inherit;background:var(--green)}
.acv-gds.in s{width:var(--w);transition:width 1.4s var(--out)}
.acv-gds>span{text-align:right;font-variant-numeric:tabular-nums}
.acv-ndc{display:flex;align-items:center;gap:6px;margin:8px 0 6px}
.acv-ndc>div{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0;padding:10px;border-radius:var(--r-s);background:var(--paper);box-shadow:var(--hairline-in);font-size:var(--fs-meta)}
.acv-ndc>div span{color:var(--muted)}
.acv-ndc>div b{font-weight:var(--fw-medium);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acv-ndc>div.ok{background:var(--green-wash);box-shadow:none;color:var(--green-deep)}
.acv-ndc>i{flex:none;width:18px;height:1.5px;background:var(--gold-soft);opacity:0;transition:opacity var(--t-enter) var(--std)}
.acv-ndc>i.in{opacity:1}
.acv-dots{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:10px 0 6px}
.acv-dots i{aspect-ratio:1/1;border-radius:var(--r-s);background:var(--line-2);transition:background-color var(--t-enter) var(--std)}
.acv-dots i.in{background:var(--green-soft)}
.acons.vis li{display:flex;flex-direction:column;padding:20px 20px 24px}

@media (max-width:1023px){
  .asteps,.afit,.asec{grid-template-columns:minmax(0,1fr);gap:40px}
  .acons{grid-template-columns:repeat(2,minmax(0,1fr))}
      .alay li{grid-template-columns:minmax(0,1fr) auto;gap:12px 20px}
  .alay-l{grid-row:2;grid-column:1/-1}
  .awc-days{grid-template-columns:repeat(5,minmax(248px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-top:8px;margin-top:-8px}
  .awc-days::-webkit-scrollbar{display:none}
  .awc-day{scroll-snap-align:start}
  .aroom{grid-template-columns:minmax(0,1fr)}
  .aroom-in{flex-direction:row;flex-wrap:wrap;gap:24px 40px;border-right:0;border-bottom:1px solid var(--line-2)}
  .apeople{grid-template-columns:repeat(2,minmax(0,1fr))}
  .astart{grid-template-columns:minmax(0,1fr)}
  .astart-card{padding:32px}
  /* the hero's middle photo narrows, so its card reaches past it over the side photos instead of wrapping its title */
  .ahero-mosaic .mid{z-index:2}
  .ahero-tile{width:min(360px,128%)}
  .ahero-tile.wide{width:min(430px,140%)}
  /* the review card sits in the mosaic's narrow middle column: each step's detail goes under its name */
  .arev li{grid-template-columns:12px minmax(0,1fr) auto;row-gap:1px;padding:6px 0}
  .arev li>i{grid-row:1/3}
  .arev li>span{grid-column:2;grid-row:2}
  .arev li>.tag{grid-column:3;grid-row:1/3}
  /* the scale cards run two across: a row's detail goes under its name */
  .acons .prow:has(>.pm){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px}
  .acons .prow:has(>.pm)>.pm{grid-column:1;grid-row:2;white-space:normal}
  .acons .prow:has(>.pm)>.tag{grid-column:2;grid-row:1/3;align-self:center}
  /* one column: the showcase cards fill their stage */
  .ast-vis,.asec-vis{padding:28px}
  .ast-card,.asec-card{width:100%}
}
@media (max-width:767px){
  .ahero{padding-bottom:48px}
  .ahero-mosaic{grid-template-columns:minmax(0,1fr);margin-top:40px}
  .ahero-mosaic .side{display:none}
  .ahero-tile,.ahero-tile.wide{position:relative;left:auto;bottom:auto;width:auto;margin:-48px 12px 0;translate:none}
  .ahero-sys{margin-top:32px}
  .awc{padding:12px 12px 14px}
  .awc-top{padding:4px 4px 18px}
  .aroom-in,.aroom-out,.afit-main,.afit-signs{padding:28px 20px}
  .aroom-in{flex-direction:column}
  .aroom-bar{grid-template-columns:minmax(0,1fr);gap:6px}
  .apeople{grid-template-columns:minmax(0,1fr)}
  .astart-card{padding:24px}
  .aperson>img{aspect-ratio:4/3}
  .wt-tab.astep{padding:18px 16px;grid-template-columns:36px minmax(0,1fr)}
  .wt-tab.astep i{left:64px;right:16px}
  .ast-vis{min-height:0;padding:16px}
  .ast-card .db-h .db-lg{display:none}
  .asec-vis{min-height:0;padding:16px}
  .asec-card .prow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px}
  .asec-card .prow .pm{grid-row:2;white-space:normal}
  .asec-card .prow .tag{grid-column:2;grid-row:1/3}
  .acons{grid-template-columns:minmax(0,1fr)}
  .acv{min-height:0;padding:16px}
  .acv-gds{grid-template-columns:80px minmax(0,1fr) 64px}
  .acv-gds .db-lg{width:80px}
    .alay{padding:18px 16px 6px}
  .alay li{grid-template-columns:minmax(0,1fr)}
  .alay li>.tag{justify-self:start;grid-row:3}
}
@media (prefers-reduced-motion:reduce){.acv-card .prow[data-at],.acv-sys,.acv-same,.acv-arrow,.acv-gds,.acv-ndc>div,.acv-ndc>i{opacity:1;translate:0 0;transition:none}.acv-gds s{width:var(--w);transition:none}.ahero-ask,.arev li{opacity:1;transition:none}.alay li,.abr,.abr-move,.amx-r[data-at],.amx-log,.asec-card .prow[data-at]{opacity:1;translate:0 0;scale:1;transition:none}.abr s{width:100%;transition:none}.abr-path i::after{animation:none;left:calc(100% - 8px)}.ast-card .prow[data-at],.ast-card .ph-btn,.ast-bar{opacity:1;translate:0 0;transition:none}.ast-bar i{width:var(--w);transition:none}.aroom-seats li{animation:none}.ahero-tile .prow[data-at],.awc-it{opacity:1;translate:0 0;transition:none}.awc-day{opacity:1;transition:none}.aroom-track i{transition:none}}

/* ---------- Insights (2026-10-26): the hub (insights.html), the post template (insights-{slug}.html, from dev/build/insights.py)
   and the tool previews. The hub and the posts open on the cream Mesh head, like the estimator, so the reading pages feel apart
   from the photo-led audience pages. ---------- */
.phead.ins-head,.phead.post-head{overflow:clip;padding:calc(var(--nav-h) + 56px) 0 56px}
.ins-head-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.ins-head-tx .h1{margin:14px 0 0;max-width:15ch}
.ins-head-tx .hero-sub{margin:20px 0 0;max-width:40ch}
.ins-card-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--fs-meta);color:var(--muted)}
.ins-card-meta span+span::before{content:"·";margin-right:14px}

/* the tools row: a still of each tool on the Mesh, then its name and line */
.ins-tool-vis{display:grid;place-items:center;min-height:212px;padding:28px;border-radius:var(--r-tile);background:var(--g-mesh)}
.ins-tool-go{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px;font-weight:var(--fw-medium);color:var(--green-deep)}
.ins-tool-go .ic{transition:translate var(--t-hover) var(--out)}
a:hover .ins-tool-go .ic{translate:3px 0}
.tmini{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:min(260px,100%);padding:16px 18px;border-radius:var(--r-panel);background:var(--white);box-shadow:var(--panel-shadow);font-size:var(--fs-meta);color:var(--ink-2)}
.tmini>b{font-family:var(--hf);font-weight:var(--fw-light);font-size:var(--fs-h4);line-height:var(--lh-stat);color:var(--ink);font-variant-numeric:tabular-nums}
.tmini-l{font-size:var(--fs-mini);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;color:var(--ink-2)}
.tmini-n b{color:var(--green-deep);font-weight:var(--fw-semi)}
.tmini-bar,.tmini-line{position:relative;display:block;width:100%;height:8px;border-radius:var(--r-pill);background:var(--line-2)}
.tmini-bar i,.tmini-line i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--green)}
.tmini-line i{background:var(--gold-soft)}
.tmini-line s{position:absolute;top:50%;left:var(--at);width:14px;height:14px;translate:-50% -50%;border-radius:var(--r-round);background:var(--white);box-shadow:inset 0 0 0 3px var(--gold)}
.tmini-chips{display:flex;flex-wrap:wrap;gap:6px}
.tmini-chips span{padding:4px 10px;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--ctl-line);color:var(--ink)}
.tmini-chips .on{background:var(--green-deep);color:var(--cream);box-shadow:none}
.tmini-row{display:flex;align-items:center;gap:8px;color:var(--ink)}

/* post cards: the topic, the question, the summary, then who it's for and the read time */
.ins-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);list-style:none;margin:0;padding:0}
.ins-card[hidden]{display:none}
.ins-card-a{display:flex;flex-direction:column;overflow:hidden;height:100%;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);color:var(--ink);transition:background-color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std),translate var(--t-move) var(--out)}
.ins-card-a:hover{background:var(--white);box-shadow:var(--card-shadow);translate:0 -2px}
.ins-card-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:scale var(--t-enter) var(--out)}
.ins-card-a:hover .ins-card-img{scale:1.03}
.ins-card-tx{display:flex;flex:1;flex-direction:column;gap:10px;padding:var(--card-pad)}
.ins-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:var(--chip-h)}
.ins-card-top .eyebrow{color:var(--green-deep)}
.ins-card-h{margin:4px 0 0;text-wrap:balance}
.ins-card-p{font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty}
.ins-card-tx .ins-card-meta{margin-top:auto;padding-top:8px}

.ins-empty{margin:24px 0 0;font-size:var(--fs-ui);color:var(--muted)}

/* the method, pinned: the words beside the mid case drawn as two bars */
.ins-method{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;border-radius:var(--r-xl);background:var(--g-mesh);padding:56px;color:var(--ink)}
.ins-method::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);opacity:var(--grain-o);mix-blend-mode:multiply;pointer-events:none}
.ins-method-tx{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.ins-method-tx .h2{display:block;max-width:18ch;text-wrap:balance}
.ins-method-tx .body-m{max-width:44ch;color:var(--ink)}
.ins-method-vis{display:grid;gap:14px;border-radius:var(--r-panel);background:var(--white);box-shadow:var(--panel-shadow);padding:24px 26px}
.imv-row{display:grid;grid-template-columns:96px minmax(0,1fr) 52px;gap:12px;align-items:center;font-size:var(--fs-small);color:var(--ink-2)}
.imv-row i{display:block;width:var(--w);height:16px;border-radius:var(--r-pill);background:var(--gold-soft)}
.imv-row.g i{background:var(--green)}
.imv-row b{font-weight:var(--fw-semi);color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.imv-foot{display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line-2);font-size:var(--fs-meta);color:var(--muted)}
.ins-follow{margin:20px 0 0}

/* ---- a post: the question and its short answer on the Mesh, then the body beside its contents ---- */
.post-head-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-areas:"tx fig";gap:28px 56px;align-items:center}
.post-head-tx{grid-area:tx}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:var(--fs-small);color:var(--muted)}
.crumbs a{color:var(--ink-2);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:color var(--t-fast) var(--std),text-decoration-color var(--t-fast) var(--std)}
.crumbs a:hover{color:var(--green-deep);text-decoration-color:currentColor}
.post-h1{margin:18px 0 0;max-width:20ch;text-wrap:balance}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:26px 0 0;font-size:var(--fs-small);color:var(--ink-2)}
.post-by-av{display:inline-flex;width:30px;height:30px;flex:none;overflow:hidden;border-radius:var(--r-round);background:var(--cream);box-shadow:var(--hairline-in)}
.post-by-av img{width:100%;height:100%;object-fit:contain;padding:4px}
.post-by-av.lg{width:48px;height:48px}
.post-by-n{margin-left:-8px;font-weight:var(--fw-medium);color:var(--ink)}
.post-fig{grid-area:fig;margin:0;overflow:hidden;border-radius:var(--r-panel);box-shadow:var(--card-shadow)}
.post-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.post-short{margin:0 0 36px;border-radius:var(--r-card);background:var(--paper);box-shadow:inset 3px 0 0 var(--green),var(--hairline-in);padding:22px 26px}

.prose .post-short p{margin:0;color:var(--ink)}
.prose .post-short strong{color:var(--green-deep)}
.post-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:start}
.post-rail{position:sticky;top:calc(var(--nav-h) + 32px);display:grid;gap:14px}
.post-rail-box{border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);padding:20px 20px 12px}
.post-rail-box .eyebrow{margin:0 0 10px}
.post-rail-cta{display:grid;gap:8px;justify-items:start;border-radius:var(--r-card);background:var(--green-deep);color:var(--cream);padding:22px 22px 24px}
.post-rail-cta .h6{margin:0;color:var(--cream)}
.post-rail-cta p{margin:0;font-size:var(--fs-small);line-height:var(--lh-note);color:rgba(var(--white-rgb),.82)}
.post-rail-cta .btn{margin-top:8px;background:var(--cream);color:var(--green-deep)}
.post-rail-cta .btn:hover{background:var(--white)}
.post-share .eyebrow{margin:0 0 8px}
.post-share>div{display:flex;flex-wrap:wrap;gap:8px}
.post-share-b{display:inline-flex;align-items:center;height:36px;padding:0 14px;border:0;border-radius:var(--r-pill);background:var(--white);box-shadow:inset 0 0 0 1px var(--ctl-line);font:inherit;font-size:var(--fs-small);color:var(--ink);cursor:pointer;transition:background-color var(--t-fast) var(--std)}
.post-share-b:hover{background:var(--paper)}
.post-author{display:flex;gap:14px;align-items:flex-start;padding-top:16px;border-top:1px solid var(--line-2)}
.post-author .h6{margin:0 0 4px}
.post-author p:last-child{margin:0;font-size:var(--fs-small);line-height:var(--lh-note);color:var(--ink-2)}
.post-qa{grid-template-columns:minmax(0,1fr);margin:8px 0 0}
.prose .post-qa summary{font-size:var(--fs-body)}

.post-toc{list-style:none;margin:0;padding:0}
.post-toc a{display:block;padding:8px 0 8px 14px;border-left:2px solid var(--line-2);font-size:var(--fs-small);line-height:var(--lh-note);color:var(--ink-2);text-wrap:pretty;transition:border-color var(--t-hover) var(--std),color var(--t-hover) var(--std)}
.post-toc a:hover{color:var(--ink)}
.post-toc a.on{border-left-color:var(--green);color:var(--ink);font-weight:var(--fw-medium)}

/* the body: questions as H2s, plain prose, tables, callouts and the embedded tool */
.prose{max-width:68ch;min-width:0}
.prose>:first-child{margin-top:0}
.prose h2{margin:56px 0 14px;font-size:var(--fs-h4);line-height:var(--lh-h4);font-weight:var(--fw-regular);text-wrap:balance}
.prose p,.prose li{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-2);text-wrap:pretty}
.prose p{margin:0 0 18px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px}
.prose li{margin:0 0 10px;padding-left:4px}
.prose li::marker{color:var(--green)}
.prose strong{font-weight:var(--fw-medium);color:var(--ink)}
.prose a:not([class]){color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}
.tbl{overflow-x:auto;margin:28px 0}
.tbl table{width:100%;border-collapse:collapse;font-size:var(--fs-ui)}
.tbl caption{padding:0 0 12px;text-align:left;font-size:var(--fs-small);color:var(--muted)}
.tbl th,.tbl td{padding:12px 14px;border-bottom:1px solid var(--line-2);text-align:left;vertical-align:top}
.tbl td{color:var(--ink-2);font-variant-numeric:tabular-nums}
.tbl thead th{font-size:var(--fs-mini);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;color:var(--muted)}
.tbl tbody th{font-weight:var(--fw-medium);color:var(--ink)}
.tbl tfoot :is(th,td){border-bottom:0;font-weight:var(--fw-semi);color:var(--ink)}
.callout{margin:28px 0;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);padding:22px 26px}
.callout p{margin:0}
.callout .callout-h{margin:0 0 6px;font-weight:var(--fw-medium);color:var(--ink)}
.post-tool{margin:36px 0}
.post-tool>a{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:8px;align-items:stretch;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);padding:10px;color:var(--ink);transition:background-color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std)}
.post-tool>a:hover{background:var(--white);box-shadow:var(--card-shadow)}
.prose .post-tool>a{text-decoration:none}
.post-tool .ins-tool-vis{min-height:190px}
.post-tool-tx{display:flex;flex-direction:column;gap:6px;padding:16px 16px 12px;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2)}
.post-tool-tx .eyebrow{margin:0;color:var(--green-deep)}
.post-tool-tx .h5{color:var(--ink)}
.post-sources{margin-top:64px;padding-top:28px;border-top:1px solid var(--line-2)}
.post-sources h2{margin:0 0 14px;font-size:var(--fs-h5)}
.src-list{margin:0;padding-left:22px}
.src-list li{margin:0 0 10px;font-size:var(--fs-small);line-height:var(--lh-note)}
.src-list a .ic,.src-tag{display:inline-block}
.src-more>summary{display:flex;align-items:baseline;justify-content:space-between;gap:16px;cursor:pointer;list-style:none}
.src-more>summary::-webkit-details-marker{display:none}
.src-more>summary h2{margin:0}
.src-more>summary h2 span{color:var(--muted);font-weight:var(--fw-regular)}
.src-toggle{font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--green-deep)}
.src-more[open] .src-toggle{visibility:hidden}
.src-more[open]>.src-list{margin-top:16px}
.src-list a{display:inline;color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;transition:color var(--t-fast) var(--std),text-decoration-color var(--t-fast) var(--std)}
.src-list a:hover{color:var(--green-deep);text-decoration-color:currentColor}
.src-list a .ic{vertical-align:-2px}
.src-tag{white-space:nowrap}
.src-tag{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:var(--r-tag);background:var(--line-2);font-size:var(--fs-mini);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;color:var(--muted)}
.post-by{margin:18px 0 0!important;font-size:var(--fs-small)!important;color:var(--muted)!important}
.post-help{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-top:44px;border-radius:var(--r-xl);background:var(--g-mesh);padding:32px 36px;color:var(--ink)}
.post-help-tx{display:flex;flex-direction:column;gap:6px;max-width:42ch;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink)}
.post-help-tx .eyebrow{margin:0}
.post-help .ins-tool-go{flex:none;padding:10px 16px;border-radius:var(--r-pill);background:var(--white);box-shadow:var(--hairline-in)}
#related .ins-grid{margin-top:40px}

@media (max-width:1023px){
  .ins-head-grid,.ins-method{grid-template-columns:minmax(0,1fr);gap:32px}
  .ins-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ins-method{padding:40px}
  .post-head-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"tx" "fig"}
  .post-fig img{aspect-ratio:16/9}
  .post-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .post-rail{display:contents}
  .post-rail-box{order:-1}
  .post-rail-cta,.post-share,.post-author{order:2}
  .post-body{order:1}

  .prose{max-width:none}
}
@media (max-width:767px){
  .phead.ins-head,.phead.post-head{padding:calc(var(--nav-h) + 36px) 0 var(--gutter)}
  .phead.ins-head>.wrap,.phead.post-head>.wrap{padding-inline:12px}
  .ins-tool-vis{min-height:180px;padding:20px}
  .ins-grid{grid-template-columns:minmax(0,1fr);gap:var(--grid-gap-sm)}
  .ins-card-tx{padding:var(--card-pad-sm)}
  .ins-method{padding:28px 22px}
  .imv-row{grid-template-columns:84px minmax(0,1fr) 44px}
  .post-short{padding:18px 20px}
  .post-tool>a{grid-template-columns:minmax(0,1fr)}
  .post-help{flex-direction:column;align-items:flex-start;padding:26px 22px}
  .prose h2{margin-top:44px}
}
@media (prefers-reduced-motion:reduce){.ins-card-a,.ins-card-img,.ins-tool-go .ic{transition:none}.ins-card-a:hover .ins-card-img{scale:1}.ins-card-a:hover{translate:0 0}a:hover .ins-tool-go .ic{translate:0 0}}

/* hub sections: Tabs and Rows for the tools, and Lead for Most-read guides */
.ins-trows{display:grid;gap:var(--grid-gap);list-style:none;margin:0;padding:0}
.ins-trows a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--hairline-in);padding:12px 48px 12px 12px;color:var(--ink);transition:background-color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std)}
.ins-trows li:nth-child(even) a{padding:12px 12px 12px 48px}
.ins-trows li:nth-child(even) .ins-tool-vis{order:2}
.ins-trows a:hover{background:var(--white);box-shadow:var(--card-shadow)}
.ins-trows .ins-tool-vis{min-height:248px}
.ins-trow-tx{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.ins-expect{display:grid;gap:8px;margin:4px 0 2px;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink)}
.ins-expect .ckrow{align-items:flex-start}
.ins-trow-tx .h4,.ins-trow-tx .body-m{margin:0;max-width:34ch}
.ins-lead{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--grid-gap);align-items:stretch}
.ins-lead-a{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);color:var(--ink);transition:background-color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std)}
.ins-lead-a:hover{background:var(--white);box-shadow:var(--card-shadow)}
.ins-lead-a img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.ins-lead-tx{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:28px 32px 30px}
.ins-lead-tx .eyebrow{color:var(--green-deep)}
.ins-lead-tx .h3{margin:0;max-width:22ch;text-wrap:balance}
.ins-lead-tx .body-m{max-width:52ch}
.ins-lead-side{display:grid;grid-template-rows:repeat(2,minmax(0,1fr));gap:var(--grid-gap);list-style:none;margin:0;padding:0}
.ins-lead-side .ins-card-a{flex-direction:row}
.ins-lead-side .ins-card-img{flex:none;width:42%;height:100%;aspect-ratio:auto}
.ins-lead-side .ins-card-tx{padding:22px 24px}
.ins-lead-side .ins-card-p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:1023px){
  .ins-lead{grid-template-columns:minmax(0,1fr)}
  .ins-lead-side{grid-template-rows:none}
  .ins-trows a,.ins-trows li:nth-child(even) a{grid-template-columns:minmax(0,1fr);gap:20px;padding:12px 12px 28px}
  .ins-trows li:nth-child(even) .ins-tool-vis{order:0}
  .ins-trow-tx{padding:0 16px}
  .ins-trows .ins-tool-vis{min-height:220px}
}
@media (max-width:767px){
  .ins-lead-tx{padding:20px 22px 22px}
  .ins-lead-side .ins-card-a{flex-direction:column}
  .ins-lead-side .ins-card-img{width:100%;height:auto;aspect-ratio:3/2}
  .ins-lead-side .ins-card-tx{padding:var(--card-pad-sm)}
}

/* the hero (Start tools, Johan's pick 2026-10-28): the Start here card and the tools on glass */
.ins-glass{border-radius:var(--r-panel);background:rgba(var(--white-rgb),.95);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);box-shadow:inset 0 0 0 1px rgba(var(--white-rgb),.6),var(--card-shadow);color:var(--ink)}
.ins-st{display:grid;gap:12px}
.ins-st-start{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);overflow:hidden;border-radius:var(--r-panel);background:var(--white);box-shadow:var(--card-shadow);color:var(--ink);transition:translate var(--t-move) var(--out),box-shadow var(--t-move) var(--std)}
.ins-st-start:hover{translate:0 -2px;box-shadow:var(--lift-shadow)}
.ins-st-start img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.ins-st-stx{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:20px 22px}
.ins-st-tools{padding:16px 18px 6px}
.ins-st-tools .eyebrow{margin:0 0 6px}
.ins-st-tools ul{list-style:none;margin:0;padding:0}
.ins-st-tools li+li{border-top:1px solid var(--line-2)}
.ins-st-tools a{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:center;padding:10px 0;color:var(--ink);transition:color var(--t-hover) var(--std)}
.ins-st-tools a:hover{color:var(--green-deep)}
.ins-st-tools a>.ic{color:var(--green-deep);transition:translate var(--t-hover) var(--out)}
.ins-st-tools a:hover>.ic{translate:3px 0}
.ins-st-ic{display:block;width:56px;height:42px;overflow:hidden;border-radius:var(--r-s);background:var(--g-mesh);position:relative}
.ins-st-ic .tmini{position:absolute;left:6px;top:6px;width:150px;padding:8px 10px;scale:.4;transform-origin:top left;pointer-events:none}
.ins-st-tx b{display:block;font-size:var(--fs-ui);font-weight:var(--fw-medium)}
.ins-st-tx span{display:block;font-size:var(--fs-meta);color:var(--ink-2)}
@media (max-width:1023px){
}
@media (max-width:767px){
  .ins-st-start{grid-template-columns:minmax(0,1fr)}
  .ins-st-start img{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:reduce){.ins-st-start,.ins-st-tools a>.ic{transition:none}.ins-st-start:hover{translate:0 0}.ins-st-tools a:hover>.ic{translate:0 0}}

/* readable on the Mesh (2026-10-28, Johan: "ensure we fix all the places that have that dark text over the gradient"). Every light
   gradient that carries dark copy gets a cream glow under the words, so the gold and green stay at the edges, and the grey labels on
   it step up to Green Deep or full ink. Measured against the darkest pixel behind each line, every one clears 4.5:1. */
:is(.ins-head-soft,.post-head,.tool-head,.est-head,.ins-method,.post-help)::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 62% 95% at 24% 55%,rgba(var(--white-rgb),.78),rgba(var(--white-rgb),.5) 45%,rgba(var(--white-rgb),0) 78%);pointer-events:none}
.post-help{position:relative;isolation:isolate;overflow:hidden}
:is(.ins-head-soft,.post-head,.tool-head,.est-head) :is(.hero-sub,.post-meta){color:var(--ink)}
:is(.ins-head-soft,.post-head,.tool-head,.est-head,.ins-method,.post-help) .eyebrow{color:var(--green-deep)}
:is(.post-head,.tool-head) .crumbs{color:var(--ink-2)}
:is(.post-head,.tool-head) .crumbs a{color:var(--ink)}
.ins-method-tx .body-m,.post-help-tx{color:var(--ink)}
@media (max-width:1023px){:is(.ins-head-soft,.post-head,.tool-head,.est-head,.ins-method,.post-help)::before{background:linear-gradient(180deg,rgba(var(--white-rgb),.72),rgba(var(--white-rgb),.5) 50%,rgba(var(--white-rgb),0))}}

/* the All guides filter (2026-10-28, Johan's pick): one bubble per topic with its count, and a Written for menu beside them */
.sec-head.left+.ins-browse,.sec-head.left+.ins-trows,.sec-head.left+.ins-grid{margin-top:40px}
.ins-browse>.ins-filterbar+.ins-browse-list{margin-top:28px}
.ins-filterbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px 32px}
.ins-pills{display:flex;flex-wrap:wrap;gap:10px}
.ins-pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r-pill);background:var(--white);box-shadow:inset 0 0 0 1px var(--ctl-line);font-size:var(--fs-ui);color:var(--ink);cursor:pointer;transition:background-color var(--t-fast) var(--std),color var(--t-fast) var(--std),box-shadow var(--t-fast) var(--std)}
.ins-pill:hover{background:var(--paper)}
.ins-pill[aria-pressed="true"]{background:var(--green-deep);color:var(--cream);box-shadow:none}
.ins-n{font-size:var(--fs-small);color:var(--muted);font-variant-numeric:tabular-nums;transition:color var(--t-fast) var(--std)}
.ins-pill[aria-pressed="true"] .ins-n{color:rgba(var(--white-rgb),.72)}
.ins-sel{height:44px;padding:0 38px 0 16px;border:0;border-radius:var(--r-pill);appearance:none;background-color:var(--white);background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 20px) 19px,calc(100% - 15px) 19px;background-size:5px 5px;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px var(--ctl-line);font-size:var(--fs-ui);color:var(--ink);cursor:pointer;transition:background-color var(--t-fast) var(--std)}
.ins-sel:hover{background-color:var(--paper)}
.ins-sel:focus-visible{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset-tight)}
.ins-sel-l{display:flex;flex:none;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--ink-2);white-space:nowrap}
@media (max-width:1023px){
  .ins-filterbar{flex-direction:column-reverse;align-items:stretch}
}
@media (max-width:767px){
  .ins-pill{height:40px;padding:0 14px}
  .ins-sel-l .ins-sel{flex:1}
}
@media (prefers-reduced-motion:reduce){.ins-pill,.ins-n{transition:none}}

/* ---------- tools (2026-10-26): the interactive pages linked from Insights (debit-memo-checker.html, unused-credit-tracker.html).
   The form sits on the Mesh head beside its result, the way the estimator does; the sheet below explains the rule and names the sources. ---------- */
.phead.tool-head{overflow:clip;padding:calc(var(--nav-h) + 52px) 0 52px}
.tool-intro{max-width:760px}
.tool-intro .h1{margin:14px 0 0;max-width:20ch}
.tool-intro .hero-sub{margin:18px 0 0;max-width:52ch;color:var(--ink)}
.tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start;margin-top:36px}
.tool-form,.tool-out{border-radius:var(--r-big);background:rgba(var(--white-rgb),.96);-webkit-backdrop-filter:var(--blur-form);backdrop-filter:var(--blur-form);box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.08),var(--card-shadow)}
.tool-form{padding:6px 28px 20px}
.tool-out{position:sticky;top:calc(var(--nav-h) + 24px);padding:26px 28px}
.tool-q{margin:0;padding:22px 0;border:0;border-top:1px solid var(--line-2);min-width:0}
.tool-form>.tool-q:first-of-type{border-top:0}
.tool-ql{display:flex;align-items:center;gap:10px;padding:0;margin:0 0 4px;font-size:var(--fs-body);font-weight:var(--fw-medium);line-height:var(--lh-fn);color:var(--ink)}
legend.tool-ql{float:left;width:100%}
legend.tool-ql+*{clear:both}
.tool-no{flex:none;width:24px;height:24px;border-radius:var(--r-round);background:var(--green-wash);color:var(--green-deep);font-size:var(--fs-cap);font-weight:var(--fw-semi);display:inline-flex;align-items:center;justify-content:center}
.tool-hint{margin:0 0 12px 34px;font-size:var(--fs-small);line-height:var(--lh-note);color:var(--muted);text-wrap:pretty}
.tool-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-left:34px}
.tool-in{height:48px;min-width:0;max-width:100%;padding:0 14px;border:0;border-radius:var(--r-btn);background:var(--white);box-shadow:inset 0 0 0 1px var(--ctl-line);font-size:var(--fs-body);color:var(--ink);font-variant-numeric:tabular-nums}
select.tool-in{padding-right:36px;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat}
.tool-in:focus-visible{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset-tight)}
.tool-chips{display:flex;flex-wrap:wrap;gap:8px;margin-left:34px}
.tool-chip{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:var(--r-pill);background:var(--white);box-shadow:inset 0 0 0 1px var(--ctl-line);font-size:var(--fs-ui);line-height:var(--lh-tight);color:var(--ink);cursor:pointer;transition:background-color var(--t-fast) var(--std),color var(--t-fast) var(--std),box-shadow var(--t-fast) var(--std)}
.tool-chip:hover{background:var(--cream)}
.tool-chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.tool-chip:has(input:checked){background:var(--green-deep);color:var(--cream);box-shadow:none}
.tool-chip:has(input:focus-visible){outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset-tight)}
.tool-out-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 6px}
.tool-out-h .eyebrow{margin:0;color:var(--green-deep)}
.tool-out .h4{margin:0;text-wrap:balance}
.tool-out p{margin:10px 0 0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty}
.tool-big{display:block;margin:6px 0 0;font-family:var(--hf);font-weight:var(--fw-light);font-size:var(--fs-h2);line-height:var(--lh-h2);color:var(--ink);font-variant-numeric:tabular-nums}
.tool-sub{margin:20px 0 8px;font-size:var(--fs-mini);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;color:var(--muted)}
.tool-checks{list-style:none;margin:0;padding:0}
.tool-checks li{border-top:1px solid var(--line-2)}
.tool-checks li:first-child{border-top:0}
.tool-checks label{display:flex;align-items:flex-start;gap:12px;padding:11px 0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink);cursor:pointer}
.tool-checks input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--green-deep)}
.tool-checks label:has(input:checked) span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--line)}
.tool-checks small{display:block;margin-top:2px;font-size:var(--fs-small);color:var(--muted)}
.tool-facts{display:grid;gap:0;margin:0}
.tool-facts>div{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid var(--line-2);font-size:var(--fs-ui)}
.tool-facts>div:first-child{border-top:0}
.tool-facts dt{color:var(--ink-2)}
.tool-facts dd{margin:0;font-weight:var(--fw-medium);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.tool-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-2)}
.tool-acts .link{border:0;background:none;padding:0;font:inherit;font-weight:var(--fw-medium);cursor:pointer}
.tool-note{margin:16px 0 0;padding:12px 14px;border-radius:var(--r-m);background:rgba(var(--gold-soft-rgb),.35);font-size:var(--fs-small);line-height:var(--lh-note);color:var(--ink)}
.tool-note:empty{display:none}
.tool-empty{font-size:var(--fs-ui);color:var(--muted)}
/* the credit's year, drawn: issue, today and expiry on one line */
.tool-line{position:relative;height:10px;margin:22px 0 30px;border-radius:var(--r-pill);background:var(--line-2)}
.tool-line i{position:absolute;inset:0 auto 0 0;width:var(--w,0%);border-radius:inherit;background:var(--gold-soft);transition:width var(--t-open) var(--out)}
.tool-line b{position:absolute;top:50%;left:var(--at,0%);width:16px;height:16px;translate:-50% -50%;border-radius:var(--r-round);background:var(--white);box-shadow:inset 0 0 0 3px var(--gold);transition:left var(--t-open) var(--out)}
.tool-line span{position:absolute;top:18px;font-size:var(--fs-meta);color:var(--muted);white-space:nowrap}
.tool-line .l0{left:0}.tool-line .l1{right:0;text-align:right}
.tool-line .lt{left:var(--at,0%);translate:-50% 0;color:var(--ink);font-weight:var(--fw-medium)}
/* guide sections on the tool pages (2026-10-28, after the reference guide): a label over each heading, quick reference cards,
   a three-column checklist and sourced numbers */
.sec-head .tg-label{margin:0 0 12px;color:var(--green-deep)}
.tg-quick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
.tg-q{display:flex;flex-direction:column;gap:6px;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);padding:20px 20px 22px}
.tg-q-k{font-size:var(--fs-mini);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;color:var(--green-deep)}
.tg-q b{font-family:var(--hf);font-weight:var(--fw-light);font-size:var(--fs-h3);line-height:var(--lh-h3);color:var(--ink);font-variant-numeric:tabular-nums}
.tg-q>span:last-child{font-size:var(--fs-small);line-height:var(--lh-note);color:var(--ink-2)}
.tg-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);list-style:none;margin:0;padding:0}
.tg-col{border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);padding:24px 26px}
.tg-col .h6{margin:0 0 14px}
.tg-col ul{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.tg-col li{font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink)}
.tg-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--grid-gap);list-style:none;margin:0;padding:0}
.tg-n{display:flex;flex-direction:column;gap:8px;padding:24px 0 0;border-top:2px solid var(--green)}
.tg-n b{font-family:var(--hf);font-weight:var(--fw-light);font-size:var(--fs-h2);line-height:var(--lh-h2);color:var(--ink);font-variant-numeric:tabular-nums}
.tg-n>span{font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2)}
.tg-n a{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-meta);color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;transition:color var(--t-fast) var(--std)}
.tg-n a:hover{color:var(--green-deep)}
@media (max-width:1023px){.tg-quick{grid-template-columns:repeat(3,minmax(0,1fr))}.tg-checks{grid-template-columns:minmax(0,1fr)}.tg-nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.tg-quick{grid-template-columns:repeat(2,minmax(0,1fr))}.tg-nums{grid-template-columns:minmax(0,1fr)}}
/* the sheet: how the rule works, as numbered steps */
.tool-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;list-style:none;margin:40px 0 0;padding:0;counter-reset:ts}
.tool-steps li{counter-increment:ts;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);padding:20px 20px 22px;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2)}
.tool-steps li::before{content:counter(ts,decimal-leading-zero);display:block;margin-bottom:14px;font-family:var(--hf);font-size:var(--fs-h5);color:var(--green-deep)}
.tool-steps b{display:block;margin-bottom:6px;font-weight:var(--fw-medium);color:var(--ink)}
.tool-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 56px;margin-top:40px}
.tool-cols .prose{max-width:none}
.tool-srcs .src-list{margin-top:16px}
@media (max-width:1023px){
  .tool-grid{grid-template-columns:minmax(0,1fr)}
  .tool-out{position:static}
  .tool-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tool-cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:767px){
  .phead.tool-head{padding:calc(var(--nav-h) + 36px) 0 var(--gutter)}
  .phead.tool-head>.wrap{padding-inline:12px}
  .tool-form{padding:4px 18px 16px}
  .tool-out{padding:22px 20px}
  .tool-hint,.tool-row,.tool-chips{margin-left:0}
  .tool-steps{grid-template-columns:minmax(0,1fr)}
  .tbl.stack thead{display:none}
  .tbl.stack tr{display:block;padding:16px 0;border-bottom:1px solid var(--line-2)}
  .tbl.stack :is(th,td){display:block;padding:3px 0;border:0}
  .tbl.stack tbody th{margin-bottom:6px;font-size:var(--fs-body)}
  .tbl.stack td::before{content:attr(data-label);display:block;margin-top:8px;font-size:var(--fs-mini);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){.tool-chip,.tool-line i,.tool-line b{transition:none}}

/* a draft post's banner (2026-10-28, the daily newsroom): unlisted preview pages for posts awaiting Johan's approval */
.draft-bar{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 var(--gutter);border-radius:var(--r-m);background:var(--gold-soft);padding:14px 20px;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink)}
.draft-bar b{font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;font-size:var(--fs-mini)}

/* ---------- figures in a post (2026-10-28, after Anthropic's research posts): charts and diagrams drawn from data, and licensed
   photos with their credit. Flat on a light panel, a short title on top and a one-line caption with the source under it. ---------- */
.prose .fig{margin:36px 0}
.fig-in{border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);padding:26px 28px}
.fig-title{margin:0 0 18px!important;font-size:var(--fs-ui)!important;font-weight:var(--fw-medium);color:var(--ink)!important}
.fig figcaption{margin-top:10px;font-size:var(--fs-small);line-height:var(--lh-note);color:var(--ink-2);text-wrap:pretty}
.fig-src{color:var(--muted)}
.fig-src a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.fig-src a:hover{color:var(--green-deep)}
/* bars: label, track, value */
.fig-bars,.fig-pairs{display:grid;gap:12px}
.fb-row,.fp-row{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr) auto;gap:14px;align-items:center;font-size:var(--fs-small);color:var(--ink-2)}
.fp-row{grid-template-columns:minmax(0,30%) minmax(0,1fr)}
.fb-l{text-wrap:pretty;color:var(--ink)}
.fb-t{position:relative;display:block;height:14px;border-radius:var(--r-pill);background:var(--line-2)}
.fb-t i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--gold-soft)}
.fb-t.g i{background:var(--green)}
.fb-row b{font-weight:var(--fw-semi);color:var(--ink);font-variant-numeric:tabular-nums;min-width:3.5em;text-align:right}
.fp-bars{display:grid;gap:6px}
.fp-bars .fb-t{height:12px}
.fp-line{display:grid;grid-template-columns:minmax(0,1fr) 3.5em;gap:10px;align-items:center}
.fp-line em{font-style:normal;font-size:var(--fs-meta);font-weight:var(--fw-semi);color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.fig-key{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 16px!important;font-size:var(--fs-meta)!important;color:var(--ink-2)!important}
.fig-key span{display:inline-flex;align-items:center;gap:6px}
.fig-key i{width:12px;height:12px;border-radius:var(--r-round);background:var(--gold-soft)}
.fig-key .g i{background:var(--green)}
/* columns */
.fig-cols{display:flex;align-items:flex-end;justify-content:space-around;gap:16px;height:220px}
.fc-col{display:flex;flex:1;flex-direction:column;align-items:center;gap:8px;height:100%;max-width:120px}
.fc-col b{font-weight:var(--fw-semi);font-size:var(--fs-small);color:var(--ink);font-variant-numeric:tabular-nums}
.fc-t{position:relative;display:block;flex:1;width:100%}
.fc-t i{position:absolute;inset:auto 0 0 0;height:var(--h);border-radius:var(--r-s) var(--r-s) 0 0}
.fc-t i{background:var(--gold-soft)}
.fc-col:last-child .fc-t i{background:var(--green)}
.fc-l{font-size:var(--fs-meta);color:var(--ink-2);text-align:center}
/* steps: numbered boxes joined by a line */
.fig-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;list-style:none;margin:0!important;padding:0!important}
.fig-steps li{position:relative;display:flex;flex-direction:column;gap:6px;margin:0!important;border-radius:var(--r-m);background:var(--white);box-shadow:var(--hairline-in);padding:14px 14px 16px!important;font-size:var(--fs-small)!important;line-height:var(--lh-note)!important;color:var(--ink-2)}
.fig-steps li::marker{content:none}
.fig-steps li+li::before{content:"";position:absolute;left:-10px;top:24px;width:10px;height:2px;background:var(--green)}
.fs-n{font-family:var(--hf);font-size:var(--fs-h6);color:var(--green-deep)}
.fig-steps b{font-weight:var(--fw-medium);color:var(--ink)}
/* timeline: dots on a line */
.fig-time{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:12px;list-style:none;margin:0!important;padding:18px 0 0!important;position:relative}
.fig-time::before{content:"";position:absolute;left:6px;right:6px;top:5px;height:2px;background:var(--line)}
.fig-time li{position:relative;display:flex;flex-direction:column;gap:4px;margin:0!important;padding:0!important;font-size:var(--fs-small)!important;line-height:var(--lh-note)!important;color:var(--ink-2)}
.fig-time li::marker{content:none}
.fig-time li::before{content:"";position:absolute;left:0;top:-18px;width:12px;height:12px;border-radius:var(--r-round);background:var(--white);box-shadow:inset 0 0 0 3px var(--gold)}
.fig-time li:last-child::before{box-shadow:inset 0 0 0 3px var(--green)}
.fig-time b{font-weight:var(--fw-medium);color:var(--ink)}
/* lanes: two paths that end in one place */
.fig-lanes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.fl-lane{border-radius:var(--r-m);background:var(--white);box-shadow:var(--hairline-in);padding:14px 16px}
.fl-h{margin:0 0 10px!important;font-size:var(--fs-mini)!important;font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;color:var(--green-deep)!important}
.fl-lane ol{display:grid;gap:8px;list-style:none;margin:0!important;padding:0!important}
.fl-lane li{position:relative;margin:0!important;padding:8px 10px!important;border-radius:var(--r-s);background:var(--paper);font-size:var(--fs-small)!important;line-height:var(--lh-note)!important;color:var(--ink)}
.fl-lane li::marker{content:none}
.fl-lane li+li::before{content:"";position:absolute;left:50%;top:-8px;width:2px;height:8px;background:var(--green)}
.fl-join{margin:12px 0 0!important;border-radius:var(--r-m);background:var(--green-deep);padding:12px 16px;text-align:center;font-size:var(--fs-small)!important;font-weight:var(--fw-medium);color:var(--cream)!important}
/* a licensed photo */
.fig-photo img{display:block;width:100%;height:auto;border-radius:var(--r-card);box-shadow:var(--hairline-in)}
@media (max-width:767px){
  .fig-in{padding:18px}
  .fb-row{grid-template-columns:minmax(0,1fr) auto;row-gap:6px}
  .fb-row .fb-t{grid-column:1/-1;grid-row:2}
  .fp-row{grid-template-columns:minmax(0,1fr)}
  .fig-steps,.fig-time{grid-auto-flow:row}
  .fig-steps li+li::before{left:24px;top:-10px;width:2px;height:10px}
  .fig-time{padding:0 0 0 22px!important}
  .fig-time::before{left:5px;right:auto;top:6px;bottom:6px;width:2px;height:auto}
  .fig-time li::before{left:-22px;top:3px}
  .fig-lanes{grid-template-columns:minmax(0,1fr)}
  .fig-cols{height:180px}
}

/* ---------- legal pages and the 404 (2026-10-28) ---------- */
.legal-head{padding-bottom:48px}
main>.draft-bar{margin:calc(var(--nav-h) + 16px) var(--gutter) 0;position:relative;z-index:2}
.legal-also ul{list-style:none;margin:0;padding:0 0 8px}
.legal-also li a{display:block;padding:6px 0;font-size:var(--fs-small);color:var(--ink-2);transition:color var(--t-hover) var(--std)}
.legal-also li a:hover,.legal-also li a[aria-current="page"]{color:var(--green-deep)}
.consent{margin:28px 0 8px;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);padding:6px 24px 14px}
.consent-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line-2)}
.prose .consent-row p{margin:0}
.prose .consent-row .h6{margin:0 0 4px;color:var(--ink)}
.prose .consent-row p:not(.h6){font-size:var(--fs-small);line-height:var(--lh-note)}
.consent-on{flex:none;font-size:var(--fs-mini);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;color:var(--green-deep)}
.switch{position:relative;flex:none;display:inline-block;width:52px;height:30px;cursor:pointer}
.switch input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch span{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--line);transition:background-color var(--t-fast) var(--std)}
.switch span::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:var(--r-round);background:var(--white);box-shadow:var(--hairline-in-2);transition:translate var(--t-move) var(--out)}
.switch input:checked+span{background:var(--green-deep)}
.switch input:checked+span::after{translate:22px 0}
.switch input:focus-visible+span{outline:var(--focus-w) solid var(--focus-color);outline-offset:var(--focus-offset-tight)}
.prose .consent-saved{margin:12px 0 0;min-height:1.4em}
.nf-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--grid-gap);list-style:none;margin:0;padding:0}
.nf-card{display:flex;flex-direction:column;gap:8px;height:100%;border-radius:var(--r-card);background:var(--paper);box-shadow:var(--hairline-in);padding:22px 24px;color:var(--ink);transition:background-color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std)}
.nf-card:hover{background:var(--white);box-shadow:var(--card-shadow)}
.nf-card .eyebrow{color:var(--green-deep)}
.nf-card .ic{margin-top:auto;color:var(--green-deep);transition:translate var(--t-hover) var(--out)}
.nf-card:hover .ic{translate:3px 0}
@media (max-width:1023px){.nf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.nf-grid{grid-template-columns:minmax(0,1fr)}main>.draft-bar{margin:calc(var(--nav-h) + 12px) 12px 0}}
@media (prefers-reduced-motion:reduce){.switch span,.switch span::after,.nf-card,.nf-card .ic{transition:none}.nf-card:hover .ic{translate:0 0}}
/* ---------- Book a walkthrough: the pop-up every data-book link opens (2026-10-28). Markup in dev/build/partials/book.html,
   behaviour in site.js. A time first, then the details, then the confirmation. The form fields reuse the tools' .tool-in and .tool-chip ---------- */
.book{width:min(880px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;background:transparent;color:var(--ink);overflow:visible}
.book [hidden]{display:none!important}
.book::backdrop{background:var(--book-scrim);opacity:0;transition:opacity var(--t-move) var(--std)}
.book.in::backdrop{opacity:1}
.book-card{display:flex;flex-direction:column;max-height:calc(100dvh - 48px);border-radius:var(--r-panel);background:var(--white);box-shadow:var(--panel-shadow);overflow:hidden;opacity:0;translate:0 18px;scale:.985;transition:opacity var(--t-move) var(--std),translate var(--t-open) var(--out),scale var(--t-open) var(--out)}
.book.in .book-card{opacity:1;translate:0 0;scale:1}
.book-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:start;padding:28px 32px 4px;background:var(--g-glowgreen);background-size:100% 260%;background-position:50% 0}
.book-step{display:flex;gap:8px;margin:0 0 10px;color:var(--green-deep)}
.book-top .h3{margin:0}
.book-sub{margin:8px 0 0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty}
.book-x{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);margin:-6px -10px 0 0;border-radius:var(--r-round);color:var(--ink-2);transition:background-color var(--t-hover) var(--std),color var(--t-hover) var(--std)}
.book-x:hover{background:var(--wash-ink);color:var(--ink)}
.book-form{display:flex;flex-direction:column;flex:1;min-height:0}
.book-pane{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:22px 32px 26px}
.book-pane:not([hidden]){animation:book-pane var(--t-move) var(--out)}
@keyframes book-pane{from{opacity:0;translate:0 8px}}
.book-time{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px}
.book-cal-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px}
.book-cal-h .h6,.book-slots>.h6{margin:0;font-weight:var(--fw-medium)}
.book-arrows{display:flex;gap:6px}
.book-arr{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-round);box-shadow:var(--hairline-in-2);color:var(--ink);transition:background-color var(--t-hover) var(--std),opacity var(--t-hover) var(--std)}
.book-arr:hover:not(:disabled){background:var(--cream)}
.book-arr:disabled{opacity:.35;cursor:default}
.book-wk,.book-days{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.book-wk{margin:0 0 6px;font-size:var(--fs-cap);color:var(--muted);text-align:center}
.book-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:58px;border-radius:var(--r-m);background:transparent;color:var(--muted);font-size:var(--fs-row);font-weight:var(--fw-regular);font-variant-numeric:tabular-nums;cursor:default;transition:background-color var(--t-hover) var(--std),color var(--t-hover) var(--std),box-shadow var(--t-hover) var(--std),opacity var(--t-hover) var(--std)}
/* a day without open times is a plain outline, like the key */
.book-day:not(.open){box-shadow:var(--hairline-in)}
.book-day.open{background:var(--green-wash);color:var(--green-deep);font-weight:var(--fw-medium);opacity:1;cursor:pointer}
/* an open day carries a dot; today carries a gold ring and its label */
.book-day.open::after{content:"";position:absolute;bottom:7px;width:5px;height:5px;border-radius:var(--r-round);background:var(--green)}
.book-day.today{box-shadow:inset 0 0 0 2px var(--gold)}
.book-day.today::after{display:none}
.book-day em{font-style:normal;font-size:var(--fs-mini);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;line-height:1;color:var(--gold-deep)}
.book-day small{font-size:var(--fs-mini);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;line-height:1}
.book-day.open:hover{background:var(--green-soft)}
.book-day.open[aria-pressed="true"]{background:var(--green-deep);color:var(--on-green)}
.book-day.open[aria-pressed="true"]::after{background:var(--on-green)}
.book-day[aria-pressed="true"] em{color:var(--on-green)}
.book-key{display:flex;flex-wrap:wrap;gap:6px 16px;margin:14px 0 0;padding:0;list-style:none;font-size:var(--fs-cap);color:var(--ink-2)}
.book-key li{display:inline-flex;align-items:center;gap:7px}
.book-key i{position:relative;flex:none;width:18px;height:18px;border-radius:var(--r-xs)}
.book-key .k-open{background:var(--green-wash)}
.book-key .k-open::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;margin-left:-2px;border-radius:var(--r-round);background:var(--green)}
.book-key .k-off{box-shadow:var(--hairline-in-2)}
.book-key .k-today{box-shadow:inset 0 0 0 2px var(--gold)}
.book-req{margin:-8px 0 14px;font-size:var(--fs-cap);color:var(--muted)}
.book-f .tool-in::placeholder{color:var(--muted)}
.book-optl{margin-left:6px;font-size:var(--fs-cap);font-weight:var(--fw-regular);color:var(--muted)}
.book-fh{display:block;margin:6px 0 0;font-size:var(--fs-cap);line-height:var(--lh-note);color:var(--muted)}
.book-more .book-fields .book-q{margin:0}
.book-you>.book-f{display:block}
.book-you>.book-f .tool-in{width:100%}
.book-hint{margin-left:6px;font-weight:var(--fw-regular);color:var(--muted)}
.book-more .book-q{margin:4px 0 0}
.book-star{font-style:normal;font-weight:var(--fw-semi);color:var(--alert)}
.book-q.is-invalid .tool-chip{box-shadow:inset 0 0 0 1.5px var(--alert)}
.book-slots{padding-left:32px;border-left:1px solid var(--line-2)}
.book-times{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0 0}
.book-times .tool-chip{justify-content:center;font-variant-numeric:tabular-nums}
.book-times>p{grid-column:1/-1;margin:0;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2)}
.book-tz{margin:14px 0 0;font-size:var(--fs-cap);line-height:var(--lh-note);color:var(--muted)}
.book-picked{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:0 0 20px;padding:12px 16px;border-radius:var(--r-m);background:var(--cream);font-size:var(--fs-ui);font-weight:var(--fw-medium)}
.book-picked svg{color:var(--green-deep)}
.book-change{margin-left:auto;color:var(--green-deep);text-decoration:underline;text-decoration-color:var(--ul-soft);text-underline-offset:var(--ul-offset-l);transition:text-decoration-color var(--t-hover) var(--std)}
.book-change:hover{text-decoration-color:currentColor}
.book-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.book-wide{grid-column:1/-1}
.book-f>span{display:block;margin:0 0 6px;font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--ink)}
.book-f .tool-in{width:100%}
.book-f textarea.tool-in{height:auto;padding:12px 14px;font-family:var(--sans);resize:vertical;line-height:var(--lh-s)}
.book-f .tool-in[aria-invalid="true"]{box-shadow:inset 0 0 0 2px var(--alert)}
.book-q{margin:22px 0 0;padding:0;border:0;min-width:0}
.book-q legend{padding:0;margin:0 0 10px;font-size:var(--fs-small);font-weight:var(--fw-medium)}
.book-chips{display:flex;flex-wrap:wrap;gap:8px}
.book-more{margin:22px 0 0;border-top:1px solid var(--line-2)}
.book-more summary{display:flex;align-items:center;gap:10px;padding:16px 0;font-size:var(--fs-ui);font-weight:var(--fw-medium);cursor:pointer;list-style:none;transition:color var(--t-hover) var(--std)}
.book-more summary::-webkit-details-marker{display:none}
.book-more summary:hover{color:var(--green-deep)}
.book-more summary svg{margin-left:auto;transition:rotate var(--t-move) var(--out)}
.book-more[open] summary svg{rotate:180deg}
.book-more .book-fields{padding:2px 0 4px}
.book-opt{padding:2px 8px;border-radius:var(--r-xs);background:var(--cream);font-size:var(--fs-mini);font-weight:var(--fw-semi);letter-spacing:var(--ls-chip);text-transform:uppercase;color:var(--muted)}
.book-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.book-err{margin:0 0 14px;font-size:var(--fs-small);line-height:var(--lh-note);color:var(--alert)}
.book-err:empty{display:none}
.book-done{text-align:center;padding-top:36px;padding-bottom:36px}
.book-done-ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:var(--r-round);background:var(--green-wash);color:var(--green-deep)}
.book-done .h4{margin:18px 0 8px;font-family:var(--hf);font-weight:var(--hfw);color:var(--ink);outline:0}
.book-done p:not(.h4){margin:0 auto;max-width:46ch;font-size:var(--fs-ui);line-height:var(--lh-s);color:var(--ink-2);text-wrap:pretty}
.book-done p:not(.h4)+p{margin-top:6px}
.book-done .h4+p{color:var(--ink);font-weight:var(--fw-medium)}
.book-preview{display:inline-block;margin-top:18px!important;padding:6px 12px;border-radius:var(--r-m);background:var(--cream);font-size:var(--fs-small)!important}
.book-foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:16px 32px;border-top:1px solid var(--line-2);background:var(--paper)}
.book-alt{margin:0 auto 0 0;font-size:var(--fs-small);line-height:var(--lh-note);color:var(--muted)}
.book-alt a{color:var(--ink-2);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:var(--ul-offset-l);transition:text-decoration-color var(--t-hover) var(--std),color var(--t-hover) var(--std)}
.book-alt a:hover{color:var(--ink);text-decoration-color:currentColor}
.book-foot .btn{flex:none}
.book-foot .btn:disabled{opacity:.45;cursor:default}
.book-foot .btn-primary:disabled:hover{background:var(--green-deep)}
@media (max-width:767px){
  .book{width:100vw;max-height:calc(100dvh - 16px);margin:auto 0 0}
  .book-card{max-height:calc(100dvh - 16px);border-radius:var(--r-panel) var(--r-panel) 0 0;translate:0 40px;scale:1}
  .book-top{padding:20px 20px 2px}
  .book-pane{padding:18px 20px 22px}
  .book-time{grid-template-columns:minmax(0,1fr);gap:22px}
  .book-slots{padding:20px 0 0;border-left:0;border-top:1px solid var(--line-2)}
  .book-times{grid-template-columns:repeat(3,minmax(0,1fr))}
  .book-day{height:52px}
  .book-fields{grid-template-columns:minmax(0,1fr)}
  .book-foot{flex-direction:column-reverse;align-items:stretch;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));text-align:center}
}
@media (max-width:399px){.book-times{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){.book-card,.book::backdrop,.book-x,.book-arr,.book-day,.book-change,.book-more summary,.book-more summary svg,.book-alt a{transition:none}.book-card{translate:0 0;scale:1}.book-pane:not([hidden]){animation:none}}