/* Stintdelta marketing layer: landing, pricing, feature pages, auth.
   Builds only on tokens.css + components.css and loads only on public
   marketing pages. No raw colours, no gradients. */

/* ---------- Base ---------- */

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.375rem;
  -webkit-font-smoothing: antialiased;
}
.button, .nav__item, .popover__item, .site-footer a, .link { text-decoration: none; }

.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-2) var(--space-4); background: var(--brand-600); color: var(--on-brand);
  border-radius: var(--radius-md);
}
.skip-link:focus { top: var(--space-4); }

.link {
  color: var(--brand-text);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.link:hover { text-decoration-thickness: 2px; }
.brand-logo { height: 32px; }
.auth__form .input { width: 100%; }

a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}


/* ---------- Display type (GAP: tokens.css stops at h1 = 28px) ---------- */

.display-xl, .display-lg, .display-md {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.display-xl { font-size: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.035em; }
.display-lg { font-size: clamp(2rem, 1.5rem + 2vw, 3rem); line-height: 1.08; letter-spacing: -0.028em; }
.display-md { font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.125rem); line-height: 1.15; }
.lead { font-size: 1.1875rem; line-height: 1.75rem; color: var(--text-secondary); max-width: 34em; text-wrap: pretty; }
.prose { max-width: 38em; text-wrap: pretty; }
.prose + .prose { margin-top: var(--space-4); }

/* ---------- Layout ---------- */

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--space-10); }
.wrap--narrow { max-width: 860px; }
.section { padding: var(--space-11) 0; }
.section--tight { padding: var(--space-10) 0; }
.section--alt { background: var(--surface-100); border-block: 1px solid var(--border-subtle); }
.section--dark { background: var(--surface-0); color: var(--text-primary); }
:root[data-theme="dark"] .section--dark { background: var(--surface-100); border-block: 1px solid var(--border-subtle); }
.section-head { display: flex; flex-direction: column; gap: var(--space-4); margin-bottom: var(--space-9); max-width: 44rem; }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.button .icon { width: var(--space-5); height: var(--space-5); }
.button--lg { height: 48px; padding: 0 var(--space-6); font-size: 1rem; }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-10); align-items: center; }
.split--flip > :first-child { order: 2; }
.stack { display: flex; flex-direction: column; gap: var(--space-5); }
.stack--sm { gap: var(--space-3); }

@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .split--flip > :first-child { order: 0; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 var(--space-5); }
  .section { padding: var(--space-10) 0; }
  .section-head { margin-bottom: var(--space-7); }
}

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

.site-header {
  position: sticky; top: 0; z-index: 30;
  background: var(--surface-0);
  border-bottom: 1px solid var(--border-subtle);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--space-6);
  max-width: 1240px; height: 64px; margin: 0 auto; padding: 0 var(--space-10);
}
.site-header__brand { display: flex; align-items: center; margin-right: auto; }
.site-nav { display: flex; gap: var(--space-1); }
.site-nav .nav__item { height: 36px; }
.site-header__actions { display: flex; gap: var(--space-2); align-items: center; }
.site-menu { display: none; position: relative; }
.site-menu__toggle {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--radius-md); cursor: pointer; list-style: none; color: var(--text-primary);
}
.site-menu__toggle::-webkit-details-marker { display: none; }
.site-menu__toggle:hover { background: var(--surface-100); }
.site-menu__panel, .site-dropdown__panel {
  position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 40;
  display: flex; flex-direction: column; gap: var(--space-1);
  min-width: 240px; padding: var(--space-3);
  background: var(--surface-200); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.site-menu__panel .button { margin-top: var(--space-2); }
@media (max-width: 860px) {
  .site-header__inner { padding: 0 var(--space-5); height: 56px; }
  .site-nav, .site-header__actions { display: none; }
  .site-menu { display: block; }
}

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

.hero { padding: var(--space-10) 0 var(--space-11); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 4.5fr) minmax(0, 7fr); gap: var(--space-10); align-items: center; }
.hero__copy { display: flex; flex-direction: column; gap: var(--space-6); }
.hero__note { display: flex; gap: var(--space-2); align-items: center; }
.hero__note .icon { width: var(--space-4); height: var(--space-4); color: var(--success-text); }
@media (max-width: 1080px) { .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); } }
@media (max-width: 640px) { .hero { padding-top: var(--space-8); } }

/* The session window: an app screen in miniature, made of real components. */
.session-window {
  background: var(--surface-0);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
:root[data-theme="dark"] .session-window { box-shadow: none; background: var(--surface-100); }
.session-window__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  height: 48px; padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}
.session-window__title { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.session-window__title .caption { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.session-window__body { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); }
.session-window__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-5); }
.session-window__side { display: flex; flex-direction: column; gap: var(--space-4); }
.session-window .stat-tile--hero { padding: var(--space-6); }
.session-window .stat-tile__outline { width: 30%; right: var(--space-4); opacity: 0.25; }
.session-window .card { padding: var(--space-5); }
@media (max-width: 640px) {
  .session-window__top { grid-template-columns: minmax(0, 1fr); }
  .session-window__body { padding: var(--space-4); }
}

/* Live track map */
.lap-map { width: 100%; height: auto; }
.lap-map__track { fill: none; stroke: var(--surface-200); stroke-width: 10; stroke-linejoin: round; stroke-linecap: round; }
.lap-map__trace { fill: none; stroke: var(--chart-focus); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.lap-map__gate { stroke: var(--text-secondary); stroke-width: 1.6; stroke-linecap: round; }
.lap-map__car { fill: var(--chart-focus); stroke: var(--surface-0); stroke-width: 1.5; }
.lap-map__car-ring { fill: none; stroke: var(--chart-focus); stroke-width: 1.5; opacity: 0.35; }
.lap-map-wrap { background: var(--surface-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-3); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); }
.lap-map-wrap .lap-map { margin: auto 0; }
.lap-map-wrap__legend { display: flex; justify-content: space-between; padding: 0 var(--space-2); }

/* Live values: tick without layout shift */
[data-live] { font-variant-numeric: tabular-nums; }
.live-row-enter { animation: row-in 360ms ease both; }
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.value-flash { animation: value-flash 600ms ease; }
@keyframes value-flash { 0% { color: var(--brand-text); } 100% { color: inherit; } }

.logger-line { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; padding-top: var(--space-8); color: var(--text-secondary); }
.logger-line .icon { width: var(--space-4); height: var(--space-4); }
.logger-line span { display: inline-flex; gap: var(--space-2); align-items: center; }

/* ---------- Media slot (GAP: placeholder for art-directed photography) ---------- */

.media-slot {
  position: relative; aspect-ratio: var(--ratio, 16/9); width: 100%;
  border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface-200);
  border: 1px dashed var(--border-strong);
}
.media-slot > img, .media-slot > picture > img { width: 100%; height: 100%; object-fit: cover; }
.media-slot:has(> img), .media-slot:has(> picture) { border: 1px solid var(--border-subtle); }
.media-slot__placeholder {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-1); padding: var(--space-6); text-align: center; color: var(--text-secondary);
}
.media-slot__placeholder .icon { width: var(--space-7); height: var(--space-7); margin-bottom: var(--space-2); }
.media-slot__placeholder .caption { max-width: 32em; }

/* ---------- Charts (built on chart-* tokens) ---------- */

.chart { width: 100%; height: auto; }
.chart__grid { stroke: var(--chart-grid); stroke-width: 1; }
.chart__sector { stroke: var(--border-subtle); stroke-width: 1; stroke-dasharray: 3 4; }
.chart__tick, .chart__axis { fill: var(--text-secondary); font-family: var(--font-sans); font-size: 13px; }
.chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart__line--focus { stroke: var(--chart-focus); }
.chart__line--compare { stroke: var(--chart-compare-2); }
.chart-card { background: var(--surface-100); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.chart-card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.chart-legend { display: flex; gap: var(--space-5); }
.chart-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.chart-legend i { display: inline-block; width: 16px; height: 2px; border-radius: 1px; }
.chart-legend .is-focus { background: var(--chart-focus); }
.chart-legend .is-compare { background: var(--chart-compare-2); }

.speed-map svg { width: 100%; height: auto; }
.speed-map__seg { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.speed-map__seg--1 { stroke: var(--chart-sequential-1); }
.speed-map__seg--2 { stroke: var(--chart-sequential-2); }
.speed-map__seg--3 { stroke: var(--chart-sequential-3); }
.speed-map__seg--4 { stroke: var(--chart-sequential-4); }
.speed-map__seg--5 { stroke: var(--chart-sequential-5); }
.speed-map__legend { display: flex; align-items: center; gap: var(--space-1); justify-content: center; margin-top: var(--space-3); }
.speed-map__legend span:first-child { margin-right: var(--space-2); }
.speed-map__legend span:last-child { margin-left: var(--space-2); }
.speed-map__key { width: 24px; height: 6px; border-radius: var(--radius-sm); }
.speed-map__key.speed-map__seg--1 { background: var(--chart-sequential-1); }
.speed-map__key.speed-map__seg--2 { background: var(--chart-sequential-2); }
.speed-map__key.speed-map__seg--3 { background: var(--chart-sequential-3); }
.speed-map__key.speed-map__seg--4 { background: var(--chart-sequential-4); }
.speed-map__key.speed-map__seg--5 { background: var(--chart-sequential-5); }

/* ---------- Content patterns ---------- */

/* Fact list: icon + title + line, divided like stat-group rows, not cards */
.fact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); }
.fact-list__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--border-subtle); }
.fact-list__item .icon { grid-row: span 2; color: var(--text-secondary); margin-top: 2px; }
.fact-list--one { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 720px) { .fact-list { grid-template-columns: minmax(0, 1fr); } }

/* Pillar: the three promises on the home page */
.pillar { display: flex; flex-direction: column; gap: var(--space-5); }
.pillar__links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); padding-top: var(--space-2); }

/* Steps: a real sequence, so numbered */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); counter-reset: step; }
.steps__item { counter-increment: step; display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-5); border-top: 2px solid var(--text-primary); }
.steps__item::before { content: counter(step); font-weight: 600; font-size: 0.8125rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } }

/* Feature index: rows, one per feature page */
.feature-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); }
.feature-index__item {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--space-1) var(--space-4); align-items: start;
  padding: var(--space-6) var(--space-2); border-top: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); text-decoration: none; transition: background-color 160ms ease;
}
.feature-index__item:hover { background: var(--surface-100); }
.section--alt .feature-index__item:hover { background: var(--surface-200); }
.feature-index__item > .icon:first-child { grid-column: 1; grid-row: 1 / span 2; color: var(--text-primary); margin-top: 2px; }
.feature-index__item > h3, .feature-index__item > p { grid-column: 2; }
.feature-index__item > .icon:last-child { grid-column: 3; grid-row: 1 / span 2; color: var(--text-secondary); width: var(--space-4); height: var(--space-4); margin-top: 4px; }
.feature-index__item .badge { margin-left: var(--space-2); vertical-align: 2px; }
@media (max-width: 720px) { .feature-index { grid-template-columns: minmax(0, 1fr); } }

/* Export file row */
.file-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--surface-0); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); }
.file-row + .file-row { margin-top: var(--space-3); }
.file-row__icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--surface-200); color: var(--text-secondary); flex-shrink: 0; }
.file-row__meta { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; margin-right: auto; }
.file-row__meta .body { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Device row for "outlives your phone" */
.devices { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.devices .badge .icon { width: var(--space-3); height: var(--space-3); }

/* Filter bar above a table (brand book: right-aligned row of fields) */
.filter-bar { display: flex; gap: var(--space-4); justify-content: flex-end; flex-wrap: wrap; margin-bottom: var(--space-4); }
.filter-bar .field { min-width: 180px; }

/* Setup facts inside a card (Card.md: .label over body in a dl grid) */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
.facts div { display: flex; flex-direction: column; gap: var(--space-1); }
.facts dt { color: var(--text-secondary); }
.card__title { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.card__title .icon { color: var(--text-secondary); }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-6); }

/* ---------- FAQ (GAP: no disclosure component in v1) ---------- */
.faq-block { max-width: 820px; }

.faq { margin-top: var(--space-7); border-top: 1px solid var(--border-subtle); }
.faq__item { border-bottom: 1px solid var(--border-subtle); }
.faq__q { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; list-style: none; font-weight: 500; }
.faq__q::-webkit-details-marker { display: none; }
.faq__chev { display: inline-flex; color: var(--text-secondary); transition: transform 180ms ease; }
.faq__item[open] .faq__chev { transform: rotate(180deg); }
.faq__a { padding: 0 var(--space-8) var(--space-6) 0; max-width: 44em; }

/* ---------- CTA band ---------- */

.section--cta { border-top: 1px solid var(--border-subtle); }
.cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.cta .display-lg { max-width: 18em; }

/* ---------- Feature page ---------- */

.page-hero { padding: var(--space-9) 0 var(--space-10); }
.page-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.page-hero__copy { display: flex; flex-direction: column; gap: var(--space-5); }
@media (max-width: 960px) { .page-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; color: var(--text-secondary); }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--text-primary); text-decoration: underline; }
.breadcrumb .icon { width: var(--space-3); height: var(--space-3); }
.use-why { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.use-why div { display: flex; flex-direction: column; gap: var(--space-2); }
@media (max-width: 640px) { .use-why { grid-template-columns: minmax(0, 1fr); } }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-6); }
@media (max-width: 860px) { .related { grid-template-columns: minmax(0, 1fr); } }
.pro-note { display: inline-flex; align-items: center; gap: var(--space-2); }

/* ---------- Pricing ---------- */

.pricing-hero { padding: var(--space-10) 0 var(--space-9); text-align: center; }
.pricing-hero .wrap { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.pricing-hero .lead { margin: 0 auto; }
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); max-width: 920px; margin: 0 auto; align-items: stretch; }
.pricing-card { display: flex; flex-direction: column; gap: var(--space-5); }
.pricing-card__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.pricing-card__list { display: flex; flex-direction: column; gap: var(--space-3); }
.pricing-card__list li { display: flex; gap: var(--space-3); align-items: flex-start; }
.pricing-card__list .pricing-check { margin-top: -1px; }
.pricing-card .button { margin-top: auto; width: 100%; }
.pricing-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.pricing-toggle { cursor: pointer; }
.pricing-toggle__option { border: 0; font-family: var(--font-sans); cursor: pointer; }
.pricing-toggle__option:not(.pricing-toggle__option--active) { background: transparent; }
.pricing-toggle__option:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.pricing-toggle__option .badge { height: 20px; padding: 0 var(--space-2); }
.pricing-toggle__option--active .badge { background: var(--on-brand); color: var(--brand-tint-text); }
[data-period="monthly"] [data-show="yearly"], [data-period="yearly"] [data-show="monthly"] { display: none; }
@media (max-width: 760px) { .pricing-grid { grid-template-columns: minmax(0, 1fr); } }

/* Coffee meter: 12 cups = 12 months; filled = what you pay for */
.coffee { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.coffee__cups { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-4) var(--space-3); max-width: 420px; }
.coffee__cup { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); color: var(--text-primary); }
.coffee__cup .icon { width: 40px; height: 40px; }
.coffee__cup--free { color: var(--text-disabled); }
.coffee__cup--free .icon { stroke-dasharray: 2 2.5; }
.coffee__buys { display: flex; flex-direction: column; gap: var(--space-4); }
.coffee__buys li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); }
.coffee__buys li .pricing-check { grid-row: span 2; }
@media (max-width: 860px) { .coffee { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); } }
.check-yes { color: var(--success-text); }
.check-no { color: var(--text-tertiary); }
.table td .icon { width: var(--space-5); height: var(--space-5); margin-left: auto; }
.table td.table__center .icon { margin: 0 auto; }
.table__center { text-align: center; }
.callout { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--brand-100); color: var(--brand-tint-text); }
.callout .icon { flex-shrink: 0; margin-top: 2px; }
.callout p { color: var(--text-primary); }

/* ---------- Auth ---------- */

.auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth__main { display: flex; flex-direction: column; padding: var(--space-7) var(--space-10); }
.auth__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.auth__form-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-10) 0; }
.auth__form { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-5); }
.auth__form .field { max-width: none; }
.auth__form > .button { width: 100%; }
.auth__intro { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-2); }
.auth__row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.auth__alt { text-align: center; padding-top: var(--space-5); border-top: 1px solid var(--border-subtle); }
.auth__aside { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-6); padding: var(--space-10); background: var(--surface-100); border-left: 1px solid var(--border-subtle); overflow: hidden; }
.auth__aside--top { justify-content: flex-start; }
.auth__aside .media-slot { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; border-radius: 0; border: 0; }
.auth__aside-content { position: relative; display: flex; flex-direction: column; gap: var(--space-5); max-width: 460px; }
.auth__aside-content .stat-tile { background: var(--surface-0); box-shadow: var(--shadow-md); }
:root[data-theme="dark"] .auth__aside-content .stat-tile { background: var(--surface-200); box-shadow: none; }
.password-wrap { position: relative; }
.password-wrap .input { width: 100%; padding-right: 48px; }
.password-toggle { position: absolute; right: var(--space-1); top: 50%; transform: translateY(-50%); height: 32px; width: 40px; padding: 0; }
@media (max-width: 960px) {
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__aside { display: none; }
  .auth__main { padding: var(--space-5); }
}

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

.site-footer { background: var(--surface-100); border-top: 1px solid var(--border-subtle); }
.site-footer__inner { max-width: 1240px; margin: 0 auto; padding: var(--space-10) var(--space-10) var(--space-8); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--space-9); }
.site-footer__brand { display: flex; flex-direction: column; gap: var(--space-4); max-width: 22rem; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.site-footer__cols ul { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.site-footer__cols a { color: var(--text-secondary); }
.site-footer__cols a:hover { color: var(--text-primary); }
.site-footer__prefs { grid-column: 1 / -1; display: flex; gap: var(--space-5); flex-wrap: wrap; padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }
.site-footer__prefs .field { width: 200px; }
.site-footer__base { max-width: 1240px; margin: 0 auto; padding: 0 var(--space-10) var(--space-8); }
@media (max-width: 860px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); padding: var(--space-9) var(--space-5) var(--space-7); }
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__base { padding: 0 var(--space-5) var(--space-7); }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Small-screen fixes ---------- */
/* Marketing tables keep one line per cell and scroll inside table-wrap. */
.table-wrap .table td { white-space: nowrap; }
.chart-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
@media (max-width: 720px) {
  .chart-scroll .chart { min-width: 720px; }
  .filter-bar .field { flex: 1; min-width: 140px; }
  .chart-card { padding: var(--space-4); }
}

/* g-g diagram */
.gg { max-width: 360px; margin: 0 auto; }
.gg__ring { fill: none; }
.gg__dot { fill: var(--chart-focus); opacity: 0.55; }

/* Geometry corners on marketing cards */
.geometry-card .geometry { margin-top: var(--space-2); }
.share-link { display: flex; gap: var(--space-3); }
.share-link .input { flex: 1; }
.insights-card { padding: 0; overflow: hidden; }
.site-menu__panel { max-height: calc(100vh - 80px); overflow-y: auto; }
.site-dropdown { position: relative; }
.site-dropdown > .nav__item { cursor: pointer; }
.site-dropdown__panel { right: auto; left: 0; min-width: 300px; }
:root[data-theme="dark"] .site-menu__panel, :root[data-theme="dark"] .site-dropdown__panel { box-shadow: none; }

/* Playful "when you sign up" note that floats up from a demo button and fades out */
.tease { position: relative; display: inline-flex; }
.tease__note {
  position: absolute; bottom: calc(100% + var(--space-2)); left: 50%;
  white-space: nowrap; pointer-events: none;
  animation: tease-float 1700ms ease-out forwards;
}
@keyframes tease-float {
  0% { opacity: 0; transform: translate(-50%, var(--space-1)); }
  15% { opacity: 1; transform: translate(-50%, 0); }
  65% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, calc(var(--space-5) * -1)); }
}
@media (prefers-reduced-motion: reduce) { .tease__note { transform: translateX(-50%); } }

/* Charts in half-width columns are scaled down a lot, so their labels get larger */
.split .chart:not(.gg) .chart__tick, .split .chart:not(.gg) .chart__axis,
.page-hero__grid .chart:not(.gg) .chart__tick, .page-hero__grid .chart:not(.gg) .chart__axis { font-size: 22px; }