/* ==========================================================================================
   Re:Form landing site — shared stylesheet for every marketing page (index / pricing /
   about / faq / docs / blog). Inter for text, IBM Plex Mono for the small technical labels.

   TONE SYSTEM (2026-08-24): every colour on the page derives from ONE hue — --brand-hue.
   Nothing below hard-codes a colour, so changing that single number re-tones the entire
   site: surfaces, hairlines, glows, text and accents all travel together, which is what
   makes a tone change read as a considered palette rather than a recoloured button. The
   default (264) is the original Re:Form blue, matched to the old #6f9bff / #b48cff pair.
   landing/theme.js owns that number: it moves the tone on between pages and after a dwell,
   handing the live hue to the next page so a navigation sweeps instead of cutting.
   ========================================================================================== */

/* Registering the hue as a typed <number> is what lets a tone change ANIMATE: the browser can
   interpolate it, so every colour derived from it travels together instead of snapping. Engines
   without @property simply switch instantly, which is a fine fallback. */
@property --brand-hue {
  syntax: '<number>';
  inherits: true;
  initial-value: 264;
}

:root {
  /* ---- The tone. This one number drives the whole palette. ---- */
  --brand-hue: 264;                                    /* Cobalt — the default Re:Form blue */
  --brand-hue-companion: calc(var(--brand-hue) + 36);  /* the gradient's second stop */

  /* Channel triplets reused by the many alpha variants below (hairlines, glows, scrims).
     Held without an alpha so each use supplies its own: oklch(var(--tint-accent) / .12). */
  --tint-accent: 70% 0.157 var(--brand-hue);
  --tint-neutral: 72% 0.060 var(--brand-hue);
  --tint-shadow: 10% 0.012 var(--brand-hue);

  /* ---- Surfaces: near-black, carrying just enough of the tone to feel tinted ---- */
  --background-deep: oklch(7.5% 0.010 var(--brand-hue));
  --surface-card: oklch(13.5% 0.018 var(--brand-hue));
  --surface-frame: oklch(13% 0.016 var(--brand-hue));
  --surface-chrome: oklch(15% 0.022 var(--brand-hue));
  --surface-input: oklch(11% 0.016 var(--brand-hue));

  /* ---- Text: tinted at low chroma, so it sits inside the palette rather than on top ---- */
  --text-heading: oklch(100% 0 0);
  --text-body: oklch(96% 0.008 var(--brand-hue));
  --text-muted: oklch(77% 0.035 var(--brand-hue));
  --text-dim: oklch(63% 0.038 var(--brand-hue));
  --text-faint: oklch(53% 0.040 var(--brand-hue));
  --text-ghost: oklch(45% 0.045 var(--brand-hue));

  /* ---- Accents. The historical names are kept so every page keeps working; they mean
         "primary / companion / light primary / light companion", not literal colours. ---- */
  --accent-blue: oklch(70% 0.157 var(--brand-hue));
  --accent-violet: oklch(70% 0.155 var(--brand-hue-companion));
  --accent-sky: oklch(80% 0.088 var(--brand-hue));
  --accent-lavender: oklch(82% 0.093 var(--brand-hue-companion));

  --border-soft: oklch(var(--tint-neutral) / .10);
  --border-mid: oklch(var(--tint-neutral) / .16);
  --border-bright: oklch(var(--tint-accent) / .45);
  --gradient-action: linear-gradient(100deg, var(--accent-blue), var(--accent-violet));
  --gradient-text: linear-gradient(100deg, var(--accent-sky), var(--accent-lavender), var(--accent-sky));
  --font-body: Inter, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* A change of tone SWEEPS the hue rather than cutting to it — every derived colour travels
     together, which is what makes it read as the room's light changing rather than a stylesheet
     swap. Slow on purpose: this is ambience, and it should never pull the eye off the page. */
  transition: --brand-hue 2600ms cubic-bezier(0.37, 0, 0.24, 1);
}

/* theme.js sets this while applying a tone that must land instantly — the first paint of a
   session, and the moment a new page is painted in the tone the previous page ended on. */
:root[data-tone-immediate] { transition: none; }

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
}

* { box-sizing: border-box; }
html { margin: 0; padding: 0; scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  background: var(--background-deep);
  color: var(--text-body);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- Ambient background ----
   The page is near-black by design, which left everything below the hero sitting on flat void.
   This is the answer: a handful of very large, very soft washes of the CURRENT tone, drifting on
   slow mismatched cycles so they never settle into a pattern you can follow. Deliberately shapes
   you cannot name — the moment the background has an outline it stops being atmosphere and starts
   being a graphic.

   It is a FIXED layer behind the page column, and the cards, panels and header all paint on
   opaque surfaces, so the movement stays in the black background and never shows through the
   content sitting on top of it. Transform-only animation: composited on the GPU, never repainted. */
.ambientGlow {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;   /* the washes below are deliberately larger than the viewport */
  background:
    radial-gradient(1100px 720px at 18% -10%, oklch(var(--tint-accent) / .16), transparent 62%),
    radial-gradient(980px 680px at 86% -4%, oklch(70% 0.150 var(--brand-hue-companion) / .13), transparent 62%);
}
.ambientGlow::before,
.ambientGlow::after,
.ambientDotGrid::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}
.ambientGlow::before {
  width: 120vw; height: 120vw;
  left: -34vw; top: 12vh;
  background: radial-gradient(circle, oklch(var(--tint-accent) / .085), transparent 66%);
  animation: ambientWashDriftPrimary 150s ease-in-out infinite alternate;
}
.ambientGlow::after {
  width: 108vw; height: 108vw;
  right: -30vw; top: 46vh;
  background: radial-gradient(circle, oklch(70% 0.150 var(--brand-hue-companion) / .075), transparent 66%);
  animation: ambientWashDriftCompanion 205s ease-in-out infinite alternate;
}
/* A third wash, low on the page. It rides the dot-grid layer purely because that element is
   already present on every page and otherwise unused — no page markup has to change. */
.ambientDotGrid::after {
  width: 96vw; height: 96vw;
  left: 18vw; top: 62vh;
  background: radial-gradient(circle, oklch(var(--tint-accent) / .06), transparent 68%);
  animation: ambientWashDriftLow 260s ease-in-out infinite alternate;
}
@keyframes ambientWashDriftPrimary {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(9vw, -6vh, 0) scale(1.16); }
  100% { transform: translate3d(-5vw, 7vh, 0) scale(0.92); }
}
@keyframes ambientWashDriftCompanion {
  0%   { transform: translate3d(0, 0, 0) scale(1.08); }
  50%  { transform: translate3d(-10vw, 7vh, 0) scale(0.9); }
  100% { transform: translate3d(6vw, -8vh, 0) scale(1.14); }
}
@keyframes ambientWashDriftLow {
  0%   { transform: translate3d(0, 0, 0) scale(0.95); }
  50%  { transform: translate3d(-7vw, -5vh, 0) scale(1.12); }
  100% { transform: translate3d(8vw, 4vh, 0) scale(0.98); }
}
@media (prefers-reduced-motion: reduce) {
  .ambientGlow::before, .ambientGlow::after, .ambientDotGrid::after { animation: none; }
}

/* The dot grid is the fine texture over that field. It used to fade out entirely by 62% down the
   viewport, which is what left the lower half of every page looking like flat black. */
.ambientDotGrid {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-image: radial-gradient(oklch(var(--tint-neutral) / .07) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95), rgba(0, 0, 0, .35) 70%, rgba(0, 0, 0, .22));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .95), rgba(0, 0, 0, .35) 70%, rgba(0, 0, 0, .22));
}

.pageColumn {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

/* ---- header / navigation ----------------------------------------------------------------- */
.siteHeader {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(20px, 5vw, 44px);
  background: oklch(var(--tint-shadow) / .93);   /* opaque enough that the ambient waves stay behind the page, not behind the nav */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.siteHeaderLogoLink { display: inline-flex; align-items: center; text-decoration: none; flex: 0 0 auto; }
.siteHeaderLogoLink img { height: 24px; width: auto; display: block; }
.siteNav { display: flex; align-items: center; gap: 26px; }
.siteNavLink {
  font-size: 13.5px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color .15s ease;
  padding: 4px 0;
}
.siteNavLink:hover { color: var(--accent-sky); }
.siteNavLinkCurrent { color: var(--text-heading); position: relative; }
.siteNavLinkCurrent::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-action);
}

/* gradient call-to-action buttons (primary) + quiet outline buttons (secondary) */
.actionButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--gradient-action);
  color: var(--background-deep);
  text-decoration: none;
  border: 0;
  cursor: pointer;
  border-radius: 12px;
  padding: 15px 30px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 30px oklch(var(--tint-accent) / .32);
  transition: transform .16s cubic-bezier(.2, 0, 0, 1), box-shadow .16s ease, filter .16s ease;
}
.actionButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(140, 120, 255, .45);
  filter: brightness(1.06);
}
.actionButton:active { transform: translateY(0); }
.actionButtonCompact { border-radius: 10px; padding: 10px 18px; font-size: 13.5px; box-shadow: 0 6px 20px oklch(var(--tint-accent) / .28); }
.actionButtonQuiet {
  background: transparent;
  color: var(--text-body);
  border: 1px solid var(--border-mid);
  box-shadow: none;
}
.actionButtonQuiet:hover {
  box-shadow: none;
  border-color: var(--border-bright);
  background: oklch(var(--tint-neutral) / .06);
  filter: none;
}

/* mobile navigation: the page links collapse into a dropdown behind a hamburger button */
.navMenuToggle { display: none; background: none; border: 1px solid var(--border-mid); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.navMenuToggle span { display: block; width: 16px; height: 2px; border-radius: 2px; background: var(--text-muted); margin: 3px 0; }
@media (max-width: 780px) {
  .siteNav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 20px 16px;
    background: oklch(var(--tint-shadow) / .97);
    border-bottom: 1px solid var(--border-soft);
  }
  .siteHeader.navOpen .siteNav { display: flex; }
  .siteNavLink { padding: 12px 4px; font-size: 15px; border-bottom: 1px solid var(--border-soft); }
  .siteNavLinkCurrent::after { display: none; }
  .siteNav .actionButtonCompact { margin-top: 14px; justify-content: center; }
  .navMenuToggle { display: block; }
}

/* ---- shared section furniture ------------------------------------------------------------ */
.sectionShell { padding: clamp(40px, 8vh, 96px) 28px; }
.sectionInner { width: 100%; max-width: 1120px; margin: 0 auto; }
.sectionLabel {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-sky);
}
.sectionTitle {
  font-weight: 700;
  font-size: clamp(26px, 3.6vw, 42px);
  letter-spacing: -0.025em;
  color: var(--text-heading);
  margin: 10px auto 0;
  text-wrap: balance;
}
.sectionIntro {
  font-size: clamp(15px, 1.5vw, 17px);
  color: var(--text-dim);
  line-height: 1.65;
  margin: 14px auto 0;
  max-width: 58ch;
  text-wrap: pretty;
}
.centeredText { text-align: center; }

/* ---- hero ---------------------------------------------------------------------------------- */
.heroSection { position: relative; text-align: center; padding: clamp(64px, 11vh, 124px) 28px clamp(36px, 6vh, 64px); }
.heroDriftGlow {
  position: absolute;
  z-index: -1;
  top: -8%;
  left: 50%;
  width: min(820px, 94vw);
  height: min(680px, 80vw);
  transform: translateX(-50%);
  filter: blur(20px);
  background:
    radial-gradient(circle at 40% 45%, oklch(var(--tint-accent) / .22), transparent 58%),
    radial-gradient(circle at 62% 52%, rgba(180, 140, 255, .18), transparent 58%);
  animation: rf-drift 18s ease-in-out infinite;
}
.heroTitle {
  font-weight: 800;
  font-size: clamp(38px, 6.4vw, 70px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  max-width: 16ch;
  margin: 24px auto 0;
  color: var(--text-heading);
  text-wrap: balance;
  animation: rf-rise .7s cubic-bezier(.2, 0, 0, 1) both;
  animation-delay: .08s;
}
.heroTitleShimmer {
  background: var(--gradient-text) 0 0 / 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: rf-shimmer 7s ease-in-out infinite;
}
.heroSubtitle {
  font-size: clamp(16px, 1.7vw, 19px);
  color: var(--text-muted);
  max-width: 52ch;
  margin: 20px auto 0;
  line-height: 1.6;
  text-wrap: pretty;
  animation: rf-rise .7s cubic-bezier(.2, 0, 0, 1) both;
  animation-delay: .16s;
}
.heroActions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 32px;
  animation: rf-rise .7s cubic-bezier(.2, 0, 0, 1) both;
  animation-delay: .24s;
}
.heroFinePrint {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 20px;
  animation: rf-rise .7s cubic-bezier(.2, 0, 0, 1) both;
  animation-delay: .3s;
}

/* compact hero for the inner pages (pricing / about / faq) */
.pageHero { text-align: center; padding: clamp(48px, 8vh, 88px) 28px 8px; }
.pageHeroTitle {
  font-weight: 800;
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text-heading);
  margin: 14px auto 0;
  max-width: 22ch;
  text-wrap: balance;
}

/* ---- demo frame (browser-chrome mockup around a real capture) ----------------------------- */
.demoFrame {
  max-width: 1000px;
  margin: 26px auto 0;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-mid);
  background: var(--surface-frame);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .5), 0 0 80px oklch(var(--tint-accent) / .12);
  transition: transform .4s cubic-bezier(.2, 0, 0, 1), box-shadow .4s ease, border-color .4s ease;
}
.demoFrame:hover {
  transform: translateY(-4px);
  border-color: oklch(var(--tint-accent) / .50);
  box-shadow: 0 50px 110px rgba(0, 0, 0, .55), 0 0 100px rgba(140, 120, 255, .22);
}
.demoFrameChrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--surface-chrome);
  border-bottom: 1px solid var(--border-soft);
}
.demoFrameChromeDots { display: flex; gap: 7px; flex: 0 0 auto; }
.demoFrameChromeDots span { width: 11px; height: 11px; border-radius: 50%; background: oklch(var(--tint-neutral) / .28); }
.demoFrameChromeDots span:nth-child(2) { background: oklch(var(--tint-neutral) / .20); }
.demoFrameChromeDots span:nth-child(3) { background: oklch(var(--tint-neutral) / .14); }
.demoFrameChromeAddress {
  flex: 1;
  max-width: 340px;
  margin: 0 auto;
  background: var(--surface-input);
  border: 1px solid oklch(var(--tint-neutral) / .12);
  border-radius: 8px;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
}
.demoFrameChromeAddress span { color: var(--text-ghost); }
.demoFrameChromeLines { flex: 0 0 auto; display: flex; gap: 5px; opacity: .35; }
.demoFrameChromeLines span { width: 14px; height: 2px; background: var(--text-dim); border-radius: 2px; display: block; }
.demoFrame img { display: block; width: 100%; height: auto; }

/* ---- cards: pillars, features, gallery ----------------------------------------------------- */
.pillarGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
.featureGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 900px) { .featureGrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pillarGrid, .featureGrid { grid-template-columns: 1fr; } }

.infoCard {
  /* The sheen sits on an OPAQUE base: without it the fixed ambient waves behind the page
     showed through every card, which put moving background inside the content. */
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)), var(--surface-card);
  border: 1px solid oklch(var(--tint-neutral) / .12);
  border-radius: 16px;
  padding: 28px 24px;
  transition: transform .25s cubic-bezier(.2, 0, 0, 1), border-color .25s ease, box-shadow .25s ease;
}
.infoCard:hover {
  transform: translateY(-4px);
  border-color: var(--border-bright);
  box-shadow: 0 24px 50px rgba(0, 0, 0, .35);
}
.infoCardGlyph {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(var(--tint-accent) / .10);
  border: 1px solid oklch(var(--tint-accent) / .22);
  color: var(--accent-sky);
  font-family: var(--font-mono);
  font-size: 15px;
}
.infoCardTitle { font-weight: 700; font-size: 18px; color: var(--text-heading); margin-top: 14px; letter-spacing: -0.01em; }
.infoCardText { font-size: 14.5px; color: var(--text-dim); line-height: 1.6; margin-top: 8px; }

/* gallery: one real capture + dashed placeholder tiles awaiting future renders */
.galleryGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; }
@media (max-width: 780px) { .galleryGrid { grid-template-columns: 1fr; } }
.galleryTile {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid oklch(var(--tint-neutral) / .12);
  background: var(--surface-frame);
  aspect-ratio: 16 / 10;
}
.galleryTile img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* A tile holding a real image is clickable — it opens the full-size viewer below. */
.galleryTile img { cursor: zoom-in; transition: transform .35s cubic-bezier(.2, .7, .3, 1); }
.galleryTile:hover img { transform: scale(1.03); }

/* ---- gallery lightbox ----------------------------------------------------------------------- */
.galleryLightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: clamp(16px, 4vw, 48px);
  background: oklch(8% 0.012 var(--brand-hue) / .88);
  backdrop-filter: blur(6px);
}
.galleryLightbox[hidden] { display: none; }
.galleryLightboxFigure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
}
.galleryLightboxImage {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 150px);
  width: auto;
  height: auto;
  border-radius: 14px;
  border: 1px solid oklch(var(--tint-neutral) / .16);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.galleryLightboxCaption {
  font-size: 14px;
  color: var(--text-faint);
  text-align: center;
  max-width: 70ch;
}
.galleryLightboxClose,
.galleryLightboxArrow {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8ecff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid oklch(var(--tint-neutral) / .20);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.galleryLightboxClose:hover,
.galleryLightboxArrow:hover { background: rgba(255, 255, 255, .14); border-color: oklch(var(--tint-neutral) / .40); }
.galleryLightboxClose:focus-visible,
.galleryLightboxArrow:focus-visible { outline: 2px solid var(--accent-blue); outline-offset: 3px; }
.galleryLightboxArrow { width: 52px; height: 52px; font-size: 30px; padding-bottom: 4px; }
.galleryLightboxArrow:hover { transform: scale(1.06); }
.galleryLightboxClose { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; font-size: 26px; padding-bottom: 3px; }
/* One image in the gallery: the arrows have nowhere to go, so they are removed rather than dimmed. */
.galleryLightbox.galleryLightboxSingleImage .galleryLightboxArrow { display: none; }
@media (max-width: 780px) {
  .galleryLightboxArrow { width: 42px; height: 42px; font-size: 24px; }
  .galleryLightboxImage { max-height: calc(100vh - 190px); }
}

/* ---- pricing -------------------------------------------------------------------------------- */
.pricingGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; align-items: stretch; }
@media (max-width: 900px) { .pricingGrid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; } }
.pricingCard {
  display: flex;
  flex-direction: column;
  /* The sheen sits on an OPAQUE base: without it the fixed ambient waves behind the page
     showed through every card, which put moving background inside the content. */
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)), var(--surface-card);
  border: 1px solid oklch(var(--tint-neutral) / .12);
  border-radius: 18px;
  padding: 30px 26px;
  text-align: left;
}
.pricingCardHighlighted {
  border-color: oklch(var(--tint-accent) / .50);
  background:
    radial-gradient(420px 220px at 50% -20%, oklch(var(--tint-accent) / .12), transparent 70%),
    var(--surface-card);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .42), 0 0 60px oklch(var(--tint-accent) / .10);
}
.pricingCardName { font-weight: 700; font-size: 17px; color: var(--text-heading); letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; }
.mostPopularPill {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--background-deep);
  background: var(--gradient-action);
  border-radius: 999px;
  padding: 4px 10px;
}
.pricingCardPrice { font-weight: 800; font-size: 34px; color: var(--text-heading); letter-spacing: -0.03em; margin-top: 10px; }
.pricingCardPriceSuffix { font-weight: 500; font-size: 13px; color: var(--text-dim); letter-spacing: 0; }
.pricingCardDescription { font-size: 13.5px; color: var(--text-dim); line-height: 1.6; margin-top: 8px; }
.pricingCardFeatureList { list-style: none; margin: 18px 0 0; padding: 0; flex: 1; }
.pricingCardFeatureList li {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 7px 0 7px 26px;
  position: relative;
  border-top: 1px solid oklch(var(--tint-neutral) / .07);
}
.pricingCardFeatureList li::before {
  content: '✓';
  position: absolute;
  left: 2px;
  color: var(--accent-sky);
  font-family: var(--font-mono);
  font-size: 12px;
}
.pricingCard .actionButton { margin-top: 22px; width: 100%; }

.billingIntervalToggle {
  display: inline-flex;
  gap: 4px;
  background: var(--surface-input);
  border: 1px solid var(--border-mid);
  border-radius: 12px;
  padding: 4px;
  margin-top: 24px;
}
.billingIntervalButton {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  border-radius: 9px;
  padding: 9px 18px;
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.billingIntervalButton:hover { color: var(--text-body); }
.billingIntervalButtonActive { background: var(--gradient-action); color: var(--background-deep); }
.billingIntervalNote { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); margin-top: 10px; }

/* the plan comparison table */
.comparisonTableWrap { overflow-x: auto; margin-top: 44px; border: 1px solid var(--border-mid); border-radius: 16px; background: var(--surface-frame); }
.comparisonTable { width: 100%; border-collapse: collapse; min-width: 560px; }
.comparisonTable th, .comparisonTable td { padding: 14px 20px; text-align: left; font-size: 13.5px; border-top: 1px solid oklch(var(--tint-neutral) / .08); }
.comparisonTable thead th { border-top: 0; font-weight: 700; color: var(--text-heading); font-size: 14px; background: var(--surface-chrome); }
.comparisonTable td:first-child { color: var(--text-muted); }
.comparisonTable td { color: var(--text-dim); }
.comparisonTable .comparisonYes { color: var(--accent-sky); font-family: var(--font-mono); }
.comparisonTable .comparisonNo { color: var(--text-ghost); font-family: var(--font-mono); }

/* ---- FAQ ------------------------------------------------------------------------------------ */
.faqList { max-width: 760px; margin: 40px auto 0; display: flex; flex-direction: column; gap: 12px; }

/* Home-page FAQ teaser: the questions only, each a link to the page that answers them. The
   answers live in exactly one place (faq.html) so a plan fact can never be right on one page and
   stale on the other. */
.faqTeaserList { max-width: 760px; margin: 36px auto 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.faqTeaserLink {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 20px; border-radius: 14px; text-decoration: none;
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  color: var(--text-body); font-size: 15.5px; font-weight: 500;
  transition: border-color 160ms ease, transform 160ms ease, color 160ms ease;
}
.faqTeaserLink::after { content: '→'; margin-left: auto; color: var(--text-faint); font-family: var(--font-mono); }
.faqTeaserLink:hover { border-color: var(--accent-blue); color: var(--text-heading); transform: translateY(-1px); }
.faqTeaserLink:hover::after { color: var(--accent-sky); }
.faqTeaserLink:focus-visible { outline: 2px solid var(--accent-sky); outline-offset: 3px; }
.faqItem {
  border: 1px solid oklch(var(--tint-neutral) / .12);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(255, 255, 255, 0)), var(--surface-card);
  transition: border-color .2s ease;
}
.faqItem[open] { border-color: oklch(var(--tint-accent) / .35); }
.faqItem summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-heading);
}
.faqItem summary::-webkit-details-marker { display: none; }
.faqItem summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--accent-sky);
  transition: transform .2s ease;
  flex: 0 0 auto;
}
.faqItem[open] summary::after { transform: rotate(45deg); }
.faqItemAnswer { padding: 0 22px 20px; font-size: 14px; color: var(--text-dim); line-height: 1.65; }
.faqItemAnswer a { color: var(--accent-sky); }

/* ---- docs hub (docs.html) ---------------------------------------------------------------------
   A documentation index: a grid of category cards, each listing the guides that will live under
   it. Everything is a PLACEHOLDER for now — the guide rows are plain (non-linking) until the real
   pages exist. To turn a row live, wrap its contents in an <a class="docsArticleRowLink" href="…">
   and drop the "Coming soon" chip from that category's header. The Controls reference lower down is
   the one fully-written section, kept as a worked example of a finished docs page. */
.docsIntroNote {
  max-width: 760px;
  margin: 30px auto 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background:
    radial-gradient(420px 160px at 0% 0%, oklch(var(--tint-accent) / .08), transparent 70%),
    var(--surface-frame);
  border: 1px solid var(--border-mid);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
}
.docsIntroNote strong { color: var(--text-body); font-weight: 600; }
.docsIntroNoteGlyph {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  color: var(--accent-sky);
  font-size: 15px;
  line-height: 1.5;
}

.docsIndexGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 26px; }
@media (max-width: 780px) { .docsIndexGrid { grid-template-columns: 1fr; } }

.docsCategory {
  display: flex;
  flex-direction: column;
  /* The sheen sits on an OPAQUE base: without it the fixed ambient waves behind the page
     showed through every card, which put moving background inside the content. */
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0)), var(--surface-card);
  border: 1px solid oklch(var(--tint-neutral) / .12);
  border-radius: 16px;
  padding: 24px 24px 12px;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.docsCategory:hover { border-color: var(--border-bright); box-shadow: 0 24px 50px rgba(0, 0, 0, .30); }
.docsCategoryHead { display: flex; align-items: center; gap: 12px; }
.docsCategoryGlyph {
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(var(--tint-accent) / .10);
  border: 1px solid oklch(var(--tint-accent) / .22);
  color: var(--accent-sky);
  font-family: var(--font-mono);
  font-size: 15px;
}
.docsCategoryTitle { font-weight: 700; font-size: 17px; color: var(--text-heading); letter-spacing: -0.01em; }
.docsComingSoonChip {
  margin-left: auto;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border-mid);
  border-radius: 999px;
  padding: 4px 9px;
}
.docsCategoryDesc { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin: 12px 0 4px; }

.docsArticleList { list-style: none; margin: 6px 0 0; padding: 0; }
.docsArticleRow { padding: 11px 2px; border-top: 1px solid oklch(var(--tint-neutral) / .08); }
.docsArticleRowTitle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-body);
}
.docsArticleRowTitle::after { content: '→'; margin-left: auto; color: var(--text-ghost); font-family: var(--font-mono); font-size: 13px; }
.docsArticleRowMeta { font-size: 12.5px; color: var(--text-faint); line-height: 1.5; margin-top: 3px; }
/* When a row becomes a real page, wrap its inner markup in this link — it lights up on hover. */
.docsArticleRowLink { text-decoration: none; display: block; margin: -11px -2px; padding: 11px 2px; border-radius: 8px; }
.docsArticleRowLink:hover { background: oklch(var(--tint-neutral) / .06); }
.docsArticleRowLink:hover .docsArticleRowTitle { color: var(--accent-sky); }
.docsArticleRowLink:hover .docsArticleRowTitle::after { color: var(--accent-sky); }

/* ---- get-started card + footer --------------------------------------------------------------- */
.getStartedCard {
  max-width: 560px;
  margin: 0 auto;
  text-align: center;
  background:
    radial-gradient(560px 240px at 50% -20%, oklch(var(--tint-accent) / .12), transparent 70%),
    var(--surface-card);
  border: 1px solid var(--border-mid);
  border-radius: 20px;
  padding: clamp(32px, 5vw, 48px) 36px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .42);
}
.getStartedCard h2 { font-weight: 700; font-size: clamp(24px, 3.2vw, 36px); letter-spacing: -0.025em; color: var(--text-heading); margin: 12px 0 0; }
.getStartedCard p { font-size: 15px; color: var(--text-dim); margin: 10px auto 0; max-width: 38ch; line-height: 1.6; }
.getStartedCard .actionButton { display: flex; width: 100%; margin-top: 24px; padding: 16px; }

/* ---- contact form (contact.html) -------------------------------------------------------------- */
.contactForm .contactFieldLabel {
  display: block;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin: 18px 0 6px;
}
.contactFieldOptional { text-transform: none; letter-spacing: 0; color: var(--text-ghost); }
.contactField {
  width: 100%;
  background: var(--surface-input);
  border: 1px solid var(--border-mid);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: 14.5px;
  transition: border-color .15s ease;
}
.contactField:focus { outline: none; border-color: var(--border-bright); }
.contactField::placeholder { color: var(--text-ghost); }
.contactMessageArea { resize: vertical; min-height: 120px; }
/* honeypot: parked far off-screen, skipped by tab order — humans never interact with it */
.contactHoneypotField { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contactForm .actionButton { width: 100%; margin-top: 22px; }
.contactForm .actionButton:disabled { opacity: .55; cursor: default; transform: none; filter: none; box-shadow: none; }
.contactFormStatus { font-size: 13.5px; margin: 14px 0 0; color: var(--text-dim); min-height: 1.2em; }
.contactFormStatus a { color: var(--accent-sky); }
.contactFormStatusError { color: #ff9c9c; }

.siteFooter {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 34px clamp(20px, 5vw, 44px) 26px;
  background: oklch(var(--tint-shadow) / .60);
  border-top: 1px solid var(--border-soft);
}
.siteFooterColumns {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 26px;
}
.siteFooterBrand img { height: 20px; width: auto; display: block; opacity: .85; }
.siteFooterBrand p { font-size: 13px; color: var(--text-faint); margin: 12px 0 0; max-width: 34ch; line-height: 1.6; }
.siteFooterLinkColumn { display: flex; flex-direction: column; gap: 9px; min-width: 130px; }
.siteFooterLinkColumnTitle {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-ghost);
  margin-bottom: 4px;
}
.siteFooterLinkColumn a { font-size: 13.5px; color: var(--text-dim); text-decoration: none; transition: color .15s ease; }
.siteFooterLinkColumn a:hover { color: var(--accent-sky); }
.siteFooterBaseline {
  max-width: 1120px;
  margin: 26px auto 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-ghost);
  padding-top: 12px;
  border-top: 1px solid oklch(var(--tint-neutral) / .08);
}

/* ---- motion --------------------------------------------------------------------------------- */
@keyframes rf-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes rf-drift {
  0%, 100% { transform: translate(-52%, -2%) scale(1); opacity: .85; }
  50% { transform: translate(-48%, 4%) scale(1.08); opacity: 1; }
}
@keyframes rf-shimmer { 0% { background-position: 0% 0; } 50% { background-position: 100% 0; } 100% { background-position: 0% 0; } }

[data-reveal-ready] .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2, 0, 0, 1), transform .8s cubic-bezier(.2, 0, 0, 1);
}
[data-reveal-ready] .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .heroTitle, .heroSubtitle, .heroActions, .heroFinePrint, .heroDriftGlow, .heroTitleShimmer { animation: none !important; }
  [data-reveal-ready] .reveal { opacity: 1; transform: none; transition: none; }
}