/* ============================================================================
   The AI-Native People Function: printed-dossier edition
   ----------------------------------------------------------------------------
   Design system: ./design-system/DESIGN.md (Webflow, LIGHT CANVAS edition).
   variables.css supplies the raw tokens; this file maps them onto the page and
   adds only what the dossier grammar needs.

   Self-contained. There is no scroll engine: every section is in document
   flow at its natural height and the page scrolls 1:1. Motion is limited to
   play-on-entry reveals, all of which are gated behind html.js so nothing is
   invisible by default.

   System rules held literally:
     one family (Inter, two weights), obsidian on white, slate for muted,
     1px ash borders define structure, NO shadow at rest, 4px buttons / 8px
     cards, #146ef5 as the only interactive colour, 1200px / 80px rhythm,
     24px card padding, 13px +0.1em uppercase slate eyebrows.
   ========================================================================== */

:root {
  /* --- semantic aliases over the design-system tokens ------------------- */
  --canvas: var(--surface-canvas);
  --tinted: var(--surface-tinted);
  --card: var(--surface-card);
  --inverted: var(--surface-inverted);

  --ink: var(--color-obsidian);
  --muted: var(--color-slate);
  --hairline: var(--color-ash-border);
  --blue: var(--color-webflow-blue);
  --blue-deep: var(--color-indigo-ink);
  --blue-soft: var(--color-mercury-tint);
  --onyx: var(--color-onyx);
  --charcoal: var(--color-charcoal);
  --graphite: var(--color-graphite);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --bar-h: 56px;
  --meter-w: 76px;

  /* --- engine token overrides. Six roles, one family. ------------------- */
  --sc-canvas: #ffffff;
  --sc-surface: #ffffff;
  --sc-ink: #080808;
  --sc-ink-soft: #5a5a5a;
  --sc-accent: #146ef5;
  --sc-accent-ink: #ffffff;
  --sc-font-display: var(--font-sans);
  --sc-font-text: var(--font-sans);
  --sc-font-mono: var(--font-sans);

  --sc-hairline: var(--color-ash-border);
  --sc-hairline-strong: var(--color-smoke);
  --sc-maxw: 1200px;
  --sc-gutter: clamp(20px, 4vw, 40px);
  --sc-measure: 62ch;
  --sc-r-sm: 4px;
  --sc-r-md: 4px;
  --sc-r-lg: 8px;
  --sc-r-pill: 4px;
  --sc-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ------------------------------------------------------------- baseline --
   The reset that used to arrive with the engine stylesheet. The engine is
   gone: the page is in flow, top to bottom, and scrolls 1:1. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img, video, canvas, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--blue); color: #fff; }
:root { caret-color: var(--blue); accent-color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
:where(a) { text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
:where(table, [data-count]) { font-variant-numeric: tabular-nums; }

body {
  margin: 0;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-body-lg);
  line-height: var(--leading-body-lg);
  letter-spacing: normal;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  text-wrap: balance;
}

/* Display sizes only, per the system: nothing below 40px carries a heading
   role, and hero copy is never weight 400. */
h1 {
  font-size: clamp(40px, 6.4vw, 80px);
  line-height: var(--leading-display-xl);
  letter-spacing: -0.01em;
}
h2 {
  font-size: clamp(32px, 4vw, 56px);
  line-height: var(--leading-display);
  letter-spacing: -0.01em;
  /* 26ch at display size ≈ 70% of the 1200px wrap — not the body-sized ch. */
  max-width: 26ch;
}
h3 {
  font-size: var(--text-body-lg);
  line-height: var(--leading-subheading);
  letter-spacing: normal;
}
h3.h-sm { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }

p { margin: 0; color: var(--muted); max-width: 62ch; text-wrap: pretty; }
p + p { margin-top: var(--spacing-16); }

.lede {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  color: var(--muted);
  max-width: 560px;
}

.eyebrow {
  display: block;
  margin: 0 0 var(--spacing-16);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.kicker {
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: var(--leading-heading);
  letter-spacing: -0.01em;
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  max-width: 26ch;
}

.small { font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 62ch; }
.caption { font-size: 13px; line-height: 1.5; color: var(--muted); max-width: 62ch; }

a { color: var(--blue); }

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

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-buttons);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------- layout -- */

.wrap {
  width: 100%;
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}

/* Chapters are the unit. Each lands on its own ground and holds it: a hard
   cut, never an interpolation. Rhythm is carried by whitespace, not rules. */
.chapter {
  position: relative;
  background: var(--canvas);
  padding-block: clamp(48px, 7vw, 80px);
}
.chapter--tinted { background: var(--tinted); }

/* ------------------------------------------------- reveal on entry --------
   Rule: nothing is invisible by default. The hidden start state exists only
   under html.js, so if the observer never fires (no JS, an old browser, a
   crawler) the page is already in its finished, readable state. */
.js [data-in],
.js [data-stagger] > * {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 620ms var(--sc-ease-out), transform 620ms var(--sc-ease-out);
}
.js [data-in].is-in,
.js [data-stagger] > .is-in {
  opacity: 1;
  transform: none;
}

.rule { height: 1px; border: 0; background: var(--hairline); margin: 0; }

/* Anchors land below the fixed bar, not behind it. */
[id] { scroll-margin-top: calc(var(--bar-h) + 12px); }

/* The chapter mark. A quiet folio replacing an eyebrow above every heading. */
.folio {
  display: block;
  margin: 0 0 var(--spacing-16);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.spread {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-48);
  align-items: start;
}
.spread--wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.spread--lead { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }

.stack > * + * { margin-top: var(--spacing-16); }
.stack > h2 + * { margin-top: var(--spacing-24); }
.head { margin-bottom: var(--spacing-40); }
.head p { margin-top: var(--spacing-16); max-width: 62ch; }

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: 12px 16px;
  border-radius: var(--radius-buttons);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out),
    color 140ms var(--sc-ease-out), transform 100ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); color: #fff; }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* Raw token, not --ink: this button only ever sits on a ground that has
   redefined --ink to white, which would render it white on white. */
.btn-invert { background: #fff; color: var(--color-obsidian); }
.btn-invert:hover { background: var(--color-mist); color: var(--color-obsidian); }
.btn-invert:focus-visible { outline-color: #fff; }

.btn-lg { padding: 14px 22px; font-size: 16px; }

.actions { display: flex; flex-wrap: wrap; gap: var(--spacing-12); }

/* Feature-list row: text left, arrow right, hairline under. */
.arrow-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--spacing-24);
  padding: var(--spacing-16) 0;
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
  text-decoration: none;
  font-size: var(--text-body-lg);
  font-weight: var(--font-weight-semibold);
}
.arrow-link i { font-style: normal; color: var(--muted); transition: transform 140ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) {
  .arrow-link:hover i { transform: translateX(4px); }
}

/* --------------------------------------------------------------- chrome -- */

.site-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  background: var(--canvas);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--sc-ease-out);
}
.site-bar.is-stuck { border-bottom-color: var(--hairline); }

/* The progress hairline draws along the bar's own bottom edge. Passive: it
   reports scroll position, it never takes it. */
[data-progress] {
  position: fixed;
  inset: calc(var(--bar-h) - 2px) 0 auto 0;
  height: 2px;
  z-index: 95;
  background: var(--blue);
  transform-origin: 0 50%;
  transform: scaleX(0);
  pointer-events: none;
}
.site-bar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-24);
}

.wordmark {
  display: inline-flex;
  gap: 5px;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  text-decoration: none;
  flex-shrink: 0;
}
.wordmark-ink { color: var(--ink); }
.wordmark-accent { color: var(--blue); }

/* The running chapter mark. Sequence is not shown: no counters. */
.bar-folio {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 240ms var(--sc-ease-out);
}
.bar-folio.is-on { opacity: 1; }

/* The nav CTA sits outside the collapsible panel: it is visible at every
   breakpoint and at every scroll position. */
.bar-actions { display: flex; align-items: center; gap: var(--spacing-16); flex-shrink: 0; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  padding: 0; border: 0;
  background: transparent;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 1.5px;
  margin: 5px auto;
  background: var(--ink);
  transition: transform 200ms var(--sc-ease-out), opacity 200ms var(--sc-ease-out);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-panel { display: flex; align-items: center; gap: var(--spacing-24); }
.nav-links { display: flex; align-items: center; gap: var(--spacing-24); list-style: none; margin: 0; padding: 0; }
.nav-links a { color: var(--ink); text-decoration: none; font-size: 14px; font-weight: var(--font-weight-regular); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--blue); }

/* ------------------------------------------- the gap that follows you -----
   The signature move. A slim meter in the margin holding the page's two real
   figures apart. It closes as the visitor travels the engagements and is fully
   shut by the CTA, so the argument is made ambiently and the page ends with
   the gap gone. Driven from --gap-open, written by script.js off page scroll.
   transform and opacity only. */

.gapmeter {
  position: fixed;
  z-index: 70;
  right: clamp(10px, 1.4vw, 20px);
  top: 50%;
  translate: 0 -50%;
  width: var(--meter-w);
  pointer-events: none;
  opacity: 0;
  transition: opacity 360ms var(--sc-ease-out);
  --gap-open: 1;
  --gm-travel: clamp(64px, 14vh, 120px);
}
.gapmeter.is-on { opacity: 1; }

.gapmeter__label {
  display: block;
  margin-bottom: var(--spacing-12);
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: right;
}

.gapmeter__rail {
  position: relative;
  display: block;
  height: calc(var(--gm-travel) + 20px);
  border-right: 1px solid var(--hairline);
  padding-right: var(--spacing-12);
}

.gapmeter__tick {
  position: absolute;
  right: var(--spacing-12);
  display: block;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.gapmeter__tick::after {
  content: "";
  position: absolute;
  right: -12px;
  top: 50%;
  width: 8px; height: 1px;
  background: currentColor;
}
.gapmeter__tick--hi { top: 0; color: var(--ink); }
.gapmeter__tick--lo {
  top: var(--gm-travel);
  color: var(--blue);
  transform: translateY(calc((var(--gap-open) - 1) * var(--gm-travel)));
  transition: transform 80ms linear;
}

/* The gap itself, drawn in blue. It scales to nothing, it never resizes. */
.gapmeter__span {
  position: absolute;
  right: 0;
  top: 0.35em;
  width: 2px;
  height: var(--gm-travel);
  background: var(--blue);
  transform-origin: 50% 0;
  transform: scaleY(var(--gap-open));
  transition: transform 80ms linear;
}

@media (max-width: 900px) {
  /* Collapses to a hairline, docked immediately under the bar and the
     progress rule so it reads as one continuous piece of chrome. */
  .gapmeter {
    right: auto; left: 0; top: var(--bar-h);
    translate: none;
    width: 100%;
    z-index: 88;
    --gm-travel: 34vw;
    background: var(--canvas);
    border-bottom: 1px solid var(--hairline);
    padding-block: 10px 6px;
  }
  .gapmeter__label { display: none; }
  .gapmeter__rail {
    height: 12px;
    border-right: 0;
    padding: 0;
    margin-inline: var(--sc-gutter);
  }
  .gapmeter__tick { top: 0; right: auto; left: 0; font-size: 10px; }
  .gapmeter__tick::after { right: auto; left: 0; top: -4px; width: 1px; height: 4px; }
  .gapmeter__tick--lo {
    left: var(--gm-travel);
    transform: translateX(calc((var(--gap-open) - 1) * var(--gm-travel)));
  }
  .gapmeter__span {
    right: auto; left: 0; top: -3px;
    width: var(--gm-travel); height: 2px;
    transform-origin: 0 50%;
    transform: scaleX(var(--gap-open));
  }
}

/* ---------------------------------------------------- 1 · the title page --
   Asymmetric split: the headline holds the left, the subtext and both CTAs
   hold the right, so the primary action is above the fold at every width. */

.title-page { padding-block: calc(var(--bar-h) + 48px) var(--spacing-48); }

.title-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: var(--spacing-48);
  align-items: end;
}
.title-page h1 { max-width: 22ch; }
.title-page__side { padding-bottom: var(--spacing-8); }
.title-page__side .actions { margin-top: var(--spacing-24); }

.title-page__foot {
  margin-top: var(--spacing-48);
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--hairline);
}

/* ------------------------------------------------------ 2 · the numbers -- */

.figures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--spacing-48);
}
.figure {
  display: grid;
  grid-template-columns: minmax(0, 124px) minmax(0, 1fr);
  gap: 0 var(--spacing-24);
  align-items: baseline;
  padding: var(--spacing-24) 0;
  border-bottom: 1px solid var(--hairline);
}
.figure:first-child, .figure:nth-child(2) { border-top: 1px solid var(--hairline); }
.figure-num {
  font-size: var(--text-heading-lg);
  line-height: 1;
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.figure p { font-size: 14px; line-height: 1.5; }

/* ----------------------------------------------------------- 3 · the peak --
   The gap, as an ordinary section at natural height. Nothing pins, nothing
   scrubs. When the chart is ~40% visible the page adds .is-played once and a
   single 1.8s animation pulls 91 and 39 apart while the label fades into the
   space between them. The settled state is the CSS default; the converged
   start only exists when JS is running (html.js), so a reader who never
   triggers the observer still gets the finished chart. */

.peak { background: var(--canvas); }
.peak__chart {
  position: relative;
  width: 100%;
  --peak-travel: clamp(52px, 11.5vh, 108px);
  /* The rows travel outward, so their room is reserved up front and the
     section height never changes while the animation plays. */
  padding-block: var(--peak-travel);
}

.peak__row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 196px) minmax(0, 1fr);
  gap: 0 var(--spacing-24);
  align-items: center;
}
/* Default = played. html.js winds them back to the middle before the reveal. */
.peak__row--hi { transform: translateY(calc(var(--peak-travel) * -1)); }
.peak__row--lo { transform: translateY(var(--peak-travel)); }

.js .peak__chart .peak__row {
  transform: none;
  transition: transform 1800ms var(--sc-ease-out);
}
.js .peak__chart.is-played .peak__row--hi { transform: translateY(calc(var(--peak-travel) * -1)); }
.js .peak__chart.is-played .peak__row--lo { transform: translateY(var(--peak-travel)); }

.peak__num {
  font-size: clamp(40px, 7vw, 80px);
  line-height: var(--leading-display-xl);
  letter-spacing: var(--tracking-display-xl);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.peak__row--hi .peak__num { color: var(--ink); }
.peak__row--lo .peak__num { color: var(--blue); }

.peak__bar { position: relative; height: clamp(28px, 5vh, 44px); border-radius: var(--radius-md); }
.peak__row--hi .peak__bar { background: var(--ink); width: 100%; }
/* Reality is the shorter bar, at the real proportion: 39 against 91. */
.peak__row--lo .peak__bar { background: var(--blue); width: 42.8%; }

.peak__cap {
  grid-column: 2;
  margin-top: var(--spacing-12);
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 52ch;
}

/* The gap, drawn. Scales, never resizes. */
.peak__gap {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: calc(var(--peak-travel) * 2);
  translate: 0 -50%;
  z-index: 1;
  transform-origin: 50% 50%;
  transform: scaleY(1);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(20, 110, 245, 0.14) 0 1px,
    transparent 1px 9px
  );
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.peak__gaplabel {
  position: absolute;
  left: 50%; top: 50%;
  translate: -50% -50%;
  z-index: 3;
  padding: 6px 12px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--radius-tags);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.js .peak__chart .peak__gap { transform: scaleY(0.04); transition: transform 1800ms var(--sc-ease-out); }
.js .peak__chart.is-played .peak__gap { transform: scaleY(1); }
.js .peak__chart .peak__gaplabel { opacity: 0; transition: opacity 900ms var(--sc-ease-out) 700ms; }
.js .peak__chart.is-played .peak__gaplabel { opacity: 1; }

.peak__resolve {
  margin-top: clamp(24px, 5vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
}
.peak__resolve .kicker { max-width: 34ch; }

/* --------------------------------------------------- 4 · the destination -- */

.dest-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--spacing-8) var(--spacing-48);
  align-items: baseline;
  padding: var(--spacing-24) 0;
  border-bottom: 1px solid var(--hairline);
}
.dest-row:first-of-type { border-top: 1px solid var(--hairline); }
.dest-row h3 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }
.dest-row p { font-size: 14px; line-height: 1.55; }

/* --------------------------------------------------- 5 · the engagements -- */

/* Three columns, equal height, no lateral hijack. Below 900px the row becomes
   an ordinary swipe strip inside its own container: the page itself never
   scrolls sideways. */
.offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
  align-items: stretch;
}

.rail__note {
  margin-top: var(--spacing-40);
  padding-left: var(--spacing-24);
  border-left: 1px solid var(--hairline);
}

.offer {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--card-padding);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
}
.offer--featured { border-color: var(--blue); }

.offer__mark {
  display: block;
  margin-bottom: var(--spacing-16);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.offer h3 { margin-bottom: var(--spacing-12); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }
.offer .price { color: var(--ink); font-size: 14px; font-weight: var(--font-weight-semibold); max-width: none; }
.offer .price-sub { margin-top: var(--spacing-4); font-size: 13px; color: var(--muted); max-width: none; }
.offer ul { margin: var(--spacing-16) 0 var(--spacing-24); padding: 0; list-style: none; }
.offer li {
  position: relative;
  padding: 10px 0 10px 18px;
  border-top: 1px solid var(--hairline);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}
.offer li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.05em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
}
.offer .btn { margin-top: auto; align-self: flex-start; }

.badge {
  position: absolute;
  top: var(--card-padding); right: var(--card-padding);
  padding: 2px 6px;
  border-radius: var(--radius-tags);
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .offers {
    display: flex;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    /* Room for the focus ring and the featured card's border. */
    padding-block: 4px;
    scroll-padding-inline: 4px;
  }
  .offers > .offer {
    flex: 0 0 min(320px, 82vw);
    scroll-snap-align: start;
  }
}

/* ------------------------------------------------------ 6 · the beachhead -- */

.gap-card {
  padding: var(--card-padding);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
}
.gap-card h3 { margin-bottom: var(--spacing-12); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }
.gap-card p { font-size: 14px; line-height: 1.55; }

/* --------------------------------------------------------- 7 · the proof --
   The one dark island, on the system's inverted surface. `color` is inherited
   as a computed value, so the tokens are restated alongside an explicit
   `color` here: redefining --sc-ink alone re-inks nothing. */

.island {
  --sc-canvas: #080808;
  --sc-surface: #171717;
  --sc-ink: #ffffff;
  --sc-ink-soft: rgba(255, 255, 255, 0.72);
  --ink: #ffffff;
  --muted: rgba(255, 255, 255, 0.72);
  --hairline: var(--color-charcoal);
  --card: var(--color-onyx);
  background: var(--inverted);
  color: #ffffff;
}
.island h2, .island h3 { color: #fff; }
/* The system forbids brand blue on dark surfaces: emphasis is white here. */
.island .btn-ghost { color: #fff; border-color: var(--color-charcoal); }
.island .btn-ghost:hover { border-color: #fff; }

.proof-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-48);
  align-items: center;
}
.proof-grid p { color: var(--muted); max-width: 56ch; }

.demo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-16);
  aspect-ratio: 16 / 10;
  padding: var(--card-padding);
  text-align: center;
  text-decoration: none;
  color: #fff;
  background: var(--color-onyx);
  border: 1px solid var(--color-charcoal);
  border-radius: var(--radius-cards);
  transition: border-color 160ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
.demo-card:hover { border-color: #fff; }
.demo-card span { max-width: 32ch; font-size: 14px; font-weight: var(--font-weight-semibold); }

.play-btn {
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  flex-shrink: 0;
}
.island .play-btn { color: #080808; }

/* Meters fill once, on entry. scaleX only, 1.1s, and full is the default so
   they read as complete if the observer never runs. */
.meters { margin-top: var(--spacing-32); padding: 0; list-style: none; }
.meter { padding: var(--spacing-12) 0; border-top: 1px solid var(--color-charcoal); }
.meter:last-child { border-bottom: 1px solid var(--color-charcoal); }
/* Direct child only: the counter span nested inside must stay inline or the
   figure breaks away from its own unit. */
.meter > span { display: block; font-size: 14px; font-weight: var(--font-weight-semibold); color: #fff; font-variant-numeric: tabular-nums; }
.meter i {
  display: block;
  margin-top: var(--spacing-8);
  height: 2px;
  background: var(--blue-soft);
  transform-origin: 0 50%;
  transform: scaleX(1);
}
.js .meters i { transform: scaleX(0.02); transition: transform 1100ms var(--sc-ease-out); }
.js .meters.is-in i { transform: scaleX(1); }
.js .meters.is-in .meter:nth-child(2) i { transition-delay: 90ms; }
.js .meters.is-in .meter:nth-child(3) i { transition-delay: 180ms; }

/* ---------------------------------------------------- 8 · the governance -- */

.govern {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
}
.govern article {
  padding: var(--card-padding);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
}
.govern h3 { margin-bottom: var(--spacing-12); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }
.govern p { font-size: 14px; line-height: 1.55; }
.govern-cta { margin-top: var(--spacing-40); }

/* ------------------------------------------------------- 9 · the founder -- */

.founder-portrait {
  width: min(100%, 280px);
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-images);
  box-shadow: none;
}

.founder-note {
  padding-left: var(--spacing-24);
  border-left: 1px solid var(--blue);
  color: var(--ink);
}

.quotes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-16);
  margin-top: var(--spacing-40);
}
.quote {
  padding: var(--card-padding);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
}
.quote blockquote {
  margin: 0 0 var(--spacing-16);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: -0.01em;
  color: var(--ink);
}
.quote footer { font-size: 13px; color: var(--muted); }

/* ------------------------------------------------------ 10 · the insights -- */

.note { padding: var(--spacing-24) 0; border-bottom: 1px solid var(--hairline); }
.note:first-of-type { border-top: 1px solid var(--hairline); }
.note__head {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-8) var(--spacing-48);
  align-items: baseline;
}
.note h3 { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); max-width: 26ch; }
.standfirst { font-size: 14px; line-height: 1.55; }

.accordion-trigger {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin-top: var(--spacing-16);
  font: inherit;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: var(--blue);
  cursor: pointer;
  text-align: left;
}
.accordion-trigger:hover { color: var(--blue-deep); text-decoration: underline; }
.accordion-panel { margin-top: var(--spacing-16); }
.note-body { max-width: 72ch; font-size: 14px; line-height: 1.7; column-gap: var(--spacing-48); }
@media (min-width: 1100px) { .note-body { columns: 2; max-width: none; } }

/* --------------------------------------------------------- 11 · the close --
   Full bleed blue, in flow. The colophon sits inside it and nothing follows. */

.close {
  background: var(--blue);
  color: #fff;
  --ink: #ffffff;
  --muted: #ffffff;
  --hairline: rgba(255, 255, 255, 0.28);
}
.close__inner {
  display: flex;
  flex-direction: column;
  padding-block: clamp(56px, 8vw, 96px) 0;
}
.close h2 { color: #fff; }
.close p { color: #ffffff; max-width: 48ch; margin-top: var(--spacing-24); font-size: var(--text-subheading); line-height: var(--leading-subheading); }
.close .btn { margin-top: var(--spacing-32); }

.colophon { padding-block: var(--spacing-24); border-top: 1px solid rgba(255, 255, 255, 0.28); }
.colophon__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr);
  gap: var(--spacing-24) var(--spacing-48);
  align-items: start;
}
.colophon .wordmark-ink, .colophon .wordmark-accent { color: #fff; }
.colophon p { color: #ffffff; font-size: 13px; line-height: 1.5; margin-top: 0; max-width: none; }
.colophon ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--spacing-4) var(--spacing-24); }
.colophon a { color: #fff; font-size: 13px; font-weight: var(--font-weight-semibold); text-decoration: none; }
.colophon a:hover { text-decoration: underline; }
.colophon a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ============================================================ fractional --
   The contract page. Same system, gentle reveals only, no theatrics: somebody
   reading this one is reading terms. */

.page-flat .title-page { padding-block: calc(var(--bar-h) + 40px) var(--spacing-40); }

.paths, .timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-16);
}
.timeline { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.paths article, .timeline article {
  padding: var(--card-padding);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
}
.paths article.is-featured { border-color: var(--blue); }
.paths h3, .timeline h3 { margin-bottom: var(--spacing-8); font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); }
.paths p, .timeline p { font-size: 14px; line-height: 1.5; }
.step-num {
  display: block;
  margin-bottom: var(--spacing-12);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.timeline h3 { font-size: var(--text-body-lg); line-height: var(--leading-subheading); }

.compare {
  display: grid;
  grid-template-columns: minmax(150px, 1.25fr) repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(7, auto);
  grid-auto-flow: column;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
  overflow: hidden;
  background: var(--card);
}
.compare-col { display: contents; min-width: 0; }
.compare-col.is-featured .compare-cell { background: var(--tinted); }
.compare-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--spacing-4);
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
  min-height: 60px;
}
.compare-col:last-child .compare-cell { border-right: 0; }
.compare-col .compare-cell:last-child { border-bottom: 0; }
.compare-head { font-size: var(--text-body-lg); font-weight: var(--font-weight-semibold); line-height: var(--leading-subheading); }
.compare-labels .compare-cell { color: var(--muted); font-size: 13px; }
.compare-labels .compare-head { color: transparent; }
.cell-check, .cell-dash, .cell-muted { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cell-check { color: var(--blue); font-weight: var(--font-weight-semibold); }
.cell-dash { color: var(--muted); }
.cell-muted { color: var(--muted); }
.cell-note { display: block; width: 100%; font-size: 13px; color: var(--muted); }

.includes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--spacing-48); }
.includes li {
  position: relative;
  padding: var(--spacing-16) 0 var(--spacing-16) 18px;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--text-body-lg);
  color: var(--ink);
}
.includes li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.6em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--blue);
}

.price-block {
  max-width: 560px;
  padding: var(--spacing-32);
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-cards);
}
.price-block .price { font-size: var(--text-heading-sm); line-height: var(--leading-heading-sm); font-weight: var(--font-weight-semibold); color: var(--ink); max-width: none; }
.price-block .price-sub { margin-top: var(--spacing-8); font-size: 14px; }
.price-block .btn { margin-top: var(--spacing-24); }

.faq-item { border-bottom: 1px solid var(--hairline); }
.faq-item:first-child { border-top: 1px solid var(--hairline); }
.faq-item .accordion-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  margin: 0;
  padding: var(--spacing-24) 0;
  color: var(--ink);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: -0.01em;
}
.faq-item .accordion-trigger:hover { color: var(--blue); text-decoration: none; }
.faq-item .accordion-trigger::after { content: "+"; font-size: var(--text-subheading); color: var(--blue); }
.faq-item .accordion-trigger[aria-expanded="true"]::after { content: "\2013"; }
.faq-item .accordion-panel { margin: 0; padding: 0 0 var(--spacing-24); }

.colophon--flat {
  padding-block: clamp(40px, 6vw, 72px);
  background: var(--inverted);
  border-top: 0;
}
.colophon--flat .colophon__grid {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}
.colophon--flat p { color: rgba(255, 255, 255, 0.72); }
.colophon--flat a { color: #fff; }
.colophon--flat .wordmark-accent { color: var(--blue-soft); }

/* ========================================================= responsive ===== */

@media (max-width: 1100px) {
  .nav-toggle { display: block; order: 3; }
  .bar-folio { display: none; }
  .bar-actions { order: 2; }
  .nav-panel {
    position: fixed;
    inset: 0;
    z-index: 80;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--spacing-32);
    padding: 96px var(--spacing-32) var(--spacing-48);
    background: var(--canvas);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms var(--sc-ease-out), visibility 200ms var(--sc-ease-out);
  }
  .nav-panel.is-open { visibility: visible; opacity: 1; pointer-events: auto; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: var(--spacing-24); }
  .nav-links a { font-size: var(--text-heading); font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; }
  .govern, .timeline, .includes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .title-page__grid,
  .spread, .spread--wide, .spread--lead,
  .figures, .dest-row, .note__head,
  .proof-grid, .quotes, .paths, .colophon__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .title-page__grid { gap: var(--spacing-32); }
  .title-page h1 { max-width: 22ch; }
  .figure:nth-child(2) { border-top: 0; }
  .founder-portrait { width: min(100%, 200px); }
  .note-body { columns: 1; }
}

@media (max-width: 640px) {
  /* The nav CTA stays in the bar at every width (north star 1), so at phone
     widths the wordmark stacks and the button tightens rather than either one
     being dropped. The label never wraps and never clips. */
  .wordmark { flex-direction: column; gap: 0; font-size: 12px; line-height: 1.2; }
  .site-bar .wrap { gap: var(--spacing-8); padding-inline: var(--spacing-16); }
  .bar-actions { gap: var(--spacing-4); }
  .bar-actions .btn-primary { font-size: 11px; padding: 9px 10px; letter-spacing: -0.005em; }
  .nav-toggle { width: 34px; }

  .govern, .timeline, .includes { grid-template-columns: minmax(0, 1fr); }
  .actions { flex-direction: column; align-items: stretch; }
  .actions .btn { width: 100%; }
  .figure { grid-template-columns: minmax(0, 100px) minmax(0, 1fr); gap: 0 var(--spacing-16); }
  .figure-num { font-size: var(--text-heading); }

  /* The peak still has to read at 390px: the rows tighten, the bars shorten,
     and the label keeps its own line inside the field. */
  .peak__chart { --peak-travel: clamp(42px, 9vh, 72px); }
  .peak__row { grid-template-columns: minmax(0, 112px) minmax(0, 1fr); gap: 0 var(--spacing-12); }
  .peak__num { font-size: clamp(34px, 12vw, 48px); letter-spacing: var(--tracking-display); }
  .peak__bar { height: 26px; }
  .peak__cap { font-size: 13px; max-width: none; }
  .peak__gaplabel { font-size: 10px; padding: 5px 10px; }
  .peak__resolve { bottom: 20px; gap: var(--spacing-16); }
  .peak__resolve .kicker { font-size: 18px; }

  .compare { display: flex; flex-direction: column; gap: var(--spacing-16); border: 0; background: transparent; overflow: visible; }
  .compare-col { display: block; border: 1px solid var(--hairline); border-radius: var(--radius-cards); background: var(--card); overflow: hidden; }
  .compare-col.compare-labels { display: none; }
  .compare-col.is-featured { border-color: var(--blue); }
  .compare-cell { border-right: 0; padding: var(--spacing-12) var(--spacing-16); }
  .compare-cell[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--spacing-4);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .compare-head { background: var(--tinted); padding: var(--spacing-16); }
}

/* =========================================================== reduced ====== */
@media (prefers-reduced-motion: reduce) {
  /* Final states, immediately. Nothing animates, nothing is hidden, and the
     argument reads end to end exactly as it does with motion on. */
  .js [data-in],
  .js [data-stagger] > * { opacity: 1; transform: none; transition: none; }

  .js .peak__chart .peak__row,
  .js .peak__chart .peak__gap,
  .js .peak__chart .peak__gaplabel,
  .js .meters i { transition: none; }
  .js .peak__chart .peak__row--hi { transform: translateY(calc(var(--peak-travel) * -1)); }
  .js .peak__chart .peak__row--lo { transform: translateY(var(--peak-travel)); }
  .js .peak__chart .peak__gap { transform: scaleY(1); }
  .js .peak__chart .peak__gaplabel { opacity: 1; }
  .js .meters i { transform: scaleX(1); }

  .gapmeter { --gap-open: 1; }
  .gapmeter__tick--lo, .gapmeter__span { transition: none; }
  .arrow-link i { transition: none; }
}

/* ========================================================================
   REFERO SYSTEM GRAFT — USER INTERVIEWS
   "Hand-drawn research field notes on warm paper"

   Human, research-led and operational. The interface uses paper warmth,
   literary headings, mono folio labels, flat mint/blush surfaces and one
   deep-teal action colour. No shadows, no glass cards, no generic blue SaaS.
   ======================================================================== */

:root {
  --canvas: #f2f8f7;
  --tinted: #f2e8e2;
  --card: #e4f0f1;
  --inverted: #16325a;
  --ink: #283338;
  --muted: #526368;
  --hairline: #cae1e2;
  --blue: #1c5d5f;
  --blue-deep: #0e4749;
  --blue-soft: #65b8a2;
  --onyx: #16325a;
  --charcoal: #d6aec1;
  --graphite: #231e21;
  --font-sans: "DM Sans", system-ui, sans-serif;

  --sc-canvas: #f2f8f7;
  --sc-surface: #e4f0f1;
  --sc-ink: #283338;
  --sc-ink-soft: #526368;
  --sc-accent: #1c5d5f;
  --sc-accent-ink: #ffffff;
  --sc-font-display: "Lora", Georgia, serif;
  --sc-font-text: "DM Sans", system-ui, sans-serif;
  --sc-font-mono: "IBM Plex Mono", monospace;
  --sc-hairline: #cae1e2;
  --sc-hairline-strong: #a2cbcd;
  --sc-r-sm: 8px;
  --sc-r-md: 12px;
  --sc-r-lg: 16px;
  --sc-r-pill: 999px;
  --bar-h: 72px;
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
}

.js [data-in],
.js [data-stagger] > * {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

h1, h2, h3, h4 {
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.75rem, 5.4vw, 4.3rem); line-height: 1.04; max-width: 17ch; }
h2 { font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1.08; max-width: 19ch; }
h3 { font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.18; }
.lede { font-size: clamp(1rem, 1.5vw, 1.22rem); line-height: 1.6; color: var(--muted); }
.eyebrow {
  font-family: "IBM Plex Mono", monospace;
  color: var(--blue-deep);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--blue-soft);
}
.title-page .eyebrow { text-transform: none; letter-spacing: 0.02em; font-size: 0.8rem; }
.caption,
.small,
.folio,
.bar-folio { font-family: "IBM Plex Mono", monospace; letter-spacing: 0.02em; }

.site-bar {
  min-height: var(--bar-h);
  background: color-mix(in srgb, var(--canvas) 91%, transparent);
  border-bottom-color: var(--hairline);
  backdrop-filter: blur(18px);
}
.site-bar .wrap { min-height: var(--bar-h); }
.wordmark {
  font-family: "DM Sans", system-ui, sans-serif;
  letter-spacing: -0.025em;
  gap: 4px;
}
.wordmark-ink { color: var(--ink); }
.wordmark-accent { color: var(--blue); }
.nav-links a { color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.nav-links a:hover { color: var(--blue-deep); }

.btn {
  min-height: 46px;
  border-radius: 999px;
  padding: 12px 20px;
  font-weight: 600;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-1px); }
.btn-ghost { border-color: var(--blue); color: var(--blue-deep); }
.btn-ghost:hover { background: #fff; border-color: var(--blue-deep); }

.chapter {
  background: var(--canvas);
  padding-block: clamp(72px, 9vw, 112px);
}
.chapter--tinted { background: var(--tinted); }
.title-page {
  min-height: min(850px, 100vh);
  padding-top: calc(var(--bar-h) + clamp(56px, 8vw, 96px));
  display: flex;
  align-items: center;
}
.title-page__grid {
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 0.72fr);
  gap: clamp(44px, 8vw, 110px);
  align-items: center;
}
.title-page__side {
  position: relative;
  padding: clamp(28px, 4vw, 44px);
  border: 1px solid #d6aec1;
  border-radius: 16px;
  background: #f2e8e2;
}
.title-page__side::before {
  content: "FIELD NOTE 01 / THE ADOPTION GAP";
  display: block;
  margin-bottom: 24px;
  font: 500 0.68rem/1.4 "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
  color: #7b5668;
}
.page-flat .title-page__side::before { content: "FIELD NOTE 02 / EMBEDDED CHANGE"; }
.title-page__foot { border-color: var(--hairline); }

.gapmeter { display: none; }
.gapmeter__rail { border-color: var(--blue-soft); }
.gapmeter__span { background: var(--blue-soft); }

.figures,
.offers,
.notes,
.quotes { gap: 12px; }
.figure,
.offer,
.note,
.quote,
.demo-card,
.govern {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: none;
}
.figure:nth-child(even),
.note:nth-child(odd) { background: var(--card); }
.figure { padding: 24px 28px; }
.figure-num,
.price { color: var(--blue-deep); font-family: "Lora", Georgia, serif; font-weight: 400; }

.destination { background: var(--canvas); }
.dest-row {
  padding: 24px 28px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  margin-top: 12px;
}
.dest-row:nth-child(odd) { background: color-mix(in srgb, var(--card) 55%, transparent); }

.offers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.offer { padding: clamp(24px, 3vw, 34px); }
.offer--featured {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.offer--featured h3,
.offer--featured p,
.offer--featured li,
.offer--featured .price { color: #fff; }
.offer__mark {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: auto;
  padding: 6px 10px;
  margin: 0 0 22px;
  background: #d6aec1;
  color: #3f2c36;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1;
}
.offer--featured .badge {
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  font-size: 11px;
}
.offer--featured .btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,0.7);
}
.offer--featured .btn-ghost:hover {
  color: #16325a;
  background: #fff;
  border-color: #fff;
}

.govern {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.govern article {
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: #fff;
}

.notes { display: grid; gap: 12px; }
.note,
.note:first-of-type {
  padding: 28px 32px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.note__head { gap: 12px 36px; }
.note .accordion-trigger { margin-top: 20px; }
.note .accordion-panel { margin-top: 18px; }

.island {
  --ink: #ffffff;
  --muted: #dce5ef;
  --hairline: rgba(255,255,255,0.18);
  background: #16325a;
}
.island p { color: #ffffff !important; }
.island .eyebrow { color: #a2cbcd; }
.island .eyebrow::before { background: #d6aec1; }
.demo-card { background: #f2f8f7; color: #283338; }

.peak { background: #f2e8e2; }
.peak__gap { background: var(--blue-soft); }
.peak__gap { background-image: none !important; }
.peak__resolve { border-color: #d6aec1; }

.accordion-trigger { font-family: "Lora", Georgia, serif; font-weight: 400; }
.close { background: var(--blue-deep); }
.close .eyebrow::before { background: #d6aec1; }
.colophon { border-color: rgba(255,255,255,0.22); }

@media (max-width: 900px) {
  .title-page { min-height: auto; }
  .title-page__grid { grid-template-columns: 1fr; }
  .offers { grid-template-columns: 1fr; }
  .gapmeter { display: none; }
}