/* MedLicense site, design v7: the logo first, then the product, in the manner of Apple's product pages.
   White and light grey stages, large rounded tiles, semibold Schibsted Grotesk set tight, navy pill buttons and
   "Learn more" links. Gloock is kept for the wordmark alone, and the rose bar under its M is the only accent.
   Flat by rule: solid fills and hairlines only, with no gradients, glows, blur or drop shadows. */

:root {
  --bg: #FFFFFF;
  --tile: #F2F3F5;
  --tile-2: #E7E9EC;
  --sheet: #FFFFFF;
  --ink: #15181D;
  --ink-2: #3B414A;
  --muted: #6A707A;
  --line: #D9DCE1;
  --navy: #1F3B5C;
  --navy-2: #2B4C73;
  --link: #24507F;
  --dark: #0D131C;
  --dark-2: #18212D;
  --dark-line: #2A3442;
  --bone: #F2F4F7;
  --bone-2: #A5AFBC;
  --rose: #A33A55;
  --rose-lt: #E7A1B3;
  --ochre: #8F5708;
  --ochre-fill: #F3D27C;
  --blood: #B32D18;
  --blood-tint: #F9E1DB;
  /* older names still used by generated pages */
  --plaster: var(--tile);
  --graphite: var(--dark);
  --navy-3: var(--dark-2);
  --seal: var(--rose);

  --f-logo: "Gloock", "Bodoni 72", Didot, Georgia, serif;
  --f-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
  --f-display: var(--f-text);

  --r-l: 28px;
  --r-m: 18px;
  --r-s: 10px;
  --gut: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-stamp: cubic-bezier(.2, .9, .3, 1.2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.52 var(--f-text); letter-spacing: -.005em;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
::selection { background: var(--navy); color: var(--bone); }
.field-ink :focus-visible, .field-navy :focus-visible { outline-color: var(--bone); }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -.022em; margin: 0; color: inherit; text-wrap: balance; }
h3, h4 { letter-spacing: -.014em; }
p { margin: 0 0 1em; text-wrap: pretty; }
strong, b { font-weight: 600; }
code, kbd { font: 500 .88em/1.4 ui-monospace, Menlo, monospace; background: var(--tile); padding: 2px 6px; border-radius: 6px; }
.hrs span, .picker-count, .num { font-variant-numeric: tabular-nums; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--navy); color: var(--bone); padding: 10px 16px; font-weight: 600; border-radius: 980px; }
.skip:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.label { font: 500 .8rem/1.3 var(--f-text); color: var(--muted); }
.center { text-align: center; }

/* surfaces */
.band { background: var(--tile); }
.field-ink, .field-navy { background: var(--dark); color: var(--bone); }
.field-ink a, .field-navy a { color: #B9CBE3; }
.field-ink p, .field-navy p { color: var(--bone-2); }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border: 0; border-radius: 980px;
  font: 500 1.0625rem/1 var(--f-text); letter-spacing: -.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  background: var(--navy); color: #fff;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }
.btn:hover { background: var(--navy-2); color: #fff; text-decoration: none; }
.btn:active { background: var(--ink); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: .94rem; }
.btn-ghost, .btn-secondary { background: transparent; color: var(--link); border: 1px solid var(--link); }
.btn-ghost:hover, .btn-secondary:hover { background: var(--link); color: #fff; }
.field-ink .btn, .field-navy .btn { background: var(--bone); color: var(--ink); }
.field-ink .btn:hover, .field-navy .btn:hover { background: #fff; color: var(--ink); }
.textlink { font-weight: 500; color: var(--link); text-decoration: none; }
.textlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.textlink::after { content: "\00A0\203A"; font-size: 1.15em; line-height: 0; }
.field-ink .textlink, .field-navy .textlink { color: #B9CBE3; }

/* ---------- header: a quiet white bar with a hairline ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 32px; height: 56px; }
.brand { display: inline-flex; align-items: baseline; color: var(--ink); text-decoration: none; flex: none; }
.brand:hover { color: var(--ink); text-decoration: none; }
.brand-word { font: 400 1.4rem/1 var(--f-logo); letter-spacing: -.01em; white-space: nowrap; }
/* the logo M is the supplied drawing, sized so its strokes span the cap height of edLicense and stand on the same baseline.
   Its rose bar is the line that grows: script lifts it off and lets it lead the reader down the page. */
.brand-m, .foot-m { display: inline-block; }
.m-svg { display: inline-block; height: .93em; width: auto; vertical-align: -.214em; margin-right: .02em; overflow: visible; }
.m-bar { fill: var(--rose); }
/* on the home page the small logo waits until the large one has scrolled away */
.nav-home .brand { transition: opacity .3s var(--ease), transform .3s var(--ease); }
.js .nav-home:not(.past):not(.open) .brand { opacity: 0; transform: translateY(6px); pointer-events: none; }
.nav nav { flex: 1; display: flex; justify-content: flex-end; }
.nav nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; align-items: center; }
.nav nav a { color: var(--ink-2); text-decoration: none; font-weight: 400; font-size: .9rem; white-space: nowrap; padding: 4px 0; transition: color .2s var(--ease); }
.nav nav a:hover { color: var(--ink); text-decoration: none; }
.nav nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav nav .menu-dl { display: none; }
.nav .nav-dl { min-height: 32px; padding: 0 14px; font-size: .86rem; }
.menu-btn { display: none; margin-left: auto; min-height: 36px; padding: 0 14px; background: var(--tile); border: 0; border-radius: 980px; color: var(--ink); font: 500 .9rem/1 var(--f-text); cursor: pointer; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; align-items: center; }
  .nav .nav-dl { display: none; }
  .nav nav { position: fixed; inset: 56px 0 0 0; background: var(--bg); padding: 16px var(--gut) 40px; display: block; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s .2s; overflow: auto; }
  .nav.open nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav nav a { display: block; padding: 12px 0; font: 600 1.9rem/1.1 var(--f-text); letter-spacing: -.025em; color: var(--ink); }
  .nav nav .menu-dl { display: block; padding-top: 28px; }
  .nav nav .menu-dl a { display: inline-flex; font: 500 1.05rem/1 var(--f-text); letter-spacing: -.01em; color: #fff; padding: 0 24px; }
}

/* ---------- home: the logo is the first thing on the page ---------- */
.hero { padding: clamp(72px, 13vh, 160px) 0 0; text-align: center; overflow: hidden; }
.hero-logo { margin: 0; font-weight: 400; letter-spacing: 0; line-height: 1; }
.hero-logo .brand-word { display: inline-block; font-size: clamp(3.4rem, 1rem + 11.5vw, 11.5rem); letter-spacing: -.022em; color: var(--ink); }
.hero-tag { font: 600 clamp(1.55rem, 1rem + 2.1vw, 2.9rem)/1.1 var(--f-text); letter-spacing: -.028em; color: var(--ink); margin: clamp(28px, 4vw, 48px) auto 0; max-width: 24ch; text-wrap: balance; }
.hero-lede { font-size: clamp(1.05rem, .98rem + .3vw, 1.3rem); line-height: 1.45; color: var(--muted); margin: 18px auto 0; max-width: 46ch; }
.hero .hero-actions { justify-content: center; margin-top: 32px; }
.hero .meta-line { margin: 18px auto 0; font-size: .88rem; color: var(--muted); max-width: 60ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; }
.hero-actions .meta-line { width: 100%; flex-basis: 100%; margin: 4px 0 0; font-size: .9rem; color: var(--muted); }
.lede { font-size: clamp(1.1rem, 1rem + .4vw, 1.35rem); line-height: 1.42; color: var(--muted); max-width: 46ch; }
.field-ink .lede, .field-navy .lede { color: var(--bone-2); }
/* the opening plays once: the wordmark settles, then the words under it */
.js .hero .rise { animation: rise 1s var(--ease-out) both; }
.js .hero .rise-2 { animation-delay: .18s; }
.js .hero .rise-3 { animation-delay: .32s; }
.js .hero .rise-4 { animation-delay: .5s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* the product sits on a grey stage under the opening, the way a device sits under an Apple headline */
.stage-wrap { margin-top: clamp(56px, 8vw, 104px); }
.stage { background: var(--tile); border-radius: var(--r-l) var(--r-l) 0 0; padding: clamp(20px, 5vw, 72px) clamp(12px, 5vw, 72px) 0; }
.stage .sheet { max-width: 860px; margin: 0 auto; border-radius: var(--r-m) var(--r-m) 0 0; border-bottom: 0; text-align: left; }
.stage-note { font-size: .84rem; color: var(--muted); margin: 0; padding: 18px 0 0; }

/* a large statement: the first sentence in ink, the rest in grey */
.statement { font: 600 clamp(1.5rem, 1rem + 1.9vw, 2.6rem)/1.18 var(--f-text); letter-spacing: -.026em; color: var(--muted); max-width: 30ch; margin: 0 auto; text-align: center; text-wrap: balance; }
.statement b { color: var(--ink); font-weight: 600; }

.sheet { background: var(--sheet); color: var(--ink); position: relative; border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 22px 14px; }
.sheet-head b { font: 600 1.2rem/1.15 var(--f-text); letter-spacing: -.018em; }
.sheet-head span { font-size: .8rem; color: var(--muted); }
.fields { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.field { padding: 10px 22px 12px; min-width: 0; }
.field + .field { border-left: 1px solid var(--line); }
.field .label { display: block; font-size: .76rem; margin-bottom: 2px; }
.field .v { font: 500 1.02rem/1.3 var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.register { width: 100%; border-collapse: collapse; font-size: .93rem; }
.register th { font: 500 .76rem/1.2 var(--f-text); color: var(--muted); text-align: left; padding: 10px 22px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; background: #FAFAFB; }
.register td { padding: 13px 22px; border-bottom: 1px solid var(--line); vertical-align: top; }
.register td b { display: block; font-weight: 600; line-height: 1.25; }
.register td b a { color: var(--ink); }
.register td small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.3; margin-top: 2px; }
.register .num { white-space: nowrap; }
.register tr:last-child td { border-bottom: 0; }
.sheet-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; border-top: 1px solid var(--line); min-height: 104px; }
.sheet-foot p { margin: 0; font-size: .88rem; color: var(--muted); max-width: 30ch; flex: 1 1 180px; }
.sample { font-size: .84rem; color: var(--muted); margin: 14px 0 0; max-width: 72ch; }
.field-ink .sample, .field-navy .sample { color: var(--bone-2); }

/* status: glyph plus word, never colour alone */
.status { display: inline-flex; align-items: center; gap: 7px; font: 600 .82rem/1.2 var(--f-text); white-space: nowrap; color: var(--muted); }
.status::before { content: ""; width: 9px; height: 9px; border: 1.5px solid currentColor; border-radius: 50%; flex: none; }
.status.cur { color: var(--navy); }
.status.cur::before { background: currentColor; }
.status.due { color: var(--ochre); }
.status.due::before { border-left-width: 5px; }
.status.exp { color: var(--blood); }
.status.exp::before { content: "\00D7"; display: grid; place-items: center; font: 700 10px/1 var(--f-text); }

.caret { display: inline-block; width: 1px; height: 1em; background: var(--ink); vertical-align: -2px; margin-left: 1px; animation: blink 1.06s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* the seal stamp keeps the wordmark's serif */
.stamp {
  display: inline-block; color: var(--rose); border: 2.5px solid currentColor; border-radius: 8px; padding: 3px; transform: rotate(-4deg);
  font: 400 1rem/1 var(--f-logo); letter-spacing: .05em; text-transform: uppercase; text-align: center; flex: none;
}
.stamp span { display: block; border: 1px solid currentColor; border-radius: 5px; padding: 10px 14px 8px; }
.stamp small { display: block; margin-top: 6px; font: 700 .66rem/1 var(--f-text); letter-spacing: .1em; }
.stamp.wait { opacity: 0; transform: rotate(-4deg) scale(1.14); }
.stamp.hit { animation: stamp .18s var(--ease-stamp) both; }
@keyframes stamp { from { opacity: 0; transform: rotate(-4deg) scale(1.14); } to { opacity: 1; transform: rotate(-4deg) scale(1); } }
.sheet.thud { animation: thud .12s linear; }
@keyframes thud { 50% { transform: translateY(2px); } }

/* ---------- sections ---------- */
.section { padding: clamp(80px, 10vw, 152px) 0; }
.section.tight { padding: clamp(64px, 8vw, 112px) 0; }
.display { font: 600 clamp(2.2rem, 1.1rem + 3.6vw, 4.6rem)/1.04 var(--f-text); letter-spacing: -.034em; margin: 0; }
.display-s { font: 600 clamp(1.8rem, 1.1rem + 2.2vw, 3.2rem)/1.06 var(--f-text); letter-spacing: -.03em; margin: 0; }
.head-c { text-align: center; max-width: 900px; margin: 0 auto; }
.head-c .lede { margin: 22px auto 0; }
.indent { margin-left: 0; }
.narrow-col { max-width: 640px; }
.split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(32px, 6vw, 96px); align-items: start; }
.split.rev { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.mt-l { margin-top: clamp(44px, 6vw, 88px); }
.mt-m { margin-top: clamp(22px, 3vw, 40px); }
.big-figure, .picker-head .big-figure { max-width: none; font: 600 clamp(6rem, 3rem + 12vw, 15rem)/.82 var(--f-text); letter-spacing: -.06em; color: var(--navy); margin: 0; font-variant-numeric: tabular-nums; }

/* ---------- state picker ---------- */
.picker-head { text-align: center; max-width: 860px; margin: 0 auto; }
.picker-head h2 { margin-top: 22px; }
.picker-head p.big-figure { color: var(--navy); margin: 0 auto; }
.picker-head p { max-width: 52ch; color: var(--muted); font-size: 1.12rem; margin: 22px auto 0; }
.panel { background: var(--sheet); border-radius: var(--r-l); padding: clamp(20px, 3.5vw, 44px); }
.picker { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(24px, 3.5vw, 52px); align-items: start; margin-top: clamp(40px, 5vw, 64px); }
.picker-ctl { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 14px; margin-bottom: 22px; }
.picker-ctl label { display: block; font-size: .82rem; font-weight: 500; color: var(--muted); margin-bottom: 6px; }
.picker-count { font-size: .88rem; color: var(--muted); margin-left: auto; padding-bottom: 9px; }
.tiles { display: grid; grid-template-columns: repeat(11, 1fr); gap: 4px; }
.tile {
  aspect-ratio: 1; border: 0; background: var(--tile); padding: 0; cursor: pointer; border-radius: 7px;
  font: 600 clamp(.58rem, .42rem + .45vw, .84rem)/1 var(--f-text); color: var(--ink-2); position: relative;
  transition: background-color .18s var(--ease), color .18s var(--ease), opacity .18s var(--ease);
}
.tile:hover { background: #DADDE2; color: var(--ink); }
.panel .tile:not([aria-pressed="true"]) { background: var(--tile-2); }
.panel .tile:not([aria-pressed="true"]):hover { background: #D6DADF; }
.tile[aria-pressed="true"] { background: var(--navy); color: #fff; }
.tile.unv:not([aria-pressed="true"])::before { content: ""; position: absolute; right: 5px; top: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--rose); }
.tiles.pre .tile { opacity: 0; }
.tiles.pre .tile.on { opacity: 1; }
.tiles-key { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; font-size: .82rem; color: var(--muted); }
.tiles-key i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 7px; }
.tiles-key i.k-on { background: var(--navy); }
.tiles-key i.k-unv { background: var(--rose); width: 6px; height: 6px; border-radius: 50%; vertical-align: 1px; }
.answer { background: var(--tile); border-radius: var(--r-m); overflow: hidden; }
.answer .sheet-head span { color: var(--muted); }
.answer-body { padding: 0 22px 22px; }
.answer-empty { color: var(--muted); padding-top: 6px; }
.answer-empty p { margin-bottom: 16px; }
.big-line { font: 600 clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem)/1.1 var(--f-text); letter-spacing: -.026em; margin: 6px 0 10px; text-wrap: balance; }
.answer-sub { font-size: .95rem; color: var(--ink-2); margin: 0; }
.answer .register { margin: 16px -22px 0; width: calc(100% + 44px); background: var(--sheet); }
.answer .register th { background: var(--sheet); }
.overlap { margin: 0 -22px; padding: 18px 22px 0; background: var(--tile); }
.overlap h3 { font-size: 1.12rem; margin-bottom: 6px; }
.overlap ul { list-style: none; margin: 0; padding: 0; }
.overlap li { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: .94rem; line-height: 1.45; color: var(--ink-2); }
.overlap li b { color: var(--ink); }
.overlap li:last-child { border-bottom: 0; }
.answer-foot { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin-top: 20px; }
.fade-swap { animation: swap .3s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- renewal strip ---------- */
.strip { position: relative; background: var(--sheet); overflow: hidden; border-radius: var(--r-m); border: 1px solid var(--line); }
.strip-months { display: grid; grid-template-columns: repeat(24, 1fr); }
.strip-months span { font-size: .66rem; color: var(--muted); padding: 12px 0 10px 6px; white-space: nowrap; overflow: hidden; }
.strip-months span.yr { color: var(--navy); font-weight: 700; }
.lane { position: relative; height: 46px; border-top: 1px solid #ECEEF1; }
.lane-name { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: .78rem; font-weight: 600; color: var(--ink-2); z-index: 1; }
.win { position: absolute; top: 11px; bottom: 11px; background: #F5DFC4; border-radius: 6px; }
.win svg { display: none; }
.tick { position: absolute; top: 7px; bottom: 7px; width: 4px; margin-left: -2px; background: var(--navy); border-radius: 2px; }
.today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--rose); transform-origin: top; }
.today.draw { transform: scaleY(0); transition: transform .6s var(--ease-out) .1s; }
.today.draw.in { transform: scaleY(1); }
.strip-note { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 14px 0 0; font-size: .82rem; color: var(--muted); }
.strip-note i { display: inline-block; width: 14px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 7px; }
.strip-note .k-tick { width: 4px; border-radius: 2px; background: var(--navy); }
.strip-note .k-win { background: #F5DFC4; }
.strip-note .k-today { width: 2px; border-radius: 0; background: var(--rose); }

/* the four steps run sideways: a swipeable row on small screens, and on wide screens the row slides
   across while the page scrolls down, then lets go */
.hpin-view { margin-top: clamp(24px, 3vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hpin-view::-webkit-scrollbar { display: none; }
.proc { list-style: none; margin: 0; padding: 0 0 8px; display: flex; gap: clamp(14px, 1.6vw, 22px); }
.proc li { flex: 0 0 min(80vw, 340px); scroll-snap-align: start; background: var(--tile); border-radius: var(--r-l); padding: clamp(24px, 2.6vw, 36px); min-height: 240px; }
.proc h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.75rem); line-height: 1.12; margin-bottom: 12px; }
.proc p { margin: 0; color: var(--muted); font-size: 1rem; }
.hpin-bar { display: none; height: 2px; background: var(--tile-2); border-radius: 2px; margin: 28px auto 0; max-width: 240px; position: relative; overflow: hidden; }
.hpin-bar i { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--ink); }
.hpin.pinned .hpin-stick { position: sticky; }
.hpin.pinned .hpin-view { overflow: hidden; scroll-snap-type: none; }
.hpin.pinned .proc { width: max-content; will-change: transform; padding-bottom: 0; }
.hpin.pinned .proc li { flex-basis: clamp(320px, 32vw, 420px); }
.hpin.pinned .hpin-bar { display: block; }

/* features: a gallery you can swipe, drag or step through */
.rail { position: relative; }
.feats { position: relative; display: flex; gap: clamp(14px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; cursor: grab; }
.feats::-webkit-scrollbar { display: none; }
.feats.dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.feat { flex: 0 0 min(86vw, 460px); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; background: var(--sheet); border-radius: var(--r-l); padding: clamp(24px, 2.8vw, 40px); }
.band .feat { background: var(--sheet); }
.feat h3 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.9rem); line-height: 1.1; margin-bottom: 14px; }
.feat p { color: var(--muted); margin: 0; }
.rail-ctl { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.rail-ctl button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--tile-2); color: var(--ink); cursor: pointer; transition: background-color .2s var(--ease), opacity .2s var(--ease); }
.band .rail-ctl button { background: #DCDFE4; }
.rail-ctl button svg { width: 16px; height: 16px; }
.rail-ctl button:hover:not(:disabled) { background: #CFD3D9; }
.rail-ctl button:disabled { opacity: .35; cursor: default; }
.rail-progress { order: -1; flex: 0 1 200px; height: 2px; background: #D3D7DC; border-radius: 2px; position: relative; margin-right: auto; overflow: hidden; }
.rail-progress i { position: absolute; left: 0; top: 0; height: 2px; width: 20%; background: var(--ink); transition: transform .35s var(--ease-out); transform-origin: left; }
.rail-count { order: -1; font-size: .86rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 4.5em; }
.specimen { background: var(--tile); border-radius: var(--r-m); padding: 18px 20px; font-size: .92rem; }
.specimen .label { display: block; margin-bottom: 10px; }
.ck-list { list-style: none; margin: 0; padding: 0; }
.ck-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.ck-list li:last-child { border-bottom: 0; }
.ck-list i { width: 16px; height: 16px; border: 1.5px solid var(--ink-2); border-radius: 50%; flex: none; position: relative; }
.ck-list li.done i { background: var(--navy); border-color: var(--navy); }
.ck-list li.done i::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ck-list li.done span { color: var(--muted); }
.read-pair { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; }
.read-pair dt { font-size: .82rem; color: var(--muted); }
.read-pair dd { margin: 0; font-weight: 600; }
.hrs { display: grid; gap: 12px; }
.hrs div { display: grid; grid-template-columns: 30px 1fr 78px; gap: 12px; align-items: center; font-size: .86rem; }
.hrs b { font-weight: 700; }
.hrs s { display: block; height: 8px; border-radius: 4px; background: var(--tile-2); position: relative; text-decoration: none; overflow: hidden; }
.hrs s::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: calc(var(--p) * 100%); border-radius: 4px; background: var(--navy); transform-origin: left; transition: transform .9s var(--ease-out); }
.hrs.pre s::after { transform: scaleX(0); }
.score-spec { display: flex; align-items: flex-end; gap: 14px; }
.score-spec .fig { font: 600 4.6rem/.85 var(--f-text); letter-spacing: -.05em; color: var(--navy); }
.score-spec .of { font-size: .86rem; color: var(--muted); padding-bottom: 6px; }
.ded { list-style: none; margin: 14px 0 0; padding: 0; font-size: .86rem; }
.ded li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid var(--line); }
.files { display: flex; flex-wrap: wrap; gap: 8px; }
.files span { background: var(--sheet); border-radius: 10px; padding: 9px 12px; font-size: .86rem; }
.files b { font-weight: 700; margin-right: 6px; color: var(--navy); }

.rd { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; line-height: 1; }
.rc { display: flex; flex-direction: column; transition: transform .8s var(--ease-out); transition-delay: calc(var(--di, 0) * 60ms); }
.rc span { height: 1em; line-height: 1; }

/* ---------- privacy (the one dark stage) ---------- */
.own { display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--r-l); overflow: hidden; background: var(--sheet); color: var(--ink); max-width: 980px; margin-left: auto; margin-right: auto; }
.own > div { min-width: 0; }
.own > div + div { background: var(--dark-2); color: var(--bone); }
.own > div + div .sheet-head span { color: var(--bone-2); }
.own .fields { grid-template-columns: 1fr; border-top: 1px solid var(--line); }
.own .field + .field { border-left: 0; border-top: 1px solid var(--line); }
.cipher { margin: 0; padding: 14px 22px 22px; font: 400 .78rem/1.7 ui-monospace, Menlo, monospace; color: var(--bone-2); white-space: pre-wrap; word-break: break-all; border-top: 1px solid var(--dark-line); }
.own-toggle { margin: 22px auto 0; display: flex; gap: 14px 24px; align-items: center; max-width: 980px; }
.own-toggle p { margin: 0; font-size: .9rem; }
.dont { list-style: none; margin: clamp(64px, 8vw, 112px) auto 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(32px, 5vw, 72px); max-width: 980px; }
.dont b { display: block; font: 600 clamp(1.25rem, 1.05rem + .6vw, 1.6rem)/1.15 var(--f-text); letter-spacing: -.02em; color: var(--bone); margin-bottom: 8px; }
.dont span { color: var(--bone-2); font-size: 1rem; }
.section:not(.field-ink):not(.field-navy) .dont b { color: var(--ink); }
.section:not(.field-ink):not(.field-navy) .dont span { color: var(--muted); }
.verify pre { margin: 10px 0 0; background: var(--dark-2); color: var(--bone); padding: 18px 20px; border-radius: var(--r-s); font: 400 .8rem/1.65 ui-monospace, Menlo, monospace; overflow-x: auto; white-space: pre-wrap; }
.verify pre span { color: var(--rose-lt); }

/* ---------- download ---------- */
.dl-icon { width: clamp(88px, 10vw, 128px); height: auto; margin: 0 auto 28px; }
.dl-line { display: inline-block; font: 600 clamp(2.1rem, 1rem + 3.6vw, 4.6rem)/1.04 var(--f-text); letter-spacing: -.035em; color: var(--ink); text-decoration: none; text-wrap: balance; }
.dl-line:hover { color: var(--navy); text-decoration: none; }
.dl-line .arrow { display: inline-block; transition: transform .25s var(--ease-out); color: var(--link); }
.dl-line:hover .arrow { transform: translateY(8px); }
.avail { width: 100%; border-collapse: collapse; text-align: left; }
.avail th, .avail td { text-align: left; padding: 22px 20px 22px 0; border-top: 1px solid var(--line); vertical-align: top; }
.avail tr:last-child > * { border-bottom: 1px solid var(--line); }
.avail tbody th { font: 600 1.3rem/1.2 var(--f-text); letter-spacing: -.02em; width: 30%; }
.avail td small { display: block; color: var(--muted); font-size: .9rem; margin-top: 4px; }
.avail td:last-child { text-align: right; padding-right: 0; white-space: nowrap; }
.avail thead { display: none; }
.narrow { max-width: 860px; margin-left: auto; margin-right: auto; }

/* ---------- link lists ---------- */
.list-links { list-style: none; margin: 0; padding: 0; }
.list-links a { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr) 28px; gap: 24px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: color .2s var(--ease); }
.list-links li:first-child a { border-top: 0; }
.list-links a::after { content: "\203A"; text-align: right; color: var(--link); font-size: 1.6rem; line-height: 1; transition: transform .2s var(--ease); }
.list-links a:hover { color: var(--link); text-decoration: none; }
.list-links a:hover::after { transform: translateX(4px); }
.list-links b { font: 600 clamp(1.2rem, 1.05rem + .5vw, 1.5rem)/1.15 var(--f-text); letter-spacing: -.02em; }
.list-links span { color: var(--muted); font-size: .98rem; }
.panel .list-links a { padding: 22px 0; }

/* ---------- FAQ ---------- */
.faqx details, .faq details { border-top: 1px solid var(--line); }
.faqx details:last-child, .faq details:last-child { border-bottom: 1px solid var(--line); }
.faqx summary, .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; font: 600 clamp(1.1rem, 1rem + .35vw, 1.3rem)/1.3 var(--f-text); letter-spacing: -.016em; }
.faqx summary::-webkit-details-marker, .faq summary::-webkit-details-marker { display: none; }
.faqx summary::after, .faq summary::after { content: "+"; font: 300 1.7rem/1 var(--f-text); color: var(--link); flex: none; transition: transform .25s var(--ease); }
.faqx details[open] summary::after, .faq details[open] summary::after { transform: rotate(45deg); }
.faqx summary:hover, .faq summary:hover { color: var(--link); }
.faqx details p, .faq details p { margin: 0 0 24px; max-width: 68ch; color: var(--ink-2); }
.faqx details[open] p, .faq details[open] p { animation: swap .25s var(--ease); }

/* ---------- figures and bands ---------- */
.band-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px clamp(40px, 6vw, 100px); align-items: end; }
.band-grid p { margin-top: 20px; max-width: 50ch; }
.figs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 32px; margin: 0; }
.figs dt { font-size: .86rem; color: var(--muted); }
.field-ink .figs dt, .field-navy .figs dt { color: var(--bone-2); }
.figs dd { margin: 4px 0 0; font: 600 clamp(2.4rem, 1.8rem + 2vw, 3.8rem)/.95 var(--f-text); letter-spacing: -.045em; }
.figs .exp-t { color: var(--blood); }
.figs .due-t { color: var(--ochre); }
.figs .cur-t { color: var(--navy); }
.field-ink .figs dd, .field-navy .figs dd { color: var(--bone); }
.figs-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; text-align: center; margin-bottom: 0; }
.figs-row.mt-l { margin-top: clamp(64px, 8vw, 104px); }
.figs-row dd { order: -1; margin: 0 0 10px; font: 600 clamp(2.8rem, 1.8rem + 3vw, 5rem)/.95 var(--f-text); letter-spacing: -.05em; color: var(--ink); }
.figs-row div { display: flex; flex-direction: column; }
.figs-row dt { font-size: .92rem; color: var(--muted); max-width: 18ch; margin: 0 auto; }
.sheet .figs { grid-template-columns: repeat(4, 1fr); padding: 6px 22px 20px; gap: 12px; }
.sheet .figs dd { font-size: clamp(2.2rem, 1.6rem + 1.4vw, 3.2rem); }

/* ---------- fee schedule ---------- */
.fees { width: 100%; border-collapse: collapse; }
.fees th, .fees td { padding: 28px 24px 28px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.fees thead { display: none; }
.fees tbody th { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2.2rem)/1.05 var(--f-text); letter-spacing: -.03em; width: 24%; }
.fees tbody th small { display: block; font: 400 .92rem/1.4 var(--f-text); letter-spacing: 0; color: var(--muted); margin-top: 10px; }
.fees .price { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2.2rem)/1.05 var(--f-text); letter-spacing: -.03em; color: var(--navy); white-space: nowrap; width: 18%; }
.fees .price small { display: block; font: 400 .85rem/1.3 var(--f-text); letter-spacing: 0; color: var(--muted); margin-top: 8px; }
.fees ul { margin: 0; padding-left: 18px; color: var(--ink-2); }
.fees li { margin: 4px 0; }
.fees td:last-child { width: 1%; white-space: nowrap; padding-right: 0; }
.cmp { width: 100%; border-collapse: collapse; }
.cmp th, .cmp td { padding: 14px 16px 14px 0; border-top: 1px solid var(--line); text-align: left; }
.cmp thead th { font-weight: 500; font-size: .88rem; color: var(--muted); border-top: 0; }
.cmp tbody th { font-weight: 600; }
.cmp td { color: var(--ink-2); }
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li { display: grid; grid-template-columns: minmax(150px, 3fr) minmax(0, 7fr); gap: 8px 32px; padding: 24px 0; border-top: 1px solid var(--line); }
.spec-list li > b:first-child { font: 600 1.25rem/1.2 var(--f-text); letter-spacing: -.02em; color: var(--ink); }
.spec-list li > span { color: var(--ink-2); }
.spec-list li:last-child { border-bottom: 1px solid var(--line); }
.field-ink .spec-list li > b:first-child { color: var(--bone); }
.field-ink .spec-list li > span { color: var(--bone-2); }
.field-ink .spec-list li { border-color: var(--dark-line); }

/* inner page heroes: centred, white, with plenty of air */
.page-hero { padding: clamp(72px, 10vw, 152px) 0 clamp(56px, 7vw, 104px); text-align: center; background: var(--bg); color: var(--ink); }
.page-hero h1 { font-size: clamp(2.5rem, 1rem + 4.6vw, 5.4rem); line-height: 1.02; letter-spacing: -.038em; max-width: 17ch; margin: 0 auto; }
.page-hero .hero-foot { display: block; margin-top: 28px; }
.page-hero .lede { margin: 28px auto 0; color: var(--muted); }
.page-hero .hero-foot .lede { margin-top: 0; }
.page-hero .hero-actions { justify-content: center; margin-top: 32px; }
.page-hero .hero-actions .meta-line { margin: 4px auto 0; color: var(--muted); }
.page-hero a { color: var(--link); }
.page-hero .btn { color: #fff; }

/* a record shown under an inner page hero */
.overlap-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; justify-items: center; }
.overlap-row .record-wrap { width: 100%; max-width: 900px; background: var(--tile); border-radius: var(--r-l); padding: clamp(16px, 4vw, 56px); }
.overlap-row .aside { text-align: center; max-width: 720px; }
.aside p { font-size: 1.05rem; color: var(--muted); max-width: 52ch; margin-left: auto; margin-right: auto; }
.aside .big { font: 600 clamp(1.4rem, 1.1rem + 1vw, 2.1rem)/1.18 var(--f-text); letter-spacing: -.026em; color: var(--ink); margin-bottom: 16px; }

/* ---------- generated pages: article layout ---------- */
.pg { padding: clamp(40px, 6vw, 88px) 0 clamp(80px, 10vw, 152px); }
.pg .wrap > * { max-width: 780px; }
.pg .wrap > .tbl-wrap, .pg .wrap > .tool, .pg .wrap > .guide-list, .pg .wrap > .cta, .pg .wrap > .crumbs { max-width: none; }
.pg.narrow .wrap > * { max-width: 740px; }
.crumbs { font-size: .86rem; color: var(--muted); margin: 0 0 clamp(28px, 4vw, 52px); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--link); }
.pg h1 { font-size: clamp(2.3rem, 1rem + 3.4vw, 4.2rem); line-height: 1.04; letter-spacing: -.036em; margin: 0 0 26px; max-width: 18ch; }
.pg h2 { font-size: clamp(1.55rem, 1.2rem + 1.1vw, 2.25rem); line-height: 1.1; letter-spacing: -.028em; margin: 2em 0 .6em; }
.pg h3 { font-size: 1.3rem; margin: 1.6em 0 .5em; }
.pg .lede { margin-bottom: 32px; }
.pg p, .pg li { color: var(--ink-2); }
.pg ul, .pg ol { padding-left: 1.2em; }
.pg a { text-decoration: underline; text-decoration-color: rgba(36, 80, 127, .35); text-underline-offset: 3px; }
.pg a:hover { text-decoration-color: currentColor; }
.pg .btn, .pg .crumbs a, .pg .guide-list a, .pg .related a, .pg .tabs a { text-decoration: none; }
/* IT documents rendered from docs/*.md */
.doc h2 { margin-top: 2.2em; }
.doc h3 { margin-top: 1.6em; font-size: 1.25rem; }
.doc pre { background: var(--tile); border-radius: var(--r-s); padding: 14px 16px; overflow-x: auto; font: 500 .86rem/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre; }
.doc pre code { background: none; border: 0; padding: 0; font: inherit; }
.doc li { margin-bottom: .45em; }
.doc li.check { list-style: none; position: relative; }
.doc li.check::before { content: ""; position: absolute; left: -1.2em; top: .42em; width: .7em; height: .7em; border: 1.5px solid var(--ink-2); border-radius: 3px; }
.table-scroll { overflow-x: auto; margin: 1.2em 0 1.6em; }
.doc-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.doc-table th { text-align: left; font: 500 .8rem/1.3 var(--f-text); color: var(--muted); padding: 10px 14px 8px 0; border-bottom: 1px solid var(--ink); }
.doc-table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.pg li { margin: .4em 0; }
.pg li::marker { color: var(--muted); }
.meta { font-size: .86rem; color: var(--muted); }
.draft { display: inline-block; font: 600 .8rem/1.3 var(--f-text); color: var(--ink); background: var(--ochre-fill); padding: 5px 12px; border-radius: 6px; }
.notice { background: var(--tile); border-radius: var(--r-s); padding: 16px 20px; margin: 22px 0; font-size: .97rem; color: var(--ink-2); }
.notice p:last-child { margin-bottom: 0; }
.notice.warn { background: #FBF1DC; }
.notice.ok { background: var(--tile); }
.flag { display: inline-block; font: 600 .74rem/1.2 var(--f-text); padding: 3px 8px; border-radius: 5px; color: var(--ink); background: var(--ochre-fill); margin-right: 8px; vertical-align: 1px; white-space: nowrap; }
.flag.mute { background: var(--tile-2); color: var(--ink-2); }
.flag.red { background: var(--blood-tint); color: var(--blood); }
.flag.ok { background: var(--navy); color: #fff; }
.kv { display: grid; grid-template-columns: max-content 1fr; margin: 24px 0; background: var(--tile); border-radius: var(--r-s); overflow: hidden; }
.kv dt, .kv dd { display: block; margin: 0; padding: 13px 20px; border-bottom: 1px solid var(--line); }
.kv dt { font-size: .86rem; color: var(--muted); }
.kv dd { color: var(--ink); font-weight: 500; }
.kv > :nth-last-child(-n+2) { border-bottom: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 8px; }
.tabs a { font: 500 .9rem/1 var(--f-text); padding: 11px 16px; border-radius: 980px; color: var(--ink); background: var(--tile); text-decoration: none; }
.tabs a:hover { background: var(--navy); color: #fff; }
.prof { scroll-margin-top: 72px; }
.tbl-wrap { overflow-x: auto; margin: 20px 0; background: var(--sheet); border: 1px solid var(--line); border-radius: var(--r-s); }
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl th, .tbl td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.tbl thead th { font-size: .82rem; font-weight: 500; color: var(--muted); background: #FAFAFB; white-space: nowrap; }
.tbl tbody th { font-weight: 600; }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl tbody tr:hover { background: #FAFAFB; }
.tbl .n, td.n { white-space: nowrap; }
.tbl td .flag { margin: 2px 0; }
.related { margin-top: 3.5em; }
.related ul { list-style: none; padding: 0; }
.related li { margin: 0; border-top: 1px solid var(--line); }
.related li:last-child { border-bottom: 1px solid var(--line); }
.related li a { display: block; padding: 15px 0; color: var(--ink); font: 600 1.15rem/1.25 var(--f-text); letter-spacing: -.016em; }
.related li a::after { content: "\00A0\203A"; color: var(--link); }
.related li a:hover { color: var(--link); }
.cta { margin-top: clamp(64px, 9vw, 120px); background: var(--tile); color: var(--ink); border-radius: var(--r-l); padding: clamp(36px, 6vw, 72px) clamp(24px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.cta h2, .pg .cta h2 { color: var(--ink); margin: 0; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); max-width: 20ch; }
.cta p, .pg .cta p { color: var(--muted); margin: 0; max-width: 54ch; }
.cta .btn { margin-top: 10px; }
.cta .btn-ghost { background: transparent; color: var(--link); border: 1px solid var(--link); margin-top: 0; }
.cta .btn-ghost:hover { background: var(--link); color: #fff; }
.guide-list { margin: 28px 0; }
.guide-list a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 8px 32px; padding: 22px 0; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.guide-list a:last-child { border-bottom: 1px solid var(--line); }
.guide-list a:hover b { color: var(--link); }
.guide-list b { font: 600 1.25rem/1.2 var(--f-text); letter-spacing: -.02em; transition: color .2s; }
.guide-list span { color: var(--muted); font-size: .97rem; }

/* ---------- forms and tools ---------- */
.tool { background: var(--tile); border-radius: var(--r-m); padding: clamp(20px, 3vw, 36px); margin: 28px 0; }
.tool > label, .tool p > label { font: 500 .86rem/1.3 var(--f-text); color: var(--ink-2); }
.tool p > label:has(input[type="checkbox"]) { font-weight: 400; font-size: 1rem; color: var(--ink); }
fieldset { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
legend { padding: 0 0 10px; font: 600 1.2rem/1.2 var(--f-text); letter-spacing: -.016em; color: var(--ink); }
input[type="search"], input[type="text"], input[type="number"], input[type="email"], select {
  font: 400 1rem/1.2 var(--f-text); color: var(--ink); background-color: var(--sheet);
  border: 1px solid #C9CDD3; border-radius: 12px; min-height: 46px; padding: 10px 14px; max-width: 100%;
}
.band select, .tool select, .tool input { background-color: var(--sheet); }
select { padding-right: 38px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2315181D' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
input:focus, select:focus { outline: 2px solid var(--link); outline-offset: 1px; }
input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--navy); margin: 0 9px 0 0; vertical-align: -3px; }
.tool input[type="search"] { width: 100%; max-width: 400px; margin-bottom: 12px; }
.row-actions { display: flex; gap: 8px; margin: 0 0 12px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; max-height: 320px; overflow: auto; }
.checks label { display: flex; align-items: center; padding: 9px 12px; background: var(--sheet); border-radius: 8px; font-size: .93rem; cursor: pointer; }
.checks label:hover { background: var(--tile-2); }
.checks label:has(input:checked) { background: var(--navy); color: #fff; }
#pMonths { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px 18px; }
#pMonths label { display: block; font-size: .86rem; font-weight: 500; color: var(--ink-2); margin-bottom: 6px; }
.result { margin-top: 26px; }
.result .st { border-top: 1px solid var(--line); padding: 16px 0 6px; margin-top: 16px; }
.result .st h3 { margin-top: 0; }
.bigsum { font: 600 clamp(2.5rem, 1.8rem + 2.6vw, 4.4rem)/.98 var(--f-text); letter-spacing: -.045em; color: var(--navy); margin: 8px 0 16px; }
#npiForm p { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
#npiForm p label { width: 100%; }
#npiForm p br { display: none; }
#npiForm .btn { min-height: 46px; }

/* ---------- footer: small type on light grey, as on Apple's pages ---------- */
.foot { background: var(--tile); border-top: 1px solid var(--line); color: var(--muted); padding: clamp(56px, 7vw, 96px) 0 28px; font-size: .82rem; overflow: hidden; }
.foot-top { padding-bottom: clamp(36px, 5vw, 56px); margin-bottom: 28px; border-bottom: 1px solid var(--line); text-align: center; }
.foot-tag { font: 600 clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem)/1.1 var(--f-text); letter-spacing: -.03em; color: var(--ink); margin: 0 auto; }
.foot-top .brand { display: none; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.foot h4 { font: 600 .82rem/1.3 var(--f-text); letter-spacing: 0; color: var(--ink); margin: 0 0 10px; }
.foot-cols a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; }
.foot-cols a:hover { color: var(--ink); text-decoration: underline; }
.foot-mark { font: 400 clamp(2.6rem, 1rem + 6vw, 6.4rem)/.9 var(--f-logo); letter-spacing: -.03em; color: var(--ink); margin: clamp(56px, 7vw, 96px) 0 0; text-align: center; white-space: nowrap; user-select: none; }
.foot-legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 28px; margin-top: clamp(36px, 5vw, 56px); padding-top: 18px; border-top: 1px solid var(--line); font-size: .78rem; color: var(--muted); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .hero-foot, .split, .split.rev, .picker, .band-grid { grid-template-columns: minmax(0, 1fr); }
  .figs-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
}
@media (max-width: 760px) {
  .register.stack thead { display: none; }
  .register.stack tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; border-bottom: 1px solid var(--line); padding: 11px 18px; }
  .register.stack tr:first-child { border-top: 1px solid var(--line); }
  .register.stack tr:last-child { border-bottom: 0; }
  .register.stack td { border: 0; padding: 0; }
  .register.stack td:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .register.stack td.c-status { grid-column: 2; grid-row: 1; text-align: right; }
  .register.stack td:nth-child(2) { display: none; }
  .register.stack td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; color: var(--muted); }
  .sheet-head, .field, .sheet-foot { padding-left: 18px; padding-right: 18px; }
  .tiles { gap: 3px; }
  .tile { border-radius: 4px; }
  .strip-months span:not(:nth-child(3n+1)) { color: transparent; }
  .strip-months span { overflow: visible; }
  .picker-count { margin-left: 0; width: 100%; padding: 0; }
  .own { grid-template-columns: minmax(0, 1fr); }
  .own-toggle { flex-direction: column; align-items: flex-start; }
  .dont { grid-template-columns: minmax(0, 1fr); }
  .sheet .figs { grid-template-columns: repeat(2, 1fr); }
  .avail, .avail tbody, .avail tr, .avail th, .avail td { display: block; width: auto; }
  .avail tr { border-top: 1px solid var(--line); padding: 18px 0; }
  .avail tr:last-child { border-bottom: 1px solid var(--line); }
  .avail th, .avail td, .avail tr:last-child > * { border: 0; padding: 4px 0; }
  .avail tbody th { width: auto; }
  .avail td:last-child { text-align: left; padding-top: 12px; }
  .list-links a, .guide-list a { grid-template-columns: minmax(0, 1fr) 24px; gap: 6px 12px; }
  .list-links span, .guide-list span { grid-column: 1; }
  .list-links a::after { grid-column: 2; grid-row: 1; }
  .spec-list li { grid-template-columns: minmax(0, 1fr); }
  .kv { grid-template-columns: minmax(0, 1fr); }
  .kv dt { border-bottom: 0; padding-bottom: 0; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
  .fees, .fees tbody, .fees tr, .fees th, .fees td { display: block; width: auto !important; }
  .fees tr { border-top: 1px solid var(--line); padding: 18px 0; }
  .fees th, .fees td { border: 0; padding: 8px 0; white-space: normal !important; }
  .cmp { font-size: .88rem; }
  .stage { border-radius: var(--r-m) var(--r-m) 0 0; }
  .stage .sheet { border-radius: 14px 14px 0 0; }
}
@media (max-width: 400px) { .tile { font-size: .5rem; } }

/* ---------- the thread: the bar under the M leaves the logo and leads the reader ---------- */
.thread { position: fixed; left: 0; top: 0; z-index: 60; width: 0; height: 0; border-radius: 99px; background: var(--rose); pointer-events: none; will-change: transform, width; transition: opacity .5s var(--ease); }
.thread.dark { background: var(--rose-lt); }
.nav.open ~ .thread { display: none; }
.tw { position: relative; }
.bl { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
.tw::after { content: ""; position: absolute; left: 0; right: 0; top: var(--tw-y, 100%); height: 2px; border-radius: 2px; background: var(--rose); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.field-navy .tw::after, .field-ink .tw::after { background: var(--rose-lt); }
.tw.traced::after { transform: scaleX(1); transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .caret { display: none; }
}
@media print {
  .nav, .foot, .cta, .skip, .thread { display: none; }
  body { background: #fff; }
}

/* ---------- inner pages: title column and body column of unequal width ---------- */
.sec-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 28px clamp(32px, 6vw, 96px); align-items: start; }
.sec-title h2 { font: 600 clamp(1.7rem, 1.1rem + 1.8vw, 2.8rem)/1.06 var(--f-text); letter-spacing: -.03em; }
.sec-title p { margin-top: 18px; color: var(--muted); max-width: 40ch; }
.sec-full { grid-column: 1 / -1; }
.section + .section { padding-top: 0; }
.field-navy + .section, .field-ink + .section, .band + .section, .section + .field-navy, .section + .field-ink, .section + .band, .band + .band { padding-top: clamp(80px, 10vw, 152px); }
.field-ink .sec-title p, .field-navy .sec-title p { color: var(--bone-2); }
@media (max-width: 1080px) { .sec-grid { grid-template-columns: minmax(0, 1fr); } }