/* Encore marketing site, round 3: the shared system (shell + components), extracted from J · Product stage.
   Every page links this file. Page-specific styles live in their own files (assets/home.css, product.css, pages.css).
   Reference: ../SHELL.md */
/* Encore brand tokens for the homepage explorations. Link from a direction as ../kit/tokens.css */
@font-face { font-family: "Hedvig Letters Serif"; src: url("/fonts/HedvigLettersSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("/fonts/PPNeueMontreal-Book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("/fonts/PPNeueMontreal-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "PP Neue Montreal"; src: url("/fonts/PPNeueMontreal-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --serif: "Hedvig Letters Serif", Georgia, serif;
  --sans: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif;
  --cream: #F6F3EE;  --white: #FFFFFF;
  --plum: #3A1E3C;   --plum-2: #4B3363; --plum-3: #5A3E5C; --ink: #1E1A24;
  --mute: #6E5A70;   /* secondary text on cream; passes contrast */
  --lav-1: #DBD6E9; --lav-2: #C8C2F0; --lav-3: #B3AAEC; --lav-4: #A197E1; --lav-5: #8F83D6; --lav-6: #7D70CB; --lav-7: #6C5CB2; --lav-8: #5B478B;
  --pink: #EDC9D8; --pink-2: #E6B8CD; --peach: #F7D6B8; --peach-2: #FFC9AE; --peach-3: #F7C3A8; --coral: #FF8A5B;
  --sky: #CFE2F6; --sky-2: #B9D3EE; --mint: #D7E7D6; --mint-2: #B8D6BC;
  /* The deck's washes: always vertical, light at the bottom */
  --wash-lavender: linear-gradient(180deg, #B4AAEA 0%, #C8C2F0 35%, #CFE2F6 100%);
  --wash-lavender-sky: linear-gradient(180deg, #B4AAEA 0%, #C8C2F0 40%, #C2D4F2 100%);
  --wash-sky-mint: linear-gradient(180deg, #B9D3EE 0%, #CFE2F6 40%, #D7E7D6 80%, #E6F0E4 100%);
  --wash-pink-peach: linear-gradient(180deg, #E6B8CD 0%, #EDC9D8 40%, #F7D6B8 85%, #FBE6D6 100%);
  --wash-dusk: linear-gradient(180deg, #C3BBEE 0%, #DCC6E6 30%, #EDC9D8 55%, #F7C3A8 80%, #FBDCC8 100%);
  --wash-lavender-pale: linear-gradient(180deg, #B4AAEA 0%, #C8C2F0 40%, #DCE6F8 85%, #EAEFFA 100%);
}


/* ============================== Tokens ============================== */
:root {
  /* The fluid unit: 1vw, but it stops growing at 1600px wide (Josh's monitors, 2026-10-24). */
  --vw: min(1vw, 16px);
  /* The held column: 1200px at 1440, grows with --vw to 1333px at 1600, then holds. */
  --col: max(1200px, calc(var(--vw) * 83.334));
  --gut: 24px;            /* outer gutter each side below the column width */
  --gap: 24px;            /* 12-col grid gap */

  /* Type scale (fluid, capped by --vw) */
  --fs-display: max(42px, calc(var(--vw) * 5.834)); /* 84px at 1440 */
  --fs-h2: max(34px, calc(var(--vw) * 3.612));      /* 52px at 1440 */
  --fs-h3: max(24px, calc(var(--vw) * 2.084));      /* 30px at 1440 */
  --fs-lede: max(17px, calc(var(--vw) * 1.389));    /* 20px at 1440 */
  --fs-body: max(17px, calc(var(--vw) * 1.25));     /* 18px at 1440 */
  --fs-small: 15px;

  /* Section rhythm */
  --sec: max(120px, calc(var(--vw) * 13.889));      /* 200px at 1440 */
  --sec-head: max(40px, calc(var(--vw) * 4.445));   /* 64px at 1440 */

  /* Lines, grounds, motion */
  --hair: rgba(58, 30, 60, .12);
  --hair-strong: rgba(58, 30, 60, .20);
  --hair-cream: rgba(246, 243, 238, .18);
  --mute: #6E5A70;
  --screen: linear-gradient(180deg, #F3F0FA 0%, #FAF9FD 42%, #FFFFFF 100%);
  --wash-peach: linear-gradient(180deg, #F7C3A8 0%, #F7D6B8 45%, #FBE6D6 100%);
  --wash-mint: linear-gradient(180deg, #B8D6BC 0%, #D7E7D6 45%, #EDF4EC 100%);
  --wash-sky: linear-gradient(180deg, #B9D3EE 0%, #CFE2F6 45%, #EAF1FA 100%);
  --wash-peach-deep: linear-gradient(180deg, #F4BB9D 0%, #F6CCAF 42%, #F5D6C0 100%);
  --tile-plum: #3A1E3C; --tile-pink: #EDC9D8; --tile-lav: #A99FE0; --tile-peach: #F7D6B8;
  --ease-out: cubic-bezier(.22, .7, .2, 1);
  --nav-h: 80px;

  /* Grounds (R4, 26 Oct 2026). Josh: the old cream "looks muddy". The page ground is white, like the app itself.
     --cream stays the colour of type and buttons on plum; it is never a page ground any more. */
  --ground: #FFFFFF;
  --plane: #F6F4FA;          /* a quiet lilac-white plane for a band or a card that needs to sit off the ground */
  --plane-2: #EFECF6;        /* one step deeper, for a plane on a plane */
}
@media (max-width: 600px) { :root { --nav-h: 64px; --gut: 16px; } }

/* ============================== Base ============================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--plum);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
/* R6: headings never fall back to the browser's bold; the serif is designed at 400 (Josh, 27 Oct: "font seems way too thick"). Zero specificity, so any explicit weight still wins. */
:where(h1, h2, h3, h4, h5, h6) { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--lav-6); outline-offset: 3px; border-radius: 6px; }
.skip {
  position: fixed; top: 0; left: 16px; z-index: 100; padding: 12px 18px; border-radius: 0 0 12px 12px;
  background: var(--plum); color: var(--cream); font-size: 16px; text-decoration: none; transform: translateY(-110%);
}
.skip:focus-visible { transform: none; outline-color: var(--cream); }

/* ============================== Layout ============================== */
/* .wrap holds content to the column; grounds and strips may run edge to edge outside it. */
.wrap { width: min(calc(100% - var(--gut) * 2), var(--col)); margin-inline: auto; }
.wrap--narrow { width: min(calc(100% - var(--gut) * 2), calc(var(--col) * .667)); margin-inline: auto; }
/* 12-col grid inside the column. Place children with .c-<start>-<end> (grid lines 1..13). */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.c-1-13 { grid-column: 1 / 13; } .c-1-7 { grid-column: 1 / 7; } .c-7-13 { grid-column: 7 / 13; }
.c-1-6 { grid-column: 1 / 6; } .c-1-5 { grid-column: 1 / 5; } .c-1-8 { grid-column: 1 / 8; } .c-1-9 { grid-column: 1 / 9; }
.c-2-12 { grid-column: 2 / 12; } .c-3-11 { grid-column: 3 / 11; } .c-4-10 { grid-column: 4 / 10; }
.c-5-13 { grid-column: 5 / 13; } .c-6-13 { grid-column: 6 / 13; } .c-8-13 { grid-column: 8 / 13; } .c-9-13 { grid-column: 9 / 13; }
.c-2-7 { grid-column: 2 / 7; } .c-8-12 { grid-column: 8 / 12; } .c-6-12 { grid-column: 6 / 12; }
.sec { padding-top: var(--sec); }
.sec-head { margin-bottom: var(--sec-head); }
.sec-head .h2 + .body, .sec-head .h2 + .lede { margin-top: 20px; }
.sec-head.center { text-align: center; max-width: calc(var(--col) * .6); margin-inline: auto; }
.sec-head.left { max-width: calc(var(--col) * .54); }

/* ============================== Type ============================== */
.h1 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.022em; text-wrap: balance; }
.h2 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.018em; text-wrap: balance; }
.h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-h3); line-height: 1.12; letter-spacing: -.01em; text-wrap: balance; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--plum); text-wrap: pretty; }
.body { font-size: var(--fs-body); line-height: 1.6; color: var(--mute); text-wrap: pretty; }
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--mute); }
.on-plum .body, .on-plum .small { color: rgba(246, 243, 238, .82); }
.on-plum .h1, .on-plum .h2, .on-plum .h3, .on-plum .lede { color: var(--cream); }

/* ============================== Buttons and links ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--plum); color: var(--cream);
  font: 500 17px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease-out), transform .2s var(--ease-out), color .25s;
}
.btn:hover { background: #4E2C51; }
.btn:active { background: #2C1530; transform: translateY(1px); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn--lg { height: 60px; padding: 0 34px; font-size: 18px; }
.btn--light { background: var(--cream); color: var(--plum); }
.btn--light:hover { background: #FFFFFF; }
.btn--light:active { background: #EDE6DC; }
.btn--light:focus-visible { outline-color: var(--cream); }
.btn--line { background: transparent; color: var(--plum); box-shadow: inset 0 0 0 1px var(--hair-strong); }
.btn--line:hover { background: rgba(58, 30, 60, .05); }
.qlink {
  display: inline-flex; align-items: center; gap: 8px; padding: 14px 6px;
  font: 500 17px/1 var(--sans); color: var(--plum); text-decoration: none; cursor: pointer; background: none; border: 0;
}
.qlink span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 3px; transition: background-size .3s var(--ease-out); }
.qlink:hover span { background-size: 100% 1px; }
.qlink:active { opacity: .8; }
.qlink svg { width: 14px; height: 14px; flex: none; transition: transform .3s var(--ease-out); }
.qlink:hover svg.down { transform: translateY(2px); }
.qlink:hover svg.right { transform: translateX(2px); }
.on-plum .qlink { color: var(--cream); }
.on-plum .qlink:focus-visible { outline-color: var(--cream); }

/* ============================== Nav ============================== */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(255, 255, 255, 0); box-shadow: inset 0 -1px 0 rgba(58, 30, 60, 0);
  transition: background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .36s var(--ease-out);
}
/* Scrolling down slides it away, scrolling up brings it back (site.js). Transform only: no layout shift.
   Never hidden while a dropdown or the phone menu is open. Reduced motion: the swap is instant (rule at the end). */
.nav.is-hidden:not(.dd-open):not(.drawer-open) { transform: translateY(-100%); }
.nav.is-scrolled, .nav.dd-open {
  background: rgba(255, 255, 255, .94); box-shadow: inset 0 -1px 0 var(--hair);
}
.nav.is-scrolled { -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px); }
.nav-in { position: relative; height: var(--nav-h); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.logo { justify-self: start; padding: 6px 0; font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: -.01em; text-decoration: none; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-link, .nav-trig, .nav-sign {
  display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; border: 0; border-radius: 999px; background: none;
  font-size: 16px; line-height: 1; text-decoration: none; cursor: pointer; transition: background-color .25s var(--ease-out);
}
.nav-link:hover, .nav-trig:hover, .nav-sign:hover, .nav-trig[aria-expanded="true"] { background: rgba(58, 30, 60, .06); }
.nav-link:active, .nav-trig:active, .nav-sign:active { background: rgba(58, 30, 60, .1); }
.nav-trig svg { width: 12px; height: 12px; transition: transform .3s var(--ease-out); }
.nav-trig[aria-expanded="true"] svg { transform: rotate(180deg); }
/* The current page: a quiet underline on the item (or the dropdown holding it). */
.nav-link[aria-current="page"], .nav-item:has([aria-current="page"]) > .nav-trig { box-shadow: inset 0 -2px 0 -0px transparent; }
.nav-link[aria-current="page"] span, .nav-item:has([aria-current="page"]) > .nav-trig span { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px; }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 8px; }
.nav-menu { display: none; }

/* Dropdown panels: hairline card, no shadow, under the nav. */
.nav-item { position: static; }
.dd {
  position: absolute; top: calc(100% - 8px); left: 50%; z-index: 51;
  width: min(calc(100vw - var(--gut) * 2), 880px); translate: -50% 0;
  background: #FFFFFF; border: 1px solid var(--hair); border-radius: 22px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease-out), transform .26s var(--ease-out), visibility 0s .26s;
}
.dd.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .22s var(--ease-out), transform .3s var(--ease-out), visibility 0s; }
/* A closed panel (and everything in it, whatever a child sets) never takes the pointer: only an open menu can be
   clicked or hovered (R5 ruling 4). Nothing inside a hidden container may set visibility: visible; use inherit. */
.dd:not(.is-open), .dd:not(.is-open) * { pointer-events: none !important; }
.dd--narrow { width: min(calc(100vw - var(--gut) * 2), 720px); }
.dd-in { display: grid; grid-template-columns: 260px 1fr; }
.dd-lead {
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px; margin: 8px; padding: 22px 22px 20px; border-radius: 16px;
  background: var(--wash-lavender-pale); text-decoration: none; transition: filter .25s var(--ease-out);
}
.dd--uses .dd-lead { background: var(--wash-pink-peach); }
.dd-lead:hover { filter: brightness(1.03); }
.dd-lead .dd-name { font-family: var(--serif); font-size: 26px; line-height: 1.1; letter-spacing: -.01em; font-weight: 400; }
.dd-lead .dd-line { color: var(--plum); }
.dd-lead .dd-go { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; }
.dd-lead .dd-go svg { width: 14px; height: 14px; transition: transform .3s var(--ease-out); }
.dd-lead:hover .dd-go svg { transform: translateX(2px); }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 8px 8px 8px 0; align-content: start; }
.dd--uses .dd-grid { grid-template-columns: 1fr; }
/* Two classes, so it outranks .dd-grid a below whatever the order: an icon-free list gets one column. */
.dd-grid.dd-grid--plain a { grid-template-columns: 1fr; }
.dd-grid a {
  display: grid; grid-template-columns: 36px 1fr; column-gap: 14px; align-items: start; padding: 14px 14px; border-radius: 14px;
  text-decoration: none; transition: background-color .2s var(--ease-out);
}
.dd-grid a:hover, .dd-grid a:focus-visible { background: #F4F1F8; }
.dd-grid a[aria-current="page"] { background: #F1EDF7; }
.dd-ico { grid-row: span 2; width: 36px; height: 36px; border-radius: 10px; background: #EEEAF6; display: grid; place-items: center; }
.dd-ico svg { width: 20px; height: 20px; }
.dd-name { display: block; font-size: 16px; font-weight: 500; line-height: 1.3; }
.dd-line { display: block; margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--mute); }
.dd-grid a[aria-current="page"] .dd-name::after { content: " · You’re here"; font-weight: 400; color: var(--mute); font-size: 15px; }

/* Phone drawer with expandable groups */
.drawer { display: none; }

/* ============================== Stages and washes ============================== */
.stage { position: relative; border-radius: 32px; overflow: clip; }
.w-lavender { background: var(--wash-lavender); }
.w-lavsky { background: var(--wash-lavender-sky); }
.w-skymint { background: var(--wash-sky-mint); }
.w-dusk { background: var(--wash-dusk); }
.w-pinkpeach { background: var(--wash-pink-peach); }
.w-lavpale { background: var(--wash-lavender-pale); }
.w-peach { background: var(--wash-peach); }
.w-peachdeep { background: var(--wash-peach-deep); }
.w-mint { background: var(--wash-mint); }
.w-sky { background: var(--wash-sky); }
.w-plum { background: var(--plum); color: var(--cream); }
.w-cream, .w-plane { background: var(--plane); }
/* A crisp 1:1 product screen on a stage: hairline, no shadow. */
.screenbox { background: var(--screen); border: 1px solid var(--hair); border-radius: 24px; }
.panel { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 22px; }
/* Stage shapes */
.stage--bleed { margin-inline: var(--gut); border-radius: 40px; }
.stage--half { margin-left: max(var(--gut), calc((100% - var(--col)) / 2)); border-radius: 32px 0 0 32px; }
.stage--half-l { margin-right: max(var(--gut), calc((100% - var(--col)) / 2)); border-radius: 0 32px 32px 0; }

/* ============================== Segmented toggle ============================== */
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #F1EEF5; }
.seg button {
  height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: none; font-size: 15px; color: var(--mute); cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease-out), color .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.seg button:hover { color: var(--plum); }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: #FFFFFF; color: var(--plum); box-shadow: inset 0 0 0 1px var(--hair); }
.seg--lg button { height: 44px; padding: 0 22px; font-size: 16px; }
.seg--on-plum { background: rgba(246, 243, 238, .1); }
.seg--on-plum button { color: rgba(246, 243, 238, .82); }
.seg--on-plum button:hover { color: var(--cream); }
.seg--on-plum button[aria-selected="true"], .seg--on-plum button[aria-checked="true"] { background: var(--cream); color: var(--plum); box-shadow: none; }
.js [data-seg-panel]:not(.is-on) { display: none; }

/* ============================== Plan card ============================== */
.plan { width: 440px; max-width: 100%; background: #FFFFFF; border: 1px solid var(--hair); border-radius: 22px; padding: 32px; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.plan-name { font-family: var(--serif); font-size: 26px; line-height: 1; letter-spacing: -.01em; }
.plan .seg button { height: 40px; padding: 0 14px; }
.price { margin-top: 32px; display: flex; align-items: baseline; gap: 12px; }
.amt { font-family: var(--serif); font-size: 84px; line-height: .9; letter-spacing: -.03em; transition: opacity .2s var(--ease-out); }
.per { font-size: 18px; color: var(--mute); transition: opacity .2s var(--ease-out); }
.price.is-swapping .amt, .price.is-swapping .per { opacity: 0; }
.price-note { margin-top: 12px; font-size: 15px; color: var(--mute); min-height: 22px; }
.incl { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hair); display: grid; gap: 10px; }
.incl li { font-size: 16px; line-height: 1.45; display: grid; grid-template-columns: 18px 1fr; gap: 12px; }
.incl svg { width: 18px; height: 18px; margin-top: 2px; }
.plan .btn { margin-top: 26px; width: 100%; }
.plan-terms { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--mute); text-align: center; }

/* ============================== FAQ accordion ============================== */
.faq-card { background: #FFFFFF; border: 1px solid var(--hair); border-radius: 22px; padding: 6px 36px; }
.qa { border-bottom: 1px solid var(--hair); }
.qa:last-child { border-bottom: 0; }
.qa h3 { font-weight: 400; }
.qa button {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left;
  padding: 26px 0; border: 0; background: none; cursor: pointer; font-size: 20px; line-height: 1.4; font-weight: 500;
}
.qa button:hover .qi { background: rgba(58, 30, 60, .07); }
.qa button:active .qi { background: rgba(58, 30, 60, .12); }
.qi { position: relative; width: 36px; height: 36px; border-radius: 50%; flex: none; transition: background-color .25s var(--ease-out); }
.qi::before, .qi::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17px; height: 2px; background: var(--plum); border-radius: 1px; transition: transform .35s var(--ease-out); }
.qi::after { transform: rotate(90deg); }
.qa.is-open .qi::after { transform: rotate(0deg); }
.qa-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .42s var(--ease-out); }
.js .qa:not(.is-open) .qa-a { grid-template-rows: 0fr; }
.js .qa:not(.is-open) .qa-a > div { visibility: hidden; transition: visibility 0s .42s; }
.qa-a > div { overflow: hidden; }
.qa-a p { padding: 0 64px 28px 0; font-size: 18px; line-height: 1.6; color: var(--mute); }
.qa-a p + p { margin-top: -12px; }

/* ============================== Page hero + close (shared defaults; pages may vary them) ============================== */
.page-hero { padding-top: max(56px, calc(var(--vw) * 6.667)); }
.page-hero .lede { margin-top: 24px; max-width: 640px; }
.close { text-align: center; }
.close .h1 { max-width: calc(var(--col) * .75); margin-inline: auto; }
.close-acts { margin-top: 40px; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.close-terms { margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--mute); text-wrap: balance; }

/* ============================== The glow hero (R4) ============================== */
/* From A · Answer it (round 1), the design Josh asked for back: "It started with the purple at the top, and it
   flowed down to a lighter color." Plum holds behind the headline, then the light comes up through violet,
   lavender, pink and peach into the white ground. Put .hero--glow on the page's first section; it slides up
   under the nav, and the nav turns cream over it until the page scrolls.
   --glow-hold: where the plum starts to lift (site.js sets it to the bottom of .glow-copy; 520px without JS).
   Markup: <section class="hero--glow" data-hero><div class="wrap glow-copy on-plum">h1, lede, acts</div>
           <div class="glow-visual">the app</div></section>
   Short variant (no visual under the copy): add .hero--glow-short. */
.hero--glow {
  --glow-hold: 520px;
  position: relative; margin-top: calc(var(--nav-h) * -1);
  padding-top: calc(var(--nav-h) + max(44px, calc(var(--vw) * 5.556)));
  padding-bottom: max(72px, calc(var(--vw) * 7.5));
  /* KIT2: one ramp that stays smooth at any height. Below the hold, each stop sits at the smaller of its fixed
     distance and its share of the light zone (the early, violet stops) or the larger of the two (the late, pink and
     peach stops), so the stops can never cross. A tall hero keeps the original rhythm; a short one compresses
     evenly instead of snapping from lavender to pink. */
  background: linear-gradient(180deg,
    #3A1E3C 0, #3A1E3C calc(var(--glow-hold) * .5), #452852 var(--glow-hold), #56417F min(calc(var(--glow-hold) + 120px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .14)),
    #7D70CB min(calc(var(--glow-hold) + 300px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .32)), #A197E1 min(calc(var(--glow-hold) + 430px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .45)), #C8C2F0 min(calc(var(--glow-hold) + 560px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .56)),
    #E3CDE6 max(calc(100% - 300px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .68)), #F3D3C6 max(calc(100% - 190px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .8)), #FBE6D9 max(calc(100% - 96px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .9)), var(--ground) 100%);
  background: linear-gradient(in oklab 180deg,
    #3A1E3C 0, #3A1E3C calc(var(--glow-hold) * .5), #452852 var(--glow-hold), #56417F min(calc(var(--glow-hold) + 120px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .14)),
    #7D70CB min(calc(var(--glow-hold) + 300px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .32)), #A197E1 min(calc(var(--glow-hold) + 430px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .45)), #C8C2F0 min(calc(var(--glow-hold) + 560px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .56)),
    #E3CDE6 max(calc(100% - 300px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .68)), #F3D3C6 max(calc(100% - 190px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .8)), #FBE6D9 max(calc(100% - 96px), calc(var(--glow-hold) + (100% - var(--glow-hold)) * .9)), var(--ground) 100%);
}
/* Short variant (no visual under the copy): the same ramp, with room under the copy for the light to come up. Two
   classes, so a page hero's own bottom padding (.v9e-hero, .c-hero) can't take that room back and squeeze the whole
   ramp into a band (the /compare hub, 5 Nov 2026). */
.hero--glow.hero--glow-short { padding-bottom: max(300px, calc(var(--vw) * 24)); }
.glow-copy { text-align: center; }
.glow-copy .h1 { max-width: calc(var(--col) * .86); margin-inline: auto; }
.glow-copy .lede { margin: 24px auto 0; max-width: 620px; color: rgba(246, 243, 238, .9); }
.glow-acts { margin-top: 36px; display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap; }
.glow-copy.left { text-align: left; }
.glow-copy.left .h1, .glow-copy.left .lede { margin-inline: 0; }
.glow-copy.left .glow-acts { justify-content: flex-start; }
.glow-visual { margin-top: max(48px, calc(var(--vw) * 5)); }
.hero--glow :focus-visible { outline-color: var(--cream); }
.hero--glow .glow-visual :focus-visible { outline-color: var(--lav-6); }

/* The nav over the glow: cream until the page scrolls (then the white ground comes back). */
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) { color: var(--cream); }
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) :is(.nav-link, .nav-trig, .nav-sign):hover { background: rgba(246, 243, 238, .12); }
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) .nav-end .btn { background: var(--cream); color: var(--plum); }
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) .nav-end .btn:hover { background: #FFFFFF; }
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) .nav-menu { background: rgba(246, 243, 238, .14); color: var(--cream); }
body:has(> main > .hero--glow) .nav:not(.is-scrolled):not(.dd-open):not(.drawer-open) :focus-visible { outline-color: var(--cream); }

/* ============================== Stair-step mosaic + footer (the shell's end) ============================== */
/* The stepped divider: cream steps down into plum. Each tile is one person; no type ever sits on it. */
.stairs { --n: 24; margin-top: var(--sec); display: grid; }
.stair {
  display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--n), min(calc(100% / var(--n)), calc(var(--col) / 20))) minmax(0, 1fr);
  background: var(--plum);
}
.stair::before { content: ""; grid-column: 1 / var(--a); background: var(--ground); }
.stair i { aspect-ratio: 60 / 56; display: block; }
.stair .s-lav { background: var(--tile-lav); }
.stair .s-peach { background: var(--tile-peach); }
.stair .s-pink { background: var(--tile-pink); }
.foot { background: var(--plum); color: var(--cream); padding-top: max(72px, calc(var(--vw) * 8.889)); overflow: clip; }
.foot-top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-bottom: 56px; }
.foot-cta { grid-column: 1 / 5; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.foot-cta p { font-family: var(--serif); font-size: 28px; line-height: 1.15; letter-spacing: -.01em; max-width: 300px; margin-bottom: 16px; }
.foot-cta .nav-sign { padding: 0; height: 44px; color: rgba(246, 243, 238, .86); }
.foot-cta .nav-sign:hover { background: none; color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.foot-cols { grid-column: 6 / 13; display: grid; grid-template-columns: 1.3fr 1.3fr 1fr 1fr; gap: var(--gap); }
.foot-cols h2 { margin: 0 0 14px; font-family: var(--sans); font-size: 15px; font-weight: 500; color: rgba(246, 243, 238, .66); letter-spacing: 0; }
.foot-cols a { display: block; width: fit-content; padding: 5px 0; font-size: 16px; line-height: 1.4; text-decoration: none; color: rgba(246, 243, 238, .9); }
.foot-cols a:hover { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; }
.foot-cols a[aria-current="page"] { color: var(--cream); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.foot a:focus-visible { outline-color: var(--cream); }
.foot-base { display: flex; justify-content: space-between; gap: 24px; padding-top: 22px; border-top: 1px solid var(--hair-cream); font-size: 15px; color: rgba(246, 243, 238, .7); }
/* The giant wordmark: spans the held column, cropped close at the bottom like V8. */
.foot-mark { container-type: inline-size; margin-top: max(40px, calc(var(--vw) * 5.556)); }
.foot-mark span {
  display: block; font-family: var(--serif); font-weight: 400; font-size: 33.25cqw; line-height: .74; letter-spacing: -.035em;
  color: var(--cream); white-space: nowrap; transform: translateX(-.03em); padding-bottom: max(28px, calc(var(--vw) * 3.4));
}

/* ============================== Phone bottom bar ============================== */
.mbar { display: none; }

/* ============================== Motion hooks ============================== */
/* Hidden for a reveal only once the script has set .motion (before paint) and only without reduced motion. */
.motion [data-in] { opacity: 0; }

/* ============================== Tablet ============================== */
@media (max-width: 1100px) {
  .nav-list .nav-link, .nav-list .nav-trig { padding: 0 10px; }
  .dd-in { grid-template-columns: 220px 1fr; }
  .foot-cta { grid-column: 1 / 13; margin-bottom: 48px; }
  .foot-cols { grid-column: 1 / 13; }
}
@media (max-width: 900px) {
  .nav-in { grid-template-columns: 1fr auto; }
  .nav-main, .nav-end { display: none; }
  .nav-menu {
    display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; margin-right: -6px;
    border: 0; border-radius: 999px; background: rgba(58, 30, 60, .06); font-size: 15px; font-weight: 500; cursor: pointer;
  }
  .nav-menu:active { background: rgba(58, 30, 60, .12); }
  .nav-menu svg { width: 16px; height: 16px; }
  .nav-menu .i-close, .nav-menu[aria-expanded="true"] .i-menu { display: none; }
  .nav-menu[aria-expanded="true"] .i-close { display: block; }
  .drawer {
    display: flex; flex-direction: column; position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ground); box-shadow: inset 0 1px 0 var(--hair); padding: 8px var(--gut) calc(24px + env(safe-area-inset-bottom));
    clip-path: inset(0 0 100% 0); visibility: hidden;
    transition: clip-path .36s var(--ease-out), visibility 0s .36s;
  }
  .drawer.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .36s var(--ease-out), visibility 0s; }
  .drawer:not(.is-open), .drawer:not(.is-open) * { pointer-events: none !important; }
  .nav.drawer-open { background: var(--ground); box-shadow: none; }
  .dg { border-bottom: 1px solid var(--hair); }
  .dg-trig, .drawer a.dl {
    width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border: 0; background: none; cursor: pointer;
    font-family: var(--serif); font-size: 30px; line-height: 1.1; letter-spacing: -.01em; text-decoration: none; text-align: left; color: var(--plum);
  }
  .drawer a.dl { border-bottom: 1px solid var(--hair); }
  .drawer a.dl[aria-current="page"]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--plum); }
  .dg-trig svg { width: 18px; height: 18px; transition: transform .36s var(--ease-out); }
  .dg-trig[aria-expanded="true"] svg { transform: rotate(180deg); }
  .dg-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease-out); }
  .dg-panel > div { overflow: hidden; visibility: hidden; transition: visibility 0s .4s; }
  .dg-panel.is-open { grid-template-rows: 1fr; }
  .dg-panel.is-open > div { visibility: inherit; transition: visibility 0s; }
  .dg-panel ul { padding: 0 0 14px; display: grid; }
  .dg-panel a { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 18px; line-height: 1.3; text-decoration: none; }
  .dg-panel a[aria-current="page"] { font-weight: 500; }
  .dg-panel a[aria-current="page"]::after { content: "You’re here"; font-size: 14px; font-weight: 400; color: var(--mute); }
  .drawer-end { margin-top: auto; padding-top: 28px; display: grid; gap: 6px; }
  .drawer-end .dl-sign { display: block; padding: 10px 0; font-size: 17px; text-decoration: none; }
  .drawer-end .btn { width: 100%; }
  .foot-cols { grid-template-columns: 1fr 1fr; row-gap: 36px; }
}

/* ============================== Phone ============================== */
@media (max-width: 600px) {
  :root { --gap: 16px; }
  .logo { font-size: 27px; }
  .sec-head.center, .sec-head.left { max-width: none; }
  .c-1-13, .c-1-7, .c-7-13, .c-1-6, .c-1-5, .c-1-8, .c-1-9, .c-2-12, .c-3-11, .c-4-10, .c-5-13, .c-6-13, .c-8-13, .c-9-13, .c-2-7, .c-8-12, .c-6-12 { grid-column: 1 / 13; }
  .stage { border-radius: 24px; }
  .stage--bleed { margin-inline: 8px; border-radius: 28px; }
  .stage--half { margin-left: var(--gut); border-radius: 24px 0 0 24px; }
  .stage--half-l { margin-right: var(--gut); border-radius: 0 24px 24px 0; }
  .plan { padding: 26px 20px 22px; }
  .plan .seg button { padding: 0 10px; font-size: 14px; }
  .amt { font-size: 76px; }
  .faq-card { padding: 2px 20px; }
  .qa button { font-size: 18px; padding: 22px 0; }
  .qa-a p { padding-right: 8px; font-size: 17px; }

  .stairs { --n: 13; }
  .stair { grid-template-columns: minmax(0, 1fr) repeat(var(--n), calc(100% / var(--n))) minmax(0, 1fr); }
  .stair::before { grid-column: 1 / var(--am); }
  .stair.s-wide { display: none; }
  .foot-top { padding-bottom: 40px; }
  .foot-cta p { font-size: 26px; }
  .foot-cols { grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .foot-base { flex-direction: column; gap: 6px; }

  .mbar {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 48;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96);
    box-shadow: inset 0 1px 0 var(--hair); transform: translateY(100%); visibility: hidden;
    transition: transform .4s var(--ease-out), visibility 0s .4s;
  }
  .mbar.is-on { transform: none; visibility: visible; transition: transform .4s var(--ease-out), visibility 0s; }
  .mbar .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; transition-delay: 0s !important; animation-duration: 1ms !important; }
}

/* R7 (ruling 35): the coming-soon halftone tile, the brand mosaic's only texture (assets/mosaic-kit.js, page-mosaic.js).
   On white, as marketing.css .cs-t.ht; "cover" keeps its dots round on a tile that is not 1:2. */
.mk-ht { background: #FFFFFF url("/site/v11/s/1c8065ce75fc6591.svg") center / cover no-repeat; }

/* R7 (ruling 40): one max width for every centred product visual in a section (the home demo, text-above features):
   the width of the home "Encore is context's best friend" panel, which Josh called right (1173px from 1600 wide).
   Heroes (they grow on scroll) and visuals beside their text (they fill their stage and bleed, ruling 38) are not
   centred visuals. kit-r6.js marks them .fit--centred. */
:root { --vis-max: calc(var(--col) - 2 * max(28px, var(--vw) * 5)); }
.fit.fit--centred { max-width: var(--vis-max); margin-inline: auto; }

/* An address with #section lands where a click on that link does (site.js jump): under the nav, plus air. */
[id] { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* still tier: the reduced-motion rules above */
html.mo-still *,html.mo-still *::before,html.mo-still *::after{transition-duration: 1ms !important; transition-delay: 0s !important; animation-duration: 1ms !important;}