/* ============================================================
   TOCSIN GROUP  --  design system
   Monochrome institutional heritage. Ink on paper.
   ============================================================ */

:root {
  --ink: #0A0A0A;
  --ink-soft: #1C1C1C;
  --paper: #FAFAF8;
  --white: #FFFFFF;
  --gray-1: #F0F0EE;
  --gray-2: #E2E2DE;
  --gray-3: #C7C7C2;
  --gray-4: #8E8E88;
  --gray-5: #5C5C57;
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --measure: 62ch;
  --pad: clamp(1.25rem, 4.5vw, 5rem);
  --maxw: 130rem;
  /* rule scale: three calibrated levels, used by role (audit 2026-09-01) */
  --rule-heavy: 2px solid var(--ink);
  --rule: 1px solid var(--ink);
  --hair: 1px solid var(--gray-2);
  --ease: cubic-bezier(.22,.61,.24,1);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; }
  /* the blanket duration hack above would spin the 64s ticker every 1ms: kill it outright */
  .ticker-track { animation: none !important; transform: none !important; }
  .ticker-view { overflow-x: auto; }
  .js .reveal { transition: none !important; opacity: 1 !important; transform: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

/* ---------- type ---------- */

h1, h2, h3, .serif { font-family: var(--serif); font-weight: 600; color: var(--ink); }

h1 { font-size: clamp(2.4rem, 5.4vw, 4.3rem); line-height: 1.08; letter-spacing: -.012em; margin: 0 0 1.25rem; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.15; letter-spacing: -.008em; margin: 0 0 1rem; text-wrap: pretty; }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); line-height: 1.25; margin: 0 0 .6rem; }

p { margin: 0 0 1.1rem; }
p.lead { font-size: clamp(1.06rem, 1.6vw, 1.28rem); line-height: 1.6; color: var(--ink-soft); font-weight: 300; }

a { color: inherit; }

.kicker {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gray-5);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: .9rem;
}
.kicker::before { content: ""; display: block; width: 2.4rem; height: 1px; background: var(--ink); opacity: .55; }

.rule { border: 0; border-top: var(--hair); margin: 0; }

/* ---------- layout ---------- */

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.wrap-narrow { max-width: 46rem; margin-inline: auto; padding-inline: var(--pad); }

section { padding-block: clamp(4rem, 9vw, 7.5rem); }

.grid-2 { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: 1fr; }
@media (min-width: 60rem) { .grid-2.split-40-60 { grid-template-columns: 2fr 3fr; } .grid-2.split-55-45 { grid-template-columns: 11fr 9fr; } }

/* ---------- masthead ---------- */

.masthead {
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--gray-2);
  transition: box-shadow .35s var(--ease);
}
.masthead.scrolled { box-shadow: 0 1px 16px rgba(10,10,10,.07); }

.mast-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; height: 6.1rem; }

.brand { display: flex; align-items: center; gap: 1.1rem; text-decoration: none; color: var(--ink); }
.brand svg, .brand img.brand-mark { height: 3.7rem; width: auto; display: block; }
.brand-word { padding-top: .1rem; }
.brand-word { display: flex; flex-direction: column; line-height: 1; }
.brand-word b { font-family: var(--serif); font-weight: 600; font-size: 2.3rem; letter-spacing: .14em; }
.brand-word span { font-size: .84rem; font-weight: 600; letter-spacing: .52em; text-indent: .12em; color: var(--gray-5); margin-top: .42rem; }

.nav { display: none; }
@media (min-width: 60rem) {
  .nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.6vw, 2.4rem); }
}
.nav a { position: relative; text-decoration: none; color: var(--ink-soft); font-size: .8rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; padding-block: .4rem; }
.nav a.btn { color: var(--white); }
.nav a.btn::after { display: none; }
.nav a.btn:hover { background: var(--white); color: var(--ink); }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav-dd { position: relative; }
.nav-dd > a.dd-link { text-decoration: none; }
.nav-dd > button { all: unset; cursor: pointer; font: inherit; font-size: .8rem; font-weight: 500; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-soft); padding-block: .4rem; display: inline-flex; align-items: center; gap: .62rem; }
.nav-dd > button .caret { width: .5rem; height: .5rem; border-right: 1.4px solid var(--gray-5); border-bottom: 1.4px solid var(--gray-5); transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.nav-dd:hover > button .caret, .nav-dd.open > button .caret { transform: rotate(225deg) translateY(-1px); }

.dd-panel {
  position: absolute; top: calc(100% + .9rem); right: -1rem;
  background: var(--white); border: var(--hair); box-shadow: 0 18px 50px rgba(10,10,10,.10);
  min-width: 21rem; padding: .6rem 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.nav-dd:hover .dd-panel, .nav-dd:focus-within .dd-panel, .nav-dd.open .dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.dd-panel a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .68rem 1.4rem; text-decoration: none; font-size: .84rem; letter-spacing: .04em; text-transform: none; color: var(--ink-soft); }
.dd-panel a::after { display: none; }
.dd-panel a small { color: var(--gray-5); font-variant-numeric: tabular-nums; letter-spacing: .06em; font-size: .7rem; }
.dd-panel a:hover { background: var(--gray-1); color: var(--ink); }
.dd-head { padding: .55rem 1.4rem .5rem; font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gray-5); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  padding: .85rem 1.7rem; border: 1px solid var(--ink); text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--white);
  transition: background .25s var(--ease), color .25s var(--ease), transform .15s var(--ease);
}
.btn:hover { background: var(--white); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--white); }
.btn.light { background: var(--white); color: var(--ink); border-color: var(--white); }
.btn.light:hover { background: transparent; color: var(--white); border-color: var(--white); }
.btn.outline-light { background: transparent; color: var(--white); border-color: color-mix(in srgb, var(--white) 55%, transparent); }
.btn.outline-light:hover { background: var(--white); color: var(--ink); }
.btn .arrow { font-weight: 400; }

/* mobile nav */
.nav-toggle { all: unset; cursor: pointer; display: inline-flex; flex-direction: column; gap: .34rem; padding: .75rem .8rem; min-width: 44px; min-height: 44px; justify-content: center; }
.nav-toggle i { display: block; width: 1.35rem; height: 1.5px; background: var(--ink); transition: transform .3s var(--ease), opacity .3s; }
@media (min-width: 60rem) { .nav-toggle { display: none; } }
.mobile-nav { display: none; }
.mobile-nav.open { display: block; border-top: var(--hair); background: var(--white); }
.mobile-nav a, .mobile-nav .m-sub a { display: block; padding: .85rem var(--pad); text-decoration: none; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: var(--hair); }
.mobile-nav .m-sub a { text-transform: none; letter-spacing: .03em; padding-left: calc(var(--pad) + 1.2rem); font-size: .82rem; color: var(--gray-5); }
/* The menu lives in the sticky masthead, so anything taller than the screen was unreachable
   (owner 2026-09-25): cap it at the viewport and let it scroll on its own; industries fold
   into a tap-to-open group so About and Contact are visible the moment the menu opens. */
.mobile-nav.open { max-height: calc(100vh - 6.1rem); max-height: calc(100dvh - 6.1rem); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (max-width: 44rem) { .mobile-nav.open { max-height: calc(100vh - 4.4rem); max-height: calc(100dvh - 4.4rem); } }
.mobile-nav .m-group summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: .85rem var(--pad); font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); border-bottom: var(--hair); }
.mobile-nav .m-group summary::-webkit-details-marker { display: none; }
.mobile-nav .m-group summary::after { content: ""; width: .5rem; height: .5rem; border-right: 1.4px solid var(--gray-5); border-bottom: 1.4px solid var(--gray-5); transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.mobile-nav .m-group[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.mobile-nav .m-group summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.mobile-nav .m-sub a b { font-weight: 600; color: var(--ink); }

/* ---------- hero (landing) ---------- */

.hero { position: relative; padding-block: clamp(2.25rem, 3.2vw, 3rem) 0; overflow: hidden; }

/* alt variant: fluid split hero; high-key dome cutout melts into the page */
.hero-alt { padding-block: clamp(2.6rem, 5vw, 4.1rem) clamp(1.6rem, 3vw, 2.4rem); }
@media (min-width: 60rem) {
  .hero-alt { display: flex; height: calc(100dvh - 9.6rem); min-height: fit-content; }
  .hero-alt > .alt-grid { flex: 1; min-height: 100%; }
  .alt-copy { display: flex; flex-direction: column; }
  .hero-alt .alt-copy .hero-meta { margin-top: auto; }
}
.alt-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2.2rem, 4vw, 4rem); align-items: stretch; padding-inline: var(--pad); max-width: var(--maxw); margin-inline: auto; }
.alt-copy { position: relative; z-index: 1; }
.hero-alt .alt-copy .btnrow { margin-top: 1.4rem !important; }
.hero-alt .hero-meta { margin-top: 1.05rem; padding-top: 1.05rem; }
@media (min-width: 60rem) {
  .alt-grid { grid-template-columns: minmax(0, 10fr) minmax(0, 11fr); column-gap: clamp(2.5rem, 4vw, 4.5rem); }
  .hero-alt { overflow-x: clip; overflow-y: visible; }
  .hero-alt .alt-img { position: absolute; top: calc(-1 * clamp(2.6rem, 5vw, 4.1rem)); right: 0; bottom: clamp(1.6rem, 3vw, 2.4rem); z-index: 0; overflow: clip; }
  .hero-alt .alt-img img { height: 100%; width: auto; transform: scale(1.10); transform-origin: 88% 58%; -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 97%); mask-image: linear-gradient(to bottom, #000 80%, transparent 97%); }
}
/* Big and tall screens (owner 2026-10-08: on a desktop monitor at 100% scaling the hero filled the whole screen, the three
   figures dropped far below the buttons, and on tall or narrow windows the dome grew behind the copy). Laptop screens are
   unchanged: the hero still fills them, but stops at 46rem, and the dome is sized by the window's width as well as its height
   (at most 47vw tall, kept to the bottom right), so it stays clear of the copy at any shape of window. */
@media (min-width: 60rem) {
  .hero-alt { height: auto; min-height: min(calc(100dvh - 9.6rem), 46rem); }
  .hero-alt .alt-copy .btnrow { margin-bottom: 1.2rem; }
  .hero-alt .alt-img { display: flex; align-items: flex-end; justify-content: flex-end; }
  .hero-alt .alt-img img { height: min(100%, 47vw); flex: none; }
}
.alt-img { margin: 0; position: relative; pointer-events: none; }
.alt-img img { display: block; width: 100%; height: auto; border: none; }
.value-strip { border-block: var(--hair); background: var(--white); padding-block: clamp(2.6rem, 5vw, 4rem); }
.values { display: grid; grid-template-columns: 1fr; gap: clamp(1.6rem, 3vw, 2.4rem); }
@media (min-width: 44rem) { .values { grid-template-columns: 1fr 1fr; } }
.value { border-left: var(--hair); padding-left: 1.35rem; }
.value h3 { font-size: 1.15rem; letter-spacing: .02em; margin-bottom: .5rem; }
.value p { font-size: .92rem; line-height: 1.65; color: var(--gray-5); margin: 0; max-width: 44ch; }
@media (max-width: 59.9rem) { .hero { padding-bottom: clamp(2rem, 6vw, 2.75rem); } }
.hero > .wrap { position: relative; z-index: 1; }
.hero h1 { font-size: clamp(2.2rem, 4.1vw, 3.7rem); margin-bottom: 1rem; }
@media (min-width: 60rem) { .hero h1 { line-height: 1.12; } }
.hero .lead { font-size: clamp(.98rem, 1.3vw, 1.12rem); line-height: 1.55; }
.hero-figure { width: 100%; }
.hero-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--gray-2); }
.hero-figure figcaption { margin-top: .8rem; color: var(--gray-5); text-align: right; }

/* placed imagery */
.band-img { width: 100%; overflow: hidden; border-block: var(--hair); }
.band-img img { display: block; width: 100%; height: auto; }
.band-img-cap { display: block; text-align: right; color: var(--gray-5); padding: .7rem var(--pad, 1.5rem) .9rem; max-width: 84rem; margin: 0 auto; }
.ink-figure img {
  display: block; width: 100%; height: auto; border: none;
  /* single bottom fade instead of the four-side dissolve that buried the
     photo in the ink band; the plate now keeps a crisp core */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 82%, transparent 100%);
}
.ink-figure figcaption { margin-top: .7rem; color: var(--gray-3); text-align: right; font-size: .74rem; }
.band-ink .body-muted { font-size: 1.02rem; color: var(--gray-3); max-width: 46ch; }
.duo-fig { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-top: 2.2rem; }
.duo-fig img { display: block; width: 100%; height: 13rem; object-fit: cover; border: 1px solid var(--gray-2); }
.duo-fig figcaption { margin-top: .55rem; color: var(--gray-5); }
@media (max-width: 30rem) { .duo-fig img { height: 9rem; } }

/* ---------- focus visibility (all:unset on .tab/.nav-dd/.nav-toggle kills UA rings) ---------- */
a:focus-visible, .nav-dd > button:focus-visible, .nav-toggle:focus-visible, .tab:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px;
}
.band-ink :focus-visible, footer.site :focus-visible { outline-color: var(--white); }
.hero .big-bell { position: absolute; right: 1vw; top: 50%; transform: translateY(-52%); width: 26vw; max-width: 21rem; color: var(--ink); opacity: .05; pointer-events: none; z-index: 0; }
@media (max-width: 84rem) { .hero .big-bell { display: none; } }
/* emphasis = defined term; Playfair true italic, period inside the <em> (systematized) */
.hero h1 em { font-style: italic; }
/* kicker rationing: quote band + final CTA open typographic-only (breaks the 7x eyebrow grid) */
.quote-band .kicker::before, .cta-band .kicker::before { display: none; }
.quote-band .kicker, .cta-band .kicker { gap: 0; }
.hero-card { border: 1px solid var(--gray-2); background: var(--white); padding: clamp(1.6rem, 3vw, 2.4rem); box-shadow: none; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 1.15rem; padding-top: 1rem; border-top: var(--hair); }
@media (min-width: 60rem) {
  .hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}
.hero-meta div { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-5); }
.hero-meta b { display: block; font-family: var(--serif); font-size: 1.7rem; letter-spacing: 0; text-transform: none; color: var(--ink); font-weight: 600; margin-bottom: .1rem; }
.fund-note { margin: .9rem 0 0; font-size: .78rem; letter-spacing: .04em; color: var(--gray-5); max-width: 58ch; border-left: 2px solid var(--ink); padding-left: .8rem; text-transform: none; }

/* ---------- ticker ---------- */

.ticker { position: relative; z-index: 5; border-bottom: 1px solid var(--gray-2); background: var(--white); overflow: hidden; display: flex; align-items: stretch; }
.ticker-label { margin-right: 1.6rem; }
.ticker-view { position: relative; -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 4rem), transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 4rem), transparent 100%); }
.ticker-label { flex: none; background: var(--ink); color: var(--white); font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; padding: .85rem 1.3rem; display: flex; align-items: center; gap: .6rem; position: relative; z-index: 2; }
.ticker-view { overflow: hidden; margin-left: 0; }
.ticker-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: slide 64s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.ticker-track a { display: inline-flex; align-items: baseline; gap: .7rem; padding: .85rem 1.7rem; text-decoration: none; color: var(--ink-soft); font-size: .8rem; letter-spacing: .02em; border-right: var(--hair); }
.ticker-track a b { font-weight: 600; letter-spacing: .08em; font-size: .74rem; }
.ticker-track a small { color: var(--gray-5); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.ticker-track a:hover { background: var(--gray-1); }

/* ---------- sections ---------- */

.band-white { background: var(--white); }
.band-ink { background: var(--ink); color: var(--white); }
.band-ink h2, .band-ink h3 { color: var(--white); }
.band-ink .kicker { color: var(--gray-3); }
.band-ink .kicker::before { background: var(--white); opacity: .6; }
.band-gray { background: var(--gray-1); }

.section-head { margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.section-head .more { margin-top: 2rem; }

.flow { display: flex; flex-direction: column; }
.flow-aside { align-self: center; }
.flow-node { border: 1px solid var(--gray-3); background: var(--white); padding: clamp(1.2rem, 2.4vw, 1.6rem) clamp(1.3rem, 2.6vw, 1.8rem); display: flex; flex-direction: column; gap: .35rem; }
.flow-node h3 { margin: 0; }
.flow-node p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--gray-5); max-width: 58ch; }
.flow-arrow { display: flex; flex-direction: column; align-items: center; }
.flow-arrow::before, .flow-arrow::after { content: ""; width: 1px; height: .65rem; background: var(--gray-3); }
.flow-arrow i { font-style: normal; width: 1.7rem; height: 1.7rem; border: 1px solid var(--gray-3); border-radius: 50%; display: grid; place-items: center; font-size: .85rem; color: var(--gray-5); margin: .2rem 0; background: var(--white); }

.math-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.math-table th { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gray-5); text-align: left; padding: 0 1.2rem 1rem 0; border-bottom: 1px solid var(--ink); }
.math-table td { padding: 1.15rem 1.2rem 1.15rem 0; border-bottom: var(--hair); vertical-align: baseline; }
.math-table td.num { font-family: var(--serif); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 30rem) { .math-table td.num { font-size: 1.08rem; } .math-table { font-size: .85rem !important; } .math-table .note { font-size: .7rem; } }
.math-table tr.you td { background: var(--gray-1); }
.math-table td { padding-left: .9rem; }
.math-table td:first-child { padding-left: 0; }
.math-table td:last-child { text-align: right; }
.math-table .note { display: block; font-size: .76rem; color: var(--gray-5); letter-spacing: .04em; }
.math-table td:last-child .note { text-align: right; }

/* sectors index */
.sector-list { border-top: var(--hair); }
.sector-row { display: grid; grid-template-columns: 3.4rem 1fr auto; align-items: center; gap: 1.4rem; padding: clamp(1.15rem, 2.4vw, 1.7rem) 0; border-bottom: var(--hair); text-decoration: none; color: var(--ink); position: relative; transition: padding .3s var(--ease); }
.sector-row:hover { padding-left: 1.1rem; }
.sector-row .idx { font-size: .72rem; letter-spacing: .12em; color: var(--gray-5); font-variant-numeric: tabular-nums; }
.sector-row .name { font-family: var(--serif); font-size: clamp(1.35rem, 2.6vw, 2.1rem); font-weight: 600; transition: transform .3s var(--ease); }
.sector-row .meta { display: flex; align-items: center; gap: 1.6rem; justify-content: flex-end; flex: none; }
.sector-row .count { text-align: right; }
.sector-row .count { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-5); white-space: nowrap; }
.sector-row .count b { font-family: var(--serif); font-size: 1.06rem; letter-spacing: 0; text-transform: none; color: var(--ink); margin-right: .35rem; font-weight: 600; }
.sector-row .go { width: 2.1rem; height: 2.1rem; border: 1px solid var(--gray-3); border-radius: 50%; display: grid; place-items: center; transition: all .3s var(--ease); }
.sector-row .go svg { width: .8rem; height: .8rem; stroke: var(--ink); transition: all .3s var(--ease); }
.sector-row:hover .go { background: var(--ink); border-color: var(--ink); }
.sector-row:hover .go svg { stroke: var(--white); }
@media (max-width: 44rem) { .sector-row { grid-template-columns: 1fr auto; } .sector-row .idx { display: none; } .sector-row .count { display: none; } }

/* ---------- mobile QA pass (390/320 audit, 2026-09-01) ---------- */
@media (max-width: 59.9rem) {
  /* hero: crop the wide dome cutout to a portrait-ish dome vignette instead of a sky-sliver */
  .hero-alt .alt-img { margin-top: 1.4rem; }
  .hero-alt .alt-img img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; object-position: 100% 50%; }
  /* stats block: three across, one row */
  .hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  /* headline breathing room for serif+italic on narrow measure */
  .hero h1 { line-height: 1.14; }
  /* ticker on phones scrolls like desktop (owner 2026-09-25); reduced motion still gets the swipe list */
  .ticker-label { font-size: .7rem; letter-spacing: .16em; padding: .75rem .9rem; margin-right: 0; }
  .ticker-track a { padding: .75rem 1.2rem; gap: .55rem; }
  .ticker:active .ticker-track { animation-play-state: paused; }
  /* quote band: zero-height qmark box must not crowd the quote on fallback metrics */
  .quote-band .qmark { margin-bottom: 1.9rem; }
  /* feathered photo caption: off the 10.9px floor, clearer of fade residue */
  .ink-figure figcaption { font-size: .74rem; margin-top: 1rem; color: var(--gray-3); }
  /* small body text up to ~15px */
  .value p { font-size: .95rem; }
  .hero-meta div { font-size: .7rem; letter-spacing: .12em; line-height: 1.45; }
  .hero-meta b { font-size: 1.45rem; }
  /* step numerals: solid engraved ordinals (stroke ghost retired with desktop fix) */
  .step::before { color: var(--gray-5); }
  /* footer links: >=44px tap targets */
  footer.site nav { gap: .2rem; }
  footer.site nav a { padding-block: .7rem; }
}
@media (max-width: 44rem) {
  /* phone pass 2026-09-25: CTA buttons share the row; list rows and tables sized for one hand */
  .cta-btns { width: 100%; }
  .btnrow .btn { flex: 1 1 14rem; }
  .cta-btns .btn { flex: 1 1 12rem; justify-content: center; }
  .sector-row { padding: 1rem 0; gap: 1rem; }
  .tabs { gap: .5rem; flex-wrap: nowrap; margin-top: 1.6rem; }
  .tab { flex: 1 1 0; justify-content: center; padding: .62rem .4rem; letter-spacing: .1em; font-size: .7rem; white-space: nowrap; }
  .ind-grid { gap: .45rem; }
  .sector-row .name { font-size: 1.2rem; line-height: 1.25; }
  .sector-row .go { width: 1.9rem; height: 1.9rem; }
  .sector-row:hover { padding-left: 0; }
  /* cost table: the figure wraps under its own column instead of pushing the page wide */
  .math-table td.num { white-space: normal; width: 42%; line-height: 1.2; }
  .math-table td.num .per { display: block; margin-top: .3rem; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-5); }
  .plan-retained-side, .plan-retained-side .btn { width: 100%; }
  .plan-retained-side .btn { white-space: normal; overflow-wrap: anywhere; letter-spacing: .08em; font-size: .72rem; padding-inline: 1rem; }
  /* masthead was 234px fixed brand + 70px toggle -> overflowed 320-class phones */
  .brand-word b { font-size: 1.5rem; letter-spacing: .1em; }
  .brand svg, .brand img.brand-mark { height: 2.6rem; }
  .mast-row { height: 4.4rem; gap: 1rem; }
  .kicker { letter-spacing: .18em; }
}

/* quote band */
.quote-band blockquote { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.5rem, 3.6vw, 2.7rem); line-height: 1.3; max-width: 24ch; }
.quote-band .qmark { font-family: var(--serif); font-size: clamp(4rem, 9vw, 7rem); line-height: 0; display: block; margin: 2.2rem 0 1.2rem; opacity: .9; }

/* principles */
.principles { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .principles.cols-3 { grid-template-columns: repeat(3, 1fr); } .principles.cols-2 { grid-template-columns: repeat(2, 1fr); } }
.principle { border-top: var(--rule-heavy); padding-top: 1.2rem; }
.principle .no { font-size: .7rem; letter-spacing: .2em; color: var(--gray-5); display: block; margin-bottom: .9rem; }
.principle p { color: var(--gray-5); font-size: .95rem; margin: 0; }

/* ---------- page hero for interior pages ---------- */

.page-hero { padding-block: clamp(3.6rem, 8vw, 6.5rem) clamp(2.6rem, 5vw, 4rem); border-bottom: var(--hair); }
.page-hero h1 { max-width: 18ch; }
.page-hero .sub { font-family: var(--serif); font-weight: 400; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.55; color: var(--gray-5); max-width: 38ch; margin-top: 1.8rem; }

/* ---------- industry page ---------- */

.ind-head { padding-block: clamp(3rem, 7vw, 5.5rem) 0; }
.ind-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.ind-title-row h1 { margin: 0; }
.ind-stats { display: flex; gap: 2.6rem; }
.ind-stats div { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gray-5); }
.ind-stats b { display: block; font-family: var(--serif); font-size: 2rem; color: var(--ink); letter-spacing: 0; text-transform: none; font-weight: 600; margin-bottom: .34rem; }

.tabs { display: flex; gap: .85rem; margin: 2.2rem 0 0; flex-wrap: wrap; }
.tab { all: unset; cursor: pointer; font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: .62rem 1.25rem; border: 1px solid var(--gray-3); color: var(--gray-5); display: inline-flex; align-items: center; gap: .55rem; transition: all .22s var(--ease); }
.tab .n { font-size: .7rem; letter-spacing: 0; opacity: .7; font-variant-numeric: tabular-nums; transform: translateY(.5px); }
.tab:hover { border-color: var(--ink); color: var(--ink); }
.tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }

.bill-list { border-top: var(--rule); margin-top: 1.6rem; }
.bill {
  display: grid; grid-template-columns: 8.6rem 1fr; gap: .4rem 2.2rem;
  padding: clamp(1.5rem, 3vw, 2.2rem) 0; border-bottom: var(--hair);
  transition: background .25s var(--ease);
}
.bill:hover { background: color-mix(in srgb, var(--gray-1) 55%, transparent); }
.bill-side { display: flex; flex-direction: column; gap: .72rem; }
.bill-code { font-family: var(--serif); font-size: 1.42rem; font-weight: 700; letter-spacing: .04em; display: inline-flex; align-items: baseline; gap: .5rem; text-decoration: none; color: var(--ink); }
.bill-code svg { width: .68rem; height: .68rem; flex: none; opacity: .45; transform: translateY(-1px); transition: opacity .2s var(--ease); }
.bill-code:hover svg { opacity: 1; }
.bill-body-tag { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gray-5); border: 1px solid var(--gray-3); padding: .42rem .6rem; align-self: flex-start; white-space: nowrap; }
.bill-date { font-size: .74rem; color: var(--gray-5); letter-spacing: .06em; font-variant-numeric: tabular-nums; white-space: normal; line-height: 1.7; }
.bill-main h3 { font-size: clamp(1.15rem, 1.9vw, 1.42rem); margin-bottom: .7rem; }
.bill-who { font-size: .78rem; letter-spacing: .06em; color: var(--gray-5); margin-bottom: 1rem; }
.bill-who b { color: var(--ink-soft); font-weight: 600; }
.bill-who a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.bill-who a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.bill-cols { display: grid; gap: 1.2rem 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .bill-cols { grid-template-columns: 1.15fr .95fr; column-gap: 2.8rem; } }
.bill-cols dt { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gray-5); margin-bottom: .35rem; }
.bill-cols dd { margin: 0; font-size: .9rem; line-height: 1.62; color: var(--ink-soft); }
@media (max-width: 44rem) { .bill { grid-template-columns: 1fr; } .bill-side { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; } .bill-date { white-space: normal; } .bill-date br { display: none; } }

.pool-cta { border: 1px solid var(--ink); box-shadow: none; padding: clamp(1.8rem, 4vw, 3rem); display: grid; gap: 1.6rem; grid-template-columns: 1fr; background: var(--white); }
@media (min-width: 60rem) { .pool-cta { grid-template-columns: 1.6fr 1fr; align-items: center; } }
.pool-meter { display: flex; flex-direction: column; gap: .55rem; }
.pool-meter .bar { height: 3px; background: var(--gray-2); position: relative; }
.pool-meter .bar i { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
.pool-meter .lbl { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .3rem 1.4rem; font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-5); }
.pool-meter .lbl span { white-space: nowrap; }

.ind-nav { display: flex; justify-content: space-between; gap: 2rem; border-top: var(--hair); padding-block: 2.6rem; }
.ind-nav a { text-decoration: none; display: flex; flex-direction: column; gap: .3rem; }
.ind-nav small { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gray-5); }
.ind-nav b { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.ind-nav a.next { text-align: right; margin-left: auto; }

/* about page */
.timeline { border-left: 1px solid var(--gray-3); margin-left: .3rem; display: grid; gap: 2.6rem; padding-left: 2.6rem; }
.timeline > div { position: relative; }
.timeline > div::before { content: ""; position: absolute; left: calc(-2.6rem - 4.5px); top: .5rem; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 1.6px solid var(--ink); }
.timeline .when { font-size: .7rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gray-5); display: block; margin-bottom: .5rem; }
.band-white .timeline > div::before { background: var(--white); }

/* contact form */
.form-grid { display: grid; gap: 1.5rem 2rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .45rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gray-5); }
.field label .req { color: var(--ink); }
.field input, .field select, .field textarea {
  font-family: var(--sans); font-size: .95rem; color: var(--ink);
  background: var(--white); border: 1px solid var(--gray-4); padding: .85rem 1rem;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
  border-radius: 0; appearance: none; width: 100%;
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field select { background-image: linear-gradient(45deg, transparent 50%, var(--gray-5) 50%), linear-gradient(135deg, var(--gray-5) 50%, transparent 50%); background-position: calc(100% - 1.15rem) 55%, calc(100% - .8rem) 55%; background-size: .35rem .35rem; background-repeat: no-repeat; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.field .err { font-size: .74rem; color: var(--ink); display: none; letter-spacing: .02em; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--ink); background: var(--gray-1); }
.field.invalid .err { display: block; }
.check { display: flex; gap: .8rem; align-items: flex-start; font-size: .85rem; color: var(--gray-5); }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--ink); margin-top: .18rem; flex: none; }
.form-note { font-size: .78rem; color: var(--gray-5); }
.form-success { border: 1px solid var(--ink); background: var(--white); padding: clamp(2rem, 5vw, 3.4rem); text-align: center; }
.form-success svg, .form-success img.brand-mark { height: 3.8rem; width: auto; margin-bottom: 1.4rem; }

.info-card h3 { font-size: 1.05rem; margin-bottom: .5rem; }
.info-card p { font-size: .9rem; color: var(--ink-soft); margin: 0; line-height: 1.65; }
.info-card { border-top: 2px solid var(--ink); padding-top: 1.1rem; }

/* ---------- footer ---------- */

footer.site { background: var(--ink); color: var(--gray-3); padding-block: clamp(3.5rem, 7vw, 5.5rem) 2.2rem; }
footer.site .cols { display: grid; gap: 2.8rem; grid-template-columns: 1fr; }
@media (min-width: 56rem) { footer.site .cols { grid-template-columns: 2.2fr 1fr 1fr; } }
footer.site .brand-word b { color: var(--white); }
footer.site .brand-word span { color: var(--gray-4); }
footer.site .brand svg { color: var(--white); }
footer.site h4 { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: #A8A8A2; margin: 0 0 1.2rem; font-weight: 600; }
footer.site a { text-decoration: none; color: #D6D6D2; font-size: .88rem; }
footer.site a:hover { color: var(--white); }
footer.site .fine a { font-size: inherit; }   /* the office phone in the fine print */
footer.site nav { display: grid; gap: .65rem; }
footer .fine { border-top: 1px solid rgba(255,255,255,.14); margin-top: 3.4rem; padding-top: 1.7rem; display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; font-size: .72rem; letter-spacing: .06em; color: #A8A8A2; }

/* ---------- reveal ---------- */

.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.visible { opacity: 1; transform: none; }
.js .reveal.d1 { transition-delay: .12s; }
.js .reveal.d2 { transition-delay: .24s; }
.js .reveal.d3 { transition-delay: .36s; }

/* ---------- utility ---------- */

.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.muted { color: var(--gray-5); }
.smallcaps { font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--white); padding: .8rem 1.4rem; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }
noscript .noscript-note { border: 1px solid var(--ink); padding: .7rem 1rem; font-size: .82rem; margin: 1rem 0; display: block; }

/* Phase C (2026-09-04): direction and likelihood marks on bill cards; indirect list */
.bill-dir{display:inline-block;margin-top:.7rem;padding:.18rem .55rem;border:1px solid var(--hair, #D8D8D2);border-radius:2px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--gray-5,#5C5C57)}
.bill-dir.dir-benefit{border-color:#1E7A57;color:#1E7A57}
.bill-dir.dir-burden{border-color:#B24E2A;color:#B24E2A}
.bill-dir.dir-mixed{border-color:#8A640C;color:#8A640C}
.bill-dir.dir-indirect{border-style:dashed}
.bill-dir.dir-pending{border-style:dotted;border-color:var(--gray-4,#8E8E88);cursor:help}
.bill-rating{display:block;margin-top:.45rem;font-size:.7rem;letter-spacing:.04em;color:var(--gray-5,#5C5C57)}
#indirect-list .bill{opacity:.92}


/* Phase C.2 (2026-09-04): wide industries menu, compact industries page, omnibus mark */
.nav-dd { display: inline-flex; align-items: center; gap: .55rem; }
.nav-dd > button { padding-inline: .1rem; }
.dd-panel.dd-mega { width: min(63rem, 96vw); left: 50%; transform: translate(-50%, .4rem); display: grid; grid-template-columns: 3fr 1.15fr; gap: 0; padding: .6rem 0 .8rem; }
.nav-dd:hover .dd-panel.dd-mega, .nav-dd:focus-within .dd-panel.dd-mega, .nav-dd.open .dd-panel.dd-mega { transform: translate(-50%, 0); }
.dd-mega .dd-col { padding: 0 .4rem; }
.dd-mega .dd-main { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .2rem; border-right: var(--hair); }
.dd-mega .dd-main .dd-head { grid-column: 1 / -1; }
.dd-mega a { padding: .42rem 1rem; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.dd-mega a.dd-all { margin-top: .6rem; color: var(--ink); }
/* one industry list since sectors folded into industry pages (2026-09-25): full width, three columns, no truncation */
.dd-panel.dd-mega:has(.dd-full) { grid-template-columns: 1fr; }
.dd-mega .dd-main.dd-full { border-right: none; }
.dd-mega .dd-full a { white-space: normal; }
/* Owner 2026-09-27: every industry name on one line, so no row of the menu grows taller
   (Automotive & Transportation Equipment needs about 323 px with padding). Below 70rem the
   wider panel would run off the left edge, so it keeps its width and the links tighten. */
@media (max-width: 69.99rem) { .dd-panel.dd-mega { width: min(58rem, 90vw); } .dd-mega .dd-full a { font-size: .76rem; padding-left: .7rem; padding-right: .7rem; } }
@media (max-width: 59.9rem) { .dd-panel.dd-mega { display: none; } }
.ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .55rem; }
.ind-grid.small { grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.ind-tile { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .85rem 1.05rem; border: 1px solid var(--gray-3); border-radius: 2px; text-decoration: none; color: var(--ink); font-family: var(--serif); font-size: 1.05rem; font-weight: 600; line-height: 1.25; transition: background .2s var(--ease), border-color .2s var(--ease); }
.ind-tile::after { content: "\2192"; font-family: var(--sans); font-size: .85rem; color: var(--gray-5); }
.ind-tile:hover, .ind-tile:focus-visible { background: var(--ink); color: #fff; border-color: var(--ink); }
.ind-tile:hover::after { color: #fff; }
.ind-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; margin-top: 3rem; padding-top: 2.4rem; border-top: var(--hair); }
@media (max-width: 47rem) { .ind-groups { grid-template-columns: 1fr; } }
.bill-omni-tag { display: inline-block; margin: .35rem 0 .2rem; padding: .16rem .5rem; border: 1px solid var(--gray-4, #9a9a94); border-radius: 2px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gray-5,#5C5C57); }
.bill-omni { margin: .1rem 0 .55rem; font-size: .86rem; color: var(--gray-5,#5C5C57); font-style: italic; }


/* Landing hero figures (owner 2026-09-04): one line each; hero height stays viewport-sized (owner prefers the large image) */
.hero-meta { gap: 1.6rem; }
.hero-meta div { font-size: .7rem; letter-spacing: .12em; white-space: nowrap; }
.hero-meta b { font-size: 1.6rem; }
@media (max-width: 74.9rem) { .hero-meta div { white-space: normal; } }
@media (max-width: 59.9rem) {
  /* phones and tablets: the three figures stack in a column beside the dome instead of
     a row above a full-width picture (owner 2026-09-25). display: contents lets the
     figures and the picture share one grid row; everything else spans both columns. */
  .hero-alt .alt-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: 1.1rem; row-gap: 0; align-items: center; }
  .hero-alt .alt-copy { display: contents; }
  .hero-alt .alt-copy > * { grid-column: 1 / -1; }
  .hero-alt .alt-copy > .hero-meta { grid-column: 1; display: flex; flex-direction: column; gap: 1.05rem; margin-top: 1.7rem; padding-top: 0; border-top: none; }
  /* the picture runs off the right edge of the screen instead of stopping at the gutter
     with a hard vertical cut (owner 2026-09-25); .hero's overflow: hidden keeps the page
     from scrolling sideways */
  .hero-alt .alt-img { grid-column: 2; margin-top: 1.7rem; margin-right: calc(-1 * var(--pad)); }
  .hero-alt .alt-img img { aspect-ratio: 5 / 6; max-height: 20rem; object-position: 100% 30%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%); }
  /* and "How it works" sits a little closer to the hero */
  .hero-alt { padding-bottom: 1.6rem; }
  .hero-alt + section { padding-top: 2.9rem; }
  .hero-meta div { font-size: .7rem; letter-spacing: .12em; line-height: 1.4; }
  .hero-meta b { font-size: 1.5rem; margin-bottom: .15rem; }
}
/* landing industries list (owner 2026-09-04): five names, no index column */
.sector-row.no-idx { grid-template-columns: 1fr auto; }

/* ============================================================
   SUBSCRIPTION EDITION additions (2026-09-04). Same tokens, same rule scale.
   ============================================================ */

/* industry-page subscribe box (replaces the pool meter) */
.sub-cta { border: 1px solid var(--ink); padding: clamp(1.8rem, 4vw, 3rem); display: grid; gap: 1.6rem; grid-template-columns: 1fr; background: var(--white); }
@media (min-width: 60rem) { .sub-cta { grid-template-columns: 1.6fr 1fr; align-items: center; } }
.plan-rows { display: flex; flex-direction: column; border-top: var(--hair); }
.plan-row { display: grid; grid-template-columns: 6.2rem 1fr auto; gap: .2rem 1rem; align-items: baseline; padding: .8rem 0; border-bottom: var(--hair); text-decoration: none; color: var(--ink); transition: padding .25s var(--ease); }
.plan-row:hover { padding-left: .5rem; }
.plan-row .pr-name { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; }
.plan-row .pr-what { font-size: .8rem; color: var(--gray-5); }
.plan-row .pr-price { font-family: var(--serif); font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.plan-row .pr-price small { font-family: var(--sans); font-weight: 500; font-size: .7rem; color: var(--gray-5); letter-spacing: .04em; }
@media (max-width: 40rem) { .plan-row { grid-template-columns: 1fr auto; } .plan-row .pr-what { grid-column: 1 / -1; } }
.plan-compare { display: block; margin-top: .9rem; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--gray-5); text-decoration: none; text-align: center; }
.plan-compare:hover { color: var(--ink); }

/* plan cards */
.plans { display: grid; gap: 1.2rem; grid-template-columns: 1fr; align-items: stretch; }
@media (min-width: 60rem) { .plans { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; border: 1px solid var(--gray-3); background: var(--white); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: 1rem; }
.plan.featured { border: 2px solid var(--ink); }
.plan .tag { position: absolute; top: -.75rem; left: 1.4rem; background: var(--ink); color: var(--white); font-size: .7rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; padding: .32rem .75rem; }
.plan h3 { font-size: 1.45rem; margin: 0; }
.plan .for { font-size: .9rem; line-height: 1.6; color: var(--gray-5); margin: 0; min-height: 4.4em; }
.plan-price { display: flex; align-items: baseline; gap: .5rem; margin: 0; font-family: var(--serif); font-weight: 600; font-size: clamp(2.2rem, 3.2vw, 2.9rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.plan-price small { font-family: var(--sans); font-weight: 600; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gray-5); line-height: 1.35; }
.plan-annual { margin: -.4rem 0 0; font-size: .78rem; letter-spacing: .03em; color: var(--gray-5); }
.plan-list { list-style: none; margin: 0; padding: 1.1rem 0 0; border-top: var(--hair); display: grid; gap: .6rem; font-size: .9rem; line-height: 1.55; }
.plan-list li { display: grid; grid-template-columns: .9rem 1fr; gap: .7rem; align-items: start; }
.plan-list li::before { content: ""; width: .45rem; height: .45rem; margin-top: .55rem; background: var(--ink); border-radius: 50%; }
.plan-list li.inherits { color: var(--gray-5); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.plan-list li.inherits::before { background: var(--gray-3); }
.plan .btn { margin-top: auto; justify-content: center; }
.plan-fine { margin: 1.4rem 0 0; font-size: .8rem; color: var(--gray-5); max-width: 76ch; line-height: 1.6; }

/* retained strip */
.plan-retained { border: 1px solid var(--ink); background: var(--white); padding: clamp(1.6rem, 3vw, 2.4rem); display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 60rem) { .plan-retained { grid-template-columns: 1.8fr 1fr; align-items: center; } }
.plan-retained h3 { margin-bottom: .6rem; }
.plan-retained-side { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; }
@media (min-width: 60rem) { .plan-retained-side { align-items: flex-end; } }

/* compare table */
.compare-wrap { overflow-x: auto; border-top: 1px solid var(--ink); }
.compare { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 44rem; }
.compare th, .compare td { padding: .95rem 1rem; border-bottom: var(--hair); vertical-align: baseline; text-align: left; }
.compare thead th { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; padding-top: 1.3rem; }
.compare thead th small { display: block; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-5); margin-top: .2rem; }
.compare thead th.featured { border-bottom: 2px solid var(--ink); }
.compare tbody th { font-weight: 500; color: var(--ink-soft); width: 46%; }
.compare td { color: var(--gray-5); font-size: .86rem; }
.compare td .ck { font-family: var(--sans); font-size: 1.05rem; color: var(--ink); }
.compare td .no-ck { font-family: var(--sans); font-size: 1.05rem; color: var(--gray-5); }
@media (max-width: 44rem) {
  /* compare table: each row stacks, the feature on top and the three plans beneath; the plan names stay pinned under the masthead */
  .compare-wrap { overflow: visible; }
  .compare, .compare tbody { display: block; min-width: 0; }
  .compare thead { position: sticky; top: 4.4rem; z-index: 3; display: block; background: var(--paper); border-bottom: 1px solid var(--ink); }
  .compare thead tr, .compare tbody tr { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: .8rem; }
  .compare thead th:first-child { display: none; }
  .compare thead th { padding: .8rem 0 .7rem; font-size: 1rem; }
  .compare thead th small { font-size: .7rem; letter-spacing: .1em; }
  .compare tbody tr { border-bottom: var(--hair); padding: .85rem 0 .9rem; row-gap: .35rem; }
  .compare tbody th, .compare td { border-bottom: none; padding: 0; }
  .compare tbody th { grid-column: 1 / -1; width: auto; font-size: .92rem; }
  .compare td { font-size: .8rem; line-height: 1.4; }
}

/* faq */
.faq { border-bottom: var(--hair); }
.faq details { border-top: var(--hair); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 1.4rem; align-items: baseline; padding: 1.15rem 0; font-family: var(--serif); font-weight: 600; font-size: 1.12rem; line-height: 1.3; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--sans); font-weight: 400; font-size: 1.3rem; color: var(--gray-5); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: -.2rem 0 1.4rem; max-width: 62ch; color: var(--ink-soft); line-height: 1.7; font-size: .95rem; }

/* subscribe form */
.fs { border: 0; padding: 0; margin: 0 0 2.6rem; min-width: 0; }
.fs legend { padding: 0; margin-bottom: 1.2rem; }
.plan-choices { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .plan-choices { grid-template-columns: repeat(3, 1fr); } }
.plan-choice { position: relative; display: block; border: 1px solid var(--gray-3); background: var(--white); padding: 1.1rem 1.1rem 1.1rem 2.5rem; cursor: pointer; transition: border-color .2s var(--ease); }
.plan-choice:hover { border-color: var(--gray-5); }
.plan-choice input { position: absolute; left: 1rem; top: 1.25rem; width: 1rem; height: 1rem; accent-color: var(--ink); margin: 0; }
.plan-choice:has(input:checked) { border: 2px solid var(--ink); padding: calc(1.1rem - 1px) calc(1.1rem - 1px) calc(1.1rem - 1px) calc(2.5rem - 1px); }
.plan-choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
.pc-body { display: grid; gap: .25rem; }
.pc-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; }
.pc-price { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pc-price small { font-family: var(--sans); font-weight: 500; font-size: .7rem; color: var(--gray-5); letter-spacing: .04em; }
.pc-for { font-size: .78rem; line-height: 1.5; color: var(--gray-5); }
.bill-cycle { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1rem; }
.cycle { display: inline-flex; align-items: center; gap: .55rem; font-size: .8rem; letter-spacing: .06em; padding: .55rem 1rem; border: 1px solid var(--gray-3); cursor: pointer; }
.cycle input { accent-color: var(--ink); margin: 0; }
.cycle:has(input:checked) { border-color: var(--ink); background: var(--white); }

/* order summary */
.order { border: 1px solid var(--ink); background: var(--white); padding: clamp(1.4rem, 3vw, 2rem); }
.order dl { margin: 0; display: grid; gap: 0; }
.order dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: var(--hair); font-size: .9rem; }
.order dl > div.total { border-bottom: 0; padding-top: .9rem; }
.order dt { color: var(--gray-5); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; align-self: baseline; }
.order dd { margin: 0; text-align: right; }
.order .total dd { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; font-variant-numeric: tabular-nums; }

/* sticky masthead must never cover #plan-* anchors reached via deep links */
[id^="plan-"] { scroll-margin-top: 0; }
.bill[id^="bill-"] { scroll-margin-top: .5rem; }
.bill.bill-target { outline: 2px solid var(--ink); outline-offset: 6px; }
.bill .why { display: block; margin-top: .55rem; padding-top: .5rem; border-top: var(--hair); color: var(--ink); }

/* ===== launch additions ===== */
/* 2026-09-18 launch build: legal pages, order form, agreement signing, executed copy,
   welcome and manage pages, print. Same tokens, same rule scale, no new fonts.
   Breakpoints in this section: 720px and 420px. State colours reuse the direction-mark
   greens and reds already in this file (#1E7A57, #B24E2A, #8A640C). */

/* --- legal typography (privacy, website terms, services terms, agreement) --- */
.legal { max-width: 72ch; font-size: .97rem; line-height: 1.7; color: var(--ink-soft); }
.legal h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
.legal h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin: 2.6rem 0 .9rem; padding-top: 1.2rem; border-top: var(--hair); scroll-margin-top: .9rem; }
.legal h2:first-child, .legal .order-status + h2 { border-top: 0; padding-top: 0; margin-top: 0; }
.legal h3 { font-size: 1.1rem; margin: 1.8rem 0 .6rem; scroll-margin-top: .9rem; }
.legal h4 { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-5); margin: 1.4rem 0 .5rem; }
.legal p { margin: 0 0 1rem; }
.legal p.meta, .legal .modified { font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gray-5); }
.legal strong, .legal b { color: var(--ink); }
.legal ol, .legal ul { margin: 0 0 1.1rem; padding-left: 1.7rem; }
.legal ol[type="a"], .legal ol.alpha { list-style-type: lower-alpha; padding-left: 2.3rem; }
.legal ol[type="i"], .legal ol.roman { list-style-type: lower-roman; padding-left: 2.7rem; }
.legal ol[type="1"], .legal ol.decimal { list-style-type: decimal; }
.legal ol[type="A"] { list-style-type: upper-alpha; padding-left: 2.3rem; }
.legal li { margin-bottom: .45rem; padding-left: .2rem; }
.legal li > ol, .legal li > ul { margin-top: .45rem; margin-bottom: .6rem; }
.legal dl { margin: 0 0 1.1rem; }
.legal dt { font-weight: 600; color: var(--ink); }
.legal dd { margin: 0 0 .7rem; }
.legal hr { border: 0; border-top: var(--rule); margin: 2.4rem 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: 0 0 1.2rem; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: .65rem .9rem .65rem 0; border-bottom: var(--hair); }
.legal thead th { font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gray-5); border-bottom: var(--rule); }
.legal tbody th { font-weight: 600; color: var(--ink); width: 34%; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.2rem; }
.table-wrap > table { margin-bottom: 0; }
table.plans td.num, table.plans th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.of-check { font-family: var(--sans); font-weight: 700; letter-spacing: .06em; color: var(--ink); white-space: nowrap; margin-right: .25rem; font-variant-numeric: tabular-nums; }
.legal [data-of] { font-weight: 600; color: var(--ink); }
.legal [data-of].placeholder, .placeholder { font-weight: 400; font-style: italic; color: var(--gray-4); }
.legal .fine, .legal small { font-size: .82rem; color: var(--gray-5); }

/* table of contents on the legal pages */
.toc { list-style: none; margin: 0 0 2.4rem; padding: 1rem 0 0; border-top: var(--rule); font-size: .88rem; columns: 2; column-gap: 2.4rem; }
.toc li { break-inside: avoid; margin: 0 0 .45rem; padding: 0; }
.toc a { text-decoration: none; color: var(--ink-soft); }
.toc a:hover, .toc a:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
.toc .n { color: var(--gray-5); font-variant-numeric: tabular-nums; margin-right: .5rem; }

/* signature grid printed on the Order Form (party / party) */
.signature { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem 3rem; margin: 2.4rem 0 1.2rem; padding-top: 1.4rem; border-top: var(--rule-heavy); }
.signature > div { display: grid; gap: .45rem; font-size: .9rem; align-content: start; }
.signature .party { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.signature .line { border-bottom: 1px solid var(--ink); min-height: 2.2rem; }
.signature .lbl { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-5); }

/* --- agreement page: signature block, scroll gate, sticky bar --- */
#scroll-sentinel { display: block; height: 1px; margin: 0; }
#sign-block { border: 1px solid var(--ink); background: var(--white); padding: clamp(1.4rem, 3vw, 2.2rem); margin: 2.4rem 0 0; display: grid; gap: 1.1rem; scroll-margin-top: 6rem; }
#sign-block:focus { outline: 2px solid var(--ink); outline-offset: 3px; }
#sign-block h2 { margin: 0; border: 0; padding: 0; font-size: 1.4rem; }
#sign-block p { margin: 0; font-size: .92rem; color: var(--ink-soft); max-width: 62ch; }
#sign-block .check { color: var(--ink-soft); font-size: .9rem; line-height: 1.55; }
#sign-block .check input { margin-top: .22rem; }
#sign-block .field input { max-width: 28rem; }
#sign-block .actions { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }
#sign-block .notice { max-width: 62ch; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }
.btn[disabled]:hover, .btn:disabled:hover { background: var(--ink); color: var(--white); transform: none; }
.btn.ghost[disabled]:hover, .btn.ghost:disabled:hover { background: transparent; color: var(--ink); }
.signer-hint { display: block; font-size: .76rem; color: var(--gray-5); margin-top: .35rem; letter-spacing: .02em; line-height: 1.5; }
.signer-hint.bad { color: #B24E2A; }
.signer-hint.ok { color: #1E7A57; }
#agree-error, .notice { font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
#agree-error[hidden], .notice[hidden] { display: none; }
#agree-error[data-kind="error"], .notice[data-kind="error"] { border-left: 3px solid #B24E2A; padding: .7rem 1rem; background: var(--gray-1); }
#agree-error[data-kind="notice"], .notice[data-kind="notice"] { border-left: 3px solid var(--ink); padding: .7rem 1rem; background: var(--gray-1); }
#agree-error[data-kind="ok"], .notice[data-kind="ok"] { border-left: 3px solid #1E7A57; padding: .7rem 1rem; background: var(--gray-1); }
#agree-error p:last-child, .notice p:last-child { margin-bottom: 0; }
#agree-error ul { margin: .4rem 0 .8rem; padding-left: 1.4rem; }
#agree-error a, .notice a { color: var(--ink); }

#agree-bar { position: sticky; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; flex-wrap: wrap; margin-top: 1.6rem; padding: .8rem 1.2rem; background: var(--gray-1); border-top: 1px solid var(--ink); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); transition: background .3s var(--ease), color .3s var(--ease); }
#agree-bar[hidden] { display: none; }
#agree-bar .agree-text { display: inline-flex; align-items: center; gap: .7rem; }
#agree-bar .agree-text::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--gray-4); flex: none; }
#agree-bar[data-state="checks"] { background: var(--white); }
#agree-bar[data-state="checks"] .agree-text::before { background: #8A640C; }
#agree-bar[data-state="ready"] { background: var(--ink); color: var(--white); }
#agree-bar[data-state="ready"] .agree-text::before { background: #1E7A57; }
#agree-bar[data-state="busy"] { background: var(--ink); color: var(--gray-3); }
#agree-bar[data-state="busy"] .agree-text::before { background: var(--gray-3); animation: agree-pulse .9s infinite alternate; }
#agree-bar[data-state="error"] .agree-text::before, #agree-bar[data-state="none"] .agree-text::before { background: #B24E2A; }
#agree-bar a.agree-jump { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; font-weight: 500; }
#agree-bar[data-state="busy"] .agree-jump { display: none; }
#agree-bar :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@keyframes agree-pulse { from { opacity: .3; } to { opacity: 1; } }

/* executed copy (agreement.html?order=&key=) */
.order-status { border: 1px solid var(--ink); background: var(--white); padding: 1.2rem 1.4rem; margin: 0 0 2rem; font-size: .9rem; }
.order-status h2 { margin: 0 0 .8rem; padding: 0; border: 0; font-size: 1.3rem; }
.order-status[data-kind="error"] { border-color: #B24E2A; }
.status-list { margin: 0; display: grid; gap: 0; }
.status-list > div { display: grid; grid-template-columns: 11rem 1fr; gap: .3rem 1.2rem; padding: .5rem 0; border-bottom: var(--hair); }
.status-list > div:last-child { border-bottom: 0; }
.status-list dt { font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-5); align-self: baseline; padding-top: .25rem; }
.status-list dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.exec-actions { margin: 1.6rem 0; display: flex; gap: 1rem; flex-wrap: wrap; }
.executed #sign-block, .executed #agree-bar { display: none; }

/* --- welcome status card --- */
#welcome-status { border: 1px solid var(--ink); background: var(--white); padding: clamp(1.6rem, 3vw, 2.4rem); max-width: 46rem; }
#welcome-status[aria-busy="true"] { border-style: dashed; color: var(--gray-5); }
#welcome-status[data-kind="error"] { border-color: #B24E2A; }
#welcome-status h2 { margin: 0 0 .8rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
#welcome-status .lead { font-size: 1rem; font-weight: 400; color: var(--ink-soft); }
#welcome-status h3 { font-size: 1.05rem; margin: 1.6rem 0 .5rem; }
#welcome-status ol, #welcome-status ul { margin: 0; padding-left: 1.4rem; font-size: .92rem; line-height: 1.65; color: var(--ink-soft); }
#welcome-status li { margin-bottom: .5rem; }
#welcome-status .status-list { margin: 1rem 0 .4rem; }
#welcome-status a { color: var(--ink); }

/* --- mailbox directory (contact page) --- */
.mail-dir { margin: 0; display: grid; gap: 0; border-top: var(--rule); }
.mail-dir > div { display: grid; grid-template-columns: 15rem 1fr; gap: .3rem 1.4rem; padding: .85rem 0; border-bottom: var(--hair); }
.mail-dir dt { font-family: var(--sans); font-weight: 600; font-size: .86rem; letter-spacing: .02em; overflow-wrap: anywhere; color: var(--ink); }
.mail-dir dt a { text-decoration: none; }
.mail-dir dt a:hover, .mail-dir dt a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.mail-dir dd { margin: 0; font-size: .88rem; color: var(--gray-5); line-height: 1.6; }

/* --- order form (subscribe) --- */
#order-form .fs + .fs { border-top: var(--hair); padding-top: 2rem; }
#order-form .fs legend + p, #order-form .fs-note { font-size: .86rem; color: var(--gray-5); margin: -.4rem 0 1.2rem; max-width: 62ch; }
#order-form .field textarea { min-height: 9.5rem; }
#order-form .field .count { font-size: .72rem; color: var(--gray-5); text-align: right; }
#order-form .field[hidden], #order-form fieldset[hidden] { display: none; }
#order-form .radio-row { display: flex; gap: .7rem; flex-wrap: wrap; }
#order-form .radio-row label, #order-form .choice { display: inline-flex; align-items: center; gap: .55rem; font-size: .86rem; letter-spacing: .02em; text-transform: none; color: var(--ink); padding: .55rem 1rem; border: 1px solid var(--gray-3); cursor: pointer; background: var(--white); }
#order-form .radio-row label:has(input:checked), #order-form .choice:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
#order-form .radio-row label:has(input:focus-visible), #order-form .choice:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
#order-form .radio-row input { accent-color: var(--ink); margin: 0; }
#order-form .field input:disabled, #order-form .field select:disabled { background: var(--gray-1); color: var(--gray-5); cursor: not-allowed; }
#order-form .next-note { border-left: 2px solid var(--ink); padding-left: 1rem; font-size: .86rem; color: var(--gray-5); max-width: 62ch; margin: 2rem 0 1.4rem; }
#order-form .form-actions { margin-top: 1.6rem; display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; }
#order-error { margin-top: 1.2rem; }
#order-summary { position: sticky; top: 7.4rem; align-self: start; }
#order-summary .total dd { font-size: 1.2rem; }
#order-summary .form-note { margin-top: 1rem; }
#order-summary dd { overflow-wrap: anywhere; }

/* --- manage page: no typing form since phase 3; #portal-status is the live region checkout.js fills --- */
#portal-status { margin: 0 0 2rem; max-width: 46rem; }
#portal-status[aria-busy="true"] p::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ink); margin-right: .6rem; vertical-align: middle; animation: agree-pulse .9s infinite alternate; }

/* --- contact form: fetch states --- */
.form-error { border-left: 3px solid #B24E2A; padding: .5rem .9rem; background: var(--gray-1); margin-top: 1rem; }
.form-error[hidden] { display: none; }
#contact-form.sent .form-grid, #contact-form.sent .form-actions { display: none; }

/* --- print: the agreement, the executed copy and the legal pages on paper --- */
@media print {
  .masthead, .mobile-nav, footer.site, #agree-bar, #sign-block, .exec-actions, .btn, button, .skip-link, .toc, .no-print, .ticker, noscript { display: none !important; }
  html { scroll-behavior: auto; }
  body { background: #fff; color: #000; font-size: 11pt; line-height: 1.45; }
  main, .wrap, .wrap-narrow, section, .page-hero { padding: 0 !important; margin: 0 !important; max-width: none !important; border: 0 !important; }
  .page-hero h1 { font-size: 20pt; margin-bottom: .6rem; }
  .page-hero .sub { margin-top: .4rem; font-size: 11pt; max-width: none; }
  .legal { max-width: none; color: #000; font-size: 10.5pt; line-height: 1.4; }
  .legal h2 { border-top: 0; padding-top: 0; margin-top: 1.4rem; font-size: 14pt; page-break-after: avoid; break-after: avoid; }
  .legal h3 { font-size: 11.5pt; page-break-after: avoid; break-after: avoid; }
  /* rows, list items and the short tables stay whole; a long table may split across pages, or it drags a half page of
     white space with it (review ux-3) */
  .legal tr, .legal li, .signature, .order-status, .legal table.signatures, .legal table.fees { page-break-inside: avoid; break-inside: avoid; }
  .table-wrap { overflow: visible; }
  table.plans { min-width: 0; }
  #schedule-a, .schedule-a, [data-schedule="a"] { page-break-before: always; break-before: page; }
  a { text-decoration: none; color: inherit; }
  .placeholder { color: #444; }
  .of-check { color: #000; }
  .order-status { border: 1px solid #000; }
  .status-list > div { border-bottom: 1px solid #ccc; }
  .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* --- responsive --- */
@media (max-width: 720px) {
  .signature { grid-template-columns: 1fr; gap: 1.6rem; }
  .status-list > div, .mail-dir > div { grid-template-columns: 1fr; gap: .15rem; }
  .status-list dt { padding-top: 0; }
  #agree-bar { padding: .7rem var(--pad); font-size: .7rem; letter-spacing: .1em; }
  #order-summary { position: static; }
  .toc { columns: 1; }
  .legal tbody th { width: auto; }
  .legal { font-size: .95rem; }
  .exec-actions .btn, #sign-block .actions .btn { width: 100%; }
}
@media (max-width: 420px) {
  .legal { font-size: .93rem; line-height: 1.65; }
  .legal ol, .legal ul { padding-left: 1.3rem; }
  .legal ol[type="a"], .legal ol.alpha { padding-left: 1.7rem; }
  .legal ol[type="i"], .legal ol.roman { padding-left: 2.1rem; }
  .legal th, .legal td { padding-right: .6rem; font-size: .84rem; }
  #agree-bar { flex-direction: column; align-items: flex-start; gap: .45rem; }
  #sign-block { padding: 1.1rem; }
  #sign-block .field input { max-width: none; }
  #welcome-status, .order-status { padding: 1.1rem; }
  #order-form .radio-row label, #order-form .choice { width: 100%; }
  .mail-dir dt { font-size: .82rem; }
}

/* ===== review fixes 2026-09-18 (ux-1/2/3/4/5/6/7/9/11/13/17/18, flow-1, code-11, legal-10) ===== */
/* radios and checkboxes inside .field keep their native indicator */
.field input[type="radio"], .field input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; width: 1.05rem; height: 1.05rem; padding: 0; border: 0; box-shadow: none; background: none; accent-color: var(--ink); margin: .18rem 0 0; flex: none; }
.field input[type="radio"]:focus, .field input[type="checkbox"]:focus { box-shadow: none; outline: 2px solid var(--ink); outline-offset: 2px; }
/* consent and option labels are sentences, not field titles */
.field label.check, #sign-block label.check, fieldset.field label.check { font-size: .9rem; font-weight: 400; letter-spacing: .01em; text-transform: none; color: var(--ink-soft); line-height: 1.55; display: flex; gap: .8rem; align-items: flex-start; }
.field > legend { font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gray-5); padding: 0; margin-bottom: .2rem; }
.fs > .err { font-size: .74rem; color: #B24E2A; display: none; letter-spacing: .02em; margin-top: .6rem; }
.fs.invalid > .err { display: block; }
/* Schedule A and Order Form tables are tables, not the pricing grid; a wide child never widens a grid column */
.legal table.plans, .legal table.rates, .legal table.order-form, .legal table.signatures { display: table; grid-template-columns: none; gap: 0; min-width: 0; width: 100%; }
.grid-2 > * { min-width: 0; }
/* prose breaks at word boundaries only; "anywhere" counts toward min-content and let auto table layout squeeze the
   Order Form row headers on phones and the Schedule A fee column in print (review ux-2). Long tokens (filled values,
   emails, urls) may still break anywhere. */
.legal { overflow-wrap: break-word; }
.legal [data-of], .legal td a { overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .legal table.plans, .legal table.rates { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .legal table.plans thead th, .legal table.rates thead th { white-space: nowrap; }
  .legal table.plans td, .legal table.plans th, .legal table.rates td, .legal table.rates th { min-width: 11rem; }
}
/* blank Order Form (no order loaded, or JavaScript off): blanks and empty boxes */
.legal [data-of]:empty::before { content: "________"; color: var(--gray-5); font-weight: 400; }
.legal [data-of-check]:empty::before { content: "[ ]"; font-family: var(--sans); font-weight: 700; letter-spacing: .06em; margin-right: .25rem; }
.legal .choice + .choice { margin-left: .8rem; }
/* without JavaScript nothing on the page can sign */
html:not(.js) #sign-block, html:not(.js) #agree-bar { display: none; }
/* the Issue Portfolio keeps its paragraph breaks */
.legal [data-of="issue_portfolio"] { white-space: pre-line; }
/* the client's legal name keeps its case on the signature header */
.legal table.signatures thead th { text-transform: none; letter-spacing: 0; font-size: .9rem; }
/* contrast */
.legal [data-of].placeholder, .placeholder { color: var(--gray-5); }
.field .err { color: #B24E2A; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #B24E2A; }
/* sticky bar: the flex rules act on the inner wrap */
#agree-bar { display: block; padding: 0; }
#agree-bar > .wrap { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; flex-wrap: wrap; padding: .8rem var(--pad); }
#agree-bar a.agree-jump { display: inline-block; padding: .45rem 0; }
/* legal-page table of contents (headings carry their own numbers) */
.legal-toc ol { list-style: none; margin: 0 0 2.4rem; padding: 1rem 0 0; border-top: var(--rule); font-size: .88rem; }
.legal-toc li { margin: 0 0 .35rem; padding: 0; }
.legal-toc a { display: block; padding: .2rem 0; text-decoration: none; color: var(--ink-soft); }
.legal-toc a:hover, .legal-toc a:focus-visible { text-decoration: underline; text-underline-offset: 3px; color: var(--ink); }
@media (min-width: 60rem) { .legal-toc { position: sticky; top: 6rem; align-self: start; } }
/* executed copy: the hero states what the page is, not what to do */
.executed .page-hero .sub { display: none; }
/* pricing compare table "not included" mark: set on .compare td .no-ck above (review ux-1: a bare .no-ck rule lost on specificity) */
/* confirm page (owner only) */
#confirm-form { display: grid; gap: 1.2rem; max-width: 34rem; }
#confirm-result { margin-top: 1rem; }
@media print {
  .legal-toc, .page-hero .sub { display: none !important; }
  .executed .page-hero h1 { font-size: 16pt; }
  .legal table.plans, .legal table.rates { display: table; overflow: visible; }
}
@media (max-width: 420px) {
  #agree-bar > .wrap { flex-direction: column; align-items: flex-start; gap: .45rem; }
}
/* the sticky #agree-bar covers the bottom of the viewport; on the signing page the scrollport is padded by more than the
   bar's tallest state so a focused control is scrolled clear of it (WCAG 2.4.11, review ux-5). The bar's own jump link
   sits inside that band, so its scroll margin cancels the padding and focusing it does not move the page. */
html.signing { scroll-padding-bottom: 8rem; }
html.signing #agree-bar .agree-jump { scroll-margin-bottom: -8rem; }
/* a completed order (checkout.js data-state "done") shows a settled mark, not the error colour (review ux-8) */
#agree-bar[data-state="done"] .agree-text::before { background: #1E7A57; }

/* ===== phase 3, 2026-09-19 (DESIGN.md 13.4): print-mode for the PDF renderer, Download PDF, decline banner, the owner page ===== */
/* ?print=1: main.js and checkout.js put print-mode on <html> before anything renders. The chrome goes, nothing animates, the
   article runs full width. The @media print rules above still apply when the renderer emulates print media; these cover the
   screen view of the same URL. */
html.print-mode .masthead, html.print-mode .mobile-nav, html.print-mode footer.site, html.print-mode #agree-bar, html.print-mode #sign-block,
html.print-mode .doc-tools, html.print-mode .exec-actions, html.print-mode .skip-link, html.print-mode .page-hero .sub, html.print-mode noscript,
html.print-mode #scroll-sentinel, html.print-mode .ticker { display: none !important; }
html.print-mode .reveal, html.print-mode.js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
html.print-mode, html.print-mode body { scroll-behavior: auto; }
html.print-mode body { background: #fff; }
html.print-mode .page-hero { padding-block: 1.2rem .8rem; border-bottom: 0; }
html.print-mode .page-hero h1 { font-size: 1.7rem; max-width: none; margin-bottom: .4rem; }
html.print-mode .agreement-page, html.print-mode section { padding-block: 0 1rem; }
html.print-mode .wrap { max-width: none; padding-inline: 0; }
html.print-mode .legal, html.print-mode #agreement-doc { max-width: none; }
html.print-mode .legal h2, html.print-mode .legal h3 { scroll-margin-top: 0; }
/* the Download PDF button lives in the toolbar; .exec-actions and .btn set their own display, so the hidden attribute needs help */
.exec-actions[hidden], .btn[hidden], #pdf-btn[hidden] { display: none !important; }
.doc-tools .exec-actions { margin: 0; }
/* the executed page's under-review line and the declined banner (date and refund only, never the reason) */
.order-status .lead { font-size: .92rem; font-weight: 400; margin: 0 0 1rem; max-width: 62ch; }
.declined-banner { border: 1px solid var(--ink); border-left-width: 4px; background: var(--gray-1); padding: .8rem 1rem; margin: 0 0 1rem; font-size: .92rem; line-height: 1.6; color: var(--ink); max-width: 62ch; }
#welcome-status .declined-banner { max-width: none; }
/* owner page: confirm and decline side by side, the notes in a row below */
.owner-actions { display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr; }
@media (min-width: 60rem) { .owner-actions { grid-template-columns: 1fr 1fr; } }
.owner-action { border-top: 2px solid var(--ink); padding-top: 1.2rem; min-width: 0; }
.owner-action h2 { font-size: 1.4rem; margin-bottom: .6rem; }
.owner-action > .form-note { font-size: .88rem; color: var(--gray-5); max-width: 62ch; margin: 0 0 1.4rem; }
#confirm-form, #decline-form { display: grid; gap: 1.2rem; max-width: 34rem; }
#confirm-form textarea, #decline-form textarea { min-height: 6.5rem; }
#confirm-result, #decline-result { margin-top: 1rem; }
.warn-line { border-left: 3px solid #B24E2A; background: var(--gray-1); padding: .7rem 1rem; font-size: .88rem; line-height: 1.6; color: var(--ink); margin: 0; }
.owner-notes { display: grid; gap: 2.2rem; grid-template-columns: 1fr; margin-top: clamp(2.6rem, 5vw, 4rem); padding-top: 2rem; border-top: var(--hair); align-content: start; }
@media (min-width: 60rem) { .owner-notes { grid-template-columns: repeat(3, 1fr); } }

/* ===== agreement sheet 2026-09-19 (owner: the signed and executed copies read as a document on every screen) ===== */
.agreement-page #agreement-doc { max-width: 52rem; margin: 0 auto; background: var(--white); border: 1px solid var(--gray-3); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); padding: clamp(1.6rem, 5vw, 3.6rem) clamp(1.2rem, 6vw, 4rem); font-size: .9rem; line-height: 1.6; }
.agreement-page #agreement-doc h2 { font-size: 1.25rem; margin-top: 2.2rem; }
.agreement-page #agreement-doc h3 { font-size: 1rem; }
.agreement-page #agreement-doc table { font-size: .84rem; }
.agreement-page #agreement-doc .order-status { font-size: .86rem; }
.agreement-page .doc-tools, .agreement-page #sign-block, .agreement-page .exec-actions, .agreement-page .declined-banner { max-width: 52rem; margin-inline: auto; }
@media (max-width: 720px) {
  .agreement-page #agreement-doc { padding: 1.4rem 1rem; font-size: .86rem; line-height: 1.55; }
  .agreement-page #agreement-doc h2 { font-size: 1.1rem; }
}
/* browser print (the Print button) gets real page margins whatever the print dialog defaults to */
@page { size: Letter; margin: 0.6in; }
@media print {
  .agreement-page #agreement-doc { border: 0; box-shadow: none; padding: 0; max-width: none; font-size: 10.5pt; }
}

/* the agreement toolbar: hidden while signing (the inline style used to beat the hidden attribute), shown on the executed copy */
.doc-tools { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-bottom: 1.6rem; }
.doc-tools[hidden] { display: none !important; }

/* ---------- accessibility pass (WCAG 2.2 AA audit, 2026-09-25) ---------- */
/* 2.4.11 focus not obscured: the sticky masthead never covers what keyboard focus or an
   anchor jump scrolls to (section offsets above now only add breathing room) */
html { scroll-padding-top: 6.6rem; }
@media (max-width: 44rem) { html { scroll-padding-top: 4.9rem; } }
/* 2.2.2 pause, stop, hide: the ticker's pause control; reduced motion already stops it */
.ticker-label { margin-right: 0; }
.ticker-pause { all: unset; box-sizing: border-box; flex: none; width: 2.6rem; display: grid; place-items: center; background: var(--ink); color: var(--white); cursor: pointer; position: relative; z-index: 2; border-left: 1px solid rgba(255,255,255,.22); margin-right: 1.6rem; }
@media (max-width: 59.9rem) { .ticker-pause { margin-right: 0; width: 2.4rem; } }
.ticker-pause svg { width: .72rem; height: .72rem; fill: currentColor; }
.ticker-pause .i-play, .ticker-pause[aria-pressed="true"] .i-pause { display: none; }
.ticker-pause[aria-pressed="true"] .i-play { display: block; }
.ticker-pause:hover { background: var(--ink-soft); }
.ticker-pause:focus-visible { outline: 2px solid var(--white); outline-offset: -5px; }
.ticker.paused .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker-pause { display: none; } }
/* 2.5.8 target size: 24 x 24 CSS px minimum */
.nav-dd { gap: .15rem; }
.nav-dd > button { min-width: 1.5rem; min-height: 1.5rem; justify-content: center; }
@media (min-width: 60rem) { footer.site nav { gap: .35rem; } footer.site nav a { padding-block: .15rem; } }
.plan-compare { padding-block: .4rem; margin-top: .5rem; }
.field label.check { padding-block: .12rem; }
/* 2.1.1 keyboard: a wide legal table that scrolls sideways takes focus (main.js) and shows it */
.legal table[tabindex]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.kicker > a { display: inline-block; padding-block: .25rem; margin-block: -.25rem; }
.mail-dir dd > a:first-child { display: inline-block; padding-block: .2rem; margin-block: -.2rem; }
/* desk: the action an email's Approve / Decline button opened (checkout.js initConfirm) */
.owner-action-focus { outline: 2px solid var(--ink); outline-offset: 10px; }

/* In-between window widths (owner 2026-10-08 size check of 15 pages at 9 sizes; probe 940-1100px). */
/* The full header menu needs ~990px but turns on at 60rem (960px): tighter spacing until it fits. */
@media (min-width: 60rem) and (max-width: 66rem) { .nav { gap: 1.1rem; } }
/* Contact page address list: name above address until the card is wide enough for the 15rem column (it overflowed the card at 960-1080px). */
@media (max-width: 80rem) { .mail-dir > div { grid-template-columns: 1fr; gap: .15rem; } }
.mail-dir dd { overflow-wrap: anywhere; }
/* Contract tables between phone and desktop widths: tighter heading tracking and cell padding keep the Schedule A plans
   table inside its column (phones scroll the table instead, above). */
@media (min-width: 721px) and (max-width: 66rem) {
  .legal thead th { letter-spacing: .08em; }
  .legal th, .legal td { padding-right: .6rem; }
}

/* Layout review fixes (owner 2026-10-08; 48 issues confirmed across 15 pages x 9 sizes, these are the high and medium ones) */
/* Burden / Benefit / Mixed labels: var(--hair) already holds "1px solid ...", so "1px solid var(--hair)" was invalid and the box vanished */
.bill-dir { border: 1px solid var(--gray-2, #D8D8D2); align-self: flex-start; }
/* phone chamber filters: the phone rules lost to the later .tabs/.tab rules, so U.S. Senate dropped to its own row */
@media (max-width: 44rem) {
  .tabs { gap: .5rem; flex-wrap: nowrap; margin-top: 1.6rem; }
  .tabs .tab { flex: 1 1 0; justify-content: center; padding: .62rem .4rem; letter-spacing: .1em; font-size: .7rem; white-space: nowrap; }
}
/* phone numbers never break across lines */
a[href^="tel:"] { white-space: nowrap; }
/* pricing cards between 960 and ~1150px: the button labels wrapped onto two lines */
@media (min-width: 60rem) and (max-width: 72rem) { .plan .btn { white-space: nowrap; letter-spacing: .1em; padding-inline: 1rem; } }
@media (min-width: 60rem) and (max-width: 96rem) { .plan-retained-side .btn { white-space: nowrap; letter-spacing: .06em; font-size: .72rem; padding-inline: 1rem; } }
/* tablet footer: brand across the top, then the two link lists side by side (was one ~2,000px column) */
@media (min-width: 44rem) and (max-width: 55.99rem) {
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  footer.site .cols > :first-child { grid-column: 1 / -1; }
}
/* sign-up page: the whole sidebar sticks (its own scroll when taller than the window) so the info cards no longer slide
   under the pinned order box; single-column widths do not stick at all */
@media (min-width: 60rem) {
  aside:has(> #order-summary) { position: sticky; top: 7.4rem; align-self: start; max-height: calc(100vh - 8.4rem); overflow-y: auto; }
  aside:has(> #order-summary) > #order-summary { position: static; }
}
@media (max-width: 59.99rem) { #order-summary { position: static; } }
/* contract contents list: never taller than the window while it sticks */
@media (min-width: 60rem) { .legal-toc { max-height: calc(100vh - 7rem); overflow-y: auto; } }
/* Schedule A on phones: each plan as a stacked block with its column names, instead of a sideways-scrolling table whose
   three description columns were hidden off to the right */
@media screen and (max-width: 720px) {
  .legal table.plans { display: block; overflow: visible; }
  .legal table.plans thead { display: none; }
  .legal table.plans tbody, .legal table.plans tr, .legal table.plans tbody td, .legal table.plans tbody th { display: block; min-width: 0; width: auto; }
  .legal table.plans tbody tr { padding: .9rem 0 1rem; border-bottom: var(--rule); }
  .legal table.plans tbody td, .legal table.plans tbody th { border-bottom: none; padding: .15rem 0; text-align: left; white-space: normal; }
  .legal table.plans tbody > tr > :first-child { font-family: var(--serif); font-size: 1.05rem; }
  .legal table.plans tbody > tr > :nth-child(n+2)::before { display: block; margin-top: .55rem; font-family: var(--sans); font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-5); }
  .legal table.plans tbody > tr > :nth-child(2)::before { content: "Subscription Fee"; }
  .legal table.plans tbody > tr > :nth-child(3)::before { content: "Advocacy Before Covered Officials"; }
  .legal table.plans tbody > tr > :nth-child(4)::before { content: "Reporting and Intelligence"; }
  .legal table.plans tbody > tr > :nth-child(5)::before { content: "Briefings"; }
}
/* short laptop windows (768-800px tall): tighter hero spacing so the three figures stay on the first screen now that the hero
   grows with its copy (1366x768: figures end at 742px instead of 781px) */
@media (min-width: 60rem) and (max-height: 50rem) {
  .hero-alt { padding-block: 2.1rem 1.3rem; }
  .hero-alt .alt-copy .btnrow { margin-top: 1.1rem !important; margin-bottom: .9rem; }
  .hero-alt .hero-meta { padding-top: .8rem; }
}