/* ProspectChief marketing site — "ProspectChief Premium" design system.
   Brand: forest green family from the extension panel header (#0D5147), orange "Chief" (#F28C28).
   Palette roles: deep forest = primary and dark bands; mint = soft section backgrounds; warm off-white =
   resting surfaces; orange = the signature accent, used deliberately (eyebrow dashes, benefit markers,
   accent lines, one heading highlight, focus rings) — never as a whole-page colour.
   Spacing is a single 4px-based scale; sections share one vertical rhythm token so every page
   breathes the same way from 360px to 1440px+. Legacy --s* aliases remain for existing pages. */
:root {
  --brand-forest: #0D5147;
  --brand-forest-deep: #093A33;
  --brand-forest-ink: #072B26; /* deepest band colour (dark sections, CTA band) */
  --brand-green: #116B5C;
  --brand-green-hover: #0D5A4D;
  --brand-mint: #E7F3EE;
  --brand-mint-soft: #F2F8F5;
  --brand-mint-bg: #EEF6F2;
  --brand-orange: #F28C28;
  --brand-orange-hover: #D97618;
  --brand-orange-ink: #9E4D05; /* orange as text: ≥4.5:1 on white, mint and orange-soft */
  --brand-orange-soft: #FFF1E3;
  --text-primary: #142623;
  --text-heading: #0F2420; /* dark charcoal-green headings */
  --text-muted: #526560;
  --text-faint: #5E6E69; /* ≥4.5:1 on white and soft surfaces */
  --text-on-dark: #F4F8F6;
  --text-on-dark-muted: #B9D4CB;
  --surface: #FFFFFF;
  --surface-warm: #FBFAF6; /* warm off-white */
  --surface-soft: #F4F8F6;
  --surface-sunken: #ECF3F0;
  --border: #D7E3DE;
  --border-strong: #B9CCC5;
  --success: #16805D;
  --warning: #8F5300; /* ≥4.5:1 on the amber badge surfaces */
  --danger: #B53B36;
  --info: #2A4FA3;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-frame: 14px; /* screenshot frames: one radius for every capture */
  /* Depth: three restrained levels. Frames use --shadow-frame (soft forest tint, short spread). */
  --shadow-sm: 0 1px 2px rgba(20, 38, 35, .06), 0 2px 8px rgba(20, 38, 35, .04);
  --shadow: 0 1px 2px rgba(20, 38, 35, .06), 0 8px 24px rgba(20, 38, 35, .07);
  --shadow-lg: 0 2px 4px rgba(20, 38, 35, .06), 0 20px 48px -16px rgba(13, 81, 71, .24);
  --shadow-frame: 0 1px 2px rgba(20, 38, 35, .08), 0 18px 40px -18px rgba(9, 58, 51, .30);
  --border-frame: 1px solid rgba(20, 38, 35, .12);
  /* Motion: one easing, three durations. Transform/opacity only; everything is gated on prefers-reduced-motion. */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 180ms;
  --dur: 240ms;
  --dur-slow: 350ms;
  /* Controls */
  --btn-h: 44px;
  --btn-h-lg: 52px;
  --btn-h-sm: 38px;
  --btn-radius: 10px;
  --container: 1240px;
  --container-wide: 1320px;
  --container-narrow: 820px;
  --header-h: 72px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Spacing scale (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;
  /* Semantic rhythm */
  --gutter: clamp(16px, 4vw, 24px);
  --section-y: clamp(48px, 6.5vw, 88px);
  --section-y-tight: clamp(36px, 5vw, 64px);
  --stack: var(--space-4);
  --card-pad: clamp(22px, 2.6vw, 32px);
  --grid-gap: clamp(16px, 2.4vw, 28px);
  /* Legacy aliases used inline on existing pages */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 40px; --s6: 48px; --s8: 64px; --s10: 80px;

  /* Fluid type scale: display (home hero) → h1 → h2 → h3 → lede → body → small → micro */
  --fs-display: clamp(36px, 1.7rem + 2.3vw, 62px);
  --fs-h1: clamp(30px, 1.6rem + 1.6vw, 48px);
  --fs-h2: clamp(26px, 1.35rem + 1.1vw, 38px);
  --fs-h3: clamp(18px, 1.05rem + .25vw, 21px);
  --fs-lede: clamp(17px, 1rem + .35vw, 20px);
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-micro: 13px;
  /* Shared backgrounds: flat, quiet surfaces. The hero is a short mint-to-ivory fade with no glow. */
  --bg-hero: linear-gradient(180deg, var(--brand-mint-bg) 0%, var(--surface-warm) 100%);
  --bg-mint: linear-gradient(180deg, var(--brand-mint-bg) 0%, var(--brand-mint-soft) 100%);
  --bg-dark: linear-gradient(170deg, var(--brand-forest-ink) 0%, var(--brand-forest-deep) 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font: 400 var(--fs-body)/1.6 var(--font); color: var(--text-primary); background: var(--surface); }
img, svg, picture { max-width: 100%; height: auto; display: block; }
a { color: var(--brand-green); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--brand-green-hover); }
:focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 var(--space-4); letter-spacing: -0.015em; color: var(--text-heading); text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: 760; }
h2 { font-size: var(--fs-h2); font-weight: 720; }
h3 { font-size: var(--fs-h3); font-weight: 680; }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0 0 var(--space-4); padding-left: 1.2em; }
small, .muted { color: var(--text-muted); }
.small { font-size: var(--fs-small); }
code { font: 14px/1.5 var(--mono); background: var(--surface-soft); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 1px 6px; overflow-wrap: anywhere; }
pre { background: #0f2a25; color: var(--text-on-dark); border-radius: var(--radius); padding: var(--space-4) var(--space-6); overflow: auto; font-size: 14px; max-width: 100%; }
pre code { background: transparent; border: 0; color: inherit; padding: 0; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: top; line-height: 1.5; }
th { background: var(--surface-soft); font-weight: 650; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 720px; }
.table-wrap th:first-child, .table-wrap td:first-child { padding-left: var(--space-4); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -48px; background: var(--brand-forest); color: #fff; padding: 10px 14px; border-radius: var(--radius-sm); z-index: 100; }
.skip-link:focus { top: var(--space-2); }
.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container-narrow { width: min(var(--container-narrow), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Wordmark: Prospect + Chief joined, Chief in orange, no inserted whitespace. */
.wordmark { font-weight: 800; letter-spacing: -0.02em; font-size: 22px; color: var(--brand-forest); white-space: nowrap; }
.wordmark b { color: var(--brand-orange); font-weight: inherit; }
.wordmark-footer { color: var(--text-on-dark); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .9); backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-icon { width: 36px; height: 36px; flex: none; }
.brand-footer .brand-icon { width: 32px; height: 32px; }
.site-nav { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: var(--space-6); }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav-item { position: relative; }
.nav-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; background: none; font: inherit; font-weight: 560; color: var(--text-primary); border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
@media (max-width: 1100px) and (min-width: 961px) { .nav-link { padding: 0 10px; font-size: 16px; } .header-inner, .site-nav { gap: var(--space-4); } }
.nav-link:hover, .nav-link[aria-expanded="true"] { background: var(--surface-soft); color: var(--brand-forest); }
.has-menu > .nav-link::after { content: ""; width: 7px; height: 7px; margin-left: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: var(--space-2); display: grid; gap: 2px; }
[hidden] { display: none !important; }
.menu-card { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-primary); }
.menu-card:hover { background: var(--surface-soft); color: var(--text-primary); }
.menu-card strong { font-weight: 640; }
.menu-card span { font-size: 14px; color: var(--text-muted); }
.nav-actions { display: flex; align-items: center; gap: var(--space-2); }
.nav-toggle { display: none; margin-left: auto; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; position: relative; }
.nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { content: ""; position: absolute; left: 11px; width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; }
.nav-toggle-bar { top: 21px; }
.nav-toggle-bar::before { top: -7px; left: 0; }
.nav-toggle-bar::after { top: 7px; left: 0; }
@media (max-width: 960px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: var(--header-h); flex-direction: column; align-items: stretch; background: var(--surface); border-bottom: 1px solid var(--border); padding: var(--space-4) var(--gutter) var(--space-6); box-shadow: var(--shadow); max-height: calc(100vh - var(--header-h)); overflow: auto; }
  .site-nav.is-open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-link { width: 100%; }
  .nav-menu { position: static; min-width: 0; border: 0; box-shadow: none; padding: 0 0 var(--space-2) var(--space-4); }
  .nav-actions { flex-direction: column; align-items: stretch; }
}

/* Buttons */
/* Buttons: one height scale (--btn-h*), one radius, hover lifts 1px with a soft shadow, pressed returns flat. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 0 20px; border-radius: var(--btn-radius); border: 1px solid transparent; font: inherit; font-weight: 620; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); white-space: nowrap; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: 80ms; }
.btn-primary { background: var(--brand-green); color: #fff; box-shadow: 0 1px 2px rgba(13, 81, 71, .18), inset 0 -1px 0 rgba(0, 0, 0, .08); }
.btn-primary:hover { background: var(--brand-green-hover); color: #fff; box-shadow: 0 4px 12px -2px rgba(13, 81, 71, .32), inset 0 -1px 0 rgba(0, 0, 0, .08); }
.btn-primary:active { box-shadow: 0 1px 2px rgba(13, 81, 71, .18), inset 0 1px 0 rgba(0, 0, 0, .08); }
.btn-secondary { background: var(--surface); color: var(--brand-forest); border-color: var(--border-strong); }
.btn-secondary:hover { border-color: var(--brand-green); color: var(--brand-forest); background: var(--brand-mint-soft); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--surface-soft); color: var(--brand-forest); transform: none; }
.btn-accent { background: var(--brand-orange); color: #1a1208; }
.btn-accent:hover { background: var(--brand-orange-hover); color: #1a1208; }
.btn-on-dark { background: #fff; color: var(--brand-forest); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.btn-on-dark:hover { background: var(--brand-mint); color: var(--brand-forest); box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .35); }
.btn-lg { min-height: var(--btn-h-lg); padding: 0 26px; font-size: 17px; }
.btn-sm { min-height: var(--btn-h-sm); padding: 0 14px; font-size: 15px; }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
@media (max-width: 480px) { .btn-row .btn { flex: 1 1 100%; } .btn { white-space: normal; } }

/* Sections */
.section { padding: var(--section-y) 0; }
.section-tight { padding: var(--section-y-tight) 0; }
.section-soft { background: var(--surface-soft); }
.section-mint { background: var(--bg-mint); }
.section-warm { background: var(--surface-warm); }
.section-dark { background: var(--bg-dark); color: var(--text-on-dark); }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark a { color: #cfe9df; }
.section-dark .muted { color: var(--text-on-dark-muted); }
.section-dark .lede { color: #cfe9df; }
.section-dark .btn-secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .4); }
.section-dark .btn-secondary:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: #fff; }
/* Band seams: a thin orange accent line marks the transition into a dark band. */
.section-dark.has-accent-line { border-top: 3px solid var(--brand-orange); }
.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .lede { margin-inline: auto; }
.section-head .lede:last-child { margin-bottom: 0; }
.section-head.center > p { margin-inline: auto; max-width: 640px; }
.section-head.wide { max-width: none; }
.section-head.wide h2 { max-width: none; text-wrap: balance; }
@media (min-width: 900px) { .section-head.wide .flow-title { white-space: nowrap; font-size: clamp(24px, 2.4vw, 34px); } }
.flow-title .arrow { color: var(--brand-orange); font-weight: 600; padding: 0 .12em; }
/* Eyebrow: uppercase label with a short orange dash — the system's smallest accent. */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-green); margin-bottom: var(--space-3); }
.eyebrow::before { content: ""; flex: none; width: 18px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-orange), #F6A54D); }
.section-dark .eyebrow { color: #8fd5bd; }
.badge.eyebrow::before { display: none; }
.lede { font-size: var(--fs-lede); color: var(--text-muted); max-width: 640px; line-height: 1.55; }
.section-dark .lede { color: #cfe9df; }
.grid { display: grid; gap: var(--grid-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1024px) { .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; } }
.stack > * + * { margin-top: var(--stack); }
.mt-2 { margin-top: var(--space-4); } .mt-3 { margin-top: var(--space-6); } .mt-4 { margin-top: var(--space-8); } .mt-5 { margin-top: var(--space-10); }
.flex-between { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--card-pad); box-shadow: var(--shadow-sm); }
.card h3 { margin-top: var(--space-2); }
.card > :last-child { margin-bottom: 0; }
.card .btn { margin-top: var(--space-4); }
.card p { line-height: 1.6; }
.card-soft { background: var(--surface-soft); border-color: transparent; box-shadow: none; }
.card-hover { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.card-hover:hover { box-shadow: var(--shadow); border-color: var(--border-strong); transform: translateY(-2px); }
.card-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--brand-mint); color: var(--brand-forest); display: grid; place-items: center; margin-bottom: var(--space-3); }
.card-icon svg { width: 22px; height: 22px; }
/* Accent card: a thin orange top rule marks the one card a section wants the eye to land on. */
.card-accent { border-top: 3px solid var(--brand-orange); }
.section-dark .card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: var(--text-on-dark); box-shadow: none; }
.section-dark .card h3 { color: #fff; }
ul.checks { list-style: none; padding: 0; margin: var(--space-4) 0; display: grid; gap: 8px; }
.checks li { position: relative; padding-left: 26px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 7px; width: 14px; height: 8px; border-left: 2.5px solid var(--success); border-bottom: 2.5px solid var(--success); transform: rotate(-45deg); }
.section-dark .checks li::before { border-color: var(--brand-orange); }
/* Benefit markers: short inline list under a hero CTA row with small green check marks (no decorative dots). */
.benefits { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-6) 0 0; padding: 0; list-style: none; font-size: 15px; font-weight: 560; color: var(--text-muted); }
.benefits li { display: inline-flex; align-items: center; gap: 9px; }
.benefits li::before { content: ""; flex: none; width: 11px; height: 6px; margin-top: -3px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }
/* Heading highlight: a soft orange marker behind one phrase; text stays charcoal for contrast. */
.hl { background: linear-gradient(transparent 62%, rgba(242, 140, 40, .28) 62%, rgba(242, 140, 40, .28) 92%, transparent 92%); border-radius: 2px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; padding: 4px 10px; border-radius: 999px; background: var(--brand-mint); color: var(--brand-forest); line-height: 1.4; }
.badge-warn { background: #fff4e3; color: var(--warning); }
.badge-neutral { background: #eef2f1; color: var(--text-muted); }
.badge-store { background: #e9f0ff; color: var(--info); }
.badge-manual { background: #fff4e3; color: var(--warning); }
.badge-accent { background: var(--brand-orange-soft); color: #9a4b05; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* Hero (generic): copy left, product visual right, on the shared flat mint-to-ivory surface.
   Product pages, pricing and the homepage all use this same surface. */
.hero { padding: clamp(40px, 5vw, 64px) 0 clamp(40px, 5vw, 64px); background: var(--bg-hero); position: relative; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero h1 { max-width: 16ch; }
.hero .lede { margin-bottom: var(--space-8); }
/* Product-page visual: the figure hugs the screenshot (fit-content), never a card larger than its image.
   Portrait panels are capped so the hero stays close to one viewport tall; landscape shots fill the column. */
.hero-media { position: relative; display: flex; justify-content: center; }
.hero-media figure { margin: 0; width: fit-content; max-width: 100%; border-radius: var(--radius-frame); overflow: hidden; border: var(--border-frame); box-shadow: var(--shadow-frame); background: #fff; }
.hero-media img { aspect-ratio: auto; object-fit: contain; max-height: min(560px, 72vh); width: auto; max-width: 100%; margin-inline: auto; }
/* width:0 + min-width:100% lets the image, not the caption text, decide the figure width. */
.hero-media figcaption { width: 0; min-width: 100%; font-size: 13px; color: var(--text-muted); padding: 9px 14px; border-top: 1px solid var(--border); text-align: center; }
.hero-media .media.contain img { background: transparent; }
.hero-motif { position: absolute; inset: auto -120px -160px auto; width: 520px; opacity: .55; pointer-events: none; }
.trust-line { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); margin-top: var(--space-6); font-size: 15px; color: var(--text-muted); }
.trust-line span::before { content: "•"; color: var(--brand-orange); margin-right: 8px; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero h1 { max-width: none; } .hero-media img { max-height: 520px; } }

/* Homepage hero — dashboard-first. Copy sits centred above a full-width dashboard in a browser frame;
   the Bing and Google panels are small previews pinned to the frame's lower corners so the dashboard
   stays the anchor. Panels are shown whole (no cropping of controls) and link to the full-size capture. */
.hero-home { padding: clamp(36px, 4.5vw, 56px) 0 0; }
.hero-home .container { width: min(var(--container-wide), 100% - 2 * var(--gutter)); }
.hero-home .hero-grid { grid-template-columns: 1fr; justify-items: center; gap: clamp(32px, 3.6vw, 48px); }
.hero-home .hero-copy { max-width: 760px; text-align: center; }
.hero-home .hero-copy .lede, .hero-home .hero-copy .btn-row, .hero-home .hero-copy .benefits { justify-content: center; margin-inline: auto; }
.hero-home .hero-copy h1 { max-width: none; font-size: clamp(34px, 1.3rem + 2.2vw, 58px); line-height: 1.06; letter-spacing: -0.024em; margin-bottom: var(--space-5); }
/* Each sentence is an unbreakable unit: two lines at desktop, three on narrow screens. */
.hero-home .hero-copy h1 .line { display: inline-block; }
.hero-home .hero-copy .lede { margin-bottom: var(--space-6); max-width: 62ch; }
.hero-home .btn-row { gap: var(--space-3); }
/* Bottom padding is the part of the corner panels that hangs below the frame, so they overlap only the
   lower third of the dashboard. */
.hero-compose { position: relative; width: min(1120px, 100%); padding: 0 0 clamp(56px, 8.5vw, 124px); }
.browser-frame { position: relative; z-index: 1; margin: 0; border-radius: var(--radius-frame); border: var(--border-frame); background: #fff; box-shadow: var(--shadow-frame); overflow: hidden; }
.browser-frame .frame-bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; background: #f1f5f3; border-bottom: 1px solid var(--border); }
.browser-frame .frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5dfda; }
.browser-frame .frame-bar i:first-child { background: var(--brand-orange); opacity: .8; }
.browser-frame .frame-bar .frame-url { margin-left: 10px; flex: 1; max-width: 420px; height: 22px; border-radius: 6px; background: #fff; border: 1px solid var(--border); font: 500 12px/20px var(--mono); color: var(--text-faint); padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.browser-frame img { width: 100%; }
/* Caption sits centred below the frame, between the two corner panels. */
.compose-caption { position: relative; z-index: 1; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--text-primary); text-align: center; margin: var(--space-4) auto 0; max-width: 50%; }
.compose-caption .compose-note { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--text-faint); }
/* Hero entrance: copy first, then the dashboard, then the two panels. Transform/opacity only (no layout shift),
   gated on prefers-reduced-motion so reduced-motion users and no-animation contexts see the static composition. */
@media (prefers-reduced-motion: no-preference) {
  .hero-home .hero-copy > * { animation: hero-enter var(--dur-slow) var(--ease) both; }
  .hero-home .hero-copy > :nth-child(2) { animation-delay: 40ms; }
  .hero-home .hero-copy > :nth-child(3) { animation-delay: 80ms; }
  .hero-home .hero-copy > :nth-child(4) { animation-delay: 120ms; }
  .hero-home .hero-copy > :nth-child(5) { animation-delay: 160ms; }
  .hero-home .browser-frame,
  .hero-home .float-panel,
  .hero-home .compose-caption { animation: hero-enter 420ms var(--ease) both; }
  .hero-home .browser-frame { animation-delay: 140ms; }
  .hero-home .float-bing { animation-delay: 300ms; }
  .hero-home .float-google { animation-delay: 360ms; }
  .hero-home .compose-caption { animation-delay: 420ms; }
}
@keyframes hero-enter { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* The two panels sit on the frame's bottom corners and extend onto the surface below it; shown whole. */
.hero-compose .float-panel { position: absolute; z-index: 2; bottom: 0; width: clamp(140px, 16.5%, 184px); margin: 0; border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-frame); border: var(--border-frame); background: #fff; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.hero-compose .float-panel:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.hero-compose .float-panel img { width: 100%; aspect-ratio: 1040 / 1640; object-fit: contain; }
.hero-compose .float-google { right: -40px; }
.hero-compose .float-bing { left: -40px; }
.hero-compose .float-panel figcaption { display: grid; gap: 1px; font-size: 12px; font-weight: 650; line-height: 1.3; padding: 7px 10px; color: #fff; background: var(--brand-forest); text-align: center; }
.hero-compose .float-panel .shot-edition { font-size: 11px; font-weight: 500; color: var(--text-on-dark-muted); }
@media (max-width: 1100px) { .hero-compose .float-google { right: 0; } .hero-compose .float-bing { left: 0; } .compose-caption { max-width: 56%; } }
@media (max-width: 900px) {
  .hero-home .hero-grid { gap: var(--space-8); }
  .hero-home .hero-copy { max-width: 640px; text-align: left; }
  .hero-home .hero-copy .lede, .hero-home .hero-copy .btn-row, .hero-home .hero-copy .benefits { justify-content: flex-start; margin-inline: 0; }
  .hero-home .hero-copy h1 .line { display: block; }
  .hero-compose .float-panel { width: 22%; }
}
@media (max-width: 768px) {
  .hero-compose { padding-bottom: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .browser-frame { grid-column: 1 / -1; }
  .hero-compose .float-panel { position: static; width: auto; }
  .hero-compose .float-panel img { aspect-ratio: auto; }
  .compose-caption { grid-column: 1 / -1; grid-row: 2; margin-top: 0; max-width: none; text-align: left; }
}
@media (max-width: 480px) { .hero-home .hero-copy h1 { font-size: 34px; } }
.hero-after { background: var(--surface); color: var(--text-primary); padding: var(--space-4) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.hero-after .logos { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) 0; color: var(--text-muted); font-size: 14px; font-weight: 560; letter-spacing: .01em; margin: 0; }
.hero-after .logos span { display: inline-flex; align-items: center; padding: 0 clamp(12px, 1.8vw, 24px); }
.hero-after .logos span + span { border-left: 1px solid var(--border); }

/* Steps */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { position: relative; padding-left: 56px; }
.steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-forest); color: #fff; font-weight: 700; display: grid; place-items: center; }
.steps h3 { margin-bottom: 4px; }
/* Five-step flow: centered badge + copy per column so the row balances the centered title/CTA.
   Stacks to two columns on tablets and to a vertical timeline (badge left, line down) on phones. */
.steps-flow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--grid-gap); }
.steps-flow li { padding-left: 0; padding-top: 52px; text-align: center; }
.steps-flow li::before { left: 50%; top: 0; width: 36px; height: 36px; font-size: 15px; transform: translateX(-50%); }
.steps-flow h3 { font-size: 17px; margin-bottom: 6px; }
.steps-flow p { font-size: 15px; line-height: 1.55; margin: 0; }
@media (max-width: 1024px) { .steps-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .steps-flow { grid-template-columns: 1fr; gap: var(--space-5); }
  .steps-flow li { padding-left: 52px; padding-top: 0; padding-bottom: var(--space-2); text-align: left; }
  .steps-flow li::before { left: 0; transform: none; }
  .steps-flow li:not(:last-child)::after { content: ""; position: absolute; left: 17px; top: 40px; bottom: calc(-1 * var(--space-5) + 4px); width: 1px; background: var(--border); }
}
/* Flow on a dark band: orange step numbers with a faint ring; connector between badges at desktop. */
.section-dark .steps li::before { background: var(--brand-orange); color: #1a1208; box-shadow: 0 0 0 4px rgba(242, 140, 40, .18); }
.section-dark .steps h3 { color: #fff; }
.section-dark .steps p { color: var(--text-on-dark-muted); }
.section-dark .steps-flow li:not(:last-child)::after { background: rgba(255, 255, 255, .18); }
@media (min-width: 1025px) {
  /* Hairline from the right edge of one centered badge to the left edge of the next. */
  .section-dark .steps-flow li:not(:last-child)::after { content: ""; position: absolute; top: 18px; left: calc(50% + 22px); right: calc(-50% - var(--grid-gap) + 22px); height: 1px; background: rgba(255, 255, 255, .18); }
}
.flow-cta { justify-content: center; margin-top: clamp(28px, 4vw, 40px); }
.section-dark.has-accent-line { padding: clamp(44px, 5.5vw, 72px) 0; }
.section-dark.has-accent-line .section-head { margin-bottom: clamp(24px, 3.5vw, 40px); }
.workflow { display: grid; gap: clamp(32px, 5vw, 64px); }
.workflow li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--grid-gap); align-items: center; }
.workflow li:nth-child(even) > div { order: 2; }
@media (max-width: 900px) { .workflow li { grid-template-columns: 1fr; } .workflow li:nth-child(even) > div { order: 0; } }

/* Media figures: every screenshot shares one frame — 16px radius, hairline border, soft forest shadow —
   so captures read as the same product across pages. Disclosures live in the figcaption, not on the image. */
.media { margin: 0; border: var(--border-frame); border-radius: var(--radius-frame); overflow: hidden; background: #fff; box-shadow: var(--shadow-frame); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.media:hover, .media-frame:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.media.ratio-4-3 img { aspect-ratio: 4 / 3; }
.media.ratio-16-9 img { aspect-ratio: 16 / 9; }
.media.ratio-auto img { aspect-ratio: auto; }
.media.contain img { object-fit: contain; background: var(--surface-soft); }
/* Portrait captures (Maps panels, FEE popup) are shown whole: the figure hugs the image, no crop, no padding. */
.media.media-panel img, .media.media-popup img { aspect-ratio: auto; object-fit: contain; width: auto; max-width: 100%; max-height: var(--panel-h, 520px); }
.media.media-panel, .media.media-popup { width: fit-content; max-width: 100%; margin-inline: auto; }
/* Small UI captures (an extension card) are shown at natural size, centred, never stretched to the column. */
.media.media-card { max-width: 520px; margin-inline: auto; }
/* Screenshot inside a browser frame (dashboard captures): same frame tokens as the hero. */
.media-frame { margin: 0; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
/* Product shots: the figure is a plain link to the full-resolution capture; no invented lightbox. */
.product-shot a.shot-link { display: block; color: inherit; }
.product-shot a.shot-link:hover img { filter: brightness(.98); }
.product-shot figcaption .shot-open { float: right; font-weight: 600; color: var(--brand-green); }
.media figcaption { width: 0; min-width: 100%; font-size: 13px; color: var(--text-muted); padding: 9px 14px; border-top: 1px solid var(--border); text-align: center; }
.media-illustration { border-style: dashed; }

/* Tabs — progressively enhanced. Without JS every panel is visible in order and the tab links jump.
   Visual column: one shared stage height (--panel-h) so switching tabs never moves the page. */
.tabs { --tab-accent: var(--brand-forest); --panel-h: clamp(360px, 36vw, 520px); }
.tablist { display: flex; flex-wrap: wrap; gap: 4px; padding: 5px; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--border); width: fit-content; max-width: 100%; margin: 0 auto var(--space-10); list-style: none; }
.tablist li { display: contents; }
.tab { display: inline-flex; align-items: center; gap: 8px; min-height: var(--btn-h); padding: 0 20px; border-radius: 999px; border: 0; background: transparent; font: inherit; font-weight: 620; color: var(--text-muted); cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.tab:hover { color: var(--brand-forest); background: rgba(255, 255, 255, .6); }
.tab[aria-selected="true"], .tab.is-active { background: var(--brand-forest); color: #fff; box-shadow: 0 1px 2px rgba(9, 58, 51, .25); }
.tab[aria-selected="true"]:hover { color: #fff; background: var(--brand-forest); }
.tab-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.tab-panel + .tab-panel { margin-top: var(--section-y-tight); }
.tabs[data-enhanced] .tab-panel + .tab-panel { margin-top: 0; }
.tab-panel .panel-title { font-size: var(--fs-h2); }
.tab-panel .pill-row { margin-bottom: var(--space-3); }
.tab-panel:focus { outline: none; }
.tab-visual { display: flex; align-items: center; justify-content: center; gap: var(--grid-gap); min-height: calc(var(--panel-h) + 40px); }
.tab-visual-pair .media { flex: 0 1 auto; }
.showcase-note { text-align: center; font-size: var(--fs-micro); color: var(--text-faint); margin: var(--space-6) 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .tabs[data-enhanced] .tab-panel:not([hidden]) { animation: panel-in var(--dur) var(--ease) both; }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .tabs { --panel-h: clamp(320px, 52vw, 460px); } .tab-panel { grid-template-columns: 1fr; } .tab-visual { min-height: 0; } .tablist { width: 100%; justify-content: stretch; border-radius: 16px; } .tab { flex: 1 1 auto; justify-content: center; padding: 0 12px; } }
@media (max-width: 480px) { .tab { font-size: 15px; } .tabs { --panel-h: none; } .tab-visual { flex-direction: column; } .media.media-panel img, .media.media-popup img { max-height: none; } }

/* Scroll-reveal (progressive): site.js adds `.reveal-ready` to <html> only when JS runs and motion is allowed,
   then marks each [data-reveal] `.is-visible` once. Without JS or with reduced motion nothing is ever hidden. */
.reveal-ready [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

/* Dashboard preview (illustrative table in app chrome) */
.dash-preview { border: var(--border-frame); border-radius: var(--radius-frame); background: #fff; box-shadow: var(--shadow-frame); overflow: hidden; }
.dash-preview .dash-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 12px 16px; background: var(--brand-forest); color: #fff; font-size: 14px; }
.dash-preview .dash-bar strong { font-weight: 700; }
.dash-preview .dash-bar .dash-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-preview .dash-bar .dash-chips span { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .14); }
.dash-preview .dash-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface-soft); }
.dash-preview .dash-filters span { font-size: 13px; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text-muted); }
.dash-preview .dash-filters span.on { color: var(--brand-forest); border-color: var(--brand-green); background: var(--brand-mint-soft); font-weight: 600; }
.dash-preview .table-wrap { border: 0; border-radius: 0; }
.dash-preview table { min-width: 1080px; font-size: 14px; }
.dash-preview th { position: sticky; top: 0; font-size: 12.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--text-muted); background: #fff; border-bottom: 1px solid var(--border-strong); }
.dash-preview td { white-space: nowrap; }
.dash-preview td .sub { display: block; font-size: 12.5px; color: var(--text-faint); }
.dash-preview tbody tr:last-child td { border-bottom: 0; }
.dash-preview .dash-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); padding: 10px 16px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--border); }
/* Horizontal-scroll affordance: a soft fade on the edge that still has columns; site.js toggles the
   data-scroll-* flags from the actual scroll position, and hides the hint when every column fits. */
.dash-preview .dash-scroll { position: relative; }
.dash-preview .dash-scroll::before, .dash-preview .dash-scroll::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; pointer-events: none; opacity: 0; transition: opacity var(--dur-fast) var(--ease); z-index: 1; }
.dash-preview .dash-scroll::before { left: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.dash-preview .dash-scroll::after { right: 0; background: linear-gradient(270deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); }
.dash-preview .dash-scroll[data-scroll-start]::before { opacity: 1; }
.dash-preview .dash-scroll[data-scroll-end]::after { opacity: 1; }
.dash-preview .dash-scroll-hint { font-weight: 600; color: var(--brand-green); }
.dash-preview .dash-scroll-hint[hidden] { display: none; }
.scroll-hint { font-size: 13px; color: var(--text-faint); margin-top: var(--space-2); }
@media (min-width: 1200px) { .scroll-hint { display: none; } }

/* Workspace showcase: copy beside a browser-framed dashboard that takes the larger share of the row. */
.showcase-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.showcase-frame { width: 100%; }
@media (max-width: 900px) { .showcase-grid { grid-template-columns: 1fr; } }

/* Pricing */
/* Pricing hero: short — eyebrow, headline, one-sentence description, live-price status. Commercial
   distinctions (separate subscriptions, credits, discount rules) live on the cards and in the FAQ. */
.pricing-hero { padding: clamp(40px, 5vw, 72px) 0 clamp(24px, 3vw, 40px); background: var(--bg-hero); text-align: center; }
.pricing-hero h1 { max-width: none; font-size: var(--fs-display); margin-inline: auto; }
.pricing-hero .lede { margin-inline: auto; max-width: 56ch; }
.pricing-hero .price-status { min-height: 22px; margin: 0; }
.pricing-head { text-align: center; padding: var(--section-y-tight) 0 var(--space-6); }
.pricing-head .lede { margin-inline: auto; }
.plan-group { padding: var(--section-y-tight) 0; }
.plan-group + .plan-group { border-top: 1px solid var(--border); }
.plan-group-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); }
.plan-group-head h2 { margin: 0; }
.plan-group-head .muted { margin: var(--space-1) 0 0; max-width: 60ch; }
.plan-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); align-items: stretch; }
@media (max-width: 760px) { .plan-cards { grid-template-columns: 1fr; } .plan-group-head { align-items: flex-start; } .plan-group-head .interval-toggle { width: 100%; justify-content: stretch; } .plan-group-head .interval-toggle button { flex: 1; justify-content: center; } }
/* Price card hierarchy: plan name → one-line benefit → price → billing period → savings → note → CTA.
   Fixed min-heights on the secondary lines keep the three cards and their CTAs on one baseline. */
.price-card { position: relative; display: flex; flex-direction: column; }
.price-card .plan-name { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-forest); margin: 0 0 var(--space-1); }
.price-card .plan-benefit { font-size: 15px; color: var(--text-muted); margin: 0 0 var(--space-4); min-height: 48px; }
.price-card .price { font-size: clamp(40px, 4.2vw, 52px); font-weight: 780; letter-spacing: -0.03em; line-height: 1; margin: 0 0 6px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; color: var(--text-heading); }
.price-card .price small { font-size: 15px; font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.price-card .price-period { font-size: 14px; color: var(--text-faint); margin: 0 0 var(--space-2); min-height: 22px; }
.price-card .price-note { min-height: 44px; font-size: 14px; color: var(--text-muted); margin: 0 0 var(--space-2); }
.price-card .price-meta { display: grid; gap: 4px; font-size: 14px; color: var(--text-muted); margin: 0 0 var(--space-3); min-height: 22px; }
.price-card .price-meta .save { color: var(--success); font-weight: 650; }
.price-card .btn { margin-top: auto; }
.price-grid { align-items: stretch; }
/* One recommended plan per page: a forest border with an orange ribbon. Other cards stay neutral. */
.price-card.featured { border: 2px solid var(--brand-green); background: linear-gradient(180deg, #ffffff 0%, var(--brand-mint-soft) 100%); box-shadow: var(--shadow); }
.price-card .badge.ribbon { position: absolute; top: -13px; left: var(--card-pad); background: var(--brand-orange); color: #1a1208; box-shadow: var(--shadow-sm); }
.price-card .badge.ribbon:empty { display: none; }
.interval-toggle { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px; background: var(--surface); box-shadow: var(--shadow-sm); }
.interval-toggle button { border: 0; background: transparent; font: inherit; font-weight: 620; padding: 8px 18px; border-radius: 999px; cursor: pointer; color: var(--text-muted); min-height: 42px; display: inline-flex; align-items: center; gap: 8px; }
.interval-toggle button[aria-pressed="true"] { background: var(--brand-forest); color: #fff; }
.interval-toggle button .save-pill { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--brand-orange-soft); color: var(--brand-orange-ink); }
.interval-toggle button[aria-pressed="true"] .save-pill { background: var(--brand-orange); color: #1a1208; }
.interval-toggle button .save-pill:empty { display: none; }
.price-status { font-size: 14px; color: var(--text-muted); }
.pricing-fineprint { font-size: var(--fs-small); color: var(--text-faint); margin: var(--space-6) 0 0; }
[data-price] { font-variant-numeric: tabular-nums; }
[data-price]:empty::before { content: "—"; color: var(--text-muted); }
.compare { font-size: 15px; }
.table-wrap table.compare { min-width: 520px; }
.compare th:not(:first-child), .compare td:not(:first-child) { text-align: center; width: 22%; }
.compare td.yes::before { content: "✓"; color: var(--success); font-weight: 700; }
.compare td.no::before { content: "—"; color: var(--text-faint); }
.compare tbody th { background: transparent; font-weight: 560; }
.payment-methods { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-2); }
.payment-methods span { font-size: 13px; font-weight: 650; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: #fff; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.payment-methods .pay-mark { width: 48px; height: 28px; padding: 3px 6px; border-radius: 8px; border: 1px solid var(--border); background: #fff; object-fit: contain; box-sizing: content-box; }

/* FAQ */
/* FAQ: native <details> for keyboard and screen-reader support. The open/close height animates in browsers
   that support ::details-content + interpolate-size (Chrome 131+); elsewhere it simply toggles. */
.faq { interpolate-size: allow-keywords; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 var(--space-6); background: var(--surface); transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.faq details + details { margin-top: var(--space-2); }
.faq details:hover { border-color: var(--border-strong); }
.faq details[open] { border-color: var(--border-strong); background: var(--surface-warm); }
.faq summary { cursor: pointer; font-weight: 640; padding: var(--space-4) 0; list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); min-height: 44px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px; border-right: 2px solid var(--brand-green); border-bottom: 2px solid var(--brand-green); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details::details-content { block-size: 0; overflow: clip; transition: block-size var(--dur) var(--ease), content-visibility var(--dur) allow-discrete; }
.faq details[open]::details-content { block-size: auto; }
.faq details p { padding-bottom: var(--space-4); color: var(--text-muted); }

/* Notices */
.notice { border-left: 4px solid var(--brand-green); background: var(--brand-mint); border-radius: var(--radius-sm); padding: var(--space-4) var(--space-6); margin: var(--space-6) 0; }
.notice-warn { border-left-color: var(--warning); background: #fff7ea; }
.notice-danger { border-left-color: var(--danger); background: #fdf0ef; }
.notice p:last-child { margin: 0; }

/* Prose pages (help, legal) */
/* Legal / long-form articles: the intro and the article share one narrow column and one left edge. */
.prose { max-width: var(--container-narrow); }
.page-head:has(+ .prose), .page-head.narrow { width: min(var(--container-narrow), 100% - 2 * var(--gutter)); }
.prose h2 { margin-top: var(--space-10); font-size: 26px; }
.prose h3 { margin-top: var(--space-8); }
.prose img { border: 1px solid var(--border); border-radius: var(--radius); }
.page-head { padding: var(--section-y-tight) 0 var(--space-6); }
.page-head .lede { margin-bottom: 0; }
/* Full-bleed bands for sections authored as `.container` elements: the band paints behind the
   container edge-to-edge (inset to the viewport), so soft/mint/hero surfaces never stop at the gutter. */
body { overflow-x: clip; }
.container.page-head, .container.section-soft, .container.section-mint { position: relative; z-index: 0; background: none; }
.container.page-head::before, .container.section-soft::before, .container.section-mint::before { content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw); }
.container.page-head::before { background: var(--bg-hero); }
.container.section-soft::before { background: var(--surface-soft); }
.container.section-mint::before { background: var(--bg-mint); }
.container.page-head { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(28px, 4vw, 48px); }
body.page-legal .container.page-head::before, body.page-help .container.page-head::before { background: none; }
.page-head.center { text-align: center; }
.page-head.center .lede { margin-inline: auto; }
.page-head + .section, .page-head + .section-tight, .pricing-head + .plan-group { padding-top: var(--space-6); }
.legal-status { margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-soft); }
.prose { line-height: 1.65; }
.prose li + li { margin-top: 6px; }
.toc { border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4) var(--space-6); background: var(--surface-soft); font-size: 15px; }
.toc ul { margin: 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(28px, 5vw, 64px); align-items: start; }
/* minmax(0, …) in both layouts: a plain 1fr track has a min-content floor, so a long <code> or <pre> line
   would widen the column past the viewport on phones. */
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* Status chips used in data preview and claimed explanations */
.chip { display: inline-block; font-size: 12.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px; border: 1px solid transparent; line-height: 1.5; }
.chip-claimed { background: #e4f4ec; color: var(--success); }
.chip-unclaimed { background: #fff0e6; color: #a6480f; }
.chip-unknown { background: #eef2f1; color: var(--text-muted); }
.chip-google { background: #e9f0ff; color: var(--info); }
.chip-bing { background: #e7f6f1; color: var(--brand-forest); }
.chip-locked { background: #f3f3f3; color: #666; }
.chip-ok { background: #e4f4ec; color: var(--success); }
.chip-warn { background: #fff4e3; color: var(--warning); }

/* Final CTA band */
/* Final CTA band: deep forest surface, one orange rule on the left, one primary button and a quiet text link. */
.cta-band { position: relative; overflow: hidden; background: var(--bg-dark); color: #fff; border-radius: var(--radius-xl); padding: clamp(32px, 5vw, 56px) clamp(28px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-8); align-items: center; border: 1px solid rgba(255, 255, 255, .08); }
.cta-band::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--brand-orange); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band .eyebrow { color: #8fd5bd; }
.cta-band h2 { color: #fff; margin-bottom: var(--space-2); font-size: clamp(26px, 1.3rem + 1.2vw, 36px); }
.cta-band p { color: #cfe9df; margin: 0; max-width: 52ch; }
.cta-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3); }
.cta-link { color: #cfe9df; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(207, 233, 223, .5); padding-bottom: 1px; }
.cta-link:hover { color: #fff; border-bottom-color: #fff; }
@media (max-width: 900px) { .cta-band { grid-template-columns: 1fr; } .cta-actions { align-items: flex-start; } }

/* Footer */
.site-footer { background: var(--brand-forest-ink); color: var(--text-on-dark); padding: var(--section-y-tight) 0 var(--space-8); margin-top: var(--space-6); border-top: 3px solid var(--brand-orange); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: var(--space-8) var(--space-6); }
.footer-brand p { color: #b6cfc7; max-width: 300px; margin-top: var(--space-4); font-size: 15px; line-height: 1.55; }
.footer-col h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: #8fd5bd; margin-bottom: var(--space-4); }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-col a { color: var(--text-on-dark); text-decoration: none; font-size: 15px; transition: color var(--dur-fast) var(--ease); }
.footer-col a:hover { text-decoration: underline; text-underline-offset: 3px; color: #fff; }
.footer-legal { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: var(--space-10); padding-top: var(--space-6); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); font-size: 14px; color: #b6cfc7; }
.footer-legal ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-4); }
.footer-legal a { color: var(--text-on-dark); }
.footer-legal > p { flex-basis: 100%; margin: 0; }
.footer-pay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.footer-pay-label { font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: #b6cfc7; margin-right: 4px; }
.footer-pay .pay-mark { width: 40px; height: 24px; padding: 2px 5px; border-radius: 6px; background: #fff; border: 1px solid rgba(255, 255, 255, .18); object-fit: contain; box-sizing: content-box; }
@media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; } }

/* Install method tiles */
.install-tile { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6px; }
.install-tile .badge { justify-self: start; }
.install-tile .btn-row { align-self: end; margin-top: var(--space-2); }
.install-tile .btn-row .btn { margin-top: 0; }

/* Comparison table status words */
.st-available { color: var(--success); font-weight: 650; }
.st-planned { color: var(--text-muted); }
.st-source { color: var(--warning); font-weight: 600; }
.st-unavailable { color: var(--danger); }
.st-derived { color: var(--info); font-weight: 600; }
.st-included { color: var(--success); font-weight: 650; }
.st-listed { color: var(--text-primary); font-weight: 600; }
.st-enrichment { color: var(--info); font-weight: 600; }
.table-disclosure { margin: var(--space-4) 0 0; max-width: 72ch; }
.table-disclosure + .table-disclosure { margin-top: var(--space-2); }

/* ---- Contact form */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--grid-gap); align-items: start; }
.contact-aside { display: grid; gap: var(--space-4); }
.contact-form h2 { margin-top: 0; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.field { display: grid; gap: var(--space-1); margin: 0 0 var(--space-4); font-size: var(--fs-small); color: var(--text-muted); }
.field > span { font-weight: 600; color: var(--text-primary); }
.field input, .field select, .field textarea { width: 100%; font: inherit; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 42px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 1px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin: var(--space-2) 0 var(--space-4); }
.form-status { font-size: var(--fs-small); color: var(--text-muted); }
.form-status.is-ok { color: var(--brand-green); }
.form-status.is-error { color: var(--danger); }
.form-fallback { margin: 0; }
@media (max-width: 860px) {
  .contact-layout, .form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Search form (help center): input shrinks before the button wraps; never wider than the viewport. */
.search-form { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; padding: var(--space-2); margin-top: var(--space-6); }
.search-form input { flex: 1 1 180px; min-width: 0; min-height: 44px; border: 1px solid var(--border); border-radius: 10px; padding: 0 14px; font: inherit; color: var(--text-primary); background: var(--surface); }
.search-form .btn { margin-top: 0; }

/* ---- Uninstall feedback */
.uninstall-reasons { border: 0; padding: 0; margin: 0 0 var(--space-6); display: grid; gap: 6px; }
.uninstall-reasons legend { font-weight: 650; margin-bottom: var(--space-3); padding: 0; }
.uninstall-reasons label { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 6px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.uninstall-reasons label:hover { background: var(--surface-soft); }
.uninstall-reasons input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand-green); }
.uninstall-form .field textarea { min-height: 110px; }
.uninstall-thanks h2 { margin-top: 0; }