/* Propello theme. Rebrand Lab v2 tokens, editorial layout.
   One family (Helvetica Neue), square blocks, round pills, no shadows,
   gradients or textures. Diamond is the interaction layer only. */

:root {
  --white: #FFFFFF; --light: #ECEFF1; --cloud: #DEE0E2; --silver: #B0BEC5;
  --serene: #A6BAC8; --steel: #82A2BE; --smoke: #768289; --slate: #546E7A;
  --stone: #2F3E47; --navy: #1F2A37; --deep: #101E28; --abyss: #0A141B;
  --diamond: #BBE7FF; --aqua: #A0C9CB;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t: 320ms;

  --f: "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Type scale (SECTION_BIBLE.md 2). Every size is linear from 390 to 1440 and capped there. */
  --fs-hero: clamp(2.625rem, 1.304rem + 5.419vw, 6.25rem);     /* 42 -> 100: page H1, the promise */
  --fs-statement: clamp(2.125rem, 1.429rem + 2.857vw, 4rem);   /* 34 -> 64: statement bands */
  --fs-h2: clamp(2rem, 1.536rem + 1.905vw, 3.25rem);           /* 32 -> 52: every section heading */
  --fs-h3: clamp(1.375rem, 1.236rem + .571vw, 1.75rem);        /* 22 -> 28: item titles, FAQ questions */
  --fs-lead: clamp(1.125rem, 1.032rem + .381vw, 1.375rem);     /* 18 -> 22 */
  --fs-body: clamp(1rem, .954rem + .19vw, 1.125rem);           /* 16 -> 18 */
  --fs-small: 14px;
  --fs-label: 12px;
  --fs-numeral: clamp(6rem, 3.571rem + 9.905vw, 12.5rem);      /* 96 -> 200: index numerals, figures */
  --display: var(--fs-hero);
  --mega: clamp(3.5rem, 1rem + 9vw, 9rem);
  --numeral: clamp(3.5rem, 2rem + 6vw, 7.5rem);
  --h1: var(--fs-h2);
  --h2: var(--fs-h2);
  --h3: var(--fs-h3);
  --body: var(--fs-body);
  --small: 15px;

  /* Grid: 12 columns. Margins 16 / 40 / 64, gutters 16 / 20 / 24 (390 / 1024 / 1440). */
  --shell: 16px;
  --gutter: 16px;
  /* Vertical rhythm: two section paddings and one steps reserve. */
  --section: clamp(4.5rem, 2.829rem + 6.857vw, 9rem);          /* L: 72 -> 144 */
  --section-m: clamp(3.5rem, 2.571rem + 3.81vw, 6rem);         /* M: 56 -> 96 */
  --steps-h: clamp(4rem, 2.514rem + 6.095vw, 8rem);            /* 64 -> 128 */
  --sp-label: clamp(20px, 1.4rem + .5vw, 32px);                /* label row -> heading */
  --sp-head: clamp(48px, 2.5rem + 2.3vw, 80px);                /* heading block -> content */
  --header-h: 76px;
}
@media (min-width: 600px) { :root { --shell: 40px; --gutter: 20px; } }
@media (min-width: 1280px) { :root { --shell: 64px; --gutter: 24px; } }

/* Grounds. A section declares its ground; every colour inside reads roles.
   --dim is the second tone of a two-tone heading: at least 3:1 on its ground (smoke 3.9 / 3.4, steel 6.4). */
[data-ground="white"] { --bg: var(--white); --ink: var(--deep); --text: var(--navy); --muted: var(--slate); --dimtone: var(--smoke); --rule: var(--cloud); --panel: var(--light); }
[data-ground="light"] { --bg: var(--light); --ink: var(--deep); --text: var(--navy); --muted: var(--slate); --dimtone: var(--smoke); --rule: var(--silver); --panel: var(--white); }
[data-ground="deep"]  { --bg: var(--deep);  --ink: var(--light); --text: var(--light); --muted: var(--serene); --dimtone: var(--steel); --rule: var(--stone); --panel: var(--navy); }
[data-ground="navy"]  { --bg: var(--navy);  --ink: var(--light); --text: var(--light); --muted: var(--serene); --dimtone: var(--steel); --rule: var(--stone); --panel: var(--deep); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--white); color: var(--navy);
  font-family: var(--f); font-size: var(--body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
[data-ground] { background: var(--bg); color: var(--text); }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--ink, var(--deep)); font-weight: 700; }
h1, h2, h3, h4, h5, h6, figcaption, caption, blockquote { text-wrap: balance; }
p, li, td, th { text-wrap: pretty; }
p { margin: 0; }
a { color: inherit; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; }
:focus-visible { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--diamond); color: var(--deep); padding: 10px 16px; font-weight: 600; transition: top var(--t) var(--ease); }
.skip:focus { top: 12px; }

/* HubSpot drag-and-drop wrappers carry no spacing of their own. */
.dnd-section, .dnd-column, .dnd-row, .dnd-module, .widget-span, .row-fluid-wrapper { padding: 0 !important; margin: 0 !important; }
.row-fluid { width: 100%; max-width: none !important; }
.row-fluid [class*="span"] { float: none; width: 100%; margin: 0; min-height: 0; }

/* Layout */
.shell { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--shell); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.section { position: relative; padding-block: var(--section); }
.section--tight { padding-block: var(--section-m); }
.section--flush-top { padding-top: 0; }
@media (max-width: 960px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Type */
.eyebrow { font-size: var(--fs-label); line-height: 1.2; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0; }
.caps { font-size: clamp(1rem, .95rem + .25vw, 1.125rem); font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.6; color: var(--muted); max-width: 46ch; } /* body copy: never uppercase; uppercase is for labels of 2-4 words only */
.t-display { font-size: var(--display); line-height: .96; letter-spacing: -.035em; font-weight: 700; }
.t-hero { font-size: var(--fs-hero); line-height: .95; letter-spacing: -.04em; font-weight: 700; }
.t-mega { font-size: var(--mega); line-height: .9; letter-spacing: -.045em; font-weight: 500; }
.t-h1 { font-size: var(--h1); line-height: 1.04; letter-spacing: -.028em; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -.028em; }
.t-h3 { font-size: var(--fs-h3); line-height: 1.15; letter-spacing: -.012em; }
.t-statement { font-size: var(--fs-statement); line-height: 1.02; letter-spacing: -.03em; font-weight: 500; color: var(--ink); }
.t-lead { font-size: var(--fs-lead); line-height: 1.45; }
.t-num { font-size: var(--fs-numeral); line-height: .8; letter-spacing: -.06em; font-weight: 700; font-variant-numeric: tabular-nums; }
.t-muted { color: var(--muted); }
.dim { color: var(--muted); }
.dim { color: var(--dimtone, var(--muted)); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: var(--h3); margin-top: 2.2em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.8em; }
.prose a:not(.btn):not(.link):not(.cta-guide-cover):not(.chip) { color: var(--ink); text-decoration: underline; text-decoration-color: var(--diamond); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose img { margin-block: 1.5em; }
.prose blockquote { margin: 2em 0; padding-left: 24px; border-left: 3px solid var(--ink); font-size: var(--h3); line-height: 1.3; font-weight: 500; color: var(--ink); }

/* Buttons: round pills only */
.btn {
  display: inline-flex; align-items: center; gap: .6em; border-radius: 999px;
  padding: .9em 1.6em; font-size: var(--small); font-weight: 500; line-height: 1.1;
  text-decoration: none; border: 1.5px solid transparent; white-space: nowrap; cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease);
}
.btn--primary { background: var(--ink); color: var(--bg); }
.btn--primary:hover { background: var(--diamond); color: var(--deep); }
.btn--line { border-color: currentColor; color: var(--ink); }
.btn--line:hover { background: var(--diamond); border-color: var(--diamond); color: var(--deep); }
.btn:focus-visible { border-color: var(--diamond); }
.btn .ico { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.btn:hover .ico--down { transform: translateY(3px); }
.btn:hover .ico--right { transform: translateX(3px); }
.btn--sm { padding: .7em 1.25em; font-size: 14px; }
.link {
  color: var(--ink); text-decoration: none; font-weight: 500;
  background-image: linear-gradient(var(--diamond), var(--diamond));
  background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 100%;
  padding-bottom: 3px; transition: background-size var(--t) var(--ease);
}
.link:hover, .link:focus-visible { background-size: 100% 3px; }
.bracket::before { content: "[ "; } .bracket::after { content: " ]"; }

/* Square icon tile (the OCI arrow square) */
.tile-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; background: var(--panel); color: var(--ink); transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.tile-ico svg { width: 22px; height: 22px; }

/* Forms: fields are a line, not a box */
.field { position: relative; display: grid; gap: 6px; }
.field label, .hs-form label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.input, .hs-form input[type="text"], .hs-form input[type="email"], .hs-form input[type="tel"], .hs-form input[type="url"], .hs-form select, .hs-form textarea {
  width: 100%; font: inherit; font-size: 1.125rem; color: var(--ink); background: transparent;
  border: 0; border-bottom: 1.5px solid var(--rule); border-radius: 0; padding: 12px 0 10px;
  transition: border-color var(--t) var(--ease); -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--muted); opacity: .8; }
.input:hover { border-bottom-color: var(--ink); }
.input:focus, .hs-form input:focus, .hs-form textarea:focus, .hs-form select:focus { outline: none; border-bottom-color: var(--diamond); }
textarea.input, .hs-form textarea { min-height: 96px; resize: vertical; }
.input[aria-invalid="true"] { border-bottom-color: var(--diamond); }
.field .hint { font-size: 13px; color: var(--muted); }
.field--check { display: flex; align-items: flex-start; gap: 10px; }
.field--check input { margin-top: 3px; flex: none; }
.field--check label { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); }
.form-error { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink); border-left: 4px solid var(--diamond); padding: 6px 0 6px 12px; }
.inline-form { display: flex; align-items: end; gap: 16px; }
.inline-form .field { flex: 1; min-width: 0; }
.submit-line {
  flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 12px 0 10px;
  border-bottom: 1.5px solid var(--ink); font-weight: 600; font-size: var(--small); color: var(--ink);
  transition: border-color var(--t) var(--ease), gap var(--t) var(--ease); cursor: pointer;
}
.submit-line svg { width: 16px; height: 16px; }
.submit-line:hover, .submit-line:focus-visible { border-bottom-color: var(--diamond); gap: 14px; }
.form-done { display: none; }
.is-done > .form-done { display: block; }
.is-done > :not(.form-done) { display: none !important; }
.hs-form fieldset { max-width: none !important; }
.hs-form .hs-form-field { margin-bottom: 20px; }
.hs-form .hs-error-msgs { list-style: none; font-size: 13px; color: var(--muted); }
.hs-form input[type="submit"] { border-radius: 999px; padding: .9em 1.6em; background: var(--ink); color: var(--bg); border: 0; font: inherit; font-weight: 500; cursor: pointer; }

/* ---------- Header + mega menu ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 60; height: var(--header-h); color: var(--hdr-ink); transition: background var(--t) var(--ease), color var(--t) var(--ease), transform 400ms var(--ease); --hdr-ink: var(--light); --hdr-on: var(--deep); }
.site-header[data-over="white"], .site-header[data-over="light"], .site-header.is-open { --hdr-ink: var(--deep); --hdr-on: var(--white); }
.site-header.is-scrolled[data-over="white"] { background: var(--white); }
.site-header.is-scrolled[data-over="light"] { background: var(--light); }
.site-header.is-scrolled[data-over="deep"], .site-header.is-scrolled[data-over="navy"] { background: var(--deep); }
.site-header.is-open { background: var(--white); transform: none; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 100%; }
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; flex: none; }
.lockup .mark { width: 32px; height: 32px; }
.lockup .word { font-weight: 500; letter-spacing: -.01em; font-size: 22px; line-height: 1; }
.nav-primary { display: flex; align-items: center; gap: 2px; height: 100%; list-style: none; }
.nav-primary > li { height: 100%; display: flex; align-items: center; }
.nav-top { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; font-size: 15px; font-weight: 500; text-decoration: none; position: relative; }
.nav-top::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; background: var(--diamond); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--ease); }
.nav-top:hover::after, .nav-top[aria-expanded="true"]::after, .nav-top[aria-current="page"]::after { transform: scaleX(1); }
.nav-top .chev { width: 12px; height: 12px; transition: transform var(--t) var(--ease); }
.nav-top[aria-expanded="true"] .chev { transform: rotate(180deg); }
.hdr-actions { display: flex; align-items: center; gap: 10px; }
.site-header .btn--primary { background: var(--hdr-ink); color: var(--hdr-on); }
.site-header .btn--primary:hover { background: var(--diamond); color: var(--deep); }
.sq-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; min-width: 44px; padding: 0 14px; border: 1.5px solid currentColor; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
.sq-btn:hover, .sq-btn:focus-visible { background: var(--diamond); border-color: var(--diamond); color: var(--deep); }
.sq-btn svg { width: 18px; height: 18px; }
.menu-toggle { display: none; }
.menu-toggle .bars { display: grid; gap: 4px; width: 16px; }
.menu-toggle .bars::before, .menu-toggle .bars::after { content: ""; height: 1.5px; background: currentColor; transition: transform var(--t) var(--ease); }
.is-open .menu-toggle .bars::before { transform: translateY(2.75px) rotate(45deg); }
.is-open .menu-toggle .bars::after { transform: translateY(-2.75px) rotate(-45deg); }

.mega { position: fixed; left: 0; right: 0; top: var(--header-h); z-index: 59; max-height: calc(100vh - var(--header-h)); overflow-y: auto; background: var(--white); color: var(--navy); border-top: 1px solid var(--light); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 420ms var(--ease-out), visibility 0s 420ms; --ink: var(--deep); --muted: var(--slate); }
.mega.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 420ms var(--ease-out); }
.mega-panel { display: none; }
.mega-panel.is-active { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding-block: 40px 48px; }
.mega-panel.is-active > * { animation: mega-in 420ms var(--ease-out) both; }
.mega-panel.is-active > :nth-child(2) { animation-delay: 60ms; } .mega-panel.is-active > :nth-child(3) { animation-delay: 120ms; }
@keyframes mega-in { from { opacity: 0; } }
.mega-intro { grid-column: 1 / span 2; padding-right: 24px; border-right: 1px solid var(--light); }
.mega-intro .t-h3 { margin-top: 12px; }
.mega-intro p { margin-top: 12px; font-size: var(--small); color: var(--slate); }
.mega-intro .link { display: inline-block; margin-top: 20px; font-size: var(--small); }
.mega-cols { grid-column: 3 / span 7; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px var(--gutter); align-items: start; }
.mega-col h3 { font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--slate); margin-bottom: 14px; }
.mega-col ul { list-style: none; display: grid; gap: 2px; }
.mega-col a { display: block; padding: 7px 0; text-decoration: none; }
.mega-col a .l { font-weight: 600; color: var(--deep); background-image: linear-gradient(var(--diamond), var(--diamond)); background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--t) var(--ease); }
.mega-col a:hover .l, .mega-col a:focus-visible .l { background-size: 100% 3px; }
.mega-col a .b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 14px; color: var(--slate); line-height: 1.45; margin-top: 2px; }
.mega-feature { grid-column: 10 / span 3; background: var(--deep); color: var(--light); padding: 24px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; position: relative; overflow: hidden; min-height: 260px; align-self: start; }
.mega-feature .eyebrow { color: var(--serene); position: relative; }
.mega-feature h3 { color: var(--light); font-size: 1.375rem; line-height: 1.2; position: relative; }
.mega-feature p { font-size: 14px; color: var(--serene); position: relative; }
.mega-feature .go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; position: relative; }
.mega-feature .go svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.mega-feature:hover .go svg { transform: translateX(4px); }
.mega-feature .ray { position: absolute; right: -70px; bottom: -70px; width: 220px; height: 220px; color: var(--stone); transition: transform 1200ms var(--ease-out); }
.mega-feature:hover .ray { transform: rotate(67.5deg); }
.mega-scrim { position: fixed; inset: 0; z-index: 58; background: rgba(10,20,27,.4); opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility 0s var(--t); }
.mega-scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--t) var(--ease); }

.mnav { position: fixed; inset: var(--header-h) 0 0; z-index: 59; background: var(--white); overflow: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 420ms var(--ease-out), visibility 0s 420ms; --ink: var(--deep); --muted: var(--slate); }
.mnav.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 420ms var(--ease-out); }
.mnav > .shell { padding-block: 8px 40px; }
.mnav-item { border-bottom: 1px solid var(--light); }
.mnav-item > button, .mnav-item > a { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 1.625rem; font-weight: 700; letter-spacing: -.02em; color: var(--deep); text-decoration: none; text-align: left; }
.mnav-item > button svg { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.mnav-item > button[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav-sub { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t) var(--ease); }
.mnav-sub > div { overflow: hidden; }
.mnav-item.is-open .mnav-sub { grid-template-rows: 1fr; }
.mnav-sub ul { list-style: none; padding-bottom: 16px; display: grid; gap: 2px; }
.mnav-sub a { display: block; padding: 8px 0; font-size: 1.0625rem; font-weight: 500; color: var(--navy); text-decoration: none; }
.mnav-foot { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 1100px) {
  .nav-primary, .hdr-actions .btn, .hdr-actions .tool-btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .mega, .mega-scrim { display: none; }
}
@media (min-width: 1101px) { .mnav { display: none; } }

/* ---------- Section transitions ---------- */
/* Steps: blocks of the next ground climb into the section as it scrolls away. */
.tx-steps { position: absolute; left: 0; right: 0; bottom: -1px; height: var(--steps-h); pointer-events: none; z-index: 1; }
.tx-steps > i { position: absolute; bottom: -1px; display: block; background: var(--to, var(--light)); height: calc(var(--h) * var(--p, 1)); will-change: height; }
.tx-steps[data-from="left"] > i { left: 0; }
.tx-steps[data-from="right"] > i { right: 0; }
.tx-steps > i:nth-child(1) { width: calc(var(--shell) + (min(100vw, 1440px) - 2 * var(--shell) - 11 * var(--gutter)) / 12); --h: 100%; }
.tx-steps > i:nth-child(2) { width: 24%; --h: 70%; }
.tx-steps > i:nth-child(3) { width: 50%; --h: 42%; }
.tx-steps > i:nth-child(4) { width: 76%; --h: 16%; }
.tx-steps[data-to="white"] { --to: var(--white); }
.tx-steps[data-to="light"] { --to: var(--light); }
.tx-steps[data-to="deep"]  { --to: var(--deep); }
.tx-steps[data-to="navy"]  { --to: var(--navy); }
.has-steps { padding-bottom: calc(var(--section-m) + var(--steps-h)); }

/* ---------- The arrow: one drawing, used everywhere ----------
   Buttons and text links draw it themselves; standalone arrows include partials/arrow.html.
   Right = go. Up-right (arrow--ne) = open a card. Down (arrow--down) = download. Chevrons are only for disclosure (menus, accordions). */
:root { --arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E"); }
.arrow { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.12em; }
.arrow-wrap { display: inline-flex; line-height: 0; transition: transform var(--t) var(--ease); }
.arrow--ne { transform: rotate(-45deg); }
.arrow--down { transform: rotate(90deg); }
.btn::after, .link::after { content: ""; flex: none; display: inline-block; width: .9em; height: .9em; background-color: currentColor; -webkit-mask: var(--arrow-mask) center / contain no-repeat; mask: var(--arrow-mask) center / contain no-repeat; transition: transform var(--t) var(--ease); }
.link::after { margin-left: .45em; vertical-align: -.08em; }
.btn:hover::after, .btn:focus-visible::after, .link:hover::after, .link:focus-visible::after { transform: translateX(3px); }
.btn--down::after { transform: rotate(90deg); }
.btn--down:hover::after { transform: rotate(90deg) translateX(3px); }
.no-arrow::after, .site-footer .ftr-col .link::after, .site-footer .legal .link::after, .post-share .link::after, .defblock .link::after { display: none; }

/* ---------- Motion primitives ---------- */
/* Assemble in place: settles where it stands, never floats up. */
.js [data-assemble] { opacity: .12; transition: opacity 640ms var(--ease); transition-delay: var(--d, 0ms); }
.js [data-assemble].is-in { opacity: 1; }
/* Word-by-word statement fill, scroll-linked */
[data-fill] .w { transition: color 180ms linear; }
.js [data-fill] .w { color: var(--fill-off, var(--silver)); }
[data-ground="deep"] [data-fill], [data-ground="navy"] [data-fill] { --fill-off: var(--stone); }
.js [data-fill] .w.on { color: var(--ink); }
/* Clip reveal for plates */
.js [data-plate] { clip-path: inset(0 0 100% 0); transition: clip-path 1000ms var(--ease-out); }
.js [data-plate].is-in { clip-path: inset(0 0 0 0); }
/* Marquee */
.marquee { overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee var(--dur, 40s) linear infinite; }
.marquee[data-reverse] .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .marquee.is-paused .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(var(--marquee-shift, -50%)); } }

/* ---------- Odometer counters ---------- */
/* Each digit sits in a window 1.2em tall, so large figures never clip. The script drives the
   strips; ticks (count-downs) animate each step, and leading zeros fold away instead of showing faint. */
.odo { --wh: 1.2em; display: inline-flex; align-items: flex-end; font-variant-numeric: tabular-nums; line-height: var(--wh); }
.odo .dg { display: inline-block; height: var(--wh); overflow-x: visible; overflow-y: clip; max-width: .75em; transition: max-width 420ms var(--ease), opacity 320ms var(--ease); }
.odo .dg.is-lead { max-width: 0; opacity: 0; }
.odo .dg > span { display: flex; flex-direction: column; will-change: transform; }
.odo.is-ticking .dg > span { transition: transform 240ms var(--ease-out); }
.odo .dg > span > b { display: block; height: var(--wh); line-height: var(--wh); font-weight: inherit; text-align: center; }
.odo .fx { display: inline-block; height: var(--wh); line-height: var(--wh); }
/* A word before the number ("About") is set small at the top, so it qualifies the figure without widening it */
.odo:has(.fx-word) { vertical-align: top; }
.odo .fx-word { align-self: flex-start; height: auto; font-size: .26em; line-height: 1.1; font-weight: 600; letter-spacing: 0; margin: .2em .35em 0 0; }
.stat-value { font-size: var(--numeral); font-weight: 700; line-height: 1.2; letter-spacing: -.04em; color: var(--ink); }

/* ---------- The full stop that lands ----------
   Every heading ending in a full stop gets it wrapped by the script; the stop blinks three times
   when the heading arrives, and keeps blinking on the page's first heading. */
.stop { color: var(--ink); }
.stop.is-live { animation: stop-blink 1.05s steps(1, end) 3; }
.stop.is-live.is-forever { animation-iteration-count: infinite; }
@keyframes stop-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

/* ---------- Charts ---------- */
.chart { margin: 0; }
.chart-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; margin-bottom: 24px; }
.chart-head h3 { font-size: var(--h3); }
.chart-head p { margin-top: 8px; font-size: var(--small); color: var(--muted); max-width: 56ch; }
.chart-tabs { display: inline-flex; border: 1px solid var(--rule); }
.chart-tabs button { padding: 8px 14px; font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.chart-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.chart-tabs button:hover:not([aria-pressed="true"]), .chart-tabs button:focus-visible { background: var(--diamond); color: var(--deep); }
.chart-plot { position: relative; }
.chart-plot svg { width: 100%; height: auto; overflow: visible; }
.chart-plot .grid-line { display: none; }
.chart-plot .axis-text { fill: var(--muted); font: 500 12px var(--f); }
.chart-plot .val-text { fill: var(--ink); font: 700 13px var(--f); }
.chart-plot .baseline { stroke: var(--ink); stroke-width: 1.5; }
.chart-plot .bar { fill: var(--s1-soft); transition: fill 700ms var(--ease), opacity var(--t) var(--ease); }
.chart-plot .bar.is-key { fill: var(--s1); }
.chart-plot .bar.s2 { fill: var(--s2); }
.chart-plot .bar.rising { fill: var(--rise); }
.chart-plot .bar-hit { fill: transparent; cursor: pointer; }
.chart-plot.has-hover .bar-g:not(.is-hover) .bar { opacity: .4; }
.chart-plot .line { fill: none; stroke: var(--s1); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-plot .line.s2 { stroke: var(--s2); stroke-dasharray: 6 5; }
.chart-plot .area { fill: var(--s1); opacity: .1; }
.chart-plot .dot { fill: var(--s1); stroke: var(--bg); stroke-width: 2; }
.chart-plot circle.dot { r: 4; }
.chart-plot .dot.s2 { fill: var(--s2); }
.chart-plot .xhair { stroke: var(--ink); stroke-width: 1; opacity: 0; transition: opacity 160ms var(--ease); }
.chart-plot.has-hover .xhair { opacity: .35; }
.chart-plot .scan { stroke: var(--ink); stroke-width: 1; opacity: 0; }
[data-ground="white"] .chart, [data-ground="light"] .chart { --s1: var(--deep); --s1-soft: var(--slate); --s2: var(--steel); --rise: var(--silver); }
[data-ground="deep"] .chart, [data-ground="navy"] .chart { --s1: var(--light); --s1-soft: var(--serene); --s2: var(--steel); --rise: var(--stone); }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--deep); color: var(--light); padding: 10px 12px; font-size: 13px; line-height: 1.4; min-width: 120px; transform: translate(-50%, calc(-100% - 12px)); opacity: 0; transition: opacity 160ms var(--ease); white-space: nowrap; }
[data-ground="deep"] .chart-tip, [data-ground="navy"] .chart-tip { background: var(--light); color: var(--deep); }
.chart-tip.is-on { opacity: 1; }
.chart-tip b { display: block; font-size: 1.125rem; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 16px; font-size: 14px; color: var(--muted); list-style: none; }
.chart-legend li { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend i { width: 14px; height: 14px; background: var(--s1); display: inline-block; }
.chart-legend i.s2 { background: var(--s2); }
.chart-legend i.line1 { height: 2px; }
.chart-legend i.line2 { height: 2px; background: repeating-linear-gradient(90deg, var(--s2) 0 6px, transparent 6px 11px); }
.chart-table { width: 100%; border-collapse: collapse; font-size: var(--small); }
.chart-table caption { text-align: left; font-weight: 700; color: var(--ink); padding-bottom: 12px; }
.chart-table th, .chart-table td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); }
.chart-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.js .chart[data-view="chart"] .chart-table-wrap { display: none; }
.js .chart[data-view="table"] .chart-plot, .js .chart[data-view="table"] .chart-legend { display: none; }
.chart-source { margin-top: 16px; font-size: 13px; color: var(--muted); }

.chart-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 20px; font-size: 14px; }
.chart-foot .chart-source { margin: 0; }
.m-chart--inline { padding: clamp(20px, 3vw, 32px); margin-block: 2em; }

/* ---------- Footer giant mark ---------- */
.giant { display: flex; align-items: center; gap: clamp(12px, 2vw, 32px); color: var(--light); overflow: hidden; }
.giant svg { width: clamp(56px, 13vw, 200px); height: clamp(56px, 13vw, 200px); flex: none; }
.giant span { font-size: clamp(4rem, 1rem + 16vw, 17rem); font-weight: 500; letter-spacing: -.03em; line-height: .8; }

/* =========================================================
   Blog and call-to-action system (shared by templates and modules)
   ========================================================= */
.chip { display: inline-flex; align-items: center; border-radius: 999px; padding: .55em 1.1em; font-size: 14px; font-weight: 500; text-decoration: none; border: 1px solid var(--rule); color: var(--ink); transition: background var(--t) var(--ease), color var(--t) var(--ease), border-color var(--t) var(--ease); }
.chip:hover, .chip:focus-visible { background: var(--diamond); border-color: var(--diamond); color: var(--deep); }
.chip.is-on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
span.chip.is-on { pointer-events: none; } /* the topic you are on is a state, not a link */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }

/* Definition: one home, many pages */
.defblock { margin: 2em 0; padding: 28px 32px; background: var(--panel, var(--light)); }
.post-body .defblock { background: var(--light); }
.defblock .defblock-lbl { margin: 0 0 10px; }
.defblock .defblock-term { font-size: var(--h3); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--ink); margin: 0; }
.defblock .defblock-term a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--diamond), var(--diamond)); background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size var(--t) var(--ease); }
.defblock .defblock-term a:hover, .defblock .defblock-term a:focus-visible { background-size: 100% 3px; }
.defblock .dot { color: var(--steel); }
.defblock .defblock-body { margin-top: 10px; font-size: 1.125rem; line-height: 1.55; color: var(--text); max-width: 62ch; }
.m-definition-col { max-width: 760px; }

/* Service band: breaks out of the article column */
.cta-svc { position: relative; overflow: hidden; margin: 3em 0; padding: clamp(28px, 4vw, 48px); display: grid; }
.post-body .cta-svc { margin-inline: 0; }
.cta-svc-mark { position: absolute; right: -90px; top: 50%; width: 320px; height: 320px; translate: 0 -50%; color: var(--stone); pointer-events: none; }
.cta-svc-mark > div { width: 100%; height: 100%; }
.cta-svc-copy { position: relative; max-width: 560px; display: grid; gap: 14px; }
.cta-svc-title { font-size: var(--h2); line-height: 1.05; letter-spacing: -.02em; font-weight: 700; color: var(--ink); margin: 0; }
.cta-svc-text { color: var(--muted); margin: 0; }
.cta-svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.cta-svc .link { color: var(--light); }

/* Tool card with a dial whose needle sweeps on arrival */
.cta-tool { display: grid; grid-template-columns: 140px 1fr; gap: 28px; align-items: center; padding: 28px 32px; margin: 2em 0; }
.cta-tool-dial { width: 140px; color: var(--ink); }
.cta-tool-dial .arc { stroke-dasharray: 100; stroke-dashoffset: 28; transition: stroke-dashoffset 1.6s var(--ease-out) .2s; }
.cta-tool-dial .needle { transform-origin: 60px 64px; transform: rotate(48deg); transition: transform 1.6s var(--ease-out) .2s; }
.js .cta-tool:not(.is-in) .cta-tool-dial .arc { stroke-dashoffset: 100; }
.js .cta-tool:not(.is-in) .cta-tool-dial .needle { transform: rotate(-80deg); }
.cta-tool-copy { display: grid; gap: 10px; justify-items: start; }
.cta-tool-title { font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0; }
.cta-tool-text { font-size: 15px; color: var(--muted); margin: 0; }
.cta-tool .btn { margin-top: 6px; }
@media (max-width: 600px) { .cta-tool { grid-template-columns: 1fr; } .cta-tool-dial { width: 120px; } }

/* Guide: a typeset cover, no stock art */
.cta-guide { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: center; margin: 2em 0; padding-block: 28px; }
.cta-guide-cover { position: relative; overflow: hidden; aspect-ratio: 3 / 4; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; text-decoration: none; transition: transform 600ms var(--ease-out); }
.cta-guide:hover .cta-guide-cover { transform: rotate(-2deg); }
.cta-guide-cover .cg-ray { position: absolute; right: -40%; bottom: -30%; width: 120%; aspect-ratio: 1; color: var(--stone); }
.cta-guide-cover .cg-brand { position: relative; font-size: 13px; font-weight: 500; color: var(--light); }
.cta-guide-cover .cg-title { position: relative; font-size: 1.125rem; line-height: 1.1; font-weight: 700; color: var(--light); letter-spacing: -.01em; }
.cta-guide-copy { display: grid; gap: 10px; justify-items: start; }
.cta-guide-title { font-size: 1.375rem; font-weight: 700; line-height: 1.25; color: var(--ink); margin: 0; }
.cta-guide-text { font-size: 15px; color: var(--muted); margin: 0; }
@media (max-width: 600px) { .cta-guide { grid-template-columns: 120px 1fr; gap: 20px; } }
/* Guide cards in posts (asks.guide_row, asks.guide_ends): the guide's own cover image in place of the drawn cover. */
.cta-guide-cover--img { padding: 0; aspect-ratio: auto; display: block; }
.cta-guide-cover--img img { display: block; width: 100%; height: auto; }
.post-body .cta-guide:has(.cta-guide-cover--img) { padding: 28px; background: var(--light); }
.guide-ends { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gutter); }
.guide-end { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 20px; align-items: center; padding: 22px; background: var(--light); color: var(--ink); text-decoration: none; transition: background var(--t) var(--ease); }
.guide-end:hover, .guide-end:focus-visible { background: var(--diamond); outline: none; }
.guide-end img { display: block; width: 100%; height: auto; }
.guide-end-copy { display: grid; gap: 6px; justify-items: start; }
.guide-end-t { font-size: 1.125rem; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.post-body .guide-end .link { color: var(--ink); }
.cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); align-items: stretch; }
.cta-pair > * { margin: 0; }
.m-cluster-cta .cta-pair .cta-guide { padding: 28px 32px; border: 0; background: var(--panel); }
@media (max-width: 960px) { .cta-pair { grid-template-columns: 1fr; } }

/* Article */
.post-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 70; pointer-events: none; }
.post-progress i { display: block; height: 100%; background: var(--diamond); transform: scaleX(0); transform-origin: left; }
.post-hero { padding-top: calc(var(--header-h) + clamp(56px, 8vw, 112px)); padding-bottom: clamp(24px, 3vw, 40px); }
.post-hero .post-title { max-width: 20ch; margin-top: 20px; }
.post-hero .post-dek { max-width: 52ch; margin-top: 20px; color: var(--muted); }
.post-meta { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 32px; font-size: 15px; color: var(--muted); }
.post-share { display: inline-flex; gap: 20px; }
.post-share .link { font-size: 15px; }
.post-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding-block: clamp(48px, 6vw, 88px) var(--section); }
.post-rail { grid-column: 1 / span 3; }
.post-rail-inner { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 32px; }
.post-toc ol { list-style: none; display: grid; gap: 2px; margin-top: 12px; border-left: 1px solid var(--rule); }
.post-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--muted); text-decoration: none; transition: color var(--t) var(--ease), border-color var(--t) var(--ease); }
.post-toc a:hover, .post-toc a.is-current { color: var(--ink); border-left-color: var(--ink); }
.rail-tool { display: grid; gap: 6px; padding: 20px; background: var(--deep); color: var(--light); text-decoration: none; transition: background var(--t) var(--ease); }
.rail-tool .eyebrow { color: var(--serene); }
.rail-tool-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; }
.rail-tool-go { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.rail-tool-go svg { width: 14px; height: 14px; transition: transform var(--t) var(--ease); }
.rail-tool:hover { background: var(--navy); }
.rail-tool:hover .rail-tool-go svg { transform: translateX(4px); }
.rail-news .inline-form { margin-top: 4px; }
.rail-news .input { font-size: 15px; }
.post-body { grid-column: 4 / span 7; max-width: 720px; font-size: 1.1875rem; line-height: 1.7; }
.post-body > p:first-child { font-size: 1.375rem; line-height: 1.55; color: var(--ink); }
.post-body h2 { scroll-margin-top: calc(var(--header-h) + 24px); }
.post-asks { margin-top: 3em; }
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2em; }
@media (max-width: 1100px) { .post-rail { display: none; } .post-body { grid-column: 1 / -1; margin-inline: auto; } }

.related-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 40px; }
.post-news-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px var(--gutter); align-items: end; }
.post-news-row > div:first-child { grid-column: 1 / span 6; display: grid; gap: 12px; }
.post-news-row > div:nth-child(2) { grid-column: 8 / span 5; }
.post-news-row > .form-done { grid-column: 8 / span 5; }
.post-news-privacy { margin-top: 12px; font-size: 13px; color: var(--muted); }
.post-news.is-done .post-news-row > div:nth-child(2) { display: none; }
.post-news.is-done .form-done { display: block; }
@media (max-width: 960px) { .post-news-row > div:first-child, .post-news-row > div:nth-child(2), .post-news-row > .form-done { grid-column: 1 / -1; } }

/* News cards: the OCI ruled sheet with the invert hover */
.news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.news-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; min-height: 380px; padding: 32px 40px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-decoration: none; color: var(--ink); transition: background var(--t) var(--ease), color var(--t) var(--ease); }
.news-card .nc-date { font-size: 1.5rem; font-weight: 500; letter-spacing: -.01em; }
.news-card .nc-foot { display: grid; gap: 14px; }
.news-card .nc-title { font-size: clamp(1.375rem, 1.1rem + .8vw, 1.875rem); font-weight: 500; line-height: 1.15; letter-spacing: -.015em; max-width: 22ch; }
.news-card .nc-dek { font-size: 15px; color: var(--muted); max-width: 46ch; transition: color var(--t) var(--ease); }
.news-card .nc-arrow { position: absolute; top: 0; right: 0; width: 96px; height: 96px; background: var(--light); color: var(--deep); clip-path: inset(0 0 100% 100%); transition: clip-path 420ms var(--ease-out); }
.news-card .nc-arrow svg { width: 32px; height: 32px; }
.news-card:hover, .news-card:focus-visible { background: var(--deep); color: var(--light); }
.news-card:hover .eyebrow, .news-card:focus-visible .eyebrow, .news-card:hover .nc-dek, .news-card:focus-visible .nc-dek { color: var(--serene); }
.news-card:hover .nc-arrow, .news-card:focus-visible .nc-arrow { clip-path: inset(0 0 0 0); }
@media (max-width: 760px) { .news-grid { grid-template-columns: 1fr; } .news-card { min-height: 260px; padding: 28px 24px; } }

/* Blog listing */
.blog-hero { overflow: hidden; padding-top: calc(var(--header-h) + clamp(64px, 9vw, 128px)); }
.blog-hero-rays { position: absolute; right: -20%; top: 30%; width: min(900px, 100vw); aspect-ratio: 1; translate: 0 -50%; color: var(--stone); pointer-events: none; }
.blog-hero-rays > div { width: 100%; height: 100%; }
.blog-hero .shell { position: relative; z-index: 2; }
.blog-hero-title { margin-top: 24px; max-width: 14ch; }
.blog-hero .chip { color: var(--light); border-color: var(--stone); }
.blog-hero .chip.is-on { background: var(--light); color: var(--deep); border-color: var(--light); }
.blog-hero .chip:hover { background: var(--diamond); color: var(--deep); border-color: var(--diamond); }
.feature-post { position: relative; overflow: hidden; display: grid; gap: 18px; padding: clamp(32px, 5vw, 64px); margin-bottom: var(--gutter); text-decoration: none; min-height: 420px; align-content: end; }
.feature-post .fp-ray { position: absolute; right: -8%; top: -30%; width: 60%; aspect-ratio: 1; color: var(--stone); transition: transform 1200ms var(--ease-out); }
.feature-post:hover .fp-ray { transform: rotate(45deg); }
.feature-post > :not(.fp-ray) { position: relative; }
.feature-post .fp-title { font-size: var(--h1); line-height: 1.02; letter-spacing: -.025em; font-weight: 700; color: var(--light); max-width: 18ch; }
.feature-post .fp-dek { color: var(--serene); max-width: 56ch; }
.feature-post .fp-go { display: inline-flex; gap: 10px; align-items: center; font-weight: 600; color: var(--light); }
.feature-post .fp-go svg { width: 16px; height: 16px; transition: transform var(--t) var(--ease); }
.feature-post:hover .fp-go svg { transform: translateX(4px); }

/* Blog art: the featured image is a titled 1200x630 share PNG with its type 72px from the edge, so it is never cropped.
   The box holds the exact ratio; contain is the fallback if a file is ever a different size. */
.blog-art { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: contain; }
.post-body img { max-width: 100%; height: auto; }
.feature-post .fp-copy { display: grid; gap: 18px; }
.feature-post--art { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: end; min-height: 0; }
.feature-post--art .fp-ray { right: auto; left: -12%; }
.feature-post--art .fp-copy { grid-column: 1; grid-row: 1; }
.feature-post--art .fp-art { grid-column: 2; grid-row: 1; }
@media (max-width: 900px) { .feature-post--art { grid-template-columns: minmax(0, 1fr); } .feature-post--art .fp-copy, .feature-post--art .fp-art { grid-column: 1; grid-row: auto; } }
.news-card--art { min-height: 0; padding-top: 0; gap: 28px; }
.news-card .nc-art { margin-inline: -40px; }
@media (max-width: 760px) { .news-card .nc-art { margin-inline: -24px; } }
.blog-empty { padding-block: 24px; color: var(--muted); }
.post-hero-grid.has-art { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px var(--gutter); align-items: end; }
.post-hero-grid.has-art .post-hero-copy { grid-column: 1 / span 6; }
.post-hero-grid.has-art .post-hero-art { grid-column: 7 / span 6; margin: 0; }
@media (max-width: 960px) { .post-hero-grid.has-art .post-hero-copy, .post-hero-grid.has-art .post-hero-art { grid-column: 1 / -1; } }
.pager { display: flex; justify-content: center; gap: 12px; margin-top: 48px; }

/* Glossary */
.glossary-list { max-width: 860px; }
.glossary-list .defblock { margin: 0 0 20px; scroll-margin-top: calc(var(--header-h) + 24px); }
.glossary-list .defblock:target { border-left-color: var(--diamond); }

/* 404 */
.nf { overflow: hidden; min-height: 80vh; padding-top: calc(var(--header-h) + clamp(64px, 10vw, 160px)); }
.nf-rays { position: absolute; right: -25%; bottom: -40%; width: min(1000px, 110vw); aspect-ratio: 1; color: var(--stone); pointer-events: none; }
.nf-rays > div { width: 100%; height: 100%; }
.nf .shell { position: relative; }
.nf .t-display { margin-top: 20px; max-width: 16ch; }
.nf-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js [data-assemble] { opacity: 1; }
  .js [data-plate] { clip-path: none; }
  .js [data-fill] .w { color: var(--ink); }
  .tx-steps > i { height: var(--h); }
  .marquee-track { animation: none; flex-wrap: wrap; width: auto; }
}

/* ---------- One question per screen (free tools and calculators) ----------
   Shared by grader.module and formula-calc.module. Square answer blocks, pills only for chips and buttons,
   diamond for the selected answer, the progress fill and focus. Fields are a line. */
.ts-top { display: grid; gap: 12px; margin-bottom: 28px; }
.ts-count { font-size: 14px; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.ts-bar { height: 8px; background: var(--cloud); }
.ts-bar i { display: block; height: 100%; width: 0; background: var(--diamond); transition: width var(--t) var(--ease); }
.ts-lead { margin-bottom: 20px; font-size: 14px; color: var(--muted); max-width: 52ch; }
.ts { display: grid; gap: 16px; align-content: start; }
.ts[hidden] { display: none; }
.ts.is-in > * { animation: ts-in 320ms var(--ease) both; }
@keyframes ts-in { from { opacity: 0; } }
.ts-q { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); line-height: 1.18; letter-spacing: -.015em; font-weight: 700; color: var(--ink); max-width: 30ch; }
.ts-q:focus { outline: none; }
.ts-hint { font-size: 14px; color: var(--muted); max-width: 52ch; }
.ts-note { font-size: 14px; font-weight: 600; color: var(--deep); background: var(--diamond); padding: 12px 16px; max-width: 52ch; }
.ts-opts { display: grid; gap: 10px; margin-top: 4px; }
.tq-opt { display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: center; text-align: left; width: 100%; min-height: 64px; padding: 14px 18px; background: var(--panel); color: var(--text); font-size: 1rem; line-height: 1.4; border-left: 4px solid transparent; transition: background var(--t) var(--ease), border-color var(--t) var(--ease); }
.tq-opt .n { display: grid; place-items: center; width: 32px; height: 32px; background: var(--bg); color: var(--ink); font-size: 14px; font-weight: 700; }
.tq-opt:hover { background: var(--cloud); }
.tq-opt:focus-visible { background: var(--diamond); color: var(--deep); outline: 2px solid var(--ink); outline-offset: 2px; }
.tq-opt[aria-checked="true"] { background: var(--diamond); color: var(--deep); border-left-color: var(--ink); }
.tq-opt[aria-checked="true"] .n { background: var(--ink); color: var(--bg); }
.ts-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ts-chips .chip { min-height: 48px; padding-inline: 1.3em; cursor: pointer; background: transparent; }
.ts-chips .chip:focus-visible { background: var(--diamond); border-color: var(--ink); }
.ts-chips .chip[aria-checked="true"] { background: var(--diamond); border-color: var(--ink); color: var(--deep); }
.ts .input { font-size: 1.375rem; font-weight: 500; }
.ts-err { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--ink); border-left: 4px solid var(--diamond); padding: 6px 0 6px 12px; }
.ts-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.ts-nav .btn { min-height: 52px; }
.ts-nav .btn:disabled { opacity: .4; cursor: not-allowed; }
.ts-nav .btn:disabled:hover { background: var(--ink); color: var(--bg); }
.ts-nav [data-ts-back][hidden] + .btn { margin-left: auto; }
.ts-back { font-size: 15px; font-weight: 600; color: var(--muted); min-height: 48px; padding: 0 4px; background-image: linear-gradient(var(--diamond), var(--diamond)); background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 85%; transition: color var(--t) var(--ease), background-size var(--t) var(--ease); }
.ts-back:hover, .ts-back:focus-visible { color: var(--ink); background-size: 100% 3px; }
.ts-keys { margin-top: 14px; font-size: 13px; color: var(--muted); }
@media (hover: none) { .ts-keys { display: none; } }
.ts-end-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.ts-range { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; margin: 18px 0 8px; border: 0; border-radius: 0; background: var(--rule); cursor: pointer; }
.ts-range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 0; background: var(--ink); }
.ts-range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 0; background: var(--ink); }
.ts-range:hover::-webkit-slider-thumb { background: var(--diamond); }
.ts-range:focus-visible::-webkit-slider-thumb { background: var(--diamond); outline: 2px solid var(--ink); }
.ts-readout { display: none; }
.ts[data-kind="number"] .input { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* =========================================================
   Section Bible primitives (preview/direction/SECTION_BIBLE.md)
   ========================================================= */
/* The section head rail: the subject label at the left margin, the section index at the right margin. */
.sec-rail { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: var(--sp-label); }
.sec-rail .eyebrow { margin: 0; }
.sec-idx { font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; color: var(--muted); font-variant-numeric: tabular-nums; }
main { counter-reset: sec; }
main .section { counter-increment: sec; }
.sec-idx::before { content: counter(sec, decimal-leading-zero); }
/* Statement hierarchy: words fill from the off tone as the reader scrolls. With a lifted phrase, the
   lifted words settle in ink and the rest settle in the dim tone, so every statement ends two-tone. */
[data-fill].has-lift .w.on { color: var(--dimtone); }
[data-fill].has-lift .w.k.on { color: var(--ink); }
/* Preview-only placeholder for a fact the founder has not supplied. Never rendered on HubSpot. */
.need { display: block; margin-top: 12px; padding: 10px 14px; border: 1.5px dashed var(--muted); color: var(--muted); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }
.need::before { content: "Preview only, missing fact: "; text-transform: none; }

/* The header's pill steps aside while a page hero with its own primary action is on screen (one action per view). */
.site-header.over-hero .hdr-actions .btn--primary { visibility: hidden; opacity: 0; }
.site-header .hdr-actions .btn--primary { transition: opacity var(--t) var(--ease), visibility 0s, background var(--t) var(--ease), color var(--t) var(--ease); }
.tt-break > .dim { display: block; }

.m-chart .chart-h { max-width: 22ch; }
.m-chart .chart-head p { font-size: var(--fs-lead); max-width: 52ch; margin-top: 16px; }
.rail-news > .eyebrow { text-transform: none; letter-spacing: 0; font-size: var(--fs-small); color: var(--ink); }
.news-card { justify-content: flex-start; }
.news-card .nc-foot { margin-top: auto; }
.blog-hero .chip { background: var(--deep); }
/* Glossary: term in the left columns, definition from column 5; rows separated by space, no boxes */
.glossary-list { max-width: none; }
.glossary-list .defblock { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); background: transparent; padding: 0; margin: 0 0 clamp(32px, 4vw, 48px); }
.glossary-list .defblock .defblock-lbl { grid-column: 1 / span 4; }
.glossary-list .defblock .defblock-term { grid-column: 1 / span 4; }
.glossary-list .defblock .defblock-body { grid-column: 5 / span 7; grid-row: 1 / span 2; margin: 0; max-width: 60ch; }
@media (max-width: 760px) { .glossary-list .defblock .defblock-term, .glossary-list .defblock .defblock-lbl, .glossary-list .defblock .defblock-body { grid-column: 1 / -1; grid-row: auto; } }
.sec-rail .sec-idx { margin-left: auto; }
/* founder ruling 12 Oct: section numbers are not shown */
.sec-idx { display: none; }

/* ---------- blog rollout: panels, not ruled cells ---------- */
.news-grid { border: 0; gap: var(--gutter); }
.news-card { border: 0; background: var(--light); min-height: 340px; }
[data-ground="light"] .news-card { background: var(--white); }
.news-card .nc-foot { gap: 12px; align-content: start; }
.news-card .nc-title { max-width: 24ch; }
.news-card .nc-dek { max-width: 60ch; }
.post-related .news-card { min-height: 0; gap: 32px; }
.post-related .news-card .nc-foot { margin-top: 0; }
.tx-steps[data-to="deep"] { --to: var(--deep); }
@media (max-width: 600px) { .nf-links { flex-direction: column; align-items: flex-start; gap: 20px; } }
/* post: the measure sits between the rail and the right margin */
@media (min-width: 1280px) { .post-body { grid-column: 5 / span 7; } }
.post-asks > * + *, .post-body > .post-tags { margin-top: var(--sp-head); }
/* glossary: term and definition share a top line; the label sits above both */
@media (min-width: 761px) {
.glossary-list .defblock .defblock-lbl { grid-row: 1; }
.glossary-list .defblock .defblock-term { grid-row: 2; align-self: start; margin: 0; }
.glossary-list .defblock .defblock-body { grid-row: 2; max-width: 68ch; grid-column: 5 / span 8; }
}
@media (max-width: 760px) { .glossary-list .defblock .defblock-term { margin-bottom: 8px; } }

.news-card .nc-date { font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; color: var(--muted); }
.news-card .nc-title { max-width: none; }
.post-body { max-width: 62ch; }
.post-toc ol, .post-toc li { border-left: 0 !important; }
@media (hover: none) { [data-ts-keys] { display: none !important; } }

/* blog round 9 */
.nowrap { white-space: nowrap; }
@media (min-width: 961px) { .blog-hero .chips { max-width: 66%; } }
.news-card .nc-foot { margin-top: 0; }
.news-card { justify-content: flex-start; }
@media (min-width: 1280px) { .post-body { grid-column: 4 / span 7; } }
.post-body { max-width: none; }
.post-body > p, .post-body > ul, .post-body > ol, .post-body > blockquote { max-width: 60ch; }
.post-body h2 { line-height: 1.15; max-width: 28ch; margin-block: 1.6em .6em; }
.post-toc a { border-left: 0 !important; padding-left: 0; margin-left: 0; }
.post-toc a.is-current { font-weight: 600; color: var(--ink); }
.post-asks { display: grid; gap: var(--sp-head); margin-top: var(--sp-head); }
.post-asks > * { margin: 0 !important; }
.post-asks .btn, .post-body .cta-tool .btn, .post-body .cta-guide .btn { background: none; border: 0; padding: 0 0 3px; border-radius: 0; height: auto; color: var(--ink); font-weight: 600; background-image: linear-gradient(var(--diamond), var(--diamond)); background-size: 0% 3px; background-repeat: no-repeat; background-position: 0 100%; }
.post-asks .btn:hover, .post-body .cta-tool .btn:hover, .post-body .cta-guide .btn:hover { background-color: transparent; background-size: 100% 3px; color: var(--ink); }
.post-related .news-card { gap: 16px; }
/* glossary: definition from the half line */
@media (min-width: 761px) {
  .glossary-list .defblock .defblock-lbl, .glossary-list .defblock .defblock-term { grid-column: 1 / span 6; }
  .glossary-list .defblock .defblock-body { grid-column: 7 / span 6; max-width: 60ch; }
}
/* stack slot: both asks are panels that differ from the light ground */
.m-cluster-cta .cta-pair > .cta-tool, .m-cluster-cta .cta-pair > .cta-guide { background: var(--light); padding: 28px 32px; margin: 0; }
.m-cluster-cta[data-ground="light"] .cta-pair > .cta-tool, .m-cluster-cta[data-ground="light"] .cta-pair > .cta-guide { background: var(--white); }

/* Touch targets on phones and tablets (mobile audit, 21 Oct 2026): every tap target at least 40px tall; desktop unchanged */
@media (pointer: coarse) {
  .field--check { align-items: center; }
  .field--check input { width: 22px; height: 22px; margin-top: 0; }
  .field--check label { padding-block: 9px; }
}

/* Newsletter line forms carry the consent tick under the line (the HubSpot form uses explicit consent) */
.inline-form--consent { flex-wrap: wrap; row-gap: 14px; }
.inline-form--consent .field--check { flex: 1 1 100%; order: 3; }

/* Lenis smooth scrolling (its recommended rules); the browser's own smooth scrolling is off while Lenis runs */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }