/* Crew by FIFT Studio · site styles (CREW-SITE round 3.1, the elegance pass, Oct 2026).
   Built on the FIFT Design Rules (fift-design 8.1.0, RULES.md): every value comes from the tokens in /fift.css
   (a verbatim copy of fift-design dist/web/fift.css, loaded first). Corners from the ladder, continuous and concentric;
   space on the 4 pt grid; one hero size, one display size; neutrals carry the page and cherry is the one accent;
   three depth levels; springs for motion. Check: python3 ~/dev/fift-design/check/fift_rules.py scan site/ */

/* ---------- site roles, mapped onto the FIFT tokens ---------- */
:root {
  --ground: var(--fift-ground-base);
  --surface: var(--fift-surface);
  --surface-hi: var(--fift-surface-hi);
  --fill: var(--fift-fill);
  --text: var(--fift-text);
  --text-2: var(--fift-secondary);
  --text-3: var(--fift-tertiary);
  --hairline: var(--fift-hairline);
  --accent: var(--fift-crew-accent);
  --accent-fill: var(--fift-crew-accent-fill);
  --accent-text: var(--fift-chief-ink);
  --link: var(--fift-cherry);
  --focus: var(--fift-focus);
  --glass: var(--fift-glass);
  /* the one dark moment (the hook): the same values in both modes */
  --night: var(--fift-ink);
  --night-text: var(--fift-ivory-night);
  --night-2: color-mix(in srgb, var(--fift-ivory-night) 80%, transparent);
  --night-3: color-mix(in srgb, var(--fift-ivory-night) 58%, transparent);
  --night-4: color-mix(in srgb, var(--fift-ivory-night) 10%, transparent);
  --f-ui: var(--fift-type-family-interface);
  --f-num: var(--fift-type-family-number);
  --f-mono: var(--fift-type-family-mono);
  --max: 1180px;
  --gutter: var(--fift-space-16);
  --section: var(--fift-space-section-compact);
}
@media (min-width: 641px) { :root { --gutter: var(--fift-space-40); --section: var(--fift-space-section); } }
@media (prefers-color-scheme: dark) {
  :root { --link: var(--fift-text); --night: var(--fift-ground-base); }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--fift-space-80); }
body {
  margin: 0; background: var(--ground); color: var(--text);
  font: var(--fift-type-weight-regular) var(--fift-type-size-body)/var(--fift-type-leading-body) var(--f-ui);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent-fill); }
h1, h2, h3, h4 { margin: 0; font-weight: var(--fift-type-weight-semibold); line-height: var(--fift-type-leading-title); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
code { font-family: var(--f-mono); }
.skip { position: absolute; left: var(--fift-space-12); top: calc(-1 * var(--fift-space-64)); z-index: 100; background: var(--surface); color: var(--text); padding: var(--fift-space-8) var(--fift-space-16); border-radius: var(--fift-corner-12); corner-shape: squircle; }
.skip:focus { top: var(--fift-space-12); }
main:focus { outline: none; }
.only-dark { display: none !important; }
@media (prefers-color-scheme: dark) { .only-dark { display: block !important; } .only-light { display: none !important; } }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.eyebrow { font: var(--fift-type-weight-semibold) var(--fift-type-size-note)/var(--fift-type-leading-tight) var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); }
.lede { font-size: var(--fift-type-web-lede); line-height: var(--fift-type-leading-body); color: var(--text-2); max-width: var(--fift-type-measure-body); }
.muted { color: var(--text-3); }
.num { font-family: var(--f-num); font-variant-numeric: lining-nums tabular-nums; font-weight: var(--fift-type-weight-medium); letter-spacing: -0.02em; }
[hidden] { display: none !important; }
.sr-only, .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* one display voice: every section headline shares one size; the page has one hero */
.display, .sec-head h2, .turn-h, .pr h3, .hook-line .big, .close h2, .ph h1, .legal h1, .prose h1, .nf h1, .wi-hero h1 {
  font-size: var(--fift-type-web-display); font-weight: var(--fift-type-weight-bold); letter-spacing: -0.03em; line-height: var(--fift-type-leading-title);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--fift-space-8);
  min-height: var(--fift-button-height-compact); padding: 0 var(--fift-space-24); border-radius: var(--fift-radius-capsule); border: 0;
  font: var(--fift-type-weight-semibold) var(--fift-type-size-body)/1 var(--f-ui); text-decoration: none; cursor: pointer;
  transition: transform var(--fift-motion-duration-press) var(--fift-ease-snappy), background-color var(--fift-motion-duration-press) var(--fift-ease-smooth);
}
.btn-cherry { color: var(--fift-action-text); background: var(--fift-action); box-shadow: var(--fift-shadow-prominent); }
.btn-cherry:hover { transform: translateY(-1px); }
.btn-cherry:active { transform: scale(.98); }
.btn-ghost { color: var(--text); background: var(--fill); }
.btn-ghost:hover { background: color-mix(in srgb, var(--fill) 50%, var(--fift-selection)); }
.btn-sm { min-height: var(--fift-space-40); padding: 0 var(--fift-space-16); font-size: var(--fift-type-size-note); }
.btn .arr { transition: transform var(--fift-motion-duration-press) var(--fift-ease-snappy); }
.btn:hover .arr { transform: translateX(3px); }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--fift-space-16); flex-wrap: wrap;
  padding: var(--fift-space-8) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  background: color-mix(in srgb, var(--ground) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.lockup { display: inline-flex; align-items: center; gap: var(--fift-space-8); color: var(--text); text-decoration: none; min-height: 44px; }
.lockup img { width: 28px; height: 28px; }
.lockup b { font-size: var(--fift-type-size-body); font-weight: var(--fift-type-weight-semibold); letter-spacing: -0.02em; }
.lockup span { font-size: var(--fift-type-size-note); color: var(--text-3); }
.site-nav { display: flex; align-items: center; gap: var(--fift-space-4); margin-left: auto; }
.site-nav a { color: var(--text-2); text-decoration: none; font-size: var(--fift-type-size-note); padding: var(--fift-space-12); border-radius: var(--fift-radius-capsule); white-space: nowrap; transition: color var(--fift-motion-duration-press) var(--fift-ease-smooth); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); }
.site-nav a.nav-cta { color: var(--fift-action-text); background: var(--fift-action); margin-left: var(--fift-space-8); padding: var(--fift-space-8) var(--fift-space-16); font-weight: var(--fift-type-weight-semibold); }
@media (max-width: 760px) {
  .top { gap: var(--fift-space-8); flex-wrap: nowrap; }
  .lockup span { display: none; }
  .site-nav { gap: 0; }
  .site-nav a { padding: var(--fift-space-12) var(--fift-space-8); }
  .site-nav a.nav-cta { margin-left: var(--fift-space-4); padding: var(--fift-space-8) var(--fift-space-12); }
}
@media (max-width: 440px) { .site-nav a[href="/help"] { display: none; } .lockup b { display: none; } .lockup { min-width: 44px; } }

/* ---------- sections ---------- */
.sec { padding: var(--section) 0; position: relative; }
.sec-head { max-width: 760px; margin: 0 auto var(--fift-space-64); text-align: center; }
.sec-head h2 { margin: var(--fift-space-16) auto 0; max-width: var(--fift-type-measure-title); }
.sec-head .lede { margin: var(--fift-space-24) auto 0; }
.sec-head.left { margin-left: 0; text-align: left; }
.sec-head.left .lede, .sec-head.left h2 { margin-left: 0; }
.center-note { text-align: center; margin-top: var(--fift-space-32); }

/* ---------- the hook: the one dark moment, loud, then it settles ---------- */
.hook { position: relative; isolation: isolate; overflow: clip; color: var(--night-text); background: radial-gradient(70% 55% at 75% 8%, var(--fift-face-cherry-deep) 0%, transparent 70%), var(--night); padding: var(--fift-space-64) 0 var(--fift-space-96); }
.wall { position: absolute; inset: -10% -6% 0; z-index: -1; pointer-events: none; perspective: 1400px; -webkit-mask: linear-gradient(180deg, transparent 0%, black 18%, black 55%, transparent 92%); mask: linear-gradient(180deg, transparent 0%, black 18%, black 55%, transparent 92%); }
.wall-in { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--fift-space-16); transform: rotateX(28deg) rotateZ(-8deg) scale(1.15); transform-origin: 50% 0; opacity: .4; }
.tp { padding: var(--fift-space-12) var(--fift-space-16); border-radius: var(--fift-corner-12); corner-shape: squircle; background: var(--night-4); font: var(--fift-type-size-note)/1.6 var(--f-mono); color: var(--night-3); display: grid; }
.tp b { color: var(--night-2); font-weight: var(--fift-type-weight-semibold); margin-bottom: var(--fift-space-4); }
.tp span:nth-child(3n) { color: var(--fift-make-b); }
@media (prefers-reduced-motion: no-preference) { .wall-in { animation: drift 40s linear infinite alternate; } }
@keyframes drift { to { transform: rotateX(28deg) rotateZ(-8deg) scale(1.15) translateY(-120px); } }
.hook-k { font: var(--fift-type-weight-semibold) var(--fift-type-size-note)/var(--fift-type-leading-tight) var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--night-3); }
.hook h1 { margin-top: var(--fift-space-16); font-size: var(--fift-type-web-hero); font-weight: var(--fift-type-weight-bold); letter-spacing: -0.045em; line-height: 1; color: var(--night-text); }
.day { list-style: none; margin: var(--fift-space-40) 0 0; padding: 0; position: relative; height: 560px; }
.m { position: absolute; left: var(--x); top: var(--y); max-width: 288px; transform: rotate(var(--r)); display: grid; gap: var(--fift-space-4); padding: var(--fift-space-12) var(--fift-space-16); border-radius: var(--fift-corner-16); corner-shape: squircle; font-size: var(--fift-type-size-body); line-height: var(--fift-type-leading-tight); box-shadow: var(--fift-shadow-float); }
.mh { display: flex; gap: var(--fift-space-8); align-items: baseline; font-size: var(--fift-type-label); letter-spacing: .02em; }
.mh b { font-weight: var(--fift-type-weight-semibold); }
.mh time { opacity: .6; font-variant-numeric: tabular-nums; }
.m-you { background: var(--fift-cherry); color: var(--fift-ivory); border-radius: var(--fift-corner-16) var(--fift-corner-16) var(--fift-corner-4) var(--fift-corner-16); corner-shape: squircle; }
.m-you .mt { font-weight: var(--fift-type-weight-medium); }
.m-sys { background: color-mix(in srgb, var(--fift-ivory-night) 12%, var(--fift-ink)); color: var(--night-text); }
.m-sys .mh b { color: var(--fift-make-b); }
.m-term { background: color-mix(in srgb, var(--fift-ivory-night) 6%, var(--fift-ink)); color: var(--night-2); font: var(--fift-type-size-note)/1.45 var(--f-mono); }
.m-term .mh { font-family: var(--f-ui); color: var(--night-3); }
.m-term .mt::before { content: "› "; color: var(--fift-make-b); }
@media (prefers-reduced-motion: no-preference) {
  .m { animation: pop var(--fift-motion-duration-reveal) var(--fift-ease-snappy) both; animation-delay: calc(var(--i) * 110ms + 150ms); }
}
@keyframes pop { from { opacity: 0; transform: translateY(12px) rotate(var(--r)) scale(.96); } }
.tally { display: flex; flex-wrap: wrap; gap: var(--fift-space-8) var(--fift-space-32); margin-top: var(--fift-space-32); color: var(--night-3); font-size: var(--fift-type-size-body); }
.tally b { font-size: var(--fift-type-size-figure); color: var(--night-text); margin-right: var(--fift-space-4); }
.hook-line { margin-top: var(--fift-space-96); }
.hook-line .big { max-width: 24ch; color: var(--night-3); }
.hook-line .big em { font-style: normal; color: var(--night-text); }
.hook-line .sub { margin-top: var(--fift-space-24); max-width: var(--fift-type-measure-body); font-size: var(--fift-type-web-lede); color: var(--night-2); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .day { animation: settle linear both; animation-timeline: view(); animation-range: exit 0% exit 90%; }
  }
}
@keyframes settle { to { opacity: .1; filter: blur(6px); transform: scale(.97); } }
@media (max-width: 900px) {
  .day { height: auto; display: flex; flex-direction: column; gap: var(--fift-space-12); }
  .m { position: static; max-width: 86%; align-self: flex-start; }
  .m-you { align-self: flex-end; }
  .day li:nth-child(1), .day li:nth-child(5), .day li:nth-child(7), .day li:nth-child(8), .day li:nth-child(9), .day li:nth-child(12) { display: none; }
  .wall-in { grid-template-columns: repeat(3, 1fr); opacity: .2; }
  .hook-line { margin-top: var(--fift-space-64); }
}

/* ---------- hero (the turn and the film) ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; padding: var(--fift-space-64) 0 var(--section); text-align: center; }
.field { display: none; }
.turn.hero { background: linear-gradient(180deg, var(--night) 0, color-mix(in srgb, var(--fift-face-cherry-deep) 70%, var(--ground)) 90px, color-mix(in srgb, var(--fift-cherry) 16%, var(--ground)) 190px, var(--ground) 300px); padding-top: var(--fift-space-128); }
@media (min-width: 641px) { .turn.hero { padding-top: 240px; } }
.hero .eyebrow { display: inline-flex; align-items: center; gap: var(--fift-space-8); padding: var(--fift-space-4) var(--fift-space-12) var(--fift-space-4) var(--fift-space-4); border-radius: var(--fift-radius-capsule); background: var(--fill); color: var(--text-2); text-transform: none; letter-spacing: 0; font-weight: var(--fift-type-weight-medium); }
.hero .eyebrow img { width: 24px; height: 24px; }
.turn-h { margin-top: var(--fift-space-24); }
.tint, .tint2 { color: var(--accent); }
.hero .lede { margin: var(--fift-space-24) auto 0; }
.hero-cta { display: flex; gap: var(--fift-space-12); justify-content: center; flex-wrap: wrap; margin-top: var(--fift-space-32); }
.hero-fine { margin-top: var(--fift-space-16); font-size: var(--fift-type-size-note); color: var(--text-3); }
.hero-fine b { color: var(--text-2); font-weight: var(--fift-type-weight-semibold); }

/* today / with Crew */
.flip { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-auto-flow: column; gap: var(--fift-space-12) var(--fift-space-24); max-width: 760px; margin: var(--fift-space-48) auto 0; }
.flip svg { width: 100%; height: auto; padding: var(--fift-space-16); border-radius: var(--fift-corner-26); corner-shape: squircle; background: var(--surface); }
.flip .ln path { stroke: var(--hairline); stroke-width: 1.6; fill: none; }
.flip-a .ln path { stroke: color-mix(in srgb, var(--fift-cherry) 40%, transparent); stroke-dasharray: 3 4; }
.flip .ag { fill: var(--text-3); }
.flip .ag.al { fill: var(--fift-make-b); }
.flip .ag.ok { fill: var(--fift-verified); }
.flip .you { fill: var(--fift-cherry); }
.flip text { fill: var(--fift-ivory); font: var(--fift-type-weight-semibold) 12px var(--f-ui); text-anchor: middle; }
.flip .chief { fill: var(--surface); stroke: var(--accent); stroke-width: 1.6; }
.flip text.tc { fill: var(--text); }
.flip-l { font-size: var(--fift-type-size-note); color: var(--text-2); }
.flip-l b { display: block; color: var(--text); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 560px) { .flip { gap: var(--fift-space-8) var(--fift-space-12); } .flip svg { padding: var(--fift-space-8); border-radius: var(--fift-corner-16); corner-shape: squircle; } }

/* the stage: the film, lit from behind by the one ring (the one gradient on this screen) */
.stage-wrap { width: 100%; max-width: calc(var(--max) + 120px); margin: 0 auto; padding: 0 var(--gutter); }
.stage { position: relative; margin: var(--fift-space-48) auto 0; }
.halo { position: absolute; left: 50%; top: 46%; width: 124%; aspect-ratio: 2.1; transform: translate(-50%, -50%); z-index: -1; pointer-events: none; }
.halo::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 200deg, var(--fift-chief-b), var(--fift-grow-b), var(--fift-make-b), var(--fift-make-a), var(--fift-keep-a), var(--fift-keep-b), var(--fift-grow-a), var(--fift-chief-b));
  -webkit-mask: radial-gradient(closest-side, transparent 60%, black 72%, black 80%, transparent 96%);
          mask: radial-gradient(closest-side, transparent 60%, black 72%, black 80%, transparent 96%);
  opacity: .45;
}
.window { position: relative; border-radius: var(--fift-corner-32); corner-shape: squircle; overflow: hidden; background: var(--fift-ground-base); box-shadow: var(--fift-shadow-object); }
.window .poster img { aspect-ratio: 16 / 9; width: 100%; height: auto; object-fit: cover; }
.window .film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--fift-motion-duration-reveal) var(--fift-ease-smooth); }
.window .film.on { opacity: 1; }
.film-ctl {
  position: absolute; right: var(--fift-space-16); bottom: var(--fift-space-16); z-index: 2;
  display: inline-flex; align-items: center; gap: var(--fift-space-8); min-height: 36px; padding: 0 var(--fift-space-16) 0 var(--fift-space-12); border-radius: var(--fift-radius-capsule); border: 0;
  background: color-mix(in srgb, var(--fift-ink) 62%, transparent); color: var(--fift-ivory-night); font: var(--fift-type-weight-medium) var(--fift-type-size-note)/1 var(--f-ui); cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.film-ctl svg { width: 12px; height: 12px; }
.film-ctl[hidden] { display: none; }
.stage-cap { margin-top: var(--fift-space-24); font-size: var(--fift-type-size-note); color: var(--text-3); }
.stage-cap b { color: var(--text-2); font-weight: var(--fift-type-weight-semibold); }
@media (max-width: 640px) {
  .window { border-radius: var(--fift-corner-20); corner-shape: squircle; }
  .window .poster img { aspect-ratio: 4 / 5; }
  .halo { width: 150%; aspect-ratio: 1.1; }
  .stage-cap span { display: block; margin-top: var(--fift-space-4); }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .stage .window { transform-origin: 50% 100%; animation: tilt linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  }
}
@keyframes tilt { from { transform: perspective(1800px) rotateX(9deg) scale(.97); } to { transform: none; } }

/* ---------- four promises ---------- */
.pr { display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--fift-space-64); align-items: center; padding: var(--section) 0 0; }
.pr:nth-of-type(even) { grid-template-columns: 1.15fr 1fr; }
.pr:nth-of-type(even) .pr-cap { order: -1; }
.pr-n { font-size: var(--fift-type-size-body); color: var(--text-3); }
.pain { margin-top: var(--fift-space-16); font: var(--fift-type-size-body)/1.4 var(--f-mono); color: var(--text-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--fift-cherry) 70%, transparent); text-decoration-thickness: 2px; }
.pain span { text-decoration: none; display: inline-block; margin-right: var(--fift-space-8); font: var(--fift-type-weight-semibold) var(--fift-type-size-note)/1 var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--accent-text); vertical-align: 2px; }
.pr h3 { margin-top: var(--fift-space-16); max-width: 14ch; }
.pr-body { margin-top: var(--fift-space-24); color: var(--text-2); max-width: var(--fift-type-measure-body); }
.st { list-style: none; padding: 0; margin: var(--fift-space-24) 0 0; display: grid; gap: var(--fift-space-8); }
.st li { display: flex; gap: var(--fift-space-12); align-items: baseline; font-size: var(--fift-type-size-note); color: var(--text-2); }
.st li i { flex: none; width: 8px; height: 8px; border-radius: 50%; transform: translateY(-1px); background: var(--fift-verified); }
.st li.c-new i { background: var(--text); }
.st li.c-soon i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--text-3); }
.pr-cap { position: relative; margin: 0; }
.pr-cap picture { display: block; border-radius: var(--fift-corner-16); corner-shape: squircle; overflow: hidden; box-shadow: var(--fift-shadow-object); max-height: 560px; }
.pr-cap img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; object-position: top left; }
.pr-cap .tag { top: auto; bottom: var(--fift-space-16); right: var(--fift-space-16); }
.pr-cap.sm { padding: var(--fift-space-48); border-radius: var(--fift-corner-32); corner-shape: squircle; background: var(--fill); }
.pr-cap.sm picture { max-width: 480px; margin: 0 auto; border-radius: var(--fift-corner-20); corner-shape: squircle; }
.pr-cap.k-panel-live picture { max-width: 380px; max-height: 620px; }
.pr-cap.k-panel-live img { max-height: 620px; }
.pr-cap.k-panel-words picture { max-width: 440px; }
.pr-cap.k-allow-card picture { max-width: 600px; }
@media (max-width: 860px) {
  .pr, .pr:nth-of-type(even) { grid-template-columns: 1fr; gap: var(--fift-space-32); }
  .pr:nth-of-type(even) .pr-cap { order: 0; }
  .pr-cap.sm { padding: var(--fift-space-24); border-radius: var(--fift-corner-26); corner-shape: squircle; }
  .pr-cap picture, .pr-cap img, .pr-cap.k-panel-live picture, .pr-cap.k-panel-live img { max-height: 480px; }
}

/* tags on captures */
.tag { position: absolute; top: var(--fift-space-12); right: var(--fift-space-32); z-index: 1; font: var(--fift-type-weight-semibold) var(--fift-type-label)/1 var(--f-ui); letter-spacing: .04em; text-transform: uppercase; padding: var(--fift-space-4) var(--fift-space-8); border-radius: var(--fift-radius-capsule); color: var(--fift-ivory-night); background: color-mix(in srgb, var(--fift-ink) 58%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* ---------- your tools stay ---------- */
.kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fift-space-24); }
.kit-col { padding: var(--fift-space-32); border-radius: var(--fift-corner-26); corner-shape: squircle; background: var(--surface); }
.kit-col h3 { font-size: var(--fift-type-size-question); letter-spacing: -0.015em; }
.kit-col p { margin-top: var(--fift-space-12); color: var(--text-2); }
@media (min-width: 861px) and (max-width: 1100px) { .kit { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .kit { grid-template-columns: 1fr; gap: var(--fift-space-16); } .kit-col { padding: var(--fift-space-24); } }
.hood { max-width: 900px; margin: var(--fift-space-48) auto 0; padding: var(--fift-space-32); border-radius: var(--fift-corner-26); corner-shape: squircle; background: var(--fift-ink); color: var(--night-2); }
@media (prefers-color-scheme: dark) { .hood { background: var(--surface-hi); color: var(--text-2); } }
.hood h3 { font: var(--fift-type-weight-semibold) var(--fift-type-size-note)/var(--fift-type-leading-tight) var(--f-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--night-3); }
.hood ul { margin: var(--fift-space-16) 0 0; padding: 0; list-style: none; display: grid; gap: var(--fift-space-8); }
.hood li { position: relative; padding-left: var(--fift-space-20); max-width: var(--fift-type-measure-body); }
.hood li::before { content: "›"; position: absolute; left: 2px; color: var(--fift-verified); font-family: var(--f-mono); }
@media (prefers-color-scheme: light) { .hood li::before { color: var(--night-3); } }
.hood code { font-size: var(--fift-type-size-note); color: var(--night-text); background: var(--night-4); padding: 0 var(--fift-space-4); border-radius: var(--fift-corner-4); corner-shape: squircle; }
.hood a { color: var(--night-text); }
.first-h { margin: var(--fift-space-96) 0 var(--fift-space-24); text-align: center; font-size: var(--fift-type-web-title); }

/* steps */
.steps { counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fift-space-24); }
ol.steps { list-style: none; padding: 0; margin: 0; }
.step { padding: var(--fift-space-32); border-radius: var(--fift-corner-26); corner-shape: squircle; background: var(--surface); }
.step::before { counter-increment: s; content: counter(s); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font: var(--fift-type-weight-medium) var(--fift-type-size-body)/1 var(--f-num); color: var(--fift-action-text); background: var(--fift-action); }
.step h3, .step h4 { margin-top: var(--fift-space-20); font-size: var(--fift-type-size-question); letter-spacing: -0.015em; }
.step p { margin-top: var(--fift-space-8); color: var(--text-2); }
.steps.incl .step::before { content: ""; width: 12px; height: 12px; background: var(--accent); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: var(--fift-space-16); } .step { padding: var(--fift-space-24); } }

/* ---------- idea to company: five stage tabs ---------- */
.jr { display: grid; gap: var(--fift-space-24); }
.jr-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--fift-space-4); padding: var(--fift-space-4); border-radius: var(--fift-corner-20); corner-shape: squircle; background: var(--fill); }
.jr-tab { display: flex; align-items: center; justify-content: center; gap: var(--fift-space-8); min-height: 48px; padding: 0 var(--fift-space-8); border: 0; border-radius: var(--fift-corner-16); corner-shape: squircle; background: transparent; color: var(--text-2); font: var(--fift-type-weight-semibold) var(--fift-type-size-body)/1 var(--f-ui); cursor: pointer; transition: background-color var(--fift-motion-duration-press) var(--fift-ease-smooth), color var(--fift-motion-duration-press) var(--fift-ease-smooth); }
.jr-tab i { display: none; }
.jr-i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: var(--fift-type-size-note); color: var(--text-3); background: var(--fill); }
.jr-tab:hover { color: var(--text); }
.jr-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--fift-shadow-brand-card); }
.jr-tab[aria-selected="true"] .jr-i { background: var(--fift-action); color: var(--fift-action-text); }
.jr-stage { border-radius: var(--fift-corner-26); corner-shape: squircle; background: var(--surface); overflow: hidden; }
.jr-panel { display: grid; grid-template-columns: 1fr; }
.jr.ready .jr-panel[hidden] { display: none !important; }
.jr-panel:focus-visible { outline-offset: -4px; }
.jr-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fift-space-8) var(--fift-space-40); padding: var(--fift-space-32) var(--fift-space-40) var(--fift-space-8); align-items: start; }
.jr-text .eyebrow, .jr-text h3 { grid-column: 1; }
.jr-text h3 { margin-top: var(--fift-space-8); font-size: var(--fift-type-web-title); }
.jr-text p:not(.eyebrow) { grid-column: 2; grid-row: 1 / span 2; color: var(--text-2); }
.jr-text .st { grid-column: 2; margin-top: var(--fift-space-12); }
.jr-cap { position: relative; margin: 0; padding: var(--fift-space-24) var(--fift-space-40) var(--fift-space-40); }
.jr-cap picture { display: block; border-radius: var(--fift-corner-12); corner-shape: squircle; overflow: hidden; box-shadow: var(--fift-shadow-object); }
.jr-cap .tag { top: auto; bottom: var(--fift-space-48); right: var(--fift-space-48); }
@media (prefers-reduced-motion: no-preference) { .jr.ready .jr-panel.enter { animation: scin var(--fift-motion-duration-layout) var(--fift-ease-smooth) both; } }
@keyframes scin { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 900px) {
  .jr-tab { flex-direction: column; gap: var(--fift-space-4); min-height: 64px; padding: var(--fift-space-8) 0; font-size: var(--fift-type-size-note); }
  .jr-text { grid-template-columns: 1fr; padding: var(--fift-space-24) var(--fift-space-20) var(--fift-space-4); }
  .jr-text p:not(.eyebrow), .jr-text .st { grid-column: 1; grid-row: auto; margin-top: var(--fift-space-12); }
  .jr-cap { padding: var(--fift-space-16); }
  .jr-cap .tag { bottom: var(--fift-space-24); right: var(--fift-space-24); }
}

/* ---------- proof: themed, one number ---------- */
.proof { background: var(--surface); }
.proof .lede { color: var(--text-2); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fift-space-24); }
.stats:has(> .stat:only-child) { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; text-align: center; }
.stats:has(> .stat:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr); max-width: 820px; margin: 0 auto; }
.stat b { display: block; font-family: var(--f-num); font-weight: var(--fift-type-weight-medium); font-size: var(--fift-type-web-display); line-height: 1; letter-spacing: -0.03em; color: var(--text); font-variant-numeric: lining-nums tabular-nums; }
.stat b .u { font-style: normal; font-size: .42em; margin-left: var(--fift-space-4); color: var(--text-3); }
.stat span { display: block; margin-top: var(--fift-space-16); color: var(--text-2); }
.stat small { display: block; margin-top: var(--fift-space-8); color: var(--text-3); font-size: var(--fift-type-size-note); }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .stats:has(> .stat:nth-child(2):last-child) { grid-template-columns: 1fr; } }
.proof-note { margin-top: var(--fift-space-32); font-size: var(--fift-type-size-note); color: var(--text-3); text-align: center; }

/* ---------- pillars (security) ---------- */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fift-space-24); }
.pillar { padding: var(--fift-space-32) var(--fift-space-24); border-radius: var(--fift-corner-26); corner-shape: squircle; background: var(--surface); }
.pillar .ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text); background: var(--fill); }
.pillar .ic svg { width: 16px; height: 16px; }
.pillar h3, .pillar .h3 { margin-top: var(--fift-space-20); font-size: var(--fift-type-size-question); letter-spacing: -0.015em; line-height: var(--fift-type-leading-tight); }
.pillar p { margin-top: var(--fift-space-8); color: var(--text-2); }
@media (max-width: 980px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pillars { grid-template-columns: 1fr; gap: var(--fift-space-16); } }
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--fift-space-64); align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: var(--fift-space-32); } }

/* ---------- pricing ---------- */
.price-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--fift-space-24); max-width: 980px; margin: 0 auto; }
.price {
  position: relative; padding: var(--fift-space-40); border-radius: var(--fift-corner-32); corner-shape: squircle; overflow: hidden;
  color: var(--fift-ivory-night); background: linear-gradient(160deg, var(--fift-face-cherry-hi) 0%, var(--fift-cherry) 55%, var(--fift-face-cherry-deep) 100%);
  box-shadow: var(--fift-shadow-object);
}
.price .plan { display: flex; align-items: center; gap: var(--fift-space-12); font-weight: var(--fift-type-weight-semibold); }
.price .plan img { width: 32px; height: 32px; }
.price .amt { margin-top: var(--fift-space-24); display: flex; align-items: baseline; gap: var(--fift-space-12); }
.price .amt b { font: var(--fift-type-weight-medium) var(--fift-type-web-display)/1 var(--f-num); letter-spacing: -0.04em; }
.price .amt span, .price .terms { color: color-mix(in srgb, var(--fift-ivory-night) 82%, transparent); }
.price .terms { margin-top: var(--fift-space-12); }
.price ul { list-style: none; padding: 0; margin: var(--fift-space-24) 0 0; display: grid; gap: var(--fift-space-12); }
.price li { display: flex; gap: var(--fift-space-12); align-items: flex-start; }
.price li svg { flex: none; width: 20px; height: 20px; margin-top: var(--fift-space-4); color: color-mix(in srgb, var(--fift-ivory-night) 70%, transparent); }
.price .btn { margin-top: var(--fift-space-32); width: 100%; background: var(--fift-ivory); color: var(--fift-cherry); box-shadow: none; }
.price .btn:hover { transform: translateY(-1px); }
.price .fine { margin-top: var(--fift-space-16); font-size: var(--fift-type-size-note); color: color-mix(in srgb, var(--fift-ivory-night) 75%, transparent); text-align: center; }
.price .fine a { color: var(--fift-ivory-night); }
.price-side { display: grid; gap: var(--fift-space-24); }
.price-side .box { padding: var(--fift-space-24); border-radius: var(--fift-corner-26); corner-shape: squircle; background: var(--surface); }
.price-side h3 { font-size: var(--fift-type-size-question); letter-spacing: -0.015em; }
.price-side p { margin-top: var(--fift-space-8); color: var(--text-2); }
@media (max-width: 860px) { .price-wrap { grid-template-columns: 1fr; } .price { padding: var(--fift-space-32) var(--fift-space-24); } }
.fit { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--fift-space-24); max-width: 980px; margin: var(--fift-space-48) auto 0; }
.fit > div { padding: var(--fift-space-24); border-radius: var(--fift-corner-26); corner-shape: squircle; background: var(--fill); }
.fit h3 { font-size: var(--fift-type-size-body); }
.fit p { margin-top: var(--fift-space-8); color: var(--text-2); }
@media (max-width: 860px) { .fit { grid-template-columns: 1fr; gap: var(--fift-space-16); } }

/* ---------- FAQ: rows of one surface, the one place a hairline belongs ---------- */
.faq { max-width: 820px; margin: 0 auto; }
.faq details + details { border-top: 1px solid var(--hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--fift-space-20); padding: var(--fift-space-24) var(--fift-space-4); font-size: var(--fift-type-size-question); font-weight: var(--fift-type-weight-semibold); letter-spacing: -0.012em; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg) translate(-3px, -3px); transition: transform var(--fift-motion-duration-press) var(--fift-ease-snappy); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-3px, -3px); }
.faq details > div { padding: 0 var(--fift-space-4) var(--fift-space-24); color: var(--text-2); max-width: var(--fift-type-measure-body); }
.faq details > div p + p { margin-top: var(--fift-space-12); }

/* ---------- closing ---------- */
.close { text-align: center; padding: var(--section) 0; position: relative; }
.close .icon { width: 112px; height: 112px; margin: 0 auto; }
.close h2 { margin-top: var(--fift-space-32); }
.close .lede { margin: var(--fift-space-24) auto 0; }
.close .hero-cta { margin-top: var(--fift-space-32); }

/* ---------- inner pages ---------- */
.ph { position: relative; padding: var(--section) 0 var(--fift-space-48); }
.ph h1 { margin-top: var(--fift-space-16); max-width: var(--fift-type-measure-title); }
.ph .lede { margin-top: var(--fift-space-24); }
.ph.center { text-align: center; }
.ph.center h1, .ph.center .lede { margin-left: auto; margin-right: auto; }
.row { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--fift-space-64); align-items: center; padding: var(--fift-space-64) 0; }
.row + .row { border-top: 1px solid var(--hairline); }
.row:nth-child(even) { grid-template-columns: 1.25fr 1fr; }
.row:nth-child(even) .row-media { order: -1; }
.row h2 { font-size: var(--fift-type-web-title); margin-top: var(--fift-space-12); }
.row p { margin-top: var(--fift-space-16); color: var(--text-2); max-width: var(--fift-type-measure-body); }
.row ul { margin: var(--fift-space-16) 0 0; padding-left: var(--fift-space-20); color: var(--text-2); }
.row li + li { margin-top: var(--fift-space-8); }
.row-media.cap { position: relative; margin: 0; }
.row-media picture { display: block; border-radius: var(--fift-corner-16); corner-shape: squircle; overflow: hidden; box-shadow: var(--fift-shadow-object); max-height: 560px; }
.row-media picture img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; object-position: top center; }
.row-media .tag { right: var(--fift-space-12); }
@media (max-width: 860px) { .row, .row:nth-child(even) { grid-template-columns: 1fr; gap: var(--fift-space-32); } .row:nth-child(even) .row-media { order: 0; } .row-media picture, .row-media picture img { max-height: 420px; } }

/* showcase tabs (how it works) */
.showcase { display: grid; gap: var(--fift-space-24); }
.sc-tabs { display: flex; gap: var(--fift-space-4); justify-content: center; flex-wrap: wrap; padding: var(--fift-space-4); margin: 0 auto; border-radius: var(--fift-radius-capsule); background: var(--fill); width: max-content; max-width: 100%; }
.sc-tab { display: inline-flex; align-items: center; gap: var(--fift-space-8); min-height: 40px; padding: 0 var(--fift-space-16); border: 0; border-radius: var(--fift-radius-capsule); background: transparent; color: var(--text-2); font: var(--fift-type-weight-semibold) var(--fift-type-size-note)/1 var(--f-ui); cursor: pointer; transition: background-color var(--fift-motion-duration-press) var(--fift-ease-smooth), color var(--fift-motion-duration-press) var(--fift-ease-smooth); }
.sc-tab i { display: none; }
.sc-tab:hover { color: var(--text); }
.sc-tab[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--fift-shadow-brand-card); }
.sc-tab .new { margin-left: 0; }
.sc-stage { position: relative; border-radius: var(--fift-corner-32); corner-shape: squircle; background: var(--surface); overflow: hidden; }
.sc-panel { display: grid; grid-template-columns: 300px 1fr; align-items: stretch; min-height: 520px; }
.showcase.ready .sc-panel[hidden] { display: none !important; }
.sc-panel:focus-visible { outline-offset: -4px; }
.sc-text { padding: var(--fift-space-40) var(--fift-space-32); display: flex; flex-direction: column; justify-content: center; }
.sc-text h3 { font-size: var(--fift-type-web-title); }
.sc-text p { margin-top: var(--fift-space-12); color: var(--text-2); }
.sc-cap { position: relative; margin: 0; padding: var(--fift-space-32) var(--fift-space-32) 0 0; display: flex; align-items: flex-end; }
.sc-cap picture { display: block; width: 100%; border-radius: var(--fift-corner-16) var(--fift-corner-16) 0 0; corner-shape: squircle; overflow: hidden; box-shadow: var(--fift-shadow-object); max-height: 560px; }
.sc-cap img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; object-position: top left; }
.sc-cap.sq { justify-content: center; align-items: center; padding: var(--fift-space-32); }
.sc-cap.sq picture { max-width: 460px; border-radius: var(--fift-corner-20); corner-shape: squircle; }
.sc-cap .tag { top: auto; bottom: var(--fift-space-16); right: var(--fift-space-48); }
@media (prefers-reduced-motion: no-preference) { .showcase.ready .sc-panel.enter { animation: scin var(--fift-motion-duration-layout) var(--fift-ease-smooth) both; } }
@media (max-width: 900px) {
  .sc-tabs { border-radius: var(--fift-corner-20); corner-shape: squircle; width: 100%; }
  .sc-tab { padding: 0 var(--fift-space-12); }
  .sc-panel { grid-template-columns: 1fr; min-height: 0; }
  .sc-text { padding: var(--fift-space-24) var(--fift-space-20) var(--fift-space-16); }
  .sc-cap { padding: 0 var(--fift-space-16); }
  .sc-cap .tag { bottom: var(--fift-space-12); right: var(--fift-space-32); }
}

/* prose: legal + help pages */
.legal, .prose { max-width: calc(var(--fift-type-measure-body) + 2 * var(--gutter)); margin: 0 auto; padding: var(--section) var(--gutter); }
.legal h2, .prose h2 { margin-top: var(--fift-space-48); font-size: var(--fift-type-web-title); letter-spacing: -0.02em; line-height: var(--fift-type-leading-tight); }
.legal h3, .prose h3 { margin-top: var(--fift-space-32); font-size: var(--fift-type-size-body); line-height: var(--fift-type-leading-tight); }
.legal p, .prose p, .legal ul, .prose ul, .legal ol, .prose ol { margin-top: var(--fift-space-16); color: var(--text-2); }
.legal li, .prose li { margin-top: var(--fift-space-8); }
.legal li::marker, .prose li::marker { color: var(--text-3); }
.legal strong, .prose strong { color: var(--text); }
.legal .lede, .prose .lede { margin-top: var(--fift-space-24); }
.legal table, .prose table { width: 100%; margin-top: var(--fift-space-20); border-collapse: collapse; font-size: var(--fift-type-size-note); }
.legal th, .legal td, .prose th, .prose td { text-align: left; padding: var(--fift-space-12); vertical-align: top; }
.legal tr + tr td, .prose tr + tr td { border-top: 1px solid var(--hairline); }
.legal code, .prose code { font-size: var(--fift-type-size-note); background: var(--fill); padding: 0 var(--fift-space-4); border-radius: var(--fift-corner-4); corner-shape: squircle; }
.banner, .draft-note { margin-top: var(--fift-space-20); padding: var(--fift-space-12) var(--fift-space-16); border-radius: var(--fift-corner-12); corner-shape: squircle; background: var(--accent-fill); color: var(--text) !important; font-size: var(--fift-type-size-note); }
.draft-note { font-weight: var(--fift-type-weight-semibold); }
mark.fill { background: color-mix(in srgb, var(--fift-make-b) 24%, transparent); color: var(--text); padding: 0 var(--fift-space-4); border-radius: var(--fift-corner-4); corner-shape: squircle; font-weight: var(--fift-type-weight-semibold); }
.legal .meta, .prose .meta { margin-top: var(--fift-space-12); font-size: var(--fift-type-size-note); color: var(--text-3); }
.toc { margin-top: var(--fift-space-24); padding: var(--fift-space-20) var(--fift-space-24); border-radius: var(--fift-corner-12); corner-shape: squircle; background: var(--fill); font-size: var(--fift-type-size-note); }
.toc ol { margin: var(--fift-space-8) 0 0; padding-left: var(--fift-space-20); columns: 2; column-gap: var(--fift-space-32); }
@media (max-width: 600px) { .toc ol { columns: 1; } }
.contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--fift-space-16); margin-top: var(--fift-space-32); }
.contact-grid .box { padding: var(--fift-space-24); border-radius: var(--fift-corner-20); corner-shape: squircle; background: var(--surface); }
.contact-grid .box h2, .contact-grid .box h3 { margin-top: 0; font-size: var(--fift-type-size-body); }
.contact-grid .box p { margin-top: var(--fift-space-8); }
@media (max-width: 600px) { .contact-grid { grid-template-columns: 1fr; } }
.sec-faq-h { margin: var(--fift-space-64) auto var(--fift-space-8); max-width: 820px; font-size: var(--fift-type-size-note); font-weight: var(--fift-type-weight-semibold); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); }
.sec-faq-h:first-child { margin-top: 0; }
.new { display: inline-block; margin-left: var(--fift-space-8); padding: 0 var(--fift-space-8); border-radius: var(--fift-radius-capsule); font: var(--fift-type-weight-semibold) var(--fift-type-label)/1.8 var(--f-ui); letter-spacing: .02em; text-transform: none; color: var(--accent-text); background: var(--accent-fill); vertical-align: 1px; }

/* ---------- footer ---------- */
.foot { padding: var(--fift-space-48) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) var(--fift-space-64); font-size: var(--fift-type-size-note); color: var(--text-3); background: var(--fill); }
.foot-lock { display: flex; align-items: center; gap: var(--fift-space-8); color: var(--text); }
.foot-lock img { width: 28px; height: 28px; }
.foot-lock b { font-size: var(--fift-type-size-body); letter-spacing: -0.02em; }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--fift-space-4) var(--fift-space-8); margin: var(--fift-space-24) 0 var(--fift-space-16); }
.foot nav a { color: var(--text-2); text-decoration: none; padding: var(--fift-space-8); margin-left: calc(-1 * var(--fift-space-8)); margin-right: var(--fift-space-8); min-height: 36px; display: inline-flex; align-items: center; }
.foot nav a:hover { color: var(--text); text-decoration: underline; }
.foot p { margin-top: var(--fift-space-4); }

/* ---------- help search (the generator's markup) ---------- */
.help-search { margin-top: var(--fift-space-24); }
.help-search input, main .help-search input { width: 100%; min-height: 48px; padding: 0 var(--fift-space-16); border-radius: var(--fift-corner-12); corner-shape: squircle; border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font: var(--fift-type-size-body) var(--f-ui); }
main .help-search input:focus-visible { outline-color: var(--focus); }
main #help-search-status, main #help-search-results p { color: var(--text-2); }

/* ---------- 404 ---------- */
.nf { text-align: center; padding: var(--fift-space-128) var(--gutter); }
.nf p { margin-top: var(--fift-space-16); color: var(--text-2); }
.nf .hero-cta { margin-top: var(--fift-space-32); }

/* ---------- join (way in) ---------- */
.wi { max-width: 620px; margin: 0 auto; padding: var(--section) var(--gutter); text-align: center; position: relative; }
.wi-hero h1 { margin-top: var(--fift-space-32); }
.wi-icon { width: 112px; height: 112px; margin: 0 auto; }
.wi-lede { margin-top: var(--fift-space-20); font-size: var(--fift-type-web-lede); color: var(--text-2); }
.wi-actions { display: flex; gap: var(--fift-space-12); justify-content: center; flex-wrap: wrap; margin-top: var(--fift-space-32); }
.wi-actions[hidden] { display: none; }
.wi-fine { margin-top: var(--fift-space-16); font-size: var(--fift-type-size-note); color: var(--text-3); }
.wi-status { margin-top: var(--fift-space-16); min-height: 1.5em; color: var(--text-2); }
.wi-form { display: grid; gap: var(--fift-space-12); margin-top: var(--fift-space-24); text-align: left; }
.wi-form label { font-size: var(--fift-type-size-note); font-weight: var(--fift-type-weight-semibold); }
.wi-form input { min-height: var(--fift-button-height-compact); padding: 0 var(--fift-space-16); border-radius: var(--fift-corner-12); corner-shape: squircle; border: 1px solid var(--hairline); background: var(--surface); color: var(--text); font: var(--fift-type-size-body) var(--f-ui); }
.btn-cherry.wi-btn, .wi .btn-cherry { min-height: var(--fift-button-height-compact); padding: 0 var(--fift-space-24); border-radius: var(--fift-radius-capsule); font: var(--fift-type-weight-semibold) var(--fift-type-size-body)/1 var(--f-ui); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; border: 0; cursor: pointer; }
.wi-steps { margin: var(--fift-space-40) auto 0; padding: 0; list-style: none; display: grid; gap: var(--fift-space-12); text-align: left; max-width: 460px; }
.wi-steps li { display: flex; gap: var(--fift-space-16); align-items: flex-start; padding: var(--fift-space-16); border-radius: var(--fift-corner-16); corner-shape: squircle; background: var(--surface); color: var(--text-2); }
.wi-steps b { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: var(--fift-type-weight-medium) var(--fift-type-size-note)/1 var(--f-num); background: var(--fift-action); color: var(--fift-action-text); }

/* ---------- motion: Reduce Motion means no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: opacity var(--fift-motion-duration-fade) var(--fift-ease-fade) !important; scroll-behavior: auto !important; }
}