/* Revision Companion: website styles.
   Same palette and type as the app (ink navy, brass, parchment, Source Serif 4 + Inter).
   Light and dark. Motion is gentle and switches off for reduced-motion. */

:root{
  --ink:#1C2B3A;
  --ink-soft:#2C3E52;
  --bg:#F3ECDC;
  --bg-alt:#EBE2CD;
  --card:#FBF7ED;
  --brass:#846625;
  --gold:#D8C293;
  --gold-deep:#A6802E;
  --brick:#B5462F;
  --brick-soft:#F3DAD3;
  --sage:#4F6B4A;
  --sage-soft:#DCE6D8;
  --text:#2B2A28;
  --muted:#675E51;
  --border:#D9CFB8;
  --shadow:0 0.0625rem 0.1875rem rgba(28,43,58,0.07);
  --shadow-lg:0 1.5rem 3rem -1rem rgba(28,43,58,0.28);
  --on-accent:#F3ECDC;
  --inv-bg:#1C2B3A;
  --inv-text:#F3ECDC;
  --inv-muted:#B9B09B;
  --inv-line:rgba(216,194,147,0.22);
  --header-bg:rgba(243,236,220,0.82);
  --font-heading:'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius:0.5rem;
  --maxw:72rem;
  --ease:cubic-bezier(.22,.7,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F3ECDC;
    --ink-soft:#D9CFB8;
    --bg:#15202A;
    --bg-alt:#1A2733;
    --card:#1F2E3A;
    --brass:#E3C77C;
    --gold:#D8C293;
    --gold-deep:#C9A24A;
    --brick:#E2896C;
    --brick-soft:rgba(181,70,47,0.28);
    --sage:#9BC08A;
    --sage-soft:rgba(79,107,74,0.28);
    --text:#ECE6D8;
    --muted:#A79C86;
    --border:#34475A;
    --shadow:0 0.0625rem 0.25rem rgba(0,0,0,0.35);
    --shadow-lg:0 1.5rem 3rem -1rem rgba(0,0,0,0.6);
    --on-accent:#1C2B3A;
    --inv-bg:#0E1821;
    --header-bg:rgba(21,32,42,0.82);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#F3ECDC;
  --ink-soft:#D9CFB8;
  --bg:#15202A;
  --bg-alt:#1A2733;
  --card:#1F2E3A;
  --brass:#E3C77C;
  --gold:#D8C293;
  --gold-deep:#C9A24A;
  --brick:#E2896C;
  --brick-soft:rgba(181,70,47,0.28);
  --sage:#9BC08A;
  --sage-soft:rgba(79,107,74,0.28);
  --text:#ECE6D8;
  --muted:#A79C86;
  --border:#34475A;
  --shadow:0 0.0625rem 0.25rem rgba(0,0,0,0.35);
  --shadow-lg:0 1.5rem 3rem -1rem rgba(0,0,0,0.6);
  --on-accent:#1C2B3A;
  --inv-bg:#0E1821;
  --header-bg:rgba(21,32,42,0.82);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:1rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{max-width:100%; display:block;}
a{color:var(--brass); text-underline-offset:0.2em; text-decoration-thickness:0.0625rem;}
a:hover{text-decoration-thickness:0.125rem;}
:focus-visible{outline:0.1875rem solid var(--gold-deep); outline-offset:0.1875rem; border-radius:0.25rem;}
h1,h2,h3,h4{font-family:var(--font-heading); color:var(--ink); line-height:1.15; margin:0 0 0.75rem; text-wrap:balance;}
h1{font-size:clamp(2.25rem,6.2vw,4rem); font-weight:700; letter-spacing:-0.015em;}
h2{font-size:clamp(1.75rem,4.2vw,2.5rem); font-weight:650; letter-spacing:-0.01em;}
h3{font-size:1.25rem; font-weight:650;}
p{margin:0 0 1rem;}
.lead{font-size:clamp(1.0625rem,2vw,1.25rem); color:var(--muted); line-height:1.6; max-width:38rem;}
.eyebrow{
  display:inline-flex; align-items:center; gap:0.5rem; margin:0 0 1rem;
  font-size:0.75rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass);
}
.eyebrow::before{content:""; width:1.5rem; height:0.125rem; background:var(--gold-deep); border-radius:1px;}
.skip{position:absolute; left:-999px; top:0.5rem; z-index:100; background:var(--ink); color:var(--bg); padding:0.5rem 0.875rem; border-radius:0.25rem;}
.skip:focus{left:0.5rem;}

.wrap{width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:clamp(1rem,4vw,2rem);}
.section{padding-block:clamp(3.5rem,9vw,6.5rem);}
.section.alt{background:var(--bg-alt);}
.section-head{max-width:40rem; margin-bottom:clamp(2rem,5vw,3.25rem);}
.section-head.center{margin-inline:auto; text-align:center;}
.section-head.center .eyebrow{justify-content:center;}
.section-head.center .lead{margin-inline:auto;}

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50; background:var(--header-bg);
  -webkit-backdrop-filter:saturate(1.4) blur(0.75rem); backdrop-filter:saturate(1.4) blur(0.75rem);
  border-bottom:1px solid transparent; transition:border-color .25s, box-shadow .25s;
}
.site-header.scrolled{border-bottom-color:var(--border); box-shadow:0 0.5rem 1.5rem -1.25rem rgba(28,43,58,0.4);}
.nav{display:flex; align-items:center; gap:1rem; min-height:4.25rem;}
.brand{display:flex; align-items:center; gap:0.625rem; text-decoration:none; color:var(--ink); font-family:var(--font-heading); font-weight:700; font-size:1.1875rem; letter-spacing:-0.005em;}
.brand img{width:2.25rem; height:2.25rem; border-radius:0.5rem; box-shadow:0 0.125rem 0.5rem rgba(28,43,58,0.25);}
.nav-links{display:flex; align-items:center; gap:0.25rem; margin-left:auto; list-style:none; padding:0; margin-block:0;}
.nav-links a{
  display:inline-block; padding:0.5rem 0.75rem; border-radius:0.375rem; color:var(--text); text-decoration:none;
  font-size:0.9375rem; font-weight:500; position:relative;
}
.nav-links a:hover{color:var(--brass);}
.nav-links a[aria-current="page"]{color:var(--ink);}
.nav-links a[aria-current="page"]::after{content:""; position:absolute; left:0.75rem; right:0.75rem; bottom:0.1875rem; height:0.125rem; background:var(--gold-deep); border-radius:1px;}
.nav-actions{display:flex; align-items:center; gap:0.5rem;}
.icon-btn{
  width:2.5rem; height:2.5rem; display:inline-grid; place-items:center; border-radius:50%;
  border:1px solid var(--border); background:transparent; color:var(--ink); cursor:pointer; transition:background .2s, border-color .2s;
}
.icon-btn:hover{background:var(--card); border-color:var(--gold-deep);}
.icon-btn svg{width:1.125rem; height:1.125rem;}
.theme-btn .moon{display:none;}
:root[data-theme="dark"] .theme-btn .sun{display:none;}
:root[data-theme="dark"] .theme-btn .moon{display:block;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-btn .sun{display:none;}
  :root:not([data-theme="light"]) .theme-btn .moon{display:block;}
}
.menu-btn{display:none;}
@media (max-width: 52rem){
  .menu-btn{display:inline-grid;}
  .nav-links{
    position:absolute; left:0; right:0; top:100%; margin:0; padding:0.5rem clamp(1rem,4vw,2rem) 1rem;
    flex-direction:column; align-items:stretch; background:var(--bg); border-bottom:1px solid var(--border);
    display:none; box-shadow:0 1rem 2rem -1rem rgba(28,43,58,0.35);
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:0.75rem 0.5rem; font-size:1.0625rem;}
  .nav-links a[aria-current="page"]::after{left:0.5rem; right:auto; width:1.5rem;}
  .nav{gap:0.5rem;}
  .nav-actions{margin-left:auto;}
  .btn.nav-cta{display:none;}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  font:inherit; font-weight:600; font-size:1rem; line-height:1; padding:0.9375rem 1.5rem; border-radius:0.5rem;
  border:1px solid transparent; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s, color .2s, border-color .2s;
}
.btn-primary{background:var(--ink); color:var(--on-accent); box-shadow:0 0.375rem 1rem -0.5rem rgba(28,43,58,0.6);}
.btn-primary:hover{transform:translateY(-0.125rem); box-shadow:0 0.75rem 1.5rem -0.75rem rgba(28,43,58,0.7); text-decoration:none;}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--gold-deep); background:var(--card); text-decoration:none;}
.btn-sm{padding:0.6875rem 1.125rem; font-size:0.9375rem;}
.btn .arrow{transition:transform .25s var(--ease);}
.btn:hover .arrow{transform:translateX(0.1875rem);}
.inv .btn-primary{background:var(--gold); color:#1C2B3A; box-shadow:none;}
.inv .btn-ghost{color:var(--inv-text); border-color:var(--inv-line);}
.inv .btn-ghost:hover{background:rgba(255,255,255,0.06); border-color:var(--gold);}
.btn-row{display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center;}

/* ---------- hero ---------- */
.hero{position:relative; overflow:hidden; padding-block:clamp(2.5rem,7vw,5.5rem) clamp(3rem,7vw,5.5rem);}
.hero-bg{position:absolute; inset:0; pointer-events:none; z-index:0;}
.hero-bg svg{width:100%; height:100%;}
.hero-grid{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem,5vw,4rem); align-items:center;}
.hero h1 em{font-style:normal; background:linear-gradient(transparent 68%, color-mix(in srgb, var(--gold) 70%, transparent) 68%); padding-inline:0.05em;}
.hero .lead{margin-bottom:1.75rem;}
.hero-note{margin-top:1rem; font-size:0.875rem; color:var(--muted);}
.hero-note b{color:var(--ink); font-weight:600;}
@media (max-width: 56rem){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:2;}
}
.curve-line{fill:none; stroke:var(--gold-deep); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.3;}
.grid-line{stroke:var(--border); stroke-width:1; opacity:.55;}

/* phone mock */
.hero-visual{position:relative; display:grid; place-items:center; min-height:34rem;}
.phone{
  position:relative; width:min(19rem,78vw); aspect-ratio:9/18.5; background:var(--ink); border-radius:2.25rem; padding:0.5rem;
  box-shadow:var(--shadow-lg), 0 0 0 1px rgba(255,255,255,0.04) inset; animation:float 9s ease-in-out infinite;
}
:root[data-theme="dark"] .phone{background:#0B131A;}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .phone{background:#0B131A;} }
.phone-screen{
  position:relative; height:100%; background:var(--card); border-radius:1.75rem; overflow:hidden;
  display:flex; flex-direction:column; padding:1.125rem 1rem 1rem; font-size:0.8125rem; color:var(--text);
}
.phone-screen::before{content:""; position:absolute; top:0.5rem; left:50%; width:3.5rem; height:0.9rem; transform:translateX(-50%); background:#0B131A; border-radius:1rem; opacity:.9;}
.ph-top{display:flex; justify-content:space-between; align-items:center; margin-top:1rem; font-size:0.6875rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.ph-timer{color:var(--brass); font-variant-numeric:tabular-nums;}
.ph-bar{height:0.25rem; background:var(--border); border-radius:1rem; margin:0.625rem 0 0.875rem; overflow:hidden;}
.ph-bar i{display:block; height:100%; width:30%; background:linear-gradient(90deg,var(--gold-deep),var(--gold)); border-radius:1rem; transition:width .8s var(--ease);}
.ph-q{font-family:var(--font-heading); font-size:0.9375rem; line-height:1.4; color:var(--ink); font-weight:600; margin-bottom:0.75rem;}
.ph-opts{display:flex; flex-direction:column; gap:0.4375rem;}
.ph-opt{
  display:flex; align-items:center; gap:0.5rem; padding:0.5rem 0.625rem; border:1px solid var(--border); border-radius:0.4375rem; background:var(--bg);
  font-variant-numeric:tabular-nums; transition:background .35s, border-color .35s, transform .35s var(--ease);
}
.ph-opt b{width:1.25rem; height:1.25rem; flex:none; border-radius:50%; display:grid; place-items:center; font-size:0.625rem; border:1px solid var(--border); color:var(--muted); transition:all .35s;}
.ph-opt.pick{border-color:var(--gold-deep); transform:translateX(0.125rem);}
.ph-opt.right{background:var(--sage-soft); border-color:var(--sage);}
.ph-opt.right b{background:var(--sage); border-color:var(--sage); color:var(--card);}
.ph-opt.wrong{background:var(--brick-soft); border-color:var(--brick);}
.ph-exp{
  margin-top:0.75rem; padding:0.625rem 0.75rem; background:var(--sage-soft); border-left:0.1875rem solid var(--sage); border-radius:0.25rem;
  font-size:0.75rem; line-height:1.45; opacity:0; transform:translateY(0.5rem); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.ph-exp.show{opacity:1; transform:none;}
.ph-exp b{display:block; color:var(--sage); font-size:0.6875rem; letter-spacing:0.08em; text-transform:uppercase; margin-bottom:0.125rem;}
.ph-foot{margin-top:auto; display:flex; justify-content:space-between; align-items:center; font-size:0.6875rem; color:var(--muted);}
.ph-foot .pill{padding:0.3125rem 0.75rem; border-radius:1rem; background:var(--ink); color:var(--on-accent); font-weight:600;}
.float-chip{
  position:absolute; background:var(--card); border:1px solid var(--border); border-radius:0.75rem; box-shadow:var(--shadow-lg);
  padding:0.625rem 0.875rem; font-size:0.8125rem; display:flex; align-items:center; gap:0.625rem; z-index:2;
}
.float-chip b{font-family:var(--font-heading); font-size:1.0625rem; color:var(--ink); display:block; line-height:1.1;}
.float-chip small{color:var(--muted); font-size:0.6875rem; letter-spacing:0.04em;}
.chip-a{left:-9%; top:54%; animation:float 8s ease-in-out infinite reverse;}
.chip-b{right:-8%; bottom:18%; animation:float 10s ease-in-out -3s infinite;}
.ring{width:2.5rem; height:2.5rem; flex:none;}
.ring circle{fill:none; stroke-width:4;}
.ring .track{stroke:var(--border);}
.ring .arc{stroke:var(--gold-deep); stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%;}
.visual-caption{position:absolute; bottom:-1.75rem; left:0; right:0; text-align:center; font-size:0.75rem; color:var(--muted);}
@keyframes float{0%,100%{transform:translateY(0)} 50%{transform:translateY(-0.625rem)}}
@media (max-width: 56rem){
  .hero-visual{min-height:31rem;}
  .chip-a{left:0;} .chip-b{right:0;}
}
@media (max-width: 40rem){ .float-chip{display:none;} }
@media (max-width: 26rem){
  .chip-a{top:6%;} .chip-b{bottom:12%;}
}

/* ---------- trust strip ---------- */
.trust{border-block:1px solid var(--border); background:var(--bg-alt);}
.trust ul{list-style:none; margin:0; padding:1.125rem 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1rem 1.5rem;}
.trust li{display:flex; align-items:center; gap:0.625rem; font-size:0.875rem; line-height:1.35; color:var(--text);}
.trust svg{width:1.375rem; height:1.375rem; flex:none; color:var(--brass);}
@media (max-width: 62rem){ .trust ul{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 34rem){ .trust ul{grid-template-columns:1fr;} }

/* ---------- cards ---------- */
.cards{display:grid; gap:1.25rem; grid-template-columns:repeat(3,1fr);}
@media (max-width: 62rem){ .cards{grid-template-columns:1fr;} }
.cards.two{grid-template-columns:repeat(2,1fr);}
@media (max-width: 52rem){ .cards.two{grid-template-columns:1fr;} }
.cards.four{grid-template-columns:repeat(4,1fr);}
@media (max-width: 70rem){ .cards.four{grid-template-columns:repeat(2,1fr);} }
@media (max-width: 36rem){ .cards.four{grid-template-columns:1fr;} }
.card{
  position:relative; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem;
  box-shadow:var(--shadow); transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card.lift:hover{transform:translateY(-0.25rem); box-shadow:var(--shadow-lg); border-color:var(--gold-deep);}
.module .glyph{width:2.75rem; height:2.75rem; color:var(--brass); margin-bottom:1rem;}
.module .units{font-size:0.75rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); margin-bottom:0.25rem;}
.module h3{font-size:1.4375rem; margin-bottom:0.25rem;}
.module .full-name{color:var(--muted); font-size:0.9375rem; margin-bottom:1rem;}
.module .format{padding-block:0.875rem; border-block:1px dashed var(--border); font-size:0.9375rem; margin-bottom:1rem;}
.module .format b{color:var(--ink);}
.stat-row{display:flex; gap:1.25rem; flex-wrap:wrap;}
.stat-row div{min-width:4rem;}
.stat-row strong{display:block; font-family:var(--font-heading); font-size:1.5rem; color:var(--ink); line-height:1.1; font-variant-numeric:tabular-nums;}
.stat-row span{font-size:0.75rem; color:var(--muted); letter-spacing:0.04em;}

/* ---------- study loop ---------- */
.loop{position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; counter-reset:step;}
.loop::before{
  content:""; position:absolute; top:1.5rem; left:12.5%; right:12.5%; height:0.125rem;
  background:repeating-linear-gradient(90deg,var(--border) 0 0.5rem,transparent 0.5rem 0.875rem);
}
.loop::after{
  content:""; position:absolute; top:1.5rem; left:12.5%; width:75%; height:0.125rem; background:var(--gold-deep);
  transform-origin:left; transform:scaleX(0); transition:transform 1.6s var(--ease) .2s;
}
.loop.in::after{transform:scaleX(1);}
.step{position:relative; text-align:center; padding-inline:0.25rem;}
.step .num{
  position:relative; z-index:1; width:3rem; height:3rem; margin:0 auto 1.125rem; border-radius:50%; display:grid; place-items:center;
  background:var(--card); border:2px solid var(--gold-deep); color:var(--brass); font-family:var(--font-heading); font-weight:700; font-size:1.25rem;
  box-shadow:0 0 0 0.375rem var(--bg);
}
.section.alt .step .num{box-shadow:0 0 0 0.375rem var(--bg-alt);}
.step h3{margin-bottom:0.375rem;}
.step p{color:var(--muted); font-size:0.9375rem; margin:0 auto; max-width:16rem;}
@media (max-width: 52rem){
  .loop{grid-template-columns:1fr; gap:1.75rem;}
  .loop::before,.loop::after{top:0; bottom:0; left:1.4375rem; right:auto; width:0.125rem; height:auto;
    background:repeating-linear-gradient(180deg,var(--border) 0 0.5rem,transparent 0.5rem 0.875rem);}
  .loop::after{background:var(--gold-deep); transform-origin:top; transform:scaleY(0); width:0.125rem;}
  .loop.in::after{transform:scaleY(1);}
  .step{text-align:left; display:grid; grid-template-columns:3rem 1fr; gap:0 1.125rem; align-items:start;}
  .step .num{margin:0; grid-row:1 / span 2;}
  .step p{margin:0; max-width:none;}
}

/* ---------- feature split ---------- */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:center;}
.split + .split{margin-top:clamp(3.5rem,8vw,6rem);}
.split.flip .split-text{order:2;}
@media (max-width: 56rem){ .split{grid-template-columns:1fr;} .split.flip .split-text{order:0;} }
.split-text .lead{font-size:1.0625rem; margin-bottom:1.25rem;}
.ticks{list-style:none; margin:0; padding:0; display:grid; gap:0.625rem;}
.ticks li{position:relative; padding-left:1.75rem; font-size:0.9688rem;}
.ticks li::before{
  content:""; position:absolute; left:0; top:0.4375rem; width:1rem; height:0.5625rem; border-left:0.15rem solid var(--sage); border-bottom:0.15rem solid var(--sage);
  transform:rotate(-45deg) scale(.9); transform-origin:center; top:0.3125rem;
}
.ticks.crosses li::before{
  border:0; width:1rem; height:1rem; top:0.3125rem; transform:none;
  background:
    linear-gradient(45deg, transparent calc(50% - 0.075rem), var(--brick) calc(50% - 0.075rem), var(--brick) calc(50% + 0.075rem), transparent calc(50% + 0.075rem)),
    linear-gradient(-45deg, transparent calc(50% - 0.075rem), var(--brick) calc(50% - 0.075rem), var(--brick) calc(50% + 0.075rem), transparent calc(50% + 0.075rem));
}
.stage{
  background:linear-gradient(160deg,var(--card),var(--bg-alt)); border:1px solid var(--border); border-radius:1rem; padding:clamp(1.25rem,3vw,2rem);
  box-shadow:var(--shadow); display:grid; place-items:center; min-height:20rem; position:relative; overflow:hidden;
}
.stage::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--gold) 28%, transparent), transparent 55%); pointer-events:none;}
.q-card{width:100%; max-width:24rem; background:var(--card); border:1px solid var(--border); border-radius:0.75rem; padding:1.25rem; box-shadow:var(--shadow-lg); position:relative;}
.q-card .tag{font-size:0.6875rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--brass); margin-bottom:0.5rem; display:block;}
.q-card .q{font-family:var(--font-heading); font-weight:600; color:var(--ink); font-size:1rem; line-height:1.4; margin-bottom:0.875rem;}
.q-card .ph-opt{font-size:0.875rem;}
.q-card .ph-exp{opacity:1; transform:none; font-size:0.8125rem; margin-top:0.875rem;}
.mini-note{font-size:0.75rem; color:var(--muted); text-align:center; margin-top:0.75rem;}

/* flashcard */
.flash{perspective:60rem; width:100%; max-width:22rem; aspect-ratio:7/5; background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; text-align:left;}
.flash-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .7s var(--ease);}
.flash.flipped .flash-inner{transform:rotateY(180deg);}
.flash .face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:0.875rem; padding:1.5rem;
  display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--border); box-shadow:var(--shadow-lg); background:var(--card);
}
.flash .back{transform:rotateY(180deg); background:var(--inv-bg); color:var(--inv-text); border-color:var(--inv-line);}
.flash .face small{font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:600; color:var(--brass);}
.flash .back small{color:var(--gold);}
.flash .term{font-family:var(--font-heading); font-size:2.25rem; font-weight:700; color:var(--ink);}
.flash .def{font-size:0.96875rem; line-height:1.5; color:var(--inv-text);}
.flash .hint{font-size:0.75rem; color:var(--muted);}
.flash .back .hint{color:var(--inv-muted);}
.boxes{display:flex; gap:0.375rem; align-items:flex-end; margin-top:1.25rem; justify-content:center;}
.boxes i{display:block; width:2.5rem; border-radius:0.25rem 0.25rem 0 0; background:var(--border); position:relative; transition:background .4s, height .6s var(--ease);}
.boxes i.on{background:var(--gold-deep);}
.boxes-cap{display:flex; gap:0.375rem; justify-content:center; font-size:0.6875rem; color:var(--muted); margin-top:0.25rem;}
.boxes-cap span{width:2.5rem; text-align:center;}

/* timer ring */
.bigring{position:relative; width:min(15rem,70vw); aspect-ratio:1; margin-inline:auto;}
.bigring svg{width:100%; height:100%; transform:rotate(-90deg);}
.bigring circle{fill:none; stroke-width:9;}
.bigring .track{stroke:var(--border);}
.bigring .arc{stroke:var(--gold-deep); stroke-linecap:round;}
.bigring .center{position:absolute; inset:0; display:grid; place-content:center; text-align:center;}
.bigring .time{font-family:var(--font-heading); font-weight:700; font-size:2.625rem; color:var(--ink); font-variant-numeric:tabular-nums; line-height:1;}
.bigring .cap{font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-top:0.375rem;}
.mock-meta{display:flex; gap:1.25rem; justify-content:center; margin-top:1.5rem; flex-wrap:wrap;}
.mock-meta div{text-align:center;}
.mock-meta strong{display:block; font-family:var(--font-heading); font-size:1.375rem; color:var(--ink); line-height:1.1;}
.mock-meta span{font-size:0.75rem; color:var(--muted);}

/* comfort chips */
.chips{display:flex; flex-wrap:wrap; gap:0.5rem;}
.chip{padding:0.4375rem 0.875rem; border:1px solid var(--border); border-radius:2rem; background:var(--card); font-size:0.875rem; color:var(--text);}
.chip.lexend{font-family:'Lexend','Inter',sans-serif;}
.chip.atk{font-family:'Atkinson Hyperlegible','Inter',sans-serif;}
.chip.mer{font-family:'Merriweather',Georgia,serif;}
.chip.src{font-family:var(--font-heading);}

/* ---------- inverse band ---------- */
.inv{background:var(--inv-bg); color:var(--inv-text); position:relative; overflow:hidden;}
.inv h2,.inv h3{color:var(--inv-text);}
.inv .lead,.inv p{color:var(--inv-muted);}
.inv .eyebrow{color:var(--gold);} .inv .eyebrow::before{background:var(--gold);}
.inv a{color:var(--gold);}
.numbers{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; position:relative; z-index:1;}
.numbers .n{font-family:var(--font-heading); font-weight:700; font-size:clamp(2.25rem,6vw,3.75rem); line-height:1; color:var(--gold); font-variant-numeric:tabular-nums;}
.numbers .l{margin-top:0.5rem; color:var(--inv-muted); font-size:0.9375rem;}
@media (max-width: 44rem){ .numbers{grid-template-columns:repeat(2,1fr); row-gap:2rem;} }
.inv-curve{position:absolute; inset:auto 0 0 0; height:60%; opacity:.5; pointer-events:none;}
.inv-curve path{fill:none; stroke:var(--gold-deep); stroke-width:2; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1;}
.inv.in .inv-curve path{animation:draw 2.4s var(--ease) forwards;}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- pricing ---------- */
.plans{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:stretch;}
@media (max-width: 52rem){ .plans{grid-template-columns:1fr;} }
.plan{display:flex; flex-direction:column;}
.plan.featured{border:2px solid var(--gold-deep); box-shadow:var(--shadow-lg);}
.plan .badge{position:absolute; top:-0.75rem; right:1.25rem; background:var(--gold-deep); color:#1C2B3A; font-size:0.6875rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:0.3125rem 0.75rem; border-radius:2rem;}
.plan .price{font-family:var(--font-heading); font-size:3rem; font-weight:700; color:var(--ink); line-height:1; margin:0.5rem 0 0.25rem;}
.plan .price small{font-family:var(--font-body); font-size:0.9375rem; font-weight:500; color:var(--muted);}
.plan .sub{color:var(--muted); font-size:0.9375rem; margin-bottom:1.25rem;}
.plan .ticks{margin-bottom:1.5rem;}
.plan .btn{margin-top:auto; align-self:flex-start;}
.compare{width:100%; border-collapse:collapse; font-size:0.9375rem; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.compare th,.compare td{padding:0.875rem 1rem; text-align:left; border-bottom:1px solid var(--border); vertical-align:top;}
.compare thead th{background:var(--bg-alt); font-family:var(--font-heading); color:var(--ink); font-size:1rem;}
.compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:0;}
.compare tbody th{font-weight:600; color:var(--ink); width:34%;}
.compare .no{color:var(--muted);}
.compare .yes{color:var(--sage); font-weight:600;}
.table-scroll{overflow-x:auto; border-radius:var(--radius);}
.table-scroll .compare{min-width:34rem;}

/* ---------- faq ---------- */
.faq{display:grid; gap:0.75rem; max-width:48rem;}
.faq details{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); transition:border-color .25s, box-shadow .25s;}
.faq details[open]{border-color:var(--gold-deep); box-shadow:var(--shadow);}
.faq summary{
  list-style:none; cursor:pointer; padding:1.125rem 3rem 1.125rem 1.25rem; font-family:var(--font-heading); font-weight:600; font-size:1.0625rem; color:var(--ink); position:relative;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:""; position:absolute; right:1.25rem; top:50%; width:0.625rem; height:0.625rem; margin-top:-0.4375rem;
  border-right:0.125rem solid var(--brass); border-bottom:0.125rem solid var(--brass); transform:rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-0.1875rem;}
.faq .ans{padding:0 1.25rem 1.25rem; color:var(--muted); font-size:0.96875rem;}
.faq .ans p:last-child{margin-bottom:0;}

/* ---------- about ---------- */
.about-hero{position:relative; overflow:hidden; padding-block:clamp(3rem,8vw,6rem) clamp(2.5rem,6vw,4.5rem);}
.about-grid{display:grid; grid-template-columns:1.3fr 0.7fr; gap:clamp(2rem,6vw,4.5rem); align-items:center; position:relative; z-index:1;}
@media (max-width: 52rem){ .about-grid{grid-template-columns:1fr;} .emblem{order:-1; max-width:11rem;} }
.emblem{width:100%; max-width:17rem; justify-self:center;}
.emblem svg{width:100%; height:auto; filter:drop-shadow(0 1.5rem 1.5rem rgba(28,43,58,0.25));}
.emblem .draw{stroke-dasharray:140; stroke-dashoffset:140; animation:draw140 2.2s var(--ease) .4s forwards;}
@keyframes draw140{to{stroke-dashoffset:0}}
.emblem .dot{opacity:0; animation:pop .5s var(--ease) 2.2s forwards;}
@keyframes pop{from{opacity:0; transform:scale(.3)} to{opacity:1; transform:scale(1)}}
.story{max-width:40rem; margin-inline:auto;}
.story p{font-size:1.125rem; line-height:1.75;}
.story p:first-of-type::first-letter{font-family:var(--font-heading); font-weight:700; font-size:3.75rem; line-height:0.85; float:left; padding:0.25rem 0.625rem 0 0; color:var(--brass);}
.story .ticks{margin:0.25rem 0 2.25rem; font-size:1.0625rem; gap:0.625rem;}
.story .ticks li{font-size:inherit;}
.story .beat{font-family:var(--font-heading); font-weight:700; font-size:clamp(1.5rem,3.4vw,2rem); color:var(--ink); margin:2rem 0 1rem; line-height:1.2;}
.story .sign{font-family:var(--font-heading); font-style:italic; color:var(--ink); margin-top:1.5rem;}
.pull{
  margin:2.25rem 0; padding:0.25rem 0 0.25rem 1.5rem; border-left:0.25rem solid var(--gold-deep);
  font-family:var(--font-heading); font-size:clamp(1.375rem,3vw,1.75rem); line-height:1.35; color:var(--ink); font-weight:600;
}
.path{position:relative; display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; margin-top:1rem;}
.path::before{content:""; position:absolute; top:0.6875rem; left:10%; right:10%; height:0.125rem; background:repeating-linear-gradient(90deg,var(--border) 0 0.5rem,transparent 0.5rem 0.875rem);}
.path::after{content:""; position:absolute; top:0.6875rem; left:10%; width:80%; height:0.125rem; background:var(--gold-deep); transform:scaleX(0); transform-origin:left; transition:transform 1.8s var(--ease) .2s;}
.path.in::after{transform:scaleX(1);}
.path .pt{position:relative; text-align:center; font-size:0.875rem; color:var(--muted); padding-inline:0.25rem;}
.path .pt::before{content:""; display:block; width:1.5rem; height:1.5rem; margin:0 auto 0.75rem; border-radius:50%; background:var(--bg); border:0.1875rem solid var(--gold-deep); position:relative; z-index:1;}
.path .pt.last::before{background:var(--brick); border-color:var(--brick);}
.path .pt b{display:block; color:var(--ink); font-family:var(--font-heading); font-size:1rem; margin-bottom:0.125rem;}
.section.alt .path .pt::before{background:var(--bg-alt);}
.section.alt .path .pt.last::before{background:var(--brick);}
@media (max-width: 52rem){
  .path{grid-template-columns:1fr; gap:1.25rem; padding-left:0.25rem;}
  .path::before,.path::after{top:0.75rem; bottom:0.75rem; left:0.8125rem; right:auto; width:0.125rem; height:auto;
    background:repeating-linear-gradient(180deg,var(--border) 0 0.5rem,transparent 0.5rem 0.875rem);}
  .path::after{background:var(--gold-deep); transform-origin:top; transform:scaleY(0);}
  .path.in::after{transform:scaleY(1);}
  .path .pt{text-align:left; display:grid; grid-template-columns:1.5rem 1fr; gap:0 1rem; align-items:start; padding:0;}
  .path .pt::before{margin:0.125rem 0 0; grid-row:1 / span 2;}
}
.value{display:flex; gap:1rem;}
.value .glyph{flex:none; width:2.5rem; height:2.5rem; color:var(--brass);}
.value h3{font-size:1.1875rem; margin-bottom:0.25rem;}
.value p{margin:0; color:var(--muted); font-size:0.96875rem;}

/* ---------- contact ---------- */
.contact{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,5vw,3rem); align-items:start;}
@media (max-width: 52rem){ .contact{grid-template-columns:1fr;} }
.mail{display:flex; flex-wrap:wrap; gap:0.625rem; align-items:center; margin:0.75rem 0 0.5rem;}
.mail code{font-family:'JetBrains Mono',ui-monospace,monospace; font-size:0.9375rem; background:var(--card); border:1px solid var(--border); padding:0.5rem 0.75rem; border-radius:0.375rem; word-break:break-all; color:var(--ink);}
.copy-note{font-size:0.8125rem; color:var(--sage); min-height:1.2em;}

/* ---------- cta + footer ---------- */
.cta{text-align:center;}
.cta h2{max-width:34rem; margin-inline:auto;}
.cta .btn-row{justify-content:center; margin-top:1.5rem;}
.cta .lead{margin-inline:auto;}
.site-footer{background:var(--bg-alt); border-top:1px solid var(--border); padding-block:3rem 2rem; font-size:0.9063rem; color:var(--muted);}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; margin-bottom:2rem;}
@media (max-width: 52rem){ .foot-grid{grid-template-columns:1fr 1fr;} .foot-brand{grid-column:1 / -1;} }
.foot-brand p{max-width:22rem; margin-top:0.75rem;}
.foot-col h4{font-family:var(--font-body); font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink); margin-bottom:0.75rem; font-weight:600;}
.foot-col ul{list-style:none; margin:0; padding:0; display:grid; gap:0.5rem;}
.foot-col a{color:var(--muted); text-decoration:none;} .foot-col a:hover{color:var(--brass); text-decoration:underline;}
.legal{border-top:1px solid var(--border); padding-top:1.25rem; font-size:0.8125rem; line-height:1.6;}
.legal p{margin:0 0 0.5rem;}


/* ---------- the qualification page: route ---------- */
.q-mini{list-style:none; margin:2rem 0 0; padding:0; display:flex; max-width:46rem; position:relative;}
.q-mini li{flex:1 1 0; position:relative; text-align:center; min-width:0;}
.q-mini li::before{content:""; position:absolute; top:1.0625rem; left:-50%; right:50%; height:2px; background:var(--border);}
.q-mini li::after{content:""; position:absolute; top:1.0625rem; left:-50%; right:50%; height:2px; background:var(--gold-deep); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease); transition-delay:calc(var(--i) * .12s + .3s);}
.q-mini.in li::after{transform:scaleX(1);}
.q-mini li:first-child::before,.q-mini li:first-child::after{display:none;}
.q-mini a{display:block; text-decoration:none; color:var(--muted); font-size:0.75rem; line-height:1.3; padding-inline:0.125rem;}
.q-mini .d{position:relative; z-index:1; display:grid; place-items:center; width:2.125rem; height:2.125rem; margin:0 auto 0.5rem; border-radius:50%; background:var(--card); border:2px solid var(--gold-deep); color:var(--ink); font-family:var(--font-heading); font-weight:700; font-size:0.9375rem; transition:background .3s, color .3s, transform .3s var(--ease);}
.q-mini a:hover .d{background:var(--brass); color:var(--on-accent); transform:translateY(-0.125rem);}
.q-mini a:hover{color:var(--ink);}
@media (max-width: 40rem){ .q-mini a span.t{display:none;} .q-mini .d{margin-bottom:0;} .q-mini{max-width:100%;} }

.q-facts{display:grid; grid-template-columns:repeat(6, 1fr); gap:1rem;}
.q-fact{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:1.125rem 1rem; box-shadow:var(--shadow);}
.q-fact .k{font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); font-weight:600;}
.q-fact .v{font-family:var(--font-heading); font-weight:650; font-size:clamp(1.5rem,2.4vw,1.875rem); line-height:1.1; color:var(--ink); margin:0.375rem 0 0.25rem;}
.q-fact .s{font-size:0.8125rem; color:var(--muted); line-height:1.4;}
@media (max-width: 70rem){ .q-facts{grid-template-columns:repeat(3, 1fr);} }
@media (max-width: 36rem){ .q-facts{grid-template-columns:repeat(2, 1fr); gap:0.75rem;} }

.q-answers{display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem;}
.q-ans{display:flex; flex-direction:column; gap:0.5rem;}
.q-ans h3{font-size:1.125rem; margin:0; color:var(--ink);}
.q-ans p{margin:0; color:var(--muted); font-size:0.9375rem; line-height:1.6;}
.q-ans a{margin-top:auto; padding-top:0.5rem; font-size:0.875rem; font-weight:600; color:var(--brass); text-decoration:none;}
.q-ans a:hover{text-decoration:underline;}
@media (max-width: 62rem){ .q-answers{grid-template-columns:repeat(2, 1fr);} }
@media (max-width: 40rem){ .q-answers{grid-template-columns:1fr;} }

.q-route{padding-top:clamp(2rem,5vw,3rem);}
.q-bar{position:sticky; top:4.25rem; z-index:30; background:var(--header-bg); -webkit-backdrop-filter:saturate(1.4) blur(0.75rem); backdrop-filter:saturate(1.4) blur(0.75rem); border-block:1px solid var(--border); margin-bottom:clamp(2rem,5vw,3.5rem);}
.q-bar-in{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:3rem; padding-block:0.5rem;}
.q-bar .now{font-size:0.875rem; color:var(--ink); min-width:0;}
.q-bar .now b{font-family:var(--font-heading); font-weight:650;}
.q-bar .now small{display:block; font-size:0.6875rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--brass); font-weight:600;}
.q-chips{display:flex; gap:0.375rem; flex:none;}
.q-chips a{display:grid; place-items:center; width:1.875rem; height:1.875rem; border-radius:50%; border:1.5px solid var(--border); font-size:0.8125rem; font-weight:600; color:var(--muted); text-decoration:none; transition:all .25s;}
.q-chips a:hover{border-color:var(--gold-deep); color:var(--ink);}
.q-chips a.on{background:var(--brass); border-color:var(--brass); color:var(--on-accent);}
.q-chips a.done{border-color:var(--gold-deep); color:var(--brass);}
.q-bar .bar{position:absolute; left:0; bottom:-1px; height:2px; width:100%; transform-origin:left; transform:scaleX(var(--p,0)); background:var(--gold-deep); transition:transform .2s linear;}
@media (max-width: 40rem){ .q-chips{display:none;} }

.q-list{position:relative; display:grid; row-gap:clamp(1.5rem,3.5vw,2.5rem);}
.q-spine{position:absolute; top:1.25rem; bottom:1.25rem; left:50%; width:3px; margin-left:-1.5px; background:var(--border); border-radius:2px;}
.q-spine i{position:absolute; left:0; top:0; width:100%; height:100%; background:linear-gradient(var(--gold-deep), var(--brass)); border-radius:2px; transform-origin:top; transform:scaleY(var(--p,0)); transition:transform .2s linear;}
.q-step{position:relative; display:grid; grid-template-columns:minmax(0,1fr) 3.5rem minmax(0,1fr); align-items:start; scroll-margin-top:9rem;}
.q-step .q-node{grid-column:2; grid-row:1; justify-self:center; z-index:2;}
.q-step .q-card{grid-column:1; grid-row:1;}
.q-step:nth-of-type(even) .q-card{grid-column:3;}
.q-node{width:3rem; height:3rem; border-radius:50%; display:grid; place-items:center; background:var(--bg); border:3px solid var(--border); color:var(--muted); font-family:var(--font-heading); font-weight:700; font-size:1.25rem; transition:background .35s, border-color .35s, color .35s, transform .35s var(--ease); box-shadow:0 0 0 0.5rem var(--bg);}
.section.alt .q-node{background:var(--bg-alt); box-shadow:0 0 0 0.5rem var(--bg-alt);}
.q-step.is-reached .q-node{background:var(--brass); border-color:var(--brass); color:var(--on-accent);}
.q-step.is-current .q-node{transform:scale(1.12); box-shadow:0 0 0 0.5rem var(--bg), 0 0 0 0.75rem color-mix(in srgb, var(--gold) 55%, transparent);}
.q-side{grid-row:1; grid-column:3; align-self:start; padding:0.5rem 1.5rem 0; text-align:left;}
.q-step:nth-of-type(even) .q-side{grid-column:1; text-align:right;}
.q-side span{display:block; font-size:0.75rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass);}
.q-side b{display:block; font-family:var(--font-heading); font-weight:600; font-size:clamp(1.375rem,2.6vw,2rem); line-height:1.15; color:var(--muted); opacity:0.75; margin-top:0.25rem; text-wrap:balance; transition:color .35s, opacity .35s;}
.q-step.is-current .q-side b{color:var(--ink); opacity:1;}
@media (min-width: 62.01rem){ .q-label{display:none;} }
@media (max-width: 62rem){ .q-side{display:none;} }
.q-card{min-width:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(1.25rem,3vw,1.875rem); box-shadow:var(--shadow);}
.q-step.is-current .q-card{border-color:var(--gold-deep); box-shadow:var(--shadow-lg);}
.q-step:nth-of-type(odd) .q-card::after,.q-step:nth-of-type(even) .q-card::after{content:""; position:absolute; top:1rem; width:1rem; height:1rem; background:var(--card); border:1px solid var(--border); transform:rotate(45deg);}
.q-step .q-card{position:relative;}
.q-step:nth-of-type(odd) .q-card::after{right:-0.5625rem; border-left:0; border-bottom:0;}
.q-step:nth-of-type(even) .q-card::after{left:-0.5625rem; border-right:0; border-top:0;}
.q-label{font-size:0.75rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--brass); margin:0 0 0.5rem;}
.q-card h3{font-size:clamp(1.375rem,2.4vw,1.75rem); line-height:1.2; margin:0 0 0.625rem; text-wrap:balance;}
.q-time{display:inline-block; font-size:0.8125rem; font-weight:600; color:var(--sage); background:var(--sage-soft); border-radius:2rem; padding:0.25rem 0.75rem; margin-bottom:1rem;}
.q-intro{font-size:1.0625rem; line-height:1.6; color:var(--ink); margin:0 0 1rem;}
.q-points{list-style:none; margin:0 0 1.25rem; padding:0; display:grid; gap:0.75rem;}
.q-points li{position:relative; padding-left:1.5rem; font-size:0.96875rem; line-height:1.65; color:var(--text);}
.q-points li::before{content:""; position:absolute; left:0.125rem; top:0.55em; width:0.5rem; height:0.5rem; border-radius:50%; background:var(--gold); border:2px solid var(--gold-deep);}
.q-points strong{color:var(--ink);}
.q-dl{display:grid; grid-template-columns:minmax(0,0.85fr) minmax(0,1.4fr); margin:0 0 1.25rem; border-top:1px solid var(--border);}
.q-dl dt,.q-dl dd{margin:0; padding:0.625rem 0; border-bottom:1px solid var(--border); font-size:0.875rem; line-height:1.45;}
.q-dl dt{color:var(--muted); padding-right:1rem;} .q-dl dd{color:var(--ink); font-weight:600;}
.q-card .table-scroll{margin:0 0 1.25rem;}
.q-card .compare{font-size:0.8125rem; min-width:28rem;}
.q-card .compare th,.q-card .compare td{padding:0.625rem 0.75rem;}
.q-card .compare tbody th{width:auto; font-family:var(--font-heading);}
.q-card .compare thead th{padding:0.5rem 0.75rem; font-size:0.875rem; line-height:1.3;}
.q-callout{border-left:4px solid var(--gold-deep); background:var(--bg-alt); border-radius:0 var(--radius) var(--radius) 0; padding:0.875rem 1rem; margin:0 0 1.25rem;}
.q-callout.watch{border-left-color:var(--brick);}
.q-callout b{display:block; color:var(--ink); font-size:0.9375rem; margin-bottom:0.25rem;}
.q-callout span{font-size:0.9375rem; line-height:1.6; color:var(--text);}
.q-extras{display:grid; grid-template-columns:1fr 1fr; gap:0.75rem; margin:0 0 1.25rem;}
.q-extra{border:1px solid var(--border); background:var(--bg-alt); border-radius:var(--radius); padding:0.875rem 1rem;}
.q-extra b{display:block; font-family:var(--font-heading); color:var(--ink); font-size:1.0625rem;}
.q-extra p{margin:0.25rem 0 0.5rem; font-size:0.875rem; line-height:1.55; color:var(--muted);}
.q-extra em{font-style:normal; font-size:0.8125rem; font-weight:600; color:var(--brass);}
.q-links{display:flex; flex-wrap:wrap; gap:0.5rem 1.25rem;}
.q-links a{font-size:0.875rem; font-weight:600; color:var(--brass); text-underline-offset:3px;}
.q-links a:hover{color:var(--ink);}
.q-end{display:grid; place-items:center; margin-top:clamp(1.5rem,3.5vw,2.5rem);}
.q-end .flag{display:inline-flex; align-items:center; gap:0.5rem; padding:0.625rem 1.25rem; border-radius:2rem; background:var(--ink); color:var(--bg); font-weight:600; font-size:0.9375rem; position:relative; z-index:2; box-shadow:0 0 0 0.5rem var(--bg);}
.section.alt .q-end .flag{box-shadow:0 0 0 0.5rem var(--bg-alt);}
.q-next{display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;}
.q-src{columns:2; column-gap:2rem; padding:0; margin:0; list-style:none;}
.q-src li{break-inside:avoid; margin-bottom:0.625rem; font-size:0.9375rem;}
.q-src a{color:var(--brass); font-weight:600; text-underline-offset:3px;}
@media (max-width: 62rem){
  .q-spine{left:1.5rem;}
  .q-step{grid-template-columns:3rem minmax(0,1fr); column-gap:1rem;}
  .q-step .q-node{grid-column:1; justify-self:start; width:2.75rem; height:2.75rem; font-size:1.125rem;}
  .q-step .q-card,.q-step:nth-of-type(even) .q-card{grid-column:2;}
  .q-step .q-card::after{display:none;}
  .js .q-card.reveal.from-left,.js .q-card.reveal.from-right{transform:translateY(1.125rem);}
  .js .q-card.reveal.from-left.in,.js .q-card.reveal.from-right.in{transform:none;}
  .q-spine{left:1.375rem;}
  .q-end{justify-items:start; padding-left:0;}
  .q-extras,.q-next{grid-template-columns:1fr;}
  .q-src{columns:1;}
}
@media (max-width: 36rem){
  .q-step{grid-template-columns:2.25rem minmax(0,1fr); column-gap:0.75rem;}
  .q-step .q-node{width:2.25rem; height:2.25rem; font-size:1rem; border-width:2px; box-shadow:0 0 0 0.3rem var(--bg);}
  .section.alt .q-node{box-shadow:0 0 0 0.3rem var(--bg-alt);}
  .q-spine{left:1.0625rem;}
  .q-dl{grid-template-columns:1fr 1fr;}
}
@media (prefers-reduced-motion: reduce){
  .q-mini li::after{transform:scaleX(1);}
  .q-spine i,.q-bar .bar{transition:none;}
}
@media print{ .q-bar{display:none;} .q-spine{display:none;} .q-step{grid-template-columns:1fr; break-inside:avoid;} .q-step .q-card,.q-step:nth-of-type(even) .q-card{grid-column:1;} .q-node{display:none;} }

/* ---------- reveal ---------- */
.js .reveal{opacity:0; transform:translateY(1.125rem); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:var(--d,0s);}
.js .reveal.in{opacity:1; transform:none;}
.js .reveal.from-left{transform:translateX(-1.5rem);} .js .reveal.from-right{transform:translateX(1.5rem);}
.js .reveal.from-left.in,.js .reveal.from-right.in{transform:none;}
@media (max-width: 62rem){ .js .reveal.from-left,.js .reveal.from-right{transform:translateY(1.125rem);} .js .reveal.from-left.in,.js .reveal.from-right.in{transform:none;} }
.hero-bg .curve-line{stroke-dasharray:1; stroke-dashoffset:1; animation:draw 3.2s var(--ease) .3s forwards;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; animation-delay:0s !important; transition-duration:.001ms !important; transition-delay:0s !important;}
  .js .reveal{opacity:1; transform:none;}
  .loop::after,.path::after{transform:none;}
  .emblem .draw{stroke-dashoffset:0;} .emblem .dot{opacity:1;}
  .hero-bg .curve-line,.inv-curve path{stroke-dashoffset:0;}
}
@media print{ .site-header,.hero-bg,.float-chip{display:none;} .js .reveal{opacity:1; transform:none;} }

/* Early Bird pricing: shown until the end date, then the standard price (switched in site.js) */
.eb-off{display:none}
html.eb-over .eb-on{display:none}
html.eb-over .eb-off{display:revert}