/*
 * MyMeridian public surface.
 *
 * One world: a twilight sky that runs from the hero's deep dusk down to the
 * daybreak of the closing frame, with the brand's meridian globe turning
 * through it. Gold is what the merchant keeps; ember is what the business
 * takes; periwinkle is data at rest. Nothing on this page is decorative for
 * its own sake — every figure shown is one the product actually computes.
 *
 * Sections, in order:
 *   tokens · base · grain · splash · header · hero · reckoning · arithmetic
 *   · story · method · theme · trust · pricing · close · footer · motion
 *   · responsive · reduced motion · globe
 */

/* ------------------------------------------------------------------ type */

/* Satoshi is delivered directly from Fontshare under its web-font licence.
   The binary stays off this repository; this external delivery is the only
   licensed way for the public website to use its intended brand face. */
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,600,700,800,900&display=swap");

/* Plus Jakarta remains available for places that need a resilient fallback. */
@font-face {
  font-family: "Plus Jakarta Sans Variable";
  src: url("fonts/PlusJakartaSans-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Plus Jakarta Sans Variable";
  src: url("fonts/PlusJakartaSans-Italic.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}


/*
 * Space Grotesk, SIL OFL 1.1 — the display face.
 *
 * The mark is drawn in compass geometry: true circles, a vertical axis, one
 * arc struck at a fixed radius. Plus Jakarta Sans setting both the headline
 * and the body meant the page had a voice but no register — nothing on it
 * was drawn the way the logo is drawn.
 *
 * Space Grotesk answers the mark: constructed rather than written, flat
 * terminals cut on the horizontal and vertical, and bowls that are close to
 * true circles. Its figures matter more than its letters here — this page is
 * mostly numbers, and its tabular set is even-coloured and unambiguous at
 * display size, which is why $207.7K can be set large without wobbling.
 *
 * Plus Jakarta Sans keeps every paragraph: it is the warmer, more readable
 * face, and the contrast between the two is the point.
 */
@font-face {
  font-family: "Space Grotesk Variable";
  src: url("fonts/SpaceGrotesk-Variable.woff2") format("woff2-variations");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  /*
   * White and black. Nothing else.
   *
   * The reference is a monochrome portfolio inverted: paper ground, near-black
   * type, and every distinction carried by VALUE rather than hue. Navy and
   * gold move to the application, which is getting light and dark themes of
   * its own; the page that has to sell it stays out of their way.
   *
   * The discipline is the point. A monochrome page cannot lean on a colour to
   * make a section look designed — it has to earn it with type, measure and
   * space, which is the thing this page kept failing at while there was a
   * gold accent papering over it.
   */
  --void: #f2f2f0;
  --ground: #ffffff;
  --plane: #fafafa;
  --surface: #ffffff;
  --surface-2: #f7f7f6;
  --surface-soft: rgba(10, 10, 10, 0.035);

  /* Ink */
  --ink: #0a0a0a;
  --ink-rgb: 10, 10, 10;
  --ink-2: rgba(10, 10, 10, 0.68);
  --ink-3: rgba(10, 10, 10, 0.5);
  /* Subdued labels remain readable at text sizes, not merely decorative. */
  --ink-4: rgba(10, 10, 10, 0.58);

  /*
   * The data still has to say three different things — money in, money taken,
   * money kept — so the ramp is a value ramp, not a palette. Kept is the
   * darkest mark on the page, which is also the correct emphasis: it is the
   * number the whole product exists to produce.
   *
   * The token names stay `--gold`, `--ember`, `--periwinkle`: they are
   * load-bearing across 2,900 lines and renaming them buys nothing but churn.
   */
  --gold: #0a0a0a;          /* kept — the darkest mark */
  --gold-bright: #000000;
  --gold-dim: rgba(10, 10, 10, 0.06);
  --ember: #8e8e8e;         /* taken */
  --ember-dim: rgba(142, 142, 142, 0.14);
  --periwinkle: #c4c4c4;    /* at rest */
  --periwinkle-dim: rgba(10, 10, 10, 0.05);
  --cyan: #a8a8a8;
  --violet: #9a9a9a;

  /* Rules are ink at low alpha, never a colour. */
  --line-gold: rgba(10, 10, 10, 0.22);
  --line-gold-soft: rgba(10, 10, 10, 0.1);

  --card: #ffffff;
  --card-hi: #fafafa;

  --border: rgba(10, 10, 10, 0.13);
  --border-strong: rgba(10, 10, 10, 0.28);

  /* Frame */
  /*
   * 1240px was a 2019 measure. On a 1800px display it leaves 280px of dead
   * navy down each side and squeezes every section into the middle 69% of
   * the screen — which is most of why the page reads as empty regardless of
   * what is in it. The gutter grows with the viewport so the content still
   * breathes at the edges.
   */
  --page: 1480px;
  --gutter: clamp(20px, 3.4vw, 56px);
  /* Section band. 164px top plus 164px bottom put 328px of nothing between
     one section and the next — a third of a laptop screen of dead navy at
     every join. Tightened until the page reads as continuous rather than as
     nine posters stacked. */
  --band: clamp(60px, 6.2vw, 94px);
  --head-gap: clamp(34px, 3.6vw, 56px);
  --radius: 22px;
  --radius-lg: 28px;
  --radius-sm: 12px;

  /* Serif for headings; the grotesque for every figure and label. */
  /* The MyMeridian lockup is Satoshi. Use it across the public surface so the
     wordmark and surrounding interface are a single visual system. */
  --font-display: "Satoshi", "Space Grotesk Variable", ui-sans-serif, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font: "Satoshi", "Space Grotesk Variable", ui-sans-serif, -apple-system,
    BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);

  /* Scroll-driven, written by the page script */
  --hero-scroll: 0;
  --product-lift: 0;
  --theme-clip: 100%;
  --theme-position: 0%;
}

/* ------------------------------------------------------------------ base */

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

html {
  background: var(--ground);
  scroll-behavior: smooth;
  scrollbar-color: rgba(10, 10, 10, 0.5) var(--ground);
  scrollbar-width: thin;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  position: relative;
  isolation: isolate;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ---------------------------------------------------------------- line field
   This is one full-document coordinate system, not a new ornament in every
   band. Because it sits behind the page's transparent reading surfaces, each
   path continues cleanly from the hero through the legal footer. */
.contour-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100vh;
  overflow: visible;
  color: var(--ink);
  pointer-events: none;
}

.contour-field path,
.contour-field ellipse,
.contour-field circle {
  fill: none;
  stroke: currentColor;
  vector-effect: non-scaling-stroke;
}

.contour-field .contour-major {
  stroke-width: 1.15;
  opacity: 0.16;
}

.contour-field .contour-minor {
  stroke-width: 1;
  opacity: 0.09;
}

.contour-field .contour-axis {
  stroke-width: 0.9;
  opacity: 0.07;
}

main,
footer {
  position: relative;
  z-index: 1;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

button {
  font: inherit;
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

/*
 * Headings are set in the wordmark's own face.
 *
 * The editorial serif came from the Wix reference and looked handsome, but it
 * shared nothing with "MyMeridian" in the top-left — so the page read as two
 * brands stacked. The mark is the fixed point: whatever it is set in, the
 * headings are set in too. Space Grotesk it is, and the serif comes out.
 */
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

h1 strong, h2 strong, h3 strong { font-weight: 680; }

h1 strong,
h2 strong,
h3 strong {
  font-weight: 620;
}

p {
  margin: 0;
}

::selection {
  color: #14182c;
  background: rgba(10, 10, 10, 0.85);
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
  background: var(--ground);
}

::-webkit-scrollbar-track {
  background: var(--ground);
}

::-webkit-scrollbar-thumb {
  min-height: 42px;
  border: 3px solid var(--ground);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.5);
  background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(10, 10, 10, 0.72);
  background-clip: padding-box;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: #14182c;
  font-size: 13px;
  font-weight: 650;
  transform: translateY(-160%);
  transition: transform 200ms var(--ease);
}

.skip-link:focus-visible {
  transform: none;
}

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

section[id] {
  scroll-margin-top: 96px;
}

/* Figures read as a ledger everywhere on the page. */
strong[data-count],
.receipt dd,
.bar-label strong,
.plan-price,
.hero-chip strong,
.demo-right i,
.demo-wrong i,
.receipt-line-result .result,
.trust-no,
.refusal-index,
.chapter,
.kicker,
.bar-label em,
.window-title,
.window-meta,
.plan-name,
.brand {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* The wordmark sits beside the drawn mark, so it is set in the face that
   shares the mark's geometry, tracked out a touch to match its openness. */
.brand {
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------- shared parts */

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 680;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--gold);
}

/*
 * ONE section head, used by every section without exception.
 *
 * Each section had grown its own head: some left-aligned at 760px, some
 * split into two columns, one centred, one indented. Eight bespoke layouts
 * is why the page never read as even — the reader re-learns the grid at
 * every scroll and nothing feels deliberate. Centred, one measure, one
 * rhythm, no per-section overrides anywhere below this line.
 */
.section-head,
.reckoning-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 780px;
  margin-inline: auto;
  margin-bottom: var(--head-gap);
  text-align: center;
}

.section-head .kicker,
.reckoning-head .kicker {
  margin-bottom: 20px;
}

.section-head > p,
.reckoning-head > p {
  max-width: 60ch;
  margin-top: 20px;
}

.section-head h2,
.reckoning-head h2,
.final-inner h2,
.theme-copy h2 {
  font-size: clamp(33px, 4.4vw, 60px);
}

.section-head h2 strong,
.reckoning-head h2 strong,
.final-inner h2 strong,
.theme-copy h2 strong {
  color: var(--gold);
}

.section-head > p,
.reckoning-head > p {
  max-width: 58ch;
  margin-top: 22px;
  color: var(--ink-2);
  font-size: clamp(16px, 1.25vw, 18.5px);
  line-height: 1.62;
}

.caption {
  color: var(--ink-4);
  font-size: 13px;
  line-height: 1.55;
}

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 20px;
  overflow: hidden;
  border-radius: 13px;
  background: #fffdf8;
  color: #191f3a;
  font-size: 14px;
  font-weight: 680;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 14px 34px -20px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.14);
  transition: transform 240ms var(--ease), box-shadow 240ms ease, filter 240ms ease;
}

/*
 * The button used to run a shine across itself on hover. A cream button on a
 * midnight page is already the brightest thing in view; polishing it further
 * is the tell of a template. It lifts and deepens its shadow instead.
 */

.pill:hover {
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 22px 44px -22px rgba(0, 0, 0, 0.95),
    0 0 0 1px rgba(255, 255, 255, 0.22);
}

.pill:active {
  transform: translateY(0) scale(0.985);
}

.pill svg {
  transition: transform 240ms var(--ease);
}

.pill:hover svg {
  transform: translateX(3px);
}

.pill-lg {
  min-height: 56px;
  padding: 0 26px;
  border-radius: 15px;
  font-size: 15.5px;
}

.pill-small {
  min-height: 38px;
  padding-inline: 16px;
  font-size: 13px;
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 22px;
  border: 1px solid var(--border-strong);
  border-radius: 15px;
  background: rgba(245, 240, 231, 0.03);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 580;
  white-space: nowrap;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: border-color 220ms ease, color 220ms ease, background 220ms ease, transform 220ms var(--ease);
}

.ghost-btn:hover {
  border-color: rgba(10, 10, 10, 0.55);
  background: var(--gold-dim);
  color: var(--ink);
  transform: translateY(-2px);
}

/* Glass panel — one recipe, used by every raised surface on the page. */
.glass {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 34px 70px -46px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ----------------------------------------------------------------- grain */

.grain {
  position: fixed;
  inset: 0;
  z-index: 900;
  width: 100%;
  height: 100%;
  opacity: 0.025;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* ---------------------------------------------------------------- splash */

.site-splash {
  display: none;
}

.js .site-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  /*
   * Follows the theme. This was hard-coded white, so in dark mode the splash
   * painted a white panel and then drew the wordmark in the dark theme's ink —
   * which is also white. The mark showed (its own stroke colour) and the word
   * did not, which reads as the wordmark animation being broken rather than
   * invisible.
   */
  background: var(--ground);
}

.js .site-splash::before,
.js .site-splash::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.js .site-splash::before {
  width: min(80vw, 900px);
  aspect-ratio: 1;
  border: 1px solid rgba(10, 10, 10, 0.14);
  box-shadow: inset 0 0 100px rgba(10, 10, 10, 0.06);
  animation: splash-orbit 9s linear infinite;
}

.js .site-splash::after {
  width: min(48vw, 540px);
  height: 180px;
  background: rgba(10, 10, 10, 0.13);
  filter: blur(80px);
}

.site-splash.out {
  animation: splash-out 260ms ease-in forwards;
}

.site-splash.done {
  display: none;
}

.site-splash-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  padding: 24px;
}

.site-splash-globe {
  color: var(--ink);
  animation: globe-in 320ms var(--ease) both;
}

.site-splash-globe svg {
  display: block;
  width: clamp(68px, 8vw, 112px);
  height: auto;
}

.site-splash-word {
  display: flex;
  overflow: hidden;
  font-size: clamp(32px, 5vw, 66px);
  font-weight: 560;
  letter-spacing: -0.05em;
}

.site-splash-word span {
  opacity: 0;
  animation: letter-in 420ms var(--ease) forwards;
}

.site-splash-word span:nth-child(1) { animation-delay: 210ms; }
.site-splash-word span:nth-child(2) { animation-delay: 238ms; }
.site-splash-word span:nth-child(3) { animation-delay: 266ms; }
.site-splash-word span:nth-child(4) { animation-delay: 294ms; }
.site-splash-word span:nth-child(5) { animation-delay: 322ms; }
.site-splash-word span:nth-child(6) { animation-delay: 350ms; }
.site-splash-word span:nth-child(7) { animation-delay: 378ms; }
.site-splash-word span:nth-child(8) { animation-delay: 406ms; }
.site-splash-word span:nth-child(9) { animation-delay: 434ms; }
.site-splash-word span:nth-child(10) { animation-delay: 462ms; }

.mark.spinning .meridian-a { animation: globe-sweep-a 720ms linear both; }
.mark.spinning .meridian-b { animation: globe-sweep-b 720ms linear both; }
.mark.spinning .meridian-c { animation: globe-sweep-c 720ms linear both; }

@keyframes globe-in {
  from { opacity: 0; transform: scale(0.82); }
  to { opacity: 1; transform: none; }
}

@keyframes letter-in {
  from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes splash-orbit {
  to { transform: rotate(360deg); }
}

@keyframes splash-out {
  to { opacity: 0; visibility: hidden; }
}

@keyframes globe-sweep-a {
  0% { rx: 24.5px; } 10% { rx: 20.15px; } 20% { rx: 22.65px; }
  30% { rx: 33.18px; } 40% { rx: 17.84px; } 50% { rx: 0.65px; }
  60% { rx: 13.32px; } 70% { rx: 20.17px; } 80% { rx: 23.28px; }
  90% { rx: 24.35px; } 100% { rx: 24.5px; }
}

@keyframes globe-sweep-b {
  0% { rx: 13.5px; } 10% { rx: 29.16px; } 20% { rx: 11.11px; }
  30% { rx: 33.47px; } 40% { rx: 27.63px; } 50% { rx: 12.52px; }
  60% { rx: 0.21px; } 70% { rx: 8.04px; } 80% { rx: 11.92px; }
  90% { rx: 13.3px; } 100% { rx: 13.5px; }
}

@keyframes globe-sweep-c {
  0% { rx: 0; } 10% { rx: 33.7px; } 20% { rx: 2.56px; }
  30% { rx: 28.36px; } 40% { rx: 33.23px; } 50% { rx: 24.04px; }
  60% { rx: 13.31px; } 70% { rx: 5.74px; } 80% { rx: 1.71px; }
  90% { rx: 0.21px; } 100% { rx: 0; }
}

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

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-top: 0;
  pointer-events: none;
  transition: background 260ms ease, border-color 260ms ease;
}

/*
 * A plain bar, not a floating pill.
 *
 * The pill needed a navy scrim under it so headings could dissolve on their
 * way past; over a paper band that scrim is a dark smudge across the top of
 * the screen. The editorial reference just runs the nav full width with a
 * hairline under it, which needs no scrim at all, adapts to whatever band is
 * behind it, and is the more confident object anyway.
 */
.header-inner {
  position: relative;
  z-index: 1;
  /* Locked to the page measure so the brand sits above the headline. */
  width: min(calc(100% - 2 * var(--gutter)), calc(var(--page) - 2 * var(--gutter)));
  min-height: 64px;
  margin-inline: auto;
  padding: 9px 10px 9px 18px;
  display: flex;
  align-items: center;
  gap: 28px;
  border: 0;
  border-radius: 0;
  pointer-events: auto;
  transition: border-color 260ms ease, background 260ms ease, box-shadow 260ms ease,
    backdrop-filter 260ms ease;
}

/* The dark pill backdrop is gone: the bar itself takes the backdrop now, and
   this rule survived an earlier edit as a duplicate — it was painting a
   74%-opaque navy panel across the top of a white page. */

.header-progress {
  position: absolute;
  inset: auto 0 -1px;
  z-index: 2;
  height: 1.5px;
  opacity: 0;
  transition: opacity 300ms ease;
}

.header.scrolled .header-progress {
  opacity: 1;
}

.header-progress i {
  display: block;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 660;
  letter-spacing: -0.02em;
}

.brand svg {
  display: block;
  transition: transform 500ms var(--ease);
}

.brand:hover svg {
  transform: rotate(-8deg);
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 560;
}

.header-nav a:not(.pill) {
  padding: 9px 13px;
  border-radius: 10px;
  color: var(--ink-2);
  transition: background 180ms ease, color 180ms ease;
}

.header-nav a:not(.pill):hover {
  background: var(--periwinkle-dim);
  color: var(--ink);
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  /* Tuned against the fold, not against the look of the section on its own:
     at 1440x800 the trial button has to be on screen without scrolling, and
     every pixel above it is spent from that budget. */
  padding: clamp(118px, 11.4vw, 156px) 0 clamp(60px, 8vw, 110px);
  overflow: hidden;
  isolation: isolate;
  /*
   * One flat value, and the deepest on the page.
   *
   * This was a five-stop sky with three coloured blobs floated over it. At
   * any given scroll position it looked well enough, but it is the thing
   * that dates a page fastest: the eye reads a soft purple bloom as decor
   * applied to a layout rather than as the layout. The hero now earns its
   * depth from the one object actually in it — the globe — and from being a
   * darker plane than the ground it sits above.
   */
  background: transparent;
}

/*
 * The hero carries the same plate as the close, mirrored.
 *
 * One material across the page, not two: the same surface, flipped so its
 * engraved quarter falls on the right behind the globe and its deep shadow
 * runs under the copy column. Held well back — this is the frame the
 * headline has to win, so the plate is here to give the navy a grain and a
 * curvature, not to be looked at.
 */
/*
 * The hero carries one visual, and it is the globe.
 *
 * A plate went here too, and with the engraving, the globe, the sparkles and
 * a four-line headline all in the same frame it read as clutter — the
 * ornament was running directly behind the type it was supposed to sit
 * behind. The first screen gets the mark on flat navy and nothing else.
 */
.hero::before {
  display: none;
}

/* A hard edge, deliberately. With both planes flat there is nothing to fade
   between, and a 220px dissolve would only blur a boundary the design is
   making on purpose. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  height: 1px;
  background: var(--border);
  pointer-events: none;
}

/* ------------------------------------------------------- hero, centred */

/*
 * The Portfolite hero, in MyMeridian's palette.
 *
 * One full-bleed atmospheric plate, everything centred over it, and the
 * whole opening carried by type: a status pill, a very large light-weight
 * headline, one short line under it, two outlined buttons, and a scroll cue
 * ruled across the width. No starfield, no wireframe, no ornament competing
 * with the words — the reference gets its presence from a single surface and
 * a lot of confidence, which is exactly what this page kept failing to do by
 * layering three things at once.
 */
/*
 * Copy left, mark right.
 *
 * The centred column came from the Portfolite hero, which has a full-bleed
 * image doing the work behind it. With that plate gone the centring had
 * nothing to hold it, so the hero goes back to a reading column on the left
 * and gives the right half to the globe — which is the one thing on this
 * page that moves, and now has room to.
 */
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  text-align: left;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 640px;
}

.hero-title {
  margin-top: 0;
  font-weight: 400;
  font-size: clamp(42px, 6.4vw, 96px);
  font-weight: 300;
  letter-spacing: -0.022em;
  line-height: 1.02;
}

.hero-title .line { display: block; }

.hero-sub {
  max-width: 48ch;
  margin-top: 26px;
  font-size: clamp(15px, 1.2vw, 18px);
}

.hero-actions { justify-content: flex-start; }
.hero-assurances { justify-content: flex-start; }

/* Both hero buttons are outlined; the reference has no filled button in the
   hero at all, and the restraint is most of why it reads as expensive. */
.hero-actions .pill {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(245, 240, 231, 0.34);
  box-shadow: 0 0 34px -12px rgba(245, 240, 231, 0.4);
}

.hero-actions .pill:hover {
  background: rgba(245, 240, 231, 0.06);
  border-color: rgba(245, 240, 231, 0.6);
}

/* The scroll cue: rules either side of a small mark. */
.scroll-rule {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(100%, calc(var(--page) - 2 * var(--gutter)));
  margin: clamp(48px, 6vw, 88px) auto 0;
  padding-inline: var(--gutter);
  color: var(--ink-4);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.scroll-rule i {
  flex: 1;
  height: 1px;
  background: rgba(245, 240, 231, 0.14);
}

.scroll-rule em {
  flex: none;
  width: 15px;
  height: 24px;
  border: 1px solid rgba(245, 240, 231, 0.34);
  border-radius: 999px;
  position: relative;
}

.scroll-rule em::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 50%;
  width: 2px;
  height: 5px;
  border-radius: 2px;
  background: var(--gold);
  transform: translateX(-50%);
  animation: scroll-tick 2s ease-in-out infinite;
}

@keyframes scroll-tick {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(7px); opacity: 0.3; }
}

/* Sky ------------------------------------------------------------------- */

.hero-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: 50% 46%;
  pointer-events: none;
}


/* ------------------------------------------------------- hero chart band */

.hero-chart-band {
  position: relative;
  z-index: 2;
  width: min(100%, calc(var(--page) - 2 * var(--gutter)));
  margin: clamp(40px, 5vw, 72px) auto 0;
  padding-inline: var(--gutter);
}

.hero-chart { display: block; width: 100%; height: clamp(170px, 19vw, 260px); overflow: visible; }

.hc-grid { stroke: rgba(245, 240, 231, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hc-axis { stroke: var(--line-gold-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hc-tick { fill: var(--ink-4); font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; }
.hc-area { fill: rgba(10, 10, 10, 0.07); }
.hc-line { stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hc-node { fill: var(--gold-bright); }

.js .hc-line { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: hc-draw 1900ms var(--ease) 300ms forwards; }
.js .hc-node { opacity: 0; animation: hc-pop 420ms var(--ease) 1100ms forwards; }
.js .hc-area { opacity: 0; animation: hc-fade 900ms ease 1300ms forwards; }

@keyframes hc-draw { to { stroke-dashoffset: 0; } }
@keyframes hc-pop { to { opacity: 1; } }
@keyframes hc-fade { to { opacity: 1; } }

.hero-chart-caption {
  display: flex; justify-content: space-between; gap: 20px; margin-top: 14px;
  color: var(--ink-4); font-family: var(--font-display); font-size: 11px;
  font-weight: 620; letter-spacing: 0.16em; text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .js .hc-line { stroke-dashoffset: 0; animation: none; }
  .js .hc-node, .js .hc-area { opacity: 1; animation: none; }
}

@media (max-width: 720px) { .hero-chart-caption { flex-direction: column; gap: 4px; } }


/*
 * The sparkle field.
 *
 * Four-point stars, not dots — a round dot at this size reads as dust or a
 * dead pixel, and a blinking one reads as a rendering fault. The four-point
 * form is the one shape that says "star" at 6px, which is why every chart
 * legend and every map key has used it for two hundred years.
 *
 * It sits above the section planes and below the content, so a sparkle can
 * cross open navy but never a card, a figure or a screenshot. Positions are
 * baked into the markup from a fixed seed, so the field is identical on
 * every load and in every screenshot.
 */
.sparkfield {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  fill: var(--gold-bright);
  opacity: 0;
  will-change: opacity, transform;
  animation: spark-twinkle var(--dur) ease-in-out var(--delay) infinite;
}

/* Two thirds of them are the cooler blue of the sky rather than brass, so the
   field reads as depth instead of as a scatter of gold confetti. */
.spark:nth-child(3n),
.spark:nth-child(3n + 1) {
  fill: #c9d6ff;
}

@keyframes spark-twinkle {
  0%, 100% { opacity: 0; transform: scale(0.45) rotate(0deg); }
  45% { opacity: var(--peak); transform: scale(1) rotate(22deg); }
  70% { opacity: calc(var(--peak) * 0.55); transform: scale(0.86) rotate(30deg); }
}

/* The high band of colour above the horizon. Drifts slowly, never loops
   visibly, and is the only thing on the page that animates on its own. */
.aurora {
  display: none;
}

/* Hero copy ------------------------------------------------------------- */

.hero-inner {
  position: relative;
  z-index: 2;
}

.hero-copy {
  max-width: 660px;
}

.kicker-hero {
  padding: 7px 14px 7px 12px;
  border: 1px solid rgba(10, 10, 10, 0.28);
  border-radius: 999px;
  background: rgba(10, 10, 10, 0.07);
  color: rgba(245, 240, 231, 0.72);
}

.kicker-hero::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}

.hero-title {
  margin-top: 24px;
  /* Four lines is the argument, so all four have to fit above the fold with
     the button still under them. 84px did not; the couplet loses nothing
     legible at 76 and buys back a line's worth of height. */
  font-size: clamp(40px, 5.3vw, 76px);
  line-height: 0.96;
  letter-spacing: -0.045em;
}

.hero-title .line {
  display: block;
}

.hero-title .line-1,
.hero-title .line-2 {
  color: var(--ink-3);
  font-weight: 380;
}

.hero-title em {
  font-style: normal;
  font-weight: 500;
}

.hero-title .line-2 em {
  color: var(--ink-2);
}

.hero-title strong {
  font-weight: 620;
  color: var(--ink);
}

/* The one word the whole page turns on. */
.hero-title .line-4 em {
  position: relative;
  font-weight: 700;
  color: var(--gold);
}

.hero-title .line-4 em::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0.06em;
  bottom: 0.03em;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: underline-draw 900ms var(--ease) 900ms forwards;
}

@keyframes underline-draw {
  to { transform: scaleX(1); }
}

.hero-sub {
  max-width: 54ch;
  margin-top: 24px;
  color: var(--ink-2);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
}

.hero-assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-4);
  font-size: 13px;
  font-weight: 520;
}

.hero-assurances li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-assurances li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--periwinkle);
  opacity: 0.7;
}

/* Hero product ---------------------------------------------------------- */

.hero-stage-wrap {
  position: relative;
  z-index: 2;
  margin-top: clamp(56px, 7vw, 96px);
  perspective: 2200px;
}

.hero-product {
  position: relative;
  transform-style: preserve-3d;
}

.product-glow {
  position: absolute;
  inset: 12% 6% -12%;
  z-index: -1;
  border-radius: 50%;
  display: none;
}

.product-window {
  transform:
    rotateX(calc((1 - var(--product-lift)) * 13deg))
    scale(calc(0.965 + var(--product-lift) * 0.035));
  transform-origin: 50% 0%;
  will-change: transform;
}

.product-window,
.story-window {
  overflow: hidden;
  border: 1px solid rgba(245, 240, 231, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(11, 15, 32, 0.82);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.12) inset,
    0 60px 120px -60px rgba(0, 0, 0, 1),
    0 24px 60px -40px rgba(0, 0, 0, 0.9);
}

.window-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  min-height: 44px;
  border-bottom: 1px solid rgba(245, 240, 231, 0.1);
  background: rgba(10, 10, 10, 0.055);
  color: var(--ink-4);
  font-size: 10.5px;
  font-weight: 620;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.window-title {
  margin-inline: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window-meta {
  flex: none;
}

.window-dots {
  display: inline-flex;
  flex: none;
  gap: 6px;
}

.window-dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(245, 240, 231, 0.16);
}

.window-body {
  position: relative;
  overflow: hidden;
}

.window-body img,
.story-screen,
.story-mobile-image,
.theme-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 1800 / 1126;
  object-fit: cover;
  object-position: top center;
}

/* The glass sweep that used to cross the product window on arrival is gone
   for the same reason as the button's: a real screenshot does not need a
   highlight animated over it to look like a screen. */
.window-sheen {
  display: none;
}

.hero-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 132px;
  padding: 13px 17px;
  border: 1px solid var(--border-strong);
  border-radius: 15px;
  background: rgba(14, 18, 40, 0.72);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 24px 50px -28px rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  animation: chip-float 7s ease-in-out infinite alternate;
}

.hero-chip span {
  color: var(--ink-4);
  font-size: 9.5px;
  font-weight: 680;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero-chip strong {
  color: var(--ink);
  font-size: 23px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.hero-chip small {
  color: var(--ink-4);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.hero-chip .is-dash {
  color: var(--ink-3);
}

.hero-chip-left {
  top: 18%;
  left: clamp(-28px, -2vw, -12px);
  animation-delay: -1.6s;
}

.hero-chip-right {
  top: 44%;
  right: clamp(-28px, -2vw, -12px);
  animation-delay: -3.4s;
}

.hero-chip-low {
  bottom: 12%;
  left: 8%;
  animation-delay: -5s;
}

@keyframes chip-float {
  from { transform: translateY(-5px); }
  to { transform: translateY(5px); }
}

.scroll-cue {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: clamp(46px, 6vw, 76px) auto 0;
  color: var(--ink-4);
  font-size: 10.5px;
  font-weight: 640;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: color 200ms ease;
}

.scroll-cue:hover {
  color: var(--ink-2);
}

.scroll-cue i {
  width: 1px;
  height: 46px;
  background: var(--gold);
  animation: cue 2.4s ease-in-out infinite;
  transform-origin: 50% 0;
}

@keyframes cue {
  0%, 100% { transform: scaleY(0.35); opacity: 0.4; }
  45% { transform: scaleY(1); opacity: 1; }
}

/* ---------------------------------------------------------------- ground */

.ground {
  position: relative;
  background: transparent;
}

.ground > section {
  position: relative;
  padding-block: var(--band);
}

/* A hairline between bands, brightest at the left edge the page is set to. */
.ground > section + section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--line-gold-soft);
}

/* ------------------------------------------------------------- reckoning */

.reckoning-head h2 strong {
  color: var(--ember);
}

.reckoning-head .loss {
  color: var(--ember);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.reckoning-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.34fr) minmax(300px, 0.66fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: stretch;
}

.dotfield {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  margin: 0;
  padding: clamp(22px, 2.4vw, 32px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.dotfield-plot {
  position: relative;
}

.dotfield canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: crosshair;
}

/*
 * The readout. Follows the pointer, states what the dot is, and never
 * quotes a figure — see the note in motion.js.
 */
.dot-readout {
  position: absolute;
  z-index: 3;
  padding: 7px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  background: var(--void);
  color: var(--ink-2);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 560;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, calc(-100% - 14px));
  transition: opacity 140ms ease;
  pointer-events: none;
}

.dot-readout.is-on { opacity: 1; }
.dot-readout.is-loss { border-color: rgba(142, 142, 142, 0.5); color: var(--ember); }
.dot-readout.is-this { border-color: var(--gold); color: var(--gold); }

.dot-legend {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}

.dot-hint {
  margin-left: auto;
  color: var(--ink-4);
  font-size: 11.5px;
}

@media (hover: none) {
  .dot-hint { display: none; }
}

.dotfield figcaption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.02em;
}

.dot-key {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: -14px;
  border-radius: 2px;
  vertical-align: middle;
}

.dot-key-keep { background: rgba(10, 10, 10, 0.7); }
.dot-key-this {
  background: none;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
  width: 9px;
  height: 9px;
}
.dot-key-loss { background: var(--ember); }

/* The receipt ----------------------------------------------------------- */

.receipt {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 30px);
  border: 1px solid rgba(10, 10, 10, 0.24);
  border-radius: var(--radius);
  background: var(--card-hi);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 40px 80px -54px rgba(0, 0, 0, 1);
}

.receipt-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(245, 240, 231, 0.18);
}

.receipt-id {
  color: var(--ink);
  font-size: 15px;
  font-weight: 660;
  letter-spacing: -0.01em;
}

.receipt-meta {
  color: var(--ink-4);
  font-size: 12px;
}

.receipt-lines {
  margin: 4px 0 0;
}

.receipt-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(245, 240, 231, 0.06);
}

.receipt-line dt {
  color: var(--ink-3);
  font-size: 13.5px;
}

.receipt-line dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.receipt-line .pos { color: var(--ink); }
.receipt-line .neg { color: var(--ember); }
.receipt-line .dash { color: var(--ink-4); }

.receipt-line-dash dt::after {
  content: "No Synced Source";
  display: block;
  margin-top: 1px;
  color: var(--ink-4);
  font-size: 11px;
}

.receipt-line-result {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px dashed rgba(10, 10, 10, 0.4);
  border-bottom: 0;
}

.receipt-line-result dt {
  max-width: 14ch;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.32;
}

.receipt-line-result .result {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--gold);
  font-size: 30px;
  font-weight: 640;
  letter-spacing: -0.035em;
  line-height: 1;
}

.receipt-line-result .result small {
  color: var(--ink-4);
  font-size: 11.5px;
  font-weight: 550;
  letter-spacing: 0;
}

.receipt-note {
  margin-top: 20px;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.58;
}

/* ------------------------------------------------------------ arithmetic */

.arithmetic {
}

.waterfall {
  position: relative;
  padding: 34px clamp(18px, 2.4vw, 34px) 104px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

.waterfall-grid {
  position: absolute;
  inset: 34px clamp(18px, 2.4vw, 34px) 104px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
}

.waterfall-grid span {
  position: relative;
  height: 1px;
  background: rgba(245, 240, 231, 0.06);
}

.waterfall-grid span::after {
  content: attr(data-tick);
  position: absolute;
  right: 0;
  bottom: 4px;
  color: var(--ink-4);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.05em;
}

.waterfall-bars {
  --wf-gap: clamp(8px, 1.4vw, 22px);
  position: relative;
  display: flex;
  gap: var(--wf-gap);
  height: clamp(260px, 30vw, 380px);
  margin: 0;
  /* The axis reads down the right-hand edge, so the bars stop short of it.
     Without the gutter the $130K and $0 ticks land inside the gold profit
     bar, which is the one figure on the page that has to be legible. */
  padding: 0 clamp(44px, 4vw, 58px) 0 0;
  list-style: none;
}

.bar {
  --link: var(--from);
  position: relative;
  flex: 1;
  min-width: 0;
}

.bar-start {
  --link: var(--to);
}

/* The step line joining one bar's foot to the next bar's head. */
.bar:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--link);
  width: calc(100% + var(--wf-gap));
  border-top: 1px dashed rgba(245, 240, 231, 0.24);
  opacity: 0;
  transition: opacity 400ms ease 700ms;
}

.reveal.in .bar:not(:last-child)::after {
  opacity: 1;
}

.bar-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--from);
  height: calc(var(--to) - var(--from));
  border-radius: 7px;
  transform: scaleY(0);
  transition: transform 900ms var(--ease);
}

.bar-cost .bar-fill { transform-origin: 50% 0; }
.bar-start .bar-fill,
.bar-result .bar-fill { transform-origin: 50% 100%; }

.reveal.in .bar-fill { transform: scaleY(1); }
.reveal.in .bar:nth-child(1) .bar-fill { transition-delay: 60ms; }
.reveal.in .bar:nth-child(2) .bar-fill { transition-delay: 220ms; }
.reveal.in .bar:nth-child(3) .bar-fill { transition-delay: 340ms; }
.reveal.in .bar:nth-child(4) .bar-fill { transition-delay: 460ms; }
.reveal.in .bar:nth-child(5) .bar-fill { transition-delay: 580ms; }
.reveal.in .bar:nth-child(6) .bar-fill { transition-delay: 760ms; }

/*
 * Bars are filled, not tinted.
 *
 * A 30% wash of coral over navy is not a coral bar, it is a brown one: the
 * ground swamps the hue and every cost bar came out the same muddy value as
 * the panel behind it. Raising the fill until the colour survives the
 * background, and giving each bar a crisp edge at near-full strength, is
 * what makes a bar look struck rather than smudged.
 */
.bar-start .bar-fill {
  background: rgba(10, 10, 10, 0.62);
  box-shadow: 0 0 0 1px rgba(10, 10, 10, 0.85) inset;
}

.bar-cost .bar-fill {
  background: rgba(142, 142, 142, 0.58);
  box-shadow: 0 0 0 1px rgba(142, 142, 142, 0.85) inset;
}

.bar-result .bar-fill {
  background: var(--gold);
  box-shadow:
    0 0 0 1px rgba(248, 214, 154, 0.6) inset;
}

.bar-label {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 20px);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.bar-label em {
  color: var(--ink-4);
  font-size: 10px;
  font-style: normal;
  font-weight: 660;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bar-label strong {
  color: var(--ink-2);
  font-size: clamp(14px, 1.4vw, 19px);
  font-weight: 620;
  letter-spacing: -0.028em;
  white-space: nowrap;
}

.bar-start .bar-label strong { color: var(--periwinkle); }
.bar-cost .bar-label strong { color: var(--ember); }

.bar-result .bar-label em { color: rgba(10, 10, 10, 0.75); }
.bar-result .bar-label strong {
  color: var(--gold);
  font-size: clamp(16px, 1.7vw, 23px);
}

.arithmetic-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px 32px;
  margin-top: clamp(30px, 3.4vw, 44px);
}

.margin-callout {
  max-width: 46ch;
  color: var(--ink-2);
  font-size: clamp(15px, 1.2vw, 17.5px);
}

.margin-callout strong {
  color: var(--gold);
  font-weight: 660;
  font-variant-numeric: tabular-nums;
}

.arithmetic-foot .caption {
  max-width: 36ch;
  text-align: right;
}

/* ----------------------------------------------------------------- story */

.story {
}

.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(320px, 0.78fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
}

.story-stage {
  position: sticky;
  top: 116px;
  display: flex;
  gap: 18px;
  align-items: stretch;
}

.story-window {
  flex: 1;
  min-width: 0;
}

/*
 * A letterbox, not a whole browser window.
 *
 * Showing all 1126px of a dense operating screen inside a 640px panel renders
 * the product as grey texture: the reader can tell there is a dashboard, and
 * can read nothing on it. Cropping to a band and panning to the row that
 * matters costs the "look how much is in here" impression and buys the only
 * thing that actually sells — a legible figure.
 */
.story-screens {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1800 / 880;
}

.story-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Fill the band rather than keeping the screenshot's own 1800/1126, which
     the shared image rule above would otherwise impose — the whole point is
     that the box is shorter than the picture. */
  height: 100%;
  aspect-ratio: auto;
  object-position: 50% var(--fy, 50%);
  /* 1.16 is not a taste value: the app's sidebar is 13.8% of the screenshot's
     width, and 1/(1 − 0.138) is exactly the scale that pushes it off a
     right-anchored frame. Going further starts eating the product-name
     column. */
  transform: scale(calc(var(--zoom, 1.16) * 1.03));
  /* Vertical origin tracks --fy so magnifying keeps the payoff pinned. With
     a fixed 50% origin the zoom crops symmetrically about the middle of the
     band and walks straight past the row the step is about. */
  transform-origin: 100% var(--fy, 50%);
  transition: opacity 620ms var(--ease), transform 900ms var(--ease);
}

.story-screen.is-active {
  opacity: 1;
  transform: scale(var(--zoom, 1.16));
}

.story-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  flex: none;
  padding: 4px 0;
  color: var(--ink-4);
  font-size: 10.5px;
  font-weight: 660;
  letter-spacing: 0.14em;
}

.story-progress .progress-label {
  color: var(--gold);
}

.story-progress i {
  position: relative;
  flex: 1;
  width: 2px;
  border-radius: 2px;
  background: rgba(245, 240, 231, 0.1);
}

.story-progress b {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--gold);
  transform-origin: 50% 0;
  transform: scaleY(0.25);
  transition: transform 520ms var(--ease);
}

.story-steps {
  display: flex;
  flex-direction: column;
  gap: clamp(40px, 5.4vw, 78px);
  padding-block: clamp(12px, 2vw, 28px) clamp(32px, 5vw, 76px);
}

.story-step {
  position: relative;
  padding-left: 26px;
  opacity: 0.4;
  transition: opacity 460ms ease;
}

.story-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: rgba(245, 240, 231, 0.12);
  transition: background 460ms ease;
}

.story-step.is-active {
  opacity: 1;
}

.story-step.is-active::before {
  background: var(--gold);
}

/* Framed on the same payoff as the sticky desktop stage — a phone reader has
   even less room to spare on a page title and a warning banner. */
.story-mobile-image {
  display: none;
  margin-bottom: 20px;
  height: auto;
  aspect-ratio: 1800 / 880;
  object-position: 50% var(--fy, 50%);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.chapter {
  display: block;
  margin-bottom: 14px;
  color: var(--ink-4);
  font-size: 10.5px;
  font-weight: 680;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.story-step.is-active .chapter {
  color: var(--gold);
}

.story-step h3 {
  font-size: clamp(21px, 2.1vw, 29px);
  letter-spacing: -0.032em;
}

.story-step p {
  margin-top: 14px;
  max-width: 46ch;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.62;
}

.truth-line {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 9px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  font-size: 12px;
}

.truth-line span {
  color: var(--ink-4);
  font-weight: 620;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
}

.truth-line strong {
  color: var(--ink);
  font-weight: 600;
}

/* ---------------------------------------------------------------- method */

.method {
}

.refusals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.refusal {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 2.6vw, 34px);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset;
  transition: border-color 320ms ease, transform 420ms var(--ease), box-shadow 420ms ease;
}

.refusal:hover {
  transform: translateY(-4px);
  border-color: rgba(10, 10, 10, 0.34);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 40px 80px -56px rgba(0, 0, 0, 1);
}

.refusal-index {
  margin-bottom: 18px;
  color: var(--ink-4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.refusal h3 {
  font-size: clamp(18px, 1.55vw, 22px);
  letter-spacing: -0.028em;
  line-height: 1.24;
}

.refusal p {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.62;
}

.refusal-demo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 26px;
}

.demo-wrong,
.demo-right {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(7, 10, 25, 0.55);
}

/*
 * The rejected value and the honest one.
 *
 * The "wrong" chip used to be dimmed with `opacity: 0.5` and a saturate
 * filter. That worked when it sat on navy; on white it just turns the whole
 * box grey and takes the text with it, so the thing the reader is supposed
 * to compare against became unreadable.
 *
 * It is struck through instead — the value is legible, and visibly crossed
 * out, which is what "MyMeridian will not print this" actually looks like.
 */
.demo-wrong {
  border-style: dashed;
  border-color: rgba(10, 10, 10, 0.2);
  background: transparent;
}

.demo-wrong b { color: var(--ink-4); }

.demo-wrong i {
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(10, 10, 10, 0.45);
}

/* The kept value is the solid one: black on paper, no strike. */
.demo-right {
  border-color: var(--ink);
  background: transparent;
}

.demo-right b { color: var(--ink-4); }
.demo-right i { color: var(--ink); font-weight: 640; }
.demo-right small { color: var(--ink-3); }

/*
 * These wrap rather than truncate. "SUGGESTED PRICE" does not fit one line in
 * a third of the row, and a section arguing that a blank is more honest than
 * a convenient number cannot afford to render its own labels as "SUGGESTED
 * PRI…". Tighter tracking buys most of it back; the wrap covers the rest at
 * every width.
 */
.refusal-demo b {
  color: var(--ink-4);
  font-size: 9px;
  font-weight: 680;
  letter-spacing: 0.1em;
  line-height: 1.35;
  text-transform: uppercase;
}

.refusal-demo i {
  color: var(--ink-2);
  font-size: 15px;
  font-style: normal;
  font-weight: 620;
  letter-spacing: -0.02em;
}

.demo-right i { color: var(--gold); }
.refusal-demo .is-loss { color: var(--ember); }
.refusal-demo .is-dash { color: var(--ink-3); }

.refusal-demo small {
  color: var(--ink-4);
  font-size: 10.5px;
  line-height: 1.3;
}

.demo-arrow {
  flex: none;
  color: var(--ink-4);
  font-size: 13px;
}

.method-close {
  max-width: 52ch;
  margin-top: clamp(36px, 4vw, 56px);
  color: var(--ink-2);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.6;
}

/* ----------------------------------------------------------------- theme */

.theme-story {
  padding-block: 0 !important;
  height: 240vh;
}

.theme-pin {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(24px, 3vw, 40px);
  height: 100vh;
  padding-block: clamp(48px, 6vw, 80px);
  overflow: hidden;
}

/* The theme copy is centred like every other head. */
.theme-copy {
  max-width: none;
  text-align: center;
}

.theme-copy h2,
.theme-copy p {
  margin-inline: auto;
}

.theme-copy .kicker { margin-bottom: 20px; }

.theme-copy p {
  max-width: 46ch;
  margin-top: 18px;
  color: var(--ink-2);
  font-size: 16px;
}

.theme-frame {
  position: relative;
  flex: 1 1 auto;
  width: min(100%, calc(var(--page) - 2 * var(--gutter)));
  min-height: 0;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: 0 60px 120px -70px rgba(0, 0, 0, 1);
}

/*
 * The wipe runs the way the heading promises: dusk by default, daybreak
 * arriving as the page is scrolled down. Clipping from the right edge inward
 * grows the lit half from the left, which is also why the Daybreak label
 * lives on the left and Dusk on the right.
 */
.theme-light-wrap {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--theme-position)) 0 0);
}

/*
 * Both skies are the same 1800x1126 screenshot of the same store, and the
 * illusion only holds while every pixel of one sits exactly over its twin.
 * `cover` with a shared origin makes the mapping identical at any frame
 * height; sizing either image by height alone squashes it against the other
 * and the seam turns into two unrelated screens.
 */
.theme-frame > img,
.theme-light-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

.theme-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--theme-position);
  width: 2px;
  background: var(--gold);
}

.theme-handle span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 34px;
  height: 34px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: rgba(20, 24, 48, 0.85);
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.theme-handle span::before,
.theme-handle span::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid var(--gold);
  border-right: 1.5px solid var(--gold);
}

.theme-handle span::before { left: 9px; transform: translateY(-50%) rotate(-135deg); }
.theme-handle span::after { right: 9px; transform: translateY(-50%) rotate(45deg); }

.theme-label {
  position: absolute;
  top: 16px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.theme-label-dark {
  right: 16px;
  border: 1px solid rgba(245, 240, 231, 0.2);
  background: rgba(13, 17, 37, 0.7);
  color: var(--ink-2);
}

.theme-label-light {
  left: 16px;
  border: 1px solid rgba(30, 34, 60, 0.16);
  background: rgba(252, 249, 243, 0.82);
  color: #2c3157;
}

/* ----------------------------------------------------------------- trust */

.trust-section {
}

.trust-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.trust-ledger > div {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--border-strong);
}

.trust-no {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.trust-ledger strong {
  color: var(--ink);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  letter-spacing: -0.026em;
}

.trust-ledger p {
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.6;
}

/* --------------------------------------------------------------- pricing */

.pricing {
}

.billing-toggle {
  position: relative;
  display: inline-flex;
  margin: -18px 0 clamp(30px, 3.6vw, 46px);
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(7, 10, 25, 0.6);
}

.billing-toggle button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 620;
  cursor: pointer;
  transition: color 240ms ease;
}

/*
 * The dark label only works once the light thumb is behind it. Until the
 * script has measured and placed the thumb — and permanently, if scripting is
 * off — the selected label stays on the page's own ink, because an unreadable
 * price toggle is worse than an unstyled one.
 */
.billing-toggle button.is-selected {
  color: var(--ink);
}

.billing-toggle.is-ready button.is-selected {
  color: #191f3a;
}

.billing-toggle button span {
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--gold-dim);
  color: var(--gold);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  transition: background 240ms ease, color 240ms ease;
}

.billing-toggle.is-ready button.is-selected span {
  background: rgba(25, 31, 58, 0.16);
  color: #4a3a1c;
}

.toggle-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  border-radius: 999px;
  background: #fffdf8;
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.9);
  transition: transform 380ms var(--ease), width 380ms var(--ease);
}

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  align-items: stretch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.8vw, 36px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: border-color 320ms ease, transform 420ms var(--ease);
}

.plan:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.plan-featured {
  border-color: rgba(10, 10, 10, 0.42);
  background: var(--card-hi);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 40px 90px -60px rgba(0, 0, 0, 1);
}

/* This was a soft gold bleed behind the featured card. Flattening it turned
   the whole panel tan, which is the right outcome for the wrong reason: the
   card does not need a halo. Its gold edge and its badge already say it. */

.plan-badge {
  position: absolute;
  top: -11px;
  left: clamp(26px, 2.8vw, 36px);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--gold);
  /* `--gold` is near-black in light mode and white in dark mode. Keeping the
     text on the opposite surface prevents the featured-plan label from
     disappearing when the theme changes. */
  color: var(--ground);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.plan-top {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border);
}

.plan-name {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink);
  font-size: clamp(36px, 3.6vw, 46px);
  font-weight: 620;
  letter-spacing: -0.045em;
  line-height: 1;
}

.plan-price small {
  color: var(--ink-4);
  font-size: 14px;
  font-weight: 550;
  letter-spacing: -0.01em;
}

.plan-featured .plan-price { color: var(--gold); }

.plan-sub {
  color: var(--ink-4);
  font-size: 12.5px;
}

.plan-for {
  margin: 22px 0 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}

.plan ul {
  flex: 1;
  margin: 22px 0 28px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.plan li {
  position: relative;
  padding-left: 26px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 14px;
  height: 8px;
  border-left: 1.6px solid var(--gold);
  border-bottom: 1.6px solid var(--gold);
  transform: rotate(-45deg) scale(0.86);
  transform-origin: 50% 50%;
}

.plan-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--border-strong);
  border-radius: 13px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 620;
  transition: border-color 220ms ease, background 220ms ease;
}

.plan-link:hover {
  border-color: rgba(10, 10, 10, 0.55);
  background: var(--gold-dim);
}

.plan-featured .pill {
  width: 100%;
}

/* ------------------------------------------------------------------- faq */

/*
 * Native <details>. No script, no ARIA to keep in sync, keyboard and
 * find-in-page work for free, and a reader with JavaScript off gets the
 * answers rather than six dead headings. The marker is drawn from scratch
 * because the platform triangle cannot be tinted or eased.
 */
.faq {
}

/* The second line is set in the heavier weight, which carries it past the
   760px the other section heads use and drops "install." onto a line of its
   own. The couplet only works read as two lines. */
/* The FAQ uses the same centred head as every other section; its list is
   the one thing that stays a single measured column. */
.faq-list {
  max-width: 900px;
  margin-inline: auto;
  border-top: 1px solid var(--border);
}


.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 22px 4px;
  cursor: pointer;
  color: var(--ink-2);
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 580;
  letter-spacing: -0.022em;
  list-style: none;
  transition: color 220ms ease;
}

/* Safari still paints its own disclosure triangle without this. */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary span {
  flex: 1;
  min-width: 0;
}

.faq-item summary:hover,
.faq-item[open] summary {
  color: var(--ink);
}

/* The marker: a plus that becomes a minus. Two bars, one of which rotates. */
.faq-item summary i {
  position: relative;
  flex: none;
  width: 15px;
  height: 15px;
}

.faq-item summary i::before,
.faq-item summary i::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--gold);
  transform: translateY(-50%);
  transition: transform 320ms var(--ease), opacity 320ms ease;
}

.faq-item summary i::after {
  transform: translateY(-50%) rotate(90deg);
}

.faq-item[open] summary i::after {
  transform: translateY(-50%) rotate(0deg);
  opacity: 0;
}

.faq-answer {
  padding: 0 64px 26px 4px;
  color: var(--ink-3);
  font-size: clamp(14.5px, 1.15vw, 16px);
  line-height: 1.68;
}

.faq-answer em {
  font-style: normal;
  color: var(--gold);
  font-weight: 560;
}

/*
 * The gold corner brackets that used to sit on every raised panel are gone.
 * One or two of them looked like considered detailing; nine of them looked
 * like a template applied to a page. The panels keep their edge and their
 * value step, which is all a panel needs.
 */

/* ----------------------------------------------------------------- bands */

/*
 * Alternating full-bleed bands, taken straight from the editorial reference.
 *
 * MyMeridian was one continuous navy corridor from the hero to the footer, and
 * that is most of why it read as dead no matter what went into it: nothing
 * about the page changed as you moved down it. Flipping every other section
 * to paper gives the scroll a pulse, and it costs nothing structurally
 * because the whole sheet is already token-driven — a band only has to
 * redeclare the tokens and everything inside it follows.
 *
 * The light is a warm off-white, not a stark one, so it reads as the other
 * side of the same brand rather than a different website.
 */

/* The section rule that divides one band from the next reads as the seam of
   the page, so it is drawn in gold at full width on both grounds. */
.ground > section + section::before {
  background: var(--line-gold-soft);
}

/* On paper the film that lifts a panel has to darken, not lighten. */
.band-light .dotfield,
.band-light .receipt,
.band-light .waterfall,
.band-light .refusal,

/* Bar fills were alpha over navy; the same alpha over paper is pastel. On a
   light band they go solid, at the darkened band values. */




/* The dashed step line between bars, and the axis, on paper. */

/* Sparkles are a night-sky device; they do not belong on paper. */

/* The cream button inverts to ink on a light band. */

/* ------------------------------------------------------------- material */

/*
 * The plate, carried through the middle of the page.
 *
 * The hero and the close were sitting on a real surface and the eight
 * sections between them were flat navy, which read as two good frames
 * bookending a different, cheaper page. This is the same image at a tenth
 * of its strength.
 *
 * `background-attachment: fixed` anchors it to the viewport rather than to
 * this 12,000px element — without it, `cover` would smear one photograph
 * down the length of the whole document. The side effect is that the
 * material holds still while the content travels over it, which is the
 * right behaviour anyway: a surface does not scroll.
 */

/*
 * A second, quieter surface, used once.
 *
 * The trust band is three short columns and the plainest block on the page,
 * and it sits between two heavy ones. It gets its own plate — sparse gold
 * contour lines under deep shadow, no medallion — so that the eye registers
 * a change of material rather than the same photograph again. Two surfaces
 * across the page is variety; one everywhere was wallpaper.
 */
.trust-section {
  position: relative;
  isolation: isolate;
}

.trust-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-position: 50% 62%;
  opacity: 0.55;
  pointer-events: none;
}

/*
 * Panels take the material too, blended into their own value rather than
 * laid on top of it. `soft-light` keeps the card's flat colour in charge and
 * lets the plate contribute only its curvature and grain, so a panel reads
 * as a piece cut from the same surface instead of a rectangle with a
 * photograph in it.
 */
/*
 * Panels only — never a run of body copy.
 *
 * .faq-list was in this group and it is not a panel: it is six stacked
 * questions and their answers, so the engraving ran straight underneath the
 * paragraphs and the whole section became unreadable. The material belongs
 * on surfaces that hold a figure or a short label, not on anything you have
 * to read a sentence of.
 */
.dotfield,
.receipt,
.waterfall,
.refusal,
.plan {
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
}

@media (max-width: 900px) {
  /*
   * iOS ignores fixed attachment and falls back to scroll, which stretches
   * one frame of the plate down the entire document. Below this width the
   * page goes back to flat colour — the material was never going to read at
   * a phone's scale anyway.
   */
  .dotfield,
  .receipt,
  .waterfall,
  .refusal,
  .plan {
    background-image: none;
  }
}

/* ------------------------------------------------------------- filigree */

/*
 * The suit's line art, properly.
 *
 * Two corner brackets was not what the reference shows. What is actually on
 * an Eternal's armour is a struck ornament: concentric rings with radial
 * ticks, arcs cradling them, rows of small marks running along a curve, and
 * fine rules carrying the whole thing out to the edge of the panel. It is
 * intricate but it is never heavy — every line is a hairline, and the gold
 * only reads because there is a lot of dark around it.
 *
 * Drawn once as a symmetrical rule and used between sections, so the page
 * gets an ornamental beat at each join instead of a blank 200px of navy.
 */
.rule-filigree {
  display: block;
  width: min(100%, calc(var(--page) - 2 * var(--gutter)));
  margin-inline: auto;
  padding-inline: var(--gutter);
  color: var(--gold);
  pointer-events: none;
}

.filigree-rule {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* One stroke weight for everything, varied only by opacity — the ornament
   reads as engraved rather than drawn at several different pressures. */
.filigree-rule [class^="fg-"] {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/*
 * Engraved and lit, without a single gradient.
 *
 * A cut line in metal is not one colour. There is a shadow where the tool
 * went in, a bright edge where the lip of the cut catches the light, and the
 * metal itself between them. Real engraving is read from those three, and
 * the whole ornament is drawn three times to get them: the same art shifted
 * 1.3px down in near-black, 1.1px up in pale gold, and once in place.
 *
 * The alternative was a stroke gradient, which is the move that made this
 * page look generated in the first place. Three flat passes cost two extra
 * <use> elements and no gradient at all.
 *
 * Each pass keeps the per-element stroke-opacity below, because `stroke` is
 * `currentColor` — setting `color` on the <use> recolours the whole group
 * while every ring, tick and glyph holds its own weight.
 */
.fg-cut  { color: #ffffff; opacity: 0.85; }
.fg-lit  { color: #0a0a0a; opacity: 0.4; }
.fg-face { color: var(--gold); }

.fg-ring    { stroke-opacity: 0.62; }
.fg-ring-2  { stroke-opacity: 0.4; }
.fg-dot     { fill: currentColor; fill-opacity: 0.75; stroke: none; }
.fg-tick    { stroke-opacity: 0.5; }
.fg-arc     { stroke-opacity: 0.42; }
.fg-glyph   { stroke-opacity: 0.34; }
.fg-line    { stroke-opacity: 0.32; }
.fg-line-2  { stroke-opacity: 0.16; }
.fg-nick    { stroke-opacity: 0.36; }

/*
 * The ornament draws itself in as it arrives — the one place on the page
 * where a scroll-triggered animation is doing something other than fading.
 * Rings and arcs unroll from their own path length; the rules run outward
 * from the medallion.
 */
.rule-filigree .fg-ring,
.rule-filigree .fg-ring-2,
.rule-filigree .fg-arc {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  transition: stroke-dashoffset 1100ms var(--ease);
}

.rule-filigree.in .fg-ring,
.rule-filigree.in .fg-ring-2,
.rule-filigree.in .fg-arc {
  stroke-dashoffset: 0;
}

.rule-filigree .fg-line,
.rule-filigree .fg-line-2 {
  transform: scaleX(0);
  transform-origin: 600px 54px;
  transition: transform 1000ms var(--ease) 120ms;
}

.rule-filigree.in .fg-line,
.rule-filigree.in .fg-line-2 { transform: scaleX(1); }

.rule-filigree .fg-tick,
.rule-filigree .fg-nick,
.rule-filigree .fg-glyph,
.rule-filigree .fg-dot {
  opacity: 0;
  transition: opacity 700ms ease 620ms;
}

.rule-filigree.in .fg-tick,
.rule-filigree.in .fg-nick,
.rule-filigree.in .fg-glyph,
.rule-filigree.in .fg-dot { opacity: 1; }

/* The reveal wrapper must not also fade it — the draw-on is the entrance. */
.rule-filigree.reveal {
  opacity: 1;
  transform: none;
  filter: none;
}

@media (max-width: 720px) {
  /* The glyph rows and outer rules are lost at this width anyway. */
  .fg-glyph, .fg-line-2, .fg-nick { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rule-filigree .fg-ring,
  .rule-filigree .fg-ring-2,
  .rule-filigree .fg-arc { stroke-dashoffset: 0; }
  .rule-filigree .fg-line,
  .rule-filigree .fg-line-2 { transform: scaleX(1); }
  .rule-filigree .fg-tick,
  .rule-filigree .fg-nick,
  .rule-filigree .fg-glyph,
  .rule-filigree .fg-dot { opacity: 1; }
}

/* ----------------------------------------------------------------- close */

/*
 * The close is the one surface on the page with real material.
 *
 * Everything above it is drawn: flat planes, hairlines, engraved SVG. That
 * is the right register for the argument, but drawing cannot do what a
 * physical surface does — sheen, curvature, gold catching a narrow highlight
 * along an engraved line. Exactly one plate, at the last frame, where there
 * is nothing to read but a headline and a button.
 *
 * It is abstract material, not a picture of anything: no product, no place,
 * no claim. A page that refuses to invent a figure can still be made of
 * something.
 */
.final-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(80px, 8vw, 120px) !important;
  background: transparent;
  border-top: 1px solid var(--border);
}

/*
 * The plate rides on .final-sky, not on ::before.
 *
 * `.ground > section + section::before` draws the hairline that separates
 * one section from the next, and at (0,1,3) it outranks `.final-cta::before`
 * at (0,1,1) — so every background property here was being overwritten and
 * the "plate" was rendering as a 1px gold rule. The sky layer already exists,
 * already spans the section, and nothing else is competing for it.
 */

/* The scrim that used to sit over the plate is gone with it — left behind it
   was flattening the whole closing band to 70% white. */

/*
 * The close gets its own surface, and it is the one the product is named
 * for: gold rays struck into navy, radiating from a point just under the
 * bottom edge. "The sun at its highest" has been sitting in the footer since
 * before I touched this page; this is the first time the page shows it.
 *
 * It also stops `plate.jpg` being used twice. Three surfaces on the page —
 * this one, the contour band at trust, the medallion inside the panels —
 * and each appears exactly once.
 */
.final-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/*
 * The sun at its highest — the thing the product is named for, arriving once
 * at the foot of the page.
 *
 * It was a blurred radial bloom. Drawn instead: one hairline circle rising
 * past the bottom edge, in the same line vocabulary as the globe in the
 * hero. The page opens on a sphere in outline and closes on one, and neither
 * of them is a glow.
 */
.final-sun {
  position: absolute;
  left: 50%;
  bottom: -52%;
  width: min(120vw, 1180px);
  aspect-ratio: 1;
  border: 1px solid rgba(10, 10, 10, 0.32);
  border-radius: 50%;
  transform: translateX(-50%);
}

/* A second, tighter ring — the disc reads as drawn rather than as a stray
   rounded box. */
.final-sun::after {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(10, 10, 10, 0.16);
  border-radius: 50%;
}

.final-sky::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 1px;
  background: var(--line-gold-soft);
}


.final-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.final-inner h2 {
  font-size: clamp(38px, 5.6vw, 76px);
}

.final-inner p {
  max-width: 44ch;
  color: var(--ink-2);
  font-size: clamp(15px, 1.2vw, 17px);
}

.final-inner .pill {
  margin-top: 12px;
}

/* ---------------------------------------------------------------- footer */

footer {
  padding-block: clamp(44px, 5vw, 64px);
  border-top: 1px solid var(--border);
  background: transparent;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px 40px;
}

.footer-brand p {
  margin-top: 12px;
  max-width: 34ch;
  color: var(--ink-4);
  font-size: 13.5px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  color: var(--ink-3);
  font-size: 13.5px;
  font-weight: 550;
}

.footer-nav a {
  transition: color 180ms ease;
}

.footer-nav a:hover {
  color: var(--gold);
}

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

/* No blur on the way in. On a dark page a 6px blur resolving to sharp reads
   as depth; on white it reads as the browser failing to paint, which is the
   single most "glitchy"-looking thing the page was doing. A short rise and a
   fade is enough. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

.trust-ledger > .reveal:nth-child(2) { transition-delay: 90ms; }
.trust-ledger > .reveal:nth-child(3) { transition-delay: 180ms; }
.refusals > .reveal:nth-child(2) { transition-delay: 90ms; }
.refusals > .reveal:nth-child(3) { transition-delay: 180ms; }
.plans > .reveal:nth-child(2) { transition-delay: 90ms; }
.plans > .reveal:nth-child(3) { transition-delay: 180ms; }

/*
 * Capture-only. `__skySettle()` sets this so a screenshot taken immediately
 * after reveal shows the revealed state rather than the first frame of a
 * 760ms transition, which reads as a blank section.
 */
.settled *,
.settled *::before,
.settled *::after {
  transition-duration: 0s !important;
  animation-duration: 0s !important;
  animation-delay: 0s !important;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .hero-chip-low { display: none; }
}

@media (max-width: 1080px) {
  .story-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .story-stage { display: none; }

  .story-steps {
    gap: clamp(56px, 9vw, 90px);
    padding-block: 0;
  }

  .story-step {
    opacity: 1;
    padding-left: 0;
  }

  .story-step::before { display: none; }

  .story-mobile-image { display: block; }

  .reckoning-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .theme-story { height: 200vh; }
}

@media (max-width: 940px) {
  .header-nav a:not(.pill) { display: none; }

  .refusals,
  .trust-ledger,
  .plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .plan-featured { order: -1; }

  .hero-copy { max-width: none; }


  .arithmetic-foot .caption { text-align: left; }

  .theme-pin {
    height: auto;
    position: static;
  }

  .theme-story {
    height: auto;
    padding-block: var(--band) !important;
  }

  .theme-light-wrap { clip-path: inset(0 0 0 50%); }
  .theme-handle { left: 50%; }
}

@media (max-width: 720px) {
  body { font-size: 15.5px; }

  .hero {
    padding-top: clamp(112px, 24vw, 150px);
  }

  .hero-chip {
    min-width: 0;
    padding: 10px 13px;
  }

  .hero-chip strong { font-size: 18px; }
  .hero-chip-left { top: -18px; left: -6px; }
  .hero-chip-right { top: auto; bottom: -18px; right: -6px; }

  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .pill,
  .hero-actions .ghost-btn { width: 100%; }

  /* The bar keeps only its dots on a phone. */
  .window-title,
  .window-meta { display: none; }


  .waterfall {
    padding-inline: 14px;
    padding-bottom: 128px;
  }

  .waterfall-grid { inset: 34px 14px 128px; }
  .waterfall-bars { --wf-gap: 5px; height: 210px; padding-right: 40px; }

  .bar-label { top: calc(100% + 14px); gap: 3px; }
  .bar-label em {
    font-size: 8.5px;
    letter-spacing: 0.06em;
    /* Six labels do not fit side by side on a phone; set them upright. */
    writing-mode: vertical-rl;
    height: 74px;
  }
  /* Six figures across a phone: at the desktop sizes "−$208.4K" and
     "−$38.7K" run into each other, and the result bar's own larger rule
     escapes the shared one, so both are set here. */
  .bar-label strong { font-size: 10px; }
  .bar-result .bar-label strong { font-size: 13px; }

  .receipt-line-result .result { font-size: 25px; }

  .refusal-demo { flex-direction: column; align-items: stretch; }
  .demo-arrow { transform: rotate(90deg); align-self: center; }

  .final-inner .pill { width: 100%; }

  /* The desktop answer sits in a 64px right gutter so it does not run under
     the marker. On a phone that gutter is a fifth of the column. */
  .faq-answer { padding-right: 6px; }
  .faq-item summary { gap: 16px; }

  .footer-inner { flex-direction: column; }
}

/* -------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .bar-fill { transform: scaleY(1); }
  .bar:not(:last-child)::after { opacity: 1; }
  .product-window { transform: none; }
  .hero-title .line-4 em::after { transform: scaleX(1); }
  .window-sheen { display: none; }
}

/* ================================================================ globe */

/*
 * The brand mark at hero scale. `globe.js` rewrites each meridian's `rx` from
 * cos(phase + longitude) as the page scrolls; everything here is the still
 * frame that must already look complete before any script runs.
 */


.globe-halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  display: none;
}

#globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The silhouette carries the most weight: it is the only line that is always
   the true edge of the sphere, whatever the rotation. */
/*
 * Gold line art on sapphire, which is what the wireframe was always reaching
 * for — the limb is the ring, the meridians are the ribs, and the prime
 * meridian is the one line drawn at full strength. Crisp strokes, no glow:
 * the paint on the suit has an edge everywhere it lands.
 */
.globe-limb {
  fill: none;
  stroke: rgba(10, 10, 10, 0.55);
  stroke-width: 0.9;
}

.globe-meridian {
  fill: none;
  stroke: rgba(10, 10, 10, 0.36);
  stroke-width: 0.55;
  vector-effect: non-scaling-stroke;
}

/*
 * The rotating prime meridian steps back to being one rib among twelve. The
 * fixed signature arc below is now the line that identifies the mark, and
 * two competing gold meridians would read as a drawing error.
 */
.globe-prime {
  stroke: rgba(10, 10, 10, 0.42);
  stroke-width: 0.7;
}

/* The logo's own line, at hero scale. Heavier than anything else in the
   wireframe, round-capped like the icon, and fixed while the globe turns.
   Struck in three passes like the filigree, so it reads as cut into the
   plate behind it rather than drawn over it. */
.globe-signature,
.globe-sig-cut,
.globe-sig-lit {
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

.globe-sig-cut {
  stroke: #ffffff;
  stroke-opacity: 0.8;
}

.globe-sig-lit {
  stroke: #0a0a0a;
  stroke-opacity: 0.32;
}

.globe-signature {
  stroke: var(--gold);
}

.globe-axis {
  stroke: rgba(10, 10, 10, 0.22);
  stroke-width: 0.55;
}

/*
 * Parallels.
 *
 * The axis is vertical and the sphere is seen from the plane of its own
 * equator, so a latitude circle is edge-on: it projects to a straight
 * horizontal chord, not an ellipse. Drawing them as ellipses would be the
 * prettier lie and would break the geometry the meridians are telling the
 * truth about. They are static — latitude does not move when the globe
 * turns — which is also why they cost nothing per frame.
 */
.globe-parallel {
  stroke: rgba(10, 10, 10, 0.24);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

.globe-equator {
  stroke: rgba(10, 10, 10, 0.3);
  stroke-width: 0.7;
}

/* The graduated bezel — the instrument the name comes from. A meridian is a
   measuring line before it is anything else. */
.globe-ring {
  fill: none;
  stroke: rgba(10, 10, 10, 0.3);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

.globe-tick {
  stroke: rgba(10, 10, 10, 0.4);
  stroke-width: 0.5;
  vector-effect: non-scaling-stroke;
}

.globe-tick-major {
  stroke: rgba(10, 10, 10, 0.55);
  stroke-width: 0.9;
}

/* The copy column used to carry a near-black radial scrim so a meridian
   never ran through a word. Against sapphire that scrim reads as a dark
   cloud behind the headline, and the column clears the globe on its own. */
.hero-copy::before {
  display: none;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

@media (max-width: 940px) {
}

/* ------------------------------------------------- monochrome corrections */

/*
 * What an inversion always breaks: anything that was light-on-dark by
 * assumption rather than by token. Each of these was invisible or inverted
 * after the flip.
 */

/* The eyebrow was cream on a translucent film; on paper it is ink on air. */
.kicker-hero {
  border-color: rgba(10, 10, 10, 0.18);
  background: transparent;
  color: var(--ink-2);
}

.kicker-hero::before {
  background: var(--ink);
  box-shadow: none;
}

/* The primary action is the only solid black object on the page, which is
   exactly the emphasis it should have. The secondary stays outlined. */
.pill {
  background: var(--ink);
  color: #ffffff;
  border: 1px solid var(--ink);
  box-shadow: none;
}

.pill:hover {
  background: #2a2a2a;
  border-color: #2a2a2a;
}

.hero-actions .pill {
  background: var(--ink);
  color: #ffffff;
  border: 1px solid var(--ink);
  box-shadow: none;
}

.hero-actions .pill:hover {
  background: #2a2a2a;
  border-color: #2a2a2a;
}

.ghost-btn {
  border: 1px solid rgba(10, 10, 10, 0.22);
  color: var(--ink);
}

.ghost-btn:hover {
  border-color: var(--ink);
  background: rgba(10, 10, 10, 0.04);
}

/* The product window chrome was dark glass. */
.product-window,
.story-window {
  border-color: rgba(10, 10, 10, 0.14);
  background: #ffffff;
  box-shadow:
    0 2px 0 rgba(10, 10, 10, 0.04),
    0 40px 70px -44px rgba(10, 10, 10, 0.4);
}

.window-bar {
  border-bottom-color: rgba(10, 10, 10, 0.1);
  background: #fafafa;
}

/* The scroll cue and its rules. */
.scroll-rule i { background: rgba(10, 10, 10, 0.14); }
.scroll-rule em { border-color: rgba(10, 10, 10, 0.28); }
.scroll-rule em::after { background: var(--ink); }

/* The header bar over a white page. */
.header.scrolled {
  background: rgba(255, 255, 255, 0.88);
  border-bottom-color: rgba(10, 10, 10, 0.1);
}

/* The mark, and the globe behind the hero, are ink line art now. */
.brand svg { color: var(--ink); }
/* Ink line art at full strength: it is the subject of the right column now,
   not a watermark behind the text. */

.globe-limb { stroke: rgba(10, 10, 10, 0.85); stroke-width: 1.4; }
.globe-meridian { stroke: rgba(10, 10, 10, 0.5); stroke-width: 0.8; }
.globe-parallel { stroke: rgba(10, 10, 10, 0.3); stroke-width: 0.7; }
.globe-equator { stroke: rgba(10, 10, 10, 0.55); stroke-width: 1; }
.globe-ring { stroke: rgba(10, 10, 10, 0.4); }
.globe-tick { stroke: rgba(10, 10, 10, 0.5); }
.globe-tick-major { stroke: rgba(10, 10, 10, 0.8); stroke-width: 1.2; }
.globe-axis { stroke: rgba(10, 10, 10, 0.3); }
.globe-signature { stroke: var(--ink); stroke-width: 3; }
.globe-sig-cut { stroke: #ffffff; stroke-opacity: 0.9; }
.globe-sig-lit { stroke: rgba(10, 10, 10, 0.3); }


@media (max-width: 940px) {
  /* One column on a phone: the mark drops under the copy at half size. */
  .hero-inner { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------------ globe */

/*
 * The mark, as the hero's right-hand column.
 *
 * It had accumulated four competing rules across three media queries from
 * earlier layouts — absolute, centred, hung off the corner, and a watermark —
 * which is why it kept escaping its column. This is the only one now.
 *
 * globe.js maps document scroll to rotation, so it turns as the page moves;
 * the small lift keeps it drifting up as the hero leaves, so the turn reads
 * as an object in space rather than a spinning graphic pinned to the page.
 */
.globe-stage {
  position: relative;
  justify-self: end;
  width: min(100%, 520px);
  aspect-ratio: 1;
  opacity: 1;
  pointer-events: none;
  transform: translate3d(0, calc(var(--hero-scroll) * -40px), 0);
}

#globe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (max-width: 940px) {
  .globe-stage {
    justify-self: center;
    width: min(72%, 340px);
    margin-top: 12px;
  }
}


/* ================================================================= themes */

/*
 * Dark mode: a straight inversion.
 *
 * Every colour on this page already resolves through a token, so the whole
 * theme is one override block — no per-component dark rules, nothing to keep
 * in sync. Ink and ground swap, the value ramp flips so that "kept" stays the
 * strongest mark on the page (white on black rather than black on white), and
 * the rules go from ink-at-low-alpha to paper-at-low-alpha.
 */
html[data-theme="dark"] {
  color-scheme: dark;

  --void: #000000;
  --ground: #0a0a0a;
  --plane: #121212;
  --surface: #0f0f0f;
  --surface-2: #161616;
  --surface-soft: rgba(245, 245, 245, 0.05);

  --ink: #f5f5f5;
  --ink-rgb: 245, 245, 245;
  --ink-2: rgba(245, 245, 245, 0.7);
  --ink-3: rgba(245, 245, 245, 0.52);
  --ink-4: rgba(245, 245, 245, 0.52);

  --gold: #ffffff;          /* kept — still the strongest mark */
  --gold-bright: #ffffff;
  --gold-dim: rgba(245, 245, 245, 0.08);
  --ember: #7a7a7a;         /* taken */
  --ember-dim: rgba(122, 122, 122, 0.16);
  --periwinkle: #4a4a4a;    /* at rest */
  --periwinkle-dim: rgba(245, 245, 245, 0.06);

  --line-gold: rgba(245, 245, 245, 0.24);
  --line-gold-soft: rgba(245, 245, 245, 0.12);

  --card: #0f0f0f;
  --card-hi: #161616;

  --border: rgba(245, 245, 245, 0.15);
  --border-strong: rgba(245, 245, 245, 0.3);
}

/* The handful of places that hard-code a value rather than a token. */
html[data-theme="dark"] .pill,
html[data-theme="dark"] .hero-actions .pill {
  background: #f5f5f5;
  color: #0a0a0a;
  border-color: #f5f5f5;
}

html[data-theme="dark"] .pill:hover,
html[data-theme="dark"] .hero-actions .pill:hover {
  background: #d8d8d8;
  border-color: #d8d8d8;
}

html[data-theme="dark"] .header.scrolled { background: rgba(10, 10, 10, 0.88); }
html[data-theme="dark"] .site-splash { background: #0a0a0a; }
html[data-theme="dark"] .grain { mix-blend-mode: screen; opacity: 0.035; }

html[data-theme="dark"] .globe-limb { stroke: rgba(245, 245, 245, 0.5); }
html[data-theme="dark"] .globe-meridian { stroke: rgba(245, 245, 245, 0.3); }
html[data-theme="dark"] .globe-parallel { stroke: rgba(245, 245, 245, 0.16); }
html[data-theme="dark"] .globe-equator { stroke: rgba(245, 245, 245, 0.3); }
html[data-theme="dark"] .globe-ring { stroke: rgba(245, 245, 245, 0.22); }
html[data-theme="dark"] .globe-tick { stroke: rgba(245, 245, 245, 0.3); }
html[data-theme="dark"] .globe-tick-major { stroke: rgba(245, 245, 245, 0.5); }
html[data-theme="dark"] .globe-axis { stroke: rgba(245, 245, 245, 0.16); }
html[data-theme="dark"] .globe-signature { stroke: #ffffff; }
html[data-theme="dark"] .globe-sig-cut { stroke: #000000; stroke-opacity: 0.9; }
html[data-theme="dark"] .globe-sig-lit { stroke: rgba(245, 245, 245, 0.18); }

html[data-theme="dark"] .demo-wrong { border-color: rgba(245, 245, 245, 0.22); }
html[data-theme="dark"] .demo-wrong i { text-decoration-color: rgba(245, 245, 245, 0.5); }

html[data-theme="dark"] .product-window,
html[data-theme="dark"] .story-window {
  border-color: rgba(245, 245, 245, 0.16);
  background: #0f0f0f;
  box-shadow: 0 40px 70px -44px rgba(0, 0, 0, 0.9);
}

html[data-theme="dark"] .window-bar {
  border-bottom-color: rgba(245, 245, 245, 0.1);
  background: #141414;
}

/* -------------------------------------------------------- the switch */

/*
 * A track, a thumb, and exactly one icon.
 *
 * The trail is the page's ink and the thumb is the page's ground, so the
 * whole control inverts for free with the theme: a black trail behind a
 * white thumb on paper, a white trail behind a black thumb at night. The
 * icon inside the thumb is the mode you are in — sun on light, moon on
 * dark — and the thumb travels right as you go darker.
 */
.theme-switch {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-right: 12px;
  border: 0;
  background: none;
  cursor: pointer;
}

.theme-switch-track {
  position: relative;
  display: block;
  width: 58px;
  height: 30px;
  border-radius: 999px;
  background: var(--ink);
  transition: background 300ms ease;
}

.theme-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ground);
  color: var(--ink);
  transition: transform 320ms var(--ease), background 300ms ease;
}

html[data-theme="dark"] .theme-switch-thumb {
  transform: translateX(28px);
}

.theme-icon {
  grid-area: 1 / 1;
  width: 15px;
  height: 15px;
  transition: opacity 200ms ease;
}

/* Only the current mode's icon is drawn. */
.theme-icon-moon { opacity: 0; }
html[data-theme="dark"] .theme-icon-sun { opacity: 0; }
html[data-theme="dark"] .theme-icon-moon { opacity: 1; }

.theme-switch:focus-visible .theme-switch-track {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-switch-thumb { transition: none; }
}

@media (max-width: 940px) {
  .theme-switch { margin-right: 8px; }
}
@media (max-width: 940px) {
  .theme-switch { margin-right: 6px; }
}

/* ------------------------------------------------------------- sign-in link
   "Log in" sits with the section links but is not one: the mobile rule above
   hides `.header-nav a:not(.pill)` to make room for the pill, which would
   leave a returning visitor on a phone with a Sign up button and no way in.
   It keeps the nav-link look and the pill's survival. */
.header-nav a.header-signin {
  padding: 9px 13px;
  border-radius: 10px;
  color: var(--ink-2);
  transition: background 180ms ease, color 180ms ease;
}

.header-nav a.header-signin:hover {
  background: var(--periwinkle-dim);
  color: var(--ink);
}

@media (max-width: 940px) {
  .header-nav a.header-signin { display: inline-flex; }
}

@media (max-width: 480px) {
  /* At the narrowest the wordmark, Log in and Sign up is already three
     things; the theme switch is the one that can go without losing a route
     into the product. */
  .header-nav .theme-switch { display: none; }
  .header-nav a.header-signin { padding: 9px 8px; }
}

/* ------------------------------------------------------ pre-launch waitlist */

/* The waitlist is a ledger plate rather than a newsletter box: it uses the
   product's meridian geometry and a single dark field so the visitor's one
   action feels like joining the product, not leaving it for a widget. */
.waitlist-section {
  position: relative;
  overflow: hidden;
  background: transparent;
  color: var(--ink);
  padding-block: clamp(74px, 8vw, 126px);
}

.waitlist-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 510px);
  align-items: center;
  gap: clamp(42px, 7vw, 130px);
}

.waitlist-copy { max-width: 620px; }
.waitlist-copy .kicker { color: var(--ink-3); }
.waitlist-copy .kicker::before { background: var(--ink); }
.waitlist-copy h2 {
  margin-top: 20px;
  color: var(--ink);
  font-size: clamp(39px, 4.9vw, 70px);
  letter-spacing: -0.055em;
  line-height: 0.98;
}
.waitlist-copy h2 strong { color: var(--ink); }
.waitlist-copy > p {
  max-width: 51ch;
  margin-top: 24px;
  color: var(--ink-2);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.65;
}

.waitlist-form {
  position: relative;
  display: grid;
  gap: 10px;
  padding: clamp(28px, 3.6vw, 42px);
  border: 1px solid var(--border);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 28px 80px -46px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.waitlist-form-mark {
  position: absolute;
  top: 25px;
  right: 25px;
  width: 44px;
  color: var(--ink-3);
}
.waitlist-form-mark svg { display: block; width: 100%; }
.waitlist-form-label {
  margin: 0 56px 15px 0;
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.19em;
  text-transform: uppercase;
}
.waitlist-form > label:not(.waitlist-consent) {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 650;
}
.waitlist-form > label:not(.waitlist-consent) span {
  color: var(--ink-3);
  font-weight: 500;
}
.waitlist-form input[type="email"],
.waitlist-form input[type="url"] {
  width: 100%;
  min-height: 50px;
  margin: 0 0 8px;
  padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.waitlist-form input[type="email"]::placeholder,
.waitlist-form input[type="url"]::placeholder { color: var(--ink-4); }
.waitlist-form input[type="email"]:focus,
.waitlist-form input[type="url"]:focus {
  border-color: var(--ink);
  background: var(--ground);
  box-shadow: 0 0 0 3px var(--gold-dim);
}
.waitlist-honeypot { display: none !important; }
.waitlist-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 7px 0 11px;
  color: var(--ink-3);
  font-size: 12px;
  line-height: 1.5;
}
.waitlist-consent input { accent-color: var(--ink); margin: 2px 0 0; }
.waitlist-submit {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-radius: 11px;
  background: var(--ink);
  color: var(--ground);
  cursor: pointer;
  font-family: inherit;
}
.waitlist-submit:hover { background: color-mix(in srgb, var(--ink) 84%, var(--ground)); }
.waitlist-note {
  margin: 3px 0 0;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.5;
}
.waitlist-note a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

.waitlist-confirmation-page { min-height: 100vh; background: var(--ground); }
.waitlist-confirmation {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 36px 20px;
  background:
    radial-gradient(ellipse 86% 132% at -16% 14%, transparent 0 65.5%, var(--contour-line) 65.66% 65.82%, transparent 65.98%),
    radial-gradient(ellipse 76% 116% at 112% 92%, transparent 0 63.5%, var(--contour-line-soft) 63.66% 63.82%, transparent 63.98%);
}
.waitlist-confirmation-brand {
  position: fixed;
  top: 28px;
  left: clamp(20px, 4vw, 56px);
  color: var(--ink);
}
.waitlist-confirmation-card {
  width: min(100%, 620px);
  padding: clamp(34px, 7vw, 68px);
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 34px 100px -54px rgba(0, 0, 0, 0.32);
  text-align: center;
}
.waitlist-confirmation-mark { width: 70px; margin: 0 auto 30px; color: var(--ink); }
.waitlist-confirmation-mark svg { display: block; width: 100%; }
.waitlist-confirmation-card .kicker { color: var(--ink-3); }
.waitlist-confirmation-card .kicker::before { background: var(--ink); }
.waitlist-confirmation-card h1 { margin: 18px 0 24px; color: var(--ink); font-size: clamp(44px, 7vw, 67px); letter-spacing: -0.06em; line-height: 0.95; }
.waitlist-confirmation-card > p { max-width: 47ch; margin: 0 auto 17px; color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.waitlist-confirmation-card > p strong { color: var(--ink); font-weight: 650; }
.waitlist-confirmation-card .waitlist-confirmation-tagline { margin: 30px auto 26px; color: var(--ink); font-weight: 650; }
.waitlist-confirmation-card .pill { background: var(--ink); color: var(--ground); }

@media (max-width: 800px) {
  .waitlist-layout { grid-template-columns: 1fr; gap: 40px; }
  .waitlist-copy { max-width: 590px; }
  .waitlist-form { max-width: 590px; width: 100%; }
}

@media (max-width: 520px) {
  .waitlist-section { padding-block: 64px; }
  .waitlist-form { padding: 27px 22px; }
  .waitlist-confirmation-brand { position: static; align-self: start; justify-self: start; }
  .waitlist-confirmation { align-content: start; gap: 64px; padding-top: 25px; }
}

/* Confirmation is a separate document, so it gets the same quiet line
   vocabulary without pretending to be a continuation of a scrolled page. */
:root {
  --contour-line: rgba(var(--ink-rgb), 0.16);
  --contour-line-soft: rgba(var(--ink-rgb), 0.09);
}

@media (max-width: 720px) {
  .contour-field .contour-minor { display: none; }
  .contour-field .contour-axis { display: none; }
  .contour-field .contour-major { opacity: 0.12; }
}