/* ==========================================================================
   SallaData — styled against the DesignMD "Notion" design system.
   Token names below mirror the document's own role names so the mapping
   between spec and stylesheet stays auditable.
   ========================================================================== */

:root {
  color-scheme: light;

  /* -- 2. Color Palette & Roles ------------------------------------------ */

  /* Primary */
  --primary: #0075DE;              /* Primary Blue   — all primary CTAs */
  --primary-light: #097FE8;        /* Primary Blue Light — hover */
  --primary-dark: #005BAB;         /* Dark Blue      — active, visited */

  /* Accent (badges / status / secondary features only) */
  --accent-teal: #27918D;
  --accent-purple: #9849E8;
  --accent-orange: #FF6D00;
  --accent-sky: #62AEF0;
  --accent-deep-blue: #1313BA;

  /* Interactive */
  --btn-secondary-bg: #E6F3FE;
  --btn-secondary-bg-hover: #D6E8FD;
  --btn-secondary-bg-active: #C0DFFB;
  --btn-secondary-text: #005BAB;
  --btn-secondary-text-active: #003F7F;

  /* Neutral scale */
  --black: #000000;
  --near-black: #31302E;
  --dark-gray: #615D59;
  --medium-gray: #A39E98;
  --off-white: #F9F9F8;
  --light-gray: #F6F5F4;
  --white: #FFFFFF;

  /* Text roles.
     The doc's Quick Reference maps "Secondary Text" to Medium Gray (#A39E98),
     but that is 2.6:1 on white and its own Neutral Scale scopes it to
     "placeholder text, hints". The Do's require WCAG AA, so running text uses
     Dark Gray (#615D59, 6.5:1) and #A39E98 stays on placeholders/hints. */
  --text-primary: #000000;
  --text-body: rgba(0, 0, 0, 0.898);
  --text-secondary: #615D59;
  --text-placeholder: #A39E98;
  --text-disabled: rgba(0, 0, 0, 0.4);

  /* Surface & borders */
  --surface: #FFFFFF;
  --surface-subtle: #F6F5F4;       /* Light Gray  — secondary section fill */
  --surface-minimal: #F9F9F8;      /* Off White   — minimal fill */
  --surface-accent: #F2F9FF;       /* Light Blue Surface — card background */
  --surface-dark: #000000;         /* frontmatter: surface */
  --on-surface-dark: #FFFFFF;      /* frontmatter: on-surface */
  --border-stroke: rgba(0, 0, 0, 0.05);
  --border-input: rgba(0, 0, 0, 0.08);
  --border-emphasis: rgba(0, 0, 0, 0.12);

  /* Semantic / status */
  --error: #F64932;
  --warning: #FFB110;
  --success: #27918D;

  /* Hover / disabled overlays */
  --overlay-hover: rgba(0, 0, 0, 0.05);
  --overlay-pressed: rgba(0, 0, 0, 0.1);

  /* -- 3. Typography ------------------------------------------------------ */
  /* NotionInter is not publicly distributed; Inter is the nearest available
     match and sits directly after it in the documented stack. */
  --font-primary: NotionInter, Inter, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", sans-serif;

  --fs-display-xl: 96px;   --lh-display-xl: 1.042;
  --fs-display-lg: 64px;   --lh-display-lg: 1;
  --fs-heading-lg: 54px;   --lh-heading-lg: 1.037;
  --fs-heading-md: 42px;   --lh-heading-md: 1.143;
  --fs-heading-sm: 32px;   --lh-heading-sm: 1.25;
  --fs-subheading: 22px;   --lh-subheading: 1.273;
  --fs-heading-xs: 18px;   --lh-heading-xs: 1.556;
  --fs-body: 16px;         --lh-body: 1.5;
  --fs-body-sm: 14px;      --lh-body-sm: 1.429;
  --fs-caption: 12px;      --lh-caption: 1.333;

  /* -- 5. Layout: spacing (4px base) -------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 36px;
  --space-16: 64px;
  --space-20: 80px;
  --space-31: 124px;

  --section-y: var(--space-20);
  --hero-y: var(--space-31);

  /* Grid & container */
  --max-width: 1440px;
  --gutter: var(--space-8);
  --grid-gap: var(--space-5);

  /* -- Border radius scale ------------------------------------------------ */
  --radius-compact: 4px;   /* icon buttons, tight UI */
  --radius-input: 6px;     /* form inputs */
  --radius: 8px;           /* standard: buttons, cards */
  --radius-pill: 9999px;
  --radius-circle: 100%;

  /* -- 6. Depth & elevation ----------------------------------------------- */
  --elev-2: rgba(0, 0, 0, 0) 0px 1px 0px 0px;
  --elev-3: rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px,
            rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px,
            rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px,
            rgba(0, 0, 0, 0.04) 0px 4px 18px 0px;
  --elev-4: rgba(0, 0, 0, 0.2) 0px 2px 7px 0px;
  --elev-5: rgba(0, 0, 0, 0.04) 0px 4px 18px 0px,
            rgba(0, 0, 0, 0.027) 0px 2.025px 7.84688px 0px,
            rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px,
            rgba(0, 0, 0, 0.01) 0px 0.175px 1.04062px 0px,
            rgba(255, 255, 255, 0.6) 0px 0px 1px 0px;

  /* -- Z-index reserves --------------------------------------------------- */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-high-sticky: 500;
  --z-modal: 1000;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------- base --- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(64px + var(--space-4));
}

body {
  margin: 0;
  font-family: var(--font-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--text-body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--text-primary);
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
img { max-width: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

/* Links — primary blue, underline on hover, dark blue when visited */
a {
  color: var(--primary);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}
a:hover { color: var(--primary-light); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--radius-compact);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px; inset-inline-start: var(--space-6);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--primary);
  color: var(--white);
  font-size: var(--fs-body);
  font-weight: 500;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; color: var(--white); text-decoration: none; }

/* ---------------------------------------------------- type hierarchy --- */

.t-display-lg {
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  font-weight: 700;
}
.t-heading-lg {
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  font-weight: 700;
}
.t-heading-md {
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading-md);
  font-weight: 700;
}
.t-heading-sm {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-heading-sm);
  font-weight: 700;
}
.t-subheading {
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  font-weight: 700;
}
.t-body { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; }
.t-body-em { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 500; }
.t-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: 400; }
.t-body-sm-bold { font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); font-weight: 500; }
.t-caption { font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: 500; }

/* -------------------------------------------------------------- layout --- */

.shell {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--subtle { background: var(--surface-subtle); }
.section--dark { background: var(--surface-dark); color: rgba(255, 255, 255, 0.8); }

.section-head { max-width: 720px; margin-bottom: var(--space-16); }
.section-head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: var(--radius-circle);
  background: var(--primary);
}

.section-title {
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  font-weight: 700;
  color: var(--text-primary);
}

.section-sub {
  margin-top: var(--space-5);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 62ch;
  text-wrap: pretty;
}
.section-head--center .section-sub { margin-inline: auto; }

.section-head--light .section-title { color: var(--on-surface-dark); }
.section-head--light .section-sub { color: rgba(255, 255, 255, 0.7); }
.section-head--light .eyebrow { color: var(--accent-sky); }
.section-head--light .eyebrow::before { background: var(--accent-sky); }

/* ============================================================== BUTTONS === */
/* Metrics come straight from §4: 16px/500 label, 6px 15px padding,
   8px radius, 1px transparent border, 38px height, 24px line-height. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 38px;
  padding: 6px 15px;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: var(--radius);
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 24px;
  white-space: nowrap;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn--block { width: 100%; }
.btn__arrow { display: inline-flex; transition: transform 0.15s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(2px); }

/* The doc holds button heights fixed, so "lg" only widens the hit area. */
.btn--lg { padding-inline: var(--space-6); }

.btn--primary { background: var(--primary); color: var(--white); }
.btn--primary:hover { background: var(--primary-light); color: var(--white); box-shadow: var(--elev-3); }
.btn--primary:active { background: var(--primary-dark); box-shadow: none; }
.btn--primary[disabled],
.btn--primary.is-disabled {
  background: var(--overlay-pressed);
  color: var(--text-disabled);
  cursor: not-allowed;
  box-shadow: none;
}

.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
.btn--secondary:hover { background: var(--btn-secondary-bg-hover); color: var(--btn-secondary-text); }
.btn--secondary:active { background: var(--btn-secondary-bg-active); color: var(--btn-secondary-text-active); }

.btn--ghost {
  height: 36px;
  background: rgba(0, 0, 0, 0);
  color: var(--text-body);
  font-weight: 400;
}
.btn--ghost:hover { background: var(--overlay-hover); color: var(--text-primary); }
.btn--ghost:active { background: var(--overlay-pressed); }

/* On dark surfaces the light-blue secondary keeps its contrast, so the only
   dark-specific variant needed is the white/ghost pairing. */
.btn--light { background: var(--white); color: var(--text-primary); }
.btn--light:hover { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }

.icon-btn {
  display: grid;
  place-items: center;
  padding: 11px;
  border-radius: var(--radius-compact);
  background: rgba(0, 0, 0, 0);
  color: rgba(0, 0, 0, 0.6);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.icon-btn:hover { background: var(--overlay-hover); color: var(--text-body); }

/* Links */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  color: var(--primary);
}
.link-arrow:hover { color: var(--primary-light); text-decoration: underline; }
.link-arrow svg { transition: transform 0.15s var(--ease); }
.link-arrow:hover svg { transform: translateX(2px); }

/* ------------------------------------------------- badges & indicators --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius-pill);
  background: var(--surface-accent);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-dark);
}
.badge__dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-circle);
  background: var(--primary);
}
.badge--dark {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--accent-sky);
}
.badge--dark .badge__dot { background: var(--accent-sky); }

.tag-demo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius-compact);
  background: var(--white);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.note {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}
.note svg { flex: none; margin-top: 2px; color: var(--medium-gray); }
.note--center { justify-content: center; text-align: start; }

.checks { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.checks li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: 500;
  color: var(--text-body);
}
.checks__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 20px; height: 20px;
  border-radius: var(--radius-circle);
  background: var(--surface-accent);
  color: var(--primary);
}
.checks--hero {
  margin-top: var(--space-8);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-stroke);
}

/* Shared table cell pieces */
.store-cell { display: flex; align-items: center; gap: var(--space-2); }
.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px; height: 26px;
  border-radius: var(--radius-circle);
  background: var(--surface-accent);
  border: 1px solid var(--border-stroke);
  font-size: 10px;
  font-weight: 500;
  color: var(--primary-dark);
}
.cat-chip {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-compact);
  background: var(--surface-accent);
  border: 1px solid var(--border-stroke);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  color: var(--primary-dark);
  white-space: nowrap;
}
.social { display: inline-flex; align-items: center; gap: var(--space-1); }
.social span {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding-inline: 5px;
  border-radius: var(--radius-compact);
  background: var(--light-gray);
  border: 1px solid var(--border-stroke);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-secondary);
}

/* Status uses the semantic tokens only — teal for complete, yellow for caution */
.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px var(--space-2) 2px 6px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  white-space: nowrap;
}
.status::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-circle); }
.status--active {
  background: rgba(39, 145, 141, 0.1);
  color: #1C6A67;
  border: 1px solid rgba(39, 145, 141, 0.2);
}
.status--active::before { background: var(--success); }
.status--review {
  background: rgba(255, 177, 16, 0.12);
  color: #7A5200;
  border: 1px solid rgba(255, 177, 16, 0.28);
}
.status--review::before { background: var(--warning); }

/* =========================================================== NAVIGATION === */
/* §4 Top Navigation Bar: white, 64px, 0 radius, Level-2 shadow, z-index 100 */

.nav {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  height: 64px;
  background: var(--white);
  border-radius: 0;
  box-shadow: var(--elev-2);
  transition: box-shadow 0.2s var(--ease), border-color 0.2s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck { border-bottom-color: var(--border-stroke); box-shadow: var(--elev-3); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  height: 64px;
}

.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--text-primary); }
.brand:hover { color: var(--text-primary); text-decoration: none; }
.brand__text { display: block; min-width: 0; }
.brand__name {
  display: block;
  font-size: var(--fs-body);
  line-height: 20px;
  font-weight: 700;
  color: var(--text-primary);
}
.brand__sub {
  display: block;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 400;
  color: var(--text-secondary);
}

.logo-mark {
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--primary);
}

.nav__links { display: flex; align-items: center; gap: var(--space-1); }
.nav__links a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-compact);
  font-size: var(--fs-body);
  line-height: 24px;
  font-weight: 400;
  color: var(--text-body);
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.nav__links a:hover { color: var(--primary); background: var(--overlay-hover); text-decoration: none; }

.nav__actions { display: flex; align-items: center; gap: var(--space-2); }
.nav__text-link {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-compact);
  font-size: var(--fs-body);
  line-height: 24px;
  font-weight: 400;
  color: var(--text-body);
}
.nav__text-link:hover { color: var(--primary); background: var(--overlay-hover); text-decoration: none; }

.nav__toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-compact);
  background: rgba(0, 0, 0, 0);
  place-items: center;
  color: rgba(0, 0, 0, 0.6);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.nav__toggle:hover { background: var(--overlay-hover); color: var(--text-body); }
.nav__toggle-icon--close { display: none; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--close { display: block; }
.nav__toggle[aria-expanded="true"] .nav__toggle-icon--open { display: none; }

.nav__mobile {
  display: none;
  padding: var(--space-3) var(--gutter) var(--space-6);
  background: var(--white);
  border-top: 1px solid var(--border-stroke);
  box-shadow: var(--elev-3);
}
.nav__mobile.is-open { display: block; }
.nav__mobile-link {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-body);
  line-height: 24px;
  font-weight: 400;
  color: var(--text-body);
  border-bottom: 1px solid var(--border-stroke);
}
.nav__mobile-link:hover { color: var(--primary); text-decoration: none; }
.nav__mobile-actions { display: grid; gap: var(--space-2); margin-top: var(--space-5); }

/* ================================================================== HERO === */
/* §5: hero sections use 124px top/bottom padding, centred container */

.hero {
  padding-block: var(--hero-y);
  background: var(--white);
}
.hero__grid {
  display: grid;
  /* The copy column carries a 64px headline, so it gets the extra room —
     enough slack that the line holds even on the system-font fallback. */
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-16);
}

.hero__title {
  margin-top: var(--space-6);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display-lg);
  font-weight: 700;
  color: var(--text-primary);
  /* The two headline lines are authored explicitly; balancing would re-wrap
     them even where they fit, so opt this heading out. */
  text-wrap: wrap;
}
.hero__line { display: block; }
.hero__accent { color: var(--primary); }

.hero__lede {
  margin-top: var(--space-6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: 54ch;
  text-wrap: pretty;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }

/* ------------------------------------------------------------ explorer --- */
/* A layered, floating product surface — Level 5 elevation with white glow. */

.explorer {
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--elev-5);
  overflow: hidden;
}

.explorer__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--light-gray);
  border-bottom: 1px solid var(--border-stroke);
}
.explorer__dots { display: flex; gap: 6px; }
.explorer__dots i {
  width: 8px; height: 8px;
  border-radius: var(--radius-circle);
  background: rgba(0, 0, 0, 0.12);
}
.explorer__title {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.explorer__tag {
  margin-inline-start: auto;
  padding: 2px var(--space-2);
  border-radius: var(--radius-compact);
  background: var(--surface-accent);
  border: 1px solid var(--border-stroke);
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-dark);
}

.explorer__body { padding: var(--space-4); }

/* §4 Text Input, search variant */
.explorer__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: 11px 12px;
  margin-bottom: var(--space-3);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  background: var(--white);
  box-shadow: rgba(0, 0, 0, 0.016) 0px 0.7px 1.462px 0px,
              rgba(0, 0, 0, 0.03) 0px 3px 9px 0px;
  color: var(--text-placeholder);
}
.explorer__search-text {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-placeholder);
}
.explorer__kbd {
  margin-inline-start: auto;
  padding: 1px 6px;
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius-compact);
  background: var(--light-gray);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}

.explorer__filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 5px 10px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-compact);
  background: var(--white);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}
.filter-pill__key { font-weight: 400; }
.filter-pill__value { font-weight: 500; color: var(--text-body); }

.explorer__table-wrap {
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  overflow-x: auto;
  scrollbar-width: none;
  /* Paint containment keeps the scrolled-out columns from widening the
     document — overflow-x alone lets them escape body's overflow clip. */
  contain: paint;
  /* The mask sits on the scrollport, so the trailing columns fade out at the
     card edge instead of being sliced mid-word — it reads as a window onto a
     wider table rather than a clipping bug. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent 100%);
}
.explorer__table-wrap::-webkit-scrollbar { display: none; }

/* Eight columns exceed the card, so the table sizes to its content and scrolls
   rather than truncating every value. Contact columns lead, so they stay in view. */
.explorer__table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
}
.explorer__table th,
.explorer__table td {
  padding: var(--space-2);
  text-align: start;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-stroke);
}
.explorer__table thead th {
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-minimal);
}
.explorer__table tbody tr:last-child td { border-bottom: 0; }
.explorer__table tbody tr { transition: background-color 0.12s var(--ease); }
.explorer__table tbody tr:hover { background: var(--surface-accent); }
.explorer__table .is-store { font-weight: 500; color: var(--text-primary); }
.explorer__table .is-url { color: var(--text-secondary); }
.explorer__table .is-num { color: var(--text-body); }
.explorer__table .avatar { width: 20px; height: 20px; font-size: 9px; }
.explorer__table .store-cell { gap: 6px; min-width: 0; }
.explorer__table .store-cell > :last-child { overflow: hidden; text-overflow: ellipsis; }
.explorer__table .social span { min-width: 18px; height: 18px; font-size: 9px; }
.explorer__table .is-email { color: var(--text-secondary); }
.explorer__table .is-phone .masked {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 5px;
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius-compact);
  background: var(--light-gray);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
.explorer__table .is-phone .masked svg { flex: none; color: var(--medium-gray); }
.explorer__table .is-empty { color: var(--medium-gray); }

.explorer__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}
.explorer__pager { display: flex; gap: var(--space-1); }
.explorer__page {
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: var(--radius-compact);
  border: 1px solid var(--border-stroke);
  font-size: 11px;
  font-weight: 500;
}
.explorer__page.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

/* ================================================================== BAND === */

.band {
  padding-block: var(--space-16);
  background: var(--surface-subtle);
}
.band__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}
.band__title {
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading-md);
  font-weight: 700;
}
.band__body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ============================================== CARD GRIDS (§5: 20px gap) === */
/* Iteration Guide #2: 16px padding, #F2F9FF background,
   1px solid rgba(0,0,0,0.05) border, 8px radius, no shadow. */

.card {
  padding: var(--space-4);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--surface-accent);
  box-shadow: none;
  color: var(--text-body);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.feature {
  padding: var(--space-4);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--surface-accent);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.feature:hover { border-color: var(--border-emphasis); box-shadow: var(--elev-3); }
.feature__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: var(--white);
  border: 1px solid var(--border-stroke);
  color: var(--primary);
}
.feature h3 {
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  font-weight: 700;
}
.feature p {
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}

.usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.usecase {
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--white);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.usecase:hover { border-color: var(--border-emphasis); box-shadow: var(--elev-3); }
.usecase--featured {
  background: var(--surface-accent);
  border: 2px solid var(--primary);
}
.usecase--featured:hover { border-color: var(--primary); }
.usecase__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: var(--space-4);
  border-radius: var(--radius);
  background: var(--surface-accent);
  border: 1px solid var(--border-stroke);
  color: var(--primary);
}
.usecase--featured .usecase__icon { background: var(--white); }
.usecase h3 {
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  font-weight: 700;
}
.usecase p {
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}
.usecase__example {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-inline-start: 2px solid var(--primary);
  border-start-end-radius: var(--radius-compact);
  border-end-end-radius: var(--radius-compact);
  background: var(--white);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-body);
}
.usecase__cta { margin-top: auto; padding-top: var(--space-4); }

/* ======================================================= DATASET PREVIEW === */

.table-card {
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: none;
  overflow: hidden;
}
.table-card__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-stroke);
  background: var(--surface-minimal);
}
.table-card__file {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: 500;
  color: var(--text-primary);
}
.table-card__file svg { color: var(--text-secondary); }
.table-card__spacer { margin-inline-start: auto; }

.table-card__filters {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-stroke);
}
.chip-toggle {
  height: 30px;
  padding: 5px var(--space-3);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-compact);
  background: var(--white);
  font-size: var(--fs-body-sm);
  line-height: 20px;
  font-weight: 400;
  color: var(--text-body);
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease);
}
.chip-toggle:hover { background: var(--overlay-hover); }
.chip-toggle.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  font-weight: 500;
}
.table-card__count {
  margin-inline-start: auto;
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
}

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  contain: paint;
}

table.dataset {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
table.dataset th,
table.dataset td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-stroke);
}
table.dataset thead th {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--white);
}
table.dataset tbody tr { transition: background-color 0.12s var(--ease); }
table.dataset tbody tr:hover { background: var(--surface-accent); }
table.dataset tbody tr:last-child td { border-bottom: 0; }
table.dataset .is-store { font-weight: 500; color: var(--text-primary); }
table.dataset .is-url { color: var(--text-secondary); }

.table-card__foot {
  padding: var(--space-3) var(--space-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
  border-top: 1px solid var(--border-stroke);
  background: var(--white);
}

/* =========================================================== DATA FIELDS === */

.field-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--grid-gap);
}
.field-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--white);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  font-weight: 500;
  color: var(--text-primary);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field-chip:hover { border-color: var(--border-emphasis); box-shadow: var(--elev-3); }
.field-chip__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px; height: 32px;
  border-radius: var(--radius-compact);
  background: var(--surface-accent);
  color: var(--primary);
}
.field-note { max-width: 760px; margin-top: var(--space-8); }

/* ============================================================= TARGETING === */

.builder {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: none;
  overflow: hidden;
}

.builder__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  padding: var(--space-8);
}
.builder__filter { display: grid; gap: var(--space-2); }
.builder__label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.builder__select { position: relative; }

/* §4 Text Input / Iteration Guide #5: 44px height, 6px radius, 0.08 border */
.builder__input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  padding: 11px 46px 11px 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  background: var(--white);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 24px;
  font-weight: 400;
  color: var(--text-body);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.builder__input:hover { border-color: var(--border-emphasis); }
.builder__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 117, 222, 0.16);
}
.builder__input:focus-visible { outline: none; }
.builder__chevron {
  position: absolute;
  top: 50%; inset-inline-end: var(--space-3);
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

.builder__result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-8);
  background: var(--surface-accent);
  border-inline-start: 1px solid var(--border-stroke);
}
.builder__tag {
  align-self: flex-start;
  padding: 2px var(--space-2);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius-compact);
  background: var(--white);
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary-dark);
}
.builder__count {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.builder__count strong {
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading-md);
  font-weight: 700;
  color: var(--primary);
  transition: opacity 0.12s var(--ease);
}
.builder__count.is-updating strong { opacity: 0.35; }
.builder__count span {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 500;
  color: var(--text-body);
}
.builder__note {
  margin-top: var(--space-3);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
  max-width: 36ch;
}
.builder__cta { margin-top: var(--space-5); }
.targeting__note { margin-top: var(--space-5); }

/* ============================================================= DEVELOPER === */
/* Dark surface uses the frontmatter pair: surface #000000 / on-surface #FFFFFF */

.api { background: var(--surface-dark); }
.api__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-16);
  align-items: center;
}
.api__copy .section-head { margin-bottom: 0; }
.api__points { display: grid; gap: var(--space-3); margin-top: var(--space-7); }
.api__points li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: rgba(255, 255, 255, 0.8);
}
.api__points svg { flex: none; margin-top: 3px; color: var(--accent-sky); }
.api__cta { margin-top: var(--space-7); }
.api .link-arrow { color: var(--accent-sky); }
.api .link-arrow:hover { color: var(--white); }
.api__note {
  margin-top: var(--space-6);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: rgba(255, 255, 255, 0.5);
  max-width: 48ch;
}

.editor {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius);
  background: #0B0B0B;
  box-shadow: var(--elev-4);
  overflow: hidden;
}
.editor__bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.editor__dots { display: flex; gap: 6px; }
.editor__dots i { width: 8px; height: 8px; border-radius: var(--radius-circle); background: rgba(255, 255, 255, 0.16); }
.editor__file {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: rgba(255, 255, 255, 0.5);
}
.editor__tag {
  margin-inline-start: auto;
  padding: 2px var(--space-2);
  border-radius: var(--radius-compact);
  background: rgba(98, 174, 240, 0.14);
  border: 1px solid rgba(98, 174, 240, 0.3);
  font-size: 10px;
  line-height: 14px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-sky);
}
.editor__body {
  margin: 0;
  padding: var(--space-5);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--fs-caption);
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.78);
}
.editor__body code { font: inherit; }
.editor__rule {
  display: block;
  height: 1px;
  margin: var(--space-4) 0;
  background: rgba(255, 255, 255, 0.08);
}
/* Syntax colours drawn from the accent palette only */
.tok-c { color: rgba(255, 255, 255, 0.4); }
.tok-m { color: var(--accent-sky); font-weight: 500; }
.tok-p { color: var(--white); }
.tok-q { color: var(--accent-orange); }
.tok-k { color: var(--accent-sky); }
.tok-s { color: var(--accent-teal); }
.tok-n { color: var(--warning); }
.tok-b { color: var(--accent-purple); }
.tok-a { color: var(--accent-teal); }

/* =============================================================== PRICING === */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  align-items: start;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-4);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.plan:hover { border-color: var(--border-emphasis); box-shadow: var(--elev-3); }
/* Border Widths — Medium (2px): emphasis borders for highlighted cards */
.plan--featured {
  background: var(--surface-accent);
  border: 2px solid var(--primary);
  padding-top: var(--space-6);
}
.plan--featured:hover { border-color: var(--primary); }
.plan__badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--white);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan__name {
  font-size: var(--fs-heading-xs);
  line-height: var(--lh-heading-xs);
  font-weight: 700;
}
.plan__price { display: flex; align-items: baseline; gap: var(--space-2); margin-top: var(--space-2); }
.plan__amount {
  font-size: var(--fs-heading-md);
  line-height: var(--lh-heading-md);
  font-weight: 700;
  color: var(--text-primary);
}
.plan__period {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}
.plan__desc {
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
  min-height: 40px;
}
.plan__cta { margin-top: var(--space-4); }
.plan__features {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-stroke);
}
.plan__features li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-body);
}
.plan__features svg { flex: none; margin-top: 2px; color: var(--primary); }
.pricing-note { max-width: 720px; margin: var(--space-8) auto 0; }

/* =========================================================== CUSTOM DATA === */

.custom {
  padding: var(--space-20) var(--space-16);
  border-radius: var(--radius);
  text-align: center;
  background: var(--surface-dark);
}
.custom h2 {
  margin-top: var(--space-5);
  color: var(--on-surface-dark);
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  font-weight: 700;
}
.custom__body {
  max-width: 56ch;
  margin: var(--space-5) auto 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: rgba(255, 255, 255, 0.75);
}
.custom__examples {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-8) auto;
  max-width: 820px;
}
.custom__examples li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-compact);
  background: rgba(255, 255, 255, 0.05);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: rgba(255, 255, 255, 0.85);
}
.custom__examples svg { color: var(--accent-sky); }

/* =================================================================== FAQ === */

.faq {
  max-width: 880px;
  margin-inline: auto;
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: none;
  overflow: hidden;
}
.faq__item { border-bottom: 1px solid var(--border-stroke); }
.faq__item:last-child { border-bottom: 0; }
.faq__heading { margin: 0; font-size: inherit; font-weight: inherit; }
.faq__q {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  width: 100%;
  min-height: 44px;
  padding: var(--space-5) var(--space-6);
  text-align: start;
  font-size: var(--fs-heading-xs);
  line-height: var(--lh-heading-xs);
  font-weight: 700;
  color: var(--text-primary);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.faq__q:hover { background: var(--overlay-hover); }
.faq__q:focus-visible { outline-offset: -3px; }
.faq__q[aria-expanded="true"] { color: var(--primary); }
.faq__icon {
  flex: none;
  margin-inline-start: auto;
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--radius-compact);
  color: var(--text-secondary);
  transition: transform 0.2s var(--ease), background-color 0.15s var(--ease), color 0.15s var(--ease);
}
.faq__q[aria-expanded="true"] .faq__icon {
  transform: rotate(180deg);
  background: var(--surface-accent);
  color: var(--primary);
}
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s var(--ease); }
.faq__panel.is-open { grid-template-rows: 1fr; }
.faq__panel > div { overflow: hidden; }
.faq__panel p {
  padding: 0 var(--space-16) var(--space-5) var(--space-6);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ============================================================= FINAL CTA === */

.final-cta { text-align: center; background: var(--white); }
.final-cta h2 {
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  font-weight: 700;
  max-width: 20ch;
  margin-inline: auto;
}
.final-cta__sub {
  max-width: 56ch;
  margin: var(--space-5) auto 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
}
.final-cta__buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

/* ================================================================ FOOTER === */

.footer {
  padding-block: var(--space-16) 0;
  background: var(--surface-dark);
  color: rgba(255, 255, 255, 0.65);
}
.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-16);
  padding-bottom: var(--space-16);
}
.footer .brand__name { color: var(--on-surface-dark); }
.footer .brand__sub { color: rgba(255, 255, 255, 0.5); }
.footer__tagline {
  margin-top: var(--space-4);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: rgba(255, 255, 255, 0.6);
}
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-8); }
.footer__col-title {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--on-surface-dark);
}
.footer__cols li { margin-bottom: var(--space-2); }
.footer__cols a {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: rgba(255, 255, 255, 0.65);
}
.footer__cols a:hover { color: var(--on-surface-dark); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-block: var(--space-5) var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: rgba(255, 255, 255, 0.5);
}

/* ==================================== 8. RESPONSIVE BEHAVIOR (breakpoints) === */

/* Tablet: 640px–1024px — two columns, hamburger, headings −15–20% */
@media (max-width: 1024px) {
  :root {
    --fs-display-lg: 54px;
    --fs-heading-lg: 45px;
    --fs-heading-md: 36px;
    --fs-heading-sm: 28px;
    --section-y: 48px;
    --hero-y: 64px;
    --space-16: 48px;
  }

  .nav__links, .nav__text-link { display: none; }
  .nav__toggle { display: grid; width: 44px; height: 44px; }

  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }
  .hero__lede { max-width: 60ch; }

  .band__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

  .feature-grid, .usecase-grid, .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .builder { grid-template-columns: minmax(0, 1fr); }
  .builder__result { border-inline-start: 0; border-top: 1px solid var(--border-stroke); }
  .builder__filters { padding: var(--space-6); }
  .builder__result { padding: var(--space-6); }

  .api__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }

  .pricing-grid { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; }
  .plan--featured { order: -1; }

  .custom { padding: var(--space-16) var(--space-8); }
  .footer__top { grid-template-columns: minmax(0, 1fr); gap: var(--space-9); }

  /* Card interiors contract to 12px on tablet */
  .feature, .usecase, .plan, .field-chip { padding: var(--space-3); }
  .plan--featured { padding-top: var(--space-5); }
}

/* Mobile: < 640px — single column, 12px padding, headings −25–30% */
@media (max-width: 640px) {
  :root {
    --fs-display-lg: 46px;
    --lh-display-lg: 1.08;
    --fs-heading-lg: 39px;
    --fs-heading-md: 31px;
    --fs-heading-sm: 24px;
    --fs-subheading: 20px;
    --gutter: var(--space-3);
    --section-y: 32px;
    --hero-y: 36px;
    --space-16: 36px;
  }

  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { width: 100%; }
  .checks { flex-direction: column; gap: var(--space-3); }

  .section-head { margin-bottom: var(--space-8); }

  .feature-grid, .usecase-grid, .field-grid { grid-template-columns: minmax(0, 1fr); }

  /* Touch targets: 44px minimum for anything tappable */
  .btn, .chip-toggle { min-height: 44px; }
  .nav__mobile-actions .btn { height: 44px; }

  .builder__filters { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }
  .builder__result { padding: var(--space-4); }
  .builder__cta .btn { width: 100%; }

  .table-card__head, .table-card__filters { padding: var(--space-3); }
  .table-card__count { margin-inline-start: 0; width: 100%; }

  .custom { padding: var(--space-9) var(--space-4); }
  .custom__examples li { font-size: var(--fs-caption); }

  .faq__q { padding: var(--space-4); gap: var(--space-3); font-size: var(--fs-body); font-weight: 700; }
  .faq__panel p { padding: 0 var(--space-9) var(--space-4) var(--space-4); font-size: var(--fs-body-sm); }

  .final-cta__buttons { flex-direction: column; }
  .final-cta__buttons .btn { width: 100%; }

  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
  .footer__bottom { flex-direction: column; align-items: flex-start; }

  /* Card interiors contract to 8px on mobile */
  .feature, .usecase, .plan, .field-chip { padding: var(--space-2); }
  .plan--featured { padding-top: var(--space-4); }
}

@media (max-width: 420px) {
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------- motion & printing --- */

.js .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

@media print {
  .nav, .hero__cta, .final-cta__buttons { display: none; }
  body { color: #000; }
  .section { padding-block: var(--space-6); }
}

/* Small structural leftovers */
.footer__domain { color: rgba(255, 255, 255, 0.5); }

/* Contact columns in the dataset preview.
   Emails are fictional addresses on the reserved .example TLD; phone numbers
   are masked, so nothing here can resolve to a real address or number. */
table.dataset .is-email { color: var(--text-secondary); }
table.dataset .is-phone .masked {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius-compact);
  background: var(--light-gray);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}
table.dataset .is-phone .masked svg { flex: none; color: var(--medium-gray); }
table.dataset .is-empty { color: var(--medium-gray); }

/* ==================================== DOCUMENT PAGES (legal, questions) === */

.doc-page { padding-block: var(--space-16) var(--space-20); background: var(--surface); }
.doc-page__inner { max-width: 780px; }

.crumbs { margin-bottom: var(--space-8); }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-secondary); }
.crumbs a { color: var(--text-secondary); }
.crumbs a:hover { color: var(--primary); }
.crumbs [aria-current="page"] { color: var(--text-primary); font-weight: 500; }
.crumbs__sep { color: var(--medium-gray); transform: rotate(-90deg); }

.doc-page__head { margin-bottom: var(--space-8); }
.doc-page__head h1 {
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-heading-lg);
  font-weight: 700;
  color: var(--text-primary);
}
.doc-page__standfirst {
  margin-top: var(--space-5);
  font-size: var(--fs-subheading);
  line-height: 1.45;
  font-weight: 400;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.doc-page__meta {
  margin-top: var(--space-5);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}

/* Prose — the only place on the site where long-form text runs. */
.prose { font-size: var(--fs-body); line-height: 1.7; color: var(--text-body); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 {
  margin-top: var(--space-16);
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-heading-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.prose h3 {
  margin-top: var(--space-8);
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  font-weight: 700;
  color: var(--text-primary);
}
.prose p { text-wrap: pretty; }
.prose strong { color: var(--text-primary); font-weight: 600; }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-inline-start: var(--space-5); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--medium-gray); }
.prose code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--light-gray);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius-compact);
  padding: 0.08em 0.34em;
  color: var(--text-primary);
}

/* The answer block that leads every GEO page — deliberately the first thing
   in the document body so it is trivially extractable. */
.answer {
  padding: var(--space-5) var(--space-6);
  border: 1px solid color-mix(in srgb, var(--primary) 24%, transparent);
  border-inline-start: 3px solid var(--primary);
  border-radius: var(--radius);
  background: var(--surface-accent);
}
.answer > * + * { margin-top: var(--space-3); }
.answer p { color: var(--text-body); }

.note-block {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--light-gray);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}

.doc-page__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-20);
  padding: var(--space-6);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--surface-accent);
}
.doc-page__cta h2 {
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  font-weight: 700;
  color: var(--text-primary);
}
.doc-page__cta p {
  margin-top: var(--space-1);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}

.related { display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.related a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text-primary);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  text-decoration: none;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}
.related a:hover { border-color: var(--primary); background: var(--surface-accent); text-decoration: none; }
.related a svg { flex: none; color: var(--primary); }

@media (max-width: 640px) {
  .doc-page { padding-block: var(--space-9) var(--space-16); }
  .doc-page__cta { flex-direction: column; align-items: stretch; }
  .doc-page__cta .btn { width: 100%; }
}

/* ========================================================= ACCESS FORM === */
/* Field metrics follow §4 Text Input: 44px tall, 6px radius,
   1px solid rgba(0,0,0,0.08), blue focus glow. */

.access-form {
  max-width: 620px;
  margin: var(--space-8) auto 0;
  padding: var(--space-6);
  border: 1px solid var(--border-stroke);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: start;
  box-shadow: var(--elev-3);
}

.access-form__head h3 {
  font-size: var(--fs-subheading);
  line-height: var(--lh-subheading);
  font-weight: 700;
  color: var(--text-primary);
}
.access-form__head p {
  margin-top: var(--space-2);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}

.access-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-5);
}

.field { display: grid; gap: var(--space-2); min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.field__input {
  width: 100%;
  height: 44px;
  padding: 11px 12px;
  border: 1px solid var(--border-input);
  border-radius: var(--radius-input);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 24px;
  font-weight: 400;
  color: var(--text-body);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field__input::placeholder { color: var(--text-placeholder); }
.field__input:hover { border-color: var(--border-emphasis); }
.field__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 117, 222, 0.16);
}
.field__input:focus-visible { outline: none; }
/* :user-invalid only matches after the visitor has actually interacted, so
   empty required fields are not flagged red the moment the page loads. */
.field__input:user-invalid {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(246, 73, 50, 0.14);
}

.field__textarea { height: auto; min-height: 84px; resize: vertical; }

.field__select { position: relative; }
.field__select .field__input { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; cursor: pointer; }
.field__chevron {
  position: absolute;
  top: 50%; inset-inline-end: var(--space-3);
  transform: translateY(-50%);
  color: var(--text-secondary);
  pointer-events: none;
}

/* Formspree honeypot — must be in the DOM and reachable by bots, hidden from
   people. Not display:none, which some bots detect and skip.
   Clipped rather than pushed off-screen: a negative offset creates ~10,000px of
   inline overflow, which is invisible in LTR but becomes real scrollable width
   in RTL and opens the Arabic pages on an empty viewport. */
.access-form__gotcha {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.access-form__foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}
.access-form__consent {
  font-size: var(--fs-caption);
  line-height: var(--lh-caption);
  color: var(--text-secondary);
  flex: 1 1 220px;
}

.access-form__status {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-input);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
}
.access-form__status--ok {
  background: rgba(39, 145, 141, 0.1);
  border: 1px solid rgba(39, 145, 141, 0.24);
  color: #1C6A67;
}
.access-form__status--ok strong { display: block; color: #14514F; }
.access-form__status--error {
  background: rgba(246, 73, 50, 0.08);
  border: 1px solid rgba(246, 73, 50, 0.26);
  color: #8E2415;
}

.access-form[data-state="sending"] { opacity: 0.75; }
.access-form[data-state="sending"] .field__input { pointer-events: none; }

.final-cta__alt {
  margin-top: var(--space-5);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body-sm);
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  .access-form { padding: var(--space-4); }
  .access-form__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .access-form__foot { flex-direction: column; align-items: stretch; }
  .access-form__foot .btn { width: 100%; }
}

/* ==================================================== RIGHT-TO-LEFT (ar) === */
/* Logical properties handle layout mirroring on their own. What is left are
   the things that carry direction as meaning: arrows and chevrons that point
   somewhere, and a numeric column that must stay LTR. */

[dir="rtl"] .btn__arrow svg,
[dir="rtl"] .link-arrow svg,
[dir="rtl"] .related a svg { transform: scaleX(-1); }

[dir="rtl"] .btn:hover .btn__arrow { transform: translateX(-2px); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(2px); }
[dir="rtl"] .related a:hover svg { transform: scaleX(-1) translateX(2px); }

[dir="rtl"] .crumbs__sep { transform: rotate(90deg); }

/* Latin-script data stays left-to-right inside an RTL page: URLs, emails,
   masked phone numbers and code all become unreadable if the browser reorders
   them around the Arabic text they sit next to. */
[dir="rtl"] .is-url,
[dir="rtl"] .is-email,
[dir="rtl"] .is-phone,
[dir="rtl"] .explorer__search-text,
[dir="rtl"] .editor__body,
[dir="rtl"] .prose code,
[dir="rtl"] .footer__domain {
  direction: ltr;
  text-align: start;
  unicode-bidi: isolate;
}
[dir="rtl"] .is-num { direction: ltr; unicode-bidi: isolate; }

/* The plan badge is centred by transform, which must not be mirrored. */
[dir="rtl"] .plan__badge { transform: translate(50%, -50%); inset-inline-start: auto; right: 50%; }

/* Arabic typography. Inter carries no Arabic glyphs, so the Arabic face leads
   the stack on RTL pages and Inter stays behind it for Latin runs (brand name,
   URLs, numerals) that appear inside Arabic text. */
[lang="ar"] {
  --font-primary: "IBM Plex Sans Arabic", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", sans-serif;
}
[lang="ar"] body { font-size: 16.5px; line-height: 1.75; }
[lang="ar"] .eyebrow,
[lang="ar"] .badge,
[lang="ar"] .field label,
[lang="ar"] .builder__label,
[lang="ar"] .footer__col-title,
[lang="ar"] table.dataset thead th,
[lang="ar"] .explorer__table thead th {
  letter-spacing: 0;   /* letter-spacing breaks Arabic letter joining */
}
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { letter-spacing: 0; line-height: 1.35; }
[lang="ar"] .hero__title { line-height: 1.3; }
[lang="ar"] .section-title { line-height: 1.35; }

/* Language switch */
.nav__locale {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 6px var(--space-3);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-compact);
  font-size: var(--fs-body-sm);
  line-height: 20px;
  font-weight: 500;
  color: var(--text-body);
  white-space: nowrap;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.nav__locale:hover {
  color: var(--primary);
  border-color: var(--primary);
  background: var(--surface-accent);
  text-decoration: none;
}
.nav__mobile-locale { padding-block: var(--space-3); border-bottom: 1px solid var(--border-stroke); }
.nav__mobile-locale .nav__locale { width: 100%; justify-content: center; height: 44px; }

@media (max-width: 1024px) { .nav__actions .nav__locale { display: none; } }

/* The explorer overflows toward the inline-end edge, which is the left in RTL —
   the fade has to follow it or the trailing columns get sliced instead. */
[dir="rtl"] .explorer__table-wrap {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to left, #000 calc(100% - 40px), transparent 100%);
}