:root {
  --ground: #07090C;
  --text: #ECE8E1;
  --muted: #8C93A0;
  --soft: #A9AFB9;
  --paper: #0F1217;
  --line: #22272F;
  --line-strong: #3A414D;
  --signal: #64D8E8;
  --amber: #F2B544;
  --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --hand: 'Caveat', 'Bradley Hand', cursive;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, ol, figure, pre { margin: 0; }
ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
code, pre { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 4px; border-radius: 4px; }

.wrap { width: min(1120px, 100% - 48px); margin-inline: auto; }
.hand { font-family: var(--hand); font-weight: 400; }
.amber-text { color: var(--amber); }
.cyan-text { color: var(--signal); }
.caps { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

h2 {
  font-weight: 400;
  font-size: clamp(40px, 5.2vw, 64px);
  line-height: 1.07;
  letter-spacing: -0.025em;
}
h2 em { font-style: italic; }
.lead { font-size: 21px; line-height: 32px; color: var(--soft); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 16px 34px;
  border-radius: 999px;
  background: var(--text);
  color: var(--ground);
  font-size: 22px;
  font-weight: 500;
  transition: transform 0.15s ease, background 0.15s ease;
}
.button:hover { transform: translateY(-1px); background: #fff; }
.button.ghost { background: transparent; color: var(--text); border: 1.5px solid var(--line-strong); }
.button.ghost:hover { border-color: var(--muted); }

/* Nav */
.nav { display: flex; align-items: center; justify-content: space-between; padding-block: 40px; }
.wordmark { display: flex; align-items: center; gap: 12px; font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
.nav nav { display: flex; gap: 40px; }
.nav nav a { transition: color 0.15s ease; }
.nav nav a:hover { color: var(--signal); }
.nav-beta { display: none; }

/* Device frame shared by every phone screen */
.device {
  padding: 10px;
  border-radius: 58px;
  border: 2px solid var(--line-strong);
  background: var(--paper);
  width: 414px;
  max-width: 100%;
}
.device img { width: 100%; border-radius: 48px; }
.tilt-right { transform: rotate(2.5deg); }

/* Hero */
.hero { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding-block: 48px 120px; }
.definition { width: 600px; max-width: 100%; }
h1 { display: inline-flex; flex-direction: column; gap: 6px; font-weight: 400; }
.word { font-size: clamp(76px, 10vw, 120px); line-height: 0.93; letter-spacing: -0.035em; }
.underline { width: 330px; max-width: 100%; height: 14px; }
.phonetic { font-size: 24px; font-style: italic; color: var(--muted); padding-top: 18px; }
.senses { display: flex; flex-direction: column; gap: 22px; padding-top: 44px; counter-reset: sense; }
.senses li { display: flex; gap: 22px; font-size: 27px; line-height: 38px; counter-increment: sense; }
.senses li::before { content: counter(sense) "."; font-family: var(--hand); font-size: 30px; color: var(--amber); width: 22px; flex-shrink: 0; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 28px; padding-top: 56px; }
.then { display: inline-flex; align-items: center; gap: 12px; }
.then .hand { font-size: 26px; color: var(--muted); }
.then code { font-size: 17px; padding: 8px 12px; border: 1px solid #2A303B; border-radius: 8px; }
.hero-phone { position: relative; flex-shrink: 0; }
.note-hero {
  position: absolute; left: -250px; top: 560px; width: 240px;
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 28px; line-height: 30px; color: var(--amber); text-align: right;
}

/* How it works */
.how { border-top: 1px solid var(--line); padding-block: 80px 140px; display: flex; flex-direction: column; gap: 72px; }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 48px; }
.section-head h2 { max-width: 740px; }
.section-head .lead { max-width: 340px; }
.diagram { display: flex; align-items: flex-start; justify-content: space-between; padding-left: 80px; padding-bottom: 150px; }
.node { display: flex; flex-direction: column; align-items: center; gap: 18px; flex-shrink: 0; }
.label { font-size: 26px; }
.mini-phone {
  width: 130px; height: 230px; border: 2px solid var(--text); border-radius: 24px; background: var(--ground);
  padding: 22px 12px; display: flex; flex-direction: column;
}
/* The app's Sessions screen in small: serif title, hairline rows, mono caps status words. */
.mini-title { font-size: 22px; line-height: 26px; padding-bottom: 8px; }
.mini-row { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.mini-row b { font-family: system-ui, -apple-system, sans-serif; font-size: 12px; font-weight: 600; line-height: 16px; }
.mini-row i { font-style: normal; font-family: var(--mono); font-size: 9px; line-height: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.mini-row i.amber-text { color: var(--amber); }
.mini-row i.cyan-text { color: var(--signal); }
/* The phone box is 230px tall, so its middle is at 115px: the lock and wires line up with it. */
.wire { flex: 1; min-width: 40px; margin: 114px 22px 0; border-top: 2px dashed var(--muted); opacity: 0.8; }
.wire-cyan { border-color: var(--signal); }
.node-lock { position: relative; margin-top: 71px; }
.lock { width: 88px; height: 88px; border: 2px solid var(--text); border-radius: 50%; display: grid; place-items: center; }
.lock-notes { position: absolute; top: 112px; left: 50%; transform: translateX(-50%); width: 260px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lock-notes .caps { font-size: 12px; letter-spacing: 0.12em; }
.notes { font-size: 26px; line-height: 30px; text-align: center; }
.node-computer { margin-top: 17px; }
.window { width: 320px; border: 2px solid var(--text); border-radius: 14px; }
.window-bar { display: flex; gap: 7px; padding: 12px 14px; border-bottom: 1px solid #2A303B; }
.window-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.window pre { font-size: 13px; line-height: 24px; padding: 14px 18px 18px; overflow-x: auto; }

/* Screens */
.screens-head { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; padding-top: 40px; }
.fan { position: relative; width: 1120px; height: 1080px; margin: 40px auto 0; }
.fan .device { position: absolute; }
.fan-left { left: 20px; top: 110px; transform: rotate(-7deg); }
.fan-right { left: 690px; top: 110px; transform: rotate(7deg); }
.fan-center { left: 355px; top: 40px; border-color: #4A525F; z-index: 1; }
.captions { display: flex; justify-content: space-between; gap: 40px; padding-block: 40px 160px; }
.captions > div { max-width: 320px; display: flex; flex-direction: column; gap: 10px; }
.captions h3 { font-size: 28px; font-weight: 500; line-height: 1.2; }
.captions p { color: var(--muted); line-height: 30px; }

/* Features */
.features { border-top: 1px solid var(--line); padding-block: 100px 160px; display: flex; flex-direction: column; gap: 72px; }
.columns { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 64px 40px; }
.columns article { flex: 0 1 calc((100% - 80px) / 3); max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.columns h3 { font-size: 26px; font-weight: 500; padding-top: 12px; line-height: 1.2; }
.columns p { font-size: 19px; line-height: 29px; color: var(--soft); }
.columns .hand { font-size: 24px; }

/* Setup */
.setup { display: flex; justify-content: space-between; align-items: center; gap: 56px; padding-block: 40px 180px; }
.setup-copy { width: 440px; display: flex; flex-direction: column; gap: 26px; }
.steps { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.steps li { display: flex; gap: 16px; align-items: baseline; }
.steps span { font-family: var(--mono); font-size: 13px; color: var(--signal); width: 24px; flex-shrink: 0; }
.steps code { font-size: 0.85em; }
.setup-card {
  position: relative; width: 580px; max-width: 100%;
  transform: rotate(1.5deg);
  border: 2px solid var(--text); border-radius: 6px; background: var(--paper);
  padding: 36px 40px 40px; display: flex; flex-direction: column; gap: 22px;
}
.tape { position: absolute; left: 50%; top: -16px; width: 140px; height: 30px; margin-left: -70px; background: rgba(242, 181, 68, 0.18); transform: rotate(-2deg); }
.setup-card pre { font-size: 15px; line-height: 26px; overflow-x: auto; }
.qr-row { display: flex; align-items: center; gap: 28px; }
.qr { flex-shrink: 0; color: var(--text); }
.qr-text { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 15px; color: var(--muted); }
.card-note { position: absolute; right: 32px; bottom: -44px; font-size: 26px; }
/* Add a computer: the same card; real CLI lines are long, so they wrap like a terminal. */
.add-card pre { white-space: pre-wrap; }
/* The app's Settings → Found on your network, as it looks: caps heading with the live dot, a hairline row, a bone Add pill. */
.found { width: 420px; max-width: 100%; }
.found-head { display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.found-head::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--signal); }
.found-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.found-row > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.found-row b { font-family: system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 22px; font-weight: 600; }
.found-row span:not(.found-add) { font-family: var(--mono); font-size: 13px; line-height: 18px; color: var(--muted); }
.found-add {
  display: inline-flex; align-items: center; height: 38px; padding-inline: 18px; border-radius: 999px;
  background: var(--text); color: var(--ground); font-family: system-ui, -apple-system, sans-serif; font-size: 15px; font-weight: 600; line-height: 18px;
}

/* Providers: the same copy and card as Setup; the card shows the app's herdr list, and below it one tile for each provider. */
.providers { padding-bottom: 140px; }
.providers .setup { padding-bottom: 110px; }
.provider-card { width: 520px; gap: 0; }
.provider-list { display: flex; flex-direction: column; gap: 14px; }
.provider-list .caps { font-size: 12px; letter-spacing: 0.12em; line-height: 16px; }
.provider-project { display: flex; align-items: center; gap: 12px; padding: 6px 0 12px; border-bottom: 1px solid var(--line); }
.provider-project b { flex: 1; font-family: system-ui, -apple-system, sans-serif; font-size: 19px; line-height: 24px; font-weight: 600; }
.provider-plus { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 16px; font-family: system-ui, -apple-system, sans-serif; font-size: 18px; line-height: 20px; }
.provider-row { display: flex; align-items: center; gap: 12px; padding-left: 20px; }
.provider-row > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); }
.provider-row b { font-size: 15px; line-height: 20px; font-weight: 400; overflow-wrap: anywhere; }
.provider-row > div span { font-size: 12px; line-height: 16px; color: var(--muted); }
.provider-list .provider-done { color: var(--text); }
.provider-list .amber-text { color: var(--amber); }
.provider-push { margin-top: 8px; padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 16px; display: flex; flex-direction: column; gap: 3px; }
.provider-push p:last-child { font-family: system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 22px; font-weight: 600; }
.provider-tiles-head { padding-bottom: 20px; }
.provider-tiles { display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 0; list-style: none; }
.provider-tile { display: flex; align-items: center; gap: 18px; width: 360px; max-width: 100%; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); color: var(--text); text-decoration: none; transition: border-color 0.15s ease; }
.provider-tiles li { max-width: 100%; }
a.provider-tile:hover, a.provider-tile:focus-visible { border-color: var(--signal); }
.provider-tile img, .provider-slot { width: 64px; height: 64px; border-radius: 14px; flex-shrink: 0; }
.provider-tile > span:not(.provider-slot):not(.provider-arrow) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.provider-tile b { font-family: system-ui, -apple-system, sans-serif; font-size: 20px; line-height: 26px; font-weight: 600; }
.provider-tile b + span { font-size: 17px; line-height: 22px; color: var(--muted); }
.provider-arrow { font-family: system-ui, -apple-system, sans-serif; font-size: 22px; color: var(--signal); }
.provider-tile.later { background: none; border: 1px dashed var(--line-strong); color: var(--muted); }
.provider-slot { display: inline-flex; align-items: center; justify-content: center; border: 1px dashed var(--line-strong); font-family: system-ui, -apple-system, sans-serif; font-size: 26px; }

/* Closing and footer */
.closing { display: flex; flex-direction: column; align-items: center; gap: 36px; padding-block: 40px 120px; text-align: center; }
.closing > .hand { font-size: 40px; line-height: 52px; max-width: 720px; }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding-top: 12px; }
.footer { display: flex; flex-direction: column; gap: 32px; padding-bottom: 64px; }
.footer-line { width: 100%; height: 12px; }
.footer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 18px; }
.footer-mark { display: flex; align-items: center; gap: 10px; color: var(--muted); }
.footer nav { display: flex; flex-wrap: wrap; gap: 32px; }
.footer nav a:hover { color: var(--signal); }

/* The fan needs 1120px; narrower screens swipe through the phones instead. */
@media (max-width: 1180px) {
  .fan {
    width: auto; height: auto; margin-top: 48px;
    display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 12px 24px 24px; scrollbar-width: none;
  }
  .fan::-webkit-scrollbar { display: none; }
  .fan .device { position: static; transform: none; flex: 0 0 min(340px, 74vw); scroll-snap-align: center; box-shadow: none; }
  .fan-center { order: -1; }
}

@media (max-width: 980px) {
  body { font-size: 18px; }
  .nav nav { gap: 24px; }
  .nav nav a:not(.nav-beta, .nav-docs) { display: none; }
  .nav-beta { display: inline; color: var(--signal); }
  .hero { flex-direction: column; align-items: flex-start; padding-bottom: 96px; gap: 64px; }
  .hero-phone { align-self: center; width: min(414px, 86vw); }
  .note-hero { position: static; width: auto; align-items: center; text-align: center; margin-bottom: 8px; }
  .note-hero svg { transform: rotate(60deg); width: 60px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .section-head .lead { max-width: 560px; }
  .how { padding-block: 64px 96px; gap: 56px; }
  .diagram { flex-direction: column; align-items: center; padding: 0; }
  .wire { flex: none; width: 0; height: 56px; min-width: 0; margin: 12px 0; border-top: 0; border-left: 2px dashed var(--muted); }
  .wire-cyan { border-color: var(--signal); }
  .node-lock, .node-computer { margin-top: 0; }
  .node-lock { display: flex; flex-direction: column; align-items: center; gap: 14px; }
  .lock-notes { position: static; transform: none; width: auto; }
  .window { width: min(320px, 100%); }
  .captions { flex-direction: column; gap: 32px; padding-block: 32px 96px; }
  .captions > div { max-width: 560px; }
  .features { padding-block: 72px 96px; gap: 48px; }
  .columns { flex-wrap: wrap; gap: 48px 32px; }
  .columns article { max-width: none; flex: 1 1 calc(50% - 16px); }
  .setup { flex-direction: column; align-items: stretch; gap: 64px; padding-bottom: 140px; }
  .setup-copy { width: auto; }
  .setup-card { transform: rotate(0.8deg); align-self: center; }
  .footer-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .wrap { width: calc(100% - 40px); }
  .nav { padding-block: 24px; }
  .wordmark { font-size: 22px; }
  .senses li { font-size: 22px; line-height: 32px; gap: 16px; }
  .phonetic { font-size: 20px; }
  .cta { padding-top: 40px; }
  .button { width: 100%; font-size: 20px; }
  .lead { font-size: 19px; line-height: 29px; }
  .columns article { flex-basis: 100%; }
  .setup-card { padding: 28px 20px 28px; }
  .setup-card pre { font-size: 11px; line-height: 21px; }
  .qr-row { gap: 18px; }
  .qr { width: 84px; height: 84px; }
  .qr-text { font-size: 13px; }
  .card-note { right: 12px; font-size: 22px; }
  .closing > .hand { font-size: 32px; line-height: 42px; }
  .closing-actions { width: 100%; flex-direction: column; gap: 14px; }
  .footer nav { gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button { transition: none; }
}