:root{
    --onyx:#14110D;
    --espresso:#241C13;
    --ivory:#F3ECDD;
    --gold:#B8924F;
    --gold-bright:#D8B36C;
    --graphite:#948B7C;
    --cream:#F3ECDD;
    --cream-b:#EAE0C9;
  }
  @media (prefers-color-scheme: dark){
    :root{ --bg-a:var(--onyx); --bg-b:var(--espresso); --ink:var(--ivory); --hair: rgba(243,236,221,0.14); --hair-soft: rgba(243,236,221,0.06); --gold-fg:var(--gold-bright); }
  }
  @media (prefers-color-scheme: light){
    :root{ --bg-a:var(--cream); --bg-b:var(--cream-b); --ink:#1B1710; --hair: rgba(27,23,16,0.14); --hair-soft: rgba(27,23,16,0.06); --gold-fg:#8F6C33; }
  }
  :root[data-theme="dark"]{ --bg-a:var(--onyx); --bg-b:var(--espresso); --ink:var(--ivory); --hair: rgba(243,236,221,0.14); --hair-soft: rgba(243,236,221,0.06); --gold-fg:var(--gold-bright); }
  :root[data-theme="light"]{ --bg-a:var(--cream); --bg-b:var(--cream-b); --ink:#1B1710; --hair: rgba(27,23,16,0.14); --hair-soft: rgba(27,23,16,0.06); --gold-fg:#8F6C33; }

  *{ box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
  html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  html,body{ margin:0; padding:0; }
  body{
    background: radial-gradient(ellipse 100% 60% at 50% 0%, var(--bg-b), var(--bg-a) 68%);
    color: var(--ink);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    line-height:1.6;
    min-height:100vh;
    min-height:100dvh;
    overflow-x:hidden;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .display{
    font-family: Didot, "Bodoni MT", "Big Caslon", Georgia, "Times New Roman", serif;
  }
  .label{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing:.16em; text-transform:uppercase;
  }
  .num{ font-variant-numeric: tabular-nums; }

  .page{ position:relative; max-width:920px; margin:0 auto; padding: 30px 24px 0; }
  @media (min-width:1440px){
    .page{ max-width:1040px; padding-top:40px; }
  }
  @media (max-width:380px){
    .page{ padding-left:18px; padding-right:18px; }
  }

  .bg-tex{
    position:fixed; inset:0; z-index:-2; pointer-events:none;
    background-image: radial-gradient(var(--hair-soft) 1px, transparent 1px);
    background-size: 26px 26px;
  }
  .bg-glow{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background: radial-gradient(ellipse 55% 40% at 50% 8%, rgba(184,146,79,0.16), transparent 60%);
  }

  /* ---------- header ---------- */
  .site-head{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding-bottom:40px; border-bottom:1px solid var(--hair);
    flex-wrap:wrap;
  }
  .brand{ display:flex; align-items:center; gap:13px; }
  .brand-mark{ width:46px; height:46px; flex:0 0 auto; }
  .brand-mark .mark-in{
    opacity:0; transform:scale(.82); transform-origin:50% 50%;
    animation: mark-in .65s cubic-bezier(.2,.8,.2,1) forwards .15s;
  }
  @media (prefers-reduced-motion: reduce){
    .brand-mark .mark-in{ animation:none; opacity:1; transform:none; }
  }
  @keyframes mark-in{ to{ opacity:1; transform:scale(1); } }
  @keyframes fade-up{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:translateY(0); } }
  .brand-word{ display:flex; flex-direction:column; line-height:1.1; }
  .brand-name{
    font-family: Didot, "Bodoni MT", "Big Caslon", Georgia, serif;
    font-size:1.55rem; font-weight:600; letter-spacing:.1em;
    color:var(--ink);
  }
  .brand-sub{
    font-size:.6rem; letter-spacing:.32em; color:var(--graphite); margin-top:4px;
  }
  .head-tag{ font-size:.64rem; color:var(--graphite); }
  .main-nav{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
  .main-nav a{
    font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); opacity:.72;
    text-decoration:none; padding-bottom:4px; border-bottom:1px solid transparent;
    transition: opacity .15s ease, border-color .15s ease;
  }
  .main-nav a:hover{ opacity:1; border-color: var(--gold-fg); }

  main{ padding-top:0; }

  /* ---------- hero ---------- */
  .hero{ padding: 40px 0 48px; }
  .eyebrow{
    font-size:.66rem; color:var(--gold-fg); margin:0 0 18px; font-weight:600;
  }
  .headline{
    font-family: Didot, "Bodoni MT", "Big Caslon", Georgia, "Times New Roman", serif;
    font-size: clamp(2.3rem, 6.4vw, 4.1rem);
    line-height:1.12; font-weight:500;
    margin: 0 0 24px; text-wrap:balance; color:var(--ink);
  }
  .headline .w{
    display:inline-block; opacity:0; transform:translateY(10px);
    animation: fade-up .7s cubic-bezier(.2,.7,.2,1) forwards;
  }
  .headline .w:nth-child(1){ animation-delay:.1s; }
  .headline .w:nth-child(2){ animation-delay:.32s; }
  .headline .w:nth-child(3){ animation-delay:.54s; }
  .headline .w.gold{ color:var(--gold-fg); }
  @media (prefers-reduced-motion: reduce){
    .headline .w{ animation:none; opacity:1; transform:none; }
  }
  .lede{
    max-width: 50ch; font-size:1.06rem; color: var(--ink); opacity:.82;
    margin:0 0 22px; font-weight:300;
  }
  .magic-line{
    font-family: Didot, "Bodoni MT", "Big Caslon", Georgia, serif;
    font-style:italic; font-size:1.2rem; color:var(--gold-fg);
    margin: 0 0 40px;
  }

  .progress-block{ max-width:420px; margin:0 auto; }
  .progress-label{
    display:flex; justify-content:center; gap:10px; font-size:.64rem; color:var(--graphite);
    margin-bottom:9px;
  }
  .progress-value{ color:var(--gold-fg); }
  .progress-track{ height:1px; background:var(--hair); position:relative; }
  .progress-fill{
    height:1px; background: var(--gold-fg); margin:0 auto;
  }

  .subscribe{ max-width:440px; margin:0 auto; text-align:center; }
  .subscribe label{ display:block; font-size:.64rem; color:var(--graphite); margin-bottom:10px; }
  .subscribe-row{
    display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--hair);
    transition: border-color .2s ease;
  }
  .subscribe-row:focus-within{ border-color: var(--gold-fg); }
  .subscribe-row input{
    flex:1; min-width:0; width:100%; background:transparent; border:0; padding:12px 4px;
    color:var(--ink); font-family:inherit; font-size:.95rem; outline:none; text-align:left;
  }
  .subscribe-row input::placeholder{ color: var(--graphite); opacity:.7; }
  .subscribe-row input:focus-visible{ outline:none; }
  .subscribe-go{
    flex:0 0 auto; display:flex; align-items:center; justify-content:center;
    width:34px; height:34px; margin:0; padding:0;
    background:transparent; border:0; border-radius:50%;
    color: var(--graphite); opacity:.45;
    cursor:pointer; transition: color .25s ease, opacity .25s ease, transform .25s ease, background .25s ease;
  }
  .subscribe-go svg{ width:16px; height:16px; transform:translateX(0); transition: transform .25s ease; }
  .subscribe-go:hover{ opacity:.7; }
  .subscribe-go.ready{ color: var(--gold-fg); opacity:1; background: rgba(184,146,79,0.12); }
  .subscribe-go.ready:hover{ background: rgba(184,146,79,0.2); transform:scale(1.05); }
  .subscribe-go.ready svg{ transform:translateX(1px); }
  .subscribe-go:focus-visible{ outline:2px solid var(--gold-fg); outline-offset:2px; }
  .subscribe-msg{
    min-height:1.2em; font-size:.8rem; color: var(--gold-fg); margin:11px 0 0;
  }
  .subscribe-msg.hint{ color:var(--graphite); }

  /* ---------- game section ---------- */
  .game-section{ padding: 0 0 48px; }
  .game-panel{
    border:1px solid var(--hair); padding: 30px 28px 32px;
    position:relative;
  }
  .game-head h2{
    font-family: Didot, "Bodoni MT", "Big Caslon", Georgia, serif;
    font-size:1.5rem; margin: 3px 0 0; font-weight:500;
  }
  .game-wait{
    max-width:54ch; font-size:.86rem; color:var(--gold-fg); margin: 13px 0 0; font-style:italic;
  }
  .game-instructions{
    max-width:54ch; font-size:.94rem; color:var(--ink); opacity:.78; margin: 10px 0 22px; font-weight:300;
  }

  .stat-row{
    display:flex; gap:26px; margin-bottom:20px; flex-wrap:wrap;
  }
  .stat{ display:flex; flex-direction:column; gap:5px; }
  .stat-label{ font-size:.6rem; color:var(--graphite); }
  .stat-value{
    font-size:1.2rem; color:var(--gold-fg);
    font-family: Didot, "Bodoni MT", "Big Caslon", Georgia, serif;
  }
  .next-status{
    font-size:.76rem; color:var(--graphite); margin:-10px 0 22px;
  }
  .next-status .to{ color:var(--gold-fg); }

  .canvas-wrap{
    position:relative; width:100%; max-width:340px; margin:0 auto;
    aspect-ratio: 320 / 440; border:1px solid var(--hair);
    touch-action:none; cursor:pointer; overflow:hidden;
  }
  #towerCanvas{ width:100%; height:100%; display:block; }

  .milestone-banner{
    position:absolute; left:50%; top:38%; transform:translate(-50%,-50%) scale(.92);
    max-width: calc(100% - 20px); box-sizing:border-box;
    text-align:center; pointer-events:none; opacity:0; transition: opacity .35s ease, transform .35s ease;
    background: rgba(20,17,13,0.9);
    border:1px solid rgba(216,179,108,0.4);
    padding: 14px 20px;
    box-shadow: 0 14px 32px rgba(0,0,0,0.4);
    white-space:nowrap;
  }
  .milestone-banner.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  .milestone-banner .m-word{
    font-family: Didot, "Bodoni MT", "Big Caslon", Georgia, serif;
    font-size:1.9rem; color:var(--gold-bright); letter-spacing:.04em;
  }
  .milestone-banner .m-sub{
    font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ivory); margin-top:4px;
  }
  @media (max-width:400px){
    .milestone-banner{ padding:10px 14px; }
    .milestone-banner .m-word{ font-size:1.15rem; }
    .milestone-banner .m-sub{ font-size:.5rem; letter-spacing:.14em; }
  }

  .game-overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:15px; text-align:center; padding:20px;
    background: rgba(20,17,13,0.82); backdrop-filter: blur(2px);
  }
  .game-overlay.hidden{ display:none; }
  .overlay-title{
    font-family: Didot, "Bodoni MT", "Big Caslon", Georgia, serif;
    letter-spacing:.04em; font-size:1.15rem; color:var(--gold-bright); margin:0;
  }
  .overlay-text{ font-size:.85rem; color:var(--ivory); opacity:.85; margin:0; max-width:28ch; }
  .overlay-btn{
    font-size:.7rem; letter-spacing:.16em; font-weight:600; text-transform:uppercase;
    background:transparent; color:var(--gold-bright); border:1px solid var(--gold-bright); padding:12px 26px;
    cursor:pointer; transition: background .15s ease, color .15s ease;
  }
  .overlay-btn:hover{ background:var(--gold-bright); color:var(--onyx); }
  .overlay-btn:focus-visible{ outline:2px solid var(--ivory); outline-offset:2px; }
  .overlay-btn:disabled{ opacity:.55; cursor:default; }
  .overlay-btn:disabled:hover{ background:transparent; color:var(--gold-bright); }
  .overlay-btn.solid:disabled:hover{ background:var(--gold-bright); color:var(--onyx); }
  .overlay-actions{ display:flex; flex-direction:column; gap:12px; align-items:stretch; }
  .overlay-btn.solid{
    background:var(--gold-bright); color:var(--onyx); border:1px solid var(--gold-bright);
  }
  .overlay-btn.solid:hover{ background:var(--gold); border-color:var(--gold); }

  /* ---------- interest ---------- */
  .interest{ padding: 0 0 48px; }

  /* ---------- footer ---------- */
  .site-foot{
    border-top:1px solid var(--hair); padding: 48px 0;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  }
  .foot-mark{ width:30px; height:30px; opacity:.9; }
  .foot-tagline{
    font-family: Didot, "Bodoni MT", "Big Caslon", Georgia, serif;
    font-style:italic; color:var(--gold-fg); font-size:1rem; margin:4px 0 2px;
  }
  .foot-meta{ font-size:.68rem; color:var(--graphite); }
  .foot-meta a{ color:var(--gold-fg); text-decoration:none; }
  .foot-meta a:hover{ text-decoration:underline; }

  .foot-status{
    display:inline-flex; align-items:center; gap:8px;
    font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-fg);
    margin: 2px 0 6px;
  }
  .foot-status .dot{
    width:6px; height:6px; border-radius:50%; background:var(--gold-fg);
    animation: dot-pulse 1.8s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .foot-status .dot{ animation:none; }
  }
  @keyframes dot-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }

  .foot-links{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center;
    font-size:.66rem; color:var(--graphite); margin: 14px 0 0;
  }
  .foot-links a{ color:var(--graphite); text-decoration:none; }
  .foot-links a:hover{ color:var(--gold-fg); text-decoration:underline; }
  .foot-links span{ opacity:.5; }

  .foot-compliance{
    max-width:64ch; margin: 16px auto 0; font-size:.66rem; line-height:1.7;
    color:var(--graphite); opacity:.85;
  }

  /* ---------- cookie notice ---------- */
  .cookie-bar{
    position:fixed; left:16px; right:16px; bottom:16px; z-index:40;
    max-width:640px; margin:0 auto;
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    background: var(--bg-a); border:1px solid var(--hair);
    padding: 16px 18px; padding-bottom: calc(16px + env(safe-area-inset-bottom));
    box-shadow: 0 12px 34px rgba(0,0,0,0.28);
    transform: translateY(140%); opacity:0; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .5s ease;
    pointer-events:none;
  }
  .cookie-bar.show{ transform:translateY(0); opacity:1; pointer-events:auto; }
  @media (prefers-reduced-motion: reduce){
    .cookie-bar{ transition:none; }
  }
  .cookie-bar p{ flex:1 1 240px; margin:0; font-size:.74rem; color:var(--ink); opacity:.82; }
  .cookie-btn{
    font-size:.68rem; letter-spacing:.1em; font-weight:600; text-transform:uppercase;
    background:transparent; color:var(--gold-fg); border:1px solid var(--gold-fg); padding:10px 20px;
    cursor:pointer; transition: background .15s ease, color .15s ease; white-space:nowrap;
  }
  .cookie-btn:hover{ background:var(--gold-fg); color:var(--bg-a); }
  .cookie-btn:focus-visible{ outline:2px solid var(--gold-fg); outline-offset:2px; }
  body.has-cookie-bar .site-foot{ padding-bottom: 116px; }

  @media (max-width:640px){
    .game-panel{ padding: 24px 18px 26px; }
    .stat-row{ gap:18px 26px; }
  }
  @media (max-width:380px){
    .head-tag{ font-size:.58rem; }
    .brand-name{ font-size:1.32rem; }
    .stat-row{ gap:14px 22px; }
    .foot-compliance{ font-size:.62rem; }
  }
  @media (min-width:641px) and (max-width:1024px){
    .game-panel{ padding: 34px 40px 38px; }
    .canvas-wrap{ max-width:360px; }
  }

/* ---------- brand-mark SVG gradient stops (kept out of inline style="" for CSP) ---------- */
.stop-bright{ stop-color:var(--gold-bright); }
.stop-mid{ stop-color:var(--gold); }
.stop-dark{ stop-color:#8F6C33; }

/* ---------- static decorative progress width (kept out of inline style="" for CSP) ---------- */
.progress-fill-83{ width:83%; }