/* ------------------------------------------------------------------
   neverdies.me — landing page

   Lifted out of an inline <style> so the Content-Security-Policy can
   say style-src 'self' with no 'unsafe-inline'. Nothing here may move
   back inline, and no style="..." attributes may be added to the HTML
   — CSP blocks those too.
------------------------------------------------------------------ */

:root{
  --accent:#9382F6;
  --base:#1e1e2e;
  --ink:#f2f1f8;
  --ink-dim:#b9b6cc;
  --ink-mute:rgba(185,182,204,.66);
  --hair:rgba(242,241,248,.22);
  --hair-soft:rgba(242,241,248,.12);
  --pad:clamp(20px, 5vw, 64px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}

html{overflow-x:hidden; -webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  background:var(--base);
  color:var(--ink);
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:16px;
  line-height:1.5;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

/* ---------- background ---------- */

.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background-color:var(--base);
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  filter:blur(2px);
  transform:scale(1.04);
}
.bg video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  opacity:0;
  transition:opacity .4s ease;
}
.bg video.is-ready{opacity:1}
.bg video.is-off{display:none}

.scrim{
  position:fixed;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(90deg, rgba(30,30,46,.90) 0%, rgba(30,30,46,.66) 42%, rgba(30,30,46,.54) 100%),
    radial-gradient(130% 100% at 20% 50%, rgba(30,30,46,.12) 0%, rgba(30,30,46,.60) 58%, rgba(30,30,46,.95) 100%);
}

/* ---------- top bar ---------- */

.topbar{
  display:flex;
  justify-content:flex-end;
  padding:calc(var(--pad) * .45) var(--pad) 0;
}
.dash-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
  padding:0 16px;
  border:1px solid var(--hair);
  border-radius:4px;
  background:rgba(30,30,46,.55);
  color:var(--ink);
  font-size:.875rem;
  font-weight:600;
  text-decoration:none;
  transition:background-color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.dash-link:hover{border-color:var(--accent); background:rgba(147,130,246,.14)}
.dash-link .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  flex:none;
}

/* ---------- layout ---------- */

main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(40px, 7vw, 110px);
  padding:var(--pad);
}

.content{max-width:54ch; flex:1 1 auto}

.logo{width:48px; height:48px; display:block; margin-bottom:18px}

h1{
  font-size:clamp(2.75rem, 7vw, 5rem);
  font-weight:700;
  letter-spacing:-.03em;
  line-height:.95;
  margin:0 0 14px;
}

.lede{
  margin:0 0 26px;
  font-size:clamp(1rem, 1.3vw, 1.125rem);
  color:var(--ink-dim);
  max-width:46ch;
}

/* ---------- product picker ---------- */

.picker{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  max-width:430px;
  margin:0 0 26px;
}
.pick{
  -webkit-appearance:none;
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:46px;
  padding:0 10px;
  border:1px solid var(--hair-soft);
  border-radius:4px;
  background:rgba(30,30,46,.55);
  color:var(--ink-dim);
  font:inherit;
  font-size:.8125rem;
  font-weight:600;
  line-height:1.15;
  text-align:center;
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease, color .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.pick:hover{border-color:var(--hair); color:var(--ink); background:rgba(242,241,248,.07)}
.pick[aria-pressed="true"]{
  border-color:var(--accent);
  background:rgba(147,130,246,.16);
  color:#cfc6ff;
}
.pick:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---------- buttons ---------- */

.actions{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  max-width:430px;
}

.btn{
  -webkit-appearance:none;
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  padding:0 20px;
  border-radius:4px;
  border:1px solid transparent;
  background:none;
  font:inherit;
  font-weight:600;
  font-size:.9375rem;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.btn--primary{background:var(--accent); color:#16121f}
.btn--primary:hover{background:#a596f8}
.btn--primary:active{background:#8271e8}
.btn--ghost{border-color:var(--hair)}
.btn--ghost:hover{border-color:rgba(242,241,248,.5); background:rgba(242,241,248,.06)}

.btn:focus-visible,
.icon-btn:focus-visible,
.dash-link:focus-visible,
.foot a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ---------- product detail ---------- */

.detail{
  flex:0 1 42ch;
  max-width:42ch;
  border-left:1px solid var(--hair-soft);
  padding-left:22px;
}
.detail__eyebrow{
  margin:0 0 6px;
  font-family:"Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.625rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--accent);
}
.detail h2{
  margin:0 0 8px;
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-.02em;
}
.detail__blurb{
  margin:0 0 16px;
  font-size:.875rem;
  line-height:1.6;
  color:var(--ink-mute);
}
.detail__list{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0 0 18px;
  padding:0;
}
.detail__list li{
  padding:4px 9px;
  border:1px solid var(--hair-soft);
  border-radius:4px;
  background:rgba(242,241,248,.04);
  font-family:"Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.6875rem;
  letter-spacing:-.02em;
  color:var(--ink-dim);
}
.detail__note{
  margin:0;
  padding-top:14px;
  border-top:1px solid var(--hair-soft);
  font-size:.75rem;
  line-height:1.55;
  color:var(--ink-mute);
}

/* ---------- footer ---------- */

.foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:0 var(--pad) calc(var(--pad) * .62);
  font-size:.8125rem;
  color:var(--ink-mute);
}
.foot p{margin:0}
.legal-links{display:flex; align-items:center; gap:4px}
.foot a{
  display:inline-flex;
  align-items:center;
  padding:7px 10px;
  border-radius:4px;
  color:var(--ink-mute);
  text-decoration:none;
  transition:color .15s ease, background-color .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.foot a:hover{color:var(--ink); background:rgba(242,241,248,.07)}

/* ---------- legal sheet ---------- */

.modal{
  position:fixed;
  inset:0;
  z-index:50;
  display:none;
  align-items:center;
  justify-content:center;
  padding:max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background:rgba(12,12,20,.86);
}
.modal.is-open{display:flex}

.icon-btn{
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  padding:0;
  border:1px solid var(--hair);
  border-radius:4px;
  background:rgba(30,30,46,.8);
  color:var(--ink);
  font:inherit;
  font-size:1.125rem;
  line-height:1;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.icon-btn:hover{border-color:rgba(242,241,248,.5)}

.sheet{
  display:flex;
  flex-direction:column;
  width:min(760px, 100%);
  max-height:min(84dvh, 900px);
  background:#232336;
  border:1px solid var(--hair-soft);
  border-radius:4px;
  overflow:hidden;
}
.sheet__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex:none;
  padding:16px 18px;
  border-bottom:1px solid var(--hair-soft);
}
.sheet__head h2{margin:0; font-size:1.0625rem; font-weight:600; letter-spacing:-.01em}
.sheet__body{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding:22px 26px 34px;
}
.doc{max-width:66ch}
.doc .eff{margin:0 0 26px; font-size:.8125rem; color:var(--ink-mute)}
.doc h3{
  margin:26px 0 8px;
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink);
}
.doc h3:first-of-type{margin-top:0}
.doc p, .doc li{font-size:.875rem; line-height:1.65; color:var(--ink-dim)}
.doc p{margin:0 0 12px}
.doc ul{margin:0 0 12px; padding-left:20px}
.doc li{margin-bottom:7px}
.doc strong{color:var(--ink); font-weight:600}

html.is-locked, body.is-locked{overflow:hidden}

/* ---------- desktop: one viewport, no scroll ---------- */

@media (min-width:900px){
  html, body{height:100%; overflow:hidden}
  body{min-height:100dvh}
}

@media (min-width:900px) and (max-height:800px){
  .logo{width:40px; height:40px; margin-bottom:12px}
  h1{font-size:clamp(2.25rem, 4.6vw, 3.5rem)}
  .lede{margin-bottom:18px}
  .picker{margin-bottom:18px}
  .detail__blurb{margin-bottom:12px}
}

/* ---------- mobile ---------- */

@media (max-width:899px){
  .topbar{padding:10px var(--pad) 0}
  .dash-link{min-height:44px}

  main{
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    gap:36px;
    min-height:100dvh;
    padding:calc(var(--pad) + 12px) var(--pad);
    text-align:center;
  }
  .content{max-width:420px; margin:0 auto; width:100%}
  .logo{width:56px; height:56px; margin:0 auto 16px}
  .lede{margin:0 auto 22px; max-width:34ch}

  .picker{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    max-width:none;
    margin-bottom:22px;
  }
  .pick{min-height:48px}
  .actions{grid-template-columns:1fr; max-width:none}

  .detail{
    flex:none;
    max-width:420px;
    width:100%;
    margin:0 auto;
    border-left:0;
    border-top:1px solid var(--hair-soft);
    padding:22px 0 0;
    text-align:left;
  }
  .detail__list{justify-content:flex-start}

  .foot{
    flex-direction:column-reverse;
    align-items:center;
    gap:6px;
    font-size:.75rem;
    padding-bottom:max(calc(var(--pad) * .62), env(safe-area-inset-bottom));
  }
  .legal-links{flex-wrap:wrap; justify-content:center}
  .foot a{min-height:44px}

  .modal{padding:16px}
  .sheet{max-height:88dvh}
  .sheet__body{padding:20px 18px 30px}
}