/* =====================================================================================
   Souvenir · site.css · the design system (v4)
   Light only. White is the base; colour arrives with a job.
   Order: tokens → base → type → micro-elements → controls → surfaces → layout →
          artefacts (slips, receipt, tape, objects) → nav → sheet → footer → opener → responsive
   Docs: STYLEGUIDE.md · live reference: styleguide.html
   ===================================================================================== */

:root{
  color-scheme: light;

  /* ---- neutrals (slightly pink-biased, never a dead grey) ---- */
  --white:#FFFFFF;
  --ink:#1E1C1F;        /* text and the logo */
  --ink-2:#3A363C;      /* body copy */
  --muted:#6B6670;      /* secondary text (5.6:1) */
  --quiet:#958E98;      /* the quiet clause of a headline, glyph strokes (display sizes only, never small text) */
  --quiet-text:#736C77; /* small labels and notes: fine print, slot notes, menu and footer heads (5.1:1 on white, 4.6:1 on soft) */
  --line:#ECE8E9;       /* hairlines */
  --line-2:#E2DCDE;     /* dashed perforations, outlined chips */
  --soft:#F6F4F4;       /* soft cards, UI-slot frame, secondary buttons, tracks */
  --soft-2:#EEEAEB;     /* hover on soft */
  --paper:#FFFDF9;      /* tool slips, receipts, letters */

  /* ---- the brand: money, what matters right now ---- */
  --pink:#F92064;  --pink-ink:#D1105A;  --pink-deep:#B80C4A;  --petal:#FFD3E0;  --petal-wash:#FFF1F5;  --petal-mist:#FFF7FA;
  /* ---- each idea owns a colour, everywhere ---- */
  --tomato:#F2452E; --tomato-ink:#C3301B; --tomato-wash:#FFEDEA; --tomato-mist:#FFF6F3;   /* See   */
  --forest:#0F4D38; --forest-2:#1D6B4F;   --forest-deep:#0A3A2A; --forest-wash:#EAF2EE; --forest-mist:#F3F8F5; --mint:#A9E8C9; /* Watch */
  --butter:#FFD95A; --butter-ink:#7A5A00; --butter-wash:#FFF8E1; --butter-mist:#FFFBEE;  /* Act   */
  --butter-deep:#D9A90F;  /* the one butter for marks on white: spark bullets, the stretch arrow, Act icons (never text) */
  --gold:#E9B44C;                                                                        /* tokens + objects only */
  /* sticker fills that carry small white type (14px / 500 needs 4.5:1): tomato 4.8:1, pink 4.7:1. Keep --tomato / --pink for big marks */
  --tomato-fill:#D6331E; --pink-fill:#E2165A;
  --quiet-soft:#89828C;   /* the quiet clause of a headline on a soft or tinted card (3.4:1 on soft) */

  /* ---- type ---- */
  --display:"Funnel Display","Helvetica Neue",Arial,sans-serif;
  --text:"Geist","Helvetica Neue",Arial,sans-serif;
  --fs-hero:clamp(40px, 4.75vw, 68px);
  --fs-h2:clamp(32px, 3.35vw, 48px);
  --fs-h3:clamp(21px, 1.8vw, 26px);
  --fs-h4:19px;
  --fs-lead:clamp(17px, 1.3vw, 19px);
  --fs-body:16px; --fs-body-lg:17px; --fs-sm:14px; --fs-xs:13px; --fs-micro:12px;
  --tr-display:-.028em;

  /* ---- radii (one scale; nested radii are concentric: inner = outer − padding) ---- */
  --r-band:36px; --r-frame:28px; --r-card:20px; --r-inner:14px; --r-sm:10px; --r-xs:6px; --r-pill:999px;

  /* ---- depth ---- */
  --sh-1:0 1px 2px rgba(30,28,31,.04), 0 12px 32px -12px rgba(30,28,31,.10);
  --sh-2:0 1px 2px rgba(30,28,31,.05), 0 10px 24px -10px rgba(30,28,31,.12), 0 32px 64px -28px rgba(30,28,31,.20);
  --sh-pop:0 0 0 1px rgba(30,28,31,.06), 0 8px 24px -12px rgba(30,28,31,.16), 0 40px 80px -32px rgba(30,28,31,.26);
  --sh-btn:inset 0 1px 0 rgba(255,255,255,.14), inset 0 -1px 0 rgba(0,0,0,.42), 0 1px 2px rgba(30,28,31,.16), 0 8px 18px -10px rgba(30,28,31,.5);
  --sh-sticker:0 0 0 2.5px #fff, 0 1px 1px 2.5px rgba(30,28,31,.06), 0 6px 14px -3px rgba(30,28,31,.22);
  --f-paper:drop-shadow(0 1px 1px rgba(30,28,31,.07)) drop-shadow(0 8px 12px rgba(30,28,31,.10));
  --f-obj:drop-shadow(0 2px 2px rgba(30,28,31,.10)) drop-shadow(0 12px 14px rgba(30,28,31,.14));

  /* ---- layout ---- */
  --gut:max(clamp(16px, 4vw, 40px), env(safe-area-inset-left, 0px));
  --max:1200px;
  --sec:clamp(48px, 5.6vw, 80px);   /* one side of a section: 96px between sections on mobile, 160px on desktop */
  --nav-h:64px;

  /* the spark as a mask (for pseudo-elements: the active-nav marker, list bullets) */
  --spark-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='8.85 8.84 5.6 5.6'><path transform='rotate(-16 11.648 11.637)' d='M12.542 9.815c.202-.145.481-.112.477.056-.02.843.276 1.305 1.053 1.745.177.1-.014.394-.288.447-1.225.235-2.093.645-3.12 1.395-.2.146-.478.114-.472-.056.035-.867-.21-1.408-.973-1.877-.17-.106.024-.4.297-.446 1.201-.207 2.017-.538 3.026-1.264'/></svg>");

  /* ---- motion ---- */
  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);

  /* ---- grain: colour blocks and cinematic bands only ---- */
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* =====================================================================================
   BASE
   ===================================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--white);color:var(--ink);-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 24px);scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--white);color:var(--ink);font:400 var(--fs-body)/1.6 var(--text);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;font-feature-settings:"ss01" 0}
img,svg,video{display:block;max-width:100%}
svg{overflow:visible}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,textarea,select{font:inherit;color:inherit}
p,h1,h2,h3,h4,h5,ol,ul,figure,blockquote,dl,dd{margin:0}
ol,ul{padding:0;list-style:none}
em{font-style:normal}
b,strong{font-weight:500}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
/* the ring has to read on colour too: white on the pink band (3.9:1), mint on forest and dark (7:1) */
.band--pink :focus-visible{outline-color:#fff}
.on-dark :focus-visible,.band--forest :focus-visible,.card--forest :focus-visible,.f-watch:focus-visible,.f-watch :focus-visible{outline-color:var(--mint)}
a:not([class]):focus-visible,.lnk:focus-visible,.fc a:focus-visible,.fsmall a:focus-visible,.nav-logo:focus-visible{border-radius:4px}
::selection{background:var(--petal);color:var(--ink)}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;padding:10px 14px;border-radius:var(--r-pill);background:var(--ink);color:#fff;font-size:14px;opacity:0;transition:top .2s var(--ease),opacity .2s}
.skip-link:focus{top:12px;opacity:1}
.nowrap{white-space:nowrap}
.sv-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}

/* =====================================================================================
   TYPE
   ===================================================================================== */
.h1{font:500 var(--fs-hero)/1.02 var(--display);letter-spacing:-.032em;text-wrap:balance;color:var(--ink)}
.h2{font:500 var(--fs-h2)/1.06 var(--display);letter-spacing:var(--tr-display);text-wrap:balance;color:var(--ink)}
.h3{font:500 var(--fs-h3)/1.2 var(--display);letter-spacing:-.016em;text-wrap:balance;color:var(--ink)}
.h4{font:500 var(--fs-h4)/1.3 var(--display);letter-spacing:-.01em;text-wrap:balance;color:var(--ink)}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--muted);text-wrap:balance;max-width:38em}
.body{font-size:var(--fs-body-lg);line-height:1.6;color:var(--ink-2);max-width:62ch;text-wrap:pretty}
.body--sm{font-size:var(--fs-body)}
.small{font-size:var(--fs-sm);line-height:1.5;color:var(--muted);text-wrap:pretty}
.fine{font-size:var(--fs-micro);line-height:1.45;color:var(--quiet-text);font-variant-numeric:tabular-nums}
.kicker{display:inline-flex;align-items:center;gap:8px;font:500 var(--fs-xs)/1.2 var(--text);color:var(--muted)}
.kicker .spk{width:10px;height:10px;fill:var(--pink)}
.kicker--see{color:var(--tomato-ink)} .kicker--watch{color:var(--forest)} .kicker--act{color:var(--butter-ink)} .kicker--money{color:var(--pink-ink)}
.prose{max-width:64ch}
.prose p{font-size:var(--fs-body-lg);line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.prose p + p{margin-top:1.05em}

/* Headlines have exactly two devices, used sparingly:
   1 · the style switch: one clause goes quiet (Tines). The only headline switch.
   2 · the swash: one hand-laid butter marker behind the single word that acts. Ink text, on white or on forest.
   (The inline mark and the inline token are for the hero and the CTA only.) */
.sw-mute{color:var(--quiet);font-weight:400}
.sw-light{font-weight:300}
/* on a soft or tinted card the quiet clause steps down one shade, so it holds 3:1 (white cards keep --quiet) */
.card .sw-mute{color:var(--quiet-soft)}
.card--white .sw-mute,.card--raised .sw-mute,.card--feature .sw-mute{color:var(--quiet)}
/* a quiet clause at body size (under 24px, where AA asks 4.5:1) is --muted (5.6:1): an .h4 always, an .h3 until it
   reaches 24px (1333px wide), a clause in running text. (On dark, .on-dark .sw-mute below still wins.) */
.h4 .sw-mute,.body .sw-mute,.small .sw-mute{color:var(--muted)}
@media (max-width:1332px){.h3 .sw-mute{color:var(--muted)}}
/* a headline set on two lines: each .ln is its own line */
.h1 .ln,.h2 .ln{display:block}
.swash{position:relative;white-space:nowrap;z-index:0;color:var(--ink);margin:0 .06em}
.swash::before{content:"";position:absolute;z-index:-1;left:-.06em;right:-.06em;top:.08em;bottom:-.03em;border-radius:.14em .26em .2em .12em;background:var(--butter);
  transform:rotate(-1.2deg) scaleX(var(--swash,1));transform-origin:left center;transition:transform .6s var(--ease)}

/* the ring, set inline as a word (one colour, always). Spaces around it are set by margin, not by text. */
.inmark{display:inline-block;width:.8em;height:.8em;vertical-align:-.072em;margin:0 -.018em 0 .024em;fill:currentColor}
.inmark svg{width:100%;height:100%;fill:currentColor}
/* a token, set inline as a word */
.intoken{display:inline-block;width:.78em;height:.78em;vertical-align:-.07em;margin:0 .007em 0 .013em;filter:drop-shadow(0 2px 3px rgba(120,60,10,.25))}
.intoken svg{width:100%;height:100%}

/* numbers: tabular, the unit smaller and muted */
.num{font-variant-numeric:tabular-nums}
.unit{font-size:.56em;color:var(--muted);font-weight:400;letter-spacing:0;margin-left:.06em}
.money{color:var(--pink-ink);font-weight:500;font-variant-numeric:tabular-nums}
.ref{color:var(--tomato-ink);font-weight:500;font-variant-numeric:tabular-nums}
.watched{color:var(--forest);font-weight:500}
.fig-xl{display:inline-flex;align-items:baseline;font:500 clamp(48px,5vw,72px)/.92 var(--display);letter-spacing:-.042em;font-variant-numeric:tabular-nums;color:var(--ink)}
.fig-xl.is-money{color:var(--pink-ink)}
.fig-xl .unit{font-size:.48em;letter-spacing:-.01em}
.fig-l{font:500 clamp(36px,3.6vw,56px)/1 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.fig-m{font:500 clamp(26px,2.4vw,34px)/1 var(--display);letter-spacing:-.025em;font-variant-numeric:tabular-nums}

/* =====================================================================================
   MICRO-ELEMENTS (where the brand lives)
   ===================================================================================== */
/* the spark: always the pre-turned symbol (#spark), so it reads as a four-point star at any size */
.spk{width:1em;height:1em;flex:none;fill:currentColor}
/* the ring glyph */
.ring-g{width:1em;height:1em;flex:none;fill:currentColor}
.ring-g.spin{animation:sv-spin 1s linear infinite}
@keyframes sv-spin{to{transform:rotate(360deg)}}

/* sticker pills: tilted, colour-filled, a white die-cut edge and a soft sheen (never gel).
   No flex gap: each text run is its own flex item, so a gap would fall inside "3.1<span class=unit>×</span> blended".
   The spark carries its own space instead, and the words, the figure and its unit set as one run of type. */
.sticker{--tilt:-3deg;position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:0;height:30px;padding:0 13px 0 10px;border-radius:var(--r-pill);
  font:500 14px/1 var(--text);letter-spacing:-.005em;color:#fff;background:var(--ink);white-space:nowrap;user-select:none;
  transform:rotate(var(--tilt));box-shadow:var(--sh-sticker)}
.sticker::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 52%);box-shadow:inset 0 1px 0 rgba(255,255,255,.28)}
.sticker .spk{width:11px;height:11px;opacity:.95;margin-right:6px}
.sticker--see{background:var(--tomato-fill)}
.sticker--watch{background:var(--forest)}
.sticker--act{background:var(--butter);color:var(--ink)}
.sticker--act::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.sticker--money{background:var(--pink-fill)}
.sticker--ink{background:var(--ink)}
/* a sticker that carries a figure takes the ink of its idea: See figures ("3.1× blended", "0.7× apart", "9 days of cover")
   in tomato-ink, money and the chosen answer ("$9,800 at risk", "Recommended") in pink-ink (5.6 / 5.3:1) */
.sticker--fig{background:var(--tomato-ink)}
.sticker--fig-money{background:var(--pink-ink)}
.sticker--sm{height:24px;font-size:12.5px;padding:0 10px 0 8px}
.sticker--sm .spk{width:9px;height:9px;margin-right:5px}
.sticker--md{height:34px;padding:0 15px;font-size:15px}
.sticker--md .spk{width:11px;height:11px}
/* the unit sits tight on its figure; its right margin is the word space (a flex item's leading space collapses) */
.sticker .unit{font-size:.86em;color:inherit;font-weight:500;opacity:.85;margin:0 .3em 0 .03em;letter-spacing:0}
.sticker--flat{--tilt:0deg}

/* tokens: pink enamel, gold rim, the ring struck in gold. Next to money, never a $ icon. */
.tk{width:1.15em;height:1.15em;flex:none;filter:drop-shadow(0 1px 1px rgba(150,90,20,.25))}
.tk--16{width:16px;height:16px} .tk--20{width:20px;height:20px} .tk--28{width:28px;height:28px} .tk--40{width:40px;height:40px}

/* the category pill (hero), led by the tools it names: tiny glyph discs, overlapped like a hand of slips */
.pill{display:inline-flex;align-items:center;gap:10px;height:34px;padding:0 15px 0 6px;border-radius:var(--r-pill);background:#fff;color:var(--ink-2);
  font:400 14px/1 var(--text);box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(30,28,31,.04), 0 4px 12px -8px rgba(30,28,31,.14);white-space:nowrap}
.pill--soft{background:var(--soft);box-shadow:inset 0 0 0 1px rgba(30,28,31,.03)}
.ptools{display:inline-flex;align-items:center;flex:none}
.ptools i{position:relative;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--soft);color:var(--muted);margin-left:-6px;
  box-shadow:0 0 0 2px #fff, inset 0 0 0 1px rgba(30,28,31,.05)}
.ptools i:first-child{margin-left:0}
.ptools i:nth-child(1){z-index:3}.ptools i:nth-child(2){z-index:2}.ptools i:nth-child(3){z-index:1}
.ptools svg{width:12px;height:12px}

/* chips: small labels and tool names */
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);background:var(--soft);color:var(--ink-2);
  font:500 12.5px/1 var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.chip svg{width:12px;height:12px;color:var(--muted)}
.chip--line{background:#fff;box-shadow:inset 0 0 0 1px var(--line-2)}
.chip--see{background:var(--tomato-wash);color:var(--tomato-ink)}
.chip--watch{background:var(--forest-wash);color:var(--forest)}
.chip--act{background:var(--butter-wash);color:var(--butter-ink)}
.chip--money{background:var(--petal-wash);color:var(--pink-ink)}
.plus{color:var(--quiet-text);font-size:12px}

/* "Saved just now": a rule being held */
.saved{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:var(--r-pill);background:#fff;color:var(--forest);
  font:500 13px/1 var(--text);white-space:nowrap;box-shadow:0 0 0 1px rgba(15,77,56,.14), 0 1px 2px rgba(15,77,56,.08)}
.saved .spk{width:10px;height:10px;fill:var(--forest)}
.saved--sm{height:24px;font-size:12px;padding:0 9px 0 8px;background:var(--forest-wash);box-shadow:none}
.saved--sm .spk{width:9px;height:9px}
.saved--on-dark{background:rgba(169,232,201,.12);color:var(--mint);box-shadow:inset 0 0 0 1px rgba(169,232,201,.28)}
.saved--on-dark .spk{fill:var(--mint)}

/* "Soon": an item without a page yet */
.soon{display:inline-flex;align-items:center;flex:none;height:18px;padding:0 6px;border-radius:5px;background:var(--soft);color:var(--muted);
  font:500 10.5px/1 var(--text);font-style:normal;letter-spacing:.01em;margin-left:7px;vertical-align:1px;white-space:nowrap}
.soon.tbc-s{background:var(--petal-wash);color:var(--pink-ink);box-shadow:inset 0 0 0 1px rgba(249,32,100,.12)}
/* spark bullets for lists */
.spk-list li{position:relative;padding-left:20px}
.spk-list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;background:var(--pink);-webkit-mask:var(--spark-mask) center/contain no-repeat;mask:var(--spark-mask) center/contain no-repeat}
.spk-list--watch li::before{background:var(--forest)} .spk-list--see li::before{background:var(--tomato)} .spk-list--act li::before{background:var(--butter-deep)}

/* TBC: an open decision, left visible on purpose. The chip travels with the phrase's last word, so it never wraps onto
   a line by itself: site.js wraps that word in .tbc-end (nowrap) and the chip is drawn there (an atomic chip after plain
   text is a line-break opportunity; inside a nowrap run it isn't). Without the script the chip stays on .tbc itself. */
.tbc{text-decoration:underline dashed rgba(249,32,100,.55);text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-skip-ink:none}
.tbc::after,.tbc-end::after{content:"TBC";display:inline-block;margin-left:4px;padding:2px 4px 1px;border-radius:4px;background:var(--petal-wash);color:var(--pink-ink);
  font:600 9px/1 var(--text);letter-spacing:.04em;vertical-align:.55em;text-decoration:none}
.tbc:has(.tbc-end)::after{content:none}
.tbc-end{white-space:nowrap}
.tbc--on-dark{text-decoration-color:rgba(255,211,224,.6)}
.tbc--on-dark::after,.tbc--on-dark .tbc-end::after{background:rgba(255,211,224,.16);color:var(--petal)}
.tbc-chip{display:inline-flex;align-items:center;flex:none;height:18px;padding:0 6px;border-radius:5px;background:var(--petal-wash);color:var(--pink-ink);
  box-shadow:inset 0 0 0 1px rgba(249,32,100,.14);font:600 10px/1 var(--text);font-style:normal;letter-spacing:.03em;white-space:nowrap;vertical-align:middle}
.tbc-chip--on-dark{background:rgba(255,211,224,.14);color:var(--petal);box-shadow:inset 0 0 0 1px rgba(255,211,224,.22)}
.tbc-card{display:flex;gap:12px;align-items:flex-start;border:1.5px dashed #F3B6C9;background:#FFFBFC;border-radius:var(--r-card);padding:18px 20px;color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.tbc-card b{color:var(--ink);font-weight:500}
.tbc-card .tbc-chip{margin-top:1px}
/* the fill-in: a value left blank on purpose, on a line. A dotted pink rule to write on, the chip standing on it.
   One style for every missing figure or phrase: in a sentence, in a table, at display size (--fig), or as a bare
   stub (--stub) in a receipt or a form, where one chip nearby explains every stub. */
.tbc-fill{--w:3.4em;position:relative;display:inline-flex;align-items:flex-end;min-width:var(--w);margin:0 .14em;padding:0 .32em 0 .1em;
  vertical-align:baseline;font-style:normal;line-height:1;white-space:nowrap}
.tbc-fill::after{content:"";position:absolute;left:0;right:0;bottom:-.26em;height:1.5px;
  background:repeating-linear-gradient(90deg,rgba(209,16,90,.55) 0 1.5px,transparent 1.5px 4px)}
.tbc-fill > .tbc-chip{height:16px;padding:0 5px;font-size:10px}
.tbc-fill--s{--w:1.7em}
.tbc-fill--l{--w:7em}
.tbc-fill--stub{--w:2.1em;height:1em;padding:0;margin:0 .1em}
.tbc-fill--stub.tbc-fill--s{--w:1.45em}
.tbc-fill--stub::after{bottom:0}
.tbc-fill--fig{--w:1.3em;margin:0 0 0 .06em;padding:0 .16em 0 .04em}
.tbc-fill--fig::after{height:2px;bottom:-.1em;background:repeating-linear-gradient(90deg,rgba(209,16,90,.55) 0 2px,transparent 2px 5px)}
.tbc-fill--fig > .tbc-chip{height:22px;padding:0 8px;font-size:11.5px;border-radius:6px;margin-bottom:.06em}
/* a page-level note: one chip and one line, under a hairline (a draft page, a page of unconfirmed facts) */
.tbc-strip{display:flex;align-items:center;gap:10px;margin-top:clamp(40px,4vw,64px);padding-top:18px;border-top:1px solid var(--line)}
.tbc-strip .tbc-chip{flex:none}
/* the note row: a footnote line (usually .fine) of short parts that wrap as units: words, a chip, or a .tbc-note,
   a chip and the words that explain it, kept together. <p class="fine note-row">Example store · illustrative.
   <span class="tbc-note"><i class="tbc-chip">TBC · D9</i><span>how Souvenir settles tools that disagree</span></span></p> */
.note-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.tbc-note{display:inline-flex;align-items:baseline;gap:8px;min-width:0}
.tbc-note > .tbc-chip{flex:none}

/* links: 1px underline at 3px, grows to 2px pink on hover; the arrow nudges 2px */
.lnk{display:inline-flex;align-items:center;gap:5px;color:var(--ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(30,28,31,.3);transition:color .2s,text-decoration-color .2s,text-decoration-thickness .2s}
.lnk:hover{color:var(--pink-ink);text-decoration-thickness:2px;text-decoration-color:currentColor}
.lnk svg{width:14px;height:14px;flex:none;transition:transform .2s var(--ease)}
.lnk:hover svg{transform:translateX(2px)}
.lnk--on-dark{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
.lnk--on-dark:hover{color:var(--petal)}
/* a small link or label grows its hit area on phones without changing its look (40px tall): .lnk, and .hit on anything else */
.lnk,.hit{position:relative}
@media (max-width:640px){.lnk::after,.hit::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:40px;min-height:100%;transform:translateY(-50%)}}
.prose a:not([class]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(30,28,31,.3)}
.prose a:not([class]):hover{color:var(--pink-ink);text-decoration-thickness:2px;text-decoration-color:currentColor}

/* dividers */
.hr{height:1px;border:0;margin:0;background:var(--line)}
.perf{height:0;border:0;margin:0;border-top:1.5px dotted var(--line-2)}

/* =====================================================================================
   CONTROLS
   ===================================================================================== */
/* Buttons: brand pink primary, soft secondary, white on colour.
   btn--ink remains an alias for primary buttons on existing pages. */
.btn{--h:48px;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--h);padding:0 22px;border-radius:var(--r-pill);
  font:500 15px/1 var(--text);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:transform .18s var(--ease),background-color .18s,box-shadow .18s,color .18s}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:.06s}
.btn:focus-visible{border-radius:var(--r-pill)}
.btn .arr{width:16px;height:16px;flex:none;margin-right:-4px;transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(2px)}
.btn:hover .arr--down{transform:translateY(2px)}
.btn .ic{width:16px;height:16px;flex:none;margin-left:-3px}
.btn--sm{--h:36px;padding:0 15px;font-size:14px}
.btn--md{--h:44px;padding:0 19px}
.btn--lg{--h:50px;padding:0 24px;font-size:16px}
.btn--soft{background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(30,28,31,.035)}
.btn--soft:hover{background:var(--soft-2)}
.btn--line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(30,28,31,.04)}
.btn--line:hover{box-shadow:inset 0 0 0 1px #D6CFD2, 0 6px 14px -8px rgba(30,28,31,.2)}
.btn--white{background:#fff;color:var(--ink);box-shadow:inset 0 -1px 0 rgba(30,28,31,.12), 0 1px 2px rgba(110,0,30,.16), 0 10px 22px -10px rgba(110,0,30,.42)}
.btn--white:hover{background:#FFF8FA}
.btn--pink,.btn--ink{background:var(--pink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(120,0,40,.32), 0 2px 4px rgba(209,16,90,.18), 0 10px 22px -12px rgba(209,16,90,.6)}
.btn--pink:hover,.btn--ink:hover{background:#FF2D6F}
/* Pink glass finish for launch navigation buttons. */
.btn.btn--pink-glass,.svn-cta.btn--pink-glass{border:1px solid #ffffffa6;background:radial-gradient(ellipse at 50% -42%,#ffffffa8 0%,#ffffff00 65%),linear-gradient(180deg,#ff93b7 0%,#f92064 40%,#ee1c5d 76%,#ff9aba 140%);color:#fff;box-shadow:inset 0 1px 2px #fff,inset 0 -1px 3px #ffffffa6,inset 3px 0 5px #ffffff4d,inset -3px 0 5px #ffffff4d,0 2px 6px -3px #941c4540}
.btn--pink-glass::before{content:"";position:absolute;inset:1px;border:1px solid #ffffff38;border-radius:inherit;background:linear-gradient(180deg,#ffffff2b 0%,#ffffff00 46%,#ffffff00 76%,#ffffff24 100%);pointer-events:none}
.btn.btn--pink-glass:hover,.svn-cta.btn--pink-glass:hover{background:radial-gradient(ellipse at 50% -42%,#ffffffa8 0%,#ffffff00 65%),linear-gradient(180deg,#ff93b7 0%,#f92064 40%,#ee1c5d 76%,#ff9aba 140%);box-shadow:inset 0 1px 3px #fff,inset 0 -1px 3px #ffffffb3,inset 3px 0 6px #ffffff59,inset -3px 0 6px #ffffff59,0 4px 10px -4px #941c4540}
.btn--glass{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.btn--glass:hover{background:rgba(255,255,255,.18)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* the copy button: one "Copied" state everywhere. The copy glyph and its word give way to the spark and "Copied",
   in Watch's green (forest on white, mint on dark). Driven by site.js: <button class="copy-b" data-copy="…">. */
.copy-b{--h:32px;position:relative;display:inline-grid;align-items:center;flex:none;height:var(--h);min-width:var(--h);padding:0 11px;border-radius:var(--r-pill);
  font:500 13px/1 var(--text);color:var(--muted);white-space:nowrap;transition:background-color .15s,color .15s,box-shadow .15s}
.copy-b > span:not(.sr-only){grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:opacity .2s,transform .3s var(--ease)}
.copy-b svg{width:13px;height:13px;flex:none}
.copy-b .spk{width:10px;height:10px}
.copy-b-b{opacity:0;transform:translateY(3px)}
.copy-b:hover{background:var(--soft);color:var(--ink)}
.copy-b:active{transform:scale(.98)}
.copy-b:focus-visible{border-radius:var(--r-pill)}
.copy-b.is-done{background:var(--forest-wash);color:var(--forest)}
.copy-b.is-done .copy-b-a{opacity:0;transform:translateY(-3px)}
.copy-b.is-done .copy-b-b{opacity:1;transform:none}
/* on a dark band */
.copy-b--glass{--h:36px;padding:0 14px;min-width:92px;font-size:14px;color:#fff;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.copy-b--glass:hover{background:rgba(255,255,255,.18);color:#fff}
.copy-b--glass svg{width:15px;height:15px}
.copy-b--glass.is-done{background:rgba(169,232,201,.16);box-shadow:inset 0 0 0 1px rgba(169,232,201,.4);color:var(--mint)}
.copy-b--glass .spk{fill:var(--mint)}

/* the microline: "$50 in credits · no card", identical everywhere */
.micro{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.micro .tk{width:16px;height:16px}
.micro .dot{color:var(--quiet-text)}

/* segmented control / tabs. The progress bar is an inner rounded bar inset clear of the pill's curved ends,
   inside a clipped track, so it can never be cut square by the radius. */
.seg{display:inline-flex;gap:3px;padding:4px;border-radius:var(--r-pill);background:var(--soft);box-shadow:inset 0 0 0 1px rgba(30,28,31,.035);max-width:100%}
.seg-b{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 17px;border-radius:var(--r-pill);
  font:500 14px/1 var(--text);color:var(--muted);white-space:nowrap;transition:background-color .2s,color .2s,box-shadow .2s}
.seg-b:hover{color:var(--ink)}
.seg-b:focus-visible{outline-offset:1px}
.seg-b[aria-selected="true"],.seg-b.is-on{background:#fff;color:var(--ink);box-shadow:0 0 0 1px rgba(30,28,31,.05), 0 1px 2px rgba(30,28,31,.06), 0 4px 10px -6px rgba(30,28,31,.16)}
.seg-b .spk{width:0;height:10px;fill:var(--pink);opacity:0;margin-right:-7px;transform:scale(.4) rotate(-60deg);transition:opacity .25s,transform .4s var(--spring),width .3s var(--ease),margin .3s var(--ease)}
.seg-b[aria-selected="true"] .spk,.seg-b.is-on .spk{width:10px;margin-right:0;opacity:1;transform:none}
.seg-prog{position:absolute;left:18px;right:18px;bottom:5px;height:2px;border-radius:2px;overflow:hidden;pointer-events:none;background:transparent;transition:background-color .2s}
.seg-b[aria-selected="true"] .seg-prog,.seg-b.is-on .seg-prog{background:rgba(249,32,100,.12)}
.seg-prog i{position:absolute;inset:0;border-radius:2px;background:var(--pink);transform:scaleX(0);transform-origin:left center}
.seg.is-paused .seg-prog i{opacity:.35;transition:opacity .2s}
.seg.is-static .seg-prog{display:none}
.seg--lg .seg-b{height:44px;padding:0 20px;font-size:15px}
.seg--lg .seg-prog{left:22px;right:22px;bottom:6px}
.seg--on-dark{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.seg--on-dark .seg-b{color:rgba(255,255,255,.7)}
.seg--on-dark .seg-b:hover{color:#fff}
.seg--on-dark .seg-b[aria-selected="true"]{background:#fff;color:var(--ink)}

/* the approval trio: "Allow once · Allow always · Block" as a typographic motif (the words, not app UI) */
.trio{display:flex;flex-wrap:nowrap;gap:6px}
/* chip scale, always one row: smaller than the primary CTA, so it reads as type, not as the page's button */
.trio-b{position:relative;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 16px;border-radius:var(--r-pill);background:#fff;color:var(--ink);
  font:500 16px/1 var(--display);letter-spacing:-.01em;white-space:nowrap;flex:none;
  box-shadow:inset 0 0 0 1px rgba(30,28,31,.14), 0 1px 2px rgba(30,28,31,.05);transition:background-color .2s,color .2s,box-shadow .2s,transform .18s var(--ease)}
.trio-b:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px rgba(30,28,31,.24), 0 6px 14px -8px rgba(30,28,31,.3)}
.trio-b[aria-pressed="true"]:hover{transform:translateY(-1px)}
.trio-b:active{transform:scale(.98)}
.trio-b:focus-visible{border-radius:var(--r-pill)}
/* the chosen answer fills pink-ink: white 16px type on #F92064 is only 3.9:1 (keep #F92064 for large type, tokens and the band) */
.trio-b[aria-pressed="true"]{background:var(--pink-ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(120,0,40,.32), 0 1px 2px rgba(209,16,90,.18), 0 8px 16px -10px rgba(209,16,90,.55)}
.trio-b[data-r="block"][aria-pressed="true"]{background:var(--ink);box-shadow:var(--sh-btn)}
.trio-b[aria-pressed="false"].dim{color:var(--muted)}
/* the motif, small and static (a line of type with the first word filled) */
.trio--motif{gap:6px;align-items:center;container-type:normal;display:inline-flex}
.trio--motif span{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:var(--r-pill);font:500 14px/1 var(--display);letter-spacing:-.005em;
  box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ink);background:#fff;white-space:nowrap}
.trio--motif span:first-child{background:var(--pink-ink);color:#fff;box-shadow:none}
.trio--motif.on-dark span{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.trio--motif.on-dark span:first-child{background:var(--pink-ink);box-shadow:none}

/* accordion (details/summary): the + turns into a − */
.acc{border-top:1px solid var(--line)}
.acc-i{border-bottom:1px solid var(--line)}
.acc-i summary{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:68px;padding:18px 2px;cursor:pointer;list-style:none;
  font:500 18px/1.35 var(--display);letter-spacing:-.01em;color:var(--ink);border-radius:8px;text-wrap:balance}
.acc-i summary::-webkit-details-marker{display:none}
.acc-i:not([open]) summary:hover .acc-pm{background:var(--soft-2)}
.acc-pm{position:relative;flex:none;width:28px;height:28px;border-radius:50%;background:var(--soft);transition:background-color .2s,transform .35s var(--ease)}
.acc-pm::before,.acc-pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .35s var(--ease)}
.acc-pm::after{transform:translate(-50%,-50%) rotate(90deg)}
.acc-i[open] .acc-pm{background:var(--petal-wash)}
.acc-i[open] .acc-pm::after{transform:translate(-50%,-50%) rotate(0deg)}
.acc-i[open] .acc-pm::before,.acc-i[open] .acc-pm::after{background:var(--pink-ink)}
.acc-b{padding:0 56px 24px 2px;font-size:var(--fs-body);line-height:1.65;color:var(--ink-2);max-width:72ch}
.acc-b p + p{margin-top:.8em}

/* form field */
.field{display:flex;flex-direction:column;gap:8px;max-width:440px}
.field label{font:500 var(--fs-sm)/1.2 var(--text);color:var(--ink)}
.field-row{display:flex;align-items:center;gap:6px;height:52px;padding:4px 4px 4px 18px;border-radius:var(--r-pill);background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2), 0 1px 2px rgba(30,28,31,.04);transition:box-shadow .2s}
.field-row:hover{box-shadow:inset 0 0 0 1px #D6CFD2, 0 1px 2px rgba(30,28,31,.04)}
.field-row:focus-within{box-shadow:inset 0 0 0 1.5px var(--pink), 0 0 0 4px rgba(249,32,100,.12)}
.field-row input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font-size:16px;color:var(--ink)}
.field-row input::placeholder{color:var(--quiet-text)}
.field-row .btn{--h:44px}
.field-help{font-size:var(--fs-xs);color:var(--muted);padding-left:18px}
.field.is-error .field-row{box-shadow:inset 0 0 0 1.5px var(--tomato)}
.field.is-error .field-help{color:var(--tomato-ink)}
.field.is-done .field-help{color:var(--forest)}
/* a form whose destination isn't decided: it says so, and claims nothing was sent */
.field.is-tbc .field-help{color:var(--muted)}
.field.is-tbc .field-help b{font-weight:500;color:var(--ink)}

/* =====================================================================================
   SURFACES
   ===================================================================================== */
/* the UI slot: wherever the product would be. One component, used everywhere. */
.slot{--ar:16/10;--fill:var(--soft);position:relative;display:flex;flex-direction:column;background:var(--fill);border-radius:var(--r-frame);padding:8px;box-shadow:inset 0 0 0 1px rgba(30,28,31,.05)}
/* the ratio is a minimum: stretched (a bento cell, a grid row), the inner surface grows and stays 8px from the frame all round */
.slot > .slot-in{flex:1 0 auto}
.slot-in{position:relative;aspect-ratio:var(--ar);border-radius:calc(var(--r-frame) - 8px);background:#fff;overflow:hidden;isolation:isolate;
  box-shadow:0 0 0 1px rgba(30,28,31,.05), 0 1px 2px rgba(30,28,31,.04), 0 8px 24px -16px rgba(30,28,31,.12);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px;text-align:center}
.slot-in::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.6;
  background-image:radial-gradient(rgba(30,28,31,.11) 1px, transparent 1.3px);background-size:18px 18px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%, transparent 16%, #000 78%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%, transparent 16%, #000 78%)}
.slot-lab{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 11px;border-radius:var(--r-pill);background:#fff;
  box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(30,28,31,.04), 0 6px 16px -10px rgba(30,28,31,.14);font:500 13px/1 var(--text);color:var(--muted);white-space:nowrap;max-width:100%}
.slot-lab span{overflow:hidden;text-overflow:ellipsis}
.slot-lab b{font-weight:500;color:var(--ink-2)}
.slot-lab svg{width:14px;height:14px;fill:var(--quiet);flex:none}
.slot-note{font-size:12.5px;line-height:1.45;color:var(--quiet-text);max-width:36ch;text-wrap:balance}
/* optional window chrome: three dots and a quiet title */
.slot-bar{position:absolute;left:0;right:0;top:0;height:40px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--line);background:#fff;z-index:1}
.slot-bar i{position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#E8E3E5}
.slot-bar i:nth-child(1){left:16px}.slot-bar i:nth-child(2){left:28px}.slot-bar i:nth-child(3){left:40px}
.slot-bar span{font-size:12px;color:var(--quiet-text);white-space:nowrap}
.slot-bar span b{font-weight:500;color:var(--ink-2)}
.slot--chrome .slot-in{padding-top:64px}
/* ratios */
.slot--16x10{--ar:16/10} .slot--16x9{--ar:16/9} .slot--4x3{--ar:4/3} .slot--1x1{--ar:1/1} .slot--3x4{--ar:3/4} .slot--9x16{--ar:9/16} .slot--21x9{--ar:21/9}
.slot--slack{--ar:16/7}   /* a Slack message crop */
.slot--fill .slot-in{aspect-ratio:auto}
/* tints (match the section's idea) */
.slot--white{--fill:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.slot--see{--fill:var(--tomato-mist);box-shadow:inset 0 0 0 1px rgba(242,69,46,.09)}
.slot--watch{--fill:var(--forest-mist);box-shadow:inset 0 0 0 1px rgba(15,77,56,.08)}
.slot--act{--fill:var(--butter-mist);box-shadow:inset 0 0 0 1px rgba(122,90,0,.09)}
.slot--money{--fill:var(--petal-wash);box-shadow:inset 0 0 0 1px rgba(249,32,100,.08)}
/* on a dark band */
.slot--on-dark{--fill:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.slot--on-dark .slot-in{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.slot--on-dark .slot-in::before{background-image:radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.3px)}
.slot--on-dark .slot-lab{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:rgba(255,255,255,.78)}
.slot--on-dark .slot-lab b{color:#fff}
.slot--on-dark .slot-lab svg{fill:rgba(255,255,255,.6)}
.slot--on-dark .slot-note{color:rgba(255,255,255,.66)}
/* smaller frames keep the curve concentric */
.slot--sm{--r-frame:22px;padding:6px}
.slot--sm .slot-in{border-radius:16px}

/* soft cards */
.card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-card);background:var(--soft);padding:clamp(22px,2.4vw,32px)}
.card--white{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.card--raised{background:#fff;box-shadow:0 0 0 1px rgba(30,28,31,.04), var(--sh-1)}
.card--see{background:var(--tomato-wash)}
.card--watch{background:var(--forest-wash)}
.card--act{background:var(--butter-wash)}
.card--money{background:var(--petal-wash)}
.card--see-mist{background:var(--tomato-mist)} .card--watch-mist{background:var(--forest-mist)} .card--act-mist{background:var(--butter-mist)}
.card--forest{background:var(--forest);color:#fff}
.card--grain::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);opacity:.18;mix-blend-mode:soft-light}
/* a gradient hairline on a featured card */
.card--feature{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(140deg, rgba(249,32,100,.5), rgba(255,211,224,.5) 34%, var(--line) 62%) border-box;border:1px solid transparent;box-shadow:var(--sh-1)}
.card-k{font:500 var(--fs-xs)/1.3 var(--text);color:var(--muted)}
/* a soft radial haze in one corner (one gradient moment per screen) */
.haze{position:absolute;z-index:-1;pointer-events:none;width:70%;aspect-ratio:1;right:-22%;top:-38%;background:radial-gradient(closest-side, var(--hz,rgba(255,211,224,.7)), transparent)}
.haze--see{--hz:rgba(242,69,46,.13)} .haze--watch{--hz:rgba(15,77,56,.10)} .haze--act{--hz:rgba(255,217,90,.5)} .haze--money{--hz:rgba(255,211,224,.75)}
.haze--bl{right:auto;top:auto;left:-24%;bottom:-40%}

/* the inset picture: a well for a card's art. Set 8px inside the card's edge (.card--well), its radius is concentric
   (20 − 8 = 12). A well that sits mid-card, with words above it, takes --r-inner (14) instead. Tinted by idea. */
.card--well{padding:8px}
.card-well{position:relative;isolation:isolate;overflow:hidden;border-radius:calc(var(--r-card) - 8px);background:var(--soft);box-shadow:inset 0 0 0 1px rgba(30,28,31,.03)}
.card-well--see{background:var(--tomato-mist);box-shadow:inset 0 0 0 1px rgba(242,69,46,.07)}
.card-well--watch{background:var(--forest-mist);box-shadow:inset 0 0 0 1px rgba(15,77,56,.06)}
.card-well--act{background:var(--butter-mist);box-shadow:inset 0 0 0 1px rgba(122,90,0,.07)}
.card-well--money{background:var(--petal-wash);box-shadow:inset 0 0 0 1px rgba(249,32,100,.06)}

/* =====================================================================================
   LAYOUT
   ===================================================================================== */
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:calc(880px + 2 * var(--gut))}
.wrap--text{max-width:calc(720px + 2 * var(--gut))}
.sec{padding-block:var(--sec)}
.sec--first{padding-top:calc(var(--sec) + 24px)}
.sec--flush-top{padding-top:0}
.sec--flush-bottom{padding-bottom:0}
/* section heads: one idea per section; sticker → headline → a few words */
.sec-head{margin-bottom:clamp(32px,4vw,52px)}
/* the sticker sits one clear step above its headline, in split heads too (where it's wrapped in a div) */
.sec-head .sticker{margin-bottom:18px}
.sec-head .body,.sec-head .lead{margin-top:18px}
.sec-head--split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:20px 56px;align-items:end}
.sec-head--split .body,.sec-head--split .lead{margin-top:0;padding-bottom:4px}
.sec-head--center{display:flex;flex-direction:column;align-items:center;text-align:center}
.sec-head--center .body,.sec-head--center .lead{max-width:52ch;text-wrap:balance}

/* the hero: one pattern on every page. Kicker → H1 (from --fs-hero; one fit formula on phones) → lead → the CTA row
   (Start free, ink, and one soft secondary) → the microline. Left-aligned, centred (.hero-ctas--c) or split with art (.hero-split). */
.sec--first .kicker + .h1{margin-top:22px}
.h1 + .lead{margin-top:24px}
.hero-ctas{margin-top:34px}
.hero-ctas--c{justify-content:center}
.hero-ctas + .micro{margin-top:16px}
.hero-split{display:grid;grid-template-columns:minmax(0,6.3fr) minmax(0,5.7fr);gap:40px;align-items:center}
.hero-split-copy{padding-block:24px}

/* the bento grid (Poly): 12 columns, cards of different spans; one hero card per bento */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bento > *{grid-column:span 12;min-width:0}
.span-3{grid-column:span 3!important}.span-4{grid-column:span 4!important}.span-5{grid-column:span 5!important}.span-6{grid-column:span 6!important}
.span-7{grid-column:span 7!important}.span-8{grid-column:span 8!important}.span-9{grid-column:span 9!important}.span-12{grid-column:span 12!important}
.row-2{grid-row:span 2}

/* cinematic bands: inset from the viewport edges, a big radius, atmosphere and grain. At most one per page, plus the CTA. */
.band{position:relative;isolation:isolate;overflow:hidden;margin-inline:auto;width:calc(100% - 2 * clamp(8px, 1.2vw, 16px));max-width:1600px;border-radius:var(--r-band)}
.band--forest{background:var(--forest-deep);color:#fff}
.band--forest::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(70% 60% at 18% 0%, rgba(42,140,100,.42), transparent 70%),
             radial-gradient(60% 55% at 92% 100%, rgba(4,26,18,.7), transparent 72%),
             linear-gradient(180deg, #0F4D38 0%, #0C4230 46%, #093626 100%)}
.band--forest::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);opacity:.11;mix-blend-mode:overlay}
.band--pink{background:var(--pink);color:#fff}
.band--pink::before{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(64% 84% at 100% 100%, rgba(150,0,48,.2), transparent 70%)}
.band--pink::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain);opacity:.15;mix-blend-mode:overlay}
.on-dark{color:#fff}
.on-dark .h2,.on-dark .h3,.on-dark .h4{color:#fff}
.on-dark .body,.on-dark .lead{color:rgba(255,255,255,.76)}
.on-dark .sw-mute,.card--forest .sw-mute{color:rgba(255,255,255,.52)}
.on-dark .fine{color:rgba(255,255,255,.62)}
.on-dark .small{color:rgba(255,255,255,.7)}
.on-dark .watched{color:var(--mint)}
.on-dark .money{color:#FF8DB0}
.on-dark .sticker{--sh-sticker:0 0 0 2.5px #fff, 0 6px 16px -3px rgba(0,0,0,.4)}
/* forest on forest would read as an outline: on a dark band the Watch sticker turns mint, still filled, still die-cut */
.on-dark .sticker--watch{background:var(--mint);color:var(--forest-deep)}
.on-dark .sticker--watch .spk{fill:var(--forest);opacity:1}
.on-dark .sticker--watch::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}

/* the thinking strip (Air): Read the tools · Working the sum. Words, not UI. */
.think{display:flex;flex-direction:column;border-top:1px dashed var(--tl,var(--line-2));border-bottom:1px dashed var(--tl,var(--line-2));padding:6px 0}
.think-row{display:grid;grid-template-columns:76px minmax(0,1fr);gap:12px;padding:10px 0;font-size:var(--fs-sm);line-height:1.5}
.think-k{display:flex;align-items:center;gap:7px;height:21px;font-weight:500;color:var(--tk,var(--muted))}
.think-k::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.55;transition:background-color .3s,opacity .3s}
.think-row.is-done .think-k::before{background:var(--forest);opacity:1}
.think-row.is-busy .think-k::before{background:var(--butter);opacity:1}
.think-v{color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center}
/* each source is led by its separator dot, and the dot that would open a line is clipped away (the group overhangs by 15px
   and clips that overhang), so a wrapped line never ends on a dangling "·" */
.think-v .grp{display:flex;flex-wrap:wrap;width:calc(100% + 15px);margin-left:-15px;clip-path:inset(-6px -6px -6px 15px)}
.think-v .w{position:relative;display:inline-flex;align-items:center;padding-left:15px;transition:opacity .3s var(--ease)}
.think-v .w::before{content:"";position:absolute;left:6px;top:calc(.75em - 1.5px);width:3px;height:3px;border-radius:50%;background:var(--quiet)}
.think-v .w.dim{opacity:.26}
.think-v.sum{font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.think--act{--tl:rgba(122,90,0,.24);--tk:var(--butter-ink)}
/* on a money card (petal), the strip takes the card's pink instead of Act's butter */
.think--money{--tl:rgba(209,16,90,.2);--tk:var(--pink-ink)}

/* =====================================================================================
   ARTEFACTS (the marketing world around the product)
   ===================================================================================== */
/* tool slips: each tool's own version of the truth. Paper, a scalloped perforated top, a generic glyph, the tool's figure.
   Put the shadow on the .slip wrapper (filter), so the masked edge casts a true shadow and it always falls down. */
.slip{--k:1;filter:var(--f-paper);width:max-content}
.slip-in{width:calc(236px * var(--k));min-height:calc(158px * var(--k));display:flex;flex-direction:column;justify-content:space-between;gap:calc(10px * var(--k));
  padding:calc(20px * var(--k)) calc(18px * var(--k)) calc(15px * var(--k));background:var(--paper);border-radius:0 0 var(--r-sm) var(--r-sm);
  /* the body layer overlaps the scallop row by 1px, so a rotated slip never shows a hairline seam between the two */
  -webkit-mask:radial-gradient(circle at 5px 0, transparent 3.2px, #000 3.7px) top left / 10px 7px repeat-x, linear-gradient(#000,#000) 0 6px / 100% calc(100% - 6px) no-repeat;
          mask:radial-gradient(circle at 5px 0, transparent 3.2px, #000 3.7px) top left / 10px 7px repeat-x, linear-gradient(#000,#000) 0 6px / 100% calc(100% - 6px) no-repeat;
  font-size:calc(13px * var(--k));line-height:1.35;color:var(--muted)}
.slip-hd{flex:none;display:flex;align-items:center;gap:calc(7px * var(--k));font-weight:500;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slip-hd svg{width:calc(14px * var(--k));height:calc(14px * var(--k));color:var(--muted);flex:none}
.slip-fig{display:flex;align-items:baseline;gap:calc(8px * var(--k))}
.slip-fig .k{font-size:max(11px, calc(12px * var(--k)));color:var(--quiet-text);font-weight:500}  /* a label never under 11px, however small the slip */
.slip-fig b{font:500 calc(44px * var(--k))/1 var(--display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.slip-fig b i{font-style:normal;font-size:.5em;color:var(--muted);margin-left:2px;letter-spacing:0}
.slip-big{font:500 calc(23px * var(--k))/1.1 var(--display);letter-spacing:-.018em;color:var(--ink)}
.slip-ft{display:flex;align-items:center;gap:6px;padding-top:calc(10px * var(--k));border-top:1px dashed var(--line-2);white-space:nowrap}
.slip-ft svg{width:calc(11px * var(--k));height:calc(11px * var(--k));fill:currentColor;flex:none}
.slip-ft--warn{color:var(--tomato-ink)}
/* the spreadsheet slip: a real little sheet, #REF! boxed in tomato */
.sheetgrid{display:grid;grid-template-columns:20% 40% 40%;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px var(--line-2);font-size:calc(12px * var(--k));font-variant-numeric:tabular-nums}
.sheetgrid span{height:calc(24px * var(--k));display:flex;align-items:center;padding:0 calc(7px * var(--k));box-shadow:inset -1px -1px 0 var(--line);color:var(--quiet);background:#fff;white-space:nowrap}
.sheetgrid span:nth-child(-n+3){background:var(--soft);font-size:calc(10.5px * var(--k));height:calc(19px * var(--k))}
.sheetgrid span:nth-child(5){color:var(--ink-2)}
.sheetgrid .err{color:var(--tomato-ink);font-weight:600;box-shadow:inset 0 0 0 1.5px var(--tomato);background:#FFF4F2}
.thumbs{position:relative;width:calc(38px * var(--k));height:calc(30px * var(--k));margin-right:calc(4px * var(--k));flex:none}
.thumbs i{position:absolute;inset:0;border-radius:4px;background:#fff;box-shadow:0 0 0 1px var(--line-2), 0 1px 2px rgba(30,28,31,.06)}
.thumbs i:nth-child(1){transform:rotate(-9deg) translate(-3px,1px)}
.thumbs i:nth-child(2){transform:rotate(5deg) translate(3px,-1px)}
.thumbs i:nth-child(3){background:linear-gradient(#ECE8E9 0 0) 6px 7px / 55% 3px no-repeat, linear-gradient(#ECE8E9 0 0) 6px 13px / 35% 3px no-repeat, #fff}

/* the receipt: perforated top and bottom, ruled off, the gap in tomato */
.receipt{width:100%;max-width:330px;background:var(--paper);padding:22px 22px 20px;filter:var(--f-paper);
  -webkit-mask:radial-gradient(circle at 6px 0, transparent 3.6px, #000 4.1px) top left / 12px 8px repeat-x, radial-gradient(circle at 6px 100%, transparent 3.6px, #000 4.1px) bottom left / 12px 8px repeat-x, linear-gradient(#000,#000) 0 8px / 100% calc(100% - 16px) no-repeat;
          mask:radial-gradient(circle at 6px 0, transparent 3.6px, #000 4.1px) top left / 12px 8px repeat-x, radial-gradient(circle at 6px 100%, transparent 3.6px, #000 4.1px) bottom left / 12px 8px repeat-x, linear-gradient(#000,#000) 0 8px / 100% calc(100% - 16px) no-repeat}
.receipt-wrap{filter:var(--f-paper)}
.receipt-wrap .receipt{filter:none}
.rc-h{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--quiet-text);padding:4px 0 12px;border-bottom:1px dashed var(--line-2);margin-bottom:4px}
.rc-h span:first-child{color:var(--ink-2);font-weight:500}
.rc-row,.rc-gap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 0;font-variant-numeric:tabular-nums}
.rc-row span{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--muted)}
.rc-row span svg{width:13px;height:13px;color:var(--quiet)}
.rc-row b,.rc-gap b{font:500 26px/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.rc-row b small{font:400 13px/1 var(--text);color:var(--muted);letter-spacing:0;margin-left:3px}
.rc-gap{border-top:1px solid var(--ink);margin-top:4px;padding-top:12px}
.rc-gap span{font-size:14px;font-weight:500}
.rc-gap b{color:var(--tomato-ink)}
.rc-ft{margin-top:8px;padding-top:12px;border-top:1px dashed var(--line-2);font:500 15px/1.35 var(--display);color:var(--ink);text-align:center}

/* the days-of-cover tape (Watch): a butter tape in days, the gap hatched in pink, a flag at your line,
   the candle standing on today, the kraft box at the restock. Positions are --d (day) over --days (scale). */
.tape{--days:21;--tape-top:118px;position:relative;padding-top:var(--tape-top)}
.tape-marks{position:absolute;left:0;right:0;top:0;height:var(--tape-top)}
.tape-strip{position:relative;height:44px;border-radius:7px;background:linear-gradient(180deg,#FFE27A,#FFD95A 55%,#F5CB45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(122,90,0,.25), 0 1px 1px rgba(0,0,0,.12), 0 10px 22px -12px rgba(0,0,0,.45)}
.tape-strip::before{content:"";position:absolute;left:-14px;top:5px;bottom:5px;width:18px;border-radius:5px 2px 2px 5px;
  background:linear-gradient(180deg,#F1EEEF,#C9C3C6 60%,#E4E0E1);box-shadow:inset 0 0 0 1px rgba(30,28,31,.18)}
.tape-ticks{position:absolute;left:0;right:0;top:0;height:16px;width:100%}
.tape-ticks path{stroke:#3B2E05;stroke-opacity:.62;stroke-width:1;vector-effect:non-scaling-stroke;fill:none}
.tape-nums{position:absolute;inset:0}
.tape-n{position:absolute;z-index:1;bottom:5px;left:calc(var(--d) / var(--days) * 100%);transform:translateX(-50%);font:500 11px/1 var(--text);color:#4A3A08;font-variant-numeric:tabular-nums}
/* inside the gap each day number sits on a small butter backing, so it reads over the hatch (the gap's own edge days are not numbered: their labels say it) */
.tape-n.is-in{padding:2px 3px 1px;border-radius:3px;background:#FFDD6A;box-shadow:0 0 0 1px rgba(122,90,0,.12);bottom:4px}
.tape-gap{position:absolute;top:0;bottom:0;left:calc(var(--a) / var(--days) * 100%);width:calc((var(--b) - var(--a)) / var(--days) * 100%);
  background:repeating-linear-gradient(-45deg, rgba(249,32,100,.62) 0 2px, rgba(255,236,242,.72) 2px 6.5px);box-shadow:inset 2px 0 0 var(--pink), inset -2px 0 0 var(--pink)}
.tape-m{position:absolute;bottom:0;left:calc(var(--d) / var(--days) * 100%);width:0;height:0}
.tape-lab{position:absolute;bottom:12px;display:flex;flex-direction:column;gap:4px;font-size:12px;line-height:1.2;white-space:nowrap;color:var(--tl,var(--muted))}
.tape-lab b{font:500 17px/1 var(--display);letter-spacing:-.01em;color:var(--tb,var(--ink));font-variant-numeric:tabular-nums}
/* the day it sells out: the candle stands on the tape */
.tape-now .tape-candle{position:absolute;left:-27px;bottom:0;width:54px;filter:var(--f-obj)}
.tape-now .tape-candle svg{width:100%;height:auto;aspect-ratio:96/122}
.tape-now .tape-lab{right:36px;bottom:10px;align-items:flex-end;text-align:right}
.tape-now .tape-lab b{color:var(--tbm,var(--pink-ink))}
/* your line: a flag pin, the pennant pointing back towards today */
.tape-line::before{content:"";position:absolute;left:-1px;bottom:-44px;width:2px;height:calc(44px + var(--pin,76px));border-radius:2px;background:var(--tf,var(--forest))}
.tape-flag{position:absolute;right:1px;bottom:calc(var(--pin,76px) - 28px);height:24px;display:flex;align-items:center;padding:0 10px 0 15px;background:var(--tff,var(--forest));color:var(--tfc,#fff);
  font:500 12px/1 var(--text);white-space:nowrap;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,8px 50%);border-radius:0 2px 2px 0}
.tape-line .tape-pinhead{position:absolute;left:-5px;bottom:calc(var(--pin,76px) - 4px);width:10px;height:10px;border-radius:50%;background:var(--butter);box-shadow:inset 0 -1px 0 rgba(122,90,0,.4), 0 1px 2px rgba(0,0,0,.3)}
/* restock: a tiny kraft box on the tape */
.tape-stock::before{content:"";position:absolute;left:-1px;bottom:-44px;width:2px;height:44px;background:var(--ts,rgba(30,28,31,.35))}
.tape-stock .tape-box{position:absolute;left:-20px;bottom:0;width:40px;filter:drop-shadow(0 4px 4px rgba(0,0,0,.2))}
.tape-stock .tape-box svg{width:100%;height:auto;aspect-ratio:140/126}
.tape-stock .tape-lab{left:28px;bottom:4px}
.tape-under{position:relative;height:62px}
.tape-bracket{position:absolute;top:12px;left:calc(var(--a) / var(--days) * 100%);width:calc((var(--b) - var(--a)) / var(--days) * 100%);height:8px;
  border:1.5px solid var(--tbr,rgba(30,28,31,.4));border-top:0;border-radius:0 0 3px 3px}
.tape-gaplab{position:absolute;top:30px;left:calc((var(--a) + var(--b)) / 2 / var(--days) * 100%);transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;
  font-size:13px;color:var(--tl,var(--muted))}
.tape-gaplab .money{display:inline-flex;align-items:center;gap:6px;font:500 17px/1 var(--display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tape-gaplab .money small{font:400 12.5px/1 var(--text);letter-spacing:0;color:var(--tl,var(--muted));margin-left:2px}
.tape-gaplab .tk{width:18px;height:18px}
.tape-today{position:absolute;top:12px;left:0;font-size:12px;color:var(--tl,var(--muted))}
/* on forest */
.tape--on-dark{--tl:rgba(255,255,255,.66);--tb:#fff;--tbm:#FF8DB0;--tf:#fff;--tff:#fff;--tfc:var(--ink);--ts:rgba(255,255,255,.5);--tbr:rgba(255,255,255,.45)}
.tape--on-dark .tape-gaplab .money{color:#FF9FBD}

/* the brand's objects (Pell & Moss), drawn by hand. Each viewBox is cropped to its lowest point,
   so it stands exactly on its line. Shadow on an unrotated wrapper (.obj), so it always falls down. */
.obj{filter:var(--f-obj);transform-origin:50% 100%}
.obj svg{width:100%;height:auto}
.obj--fig{width:84px}.obj--fig svg{aspect-ratio:96/122}
.obj--cedar{width:84px}.obj--cedar svg{aspect-ratio:96/110}
.obj--votive{width:60px}.obj--votive svg{aspect-ratio:80/88}
.obj--tin{width:108px}.obj--tin svg{aspect-ratio:120/60}
.obj--match{width:118px}.obj--match svg{aspect-ratio:140/73}
.obj--box{width:120px}.obj--box svg{aspect-ratio:140/126}
.obj--stack{width:64px}.obj--stack svg{aspect-ratio:72/65}
.obj--token{width:52px}.obj--token svg{aspect-ratio:1}
/* a shelf: objects standing on a line */
.shelf{display:flex;align-items:flex-end;gap:10px;pointer-events:none}
/* a perch: the shelf standing on the top edge of a card or a frame (its straight run, clear of the corner radius).
   Put it inside a positioned parent, with --l or --r; --px moves it in from the side. */
.perch{position:absolute;z-index:2;bottom:calc(100% - 1px);display:flex;align-items:flex-end;gap:8px;pointer-events:none}
.perch--l{left:var(--px,clamp(24px,4.4%,56px))}
.perch--r{right:var(--px,clamp(24px,4.4%,56px))}

/* the postage stamp + postmark (letters, the founder note) */
.stamp{width:84px;transform:rotate(4deg);filter:drop-shadow(0 1px 1px rgba(30,28,31,.12)) drop-shadow(0 6px 10px rgba(30,28,31,.12))}
.stamp svg{width:100%;height:auto;aspect-ratio:112/132}
.postmark{width:170px;opacity:.6}
.postmark svg{width:100%;height:auto;aspect-ratio:220/90}
/* the signature under a letter (Home's #why, About): a ring-mark portrait disc, the name in Funnel, the role under it.
   Space it per page; the founder's name and portrait are .tbc until they're real. */
.sign{display:flex;align-items:center;gap:14px}
.sign-portrait{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);flex:none}
.sign-portrait svg{width:22px;height:22px;fill:var(--ink)}
.sign-tx{display:flex;flex-direction:column;gap:3px;font-size:14px;color:var(--muted)}
.sign-tx b{font:500 17px/1.2 var(--display);color:var(--ink)}

/* the envelope: a letter that didn't go out (#o-envelope), on soft paper. Position it per page; --w sets its size. */
.envelope{position:absolute;width:var(--w,150px);filter:drop-shadow(0 1px 1px rgba(30,28,31,.08)) drop-shadow(0 10px 14px rgba(30,28,31,.12))}
.envelope svg{width:100%;height:auto;aspect-ratio:160/104}
/* the round postmark: a rubber stamp in pink ink, arc words top and bottom and one word across the middle.
   <span class="pmark" data-top="KLAVIYO FLOW" data-mid="OFF" data-bottom="SINCE THE 3RD"></span>, drawn by SV.stamps. */
.pmark{position:absolute;width:var(--w,82px);color:var(--pink);opacity:.9;mix-blend-mode:multiply;transform:rotate(var(--tilt,-14deg));pointer-events:none}
.pmark svg{width:100%;height:auto;aspect-ratio:1}

/* the kraft tag: a paper tag on a string, its label set in Funnel (--sans for a line of words). The point and the eyelet
   sit on the right; .ktag--l puts them on the left. --h sets the size; the string (.ktag-str) runs up out of the eyelet.
   <span class="ktag" style="--h:36px;--tilt:9deg"><span class="ktag-in">612</span><i class="ktag-str"></i></span> */
.ktag{--h:38px;--tilt:0deg;position:absolute;display:inline-flex;transform:rotate(var(--tilt));pointer-events:none;
  filter:drop-shadow(0 1px 1px rgba(90,60,25,.16)) drop-shadow(0 6px 9px rgba(30,28,31,.14))}
.ktag-in{position:relative;display:flex;flex-direction:column;justify-content:center;gap:calc(var(--h) * .06);height:var(--h);
  padding:0 calc(var(--h) * .9) 0 calc(var(--h) * .36);border-radius:calc(var(--h) * .13) 0 0 calc(var(--h) * .13);
  background:linear-gradient(160deg,#F2D6AE 0%,#E3BF92 55%,#D8AF81 100%);
  clip-path:polygon(0 0,calc(100% - var(--h) * .5) 0,100% 50%,calc(100% - var(--h) * .5) 100%,0 100%);
  font:500 calc(var(--h) * .44)/1 var(--display);letter-spacing:-.01em;color:#5A3E1E;white-space:nowrap;font-variant-numeric:tabular-nums}
.ktag-in::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.55)}
/* the eyelet: a punched hole, ringed */
.ktag-in::after{content:"";position:absolute;top:50%;right:calc(var(--h) * .3);width:calc(var(--h) * .19);aspect-ratio:1;margin-top:calc(var(--h) * -.095);border-radius:50%;
  background:#fff;box-shadow:0 0 0 1px rgba(156,116,72,.38), inset 0 1px 1.5px rgba(90,60,25,.3)}
.ktag-in small{font:500 max(10px, calc(var(--h) * .22))/1 var(--text);letter-spacing:0;color:#7A5A33}  /* the second line never under 10px, at any --h */
.ktag--sans .ktag-in{font:500 calc(var(--h) * .33)/1 var(--text);letter-spacing:0}
.ktag--l .ktag-in{padding:0 calc(var(--h) * .36) 0 calc(var(--h) * .9);border-radius:0 calc(var(--h) * .13) calc(var(--h) * .13) 0;
  clip-path:polygon(calc(var(--h) * .5) 0,100% 0,100% 100%,calc(var(--h) * .5) 100%,0 50%)}
.ktag--l .ktag-in::after{right:auto;left:calc(var(--h) * .3)}
.ktag-str{position:absolute;z-index:1;bottom:50%;right:calc(var(--h) * .395 - .7px);width:var(--sw,24px);height:calc(var(--h) * .5 + var(--sl,18px));
  border:1.4px solid #B89268;border-left:0;border-bottom:0;border-radius:0 18px 0 0;transform:rotate(var(--sr,-14deg));transform-origin:100% 100%}
.ktag--l .ktag-str{right:auto;left:calc(var(--h) * .395 - .7px);border-right:0;border-left:1.4px solid #B89268;border-radius:18px 0 0 0;
  transform:rotate(var(--sr,14deg));transform-origin:0 100%}

/* "apart": the figure sticker between two tools' answers, a dotted leader running out to each (--gap sets their length).
   The sticker is a figure: .sticker--fig.sticker--sm. --bare drops the leaders where the slips touch it. */
.apart{--gap:34px;position:relative;display:inline-flex;align-items:center}
.apart::before,.apart::after{content:"";position:absolute;top:50%;width:var(--gap);border-top:1.5px dotted var(--tomato)}
.apart::before{right:100%;margin-right:5px}
.apart::after{left:100%;margin-left:5px}
.apart--bare::before,.apart--bare::after{display:none}

/* the card file: the store's history, filed by what it was. A kraft box with the brand's pink tape, divider cards
   stepping down front to front (each with its tab), an optional index card in front, a plate on the box.
   Drawn in container units, so it scales as one picture. Place each card with --y (top), --r (tilt) and its tab with --x. */
.cardfile{--ar:10/8;position:relative;width:100%;aspect-ratio:var(--ar);margin-inline:auto;container-type:inline-size}
.cf-card{position:absolute;left:8%;width:84%;height:44%;top:var(--y,10%);transform:rotate(var(--r,0deg));border-radius:1.6cqw;
  background:linear-gradient(180deg,#FFFDF9,#F8F4F0);box-shadow:0 0 0 1px rgba(30,28,31,.07), 0 -4px 10px -8px rgba(30,28,31,.2)}
.cf-tab{position:absolute;bottom:calc(100% - 1px);left:var(--x,6%);height:max(19px,6.4cqw);display:inline-flex;align-items:center;padding:0 max(8px,2.6cqw);border-radius:max(5px,1.3cqw) max(5px,1.3cqw) 0 0;
  font:500 max(11px,2.8cqw)/1 var(--text);white-space:nowrap;color:var(--ink-2);background:#EFE8E2;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(90,60,25,.07)}
.cf-tab--money{background:var(--pink-ink);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.cf-tab--see{background:var(--tomato-wash);color:var(--tomato-ink)}
.cf-tab--watch{background:var(--forest-wash);color:var(--forest)}
.cf-tab--act{background:var(--butter);color:var(--ink)}
/* the front index card: a red header rule under the entry, faint blue rules below it */
.cf-index{background-color:#FFFDF9;
  background-image:linear-gradient(rgba(242,69,46,.7) 0 0), repeating-linear-gradient(180deg, transparent 0 4.4cqw, rgba(60,110,190,.13) 4.4cqw calc(4.4cqw + 1px));
  background-size:100% 1px, 100% 100%;background-position:0 14.2cqw, 0 14.2cqw;background-repeat:no-repeat}
.cf-index b{position:absolute;left:5cqw;top:3.4cqw;font:500 5.4cqw/1 var(--display);letter-spacing:-.022em;color:var(--ink)}
.cf-index small{position:absolute;left:5cqw;top:10cqw;font:400 max(10px,2.7cqw)/1 var(--text);color:var(--muted);white-space:nowrap}
.cf-box{position:absolute;z-index:4;left:3%;right:3%;bottom:3%;height:40%;border-radius:1.2cqw 1.2cqw 3cqw 3cqw;
  background:linear-gradient(180deg,#D8AC74 0%,#CB9B62 60%,#BE8E57 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -0.8cqw 1.6cqw rgba(90,60,25,.16), 0 2px 3px rgba(80,50,20,.16), 0 22px 30px -18px rgba(80,50,20,.45)}
.cf-box::before{content:"";position:absolute;left:0;right:0;top:0;height:2.4cqw;border-radius:1.2cqw 1.2cqw 0 0;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0))}
/* the brand's pink tape, across the box */
.cf-box::after{content:"";position:absolute;left:12%;width:8.4%;top:-0.3cqw;bottom:-0.3cqw;background:linear-gradient(90deg,#E0175A,var(--pink) 40%,#E0175A);
  box-shadow:inset 1px 0 0 rgba(255,255,255,.22)}
.cf-plate{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--pr,0deg));display:inline-flex;align-items:center;gap:1.6cqw;height:max(26px,8cqw);padding:0 max(10px,3.2cqw);border-radius:1.2cqw;
  background:#FFFDF9;font:500 max(12.5px,3.2cqw)/1 var(--display);letter-spacing:-.01em;color:var(--ink);white-space:nowrap;
  box-shadow:inset 0 0 0 max(1px,.3cqw) rgba(90,60,25,.22), 0 1px 1px rgba(80,50,20,.2)}
.cf-plate svg{width:max(13px,3.5cqw);height:max(13px,3.5cqw);fill:var(--ink)}

/* =====================================================================================
   THE CTA BAND (one markup, every page; only .cta-art may vary)
   <section class="sec sec--cta" id="start"> › .band.band--pink.cta-band › .cta-ring + .wrap.cta-in › .cta-copy (h2.h2.cta-h with two .ln,
   then .cta-row: the white Start free + .cta-micro) + .cta-art (.ca objects). The section sits flush under the one before it.
   ===================================================================================== */
.sec--cta{padding-top:0}
.cta-band{padding-block:clamp(56px,7vw,104px)}
.cta-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.cta-ring{position:absolute;z-index:-1;right:-4%;top:50%;width:min(52%,640px);aspect-ratio:1;transform:translateY(-50%) rotate(-8deg);fill:#fff;opacity:.075}
.cta-h{color:#fff;font-size:clamp(34px,4vw,56px)}
.cta-h .intoken{filter:drop-shadow(0 2px 3px rgba(120,0,40,.35))}
.cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:36px}
/* a small stuck-on label beside the white button: white on a darkened pink chip (4.8:1; no small white type passes on #F92064) */
.cta-micro{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 12px;border-radius:var(--r-pill);background:rgba(120,0,40,.22);
  color:#fff;font:500 14px/1 var(--text);white-space:nowrap}
.cta-art{position:relative;width:260px;height:220px}
.ca{position:absolute;filter:drop-shadow(0 4px 4px rgba(110,0,35,.25)) drop-shadow(0 18px 20px rgba(110,0,35,.28))}
.ca svg{width:100%;height:auto}
.ca-stack{width:150px;left:30px;bottom:10px}
.ca-stack svg{aspect-ratio:72/65}
.ca-t1{width:84px;right:4px;bottom:22px;transform:rotate(14deg)}
.ca-t2{width:64px;left:70px;top:63px;transform:rotate(-12deg);transform-origin:50% 100%}
.ca-t1 svg,.ca-t2 svg{aspect-ratio:1}
/* the art's one variant: No.4 Fig Leaf between two tokens */
.ca-fig{width:118px;left:44px;bottom:12px}
.ca-fig svg{aspect-ratio:96/122}
.cta-art--fig .ca-t1{width:78px;right:6px;bottom:14px}
.cta-art--fig .ca-t2{width:58px;left:4px;top:auto;bottom:10px;transform:rotate(-14deg)}

/* reveal helper: rises from a visible state (transform only; content is never hidden at rest) */
[data-rise]{will-change:auto}

/* =====================================================================================
   NAV (injected by site.js into <header data-chrome="nav">)
   ===================================================================================== */
/* Souvenir production header, from the approved navigation study. All component rules are scoped to .svn.
   Layer scale: header 50, status 51; the native mobile dialog uses the top layer.
   Native CSS, existing brand assets. Design variance 6 / motion 4 / density 3. */
.svn{--svn-ink:#1e1c1f;--svn-muted:#6b6670;--svn-pink:#f92064;--svn-focus:#d1105a;--svn-line:#e9e5e7;--svn-soft:#f5f3f4;--svn-ease:cubic-bezier(.23,1,.32,1);--svn-h:72px;--svn-pill-h:36px;--svn-menu-gap:8px;--svn-gutter:clamp(20px,3.1vw,48px);font:400 15px/1.45 Geist,Arial,sans-serif;color:var(--svn-ink);font-synthesis:none;position:sticky;top:0;z-index:50;background:#fff;user-select:none}
.svn *,.svn *::before,.svn *::after{box-sizing:border-box}
.svn :where(a){color:inherit;text-decoration:none}
.svn :where(button,summary){font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.svn :where(button){border:0;cursor:pointer;background:none;padding:0}
.svn :where(a,button,summary):focus-visible{outline:2px solid var(--svn-focus);outline-offset:4px;border-radius:5px}
.svn :where(img){display:block;max-width:100%}
.svn :where(p){margin:0}
.svn [hidden]{display:none!important}
.svn-bar{height:var(--svn-h);padding:0 var(--svn-gutter);display:flex;align-items:center;gap:clamp(25px,4.5vw,70px);max-width:1536px;margin:auto}
.svn--launch{background:transparent;pointer-events:none}
.svn--launch .svn-bar{justify-content:center;padding-inline:16px}
.svn-launch-pill{--svn-launch-width:min(326px,calc(100vw - 32px));--svn-launch-logo:124px;--svn-launch-inset:20px;position:relative;flex:none;width:var(--svn-launch-width);height:56px;transition:transform 280ms var(--svn-ease)}
.svn-launch-pill::before{content:"";position:absolute;inset:0;border:1px solid #e9e5e7;border-radius:999px;background:#fffffff0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 2px 6px #23131d05,0 10px 32px -12px #23131d30;opacity:0;transform:scaleX(.48);transition:transform 280ms var(--svn-ease),opacity 180ms ease}
/* The lockup carries more ink on the mark side. A small optical correction
   aligns its visible weight with the centered hero typography. */
.svn--launch .svn-logo{position:absolute;left:var(--svn-launch-inset);top:6px;pointer-events:auto;transform:translateX(calc((var(--svn-launch-width) - var(--svn-launch-logo))/2 - var(--svn-launch-inset) + 5px));transition:transform 280ms var(--svn-ease)}
.svn--launch .svn-logo svg{width:var(--svn-launch-logo)}
.svn--launch .svn-launch-cta{position:absolute;right:6px;top:6px;min-height:44px;padding-inline:18px;font-size:13px;pointer-events:none;opacity:0;visibility:hidden;transform:translateX(-8px) scale(.96);transition:opacity 140ms ease,transform 250ms var(--svn-ease),visibility 0s 250ms}
.svn--launch.is-compact .svn-launch-pill{transform:translateY(6px)}
.svn--launch.is-compact .svn-launch-pill::before{opacity:1;transform:scaleX(1)}
.svn--launch.is-compact .svn-logo{transform:translateX(0)}
.svn--launch.is-compact .svn-launch-cta{pointer-events:auto;opacity:1;visibility:visible;transform:none;transition:opacity 180ms ease 70ms,transform 280ms var(--svn-ease),visibility 0s}
.svn--launch.is-compact .svn-launch-cta:active{transform:scale(.975)}
.svn--launch[data-reduced-motion=true] .svn-launch-cta:active{transform:none}
@media(max-width:360px){.svn-launch-pill{--svn-launch-logo:108px;--svn-launch-inset:18px}.svn--launch .svn-launch-cta{padding-inline:16px;font-size:12px}}
.svn::after{content:"";position:absolute;z-index:0;inset:auto 0 0;height:1px;background:var(--svn-line);opacity:0;transition:opacity 160ms ease;pointer-events:none}
.svn.is-scrolled::after{opacity:1}
.svn-logo{display:inline-flex;align-items:center;flex-shrink:0;min-height:44px}
.svn-logo svg{width:133px;height:auto;fill:currentColor;aspect-ratio:122/24}
.svn-desktop{display:flex;align-items:center;gap:4px;align-self:stretch}
.svn-trigger{height:var(--svn-pill-h);display:inline-flex;align-items:center;gap:7px;padding:0 12px;border-radius:999px!important;white-space:nowrap;font-size:14px;letter-spacing:-.015em;transition:background-color 140ms ease,color 140ms ease}
.svn-trigger:is(:hover,[aria-expanded="true"]){background:#f2eff1}
.svn-trigger[aria-current="page"]{color:var(--svn-focus)}
.svn-chevron{width:6px;height:6px;border-bottom:1px solid currentColor;border-right:1px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.65;transition:transform 180ms var(--svn-ease)}
.svn [aria-expanded="true"]>.svn-chevron{transform:translateY(1px) rotate(225deg)}
.svn-account{margin-left:auto;display:flex;align-items:center;gap:23px;font-size:14px;white-space:nowrap}
.svn-login{padding:12px 0;transition:color 140ms ease}.svn-login:hover{color:var(--svn-focus)}
.svn-cta{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 23px;border-radius:999px!important;background:var(--pink);color:#fff!important;font-size:14px;line-height:1;white-space:nowrap;transition:background-color 150ms ease,transform 140ms var(--svn-ease);box-shadow:inset 0 1px 0 #ffffff38}
.svn-cta:hover{background:#FF2D6F}.svn-cta:active{transform:scale(.975)}
.svn-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border-radius:50%!important}
.svn-burger:hover,.svn-close:hover{background:var(--svn-soft)}
.svn-burger span{display:block;width:19px;height:1.5px;background:var(--svn-ink);border-radius:1px}
/* Each dropdown follows its trigger and sits above the header's scroll divider. */
.svn-stage{position:absolute;z-index:1;top:calc((var(--svn-h) + var(--svn-pill-h))/2 + var(--svn-menu-gap));left:max(var(--svn-gutter),calc((100vw - 1536px)/2 + var(--svn-gutter)));width:min(1056px,calc(100vw - var(--svn-gutter)*2));pointer-events:none;isolation:isolate}
.svn-stage::before{content:"";position:absolute;left:0;right:0;height:calc(var(--svn-menu-gap)/var(--svn-scale,1));top:calc(-1 * var(--svn-menu-gap)/var(--svn-scale,1));pointer-events:none}
.svn-stage.is-on{pointer-events:auto}
.svn-stage.is-on::before{pointer-events:auto}
.svn-panel{position:absolute;top:0;left:0;width:100%;opacity:0;visibility:hidden;transform:translateY(-5px) scale(.992);transform-origin:var(--svn-origin,180px) top;pointer-events:none;transition:opacity 130ms ease,transform 170ms var(--svn-ease),visibility 0s 170ms;filter:drop-shadow(0 14px 22px #27131c0c)}
.svn-panel.is-open{position:relative;opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity 150ms ease,transform 210ms var(--svn-ease),visibility 0s}
.svn-stage.is-switching .svn-panel{transition-duration:110ms,160ms,0s}
.svn-panel[inert]{pointer-events:none}
.svn-grid{display:grid;gap:8px;align-items:stretch}
.svn-product{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);max-width:1008px;align-items:stretch}
.svn-product-core{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:8px;padding:8px;background:#f5dce5;border:1px solid #eed0db;border-radius:20px}
.svn-feature{position:relative;overflow:hidden;min-height:302px;display:flex;flex-direction:column;padding:20px 20px 0;background:#fff;border-radius:12px;transition:background-color 160ms ease}
.svn-feature:hover{background:#fff9fb}
.svn-feature-title{font-size:25px;font-weight:450;letter-spacing:-.045em;line-height:1.1;display:block;padding-right:22px}
.svn-feature-copy{font-size:13px;line-height:1.45;display:block;max-width:29ch;color:#655861;margin-top:9px}
.svn-feature-image{position:relative;display:block;height:174px;margin:14px -20px 0;overflow:hidden;flex:1}
.svn-feature-image img{position:absolute;bottom:0;left:0;width:100%;height:100%;object-fit:contain;max-width:none;transform:scale(1.025);transform-origin:50% 65%;transition:transform 400ms var(--svn-ease)}
.svn-feature:hover .svn-feature-image img{transform:scale(1.065) translateY(-2px)}
.svn-arrow{font-family:Arial,sans-serif;line-height:1;display:inline-block;font-size:20px;font-weight:400;transition:transform 180ms var(--svn-ease);flex-shrink:0}
.svn-feature>.svn-arrow{position:absolute;right:20px;top:24px}
.svn :where(a):hover>.svn-arrow{transform:translateX(3px)}
.svn-product-verbs{display:flex;flex-direction:column;gap:8px;align-self:stretch}
.svn-verb{position:relative;display:flex;flex-direction:column;justify-content:flex-start;flex:1;padding:20px;border-radius:12px;background:#fbedf2;transition:background-color 160ms ease}
.svn-verb:hover{background:#fff6f9}
.svn-link-title{display:block;font-size:17px;font-weight:500;letter-spacing:-.025em;line-height:1.25}
.svn-link-copy{display:block;font-size:12.5px;line-height:1.5;color:var(--svn-muted);margin-top:5px;max-width:32ch}
.svn-verb .svn-link-copy{color:#655861}
.svn-tag{font-size:10px;color:#7d6570;font-weight:400;letter-spacing:0;margin-left:6px;vertical-align:2px;white-space:nowrap}
.svn-side{padding:8px;background:#f3f1f2;border:1px solid #e8e3e6;border-radius:20px}
.svn-side-link{display:grid;grid-template-columns:minmax(0,1fr) 20px;column-gap:14px;align-content:start;position:relative;padding:20px;border-radius:12px;transition:background-color 140ms ease}
.svn-side-link:hover{background:#fff}
.svn-side-link .svn-link-title{grid-column:1;padding-right:0;font-size:19px;font-weight:450}
.svn-side-link .svn-arrow{grid-column:2;grid-row:1;align-self:center;justify-self:end;font-size:18px}
.svn-side-link .svn-link-copy{grid-column:1;max-width:31ch}
.svn-side-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 20px 13px;border-top:1px solid #e4dfe2;margin-top:3px;font-size:12.5px;letter-spacing:-.015em}
.svn-side-foot:hover{color:var(--svn-focus)}
.svn-product .svn-side{display:flex;flex-direction:column}
.svn-product .svn-side-foot{margin-top:auto}
.svn-solutions{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);max-width:1008px}
.svn-role-group{display:flex;flex-direction:column;padding:20px 8px 8px;border-radius:20px;background:#f7e5ec;border:1px solid #f0d5e0}
.svn-group-label{font-size:12px;line-height:1.3;color:#70636a;padding:0 18px 17px;font-weight:450}
.svn-roles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.svn-role{padding:20px 18px;position:relative;min-height:164px;background:#fff9fb;border-radius:12px;display:flex;flex-direction:column;transition:background-color 160ms ease}
.svn-role:hover{background:#fff}
.svn-role .svn-link-title{font-weight:450;font-size:24px;letter-spacing:-.04em;max-width:10ch}
.svn-role:not(.svn-operations) .svn-link-title{min-height:2.5em}
.svn-role .svn-link-copy{margin-top:12px;max-width:24ch}
.svn-role .svn-tag{font-size:10px;margin:9px 0 0;display:block}
.svn-role .svn-arrow{margin-top:auto;align-self:flex-end;padding-top:14px}
.svn-operations{grid-column:1/-1;min-height:0;padding:17px 18px;display:grid;grid-template-columns:1fr auto;gap:0 20px;align-items:center}
.svn-operations .svn-link-title{font-size:18px;max-width:none}.svn-operations .svn-link-copy{max-width:none;margin-top:4px}.svn-operations .svn-arrow{grid-column:2;grid-row:1/3;margin:0;padding:0;align-self:center}.svn-operations .svn-tag{display:inline;margin-left:6px}
.svn-jobs{display:flex;flex-direction:column;padding:20px 8px 8px;background:#f3f1f2;border:1px solid #e8e3e6;border-radius:20px}
.svn-job{display:flex;align-items:center;justify-content:space-between;gap:14px;border-radius:10px;padding:14px 18px;transition:background-color 140ms ease;font-size:14px}
.svn-job:hover{background:#fff}.svn-job .svn-tag{font-size:10px}.svn-job>.svn-arrow{font-size:17px;color:#81757b}
.svn-all{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-top:1px solid #e4dfe2;margin:0;font-size:13px;font-weight:500}
.svn-role-group>.svn-all,.svn-jobs>.svn-all{margin-top:auto}
.svn-role-group>.svn-roles,.svn-job-list{margin-bottom:12px}
.svn-all:hover{color:var(--svn-focus)}
.svn-resources{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);max-width:865px}
.svn-library{background:#f6e2ea;border:1px solid #eecfdc;padding:24px;border-radius:20px;min-height:322px;display:flex;flex-direction:column;transition:background-color 160ms ease}
.svn-library:hover{background:#f9e8ef}
.svn-library .svn-feature-title{font-size:24px;padding:0}
.svn-library .svn-feature-copy{margin-top:8px;max-width:33ch}
.svn-rule{font-size:28px;line-height:1.2;font-weight:450;letter-spacing:-.045em;max-width:18ch;margin:27px 0 28px;display:block}
.svn-rule em{font-style:normal;color:#ad184d}
.svn-card-bottom{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;margin-top:auto;gap:18px}
.svn-resource-links{display:flex;flex-direction:column;padding:8px;background:#f3f1f2;border:1px solid #e8e3e6;border-radius:20px}
.svn-resource-links .svn-side-link{padding:16px}.svn-resource-links .svn-link-title{font-size:16px;font-weight:500}
.svn-resource-pair{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e4dfe2;margin:5px 12px 0;padding-top:6px}
.svn-resource-pair .svn-side-link{grid-template-columns:minmax(0,1fr);padding:14px 6px}.svn-resource-pair .svn-link-title{font-size:13px;font-weight:450}.svn-resource-pair .svn-tag{display:block;margin:5px 0 0;vertical-align:0}
.svn-company{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);max-width:660px}
.svn-founder{padding:24px;background:#f5f3f4;border:1px solid #e8e3e6;border-radius:20px;min-height:262px;display:flex;flex-direction:column;transition:background-color 160ms ease}
.svn-founder:hover{background:#f1ecef}.svn-founder .svn-feature-title{font-size:27px;max-width:12ch;padding:0;line-height:1.15}.svn-founder .svn-feature-copy{margin-top:16px;max-width:29ch}.svn-founder .svn-card-bottom{padding-top:25px}
.svn-company-links{display:flex;flex-direction:column;justify-content:space-between;border-radius:20px;background:#fff;border:1px solid #e8e3e6;padding:8px}
.svn-company-links .svn-job{padding:16px}
.svn-status{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 40px);width:max-content;border:1px solid var(--svn-line);border-radius:12px;background:#fff;padding:13px 20px;box-shadow:0 8px 30px #26141b14;font-size:13px;z-index:51}
/* Native dialog traps keyboard focus and makes the background inert. */
.svn-sheet{color:var(--svn-ink);background:#fff;border:0;margin:0;padding:0;width:100%;max-width:none;height:100dvh;max-height:none;overflow:hidden;overscroll-behavior:contain;opacity:0;transform:translateY(-7px);transition:opacity 150ms ease,transform 240ms var(--svn-ease)}
.svn-sheet::backdrop{background:#fff}
.svn-sheet.is-visible{opacity:1;transform:none}
.svn-sheet-layout{height:100%;display:flex;flex-direction:column}
.svn-sheet-top{display:flex;align-items:center;justify-content:space-between;padding:0 var(--svn-gutter);height:var(--svn-h);flex-shrink:0;border-bottom:1px solid var(--svn-line)}
.svn-close{width:44px;height:44px;position:relative;border-radius:50%!important}
.svn-close span{position:absolute;top:21px;left:12px;width:20px;height:1.5px;background:var(--svn-ink);transform:rotate(45deg)}
.svn-close span+span{transform:rotate(-45deg)}
.svn-sheet-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1;padding:12px var(--svn-gutter) 28px}
.svn-mobile-group{border-bottom:1px solid var(--svn-line)}
.svn-mobile-group summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:21px 0;font-size:26px;font-weight:450;letter-spacing:-.04em;line-height:1.2}
.svn-mobile-group summary::-webkit-details-marker{display:none}
.svn-mobile-group summary .svn-chevron{width:8px;height:8px;margin-right:8px}
.svn-mobile-group[open] summary .svn-chevron{transform:translateY(1px) rotate(225deg)}
.svn-mobile-content{padding-bottom:18px}
.svn-mobile-content .svn-grid{display:flex;flex-direction:column;gap:10px;max-width:none}
.svn-mobile-content .svn-grid>*{width:100%}
.svn-mobile-content .svn-product-core{grid-template-columns:1fr;padding:6px;gap:6px;border-radius:15px}
.svn-mobile-content .svn-feature{min-height:240px;padding-top:21px}
.svn-mobile-content .svn-feature-image{height:150px}
.svn-mobile-content .svn-product-verbs{gap:3px}
.svn-mobile-content .svn-verb{padding:16px 20px}.svn-mobile-content .svn-verb .svn-link-copy{max-width:none}
.svn-mobile-content :where(.svn-side,.svn-role-group,.svn-jobs,.svn-library,.svn-resource-links,.svn-founder,.svn-company-links){border-radius:15px}
.svn-mobile-content .svn-roles{gap:5px}.svn-mobile-content .svn-role{padding:18px 15px;min-height:168px}.svn-mobile-content .svn-role .svn-link-title{font-size:22px}.svn-mobile-content .svn-role .svn-link-copy{font-size:12px}.svn-mobile-content .svn-operations{min-height:0}
.svn-mobile-content .svn-group-label{padding-inline:15px}
.svn-mobile-content .svn-role-group>.svn-all{padding-inline:15px}
.svn-mobile-content .svn-jobs .svn-job,.svn-mobile-content .svn-jobs>.svn-all{padding-inline:15px}
.svn-mobile-content .svn-library{min-height:280px;padding:24px}.svn-mobile-content .svn-rule{font-size:27px}
.svn-mobile-link{display:flex;align-items:center;justify-content:space-between;min-height:74px;font-size:26px;letter-spacing:-.04em;border-bottom:1px solid var(--svn-line)}
.svn-mobile-link>.svn-arrow{font-size:23px;padding-right:5px}
.svn-sheet-account{padding:18px var(--svn-gutter) max(20px,env(safe-area-inset-bottom));border-top:1px solid var(--svn-line);background:#fff;flex-shrink:0;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px}
.svn-sheet-account .svn-cta{min-height:46px;justify-content:space-between;padding:0 21px;grid-column:1/-1;font-size:15px}.svn-sheet-account .svn-login{padding:0;font-size:13px}.svn-sheet-account p{font-size:12px;color:var(--svn-muted);text-align:right}
.svn-sheet-notice{padding:10px var(--svn-gutter);font-size:12px;color:#ad184d;background:#fff4f8}
.svn-trigger[data-active="true"]{color:var(--svn-focus)}
.svn[data-reduced-motion="true"]::after,.svn[data-reduced-motion="true"] *,.svn[data-reduced-motion="true"] *::before,.svn[data-reduced-motion="true"] *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
.svn[data-reduced-motion="true"] .svn-feature:hover .svn-feature-image img,.svn[data-reduced-motion="true"] :where(a):hover>.svn-arrow,.svn[data-reduced-motion="true"] .svn-cta:active{transform:none}
@media(min-width:1600px){.svn-stage{max-width:calc(1536px - var(--svn-gutter)*2)}}
@media(max-width:1100px){.svn-bar{gap:22px}.svn-desktop{gap:0}.svn-trigger{padding:0 10px}.svn-account{gap:18px}.svn-logo svg{width:124px}}
/* Laptop density: preserve the composition with a shorter bar and tighter cards. */
@media(min-width:981px) and (max-width:1599px){
  .svn{--svn-h:64px;--svn-pill-h:34px;--svn-stage-width:920px}
  .svn-bar{gap:clamp(24px,3vw,44px)}
  .svn-logo svg{width:124px}
  .svn-desktop{gap:2px}
  .svn-trigger{padding-inline:10px}
  .svn-account{gap:20px}
  .svn-account>.svn-cta{min-height:36px;padding-inline:21px}
  .svn-stage{width:min(920px,calc(100vw - var(--svn-gutter)*2))}
  .svn-product,.svn-solutions{max-width:920px}
  .svn-feature{min-height:252px;padding:16px 16px 0}
  .svn-feature-title{font-size:23px}
  .svn-feature-copy{font-size:12.5px;margin-top:8px;line-height:1.4}
  .svn-feature>.svn-arrow{right:16px;top:19px}
  .svn-feature-image{height:152px;margin:12px -16px 0}
  .svn-verb{padding:16px}
  .svn-link-copy{line-height:1.4;margin-top:4px}
  .svn-side-link{padding:16px}
  .svn-side-link .svn-link-title{font-size:18px}
  .svn-side-foot{padding:12px 16px}
  .svn-role-group,.svn-jobs{padding-top:16px}
  .svn-group-label{padding:0 16px 12px}
  .svn-role{padding:16px;min-height:150px}
  .svn-role .svn-link-title{font-size:22px}
  .svn-role .svn-link-copy{margin-top:8px}
  .svn-role .svn-arrow{padding-top:10px}
  .svn-operations{padding:12px 16px;min-height:0}
  .svn-operations .svn-link-title{font-size:17px}
  .svn-operations .svn-link-copy{margin-top:4px}
  .svn-operations .svn-arrow{padding:0}
  .svn-job{padding:11px 16px}
  .svn-all{padding:12px 16px}
  .svn-role-group>.svn-roles,.svn-job-list{margin-bottom:8px}
  .svn-resources{max-width:800px}
  .svn-library{padding:20px;min-height:280px}
  .svn-library .svn-feature-title{font-size:22px}
  .svn-rule{font-size:26px;margin-block:22px}
  .svn-resource-links .svn-side-link{padding:12px}
  .svn-resource-links .svn-link-title{font-size:15px}
  .svn-resource-pair .svn-side-link{padding:12px 2px}
  .svn-resource-pair .svn-link-title{font-size:13px}
  .svn-company{max-width:620px}
  .svn-founder{min-height:232px;padding:20px}
  .svn-founder .svn-feature-title{font-size:24px}
  .svn-founder .svn-feature-copy{margin-top:12px}
  .svn-founder .svn-card-bottom{padding-top:20px}
  .svn-company-links .svn-job{padding:12px}
}
/* Scale only the desktop dropdown. The header bar keeps its approved size. */
@media(min-width:981px){
  .svn-stage{
    --svn-scale:var(--svn-menu-scale,.875);
    zoom:var(--svn-scale);
    top:calc(((var(--svn-h) + var(--svn-pill-h))/2 + var(--svn-menu-gap)) / var(--svn-scale));
    left:var(--svn-anchor-left,max(calc(var(--svn-gutter) / var(--svn-scale)),calc(((100vw - 1536px) / 2 + var(--svn-gutter)) / var(--svn-scale))));
    width:min(var(--svn-stage-width,1056px),calc((100vw - 2 * var(--svn-gutter)) / var(--svn-scale)))
  }
}
@media(max-width:980px){.svn-desktop,.svn-account>.svn-login,.svn-stage{display:none}.svn-burger{display:flex}.svn-account{gap:10px}.svn-bar{gap:18px}.svn-account>.svn-cta{min-height:38px;padding:0 20px}}
@media(prefers-reduced-motion:reduce){.svn::after,.svn *,.svn *::before,.svn *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}.svn-feature:hover .svn-feature-image img{transform:none}.svn :where(a):hover>.svn-arrow{transform:none}.svn-cta:active{transform:none}}

/* Integration: shared header offsets, real prototype and compact destination groups. */
:root{--nav-h:72px}
@media(min-width:981px) and (max-width:1599px){:root{--nav-h:64px}}
header[data-chrome="nav"]{height:var(--nav-h)}
/* Footer keeps the original monochrome lockup. */
.nav-logo{display:inline-flex;align-items:center;height:32px;margin-right:30px;border-radius:6px;color:var(--ink)}
.nav-logo svg{height:22px;width:auto;aspect-ratio:122/24;fill:currentColor}
.svn-trigger[data-active="true"]{color:var(--svn-focus)}
.svn-feature-image{height:174px;margin:16px -8px 0;border:1px solid #e9e5e7;border-radius:8px;background:#fff;flex:none}
.svn-feature-image img{position:static;width:100%;height:100%;object-fit:cover;object-position:72% 0;transform:none}
.svn-feature:hover .svn-feature-image img{transform:none}
.svn-prototype-note{display:block;font-size:10px;line-height:1.5;color:var(--svn-muted);padding:8px 0 12px}
.svn-reference-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;border-top:1px solid #e4dfe2;padding:16px 12px 8px;margin-top:auto}
.svn-reference-links a{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;min-height:32px;padding:0 8px;border-radius:6px}
.svn-reference-links a:hover{color:var(--svn-focus)}
.svn-reference-links .svn-arrow{font-size:17px}
.svn-product>.svn-side{display:grid;grid-template-rows:repeat(3,1fr)}
.svn-product>.svn-side>.svn-side-link{align-content:start}
.svn-link-copy{font-size:13px}
.svn-resources-directory{grid-template-columns:minmax(0,.95fr) minmax(0,1.45fr);max-width:920px}
.svn-blog-theme{display:block;margin:30px 0 28px;font-size:28px;line-height:1.15;font-weight:450;letter-spacing:-.045em;color:#563344}
.svn-pending-label{display:block;margin-top:5px;font-size:10px;line-height:1.4;font-weight:400;letter-spacing:0;color:#7d6570}
.svn-card-bottom>.svn-pending-label{margin:0;font-size:12px}
.svn-directory{display:grid;grid-template-columns:1.1fr 1fr;align-content:start;gap:22px;padding:24px}
.svn-directory-heading{margin:0 0 17px;font-size:12px;line-height:1.4;font-weight:450;color:var(--svn-muted)}
.svn-directory-link{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:48px;padding:10px 0;border-radius:5px;font-size:16px;line-height:1.35;letter-spacing:-.02em;transition:color 140ms ease}
.svn-directory-link>.svn-arrow{font-size:16px;padding-top:2px;color:#81757b}
.svn-directory-link:hover{color:var(--svn-focus)}
.svn-company-directory{justify-content:flex-start;padding:24px}
.svn-company-directory .svn-directory-heading{margin-bottom:10px}
.svn-company-directory .svn-directory-link{padding-block:11px;min-height:58px}
.svn-solutions-hub{grid-template-columns:1.35fr 1fr}
.svn-role-hub{background:#f7e5ec;border-color:#f0d5e0}
.svn-role-hub .svn-feature-title{max-width:none}
.svn-role-names{font-size:20px;line-height:1.35;letter-spacing:-.025em;margin:24px 0}
.svn-solutions-hub .svn-jobs{display:flex;flex-direction:column;padding:8px}
.svn-solutions-hub .svn-jobs>.svn-side-link{flex:1;align-content:center}
.svn-solutions-hub .svn-jobs>.svn-all{margin-top:auto;padding-inline:16px}
.svn-company-links .svn-side-link{flex:1;align-content:center}
.svn-company-links .svn-link-title{font-size:18px}
.svn-company-links .svn-link-copy{font-size:13px}
.svn[data-keyboard="true"] .svn-panel{transition:none}
@media(max-width:980px){
  .svn-mobile-content .svn-feature{min-height:0;padding:16px 18px}
  .svn-mobile-content .svn-feature-title{font-size:21px}
  .svn-mobile-content .svn-feature-copy{font-size:13px}
  .svn-mobile-content .svn-feature-image,.svn-mobile-content .svn-prototype-note{display:none}
  .svn-mobile-content .svn-feature>.svn-arrow{top:20px}
  .svn-mobile-content .svn-verb{padding:13px 18px}
  .svn-mobile-content .svn-link-title{font-size:16px}
  .svn-mobile-content .svn-link-copy{font-size:13px;margin-top:3px}
  .svn-mobile-content .svn-side-link{padding:14px 16px}
  .svn-mobile-content .svn-reference-links{padding:8px 4px 2px}
  .svn-mobile-content .svn-reference-links a{min-height:42px;font-size:14px}
  .svn-mobile-content .svn-role-hub{min-height:0;padding:22px}
  .svn-mobile-content .svn-role-names{font-size:18px;margin:18px 0}
  .svn-mobile-content .svn-blog{min-height:230px;padding:22px}
  .svn-mobile-content .svn-blog-theme{font-size:27px;margin:24px 0}
  .svn-mobile-content .svn-directory{grid-template-columns:1fr;gap:24px;padding:22px}
  .svn-mobile-content .svn-directory-heading{margin-bottom:10px}
  .svn-mobile-content .svn-directory-link{min-height:44px;font-size:16px}
  .svn-mobile-content .svn-company-directory{padding:22px}
}

/* Approved Product drawer, 22 October 2026.
   8px frame/gaps, 16px insets and 4px title-to-copy spacing at .875 desktop scale.
   The static mirrored Velvet Drift artwork remains decorative. */
.svn :is(.svn-stage,.svn-sheet){
  --svn-p-4:calc(4px / var(--svn-scale,1));--svn-p-8:calc(8px / var(--svn-scale,1));
  --svn-p-12:calc(12px / var(--svn-scale,1));--svn-p-16:calc(16px / var(--svn-scale,1));
  --svn-p-20:calc(20px / var(--svn-scale,1));--svn-p-24:calc(24px / var(--svn-scale,1));
  --svn-p-28:calc(28px / var(--svn-scale,1));--svn-p-32:calc(32px / var(--svn-scale,1));
  --svn-p-frame:#754258;--svn-p-primary:#48233c;--svn-p-primary-hover:#572d46;
  --svn-p-title:#fff8f5;--svn-p-copy:#e0c6d3;--svn-p-arrow:#f8c9d9;
  --svn-p-support:#f3e8ec;--svn-p-support-hover:#fbf5f7;
  --svn-p-ink:#3b2031;--svn-p-muted:#715461;--svn-p-line:#e0cdd5;--svn-p-focus:#b51149;
}
.svn .svn-product{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--svn-p-8)}
.svn .svn-product-core{
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--svn-p-8);padding:var(--svn-p-8);
  background:var(--svn-p-frame);border:0;border-radius:var(--svn-p-20);
}
.svn .svn-product :is(.svn-feature,.svn-verb){
  background:var(--svn-p-primary);background-image:none;color:var(--svn-p-title);
  border:0;border-radius:var(--svn-p-12);box-shadow:none;
  transition:background-color 160ms ease;
}
.svn .svn-product .svn-feature{
  min-height:calc(288px / var(--svn-scale,1));padding:var(--svn-p-16);
  position:relative;isolation:isolate;
}
.svn .svn-product .svn-feature-title{
  font-size:var(--svn-p-24);line-height:var(--svn-p-28);font-weight:450;
  letter-spacing:-.04em;padding:0;position:relative;z-index:1;
}
.svn .svn-product :is(.svn-feature-copy,.svn-link-copy){
  font-size:calc(13px / var(--svn-scale,1));line-height:var(--svn-p-20);
  color:var(--svn-p-copy);margin-top:var(--svn-p-4);max-width:29ch;
}
.svn .svn-product .svn-feature-copy{position:relative;z-index:1;max-width:24ch}
.svn .svn-product .svn-feature-image{
  position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;border-radius:0;
  background:none;pointer-events:none;z-index:0;overflow:hidden;
}
.svn .svn-product .svn-feature-image img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom;
  /* Screen-space mirror; the offset keeps the wave anchored to the right. */
  transition:none;transform:scaleX(-1);rotate:-45deg;scale:1.5;translate:-4% var(--svn-p-32);transform-origin:50% 50%;
}
.svn .svn-product .svn-feature>.svn-arrow{
  top:auto;right:var(--svn-p-16);bottom:var(--svn-p-16);z-index:1;
  color:var(--svn-p-title);
}
.svn .svn-product-verbs{gap:var(--svn-p-8)}
.svn .svn-product .svn-verb{padding:var(--svn-p-16);justify-content:flex-start}
.svn .svn-product .svn-verb .svn-link-title{
  font-size:calc(14px / var(--svn-scale,1));line-height:var(--svn-p-20);font-weight:500;letter-spacing:-.025em;
}
.svn .svn-product>.svn-side{
  background:var(--svn-p-support);border:1px solid var(--svn-p-line);border-radius:var(--svn-p-20);
  padding:var(--svn-p-8);display:grid;grid-template-rows:none;grid-auto-rows:auto;
  align-content:start;align-self:start;
}
.svn .svn-product .svn-side-link{
  padding:var(--svn-p-12) var(--svn-p-16);column-gap:var(--svn-p-16);align-content:start;
  color:var(--svn-p-ink);background:transparent;border-radius:var(--svn-p-12);box-shadow:none;
  transition:background-color 160ms ease;
}
.svn .svn-product .svn-side-link .svn-link-title{
  font-size:calc(16px / var(--svn-scale,1));line-height:var(--svn-p-20);font-weight:450;letter-spacing:-.025em;
}
.svn .svn-product .svn-side-link .svn-link-copy{color:var(--svn-p-muted);margin-top:var(--svn-p-4)}
.svn .svn-product .svn-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:var(--svn-p-16);height:var(--svn-p-16);flex-shrink:0;font-size:0;line-height:0;
}
.svn .svn-product .svn-pika-icon{display:block;width:100%;height:100%;pointer-events:none}
.svn .svn-product .svn-arrow{
  color:var(--svn-p-ink);transition:transform 160ms var(--svn-ease),color 160ms ease;
}
@media(hover:hover) and (pointer:fine){
  .svn .svn-product :is(.svn-feature,.svn-verb):hover{background:var(--svn-p-primary-hover);color:var(--svn-p-title);box-shadow:none}
  .svn .svn-product :is(.svn-feature,.svn-verb):hover :is(.svn-feature-copy,.svn-link-copy){color:var(--svn-p-copy)}
  .svn .svn-product .svn-side-link:hover{background:var(--svn-p-support-hover);color:var(--svn-p-ink);box-shadow:none}
  .svn .svn-product .svn-side-link:hover .svn-link-copy{color:var(--svn-p-muted)}
  .svn .svn-product .svn-side-link:hover .svn-arrow{color:var(--svn-p-focus);transform:translateX(var(--svn-p-4))}
  .svn .svn-product .svn-feature:hover>.svn-arrow{color:var(--svn-p-title);transform:translateX(var(--svn-p-4))}
}
.svn .svn-product a:is(.svn-feature,.svn-verb):focus-visible{
  background:var(--svn-p-primary-hover);color:var(--svn-p-title);box-shadow:none;
  outline:2px solid var(--svn-p-arrow);outline-offset:-4px;transition:none;
}
.svn .svn-product a:is(.svn-feature,.svn-verb):focus-visible :is(.svn-feature-copy,.svn-link-copy){color:var(--svn-p-copy)}
.svn .svn-product a.svn-feature:focus-visible{outline:0;box-shadow:none}
.svn .svn-product a.svn-feature:focus-visible .svn-feature-title{
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:var(--svn-p-4);
}
.svn .svn-product a.svn-side-link:focus-visible{
  background:var(--svn-p-support-hover);color:var(--svn-p-ink);box-shadow:none;
  outline:2px solid var(--svn-p-focus);outline-offset:-2px;transition:none;
}
.svn .svn-product a.svn-side-link:focus-visible .svn-link-copy{color:var(--svn-p-muted)}
.svn .svn-product a:focus-visible .svn-arrow{color:var(--svn-p-focus);transform:none;transition:none}
.svn .svn-product a.svn-feature:focus-visible>.svn-arrow{color:var(--svn-p-title)}
.svn .svn-product a:is(.svn-feature,.svn-verb):active{background:#36182b;color:var(--svn-p-title)}
.svn .svn-product a:is(.svn-feature,.svn-verb):active :is(.svn-feature-copy,.svn-link-copy){color:var(--svn-p-copy)}
.svn .svn-product a.svn-side-link:active{background:#e8d7df;color:var(--svn-p-ink)}
.svn .svn-product a.svn-side-link:active .svn-link-copy{color:var(--svn-p-muted)}
.svn .svn-product a.svn-feature:active>.svn-arrow{color:var(--svn-p-title)}
@media(max-width:980px){
  .svn .svn-mobile-content .svn-product{display:flex;gap:var(--svn-p-8)}
  .svn .svn-mobile-content .svn-product-core{padding:var(--svn-p-8);gap:var(--svn-p-8);grid-template-columns:1fr}
  .svn .svn-mobile-content .svn-feature{min-height:220px;padding:var(--svn-p-16)}
  .svn .svn-mobile-content .svn-feature-image{display:block}
  .svn .svn-mobile-content .svn-feature-image img{object-fit:contain;object-position:center bottom;translate:-4% 56px}
  .svn .svn-mobile-content .svn-product-verbs{gap:var(--svn-p-8)}
  .svn .svn-mobile-content .svn-verb{padding:var(--svn-p-16);min-height:88px}
  .svn .svn-mobile-content .svn-verb .svn-link-title{font-size:16px}
  .svn .svn-mobile-content .svn-side-link{padding:var(--svn-p-12) var(--svn-p-16)}
}
.svn[data-keyboard="true"] .svn-product :is(a,.svn-arrow){transition:none}
.svn[data-reduced-motion="true"] .svn-product .svn-arrow{transform:none!important}

.svn[data-reduced-motion="true"] .svn-product .svn-feature:hover .svn-feature-image img{transform:scaleX(-1)}

/* =====================================================================================
   FOOTER (injected by site.js into <footer data-chrome="footer">)
   ===================================================================================== */
footer[data-chrome="footer"]{display:block;background:#fff}
.foot{padding-top:clamp(24px,3vw,40px);padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))}
/* Ask your AI about Souvenir (AEO) */
.askai{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 56px;align-items:center;
  background:var(--soft);border-radius:var(--r-frame);padding:clamp(24px,3.6vw,48px)}
.askai::before{content:"";position:absolute;z-index:-1;left:-12%;top:-60%;width:60%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(255,211,224,.55),transparent)}
.askai-h{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.askai-h .h3{font-size:22px}
.askai-q{position:relative;font:400 clamp(18px,1.6vw,21px)/1.45 var(--display);letter-spacing:-.008em;color:var(--ink);max-width:34em;text-wrap:pretty;text-indent:-.42em}
.askai-q::before{content:"\201C";color:var(--pink)}
.askai-q::after{content:"\201D";color:var(--pink)}
.askai-r{display:flex;flex-direction:column;gap:12px}
.ai-btns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ai-b{display:inline-flex;align-items:center;justify-content:space-between;gap:8px;height:46px;padding:0 14px 0 16px;border-radius:var(--r-pill);background:#fff;font:500 14px/1 var(--text);color:var(--ink);
  box-shadow:0 0 0 1px var(--line), 0 1px 2px rgba(30,28,31,.04);transition:transform .18s var(--ease),box-shadow .18s;white-space:nowrap}
.ai-b svg{width:14px;height:14px;color:var(--quiet);flex:none;transition:transform .2s var(--ease),color .2s}
.ai-b:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--line-2), 0 6px 14px -8px rgba(30,28,31,.25)}
.ai-b:hover svg{transform:translate(1px,-1px);color:var(--pink)}
.ai-b:focus-visible{border-radius:var(--r-pill)}
.ai-copy{justify-content:center;gap:8px;background:var(--ink);color:#fff;box-shadow:var(--sh-btn)}
.ai-copy:hover{background:#2C292D;box-shadow:var(--sh-btn)}
.ai-copy svg,.ai-copy:hover svg{color:#fff;transform:none}
.ai-copy .cq-t,.ai-copy .cq-b{display:none}
.ai-copy.is-done .cq-i,.ai-copy.is-done .cq-a{display:none}
.ai-copy.is-done .cq-t,.ai-copy.is-done .cq-b{display:inline}
.ai-copy .cq-t{width:10px;height:10px}
.ai-copy.is-done{color:var(--mint)}
.ai-copy.is-done .cq-t{fill:var(--mint)}
.ai-note{font-size:12.5px;color:var(--quiet-text)}
/* sitemap */
.fcols{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:32px;padding-top:clamp(56px,6vw,80px)}
.fc{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.fc-h{font:500 13px/1 var(--text);color:var(--quiet-text);margin-bottom:12px}
.fc a:not(.btn):not(.nav-logo){display:block;padding:5px 0;font-size:14px;line-height:1.45;color:var(--ink-2);border-radius:4px;transition:color .15s}
.fc a .soon{vertical-align:1px}
.fc a:not(.btn):not(.nav-logo):hover{color:var(--pink-ink)}
.fc-brand{gap:16px}
.fc-brand .nav-logo{margin:0}
.fc-brand p{font-size:14px;color:var(--muted);max-width:26ch;line-height:1.5}
/* the quiet wordmark moment */
.bigword{margin-top:clamp(56px,7vw,96px);color:#F4F0F1;pointer-events:none;user-select:none}
.bigword svg{width:100%;height:auto;aspect-ratio:122/24;fill:currentColor}
.fsmall{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.fsmall a{border-radius:4px}
.fsmall a:hover{color:var(--ink)}
.fsmall-r{margin-left:auto;color:var(--quiet-text)}
.fsmall button{font-size:13px;color:var(--muted);display:inline-flex;align-items:center;gap:6px;border-radius:4px}
.fsmall button:hover{color:var(--ink)}
.fsmall button svg{width:12px;height:12px;fill:currentColor}

/* =====================================================================================
   OPENER (E2 · cinematic, no flare). Home only; built and driven by SV.opener() in site.js.
   ===================================================================================== */
.sv-veil{position:fixed;inset:0;z-index:90;pointer-events:none;overflow:hidden}
.sv-veil .vl{position:absolute;pointer-events:none}
.v-sky{inset:-4%;will-change:transform;background:radial-gradient(78% 76% at 50% 50%, #F92064 0%, #DC1352 32%, #95093A 64%, #3E051B 87%, #1E020C 100%)}
.v-key{left:50%;top:50%;width:76vw;height:96vh;transform:translate(-50%,-50%);mix-blend-mode:screen;will-change:transform,opacity;
  background:radial-gradient(closest-side, rgba(255,226,236,.78), rgba(255,122,162,.3) 42%, rgba(255,80,130,0) 100%)}
.v-glint{left:50%;top:50%;width:min(16vw,110px);aspect-ratio:1;transform:translate(-50%,-50%);mix-blend-mode:screen;
  background:radial-gradient(closest-side, rgba(255,255,255,.95), rgba(255,180,210,.35) 40%, rgba(255,255,255,0) 100%)}
.v-vig{inset:0;box-shadow:inset 0 0 24vmin 6vmin rgba(16,0,6,.55)}
/* the lift: the vignette's dark edges go to a lit rose first, so the dissolve to petal never passes through mauve-grey */
.v-rose{inset:0;background:radial-gradient(95% 85% at 50% 42%, #FF6E9A 0%, #FB3F78 58%, #F52E6C 100%)}
.v-petal{inset:0;background:radial-gradient(90% 80% at 50% 0%, #FFE3EC 0%, #FDEFF3 55%, #F8F2F3 100%)}
.v-soft{inset:0;background:var(--soft)}
.v-grain{inset:-40px;opacity:.18;mix-blend-mode:overlay;will-change:transform;background-image:var(--grain)}
.sv-mark{position:fixed;left:50%;top:50%;width:min(72vw,520px);pointer-events:none;z-index:91}
.sv-veil .sv-mark{position:absolute}
.sv-mark svg{display:block;width:100%;height:auto;overflow:visible}
.sv-mark--w{color:#fff}
.sv-mark--b{color:var(--ink);z-index:89}
.sv-skip{position:fixed;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:92;
  height:34px;padding:0 14px;border-radius:var(--r-pill);background:rgba(255,255,255,.16);color:#fff;font:500 13px/1 var(--text);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.sv-skip:hover{background:rgba(255,255,255,.24)}
/* before JS takes over: the field is already there, so the page never flashes */
html.sv-pre::after{content:"";position:fixed;inset:0;z-index:95;background:radial-gradient(78% 76% at 50% 50%, #F92064 0%, #DC1352 32%, #95093A 64%, #3E051B 87%, #1E020C 100%)}
html.sv-opening{overflow:hidden}
html.sv-opening [data-open-hide]{opacity:0}

/* =====================================================================================
   RESPONSIVE
   ===================================================================================== */
@media (max-width:1180px){
  .nl{padding:0 10px}
  .nav-logo{margin-right:18px}
  .mm-grid{grid-template-columns:270px minmax(0,1fr)}
  .mm-tx > span{font-size:12.5px}
  .mm-sub .mm-tx b{font-size:14px}
}
/* the Ask-your-AI buttons: two per row while the block is still split in half */
@media (min-width:961px) and (max-width:1180px){
  .ai-btns{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .nav-links,.nav-login{display:none}
  .burger{display:block}
  .mm,.mm-scrim{display:none}
}
@media (max-width:960px){
  .hero-split{grid-template-columns:1fr;gap:16px}
  .hero-split-copy{padding-block:0}
  .cta-in{grid-template-columns:1fr}
  /* the art keeps a safe inset from the band's edge (the right-hand token clears it by about the text's own gutter) */
  .cta-art{position:absolute;right:max(38px, calc(var(--gut) + 8px));bottom:-30px;width:200px;height:170px;opacity:.95}
  .sec-head--split{grid-template-columns:1fr;gap:18px}
  .bento > [class*="span-"]{grid-column:span 12!important}
  .bento > .keep-half{grid-column:span 6!important}
  .askai{grid-template-columns:1fr}
  .fcols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
  .fc-brand{grid-column:1 / -1}
}
/* a narrow tablet: the art steps down a size, toward its corner, so it clears the headline's last word as well as the edge */
@media (min-width:641px) and (max-width:760px){
  .cta-art{transform:scale(.88);transform-origin:100% 100%}
}
@media (max-width:640px){
  :root{--fs-h2:32px;--r-band:28px}
  /* the hero on a phone: one H1 fit formula (a page may override it only for a line that must fit, like Home's inline mark).
     9.2 em to the measure holds an 18-character line ("Change the number.") on one line from 320px up. */
  .h1{font-size:min(42px, calc((100vw - 32px) / 9.2));line-height:1.06;letter-spacing:-.034em}
  .sec--first .kicker + .h1{margin-top:18px}
  .h1 + .lead{margin-top:18px}
  .hero-ctas{flex-wrap:nowrap;gap:8px;margin-top:28px}
  .hero-ctas .btn{--h:48px;padding:0 18px;font-size:15px}
  .tbc-strip{align-items:flex-start;margin-top:28px}
  /* a TBC card: the chip stands above its note, so the note keeps the card's full measure */
  .tbc-card{flex-direction:column;gap:10px}
  .tbc-card .tbc-chip{margin-top:0}
  .cta-band{padding-block:52px 28px}
  .cta-h{font-size:min(36px, calc((100vw - 32px) / 9.4))}
  .cta-art{position:relative;right:auto;bottom:auto;margin:20px 10px 0 auto;width:170px;height:132px}
  .ca-stack{width:104px;left:12px}.ca-t1{width:60px}.ca-t2{width:46px;left:42px;top:28px}
  .ca-fig{width:76px;left:40px;bottom:8px}.cta-art--fig .ca-t1{width:52px}.cta-art--fig .ca-t2{width:40px;left:4px;top:auto}
  /* touch targets: the footer's links and small print reach 40px without moving */
  .fc a:not(.btn):not(.nav-logo){padding:9px 0}
  .fsmall a,.fsmall button{padding-block:10px;margin-block:-10px}
  .copy-b{--h:40px}
  /* 38px chips keep their size; their hit area grows to 42 */
  .trio-b::after,.seg-b::after{content:"";position:absolute;inset:-2px}
  /* compact copy buttons show the glyph only on a phone (the spark when copied); the words stay for screen readers */
  .copy-b--compact{min-width:44px;padding:0 12px}
  .copy-b--compact .copy-b-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .pill{font-size:13px;height:32px;padding:0 13px 0 5px;gap:7px;max-width:100%}
  .ptools i{width:20px;height:20px;margin-left:-6px}
  .ptools svg{width:11px;height:11px}
  .trio-b{height:38px;padding:0 12px;font-size:15px}
  .body{font-size:var(--fs-body)}
  .card{padding:22px}
  .card--well{padding:8px}
  .slot{--r-frame:22px;padding:6px}
  .slot-in{border-radius:16px;padding:16px}
  .slot-note{display:none}
  .slot-lab{font-size:12.5px;height:30px}
  .slot-bar{height:34px}
  .slot--chrome .slot-in{padding-top:50px}
  .bento{gap:12px}
  .bento > .keep-half{grid-column:span 12!important}
  .seg{width:100%}
  .seg-b{flex:1;padding:0 10px}
  .seg-prog{left:14px;right:14px}
  .acc-b{padding-right:8px}
  /* two per row; Grok shares the last row with Copy, which takes the width its label needs */
  .ai-btns{display:flex;flex-wrap:wrap}
  .ai-b{flex:1 1 calc(50% - 4px);min-width:0;padding:0 12px 0 14px}
  .ai-btns > :nth-child(5){flex-basis:84px}
  .ai-copy{flex:1 0 auto;padding:0 16px}
  .fsmall-r{margin-left:0;width:100%}
  .tape{--tape-top:104px;--pin:84px}
  .tape-lab{font-size:11px}
  .tape-lab b{font-size:15px}
  .tape-now .tape-candle{width:38px;left:-19px}
  .tape-now .tape-lab{right:26px}
  .tape-stock .tape-box{width:30px;left:-15px}
  .tape-stock .tape-lab{left:-24px;bottom:34px;align-items:flex-start;text-align:left}
  .tape-stock .tape-lab b,.tape-now .tape-lab b{font-size:14px}
  .tape-n.is-odd{display:none}
  .tape-under{height:84px}
  /* the thinking strip becomes a list */
  .think-row{grid-template-columns:68px minmax(0,1fr)}
  .think-v{flex-direction:column;align-items:flex-start;gap:3px}
  .think-v.sum{flex-direction:row}
  .think-v .grp{flex-direction:column;gap:3px;width:100%;margin-left:0;clip-path:none}
  .think-v .w{align-items:flex-start;padding-left:13px}
  .think-v .w::before{left:0;top:calc(.75em - 2px);width:4px;height:4px;opacity:.7}
  .tape-flag{font-size:11px;height:22px;padding:0 9px 0 14px;bottom:calc(var(--pin) - 26px)}
  .tape-gaplab{flex-direction:column;gap:4px;font-size:12px}
}
/* a long slot label wraps on the smallest phones instead of trailing off */
@media (max-width:400px){
  .slot-lab{white-space:normal;height:auto;min-height:30px;padding-block:7px;line-height:1.3;border-radius:16px;text-align:left;text-wrap:balance}
}
@media (max-width:380px){
  .hero-ctas .btn{padding:0 14px;font-size:14px}
  .trio-b{padding:0 10px;font-size:14.5px}
  .ai-b{font-size:13.5px;padding:0 10px 0 12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}