/* Gluline · /welcome — the page a paid click lands on.
 *
 * Shares the origin with the app, so it lives under the app's CSP:
 * default-src 'self', script-src 'self' + hashes, no CDN, no external fonts.
 * Everything here is self-contained by necessity, which is also why the type is
 * the platform's own stack rather than a webfont: one round trip, no FOUT, and
 * on the phone this page is actually read on it renders in San Francisco or
 * Roboto — faces built for exactly that screen at exactly that size.
 *
 * Colours are the product's, computed from the same oklch() sources as
 * web/next/web-glass.css. Committed strategy: teal carries the page.
 */

:root {
  color-scheme: light;
  --accent: oklch(0.64 0.12 195);
  --accent-2: oklch(0.57 0.13 215);
  --ink: oklch(0.24 0.025 220);
  --ink-2: oklch(0.46 0.025 220);
  --ink-3: oklch(0.6 0.02 220);
  --wall: oklch(0.97 0.008 200);
  --paper: oklch(1 0 0);
  --rule: oklch(0.88 0.012 210);
  --pos: oklch(0.55 0.11 160);
  --neg: oklch(0.58 0.14 30);

  /* One ratio, applied everywhere: 1.333. Flat scales read as uncommitted. */
  --t-hero: clamp(2.6rem, 7.4vw, 5.6rem);
  --t-sec: clamp(1.75rem, 3.6vw, 2.9rem);
  --t-lead: clamp(1.1rem, 1.9vw, 1.4rem);
  --t-body: 1.0625rem;
  --t-small: 0.9375rem;
  --t-label: 0.8125rem;

  /* Spacing varies on purpose: sections breathe, groups clamp together. */
  --gut: clamp(1.25rem, 5vw, 6rem);
  --band: clamp(3.5rem, 7vw, 6rem);
  --band-lg: clamp(4.5rem, 10vw, 8rem);

  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --accent: oklch(0.72 0.12 195);
    --accent-2: oklch(0.66 0.13 215);
    --ink: oklch(0.95 0.012 220);
    --ink-2: oklch(0.74 0.02 220);
    --ink-3: oklch(0.58 0.02 220);
    --wall: oklch(0.18 0.018 230);
    --paper: oklch(0.23 0.02 230);
    --rule: oklch(0.32 0.02 225);
    --pos: oklch(0.74 0.12 160);
    --neg: oklch(0.72 0.14 30);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--gut); }

/* ── masthead ─────────────────────────────────────────────────────────── */
.top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.5rem 0 0;
}
.mark { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; letter-spacing: -0.02em; font-size: 1.125rem; }
.mark svg { display: block; }
.top-links { display: flex; gap: 1.25rem; font-size: var(--t-small); }
.top a { color: var(--ink-2); text-decoration: none; }
.top a:hover { color: var(--accent); }

/* ── hero ─────────────────────────────────────────────────────────────── */
/* One sentence, set enormous, doing the whole job. No headline-plus-subhead-
   plus-button trio: that arrangement is the thing every competitor ships. */
.hero { padding: clamp(3.5rem, 9vw, 7rem) 0 var(--band); }
.hero h1 {
  margin: 0;
  font-size: var(--t-hero);
  line-height: 1.06;
  letter-spacing: -0.035em;
  font-weight: 800;
  max-width: 16ch;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--accent); }
.hero p {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1.05rem 2rem; border-radius: 1rem;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: oklch(1 0 0); text-decoration: none;
  font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em;
  box-shadow: 0 14px 34px -14px oklch(0.57 0.13 215 / 0.85);
  transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.cta:hover { transform: translateY(-2px); box-shadow: 0 20px 40px -14px oklch(0.57 0.13 215 / 0.9); }
.cta:active { transform: translateY(0); }
.cta-note { font-size: var(--t-small); color: var(--ink-3); max-width: 30ch; }

/* ── the device ───────────────────────────────────────────────────────── */
/* Deliberately offset and cropped by the viewport edge on wide screens: the
   product is a thing you hold, not a thing centred in a frame. */
.stage {
  position: relative;
  margin: clamp(2rem, 4vw, 3.5rem) calc(var(--gut) * -1) 0 0;
  display: flex; justify-content: flex-end;
  /* Cropped at the right edge on wide screens; whole on a phone. */
  overflow: hidden;
}
.stage svg { display: block; width: min(108%, 780px); height: auto; }
@media (max-width: 700px) {
  .stage { margin-right: calc(var(--gut) * -0.5); justify-content: center; }
  .stage svg { width: 122%; margin-right: 0; }
}

/* ── the ledger — the section this page exists for ────────────────────── */
.ledger { padding: var(--band-lg) 0; border-top: 1px solid var(--rule); }
.ledger h2, .does h2, .limits h2 {
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  font-size: var(--t-sec); line-height: 1.1; letter-spacing: -0.03em; font-weight: 750;
  max-width: 20ch; text-wrap: balance;
}
.cols { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 800px) { .cols { grid-template-columns: 1fr 1fr; } }

.col h3 {
  margin: 0 0 1.25rem;
  font-size: var(--t-label); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--ink-3);
}
.col ul { margin: 0; padding: 0; list-style: none; }
.col li {
  display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.75rem;
  padding: 0.8rem 0; border-top: 1px solid var(--rule);
  font-size: var(--t-small); line-height: 1.5;
}
.col li:first-child { border-top: 0; padding-top: 0; }
.col li b { font-weight: 600; color: var(--ink); }
.col li span { color: var(--ink-2); }
.tick { font-family: var(--mono); font-size: 1.05rem; line-height: 1.35; }
.sees .tick { color: var(--neg); }
.blind .tick { color: var(--pos); }

/* ── what it does — rows, not a card grid ─────────────────────────────── */
.does { padding: var(--band) 0; border-top: 1px solid var(--rule); }
.row {
  display: grid; gap: 0.4rem 2rem; padding: clamp(1.5rem, 3vw, 2.25rem) 0;
  border-top: 1px solid var(--rule); align-items: baseline;
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .row { grid-template-columns: 3rem 11rem 1fr; } }
.row:first-of-type { border-top: 0; }
.row .n { font-family: var(--mono); font-size: var(--t-small); color: var(--accent); }
.row h3 { margin: 0; font-size: 1.25rem; font-weight: 650; letter-spacing: -0.02em; }
.row p { margin: 0; color: var(--ink-2); max-width: 52ch; }

/* ── limits ───────────────────────────────────────────────────────────── */
.limits { padding: var(--band) 0; border-top: 1px solid var(--rule); }
.limits .body { max-width: 62ch; }
.limits p { margin: 0 0 1.1rem; color: var(--ink-2); }
.limits p:last-child { margin-bottom: 0; }
.limits strong { color: var(--ink); font-weight: 620; }

/* ── close ────────────────────────────────────────────────────────────── */
.close { padding: var(--band) 0 clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--rule); }
.close h2 { margin: 0 0 1.75rem; font-size: var(--t-sec); letter-spacing: -0.03em; font-weight: 750; max-width: 18ch; line-height: 1.1; }

footer { border-top: 1px solid var(--rule); padding: 2rem 0 3.5rem; font-size: var(--t-small); color: var(--ink-3); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }
footer a { color: var(--ink-2); text-decoration: none; }
footer a:hover { color: var(--accent); text-decoration: underline; }

a:focus-visible, .cta:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}