@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Days21Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2?v=13') format('woff2');
}

@font-face {
  font-family: 'Days21Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/fraunces-latin-italic.woff2?v=13') format('woff2');
}

/* =========================================================================
   21days — site stylesheet


   Compiled Tailwind (`assets/css/utilities.css`) handles layout: grid, flex,
   spacing, breakpoints. This file handles everything Tailwind has no opinion
   about — the typography, the palette, the rules, the textures and the motion.
   Keeping the split that way means the art direction lives in one readable
   place rather than being spread across four hundred utility classes in the
   markup. After changing utility classes in HTML, run `npm run build:css`.

   The page starts cream, then green. Cream is the first screen — the argument.
   Green is where the product asserts itself. Paper sections in between keep
   it from reading as a dark dashboard the whole way down.
   ========================================================================= */

:root {
  /* Deep leaf. Four steps so a raised card sits off the section without a
     heavy border. */
  --ink: #14352a;
  --navy: #1a4033;
  --navy-raised: #214d3e;
  --navy-line: #2f5c4a;

  /* Cream. Warm, not white — a cool white next to this green goes mint and
     the page looks like a spa brochure. */
  --paper: #f4efe4;
  --paper-raised: #fbf7ee;
  --paper-line: #e4d9c8;

  /* Pale leaf on green; a darker green on cream, so the same accent reads
     in both places. */
  --gold: #cfe0c8;
  --gold-lift: #e4efe0;
  --gold-dim: rgba(31, 92, 64, 0.22);

  --gold-on-paper: #1f5c40;

  --on-dark: #eef4ea;
  --on-dark-muted: #a3b8aa;
  --on-paper: #1a2e26;
  --on-paper-muted: #5a6b62;

  --measure: 34rem; /* Reading width for body copy. */
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  /* The header is fixed, so an anchor landing at the very top of the viewport
     lands underneath it. Every in-page jump on the site is corrected here
     rather than with a spacer element inside each section. */
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background: var(--paper);
  color: var(--on-paper);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden; /* Belt and braces: nothing may cause a sideways scroll. */
}

::selection { background: var(--gold); color: var(--ink); }

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */

.display {
  font-family: 'Days21Display', ui-serif, Georgia, serif;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.022em;
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 9, 'wght' 400, 'SOFT' 0, 'WONK' 1;
}

/* Fluid display sizes. clamp() rather than breakpoints so a headline never
   sits one pixel over the edge on the one phone width nobody tested. */
.d1 { font-size: clamp(2.6rem, 7.2vw, 5.1rem); }
.d2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.d3 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); line-height: 1.18; }

.serif-italic { font-style: italic; font-variation-settings: 'opsz' 9, 'wght' 400, 'SOFT' 8, 'WONK' 1; }
.text-gold { color: var(--gold); }

/* The eyebrow. Small caps, wide tracking, a gold rule to its left. It marks a
   section the way a standfirst marks a column. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: '';
  width: 2.2rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.85;
}
.eyebrow--center::after {
  content: '';
  width: 2.2rem;
  height: 1px;
  background: var(--gold);
  opacity: 0.85;
}

/* Section numerals — 01 / 02 / 03. Editorial furniture; they tell you how long
   the page is without a progress bar. */
.numeral {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  color: var(--gold);
  opacity: 0.75;
}

.lede { font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.6; }
.measure { max-width: var(--measure); }

/* -------------------------------------------------------------------------
   Sections: cream | green | cream | green
   ------------------------------------------------------------------------- */

.sec { position: relative; padding: clamp(4.5rem, 9vw, 8rem) 0; }
.sec--navy { background: var(--navy); color: var(--on-dark); }
.sec--ink { background: var(--ink); color: var(--on-dark); }
.sec--paper { background: var(--paper); color: var(--on-paper); }

/* Muted body copy. The default is the dark-background value, because the hero
   and the footer are dark but are not .sec--* sections — without a base rule
   they would inherit full-strength text and lose the hierarchy. */
.muted { color: var(--on-dark-muted); }
.sec--paper .muted { color: var(--on-paper-muted); }
.sec--navy .muted, .sec--ink .muted { color: var(--on-dark-muted); }
.card--paper .muted { color: var(--on-paper-muted); }
/* Navy cards on a paper section keep the dark-section type colours.
   Without this, .sec--paper .muted paints charcoal on navy and the copy
   disappears. */
.sec--paper .card:not(.card--paper),
.sec--paper .card:not(.card--paper) .display {
  color: var(--on-dark);
}
.sec--paper .card:not(.card--paper) .muted {
  color: var(--on-dark-muted);
}

/* Every gold thing on a paper section, moved to the readable gold in one
   place. Two classes beats Tailwind's single-class .text-gold on specificity,
   so this wins wherever it applies without any !important. */
.sec--paper .numeral,
.sec--paper .eyebrow,
.sec--paper .text-gold,
.sec--paper .tick,
.sec--paper .field__label { color: var(--gold-on-paper); }
.sec--paper .numeral { opacity: 1; }
.sec--ink .numeral { opacity: 1; }
.sec--paper .eyebrow::before,
.sec--paper .eyebrow::after { background: var(--gold-on-paper); }

/* The seam between two sections. A single gold hairline that fades out at both
   ends, so the join reads as a printed rule rather than a border. */
.seam {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim) 18%, var(--gold-dim) 82%, transparent);
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--paper);
  color: var(--on-paper);
  overflow: visible;
  isolation: isolate;
}
.hero .muted { color: var(--on-paper-muted); }
.hero .eyebrow,
.hero .text-gold { color: var(--gold-on-paper); }
.hero .eyebrow::before,
.hero .eyebrow::after { background: var(--gold-on-paper); }
.hero .btn--gold {
  background: var(--gold-on-paper);
  color: var(--paper);
}
.hero .btn--gold:hover { background: var(--ink); }
.hero .btn--ghost {
  color: var(--on-paper);
  border-color: rgba(31, 92, 64, 0.35);
}
.hero .btn--ghost:hover {
  border-color: var(--ink);
  background: rgba(31, 92, 64, 0.06);
}
.hero .triple__item,
.sec--paper .triple__item {
  border-color: var(--paper-line);
  background: rgba(255, 255, 255, 0.4);
}
.hero .triple__label,
.hero .triple__join,
.hero .triple__item:not(:last-of-type)::after,
.sec--paper .triple__label,
.sec--paper .triple__join,
.sec--paper .triple__item:not(:last-of-type)::after { color: var(--gold-on-paper); }

/* Scale of the register, then the only question that matters on this page. */
.hero-proof {
  margin-top: 2.25rem;
  max-width: 48rem;
}
.hero-proof__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.35rem 2.5rem;
}
.hero-proof__n {
  margin: 0;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2rem, 4.4vw, 2.85rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold-on-paper);
}
.hero-proof__l {
  margin: 0.55rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-paper-muted);
}
.hero-proof__note {
  margin: 1.15rem 0 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--on-paper-muted);
}
.hero-proof__q {
  margin: 2.5rem 0 0;
  font-family: 'Days21Display', Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  font-style: italic;
  font-variation-settings: 'opsz' 9, 'wght' 400, 'SOFT' 8, 'WONK' 1;
  color: var(--on-paper);
}
@media (min-width: 560px) {
  .hero-proof__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 900px) {
  .hero-proof__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Blueprint grid. Two repeating-linear-gradients, masked to fade toward the
   bottom so the copy never has to fight it. This is the only texture on the
   site and it earns its place: the product is the comment window on a street. */
.hero__grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image:
    repeating-linear-gradient(0deg, rgba(31, 92, 64, 0.08) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, rgba(31, 92, 64, 0.08) 0 1px, transparent 1px 64px);
  -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 15%, transparent 78%);
  mask-image: radial-gradient(120% 85% at 50% 0%, #000 15%, transparent 78%);
}

/* A single warm glow behind the headline, off-centre. Centred glows look like a
   stock gradient; off-centre reads as light coming from somewhere. */
.hero__glow {
  position: absolute;
  z-index: -1;
  top: -18%;
  left: 58%;
  width: min(70rem, 130vw);
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(31, 92, 64, 0.12), transparent 62%);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */

.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  background: var(--ink);
  border-bottom: 1px solid var(--navy-line);
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}
.masthead.is-stuck {
  background: rgba(20, 53, 42, 0.94);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--navy-line);
}

.wordmark-img {
  height: 1.15rem;
  width: auto;
  display: block;
}

.masthead__bar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.75rem;
  min-height: 52px;
  padding-block: 0.35rem;
}
.masthead__brand {
  justify-self: start;
}
.masthead__nav {
  display: none;
  align-items: center;
  gap: 2.25rem;
}
.masthead__end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.masthead__cta {
  padding: 0.45rem 0.9rem !important;
  font-size: 0.8rem !important;
}
@media (min-width: 768px) {
  .masthead__bar {
    grid-template-columns: 1fr auto 1fr;
  }
  .masthead__nav {
    display: flex;
    justify-self: center;
  }
}

.navlink {
  position: relative;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--on-paper-muted);
  padding: 0.35rem 0;
  transition: color 0.25s ease;
}
.masthead .navlink { color: var(--on-dark-muted); }
.navlink::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--gold-on-paper);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.masthead .navlink::after { background: var(--gold); }
.navlink:hover { color: var(--on-paper); }
.masthead .navlink:hover { color: var(--on-dark); }
.navlink:hover::after, .navlink[aria-current='page']::after { transform: scaleX(1); }
.navlink[aria-current='page'] { color: var(--on-paper); }
.masthead .navlink[aria-current='page'] { color: var(--on-dark); }

.drawer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
  background: var(--ink);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.drawer.is-open { max-height: 32rem; }

.burger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--on-dark);
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.burger span + span { margin-top: 5px; }
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: 2px; /* Near-square. Rounded pills read as consumer app. */
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.25s ease, color 0.25s ease,
    border-color 0.25s ease, box-shadow 0.25s ease;
}
.btn:active { transform: translateY(1px); }

.btn--gold {
  background: var(--gold-on-paper);
  color: var(--paper);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset;
}
.btn--gold:hover { background: var(--ink); color: var(--paper); }
.masthead .btn--gold,
.sec--navy .btn--gold,
.sec--ink .btn--gold {
  background: var(--paper);
  color: var(--ink);
}
.masthead .btn--gold:hover,
.sec--navy .btn--gold:hover,
.sec--ink .btn--gold:hover { background: var(--gold-lift); }

.btn--ghost {
  border-color: rgba(31, 92, 64, 0.35);
  color: var(--on-paper);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--ink); background: rgba(31, 92, 64, 0.06); }
.sec--navy .btn--ghost,
.sec--ink .btn--ghost {
  border-color: rgba(207, 224, 200, 0.45);
  color: var(--on-dark);
}
.sec--navy .btn--ghost:hover,
.sec--ink .btn--ghost:hover {
  border-color: var(--gold);
  background: rgba(207, 224, 200, 0.1);
}

.sec--paper .btn--ghost { color: var(--on-paper); border-color: rgba(22, 35, 46, 0.28); }
.sec--paper .btn--ghost:hover { border-color: var(--ink); background: rgba(22, 35, 46, 0.05); }

/* An inline text link that ends in an arrow. The arrow moves, the text does
   not — cheaper to read than a whole element sliding. */
.tlink {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold-on-paper);
  transition: color 0.2s ease;
}
.tlink svg { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1); }
.tlink:hover { color: var(--ink); }
.sec--navy .tlink,
.sec--ink .tlink { color: var(--gold); }
.sec--navy .tlink:hover,
.sec--ink .tlink:hover { color: var(--gold-lift); }
  transition: color 0.2s ease;
}
.tlink svg { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1); }
.tlink:hover { color: var(--gold-lift); }
.tlink:hover svg { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */

.card {
  position: relative;
  padding: 1.9rem;
  border: 1px solid var(--navy-line);
  background: var(--navy-raised);
  color: var(--on-dark);
  border-radius: 3px;
  transition: border-color 0.3s ease, transform 0.3s ease, background-color 0.3s ease;
}
.card:hover { border-color: var(--gold-dim); transform: translateY(-3px); }

/* A gold rule that grows along the card's top edge on hover. One gesture,
   repeated everywhere something is hoverable, so the site has a single idea
   about what "live" looks like. */
.card::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.card:hover::before { transform: scaleX(1); }

.card--paper {
  background: var(--paper-raised);
  border-color: var(--paper-line);
  color: var(--on-paper);
}
.card--paper:hover { border-color: rgba(196, 160, 106, 0.6); }

/* Documentary stills on the three public records. Kept off the hero. */
.still {
  margin: 0 0 2.5rem;
}
.still__frame {
  position: relative;
  aspect-ratio: 2.2 / 1;
  overflow: hidden;
  border-radius: 3px;
  background: var(--ink);
  border: 1px solid var(--navy-line);
}
.sec--paper .still__frame {
  border-color: var(--paper-line);
}
.still__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.02) saturate(1.08);
}
.still__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 78%, rgba(22, 28, 25, 0.12) 100%);
}
.sec--navy .still__frame::after {
  background: linear-gradient(180deg, transparent 78%, rgba(22, 28, 25, 0.16) 100%);
}
.still__caption {
  margin: 0.7rem 0 0;
  font-size: 0.88rem;
  color: var(--on-dark-muted);
}
.sec--paper .still__caption {
  color: var(--on-paper-muted);
}
.still__caption::before {
  content: '— ';
  color: var(--gold);
}
.sec--paper .still__caption::before {
  color: var(--gold-on-paper);
}
@media (max-width: 640px) {
  .still__frame { aspect-ratio: 16 / 10; }
}

/* A + B + C in the hero. Plus signs are painted with ::after on desktop so
   they never take a grid track (five children on three columns wraps C). */
.triple {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-top: 2.25rem;
  align-items: stretch;
}
.triple__item {
  min-width: 0;
  padding: 1.25rem;
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.03);
}
.triple--tight {
  margin-top: 2rem;
}
.triple--ink {
  margin-top: 0;
}
.sec--ink .triple__item {
  border-color: var(--navy-line);
  background: rgba(255, 255, 255, 0.04);
}
.sec--ink .triple__label,
.sec--ink .triple__join,
.sec--ink .triple__item:not(:last-of-type)::after {
  color: var(--gold);
}
.triple--tight .triple__item {
  padding: 1rem 1.15rem;
}
.triple--tight .muted {
  font-size: 0.92rem;
  line-height: 1.45;
}
.triple__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
}
.triple__join {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--gold);
}
@media (min-width: 780px) {
  .triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(2.75rem, 4vw, 3.75rem);
  }
  .triple__join { display: none; }
  .triple__item { position: relative; }
  .triple__item:not(:last-of-type)::after {
    content: '+';
    position: absolute;
    left: 100%;
    top: 50%;
    margin-left: calc(clamp(2.75rem, 4vw, 3.75rem) / 2);
    transform: translate(-50%, -50%);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--gold);
    pointer-events: none;
  }
}

.compare {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
  align-items: stretch;
}
@media (min-width: 800px) {
  .compare {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: 1.5rem;
    align-items: stretch;
  }
}
.compare__col {
  padding: 1.8rem;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--on-paper);
}
.sec--navy .compare__col {
  border-color: var(--navy-line);
  background: var(--navy-raised);
  color: var(--on-dark);
}
.compare__col--theirs {
  background: transparent;
  opacity: 0.88;
}
.compare__col--ours {
  background: var(--ink);
  color: var(--on-dark);
  border: 1px solid var(--gold);
  box-shadow:
    0 0 0 1px rgba(196, 160, 106, 0.18),
    0 22px 48px rgba(22, 28, 25, 0.22);
  padding: 2rem 1.9rem 1.85rem;
  display: flex;
  flex-direction: column;
}
.compare__kicker {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--on-paper-muted);
}
.sec--navy .compare__kicker { color: var(--on-dark-muted); }
.compare__col--ours .compare__kicker { color: var(--gold); }
.sec--paper .compare__col--ours .compare__kicker { color: var(--gold); }
.sec--navy .compare__col--ours .compare__kicker { color: var(--gold); }
.compare__heading {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.2;
  margin: 0.75rem 0 0;
}
.compare__col--ours .compare__heading { color: var(--on-dark); }
.compare__list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  font-size: 0.95rem;
  color: var(--on-paper-muted);
}
.sec--navy .compare__list { color: var(--on-dark-muted); }
.compare__col--ours .compare__list { color: var(--on-dark-muted); }
.compare__list li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.compare__mark {
  flex: none;
  opacity: 0.55;
}
.compare__col--ours .compare__mark {
  color: var(--gold);
  opacity: 1;
}
.sec--navy .compare__col--ours .compare__mark { color: var(--gold); }
.compare__price {
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gold-dim);
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.55rem;
  line-height: 1.2;
  color: var(--gold-lift);
}
.compare__price span {
  display: block;
  margin-top: 0.35rem;
  font-family: Inter, sans-serif;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--on-dark-muted);
}

.week {
  margin-top: 3.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--paper-line);
}
.sec--navy .week { border-top-color: var(--navy-line); }
.week__grid {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
@media (min-width: 800px) {
  .week__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }
  .week__beat .display.d3 {
    min-height: 2.4rem;
  }
  .week__note {
    min-height: 4.6em;
  }
  .week__beat > .ex-mail,
  .week__beat > .ex-job,
  .week__beat > .ex-letter-scale {
    margin-top: 1.1rem;
    width: 100%;
    height: 34rem;
    overflow: hidden;
  }
  .week__beat > .shot {
    margin-top: 1.1rem;
    width: 100%;
    height: 34rem;
    position: relative;
    display: block;
    overflow: hidden;
  }
  .week__beat > .ex-mail,
  .week__beat > .ex-job {
    display: flex;
    flex-direction: column;
  }
  .week__beat > .ex-mail .ex-card {
    flex: 1;
  }
  .week__beat > .ex-job .ex-map {
    flex: 0 0 13rem;
    height: 13rem;
  }
  .week__beat > .ex-letter-scale {
    overflow: hidden;
    background: var(--ink);
  }
}
.week__label {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-on-paper);
}
.sec--navy .week__label { color: var(--gold); }
.week__note {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
}
.week__beat .display.d3 { margin: 0.4rem 0 0; }

.shot {
  margin-top: 1.1rem;
  border: 1px solid var(--navy-line);
  border-radius: 3px;
  overflow: hidden;
  background: var(--navy-raised);
}
.sec--paper .shot { border-color: var(--paper-line); }
.shot img {
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 800px) {
  .week__beat > .shot img,
  .shot-row .shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: top center;
  }
  .week__beat > .shot--page img,
  .shot-row .shot--page img {
    object-fit: cover;
    object-position: top center;
  }
}
.shot-row {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.75rem;
}
@media (min-width: 800px) {
  .shot-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-row .shot {
    position: relative;
    height: 28rem;
    display: block;
    overflow: hidden;
  }
}
.letter-still {
  margin-top: 1.1rem;
  height: 34rem;
  overflow: hidden;
  padding: 1.35rem 1.4rem 1.5rem;
  border-radius: 3px;
  background: #fbfaf7;
  color: #1e2428;
  border: 1px solid var(--paper-line);
}
.sec--navy .letter-still {
  border-color: var(--navy-line);
}
.letter-still__brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.15rem;
  margin: 0 0 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--paper-line);
}
.letter-still__brand img { display: block; }
.letter-still__to {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: #5c6560;
}
.letter-still__date {
  margin: 0.85rem 0 0;
  font-size: 0.82rem;
  color: #5c6560;
}
.letter-still__subject {
  margin: 0.85rem 0 0;
  font-weight: 600;
  font-size: 0.95rem;
}
.letter-still__body {
  margin: 0.85rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
}

.ex[hidden] { display: none !important; }
.ex-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.ex-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, currentColor 42%, transparent);
}
.ex-pill--pending { color: #1f5b9e; background: #e9f0f8; }
.ex-pill--permitted { color: #1f6b3f; background: #e8f4ec; }
.ex-pill--refused { color: #a32720; background: #fbeceb; }
.ex-pill--withdrawn,
.ex-pill--unknown { color: #5c6560; background: #eef1f4; }
.ex-pill--now { color: var(--ink); background: var(--gold); font-weight: 700; }
.ex-pill--fresh { color: #1e2428; background: #d8d4cc; }
.ex-pill--stale { color: #5c6560; background: #eeeae2; }
.ex-card,
.ex-record {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--on-paper);
  display: grid;
  gap: 0.65rem;
}
.ex-mail {
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--on-paper);
  overflow: hidden;
}
.ex-mail__bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1.1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-on-paper);
  background: #ebe6dc;
  border-bottom: 1px solid var(--paper-line);
}
.ex-mail__from {
  margin: 1rem 1.15rem 0;
  font-size: 0.82rem;
  color: var(--on-paper-muted);
}
.ex-mail__subject {
  margin: 0.2rem 1.15rem 0.9rem;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--on-paper);
}
.ex-mail .ex-card {
  margin: 0 0.85rem 0.85rem;
  border-color: var(--paper-line);
  box-shadow: 0 8px 24px rgba(22, 28, 25, 0.08);
}
.ex-job {
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--on-paper);
  overflow: hidden;
}
.ex-map {
  position: relative;
  height: 11.5rem;
  overflow: hidden;
  background: #d5cfc4;
}
.ex-map__tiles {
  position: absolute;
  inset: -10% -10% -28% -10%;
  pointer-events: none;
}
.ex-map__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: 100%;
}
.ex-map__grid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.ex-map iframe {
  display: none;
}
.ex-map__pin {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -18px 0 0 -8px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--gold);
  border: 2px solid var(--ink);
  pointer-events: none;
  z-index: 1;
}
.ex-map__facts {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  padding: 0.55rem 0.8rem 0.65rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 12px;
  font-size: 0.78rem;
  color: var(--on-paper);
  background: color-mix(in srgb, var(--paper-raised) 94%, transparent);
  border-top: 1px solid var(--paper-line);
  pointer-events: none;
}
.ex-map__facts div { margin: 0; }
.ex-map__facts dt { display: inline; }
.ex-map__facts dd { display: inline; margin: 0; }
.ex-job__body {
  padding: 1.15rem 1.25rem 1.25rem;
  display: grid;
  gap: 0.65rem;
}
.sec--navy .ex-job {
  border-color: rgba(221, 213, 198, 0.2);
}
.sec--navy .ex-card,
.sec--navy .ex-record {
  border-color: var(--navy-line);
  background: var(--navy-raised);
  color: var(--on-dark);
}
.sec--navy .ex-mail .ex-card {
  border-color: var(--paper-line);
  background: #fff;
  color: var(--on-paper);
}
.ex-card__address,
.ex-record__address {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
}
.ex-card__desc,
.ex-record__desc {
  margin: 0;
  font-size: 0.94rem;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ex-card__meta {
  margin: 0;
  display: flex;
  gap: 6px 16px;
  flex-wrap: wrap;
  font-size: 0.85rem;
}
.ex-card__meta div { margin: 0; }
.ex-card__meta dt { display: inline; }
.ex-card__meta dd { display: inline; margin: 0; }
.ex-constraints {
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
  font-size: 0.88rem;
}
.ex-letter-scale {
  overflow: auto;
  background: #d8d4cc;
  border-radius: 3px;
  padding: 0;
}
.sec--navy .ex-letter-scale { background: var(--ink); }
.ex-letter {
  width: 210mm;
  min-height: 297mm;
  padding: 20mm 20mm 24mm;
  background: #fff;
  color: #14161a;
  font-size: 11pt;
  line-height: 1.55;
  border: none;
  color-scheme: light;
  transform-origin: top left;
}
.ex-letter__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16mm;
  min-height: 25mm;
}
.ex-letter__logo {
  width: 30px;
  height: 30px;
  display: block;
  margin-bottom: 3mm;
}
.ex-letter__company {
  font-size: 13pt;
  font-weight: 640;
  letter-spacing: -0.01em;
}
.ex-letter__sender {
  text-align: right;
  font-size: 9.5pt;
  line-height: 1.5;
  color: #4a4f57;
  white-space: nowrap;
}
.ex-letter__recipient {
  min-height: 25mm;
  margin: 6mm 0;
  font-size: 11pt;
}
.ex-letter__date {
  margin-bottom: 6mm;
  font-size: 10.5pt;
  color: #4a4f57;
}
.ex-letter__subject {
  font-weight: 640;
  margin-bottom: 6mm;
}
.ex-letter__body { white-space: pre-wrap; }

.ex-showcase { margin-top: 3.5rem; }
.ex-showcase__panel {
  margin-top: 1.75rem;
  padding: 1.5rem;
  border: 1px solid var(--paper-line);
  border-radius: 3px;
  background: var(--paper-raised);
  display: grid;
  gap: 1.25rem;
}
.ex-showcase__step {
  margin: 0;
  font-size: 0.95rem;
}

/* -------------------------------------------------------------------------
   Stat band
   ------------------------------------------------------------------------- */

.stat__n {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.1rem, 4.2vw, 3rem);
  line-height: 1;
  color: var(--gold);
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  letter-spacing: -0.02em;
}
.stat__l {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}
.stat__q {
  margin: 0;
  font-family: 'Days21Display', Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  font-style: italic;
  font-variation-settings: 'opsz' 9, 'wght' 400, 'SOFT' 8, 'WONK' 1;
  color: var(--gold);
}

/* -------------------------------------------------------------------------
   The timeline (the life of an application)
   ------------------------------------------------------------------------- */

.rail { position: relative; }
/* The vertical rule the stages hang from. Drawn on the list, not on each item,
   so it is continuous and does not gap between them. */
.rail::before {
  content: '';
  position: absolute;
  left: 0.5rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 1px;
  background: linear-gradient(180deg, var(--gold), rgba(196, 160, 106, 0.15));
}
@media (min-width: 768px) { .rail::before { left: 10.5rem; } }

.node {
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--paper);
  display: grid;
  place-items: center;
}
.node::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--gold);
}
@media (min-width: 768px) { .node { left: 10rem; } }

/* -------------------------------------------------------------------------
   Quotes
   ------------------------------------------------------------------------- */

.quote {
  position: relative;
  padding-top: 2.6rem;
}
/* An oversized serif open-quote, set in the brand serif and clipped by the card
   edge. Decorative only, so it is hidden from assistive tech in the markup. */
.quote__mark {
  position: absolute;
  top: -0.9rem;
  left: -0.35rem;
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 5.5rem;
  line-height: 1;
  color: var(--gold);
  opacity: 0.22;
}
.quote p { font-size: 1.02rem; line-height: 1.6; }

/* -------------------------------------------------------------------------
   Tables (pricing, coverage)
   ------------------------------------------------------------------------- */

.tbl { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.tbl th, .tbl td { padding: 0.95rem 1rem; text-align: left; vertical-align: top; }
.tbl thead th {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid var(--gold-dim);
}
.sec--paper .tbl thead th { color: var(--gold-on-paper); border-bottom-color: rgba(138, 106, 31, 0.4); }
.tbl tbody tr + tr td { border-top: 1px solid var(--navy-line); }
.sec--paper .tbl tbody tr + tr td { border-top: 1px solid var(--paper-line); }
.tbl tbody tr { transition: background-color 0.2s ease; }
.tbl tbody tr:hover { background: rgba(196, 160, 106, 0.05); }

/* Plans table: free is quiet, monthly a step up, yearly the full highlight. */
.tbl--plans thead th:nth-child(3),
.tbl--plans tbody td:nth-child(3) {
  background: rgba(207, 224, 200, 0.06);
}
.tbl--plans thead th:nth-child(3) {
  color: var(--gold);
  box-shadow: inset 0 1px 0 rgba(207, 224, 200, 0.55);
}
.tbl--plans thead th:nth-child(4),
.tbl--plans tbody td:nth-child(4) {
  background: rgba(207, 224, 200, 0.14);
  color: var(--on-dark);
}
.tbl--plans thead th:nth-child(4) {
  color: var(--gold);
  box-shadow: inset 0 2px 0 var(--gold);
}
.tbl--plans tbody td:nth-child(2) {
  color: var(--on-dark-muted);
  font-weight: 400;
}
.tbl--plans tbody td:nth-child(3) {
  color: var(--on-dark);
  font-weight: 500;
}
.tbl--plans tbody td:nth-child(4) {
  font-weight: 600;
}
.tbl--plans tbody td:first-child {
  color: var(--on-dark);
  font-weight: 500;
}

/* Pricing comparison: mute the weekly list, light the 21days column. */
.tbl--compare col.tbl__win { width: 38%; }
.tbl--compare thead th:last-child,
.tbl--compare tbody td:last-child {
  background: rgba(207, 224, 200, 0.1);
  color: var(--on-dark);
}
.tbl--compare thead th:last-child {
  color: var(--gold);
  box-shadow: inset 0 2px 0 var(--gold);
}
.tbl--compare tbody td:nth-child(2) {
  color: var(--on-dark-muted);
  font-weight: 400;
}
.tbl--compare tbody td:last-child { font-weight: 500; }
.tbl--compare tbody td:first-child { color: var(--on-dark); font-weight: 500; }
.sec--paper .tbl--compare thead th:last-child {
  color: var(--gold-on-paper);
  box-shadow: inset 0 2px 0 var(--gold-on-paper);
}
.sec--paper .tbl--compare tbody td:first-child,
.sec--paper .tbl--compare tbody td:last-child {
  color: var(--on-paper);
}
.sec--paper .tbl--compare tbody td:nth-child(2) {
  color: var(--on-paper-muted);
}

/* Legal pages: same cream-then-green, readable column. */
.legal h2 {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--on-paper);
  margin: 2.25rem 0 0.75rem;
}
.legal h2:first-child { margin-top: 0; }
.legal p, .legal li { color: var(--on-paper-muted); font-size: 0.98rem; }
.legal p + p { margin-top: 0.85rem; }
.legal ul { margin: 0.75rem 0 0; padding-left: 1.2rem; }
.legal li + li { margin-top: 0.65rem; }
.legal strong { color: var(--on-paper); font-weight: 600; }
.legal .note {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--paper-line);
  font-size: 0.85rem;
}

/* Any table that could be wider than its column scrolls inside itself. The page
   body must never scroll sideways. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tick { color: var(--gold); }
.cross { color: var(--on-dark-muted); opacity: 0.55; }
.sec--paper .cross { color: var(--on-paper-muted); opacity: 0.75; }

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */

.field { display: block; }
.field__label {
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.input {
  width: 100%;
  padding: 0.85rem 1rem;
  background: rgba(22, 28, 25, 0.55);
  border: 1px solid var(--navy-line);
  border-radius: 2px;
  color: var(--on-dark);
  font: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.input::placeholder { color: rgba(147, 167, 185, 0.55); }
.input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(196, 160, 106, 0.16);
  background: rgba(22, 28, 25, 0.75);
}
/* Native select arrows are grey and system-coloured; this draws a gold one. */
select.input {
  appearance: none;
  background-image: url("../img/icon-chevron.svg");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px;
  padding-right: 2.6rem;
}
textarea.input { resize: vertical; min-height: 7rem; }

/* Validation state is driven by a class from site.js, not by :invalid, so a
   field is only marked wrong after the user has had a go at it. */
.input.is-error { border-color: #e07a5f; box-shadow: 0 0 0 3px rgba(224, 122, 95, 0.14); }
.field__error {
  display: none;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: #f0a58f;
}
.field.is-error .field__error { display: block; }

.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-status { font-size: 0.9rem; }
.form-status[data-state='ok'] { color: var(--gold-lift); }
.form-status[data-state='bad'] { color: #f0a58f; }

/* -------------------------------------------------------------------------
   Reveal on scroll
   ------------------------------------------------------------------------- */

/* Nothing here is required to read the page: the class only ever adds a
   transform, and if the observer never fires (or motion is reduced) the .reveal
   rule below is overridden to a plain visible state. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */

.footlink {
  font-size: 0.875rem;
  color: var(--on-dark-muted);
  transition: color 0.2s ease;
}
.footlink:hover { color: var(--gold); }

/* -------------------------------------------------------------------------
   Focus
   ------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  transition: top 0.2s ease;
}
.skip:focus { top: 1rem; }


.faq details {
  border-top: 1px solid var(--navy-line);
  padding: 1.05rem 0;
}
.sec--paper .faq details { border-top-color: var(--paper-line); }
.faq details:last-child { border-bottom: 1px solid var(--navy-line); }
.sec--paper .faq details:last-child { border-bottom-color: var(--paper-line); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 1.02rem;
}
.faq details p { margin: 0.65rem 0 0; max-width: 40rem; }
.faq details ul {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
  max-width: 40rem;
}
.faq details li { margin: 0.35rem 0; }