/* ============================================================
   R2 PIPELINE — PRECISION EDITORIAL SYSTEM
   Artifact language: architectural window schedule.
   Dimension rules, unit codes, sightlines, pane grids.
   ============================================================ */

:root {
  /* Palette — sampled from the golden-hour footage, reconciled with brand */
  --night:      #0A0D14;
  --night-soft: #12161F;
  --paper:      #F4F1EA;
  --glass:      #9FB3B8;
  --oak:        #B58A5A;
  --goldenhour: #FBBF24;
  --closed:     #1F5F4A;

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, monospace;

  --gutter: clamp(20px, 4.2vw, 72px);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --line: rgba(244, 241, 234, .17);
  --line-dark: rgba(10, 13, 20, .20);

  --title-wdth: 82;
}

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

html {
  background: var(--night);
  color: var(--paper);
  font-family: var(--display);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--night);
  color: var(--paper);
  overflow-x: clip;
}

a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--goldenhour); outline-offset: 4px; }

img { max-width: 100%; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Data / micro type: the schedule callouts ---------- */

.micro {
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* ---------- Signature: the pane grid ----------
   A mullion-weight sash dividing the viewport.
   Subdivides on scroll: one pane becomes four becomes nine.
   -------------------------------------------- */

.pane-grid {
  position: absolute;
  inset: 0 var(--gutter);
  pointer-events: none;
  --mullion: rgba(244, 241, 234, .13);
  --sash-count: 1;
}

.pane-grid__v,
.pane-grid__h {
  position: absolute;
  inset: 0;
  transition: opacity 900ms var(--ease-out);
}

.pane-grid__v {
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc((100% / var(--sash-count)) - 1px),
    var(--mullion) calc((100% / var(--sash-count)) - 1px),
    var(--mullion) calc(100% / var(--sash-count))
  );
}

.pane-grid__h {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent calc((100% / var(--sash-count)) - 1px),
    var(--mullion) calc((100% / var(--sash-count)) - 1px),
    var(--mullion) calc(100% / var(--sash-count))
  );
  mask-image: linear-gradient(180deg, transparent, black 12%, black 84%, transparent);
}

/* Dimension line — architectural, with arrow ticks, not a progress bar */

.dimension {
  position: relative;
  height: 1px;
  background: rgba(244, 241, 234, .26);
}

.dimension::before,
.dimension::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: rgba(244, 241, 234, .5);
}

.dimension::before { left: 0; }
.dimension::after { right: 0; }

.dimension__fill {
  position: absolute;
  inset: 0;
  background: var(--goldenhour);
  transform: scaleX(var(--frame-progress, 0));
  transform-origin: left;
  will-change: transform;
}

/* ---------- Shared header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 90;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  min-height: 68px;
  padding: max(14px, env(safe-area-inset-top)) var(--gutter) 12px;
  background: linear-gradient(180deg, rgba(10, 13, 20, .82), transparent);
  backdrop-filter: blur(3px);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  font-size: 18px;
  font-weight: 780;
  font-variation-settings: "wdth" 88;
  letter-spacing: -.03em;
  /* Condensed faces narrow the space glyph as well as the letters, so negative
     tracking closes word gaps entirely — "R2 Pipeline" reads as "R2PIPELINE".
     Word-spacing buys the gap back without loosening the letterforms. */
  word-spacing: .22em;
  text-transform: uppercase;
  text-decoration: none;
}

/* The funnel mark from the R2 Pipeline lockup: a pipeline narrowing to a
   close. Inline SVG so it inherits colour in both header states. */
.brand-mark {
  flex: none;
  width: 26px;
  height: 26px;
  fill: var(--goldenhour);
  transition: fill 220ms ease;
}

/* The header grows a little to carry the larger lockup without crowding it. */
.site-header { min-height: 74px; }

.site-header.is-over-light .brand-mark { fill: #8A6410; }

.site-nav {
  display: flex;
  justify-content: center;
  gap: clamp(14px, 2vw, 30px);
}

.site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: rgba(244, 241, 234, .74);
  transition: color 220ms ease;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] { color: var(--goldenhour); }

.site-header__end {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}

.site-header__tel {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: rgba(244, 241, 234, .74);
}

.site-header__tel:hover { color: var(--paper); }

/* ---------- Buttons ---------- */

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  min-height: 54px;
  padding: 0 20px;
  border: 1px solid rgba(244, 241, 234, .56);
  background: rgba(10, 13, 20, .18);
  color: var(--paper);
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 250ms ease, background 250ms ease, border-color 250ms ease;
}

.cta::after { content: "\2197"; font-size: 15px; }
.cta:hover { background: var(--paper); border-color: var(--paper); color: var(--night); }

.cta--solid {
  border-color: var(--goldenhour);
  background: var(--goldenhour);
  color: var(--night);
  font-weight: 500;
}

.cta--solid:hover { background: var(--paper); border-color: var(--paper); }

.cta--onlight {
  border-color: rgba(10, 13, 20, .5);
  color: var(--night);
}

.cta--onlight:hover { background: var(--night); border-color: var(--night); color: var(--paper); }

/* ---------- Page shell for non-sequence pages ---------- */

.page {
  padding: clamp(120px, 15vh, 190px) var(--gutter) clamp(80px, 10vw, 130px);
}

.page--light {
  background: var(--paper);
  color: var(--night);
}

/* Stacked, not side-by-side: the two-column version forced the title to wrap
   at ~14 characters and pushed the subhead into a corner, wasting most of the
   fold on every page. */
.page-head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 14px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}

.page--light .page-head { border-bottom-color: var(--line-dark); }

.page-title {
  margin: 0;
  max-width: 24ch;
  font-size: clamp(42px, 6.2vw, 88px);
  font-weight: 780;
  font-variation-settings: "wdth" 86;
  letter-spacing: -.07em;
  /* Tight tracking on a condensed face swallows the word gap at display sizes. */
  word-spacing: .12em;
  line-height: .84;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--goldenhour);
}

/* Amber on cream fails contrast, so light sections get the darkened tone. */
.page--light .page-title,
.editorial .page-title { color: #8A6410; }

.page-aside {
  justify-self: start;
  max-width: 54rem;
  margin: 0;
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.4;
  letter-spacing: -.02em;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 20px;
}

.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--goldenhour);
}

/* ---------- Forms ---------- */

.field { display: grid; gap: 7px; margin-bottom: 18px; }

.field label {
  font-family: var(--data);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--glass);
}

/* `.editorial` is a light section inside an otherwise dark page, so it needs
   the same light-context form treatment as `.page--light`. */
.page--light .field label,
.editorial .field label { color: rgba(10, 13, 20, .66); }

.field input,
.field select {
  /* Inputs nested below the grid child (e.g. inside .field__unit) do not
     stretch on their own, and inputs carry an intrinsic default width. */
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: rgba(244, 241, 234, .04);
  color: inherit;
  font-family: var(--display);
  font-size: 16px;
  transition: border-color 220ms ease, background 220ms ease;
}

.page--light .field input,
.page--light .field select,
.editorial .field input,
.editorial .field select {
  border-color: rgba(10, 13, 20, .32);
  background: rgba(10, 13, 20, .03);
}

/* The dropdown list of a native <select> is drawn by the browser, not by the
   page, and it uses its own light background regardless of the control's dark
   styling. The options were only inheriting `color` from the page — light ink —
   so the open list came out light-on-light and every option except the hovered
   one was unreadable.

   `color: inherit` cannot work here: there is nothing sensible to inherit from
   when the surface belongs to the browser. So the options carry their own
   surface and ink, which also makes the open list look like the site instead of
   an OS default. #F4F1EA on #12161F measures 16.05:1; the broken pairing it
   replaces — light ink on the browser's own near-white list — was 1.01:1, which
   is why every unhovered option was simply invisible.

   Both properties must be set together — setting only `color` leaves the
   browser's background in play, which is the bug this replaces. */
.field select option,
.field select optgroup {
  background-color: var(--night-soft);
  color: var(--paper);
}

/* Windows high-contrast and forced-colors modes supply their own pairing, and
   overriding it there is worse than leaving it alone. */
@media (forced-colors: active) {
  .field select option,
  .field select optgroup {
    background-color: Canvas;
    color: CanvasText;
  }
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--goldenhour);
  background: rgba(251, 191, 36, .06);
}

/* ---------- Autofilled fields ----------
   Browsers repaint autofilled inputs with their own pale background and leave
   the author's text colour alone. On these dark fields that produced light ink
   on near-white: measured at 1.10:1, i.e. invisible. Saved logins looked blank.

   The two engines have to be handled separately, and the rules must NOT be
   merged into one selector list — an unknown pseudo-class invalidates the whole
   rule, so a shared list would break in both browsers.

   Firefox forces the background from its UA stylesheet with !important, which
   outranks author !important in the cascade, so it genuinely cannot be
   repainted. The ink is what's left to change: dark ink on that yellow measures
   18.90:1.

   Chrome can be repainted, and is deliberately given the same light treatment
   so an autofilled field looks the same in both — and reads as the "this came
   from your password manager" state browsers intend it to be. */

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus,
.field textarea:-webkit-autofill,
.field select:-webkit-autofill {
  -webkit-text-fill-color: var(--night) !important;
  -webkit-box-shadow: 0 0 0 60px var(--paper) inset !important;
  caret-color: var(--night) !important;
}

.field input:-moz-autofill,
.field textarea:-moz-autofill,
.field select:-moz-autofill {
  color: var(--night) !important;
  caret-color: var(--night) !important;
}

/* Error styling must wait until the visitor has actually done something wrong.

   This was `:invalid:not(:placeholder-shown)`, which reads as "invalid, but not
   while still empty". That only holds when the input HAS a placeholder attribute
   — and none of these do. With no placeholder, :placeholder-shown never matches,
   the :not() is always true, and so every empty required field rendered in the
   error colour the moment the form appeared. A form that opens pre-scolded.

   :user-invalid is the property that actually means what was intended: invalid
   AND the user has interacted with it. Browsers without support simply skip the
   rule, which degrades to no error tint at all — the native validation message
   still does its job. */
.field input:user-invalid,
.field textarea:user-invalid,
.field select:user-invalid { border-color: #C4553F; }

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  margin: 22px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--glass);
}

.page--light .consent,
.editorial .consent { color: rgba(10, 13, 20, .72); }

.consent input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--goldenhour);
}

.form-status {
  margin-top: 14px;
  min-height: 20px;
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.form-status[data-state="error"] { color: #E0755C; }
.form-status[data-state="ok"] { color: var(--closed); }
.page:not(.page--light) .form-status[data-state="ok"] { color: #6FCFA8; }

/* ---------- Footer ---------- */

.site-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  padding: 42px var(--gutter) max(42px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--night);
  color: var(--glass);
}

.site-footer p { margin: 0; max-width: 52rem; }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: flex-end;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: 4px;
}

/* ============================================================
   SOCIAL PROOF
   Written quotes, an outbound link to the public review profile,
   and a slot for the GHL reviews widget. Styled for the dark page
   shell by default, with light-context overrides for `.editorial`.
   ============================================================ */

.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(32px, 4vw, 52px);
}

.quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 30px 22px 24px;
  border: 1px solid var(--line);
  text-align: center;
}

/* The supplied headshots are already circular PNGs with transparency, so the
   ring sits flush against the mask edge. Uniform size across all three
   regardless of their differing source dimensions. */
.quote__face {
  width: clamp(116px, 11.5vw, 164px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--goldenhour);
  object-fit: cover;
}

.quote__stars {
  display: flex;
  gap: 3px;
  color: var(--goldenhour);
  font-size: 14px;
  letter-spacing: .1em;
}

/* Left-aligned body text — four centred lines is a real readability cost. */
.quote blockquote {
  flex: 1;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -.015em;
  text-align: left;
}

.quote figcaption {
  width: 100%;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--glass);
}

.editorial .quote { border-color: var(--line-dark); }
.editorial .quote figcaption { border-top-color: var(--line-dark); color: rgba(10, 13, 20, .58); }

/* The grid holds every testimonial; script.js reveals a random six. The
   attribute alone is not enough — `.quote` sets display:flex, which beats
   [hidden]'s display:none, so this has to be explicit. */
.quote[hidden] { display: none !important; }

.quote__role {
  display: block;
  margin-top: 3px;
  font-size: 9px;
  opacity: .75;
}

/* Longer reviews are clamped so the two rows stay even. Only the ones that
   actually overflow get a toggle — see the measurement note in script.js. */
.quote blockquote {
  display: -webkit-box;
  -webkit-line-clamp: 9;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.quote blockquote.is-open {
  -webkit-line-clamp: unset;
  display: block;
  overflow: visible;
}

/* The button is 44px tall for the touch target, but the underline belongs to
   the inner span so it stays tight against the text. Putting the border on the
   button itself would leave the rule floating ~15px below the label. */
.quote__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--goldenhour);
}

.quote__more span { border-bottom: 1px solid rgba(251, 191, 36, .5); }
.quote__more:hover span { border-bottom-color: var(--goldenhour); }
.quote__more:focus-visible { outline: 2px solid var(--goldenhour); outline-offset: 3px; }

/* Amber on cream is 1.48:1 and fails badly. #8A6410 is the dark amber already
   used for .editorial .page-title and the over-light brand mark — 4.76:1. */
.editorial .quote__more { color: #8A6410; }
.editorial .quote__more span { border-bottom-color: rgba(138, 100, 16, .45); }
.editorial .quote__more:hover span { border-bottom-color: #8A6410; }

.proof__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: clamp(24px, 3vw, 36px);
}

/* Slot for the GHL reviews widget. Give it a min-height so the
   surrounding layout does not jump when the iframe loads. */
/* The GHL widget renders its own white card and does not self-resize without
   their host script. It loads exactly five reviews then shows "Load More", so
   this height is set to fit all five plus that row with no inner scrolling.
   Measured, not guessed — 1400px overshot by ~245px of dead space. */
.reviews-embed {
  min-height: 1160px;
  margin-top: clamp(28px, 3.5vw, 44px);
  border: 1px solid var(--line);
}

.editorial .reviews-embed { border-color: var(--line-dark); }
.reviews-embed iframe { display: block; width: 100%; min-height: 1160px; border: 0; }

/* ============================================================
   VIDEO TESTIMONIALS
   Nothing downloads until a tile is clicked.
   ============================================================ */

.vtest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(28px, 3.5vw, 44px);
}

.vtest {
  position: relative;
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--night-soft);
  color: var(--paper);
  font: inherit;
  text-align: left;
  cursor: pointer;
  aspect-ratio: 3 / 4;
}

.editorial .vtest { border-color: var(--line-dark); }

.vtest img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 700ms var(--ease-out);
}

.vtest:hover img { transform: scale(1.03); }

.vtest__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 13, 20, .88) 0%, rgba(10, 13, 20, .1) 52%);
}

.vtest__play {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(244, 241, 234, .7);
  background: rgba(10, 13, 20, .4);
  transition: background 220ms ease, border-color 220ms ease;
}

.vtest__play::after {
  content: "";
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--paper);
  transform: translateX(2px);
}

.vtest:hover .vtest__play { background: var(--goldenhour); border-color: var(--goldenhour); }
.vtest:hover .vtest__play::after { border-left-color: var(--night); }

.vtest__meta {
  position: absolute;
  inset: auto 0 0;
  padding: 14px;
}

.vtest__name {
  display: block;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.03em;
}

.vtest__role { display: block; margin-top: 2px; color: rgba(244, 241, 234, .72); }

.video-modal {
  width: min(94vw, 880px);
  padding: 0;
  border: 1px solid var(--line);
  background: var(--night);
  color: var(--paper);
}

.video-modal::backdrop { background: rgba(6, 8, 12, .84); }
.video-modal__frame { background: #000; aspect-ratio: 16 / 9; }
.video-modal__frame video { display: block; width: 100%; height: 100%; }

.video-modal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 18px;
}

.video-modal__name { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.03em; }
.video-modal__role { margin: 2px 0 0; color: var(--glass); }

.video-modal__close {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(244, 241, 234, .5);
  background: none;
  color: var(--paper);
  font-family: var(--data);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}

.video-modal__close:hover { background: var(--paper); color: var(--night); }

@media (max-width: 780px) {
  .proof__grid { grid-template-columns: 1fr; }
  .vtest-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ============================================================
   CLOSING CONVERSION BAND
   Used by the homepage, the page template, and every page built
   from it — so it lives here, not in one page's inline style.
   ============================================================ */

.closer {
  position: relative;
  z-index: 10;
  padding: clamp(70px, 9vw, 120px) var(--gutter);
  background: var(--night);
  color: var(--paper);
  border-top: 1px solid var(--line);
}

.closer__inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: end;
}

.closer__title {
  max-width: 16ch;
  margin: 0 0 14px;
  font-size: clamp(38px, 5.2vw, 82px);
  font-weight: 770;
  font-variation-settings: "wdth" 86;
  letter-spacing: -.06em;
  word-spacing: .1em;
  line-height: .92;
  text-transform: uppercase;
}

.closer__deck {
  max-width: 40rem;
  margin: 0;
  font-size: 17px;
  line-height: 1.55;
  color: var(--glass);
}

.closer__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-self: end; }
.closer__actions .cta { flex: 1 1 240px; }

@media (max-width: 980px) {
  .closer__inner { grid-template-columns: 1fr; align-items: start; }
  .closer__actions { justify-self: start; width: 100%; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 780px) {
  :root { --gutter: 20px; }

  /* Phone users still need to reach Pricing, ROI, and Demo. Keep the nav and
     move the phone number and sign-in to the footer instead of hiding the
     conversion paths behind a menu. */
  .site-header {
    grid-template-columns: auto 1fr;
    gap: 12px;
    min-height: 56px;
  }

  .site-nav {
    justify-content: flex-end;
    gap: 15px;
  }

  .site-nav a[data-nav="home"] { display: none; }
  .site-header__end { display: none; }

  .page-head { grid-template-columns: 1fr; }
  .page-aside { justify-self: start; }
  .page-title { font-size: clamp(44px, 13vw, 72px); }

  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { justify-content: flex-start; }
}

/* ============================================================
   LEGAL DOCUMENTS
   Terms, Privacy, Disclaimer. Long-form reading rather than
   marketing: narrower measure, larger body text, real hierarchy,
   and anchors so a clause can be linked to directly.

   These pages exist to be READ and, occasionally, to be argued
   over — so they get a table of contents, visible section
   numbers, and print styles. A policy that cannot be printed
   cleanly is a policy nobody can take to their attorney.
   ============================================================ */

.legal {
  max-width: 46rem;              /* ~72 characters — long-form measure */
  margin: 0;
  padding-top: clamp(28px, 3.5vw, 44px);
}

/* Effective date. First thing a reader checks, so it sits above
   the contents rather than buried in the footer. */
.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 clamp(28px, 3.5vw, 40px);
  padding: 14px 16px;
  border-left: 3px solid var(--goldenhour);
  background: rgba(251, 191, 36, .06);
}

.legal__meta span { color: var(--glass); }
.legal__meta b { color: var(--paper); font-weight: 600; }

/* Table of contents */
.legal__toc {
  margin: 0 0 clamp(34px, 4.5vw, 56px);
  padding: clamp(20px, 2.5vw, 28px);
  border: 1px solid var(--line);
  background: var(--night-soft);
}

.legal__toc h2 {
  margin: 0 0 14px;
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--goldenhour);
}

.legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: toc;
}

.legal__toc li {
  counter-increment: toc;
  display: grid;
  grid-template-columns: 2.4em 1fr;
  gap: 10px;
  padding: 5px 0;
}

.legal__toc li::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--data);
  font-size: 11px;
  color: var(--glass);
}

.legal__toc a {
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  font-size: 16px;
  line-height: 1.4;
}

.legal__toc a:hover,
.legal__toc a:focus { color: var(--goldenhour); border-bottom-color: var(--goldenhour); }

/* Sections. scroll-margin-top keeps an anchored clause clear of
   the sticky header when linked to directly. */
.legal section {
  margin: 0 0 clamp(34px, 4vw, 52px);
  scroll-margin-top: 104px;
}

.legal section > h2 {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  gap: 10px;
  align-items: baseline;
  margin: 0 0 14px;
  font-size: clamp(21px, 2.1vw, 27px);
  font-weight: 720;
  letter-spacing: -.035em;
  line-height: 1.15;
  text-transform: none;
  color: var(--goldenhour);
}

.legal section > h2 .legal__n {
  font-family: var(--data);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--glass);
}

.legal h3 {
  margin: 22px 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--paper);
}

.legal p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.68;
  color: rgba(244, 241, 234, .86);
}

.legal strong { color: var(--paper); font-weight: 600; }

.legal a {
  color: var(--goldenhour);
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 191, 36, .45);
}

.legal a:hover, .legal a:focus { border-bottom-color: var(--goldenhour); }

.legal ul, .legal ol.legal__list {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.legal ul li, .legal ol.legal__list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(244, 241, 234, .86);
}

.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  background: var(--goldenhour);
}

.legal ol.legal__list { counter-reset: sub; }
.legal ol.legal__list li { counter-increment: sub; }
.legal ol.legal__list li::before {
  content: counter(sub) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--data);
  font-size: 13px;
  color: var(--goldenhour);
}

/* A clause worth not missing — no-refund, arbitration, auto-renew. */
.legal__call {
  margin: 0 0 16px;
  padding: 16px 18px;
  border: 1px solid rgba(251, 191, 36, .38);
  border-left: 3px solid var(--goldenhour);
  background: rgba(251, 191, 36, .06);
}

.legal__call p:last-child { margin-bottom: 0; }

.legal table {
  width: 100%;
  margin: 0 0 18px;
  border-collapse: collapse;
  font-size: 15px;
}

.legal th, .legal td {
  padding: 9px 10px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.legal th {
  font-family: var(--data);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--goldenhour);
}

.legal td { color: rgba(244, 241, 234, .86); }

.legal__contact {
  margin-top: clamp(34px, 4vw, 52px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* Print. A policy has to survive being printed and handed over. */
@media print {
  .site-header, .site-footer, .closer, .legal__toc, .chat-launcher { display: none !important; }
  .page { padding: 0 !important; }
  .legal { max-width: none; }
  .legal, .legal p, .legal li, .legal td { color: #000 !important; }
  .legal section > h2, .legal section > h2 .legal__n,
  .legal a, .legal th { color: #000 !important; }
  .legal a { border-bottom: 0 !important; }
  .legal a::after { content: " (" attr(href) ")"; font-size: 11px; }
  .legal__call, .legal__meta {
    border: 1px solid #000 !important;
    background: none !important;
  }
  .legal section { page-break-inside: avoid; }
}

/* ============================================================
   SKIP LINK
   Added because four pages ship the markup and it had no styles,
   so "Skip to content" rendered as visible text above the header.
   Hidden until focused, then a real target — not display:none,
   which would remove it from the tab order and defeat the point.
   ============================================================ */

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--goldenhour);
  color: var(--night);
  font-family: var(--data);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-120%);
  transition: transform 160ms var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--night);
  outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* ============================================================
   CHAT LAUNCHER CLEARANCE
   The GHL widget floats fixed at the bottom-right, so it passes
   over whatever happens to be there as you scroll — on the
   leaders page it was sitting directly on top of the headline
   figure in the chart.

   Two defences, because the widget's markup is not ours: nudge
   it up and in if its known selectors match, and reserve a
   little room at the foot of every page either way. If GHL
   renames its classes the padding still applies.
   ============================================================ */

.lc_text-widget--btn,
[data-widget-launcher],
#lc_text-widget--btn,
.chat-launcher {
  bottom: 28px !important;
  right: 28px !important;
}

.site-footer { padding-bottom: clamp(48px, 6vw, 86px); }