/* ==================================================================
   Theo public site (withtheo.ai). Plain CSS, no build step.

   The look is Theo Console's glass theme (2026-09-25): blue and white
   light behind frosted sheets, solid white cards, ink buttons, Geist in
   weights 400 to 600. Colour, radius and glass values below are copied
   from the console's design tokens (colors.css, glass.css, elevation.css);
   the names are kept so a value can be traced back. Dark mode follows the
   visitor's system setting and keeps the same blue family.
   ================================================================== */

/* Geist, latin, variable weight. SIL Open Font License 1.1, see
   fonts/OFL.txt. Self-hosted: no page view is announced to a font CDN. */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/assets/fonts/Geist-latin-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;

  /* The glass ramp (console colors.css) */
  --ink:          #0B1526;
  --navy:         #17345C;
  --blue-700:     #22508E;
  --blue-600:     #2F6DB5;
  --blue-500:     #3F86D6;
  --blue-400:     #6FA8E8;
  --blue-300:     #A7CBF3;
  --blue-200:     #CFE3FA;
  --blue-100:     #E6F0FC;
  --ice:          #F4F8FD;
  --canvas-glass: #EAF1F9;
  --white:        #FFFFFF;
  --ink-hover:    #1E2D48;

  /* Radii (console elevation.css) */
  --radius-row:    8px;
  --radius-button: 9px;
  --radius-field:  10px;
  --radius-card:   12px;

  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --dur-hover: 120ms;

  /* ---- Roles, light ---- */
  --text:        var(--ink);
  --text-body:   rgba(11, 21, 38, .78);
  --text-2:      rgba(11, 21, 38, .68);
  --text-muted:  rgba(11, 21, 38, .60);
  --link:        var(--blue-600);
  --link-line:   rgba(47, 109, 181, .35);
  --link-hover:  var(--blue-500);
  --hair:        rgba(11, 21, 38, .08);
  --page:
    radial-gradient(520px 420px at 12% 8%, rgba(118, 176, 240, .40), rgba(118, 176, 240, 0)),
    radial-gradient(480px 380px at 92% 16%, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)),
    radial-gradient(560px 420px at 80% 96%, rgba(64, 128, 210, .16), rgba(64, 128, 210, 0)),
    var(--canvas-glass);
  --sheet-bg:     rgba(255, 255, 255, .84);
  --sheet-border: rgba(255, 255, 255, .85);
  --sheet-shadow: 0 1px 2px rgba(28, 48, 88, .05), 0 24px 70px rgba(28, 48, 88, .10);
  --card-bg:      var(--white);
  --card-border:  var(--hair);
  --card-shadow:  0 1px 2px rgba(11, 21, 38, .04), 0 10px 28px rgba(28, 48, 88, .05);
  --well:         var(--blue-100);
  --note-bg:      var(--ice);
  --note-border:  rgba(47, 109, 181, .18);
  --btn-bg:       var(--ink);
  --btn-bg-hover: var(--ink-hover);
  --btn-bg-press: var(--navy);
  --btn-text:     var(--white);
  --btn-shadow:   inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 2px rgba(11, 21, 38, .18);
  --tonal-hover:  rgba(11, 21, 38, .05);
  --focus:        var(--blue-400);
  --focus-gap:    var(--white);
  --selection:    var(--blue-200);
  --glow:         rgba(111, 168, 232, .34);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text:        var(--canvas-glass);
    --text-body:   rgba(234, 241, 249, .84);
    --text-2:      rgba(234, 241, 249, .72);
    --text-muted:  rgba(234, 241, 249, .60);
    --link:        var(--blue-300);
    --link-line:   rgba(167, 203, 243, .40);
    --link-hover:  var(--white);
    --hair:        rgba(255, 255, 255, .10);
    --page:
      radial-gradient(560px 460px at 12% 6%, rgba(47, 109, 181, .46), rgba(47, 109, 181, 0)),
      radial-gradient(480px 380px at 94% 18%, rgba(63, 134, 214, .16), rgba(63, 134, 214, 0)),
      radial-gradient(620px 460px at 78% 98%, rgba(34, 80, 142, .40), rgba(34, 80, 142, 0)),
      var(--ink);
    --sheet-bg:     rgba(22, 40, 70, .62);
    --sheet-border: rgba(255, 255, 255, .10);
    --sheet-shadow: 0 1px 2px rgba(0, 0, 0, .30), 0 24px 70px rgba(0, 0, 0, .38);
    --card-bg:      rgba(255, 255, 255, .05);
    --card-border:  rgba(255, 255, 255, .10);
    --card-shadow:  0 1px 2px rgba(0, 0, 0, .20);
    --well:         rgba(111, 168, 232, .16);
    --note-bg:      rgba(111, 168, 232, .10);
    --note-border:  rgba(167, 203, 243, .22);
    --btn-bg:       var(--ice);
    --btn-bg-hover: var(--white);
    --btn-bg-press: var(--blue-200);
    --btn-text:     var(--ink);
    --btn-shadow:   inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 2px rgba(0, 0, 0, .3);
    --tonal-hover:  rgba(255, 255, 255, .08);
    --focus:        var(--blue-400);
    --focus-gap:    var(--ink);
    --selection:    rgba(111, 168, 232, .35);
    --glow:         rgba(111, 168, 232, .22);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--page);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--selection); }

/* The container owns the side gutters (padding-inline). Anything that is also a .wrap sets only padding-block,
   so a rule for vertical rhythm can never wipe the gutter. Max widths are content width plus both gutters. */
.wrap { width: 100%; max-width: 1088px; margin: 0 auto; padding-inline: 24px; }
.wrap--read { max-width: 848px; }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: var(--link-line);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: color var(--dur-hover) var(--ease-out), text-decoration-color var(--dur-hover) var(--ease-out);
}
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
a:focus-visible, .btn:focus-visible {
  outline: none;
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--focus-gap), 0 0 0 4px var(--focus);
}
.skip {
  position: absolute; left: 16px; top: -48px; z-index: 10;
  padding: 10px 14px; border-radius: var(--radius-button);
  background: var(--btn-bg); color: var(--btn-text); text-decoration: none; font-size: 14px; font-weight: 500;
}
.skip:focus { top: 12px; }

/* ---- Header ---- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 22px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text); text-decoration: none;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
}
.brand:hover { color: var(--text); }
.brand img { width: 30px; height: 30px; display: block; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav .nav-link {
  padding: 8px 12px; border-radius: var(--radius-button);
  color: var(--text-2); text-decoration: none; font-size: 14px; font-weight: 500;
  transition: background-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.site-nav .nav-link:hover { background: var(--tonal-hover); color: var(--text); }

/* ---- Buttons: ink, flat; quiet shows its outline on hover ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border: 1px solid transparent; border-radius: var(--radius-field);
  font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); box-shadow: var(--btn-shadow); }
.btn--primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-text); }
.btn--primary:active { background: var(--btn-bg-press); border-color: var(--btn-bg-press); }
.btn--quiet { background: transparent; color: var(--text); }
.btn--quiet:hover { background: var(--tonal-hover); border-color: var(--hair); color: var(--text); }
.btn--sm { height: 34px; padding: 0 14px; font-size: 13.5px; border-radius: var(--radius-button); }
.btn svg { width: 15px; height: 15px; flex: none; }

/* ---- Glass sheet and solid card ---- */
.sheet {
  background: var(--sheet-bg);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid var(--sheet-border);
  border-radius: 16px;
  box-shadow: var(--sheet-shadow);
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --sheet-bg: rgba(255, 255, 255, .95); }
  @media (prefers-color-scheme: dark) { :root { --sheet-bg: rgba(22, 40, 70, .94); } }
}
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: var(--card-shadow);
}

/* ---- Landing: hero ---- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  align-items: center; gap: 48px;
  padding-block: 48px 72px;
}
.hero h1 {
  margin: 0;
  font-size: clamp(34px, 5.6vw, 54px); font-weight: 600; line-height: 1.07; letter-spacing: -.028em;
  text-wrap: balance;
}
.lead {
  margin: 20px 0 0; max-width: 34em;
  font-size: clamp(17px, 2.2vw, 19px); line-height: 1.6; color: var(--text-2);
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.portrait {
  position: relative; display: grid; place-items: center;
  min-height: 330px; padding: 36px; overflow: hidden;
}
.portrait::before {
  content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--glow), rgba(111, 168, 232, 0));
}
.portrait img { position: relative; display: block; width: min(62%, 210px); height: auto; aspect-ratio: 1248 / 1480; }

/* ---- Landing: sections ---- */
.section { padding-block: 8px 64px; }
.section h2 {
  margin: 0 0 8px;
  font-size: clamp(23px, 3.6vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -.02em;
}
.section .intro { margin: 0 0 28px; max-width: 40em; color: var(--text-2); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cards .card { padding: 24px; }
.well {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; background: var(--well); color: var(--link);
}
.well svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.cards h3 { margin: 16px 0 6px; font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.cards p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-2); }

.data { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 40px; padding: 40px; }
.data h2 { margin-bottom: 12px; }
.data p { margin: 0; color: var(--text-2); }
.data p + p { margin-top: 12px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 30px; color: var(--text-body); font-size: 15.5px; }
.ticks li::before {
  content: ""; position: absolute; left: 4px; top: .42em; width: 11px; height: 6px;
  border-left: 2px solid var(--link); border-bottom: 2px solid var(--link);
  transform: rotate(-45deg);
}
.fine { margin-top: 18px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }
.data .fine { grid-column: 1 / -1; margin: 0; padding-top: 20px; color: var(--text-muted); border-top: 1px solid var(--hair); }

.cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 40px; }
.cta h2 { margin: 0 0 4px; font-size: 22px; }
.cta p { margin: 0; color: var(--text-2); }

/* ---- Policy pages ---- */
.doc { padding-block: 8px 64px; }
.doc .sheet { padding: 44px 48px 48px; }
.doc h1 { margin: 0; font-size: clamp(27px, 4.4vw, 34px); font-weight: 600; line-height: 1.18; letter-spacing: -.022em; }
.doc .sub { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); }
.doc .sub + p { margin-top: 22px; }
.doc h2 { margin: 38px 0 10px; font-size: 19px; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; scroll-margin-top: 20px; }
.doc h3 { margin: 22px 0 6px; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -.005em; }
.doc p, .doc li { margin: 0; font-size: 15.5px; line-height: 1.68; color: var(--text-body); }
.doc p + p { margin-top: 12px; }
.doc ul, .doc ol { margin: 0; padding-left: 22px; }
.doc li + li { margin-top: 9px; }
.doc li::marker { color: var(--text-muted); }
.doc h2 + ul, .doc h2 + ol, .doc h3 + ul, .doc p + ul, .doc p + ol { margin-top: 10px; }
.doc ul + p, .doc ol + p { margin-top: 12px; }
.doc b, .doc strong { font-weight: 600; color: var(--text); }
.doc .note {
  margin: 14px 0 0; padding: 16px 18px;
  background: var(--note-bg); border: 1px solid var(--note-border); border-radius: var(--radius-card);
}
.doc .note p { color: var(--text); }
.doc address { margin-top: 12px; font-style: normal; font-size: 15.5px; line-height: 1.68; color: var(--text-body); }

/* ---- Footer ---- */
.site-footer {
  margin-top: auto; padding: 30px 0 42px;
  border-top: 1px solid var(--hair);
  font-size: 13.5px; line-height: 1.6; color: var(--text-muted);
}
.site-footer .row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; }
.site-footer p { margin: 0; max-width: 34em; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.site-footer nav a { color: var(--text-2); text-decoration: none; }
.site-footer nav a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---- 404 ---- */
.lost { display: grid; place-items: center; flex: 1; padding-block: 24px 72px; }
.lost .sheet { width: 100%; max-width: 520px; padding: 44px 40px; text-align: center; }
.lost h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.lost p { margin: 10px 0 0; color: var(--text-2); }
.lost .actions { justify-content: center; }

/* ---- Phone width ---- */
@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-block: 28px 56px; }
  .portrait { min-height: 260px; }
  .portrait img { width: min(46%, 170px); }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .data { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 28px; }
  .cta { flex-direction: column; align-items: flex-start; padding: 28px; }
}
@media (max-width: 560px) {
  .wrap { padding-inline: 16px; }
  .site-header { padding-block: 16px; }
  .site-nav .nav-link { display: none; }
  .doc .sheet { padding: 28px 20px 32px; border-radius: 14px; }
  .doc h2 { margin-top: 32px; font-size: 18px; }
  .hero .actions .btn { flex: 1 1 auto; }
  .data { padding: 24px 20px; }
  .cta { padding: 24px 20px; }
  .lost .sheet { padding: 32px 22px; }
}

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