:root{
  --night:#0d0a1c;--deep:#171230;--edge:#2c2552;--gold:#f4c95d;--lamp:#ffe08a;
  --ink:#f3eefc;--dim:#a9a3c9;--paper:#f4f1fb;--paper-ink:#1b1830;--paper-dim:#585475;--link:#4b3fb5;
  --display:ui-serif,'New York','Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  --body:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--ink);font:18px/1.6 var(--body)}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1080px,100% - 40px);margin-inline:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

/* top bar */
.bar{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.bar a.mark{font:600 20px var(--display);text-decoration:none;color:var(--gold);letter-spacing:.01em}
.bar nav{display:flex;gap:22px;font-size:16px}
.bar nav a{text-decoration:none;color:var(--dim)}
.bar nav a:hover{color:var(--ink)}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(60% 55% at 78% 38%,rgba(244,201,93,.2),transparent 70%),linear-gradient(180deg,#0d0a1c 0%,#15102f 100%)}
.hero .grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center;padding:30px 0 72px}
.hero h1{font:600 clamp(40px,6.6vw,74px)/1.04 var(--display);letter-spacing:-.015em;margin:0 0 20px;max-width:13ch}
.hero p.lead{font-size:clamp(18px,2.2vw,21px);color:#d9d3ef;max-width:34ch;margin:0 0 26px}
.status{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border-radius:99px;border:1px solid rgba(244,201,93,.55);color:var(--lamp);font-weight:600;font-size:16px}
.status i{width:9px;height:9px;border-radius:50%;background:var(--lamp);box-shadow:0 0 12px var(--lamp)}
.facts{margin:18px 0 0;color:var(--dim);font-size:16px}
.phone{justify-self:center;width:min(300px,78vw);padding:9px;border-radius:40px;background:#050410;border:1px solid var(--edge);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 140px rgba(244,201,93,.16)}
.phone img{border-radius:32px;width:100%;height:auto}

/* the forty-nine lamps: lit one at a time when the page opens */
.lamps{display:grid;grid-template-columns:repeat(49,1fr);gap:clamp(2px,.5vw,6px);padding-bottom:26px}
.lamps i{aspect-ratio:1;border-radius:50%;background:var(--lamp);box-shadow:0 0 10px rgba(255,224,138,.9);opacity:1}
@media (prefers-reduced-motion:no-preference){
  .lamps i{opacity:.14;box-shadow:none;animation:light .7s ease-out forwards;animation-delay:calc(var(--n)*70ms + 500ms)}
  @keyframes light{to{opacity:1;box-shadow:0 0 10px rgba(255,224,138,.9)}}
}

/* sections */
section{padding:84px 0}
section h2{font:600 clamp(30px,4.4vw,46px)/1.12 var(--display);letter-spacing:-.01em;margin:0 0 18px;max-width:18ch}
section p{max-width:60ch}
.how{background:var(--night)}
.how .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;margin-top:40px}
.how h3{font:600 22px/1.25 var(--display);margin:22px 0 8px;color:var(--lamp)}
.how .shot{border-radius:26px;border:1px solid var(--edge);background:#050410;padding:7px}
.how .shot img{border-radius:20px;width:100%;height:auto}
.how p{color:#d9d3ef;margin:0;font-size:17px}
.quote{background:var(--deep);border-block:1px solid var(--edge)}
.quote blockquote{margin:0;max-width:28ch;font:500 clamp(28px,4.4vw,46px)/1.2 var(--display)}
.quote p.src{color:var(--dim);margin:20px 0 0;font-size:16px}
.story .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.story p{color:#d9d3ef}
.paper{background:var(--paper);color:var(--paper-ink)}
.paper a{color:var(--link);font-weight:600}
.paper dl{margin:34px 0 0;display:grid;grid-template-columns:minmax(160px,.28fr) 1fr;gap:22px 36px;max-width:860px}
.paper dt{font:600 20px/1.3 var(--display)}
.paper dd{margin:0;color:var(--paper-dim);font-size:17px}
.paper .note{margin-top:34px;color:var(--paper-dim);font-size:16px;max-width:60ch}

/* footer */
footer{padding:48px 0 56px;color:var(--dim);font-size:16px;border-top:1px solid var(--edge)}
footer .row{display:flex;flex-wrap:wrap;gap:12px 28px;margin-bottom:16px}
footer a{color:var(--ink)}
footer .help{max-width:60ch}

/* privacy + support pages */
.doc{background:var(--paper);color:var(--paper-ink);min-height:70vh}
.doc .wrap{width:min(720px,100% - 40px)}
.doc main{padding:44px 0 72px}
.doc h1{font:600 clamp(34px,5vw,48px)/1.1 var(--display);margin:0 0 6px}
.doc .sub{color:var(--paper-dim);margin:0 0 30px}
.doc h2{font:600 24px/1.25 var(--display);margin:34px 0 6px}
.doc p,.doc li{margin:8px 0}
.doc a{color:var(--link);font-weight:600}
.doc .help{background:#fff;border:1px solid #ddd8ee;border-radius:14px;padding:6px 22px 14px;margin:18px 0}
.doc .help h2:first-child{margin-top:16px}
.doc ul{padding-left:22px}

@media (max-width:820px){
  .hero .grid{grid-template-columns:1fr;padding-bottom:52px}
  .hero h1{max-width:none}
  .phone{order:2;margin-top:12px}
  .how .cols{grid-template-columns:1fr;max-width:420px}
  .story .two{grid-template-columns:1fr;gap:0}
  .paper dl{grid-template-columns:1fr;gap:6px}
  .paper dt{margin-top:18px}
  section{padding:60px 0}
  .bar nav{gap:16px}
}

/* questions */
.faq{border-top:1px solid var(--edge)}
.faq .qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 48px;margin-top:30px;max-width:900px}
.faq h3{font:600 20px/1.3 var(--display);color:var(--lamp);margin:0 0 6px}
.faq p{margin:0;color:#d9d3ef;font-size:17px;max-width:44ch}
.faq a{color:var(--lamp)}
@media (max-width:720px){.faq .qa{grid-template-columns:1fr}}
.bar a{white-space:nowrap}
@media (max-width:480px){.bar nav{gap:14px;font-size:15px}.bar a.mark{font-size:18px}}