/* Lanternai landing page. Tokens are the brand pack's (brand/pack/tokens.json): pure black surface, one accent (the flame), no gradients,
   layers told apart by raised/inset surfaces and hairlines. Dark by default; the light theme follows the system setting. */
@font-face{font-family:"LN Sans";src:url(fonts/sans-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"LN Sans";src:url(fonts/sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"LN Sans";src:url(fonts/sans-700.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  color-scheme:dark light;
  --surface:#000000; --raised:#0d0d0d; --inset:#161616; --line:#262626; --line-strong:#737373;
  --ink:#ffffff; --ink-muted:#a3a3a3;
  --flame:#ff9f1c; --flame-ink:#ffb347; --flame-dim:#3a2400; --on-flame:#000000;
  --focus:#ff9f1c; --success:#4ade80; --danger:#ff6b6b;
  --glow:drop-shadow(0 0 32px rgba(255,159,28,.35));
  --r-sm:8px; --r-md:14px; --r-lg:24px; --r-xl:30px; --r-pill:999px;
  --sans:"LN Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* the phone and the paper keep their own colours in both themes: a dark phone, a light page of paper */
  --ph-bg:#000000; --ph-raised:#0d0d0d; --ph-inset:#161616; --ph-line:#262626; --ph-ink:#ffffff; --ph-muted:#a3a3a3;
  --paper:#f3f5f8; --paper-line:#d5dbe4; --paper-ink:#000000; --paper-muted:#4a5568;
  box-sizing:border-box;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --surface:#f3f5f8; --raised:#ffffff; --inset:#e6eaf0; --line:#d5dbe4; --line-strong:#5b6678;
    --ink:#000000; --ink-muted:#4a5568; --flame-ink:#b35400; --flame-dim:#ffe8c2; --focus:#000000; --success:#15803d; --danger:#c62828;
    --glow:drop-shadow(0 8px 24px rgba(0,0,0,.12));
  }
}
:root[data-theme="light"]{
  --surface:#f3f5f8; --raised:#ffffff; --inset:#e6eaf0; --line:#d5dbe4; --line-strong:#5b6678;
  --ink:#000000; --ink-muted:#4a5568; --flame-ink:#b35400; --flame-dim:#ffe8c2; --focus:#000000; --success:#15803d; --danger:#c62828;
  --glow:drop-shadow(0 8px 24px rgba(0,0,0,.12));
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:26px;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img,svg,video{max-width:100%}
p{margin:0}
h1,h2,h3{margin:0;font-family:var(--sans);font-weight:700}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-64px;z-index:60;background:var(--flame);color:var(--on-flame);padding:12px 20px;border-radius:var(--r-md);font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:min(1120px,100% - 48px);margin:0 auto}
@media (min-width:1200px){.wrap{width:min(1120px,100% - 128px)}}

/* type scale of the pack */
.eyebrow{font-size:12px;line-height:16px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-muted)}
.xl{font-size:clamp(44px,10vw,64px);line-height:1;letter-spacing:-.03em;font-weight:700}
h2,.display{font-size:clamp(30px,5.4vw,40px);line-height:1.1;letter-spacing:-.02em;font-weight:700}
h3,.sub{font-size:18px;line-height:26px;font-weight:600}
.lede{font-size:18px;line-height:28px;color:var(--ink-muted);max-width:34em}
.small{font-size:14px;line-height:22px}
.wm i{font-style:normal;color:var(--flame-ink)}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:600 16px/1 var(--sans);text-decoration:none;cursor:pointer;transition:border-color .2s,background .2s,opacity .2s}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--flame);border-color:var(--flame);color:var(--on-flame)}
.btn.primary:hover{opacity:.9}
.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn svg{flex:none}

/* navigation */
nav.top{position:fixed;inset:0 0 auto 0;z-index:40;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid transparent;transition:border-color .3s}
nav.top.scrolled{border-bottom-color:var(--line)}
nav.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:64px}
.logo{display:inline-flex;align-items:center;gap:8px;text-decoration:none;height:48px}
.logo img{height:32px;width:32px}
.logo .wm{font-size:20px;line-height:1;font-weight:700;letter-spacing:-.02em}
.navlinks{display:flex;gap:32px;font-size:14px;line-height:22px;font-weight:600}
.navlinks a{text-decoration:none;color:var(--ink-muted)}
.navlinks a:hover{color:var(--ink)}
.navbtn{min-height:40px;padding:0 16px;font-size:14px}
@media (max-width:820px){.navlinks{display:none}}
.brand-light{display:block}.brand-dark{display:none}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .brand-dark{display:block}:root:not([data-theme="light"]) .brand-light{display:none}}
:root[data-theme="dark"] .brand-dark{display:block}:root[data-theme="dark"] .brand-light{display:none}

/* hero */
.hero{position:relative;padding:calc(64px + clamp(48px,10vh,112px)) 0 clamp(64px,10vh,112px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
.hero h1{margin-top:24px}
.hero h1 .xl{display:block}
.hero h1 .tag{display:block;margin-top:16px;font-size:clamp(30px,5.4vw,40px);line-height:1.1;letter-spacing:-.02em;font-weight:700;max-width:14em}
.hero .lede{margin-top:24px}
.actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.status{margin-top:32px;font-size:14px;line-height:22px;color:var(--ink-muted);display:flex;align-items:center;gap:12px}
.flame-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--flame);flex:none}
.flame-dot.live{animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(.72);opacity:.65}}
.hero-mark{position:relative;justify-self:center;width:min(100%,360px);aspect-ratio:1}
.hero-mark > div{position:absolute;inset:0}
.hero-mark img{width:100%;height:100%}
.hero-mark .glowlayer{filter:var(--glow);animation:glow 4.8s ease-in-out infinite}
@keyframes glow{50%{opacity:.55}}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:32px}
  .hero-mark{order:-1;width:160px;justify-self:start}
}

/* sections */
section.block{position:relative;padding:clamp(72px,12vh,128px) 0}
section.block + section.block{border-top:1px solid var(--line)}
.head{max-width:none}
.head h2{max-width:20em}
.head .eyebrow{display:block;margin-bottom:16px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:clamp(40px,7vw,96px);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.specs{margin-top:40px;border-top:1px solid var(--line);max-width:34em}
.specs div{display:flex;justify-content:space-between;gap:24px;padding:16px 0;border-bottom:1px solid var(--line);font-size:16px}
.specs span:first-child{color:var(--ink-muted)}
.specs span:last-child{font-weight:600;text-align:right}

/* where a question goes */
.paths{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px}
@media (max-width:760px){.paths{grid-template-columns:1fr}}
.path{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px}
.path.on{border-color:var(--flame)}
.path .eyebrow{display:block;margin-bottom:24px}
.path.on .eyebrow{color:var(--flame-ink)}
.path svg{display:block;width:100%;height:auto;max-height:150px;margin-bottom:24px;color:var(--ink-muted)}
.path.on svg{color:var(--ink)}
.path p{color:var(--ink-muted)}
.path .trail{stroke-dasharray:2 12;animation:trail 1.4s linear infinite}
@keyframes trail{to{stroke-dashoffset:-28}}

/* phone demo */
.chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.chip{min-height:44px;padding:0 16px;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:400 14px/1 var(--sans);cursor:pointer;transition:border-color .2s,background .2s}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--flame-dim);border-color:var(--flame)}
.phone{position:relative;width:100%;max-width:380px;aspect-ratio:9/18.5;margin:0 auto;border-radius:44px;background:var(--ph-bg);border:2px solid var(--line-strong);overflow:hidden;color:var(--ph-ink);display:flex;flex-direction:column}
.phone .sb{display:flex;justify-content:space-between;align-items:center;padding:20px 28px 8px;font-size:14px;line-height:22px;font-weight:600}
.phone .sb span:last-child{display:flex;align-items:center;gap:8px;color:var(--ph-muted);font-weight:400;font-size:12px}
.phone .hd{display:flex;align-items:center;gap:12px;padding:12px 24px 16px;border-bottom:1px solid var(--ph-line)}
.phone .hd b{display:block;font-size:18px;line-height:22px;font-weight:700;letter-spacing:-.02em}
.phone .hd small{display:flex;align-items:center;gap:8px;color:var(--ph-muted);font-size:12px;line-height:16px}
.phone .msgs{flex:1;padding:16px;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:22px;overflow:hidden}
.m{max-width:86%;padding:12px 16px;border-radius:var(--r-md);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.m.show{opacity:1;transform:none}
.m.u{align-self:flex-end;background:var(--ph-inset)}
.m.a{align-self:flex-start;background:var(--ph-raised);border:1px solid var(--ph-line);min-height:48px;white-space:pre-line}
.caret{display:inline-block;width:8px;height:16px;background:var(--flame);vertical-align:-3px;margin-left:2px;border-radius:2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.meta{font-size:12px;line-height:16px;color:var(--ph-muted);align-self:flex-start;padding-left:4px;opacity:0;transition:opacity .3s}
.meta.show{opacity:1}
.phone .composer{margin:0 12px 16px;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border:1px solid var(--ph-line);border-radius:var(--r-lg);background:var(--ph-raised);color:var(--ph-muted);font-size:14px}
.phone .composer span{flex:1}
.phone .composer i{width:36px;height:36px;border-radius:50%;background:var(--flame);display:grid;place-items:center;flex:none}
.phone .composer svg{display:block}

/* files */
.doc{position:relative;background:var(--paper);border-radius:var(--r-lg);padding:32px 32px 28px;color:var(--paper-ink);max-width:420px;margin:0 auto;width:100%;border:1px solid var(--line)}
.doc .t{height:16px;width:56%;background:var(--paper-ink);border-radius:4px;margin-bottom:12px}
.doc .pg{font-size:12px;line-height:16px;color:var(--paper-muted);margin-bottom:24px}
.doc .ln{height:10px;border-radius:3px;background:var(--paper-line);margin-bottom:16px;transition:background .4s}
.doc .ln.hit{background:var(--flame)}
.doc .scan{position:absolute;left:0;right:0;height:2px;background:var(--flame);opacity:0;top:70px}
.qa{margin-top:32px;display:grid;gap:12px;max-width:34em}
.q{text-align:left;min-height:48px;padding:12px 16px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:transparent;color:var(--ink);font:400 16px/24px var(--sans);cursor:pointer;transition:border-color .2s,background .2s}
.q:hover{border-color:var(--ink)}
.q[aria-pressed="true"]{background:var(--flame-dim);border-color:var(--flame)}
.answer{margin-top:24px;min-height:96px;padding:16px 24px;border-radius:var(--r-md);background:var(--raised);border:1px solid var(--line);max-width:34em}
.answer small{display:block;margin-top:8px;color:var(--ink-muted);font-size:14px;line-height:22px}

/* private */
#private{text-align:center}
.bigmark{position:relative;width:min(200px,50vw);aspect-ratio:1;margin:0 auto 40px}
.bigmark img{width:100%;height:100%;filter:var(--glow)}
#private h2{max-width:14em;margin:0 auto}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:64px;text-align:left}
.facts > div{background:var(--raised);border:1px solid var(--line);border-radius:var(--r-md);padding:24px}
.facts h3{margin-bottom:8px}
.facts p{color:var(--ink-muted)}
@media (max-width:820px){.facts{grid-template-columns:1fr}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin:48px 0 0;padding:0;counter-reset:s}
.steps li{list-style:none;border-top:1px solid var(--line-strong);padding-top:24px}
.steps li::before{counter-increment:s;content:counter(s);display:block;font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.02em;color:var(--flame-ink);margin-bottom:16px}
.steps p{color:var(--ink-muted);margin-top:8px}
.steps.four{grid-template-columns:repeat(4,1fr);margin-top:48px}
.steps.four h3{font-size:18px}
@media (max-width:1000px){.steps.four{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
@media (max-width:620px){.steps.four{grid-template-columns:1fr}}

/* download (live variant only) */
.dl-lede{margin-top:24px}
.dl-second{margin-top:96px}
.dlcard{margin-top:40px;max-width:680px;padding:clamp(24px,3vw,32px);border-radius:var(--r-lg);background:var(--raised);border:1px solid var(--line)}
.dlbtn{min-height:56px;font-size:18px;padding:0 32px}
.dlcard .specs{margin-top:24px;max-width:none}
.hash{margin-top:24px}
.hash span{display:block;color:var(--ink-muted);font-size:14px;line-height:22px;margin-bottom:8px}
.hash code{display:block;font:400 14px/22px var(--mono);overflow-wrap:anywhere;word-break:break-all;user-select:all}

/* faq */
.faq{margin-top:48px;border-top:1px solid var(--line);max-width:800px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:24px 48px 24px 0;font-size:18px;line-height:26px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;border-radius:50%;border:2px solid var(--ink-muted);transform:translateY(-50%);transition:background .25s,border-color .25s}
.faq details[open] summary::after{background:var(--flame);border-color:var(--flame)}
.faq .ans{padding:0 0 24px;color:var(--ink-muted);max-width:40em}

/* final */
.final{position:relative;padding:clamp(88px,14vh,160px) 0;border-top:1px solid var(--line)}
.final .bigmark{margin:0 0 40px;width:min(140px,40vw)}
.final h2{max-width:14em}
.final .actions{margin-top:32px}

/* footer */
footer{border-top:1px solid var(--line);padding:32px 0 40px;color:var(--ink-muted);font-size:14px;line-height:22px}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
footer .fl{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
footer .flink{color:var(--ink-muted);text-underline-offset:3px}
footer .flink:hover,footer .flink[aria-current]{color:var(--ink)}

/* privacy policy page */
.policy{padding:calc(64px + clamp(48px,9vh,96px)) 0 clamp(72px,12vh,128px)}
.policy h1{font-size:clamp(34px,6vw,64px);line-height:1;letter-spacing:-.03em;max-width:12em}
.policy .eff{margin-top:24px;color:var(--ink-muted)}
.policy .pol{max-width:40em;padding:24px 0;border-top:1px solid var(--line);font-size:16px;line-height:26px}
.policy .pol.first{margin-top:40px;border-top:0;padding-top:0;font-size:18px;line-height:28px}
.policy .pol:last-child{border-bottom:1px solid var(--line)}
.policy .pol strong{font-weight:600}
.policy a{text-underline-offset:3px;color:var(--flame-ink)}

/* community token section (drawn only when a token is published; see scripts/web-token.sh) */
section.tokenband{padding:clamp(56px,9vh,96px) 0;border-top:1px solid var(--line)}
.tk-title{font-size:clamp(26px,4.4vw,40px);max-width:20ch}
.tk-row{margin-top:32px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;max-width:780px;padding:12px 12px 12px 24px;border-radius:var(--r-md);background:var(--raised);border:1px solid var(--line)}
.tk-ca{flex:1 1 300px;min-width:0;font:400 14px/22px var(--mono);overflow-wrap:anywhere;word-break:break-all;user-select:all}
.tk-copy{flex:none;min-height:44px;padding:0 24px;font-size:14px}
.tk-links{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px}
.tk-links .btn{font-size:14px;min-height:44px;padding:0 16px}

/* reveal on scroll (only when the script is running) */
.js .rv{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .flame-dot.live,.hero-mark .glowlayer,.caret,.path .trail{animation:none}
  .m,.meta{transition:none}
}