/* Ikora landing page. Tokens from the Ikora design system (DESIGN.md).
   Look: full-bleed statement hero, then alternating paper / navy bands, hairline rules, mono labels. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Public+Sans:wght@400;500;600;700&display=swap");

:root {
  --paper: #f6f7f9;
  --surface: #ffffff;
  --ink: #16202e;
  --ink-muted: #4a5568;
  --line: #d9dee5;
  --accent: #1f4e79;
  --accent-ink: #ffffff;
  --ok: #1e6b3a;
  --danger: #a4262c;
  --signal: #2b88f0;
  --signal-300: #9cc8ff;
  --signal-400: #5aa9ff;
  --gray-500: #626d7d;
  --blue-100: #d8e4ef;
  --blue-200: #b3c9de;
  --blue-700: #183e61;
  --blue-900: #0c1f33;
  --blue-950: #07131f;
  --font-sans: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius-sm: 4px;
  --tracking-wide: 0.025em;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 var(--font-sans);
}
a { color: var(--accent); }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 40px; }

/* Header: solid on inner pages; on landing pages it floats over the hero
   (.over-hero) and turns solid once the hero scrolls away (.is-solid). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: background-color 120ms cubic-bezier(.2,0,0,1), border-color 120ms cubic-bezier(.2,0,0,1);
}
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-block: 0.75rem; }
.logo { font-weight: 600; font-size: 1.25rem; letter-spacing: var(--tracking-wide); text-decoration: none; color: var(--accent); margin-right: auto; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 2rem; }
.site-header nav a { font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; text-underline-offset: 2px; }
.site-header nav a:hover { text-decoration: underline; }

.site-header.over-hero { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; }
.site-header.over-hero .wrap { max-width: none; padding: 22px 40px; }
.site-header.over-hero:not(.is-solid) .logo,
.site-header.over-hero:not(.is-solid) nav a { color: #fff; }
.site-header.over-hero:not(.is-solid) .button { background: #fff; color: var(--ink); }
.site-header.over-hero.is-solid { background: var(--surface); border-bottom-color: var(--line); }
.site-header.over-hero.is-solid .wrap { padding-block: 0.75rem; }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-sm);
  font: 600 14px/20px var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: filter 120ms cubic-bezier(.2,0,0,1);
}
.button:hover { filter: brightness(1.1); text-decoration: none; }

/* Hero D: full-bleed statement */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: clamp(640px, 100svh, 960px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 40px 32px;
  background: var(--blue-900);
  color: #fff;
  overflow: hidden;
  border-bottom: 0;
}
.hero-photo, .hero-shade { position: absolute; inset: 0; }
.hero-photo { width: 100%; height: 100%; object-fit: cover; filter: saturate(.7); }
.hero-shade {
  background: linear-gradient(180deg, rgba(7,19,31,.55) 0%, rgba(7,19,31,.12) 30%, rgba(7,19,31,.5) 60%, rgba(7,19,31,.9) 92%, rgba(7,19,31,.6) 100%);
}
.hero-main, .hero-strip { position: relative; }
.hero-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 64px;
  align-items: end;
  padding-top: 120px; /* clears the floating header */
  margin-bottom: 36px;
}
.hero-chip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  background: rgba(7,19,31,.55);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin: 0 0 28px;
  font: 400 13px/20px var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.hero-chip-logo { width: 20px; height: 20px; flex: none; }
.badge {
  display: inline-block;
  border: 1px solid;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font: 600 12px/16px var(--font-sans);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-ok { background: #e8f2ec; color: var(--ok); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.badge-accent { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.hero h1 {
  margin: 0;
  font: 600 clamp(56px, 8.4vw, 120px)/0.96 var(--font-sans);
  letter-spacing: -0.04em;
}
.hero-side { padding-bottom: 12px; }
.hero-side p { margin: 0; font-size: 19px; line-height: 30px; color: rgba(255,255,255,.9); text-wrap: pretty; }
.hero-ctas { display: flex; gap: 4px; margin-top: 32px; }
.hero-ctas .button { background: #fff; color: var(--ink); padding: 14px 22px; font-size: 16px; line-height: 24px; }
.hero-ctas .button-icon { width: 52px; padding: 0; font-size: 20px; }
.hero-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
  min-height: 64px;
  border-top: 1px solid rgba(255,255,255,.22);
  font-size: 14px;
  color: rgba(255,255,255,.85);
}
.hero-strip a { color: inherit; }

@media (max-width: 900px) {
  .hero { padding-inline: 16px; }
  .hero-main { grid-template-columns: 1fr; gap: 28px; }
  .site-header.over-hero .wrap { padding-inline: 16px; }
}
@media (max-width: 640px) {
  .site-header nav { display: none; }
  .hero-side p { font-size: 17px; line-height: 27px; }
}


/* ---------- Sections ---------- */
section { padding-block: 112px; }
/* Scroll stops: the page settles each section in the middle of the space below the
   64px header. The hero snaps to the top (it sits under the header) and the footer to
   the bottom. Desktop locks onto every section; phones, where stacked sections run
   taller than the screen, only settle when a scroll ends near one. */
html { scroll-padding-top: 64px; scroll-snap-type: y proximity; }
main > section { scroll-snap-align: center; }
main > section.hero { scroll-snap-align: start; }
.site-footer { scroll-snap-align: end; }
@media (min-width: 900px) and (min-height: 640px) {
  html { scroll-snap-type: y mandatory; }
  main > section { scroll-snap-stop: always; }
}
section + section { border-top: 1px solid var(--line); }
h1, h2, h3 { text-wrap: balance; }
h1 { font: 600 clamp(40px, 6vw, 64px)/1.02 var(--font-sans); letter-spacing: -0.03em; margin: 0 0 24px; }
h2 { font: 600 clamp(32px, 4.2vw, 52px)/1.04 var(--font-sans); letter-spacing: -0.03em; margin: 0 0 24px; max-width: 18ch; }
h3 { font: 600 18px/28px var(--font-sans); margin: 0 0 8px; }
p { margin: 0 0 16px; }
.kicker {
  margin: 0 0 20px;
  font: 500 13px/20px var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.lede { font-size: 19px; line-height: 30px; color: var(--ink-muted); max-width: 40rem; text-wrap: pretty; }
.micro { font-size: 14px; color: var(--ink-muted); }
.mono { font-family: var(--font-mono); }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px 96px; align-items: start; }

/* Large and secondary buttons */
.button-lg { padding: 14px 22px; font-size: 16px; line-height: 24px; }
.button-secondary { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.button-secondary:hover { filter: none; background: var(--paper); }

/* Light button for dark bands */
.button-light { background: #fff; color: var(--ink); padding: 14px 22px; font-size: 16px; line-height: 24px; }

/* Problem */
#problem .split ul:not(.evidence) { list-style: none; padding: 0; margin: 40px 0 0; counter-reset: pain; }
#problem .split ul:not(.evidence) li {
  counter-increment: pain;
  display: grid;
  grid-template-columns: 40px 1fr;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  font-size: 17px;
  line-height: 27px;
}
#problem .split ul:not(.evidence) li::before { content: counter(pain, decimal-leading-zero); font: 500 13px/27px var(--font-mono); color: var(--ink-muted); }
.evidence { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.evidence li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0;
  padding: 24px 28px;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.evidence cite { display: block; margin-top: 12px; font: 400 13px/20px var(--font-mono); letter-spacing: 0; font-style: normal; }
.evidence cite a { color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.transition {
  margin: 96px auto 0;
  max-width: 24ch;
  text-align: center;
  font: 600 clamp(28px, 3.4vw, 40px)/1.15 var(--font-sans);
  letter-spacing: -0.025em;
}

/* Problem, three cards (index.html). Sized so the whole band fits one screen under the sticky header. */
#problem:has(.problem-cards) { padding-block: 40px; }
.problem-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.problem-tag {
  margin: 0;
  padding: 4px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
  line-height: 20px;
  color: var(--ink-muted);
}
.problem-head h2 {
  margin: 12px 0 0;
  max-width: 1120px;
  font: 600 clamp(30px, 3.1vw, 42px)/1.12 var(--font-sans);
  letter-spacing: -0.02em;
}
.problem-head h2 span { color: var(--gray-500); }
.problem-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: clamp(420px, calc(100svh - 310px), 600px);
  overflow: hidden;
  border-radius: 8px;
  background: var(--blue-950);
  color: #fff;
}
.pcard h3 { margin: 0; font-size: 20px; line-height: 28px; }
.pcard p { margin: 0; }
.pcard cite { font: 400 12px/18px var(--font-mono); font-style: normal; }
.pcard cite a { color: var(--blue-200); text-underline-offset: 3px; }
.pcard img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.6); }
.pcard-padded { padding: 24px; }
.pcard-padded > p { margin-top: 10px; font-size: 15px; line-height: 22px; color: var(--blue-200); }
.pcard-padded > cite { margin-top: 12px; }
.pcard-photo { position: relative; flex: 1; min-height: 0; margin-top: 16px; border-radius: 6px; overflow: hidden; }
.pcard-chip {
  display: inline-block;
  padding: 8px 12px;
  background: rgba(7,19,31,.72);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 20px;
}
.pcard-chip b { font: 600 18px/20px var(--font-mono); font-variant-numeric: tabular-nums; }
.pcard-chip-top { position: absolute; left: 12px; right: 12px; top: 12px; }
a.pcard-chip { color: #fff; text-decoration: none; }
a.pcard-chip:hover { border-color: rgba(255,255,255,.5); }
.pcard-bleed img { position: absolute; inset: 0; }
.pcard-bleed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,19,31,.7) 0%, rgba(7,19,31,.1) 40%, rgba(7,19,31,.1) 70%, rgba(7,19,31,.6) 92%);
}
.pcard-bleed-head { position: relative; z-index: 1; padding: 24px; }
.pcard-bleed-head cite { display: block; margin-top: 6px; }
.pcard-bleed-head cite a { color: var(--blue-100); }
.pcard-chip-bottom { position: absolute; z-index: 1; left: 50%; bottom: 56px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 48px); text-align: center; }
.pcard-label {
  align-self: flex-start;
  padding: 3px 10px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-sm);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.pcard .pcard-stat { margin-top: 16px; font: 600 56px/1 var(--font-sans); letter-spacing: -0.02em; color: #fff; }
.pcard-stat span { font-size: 24px; font-weight: 500; color: var(--blue-200); }
.pcard-padded > .pcard-stat + p { margin-top: 8px; }
.dot-matrix { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; margin-top: auto; padding-top: 16px; }
.dot-matrix i, .dot-legend i { display: block; aspect-ratio: 1; border-radius: 2px; }
.dot-n { background: rgba(255,255,255,.16); }
.dot-f { background: var(--signal-400); }
.dot-c { background: #fff; }
.dot-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--blue-100); }
.dot-legend li { display: flex; gap: 6px; align-items: center; }
.dot-legend i { width: 8px; height: 8px; }
.problem-foot { margin: 16px auto 0; max-width: 1000px; text-align: center; font-size: 17px; line-height: 26px; color: var(--ink-muted); text-wrap: pretty; }
.problem-foot cite { font: 400 13px/26px var(--font-mono); font-style: normal; white-space: nowrap; }
@media (max-width: 900px) {
  .problem-cards { grid-template-columns: 1fr; }
  .pcard { height: auto; }
  .pcard-padded .pcard-photo { flex: none; aspect-ratio: 4 / 3; }
  .pcard-bleed { min-height: 420px; }
}

/* Dark bands: How it works, Book */
#how-it-works, #book { background: var(--blue-950); color: #fff; border-top: 0; }
#how-it-works + section, #book + section { border-top: 0; }
#how-it-works .kicker, #book .kicker { color: #9cc8ff; }
#how-it-works a:not(.button), #book a:not(.button) { color: #fff; }

/* How it works */
.steps { list-style: none; padding: 0; margin: 56px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.22); color: rgba(255,255,255,.78); font-size: 16px; line-height: 26px; }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 28px; font: 500 13px/20px var(--font-mono); color: #9cc8ff; }
.steps h3 { color: #fff; font-size: 22px; line-height: 30px; }
.steps li:last-child { border-top-color: #9cc8ff; }
.cta-row {
  display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between;
  margin-top: 64px; padding: 28px 32px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: rgba(255,255,255,.04);
}
.cta-row p { margin: 0; font-size: 20px; line-height: 28px; font-weight: 500; }

/* How it works, follow one cost (index.html). Light band: copy on the left, a cost that builds up step by step on the right.
   The left padding lines the copy up with .wrap; the stage runs to the right edge. */
#how-it-works.hiw {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  min-height: clamp(600px, calc(100svh - 64px), 760px);
  padding: 0 0 0 max(40px, calc((100% - 1200px) / 2 + 40px));
  background: var(--surface);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
#how-it-works.hiw .kicker { color: var(--accent); margin-bottom: 14px; }
.hiw-copy { display: flex; flex-direction: column; padding: 72px 56px 56px 0; }
.hiw-copy h2 { margin: 0; max-width: 20ch; font-size: clamp(32px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -0.025em; }
.hiw-steps { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--line); }
.hiw-steps li { border-bottom: 1px solid var(--line); }
.hiw-step {
  all: unset;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 40px 1fr;
  width: 100%;
  padding: 16px 0;
  cursor: pointer;
}
.hiw-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hiw-step-n { padding-top: 4px; font: 400 13px/20px var(--font-mono); color: var(--ink-muted); }
.hiw-step-k { display: flex; justify-content: space-between; gap: 12px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--gray-500); }
.hiw-step-who { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.hiw-step-t { display: block; margin-top: 6px; font-size: 15px; line-height: 23px; color: var(--ink-muted); text-wrap: pretty; }
.hiw-step.is-active .hiw-step-n { color: var(--accent); }
.hiw-step.is-active .hiw-step-k, .hiw-step:hover .hiw-step-k { color: var(--ink); }
.hiw-ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: auto; padding-top: 32px; }
.hiw-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background-color: var(--paper);
  background-image: linear-gradient(var(--gray-100) 1px, transparent 1px), linear-gradient(90deg, var(--gray-100) 1px, transparent 1px);
  background-size: 24px 24px;
  border-left: 1px solid var(--line);
}
.cost { width: 600px; max-width: 100%; }
.cost-rows { display: flex; flex-direction: column; gap: 16px; transition: gap 120ms cubic-bezier(.2,0,0,1); }
.cost-row {
  display: grid;
  grid-template-columns: 110px 90px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
}
.cost-row .mono { font-size: 13px; font-variant-numeric: tabular-nums; }
.cost-row .mono:last-child { font-size: 14px; }
.cost-sys { color: var(--ink-muted); }
.cost-rows.is-linked { gap: 0; }
.cost-rows.is-linked .cost-row { border-radius: 0; }
.cost-rows.is-linked .cost-row + .cost-row { margin-top: -1px; }
.cost-rows.is-linked .cost-row:first-child { border-radius: 6px 6px 0 0; }
.cost-rows.is-linked .cost-row:last-child { border-radius: 0 0 6px 6px; }
.cost-note { margin: 20px 0 0; text-align: center; font-size: 15px; color: var(--ink-muted); }
.cost-card {
  margin-top: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(22,32,46,.06);
}
.cost-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.cost-head strong { font-size: 17px; font-weight: 600; }
.cost-head .mono { display: block; margin-top: 4px; font-size: 13px; color: var(--ink-muted); }
.cost-head .cost-total { margin: 0; font-size: 22px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.cost-link { margin: 14px 0 0; font-size: 14px; color: var(--ink-muted); }
.cost-machine { color: var(--signal); }
.cost-why { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.cost-why b { display: block; font-weight: 500; }
.cost-why span { display: block; margin-top: 4px; color: var(--ink-muted); }
.cost-why .cost-missing { color: var(--danger); }
.cost-status { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; font-size: 13px; color: var(--ink-muted); }
.cost-log { margin-top: 16px; padding: 12px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; line-height: 20px; }
.cost-log b { font-weight: 600; }
.cost-log > span { color: var(--ink-muted); }
@media (max-width: 900px) {
  #how-it-works.hiw { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 0; }
  .hiw-copy { padding: 72px 16px 40px; }
  .hiw-stage { padding: 32px 16px; border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .cost-row { grid-template-columns: auto 1fr auto; row-gap: 2px; }
  .cost-row > span:nth-child(3) { grid-column: 1 / 3; }
  .cost-row > span:nth-child(4) { grid-column: 3; grid-row: 1 / 3; align-self: center; }
  .cost-why { grid-template-columns: 1fr; }
}

/* What you get */
#solution { background: var(--surface); }
#solution .lede + p { max-width: 40rem; color: var(--ink-muted); }
.features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; border-top: 1px solid var(--line); }
.features > div { padding: 32px 32px 32px 0; border-bottom: 1px solid var(--line); }
.features > div:nth-child(even) { padding: 32px 0 32px 32px; border-left: 1px solid var(--line); }
.features h3 { font-size: 20px; }
.features p { margin: 0; color: var(--ink-muted); max-width: 30rem; }

/* What you get, numbered index + photo (index.html). Dark band; the product card over the photo follows the open feature. */
#solution.wyg { padding-block: 88px; background: var(--blue-950); color: #fff; border-top: 0; }
#solution.wyg + section { border-top: 0; }
#solution.wyg .kicker { color: var(--signal-300); margin-bottom: 14px; }
.wyg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 72px; }
.wyg-copy { display: flex; flex-direction: column; align-items: flex-start; }
.wyg-copy h2 { margin: 0; max-width: none; font-size: clamp(36px, 4vw, 56px); line-height: 1.04; letter-spacing: -0.025em; }
.wyg-sub { margin: 20px 0 28px; max-width: 500px; font-size: 17px; line-height: 27px; color: var(--blue-200); text-wrap: pretty; }
.wyg-list { align-self: stretch; list-style: none; margin: 56px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.16); }
.wyg-item {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255,255,255,.16);
  cursor: pointer;
}
.wyg-item:focus-visible { outline: 2px solid var(--signal-300); outline-offset: 2px; }
.wyg-item.is-active { border-bottom-color: rgba(255,255,255,.5); }
.wyg-item-k { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 18px; line-height: 26px; color: var(--blue-200); }
.wyg-item-k .mono { font-size: 13px; }
.wyg-item.is-active .wyg-item-k { font-weight: 600; color: #fff; }
.wyg-item:hover .wyg-item-k { color: #fff; }
.wyg-item-t { display: block; margin-top: 8px; max-width: 480px; font-size: 15px; line-height: 23px; color: var(--blue-100); text-wrap: pretty; }
.wyg-media { position: relative; min-height: 640px; border-radius: 6px; overflow: hidden; background: var(--blue-900); }
.wyg-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.6); }
.wyg-panel { position: absolute; right: 24px; bottom: 24px; width: 340px; max-width: calc(100% - 48px); }
.wcard {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(22,32,46,.06);
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
}
.wcard p { margin: 0; }
.wcard .mono { font-variant-numeric: tabular-nums; }
.wcard-muted { font-size: 13px; color: var(--ink-muted); }
.wcard-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.wcard-head b { font-size: 15px; font-weight: 600; }
.wcard-head .mono { font-size: 12px; color: var(--ink-muted); }
.wcard-match { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding-left: 14px; border-left: 2px solid var(--blue-200); }
.wcard-match div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wcard-match span:first-child { font-weight: 500; }
.wcard-match .mono { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.wcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.wcard-foot b { font-weight: 600; }
.wcard-rows { list-style: none; margin: 8px 0 0; padding: 0; }
.wcard-rows li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.wcard-rows li > span:first-child { width: 14px; font-weight: 600; }
.wcard-ok { color: var(--ok); }
.wcard-gap { color: var(--danger); }
.wcard-action { margin-top: 12px !important; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.wcard-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.wcard-chips span { padding: 2px 7px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 12px; }
.wcard-head + .wcard-muted { margin-top: 10px; }
.wcard-why { margin-top: 2px !important; }
.wcard-conf { margin-top: 12px !important; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-muted); }
.wcard-conf b { color: var(--ink); font-weight: 600; }
.wcard-kv li { justify-content: space-between; }
.wcard-kv li > span:first-child { width: auto; font-weight: 400; color: var(--ink-muted); }
.wcard-kv b { font-weight: 600; }
.wcard-note { margin-top: 10px !important; font-size: 12px; color: var(--ink-muted); }
@media (max-width: 900px) {
  .wyg-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .wyg-media { min-height: 460px; }
  .wyg-panel { right: 16px; bottom: 16px; max-width: calc(100% - 32px); }
}

/* Where it works */
[role="tablist"] { display: inline-flex; gap: 4px; padding: 4px; margin: 16px 0 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
[role="tab"] { font: 500 15px/20px var(--font-sans); padding: 8px 16px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--ink-muted); cursor: pointer; }
[role="tab"][aria-selected="true"] { background: var(--accent); color: #fff; }
#where [role="tabpanel"], #where h2 + ul {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 32px;
  max-width: 52rem;
}
#where h2 + ul { margin: 16px 0 24px; }
#where ul { margin: 0; padding: 0; list-style: none; }
#where li { padding: 14px 0 14px 28px; border-top: 1px solid var(--line); position: relative; }
#where li:first-child { border-top: 0; padding-top: 0; }
#where li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent); font-weight: 600; }
#where li:first-child::before { top: 0; }
#where [role="tabpanel"] p { margin: 16px 0 0; }
#where [role="tabpanel"] h3 { font-size: 20px; margin-bottom: 16px; }
#where .micro { margin-top: 24px; }

/* Where it works, F4d "Paper on the desk" (index.html only; us/au keep the panel above) */
#where.pf { padding-block: 96px 80px; background: var(--blue-950); color: #fff; border-top: 1px solid rgba(255,255,255,.12); }
#where.pf + section { border-top: 0; }
#where.pf .kicker { color: var(--signal-300); margin-bottom: 14px; }
.pf-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; }
.pf-copy h2 { margin: 0; max-width: none; font-size: clamp(36px, 3.8vw, 52px); line-height: 1.06; letter-spacing: -0.025em; }
.pf-sub { margin: 18px 0 0; font-size: 18px; line-height: 28px; color: var(--blue-200); text-wrap: pretty; }
#where.pf [role="tablist"] { margin: 28px 0 0; background: transparent; border-color: rgba(255,255,255,.2); }
#where.pf [role="tab"] { color: var(--blue-100); }
#where.pf [role="tab"]:hover { color: #fff; }
#where.pf [role="tab"][aria-selected="true"] { background: #fff; color: var(--ink); font-weight: 600; }
#where.pf [role="tabpanel"] { max-width: none; padding: 0; background: none; border: 0; border-radius: 0; }
#where.pf .pf-list { margin-top: 32px; border-top: 1px solid rgba(255,255,255,.16); }
#where.pf .pf-list li,
#where.pf .pf-list li:first-child { padding: 12px 0 12px 22px; border-top: 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 15px; line-height: 1.5; color: var(--blue-100); text-wrap: pretty; }
#where.pf .pf-list li::before { top: 12px; color: var(--signal-300); font-weight: 400; }
#where.pf .pf-link { margin: 20px 0 0; font-size: 15px; }
#where.pf .pf-link a { color: #fff; text-underline-offset: 3px; }
.pf-desk {
  position: relative;
  height: 600px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.paper {
  position: absolute;
  background: var(--surface);
  color: var(--ink);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 18px 40px rgba(0,0,0,.35);
  font-size: 13px;
  line-height: 1.45;
}
.paper p { margin: 0; }
.paper-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink-muted); }
.paper-head b { font-weight: 600; color: var(--ink); }
.paper-head .mono { font-size: 12px; white-space: nowrap; }
.paper-sheet { left: 32px; top: 40px; z-index: 1; width: 360px; padding: 22px; transform: rotate(-2deg); }
.paper-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 14px; }
.paper-table > span { padding: 8px 6px 8px 0; border-bottom: 1px solid var(--line); }
.paper-table > span:nth-child(-n+3) { padding-block: 6px; font-weight: 600; }
.paper-table .is-hit { font-weight: 600; }
.paper-table .is-fail { padding-left: 6px; background: #f6e7e8; color: var(--danger); }
.paper-foot { margin-top: 12px !important; font-size: 12px; color: var(--ink-muted); }
.paper-rule { right: 24px; top: 150px; width: 280px; padding: 20px; background: var(--paper); transform: rotate(2.5deg); }
.paper-doc { font-size: 11px; letter-spacing: .06em; color: var(--ink-muted); }
.paper-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.paper-lines i { display: block; height: 6px; width: 100%; background: #e3e7ec; border-radius: 1px; }
.paper-hl { margin-top: 12px !important; padding: 8px 10px; background: #e6edf4; border-radius: 3px; }
.paper-thread { position: absolute; left: 200px; top: 300px; width: 260px; border-top: 1px dashed var(--signal-300); transform: rotate(14deg); transform-origin: left; opacity: .8; }
.paper-flag { left: 140px; bottom: 40px; width: 440px; padding: 20px; font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.2), 0 24px 48px rgba(0,0,0,.45); }
.paper-issue { margin-top: 12px !important; font-size: 16px; font-weight: 600; line-height: 1.35; }
.paper-fix { margin-top: 4px !important; color: var(--ink-muted); }
.paper-act { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.paper-act .mono { font-size: 14px; }
.paper-act s { color: var(--ink-muted); }
.paper-act b { font-weight: 600; }
.paper-btn { padding: 8px 14px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.badge-danger { background: #f6e7e8; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
@media (max-width: 1100px) {
  .paper-flag { left: 72px; }
}
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .pf-desk { height: auto; display: flex; flex-direction: column; gap: 16px; padding: 24px 16px; }
  .paper { position: relative; inset: auto; width: auto; max-width: 440px; }
  .paper-sheet { transform: rotate(-1deg); }
  .paper-rule { align-self: flex-end; width: 80%; transform: rotate(1.5deg); }
  .paper-thread { display: none; }
}

/* Credibility */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 28px; }
.card p { color: var(--ink-muted); margin: 0; }
.card-accent { background: var(--accent); border-color: var(--accent); }
.card-accent h3, .card-accent p, .card-accent a { color: #fff; }
.card-accent p { opacity: .85; margin-bottom: 20px; }
.card-accent a { font-weight: 600; }

/* FAQ */
#faq { background: var(--surface); }
#faq .split > div:first-child { position: sticky; top: 96px; }
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; gap: 24px;
  padding: 22px 0; font-size: 18px; line-height: 28px; font-weight: 600;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font: 400 24px/28px var(--font-sans); color: var(--accent); }
details[open] summary::after { content: "\2212"; }
details p { margin: -8px 0 22px; color: var(--ink-muted); max-width: 40rem; }

/* FAQ, Q3 "With a documentary photo" (index.html only) */
#faq.faq-photo { border-top: 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.faq-copy h2 { margin: 0; max-width: none; font-size: clamp(36px, 3.8vw, 52px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
#faq.faq-photo .kicker { margin-bottom: 20px; }
.faq-lede { margin: 20px 0 0; max-width: 400px; font-size: 18px; line-height: 1.55; color: var(--ink-muted); text-wrap: pretty; }
.faq-fig { margin: 48px 0 0; }
.faq-fig img { display: block; width: 100%; height: 380px; object-fit: cover; border: 1px solid var(--line); border-radius: 6px; }
.faq-list { display: flex; flex-direction: column; gap: 8px; }
details.faq-q, details.faq-q:last-child { border: 1px solid transparent; border-bottom-color: var(--line); border-radius: 6px; }
details.faq-q[open] { background: var(--paper); border-color: var(--line); }
.faq-q summary { align-items: center; padding: 24px 20px; font-size: 24px; line-height: 1.3; font-weight: 400; text-wrap: pretty; }
.faq-q summary::after { content: "\2304"; flex: none; font-size: 16px; line-height: 1; color: var(--accent); }
.faq-q[open] summary::after { content: "\2304"; transform: rotate(180deg); }
.faq-q summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.faq-q p { margin: 0; padding: 0 60px 24px 20px; max-width: none; font-size: 17px; line-height: 1.6; text-wrap: pretty; }
@media (max-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .faq-fig img { height: 260px; }
  .faq-q summary { padding: 20px 16px; font-size: 20px; }
  .faq-q p { padding: 0 16px 20px; }
}

/* Book */
#book h2 { max-width: 14ch; }
#book ul { list-style: none; padding: 0; margin: 32px 0 0; }
#book ul li { padding: 12px 0 12px 32px; border-top: 1px solid rgba(255,255,255,.18); position: relative; color: rgba(255,255,255,.85); }
#book ul li::before { content: "\2713"; position: absolute; left: 0; color: #9cc8ff; font-weight: 600; }
#book p { color: rgba(255,255,255,.85); }
form {
  display: grid; gap: 18px;
  background: var(--surface); color: var(--ink);
  border-radius: 8px; padding: 36px;
  box-shadow: 0 24px 48px rgba(0,0,0,.25);
}
label { display: grid; gap: 6px; font: 500 14px/20px var(--font-sans); }
input, select {
  font: 400 16px/24px var(--font-sans);
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink-muted); }
.check input { margin-top: 4px; }
form .button { padding: 14px 22px; font-size: 16px; line-height: 24px; }
#book form .micro { margin: 0; color: var(--ink-muted); text-align: center; }

/* Footer */
.site-footer { background: var(--blue-950); color: rgba(255,255,255,.6); padding-block: 48px; font-size: 14px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; }
.site-footer .logo { color: #fff; margin-right: auto; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer a { color: rgba(255,255,255,.85); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer p { margin: 0; flex-basis: 100%; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }

/* Footer, F1 "Wordmark close" (index.html only; booking lives here) */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-footer.wm { position: relative; overflow: hidden; padding: 96px 0 0; background: #0a1522; color: #fff; font-size: 16px; }
.site-footer.wm .wrap { display: block; }
.site-footer.wm .wm-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.site-footer.wm #book { padding: 0; background: none; scroll-margin-top: 32px; }
.site-footer.wm .kicker { margin: 0; color: #8fbcef; }
.site-footer.wm h2 { margin: 16px 0 0; max-width: none; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
.site-footer.wm p { flex-basis: auto; padding: 0; border: 0; }
.wm-form { display: flex; gap: 8px; max-width: 520px; margin-top: 32px; padding: 0; background: none; border-radius: 0; box-shadow: none; }
.wm-form input { flex: 1; min-width: 0; padding: 13px 14px; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.04); color: #fff; }
.wm-form input::placeholder { color: rgba(255,255,255,.55); }
.wm-form input:focus { border-color: #8fbcef; box-shadow: 0 0 0 3px rgba(143,188,239,.25); }
.wm-form .button { flex: none; }
.site-footer.wm .wm-micro { margin: 14px 0 0; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.6); }
.wm-cols { justify-self: end; display: flex; gap: 64px; }
.wm-cols div { display: flex; flex-direction: column; gap: 12px; }
.site-footer.wm .wm-cols p { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: #fff; }
.site-footer.wm .wm-cols a { font-size: 15px; line-height: 22px; color: rgba(255,255,255,.72); }
.site-footer.wm .wm-cols a:hover { color: #fff; text-decoration: none; }
.wm-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 80px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 14px; line-height: 20px; color: rgba(255,255,255,.6); }
.wm-mark { margin-bottom: -0.1em; padding-left: max(16px, calc((100% - 1200px) / 2 + 16px)); font: 600 clamp(160px, 28vw, 400px)/.74 var(--font-sans); letter-spacing: -0.045em; color: #132438; white-space: nowrap; user-select: none; }
@media (max-width: 900px) {
  .site-footer.wm { padding-top: 72px; }
  .site-footer.wm .wm-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .wm-cols { justify-self: start; flex-wrap: wrap; gap: 32px 48px; }
  .wm-bar { margin-top: 56px; }
}
@media (max-width: 480px) {
  .wm-form { flex-direction: column; }
}

/* Inner pages (thanks / privacy / terms) */
main > section:only-child { min-height: 60vh; }
main > section:only-child .steps { grid-template-columns: 1fr; max-width: 40rem; }
main > section:only-child .steps li { color: var(--ink-muted); border-top-color: var(--line); }
main > section:only-child .steps li::before { color: var(--accent); margin-bottom: 8px; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .wrap { padding-inline: 16px; }
  section { padding-block: 72px; }
  .split { grid-template-columns: 1fr; gap: 40px; }
  #faq .split > div:first-child { position: static; }
  .features { grid-template-columns: 1fr; }
  .features > div, .features > div:nth-child(even) { padding: 24px 0; border-left: 0; }
  .transition { margin-top: 64px; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  form { padding: 24px; }
  .cta-row { padding: 24px; }
  #where [role="tabpanel"], #where h2 + ul { padding: 24px; }
}

/* Motion: restrained. Short fades and small rises on load, scroll and swaps.
   Animations use `translate` (not `transform`) so they stack on the papers' rotations. */
:root { --ease: cubic-bezier(.2,0,0,1); --dur-in: 320ms; --dur-swap: 220ms; }
/* "from" only, so each element ends on its own opacity (the thread sits at .8). */
@keyframes rise { from { opacity: 0; translate: 0 12px; } }
@keyframes fade { from { opacity: 0; translate: 0 4px; } }
@keyframes photo-in { from { opacity: .6; } }

/* Hero on load (CSS only, no JS needed) */
.hero-photo { animation: photo-in 600ms var(--ease) both; }
.hero-chip, .hero h1, .hero-side, .hero-strip { animation: rise 400ms var(--ease) both; }
.hero h1 { animation-delay: 60ms; }
.hero-side { animation-delay: 140ms; }
.hero-strip { animation-delay: 220ms; }

/* Scroll reveal. The script adds .js-motion, so content stays visible without JS. */
.js-motion [data-reveal] {
  opacity: 0;
  translate: 0 16px;
  transition: opacity var(--dur-in) var(--ease), translate var(--dur-in) var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js-motion [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* Swaps: these elements toggle `hidden`, and the animation replays each time one shows. */
.hiw-step-t:not([hidden]),
.hiw [data-show]:not([hidden]),
.wyg-item-t:not([hidden]),
.wcard:not([hidden]),
#where [role="tabpanel"]:not([hidden]) { animation: fade var(--dur-swap) var(--ease) both; }
.pf-desk:not([hidden]) .paper { animation: rise var(--dur-in) var(--ease) both; }
.pf-desk:not([hidden]) .paper-rule { animation-delay: 60ms; }
.pf-desk:not([hidden]) .paper-flag { animation-delay: 140ms; }
.pf-desk:not([hidden]) .paper-thread { animation: fade var(--dur-in) var(--ease) 100ms both; }
details.faq-q[open] > :not(summary) { animation: fade var(--dur-swap) var(--ease) both; }
details.faq-q { transition: background-color 120ms var(--ease), border-color 120ms var(--ease); }
.faq-q summary::after { transition: transform 120ms var(--ease); }
.wyg-item-k { transition: color 120ms var(--ease); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1 !important; translate: none !important; }
}