/* ═══════════════════════════════════════════════════════════════════════════
   Altaha — the four products

   Three views' worth of surface: the Discover hub, the Allocate sequence and
   the Altaha Score explainer. Kept in one file because they share one idea —
   a product page is a set of cards that each answer part of the product's
   question, and the cards have to look like siblings or the grouping does not
   read as a grouping.

   Every colour is a token with a value on both themes. A literal hex here is
   how a card becomes a bright tile with white text on it in the dark theme,
   which is the exact bug this project has shipped before.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared card ─────────────────────────────────────────────────────────── */

.dsc-card{
  background:var(--skin-card); border:1px solid var(--rule); border-radius:14px;
  padding:16px 18px 14px; margin:0 0 14px;
}
.dsc-h{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:10px }
.dsc-h h3{ margin:0; font-family:var(--serif); font-size:19px; font-weight:400; color:var(--ink) }
.dsc-h span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mute) }

.dsc-quiet{ margin:8px 0 0; font-size:13px; line-height:1.5; color:var(--mute) }
.dsc-quiet.is-loading{ opacity:.75 }
.dsc-warn{
  margin:10px 0 0; padding:9px 11px; border-radius:9px;
  background:var(--warn-bg); color:var(--warn-ink);
  border-left:3px solid var(--warn-edge); font-size:13px;
}
.dsc-more{
  margin-top:12px; font:inherit; font-size:12.5px; color:var(--gold-dp);
  background:none; border:0; padding:6px 0 0; cursor:pointer; min-height:34px;
}
.dsc-more:hover{ text-decoration:underline }

/* ── Discover · the market strip ───────────────────────────────────────────── */

.dsc-mkt{
  border:1px solid var(--rule); border-radius:14px; background:var(--paper-2);
  padding:14px 16px; margin:0 0 16px;
}
.dsc-mkt-h{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap }
.dsc-state{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mute);
}
.dsc-state.on{ color:var(--pass) }
.dsc-when{ font-family:var(--mono); font-size:11px; color:var(--mute) }

.dsc-idx{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px }
.dsc-ix{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.dsc-ix .k{
  font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mute);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dsc-ix .v{ font-size:17px; color:var(--ink) }
.dsc-ix .c{ font-size:12.5px; color:var(--mute) }
.dsc-ix .c.up{ color:var(--pass) }
.dsc-ix .c.dn{ color:var(--fail) }

/* ── Discover · the ranked rows ────────────────────────────────────────────── */

.dsc-rows{ list-style:none; margin:0; padding:0; counter-reset:dsc }
.dsc-row{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;
  gap:10px; align-items:center;
  padding:10px 0; border-top:1px solid var(--rule-2);
}
.dsc-row:first-child{ border-top:0 }
.dsc-sym{ display:flex; flex-direction:column; min-width:0; color:var(--ink); text-decoration:none }
.dsc-sym:hover{ color:var(--gold-dp) }
.dsc-sym small{ color:var(--mute); font-size:11.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dsc-mid{ font-size:12.5px; color:var(--mute); min-width:0 }
.dsc-val{ text-align:right; font-size:19px; color:var(--ink); line-height:1.1 }
.dsc-val small{ display:block; font-family:var(--mono); font-size:9px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--mute) }

/* ── Discover · the activity grid ──────────────────────────────────────────── */

.dsc-sech{
  margin:22px 0 12px; font-family:var(--serif); font-weight:400;
  font-size:21px; color:var(--ink);
}
.dsc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px }
.dsc-grid .dsc-card{ margin:0; height:100% }
.dsc-card.is-small .dsc-h h3{ font-size:16px }

.dsc-big{ margin:0; font-size:13px; color:var(--mute) }
.dsc-big b{ font-size:26px; color:var(--ink); margin-right:6px }

.dsc-mini{ list-style:none; margin:0; padding:0 }
.dsc-mini li{
  display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  padding:6px 0; border-top:1px solid var(--rule-2); font-size:13.5px;
}
.dsc-mini li:first-child{ border-top:0 }
.dsc-mini a{ color:var(--ink); text-decoration:none }
.dsc-mini a:hover{ color:var(--gold-dp) }
.dsc-mini .up{ color:var(--pass) }
.dsc-mini .dn{ color:var(--fail) }

.dsc-chips{ margin:10px 0 0; display:flex; flex-wrap:wrap; gap:6px }
.dsc-chip{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.05em;
  padding:3px 7px; border-radius:999px;
  border:1px solid var(--rule); color:var(--ink-2); background:var(--paper-2);
}

/* ── Allocate · the guided card ──────────────────────────────────────────────
   One card, three stages, and the movement between them carries the meaning:
   the amount becomes a profile, the profile becomes a split. Every animation
   here is decoration over markup that is already correct and readable — the
   card works with motion switched off, and the reduced-motion block at the
   bottom is what makes that a promise rather than a hope. */

.acf-card{
  position:relative;                      /* the coin layer's frame of reference */
  border:1px solid var(--rule); border-radius:16px; background:var(--skin-card);
  box-shadow:var(--skin-shadow,0 1px 2px rgba(0,0,0,.04));
  margin:0 0 26px;
  /* So `scrollIntoView` lands the card below the site chrome rather than
     under it. */
  scroll-margin-top:calc(var(--sh-chrome-h, 0px) + 12px);
  overflow:hidden;                        /* fallback */
  overflow:clip;                          /* clips without becoming a scroll
                                             container, so .acf-stick can stick
                                             to the page rather than to a box
                                             that never scrolls */
}

/* The question and its picture hold their place while the answers scroll
   under them. A six-option question is taller than a laptop window, and
   scrolling to reach the last option used to leave a column of answers with
   nothing above them to answer. */
.acf-stick{
  position:sticky; top:calc(var(--sh-chrome-h, 0px) + 6px); z-index:5;
  background:var(--skin-card); padding-bottom:12px;
  margin:-4px 0 0;
}
.acf-body{ padding:26px 26px 22px }

.acf-step{
  display:block; font-family:var(--mono,monospace); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--gold-dp,#8a6d2f); margin-bottom:9px;
}
.acf-head h3{
  margin:0 0 7px; font-family:var(--serif,Georgia,serif); font-weight:400;
  font-size:clamp(21px,3vw,27px); line-height:1.2; color:var(--ink);
}
.acf-head > p{ margin:0; font-size:14px; line-height:1.6; color:var(--ink-2); max-width:62ch }
.acf-why{ margin:6px 0 0; font-size:12.5px; line-height:1.6; color:var(--mute) }

/* Stage 1 — the amount */
.acf-amount{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:22px 0 4px }
.acf-big{
  font-family:var(--mono,monospace); font-size:clamp(34px,7vw,56px); line-height:1;
  letter-spacing:-.045em; color:var(--ink); font-variant-numeric:tabular-nums;
}
.acf-exact{ font-family:var(--mono,monospace); font-size:13px; color:var(--mute) }

.acf-slider{ position:relative; margin:18px 0 6px; padding-bottom:30px }
.acf-track{
  position:absolute; left:0; right:0; top:13px; height:6px; border-radius:999px;
  background:var(--rule); pointer-events:none;
}
.acf-track > i{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--gold-lt,#d8bd7c),var(--gold,#a38338));
  transition:width 140ms linear;
}
.acf-slider input[type=range]{
  position:relative; z-index:1; width:100%; margin:0; height:32px;
  background:transparent; -webkit-appearance:none; appearance:none; cursor:pointer;
}
.acf-slider input[type=range]:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; border-radius:8px }
.acf-slider input[type=range]::-webkit-slider-runnable-track{ height:32px; background:transparent }
.acf-slider input[type=range]::-moz-range-track{ height:32px; background:transparent }
.acf-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:26px; height:26px; margin-top:3px;
  border-radius:999px; background:var(--paper); border:2px solid var(--gold);
  box-shadow:0 1px 6px rgba(0,0,0,.18); transition:transform 140ms cubic-bezier(.22,1,.36,1);
}
.acf-slider input[type=range]::-moz-range-thumb{
  width:26px; height:26px; border-radius:999px; background:var(--paper);
  border:2px solid var(--gold); box-shadow:0 1px 6px rgba(0,0,0,.18);
  transition:transform 140ms cubic-bezier(.22,1,.36,1);
}
.acf-slider input[type=range]:active::-webkit-slider-thumb{ transform:scale(1.18) }
.acf-slider input[type=range]:active::-moz-range-thumb{ transform:scale(1.18) }

.acf-marks{ position:absolute; left:0; right:0; bottom:8px; height:14px }
.acf-marks span{
  position:absolute; transform:translateX(-50%); white-space:nowrap;
  font-family:var(--mono,monospace); font-size:9.5px; color:var(--mute);
}
.acf-marks span:first-child{ transform:none }
.acf-marks span:last-child{ transform:translateX(-100%) }
.acf-scale{ margin:16px 0 0; font-size:11.5px; line-height:1.55; color:var(--mute) }

.acf-chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0 0 }
.acf-chip{
  font-family:var(--mono,monospace); font-size:11.5px; padding:7px 13px; border-radius:999px;
  border:1px solid var(--rule); background:var(--paper-2); color:var(--ink-2); cursor:pointer;
  transition:border-color 140ms ease, color 140ms ease, transform 140ms cubic-bezier(.22,1,.36,1);
}
.acf-chip:hover{ border-color:var(--gold); color:var(--ink); transform:translateY(-1px) }
.acf-type{ display:flex; align-items:center; gap:7px; margin-left:auto }
.acf-type > span{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--mute) }
.acf-type input{
  width:132px; padding:7px 10px; border:1px solid var(--rule); border-radius:9px;
  background:var(--paper); color:var(--ink); font-family:var(--mono,monospace); font-size:13px;
}

/* Stage 2 — the questions */
.acf-progress{ margin-bottom:14px; padding-top:4px }
.acf-bar{ height:4px; border-radius:999px; background:var(--rule); overflow:hidden; margin-bottom:9px }
.acf-bar > i{
  display:block; height:100%; border-radius:999px; background:var(--gold);
  transition:width 420ms cubic-bezier(.22,1,.36,1);
}
.acf-bar.wide{ height:8px; margin:12px 0 14px }
.acf-bar.wide > i{ background:linear-gradient(90deg,var(--gold-lt,#d8bd7c),var(--gold,#a38338)) }
.acf-q h3{
  margin:0 0 6px; font-family:var(--serif,Georgia,serif); font-weight:400;
  font-size:clamp(19px,2.6vw,24px); line-height:1.3; color:var(--ink);
}
.acf-opts{ display:grid; gap:9px; margin:18px 0 0 }
.acf-opt{
  display:block; width:100%; text-align:left; padding:14px 16px; border-radius:12px;
  border:1px solid var(--rule); background:var(--paper-2); color:var(--ink);
  font-size:14.5px; line-height:1.45; cursor:pointer; min-height:48px;
  transition:border-color 140ms ease, background 140ms ease, transform 140ms cubic-bezier(.22,1,.36,1);
}
.acf-opt:hover{ border-color:var(--gold); transform:translateX(3px) }
.acf-opt.is-on{ border-color:var(--gold); background:var(--gold-lt,#f2e7cc); color:var(--ink) }
.acf-opt:focus-visible{ outline:2px solid var(--gold); outline-offset:3px }

/* Stage 3 — the asset classes */
.acf-axes{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 0 }
.acf-axis{
  flex:1 1 150px; border:1px solid var(--rule); border-radius:11px;
  background:var(--paper-2); padding:10px 12px; display:flex; flex-direction:column; gap:2px;
}
.acf-axis .k{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mute) }
.acf-axis .v{ font-family:var(--mono,monospace); font-size:21px; color:var(--ink) }
.acf-axis small{ font-size:11px; line-height:1.4; color:var(--mute) }

.acf-flag{ border-left:3px solid var(--rule); padding:11px 14px; margin:16px 0 0;
  background:var(--paper-2); border-radius:0 10px 10px 0 }
.acf-flag b{ display:block; font-size:13.5px; color:var(--ink); margin-bottom:4px }
.acf-flag p{ margin:0; font-size:12.5px; line-height:1.65; color:var(--ink-2) }
.acf-flag.is-stop{ border-left-color:var(--fail) }
.acf-flag.is-warn{ border-left-color:var(--part) }
.acf-flag.is-note{ border-left-color:var(--gold) }

.acf-groups{ display:grid; gap:14px; margin:22px 0 0 }
.acf-group{ border:1px solid var(--rule); border-radius:13px; background:var(--paper-2); padding:15px 16px }
.acf-group-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap }
.acf-group-head b{ display:block; font-size:15px; color:var(--ink) }
.acf-group-head small{ display:block; font-size:11.5px; color:var(--mute); margin-top:2px }
.acf-group-num{ text-align:right; min-width:0 }
.acf-money{ display:block; font-family:var(--mono,monospace); font-size:21px; color:var(--ink);
  letter-spacing:-.03em; font-variant-numeric:tabular-nums }
.acf-group-num small{ display:block; font-size:11px; color:var(--mute); margin-top:2px }
.acf-sleeves{ list-style:none; margin:0; padding:0 }
.acf-sleeves li{ padding:10px 0; border-top:1px solid var(--rule) }
.acf-sleeve-t{ display:flex; justify-content:space-between; gap:12px; font-size:13.5px; color:var(--ink) }
.acf-sleeve-t b{ font-family:var(--mono,monospace) }
.acf-sleeves small{ display:block; margin-top:4px; font-size:11.5px; line-height:1.6; color:var(--mute) }

.acf-disc{ margin:20px 0 0; font-size:11.5px; line-height:1.7; color:var(--mute) }

/* Stage 3 — the answer. Numbers first, prose behind a tap. */
.acf-bandline{ margin:4px 0 0; font-size:13px; color:var(--mute) }
.acf-bandline b{ color:var(--ink); font-weight:600 }
.acf-group .acf-group-head{ align-items:center }
.acf-group .acf-group-num{ text-align:left; order:-1; flex:0 0 auto; min-width:150px }
.acf-group .acf-money{ font-size:clamp(24px,4vw,32px) }
.acf-group-head > div:last-child{ flex:1 1 160px }
.acf-line{ margin:4px 0 0; font-size:13px; line-height:1.55; color:var(--ink-2) }
.acf-holds{ list-style:none; margin:10px 0 0; padding:0 }
.acf-holds li{
  display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  padding:7px 0; border-top:1px solid var(--rule); font-size:13.5px; color:var(--ink);
}
.acf-holds li:first-child{ border-top:0; padding-top:2px }
.acf-holds span{ flex:1 1 auto; min-width:0; line-height:1.4 }
.acf-holds b{
  font-family:var(--mono,monospace); font-weight:500; white-space:nowrap;
  font-variant-numeric:tabular-nums; color:var(--ink);
}

.acf-first{ margin:18px 0 0; border:1px solid var(--rule); border-radius:13px;
  background:var(--paper-2); padding:14px 16px 12px }
.acf-first h4,.acf-out h4,.acf-how h4{
  margin:0 0 10px; font-family:var(--mono,monospace); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold-dp,#8a6d2f); font-weight:500;
}
.acf-first ol{ list-style:none; margin:0; padding:0 }
.acf-call{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--rule) }
.acf-call:first-child{ border-top:0; padding-top:2px }
.acf-call-n{
  flex:0 0 24px; height:24px; border-radius:999px; display:grid; place-items:center;
  font-family:var(--mono,monospace); font-size:11.5px; color:#fff; background:var(--ink-2,#4b4438);
}
.acf-call.is-cushion .acf-call-n{ background:var(--part,#b58a2a) }
.acf-call.is-debt .acf-call-n{ background:var(--fail,#a13d2d) }
.acf-call-body{ flex:1 1 auto; min-width:0 }
.acf-call-body b{ display:block; font-size:14px; color:var(--ink) }
.acf-call-body p{ margin:3px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-2) }
.acf-call-body small{ display:block; margin-top:5px; font-size:11.5px; line-height:1.55; color:var(--mute) }
.acf-call-amt{ flex:0 0 auto; font-family:var(--mono,monospace); font-size:18px; color:var(--ink);
  font-variant-numeric:tabular-nums }
.acf-call.needs .acf-call-amt{ color:var(--mute) }
.acf-inline{ display:flex; align-items:center; gap:8px; margin:8px 0 2px; flex-wrap:wrap }
.acf-inline span{ font-family:var(--mono,monospace); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--mute) }
.acf-inline input{
  width:150px; padding:7px 10px; border:1px solid var(--gold); border-radius:9px;
  background:var(--paper); color:var(--ink); font-family:var(--mono,monospace); font-size:13px;
}
.acf-free{ display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  margin:10px 0 0; padding-top:10px; border-top:2px solid var(--ink-2,#4b4438) }
.acf-free span{ font-size:13px; color:var(--ink) }
.acf-free b{ font-family:var(--mono,monospace); font-size:20px; color:var(--ink); font-variant-numeric:tabular-nums }

.acf-view{ display:flex; gap:6px; margin:22px 0 -10px; flex-wrap:wrap }
.acf-pill{
  font-family:var(--mono,monospace); font-size:11px; padding:6px 12px; border-radius:999px;
  border:1px solid var(--rule); background:transparent; color:var(--ink-2); cursor:pointer; min-height:32px;
}
.acf-pill.is-on{ border-color:var(--gold); background:var(--gold-lt,#f2e7cc); color:var(--ink) }

.acf-out{ margin:20px 0 0; border:1px solid var(--rule); border-radius:13px; background:var(--paper-2); padding:14px 16px }
.acf-out-head{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap }
.acf-out-head h4{ margin:0 }
.acf-years{ display:flex; align-items:center; gap:10px; flex:1 1 200px; max-width:320px }
.acf-years > span{ font-size:12.5px; color:var(--ink-2); white-space:nowrap; min-width:64px }
.acf-years b{ font-family:var(--mono,monospace); font-size:15px; color:var(--ink) }
.acf-years input{ flex:1 1 auto; accent-color:var(--gold); min-height:28px }
.acf-out-rows{ list-style:none; margin:10px 0 0; padding:0 }
.acf-out-rows li{ display:grid; grid-template-columns:1fr auto; gap:2px 14px; padding:10px 0; border-top:1px solid var(--rule) }
.acf-out-rows li > span{ font-size:13.5px; color:var(--ink) }
.acf-out-rows li > span em{ font-style:normal; font-family:var(--mono,monospace); font-size:12px; color:var(--mute); margin-left:6px }
.acf-out-rows li > b{ font-family:var(--mono,monospace); font-size:16px; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums }
.acf-out-rows li > small{ grid-column:1 / -1; font-size:11.5px; line-height:1.6; color:var(--mute) }
.acf-out-total{ border-top:2px solid var(--ink-2,#4b4438) !important }
.acf-out-total > b{ font-size:19px !important }

.acf-how{ margin:20px 0 0 }
.acf-how-group{ border:1px solid var(--rule); border-radius:12px; background:var(--paper-2); margin:0 0 8px }
.acf-how-group summary{
  display:flex; align-items:center; gap:8px; padding:12px 14px; cursor:pointer; list-style:none;
  font-size:14px; color:var(--ink);
}
.acf-how-group summary::-webkit-details-marker{ display:none }
.acf-how-group summary::after{ content:'+'; margin-left:auto; font-family:var(--mono,monospace); color:var(--mute) }
.acf-how-group[open] summary::after{ content:'–' }
.acf-how-group summary b{ font-family:var(--mono,monospace); font-weight:400; margin-left:auto; padding-right:10px }
.acf-how-group[open] summary b{ margin-left:auto }
.acf-how-group .acf-sleeves{ padding:0 14px 6px }
.acf-via{ margin:4px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-2) }
.acf-sleeves small b{ color:var(--ink-2); font-weight:600 }

.acf-leftout{ margin:14px 0 0; border:1px dashed var(--rule); border-radius:12px; padding:0 14px }
.acf-leftout summary{ padding:12px 0; cursor:pointer; font-size:13.5px; color:var(--ink) }
.acf-leftout summary small{ display:block; margin-top:2px; font-size:11.5px; color:var(--mute) }
.acf-leftout ul{ list-style:none; margin:0; padding:0 0 6px }
.acf-leftout li{ padding:10px 0; border-top:1px solid var(--rule) }
.acf-leftout li b{ display:block; font-size:13.5px; color:var(--ink) }
.acf-leftout li p{ margin:3px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink-2) }

.acf-more{ margin:18px 0 0; border-top:1px solid var(--rule); padding-top:6px }
.acf-more summary{ padding:8px 0; cursor:pointer; font-size:12.5px; color:var(--mute) }
.acf-more > p{ margin:8px 0 0; font-size:13px; line-height:1.6; color:var(--ink-2) }
.acf-more .acf-axes{ margin-top:12px }

.acf-act{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:22px 0 0 }
.acf-go{
  padding:12px 22px; border-radius:999px; border:1px solid var(--gold);
  background:var(--gold); color:#fff; font-size:14px; cursor:pointer; min-height:44px;
  transition:transform 140ms cubic-bezier(.22,1,.36,1), filter 140ms ease;
}
.acf-go:hover{ transform:translateY(-1px); filter:brightness(1.06) }
.acf-back{
  padding:12px 18px; border-radius:999px; border:1px solid var(--rule);
  background:transparent; color:var(--ink-2); font-size:13.5px; cursor:pointer; min-height:44px;
}
.acf-back:hover{ border-color:var(--gold); color:var(--ink) }
.acf-hint{ font-size:12px; color:var(--mute) }

@media (max-width:620px){
  .acf-body{ padding:20px 16px 18px }
  .acf-type{ margin-left:0; width:100% }
  .acf-type input{ flex:1 1 auto; width:auto }
  .acf-group-head{ flex-direction:column; align-items:flex-start }
  .acf-group-num{ text-align:left }
  .acf-call{ flex-wrap:wrap }
  .acf-call-amt{ flex-basis:100%; padding-left:36px }
  .acf-out-rows li{ grid-template-columns:1fr }
  .acf-holds li{ flex-wrap:wrap }
  .acf-inline input{ width:100% }
}

@media (prefers-reduced-motion:reduce){
  .acf-track > i,.acf-bar > i,.acf-chip,.acf-opt,.acf-go,
  .acf-slider input[type=range]::-webkit-slider-thumb,
  .acf-slider input[type=range]::-moz-range-thumb{ transition:none }
  .acf-chip:hover,.acf-opt:hover,.acf-go:hover{ transform:none }
}

/* ── Money effects ───────────────────────────────────────────────────────────
   Coins, the sheen, and the ring. All of it is decoration over markup that is
   already correct: the layer takes no clicks, carries aria-hidden, and the
   reduced-motion block at the end switches the whole thing off without taking
   a single figure or control with it. */

.mfx-layer{
  position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3;
  border-radius:inherit;
}
.mfx-coin{
  position:absolute; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; will-change:transform,opacity;
  font:700 15px/1 var(--mono,monospace); color:#54400d;
  background:radial-gradient(circle at 34% 28%,#fbf0cf 0%,#e3c979 42%,#b8912c 78%,#8a6d1e 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.28), inset 0 -1px 2px rgba(0,0,0,.22),
             inset 0 1px 1px rgba(255,255,255,.55);
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}

/* The light that runs across a figure the moment it changes. */
.mfx-sheen{
  background-image:linear-gradient(100deg,
    transparent 30%, rgba(233,203,120,.85) 45%, rgba(255,255,255,.95) 50%,
    rgba(233,203,120,.85) 55%, transparent 70%);
  background-size:260% 100%; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  animation:mfx-sweep 850ms cubic-bezier(.3,.1,.3,1);
}
@keyframes mfx-sweep{ from{ background-position:180% 0 } to{ background-position:-80% 0 } }

/* The rupee sign, which is the one glyph on the card that means money. */
.acf-sym{ font-style:normal; color:var(--gold-dp,#8a6d1e); display:inline-block;
  will-change:transform; margin-right:.06em }

/* Stage 3 — the ring */
.acf-ring{
  position:relative; display:grid; place-items:center;
  width:200px; height:200px; margin:22px auto 6px;
}
.acf-ring svg{ width:100%; height:100%; transform:rotate(-90deg) }
.acf-arc-bg{ fill:none; stroke:var(--rule); stroke-width:13 }
.acf-arc{ fill:none; stroke-width:13; stroke-linecap:butt }
.acf-arc.is-growth{ stroke:var(--gold,#a8801c) }
.acf-arc.is-stable{ stroke:var(--ink-2,#4b4438) }
.acf-arc.is-gold{ stroke:var(--gold-lt,#c9a63e) }
.acf-arc.is-alt{ stroke:var(--mute,#8a8171) }
.acf-ring-mid{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  gap:1px; line-height:1.1;
}
.acf-total-line{ display:flex; align-items:baseline; justify-content:center; white-space:nowrap }
.acf-ring-mid .acf-sym{ font-size:17px }
.acf-ring-mid .acf-total{
  font-family:var(--mono,monospace); font-weight:400; font-size:27px; color:var(--ink);
  letter-spacing:-.045em; font-variant-numeric:tabular-nums;
}
.acf-ring-mid small{ display:block; margin-top:3px; font-size:9.5px; color:var(--mute);
  letter-spacing:.03em }

.acf-swatch{
  display:inline-block; width:9px; height:9px; border-radius:2.5px;
  margin-right:7px; vertical-align:baseline;
}
.acf-swatch.is-growth{ background:var(--gold,#a8801c) }
.acf-swatch.is-stable{ background:var(--ink-2,#4b4438) }
.acf-swatch.is-gold{ background:var(--gold-lt,#c9a63e) }
.acf-swatch.is-alt{ background:var(--mute,#8a8171) }

@media (prefers-reduced-motion:reduce){
  .mfx-layer{ display:none }
  .mfx-sheen{ animation:none; background-image:none; -webkit-background-clip:border-box;
              background-clip:border-box }
  .acf-arc{ transition:none }
}

/* ── The adviser ────────────────────────────────────────────────────────────
   Ink line, paper fill, one gold accent at the tie. Every colour is a theme
   token, so the same few hundred bytes of SVG draw in ink on cream and in
   cream on ink without a second asset. The figure is aria-hidden and the
   question beside it is a real heading: nothing that carries meaning is
   inside the drawing. */

.acf-ask{
  display:grid; grid-template-columns:106px minmax(0,1fr);
  gap:18px; align-items:start; margin-bottom:4px;
}
.acf-adviser{ width:106px; align-self:end }
/* The art slot is a fixed column so the question beside it never reflows
   when the picture changes under the reader's pointer. */
.acf-art{ width:106px; align-self:end }
.acf-art .acf-adviser,.acf-art .qa-scene{ width:100% }
.adv-svg{ display:block; width:100%; height:auto; overflow:visible }

.adv-suit{ fill:var(--ink-2,#4b4438) }
.adv-lapel{ fill:var(--ink,#17140e); opacity:.85 }
.adv-shirt{ fill:var(--paper,#fffdf7) }
.adv-collar{ fill:var(--paper,#fffdf7); stroke:var(--rule,#deded8); stroke-width:.8 }
.adv-skin{ fill:var(--paper-2,#f7f3e8); stroke:var(--ink-2,#4b4438); stroke-width:1.5 }
.adv-hair{ fill:var(--ink,#17140e); transition:fill 260ms ease }
.adv-hair.is-dark{ fill:var(--ink,#17140e) }
.adv-hair.is-salt{ fill:#7c766a }
.adv-hair.is-grey{ fill:#a09a8e }
.adv-hair.is-white{ fill:#cfc9bb }
.adv-specs{ fill:none; stroke:var(--gold-dp,#8a6d1e); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round }
.adv-gold{ fill:var(--gold,#a8801c) }
.adv-eye{ fill:var(--ink,#17140e) }
.adv-line{ fill:none; stroke:var(--ink-2,#4b4438); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round }
.adv-mouth{ stroke-width:1.5 }
.adv-sleeve{ fill:var(--ink-2,#4b4438) }
.adv-palm{ stroke-width:1.4 }
.adv-knuckle{ stroke-width:1.1; opacity:.55 }
.adv-desk{ fill:var(--hill,#e8dcc0) }
.adv-desk-edge{ fill:none; stroke:var(--ink-2,#4b4438); stroke-width:1.4; opacity:.5 }
.adv-pad{ fill:var(--paper,#fffdf7); stroke:var(--ink-2,#4b4438); stroke-width:1.6 }
.adv-pad-line{ fill:none; stroke:var(--rule,#deded8); stroke-width:1.6; stroke-linecap:round }
.adv-pen-body{ fill:var(--gold,#a8801c) }
.adv-pen-nib{ fill:var(--ink,#17140e) }

/* The question, in a bubble the figure is talking into. */
.acf-bubble{
  position:relative; background:var(--paper-2); border:1px solid var(--rule);
  border-radius:15px; padding:16px 19px;
}
.acf-bubble::before{
  content:''; position:absolute; left:-8px; top:30px; width:15px; height:15px;
  background:var(--paper-2); border-left:1px solid var(--rule);
  border-bottom:1px solid var(--rule); border-radius:0 0 0 4px;
  transform:rotate(45deg);
}
.acf-bubble > :last-child{ margin-bottom:0 }

@media (prefers-reduced-motion:no-preference){
  .acf-adviser{ animation:adv-arrive 620ms cubic-bezier(.22,1,.36,1) both }
  .adv-svg{ animation:adv-bob 4.6s ease-in-out 700ms infinite }
  .adv-eyes{ transform-box:fill-box; transform-origin:center;
             animation:adv-blink 5.4s steps(1,end) 1.4s infinite }
  .adv-arm{ transform-box:fill-box; transform-origin:8% 12%;
            animation:adv-gesture 3.8s ease-in-out .6s infinite }
  .acf-adviser.is-listen .adv-pen{ transform-box:fill-box; transform-origin:80% 20%;
            animation:adv-write 1.9s ease-in-out infinite }
  .acf-bubble{ animation:adv-said 420ms cubic-bezier(.22,1,.36,1) both }
}
@keyframes adv-arrive{
  from{ opacity:0; transform:translateX(-16px) rotate(-5deg) }
  to{ opacity:1; transform:none }
}
@keyframes adv-said{
  from{ opacity:0; transform:translateX(10px) scale(.97) }
  to{ opacity:1; transform:none }
}
@keyframes adv-bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
@keyframes adv-blink{ 0%,93%,100%{ transform:scaleY(1) } 95.5%{ transform:scaleY(.08) } }
@keyframes adv-gesture{
  0%,100%{ transform:rotate(0deg) } 45%{ transform:rotate(-8deg) }
}
@keyframes adv-write{
  0%,100%{ transform:translate(0,0) rotate(0deg) }
  50%{ transform:translate(-3px,2px) rotate(-7deg) }
}

@media (max-width:620px){
  /* Narrow, but still side by side. Stacking the figure above the question
     made the sticky header 200px tall, which on a phone left almost no room
     for the answers scrolling under it. A 64px column keeps the header half
     that height and still leaves the text 280px. */
  .acf-ask{ grid-template-columns:64px minmax(0,1fr); gap:10px }
  .acf-art,.acf-adviser{ width:64px; align-self:center }
  .acf-bubble{ padding:12px 14px; border-radius:13px }
  .acf-bubble::before{ top:22px }
}

/* ── Question art ────────────────────────────────────────────────────────────
   Twelve scenes, one frame, three inks. Each one draws the thing its question
   asks about and re-draws when the reader points at a different answer. All
   of it is aria-hidden decoration beside a real heading and real buttons; the
   reduced-motion block at the end takes the movement and leaves the picture. */

.qa-scene{ width:106px; align-self:end }
/* Clipped, unlike the adviser: a scene that animates must not be able to
   throw a shape into the card behind it. */
.qa-svg{ display:block; width:100%; height:auto; overflow:hidden }

.qa-ground{ fill:none; stroke:var(--rule); stroke-width:1.6 }
.qa-axis{ fill:none; stroke:var(--rule); stroke-width:1.6 }
.qa-line{ fill:none; stroke:var(--ink-2,#4b4438); stroke-width:1.9;
  stroke-linecap:round; stroke-linejoin:round }
.qa-coin circle{ fill:var(--gold-lt,#c9a63e); stroke:var(--gold-dp,#8a6d1e); stroke-width:1.4 }
.qa-coin text{ fill:var(--ink,#17140e); text-anchor:middle; font-family:var(--mono,monospace);
  font-weight:700 }
.qa-coin.qa-dim circle{ fill:var(--hill,#e8dcc0) }
.qa-person{ transform-box:fill-box; transform-origin:50% 100% }
.qa-person .qa-head,.qa-person .qa-body{ fill:var(--ink-2,#4b4438) }
.qa-only{ stroke-dasharray:4 5; opacity:.6 }
.qa-person.is-self .qa-head,.qa-person.is-self .qa-body{ fill:var(--gold,#a8801c) }

/* hourglass */
.qa-glass{ fill:var(--paper,#fffdf7); stroke:var(--ink-2,#4b4438); stroke-width:2;
  stroke-linejoin:round }
.qa-sand{ fill:var(--gold,#a8801c); transition:d 420ms ease }

/* surplus */
.qa-bar{ fill:var(--gold-lt,#c9a63e) }
.qa-bar-spent{ fill:var(--hill-2,#dccfae) }
.qa-arrow{ stroke-width:2 }
.qa-nil{ fill:none; stroke:var(--fail,#b03a2b); stroke-width:2.4; stroke-linecap:round }

/* umbrella */
.qa-canopy{ fill:var(--gold,#a8801c) }
.qa-pip{ fill:var(--rule) }
.qa-pip.is-on{ fill:var(--gold,#a8801c) }
.qa-rain{ fill:none; stroke:var(--ink-2,#4b4438); stroke-width:2; stroke-linecap:round;
  opacity:.45 }

/* note and chain */
.qa-note{ fill:var(--hill,#e8dcc0); stroke:var(--ink-2,#4b4438); stroke-width:1.6 }
.qa-note-claim{ fill:var(--ink-2,#4b4438); opacity:.75 }
.qa-chain circle{ fill:none; stroke:var(--ink-2,#4b4438); stroke-width:2.6 }
.qa-tick{ fill:none; stroke:var(--pass,#1f7a55); stroke-width:2.6; stroke-linecap:round;
  stroke-linejoin:round }

/* the fall, and what the reader does next */
.qa-fall{ fill:none; stroke:var(--fail,#b03a2b); stroke-width:2.4; stroke-linecap:round;
  stroke-linejoin:round }
.qa-tail{ fill:none; stroke:var(--ink-2,#4b4438); stroke-width:2.4; stroke-linecap:round;
  stroke-linejoin:round }
.qa-tail.is-up{ stroke:var(--pass,#1f7a55) }
.qa-tail.is-flat{ stroke:var(--mute,#8a8171); stroke-dasharray:4 4 }

/* depth gauge */
.qa-tank{ fill:var(--paper,#fffdf7); stroke:var(--ink-2,#4b4438); stroke-width:1.8 }
.qa-water{ fill:var(--gold-lt,#c9a63e); opacity:.8; transition:height 420ms cubic-bezier(.22,1,.36,1) }
.qa-waterline{ fill:none; stroke:var(--gold-dp,#8a6d1e); stroke-width:2;
  transition:transform 420ms cubic-bezier(.22,1,.36,1) }
.qa-mark{ fill:none; stroke:var(--fail,#b03a2b); stroke-width:1.5; stroke-dasharray:3 3 }
.qa-scale{ stroke-width:1.5 }
.qa-down{ fill:none; stroke:var(--ink-2,#4b4438); stroke-width:2; stroke-linecap:round;
  stroke-linejoin:round }

/* the beam */
.qa-post{ fill:none; stroke:var(--ink-2,#4b4438); stroke-width:3; stroke-linecap:round }
.qa-beam{ transform-box:view-box; transform-origin:65px 74px;
  transition:transform 460ms cubic-bezier(.34,1.3,.64,1) }
.qa-shield{ fill:var(--ink-2,#4b4438) }
.qa-sprout{ fill:none; stroke:var(--pass,#1f7a55); stroke-width:2.4; stroke-linecap:round }
.qa-leaf{ fill:var(--pass,#1f7a55) }

/* the market's own line */
.qa-cycle-ghost{ fill:none; stroke:var(--rule); stroke-width:2.2 }
.qa-cycle{ fill:none; stroke:var(--gold,#a8801c); stroke-width:2.6; stroke-linecap:round;
  transition:stroke-dasharray 520ms cubic-bezier(.22,1,.36,1) }
.qa-now{ fill:var(--gold-dp,#8a6d1e) }

/* what it is for */
.qa-sun{ fill:var(--gold-lt,#c9a63e) }
.qa-trunk{ fill:none; stroke:var(--ink-2,#4b4438); stroke-width:3; stroke-linecap:round }
.qa-roof{ fill:var(--gold,#a8801c) }
.qa-wall{ fill:var(--hill,#e8dcc0); stroke:var(--ink-2,#4b4438); stroke-width:1.6 }
.qa-door{ fill:var(--ink-2,#4b4438) }
.qa-knob{ fill:var(--gold,#a8801c) }

@media (prefers-reduced-motion:no-preference){
  .qa-scene{ animation:adv-arrive 560ms cubic-bezier(.22,1,.36,1) both }
  .qa-grain{ animation:qa-fall-grain 1.5s linear infinite }
  .qa-grain-2{ animation-delay:.75s }
  .qa-rain{ animation:qa-rain-fall 1.2s linear infinite }
  .qa-rain-1{ animation-delay:.24s } .qa-rain-2{ animation-delay:.48s }
  .qa-rain-3{ animation-delay:.72s } .qa-rain-4{ animation-delay:.96s }
  .qa-rise{ animation:qa-rise-in 520ms cubic-bezier(.34,1.4,.64,1) both }
  .qa-arrive{ animation:qa-pop 420ms cubic-bezier(.34,1.5,.64,1) both }
  .qa-d0{ animation-delay:.06s } .qa-d1{ animation-delay:.14s }
  .qa-d2{ animation-delay:.22s } .qa-d3{ animation-delay:.3s }
  .qa-d4{ animation-delay:.38s } .qa-d5{ animation-delay:.46s }
  .qa-drip{ animation:qa-drip-in 1.9s cubic-bezier(.3,.1,.3,1) infinite }
  .qa-drop{ animation:qa-drop-in 640ms cubic-bezier(.34,1.35,.64,1) both }
  .qa-chain{ animation:qa-tug 2.4s ease-in-out infinite; transform-box:fill-box;
             transform-origin:50% 0 }
  .qa-sun{ animation:qa-glow 3.4s ease-in-out infinite }
}
@keyframes qa-fall-grain{
  0%{ transform:translateY(-6px); opacity:0 }
  20%{ opacity:1 } 90%{ opacity:1 }
  100%{ transform:translateY(46px); opacity:0 }
}
@keyframes qa-rain-fall{
  0%{ transform:translateY(-8px); opacity:0 }
  30%{ opacity:.5 } 100%{ transform:translateY(16px); opacity:0 }
}
@keyframes qa-rise-in{
  from{ transform:translateY(14px) scale(.6); opacity:0 } to{ transform:none; opacity:1 }
}
@keyframes qa-pop{ from{ transform:scale(.4); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes qa-drop-in{
  from{ transform:translateY(-40px) scale(.7); opacity:0 } to{ transform:none; opacity:1 }
}
@keyframes qa-drip-in{
  0%{ transform:translateY(-30px); opacity:0 }
  25%,75%{ transform:none; opacity:1 }
  100%{ transform:translateY(6px); opacity:0 }
}
@keyframes qa-tug{ 0%,100%{ transform:rotate(0) } 50%{ transform:rotate(7deg) } }
@keyframes qa-glow{ 0%,100%{ opacity:1 } 50%{ opacity:.6 } }

@media (max-width:620px){
  .qa-scene{ width:76px; margin:0 0 -6px 4px; align-self:start }
}

/* ── One dot per question ────────────────────────────────────────────────────
   Filled when answered, ringed when current, hollow when still to come. The
   name of the question sits in a line of its own rather than a floating
   tooltip: twelve dots at phone width would have their tooltips clipped by the
   card, and a line is readable on a touch screen, which has no hover at all. */

.acf-dots{ margin:22px 0 0; padding-top:16px; border-top:1px solid var(--rule) }
.acf-dot-row{ display:flex; flex-wrap:wrap; gap:9px; align-items:center }
.acf-dot{
  width:11px; height:11px; padding:0; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--rule); background:transparent;
  transition:transform 160ms cubic-bezier(.34,1.5,.64,1),
             background 160ms ease, border-color 160ms ease;
}
/* The hit area is a finger, the dot is a dot. */
.acf-dot::before{ content:''; position:absolute; inset:-9px }
.acf-dot{ position:relative }
.acf-dot:hover,.acf-dot:focus-visible{ transform:scale(1.5); border-color:var(--gold) }
.acf-dot:focus-visible{ outline:2px solid var(--gold); outline-offset:4px }
.acf-dot.is-done{ background:var(--gold,#a8801c); border-color:var(--gold,#a8801c) }
.acf-dot.is-now{
  background:var(--paper); border-color:var(--gold-dp,#8a6d1e); border-width:3px;
  transform:scale(1.35);
}
.acf-dot.is-now:hover{ transform:scale(1.6) }
.acf-dot-label{
  margin:11px 0 0; min-height:2.6em;
  font-size:11.5px; line-height:1.5; color:var(--mute);
}

@media (prefers-reduced-motion:reduce){
  .acf-dot{ transition:none }
  .acf-dot:hover,.acf-dot:focus-visible,.acf-dot.is-now,.acf-dot.is-now:hover{ transform:none }
}
@media (max-width:620px){
  .acf-stick{ top:calc(var(--sh-chrome-h, 0px) + 2px); padding-bottom:8px }
  .acf-dot{ width:10px; height:10px }
  .acf-dot-row{ gap:7px }
}