/* ==========================================================================
   NERD Membership — revision 2, grain-field particle morph.

   The document is written static-first: with no JS, no WebGL, or
   prefers-reduced-motion it reads top to bottom and ends on the join action.
   app.js adds .is-live to <html> to switch on the canvas experience.
   ========================================================================== */

@font-face{font-family:"NHDisplay";src:url("assets/fonts/NeueHaasGroteskDisplay-Black.woff2") format("woff2");font-weight:900;font-style:normal;font-display:block}
@font-face{font-family:"NHDisplay";src:url("assets/fonts/NeueHaasGroteskDisplay-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"NHText";src:url("assets/fonts/NeueHaasGroteskText-55Roman-Web.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"NHText";src:url("assets/fonts/NeueHaasGroteskText-75Bold-Web.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url("assets/fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PlexMono";src:url("assets/fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --ground:#07060C;
  --ground-2:#0C0A16;
  --paper:#FFFFFF;
  --dim:rgba(255,255,255,.58);
  --dimmer:rgba(255,255,255,.38);
  --cobalt:#2B4BFF;
  --violet:#8A45FF;
  --magenta:#FF3D9A;
  --coral:#FF6A3D;
  --amber:#FFC23D;
  --mint:#3DFFC2;
  --acid:#B6FF00;
  --ink:#131313;
  --cyan:#33D6FF;

  --display:"NHDisplay","Helvetica Neue",Arial,sans-serif;
  --text:"NHText","Helvetica Neue",Arial,sans-serif;
  --mono:"PlexMono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

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

html{background:var(--ground);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--paper);
  font-family:var(--text);font-size:1.0625rem;line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit}
:where(a,button):focus-visible{outline:2px solid var(--mint);outline-offset:3px}

.skiplink{
  position:fixed;left:1rem;top:1rem;z-index:90;transform:translateY(-180%);
  background:var(--paper);color:#000;font-family:var(--mono);font-size:.8125rem;
  padding:.6rem .9rem;border-radius:2px;text-decoration:none;transition:transform .18s ease;
}
.skiplink:focus{transform:translateY(0)}

/* the canvas is inert until app.js turns the experience on */
#field{display:none}

/* ------------------------------------------------------------------ chrome */
.chrome{
  position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;gap:1rem;
  padding:1.05rem clamp(1rem,3vw,2.4rem);
  font-family:var(--mono);font-size:.8125rem;letter-spacing:.07em;text-transform:uppercase;
}
.chrome__mark{color:#fff;text-decoration:none;font-weight:500}
.chrome__label{flex:1;color:var(--dimmer)}
.chrome__join{
  color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.45);
  padding:.34rem .85rem;border-radius:999px;transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.chrome__join:hover{background:#fff;color:#000;border-color:#fff}
@media (max-width:620px){.chrome__label{display:none}}

/* =========================================================================
   Static document (the default, and the reduced-motion / no-JS fallback)
   ========================================================================= */
#scenes{max-width:46rem;margin:0 auto;padding:7.5rem clamp(1.25rem,5vw,2rem) 5rem}
.scene{padding:3.2rem 0}
.scene + .scene{border-top:1px solid rgba(255,255,255,.12)}
.scene > * + *{margin-top:.95rem}
.scene p{margin:0;max-width:34rem;color:var(--dim)}
.scene h1,.scene h2{margin:0;font-family:var(--display);font-weight:900;letter-spacing:-.03em;line-height:.95}
.scene h2{font-size:clamp(2rem,5.2vw,3.2rem);color:#fff}
.scene--hero h1{font-size:clamp(4.5rem,24vw,13rem);line-height:.8;letter-spacing:-.05em}
.scene--hero{padding-top:1rem}
.lead{font-size:clamp(1.15rem,2.2vw,1.45rem);line-height:1.3;color:#fff!important}

.idx{display:flex;align-items:center;gap:.9rem;font-family:var(--mono);font-size:.8125rem;letter-spacing:.14em}
.idx span{color:var(--mint)}
.idx i{flex:1;height:1px;background:linear-gradient(to right,rgba(61,255,194,.55),rgba(255,255,255,.07))}

.cue{display:flex;align-items:center;gap:.7rem;font-family:var(--mono);font-size:.8125rem;
     letter-spacing:.14em;text-transform:uppercase;color:var(--dimmer)!important}
.cue__rule{display:block;width:3rem;height:1px;background:currentColor}
.cue__touch{display:none}
.cue{font-size:.875rem;letter-spacing:.025em;text-transform:none}
html:not(.is-live) .cue{display:none}
@media (hover:none){.cue__desktop{display:none}.cue__touch{display:inline}}

.final__lead{font-family:var(--display);font-weight:900;font-size:clamp(2rem,5.2vw,3.2rem);
             letter-spacing:-.03em;line-height:.95;margin:0}
.final__price{display:flex;align-items:baseline;gap:.6rem;margin-top:.7rem!important;color:#fff!important}
.final__amount{font-family:var(--display);font-weight:900;font-size:clamp(3.4rem,11vw,6.5rem);
               line-height:.85;letter-spacing:-.045em;
               background:linear-gradient(96deg,var(--amber),var(--magenta) 42%,var(--violet) 72%,var(--cyan));
               -webkit-background-clip:text;background-clip:text;color:transparent}
.final__term{font-family:var(--mono);font-size:.9375rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.final__sub{color:var(--dim)}
.final__cta{margin-top:1.5rem!important}
.btn{
  display:inline-block;background:var(--acid);color:var(--ink);text-decoration:none;
  border:1px solid var(--acid);
  font-family:var(--display);font-weight:500;font-size:1.0625rem;
  padding:.95rem 1.75rem;border-radius:999px;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn:hover{background:#ccff4d;transform:translateY(-1px);box-shadow:0 8px 28px rgba(182,255,0,.2)}
.btn:active{background:var(--ink);color:var(--acid);box-shadow:none}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.price-demo{margin-top:1rem}
.price-tabs{display:none;gap:.25rem;width:max-content;padding:3px;border:1px solid rgba(255,255,255,.2);border-radius:999px;margin-bottom:.8rem}
.has-comparisons .price-tabs{display:flex}
.has-comparisons .price-static{display:none}
.price-tabs button{font:500 .875rem var(--mono);color:rgba(255,255,255,.65);background:none;border:0;border-radius:999px;padding:.5rem 1rem;cursor:pointer;min-height:38px}
.price-tabs button[aria-pressed="true"]{background:var(--acid);color:var(--ink)}
.scene p.saving-line{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;color:var(--paper)}
.saving-line strong{font:900 clamp(2rem,3.5vw,2.7rem)/1 var(--display);letter-spacing:-.035em;color:var(--acid)}
.saving-line span{font-size:1rem;color:var(--paper)}
.scene p.example-price{display:flex;align-items:baseline;gap:.6rem;margin-top:.55rem;color:var(--dim)}
.example-price strong{color:var(--paper);font-size:1.5rem;font-weight:700}
.scene p.example-caption{font-size:.9375rem;margin-top:.55rem;color:rgba(255,255,255,.8)}
.scene p.example-note{font-size:.875rem;margin-top:.25rem;color:var(--dim)}
.scene p.price-static{font-size:1rem;margin-top:.6rem}
.film-examples{list-style:none;padding:0;margin:.8rem 0 .4rem}
.film-examples li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.13)}
.film-examples li:first-child{border-top:1px solid rgba(255,255,255,.13)}
.film-examples div>strong{font:400 1rem/1.25 var(--text);color:var(--paper)}
.film-examples small{display:block;font-size:.875rem;line-height:1.4;color:var(--acid);margin-top:.15rem}
.scene .film-examples p{display:flex;gap:.55rem;align-items:center;white-space:nowrap;font-size:.9375rem}
.film-examples p strong{color:var(--paper);font-size:1.125rem}
.film-examples s{color:var(--dim)}
@media (max-height:680px){
  html.is-live .scene[data-scene="2"],html.is-live .scene[data-scene="3"]{margin-bottom:3rem}
  html.is-live .scene[data-scene="2"] h2,html.is-live .scene[data-scene="3"] h2{font-size:1.6rem}
  .film-examples li{padding:.4rem 0}
  .price-tabs{margin-bottom:.5rem}
  .price-demo{margin-top:.65rem}
}
.final__proto{font-family:var(--mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
              color:rgba(255,255,255,.3)!important;margin-top:1.6rem!important}

.track,.hud{display:none}

/* =========================================================================
   Live mode — the grain field carries the page
   ========================================================================= */
html.is-live,html.is-live body{overflow-x:hidden}
html.is-live #field{
  display:block;position:fixed;inset:0;width:100%;height:100%;z-index:0;
  background:
    radial-gradient(120% 90% at 50% 38%, #100C22 0%, #08060F 55%, #050409 100%);
}
html.is-live #scenes{
  position:fixed;inset:0;z-index:20;max-width:none;margin:0;padding:0;pointer-events:none;
}
html.is-live .scene{
  position:absolute;inset:auto auto 0 0;
  width:min(30rem,calc(100vw - 2 * clamp(1.25rem,5vw,3rem)));
  margin:0 clamp(1.25rem,5vw,3rem) clamp(3.2rem,9vh,6rem);
  padding:0;border:0;opacity:0;
  will-change:opacity,transform;
}
html.is-live .scene + .scene{border-top:0}
html.is-live .scene p{color:var(--dim)}
html.is-live .scene h2{font-size:clamp(1.9rem,3.4vw,2.7rem)}
html.is-live .scene--hero h1{
  position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
html.is-live .scene--hero{width:min(26rem,calc(100vw - 2 * clamp(1.25rem,5vw,3rem)))}
html.is-live .scene--final{
  left:0;right:0;width:auto;text-align:center;
  margin:0 clamp(1.25rem,5vw,3rem) clamp(3rem,8vh,5rem);
}
html.is-live .scene--final .final__price{justify-content:center}
html.is-live .scene--final p{margin-left:auto;margin-right:auto}
html.is-live .scene--final .final__amount{font-size:clamp(2.2rem,5vw,3.2rem)}
html.is-live .scene--final .final__lead{font-size:clamp(1.5rem,3vw,2.1rem)}
html.is-live .btn,
html.is-live .scene a,
html.is-live .scene button{pointer-events:auto}

html.is-live .track{display:block;height:720vh;position:relative;z-index:1}

html.is-live .hud{
  display:flex;align-items:center;gap:.8rem;position:fixed;z-index:60;
  left:clamp(1.25rem,5vw,3rem);bottom:clamp(1rem,3vh,1.6rem);
  font-family:var(--mono);font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);pointer-events:none;
}
.hud__bar{display:block;position:relative;width:clamp(3.5rem,8vw,6rem);height:1px;background:rgba(255,255,255,.2)}
.hud__bar i{position:absolute;inset:0 auto 0 0;width:0;
            background:linear-gradient(to right,var(--cyan),var(--magenta));display:block}
.hud__word{color:rgba(255,255,255,.6)}

/* the chrome sits over the field */
html.is-live .chrome{mix-blend-mode:normal;text-shadow:0 1px 20px rgba(0,0,0,.6)}

@media (max-width:760px){
  html.is-live .scene{margin-bottom:clamp(2.4rem,7vh,4rem)}
  html.is-live .track{height:640vh}
}