/* ClinLicense 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 C 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 { 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 C is the supplied drawing, sized so its strokes span the cap height of linLicense 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: .95s; }
.js .hero .rise-3 { animation-delay: 1.1s; }
.js .hero .rise-4 { animation-delay: 1.25s; }
@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; }
@media (max-width: 560px) { .field .v { white-space: normal; overflow-wrap: anywhere; } .rec-switch button { font-size: .84rem; line-height: 1.15; padding: 4px 6px; } }
.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; transform-origin: right center; }
.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); }

/* ---------- sharing with a new group ---------- */
.share { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(24px, 4vw, 56px); align-items: start; }
.share-step { font: 600 .95rem/1.3 var(--f-text); letter-spacing: -.01em; margin: 0 0 12px; }
.share-step + .seg { margin-top: 0; }
.share-docs + .sample { margin-top: 10px; }
.seg { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--tile); border-radius: 12px; padding: 3px; }
.seg button { position: relative; z-index: 1; min-height: 40px; border: 0; background: transparent; border-radius: 9px; font: 500 .9rem/1 var(--f-text); color: var(--ink-2); cursor: pointer; transition: color .25s var(--ease); }
.seg button[aria-checked="true"] { color: #fff; }
.seg-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 4); background: var(--navy); border-radius: 9px; transform: translateX(calc(var(--n, 0) * 100%)); transition: transform .45s var(--ease-out); }
.seg-3 { grid-template-columns: repeat(3, 1fr); }
.seg-3 .seg-thumb { width: calc((100% - 6px) / 3); }
.rec-switch { max-width: 520px; margin: 0 auto 18px; background: var(--sheet); border: 1px solid var(--line); }
.rec-switch button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.share-level { font-size: .92rem; color: var(--muted); margin: 12px 0 28px; min-height: 2.9em; }
.share-docs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.share-docs li { border-bottom: 1px solid var(--line); }
.share-docs label { display: flex; align-items: center; gap: 12px; padding: 11px 2px; cursor: pointer; }
.share-docs input { margin: 0; width: 18px; height: 18px; }
.share-docs b { display: block; font-weight: 500; font-size: .95rem; }
.share-docs small { display: block; color: var(--muted); font-size: .8rem; }
.share-docs.off label { cursor: default; opacity: .45; }
.share-sheet { border-color: var(--line); }
.share-sum { margin: 0; padding: 0 22px 16px; font: 600 1.15rem/1.3 var(--f-text); letter-spacing: -.016em; text-wrap: balance; }
.share-sheet .register td:last-child { color: var(--ink-2); }
.share-sheet .register td:last-child { width: 46%; }
.share-sheet .register td small { margin-top: 3px; }
.share-sheet .register tr { transition: opacity .3s var(--ease); }
.share-sheet .register tr.gone td { color: var(--muted); }
.share-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 18px; }
.share-files:empty { display: none; }
.share-files span { background: var(--tile); border-radius: 10px; padding: 8px 11px; font-size: .84rem; }
.share-files span b { color: var(--navy); margin-right: 6px; font-weight: 700; }
.share-foot { min-height: 0; align-items: flex-start; }
.share-foot p { max-width: 40ch; }
.share-foot .cipher-line { font: 400 .74rem/1.6 ui-monospace, Menlo, monospace; color: var(--ink-2); word-break: break-all; display: block; margin-top: 6px; }
.share-facts { margin-top: clamp(56px, 7vw, 96px); }
.motion .share-files span { animation: swap .35s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 50ms); }
@media (max-width: 1080px) { .share { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .seg button { font-size: .8rem; } }

/* ---------- 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; }
.nurse { scroll-margin-top: 72px; margin-top: 2.4em; padding-top: 1.6em; border-top: 1px solid var(--line); }
.nurse h3 { margin-top: 0; }
.pg h4 { font-size: 1.05rem; margin: 1.4em 0 .4em; }
.tbl caption:not(.sr) { caption-side: top; text-align: left; padding: 14px 18px 4px; font-size: .88rem; color: var(--muted); }
.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 C 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; }

/* ---------- motion, design v7 ----------
   Every pre-state below sits behind html.motion, which script adds only when Reduce Motion is off,
   so without script or with Reduce Motion the page is simply all there. Motion is flat: transform,
   opacity, clip and colour only. */
@keyframes reveal-anyway { to { opacity: 1; } }
@keyframes ch-in { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }
@keyframes bar-in { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pop-in { from { opacity: 0; transform: scale(.78) rotate(-8deg); } 70% { opacity: 1; transform: scale(1.04) rotate(1deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* the opening logo waits for script to set it up, and shows anyway if script never runs */
  .js .hero-logo:not(.ready) { opacity: 0; animation: reveal-anyway 0s 2.5s forwards; }
}
.intro .ch { display: inline-block; animation: ch-in .8s var(--ease-out) both; animation-delay: calc(var(--d0, .35s) + var(--i) * 42ms); }
.intro .m-bar { transform-box: fill-box; transform-origin: left center; animation: bar-in .65s var(--ease-out) both; animation-delay: var(--bar0, 1s); }
.motion .foot-mark:not(.intro) { opacity: 0; }
.hero-logo { transform-origin: 50% 100%; will-change: transform; }
.stage { transform-origin: 50% 0; will-change: transform; }

/* headings arrive a word at a time */
.motion .hsplit .hw { display: inline-block; opacity: 0; transform: translateY(.45em); transition: opacity .6s var(--ease), transform .9s var(--ease-out); transition-delay: calc(var(--i) * 45ms); }
.motion .hsplit .hw.first { transform: none; }
.motion .hsplit.in .hw { opacity: 1; transform: none; }

/* the statement is read into ink, word by word */
.statement.wordlit .sw { color: #CDD1D7; transition: color .35s var(--ease); }
.statement.wordlit .sw.on { color: var(--ink); }

/* rows slide in from the side they scroll toward */
.motion .stag > * { opacity: 0; transform: translateX(56px); transition: opacity .7s var(--ease), transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 90ms); }
.motion .stag.up > * { transform: translateY(32px); }
.motion .stag.in > * { opacity: 1; transform: none; }

/* the timeline: windows grow toward their expiry, ticks drop in after */
.motion .strip.pre .win { transform: scaleX(0); }
.motion .strip.pre .tick { transform: scaleY(0); }
.motion .strip .win { transition: transform .9s var(--ease-out); transition-delay: calc(.2s + var(--i, 0) * 120ms); }
.motion .strip .tick { transition: transform .4s var(--ease-stamp); transition-delay: calc(.75s + var(--i, 0) * 120ms); }

/* the app icon is set down like a stamp */
.motion .dl-icon:not(.in) { opacity: 0; }
.motion .dl-icon.in { animation: pop-in .8s var(--ease-out) both; }

@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); } }

/* ---------- break-in: the visitor holds the sealed file and tries to open it ----------
   A dark pane for the file as a stranger receives it, a white pane for the attempts. */
.breakin { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--sheet); color: var(--ink); text-align: left; }
.field-ink .breakin { border-color: var(--dark-line); }
.bk-file { background: var(--dark-2); color: var(--bone); padding-bottom: 22px; }
.bk-file .sheet-head span { color: var(--bone-2); }
.bk-who { margin: 0 22px 16px; font-size: .9rem; color: var(--bone-2); max-width: 52ch; }
.bk-bytes { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.6em, 1fr)); gap: 2px; margin: 0 16px; padding-top: 14px; border-top: 1px solid var(--dark-line); font: 400 .8rem/1 ui-monospace, Menlo, monospace; }
.bk-bytes span { display: block; padding: 6px 0; text-align: center; border-radius: 5px; color: var(--bone); cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease); }
.bk-bytes span:hover { background: var(--dark-line); }
.bk-bytes .n { color: #8E9BAD; }
.bk-bytes .t { color: var(--rose-lt); }
.bk-bytes .x { background: var(--rose); color: #fff; }
.bk-bytes .x:hover { background: var(--rose); }
.bk-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 16px 22px 0; font-size: .8rem; color: var(--bone-2); }
.bk-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; background: var(--bone); vertical-align: -1px; }
.bk-sw.n { background: #8E9BAD; }
.bk-sw.t { background: var(--rose-lt); }
.bk-try { padding: 22px clamp(20px, 3vw, 32px) 26px; }
.bk-h { font: 600 clamp(1.5rem, 1.1rem + 1vw, 2rem)/1.1 var(--f-text); letter-spacing: -.024em; }
.bk-intro { margin: 10px 0 18px; font-size: .92rem; color: var(--muted); }
.bk-moves { border-top: 1px solid var(--line); }
.bk-moves button { display: block; width: 100%; min-height: 44px; padding: 12px 34px 12px 2px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; font: inherit; cursor: pointer; position: relative; transition: background-color .2s var(--ease); }
.bk-moves button::after { content: "\203A"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 1.5rem; color: var(--link); transition: transform .2s var(--ease); }
.bk-moves button:hover { background: var(--tile); }
.bk-moves button:hover::after { transform: translate(3px, -50%); }
.bk-moves button:disabled { cursor: progress; color: var(--muted); }
.bk-moves button:disabled::after { color: var(--muted); }
.bk-moves b { display: block; font-weight: 600; font-size: 1rem; color: var(--link); }
.bk-moves button:disabled b { color: var(--muted); }
.bk-moves span { display: block; font-size: .84rem; color: var(--muted); margin-top: 2px; }
.bk-out { margin-top: 20px; font-size: .92rem; }
.bk-out:empty { display: none; }
.bk-out p { margin: 0 0 10px; }
.bk-out sup { font-size: .68em; line-height: 0; }
.bk-out code { font-size: .86em; }
.bk-big { font: 600 clamp(2.4rem, 1.6rem + 2.4vw, 3.6rem)/1 var(--f-text) !important; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--navy); margin: 0 0 4px !important; }
.bk-cap { color: var(--muted); font-size: .86rem; }
.bk-guess { font: 400 .72rem/1.4 ui-monospace, Menlo, monospace; color: var(--muted); word-break: break-all; }
.bk-stamp { display: inline-block; font: 600 clamp(2rem, 1.4rem + 1.8vw, 2.8rem)/1 var(--f-text); letter-spacing: -.035em; color: var(--blood); border: 3px solid currentColor; border-radius: 10px; padding: 6px 14px 8px; transform: rotate(-3deg); margin: 4px 0 16px !important; }
.bk-stamp.ok { color: var(--navy); transform: rotate(2deg); }
.motion .bk-stamp { animation: pop-in .6s var(--ease-out) both; }
.bk-fields { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-s); margin-bottom: 12px; }
.bk-fields .field { padding: 10px 14px; border-top: 1px solid var(--line); border-left: 0; }
.bk-fields .field:nth-child(-n+2) { border-top: 0; }
.bk-fields .field:nth-child(even) { border-left: 1px solid var(--line); }
.bk-fields .v { font-weight: 600; }
.bk-restore { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; }
.bk-proof { list-style: none; margin: 18px 0 0; padding: 0; font-size: .86rem; color: var(--ink-2); }
.bk-proof li { padding: 9px 0 9px 22px; border-top: 1px solid var(--line); position: relative; }
.bk-proof li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 9px; height: 5px; border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg); }
.bk-proof b { color: var(--ink); }
.breakin-wrap { max-width: 1080px; margin-left: auto; margin-right: auto; }
@media (max-width: 900px) { .breakin { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .bk-fields { grid-template-columns: 1fr; } .bk-fields .field:nth-child(2) { border-top: 1px solid var(--line); } .bk-fields .field:nth-child(even) { border-left: 0; } }
/* on the dark home stage the white pane keeps its own ink */
.breakin .bk-try p { color: var(--ink-2); }
.breakin .bk-try .bk-intro, .breakin .bk-try .bk-cap, .breakin .bk-try .bk-guess { color: var(--muted); }
.breakin .bk-try .bk-big { color: var(--navy); }
.breakin .bk-try .bk-stamp { color: var(--blood); }
.breakin .bk-try .bk-stamp.ok { color: var(--navy); }
.breakin .bk-try .textlink { color: var(--link); }
.breakin .bk-file p { color: var(--bone-2); }
.bk-file .sheet-head { flex-wrap: wrap; } .bk-file .sheet-head b { white-space: nowrap; }


/* ---------- security demos: motion states (flat: colour, transform, stroke only) ---------- */
@keyframes bk-pop { from { transform: scale(1.5); } to { transform: none; } }
@keyframes seal-draw { from { stroke-dashoffset: 57; } to { stroke-dashoffset: 0; } }
.bk-bytes span.pt { color: #fff; font-weight: 600; }
.bk-bytes span.scan { background: var(--dark-line); color: #fff; }
.bk-bytes span.fail { background: var(--blood); color: #fff; }
.bk-bytes span.okc { background: var(--bone); color: var(--dark); }
.motion .bk-bytes span.hit { animation: bk-pop .45s var(--ease-stamp) both; }
.bk-bar { height: 8px; margin: 14px 0 6px; border-radius: 4px; background: var(--tile-2); overflow: hidden; }
.bk-bar i { display: block; width: 0; height: 100%; background: var(--navy); }
.bk-steps { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--line); }
.bk-steps li { padding: 10px 0 10px 28px; border-bottom: 1px solid var(--line); position: relative; }
.bk-steps li::before { content: ""; position: absolute; left: 0; top: 12px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); box-sizing: border-box; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.bk-steps li.fail::before { background: var(--blood); border-color: var(--blood); }
.bk-steps li.pass::before { background: var(--navy); border-color: var(--navy); }
.bk-steps b { display: block; font-weight: 600; color: var(--ink); }
.bk-steps span { display: block; font-size: .86rem; color: var(--ink-2); margin-top: 2px; }
.bk-steps li.fail span { color: var(--blood); }