/* GEONALY public site · prototype stylesheet
   Replaces the compiled Tailwind sheet on the live site with hand-written CSS
   using the same design tokens: ink #0B1512, accent #00C987, Geist / Geist Mono. */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/geist-latin-wght-normal.a147f99cd533.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/geist-latin-ext-wght-normal.4841e590e2a9.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/geist-mono-latin-wght-normal.a15f9d568fb0.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/geist-mono-latin-ext-wght-normal.693cf932fe6b.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink: #0B1512;
  --ink-2: #1f2a26;
  --ink-body: #3f4a45;
  --ink-soft: #5f6b66;
  --ink-subtle: #66716c;
  --bg: #F8FAF9;
  --ivory: #F3F7F4;
  --white: #ffffff;
  --hairline: rgba(11, 21, 18, 0.08);
  --hairline-strong: rgba(11, 21, 18, 0.14);
  --accent: #00C987;
  --accent-bright: #53F2B5;
  --accent-deep: #047857;
  --accent-ink: #05704a;
  --accent-soft: #E3F8EF;
  --accent-soft-2: #CDF5E3;
  --dark: #0B1512;
  --dark-2: #0F1D18;
  --dark-card: #12211b;
  --dark-hairline: rgba(0, 201, 135, 0.18);
  --dark-text: #EAF4EF;
  --dark-text-soft: #B7C7BF;
  --dark-text-subtle: #7F918A;
  --warn: #F5A524;
  --bad: #ff3d5e;
  --blue: #2e6fff;
  --font-sans: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 20px;
  --radius-sm: 12px;
  --beta-h: 32px;
  --header-h: 64px;
  --shadow-card: 0 1px 2px rgba(11, 21, 18, 0.04), 0 18px 50px -24px rgba(11, 21, 18, 0.18);
  --shadow-mock: 0 30px 80px -30px rgba(0, 0, 0, 0.75);
  --max: 1320px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-feature-settings: "ss01", "ss02", "cv01", "cv11";
  -webkit-font-smoothing: antialiased;
  padding-top: var(--beta-h);
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-weight: 600; letter-spacing: -0.02em; line-height: 1.02; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
html, body { overflow-x: hidden; }
[id] { scroll-margin-top: calc(var(--beta-h) + var(--header-h) + 16px); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 32px; } }
.section { position: relative; padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--white { background: var(--white); }
.section--ivory { background: var(--ivory); }
.section--dark { background: var(--dark); color: var(--dark-text-soft); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--dark-text); }
.section--plexus { background-color: var(--ivory); background-image: radial-gradient(1100px 600px at 50% -10%, rgba(83, 242, 181, 0.22), transparent 60%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='none'><g fill='none' stroke='%2300C987' stroke-opacity='0.16' stroke-width='0.8'><path d='M40 120 L220 60 L340 220 L180 320 Z'/><path d='M340 220 L520 180 L560 340 L400 380 Z'/><path d='M560 340 L720 260 L820 420 L640 480 Z'/><path d='M820 420 L980 320 L1060 500 L900 560 Z'/><path d='M1060 500 L1220 400 L1340 560 L1160 640 Z'/><path d='M120 520 L260 460 L340 620 L200 680 Z'/><path d='M340 620 L500 560 L580 720 L420 780 Z'/><path d='M1220 100 L1400 60 L1480 220 L1320 260 Z'/><path d='M1320 260 L1480 220 L1540 400 L1400 440 Z'/></g><g fill='%2300C987' fill-opacity='0.45'><circle cx='40' cy='120' r='2.2'/><circle cx='220' cy='60' r='2.2'/><circle cx='340' cy='220' r='2.2'/><circle cx='180' cy='320' r='2.2'/><circle cx='520' cy='180' r='2.2'/><circle cx='560' cy='340' r='2.2'/><circle cx='400' cy='380' r='2.2'/><circle cx='720' cy='260' r='2.2'/><circle cx='820' cy='420' r='2.2'/><circle cx='640' cy='480' r='2.2'/><circle cx='980' cy='320' r='2.2'/><circle cx='1060' cy='500' r='2.2'/><circle cx='900' cy='560' r='2.2'/><circle cx='1220' cy='400' r='2.2'/><circle cx='1340' cy='560' r='2.2'/><circle cx='1160' cy='640' r='2.2'/><circle cx='120' cy='520' r='2.2'/><circle cx='260' cy='460' r='2.2'/><circle cx='500' cy='560' r='2.2'/><circle cx='580' cy='720' r='2.2'/><circle cx='1400' cy='60' r='2.2'/><circle cx='1480' cy='220' r='2.2'/><circle cx='1540' cy='400' r='2.2'/></g></svg>"); background-size: auto, cover; }
.section--dark.section--grid::before, .hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(0, 201, 135, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 201, 135, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(900px 600px at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(900px 600px at 50% 0%, #000 30%, transparent 100%);
}
.section > .container, .hero > .container { position: relative; z-index: 1; }
/* Drifting network, drawn by site.js into every .hero, .section--dark and .section--plexus. */
.plexus-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.js .section--plexus { background-image: radial-gradient(1100px 600px at 50% -10%, rgba(83, 242, 181, 0.22), transparent 60%); background-size: auto; }
.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head--wide { max-width: 980px; }
.section-head .lede { margin-top: 20px; }
.split { display: grid; gap: 40px; align-items: start; }
.split > *, .grid > *, .hero__grid > *, .obs > *, .stage > *, .plans > *, .team > * { min-width: 0; }
.panel__head { flex-wrap: wrap; }
.panel { overflow-x: auto; }
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; } .split--even { grid-template-columns: 1fr 1fr; } .split--rev > :first-child { order: 2; } }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid--2, .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.stack > * + * { margin-top: 16px; }
.stack--lg > * + * { margin-top: 24px; }

/* ---------- type ---------- */
/* h1 follows the live homepage hero: Geist 600, -0.035em, 38 / 52 / 42 / 54px as the hero goes one column, one column wide, two columns, two columns wide. */
.h1 { font-size: 38px; letter-spacing: -0.035em; line-height: 1.02; }
@media (min-width: 640px) { .h1 { font-size: 52px; } }
@media (min-width: 1024px) { .h1 { font-size: 42px; } }
@media (min-width: 1280px) { .h1 { font-size: 54px; } }
/* One-word heroes (Pricing, Blog) use the live pricing page sizes. */
.h1--display { font-size: 38px; line-height: 0.98; }
@media (min-width: 640px) { .h1--display { font-size: 52px; } }
@media (min-width: 768px) { .h1--display { font-size: 64px; } }
@media (min-width: 1024px) { .h1--display { font-size: 72px; } }
.h1--long { font-size: clamp(1.75rem, 3.4vw, 2.75rem); letter-spacing: -0.03em; line-height: 1.06; }
.h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.h2--sm { font-size: clamp(1.7rem, 3.2vw, 2.4rem); }
.h3 { font-size: 1.35rem; letter-spacing: -0.02em; line-height: 1.25; }
.h4 { font-size: 1.05rem; letter-spacing: -0.01em; line-height: 1.3; }
.accent { color: var(--accent-deep); }
.section--dark .accent, .hero .accent { color: transparent; background-image: linear-gradient(120deg, #00a86e 0%, #00c987 45%, #12de99 100%); background-size: 200% 100%; background-position: 0%; -webkit-background-clip: text; background-clip: text; transition: background-position 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.35s; }
.section--dark .accent:hover, .hero .accent:hover { background-position: 100%; filter: drop-shadow(0 4px 18px rgba(0, 201, 135, 0.35)); }
.lede { font-size: 1.15rem; line-height: 1.6; color: var(--ink-body); max-width: 720px; }
:where(h1, h2, h3) + .lede { margin-top: 16px; } /* a lede straight under a heading; hero, section-head and mt-* utilities override */
.section--dark .lede, .hero .lede { color: var(--dark-text-soft); }
.small { font-size: 0.92rem; color: var(--ink-soft); }
.section--dark .small { color: var(--dark-text-subtle); }
.mono { font-family: var(--font-mono); }
.prose > * + * { margin-top: 16px; }
.prose p { max-width: 68ch; }
.prose strong { color: var(--ink); font-weight: 600; }
.section--dark .prose strong { color: var(--dark-text); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; border: 1px solid transparent; }
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 16px; height: 16px; }
.btn--primary { background: var(--accent); color: #06231a; box-shadow: 0 10px 30px -12px rgba(0, 201, 135, 0.7); }
.btn--primary:hover { background: var(--accent-bright); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #1a2a24; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--hairline-strong); }
.btn--ghost:hover { background: rgba(11, 21, 18, 0.04); }
.section--dark .btn--ghost, .hero .btn--ghost, .footer .btn--ghost { color: var(--dark-text); border-color: rgba(234, 244, 239, 0.18); background: rgba(255, 255, 255, 0.03); }
.section--dark .btn--ghost:hover, .hero .btn--ghost:hover, .footer .btn--ghost:hover { background: rgba(255, 255, 255, 0.07); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.link { color: var(--accent-deep); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.link:hover { text-decoration: underline; }
.link svg { width: 14px; height: 14px; }
.section--dark .link { color: var(--accent); }

/* ---------- beta strip + header ---------- */
.beta { position: fixed; inset-inline: 0; top: env(safe-area-inset-top, 0px); z-index: 60; height: var(--beta-h); display: flex; align-items: center; justify-content: center; padding: 0 16px; background: linear-gradient(90deg, #04231a 0%, #06382a 50%, #04231a 100%); border-bottom: 1px solid rgba(0, 201, 135, 0.28); }
.beta p { display: flex; align-items: center; gap: 9px; font-size: 12px; line-height: 1; color: #d2e2da; text-align: center; }
.beta__tag { flex: none; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 4px 7px; border-radius: 100px; background: var(--accent); color: #04231a; }
.beta a { color: var(--accent-bright); }
.beta a:hover { text-decoration: underline; }
@media (max-width: 640px) { :root { --beta-h: 44px; } .beta p { flex-wrap: wrap; line-height: 1.35; row-gap: 2px; } }

.site-header { position: fixed; inset-inline: 0; top: calc(var(--beta-h) + env(safe-area-inset-top, 0px)); z-index: 50; height: var(--header-h); background: rgba(11, 21, 18, 0.55); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color 0.2s ease, background 0.2s ease; }
.site-header.is-scrolled { border-bottom-color: rgba(0, 201, 135, 0.14); background: rgba(11, 21, 18, 0.9); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; letter-spacing: 0.02em; }
.brand__mark { width: 32px; height: 32px; display: block; }  /* the SVG carries its own white tile, as on the live site */
.brand__mark svg { width: 32px; height: 32px; display: block; }
.nav { display: none; align-items: center; gap: 4px; }
.nav a { position: relative; padding: 8px 12px; color: #d2e2da; font-size: 14.5px; font-weight: 500; transition: color 0.2s ease; }
.nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); }
.nav a:hover, .nav a:focus-visible { color: #fff; }
.nav a:hover::after, .nav a:focus-visible::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: #fff; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .nav a, .nav a::after { transition: none; } }
.header-actions { display: none; align-items: center; gap: 10px; }
.header-actions .login { color: #d2e2da; font-size: 14.5px; font-weight: 500; padding: 8px 12px; }
.header-actions .login:hover { color: #fff; }
@media (min-width: 1024px) { .nav, .header-actions { display: flex; } .menu-toggle { display: none !important; } }
.menu-toggle { display: inline-flex; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); }
.menu-toggle svg { width: 20px; height: 20px; }
.mobile-menu { position: fixed; inset-inline: 0; top: calc(var(--beta-h) + var(--header-h) + env(safe-area-inset-top, 0px)); bottom: 0; z-index: 49; background: var(--dark); padding: 24px; display: none; flex-direction: column; gap: 4px; overflow: auto; }
.mobile-menu.is-open { display: flex; }
.mobile-menu a { color: #d2e2da; font-size: 18px; font-weight: 600; padding: 14px 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.mobile-menu .btn { margin-top: 20px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--dark); color: var(--dark-text-soft); padding: calc(var(--header-h) + 80px) 0 96px; }
.hero::after { content: ""; position: absolute; inset: auto -20% -40% -20%; height: 60%; background: radial-gradient(60% 60% at 50% 50%, rgba(0, 201, 135, 0.14), transparent 70%); pointer-events: none; }
.hero h1 { color: var(--ivory); max-width: 620px; }
.hero .lede { margin-top: 24px; font-size: 17px; max-width: 620px; }
@media (min-width: 768px) { .hero .lede { font-size: 18px; } }
.hero__grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1024px) { .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; } .hero__grid--wide-mock { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.hero .btn-row { margin-top: 32px; }
.hero__note { margin-top: 18px; font-family: var(--font-mono); font-size: 12.5px; color: var(--dark-text-subtle); letter-spacing: 0.01em; }
.ticks { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-size: 14px; color: var(--dark-text-soft); }
.ticks li { display: flex; align-items: center; gap: 8px; }
.ticks svg { width: 14px; height: 14px; color: var(--accent); }

/* ---------- cards ---------- */
.card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-card); }
.card--flat { box-shadow: none; }
.card--ivory { background: var(--ivory); }
.card--dark { background: linear-gradient(160deg, #172a22, #0e1f19); border: 1px solid var(--dark-hairline); color: var(--dark-text-soft); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); }
.card--dark h3, .card--dark h4 { color: var(--dark-text); }
.card--soft { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: none; color: var(--dark-text-soft); }
.card--soft h3, .card--soft h4 { color: var(--dark-text); }
.card__num { position: absolute; top: 20px; right: 24px; font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; color: rgba(11, 21, 18, 0.07); line-height: 1; }
.card--soft .card__num, .card--dark .card__num { color: rgba(255, 255, 255, 0.06); }
.card--rel { position: relative; }
.icon-badge { width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
.icon-badge svg { width: 20px; height: 20px; }
.card--soft .icon-badge, .card--dark .icon-badge { background: rgba(0, 201, 135, 0.14); color: var(--accent); }
.feature-card h3 { margin-top: 20px; }
.feature-card > h3:first-child { margin-top: 0; }
.feature-card p { margin-top: 10px; font-size: 15.5px; }

/* module cards on the homepage */
.module-card { display: grid; grid-template-rows: auto auto 1fr auto; padding: 24px; transition: transform 0.2s ease, box-shadow 0.2s ease; }
/* three cards side by side: share one set of rows so heads, visuals, lists, titles and price lines line up */
@supports (grid-template-rows: subgrid) { @media (min-width: 700px) { .module-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; } } }
.module-card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -30px rgba(11, 21, 18, 0.28); }
.module-card__head { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 8px 0; }
.module-card__head h3 { font-size: 2.4rem; letter-spacing: -0.04em; }
.module-card__head h3 span { color: var(--accent); }
.module-card__visual { margin: 20px 0 22px; border-radius: 16px; border: 1px solid var(--hairline); background: linear-gradient(180deg, #FBFDFC, #F1F6F3); padding: 18px; min-height: 190px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; }
.module-card__list { padding: 0 8px; }
.module-card__list li { display: flex; gap: 10px; font-size: 15px; padding: 5px 0; align-items: flex-start; }
.module-card__list svg { flex: none; width: 15px; height: 15px; color: var(--accent-deep); margin-top: 5px; }
.module-card__foot { display: flex; flex-direction: column; padding: 22px 8px 4px; }
.module-card__foot h4 { font-size: 1.15rem; }
.module-card__foot p { margin-top: 8px; font-size: 15px; }
.module-card__price { display: flex; align-items: center; gap: 16px; margin-top: auto; padding-top: 18px; font-size: 14px; color: var(--ink-soft); }
.module-card__price strong { color: var(--ink); }

/* ---------- lists ---------- */
.bullets { display: grid; gap: 10px; }
.bullets li { position: relative; padding-left: 18px; font-size: 15.5px; max-width: 68ch; }
.bullets li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); }
.checks li { display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; font-size: 15.5px; }
.checks svg { flex: none; width: 16px; height: 16px; margin-top: 5px; color: var(--accent-deep); }
.section--dark .checks svg, .card--dark .checks svg, .card--soft .checks svg, .hero .checks svg { color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--hairline-strong); font-size: 13.5px; color: var(--ink); background: var(--white); }
.chip svg { width: 13px; height: 13px; color: var(--accent-deep); }
.section--dark .chip, .hero .chip { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.12); color: var(--dark-text); }
.section--dark .chip svg, .hero .chip svg { color: var(--accent); }
.chip--mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; }

.steps { display: grid; gap: 28px; counter-reset: step; }
@media (min-width: 800px) { .steps--3 { grid-template-columns: repeat(3, 1fr); } .steps--4 { grid-template-columns: repeat(4, 1fr); } .steps--5 { grid-template-columns: repeat(5, 1fr); } }
.step { position: relative; padding-top: 22px; }
.step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--hairline-strong); }
.section--dark .step::before { background: rgba(255, 255, 255, 0.12); }
.step__n { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--accent); color: var(--accent-deep); background: var(--white); font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-bottom: 18px; }
.section--dark .step__n { background: rgba(0, 201, 135, 0.08); color: var(--accent); }
.step h3 { font-size: 1.15rem; }
.step p { margin-top: 10px; font-size: 15.5px; }

.numbered { display: grid; gap: 0; }
.numbered > li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--hairline); }
.numbered > li:first-child { border-top: 0; padding-top: 0; }
.numbered .n { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--accent); color: var(--accent-deep); font-family: var(--font-mono); font-size: 11px; font-weight: 600; }
.numbered h3 { font-size: 1.15rem; }
.numbered p { margin-top: 8px; font-size: 15.5px; }
.numbered ul { margin-top: 10px; display: grid; gap: 6px; }
.numbered ul li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.5; color: var(--ink-body); }
.numbered ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.note { display: flex; gap: 14px; padding: 18px 20px; border-radius: 14px; background: var(--white); border: 1px solid var(--hairline); font-size: 15px; }
.note__i { flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.note--ink { background: var(--ivory); }
.section--dark .note { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); color: var(--dark-text-soft); }
.section--dark .note__i { background: rgba(0, 201, 135, 0.14); color: var(--accent); }

.quote { position: relative; }
.quote p { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); max-width: 30ch; }
.quote p::before { content: "\201C"; color: var(--accent-deep); margin-right: 2px; }
.quote p::after { content: "\201D"; color: var(--accent-deep); margin-left: 2px; }
.quote figcaption { margin-top: 24px; display: flex; align-items: center; gap: 14px; font-size: 14px; color: var(--ink-soft); }
.quote figcaption::before { content: ""; width: 28px; height: 1px; background: var(--accent-deep); }
.quote figcaption strong { color: var(--ink); font-weight: 600; }
.quote figcaption .mono { font-size: 12.5px; }
.quote--long p { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.45; font-weight: 500; max-width: 46ch; }
.quote--sm p { font-size: 1.25rem; padding-left: 20px; border-left: 2px solid var(--accent-deep); max-width: none; }
.quote--sm p::before, .quote--sm p::after { display: none; }
.section--dark .quote p { color: var(--dark-text); }
.section--dark .quote figcaption strong { color: var(--dark-text); }

/* ---------- mock UI ---------- */
.mock { background: var(--white); border-radius: 18px; border: 1px solid var(--hairline); box-shadow: var(--shadow-mock); overflow: hidden; color: var(--ink); font-size: 13px; }
.mock__bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); background: #FBFDFC; }
.mock__dots { display: flex; gap: 6px; flex: none; }
.mock__dots i { width: 10px; height: 10px; border-radius: 50%; background: #E3E5DF; }
.mock__dots i:nth-child(1) { background: #ff5f57; } .mock__dots i:nth-child(2) { background: #febc2e; } .mock__dots i:nth-child(3) { background: #28c840; }
.mock__url { margin: 0 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); background: var(--ivory); padding: 6px 14px; border-radius: 999px; }
.mock__tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-subtle); }
.mock__bar .mock__tag { flex: none; white-space: nowrap; }
/* The homepage module cards' demo panels carry the same label as the big mocks. */
.module-card__tag { align-self: flex-end; margin-bottom: -8px; }
@media (max-width: 479px) { .mock__bar .mock__url { display: none; } .mock__bar .mock__tag { margin-left: auto; } }
.mock__body { display: grid; grid-template-columns: 1fr; }
@media (min-width: 720px) { .mock__body--side { grid-template-columns: 168px 1fr; } }
.mock__side { display: none; border-right: 1px solid var(--hairline); padding: 16px 12px; background: #FBFDFC; }
@media (min-width: 720px) { .mock__side { display: block; } }
.mock__side .group { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-subtle); margin: 14px 8px 6px; }
.mock__side a, .mock__side span { display: block; padding: 7px 10px; border-radius: 8px; font-size: 12.5px; color: var(--ink-soft); }
.mock__side a:hover { color: var(--accent-ink); background: var(--ivory); }
/* Dashboard and Settings are not links and must not read as one. */
.mock__side span { cursor: default; }
.mock__side .on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.mock__main { padding: 18px; }
.mock__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mock__title strong { font-size: 15px; font-weight: 700; }
.mock__title span { font-size: 12px; color: var(--ink-subtle); }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 900px) { .kpis--3 { grid-template-columns: repeat(3, 1fr); } .kpis--4 { grid-template-columns: repeat(4, 1fr); } }
.kpi { border: 1px solid var(--hairline); border-radius: 12px; padding: 12px 14px; background: var(--white); border-left: 3px solid var(--accent); }
.kpi--amber { border-left-color: var(--warn); }
.kpi--blue { border-left-color: var(--blue); }
.kpi--red { border-left-color: var(--bad); }
.kpi .mock__tag { display: block; margin-bottom: 4px; }
.kpi strong { font-family: var(--font-sans); font-size: 1.5rem; letter-spacing: -0.03em; font-weight: 700; color: var(--ink); }
.kpi em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--accent-ink); margin-left: 6px; }
.kpi em.down { color: #b3122f; }
.kpi em.flat { color: var(--ink-subtle); }
.panel { border: 1px solid var(--hairline); border-radius: 12px; padding: 14px; background: var(--white); }
.panel + .panel, .kpis + .panel, .panel + .kpis { margin-top: 10px; }
.panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.panel__head strong { font-size: 13.5px; }
.panel__head span { font-size: 11.5px; color: var(--ink-subtle); }
.mock table, .panel table, table.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mock th, .panel th, .data-table th { text-align: left; font-family: var(--font-mono); font-weight: 500; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-subtle); padding: 6px 8px; border-bottom: 1px solid var(--hairline); }
.mock td, .panel td, .data-table td { padding: 8px; border-bottom: 1px solid var(--hairline); }
.mock tr:last-child td, .panel tr:last-child td, .data-table tr:last-child td { border-bottom: 0; }
.mock td.r, .mock th.r, .panel td.r, .panel th.r, .data-table td.r, .data-table th.r { text-align: right; font-variant-numeric: tabular-nums; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.pill--ok { background: var(--accent-soft-2); color: var(--accent-ink); }
.pill--warn { background: #FFEFC6; color: #74560d; }
.pill--bad { background: #FFD7DF; color: #b3122f; }
.pill--muted { background: #EEF1EE; color: var(--ink-soft); }
.bars { display: grid; gap: 10px; }
.bar { display: grid; grid-template-columns: 96px 1fr 60px; gap: 12px; align-items: center; font-size: 13px; }
.bar__track { height: 10px; border-radius: 999px; background: #EEF1EE; overflow: hidden; }
.bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); }
.bar__fill--grey { background: linear-gradient(90deg, #8a948f, #b8c0bb); }
.bar .r { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.spark { width: 100%; height: 44px; }
.chart { width: 100%; height: auto; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft); }
.legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-right: 6px; background: var(--accent); }
.legend i.ink { background: var(--ink); }
.legend i.blue { background: var(--blue); }
.legend i.grey { background: #b8c0bb; }
.badge-row { display: flex; gap: 6px; }
.eng { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; border: 1px solid var(--hairline-strong); background: var(--white); color: var(--ink); }
.eng--off { opacity: 0.32; }
.eng--lg { width: 34px; height: 34px; font-size: 11px; }
.section--dark .eng, .hero .eng, .card--dark .eng { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: var(--dark-text); }

/* observatory (AI page) */
.obs { display: grid; gap: 20px; }
@media (min-width: 960px) { .obs { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.obs__list { padding: 0; overflow: hidden; }
/* the same observatory inside the AI hero's dashboard frame */
.mock--obs .mock__main { padding: 16px; }
.mock--obs .obs { gap: 14px; }
.mock--obs .obs .card { padding: 16px; border-radius: 12px; box-shadow: none; }
.mock--obs .obs__list { padding: 0; }
.mock--obs .obs__list header { padding: 12px 16px; }
.mock--obs .obs__row { grid-template-columns: 36px 1fr 40px; gap: 10px; padding: 11px 16px; font-size: 13.5px; }
.mock--obs .obs__row .badge-row { display: none; }
.mock--obs .obs__detail h3 { font-size: 1.1rem; margin-top: 2px; }
.mock--obs .obs__facts { margin-top: 12px; gap: 8px; }
.mock--obs .obs__facts div { padding: 10px; }
.mock--obs .obs__facts strong { font-size: 1rem; }
.mock--obs .obs__cov { margin-top: 12px; gap: 6px; }
.mock--obs .obs__cov li { padding: 8px 12px; font-size: 13px; }
.mock--obs .obs__rec { margin-top: 12px; padding: 12px 14px; font-size: 13px; }
@media (min-width: 1024px) and (max-width: 1199px) { .mock--obs .obs { grid-template-columns: 1fr; } }
.obs__list header { padding: 16px 20px; border-bottom: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; }
.obs__row { width: 100%; display: grid; grid-template-columns: 40px 1fr auto 44px; gap: 12px; align-items: center; padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--hairline); font-size: 15px; color: var(--ink); transition: background 0.15s ease; }
.obs__row:last-child { border-bottom: 0; }
.obs__row:hover { background: var(--ivory); }
.obs__row[aria-selected="true"] { background: var(--accent-soft); }
.obs__row .q { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-subtle); letter-spacing: 0.1em; }
.obs__row .d { font-family: var(--font-mono); font-size: 12px; text-align: right; color: var(--ink-soft); }
.obs__row .d.up { color: var(--accent-ink); } .obs__row .d.down { color: #b3122f; }
.obs__detail h3 { font-size: 1.35rem; margin-top: 8px; }
.obs__facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
.obs__facts div { border: 1px solid var(--hairline); border-radius: 12px; padding: 12px; background: var(--ivory); }
.obs__facts span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-subtle); }
.obs__facts strong { display: block; margin-top: 4px; font-size: 1.15rem; color: var(--ink); }
.obs__cov { margin-top: 18px; display: grid; gap: 8px; }
.obs__cov li { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border: 1px solid var(--hairline); border-radius: 10px; background: var(--white); font-size: 14px; }
.obs__cov li span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); }
.obs__cov li.absent span { color: #b3122f; }
.obs__rec { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: var(--accent-soft); border: 1px solid rgba(0, 201, 135, 0.3); font-size: 14px; color: var(--ink-2); }
.obs__rec strong { display: block; margin-bottom: 4px; }

/* stage slider (AI page) */
.stage { display: grid; gap: 24px; }
@media (min-width: 900px) { .stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; } }
.stage__answer { min-height: 210px; }
.stage__answer .mock__tag { display: block; margin-bottom: 10px; }
.stage__answer blockquote { margin: 0; font-size: 1.05rem; line-height: 1.55; color: var(--ink); }
.stage__answer blockquote .you { background: var(--accent-soft-2); color: var(--accent-ink); padding: 0 4px; border-radius: 4px; font-weight: 600; }
.stage__tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 18px; }
@media (min-width: 600px) { .stage__tabs { grid-template-columns: repeat(4, 1fr); } }
.stage__tabs button { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--hairline-strong); font-size: 13px; font-weight: 600; color: var(--ink-soft); background: var(--white); }
.stage__tabs button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.stage input[type="range"] { width: 100%; margin-top: 18px; accent-color: var(--accent-deep); }

/* ---------- pricing ---------- */
.toggle-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--white); border: 1px solid var(--hairline-strong); }
.toggle button { height: 36px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.toggle-row .hint { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); }
.module-switch { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.module-switch a { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--hairline-strong); background: var(--white); font-size: 14px; color: var(--ink); }
.module-switch a:hover, .module-switch a[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.module-switch svg { width: 14px; height: 14px; flex: none; }
.module-switch .from { color: var(--ink-soft); }
.plans { display: grid; gap: 16px; }
@media (min-width: 700px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans--4 { grid-template-columns: repeat(4, 1fr); } .plans--3 { grid-template-columns: repeat(3, 1fr); } }
.plan { position: relative; display: flex; flex-direction: column; padding: 26px 24px; }
.plan__tier { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-subtle); }
.plan__tier .pill { font-size: 9px; }
.plan__desc { margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); min-height: 44px; }
.plan__price { margin-top: 22px; display: flex; align-items: baseline; gap: 6px; }
.plan__price strong { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); line-height: 1; }
.plan__price span { font-size: 14px; color: var(--ink-soft); }
.plan__annual { margin-top: 6px; font-size: 12.5px; color: var(--ink-subtle); min-height: 18px; }
.plan .btn { margin-top: 20px; }
.plan__list { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.plan__list li { display: flex; gap: 10px; font-size: 14.5px; padding: 5px 0; }
.plan__list svg { flex: none; width: 14px; height: 14px; color: var(--accent-deep); margin-top: 5px; }
.plan__list li.is-off svg { color: var(--ink-subtle); }
.plan--featured { background: linear-gradient(170deg, #172a22, #0B1512); color: var(--dark-text-soft); border-color: rgba(0, 201, 135, 0.3); }
.plan--featured .plan__tier, .plan--featured .plan__desc, .plan--featured .plan__price span, .plan--featured .plan__annual { color: var(--dark-text-subtle); }
.plan--featured .plan__price strong { color: #fff; }
.plan--featured .plan__list { border-top-color: rgba(255, 255, 255, 0.1); }
.plan--featured .plan__list svg { color: var(--accent); }
.plan--custom { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; }
.plan--custom .plan__desc { min-height: 0; max-width: 620px; }
.plan--custom .plan__price { margin-top: 0; }
.plan--custom .btn { margin-top: 0; }
.plan-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; margin-top: 24px; padding: 18px 20px; border: 1px dashed rgba(0, 201, 135, 0.45); border-radius: 16px; font-size: 14.5px; color: var(--ink-soft); }
.plan-foot strong { color: var(--accent-deep); }
.bundle { display: grid; gap: 28px; }
@media (min-width: 900px) { .bundle { grid-template-columns: 1.4fr 1fr; gap: 40px; } }
.bundle__rows { display: grid; gap: 10px; align-content: start; }
.bundle__row { display: grid; grid-template-columns: 22px 1fr; gap: 10px 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--hairline); border-radius: 14px; background: #FBFDFC; }
.bundle__row select, .bundle__row .bundle__line { grid-column: 1 / -1; }
@media (min-width: 560px) { .bundle__row { grid-template-columns: 22px 1fr 140px 150px; } .bundle__row select, .bundle__row .bundle__line { grid-column: auto; } .bundle__line { text-align: right; } }
.bundle__row input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--accent-deep); cursor: pointer; }
.bundle__row label { font-weight: 600; color: var(--ink); cursor: pointer; }
.bundle__row select { height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--hairline-strong); background: var(--white); font: inherit; font-size: 14.5px; color: var(--ink); }
.bundle__row select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.bundle__line { font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.bundle__line s { color: var(--ink-subtle); margin-right: 6px; }
.bundle__row.is-off { opacity: 0.55; }
.bundle__sum { padding: 24px; border-radius: 14px; background: var(--ivory); align-self: start; }
.bundle__totals { display: grid; gap: 10px; }
.bundle__totals > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: 14.5px; color: var(--ink-soft); }
.bundle__totals dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.bundle__total { padding-top: 12px; border-top: 1px solid var(--hairline-strong); }
.bundle__total dt { color: var(--ink); font-weight: 600; }
.bundle__total dd { font-family: var(--font-sans); font-size: 1.6rem; font-weight: 800; letter-spacing: -0.03em; }
.bundle .btn { margin-top: 16px; }
.bundle .btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.fineprint { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 20px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-subtle); }
.compare { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.compare-wrap { position: relative; overflow-x: auto; border-radius: var(--radius); }
.compare th, .compare td { padding: 14px 16px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
.compare th { font-weight: 700; color: var(--ink); background: var(--ivory); }
.compare th small strong { font-weight: inherit; }
.compare th small { display: block; font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.1em; color: var(--accent-deep); margin-top: 4px; }
.compare td:first-child { color: var(--ink); font-weight: 500; }
.compare tr.group td { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-subtle); background: #FBFDFC; padding-top: 18px; }
.compare svg { width: 16px; height: 16px; color: var(--accent-deep); }
.compare .no { color: var(--ink-subtle); }
/* On a phone the compare table is wider than its box: fade the right edge so Pro and Scale read as
   reachable, with end padding so the last column clears the fade once scrolled. */
@media (max-width: 760px) {
  .compare-wrap { padding-right: 28px; -webkit-mask-image: linear-gradient(to left, transparent, #000 28px); mask-image: linear-gradient(to left, transparent, #000 28px); }
}
/* The /seo/ demo table drops 'In sitemap' on a phone and lets its long URLs wrap, so 'Missing for' isn't cut. */
@media (max-width: 639px) {
  .missing-list th:nth-child(4), .missing-list td:nth-child(4) { display: none; }
  .missing-list th, .missing-list td { padding-inline: 4px; }
  .missing-list td:first-child { min-width: 96px; overflow-wrap: anywhere; }
  .missing-list .pill { white-space: normal; }
  .missing-list td.r { white-space: nowrap; }
}

/* prompt mix (pricing page) */

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 10px; }
.faq { background: var(--white); border: 1px solid var(--hairline); border-radius: 14px; }
.section--dark .faq { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.1); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 44px 1fr 24px; align-items: center; gap: 12px; padding: 18px 20px; font-weight: 600; color: var(--ink); font-size: 16.5px; }
.faq summary::-webkit-details-marker { display: none; }
/* The question numbers are counted, not typed. They were 01..06 written
   into the markup, so hiding one — the written-recommendations answer, while
   the module is in-house — left the list reading 01 02 03 05 06. A counter
   cannot develop a gap, and cannot be wrong after the next question is
   added or dropped either. */
.faq-list { counter-reset: faq; }
.faq { counter-increment: faq; }
.faq summary .q::before { content: counter(faq, decimal-leading-zero); }
.faq summary .q { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--accent-deep); }
.faq summary .plus { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--hairline-strong); display: grid; place-items: center; transition: transform 0.2s ease; }
.faq summary .plus svg { width: 12px; height: 12px; }
.faq[open] summary .plus { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.faq .faq-a { padding: 0 20px 20px 76px; font-size: 15.5px; color: var(--ink-body); }
.faq .faq-a p + p { margin-top: 10px; }
.section--dark .faq summary { color: var(--dark-text); }
.section--dark .faq .faq-a { color: var(--dark-text-soft); }
@media (max-width: 600px) { .faq summary { grid-template-columns: 34px 1fr 24px; } .faq .faq-a { padding-left: 20px; } }
.faq-foot { margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-subtle); }
.faq-foot a { color: var(--accent-deep); }

/* ---------- forms ---------- */
.form-card { padding: 28px; }
.form-card__head { display: flex; justify-content: flex-end; gap: 12px; margin-bottom: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); }
.form-card__head span:last-child { color: var(--ink-subtle); }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; font-size: 13px; font-weight: 500; color: var(--ink-soft); margin-bottom: 6px; }
.field input, .field select, .field textarea { width: 100%; height: 52px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--hairline-strong); background: #FBFDFC; font: inherit; font-size: 15.5px; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.field textarea { height: auto; min-height: 150px; padding: 14px 16px; resize: vertical; font: inherit; line-height: 1.5; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-subtle); }
.form-note { margin-top: 12px; font-size: 12.5px; color: var(--ink-subtle); text-align: center; }
.form-done { display: none; padding: 20px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 15px; }
form.is-done .form-done { display: block; }
form.is-done .form-fields { display: none; }
.form-inline { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 560px) { .form-inline { flex-direction: row; } .form-inline .field { flex: 1; margin: 0; } }

/* ---------- closing CTA ---------- */
.cta-band { position: relative; overflow: hidden; background: var(--ivory); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 112px 0; text-align: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 50% 40%, rgba(83, 242, 181, 0.28), transparent 70%); pointer-events: none; }
.cta-band .container { position: relative; }
.cta-band h2 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 18ch; margin: 0 auto; }
.cta-band .lede { margin: 22px auto 0; max-width: 560px; }
.cta-band .btn-row { justify-content: center; margin-top: 32px; }
.cta-band .meta { margin-top: 28px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-subtle); }

/* ---------- footer ---------- */
.footer { background: var(--dark); color: var(--dark-text-soft); padding: 72px 0 40px; }
.footer__grid { display: grid; gap: 40px; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; } }
.footer__orb { display: none; align-self: center; }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr 1.1fr; } .footer__orb { display: block; } }
.footer .brand { margin-bottom: 18px; }
.footer p { font-size: 14.5px; max-width: 42ch; }
.footer .btn-row { margin-top: 22px; }
.footer h3 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 16px; }
.footer li { margin-bottom: 10px; }
.footer li a { font-size: 15px; color: var(--dark-text-soft); }
.footer li a:hover { color: #fff; }
.footer address { font-style: normal; font-size: 14.5px; line-height: 1.6; }
.footer address a { color: var(--accent); }
.footer__bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-text-subtle); }
.footer__bottom a, .footer__bottom button { color: var(--dark-text-subtle); font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; }
.footer__bottom a:hover, .footer__bottom button:hover { color: #fff; }
.footer__bottom .links { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- cookie banner ---------- */
.cookie { position: fixed; left: 24px; bottom: 24px; z-index: 70; width: min(440px, calc(100% - 48px)); background: var(--white); border: 1px solid var(--hairline); border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(11, 21, 18, 0.35); padding: 22px 24px; display: none; }
.cookie.is-open { display: block; }
.cookie__head { display: flex; gap: 14px; align-items: flex-start; }
.cookie__icon { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; }
.cookie__icon svg { width: 18px; height: 18px; }
.cookie h3 { font-size: 16px; }
.cookie p { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
.cookie__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
/* Two equal columns need about 460px of window. Below that the card clipped
   the right-hand button, and the right-hand button is 'Reject non-essential':
   refusing has to be no harder than accepting, so they stack at the same
   width rather than one of them losing its last word. */
@media (max-width: 479px) { .cookie__btns { grid-template-columns: 1fr; } }
.cookie__btns .btn { height: 46px; }
.cookie__links { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; }
.cookie__links button { color: var(--accent-deep); font-weight: 500; }
.cookie__links a { color: var(--ink-subtle); }
.cookie__prefs { display: none; margin-top: 16px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.cookie.is-prefs .cookie__prefs { display: block; }
.cookie.is-prefs .cookie__btns, .cookie.is-prefs .cookie__links { display: none; }
.cookie__prefs label { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; font-size: 13.5px; }
.cookie__prefs label strong { display: block; color: var(--ink); font-weight: 600; }
.cookie__prefs input { margin-top: 4px; accent-color: var(--accent-deep); }
.cookie__prefs .btn { margin-top: 12px; width: 100%; height: 46px; }

/* ---------- team ---------- */
.team { display: grid; gap: 20px; }
@media (min-width: 800px) { .team { grid-template-columns: repeat(3, 1fr); } }
.person { padding: 20px; }
.person img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; }
.person h3 { margin-top: 18px; font-size: 1.25rem; }
.person .role { margin-top: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }

/* ---------- timeline (homepage) ---------- */
.timeline { display: grid; gap: 0; }
.timeline li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.timeline li:first-child { border-top: 0; }
.timeline i { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-top: 8px; box-shadow: 0 0 0 4px rgba(0, 201, 135, 0.14); }
.timeline .when { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.timeline strong { display: block; color: var(--dark-text); font-size: 15.5px; margin-top: 2px; }
.timeline span { display: block; font-size: 13.5px; color: var(--dark-text-subtle); margin-top: 2px; }

/* ---------- practice section: bento tiles ---------- */
.bento { display: grid; gap: 16px; }
@media (min-width: 900px) { .bento { grid-template-columns: repeat(12, 1fr); } .bento .span-8 { grid-column: span 8; } .bento .span-4 { grid-column: span 4; } }
.bento .card { display: flex; flex-direction: column; gap: 16px; padding: 26px 28px; }
.bento .card > p:not(.bigstat) { font-size: 15px; line-height: 1.55; color: var(--dark-text-soft); }
.bento .card > p.small { font-size: 12px; color: var(--dark-text-subtle); margin-top: auto; }
.bento .h4 { color: var(--dark-text); }
.bento .timeline li { padding: 12px 0; }
.bars--dark { gap: 12px; margin-top: 4px; }
.bars--dark .bar { color: var(--dark-text-soft); grid-template-columns: 84px 1fr 56px; }
.bars--dark .bar__track { background: rgba(255, 255, 255, 0.08); }
.bars--dark .bar .r { color: var(--dark-text); }
.bars__note { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--dark-text-subtle); margin-top: 2px; }
/* Bars carrying --w fill in when their tile is revealed; without JS they are drawn full. */
.js .bar__fill[style*="--w"] { width: 0; transition: width 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s; }
.js .is-in .bar__fill[style*="--w"], html:not(.js) .bar__fill[style*="--w"] { width: var(--w); }
@media (prefers-reduced-motion: reduce) { .js .bar__fill[style*="--w"] { transition: none; width: var(--w); } }
.bigstat { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 4px; }
.bigstat .num { font-size: 76px; line-height: 0.9; color: var(--dark-text); }
.bigstat small { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dark-text-subtle); max-width: 130px; line-height: 1.5; }
.chip--off { text-decoration: line-through; opacity: 0.5; }
/* a sample recommendation, set like a pulled quote: an ink rule, plain text, a quiet caption after it */
.rec { display: flex; flex-direction: column; gap: 8px; padding: 2px 0 2px 18px; border-left: 2px solid var(--dark-text); font-size: 15.5px; line-height: 1.55; color: var(--dark-text); }
.rec__tag { order: 2; font-size: 13px; color: var(--dark-text-subtle); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.card--soft .pill { background: rgba(255, 255, 255, 0.06); color: var(--dark-text); }
/* light variant of the tiles, for the ivory plexus section */
.bento--light .card { background: var(--white); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); color: var(--ink-body); }
.bento--light .card > p:not(.eyebrow):not(.bigstat) { color: var(--ink-body); }
.bento--light .h4 { color: var(--ink); }
.bento--light .bars--dark .bar { color: var(--ink-soft); }
.bento--light .bars--dark .bar__track { background: #E6ECE8; }
.bento--light .bars--dark .bar .r { color: var(--ink); }
.bento--light .bars__note { color: var(--ink-subtle); }
.bento--light .bigstat .num { color: var(--ink); }
.bento--light .bigstat small { color: var(--ink-subtle); }
.bento--light .timeline li { border-top-color: var(--hairline); }
.bento--light .timeline strong { color: var(--ink); }
.bento--light .timeline span { color: var(--ink-soft); }
.bento--light .timeline .when { color: var(--accent-deep); }
.bento--light .rec { color: var(--ink); border-left-color: var(--ink); }
.bento--light .rec__tag { color: var(--ink-subtle); }

/* ---------- stats strip ---------- */
.stats { display: grid; gap: 24px; }
@media (min-width: 700px) { .stats--3 { grid-template-columns: repeat(3, 1fr); } }
.stats > div { padding-left: 20px; border-left: 1px solid var(--hairline-strong); }
.stats strong { display: block; font-size: 1.8rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; }
.stats span { display: block; margin-top: 4px; font-size: 14px; color: var(--ink-soft); }

/* ---------- reveal ---------- */
.js /* Gated on a class the page only carries while JavaScript is alive. Hiding
   this unconditionally means a script that never loads leaves every
   revealed section invisible — which is most of the page. The first
   generation shipped that bug and fixed it; see the watchdog in base. */
.js-reveal [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- utilities ---------- */
.mt-0 { margin-top: 0 !important; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; } .mt-40 { margin-top: 40px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .mb-40 { margin-bottom: 40px; }
.max-60 { max-width: 60ch; } .max-70 { max-width: 70ch; }
.center { text-align: center; }
.divider { height: 1px; background: var(--hairline); margin: 64px 0; }
.section--dark .divider { background: rgba(255, 255, 255, 0.08); }
.hidden { display: none !important; }
.tag-line { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-subtle); }

/* ---------- blog: post cards ---------- */
.posts { display: grid; gap: 20px; }
@media (min-width: 700px) { .posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .posts--4 { grid-template-columns: repeat(4, 1fr); } }
.post-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; color: var(--ink-body); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.post-card:hover { transform: translateY(-2px); box-shadow: 0 24px 60px -30px rgba(11, 21, 18, 0.28); }
/* A card whose post is not written yet. It keeps the shape of the others so
   the row still reads as a row, and loses the lift on hover: nothing here
   responds to a press, and pretending otherwise is what made these read as
   broken rather than as forthcoming. */
.post-card--soon { cursor: default; }
.post-card--soon:hover { transform: none; box-shadow: none; }
.post-card__soon { margin-top: auto; padding-top: 4px; font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-subtle); }
.post-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-subtle); }
.post-card__meta em { font-style: normal; color: var(--accent-deep); }
.post-card h3, .post-card .post__title { font-size: 1.12rem; line-height: 1.3; letter-spacing: -0.015em; color: var(--ink); }
.post-card p { font-size: 15px; line-height: 1.55; flex: 1; }
.post-card .link { font-size: 14.5px; }

/* ---------- blog: article pages ---------- */
.post { max-width: 760px; }
.post__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 22px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-text-subtle); }
.post__meta em { font-style: normal; color: var(--accent); }
/* minmax(0, 1fr): an auto column grows to the widest table, which pushed
   the article past the edge on phones; the tables scroll in .table-wrap. */
.post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 1024px) { .post-layout { grid-template-columns: minmax(0, 720px) minmax(260px, 1fr); gap: 64px; align-items: start; } .post-aside { position: sticky; top: calc(var(--beta-h) + var(--header-h) + 24px); } }
.article { max-width: 720px; font-size: 17px; line-height: 1.65; color: var(--ink-body); }
.article > * + * { margin-top: 20px; }
.article h2 { font-size: 1.55rem; line-height: 1.2; margin-top: 44px; color: var(--ink); scroll-margin-top: calc(var(--beta-h) + var(--header-h) + 24px); }
.article h3 { font-size: 1.18rem; line-height: 1.3; margin-top: 30px; color: var(--ink); }
.article p, .article li { max-width: 68ch; }
.article ul, .article ol { padding-left: 22px; display: grid; gap: 8px; }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article strong { color: var(--ink); font-weight: 600; }
.article a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(4, 120, 87, 0.35); }
.article a:hover { text-decoration-color: currentColor; }
.article sup { line-height: 0; }
.article sup a { text-decoration: none; font-family: var(--font-mono); font-size: 11px; padding-left: 2px; }
.article .formula { font-family: var(--font-mono); font-size: 14.5px; line-height: 1.6; background: var(--ivory); border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 18px; overflow-x: auto; white-space: pre; }
.article table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article th, .article td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.article th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-subtle); font-weight: 500; }
.article td.r, .article th.r { text-align: right; font-variant-numeric: tabular-nums; }
.article .table-wrap { overflow-x: auto; }
.keyfacts { background: var(--ivory); border: 1px solid var(--hairline); border-radius: 16px; padding: 22px 24px; }
.keyfacts ul { list-style: none; padding: 0; display: grid; gap: 10px; margin-top: 12px; }
.keyfacts li { position: relative; padding-left: 18px; font-size: 15.5px; line-height: 1.5; }
.keyfacts li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.sources { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.sources ol { padding-left: 20px; display: grid; gap: 8px; }
.sources a { word-break: break-word; }
.toc { font-size: 14px; margin-top: 12px; }
.toc a { display: block; padding: 7px 0; color: var(--ink-soft); border-top: 1px solid var(--hairline); }
.toc a:first-child { border-top: 0; padding-top: 0; }
.toc a:hover { color: var(--ink); }
.post-aside .card--dark p { font-size: 14.5px; }
.post-aside .card--dark h3 { color: #fff; }
.update-line { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-subtle); }

/* ---------- blog post hero illustration ---------- */
.post-hero { display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) { .post-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; } }
.post-art { background: linear-gradient(160deg, #172a22, #0e1f19); border: 1px solid var(--dark-hairline); border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); padding: 18px 22px 20px; color: var(--dark-text-soft); font-size: 13px; }
.post-art__head { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 12.5px; color: var(--dark-text-subtle); }
.post-art__head strong { color: var(--dark-text); font-weight: 500; }
.post-art__foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; line-height: 1.5; color: var(--dark-text-subtle); }
.post-art__foot b { color: var(--dark-text); font-weight: 500; }
.post-art .bars--dark .bar { grid-template-columns: 78px 1fr 52px; }
.post-art .bar--total { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--dark-text); }
/* a results page next to an answer */
.rvc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rvc__label { font-size: 12px; color: var(--dark-text-subtle); margin-bottom: 10px; }
.serp { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.serp li { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid transparent; }
.serp i { width: 12px; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); }
.serp b { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); width: var(--w); }
.serp em { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--dark-text-subtle); white-space: nowrap; }
.serp .you { background: rgba(0, 201, 135, 0.1); border-color: rgba(0, 201, 135, 0.4); }
.serp .you i, .serp .you b { background: var(--accent); }
.serp .you em { color: var(--accent); }
.answer { display: grid; gap: 8px; padding: 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.answer > span { display: block; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.14); width: var(--w); }
.answer p { font-size: 12.5px; line-height: 1.5; color: var(--dark-text-soft); margin: 2px 0; }
.answer mark { background: none; color: var(--dark-text); font-weight: 500; }
.answer mark.you { color: var(--accent); }
.answer sup { font-family: var(--font-mono); font-size: 9px; color: var(--dark-text-subtle); }
/* three markets, three prompts */
.mkts { display: grid; gap: 10px; }
.mkt { display: grid; gap: 8px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); }
.mkt__where { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--dark-text-subtle); }
.mkt__where em { font-style: normal; color: var(--accent); }
.mkt__where em.off { color: var(--dark-text-subtle); }
.mkt__q { font-size: 12.5px; line-height: 1.45; color: var(--dark-text); }
.mkt__list { display: flex; flex-wrap: wrap; gap: 6px; }
.mkt__list span { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); color: var(--dark-text-soft); }
.mkt__list .you { border-color: rgba(0, 201, 135, 0.5); background: rgba(0, 201, 135, 0.1); color: var(--accent); }
/* one month of runs, one square per answer */
.runs { display: grid; gap: 12px; }
.run { display: grid; grid-template-columns: 78px 1fr 44px; align-items: center; gap: 12px; }
.run__name { font-size: 12.5px; color: var(--dark-text-soft); }
.run__dots { display: grid; grid-template-columns: repeat(20, 1fr); gap: 4px; }
.run__dots i { display: block; aspect-ratio: 1; border-radius: 3px; background: rgba(255, 255, 255, 0.1); }
.run__dots .on { background: var(--accent); }
.run__n { text-align: right; font-family: var(--font-mono); font-size: 12px; color: var(--dark-text); font-variant-numeric: tabular-nums; }

/* ---------- blog article furniture: definition, charts, stats, callouts, steps ---------- */
.article .definition { padding: 18px 22px; border-left: 3px solid var(--ink); background: var(--ivory); border-radius: 0 12px 12px 0; font-size: 16.5px; color: var(--ink); max-width: none; }
.article .chart { background: var(--ivory); border: 1px solid var(--hairline); border-radius: 16px; padding: 20px 22px; margin-top: 28px; }
.article .chart__title { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; max-width: none; }
.article .chart__sub { font-size: 13px; color: var(--ink-soft); margin-top: 3px; max-width: none; }
.article .chart .bars { margin-top: 16px; gap: 10px; }
.article .chart .bar { grid-template-columns: minmax(96px, 168px) 1fr 58px; font-size: 14px; color: var(--ink-body); }
.article .chart .bar__track { background: #E3E9E5; }
.article .chart .bar .r { color: var(--ink); }
.article .chart__note { font-size: 12.5px; color: var(--ink-subtle); margin-top: 12px; line-height: 1.5; max-width: none; }
.article .stats { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 640px) { .article .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.article .stat { padding: 18px 20px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--white); box-shadow: var(--shadow-card); }
.article .stat strong { display: block; font-size: 32px; line-height: 1; letter-spacing: -0.03em; color: var(--ink); font-weight: 600; }
.article .stat span { display: block; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft); margin-top: 8px; }
.article .callout { padding: 20px 24px; background: var(--ivory); border-radius: 14px; border-left: 3px solid var(--ink); margin-top: 28px; }
.article .callout__label { font-size: 13px; color: var(--ink-subtle); margin-bottom: 6px; }
.article .callout p { font-size: 16px; color: var(--ink); max-width: none; }
.article .callout p + p { margin-top: 10px; }
.article .steps { list-style: none; padding: 0; counter-reset: step; display: grid; gap: 12px; margin-top: 24px; }
.article .steps li { position: relative; padding: 16px 20px 16px 62px; border: 1px solid var(--hairline); border-radius: 14px; background: var(--white); max-width: none; counter-increment: step; font-size: 16px; }
.article .steps li::before { content: counter(step, decimal-leading-zero); position: absolute; left: 20px; top: 17px; font-family: var(--font-mono); font-size: 13px; color: var(--accent-deep); }
.article .table-wrap + .chart, .article .table-wrap + .stats { margin-top: 24px; }
@media (max-width: 640px) { .article .stat strong { font-size: 28px; } .rvc { grid-template-columns: 1fr; } }
/* On a phone the label sits above its bar, so the bar keeps the width of the chart. */
@media (max-width: 520px) { .article .chart .bar { grid-template-columns: minmax(0, 1fr) 52px; row-gap: 6px; } .article .chart .bar > span:first-child { grid-column: 1 / -1; } }

/* /ai/ hero: the four assistant marks. Monochrome on purpose; the names carry the identity. */
.engines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.engine { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); }
.engine__mark { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.07); color: var(--dark-text); }
.engine__mark svg { width: 24px; height: 24px; fill: currentColor; }
.engine strong { display: block; font-size: 15.5px; font-weight: 600; color: var(--dark-text); letter-spacing: -0.01em; }
.engine strong + span { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark-text-soft); }
@media (max-width: 440px) { .engines { grid-template-columns: 1fr; } }
/* in the narrow column of a .split the four tiles stack until there is room for two */
@media (min-width: 900px) and (max-width: 1140px) { .split .engines { grid-template-columns: 1fr; } }
.engine--chatgpt .engine__mark { color: #10A37F; background: rgba(16, 163, 127, 0.16); }
.engine--claude .engine__mark { color: #E98A6B; background: rgba(233, 138, 107, 0.16); }
.engine--gemini .engine__mark { background: rgba(155, 114, 203, 0.16); }
.engine--perplexity .engine__mark { color: #3FB6C6; background: rgba(63, 182, 198, 0.16); }
/* /ai/ "What this cannot tell you": four limits as a dashed list instead of four paragraphs. */


/* ---------- footer orb: engine tiles turning in 3D, ported from the live site ----------
   preserve-3d runs unbroken from the perspective owner to the node carrying the depth, or the
   depths flatten. The arm seats a tile at its angle, the seat pushes it toward or away from the
   viewer, the upright undoes the ring's turn so the logo never reads upside down, the bob adds
   a screen-vertical drift with its own period and phase per tile. */
.orb { position: relative; width: 100%; max-width: 260px; aspect-ratio: 1; perspective: 900px; margin: 0 auto; }
.orb__stage, .orb__ring, .orb__arm, .orb__seat { transform-style: preserve-3d; }
.orb__stage { position: absolute; inset: 0; transform: rotateX(var(--orb-x, 0deg)) rotateY(var(--orb-y, 0deg)); transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); }
.orb__glow, .orb__track { pointer-events: none; position: absolute; left: 50%; top: 50%; translate: -50% -50%; border-radius: 50%; }
.orb__glow { width: 54%; height: 54%; background: rgba(0, 201, 135, 0.25); filter: blur(64px); }
.orb__track { width: 80%; height: 80%; border: 1px dashed rgba(0, 201, 135, 0.16); }
.orb__ring { position: absolute; inset: 0; animation: orb-turn 26s linear infinite; }
.orb__arm { position: absolute; inset: 0; transform: rotate(var(--a, 0deg)); }
.orb__seat { position: absolute; left: 50%; translate: -50%; rotate: calc(var(--a, 0deg) * -1); transform: translateZ(var(--z, 0px)); }
.orb__upright { height: 100%; width: 100%; animation: orb-unspin 26s linear infinite; }
.orb__bob { height: 100%; width: 100%; animation-name: orb-bob; animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.orb__tile { display: grid; place-items: center; height: 100%; width: 100%; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(12, 26, 22, 0.9); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.9); backdrop-filter: blur(8px); transition: border-color 0.2s ease; }
.orb__tile:hover { border-color: rgba(0, 201, 135, 0.6); }
.orb__tile svg { width: 50%; height: 50%; }
.orb__mark { position: absolute; left: 50%; top: 50%; width: 24%; height: 24%; translate: -50% -50%; transform: translateZ(70px); border-radius: 16px; box-shadow: 0 18px 44px -14px rgba(0, 201, 135, 0.7); animation: orb-pulse 3.2s ease-in-out infinite; }
.orb__mark svg { display: block; width: 100%; height: 100%; }
@keyframes orb-bob { 0%, 50%, 100% { translate: 0 0; } 25% { translate: 0 calc(var(--drift, 6px) * -1); } 75% { translate: 0 calc(var(--drift, 6px) * 0.6); } }
@keyframes orb-turn { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes orb-unspin { from { rotate: 0deg; } to { rotate: -360deg; } }
@keyframes orb-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
@media (prefers-reduced-motion: reduce) { .orb__ring, .orb__upright, .orb__bob, .orb__mark { animation: none; } .orb__stage { transform: none; transition: none; } }

/* /brand/ share-of-search chart: hover crosshair and tooltip (site.js, guard "sos"). */
.chart--sos { touch-action: pan-y; cursor: crosshair; }
.chart--sos .chart__hover[hidden] { display: none; }
.chart--sos .chart__tip rect { filter: drop-shadow(0 6px 16px rgba(11, 21, 18, 0.12)); }

/* ---------- performance card: a title, a link, one or two metrics with a swatch, a smooth line with a soft fill, dates along the bottom ---------- */
.perf__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.perf__head strong { font-size: 13.5px; }
.perf__link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--accent-ink); }
.perf__link svg { width: 12px; height: 12px; }
.perf__metrics { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 12px; }
.perf__metric { display: flex; align-items: baseline; gap: 8px; }
.perf__metric i { align-self: center; width: 10px; height: 10px; border-radius: 3px; background: var(--accent); }
.perf__metric i.ink { background: var(--ink); }
.perf__metric strong { font-family: var(--font-sans); font-size: 1.35rem; letter-spacing: -0.03em; font-weight: 700; color: var(--ink); }
.perf__metric span { font-size: 12px; color: var(--ink-subtle); }
.perf__chart { display: block; width: 100%; height: auto; margin-top: 10px; }
.perf--sm .perf__metrics { margin-top: 6px; }
.perf--sm .perf__metric strong { font-size: 1.15rem; }
.perf--sm .perf__chart { margin-top: 4px; }

/* ── Plan enquiry dialog ──────────────────────────────────────────────────
   Shown in place of the checkout while Paddle is unverified. Sized and
   coloured from the same tokens as the cards, so it reads as part of the
   page rather than as a browser default. */
.enquiry { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 0; border-radius: var(--radius); background: transparent;
  overflow: visible; color: var(--ink-body); }
.enquiry::backdrop { background: rgba(11, 21, 18, 0.55); backdrop-filter: blur(3px); }
.enquiry__card { padding: 28px; border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--hairline); box-shadow: 0 40px 90px -40px rgba(11, 21, 18, 0.5);
  max-height: calc(100dvh - 32px); overflow-y: auto; }
.enquiry__head { display: flex; align-items: start; justify-content: space-between; gap: 16px; }
.enquiry__head h2 { font-size: 20px; line-height: 1.2; }
.enquiry__close { display: grid; place-items: center; width: 32px; height: 32px;
  flex: none; border-radius: 999px; color: var(--ink-subtle); cursor: pointer; }
.enquiry__close:hover { background: var(--ivory); color: var(--ink); }
.enquiry__close svg { width: 16px; height: 16px; }
.enquiry__lede { margin-top: 10px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.enquiry .form-fields { margin-top: 20px; }