/* ============================================================
   profyl.com: the marketing layer, brand v3 (Direction A, Lock-in)
   Loads after tokens.css and components.css (synced from profyl-com/docs,
   never edited here). This file lays pages out and adds the objects the app
   never needed: a hero, a comparison, a price list, a section rhythm. It
   reads only v3 names (--pf-*, --type-*, --space-*, --radius-*,
   --duration-*, --ease-*, the palette), none of the v2 aliases, so session 5
   can delete them without touching the site.

   Brand: profyl-com/docs/brand-v3/brand-identity.md, and compare.html as
   the picture of it. Structure and copy: docs/website/structure.md,
   audiences.md.
   ============================================================ */

:root{
  --wrap-pad:var(--grid-mobile-margin);
  --section-y:var(--space-16);
}
@media (min-width:768px){ :root{ --wrap-pad:var(--grid-tablet-margin); } }
@media (min-width:1024px){ :root{ --wrap-pad:var(--space-10); --section-y:var(--space-24); } }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--topbar-h) + var(--space-4)); }
@media (min-width:1024px){ html{ scroll-padding-top:var(--space-6); } }
body{ min-height:100dvh; background:var(--pf-bg); color:var(--pf-fg-secondary); font-size:var(--type-body-size); line-height:var(--type-body-leading); }
img{ max-width:100%; display:block; }
.ic{ flex:none; display:block; }

.wrap{ width:100%; max-width:var(--shell-max); margin-inline:auto; padding-inline:var(--wrap-pad); }

/* ---------- the Ink field ----------
   v3's dark brand surface (§4): Ink 900 in both themes, so its ink is
   constant, not a role. Cards set on it are the theme's own surfaces and
   take the theme's ink back. The logo is the reversed version (§3: white
   stem, Volt bowl). */
.ink{
  position:relative; isolation:isolate;
  background:var(--color-ink-900); color:var(--color-steel-300);
  --logo-stem:var(--color-white); --logo-bowl:var(--color-volt-400); --logo-endorse:var(--color-steel-300);
}
.ink :focus-visible{ outline-color:var(--color-white); }
.ink .card{ color:var(--pf-fg); }
.ink :focus-visible:where(.card *){ outline-color:var(--pf-focus); }
/* The primary on Ink: Cobalt 500 holds 3.66:1 against the field and white
   text at 5.13:1 (§4); hover goes one shade deeper, as everywhere. */
.ink .btn--primary{ background:var(--color-cobalt-500); color:var(--color-white); }
.ink .btn--primary:hover{ background:var(--color-cobalt-600); }
.ink .btn--primary:active{ background:var(--color-cobalt-700); }
/* compare.html's hero ground: the 12-column grid as hairlines, fading out
   down the field. Structure, not decoration: the page is a measured thing. */
.ink::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:repeating-linear-gradient(to right, transparent 0 calc(8.3333% - 1px), var(--color-ink-700) calc(8.3333% - 1px) 8.3333%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0, transparent 80%); mask-image:linear-gradient(to bottom, #000 0, transparent 80%);
  opacity:.6;
}

/* ---------- actions ---------- */
/* The arrow on a primary action nudges 2px on hover (§7, "lean and lock"). */
.btn--go > .ic{ transition:transform var(--duration-sm) var(--ease-standard); }
@media (prefers-reduced-motion:no-preference){ .btn--go:hover > .ic{ transform:translateX(2px); } }
.btn--lg{ min-height:var(--hit-min); }

/* A link that is an action in a sentence of actions. Underlined, never a
   borderless button. */
.textlink{
  position:relative; display:inline-flex; align-items:center; min-height:var(--hit-min);
  font:var(--type-label-lg-weight) var(--type-label-lg-size)/1.4 var(--font-sans); color:var(--pf-fg);
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:5px;
  text-decoration-color:var(--pf-border-input);
  transition:text-decoration-color var(--duration-sm) var(--ease-standard);
}
.textlink:hover{ text-decoration-color:currentColor; }
.textlink:focus-visible{ outline:var(--focus-ring-width) solid var(--pf-focus); outline-offset:var(--focus-ring-offset); border-radius:var(--radius-xs); }
.ink .textlink{ color:var(--color-white); text-decoration-color:var(--color-steel-500); }
.ink .textlink:hover{ text-decoration-color:currentColor; }

/* ============================================================
   MASTHEAD
   The app's masthead (components.css): a surface with a hairline, the
   symbol and wordmark, the current destination ink with the 2px brand rule.
   ============================================================ */
.masthead__brand .logo{ --logo-h:30px; }
@media (min-width:1024px){ .masthead__brand .logo{ --logo-h:34px; } }
.masthead__inner{ gap:var(--space-6); }
.masthead__end{ gap:var(--space-3); }
@media (min-width:1024px){ .masthead__end{ gap:var(--space-6); } }
.masthead__signin{
  display:none; font:var(--type-label-lg-weight) var(--type-body-size)/1 var(--font-sans);
  color:var(--pf-fg-secondary); text-decoration:none;
}
.masthead__signin:hover{ color:var(--pf-fg); }
.masthead__signin:focus-visible{ outline:var(--focus-ring-width) solid var(--pf-focus); outline-offset:var(--focus-ring-offset); border-radius:var(--radius-xs); }
@media (min-width:1024px){ .masthead__signin{ display:inline; } }
/* Below 420px the hero's own action is a thumb away; the logo and the menu
   keep the bar. */
@media (max-width:419px){ .masthead__cta{ display:none; } }
@media (max-width:1023px){ .masthead__cta{ height:var(--control-sm); padding:0 var(--space-3); font-size:var(--type-label-size); } }

/* The logo's bowl slides in and snaps onto the stem on first load (§3, §7:
   "lock-in"). 12 of the logo's units; under reduced motion it just appears. */
@keyframes site-lock-in{ from{ opacity:0; transform:translateX(var(--motion-distance-logo)); } }
.logo--lock .logo__bowl{ animation:site-lock-in var(--duration-xl) var(--ease-snap) 120ms both; }

/* Below lg the nav lives in a disclosure: no script, and the links are in
   the HTML for anyone reading it without CSS. */
.mastmenu{ position:static; }
@media (min-width:1024px){ .mastmenu{ display:none; } }
.mastmenu > summary{
  list-style:none; display:inline-flex; align-items:center; gap:var(--space-1);
  min-height:var(--hit-min); padding:0 var(--space-2); cursor:pointer; border-radius:var(--radius-md);
  font:var(--type-label-lg-weight) var(--type-body-size)/1 var(--font-sans); color:var(--pf-fg);
}
.mastmenu > summary::-webkit-details-marker{ display:none; }
.mastmenu > summary:hover{ background:var(--pf-surface-sunken); }
.mastmenu > summary:focus-visible{ outline:var(--focus-ring-width) solid var(--pf-focus); outline-offset:var(--focus-ring-offset); }
.mastmenu > summary > .ic{ transition:transform var(--duration-sm) var(--ease-standard); }
.mastmenu[open] > summary > .ic{ transform:rotate(180deg); }
.mastmenu__panel{
  position:absolute; left:0; right:0; top:100%;
  display:flex; flex-direction:column; padding:var(--space-2) var(--wrap-pad) var(--space-5);
  background:var(--pf-surface); border-bottom:var(--hairline) solid var(--pf-border); box-shadow:var(--pf-shadow-md);
  animation:pf-align-in var(--duration-md) var(--ease-enter) both;
}
.mastmenu__panel a{
  display:flex; align-items:center; min-height:var(--hit-min);
  font:var(--type-label-lg-weight) var(--type-body-lg-size)/1 var(--font-sans); color:var(--pf-fg); text-decoration:none;
  border-top:var(--hairline) solid var(--pf-border);
}
.mastmenu__panel a:first-child{ border-top:0; }
.mastmenu__panel a[aria-current="page"]{ color:var(--pf-primary-text); }
.mastmenu__panel a:focus-visible{ outline:var(--focus-ring-width) solid var(--pf-focus); outline-offset:var(--focus-ring-offset); border-radius:var(--radius-xs); }

/* ============================================================
   SECTIONS
   Three grounds (Landing.astro): Ink, a full-bleed surface band, and the
   page ground. Two plain sections in a row are told apart by a hairline
   inside the column.
   ============================================================ */
.section{ padding-block:var(--section-y); }
.section--band{ background:var(--pf-surface); border-block:var(--hairline) solid var(--pf-border); }
.section--band + .section--band{ border-top:0; }
/* Drawn as a background, not a pseudo-element: several of these columns are
   grids, and a ::before would become their first cell. */
.section--rule{ padding-top:0; }
.section--rule > .wrap{
  padding-top:var(--section-y);
  background:linear-gradient(var(--pf-border),var(--pf-border)) no-repeat;
  background-position:var(--wrap-pad) 0;
  background-size:calc(100% - 2 * var(--wrap-pad)) var(--hairline);
}
.section--compact{ padding-block:var(--space-12); }

.s-head{ display:flex; flex-direction:column; gap:var(--space-4); max-width:46rem; margin-bottom:var(--space-10); }
@media (min-width:1024px){ .s-head{ margin-bottom:var(--space-12); } }
.s-head--wide{ max-width:56rem; }
/* Section titles take the display-md step (§5: 700 at 108%): marketing is
   one step louder than the app's page titles. */
.s-title{
  margin:0; color:var(--pf-fg);
  font:var(--type-display-md-weight) var(--type-display-md-size)/var(--type-display-md-leading) var(--font-display);
  font-stretch:var(--type-display-md-width); letter-spacing:var(--type-display-md-tracking);
}
.s-title--lg{
  font-weight:var(--type-display-lg-weight); font-size:var(--type-display-lg-size);
  line-height:var(--type-display-lg-leading); font-stretch:var(--type-display-lg-width);
  letter-spacing:var(--type-display-lg-tracking);
}
.s-lede{ margin:0; max-width:var(--container-prose); font-size:var(--type-body-lg-size); line-height:var(--type-body-lg-leading); color:var(--pf-fg-secondary); }
.s-body{ margin:0; max-width:var(--container-prose); color:var(--pf-fg-secondary); }
.s-strong{ margin:0; max-width:var(--container-prose); font:var(--type-h4-weight) var(--type-h4-size)/var(--type-h4-leading) var(--font-sans); color:var(--pf-fg); }

/* A heading on the left, the words on the right, from lg. */
.split{ display:grid; gap:var(--space-6); align-items:start; }
@media (min-width:1024px){ .split{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-16); } }
.split__copy{ display:flex; flex-direction:column; gap:var(--space-5); }
.split__body{ display:flex; flex-direction:column; gap:var(--space-6); }

/* ============================================================
   HERO
   compare.html's hero on the Ink field: the words on the left, the product
   on the right. The headline is display-lg (800 at 112%), and its width
   opens from 100% on arrival (§7 pattern 1, the hero h1 only).
   ============================================================ */
.hero{ padding-block:var(--space-12) var(--space-16); overflow:hidden; }
@media (min-width:1024px){ .hero{ padding-block:var(--space-20) var(--space-24); } }
.hero__grid{ display:grid; gap:var(--space-12); align-items:center; }
@media (min-width:1024px){ .hero__grid{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-16); } }
.hero__copy{ display:flex; flex-direction:column; gap:var(--space-6); }
.hero__overline{
  margin:0; color:var(--color-cobalt-300);
  font:var(--type-overline-weight) var(--type-overline-size)/var(--type-overline-leading) var(--font-sans);
  font-stretch:var(--type-overline-width); letter-spacing:var(--type-overline-tracking); text-transform:uppercase;
}
.hero__title{
  margin:0; color:var(--color-white); text-wrap:balance;
  font:var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-leading) var(--font-display);
  font-stretch:var(--type-display-lg-width); letter-spacing:var(--type-display-lg-tracking);
}
@media (min-width:1280px){ .hero__title{ font-size:3.75rem; } }
.hero__line{ display:block; }
.hero__line + .hero__line{ margin-top:.12em; }
.hero__line:nth-child(2){ color:var(--color-cobalt-200); }
.hero__lede{ margin:0; max-width:36rem; font-size:var(--type-body-lg-size); line-height:var(--type-body-lg-leading); color:var(--color-steel-300); }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3) var(--space-6); }
.hero__note{ margin:0; font-size:var(--type-body-sm-size); line-height:var(--type-body-sm-leading); color:var(--color-steel-400); }
/* The one Volt in the copy: the underline under the word that carries it. */
.hero .hl,.close .hl{ text-decoration-color:var(--color-volt-400); }

/* ---------- the product, as the image ---------- */
.hero__art{ position:relative; display:flex; justify-content:center; }
.product{ position:relative; display:flex; flex-direction:column; gap:var(--space-3); width:min(100%,460px); }
.product__card{ padding:var(--space-5); box-shadow:var(--pf-shadow-xl); }
.product__head{ display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--space-2) var(--space-3); }
.product__head > .chip{ max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.product__label{
  display:inline-flex; align-items:center; gap:var(--space-2); white-space:nowrap;
  font:var(--type-label-weight) var(--type-label-size)/var(--type-label-leading) var(--font-sans); color:var(--pf-fg-muted);
}
.product__data{ font:var(--type-data-weight) var(--type-data-size)/var(--type-data-leading) var(--font-mono); font-variant-numeric:tabular-nums; color:var(--pf-fg-secondary); }
.product__role{ margin:var(--space-2) 0 var(--space-3); font:var(--type-h4-weight) var(--type-h4-size)/var(--type-h4-leading) var(--font-display); letter-spacing:var(--type-h4-tracking); color:var(--pf-fg); }
.product__reqs{ list-style:none; margin:0; padding:0; }
.product__reqs .req{ color:var(--pf-fg); }
.product__lock{
  display:flex; align-items:center; gap:var(--space-3); margin:0; padding-inline:var(--space-1);
  font:var(--type-data-weight) var(--type-data-size)/var(--type-data-leading) var(--font-mono); color:var(--color-white);
}
.product__sym{ width:24px; height:24px; flex:none; overflow:visible; }
.product__sym rect{ fill:var(--color-white); }
.product__sym path{ fill:var(--color-volt-400); }
.product__doc{ margin-left:0; }
.product__name{ margin:0; font:var(--type-h4-weight) var(--type-h4-size)/var(--type-h4-leading) var(--font-display); letter-spacing:var(--type-h4-tracking); color:var(--pf-fg); }
.product__sub{ margin:0; font-size:var(--type-body-sm-size); line-height:var(--type-body-sm-leading); color:var(--pf-fg-muted); }
.product__lines{
  list-style:none; margin:var(--space-4) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-2);
  font-size:var(--type-body-sm-size); line-height:var(--type-body-sm-leading); color:var(--pf-fg);
}
.product__lines li{ position:relative; padding-left:var(--space-4); }
.product__lines li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:50%; background:var(--pf-primary-text); }
.product__fit{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-4); padding-top:var(--space-3); border-top:var(--hairline) solid var(--pf-border); }
.product__fit .product__data{ color:var(--pf-fg); white-space:nowrap; }
.product__said{ margin:var(--space-3) 0 0; font:var(--type-h4-weight) var(--type-h4-size)/1.45 var(--font-sans); color:var(--pf-fg); }
.product__said::before{ content:"\201C"; } .product__said::after{ content:"\201D"; }
.product__post{ display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-4); color:var(--pf-fg); }
.product__post p{ margin:0; }
.product .sample-tag{ position:absolute; top:calc(var(--space-8) * -1); right:0; margin:0; border-color:var(--color-steel-600); color:var(--color-steel-300); }
@media (max-width:639px){
  .product__reqs .req:nth-child(n+4){ display:none; }
  .product__lines li:nth-child(3){ display:none; }
}

/* An illustration kept on purpose says so (Specimen, Gaps). */
.sample-tag{
  display:block; width:fit-content; margin:0 0 var(--space-3) auto;
  padding:2px var(--space-2); border:var(--hairline) solid var(--pf-border-strong); border-radius:var(--radius-full);
  font:var(--type-overline-weight) var(--type-overline-size)/1.4 var(--font-sans); font-stretch:var(--type-overline-width);
  letter-spacing:var(--type-overline-tracking); text-transform:uppercase; color:var(--pf-fg-muted);
}

/* ============================================================
   M8 · WHY NOT A CHAT APP
   A table you read: what, in a chat app, in Profyl. Profyl's column is a
   raised card with the primary edge (the selected card); the chat app's is
   the page ground. Below md every row is a card of its own.
   ============================================================ */
.vs{ width:100%; border-collapse:separate; border-spacing:0; }
.vs th,.vs td{ text-align:left; vertical-align:top; }
.vs thead th{ padding:var(--space-4) var(--space-5); }
.vs__colhead{ display:inline-flex; align-items:center; gap:var(--space-2); font:var(--type-label-lg-weight) var(--type-label-lg-size)/1.3 var(--font-sans); color:var(--pf-fg-secondary); }
.vs__us .vs__colhead{ color:var(--pf-fg); font-weight:var(--font-weight-bold); }
.vs__sym{ width:22px; height:22px; flex:none; }
.vs__sym rect{ fill:var(--pf-logo-stem); } .vs__sym path{ fill:var(--pf-logo-bowl); }
.vs tbody th{ padding:var(--space-5) var(--space-5) var(--space-5) 0; font:var(--type-label-lg-weight) var(--type-body-size)/1.4 var(--font-sans); color:var(--pf-fg); }
.vs tbody td{ padding:var(--space-5); border-top:var(--hairline) solid var(--pf-border); }
.vs td > span{ display:block; }
.vs td{ position:relative; }
.vs__ic{ position:absolute; left:var(--space-5); top:calc(var(--space-5) + 3px); }
.vs tbody td > span{ padding-left:var(--space-6); }
.vs td.vs__them{ color:var(--pf-fg-muted); }
.vs td.vs__them .vs__ic{ color:var(--pf-fg-muted); }
.vs td.vs__us{ color:var(--pf-fg); background:var(--pf-surface-raised); border-inline:1.5px solid var(--pf-primary); }
.vs td.vs__us .vs__ic{ color:var(--pf-primary-text); }
.vs thead .vs__us{ background:var(--pf-surface-raised); border:1.5px solid var(--pf-primary); border-bottom:0; border-radius:var(--radius-lg) var(--radius-lg) 0 0; }
.vs tbody tr:last-child td.vs__us{ border-bottom:1.5px solid var(--pf-primary); border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.vs tbody tr:first-child td{ border-top-color:transparent; }
.vs tbody tr:first-child td.vs__us{ border-top:var(--hairline) solid var(--pf-border); }
@media (min-width:768px){
  .vs{ table-layout:fixed; }
  .vs thead td{ width:18%; }
  .vs thead .vs__us{ box-shadow:var(--pf-shadow-md); }
}
@media (max-width:767px){
  .vs thead{ display:none; }
  .vs,.vs tbody{ display:block; }
  .vs tbody tr{ display:grid; grid-template-columns:minmax(0,1fr); margin-top:var(--space-3); border:var(--hairline) solid var(--pf-border); border-radius:var(--radius-lg); background:var(--pf-surface-raised); box-shadow:var(--pf-shadow-sm); overflow:hidden; }
  .vs tbody th{ padding:var(--space-4) var(--space-4) var(--space-2); }
  .vs tbody td,.vs tbody tr:first-child td{ padding:var(--space-3) var(--space-4); border:0; border-radius:0; }
  .vs tbody td.vs__us,.vs tbody tr:last-child td.vs__us,.vs tbody tr:first-child td.vs__us{ border:0; border-top:var(--hairline) solid var(--pf-border); background:var(--pf-primary-soft); border-radius:0; padding-bottom:var(--space-4); }
  .vs td.vs__us{ color:var(--pf-fg); }
  .vs__ic{ left:var(--space-4); top:calc(var(--space-3) + 3px); }
  .vs td.vs__them::before,.vs td.vs__us::before{ display:block; padding-left:var(--space-6); margin-bottom:2px; font:var(--type-label-weight) var(--type-caption-size)/1.4 var(--font-sans); }
  .vs td.vs__them::before{ content:"In a chat app"; color:var(--pf-fg-muted); }
  .vs td.vs__us::before{ content:"In Profyl"; color:var(--pf-on-primary-soft); }
}
.vs__close{ margin:var(--space-10) 0 0; max-width:var(--container-prose); font:var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-leading) var(--font-display); letter-spacing:var(--type-h3-tracking); color:var(--pf-fg); }

/* ============================================================
   M3 · HOW IT WORKS
   Three cards with mono step numbers; the third, the payoff, is wider and
   one elevation step up, and lists what comes back.
   ============================================================ */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4); }
@media (min-width:1024px){ .steps{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr); gap:var(--grid-desktop-gutter); align-items:start; } }
.step{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6); }
.step__top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-2); }
.step__n{ font:var(--type-data-lg-weight) var(--type-data-lg-size)/var(--type-data-lg-leading) var(--font-mono); letter-spacing:var(--type-data-lg-tracking); color:var(--pf-primary-text); font-variant-numeric:tabular-nums; }
.step__icon{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius-md); background:var(--pf-primary-soft); color:var(--pf-on-primary-soft); }
.step__title{ margin:0; font:var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-leading) var(--font-display); letter-spacing:var(--type-h3-tracking); color:var(--pf-fg); }
.step p{ margin:0; color:var(--pf-fg-secondary); }
.step__list{ list-style:none; margin:var(--space-2) 0 0; padding:0; display:flex; flex-direction:column; gap:var(--space-2); }
.step__list li{ padding:var(--space-2) var(--space-3); border-radius:var(--radius-md); background:var(--pf-surface-sunken); color:var(--pf-fg); font-size:var(--type-body-sm-size); line-height:var(--type-body-sm-leading); }
.step--payoff{ box-shadow:var(--pf-shadow-md); border-color:var(--pf-border-strong); }
.outputs{ list-style:none; margin:var(--space-2) 0 0; padding:0; }
.outputs li{
  display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:var(--space-1) var(--space-3);
  padding:var(--space-3) 0; border-top:var(--hairline) solid var(--pf-border);
}
.outputs__icon{ grid-row:span 2; display:grid; place-items:center; width:36px; height:36px; border-radius:var(--radius-md); background:var(--pf-primary-soft); color:var(--pf-on-primary-soft); }
.outputs__name{ font:var(--font-weight-semibold) var(--type-body-size)/1.3 var(--font-sans); color:var(--pf-fg); }
.outputs__note{ font-size:var(--type-body-sm-size); line-height:var(--type-body-sm-leading); color:var(--pf-fg-muted); }
.outputs li:not(:has(.outputs__icon)){ grid-template-columns:minmax(0,1fr); }

/* ============================================================
   M5 · FIT
   The app's gap analysis on the page: a summary card with the count in
   words and one cell per requirement, then the groups, strengths first.
   ============================================================ */
.fitdemo{ display:grid; gap:var(--space-6); align-items:start; }
@media (min-width:1024px){ .fitdemo{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-10); } }
@media (min-width:1024px){ .fitdemo__sum{ position:sticky; top:var(--space-6); } }
.fitdemo__sum{ display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-6); }
.fitdemo__sum .sample-tag{ margin:0 0 calc(var(--space-2) * -1) auto; }
.fitdemo__role{
  margin:0; font:var(--type-overline-weight) var(--type-overline-size)/var(--type-overline-leading) var(--font-sans);
  font-stretch:var(--type-overline-width); letter-spacing:var(--type-overline-tracking); text-transform:uppercase; color:var(--pf-primary-text);
}
.fitdemo__head{ margin:0; font:var(--type-h1-weight) var(--type-h1-size)/var(--type-h1-leading) var(--font-display); font-stretch:var(--type-h1-width); letter-spacing:var(--type-h1-tracking); color:var(--pf-fg); text-wrap:balance; }
.fitdemo__num{ font-family:var(--font-mono); font-stretch:normal; letter-spacing:-0.02em; font-variant-numeric:tabular-nums; }
.fitdemo__sub{ margin:0; color:var(--pf-fg-secondary); }
.fitdemo__sum .cells{ max-width:none; grid-template-columns:repeat(var(--n),minmax(0,1fr)); gap:3px; }
@media (min-width:640px){ .fitdemo__sum .cells{ gap:4px; } }
.fitdemo__sum .legend{ list-style:none; padding:0; }
.fitdemo__count{ font:var(--type-data-weight) var(--type-data-size)/1 var(--font-mono); color:var(--pf-fg-muted); font-variant-numeric:tabular-nums; }
.fitdemo__strong{ margin:var(--space-2) 0 0; padding-top:var(--space-4); border-top:var(--hairline) solid var(--pf-border); font-weight:var(--font-weight-semibold); color:var(--pf-fg); }
.fitdemo__groups{ display:flex; flex-direction:column; gap:var(--space-8); }
.fitdemo .gaprow__move strong{ font-weight:var(--font-weight-semibold); }
.fitdemo__more{ margin:0; font-size:var(--type-body-sm-size); color:var(--pf-fg-muted); }

/* ============================================================
   M6 · INTERVIEW
   ============================================================ */
/* The heading on the left, held while the questions scroll past it, from lg. */
@media (min-width:1024px){
  .interview{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-16); align-items:start; }
  .interview > .s-head{ position:sticky; top:var(--space-6); margin-bottom:0; }
}
.questions{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-3); }
.iq{ padding:0; overflow:hidden; }
.iq summary{
  list-style:none; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:start; gap:var(--space-4);
  padding:var(--space-5); cursor:pointer; border-radius:var(--radius-lg);
  transition:background-color var(--duration-sm) var(--ease-standard);
}
.iq summary::-webkit-details-marker{ display:none; }
.iq summary:hover{ background:var(--pf-surface-sunken); }
.iq summary:focus-visible{ outline:var(--focus-ring-width) solid var(--pf-focus); outline-offset:calc(var(--focus-ring-width) * -1); }
.iq__n{ padding-top:2px; font:var(--type-data-weight) var(--type-data-size)/1.4 var(--font-mono); color:var(--pf-fg-muted); font-variant-numeric:tabular-nums; }
.iq__q{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); }
.iq__text{ font:var(--type-h4-weight) var(--type-h4-size)/var(--type-h4-leading) var(--font-display); letter-spacing:var(--type-h4-tracking); color:var(--pf-fg); }
.iq__chev{ margin-top:2px; color:var(--pf-fg-muted); transition:transform var(--duration-md) var(--ease-snap); }
.iq[open] .iq__chev{ transform:rotate(180deg); }
.iq__answer{ padding:0 var(--space-5) var(--space-5) calc(var(--space-5) + 2ch + var(--space-4)); }
@media (max-width:639px){ .iq__answer{ padding-left:var(--space-5); } }
.iq[open] .iq__answer{ animation:pf-align-in var(--duration-md) var(--ease-enter) both; }
.iq__label{ margin:0 0 var(--space-1); font:var(--type-label-weight) var(--type-label-size)/var(--type-label-leading) var(--font-sans); color:var(--pf-primary-text); }
.iq__answer p:last-child{ margin:0; max-width:var(--container-prose); color:var(--pf-fg-secondary); }

/* ============================================================
   M7 · PRESENCE
   One idea, four surfaces. The idea is the only card on Ink: it is the
   input, everything else is written from it.
   ============================================================ */
.fanout{ display:grid; gap:var(--space-4); }
@media (min-width:900px){
  .fanout{ grid-template-columns:repeat(12,minmax(0,1fr)); grid-template-rows:auto auto; gap:var(--grid-desktop-gutter); }
  .fan--idea{ grid-column:1 / 5; grid-row:1 / 3; }
  .fan--post{ grid-column:5 / 13; }
  .fan--thread{ grid-column:5 / 9; }
  .fan--script{ grid-column:9 / 13; }
}
.fan{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6); }
.fan__label{ display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin:0; }
.fan__label > span:first-child{ display:inline-flex; align-items:center; gap:var(--space-2); font:var(--type-label-weight) var(--type-label-size)/var(--type-label-leading) var(--font-sans); }
.fan__data{ font:var(--type-data-weight) var(--type-data-size)/1 var(--font-mono); font-variant-numeric:tabular-nums; }
.fan__text{ margin:0; color:var(--pf-fg); }
.fan--idea{
  justify-content:space-between; border-radius:var(--radius-lg);
  background:var(--color-ink-900); color:var(--color-steel-300); box-shadow:var(--pf-shadow-md);
}
.fan__said{ margin:0; font:var(--type-h3-weight) var(--type-h3-size)/1.4 var(--font-display); letter-spacing:var(--type-h3-tracking); color:var(--color-white); }
.fan__said::before{ content:"\201C"; } .fan__said::after{ content:"\201D"; }
.fan__meta{ margin:0; font-size:var(--type-body-sm-size); color:var(--color-steel-400); }
.fan .thread{ gap:var(--space-3); }
.script{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-2) var(--space-3); align-items:baseline; }
.script__cue{ font:var(--type-data-weight) var(--type-caption-size)/1.4 var(--font-mono); color:var(--pf-fg-muted); white-space:nowrap; }
.fanout__close{ margin:var(--space-10) 0 0; max-width:var(--container-prose); font-size:var(--type-body-lg-size); line-height:var(--type-body-lg-leading); color:var(--pf-fg-secondary); }
.presence-line{ display:flex; align-items:center; gap:var(--space-3); margin:0; font:var(--type-h4-weight) var(--type-h4-size)/var(--type-h4-leading) var(--font-sans); color:var(--pf-fg); }
.presence-line .ic{ color:var(--pf-primary-text); }
.split .chips{ list-style:none; margin:0; padding:0; }
.split .eyebrow{ margin-bottom:var(--space-3); }

/* ============================================================
   M4 · VOICE
   ============================================================ */
.voice{ margin:0; }
.voice__cap{ margin:0 0 var(--space-4); font:var(--type-label-weight) var(--type-label-size)/var(--type-label-leading) var(--font-sans); color:var(--pf-fg-muted); }
.voice__panes{ display:grid; gap:var(--space-4); }
@media (min-width:900px){ .voice__panes{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--grid-desktop-gutter); } }
.voice__pane{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6); }
.voice__pane--them{ border:1.5px dashed var(--pf-border-strong); border-radius:var(--radius-lg); }
.voice__pane--us{ box-shadow:var(--pf-shadow-md); }
.voice__label{ margin:0; font:var(--type-label-weight) var(--type-label-size)/var(--type-label-leading) var(--font-sans); color:var(--pf-fg-muted); }
.voice__text{ margin:0; font-size:var(--type-body-lg-size); line-height:var(--type-body-lg-leading); }
.voice__pane--them .voice__text{ color:var(--pf-fg-muted); }
.voice__pane--us .voice__text{ color:var(--pf-fg); }
.voice__verdict{ margin:var(--space-10) 0 0; font:var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-leading) var(--font-display); letter-spacing:var(--type-h2-tracking); color:var(--pf-fg); }
.voice__honest{ margin:var(--space-3) 0 0; max-width:var(--container-prose); color:var(--pf-fg-secondary); }

/* ============================================================
   M2 · TWO SURFACES
   ============================================================ */
.pair{ display:flex; flex-direction:column; }
.pair__card{ margin:0; padding:var(--space-6); border-radius:var(--radius-lg); }
.pair__card--theirs{ border:1.5px dashed var(--pf-border-strong); }
@media (min-width:768px){ .pair__card--theirs{ margin-left:var(--space-16); } }
.pair__label{ margin:0 0 var(--space-2); font:var(--type-label-weight) var(--type-label-size)/var(--type-label-leading) var(--font-sans); color:var(--pf-fg-muted); }
.pair__text{ margin:0; font-size:var(--type-body-lg-size); line-height:var(--type-body-lg-leading); color:var(--pf-fg); }
.pair__card--theirs .pair__text{ color:var(--pf-fg-muted); }
/* The join that doesn't join: the to-address edge, dashed (§4). */
.pair__join{ width:0; height:var(--space-8); margin-left:var(--space-10); border-left:2px dashed var(--pf-gap-border); }

/* ============================================================
   M9 · WHERE PROFYL SITS
   ============================================================ */
.versus-wrap{ overflow-x:auto; }
.versus{ width:100%; min-width:520px; border-collapse:collapse; }
.versus th,.versus td{ padding:var(--space-4) var(--space-5) var(--space-4) 0; text-align:left; vertical-align:top; border-bottom:var(--hairline) solid var(--pf-border); }
.versus thead th{ font:var(--type-label-weight) var(--type-label-size)/var(--type-label-leading) var(--font-sans); color:var(--pf-fg-muted); border-bottom-color:var(--pf-border-input); }
.versus tbody th{ font-weight:var(--font-weight-medium); color:var(--pf-fg-secondary); width:28%; }
.versus td{ color:var(--pf-fg-secondary); }
.versus .versus__us{ padding-left:var(--space-5); background:var(--pf-primary-soft); color:var(--pf-on-primary-soft); font-weight:var(--font-weight-semibold); }

/* ============================================================
   T3 / T5 · THREE FACTS
   ============================================================ */
.factrow{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4); }
@media (min-width:900px){ .factrow{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grid-desktop-gutter); } }
.factrow > li{ padding:var(--space-6); }
.factrow__title{ margin:0 0 var(--space-2); font:var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-leading) var(--font-display); letter-spacing:var(--type-h3-tracking); color:var(--pf-fg); }
.factrow p{ margin:0; color:var(--pf-fg-secondary); }

/* ============================================================
   T1 + T2 · WHO BUILDS IT, AND THE DATA PROMISE
   ============================================================ */
.trust{ display:grid; gap:var(--space-10); align-items:start; }
@media (min-width:1024px){ .trust{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--space-16); } }
.builder{ max-width:40rem; display:flex; flex-direction:column; gap:var(--space-3); }
.builder__words{ margin:0; font:var(--type-h3-weight) var(--type-h3-size)/1.45 var(--font-display); letter-spacing:var(--type-h3-tracking); color:var(--pf-fg); }
.builder__credentials{ margin:0; font-weight:var(--font-weight-medium); color:var(--pf-fg); }
/* The school takes the Volt underline (.hl), kept on one line and a touch
   heavier so the Volt reads on a light surface. */
.builder__credentials .hl{ white-space:nowrap; text-decoration-thickness:3px; text-underline-offset:4px; }
.builder__support{ margin:0; color:var(--pf-fg-secondary); }
.builder__links{ gap:0 var(--space-6); }
.promise{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-4); padding:var(--space-6); box-shadow:var(--pf-shadow-md); }
.promise__icon{ display:grid; place-items:center; width:44px; height:44px; border-radius:var(--radius-md); background:var(--pf-primary-soft); color:var(--pf-on-primary-soft); }
.promise__words{ margin:0; font:var(--type-h4-weight) var(--type-h4-size)/1.5 var(--font-sans); color:var(--pf-fg); }

/* ============================================================
   M10 · PRICING
   What's free in one card, the three packs beside it: the app's own pack
   cards, the price in mono, "Recommended" as the accent chip.
   ============================================================ */
.pricing{ display:grid; gap:var(--space-6); align-items:start; }
@media (min-width:1024px){ .pricing{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-10); } }
.pricing__free{ display:flex; flex-direction:column; gap:var(--space-4); padding:var(--space-6); }
.pricing__freehead{ display:flex; align-items:baseline; gap:var(--space-3); margin:0; font:var(--type-h4-weight) var(--type-h4-size)/1.2 var(--font-sans); color:var(--pf-fg-secondary); }
.pricing__zero{ font:var(--type-data-lg-weight) var(--type-data-lg-size)/var(--type-data-lg-leading) var(--font-mono); letter-spacing:var(--type-data-lg-tracking); color:var(--pf-fg); }
.freelist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.freelist li{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3); padding:var(--space-3) 0; border-top:var(--hairline) solid var(--pf-border); color:var(--pf-fg); }
.freelist .ic{ margin-top:3px; color:var(--pf-primary-text); }
.pricing__after{ margin:0; font-size:var(--type-body-sm-size); line-height:var(--type-body-sm-leading); color:var(--pf-fg-secondary); }
.pricing__packs{ display:flex; flex-direction:column; gap:var(--space-4); }
.pricing__packs p{ margin:0; }
.packs{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-3); }
@media (min-width:640px){ .packs{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); } }
/* "Recommended" hangs on the selected card's top edge, so the three prices
   sit on one line. */
.packcard{ position:relative; padding:var(--space-5); }
.packcard .pack{ gap:var(--space-2); }
.packcard .pack__name .chip{ position:absolute; top:0; left:var(--space-5); transform:translateY(-50%); }
.packcard .pack__price{ font-size:var(--type-data-lg-size); }
.packs__note{ font-weight:var(--font-weight-semibold); color:var(--pf-fg); }
@media (max-width:639.98px){ .packcard .pack__price{ font-size:var(--type-h3-size); } .packcard .pack__name .chip{ left:auto; right:var(--space-4); } }

/* ============================================================
   M11 · FAQ
   ============================================================ */
.faq{ display:grid; gap:var(--space-8); align-items:start; }
@media (min-width:1024px){ .faq{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--space-16); } }
.faq__list{ display:flex; flex-direction:column; gap:var(--space-2); }
.qa{ border:var(--hairline) solid var(--pf-border); border-radius:var(--radius-lg); background:var(--pf-surface-raised); box-shadow:var(--pf-shadow-xs); }
.qa summary{
  list-style:none; display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  min-height:var(--hit-min); padding:var(--space-4) var(--space-5); cursor:pointer; border-radius:var(--radius-lg);
  font:var(--font-weight-semibold) var(--type-body-lg-size)/1.4 var(--font-sans); color:var(--pf-fg);
  transition:background-color var(--duration-sm) var(--ease-standard);
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary:hover{ background:var(--pf-surface-sunken); }
.qa summary:focus-visible{ outline:var(--focus-ring-width) solid var(--pf-focus); outline-offset:var(--focus-ring-offset); }
.qa__chev{ color:var(--pf-fg-muted); transition:transform var(--duration-md) var(--ease-snap); }
.qa[open] .qa__chev{ transform:rotate(180deg); }
.qa p{ margin:0; padding:0 var(--space-5) var(--space-5); max-width:var(--container-prose); color:var(--pf-fg-secondary); }
.qa[open] p{ animation:pf-align-in var(--duration-md) var(--ease-enter) both; }
.qa a{ color:var(--pf-link); text-underline-offset:3px; }

/* ============================================================
   M12 · THE CLOSE
   The second Ink field, with the reversed symbol set large and cropped:
   the stem and bowl as a structural shape, not a watermark.
   ============================================================ */
.close{ padding-block:var(--space-20); overflow:hidden; }
@media (min-width:1024px){ .close{ padding-block:var(--space-24); } }
.close__inner{ position:relative; display:flex; flex-direction:column; gap:var(--space-5); }
.close__title{
  margin:0; max-width:18ch; color:var(--color-white);
  font:var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-leading) var(--font-display);
  font-stretch:var(--type-display-lg-width); letter-spacing:var(--type-display-lg-tracking);
}
.close__title .hero__line:nth-child(2){ color:var(--color-cobalt-200); }
.close__body{ margin:0; max-width:36rem; font-size:var(--type-body-lg-size); line-height:var(--type-body-lg-leading); color:var(--color-steel-300); }
.close .hero__actions{ margin-top:var(--space-3); }
.close__sym{ position:absolute; z-index:-1; right:-6%; bottom:-28%; width:min(52vw,560px); height:auto; opacity:.9; pointer-events:none; }
.close__sym rect{ fill:var(--color-ink-800); }
.close__sym path{ fill:var(--color-ink-700); }
@media (max-width:767px){ .close__sym{ width:80vw; right:-30%; bottom:-20%; } }

/* ============================================================
   FOOTER
   The endorsed lockup (§3: the footer carries "by Stark Dynamics"), at
   56px so the endorsement stays 11px tall.
   ============================================================ */
.site-foot{ padding-block:var(--space-16) var(--space-10); background:var(--pf-surface); border-top:var(--hairline) solid var(--pf-border); }
.site-foot__top{ display:grid; gap:var(--space-10); }
@media (min-width:1024px){ .site-foot__top{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); } }
.site-foot__brand .logo{ --logo-h:56px; }
.site-foot__brand .wordmark{ display:inline-flex; }
.site-foot__line{ margin:var(--space-4) 0 0; max-width:24rem; font-size:var(--type-body-sm-size); line-height:var(--type-body-sm-leading); color:var(--pf-fg-secondary); }
.site-foot__cols{ display:grid; gap:var(--space-8); grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (min-width:768px){ .site-foot__cols{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.site-foot h2{
  margin:0 0 var(--space-3); color:var(--pf-fg-muted);
  font:var(--type-overline-weight) var(--type-overline-size)/var(--type-overline-leading) var(--font-sans);
  font-stretch:var(--type-overline-width); letter-spacing:var(--type-overline-tracking); text-transform:uppercase;
}
.site-foot ul{ list-style:none; margin:0; padding:0; }
.site-foot li a{ display:inline-flex; align-items:center; min-height:36px; font-size:var(--type-body-sm-size); color:var(--pf-fg-secondary); text-decoration:none; }
.site-foot li a:hover{ color:var(--pf-fg); text-decoration:underline; text-underline-offset:4px; }
.site-foot li a[aria-current="page"]{ color:var(--pf-fg); font-weight:var(--font-weight-semibold); }
.site-foot li a:focus-visible{ outline:var(--focus-ring-width) solid var(--pf-focus); outline-offset:var(--focus-ring-offset); border-radius:var(--radius-xs); }
.site-foot__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-3); margin-top:var(--space-12); padding-top:var(--space-5); border-top:var(--hairline) solid var(--pf-border); font-size:var(--type-body-sm-size); color:var(--pf-fg-muted); }
.site-foot__legal p{ margin:0; }
.site-foot__copy{ font-family:var(--font-mono); font-size:var(--type-code-size); }
.site-foot--slim{ padding-block:var(--space-6); }
.site-foot--slim .site-foot__legal{ margin-top:0; padding-top:0; border-top:0; }

/* ============================================================
   INTERIOR PAGES
   Pricing, about, contact, the legal pages, 404. The head sits on the
   surface with the hero's grid behind it, faintly: Ink is for the moments
   that start work (the home hero and the closes), not every page title.
   ============================================================ */
.phead{ position:relative; isolation:isolate; padding-block:var(--space-16) var(--space-12); background:var(--pf-surface); border-bottom:var(--hairline) solid var(--pf-border); overflow:hidden; }
@media (min-width:1024px){ .phead{ padding-block:var(--space-20) var(--space-16); } }
.phead::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:repeating-linear-gradient(to right, transparent 0 calc(8.3333% - 1px), var(--pf-border) calc(8.3333% - 1px) 8.3333%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0, transparent 90%); mask-image:linear-gradient(to bottom, #000 0, transparent 90%);
  opacity:.7;
}
.phead .wrap{ display:flex; flex-direction:column; gap:var(--space-5); }
.phead__overline{
  margin:0; color:var(--pf-primary-text);
  font:var(--type-overline-weight) var(--type-overline-size)/var(--type-overline-leading) var(--font-sans);
  font-stretch:var(--type-overline-width); letter-spacing:var(--type-overline-tracking); text-transform:uppercase;
}
.phead__title{
  margin:0; max-width:20ch; color:var(--pf-fg);
  font:var(--type-display-lg-weight) var(--type-display-lg-size)/var(--type-display-lg-leading) var(--font-display);
  font-stretch:var(--type-display-lg-width); letter-spacing:var(--type-display-lg-tracking);
}
.phead__lede{ margin:0; max-width:42rem; font-size:var(--type-body-lg-size); line-height:var(--type-body-lg-leading); color:var(--pf-fg-secondary); }
.phead__meta{ margin:0; font:var(--type-data-weight) var(--type-data-size)/var(--type-data-leading) var(--font-mono); color:var(--pf-fg-muted); }
.phead__lede a{ color:var(--pf-link); text-underline-offset:3px; }

/* ---------- the terms, as rows ----------
   Each rule gets a row: what it is on the left, the plain sentence on the
   right. A definition list, not a feature grid. */
.terms{ margin:0; }
.terms__row{ display:grid; gap:var(--space-2) var(--space-12); padding-block:var(--space-6); border-top:var(--hairline) solid var(--pf-border); }
@media (min-width:900px){ .terms__row{ grid-template-columns:minmax(0,4fr) minmax(0,8fr); } }
.terms dt{ font:var(--type-h4-weight) var(--type-h4-size)/var(--type-h4-leading) var(--font-display); letter-spacing:var(--type-h4-tracking); color:var(--pf-fg); }
.terms dd{ margin:0; max-width:var(--container-prose); color:var(--pf-fg-secondary); }
.terms dd p{ margin:0; }
.terms dd p + p{ margin-top:var(--space-3); }

/* ---------- about ---------- */
.reasons{ list-style:none; margin:0; padding:0; display:grid; gap:var(--space-4); }
@media (min-width:900px){ .reasons{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--grid-desktop-gutter); } }
.reasons > li{ display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-6); }
.reasons h3{ margin:0; font:var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-leading) var(--font-display); letter-spacing:var(--type-h3-tracking); color:var(--pf-fg); }
.reasons p{ margin:0; color:var(--pf-fg-secondary); }
.reasons__icon{ display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius-md); background:var(--pf-primary-soft); color:var(--pf-on-primary-soft); }
.about-lockup{ display:flex; padding:var(--space-8); border-radius:var(--radius-2xl); background:var(--color-ink-900); --logo-stem:var(--color-white); --logo-bowl:var(--color-volt-400); --logo-endorse:var(--color-steel-300); margin-bottom:var(--space-8); width:fit-content; }
.about-lockup .logo{ --logo-h:72px; }

/* A fact sheet: label, then value, on one ruled row each. */
.facts{ margin:0; max-width:48rem; }
.facts > div{ display:grid; gap:var(--space-1) var(--space-8); padding-block:var(--space-4); border-top:var(--hairline) solid var(--pf-border); }
@media (min-width:640px){ .facts > div{ grid-template-columns:12rem minmax(0,1fr); } }
.facts dt{ font:var(--type-label-weight) var(--type-label-size)/1.6 var(--font-sans); color:var(--pf-fg-muted); }
.facts dd{ margin:0; color:var(--pf-fg); }
.clause a,.inshort a,.terms a,.facts a{ color:var(--pf-link); text-underline-offset:3px; }

/* ---------- contact ---------- */
.mailto{
  display:inline-flex; align-items:center; gap:var(--space-3); width:fit-content; max-width:100%;
  font:var(--type-display-md-weight) var(--type-display-md-size)/1.15 var(--font-display); font-stretch:var(--type-display-md-width);
  letter-spacing:var(--type-display-md-tracking); color:var(--pf-primary-text);
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:8px; text-decoration-color:var(--pf-border-input);
  overflow-wrap:anywhere;
}
.mailto:hover{ text-decoration-color:currentColor; }
.mailto:focus-visible{ outline:var(--focus-ring-width) solid var(--pf-focus); outline-offset:var(--focus-ring-offset); border-radius:var(--radius-xs); }
.mailto .ic{ width:32px; height:32px; }

/* ---------- the legal pages ----------
   A contents list beside the text from lg, the text at reading measure, and
   "In short" first: the five sentences most people will actually read. */
.legal{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--space-10); align-items:start; }
@media (min-width:1024px){ .legal{ grid-template-columns:minmax(0,3fr) minmax(0,9fr); gap:var(--space-16); } }
.toc{ font-size:var(--type-body-sm-size); }
@media (min-width:1024px){ .toc{ position:sticky; top:var(--space-6); } }
.toc__title{
  margin:0 0 var(--space-3); color:var(--pf-fg-muted);
  font:var(--type-overline-weight) var(--type-overline-size)/var(--type-overline-leading) var(--font-sans);
  font-stretch:var(--type-overline-width); letter-spacing:var(--type-overline-tracking); text-transform:uppercase;
}
.toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc; }
.toc li{ counter-increment:toc; }
.toc a{ display:grid; grid-template-columns:2rem minmax(0,1fr); padding-block:var(--space-1); color:var(--pf-fg-secondary); text-decoration:none; }
.toc a::before{ content:counter(toc, decimal-leading-zero); font-family:var(--font-mono); color:var(--pf-fg-muted); font-variant-numeric:tabular-nums; }
.toc a:hover{ color:var(--pf-fg); text-decoration:underline; text-underline-offset:4px; }
.toc a:focus-visible{ outline:var(--focus-ring-width) solid var(--pf-focus); outline-offset:var(--focus-ring-offset); border-radius:var(--radius-xs); }
.legal__body{ max-width:46rem; counter-reset:clause; }
.inshort{
  margin:0 0 var(--space-12); padding:var(--space-6);
  background:var(--pf-surface-raised); border:var(--hairline) solid var(--pf-border);
  border-radius:var(--radius-lg); box-shadow:var(--pf-shadow-sm);
}
.inshort h2{ margin:0 0 var(--space-3); font:var(--type-h3-weight) var(--type-h3-size)/var(--type-h3-leading) var(--font-display); color:var(--pf-fg); letter-spacing:var(--type-h3-tracking); }
.inshort ul{ margin:0; padding-left:var(--space-5); }
.inshort li{ margin-top:var(--space-2); color:var(--pf-fg); }
.inshort li::marker{ color:var(--pf-primary-text); }
.clause{ scroll-margin-top:var(--space-6); }
.clause + .clause{ margin-top:var(--space-12); }
.clause > h2{
  counter-increment:clause; display:grid; grid-template-columns:2.75rem minmax(0,1fr); align-items:baseline; margin:0 0 var(--space-4);
  font:var(--type-h2-weight) var(--type-h2-size)/var(--type-h2-leading) var(--font-display); letter-spacing:var(--type-h2-tracking);
}
.clause > h2::before{ content:counter(clause, decimal-leading-zero); font:var(--type-data-weight) var(--type-data-size)/1 var(--font-mono); color:var(--pf-primary-text); font-variant-numeric:tabular-nums; }
.clause > :not(h2){ margin-left:2.75rem; }
.clause h3{ margin:var(--space-6) 0 var(--space-2); font:var(--type-h4-weight) var(--type-body-size)/1.4 var(--font-sans); color:var(--pf-fg); }
.clause p,.clause li{ color:var(--pf-fg-secondary); }
.clause p{ margin:0 0 var(--space-4); }
.clause ul{ margin:0 0 var(--space-4); padding-left:var(--space-5); }
.clause li + li{ margin-top:var(--space-2); }
.clause blockquote{ margin:0 0 var(--space-4); padding:var(--space-4) var(--space-5); border-radius:var(--radius-md); background:var(--pf-primary-soft); font-weight:var(--font-weight-medium); color:var(--pf-fg); }
.clause table{ width:100%; margin:0 0 var(--space-4); border-collapse:collapse; font-size:var(--type-body-sm-size); }
.clause th{ padding:var(--space-2) var(--space-3) var(--space-2) 0; text-align:left; font:var(--type-overline-weight) var(--type-overline-size)/1.4 var(--font-sans); letter-spacing:var(--type-overline-tracking); text-transform:uppercase; color:var(--pf-fg-muted); border-bottom:var(--hairline) solid var(--pf-border-input); }
.clause td{ padding:var(--space-3) var(--space-3) var(--space-3) 0; vertical-align:top; color:var(--pf-fg-secondary); border-bottom:var(--hairline) solid var(--pf-border); }
.clause td:first-child{ color:var(--pf-fg); font-weight:var(--font-weight-medium); }
@media (max-width:639px){
  .clause .table-wrap{ overflow-x:auto; }
  .clause table{ min-width:520px; }
  .clause > :not(h2){ margin-left:0; }
}

/* ---------- 404 and the soon page ---------- */
.lost{ position:relative; isolation:isolate; padding-block:var(--space-20) var(--space-24); }
.lost .wrap{ display:flex; flex-direction:column; gap:var(--space-5); }
.lost .cluster{ margin-top:var(--space-3); gap:var(--space-3) var(--space-6); }
.lost .phead__lede a{ color:var(--pf-link); }

/* ============================================================
   MOTION (brand-identity.md §7)
   Every duration, easing and distance is a v3 token, so tokens.css's
   reduced-motion block (zero distances, short fades) and the global rule
   (animations end at their final state) apply without a rule here.

   1 · Page entry, "align in": the hero's blocks rise into place 40ms apart,
       and the headline's width opens from 100% to 112%.
   3 · "Strengths first": in the product image and the fit, matched
       requirements snap into place; close and to-address ones settle in
       200ms later, slower and softer, with no overshoot.
   ============================================================ */
@keyframes site-width-in{ from{ font-stretch:100%; } }
@keyframes site-grow{ from{ transform:scaleX(0); } }

.hero__copy > *{ animation:pf-align-in var(--duration-md) var(--ease-enter) both; }
.hero__copy > :nth-child(2){ animation-delay:calc(1 * var(--duration-stagger)); }
.hero__copy > :nth-child(3){ animation-delay:calc(2 * var(--duration-stagger)); }
.hero__copy > :nth-child(4){ animation-delay:calc(3 * var(--duration-stagger)); }
.hero__copy > :nth-child(n+5){ animation-delay:calc(4 * var(--duration-stagger)); }
.hero__title{ animation:pf-align-in var(--duration-md) var(--ease-enter) both, site-width-in 700ms var(--ease-enter) 80ms both; }

.product__jd,.product--post .product__idea{ animation:pf-align-in var(--duration-lg) var(--ease-enter) 120ms both; }
.product__snap{ animation:pf-slide-snap var(--duration-lg) var(--ease-snap) both; animation-delay:calc(240ms + var(--i) * var(--duration-stagger)); }
.product__settle{ animation:pf-settle var(--duration-lg) var(--ease-standard) both; animation-delay:calc(440ms + var(--i) * var(--duration-stagger)); }
.product__lock{ animation:pf-slide-snap var(--duration-lg) var(--ease-snap) 600ms both; }
.product__doc{ animation:pf-align-in var(--duration-lg) var(--ease-enter) 360ms both; }
.product__fit .fitbar > span{ transform-origin:left center; animation:site-grow 600ms var(--ease-enter) 760ms both; }
.product__lines mark{ transition:background-color var(--duration-lg) var(--ease-standard); }

/* Scroll reveals, on pages with body.has-motion (§7 pattern 1 at section
   scale): as a block scrolls into view it rises --motion-distance-lg into
   place, tied to the scroll, so anything on screen is always at its final
   state. Siblings follow a little later in the range, in reading order. The
   fit plays pattern 3: matched rows snap, close and to-address rows settle
   after them. CSS scroll-driven animations, so still no JavaScript; without
   them, and for anyone who asks for reduced motion, the page simply shows.
   (Scroll-triggered animations, timeline-trigger, were tried 2026-10-14 and
   left some blocks paused at opacity 0 in Chrome; a reveal must never be
   able to hide the page.) */
@keyframes site-reveal{ from{ opacity:0; transform:translateY(var(--motion-distance-lg)); } }
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .has-motion main > .section :is(.eyebrow, .s-title, .s-lede, .s-strong, .split__body, .step, .vs tbody tr, .vs__close, .fitdemo__sum, .gaprow, .fitgroup__title, .fitdemo__more, .iq, .fan, .voice__pane, .voice__verdict, .pair__card, .factrow > li, .builder, .promise, .pricing__free, .packcard, .packs__note, .qa),
    .has-motion .close :is(.close__title, .close__body, .hero__actions){
      animation:site-reveal linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 22%;
    }
    .has-motion main > .section .gaprow.req--matched{ animation-name:pf-slide-snap; }
    .has-motion main > .section :is(.gaprow--close, .gaprow--to-address){ animation-name:pf-settle; animation-range:entry 10% cover 30%; }
    .has-motion main > .section :is(.s-lede, .step:nth-child(2), .packcard:nth-child(2), .qa:nth-child(2), .iq:nth-child(2), .fan--post, .voice__pane--us, .factrow > li:nth-child(2), .promise),
    .has-motion .close .close__body{ animation-range:entry 4% cover 26%; }
    .has-motion main > .section :is(.s-strong, .step:nth-child(3), .packcard:nth-child(3), .qa:nth-child(3), .iq:nth-child(3), .fan--thread, .factrow > li:nth-child(3)),
    .has-motion .close .hero__actions{ animation-range:entry 8% cover 30%; }
  }
}

/* Reduced motion: final states show immediately (§7). tokens.css already
   ends every animation at once; this drops the stagger delays too, so
   nothing waits to appear. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-delay:0s !important; }
}

/* 4 · Hover, "lean and lock": a card a reader can act on lifts 2px and one
   elevation step. Only where motion is welcome. */
@media (prefers-reduced-motion:no-preference){
  .packcard{ transition:transform var(--duration-sm) var(--ease-standard), box-shadow var(--duration-sm) var(--ease-standard), border-color var(--duration-sm) var(--ease-standard); }
  .packcard:hover{ transform:translateY(-2px); box-shadow:var(--pf-shadow-md); }
  .packcard.card--selected:hover{ box-shadow:0 0 0 1px var(--pf-primary), var(--pf-shadow-md); }
}

/* ============================================================
   DESIGN DRAFT MARKERS
   body.is-draft only. Anything carrying [data-sample] is illustrative and
   must be replaced by real output before launch (gtm.md: one fabricated
   example is unrecoverable). Removing .is-draft is the deliberate act that
   says it has been. Amber, as a thing still to address; never red.
   ============================================================ */
.is-draft [data-sample]{ outline:1.5px dashed var(--pf-warning-border); outline-offset:6px; }
.draftbar{
  padding:var(--space-2) var(--wrap-pad);
  background:var(--pf-warning-bg); color:var(--pf-warning);
  border-bottom:var(--hairline) solid var(--pf-warning-border);
  font:var(--type-label-weight) var(--type-label-size)/1.45 var(--font-sans); text-align:center;
}
.draftbar p{ margin:0; }