/* AdvisorSEO — one stylesheet, system fonts only, no external assets.
   Colour pairs are measured by tools/contrast.py; every pair clears WCAG 2.2 AA. */

:root {
  color-scheme: light dark;

  /* —— 1. Type —— */
  --fs-display: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
  --fs-lede: clamp(1.05rem, 1rem + 0.5vw, 1.3rem);
  --fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* —— 2. Colour (light) —— */
  --bg: #ffffff;
  --surface: #f4f4f6;
  --surface-2: #e8e8ec;
  --line: #d9d9e0;
  --line-strong: #b6b6c0;
  --ink: #0a0a0b;
  --ink-muted: #56565f;

  /* Near-black carries structure AND action. With no hue to separate them,
     emphasis is fill versus outline: the one button we want pressed is solid,
     every other control is a hairline. Links keep their underline, because
     colour can no longer be what tells you a thing is a link. */
  --accent: #0a0a0b;
  --accent-ink: #ffffff;
  --action: #0a0a0b;
  --action-ink: #ffffff;

  /* Silver is a material, not a colour: a brushed gradient used only where
     something is singled out — the chosen plan's edge and its badge. */
  --silver: linear-gradient(135deg, #b9b9c4 0%, #f2f2f5 28%, #9b9ba6 52%, #e6e6eb 76%, #aeaeba 100%);
  --silver-bright: var(--silver);
  --silver-ink: #0a0a0b;

  /* Woven texture. Two opposed hairline grids at 1.6% alpha — enough to feel
     like cloth under raking light, far too faint to move a contrast ratio.
     Pure CSS because this site fetches nothing, not even a texture. */
  --fabric:
    repeating-linear-gradient(45deg, rgb(10 10 11 / 0.016) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(-45deg, rgb(10 10 11 / 0.016) 0 1px, transparent 1px 3px);

  /* —— 3. Space —— */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s24: 96px;
  --s32: 128px;

  --section-y: clamp(56px, 8vw, 128px);
  --gutter: clamp(16px, 5vw, 32px);
  --container: min(100% - 2 * var(--gutter), 1120px);
  --measure: 68ch;
  --card-pad: clamp(20px, 4vw, 32px);

  /* —— 5. Radius & elevation —— */
  --radius-sm: 10px;
  --radius-card: 14px;
  --radius-img: 20px;
  --radius-pill: 999px;
  --shadow-featured: 0 1px 2px rgb(16 24 40 / 0.04), 0 8px 24px -12px rgb(16 24 40 / 0.12);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #08080a;
    --surface: #121214;
    --surface-2: #1b1b1f;
    --line: #2b2b32;
    --line-strong: #3f3f49;
    --ink: #f5f5f7;
    --ink-muted: #a0a0aa;

    /* Inverted, and nothing else changes: the solid button is now white on black
       rather than black on white, and it is still the only solid thing. */
    --accent: #f5f5f7;
    --accent-ink: #08080a;
    --action: #f5f5f7;
    --action-ink: #08080a;

    --silver: linear-gradient(135deg, #5a5a66 0%, #c9c9d4 30%, #43434d 55%, #a9a9b6 78%, #52525d 100%);
    --silver-bright: linear-gradient(135deg, #a5a5b0 0%, #e8e8ee 30%, #8f8f9b 55%, #dadae2 78%, #9b9ba6 100%);
    --silver-ink: #08080a;

    /* The weave lifts rather than shadows on a dark ground, or it disappears. */
    --fabric:
      repeating-linear-gradient(45deg, rgb(245 245 247 / 0.020) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(-45deg, rgb(245 245 247 / 0.020) 0 1px, transparent 1px 3px);
    --shadow-featured: none;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: break-word;
}

.wrap {
  width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* —— Skip link —— */

.skip {
  position: absolute;
  left: -9999px;
  z-index: 200;
  padding: var(--s3) var(--s4);
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
}

.skip:focus {
  left: var(--s3);
  top: var(--s3);
}

/* —— Links & focus —— */

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* —— Type —— */

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
}

h1 {
  font-size: var(--fs-display);
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-block-end: var(--s3);
}

h2 {
  font-size: var(--fs-h2);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-block-end: var(--s3);
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

p,
li {
  max-width: var(--measure);
}

main {
  display: block;
}

section {
  padding-block: var(--section-y);
}

.section--surface,
main > section:nth-of-type(even):not(.cta-band) {
  background-color: var(--surface);
  background-image: var(--fabric);
}

.eyebrow {
  margin: 0 0 var(--s2);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.lede,
.section-lede {
  margin: 0 0 var(--s6);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: var(--measure);
}

.section-lede {
  margin-block-end: var(--s12);
}

.muted {
  color: var(--ink-muted);
}

.small {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.5;
}

.muted-inline {
  color: var(--ink-muted);
  font-weight: 400;
}

/* —— Masthead —— */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--s4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--fs-body);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.brand img {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.navlinks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  align-items: center;
  font-size: var(--fs-small);
  font-weight: 500;
}

.navlinks a {
  text-decoration: none;
}

.navlinks a:not(.btn):hover {
  text-decoration: underline;
}

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

/* —— Buttons —— */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: center;
  margin-block-start: var(--s6);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 44px;
  padding-inline: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition);
}

.btn:hover {
  background: var(--surface-2);
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  border-color: var(--action);
  background: var(--action);
  color: var(--action-ink);
}

.btn-primary:hover {
  filter: brightness(1.06);
  background: var(--action);
}

.btn-secondary {
  border-color: var(--line);
  color: var(--ink);
}

.btn-secondary:hover {
  background: var(--surface-2);
  border-color: var(--line);
}

.btn-tertiary {
  border-color: transparent;
  padding-inline: 0;
  min-height: 44px;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.btn-tertiary:hover {
  background: transparent;
  color: var(--accent);
}

.btn-lg {
  padding-inline: 28px;
}

/* —— Pills —— */

.pill {
  display: inline-block;
  padding: var(--s1) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  white-space: nowrap;
}

.pill--accent {
  border-color: transparent;
  background: var(--silver-bright);
  color: var(--silver-ink);
  font-weight: 650;
}

/* —— Hero —— */

.hero {
  padding-block-start: var(--s12);
}

.hero-grid {
  display: grid;
  gap: var(--s8);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  /* The hero frame is a readable screenshot of the product, not a decorative slab.
     Beside the headline it was 450px wide and nobody could read a word of it, so it
     runs the full container under the copy instead. */
  .hero-copy { max-width: 58ch; }
  .hero-grid { gap: var(--s12); }
}

.hero-copy {
  min-width: 0;
}

.hero-media,
.step-media,
.proof-media,
.page-media {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-img);
  background: var(--surface);
}

.step-media {
  aspect-ratio: 4 / 3;
}

.hero-media img,
.step-media img,
.proof-media img,
.page-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* —— Trust strip —— */

.trust-strip {
  padding-block: var(--s8);
}

.trust-list {
  display: grid;
  gap: var(--s4) var(--s8);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-muted);
}

@media (min-width: 720px) {
  .trust-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.trust-list li {
  max-width: none;
  padding-inline-start: var(--s5);
  position: relative;
}

.trust-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* —— Steps —— */

.steps-grid {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 720px) {
  .steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s8);
  }
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

@media (min-width: 960px) {
  .step-body {
    padding-block: var(--s2);
  }
}

.step-card h3 {
  margin-block: var(--s5) var(--s3);
}

.step-card p {
  margin: 0 0 var(--s3);
  font-size: var(--fs-small);
  line-height: 1.5;
  max-width: none;
  color: var(--ink-muted);
}

.step-card p:last-child {
  margin-block-end: 0;
  color: var(--ink);
}

/* —— Proof band —— */

.proof-grid {
  display: grid;
  gap: var(--s8);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .proof-copy { max-width: 62ch; }
  .proof-grid { gap: var(--s10); }
}

.claim-list {
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
}

.claim-list li {
  max-width: none;
  padding-block: var(--s5);
  border-top: 1px solid var(--line);
}

.claim-list li:first-child {
  border-top: 0;
  padding-block-start: 0;
}

.claim-list strong {
  display: block;
  margin-block-end: var(--s2);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
}

.claim-list span {
  display: block;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
}

/* —— Pricing —— */

.pricing-note-inline {
  margin: 0 0 var(--s8);
  font-size: var(--fs-small);
  color: var(--ink-muted);
  max-width: var(--measure);
}

.trial-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) var(--s8);
  align-items: center;
  justify-content: space-between;
  margin-block-end: var(--s8);
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface-2);
}

.trial-strip h3 {
  margin-block-end: var(--s2);
}

.trial-strip p {
  margin: 0;
  font-size: var(--fs-small);
  max-width: 52ch;
  color: var(--ink-muted);
}

.plans {
  display: grid;
  gap: var(--s6);
  grid-template-columns: 1fr;
  align-items: stretch;
}

@media (min-width: 800px) {
  .plans {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s5);
  }
}

.plan-card {
  display: flex;
  flex-direction: column;
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.plan-card--featured {
  position: relative;
  background-color: var(--surface-2);
  background-image: var(--fabric);
  border-color: transparent;
  box-shadow: var(--shadow-featured);
}

/* The silver edge. Painted behind the card and masked to a 1.5px frame, so the
   metal reads as an edge rather than a glow. */
.plan-card--featured::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  background: var(--silver);
  z-index: -1;
}

.plan-badge {
  /* A <p> is a block, so without this the pill stretches the full card width
     and stops reading as a badge. It hugs its text instead. */
  align-self: flex-start;
  margin: 0 0 var(--s3);
}

/* Once the plans sit side by side the six spec rows have to line up across all
   three cards, which they cannot do if only one card carries a badge. The
   unbadged cards reserve the same height. Below the breakpoint the cards are
   stacked, nothing needs to align, and the spacer would just be dead space. */
@media (min-width: 900px) {
  .plan-card:not(.plan-card--featured)::before {
    content: "";
    display: block;
    height: calc(var(--fs-micro) * 1.5 + var(--s1) * 2 + 2px);
    margin-block-end: var(--s3);
  }
}

.plan-for {
  margin: 0 0 var(--s5);
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--ink-muted);
  max-width: none;
}

/* Same reason as the badge spacer below: side by side, every row of the three cards has
   to start at the same y. One plan's "who it's for" running to two lines would otherwise
   push its price, its CTA and all six spec rows down by a line. Two lines are reserved
   whether the copy needs them or not. */
@media (min-width: 900px) {
  .plan-for {
    min-height: calc(2 * 1.5 * var(--fs-small));
  }
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: var(--s1);
  margin: 0 0 var(--s2);
  font-size: clamp(2rem, 1.5rem + 2vw, var(--fs-display));
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  max-width: none;
}

.plan-price-period {
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink-muted);
}

.plan-annual {
  margin: 0 0 var(--s6);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-muted);
  max-width: none;
}

.plan-cta {
  width: 100%;
  margin-block-end: var(--s6);
}

.plan-divider {
  margin: 0 0 var(--s5);
  border: 0;
  border-top: 1px solid var(--line);
}

.plan-specs {
  display: grid;
  gap: 0;
  margin: 0;
}

.plan-spec {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s4);
  align-items: baseline;
  padding-block: var(--s3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
}

.plan-spec:first-child {
  border-top: 0;
  padding-block-start: 0;
}

.plan-spec dt {
  margin: 0;
  font-weight: 500;
  color: var(--ink-muted);
}

.plan-spec dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
}

.pricing-footnotes {
  margin-block-start: var(--s8);
  max-width: var(--measure);
}

.pricing-footnotes p {
  margin: 0 0 var(--s3);
  font-size: var(--fs-small);
  color: var(--ink-muted);
}

.pricing-footnotes p:last-child {
  margin-block-end: 0;
}

.overage-table {
  margin-block-start: var(--s6);
  max-width: 36rem;
}

/* —— FAQ —— */

.faq-list {
  margin-block-start: var(--s8);
  max-width: var(--measure);
  border-top: 1px solid var(--line);
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: var(--s5);
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

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

.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-muted);
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin: 0 0 var(--s5);
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--ink-muted);
  max-width: none;
}

/* —— CTA band —— */

.cta-band {
  background: var(--surface-2);
}

.cta-band-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s6) var(--s8);
  align-items: center;
  justify-content: space-between;
}

.cta-band h2 {
  margin-block-end: var(--s3);
}

.cta-band p {
  margin: 0;
  max-width: 48ch;
  color: var(--ink-muted);
}

/* —— Page hero (docs, support) —— */

.page-hero {
  padding-block-start: var(--s10);
}

.page-hero-grid {
  display: grid;
  gap: var(--s8);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 820px) {
  .page-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--s12);
  }
}

.toc-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3) var(--s5);
  margin: var(--s6) 0 0;
  padding: 0;
  list-style: none;
}

.toc-links li {
  max-width: none;
}

.toc-links a {
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
}

.toc-links a:hover {
  text-decoration: underline;
}

/* —— Cards & grids —— */

.grid {
  display: grid;
  gap: var(--s5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-block-start: var(--s6);
}

.card {
  padding: var(--card-pad);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.card h3 {
  margin-block-end: var(--s3);
}

.card p:last-child,
.card ul:last-child {
  margin-block-end: 0;
}

.card p,
.card li {
  max-width: none;
}

.addr {
  display: inline-block;
  padding: var(--s1) var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: var(--fs-small);
  word-break: break-all;
}

.block {
  display: block;
  margin: var(--s4) 0;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: var(--mono);
  font-size: var(--fs-small);
  line-height: 1.55;
  overflow-x: auto;
  white-space: pre;
  max-width: 100%;
}

.steps {
  padding-inline-start: var(--s6);
}

.steps li {
  margin-block-end: var(--s3);
}

.prompts {
  margin: var(--s5) 0 0;
  padding: 0;
  list-style: none;
}

.prompts li {
  margin-block-end: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-inline-start: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  max-width: none;
}

/* —— Tables —— */

.table-scroll {
  overflow-x: auto;
  margin-block-start: var(--s5);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

caption {
  padding-block-end: var(--s2);
  font-size: var(--fs-small);
  font-weight: 500;
  text-align: left;
  color: var(--ink-muted);
}

th,
td {
  padding: var(--s3);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  font-weight: 600;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* —— Notices —— */

.notice {
  margin: var(--s5) 0;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: var(--fs-small);
  max-width: var(--measure);
}

.notice strong {
  font-weight: 600;
}

/* —— Footer —— */

.site-footer {
  padding-block: var(--s10) var(--s12);
  border-top: 1px solid var(--line);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ink-muted);
}

.footer-grid {
  display: grid;
  gap: var(--s8);
  grid-template-columns: 1fr;
  margin-block-end: var(--s8);
}

@media (min-width: 720px) {
  .footer-grid {
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--s8) var(--s6);
  }
}

.footer-brand p {
  margin: 0;
  line-height: 1.5;
  max-width: 36ch;
}

.footer-label {
  margin: 0 0 var(--s3);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.footer-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-col li {
  max-width: none;
  margin-block-end: var(--s2);
}

.footer-col a {
  color: var(--ink-muted);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.footer-meta p {
  margin: 0;
  max-width: var(--measure);
}

code {
  padding: 1px var(--s1);
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.875em;
}

.mt {
  margin-block-start: var(--s6);
}

/* —— Legal & docs section rhythm —— */

main > section + section h2,
main > section + section h3 {
  margin-block-start: var(--s12);
}

main > section > .wrap > h2:first-child,
main > section > .wrap > .eyebrow:first-child + h2 {
  margin-block-start: 0;
}

/* —— Narrow screens —— */

@media (max-width: 640px) {
  .trial-strip {
    flex-direction: column;
    align-items: stretch;
  }

  .trial-strip .btn {
    width: 100%;
  }

  .cta-band-inner {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-band .btn {
    width: 100%;
  }

  .cta-row .btn {
    flex: 1 1 100%;
  }
}

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