/* Insurance Lab — public home.
   One editorial system: serif for what is said, grotesk for the interface,
   mono for what is cited. See docs/sito-specifica.md §5. */

/* Typefaces served from the site itself (landing/fonts/, see NOTICE.txt there):
   variable files limited to the weights this page uses. */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/landing/fonts/newsreader-roman.woff2') format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400 500; font-display: swap; src: url('/landing/fonts/newsreader-italic.woff2') format('woff2'); }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/landing/fonts/schibsted-grotesk.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/landing/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/landing/fonts/ibm-plex-mono-500.woff2') format('woff2'); }

/* While a font is on its way the text is set in a system face resized to the
   same measure, so that nothing reflows when the font arrives. Metrics taken
   from the files in landing/fonts/ (Newsreader at its display size). */
@font-face { font-family: 'Newsreader Fallback'; font-style: normal; src: local('Georgia'); size-adjust: 103.6%; ascent-override: 70.9%; descent-override: 25.6%; line-gap-override: 0%; }
@font-face { font-family: 'Newsreader Fallback'; font-style: italic; src: local('Georgia Italic'), local('Georgia-Italic'); size-adjust: 90.6%; ascent-override: 81.1%; descent-override: 29.2%; line-gap-override: 0%; }
@font-face { font-family: 'Schibsted Grotesk Fallback'; font-style: normal; src: local('Arial'); size-adjust: 104.8%; ascent-override: 93.2%; descent-override: 24.6%; line-gap-override: 0%; }

:root {
  --paper: #F6F3EC;
  --paper-2: #FCFAF4;
  --sheet: #FFFEFA;
  --ink: #14202E;
  --ink-2: #1F2E40;
  --text: #4C4636;
  --muted: #776E5F;
  --raw: #7A7567;
  --line: rgba(20, 32, 46, .12);
  --line-strong: rgba(20, 32, 46, .22);
  --field-line: #8D897E;
  --brass: #9A7B3F;
  --brass-deep: #7E6231;
  --brass-soft: #FBF1D8;
  --brass-pale: #D9C290;
  --ok: #2F7A4F;
  --warn: #A06B12;
  --crit: #8B2C2C;

  --serif: 'Newsreader', 'Newsreader Fallback', Georgia, 'Times New Roman', serif;
  --sans: 'Schibsted Grotesk', 'Schibsted Grotesk Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;

  --maxw: 1240px;
  --gutter: 40px;
  --sec: 112px;
  --head-top: 118px;   /* header at the top of the page: the logo is large enough to read its motto */
  --head-h: 118px;     /* header as it is now; shrinks once the page is scrolled */
  --logo-h: 104px;
  --D: 156px;          /* lens diameter */
  --note-w: 196px;     /* margin-note column of the specimen */
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 20px); }
html.is-scrolled { --head-h: 76px; --logo-h: 60px; }
body {
  margin: 0;
  padding-top: var(--head-top);   /* room for the fixed header: constant, so shrinking it moves nothing */
  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: var(--paper-2); border-radius: 3px; text-decoration: none; }
.skip:focus { top: 12px; color: var(--paper-2); }

.label {
  font: 500 11px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--brass-deep);
}

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border: 1px solid var(--ink); border-radius: 3px;
  font: 600 14.5px/1 var(--sans); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn--solid { background: var(--ink); color: var(--paper-2); }
.btn--solid:hover { background: var(--ink-2); color: var(--paper-2); }
.btn--line { background: transparent; color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper-2); }
.btn--ghost { background: transparent; color: var(--ink); min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.btn--ghost:hover { background: var(--ink); color: var(--paper-2); }
.btn[disabled] { opacity: .55; cursor: progress; }

/* Arrows are drawn: the served fonts do not carry them, and a system glyph
   would differ on every platform. */
.arr { position: relative; display: inline-block; flex: none; width: .95em; height: .62em; }
.arr::before { content: ""; position: absolute; left: 0; right: .08em; top: 50%; border-top: max(1px, .09em) solid currentColor; transform: translateY(-50%); }
.arr::after { content: ""; position: absolute; right: .1em; top: 50%; width: .42em; height: .42em; border-top: max(1px, .09em) solid currentColor; border-right: max(1px, .09em) solid currentColor; transform: translateY(-50%) rotate(45deg); }
.arr--out { margin-left: .15em; transform: rotate(-45deg); }
.btn .arr { transition: transform .25s var(--ease); }
.btn:hover .arr { transform: translateX(3px); }

/* ------------------------------------------------------------ header */
.site-head {
  position: absolute; left: 0; right: 0; top: 0; z-index: 40;
  background: rgba(246, 243, 236, .9);
  -webkit-backdrop-filter: saturate(1.2) blur(12px); backdrop-filter: saturate(1.2) blur(12px);
  border-bottom: 1px solid var(--line);
}
html.head-fixed .site-head { position: fixed; }
.site-head .wrap { display: flex; align-items: center; gap: 40px; height: var(--head-h); transition: height .35s var(--ease); }
.brand { flex: none; display: block; }
/* The lockup needs height: the wordmark is 16% of the mark and the motto 4%.
   At the top of the page it is tall enough to read the motto; scrolled, it steps back. */
.brand img { height: var(--logo-h); width: auto; transition: height .35s var(--ease); }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a { font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--text); }
.head-actions { display: flex; align-items: center; gap: 22px; }
.link-quiet { font-size: 14.5px; font-weight: 500; text-decoration: none; color: var(--ink); }
.m-menu { display: none; }

/* ------------------------------------------------------------ hero */
.hero .wrap {
  display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  gap: 68px; align-items: center;
  padding-top: 54px; padding-bottom: 56px;
}
.eyebrow {
  font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-deep);
  display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--brass); }
h1 {
  font-family: var(--serif); font-optical-sizing: auto;
  font-weight: 500; font-size: clamp(40px, 4.7vw, 70px); line-height: 1.03; letter-spacing: -.022em;
  color: var(--ink); text-wrap: balance;
}
h1 em { display: block; margin-top: .14em; font-style: italic; font-weight: 400; color: var(--brass-deep); letter-spacing: -.015em; }
.lede { margin-top: 28px; max-width: 33em; font-size: 18px; line-height: 1.62; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 36px; }
.text-link { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.proof { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 36em; font: 400 11.5px/1.7 var(--mono); letter-spacing: .04em; color: var(--muted); }
.proof a { color: var(--text); }

/* ----- specimen: an annotated policy page ----- */
.specimen {
  position: relative;
  background: var(--sheet);
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 1px 0 rgba(20, 32, 46, .03), 0 34px 70px -38px rgba(20, 32, 46, .34), 0 10px 22px -16px rgba(20, 32, 46, .16);
}
.spec-head, .spec-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 13px 26px;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.spec-head { border-bottom: 1px solid var(--line); }
.spec-foot { border-top: 1px solid var(--line); letter-spacing: .05em; text-transform: none; font-size: 11px; flex-wrap: wrap; }
.spec-foot a { color: var(--ink); font-weight: 500; white-space: nowrap; }
#count { color: var(--brass-deep); white-space: nowrap; }

.sheet { position: relative; }
.page {
  position: relative; padding: 26px 26px 28px 30px;
  font-family: var(--serif); font-size: 13.4px; line-height: 1.72; color: var(--ink);
}
.clause { display: grid; grid-template-columns: minmax(0, 1fr) var(--note-w); gap: 26px; align-items: start; }
.clause + .clause { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.clause p { hyphens: auto; }
/* a clause the policy prints in capitals stays in capitals: set smaller, so that it weighs like the others */
.clause p.caps { font-size: .84em; line-height: 1.8; letter-spacing: .015em; hyphens: none; }
.clause .clause-title { margin-bottom: 8px; font: 600 10px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); hyphens: none; }

.row { display: flex; align-items: baseline; gap: 8px; }
.row + .row { margin-top: 2px; }
.row i { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.row b { margin-left: auto; font: 500 11.5px/1.4 var(--mono); letter-spacing: -.01em; white-space: nowrap; }
/* a value too long for its column goes to the next line, at the right, instead of leaving the page */
.clause .row { flex-wrap: wrap; }

.k {
  border-radius: 2px; background: var(--brass-soft); box-shadow: 0 0 0 3px var(--brass-soft);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-color .6s ease, color .6s ease, box-shadow .6s ease;
}

.note {
  position: relative; padding: 1px 0 2px 14px; border-left: 1px solid var(--brass);
  font-family: var(--sans);
  transition: opacity .55s ease, transform .7s var(--ease);
}
.note::before {
  content: attr(data-n);
  position: absolute; left: -9px; top: -1px; width: 17px; height: 17px; border-radius: 50%;
  background: var(--brass-deep); color: #fff; font: 500 9.5px/17px var(--mono); text-align: center;
}
.chip { display: inline-block; margin-left: 12px; font: 600 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.chip--ok { color: var(--ok); }
.chip--warn { color: var(--warn); }
.note p { margin: 7px 0 6px; font-size: 12.6px; line-height: 1.45; color: var(--ink); hyphens: none; }
.note p b { font-weight: 600; }
.note small { display: block; font: 400 10px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }

/* With JavaScript the page starts raw and the lens reveals it. */
.js .page { color: var(--raw); }
.js .k { background: transparent; box-shadow: none; }
.js .k.is-found { background: var(--brass-soft); box-shadow: 0 0 0 3px var(--brass-soft); color: var(--ink); }
.js .note { opacity: 0; transform: translateX(10px); }
.js .note.is-on { opacity: 1; transform: none; }

/* What the lens shows under the glass: the page, read. */
.js .page--read { color: var(--ink); background: var(--sheet); }
.js .page--read .k { background: var(--brass-soft); box-shadow: 0 0 0 3px var(--brass-soft); }
/* emphasis without a weight change: the read copy must set exactly like the raw page */
.page--read .n { -webkit-text-stroke: .35px currentColor; }
.page--read .clause .clause-title { color: var(--brass-deep); }

/* The read page laid over the raw one, clipped to what the lens has passed. */
.read-under { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; clip-path: inset(100%); }
.read-under .note { visibility: hidden; }

.lens {
  position: absolute; left: 0; top: 0; width: var(--D); height: var(--D);
  pointer-events: none; z-index: 5; will-change: transform;
  filter: drop-shadow(0 16px 20px rgba(20, 32, 46, .2));
  opacity: 0; transition: opacity .5s ease;
}
.specimen.is-live .lens { opacity: 1; }
.specimen.is-live .lens.is-away { opacity: 0; }
.lens-glass { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--sheet); }
.lens-glass .page--read { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.lens-glass::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), inset 0 14px 26px -8px rgba(255, 255, 255, .75), inset 0 -18px 28px -12px rgba(20, 32, 46, .13);
}
.lens-frame {
  position: absolute; left: calc(var(--D) * -.2); top: calc(var(--D) * -.04);
  width: calc(var(--D) * 1.24); height: calc(var(--D) * 1.24); overflow: visible;
}

/* ------------------------------------------------------------ facts */
.facts { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper-2); }
.facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact { padding: 30px 28px 28px 0; }
.fact + .fact { padding-left: 28px; border-left: 1px solid var(--line); }
.fact b { display: block; font-family: var(--serif); font-weight: 500; font-size: 44px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.fact span { display: block; margin-top: 10px; max-width: 17em; font-size: 13.5px; line-height: 1.45; }

/* ------------------------------------------------------------ sections */
.sec { padding: var(--sec) 0; }
.band { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2 {
  font-family: var(--serif); font-optical-sizing: auto;
  font-weight: 500; font-size: clamp(30px, 3.15vw, 46px); line-height: 1.08; letter-spacing: -.018em;
  color: var(--ink); text-wrap: balance;
}
.split { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 68px; align-items: start; }
.sec-head { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 68px; align-items: end; margin-bottom: 64px; }
.sec-head p { max-width: 34em; font-size: 17.5px; line-height: 1.6; }
.prose p { max-width: 36em; font-size: 17px; line-height: 1.7; }
.prose p + p { margin-top: 18px; }
.prose strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ problem */
.versus { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 68px; margin-top: 72px; }
.versus-card { padding: 26px 28px 28px; border: 1px solid var(--line); border-radius: 4px; }
.versus-card .label { color: var(--muted); }
.versus-q { margin-top: 16px; font-size: 16px; line-height: 1.55; }
.versus-q span { color: var(--muted); }
.versus-a { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 24px; line-height: 1.2; letter-spacing: -.01em; color: var(--muted); }
.versus-card--us { background: var(--sheet); border-color: var(--line-strong); box-shadow: 0 24px 50px -36px rgba(20, 32, 46, .32); }
.versus-card--us .label { color: var(--brass-deep); }
.versus-card--us .versus-q { color: var(--ink); }
.versus-card--us .versus-a { color: var(--ink); }
.ref { margin-left: 10px; font: 400 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); white-space: nowrap; }

.compare { width: 100%; margin-top: 72px; border-collapse: collapse; table-layout: fixed; }
.compare th, .compare td { padding: 18px 22px 18px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.compare thead th { padding-bottom: 14px; font: 500 11px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-strong); }
.compare tbody th { font: 600 14.5px/1.45 var(--sans); color: var(--ink); }
.compare td { font-size: 15.5px; line-height: 1.5; }
.compare .us { padding-left: 22px; background: var(--sheet); color: var(--ink); font-weight: 500; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.compare thead .us { color: var(--brass-deep); border-top: 2px solid var(--brass); }
.aside-line { margin-top: 22px; font-size: 14.5px; color: var(--muted); }

/* ------------------------------------------------------------ method */
.job { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 68px; align-items: center; padding: 44px 0; border-top: 1px solid var(--line); }
.job:last-of-type { border-bottom: 1px solid var(--line); }
.job h3 { margin-top: 14px; font-family: var(--serif); font-weight: 500; font-size: 28px; line-height: 1.15; letter-spacing: -.012em; color: var(--ink); }
.job-text > p:not(.label) { margin-top: 14px; max-width: 30em; }
.job-text ul { margin-top: 18px; }
.job-text li { position: relative; padding: 7px 0 7px 22px; font-size: 15px; color: var(--ink); border-top: 1px solid var(--line); }
.job-text li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 9px; height: 1px; background: var(--brass); }

.panel {
  padding: 0 26px 22px; background: var(--sheet);
  border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 24px 50px -38px rgba(20, 32, 46, .32);
  font-family: var(--serif); font-size: 15px; color: var(--ink);
}
.panel-head {
  display: flex; justify-content: space-between; gap: 16px;
  margin: 0 -26px 16px; padding: 13px 26px; border-bottom: 1px solid var(--line);
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}
.panel-head span:last-child { color: var(--brass-deep); }
.panel .row { padding: 7px 0; }
.panel .row b { font-size: 12.5px; }
.panel .row b em { font-style: normal; color: var(--brass); margin: 0 4px; }
.panel .row--total { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line-strong); font-weight: 600; }
.panel .row--total i { border-bottom-color: transparent; }
.panel .row--total b { font-size: 14px; }
.panel-foot { margin-top: 16px; padding: 2px 0 2px 14px; border-left: 1px solid var(--brass); font-family: var(--sans); font-size: 13.5px; line-height: 1.5; }
.panel-foot span { display: block; font: 600 9.5px/1.6 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--warn); }
.panel-tag { margin-top: 14px; font: 400 10.5px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }
.also { margin-top: 36px; max-width: 60em; font-size: 15.5px; }
.also span { margin-right: 10px; font: 500 11px/1.4 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--brass-deep); }

/* ------------------------------------------------------------ lines of business */
.lines-list { margin-top: 64px; columns: 3; column-gap: 56px; }
.lines-list li { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); break-inside: avoid; font-size: 16px; color: var(--ink); }
.lines-list i { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.lines-list b { font: 500 13px/1 var(--mono); color: var(--brass-deep); }
.lines-total { margin-top: 20px; font: 400 12px/1.5 var(--mono); letter-spacing: .04em; color: var(--muted); }
.lines-total b { font-weight: 500; color: var(--ink); }

/* ------------------------------------------------------------ report */
/* The report is shown at the full width of the page, as wide as it is made:
   on a desktop it is read in place, as the client receives it. Above it, its
   nine sections: each one moves the frame to that section. */
.report-nav ol { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 0 14px; margin-bottom: 26px; }
.report-nav a { display: block; height: 100%; padding: 12px 0 4px; border-top: 1px solid var(--line-strong); font-size: 13.5px; line-height: 1.35; font-weight: 500; color: var(--ink); text-decoration: none; transition: border-color .2s ease; }
.report-nav a b { display: block; margin-bottom: 6px; font: 500 11px/1.4 var(--mono); color: var(--brass-deep); }
.report-nav a:hover, .report-nav a:focus-visible { border-top-color: var(--brass); }
.report-frame { background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 4px; overflow: hidden; box-shadow: 0 34px 70px -40px rgba(20, 32, 46, .36); }
.frame-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 20px; border-bottom: 1px solid var(--line); font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--muted); }
.frame-actions { display: flex; gap: 22px; flex-wrap: wrap; }
.frame-actions a { color: var(--ink); white-space: nowrap; }
.frame-view { position: relative; }
.report-frame iframe { display: block; width: 100%; height: clamp(560px, 80vh, 880px); border: 0; background: #fff; }
.frame-cover { display: none; }
/* Under a finger an embedded document traps the scroll of the page: on touch
   screens it is a window on the report, and a tap opens the report itself. */
@media (hover: none), (max-width: 720px) {
  .report-frame iframe { pointer-events: none; }
  .frame-actions a:first-child { display: none; }   /* the cover says it, larger */
  .frame-cover {
    position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding: 22px;
    text-decoration: none;
    background: linear-gradient(to bottom, rgba(255, 254, 250, 0) 56%, rgba(255, 254, 250, .95) 88%);
  }
}
.report-note { margin-top: 20px; font: 400 11.5px/1.6 var(--mono); letter-spacing: .03em; color: var(--muted); }

/* ------------------------------------------------------------ gains */
.gains-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-strong); }
.gains-grid article { padding: 30px 32px 6px 0; }
.gains-grid article + article { padding-left: 32px; border-left: 1px solid var(--line); }
.gains-grid h3 { margin-top: 16px; font-family: var(--serif); font-weight: 500; font-size: 27px; line-height: 1.16; letter-spacing: -.012em; color: var(--ink); text-wrap: balance; }
.gains-grid article > p:last-child { margin-top: 14px; font-size: 16px; line-height: 1.65; }

/* ------------------------------------------------------------ founder */
.founder-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 68px; align-items: start; }
.portrait img { width: 100%; border-radius: 4px; border: 1px solid var(--line); }
.portrait figcaption { margin-top: 12px; font: 400 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--muted); }
.founder-text .prose { margin-top: 26px; }
.creds { margin-top: 28px; }
.creds li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.creds li::before { content: ""; position: absolute; left: 2px; top: 1.3em; width: 9px; height: 1px; background: var(--brass); }
.pull { margin-top: 72px; padding-top: 44px; border-top: 1px solid var(--line-strong); }
.pull p { max-width: 30em; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.32; letter-spacing: -.01em; color: var(--ink); text-wrap: pretty; }
.pull cite { display: block; margin-top: 22px; font: 500 11px/1.4 var(--mono); font-style: normal; letter-spacing: .13em; text-transform: uppercase; color: var(--brass-deep); }
.pull cite::before { content: "— "; }

/* ------------------------------------------------------------ data (the one dark section) */
.data { background: var(--ink); color: #B9C0CA; }
.data h2 { color: var(--paper-2); }
.data-lede { margin-top: 24px; max-width: 30em; font-size: 17px; line-height: 1.65; }
.data-links { margin-top: 26px; font-size: 14.5px; color: #8E97A3; }
.data-links a { color: var(--paper-2); }
.data-list > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 24px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .13); }
.data-list > div:last-child { border-bottom: 1px solid rgba(255, 255, 255, .13); }
.data-list dt { padding-top: 3px; font: 500 11px/1.5 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--brass-pale); }
.data-list dd { font-size: 16px; line-height: 1.6; color: #E6E9ED; }

/* ------------------------------------------------------------ pricing */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-strong); border-radius: 4px; background: var(--sheet); }
.plan { position: relative; display: flex; flex-direction: column; padding: 34px 28px 28px; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan h3 { font: 500 11.5px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-deep); }
.plan-for { margin-top: 10px; min-height: 4.5em; font-size: 14.5px; line-height: 1.5; }
.price { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; color: var(--ink); }
.price b { font-family: var(--serif); font-weight: 500; font-size: 60px; line-height: 1; letter-spacing: -.03em; }
.price .cur { font-family: var(--serif); font-size: 26px; }
.price .per { font-size: 14px; color: var(--muted); }
.price--ask b { font-size: 34px; letter-spacing: -.015em; line-height: 60px; }
.vat { margin-top: 8px; font: 400 11.5px/1.5 var(--mono); letter-spacing: .02em; color: var(--muted); }
.plan-cap { margin-top: 22px; }
.plan-cap li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.plan-cap li b { font-weight: 600; color: var(--ink); }
.plan-math { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.plan-math dt { font: 500 9.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.plan-math dd { margin-top: 3px; font: 500 14px/1.3 var(--mono); color: var(--ink); }
.plan .btn { margin-top: auto; width: 100%; }
.plan--pick { background: var(--paper-2); box-shadow: inset 0 3px 0 var(--ink); }
.plan-flag { position: absolute; left: 28px; right: 28px; top: 12px; font: 500 9.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.activation { margin-top: 22px; max-width: 62em; font-size: 14.5px; color: var(--text); }

.pricing-detail { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 68px; margin-top: 72px; }
.ledger ul { margin-top: 16px; }
.ledger li { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--ink); }
.ledger li:last-child { border-bottom: 1px solid var(--line); }
.ledger li span { order: 1; }
.ledger li::after { content: ""; order: 2; flex: 1; min-width: 12px; border-bottom: 1px dotted var(--line-strong); transform: translateY(-4px); }
.ledger li b { order: 3; font: 500 13px/1 var(--mono); color: var(--brass-deep); white-space: nowrap; }
.rules ul { margin-top: 16px; }
.rules li { position: relative; padding: 11px 0 11px 22px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; }
.rules li:last-child { border-bottom: 1px solid var(--line); }
.rules li::before { content: ""; position: absolute; left: 2px; top: 1.45em; width: 9px; height: 1px; background: var(--brass); }

/* ------------------------------------------------------------ faq */
.faq-list details { border-top: 1px solid var(--line-strong); }
.faq-list details:last-child { border-bottom: 1px solid var(--line-strong); }
.faq-list summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -.008em; color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font: 400 22px/1 var(--mono); color: var(--brass); transition: transform .25s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { max-width: 38em; padding: 0 0 26px; font-size: 16px; line-height: 1.7; }
.faq-list details p a { color: var(--ink); }

/* ------------------------------------------------------------ contact */
.contact .prose { margin-top: 26px; }
.contact-mail { font-size: 15.5px; }
.contact-mail a { color: var(--ink); font-weight: 600; }
.lead {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px;
  padding: 34px 34px 30px; background: var(--sheet);
  border: 1px solid var(--line-strong); border-radius: 4px;
  box-shadow: 0 34px 70px -44px rgba(20, 32, 46, .34);
}
.field--wide { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 7px; font: 600 12.5px/1.4 var(--sans); color: var(--ink); }
.field label span { margin-left: 6px; font: 400 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 13px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--field-line); border-radius: 3px;
  font: 400 15.5px/1.4 var(--sans);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(154, 123, 63, .18); }
.lead.was-tried .field :invalid { border-color: var(--crit); }
.check { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; cursor: pointer; }
.check input { flex: none; width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--ink); }
.check a { color: var(--ink); }
.check i { color: var(--muted); font-style: normal; }
.lead.was-tried .check input:invalid + span { color: var(--crit); }
.lead-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.lead-status { font-size: 14px; line-height: 1.5; color: var(--text); }
.lead-status.is-error { color: var(--crit); }
.lead-status.is-ok { color: var(--ok); font-weight: 600; }
/* shown until the script has taken the form: without it the button stays disabled */
.lead-fallback { font-size: 14px; color: var(--text); }
.lead-fallback a { color: var(--ink); }
.lead.is-ready .lead-fallback { display: none; }
.lead:not(.is-ready) .btn[disabled] { cursor: not-allowed; }

/* ------------------------------------------------------------ footer */
.site-foot { padding: 72px 0 40px; border-top: 1px solid var(--line-strong); background: var(--paper-2); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 48px; }
.foot-brand img { height: 84px; width: auto; margin-left: -6px; }
.foot-brand p { margin-top: 18px; max-width: 26em; font-size: 14.5px; line-height: 1.6; }
.site-foot nav { display: flex; flex-direction: column; gap: 10px; }
.site-foot nav .label { margin-bottom: 6px; }
.site-foot nav a { font-size: 14.5px; text-decoration: none; }
.site-foot nav a:hover { text-decoration: underline; }
.foot-bottom { display: flex; justify-content: space-between; gap: 40px; margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); font: 400 11.5px/1.6 var(--mono); letter-spacing: .02em; color: var(--muted); }
.foot-bottom p:first-child { white-space: nowrap; }
.foot-bottom p:last-child { max-width: 62em; text-align: right; }

/* ------------------------------------------------------------ responsive */
/* A laptop at 125% zoom: two columns still, but the policy page needs the room
   for its longest row («Scoperto») to stay on one line. */
@media (min-width: 1081px) and (max-width: 1240px) {
  :root { --note-w: 172px; }
  .hero .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 44px; }
}

@media (max-width: 1080px) {
  :root { --sec: 88px; }
  .hero .wrap, .split, .sec-head, .versus, .job, .founder-grid, .pricing-detail { grid-template-columns: 1fr; gap: 40px; }
  .report-nav ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .report-nav a { padding-bottom: 14px; }
  .hero .wrap { padding-top: 44px; }
  .sec-head { align-items: start; margin-bottom: 48px; }
  .nav, .head-actions .btn { display: none; }
  .head-actions { margin-left: auto; }
  .m-menu { display: block; position: relative; }
  .m-menu summary { display: grid; gap: 5px; width: 44px; height: 44px; padding: 13px 10px; cursor: pointer; list-style: none; border: 1px solid var(--line-strong); border-radius: 3px; }
  .m-menu summary::-webkit-details-marker { display: none; }
  .m-menu summary span { display: block; height: 1.5px; background: var(--ink); }
  .m-menu nav { position: absolute; right: 0; top: 56px; width: min(320px, calc(100vw - 40px)); padding: 8px 22px; background: var(--sheet); border: 1px solid var(--line-strong); border-radius: 4px; box-shadow: 0 30px 60px -30px rgba(20, 32, 46, .4); }
  .m-menu nav a { display: block; padding: 14px 0; border-top: 1px solid var(--line); font-weight: 500; text-decoration: none; color: var(--ink); }
  .m-menu nav a:first-child { border-top: 0; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plan:nth-child(3) { border-left: 0; }
  .plan:nth-child(n+3) { border-top: 1px solid var(--line); }
  .lines-list { columns: 2; }
  .portrait { max-width: 520px; }
  .foot-top { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .versus, .compare, .pull { margin-top: 56px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; --sec: 68px; --head-top: 90px; --head-h: 90px; --logo-h: 78px; --D: 124px; }
  html.is-scrolled { --head-h: 66px; --logo-h: 54px; }
  .site-head .wrap { gap: 14px; }
  body { font-size: 16px; }
  .lede { font-size: 16.5px; }
  .cta .btn { width: 100%; }
  .page { padding: 20px 18px 22px 20px; font-size: 13px; }
  .clause { grid-template-columns: 1fr; gap: 14px; }
  .note { margin-left: 9px; }
  .spec-head, .spec-foot { padding: 12px 18px; }
  .spec-head span:first-child { display: none; }
  .facts .wrap { grid-template-columns: 1fr 1fr; }
  .fact, .fact + .fact { padding: 22px 16px 20px 0; border-left: 0; }
  .fact:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--line); }
  .fact:nth-child(n+3) { border-top: 1px solid var(--line); }
  .fact b { font-size: 36px; }

  /* comparison table → one card per criterion */
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; width: auto; }
  .compare thead { display: none; }
  .compare tr { padding: 20px 0 8px; border-top: 1px solid var(--line-strong); }
  .compare tbody th { padding: 0 0 10px; border: 0; font-size: 16px; }
  .compare td { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 0; border-top: 1px solid var(--line); font-size: 15px; }
  .compare td::before { content: attr(data-col); font: 500 10px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .compare .us { padding-left: 0; background: transparent; border-left: 0; border-right: 0; }
  .compare td.us::before { color: var(--brass-deep); }

  .job { padding: 36px 0; }
  .job h3, .gains-grid h3 { font-size: 24px; }
  .panel { padding: 0 18px 20px; }
  .panel-head { margin: 0 -18px 14px; padding: 12px 18px; }
  .panel .row { flex-wrap: wrap; }
  .lines-list { columns: 1; margin-top: 40px; }
  .report-frame iframe { height: 460px; }
  .report-nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .gains-grid { grid-template-columns: 1fr; }
  .gains-grid article, .gains-grid article + article { padding: 28px 0 22px; border-left: 0; }
  .gains-grid article + article { border-top: 1px solid var(--line); }
  .data-list > div { grid-template-columns: 1fr; gap: 6px; }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
  .plan-for { min-height: 0; }
  .faq-list summary { font-size: 19px; padding: 18px 0; }
  .lead { grid-template-columns: 1fr; padding: 24px 20px; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .foot-bottom { flex-direction: column; gap: 12px; }
  .foot-bottom p:last-child { text-align: left; }
  .versus-a { font-size: 21px; }
  .ref { display: block; margin: 8px 0 0; }
}

@media (max-width: 359px) {
  :root { --logo-h: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .note, .k, .lens, .btn, .btn .arr, .faq-list summary::after, .site-head .wrap, .brand img { transition: none; }
}

/* On paper: the header once, the policy page annotated, no controls. */
@media print {
  body { padding-top: 0; background: #fff; }
  .site-head, html.head-fixed .site-head { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .skip, .nav, .head-actions, .m-menu, .cta, #count, .lens, .read-under, .report-nav, .report-frame, .lead { display: none !important; }
  .js .page { color: var(--ink); }
  .js .k { background: var(--brass-soft); box-shadow: 0 0 0 3px var(--brass-soft); }
  .js .note { opacity: 1; transform: none; }
  .sec { padding: 40px 0; }
  .specimen, .panel, .versus-card--us { box-shadow: none; }
  .data { background: none; color: var(--text); }
  .data h2, .data-list dd, .data-links a { color: var(--ink); }
  .data-links { color: var(--text); }
  .data-list dt { color: var(--brass-deep); }
  .data-list > div, .data-list > div:last-child { border-color: var(--line); }
  .job, .plan, .gains-grid article, .faq-list details, .versus-card { break-inside: avoid; }
}