/* ==============================================================================================
   taxofficeos.app landing page, VERSION 2: "the developed plate".

   COLOR. Every value is a concrete color copied from src/design-system/variables.css, taking the
   product's own [data-theme="dark"] block, the one commented "Developed X-ray plate" (NOT the
   lifted Home Office OS blue-and-gold block above it). The originating token name sits next to
   each value so the two can be reconciled later by grep.

   This page is DARK COMMITTED. That is a design decision, not an oversight. v1 is a light page
   that quotes the dark palette inside plate sections; this one is the plate. A radiograph that
   turns white when the reader prefers light is a contradiction, so there is no light block here
   and <meta name="color-scheme" content="dark"> tells the browser so (which is what keeps form
   controls and scrollbars from rendering light against it).

   CONTRAST. Every pair below was already measured for the app's dark theme in v1's stylesheet, so
   nothing here is a new risk. The load-bearing ones, restated:
     text    #e6ebf2 on canvas #0e1420   ~15.9 : 1
     text-2  #a2b1c4 on canvas #0e1420    ~8.0 : 1
     text-3  #8492a6 on canvas #0e1420    ~5.6 : 1   (AA floor 4.5)
     text-3  #8492a6 on well   #0a1932    ~5.6 : 1
     accent  #6ba0ff on canvas #0e1420    ~7.1 : 1   (text grade; #4f8cff is the machinery grade)
     beam    #2dd4bf on canvas #0e1420   ~10.1 : 1
     white   #ffffff on button #2f6ee2    ~4.7 : 1   (AA floor 4.5; the app's own #3f7ff0 misses it,
                                                      see the note in v1's stylesheet)

   NETWORK. No @font-face, no @import, and no url() to anywhere, including data: URIs. The vhost
   serves `img-src 'self'`, which blocks data: URIs in CSS url(), so every texture on this page is
   built from gradients. This file makes zero network requests, which is the same claim the page
   makes in its copy.

   TYPE. Nothing is fetched and NO FONT IS NAMED: the stacks below are generic families and CSS
   system keywords only, so each resolves to whatever the reader's own OS provides. The display face
   is `serif` because tax authority, legal letterhead and IRS publications are set in serif while
   every SaaS landing page in this category is set in a geometric sans. The instrument face is
   monospace and carries all data, labels, and numerals.
   ============================================================================================== */

/* ----------------------------------------------------------------------------------------------
   TOKENS
   ---------------------------------------------------------------------------------------------- */
:root {
  color-scheme: dark;

  /* Generic families and CSS system keywords only: no font is NAMED, fetched, or shipped, and each
     keyword resolves to whatever the reader's own OS provides (Ervis, 2026-08-07). Matches the
     app's --ds-font-family-* tokens exactly, so the site and the product set the same type. */
  --display: serif;
  --sans: system-ui, sans-serif;
  --mono: ui-monospace, monospace;

  /* Grounds */
  --canvas:       #0e1420;                    /* --ds-color-bg-primary   */
  --well:         #0a1932;                    /* deep band, v1's --tint-bg */
  --surface:      #16202f;                    /* --ds-color-bg-surface   */
  --surface-2:    #121a27;                    /* --ds-color-bg-secondary, also the plate ground */

  /* Ink */
  --text:         #e6ebf2;                    /* --ds-color-text-primary   */
  --text-2:       #a2b1c4;                    /* --ds-color-text-secondary */
  --text-3:       #8492a6;                    /* --ds-color-text-tertiary  */

  /* Edges */
  --line:         rgba(148, 163, 184, 0.16);  /* --ds-color-border-primary   */
  --line-2:       rgba(148, 163, 184, 0.28);  /* --ds-color-border-secondary */

  /* Identity accents */
  --beam:         #2dd4bf;                    /* --ds-color-beam, the teal scan beam */
  --beam-soft:    rgba(45, 212, 191, 0.15);
  --beam-line:    rgba(45, 212, 191, 0.62);
  --accent:       #4f8cff;                    /* --ds-color-interactive-primary (machinery grade) */
  --accent-text:  #6ba0ff;                    /* --ds-color-primary-700 (text grade)  */
  --accent-soft:  rgba(79, 140, 255, 0.12);   /* --ds-color-bg-accent */
  --accent-edge:  rgba(79, 140, 255, 0.38);
  --seal:         #34d399;                    /* --ds-color-success      */
  --seal-text:    #4ade80;                    /* --ds-color-text-success */
  --seal-soft:    rgba(52, 211, 153, 0.10);
  --amber:        #fbbf24;                    /* --ds-color-warning      */
  --amber-text:   #fcd34d;                    /* --ds-color-text-warning */
  --amber-soft:   rgba(251, 191, 36, 0.16);

  /* Buttons. Stepped down from the app's #3f7ff0 until the white label clears 4.5:1. */
  --btn-bg:       #2f6ee2;
  --btn-bg-hover: #3170e0;
  --btn-glow:     rgba(79, 140, 255, 0.34);
  --btn-ghost:    rgba(148, 163, 184, 0.60);

  --shadow-card:  0 2px 8px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(148, 163, 184, 0.08);
  --shadow-lift:  0 18px 38px -18px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(148, 163, 184, 0.10);

  --r-sm: 0.375rem;   /* --ds-radius-md  */
  --r-md: 0.5rem;     /* --ds-radius-lg  */
  --r-lg: 0.75rem;    /* --ds-radius-xl  */
  --r-xl: 1rem;       /* --ds-radius-2xl */

  --wrap: 1280px;
  --gutter: clamp(1.15rem, 0.5rem + 2.2vw, 2.75rem);

  /* How far an anchor target sits below the top so the sticky masthead does not cover it. Held in
     a custom property because a plain @media override of .band{scroll-margin-top} would have to
     appear AFTER the .band rule to win (a media query adds no specificity). Redefining the
     variable works from anywhere in the file. */
  --head-clear: 5rem;

  /* One fine crosshatch, reused as the page grain and as plate scanlines. Gradients only: a
     data: URI here would be blocked by img-src 'self'. */
  --grain:
    repeating-linear-gradient(0deg,   rgba(148, 163, 184, 0.020) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg,  rgba(148, 163, 184, 0.014) 0 1px, transparent 1px 3px);
}

/* ----------------------------------------------------------------------------------------------
   RESET AND BASE
   ---------------------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--canvas);
  /* Two washes and the grain. The teal sits high right, behind the plate; the blue is a low
     counterweight so the page does not go flat below the fold. */
  background-image:
    var(--grain),
    radial-gradient(1200px 620px at 82% -6%,  rgba(45, 212, 191, 0.10), transparent 64%),
    radial-gradient(900px 700px at 6% 42%,    rgba(79, 140, 255, 0.06), transparent 62%);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

a { color: var(--accent-text); }

:focus-visible {
  outline: 2px solid var(--beam);
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.mono { font-family: var(--mono); }

/* ⛔ PARKED VERTICALLY, NOT HORIZONTALLY, AND THAT IS LOAD-BEARING. This used to be
   `left: -9999px`. In a left-to-right page that overflows the START side, which browsers do not
   make scrollable, so it is invisible and harmless. Under `dir="rtl"` the start side flips: the
   same rule became 9,999px of scrollable overflow, the document measured 11,439px against a
   1,440px viewport, and because an RTL page opens scrolled to its right edge, Arabic, Hebrew and
   Yiddish opened on a screen of empty background. Measured on the staged release before deploy.
   Moving it above the viewport is direction-agnostic: overflow above the top is never scrollable
   in either direction. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -6rem;
  z-index: 100;
  background: var(--surface);
  color: var(--text);
  padding: 0.75rem 1.15rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 0.8125rem;
}
.skip-link:focus { top: 1rem; }

/* The film edge. A hairline running the height of the viewport with sprocket perforations, fixed
   so it reads as the edge of a strip the page is printed on. Decorative and desktop only. */
.film-edge {
  position: fixed;
  inset-block: 0;
  left: max(0.9rem, calc((100vw - var(--wrap)) / 2 - 1.6rem));
  width: 9px;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, transparent, rgba(45, 212, 191, 0.30) 12%, rgba(45, 212, 191, 0.30) 88%, transparent),
    radial-gradient(circle at 50% 50%, rgba(148, 163, 184, 0.22) 0 2.2px, transparent 2.4px);
  background-size: 1px 100%, 9px 26px;
  background-position: 4px 0, 0 0;
  background-repeat: no-repeat, repeat-y;
  opacity: 0.75;
}
@media (max-width: 1180px) { .film-edge { display: none; } }

/* ----------------------------------------------------------------------------------------------
   TYPE ROLES
   ---------------------------------------------------------------------------------------------- */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 400;              /* these serifs carry authority at regular weight; bold muddies */
  letter-spacing: -0.012em;
  margin: 0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.55rem, 1.5rem + 3.9vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.024em;
  margin-block: 0.6rem 0;
}

h2 {
  font-size: clamp(1.95rem, 1.35rem + 2.15vw, 3.05rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h3 {
  font-size: 1.2rem;
  line-height: 1.28;
}

/* The instrument label: every kicker, tag, and micro-caption on the page. */
.eyebrow, .sec-kicker, .tier-tag, .caveat-tag, .hard-tag, .why-cheap-tag, .blob-cap,
.plate-head, .plate-foot, .chart-sub, .stat-label, .meta-sub {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.145em;
  font-size: 0.6875rem;
  line-height: 1.5;
}

.eyebrow {
  color: var(--beam);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.eyebrow .tick { opacity: 0.5; }

/* ----------------------------------------------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--r-md);
  font-family: var(--sans);
  font-size: 0.96rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease,
              border-color 0.16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-sub {
  font-family: var(--mono);
  font-size: 0.6563rem;
  font-weight: 400;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  opacity: 0.82;
}

.btn-primary {
  background: var(--btn-bg);
  color: #ffffff;
  box-shadow: 0 6px 20px -8px var(--btn-glow);
}
.btn-primary:hover {
  background: var(--btn-bg-hover);
  box-shadow: 0 10px 26px -8px var(--btn-glow);
}

/* The purchase action wears line 16's gold (Ervis, 2026-08-07). The plate exposes exactly one
   number hot, and it is the number the product exists to produce, so the button that sells the
   product carries that same --amber rather than the generic interactive blue.
   ⛔ Ink is near-black, NOT white: #ffffff on #fbbf24 measures 1.79:1 and fails at any size. The
   #1a1206 used here measures 12.4:1. */
.btn-gold {
  background: var(--amber);
  color: #1a1206;
  box-shadow: 0 6px 20px -8px rgba(251, 191, 36, 0.45);
}
.btn-gold:hover {
  background: var(--amber-text);
  box-shadow: 0 10px 26px -8px rgba(251, 191, 36, 0.58);
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--btn-ghost);
}
.btn-ghost:hover {
  border-color: var(--beam);
  background: var(--beam-soft);
}

.btn-sm {
  flex-direction: row;
  padding: 0.5rem 1rem;
  font-size: 0.86rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.9rem;
}
.cta-center { justify-content: center; }

/* ----------------------------------------------------------------------------------------------
   MASTHEAD
   ---------------------------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(14, 20, 32, 0.82);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid var(--line);
}

.masthead-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text);
  text-decoration: none;
  flex: none;
}
.brand-mark { color: var(--beam); display: inline-flex; }
.brand-name {
  font-family: var(--display);
  font-size: 1.14rem;
  letter-spacing: 0.005em;
}

.masthead-nav { margin-left: auto; }
.masthead-nav ul {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.masthead-nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-2);
  text-decoration: none;
  padding-block: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.masthead-nav a:hover { color: var(--text); border-bottom-color: var(--beam); }
/* The page you are on. Marked in the markup with class="active" AND aria-current="page", so the
   state is announced as well as drawn; the rule matches the class so a future page that forgets
   one of the two still looks wrong in review rather than quietly half working. */
.masthead-nav a.active { color: var(--text); border-bottom-color: var(--beam); }

.masthead-cta {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex: none;
}

.price-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.12rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--beam);
  border: 1px solid var(--beam-line);
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  background: var(--beam-soft);
}
.price-chip b { font-size: 0.86rem; font-weight: 600; }

/* ----------------------------------------------------------------------------------------------
   LANGUAGE SELECTOR

   A <details> disclosure, not a scripted dropdown: this site's one script exists to open a Stripe
   checkout and nothing else, and the CSP forbids inline handlers. The cost of that choice, stated
   plainly and measured rather than assumed: the menu closes on a second click of the button, or on
   Enter or Space while the button has focus. It does NOT close on Escape and it does NOT close on a
   click elsewhere in the page, because both of those are script behaviors and <details> has neither
   natively. That is the whole difference from the Home Office OS version.

   The menu hangs off .masthead-row, not off the selector, so its right edge lands inside the page
   gutter at every width. Anchored to the selector it ran 109px off the left of a 390px viewport.
   ---------------------------------------------------------------------------------------------- */
.masthead-row { position: relative; }
.lang-selector { flex: none; }

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  cursor: pointer;
  list-style: none;               /* kills the default disclosure triangle (Firefox) */
  transition: color 0.15s ease, border-color 0.15s ease;
}
.lang-btn::-webkit-details-marker { display: none; }   /* and in Safari */
.lang-btn:hover { color: var(--text); border-color: var(--beam-line); }
.lang-globe { opacity: 0.8; }

/* The caret, drawn from borders so it needs no glyph and no image. */
.lang-caret {
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  opacity: 0.7;
  transition: transform 0.16s ease;
}
.lang-selector[open] .lang-caret { transform: rotate(180deg); }
.lang-selector[open] .lang-btn { color: var(--text); border-color: var(--beam-line); }

/* The visible button already reads "EN" beside a globe; this is the sentence a screen reader
   gets instead of two orphan letters. */
.lang-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lang-menu {
  position: absolute;
  top: calc(100% - 0.55rem);
  right: var(--gutter);
  z-index: 50;
  width: min(19rem, calc(100vw - 1.5rem));
  max-height: min(62vh, 27rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.9rem 0.5rem 0.5rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
}
.lang-menu-note {
  margin: 0 0.55rem 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-3);
}
.lang-menu ul { list-style: none; margin: 0; padding: 0; }

.lang-menu a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.42rem 0.55rem;
  border-radius: var(--r-sm);
  text-decoration: none;
}
.lang-menu b {
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--text-2);
}
.lang-menu span {
  font-family: var(--mono);
  font-size: 0.6563rem;
  letter-spacing: 0.13em;
  color: var(--text-3);
}
.lang-menu a:hover { background: var(--accent-soft); }
.lang-menu a:hover b { color: var(--text); }

.lang-current { background: var(--beam-soft); }
.lang-current b { color: var(--beam); }
.lang-current span { color: var(--beam); }

/* `.lang-soon` lived here: the dimmed, inert <span> a row was while its locale did not exist yet.
   All 27 are generated and gated now, so every row is a real <a> and picks up `.lang-menu a`
   above. The rule is gone rather than kept "just in case", because a style for a state that can no
   longer occur reads to the next person like a state that still can. */

/* Below the width where seven nav items fit beside the two actions, the nav drops to its own row
   under the brand and scrolls sideways. It is NOT hidden behind a hamburger, because a hamburger
   needs script and this site deliberately ships one script that does nothing but open a checkout.
   A scrolling row costs nothing, keeps every page one tap away, and works with JavaScript off. */
@media (max-width: 1180px) {
  .masthead-row { flex-wrap: wrap; gap: 0.75rem 1.25rem; }
  .brand { order: 1; }
  .masthead-cta { order: 2; margin-left: auto; }
  .masthead-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-top: 1px solid var(--line);
  }
  .masthead-nav::-webkit-scrollbar { display: none; }
  .masthead-nav ul { gap: 1.35rem; padding-block: 0.15rem 0.35rem; }
  .masthead-nav li { white-space: nowrap; }
  /* The masthead is two rows tall here, so an in-page anchor has further to clear. */
  :root { --head-clear: 8rem; }
}
@media (max-width: 560px) {
  .brand-name { font-size: 1rem; }
  .masthead-cta { gap: 0.5rem; }
  .btn-sm { padding: 0.45rem 0.8rem; font-size: 0.8rem; }
}
@media (max-width: 460px) {
  .price-chip { display: none; }
}

/* ----------------------------------------------------------------------------------------------
   HERO
   ---------------------------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(3.5rem, 2rem + 5vw, 6.5rem);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 1rem + 3.5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 1000px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
}

.deck {
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.22rem);
  line-height: 1.58;
  color: var(--text-2);
  margin: 1.35rem 0 0;
  max-width: 34em;
}

/* The price statement. A ruled block, not a card: it should read as a line item on a document. */
.price-line {
  margin-top: 1.9rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--beam);
}
.price-line-main {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  line-height: 1.24;
  color: var(--text);
}
.price-line-main b {
  font-weight: 400;
  color: var(--beam);
  font-variant-numeric: tabular-nums;
}
.price-line-sub {
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
  color: var(--text-3);
  max-width: 40em;
}

.ticker {
  list-style: none;
  margin: 2.1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.ticker li { display: flex; align-items: center; gap: 0.5rem; }
.ticker li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--beam);
  flex: none;
}

/* ----------------------------------------------------------------------------------------------
   THE PLATE
   ---------------------------------------------------------------------------------------------- */
.plate-figure { margin: 0; }

.plate {
  position: relative;
  background: var(--surface-2);
  background-image:
    var(--grain),
    repeating-linear-gradient(to bottom, rgba(148, 163, 184, 0.035) 0 1px, transparent 1px 5px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: 0 1.6rem;
  overflow: hidden;
}

/* Sprocket perforations down both inner edges of the plate. */
.sprocket {
  position: absolute;
  inset-block: 0;
  width: 7px;
  background-image: radial-gradient(circle at 50% 50%, rgba(10, 16, 26, 0.9) 0 2px, transparent 2.2px);
  background-size: 7px 20px;
  background-repeat: repeat-y;
  opacity: 0.8;
}
.sprocket-l { left: 0.5rem; }
.sprocket-r { right: 0.5rem; }

.plate-head, .plate-foot {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-3);
  padding-block: 0.95rem;
  margin-inline: 0.8rem;
}
.plate-head { border-bottom: 1px solid var(--line); justify-content: space-between; }
.plate-foot { border-top: 1px solid var(--line); flex-wrap: wrap; }
.plate-foot .dot { opacity: 0.4; }
.plate-foot .foot-hot { color: var(--beam); }

.plate-id { color: var(--text-2); }
.plate-yr { color: var(--text-3); opacity: 0.75; }

.plate-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--beam);
}
.pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--beam);
  box-shadow: 0 0 0 0 var(--beam-line);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(45, 212, 191, 0); }
  100% { box-shadow: 0 0 0 0 rgba(45, 212, 191, 0); }
}

.plate-film {
  position: relative;
  padding: 1.35rem 0.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.62rem;
  overflow: hidden;
}

/* The sweep. A soft teal band that travels the height of the film area, plus a bright leading
   edge. Deliberately translucent: at full strength it blots out the figures underneath, which is
   a bad look on a page whose whole argument is that you can read every number. */
.beam {
  position: absolute;
  left: 0;
  right: 0;
  height: 34%;
  top: -34%;
  background:
    linear-gradient(to bottom, transparent, var(--beam-soft) 62%, transparent),
    linear-gradient(to bottom, transparent calc(100% - 2px), var(--beam-line) calc(100% - 2px));
  animation: sweep 5.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
  pointer-events: none;
}
@keyframes sweep {
  0%   { transform: translateY(0); opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(400%); opacity: 0; }
}

/* Latent rows: the parts of the page not yet exposed. */
.latent { display: flex; gap: 0.55rem; align-items: center; height: 0.62rem; }
.bar { height: 0.5rem; border-radius: 2px; background: rgba(148, 163, 184, 0.20); display: block; }
.bar.faint { background: rgba(148, 163, 184, 0.10); }
.w18 { width: 18%; } .w26 { width: 26%; } .w29 { width: 29%; } .w31 { width: 31%; }
.w34 { width: 34%; } .w38 { width: 38%; } .w44 { width: 44%; } .w51 { width: 51%; }
.w56 { width: 56%; } .w62 { width: 62%; }

/* Exposed rows: read, labeled, and valued. */
.exposed {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.42rem 0.6rem;
  border-radius: var(--r-sm);
  background: rgba(45, 212, 191, 0.055);
  border: 1px solid rgba(45, 212, 191, 0.16);
}
.exposed .ln {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--beam);
  border: 1px solid rgba(45, 212, 191, 0.34);
  border-radius: 3px;
  padding: 0.05rem 0.3rem;
  text-align: center;
}
.exposed .lbl {
  font-size: 0.84rem;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.exposed .val {
  font-family: var(--mono);
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.exposed.hot {
  background: rgba(251, 191, 36, 0.09);
  border-color: rgba(251, 191, 36, 0.30);
}
.exposed.hot .ln { color: var(--amber-text); border-color: rgba(251, 191, 36, 0.42); }
.exposed.hot .val { color: var(--amber-text); }

.plate-figure figcaption {
  margin-top: 0.95rem;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--text-3);
  max-width: 44ch;
}

/* ----------------------------------------------------------------------------------------------
   BANDS AND SECTION HEADS
   ---------------------------------------------------------------------------------------------- */
.band {
  position: relative;
  padding-block: clamp(3.75rem, 2.2rem + 5vw, 6.75rem);
  scroll-margin-top: var(--head-clear);
  border-top: 1px solid var(--line);
}

/* The deep well. Reads as a band change against the canvas at 1.18:1, which v1 measured and
   found sufficient at this scale. */
.band-well {
  background-color: var(--well);
  background-image: var(--grain);
}

/* Hanging section number in the left margin, like a clause reference. */
.sec-head {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0 1.5rem;
  margin-bottom: clamp(2.25rem, 1.5rem + 2vw, 3.5rem);
}
@media (max-width: 760px) {
  .sec-head { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
}

.sec-no {
  font-family: var(--mono);
  font-size: 2.5rem;
  line-height: 0.9;
  margin: 0;
  color: transparent;
  -webkit-text-stroke: 1px rgba(148, 163, 184, 0.42);
  letter-spacing: -0.02em;
  padding-top: 0.35rem;
}
@media (max-width: 760px) { .sec-no { font-size: 1.6rem; } }

/* The first band on an argument page sits directly under the masthead, so it carries no top rule
   (there is nothing above it to divide it from) and opens a little tighter. */
.band-first { border-top: 0; padding-top: clamp(2.75rem, 1.75rem + 3.5vw, 4.75rem); }

/* On the argument pages the section head carries the page's h1. It is the page title, so it is
   large, but not hero-large: the hero on index.html is the only 4.5rem headline on the site. */
.sec-head h1 {
  font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.4rem);
  line-height: 1.05;
  margin-block: 0;
}

.sec-kicker { color: var(--beam); margin: 0 0 0.75rem; }

.sec-lede {
  margin: 1.1rem 0 0;
  font-size: 1.03rem;
  line-height: 1.62;
  color: var(--text-2);
  max-width: 62ch;
}

/* ----------------------------------------------------------------------------------------------
   THE CONTACT SHEET  (index.html)

   The site index, one frame per page. A contact sheet is the right object here: a strip of frames
   you scan before deciding which one to enlarge, which is exactly what these six pages are. Each
   frame is a whole-card link, so the target is the card and not a four-word phrase inside it.
   ---------------------------------------------------------------------------------------------- */
.sheet {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
  gap: 1.15rem;
}
@media (min-width: 1040px) {
  .sheet { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.frame {
  position: relative;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  background: var(--surface);
  background-image: repeating-linear-gradient(to bottom, rgba(148, 163, 184, 0.025) 0 1px, transparent 1px 5px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 1.5rem 1.5rem 1.6rem;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.frame:hover {
  border-color: var(--beam-line);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

/* The frame number, stroked rather than filled, the same way the section numbers are. It sits in
   the top right corner as a plate reference, not as a step in a sequence the reader must follow. */
.frame-no {
  position: absolute;
  top: 1.05rem;
  right: 1.25rem;
  font-family: var(--mono);
  font-size: 1.75rem;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(148, 163, 184, 0.34);
  transition: -webkit-text-stroke-color 0.18s ease;
}
.frame:hover .frame-no { -webkit-text-stroke-color: var(--beam-line); }

.frame-kicker {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.145em;
  font-size: 0.6875rem;
  line-height: 1.5;
  color: var(--beam);
  padding-right: 3rem;      /* clears the corner numeral */
}

.frame h3 {
  font-size: 1.28rem;
  margin: 0.5rem 0 0.7rem;
  color: var(--text);
  padding-right: 3rem;
}

.frame p {
  margin: 0 0 1.35rem;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-2);
}

.frame-go {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.13em;
  font-size: 0.6875rem;
  color: var(--accent-text);
}
.frame-go::after {
  content: " \2192";
  display: inline-block;
  transition: transform 0.18s ease;
}
.frame:hover .frame-go { color: var(--beam); }
.frame:hover .frame-go::after { transform: translateX(3px); }

/* ----------------------------------------------------------------------------------------------
   SS 01: THE PROTOCOL
   ---------------------------------------------------------------------------------------------- */
.protocol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.protocol li {
  background: var(--surface);
  padding: 1.7rem 1.5rem 1.85rem;
  position: relative;
  transition: background-color 0.2s ease;
}
.protocol li:hover { background: #182435; }

.proto-no {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--beam);
  margin: 0 0 1.15rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--line);
}

.protocol h2, .protocol h3 { margin: 0 0 0.65rem; font-size: 1.1rem; color: var(--text); }
.protocol p:not(.proto-no) {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-2);
}

.caveat {
  margin-top: 1.75rem;
  padding: 1.5rem 1.65rem;
  border: 1px solid var(--amber-soft);
  border-left: 3px solid var(--amber);
  border-radius: var(--r-md);
  background: rgba(251, 191, 36, 0.045);
}
.caveat-tag { color: var(--amber-text); margin: 0 0 0.7rem; }
.caveat p:not(.caveat-tag) {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 78ch;
}

/* ----------------------------------------------------------------------------------------------
   SS 02: THE BLOB
   ---------------------------------------------------------------------------------------------- */
/* align-items defaults to stretch on purpose: the ciphertext column should run the full height of
   whatever the metadata column needs, so the blob reads as "more of this, forever" rather than as
   a short sample that happens to end. The body flexes and the fade masks wherever it stops. */
.blob-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 0.8rem + 2.5vw, 3rem);
}
@media (max-width: 900px) {
  .blob-grid { grid-template-columns: minmax(0, 1fr); }
}

.blob-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: #070f1e;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.blob-cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.15rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-3);
  background: rgba(148, 163, 184, 0.03);
}
.blob-cap-note { color: var(--text-3); opacity: 0.7; letter-spacing: 0.1em; }

.blob-body {
  flex: 1 1 auto;
  min-height: 15rem;
  overflow: hidden;
  padding: 1.15rem 1.15rem 2.6rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  line-height: 1.72;
  letter-spacing: 0.055em;
  color: rgba(45, 212, 191, 0.52);
  word-break: break-all;
  user-select: none;
}
.blob-body p { margin: 0; }
/* The blob is unreadable by design and the eye should not try. Every third line drops back so it
   reads as texture rather than as a string somebody might attempt to parse. */
.blob-body p:nth-child(3n) { color: rgba(45, 212, 191, 0.33); }
.blob-body p:nth-child(4n) { color: rgba(148, 163, 184, 0.34); }

.blob-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 5.5rem;
  background: linear-gradient(to bottom, transparent, #070f1e 82%);
  pointer-events: none;
}

.meta-title {
  font-family: var(--display);
  font-size: 1.32rem;
  margin: 0 0 0.4rem;
  color: var(--text);
}
.meta-title-2 { margin-top: 2.1rem; }
.meta-sub { color: var(--text-3); margin: 0 0 1.25rem; letter-spacing: 0.08em; }

.meta-list { margin: 0; padding: 0; border-top: 1px solid var(--line); }
.meta-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.meta-list dt {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
}
.meta-list dd {
  margin: 0;
  font-size: 0.86rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.meta-neg { list-style: none; margin: 0; padding: 0; }
.meta-neg li {
  position: relative;
  padding-left: 1.6rem;
  padding-block: 0.4rem;
  font-size: 0.93rem;
  color: var(--text-2);
}
.meta-neg li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 1.05rem;
  width: 0.85rem;
  height: 1px;
  background: var(--text-3);
  opacity: 0.75;
}

.hard-truth {
  margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
  padding: 1.75rem 1.85rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.045), transparent);
}
.hard-tag { color: var(--text-3); margin: 0 0 0.85rem; }
.hard-truth p:not(.hard-tag) {
  margin: 0;
  font-size: 1rem;
  line-height: 1.68;
  color: var(--text-2);
  max-width: 82ch;
}
.hard-truth b { color: var(--text); font-weight: 600; }

/* ----------------------------------------------------------------------------------------------
   STATUS PIPS
   ---------------------------------------------------------------------------------------------- */
.pip {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.5rem;
  flex: none;
  vertical-align: 0.05em;
}
.pip-live    { background: var(--seal);  box-shadow: 0 0 0 3px var(--seal-soft); }
.pip-pending { background: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }

.status-note {
  margin: 1.75rem 0 0;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-3);
}
.status-note b { color: var(--text-2); font-weight: 600; }
.status-note-center { text-align: center; max-width: 68ch; margin-inline: auto; }

/* Two status facts, one per row. Ran as a single paragraph first and the second pip landed
   mid-sentence at every width that wrapped, which reads as a typo rather than as a second item. */
.status-list {
  list-style: none;
  margin: clamp(1.75rem, 1rem + 2vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem 2.5rem;
}
.status-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.15rem 0.15rem;
  align-items: start;
  padding-top: 0.95rem;
  border-top: 1px solid var(--line-2);
}
.status-list .pip { margin-top: 0.5rem; }
.status-list p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.62;
  color: var(--text-3);
}
.status-list b { color: var(--text); font-weight: 600; }
.status-list em { font-style: italic; color: var(--text-2); }

/* ----------------------------------------------------------------------------------------------
   SS 03: THE DERIVATION
   ---------------------------------------------------------------------------------------------- */
.deriv {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 0.9rem + 1.6vw, 2.35rem);
  box-shadow: var(--shadow-card);
  max-width: 900px;
}

.deriv-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-bottom: 1.15rem;
  margin-bottom: 1.35rem;
  border-bottom: 1px solid var(--line);
}
.deriv-icon { color: var(--beam); display: inline-flex; }
.deriv-head h2, .deriv-head h3 { font-size: 1.3rem; }

.spine { list-style: none; margin: 0; padding: 0; }
.spine li {
  display: grid;
  grid-template-columns: auto minmax(1.5rem, 1fr) auto;
  align-items: baseline;
  gap: 0.65rem;
  padding-block: 0.62rem;
}
.s-lbl { color: var(--text-2); font-size: 0.96rem; }
.s-mark { color: var(--text-3); margin-right: 0.4rem; font-family: var(--mono); }
/* A dotted leader, the way a printed worksheet runs a label out to its figure. */
.s-lead {
  border-bottom: 1px dotted rgba(148, 163, 184, 0.32);
  transform: translateY(-0.25em);
}
.s-num {
  font-family: var(--mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.s-rule { border-top: 1px solid var(--line-2); margin-top: 0.35rem; padding-top: 0.85rem; }
.s-rule .s-lbl { color: var(--text); }
.s-rule .s-num { color: var(--text); font-size: 1.06rem; }

.stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  margin-top: 1.6rem;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.stack-col { background: var(--surface-2); padding: 1.15rem 1.25rem; }
.stack-head { color: var(--text-3); margin: 0 0 0.9rem; }
.stack-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.32rem;
  font-size: 0.9rem;
  color: var(--text-2);
}
.stack-row b {
  font-family: var(--mono);
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.stack-note {
  margin: 0.95rem 0 0;
  font-size: 0.86rem;
  color: var(--text-3);
  text-align: center;
}

.deriv-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding: 1.05rem 1.25rem;
  border: 1px solid var(--accent-edge);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  font-size: 1rem;
  color: var(--text);
}
.deriv-total b {
  font-family: var(--mono);
  font-size: 1.35rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--accent-text);
}

.recon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.35rem;
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px dashed var(--line-2);
}
.recon-pair { display: flex; gap: clamp(1.5rem, 1rem + 2vw, 3.25rem); flex-wrap: wrap; }
.recon-tag {
  font-family: var(--mono);
  font-size: 0.6563rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--seal-text);
  margin: 0 0 0.35rem;
}
.recon-tag-quiet { color: var(--text-3); }
.recon-num {
  margin: 0;
  font-family: var(--mono);
  font-size: 1.28rem;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.recon-num-quiet { color: var(--text-2); }

.seal {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgba(52, 211, 153, 0.42);
  border-radius: 999px;
  background: var(--seal-soft);
  color: var(--seal-text);
}
.seal-glyph { display: inline-flex; }
.seal-word {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fineprint {
  margin: 1.5rem 0 0;
  font-size: 0.82rem;
  line-height: 1.62;
  color: var(--text-3);
  max-width: 82ch;
}

.engine-grid {
  list-style: none;
  margin: clamp(2.25rem, 1.5rem + 2vw, 3.25rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.35rem 2rem;
}
/* Six items. auto-fit gives four columns at desktop width, which leaves two orphans on row two.
   Pinned to three so it reads 3 + 3. */
@media (min-width: 920px) {
  .engine-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.engine-grid li {
  padding-top: 0.9rem;
  border-top: 1px solid var(--line-2);
}
.engine-grid b {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--beam);
  margin-bottom: 0.5rem;
}
.engine-grid span {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-2);
}

/* ----------------------------------------------------------------------------------------------
   SS 04: THE CHART
   ---------------------------------------------------------------------------------------------- */
.chart-card {
  background: var(--surface);
  background-image: repeating-linear-gradient(to bottom, rgba(148, 163, 184, 0.025) 0 1px, transparent 1px 5px);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.15rem);
  box-shadow: var(--shadow-card);
}

.chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.chart-title { font-size: 1.22rem; margin: 0 0 0.4rem; }
.chart-sub { color: var(--text-3); margin: 0; }

.chart-stats { display: flex; gap: 1.85rem; }
.chart-stats > div { display: flex; flex-direction: column; gap: 0.25rem; }
.stat-label { color: var(--text-3); }
.stat-value {
  font-family: var(--mono);
  font-size: 1.6rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.is-amber { color: var(--amber-text); }
.is-quiet { color: var(--text-3); }

.chart-figure { margin: 1.5rem 0 0; overflow-x: auto; }
.chart-svg { display: block; width: 100%; min-width: 540px; height: auto; }

.chart-grid line { stroke: rgba(148, 163, 184, 0.16); stroke-width: 1; }
.chart-axis-text text {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  fill: var(--text-3);
}
.chart-burden { fill: rgba(79, 140, 255, 0.13); }
.chart-burden-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; }
.chart-bend { stroke: rgba(148, 163, 184, 0.34); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-rate {
  fill: none;
  stroke: var(--amber);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.chart-burden-text text {
  font-family: var(--mono);
  font-size: 10.5px;
  fill: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
.chart-here-dot { fill: var(--amber); stroke: var(--surface); stroke-width: 2.5; }
.chart-here-text text {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  fill: var(--amber-text);
}
.chart-marker-text text {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  fill: var(--text-3);
}

.chart-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin: 1.1rem 0 0;
  padding: 0.95rem 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.chart-legend li { display: flex; align-items: center; gap: 0.55rem; }
.key { width: 18px; height: 0; border-top-width: 2.5px; border-top-style: solid; flex: none; }
.key-rate   { border-top-color: var(--amber); }
.key-burden { border-top-color: var(--accent); border-top-style: dashed; }
.key-dot {
  width: 9px;
  height: 9px;
  border: none;
  border-radius: 50%;
  background: var(--amber);
}

.chart-notes {
  margin-top: 1.35rem;
  display: grid;
  gap: 0.9rem;
}
.chart-notes p { margin: 0; font-size: 0.93rem; line-height: 1.62; color: var(--text-2); max-width: 82ch; }
.chart-caveat { color: var(--text-3) !important; font-size: 0.82rem !important; }

/* ----------------------------------------------------------------------------------------------
   SS 05: PRICE
   ---------------------------------------------------------------------------------------------- */
/* The trial rail sits above the priced tiers on pricing.html. It is a rail rather than a third card
   on purpose: the free trial is not a tier you choose between, it is the way in, and a card would
   put it in competition with the two things it is meant to lead to. */
.trial-rail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.35rem 2.5rem;
  margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  padding: 1.5rem 1.65rem;
  border: 1px solid var(--beam-line);
  border-left: 3px solid var(--beam);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.07), transparent 62%), var(--surface);
}
.trial-rail > div { flex: 1 1 26rem; }
.trial-tag {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.145em;
  font-size: 0.6875rem;
  color: var(--beam);
  margin: 0 0 0.6rem;
}
.trial-line {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.25;
  color: var(--text);
}
.trial-sub {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-3);
  max-width: 62ch;
}

.tiers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 1.15rem;
  align-items: stretch;
}

.tier {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  padding: 1.65rem 1.55rem 1.75rem;
}

.tier-lead {
  border-color: var(--beam-line);
  background:
    linear-gradient(180deg, rgba(45, 212, 191, 0.07), transparent 42%),
    var(--surface);
  box-shadow: 0 0 0 1px rgba(45, 212, 191, 0.10), var(--shadow-lift);
}

.tier-tag { color: var(--beam); margin: 0 0 0.85rem; }
.tier-tag-quiet { color: var(--text-3); }
.tier h2, .tier h3 { font-size: 1.3rem; margin: 0 0 0.9rem; }

.tier-price {
  font-family: var(--mono);
  font-size: 3rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  margin: 0 0 1.05rem;
  display: flex;
  align-items: baseline;
  gap: 0.15rem;
}
.tier-price .cur { font-size: 1.5rem; color: var(--text-3); }
.tier-price .per {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-left: 0.4rem;
}
.tier-lead .tier-price { color: var(--beam); }
/* .tier-free was the "The analysis: Free" card. Removed with the card when the launch went
   pay-then-access (Ervis, 2026-08-06), because a rule for markup that no longer exists reads to
   the next person like a tier that still does. */

.tier-why {
  margin: 0 0 1.2rem;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-2);
}

.tier-list {
  list-style: none;
  margin: 0 0 1.15rem;
  padding: 0;
  border-top: 1px solid var(--line);
}
.tier-list li {
  position: relative;
  padding: 0.62rem 0 0.62rem 1.5rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--text-2);
}
.tier-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.75rem;
  height: 1px;
  background: var(--beam);
  opacity: 0.7;
}

/* .tier-lock was the founding-price line under the advisor button. Removed with the copy (Ervis,
   2026-08-07): the price moves if the market says it should, and announcing that on the page nobody
   asked. It also carried `margin: auto 0 0`, a SECOND auto margin in the same flex column as
   `.tier-buy`, so the free space split between them and neither button reached the card's floor.
   That is why the two buy buttons sat at different heights and read as steps. */

.why-cheap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem 2.75rem;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  padding-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  border-top: 1px solid var(--line);
}
.why-cheap-tag { color: var(--beam); margin: 0 0 0.75rem; }
.why-cheap p:not(.why-cheap-tag) {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.66;
  color: var(--text-2);
}

/* ----------------------------------------------------------------------------------------------
   SS 06: STRAIGHT ANSWERS
   ---------------------------------------------------------------------------------------------- */
.answers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem 2.5rem;
}
.answers article { padding-top: 1.15rem; border-top: 1px solid var(--line-2); }
.answers h2, .answers h3 {
  display: flex;
  align-items: center;
  font-size: 1.12rem;
  margin: 0 0 0.6rem;
}
.answers p {
  margin: 0;
  font-size: 0.93rem;
  line-height: 1.62;
  color: var(--text-2);
}

/* ----------------------------------------------------------------------------------------------
   CLOSER
   ---------------------------------------------------------------------------------------------- */
.closer {
  position: relative;
  border-top: 1px solid var(--line);
  padding-block: clamp(4rem, 2.5rem + 5vw, 7rem);
  background-image:
    var(--grain),
    radial-gradient(760px 320px at 50% 118%, rgba(45, 212, 191, 0.14), transparent 68%);
  text-align: center;
}
.closer-inner { max-width: 60ch; }
.closer h2 { font-size: clamp(2.05rem, 1.35rem + 2.6vw, 3.35rem); }
.closer p {
  margin: 1.1rem auto 0;
  font-size: 1.03rem;
  color: var(--text-2);
}

/* ----------------------------------------------------------------------------------------------
   TAIL AND PAGER  (every page except index)

   A page that ends is a dead end. Each argument page closes with the same two actions the masthead
   carries, then a pager to the next page, so a reader who wants the whole case can walk it front to
   back without going back up to the nav.
   ---------------------------------------------------------------------------------------------- */
.tail {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 1.75rem + 2.5vw, 3.75rem);
  background-image:
    var(--grain),
    radial-gradient(680px 260px at 50% 128%, rgba(45, 212, 191, 0.13), transparent 68%);
}
.tail-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2.5rem;
}
.tail-copy {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem);
  line-height: 1.22;
  color: var(--text);
  max-width: 26ch;
}
.tail .cta-row { margin-top: 0; }

.pager {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.pager a {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.35rem var(--gutter);
  background: var(--canvas);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.18s ease;
}
.pager a:hover { background: var(--surface); }
.pager-next { align-items: flex-end; text-align: right; }
.pager span {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.145em;
  font-size: 0.6875rem;
  color: var(--text-3);
}
.pager b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.15rem;
  color: var(--accent-text);
}
.pager a:hover b { color: var(--beam); }

/* ----------------------------------------------------------------------------------------------
   COLOPHON
   ---------------------------------------------------------------------------------------------- */
.colophon {
  border-top: 1px solid var(--line);
  background: #080d17;
  padding-block: 2.75rem 3.25rem;
}
.colophon-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.5rem 2.5rem;
  align-items: center;
}
@media (max-width: 820px) {
  .colophon-row { grid-template-columns: minmax(0, 1fr); }
}

.colophon-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--text-2);
}
.colophon-brand .brand-mark { color: var(--beam); opacity: 0.85; }

.colophon-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}
@media (max-width: 820px) { .colophon-nav ul { justify-content: flex-start; } }
.colophon-nav a {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  text-decoration: none;
}
.colophon-nav a:hover { color: var(--beam); }

/* The footer's last line. It used to be a paragraph explaining the site's own CSP to the reader;
   that argument belongs on the pages that make it, not under every page on the site (Ervis,
   2026-08-07). What is left is the two facts a footer owes anyone: who made this, and the year. */
.colophon-legal {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  font-size: 0.8rem;
  color: var(--text-3);
}
.colophon-dev {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.colophon-dev b {
  color: var(--text-2);
  font-weight: 600;
}
/* Placeholder until Ervis supplies the real Home Office OS logo. This is the mark the HOO site
   itself serves (its own favicon.svg), copied in so the file stays same-origin: the CSP allows
   img-src 'self' and nothing else. Swap the FILE, not this rule. */
.colophon-dev-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: block;
  flex-shrink: 0;
}
.colophon-copy {
  color: var(--text-3);
}

/* The disclaimer sits BELOW the developed-by line and carries no rule of its own: `.colophon-legal`
   already draws a border-top directly above it, and a second one here stacked two hairlines a few
   pixels apart. Full width and quiet, because it is a legal notice rather than an argument. */
.colophon-disclaimer {
  grid-column: 1 / -1;
  margin: 0.9rem 0 0;
  font-size: 0.76rem;
  line-height: 1.65;
  color: var(--text-3);
  max-width: 86ch;
}

.colophon-note {
  grid-column: 1 / -1;
  margin: 0.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--text-3);
  max-width: 86ch;
}
.colophon-note .mono {
  color: var(--beam);
  font-size: 0.76rem;
  background: var(--beam-soft);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  white-space: nowrap;
}

/* ----------------------------------------------------------------------------------------------
   BUY STATUS

   The line under a buy button. It is empty until something happens, so it takes no vertical space
   on a page nobody has interacted with; `min-height` is deliberately absent for that reason.
   ---------------------------------------------------------------------------------------------- */
.buy-note {
  margin: 1.1rem 0 0;
  max-width: 62ch;
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-3);
}
.buy-note:empty { margin: 0; }
.buy-note.is-error { color: var(--amber-text); }
.buy-note-center { margin-inline: auto; text-align: center; }
.buy-note .mono, noscript .buy-note .mono { color: var(--beam); }

button.btn { font: inherit; cursor: pointer; }
button.btn:disabled { opacity: 0.55; cursor: progress; transform: none; }

/* Two tiers instead of three (the free tier came out when the launch went pay-then-access), so the
   grid is told to make two columns rather than inheriting a three-column track and leaving a hole. */
.tiers-two { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
@media (min-width: 1020px) { .tiers-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* `.tier` is a flex column, so `margin-top: auto` drops the button to the bottom of its card and
   the two buy buttons line up across tiers of unequal height. Without it the shorter card leaves
   its button stranded mid-card above a block of dead space. The advisor card's founding-price note
   sits below its button, so that one card gets the same treatment on the note instead. */
/* The one auto margin in the card, so the button lands on the card's floor no matter how many list
   rows sit above it. The grid stretches both cards to equal height, so both buttons align. */
/* The masthead "Buy now" jumps here, and the masthead is sticky, so without this the top of the
   first card lands underneath it. Same custom property the .band anchors use. */
#plans { scroll-margin-top: var(--head-clear); }

.tier-buy { width: 100%; margin-top: auto; }

/* ----------------------------------------------------------------------------------------------
   FOOTER FAMILY LINKS
   ---------------------------------------------------------------------------------------------- */
.colophon-family { grid-column: 1 / -1; }
.colophon-family-tag {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.145em;
  font-size: 0.6875rem;
  color: var(--text-3);
  margin: 0 0 0.6rem;
}
.colophon-family ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.colophon-family a, .family-soon {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--text-2);
  text-decoration: none;
}
.colophon-family a:hover { color: var(--beam); }
.family-soon { color: var(--text-3); }
.family-soon b {
  font-weight: 400;
  color: var(--amber-text);
  opacity: 0.85;
}

/* ----------------------------------------------------------------------------------------------
   LEGAL PAGES  (/terms, /privacy)

   One measure of running prose, set in the body sans at a slightly larger size than the landing
   page uses, because these are documents somebody reads start to finish rather than scans. The
   display serif stays on the h1 and the section headings so the pages read as part of the same
   product. Generated by _handoffs/lp-legal-gen.py; the class names here are its contract.
   ---------------------------------------------------------------------------------------------- */
.legal-wrap {
  padding-block: clamp(2.75rem, 1.5rem + 4vw, 5rem) clamp(3rem, 2rem + 4vw, 5.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
}
@media (min-width: 1020px) {
  .legal-wrap {
    grid-template-columns: minmax(0, 1fr) 15.5rem;
    align-items: start;
    column-gap: 3.5rem;
  }
  .legal-head { grid-column: 1 / -1; }
  .legal-toc  { grid-column: 2; grid-row: 2; position: sticky; top: 5.5rem; }
  .legal-body { grid-column: 1; grid-row: 2; }
}

.legal-head {
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.75rem;
}
.legal-head h1 {
  font-size: clamp(2.1rem, 1.4rem + 2.4vw, 3.2rem);
  margin-block: 0.75rem 0;
}
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin: 1rem 0 0;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.legal-meta .dot { opacity: 0.5; }

.legal-toc {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  padding: 1.15rem 1.25rem 1.35rem;
}
.legal-toc-tag {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.145em;
  font-size: 0.6875rem;
  color: var(--beam);
  margin: 0 0 0.75rem;
}
.legal-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}
.legal-toc a {
  color: var(--text-2);
  text-decoration: none;
  font-size: 0.82rem;
  line-height: 1.4;
  display: block;
}
.legal-toc a:hover { color: var(--beam); }

.legal-body { max-width: 72ch; }
.legal-body h2 {
  font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.55rem);
  margin-block: 2.6rem 0.85rem;
  scroll-margin-top: var(--head-clear);
  padding-top: 0.35rem;
  border-top: 1px solid var(--line);
}
.legal-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.legal-body p  { margin-block: 0 1.1rem; color: var(--text-2); }
.legal-body ul, .legal-body ol { margin-block: 0 1.25rem; padding-left: 1.35rem; color: var(--text-2); }
.legal-body li { margin-bottom: 0.55rem; }
.legal-body strong { color: var(--text); font-weight: 600; }
.legal-body a { text-decoration: underline; text-underline-offset: 0.18em; }
.legal-body code {
  font-family: var(--mono);
  font-size: 0.86em;
  color: var(--beam);
  background: var(--beam-soft);
  border: 1px solid rgba(45, 212, 191, 0.22);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
}

/* ----------------------------------------------------------------------------------------------
   PURCHASE RETURN PAGES  (/activate, /cancelled)

   These two are the only pages in this site that run script, and only their own: /activate has to
   exchange a Stripe session id for the license key the buyer just paid for. Everything about the
   key lives in the DOM of that one response; nothing is stored, and nothing is sent anywhere but
   the license API.
   ---------------------------------------------------------------------------------------------- */
.ret-wrap {
  padding-block: clamp(3rem, 2rem + 5vw, 6rem) clamp(3.5rem, 2.5rem + 5vw, 7rem);
  max-width: 46rem;
}
.ret-head { text-align: center; }
.ret-head .eyebrow { justify-content: center; }
.ret-head h1 {
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  margin-block: 0.85rem 0;
}
.ret-lede {
  margin: 1.15rem auto 0;
  max-width: 52ch;
  color: var(--text-2);
  text-align: center;
}

.ret-card {
  margin-top: 2.5rem;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  box-shadow: var(--shadow-lift);
  padding: clamp(1.35rem, 1rem + 1.4vw, 2.25rem);
}
.ret-card-tag {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.145em;
  font-size: 0.6875rem;
  color: var(--beam);
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

/* The key itself. Monospace, selectable, wrapping on character boundaries so a long JWT does not
   force a horizontal scrollbar on a phone. */
.ret-key {
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.62;
  color: var(--text);
  background: var(--canvas);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 0.95rem 1.05rem;
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: pre-wrap;
  user-select: all;
  max-height: 15rem;
  overflow-y: auto;
}

.ret-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.15rem;
  align-items: center;
}
.ret-copied {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--seal-text);
}

.ret-steps {
  margin: 2.25rem 0 0;
  padding: 0;
  list-style: none;
  counter-reset: retstep;
  display: grid;
  gap: 0.9rem;
}
.ret-steps li {
  counter-increment: retstep;
  display: grid;
  grid-template-columns: 1.85rem minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
  color: var(--text-2);
  font-size: 0.94rem;
}
.ret-steps li::before {
  content: counter(retstep);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--beam);
  border: 1px solid rgba(45, 212, 191, 0.3);
  background: var(--beam-soft);
  border-radius: 999px;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
}

/* The three states /activate can be in. Exactly one is ever visible; script flips them. */
.ret-state[hidden] { display: none; }
.ret-note {
  margin: 1.15rem 0 0;
  font-size: 0.88rem;
  color: var(--text-3);
}
.ret-error {
  border-color: rgba(251, 191, 36, 0.4);
  background: var(--amber-soft);
}
.ret-error .ret-card-tag { color: var(--amber-text); }

.ret-back {
  margin-top: 2.5rem;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------------------------------------
   MOTION

   The hero reveal is a single orchestrated load, staggered by delay. Nothing below the fold uses
   an entrance animation without a scroll timeline, because an element that starts at opacity 0 and
   never receives its trigger is an element the reader never sees. The one scroll-driven effect is
   inside @supports, so browsers without animation-timeline simply get the static layout.
   ---------------------------------------------------------------------------------------------- */
.reveal {
  animation: rise 0.72s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.r1 { animation-delay: 0.02s; }
.r2 { animation-delay: 0.10s; }
.r3 { animation-delay: 0.20s; }
.r4 { animation-delay: 0.30s; }
.r5 { animation-delay: 0.38s; }
.r6 { animation-delay: 0.46s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .protocol li, .tier, .answers article {
      animation: rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
      animation-timeline: view();
      animation-range: entry 5% cover 26%;
    }
  }
}

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

/* ----------------------------------------------------------------------------------------------
   PRINT. Somebody will print this to send to a partner. Give them something legible.
   ---------------------------------------------------------------------------------------------- */
@media print {
  body { background: #ffffff; color: #171717; }
  .film-edge, .masthead, .beam, .sprocket, .blob-fade { display: none; }
  .band, .closer, .colophon { border-color: #d4d4d4; background: #ffffff; }
  .deriv, .tier, .chart-card, .protocol li, .plate { border-color: #d4d4d4; box-shadow: none; }
  h1, h2, h3, .s-num, .val, .recon-num, .tier-price { color: #171717; }
  .sec-lede, .deck, p { color: #404040; }
  .sec-no { -webkit-text-stroke: 1px #a3a3a3; }
}