/* ============================================================
   TRV — THE READER'S VERDICT · Launch site stylesheet
   Palette drawn from the owner's chosen imagery:
   deep navy ink (the boardroom title), sunset gold (her
   "Every time." script), warm wood, cream/parchment bed.
   All contrast pairs computed >= 4.5:1 (see certification).
   ============================================================ */

:root {
  /* Color */
  --ink: #1E2F47;          /* deep navy — primary text            12.66:1 on cream */
  --ink-deep: #16233A;     /* navy band background                             */
  --ink-soft: #44536B;     /* muted navy — secondary text          7.29:1 on cream */
  --cream: #FBF7EF;        /* page bed                                          */
  --parchment: #F2EADB;    /* alternating band                                  */
  --parchment-deep: #EADFC9;
  --gold: #C89A3C;         /* sunset gold — accents, rules, buttons             */
  --gold-deep: #7E5B1D;    /* gold dark enough for small text      5.78:1 on cream */
  --gold-bright: #E3B85E;  /* gold on navy                         8.45:1 on navy  */
  --wood: #6B4F33;         /* warm wood accent                     7.04:1 on cream */
  --navy-band-text: #F7F2E7;   /* 14.08:1 on navy band */
  --navy-band-soft: #C9D2E0;   /* 10.32:1 on navy band */

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Scale — 1.25 ratio on an 18px base */
  --step--1: 0.9rem;
  --step-0: 1.125rem;
  --step-1: 1.4rem;
  --step-2: 1.75rem;
  --step-3: 2.2rem;
  --step-4: 2.75rem;
  --step-5: 3.4rem;

  /* Space */
  --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;  --s-6: 2rem;   --s-7: 3rem;    --s-8: 4.5rem; --s-9: 6rem;

  /* Layered warm shadows */
  --shadow-1: 0 1px 2px rgba(58, 42, 18, 0.06), 0 2px 6px rgba(58, 42, 18, 0.05);
  --shadow-2: 0 1px 2px rgba(58, 42, 18, 0.07), 0 4px 10px rgba(58, 42, 18, 0.06), 0 12px 28px rgba(58, 42, 18, 0.08);
  --shadow-3: 0 2px 4px rgba(30, 24, 12, 0.08), 0 8px 18px rgba(30, 24, 12, 0.09), 0 24px 48px rgba(30, 24, 12, 0.12);

  --radius: 10px;
  --radius-lg: 16px;
  --measure: 65ch;
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 { font-size: clamp(var(--step-3), 5vw, var(--step-5)); }
h2 { font-size: clamp(var(--step-2), 4vw, var(--step-4)); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p, ul, ol, blockquote { max-width: var(--measure); }
p { margin: 0 0 var(--s-4); }

a { color: var(--ink); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--gold-deep); text-decoration-color: var(--gold-deep); }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.band--navy :focus-visible, .site-head :focus-visible { outline-color: var(--gold-bright); }

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

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute;
  left: var(--s-4); top: -100px;
  z-index: 100;
  background: var(--ink-deep);
  color: var(--navy-band-text);
  font-family: var(--sans);
  font-size: var(--step--1);
  padding: var(--s-3) var(--s-5);
  border-radius: 0 0 var(--radius) var(--radius);
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; color: var(--navy-band-text); }

/* ---------- Small-caps UI voice ---------- */

.kicker {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--s-3);
}
.band--navy .kicker { color: var(--gold-bright); }

/* ---------- Masthead ---------- */

.site-head {
  background: var(--ink-deep);
  color: var(--navy-band-text);
  border-bottom: 3px solid var(--gold);
}

.masthead {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--s-5) var(--s-5) var(--s-4);
  text-align: center;
}

.masthead-title {
  font-family: var(--serif);
  font-size: clamp(var(--step-1), 3.4vw, var(--step-3));
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 0;
}
.masthead-title a {
  color: var(--navy-band-text);
  text-decoration: none;
}
.masthead-title a:hover { color: var(--gold-bright); }
.masthead-title .tm { color: var(--gold-bright); }

.masthead-sub {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: var(--s-2) 0 0;
}

/* ---------- Nav ---------- */

.site-nav { background: var(--ink-deep); }

.nav-toggle {
  display: none;
  margin: 0 auto var(--s-3);
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: transparent;
  color: var(--navy-band-text);
  border: 1px solid var(--navy-band-soft);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-5);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--gold-bright); color: var(--gold-bright); }

.nav-list {
  list-style: none;
  margin: 0 auto;
  padding: 0 var(--s-4) var(--s-4);
  max-width: 72rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-2);
}

.nav-list a {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-band-soft);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: 6px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-list a:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }
.nav-list a[aria-current="page"] {
  color: var(--gold-bright);
  border-bottom-color: var(--gold);
  font-weight: 600;
}

@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .nav-list { display: none; flex-direction: column; align-items: stretch; text-align: center; }
  .nav-list.open { display: flex; }
  .nav-list a { padding: var(--s-3); }
}

/* ---------- Layout primitives ---------- */

main { display: block; }

.band { padding: var(--s-8) var(--s-5); }
.band--tight { padding: var(--s-7) var(--s-5); }
.band--parchment { background: var(--parchment); }
.band--navy { background: var(--ink-deep); color: var(--navy-band-text); }
.band--navy h1, .band--navy h2, .band--navy h3 { color: var(--navy-band-text); }
.band--navy p { color: var(--navy-band-soft); }
.band--navy a { color: var(--navy-band-text); text-decoration-color: var(--gold-bright); }
.band--navy a:hover { color: var(--gold-bright); }
.band--sunset {
  background: linear-gradient(160deg, var(--parchment) 0%, var(--parchment-deep) 55%, #E2CFA4 100%);
}

.wrap { max-width: 72rem; margin: 0 auto; }
.wrap--narrow { max-width: 46rem; margin: 0 auto; }

.center { text-align: center; }
.center p, .center ul, .center blockquote { margin-left: auto; margin-right: auto; }

.gold-rule {
  border: 0;
  width: 72px;
  height: 3px;
  background: var(--gold);
  margin: var(--s-5) 0;
}
.center .gold-rule, .gold-rule--center { margin-left: auto; margin-right: auto; }

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
}
.band--navy .lede { color: var(--navy-band-soft); }

/* ---------- Pull quotes & campaign lines ---------- */

.pull {
  font-family: var(--serif);
  font-size: clamp(var(--step-1), 3vw, var(--step-3));
  font-style: italic;
  line-height: 1.3;
  color: var(--ink);
  border-left: 4px solid var(--gold);
  margin: var(--s-6) 0;
  padding: var(--s-3) 0 var(--s-3) var(--s-5);
}
.band--navy .pull { color: var(--navy-band-text); border-left-color: var(--gold-bright); }
.center .pull, .pull--center {
  border-left: 0;
  border-top: 3px solid var(--gold);
  border-bottom: 3px solid var(--gold);
  padding: var(--s-5) var(--s-4);
  text-align: center;
}

.script-accent {
  font-style: italic;
  color: var(--gold-deep);
}
.band--navy .script-accent { color: var(--gold-bright); }

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

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--s-5);
  margin: var(--s-6) 0;
}

.card {
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.card h3, .card h4 { margin-bottom: var(--s-3); }
.card p:last-child { margin-bottom: 0; }

.card--navy {
  background: var(--ink);
  border: 0;
  border-top: 4px solid var(--gold);
  color: var(--navy-band-soft);
}
.card--navy h3, .card--navy h4 { color: var(--navy-band-text); }
.card--navy p { color: var(--navy-band-soft); }

.card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.card-link:hover { color: inherit; }
.card-link .more {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---------- The litany (Controlled Read) ---------- */

.litany {
  list-style: none;
  padding: 0;
  margin: var(--s-6) auto;
}
.litany li {
  font-size: var(--step-1);
  line-height: 1.4;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--parchment-deep);
}
.band--navy .litany li { border-bottom-color: rgba(201, 210, 224, 0.25); color: var(--navy-band-soft); }
.litany li:last-child { border-bottom: 0; }
.litany .litany-no {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-right: var(--s-3);
}
.band--navy .litany .litany-no { color: var(--gold-bright); }

/* ---------- Process walk ---------- */

.walk {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: var(--s-6) 0;
  display: grid;
  gap: var(--s-4);
}
.walk li {
  counter-increment: step;
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--s-5) var(--s-6);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-5);
  align-items: start;
}
.walk li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--sans);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--gold);
  line-height: 1.1;
}
.walk h3 { font-size: var(--step-1); margin-bottom: var(--s-2); }
.walk p { margin-bottom: 0; color: var(--ink-soft); }

/* ---------- Compare panels (generic note vs TRV) ---------- */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--s-5);
  margin: var(--s-6) 0;
  align-items: stretch;
}
.compare .panel {
  border-radius: var(--radius);
  padding: var(--s-6);
}
.panel--generic {
  background: var(--parchment);
  border: 1px dashed var(--wood);
  color: var(--ink-soft);
}
.panel--trv {
  background: var(--ink);
  color: var(--navy-band-soft);
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-2);
}
.panel--trv h3, .panel--trv h4 { color: var(--navy-band-text); }
.panel--trv ul { color: var(--navy-band-soft); }
.panel-label {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.panel--generic .panel-label { color: var(--wood); }
.panel--trv .panel-label { color: var(--gold-bright); }

/* ---------- Rating sample (typographic, illustrative) ---------- */

.rating-card {
  background: var(--ink);
  border-radius: var(--radius-lg);
  border-top: 5px solid var(--gold);
  box-shadow: var(--shadow-3);
  padding: var(--s-6) var(--s-6) var(--s-5);
  text-align: center;
  max-width: 22rem;
  margin: var(--s-6) auto;
}
.rating-card .rating-label {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--navy-band-soft);
}
.rating-card .rating-value {
  font-family: var(--serif);
  font-size: var(--step-5);
  font-weight: 700;
  color: var(--gold-bright);
  line-height: 1.1;
}
.rating-card .rating-value small {
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--navy-band-soft);
}
.rating-card .rating-note {
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--navy-band-soft);
  margin: var(--s-3) 0 0;
}

/* ---------- Pricing ---------- */

.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--s-6);
  margin: var(--s-7) 0;
  align-items: stretch;
}
.price-card {
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--s-7) var(--s-6);
  display: flex;
  flex-direction: column;
}
.price-card--featured {
  background: var(--ink);
  color: var(--navy-band-soft);
  border: 0;
  border-top: 5px solid var(--gold);
  box-shadow: var(--shadow-3);
}
.price-card--featured h3 { color: var(--navy-band-text); }
.price-card .price {
  font-family: var(--serif);
  font-size: var(--step-4);
  font-weight: 700;
  color: var(--ink);
  margin: var(--s-3) 0;
}
.price-card--featured .price { color: var(--gold-bright); }

/* OWNER 2026-08-14 — THE PRICE BAND. One rhythm on the pricing page: the price sits
   at the top, the wording underneath, every line in the same centered measure so no
   paragraph reads as a different alignment from its neighbour. */
.price-display {
  font-family: var(--serif);
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 auto var(--s-5);
}
.price-band p { max-width: 62ch; margin-left: auto; margin-right: auto; }
/* OWNER 2026-08-14: one space between the kicker and the price. */
.price-band .kicker { max-width: none; margin-bottom: var(--s-5); }
/* OWNER 2026-09-06 — HER LAUNCH CARD. Two short display lines sit between the price and
   the platform sentences: the free seats, and the account requirement. They are display
   lines, not body copy, so they stay centred (`price-note` is a named centred component in
   _wire_layout_standard.py) and they read a step above the paragraphs beneath them. The
   same class carries the two short lines at the head of the recommendation band, which is
   why the rule is not scoped to .price-band. */
.price-note {
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.4;
  margin: 0 auto var(--s-3);
}
.price-band .price-note:first-of-type { color: var(--gold-deep); }
.price-note + p[style] { margin-top: var(--s-4); }
.price-card ul {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 0;
}
.price-card li {
  padding: var(--s-2) 0 var(--s-2) 1.6em;
  position: relative;
  border-bottom: 1px solid var(--parchment-deep);
}
.price-card--featured li { border-bottom-color: rgba(201, 210, 224, 0.2); }
.price-card li:last-child { border-bottom: 0; }
.price-card li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--gold-deep);
  font-weight: 700;
}
.price-card--featured li::before { color: var(--gold-bright); }

/* ---------- Language tiers ---------- */

.tier {
  border-radius: var(--radius);
  padding: var(--s-6);
  margin: var(--s-5) 0;
  box-shadow: var(--shadow-1);
}
.tier h3 { margin-bottom: var(--s-2); }
.tier--full { background: var(--ink); }
.tier--full h3 { color: var(--gold-bright); }
.tier--full p { color: var(--navy-band-soft); margin-bottom: 0; }
.tier--tested { background: var(--parchment); border-left: 5px solid var(--gold); }
.tier--tested h3 { color: var(--ink); }
.tier--tested p { color: var(--ink-soft); margin-bottom: 0; }
.tier--expanding { background: var(--cream); border: 1px solid var(--parchment-deep); border-left: 5px solid var(--wood); }
.tier--expanding p { color: var(--ink-soft); margin-bottom: 0; }

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

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  padding: var(--s-4) var(--s-7);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  cursor: pointer;
  border: 0;
}
.btn--gold {
  background: var(--gold);
  color: var(--ink-deep);
  box-shadow: var(--shadow-2);
}
.btn--gold:hover {
  background: var(--gold-bright);
  color: var(--ink-deep);
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
}
.btn--ink {
  background: var(--ink-deep);
  color: var(--navy-band-text);
  box-shadow: var(--shadow-1);
}
.btn--ink:hover { background: var(--ink); color: var(--gold-bright); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--gold);
}
.btn--ghost:hover { background: var(--gold); color: var(--ink-deep); }
.band--navy .btn--ghost { color: var(--navy-band-text); border-color: var(--gold-bright); }
.band--navy .btn--ghost:hover { background: var(--gold-bright); color: var(--ink-deep); }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
}
.center .btn-row { justify-content: center; }

/* ---------- The gate (index) ---------- */

.gate-body {
  min-height: 100svh;
  background: var(--ink-deep);
  display: flex;
  flex-direction: column;
}
.gate-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-4) var(--s-3);
  gap: var(--s-4);
}
.gate-figure {
  margin: 0;
  max-width: 76rem;
  width: 100%;
}
.gate-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(227, 184, 94, 0.25);
}
.gate-enter {
  font-size: var(--step--1);
  letter-spacing: 0.24em;
  padding: var(--s-2) var(--s-6);
  opacity: .92;
}

/* ---------- Welcome boardroom figure ---------- */

.board-figure {
  margin: var(--s-7) auto;
  /* OWNER 2026-08-13: "make the images smaller" — boards trimmed from 58rem. */
  max-width: 44rem;
}
.board-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.board-figure figcaption {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-align: center;
  margin-top: var(--s-3);
}
.band--navy .board-figure figcaption { color: var(--navy-band-soft); }

/* ---------- Owner tile figures ---------- */
/* The tiles are sliced from the owner's wireframe strip; a hairline of the
   neighboring frame can show at the edges. The wrapper crops it non-destructively
   (the source files are never modified). */

.tile-figure {
  margin: var(--s-6) auto;
  /* OWNER 2026-08-13: "make the images smaller" — tiles trimmed from 34rem. */
  max-width: 26rem;
}
.tile-figure .tile-crop {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.tile-figure img {
  width: 100%;
  transform: scale(1.05);
}
/* Measured seam crops (right-side neighbor slivers in the sliced tiles).
   Horizontal-only: no vertical loss, no distortion, source files untouched.
   --seam-r13: gutter at x=334/384 → crop right 13%.
   --seam-r7l1: gutters at x=0–4 and x=359/384 → crop left 1.4%, right 6.5%. */
.tile-crop--seam-r13 img {
  width: 115%;
  max-width: none;
  transform: none;
}
.tile-crop--seam-r7l1 img {
  width: 108.5%;
  max-width: none;
  margin-left: -1.5%;
  transform: none;
}
.tile-figure figcaption {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  text-align: center;
  margin-top: var(--s-3);
}
.band--navy .tile-figure figcaption { color: var(--navy-band-soft); }

.media-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
  align-items: center;
}
@media (min-width: 900px) {
  .media-split { grid-template-columns: 1fr 1fr; }
  .media-split .tile-figure { margin: 0; }
}

/* ---------- Signature strip (where · how · why · when) ---------- */

.signature-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--s-4);
  margin: var(--s-6) 0;
}
.signature-strip .sig {
  background: var(--ink);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--s-5);
  text-align: center;
}
.signature-strip .sig-word {
  display: block;
  font-family: var(--sans);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: var(--s-2);
}
.signature-strip .sig p {
  color: var(--navy-band-soft);
  font-family: var(--sans);
  font-size: var(--step--1);
  margin: 0;
}

/* ---------- The verdict band (CSS boardroom moment) ---------- */

.verdict-band {
  background:
    linear-gradient(175deg, rgba(22, 35, 58, 0.94) 0%, rgba(30, 47, 71, 0.97) 60%, rgba(58, 42, 18, 0.95) 100%),
    var(--ink-deep);
  color: var(--navy-band-text);
  text-align: center;
  padding: var(--s-9) var(--s-5);
  border-top: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
}
.verdict-band .verdict-eyebrow {
  font-family: var(--sans);
  font-size: var(--step-0);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--navy-band-soft);
  margin-bottom: var(--s-4);
  display: block;
}
.verdict-band .verdict-title {
  font-family: var(--serif);
  font-size: clamp(var(--step-3), 6vw, var(--step-5));
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--navy-band-text);
  margin: 0 0 var(--s-4);
}
.verdict-band .verdict-title .gold { color: var(--gold-bright); }
.verdict-band p { color: var(--navy-band-soft); margin-left: auto; margin-right: auto; }

/* ---------- FAQ ---------- */

.faq-item {
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  margin: var(--s-4) 0;
}
.faq-item summary {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-weight: 600;
  padding: var(--s-5) var(--s-6);
  cursor: pointer;
  list-style-position: outside;
}
.faq-item summary:hover { color: var(--gold-deep); }
.faq-item[open] summary { border-bottom: 1px solid var(--parchment-deep); }
.faq-item .faq-answer { padding: var(--s-5) var(--s-6); }
.faq-item .faq-answer p:last-child { margin-bottom: 0; }

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

.site-foot {
  background: var(--ink-deep);
  color: var(--navy-band-soft);
  border-top: 3px solid var(--gold);
  padding: var(--s-7) var(--s-5);
  text-align: center;
  font-family: var(--sans);
  font-size: var(--step--1);
}
.site-foot .foot-brand {
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--navy-band-text);
  letter-spacing: 0.04em;
  margin: 0 0 var(--s-2);
}
.site-foot .foot-cat {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 var(--s-4);
}
.site-foot p { max-width: none; margin: 0 0 var(--s-3); }
.site-foot a { color: var(--navy-band-text); text-decoration-color: var(--gold-bright); }
.site-foot a:hover { color: var(--gold-bright); }
.foot-nav {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-2) var(--s-4);
  padding: 0;
  margin: 0 0 var(--s-4);
}
.foot-legal { color: var(--navy-band-soft); margin-top: var(--s-4); }

/* ---------- 404 ---------- */

.lost-band {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--s-9) var(--s-5);
}

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

@media (max-width: 480px) {
  .band { padding: var(--s-7) var(--s-4); }
  .walk li { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-4) var(--s-5); }
  .pull { font-size: var(--step-1); }
  .gate-enter { width: 100%; text-align: center; letter-spacing: 0.2em; }
}

/* THE ORDER DOOR (owner rulings 2026-08-10) */
.nav-order a.btn--ordertab{background:linear-gradient(180deg,#E3B85E,#C89A3C);color:#16233A !important;font-weight:700;letter-spacing:.1em;padding:.4rem 1rem;border-radius:8px}
.nav-order a.btn--ordertab:hover{background:linear-gradient(180deg,#edc46b,#d2a344)}
.offer-list{max-width:65ch;margin:1rem auto;line-height:1.7;padding-left:1.2rem}
.offer-list li{margin:.6rem 0}
.btn--big{font-size:1.2rem;letter-spacing:.14em;padding:.9rem 2.6rem}
.price-cards{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}
.price-card{background:rgba(255,255,255,.06);border:1px solid rgba(227,184,94,.4);border-radius:14px;padding:1.4rem 1.6rem;max-width:290px}
.price-card .price{font-size:2rem;color:#E3B85E;font-weight:700;margin:.3rem 0}


/* ---- the journey checklist & fine print (pricing, 2026-08-12) ---- */
.checklist { list-style: none; margin: var(--s-5, 1.5rem) auto; padding: 0; max-width: 36em; text-align: left; }
.checklist li { position: relative; padding-left: 1.7em; margin: 0 0 .55em; }
.checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--gold-bright, #c9a227); font-weight: 700; }
.fineprint { font-size: .85em; opacity: .78; max-width: 36em; margin: .8em auto 0; text-align: center; }

.verdict-band .verdict-note { max-width: 38em; margin: var(--s-4) auto 0; font-size: var(--step--1); opacity: .85; text-align: center; }


/* ---- wide-screen fixes (owner's screen, 2026-08-12) ---- */
.site-foot .foot-nav { max-width: none; margin-left: auto; margin-right: auto; }
.verdict-band .btn--ghost { color: var(--navy-band-text); border-color: var(--gold-bright); }
.verdict-band .btn--ghost:hover { background: var(--gold-bright); color: var(--ink-deep); }

/* Footer link to the house main site (owner mandate 2026-08-12) */
.foot-rooms a{color:inherit;text-decoration:underline}


/* ============================================================
   THE ELEVATION WALKTHROUGH — deliverables flagship (CE build 2026-08-13)
   Gold ribbon · the flagged manuscript · the PRE/POST contrast.

   NEW ACCENT — THE FLAG RED. A dignified brick, used in this section only.
   CONTRAST PAIRS (all label/body text sits on one of these three beds):
     --brick #8C2F1E on --cream #FBF7EF          = 7.74:1   (AAA)
     --brick #8C2F1E on --parchment #F2EADB      = 6.92:1   (AAA)
     --brick #8C2F1E on --parchment-deep #EADFC9 = 6.26:1   (AA large + AA body)
   The ribbon reuses the certified gold pair: --ink-deep #16233A on gold.

   STACKING RULE (narrow screens): .flagwork is a ONE-COLUMN grid by default —
   figure first, then the three notes in order, which reads as the legend. The
   three-column annotation layout only exists above 62.5rem. Nothing is absolutely
   positioned except the pins, and those are anchored inside .flag-plate between
   22%–46% horizontally and 60%–89% vertically, so they cannot reach an edge.
   Verified at 375px: no horizontal overflow.
   ============================================================ */

:root {
  --brick: #8C2F1E;
  --brick-hair: rgba(140, 47, 30, 0.28);
}

.band--walkthrough {
  background: linear-gradient(180deg, var(--parchment-deep) 0%, var(--parchment) 22%, var(--cream) 100%);
  border-top: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
}

/* ---- the ribbon badge ---- */
.ribbon-row { max-width: none; text-align: center; margin: 0 0 var(--s-5); }
.ribbon {
  display: inline-block;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: var(--ink-deep);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.2;
  padding: var(--s-3) var(--s-7);
  clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 1rem 100%, 0 50%);
  filter: drop-shadow(0 2px 5px rgba(58, 42, 18, 0.28));
}

/* ---- the lede line, set large ---- */
.walk-lede {
  font-family: var(--serif);
  font-size: clamp(var(--step-1), 3.2vw, var(--step-3));
  font-style: italic;
  line-height: 1.25;
  color: var(--ink);
  text-align: center;
  text-wrap: balance;
  max-width: 34rem;
  margin: 0 auto var(--s-6);
}
.walk-lede em { font-style: normal; color: var(--gold-deep); }

/* ---- the nine (and the six) ---- */
.understand {
  list-style: none;
  padding: 0;
  margin: var(--s-4) 0 var(--s-6);
}
.understand li {
  position: relative;
  padding: var(--s-2) 0 var(--s-2) 1.9em;
  border-bottom: 1px solid var(--brick-hair);
}
.understand li:last-child { border-bottom: 0; }
.understand li::before {
  content: "\2691";
  position: absolute;
  left: 0.15em;
  top: var(--s-2);
  color: var(--brick);
  font-size: 1em;
  line-height: inherit;
}

/* ---- the pull: why it's red ---- */
.pull--flag { max-width: 44rem; margin-left: auto; margin-right: auto; }
.pull--flag.pull--center {
  border-top-color: var(--brick);
  border-bottom-color: var(--brick);
}
.flag-red { color: var(--brick); font-style: normal; font-weight: 600; }

/* ---- the flagged manuscript ---- */
.flagwork {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
  margin: var(--s-7) 0;
}
.flag-figure { margin: 0; }
.flag-plate {
  position: relative;
  max-width: 34rem;
  margin: 0 auto;
}
.flag-plate .tile-crop {
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
}
.flag-figure figcaption {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-align: center;
  margin-top: var(--s-3);
}
.flagpin {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: var(--brick);
  background: var(--cream);
  border: 2px solid var(--brick);
  border-radius: 999px;
  padding: 0.35em 0.6em;
  box-shadow: var(--shadow-1);
}
.flagpin--1 { left: 22%; top: 60%; }
.flagpin--2 { left: 46%; top: 76%; }
.flagpin--3 { left: 27%; top: 89%; }

.flag-note {
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-left: 4px solid var(--brick);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--s-4) var(--s-5);
  align-self: center;
}
.flag-note .flag-title {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  color: var(--brick);
  margin: 0 0 var(--s-2);
}
.flag-note .flag-mark { margin-right: 0.5em; letter-spacing: 0; }
.flag-note p {
  margin: 0;
  max-width: none;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* The three-point annotation layout. Above 62.5rem only — below it the notes
   stack under the image as the legend (see STACKING RULE above). */
@media (min-width: 62.5rem) {
  .flagwork {
    grid-template-columns: minmax(11rem, 1fr) minmax(0, 30rem) minmax(11rem, 1fr);
    align-items: center;
    gap: var(--s-5) var(--s-6);
  }
  .flag-figure { grid-column: 2; grid-row: 1 / span 3; }
  .flag-note--1 { grid-column: 1; grid-row: 1; }
  .flag-note--2 { grid-column: 3; grid-row: 2; }
  .flag-note--3 { grid-column: 1; grid-row: 3; }
  .flag-note--1, .flag-note--3 {
    text-align: right;
    border-left: 1px solid var(--parchment-deep);
    border-right: 4px solid var(--brick);
  }
}

.walk-after {
  font-size: var(--step-1);
  line-height: 1.45;
  text-align: center;
  max-width: 42rem;
  margin: 0 auto var(--s-6);
}

/* ---- AI Pattern Guidance sub-block ---- */
.sub-block {
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--s-6);
  margin: var(--s-6) auto;
}
.sub-block h3 { font-size: var(--step-1); margin-bottom: var(--s-3); }
.sub-block p { color: var(--ink-soft); }

/* ---- the PRE / POST contrast ---- */
.contrast-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--s-5);
  align-items: stretch;
  max-width: 58rem;
  margin: var(--s-7) auto 0;
}
.contrast-item {
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-top: 4px solid var(--gold-deep);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  padding: var(--s-6);
  text-align: center;
}
.contrast-item--pre {
  background: var(--ink);
  border: 0;
  border-top: 4px solid var(--gold);
  box-shadow: var(--shadow-2);
}
.contrast-label {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--s-3);
}
.contrast-item--pre .contrast-label { color: var(--gold-bright); }
.contrast-q {
  font-family: var(--serif);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.contrast-item--pre .contrast-q { color: var(--navy-band-text); }

.walk-close {
  text-align: center;
  max-width: 44rem;
  margin: var(--s-6) auto 0;
  color: var(--ink-soft);
  font-size: var(--step-1);
}

@media (max-width: 480px) {
  /* keep the ribbon on ONE line at 375px — a wrapped badge loses the ribbon read */
  .ribbon { font-size: 0.75rem; letter-spacing: 0.1em; padding: var(--s-3) var(--s-6); max-width: 100%; }
  .flag-note { padding: var(--s-4); }
}

/* ---- FROM A REAL WALKTHROUGH — find, why, fix (owner addition 2026-08-13) ----
   The eye reads: the marked page -> why it's red -> the suggested repair.
   THE HIGHLIGHT: a marker wash in the flag-red family, not a new hue.
     mark background = --brick at 18% over --cream  => #E7D3C9
     --ink #1E2F47 on #E7D3C9 = 9.38:1   (the highlighted words)
     --brick #8C2F1E on #E7D3C9 = 5.73:1 (the flag tag if it lands on a highlight)
   Card beds: --navy-band-soft #C9D2E0 on --ink #1E2F47 = 8.87:1;
              --ink on --parchment #F2EADB = 11.31:1 (the fix sub-card). */

.findings { display: grid; gap: var(--s-6); max-width: 46rem; margin: var(--s-6) auto 0; }
/* CONSOLIDATION (owner 2026-08-13): "a lot going on" — the two real examples sit
   side by side on wide screens so the section runs half as tall; stacked below 64rem. */
@media (min-width: 64rem) {
  .findings { max-width: 72rem; grid-template-columns: 1fr 1fr; align-items: start; }
}

.finding {
  background: var(--ink);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: var(--s-6);
}
.finding-kind {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 var(--s-2);
  max-width: none;
}
.finding-name {
  font-family: var(--serif);
  font-size: var(--step-1);
  color: var(--navy-band-text);
  margin: 0 0 var(--s-5);
}
.findings-head { font-size: var(--step-2); margin-top: var(--s-2); }

/* THE FIND — a fragment of the page itself */
.ms-fragment {
  position: relative;
  background: var(--cream);
  border-radius: 6px;
  box-shadow: var(--shadow-2);
  padding: var(--s-6) var(--s-5) var(--s-4);
  margin: var(--s-5) 0 var(--s-4);
}
.frag-flag {
  position: absolute;
  top: 0;
  left: var(--s-5);
  transform: translateY(-50%);
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  white-space: nowrap;
  color: var(--brick);
  background: var(--cream);
  border: 2px solid var(--brick);
  border-radius: 999px;
  padding: 0.35em 0.7em;
  box-shadow: var(--shadow-1);
}
.frag-line {
  font-family: var(--serif);
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  max-width: none;
}
.frag-shape { list-style: none; padding: 0; margin: 0; max-width: none; }
.frag-shape li {
  font-family: var(--serif);
  line-height: 1.7;
  color: var(--ink);
  padding: 0.15em 0;
}
.frag-shape b { font-variant: small-caps; letter-spacing: 0.03em; }
.frag-ellipsis { color: var(--ink-soft); font-style: italic; }
.ms-fragment mark {
  background: rgba(140, 47, 30, 0.18);
  color: var(--ink);
  box-shadow: 0 -0.12em 0 rgba(140, 47, 30, 0.18) inset, 0 -0.06em 0 var(--brick-hair);
  padding: 0.05em 0.15em;
  border-radius: 2px;
}
.frag-where {
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: var(--s-4) 0 0;
  max-width: none;
}

/* THE WHY — one tight line */
.finding-why { color: var(--navy-band-soft); margin: 0 0 var(--s-5); max-width: none; }
.finding-why .why-label {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-right: 0.4em;
}

/* THE FIX — a different tone entirely */
.fix-card {
  background: var(--parchment);
  border-top: 3px solid var(--gold);
  border-radius: 6px;
  padding: var(--s-5);
}
.fix-label {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: var(--s-3);
}
.fix-card p { color: var(--ink); margin: 0; max-width: none; }
.fix-card .fix-why { color: var(--ink-soft); font-size: var(--step--1); margin-top: var(--s-3); }

.finding-close {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 42rem;
  margin: var(--s-6) auto 0;
}

@media (max-width: 480px) {
  .finding { padding: var(--s-5) var(--s-4); }
  .ms-fragment { padding: var(--s-6) var(--s-4) var(--s-4); }
  .frag-flag { left: var(--s-4); font-size: 0.72rem; }
  .frag-line { font-size: var(--step-0); }
}

/* ============================================================
   THE ONE-CLICK NATIVE LANGUAGE BAR  (owner mandate 2026-08-14)
   Matches the house pattern already proven on lovingmywords.com:
   a globe, "Read this in your language", every language named in
   its own language, the current one marked, English always
   reachable. Self-contained — no webfont, no script, no external
   request of any kind. Palette is TRV's own navy/gold/parchment.
   ============================================================ */

.langbar {
  background: #0F1A2C;               /* one step below --ink-deep so the strip
                                        reads as its own rail above the masthead */
  border-bottom: 1px solid rgba(227, 184, 94, 0.35);
  font-family: var(--sans);
  font-size: 0.8rem;
  line-height: 1.9;
  letter-spacing: 0.03em;
}
.langbar-in {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.5rem var(--s-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.5rem;
}
.langbar-globe { color: var(--gold-bright); font-size: 0.95rem; line-height: 1; }
.langbar-lead {
  color: var(--gold-bright);
  font-weight: 600;
}
.langbar-new {
  background: var(--gold-bright);
  color: #0F1A2C;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  white-space: nowrap;
}
.langbar-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.15rem;
}
.langbar-list li { display: inline-flex; align-items: center; }
.langbar-list li + li::before {
  content: "\00B7";
  color: #7C8DA3;
  margin: 0 0.3rem;
}
.langbar-list a {
  color: #F7F2E7;
  text-decoration: none;
  padding: 0.15rem 0.2rem;
  border-radius: 4px;
  white-space: nowrap;
}
.langbar-list a:hover { color: var(--gold-bright); text-decoration: underline; }
.langbar-list a:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}
.langbar-here {
  color: var(--gold-bright);
  font-weight: 700;
  padding: 0.15rem 0.2rem;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .langbar { font-size: 0.74rem; line-height: 1.8; }
  .langbar-in { padding: 0.45rem var(--s-3); gap: 0.1rem 0.35rem; }
  .langbar-lead { flex: 1 0 100%; text-align: center; }
  .langbar-globe { order: -1; }
  /* Twelve entries wrap to several lines at phone width, and a separator that
     lands at a line break reads as a dangling mark. Below 480px the dots come
     out and the gap does the separating instead — same rail, no debris. */
  .langbar-list { gap: 0.15rem 0.6rem; }
  .langbar-list li + li::before { content: none; }
  .langfoot-links { gap: 0.15rem 0.6rem; }
  .langfoot-links li + li:not(.langfoot-globe-li)::before { content: none; }
}

/* ---- the footer switch: the same key, plus the two honest notes ---- */

.langfoot {
  background: var(--parchment);
  border-top: 1px solid var(--parchment-deep);
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding: var(--s-6) var(--s-5);
  text-align: center;
}
.langfoot-links {
  list-style: none;
  margin: 0 auto var(--s-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 0.15rem;
  max-width: 60rem;
}
.langfoot-links li { display: inline-flex; align-items: center; }
.langfoot-links li + li:not(.langfoot-globe-li)::before {
  content: "\00B7";
  color: var(--wood);
  margin: 0 0.35rem;
}
.langfoot-links a { color: var(--gold-deep); text-decoration-color: var(--gold); white-space: nowrap; }
.langfoot-links a:hover { color: var(--ink); }
.langfoot-links .langbar-here { color: var(--ink); font-weight: 700; }
.langfoot-globe { color: var(--gold-deep); margin-inline-end: 0.35rem; }
.langfoot-note {
  max-width: 74ch;
  margin: 0 auto var(--s-3);
  font-size: 0.78rem;
  line-height: 1.75;
  color: var(--ink-soft);
}
.langfoot-note:last-child { margin-bottom: 0; }
.langfoot-note a { color: var(--gold-deep); }

/* ============================================================
   RIGHT-TO-LEFT  (Arabic).  Every physical edge in this sheet,
   flipped. The three photo-pinned flags and the seam crops are
   deliberately NOT mirrored — the photographs are not mirrored.
   ============================================================ */

[dir="rtl"] .skip-link { left: auto; right: var(--s-4); }

[dir="rtl"] .pull {
  border-left: 0;
  border-right: 4px solid var(--gold);
  padding: var(--s-3) var(--s-5) var(--s-3) 0;
}
[dir="rtl"] .band--navy .pull { border-right-color: var(--gold-bright); }
[dir="rtl"] .center .pull,
[dir="rtl"] .pull--center { border-right: 0; padding: var(--s-5) var(--s-4); }

[dir="rtl"] .litany .litany-no { margin-right: 0; margin-left: var(--s-3); }

[dir="rtl"] .walk li { border-left-width: 1px; border-right: 4px solid var(--gold); }

[dir="rtl"] .price-card li { padding: var(--s-2) 1.6em var(--s-2) 0; }
[dir="rtl"] .price-card li::before { left: auto; right: 0; }

[dir="rtl"] .tier--tested { border-left: 0; border-right: 5px solid var(--gold); }
[dir="rtl"] .tier--expanding { border-left: 1px solid var(--parchment-deep); border-right: 5px solid var(--wood); }

[dir="rtl"] .checklist { text-align: right; }
[dir="rtl"] .checklist li { padding-left: 0; padding-right: 1.7em; }
[dir="rtl"] .checklist li::before { left: auto; right: 0; }

[dir="rtl"] .offer-list { padding-left: 0; padding-right: 1.2rem; }

[dir="rtl"] .understand li { padding: var(--s-2) 1.9em var(--s-2) 0; }
[dir="rtl"] .understand li::before { left: auto; right: 0.15em; }

[dir="rtl"] .flag-note { border-left-width: 1px; border-right: 4px solid var(--brick); }
[dir="rtl"] .flag-note .flag-mark { margin-right: 0; margin-left: 0.5em; }

[dir="rtl"] .frag-flag { left: auto; right: var(--s-5); }
[dir="rtl"] .finding-why .why-label { margin-right: 0; margin-left: 0.4em; }

@media (min-width: 62.5rem) {
  [dir="rtl"] .flag-note--1,
  [dir="rtl"] .flag-note--3 {
    text-align: left;
    border-right: 1px solid var(--parchment-deep);
    border-left: 4px solid var(--brick);
  }
}
@media (max-width: 480px) {
  [dir="rtl"] .frag-flag { left: auto; right: var(--s-4); }
}

/* THE INDEPENDENCE LINE (owner 2026-08-17): rides in every footer, sitewide.
   Scoped to .site-foot ON PURPOSE. `.site-foot p { max-width: none }` (line ~837) is a
   two-class selector and out-specifies a bare `.foot-independence` no matter where this
   block sits in the file — measured in-browser, the 62ch measure was silently doing
   nothing and the sentence ran the full 1217px of the footer. This wins the cascade. */
.site-foot .foot-independence {
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
  font-size: var(--step--1);
  opacity: .8;
}

/* ============================================================
   THE SITE POLISH PASS  (Fable, 2026-09-05)
   PRESENTATION ONLY. Not one word of copy is written, moved,
   reworded or removed anywhere in this block. Every rule below acts
   on markup and sentences that are already certified in all eleven
   editions under the RKS translation law, so nothing here needs a
   re-translation and nothing here can drift between editions.
   Each rule names the defect it closes and the measurement that
   found it. Logical properties throughout, so Arabic inherits the
   fix rather than needing a second one.
   ============================================================ */

/* ---- P0 · THE SITE DECLARES ITS OWN SCHEME ----------------------
   This is a light design — cream bed, navy ink, one palette, no dark
   variant anywhere in this sheet. Without saying so, a reader whose
   operating system is set to dark gets the browser's dark rendering
   for the things the browser draws itself: the scrollbar, and the
   dropdown on the language select that /proven-reads carries. Saying
   it once keeps those in the same light the page is drawn in. */
:root { color-scheme: light; }

/* ---- P1 · THE NAVY-BAND BUTTON LABEL ----------------------------
   `.band--navy a` (specificity 0,1,1) out-ranks `.btn--gold` and
   `.btn--ink` (0,1,0), so every SOLID button standing inside a navy
   band was painting its label in the band's cream instead of its own
   ink: #F7F2E7 on #C89A3C measures 2.31:1, well under the 4.5:1 floor
   this sheet is certified to. Measured in-browser on 2026-09-05 across
   55 buttons on 44 pages — among them JOIN THE WAITLIST and THE FREE
   SEATS on /pricing, THE FREE SEATS on /welcome, and both document
   download buttons. `.btn--ghost` was given this fix in the 08-12
   wide-screen pass; the two solid variants were never covered.
   Restored to the button's own ink: 6.10:1. */
.band--navy .btn--gold,
.band--navy .btn--gold:hover { color: var(--ink-deep); }
.band--navy .btn--ink { color: var(--navy-band-text); }
.band--navy .btn--ink:hover { color: var(--gold-bright); }

/* ---- P2 · THE FOCUS RING ON A LIGHT GROUND ----------------------
   WCAG 1.4.11 asks a focus indicator to reach 3:1 against what is
   behind it. The ring was --gold (#C89A3C): 2.41:1 on the cream bed
   and 2.16:1 on the parchment band — a keyboard user could lose the
   ring entirely on the pricing and FAQ pages. --gold-deep is the same
   hue one step down and is already the sheet's small-text gold:
   5.78:1 on cream, 5.16:1 on parchment. The dark grounds keep their
   own ring, which was never the problem — --gold-bright on the navy
   band measures 8.45:1 and is left exactly as it was. */
:focus-visible { outline-color: var(--gold-deep); }
.band--navy :focus-visible,
.site-head :focus-visible,
.langbar :focus-visible { outline-color: var(--gold-bright); }

/* ---- P3 · FOOTER LINK TARGETS -----------------------------------
   The eleven footer links were inline, so their hit area was the
   glyph box: 15px tall, measured in-browser. WCAG 2.5.8 asks 24x24.
   Making them inline-block hands them the line box plus a little
   padding — 31px — without moving a single word or changing the
   footer's centred rhythm. */
.site-foot .foot-nav a,
.site-foot .foot-legal-nav a,
.site-foot .foot-rooms a,
.site-foot p > a[href^="mailto:"] {
  display: inline-block;
  padding-block: 0.25rem;
}

/* ---- P4 · THE FIRST PHONE SCREEN --------------------------------
   Measured on a 375x812 phone: 314px of the first screen — 39% of it —
   was furniture before the page's own kicker, and the primary button
   sat at 830px, eighteen pixels BELOW the fold, so an arriving writer
   saw a language list, a title and a MENU button and no reason to
   scroll. The language rail alone stood 131px tall because the lead
   line was forced onto a row of its own and the globe and the NEW
   badge each took another. Letting the three share one row and giving
   the masthead phone-sized padding returns 50px: the rail drops to
   93px and the button rises to 780px, on screen. Every language link
   is still present, still one tap, still in its own language —
   nothing is hidden, moved or collapsed behind a control. Verified at
   375px in English, German (the longest lead line) and Arabic (RTL);
   the row wraps on its own if a future edition needs more width. */
@media (max-width: 480px) {
  .langbar-lead { flex: 0 1 auto; }
  .langbar-list { flex: 1 0 100%; }
  .masthead { padding: var(--s-4) var(--s-4) var(--s-3); }
  .nav-list { padding: 0 var(--s-4) var(--s-3); }
}

/* ---- P5 · WHERE AN IN-PAGE LINK LANDS ---------------------------
   /pricing#waitlist and the section links land flush against the top
   edge of the window, which reads as a page that has been cut off.
   A scroll margin gives the heading air above it. No visual effect
   until something is actually jumped to. */
h1[id], h2[id], h3[id], h4[id], section[id], details[id], [id]:target {
  scroll-margin-block-start: var(--s-6);
}

/* ---- P6 · REDUCED MOTION, THE REST OF THE WAY -------------------
   The block at the top of this sheet already switches off transitions
   and animations, but the three hover states also carry a transform.
   With transitions off, the element still JUMPS two pixels. For a
   reader who asked the operating system for less motion, a jump is
   the thing they asked not to have. */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .btn--gold:hover, .btn--ink:hover { transform: none; }
}

/* ---- P7 · WINDOWS HIGH CONTRAST ---------------------------------
   In forced-colors mode the browser replaces our palette with the
   reader's own, and an outline set to a colour we chose is dropped.
   These two lines hand the ring back to the system so the keyboard
   path survives, and keep the solid buttons looking like buttons. */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid CanvasText; outline-offset: 3px; }
  .btn { border: 1px solid ButtonBorder; }
}

/* ---- P8 · PRINT -------------------------------------------------
   Writers print the pricing page, the terms and the FAQ to read away
   from the screen, and the site had no print rules at all: it printed
   the navigation, the language rail and the footer link lists on
   every sheet, in navy ink, and split cards across page breaks.
   This sets the page in black on white, drops the furniture that
   cannot be clicked on paper, and keeps a card, a step or a table row
   whole. NO GENERATED TEXT ANYWHERE — no link addresses printed after
   the words, no labels invented — because text on a printed page is
   copy, and copy on this site is certified in every edition. */
@media print {
  html { scroll-behavior: auto; }
  body {
    background: #fff;
    color: #000;
    font-size: 11.5pt;
    line-height: 1.45;
  }
  .skip-link,
  .langbar,
  .site-nav,
  .nav-toggle,
  .langfoot-links,
  .foot-nav,
  .foot-legal-nav,
  .proof-controls,
  .proof-hint,
  .readin { display: none !important; }
  .site-head,
  .site-foot,
  .band--navy,
  .band--parchment,
  .langfoot {
    background: #fff !important;
    color: #000 !important;
    border-color: #999 !important;
  }
  .site-head, .site-foot { border-width: 1px !important; }
  .band--navy h1, .band--navy h2, .band--navy h3, .band--navy p,
  .masthead-title a, .masthead-sub, .foot-brand, .foot-cat,
  .kicker, .band--navy .kicker { color: #000 !important; }
  .band, .band--tight { padding: var(--s-5) 0; }
  a { color: #000; text-decoration-color: #666; }
  .btn {
    border: 1px solid #000 !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    padding: var(--s-2) var(--s-4);
  }
  .card, .faq-item, .proof-step, .tile-figure, .board-figure,
  figure, .price-card, blockquote, .pull, .tiers-table tr {
    break-inside: avoid;
    box-shadow: none !important;
  }
  h1, h2, h3, h4 { break-after: avoid; }
  img { max-width: 100% !important; }
  .board-figure, .tile-figure { max-width: 24rem; }
  p, ul, ol, blockquote { max-width: none; }
  /* The two scrolling containers have no scrollbar on paper — a table
     left in its scroll box prints cut off at the edge of the box. */
  .table-scroll { overflow: visible !important; }
  .tiers-table { display: table !important; overflow: visible !important; }
}

/*TRVPROOF*/
/* ============================================================
   THE PROOF CAMPAIGN — the interactive components (2026-08-23)
   Namespaced .proof-*, built only from the tokens in :root above.
   LOGICAL PROPERTIES ONLY — no left, no right, text-align:start —
   so the Arabic edition mirrors correctly with no second stylesheet.
   Everything here is progressive enhancement: with JavaScript off the
   steps and panels are all in the page and all readable, and the
   controls that hide them are the only thing that stays out of sight.
   ============================================================ */

.proof-walk { margin-block-start: var(--s-6); }
.proof-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin-block-end: var(--s-4);
}
.proof-controls .btn {
  padding: var(--s-3) var(--s-5);
  font-size: var(--step--1);
}
.proof-controls .btn[disabled],
.proof-controls .btn[aria-disabled="true"] { opacity: .45; cursor: default; transform: none; }
.proof-count {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}
.band--navy .proof-count { color: var(--navy-band-soft); }
.proof-hint {
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: start;
}
.proof-steps { list-style: none; margin: 0; padding: 0; max-width: none; }
.proof-step,
.proof-dec-panel {
  background: var(--cream);
  border: 1px solid var(--parchment-deep);
  border-inline-start: 5px solid var(--gold);
  border-radius: var(--radius);
  padding: var(--s-5);
  margin-block: var(--s-5);
  box-shadow: var(--shadow-1);
  text-align: start;
}
.proof-steps > .proof-step:first-child { margin-block-start: 0; }
.proof-step p, .proof-step ul, .proof-step ol,
.proof-dec-panel p, .proof-dec-panel ul { max-width: none; }
.proof-step-n {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold-deep);
  margin-block-end: var(--s-2);
}
.proof-step h3, .proof-dec-panel h3 { font-size: var(--step-1); margin-block-end: var(--s-3); }
.proof-step h4, .proof-dec-panel h4 { font-size: var(--step-0); margin-block-end: var(--s-2); }
.proof-where, .proof-src {
  font-family: var(--sans);
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: start;
}
.proof-where { letter-spacing: 0.06em; }
.band--navy .proof-where, .band--navy .proof-src { color: var(--navy-band-soft); }
.proof-flag {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold-deep);
}
.proof-quote {
  margin-block: var(--s-4);
  padding-block: var(--s-2);
  padding-inline-start: var(--s-5);
  border-inline-start: 3px solid var(--gold-bright);
  font-style: italic;
  color: var(--ink);
  max-width: none;
}
.proof-quote p { margin-block-end: var(--s-3); max-width: none; }
.proof-quote p:last-child { margin-block-end: 0; }
.proof-quote mark {
  background: rgba(140, 47, 30, 0.18);
  color: var(--ink);
  padding: 0.05em 0.15em;
  border-radius: 2px;
}
.proof-opt { margin-block: var(--s-5); text-align: start; }
.proof-opt h3, .proof-opt h4 { margin-block-end: var(--s-2); }
.proof-example {
  background: var(--parchment);
  border-radius: var(--radius);
  padding: var(--s-4);
  margin-block-start: var(--s-3);
}
.band--parchment .proof-example { background: var(--cream); }
.proof-stamp {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--gold-deep);
  margin-block-start: var(--s-2);
}
.proof-fields { list-style: none; margin: var(--s-4) 0 var(--s-6); padding: 0; max-width: none; }
.proof-fields li {
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--parchment-deep);
  text-align: start;
}
.proof-fields li:last-child { border-block-end: 0; }
.band--navy .proof-fields li { border-block-end-color: rgba(201, 210, 224, 0.25); }
.proof-fieldname {
  display: block;
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--gold-deep);
  margin-block-end: var(--s-1);
}
.band--navy .proof-fieldname { color: var(--gold-bright); }
.proof-dec { margin-block-start: var(--s-5); }
.proof-dec-btns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-block-end: var(--s-4);
}
.proof-dec-btn.is-on { background: var(--gold); color: var(--ink-deep); }
.proof-dec-note { color: var(--ink-soft); }
.proof-ledger {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: var(--step--1);
  line-height: 1.5;
  background: var(--ink-deep);
  color: var(--navy-band-text);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  max-width: none;
  overflow-x: auto;
  text-align: start;
}
.proof-demo-label {
  font-family: var(--sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--gold-deep);
  border-block: 2px solid var(--gold);
  padding-block: var(--s-3);
  margin-block: var(--s-5);
  text-align: center;
  max-width: none;
}
.band--navy .proof-demo-label { color: var(--gold-bright); border-block-color: var(--gold-bright); }
.proof-sig {
  font-family: var(--sans);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--ink-soft);
}

/* PROGRESSIVE DISCLOSURE (§12.5, 2026-08-26). The component is the FAQ's own
   `details.faq-item`; this modifier only spaces it and marks it as a door. Native
   <details>/<summary>, so the keyboard, the screen reader and the right-to-left
   edition are the browser's job and not a script's. Logical properties only. */
.proof-more { margin-block-start: var(--s-5); text-align: start; }
.proof-more > summary { letter-spacing: 0.01em; }
.band--parchment .proof-more { background: var(--parchment); }
.proof-more .faq-answer > p:first-child { margin-block-start: 0; }
.proof-more .faq-answer > *:last-child { margin-block-end: 0; }

@media (max-width: 40rem) {
  .proof-step, .proof-dec-panel { padding: var(--s-4); }
  .proof-controls .btn { flex: 1 1 auto; text-align: center; }
}

/* ============================================================
   HER THREE PICTURES, WITH THE WORDS AS REAL TEXT  (2026-08-23)
   The lettering used to be baked into the pixels. She supplied a TEXT-FREE master for
   each picture, so the photograph is now the photograph and the words are set over it in
   this stylesheet — at the size and in the place the lettering occupied, measured off the
   originals, and translated in every edition.

   The block-start values are the measured cap-top of the original lettering MINUS the
   line box's own half-leading, so the first line of type lands where the first line of
   lettering landed: 132px, 141px and 301px down the three masters respectively.

   THE SIZES ARE CONTAINER-RELATIVE, not viewport-relative. The figure is capped at 44rem
   and shrinks with the column, so the words have to shrink with the PICTURE, not with the
   window: cqw does exactly that, and it means the composition is identical at 1280px and
   at 375px without a single media query. The @supports fallback below is for a browser
   with no container queries; it keeps the words readable rather than identical.

   RTL: the picture does NOT mirror, so the text BOX must stay physically where the
   lettering was — over the dark wall on the left of the two study photographs, over the
   cream panel on the right of the lantern card. `inset-inline-end` in an RTL edition
   resolves to the physical left, which is exactly what is wanted, so this is still
   logical properties only and there is no hard left or right anywhere below. The TEXT
   inside the box reads from its own start edge in both directions.
   ============================================================ */

.proof-imgcard-frame {
  position: relative;
  container-type: inline-size;
  line-height: 0;
}
.proof-imgcard-frame img { width: 100%; }
.proof-imgcard-words {
  position: absolute;
  inset-block-start: var(--iw-top);
  inset-inline-start: var(--iw-start);
  inline-size: var(--iw-width);
  text-align: start;
  line-height: 1.1;
  pointer-events: none;
}
[dir="rtl"] .proof-imgcard-words {
  inset-inline-start: auto;
  inset-inline-end: var(--iw-start);
}
.proof-imgcard-title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--iw-title);
  line-height: 1.06;
  letter-spacing: 0.03em;
  color: var(--iw-ink);
}
.proof-imgcard-line {
  margin-block: var(--iw-gap) 0;
  font-family: var(--sans);
  font-size: var(--iw-line);
  line-height: 1.4;
  color: var(--iw-ink-2);
}

/* the two study photographs — cream lettering on the dark panelled wall */
.proof-imgcard--walkthrough,
.proof-imgcard--steps { --iw-ink: #f2ead9; --iw-ink-2: #e6dbc4; }
.proof-imgcard--walkthrough .proof-imgcard-words {
  --iw-top: 13.9%; --iw-start: 5.6%; --iw-width: 40%;
  --iw-title: 3.9cqw; --iw-line: 1.55cqw; --iw-gap: 1.15em;
}
.proof-imgcard--steps .proof-imgcard-words {
  --iw-top: 14.8%; --iw-start: 6.5%; --iw-width: 34%;
  --iw-title: 3.6cqw; --iw-line: 2cqw; --iw-gap: 1.1em;
}
/* Arabic sets from its own start edge, so the box is narrowed to keep the words over
   the dark wall rather than over the window behind it. */
[dir="rtl"] .proof-imgcard--walkthrough .proof-imgcard-words { --iw-width: 30%; }
[dir="rtl"] .proof-imgcard--steps .proof-imgcard-words { --iw-width: 28%; }

/* the lantern card — dark text on the cream panel beside the photograph */
.proof-imgcard--lantern { --iw-ink: #33302a; --iw-ink-2: #4a463f; }
.proof-imgcard--lantern .proof-imgcard-words {
  --iw-top: 28%; --iw-start: 62.3%; --iw-width: 30%;
  --iw-title: 3.9cqw; --iw-line: 2cqw; --iw-gap: 1.35em;
}
.proof-imgcard--lantern .proof-imgcard-line { font-style: italic; }

/* THE ONE DEPARTURE FROM STRICT PROPORTION, and why. On a 375px phone the figure is about
   343px wide, and a strictly proportional rendering would set the second line at five
   pixels — exactly as unreadable as the baked version was at that width. The picture was
   re-lettered so a reader could read it, so below 30rem of container the words take a
   floor and the box widens to hold them. Above that the composition is the original's,
   measured off it. */
@container (max-width: 30rem) {
  .proof-imgcard-title { font-size: max(0.95rem, var(--iw-title)); }
  .proof-imgcard-line  { font-size: max(0.62rem, var(--iw-line)); }
  .proof-imgcard--walkthrough .proof-imgcard-words { --iw-width: 48%; }
  .proof-imgcard--steps .proof-imgcard-words { --iw-width: 46%; }
  .proof-imgcard--lantern .proof-imgcard-words { --iw-width: 32%; }
  [dir="rtl"] .proof-imgcard--walkthrough .proof-imgcard-words { --iw-width: 40%; }
  [dir="rtl"] .proof-imgcard--steps .proof-imgcard-words { --iw-width: 38%; }
}

@supports not (container-type: inline-size) {
  .proof-imgcard-title { font-size: clamp(0.95rem, 3.4vw, 1.75rem); }
  .proof-imgcard-line  { font-size: clamp(0.55rem, 1.7vw, 0.9rem); }
}
/*/TRVPROOF*/

/*TRVMOBILE*/
/* THE SMALL-VIEWPORT SAFETY RULES (Fable, 2026-08-23 — CE final-pass item 7).
   Found by the full 177-page x 5-width layout audit: seven small-screen overflows,
   all of one family — an unbreakable long word, a table wider than 320px, or a
   button label that refused to wrap. These rules close the family, not the cases.
   Per THE LAYOUT STANDARD: wide content scrolls inside its own container; the
   page never scrolls sideways. */
body { overflow-wrap: break-word; }
.btn { white-space: normal; max-width: 100%; overflow-wrap: anywhere; }
.tiers-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 400px) {
  .board-figure img, figure img { max-width: 100%; height: auto; }
}
/*/TRVMOBILE*/
/*TRVCONSOLCSS*/
/* ============================================================
   THE CONSOLIDATION (G5, 2026-08-23) — the rebuilt rail.
   The CE's six primary links replace five, so the rail is given
   back more room than the sixth link costs: a wider container,
   tighter tracking and tighter per-link padding. Measured
   arithmetically against the rail that fits today (battery RA1)
   because no browser is available on this machine.
   ============================================================ */
.site-nav .nav-list { max-width: 76rem; gap: var(--s-1) var(--s-1); }
.site-nav .nav-list a { letter-spacing: 0.05em; padding-inline: var(--s-2); }
.foot-legal-nav {
  list-style: none;
  margin: var(--s-2) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-1) var(--s-3);
  font-size: var(--step--1);
}
.foot-legal-nav a { color: inherit; }
.table-scroll { overflow-x: auto; margin-block: var(--s-4); }
.tiers-table { border-collapse: collapse; width: 100%; text-align: start; }
.tiers-table th, .tiers-table td {
  padding: var(--s-2) var(--s-3);
  border-block-end: 1px solid var(--parchment-deep);
  vertical-align: top;
  text-align: start;
}
.tiers-table thead th { font-family: var(--sans); font-size: var(--step--1);
  letter-spacing: 0.06em; text-transform: uppercase; }
.tiers-table tbody th { white-space: normal; inline-size: 34%; }
/*/TRVCONSOLCSS*/

/* ===== S12-B · THE FREE PRE-PURCHASE CHECK (2026-09-20) — source of truth:
   zz_FABLE'S RECORDS (leave closed)/_check_page/check.css. /check carries a
   Content-Security-Policy with style-src 'self', so it has ZERO inline style=
   attributes and every rule it needs is here, same-origin. ===== */
.check-drop {
  border: 2px dashed currentColor;
  border-radius: 12px;
  padding: 2rem 1rem;
  margin: 1.5rem auto;
  max-width: 34rem;
  text-align: center;
}

.check-drop.is-over {
  border-style: solid;
}

.check-file {
  display: block;
  margin: 1rem auto 0;
  max-width: 100%;
}

.check-formats,
.check-result,
.check-units,
.check-note,
.check-forward {
  text-align: start;
  max-width: 34rem;
  margin-inline: auto;
}

.check-result {
  font-weight: 700;
}

.check-note {
  font-weight: 700;
}

.check-forward {
  margin-top: 1.5rem;
  text-align: center;
}
/*TRVREADIN*/
/* ============================================================
   THE READER'S TRANSLATOR — style, from THE TRANSLATOR KIT
   (Ask LeAnn, 2026-08-26), kit STEP 4. The kit's own rules with
   every var(--…) swapped for THIS house's palette, so the lane
   wears The Reader's Verdict's colours and not Ask LeAnn's:
     --line-deep -> --parchment-deep   --paper  -> --cream
     --brass-line -> --gold            --tint   -> --parchment
     --terra-deep -> --gold-deep       --quiet  -> --ink-soft
     --mauve-wash -> --parchment       --mauve-line -> --parchment-deep
   The label's size moved out of the kit's inline style attribute
   and into this sheet, because THE LAYOUT STANDARD rule 5 permits
   exactly one inline style on a paragraph and it is not this one.
   ============================================================ */
.readin { margin: var(--s-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-3);
  align-items: center; }
.readin-lang { font-family: var(--sans); font-size: var(--step--1); padding: .45rem .6rem;
  border: 1px solid var(--parchment-deep); border-radius: 8px; background: var(--cream);
  color: var(--ink); }
.readin-btn { font-family: var(--sans); font-size: var(--step--1); padding: .5rem .9rem;
  border: 1px solid var(--gold); border-radius: 8px; background: var(--parchment);
  color: var(--gold-deep); cursor: pointer; }
.readin-btn:hover { background: var(--cream); }
.readin-btn[disabled] { opacity: .6; cursor: default; }
.readin-out { width: 100%; background: var(--parchment); border: 1px solid var(--parchment-deep);
  border-radius: var(--radius); padding: var(--s-4) var(--s-5); font-style: italic;
  color: var(--ink-soft); line-height: 1.65; white-space: pre-wrap; }
.readin-note, .readin-gloss { width: 100%; margin: 0; font-family: var(--sans);
  font-size: var(--step--1); color: var(--ink-soft); }
/*/TRVREADIN*/
/*TRVPRCSS*/
/* ============================================================
   PROVEN READS (2026-08-26) — the entries. A reader's own words,
   published verbatim, so they are set as what they are: a
   quotation, in the reading serif, with the credit beneath.
   ============================================================ */
.proven-entries { margin-block-start: var(--s-5); }
.proven-entry { margin: 0 0 var(--s-6); padding: var(--s-4) 0 0;
  border-block-start: 1px solid var(--parchment-deep); }
.proven-entry:first-child { border-block-start: 0; padding-block-start: 0; }
.proven-entry p { text-align: start; }
.proven-who { font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft);
  margin-block-end: var(--s-1); }
.proven-context { font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft);
  margin-block-start: 0; }
.proven-empty { text-align: start; color: var(--ink-soft); }
/*/TRVPRCSS*/

/* THE WEBP TWINS (the run-time loop L2, 2026-09-29 · tools/build_webp_twins.py). Each storefront
   photograph is served as WebP inside a <picture>, with the JPEG <img> as the fallback. The <picture>
   draws no box of its own, so every picture lays out exactly as the bare <img> did before. */
picture { display: contents; }

/* THE GATE'S FINE PRINT READS LIGHT ON NAVY (owner's list 2026-09-29, item 6; named by the release bw
   builder). "Proven and tested on complete manuscripts — before every release." inherited the body's
   navy ink at 78% on the gate's navy ground — dark on dark. On the gate it takes the navy band's own
   soft light (10.32:1 on the navy band) at full strength. Its words are unchanged (cell CC5). */
.gate-body .fineprint { color: var(--navy-band-soft); opacity: 1; }

/*TRVSUPPORT*/
/* SUPPORT THE GREENHOUSE (house ruling 2026-10-05) — quiet, below the product's own footer, never a checkout */
.foot-support { max-width: 46rem; margin: var(--s-5) auto var(--s-4); padding: var(--s-4) var(--s-3) 0;
  border-top: 1px solid rgba(255,255,255,0.14); text-align: center; }
.site-foot .foot-support-head { font-family: var(--serif); font-size: 1rem; font-weight: 600; color: var(--navy-band-text);
  letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 var(--s-2); }
.foot-support-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--s-3) var(--s-5); margin: var(--s-3) 0; }
.foot-support-choice { min-width: 0; }
.site-foot .foot-support-choice h3 { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; color: var(--navy-band-text); margin: 0 0 var(--s-2); }
.site-foot a.foot-support-btn { display: inline-block; padding: 0.55rem 1.1rem; min-height: 44px; box-sizing: border-box;
  border: 1px solid var(--gold-bright); border-radius: 999px; text-decoration: none; color: var(--navy-band-text); }
.site-foot a.foot-support-btn:hover, .site-foot a.foot-support-btn:focus-visible { background: rgba(255,255,255,0.08); color: var(--gold-bright); }
.site-foot .foot-support-fine { font-size: 0.85em; margin: 0 0 var(--s-1); }
.site-foot .foot-other { margin-top: var(--s-3); }
.site-foot .foot-other a { display: inline-block; padding-block: 0.4rem; }
/*/TRVSUPPORT*/