/* ============================================================================
   In Flux Studio — marketing site
   Extends colors_and_type.css with marketing-scale type, section rhythm,
   and the components the public site needs (hero, stat bar, feature grid,
   pricing, etc). Every primitive stays consistent with the product:
   - Two-tone surfaces (--ground / --section)
   - 0.1rem borders on --graphic
   - Inverting hover (figure bg, ground text)
   - Courier Prime for labels / numbers / technical strings
   - Noto Sans Light (300) for display, Semibold (600) for short labels
   ============================================================================ */

/* ---- Palette as type ----------------------------------------------------
   --c1…--c5 in colors_and_type.css are defined as BACKGROUND colors: light in
   the light theme, dark in the dark theme. As text on --ground / --section
   they lack contrast, so type and thin lines use the opposite theme's
   lightness. Use --cN for fills, --cN-type for text and hairline borders. */
:root {
  --palette-l-type: 0.4;
  --c1-type: oklch(var(--palette-l-type) var(--palette-c) var(--h1));
  --c2-type: oklch(var(--palette-l-type) var(--palette-c) var(--h2));
  --c3-type: oklch(var(--palette-l-type) var(--palette-c) var(--h3));
  --c4-type: oklch(var(--palette-l-type) var(--palette-c) var(--h4));
  --c5-type: oklch(var(--palette-l-type) var(--palette-c) var(--h5));
}
.theme-dark {
  --palette-l-type: 0.84;
  --c1-type: oklch(var(--palette-l-type) var(--palette-c) var(--h1));
  --c2-type: oklch(var(--palette-l-type) var(--palette-c) var(--h2));
  --c3-type: oklch(var(--palette-l-type) var(--palette-c) var(--h3));
  --c4-type: oklch(var(--palette-l-type) var(--palette-c) var(--h4));
  --c5-type: oklch(var(--palette-l-type) var(--palette-c) var(--h5));
}

html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ground);
  color: var(--figure);
  padding: 0;
  /* Marketing body text reads at 1.0625rem for breathing room */
  font-size: 1.0625rem;
  line-height: 1.55;
}

/* ---- Outer rail --------------------------------------------------------- */
.wrap {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 2rem;
  box-sizing: border-box;
}
@media (max-width: 720px) { .wrap { padding: 0 1.25rem; } }

/* Section rhythm — alternate ground/section by default */
.section {
  padding: 6rem 0;
  position: relative;
  border-top: var(--border-thin) solid var(--graphic);
}
.section--tight { padding: 4rem 0; }
.section--section { background: var(--section); }
.section--ground { background: var(--ground); }

/* ---- Marketing type scale ----------------------------------------------- */
/* Display headline — used in hero. Noto Sans Light, ultra-large. */
.h0 {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  font-size: clamp(2.75rem, 6.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--figure);
  text-wrap: balance;
}
/* Section headline — light weight, big but not hero-sized */
.h1-mkt {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--figure);
  text-wrap: balance;
  max-width: 26ch;
}
/* Card / sub headline */
.h2-mkt {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--figure);
  text-wrap: balance;
}
/* Lead body — sits below big headlines */
.lead {
  font-size: 1.25rem;
  line-height: 1.45;
  font-weight: var(--font-weight-regular);
  color: var(--figure);
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}
/* Body copy */
.body {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--figure);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.body--subtle { color: var(--figure-subtle); }

/* Eyebrow — mono section label */
.eyebrow {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--figure-subtle);
  margin: 0 0 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow .num {
  color: var(--figure);
  font-weight: var(--font-weight-bold);
}

/* Inline mono callout (e.g. "Color = Black") */
.mono { font-family: var(--font-family-mono); }
.code-inline {
  font-family: var(--font-family-mono);
  font-size: 0.95em;
  background: var(--section);
  padding: 0.05rem 0.35rem;
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--graphic);
}

/* ---- Pulsing beta dot (the product's "throb" rhythm: 1597ms) ------------ */
.pulse-dot {
  display: inline-block;
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: var(--c2);
  position: relative;
}
.pulse-dot::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--c2);
  animation: ifsThrob 1597ms ease-in-out infinite;
}
@keyframes ifsThrob {
  0%, 100% { transform: scale(1);   opacity: 0.6; }
  50%      { transform: scale(2.4); opacity: 0;   }
}

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  font: inherit; font-size: 1rem;
  padding: 0.65rem 1.1rem;
  min-height: var(--tap-target);
  border: var(--border-thin) solid var(--graphic);
  background: var(--ground); color: var(--figure);
  border-radius: var(--radius-md);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease-out, color 0.15s ease-out, border-color 0.15s ease-out;
}
.btn:hover { background: var(--figure); color: var(--ground); border-color: var(--figure); }
.btn--primary { background: var(--figure); color: var(--ground); border-color: var(--figure); }
.btn--primary:hover { background: var(--c2); color: var(--figure); border-color: var(--c2); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: transparent; color: var(--c1-type); border-color: transparent; text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-color: var(--c1-type); text-decoration-thickness: 0.1rem;}
.btn--large { padding: 0.95rem 1.4rem; font-size: 1.05rem; }

/* Text-style link with hairline */
.link-inline {
  text-decoration: underline solid var(--graphic) 0.1rem;
  text-underline-offset: 0.35rem;
  color: var(--figure);
}
.link-inline:hover { color: var(--c1-type); }

/* ---- Navigation --------------------------------------------------------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(0.4rem);
  border-bottom: var(--border-thin) solid var(--graphic);
}
.nav__inner {
  display: flex; align-items: center; gap: 2rem;
  height: 4rem;
  padding: 0 2rem;
  max-width: 78rem; margin: 0 auto;
  box-sizing: border-box;
}
.nav .btn {
  min-height: 2.5rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.95rem;
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  text-decoration: none; color: var(--figure);
  font-weight: var(--font-weight-semibold); font-size: 1rem;
}
.nav__brand svg { width: 1.5rem; height: 1.5rem; display: block; }
.nav__links {
  display: flex; align-items: center; gap: 0.25rem;
  margin-left: 1.5rem;
}
.nav__links a {
  text-decoration: none;
  color: var(--figure);
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
}
.nav__links a:hover { color: var(--c1-type); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.nav__theme {
  width: 2.5rem; height: 2.5rem;
  box-sizing: border-box;
  border: var(--border-thin) solid var(--graphic);
  background: var(--ground); color: var(--figure);
  border-radius: var(--radius-md); cursor: pointer;
  display: grid; place-items: center; font-size: 1rem;
  padding: 0;
}
.nav__theme:hover { background: var(--figure); color: var(--ground); }
@media (max-width: 880px) { .nav__links { display: none; } }
@media (max-width: 720px) { .nav__inner { padding: 0 1.25rem; gap: 1rem; } }

/* ---- Hero --------------------------------------------------------------- */
.hero {
  padding: 5rem 0 4rem;
  border-top: none;
}
.hero__inner {
  display: grid; gap: 2.5rem;
}
.hero__head { display: flex; flex-direction: column; gap: 1.5rem; max-width: 50rem; }
.hero__sub { font-size: 1.25rem; line-height: 1.5; max-width: 38ch; color: var(--figure); margin: 0; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 0.5rem; }

/* Stats proof bar */
.stats {
  margin-top: 3.5rem;
  border-top: var(--border-thin) solid var(--graphic);
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.stat {
  display: flex; flex-direction: column; gap: 0.4rem;
  padding-right: 1.5rem;
}
.stat + .stat { border-left: var(--border-thin) solid var(--graphic); padding-left: 2rem; }
.stat__num {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  line-height: 1;
  letter-spacing: -0.015em;
}
.stat__label {
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--figure-subtle);
  text-transform: uppercase;
  text-wrap: balance;
  max-width: 22ch;
}
@media (max-width: 880px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .stat + .stat { border-left: 0; padding-left: 0; }
  .stat:nth-child(odd) { border-right: 0; }
}

/* Decorative hero strip: the 45° pattern used as a thin signature strip */
.hero__strip {
  height: 0.5rem;
  margin-top: 4rem;
  background: repeating-linear-gradient(
    45deg,
    var(--c2) 0 0.5rem,
    var(--section) 0.5rem 1rem
  );
  border-radius: var(--radius-xs);
}

/* ---- Two-column section layout ------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 4rem;
  align-items: start;
}
.split--reversed { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 900px) {
  .split, .split--reversed { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Section head, used in the left column of .split */
.shead { display: flex; flex-direction: column; gap: 1.5rem; }
.shead .body { max-width: 38ch; }

/* ---- Numbered pain points list ----------------------------------------- */
.pain-list { display: flex; flex-direction: column; gap: 0; }
.pain {
  display: grid; grid-template-columns: 4rem 1fr;
  gap: 1.5rem;
  padding: 1.75rem 0;
  border-top: var(--border-thin) solid var(--graphic);
  align-items: start;
}
.pain:last-child { border-bottom: var(--border-thin) solid var(--graphic); }
.pain__num {
  font-family: var(--font-family-mono);
  font-size: 1rem;
  color: var(--figure-subtle);
  padding-top: 0.25rem;
}
.pain__title {
  font-size: 1.25rem;
  font-weight: var(--font-weight-light);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.pain__body {
  font-size: 1rem;
  color: var(--figure-subtle);
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
}
@media (max-width: 600px) {
  .pain { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* ---- Step grid (How it works) ------------------------------------------ */
.step-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 3rem;
  border-top: var(--border-thin) solid var(--graphic);
  border-left: var(--border-thin) solid var(--graphic);
}
.step {
  padding: 1.75rem 1.5rem;
  border-right: var(--border-thin) solid var(--graphic);
  border-bottom: var(--border-thin) solid var(--graphic);
  background: var(--ground);
  display: flex; flex-direction: column; gap: 0.75rem;
  min-height: 11rem;
}
.step__num {
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c2-type);
  font-weight: var(--font-weight-bold);
}
.step__title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  font-size: 1.0625rem;
  margin: 0;
  letter-spacing: -0.005em;
}
.step__body { font-size: 0.95rem; line-height: 1.55; color: var(--figure-subtle); margin: 0; }
@media (max-width: 900px) { .step-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .step-grid { grid-template-columns: 1fr; } }

/* ---- Use-case callout --------------------------------------------------- */
.usecase {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 4rem;
  align-items: stretch;
}
@media (max-width: 900px) { .usecase { grid-template-columns: 1fr; gap: 2.5rem; } }
.usecase__head {
  display: flex; flex-direction: column; gap: 1.5rem;
  justify-content: center;
}
.usecase__big {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
.usecase__big em { font-style: normal; color: var(--c2-type); font-weight: var(--font-weight-light); }

/* Variation table */
.var-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--ground);
  border: var(--border-thin) solid var(--graphic);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.95rem;
}
.var-table th, .var-table td {
  padding: 1rem 1.25rem;
  text-align: left;
  border-bottom: var(--border-thin) solid var(--graphic);
}
.var-table th {
  font-family: var(--font-family-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--figure-subtle);
  font-weight: var(--font-weight-bold);
  background: var(--section);
}
.var-table td.count {
  font-family: var(--font-family-mono);
  text-align: right;
  color: var(--figure);
  font-size: 1rem;
}
.var-table td.opts { color: var(--figure-subtle); }
.var-table tr.final td {
  border-bottom: 0;
  border-top: var(--border-thin) solid var(--graphic);
  background: var(--section);
  font-weight: var(--font-weight-semibold);
}
.var-table tr.final td.count {
  color: var(--c2-type);
  font-size: 1.5rem;
  font-weight: var(--font-weight-light);
}

/* ---- Feature grid (8-up) ------------------------------------------------ */
.feat-grid {
  margin-top: 3rem;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--border-thin) solid var(--graphic);
  border-left: var(--border-thin) solid var(--graphic);
}
.feat {
  padding: 1.75rem 1.5rem;
  border-right: var(--border-thin) solid var(--graphic);
  border-bottom: var(--border-thin) solid var(--graphic);
  background: var(--ground);
  display: flex; flex-direction: column; gap: 0.6rem;
  min-height: 12rem;
}
.feat__icon {
  font-size: 1.4rem; line-height: 1;
  margin-bottom: 0.25rem;
}
.feat__title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  margin: 0;
}
.feat__body { font-size: 0.9rem; line-height: 1.55; color: var(--figure-subtle); margin: 0; }
@media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }

/* ---- Segmented features (tabs) ----------------------------------------- */
.seg {
  margin-top: 3rem;
}
.seg__tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--border-thin) solid var(--graphic);
  overflow-x: auto;
  scrollbar-width: none;
}
.seg__tabs::-webkit-scrollbar { display: none; }
.seg__tab {
  flex: 1 0 auto;
  min-width: 12rem;
  display: flex; flex-direction: column;
  gap: 0.35rem;
  align-items: flex-start;
  padding: 1rem 1.25rem 1.1rem;
  border: 0;
  border-bottom: 0.2rem solid transparent;
  margin-bottom: -0.1rem;
  background: transparent;
  color: var(--figure-subtle);
  cursor: pointer;
  font: inherit;
  text-align: left;
  box-sizing: border-box;
  transition: color 0.15s ease-out, border-color 0.15s ease-out, background 0.15s ease-out;
}
.seg__tab:hover { color: var(--figure); background: var(--ground); }
.seg__tab[aria-selected="true"] {
  color: var(--figure);
  border-bottom-color: var(--c2-type);
  background: var(--ground);
}
.seg__tab-num {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-family-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--figure-subtle);
}
.seg__tab[aria-selected="true"] .seg__tab-num { color: var(--c2-type); }
.seg__tab-label {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  letter-spacing: -0.005em;
}
/* "Coming soon" tag, inside .seg__tab-num (inherits its mono, uppercase type) */
.seg__tab-soon {
  padding: 0.15rem 0.35rem;
  font-size: 0.6rem;
  line-height: 1;
  border: var(--border-thin) solid var(--c2-type);
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

/* Panels */
.seg__panel { display: none; padding-top: 2.5rem; }
.seg__panel.is-active { display: block; }
.seg__layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3.5rem;
  align-items: start;
}
@media (max-width: 900px) { .seg__layout { grid-template-columns: 1fr; gap: 2.5rem; } }

.seg__head { display: flex; flex-direction: column; gap: 1.25rem; }
.seg__pain {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}
.seg__need {
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--figure-subtle);
  padding-left: 1rem;
  border-left: var(--border-thick) solid var(--graphic);
  margin: 0;
  max-width: 46ch;
}
.seg__need-label {
  font-family: var(--font-family-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--figure-subtle);
  margin: 0 0 0.5rem;
  font-style: normal;
  display: block;
}
.seg__quote {
  margin: 1rem 0 0;
  padding-top: 1.5rem;
  border-top: var(--border-thin) solid var(--graphic);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.45;
  text-wrap: balance;
  color: var(--figure);
}
.seg__quote cite {
  display: block;
  margin-top: 0.75rem;
  font-style: normal;
  font-family: var(--font-family-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--figure-subtle);
}

/* Right column — segment feature grid */
.seg__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  border-top: var(--border-thin) solid var(--graphic);
  border-left: var(--border-thin) solid var(--graphic);
}
@media (max-width: 700px) { .seg__features { grid-template-columns: 1fr; } }
.seg__feat {
  padding: 1.5rem 1.25rem;
  border-right: var(--border-thin) solid var(--graphic);
  border-bottom: var(--border-thin) solid var(--graphic);
  background: var(--ground);
  display: flex; flex-direction: column; gap: 0.5rem;
  min-height: 10rem;
}
.seg__feat-icon { font-size: 1.3rem; line-height: 1; }
.seg__feat-title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  margin: 0;
}
.seg__feat-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--figure-subtle);
  margin: 0;
}

/* ---- Audience cards (3-up) --------------------------------------------- */
.aud-grid {
  margin-top: 3rem;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.aud {
  background: var(--ground);
  border: var(--border-thin) solid var(--graphic);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: 1rem;
}
.aud__label {
  font-family: var(--font-family-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c2-type);
  font-weight: var(--font-weight-bold);
}
.aud__title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.aud__body {
  font-size: 0.95rem; line-height: 1.55;
  color: var(--figure); margin: 0;
}
.aud__quote {
  margin-top: auto;
  padding-top: 1rem;
  border-top: var(--border-thin) solid var(--graphic);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--figure-subtle);
  line-height: 1.45;
}
.aud__quote cite {
  display: block; margin-top: 0.5rem;
  font-style: normal; font-size: 0.78rem;
  font-family: var(--font-family-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--figure-subtle);
}
@media (max-width: 900px) { .aud-grid { grid-template-columns: 1fr; } }

/* ---- Validation quotes -------------------------------------------------- */
.quote-list { display: flex; flex-direction: column; gap: 0; margin-top: 3rem; }
.qitem {
  display: grid; grid-template-columns: 5rem 1fr;
  gap: 2rem;
  padding: 2rem 0;
  border-top: var(--border-thin) solid var(--graphic);
  align-items: baseline;
}
.qitem:last-child { border-bottom: var(--border-thin) solid var(--graphic); }
.qitem__idx {
  font-family: var(--font-family-mono);
  color: var(--figure-subtle);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.qitem__body {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
  max-width: 50ch;
}
.qitem__cite {
  display: block; margin-top: 1rem;
  font-style: normal; font-size: 0.8rem;
  font-family: var(--font-family-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--figure-subtle);
}
@media (max-width: 700px) {
  .qitem { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* ---- Pricing ------------------------------------------------------------ */
.pricing-grid {
  margin-top: 3rem;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 800px) { .pricing-grid { grid-template-columns: 1fr; } }
.plan {
  background: var(--ground);
  border: var(--border-thin) solid var(--graphic);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  display: flex; flex-direction: column; gap: 1.25rem;
}
.plan--current {
  border-color: var(--figure);
}
.plan__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-family-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--figure);
  font-weight: var(--font-weight-bold);
  padding: 0.25rem 0.55rem;
  background: var(--section);
  border: var(--border-thin) solid var(--graphic);
  border-radius: var(--radius-sm);
  width: fit-content;
}
.plan--current .plan__badge {
  background: var(--c2);
  border-color: var(--c2);
}
.plan__title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-light);
  font-size: 1.875rem;
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}
.plan__sub {
  font-size: 0.95rem;
  color: var(--figure-subtle);
  margin: 0;
  line-height: 1.5;
}
.plan__features {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.7rem;
  border-top: var(--border-thin) solid var(--graphic);
  padding-top: 1.25rem;
}
.plan__features li {
  font-size: 0.95rem;
  line-height: 1.5;
  display: grid; grid-template-columns: 1rem 1fr;
  gap: 0.6rem; align-items: start;
}
.plan__features li::before {
  content: '+';
  font-family: var(--font-family-mono);
  color: var(--c2-type);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
.plan__cta { margin-top: auto; }

.price-note {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border-left: var(--border-thick) solid var(--graphic);
  font-size: 0.95rem;
  color: var(--figure-subtle);
  max-width: 60rem;
  line-height: 1.55;
}

/* ---- Beta CTA ----------------------------------------------------------- */
.cta {
  text-align: center;
  display: flex; flex-direction: column; gap: 1.5rem;
  align-items: center;
}
.cta .h1-mkt { margin: 0 auto; }
.cta .body { margin: 0 auto; text-align: center; }
.cta .hero__ctas { justify-content: center; }
.cta .small {
  font-size: 0.85rem;
  color: var(--figure-subtle);
  font-family: var(--font-family-mono);
  letter-spacing: 0.04em;
}

/* ---- Footer ------------------------------------------------------------- */
.footer {
  border-top: var(--border-thin) solid var(--graphic);
  padding: 2rem 0;
  background: var(--ground);
}
.footer__inner {
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--figure-subtle);
  font-family: var(--font-family-mono);
}
.footer__links { margin-left: auto; display: flex; gap: 1rem; flex-wrap: wrap; }
.footer__links a {
  color: var(--figure-subtle);
  text-decoration: none;
}
.footer__links a:hover { color: var(--c1-type); text-decoration: underline; text-underline-offset: 0.3rem; }

/* ---- Who-it's-for outcome line (extends .aud cards) --------------------- */
.aud__outcome {
  margin-top: 0.25rem;
  padding-top: 1.1rem;
  border-top: var(--border-thin) solid var(--graphic);
  display: flex; flex-direction: column; gap: 0.45rem;
}
.aud__outcome-label {
  font-family: var(--font-family-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c2-type);
  font-weight: var(--font-weight-bold);
}
.aud__outcome-text {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--figure);
  font-weight: var(--font-weight-medium);
  margin: 0;
}

/* ---- Features grid (10-up, numbered, no emoji) -------------------------- */
.fgrid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: var(--border-thin) solid var(--graphic);
  border-left: var(--border-thin) solid var(--graphic);
}
.fcard {
  padding: 1.5rem 1.25rem;
  border-right: var(--border-thin) solid var(--graphic);
  border-bottom: var(--border-thin) solid var(--graphic);
  background: var(--ground);
  display: flex; flex-direction: column; gap: 0.6rem;
  min-height: 13.5rem;
}
.fcard__num {
  font-family: var(--font-family-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  color: var(--c2-type);
  font-weight: var(--font-weight-bold);
}
.fcard__title {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
}
.fcard__body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--figure-subtle);
  margin: 0;
}
@media (max-width: 1100px) { .fgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .fgrid { grid-template-columns: 1fr; } }

/* ---- Pricing — coming soon panel --------------------------------------- */
.pricing-soon {
  margin-top: 2.5rem;
  border: var(--border-thin) solid var(--graphic);
  border-radius: var(--radius-lg);
  background: var(--ground);
  padding: clamp(2rem, 5vw, 3.5rem);
  display: flex; flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
  max-width: 52rem;
}
.pricing-soon__strip {
  width: 100%;
  height: 0.4rem;
  margin-top: 0.5rem;
  background: repeating-linear-gradient(
    45deg,
    var(--c4) 0 0.5rem,
    var(--section) 0.5rem 1rem
  );
  border-radius: var(--radius-xs);
}

/* ---- Misc utility ------------------------------------------------------- */
.stack { display: flex; flex-direction: column; gap: 1rem; }
.divider {
  border: 0;
  border-top: var(--border-thin) solid var(--graphic);
  margin: 0;
}
.italic { font-style: italic; }