/* seraiq.io v2, round two (docs/site/SITE_DESIGN_v2.md). The filed record,
   read for you. One bold thing: the hero specimen, the best fits of a real
   raise under fictional names, with three annotations drawn to the parts that
   make the product. Everything else is quiet: paper, navy ink, gold marks,
   Source Serif 4 for what is read and Public Sans for what is used. No script
   runs on this site; every motion sits behind prefers-reduced-motion and
   moves only transform and opacity, and the page reads whole without it.
   Radii: 8px on product frames, 4px on controls and chips, nothing else. */
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/public-sans-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url("fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2"); }

:root {
  --ink: #10223b;          /* navy: the hero, headings, the footer */
  --deep: #0a1628;         /* the band's lower reach */
  --ink-2: #1f3a5c;
  --ink-soft: #3d5673;
  --paper: #ffffff;        /* the page */
  --vellum: #f3f5f8;       /* quiet alternate bands */
  --rule: #dfe4eb;
  --rule-strong: #b9c3d0;
  --muted: #55657a;        /* 5.9:1 on white, 5.5:1 on vellum */
  --gold: #b8912f;         /* marks, hairlines, the main button */
  --gold-ink: #7d6220;     /* gold as text on white: 5.8:1 */
  --gold-line: rgba(184, 145, 47, .55);
  --on-ink: #e8eef4;       /* text on navy: 13.9:1 */
  --on-ink-soft: #b6c5d4;  /* quieter text on navy: 8.6:1 */
  --sans: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --t-13: 0.8125rem; --t-14: 0.875rem; --t-17: 1.0625rem; --t-20: 1.25rem; --t-25: 1.5625rem; --t-32: 2rem;
  --t-44: clamp(2.1rem, 1.5rem + 2vw, 2.9rem);
  --t-64: clamp(2.5rem, 1.35rem + 3.9vw, 4rem);
  --gap: clamp(16px, 4vw, 40px);
  --sec: clamp(48px, 6vw, 88px);
  --wrap: 1200px;
  --measure: 66ch;
  --r-frame: 8px;
  --r-chip: 4px;
  --sh-frame: 0 1px 1px rgba(10, 22, 40, .06), 0 12px 32px -14px rgba(10, 22, 40, .28);
  --sh-deep: 0 2px 4px rgba(10, 22, 40, .10), 0 34px 70px -24px rgba(10, 22, 40, .45);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 255, 255, .5);
  --band: linear-gradient(180deg, var(--ink) 0%, #0d1c31 60%, var(--deep) 100%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E");
  --tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23b8912f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t-17)/1.6 var(--sans);
  font-variant-numeric: lining-nums; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink-2); text-decoration-color: var(--rule-strong); text-underline-offset: 3px;
  text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--gold); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
p, ul, ol { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); margin: 0; letter-spacing: -0.015em; }
h1 { font-size: var(--t-44); line-height: 1.1; max-width: 22ch; text-wrap: balance; }
h2 { font-size: var(--t-44); line-height: 1.1; margin-bottom: 22px; max-width: 24ch; text-wrap: balance; }
h3 { font-size: var(--t-20); line-height: 1.3; margin: 28px 0 8px; letter-spacing: -0.005em; }
strong, b { font-weight: 650; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--gold); color: var(--ink);
  padding: 8px 14px; border-radius: var(--r-chip); font-weight: 650; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------------------------------------------------------------- the top bar */
/* the bar stays at the top of every page (JP 2026-10-06): sticky, never fixed, so nothing jumps; anchors land
   below it (scroll-padding-top on html); with the script its hairline and shadow show once the page has scrolled */
html { scroll-padding-top: calc(var(--bar-h) + 12px); }
:root { --bar-h: 68px; }
.top { background: var(--ink); color: var(--on-ink); position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid rgba(255, 255, 255, .14); transition: box-shadow 200ms ease-out, border-color 200ms ease-out; }
.tb .top { border-bottom-color: transparent; }
.tb.scrolled .top { border-bottom-color: rgba(255, 255, 255, .14); box-shadow: 0 8px 22px -12px rgba(4, 10, 20, .6); }
.top-in { max-width: var(--wrap); margin: 0 auto; padding: 14px var(--gap); display: flex; align-items: center;
  gap: 28px; }
/* JP 2026-10-07: the logo reversed for the navy bar (white mark and SERA, gold IQ), no white chip */
.brand { flex: none; display: block; border-radius: var(--r-chip); padding: 4px 0; }
.brand img { width: 136px; height: auto; }
.nav { margin-left: auto; }
.nav ul { list-style: none; display: flex; gap: 24px; padding: 0; }
.nav a { color: var(--on-ink); text-decoration: none; font-size: var(--t-14); font-weight: 550; padding: 6px 0;
  border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-bottom-color: var(--gold); color: #fff; }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; cursor: pointer; font-weight: 600; font-size: var(--t-14); padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-chip); color: #fff; }
.menu summary::-webkit-details-marker { display: none; }
.menu ul { position: absolute; right: 0; top: calc(100% + 10px); background: #fff; list-style: none;
  padding: 8px 0; margin: 0; min-width: 230px; border: 1px solid var(--rule); box-shadow: var(--sh-deep); }
.menu li a { display: block; padding: 11px 18px; color: var(--ink); text-decoration: none; }
.menu li a[aria-current] { box-shadow: inset 3px 0 0 var(--gold); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-block; font: 650 var(--t-17)/1 var(--sans); text-decoration: none; border-radius: var(--r-chip);
  padding: 16px 24px; }
.btn-main { background: var(--gold); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset,
  0 6px 18px -8px rgba(184, 145, 47, .7); }
.btn-main { transition: box-shadow 200ms ease-out; }
.btn-main:hover, .btn-main:focus-visible { box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 10px 24px -8px rgba(184, 145, 47, .9); }
.btn-quiet { color: var(--ink); border: 1px solid var(--rule-strong); background: #fff; }
.btn-soon { color: var(--muted); font-size: var(--t-14); font-weight: 600; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.cta-main { display: grid; justify-items: start; gap: 10px; max-width: 440px; }
.cta-main .btn-main { padding: 17px 26px; }
.cta-risk { font-size: var(--t-14) !important; color: var(--muted) !important; line-height: 1.5; margin: 0 !important; }
.cta-demo { font-size: var(--t-14); font-weight: 600; color: var(--ink-2); text-decoration-color: var(--rule-strong); margin-top: 4px; }
/* v6.94 the free Brief under each subscribe button (JP 2026-10-11) */
/* v6.94 the home's Brief block sits in the navy money band: its heading and links read light */
.s.band-ink h3 { color: #fff; }
.band-ink p a { color: var(--on-ink); text-decoration-color: rgba(232, 238, 244, .4); }
.brief-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 4px; }
.brief-latest { font-size: var(--t-14); font-weight: 600; color: var(--ink-2); text-decoration-color: var(--rule-strong); }
.band-ink .brief-cta .brief-latest { color: var(--on-ink); text-decoration-color: rgba(232, 238, 244, .4); }
.cta-brief { font-size: var(--t-14) !important; color: var(--muted) !important; line-height: 1.5; margin: 0 !important; }
.cta-brief a { color: var(--ink-2); font-weight: 600; text-decoration-color: var(--rule-strong); }
.s-hero .cta-brief, .band-ink .cta-brief { color: var(--on-ink-soft) !important; }
.s-hero .cta-brief a, .band-ink .cta-brief a { color: var(--on-ink); text-decoration-color: rgba(232, 238, 244, .4); }
.cta-note { font-size: var(--t-13); color: var(--muted); }
.s-hero .cta-risk, .band-ink .cta-risk { color: var(--on-ink-soft) !important; }
.s-hero .cta-demo, .band-ink .cta-demo { color: var(--on-ink); text-decoration-color: rgba(232, 238, 244, .4); }
.s-hero .cta-demo:hover, .band-ink .cta-demo:hover { text-decoration-color: var(--gold); }

/* ---------------------------------------------------------------- sections */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gap); }
.s { padding: var(--sec) 0; }
.s.band { background: var(--vellum); }
.s p, .s .list { max-width: var(--measure); }
.s p + p, .s p + .list, .s .list + p, .s .shot + p { margin-top: 14px; }
.s .lead { font-family: var(--serif); font-size: var(--t-20); line-height: 1.5; color: var(--ink-2); }
.more { margin-top: 22px; font-weight: 600; }
.more a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.list { padding: 0; list-style: none; }
.list li { position: relative; padding-left: 26px; margin-top: 12px; }
.list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 14px; height: 3px;
  background: var(--gold); }
/* a narrowed page, set with intent: questions, how we count, the guides */
.s.narrow .wrap, .s-faq .wrap, .s-method .wrap, .t-guide .s .wrap, .s-guides .wrap { max-width: 860px; }
.s-faq .wrap, .s-method .wrap { margin-left: max(var(--gap), calc(50% - 600px)); }

/* the first section of every inner page carries its h1 */
.s.head { padding-top: calc(var(--sec) * .75); }
.s.head h1 { margin-bottom: 22px; font-size: var(--t-64); line-height: 1.04; max-width: 20ch; }
.t-page .s.head { border-bottom: 1px solid var(--rule); }

/* ink bands: the close of a page; a deep-to-ink gradient under the grain */
.s.band-ink { background: var(--grain), var(--band); color: var(--on-ink); }
.s.band-ink h2 { color: #fff; }
.s.band-ink p { color: var(--on-ink); }
.s.band-ink .btn-soon { color: var(--on-ink-soft); }
.s-close h2 { font-size: var(--t-44); }
.close-cols { align-items: center; }
.close-cols .cta { margin-top: 0; justify-content: flex-start; }

/* ---------------------------------------------------------------- columns */
.cols { display: grid; gap: 28px 56px; }
.cols .shot:first-child { margin-top: 0; }
.cols .col > h2:first-child { margin-top: 0; }
.trio .col { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--gold); padding: 22px 24px 26px;
  box-shadow: var(--sh-frame), var(--edge); }
.trio .col > h3 { margin-top: 0; }
/* the home's "Four questions, one record" and "Who uses it" (JP 2026-10-10): four cards, gold-topped */
.four-cols .col { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--gold); padding: 20px 22px 22px;
  box-shadow: var(--sh-frame), var(--edge); }
.four-cols .col > h3 { margin-top: 0; }
.four-cols .col > p:last-child { margin-bottom: 0; }
@media (min-width: 700px) {
  .four-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (min-width: 960px) {
  .cols { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .head-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; margin-bottom: 28px; }
  .head-cols h2, .head-cols h3 { margin-bottom: 0; margin-top: 0; }
  .head-fig { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .faq-cols { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px 64px; align-items: stretch; }
  .head-cols .col > p { font-family: var(--serif); font-size: var(--t-20); line-height: 1.5; color: var(--ink-2);
    max-width: 52ch; }
  .proof-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .tests-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .behind-cols { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .people-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .allow-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .money-cols { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; }
  .analysis-cols { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; }
  .clip-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .pq-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 80px; }
  /* Pricing's hero: what you get on the left, the price card on the right (first on a phone) */
  .ph-cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ph-cols > .col:first-child { grid-column: 2; grid-row: 1; }
  .ph-cols > .col:last-child { grid-column: 1; grid-row: 1; }
  .close-cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .close-cols .cta-main { justify-self: end; }
  .pain-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
  .quad { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 40px; }
  .four-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .trio .col > h3 { margin-top: 0; }
  .close-cols .cta { justify-content: flex-end; }
}
.money-cols .col > p { font-family: var(--serif); font-size: var(--t-20); line-height: 1.5; color: var(--ink-2); }

/* ---------------------------------------------------------------- the hero */
.s-hero { position: relative; color: var(--on-ink); padding-top: calc(var(--sec) * .8); padding-bottom: 0;
  background:
    radial-gradient(60% 50% at 70% 80%, rgba(184, 145, 47, .14), rgba(184, 145, 47, 0) 70%),
    radial-gradient(70% 60% at 60% 60%, rgba(80, 116, 160, .20), rgba(80, 116, 160, 0) 70%),
    var(--grain), var(--band); }
.s-hero.head { border-bottom: 0; }
.s-hero.head h1 { color: #fff; font-size: var(--t-64); line-height: 1.02; letter-spacing: -0.02em; max-width: 18em;
  margin-bottom: 26px; hyphens: manual; }
/* JP 2026-10-17: the home headline, one sentence to a line; beside the picture the size follows the
   column so each sentence keeps to one line */
.hero-text h1 .h1-line { display: block; }
@media (min-width: 1100px) {
  .hero-grid:not(.hero-stack) .hero-text { container-type: inline-size; }
  .s-hero.head .hero-grid:not(.hero-stack) h1.h1-lines {
    font-size: min(clamp(2.5rem, 2.9vw + .4rem, 3.4rem), 9cqi); }
}
.hero-text > p { color: var(--on-ink); font-size: var(--t-20); line-height: 1.5; max-width: 58ch; }
.hero-text > p + p { color: var(--on-ink-soft); font-size: var(--t-17); margin-top: 12px; }
/* who it is for, right under the headline (JP 2026-10-09); the lead after it keeps the lead's size */
.hero-text > p.for-who { color: var(--gold); font-weight: 600; font-size: var(--t-17); line-height: 1.45;
  margin: -10px 0 18px; max-width: 46ch; }
.hero-text > p.for-who + p { color: var(--on-ink); font-size: var(--t-20); margin-top: 0; }
.s-hero .btn-soon { color: var(--on-ink-soft); }
.s-hero .cta { margin-top: 30px; }
.fresh { display: flex; align-items: center; gap: 10px; margin-top: 22px !important; font-size: var(--t-14) !important;
  color: var(--on-ink-soft) !important; letter-spacing: .01em; }
.fresh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); flex: none;
  box-shadow: 0 0 0 4px rgba(184, 145, 47, .18); }
.fn a { color: inherit; text-decoration: none; font-weight: 700; padding: 0 1px; }
.fn { line-height: 0; }
.s-hero .fn a { color: var(--gold); }
.hero-grid { display: grid; gap: 40px; }
/* the specimen stands past the band's bottom edge, into the proof strip */
.hero-fig { margin-bottom: calc(-1 * var(--overlap)); position: relative; z-index: 2; }
:root { --overlap: 72px; }
.s-proof { padding-top: calc(var(--overlap) + 36px); padding-bottom: 40px; }
@media (min-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
  /* both columns end at the band's edge, so the text centres against the board's part inside the band */
  .hero-text { padding: 0; margin-bottom: calc(-1 * var(--overlap)); padding-bottom: var(--overlap); }
  .s-hero.head h1 { font-size: clamp(2.5rem, 2.9vw + .4rem, 3.4rem); }
  .hero-text > p { font-size: var(--t-17); }
  .hero-text > p + p { font-size: var(--t-14); }
  .hero-text > p.for-who, .hero-text > p.for-who + p { font-size: var(--t-17); }
  :root { --overlap: 96px; }
}

/* ---------------------------------------------------------------- the specimen: the one bold thing */
.specimen { margin: clamp(36px, 5vw, 56px) 0 0; position: relative; max-width: 780px; background: #fff;
  color: var(--ink); border-radius: var(--r-frame); padding: clamp(18px, 2.4vw, 28px); padding-bottom: 0;
  box-shadow: var(--edge), 0 2px 3px rgba(4, 10, 20, .25), 0 40px 80px -28px rgba(0, 0, 0, .65);
  border-top: 3px solid var(--gold); }
.hero-fig .specimen { margin-top: 0; max-width: none; }
.sp-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px;
  padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.sp-title { font-family: var(--serif); font-size: var(--t-25); font-weight: 600; line-height: 1.2; color: var(--ink); }
.sp-raise { font-size: var(--t-14); color: var(--ink-soft); font-weight: 600; }
.sp-list { list-style: none; padding: 0; }
.sp-row { padding: 14px 0; border-top: 1px solid var(--rule); }
.sp-row:first-child { border-top: 0; }
.sp-sum { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px;
  align-items: baseline; }
.sp-kind { font-size: 11.5px; font-weight: 650; padding: 2px 7px; border-radius: var(--r-chip); white-space: nowrap;
  color: var(--ink-2); background: #e8edf4; align-self: center; }
.sp-k-funds { background: #f4ecd6; color: var(--gold-ink); }
.sp-name { font-size: 16px; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); line-height: 1.3; }
.sp-fit { display: inline-flex; align-items: center; gap: 4px; align-self: center; grid-row: 1; grid-column: 3; }
.sp-fit i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); display: block; }
.sp-fit i.na { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule-strong); }
.sp-fit i.no { background: transparent; box-shadow: inset 0 0 0 1.5px #b0442c; }
.sp-fit b { font-size: var(--t-13); margin-left: 6px; color: var(--ink); font-variant-numeric: tabular-nums; }
.sp-why { margin-top: 6px !important; font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: none !important; }
.sp-cap { font-size: var(--t-13); color: var(--muted); line-height: 1.5; padding: 12px 0 14px; margin-top: 4px;
  border-top: 1px solid var(--rule); }
.sp-cap a { color: var(--ink-2); }
/* the hero (JP 2026-10-15, rebuilt): the raise and how many firms fit, three best fits each with its reason, the
   first opened to its contact details (all fictional) in a light inset, then the market now in one line */
.sp-count { font-size: var(--t-14); font-weight: 650; color: var(--ink-2); margin: 0 !important; }
/* the first fit's checks in the drawer's own style (iq.css .reasons: a green tick in a pale green circle) */
.sp-wh { font-size: 12.5px; font-weight: 650; color: var(--ink); margin: 8px 0 4px !important; max-width: none !important; }
.sp-checks { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
.sp-wh + .sp-checks { margin-top: 0; }
.sp-checks li { position: relative; padding-left: 23px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.sp-checks li.ok::before { content: "\2713"; position: absolute; left: 0; top: 2px; width: 16px; height: 16px;
  border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; background: #e3efe7;
  color: #2f7d57; }
/* the drawer's tabs, drawn and not working (aria-hidden; a hidden sentence says what they are) */
.sp-tabs { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-top: 10px; border-bottom: 1px solid var(--rule); }
.sp-tab { padding: 6px 9px 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent;
  margin-bottom: -1px; white-space: nowrap; }
.sp-tab-on { color: var(--ink); border-bottom-color: var(--gold); }
.sp-contact { margin-top: 10px; padding: 10px 14px 11px; background: #f8f9fb; border: 1px solid var(--rule);
  border-radius: var(--r-chip); }
.sp-ch { font-size: 12.5px; font-weight: 650; color: var(--ink); margin: 0 0 6px !important; max-width: none !important; }
.sp-cd { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 20px; margin: 0; }
.sp-cd > div { min-width: 0; }
.sp-cd dt { font-size: 11.5px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.sp-cd dd { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums; }
.sp-cd-leaders { grid-column: 1 / -1; }
.sp-leader { display: inline-block; margin-right: 18px; }
.sp-market { font-size: var(--t-13); line-height: 1.5; color: var(--ink-soft); padding: 10px 0 12px;
  border-top: 1px solid var(--rule); margin: 0 !important; max-width: none !important; }
@media (max-width: 480px) {
  .sp-tabs { flex-wrap: nowrap; gap: 0; overflow: hidden; contain: inline-size; }
  .sp-tab { padding: 6px 5px 7px; font-size: 11.5px; }
  .sp-cd { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sp-cd-web { grid-column: 1 / -1; }
  .sp-leader { display: block; margin-right: 0; }
}
@media (max-width: 420px) {
  .sp-tab { padding: 6px 4px 7px; font-size: 10.5px; }
}

/* ---------------------------------------------------------------- the proof strip */
.s-proof { border-bottom: 1px solid var(--gold-line); }
.proof-cols .col:first-child > p { font-family: var(--serif); font-size: var(--t-20); line-height: 1.5; color: var(--ink-2); }
.proof { display: grid; gap: 18px 0; max-width: 980px; }
.proof-item { max-width: none !important; margin: 0 !important; display: flex; flex-direction: column; gap: 6px; }
.proof-n { font-family: var(--serif); font-weight: 600; font-size: clamp(1.6rem, 0.9rem + 1.5vw, 2.5rem); line-height: 1.05;
  color: var(--ink); letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.proof-k { font-size: var(--t-14); color: var(--muted); max-width: 26ch; line-height: 1.4; }
@media (min-width: 760px) {
  .proof { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .proof-item + .proof-item { border-left: 1px solid var(--rule); padding-left: clamp(16px, 2.4vw, 32px); }
}

/* the pain, one hard block beside the raw material */
.pain-cols h2 { font-size: var(--t-32); }
.pain-cols > .col:first-child > p { font-size: var(--t-20); line-height: 1.5; font-family: var(--serif); color: var(--ink-2); }
.pain-cols > .col:first-child > p + p { color: var(--ink); }
/* the money section: the differentiator, on the deep band */
.s-money.band-ink { background: var(--grain), var(--band); color: var(--on-ink); }
.s-money.band-ink h2 { color: #fff; }
.s-money.band-ink p { color: var(--on-ink); }
.s-money.band-ink .shot figcaption, .s-money.band-ink .strip-cap { color: var(--on-ink-soft); }
.s-money.band-ink .shot figcaption a { color: var(--on-ink); }
.s-money.band-ink .shot-frame { border-color: rgba(255, 255, 255, .12); background: #fff; }
.s-money .shot.wide { margin-top: 8px; }
.s-money .quad { margin-top: 44px; }
.s-money .quad .shot-frame { width: 100%; }
.s-money .quad .shot-frame picture { height: 420px; }
.s-money .quad .shot-frame img { width: 100%; height: 420px; object-fit: cover; object-position: left top; }
.s-money .quad + .cols { margin-top: 56px; }
/* a cropped card ends in a fade, so the cut reads as intended */
.s-money .quad .shot-frame::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 48px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); pointer-events: none; border-radius: 0 0 4px 4px; }
.s-money .answer-fig { margin-bottom: 18px !important; }
.shot.clip { margin-top: 0; }
.shot.clip .shot-frame { width: 100%; }
.shot.clip img { width: 100%; height: auto; }
.s-money .answer-n { color: #fff; }
.s-money .answer-k { color: var(--on-ink-soft); }
@media (max-width: 959px) { .s-money .quad .shot-frame picture, .s-money .quad .shot-frame img { height: auto; } }
/* the answers' one hard number */
.answer-fig { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px !important; max-width: none !important; }
.answer-n { font-family: var(--serif); font-weight: 600; font-size: var(--t-44); line-height: 1; color: var(--ink);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.answer-k { font-size: var(--t-14); color: var(--muted); max-width: 26ch; line-height: 1.35; }
/* the questions as details */
.q { border-top: 1px solid var(--rule); }
.q:first-of-type { border-top: 0; }
.q > summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; position: relative; }
.q > summary::-webkit-details-marker { display: none; }
.q > summary h3 { margin: 0; border: 0; padding: 0; }
.q > summary::after { content: ""; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }
.q[open] > summary::after { transform: rotate(-135deg); margin-top: -3px; }
.q > summary:hover h3 { color: var(--ink-2); }
.q-a { padding: 0 0 20px; }
.q-a p + p { margin-top: 12px; }
/* a question reached by its link shows its answer where the browser can show a closed details' content */
.q:target::details-content { content-visibility: visible; }
.q:target > summary h3 { color: var(--gold-ink); }
.pq-cols .q { max-width: var(--measure); }

/* ---------------------------------------------------------------- screenshots */
.shot { margin: 36px 0 0; }
.shot-frame { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: var(--r-frame);
  padding: 8px; box-shadow: var(--sh-frame), var(--edge); width: fit-content; max-width: 100%; }
.shot-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--sh-deep);
  opacity: 0; pointer-events: none; z-index: -1; }
.shot-frame picture { display: block; position: relative; overflow: hidden; border-radius: 4px; }
.shot-frame img { width: auto; max-width: 100%; height: auto; border-radius: 4px; }
/* hover and keyboard focus: a quiet lift of the frame, the shadow deepened (round six, no sheen, no flash) */
.shot-frame:hover, .shot:focus-within .shot-frame, .film-frame:hover .shot-frame, .step:hover .shot-frame {
  box-shadow: var(--sh-deep), var(--edge); }
.shot figcaption, .strip-cap { font-size: var(--t-13); color: var(--muted); margin-top: 12px; max-width: 80ch;
  line-height: 1.5; }
.shot.wide .shot-frame { width: auto; }
.shot-pending { background: repeating-linear-gradient(-45deg, var(--vellum), var(--vellum) 10px, #fff 10px,
  #fff 20px); border: 1px dashed var(--rule-strong); padding: 48px 24px; color: var(--muted);
  font-size: var(--t-14); text-align: center; }
.band .shot-frame { border-color: #d5dce6; }

/* ---------------------------------------------------------------- how raises like yours are going
   (JP 2026-10-09): three figures read from the product in a row under a navy rule, stacked on a phone,
   then the comparables strip with its plain caption */
.raising { display: grid; grid-template-columns: minmax(0, 1fr); margin: 24px 0 0; border-top: 2px solid var(--ink); }
@media (min-width: 960px) { .raising { margin-top: 8px; } }
/* the typical raise's share carries the strip's gold line beside it */
.rz-median .rz-v::before { content: ""; display: inline-block; width: 3px; height: 0.82em; background: var(--gold);
  margin-right: 12px; vertical-align: -0.04em; }
.rz { padding: 18px 0 20px; }
.rz + .rz { border-top: 1px solid var(--rule); }
.rz-n { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 !important;
  max-width: none !important; }
.rz-v { font-family: var(--serif); font-weight: 600; font-size: var(--t-44); line-height: 1; color: var(--ink);
  letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.rz-chg { font: 600 var(--t-14)/1.3 var(--sans); }
.rz-down { color: #94391f; }   /* brick on vellum: 6.6:1 */
.rz-up { color: #2c6a43; }     /* green on vellum: 5.9:1 */
.rz-k { font-size: var(--t-17); line-height: 1.45; color: var(--ink-2); margin: 10px 0 0 !important; max-width: 34ch !important; }
.rz-note { font-size: var(--t-13); line-height: 1.45; color: var(--muted); margin: 8px 0 0 !important; max-width: 40ch !important; }
@media (min-width: 760px) {
  .raising { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rz { padding: 24px clamp(16px, 2.4vw, 32px) 4px; }
  .rz:first-child { padding-left: 0; }
  .rz + .rz { border-top: 0; border-left: 1px solid var(--rule); }
}
.raising + .shot.raising-strip { margin-top: clamp(28px, 4vw, 44px); }
.raising-strip figcaption { max-width: 92ch; }
.raising-strip .cap-say { display: block; font-size: var(--t-14); color: var(--ink-2); margin-bottom: 4px; }

/* the money band's sections in a column: each its own block, the band's own 64px between them */
.analysis-cols + .analysis-cols { margin-top: 64px; }

/* ---------------------------------------------------------------- three answers */
.answer { display: grid; gap: 20px 56px; align-items: center; margin-top: clamp(40px, 5vw, 72px); }
.answer h3 { margin-top: 0; font-size: var(--t-32); line-height: 1.15; }
.answer .answer-text p { font-size: var(--t-20); line-height: 1.5; color: var(--ink-2); font-family: var(--serif); }
.answer .answer-text p.more { font-family: var(--sans); font-size: var(--t-17); }
.answer .shot { margin: 0; }
.answer .shot-frame { width: auto; }
@media (min-width: 960px) {
  .answer { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .answer:nth-of-type(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .answer:nth-of-type(even) .answer-shot { order: 2; }
}

/* ---------------------------------------------------------------- one week: a sequence */
.week { list-style: none; padding: 0; margin: 0; display: grid; gap: 28px 20px; counter-reset: step; }
.step { counter-increment: step; display: grid; gap: 12px; align-content: start; }
.step .shot-frame { width: 100%; padding: 5px; }
/* a tight crop of the screen's focal point, at the capture's own size */
.step { min-width: 0; }
.shot-frame.crop { overflow: hidden; }
.shot-frame.crop picture { height: var(--ch, 150px); overflow: hidden; width: 100%; }
/* a crop that cuts words ends in a soft fade on the right and the foot, so the cut reads as intended */
.shot-frame.crop picture::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) calc(100% - 32px), #fff),
              linear-gradient(180deg, rgba(255, 255, 255, 0) calc(100% - 24px), #fff); }
.shot-frame.crop img { width: var(--cw); max-width: none; height: auto; transform: translate(var(--cx), var(--cy)); }
.step h3 { margin: 0; font-size: var(--t-17); display: flex; align-items: baseline; gap: 10px; }
.step h3::before { content: counter(step); font: 600 var(--t-25)/1 var(--serif); color: var(--gold-ink); }
.step-text p { font-size: var(--t-14); color: var(--ink-soft); line-height: 1.5; margin-top: 4px !important; }
.week + .strip-cap { margin-top: 24px; font-size: 12px; max-width: none; }
/* the week's fine print under its credits: the lookup is no screening, and the FCRA line beside the person search */
.week + .strip-cap ~ p { margin-top: 8px !important; font-size: 12px; color: var(--muted); max-width: none; }
@media (min-width: 640px) {
  .week { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- the five tests */
.s-tests h2 { margin-bottom: 28px; }
.tests-cols .col:first-child > p:first-child strong { font-family: var(--serif); font-size: var(--t-25); font-weight: 600;
  line-height: 1.3; color: var(--ink); }
.tests-cols .list, .s-describe .list { margin-top: 0; background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--gold);
  padding: 4px 24px; box-shadow: var(--sh-frame), var(--edge); max-width: none; }
.tests-cols .list li, .s-describe .list li { padding: 16px 0 16px 34px; margin: 0; border-top: 1px solid var(--rule); color: var(--ink-soft); }
.tests-cols .list li:first-child, .s-describe .list li:first-child { border-top: 0; }
.tests-cols .list li::before, .s-describe .list li::before { width: 18px; height: 18px; top: 19px;
  background: var(--tick) center / 18px no-repeat; }
.tests-cols .list li strong, .s-describe .list li strong { display: block; font-family: var(--serif); font-size: var(--t-20);
  color: var(--ink); font-weight: 600; margin-bottom: 2px; }
.s-describe .list { max-width: 720px; margin-top: 22px; }

/* ---------------------------------------------------------------- who sits behind an issuer */
.behind-cols > .col:first-child > p { font-size: var(--t-20); line-height: 1.55; font-family: var(--serif); color: var(--ink-2); }
.s-behind .shot.wide { margin-top: 40px; }
.legend { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px;
  margin-top: 6px; }
.legend li { display: grid; grid-template-columns: 44px 1fr; gap: 4px 12px; align-items: center; font-size: var(--t-14); }
.lg-swatch { width: 44px; height: 26px; grid-row: 1 / 3; border: 1px solid var(--rule-strong); background: #fff;
  box-sizing: border-box; }
.lg-adviser .lg-swatch { background: var(--ink); border-color: var(--ink); }
.lg-family .lg-swatch { border-left: 3px solid var(--gold); }
.lg-offering .lg-swatch { border-color: var(--rule); box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px var(--rule); }
.lg-placement .lg-swatch { border-radius: 999px; height: 22px; }
.lg-name { font-weight: 650; color: var(--ink); }
.lg-note { color: var(--muted); font-size: var(--t-13); }
.legend + .shot { margin-top: 28px; }

/* ---------------------------------------------------------------- open a firm: three pictures, side by side */
/* JP 2026-10-15: the profile (1) in the left column; its deals (2) and one deal opened (3) whole in the right,
   stacked; the two columns end level, so no empty band sits above the captions. The profile is drawn to its
   natural break after "What its investors put in" (--c1, set by the build from DRILL_CROP_1440); its alt text
   and the phone's whole picture say the rest. Each number sits above its picture, never over it. Below 960px the
   three stack in order, each full width under its number. */
.drill-sum { font-family: var(--serif); font-size: var(--t-25); line-height: 1.35; color: var(--ink); max-width: 46ch !important;
  margin: 0 0 28px !important; padding-left: 16px; border-left: 3px solid var(--gold); }
.fan { position: relative; display: grid; gap: 20px; }
.fan-card { position: relative; min-width: 0; }
.fan-card .shot-frame { width: 100%; padding: 6px; }
.fan-card img { width: 100%; height: auto; }
.fan-n { display: block; width: 30px; height: 30px; margin: 0 0 8px; border-radius: 50%;
  background: var(--ink); color: #fff; font: 600 var(--t-14)/30px var(--serif); text-align: center; }
.fan-caps { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 10px; counter-reset: fan; max-width: 80ch; }
.fan-caps li { counter-increment: fan; position: relative; padding-left: 34px; font-size: var(--t-14); color: var(--ink-soft); line-height: 1.5; }
.fan-caps li::before { content: counter(fan); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  background: var(--ink); color: #fff; font: 600 12px/22px var(--serif); text-align: center; }
.drill-wrap { padding-top: 14px; }
/* the comparables line after the three answers stands apart from the last answer's credit */
.answer + .head-cols, .wall-more + p + .head-cols { margin-top: 64px; }
.drill-wrap .strip-cap { margin-top: 14px; }
.drill-wrap .cta-main { margin-top: 28px; }
@media (min-width: 960px) {
  .fan { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); grid-template-rows: auto auto; gap: 0 28px;
    align-items: start; }
  .fan-1 { grid-column: 1; grid-row: 1 / 3; }
  .fan-2 { grid-column: 2; grid-row: 1; }
  .fan-3 { grid-column: 2; grid-row: 2; align-self: end; padding-top: 16px; }
  .fan-1 picture { display: block; aspect-ratio: 1 / var(--c1, 1.6); overflow: hidden; }
  .fan-1 picture img { height: 100%; object-fit: cover; object-position: top; }
  .fan-caps { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; gap: 24px; }
}

/* ---------------------------------------------------------------- the filmstrip */
.film-wrap { position: relative; }
.film-wrap::after { content: ""; position: absolute; top: 0; z-index: 1; right: 0; bottom: 16px; width: 96px; pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), var(--paper) 85%); }
.band .film-wrap::after { background: linear-gradient(90deg, rgba(243, 245, 248, 0), var(--vellum) 85%); }
.film { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 6px 0 16px;
  scrollbar-color: var(--rule-strong) transparent; }
.film:focus-visible { outline-offset: 6px; }
.film-track { list-style: none; padding: 0; margin: 0; display: flex; width: max-content; }
/* a margin, not a gap, so the doubled track is exactly two sets wide and a -50% shift loops seamlessly */
.film-frame { width: clamp(260px, 72vw, 420px); scroll-snap-align: start; flex: none; margin-right: 20px; }
.film-dup { display: none; }
.film-toggle { display: block; margin: 0 0 12px auto; font: 600 var(--t-13)/1 var(--sans); color: var(--ink-2);
  background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--r-chip); padding: 8px 12px; cursor: pointer; }
.film-toggle[hidden] { display: none; }
.film-toggle:hover { border-color: var(--gold); }
.film-frame .shot-frame { width: 100%; padding: 6px; }
.film-frame .shot-frame picture { height: 250px; }
.film-frame .shot-frame img { width: 100%; height: 250px; object-fit: cover; object-position: left top; }
.film-words { font-size: var(--t-14); color: var(--ink-soft); margin-top: 10px; max-width: none !important; }
.film + .strip-cap { margin-top: 6px; }

/* ---------------------------------------------------------------- the freshness tag (the plan table's "How current") */
.badge { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--gold-ink); background: #f6efdc;
  border-radius: var(--r-chip); padding: 3px 8px; line-height: 1.4; }
.badge .fn a { color: var(--gold-ink); }

/* ---------------------------------------------------------------- the plan table (JP 2026-10-15), home and Pricing */
/* one source, two views (option C, JP: "less text"). Pricing (@plantable): a white table on the grey band, thin
   rules between rows, the gold rule over each group its one accent; each group row says its default freshness
   and only a row that differs carries a tag; nothing moves and nothing is interactive but the footnote marker
   (the site's focus ring). At 640px and below each row stacks: name, short line, tag. */
.plan-table { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 8px; background: #fff;
  color: var(--ink); border: 1px solid var(--rule); box-shadow: var(--sh-frame); font-size: var(--t-14); line-height: 1.45; }
.plan-table .pt-c1 { width: 25%; }
.plan-table .pt-c2 { width: 53%; }
.plan-table .pt-c3 { width: 22%; }
.plan-table th, .plan-table td { text-align: left; vertical-align: top; }
.plan-table thead th { font-size: var(--t-13); font-weight: 600; color: var(--muted); padding: 11px 18px 9px;
  vertical-align: bottom; }
.plan-table .pt-g > * { padding: 16px 18px 8px; border-top: 2px solid var(--gold); vertical-align: bottom; }
.plan-table .pt-g th { font-weight: 400; }
.plan-table tbody:first-of-type .pt-g > * { padding-top: 12px; }
.pt-gn { font-family: var(--serif); font-size: var(--t-20); font-weight: 600; line-height: 1.25;
  letter-spacing: -0.005em; color: var(--ink); margin-right: 12px; }
.pt-gl { font-size: var(--t-14); color: var(--muted); }
.plan-table .pt-r > th, .plan-table .pt-r > td { padding: 7px 18px 8px; border-top: 1px solid var(--rule); }
.plan-table .pt-do { font-family: var(--serif); font-size: 0.9375rem; font-weight: 600; line-height: 1.4; color: var(--ink); }
.plan-table .pt-shows { color: var(--ink-soft); }
.plan-table .badge { max-width: 100%; text-wrap: balance; font-size: 12px; padding: 2px 7px; line-height: 1.35; }
.plan-table + p { margin-top: 16px; font-size: var(--t-13); color: var(--muted); line-height: 1.55; }
.plan-table + p:not(:last-child) { margin-bottom: 56px; }
@media (min-width: 641px) and (max-width: 1000px) {
  .plan-table thead th, .plan-table .pt-g > *, .plan-table .pt-r > th, .plan-table .pt-r > td {
    padding-left: 12px; padding-right: 12px; }
  .pt-gn, .pt-gl { display: block; }
}
@media (max-width: 640px) {
  .plan-table, .plan-table tbody, .plan-table tr, .plan-table th, .plan-table td { display: block; width: auto; }
  .plan-table colgroup { display: none; }
  .plan-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .plan-table .pt-g { padding: 22px 16px 12px; border-top: 2px solid var(--gold); }
  .plan-table tbody:first-of-type .pt-g { padding-top: 16px; }
  .plan-table .pt-g > * { padding: 0; border-top: 0; }
  .plan-table .pt-g .pt-gcur { margin-top: 8px; }
  .pt-gn, .pt-gl { display: block; }
  .pt-gl { margin-top: 2px; }
  .plan-table .pt-r { padding: 11px 16px 12px; border-top: 1px solid var(--rule); }
  .plan-table .pt-r > th, .plan-table .pt-r > td { padding: 0; border-top: 0; }
  .plan-table .pt-do { font-size: var(--t-17); }
  .plan-table .pt-shows { margin-top: 2px; }
  .plan-table .pt-cur { margin-top: 8px; }
  .plan-table .pt-cur:has(> .sr) { margin-top: 0; }
}
/* the home (@planlist): the names only, one column per group under its gold rule, as plain lists; no cards,
   no ticks, no chips; the columns stack at 820px and below */
.inc-cols { display: grid; gap: 36px 48px; margin-top: 8px; }
.inc-group { border-top: 2px solid var(--gold); padding-top: 16px; }
.inc-group h3 { margin: 0; font-size: var(--t-25); }
.inc-line { font-size: var(--t-14); color: var(--muted); line-height: 1.5; margin-top: 6px !important; }
.inc-list { list-style: none; padding: 0; margin: 10px 0 0; }
.inc-list li { position: relative; font-family: var(--serif); font-size: var(--t-17); line-height: 1.4; color: var(--ink);
  padding: 9px 0 9px 18px; }
.inc-list li + li { border-top: 1px solid var(--rule); }
/* JP 2026-10-15: a small gold square per name, decorative (no content read aloud), centred on the first line;
   the text is indented past it, so a wrapped line aligns with the text, not the marker (a 12px gap) */
.inc-list li::before { content: ""; position: absolute; left: 0; top: calc(9px + 0.7em - 3px); width: 6px; height: 6px;
  background: var(--gold); }
.s p.inc-more { margin-top: 32px; font-weight: 600; }
.inc-more a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
@media (min-width: 821px) { .inc-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 959px) { .inc-cols { margin-top: 24px; } }

/* ---------------------------------------------------------------- the sources wall */
.wall { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 640px) { .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wall li { background: #fff; padding: 18px 18px 20px; font-family: var(--serif); font-size: var(--t-17); line-height: 1.3;
  color: var(--ink); min-height: 92px; display: flex; align-items: flex-end; }
.wall li { position: relative; isolation: isolate; }
.wall li::before { content: ""; position: absolute; inset: 0; background: var(--ink); opacity: 0; z-index: -1; }
.wall li:first-child { color: #fff; }
.wall li:first-child::before { opacity: 1; }
.wall li:hover { color: #fff; }
.wall li:hover::before { opacity: 1; }
.wall li, .wall li::before { transition: color 150ms ease-out, opacity 150ms ease-out; }
.wall + .wall-more { margin: 0; max-width: none !important; padding: 14px 18px; border: 1px solid var(--rule); border-top: 0; background: var(--vellum);
  font-family: var(--serif); font-style: italic; font-size: var(--t-17); line-height: 1.4; color: var(--muted); }
.wall-more + p { margin-top: 18px; color: var(--muted); font-size: var(--t-14); }

/* ---------------------------------------------------------------- price */
.price-list { font-family: var(--serif); font-size: var(--t-44); line-height: 1.1; letter-spacing: -0.02em; }
.price-list strong { font-weight: 600; }
.price-founder { margin-top: 18px; padding: 18px 22px; border: 1px solid var(--rule); border-left: 4px solid var(--gold);
  background: var(--vellum); font-size: var(--t-14); line-height: 1.55; }
.price-founder strong { font-weight: 600; color: var(--ink); }
.s.band .price-founder { background: #fff; }
.pq-cols > .col:first-child { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--gold);
  padding: 28px 28px 30px; box-shadow: var(--sh-frame), var(--edge); align-self: start; }
.s.band .pq-cols > .col:first-child { background: #fff; }
.pq-cols > .col:first-child .cta { margin-top: 24px; }
.pq-cols > .col:first-child h2 { font-size: var(--t-25); margin-bottom: 14px; }
.pq-cols .price-founder + p { margin-top: 18px; color: var(--ink-soft); font-size: var(--t-14); }
.provider { color: var(--muted); margin-top: 12px; }
.ph-cols > .col:last-child > p:first-child { font-family: var(--serif); font-size: var(--t-20); line-height: 1.5;
  color: var(--ink-2); max-width: 52ch; }
.ph-cols > .col:last-child > p, .ph-cols > .col:last-child li { text-align: left; hyphens: manual; }
.ph-cols > .col:last-child ul { list-style: none; padding: 0; margin: 24px 0 28px; max-width: 60ch; }
.ph-cols > .col:last-child li { padding: 14px 0 14px 18px; border-top: 1px solid var(--rule); position: relative; line-height: 1.55; }
.ph-cols > .col:last-child li:last-child { border-bottom: 1px solid var(--rule); }
.ph-cols > .col:last-child li::before { content: ""; position: absolute; left: 0; top: 23px; width: 8px; height: 2px;
  background: var(--gold); }
.ph-cols > .col:last-child li strong { color: var(--ink); }

/* ---------------------------------------------------------------- questions */
.page-index { font-size: var(--t-14); }
.page-index-h { font-weight: 650; color: var(--ink); margin-bottom: 10px; }
.page-index ol { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--rule); }
.page-index li a { display: block; padding: 6px 0 6px 14px; color: var(--ink-soft); text-decoration: none;
  margin-left: -2px; border-left: 2px solid transparent; line-height: 1.4; }
.page-index li a:hover, .page-index li a:focus-visible { color: var(--ink); border-left-color: var(--gold); }
.page-index-g { margin: 18px 0 6px; font-weight: 650; }
.page-index-g a { color: var(--ink); text-decoration: none; }
.page-index-g a:hover, .page-index-g a:focus-visible { text-decoration: underline; }
.s-faq .faq-group { font-family: var(--sans); font-size: var(--t-17); font-weight: 650; letter-spacing: 0.02em;
  color: var(--gold-ink, var(--ink)); margin: 44px 0 4px; line-height: 1.4; }
.s-faq .faq-group:first-of-type { margin-top: 8px; }
@media (min-width: 1025px) { .page-index { position: sticky; top: calc(var(--bar-h) + 24px); } }
.faq-cols .q:first-of-type { border-top: 0; }
.s-faq.head { border-bottom: 0; padding-bottom: calc(var(--sec) * .35); }
.s-faq .wrap, .s-method .wrap { max-width: var(--wrap); margin-left: auto; }
.s.head.narrow { padding-bottom: calc(var(--sec) * .4); border-bottom: 0; }
.s.head.narrow + .s { padding-top: calc(var(--sec) * .5); }
/* the pay panel: the product's own breakdown */
.pay { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--gold); padding: 22px 24px 20px;
  box-shadow: var(--sh-frame), var(--edge); max-width: 460px; }
.pay-title { font-family: var(--serif); font-size: var(--t-20); font-weight: 600; margin-bottom: 10px; }
.pay-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--rule);
  font-size: var(--t-14); font-variant-numeric: tabular-nums; }
.pay-k { color: var(--ink-soft); }
.pay-v { font-weight: 600; color: var(--ink); text-align: right; }
.pay-benefit .pay-v { color: var(--gold-ink); }
.pay-pay { border-top: 2px solid var(--ink); font-size: var(--t-17); }
.pay-pay .pay-v { font-family: var(--serif); font-size: var(--t-25); font-weight: 600; }
.pay-after { margin-top: 12px !important; font-size: var(--t-13); color: var(--muted); }
/* two product cards side by side, the same height */
.pair .shot { margin-top: 0; }
.pair .shot-frame { width: 100%; }
.pair .shot-frame picture { height: 480px; }
.pair .shot-frame img { width: 100%; height: 480px; object-fit: cover; object-position: left top; }
@media (max-width: 959px) { .pair .shot-frame picture, .pair .shot-frame img { height: auto; } }
/* about: what SERA IQ is, how we work */
.how-list .list li strong { font-family: var(--serif); font-size: var(--t-17); }
.s-questions h3, .s-faq h3, .pq-cols h3 { max-width: var(--measure); }
.s-faq h2 { margin-bottom: 8px; }

/* ---------------------------------------------------------------- tables, sources */
.limits { border-collapse: collapse; width: 100%; max-width: 640px; font-size: var(--t-14); background: #fff;
  border: 1px solid var(--rule); border-top: 3px solid var(--gold); box-shadow: var(--sh-frame); }
.limits caption { text-align: left; font-weight: 650; padding: 0 0 8px; color: var(--ink); }
.limits th, .limits td { text-align: left; padding: 11px 14px; border-top: 1px solid var(--rule); vertical-align: top; }
.limits th { font-weight: 550; color: var(--ink-soft); width: 52%; }
.limits td { font-variant-numeric: tabular-nums; }
.limits + p { margin-top: 14px; }
.sources { display: grid; gap: 8px 40px; margin-top: 18px; }
@media (min-width: 760px) { .sources { grid-template-columns: repeat(3, 1fr); } }
.src-group h3 { font-family: var(--sans); font-size: var(--t-14); font-weight: 650; color: var(--muted); margin: 12px 0 6px; }
.src-list, .credits { list-style: none; padding: 0; }
.src-list li { padding: 5px 0; border-bottom: 1px solid var(--rule); font-size: var(--t-14); }
.credits li { font-size: var(--t-14); margin-top: 8px; max-width: var(--measure); }
.sources + p { margin-top: 26px; }

/* ---------------------------------------------------------------- notes */
.draft-note { background: #fbf3dc; color: var(--ink); text-align: center; padding: 10px var(--gap);
  font-size: var(--t-14); font-weight: 600; border-bottom: 1px solid var(--gold); }
.byline { color: var(--muted); font-size: var(--t-14); }
.s-byline { padding-top: 0; }
.guides li { font-family: var(--serif); font-size: var(--t-20); }
.s-footnote { padding: 24px 0 32px; border-top: 1px solid var(--gold-line); }
.footnote { font-size: var(--t-13); color: var(--muted); line-height: 1.55; max-width: 90ch; }

/* ---------------------------------------------------------------- the footer */
.foot { background: var(--grain), var(--deep); color: var(--on-ink-soft); padding: 56px 0 64px; font-size: var(--t-14); }
.foot a { color: var(--on-ink); text-decoration-color: rgba(232, 238, 244, .35); }
.foot a:hover { text-decoration-color: var(--gold); }
.foot-in { display: grid; gap: 24px; }
.foot-nav ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.notices { max-width: 90ch; line-height: 1.6; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 22px; }

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .btn { width: 100%; text-align: center; }
  .btn-soon { width: 100%; text-align: center; }
  .sp-sum { grid-template-columns: minmax(0, 1fr) auto; }
  .sp-kind { grid-column: 1 / -1; justify-self: start; margin-bottom: 6px; }
  .sp-name { grid-column: 1; }
  .sp-fit { grid-row: 2; grid-column: 2; }
  .legend { grid-template-columns: 1fr; }
  :root { --overlap: 48px; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .menu { display: block; margin-left: 0; }
  .top-in { gap: 12px; }
}
@media (max-width: 640px) {
  :root { --bar-h: 65px; }
  .top-in { padding-top: 11px; padding-bottom: 11px; }
  .brand img { width: 112px; }
  /* no Subscribe in the bar (JP 2026-10-07): with Sign in in the menu, the menu takes the right edge */
  .menu { margin-left: auto; }
  .menu summary { padding: 9px 12px; }
}

/* ---------------------------------------------------------------- motion (all of it) */
/* ---------------------------------------------------------------- round eight (JP 2026-10-07) */
/* the hero's three answers in one line, under the lede */
.hero-text > p.lead { font-family: var(--serif); color: #fff; font-size: var(--t-20); line-height: 1.45; margin-top: 18px;
  padding-left: 14px; border-left: 2px solid var(--gold); max-width: 40ch; }
@media (min-width: 1100px) { .hero-text > p.lead { font-size: var(--t-17); } }
/* one credits line at the foot of a dark band (and of the Markets and analysis page) */
.band-credits { margin-top: 44px !important; padding-top: 16px; border-top: 1px solid var(--rule); font-size: var(--t-13);
  color: var(--muted); max-width: none !important; line-height: 1.6; }
.s.band-ink .band-credits { border-top-color: rgba(255, 255, 255, .14); color: var(--on-ink-soft); }
.s.band-ink .band-credits a { color: var(--on-ink); }
.band-ink .answer-n { color: #fff; }
.band-ink .answer-k { color: var(--on-ink-soft); }
/* the money band's eight reading cards: hairline-ruled cells on the navy, like the sources wall's grid */
.readings { list-style: none; padding: 0; margin: 48px 0 0; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .readings { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .readings { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.rd-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 16px; background: rgba(255, 255, 255, .035);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .13); min-height: 228px; }
/* one column on a phone: no fixed height, so eight cards stay short */
@media (max-width: 599px) { .rd-card { min-height: 0; padding: 16px 18px 14px; } .rd-date { padding-top: 2px; } }
.s .rd-card p { max-width: none; margin: 0; }
.rd-label { font-size: var(--t-13); color: var(--on-ink-soft) !important; line-height: 1.35; }
.rd-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.rd-n { font-family: var(--serif); font-weight: 600; font-size: var(--t-32); line-height: 1.05; color: #fff;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rd-u { font-size: var(--t-13); color: var(--on-ink-soft); }
.rd-viz { display: block; width: 100%; height: 34px; margin: 4px 0 2px; overflow: visible; }
.rd-viz path { fill: none; stroke: var(--gold); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rd-rule { stroke: rgba(232, 238, 244, .45); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.rd-track { height: 24px; }
.rd-usual { fill: rgba(232, 238, 244, .14); }
.rd-line { fill: rgba(232, 238, 244, .3); }
.rd-mark { fill: var(--gold); }
.rd-dot { fill: rgba(232, 238, 244, .55); }
.rd-ext { fill: var(--gold); }
.rd-bar { fill: rgba(232, 238, 244, .32); }
.rd-last { fill: var(--gold); }
.rd-dir { width: 34px; height: 34px; }
.rd-dir path { stroke-width: 2.4; stroke-linecap: round; }
.rd-read { font-size: var(--t-14); line-height: 1.45; color: var(--on-ink) !important; }
.rd-date { margin-top: auto !important; padding-top: 6px; font-size: 12px; color: var(--on-ink-soft) !important; }
.readings + .more { margin-top: 22px !important; }
.s.band-ink .more a { color: #fff; text-decoration-color: var(--gold); }
/* Markets and analysis: each section a picture beside its words and one sentence from the page */
@media (min-width: 960px) { .mk-cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.mk-cols h2 { font-size: var(--t-32); }
.mk-cols > .col:first-child > p { font-family: var(--serif); font-size: var(--t-20); line-height: 1.5; color: var(--ink-2); }
.mk-ex { margin: 26px 0 0; max-width: var(--measure); }
.mk-ex blockquote { margin: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--gold); }
.mk-ex blockquote p { font-size: var(--t-17) !important; line-height: 1.55; color: var(--ink) !important;
  font-family: var(--sans) !important; }
.mk-ex b { font-weight: 650; }
.mk-ex figcaption { font-size: var(--t-13); color: var(--muted); margin-top: 8px; padding-left: 21px; }
.s-lead.band-ink h1 { color: #fff; }
.s-lead.band-ink .lead { color: #fff; font-size: var(--t-25); }
.opencalls { margin-top: 28px; max-width: var(--measure); }
.opencalls h3 { margin: 0 0 6px; font-size: var(--t-20); }
.opencalls ul { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.opencalls li { padding: 12px 0; border-bottom: 1px solid var(--rule); display: grid; gap: 2px; }
.oc-call { font-family: var(--serif); font-size: var(--t-17); color: var(--ink); }
.oc-meta { font-size: var(--t-13); color: var(--muted); }
.oc-note { margin-top: 12px !important; font-size: var(--t-14); color: var(--ink-soft); }
.disclosures { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rule); }
.disclosures h3 { margin: 0 0 8px; font-size: var(--t-17); }
.disclosures ul { margin: 0; padding-left: 18px; max-width: 90ch; }
.disclosures li { font-size: var(--t-14); color: var(--ink-soft); line-height: 1.55; margin-top: 4px; }
.s-credits .band-credits { margin-top: 0 !important; border-top: 0; padding-top: 0; font-size: var(--t-14); }
/* Records search: four groups as one ruled ledger */
.groups { gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 8px; align-items: stretch !important; }
@media (min-width: 760px) { .groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.groups .col { background: #fff; padding: 24px 26px 26px; }
.groups h3 { margin-top: 0; }
.groups .col > p { max-width: 60ch; }
.groups .col > p + p { font-size: var(--t-14); color: var(--ink-soft); margin-top: 12px; }
.groups + p { margin-top: 22px; color: var(--ink-soft); }
/* the price section's one line of price, and the founder rate's terms */
.oneplan { font-family: var(--serif); font-size: var(--t-20); line-height: 1.4; color: var(--ink); margin-top: 18px !important; }
.price-limited { margin-top: 12px !important; font-size: var(--t-14); color: var(--ink-2); }
.price-terms { margin-top: 8px !important; font-size: var(--t-14); color: var(--ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  /* the money band's cards fly in ONCE from loose, scattered places into their grid (about 1.2 s, transform
     and opacity only), then stay still; reduced motion and no script get the grid at once */
  .js .readings[data-reveal]:not(.is-in) .rd-card { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); }
  .js .readings.is-in:not(.now) .rd-card { animation: rd-in 1000ms cubic-bezier(.2, .75, .25, 1) backwards;
    animation-delay: calc(var(--k) * 28ms); }
  @keyframes rd-in { from { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); }
    35% { opacity: 1; } to { opacity: 1; transform: none; } }
  .rd-card:nth-child(1) { --fx: -60px; --fy: 90px; --fr: -7deg; }
  .rd-card:nth-child(2) { --fx: 40px; --fy: 140px; --fr: 5deg; }
  .rd-card:nth-child(3) { --fx: -30px; --fy: 60px; --fr: 9deg; }
  .rd-card:nth-child(4) { --fx: 70px; --fy: 110px; --fr: -4deg; }
  .rd-card:nth-child(5) { --fx: -80px; --fy: -40px; --fr: 6deg; }
  .rd-card:nth-child(6) { --fx: 30px; --fy: -90px; --fr: -8deg; }
  .rd-card:nth-child(7) { --fx: -40px; --fy: -60px; --fr: -5deg; }
  .rd-card:nth-child(8) { --fx: 90px; --fy: -30px; --fr: 7deg; }

  /* 1. the hero's one orchestrated moment, under 1.6s */
  .s-hero h1 { animation: settle 500ms cubic-bezier(.2, .7, .2, 1) both; }
  .s-hero h1 ~ p, .s-hero .cta { animation: settle 500ms 90ms cubic-bezier(.2, .7, .2, 1) both; }
  .specimen { animation: settle 600ms 180ms cubic-bezier(.2, .7, .2, 1) both; }
  .sp-row { animation: settle 420ms calc(560ms + var(--r, 0) * 140ms) cubic-bezier(.2, .7, .2, 1) both; }
  /* the filmstrip drifts (JP 2026-10-06): the one sanctioned loop, about 40 s, starting only once the strip is
     in view; paused on hover, on keyboard focus inside it and by its pause button (reveal.js); with reduced
     motion or without the script it stays a row that scrolls sideways */
  .film-wrap.drift .film { overflow: hidden; scroll-snap-type: none; scrollbar-width: none; }
  .film-wrap.drift .film-dup { display: block; }
  .film-wrap.drift.is-in .film-track { animation: drift 40s linear infinite; }
  .film-wrap.drift:hover .film-track, .film-wrap.drift:focus-within .film-track,
  .film-wrap.drift.paused .film-track { animation-play-state: paused; }
  .film-wrap.drift::after { top: 42px; }
  .film-wrap.drift::before { content: ""; position: absolute; left: 0; top: 42px; bottom: 16px; width: 72px; z-index: 1;
    pointer-events: none; background: linear-gradient(270deg, rgba(255, 255, 255, 0), var(--paper) 85%); }
  @keyframes drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  /* 3. the lift on hover or focus: transform and shadow only, 200 ms */
  .shot-frame { transition: transform 200ms ease-out, box-shadow 200ms ease-out; }
  .shot-frame:hover, .shot:focus-within .shot-frame, .film-frame:hover .shot-frame, .step:hover .shot-frame {
    transform: translateY(-2px); }
  /* and the sheen, slow and soft (JP 2026-10-06): a feathered band a third of the frame wide, its peak white at
     14 percent, crossing once in 1.8 s on transform; it starts and ends wholly outside the frame (the picture
     clips it), so it never pops in or out. Leaving fades the band over 400 ms, then puts it back unseen, so
     it never runs backwards and never repeats while the pointer stays. */
  .shot-frame picture { position: relative; }
  .shot-frame picture::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%;
    pointer-events: none; z-index: 2; opacity: 0; transform: translateX(-105%);
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .06) 30%,
      rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, .06) 70%, rgba(255, 255, 255, 0) 100%);
    transition: opacity 400ms ease-out, transform 0s linear 400ms; }
  .shot-frame:hover picture::after, .shot:focus-within picture::after, .film-frame:hover picture::after,
  .step:hover picture::after { opacity: 1; transform: translateX(300%);
    transition: transform 1800ms ease-in-out, opacity 0s; }
  @keyframes settle { from { opacity: 0; transform: translateY(8px); } }
  /* the board rises in 3D and keeps a slight tilt where the page is wide enough to hold it */
  @media (min-width: 900px) {
    .hero-fig, .s-hero .wrap > .specimen { perspective: 1600px; }
    .specimen { transform: rotateX(1.5deg); transform-origin: 50% 0;
      animation: rise 760ms 180ms cubic-bezier(.16, .8, .24, 1) both; }
  }
  @keyframes rise { from { opacity: 0; transform: rotateX(8deg) translateY(28px); }
                    to { opacity: 1; transform: rotateX(1.5deg); } }
  @keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes fade { from { opacity: 0; } }
  /* 4. one-shot reveals (reveal.js adds .is-in once, the first time a quarter of the element is in view; an
     element already in view at load also gets .now and plays nothing). Every start state is the first frame
     of its animation, with fill both, and none hides anything: without the script the page is in its final
     state. */
  .js .answer .shot[data-reveal]:not(.is-in) .shot-frame,
  .js .shot.wide[data-reveal]:not(.is-in) .shot-frame,
  .js .shot.clip[data-reveal]:not(.is-in) .shot-frame { transform: scale(.97); }
  .js .answer .shot.is-in:not(.now) .shot-frame, .js .shot.wide.is-in:not(.now) .shot-frame,
  .js .shot.clip.is-in:not(.now) .shot-frame { animation: enter 700ms cubic-bezier(.2, .7, .2, 1) backwards; }
  /* backwards, not both: once ended the frame is free to lift on hover */
  @keyframes enter { from { transform: scale(.97); } to { transform: scale(1); } }
  /* the drill's second and third pictures settle in once on reveal, after the first (transform and opacity only;
     backwards, so hover's lift works after) */
  @media (min-width: 960px) {
    .js .fan[data-reveal]:not(.is-in) .fan-2, .js .fan[data-reveal]:not(.is-in) .fan-3 { opacity: 0; transform: translateX(-16px); }
    .js .fan.is-in:not(.now) .fan-2 { animation: fan2 600ms 120ms cubic-bezier(.2, .7, .2, 1) backwards; }
    .js .fan.is-in:not(.now) .fan-3 { animation: fan2 600ms 260ms cubic-bezier(.2, .7, .2, 1) backwards; }
    @keyframes fan2 { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
  }
  /* the sources wall lights ONCE on reveal: each cell fades its ink in and out (about 400 ms lit), in a
     scattered fixed order over about three seconds, and ends as it began, the SEC cell alone lit */
  .js .wall.is-in:not(.now) li:not(:first-child)::before {
    animation: light 900ms calc(var(--d, 0) * 32ms) ease-in-out both; }
  .js .wall.is-in:not(.now) li:not(:first-child) {
    animation: light-ink 900ms calc(var(--d, 0) * 32ms) ease-in-out both; }
  .wall li:nth-child(2) { --d: 55; } .wall li:nth-child(3) { --d: 20; } .wall li:nth-child(4) { --d: 70; }
  .wall li:nth-child(5) { --d: 5; } .wall li:nth-child(6) { --d: 40; } .wall li:nth-child(7) { --d: 65; }
  .wall li:nth-child(8) { --d: 15; } .wall li:nth-child(9) { --d: 50; } .wall li:nth-child(10) { --d: 30; }
  .wall li:nth-child(11) { --d: 75; } .wall li:nth-child(12) { --d: 10; } .wall li:nth-child(13) { --d: 45; }
  .wall li:nth-child(14) { --d: 60; } .wall li:nth-child(15) { --d: 25; } .wall li:nth-child(16) { --d: 35; }
  .wall li:nth-child(17) { --d: 80; }
  @keyframes light { 0% { opacity: 0; } 30%, 70% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes light-ink { 0% { color: var(--ink); } 30%, 70% { color: #fff; } 100% { color: var(--ink); } }
}
@media print {
  .top, .foot-nav, .cta, .skip { display: none; }
  .s-hero, .s.band-ink { background: none; color: var(--ink); }
  .s-hero h1, .hero-text > p, .s.band-ink h2, .s.band-ink p { color: var(--ink); }
}
/* the link under the cards stands at the grid's right, apart from the analysis heading below it */
.readings + .more { text-align: right; max-width: none !important; }
.readings + .more + .cols { margin-top: 64px; }

/* ---------------------------------------------------------------- round nine (JP 2026-10-07) */
/* 1. running paragraphs justified and hyphenated, from 800 px of window up (between 700 and 800 a column
   holds 59ch and some lines spread too wide), where their column holds a long
   line; phones, narrow columns, cards, captions, labels, buttons, headings and the large serif lead
   paragraphs stay left. A justified paragraph takes one of two fixed measures, 59ch (about 65 characters a
   line) or 72ch (about 80), never a fluid width, so its lines break the same at every window size that gives
   it that measure, and tests/site checks every one for wide word gaps. Each column, card text and hero text
   is the container a paragraph measures. */
.s .wrap, .s .col, .hero-text, .answer-text, .use-text, .step-text, .q-a, .mk-stat { container: run / inline-size; }
h1, h2, h3, .btn, figcaption, .cta-risk, .band-credits { hyphens: manual; text-align: left; }
.s p { text-wrap: pretty; }
@media (min-width: 800px) {
  @container run (min-width: 59ch) {
    main .s p:not([class]) { text-align: justify; hyphens: auto; -webkit-hyphens: auto;
      hyphenate-limit-chars: 6 3 2; width: 59ch; max-width: 100%; }
  }
  @container run (min-width: 72ch) {
    main .s p:not([class]) { width: 72ch; }
  }
}
/* display copy stays left at every width: the hero's lines, the examples quoted from the product, and the
   large serif paragraphs beside a picture */
.hero-text p, .mk-ex blockquote p, .head-cols .col > p, .mk-cols > .col:first-child > p, .answer-text p,
.pain-cols p, .money-cols p, .clip-cols p, .proof-cols p, .behind-cols > .col:first-child > p, .overview-cols p, .proof-notes p {
  text-align: left !important; hyphens: manual !important; width: auto !important; }

/* 2. Records search. The head: the headline beside its lede, the structure chart across the band below it
   as the proof, standing past the band's edge into the page */
.hero-stack { grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
.hero-stack .hero-text { margin-bottom: 0 !important; padding-bottom: 0 !important; }
@media (min-width: 960px) {
  .hero-stack .hero-text { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px;
    align-items: start; }
  .hero-stack .hero-text h1 { grid-column: 1; grid-row: 1 / span 4; align-self: start; margin-bottom: 0;
    font-size: clamp(2.6rem, 3.6vw + .3rem, 4rem) !important; max-width: 13em; }
  .hero-stack .hero-text > p { grid-column: 2; }
}
.hero-stack .hero-text > p:first-of-type { font-family: var(--serif); color: #fff; font-size: var(--t-20); line-height: 1.5; }
.hero-stack .hero-text > p + p { font-size: var(--t-14) !important; color: var(--on-ink-soft); }
.hero-stack .hero-fig { margin-bottom: calc(-1 * var(--proof-overlap)); }
.hero-proof { margin: 0; }
.hero-proof .shot-frame { width: 100%; box-shadow: var(--edge), 0 2px 3px rgba(4, 10, 20, .25), 0 40px 80px -28px rgba(0, 0, 0, .6); }
.hero-proof .shot-frame img { width: 100%; }
.hero-proof figcaption { margin-top: 14px; }
:root { --proof-overlap: 200px; }
@media (max-width: 640px) { :root { --proof-overlap: 120px; } }
.s-hero:has(.hero-stack) { padding-bottom: 0; }
.s-hero:has(.hero-stack) + .s { padding-top: calc(var(--proof-overlap) + var(--sec) * .6); }
/* the four readers: who, what they check, and the screen that answers it, as four cards */
.uses { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 24px; }
@media (min-width: 760px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.use { background: #fff; border: 1px solid var(--rule); border-top: 3px solid var(--gold); display: flex;
  flex-direction: column; box-shadow: var(--sh-frame), var(--edge); }
.use-text { padding: 24px 26px 6px; }
.use-text h3 { margin: 0 0 10px; font-size: var(--t-25); line-height: 1.2; }
.s .use-text p { max-width: none; }
.use-text p + p { font-size: var(--t-14); color: var(--ink-soft); margin-top: 12px; }
.use .shot-frame.crop { margin: auto 18px 18px; width: auto; padding: 4px; box-shadow: none; background: var(--vellum);
  border-color: var(--rule); }
.uses + .strip-cap { margin-top: 18px; }
.uses + .strip-cap + p { margin-top: 22px; color: var(--ink-soft); }
/* Rule 503: the rule, how SERA IQ dates it, what it cannot see; the two sentences as the product says them;
   the filing page's own card beside */
@media (min-width: 960px) { .r5-cols { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 32px 72px; } }
.r5-cols > .col:first-child > p:not(.r5-q):not(.r5-when) { max-width: 62ch; }
.r5-cols > .col:first-child > p strong { color: var(--ink); }
.r5-says { display: grid; gap: 12px; margin: 16px 0 18px; max-width: 62ch; }
.r5-say { background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--gold); padding: 14px 18px 16px; }
.r5-say + .r5-say { border-left-color: var(--ink-2); }
.s .r5-when { font-size: var(--t-13); font-weight: 650; color: var(--muted); }
.s .r5-q { font-family: var(--serif); font-size: var(--t-20); line-height: 1.45; color: var(--ink); margin-top: 4px; }
.r5-date { font-family: var(--sans); font-size: .78em; font-weight: 600; background: #f4ecd6; color: var(--gold-ink);
  padding: 1px 6px; border-radius: var(--r-chip); white-space: nowrap; }
.r5-says + p { font-size: var(--t-14); color: var(--muted); }
.cropfig { margin: 0; }
.cropfig .shot-frame.crop { width: fit-content; max-width: 100%; }
.cropfig .shot-frame.crop picture { width: var(--cw); max-width: 100%; }
.cropfig .shot-frame.crop picture::before { display: none; }
.cropfig figcaption { font-size: var(--t-13); color: var(--muted); margin-top: 12px; max-width: 46ch; line-height: 1.5; }

/* 3. Markets and analysis. Commodities: the words beside the figure presented, the costs picture across */
@media (min-width: 960px) { .mk-feature { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: start; } }
.mk-stat { background: var(--grain), var(--band); color: var(--on-ink); padding: 22px 24px 18px; border-top: 3px solid var(--gold);
  display: grid; gap: 6px; box-shadow: var(--sh-frame); }
.s .mk-stat p { max-width: none; margin: 0; }
.st-label { font-size: var(--t-14); color: var(--on-ink-soft) !important; }
.st-fig { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.st-n { font-family: var(--serif); font-weight: 600; font-size: var(--t-64); line-height: 1; color: #fff; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums; }
.st-u { font-size: var(--t-14); color: var(--on-ink-soft); }
.mk-stat .rd-viz { height: 26px; margin: 6px 0 2px; }
.st-read { font-size: var(--t-14); color: var(--on-ink) !important; line-height: 1.5; }
.st-date { font-size: 12px; color: var(--on-ink-soft) !important; }
.mk-stat + .mk-ex { margin-top: 18px; }
.mk-stat + .mk-ex blockquote p { font-size: var(--t-14) !important; color: var(--ink-soft) !important; }
.s-commodities .shot.wide, .s-industries .shot.wide { margin-top: 40px; }
/* Our analysis: the note, then grading as a sequence, the open calls as cards, the disclosure as fine print */
.s-analysis > .wrap > h3 { margin: 56px 0 0; font-size: var(--t-25); }
.seq4 { counter-reset: seq; gap: 0 28px !important; margin-top: 18px; border-top: 2px solid var(--ink); }
@media (min-width: 760px) { .seq4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .seq4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.seq4 .col { counter-increment: seq; position: relative; padding: 22px 0 10px; }
.seq4 .col::before { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 4px var(--vellum); }
.s .seq4 .col p { font-size: var(--t-14); color: var(--ink-soft); line-height: 1.55; max-width: 34ch; text-align: left; }
.seq4 .col p strong { display: block; font-family: var(--serif); font-size: var(--t-20); color: var(--ink); font-weight: 600;
  margin-bottom: 6px; }
.opencalls { margin-top: 56px; max-width: none; }
.opencalls h3 { font-size: var(--t-25); margin: 0 0 16px; }
.opencalls ul.oc-cards { list-style: none; padding: 0; margin: 0; border: 0; display: grid; gap: 16px; }
@media (min-width: 640px) { .opencalls ul.oc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .opencalls ul.oc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.opencalls li.oc-card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 18px; border: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule); background: #fff; }
.s .oc-card p { max-width: none; margin: 0; }
.oc-head { display: flex; gap: 10px; align-items: flex-start; }
.oc-dir { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.oc-dir path { fill: none; stroke: var(--gold-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.oc-call { font-family: var(--serif); font-size: var(--t-17); line-height: 1.4; color: var(--ink); }
.oc-meta { font-size: var(--t-13); color: var(--muted); padding-left: 32px; }
.oc-rate { margin-top: auto !important; padding-top: 10px; border-top: 1px solid var(--rule); display: grid; gap: 8px;
  font-size: var(--t-13); color: var(--ink-soft); }
.oc-rate b { font-family: var(--serif); font-size: var(--t-20); color: var(--ink); font-weight: 600; margin-right: 4px; }
.oc-meter { display: block; position: relative; height: 6px; background: var(--rule); border-radius: 3px; overflow: hidden; }
.oc-meter i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink-2); border-radius: 3px; }
.s .oc-note { margin-top: 14px; font-size: var(--t-13); color: var(--muted); }
.disclosures { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--rule); max-width: none; }
.s .fp-h { font-size: 12.5px; font-weight: 650; color: var(--muted); margin: 0 0 6px; }
.disclosures ul { list-style: none; padding: 0; margin: 0; max-width: none; columns: 2 380px; column-gap: 40px; }
.disclosures li { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0 0 6px; break-inside: avoid; }
/* the depth of the record, in the hero under the three answers (JP 2026-10-07, claim C43) */
.hero-text > p.depth { color: #fff; font-size: var(--t-17); line-height: 1.5; margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .16); max-width: 46ch; }
.depth b { color: var(--gold); font-weight: 650; }
/* a use card never widens past its column: its crop draws the screen at its own size inside */
.uses { grid-template-columns: minmax(0, 1fr); }
.use, .use .shot-frame.crop { min-width: 0; }
@media (min-width: 760px) { .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Sign in (JP 2026-10-07): a quiet text link just left of Subscribe, which stays the one button; on a phone it
   moves into the menu, where it sits above Subscribe */
.signin { flex: none; color: var(--on-ink); font-size: var(--t-14); font-weight: 550; text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent; margin-left: -4px; }
.signin:hover, .signin:focus-visible { color: #fff; border-bottom-color: var(--gold); }
@media (max-width: 900px) { .signin { margin-left: auto; } }
@media (max-width: 640px) { .signin { display: none; } }
/* on a phone the four steps run down a line of their own */
@media (max-width: 759px) {
  .seq4 { border-top: 0; border-left: 2px solid var(--ink); padding-left: 22px; }
  .seq4 .col { padding: 10px 0 14px; }
  .seq4 .col::before { left: -29px; top: 18px; }
}
/* the status page (JP 2026-10-08, status.php): a summary, an optional notice, four lines, each with a dot of
   its state; the words carry the state, the colour only repeats it */
.s-status { --st-ok: #2f7d4f; --st-warn: var(--gold); --st-down: #a3312b; --st-unknown: var(--rule-strong); }
.s-status .wrap { max-width: 860px; }
.s-status.head h1 { font-size: var(--t-44); margin-bottom: 18px; }
.status-summary { font-family: var(--serif); font-size: var(--t-25); line-height: 1.3; color: var(--ink);
  padding: 18px 20px; border: 1px solid var(--rule); border-left: 4px solid var(--st-unknown);
  border-radius: var(--r-frame); background: var(--paper); }
.s .status-summary { max-width: none; }
.status-summary.status-ok { border-left-color: var(--st-ok); }
.status-summary.status-warn { border-left-color: var(--st-warn); }
.status-summary.status-down { border-left-color: var(--st-down); }
.status-notice { margin-top: 20px; padding: 14px 20px; background: var(--vellum); border-radius: var(--r-frame); }
.status-notice h2 { font-family: var(--sans); font-size: var(--t-14); font-weight: 650; color: var(--muted);
  margin: 0 0 4px; letter-spacing: 0; }
.status-lines { margin: 28px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.status-line { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; padding: 16px 2px;
  border-bottom: 1px solid var(--rule); }
.status-line dt { font-weight: 600; color: var(--ink); }
.status-line dd { margin: 0; color: var(--ink-2); display: flex; align-items: center; gap: 10px; }
.status-line dd::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--st-unknown); }
.status-line .st-ok::before { background: var(--st-ok); }
.status-line .st-warn::before { background: var(--st-warn); }
.status-line .st-down::before { background: var(--st-down); }
.s .status-checked { margin-top: 18px; font-size: var(--t-14); color: var(--muted); }

/* no sideways page scroll (2026-10-10): a section's cards and pictures that animate in from
   off their place (the reading cards' fan) are clipped at the section's edges, never widening
   the page; clip, not hidden, so no section becomes a scroll container */
main > section { overflow-x: clip; }
.four-cols + p { margin-top: 28px; }

/* How it works, "Is it the raise, or the market?" (2026-10-10): the three questions the
   picture above answers, a ruled ledger in the hero figures' manner, never cards */
.ledger { margin: 28px 0 56px; border-top: 2px solid var(--ink); gap: 0; }
.ledger .col { padding: 18px 0 4px; border-bottom: 1px solid var(--rule); }
.ledger .col > h3 { margin: 0 0 8px; font-size: var(--t-20); }
.ledger .col > p { margin: 0; color: var(--ink-2); }
@media (min-width: 960px) {
  .ledger { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ledger .col { padding: 20px 28px 6px 0; border-bottom: 0; }
  .ledger .col + .col { padding-left: 28px; border-left: 1px solid var(--rule); }
}
.s .ledger .col > p { text-align: left; hyphens: manual; }
@media (min-width: 960px) { .s-others .others-cols { align-items: center; } }

/* the freshness footnote in the footer's fine print (2026-10-10) */
.foot .foot-note { border-top: 1px solid rgba(232, 238, 244, .14); padding-top: 18px; }
.foot .foot-note .footnote { color: var(--on-ink-soft); max-width: 90ch; margin: 0; }

/* ---------------------------------------------------------------- about (JP 2026-10-10: the layout redone) */
/* the lead and the founders' story are one white opening (JP 2026-10-10: white first, then the colours flip):
   the name on the left, the line and the operator on the right, on the story's own 5/7 grid, a hairline between */
.t-page .s.s-lead.about-lead { padding-bottom: calc(var(--sec) * .5); border-bottom: 0; }
.s-lead.about-lead .lead { font-size: var(--t-25); line-height: 1.4; max-width: 40ch; margin: 0; color: var(--ink); }
.s-lead.about-lead .provider { margin-top: 16px; color: var(--muted); }
@media (min-width: 960px) {
  .s-lead.about-lead .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 56px;
    align-items: start; }
  .s-lead.about-lead h1 { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .s-lead.about-lead .lead, .s-lead.about-lead .provider { grid-column: 2; }
  .s-lead.about-lead .lead { padding-top: 10px; }
}
.s-lead.about-lead + .s-story { padding-top: 0; }
.s-lead.about-lead + .s-story .head-cols { border-top: 1px solid var(--rule); padding-top: calc(var(--sec) * .5); }
/* the founders' story: the gold rule over the text, the first paragraph as its lede */
.s-story .head-cols { margin-bottom: 0; }
.s-story .head-cols .col:last-child { border-top: 3px solid var(--gold); padding-top: 26px; }
.s.s-story .head-cols .col > p { color: var(--ink-2); font-family: var(--serif); font-size: var(--t-17); line-height: 1.6; }
.s.s-story .head-cols .col > p:first-child { color: var(--ink); font-size: var(--t-20); line-height: 1.45; }
.s.s-story .head-cols .col > p + p { margin-top: 18px; }
@media (min-width: 960px) {
  .s.s-story .head-cols .col > p { font-size: var(--t-20); line-height: 1.5; }
  .s.s-story .head-cols .col > p:first-child { font-size: var(--t-25); line-height: 1.4; }
}
/* what it is, now the navy band: its sentences light, the disclosure quieter beside a gold edge */
.s.s-what.band-ink .head-cols .col > p { color: var(--on-ink); }
.s.s-what.band-ink .head-cols .col > p:first-child { color: #fff; }
/* what it is: the research-service line set apart as the disclosure it is */
.s-what .head-cols { margin-bottom: 0; }
.s.s-what .head-cols .col > p:last-child { font-family: var(--sans); font-size: var(--t-14); line-height: 1.6;
  color: var(--ink-soft); border-left: 3px solid var(--gold); padding: 4px 0 4px 18px; margin-top: 28px; max-width: 60ch; }
.s.s-what.band-ink .head-cols .col > p:last-child { color: var(--on-ink-soft); }
/* how we work: the rule as the subtitle beside the name, the six practices across the page in ruled columns */
.s-how > .wrap > h2 { margin-bottom: 10px; }
.s-how > .wrap > h3 { font-family: var(--serif); font-size: var(--t-20); font-weight: 400; line-height: 1.4; color: var(--ink-soft);
  margin: 0 0 32px; }
.s-how > .wrap > .list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; margin: 0; max-width: none; }
@media (min-width: 640px) { .s-how > .wrap > .list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1025px) { .s-how > .wrap > .list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.s-how > .wrap > .list li { margin: 0; padding: 18px 0 22px 26px; border-top: 1px solid var(--rule-strong, var(--rule));
  font-family: var(--serif); font-size: var(--t-17); line-height: 1.55; color: var(--ink-2); text-align: left; hyphens: manual; }
.s-how > .wrap > .list li::before { top: 1.75em; }
.s-contact .head-cols { margin-bottom: 0; }

/* ---------------------------------------------------------------- know who you are calling (JP 2026-10-15) */
/* one record, the adviser's own answers: the desktop capture at its own size (its type readable; a wide, thin
   box), the phone capture at 640px and below, each the column's width at most */
.calling-record { margin-top: 8px; }
.calling-record .shot-frame { width: auto; max-width: 100%; display: inline-block; }
.calling-record .shot-frame img { max-width: 100%; height: auto; }

/* ---------------------------------------------------------------- before a commitment (JP 2026-10-19, claim C71)
   JP 2026-10-20, an annotated exhibit: the heading beside its lede as the other sections' head row; the record at
   a glance of a fictional sponsor (the product's own template) wide on the left, the four facets beside it as a
   compact ledger on a thin gold rule, both top-aligned; the scope and the closing sentence small, across, under */
.sponsor-cols { gap: 28px 48px; }
.sponsor-cols .terms { margin: 0; padding-left: 20px; border-left: 2px solid var(--gold); max-width: 46ch; }
.sponsor-cols .terms > div + div { margin-top: 16px; }
.sponsor-cols .terms dt { font-weight: 650; color: var(--ink); font-size: var(--t-17); line-height: 1.35; }
.sponsor-cols .terms dd { margin: 3px 0 0; font-size: var(--t-14); line-height: 1.55; color: var(--ink-soft); }
.s-sponsor .wrap > p { max-width: none !important; width: auto !important; text-align: left !important;
  font-size: var(--t-14); line-height: 1.55; color: var(--muted); }
.s-sponsor .sponsor-cols + p { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--rule); }
.s-sponsor .wrap > p + p { margin-top: 4px; }
@media (min-width: 960px) {
  .sponsor-cols { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.glance-fig { margin: 0; }
.glance-board { background: #fff; border: 1px solid var(--rule); border-radius: var(--r-frame); padding: 22px 24px 20px;
  box-shadow: var(--sh-frame), var(--edge); }
.glance-fig figcaption { margin-top: 10px; font-size: var(--t-13); color: var(--muted); }
.glance { container: glance / inline-size; }
.glance .gl-title { font: 600 var(--t-13)/1.3 var(--sans); color: var(--muted); margin: 0; letter-spacing: 0; }
.glance .gl-line { font-family: var(--serif); font-size: var(--t-20); line-height: 1.5; color: var(--ink); max-width: 70ch;
  margin: 8px 0 0; }
.glance .gl-line .figure-cell { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; }
.glance .gl-tl { margin: 22px 0 0; min-width: 0; }
.glance .gl-svg { display: block; width: 100%; height: 88px; overflow: visible; }
.glance .gl-base, .glance .gl-tick { stroke: #7a888e; stroke-width: 1; }
.glance .gl-sought { fill: none; stroke: #7a888e; stroke-width: 1; }
.glance .gl-sold { fill: var(--ink); }
.glance .gl-zero, .glance .gl-latest circle { fill: var(--gold-ink); }
.glance .gl-hit { fill: transparent; }
.glance .gl-axis { position: relative; height: 18px; margin-top: 4px; }
.glance .gl-axis span { position: absolute; top: 0; transform: translateX(-50%); font: 400 11px var(--sans);
  color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.glance .gl-axis span:first-child { transform: none; }
.glance .gl-tl figcaption { margin-top: 4px; font: 400 12px/1.45 var(--sans); color: var(--muted); }
.glance .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.glance .gl-reg { display: flex; flex-wrap: wrap; margin: 22px 0 0; padding: 0; row-gap: 14px; }
.glance .gl-fact { flex: 0 1 auto; min-width: 0; padding: 0 18px; border-left: 1px solid var(--rule); }
.glance .gl-fact:first-child { padding-left: 0; border-left: 0; }
.glance .gl-fact dt { font: 400 12px/1.3 var(--sans); color: var(--muted); }
.glance .gl-fact dd { margin: 4px 0 0; }
.glance .gl-v { display: block; font: 600 var(--t-17)/1.3 var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; }
.glance .gl-sub { display: block; font: 400 12px/1.35 var(--sans); color: var(--muted); margin-top: 2px; }
.glance .gl-muted .gl-v { font-weight: 500; color: var(--muted); }
.glance .gl-scope { margin: 12px 0 0; font: 400 12px/1.45 var(--sans); color: var(--muted); max-width: none; }
@container glance (max-width: 600px) {
  .glance .gl-svg { height: 72px; }
  .glance .gl-axis span:nth-child(even) { display: none; }
  .glance .gl-line { font-size: var(--t-17); }
  .glance .gl-reg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 0; }
  .glance .gl-fact, .glance .gl-fact:first-child { padding: 0 12px; border-left: 1px solid var(--rule); }
  .glance .gl-fact:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .glance .gl-sold, .glance .gl-sought { transform-box: fill-box; transform-origin: 50% 100%; animation: gl-grow 200ms ease-out both; }
}
@keyframes gl-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---------------------------------------------------------------- Who it serves (JP 2026-10-20)
   the top bar's first item: a disclosure button and its small menu (reveal.js sets aria-expanded; without the
   script the menu opens on hover and on keyboard focus); in the phone menu, the same five links as a plain list;
   in the footer, a group of its own */
.serves { position: relative; }
.serves-btn { font: 550 var(--t-14)/1.6 var(--sans); color: var(--on-ink); background: none; border: 0; border-radius: 0;
  padding: 6px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; border-bottom: 2px solid transparent; }
.serves-btn::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold);
  transform: translateY(-2px) rotate(45deg); }
.serves-btn[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.serves-btn:hover, .serves-btn[data-current], .serves-btn[aria-expanded="true"] { color: #fff; border-bottom-color: var(--gold); }
.nav .serves-menu { display: none; position: absolute; left: -18px; top: calc(100% + 12px); min-width: 250px; background: #fff;
  border: 1px solid var(--rule); border-top: 3px solid var(--gold); box-shadow: var(--sh-deep); padding: 8px 0; gap: 0;
  flex-direction: column; }
/* the gap between the button and the menu still counts as the menu, so a pointer can cross it */
.nav .serves-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.serves-btn[aria-expanded="true"] + .serves-menu { display: flex; }
html:not(.tb) .serves:hover .serves-menu, html:not(.tb) .serves:focus-within .serves-menu { display: flex; }
.nav .serves-menu a { display: block; color: var(--ink); padding: 10px 18px; border-bottom: 0; white-space: nowrap; }
.nav .serves-menu a:hover, .nav .serves-menu a:focus-visible { color: var(--ink-2); text-decoration: underline;
  text-decoration-color: var(--gold); }
.nav .serves-menu a[aria-current] { box-shadow: inset 3px 0 0 var(--gold); color: var(--ink); }
.menu .menu-group { border-bottom: 1px solid var(--rule); padding-bottom: 6px; margin-bottom: 4px; }
.menu-h { display: block; padding: 10px 18px 4px; font-size: var(--t-13); font-weight: 650; color: var(--muted); }
.menu .menu-group ul { position: static; box-shadow: none; border: 0; padding: 0; margin: 0; min-width: 0; background: none; }
.menu .menu-group li a { padding: 9px 18px 9px 30px; }
/* JP 2026-10-20: the audiences fold under one row, and the menu scrolls within the screen on a short phone */
.menu > ul { max-height: calc(100dvh - var(--bar-h) - 20px); overflow-y: auto; overscroll-behavior: contain; }
.menu .menu-group:has(> .menu-sub:not([open])) { padding-bottom: 0; }
.menu-sub > summary.menu-h { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  padding: 11px 18px; font-size: inherit; font-weight: 400; color: var(--ink); }
.menu-sub > summary::-webkit-details-marker { display: none; }
.menu-sub > summary::after { content: ""; width: 7px; height: 7px; margin-left: 12px; border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold); transform: translateY(-2px) rotate(45deg); }
.menu-sub[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.menu-sub > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.foot-serves { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 24px; }
.foot-h { font-weight: 650; color: #fff; }

/* the video slots (site/videos.yml): the Markets hero's, once configured */
/* light words on a navy band's head columns */
.s.band-ink .head-cols .col > p { color: var(--on-ink); }
.s.band-ink .head-cols h2 { color: #fff; }
.video { margin: 0; }
.video-frame { aspect-ratio: 16 / 9; background: var(--deep); border-radius: var(--r-frame); overflow: hidden;
  box-shadow: var(--edge), 0 2px 3px rgba(4, 10, 20, .25), 0 40px 80px -28px rgba(0, 0, 0, .6); }
.video-frame video { display: block; width: 100%; height: 100%; }
.video figcaption { font-size: var(--t-13); color: var(--on-ink-soft); margin-top: 12px; }
/* a tall screen shown from its top, its cut ending in a fade so it reads as intended */
.shot.capped .shot-frame picture { max-height: 520px; }
.shot.capped .shot-frame::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 64px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); pointer-events: none; border-radius: 0 0 4px 4px; }
@media (max-width: 640px) { .shot.capped .shot-frame picture { max-height: 600px; } }
/* the home's Who SERA IQ serves (JP 2026-10-20): each card links its audience's page, the links level at the foot */
.s-who .four-cols .col { display: flex; flex-direction: column; }
.s-who .four-cols .col > .more { margin-top: auto; padding-top: 16px; }
/* a screen whose phone capture runs long (Comparable raises) is shown from its top on a phone only */
@media (max-width: 640px) {
  .shot.phone-capped .shot-frame picture { max-height: 600px; }
  .shot.phone-capped .shot-frame::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 64px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); pointer-events: none; border-radius: 0 0 4px 4px; }
}
/* the top bar's items share one baseline, the Who it serves button among the links */
.nav ul { align-items: baseline; }
/* with Who it serves the bar's links need about 1,080 px of window on one line: below that the menu takes over
   (the 900 px rules above still hold the phone's layout) */
@media (max-width: 1080px) {
  .nav { display: none; }
  .menu { display: block; margin-left: 0; }
  .top-in { gap: 12px; }
  .signin { margin-left: auto; }
}
@media (max-width: 640px) { .menu { margin-left: auto; } }
/* the Markets hero's video slot, once configured, under the lead */
.s-lead > .wrap > .video { max-width: 960px; margin-top: 48px; }
/* on a navy band the film's own navy met the band's (JP 2026-10-21): the film takes the white mat the band's
   screens wear (.shot-frame), so it stands apart like the map above it (the frame's inset edge sat under the
   video and never showed) */
.s.band-ink .video-frame { padding: 8px; background: #fff; border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: var(--sh-frame), 0 40px 80px -28px rgba(0, 0, 0, .6); }
.s.band-ink .video-frame video { border-radius: 4px; }
/* the Markets hero's lede is a full sentence of what the page reads (JP 2026-10-20): the serif at reading size,
   the map's count set apart below it */
.s-lead.band-ink .lead { font-size: var(--t-20); line-height: 1.5; }
.s-lead.band-ink .lead + .answer-fig { margin-top: 26px !important; }

/* ---------------------------------------------------------------- the audience pages, second design (JP 2026-10-20,
   design brief v2): each page reads as an institutional document about one buyer's question. Everything here is
   scoped to the pages' own template (body.t-lp), so the home and the other pages do not move. One bold element,
   the film frame in a white hero; every other section is rules, white space and type: the problem as a serif
   statement on a gold rule, three exhibits, three steps joined by a gold rule, the basis of the record on vellum,
   the price as a term sheet beside the questions, and plain links to the other readers. Navy only in the top bar
   and the footer (JP 2026-10-20: the film has no frame). No motion on load. */
.t-lp .s { padding: clamp(56px, 7vw, 104px) 0; }
.t-lp main > .s + .s { border-top: 1px solid var(--rule); }
.t-lp .s > .wrap > h2 { font-size: var(--t-44); margin-bottom: clamp(28px, 3.4vw, 44px); }
.t-lp .s p, .t-lp .s .list { max-width: var(--measure); }

/* the hero: white paper; the headline, lede, button and link beside the film (under the headline on a phone) */
.t-lp .s-hero { background: var(--paper); color: var(--ink); padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6.5vw, 96px); }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "for" "h1" "film" "lede" "cta" "more"; }
.lp-hero > .lp-for { grid-area: for; }
.lp-hero > h1 { grid-area: h1; }
/* who the page is for (JP 2026-10-20), a label above the headline: sentence case, semibold, gold ink on a short gold
   rule; claim C27 */
.t-lp .lp-hero > .lp-for { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 18px; max-width: none;
  font: 600 0.9375rem/1.35 var(--sans); color: var(--gold-ink); letter-spacing: .005em; }
.t-lp .lp-hero > .lp-for::before { content: ""; flex: none; width: 28px; height: 2px; margin-top: .62em;
  background: var(--gold); }
.lp-hero > .lpf { grid-area: film; }
.lp-hero > p:not(.more):not(.lp-for) { grid-area: lede; }
.lp-hero > .cta { grid-area: cta; }
.lp-hero > .more { grid-area: more; }
.t-lp .s-hero.head .lp-hero > h1 { color: var(--ink); font-size: clamp(2.4rem, 1rem + 3.2vw, 4rem); line-height: 1.04;
  letter-spacing: -0.02em; max-width: 13ch; margin: 0 0 28px; text-wrap: balance; }
.t-lp .lp-hero > p:not(.more):not(.lp-for) { font-size: var(--t-17); line-height: 1.5; color: var(--ink-soft); max-width: 46ch;
  margin-top: 28px; }
.t-lp .lp-hero > .cta { margin-top: 28px; }
.t-lp .s-hero .cta-risk, .t-lp .s-hero .cta-brief { color: var(--muted) !important; }
.t-lp .s-hero .cta-brief a { color: var(--ink-2); text-decoration-color: var(--rule-strong); }
.t-lp .lp-hero > .more { margin-top: 18px; font-size: var(--t-14); }
.t-lp .lp-hero > .more a { color: var(--ink-2); text-decoration-thickness: 1px; }
@media (min-width: 720px) {
  /* the film is the centrepiece (JP 2026-10-20, third and fourth passes): about two-thirds of the hero's width
     (some 760px of a 1120px row), the words in the third beside it, the film's top at the headline's; the same
     proportion down to the phone layout */
  .lp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); column-gap: clamp(24px, 3vw, 44px);
    grid-template-rows: auto auto auto auto 1fr;
    grid-template-areas: "for ." "h1 film" "lede film" "cta film" "more film"; }
  .t-lp .lp-hero > p:not(.more):not(.lp-for) { margin-top: 0; font-size: var(--t-17); }
  .t-lp .s-hero.head .lp-hero > h1 { font-size: clamp(1.7rem, .6rem + 2.2vw, 2.7rem); line-height: 1.08;
    max-width: none; margin-bottom: 22px; }
  .lp-hero > .lpf { align-self: start; margin-top: 0; }
  .t-lp .lp-hero > .cta .btn { white-space: normal; text-align: center; }
}

/* the film: always its 16:9 space and frameless (JP 2026-10-20: no frame, no border, no hairline), just the video or
   its poster with 6px corners and a very soft shadow off the white page; until site/videos.yml names the video it
   shows the page's poster still (a screen of fictional firms, shown from its top) */
.lpf { margin: 0; min-width: 0; }
.lpf-frame { position: relative; aspect-ratio: 16 / 9; background: #fff; border-radius: 6px; overflow: hidden;
  container-type: inline-size;
  box-shadow: 0 1px 2px rgba(10, 22, 40, .06), 0 10px 28px rgba(10, 22, 40, .09); }
.lpf-still { width: 100%; height: 100%; overflow: hidden; background: #fff; }
.lpf-still img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.lpf-board { padding: clamp(12px, 1.8vw, 22px) clamp(14px, 2vw, 26px); }
/* the board scales with its frame (the glance is its own inline-size container) */
.lpf-board .glance .gl-line { font-size: clamp(.85rem, 3.7cqi, 1.5rem); }
.lpf-board .glance .gl-tl { margin-top: 3cqi; }
.lpf-board .glance .gl-svg { height: 16cqi; }
.lpf-board .glance .gl-scope, .lpf-board .glance .gl-tl figcaption, .lpf-board .glance .gl-reg { display: none; }
.lpf-board { display: flex; flex-direction: column; justify-content: safe center; }
.lpf-board .glance .gl-title { display: none; }
.lpf-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
/* the playable film (only once site/videos.yml names it): the whole poster is the play control; its circle and the
   film's real length sit at the poster's lower left, so the poster's opening message stays readable (JP 2026-10-20:
   the poster is the film's message card); the script shows it, and hides it once the film plays */
.lpf-play { position: absolute; inset: 0; display: flex; flex-direction: row; align-items: flex-end;
  justify-content: flex-start; gap: 12px; background: transparent; border: 0; padding: clamp(12px, 2.2cqi, 22px);
  cursor: pointer; font: inherit; }
.lpf-play[hidden] { display: none; }
.lpf-play::before { content: ""; flex: none; width: clamp(44px, 7cqi, 64px); height: clamp(44px, 7cqi, 64px);
  border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55);
  background: rgba(10, 22, 40, .8) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 22'%3E%3Cpath d='M2 1.5v19L19 11z' fill='%23fff'/%3E%3C/svg%3E") no-repeat 56% 50% / 22px 24px; }
.lpf-watch { font: 600 var(--t-14)/1 var(--sans); color: #fff; background: rgba(10, 22, 40, .8); padding: 7px 12px;
  border-radius: 4px; letter-spacing: .01em; }
.lpf-play:hover::before, .lpf-play:focus-visible::before { border-color: var(--gold); }
.lpf-play > .lpf-watch { margin-bottom: clamp(10px, 1.6cqi, 18px); }
.lpf-play:focus-visible { outline-offset: -6px; }
.lpf figcaption { font-size: var(--t-14); line-height: 1.5; color: var(--muted); margin-top: 12px; max-width: 72ch; }
.lpf figcaption .lpf-say { color: var(--ink); font-weight: 600; }

/* the problem: one statement on a 3px gold rule, its heading kept for the outline only */
.t-lp .s-problem h2 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.t-lp .s-problem p { font-family: var(--serif); font-size: clamp(1.5625rem, 1.15rem + 1.1vw, 2rem); line-height: 1.38;
  color: var(--ink); letter-spacing: -0.008em; max-width: 34em; border-left: 3px solid var(--gold);
  padding-left: clamp(20px, 2.6vw, 36px); }

/* what you see: three exhibits; the first across the page (its words beside the screen), the other two side by
   side, words above the screen; each opens on a rule and its citable label */
.exhibits { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(56px, 6vw, 80px) clamp(32px, 4vw, 64px); }
.t-lp .exhibit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-content: start;
  border-top: 1px solid var(--rule-strong); padding-top: 16px; margin: 0; }
.t-lp .exhibit .ex-label { font-size: var(--t-14); font-weight: 600; color: var(--gold-ink); margin: 0 0 14px; }
.t-lp .exhibit .col > p:not(.ex-label) { color: var(--ink-soft); line-height: 1.5; max-width: 60ch; }
.t-lp .exhibit .col > p > strong:first-child { display: block; font-family: var(--serif); font-size: var(--t-25);
  font-weight: 600; line-height: 1.2; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 10px; }
.t-lp .exhibit .shot { margin: 0; }
.t-lp .exhibit .shot-frame { width: 100%; padding: 0; border: 1px solid var(--rule); border-radius: 2px; box-shadow: none; }
.t-lp .exhibit .shot-frame::before { display: none; }
.t-lp .exhibit .shot-frame:hover, .t-lp .exhibit .shot:focus-within .shot-frame { box-shadow: none; }
.t-lp .exhibit .shot-frame picture, .t-lp .exhibit .shot-frame img { border-radius: 1px; }
.t-lp .exhibit .shot-frame img { width: 100%; }
.t-lp .exhibit .shot figcaption { font-size: var(--t-13); margin-top: 10px; }
.t-lp .exhibit .shot.capped .shot-frame picture { max-height: 480px; }
.t-lp .exhibit.ex-lead .shot.capped .shot-frame picture { max-height: 540px; }
.t-lp .exhibit .shot.capped .shot-frame::after, .t-lp .exhibit .shot.phone-capped .shot-frame::after {
  left: 0; right: 0; bottom: 0; border-radius: 0; }
.t-lp .exhibit .glance-board { box-shadow: none; border-radius: 2px; }
.t-lp .glance .gl-sold, .t-lp .glance .gl-sought { animation: none; }
@media (min-width: 960px) {
  .exhibits { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .t-lp .exhibit.ex-lead { grid-column: 1 / -1; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(32px, 4vw, 64px); }
}

/* how you would use it: a true sequence, three steps joined by a gold rule (down the left on a phone) */
.t-lp .s .nsteps { list-style: none; padding: 0; margin: 0; display: grid; counter-reset: nstep; max-width: none; border: 0; }
.t-lp .nsteps li { counter-increment: nstep; position: relative; padding: 0 0 32px 60px; border: 0; color: var(--ink-soft);
  line-height: 1.5; }
.t-lp .nsteps li:last-child { padding-bottom: 0; }
.t-lp .nsteps li::before { content: counter(nstep); position: absolute; left: 0; top: -2px; width: 22px; text-align: center;
  font: 600 var(--t-32)/1 var(--serif); color: var(--gold-ink); }
.t-lp .nsteps li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 42px; bottom: 6px; width: 1px;
  background: var(--gold); }
.t-lp .nsteps li strong { display: block; font: 650 var(--t-17)/1.4 var(--sans); color: var(--ink); margin: 0 0 4px; }
/* a step whose bold words run on into its sentence ("Look up the sponsor by name, CIK or CRD.") reads as one line */
.t-lp .nsteps li.runon strong { display: inline; margin: 0; }
.t-lp .nsteps li.runon { color: var(--ink); font-weight: 650; }
.t-lp .nsteps li.runon strong { font-weight: 650; }
@media (min-width: 900px) {
  .t-lp .s .nsteps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-lp .nsteps li { padding: 0 40px 0 0; }
  .t-lp .nsteps li::before { position: static; display: block; width: auto; text-align: left; margin-bottom: 18px; }
  .t-lp .nsteps li:not(:last-child)::after { left: 40px; right: 16px; top: 16px; bottom: auto; width: auto; height: 1px; }
}

/* the basis of the record: a disclosure block on vellum with a gold rule, like a fund report's basis of
   preparation */
.t-lp .cols.basis { display: block; background: var(--vellum); border-left: 3px solid var(--gold);
  padding: clamp(28px, 4vw, 52px) clamp(22px, 4.4vw, 64px); max-width: 980px; }
.t-lp .basis h2 { font-size: var(--t-25); margin: 0 0 14px; max-width: none; }
.t-lp .basis p { font-family: var(--serif); font-size: var(--t-20); line-height: 1.55; color: var(--ink); max-width: 62ch; }

/* terms and questions: the price as a term sheet, the questions as disclosure rows beside it */
.t-lp .terms-cols { gap: 56px clamp(48px, 6vw, 96px); }
.t-lp .terms-cols h2 { font-size: var(--t-32); margin-bottom: 20px; }
.termsheet { margin: 0; border-top: 2px solid var(--ink); max-width: 560px; }
.termsheet > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 14px 0;
  border-bottom: 1px solid var(--rule); }
.termsheet dt { font-size: var(--t-14); font-weight: 600; color: var(--muted); }
.termsheet dd { margin: 0; color: var(--ink-soft); line-height: 1.5; }
.termsheet dd strong { color: var(--ink); font-weight: 600; }
.termsheet .ts-price dd { font: 600 var(--t-25)/1.2 var(--serif); color: var(--ink); }
.termsheet .ts-note { display: block; font-size: var(--t-14); color: var(--muted); margin-top: 4px; }
.t-lp .termsheet + p { font-size: var(--t-14); color: var(--muted); margin-top: 14px; }
.t-lp .terms-cols .more { font-size: var(--t-14); margin-top: 10px; }
.t-lp .terms-cols .cta { margin-top: 28px; }
.t-lp .terms-cols .q { max-width: none; }
.t-lp .terms-cols .q:first-of-type { border-top: 2px solid var(--ink); }
.t-lp .terms-cols .q:last-of-type { border-bottom: 1px solid var(--rule); }
.t-lp .terms-cols .q > summary { padding: 18px 44px 18px 0; }
.t-lp .terms-cols .q > summary h3 { font-size: var(--t-20); }
.t-lp .terms-cols .q > summary::after { content: "+"; border: 0; transform: none; width: 24px; height: 24px; margin-top: -12px;
  right: 2px; font: 400 26px/24px var(--sans); text-align: center; color: var(--gold-ink); }
.t-lp .terms-cols .q[open] > summary::after { content: "\2212"; margin-top: -12px; }
.t-lp .terms-cols .q-a p { color: var(--ink-soft); }
@media (min-width: 560px) {
  .termsheet > div { grid-template-columns: 8.5em minmax(0, 1fr); gap: 20px; align-items: baseline; }
}
@media (min-width: 960px) {
  .t-lp .terms-cols { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}

/* also used by: plain links, each with who it is for; vertical rules between them on a wide page */
.t-lp .s.s-also { padding: clamp(40px, 5vw, 64px) 0; }
.t-lp .s .also-h { font-size: var(--t-25); margin: 0 0 20px; max-width: none; }
.t-lp .also-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.t-lp .also-list li { padding: 14px 0; }
.t-lp .also-list li + li { border-top: 1px solid var(--rule); }
.t-lp .also-list a { font-weight: 600; color: var(--ink); text-decoration-color: var(--gold); }
.t-lp .also-for { display: block; font-size: var(--t-14); line-height: 1.45; color: var(--muted); margin-top: 4px; }
@media (min-width: 760px) {
  .t-lp .also-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .t-lp .also-list li { padding: 2px 24px; }
  .t-lp .also-list li:first-child { padding-left: 0; }
  .t-lp .also-list li + li { border-top: 0; border-left: 1px solid var(--rule); }
}
/* the audience pages set every paragraph flush left and unhyphenated (the brief: left-aligned everywhere) */
.t-lp main .s p { text-align: left !important; hyphens: manual !important; -webkit-hyphens: manual !important;
  width: auto !important; }

/* ---------------------------------------------------------------- the walkthroughs page (JP 2026-10-20, "make sure
   it looks amazing"): a screening room. The theatre is the selected film, frameless like the audience pages' (6px
   corners, a very soft shadow); beside it at desktop, under it below 1100px, the programme: a quiet index of every
   film, the selected one marked by a gold rule at its left. Each film is its own section, so without the script
   every film shows in order; the script shows one at a time. The only motion: the theatre's 200ms cross-fade. */
.s-walk.head h1 { font-size: var(--t-44); max-width: none; margin-bottom: 10px; }
.vt-lede { font-size: var(--t-17); color: var(--muted); margin: 0 0 clamp(28px, 3vw, 40px); max-width: 60ch; }
.vt-room { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 3vw, 40px); }
.vt-film { min-width: 0; }
.vt-film + .vt-film { margin-top: clamp(48px, 6vw, 72px); }
.vt-js .vt-film:not(.is-on) { display: none; }
.vt-js .vt-film + .vt-film { margin-top: 0; }
.vt-title { font-size: var(--t-25); line-height: 1.25; margin: 22px 0 8px; max-width: 40ch; }
.vt-say { color: var(--ink-soft); line-height: 1.55; margin: 0; max-width: 68ch; }
.vt-links { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; font-size: var(--t-14); font-weight: 600; }
.vt-links a { color: var(--ink-2); text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.vt-tx { margin-top: 18px; border-top: 1px solid var(--rule); padding-top: 14px; max-width: 72ch; }
.vt-tx summary { cursor: pointer; font-size: var(--t-14); font-weight: 600; color: var(--ink-2); }
.vt-tx summary:hover { color: var(--ink); }
.vt-tx-body { margin-top: 12px; font-size: var(--t-14); line-height: 1.65; color: var(--ink-soft); }
.vt-tx-body p, .vt-say { text-align: left !important; hyphens: manual !important; -webkit-hyphens: manual !important; }
.vt-tx-body p { margin: 0 0 10px; }
.vt-prog ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.vt-prog li { border-bottom: 1px solid var(--rule); }
.vt-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 12px 12px 12px 14px; color: var(--ink-soft); text-decoration: none; border-left: 3px solid transparent;
  transition: border-color .15s, color .15s; }
.vt-row:hover, .vt-row:focus-visible { border-left-color: var(--gold-line); color: var(--ink); }
.vt-row[aria-current="true"] { border-left-color: var(--gold); color: var(--ink); }
.vt-row[aria-current="true"] .vt-row-t { font-weight: 650; }
.vt-thumb { width: 120px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; display: block;
  background: #0a1628; }
.vt-row-t { font-size: var(--t-17); font-weight: 550; line-height: 1.3; }
.vt-row-len { font-size: var(--t-14); color: var(--muted); font-variant-numeric: tabular-nums; }
.vt-howtos { margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--rule); padding-top: clamp(32px, 4vw, 48px); }
.vt-howtos h2 { font-size: var(--t-32); margin-bottom: 24px; }
.vt-howto-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.see-film { margin-top: 18px; font-weight: 600; }
.see-film a { color: var(--ink-2); text-decoration-color: var(--gold-line); text-underline-offset: 4px; }
.lpf-all { margin-left: 10px; font-weight: 600; color: var(--ink-2); text-decoration-color: var(--rule-strong);
  white-space: nowrap; }
@media (min-width: 1100px) {
  .vt-room { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 40px; align-items: start; }
  .vt-prog { position: sticky; top: calc(var(--bar-h) + 24px); }
}
@media (max-width: 640px) {
  .vt-row { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; padding-left: 10px; }
  .vt-thumb { width: 96px; }
}
@media (prefers-reduced-motion: no-preference) {
  .vt-js .vt-film.is-on .vt-theatre { animation: vt-in 200ms ease-out; }
  @keyframes vt-in { from { opacity: 0; } to { opacity: 1; } }
}

/* JP 2026-10-20: the films' note on fictional names, quiet under the lede */
.vt-note { margin-top: 10px; max-width: 70ch; font-size: var(--t-14); color: var(--muted); }

/* JP 2026-10-20: the footer in columns: the brand and its line, then Product, Who it serves, Company (About
   first) and Account, each under a quiet white heading; the legal links in one row under a hairline; two
   columns on a tablet and a phone */
.foot-cols { display: grid; gap: 32px 40px; grid-template-columns: minmax(0, 1.3fr) repeat(4, minmax(0, 1fr)); }
.foot-brandcol .foot-logo { display: inline-block; }
.foot-brandcol .foot-tag { margin: 14px 0 0; max-width: 24ch; font: 400 var(--t-17)/1.45 var(--serif); color: var(--on-ink); }
.foot-col .foot-h { display: block; margin-bottom: 12px; font-weight: 650; color: #fff; }
.foot-col ul { display: block; }
.foot-col li + li { margin-top: 9px; }
.foot-legal { border-top: 1px solid rgba(232, 238, 244, .14); padding-top: 18px; }
.foot-legal ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 24px; }
@media (max-width: 1080px) {
  .foot-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-brandcol { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .foot-cols { gap: 28px 20px; }
}
.foot-cols .foot-serves { display: block; }

/* JP 2026-10-20: the home hero's call to action: the Subscribe button with the overview link beside it, the short
   terms in two lines under it, then the free Brief's line */
.cta-hero { max-width: 560px; gap: 8px; }
.cta-hero .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-bottom: 6px; }
.cta-watch { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-17); font-weight: 600;
  color: var(--on-ink); text-decoration: none; }
.cta-watch .cta-play { flex: none; width: 34px; height: 34px; padding: 10px 9px 10px 12px; border-radius: 50%;
  border: 1px solid rgba(232, 238, 244, .45); fill: #fff; transition: border-color 160ms ease-out; }
.cta-watch span { text-decoration: underline; text-decoration-color: rgba(232, 238, 244, .35);
  text-underline-offset: 4px; }
.cta-watch:hover .cta-play, .cta-watch:focus-visible .cta-play { border-color: var(--gold); }
.cta-watch:hover span { text-decoration-color: var(--gold); }
.cta-terms { font-size: var(--t-14) !important; line-height: 1.5; margin: 0 !important;
  color: var(--on-ink-soft) !important; }
.cta-terms b { color: var(--on-ink); font-weight: 650; }
.cta-hero .cta-brief { margin-top: 6px !important; }

/* the overview band (JP 2026-10-20): the film about two-thirds of the row, its heading and sentence beside it;
   the hero's board stands into the band's top, so the band starts below the overlap */
.s-overview { padding-top: calc(var(--overlap) + clamp(40px, 5vw, 64px)); }
.s-overview h2 { margin-top: 0; }
.s-overview .col > p:not(.more) { font-family: var(--serif); font-size: var(--t-20); line-height: 1.5;
  color: var(--ink-2); max-width: 32ch; }
.s-overview .more { margin-top: 18px; }
.s-overview .col > p:not(.more) + p:not(.more) { font-family: var(--sans); font-size: var(--t-14); line-height: 1.5;
  color: var(--muted); margin-top: 10px; }
.lpf-band { width: 100%; }
@media (min-width: 900px) {
  .overview-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 clamp(28px, 3.4vw, 48px);
    align-items: center; }
}
/* the proof strip under it: where the record is read from and how deep it goes, beside the three counts */
.s-proof { padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--rule); }
.proof-notes { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--rule); gap: 10px 56px; }
.proof-notes p { margin: 0 !important; }
.proof-notes .col:first-child > p { font-family: var(--serif); font-size: var(--t-17); line-height: 1.5; color: var(--ink-2);
  max-width: 46ch; }
.s-proof .proof-notes p.depth { font-size: var(--t-14); line-height: 1.55; color: var(--muted); max-width: 60ch; }
.s-proof .depth b { color: var(--gold-ink); }
@media (min-width: 960px) {
  .proof-notes { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: baseline; }
}
@media (min-width: 1100px) {
  /* the home hero's text column a little wider (JP 2026-10-20), so the short terms keep to their two lines */
  .hero-grid:not(.hero-stack):not(.hero-lp) { grid-template-columns: minmax(0, 5.1fr) minmax(0, 6.9fr); gap: 44px; }
}
.s-sponsor .head-cols { margin-bottom: 28px; }
@media (max-width: 959px) { .sponsor-cols .terms { max-width: 62ch; } }