/* Pathvault site fonts, served from this origin: nothing is fetched from Google. */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url(fonts/nunito-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url(fonts/nunito-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Pathvault site (rebuilt 2026-09-23 for travellers, not techies). One stylesheet for the three pages:
   a cool paper ground and plum ink, the yearbook's rounded black for the big words, and the eight trip
   colours of the apps, used only where a trip is meant: its dot, its cover, its arc on the map. */
:root {
  --ground: #f6f5fa;
  --paper: #ffffff;
  --sunk: #eeecf5;
  --ink: #1e1b2e;
  --ink-2: #5b5870;
  --ink-3: #8b879e;
  --line: #e3e0ec;
  --accent: #d8413a;
  --accent-ink: #ffffff;
  --accent-soft: #fbe4e2;
  /* The trip colours, as the apps number them. */
  --t1: #ed544f;
  --t2: #f59e1e;
  --t3: #33a8db;
  --t4: #5cb85c;
  --t5: #9e66d9;
  --t6: #f273a8;
  --t7: #219687;
  --t8: #d98c33;
  --map: #e7ebe4;
  --map-water: #d6e4ee;
  --fog: #232036;
  --radius: 22px;
  --shadow: 0 1px 2px rgba(30, 27, 46, 0.06), 0 14px 40px rgba(30, 27, 46, 0.1);
  --font-display: "Nunito", "SF Pro Rounded", "Arial Rounded MT Bold", "Helvetica Neue", sans-serif;
  --font-body: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #131220; --paper: #1c1a2b; --sunk: #242236; --ink: #f2f0f8; --ink-2: #b3afc6; --ink-3: #807c96;
    --line: #302d44; --accent: #ff6b63; --accent-ink: #1c0c0b; --accent-soft: #3b1d22; --map: #2a3029;
    --map-water: #1f2b36; --fog: #0b0a14; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 40px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #131220; --paper: #1c1a2b; --sunk: #242236; --ink: #f2f0f8; --ink-2: #b3afc6; --ink-3: #807c96;
  --line: #302d44; --accent: #ff6b63; --accent-ink: #1c0c0b; --accent-soft: #3b1d22; --map: #2a3029;
  --map-water: #1f2b36; --fog: #0b0a14; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 14px 40px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 18px;
  line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
a { color: var(--accent); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 3px solid var(--t3); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; margin: 0 0 0.35em; }
h1 { font-size: clamp(2.7rem, 7vw, 5.2rem); font-weight: 900; }
h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); font-weight: 900; }
h3 { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; }
p { margin: 0 0 1em; max-width: 60ch; }
p, li { overflow-wrap: anywhere; }
.lede { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink-2); }
.muted { color: var(--ink-2); }
.small { font-size: 0.9rem; }
.label { font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.wrap { width: min(1140px, 100% - 32px); margin-inline: auto; }

/* The nav */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--ground) 86%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 10px 20px; min-height: 76px; padding-block: 10px; flex-wrap: wrap; }
/* The logo (2026-09-23): the app's icon large enough to read, the name beside it in the display face. */
.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.brand img { width: 48px; height: 48px; filter: drop-shadow(0 2px 4px rgba(30, 27, 46, 0.18)); }
.nav-links { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.nav-links a { text-decoration: none; color: var(--ink-2); padding: 8px 12px; border-radius: 999px; font-weight: 600; font-size: 0.97rem; }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: var(--sunk); color: var(--ink); }
.nav-links a.pill { background: var(--ink); color: var(--ground); margin-left: 6px; }
.nav-links a.pill:hover { background: var(--accent); color: var(--accent-ink); }

/* Buttons */
.cta { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; padding: 15px 26px; border-radius: 999px; box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform 0.15s ease; }
.cta:hover { transform: translateY(-2px); }
.cta svg { width: 20px; height: 20px; }
.cta.quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 8px; }
.fine { font-size: 0.9rem; color: var(--ink-3); margin-top: 16px; }

/* Sections */
.block { padding-block: clamp(64px, 9vw, 112px); }
.block.paper { background: var(--paper); border-block: 1px solid var(--line); }
.head { max-width: 760px; margin-bottom: 44px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.two.flip > :first-child { order: 2; }

/* A trip's dot: its number in its colour, as in the apps */
.dot { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 0.8rem; flex: none; }

/* The hero: the book covers */
.hero { padding-block: clamp(48px, 7vw, 96px) clamp(56px, 8vw, 104px); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.hero h1 .soft { color: var(--ink-3); }
.covers { position: relative; height: 520px; }
.cover { position: absolute; width: 300px; aspect-ratio: 210 / 297; max-width: 72%; border-radius: 10px 16px 16px 10px; background: var(--c-paper, #fdf8f0); color: #1e1b2e; box-shadow: var(--shadow), inset 6px 0 0 rgba(0, 0, 0, 0.06); padding: 26px 24px 20px; display: flex; flex-direction: column; overflow: hidden; transition: transform 0.35s ease; }
.cover .big { font-family: var(--font-display); font-weight: 900; line-height: 0.86; letter-spacing: -0.04em; color: var(--c-accent, var(--t1)); }
.cover .sub { font-family: var(--font-display); font-weight: 800; font-size: 1.05rem; margin-top: 8px; }
.cover .cap { font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; color: var(--c-accent, var(--t1)); opacity: 0.85; }
.cover .flags { font-size: 1.3rem; letter-spacing: 3px; margin-top: 14px; }
.cover .facts { font-size: 0.78rem; line-height: 1.5; color: #5b5870; margin-top: 10px; }
.cover .bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin-top: auto; }
.cover .bars i { flex: 1; border-radius: 3px; background: #ece7df; min-height: 4px; }
.cover .foot { display: flex; justify-content: space-between; font-size: 0.62rem; color: #8b879e; font-weight: 600; margin-top: 8px; }
.cover.year { right: 4%; top: 0; transform: rotate(4deg); z-index: 3; }
.cover.year .big { font-size: 5.6rem; }
.cover.summer { --c-paper: #fff3e2; --c-accent: #e8742a; right: 46%; top: 50px; transform: rotate(-7deg); z-index: 2; }
.cover.summer .big { font-size: 3.4rem; }
.cover.trip { --c-paper: #1d2233; --c-accent: #7cc4ef; color: #f2f0f8; right: 18%; top: 200px; transform: rotate(-1.5deg); z-index: 4; }
.cover.trip .big { font-size: 3rem; }
.cover.trip .facts { color: #b3afc6; }
.cover.trip .foot { color: #807c96; }
.cover.trip .photo { margin-top: 12px; border-radius: 10px; height: 88px; background: linear-gradient(160deg, #f4b35f 0%, #e8742a 38%, #9e3d52 72%, #2c2a4a 100%); position: relative; overflow: hidden; }
.cover.trip .photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 38%; background: repeating-linear-gradient(90deg, #14121f 0 7px, #1d1a2e 7px 12px); clip-path: polygon(0 60%, 8% 30%, 14% 55%, 22% 10%, 30% 50%, 40% 25%, 48% 60%, 58% 20%, 66% 45%, 76% 5%, 84% 50%, 92% 30%, 100% 55%, 100% 100%, 0 100%); }
.covers:hover .cover.year { transform: rotate(6deg) translate(12px, -6px); }
.covers:hover .cover.summer { transform: rotate(-10deg) translate(-14px, -4px); }

/* Privacy at the heart of the header */
.privacy-panel { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 4px 0 24px; padding: 16px 20px; background: var(--paper); border: 2px solid var(--ink); border-radius: 20px; max-width: 560px; }
.privacy-panel svg { width: 34px; height: 34px; color: var(--accent); }
.privacy-panel b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; }
.privacy-panel span { color: var(--ink-2); font-size: 0.98rem; line-height: 1.5; }

/* Three steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; list-style: none; padding: 0; margin: 0; }
.step { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.step .dot { font-size: 1rem; margin-bottom: 16px; }
.step p { margin: 0; color: var(--ink-2); }
.aside { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; margin-top: 20px; background: var(--sunk); border-radius: var(--radius); padding: 22px 26px; }
.aside p { margin: 0; }
.aside .thumbs { display: grid; grid-template-columns: repeat(3, 44px); gap: 5px; }
.aside .thumbs i { aspect-ratio: 1; border-radius: 8px; }

/* The phone with a trip */
.phone { width: min(330px, 100%); margin-inline: auto; border-radius: 48px; padding: 12px; background: #16141f; box-shadow: var(--shadow); }
.phone .screen { border-radius: 38px; overflow: hidden; background: #fff; color: #1e1b2e; font-size: 0.8rem; }
.phone .bar { display: flex; justify-content: space-between; padding: 12px 24px 4px; font-weight: 700; font-size: 0.75rem; }
.phone .title { padding: 6px 18px 10px; }
.phone .title b { font-family: var(--font-display); font-weight: 900; font-size: 1.35rem; display: block; line-height: 1.1; }
.phone .title span { color: #5b5870; }
.phone svg.route { display: block; width: 100%; height: auto; }
.phone .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px 14px; }
.phone .tiles div { border-radius: 12px; padding: 8px 10px; color: #fff; }
.phone .tiles b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; }
.phone .tiles span { font-size: 0.66rem; opacity: 0.9; }
.phone .days { padding: 4px 14px 18px; display: grid; gap: 6px; }
.phone .days div { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; background: #f3f1f8; border-radius: 10px; }
.phone .days em { font-style: normal; color: #8b879e; }
.ticks { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; }
.ticks li::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23d8413a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; margin-top: 2px; }

/* Insights */
.insights { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: auto auto; gap: 20px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.card h3 { margin-bottom: 0.3em; }
.card p { color: var(--ink-2); margin: 0; }
.fog-card { grid-row: span 2; padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.fog-card .text { padding: 26px 26px 18px; }
.fog-card canvas { display: block; width: 100%; flex: 1; min-height: 300px; background: var(--fog); cursor: crosshair; touch-action: pan-y; }
.figure { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.figure small { font-size: 0.4em; color: var(--ink-3); letter-spacing: 0; margin-left: 4px; }
.stamps { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 14px; }
.stamp { display: inline-flex; align-items: center; gap: 8px; border: 2px dashed currentColor; border-radius: 12px; padding: 6px 12px; font-family: var(--font-display); font-weight: 900; font-size: 0.9rem; transform: rotate(var(--r, -2deg)); }
.records { display: grid; gap: 8px; margin: 14px 0; }
.records div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed var(--line); font-variant-numeric: tabular-nums; }
.records div:last-child { border-bottom: 0; }
.records b { font-family: var(--font-display); font-weight: 900; }

/* The books */
.periods { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 30px; }
.periods button { font: inherit; font-family: var(--font-display); font-weight: 800; font-size: 1rem; padding: 10px 18px; border-radius: 999px; border: 2px solid var(--line); background: var(--paper); color: var(--ink-2); cursor: pointer; }
.periods button[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); }
.spread { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.page { aspect-ratio: 210 / 297; background: #fdf8f0; color: #1e1b2e; border-radius: 6px; box-shadow: var(--shadow); padding: 16px 14px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; font-size: 0.64rem; }
.page .pbig { font-family: var(--font-display); font-weight: 900; line-height: 0.9; letter-spacing: -0.03em; color: var(--pa, var(--t1)); font-size: 2.6rem; overflow-wrap: anywhere; }
.page .ptitle { font-family: var(--font-display); font-weight: 900; font-size: 1rem; line-height: 1.05; display: flex; gap: 6px; align-items: center; }
.page .ptitle .dot { font-size: 0.6rem; }
.page .pline { color: #8b879e; font-weight: 600; }
.page .pmap { flex: 1; border-radius: 8px; background: var(--map); position: relative; overflow: hidden; }
.page .pmap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.page .ptiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.page .ptiles div { border-radius: 7px; padding: 5px 7px; color: #fff; }
.page .ptiles b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 0.85rem; }
.page .mosaic { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 5px; }
.page .mosaic i { border-radius: 6px; }
.page .mosaic i.w { grid-column: span 2; }
.page .mosaic i.t { grid-row: span 2; }
.page .pfoot { display: flex; justify-content: space-between; color: #8b879e; font-weight: 600; font-size: 0.55rem; }
.page-name { text-align: center; font-size: 0.85rem; color: var(--ink-3); margin-top: 10px; font-weight: 600; }
.bookfacts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.bookfacts h3 { font-size: 1.1rem; }
.bookfacts p { color: var(--ink-2); margin: 0; font-size: 1rem; }
.looks { display: flex; gap: 6px; margin-top: 12px; }
.looks i { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }

/* Privacy */
.promises { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.promise { padding-top: 22px; border-top: 3px solid var(--ink); }
.promise h3 { font-size: 1.2rem; }
.promise p { color: var(--ink-2); margin: 0; font-size: 1rem; }
.yours { margin-top: 44px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; background: var(--sunk); border-radius: var(--radius); padding: 26px 30px; }
.yours p { margin: 0; }

/* Mac */
.mac { width: 100%; max-width: 560px; margin-inline: auto; }
.mac .lid { border-radius: 16px 16px 4px 4px; background: #16141f; padding: 12px; }
.mac .screen { border-radius: 6px; background: var(--paper); aspect-ratio: 16 / 10; display: grid; grid-template-columns: 34% 1fr; overflow: hidden; }
.mac .side { background: var(--sunk); padding: 14px 12px; display: grid; gap: 8px; align-content: start; font-size: 0.7rem; color: var(--ink-2); }
.mac .side b { color: var(--ink); font-family: var(--font-display); font-weight: 900; font-size: 0.85rem; }
.mac .side span { display: block; height: 8px; border-radius: 4px; background: var(--line); }
.mac .side span.on { background: var(--accent); width: 70%; }
.mac .pages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 16px; align-content: center; }
.mac .pages i { aspect-ratio: 210 / 297; border-radius: 3px; background: #fdf8f0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.mac .base { height: 14px; margin-inline: -5%; background: linear-gradient(#d9d6e2, #b9b5c6); border-radius: 0 0 14px 14px; }

/* Questions */
.faq { display: grid; gap: 10px; max-width: 820px; }
.faq details { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 4px 22px; }
.faq summary { cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; padding: 16px 0; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 900; color: var(--ink-3); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); }

/* Closing band */
.band { background: var(--ink); color: var(--ground); border-radius: 32px; padding: clamp(36px, 6vw, 64px); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
.band h2 { color: var(--ground); margin: 0 0 0.2em; }
.band p { color: color-mix(in srgb, var(--ground) 72%, transparent); margin: 0; }

/* Pricing */
.price-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: start; }
.timeline { display: grid; gap: 0; }
.timeline div { display: grid; grid-template-columns: 110px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.timeline div:last-child { border-bottom: 0; }
.timeline b { font-family: var(--font-display); font-weight: 900; font-size: 1.15rem; }
.timeline p { margin: 0; color: var(--ink-2); }
.plan { background: var(--paper); border: 2px solid var(--ink); border-radius: 26px; padding: 30px; box-shadow: var(--shadow); }
.plan .amount { font-family: var(--font-display); font-weight: 900; font-size: 3.6rem; line-height: 1; letter-spacing: -0.03em; }
.plan .amount small { font-size: 1.1rem; color: var(--ink-3); letter-spacing: 0; }
.plan .or { color: var(--ink-2); margin: 8px 0 18px; }

/* Privacy page */
.plain { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 36px 0 12px; }
.plain .card p { font-size: 1rem; }
.where { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: center; margin: 36px 0 8px; }
.where .box { background: var(--paper); border: 1px solid var(--line); border-radius: 18px; padding: 18px; text-align: center; }
.where .box b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.1rem; }
.where .box span { font-size: 0.9rem; color: var(--ink-2); }
.where .arrow { font-family: var(--font-display); font-weight: 900; color: var(--ink-3); text-align: center; font-size: 1.4rem; line-height: 1.1; }
.where .arrow small { display: block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; }
.nobox { text-align: center; color: var(--ink-2); font-weight: 600; }
.prose { max-width: 720px; }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose code { font-size: 0.85em; background: var(--sunk); padding: 1px 6px; border-radius: 6px; }

/* Footer */
.foot { padding-block: 40px 56px; color: var(--ink-3); font-size: 0.95rem; }
.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; border-top: 1px solid var(--line); padding-top: 28px; }
.foot a { color: var(--ink-2); }

/* Narrow screens */
@media (max-width: 980px) {
  .spread { grid-template-columns: repeat(2, 1fr); }
  .promises { grid-template-columns: repeat(2, 1fr); }
  .insights { grid-template-columns: 1fr; }
  .fog-card { grid-row: auto; }
}
@media (max-width: 860px) {
  .hero .wrap, .two, .price-grid { grid-template-columns: 1fr; }
  .two.flip > :first-child { order: 0; }
  .covers { height: 470px; max-width: 460px; width: 100%; margin-inline: auto; }
  .steps, .bookfacts, .plain { grid-template-columns: 1fr; }
  .band, .yours { grid-template-columns: 1fr; }
  .where { grid-template-columns: 1fr; }
  .where .arrow { transform: rotate(90deg); }
}
@media (max-width: 520px) {
  body { font-size: 17px; }
  .covers { height: 400px; }
  .cover { width: 220px; padding: 18px 16px 14px; }
  .cover.year .big { font-size: 4rem; }
  .cover.summer .big { font-size: 2.5rem; }
  .cover.trip .big { font-size: 2.2rem; }
  .cover.trip { top: 160px; }
  .promises { grid-template-columns: 1fr; }
  .spread { gap: 12px; }
  .timeline div { grid-template-columns: 1fr; gap: 4px; }
  .aside { grid-template-columns: 1fr; }
  .nav-links a { padding: 7px 9px; font-size: 0.92rem; }
  .brand { font-size: 1.35rem; }
  .brand img { width: 40px; height: 40px; }
}

/* The waitlist. site.js renders it only when config.js names an endpoint that really stores the
   address, so the page never shows a form that would drop what you typed. It sits in the closing
   band, which is always dark ink on light paper, so the field is drawn in the page's paper colour. */
.signup { margin: 0; width: min(440px, 100%); }
.signup label { display: block; font-family: var(--font-display); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.72; margin-bottom: 9px; }
.signup-row { display: flex; flex-wrap: wrap; gap: 10px; }
.signup input { flex: 1 1 200px; min-width: 0; font: inherit; font-size: 1.05rem; padding: 15px 20px; border-radius: 999px; border: 2px solid transparent; background: var(--ground); color: var(--ink); }
.signup input::placeholder { color: var(--ink-3); }
.signup input:focus-visible { outline: 3px solid var(--t3); outline-offset: 3px; }
.signup input[aria-invalid="true"] { border-color: var(--accent); }
.signup button { flex: 0 0 auto; border: 0; cursor: pointer; font: inherit; font-family: var(--font-display); font-weight: 900; }
.signup button[disabled] { opacity: 0.6; cursor: progress; }
.signup .fine { color: inherit; opacity: 0.68; margin-top: 14px; max-width: 44ch; }
.signup-msg { margin: 12px 0 0; font-weight: 600; }
.signup-msg:empty { margin: 0; }
/* The band inverts with the theme, so the message colours have to invert with it. */
.signup-msg[data-state="error"] { color: #ffb3ad; }
.signup-msg[data-state="ok"] { color: #b7e8c9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .signup-msg[data-state="error"] { color: #a8201a; }
  :root:not([data-theme="light"]) .signup-msg[data-state="ok"] { color: #14663a; }
}
.signup-done { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; }
.signup-done + p { margin: 10px 0 0; opacity: 0.7; }
@media (max-width: 560px) {
  .signup { width: 100%; }
  .signup input, .signup button { flex: 1 1 100%; width: 100%; }
  .signup button { justify-content: center; }
}

/* The hero on a phone: the books come between the promise and the buttons, so the thing the page
   is actually selling is on the first screen and the buttons sit under it where the thumb is. */
.hero .wrap { grid-template-areas: "say covers" "act covers"; row-gap: clamp(18px, 2.5vw, 26px); }
.hero-say { grid-area: say; align-self: end; }
.hero-act { grid-area: act; align-self: start; }
.hero .covers { grid-area: covers; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; grid-template-areas: "say" "covers" "act"; row-gap: 26px; }
  .mac .base { margin-inline: -2%; }
}
@media (max-width: 520px) {
  /* keep the whole stack of books on the screen: the summer cover was cut off at the left edge */
  .cover.summer { right: 36%; }
  .cover.year { right: 0; }
}