/* ============================================================
   MMT Avatar Landing Page — shared styles
   Visual system: apply.makemoney.com.au (warm black + orange)
   Reading system: centred composition, tuned for ADHD + dyslexia
   ------------------------------------------------------------
   Readability decisions, deliberately:
   - Lexend body face (designed to improve reading proficiency)
   - 18px base, 1.75 line-height, generous word + letter spacing
   - Max ~60ch line length so the eye never loses its place
   - Centred page composition; multi-line paragraphs stay
     left-aligned, because a moving left edge is the single
     biggest problem for dyslexic readers
   - No auto-playing motion. Nothing moves unless you scroll.
   - Numbered sections + "In short" summaries for orientation
   - Reader controls (larger text / extra spacing) persist
   ============================================================ */

:root {
  --bg:          hsl(24 14% 5%);
  --bg-2:        hsl(24 12% 7%);
  --card:        hsl(24 12% 9.5%);
  --card-2:      hsl(24 12% 12%);
  --fg:          hsl(30 20% 94%);
  --muted:       hsl(28 12% 72%);
  --muted-2:     hsl(28 10% 55%);
  --border:      hsl(24 10% 19%);
  --border-2:    hsl(24 10% 27%);

  --accent:      hsl(28 94% 56%);
  --accent-soft: hsl(30 96% 63%);
  --accent-shim: hsl(38 98% 72%);
  --accent-deep: hsl(20 88% 46%);
  --accent-ink:  hsl(24 45% 8%);

  --pad-x: clamp(20px, 5vw, 72px);
  --maxw: 1120px;
  --measure: 60ch;

  --font: "Lexend", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-num: "Space Grotesk", ui-monospace, monospace;
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* reader controls override these two */
  --fs: 18px;
  --lh: 1.75;
  --ls: .006em;
  --ws: .035em;
  --para-gap: 1.15em;
}

html[data-size="lg"]    { --fs: 20.5px; }
html[data-space="wide"] { --lh: 2; --ls: .045em; --ws: .13em; --para-gap: 1.6em; }

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 100px;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--fs);
  line-height: var(--lh);
  letter-spacing: var(--ls);
  word-spacing: var(--ws);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 620px at 50% 0%, hsl(28 94% 56% / .10), transparent 60%),
    radial-gradient(760px 560px at 90% 78%, hsl(20 88% 46% / .06), transparent 62%);
}

/* focus visibility — never removed */
:focus-visible {
  outline: 3px solid var(--accent-shim);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: 50%; top: -80px; transform: translateX(-50%);
  z-index: 200; background: var(--accent); color: var(--accent-ink);
  padding: 14px 24px; border-radius: 0 0 12px 12px; font-weight: 700;
  text-decoration: none; transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

/* ---------------- typography ---------------- */
h1, h2 { font-family: var(--font-display); letter-spacing: -.018em; word-spacing: normal; line-height: 1.12; font-weight: 800; }
h1 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.6rem); }
h3 { font-family: var(--font); font-size: clamp(1.06rem, 1.4vw, 1.22rem); font-weight: 600; line-height: 1.35; letter-spacing: -.005em; }

p { color: var(--muted); }
p + p { margin-top: var(--para-gap); }

.hl {
  background: linear-gradient(115deg, var(--accent-deep), var(--accent) 42%, var(--accent-shim));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.24rem);
  color: var(--muted);
  max-width: var(--measure);
  margin-left: auto; margin-right: auto;
}
.fine { font-size: .88rem; color: var(--muted-2); line-height: 1.65; max-width: 78ch; margin-left: auto; margin-right: auto; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 700; word-spacing: normal; }

/* Section label. Short strings only — long uppercase runs are hard to read. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 600; color: var(--accent-soft);
  letter-spacing: .06em; word-spacing: normal; text-transform: none;
}
.eyebrow .step {
  font-family: var(--font-num); font-size: .78rem;
  background: hsl(28 94% 56% / .14); border: 1px solid hsl(28 94% 56% / .3);
  color: var(--accent-soft); padding: 3px 9px; border-radius: 99px;
}

/* "In short" — the one-line takeaway before the detail */
.tldr {
  display: inline-block;
  max-width: 62ch;
  margin: 18px auto 0;
  padding: 14px 22px;
  background: hsl(28 94% 56% / .08);
  border: 1px solid hsl(28 94% 56% / .22);
  border-radius: 12px;
  font-size: 1rem; color: var(--fg); font-weight: 500; line-height: 1.6;
}
.tldr b { color: var(--accent-soft); font-weight: 700; }

/* ---------------- layout ---------------- */
.wrap { position: relative; z-index: 1; }
.sec { padding: clamp(60px, 8vw, 108px) var(--pad-x); position: relative; }
.sec + .sec { border-top: 1px solid hsl(24 10% 13%); }
.inner { max-width: var(--maxw); margin: 0 auto; width: 100%; text-align: center; }
/* long-form paragraphs go back to a fixed left edge */
.left { text-align: left; }

.mt-xs { margin-top: 12px; }
.mt-sm { margin-top: 18px; }
.mt-md { margin-top: 28px; }
.mt-lg { margin-top: 44px; }

.grid { display: grid; gap: 20px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .g2, .g3 { grid-template-columns: 1fr; } }

/* ---------------- reveal (subtle, never looping) ---------------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------------- progress ---------------- */
.prog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 100; background: hsl(24 10% 14%); }
.prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent-deep), var(--accent-shim)); }

/* ---------------- header qualifier (moved into the black header bar) ---------------- */
.hdr-qual {
  min-width: 0;
  display: block; text-align: center;
  font-size: clamp(.76rem, 1.05vw, .9rem);
  font-weight: 600; color: hsl(38 98% 84%);
  letter-spacing: .01em; line-height: 1.35;
}
.hdr-qual .flag {
  margin-right: 8px; font-size: 1.15em; line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}
/* the qualifier sits inline on the same row as the logo and the licence,
   centred in the space between them. Below 1120px there is no longer room,
   so it drops to its own centred row inside the same black bar. */
.hdr .brand { grid-column: 1; grid-row: 1; }
.hdr-qual  { grid-column: 2; grid-row: 1; justify-self: center; }
.hdr-right { grid-column: 3; grid-row: 1; }
@media (max-width: 1120px) {
  .hdr { grid-template-columns: auto 1fr; }
  .hdr-right { grid-column: 2; }
  .hdr-qual {
    grid-column: 1 / -1; grid-row: 2; justify-self: stretch;
    padding-top: 9px; border-top: 1px solid hsl(24 10% 14%);
  }
}

/* ---------------- header ---------------- */
.hdr {
  position: sticky; top: 3px; z-index: 80;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; row-gap: 9px;
  padding: 12px var(--pad-x);
  background: hsl(24 14% 5% / .9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid hsl(24 10% 14%);
}
.hdr .brand { display: flex; align-items: center; line-height: 0; justify-self: start; }
/* horizontal lockup: the wordmark stacks in three lines beside the mark,
   so it needs a little more height than a single-line logo would */
.hdr .brand img { height: 50px; width: auto; }
.hdr-right { display: flex; align-items: center; gap: 10px; justify-self: end; }
.hdr .hdr-cta { padding: 12px 22px; font-size: .9rem; }
@media (max-width: 640px) {
  .hdr { padding: 10px 14px; }
  .hdr .brand img { height: 38px; }
  .hdr .hdr-cta { padding: 11px 15px; font-size: .8rem; }
}

/* the header side columns must never wrap — the qualifier drops to its own row
   below 1360px instead */
.hdr-lic-k, .hdr-lic-v, .hdr .hdr-cta, .hdr .rdr-btn { white-space: nowrap; }


/* reader controls */
.rdr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 46px; height: 46px; padding: 0 13px;
  border-radius: 99px; border: 1px solid var(--border-2);
  background: hsl(24 12% 11%); color: var(--fg);
  font-family: var(--font); font-size: .85rem; font-weight: 600; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.rdr-btn:hover { border-color: hsl(28 94% 56% / .55); color: var(--accent-soft); }
.rdr-btn .aa { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; line-height: 1; }
@media (max-width: 480px) { .rdr-btn span:not(.aa) { display: none; } .rdr-btn { padding: 0; } }

.rdr-panel {
  position: fixed; right: 14px; top: 74px; z-index: 120;
  width: min(310px, calc(100vw - 28px));
  background: var(--card); border: 1px solid var(--border-2);
  border-radius: 16px; padding: 20px; text-align: left;
  box-shadow: 0 24px 60px hsl(0 0% 0% / .6);
  display: none;
}
.rdr-panel[data-open="true"] { display: block; }
.rdr-panel h3 { font-size: 1rem; }
.rdr-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--border);
}
.rdr-opt:last-of-type { border-bottom: 0; }
.rdr-opt .k { display: block; font-size: .95rem; font-weight: 600; color: var(--fg); line-height: 1.4; }
.rdr-opt .d { display: block; font-size: .82rem; color: var(--muted-2); margin-top: 4px; line-height: 1.45; word-spacing: normal; }
.sw {
  flex: none; width: 52px; height: 30px; border-radius: 99px; cursor: pointer;
  background: hsl(24 10% 22%); border: 1px solid var(--border-2); position: relative;
  transition: background .2s var(--ease);
}
.sw::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; border-radius: 99px; background: var(--muted);
  transition: transform .22s var(--ease), background .22s var(--ease);
}
.sw[aria-checked="true"] { background: hsl(28 94% 56% / .38); border-color: hsl(28 94% 56% / .6); }
.sw[aria-checked="true"]::after { transform: translateX(22px); background: var(--accent-shim); }

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  border-radius: 99px; padding: 17px 34px; min-height: 54px;
  font-family: var(--font); font-weight: 600; font-size: 1rem;
  letter-spacing: .01em; word-spacing: normal;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s, border-color .25s, color .25s;
}
.btn-primary {
  background: linear-gradient(115deg, var(--accent-deep), var(--accent) 58%, var(--accent-soft));
  color: var(--accent-ink);
  box-shadow: 0 10px 34px hsl(28 94% 50% / .3);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 44px hsl(28 94% 50% / .42); }
.btn-ghost { border-color: var(--border-2); color: var(--fg); background: hsl(24 12% 11% / .7); }
.btn-ghost:hover { border-color: hsl(28 94% 56% / .5); color: var(--accent-soft); }
.btn-lg { padding: 19px 42px; font-size: 1.08rem; min-height: 60px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
@media (max-width: 520px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
}

/* ---------------- hero ---------------- */
/* The hero is budgeted so the heading, the video and the proof line beneath it
   all land inside the first screen. The video is capped by the space actually
   left over, so it shrinks on short laptops instead of pushing the proof line
   below the fold. */
.hero { padding-top: clamp(26px, 3.2vw, 44px); }
.hero h1 {
  margin-top: 0;
  max-width: 20ch; margin-left: auto; margin-right: auto;
  font-size: clamp(1.95rem, 4.1vw, 3.05rem);
}
/* the orange payoff phrase always sits alone on the final line */
.hero h1 .hl { display: block; }
/* the hero sub is a short proof line, not a paragraph — give it more presence
   and let it break into two balanced lines rather than one over-wide one */
.hero .sub {
  margin-top: 22px;
  max-width: 68ch;
  font-size: clamp(1.08rem, 1.5vw, 1.24rem);
  font-weight: 600;
  color: hsl(30 18% 89%);
  text-wrap: balance;
}
/* never break a proof claim across two lines */
.hero .sub .cl { white-space: nowrap; }

/* hero video sized against the remaining viewport height */
.hero .vid {
  margin-top: clamp(18px, 2.4vw, 28px);
  max-width: min(900px, calc((100svh - 400px) * 16 / 9));
}
/* the proof line now sits directly under the video */
.hero .vid-cap.proof {
  margin-top: clamp(11px, 1.5vw, 15px);
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  font-weight: 600;
  color: hsl(30 18% 89%);
  text-wrap: balance;
}
.hero .vid-cap.proof .cl { white-space: nowrap; }

.hero-stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(18px, 3vw, 30px); margin-top: 40px;
}
.hero-stats .s {
  min-width: 172px; padding: 18px 20px;
  background: hsl(24 12% 9% / .8); border: 1px solid var(--border); border-radius: 14px;
}
.hero-stats .s .v { font-family: var(--font-num); font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 700; color: var(--fg); line-height: 1.1; }
.hero-stats .s .k { font-size: .84rem; color: var(--muted-2); margin-top: 7px; line-height: 1.4; word-spacing: normal; }
@media (max-width: 620px) {
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .hero-stats .s { min-width: 0; padding: 15px 8px; }
  .hero-stats .s .v { font-size: 1.15rem; }
  .hero-stats .s .k { font-size: .72rem; margin-top: 5px; word-spacing: normal; }
}

/* ---------------- hero video slot ---------------- */
.vid {
  position: relative;
  width: 100%; max-width: 840px; margin: 36px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 18px; overflow: hidden;
  border: 1px solid var(--border-2);
  background: linear-gradient(160deg, var(--card-2), var(--bg-2));
  box-shadow: 0 26px 70px hsl(0 0% 0% / .5), 0 0 0 6px hsl(28 94% 56% / .05);
}
.vid wistia-player { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vid iframe, .vid video {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
}
/* placeholder shown until a real embed URL is dropped in */
.vid-ph {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  text-align: center; padding: 24px;
  background-image:
    radial-gradient(420px 300px at 50% 40%, hsl(28 94% 56% / .1), transparent 70%),
    repeating-linear-gradient(135deg, hsl(24 10% 14% / .5) 0 12px, transparent 12px 24px);
}
.vid-play {
  flex: none;
  width: 74px; height: 74px; border-radius: 99px; display: grid; place-items: center;
  background: linear-gradient(115deg, var(--accent-deep), var(--accent) 58%, var(--accent-soft));
  box-shadow: 0 12px 36px hsl(28 94% 50% / .38);
}
.vid-play svg { width: 28px; height: 28px; margin-left: 4px; color: var(--accent-ink); }
.vid-ph .t { font-size: 1.02rem; font-weight: 600; color: var(--fg); }
.vid-ph .d { font-size: .88rem; color: var(--muted-2); max-width: 40ch; line-height: 1.55; }
.vid-cap { margin-top: 14px; font-size: .9rem; color: var(--muted-2); }
@media (max-width: 560px) {
  .vid { border-radius: 14px; margin-top: 28px; }
  .vid-play { width: 56px; height: 56px; }
  .vid-play svg { width: 22px; height: 22px; }
  .vid-ph { gap: 12px; }
  .vid-ph .d { font-size: .8rem; }
}

/* qualifier checklist */
.hero-card {
  max-width: 700px; margin: clamp(60px, 7.5vw, 96px) auto 0;
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border); border-radius: 18px;
  padding: 28px clamp(20px, 3vw, 34px);
  text-align: left;
}
.hero-card .hc-k { font-size: 1rem; font-weight: 600; color: var(--accent-soft); text-align: center; }
.hc-list { list-style: none; margin-top: 20px; display: grid; gap: 15px; }
.hc-list li { display: flex; gap: 14px; align-items: flex-start; font-size: 1rem; color: var(--fg); line-height: 1.55; }
.hc-list .tick {
  flex: none; width: 26px; height: 26px; border-radius: 99px; margin-top: 1px;
  display: grid; place-items: center;
  background: hsl(28 94% 56% / .16); color: var(--accent-soft);
  font-size: .8rem; font-weight: 700;
}
.hc-foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); text-align: center; }

/* ---------------- cards ---------------- */
.card {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border); border-radius: 16px;
  padding: 26px 26px 28px;
  text-align: left;
}
.card .cn {
  font-family: var(--font-num); font-size: .82rem; color: var(--accent-soft);
  background: hsl(28 94% 56% / .12); border-radius: 99px;
  width: 34px; height: 34px; display: grid; place-items: center; margin-bottom: 15px;
}
.card p { margin-top: 11px; font-size: .98rem; }

/* ---------------- locks ---------------- */
.locks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .locks { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
.lock {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border); border-radius: 18px; padding: 30px 26px;
  text-align: left;
}
.lock .ico {
  width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center;
  background: hsl(28 94% 56% / .13); border: 1px solid hsl(28 94% 56% / .28); color: var(--accent-soft);
}
.lock .ico svg { width: 25px; height: 25px; }
.lock h3 { margin-top: 18px; }
.lock p { margin-top: 11px; font-size: .98rem; }

/* ---------------- proof ---------------- */
.proof-num {
  font-family: var(--font-num); font-weight: 700; word-spacing: normal;
  font-size: clamp(3rem, 8vw, 5.2rem); line-height: 1;
  background: linear-gradient(115deg, var(--accent-deep), var(--accent) 42%, var(--accent-shim));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* Static grid. No marquee — nothing on this page moves by itself. */
.pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 36px; }
@media (max-width: 900px) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
.pgrid img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--border); background: hsl(24 12% 8%);
}
.pgrid .more { display: none; }
.pgrid[data-expanded="true"] .more { display: block; }

/* ---------------- calculator ---------------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; text-align: left; }
@media (max-width: 880px) { .calc { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; } }
.calc-in, .calc-out {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border); border-radius: 18px; padding: 28px;
  display: grid; gap: 22px; align-content: start;
}
.fld { display: block; }
.fld-k { display: block; font-size: .95rem; font-weight: 600; color: var(--fg); }
.fld-w {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  background: hsl(24 12% 13%); border: 1px solid var(--border-2); border-radius: 12px;
  padding: 14px 16px; transition: border-color .2s var(--ease);
}
.fld-w:focus-within { border-color: hsl(28 94% 56% / .7); }
.fld-c { color: var(--muted-2); font-family: var(--font-num); font-weight: 700; font-size: 1.15rem; }
.fld-w input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  color: var(--fg); font-family: var(--font-num); font-weight: 700; font-size: 1.25rem;
  word-spacing: normal; letter-spacing: normal;
}
.fld-h { display: block; margin-top: 9px; font-size: .88rem; color: var(--muted-2); line-height: 1.5; }

.ot-k { font-size: .95rem; font-weight: 600; color: var(--fg); }
.ot-v { font-family: var(--font-num); font-weight: 700; word-spacing: normal; font-size: clamp(2rem, 4.4vw, 2.9rem); margin-top: 8px; color: var(--accent-soft); line-height: 1.1; }
.ot-d { font-size: .88rem; color: var(--muted-2); margin-top: 8px; line-height: 1.5; }

.ladder { display: grid; gap: 14px; }
.ld { display: flex; align-items: center; gap: 14px; }
.ld-k { font-size: .92rem; color: var(--muted); width: 74px; flex: none; word-spacing: normal; }
.ld-bar { flex: 1; height: 30px; background: hsl(24 10% 13%); border-radius: 8px; overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--accent-deep), var(--accent-shim)); transition: width .7s var(--ease); }
.ld-v { font-family: var(--font-num); font-weight: 700; font-size: 1rem; width: 104px; text-align: right; flex: none; word-spacing: normal; }

/* ---------------- testimonials ---------------- */
.tst {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border); border-radius: 18px; padding: 28px;
  display: flex; flex-direction: column; gap: 18px; text-align: left;
}
.tst q { display: block; font-size: 1.06rem; line-height: 1.6; color: var(--fg); font-weight: 400; quotes: '\201C' '\201D'; }
.tst .who { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.tst .av {
  width: 46px; height: 46px; border-radius: 99px; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent-deep), var(--accent)); color: var(--accent-ink);
  font-weight: 800; font-size: .95rem; font-family: var(--font-display); word-spacing: normal;
}
.tst .nm { font-weight: 600; font-size: 1rem; display: block; }
.tst .rl { font-size: .88rem; color: var(--muted-2); display: block; }
.stars { color: var(--accent-soft); font-size: 1rem; letter-spacing: .18em; word-spacing: normal; }

/* ---------------- licence ---------------- */

/* ---------------- faq ---------------- */
.faq { display: grid; gap: 12px; max-width: 800px; margin: 0 auto; text-align: left; }
.qa {
  background: linear-gradient(180deg, var(--card), var(--bg-2));
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.qa summary {
  list-style: none; cursor: pointer; padding: 20px 24px; min-height: 60px;
  font-weight: 500; font-size: 1.02rem; color: var(--fg);
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  line-height: 1.5;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; font-family: var(--font-num); color: var(--accent-soft); font-size: 1.6rem; flex: none; line-height: 1; }
.qa[open] summary::after { content: "\2212"; }
.qa[open] summary { color: var(--accent-soft); }
.qa .a { padding: 0 24px 24px; font-size: 1rem; color: var(--muted); max-width: var(--measure); }

/* ---------------- final cta ---------------- */
.final .inner { max-width: 780px; }
.final .cta-row { margin-top: 36px; }
.final-note { margin-top: 22px; font-size: .92rem; color: var(--muted-2); }

/* ---------------- footer ---------------- */
.ftr { padding: 40px var(--pad-x) 52px; border-top: 1px solid hsl(24 10% 13%); position: relative; z-index: 1; text-align: center; }
.ftr .fbrand { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ftr img { height: 54px; width: auto; opacity: .92; }
.ftr .lic-line { font-family: var(--font-num); font-size: .92rem; color: var(--muted-2); word-spacing: normal; }
.ftr .disc { margin-top: 26px; }

/* sticky mobile CTA */
.mcta {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 95;
  display: none; opacity: 0; transform: translateY(90px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mcta.show { opacity: 1; transform: none; }
.mcta .btn { width: 100%; box-shadow: 0 12px 40px hsl(24 96% 38% / .55); }
@media (max-width: 760px) { .mcta { display: block; } .ftr { padding-bottom: 104px; } }

/* ---- verification & licensing (matches apply.makemoney.com.au) ---- */
.verify-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  max-width: 860px; margin-left: auto; margin-right: auto;
}
.vf { display: flex; flex-direction: column; gap: 10px; padding: 28px 26px 30px; }
.vf-ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px;
  background: hsl(28 94% 56% / .1); border: 1px solid hsl(24 60% 34% / .45);
  color: var(--accent); margin-bottom: 4px;
}
.vf-k {
  font-size: .8rem; font-family: var(--font-num); font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); line-height: 1.5;
}
.vf-v {
  font-family: var(--font-num); font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 700; letter-spacing: -.01em; color: var(--fg); word-spacing: normal;
}
.vf-d { font-size: 1rem; line-height: 1.65; color: var(--muted); margin: 0; }
.vf-link { text-decoration: none; color: inherit; display: flex; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.vf-link:hover { border-color: hsl(28 55% 34%); transform: translateY(-3px); }
.vf-go {
  display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 16px;
  font-family: var(--font-num); font-size: .74rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-soft); transition: gap .25s var(--ease);
}
.vf-link:hover .vf-go { gap: 11px; }
.ul { text-decoration: underline; text-decoration-color: hsl(28 94% 56% / .6); text-underline-offset: 4px; }
@media (max-width: 720px) { .verify-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vf-link:hover { transform: none; } }

/* closing headline: highlight always lands on its own final line */
.final h2 .hl { display: block; }

/* ============================================================
   member video stories
   ============================================================ */
.vgrid {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.vcard { display: flex; flex-direction: column; }
.vplay {
  position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden; background: var(--card); cursor: pointer;
  aspect-ratio: 16 / 9; line-height: 0;
  transition: border-color .18s ease, transform .18s ease;
}
.vplay img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1); transition: transform .3s ease;
}
.vplay:hover, .vplay:focus-visible { border-color: var(--accent); }
.vplay:hover img { transform: scale(1.04); }
.vbadge {
  position: absolute; inset: 0; margin: auto;
  width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #16100a;
  box-shadow: 0 8px 26px hsl(24 90% 8% / .55);
  transition: transform .18s ease;
}
.vplay:hover .vbadge { transform: scale(1.07); }
.vcard iframe {
  width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--border);
  border-radius: var(--r-lg); display: block; background: #000;
}
/* multi-line under a card stays left aligned for readability */
.vtitle {
  margin-top: 14px; text-align: left; font-size: .98rem; font-weight: 600;
  line-height: 1.55; color: var(--fg); word-spacing: normal;
}
@media (prefers-reduced-motion: reduce) {
  .vplay img, .vplay:hover img { transform: none; transition: none; }
  .vbadge, .vplay:hover .vbadge { transition: none; transform: none; }
}

/* ---------------- live market ticker ----------------
   Same feed and treatment as the ticker on makemoney.com.au: US indexes from
   CNBC, crypto from CoinGecko, refreshed client side every 30 seconds. */
.mtick {
  position: relative; z-index: 91;
  height: 34px; overflow: hidden;
  background: hsl(24 14% 3% / .92);
  border-bottom: 1px solid hsl(24 10% 14%);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.mtick-track {
  display: inline-flex; align-items: center; height: 100%;
  gap: 48px; padding-left: 48px; white-space: nowrap;
  animation: tickerScroll 55s linear infinite;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mtick .tk {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 500; letter-spacing: .22em;
  color: hsl(30 14% 78%);
}
.mtick .tk strong {
  color: #fff; font-weight: 700; margin-right: 6px;
  font-family: var(--font-num, inherit); font-variant-numeric: tabular-nums;
}
.mtick .tk em { font-style: normal; font-weight: 700; letter-spacing: .1em; color: var(--accent); }
.mtick .tk em.up { color: hsl(142 71% 45%); }
.mtick .tk em.down { color: hsl(0 84% 60%); }
.mtick .tk-dot {
  width: 5px; height: 5px; border-radius: 50%;
  display: inline-block; background: var(--accent);
  box-shadow: 0 0 10px hsl(28 94% 56% / .7);
}
.mtick .tk-dot.up { background: hsl(142 71% 45%); box-shadow: 0 0 10px hsl(142 71% 45% / .7); }
.mtick .tk-dot.down { background: hsl(0 84% 60%); box-shadow: 0 0 10px hsl(0 84% 60% / .7); }
@media (max-width: 640px) {
  .mtick { height: 30px; }
  .mtick .tk { font-size: 10px; letter-spacing: .18em; }
  .mtick-track { gap: 34px; padding-left: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .mtick-track { animation: none; }
}

/* ---------------- locked flywheel ----------------
   Ported from the flywheel on makemoney.com.au and apply.makemoney.com.au so
   the three sites behave identically. Tap a lock, the wheel speeds up. */
.fly-wrap {
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 42px;
  align-items: center; width: 100%; max-width: 980px; margin-inline: auto;
  text-align: left;
}
.fly-stage { position: relative; padding: 10px; }
.wheel { position: relative; width: min(400px, 78vw); margin: 0 auto; aspect-ratio: 1; }
.wheel svg { width: 100%; height: 100%; overflow: visible; }
.wheel .spinner {
  transform-origin: 120px 120px;
  animation: mmt-turn 26s linear infinite; animation-play-state: paused;
}
.wheel[data-open="1"] .spinner { animation-duration: 15s; animation-play-state: running; }
.wheel[data-open="2"] .spinner { animation-duration: 9s; animation-play-state: running; }
.wheel[data-open="3"] .spinner { animation-duration: 4.6s; animation-play-state: running; }
@keyframes mmt-turn { to { transform: rotate(360deg); } }
.wheel .hubv { font-family: var(--font-num); font-size: 30px; font-weight: 700; fill: var(--fg); }
.wheel .hubv.hub-license { font-size: 15px; letter-spacing: .02em; }
.wheel .hubv.done { font-size: 21px; fill: hsl(150 68% 55%); }
.wheel .hubk { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; fill: var(--muted); font-weight: 700; }
.wheel .hubk.hub-license-num { font-size: 9px; letter-spacing: .14em; text-transform: none; }
.wheel .hubk.done { font-size: 13px; letter-spacing: .02em; text-transform: none; fill: hsl(150 68% 55%); }
#nudge-pulse { filter: drop-shadow(0 0 8px currentColor); animation: mmt-nudge 1.6s ease-in-out infinite; }
@keyframes mmt-nudge { 0%,100% { r: 9; opacity: .95; } 50% { r: 15; opacity: .25; } }

.fly-side { display: flex; flex-direction: column; gap: 16px; }
.fw-locks { display: flex; flex-direction: column; gap: 8px; }
.fw-lock {
  --lc: hsl(155 65% 47%);
  display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px;
  padding: 14px 16px; text-align: left; cursor: pointer; font: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  color: var(--fg);
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.fw-lock:hover { background: var(--bg-2); border-color: hsl(24 10% 26%); }
.fw-lock--nudge { animation: mmt-bounce 1.6s ease-in-out infinite; }
@keyframes mmt-bounce { 0%,100% { transform: none; } 50% { transform: translateX(4px); } }
.fw-lock .fw-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: hsl(0 0% 100% / .05); color: var(--muted);
  transition: background .3s ease, color .3s ease;
}
.fw-lock .fw-ico svg { width: 20px; height: 20px; }
.fw-lock[aria-pressed="true"] .fw-ico { background: hsl(155 65% 47% / .15); color: var(--lc); }
.fw-lock .fw-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fw-lock .t { font-weight: 700; font-size: .98rem; color: var(--fg); }
.fw-lock .d { font-size: .85rem; color: var(--muted); line-height: 1.4; }
.fw-lock .d a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.fw-lock .d a:hover { color: var(--accent); }
.fw-lock .st {
  font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: hsl(28 8% 58%); padding: 4px 10px; border: 1px solid var(--border);
  border-radius: 999px; white-space: nowrap;
  transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.fw-lock[aria-pressed="true"] .st { color: var(--lc); border-color: hsl(155 65% 47% / .35); background: hsl(155 65% 47% / .08); }

.fly-status {
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: hsl(0 0% 100% / .02);
  transition: border-color .4s ease, background .4s ease;
}
.fly-status.full { border-color: hsl(155 65% 47% / .35); background: hsl(155 65% 47% / .06); }
.fly-status .cnt {
  font-family: var(--font-num); font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.fly-status.full .cnt { color: hsl(150 68% 65%); }
.fly-status .msg { font-size: .9rem; color: var(--fg); line-height: 1.45; min-height: 1.3em; }

.fly-trust {
  display: none; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: 12px;
  background: hsl(0 0% 100% / .02); color: var(--fg);
  font-size: .85rem; text-decoration: none;
}
.fly-wrap.all-open .fly-trust { display: flex; animation: mmt-fade .5s ease both; }
.fly-trust:hover { border-color: hsl(24 10% 26%); }
.fly-trust .ft-l { color: var(--muted); }
@keyframes mmt-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .fly-wrap { grid-template-columns: 1fr; gap: 26px; }
  .fly-stage { padding: 0; }
}
@media (max-width: 560px) {
  .fw-lock { grid-template-columns: 38px 1fr; padding: 12px 14px; gap: 12px; }
  .fw-lock .fw-ico { width: 36px; height: 36px; }
  .fw-lock .st { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wheel .spinner, .fw-lock--nudge, #nudge-pulse { animation: none !important; }
}

/* ---------------- member stories: compact cards ---------------- */
.vgrid-sm { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; max-width: 1120px; margin-inline: auto; }
.vgrid-sm .vtitle { margin-top: 10px; font-size: .84rem; line-height: 1.45; }
.vgrid-sm .vbadge { width: 36px; height: 36px; }
.vgrid-sm .vbadge svg { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .vgrid-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vgrid-sm .vtitle { font-size: .78rem; margin-top: 8px; }
  .vgrid-sm .vbadge { width: 34px; height: 34px; }
  .vgrid-sm .vbadge svg { width: 14px; height: 14px; }
}

/* ---------------- header licence (top right) ---------------- */
.hdr-lic {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  text-decoration: none; line-height: 1.25; margin-right: 4px;
  padding: 4px 2px; border-radius: 8px;
}
.hdr-lic-k {
  font-family: var(--font-num);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
  color: hsl(30 10% 68%); transition: color .18s ease;
}
.hdr-lic-v {
  font-family: var(--font-num);
  font-size: 13px; letter-spacing: .02em; font-weight: 700; color: #fff;
  transition: color .18s ease;
}
.hdr-lic:hover .hdr-lic-v, .hdr-lic:focus-visible .hdr-lic-v { color: var(--accent); }
.hdr-lic:hover .hdr-lic-k, .hdr-lic:focus-visible .hdr-lic-k { color: var(--accent-soft); }
@media (max-width: 820px) { .hdr-lic { display: none; } }

/* closing headline keeps each sentence on its own line */
.final .inner { max-width: 1000px; }

/* ---------------- recent results (under the calculator) ---------------- */
.mt-xl { margin-top: 64px; }
.rres { text-align: center; }
.rres-h { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.2; margin-top: 10px; letter-spacing: -.01em; }
.rres-sub { margin-top: 10px; }
.rres-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.rr { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 10px; }
.rr-img {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  aspect-ratio: 16 / 10; border-radius: 9px; color: var(--muted);
  border: 1px dashed hsl(24 10% 26%);
  background: repeating-linear-gradient(135deg, hsl(24 12% 11%) 0 10px, hsl(24 12% 9%) 10px 20px);
  font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; font-family: var(--font-num);
}
.rr-img svg { width: 26px; height: 26px; opacity: .75; }
.rr-img img, .rr > img { width: 100%; height: auto; display: block; border-radius: 9px; }
.rr-cap { margin-top: 10px; padding: 0 4px 4px; color: var(--muted); font-size: .87rem; line-height: 1.5; text-align: left; }
.rres-fine { margin-top: 18px; }
@media (max-width: 560px) {
  .rres-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rr { padding: 7px; }
  .rr-cap { font-size: .78rem; margin-top: 8px; }
  .rr-img { font-size: .62rem; gap: 5px; }
  .rr-img svg { width: 20px; height: 20px; }
}

/* reviews pill in the hero CTA row */
.btn-rev {
  display: inline-flex; align-items: center; gap: 8px;
  background: hsl(28 94% 56% / .1);
  border: 1px solid hsl(28 94% 56% / .55);
  color: var(--accent-soft);
  box-shadow: none;
}
.btn-rev svg { flex: none; }
.btn-rev:hover, .btn-rev:focus-visible {
  background: hsl(28 94% 56% / .18);
  border-color: var(--accent);
  color: var(--accent-shim);
}

/* ---- results (charts) ---- */
.res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 24px); }
.rc { margin: 0; background: var(--card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.rc-shot { aspect-ratio: 16 / 10; background: hsl(24 14% 4%); overflow: hidden; }
.rc-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-b { padding: clamp(14px, 1.4vw, 20px); display: flex; flex-direction: column; gap: 10px; text-align: left; flex: 1; }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-k { font-family: var(--font-display); font-weight: 700; font-size: .92rem; letter-spacing: .01em; }
.rc-p { font-size: .95rem; line-height: 1; color: hsl(24 14% 6%); background: linear-gradient(135deg, var(--accent-soft), var(--accent-deep)); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.rc-d { color: var(--muted); font-size: .95rem; line-height: 1.5; margin: 0; text-align: left; }
.rc-l { display: inline-flex; align-items: center; gap: 7px; color: var(--accent-soft); font-weight: 600; font-size: .86rem; text-decoration: none; border-top: 1px solid var(--border); padding-top: 12px; margin-top: auto; }
.rc-l:hover { color: var(--accent-shim); }
.res-fine { margin-top: 18px; text-align: center; }
.res-trust-wrap { margin-top: 22px; display: flex; justify-content: center; }
.res-trust { display: inline-flex; }
@media (max-width: 900px) {
  .res { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
}

/* ---- funded trader certificate wall (same wall as makemoney.com.au) ---- */
.cwall { text-align: center; }
.cwall-h { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.05rem); line-height: 1.2; letter-spacing: -.01em; margin: 0; }
.cwall-sub { margin-top: 10px; }
.certs-wall { display: flex; flex-direction: column; gap: 18px; }
.cw-group { display: flex; flex-direction: column; gap: 10px; }
.cw-row {
  position: relative; overflow: hidden; border-radius: 10px; height: 148px;
  mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 6%, black 94%, transparent 100%);
}
@media (max-width: 720px) { .cw-row { height: 108px; } }
.cw-track {
  display: flex; gap: 14px; height: 100%; width: max-content;
  animation: mmt-marquee var(--cw-dur, 60s) linear infinite;
  animation-delay: var(--cw-delay, 0s); will-change: transform;
}
.cw-row.rev .cw-track { animation-direction: reverse; }
@keyframes mmt-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cw-row:hover .cw-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cw-track { animation: none; } }
.cert {
  display: inline-flex; align-items: center; justify-content: center;
  height: 100%; aspect-ratio: 4 / 3; padding: 0;
  border: 1px solid var(--border); border-radius: 8px; background: var(--card);
  overflow: hidden; cursor: zoom-in; flex-shrink: 0;
  transition: border-color .2s ease, transform .2s ease;
}
.cert:hover { border-color: var(--accent); transform: translateY(-2px); }
.cert:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cert img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cert-paid { border-color: hsl(155 65% 47% / .34); }
.cert-box[open] {
  position: fixed; inset: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
  border: 0; padding: 40px; margin: 0; background: hsl(24 14% 3% / .94); color: var(--fg);
  display: flex; align-items: center; justify-content: center; cursor: zoom-out; z-index: 9998;
}
.cert-box::backdrop { background: hsl(24 14% 3% / .94); }
.cert-box:not([open]) { display: none; }
.cert-box img { max-width: min(1080px, 92vw); max-height: 86vh; object-fit: contain; border-radius: 12px; box-shadow: 0 40px 120px hsl(0 0% 0% / .6); }
.cert-x {
  position: absolute; top: 20px; right: 20px; width: 42px; height: 42px; border-radius: 999px;
  background: hsl(0 0% 100% / .08); border: 1px solid hsl(0 0% 100% / .18); color: var(--fg);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.cert-x:hover { background: hsl(0 0% 100% / .14); }

/* ---- want to see more results (member screenshots) ---- */
/* one result per line, stacked and centred, same reading order as the
   Recent Client Results block on makemoney.com.au/confirmation */
.shots {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(22px, 3vw, 40px);
  max-width: 560px; margin-left: auto; margin-right: auto;
}
.shotb {
  display: block; width: 100%; padding: 0; margin: 0;
  border: 1px solid var(--border); border-radius: 14px; background: var(--card);
  overflow: hidden; cursor: zoom-in; break-inside: avoid;
  transition: border-color .2s ease, transform .2s ease;
}
.shotb:hover { border-color: var(--accent); transform: translateY(-2px); }
.shotb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.shotb img { display: block; width: 100%; height: auto; }

.shots-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; padding: 6px 0; }
.shots-cta-n { color: var(--muted); font-size: .92rem; }
@media (max-width: 620px) { .shots-cta .btn { width: 100%; } }