/* ==========================================================================
   Situated Strategies: design system
   ==========================================================================
   Brand guide v1 (September 2026), revised by the owner on October 20th 2026.
   Forest on cream, crimson as the one accent, sage for quiet fills. Newsreader
   for headlines, pull quotes and prices; IBM Plex Sans for body text; IBM Plex
   Mono for every label, button, badge and nav link. The wordmark itself is
   outlined DM Serif Display inside the logo files, and the logo mark keeps its
   own apricot. Tokens live in :root.

   Colour rules:
   - Crimson is text, a rule or a point on cream (5.5:1 passes). It is never
     used on forest, where it fails contrast; on forest the accent is cream and
     the hover colour is sage.
   - Body text is ink on cream. Labels are muted. On forest, text is cream and
     secondary text is sage.
   - Two type registers, deliberately far apart: large Newsreader headlines and
     small mono labels, with Plex Sans in between for reading.

   Sections: 1 tokens, 2 base, 3 header and nav, 4 buttons, 5 hero and bands,
   6 layout helpers, 7 cards, steps and tiers, 8 page pieces, 9 forms,
   10 footer, 11 motion and print, 12 flip cards and the hero word swap.
   ========================================================================== */

/* ---------- 1. tokens ---------- */
:root {
  --forest: #1E3B2C;
  --cream: #F6F0E4;
  --apricot: #E4955F;
  --sage: #C9D2BF;
  --ink: #17201A;
  --muted: #4A5A50;

  /* derived, kept in family */
  --forest-deep: #15291F;
  --forest-soft: #2A4F3C;
  --cream-deep: #EDE4D2;
  --cream-card: #FFFCF6;
  --sage-soft: #E2E7DB;
  --apricot-soft: #F4D4BC;
  --crimson: #C41200;
  --crimson-ink: #A00E00;
  --crimson-wash: #FBEAE7;
  --line: rgba(23, 32, 26, 0.12);
  --line-strong: rgba(23, 32, 26, 0.26);
  --line-on-forest: rgba(246, 240, 228, 0.18);

  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radius: 18px;
  --radius-sm: 10px;
  --edge: 1.25rem;
  --max: 1140px;
  --measure: 64ch;
  --shadow: 0 1px 0 rgba(23, 32, 26, 0.04), 0 20px 44px -28px rgba(23, 32, 26, 0.4);
}

/* ---------- 2. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: 0.002em;
  margin: 0 0 0.45em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(3rem, 7.5vw, 5.8rem); line-height: 1.0; letter-spacing: -0.01em; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); }
h3 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
h4 { font-size: 1.3rem; }
em, i { font-style: italic; }
h1 em, h2 em, h3 em { font-weight: 500; }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
a { color: var(--forest); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--forest-deep); text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { padding-left: 1.2em; }
li { margin: 0 0 0.4em; }
strong, b { font-weight: 500; }
small { font-size: 0.875em; }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--cream-deep); padding: 0.1em 0.35em; border-radius: 6px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
::selection { background: var(--crimson-wash); color: var(--ink); }

:focus-visible { outline: 3px solid var(--crimson); outline-offset: 3px; border-radius: 4px; }
.band-dark :focus-visible, .site-footer :focus-visible, .tier.featured :focus-visible { outline-color: var(--cream); }

.skip {
  font-weight: 400;
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--forest); color: var(--cream); padding: 0.6rem 1rem; border-radius: 999px;
  text-decoration: none; font-weight: 500;
}
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2 * var(--edge), var(--max)); margin-inline: auto; }
.wrap-narrow { max-width: 760px; }
.wrap-mid { max-width: 920px; }

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--crimson);
  margin: 0 0 0.9rem;
}
.band-dark .eyebrow, .site-footer .eyebrow { color: var(--sage); }
.lede { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 300; line-height: 1.55; color: var(--muted); max-width: var(--measure); }
.band-dark .lede { color: var(--sage); }
.muted { color: var(--muted); }
.band-dark .muted { color: var(--sage); }
.measure { max-width: var(--measure); }

/* ---------- 3. header and nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 240, 228, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 76px; }
.brand { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 52px; width: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 0.25rem; }
.site-nav a { text-decoration: none; color: var(--ink); font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.55rem 0.85rem; border-radius: 999px; display: inline-block; }
.site-nav a:hover { background: var(--cream-deep); color: var(--ink); }
.site-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--crimson); border-radius: 0; padding-inline: 0.35rem; margin-inline: 0.5rem; color: var(--crimson); }
.site-nav .nav-cta { margin-left: 0.75rem; }
.site-nav .nav-cta a { background: var(--forest); color: var(--cream); padding: 0.7rem 1.25rem; border-radius: 999px; box-shadow: none; margin: 0; letter-spacing: 0.12em; }
.site-nav .nav-cta a:hover { background: var(--forest-deep); }
.nav-toggle {
  display: none; align-items: center; gap: 0.6rem;
  background: transparent; border: 1px solid var(--line-strong); color: var(--ink);
  font: 500 0.78rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.55rem 0.9rem; border-radius: 999px; cursor: pointer;
}
.nav-toggle .bars { position: relative; width: 18px; height: 2px; background: currentColor; display: block; }
.nav-toggle .bars::before, .nav-toggle .bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; }
.nav-toggle .bars::before { top: -6px; } .nav-toggle .bars::after { top: 6px; }

@media (max-width: 860px) {
  .brand img { height: 44px; }
  .nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  body.nav-open .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; padding: 0.75rem var(--edge) 1.25rem; gap: 0.15rem; }
  .site-nav a { display: block; padding: 0.85rem 0.6rem; font-size: 0.9rem; }
  .site-nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--forest); padding-left: 0.9rem; margin: 0; }
  .site-nav .nav-cta { margin: 0.6rem 0 0; }
  .site-nav .nav-cta a { text-align: center; }
}

/* ---------- 4. buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: 500 0.8rem/1 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1rem 1.5rem; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--forest); color: var(--cream); }
.btn-primary:hover { background: var(--forest-deep); color: var(--cream); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--cream-deep); color: var(--ink); }
.btn-sm { padding: 0.7rem 1.1rem; font-size: 0.78rem; }
.band-dark .btn-primary { background: var(--cream); color: var(--forest); }
.band-dark .btn-primary:hover { background: var(--cream-deep); color: var(--forest); }
.band-dark .btn-ghost { color: var(--cream); border-color: var(--line-on-forest); }
.band-dark .btn-ghost:hover { background: rgba(246, 240, 228, 0.08); color: var(--cream); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.75rem; }
/* Official store badges from Apple's App Store marketing kit and Google's Play
   badge kit. Never recolored, cropped or restyled; both guidelines forbid it.
   Google's file carries its own clear space, so it is set 1.5x taller and
   pulled in with negative margins so the two black plates match. */
.store-badge { display: inline-flex; line-height: 0; border-radius: 8px; transition: transform 0.15s; }
.store-badge:hover { transform: translateY(-1px); }
.store-badge img { height: 44px; width: auto; }
.store-badge--play img { height: 66px; margin: -11px -7px; }
.text-link { font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; color: var(--crimson); }
.text-link:hover { color: var(--crimson-ink); }
.text-link::after { content: "\2192"; transition: transform 0.15s; }
.text-link:hover::after { transform: translateX(3px); }

/* ---------- 5. hero and bands ---------- */
section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.hero { padding-top: clamp(3rem, 7vw, 5.5rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 .accent { font-style: italic; font-weight: 500; color: var(--crimson); }
.hero-art { position: relative; aspect-ratio: 1; max-width: 460px; margin-inline: auto; width: 100%; }
.hero-art .terrain { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art .pin {
  position: absolute; background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.6rem 0.85rem; font-size: 0.8rem; font-weight: 400; letter-spacing: 0.06em; box-shadow: var(--shadow); display: flex; align-items: center; gap: 0.5rem;
}
.hero-art .pin { font-family: var(--font-mono); letter-spacing: 0.02em; }
.hero-art .pin::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--crimson); flex: none; }
.hero-art .p1 { left: 2%; top: 14%; }
.hero-art .p2 { right: 0; top: 36%; }
.hero-art .p3 { left: 10%; bottom: 20%; }
.hero-art .p4 { right: 8%; bottom: 6%; }
@media (max-width: 860px) { .hero-art { max-width: 340px; } .hero-art .pin { font-size: 0.78rem; padding: 0.45rem 0.65rem; } }
@media (max-width: 480px) {
  .btn { white-space: normal; text-align: center; letter-spacing: 0.1em; padding: 0.9rem 1.2rem; }
  .actions { gap: 0.6rem; }
}

.band-dark { background: var(--forest); color: var(--cream); }
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--cream); }
.band-dark a { color: var(--cream); }
.band-dark a:hover { color: var(--sage); }
.band-tint { background: var(--sage-soft); }
.band-cream2 { background: var(--cream-deep); }
.band-dark + .band-dark { padding-top: 0; }

/* ---------- 6. layout helpers ---------- */
.section-head { max-width: 760px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.split-wide { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; }
.split-narrow { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.split-form { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); }
@media (max-width: 860px) { .split, .split-wide, .split-narrow, .split-form { grid-template-columns: 1fr; } }
.sticky { position: sticky; top: 96px; }
@media (max-width: 860px) { .sticky { position: static; } }
.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); margin-top: 2.4rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.6rem; }
.prose ul, .prose ol { margin: 0 0 1.2em; }
.prose blockquote { margin: 1.5rem 0; padding-left: 1.25rem; border-left: 2px solid var(--crimson); font-family: var(--font-display); font-style: italic; font-size: 1.6rem; line-height: 1.3; color: var(--forest); }

/* ---------- 7. cards, steps and tiers ---------- */
.card {
  background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.2rem); position: relative;
}
.card p { font-weight: 300; }
.card h3 { margin-top: 0.1rem; }
.card p:last-of-type { margin-bottom: 0; }
.card-hover { transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--line-strong); }
.card-hover .stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-hover .stretched { text-decoration: none; color: inherit; }
.card .text-link { margin-top: 0.9rem; }
.card-media { aspect-ratio: 16 / 10; border-radius: var(--radius-sm); overflow: hidden; margin: -0.25rem 0 1.1rem; background: var(--cream-deep); display: grid; place-items: center; }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-media.logo img { width: 56%; height: auto; object-fit: contain; }
.card-media.dark { background: var(--ink); }
.card-media.cream { background: #fff; }
.card-media.sand { background: var(--cream-deep); }
.card-media.forest { background: var(--forest); }
.card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.card-top h3 { margin: 0; }
.badge {
  display: inline-block; font-family: var(--font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.35rem 0.65rem; border-radius: 999px; background: var(--sage-soft); color: var(--forest); white-space: nowrap;
}
.badge.live { background: var(--forest); color: var(--cream); }
.badge.warm { background: var(--crimson-wash); color: var(--crimson-ink); }
.band-dark .badge { background: rgba(246, 240, 228, 0.12); color: var(--cream); }

.steps { counter-reset: step; display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 1rem; }
.step .num {
  font-family: var(--font-display); font-style: italic; font-size: 3.6rem; line-height: 1; color: var(--crimson); display: block; margin-bottom: 0.75rem;
}
.step h3 { margin-bottom: 0.5rem; }
.step p { color: var(--muted); font-weight: 300; }

.tiers { display: grid; gap: 1.5rem; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }
.tier { display: flex; flex-direction: column; gap: 0.75rem; }
.tier .eyebrow { margin-bottom: 0.25rem; }
.tier h3 { margin: 0; font-size: 1.95rem; }
.tier .price { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--forest); margin: 0.25rem 0 0.5rem; }
.tier .price small { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; margin-left: 0.5rem; }
.tier .for { color: var(--muted); font-weight: 300; }
.tier ul { list-style: none; padding: 0; margin: 0.25rem 0 0.5rem; }
.tier li { padding-left: 1.5rem; position: relative; margin-bottom: 0.5rem; }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--crimson); }
.tier.featured li::before { background: var(--cream); }
.tier .actions { margin-top: auto; padding-top: 0.5rem; }
.tier.featured { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.tier.featured h3, .tier.featured .price { color: var(--cream); }
.tier.featured .for, .tier.featured .price small, .tier.featured .eyebrow { color: var(--sage); }
.tier.featured .btn-primary { background: var(--cream); color: var(--forest); }
.tier.featured .btn-primary:hover { background: var(--cream-deep); color: var(--forest); }
.tier.featured .btn-ghost { color: var(--cream); border-color: var(--line-on-forest); }
.tier.featured a { color: var(--cream); }

.list-check { list-style: none; padding: 0; margin: 0 0 1.2em; }
.list-check li { padding-left: 1.7rem; position: relative; margin-bottom: 0.6rem; font-weight: 300; }
.list-check li strong { font-weight: 500; }
.list-check li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 1rem; height: 1rem; border-radius: 50%;
  background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23F6F0E4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.list-not { list-style: none; padding: 0; margin: 0 0 1.2em; }
.list-not li { padding-left: 1.7rem; position: relative; margin-bottom: 0.6rem; color: var(--muted); font-weight: 300; }
.list-not li::before {
  content: ""; position: absolute; left: 0; top: 0.45em; width: 1rem; height: 1rem; border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' fill='none' stroke='%234A5A50' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* ---------- 8. page pieces ---------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-size: 0.9rem; color: var(--muted); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--forest); text-decoration: underline; }
.breadcrumb span::before { content: "/"; margin-right: 0.5rem; color: var(--line-strong); }

.figure { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--cream-deep); }
.figure img { width: 100%; height: 100%; object-fit: cover; }
.figure.arch { border-radius: 999px 999px var(--radius) var(--radius); aspect-ratio: 4 / 5; }
.figure.square { aspect-ratio: 1; }
.figure.wide { aspect-ratio: 4 / 3; }
.figure figcaption { font-size: 0.85rem; color: var(--muted); padding: 0.75rem 1rem; }

.logo-panel { aspect-ratio: 1; border-radius: var(--radius); display: grid; place-items: center; padding: 18%; background: var(--cream-deep); max-width: 360px; }
.logo-panel img { width: 100%; height: auto; }
.logo-panel.dark { background: var(--ink); }
.logo-panel.white { background: #fff; }
.logo-panel.sand { background: var(--cream-deep); }
.logo-panel.photo { padding: 0; overflow: hidden; }
.logo-panel.photo img { width: 100%; height: 100%; object-fit: cover; }

.pill-row { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pill-row li { border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.45rem 0.9rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }

.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--sage); }
.timeline li { padding: 0 0 1.25rem 1.25rem; position: relative; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 0.45em; width: 12px; height: 12px; border-radius: 50%; background: var(--crimson); border: 2px solid var(--cream); }
.timeline b { display: block; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.08em; font-size: 0.7rem; text-transform: uppercase; color: var(--muted); margin-bottom: 0.2rem; }

.callout { border-radius: var(--radius); padding: 1.5rem 1.6rem; background: var(--cream-card); border: 1px solid var(--line); }
.callout.green { background: var(--sage-soft); border-color: transparent; }
.callout.forest { background: var(--forest); color: var(--cream); border-color: transparent; }
.callout.forest h3, .callout.forest h2 { color: var(--cream); }
.callout.forest a { color: var(--cream); }

.contact-block { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem 2rem; margin-top: 1rem; }
.contact-block .label { display: block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: var(--muted); margin-bottom: 0.35rem; }
address { font-style: normal; }

.faq details { border-top: 1px solid var(--line); padding: 1rem 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 500; font-size: 1.55rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "[ + ]"; font-family: var(--font-mono); font-weight: 500; color: var(--crimson); font-size: 0.8rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "[ x ]"; }
.faq details p { margin-top: 0.75rem; color: var(--muted); font-weight: 300; max-width: var(--measure); animation: faq-rise 0.4s ease-out; }
@keyframes faq-rise { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.quote { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1.25; color: var(--forest); max-width: 28ch; margin: 0; }
.band-dark .quote { color: var(--cream); }

.footnotes { font-size: 0.92rem; color: var(--muted); }
.footnotes li { margin-bottom: 0.6rem; }

.guide-list { list-style: none; padding: 0; margin: 0; }
.guide-list li { border-top: 1px solid var(--line); padding: 1.25rem 0; margin: 0; }
.guide-list li:last-child { border-bottom: 1px solid var(--line); }
.guide-list li > a { font-family: var(--font-display); font-weight: 500; font-size: 1.65rem; text-decoration: none; }
.guide-list li > a:hover { text-decoration: underline; }
.guide-list .eyebrow { display: block; margin: 0.5rem 0 0; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--line); }
th { font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* ---------- 9. forms ---------- */
.form { display: grid; gap: 1.1rem; }
.form .row { display: grid; gap: 1.1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.field label { display: block; font-weight: 400; margin-bottom: 0.45rem; }
.field .hint { display: block; font-size: 0.88rem; color: var(--muted); margin-top: 0.35rem; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: var(--cream-card);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0.8rem 0.95rem;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%234A5A50' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; background-size: 12px; padding-right: 2.4rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid var(--crimson); outline-offset: 1px; border-color: var(--forest); }
.field.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-status { border-radius: var(--radius-sm); padding: 0.9rem 1rem; font-weight: 400; display: none; }
.form-status.ok { display: block; background: var(--sage-soft); color: var(--forest); }
.form-status.err { display: block; background: var(--crimson-wash); color: var(--crimson-ink); }
.form .btn[disabled] { opacity: 0.6; cursor: wait; transform: none; }

/* ---------- 10. footer ---------- */
.site-footer { background: var(--forest); color: var(--cream); padding: clamp(3rem, 6vw, 4.5rem) 0 2rem; }
.site-footer a { color: var(--cream); text-decoration: none; }
.site-footer a:hover { color: var(--sage); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 2.5rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer .brand img { height: 56px; }
.site-footer .blurb { color: var(--sage); font-weight: 300; margin-top: 1.1rem; max-width: 36ch; }
.site-footer h2 { font-family: var(--font-mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sage); margin: 0 0 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 0.55rem; color: var(--cream); }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-top: 1px solid var(--line-on-forest); margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.88rem; color: var(--sage); }

/* ---------- 11. motion and print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
  .site-header, .site-footer, .nav-toggle, .actions, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  a { color: #000; }
  section { padding: 1.5rem 0; }
  .flip-card .flip-back { display: block !important; position: static; transform: none; }
}

/* ---------- 12. flip cards and the hero word swap ---------- */
/* A portfolio card with two faces. The front carries the logo, the name and
   one line; the back carries what it took and the link. Hover flips it on a
   device with a pointer, the button flips it everywhere, and the faces share
   one grid cell so the card is as tall as its taller face and nothing is
   clipped. With reduced motion the global rule above removes the transition,
   so the card simply shows the other face. */
.flip-grid { perspective: 1600px; }
.flip-card { position: relative; background: transparent; border: 0; padding: 0; }
.flip-card .flip-inner { display: grid; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.1, 1); height: 100%; }
.flip-card.is-flipped .flip-inner { transform: rotateY(180deg); }
@media (hover: hover) { .flip-card:hover .flip-inner, .flip-card:focus-within .flip-inner { transform: rotateY(180deg); } .flip-card.is-flipped:hover .flip-inner { transform: rotateY(180deg); } }
.flip-card .flip-face {
  grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.5rem, 2.6vw, 2.2rem); display: flex; flex-direction: column; min-width: 0;
}
.flip-card .flip-back { transform: rotateY(180deg); background: var(--forest); color: var(--cream); border-color: var(--forest); justify-content: space-between; gap: 1rem; }
.flip-card .flip-back p { color: var(--cream); font-weight: 300; }
.flip-card .flip-back .eyebrow { color: var(--sage); }
.flip-card .flip-back .text-link { color: var(--cream); }
.flip-card .flip-back .text-link:hover { color: var(--sage); }
.flip-card .flip-back :focus-visible { outline-color: var(--cream); }
.flip-card .flip-front p { font-weight: 300; margin-bottom: 1rem; }
.flip-card .flip-front .card-top { margin-top: auto; }
.flip-btn {
  align-self: flex-start; margin-top: auto; background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--crimson);
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.flip-btn::before { content: "[ + ]"; }
.flip-back .flip-btn { color: var(--sage); }
.flip-back .flip-btn::before { content: "[ x ]"; }
.flip-card .flip-back .actions { margin-top: 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* The hero's one moving word. The alternates sit in the same grid cell and
   fade through once on load; the last one is the real line, so a late reader
   sees a finished sentence. */
.swap { display: inline-grid; vertical-align: baseline; }
.swap > span { grid-area: 1 / 1; transition: opacity 0.35s, transform 0.45s cubic-bezier(0.2, 0.7, 0.1, 1); }
.swap > span[aria-hidden="true"] { opacity: 0; transform: translateY(0.3em); pointer-events: none; }

/* Arrival. Anything marked .reveal is fully visible by default; only when
   main.js has loaded (html.js) does it start a little low and faded, and the
   observer brings it up the first time it scrolls into view. Children of a
   .reveal-group arrive one after another. */
html.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease-out, transform 0.8s cubic-bezier(0.2, 0.7, 0.1, 1); }
html.js .reveal.is-in { opacity: 1; transform: none; }
html.js .reveal-group > * { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease-out, transform 0.8s cubic-bezier(0.2, 0.7, 0.1, 1); }
html.js .reveal-group.is-in > * { opacity: 1; transform: none; }
html.js .reveal-group.is-in > :nth-child(2) { transition-delay: 0.12s; }
html.js .reveal-group.is-in > :nth-child(3) { transition-delay: 0.24s; }
html.js .reveal-group.is-in > :nth-child(4) { transition-delay: 0.36s; }
html.js .reveal-group.is-in > :nth-child(5) { transition-delay: 0.48s; }
html.js .reveal-group.is-in > :nth-child(6) { transition-delay: 0.6s; }
html.js .step .num { clip-path: inset(100% 0 0 0); transition: clip-path 0.7s cubic-bezier(0.2, 0.7, 0.1, 1) 0.1s; }
html.js .is-in .step .num, html.js .step.is-in .num { clip-path: inset(0 0 0 0); }

/* The hero pins land in launch order, then lean toward the pointer. */
html.js .hero-art .pin { opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.5s ease-out, transform 0.6s cubic-bezier(0.2, 0.7, 0.1, 1); }
html.js .hero-art.is-in .pin { opacity: 1; transform: translate(var(--dx, 0), var(--dy, 0)) scale(1); }
html.js .hero-art.is-in .p1 { transition-delay: 0.3s; }
html.js .hero-art.is-in .p2 { transition-delay: 0.6s; }
html.js .hero-art.is-in .p3 { transition-delay: 0.9s; }
html.js .hero-art.is-in .p4 { transition-delay: 1.2s; }
html.js .hero-art.is-in.is-live .pin { transition-delay: 0s; transition-duration: 0.25s; }

/* Links in running text get a crimson underline that sweeps in. */
.prose a, .lede a, .card p a, .faq p a {
  text-decoration: none; background-image: linear-gradient(var(--crimson), var(--crimson)); background-repeat: no-repeat;
  background-size: 100% 1px; background-position: 0 100%; transition: background-size 0.25s ease-out, color 0.15s;
}
.prose a:hover, .lede a:hover, .card p a:hover, .faq p a:hover { background-size: 100% 2px; color: var(--crimson-ink); }
.band-dark .lede a { background-image: linear-gradient(var(--sage), var(--sage)); }
.band-dark .lede a:hover { color: var(--sage); }

/* Tiers lift a little under the pointer, and the featured one lifts more. */
.tier { transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.1, 1), box-shadow 0.3s; }
@media (hover: hover) { .tier:hover { transform: translateY(-4px); box-shadow: var(--shadow); } }

/* ---------- 13. the hero pins, the transcript and the launch fingerprints ---------- */
/* The pins are buttons. Pressing one writes what that stage involves into the
   line under the map. */
.hero-side { display: grid; gap: 1rem; justify-items: center; }
.hero-art .pin { font: inherit; font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink); cursor: pointer; text-align: left; }
.hero-art .pin:hover, .hero-art .pin[aria-pressed="true"] { border-color: var(--crimson); color: var(--crimson-ink); }
.hero-art .pin[aria-pressed="true"]::before { background: var(--crimson); box-shadow: 0 0 0 4px var(--crimson-wash); }
.pin-detail { max-width: 460px; width: 100%; margin: 0; font-size: 0.95rem; color: var(--muted); font-weight: 300; min-height: 3.2em; }
.pin-detail-label { display: block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--crimson); margin-bottom: 0.3rem; }

/* The transcript. Jefferson-style: numbered lines, speaker codes, pauses in
   seconds, overlap brackets. The notes in between are Olivia's reading. Lines
   arrive one after another the first time the block scrolls into view. */
.transcript { background: var(--cream-card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(1.2rem, 2.4vw, 2rem); }
.ca { list-style: none; margin: 0; padding: 0; font-family: var(--font-mono); font-size: 0.92rem; line-height: 1.5; }
.ca-line { display: grid; grid-template-columns: 1.6rem 2.6rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; padding: 0.22rem 0; }
.ca-n { color: var(--muted); font-size: 0.72rem; }
.ca-who { color: var(--crimson); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.08em; }
.ca-t { color: var(--ink); white-space: pre-wrap; }
.ca-note { margin: 0.5rem 0 0.9rem 4.8rem; padding-left: 0.9rem; border-left: 2px solid var(--crimson); }
.ca-note p { margin: 0; font-family: var(--font-body); font-size: 0.95rem; line-height: 1.5; color: var(--muted); font-weight: 300; }
.ca-key { font-family: var(--font-mono); font-size: 0.74rem; color: var(--muted); margin-top: 1rem; }
@media (max-width: 480px) { .ca { font-size: 0.84rem; } .ca-note { margin-left: 2.4rem; } }
html.js .ca-line, html.js .ca-note { opacity: 0.14; transform: translateY(5px); transition: opacity 0.45s ease-out, transform 0.5s cubic-bezier(0.2, 0.7, 0.1, 1); }
html.js .ca-line.is-in, html.js .ca-note.is-in { opacity: 1; transform: none; }

/* The launch fingerprint. Seven stages, lit for what each product needed. */
.fp { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fp li { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.28rem 0.45rem; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); line-height: 1; }
.fp li.on { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.fp li.soon { border-style: dashed; border-color: var(--crimson); color: var(--crimson-ink); }
.fp li.off { opacity: 0.55; }
.flip-card .flip-front .fp { margin-top: 0.6rem; margin-bottom: 0.9rem; }