:root {
  --ink: #111114;
  --soft: #6b6b73;
  --paper: #fbfaf8;
  --blue: #0a84ff;
  --grey-bubble: #e9e9eb;
  --radius: 22px;
}

* { box-sizing: border-box; margin: 0; }

html { scroll-behavior: smooth; }

/* Inter 4, self-hosted so no font server sees a visitor. Its optical-size axis
   turns headings into Inter Display on its own. */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-optical-sizing: auto;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: var(--blue); }

/* Parallax: the image is taller than its frame and script.js slides it. */
.frame { position: relative; overflow: hidden; isolation: isolate; }
.frame > .bg {
  position: absolute; inset: -10% 0; z-index: -1;
  width: 100%; height: 120%; object-fit: cover;
  will-change: transform;
}
.frame::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
}

/* Hero */
.hero {
  min-height: 100svh; display: grid; place-items: center;
  text-align: center; color: #fff; padding: 6rem 1.5rem;
}
.hero .icon {
  width: 104px; height: 104px; border-radius: 24px; margin: 0 auto 1.6rem;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
}
.hero h1 { font-size: clamp(3rem, min(9vw, 10svh), 6.25rem); letter-spacing: -.03em; line-height: 1; }
.hero h2 { margin-top: 1.4rem; }
.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%; translate: -50% 0;
  color: #fff; opacity: .7; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(6px); } }

/* Text sections */
.section { padding: clamp(5rem, 12vw, 9rem) 1.5rem; }
/* Two split sections in a row read as one story: half the gap between them. */
.section + .section { padding-top: 0; }
.wrap { max-width: 1080px; margin: 0 auto; }
.eyebrow { color: var(--blue); font-weight: 600; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; }
h2 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); letter-spacing: -.02em; line-height: 1.08; margin: .6rem 0 .35rem; }
.lead { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--soft); max-width: 46ch; }

.split { display: grid; gap: 3.5rem; align-items: center; }
@media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } }

/* Chat mockup, like the app's own bubbles */
.phone {
  background: #fff; border-radius: 44px; padding: 2.2rem 1.1rem 1.6rem;
  box-shadow: 0 40px 80px rgba(20,20,40,.14), 0 0 0 10px #1b1b1f;
  max-width: 340px; margin: 0 auto; display: flex; flex-direction: column; gap: .45rem;
}
.phone .who { text-align: center; font-size: .78rem; color: var(--soft); margin-bottom: .6rem; }
.bubble {
  max-width: 78%; padding: .55rem .9rem; border-radius: 19px; font-size: .95rem; line-height: 1.3;
}
.bubble.in { background: var(--grey-bubble); align-self: flex-start; border-bottom-left-radius: 6px; }
.bubble.out { background: var(--blue); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.phone .read { align-self: flex-end; font-size: .72rem; color: var(--soft); }

/* Full-bleed image bands with a line of text */
.band { min-height: 85svh; display: grid; align-items: end; color: #fff; padding: 4rem 1.5rem; }
.band .wrap { width: 100%; }
.band h2 { max-width: 18ch; }
.band p { font-size: clamp(1.1rem, 2.2vw, 1.35rem); max-width: 40ch; opacity: .9; }
.band.left { align-items: center; }
.band.left .frame-text { max-width: 30rem; }

/* Feature cards */
.grid { display: grid; gap: 1.2rem; margin-top: 3rem; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: #fff; border-radius: var(--radius); padding: 1.8rem;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 12px 30px rgba(20,20,40,.06);
}
.card .glyph { font-size: 1.8rem; }
.card h3 { font-size: 1.15rem; margin: .7rem 0 .35rem; }
.card p { color: var(--soft); font-size: .98rem; }

/* Stats-like strip for the server section */
.facts { display: flex; flex-wrap: wrap; gap: 2.5rem; margin-top: 1.25rem; }
.facts strong { display: block; font-size: 2rem; letter-spacing: -.02em; }
.facts span { color: var(--soft); font-size: .95rem; }

.rounded { border-radius: 28px; box-shadow: 0 30px 70px rgba(20,20,40,.18); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }

/* Closing */
.closing { min-height: 90svh; display: grid; place-items: center; text-align: center; color: #fff; padding: 6rem 1.5rem; }
.closing p { font-size: clamp(1.1rem, 2.2vw, 1.35rem); max-width: 38ch; margin: 0 auto; opacity: .92; }
.button {
  display: inline-block; margin-top: 2rem; padding: .95rem 1.8rem; border-radius: 999px;
  background: #fff; color: var(--ink); font-weight: 600; text-decoration: none;
}

footer { padding: 2.5rem 1.5rem; text-align: center; color: var(--soft); font-size: .9rem; }
footer a { color: inherit; margin: 0 .6rem; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s ease, transform .9s ease; }
.reveal.seen { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-hint { animation: none; }
}

/* Privacy page */
.doc { max-width: 720px; margin: 0 auto; padding: 5rem 1.5rem; }
.doc h1 { font-size: 2.4rem; letter-spacing: -.03em; margin-bottom: .4rem; }
.doc h2 { font-size: 1.4rem; margin: 2.2rem 0 .6rem; letter-spacing: -.01em; }
.doc p, .doc li { margin-bottom: .7rem; }
.doc ul { padding-left: 1.2rem; }
.doc hr { border: 0; border-top: 1px solid #e3e3e6; margin: 4rem 0; }
.doc .back { display: inline-block; margin-bottom: 2rem; text-decoration: none; }

/* Same pair as the photo bands: bold heading, the lead size tight underneath. */
.hero p.sub { font-size: clamp(1.1rem, 2.2vw, 1.35rem); max-width: 40ch; margin: 0 auto; opacity: .9; }
.band.center { text-align: center; }
.band.center h2, .band.center p { margin-left: auto; margin-right: auto; }

/* On landscape screens a band follows the width, so a wide photo keeps its shape
   instead of being zoomed in until the people at its edges fall off. */
@media (min-aspect-ratio: 1/1) {
  .band, .closing { min-height: min(85svh, 46vw); }
  .band.center { min-height: min(85svh, 36vw); }
}
.band.center { padding-bottom: 1.75rem; }

/* Sign-up form on the closing photo */
.join-form { display: grid; gap: .7rem; max-width: 30rem; margin: 2rem auto 0; text-align: left; }
.join-form input, .join-form textarea {
  font: inherit; font-size: 1rem; padding: .85rem 1rem; border: 0; border-radius: 14px;
  color: var(--ink); background: rgba(255,255,255,.88);
}
.join-form textarea { resize: vertical; }
.join-form .button { margin-top: .3rem; border: 0; font: inherit; font-weight: 600; cursor: pointer; justify-self: center; }
.join-form .button:disabled { opacity: .6; cursor: default; }
.join-form .trap { position: absolute; left: -9999px; }
.closing .join-form .status { font-size: 1rem; text-align: center; min-height: 1.5em; margin: 0; }

/* Top right: FAQ and sign-up, always there. */
.nav { position: fixed; z-index: 10; top: max(1rem, env(safe-area-inset-top)); right: 1rem; display: flex; gap: .5rem; }
.nav a {
  padding: .55rem 1.1rem; border-radius: 999px; font-weight: 600; font-size: .95rem; text-decoration: none;
  color: var(--ink); background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.nav a.primary { background: var(--blue); color: #fff; }

/* FAQ */
.wrap.narrow { max-width: 760px; }
.faq { margin-top: 2.2rem; border-top: 1px solid #e3e3e6; }
.faq details { border-bottom: 1px solid #e3e3e6; padding: 1.1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; font-size: 1.12rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blue); font-weight: 400; font-size: 1.4rem; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--soft); margin-top: .6rem; max-width: 60ch; }

footer .small { max-width: 52ch; margin: 0 auto 1.2rem; font-size: .82rem; line-height: 1.5; }
footer .small a { margin: 0; }
footer span { margin: 0 .6rem; }
/* Logo and name sit together in the middle of the hero's big bubble, the words just
   under its lower edge, so the figure who speaks them stays in sight. The photo is
   120% of the hero high and cropped from the centre: the bubble's middle lands at
   24.8% from the top and its lower edge near 48%.
   shortcut: on screens wider than about 2.15:1 the photo crops top and bottom
   instead and the mark drifts off the bubble; fine until someone shows up with one. */
.hero { place-items: start center; padding: 0 1.5rem; }
.hero .mark { position: absolute; left: 50%; top: 24.8%; transform: translate(-50%, -50%); }
.hero .icon {
  width: clamp(64px, 11svh, 112px); height: clamp(64px, 11svh, 112px); border-radius: 22%;
  margin: 0 auto 1.5svh;
}
.hero .words { margin-top: 50svh; }
.hero h2 { font-size: clamp(1.9rem, min(5.5vw, 6svh), 3.6rem); margin-top: 0; }