/* The paid-ad funnel at /start/<habit> (2026-10-04; QUITTR copy 2026-10-05;
   adapted to unfuckurlife 2026-10-07 — docs/the-door-and-the-rung.md).
   QUITTR's layouts, cut in the app's own language: square plates, 1px brass
   hairlines, corner brackets, mono small caps, the square die, Bodoni
   figures, paper grain, no shadows or glow (Vellum).
   A standalone sheet, NOT app.css (~540 KB): the first screen must paint in
   well under a second on 4G. The colour tokens copy Vellum's (app.css
   `html[data-theme="vellum"]`) under the same names, and the grain and the
   corner brackets copy app.css's own rules — keep them in step.
   Fonts are self-hosted latin subsets (SIL Open Font License). */

@font-face {
  font-family: "Bodoni Moda"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("/static/fonts/funnel/bodoni-moda-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/static/fonts/funnel/instrument-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono"; font-style: normal; font-weight: 500 600; font-display: swap;
  src: url("/static/fonts/funnel/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  --page: #efe8da;
  --surface: #f7f2e7;
  --surface-2: #fbf8f1;
  --ink: #241f19;
  --ink-2: #4a4335;
  --ink-muted: #5e5448;
  --gridline: #e4dbc9;
  --track: #d3c7b0;
  --border: rgba(122, 90, 34, 0.24);
  --good: #3f6656;
  --danger: #7a2e27;
  --signal: #a8432f;
  --accent-glow: #7a5a22;
  --tone: var(--accent-glow);
  --font-display: "Bodoni Moda", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .12 0 0 0 0 .1 .2 0 0 0 -.095'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --foot-h: 10.5rem; /* overwritten by funnel.js with the foot's real height */
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--ink); }
body {
  background-image: var(--grain);
  overflow-x: clip; /* a bleed that pokes past the edge must never make a phone zoom out */
  font: 400 1.0625rem/1.5 var(--font-body);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
a { color: var(--accent-glow); }
h1, h2, p, ul, ol, dl, dd { margin: 0; }
b { font-weight: 700; color: var(--ink); }

/* A short screen is exactly one phone-screen tall, so it never scrolls: the
   page's top and bottom padding are subtracted from the content's minimum
   height, each safe-area inset counted once. --foot-h (measured by
   funnel.js) already includes the bar's own bottom inset, hence max(). */
.f-page {
  --pad-top: calc(env(safe-area-inset-top, 0px) + 12px);
  --pad-bottom: calc(max(var(--foot-h), env(safe-area-inset-bottom, 0px)) + 12px);
  max-width: 30rem; margin: 0 auto;
  min-height: 100vh; min-height: 100dvh;
  padding-inline: 20px;
  padding-block: var(--pad-top) var(--pad-bottom);
}
.f-screen { display: flex; flex-direction: column; gap: 18px;
  min-height: calc(100vh - var(--pad-top) - var(--pad-bottom)); min-height: calc(100dvh - var(--pad-top) - var(--pad-bottom)); }
.f-body { display: flex; flex-direction: column; gap: 16px; }
.f-center { text-align: center; align-items: center; }
.f-k-slide .f-body, .f-k-promo .f-body, .f-k-hey .f-body,
.f-k-calculating .f-body { flex: 1; justify-content: center; }
/* slides: the art starts at the same height on every slide, so it doesn't
   jump as the copy below it changes length between taps */
.f-k-slide .f-body, .f-k-promo .f-body { justify-content: flex-start; padding-top: clamp(12px, 6vh, 64px); }
/* Arrival: only the content fades in. The frame (back arrow, progress bar,
   story bars, logo, the CTA bar) stays solid from page to page, so a tap
   reads as the question changing, not the page reloading (his call,
   2026-10-08: the whole-screen fade made the back button blink).
   Opacity only: a transform here (even an identity one left by an
   animation's fill) would make an ancestor the containing block for the
   fixed .f-foot, which then floats mid-screen. */
@media (prefers-reduced-motion: no-preference) {
  .f-body > :not(.f-foot) { animation: f-arrive .25s ease-out both; }
}
@keyframes f-arrive { from { opacity: 0; } to { opacity: 1; } }
.f-leaving { opacity: 0; transform: translateX(-14px); transition: opacity .18s ease, transform .18s ease; }

/* corner brackets — app.css `.habit-card::before/::after`: 11px, 2px brass */
.f-bracket { position: relative; }
.f-bracket::before, .f-bracket::after { content: ""; position: absolute; width: 11px; height: 11px; pointer-events: none; }
.f-bracket::before { top: -1px; left: -1px; border-top: 2px solid var(--accent-glow); border-left: 2px solid var(--accent-glow); }
.f-bracket::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--accent-glow); border-right: 2px solid var(--accent-glow); }

/* top bar: back · gauge · language */
.f-top { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.f-back {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 1.15rem; text-decoration: none; color: var(--ink-2);
}
.f-bar { flex: 1; height: 4px; background: var(--track); position: relative; overflow: hidden; } /* one solid bar, no tick gaps (his call, 2026-10-08) */
.f-bar i { display: block; height: 100%; width: var(--to); background: var(--accent-glow); }
@media (prefers-reduced-motion: no-preference) {
  .f-bar i { animation: f-fill .5s ease-out both; }
}
@keyframes f-fill { from { width: var(--from); } to { width: var(--to); } }
.f-lang { font: 600 .72rem var(--font-mono); letter-spacing: .12em; border: 1px solid var(--border); background: var(--surface);
  min-width: 44px; min-height: 44px; padding: 0 8px; color: var(--ink-2); text-decoration: none; display: inline-grid; place-items: center; }
.f-stories { display: flex; gap: 4px; padding-top: 10px; }
.f-stories i { flex: 1; height: 3px; background: rgba(36, 31, 25, .18); }
.f-stories i.is-on, .f-stories i.is-now { background: var(--tone); }

/* type */
.f-lockup { display: flex; align-items: center; justify-content: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
  font: 600 1.45rem/1 var(--font-display); letter-spacing: .01em; align-self: center; }
.f-lockup img { width: 30px; height: 30px; }
.f-lockup--top { margin-top: 14px; }
.f-lockup--light { color: var(--page); border-bottom-color: rgba(239, 232, 218, .25); }
.f-title { font: 600 1.85rem/1.12 var(--font-display); text-wrap: balance; }
.f-title--mid { font-size: 1.5rem; }
.f-title--left { font-size: 2.1rem; }
.f-title--slide { font-size: 2.15rem; }
.f-title--calc { font-size: 1.75rem; }
.f-eyebrow { font: 600 .74rem/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent-glow); }
.f-eyebrow--tick { border-left: 3px solid var(--accent-glow); padding-left: 10px; }
.f-eyebrow--light { color: #d9bf86; }
.f-lede { color: var(--ink-2); font-size: 1.08rem; text-wrap: pretty; }
.f-lede--big { font-size: 1.2rem; }
.f-sub { color: var(--ink-2); }
.f-hint { color: var(--ink-muted); font-size: .95rem; font-style: italic; font-family: var(--font-display); }
.f-meta { display: flex; align-items: center; gap: 10px; color: var(--ink-muted); font: 500 .78rem var(--font-mono); letter-spacing: .06em; }
.f-fine { color: var(--ink-muted); font-size: .875rem; text-align: center; }
.f-fine--left { text-align: left; }
.f-fine a { color: var(--ink-muted); }
.f-assure { color: var(--ink); font-size: .9rem; font-weight: 600; text-align: center; }
.f-h2 { font: 600 .74rem var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); margin-top: 6px; }
.f-error { border: 1px solid var(--danger); color: var(--danger); padding: 10px 12px; font-size: .95rem; }
.f-test { border: 1px dashed var(--accent-glow); color: var(--accent-glow); padding: 8px 12px; font: 500 .74rem var(--font-mono); text-align: center; }
.f-note { color: var(--ink-muted); font-size: .9rem; }
.f-die-dot { width: 11px; height: 11px; flex: none; background: var(--accent-glow); display: inline-block; vertical-align: middle; }

/* buttons: QUITTR's weight and place, the app's square ink plate */
.f-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 28px 20px calc(env(safe-area-inset-bottom, 0px) + 16px);
  background: var(--page);
  background: linear-gradient(to top, var(--page) 66%, rgba(239, 232, 218, 0));
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.f-foot > * { width: 100%; max-width: 26rem; }
.f-foot.is-static { position: static; padding-inline: 0; background: none; }
.f-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  text-decoration: none; cursor: pointer; border: 0; border-radius: 0;
  min-height: 58px; padding: 14px 22px;
  background: var(--ink); color: var(--page);
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px rgba(239, 232, 218, .32);
  font: 600 .82rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-wrap: balance;
  transition: transform .1s ease, opacity .15s ease;
}
.f-btn:active { transform: scale(.985); }
.f-btn:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 3px; }
.f-btn[aria-disabled="true"] { opacity: .4; }
.f-btn--big { min-height: 64px; font-size: .86rem; }
.f-btn--tone { background: var(--tone); box-shadow: inset 0 0 0 3px var(--tone), inset 0 0 0 4px rgba(239, 232, 218, .32); color: var(--surface-2); }
.f-btn--brass { background: var(--accent-glow); box-shadow: inset 0 0 0 3px var(--accent-glow), inset 0 0 0 4px rgba(239, 232, 218, .35); color: var(--surface-2); }
.f-btn--text { background: none; box-shadow: none; color: var(--ink-muted); min-height: 44px; font: 500 .9rem var(--font-body); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; }
.f-btn--light { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 0 0 3px var(--surface-2), inset 0 0 0 4px rgba(122, 90, 34, .45); }

/* the hands mark in the landing's double-ruled square */
.f-mark { width: 116px; height: 116px; display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--border); outline: 1px solid var(--accent-glow); outline-offset: -6px; align-self: center; }
.f-mark img { width: 84px; height: 84px; }
.f-mark--small { width: 84px; height: 84px; }
.f-mark--small img { width: 58px; height: 58px; }

/* 1 — the door: headline + question 1. The f-quiz block sits in the middle of
   the space under the lockup; the headline is a step down from a slide title
   so four answers fit under it on a 360x640 phone. */
.f-door { justify-content: center; gap: 14px; }
.f-title--door { font-size: 2.15rem; padding-bottom: 16px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.f-q--door { font-size: 1.3rem; min-height: 0; color: var(--accent-glow); }
/* 3–11 — the quiz */
.f-quiz { flex: 1; }
.f-quiz .f-eyebrow { margin-top: 22px; }
.f-q { font: 600 1.6rem/1.2 var(--font-display); text-wrap: balance; min-height: 2.4em; }.f-options { display: flex; flex-direction: column; gap: 12px; }
.f-opt {
  display: flex; align-items: center; gap: 14px; width: 100%; position: relative;
  min-height: 64px; padding: 12px 16px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--border); border-radius: 0;
  font: 500 1.06rem/1.25 var(--font-body); text-align: left; cursor: pointer;
  transition: transform .1s ease, background-color .12s ease;
}
.f-opt:hover { border-color: var(--accent-glow); }
.f-opt:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 2px; }
.f-opt:active { transform: scale(.985); }
.f-opt.is-picked { background: var(--accent-glow); color: var(--surface-2); border-color: var(--accent-glow); }
.f-opt.is-picked b { color: inherit; }
.f-opt.is-picked .f-num { background: var(--surface-2); color: var(--accent-glow); border-color: var(--surface-2); }
.f-num { width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--accent-glow); color: var(--accent-glow); font: 600 1rem var(--font-display); }
.f-opt-label { flex: 1; min-width: 0; }
/* the site's habit picker (study "A Encruzilhada": VI's two tarot cards, then III's emblems) */
.f-pick { gap: 14px; --tone: var(--ink); --hatch: rgba(36, 31, 25, .2); }
.f-arcs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-arc { position: relative; display: grid; align-content: center; justify-items: center; gap: 6px;
  min-height: min(400px, 62dvh); padding: 40px 10px; text-align: center; text-decoration: none; color: var(--ink);
  background: var(--surface); border: 3px double var(--ink); transition: transform .2s ease; }
.f-arc:hover, .f-arc:focus-visible { transform: translateY(-6px); }
.f-arc:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 3px; }
.f-arc-art { width: min(116px, 30vw); height: auto; }
.f-arc b { font: 700 1.6rem/1.1 var(--font-display); }
.f-arc small { font-size: .8rem; color: var(--ink-muted); max-width: 14ch; }
.f-arc-n { position: absolute; top: 10px; left: 0; right: 0; font: 700 .95rem var(--font-display); color: var(--good); letter-spacing: .1em; }
.f-arc-n--inv { top: auto; bottom: 10px; transform: rotate(180deg); }
.f-embs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.f-emb { display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 8px 12px; min-height: 190px;
  text-align: center; text-decoration: none; color: var(--ink); background: var(--surface); border: 2px solid var(--ink); }
.f-emb:hover { border-color: var(--accent-glow); }
.f-emb:focus-visible { outline: 3px solid var(--accent-glow); outline-offset: 2px; }
.f-emb-art { width: 92px; height: auto; }
.f-emb b { font: 700 .95rem var(--font-display); border-top: 1px solid var(--border); padding-top: 6px; width: 100%; }
.f-emb i { font: italic 500 .8rem/1.3 var(--font-display); color: var(--ink-2); }
.f-emb.is-soon { border: 2px dashed var(--border); background: var(--page); cursor: default; }
.f-emb.is-soon b { color: var(--ink-muted); font-weight: 500; }
.f-emb-blank { width: 92px; height: 92px; border: 1px dashed var(--border); display: block;
  background-image: repeating-linear-gradient(45deg, transparent 0 4px, var(--hatch) 4px 5px); }
.f-soon { font: 600 .62rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
@media (prefers-reduced-motion: reduce) { .f-arc { transition: none; } }
/* the door's way back to the picker sits over the corner, so question 1 doesn't move */
.f-k-door .f-top { position: absolute; top: 10px; left: 0; }
.f-k-door { position: relative; }

/* checkboxes: symptoms + goals (the app's square tick) */
.f-check input { position: absolute; opacity: 0; pointer-events: none; }
.f-box { width: 24px; height: 24px; flex: none; border: 1.5px solid var(--ink-muted); display: grid; place-items: center; }
.f-check.is-checked, .f-check:has(input:checked) { border-color: var(--accent-glow); background: var(--surface-2); }
.f-check.is-checked .f-box, .f-check:has(input:checked) .f-box,
.f-plan.is-checked .f-box, .f-plan:has(input:checked) .f-box { border-color: var(--accent-glow); background: var(--accent-glow); }
.f-check.is-checked .f-box::after, .f-check:has(input:checked) .f-box::after,
.f-plan.is-checked .f-box::after, .f-plan:has(input:checked) .f-box::after { content: "✓"; color: var(--surface-2); font-size: .9rem; font-weight: 700; }
.f-check:has(input:focus-visible), .f-plan:has(input:focus-visible), .f-chip:has(input:focus-visible) { outline: 2px solid var(--accent-glow); outline-offset: 2px; }
.f-alert { background: var(--danger); color: #fbf8f1; padding: 14px 16px; font-weight: 600; font-size: 1.02rem; border-left: 4px solid #d9bf86; }
.f-alert b { color: inherit; }

/* fields */
.f-field { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; text-align: left; }
.f-label { font: 600 .72rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.f-field input[type=text], .f-field input[type=email], .f-field input[type=password] {
  font: 400 1.1rem/1.3 var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 0;
  padding: 16px; width: 100%;
}
.f-field input:focus { outline: 2px solid var(--accent-glow); outline-offset: 1px; }
/* a new password with its "Mostrar senha" button inside the field's right edge */
.f-pw { position: relative; display: block; }
.f-pw input { padding-right: 7.5rem; }
.f-pw-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 44px; padding: 0 10px;
  background: none; border: 0; color: var(--accent-glow); cursor: pointer;
  font: 600 .7rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.f-pw-show:focus-visible { outline: 2px solid var(--accent-glow); }
.f-field--low { margin-top: 4vh; }
.f-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.f-chips legend { grid-column: 1 / -1; margin-bottom: 8px; }
.f-chip { position: relative; }
.f-chip input { position: absolute; opacity: 0; }
.f-chip span { display: grid; place-items: center; min-height: 56px; padding: 6px; background: var(--surface);
  border: 1px solid var(--border); font: 600 .95rem var(--font-body); cursor: pointer; text-align: center; }
.f-chip input:checked + span { background: var(--accent-glow); color: var(--surface-2); border-color: var(--accent-glow); }

/* 13 — the ring */
.f-k-calculating .f-body { padding-bottom: 10vh; }
.f-ring { position: relative; width: 250px; height: 250px; }
.f-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.f-ring circle { fill: none; stroke: var(--track); stroke-width: 6; }
.f-ring .f-ring-arc { stroke: var(--accent-glow); stroke-linecap: butt; stroke-dasharray: 327; stroke-dashoffset: 0; }
.f-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 600 3.6rem var(--font-display); }
@media (prefers-reduced-motion: no-preference) {
  .f-ring .f-ring-arc { animation: f-ring 2.2s ease-in-out forwards; stroke-dashoffset: 327; }
  .f-calc-list li { animation: f-calc-in .4s ease-out both; animation-delay: calc(.4s + var(--i) * .5s); }
}
@keyframes f-ring { to { stroke-dashoffset: 0; } }
@keyframes f-calc-in { from { opacity: 0; transform: translateY(4px); } }
/* their answers read back, one per line */
.f-calc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px;
  font: 500 .78rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.f-calc-list b { color: var(--accent-glow); }

/* 14 — the verdict */
.f-tick { display: inline-grid; place-items: center; width: 1.3em; height: 1.3em;
  background: var(--accent-glow); color: var(--surface-2); font-size: .7em; vertical-align: middle; }
.f-tick--big { width: 64px; height: 64px; font-size: 2rem; }
@media (prefers-reduced-motion: no-preference) {
  .f-tick { animation: f-pop .35s .2s ease-out both; }
}
@keyframes f-pop { from { transform: scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }
.f-panel { width: 100%; background: var(--surface); border: 1px solid var(--border); padding: 20px; display: flex; flex-direction: column; gap: 18px; }
.f-verdict { font-size: 1.05rem; color: var(--ink-2); }
.f-verdict b { color: var(--band, var(--danger)); }
/* Plate I, the assay rule: the number, then a 0–100 rule — bands, the
   reference line, a pointer at the score, a bracket for the gap. The colour
   follows the band: oxide Forte, umber Moderada, verdigris Leve (never alarm
   red for a Leve score). SVG parts are styled by class, never attributes. */
.f-band-strong { --band: var(--danger); } .f-band-moderate { --band: #7a4a2a; } .f-band-mild { --band: var(--good); }
.f-assay { gap: 14px; }
.f-assay .f-fine { text-align: left; }
.f-assay-sent { font: 600 1.42rem/1.18 var(--font-display); color: var(--ink); text-wrap: balance; }
.f-assay-sent b { color: var(--band); }
.f-assay-num { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-display); }
.f-assay-num b { font-size: 5.2rem; line-height: .9; font-weight: 600; color: var(--band); font-variant-numeric: tabular-nums; }
.f-assay-num span { font-size: 1.2rem; color: var(--ink-muted); }
.f-assay-rule { width: 100%; height: auto; overflow: visible; }
.f-rb-1 { fill: rgba(63, 102, 86, .22); } .f-rb-2 { fill: rgba(122, 90, 34, .22); } .f-rb-3 { fill: rgba(122, 46, 39, .24); }
.f-rb.is-on { fill: var(--band); }
.f-rb-t { font: 600 8.5px var(--font-mono); letter-spacing: .1em; fill: var(--ink-muted); }
.f-rb-t.is-on { fill: var(--surface-2); }
.f-rtick { stroke: var(--ink-muted); stroke-width: 1; }
.f-rptr { fill: var(--accent-glow); }

/* 16–26 — slides: the arc in brand hues, a faint wash, ink/brass buttons */
.f-tone-oxide { --tone: #8a2f26; } .f-tone-rose { --tone: #8e3b33; } .f-tone-umber { --tone: #7a4a2a; }
.f-tone-slate { --tone: #4a4335; } .f-tone-verdigris { --tone: #2f6b55; }
.f-k-slide, .f-k-promo { margin-inline: -20px; padding-inline: 20px; }
/* the wash runs from the very top edge, not 12px below it */
.f-page:has(.f-k-slide, .f-k-promo) { padding-top: env(safe-area-inset-top, 0px); }
.f-k-slide { background: linear-gradient(to bottom, rgba(122, 46, 39, .1), transparent 72%); }
.f-tone-slate.f-k-slide { background: linear-gradient(to bottom, rgba(36, 31, 25, .1), transparent 72%); }
.f-tone-verdigris.f-k-slide { background: linear-gradient(to bottom, rgba(63, 102, 86, .16), transparent 72%); }
.f-k-promo { background: linear-gradient(to bottom, rgba(199, 154, 69, .16), transparent 72%); }
.f-slide .f-title--slide { border-bottom: 1px solid var(--border); padding-bottom: 12px; }
.f-kicker { font: italic 500 1.12rem/1.3 var(--font-display); color: var(--accent-glow); margin-top: -6px; text-wrap: balance; }
.f-art-wrap { width: min(60vw, 240px, 29dvh); aspect-ratio: 1; position: relative; display: grid; place-items: center; }
.f-art { position: relative; width: 100%; height: auto; }
.f-art--logo { width: 78%; } /* the hands mark, on "Welcome to unfuckurlife" */
.f-slide { cursor: pointer; user-select: none; -webkit-user-select: none; }
.f-slide .f-lede { max-width: 31ch; }
.f-told { display: inline-flex; align-items: center; gap: 10px; font: 600 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--tone); border: 1px solid var(--border); background: var(--surface); padding: 8px 12px; max-width: 100%; }
.f-told .f-die-dot { background: var(--tone); }
/* the box spans the column; lines break only between symptoms, never inside one */
.f-told { width: 100%; padding: 12px 14px; }
.f-told-text { text-align: left; line-height: 1.6; min-width: 0; }
.f-told-item { white-space: nowrap; }
.f-credit { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 0; row-gap: 6px; font: 500 .72rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.f-credit span { flex-basis: 100%; text-align: center; }
.f-credit b { color: var(--ink); }
.f-credit i { display: inline-block; width: 6px; height: 6px; background: var(--accent-glow); vertical-align: middle; margin: 0 6px; }

/* 27 — the research: three findings, one line each, divided by hairlines */
.f-studies { gap: 0; }
.f-studies .f-title { margin-bottom: 12px; }
.f-study { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--border); --tone: var(--ink-2); }
.f-study > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.f-emblem { width: 64px; height: 64px; }
.f-study:last-of-type { border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.f-study h2 { font: 600 1.3rem/1.2 var(--font-display); color: var(--ink); text-wrap: balance; }
.f-study-who { font: 600 .66rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.f-study-use { display: flex; gap: 8px; align-items: baseline; font-size: .95rem; color: var(--ink-2); margin-top: 2px; }

/* 28 — the climb */
.f-chart { width: calc(100% + 20px); height: auto; margin-inline: -10px; }
.f-chart-grid { stroke: var(--gridline); stroke-width: 1; }
.f-chart-axis { stroke: var(--track); stroke-width: 1.5; }
.f-chart-up { fill: none; stroke: var(--good); stroke-width: 3.5; stroke-linejoin: miter; stroke-dasharray: 1 2; }
.f-chart-down { fill: none; stroke: var(--danger); stroke-width: 2.5; stroke-dasharray: 1 2; opacity: .85; }
.f-chart-die { fill: var(--accent-glow); transform-box: fill-box; transform-origin: center; }
.f-chart-end { fill: var(--surface-2); stroke: var(--accent-glow); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
/* the rank counter over the chart: a strip of 1..12 resting on the last */
.f-count { display: flex; align-items: baseline; justify-content: center; gap: 12px; font: 700 .7rem var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.f-count-win { display: block; height: 1em; overflow: hidden; font: 700 4.2rem/1 var(--font-display); color: var(--good); font-variant-numeric: tabular-nums; min-width: 1.3em; letter-spacing: 0; }
.f-count-strip { display: flex; flex-direction: column; transform: translateY(calc((var(--n) - 1) * -1em)); }
.f-count-strip b { height: 1em; display: grid; place-items: center; font-weight: 700; color: inherit; }
/* the climb plays once: steps draw in turn (0.22s each), dice stamp, the count ticks with them */
@media (prefers-reduced-motion: no-preference) {
  .f-chart-up { animation: f-draw .2s linear both; animation-delay: calc(.3s + var(--i) * .22s); }
  .f-chart-down { animation: f-draw 2.8s linear .3s both; }
  .f-chart-die { animation: f-stamp .3s ease-out both; animation-delay: calc(.45s + var(--i) * .22s); }
  .f-chart-end { animation: f-pop .4s ease-out 2.95s both; }
  .f-count-strip { animation: f-tick 2.42s steps(11, end) .3s both; }
}
@keyframes f-draw { from { stroke-dashoffset: 1.02; } to { stroke-dashoffset: 0; } }
@keyframes f-stamp { from { opacity: 0; transform: translateY(-9px) scale(1.7); } 65% { opacity: 1; transform: translateY(0) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes f-pop { from { opacity: 0; transform: scale(.2); } 70% { transform: scale(1.25); } to { opacity: 1; transform: scale(1); } }
@keyframes f-tick { from { transform: translateY(0); } }
.f-chart-t { fill: var(--ink-muted); font: 600 10px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.f-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; font: 600 .72rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.f-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 7px; vertical-align: middle; }
.f-legend .is-up::before { background: var(--good); }
.f-legend .is-down::before { background: var(--danger); }


/* 32 — hey */
.f-hey-text { font: 600 2.1rem var(--font-display); color: var(--ink-2); }
/* "Building your ladder…": the 12 rungs ink in one by one, bottom up, over
   the screen's 2.4s (the app's ladder, not a spinner — his call 2026-10-08) */
.f-build { display: flex; flex-direction: column-reverse; gap: 9px; width: 96px; padding: 4px 0;
  border-inline: 2px solid var(--ink-2); margin-block: 8px; }
.f-build i { height: 3px; background: var(--accent-glow); }
@media (prefers-reduced-motion: no-preference) {
  .f-build i { opacity: .12; animation: f-rung .25s ease-out forwards; animation-delay: calc(var(--i) * .16s + .1s); }
}
@keyframes f-rung { to { opacity: 1; } }

/* 33 — the plan: flat ink hero with a brass inner frame */
.f-plan-hero { width: calc(100% + 40px); margin: -12px -20px 0; padding: 30px 24px 26px; display: flex; flex-direction: column; align-items: center; gap: 12px;
  background: var(--ink); background-image: var(--grain); color: var(--page); position: relative; }
.f-plan-hero::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(217, 191, 134, .45); pointer-events: none; }
.f-plan-hero .f-title, .f-plan-hero .f-sub, .f-plan-hero b { color: var(--page); }
.f-plan-hero .f-fine { color: rgba(239, 232, 218, .7); }
.f-plan-hero .f-tick { background: var(--page); color: var(--ink); }
.f-date { background: var(--surface-2); color: var(--ink); border: 1px solid #d9bf86; outline: 1px solid var(--surface-2); outline-offset: 3px;
  padding: 12px 30px; font: 600 1.7rem var(--font-display); }
.f-chips-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.f-chips-row span { border: 1px solid var(--good); color: var(--good); background: rgba(63, 102, 86, .06); padding: 7px 12px; font: 600 .7rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }

/* 34–35 — the product */
.f-k-mockup { background: var(--ink); color: var(--page); margin-inline: -20px; padding-inline: 20px; overflow-x: clip; }
html:has(.f-k-mockup), body:has(.f-k-mockup) { background-color: var(--ink); }
.f-k-mockup .f-lede { color: var(--gridline); }
.f-k-mockup .f-foot { background: var(--ink); background: linear-gradient(to top, var(--ink) 75%, rgba(36, 31, 25, 0)); }
.f-title--light { font-weight: 500; font-size: 2.2rem; color: var(--page); }
.f-fine--dark { color: rgba(239, 232, 218, .55); }
.f-phones { position: relative; width: 100%; display: flex; justify-content: center; margin-top: 8px; }
.f-phone { width: 62%; max-width: 250px; border: 6px solid #3a3329; border-radius: 30px; overflow: hidden; background: var(--page);
  box-shadow: 0 0 0 1px rgba(217, 191, 134, .35); }
.f-phone img { display: block; width: 100%; height: auto; }
.f-phones--3 { height: min(118vw, 470px); }
.f-phones--3 .f-phone { position: absolute; top: 0; }
.f-phones--3 .f-phone:nth-child(1) { z-index: 2; left: 50%; transform: translateX(-50%); }
.f-phones--3 .f-phone:nth-child(2) { z-index: 1; left: -10%; top: 30px; transform: rotate(-8deg) scale(.88); opacity: .9; }
.f-phones--3 .f-phone:nth-child(3) { z-index: 1; right: -10%; top: 30px; transform: rotate(8deg) scale(.88); opacity: .9; }
.f-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 14px; font: 600 .68rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--gridline); }
.f-tools span { display: inline-flex; align-items: center; gap: 6px; }
.f-tools .f-die-dot { width: 8px; height: 8px; background: #d9bf86; }

/* 36 — the paywall */
.f-pay { gap: 14px; }
.f-pay > .f-sub { text-wrap: balance; }
.f-sheet { background: var(--surface-2); border: 1px solid var(--border); padding: 20px 16px; display: flex; flex-direction: column; gap: 12px; }
.f-plan { display: flex; align-items: center; gap: 14px; border: 1px solid var(--border); background: var(--surface); padding: 16px; cursor: pointer; min-height: 76px; position: relative; }
.f-plan input { position: absolute; opacity: 0; }
.f-plan.is-checked, .f-plan:has(input:checked) { border: 2px solid var(--accent-glow); padding: 15px; }
.f-plan-name { flex: 1; font: 600 1.25rem var(--font-display); display: flex; flex-direction: column; }
.f-plan-name small { font: 500 .8rem var(--font-body); color: var(--good); }
.f-plan-price { text-align: right; font: 600 1.35rem var(--font-display); display: flex; flex-direction: column; white-space: nowrap; }
.f-plan-price small { font: 500 .66rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
/* the yearly tile: per-day price largest, the real total and the ways to pay beside it */
.f-badge { position: absolute; top: -10px; left: 14px; background: var(--accent-glow); color: var(--surface-2); padding: 3px 8px;
  font: 700 .62rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.f-plan { flex-wrap: wrap; row-gap: 8px; }
.f-plan-more { flex-basis: 100%; padding-left: 38px; font: 500 .8rem/1.45 var(--font-body); color: var(--ink-2); }
.f-plan-more b { color: var(--ink); font-weight: 600; }
.f-plan-price--day { font-size: 2rem; line-height: 1; }
.f-plan-name .f-plan-cmp { font: italic 500 .8rem var(--font-display); color: var(--good); }
/* a tester code's paywall: the promo line, the real price struck, zero to pay */
.f-promo { align-self: center; background: var(--good); color: var(--surface-2); padding: 6px 12px;
  font: 700 .7rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.f-free { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; }
.f-free s { color: var(--ink-muted); font: 500 1rem var(--font-body); }
.f-free b { font: 600 3rem/1 var(--font-display); color: var(--good); }
.f-guarantee { font: 600 .74rem/1.35 var(--font-body); color: var(--ink); text-align: center; }
.f-methods { text-align: center; font: 600 .7rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.f-days { list-style: none; padding: 0; display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.f-days li { display: grid; grid-template-columns: 4.2rem 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.f-day { font: 600 .7rem var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent-glow); padding-top: 3px; }
.f-days p { color: var(--ink-2); font-size: .95rem; }
.f-whole { font: italic 500 1.05rem/1.4 var(--font-display); color: var(--ink-2); text-align: center; padding: 6px 8px 0; }
/* the goals they ticked under the headline, after a quiet label on the same row */
.f-yours { align-items: center; }
.f-yours em { font: 600 .7rem var(--font-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
/* questions before paying: hairline rows that open in place */
.f-faq { display: flex; flex-direction: column; border-bottom: 1px solid var(--border); }
.f-faq .f-eyebrow { margin-bottom: 8px; }
.f-faq details { border-top: 1px solid var(--border); }
.f-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; padding: 14px 0; min-height: 44px; font-weight: 600; }
.f-faq summary::-webkit-details-marker { display: none; }
.f-faq summary::after { content: "+"; color: var(--accent-glow); font: 600 1.5rem/1 var(--font-body); }
.f-faq details[open] summary::after { content: "−"; }
.f-faq summary:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 2px; }
.f-faq details p { color: var(--ink-2); font-size: .95rem; padding-bottom: 14px; }
/* the fixed foot: the checked plan and its price over the button */
.f-payfoot { gap: 8px; padding-top: 12px; background: var(--page); border-top: 1px solid var(--border); }
.f-payfoot { gap: 6px; }
.f-payfoot .f-fine { font-size: .66rem; }
.f-payfoot-plan > span { display: none; justify-content: space-between; align-items: baseline; gap: 12px; }
.f-payfoot-plan > span.is-chosen { display: flex; }
.f-payfoot-plan b { font: 600 1.1rem var(--font-display); white-space: nowrap; }
.f-payfoot-plan small { font: 500 .66rem var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); text-align: right; }
@supports selector(:has(*)) {
  .f-payfoot-plan > span.is-chosen { display: none; }
  .f-pay:has(input[value="yearly"]:checked) [data-for="yearly"],
  .f-pay:has(input[value="lifetime"]:checked) [data-for="lifetime"] { display: flex; }
}

/* after payment */
.f-stores { display: flex; flex-direction: column; gap: 10px; }

/* short phones (360x640 and the like): the door must fit without a scroll */
@media (max-height: 700px) {
  .f-title--door { font-size: 1.75rem; }
  .f-door { gap: 10px; }
  .f-door .f-opt { min-height: 54px; }
  .f-assay { gap: 10px; }
  .f-assay-num b { font-size: 4.4rem; }
  /* slides with a subtitle or a told-line, and the research rows */
  .f-art-wrap { width: min(60vw, 240px, 22dvh); }
  .f-title--slide { font-size: 1.8rem; }
  .f-k-slide .f-body, .f-k-promo .f-body { gap: 12px; padding-top: 4px; }
  .f-study { padding: 10px 0; }
  .f-study h2 { font-size: 1.15rem; }
  .f-study { grid-template-columns: 52px 1fr; gap: 12px; }
  .f-emblem { width: 52px; height: 52px; }
  /* the paywall's fixed foot is tall: the seal goes so the plans rise into view */
  .f-pay > .f-mark { display: none; }
  .f-pay .f-title { font-size: 1.7rem; }
}

/* Tablet and desktop (harmony review, 2026-10-07): the phone column becomes
   a vellum plate on a darker ground. The CTA bar takes the plate's width, and
   the washes, the plan hero and the dark product screens fill the plate edge
   to edge, so no band ends in an unexplained seam. */
@media (min-width: 640px) {
  html, body { background-color: #e3d9c4; }
  .f-page { background: var(--page) var(--grain); border-inline: 1px solid var(--border); }
  .f-foot { left: 0; right: 0; margin-inline: auto; width: calc(30rem - 2px); max-width: 100%; } /* inside the hairlines */
  .f-foot.is-static { width: auto; margin-inline: 0; }
  html:has(.f-k-mockup), body:has(.f-k-mockup) { background-color: #17130f; }
  .f-page:has(.f-k-mockup) { background: var(--ink); border-inline-color: rgba(217, 191, 134, .28); }
}
@media (hover: hover) {
  .f-btn:not(.f-btn--text):not([aria-disabled="true"]):hover { filter: brightness(1.18); }
  .f-btn--light:hover { filter: none; background: #fff; }
  .f-btn[aria-disabled="true"] { cursor: not-allowed; }
  .f-btn--text:hover, .f-fine a:hover { color: var(--ink); }
  .f-back:hover, .f-lang:hover, .f-chip span:hover, .f-check:hover, .f-plan:hover { border-color: var(--accent-glow); }
  .f-opt:hover:not(.is-picked) { background: var(--surface-2); }
}