@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(/a/f/jakarta-latin.cd8db90cd9.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url(/a/f/jakarta-latin-ext.0303e02b53.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  /* One face, two roles. `--serif` and `--sans` are kept as separate names
     because a hundred rules below refer to them and because the distinction
     is about *role* — display versus interface — not about the file. If a
     second family ever returns, it returns here and nowhere else. */
  --serif:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --ground:#F1EEEA; --surface:#FFFFFF; --sunk:#FFFFFF; --raised:#F1EEEA;
  --deep:#0C2B15; --deep-2:#144622; --deep-3:#197A56;
  --on-deep:#F1EEEA; --on-deep-2:#C4B5A4; --on-deep-3:#AB947E;

  --ink:#212427; --ink-2:#323232; --ink-3:#696969;
  --rule:#D4D4D4; --rule-2:#B1B1B1; --rule-deep:#144622;

  --accent:#197A56; --accent-deep:#0C2B15; --accent-tint:#E3FDDB;
  --cta:#96F878; --cta-hover:#71DC68; --cta-ink:#212427;

  --warn:#BD8F1A; --warn-tint:#FFFBE8;
  --bad:#A1150C;  --bad-tint:#FCE1DC;
  --good:#197A56; --good-tint:#E3FDDB;

  --radius-5:5px; --radius-10:10px; --radius-15:15px; --radius-20:20px;
  --radius-25:25px; --radius-30:30px; --radius-70:70px;
  --radius:15px; --radius-lg:20px; --radius-xl:30px; --radius-pill:999px;

  --header-height:56px; --nav-margin:16px; --headerRadius:20px;
  --translucent:hsla(0,0%,100%,.72); --nav-hover:#E7E4DF;
  --page-margin-small:16px; --page-margin-medium:40px; --page-margin-large:80px;
  --box-shadow:0 1px 2px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);
  --scrim-b2t:linear-gradient(0deg,rgba(0,0,0,.6),transparent);
  --scrim-t2b:linear-gradient(180deg,rgba(0,0,0,.6),transparent);
  --wrap:110rem; --gutter:clamp(1.25rem,4vw,4rem);
  --shadow:0 1px 2px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.08);
  --shadow-lg:0 2px 4px rgba(0,0,0,.06),0 30px 70px -32px rgba(0,0,0,.35);
  --shadow-mega:0 30px 60px -28px rgba(0,0,0,.24);
  --ease:cubic-bezier(.22,.61,.36,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#17181A; --surface:#212427; --sunk:#1C1E20; --raised:#232326;
    --deep:#0A1F10; --deep-2:#12351C; --deep-3:#197A56;
    --on-deep:#F1EEEA; --on-deep-2:#C4B5A4; --on-deep-3:#AB947E;

    --ink:#F1EEEA; --ink-2:#D4D4D4; --ink-3:#B1B1B1;
    --rule:#323232; --rule-2:#4A4A4A; --rule-deep:#12351C;

    --accent:#A8F0B8; --accent-deep:#E3FDDB; --accent-tint:#12351C;
    --cta:#96F878; --cta-hover:#71DC68; --cta-ink:#212427;

    --warn:#FFCF24; --warn-tint:#2C2517;
    --bad:#FCE1DC;  --bad-tint:#3A1A16;
    --good:#A8F0B8; --good-tint:#12351C;

    --translucent:rgba(28,30,32,.72); --nav-hover:#2A2D30;
    --translucent:rgba(28,30,32,.72); --nav-hover:#2A2D30;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 34px -20px rgba(0,0,0,.85);
    --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 34px 76px -34px rgba(0,0,0,.95);
    --shadow-mega:0 34px 66px -30px rgba(0,0,0,.8);
  
  }
}
:root[data-theme="dark"]{
  --ground:#17181A; --surface:#212427; --sunk:#1C1E20; --raised:#232326;
  --deep:#0A1F10; --deep-2:#12351C; --deep-3:#197A56;
  --on-deep:#F1EEEA; --on-deep-2:#C4B5A4; --on-deep-3:#AB947E;

  --ink:#F1EEEA; --ink-2:#D4D4D4; --ink-3:#B1B1B1;
  --rule:#323232; --rule-2:#4A4A4A; --rule-deep:#12351C;

  --accent:#A8F0B8; --accent-deep:#E3FDDB; --accent-tint:#12351C;
  --cta:#96F878; --cta-hover:#71DC68; --cta-ink:#212427;

  --warn:#FFCF24; --warn-tint:#2C2517;
  --bad:#FCE1DC;  --bad-tint:#3A1A16;
  --good:#A8F0B8; --good-tint:#12351C;

  --translucent:rgba(28,30,32,.72); --nav-hover:#2A2D30;
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 34px -20px rgba(0,0,0,.85);
  --shadow-lg:0 2px 4px rgba(0,0,0,.5),0 34px 76px -34px rgba(0,0,0,.95);
  --shadow-mega:0 34px 66px -30px rgba(0,0,0,.8);
}
:root{--fs-d1:38px;--lh-d1:110%;--fs-d2:28px;--lh-d2:120%;--fs-d3:24px;--lh-d3:120%;--fs-d4:20px;--lh-d4:130%;--fs-d5:18px;--lh-d5:120%;--fs-d6:16px;--lh-d6:120%;--fs-lg:15px;--lh-lg:130%;--fs-md:13px;--lh-md:140%;--fs-sm:12px;--lh-sm:140%;--fs-lab:11px;--lh-lab:100%;--fs-labs:10px;--lh-labs:100%;--fs-cap:10px;--lh-cap:140%;--fs-btn:12px;--lh-btn:100%;--fs-btns:10px;--lh-btns:100%;--s-a:2px;--s-b:4px;--s-c:8px;--s-d:8px;--s-e:12px;--s-f:16px;--s-g:24px;--s-h:24px;--s-i:32px;--s-j:32px;--s-k:56px;--s-l:64px}@media (min-width:390px){:root{--fs-d1:48px;--lh-d1:110%;--fs-d2:40px;--lh-d2:120%;--fs-d3:32px;--lh-d3:120%;--fs-d4:24px;--lh-d4:130%;--fs-d5:22px;--lh-d5:120%;--fs-d6:18px;--lh-d6:120%;--fs-lg:16px;--lh-lg:130%;--fs-md:14px;--lh-md:140%;--fs-sm:12px;--lh-sm:140%;--fs-lab:12px;--lh-lab:100%;--fs-labs:10px;--lh-labs:100%;--fs-cap:12px;--lh-cap:140%;--fs-btn:14px;--lh-btn:100%;--fs-btns:12px;--lh-btns:100%}}@media (min-width:768px){:root{--fs-d1:60px;--lh-d1:100%;--fs-d2:44px;--lh-d2:100%;--fs-d3:38px;--lh-d3:100%;--fs-d4:28px;--lh-d4:120%;--fs-d5:23px;--lh-d5:120%;--fs-d6:20px;--lh-d6:120%;--fs-lg:17px;--lh-lg:130%;--fs-md:15px;--lh-md:140%;--fs-sm:13px;--lh-sm:140%;--fs-lab:13px;--lh-lab:100%;--fs-labs:11px;--lh-labs:100%;--fs-cap:12px;--lh-cap:140%;--fs-btn:14px;--lh-btn:100%;--fs-btns:12px;--lh-btns:100%;--s-a:4px;--s-b:8px;--s-c:12px;--s-d:16px;--s-e:20px;--s-f:24px;--s-g:32px;--s-h:40px;--s-i:48px;--s-j:40px;--s-k:64px;--s-l:72px}}@media (min-width:1024px){:root{--fs-d1:68px;--lh-d1:100%;--fs-d2:48px;--lh-d2:100%;--fs-d3:40px;--lh-d3:100%;--fs-d4:32px;--lh-d4:120%;--fs-d5:24px;--lh-d5:120%;--fs-d6:22px;--lh-d6:120%;--fs-lg:18px;--lh-lg:130%;--fs-md:15px;--lh-md:140%;--fs-sm:13px;--lh-sm:140%;--fs-lab:13px;--lh-lab:100%;--fs-labs:11px;--lh-labs:100%;--fs-cap:12px;--lh-cap:140%;--fs-btn:16px;--lh-btn:100%;--fs-btns:12px;--lh-btns:100%;--s-a:4px;--s-b:8px;--s-c:12px;--s-d:16px;--s-e:20px;--s-f:24px;--s-g:32px;--s-h:40px;--s-i:48px;--s-j:56px;--s-k:64px;--s-l:72px}}@media (min-width:1440px){:root{--fs-d1:86px;--lh-d1:100%;--fs-d2:52px;--lh-d2:100%;--fs-d3:44px;--lh-d3:100%;--fs-d4:32px;--lh-d4:120%;--fs-d5:28px;--lh-d5:120%;--fs-d6:24px;--lh-d6:120%;--fs-lg:20px;--lh-lg:130%;--fs-md:16px;--lh-md:140%;--fs-sm:14px;--lh-sm:140%;--fs-lab:14px;--lh-lab:100%;--fs-labs:12px;--lh-labs:100%;--fs-cap:12px;--lh-cap:140%;--fs-btn:16px;--lh-btn:100%;--fs-btns:12px;--lh-btns:100%}}@media (min-width:1920px){:root{--fs-d1:96px;--lh-d1:100%;--fs-d2:60px;--lh-d2:100%;--fs-d3:52px;--lh-d3:100%;--fs-d4:44px;--lh-d4:120%;--fs-d5:32px;--lh-d5:120%;--fs-d6:28px;--lh-d6:120%;--fs-lg:24px;--lh-lg:130%;--fs-md:18px;--lh-md:140%;--fs-sm:16px;--lh-sm:140%;--fs-lab:16px;--lh-lab:100%;--fs-labs:14px;--lh-labs:100%;--fs-cap:14px;--lh-cap:140%;--fs-btn:18px;--lh-btn:100%;--fs-btns:14px;--lh-btns:100%;--s-a:8px;--s-b:16px;--s-c:16px;--s-d:24px;--s-e:32px;--s-f:32px;--s-g:40px;--s-h:48px;--s-i:56px;--s-j:72px;--s-k:72px;--s-l:80px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);
  font:300 var(--fs-lg)/var(--lh-lg) var(--sans);font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible,label:focus-visible{outline:2px solid var(--accent);
  outline-offset:3px;border-radius:3px}
/* The reference system's own split, and it is the part people get wrong when
   they copy a consultancy look: **h1 and h2 are the serif; h3 through h6 are
   the sans.** Setting every heading in the serif is what makes a page read as
   a wedding invitation rather than a firm — the serif is for the one or two
   statements a page is making, and the sans carries everything that is
   labelling or organising. All of them are weight 300. */
h1,h2,h3,h4,h5,h6{margin:0;text-wrap:balance;font-weight:300;color:var(--ink);
  letter-spacing:-.02em}
h1,h2{font-family:var(--serif);letter-spacing:-.025em}
h3,h4,h5,h6{font-family:var(--sans);letter-spacing:-.01em}
h1{font-size:var(--fs-d1);line-height:var(--lh-d1)}
h2{font-size:var(--fs-d2);line-height:var(--lh-d2)}
h3{font-size:var(--fs-d3);line-height:var(--lh-d3)}
h4{font-size:var(--fs-d4);line-height:var(--lh-d4)}
h5{font-size:var(--fs-d5);line-height:var(--lh-d5)}
h6{font-size:var(--fs-d6);line-height:var(--lh-d6)}
p{margin:0 0 1em}
hr{border:0;border-top:1px solid var(--rule);margin:0}
::selection{background:var(--cta);color:var(--cta-ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:58rem}
.measure{max-width:36rem}
.sheet{max-width:34rem;margin:0 auto;padding:4rem 1.5rem}
.stack>*+*{margin-top:var(--gap,1rem)}
.skip{position:absolute;left:-9999px;top:0;background:var(--cta);
  color:var(--cta-ink);padding:.8rem 1.2rem;z-index:200;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}

/* ── type scale ───────────────────────────────────────────────── */
.eyebrow{font-family:var(--sans);font-weight:700;font-size:var(--fs-labs);
  line-height:var(--lh-labs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  margin:0 0 1.2rem;display:flex;align-items:center;gap:.6rem}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:currentColor;
  flex:0 0 auto;opacity:.55}
.eyebrow.bare::before{display:none}
.lede{font-size:var(--fs-d6);line-height:130%;color:var(--ink-2);
  font-weight:300}
.small{font:400 var(--fs-sm)/var(--lh-sm) var(--sans);color:var(--ink-3)}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-variant-numeric:tabular-nums;letter-spacing:-.01em}

h1.display{font:250 var(--fs-d1)/var(--lh-d1) var(--serif);
  letter-spacing:-.03em;
  letter-spacing:-.025em;max-width:15ch}
h1.display.wide{max-width:none}
h2.head{font:250 var(--fs-d2)/var(--lh-d2) var(--serif);
  letter-spacing:-.025em;
  letter-spacing:-.022em;max-width:20ch;margin-bottom:1rem}
h3.title{font:300 1.5rem/1.22 var(--serif);letter-spacing:-.018em}
/* The uppercase rule-heading. It carries the structure of a page so the serif
   never has to work as a signpost — which is what lets the serif stay light. */
h2.section{font:700 var(--fs-labs)/var(--lh-labs) var(--sans);
  letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);padding-bottom:.8rem;
  border-bottom:1px solid var(--rule);margin-bottom:2rem;
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
h2.section .n{color:var(--rule-2);font-variant-numeric:tabular-nums}

/* ── slabs ────────────────────────────────────────────────────── */
section{padding:clamp(4rem,8vw,7.5rem) 0}
section.tight{padding:3rem 0}
section.sunk{background:var(--sunk)}
section.deep{background:var(--deep);color:var(--on-deep)}
section.deep h1,section.deep h2,section.deep h3,section.deep h4{color:#fff}
section.deep p{color:var(--on-deep-2)}
section.deep .eyebrow{color:var(--cta)}
section.deep .small{color:var(--on-deep-3)}
section.deep a:not(.btn){color:var(--cta)}

/* Two pills with the page showing between them, not one bar across the top.
   The header is a pair of objects laid on the page; a band welded to the top
   edge is the thing it is deliberately not. */
.masthead{position:sticky;top:var(--nav-margin);z-index:60;
  margin:var(--nav-margin);height:var(--header-height);
  display:flex;align-items:stretch;justify-content:space-between;gap:.6rem;
  pointer-events:none}
.masthead .pill{position:relative;z-index:0;pointer-events:auto;
  display:flex;align-items:center;gap:.35rem;
  border-radius:var(--headerRadius);padding:0 .5rem}
.masthead .pill:first-child{padding-left:1.1rem}
/* The blur sits on a pseudo-element and not on `.pill` itself. A
   `backdrop-filter` makes its element a containing block for every
   `position:fixed` descendant, and the menu panel is one — put the filter on
   the pill and the full-width panel is trapped inside a 56px box. */
.masthead .pill::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;background:var(--translucent);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--rule);box-shadow:var(--box-shadow)}

.mark{display:flex;align-items:center;gap:.5rem;text-decoration:none;
  color:var(--ink);font:700 .95rem/1 var(--sans);letter-spacing:-.01em;
  flex:0 0 auto;margin-right:auto}
.masthead .mark{margin-right:.35rem}
.mark .dot{width:.7rem;height:.7rem;border-radius:50%;
  border:2.4px solid var(--accent);flex:0 0 auto;
  transition:transform .4s var(--ease)}
.mark:hover .dot{transform:scale(1.25)}

/* Every control in the bar is the same 40px pill, so the row reads as one set
   of objects rather than a link, a button and a word. `--navigation-button-
   hover-bg-color` in the reference is the lime; here it is a neutral, because
   the lime is the call to action sitting two pills to the right of it and two
   lime objects in one 56px bar is one too many. */
.navbtn{display:inline-flex;align-items:center;gap:.45rem;height:40px;
  padding:0 .95rem;border:0;border-radius:var(--radius-15);
  background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;
  font:700 var(--fs-btns)/1 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;
  transition:background .2s var(--ease)}
.navbtn:hover{background:var(--nav-hover)}
.navbtn.solid{background:var(--cta);color:var(--cta-ink)}
.navbtn.solid:hover{background:var(--cta-hover)}
/* The menu is an icon now, so it is square rather than a pill with a word in
   it, and the label it lost is on `aria-label` where a screen reader still
   reads it. */
.navbtn.icon{width:40px;padding:0;justify-content:center}

/* ── the menu ─────────────────────────────────────────────────── */
.menu{display:contents}
.menu>summary{list-style:none;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
/* Three lines. The outer two are the pseudo-elements; the middle one is the
   element's own background, which is why it can be widened to nothing on
   open — the bar does not vanish, it closes, while the other two cross. */
.burger{width:1.05rem;height:.72rem;position:relative;flex:0 0 auto;
  background:linear-gradient(currentColor,currentColor) no-repeat center;
  background-size:100% 1.6px;
  transition:background-size .25s var(--ease)}
.burger::before,.burger::after{content:"";position:absolute;left:0;right:0;
  height:1.6px;background:currentColor;transition:transform .3s var(--ease)}
.burger::before{top:0}.burger::after{bottom:0}
.menu[open] .burger{background-size:0 1.6px}
.menu[open] .burger::before{transform:translateY(.36rem) rotate(45deg)}
.menu[open] .burger::after{transform:translateY(-.36rem) rotate(-45deg)}

.menu>.panel{position:fixed;left:var(--nav-margin);right:var(--nav-margin);
  top:calc(var(--nav-margin) + var(--header-height) + 8px);
  bottom:var(--nav-margin);z-index:59;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-20);box-shadow:var(--shadow-lg);
  overflow-y:auto;overscroll-behavior:contain;
  padding:clamp(1.2rem,3vw,2.6rem);
  animation:menu-in .3s var(--ease) both}
@keyframes menu-in{from{opacity:0;transform:translateY(-.6rem)}}
.menu .cols{display:grid;gap:clamp(1.2rem,2.5vw,2.4rem);
  grid-template-columns:1fr;align-items:start}
@media (min-width:48rem){.menu .cols{grid-template-columns:1fr 1fr}}
@media (min-width:72rem){
  .menu .cols{grid-template-columns:repeat(4,1fr)}
  .menu .grp.wide{grid-column:span 2}
  .menu .grp.wide>.links{columns:2;column-gap:2rem}
  .menu .grp.wide .keep{break-inside:avoid;margin-bottom:1.1rem}
}
.menu .grp{border-bottom:1px solid var(--rule)}
.menu .grp>summary{list-style:none;cursor:pointer;
  font:300 var(--fs-d5)/1.2 var(--sans);padding:.9rem 0;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center}
.menu .grp>summary::-webkit-details-marker{display:none}
.menu .grp>summary::after{content:"+";font:300 1.4rem/1 var(--sans);
  color:var(--ink-3)}
.menu .grp[open]>summary::after{content:"\2212"}
/* Above the breakpoint every group is open and the marker means nothing —
   four columns of headings each with a plus beside it is a phone pattern that
   escaped onto a desktop. */
@media (min-width:48rem){
  .menu .grp{border-bottom:0}
  .menu .grp>summary{cursor:default;pointer-events:none;padding:0 0 .8rem;
    font:700 var(--fs-labs)/1 var(--sans);letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink-3);
    border-bottom:1px solid var(--rule);margin-bottom:.8rem}
  .menu .grp>summary::after{display:none}
  .menu .grp>.links{display:block!important}
}
.menu .grp .links{padding:0 0 1rem}
@media (min-width:48rem){.menu .grp .links{padding:0}}
.menu .links a{display:block;padding:.34rem 0;color:var(--ink-2);
  text-decoration:none;font-size:var(--fs-md);line-height:1.35;
  transition:color .2s,padding-left .25s var(--ease)}
.menu .links a:hover{color:var(--accent);padding-left:.35rem}
.menu .links a.grp-head{color:var(--ink);font-weight:600;padding:.85rem 0 .2rem}
.menu .links a.grp-head:first-child{padding-top:0}
.menu .foot{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.9rem 1.6rem;align-items:center}
.menu .foot .small{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0}
.menu .foot .small a{color:var(--ink-2);text-decoration:none}

/* ── media ────────────────────────────────────────────────────── */
/* The reference page is carried by photography: `img[data-focal-point]` with
   `object-fit:cover`, and a `--dark-contrast-linear-gradient-*` scrim behind
   any text laid over it. Both are built here. Until a real file lands in
   `web/media/` the frame draws a figure instead (below), in exactly the space
   the photograph will occupy — so the layout does not move when one arrives.
   The frame carries two ratios: a 21:9 band is a hero on a laptop and a
   letterbox slit on a phone. */
.media{position:relative;overflow:hidden;border-radius:var(--radius-20);
  aspect-ratio:var(--ratio-s,var(--ratio,16/9));background:var(--sunk);margin:0}
@media (min-width:48rem){.media{aspect-ratio:var(--ratio,16/9)}}
.media img{display:block;width:100%;height:100%;object-fit:cover;
  object-position:var(--focal,center)}
.media .scrim{position:absolute;inset:0;background:var(--scrim-b2t);
  pointer-events:none}
.media .over{position:absolute;left:0;right:0;bottom:0;padding:1.4rem 1.5rem;
  color:#fff}
.media .over h3,.media .over h4{color:#fff}
.media.art{background:var(--ground)}

.stage{position:relative;background:var(--deep);color:var(--on-deep);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);overflow:hidden;
  padding:clamp(3.5rem,7vw,6.5rem) 0 clamp(3.5rem,6vw,5.5rem)}
/* Two very soft pools of light, drawn with gradients rather than an image, so
   the slab is not a flat rectangle of one colour and nothing has to load. */
.stage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(60rem 34rem at 78% 8%,rgba(141,239,99,.13),transparent 62%),
    radial-gradient(48rem 40rem at 8% 92%,rgba(20,96,62,.42),transparent 65%)}
.stage>.wrap{position:relative}
.stage .grid-h{display:grid;gap:clamp(2.4rem,5vw,4.5rem);align-items:center}
@media (min-width:62rem){
  .stage .grid-h{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)}
}
.stage h1{color:#fff}
.stage .eyebrow{color:var(--cta)}
.stage .lede{color:var(--on-deep-2);max-width:34rem}
.stage .measure{max-width:52rem}
.stage .measure .lede,.stage .measure p{max-width:36rem}
.stage .kicker{font:400 .84rem/1.6 var(--sans);color:var(--on-deep-3);
  max-width:28rem}
.stage .actions{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;
  margin:2.2rem 0 0}

/* the running strip of evidence sources under the hero copy */
.proof{margin-top:2.6rem;padding-top:1.4rem;border-top:1px solid var(--rule-deep)}
.proof .lab{font:600 .64rem/1 var(--sans);letter-spacing:.15em;
  text-transform:uppercase;color:var(--on-deep-3);margin:0 0 .85rem}
.proof ul{display:flex;flex-wrap:wrap;gap:.4rem .5rem;margin:0;padding:0;
  list-style:none}
.proof li{font:500 .72rem/1 var(--sans);letter-spacing:.01em;
  color:var(--on-deep-2);border:1px solid var(--rule-deep);
  border-radius:var(--radius-pill);padding:.42rem .72rem;white-space:nowrap}
.proof li.more{border-color:transparent;color:var(--cta)}

/* ── the specimen ─────────────────────────────────────────────── */
.specimen{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;
  color:var(--ink)}
.stage .specimen{transform:perspective(1600px) rotateY(-3.2deg) rotateX(1.4deg);
  transition:transform .7s var(--ease)}
.stage .specimen:hover{transform:none}
.specimen .top{padding:1.15rem 1.35rem 1rem;border-bottom:1px solid var(--rule);
  background:var(--raised);display:grid;gap:.15rem}
.specimen .top .who{font:300 1.5rem/1.16 var(--serif);margin:.3rem 0 .25rem;
  color:var(--ink)}
.specimen .top .small,.specimen .top .eyebrow{margin-bottom:0}
.specimen .body{padding:1.15rem 1.35rem 1.35rem;display:grid;gap:.85rem}
.specimen .body>p{margin:0;font-size:.94rem;color:var(--ink-2)}
.specimen .strip{display:flex;border-top:1px solid var(--rule);
  background:var(--raised)}
.specimen .strip div{flex:1;padding:.85rem 1rem;text-align:center;
  border-left:1px solid var(--rule)}
.specimen .strip div:first-child{border-left:0}
.specimen .strip b{display:block;font:400 1.25rem/1 var(--serif);
  color:var(--ink);font-variant-numeric:tabular-nums}
.specimen .strip span{font:500 .6rem/1.4 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}

/* ── the measured band ────────────────────────────────────────── */
/* Four numbers, and every one of them is counted by code at import: the
   platform table, the category table, the issue cadence. A statistics band
   with a rounded-up number in it is the fastest way to stop being believed by
   the kind of person who buys this. */
.band{border-block:1px solid var(--rule);background:var(--ground)}
.band .row{display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:52rem){.band .row{grid-template-columns:repeat(4,1fr)}}
.band .cell{padding:clamp(1.8rem,3.4vw,2.8rem) clamp(1rem,2vw,1.8rem);
  border-left:1px solid var(--rule);border-top:1px solid var(--rule)}
.band .cell:nth-child(-n+2){border-top:0}
.band .cell:nth-child(2n+1){border-left:0}
@media (min-width:52rem){
  .band .cell{border-top:0}
  .band .cell:nth-child(2n+1){border-left:1px solid var(--rule)}
  .band .cell:first-child{border-left:0}
}
.band .n{font:300 var(--fs-d2)/100% var(--serif);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);
  display:block;margin-bottom:.5rem}
.band .n sup{font-size:.4em;vertical-align:super;color:var(--accent);
  letter-spacing:0;margin-left:.15em}
.band .k{font:600 .68rem/1.3 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:.5rem}
.band .d{font:400 .82rem/1.55 var(--sans);color:var(--ink-3);margin:0;
  max-width:17rem}

/* ── editorial cards ──────────────────────────────────────────── */
.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(18rem,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.pair{grid-template-columns:1fr}
@media (min-width:46rem){.pair{grid-template-columns:1fr 1fr}}
.card{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:1.7rem 1.8rem}
.card h3{font:300 1.3rem/1.22 var(--serif);margin:0 0 .55rem}
.card p:last-child{margin-bottom:0}
section.deep .card{background:var(--deep-2);border-color:var(--rule-deep)}
section.sunk .card,section.sunk .plate,section.sunk .finding,
section.sunk .specimen{background:var(--ground)}
section.sunk .src{background:var(--ground)}
section.sunk .specimen .top,section.sunk .specimen .strip{
  background:var(--surface)}

/* The editorial card: a numbered plate above a light serif heading, and a
   hairline that draws itself across the top on hover. The number is real —
   these are ordered by what the reader meets first, not decorated. */
.plates{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media (min-width:50rem){.plates{grid-template-columns:repeat(3,1fr)}}
.plate{position:relative;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-lg);padding:2rem 1.8rem 1.9rem;overflow:hidden;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.plate::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--cta);transform:scaleX(0);transform-origin:left;
  transition:transform .5s var(--ease)}
.plate:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.plate:hover::before{transform:scaleX(1)}
.plate .idx{font:600 .68rem/1 var(--sans);letter-spacing:.14em;
  color:var(--accent);display:block;margin-bottom:1.6rem;
  font-variant-numeric:tabular-nums}
.plate h3{font:300 1.42rem/1.2 var(--serif);margin:0 0 .7rem}
.plate p{margin:0;color:var(--ink-2);font-size:.95rem}
.plate .foot{margin-top:1.3rem;padding-top:.9rem;
  border-top:1px dotted var(--rule-2);font:500 .72rem/1.5 var(--sans);
  letter-spacing:.02em;color:var(--ink-3)}

.fig{position:absolute;inset:0;overflow:hidden;display:flex;
  flex-direction:column;gap:clamp(.7rem,1.6vw,1.2rem);
  padding:clamp(1rem,2.3vw,2rem);margin:0}
.fig-head{flex:0 0 auto;display:flex;justify-content:space-between;
  align-items:baseline;gap:1rem;font:600 var(--fs-labs)/1 var(--sans);
  letter-spacing:.14em;text-transform:uppercase}
.fig-cap{flex:0 0 auto;margin:0;font:400 var(--fs-cap)/1.5 var(--sans);
  max-width:46rem}
.fig-cap b{font-weight:600}

/* the coverage field — rows are sources, columns are issues */
.fig-coverage{background:var(--deep);color:var(--on-deep)}
.fig-coverage::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(44rem 26rem at 88% 2%,rgba(150,248,120,.13),
    transparent 62%)}
.fig-coverage>*{position:relative}
.fig-coverage .f-k{color:var(--cta)}
.fig-coverage .f-v{color:var(--on-deep-3);font-weight:400;letter-spacing:.09em}
.fig-coverage .fig-cap{display:none;color:var(--on-deep-3)}
.f-field{flex:1 1 auto;min-height:0;display:grid;grid-auto-rows:1fr;
  gap:clamp(2px,.55vw,6px)}
.f-field .f-row{display:grid;grid-template-columns:1fr;min-height:0;
  gap:clamp(.5rem,1.3vw,1rem)}
.f-field .f-lab{display:none}
.f-cells{display:grid;grid-template-columns:repeat(12,1fr);min-height:0;
  gap:clamp(2px,.5vw,5px)}
.f-cells i{border-radius:3px;background:rgba(241,238,234,.055)}
/* Narrow crops to the *recent* end. Cropping the other way is what hides
   every lime mark on a phone, and the lime is the thing the caption is
   about. */
.f-cells i:nth-child(-n+12){display:none}
.f-cells i.l1{background:rgba(25,122,86,.46)}
.f-cells i.l2{background:rgba(25,122,86,.72)}
.f-cells i.l3{background:#3FBF86}
.f-cells i.new{background:var(--cta)}
@media (min-width:48rem){
  .fig-coverage .fig-cap{display:block}
  .f-field .f-row{grid-template-columns:11rem 1fr}
  .f-field .f-lab{display:block;align-self:center;font:500 .74rem/1 var(--sans);
    color:var(--on-deep-2);white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis}
  .f-cells{grid-template-columns:repeat(24,1fr)}
  .f-cells i:nth-child(-n+12){display:block}
}

/* the issue — a sheet larger than its frame, so it reads as a document
   continuing past the edge rather than an icon of one */
.fig-issue{background:var(--ground);padding:0;display:block}
.fig-issue .f-sheet{position:absolute;top:6%;left:6%;right:6%;bottom:-18%;
  overflow:hidden;background:var(--surface);border-radius:var(--radius-10);
  box-shadow:inset 0 0 0 1px var(--rule),var(--shadow-lg);
  padding:1.7em 1.8em;display:flex;flex-direction:column;gap:.85em;
  font-size:clamp(8.5px,1.02vw,12.5px);color:var(--ink-2)}
.fig-issue .f-sheet::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:26%;pointer-events:none;
  background:linear-gradient(0deg,var(--surface),transparent)}
.fig-issue .f-mast{display:flex;justify-content:space-between;gap:1em;
  font:600 .8em/1 var(--sans);letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}
.fig-issue h4{margin:0;font:300 2.4em/1.08 var(--serif);color:var(--ink);
  letter-spacing:-.025em}
.fig-issue .f-dek{margin:-.5em 0 0;font:400 .92em/1.5 var(--sans);
  color:var(--ink-3)}
.fig-issue .f-open{margin:0;padding-top:.85em;border-top:1px solid var(--rule);
  font:400 1.04em/1.55 var(--sans)}
.fig-issue .f-item{display:flex;flex-direction:column;gap:.4em;padding-left:1em;
  border-left:2px solid var(--rule-2)}
.fig-issue .f-item.high{border-left-color:var(--bad)}
.fig-issue .f-item.med{border-left-color:var(--warn)}
.fig-issue .f-chip{align-self:flex-start;padding:.45em .75em;
  border-radius:var(--radius-pill);background:var(--raised);color:var(--ink-3);
  font:600 .72em/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.fig-issue .f-item.high .f-chip{background:var(--bad-tint);color:var(--bad)}
.fig-issue .f-item.med .f-chip{background:var(--warn-tint);color:var(--warn)}
.fig-issue h5{margin:0;font:300 1.32em/1.24 var(--serif);color:var(--ink)}
.fig-issue .f-item p{margin:0;font:400 .95em/1.55 var(--sans)}
.fig-issue .f-seen{font:400 .85em/1.4 var(--sans);color:var(--ink-3)}

/* the wall — every platform in the directory, set as texture. The mask is
   what crops it: a fade needs a colour to fade to, and a mask does not, so
   the same rule works on either ground. */
.fig-wall{background:var(--ground);box-shadow:inset 0 0 0 1px var(--rule)}
.fig-wall .f-list{flex:1 1 auto;min-height:0;overflow:hidden;margin:0;
  font:500 var(--fs-labs)/1.95 var(--sans);letter-spacing:.085em;
  text-transform:uppercase;color:var(--rule-2);text-align:justify;
  -webkit-mask-image:linear-gradient(180deg,#000 64%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 64%,transparent 97%)}
.fig-wall .f-list b{font-weight:600;color:var(--accent)}
@media (min-width:48rem){
  .fig-wall .f-list{font-size:clamp(1rem,1.7vw,1.7rem);line-height:1.75}
}
.fig-wall .fig-cap{color:var(--ink-3);padding-top:clamp(.4rem,1vw,.9rem)}
.fig-wall .fig-cap b{color:var(--ink)}

/* the evidence — one quote, and the line that says where it came from */
.fig-evidence{background:var(--accent-tint);color:var(--ink);
  justify-content:center;gap:clamp(.8rem,1.7vw,1.25rem)}
.fig-evidence blockquote{margin:0;max-width:22ch;text-indent:-.42em;
  font:300 var(--fs-d3)/1.2 var(--serif);letter-spacing:-.025em;
  color:var(--accent-deep);text-wrap:balance}
.fig-evidence blockquote::before{content:"\201C"}
.fig-evidence blockquote::after{content:"\201D"}
.fig-evidence .f-prov{margin:0;display:flex;align-items:flex-start;gap:.6rem;
  font:600 var(--fs-labs)/1.4 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent)}
/* Aligned to the first line, not to the middle of a block that wraps to two
   on a phone — a bullet floating between two lines reads as a mistake. */
.fig-evidence .f-dot{flex:0 0 auto;margin-top:.42em;
  width:.5rem;height:.5rem;border-radius:50%;
  background:var(--accent);box-shadow:0 0 0 4px rgba(25,122,86,.16)}
.fig-evidence .fig-cap{color:var(--ink-2);
  padding-top:clamp(.7rem,1.5vw,1.05rem);
  border-top:1px solid color-mix(in srgb,currentColor 20%,transparent)}
.fig-evidence .fig-cap a{color:var(--accent-deep)}

/* the ramp — `analysis.BANDS`, which is three floors, drawn as three steps */
.fig-ramp{background:var(--ground);box-shadow:inset 0 0 0 1px var(--rule)}
.fig-ramp .f-k{color:var(--accent)}
.fig-ramp .f-v{color:var(--ink-3);font-weight:400;letter-spacing:.04em;
  text-transform:none}
.f-steps{flex:1 1 auto;min-height:0;display:grid;align-items:end;
  grid-template-columns:repeat(3,1fr);gap:clamp(3px,.7vw,7px)}
.f-step{height:var(--h,100%);min-height:0;overflow:hidden;
  padding:clamp(.7rem,1.4vw,1.15rem);background:var(--deep-2);
  border-radius:var(--radius-10) var(--radius-10) 0 0;color:var(--on-deep);
  display:flex;flex-direction:column;gap:.25rem;padding-bottom:clamp(.9rem,1.6vw,1.3rem)}
.f-step .f-tag{margin-top:auto}
/* The lime marks the threshold that matters, and it marks it by colouring the
   number. A 3px cap on a rounded corner renders as a swoosh, not a cap. */
.f-step.high{background:var(--deep)}
.f-step.high .f-num{color:var(--cta)}
.f-step .f-num{font:300 var(--fs-d3)/1 var(--serif);
  letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff}
.f-step .f-num sup{font-size:.42em;vertical-align:super;margin-left:.06em;
  color:var(--on-deep-3)}
.f-step .f-tag{font:600 var(--fs-labs)/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-deep-2)}
.f-step .f-note{display:none;font:400 var(--fs-cap)/1.4 var(--sans);
  color:var(--on-deep-3)}
@media (min-width:48rem){.f-step .f-note{display:block}}
.fig-ramp .fig-cap{color:var(--ink-3)}

/* ── the opener ────────────────────────────────────────────────── */
.opener{padding:clamp(2.4rem,5vw,4.2rem) 0 0;text-align:center}
.opener .eyebrow{color:var(--ink-3);margin-bottom:.9rem;justify-content:center}
.opener .eyebrow::before{display:none}
.opener h1{margin:0 auto;max-width:19ch;font-family:var(--serif);
  font-weight:300;font-size:var(--fs-d1);line-height:var(--lh-d1);
  letter-spacing:-.03em;color:var(--ink)}
.opener .lede{margin:1.3rem auto 0;max-width:52ch}

/* ── the showcase: an article card laid over the band ───────────── */
.showcase{position:relative;margin-top:clamp(1.5rem,3vw,2.6rem)}
.overcard{display:grid;gap:.65rem;text-align:left;padding:clamp(1.1rem,2vw,1.6rem);
  border-radius:var(--radius-20);background:var(--surface);
  border:1px solid var(--rule);margin-top:.9rem;text-decoration:none}
.overcard .meta{font:600 var(--fs-labs)/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3)}
.overcard h2{margin:0;font:300 var(--fs-d5)/1.18 var(--serif);
  letter-spacing:-.02em;color:var(--ink)}
.overcard p{margin:0;font-size:var(--fs-md);color:var(--ink-2)}
.overcard .btn{justify-self:start;margin-top:.35rem}
@media (min-width:48rem){
  /* The article card is the caption here, and two captions in one corner of
     one band read as a layout that lost an argument with itself. */
  .showcase .fig-cap{display:none}
  .showcase .overcard{position:absolute;z-index:2;margin:0;
    left:clamp(1rem,2.2vw,2rem);bottom:clamp(1rem,2.2vw,2rem);
    width:min(27rem,46%);background:var(--translucent);
    -webkit-backdrop-filter:saturate(160%) blur(16px);
    backdrop-filter:saturate(160%) blur(16px);box-shadow:var(--shadow-lg)}
}

/* ── the spotlight strip ───────────────────────────────────────── */
.spotlight{display:flex;flex-wrap:wrap;margin-top:clamp(1rem,2vw,1.5rem);
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-20);overflow:hidden}
.spotlight a{flex:1 1 13rem;padding:1.15rem 1.1rem;text-align:center;
  border-left:1px solid var(--rule);text-decoration:none;
  font:600 var(--fs-labs)/1.35 var(--sans);letter-spacing:.115em;
  text-transform:uppercase;color:var(--ink-2);
  transition:background .25s var(--ease),color .25s var(--ease)}
.spotlight a:first-child{border-left:0}
.spotlight a span{border-bottom:1px solid var(--rule-2);padding-bottom:.18rem}
.spotlight a:hover{background:var(--nav-hover);color:var(--accent)}
.spotlight a:hover span{border-color:var(--accent)}

/* ── the deep slab ─────────────────────────────────────────────── */
.slab{background:var(--deep);color:var(--on-deep);overflow:hidden;
  border-radius:var(--radius-30);padding:clamp(1.9rem,4.2vw,3.4rem);
  display:grid;gap:clamp(1.3rem,3vw,3rem);position:relative}
.slab::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38rem 24rem at 96% 0%,rgba(150,248,120,.11),
    transparent 64%)}
.slab>*{position:relative}
@media (min-width:60rem){.slab{grid-template-columns:1fr 1fr;align-items:center}}
.slab h2{margin:0;max-width:13ch;color:#fff;font-family:var(--serif);
  font-weight:300;font-size:var(--fs-d2);line-height:var(--lh-d2);
  letter-spacing:-.03em}
.slab p{margin:0 0 1.7rem;max-width:44ch;color:var(--on-deep-2)}

/* ── a section head with a link on its right ───────────────────── */
.rowhead{display:flex;flex-wrap:wrap;justify-content:space-between;
  align-items:flex-end;gap:1.4rem 2rem;margin-bottom:clamp(1.2rem,2.4vw,2rem)}
.rowhead .measure{margin:0}
.rowhead h2{margin:0 0 .7rem;font-family:var(--serif);font-weight:300;
  font-size:var(--fs-d2);line-height:var(--lh-d2);letter-spacing:-.03em}
.rowhead .more{white-space:nowrap;color:var(--ink);text-decoration:underline;
  text-underline-offset:.4em;text-decoration-color:var(--rule-2);
  font:600 var(--fs-labs)/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase}
.rowhead .more:hover{color:var(--accent);text-decoration-color:var(--accent)}

/* ── article tiles ─────────────────────────────────────────────── */
.tiles{display:grid;gap:clamp(.8rem,1.5vw,1.1rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.tile{display:flex;flex-direction:column;overflow:hidden;
  text-decoration:none;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-20);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.tile>.top{position:relative;aspect-ratio:var(--head,4/3);overflow:hidden;
  flex:0 0 auto}
.tile .chip-over.high{background:var(--bad);color:#fff}
.tile .chip-over.med{background:var(--warn);color:#231C05}
.tile .chip-over.flat{background:var(--surface);color:var(--ink-2);
  box-shadow:inset 0 0 0 1px var(--rule)}
.tile .chip-over{position:absolute;z-index:2;top:.7rem;left:.7rem;
  padding:.5rem .68rem;border-radius:var(--radius-5);background:var(--cta);
  color:var(--cta-ink);font:700 var(--fs-labs)/1 var(--sans);
  letter-spacing:.11em;text-transform:uppercase}
.tile .body{flex:1;display:grid;gap:.5rem;align-content:start;
  padding:1.1rem 1.15rem 1.35rem}
.tile .meta{font:600 var(--fs-labs)/1 var(--sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.tile h3{margin:0;font:300 var(--fs-d5)/1.19 var(--serif);
  letter-spacing:-.02em;color:var(--ink)}
.tile:hover h3{text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1px}
.tile p{margin:0;font-size:var(--fs-md);color:var(--ink-2)}

/* the motif that stands in for a photograph */
.head-art{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:flex-end;gap:.55rem;padding:clamp(.9rem,1.8vw,1.3rem)}
.t-deep{background:var(--deep);color:var(--on-deep)}
.t-forest{background:var(--deep-2);color:var(--on-deep)}
.t-tint{background:var(--accent-tint);color:var(--accent-deep)}
/* Green ink, not the page's near-black: `currentColor` is what draws the bars
   and the cells, and grey bars on stone read as a loading skeleton. */
.t-stone{background:var(--raised);color:var(--accent-deep)}
.head-art .big{font:300 clamp(3.2rem,9vw,7.5rem)/.85 var(--serif);
  letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.head-art .big sup{font-size:.32em;vertical-align:super;letter-spacing:0}
.head-art .quo{font:300 var(--fs-d6)/1.28 var(--serif);letter-spacing:-.02em}
.head-art .word{font:300 var(--fs-d3)/1.06 var(--serif);letter-spacing:-.03em;
  text-wrap:balance}
.head-art .cap{font:600 var(--fs-labs)/1.35 var(--sans);letter-spacing:.115em;
  text-transform:uppercase;opacity:.72}
.head-art .bars{display:flex;gap:.3rem}
.head-art .bars i{flex:1;height:.8rem;border-radius:var(--radius-5);
  background:currentColor;opacity:.15}
.head-art .bars i.on{opacity:.85}
.head-art .marks{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.head-art .marks i{aspect-ratio:1;border-radius:2px;
  background:currentColor;opacity:.1}
.head-art .marks i.l1{opacity:.28}
.head-art .marks i.l2{opacity:.5}
.head-art .marks i.l3{opacity:.8}
.head-art .marks i.new{opacity:1;background:var(--cta)}

/* ── the bright feature panel ──────────────────────────────────── */
/* Pale mint, not the lime. This file's own rule is that `--cta` is one bright
   colour and it is *only ever a fill on a control* — a full-bleed panel of it
   is a wall of acid green with a document floating on it, and it makes the
   lime pill inside it disappear. The panel is the tint; the pill is the
   lime; that contrast is the whole point of having a call-to-action colour. */
.feature{background:var(--accent-tint);color:var(--ink);overflow:hidden;
  border-radius:var(--radius-30);padding:clamp(1.7rem,3.6vw,2.8rem);
  display:grid;gap:clamp(1.4rem,3vw,2.6rem);align-items:center}
@media (min-width:62rem){.feature{grid-template-columns:1fr 1.02fr}}
.feature .eyebrow{color:var(--accent)}
.feature h2{margin:0;color:var(--ink);font-family:var(--serif);
  font-weight:300;font-size:var(--fs-d2);line-height:var(--lh-d2);
  letter-spacing:-.03em}
.feature p{margin:1rem 0 1.7rem;max-width:40ch;color:var(--ink-2)}
.feature .btn{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.feature .btn:hover{background:var(--cta-hover)}
.feature .media,.feature .media.art{border:0}
/* The same panel in the page's own colours, for the band that must not shout
   twice — two lime panels on one page is one lime panel too many. */
.feature.quiet{background:var(--surface);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--rule)}
.feature.quiet .eyebrow{color:var(--accent)}
.feature.quiet h2{color:var(--ink)}
.feature.quiet p{color:var(--ink-2)}
.feature.quiet .btn{background:var(--cta);color:var(--cta-ink);
  border-color:var(--cta)}
.feature.quiet .btn:hover{background:var(--cta-hover)}
.feature.quiet .btn.ghost{background:transparent;color:var(--ink);
  border-color:var(--rule-2)}

/* ── the mosaic ────────────────────────────────────────────────── */
/* `start`, not the default `stretch`: a masonry whose tiles are all pulled to
   the height of the tallest in the row is a table with rounded corners. */
.mosaic{display:grid;gap:clamp(.8rem,1.5vw,1.1rem);align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
@media (min-width:62rem){
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .mosaic .tile.wide{grid-column:span 2}
  .mosaic .tile.tall>.top{--head:4/5}
  .mosaic .tile.wide>.top{--head:16/9}
  .mosaic .tile.flat>.top{--head:5/3}
}

/* ── the two-up promos ─────────────────────────────────────────── */
.duo{display:grid;gap:clamp(.8rem,1.5vw,1.1rem)}
@media (min-width:62rem){.duo{grid-template-columns:1.12fr 1fr}}
.duo .stack{display:grid;gap:clamp(.8rem,1.5vw,1.1rem)}
.promo{position:relative;display:flex;flex-direction:column;
  justify-content:flex-end;gap:.75rem;min-height:13rem;overflow:hidden;
  border-radius:var(--radius-20);text-decoration:none;
  padding:clamp(1.3rem,2.6vw,2.1rem);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.promo:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.promo .eyebrow{margin:0}
.promo h3{margin:0;max-width:16ch;font:300 var(--fs-d4)/1.14 var(--serif);
  letter-spacing:-.03em}
.promo .btn{align-self:flex-start;margin-top:.4rem}
.promo.dark{background:var(--deep);color:var(--on-deep)}
.promo.dark h3{color:#fff}
.promo.dark .eyebrow{color:var(--cta)}
.promo.dark::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(26rem 18rem at 92% 4%,rgba(150,248,120,.13),
    transparent 62%)}
.promo.dark>*{position:relative}
.promo.tall{min-height:22rem}
.promo.light{background:var(--accent-tint);color:var(--accent-deep)}
.promo.light h3{color:var(--accent-deep)}
.promo.light .eyebrow{color:var(--accent)}

/* ── the enrolment band ────────────────────────────────────────── */
.enrol{background:var(--deep);color:var(--on-deep);overflow:hidden;
  border-radius:var(--radius-30);padding:clamp(1.9rem,4.2vw,3.2rem);
  display:grid;gap:clamp(1.4rem,3vw,2.6rem);position:relative}
.enrol::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(40rem 26rem at 4% 100%,rgba(20,96,62,.5),
    transparent 62%)}
.enrol>*{position:relative}
@media (min-width:62rem){.enrol{grid-template-columns:1fr 1fr;align-items:center}}
.enrol h2{margin:0;max-width:17ch;color:#fff;font-family:var(--serif);
  font-weight:300;font-size:var(--fs-d3);line-height:var(--lh-d3);
  letter-spacing:-.03em}
.enrol p{margin:.9rem 0 0;max-width:42ch;color:var(--on-deep-2)}
.enrolbar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;
  padding:.5rem;background:var(--ground);border-radius:var(--radius-20)}
.enrolbar .say{flex:0 0 auto;padding:0 .3rem 0 .8rem;color:var(--ink-3);
  font:600 var(--fs-labs)/1 var(--sans);letter-spacing:.12em;
  text-transform:uppercase}
.enrolbar .field{flex:1 1 9rem;min-width:0;width:auto;
  border-radius:var(--radius-15)}
.enrolbar .btn{flex:0 0 auto}

/* ── the footer statement ──────────────────────────────────────── */
footer.site .say{max-width:16ch;margin:0 0 1.4rem;color:#fff;
  font-family:var(--serif);font-weight:300;font-size:var(--fs-d3);
  line-height:var(--lh-d3);letter-spacing:-.03em}
footer.site .assist{color:var(--on-deep-3)}
footer.site .assist p{margin:0 0 1.2rem;max-width:26ch;font-size:var(--fs-md)}
/* Ask an AI: five plain links, sized like the utility row they sit beside. */
footer.site .askai{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 1.1rem}
footer.site .askai a{display:inline-block;padding:.34rem .62rem;border-radius:999px;
  border:1px solid color-mix(in oklab,currentColor 22%,transparent);
  font:600 .74rem/1 var(--sans);text-decoration:none;opacity:.82;
  transition:opacity .15s,border-color .15s}
footer.site .askai a:hover{opacity:1;
  border-color:color-mix(in oklab,currentColor 48%,transparent)}
footer.site .assist .btn{display:inline-flex}

.standfirst{margin:0;font:300 var(--fs-d5)/1.42 var(--serif);
  letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
sup.cite{font:600 .62em/1 var(--sans);letter-spacing:.02em;margin-left:.4em;
  vertical-align:super;white-space:nowrap}
sup.cite a{color:var(--accent);text-decoration:none;padding:0 .05em}
sup.cite a:hover{text-decoration:underline}

/* ── tables ───────────────────────────────────────────────────── */
table.board,table.tally{width:100%;border-collapse:collapse;
  font:400 var(--fs-md)/1.5 var(--sans);min-width:44rem}
table.board th,table.board td,table.tally th,table.tally td{
  text-align:left;padding:.95rem 1rem;border-top:1px solid var(--rule);
  vertical-align:baseline}
table.board thead th,table.tally thead th{border-top:0;
  border-bottom:1px solid var(--rule-2);
  font:600 var(--fs-labs)/1.3 var(--sans);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
table.board tbody th,table.tally tbody th{font-weight:600;color:var(--ink);
  white-space:nowrap;font-size:var(--fs-md);letter-spacing:0;
  text-transform:none}
table.board td.num,table.tally td.num,table.tally th.num{
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.board td.num b{font:300 var(--fs-d6)/1 var(--serif);color:var(--ink)}
table.board td.num span{color:var(--ink-3);font-size:var(--fs-sm)}
table.board td.reads{color:var(--ink-2);min-width:16rem}
table.tally td.where{color:var(--ink-3);font-size:var(--fs-sm)}
table.tally td.num.neg{color:var(--bad);font-weight:600}
table.tally td.num.pos{color:var(--good);font-weight:600}
.tally td.split{width:38%;min-width:11rem}
.tally .bar{display:flex;height:.85rem;border-radius:var(--radius-5);
  overflow:hidden;gap:2px;min-width:2px}
.tally .bar i{display:block;height:100%}
.tally .bar i.neg{background:var(--bad)}
.tally .bar i.mid{background:var(--rule-2)}
.tally .bar i.pos{background:var(--good)}
.tally .key{display:inline-flex;align-items:center;gap:.35rem;flex-wrap:wrap;
  font:600 var(--fs-labs)/1 var(--sans);letter-spacing:.1em;color:var(--ink-3)}
.tally .key i{width:.7rem;height:.7rem;border-radius:2px;margin-left:.5rem}
.tally .key i:first-child{margin-left:0}
.tally .key i.neg{background:var(--bad)}
.tally .key i.mid{background:var(--rule-2)}
.tally .key i.pos{background:var(--good)}

/* ── a quoted review, and the line that sources it ────────────── */
.quoted{margin:1rem 0 0;padding:0 0 0 1.1rem;
  border-left:2px solid var(--rule-2)}
.quoted p{margin:0;font:300 var(--fs-d6)/1.38 var(--serif);color:var(--ink);
  letter-spacing:-.012em;text-wrap:pretty}
.quoted cite{display:block;margin-top:.5rem;font-style:normal;
  font:600 var(--fs-labs)/1.4 var(--sans);letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}

/* ── the same complaint, on several sites ─────────────────────── */
.cross{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-20);padding:clamp(1.4rem,2.8vw,2.1rem);
  margin-bottom:1.1rem}
.cross h3{margin:0 0 .6rem;font:300 var(--fs-d4)/1.16 var(--serif);
  letter-spacing:-.025em}
.cross p{margin:0 0 1rem;color:var(--ink-2);max-width:56ch}
.cross .srcs{margin-bottom:.4rem}
section.sunk .cross{background:var(--ground)}

/* ── what moved ───────────────────────────────────────────────── */
.moves{display:grid;gap:clamp(.8rem,1.6vw,1.1rem);
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.move{background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius-20);padding:1.4rem 1.5rem;
  border-top:3px solid var(--rule-2)}
.move.up{border-top-color:var(--good)}
.move.down{border-top-color:var(--bad)}
.move .k{margin:0 0 .7rem;font:600 var(--fs-labs)/1 var(--sans);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.move .v{margin:0;display:flex;align-items:baseline;gap:.5rem;
  font:300 var(--fs-d3)/1 var(--serif);letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.move .was{color:var(--ink-3)}
.move .arrow{font-size:.5em;color:var(--ink-3)}
.move.up .now{color:var(--good)}
.move.down .now{color:var(--bad)}
.move .d{margin:.7rem 0 0;font-size:var(--fs-sm);color:var(--ink-3)}
section.sunk .move{background:var(--ground)}

/* ── where it is costing you ──────────────────────────────────── */
.pain{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;
  padding:1.8rem 0;border-top:1px solid var(--rule)}
.pain:first-child{border-top:0;padding-top:0}
.pain .idx{font:600 var(--fs-labs)/1.4 var(--sans);letter-spacing:.12em;
  color:var(--accent);font-variant-numeric:tabular-nums}
.pain h3{margin:0 0 .4rem;font:300 var(--fs-d4)/1.16 var(--serif);
  letter-spacing:-.025em}
.pain .line{margin:0;color:var(--ink-3);font-size:var(--fs-md)}

/* ── where we looked, and what we could not ───────────────────── */
.looked,.absent{margin:0;padding:0;list-style:none;display:grid;gap:.1rem}
.looked li{display:flex;align-items:baseline;gap:.8rem;padding:.7rem 0;
  border-top:1px solid var(--rule);font-size:var(--fs-md)}
.looked li:first-child{border-top:0}
.looked b{font-weight:600;color:var(--ink)}
.looked span{margin-left:auto;font:600 var(--fs-labs)/1 var(--sans);
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);
  white-space:nowrap}
.looked li.read span{color:var(--good)}
.looked li.absent span,.looked li.blocked span{color:var(--warn)}
.absent li{position:relative;padding:.6rem 0 .6rem 1.4rem;
  color:var(--ink-2);font-size:var(--fs-md)}
.absent li::before{content:"";position:absolute;left:0;top:1.05em;
  width:.55rem;height:1px;background:var(--rule-2)}

/* ── the appendix ─────────────────────────────────────────────── */
.appendix{margin:0;padding:0;list-style:none;counter-reset:none}
.appendix li{display:grid;grid-template-columns:2.2rem 1fr;gap:.6rem;
  padding:1rem 0;border-top:1px solid var(--rule);scroll-margin-top:6rem}
.appendix li:first-child{border-top:0}
.appendix li:target{background:var(--accent-tint);border-radius:var(--radius-10);
  padding-inline:.8rem;margin-inline:-.8rem}
.appendix .n{font:600 var(--fs-labs)/1.7 var(--sans);color:var(--accent);
  font-variant-numeric:tabular-nums}
.appendix a{color:var(--ink);font-weight:500;display:block;
  text-underline-offset:.22em}
.appendix .u,.appendix .w{display:block;font-size:var(--fs-sm);
  color:var(--ink-3);word-break:break-all}
.appendix .w{word-break:normal}

.sectors{position:relative}
.sectors input{position:absolute;opacity:0;width:1px;height:1px;margin:0;
  pointer-events:none}
.tabbar{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid var(--rule);margin-bottom:2.4rem;
  -webkit-overflow-scrolling:touch}
.tabbar::-webkit-scrollbar{display:none}
.tabbar label{flex:0 0 auto;cursor:pointer;white-space:nowrap;
  font:500 .88rem/1 var(--sans);color:var(--ink-3);
  padding:.95rem 1.05rem;border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .25s,border-color .25s}
.tabbar label:hover{color:var(--ink)}
.sectors input:focus-visible+label,.sectors label:focus-visible{
  outline:2px solid var(--accent);outline-offset:-2px;border-radius:3px}
.pane{display:none}
.pane .inner{display:grid;gap:clamp(1.6rem,3.5vw,3rem);align-items:start}
@media (min-width:56rem){
  .pane .inner{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
}
.pane h3{font:300 clamp(1.5rem,2.6vw,2.1rem)/1.16 var(--serif);margin:0 0 .7rem}
.pane .said{color:var(--ink-2);margin:0 0 1.4rem}
.srcs{display:flex;flex-wrap:wrap;gap:.45rem}
.src{font:500 .78rem/1 var(--sans);color:var(--ink-2);background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--radius-pill);
  padding:.5rem .85rem;white-space:nowrap;
  transition:border-color .25s,color .25s,background .25s}
.src:hover{border-color:var(--accent);color:var(--accent)}
.src.uni{background:transparent;border-style:dashed;color:var(--ink-3)}
.srcs-head{font:600 .66rem/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 .9rem}
.srcs-head+.srcs{margin-bottom:1.8rem}

/* ── the method rail ──────────────────────────────────────────── */
/* Four steps on a single vertical line, numbered, because they genuinely are
   a sequence: nothing can be computed before the evidence is stored, and
   nothing can be compared before there is a previous issue to compare with. */
.rail{position:relative;display:grid;gap:0}
.rail::before{content:"";position:absolute;left:1.05rem;top:.6rem;bottom:2.4rem;
  width:1px;background:var(--rule)}
@media (min-width:52rem){.rail::before{left:1.35rem}}
.step{position:relative;padding:0 0 2.6rem 3.6rem}
@media (min-width:52rem){.step{padding-left:4.6rem}}
.step:last-child{padding-bottom:0}
.step .dot{position:absolute;left:0;top:.1rem;width:2.1rem;height:2.1rem;
  border-radius:50%;background:var(--ground);border:1px solid var(--rule-2);
  display:grid;place-items:center;font:600 .72rem/1 var(--sans);
  color:var(--accent);font-variant-numeric:tabular-nums}
@media (min-width:52rem){.step .dot{width:2.7rem;height:2.7rem;font-size:.78rem}}
.step h3{font:300 1.42rem/1.2 var(--serif);margin:0 0 .55rem}
.step p{color:var(--ink-2);margin:0 0 .6rem;max-width:40rem}
.step p:last-child{margin-bottom:0}
.step code{font-size:.86em;background:var(--surface);border:1px solid var(--rule);padding:.06rem .35rem;
  border-radius:4px}

/* ── the statement slab ───────────────────────────────────────── */
/* One pull-quote per page, at most. It is the only place the serif is allowed
   to run to four lines, and the only place the lime touches type. */
.statement{background:var(--deep);color:var(--on-deep);
  border-radius:var(--radius-xl);padding:clamp(2.6rem,6vw,5rem)}
.statement blockquote{margin:0;
  font:300 var(--fs-d3)/var(--lh-d3) var(--serif);
  letter-spacing:-.02em;color:#fff;max-width:26ch}
.statement blockquote em{font-style:normal;color:var(--cta)}
.statement .by{margin:1.8rem 0 0;font:500 .78rem/1.5 var(--sans);
  letter-spacing:.06em;text-transform:uppercase;color:var(--on-deep-3)}

/* ── findings, as the report renders them ─────────────────────── */
.finding{background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--rule-2);
  border-radius:0 var(--radius) var(--radius) 0;padding:1.2rem 1.35rem}
.finding.sev-high{border-left-color:var(--bad)}
.finding.sev-med{border-left-color:var(--warn)}
.finding h4{font:300 1.22rem/1.24 var(--serif);margin:0 0 .4rem}
.finding p{margin:0;color:var(--ink-2);font-size:.95rem}
.chip{display:inline-block;font:600 .62rem/1 var(--sans);letter-spacing:.11em;
  text-transform:uppercase;padding:.38rem .58rem;border-radius:6px;
  background:var(--accent-tint);color:var(--accent-deep);margin-bottom:.65rem}
.chip.high{background:var(--bad-tint);color:var(--bad)}
.chip.med{background:var(--warn-tint);color:var(--warn)}
.chip.good{background:var(--good-tint);color:var(--good)}
.seen{margin-top:.75rem;padding-top:.65rem;border-top:1px dotted var(--rule-2);
  font:400 .76rem/1.6 var(--sans);color:var(--ink-3)}
.sectors input#t-hospitality:checked~.tabbar label[for="t-hospitality"]{color:var(--ink);border-bottom-color:var(--accent)}.sectors input#t-hospitality:checked~.panes>.pane:nth-child(1){display:block;animation:pane-in .4s var(--ease) both}.sectors input#t-dining:checked~.tabbar label[for="t-dining"]{color:var(--ink);border-bottom-color:var(--accent)}.sectors input#t-dining:checked~.panes>.pane:nth-child(2){display:block;animation:pane-in .4s var(--ease) both}.sectors input#t-health:checked~.tabbar label[for="t-health"]{color:var(--ink);border-bottom-color:var(--accent)}.sectors input#t-health:checked~.panes>.pane:nth-child(3){display:block;animation:pane-in .4s var(--ease) both}.sectors input#t-professional:checked~.tabbar label[for="t-professional"]{color:var(--ink);border-bottom-color:var(--accent)}.sectors input#t-professional:checked~.panes>.pane:nth-child(4){display:block;animation:pane-in .4s var(--ease) both}.sectors input#t-software:checked~.tabbar label[for="t-software"]{color:var(--ink);border-bottom-color:var(--accent)}.sectors input#t-software:checked~.panes>.pane:nth-child(5){display:block;animation:pane-in .4s var(--ease) both}.sectors input#t-trades:checked~.tabbar label[for="t-trades"]{color:var(--ink);border-bottom-color:var(--accent)}.sectors input#t-trades:checked~.panes>.pane:nth-child(6){display:block;animation:pane-in .4s var(--ease) both}@keyframes pane-in{from{opacity:0;transform:translateY(.5rem)}}
.btn{position:relative;display:inline-flex;align-items:center;overflow:hidden;
  font:700 var(--fs-btn)/var(--lh-btn) var(--sans);letter-spacing:.04em;
  text-transform:uppercase;
  padding:1.05rem 3.1rem 1.05rem 1.55rem;white-space:nowrap;
  border:1.5px solid transparent;border-radius:var(--radius);
  background:var(--cta);color:var(--cta-ink);text-decoration:none;cursor:pointer;
  transition:padding .35s var(--ease),background .2s}
/* The literal character, not a `\2192` CSS escape: this stylesheet is a
   Python string, where a backslash followed by digits is an *octal* escape.
   The escape became a control character and the trailing digits, and every
   button on the site read "START 92" until somebody looked at the render. */
.btn::after{content:"→";position:absolute;top:50%;right:1.55rem;
  transform:translateY(-50%);font:400 1.1rem/1 var(--sans);
  animation:btn-arrow-reset .35s var(--ease) forwards}
.btn:hover{background:var(--cta-hover);padding-left:3.1rem;padding-right:1.55rem}
.btn:hover::after{animation:btn-arrow-go .35s var(--ease) forwards}
.btn:active{transform:translateY(1px)}
@keyframes btn-arrow-go{
  0%{right:1.55rem;left:auto} 49%{right:-1.7rem;left:auto}
  50%{left:-1.7rem;right:auto} 100%{left:1.55rem;right:auto}}
@keyframes btn-arrow-reset{
  0%{left:1.55rem;right:auto} 49%{left:-1.7rem;right:auto}
  50%{right:-1.7rem;left:auto} 100%{right:1.55rem;left:auto}}

.btn.ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn.ghost:hover{background:var(--cta);border-color:var(--cta);color:var(--cta-ink)}
section.deep .btn.ghost,.stage .btn.ghost{color:#fff;border-color:var(--rule-deep)}
section.deep .btn.ghost:hover,.stage .btn.ghost:hover{
  background:var(--cta);border-color:var(--cta);color:var(--cta-ink)}
/* The masthead's button is smaller than a page button, because a permanent
   control should not compete with the one the page is actually asking for. */
.btn.sm{padding:.8rem 2.5rem .8rem 1.1rem;font-size:var(--fs-btns);
  border-radius:var(--radius)}
.btn.sm::after{right:1.1rem;font-size:.95rem}
.btn.sm:hover{padding-left:2.5rem;padding-right:1.1rem}
@media (max-width:60rem){.bar .btn.sm{display:none}}

.field{display:block;width:100%;padding:.9rem 1rem;font:400 16px/1.3 var(--sans);
  color:var(--ink);background:var(--surface);border:1px solid var(--rule-2);
  border-radius:var(--radius);transition:border-color .2s,box-shadow .2s}
.field:focus{border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-tint);outline:none}
.field::placeholder{color:var(--ink-3)}
.label{display:block;font:600 .68rem/1 var(--sans);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 .5rem}
form.signup{display:grid;gap:1rem;max-width:28rem}
.fld{display:grid;gap:.4rem}
.fld.bad .field{border-color:var(--bad);background:var(--bad-tint)}
.err{margin:0;font:400 .8rem/1.5 var(--sans);color:var(--bad)}
.hint{margin:0;font:400 .8rem/1.5 var(--sans);color:var(--ink-3)}
@media (min-width:34rem){
  form.signup .row{display:grid;grid-template-columns:1fr auto;gap:.6rem;
    align-items:end}
}

/* ── notices ──────────────────────────────────────────────────── */
.note{border-left:3px solid var(--rule-2);padding:1.1rem 1.3rem;
  background:var(--sunk);border-radius:0 var(--radius) var(--radius) 0;
  font:400 .89rem/1.65 var(--sans);color:var(--ink-2)}
.note.warn{border-left-color:var(--warn);background:var(--warn-tint);color:var(--warn)}
.note.bad{border-left-color:var(--bad);background:var(--bad-tint);color:var(--bad)}

/* ── tables ───────────────────────────────────────────────────── */
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font:400 .87rem/1.5 var(--sans)}
th,td{text-align:left;padding:.6rem .75rem;border-bottom:1px solid var(--rule);
  white-space:nowrap}
th{font-weight:600;color:var(--ink-3);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* ── the customer dashboard ───────────────────────────────────── */
.tabs{display:flex;gap:.3rem;margin:1.6rem 0 1.8rem;border-bottom:1px solid var(--rule)}
.tabs a{font:600 .84rem/1 var(--sans);color:var(--ink-3);text-decoration:none;
  padding:.7rem .95rem;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}
a.mini{display:inline-block;font:600 .7rem/1 var(--sans);letter-spacing:.04em;
  padding:.4rem .6rem;margin-right:.3rem;border:1px solid var(--rule-2);
  border-radius:5px;color:var(--accent);text-decoration:none}
a.mini:hover{background:var(--accent-tint);border-color:var(--accent)}
table.detail th{width:11rem;vertical-align:top;white-space:nowrap}
table.detail td{white-space:normal}

/* ── the hero used by the interior pages ──────────────────────── */
.hero{display:grid;gap:2.6rem;align-items:start}
@media (min-width:58rem){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:3.6rem}
}

/* ── faq ──────────────────────────────────────────────────────── */
details.q{border-bottom:1px solid var(--rule)}
details.q summary{cursor:pointer;font:300 1.22rem/1.36 var(--serif);
  list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  transition:color .2s}
details.q summary:hover{color:var(--accent)}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"";position:absolute;right:.4rem;top:1.55rem;
  width:.7rem;height:.7rem;border-right:1.4px solid var(--ink-3);
  border-bottom:1.4px solid var(--ink-3);transform:rotate(45deg);
  transition:transform .3s var(--ease)}
details.q[open] summary::after{transform:rotate(225deg);top:1.75rem}
details.q .a{padding:0 3rem 1.4rem 0;color:var(--ink-2);
  animation:pane-in .3s var(--ease) both}
details.q .a p:last-child{margin-bottom:0}

/* the older, unclassed disclosure, still used on interior pages */
details:not(.q):not(.grp):not(.menu){border-bottom:1px solid var(--rule);
  padding:1rem 0}
details:not(.q):not(.grp):not(.menu)>summary{cursor:pointer;
  font:300 var(--fs-d6)/1.34 var(--serif);list-style:none}
details:not(.q):not(.grp):not(.menu)>summary::-webkit-details-marker{display:none}

/* ── the transactional sheet ──────────────────────────────────── */
.mast{font:600 .72rem/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent)}
.rule{height:2px;background:var(--accent);margin:.6rem 0 2.5rem}
.sheet h1{font:300 2rem/1.16 var(--serif);margin:0 0 1rem}
.sheet p{color:var(--ink-2)}
.sheet code{font-size:.86em;background:var(--sunk);padding:.14rem .32rem;
  border-radius:4px}
.sheet footer{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--rule);
  font:400 13px/1.7 var(--sans);color:var(--ink-3)}

/* ── footer ───────────────────────────────────────────────────── */
/* Deep, curved out of the page, and wide enough to hold the whole site — which
   is where a phone reader looks for the navigation the masthead had to drop. */
footer.site{position:relative;margin-top:0;background:var(--deep);
  color:var(--on-deep-3);padding:clamp(3.5rem,6vw,5.5rem) 0 2.5rem;
  font:400 .86rem/1.75 var(--sans);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0}
footer.site .cols{display:grid;gap:2.6rem;
  grid-template-columns:1fr}
@media (min-width:44rem){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (min-width:58rem){footer.site .cols{grid-template-columns:1.5fr 1fr 1fr}}
@media (min-width:72rem){footer.site .cols{
  grid-template-columns:1.5fr repeat(4,minmax(0,1fr)) 1.15fr}}

footer.site a{color:var(--on-deep-2);text-decoration:none;display:block;
  padding:.22rem 0;transition:color .2s}
footer.site a:hover{color:var(--cta)}
footer.site a.btn{display:inline-flex;color:var(--cta-ink);padding:1.05rem 3.1rem 1.05rem 1.55rem}
footer.site a.btn:hover{color:var(--cta-ink)}
footer.site .colhead{font:600 .66rem/1 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-deep-3);margin:0 0 1rem}
footer.site .mark{display:flex;color:#fff;margin-bottom:1.1rem;
  font-size:1rem;padding:0}
footer.site .mark .dot{border-color:var(--cta)}
footer.site .legal{max-width:24rem;color:var(--on-deep-3)}
footer.site .legal strong{color:var(--on-deep)}
footer.site .base{margin-top:3rem;padding-top:1.6rem;
  border-top:1px solid var(--rule-deep);display:flex;flex-wrap:wrap;
  gap:.6rem 1.6rem;justify-content:space-between;font-size:.78rem}
footer.site .base a{display:inline}
footer.site .base nav{display:flex;flex-wrap:wrap;gap:1.2rem}

@keyframes rise{from{opacity:0;transform:translateY(1.1rem)}}
.stage .eyebrow{animation:rise .7s var(--ease) .05s both}
.stage h1{animation:rise .8s var(--ease) .12s both}
.stage .lede,.stage .kicker{animation:rise .8s var(--ease) .22s both}
.stage .actions{animation:rise .8s var(--ease) .32s both}
.stage .proof{animation:rise .8s var(--ease) .42s both}
.stage .specimen{animation:rise .9s var(--ease) .28s both}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .reveal{animation:rise .8s var(--ease) both;
      animation-timeline:view();animation-range:entry 5% cover 22%}
  }
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;
    scroll-behavior:auto!important}
  html{scroll-behavior:auto}
}