/* ============================================================================
   LinkMartin marketing site — layout layer.
   This is the only file the site owns. Everything visual comes from tokens.css;
   every component class (lm-*) comes from components.css. Site-only classes are
   prefixed s-.

   Two rules the design system imposes and this file must not break:
   - Border-first: a card is white with a 1px warm border and NO shadow.
   - Flat brand purple. Never a blue-purple gradient (visual-identity.md 3a).
   ============================================================================ */

/* ---- shell ---- */
.s-shell { max-width: var(--lm-content-max); margin: 0 auto; padding: 0 var(--lm-space-10); }
.s-measure { max-width: 62ch; }
.s-skip { position: absolute; left: -9999px; }
.s-skip:focus { position: static; display: inline-block; margin: var(--lm-space-4); }

/* ---- nav ---- */
.s-nav { position: sticky; top: 0; z-index: 10; background: var(--lm-veil);
  backdrop-filter: var(--lm-blur-chrome); border-bottom: var(--lm-border-width) solid var(--lm-border); }
.s-nav__in { max-width: var(--lm-content-max); margin: 0 auto; padding: var(--lm-space-6) var(--lm-space-10);
  display: flex; align-items: center; gap: var(--lm-space-10); }
.s-nav__mark { display: flex; align-items: center; gap: var(--lm-space-4); font-size: var(--lm-text-2xl); text-decoration: none; }
.s-nav__mark img { display: block; width: 24px; height: 24px; }
.s-nav__links { display: flex; align-items: center; gap: var(--lm-space-9); margin-left: auto;
  font-family: var(--lm-font-ui); font-size: var(--lm-text-base); }
.s-nav__links a { color: var(--lm-text-body); text-decoration: none; }
.s-nav__links a:hover { color: var(--lm-text-brand); }
.s-nav__links a[aria-current="page"] { color: var(--lm-text-brand); font-weight: var(--lm-weight-semibold); }
/* Site override, not a components.css edit: opacity was the wrong tool here. Reducing opacity dims
   the WHOLE button — background and white text together — toward whatever sits behind it. Against
   the nav's pale, blurred backdrop the white text washes out at nearly the same rate as the purple
   background lightens, so the text-to-background contrast collapses even though the button itself is
   still visible (confirmed against a screenshot 2026-08-12: icon crisp, label gone). Solid, fully
   opaque colours fix that at the root, because nothing is left blending with the backdrop: a pale
   purple tint (already a token, --lm-brand-soft) with dark purple text reads clearly as muted/inert
   — nowhere near the bold solid-purple-on-white of the enabled state — and stays legible regardless
   of what's behind it. Remove this override the moment {{CWS_URL}} is live and aria-disabled comes
   off all six. */
.lm-btn--primary[aria-disabled="true"] { opacity: 1; background: var(--lm-brand-soft); color: var(--lm-text-brand); }

.s-chrome-icon { flex: none; width: 16px; height: 16px; }
.lm-btn--lg .s-chrome-icon { width: 18px; height: 18px; }

/* ---- bands ---- */
.s-band { padding: var(--lm-space-14) 0; }
.s-band--tight { padding: var(--lm-space-13) 0; }
.s-band--card { background: var(--lm-surface-card); border-top: var(--lm-border-width) solid var(--lm-border);
  border-bottom: var(--lm-border-width) solid var(--lm-border); }
.s-band--sunken { background: var(--lm-surface-sunken); border-top: var(--lm-border-width) solid var(--lm-border);
  border-bottom: var(--lm-border-width) solid var(--lm-border); }
.s-band--brand { background: var(--lm-surface-brand); color: var(--lm-purple-200); }
.s-band--brand h2, .s-band--brand h3 { color: var(--lm-text-on-brand); }
.s-band--brand a { color: var(--lm-purple-200); }
.s-band--brand a:hover { color: var(--lm-text-on-brand); }

.s-eyebrow { font-family: var(--lm-font-ui); font-size: var(--lm-text-xs); font-weight: var(--lm-weight-semibold);
  letter-spacing: var(--lm-tracking-caps); text-transform: uppercase; color: var(--lm-text-meta);
  margin: 0 0 var(--lm-space-6); }
.s-band--brand .s-eyebrow { color: var(--lm-purple-300); }

h1.s-h1 { font-size: clamp(2.1rem, 5.2vw, var(--lm-text-5xl)); line-height: var(--lm-leading-tight); }
h2.s-h2 { font-size: clamp(1.6rem, 3.4vw, var(--lm-text-4xl)); margin-bottom: var(--lm-space-8); }
h3.s-h3 { font-size: var(--lm-text-xl); margin-bottom: var(--lm-space-5); }

.s-lede { font-size: var(--lm-text-xl); line-height: var(--lm-leading-normal); color: var(--lm-text-body);
  margin: var(--lm-space-9) 0 0; }
.s-band--brand .s-lede { color: var(--lm-purple-200); }
.s-p { font-size: var(--lm-text-md); line-height: var(--lm-leading-relaxed); margin: 0 0 var(--lm-space-6); }
.s-note { font-family: var(--lm-font-ui); font-size: var(--lm-text-sm); color: var(--lm-text-meta); margin: var(--lm-space-6) 0 0; }

/* ---- hero ---- */
.s-hero { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--lm-space-13); align-items: center;
  padding: var(--lm-space-14) 0 var(--lm-space-13); }
.s-cta { display: flex; flex-wrap: wrap; gap: var(--lm-space-6); margin-top: var(--lm-space-11); }

/* ---- the bird. Vector now (assets/img/bird/illustrations/*.svg, 400x400 viewBox each, brand purple ramp) —
   the old raster pose set is deleted upstream and is no longer a source. Vectors size freely; these
   caps are a layout choice for each slot, not a raster ceiling. ---- */
.s-bird { display: block; width: 100%; height: auto; }
.s-bird--hero { max-width: 360px; }      /* hero: wings-spread-side-on, the one large bird used everywhere */
.s-bird--footer { max-width: 190px; }    /* footer: wings-spread-side-on, centred */
.s-bird-figure { margin: 0; display: flex; justify-content: center; }
.s-bird-figure--right { justify-content: flex-end; }

/* ---- browsers.md: nominative use of each vendor's own icon — one size, aligned, icon then name,
   no recolouring, never locked up with our own mark. ---- */
.s-browser-list { display: flex; flex-wrap: wrap; gap: var(--lm-space-9); margin: var(--lm-space-9) 0; padding: 0;
  list-style: none; }
.s-browser-list__item { display: flex; align-items: center; gap: var(--lm-space-4); font-family: var(--lm-font-ui);
  font-size: var(--lm-text-md); font-weight: var(--lm-weight-semibold); color: var(--lm-text-heading); }
.s-browser-list__item img { display: block; width: 28px; height: 28px; }

/* ---- the two-row "all features / one feature" fact list, browsers.md 2026-08-12: label above value
   in the eyebrow treatment, so the completeness-then-exception shape reads as two parallel blocks
   rather than a paragraph. Labels are full clauses, not short tags, so rows stack rather than sit in
   a fixed-width column. ---- */
.s-facts { display: grid; gap: var(--lm-space-8); margin: var(--lm-space-9) 0; }
.s-facts__row .s-eyebrow { margin: 0 0 var(--lm-space-3); }
.s-facts__row .s-p { margin: 0; }
.s-facts__google { display: flex; gap: var(--lm-space-8); align-items: center; flex-wrap: wrap; }
.s-facts__google .s-p { flex: 1 1 320px; }
.lm-serp-diagram { max-width: 260px; height: auto; flex: 0 0 auto; }
@media (max-width: 640px) {
  .s-facts__row { grid-template-columns: 1fr; gap: var(--lm-space-3); }
}

/* ---- steps ---- */
.s-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lm-space-10); }
.s-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lm-space-10); }
.s-step h3 { font-family: var(--lm-font-display); font-size: var(--lm-text-2xl); color: var(--lm-text-brand);
  margin: 0 0 var(--lm-space-4); }
.s-step p { margin: 0; font-size: var(--lm-text-md); }

/* ---- split (copy + illustration) ---- */
.s-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--lm-space-13); align-items: center; }
.s-split--narrow-right { grid-template-columns: 1.2fr 0.8fr; }

/* ---- the card-in-Google illustration. Deliberately NOT a Chrome mock-up:
   it is an illustration of the feature, and it is labelled as one. ---- */
.s-card-in-google { background: var(--lm-surface-card); border: var(--lm-border-width) solid var(--lm-border);
  border-radius: var(--lm-radius-3xl); padding: var(--lm-space-8) var(--lm-space-9); }
.s-card-in-google__head { display: flex; align-items: center; gap: var(--lm-space-5); padding-bottom: var(--lm-space-6);
  border-bottom: var(--lm-border-width) solid var(--lm-border); margin-bottom: var(--lm-space-7);
  font-family: var(--lm-font-ui); font-size: var(--lm-text-sm); font-weight: var(--lm-weight-semibold);
  color: var(--lm-text-brand); }
.s-card-in-google__dot { width: 18px; height: 18px; border-radius: var(--lm-radius-xs); background: var(--lm-brand); flex: none; }
.s-card-in-google__row { display: flex; gap: var(--lm-space-6); padding: var(--lm-space-6) 0; }
.s-card-in-google__row + .s-card-in-google__row { border-top: var(--lm-border-width) solid var(--lm-border); }
.s-card-in-google__thumb { width: 44px; height: 34px; border-radius: var(--lm-radius-sm); background: var(--lm-surface-sunken);
  border: var(--lm-border-width) solid var(--lm-border); flex: none; }
.s-card-in-google__t { font-family: var(--lm-font-ui); font-size: var(--lm-text-base); font-weight: var(--lm-weight-semibold);
  color: var(--lm-text-link); margin: 0 0 2px; }
.s-card-in-google__d { font-family: var(--lm-font-ui); font-size: var(--lm-text-sm); color: var(--lm-text-body); margin: 0 0 var(--lm-space-4); }
.s-card-in-google__meta { display: flex; flex-wrap: wrap; gap: var(--lm-space-3); align-items: center; }
.s-caption { font-family: var(--lm-font-ui); font-size: var(--lm-text-xs); color: var(--lm-text-meta);
  margin: var(--lm-space-6) 0 0; text-align: center; }

/* ---- limits band ---- */
.s-limits { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lm-space-8); }
.s-limits li { padding-left: var(--lm-space-9); border-left: var(--lm-border-accent) solid var(--lm-border-strong);
  font-size: var(--lm-text-md); }

/* ---- questions (/) — the GEO block: question as the heading, direct answer as the first sentence.
   Two columns so six questions do not read as a long scroll, and each question heading links to its
   guide article. Answers keep a measure of their own; the grid column is wider than comfortable
   reading. ---- */
.s-questions { display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--lm-space-11) var(--lm-space-13); margin-top: var(--lm-space-11); }
.s-questions h3 { font-size: var(--lm-text-lg); margin: 0 0 var(--lm-space-4); }
.s-questions h3 a { color: inherit; text-decoration: none; border-bottom: var(--lm-border-width) solid var(--lm-border-strong); }
.s-questions h3 a:hover { color: var(--lm-text-brand); border-bottom-color: var(--lm-brand); }
.s-questions p { margin: 0; font-size: var(--lm-text-md); max-width: 46ch; }

/* ---- plans ---- */
.s-plan { display: flex; flex-direction: column; gap: var(--lm-space-6); }
.s-plan__name { font-family: var(--lm-font-display); font-size: var(--lm-text-2xl); color: var(--lm-text-brand); margin: 0; }
.s-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lm-space-5); }
.s-plan li { padding-left: var(--lm-space-8); position: relative; font-size: var(--lm-text-md); }
.s-plan li::before { content: "—"; position: absolute; left: 0; color: var(--lm-accent); }
.s-price { font-family: var(--lm-font-display); font-size: var(--lm-text-lg); color: var(--lm-text-meta); margin: 0; }
.s-price--set { color: var(--lm-text-brand); }

/* ---- band on --lm-purple-900, distinct from the --lm-band--brand opener at purple-700 ---- */
.s-band--brand-dark { background: var(--lm-purple-900); color: var(--lm-purple-200); }
.s-band--brand-dark h2, .s-band--brand-dark h3 { color: var(--lm-text-on-brand); }
.s-band--brand-dark .s-eyebrow { color: var(--lm-purple-300); }
.s-band--brand-dark .lm-card { color: var(--lm-text-body); }
.s-band--brand-dark .lm-card h2, .s-band--brand-dark .lm-card h3 { color: var(--lm-text-heading); }

/* ---- features: one per row, full width, alternating grounds, no purple in the rows.
   Each row reuses .s-split (copy one side, placeholder the other); .s-split--reverse flips which
   side the copy sits on so the eye has something to follow row to row. ---- */
.s-split--reverse > *:first-child { order: 2; }
.s-split--reverse > *:last-child { order: 1; }
.s-row { border-top: var(--lm-border-width) solid var(--lm-border); padding: var(--lm-space-13) 0; }
.s-row--paper { background: var(--lm-surface-page); }
.s-row--card { background: var(--lm-surface-card); }
.s-row--sunken { background: var(--lm-surface-sunken); }
.s-feature__kicker { display: block; font-family: var(--lm-font-ui); font-size: var(--lm-text-xs);
  font-weight: var(--lm-weight-semibold); letter-spacing: var(--lm-tracking-caps); text-transform: uppercase;
  color: var(--lm-text-meta); margin: 0 0 var(--lm-space-6); }
/* Brand-purple on the headline, not the kicker above — a deliberate callback to the purple opener
   band so the six rows read as a continuation of "What LinkMartin does" rather than a new,
   disconnected section. Moved here from the kicker 2026-08-12: at headline size the colour carries
   much further and is what a reader's eye actually lands on scrolling through the rows. */
.s-feature h3 { font-size: var(--lm-text-2xl); color: var(--lm-text-brand); margin: 0 0 var(--lm-space-5); }
.s-feature p { font-size: var(--lm-text-md); margin: 0 0 var(--lm-space-5); }
.s-feature__shot { aspect-ratio: 16 / 9; border: var(--lm-border-width) dashed var(--lm-border-strong);
  border-radius: var(--lm-radius-lg); background: var(--lm-surface-sunken); display: flex; align-items: center;
  justify-content: center; padding: var(--lm-space-6); }
.s-row--sunken .s-feature__shot { background: var(--lm-surface-card); }
.s-feature__shot span { font-family: var(--lm-font-ui); font-size: var(--lm-text-xs); color: var(--lm-text-meta);
  text-align: center; max-width: 34ch; }

/* ---- plan comparison table: content, not decoration — row-for-row correspondence between Free
   and Pro is the entire argument, so it ships as a real <table>, styled as two aligned columns. ---- */
.s-compare { width: 100%; border-collapse: collapse; margin-top: var(--lm-space-9); }
.s-compare th, .s-compare td { text-align: left; padding: var(--lm-space-6); border-bottom: var(--lm-border-width) solid var(--lm-border); vertical-align: top; }
.s-compare thead th { font-family: var(--lm-font-display); font-size: var(--lm-text-lg); color: var(--lm-text-brand); font-weight: var(--lm-weight-regular); }
.s-compare tbody th { font-family: var(--lm-font-ui); font-size: var(--lm-text-base); font-weight: var(--lm-weight-semibold); color: var(--lm-text-heading); width: 40%; }
.s-compare td { font-size: var(--lm-text-md); }
.s-compare td:first-of-type { border-right: var(--lm-border-width) solid var(--lm-border); }
.s-compare tbody th:not([colspan]) + td[data-plan="pro"], .s-compare td[data-plan="pro"] { background: var(--lm-brand-soft); }
/* The caption under a value cell is the anti-flattening layer: a self-contained sentence naming the
   value and its plan, for AI tools and crawlers that read the page as flat text (see plans.html).
   Base .s-caption is a centred figure caption — inside the table it left-aligns under its value. */
.s-compare .s-caption { display: block; margin-top: var(--lm-space-2); text-align: left; }

/* ---- form pages ---- */
.s-form { display: grid; gap: var(--lm-space-9); max-width: 520px; }
.s-form textarea.lm-input__el { min-height: 132px; padding: var(--lm-space-5) 0; resize: vertical; line-height: var(--lm-leading-relaxed); }
.s-form .lm-input--area { height: auto; align-items: flex-start; }
.s-radios { display: grid; gap: var(--lm-space-5); }

/* ---- onboarding stepper (/welcome). One step visible at a time — see welcome-stepper.js.
   Centred, one slide per screen, sized closer to the hero rather than a scannable list — the
   two-column numeral layout made sense when all five cards were stacked at once; on its own each
   card now reads as a single slide. [hidden] needs the explicit override below because .lm-card's
   own display outranks the browser's default [hidden]{display:none}. ---- */
.s-cards { display: grid; gap: var(--lm-space-6); max-width: 620px; margin: 0 auto; }
.s-cards .lm-card { display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--lm-space-4); }
.s-cards .lm-card[hidden] { display: none; }
.s-cards__n { font-family: var(--lm-font-display); font-size: var(--lm-text-2xl); color: var(--lm-accent); }
.s-cards h3 { font-size: var(--lm-text-3xl); margin: 0; }
.s-cards p { margin: 0; font-size: var(--lm-text-xl); max-width: 46ch; }
.s-cards__acts { display: flex; flex-wrap: wrap; gap: var(--lm-space-5); margin-top: var(--lm-space-4);
  justify-content: center; }

.s-stepper__nav { display: flex; align-items: center; justify-content: space-between;
  margin: var(--lm-space-9) auto 0; max-width: 620px; }
.s-stepper__nav[hidden] { display: none; }
.s-stepper__dots { display: flex; gap: var(--lm-space-3); }
.s-stepper__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lm-border-strong); }
.s-stepper__dot.is-active { background: var(--lm-brand); }

/* ---- guide ---- */
.s-guide { display: grid; grid-template-columns: 260px 1fr; gap: var(--lm-space-13); align-items: start; }
.s-toc { position: sticky; top: 76px; font-family: var(--lm-font-ui); font-size: var(--lm-text-base); }
.s-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lm-space-4); }
.s-toc a { color: var(--lm-text-body); text-decoration: none; }
.s-toc a:hover { color: var(--lm-text-brand); }
.s-topic { padding-top: var(--lm-space-11); }
.s-topic + .s-topic { border-top: var(--lm-border-width) solid var(--lm-border); margin-top: var(--lm-space-11); }
.s-topic h2 { font-size: var(--lm-text-3xl); margin-bottom: var(--lm-space-4); }
.s-arts { list-style: none; margin: var(--lm-space-8) 0 0; padding: 0; display: grid; gap: var(--lm-space-4); }
.s-arts li { display: flex; gap: var(--lm-space-6); font-size: var(--lm-text-md); }
.s-arts code { color: var(--lm-text-meta); font-size: var(--lm-text-sm); }

.s-art { margin-top: var(--lm-space-9); scroll-margin-top: 88px; }
/* Alias anchors (#own-ai-key, #ai-instructions) live on the h3 inside the article, so the h3 needs the
   same clearance under the sticky nav as the article itself — otherwise the heading lands hidden. */
.s-art h3[id] { scroll-margin-top: 88px; }
.s-art h3 { font-size: var(--lm-text-xl); margin-bottom: var(--lm-space-3); display: flex; align-items: baseline; gap: var(--lm-space-4); flex-wrap: wrap; }
.s-art h3 code { color: var(--lm-text-meta); font-size: var(--lm-text-sm); font-weight: var(--lm-weight-regular); }
.s-art p { margin: 0 0 var(--lm-space-5); }
.s-art p:last-child { margin-bottom: 0; }

/* ---- long-form legal documents (privacy, terms) ---- */
.s-doc { max-width: 72ch; }
.s-doc h2 { font-size: var(--lm-text-2xl); margin: var(--lm-space-13) 0 var(--lm-space-5); }
.s-doc h3 { font-size: var(--lm-text-lg); margin: var(--lm-space-9) 0 var(--lm-space-4); }
.s-doc p { margin: 0 0 var(--lm-space-6); }
.s-doc ul, .s-doc ol { margin: 0 0 var(--lm-space-6); padding-left: var(--lm-space-9); display: grid; gap: var(--lm-space-3); }
.s-doc table { width: 100%; border-collapse: collapse; margin: 0 0 var(--lm-space-8); font-size: var(--lm-text-base); }
.s-doc th, .s-doc td { text-align: left; padding: var(--lm-space-4) var(--lm-space-6); border-bottom: var(--lm-border-width) solid var(--lm-border); vertical-align: top; }
.s-doc th { color: var(--lm-text-meta); font-weight: var(--lm-weight-semibold); }
.s-doc caption { text-align: left; caption-side: top; color: var(--lm-text-meta); font-size: var(--lm-text-sm); margin-bottom: var(--lm-space-3); }

/* ---- holding notice, for pages whose text is not ours to publish ---- */
.s-holding { background: var(--lm-status-warn-bg); border-left: var(--lm-border-accent) solid var(--lm-amber-600);
  border-radius: 0 var(--lm-radius-2xl) var(--lm-radius-2xl) 0; padding: var(--lm-card-padding);
  font-family: var(--lm-font-ui); font-size: var(--lm-text-base); color: var(--lm-neutral-700); }
.s-holding strong { color: var(--lm-amber-600); }

/* ---- footer ---- */
.s-footer { background: var(--lm-surface-brand); color: var(--lm-purple-200); padding: var(--lm-space-13) 0 var(--lm-space-11); }
.s-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--lm-space-13); align-items: start; }
.s-strapline { font-family: var(--lm-font-display); font-size: var(--lm-text-xl); line-height: var(--lm-leading-snug);
  color: var(--lm-text-on-brand); margin: 0; max-width: 46ch; }
.s-footer__links { display: flex; flex-wrap: wrap; gap: var(--lm-space-9); font-family: var(--lm-font-ui);
  font-size: var(--lm-text-base); }
.s-footer__links a { color: var(--lm-purple-200); text-decoration: none; }
.s-footer__links a:hover { color: var(--lm-text-on-brand); }
.s-footer__legal { margin: var(--lm-space-11) 0 0; font-family: var(--lm-font-ui); font-size: var(--lm-text-sm);
  color: var(--lm-purple-300); border-top: var(--lm-border-width) solid var(--lm-purple-600);
  padding-top: var(--lm-space-8); }

/* Plain footer — for transactional/extension-triggered pages (welcome, uninstall) where the brand
   story band reads as off-tone. Links and copyright only, no strapline, no bird. */
.s-footer--plain { background: var(--lm-surface-card); color: var(--lm-text-body);
  border-top: var(--lm-border-width) solid var(--lm-border); padding: var(--lm-space-9) 0; }
.s-footer--plain .s-footer__links a { color: var(--lm-text-body); }
.s-footer--plain .s-footer__links a:hover { color: var(--lm-text-brand); }
.s-footer--plain .s-footer__legal { margin: var(--lm-space-6) 0 0; color: var(--lm-text-meta);
  border-top: none; padding-top: 0; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .s-hero, .s-split, .s-split--narrow-right, .s-guide, .s-footer__grid { grid-template-columns: 1fr; gap: var(--lm-space-11); }
  .s-split--reverse > *:first-child, .s-split--reverse > *:last-child { order: initial; }
  .s-grid3, .s-grid2, .s-questions { grid-template-columns: 1fr; }
  .s-toc { position: static; }
  .s-band { padding: var(--lm-space-13) 0; }
  .s-bird-figure, .s-bird-figure--right { justify-content: center; }
}
@media (max-width: 640px) {
  .s-shell, .s-nav__in { padding-left: var(--lm-space-7); padding-right: var(--lm-space-7); }
  .s-nav__links { gap: var(--lm-space-7); font-size: var(--lm-text-sm); }
  .s-nav__links .s-nav__hide { display: none; }
}