/* LensLog site design system — shared by every page.
   Theming is pure CSS media queries (no JS), so there is no flash of the
   wrong scheme by construction; `color-scheme` + theme-color meta keep the
   UA chrome (scrollbars, form controls, Safari tab bar) in sync. */

:root{
  color-scheme: light dark;
  --iris:#3A6B8A;
  --iris-deep:#2B5069;
  --iris-light:#9DBACC;
  --maxw:1060px;

  --bg:#F7F5F1;
  --raise:#FFFFFF;
  --text:#16232B;
  --muted:#4E5E69;
  --soft:#74838D;
  --border:#E0E7EB;
  --accent:#2B5069;
  --band-bg:#16232B;
  --band-text:#F5EDEB;
  --band-muted:#B9C6CE;
  --btn-bg:#16232B;
  --btn-text:#FFFFFF;
  --btn-hover:#2B5069;
  --shadow:0 12px 32px rgba(10,20,28,.12);
  --ring-track:#DCE5EA;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0D161D;
    --raise:#14202A;
    --text:#ECF2F6;
    --muted:#A3B4BF;
    --soft:#7E8F9A;
    --border:#223240;
    --accent:#8FB6CE;
    --band-bg:#081117;
    --band-text:#ECF2F6;
    --band-muted:#A3B4BF;
    --btn-bg:#ECF2F6;
    --btn-text:#0D161D;
    --btn-hover:#C6D9E5;
    --shadow:0 12px 32px rgba(0,0,0,.45);
    --ring-track:#223240;
  }
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  font-family:"Instrument Sans",system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:3px solid var(--iris);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:"Spline Sans Mono",ui-monospace,monospace}

/* Skip link (a11y): visually hidden until focused. */
.skip{
  position:absolute;left:-999px;top:12px;z-index:10;
  background:var(--raise);color:var(--text);padding:10px 16px;border-radius:8px;
  box-shadow:var(--shadow);text-decoration:none;font-weight:600;
}
.skip:focus{left:12px}

/* ---------- nav ---------- */
nav.site{padding:24px 0}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:21px;letter-spacing:-.02em}
.wordmark svg{width:26px;height:26px}
.wordmark svg .outline{stroke:currentColor}
nav.site .links{display:flex;gap:26px;font-size:15px}
nav.site .links a{text-decoration:none;color:var(--text);opacity:.72;transition:opacity .12s ease}
nav.site .links a:hover,nav.site .links a[aria-current="page"]{opacity:1}

/* ---------- type ---------- */
h1{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(42px,6.4vw,72px);font-weight:700;line-height:1.02;
  letter-spacing:-.028em;
}
h1 em{font-style:normal;color:var(--iris)}
@media (prefers-color-scheme: dark){ h1 em{color:var(--iris-light)} }
.h2{
  font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(26px,3.4vw,34px);
  font-weight:600;letter-spacing:-.02em;
}
.eyebrow{font-family:"Spline Sans Mono",monospace;font-size:13px;letter-spacing:.14em;
  color:var(--accent);text-transform:uppercase}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--btn-bg);color:var(--btn-text);text-decoration:none;
  font-weight:600;font-size:17px;padding:15px 28px;border-radius:999px;
  transition:background .15s ease, transform .15s ease;
}
.btn:hover{background:var(--btn-hover);transform:translateY(-1px)}

/* ---------- hero ---------- */
.hero .wrap{
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;
  padding-top:36px;padding-bottom:68px;
}
.hero .wrap > *{min-width:0}
.yours .wrap > *{min-width:0}
.hero h1{margin:16px 0 22px}
.hero p.lede{font-size:19px;max-width:30em;color:var(--muted);margin-bottom:30px}
.cta-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.cta-row .alt{font-size:15px}

.fineprint{
  font-family:"Spline Sans Mono",monospace;font-size:12.5px;letter-spacing:.08em;
  color:var(--soft);margin-top:22px;
}

/* ---------- phone frames (devices.css, scaled) ----------
   The frame is a fixed 428×868 box shrunk with transform:scale(--s).
   Transforms don't change layout size, so the wrapper must compensate BOTH
   dimensions — width too, or the 428px layout box sets the grid's
   min-content and phones get sideways scroll (QA finding 2026-07-02). */
.phone-hero{display:flex;justify-content:center;min-width:0}
.phone-scale{
  --s:.68;
  /* Origin top LEFT: with the wrapper sized to 428×868 × --s, scaling the
     428px content from the left edge makes it exactly fill the wrapper.
     (top center would scale around the SHRUNKEN wrapper's midline and shove
     the render right by (428·s/2)(1−s) — the off-center QA follow-up.) */
  transform:scale(var(--s));transform-origin:top left;
  width:calc(428px*var(--s));height:calc(868px*var(--s));
}
.device .device-screen{object-fit:cover}
@media (max-width:1024px){ .phone-scale{--s:.58} }
@media (max-width:820px){ .phone-scale{--s:.5} }
@media (max-width:380px){ .phone-scale{--s:.42} }

/* ---------- feature rows (each paired with its screenshot) ---------- */
.features{background:var(--raise);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.features .wrap{padding-top:76px;padding-bottom:56px}
.features .sub{color:var(--muted);margin:8px 0 10px;max-width:38em}
.feature{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;
  padding:46px 0;border-bottom:1px solid var(--border);min-width:0;
}
.feature:last-of-type{border-bottom:none}
.feature.flip .feature-copy{order:2}
.rx-label{
  font-family:"Spline Sans Mono",monospace;font-size:13px;letter-spacing:.12em;
  color:var(--accent);display:block;margin-bottom:10px;
}
.feature h3{font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(21px,2.6vw,26px);
  font-weight:600;letter-spacing:-.015em;margin-bottom:10px}
.feature p{font-size:16.5px;color:var(--muted);max-width:26em}
.feature-phone{--s:.52}
@media (max-width:820px){
  .feature{grid-template-columns:1fr;gap:26px;padding:38px 0}
  .feature.flip .feature-copy{order:0}
  .feature-phone{--s:.44}
}

/* ---------- learn band (education explorers) ---------- */
.learn .wrap{
  padding-top:72px;padding-bottom:72px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;
}
.learn .wrap > *{min-width:0}
.learn p{color:var(--muted);max-width:30em;margin:12px 0 18px}
.learn .sample-line{
  font-family:"Spline Sans Mono",monospace;font-size:12.5px;letter-spacing:.08em;
  color:var(--soft);
}
.learn .sample-line b{color:var(--accent);font-weight:500}
@media (max-width:820px){
  .learn .wrap{grid-template-columns:1fr;gap:26px}
}

/* ---------- make it yours ---------- */
.yours{background:var(--raise);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.yours .wrap{padding-top:72px;padding-bottom:72px;display:grid;
  grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center}
.yours p{color:var(--muted);max-width:30em;margin:12px 0 26px}
.swatches{display:flex;gap:14px;flex-wrap:wrap}
.swatch{
  width:44px;height:44px;border-radius:50%;border:3px solid transparent;
  cursor:pointer;padding:0;background-clip:padding-box;
  transition:transform .12s ease,border-color .12s ease;
}
.swatch:hover{transform:scale(1.1)}
.swatch[aria-pressed="true"]{border-color:var(--accent);transform:scale(1.12)}
.swatch-name{font-family:"Spline Sans Mono",monospace;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft);margin-top:16px}
.yours .phone-scale{--s:.56}
#variant-img{transition:opacity .22s ease}
#variant-img.swapping{opacity:0}
@media (max-width:820px){
  .yours .wrap{grid-template-columns:1fr;gap:28px}
  .yours .phone-hero{order:2}
  .yours .phone-scale{--s:.46}
}

/* ---------- privacy band ---------- */
.privacy{background:var(--band-bg);color:var(--band-text)}
.privacy .wrap{padding-top:84px;padding-bottom:84px;text-align:center}
.privacy h2{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:clamp(30px,4.6vw,48px);font-weight:700;letter-spacing:-.025em;
  line-height:1.15;margin-bottom:20px;
}
.privacy h2 span{display:block}
.privacy p{max-width:36em;margin:0 auto 24px;color:var(--band-muted);font-size:17px}
.privacy .receipts{
  font-family:"Spline Sans Mono",monospace;font-size:12px;letter-spacing:.1em;
  color:var(--band-muted);opacity:.85;margin-bottom:28px;
}
.privacy a.policy{color:var(--iris-light);font-weight:500}

/* ---------- footer ---------- */
footer.site .wrap{padding:44px 24px 56px;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:14px;color:var(--soft)}
footer.site a{color:var(--muted);text-decoration:none}
footer.site a:hover{text-decoration:underline}
footer.site .disclaimer{max-width:44em;font-size:13px;margin-top:10px}

/* ---------- prose pages (privacy / support / 404) ---------- */
.prose{max-width:720px;margin:0 auto;padding:32px 24px 80px}
.prose h1{font-size:clamp(32px,4.6vw,44px);margin-bottom:18px;line-height:1.1}
.prose h2{font-family:"Bricolage Grotesque",sans-serif;font-size:24px;font-weight:600;
  letter-spacing:-.015em;margin:44px 0 12px}
.prose h3{font-size:18px;font-weight:600;margin:28px 0 8px}
.prose p{margin:0 0 14px;color:var(--muted)}
.prose strong{color:var(--text)}
.prose ul,.prose ol{margin:0 0 16px 1.3em;color:var(--muted)}
.prose li{margin-bottom:6px}
.prose hr{border:none;border-top:1px solid var(--border);margin:36px 0}
.prose .card{background:var(--raise);border:1px solid var(--border);border-radius:14px;
  padding:22px 24px;margin:22px 0;box-shadow:var(--shadow)}

/* ---------- responsive hero ---------- */
@media (max-width:820px){
  .hero .wrap{grid-template-columns:1fr;gap:34px;padding-top:6px;padding-bottom:54px}
  .hero .phone-hero{order:-1}
  .rx-card{grid-template-columns:1fr}
  .rx-row:nth-child(odd){padding-right:0}
  .rx-row:nth-child(even){padding-left:0;border-left:none}
  nav.site .links{gap:18px}
}

/* ---------- motion: load choreography + scroll reveals ----------
   Hidden states only apply when JS marked <html class="js">, so content is
   never invisible without JS. Everything off under reduced motion. */
@media (prefers-reduced-motion: no-preference){
  .rise{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
  .rise.d1{animation-delay:.06s}.rise.d2{animation-delay:.12s}
  .rise.d3{animation-delay:.18s}.rise.d4{animation-delay:.24s}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  html.js .reveal{opacity:0;transform:translateY(18px);
    transition:opacity .55s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
  html.js .reveal.in{opacity:1;transform:none}
}