:root {
  color-scheme: light;
  --cream: #faf6ee;
  --cream-deep: #f2ecdf;
  --ink: #191512;
  --ink-soft: #5f5850;
  --ink-faint: #948c81;
  --line: #e0d8c9;
  --orange: #e8500a;
  --orange-deep: #c44100;
  --orange-pale: #fceadf;
  --green: #1e7d54;
  --emerald: #34d399;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  overflow-x: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

.container {
  width: min(1140px, calc(100% - 44px));
  margin: 0 auto;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  border-bottom: 1px solid var(--line);
  background: rgba(250, 246, 238, 0.88);
  backdrop-filter: blur(16px);
}

.header-inner {
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  flex: none;
  font-size: 21px;
  font-weight: 900;
  letter-spacing: -0.75px;
  text-decoration: none;
}

.brand .dot {
  color: var(--emerald);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.header-nav a {
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.header-nav a:hover {
  color: var(--ink);
}

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.button:hover {
  transform: translateY(-1px);
}

.button-primary {
  background: var(--orange);
  color: #fff8f2;
  box-shadow: 0 12px 30px rgba(232, 80, 10, 0.28);
}

.button-primary:hover {
  background: var(--orange-deep);
}

.button-ghost {
  border-color: var(--ink);
  color: var(--ink);
}

.button-small {
  min-height: 40px;
  padding: 0 16px;
  font-size: 13px;
}

.header-nav .button-primary,
.header-nav .button-primary:hover {
  color: #fff8f2;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  padding: 92px 0 0;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.eyebrow::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  content: "";
}

.hero h1 {
  margin: 30px auto 0;
  max-width: 840px;
  font-size: clamp(48px, 6.6vw, 84px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.02;
}

.hero h1 em {
  color: var(--orange);
  font-style: normal;
}

.hero-lead {
  max-width: 560px;
  margin: 26px auto 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}

.hero-note {
  margin-top: 15px;
  color: var(--ink-faint);
  font-size: 13px;
}

.hero-shot {
  position: relative;
  max-width: 980px;
  margin: 58px auto 0;
}

.hero-shot::before {
  position: absolute;
  inset: auto -60px -2px;
  height: 55%;
  background: var(--cream-deep);
  border-radius: 28px 28px 0 0;
  content: "";
}

.app-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(25, 21, 18, 0.16);
  border-radius: 16px 16px 0 0;
  border-bottom: 0;
  background: #f4f4f5;
  box-shadow: 0 40px 90px rgba(46, 32, 20, 0.18);
}

/* The real app has no title bar: the window buttons sit on the window
   itself, left of the wordmark. Overlaid, not a bar above the image. */
.app-shell::before {
  position: absolute;
  z-index: 2;
  width: 60px;
  height: 34px;
  background:
    radial-gradient(circle at 15px 17px, #ff5f57 0 4.5px, transparent 5px),
    radial-gradient(circle at 29px 17px, #febc2e 0 4.5px, transparent 5px),
    radial-gradient(circle at 43px 17px, #28c840 0 4.5px, transparent 5px);
  content: "";
  left: 11px;
  top: 9px;
}

.live-chip {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: #f6efe4;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 16px 36px rgba(25, 21, 18, 0.3);
  right: -14px;
  top: 18px;
}

.live-chip::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4cd48e;
  content: "";
}

/* ---------- tools strip ---------- */

.tools {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--cream-deep);
}

.tools-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 34px;
  padding: 22px 0;
}

.tools-inner p {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.tools-inner span {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.015em;
  opacity: 0.72;
}

/* ---------- sections ---------- */

.section {
  padding: 100px 0;
}

.section-label {
  color: var(--orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.section-heading {
  max-width: 720px;
  margin-top: 14px;
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.04;
}

.section-heading em {
  color: var(--orange);
  font-style: normal;
}

.section-intro {
  max-width: 580px;
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.65;
}

/* ---------- steps ---------- */

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 52px;
}

.step-card {
  padding: 28px 26px 30px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf8;
}

.step-card > span {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--orange);
  line-height: 1;
}

.step-card h3 {
  margin-top: 18px;
  font-size: 18px;
  letter-spacing: -0.015em;
}

.step-card p {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- stories ---------- */

.story {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1.18fr);
  align-items: center;
  gap: 64px;
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.story:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.story:last-of-type {
  padding-bottom: 0;
}

.story-number {
  margin-bottom: 22px;
  color: var(--orange);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.story h3 {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 780;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.story-copy > p:not(.story-number) {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

.story-list {
  display: grid;
  gap: 9px;
  margin-top: 20px;
  list-style: none;
}

.story-list li {
  color: #45403a;
  font-size: 14px;
  font-weight: 600;
}

.story-list li::before {
  margin-right: 10px;
  color: var(--orange);
  content: "→";
  font-weight: 700;
}

.story-visual {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f4f4f5;
  box-shadow: 0 22px 60px rgba(46, 32, 20, 0.12);
}

.story-visual img {
  width: 100%;
}

.story-visual.crop {
  aspect-ratio: 1.45;
}

.story-visual.crop img {
  width: 156%;
  max-width: none;
}

/* ---------- forever (dark) ---------- */

.forever {
  background: var(--ink);
  color: #f6efe4;
}

.forever .section-label {
  color: #ff8a4d;
}

.forever .section-heading {
  max-width: 640px;
}

.forever .section-heading em {
  color: #ff8a4d;
}

.forever-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 76px;
}

.forever-copy p {
  max-width: 460px;
  margin-top: 20px;
  color: #b5aca0;
  font-size: 16px;
  line-height: 1.65;
}

.loop {
  display: grid;
  gap: 0;
  list-style: none;
  counter-reset: loop;
}

.loop li {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 18px;
  padding: 24px 0;
  border-top: 1px solid #383129;
  counter-increment: loop;
}

.loop li:last-child {
  border-bottom: 1px solid #383129;
}

.loop li::before {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ff8a4d;
  content: counter(loop, decimal-leading-zero);
  line-height: 1.4;
}

.loop strong {
  display: block;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.loop p {
  margin-top: 6px;
  color: #b5aca0;
  font-size: 14px;
  line-height: 1.6;
}

/* ---------- safety ---------- */

.safety-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 52px;
}

.safety-card {
  padding: 30px 26px 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fffdf8;
}

.safety-card.accent {
  border-color: rgba(232, 80, 10, 0.35);
  background: var(--orange-pale);
}

.safety-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ink);
  color: #f6efe4;
  font-size: 17px;
}

.safety-card.accent .safety-icon {
  background: var(--orange);
  color: #fff8f2;
}

.safety-card h3 {
  margin-top: 20px;
  font-size: 18px;
  letter-spacing: -0.015em;
}

.safety-card p {
  margin-top: 9px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.62;
}

/* ---------- details ---------- */

.details {
  border-top: 1px solid var(--line);
  background: var(--cream-deep);
}

.detail-layout {
  display: grid;
  grid-template-columns: 0.74fr 1.26fr;
  gap: 90px;
}

.detail-list {
  border-top: 1px solid var(--line);
}

.detail-row {
  display: grid;
  grid-template-columns: 56px 0.72fr 1.28fr;
  gap: 18px;
  padding: 23px 0;
  border-bottom: 1px solid var(--line);
}

.detail-row > span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--orange);
}

.detail-row h3 {
  font-size: 16px;
  letter-spacing: -0.015em;
}

.detail-row p {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.58;
}

/* ---------- faq ---------- */

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 48px;
}

details {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fffdf8;
}

summary {
  position: relative;
  padding: 19px 46px 19px 20px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}

summary::after {
  position: absolute;
  color: var(--orange);
  content: "+";
  font-size: 21px;
  font-weight: 500;
  right: 18px;
  top: 14px;
}

details[open] summary::after {
  content: "−";
}

details p {
  padding: 0 20px 19px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.62;
}

/* ---------- final cta ---------- */

.final-cta {
  padding: 30px 0 90px;
}

.cta-panel {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 44px;
  padding: 56px;
  border-radius: 24px;
  background: var(--orange);
  color: #fff8f2;
}

.cta-panel::after {
  position: absolute;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 242, 0.16), transparent 68%);
  content: "";
  right: -120px;
  top: -160px;
  pointer-events: none;
}

.cta-panel h2 {
  position: relative;
  max-width: 640px;
  font-size: clamp(34px, 4.6vw, 52px);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1.03;
}

.cta-panel h2 em {
  color: #ffd9c2;
  font-style: normal;
}

.cta-panel p {
  position: relative;
  max-width: 520px;
  margin-top: 16px;
  color: #ffd9c2;
  font-size: 15px;
  line-height: 1.6;
}

.cta-panel .button {
  position: relative;
  background: var(--ink);
  color: #f6efe4;
  box-shadow: none;
}

.cta-panel .button:hover {
  background: #000;
}

/* ---------- footer ---------- */

footer {
  padding: 28px 0 40px;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

footer p,
footer a {
  color: var(--ink-faint);
  font-size: 12.5px;
  text-decoration: none;
}

footer a:hover {
  color: var(--ink);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

/* Nine of them now, and a link that breaks in the middle reads as two. */
.footer-links a {
  white-space: nowrap;
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  .steps-grid,
  .safety-grid {
    grid-template-columns: 1fr;
  }

  .story {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .forever-grid,
  .detail-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

@media (max-width: 680px) {
  .container {
    width: min(100% - 30px, 1140px);
  }

  .header-inner {
    min-height: 62px;
  }

  .brand {
    font-size: 18px;
  }

  .header-nav a:not(.button) {
    display: none;
  }

  .header-nav .button {
    min-height: 38px;
    padding: 0 14px;
    font-size: 12.5px;
  }

  .hero {
    padding-top: 60px;
  }

  .hero h1 {
    font-size: clamp(44px, 13.4vw, 60px);
  }

  .hero-lead {
    font-size: 16.5px;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero-shot {
    margin-top: 42px;
  }

  .hero-shot::before {
    inset: auto -30px -2px;
  }

  .live-chip {
    right: 6px;
    top: 12px;
  }

  .app-shell img {
    width: 760px;
    max-width: none;
  }

  /* The image is fixed at 760px here, so the app's header row sits
     proportionally lower on screen than at full width. */
  .app-shell::before {
    left: 8px;
    top: 3px;
  }

  .section {
    padding: 74px 0;
  }

  .story {
    gap: 22px;
    padding: 52px 0;
  }

  .detail-row {
    grid-template-columns: 40px 1fr;
  }

  .detail-row p {
    grid-column: 2;
  }

  .faq-grid {
    grid-template-columns: 1fr;
  }

  .cta-panel {
    grid-template-columns: 1fr;
    align-items: start;
    padding: 36px 26px;
  }

  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }
}

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

  .button {
    transition: none;
  }
}

/* ---------- pages under the landing page ---------- */
/* One stylesheet for the whole site, so a page written next year looks like
   the ones written today. Everything above is the landing page's; everything
   here is what a page of prose needs and it did not: a crumb trail, a column
   narrow enough to read, and a heading scale that does not shout at 84px. */

.page-head {
  padding: 56px 0 0;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--cream-deep), var(--cream));
}

.page-head-inner {
  padding-bottom: 56px;
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--ink-faint);
  font-size: 13px;
  font-weight: 600;
}

.crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--orange);
}

.page-head h1 {
  max-width: 820px;
  margin-top: 16px;
  font-size: clamp(34px, 4.6vw, 54px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1.06;
}

.page-head h1 em {
  color: var(--orange);
  font-style: normal;
}

.page-lead {
  max-width: 660px;
  margin-top: 20px;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.65;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.prose {
  max-width: 740px;
}

.prose > h2 {
  margin-top: 56px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.prose > h2:first-child {
  margin-top: 0;
}

.prose h3 {
  margin-top: 32px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.prose p,
.prose li {
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.72;
}

.prose p {
  margin-top: 16px;
}

.prose ul,
.prose ol {
  margin-top: 16px;
  padding-left: 22px;
}

.prose li {
  margin-top: 10px;
}

.prose li::marker {
  color: var(--ink-faint);
}

.prose strong {
  color: var(--ink);
  font-weight: 700;
}

.prose a {
  color: var(--orange-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose figure {
  margin-top: 28px;
}

.prose figure img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 14px;
}

.prose figcaption {
  margin-top: 10px;
  color: var(--ink-faint);
  font-size: 14px;
}

.callout {
  margin-top: 28px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--orange);
  border-radius: 12px;
  background: var(--cream-deep);
}

.callout p {
  margin-top: 0;
}

.callout p + p {
  margin-top: 12px;
}

.table-wrap {
  margin-top: 24px;
  overflow-x: auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}

.prose th,
.prose td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
  text-align: left;
  vertical-align: top;
}

.prose th {
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}

.next-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: 26px;
}

.next-card {
  display: block;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fffdf8;
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.next-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
}

.next-card strong {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.next-card span {
  display: block;
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* The FAQ page is the one that wants the full width: its answers live in a
   two-column grid that was built for the landing page and reads badly squeezed
   into a reading column. */
.wide-body {
  max-width: none;
}

@media (max-width: 680px) {
  .page-head {
    padding-top: 34px;
  }

  .page-head-inner {
    padding-bottom: 40px;
  }

  .page-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .prose > h2 {
    margin-top: 44px;
  }
}

/* Seven links and a button fit in one row above 1080px and do not below it.
   The four guides are what goes: Features and How it works are where somebody
   starts, Questions is where they end up, and every page carries all eight in
   its footer whatever the width. */
/* The AI is the first thing in the row and the only one that is not a word in
   a line of words: it is the one thing in the app nothing else on this page
   does, and a menu is where somebody looks for it.
   
   A pale chip rather than a second solid button. The Download button is the
   filled one, and two filled pills in a 66px row is two things shouting; this
   one is the same family, quieter, and still nothing like the plain links.
   The mark is a sparkle rather than the app's own badge — that badge is a
   rounded square with "V&D." written inside it, which at 15px is a dark blob,
   and the label beside it already says whose AI this is. */
.header-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Violet, on a site that is orange everywhere else. The AI page is indigo and
   violet — the colour the app already uses for its own mark — and the chip is
   that page's name in the menu, so it wears that page's colour on all nine.
   Two accents on one site is a thing to do once and mean: this is the once,
   and it is the item that has to look like it belongs to something else. */
.nav-mark {
  width: 15px;
  height: 15px;
  flex: none;
  fill: #7c6df2;
  transition: transform 0.2s ease;
}

.header-nav .nav-ai {
  padding: 7px 13px 7px 10px;
  border: 1px solid rgba(99, 102, 241, 0.26);
  border-radius: 999px;
  background: linear-gradient(180deg, #f5f2ff, #ece7fe);
  color: #4f46e5;
  font-weight: 700;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}

.header-nav .nav-ai:hover {
  border-color: rgba(99, 102, 241, 0.55);
  box-shadow: 0 2px 14px rgba(99, 102, 241, 0.2);
  color: #4f46e5;
}

/* The one flourish, and only when somebody is pointing at it. */
.header-nav .nav-ai:hover .nav-mark {
  transform: rotate(18deg) scale(1.14);
}

@media (prefers-reduced-motion: reduce) {
  .nav-mark {
    transition: none;
  }

  .header-nav .nav-ai:hover .nav-mark {
    transform: none;
  }
}

/* Three thresholds, each measured rather than guessed. The four guides go
   first, then the three plain links, and the chip is the last thing standing
   before the row is the Download button alone — which is the point of having
   promoted it. */
@media (max-width: 1140px) {
  .header-nav .nav-guide {
    display: none;
  }
}

@media (max-width: 800px) {
  .header-nav a:not(.button):not(.nav-ai) {
    display: none;
  }
}

@media (max-width: 520px) {
  .header-nav .nav-ai {
    display: none;
  }
}