/* * Extlytics — WaaFaa product page stylesheet. * * One file, one page. No build step, no dependency, and nothing is fetched: not a * webfont, not a beacon, not a CDN. The product's argument is about what leaves a * browser and what is never stored, and a page making that argument while calling * three third parties is making it badly. * * ── The palette is the product's own ───────────────────────────────────────────── * * Every colour is lifted from `site/assets/site.css`, not invented for this page. * `--ex-pine` is the product's `--accent`; `--ex-signal` is the terracotta it reserves * for refusals and absences, and it appears here in exactly the same role — the thing * Extlytics will not do, and the number it does not have. * * ── Type ───────────────────────────────────────────────────────────────────────── * * A tight sans for display and a mono for anything a developer would recognise as * code, a size, or a figure. There is no serif: this is a page about an SDK, and the * mono is what carries the specificity — `1.8 KB`, `v1/events`, `stateless`. * * ── Theme ──────────────────────────────────────────────────────────────────────── * * `data-ex-theme` on is the resolved theme ("light" or "dark"); * `data-ex-theme-choice` records what the user picked, which may be "auto". script.js * owns both, and nothing here reads prefers-color-scheme directly, so the toggle wins * in every direction. */ :root { /* Neutrals — the product's warm-stone ramp, opened out for a full-width page. */ --ex-bg: #f4f5f2; --ex-surface: #ffffff; --ex-surface-2: #eaece7; --ex-surface-3: #e0e3dc; --ex-border: #dcdfd9; --ex-border-strong: #c3c8bf; --ex-text: #0f1815; --ex-heading: #0a110f; --ex-muted: #5b6661; /* Semantic — all four are `site/assets/site.css` values. */ --ex-pine: #174a3e; --ex-pine-hover: #0f382e; --ex-pine-soft: #e3ede9; --ex-mint: #2f7a64; /* * Reserved for refusals and absences, exactly as the product reserves it. It is not * a decorative second colour and it appears nowhere that is merely emphatic. */ --ex-signal: #8f3f2b; --ex-signal-soft: #f7ebe7; --ex-link: #14453a; --ex-link-hover: #0f382e; /* The dark band inverts against the page in BOTH themes — it is the page's one change of ground, and a band that stops inverting in dark mode stops being one. */ --ex-band: #0c1310; --ex-band-surface: #141c18; --ex-band-border: #253430; --ex-band-text: #eef1ed; --ex-band-muted: #93a09a; --ex-band-accent: #74c2a8; --ex-shadow: 0 22px 60px rgba(12, 32, 26, 0.1); --ex-shadow-soft: 0 12px 34px rgba(12, 32, 26, 0.07); --ex-shadow-inset: inset 0 0 0 1px var(--ex-border); --ex-radius: 14px; --ex-radius-sm: 9px; --ex-radius-lg: 20px; --ex-container: 1180px; --ex-header-h: 68px; --ex-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif; --ex-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; } .ex-page[data-ex-theme='dark'] { --ex-bg: #0d1211; --ex-surface: #141a18; --ex-surface-2: #1b2320; --ex-surface-3: #222b28; --ex-border: #262e2b; --ex-border-strong: #3a4541; --ex-text: #eef1ed; --ex-heading: #ffffff; --ex-muted: #98a29d; --ex-pine: #6fbfa5; --ex-pine-hover: #8bd0ba; --ex-pine-soft: #16261f; --ex-mint: #8bd0ba; --ex-signal: #dc9377; --ex-signal-soft: #2a1c17; --ex-link: #8bd0ba; --ex-link-hover: #a7ddcb; --ex-shadow: 0 22px 60px rgba(0, 0, 0, 0.5); --ex-shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.34); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } .ex-page { margin: 0; /* 320px is the narrowest width this page is checked at, and nothing may overflow it. */ min-width: 320px; overflow-x: hidden; background: var(--ex-bg); color: var(--ex-text); font-family: var(--ex-sans); font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* The only decorative colour on the page: two faint washes at the top shoulders. Everything else that is coloured is a signal. */ .ex-page::before { content: ''; position: absolute; inset: 0 0 auto; height: 820px; z-index: -1; pointer-events: none; background: radial-gradient(circle at 12% 0%, rgba(23, 74, 62, 0.1), transparent 26rem), radial-gradient(circle at 88% 5%, rgba(23, 74, 62, 0.06), transparent 22rem); } .ex-page[data-ex-theme='dark']::before { background: radial-gradient(circle at 12% 0%, rgba(111, 191, 165, 0.14), transparent 26rem), radial-gradient(circle at 88% 5%, rgba(111, 191, 165, 0.07), transparent 22rem); } /* * A reset, so it must not win anything. Written as `.ex-page a` this scores (0,1,1) and * quietly beats every single-class component rule at (0,1,0) — which is how a primary * button ends up with the page's text colour on a pine fill. `:where()` scores zero. */ :where(.ex-page a) { color: inherit; text-decoration: none; } :where(.ex-page h1, .ex-page h2, .ex-page h3, .ex-page h4) { color: var(--ex-heading); margin: 0; text-wrap: balance; } :where(.ex-page p, .ex-page ul, .ex-page ol) { margin: 0; } /* * `figure` and `blockquote` carry a UA default of `margin: 1em 40px`, and every one of * them here is a layout box — a grid item, or a card in a row. Unreset, the hero panel * stopped 40px short of the container it was supposed to align with, and the two quote * cards sat 40px inside their own grid cells, which put 98px between them where the * grid says 18px. Nothing looked broken; everything was just slightly wrong. */ :where(.ex-page figure, .ex-page blockquote) { margin: 0; } .ex-page h1 { /* * 3.5rem is the ceiling the other WaaFaa product pages use, and this one was set to * 3.9 — 62px against their 56 — which is why it read as shouting rather than as * confident. The floor and the slope come down with it so the curve between them * stays smooth rather than flattening early. */ font-size: clamp(2.2rem, 1.25rem + 3vw, 3.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; } .ex-page h2 { font-size: clamp(1.7rem, 1.15rem + 1.8vw, 2.45rem); font-weight: 700; line-height: 1.12; letter-spacing: -0.026em; } .ex-page h3 { font-size: 1.0625rem; font-weight: 680; line-height: 1.34; letter-spacing: -0.01em; } /* ───────────────────────────────────────────────────────────────────── structure ── */ .ex-container { width: min(calc(100% - 48px), var(--ex-container)); margin-inline: auto; } /* Reachable by keyboard, invisible until it has focus. */ .ex-skip { position: absolute; left: 16px; top: -80px; z-index: 60; padding: 12px 20px; border-radius: 10px; color: #ffffff; background: #0f382e; font-weight: 750; transition: top 0.2s ease; } .ex-skip:focus { top: 16px; } /* One visible focus ring for the whole page, on the token rather than per component. */ .ex-page :focus-visible { outline: 2px solid var(--ex-pine); outline-offset: 3px; border-radius: 4px; } .ex-section { padding-block: 82px; /* Clears the sticky header when the nav jumps here. */ scroll-margin-top: calc(var(--ex-header-h) + 16px); } .ex-section-alt { background: var(--ex-surface-2); border-block: 1px solid var(--ex-border); } .ex-section-tight { padding-block: 54px; } /* * The inverted band. Its tokens are remapped once here rather than overridden per * component — otherwise a card inside it keeps the page's text colour and renders * light on light, which is a bug somebody always finds in the wrong theme. */ .ex-band { position: relative; isolation: isolate; overflow: hidden; background: var(--ex-band); --ex-surface: var(--ex-band-surface); --ex-surface-2: #1a231f; --ex-surface-3: #212c27; --ex-border: var(--ex-band-border); --ex-border-strong: #35473f; --ex-text: var(--ex-band-text); --ex-heading: #ffffff; --ex-muted: var(--ex-band-muted); --ex-pine: var(--ex-band-accent); --ex-pine-soft: #16261f; --ex-signal: #dc9377; --ex-signal-soft: #2a1c17; --ex-shadow-inset: inset 0 0 0 1px var(--ex-band-border); color: var(--ex-band-text); } /* A grid, lit by a glow. Both decorative, both behind everything, both aria-hidden. */ .ex-band::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(to right, rgba(116, 194, 168, 0.07) 1px, transparent 1px), linear-gradient(to bottom, rgba(116, 194, 168, 0.07) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(72% 62% at 50% 0%, #000 0%, transparent 78%); } .ex-band::after { content: ''; position: absolute; inset: -40% 0 auto; height: 620px; z-index: -1; pointer-events: none; background: radial-gradient(52% 54% at 50% 50%, rgba(116, 194, 168, 0.2), transparent 70%); } .ex-section-head { display: flex; flex-direction: column; gap: 14px; max-width: 62ch; margin-bottom: 44px; } .ex-lede { max-width: 62ch; color: var(--ex-muted); font-size: 1.0625rem; } .ex-eyebrow { display: inline-flex; /* Top, not centre: on a phone this wraps to two lines, and an icon floating halfway down the pair reads as a mistake. */ align-items: flex-start; gap: 8px; color: var(--ex-pine); font-family: var(--ex-mono); font-size: 0.75rem; font-weight: 620; letter-spacing: 0.1em; text-transform: uppercase; } .ex-eyebrow svg { width: 15px; height: 15px; flex: none; margin-top: 2px; } .ex-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .ex-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } /* ────────────────────────────────────────────────────────────────────── controls ── */ .ex-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 22px; border: 1px solid transparent; border-radius: 11px; font-size: 0.9375rem; font-weight: 660; letter-spacing: -0.006em; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease; } .ex-button svg { width: 18px; height: 18px; flex: none; } /* * The primary fill is the LIGHT-mode pine in both themes, with its own foreground. In * dark mode `--ex-pine` is the lifted mint (#6fbfa5) and white on it is 2.2:1 — far * under the floor — so the dark button takes near-black type on mint instead. The * product's own buttons split the same two tokens for the same reason. */ .ex-button-primary { background: #174a3e; color: #ffffff; } .ex-button-primary:hover { background: var(--ex-pine-hover); color: #ffffff; transform: translateY(-1px); } .ex-page[data-ex-theme='dark'] .ex-button-primary, .ex-band .ex-button-primary { background: #6fbfa5; color: #08201a; } .ex-page[data-ex-theme='dark'] .ex-button-primary:hover, .ex-band .ex-button-primary:hover { background: #8bd0ba; color: #08201a; } .ex-button-secondary { background: var(--ex-surface); border-color: var(--ex-border-strong); color: var(--ex-text); } .ex-button-secondary:hover { border-color: var(--ex-pine); color: var(--ex-pine); transform: translateY(-1px); } .ex-actions { display: flex; flex-wrap: wrap; gap: 12px; } .ex-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ex-border); border-radius: 10px; background: var(--ex-surface); color: var(--ex-muted); cursor: pointer; transition: color 0.16s ease, border-color 0.16s ease; } .ex-icon-button svg { width: 19px; height: 19px; } .ex-icon-button:hover { border-color: var(--ex-border-strong); color: var(--ex-text); } .ex-pill { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--ex-pine-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ex-pine) 26%, transparent); color: var(--ex-pine); font-size: 0.75rem; font-weight: 680; letter-spacing: 0.01em; } .ex-pill svg { width: 14px; height: 14px; flex: none; } /* A pulse that says "in progress" without shouting. It is the only motion on the page that is not a reveal, and reduced-motion switches it off with everything else. */ .ex-dot { width: 8px; height: 8px; flex: none; border-radius: 999px; background: currentColor; animation: ex-pulse 2.4s ease-in-out infinite; } @keyframes ex-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ──────────────────────────────────────────────────────────────────── status bar ── */ /* * The one thing a visitor has to leave with, and it sits above everything else on the * page rather than being discovered halfway down it. Extlytics is not on sale, and a * product page that lets somebody read nine sections before saying so has wasted their * time and spent trust it will need later. */ .ex-status { position: relative; z-index: 45; background: var(--ex-band); color: var(--ex-band-text); border-bottom: 1px solid var(--ex-band-border); } .ex-status-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding-block: 11px; font-size: 0.8125rem; } .ex-status-tag { display: inline-flex; align-items: center; gap: 8px; padding: 3px 11px; border-radius: 999px; background: rgba(116, 194, 168, 0.14); box-shadow: inset 0 0 0 1px rgba(116, 194, 168, 0.32); color: var(--ex-band-accent); font-family: var(--ex-mono); font-size: 0.75rem; font-weight: 620; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .ex-status-text { color: var(--ex-band-muted); min-width: 0; } .ex-status-text strong { color: var(--ex-band-text); font-weight: 620; } .ex-status-link { margin-left: auto; color: var(--ex-band-accent); font-weight: 620; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; } /* ─────────────────────────────────────────────────────────────────────── header ── */ .ex-header { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(150%) blur(14px); background: color-mix(in srgb, var(--ex-bg) 86%, transparent); border-bottom: 1px solid var(--ex-border); } .ex-header-inner { display: flex; align-items: center; gap: 24px; height: var(--ex-header-h); } .ex-brand { display: inline-flex; align-items: center; gap: 11px; flex: none; } .ex-brand img { border-radius: 9px; } .ex-brand-name { font-size: 1.125rem; font-weight: 720; line-height: 1.2; letter-spacing: -0.024em; color: var(--ex-heading); } .ex-nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; } .ex-nav a { padding: 8px 12px; border-radius: 8px; color: var(--ex-muted); font-size: 0.9375rem; font-weight: 540; transition: color 0.16s ease; } .ex-nav a:hover, .ex-nav a.is-active { color: var(--ex-text); background: var(--ex-surface-2); } .ex-header-actions { display: flex; align-items: center; gap: 10px; flex: none; } .ex-header-cta { padding: 10px 17px; font-size: 0.875rem; } .ex-menu-toggle { display: none; } .ex-mobile-nav { border-top: 1px solid var(--ex-border); background: var(--ex-surface); padding-block: 12px 18px; max-height: calc(100vh - var(--ex-header-h)); max-height: calc(100dvh - var(--ex-header-h)); overflow-y: auto; /* Reaching the end of the sheet must not start scrolling the page behind it. */ overscroll-behavior: contain; } .ex-mobile-nav ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; } .ex-mobile-nav a { display: block; padding: 13px 12px; border-radius: 10px; color: var(--ex-text); font-weight: 600; } .ex-mobile-nav a:hover { background: var(--ex-surface-2); } .ex-mobile-nav .ex-button { margin-top: 8px; width: 100%; } /* ───────────────────────────────────────────────────────────────────────── hero ── */ .ex-hero { position: relative; padding-block: 70px 82px; } .ex-hero-grid { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: 52px; } .ex-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; /* A grid item defaults to min-width:auto, which resolves to min-content — one long unbreakable word then sets the width of the whole column. */ min-width: 0; } .ex-hero-copy h1 em { display: block; font-style: normal; color: var(--ex-pine); } .ex-hero-text { max-width: 48ch; color: var(--ex-muted); font-size: 1.125rem; } .ex-hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 0; margin-top: 2px; } .ex-hero-facts li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 8px; background: var(--ex-surface); box-shadow: var(--ex-shadow-inset); color: var(--ex-muted); font-size: 0.8125rem; } .ex-hero-facts b { color: var(--ex-text); font-family: var(--ex-mono); font-size: 0.8125rem; font-weight: 620; } .ex-hero-facts svg { width: 15px; height: 15px; flex: none; color: var(--ex-pine); } /* ────────────────────────────────────────────────────────────── the hero figure ── */ /* * The product, drawn rather than photographed. Real markup and hand-authored SVG: it * costs no request, stays sharp at any density, reflows on a phone, and is read * correctly by a screen reader. A charting library would outweigh the 1.8 KB SDK this * page is selling by more than twenty times, which is not an argument to hand a * sceptical reader. */ .ex-figure { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .ex-panel { min-width: 0; overflow: hidden; border-radius: var(--ex-radius-lg); background: var(--ex-surface); box-shadow: var(--ex-shadow-inset), var(--ex-shadow); } .ex-panel-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--ex-border); background: var(--ex-surface-2); } .ex-panel-title { display: inline-flex; align-items: center; gap: 9px; font-size: 0.875rem; font-weight: 680; color: var(--ex-heading); } .ex-panel-title svg { width: 17px; height: 17px; flex: none; color: var(--ex-pine); } .ex-panel-meta { color: var(--ex-muted); font-family: var(--ex-mono); font-size: 0.75rem; letter-spacing: 0.02em; white-space: nowrap; } .ex-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--ex-border); } .ex-stat { display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; min-width: 0; } .ex-stat + .ex-stat { border-left: 1px solid var(--ex-border); } .ex-stat-label { color: var(--ex-muted); font-size: 0.75rem; font-weight: 640; letter-spacing: 0.07em; text-transform: uppercase; } .ex-stat-value { font-family: var(--ex-mono); font-size: 1.5rem; font-weight: 640; line-height: 1.15; letter-spacing: -0.02em; color: var(--ex-heading); font-variant-numeric: tabular-nums; } .ex-stat-value.is-live { color: var(--ex-pine); } .ex-stat-value.is-gap { color: var(--ex-signal); } .ex-stat-note { color: var(--ex-muted); font-size: 0.75rem; line-height: 1.35; } .ex-chart { position: relative; padding: 18px 18px 12px; } .ex-chart svg { display: block; width: 100%; height: auto; } .ex-chart-axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--ex-muted); font-family: var(--ex-mono); font-size: 0.75rem; } .ex-chart-axis b { color: var(--ex-text); font-weight: 620; } .ex-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0 18px 18px; color: var(--ex-muted); font-size: 0.75rem; } .ex-legend span { display: inline-flex; align-items: center; gap: 7px; } .ex-legend i { width: 14px; height: 3px; flex: none; border-radius: 2px; background: var(--ex-pine); } .ex-legend i.is-dim { background: var(--ex-border-strong); } .ex-legend i.is-gap { height: 10px; width: 10px; border-radius: 3px; background: color-mix(in srgb, var(--ex-signal) 30%, transparent); box-shadow: inset 0 0 0 1px var(--ex-signal); } .ex-figcaption { color: var(--ex-muted); font-size: 0.75rem; line-height: 1.5; } /* ───────────────────────────────────────────────────────────────────── components ── */ .ex-card { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: var(--ex-radius); background: var(--ex-surface); box-shadow: var(--ex-shadow-inset); min-width: 0; } .ex-card p { color: var(--ex-muted); font-size: 0.9375rem; } .ex-card-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ex-pine-soft); color: var(--ex-pine); } .ex-card-icon svg { width: 19px; height: 19px; } /* A quotation with an attributable source. Every claim on this page has a receipt, and these are two of them, so they are set apart rather than woven into a paragraph. */ .ex-quote { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--ex-radius); background: var(--ex-surface); box-shadow: var(--ex-shadow-inset); border-left: 3px solid var(--ex-pine); min-width: 0; } .ex-quote-kind { color: var(--ex-pine); font-family: var(--ex-mono); font-size: 0.75rem; font-weight: 620; letter-spacing: 0.09em; text-transform: uppercase; } .ex-quote blockquote { margin: 0; color: var(--ex-heading); font-size: 1.0625rem; line-height: 1.45; letter-spacing: -0.012em; } .ex-quote figcaption { display: flex; flex-direction: column; gap: 2px; color: var(--ex-muted); font-size: 0.8125rem; } .ex-quote figcaption b { color: var(--ex-text); font-weight: 640; } /* The numbered steps. The number is a box, not a floating glyph, so a wrapped heading beside it still lines up against something. */ .ex-steps { /* * An

 sets the width of the whole grid and pushes the page into horizontal
 * scroll at 375px — the classic way a code sample breaks a landing page on a phone.
 */
.ex-code-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ex-code pre {
  margin: 0;
  padding: 18px 16px;
  font-family: var(--ex-mono);
  font-size: 0.8125rem;
  line-height: 1.75;
  tab-size: 2;
}

.ex-code .c {
  color: var(--ex-muted);
}

.ex-code .k {
  color: var(--ex-pine);
}

.ex-code .s {
  color: var(--ex-signal);
}

/* Two columns of promises: what is collected, and what never is. The second is the
   product, so it gets the same weight rather than a footnote. */
.ex-promise {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border-radius: var(--ex-radius);
  background: var(--ex-surface);
  box-shadow: var(--ex-shadow-inset);
  min-width: 0;
}

.ex-promise > p {
  color: var(--ex-muted);
  font-size: 0.8125rem;
}

.ex-promise ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.ex-promise li {
  display: flex;
  gap: 11px;
  color: var(--ex-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ex-promise li svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 3px;
}

.ex-promise-yes li svg {
  color: var(--ex-pine);
}

.ex-promise-no li svg {
  color: var(--ex-signal);
}

.ex-promise-note {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--ex-border);
  color: var(--ex-muted);
  font-size: 0.8125rem;
}

/* The gates table — four rows, each a claim that CI enforces. */
.ex-table-scroll {
  overflow-x: auto;
  border-radius: var(--ex-radius);
  background: var(--ex-surface);
  box-shadow: var(--ex-shadow-inset);
}

.ex-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.ex-table th,
.ex-table td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--ex-border);
}

.ex-table thead th {
  color: var(--ex-muted);
  font-size: 0.75rem;
  font-weight: 660;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ex-table tbody th {
  color: var(--ex-heading);
  font-weight: 640;
  white-space: nowrap;
}

.ex-table tbody th code,
.ex-table code {
  font-family: var(--ex-mono);
  font-size: 0.8125rem;
  color: var(--ex-pine);
}

.ex-table td {
  color: var(--ex-muted);
}

.ex-table tbody tr:last-child th,
.ex-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Plans. Neither is purchasable yet, and the card says so rather than showing a
   button that goes nowhere. */
.ex-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.ex-plan {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 26px;
  border-radius: var(--ex-radius);
  background: var(--ex-surface);
  box-shadow: var(--ex-shadow-inset);
  min-width: 0;
}

.ex-plan-featured {
  box-shadow: inset 0 0 0 2px var(--ex-pine);
}

.ex-plan-name {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ex-plan-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--ex-mono);
  font-size: 2.1rem;
  font-weight: 640;
  letter-spacing: -0.03em;
  color: var(--ex-heading);
}

.ex-plan-price small {
  font-family: var(--ex-sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ex-muted);
}

.ex-plan ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: var(--ex-muted);
  font-size: 0.9375rem;
}

.ex-plan li {
  display: flex;
  gap: 10px;
}

.ex-plan li svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 4px;
  color: var(--ex-pine);
}

.ex-plan-foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ex-border);
  color: var(--ex-muted);
  font-size: 0.8125rem;
}

/* The roadmap. Shipped, building, next — with the honest one last and not hidden. */
.ex-phases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.ex-phase {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border-radius: var(--ex-radius);
  background: var(--ex-surface);
  box-shadow: var(--ex-shadow-inset);
  min-width: 0;
}

.ex-phase-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--ex-mono);
  font-size: 0.75rem;
  font-weight: 620;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ex-phase-done .ex-phase-tag {
  background: var(--ex-pine-soft);
  color: var(--ex-pine);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ex-pine) 28%, transparent);
}

.ex-phase-now .ex-phase-tag {
  background: color-mix(in srgb, var(--ex-signal) 10%, var(--ex-surface));
  color: var(--ex-signal);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ex-signal) 30%, transparent);
}

.ex-phase ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--ex-muted);
  font-size: 0.9375rem;
}

.ex-phase li {
  display: flex;
  gap: 10px;
}

.ex-phase li svg {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 4px;
  color: var(--ex-muted);
}

.ex-phase-done li svg {
  color: var(--ex-pine);
}

/* The FAQ. A  so it works with no script at all. */
.ex-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 18px;
  align-items: start;
}

.ex-faq-item {
  border-radius: var(--ex-radius);
  background: var(--ex-surface);
  box-shadow: var(--ex-shadow-inset);
  min-width: 0;
}

.ex-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  color: var(--ex-heading);
  font-size: 0.9375rem;
  font-weight: 640;
}

.ex-faq-item summary::-webkit-details-marker {
  display: none;
}

.ex-faq-item summary::after {
  content: '+';
  flex: none;
  color: var(--ex-pine);
  font-family: var(--ex-mono);
  font-size: 1.15rem;
  line-height: 1;
}

.ex-faq-item[open] summary::after {
  content: '\2212';
}

.ex-faq-item p {
  padding: 0 20px 20px;
  color: var(--ex-muted);
  font-size: 0.9375rem;
}

/* The closing call to action, on the band. */
.ex-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  text-align: center;
}

.ex-cta p {
  max-width: 54ch;
  color: var(--ex-band-muted);
  font-size: 1.0625rem;
}

.ex-cta-note {
  color: var(--ex-band-muted);
  font-size: 0.8125rem;
}

/* ─────────────────────────────────────────────────────────────────────── footer ── */

.ex-footer {
  position: relative;
  padding-block: 54px 24px;
  border-top: 1px solid var(--ex-border);
  background: var(--ex-surface-2);
}

.ex-footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 34px;
}

.ex-footer-brand p {
  margin-top: 14px;
  max-width: 42ch;
  color: var(--ex-muted);
  font-size: 0.875rem;
}

.ex-footer-links,
.ex-footer-status {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ex-footer h2 {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ex-muted);
}

.ex-footer-links a {
  color: var(--ex-muted);
  font-size: 0.875rem;
}

.ex-footer-links a:hover {
  color: var(--ex-text);
}

/*
 * A status card, not a link. There is no store listing and no checkout, and a button
 * that lands you back where you started is worse than no button — so this states the
 * fact and the "notify me" link beside it is the one thing that actually goes
 * somewhere.
 */
.ex-footer-card {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--ex-surface);
  box-shadow: var(--ex-shadow-inset);
  color: var(--ex-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
}

.ex-footer-card svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ex-pine);
}

.ex-copyright {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ex-border);
  width: min(calc(100% - 48px), var(--ex-container));
  margin-inline: auto;
  color: var(--ex-muted);
  font-size: 0.8125rem;
}

.ex-copyright a {
  color: var(--ex-link);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ex-scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ex-border);
  border-radius: 999px;
  background: var(--ex-surface);
  color: var(--ex-text);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  box-shadow: var(--ex-shadow-soft);
}

.ex-scroll-top svg {
  width: 19px;
  height: 19px;
}

.ex-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ────────────────────────────────────────────────────────────────────── reveals ── */

[data-ex-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.55s ease,
    transform 0.55s ease;
}

[data-ex-reveal].is-visible {
  opacity: 1;
  transform: none;
}

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

  .ex-page *,
  .ex-page *::before,
  .ex-page *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  [data-ex-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ──────────────────────────────────────────────────────────────────── utilities ── */

.ex-gap-top {
  margin-top: 22px;
}

/* A heading that exists for structure rather than for the eye: `aria-labelledby` needs
   something to point at, and a section whose name is obvious from the cards under it
   does not need that name repeated in 2.4rem. */
.ex-sr-head {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════ responsive ══
 *
 * Additive and deliberately last, so each block wins on order and nothing above needs
 * editing. The floor is 320px: no horizontal overflow, no type under 12px, no tap
 * target under 44px once there is a thumb on the screen, and no grid left with a
 * half-empty last row.
 */

@media (max-width: 1080px) {
  .ex-hero {
    padding-block: 48px 62px;
  }

  .ex-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 38px;
  }

}

@media (max-width: 980px) {
  .ex-nav {
    display: none;
  }

  .ex-menu-toggle {
    display: inline-flex;
  }

  .ex-header-inner {
    justify-content: space-between;
  }

  /* The status strip stacks rather than squeezing the sentence into two words a line,
     and the link stops being pushed to the far right by `margin-left: auto`. */
  .ex-status-inner {
    padding-block: 10px;
  }

  .ex-status-link {
    margin-left: 0;
  }
}

@media (max-width: 900px) {
  .ex-section {
    padding-block: 62px;
  }

  .ex-grid-3,
  .ex-steps,
  .ex-phases {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ex-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }

  /* Every tap target reaches 44px once there is a thumb on the screen. */
  .ex-button,
  .ex-icon-button,
  .ex-faq-item summary {
    min-height: 44px;
  }

  /*
   * Every link that is its own row — nav, footer column, brand — gets a 44px box. A
   * 22px footer link is a target you hit on the third try.
   *
   * Links inside a sentence are deliberately NOT in this list: growing an inline link
   * to 44px would break the line it sits in, and WCAG 2.5.8 exempts them for exactly
   * that reason.
   */
  .ex-footer-links a,
  .ex-status-link,
  .ex-brand {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Each row is its own 44px box now, so the gap between them can come back down. */
  .ex-footer-links {
    gap: 0;
  }

  .ex-footer h2 {
    margin-bottom: 4px;
  }
}

@media (max-width: 760px) {
  .ex-faq,
  .ex-grid-2,
  .ex-plans {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * The three stats in the hero panel stop being three columns. At 375px each was
   * about 96px wide, which puts "what the store reports" onto four lines under a
   * number — and the number is the point.
   */
  .ex-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ex-stat + .ex-stat {
    border-left: 0;
  }

  .ex-stat {
    border-top: 1px solid var(--ex-border);
  }

  .ex-stat:nth-child(odd) {
    border-right: 1px solid var(--ex-border);
  }

  .ex-stat:nth-child(-n + 2) {
    border-top: 0;
  }

  /*
   * The gates table folds into cards. A 640px min-width table inside a horizontal
   * scroller is technically not overflow, but on a phone it is a table nobody reads —
   * they see column one and never learn there were three.
   */
  .ex-table-scroll {
    overflow-x: visible;
    background: transparent;
    box-shadow: none;
  }

  .ex-table {
    min-width: 0;
  }

  .ex-table thead {
    /* `display: none` on a row group also removes it from the accessibility tree,
       which is correct here: each label is re-attached to its cell below. */
    display: none;
  }

  .ex-table tbody,
  .ex-table tr,
  .ex-table th,
  .ex-table td {
    display: block;
  }

  .ex-table tbody tr {
    margin-bottom: 12px;
    padding: 18px;
    border-radius: var(--ex-radius);
    background: var(--ex-surface);
    box-shadow: var(--ex-shadow-inset);
  }

  .ex-table tbody tr:last-child {
    margin-bottom: 0;
  }

  .ex-table tbody th {
    padding: 0 0 12px;
    border-bottom: 0;
    font-size: 1rem;
    white-space: normal;
  }

  .ex-table td {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 0 0;
    border-bottom: 0;
  }

  .ex-table td::before {
    content: attr(data-label);
    color: var(--ex-muted);
    font-size: 0.75rem;
    font-weight: 680;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
}

@media (max-width: 620px) {
  .ex-container,
  .ex-copyright {
    /* A 16px gutter each side at the narrowest widths, which is where the argument
       for a wider one stops being worth the characters it costs per line. */
    width: calc(100% - 32px);
  }

  .ex-section {
    padding-block: 50px;
  }

  .ex-section-head {
    margin-bottom: 28px;
  }

  .ex-hero {
    padding-block: 32px 48px;
  }

  .ex-grid-3,
  .ex-steps,
  .ex-phases,
  .ex-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Full-width stacked buttons, so the call to action lands above the fold at 320px. */
  .ex-actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .ex-actions .ex-button {
    width: 100%;
  }

  /*
   * Hidden rather than shrunk to its icon. A 44px square with an unlabelled glyph is
   * not a call to action — nobody can tell what it does. The menu sheet carries the
   * same destination as a full-width labelled button, and the hero's own CTA is a
   * thumb-flick below the fold.
   */
  .ex-header-cta {
    display: none;
  }

  .ex-panel-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .ex-chart,
  .ex-legend {
    padding-inline: 14px;
  }

  .ex-card,
  .ex-step,
  .ex-phase,
  .ex-promise,
  .ex-quote,
  .ex-plan {
    padding: 20px;
  }

  .ex-plan {
    padding: 22px;
  }

  /* The scroll-to-top button sits over content on a small screen; keep it clear of a
     thumb resting at the bottom-right corner. */
  .ex-scroll-top {
    right: 14px;
    bottom: 14px;
  }
}

@media (max-width: 420px) {
  /* Two 150px columns of stats is worse than one clean column. */
  .ex-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .ex-stat:nth-child(odd) {
    border-right: 0;
  }

  .ex-stat:nth-child(2) {
    border-top: 1px solid var(--ex-border);
  }

  /*
   * The facts wrap rather than each taking a row. Forced to 100% they read as three
   * buttons nobody can press, which is the wrong thing to put under two real ones.
   */
  .ex-hero-facts {
    gap: 6px 8px;
  }
}

/* ───────────────────────────────────────────────────────── late additions ── */

/*
 * These exist so that no page carries an inline style: the stylesheet stays the only
 * place a value appears, which is the rule the product's own tokens hold over it.
 */

/* The icon sprite. It is defined, never drawn, and must occupy no space. */
.ex-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ex-icon-sm {
  width: 14px;
  height: 14px;
  flex: none;
}

.ex-actions-center {
  justify-content: center;
}

/*
 * The two-column band where the copy is taller than the panel beside it. Centred, the
 * code sample floats halfway down the steps and lines up with nothing; aligned to the
 * top it sits level with the heading, which is where a reader looks for it.
 */
.ex-grid-top {
  align-items: start;
}

/*
 * The intro row of the "how it works" band: copy on the left, code sample on the right,
 * with the three steps as their own full-width row underneath.
 *
 * It was one grid, and the steps were a single column beside the code. The copy column
 * came out 898px tall against a 445px panel, so half the band's right side was 454px of
 * nothing. No amount of shortening the steps closes a gap that size — three stacked
 * cards are twice the height of the panel whatever they say — so the shape had to
 * change rather than the copy.
 */
.ex-how-top {
  margin-bottom: 46px;
}