/* =========================================================
   Afterhours — Neon Nocturne
   Palette and system per BRIEF.md
   ========================================================= */

:root{
  --base:#0A0A0F;
  --surface:#15131F;
  --surface-2:#1C1930;
  --primary:#7C3AED;
  --glow:#A855F7;
  --shock:#C4F82A;
  --cool:#22D3EE;
  --text:#F4F2FF;
  --muted:#9A93B8;
  --line:rgba(124,58,237,.26);
  --line-soft:rgba(124,58,237,.14);

  --display:'Archivo',system-ui,sans-serif;
  --body:'Space Grotesk',system-ui,sans-serif;

  --shell:1180px;
  --gutter:16px;
  --r:16px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--base);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* grain — the whole canvas sits under it */
body::after{
  content:'';position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.15;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--shock);color:var(--base);padding:12px 18px;border-radius:0 0 10px 0;
  font-weight:600;text-decoration:none;
}
.skip:focus{left:0}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}

a{color:inherit}
img,svg{max-width:100%}

:focus-visible{outline:2px solid var(--shock);outline-offset:3px;border-radius:4px}

/* ---------------------------------------------------------
   Logo
   --------------------------------------------------------- */
.logo{display:inline-flex;align-items:center;text-decoration:none}
/* Generated lockup — see design/build-logo-assets.py. The descriptor's width
   match is baked into the file, so never re-typeset it in markup. */
.logo-lockup{
  display:block;height:38px;width:auto;flex:none;
  filter:drop-shadow(0 0 6px rgba(168,85,247,.45));
}
@media (max-width:899px){.logo-lockup{height:33px}}
@media (max-width:420px){.logo-lockup{height:27px}}

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
  font-family:var(--display);font-weight:800;font-size:15px;letter-spacing:-.01em;
  background:var(--shock);color:var(--base);
  padding:13px 22px;border-radius:10px;border:0;
  text-decoration:none;cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  box-shadow:0 0 0 rgba(196,248,42,0);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(196,248,42,.32)}
.btn:active{transform:translateY(0)}
.btn-lg{font-size:17px;padding:17px 30px;border-radius:12px}
.btn-sm{font-size:13px;padding:10px 16px}
.btn-ghost{
  background:transparent;color:var(--text);
  box-shadow:inset 0 0 0 1.5px var(--line);
}
.btn-ghost:hover{
  background:rgba(124,58,237,.12);
  box-shadow:inset 0 0 0 1.5px var(--primary),0 8px 30px rgba(124,58,237,.22);
}

/* ---------------------------------------------------------
   Nav
   --------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:60;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(10,10,15,.72);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,background .25s ease;
}
.nav.stuck{border-bottom-color:var(--line-soft);background:rgba(10,10,15,.9)}
.nav-in{
  max-width:var(--shell);margin:0 auto;padding:14px var(--gutter);
  display:flex;align-items:center;gap:24px;
}
.nav-links a{
  text-decoration:none;color:var(--muted);
  transition:color .18s ease;
}
.nav-links a:hover{color:var(--text)}
.nav-cta{margin-left:auto}

/* burger */
.burger{
  width:42px;height:38px;flex:none;margin-left:4px;
  display:inline-flex;flex-direction:column;justify-content:center;gap:5px;
  background:transparent;border:1px solid var(--line);border-radius:9px;
  padding:0 10px;cursor:pointer;
}
.burger span{
  display:block;height:2px;border-radius:2px;background:var(--text);
  transition:transform .26s ease,opacity .2s ease;transform-origin:center;
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:899px){
  .nav-links{
    position:absolute;left:0;right:0;top:100%;
    display:grid;gap:2px;
    background:var(--base);
    border-bottom:1px solid var(--line);
    /* collapsed: no height, no padding, not focusable */
    padding:0 var(--gutter);
    max-height:0;overflow:hidden;visibility:hidden;
    transition:max-height .3s ease,padding .3s ease,visibility 0s linear .3s;
  }
  .nav-links.open{
    max-height:320px;visibility:visible;
    padding:8px var(--gutter) 18px;
    transition:max-height .3s ease,padding .3s ease,visibility 0s;
  }
  .nav-links a{
    padding:14px 2px;border-bottom:1px solid var(--line-soft);
    font-family:var(--display);font-weight:700;font-size:18px;letter-spacing:-.02em;
    color:var(--text);
  }
  .nav-in{position:relative}
}
@media (min-width:900px){
  .nav-links{display:flex;gap:26px;margin-left:auto;font-size:15px}
  .nav-cta{margin-left:0}
  .burger{display:none}
}
@media (prefers-reduced-motion:reduce){
  .nav-links,.burger span{transition:none}
}

/* ---------------------------------------------------------
   Typography primitives
   --------------------------------------------------------- */
.eyebrow{
  font-size:12px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--shock);font-weight:600;margin:0 0 22px;
}
.kicker{
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin:0 0 16px;
}
h1{
  font-family:var(--display);font-weight:900;font-stretch:112%;
  font-size:clamp(50px,11vw,132px);line-height:.85;letter-spacing:-.04em;
  margin:0 0 28px;
}
h2{
  font-family:var(--display);font-weight:900;font-stretch:108%;
  font-size:clamp(34px,6.2vw,72px);line-height:.92;letter-spacing:-.035em;
  margin:0 0 20px;
}
h3{font-family:var(--display);font-weight:800;font-size:clamp(22px,3vw,30px);letter-spacing:-.025em;margin:0 0 10px}
h4{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.018em;margin:0 0 9px}
.lit{color:var(--shock);text-shadow:0 0 34px rgba(196,248,42,.45)}
.num{font-variant-numeric:tabular-nums}

.sec-head{max-width:760px;margin:0 0 56px}
.sec-sub{color:var(--muted);font-size:18px;max-width:60ch;margin:0}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{position:relative;padding:clamp(72px,13vh,140px) 0 clamp(60px,9vh,110px);overflow:hidden}
.hero-glow{
  position:absolute;left:50%;top:-30%;width:min(1100px,150vw);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:
    radial-gradient(circle at 38% 42%,rgba(124,58,237,.34),transparent 58%),
    radial-gradient(circle at 68% 30%,rgba(34,211,238,.13),transparent 52%);
  filter:blur(6px);
}
.hero .shell{position:relative}
.hero-grid{display:grid;gap:52px;align-items:center}
@media (min-width:1000px){
  .hero-grid{grid-template-columns:1.14fr .86fr;gap:56px}
  /* the copy column is not the viewport — resize the display type to it */
  .hero-copy h1{font-size:clamp(56px,6.6vw,88px)}
}
.hero-sub{font-size:clamp(17px,2.1vw,21px);color:var(--muted);max-width:60ch;margin:0 0 36px;line-height:1.55}
.hero-sub strong{color:var(--text);font-weight:500}
.hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:18px}
.hero-note{font-size:14px;color:var(--muted);margin:0}

/* ---------------------------------------------------------
   Hero facade — the mark, repeated into a building.
   Windows go dark as the evening runs; one stays lit.
   --------------------------------------------------------- */
.hero-viz{display:none}
@media (min-width:1000px){.hero-viz{display:block}}
.facade{
  display:grid;grid-template-columns:repeat(7,1fr);gap:9px;
  max-width:392px;margin:0 0 0 auto;
  padding:22px;border-radius:20px;
  background:linear-gradient(180deg,rgba(21,19,31,.9),rgba(10,10,15,.6));
  border:1px solid var(--line-soft);
}
.facade b{
  display:block;aspect-ratio:1;border-radius:6px;
  border:1.5px solid rgba(124,58,237,.3);
  position:relative;overflow:hidden;
  transition:border-color .5s ease;
}
.facade b::before{
  content:'';position:absolute;inset:2px;border-radius:3px;
  background:var(--primary);opacity:0;
  transition:opacity .55s ease,background .55s ease,box-shadow .55s ease;
}
.facade b.on::before{opacity:.8}
.facade b.last::before{
  opacity:1;background:var(--shock);
  box-shadow:0 0 16px rgba(196,248,42,.9);
}
.facade b.last{border-color:rgba(196,248,42,.5)}
.facade-cap{
  margin:16px 0 0;text-align:center;font-size:13px;color:var(--muted);
  letter-spacing:.1em;text-transform:uppercase;
}
.facade-cap span:first-child{
  color:var(--text);font-family:var(--display);font-weight:800;
  font-variant-numeric:tabular-nums;
}

/* ---------------------------------------------------------
   Ticker
   --------------------------------------------------------- */
.ticker{
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  background:linear-gradient(90deg,rgba(124,58,237,.1),rgba(34,211,238,.05));
  overflow:hidden;padding:15px 0;
}
.ticker-track{
  display:flex;gap:26px;align-items:center;white-space:nowrap;width:max-content;
  animation:slide 44s linear infinite;
  font-size:14px;letter-spacing:.02em;color:var(--muted);
}
.ticker-track i{color:var(--shock);font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}

/* ---------------------------------------------------------
   Bands
   --------------------------------------------------------- */
.band,.hero,.final{scroll-margin-top:78px}
.band{padding:clamp(72px,11vw,130px) 0;position:relative}
.band-alt{background:linear-gradient(180deg,transparent,rgba(21,19,31,.85) 12%,rgba(21,19,31,.85) 88%,transparent)}

/* ---------------------------------------------------------
   The gap
   --------------------------------------------------------- */
.gap-grid{display:grid;gap:44px}
@media (min-width:940px){.gap-grid{grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}}

.gap-viz{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 20px 18px;
}
.viz-head{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  flex-wrap:wrap;margin-bottom:18px;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}
.viz-legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sw{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:3px;vertical-align:middle}
.sw-open{background:var(--primary)}
.sw-shut{background:rgba(124,58,237,.14)}
.sw-hit{background:var(--shock)}

.week{
  display:grid;grid-template-columns:repeat(24,1fr);gap:3px;
}
.week i{
  display:block;aspect-ratio:1;border-radius:2px;
  background:rgba(124,58,237,.13);
  transition:background .4s ease,box-shadow .4s ease;
}
.week i.open{background:var(--primary);opacity:.75}
.week i.hit{background:var(--shock);box-shadow:0 0 9px rgba(196,248,42,.85)}
.viz-foot{margin:16px 0 0;font-size:14px;color:var(--muted)}
.viz-foot span{color:var(--shock);font-weight:600;font-variant-numeric:tabular-nums}

.gap-copy .big{
  font-family:var(--display);font-weight:800;font-size:clamp(23px,3.4vw,32px);
  line-height:1.18;letter-spacing:-.025em;margin:0 0 20px;
}
.gap-copy p{color:var(--muted);margin:0 0 18px}
.gap-copy strong{color:var(--text);font-weight:500}
.stat-list{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:2px}
.stat-list li{
  display:flex;align-items:baseline;gap:18px;
  padding:16px 0;border-top:1px solid var(--line-soft);
}
.stat-list b{
  font-family:var(--display);font-weight:900;font-size:clamp(28px,4.4vw,40px);
  letter-spacing:-.03em;color:var(--shock);min-width:88px;
  font-variant-numeric:tabular-nums;line-height:1;
}
.stat-list span{font-size:15px;color:var(--muted)}

/* ---------------------------------------------------------
   Calculator
   --------------------------------------------------------- */
.calc{
  display:grid;gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  background:var(--surface);
}
@media (min-width:940px){.calc{grid-template-columns:1fr 1fr}}

.calc-in{padding:clamp(24px,3.4vw,40px);display:grid;gap:30px;align-content:start}
.field label{
  display:block;font-family:var(--display);font-weight:700;font-size:16px;
  letter-spacing:-.015em;margin-bottom:14px;
}
.ctrl{display:flex;align-items:center;gap:18px}
.ctrl output{
  font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.025em;
  color:var(--shock);min-width:92px;text-align:right;font-variant-numeric:tabular-nums;
}
.hint{margin:10px 0 0;font-size:13px;color:var(--muted)}

input[type=range]{
  -webkit-appearance:none;appearance:none;
  flex:1;height:28px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:5px;border-radius:99px;
  background:linear-gradient(90deg,var(--primary) var(--pct,40%),rgba(124,58,237,.2) var(--pct,40%));
}
input[type=range]::-moz-range-track{
  height:5px;border-radius:99px;background:rgba(124,58,237,.2);
}
input[type=range]::-moz-range-progress{height:5px;border-radius:99px;background:var(--primary)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;margin-top:-7.5px;
  background:var(--shock);border:0;
  box-shadow:0 0 12px rgba(196,248,42,.7);
}
input[type=range]::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:var(--shock);border:0;
  box-shadow:0 0 12px rgba(196,248,42,.7);
}

.calc-out{
  padding:clamp(24px,3.4vw,40px);
  background:
    radial-gradient(ellipse 90% 70% at 70% 0%,rgba(124,58,237,.22),transparent 65%),
    var(--surface-2);
  border-top:1px solid var(--line);
}
@media (min-width:940px){.calc-out{border-top:0;border-left:1px solid var(--line)}}
.out-label{
  margin:0 0 6px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.out-figure{
  font-family:var(--display);font-weight:900;font-stretch:108%;
  font-size:clamp(46px,8.5vw,78px);line-height:1;letter-spacing:-.04em;
  color:var(--shock);text-shadow:0 0 48px rgba(196,248,42,.4);
  margin:0 0 28px;font-variant-numeric:tabular-nums;
}
.out-rows{display:grid;gap:1px;margin-bottom:22px}
.out-rows div{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:13px 0;border-top:1px solid var(--line-soft);font-size:15px;
}
.out-rows span{color:var(--muted)}
.out-rows b{font-family:var(--display);font-weight:800;font-size:19px;font-variant-numeric:tabular-nums}
.out-note{font-size:13px;color:var(--muted);margin:0 0 28px;line-height:1.5}

.capture{border-top:1px solid var(--line);padding-top:24px}
.capture label{display:block;font-size:15px;margin-bottom:13px;color:var(--text)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.capture-row{display:flex;gap:10px;flex-wrap:wrap}
.capture input{
  flex:1;min-width:220px;
  background:rgba(10,10,15,.65);border:1px solid var(--line);
  color:var(--text);font-family:var(--body);font-size:16px;
  padding:13px 15px;border-radius:10px;
}
.capture input::placeholder{color:#6F6890}
.capture input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,58,237,.22)}
.capture-msg{margin:13px 0 0;font-size:14px;min-height:1.2em}
.capture-msg.ok{color:var(--shock)}
.capture-msg.err{color:var(--cool)}

/* ---------------------------------------------------------
   Pillars
   --------------------------------------------------------- */
.pillar{
  border-top:1px solid var(--line);padding:44px 0 0;margin-bottom:56px;
}
.pillar:last-child{margin-bottom:0}
.pillar-head{max-width:720px;margin-bottom:40px;position:relative;padding-left:0}
.pillar-no{
  font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.16em;
  color:var(--base);background:var(--shock);padding:4px 9px;border-radius:5px;
  display:inline-block;margin-bottom:16px;
}
.pillar-head p{color:var(--muted);margin:0;font-size:18px;max-width:54ch}

.pillar-items{display:grid;gap:18px}
@media (min-width:760px){.pillar-items{grid-template-columns:repeat(3,1fr)}}
.item{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:28px 24px;
  transition:border-color .25s ease,transform .25s ease,background .25s ease;
}
.item:hover{border-color:var(--line);transform:translateY(-3px);background:var(--surface-2)}
.item p{color:var(--muted);margin:0;font-size:15px}

/* Presentation lives on the <svg>, not the <symbol> — it has to inherit
   into the shadow tree that <use> clones. */
.ico{
  width:32px;height:32px;display:block;margin-bottom:18px;
  color:var(--primary);
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 7px rgba(168,85,247,.6));
}
.item:hover .ico,.mini:hover .ico{color:var(--shock);filter:drop-shadow(0 0 9px rgba(196,248,42,.7))}

/* ---------------------------------------------------------
   Secondary grid
   --------------------------------------------------------- */
.grid-more{display:grid;gap:14px}
@media (min-width:620px){.grid-more{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.grid-more{grid-template-columns:repeat(3,1fr)}}
.mini{
  background:rgba(10,10,15,.5);border:1px solid var(--line-soft);border-radius:13px;
  padding:22px 20px;transition:border-color .25s ease,background .25s ease;
}
.mini:hover{border-color:var(--line);background:rgba(28,25,48,.7)}
.mini .ico{width:26px;height:26px;margin-bottom:13px}
.mini h4{font-size:17px}
.mini p{color:var(--muted);margin:0;font-size:14.5px}

/* ---------------------------------------------------------
   Steps
   --------------------------------------------------------- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:18px;counter-reset:s}
@media (min-width:820px){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{
  border-top:2px solid var(--primary);padding:24px 0 0;position:relative;
}
.step-no{
  font-family:var(--display);font-weight:900;font-size:13px;letter-spacing:.16em;
  color:var(--shock);display:block;margin-bottom:12px;
}
.steps h3{font-size:22px;margin-bottom:10px}
.steps p{color:var(--muted);margin:0;font-size:15px}

/* ---------------------------------------------------------
   FAQ
   --------------------------------------------------------- */
.faq{display:grid;gap:1px;max-width:900px}
.faq details{border-top:1px solid var(--line-soft);padding:0}
.faq details:last-child{border-bottom:1px solid var(--line-soft)}
.faq summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 0;position:relative;
  font-family:var(--display);font-weight:700;font-size:clamp(17px,2.2vw,21px);
  letter-spacing:-.018em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';position:absolute;right:8px;top:50%;width:13px;height:13px;
  border-right:2px solid var(--shock);border-bottom:2px solid var(--shock);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--shock)}
.faq p{color:var(--muted);margin:0 0 26px;max-width:70ch;font-size:16px}

/* ---------------------------------------------------------
   Final CTA
   --------------------------------------------------------- */
.final{position:relative;padding:clamp(88px,14vw,160px) 0;text-align:center;overflow:hidden}
.final-glow{
  position:absolute;left:50%;bottom:-50%;width:min(1000px,140vw);aspect-ratio:1;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(circle,rgba(124,58,237,.3),transparent 62%);
}
.final .shell{position:relative}
.final-lede{color:var(--muted);font-size:clamp(17px,2.2vw,21px);max-width:52ch;margin:0 auto 36px}

/* three commitments — this is where proof would sit if there were any yet */
.promises{
  display:grid;gap:16px;text-align:left;margin:0 auto 44px;max-width:1000px;
}
@media (min-width:860px){.promises{grid-template-columns:repeat(3,1fr)}}
.promise{
  background:rgba(21,19,31,.72);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:26px 24px;
  transition:border-color .25s ease,background .25s ease;
}
.promise:hover{border-color:var(--line);background:rgba(28,25,48,.8)}
.promise-no{
  font-family:var(--display);font-weight:900;font-size:12px;letter-spacing:.16em;
  color:var(--base);background:var(--shock);padding:4px 8px;border-radius:5px;
  display:inline-block;margin-bottom:15px;
}
.promise h3{font-size:19px;margin-bottom:9px;line-height:1.25}
.promise p{color:var(--muted);font-size:15px;margin:0}
.final-note{margin:20px 0 0;font-size:14px;color:var(--muted)}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.foot{border-top:1px solid var(--line-soft);padding:44px 0}
.foot-in{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot-tag{
  font-family:var(--display);font-weight:700;color:var(--shock);margin:0;font-size:15px;
  letter-spacing:-.01em;
}
.foot-legal{margin:0 0 0 auto;font-size:13px;color:var(--muted)}
.foot-cookies{
  background:none;border:0;padding:0;margin-left:6px;cursor:pointer;
  font:inherit;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;transition:color .18s ease;
}
.foot-cookies:hover{color:var(--shock)}

/* ---------------------------------------------------------
   Consent
   Storage stays denied until this is answered, so the banner
   is the thing standing between GA and its cookies.
   --------------------------------------------------------- */
.consent{
  position:fixed;left:16px;bottom:16px;z-index:80;
  width:min(380px,calc(100vw - 32px));
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:18px 18px 16px;
  box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 0 1px rgba(10,10,15,.6);
  animation:consent-in .32s ease both;
}
.consent[hidden]{display:none}
@keyframes consent-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.consent{animation:none}}
.consent-copy{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.consent-actions{display:flex;gap:9px}
.consent-actions .btn{flex:1}

/* ---------------------------------------------------------
   Narrow-screen refinements
   --------------------------------------------------------- */
@media (max-width:420px){
  .week{gap:2px}
  .gap-viz{padding:18px 14px 14px}
  .hero-cta .btn{flex:1}
}

/* ---------------------------------------------------------
   Reveal
   --------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .btn:hover,.item:hover{transform:none}
}