/* FIRST LIGHT — shared styles for the individual app landing pages. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --base:#14100E; --dawn:#1E1712; --ink-2:#241B14;
  --ink:#F4EDE1; --read:#C9BBA8; --dim:#8A7E6E; --accent:#E5A66B; --line:rgba(244,237,225,.13); --mx:26px;
}
html{scroll-behavior:smooth}
body{background:var(--base);color:var(--ink);font-family:'Spline Sans Mono',ui-monospace,monospace;-webkit-font-smoothing:antialiased;line-height:1.65;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}
.eyebrow{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--mx)}

/* folio */
.folio{display:flex;align-items:center;gap:14px;max-width:1080px;margin:0 auto;
  padding:max(18px,env(safe-area-inset-top)) var(--mx) 14px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.folio a{color:var(--dim);text-decoration:none;transition:color .2s}.folio a:hover{color:var(--ink)}
.folio .mark{color:var(--ink)}.folio .rule{flex:1;height:1px;background:var(--line)}

/* hero */
.app-hero{max-width:1080px;margin:0 auto;padding:30px var(--mx) 70px;display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.app-id{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.app-icon{width:74px;height:74px;border-radius:18px;flex:none;box-shadow:0 0 0 1px var(--line),0 10px 26px rgba(0,0,0,.5)}
.app-id h1{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz'90,'wght'560,'WONK'1;font-size:clamp(34px,6vw,52px);line-height:1;letter-spacing:-.01em}
.app-id .tagline{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-top:8px}
.lede{font-family:'Fraunces',serif;font-size:clamp(18px,3.4vw,23px);line-height:1.5;color:var(--read);margin-bottom:30px;max-width:24em}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.cta{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border:1px solid var(--line);border-radius:2px;text-decoration:none;color:var(--ink);font-size:11px;letter-spacing:.14em;text-transform:uppercase;transition:border-color .2s,background .2s,transform .2s}
.cta:hover{transform:translateY(-2px)}
.cta svg{width:14px;height:14px;flex:none}
.cta.primary{border-color:color-mix(in oklab,var(--accent) 60%,var(--line));background:color-mix(in oklab,var(--accent) 12%,transparent)}
.cta.primary:hover{border-color:var(--accent);background:color-mix(in oklab,var(--accent) 20%,transparent)}
.cta.ghost{color:var(--accent)}
/* hero screenshot — shown WHOLE, never cropped */
.app-hero-shot{display:flex;justify-content:center}
.app-hero-shot img{width:auto;max-width:100%;max-height:74vh;border-radius:22px;display:block;
  box-shadow:0 0 0 1px var(--line),0 30px 70px rgba(0,0,0,.55)}

/* sections */
.band{max-width:1080px;margin:0 auto;padding:64px var(--mx)}
.band-head{margin-bottom:34px}
.band-head .eyebrow{display:block;margin-bottom:12px}
.band-head h2{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz'72,'wght'540;font-size:clamp(26px,5vw,40px);line-height:1.06;letter-spacing:-.01em;max-width:16ch}
.band-head p{font-family:'Fraunces',serif;color:var(--read);font-size:17px;max-width:42ch;margin-top:14px;opacity:.9}

.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:16px}
.feature{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:5px;padding:22px}
.feature .fm{color:var(--accent);font-size:20px;margin-bottom:12px}
.feature h3{font-family:'Fraunces',serif;font-variation-settings:'opsz'40,'wght'560;font-size:20px;margin-bottom:7px}
.feature p{font-size:14px;color:var(--read);line-height:1.6;opacity:.92}

/* screenshots — full, uncropped */
.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.shot figure{margin:0}
.shot img{width:100%;height:auto;display:block;border-radius:18px;border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.45)}
.shot figcaption{font-family:'Fraunces',serif;font-style:italic;font-size:15px;color:var(--dim);text-align:center;margin-top:12px}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px}
.pillar h3{font-family:'Fraunces',serif;font-variation-settings:'opsz'40,'wght'560;font-size:19px;color:var(--ink);margin-bottom:7px}
.pillar p{font-size:14px;color:var(--read);opacity:.92}

.pricing{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:6px;padding:34px;text-align:center}
.pricing strong{font-family:'Fraunces',serif;font-variation-settings:'opsz'48,'wght'560;font-size:30px;display:block;margin-bottom:10px}
.pricing p{color:var(--read);font-size:15px;opacity:.9}

.final-cta{max-width:1080px;margin:0 auto;text-align:center;padding:80px var(--mx);border-top:1px solid var(--line)}
.final-cta h2{font-family:'Fraunces',Georgia,serif;font-variation-settings:'opsz'72,'wght'540;font-size:clamp(26px,5.4vw,42px);line-height:1.1;margin-bottom:28px;max-width:20ch;margin-left:auto;margin-right:auto}
.final-cta .cta-row{justify-content:center}

footer{border-top:1px solid var(--line);text-align:center;padding:34px var(--mx) 80px;color:var(--dim);font-size:10px;letter-spacing:.06em}
footer a{color:var(--dim);text-decoration:none;margin:0 9px;text-transform:uppercase;letter-spacing:.14em;font-size:9px}
footer a:hover{color:var(--accent)}
footer .col{margin-top:14px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}

@media(max-width:780px){
  .app-hero{grid-template-columns:1fr;gap:36px;padding-bottom:50px}
  .app-hero-shot{order:-1}
  .app-hero-shot img{max-height:62vh}
}