/* Hylē v4 · auth-flow.css — Round 2 · lane auth-flow.
   login, signup, verify-email, reset-password, onboarding use the Focus composition (.l-focus, system/layouts.css);
   checkout uses Transaction (.l-transact). The stage-1 mural (auth.css, 46/54 split) is gone: the brand is the field tile
   beside the wordmark, whose three converging threads are the page signature (drawn on load, spinning while busy,
   flying into the completion mark on success). One field grammar on every page: label above, 48px control, no lead icons,
   hint below only when it has something to say. */

/* =====================================================================================================
   Shell
   ===================================================================================================== */
.af .focus-top { position: relative; z-index: 2; }
.af-brand { min-height: 44px; border-radius: var(--r-sm); }
.af-brand { gap: 12px; }
.af-brand .field-tile { --tile: 40px; }
.af-brand .field-tile svg, .af-mark svg { width: 62%; height: 62%; overflow: visible; }
.af-brand .wordmark { min-height: 0; min-width: 0; }
.af-tile .th { stroke-dasharray: none; }
/* Busy: a slow light sweeps round the tile while a request is in flight (login, signup, reset, checkout). */
.af-tile.is-busy::before { content: ""; position: absolute; inset: -40%; z-index: -1; background: conic-gradient(from 0deg, rgba(255,255,255,0) 0 62%, rgba(255,255,255,.5) 82%, rgba(255,255,255,0) 100%); animation: af-spin 1s linear infinite; }
@keyframes af-spin { to { transform: rotate(1turn); } }
.focus-top-link a { display: inline; }
.af-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-ui); color: var(--ink-2); transition: color var(--d-2); }
.af-back:hover { color: var(--ink); }
.af-back svg { width: 16px; height: 16px; }
.af .focus-main { grid-template-columns: minmax(0, 1fr); padding-top: clamp(28px, 11vh, 120px); }
.af .focus-head .t-title { font-size: clamp(30px, 2.6vw, 36px); }
.af .focus-col > * { min-width: 0; }
.af [tabindex="-1"]:focus { outline: none; }
.af-col-wide { width: min(560px, 100%) !important; }
.af-sub { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); text-wrap: pretty; }
.af-sub strong { color: var(--ink); font-weight: 600; }
.af .focus-foot p { max-width: 60ch; }
.af .focus-foot a { text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; }
.af .focus-foot a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* =====================================================================================================
   Field grammar (shared by every page in the lane)
   ===================================================================================================== */
.af-form { display: flex; flex-direction: column; gap: 18px; }
.af .fld-hint:empty { display: none; }
.reveal-btn { width: 40px; height: 40px; margin-right: 4px; flex: none; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--ink-3); transition: color var(--d-2), background var(--d-2); }
.reveal-btn:hover { color: var(--ink); background: var(--sunken); }
.reveal-btn svg { width: 18px; height: 18px; }
.af .fld-label .link { font-weight: 500; }
.af-link { font-size: var(--fs-small); font-weight: 500; color: var(--accent-ink); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color var(--d-2); }
.af-link:hover { text-decoration-color: currentColor; }
.af-opt { font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
.af .check a { color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.af .check a:hover { text-decoration-color: currentColor; }
.af-sso { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.af-sso .btn { --btn-h: var(--ctl-lg); padding: 0 12px; }
.af-sso .btn svg { width: 18px; height: 18px; }
.af-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.af-submit { margin-top: 6px; }
.af-submit .af-total { margin-left: 2px; font-weight: 400; color: rgba(255,255,255,.78); font-variant-numeric: tabular-nums; }
/* Password: the field's own bottom edge fills with the field gradient as the rules are met; rules tick beneath. */
.af-pw { position: absolute; left: 10px; right: 10px; bottom: -1px; height: 2px; border-radius: 2px; overflow: hidden; pointer-events: none; }
.af-pw i { position: absolute; inset: 0 auto 0 0; width: var(--pw, 0%); border-radius: inherit; background: var(--brand-gradient); background-size: 400px 100%; transition: width var(--d-4) var(--ease-out); }
.af .rules { gap: 4px 16px; }
.af .rules li.ok { color: var(--success); }

/* Quiet note: text, not a coloured box (SSO hint, plan approval, tax-invoice timing). */
.af-note { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); }
.af-note > svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--ink-3); }
.af-note a { color: var(--accent-ink); font-weight: 500; }
.af-note.is-gap > svg { color: var(--warning); }

/* Signature line under login: three sources thread into one claim. */
.af-proof { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.af-proof svg { width: 64px; height: 32px; flex: none; overflow: visible; }
.af-proof .pt { fill: none; stroke: var(--ink-4); stroke-width: 1.4; stroke-linecap: round; }
.af-proof .pt.is-gap { stroke: var(--warning-line); stroke-dasharray: 2 3; }
.af-proof .pn { fill: var(--accent); }
.af-proof .pn.is-gap { fill: none; stroke: var(--brand-orange); stroke-width: 1.4; }
.af-proof .pc { fill: var(--ink); }

/* Completion mark: a 64px field tile that the header tile flies into. */
.af-mark { --tile: 64px; border-radius: 18px; }
.af-mark .tick { width: 46%; height: 46%; }
.af-done { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.af-done .t-title { font-size: clamp(30px, 2.6vw, 36px); }
.af-done .field-rule { width: 100%; }
.af-done-meta { font-size: var(--fs-small); color: var(--ink-3); }

/* Step label above a .focus-progress bar */
.af-steps { display: flex; flex-direction: column; gap: 10px; }
.af-steps-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: var(--fs-small); color: var(--ink-2); }
.af-steps-row b { color: var(--ink); font-weight: 600; }
.af-steps-row > span:first-child { white-space: nowrap; }
.focus-progress i { position: relative; overflow: hidden; transition: background var(--d-4) var(--ease-out); }
.focus-progress i.is-current.is-live::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent) no-repeat; background-size: 40% 100%; animation: rule-sheen 2.2s var(--ease-in-out) infinite; }

/* Views that swap inside one column */
.af-view { display: flex; flex-direction: column; gap: 24px; }
.af-actions { display: flex; flex-direction: column; gap: 10px; }
.af-actions-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.af-actions-2 .btn { --btn-h: var(--ctl-lg); }
.af .disclose { margin-top: 0; }
.af-inline-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 2px; font-size: var(--fs-ui); font-weight: 500; color: var(--accent-ink); border-radius: var(--r-sm); }
.af-inline-btn:hover { color: var(--accent); }
.af-inline-btn svg { width: 16px; height: 16px; }
.af-inline-btn[aria-disabled="true"] { color: var(--ink-3); pointer-events: none; }

/* =====================================================================================================
   Signup · step 2 identity row, consent list
   ===================================================================================================== */
.af-who { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--sunken); }
.af-who .avatar { width: 36px; height: 36px; }
.af-who b { display: block; font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; }
.af-who span.t-small { display: block; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-who .btn { margin-left: auto; }
.af-consent { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.af-consent li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.af-consent li + li { border-top: 1px solid var(--hairline); }
.af-consent li.is-all { min-height: 48px; }
.af-consent li.is-all .check { color: var(--ink); font-weight: 600; }
.af-consent .check { flex: 1; align-items: center; }
.af-consent .req { color: var(--ink-3); font-size: var(--fs-small); }
.af-consent a { font-size: var(--fs-small); font-weight: 500; color: var(--accent-ink); }
.af-consent.is-invalid { border-color: var(--danger-line); }
.af-consent.is-invalid li:not(.is-all) .check input[required]:not(:checked) + .box { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }

/* =====================================================================================================
   Verify · address line + live progress
   ===================================================================================================== */
.af-addr { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.af-addr-ico { position: relative; width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--sunken); color: var(--ink); }
.af-addr-ico svg { width: 20px; height: 20px; overflow: visible; }
.af-addr-ico::after { content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--sunken); animation: pulse 1.6s var(--ease-in-out) infinite; }
.af-addr.is-ok .af-addr-ico::after { background: var(--success); animation: none; }
.af-addr-text { flex: 1; min-width: 0; }
.af-addr-text b { display: block; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.af-addr-text span { display: block; font-size: var(--fs-small); color: var(--ink-2); }
.af-addr > a, .af-addr > .af-inline-btn { flex: none; font-size: var(--fs-small); font-weight: 500; color: var(--accent-ink); }
.af-resend { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--fs-ui); color: var(--ink-2); }
.af-resend .ring { width: 16px; height: 16px; transform: rotate(-90deg); display: none; }
.af-resend .ring circle { fill: none; stroke: var(--hairline-strong); stroke-width: 2.4; }
.af-resend .ring .ring-fill { stroke: var(--accent); stroke-dasharray: 50.27; stroke-dashoffset: var(--off, 0); stroke-linecap: round; transition: stroke-dashoffset 1s linear; }
.af-inline-btn.is-counting .ring { display: block; }
.af-inline-btn.is-counting .resend-icon { display: none; }
.af-inline-btn.is-loading { color: transparent; }

/* =====================================================================================================
   Reset · sent address pill, mail subject hint
   ===================================================================================================== */
.af-subject { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg); background: var(--sunken); font-size: var(--fs-ui); }
.af-subject .af-h { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 9px; background: var(--brand-mark); color: #fff; font-size: var(--fs-small); font-weight: 600; }
.af-subject b { display: block; font-weight: 600; color: var(--ink); }
.af-subject span.t-small { display: block; color: var(--ink-2); }

/* =====================================================================================================
   Onboarding · live summary line, choice rows, options
   ===================================================================================================== */
.ob-top-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.ob-sum { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
.ob-sum-label { margin-right: 4px; font-weight: 500; color: var(--ink-2); }
.ob-sum-empty { font-size: var(--fs-small); color: var(--ink-2); }
.ob-tok { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--r-sm); background: var(--sunken); font-size: var(--fs-small); font-weight: 500; color: var(--ink); white-space: nowrap; }
.ob-tok .dot { width: 7px; height: 7px; }
.ob-step { display: flex; flex-direction: column; gap: 22px; }
.ob-step .focus-head { gap: 8px; }
.ob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ob-list { display: flex; flex-direction: column; gap: 8px; }
.ob-choice { --fc: var(--ink-3); position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 12px 10px 14px; border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 1px 2px rgba(20,20,19,.04); text-align: left; cursor: pointer;
  transition: box-shadow var(--d-2) var(--ease-out), background var(--d-3) var(--ease-out), transform var(--d-1) var(--ease-press); -webkit-tap-highlight-color: transparent; }
.ob-choice:hover { box-shadow: inset 0 0 0 1px var(--ink-4), 0 1px 2px rgba(20,20,19,.04); }
.ob-choice:active { transform: scale(.985); }
.ob-choice:focus-visible, .ob-choice:focus-within:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.ob-choice[aria-checked="true"], .ob-choice:has(input:checked) { background: color-mix(in srgb, var(--fc) 6%, var(--raised)); box-shadow: inset 0 0 0 1.5px var(--ink), 0 1px 2px rgba(20,20,19,.04); }
.ob-choice > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ob-choice .dot { width: 10px; height: 10px; background: var(--fc); }
.ob-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ob-txt b { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); line-height: 1.3; }
.ob-txt > span { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.4; }
.ob-txt .t-mono { color: var(--ink-3); font-size: var(--fs-mono); letter-spacing: 0; }
.ob-tick { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; transform: scale(0); transition: transform var(--d-3) var(--ease-out); }
.ob-tick svg { width: 12px; height: 12px; }
.ob-choice[aria-checked="true"] .ob-tick, .ob-choice:has(input:checked) .ob-tick { transform: scale(1); }
.ob-choice .switch { margin-left: auto; min-height: 0; }
.ob-choice.is-src { cursor: pointer; }
.ob-choice.is-src:has(input:checked) { background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 1px 2px rgba(20,20,19,.04); }
.ob-choice .cite { flex: none; min-width: 34px; }
.ob-choice .badge { height: 20px; }
.ob-depth { display: inline-flex; align-items: flex-end; gap: 3px; width: 22px; height: 18px; flex: none; }
.ob-depth i { flex: 1; border-radius: 2px; background: var(--sunken-2); }
.ob-depth i:nth-child(1) { height: 40%; } .ob-depth i:nth-child(2) { height: 70%; } .ob-depth i:nth-child(3) { height: 100%; }
.ob-depth[data-level="1"] i:nth-child(-n+1), .ob-depth[data-level="2"] i:nth-child(-n+2), .ob-depth[data-level="3"] i { background: var(--ink); }
.ob-choice[data-value="bio"] { --fc: var(--field-bio); } .ob-choice[data-value="med"] { --fc: var(--field-med); } .ob-choice[data-value="aiml"] { --fc: var(--field-aiml); }
.ob-choice[data-value="eng"] { --fc: var(--field-eng); } .ob-choice[data-value="sci"] { --fc: var(--field-sci); } .ob-choice[data-value="quant"] { --fc: var(--field-quant); }
.ob-choice[data-value="biz"] { --fc: var(--field-biz); } .ob-choice[data-value="policy"] { --fc: var(--field-policy); } .ob-choice[data-value="ir"] { --fc: var(--field-ir); }
.ob-choice[data-value="soc"] { --fc: var(--field-soc); } .ob-choice[data-value="law"] { --fc: var(--field-law); } .ob-choice[data-value="hum"] { --fc: var(--field-hum); }
.ob-error:empty { display: none; }
.ob-error { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--danger); }
.ob-error svg { width: 14px; height: 14px; }
.ob-composer { border-radius: var(--r-lg); background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 1px 2px rgba(20,20,19,.04); transition: box-shadow var(--d-2); }
.ob-composer:focus-within { box-shadow: inset 0 0 0 1px var(--accent), var(--focus-ring); }
.ob-composer textarea { display: block; width: 100%; min-height: 84px; padding: 14px 16px 6px; border: 0; background: transparent; resize: none; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.ob-composer textarea::placeholder { color: var(--ink-3); }
.ob-q-bar { display: flex; justify-content: space-between; gap: 12px; padding: 0 16px 10px; font-size: var(--fs-small); color: var(--ink-3); }
.ob-presets-label { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.ob-actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; }
.ob-actions .go-hint { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--ink-3); }
.ob-actions [data-next] { min-width: 160px; }
.ob-more .disclose-list { display: flex; flex-direction: column; gap: 16px; padding: 8px 0 4px; }
.ob-more .switch { align-items: flex-start; }
.ob-more .switch .track { margin-top: 1px; }
.ob-more .sw-sub { display: block; margin-top: 2px; color: var(--ink-2); }
.ob-panel-ready { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; min-height: 176px; }
.ob-panel-ready .t-title { font-size: clamp(28px, 2.4vw, 34px); }
.af-summary { display: flex; flex-direction: column; border-top: 1px solid var(--hairline); }
.af-summary > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--hairline); font-size: var(--fs-ui); }
.af-summary dt { color: var(--ink-3); }
.af-summary dd { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 500; overflow-wrap: anywhere; }
.af-done-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* =====================================================================================================
   Tablet + phone
   ===================================================================================================== */
@media (max-width: 1024px) {
  /* Onboarding actions are a dock (system geometry); the page only sets its contents. */
  .ob-actions[data-dock] { padding-top: 10px; padding-bottom: calc(10px + var(--dock-inset, 0px)); }
  .ob-actions .go-hint { display: none; }
  .ob-actions [data-next] { flex: 1; }
}
@media (max-width: 640px) {
  .af-brand .field-tile { --tile: 36px; }
  .af .focus-main { padding-top: 16px; }
  .af .focus-col { gap: 22px; }
  .af .focus-head .t-title, .af-done .t-title { font-size: 30px; }
  .af-sso .btn { --btn-h: 48px; }
  .af-actions-2 .btn { --btn-h: 48px; }
  .af-form { gap: 16px; }
  .ob-grid { gap: 8px; }
  .ob-choice { min-height: 64px; padding: 10px 10px 10px 12px; gap: 10px; }
  .ob-grid .ob-tick { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; }
  .ob-step { gap: 18px; }
  .ob-sum-label { display: none; }
  .ob-ex-note { display: none; }
  .ob-sum { flex-wrap: nowrap; overflow: hidden; justify-content: flex-end; }
  .ob-sum:has(.ob-tok) { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px); mask-image: linear-gradient(90deg, transparent 0, #000 18px); }
  [data-step-next] { display: none; }
  .af-summary > div { grid-template-columns: 96px minmax(0, 1fr); }
  .focus-foot { padding-top: 12px; }
  .af-resend { flex-wrap: wrap; }
  .af-inline-btn { min-height: 44px; }
  .af-consent li { min-height: 44px; }
  .af-addr a, .af-consent a, .af-link { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; }
  .reveal-btn { width: 44px; height: 44px; margin-right: 2px; }
}


/* =====================================================================================================
   Round 4B · stage + one real object. The live field stays the environment (Round 3); the evidence threads, night
   satellites and phone mini strips are gone. Every flow page is one paper task card on the field, at one top line.
   Pages with something real to show put it in ONE app window (.af-ex: a night bezel around a paper well holding
   real product content), top-aligned with the card in the right column: login = the study you left (R-042),
   signup = a worked question with its field's real figure, onboarding = the first study your choices build.
   Single-task pages (verify, reset) are one centred card. Phone: header on a short field band, then the sheet.
   ===================================================================================================== */
@media (max-width: 640px) { .hide-sm { display: none !important; } }
.af.atmo.l-focus { background: var(--brand-night); grid-template-columns: minmax(0, 1fr); }
.af.atmo .focus-top { position: relative; z-index: 3; color: #fff; min-height: 76px; }
.af.atmo .focus-top .wordmark { color: #fff; }
.af.atmo .focus-top-link { display: flex; align-items: center; gap: 12px; color: #fff; }
.af.atmo .af-tile { box-shadow: 0 0 0 1px rgba(255,255,255,.22), 0 10px 26px -10px rgba(5,15,40,.6); }
.atmo-pill, .focus-top-link .atmo-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--brand-night); color: #fff !important; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); transition: background var(--d-2), box-shadow var(--d-2); }
.atmo-pill:hover { background: var(--brand-night-2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.af.atmo .af-back { min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--brand-night); color: #fff; font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.af.atmo .af-back:hover { background: var(--brand-night-2); color: #fff; }
.af.atmo .focus-foot { position: relative; z-index: 3; color: rgba(255,255,255,.86); }
.af.atmo .focus-foot a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
.af.atmo .focus-foot a:hover { text-decoration-color: #fff; }

/* One top line for every flow page: the card never jumps vertically between pages or steps. */
.af.atmo .focus-main { position: relative; z-index: 1; align-content: start; padding-top: clamp(16px, 5vh, 52px); padding-bottom: 56px; }
.af .atmo-card { width: min(480px, 100%); padding: 40px; gap: 24px; }
.af .atmo-card .focus-head { gap: 10px; }
.af .atmo-card .focus-head .t-title { font-size: clamp(32px, 2.6vw, 38px); }
.af-lede { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-2); text-wrap: pretty; }

/* ---------- The app window: night bezel, paper well, real content ---------- */
.af-ex { position: relative; z-index: 2; display: flex; flex-direction: column; min-width: 0; margin: 0; border-radius: var(--r-2xl); background: var(--brand-night); color: #fff; overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--night-edge), 0 2px 6px rgba(5,15,40,.2), 0 50px 110px -40px rgba(5,15,40,.72); }
.af-ex-bar { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 20px; }
.af-ex-tile { --tile: 30px; border-radius: 9px; }
.af-ex-tile svg { width: 60%; height: 60%; }
.af-ex-t { display: flex; flex-direction: column; min-width: 0; }
.af-ex-t b { font-size: var(--fs-ui); font-weight: 600; line-height: 1.3; }
.af-ex-t > span { font-size: var(--fs-small); line-height: 1.4; color: var(--on-dark-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-ex-s { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--on-dark-2); }
.af-ex-s::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #7fb6f0; box-shadow: 0 0 0 3px rgba(127,182,240,.18); }
.af-ex-s.is-live::before { animation: pulse 1.2s var(--ease-in-out) infinite; }
.af-ex-s.is-ok { color: #fff; }
.af-ex-s.is-ok::before { background: #7fd6c4; box-shadow: 0 0 0 3px rgba(127,214,196,.2); }
.af-ex-well { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 8px; border-radius: 20px; background: var(--paper); color: var(--ink); overflow: hidden; }
.af-ex-well img { display: block; width: 100%; height: auto; }
.af-ex-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; min-height: 60px; padding: 10px 20px; font-size: var(--fs-small); color: var(--on-dark-2); }
.af-ex .cite { background: rgba(255,255,255,.12); color: #fff; box-shadow: none; }
.af-ex .cite.gap { background: rgba(225,145,54,.22); color: var(--brand-glow); }
/* Scan line for the wipe-in (landing plates): a 2px field-coloured edge that runs ahead of the reveal. */
.af-ex-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 2; background: linear-gradient(180deg, var(--brand-blue), var(--brand-glow)); box-shadow: 0 0 16px rgba(255,210,154,.8); opacity: 0; pointer-events: none; }


@media (min-width: 1025px) {
  .af-split .atmo-stage { grid-template-columns: minmax(0, 480px) minmax(0, 540px); justify-content: center; align-items: start; column-gap: clamp(56px, 6vw, 96px); }
  .af-split .atmo-stage > .atmo-card { grid-column: 1; grid-row: 1; }
  .af-split .atmo-stage > .af-ex { grid-column: 2; grid-row: 1; }
  [data-flow="login"] .atmo-stage { align-items: stretch; }
}

/* ---------- Tablet + phone: the window steps aside; header on a short field band, then the paper sheet ---------- */
@media (max-width: 1024px) {
  .af-ex { display: none !important; }
  .af.atmo .focus-main { display: flex; flex-direction: column; align-items: stretch; padding: 8px 0 0; }
  .af .atmo-card { flex: 1; width: 100%; max-width: none; margin: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 32px var(--gutter) 24px; box-shadow: 0 -18px 40px -24px rgba(5,15,40,.6); }
  .af.atmo .focus-foot { background: var(--paper); color: var(--ink-2); padding-top: 4px; }
  .af.atmo .focus-foot a { color: var(--ink-2); text-decoration-color: var(--hairline-strong); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .af .atmo-card { width: min(560px, 100%); flex: none; margin: 24px auto 0; border-radius: var(--r-2xl); padding: 40px; }
  .af.atmo .focus-foot { background: none; color: rgba(255,255,255,.86); }
  .af.atmo .focus-foot a { color: #fff; }
}
@media (max-width: 640px) {
  .af.atmo .focus-top { min-height: 64px; }
  .af .atmo-card { gap: 22px; padding-top: 28px; }
  .af .atmo-card .focus-head .t-title { font-size: 30px; }
  .atmo-pill, .focus-top-link .atmo-pill, .af.atmo .af-back { min-height: 44px; }
}


/* ---------- Signup: a worked question with its field's real figure ---------- */
.af-ex-s:has(.dot)::before { content: none; }
.af-ex-s .dot { width: 8px; height: 8px; }

/* ---------- Onboarding: the first study, built by the choices ---------- */
.af-ob { padding: 20px 22px 8px; display: flex; flex-direction: column; gap: 14px; }
.af-ob-top { display: flex; align-items: center; gap: 10px; font-size: var(--fs-row); }
.af-ob-top b { font-weight: 600; }
.af-ob-top .dot { width: 10px; height: 10px; }
.af-ob-top .dot:not([data-f]) { background: var(--sunken-2); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.af-ob-q { font-size: var(--fs-lead); line-height: 1.4; font-weight: 600; letter-spacing: -.012em; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: pretty; }
.af-ob-q.is-empty { font-weight: 400; color: var(--ink-2); }
.af-ob-set { display: flex; flex-direction: column; margin: 2px -10px 0; }
.af-ob-set > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 11px 10px; border-top: 1px solid var(--hairline); border-radius: 8px; transition: background var(--d-3); }
.af-ob-set dt { font-size: var(--fs-small); color: var(--ink-2); }
.af-ob-set dd { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; min-width: 0; font-size: var(--fs-ui); color: var(--ink); font-weight: 500; }
.af-ob-set .ob-depth { width: 18px; height: 14px; }
.af-ob-srcs span { display: inline-flex; align-items: center; gap: 6px; transition: color var(--d-3); }
.af-ob-srcs span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.af-ob-srcs span.is-off { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--ink-4); }
.af-ob-srcs span.is-off::before { background: var(--ink-4); }
.af-ob-cite { font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 400; letter-spacing: 0; color: var(--ink); line-height: 1.5; }
.af-ex [data-row].is-now { background: color-mix(in srgb, var(--accent) 7%, transparent); border-top-color: transparent; }
.af-ex [data-row].is-now + div { border-top-color: transparent; }
.af-ex .af-ob-top.is-now, .af-ex .af-ob-q.is-now { margin: 0 -10px; padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 7%, transparent); }
@media (min-width: 1025px) {
  [data-flow="onboarding"] .atmo-stage { grid-template-columns: minmax(0, 580px) minmax(0, 500px); }
  [data-flow="onboarding"] .atmo-card.af-col-wide { width: 100% !important; }
  /* The window carries the running summary on desktop; the token line stays for tablet and phone. */
  [data-flow="onboarding"] .ob-sum { display: none; }
}

/* ---------- Verify + reset: one centred card; the email to look for is the page's object ---------- */
.af-single .atmo-stage { justify-items: center; }
@media (min-width: 1025px) { .af-single .atmo-card { width: min(500px, 100%); } }
.af-mail { display: flex; flex-direction: column; gap: 10px; }
.af-mail-label { font-size: var(--fs-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.af-mail-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--e-2); }
.af-mail-head { display: flex; align-items: center; gap: 12px; }
.af-mail-tile { --tile: 34px; border-radius: 10px; }
.af-mail-tile svg { width: 58%; height: 58%; }
.af-mail-from { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.af-mail-from b { font-size: var(--fs-small); font-weight: 600; color: var(--ink-2); line-height: 1.35; }
.af-mail-from span { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); line-height: 1.35; }
.af-mail-time { flex: none; align-self: flex-start; font-size: var(--fs-small); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.af-mail-time::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.af-mail-body { font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); padding-left: 46px; }
.af-mail-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding-left: 46px; font-size: var(--fs-small); color: var(--ink-2); }
.af-mail-btn { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: var(--fs-small); font-weight: 600; }
.af-mail-to { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: var(--fs-ui); color: var(--ink-2); }
.af-mail-to strong { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.af-lede .inline-link, .af-lede a { color: var(--accent-ink); font-weight: 500; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-ink) 35%, transparent); text-underline-offset: 3px; }
.af-lede strong { color: var(--ink); font-weight: 600; }
[data-flow="verify"] .af-resend { padding-top: 16px; border-top: 1px solid var(--hairline); }
[data-flow="verify"] .af-resend + .disclose { margin-top: -12px; }
[data-flow="verify"] [data-view="waiting"] > .af-inline-btn { padding-top: 4px; }
@media (max-width: 640px) {
  .af-mail-body, .af-mail-foot { padding-left: 0; }
}

/* ---------- Checkout: one paper sheet on the field, summary column + form (no connector, no card fields) ---------- */
.af-tx.atmo .l-transact.tx-sheet { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); align-items: stretch; gap: 0; width: min(1040px, calc(100% - 2 * var(--gutter))); max-width: none; margin: clamp(8px, 3vh, 32px) auto 56px; padding: 0;
  border-radius: var(--r-2xl); background: var(--paper); box-shadow: 0 2px 6px rgba(5,15,40,.18), 0 50px 110px -40px rgba(5,15,40,.7), 0 0 0 1px rgba(255,255,255,.08); }
.tx-summary { position: relative; top: auto; display: block; padding: 40px 36px; border-radius: var(--r-2xl) 0 0 var(--r-2xl); background: var(--sunken); color: var(--ink); box-shadow: inset -1px 0 0 var(--hairline); }
.tx-sum-in { position: sticky; top: 32px; display: flex; flex-direction: column; }
.tx-summary .t-stat { color: var(--ink); }
.tx-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.tx-head .t-eyebrow { color: var(--ink-2); }
.tx-plan b { display: block; font-size: var(--fs-heading); font-weight: var(--fw-heading); letter-spacing: var(--ls-heading); line-height: var(--lh-heading); }
.tx-due { display: flex; flex-direction: column; gap: 8px; margin: 24px 0 22px; }
.tx-due-label { font-size: var(--fs-small); color: var(--ink-2); }
.tx-due .t-stat { font-size: var(--fs-title); line-height: 1; }
.tx-target { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); }
.tx-strike { position: relative; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.tx-strike::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2px; border-radius: 2px; background: var(--brand-gradient); transform-origin: left center; transform: scaleX(var(--strike, 1)); }
.tx-lines { display: flex; flex-direction: column; }
.tx-line { border-top-color: var(--hairline); }
.tx-line dt { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }
.tx-line dd { margin: 0; color: var(--ink); }
.tx-line.is-total dt { color: var(--ink); }
.tx-line .tx-pct { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--r-sm); background: var(--success-tint); color: var(--success); font-size: var(--fs-small); font-weight: 600; }
.tx-grant, .tx-line dd.tx-grant { color: var(--success); }
.tx-foot { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--hairline); font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); }
.tx-foot svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--ink-2); }
.tx-toggle { display: none; }
.tx-stamp { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-sm); background: var(--success-tint); color: var(--success); font-size: var(--fs-small); font-weight: 600; }
.tx-stamp svg { width: 14px; height: 14px; }
.tx-form { padding: 40px 48px 44px; gap: 24px; }
.tx-form .focus-head .t-title { font-size: clamp(32px, 2.6vw, 38px); }
.tx-form, .tx-form fieldset { min-width: 0; }
.tx-form .af-form { gap: 26px; }
.tx-form legend { display: flex; align-items: baseline; justify-content: space-between; width: 100%; margin-bottom: 12px; font-size: var(--fs-row); }
.tx-legend-r { font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
.tx-sec + .tx-sec legend { padding-top: 24px; border-top: 1px solid var(--hairline); }
.tx-plans { display: flex; flex-direction: column; gap: 8px; }
.tx-plans .ob-choice { min-height: 54px; padding-left: 16px; }
.tx-plans .ob-txt { flex-direction: row; align-items: baseline; gap: 10px; }
.tx-plans .ob-txt > span { font-size: var(--fs-small); color: var(--ink-2); }
.tx-price { font-size: var(--fs-row); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.tx-plans .ob-choice .ob-tick { margin-left: 4px; }
.tx-nopay { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-lg); background: var(--success-tint); font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); }
.tx-nopay b { color: var(--ink); font-weight: 600; }
.tx-nopay-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--raised); color: var(--success); box-shadow: inset 0 0 0 1px var(--success-line); }
.tx-nopay-ico svg { width: 16px; height: 16px; }
.tx-tax .disclose-btn .disclose-sum { color: var(--ink-2); }
.tx-tax .disclose-list { display: flex; flex-direction: column; gap: 16px; padding: 6px 0 4px; }
.tx-tax .fld-row, .tx-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tx-done .field-panel { min-height: 168px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; }
.tx-done .field-panel .t-title { font-size: clamp(30px, 2.6vw, 36px); }
@media (max-width: 1024px) {
  .af-tx.atmo .l-transact.tx-sheet { grid-template-columns: minmax(0, 1fr); width: 100%; margin: 8px 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: 0 -18px 40px -24px rgba(5,15,40,.6); }
  .tx-summary { padding: 10px var(--gutter); border-radius: var(--r-xl) var(--r-xl) 0 0; box-shadow: inset 0 -1px 0 var(--hairline); }
  .tx-sum-in { position: static; }
  .tx-head, .tx-due, .tx-plan, .tx-foot, .tx-lines { display: none; }
  .tx-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; text-align: left; color: var(--ink); }
  .tx-toggle .grow b { display: block; font-size: var(--fs-ui); font-weight: 600; }
  .tx-toggle .grow span { display: block; font-size: var(--fs-small); color: var(--ink-2); }
  .tx-toggle-due { font-size: var(--fs-heading); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  .tx-toggle svg { width: 18px; height: 18px; color: var(--ink-2); transition: transform var(--d-3) var(--ease-out); }
  .tx-summary.is-open .tx-toggle svg { transform: rotate(180deg); }
  .tx-summary.is-open .tx-lines { display: flex; margin-top: 4px; }
  .tx-summary.is-open .tx-foot { display: flex; margin: 0 0 8px; }
  .tx-form { padding: 28px var(--gutter) 28px; }
  .af-tx.atmo .focus-foot { background: var(--paper); color: var(--ink-2); padding-top: 4px; }
  .af-tx.atmo .focus-foot a { color: var(--ink-2); }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .af-tx.atmo .l-transact.tx-sheet { width: min(560px, calc(100% - 2 * var(--gutter))); margin: 24px auto 56px; border-radius: var(--r-2xl); }
  .af-tx.atmo .focus-foot { background: none; color: rgba(255,255,255,.86); }
  .af-tx.atmo .focus-foot a { color: #fff; }
}
@media (max-width: 640px) {
  .tx-row2, .tx-tax .fld-row { grid-template-columns: minmax(0, 1fr); }
  .tx-form .af-form { gap: 22px; }
}

/* ---------- Contact: title and one facts panel on the field, the form card beside it ---------- */
.atmo-contact .focus-main.ct-stage { grid-template-columns: minmax(0, 420px) minmax(0, 560px); justify-content: center; align-items: start; column-gap: clamp(56px, 7vw, 112px); row-gap: 0; padding-top: clamp(16px, 5vh, 52px); padding-bottom: 56px; }
.ct-intro { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 16px; min-width: 0; padding-top: 8px; color: #fff; }
.ct-intro .t-title { color: #fff; font-size: var(--fs-title); max-width: 14ch; }
.ct-intro .ct-lede { max-width: 38ch; font-size: var(--fs-lead); line-height: var(--lh-lead); color: #fff; }
.ct-direct { display: none; }
.ct-aside { margin-top: 20px; display: flex; flex-direction: column; border-radius: var(--r-xl); background: var(--brand-night); color: var(--on-dark-2); box-shadow: inset 0 0 0 1px var(--night-edge), 0 40px 90px -40px rgba(5,15,40,.75); }
.ct-aside .ct-before { padding: 22px 24px 18px; border: 0; }
.ct-aside .ct-before b { display: block; margin-bottom: 6px; font-size: var(--fs-row); font-weight: 600; color: #fff; }
.ct-aside .ct-before p { font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--on-dark-2); }
.ct-aside .ct-links { margin-top: 10px; gap: 0; }
.ct-aside .ct-links a { min-height: 36px; color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.ct-aside .ct-links a:hover { text-decoration-color: #fff; color: #fff; }
.ct-facts { margin: 0; padding: 4px 24px 10px; border-top: 1px solid var(--night-edge); }
.ct-facts > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; padding: 6px 0; }
.ct-facts > div + div { border-top: 1px solid var(--night-edge); }
.ct-facts dt { font-size: var(--fs-small); color: var(--on-dark-2); }
.ct-facts dd { margin: 0; font-size: var(--fs-ui); color: #fff; }
.ct-facts .ct-mail { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ct-facts a.link { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); text-underline-offset: 3px; }
.ct-facts .icon-btn { color: #fff; }
.ct-facts .icon-btn:hover { background: rgba(255,255,255,.1); }
.atmo-contact .ct-col.atmo-card { width: 100%; padding: 36px 40px 36px; gap: 20px; }
.atmo-contact .ct-form { gap: 20px; }
.atmo-contact .ct-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border: 0; border-radius: 0; background: none; overflow: visible; }
.atmo-contact .ct-topic { border: 0; border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 1px var(--hairline-strong), 0 1px 2px rgba(20,20,19,.04); transition: box-shadow var(--d-2); }
.atmo-contact .ct-topic:hover { box-shadow: inset 0 0 0 1px var(--ink-4); }
.atmo-contact .ct-topic:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--ink); }
.atmo-contact .ct-row { grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 64px; padding: 10px 14px; border-radius: inherit; }
.atmo-contact .ct-topic input:checked + .ct-row { background: none; }
.atmo-contact .ct-dot { width: 18px; height: 18px; margin: 0; }
.atmo-contact .ct-topic input:checked + .ct-row .ct-dot { border-width: 5.5px; }
.atmo-contact .ct-t b { font-size: var(--fs-ui); line-height: 1.35; }
.atmo-contact .ct-topic input:checked + .ct-row .ct-t span, .atmo-contact .ct-t span { display: none; }
.atmo-contact .ct-area textarea { min-height: 112px; }
@media (max-width: 1024px) {
  .atmo-contact .focus-main.ct-stage { display: flex; flex-direction: column; align-items: stretch; padding: 4px 0 0; gap: 0; }
  .ct-intro { display: contents; }
  .ct-intro .t-title { order: 1; margin: 0 var(--gutter); font-size: 30px; max-width: 18ch; }
  .ct-intro .ct-lede { display: none; }
  .ct-direct { order: 2; display: block; margin: 8px var(--gutter) 20px; font-size: var(--fs-ui); color: #fff; }
  .ct-direct a { color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(255,255,255,.5); text-underline-offset: 3px; }
  .atmo-contact .ct-col.atmo-card { order: 3; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 28px var(--gutter) 28px; box-shadow: 0 -18px 40px -24px rgba(5,15,40,.6); }
  .ct-aside { order: 4; margin: 0; border-radius: 0; box-shadow: none; }
  .ct-aside .ct-before { padding: 24px var(--gutter) 18px; }
  .ct-facts { padding: 4px var(--gutter) 16px; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .ct-intro .t-title, .ct-direct { width: min(560px, calc(100% - 2 * var(--gutter))); margin-left: auto; margin-right: auto; }
  .atmo-contact .ct-col.atmo-card, .ct-aside { width: min(560px, calc(100% - 2 * var(--gutter))); margin: 0 auto; border-radius: var(--r-2xl); }
  .ct-aside { margin-top: 24px; margin-bottom: 24px; }
}
@media (max-width: 640px) {
  .atmo-contact .ct-list { grid-template-columns: minmax(0, 1fr); }
  .atmo-contact .ct-row { min-height: 52px; }
  .ct-aside .ct-links a { min-height: 44px; }
  .ct-facts .icon-btn { width: 44px; height: 44px; }
}


/* ---------- Round 4B fixes after the first screenshots ---------- */
/* Mail row: sender line carries the time, so the subject keeps the full width. */
.af-mail-head { align-items: flex-start; }
.af-mail-from b { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.af-mail-from b .af-mail-time { font-weight: 400; }
.ob-grid .ob-choice { min-height: 58px; padding: 9px 12px 9px 9px; }
@media (min-width: 1025px) { [data-flow="onboarding"] .ob-ex-note { display: none; } }
/* Contact: one night panel, no inner frame. */
.atmo-contact .ct-aside .ct-before { box-shadow: none; background: none; border-radius: 0; }
.atmo-contact .focus-top-link .atmo-pill { text-decoration: none; }


@media (max-width: 640px) {
  .ob-grid .ob-choice { min-height: 60px; padding: 8px 10px 8px 8px; gap: 10px; }
  .ob-grid .ob-txt > span { display: none; }
  .ob-grid .ob-txt b { font-size: var(--fs-ui); line-height: 1.3; }
}


/* Round 4A dock contract: a dock's ancestors give up their z-index on tablet and phone, so the dock is the top layer. */
@media (max-width: 1024px) { .af.atmo .focus-main:has([data-dock]:not([hidden])) { z-index: auto; } }


@media (min-width: 1025px) {
  .af-split .atmo-stage > .atmo-card, .af-split .atmo-stage > .af-ex { justify-self: stretch; width: 100%; }
  /* Login keeps its geometry when the card swaps to "You're in": the row holds the sign-in height. */
  [data-flow="login"] .atmo-stage { grid-template-rows: minmax(560px, auto); }
  [data-flow="login"] .af-done { justify-content: center; flex: 1; }
}


/* Checkout: "no card" belongs to the money column on desktop; on phone it sits above the button. */
.tx-summary .tx-nopay { margin-top: 18px; padding: 14px 16px; gap: 12px; background: var(--raised); box-shadow: var(--e-1); }
.tx-nopay-sm { display: none; }
.tx-nopay-sm > svg { color: var(--success); }
.tx-nopay-sm b { color: var(--ink); font-weight: 600; }
.tx-plans .ob-choice { min-height: 52px; }
@media (max-width: 1024px) {
  .tx-summary .tx-nopay { display: none; }
  .tx-summary.is-open .tx-nopay { display: flex; margin: 4px 0 12px; }
  .tx-nopay-sm { display: flex; }
}

.tx-strike::after { height: 1.5px; background: var(--ink-2); }
@media (min-width: 1025px) { .af.atmo .focus-main { padding-bottom: 36px; } }

/* Narrow desktops: the field tiles drop their sub-label before they wrap to four lines. */
@media (min-width: 1025px) and (max-width: 1240px) { .ob-grid .ob-txt > span { display: none; } }
@media (min-width: 641px) and (max-width: 1024px) {
  .ct-intro .t-title { max-width: none; margin-top: 20px; }
  .ct-intro .t-title > * { max-width: 18ch; }
}



/* =====================================================================================================
   Audit fix B · lane auth (2026-10-07). Founder notes + the audit-1006 ledgers (desktop + phone).
   Header: the system lockup (Stage A) and ONE secondary action as night glass; the only solid primary is in the card.
   Fields reach 3:1 against white and paper (WCAG 1.4.11). Side window: a figure reel (figures-pro) instead of one frozen plate.
   ===================================================================================================== */
.af.atmo .atmo-pill, .af.atmo .focus-top-link .atmo-pill, .af.atmo .af-back { min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: rgba(8,18,40,.36); color: #fff !important; font-size: var(--fs-ui); font-weight: 500; text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); transition: background var(--d-2), box-shadow var(--d-2); }
.af.atmo .atmo-pill:hover, .af.atmo .af-back:hover { background: rgba(8,18,40,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.6); color: #fff; }
.af.atmo .atmo-pill:focus-visible, .af.atmo .af-back:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.af.atmo .focus-top-link { gap: 14px; font-size: var(--fs-ui); }
@media (min-width: 1025px) {
  .af.atmo .focus-foot { background: linear-gradient(to top, rgba(5,12,30,.42), rgba(5,12,30,0)); }
  .af.atmo .atmo-card, .af-tx.atmo .l-transact.tx-sheet { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(10,20,40,.06), 0 1px 2px rgba(5,15,40,.12), 0 12px 32px -8px rgba(5,15,40,.28), 0 40px 80px -24px rgba(5,15,40,.35); }
}
.af .focus-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.af-foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }

/* ---------- Field grammar ---------- */
.af .control, .af .select-trigger { border-color: #8f897e; box-shadow: inset 0 1px 2px rgba(20,20,19,.05); }
.af .control:hover, .af .select-trigger:hover { border-color: #5c574f; }
.af .control:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.af .check input:not(:checked):not(:indeterminate) + .box { border-color: #8f897e; }
.af .reveal-btn { width: 44px; height: 44px; margin-right: 2px; color: var(--ink-2); }
.af .reveal-btn svg { width: 20px; height: 20px; }
.af .reveal-btn[aria-pressed="true"] { color: var(--ink); background: var(--sunken); }
.af .reveal-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.af .af-link, .af .af-legal a { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; padding-block: 13px; margin-block: -13px; }
.af .af-link:hover, .af .af-legal a:hover { text-decoration-color: currentColor; }
.af .focus-divider { color: var(--ink-2); }
.af .focus-divider::before, .af .focus-divider::after { background: #d9d4cc; }
.af .atmo-card .focus-head { gap: 14px; }
.af .atmo-card .focus-head .t-title { line-height: 1.2; }
.af .af-lede, .af .af-sub { text-wrap: balance; }
.af-hint { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.af-hint svg { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.af-legal { margin-top: -4px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); text-align: center; text-wrap: balance; }
.af-legal a { color: var(--ink); font-weight: 500; }
/* One provider, full width, raised: an action, not a field. */
.af-sso.is-one { grid-template-columns: minmax(0, 1fr); }
.af .af-sso .btn, .af-alt .btn-secondary { background: var(--raised); box-shadow: inset 0 0 0 1px #c9c2b4, 0 1px 0 rgba(20,20,19,.05), 0 1px 2px rgba(20,20,19,.08); transition: background var(--d-2), box-shadow var(--d-2), transform var(--d-2) var(--ease-out); }
.af .af-sso .btn:hover, .af-alt .btn-secondary:hover { background: #f3f2ed; box-shadow: inset 0 0 0 1px #8f897e, 0 4px 10px -6px rgba(20,20,19,.25); transform: translateY(-1px); }
.af .af-sso .btn svg, .af-alt .btn svg { width: 18px; height: 18px; }
/* Signup: two steps, two equal segments. */
.focus-progress.af-2seg { gap: 8px; }
.af-2seg i { height: 4px; border-radius: 999px; background: #e4e0d6; }
.af-2seg i.is-current { background: var(--brand-gradient); }
.af-2seg i.is-done { background: var(--ink); }
/* Password rules: an empty ring until met, then a check (not colour alone). */
.af .rules { gap: 6px 16px; }
.af .rules li { gap: 7px; font-weight: 500; color: var(--ink-2); }
.af .rules li::before { width: 14px; height: 14px; background: var(--raised); box-shadow: inset 0 0 0 1.5px #a39d92; transform: none; }
.af .rules li.ok { color: var(--ink); }
.af .rules li.ok::before { transform: none; box-shadow: none; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }

/* ---------- The side window: night bezel, paper well, the figure reel ---------- */
.af-ex-tile.hy-avatar { --avatar-size: 32px; }
.af-ex .af-ex-bar { min-height: 64px; }
.af-ex-reel .af-reel-home, .af-ex-ob .af-ex-well { padding: 18px 20px 16px; }
.af-ex-reel .af-reel-home { margin-bottom: 8px; }
.af-ex-foot { min-height: 52px; }
@media (min-width: 1025px) {
  .af-split .atmo-stage { grid-template-columns: minmax(0, 460px) minmax(0, 600px); column-gap: clamp(48px, 5vw, 80px); }
  [data-flow="onboarding"] .atmo-stage { grid-template-columns: minmax(0, 580px) minmax(0, 500px); }
  .af-reel-slot { display: none !important; }
}
.af-reel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.af-reel-stage { position: relative; border-radius: 12px; background: #fffefa; box-shadow: 0 0 0 1px #e5e2d8, 0 1px 2px rgba(20,20,19,.04); overflow: hidden; }
.af-reel-slide { position: absolute; inset: 0; padding: 12px 14px 10px; background: #fffefa; }
.af-reel-scan { position: absolute; top: 0; bottom: 0; z-index: 3; width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--brand-blue), var(--brand-glow)); box-shadow: 0 0 14px rgba(255,210,154,.85); pointer-events: none; }
.af-reel.is-compact .af-reel-slide { padding: 9px 9px 8px; }
.af-reel-fig { width: 100%; height: 100%; }
.af-reel-meta { display: flex; flex-direction: column; gap: 6px; }
.af-reel-k { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.af-reel-k .field-glyph { --s: 26px; border-radius: 8px; }
.af-reel-kt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-reel-kt b { font-weight: 600; color: var(--ink); }
.af-reel-kt b::after { content: "·"; margin: 0 6px; font-weight: 400; color: var(--ink-3); }
.af-reel-n { flex: none; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.af-reel-t { min-height: 3.06em; padding-bottom: .16em; font-size: var(--fs-ui); line-height: 1.45; font-weight: 500; color: var(--ink); text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.af-reel-ctl { display: flex; align-items: center; gap: 6px; }
.af-reel-btn { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--ink-2); background: var(--raised); box-shadow: inset 0 0 0 1px #c9c2b4; transition: color var(--d-2), background var(--d-2), box-shadow var(--d-2), transform var(--d-1) var(--ease-press); }
.af-reel-btn:hover { color: var(--ink); background: #f3f2ed; box-shadow: inset 0 0 0 1px #8f897e; }
.af-reel-btn:active { transform: scale(.94); }
.af-reel-btn svg { width: 16px; height: 16px; }
.af-reel-pp { margin-left: auto; }
.af-reel-pp[aria-pressed="true"] { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.af-reel-btn:focus-visible, .af-reel-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.af-reel-dots { display: flex; align-items: center; gap: 0; min-width: 0; }
.af-reel-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 12px; transition: width .35s var(--ease-out); }
.af-reel-dot i { position: relative; display: block; width: 7px; height: 7px; border-radius: 4px; background: #c9c3b6; overflow: hidden; transition: width .35s var(--ease-out), background var(--d-2); }
button.af-reel-dot:hover i { background: var(--ink-3); }
.af-reel-dot[aria-current="true"] { width: 42px; }
.af-reel-dot[aria-current="true"] i { width: 32px; background: #ddd8cc; }
.af-reel-dot[aria-current="true"] i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); transform-origin: left center; }
.af-reel.is-run .af-reel-dot[aria-current="true"] i::after { animation: af-reel-run 4.2s linear both; }
.af-reel.is-paused .af-reel-dot[aria-current="true"] i::after { animation-play-state: paused; }
.af-reel.is-manual .af-reel-dot[aria-current="true"] i::after { animation: none; }
@keyframes af-reel-run { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.af-reel.is-single .af-reel-ctl, .af-reel.is-single .af-reel-n { display: none; }
.af-reel-src { margin-top: -4px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.af-reel.is-compact .af-reel-btn { width: 44px; height: 44px; }
.af-reel.is-compact .af-reel-dots { flex: 1; justify-content: center; }
/* Tablet + phone: the reel moves into the sheet, under the task, on a light surface. */
.af-reel-slot { padding-top: 22px; border-top: 1px solid var(--hairline); }
.af-reel-slot[hidden] { display: none; }
.af-reel-slot::before { content: "What Hylē draws"; display: block; margin-bottom: 12px; font-size: var(--fs-small); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
@media (max-width: 1024px) { .af-reel-slot .af-reel-t { -webkit-line-clamp: 3; min-height: 0; } }

/* ---------- Verify ---------- */
.af-stepper { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.af-stepper li { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.af-stepper i { position: relative; display: block; height: 4px; border-radius: 999px; background: #e4e0d6; overflow: hidden; }
.af-stepper .is-done i { background: var(--success); }
.af-stepper .is-done span::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; border-radius: 50%; background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 8px no-repeat; }
.af-stepper .is-now { font-weight: 600; color: var(--ink); }
.af-stepper .is-now i::after { content: ""; position: absolute; inset: 0 50% 0 0; border-radius: inherit; background: var(--brand-orange); }
.af-addr-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 16px; }
.af-addr-line strong { font-size: var(--fs-row); font-weight: 600; letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
.af-row-link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--fs-ui); font-weight: 500; color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.af-row-link:hover { text-decoration-color: currentColor; }
.af-mail-tile.hy-avatar { --avatar-size: 32px; }
.af-mail-head { align-items: center; gap: 12px; }
.af-mail-from { gap: 2px; }
.af-mail-from .af-mail-sender { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.af-mail-from .af-mail-sender b { display: inline; font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
.af-mail-from .af-mail-time { align-self: auto; display: inline; font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.af-mail-from .af-mail-time::before { content: none; }
.af-mail-from .af-mail-subj { font-size: var(--fs-ui); font-weight: 500; color: var(--ink); line-height: 1.35; text-wrap: pretty; }
.af-mail-body, .af-mail-foot { padding-left: 44px; }
.af-mail-btn { height: 28px; background: transparent; color: var(--ink-2); font-weight: 500; box-shadow: inset 0 0 0 1px var(--hairline-strong); pointer-events: none; }
.af-pmark { width: 18px; height: 18px; flex: none; }
.af-tip { display: flex; align-items: flex-start; gap: 10px; padding: 4px 0 2px; font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); }
.af-tip svg { width: 16px; height: 16px; margin-top: 3px; flex: none; color: var(--ink-3); }
[data-flow="verify"] .af-resend + .disclose { margin-top: -8px; }
.af-next-row { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 16px; border-radius: var(--r-lg); background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px #cfc8b9; transition: box-shadow var(--d-2), transform var(--d-2) var(--ease-out); }
.af-next-row:hover { box-shadow: inset 0 0 0 1px #8f897e, 0 6px 16px -10px rgba(20,20,19,.3); transform: translateY(-1px); }
.af-next-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.af-next-ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--sunken); }
.af-next-ico svg { width: 18px; height: 18px; }
.af-next-row .grow { min-width: 0; }
.af-next-row .grow b { display: block; font-size: var(--fs-ui); font-weight: 600; line-height: 1.35; }
.af-next-row .grow span { display: block; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.af-next-row > svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
/* Reset: the Google path is its own small block under a labelled divider. */
.af-alt { display: flex; flex-direction: column; gap: 12px; }
.af-alt-t { font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); }

/* ---------- Onboarding: fields are a checkbox group ---------- */
.ob-pick-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: -8px; font-size: var(--fs-small); color: var(--ink-2); }
.ob-count { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); background: var(--sunken); color: var(--ink-2); font-weight: 500; font-variant-numeric: tabular-nums; transition: background var(--d-3), color var(--d-3); }
.ob-count b { font-weight: 700; color: var(--ink); }
.ob-count.is-on { background: var(--ink); color: #fff; }
.ob-count.is-on b { color: #fff; }
.ob-grid .ob-choice { min-height: 62px; padding: 10px 42px 10px 10px; gap: 12px; box-shadow: inset 0 0 0 1px #cfc8b9, 0 1px 2px rgba(20,20,19,.04); transition: box-shadow var(--d-2) var(--ease-out), background var(--d-3) var(--ease-out), transform var(--d-2) var(--ease-out); }
.ob-grid .ob-choice:hover { box-shadow: inset 0 0 0 1px #8f897e, 0 6px 14px -10px rgba(20,20,19,.35); transform: translateY(-1px); }
.ob-grid .ob-choice:active { transform: scale(.985); }
.ob-grid .ob-choice[aria-checked="true"] { background: color-mix(in srgb, var(--fc) 7%, var(--raised)); box-shadow: inset 0 0 0 1.5px var(--ink), 0 1px 2px rgba(20,20,19,.04); }
.ob-grid .field-glyph { --s: 40px; }
.ob-grid .ob-txt b { white-space: nowrap; }
.ob-grid .ob-txt > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ob-grid .ob-tick, .tx-plans .ob-tick { position: absolute; top: 50%; right: 12px; width: 20px; height: 20px; margin-top: -10px; border-radius: 6px; transform: none; background: var(--raised); color: transparent; box-shadow: inset 0 0 0 1.5px #8f897e; transition: background var(--d-2), box-shadow var(--d-2), color var(--d-2); }
.ob-grid .ob-choice[aria-checked="true"] .ob-tick { background: var(--ink); color: #fff; box-shadow: none; }
.btn.is-soft-off { background: #e4e0d8; color: #5c574f; box-shadow: none; }
.btn.is-soft-off:hover { background: #dcd7cd; }
.btn.is-soft-off .arrow { opacity: .6; }
.ob-later { margin-right: auto; font-size: var(--fs-small); color: var(--ink-2); }
.ob-actions .go-hint { display: none; }
[data-flow="onboarding"] .focus-progress { gap: 6px; }
[data-flow="onboarding"] .focus-progress i { height: 4px; border-radius: 999px; background: #e4e0d6; }
[data-flow="onboarding"] .focus-progress i.is-done { background: var(--ink); }
[data-flow="onboarding"] .focus-progress i.is-current { background: var(--brand-gradient); }
.ob-sum-f { display: inline-flex; align-items: center; gap: 6px; margin-right: 12px; }
@media (min-width: 1025px) {
  [data-flow="onboarding"] .atmo-card { padding: 32px 36px; gap: 20px; }
  [data-flow="onboarding"] .ob-step { gap: 18px; }
  [data-flow="onboarding"] .focus-foot p { display: none; }
}
/* Panel: the picked fields' figures are the reel; depth, sources and citation sit on one row of three. */
.af-ob-top .af-ob-dots { display: inline-flex; gap: 3px; }
.af-ob-top .af-ob-dots:empty { display: none; }
.af-ob-top .dot { width: 9px; height: 9px; }
.af-ob-top b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-ob-q.is-empty { display: none; }
.af-ob-reel .af-reel-src { display: none; }
.af-ob-reel .af-reel-t { display: block; -webkit-line-clamp: none; overflow: visible; min-height: 2.9em; }
.af-ex-ob .af-ob-set { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 12px; margin: 0 -10px; }
.af-ex-ob .af-ob-set > div[data-row="sources"] { grid-column: 1 / -1; grid-row: 2; flex-direction: row; align-items: baseline; gap: 12px; padding-top: 4px; }
.af-ex-ob .af-ob-set > div[data-row="sources"] dt { flex: none; }
.af-ex-ob .af-ob-set > div { display: flex; flex-direction: column; gap: 2px; padding: 10px; border-top: 0; }
.af-ex-ob .af-ob-set dd { flex-wrap: wrap; }
.af-ex-ob .af-ob-srcs { gap: 4px 8px; }
.af-ex-ob .af-ob-cite { display: inline; font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 500; letter-spacing: 0; white-space: nowrap; }

/* ---------- Checkout ---------- */
.tx-plans .tx-plan-row { min-height: 56px; padding: 0 44px 0 16px; background: var(--raised); box-shadow: inset 0 0 0 1px #cfc8b9; }
.tx-plans .tx-plan-row:hover { box-shadow: inset 0 0 0 1px #8f897e; }
.tx-plans .tx-plan-row:has(input:checked) { background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(20,20,19,.06); }
.tx-plans .ob-tick { border-radius: 50%; }
.tx-plans .tx-plan-row:has(input:checked) .ob-tick { background: var(--raised); color: transparent; box-shadow: inset 0 0 0 6px var(--ink); }
.tx-price small { margin-left: 6px; font-size: var(--fs-small); font-weight: 400; color: var(--ink-2); }
.tx-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tx-method { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 8px; padding: 14px 14px 12px; border-radius: var(--r-md); background: var(--raised); box-shadow: inset 0 0 0 1px #cfc8b9, 0 1px 2px rgba(20,20,19,.04); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: box-shadow var(--d-2) var(--ease-out), transform var(--d-2) var(--ease-out); }
.tx-method > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tx-method:hover { box-shadow: inset 0 0 0 1px #8f897e, 0 6px 14px -10px rgba(20,20,19,.35); transform: translateY(-1px); }
.tx-method:active { transform: scale(.985); }
.tx-method:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.tx-method:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 4px rgba(20,20,19,.06); }
.tx-m-marks { display: flex; align-items: center; gap: 6px; height: 24px; }
.tx-radio { width: 20px; height: 20px; border-radius: 50%; background: var(--raised); box-shadow: inset 0 0 0 1.5px #8f897e; transition: box-shadow var(--d-2) var(--ease-out); }
.tx-method:has(input:checked) .tx-radio { box-shadow: inset 0 0 0 6px var(--ink); }
.tx-m-t { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tx-m-t b { font-size: var(--fs-ui); font-weight: 600; color: var(--ink); line-height: 1.3; }
.tx-m-t span { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.pm { display: inline-flex; align-items: center; justify-content: center; height: 24px; min-width: 38px; padding: 0 6px; border-radius: 5px; background: #fff; box-shadow: inset 0 0 0 1px #e2ded4; font-size: var(--fs-small); line-height: 1; font-weight: 800; }
.pm-visa { color: #1a1f71; font-style: italic; letter-spacing: .06em; }
.pm-mc i { width: 14px; height: 14px; border-radius: 50%; background: #eb001b; }
.pm-mc i + i { margin-left: -5px; background: #f79e1b; mix-blend-mode: multiply; }
.pm-paypal { color: #0070ba; font-style: italic; letter-spacing: -.01em; }
.pm-paypal b { font-weight: 800; color: #003087; }
.pm-toss { background: #0064ff; color: #fff; box-shadow: none; letter-spacing: -.02em; }
.tx-preview { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); background: var(--sunken); color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; }
.tx-preview svg { width: 14px; height: 14px; }
.tx-pay-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: var(--fs-desc); line-height: var(--lh-desc); color: var(--ink-2); }
.tx-pay-note svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--success); }
.tx-pay-note b { font-weight: 600; color: var(--ink); }
.tx-form .tx-sec legend { font-weight: 600; }
.tx-tax .disclose-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: var(--r-md); background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px #cfc8b9; transition: box-shadow var(--d-2); }
.tx-tax .disclose-btn:hover { box-shadow: inset 0 0 0 1px #8f897e; }
.tx-tax .disclose-btn .disclose-sum { grid-column: 1; margin: 0; font-size: var(--fs-small); color: var(--ink-2); }
.tx-tax .disclose-btn svg { grid-column: 2; grid-row: 1 / span 2; margin: 0; width: 18px; height: 18px; color: var(--ink-2); }
.tx-form .check { align-items: flex-start; min-height: 44px; padding-block: 10px; }
.tx-form .check a { white-space: nowrap; }
.tx-form .af-submit { --btn-h: 52px; gap: 10px; padding: 0 20px; }
.tx-form .af-submit .grow { flex: 1; text-align: left; }
.tx-form .af-submit .af-total { margin: 0; font-weight: 500; }
.tx-form .af-submit.is-soft-off .af-total { color: #5c574f; }
.tx-agree-hint { margin-top: -14px; font-size: var(--fs-small); color: var(--ink-2); text-align: center; }
.tx-agree-hint[hidden] { display: none; }
.tx-strike { font-weight: 400; color: var(--ink-2); }
.tx-strike::after { height: 1px; background: var(--ink-2); }
.tx-plan { display: none; }
.tx-inc { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.tx-inc .t-eyebrow { margin-bottom: 14px; color: var(--ink-2); }
.tx-inc ul { display: flex; flex-direction: column; gap: 12px; }
.tx-inc li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-2); }
.tx-inc li b { display: block; font-size: var(--fs-ui); font-weight: 600; line-height: 1.35; color: var(--ink); }
.tx-inc-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--raised); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hairline-strong); }
.tx-inc-ico svg { width: 16px; height: 16px; }
@media (min-width: 1025px) {
  .tx-form { padding: 36px 44px 36px; gap: 20px; }
  .tx-form .af-form { gap: 22px; }
  .tx-sec + .tx-sec legend { padding-top: 20px; }
  .tx-summary { padding: 36px 32px; }
  .tx-due { margin: 16px 0 18px; }
}
.tx-toggle-due { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.tx-toggle-due small { font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; color: var(--ink-2); }

/* ---------- Tablet + phone ---------- */
@media (max-width: 1024px) {
  .tx-inc { display: none; }
  .tx-summary.is-open .tx-inc { display: block; margin-top: 12px; }
  .tx-toggle { min-height: 64px; }
  [data-flow="onboarding"] .focus-foot span { display: none; }
  [data-flow="onboarding"] .focus-foot { padding-bottom: calc(var(--safe-bottom, 0px) + 20px); }
  .ob-actions[data-dock] { background: rgba(250,249,245,.97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 -1px 0 rgba(20,20,19,.08); }
  .ob-later { display: none; }
}
@media (max-width: 640px) {
  .af.atmo .focus-main { padding-top: 14px; }
  .af .atmo-card { gap: 22px; }
  .tx-methods { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tx-method { grid-template-columns: 84px minmax(0, 1fr) auto; min-height: 64px; padding: 10px 14px; }
  .tx-m-t { grid-column: 2; grid-row: 1; }
  .tx-radio { grid-column: 3; grid-row: 1; }
  .af-mail-body, .af-mail-foot { padding-left: 0; }
  .ob-grid .ob-choice { padding: 10px 36px 10px 10px; gap: 10px; }
  .ob-grid .field-glyph { --s: 36px; }
  .ob-grid .ob-tick { right: 10px; width: 18px; height: 18px; margin-top: -9px; top: 50%; }
  .ob-grid .ob-txt b { white-space: normal; line-height: 1.25; }
  .af-addr-line { flex-direction: column; align-items: flex-start; }
  .af.atmo .atmo-pill, .af.atmo .focus-top-link .atmo-pill, .af.atmo .af-back { min-height: 44px; }
}


/* Onboarding follow-ups after the first shots */
@media (max-width: 640px) {
  .ob-grid .ob-choice { padding: 10px 34px 10px 8px; gap: 8px; }
  .ob-grid .field-glyph { --s: 32px; }
  .ob-grid .ob-tick { right: 8px; }
  .ob-grid .ob-txt b { font-size: var(--fs-ui); }
  .ob-sum-empty { display: none; }
}


/* Final pass: smaller items from the ledgers */
@media (min-width: 1025px) { [data-flow="onboarding"] .ob-grid .ob-choice { min-height: 56px; padding-block: 7px; } }
.af-mail-tile.hy-avatar { --avatar-size: 32px; }
@media (max-width: 1024px) {
  .af .atmo-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 -18px 40px -24px rgba(5,15,40,.6); }
  .af.atmo .focus-foot { padding-bottom: max(28px, calc(env(safe-area-inset-bottom) + 12px)); }
}
@media (max-width: 640px) {
  .af-mail-tile.hy-avatar { --avatar-size: 24px; }
  .af-mail-from .af-mail-subj { margin-left: -36px; margin-top: 6px; }
}



/* =====================================================================================================
   Founder review 10-09 · auth group (login, signup, verify-email, reset-password, onboarding)
   1  Phone and tablet: the card floats over the live field (16 px inset, 24 px radius, every corner) instead of becoming a
      full-screen sheet; the field shows above, beside and below it. The figure window floats under the card.
   2  The figure reel shows stills of the Figure Lab's 3D / WebGL modules (assets/auth-flow/figures.js), one set per page,
      in a 3:2 plate. At 1920 the window grows so the figure carries the page.
   3  The disclaimer is a quiet line on the field; the product-preview label is a glass pill under the task.
   ===================================================================================================== */
.af-reel-slot { display: none !important; }
.af-reel-stage { aspect-ratio: 3 / 2; height: auto !important; }
.af-reel-slide.is-img { padding: 0; }
.af-reel-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.af-reel-src { margin-top: -6px; }

/* Desktop: one top line; the window grows on wide screens. */
@media (min-width: 1025px) { .af-split .atmo-stage > .af-ex { align-self: start; } }
/* Anything that follows the window (onboarding's worked packs) sits above the window's long drop shadow. */
.af-split.atmo .atmo-stage > [data-v31-root] { position: relative; z-index: 3; }
@media (min-width: 1600px) {
  .af-split .atmo-stage { grid-template-columns: minmax(0, 480px) minmax(0, 720px); column-gap: clamp(72px, 5vw, 112px); }
  .af-ex-reel .af-reel-home { padding: 20px 24px 18px; }
  [data-flow="onboarding"] .atmo-stage { grid-template-columns: minmax(0, 620px) minmax(0, 620px); }
}

/* The disclaimer and the preview label sit on the field, never as white boxes. */
.af-split.atmo .focus-foot .v31-site-disclaimer { flex: 1 1 100%; max-width: 72ch; margin: 0; padding: 0; background: none; border-radius: 0; font-size: var(--fs-small); line-height: var(--lh-small); color: rgba(255,255,255,.86); }
.af-split.atmo .atmo-stage > .v31-preview-label { grid-column: 1 / -1; grid-row: 2; justify-self: center; align-self: start; margin: 4px 0 0; padding: 8px 16px; border: 0; border-radius: var(--r-pill); background: rgba(8,18,40,.42); color: #fff; font-size: var(--fs-small); line-height: var(--lh-small);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
/* Onboarding: the worked packs span the same width as card + window, on the field. */
@media (min-width: 1025px) {
  [data-flow="onboarding"] .atmo-stage > [data-v31-root] { grid-column: 1 / -1; grid-row: 3; width: 100%; margin-top: 8px; }
}

/* Tablet + phone: floating card, floating window, footer on the field. */
@media (max-width: 1024px) {
  .af-split.atmo .focus-main { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: clamp(24px, 6vh, 56px) var(--af-inset, 24px) 32px; }
  .af-split .atmo-card { flex: none; width: min(560px, 100%); margin: 0; border-radius: var(--r-2xl); padding: 36px 36px 32px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 1px rgba(10,20,40,.06), 0 12px 32px -8px rgba(5,15,40,.38), 0 40px 80px -24px rgba(5,15,40,.5); }
  .af-ex { display: flex !important; width: min(560px, 100%); }
  .af-split.atmo .atmo-stage > .v31-preview-label, .af-split.atmo .atmo-stage > [data-v31-root] { width: min(560px, 100%); }
  .af-split.atmo .atmo-stage > .v31-preview-label { width: auto; max-width: min(560px, 100%); order: 9; text-align: center; }
  .af-split.atmo .focus-foot { background: none; color: rgba(255,255,255,.86); padding-top: 8px; }
  .af-split.atmo .focus-foot a { color: #fff; text-decoration-color: rgba(255,255,255,.5); }
}
@media (max-width: 640px) {
  .af-split { --af-inset: 16px; }
  /* about a fifth of the first screen stays open field above the card, and 16 px at each side */
  .af-split.atmo .focus-main { padding-top: clamp(64px, 15vh, 140px); }
  .af-split .atmo-card { border-radius: 24px; padding: 28px 22px 26px; gap: 20px; }
  .af-split .atmo-card .focus-head .t-title { font-size: 30px; }
  .af-ex { border-radius: 24px; }
  .af-ex .af-ex-bar { min-height: 56px; padding: 10px 16px; }
  .af-ex-reel .af-reel-home, .af-ex-ob .af-ex-well { padding: 12px 12px 12px; }
  .af-ex-foot { padding: 8px 16px 12px; min-height: 0; }
  .af-reel-stage { border-radius: 14px; }
  .af-split.atmo .focus-foot { padding-left: var(--af-inset); padding-right: var(--af-inset); }
}
/* The field fades to night at the bottom edge on these pages, so the footer reads on it and a tall frame shows no seam. */
.af-split.atmo .atmo-field .veil { background:
  linear-gradient(180deg, rgba(8,18,40,.52) 0, rgba(8,18,40,.18) 120px, rgba(8,18,40,0) 260px),
  linear-gradient(0deg, rgba(11,24,48,.96) 0, rgba(8,18,40,.5) 120px, rgba(8,18,40,0) 280px),
  radial-gradient(ellipse 60% 70% at 50% 50%, rgba(8,18,40,.16), rgba(8,18,40,0) 70%); }
body.af-split.atmo { background: #0b1830; }
/* Verify: the mail preview label is a plain sentence-case line. */
.af-mail-label { font-size: var(--fs-small); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
/* Phone: the window bar keeps one line (title + state); onboarding's field tiles get the width for one-word names. */
@media (max-width: 640px) {
  .af-ex .af-ex-t > span { display: none; }
  .af-ex .af-ex-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center; }
  .af-ex .af-ex-bar > .af-ex-tile { grid-row: 1 / span 2; }
  .af-ex .af-ex-bar > .af-ex-s { grid-column: 2; margin-left: 0; justify-self: start; }
  .af-reel-kt { white-space: normal; overflow: visible; }
  [data-flow="onboarding"] .atmo-card { padding-left: 16px; padding-right: 16px; }
  [data-flow="onboarding"] .ob-grid .ob-choice { padding: 10px 22px 10px 8px; }
  [data-flow="onboarding"] .ob-grid .ob-tick { top: 7px; right: 7px; width: 16px; height: 16px; margin-top: 0; }
}
/* Verify, phone: the sender row is tile + name + time on one line, the subject under it. */
@media (max-width: 640px) {
  .af-mail-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 6px; }
  .af-mail-head .af-mail-from { display: contents; }
  .af-mail-head .af-mail-subj { grid-column: 1 / -1; margin: 0; }
  .af-mail-tile.hy-avatar { --avatar-size: 28px; }
}