/* ChannelThem site styles
   Palette: lock-screen grey ground, message-bubble blue, notification yellow.
   Type: Bricolage Grotesque (display), Figtree (body), JetBrains Mono (timestamps, labels, numbers). */
:root {
  --bg: #eef0f5;
  --bg-2: #e2e5ee;
  --surface: #ffffff;
  --ink: #0e1220;
  --ink-2: #3a4157;
  --ink-3: #5a6178;
  --line: #d3d8e3;
  --accent: #2f5bff;
  --accent-ink: #ffffff;
  --accent-text: #2447e0;
  --notify: #ffd84d;
  --notify-ink: #0e1220;
  --bubble-in: #e4e7ef;
  --phone: #0e1220;
  --phone-caption: #8a93ab;
  /* One green, two uses, both literal: the user's own bubbles in the demo,
     because this is SMS and not iMessage, and the "Now texting" pulse. Both
     mean the same thing, that this works over text right now. Green never
     appears anywhere else. Brand blue stays on the buttons and the headline. */
  --sms: #2fae4e;
  --sms-rgb: 47, 174, 78;
  --radius: 20px;
  --max: 1120px;
  --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b0e17;
    --bg-2: #121726;
    --surface: #171d2e;
    --ink: #eef0f5;
    --ink-2: #b9c0d3;
    --ink-3: #8a93ab;
    --line: #262d42;
    --accent: #3d5cf5;
    --accent-text: #8fa6ff;
    --bubble-in: #262d42;
    --phone: #000000;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0b0e17;
  --bg-2: #121726;
  --surface: #171d2e;
  --ink: #eef0f5;
  --ink-2: #b9c0d3;
  --ink-3: #8a93ab;
  --line: #262d42;
  --accent: #3d5cf5;
  --accent-text: #8fa6ff;
  --bubble-in: #262d42;
  --phone: #000000;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; font-optical-sizing: auto; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 16px; }

/* Header */
.site-header { padding-block: 18px; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 700 19px/1 var(--display); letter-spacing: -0.008em; }
.brand img { width: 28px; height: 28px; }

.header-cta { font: 600 13px/1 var(--mono); text-decoration: none; padding: 10px 14px; border: 1.5px solid var(--ink); border-radius: 999px; white-space: nowrap; }
.header-cta:hover { background: var(--ink); color: var(--bg); }

/* Type */
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1 {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(46px, 5.4vw, 74px); line-height: 1.04; letter-spacing: -0.02em;
  font-variation-settings: "opsz" 96, "wdth" 100;
}
h1 .bubble {
  display: inline-block; margin-top: 0.08em;
  background: var(--accent); color: var(--accent-ink);
  padding: 0.04em 0.22em 0.12em; border-radius: 0.38em 0.38em 0.38em 0.09em;
  font-weight: 700;
  /* Cancel the bubble's own left padding so the G sits on the same optical
     line as the C above it, rather than indented by the bubble. */
  margin-left: -0.22em;
}
h2 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 4.6vw, 48px); line-height: 1.1; letter-spacing: -0.015em;
  font-variation-settings: "opsz" 48, "wdth" 100;
}
h3 { font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.25; letter-spacing: -0.006em; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 12px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 18px;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.lede-hook {
  margin: 30px 0 0; max-width: 34ch;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(20px, 2.05vw, 25px); line-height: 1.3; letter-spacing: -0.01em;
  font-variation-settings: "opsz" 32, "wdth" 100;
  color: var(--ink); text-wrap: balance;
}
.lede { font-size: clamp(16.5px, 1.75vw, 18px); color: var(--ink-2); max-width: 44ch; margin: 16px 0 0; line-height: 1.55; }
/* Phone-only line break. Hidden from 720px up, where the space that sits
   beside it still holds, so the sentence reads normally on desktop. */
.br-mobile { display: inline; }
@media (min-width: 720px) { .br-mobile { display: none; } }
.lede-em { color: var(--ink); font-weight: 600; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--mono); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 10px 26px; border-radius: 999px; border: 0;
  background: var(--accent); color: var(--accent-ink);
  font: 700 19px/1.15 var(--sans); text-decoration: none; cursor: pointer; text-align: center;
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 20px; height: 20px; flex: none; }
/* JetBrains Mono gives the space a full monospace advance, which leaves a
   visible gap after the area code. Pull it back to a proportional width. */
.btn .num { font-family: var(--mono); font-weight: 600; font-size: 0.9em; white-space: nowrap; word-spacing: -0.28em; }
.btn-dark { background: var(--ink); color: var(--bg); }

/* Hero */
.hero { padding-block: 16px 72px; }
.hero .wrap { display: grid; gap: 48px; align-items: center; }
@media (min-width: 920px) { .hero .wrap { grid-template-columns: minmax(0, 1.15fr) minmax(350px, 0.85fr); gap: 56px; } .hero { padding-block: 48px 112px; } }
.cta-block { margin-top: 40px; }
.cta-sub { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); }
.cta-sub a { font-weight: 700; color: var(--accent-text); text-decoration: none; }
.cta-sub a:hover { text-decoration: underline; }
.disclosure {
  margin: 26px 0 0; max-width: 52ch; padding-top: 20px;
  border-top: 1px solid var(--line);
  display: grid; gap: 9px;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-3);
}
.disclosure p { margin: 0; }
.disclosure a { color: var(--ink-2); text-underline-offset: 2px; }
.disclosure b { font: 600 11.5px var(--mono); letter-spacing: .04em; color: var(--ink-2); }

/* Phone mock */
.phone {
  margin: 0; justify-self: center; width: 100%; max-width: 336px;
  background: var(--phone); border-radius: 46px; padding: 11px 11px 14px;
  box-shadow: 0 40px 70px -34px rgba(14, 18, 32, .55);
  transform: rotate(1.5deg);
}
.screen { background: var(--surface); border-radius: 36px; overflow: hidden; }
.screen-top { text-align: center; padding: 18px 12px 10px; border-bottom: 1px solid var(--line); }
.avatar { width: 42px; height: 42px; border-radius: 50%; margin: 0 auto 5px; background: var(--ink); color: var(--bg); display: grid; place-items: center; font: 800 17px var(--display); }
.screen-top strong { display: block; font-size: 13px; }
.screen-top span { font-size: 11px; color: var(--ink-3); }
.thread { padding: 10px 12px 16px; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; font-size: 14px; line-height: 1.38; height: 398px; overflow: hidden; }
.stamp { align-self: center; font: 500 10.5px var(--mono); color: var(--ink-3); margin: 10px 0 3px; }
.msg { max-width: 82%; padding: 8px 12px; border-radius: 19px; }
.msg.in { align-self: flex-start; background: var(--bubble-in); color: var(--ink); border-bottom-left-radius: 6px; }
.msg.out { align-self: flex-end; background: var(--sms); color: #ffffff; border-bottom-right-radius: 6px; }
.checkin { align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 3px; background: var(--notify); color: var(--notify-ink); font: 600 10.5px/1 var(--mono); padding: 5px 9px; border-radius: 999px; }
.delivered { align-self: flex-end; font: 500 10px var(--mono); color: var(--ink-3); }
.phone-caption { text-align: center; font: 500 11px var(--mono); color: var(--ink-3); margin: 16px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  /* Each line is appended when it is due, so it animates on arrival. The old
     nth-child delays stacked on top of that and made later messages lag. */
  .thread > * { animation: pop .26s cubic-bezier(.2, .8, .3, 1) both; }
  .msg.in  { transform-origin: left bottom; }
  .msg.out { transform-origin: right bottom; }
  @keyframes pop {
    from { opacity: 0; transform: translateY(9px) scale(.94); }
    to   { opacity: 1; transform: none; }
  }
  .typing { animation: pop .2s ease both; }
}

/* Legal pages */
.legal { padding-block: 32px 80px; }
.legal .wrap { max-width: 760px; }
.legal h1 { font-size: clamp(40px, 6vw, 60px); margin-bottom: 10px; }
.legal h2 { font-size: 23px; letter-spacing: -0.008em; margin: 44px 0 10px; }
.legal p, .legal li { color: var(--ink-2); }
.legal ul { padding-left: 22px; }
.legal .callout { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--notify); border-radius: 12px; padding: 16px 18px; margin: 24px 0; }
.legal .callout p { color: var(--ink); margin: 0; }

.center-page { min-height: 64vh; display: grid; place-items: center; text-align: center; padding-block: 48px; }
.center-page .eyebrow { justify-content: center; }
.center-page p:not(.eyebrow) { color: var(--ink-2); max-width: 44ch; margin: 18px auto 30px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .phone { transform: none; } }

/* Hero demo: channel switcher */
.hero-demo { justify-self: center; width: 100%; max-width: 350px; }
.switcher {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; margin: 0 auto 22px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
}
.switcher button {
  appearance: none; border: 0; background: transparent; color: var(--ink-2); cursor: pointer;
  font: 600 12px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  min-height: 38px; padding: 0 6px; border-radius: 999px; transition: background-color .15s ease, color .15s ease;
}
.switcher button:hover { color: var(--ink); }
.switcher button[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.hero-demo .phone { max-width: 336px; margin-inline: auto; }
.notch { display: block; width: 84px; height: 22px; margin: -8px auto 12px; background: var(--phone); border-radius: 999px; }
.typing { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: blink 1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: .15s; } .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .35; } 40% { opacity: 1; } }

/* Timeline: book vs Channel */
.timeline { margin: 0; }
.timeline figcaption { font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 22px; }
.tl-grid { display: grid; grid-template-columns: 88px 1fr; gap: 14px 16px; align-items: center; }
@media (min-width: 720px) { .tl-grid { grid-template-columns: 120px 1fr; } }
.tl-label { font: 700 14px var(--display); }
.tl-lane { position: relative; height: 40px; border-radius: 10px; background: var(--surface); border: 1px solid var(--line); }
.tl-book { display: flex; align-items: center; }
.tl-block {
  width: 12.5%; min-width: 52px; height: 100%; display: grid; place-items: center;
  background: var(--ink); color: var(--bg); border-radius: 9px 0 0 9px; font: 600 11px var(--mono);
}
.tl-silence { flex: 1; margin-inline: 12px; font: 500 11px var(--mono); color: var(--ink-3); border-top: 1.5px dashed var(--line); padding-top: 2px; text-align: right; line-height: 0; }
.tl-channel { display: grid; grid-template-columns: repeat(24, 1fr); align-items: center; padding-inline: 6px; gap: 3px; }
.tl-channel i { height: 14px; border-radius: 4px; background: var(--accent); opacity: .85; }
.tl-channel i.c { height: 22px; background: var(--notify); opacity: 1; border-radius: 6px; }
.tl-ramp {
  display: flex; align-items: center; padding-inline: 12px;
  background: linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--accent) 35%, var(--surface)) 45%, var(--accent) 100%);
}
.tl-ramp span { font: 600 11px var(--mono); color: var(--ink); }
.tl-axis { display: grid; grid-template-columns: repeat(8, 1fr); font: 500 10.5px var(--mono); color: var(--ink-3); }
.tl-axis span { border-left: 1px solid var(--line); padding-left: 5px; }
.tl-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 18px 0 0; font-size: 13px; color: var(--ink-2); }
.tl-key span { display: inline-block; width: 14px; height: 10px; border-radius: 3px; margin-right: -12px; vertical-align: middle; }
.tl-key .k-talk { background: var(--accent); }
.tl-key .k-check { background: var(--notify); height: 14px; }


/* Header status */
.live { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--sms); box-shadow: 0 0 0 0 rgba(var(--sms-rgb), .5); }
@media (prefers-reduced-motion: no-preference) { .pulse { animation: pulse 2s infinite; } }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(var(--sms-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--sms-rgb), 0); } }

/* 2. Why */
.why { padding-block: 60px; border-top: 1px solid var(--line); background: var(--bg-2); }
.why h2 {
  font-size: clamp(36px, 6.6vw, 80px); line-height: 1.04; letter-spacing: -0.02em;
  font-weight: 800; font-variation-settings: "opsz" 96, "wdth" 100;
}
.why h2 span { display: block; }
.why h2 span:not(.hl) { color: var(--ink-3); }
.why h2 .hl { color: var(--ink); }
.why-body { display: grid; gap: 48px; margin-top: 56px; align-items: start; }
@media (min-width: 920px) { .why-body { grid-template-columns: 1fr 1fr; gap: 72px; } }
.why blockquote { margin: 0; max-width: 38ch; font: 400 clamp(20px, 2.2vw, 24px)/1.45 var(--display); letter-spacing: -0.01em; }
.why blockquote p { margin: 0 0 1em; }
.why blockquote footer { font: 700 15px var(--sans); margin-top: 22px; }

/* 3. Begin */
.begin { padding-block: 60px; background: var(--accent); color: #ffffff; }

/* 96px of section padding is desktop spacing. On a phone it reads as dead
   space between the last thing you looked at and the next one. */
@media (min-width: 720px) { .why, .begin { padding-block: 96px; } }
.begin .wrap { display: grid; gap: 40px; align-items: center; }
@media (min-width: 920px) { .begin .wrap { grid-template-columns: 1.1fr 0.9fr; gap: 72px; } }
.begin h2 { font-size: clamp(40px, 6vw, 72px); line-height: 1.04; letter-spacing: -0.02em; font-weight: 800; max-width: 13ch; }
.begin-copy p { font-size: 19px; margin: 22px 0 0; color: rgba(255, 255, 255, .88); }
.begin-copy p:last-of-type { margin-bottom: 32px; }
.begin-copy .room-cast { margin-top: 24px; color: #ffffff; }
.begin-copy .begin-why { font-size: 21px; font-weight: 500; margin-bottom: 14px; color: #ffffff; }
.btn-light { background: #ffffff; color: #0e1220; }
.begin .form-card { color: var(--ink); }
.form-card { background: var(--surface); border-radius: 26px; padding: 28px; box-shadow: 0 30px 60px -30px rgba(14, 18, 32, .45); }
.form-title { font: 700 22px/1.2 var(--display); letter-spacing: -0.008em; margin: 0 0 20px; }
.field label { display: block; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.field input[type="tel"] {
  width: 100%; min-height: 56px; padding: 0 16px; font: 500 19px var(--mono);
  color: var(--ink); background: var(--bg); border: 1.5px solid var(--line); border-radius: 14px;
}
.field input[type="tel"]:focus { outline: none; border-color: var(--accent); }
.consent { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 22px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.consent input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--accent); }
.form-card .btn { width: 100%; }
.hidden { position: absolute !important; left: -9999px !important; }
.begin :focus-visible { outline-color: #ffffff; }
.begin .form-card :focus-visible { outline-color: var(--accent); }

/* Footer */
.site-footer { padding-block: 28px 40px; font-size: 13px; color: var(--ink-3); }
.footer-row { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; }
/* 62ch forced the disclaimer onto a third line. 82ch lets it sit on one line
   below the copyright on desktop, and it still wraps freely on a phone. */
.footer-row > span { max-width: 82ch; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.site-footer a { text-decoration: none; color: var(--ink-2); }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }

/* Memory card */
.why-side { display: grid; gap: 28px; }
.memory {
  background: var(--surface); border: 1px solid var(--line); border-radius: 22px;
  padding: 22px 24px; box-shadow: 0 24px 50px -38px rgba(14, 18, 32, .45);
}
.memory-head { margin: 0 0 12px; font: 500 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.memory-lead { margin: 0 0 16px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.memory ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.memory li { display: flex; gap: 12px; align-items: baseline; padding-block: 10px; border-top: 1px dashed var(--line); font-size: 16.5px; }
.memory li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translateY(-1px); }
.memory-note { margin: 12px 0 0; font: 500 11px var(--mono); color: var(--ink-3); }