/* Rebel Against Ordinary Design
   Palette sampled from the brand's own sources: the logo, the product
   photography and the hero footage. Near-black and acid green is the
   subject's real material world here, not a default reach. */

:root{
  /* sampled: hero resting frame */
  --canvas:#0C0A13;
  --canvas-deep:#070510;
  --panel:#171226;
  --panel-2:#1E1733;
  /* sampled: Rebel product shots */
  --violet:#6322E4;
  --violet-soft:#9B45FA;
  /* sampled: logo, saturated to accent strength */
  --accent:#CDEE4F;
  --accent-hover:#DDFC97;
  --accent-muted:rgba(205,238,79,.22);
  /* sampled: logo */
  --magenta:#E54CBE;
  /* sampled: graveyard flame cores */
  --mint:#D2FBC7;

  --text-primary:#F4F1FA;
  --text-secondary:#A99CC4;
  --hairline:rgba(155,69,250,.22);
  --hairline-strong:rgba(169,156,196,.42);

  --display:'Anton',Impact,sans-serif;
  --body:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);

  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --gut:clamp(16px,4vw,64px);
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text-primary);
  font-family:var(--body);font-size:clamp(16px,1.05vw,18px);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
/* line-height must clear diacritics: A-ring, umlauts and accents sit above
   cap height, so anything under 1 collides with the line above in sv, de, fr and es. */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;letter-spacing:.01em;line-height:1.06;text-transform:uppercase}
p{margin:0}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--accent);color:var(--canvas-deep);padding:12px 20px;font-family:var(--mono);font-size:13px}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---- the fixed environment layer: one place, not stacked sections ---- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:
    radial-gradient(60% 45% at 18% 18%,rgba(99,34,228,.22),transparent 62%),
    radial-gradient(50% 40% at 84% 72%,rgba(205,238,79,.09),transparent 64%);
  animation:drift 72s var(--ease-soft) -14s infinite alternate;
}
.env::after{
  content:"";position:absolute;inset:0;opacity:.26;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px),
                   repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 4px);
}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(2%,2%,0) scale(1.06)}}

/* ---- nav ---- */
.nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;gap:20px;
  padding:14px var(--gut);background:linear-gradient(to bottom,rgba(7,5,16,.92),rgba(7,5,16,0))}
.nav__mark{display:flex;align-items:baseline;gap:9px;text-decoration:none}
.nav__mark b{font-family:var(--display);font-size:20px;letter-spacing:.02em;font-weight:400}
.nav__mark span{font-family:var(--mono);font-size:10px;color:var(--text-secondary);letter-spacing:.18em}
/* The artwork carries its own transparency and includes the splatter around
   the letters, so it sits taller than a plain wordmark would. */
.nav__mark img{display:block;height:42px;width:auto}
.nav__spacer{flex:1}
.nav__links{display:flex;gap:22px;align-items:baseline}
.nav__links a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--text-secondary);transition:color .3s var(--ease)}
.nav__links a:hover{color:var(--accent)}
.lang{display:flex;gap:2px;align-items:baseline}
.lang a{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-decoration:none;color:var(--text-secondary);padding:4px 6px;border-radius:4px;transition:color .3s var(--ease),background .3s var(--ease)}
.lang a:hover{color:var(--accent)}
.lang a[aria-current="true"]{color:var(--canvas-deep);background:var(--accent)}
@media(max-width:860px){.nav__links{display:none}}
@media(max-width:560px){.nav__mark img{height:32px}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:16px 30px;border:0;cursor:pointer;text-shadow:none;position:relative;
  background:var(--accent);color:var(--canvas-deep);
  clip-path:polygon(0 0,100% 0,100% 72%,96% 100%,0 100%,0 28%);
  transition:background .3s var(--ease),transform .3s var(--ease)}
.btn:hover{background:var(--accent-hover);transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--hairline-strong)}
.btn--ghost:hover{background:rgba(155,69,250,.14);color:var(--text-primary)}
@media(pointer:coarse){.btn{min-height:44px}}

/* ---- the signature element: the tear ----
   A torn edge lifted from the hero's opening frame, the cut chain-link
   fence. It draws itself on scroll and carries the magenta rim the wire
   has in the footage. Nothing else on the page is allowed to be this loud. */
.tear{display:block;width:100%;height:34px;overflow:visible}
.tear path{fill:none;stroke:var(--magenta);stroke-width:1.6;
  stroke-dasharray:var(--len,2400);stroke-dashoffset:var(--len,2400);
  filter:drop-shadow(0 0 7px rgba(229,76,190,.55))}
.tear.in path{transition:stroke-dashoffset 1.9s var(--ease);stroke-dashoffset:0}
.tear--accent path{stroke:var(--accent);filter:drop-shadow(0 0 7px rgba(205,238,79,.5))}

/* ================= HERO ================= */
.hero{position:relative;z-index:1;height:1300vh}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;background:var(--canvas-deep)}
.stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease-soft);will-change:transform;transform:translateZ(0)}
.stage.video-ready video{opacity:1}
.poster{position:absolute;inset:0;background-size:cover;background-position:center;
  transition:opacity 1.1s var(--ease-soft)}
.stage.video-ready .poster{opacity:0}
.stage.video-failed .poster{opacity:1}
.stage.video-failed video{display:none}

/* 1. the global base scrim: no frame is ever raw behind the page */
.scrim{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}

.ring{position:absolute;left:50%;bottom:46px;width:48px;height:48px;margin-left:-24px;color:var(--accent);opacity:.9;transform:rotate(-90deg)}
.stage.video-ready .ring{opacity:0;transition:opacity .5s var(--ease)}
.cue{position:absolute;left:50%;bottom:44px;margin-left:-13px;width:26px;height:26px;color:var(--accent);opacity:.75;animation:bob 2.6s var(--ease-soft) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ---- caption bands ---- */
.bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;inset:0;display:grid;align-content:center;opacity:0;
  padding:0 var(--gut);text-shadow:var(--tshadow)}
/* 2. the per-band scrim: dims exactly while this band is on, and nowhere else */
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;
  opacity:calc(.25 + .75*var(--k,1));
  background:radial-gradient(ellipse 74% 62% at var(--sx,50%) var(--sy,50%),
    rgba(5,5,10,var(--sa,.66)) 0%,rgba(5,5,10,.44) 46%,rgba(5,5,10,0) 76%)}
.band > *{position:relative}
.band h2{font-size:clamp(34px,7.4vw,112px);max-width:17ch}
.band .kick{display:block;font-family:var(--mono);font-size:clamp(11px,1.15vw,14px);letter-spacing:.2em;text-transform:uppercase;color:var(--mint);margin-bottom:18px}
.band--tl{justify-items:start;text-align:left}
.band--c{justify-items:center;text-align:center}
.band--c h2{max-width:20ch}
.band--r{justify-items:end;text-align:right}

/* word and character spans for the entrances */
.w{display:inline-block;white-space:pre}
.c{display:inline-block;will-change:transform,opacity}

/* (a) scatter: echoes grit and spray settling onto a surface */
.e-scatter .c{
  --kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* (g) approach-from-depth: echoes the tunnel push */
.e-depth .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:scale(calc(.82 + .18*var(--kc)))}
/* (f) drift-down: echoes embers and ash falling through the street */
.e-drift .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-26px))}
/* (d) word-punch: echoes the gate slamming past the lens */
.e-punch .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);
  --ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);
  opacity:var(--kc);transform:scale(calc(.6 + (.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
.e-punch .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* (e) staged settle: the arrival, three beats in one band */
.e-settle .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*22px))}
.e-settle .settle-sub{opacity:clamp(0,(var(--k,0) - .66)*4,1)}
.e-settle .ctarow{opacity:clamp(0,(var(--k,0) - .78)*5,1)}

.settle-sub{font-family:var(--body);font-size:clamp(15px,1.5vw,20px);color:var(--text-primary);max-width:46ch;margin:18px auto 0}
.ctarow{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;pointer-events:auto}

/* ---- the static hero: a designed layout, not an apology ---- */
.static-hero{display:none;position:relative;z-index:1;min-height:100svh;
  background-size:cover;background-position:center;
  align-items:flex-end;padding:120px var(--gut) clamp(48px,9vh,96px)}
.static-hero::before{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(7,5,16,.95) 6%,rgba(7,5,16,.55) 48%,rgba(7,5,16,.35) 100%)}
.static-hero__in{position:relative;max-width:620px;text-shadow:var(--tshadow)}
/* Ambient loop behind the static hero, on phones only. It sits under the
   gradient so the headline keeps its contrast, and fades in only once it is
   really playing, which leaves the still image as the fallback. */
.static-hero__loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.static-hero__loop.on{opacity:1}
.static-hero::before{z-index:1}
.static-hero__in{z-index:2}
.static-hero h2{font-size:clamp(42px,12vw,78px);max-width:13ch}
.static-hero .kick{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);margin-bottom:14px}
.static-hero .lede{margin:16px 0 26px;color:var(--text-primary);max-width:36ch}

/* ================= SECTIONS ================= */
main{position:relative;z-index:1;background:var(--canvas)}
.sec{padding:clamp(72px,11vh,150px) var(--gut);position:relative}
.kick{display:block;margin-bottom:14px;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}

/* S1: asymmetric, display left and body offset right */
.s-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,80px);align-items:start;max-width:1320px;margin:0 auto}
.s-intro h1{font-size:clamp(40px,6.6vw,96px);max-width:12ch}
.s-intro .body{padding-top:clamp(8px,3vw,54px);max-width:52ch;color:var(--text-secondary)}
.s-intro .body p + p{margin-top:17px}
.s-intro .body strong{color:var(--text-primary);font-weight:500}
@media(max-width:820px){.s-intro{grid-template-columns:1fr}}

/* S2: three paths, deliberately unequal so it is not a card template */
.s-paths{max-width:1320px;margin:0 auto}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,26px);margin-top:46px}
.path{position:relative;text-decoration:none;display:block;background:var(--panel);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 94%,94% 100%,0 100%);
  transform:translateY(26px);opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease)}
.paths.in .path{transform:translateY(0);opacity:1}
.paths.in .path:nth-child(2){transition-delay:.11s}
.paths.in .path:nth-child(3){transition-delay:.22s}
.paths.done .path:nth-child(2),.paths.done .path:nth-child(3){transition-delay:0s}
.path:nth-child(2){margin-top:clamp(0px,3vw,38px)}
.path img{aspect-ratio:1;object-fit:cover;width:100%;transition:transform 1.1s var(--ease)}
.path:hover img{transform:scale(1.045)}
.path__t{position:absolute;left:0;right:0;bottom:0;padding:22px;
  background:linear-gradient(to top,rgba(7,5,16,.96),rgba(7,5,16,0))}
.path__t h3{font-size:clamp(23px,2.5vw,36px)}
.path__t p{color:var(--text-secondary);font-size:14px;margin-top:7px;max-width:30ch}
.path__go{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent);margin-top:13px;display:block}
@media(max-width:820px){.paths{grid-template-columns:1fr}.path:nth-child(2){margin-top:0}}

/* S3: the interactive moment, centred figure with a swatch rail */
.s-colour{max-width:1100px;margin:0 auto;text-align:center}
.s-colour h2{font-size:clamp(32px,5vw,70px)}
.swap{margin:40px auto 0;position:relative;max-width:620px}
.swap__img{position:relative;aspect-ratio:1;background:var(--panel)}
.swap__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s var(--ease-soft)}
.swap__img img.on{opacity:1}
.rail{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px;padding:0}
.rail li{list-style:none}
.sw{width:38px;height:38px;border-radius:50%;border:1px solid var(--hairline-strong);cursor:pointer;padding:0;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.sw:hover{transform:scale(1.12)}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--canvas),0 0 0 4px var(--accent);transform:scale(1.12)}
@media(pointer:coarse){.sw{width:44px;height:44px}}
.swap__name{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);margin-top:18px;min-height:1.4em}

/* S4: the in-house claim, split with a hard rule */
.s-print{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,74px);align-items:end}
.s-print h2{font-size:clamp(34px,5.4vw,78px);max-width:11ch}
.s-print .body{color:var(--text-secondary);max-width:54ch}
.s-print .body p + p{margin-top:16px}
.care{margin-top:26px;display:flex;flex-wrap:wrap;gap:9px;padding:0}
.care li{list-style:none;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:9px 14px;color:var(--mint);background:rgba(8,8,15,.55);border:1px solid var(--hairline)}
@media(max-width:820px){.s-print{grid-template-columns:1fr}}

/* S5: sizing, table-led */
.s-size{max-width:1100px;margin:0 auto}
.s-size h2{font-size:clamp(32px,5vw,70px)}
.sizewrap{margin-top:34px;overflow-x:auto}
.sizewrap + .sizewrap{margin-top:40px}
table{border-collapse:collapse;width:100%;min-width:600px;font-size:15px}
td{font-variant-numeric:tabular-nums}
.ranges{margin-top:30px;padding:0;display:grid;gap:10px}
.ranges li{list-style:none;display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--hairline)}
.ranges b{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:.02em;min-width:9ch}
.ranges span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--mint)}
caption{text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-secondary);padding-bottom:12px}
th,td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--hairline)}
th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);font-weight:400}
tbody tr:hover{background:rgba(99,34,228,.1)}
.note{margin-top:18px;color:var(--text-secondary);font-size:15px;max-width:60ch}

/* S6: FAQ */
.s-faq{max-width:900px;margin:0 auto}
.s-faq h2{font-size:clamp(32px,5vw,70px)}
.faq{margin-top:34px}
details{border-bottom:1px solid var(--hairline)}
summary{cursor:pointer;padding:22px 42px 22px 0;position:relative;list-style:none;
  font-size:clamp(17px,1.9vw,22px);transition:color .3s var(--ease)}
summary::-webkit-details-marker{display:none}
summary:hover{color:var(--accent)}
summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;margin-top:-7px;
  border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  transform:rotate(45deg);transition:transform .35s var(--ease)}
details[open] summary::after{transform:rotate(-135deg)}
details p{padding:0 0 24px;color:var(--text-secondary);max-width:62ch}

/* S7: closing CTA over the ending frame */
.s-cta{position:relative;text-align:center;background-size:cover;background-position:center;
  padding:clamp(100px,17vh,200px) var(--gut)}
.s-cta::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(7,5,16,.9),rgba(7,5,16,.7) 46%,rgba(7,5,16,.95))}
.s-cta > *{position:relative}
.s-cta h2{font-size:clamp(36px,6.6vw,96px)}
.s-cta p{margin:18px auto 32px;color:var(--text-primary);max-width:44ch}

/* footer */
footer{position:relative;z-index:1;background:var(--canvas-deep);padding:clamp(50px,8vh,86px) var(--gut) 38px}
.fgrid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:34px;align-items:start}
footer h3{font-size:22px;margin-bottom:16px}
.social{display:flex;gap:14px;padding:0;margin:0}
.social li{list-style:none}
.social a{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;
  border:1px solid var(--hairline);color:var(--text-secondary);
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.social a:hover{color:var(--canvas-deep);border-color:var(--accent);background:var(--accent)}
.social a svg{width:19px;height:19px;display:block}
@media(pointer:coarse){.social a{width:44px;height:44px}}
.fcol p,.fcol a{color:var(--text-secondary);font-size:14px;text-decoration:none;display:block;margin-bottom:9px}
.fcol a:hover{color:var(--accent)}
.fbot{max-width:1320px;margin:40px auto 0;padding-top:22px;border-top:1px solid var(--hairline);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--text-secondary)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr}}

/* ---- legal pages ---- */
.legalhead{max-width:1180px;margin:0 auto;padding:clamp(118px,16vh,186px) var(--gut) clamp(30px,4.5vh,50px);position:relative}
.legalhead h1{font-size:clamp(34px,5.4vw,64px);margin:0 0 16px;max-width:17ch}
.legalhead .kick{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--mint);margin-bottom:16px}
.legalmeta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);margin:0;line-height:1.9}
.legalrule{max-width:1180px;margin:0 auto;height:1px;background:linear-gradient(90deg,var(--accent),var(--violet) 46%,transparent);opacity:.65}

.legalwrap{max-width:1180px;margin:0 auto;padding:clamp(38px,6vh,64px) var(--gut) clamp(56px,8vh,104px);display:grid;gap:clamp(30px,4vw,60px);grid-template-columns:minmax(0,1fr);align-items:start}
@media(min-width:1000px){.legalwrap{grid-template-columns:232px minmax(0,1fr)}}

/* On this page. Sticky beside the text on a wide screen, a plain list below
   the title on a narrow one. */
.toc{order:-1}
@media(min-width:1000px){.toc{position:sticky;top:92px;max-height:calc(100vh - 128px);overflow:auto;scrollbar-width:thin}}
.toc h2{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-secondary);margin:0 0 15px}
.toc ol{list-style:none;margin:0;padding:0 0 0 16px;display:grid;gap:10px;border-left:1px solid rgba(244,241,250,.13)}
.toc a{font-size:13px;line-height:1.5;color:var(--text-secondary);text-decoration:none;display:block;transition:color .25s var(--ease)}
.toc a:hover{color:var(--text-primary)}
.toc a.on{color:var(--accent)}

.legal{max-width:none;margin:0;padding:0}
.legal h2{font-size:clamp(19px,2.1vw,25px);margin:46px 0 15px;color:var(--accent);scroll-margin-top:100px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:clamp(16px,1.6vw,19px);margin:30px 0 10px;color:var(--text-primary)}
.legal p{color:var(--text-secondary);margin-bottom:16px;max-width:74ch;line-height:1.78}
.legal p strong{color:var(--text-primary);font-weight:500}
.legal ul,.legal ol{color:var(--text-secondary);max-width:74ch;line-height:1.78;margin:0 0 16px;padding-left:20px}
.legal li{margin-bottom:8px}
.legal a{color:var(--accent)}
.legal a:hover{color:var(--accent-hover)}
.legal table{width:100%;max-width:74ch;border-collapse:collapse;margin:0 0 22px;font-size:14px}
.legal th,.legal td{text-align:left;padding:11px 14px;border-bottom:1px solid rgba(244,241,250,.12);color:var(--text-secondary);vertical-align:top}
.legal th{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-primary)}
.legal .draft{border:1px solid var(--magenta);border-radius:10px;padding:16px 20px;margin-bottom:34px;background:rgba(229,76,190,.08)}
.legal .draft p{color:var(--text-primary);margin:0}
.legal .embed{margin:28px 0;min-height:560px}

/* The other three policies, as cards, so nobody has to go back to the footer. */
.legalmore{max-width:1180px;margin:0 auto;padding:0 var(--gut) clamp(70px,10vh,120px)}
.legalmore h2{font-size:clamp(20px,2.4vw,28px);margin:0 0 22px}
.legalcards{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.legalcards a{display:block;padding:20px 22px;border:1px solid rgba(244,241,250,.14);border-radius:12px;background:var(--panel);text-decoration:none;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.legalcards a:hover{border-color:var(--accent);transform:translateY(-2px)}
.legalcards b{display:block;font-family:var(--display);font-size:17px;font-weight:400;letter-spacing:.01em;text-transform:uppercase;color:var(--text-primary);line-height:1.2;margin-bottom:7px}
.legalcards span{font-size:13px;line-height:1.55;color:var(--text-secondary)}

/* section entrances */
.rev{opacity:0;transform:translateY(24px);transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rev.in{opacity:1;transform:none}

/* one living element per section, whisper level */
.pulse{position:relative}
.pulse::after{content:"";position:absolute;inset:-18%;pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(205,238,79,.1),transparent 66%);
  animation:breathe 7s var(--ease-soft) -2.1s infinite alternate}
@keyframes breathe{from{opacity:.22}to{opacity:.62}}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* short screens: no room for scroll-driven overlays */
@media(max-height:560px){.cue,.ring{display:none}}

/* ---- THE FIVE STATIC-HERO GATES ----
   These five strings are character-for-character identical in site.js. */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce){
  .hero{display:none}
  .static-hero{display:flex}
}

/* ---- reduced motion, honoured completely ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  .rev{opacity:1;transform:none}
  .paths .path{opacity:1;transform:none}
  .tear path{stroke-dashoffset:0}
}