/* flow.css (8 Oct, trial-ux; Sunny: "I clicked start free trial, and it looks trash"): the way in, in the home's world.
   /account, /checkout, /checkout/started and /checkout/success open under the home's studio sky (the hero's own frames;
   /h/scene.js picks dawn / day / dusk / night by the visitor's clock and pins the theme to it; without script the system
   theme picks day or night). The headline sits on the sky in the display serif like the home's; one glass card holds the
   task; the bare feather is the only mark. Linked last, after /m.css. Scoped under main.flow. Tokens only. */

/* ---------- the sky: the studio, fading into the ground ---------- */
body:has(> main.flow) { background: var(--fift-ground); }
body:has(> main.flow) .top { position: relative; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
main.wi.buy.flow { max-width: none; margin: 0; padding-top: var(--fift-space-32); padding-bottom: var(--fift-space-64); min-height: calc(100svh - 60px); }
.flow > .sky {
  position: absolute; z-index: -1; inset: -60px 0 auto; height: min(max(100svh, 720px), 100% + 60px); overflow: hidden; pointer-events: none;
  --g: var(--fift-ground); -webkit-mask-image: linear-gradient(180deg, var(--g) 72%, transparent); mask-image: linear-gradient(180deg, var(--g) 72%, transparent);
}
.flow > .sky::before { content: ""; position: absolute; inset: 0; background: url(/assets/h/flow/day-wide.avif) 50% 100% / cover no-repeat; }
.flow > .sky::after { content: ""; position: absolute; inset: 0; opacity: 0; mix-blend-mode: soft-light; background: linear-gradient(180deg, transparent 30%, var(--tint-c, transparent) 78%, transparent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flow > .sky::before { background-image: url(/assets/h/flow/night-wide.avif); }
  :root:not([data-theme="light"]) .flow-mark, :root:not([data-theme="light"]) body:has(> main.flow) .mark { background: var(--fift-ivory-night); }
}
:root[data-theme="dark"] .flow > .sky::before { background-image: url(/assets/h/flow/night-wide.avif); }
:root[data-theme="dark"] .flow-mark, :root[data-theme="dark"] body:has(> main.flow) .mark { background: var(--fift-ivory-night); }
:root[data-theme="light"] body:has(> main.flow) .mark { background: var(--fift-crew-accent); }
/* a tall screen (a phone): the studio stands right under the head, whatever the headline's wrap, and the card sits on its
   sand. The frame is as wide as the screen (720 x 1280: the roof at 29%, the ground at 50%); behind it the hero's own
   blurred plate carries the sky to the top and the sand into the ground. */
@media (max-aspect-ratio: 4/5) {
  .flow > .sky { height: min(178vw, 100% + 60px); }
  .flow > .sky::before { inset: -8% -8% 0; background: url(/assets/h/v5/day-tall-plate.webp) 50% 0 / 100% 100% no-repeat; filter: blur(12px); }
  .flow .flow-head { position: relative; align-content: start; min-height: 112px; margin-bottom: calc(37vw - var(--fift-space-20)); }   /* a lone headline still keeps the studio (and the night's bright horizon) below its words */
  .flow-head::after {
    content: ""; position: absolute; z-index: -1; left: 50%; width: 100vw; translate: -50% 0; top: calc(100% + var(--fift-space-12) - 51.5vw); height: 177.8vw; pointer-events: none;
    background: url(/assets/h/flow/day-tall.avif) 50% 0 / 100% auto no-repeat; --g: var(--fift-ground);
    -webkit-mask-image: linear-gradient(180deg, transparent, var(--g) 12%, var(--g) 58%, transparent 90%); mask-image: linear-gradient(180deg, transparent, var(--g) 12%, var(--g) 58%, transparent 90%);
  }
  :root[data-theme="dark"] .flow > .sky::before { background-image: url(/assets/h/v5/night-tall-plate.webp); }
  :root[data-theme="dark"] .flow-head::after { background-image: url(/assets/h/flow/night-tall.avif); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .flow > .sky::before { background-image: url(/assets/h/v5/night-tall-plate.webp); }
    :root:not([data-theme="light"]) .flow-head::after { background-image: url(/assets/h/flow/night-tall.avif); }
  }
}
/* dawn and dusk: the home's own tints over the day and the night frame */
:root[data-sky="dawn"] .flow > .sky::after { opacity: .45; --tint-c: var(--fift-face-cherry-glow); }
:root[data-sky="dusk"] .flow > .sky::after { opacity: .55; --tint-c: var(--fift-grow-b); }

/* ---------- the head: the feather, the line in the display serif, one quiet line ---------- */
.flow .buy-wrap { max-width: 440px; }
.flow-head { display: grid; justify-items: center; gap: var(--fift-space-16); text-align: center; margin: 0 calc(-1 * var(--fift-space-48)) var(--fift-space-32); }
.flow-mark { width: 44px; height: 44px; background: var(--fift-crew-accent); -webkit-mask: url(/assets/favicon.svg) center / contain no-repeat; mask: url(/assets/favicon.svg) center / contain no-repeat; }
.flow h1 { margin: 0; font: 400 var(--t-display)/1.04 var(--e-display); letter-spacing: -0.03em; text-align: center; text-wrap: balance; color: var(--fift-text); }
.flow-line { margin: 0; font: 400 var(--t-body)/1.45 var(--e-sans); color: var(--fift-secondary); text-wrap: balance; }
/* night: the words keep a soft halo of the night ground, so they read over the horizon's glow too (as the home's hero does) */
:root[data-theme="dark"] .flow-line { color: var(--fift-text); text-shadow: 0 0 var(--fift-space-4) var(--fift-ground), 0 0 var(--fift-space-16) var(--fift-ground), 0 0 var(--fift-space-32) var(--fift-ground); }
:root[data-theme="dark"] .flow h1 { text-shadow: 0 0 var(--fift-space-32) var(--fift-ground); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .flow-line { color: var(--fift-text); text-shadow: 0 0 var(--fift-space-4) var(--fift-ground), 0 0 var(--fift-space-16) var(--fift-ground), 0 0 var(--fift-space-32) var(--fift-ground); }
  :root:not([data-theme="light"]) .flow h1 { text-shadow: 0 0 var(--fift-space-32) var(--fift-ground); }
}
@media (min-width: 700px) {
  main.wi.buy.flow { padding-top: var(--fift-space-48); }
  .flow h1 { font-size: var(--t-hero); line-height: 1; }
  .flow-head { margin-inline: calc(-1 * var(--fift-space-section)); gap: var(--fift-space-20); }
}
/* a phone: the header's feather is the mark; the head stays above the studio's roof */
@media (max-width: 699px) { main.wi.buy.flow { padding-top: var(--fift-space-16); } .flow-head { margin-inline: 0; gap: var(--fift-space-12); margin-bottom: var(--fift-space-24); } .flow-mark { display: none; } }
.flow-line span { white-space: nowrap; }
.flow-line i { font-style: normal; }
@media (max-width: 480px) { .flow-line i { display: none; } .flow-line span:last-child { display: block; } }

/* ---------- the card: the home's glass ---------- */
.flow .buy-card {
  gap: var(--fift-space-20); padding: var(--fift-space-24); border: 0; border-radius: var(--fift-corner-32); corner-shape: squircle;
  background: color-mix(in srgb, var(--fift-surface) 86%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 0 0 1px var(--fift-glass-edge), var(--fift-shadow-float);
}
.flow .buy-card + .buy-card { margin-top: var(--fift-space-16); }
.flow .buy-card h2 { font: 400 var(--t-figure)/1.15 var(--e-display); letter-spacing: -0.015em; }
.flow .wi-lede { font: 400 var(--t-body)/1.5 var(--e-sans); color: var(--fift-secondary); }
.flow .wi-fine { font: 400 var(--t-note)/1.5 var(--e-sans); color: var(--fift-secondary); }
.flow .wi-status { font: 400 var(--t-note)/1.5 var(--e-sans); color: var(--fift-text); }
/* the legal line under the card: its own quiet glass, so it reads on any part of the sand (site-qa's contrast sweep) */
.flow .buy-wrap > .wi-fine {
  margin-top: var(--fift-space-16); padding: var(--fift-space-12) var(--fift-space-16); border-radius: var(--fift-corner-20); corner-shape: squircle; color: var(--fift-secondary);
  background: color-mix(in srgb, var(--fift-surface) 86%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 0 0 1px var(--fift-glass-edge);
}
/* the footer stands on the ground: the sand never runs under it */
body:has(> main.flow) .foot { position: relative; background: var(--fift-ground); }
body:has(> main.flow) .foot::before { content: ""; position: absolute; inset: auto 0 100%; height: var(--fift-space-96); pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--fift-ground) 0%, transparent), var(--fift-ground)); }
@media (prefers-reduced-transparency: reduce) { .flow .buy-card { background: var(--fift-surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ---------- the three steps: Email, Card ($0 today), Download ---------- */
.flow-steps { list-style: none; margin: 0; padding: 0 0 var(--fift-space-20); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); box-shadow: 0 1px 0 var(--fift-hairline); }
.flow-steps li { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--fift-space-8); text-align: center; font: 600 var(--t-note)/1.2 var(--e-sans); color: var(--fift-tertiary); }
.flow-steps li + li::before { content: ""; position: absolute; top: 13px; right: calc(50% + 22px); width: calc(100% - 44px); height: 1px; background: var(--fift-hairline); }
.flow-steps b { width: 28px; height: 28px; border-radius: var(--fift-radius-capsule); display: grid; place-items: center; font: 600 var(--t-note)/1 var(--e-sans); font-variant-numeric: lining-nums tabular-nums; color: var(--fift-tertiary); box-shadow: inset 0 0 0 1px var(--fift-hairline); }
.flow-steps small { display: block; margin-top: var(--fift-space-4); font: 400 var(--t-note)/1.2 var(--e-sans); color: var(--fift-tertiary); }
/* where the visitor is: data-at on the list (/checkout = 2, after it = 3); /account has none: 1, or 2 once signed in */
.flow-steps:is([data-at="1"], :not([data-at])) li:nth-child(1), .flow-steps[data-at="2"] li:nth-child(2), .flow-steps[data-at="3"] li:nth-child(3), .flow:has([data-member]:not([hidden]) [data-none]:not([hidden])) .flow-steps li:nth-child(2) { color: var(--fift-text); }
.flow-steps:is([data-at="1"], :not([data-at])) li:nth-child(1) b, .flow-steps[data-at="2"] li:nth-child(2) b, .flow-steps[data-at="3"] li:nth-child(3) b, .flow:has([data-member]:not([hidden]) [data-none]:not([hidden])) .flow-steps li:nth-child(2) b { background: var(--fift-action); color: var(--fift-action-text); box-shadow: none; }
.flow-steps b { position: relative; --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E"); }
.flow-steps[data-at="2"] li:nth-child(1) b, .flow-steps[data-at="3"] li:nth-child(-n+2) b, .flow:has([data-member]:not([hidden]) [data-none]:not([hidden])) .flow-steps li:nth-child(1) b { background: var(--fift-fill); color: transparent; box-shadow: none; }
.flow-steps[data-at="2"] li:nth-child(1) b::after, .flow-steps[data-at="3"] li:nth-child(-n+2) b::after, .flow:has([data-member]:not([hidden]) [data-none]:not([hidden])) .flow-steps li:nth-child(1) b::after { content: ""; position: absolute; inset: 8px; background: var(--fift-text); -webkit-mask: var(--tick) center / contain no-repeat; mask: var(--tick) center / contain no-repeat; }
.flow:has([data-member]:not([hidden]) [data-none]:not([hidden])) .flow-steps li:nth-child(1) { color: var(--fift-tertiary); }
.flow-steps[data-at="2"] li:nth-child(2)::before, .flow-steps[data-at="3"] li + li::before, .flow:has([data-member]:not([hidden]) [data-none]:not([hidden])) .flow-steps li:nth-child(2)::before { background: var(--fift-tertiary); }

/* ---------- the field, the check, the button ---------- */
.flow .wi-form { display: grid; gap: var(--fift-space-12); margin: 0; text-align: left; }
.flow .wi-form label { font: 600 var(--t-note)/1.2 var(--e-sans); color: var(--fift-secondary); padding-inline-start: var(--fift-space-4); }
.flow .wi-form input {
  width: 100%; height: 52px; padding: 0 var(--fift-space-20); border: 0; border-radius: var(--fift-radius-capsule); corner-shape: round;
  background: var(--fift-ground); color: var(--fift-text); font: 400 var(--t-body)/1.2 var(--e-sans); caret-color: var(--fift-crew-accent);
  box-shadow: inset 0 0 0 1px var(--fift-glass-edge); -webkit-appearance: none; appearance: none;
}
.flow .wi-form input::placeholder { color: var(--fift-tertiary); opacity: 1; }
.flow .wi-form input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--fift-crew-accent), 0 0 0 4px var(--fift-crew-accent-fill); }
/* the one button system (ui-0315's audit, 8 Oct): filled = --fift-action, outline = the secondary; the same height, radius and
   type; 52 for a card's own action, 44 for a group of account actions; a pair is always equal width */
.flow .btn, .flow .btn-cherry { min-height: var(--fift-button-height); padding: 0 var(--fift-space-24); border: 0; border-radius: var(--fift-button-radius); corner-shape: round; font: 600 var(--t-body)/1 var(--e-sans); letter-spacing: -0.01em; cursor: pointer; }
.flow .wi-form .btn-cherry, .flow .buy-cta .btn { width: 100%; }
.flow .btn-ghost { background: transparent; color: var(--fift-text); box-shadow: inset 0 0 0 1px var(--fift-glass-edge); }
.flow .btn-ghost:hover { background: var(--fift-fill); }
.flow .wi-actions { gap: var(--fift-space-8); }
/* Cloudflare's check: nothing unless it needs the visitor; then one small line and the box, before the button */
.flow .wi-check { display: grid; gap: var(--fift-space-8); }
.flow .wi-check:not(:has([data-check-label]:not([hidden]))) { display: contents; }
.flow .wi-check [data-check-label] { padding-inline-start: var(--fift-space-4); color: var(--fift-secondary); }
.flow .wi-check [data-turnstile] { border-radius: var(--fift-corner-12); corner-shape: squircle; overflow: hidden; line-height: 0; }
.flow .wi-check [data-turnstile]:empty { display: none; }
.flow-new { text-align: center; }
.flow .btn-link { min-height: 44px; padding: 0 var(--fift-space-12); border: 0; background: none; color: var(--fift-secondary); font: 600 var(--t-note)/1 var(--e-sans); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; }
.flow .btn-link:hover { color: var(--fift-text); }

/* ---------- /account's states. The page's own [hidden] flags pick the look; html.trial = the trial screen;
   html[data-sent] = the sign-in email is on its way ---------- */
.flow h1 > span, .flow-acct .flow-line, .flow-acct .flow-steps, .flow-again { display: none; }
/* /checkout with no payment link: only the way in */
.flow:has([data-no-link]:not([hidden])) :is(.flow-line, .buy-card:first-of-type) { display: none; }
.flow h1 > .v-plain { display: block; }
:root.trial .flow:has([data-signin]:not([hidden])) h1 > .v-plain { display: none; }
:root.trial .flow:has([data-signin]:not([hidden])) h1 > .v-trial { display: block; }
:root.trial .flow:has([data-signin]:not([hidden])) :is(.flow-line, .flow-steps) { display: grid; }
:root.trial .flow:has([data-signin]:not([hidden])) .flow-line { display: block; }
/* signed in, no membership yet: step 2 */
.flow:has([data-member]:not([hidden]) [data-none]:not([hidden])) h1 > .v-plain { display: none; }
.flow:has([data-member]:not([hidden]) [data-none]:not([hidden])) h1 > .v-next { display: block; }
.flow:has([data-member]:not([hidden]) [data-none]:not([hidden])) .flow-steps { display: grid; }
/* the email is on its way: the headline says so, the form steps aside (kept in the page: the check lives in it) */
:root[data-sent] .flow:has([data-signin]:not([hidden])) h1 > span:not(.v-sent) { display: none; }
:root[data-sent] .flow:has([data-signin]:not([hidden])) h1 > .v-sent { display: block; }
:root[data-sent] .flow:has([data-signin]:not([hidden])) .flow-line { display: none; }
:root[data-sent] .flow [data-signin]:not([hidden]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); visibility: hidden; }
:root[data-sent] .flow:has([data-signin]:not([hidden])) .wi-status { font-size: var(--t-body); text-align: center; text-wrap: pretty; }
:root[data-sent] .flow:has([data-signin]:not([hidden])) .flow-again { display: block; margin: calc(-1 * var(--fift-space-8)) 0 calc(-1 * var(--fift-space-8)); text-align: center; }

/* ---------- the member's card ---------- */
.flow-member { display: grid; gap: var(--fift-space-16); }
.flow-member > * { margin: 0; }
.flow-member [data-who] { text-align: center; color: var(--fift-tertiary); }
.flow .flow-big { margin: 0; font: 400 var(--t-question)/1.3 var(--e-display); color: var(--fift-text); text-align: center; text-wrap: balance; }
.flow-member [data-price], .flow-bring { text-align: center; }
.flow .flow-bring { gap: var(--fift-space-12); }
.flow-bring[hidden] { display: none; }
.flow .buy-none { gap: var(--fift-space-12); text-align: center; }
.flow .buy-none .buy-label { font: 600 var(--t-note)/1.2 var(--e-sans); letter-spacing: 0; text-transform: none; color: var(--e-accent-text); }
.flow .buy-none .buy-amt { justify-content: center; }
.flow .buy-none .buy-amt b { font: 400 var(--t-display)/1 var(--e-display); letter-spacing: -0.03em; }
.flow .buy-none .buy-cta { margin-top: var(--fift-space-8); }
.flow-member [data-billing] .wi-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
.flow-out { display: flex; justify-content: center; }

/* ---------- /checkout and the pages after it ---------- */
/* the home's launch meter, flat on this card's glass (a card inside a card reads as a form) */
.flow .buy-card .launch { max-width: none; margin: 0; padding: 0; background: none; box-shadow: none; border-radius: 0; }
/* "Launch price" is a label, not a button: small caps in the card's own text colour, no fill, no border (Sunny's no-pills rule) */
.flow .flow-next { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--fift-space-12); counter-reset: n; text-align: left; }
.flow .flow-next li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--fift-space-12); align-items: baseline; font: 400 var(--t-body)/1.45 var(--e-sans); color: var(--fift-secondary); counter-increment: n; }
.flow .flow-next li::before { content: counter(n); font: 600 var(--t-note)/28px var(--e-sans); font-variant-numeric: lining-nums tabular-nums; width: 28px; height: 28px; border-radius: var(--fift-radius-capsule); text-align: center; color: var(--fift-tertiary); box-shadow: inset 0 0 0 1px var(--fift-hairline); }
.flow-center { text-align: center; }
.flow-terms span { display: block; }

@media (max-width: 599px) {
  .flow .buy-card { padding: var(--fift-space-20); border-radius: var(--fift-corner-26); corner-shape: squircle; }
}
@media (prefers-reduced-motion: no-preference) {
  .flow .btn, .flow .btn-cherry { transition: opacity var(--fift-motion-duration-press) var(--fift-ease-smooth), background-color var(--fift-motion-duration-press) var(--fift-ease-smooth); }
}
/* contrast (check.sh, 8 Oct): the fine print sits on the flow's dark glass in both moods, so its links take the paragraph's
   own light ink (still underlined); the light-mode cherry on that glass read 1.4:1 */
.flow p.wi-fine a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
/* Raven 17:43: under Sign out, one quiet link to FIFT ID's own account page (email, password, sign out everywhere); same small type */
.flow-out { gap: var(--fift-space-8); flex-wrap: wrap; }
.flow a.btn-link { display: inline-flex; align-items: center; }
/* ui-0315 18:19 (rule 5: cherry never on text): the Bring 3 headline is ink, the same as the home's line (Raven 18:23: the optional link field skipped) */
.flow-bring [data-bring-label] { color: var(--fift-text); font-weight: var(--fift-type-weight-semibold); }