/* viralizi.ai funnel pages (raio-x, afiliados). Loaded after site.css (.wrap, .nav-actions, .lang-switch, footer).
   Built by apps/site/build.py from src/pages/. Noite by default, gelo (data-theme="gelo") for reading bands. */

.skip { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 90; padding: 10px 16px; border-radius: var(--radius-md); background: var(--action); color: var(--on-action); font: 700 15px/1 var(--font-sans); text-decoration: none; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 12px); }

/* header: transparent bar on top of the page, glass only once it sticks (afiliados) */
.fx-top { position: relative; z-index: 20; padding-top: calc(env(safe-area-inset-top, 0px) + 12px); }
.fx-top .vz-nav { background: transparent; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; padding-left: 0; padding-right: 0; }
.fx-top--sticky { position: sticky; top: 0; padding-bottom: 12px; }
.fx-top--sticky.is-stuck .vz-nav { background: var(--chrome); border-color: var(--line); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding-inline: var(--space-5) 10px; }
.fx-top .vz-nav { transition: background-color var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out); }

/* AI photo label: the landing's .ai-tag (site.css), placed per photo */
.rx-art .ai-tag, .af-photo .ai-tag { inset-inline-start: 14px; bottom: 14px; }

/* =============================== raio-x =============================== */
.rx { padding-block: var(--space-5) var(--space-9); }
.rx-shell { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.rx-art { position: sticky; top: 16px; margin: 0; height: calc(100dvh - 32px); max-height: 860px; min-height: 520px; border-radius: var(--radius-xl); overflow: hidden; background: var(--surface); }
.rx-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.rx-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6, 11, 26, .55)); pointer-events: none; }
.rx-scan { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 2px; background: var(--scan); box-shadow: 0 0 18px 2px color-mix(in srgb, var(--scan) 60%, transparent); opacity: 0; }
.rx[data-at="loading"] .rx-scan { opacity: 1; animation: rx-scan 1.8s var(--ease-in-out) infinite alternate; }
@keyframes rx-scan { from { transform: translateY(0); } to { transform: translateY(min(820px, calc(100dvh - 40px))); } }

.rx-panel { min-width: 0; max-width: 600px; padding-top: clamp(8px, 5vh, 72px); scroll-margin-top: 12px; }
.rx-step { display: grid; gap: var(--space-5); align-content: start; padding: 0; background: none; overflow: visible; } /* not site.css's section band */
.rx-step[hidden] { display: none; }
.rx-anim { animation: rx-in 420ms var(--ease-out) both; }
@keyframes rx-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * var(--flip, 1) * 28px)); } } /* --flip: -1 right to left (lang.css) */

.rx-h1 { margin: 0; font: 800 clamp(38px, 4.6vw, 64px)/1.03 var(--font-sans); letter-spacing: -0.035em; text-wrap: balance; }
.rx-h1:focus, .rx-q:focus, .rx-res-h:focus { outline: none; }
.rx-lead { margin: 0; font: 400 clamp(19px, 1.6vw, 21px)/1.55 var(--font-sans); color: var(--ink-muted); max-width: 34em; }
.rx-meta { margin: 0; min-height: 1.4em; font: 600 16px/1.4 var(--font-sans); color: var(--warm); }
.rx-go { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.rx-fine { margin: 0; font: 400 15px/1.5 var(--font-sans); color: var(--ink-subtle); max-width: 40em; }
.rx-fine a { color: var(--ink-muted); text-underline-offset: 3px; }
.rx-note { margin: 0; padding: 14px 16px; border-inline-start: 3px solid var(--warm); background: color-mix(in srgb, var(--warm) 8%, transparent); border-radius: 0; border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); font: 400 16px/1.55 var(--font-sans); color: var(--ink); }

/* question */
.rx-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.rx-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-block: 0; padding-inline: 6px 12px; margin-inline-start: -6px; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink-muted); font: 600 16px/1 var(--font-sans); cursor: pointer; }
.rx-back svg { width: 20px; height: 20px; }
.rx-back:hover { color: var(--ink); background: var(--surface); }
.rx-count { font: 600 15px/1.3 var(--font-sans); color: var(--ink-subtle); font-variant-numeric: tabular-nums; }
.rx-progress { height: 6px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; margin-top: calc(var(--space-2) * -1); }
.rx-progress i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--scan); transform-origin: left; transform: scaleX(var(--p, 0%)); transition: transform var(--dur-slow) var(--ease-out); }
.rx-q { margin: var(--space-3) 0 0; font: 700 clamp(28px, 3.2vw, 40px)/1.15 var(--font-sans); letter-spacing: -0.025em; text-wrap: balance; }
.rx-hint { margin: calc(var(--space-2) * -1) 0 0; font: 400 17px/1.5 var(--font-sans); color: var(--ink-muted); }
.rx-hint:empty, .rx-err:empty, .fld-err:empty { display: none; }
.rx-opts { display: grid; gap: 10px; }
.rx-opt {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; min-height: 64px; padding-block: 14px; padding-inline: 20px 18px;
  border-radius: 16px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; text-align: start;
  font: 600 18px/1.3 var(--font-sans); letter-spacing: -0.01em;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.rx-anim .rx-opt { animation: rx-opt 420ms var(--ease-out) both; animation-delay: calc(var(--k, 0) * 45ms + 60ms); }
@keyframes rx-opt { from { opacity: 0; transform: translateY(10px); } }
.rx-opt:hover { transform: translateY(-2px); border-color: var(--ink-muted); }
.rx-opt:active { transform: translateY(0) scale(.99); }
.rx-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.rx-opt-i { flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.rx-opts[data-type="multi"] .rx-opt-i { border-radius: 8px; }
.rx-opt[aria-pressed="true"] { border-color: var(--scan); background: color-mix(in srgb, var(--scan) 12%, var(--surface)); }
.rx-opt[aria-pressed="true"] .rx-opt-i { background: var(--scan); border-color: var(--scan); }
.rx-opt[aria-pressed="true"] .rx-opt-i::after { content: ""; position: absolute; inset: 3px; background: var(--on-action); -webkit-mask: var(--rx-check) center / 16px no-repeat; mask: var(--rx-check) center / 16px no-repeat; }
:root { --rx-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.rx-err { margin: 0; font: 600 16px/1.4 var(--font-sans); color: var(--danger); }
.rx-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding-top: var(--space-2); }
.rx-bar [hidden] { display: none; }

/* contact form */
.rx-form { display: grid; gap: var(--space-5); }
.rx-summary { padding: 12px 16px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--ink); font: 600 16px/1.4 var(--font-sans); }
.rx-summary:focus { outline: 2px solid var(--danger); outline-offset: 2px; }
.fld { display: grid; gap: 8px; }
.fld label { font: 600 16px/1.3 var(--font-sans); }
.fld-opt { font-weight: 400; color: var(--ink-subtle); }
.fld input, .fld select {
  width: 100%; min-height: 56px; box-sizing: border-box; padding: 0 16px; border-radius: 14px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); font: 500 18px/1.2 var(--font-sans); -webkit-appearance: none; appearance: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.fld input:focus, .fld select:focus { outline: none; border-color: var(--scan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--scan) 30%, transparent); }
.fld.is-bad input { border-color: var(--danger); }
.fld-phone { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
.fld-phone select { padding-right: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b6cc' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; font-size: 16px; }
.fld-ig { position: relative; }
.fld-ig span { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); font: 600 18px/1 var(--font-sans); color: var(--ink-subtle); pointer-events: none; }
.fld-ig input { padding-inline-start: 36px; }
.fld-help { margin: 0; font: 400 15px/1.45 var(--font-sans); color: var(--ink-subtle); }
.fld-err { margin: 0; font: 600 15px/1.4 var(--font-sans); color: var(--danger); }
.fld-trap { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fld-check { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--surface); cursor: pointer; font: 400 16px/1.5 var(--font-sans); color: var(--ink-muted); }
.fld-check input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--scan); cursor: pointer; }
.fld-check input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.rx-turnstile:empty { display: none; }

/* loading */
.rx-wait { justify-items: start; padding-top: var(--space-6); }
.rx-wait-mark { position: relative; width: 96px; height: 96px; }
.rx-wait-mark svg { display: block; width: 100%; height: 100%; }
.rx-wait-line { position: absolute; left: -8px; right: -8px; top: 0; height: 2px; background: var(--scan); box-shadow: 0 0 14px 2px color-mix(in srgb, var(--scan) 60%, transparent); animation: rx-wait 1.4s var(--ease-in-out) infinite alternate; }
@keyframes rx-wait { to { transform: translateY(94px); } }

/* result */
.rx-result { gap: var(--space-7); }
.rx-res-h { margin: 0; font: 600 18px/1.3 var(--font-sans); color: var(--warm); }
.rx-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-6); align-items: end; margin-top: calc(var(--space-6) * -1); }
.rx-score-n { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 800 clamp(112px, 15vw, 184px)/0.86 var(--font-sans); letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.rx-score-n small { font: 600 20px/1 var(--font-sans); letter-spacing: 0; color: var(--ink-subtle); }
.rx-score-t { display: grid; gap: var(--space-2); padding-bottom: 6px; }
.rx-seg { margin: 0; font: 700 clamp(24px, 2.4vw, 30px)/1.15 var(--font-sans); letter-spacing: -0.02em; color: var(--scan); }
.rx-score-help { margin: 0; font: 400 15px/1.5 var(--font-sans); color: var(--ink-subtle); max-width: 34em; }
.rx-block { display: grid; gap: var(--space-4); }
.rx-block[hidden] { display: none; }
.rx-h3 { margin: 0; font: 700 22px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.rx-facts { margin: 0; padding: 0; list-style: none; display: grid; }
.rx-facts li { padding: 12px 0; border-top: 1px solid var(--line); font: 500 18px/1.45 var(--font-sans); }
.rx-facts li:last-child { border-bottom: 1px solid var(--line); }
.rx-recs { margin: 0; padding: 0; list-style: none; counter-reset: rec; display: grid; gap: var(--space-5); }
.rx-recs li { counter-increment: rec; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-3); font: 400 18px/1.55 var(--font-sans); }
.rx-recs li::before { content: counter(rec, decimal-leading-zero); font: 800 34px/1 var(--font-sans); letter-spacing: -0.04em; color: var(--scan); font-variant-numeric: tabular-nums; }
.rx-next { display: grid; gap: var(--space-4); justify-items: start; padding: var(--space-6); border-radius: var(--radius-xl); background: var(--surface); position: relative; overflow: hidden; }
.rx-next[hidden] { display: none; }
.rx-next::before { content: ""; position: absolute; width: 420px; height: 420px; inset-inline-end: -160px; top: -200px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--warm) 13%, transparent), transparent); pointer-events: none; }
.rx-next > * { position: relative; }
.rx-next p { margin: 0; font: 400 18px/1.55 var(--font-sans); color: var(--ink-muted); max-width: 36em; }
.rx-next .rx-promise { font: 600 16px/1.45 var(--font-sans); color: var(--ink); }
.rx-promise a { color: var(--link); text-underline-offset: 3px; font-weight: 500; }
.rx-done { font: 600 18px/1.5 var(--font-sans) !important; color: var(--success) !important; }
.rx-done:focus { outline: none; }
.rx-fix { margin: calc(var(--space-5) * -1) 0 0; }
.rx-link { min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink-muted); font: 500 16px/1.4 var(--font-sans); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.rx-link:hover { color: var(--ink); }
.rx-back:focus-visible, .rx-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (max-width: 959px) {
  .rx { padding-top: var(--space-2); }
  .rx-shell { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .rx-art { position: relative; top: 0; height: min(34vh, 300px); min-height: 0; border-radius: var(--radius-lg); }
  .rx-art img { object-position: 50% 22%; }
  .rx:not([data-at="intro"]):not([data-at="loading"]) .rx-art { display: none; }
  .rx[data-at="loading"] .rx-art { height: 220px; }
  .rx-panel { max-width: none; padding-top: 0; }
  .rx-wait-mark { display: none; }
}
@media (max-width: 600px) {
  .rx-h1 { font-size: clamp(34px, 9.6vw, 42px); }
  .rx-q { font-size: clamp(26px, 7.4vw, 32px); }
  .rx-step[data-step="question"] .rx-bar, .rx-form .rx-bar {
    position: sticky; bottom: 0; z-index: 3; margin-inline: -16px; padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(180deg, transparent, var(--bg) 26%);
  }
  .rx-bar .vz-btn--lg { flex: 1 1 100%; }
  .rx-go .vz-btn { flex: 1 1 100%; }
  .rx-score { grid-template-columns: 1fr; gap: var(--space-3); }
  .rx-recs li { grid-template-columns: 44px minmax(0, 1fr); }
  .rx-recs li::before { font-size: 28px; }
  .rx-next { padding: var(--space-5); }
  .rx-next .vz-btn { width: 100%; }
}

/* =============================== afiliados =============================== */
.af-hero { padding-block: var(--space-6) var(--space-9); overflow: hidden; }
.af-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.af-copy { display: grid; gap: var(--space-5); justify-items: start; }
.af-h1 { margin: 0; font: 800 clamp(38px, 4.4vw, 64px)/1.04 var(--font-sans); letter-spacing: -0.04em; text-wrap: balance; }
.af-h1 em { font-style: normal; color: var(--scan); }
.af-lead { margin: 0; font: 400 clamp(19px, 1.6vw, 21px)/1.55 var(--font-sans); color: var(--ink-muted); max-width: 32em; }
.af-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.af-small { margin: 0; font: 400 15px/1.5 var(--font-sans); color: var(--ink-subtle); }
.af-photo { position: relative; margin: 0; margin-inline-end: calc(50% - 50vw); border-radius: 0; border-start-start-radius: var(--radius-xl); border-end-start-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 3; max-height: 640px; }
.af-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.af-glow { position: absolute; width: 760px; height: 600px; inset-inline-end: -120px; top: 40px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--warm) 12%, transparent), transparent); pointer-events: none; }

.af-sec { position: relative; padding-block: var(--space-9); background: var(--bg); color: var(--ink); overflow-x: clip; }
.af-h2 { margin: 0; font: 700 clamp(32px, 3.6vw, 48px)/1.1 var(--font-sans); letter-spacing: -0.03em; text-wrap: balance; max-width: 20ch; }
.af-stack { display: grid; gap: var(--space-4); align-content: start; }
.af-p { margin: 0; font: 400 19px/1.6 var(--font-sans); color: var(--ink-muted); max-width: 40em; }

/* who */
.af-who { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; }
.af-who ul { margin: 0; padding: 0; list-style: none; display: grid; }
.af-who li { padding: var(--space-4) 0; border-top: 1px solid var(--line); font: 600 20px/1.4 var(--font-sans); letter-spacing: -0.01em; }
.af-who li:last-child { border-bottom: 1px solid var(--line); }

/* steps: big numerals */
.af-steps { margin: var(--space-7) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7) var(--space-8); counter-reset: st; }
.af-steps li { counter-increment: st; display: grid; gap: var(--space-3); align-content: start; }
.af-steps li::before { content: counter(st, decimal-leading-zero); font: 800 clamp(64px, 7vw, 104px)/0.9 var(--font-sans); letter-spacing: -0.06em; color: var(--scan); font-variant-numeric: tabular-nums; }
.af-steps h3 { margin: 0; font: 700 24px/1.25 var(--font-sans); letter-spacing: -0.015em; }
.af-steps p { margin: 0; font: 400 18px/1.6 var(--font-sans); color: var(--ink-muted); max-width: 32em; }

/* money: a line with four stops */
.af-money-head { display: grid; gap: var(--space-4); max-width: 760px; }
.af-flow { position: relative; margin: var(--space-8) 0 var(--space-6); padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.af-flow::before { content: ""; position: absolute; left: 12px; right: 12px; top: 11px; height: 2px; background: linear-gradient(90deg, var(--warm), var(--scan)); transform-origin: left; }
.af-flow.pre::before { transform: scaleX(0); }
.af-flow::before { transition: transform 1100ms var(--ease-in-out); }
.af-flow li { position: relative; display: grid; gap: var(--space-2); align-content: start; padding-top: 44px; }
.af-flow li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--bg); border: 3px solid var(--scan); box-sizing: border-box; }
.af-flow li:first-child::before { border-color: var(--warm); }
.af-flow li:last-child::before { background: var(--scan); }
.af-flow b { font: 700 21px/1.25 var(--font-sans); letter-spacing: -0.01em; }
.af-flow span { font: 400 16px/1.5 var(--font-sans); color: var(--ink-muted); }
.af-flow-note { margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--line); font: 400 17px/1.6 var(--font-sans); color: var(--ink-muted); max-width: 52em; }

/* tools: plain two-column list */
.af-tools { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; }
.af-tools .af-h2 { position: sticky; top: 110px; }
.af-tools dl { margin: 0; display: grid; }
.af-tools dl > div { display: grid; gap: 6px; padding: var(--space-5) 0; border-top: 1px solid var(--line); }
.af-tools dl > div:last-child { border-bottom: 1px solid var(--line); }
.af-tools dt { font: 700 20px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.af-tools dd { margin: 0; font: 400 17px/1.6 var(--font-sans); color: var(--ink-muted); max-width: 40em; }

/* rules + questions (gelo) */
.af-rules { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-8); }
.af-rules ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.af-rules li { position: relative; padding-inline-start: 30px; font: 400 18px/1.55 var(--font-sans); }
.af-rules li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.45em; width: 14px; height: 14px; border-radius: 4px; background: var(--scan); }
.af-rules a { color: var(--link); text-underline-offset: 3px; }
.af-faq { margin-top: var(--space-8); }
.af-faq details { border-top: 1px solid var(--line); }
.af-faq details:last-child { border-bottom: 1px solid var(--line); }
.af-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); font: 700 19px/1.3 var(--font-sans); letter-spacing: -0.01em; }
.af-faq summary::-webkit-details-marker { display: none; }
.af-faq summary::after { content: "+"; font: 500 26px/1 var(--font-sans); color: var(--link); transition: transform var(--dur-base) var(--ease-out); }
.af-faq details[open] summary::after { transform: rotate(45deg); }
.af-faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 6px; }
.af-faq details p { margin: 0; padding-bottom: var(--space-5); color: var(--ink-muted); max-width: 60ch; font: 400 17px/1.6 var(--font-sans); }

/* final band */
.af-end { text-align: start; }
.af-end-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: end; padding-block: var(--space-8); border-top: 1px solid var(--line); }
.af-end .af-h2 { max-width: 18ch; }

.af-reveal { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: calc(var(--d, 0) * var(--stagger)); }
.af-reveal.pre { opacity: 0; transform: translateY(24px); }

@media (max-width: 960px) {
  .af-hero-grid, .af-who, .af-tools, .af-rules { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .af-photo { margin: 0; border-radius: var(--radius-lg); }
  .af-tools .af-h2 { position: static; }
  .af-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .af-flow { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .af-flow::before { inset-inline-start: 11px; inset-inline-end: auto; top: 12px; bottom: 12px; width: 2px; height: auto; background: linear-gradient(180deg, var(--warm), var(--scan)); transform-origin: top; }
  .af-flow.pre::before { transform: scaleY(0); }
  .af-flow li { padding: 0; padding-inline-start: 44px; }
  .af-end-in { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 600px) {
  .af-sec { padding-block: var(--space-8); }
  .af-ctas .vz-btn, .af-end .vz-btn { flex: 1 1 100%; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .rx-anim, .rx-anim .rx-opt, .rx-wait-line, .rx[data-at="loading"] .rx-scan { animation: none; }
  .rx-opt, .rx-progress i, .fx-top .vz-nav { transition: none; }
  .af-reveal, .af-reveal.pre { transition: none; opacity: 1; transform: none; }
  .af-flow::before { transition: none; transform: none !important; }
}