/* ==========================================================================
   Tokens. Every colour, size, space, radius and duration lives here.
   Mobile first; overrides for 640px and 1024px follow in this block.
   ========================================================================== */

:root {
  /* Colour */
  --paper: #F7F5F0;
  --paper-2: #ECE8DF;
  --surface: #FFFFFF;
  --line: #DAD5CA;
  --stone: #6B665C;
  --stone-light: #A7A294;
  --ink-2: #4A4740;
  --ink: #22211E;
  --accent: #2F6B4F;
  --accent-text: var(--accent);
  --on-accent: var(--paper);
  --tint: #DBE2D9;
  --tint-panel: #EAF0EC;
  --shadow-panel: 0 1px 0 rgba(34, 33, 30, 0.04), 0 32px 64px -32px rgba(34, 33, 30, 0.35);

  /* Type */
  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-17: 17px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-26: 26px;
  --fs-28: 28px;
  --fs-36: 36px;
  --fs-44: 44px;
  --fs-48: 48px;
  --fs-64: 64px;

  --fs-h1: var(--fs-44);
  --fs-h2: var(--fs-36);
  --fs-statement: var(--fs-36);
  --fs-lede: var(--fs-17);
  --fs-quote: var(--fs-28);
  --fs-layer: var(--fs-28);
  --fs-small: var(--fs-15);
  --fs-code-file: var(--fs-12);

  --lh-none: 1;
  --lh-display: 1.02;
  --lh-tight: 1.1;
  --lh-quote: 1.15;
  --lh-title: 1.3;
  --lh-label: 1.4;
  --lh-ui: 1.5;
  --lh-body: 1.6;
  --lh-num: 2;

  --ls-display: -0.025em;
  --ls-statement: -0.02em;
  --ls-wordmark: -0.02em;
  --ls-title: -0.015em;
  --ls-lede: -0.005em;
  --ls-label: 0.08em;

  /* Space */
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-10: 10px;
  --s-12: 12px;
  --s-16: 16px;
  --s-17: 17px;
  --s-20: 20px;
  --s-24: 24px;
  --s-28: 28px;
  --s-30: 30px;
  --s-32: 32px;
  --s-40: 40px;
  --s-44: 44px;
  --s-48: 48px;
  --s-64: 64px;
  --s-96: 96px;
  --s-128: 128px;
  --s-160: 160px;

  --gutter: var(--s-20);
  --section-y: var(--s-64);
  --content-gap: var(--s-40);
  --contact-y-top: var(--s-48);
  --footer-y-top: var(--s-64);
  --footer-y-bottom: var(--s-40);
  --footer-gap: var(--s-48);
  --footer-rule-gap: var(--s-24);

  /* Lines, radii, focus */
  --rule: 1px;
  --rule-2: 2px;
  --rule-3: 3px;
  --radius: 2px;
  --radius-panel: 6px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --underline-offset: 4px;

  /* Sizes */
  --container: 1280px;
  --nav-h: 64px;
  --nav-btn-h: 44px;
  --btn-h: 48px;
  --control-h: 48px;
  --target: 44px;
  --mark-w: 24px;
  --icon-sm: 14px;
  --icon: 16px;
  --icon-lg: 20px;
  --icon-stroke: 14;
  --icon-stroke-bold: 16;
  --caret-top: 14px;

  --panel-w: 440px;
  --panel-h: 440px;
  --panel-bar-h: 48px;
  --logo-w: 88px;
  --logo-h: 24px;

  --door-h: 400px;
  --door-lintel-inset: var(--s-4);
  --door-post-inset: var(--s-12);
  --door-panel-inset: var(--s-20);
  --door-panel-top: var(--s-24);
  --door-overhang: 16px;
  --hero-overhang: 64px;
  --hero-h: 900px;
  --hero-door-top: 232px;
  --hero-text-bottom: 112px;
  --hero-text-w: 720px;

  --statement-line-w: 46%;
  --close-line-w: 60%;
  --close-h: 520px;
  --layer-min-h: 120px;
  --moment-scroll: 800px;
  --moment-stage-pad: var(--s-32);
  --moment-stage-span: 7;
  --page-min-h: 560px;

  --measure-h1: 14ch;
  --measure-h2: 20ch;
  --measure-lede: 44ch;
  --measure-intro: 56ch;
  --measure-close: 52ch;
  --measure-notice: 80ch;
  --measure-page: 64ch;

  /* Motion */
  --dur-fade: 320ms;
  --dur-nav: 160ms;
  --dur-reveal: 600ms;
  --dur-hero: 900ms;
  --delay-hero: 200ms;
  --stagger: 60ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --rise: 12px;
  --reveal-scale: 0.96;
}

@media (min-width: 640px) {
  :root {
    --gutter: var(--s-40);
    --nav-h: 72px;
    --fs-h1: var(--fs-64);
    --fs-h2: var(--fs-48);
    --fs-statement: var(--fs-48);
    --fs-lede: var(--fs-20);
    --fs-quote: var(--fs-36);
    --fs-layer: var(--fs-36);
    --fs-small: var(--fs-17);
    --section-y: var(--s-96);
    --content-gap: var(--s-48);
    --contact-y-top: var(--s-64);
    --footer-y-top: var(--s-96);
    --footer-y-bottom: var(--s-48);
    --footer-gap: var(--s-96);
    --footer-rule-gap: var(--s-32);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: 80px;
    --nav-btn-h: 40px;
    --fs-h1: clamp(56px, 12.5vw - 72px, 88px);
    --fs-h2: var(--fs-64);
    --fs-statement: var(--fs-64);
    --ls-statement: var(--ls-display);
    --fs-quote: var(--fs-44);
    --lh-quote: var(--lh-tight);
    --fs-layer: var(--fs-44);
    --fs-code-file: var(--fs-14);
    --lh-num: 1.9;
    --section-y: var(--s-128);
    --content-gap: var(--s-64);
    --contact-y-top: var(--s-96);
    --panel-w: clamp(380px, 23.4375vw + 140px, 440px);
    --door-lintel-inset: 0px;
    --door-post-inset: var(--s-32);
    --door-panel-inset: 56px;
    --door-panel-top: calc(var(--rule-3) + var(--s-24));
    --hero-overhang: 0px;
    --close-line-w: 520px;
  }
}

@media (min-width: 1280px) {
  :root {
    --moment-stage-pad: var(--s-48);
    --moment-stage-span: 6;
  }
}

/* ==========================================================================
   Fonts (self-hosted, Latin subset)
   ========================================================================== */

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-normal.woff2') format('woff2');
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-grotesk-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/fonts/schibsted-grotesk-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, p, ol, ul, figure, pre { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }

::selection { background: var(--ink); color: var(--paper); }
::placeholder { color: var(--stone); opacity: 1; }

:focus-visible {
  outline: var(--focus-width) solid var(--accent);
  outline-offset: var(--focus-offset);
}

[id] { scroll-margin-top: var(--nav-h); }

.visually-hidden {
  position: absolute;
  width: var(--rule);
  height: var(--rule);
  margin: calc(-1 * var(--rule));
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-12);
  left: var(--s-12);
  z-index: 20;
  padding: var(--s-8) var(--s-16);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-14);
  transform: translateY(calc(-1 * (100% + var(--s-24))));
}
.skip-link:focus { transform: none; }

.container {
  box-sizing: content-box;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (min-width: 1024px) {
  .grid-12 {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-24);
  }
}

.serif {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
}

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-label);
  color: var(--stone);
}

.eyebrow {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}
.eyebrow::before {
  content: '';
  width: var(--mark-w);
  height: var(--rule-3);
  background: var(--accent);
}
.eyebrow--strong { color: var(--ink-2); }

.h2 {
  margin-top: var(--s-12);
  max-width: var(--measure-h2);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-lede);
  color: var(--ink-2);
  text-wrap: pretty;
}

.icon {
  flex-shrink: 0;
  width: var(--icon-lg);
  height: var(--icon-lg);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--16 { width: var(--icon); height: var(--icon); }
.icon--14 { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke-bold); }
.icon__dot { fill: currentColor; stroke: none; }

/* Buttons and links */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  height: var(--btn-h);
  padding: 0 var(--s-24);
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }

.link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: var(--target);
  font-size: var(--fs-17);
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--rule);
}
.link:hover { text-decoration-thickness: var(--rule-2); }

/* ==========================================================================
   Nav
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--nav-h);
  border-bottom: var(--rule) solid transparent;
}
.site-header.is-solid {
  background: var(--paper);
  border-bottom-color: var(--line);
}

.nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wordmark {
  display: flex;
  align-items: center;
  min-height: var(--target);
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--fs-26);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wordmark);
  line-height: var(--lh-none);
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-32);
}

.nav__link {
  display: none;
  font-size: var(--fs-14);
  color: var(--ink);
  text-decoration: none;
}
.nav__link:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }

.btn--nav {
  height: var(--nav-btn-h);
  padding: 0 var(--s-16);
  font-size: var(--fs-14);
}
.btn--nav .icon { display: none; }

@media (min-width: 768px) {
  .nav__link { display: inline; }
  .btn--nav .icon { display: block; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  margin-top: calc(-1 * var(--nav-h));
  padding-top: calc(var(--nav-h) + var(--s-48));
  background: var(--tint);
}

.hero__inner { position: relative; }

.hero__text { margin-top: var(--s-48); }

.hero__title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.hero__lede { margin-top: var(--s-24); }

.hero__ctas {
  margin-top: var(--s-32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-16);
}

.door {
  position: relative;
  height: var(--door-h);
  margin: var(--s-48) calc(-1 * var(--gutter)) 0;
}
.door__lintel {
  position: absolute;
  top: 0;
  left: var(--door-lintel-inset);
  right: var(--door-lintel-inset);
  height: var(--rule-3);
  background: var(--accent);
}
.door__post {
  position: absolute;
  top: var(--rule-3);
  bottom: 0;
  width: var(--rule);
  background: var(--stone-light);
}
.door__post--l { left: var(--door-post-inset); }
.door__post--r { right: var(--door-post-inset); }
.door__panel {
  position: absolute;
  top: var(--door-panel-top);
  left: var(--door-panel-inset);
  right: var(--door-panel-inset);
}

@media (prefers-reduced-motion: no-preference) {
  .door__panel {
    animation: rise var(--dur-hero) var(--ease) var(--delay-hero) both;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(var(--rise)); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 640px) {
  .hero__title { max-width: var(--measure-h1); }
  .hero__lede { max-width: var(--measure-lede); }
  .hero__ctas {
    flex-direction: row;
    align-items: center;
    gap: var(--s-32);
  }
  .door {
    width: calc(var(--panel-w) + 2 * var(--door-panel-inset));
    margin-left: calc(-1 * var(--door-panel-inset));
    margin-right: 0;
  }
}

@media (min-width: 1024px) {
  .hero {
    height: var(--hero-h);
    padding-top: 0;
    overflow: clip;
  }
  .hero .container,
  .hero__inner { height: 100%; }
  .hero__inner { padding-top: calc(var(--nav-h) + var(--s-48)); }
  .hero__text {
    position: absolute;
    left: 0;
    bottom: var(--hero-text-bottom);
    width: calc(100% + var(--door-overhang) - var(--panel-w) - 2 * var(--door-panel-inset) - var(--s-24));
    max-width: var(--hero-text-w);
    margin: 0;
  }
  .door {
    position: absolute;
    top: var(--hero-door-top);
    right: calc(-1 * var(--door-overhang));
    bottom: 0;
    height: auto;
    margin: 0;
  }
}

/* ==========================================================================
   Cover component (the "Insurance tab" mock)
   ========================================================================== */

.panel {
  width: 100%;
  max-width: var(--panel-w);
  height: var(--panel-h);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius-panel);
  color: var(--ink);
  font-family: var(--font-sans);
  text-align: left;
}
.panel--shadow { box-shadow: var(--shadow-panel); }

.panel__bar {
  height: var(--panel-bar-h);
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: var(--s-20);
  padding: 0 var(--s-20);
  border-bottom: var(--rule) solid var(--line);
}
.panel__logo {
  align-self: center;
  width: var(--logo-w);
  height: var(--logo-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--rule) dashed var(--stone-light);
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-label);
  color: var(--stone);
}
.panel__tabs {
  display: flex;
  align-items: stretch;
  gap: var(--s-16);
  font-size: var(--fs-13);
}
.panel__tab {
  display: flex;
  align-items: center;
  color: var(--stone);
}
.panel__tab--current {
  margin-bottom: calc(-1 * var(--rule));
  border-bottom: var(--rule-2) solid var(--ink);
  color: var(--ink);
  font-weight: var(--fw-medium);
}

.panel__views {
  flex-grow: 1;
  min-height: 0;
  display: grid;
}

.pv {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  padding: var(--s-24);
  font-size: var(--fs-14);
  line-height: var(--lh-ui);
}

.pv__name {
  font-size: var(--fs-17);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
}
.pv__meta { color: var(--stone); }
.pv__biz {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.pv__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  padding: var(--s-16);
  background: var(--tint-panel);
  border-radius: var(--radius);
  color: var(--ink-2);
}
.pv__notice .icon { color: var(--accent-text); }

.pv__rows {
  display: flex;
  flex-direction: column;
  border-top: var(--rule) solid var(--line);
}
.pv__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-16);
  padding: var(--s-10) 0;
  border-bottom: var(--rule) solid var(--line);
}
.pv__rows--tight .pv__row { padding: var(--s-8) 0; }
.pv__rows--docs .pv__row {
  align-items: center;
  gap: var(--s-12);
}
.pv__mono {
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  font-variant-numeric: tabular-nums;
}
.pv__doc {
  display: flex;
  align-items: center;
  gap: var(--s-10);
}
.pv__doc .icon { color: var(--stone); }
.pv__type {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--stone);
}

.pv__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-8);
}
.pv__amount {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--fs-44);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.pv__per { color: var(--stone); }

.pv__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-16);
}
.pv__card {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-16);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-2);
}
.pv__card--yes {
  border-color: var(--ink);
  color: var(--ink);
}
.pv__card--yes .label {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  color: var(--ink);
}

.pv__wording {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: var(--s-8);
  min-height: var(--target);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  text-decoration-thickness: var(--rule);
}

.pv__policy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-12);
}
.pv__status {
  display: flex;
  align-items: center;
  gap: var(--s-6);
  color: var(--accent-text);
}

.pv__btn {
  align-self: flex-start;
  margin-top: auto;
  height: var(--target);
  display: flex;
  align-items: center;
  gap: var(--s-8);
  padding: 0 var(--s-16);
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius);
  font-weight: var(--fw-medium);
  line-height: var(--lh-none);
}

/* Crossfading version used in "How it works" on desktop */
.panel--fade .pv {
  opacity: 0;
  visibility: hidden;
}
.panel--fade .pv.is-active {
  opacity: 1;
  visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
  .panel--fade .pv {
    transition: opacity var(--dur-fade) var(--ease), visibility 0s linear var(--dur-fade);
  }
  .panel--fade .pv.is-active {
    transition: opacity var(--dur-fade) var(--ease), visibility 0s;
  }
}

/* ==========================================================================
   Built for
   ========================================================================== */

.built-for {
  padding: calc(var(--s-48) + var(--hero-overhang)) 0 var(--s-32);
  border-bottom: var(--rule) solid var(--line);
}
.built-for__label { line-height: var(--lh-none); }
.built-for__list {
  margin-top: var(--s-16);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--s-16);
}
.built-for__list li {
  padding: var(--s-12) 0;
  border-top: var(--rule) solid var(--line);
  font-size: var(--fs-15);
  line-height: var(--lh-label);
  color: var(--ink-2);
}

@media (min-width: 640px) {
  .built-for__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .built-for { padding: var(--s-32) 0; }
  .built-for__inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: var(--s-12);
  }
  .built-for__label { padding-right: var(--s-20); }
  .built-for__list {
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    row-gap: var(--s-12);
  }
  .built-for__list li {
    padding: 0 var(--s-20);
    border-top: 0;
    border-left: var(--rule) solid var(--line);
    font-size: var(--fs-17);
    line-height: var(--lh-body);
  }
}

/* ==========================================================================
   Statement (scroll-driven)
   ========================================================================== */

.statement {
  padding: var(--section-y) 0;
  view-timeline: --statement block;
}

.statement__line {
  width: var(--statement-line-w);
  height: var(--rule-3);
  background: var(--accent);
  transform-origin: left center;
}

.statement__text {
  margin-top: var(--s-32);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--fs-statement);
  font-weight: var(--fw-light);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-statement);
  text-wrap: pretty;
  color: var(--ink);
}

@media (min-width: 1024px) {
  .statement__col { grid-column: 1 / span 11; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .statement__line {
      animation: draw linear both;
      animation-timeline: --statement;
      animation-range: cover 10% cover 35%;
    }
    .statement__words > span {
      animation: ink linear both;
      animation-timeline: --statement;
      animation-range:
        cover calc(15% + var(--i) * 1.2%)
        cover calc(20% + var(--i) * 1.2%);
    }
  }
}

@keyframes draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes ink {
  from { color: var(--stone-light); }
  to { color: var(--ink); }
}

.statement__words > :nth-child(1) { --i: 0; }
.statement__words > :nth-child(2) { --i: 1; }
.statement__words > :nth-child(3) { --i: 2; }
.statement__words > :nth-child(4) { --i: 3; }
.statement__words > :nth-child(5) { --i: 4; }
.statement__words > :nth-child(6) { --i: 5; }
.statement__words > :nth-child(7) { --i: 6; }
.statement__words > :nth-child(8) { --i: 7; }
.statement__words > :nth-child(9) { --i: 8; }
.statement__words > :nth-child(10) { --i: 9; }
.statement__words > :nth-child(11) { --i: 10; }
.statement__words > :nth-child(12) { --i: 11; }
.statement__words > :nth-child(13) { --i: 12; }
.statement__words > :nth-child(14) { --i: 13; }
.statement__words > :nth-child(15) { --i: 14; }
.statement__words > :nth-child(16) { --i: 15; }
.statement__words > :nth-child(17) { --i: 16; }
.statement__words > :nth-child(18) { --i: 17; }
.statement__words > :nth-child(19) { --i: 18; }
.statement__words > :nth-child(20) { --i: 19; }
.statement__words > :nth-child(21) { --i: 20; }
.statement__words > :nth-child(22) { --i: 21; }
.statement__words > :nth-child(23) { --i: 22; }
.statement__words > :nth-child(24) { --i: 23; }
.statement__words > :nth-child(25) { --i: 24; }
.statement__words > :nth-child(26) { --i: 25; }
.statement__words > :nth-child(27) { --i: 26; }
.statement__words > :nth-child(28) { --i: 27; }
.statement__words > :nth-child(29) { --i: 28; }
.statement__words > :nth-child(30) { --i: 29; }

/* ==========================================================================
   How it works
   ========================================================================== */

.moment { padding-bottom: var(--section-y); }

.moment__intro {
  margin-top: var(--s-24);
  max-width: var(--measure-intro);
}

/* Mobile and tablet: every step in full, each with a static panel */
.moment__list {
  margin-top: var(--s-48);
  display: flex;
  flex-direction: column;
  gap: var(--s-48);
}
.moment__item {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}

.step-copy {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-left: var(--s-17);
  border-left: var(--rule-3) solid var(--accent);
}
.step-copy .label,
.step .label { color: inherit; }
.step-copy__title,
.step__title {
  display: block;
  font-size: var(--fs-22);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.step-copy__body,
.step__body {
  font-size: var(--fs-17);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

/* Desktop: sticky panel, clickable steps */
.moment__track { display: none; }

@media (min-width: 1024px) {
  .moment__list { display: none; }
  .moment__track {
    display: block;
    margin-top: var(--content-gap);
  }
  .moment__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-24);
    align-items: start;
  }
  .moment__stage {
    grid-column: 1 / span var(--moment-stage-span);
    padding: var(--moment-stage-pad);
    background: var(--tint);
  }
  .moment__steps {
    grid-column: 8 / span 5;
    display: flex;
    flex-direction: column;
  }
}

@media (min-width: 1024px) and (min-height: 720px) {
  .moment__grid {
    position: sticky;
    top: calc(var(--nav-h) + var(--s-48));
  }
  .moment__track::after {
    content: '';
    display: block;
    height: var(--moment-scroll);
  }
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  width: 100%;
  padding: var(--s-28) 0 var(--s-28) var(--s-32);
  background: none;
  border: 0;
  border-left: var(--rule) solid var(--line);
  color: var(--stone);
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
}
.step:hover { color: var(--ink-2); }
.step[aria-pressed='true'] {
  padding-left: var(--s-30);
  border-left: var(--rule-3) solid var(--accent);
  color: var(--ink);
}
.step__body { display: none; }
.step[aria-pressed='true'] .step__body { display: block; }

/* ==========================================================================
   For platforms
   ========================================================================== */

.platforms {
  padding: var(--section-y) 0;
  border-top: var(--rule) solid var(--line);
}

.points {
  margin-top: var(--content-gap);
  border-bottom: var(--rule) solid var(--line);
}
.points li {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-24) 0;
  border-top: var(--rule) solid var(--line);
}
.points__title {
  font-size: var(--fs-22);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.points__body { color: var(--ink-2); }

.platforms__side {
  min-width: 0;
  margin-top: var(--content-gap);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-16);
}

.code {
  align-self: stretch;
  min-width: 0;
  margin-inline: calc(-1 * var(--gutter));
  background: var(--paper-2);
  color: var(--ink);
}
.code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-20);
  border-bottom: var(--rule) solid var(--line);
}
.code__file {
  font-family: var(--font-mono);
  font-size: var(--fs-code-file);
  color: var(--stone);
}
.code__tools {
  display: flex;
  align-items: center;
  gap: var(--s-12);
}
.code__tag--long { display: none; }
.code__copy {
  min-height: var(--target);
  padding: 0 var(--s-4);
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  cursor: pointer;
}
.code pre {
  padding: var(--s-24) var(--s-20);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}
.tok-s { color: var(--accent-text); }
.tok-c { color: var(--stone); }

@media (min-width: 640px) {
  .code { margin-inline: 0; }
  .code__head { padding: var(--s-12) var(--s-32); }
  .code__tools { gap: var(--s-16); }
  .code__tag--long { display: inline; }
  .code__tag--short { display: none; }
  .code pre { padding: var(--s-32); }
}

@media (min-width: 1024px) {
  .platforms__grid {
    margin-top: var(--content-gap);
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-24);
    align-items: start;
  }
  .points {
    grid-column: 1 / span 5;
    margin-top: 0;
  }
  .platforms__side {
    grid-column: 7 / span 6;
    margin-top: 0;
    gap: var(--s-24);
  }
}

/* ==========================================================================
   The stack
   ========================================================================== */

.stack { padding-bottom: var(--section-y); }

.layers {
  margin-top: var(--content-gap);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.layer {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-24) var(--s-20);
  border: var(--rule) solid var(--line);
}
.layer__title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--fs-layer);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-title);
}
.layer__body {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.layer--lintel {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.layer--lintel .label,
.layer--lintel .layer__body { color: inherit; }

@media (min-width: 1024px) {
  .layer {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-24);
    align-items: center;
    min-height: var(--layer-min-h);
    padding: var(--s-32) var(--s-24);
  }
  .layer__title { grid-column: 2 / span 5; }
  .layer__body { grid-column: 7 / span 6; }
}

/* Reveal on first view (classes added by main.js) */
.layers.is-pending > .layer {
  opacity: 0;
  transform: scale(var(--reveal-scale));
}
.layers.is-pending.is-in > .layer {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.layers.is-in > .layer:nth-child(2) { transition-delay: var(--stagger); }
.layers.is-in > .layer:nth-child(3) { transition-delay: calc(2 * var(--stagger)); }

/* ==========================================================================
   What we'll insure
   ========================================================================== */

.cover { padding-bottom: var(--section-y); }

.lines {
  width: 100%;
  margin-top: var(--content-gap);
  border-collapse: collapse;
  border-bottom: var(--rule) solid var(--line);
}
.lines thead { display: none; }
.lines tr {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-20) 0;
  border-top: var(--rule) solid var(--line);
}
.lines tbody tr:first-child { border-top-color: var(--ink); }
.lines th,
.lines td {
  padding: 0;
  text-align: left;
  font-weight: inherit;
}
.lines__name {
  font-size: var(--fs-22);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-title);
  line-height: var(--lh-title);
}
.lines__what {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.lines__status { color: var(--accent-text); }
.lines .is-later,
.lines .is-later .lines__what,
.lines .is-later .lines__status { color: var(--stone); }

@media (min-width: 640px) {
  .lines { border-bottom: 0; }
  .lines thead { display: table-header-group; }
  .lines tr {
    display: table-row;
    border-top: 0;
  }
  .lines th {
    padding: 0 var(--s-24) var(--s-16) 0;
    border-bottom: var(--rule) solid var(--ink);
  }
  .lines th:last-child { padding-right: 0; }
  .lines__col-line { width: 33%; }
  .lines__col-what { width: 50%; }
  .lines__col-status { width: 17%; }
  .lines td {
    padding: var(--s-24) var(--s-24) var(--s-24) 0;
    border-bottom: var(--rule) solid var(--line);
    vertical-align: baseline;
  }
  .lines td:last-child { padding-right: 0; }
}

/* ==========================================================================
   Why Lintel
   ========================================================================== */

.why {
  padding: var(--section-y) 0;
  background: var(--paper-2);
}
.why__quote {
  margin-top: var(--s-24);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--fs-quote);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: var(--lh-quote);
  letter-spacing: var(--ls-title);
  text-wrap: balance;
}
.why__body {
  margin-top: var(--s-32);
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}
.why__body p:last-child { color: var(--ink); }

@media (min-width: 640px) {
  .why__body {
    margin-top: var(--s-48);
    gap: var(--s-24);
  }
}

@media (min-width: 1024px) {
  .why__col { grid-column: 3 / span 7; }
}

/* ==========================================================================
   Close and contact
   ========================================================================== */

.close {
  padding: var(--s-160) 0 var(--section-y);
  background: var(--tint);
  color: var(--ink);
}
.close__line {
  width: var(--close-line-w);
  height: var(--rule-3);
  background: var(--accent);
}
.close__title { margin-top: var(--s-32); }
.close__lede {
  margin-top: var(--s-20);
  max-width: var(--measure-close);
}

@media (min-width: 1024px) {
  .close {
    min-height: var(--close-h);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 0 var(--s-96);
  }
  .close .container { width: calc(100% - 2 * var(--gutter)); }
  .close__lede { margin-top: var(--s-24); }
}

.contact { padding: var(--contact-y-top) 0 var(--section-y); }

.contact__title {
  font-size: var(--fs-22);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.contact__intro {
  margin-top: var(--s-12);
  max-width: var(--measure-close);
  color: var(--ink-2);
}

.form {
  margin-top: var(--s-32);
  display: grid;
  gap: var(--s-20);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
.field label {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
}
.input {
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--s-16);
  background: var(--surface);
  border: var(--rule) solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-17);
}
textarea.input {
  height: auto;
  padding: var(--s-12) var(--s-16);
  line-height: var(--lh-body);
  resize: vertical;
}
.select { position: relative; }
.select .input {
  padding-right: var(--s-44);
  appearance: none;
  -webkit-appearance: none;
}
.select .icon {
  position: absolute;
  top: var(--caret-top);
  right: var(--s-16);
  color: var(--ink);
  pointer-events: none;
}

.hp {
  position: absolute;
  left: -100vw;
  width: var(--rule);
  height: var(--rule);
  overflow: hidden;
}

.form__note {
  font-size: var(--fs-14);
  line-height: var(--lh-ui);
  color: var(--stone);
}
.form__note a {
  color: var(--ink);
  text-underline-offset: var(--underline-offset);
}
.form__submit { justify-content: center; }
.form__submit:disabled { cursor: progress; }

.form-status:not(:empty) {
  margin-top: var(--s-32);
  padding-left: var(--s-17);
  border-left: var(--rule-3) solid var(--accent);
  font-size: var(--fs-lede);
  line-height: var(--lh-body);
  color: var(--ink);
}
.form-status a { text-underline-offset: var(--underline-offset); }
.form-status:focus { outline: none; }

.next { margin-top: var(--s-48); }
.next__list {
  margin-top: var(--s-16);
  border-bottom: var(--rule) solid var(--line);
}
.next__list li {
  display: flex;
  gap: var(--s-16);
  padding: var(--s-16) 0;
  border-top: var(--rule) solid var(--line);
}
.next__list .label { line-height: var(--lh-num); }
.next__text {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--ink-2);
}

@media (min-width: 640px) {
  .form {
    margin-top: var(--s-40);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-24);
  }
  .field--full,
  .form__note,
  .form__submit { grid-column: 1 / -1; }
  .form__submit { justify-self: start; }
  .next { margin-top: var(--s-64); }
  .next__list { margin-top: var(--s-24); }
  .next__list li { padding: var(--s-20) 0; }
}

@media (min-width: 1024px) {
  .contact__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--s-24);
    align-items: start;
  }
  .contact__main { grid-column: 1 / span 7; }
  .next {
    grid-column: 9 / span 4;
    margin-top: 0;
    padding-top: var(--s-4);
  }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  padding: var(--footer-y-top) 0 var(--footer-y-bottom);
  background: var(--paper-2);
  color: var(--ink);
}
.footer__cols {
  margin-top: var(--s-40);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-24);
}
.footer__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-12);
  font-size: var(--fs-14);
  line-height: var(--lh-title);
}
.footer__head { color: var(--stone); }
.footer__col a { text-decoration: none; }
.footer__col a:hover { text-decoration: underline; text-underline-offset: var(--underline-offset); }
.footer__legal {
  margin-top: var(--footer-gap);
  padding-top: var(--footer-rule-gap);
  border-top: var(--rule) solid var(--line);
}
.footer__notice {
  max-width: var(--measure-notice);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  color: var(--ink-2);
}
.footer__copy {
  margin-top: var(--footer-rule-gap);
  font-size: var(--fs-14);
  color: var(--ink-2);
}

@media (min-width: 640px) {
  .footer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .footer__top .wordmark { min-height: 0; }
  .footer__cols {
    margin-top: 0;
    display: flex;
    gap: var(--s-96);
  }
}

/* ==========================================================================
   Simple pages (privacy, 404)
   ========================================================================== */

.page {
  padding: var(--s-64) 0 var(--section-y);
}
.page__col { max-width: var(--measure-page); }
.page__title {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--fs-h2);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.page__intro { margin-top: var(--s-24); }
.page h2 {
  margin-top: var(--s-40);
  font-size: var(--fs-22);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  letter-spacing: var(--ls-title);
}
.page h2 + p { margin-top: var(--s-12); }
.page p:not(.lede) { color: var(--ink-2); }
.page p a { color: var(--ink); text-underline-offset: var(--underline-offset); }

.lost {
  min-height: var(--page-min-h);
  margin-top: calc(-1 * var(--nav-h));
  padding: calc(var(--nav-h) + var(--s-96)) 0 var(--section-y);
  background: var(--tint);
}
.lost__title {
  margin-top: var(--s-24);
  max-width: var(--measure-h1);
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-size: var(--fs-h1);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}
.lost .link { margin-top: var(--s-32); }

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}