/* components.css — the shared component library (light + dark via tokens).
 * Depends on tokens.css, base.css, shimmer.css. */

/* ============================ Buttons ============================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 46px; padding: 0 22px;
  font-family: var(--font-body); font-size: 0.98rem; font-weight: 700;
  line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--r-sm);
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); }
.btn[aria-busy="true"], .btn:disabled { opacity: 0.7; pointer-events: none; }

.btn-primary { background: var(--gold); color: var(--gold-ink); }
/* color re-asserted so a base `a:hover` rule can't override the ink on <a class="btn"> */
.btn-primary:hover { background: #e2c777; color: var(--gold-ink); }

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

.btn-ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn-ghost:hover { background: rgba(255, 255, 255, .08); }

/* On dark bands the secondary becomes a translucent glass button. */
.on-dark .btn-secondary, .hero .btn-secondary, .band-deep .btn-secondary {
  background: rgba(255, 255, 255, .10); color: #fff; border-color: rgba(255, 255, 255, .42);
}
.on-dark .btn-secondary:hover, .hero .btn-secondary:hover, .band-deep .btn-secondary:hover {
  background: rgba(255, 255, 255, .18); color: #fff;
}

.btn-lg { min-height: 54px; padding: 0 30px; font-size: 1.06rem; }
.btn-sm { min-height: 38px; padding: 0 14px; font-size: 0.88rem; }
.btn-block { width: 100%; }

/* ============================ Header / nav ============================ */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-5); min-height: 72px; padding: 14px var(--pad);
  color: var(--header-ink);
  background: linear-gradient(180deg, rgba(9, 35, 29, .9), rgba(9, 35, 29, .12));
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.site-header.is-scrolled {
  color: var(--header-ink-scrolled);
  background: var(--header-bg-scrolled);
  box-shadow: var(--sh-1);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.brand { display: inline-flex; align-items: center; gap: var(--s-2); font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; color: inherit; }
.brand .brand-pro { color: var(--gold); }
.nav { position: relative; display: flex; align-items: center; gap: var(--s-5); }
.nav a { color: inherit; font-size: 0.96rem; font-weight: 500; }
.nav a:hover { color: var(--gold); }
.header-cta { min-height: 40px; padding: 0 16px; }
.menu-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: rgba(255, 255, 255, .08); border: 1px solid currentColor; border-radius: var(--r-sm); color: inherit; cursor: pointer; }

/* ============================ Hero ============================ */
.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: center;
  min-height: min(760px, 88svh);
  padding: 132px var(--pad) 64px; color: #fff; overflow: hidden;
  background:
    linear-gradient(115deg, rgba(7, 29, 24, .96) 0%, rgba(9, 35, 29, .86) 42%, rgba(9, 35, 29, .55) 72%, rgba(9, 35, 29, .25) 100%),
    radial-gradient(120% 90% at 80% -10%, rgba(36, 106, 85, .42), transparent 60%),
    var(--deep);
}
.hero-content { width: 100%; max-width: 880px; margin-inline: auto; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero .eyebrow { color: var(--gold); }
.hero-copy { max-width: 60ch; font-size: clamp(1.05rem, 1.4vw, 1.25rem); color: rgba(255, 255, 255, .86); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .22); max-width: 720px; }

/* ============================ Sections ============================ */
.section { padding: clamp(64px, 8vw, 116px) 0; }
.section .wrap > .section-head { margin-bottom: var(--s-7); }
.section--tint { background: var(--tint); }
.section--paper { background: var(--paper); }
.band-deep { background: var(--deep); color: #fff; }
.band-deep h1, .band-deep h2, .band-deep h3 { color: #fff; }

.eyebrow {
  display: block; margin: 0 0 var(--s-3);
  font-family: var(--font-mono); font-size: 0.76rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark);
}
.section-head { max-width: 720px; }
.section-head.center { margin-inline: auto; text-align: center; }
.lead { font-size: 1.1rem; color: var(--muted); }
.band-deep .lead { color: rgba(255, 255, 255, .8); }

/* ============================ Cards ============================ */
.grid { display: grid; gap: var(--s-5); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s-6); box-shadow: var(--sh-1);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.card h3 { margin-bottom: var(--s-2); }
.card .card-ic { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin-bottom: var(--s-4); border-radius: var(--r-sm); background: var(--tint); color: var(--forest); }

/* ============================ Pricing ============================ */
.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); align-items: stretch; }
/* Three-card variant (e.g. the care plans) — keeps a row of three symmetric, so a
 * lone third card never wraps to a half-empty second row. */
.pricing-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .pricing-grid--three { grid-template-columns: 1fr; } }
.price-card {
  display: flex; flex-direction: column;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 2.6vw, 28px); min-height: 0;
}
/* The ONE shimmering element: featured plan. Markup adds `shimmer`; this sets the
 * fill so only the border ring glows. */
.price-card--featured { --shimmer-fill: var(--surface-2); border: 1.5px solid transparent; }
.price-card .plan-name { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark); }
.price { display: flex; align-items: baseline; gap: 6px; margin: var(--s-3) 0 var(--s-2); }
.price .amount { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 4vw, 3.6rem); line-height: 1; color: var(--ink); }
.price .term { color: var(--muted); font-size: 0.95rem; }
.features { list-style: none; margin: var(--s-5) 0; padding: 0; display: grid; gap: var(--s-3); }
.features li { position: relative; padding-left: 28px; color: var(--ink); }
.features li::before {
  content: ""; position: absolute; left: 0; top: 0.35em; width: 16px; height: 16px;
  border-radius: var(--r-pill); background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.7 8.25-8.2 1.4 1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.7 8.25-8.2 1.4 1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.price-card .btn { margin-top: auto; }

/* Compact meta row on price cards: delivery time + revision count as small chips. */
.card-meta { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-2); }
.card-meta span {
  display: inline-flex; align-items: center; padding: 3px 9px;
  border-radius: var(--r-pill); background: var(--tint); color: var(--forest);
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
/* Price-card bullets run a touch smaller than body copy so each stays one line
 * at three-across desktop widths (the compare table carries the long form). */
.price-card .features { font-size: 0.95rem; }

/* "Full details" text link at the foot of a price card (points at the compare table). */
.card-details-link {
  display: block; text-align: center; margin-top: var(--s-3);
  font-size: 0.88rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.card-details-link:hover { color: var(--gold-dark); }

/* "Every package includes" strip: the shared line items pulled out of the price
 * cards so each card only lists what makes it different. Sits directly under the
 * pricing grid. */
.includes-strip {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-3) var(--s-5);
  margin-top: var(--s-5); padding: var(--s-4) var(--s-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.includes-strip-title {
  margin: 0; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--gold-dark); white-space: nowrap;
}
.includes-strip ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; }
.includes-strip li { position: relative; padding-left: 24px; color: var(--ink); font-size: 0.92rem; }
.includes-strip li::before {
  content: ""; position: absolute; left: 0; top: 0.28em; width: 16px; height: 16px;
  border-radius: var(--r-pill); background: var(--gold);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.7 8.25-8.2 1.4 1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9.55 17.6 4.4 12.45l1.4-1.4 3.75 3.7 8.25-8.2 1.4 1.4z'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* ============================ Pills / badges ============================ */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: var(--tint); color: var(--forest); font-size: 0.8rem; font-weight: 600; }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-sm); font-size: 0.78rem; font-weight: 600; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-error { background: var(--error-bg); color: var(--error); }
.badge-info { background: var(--info-bg); color: var(--info); }

/* ============================ Trust bar / stats ============================ */
.trustbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5); padding: var(--s-5) 0; color: var(--muted); font-size: 0.92rem; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat dt, .stat dd { margin: 0; }
.stat .num { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; color: var(--ink); }
.band-deep .stat .num, .hero .stat .num { color: #fff; }
.stat .lbl { font-size: 0.86rem; color: var(--muted); }
.band-deep .stat .lbl, .hero .stat .lbl { color: rgba(255, 255, 255, .72); }

/* ============================ Form fields ============================ */
.field { display: grid; gap: 6px; margin-bottom: var(--s-4); }
.field > label { font-weight: 600; font-size: 0.92rem; }
.field input, .field textarea, .field select {
  width: 100%; padding: 12px 13px; font: inherit; color: var(--ink);
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(36, 106, 85, .14);
}
.field-err { min-height: 1.25rem; font-size: 0.85rem; color: var(--error); }

/* ============================ Footer ============================ */
.site-footer { background: var(--deep); color: rgba(255, 255, 255, .76); padding: var(--s-8) 0; }
.site-footer a { color: rgba(255, 255, 255, .76); }
.site-footer a:hover { color: var(--gold); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-6); }
.footer-brand { font-family: var(--font-display); font-size: 1.3rem; color: #fff; }
/* Footer nav: an inline row of links separated by a subtle gold-tinted mid-dot
 * (on-theme: the same "·" the brand uses elsewhere) instead of running together. */
.site-footer nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; max-width: 660px; }
.site-footer nav a { padding: 2px 0; white-space: nowrap; }
.site-footer nav a:not(:last-child)::after {
  content: "·"; margin: 0 var(--s-3); color: rgba(215, 182, 93, .55); font-weight: 700;
}

/* ============================ Utilities ============================ */
.actions-center { justify-content: center; }
.t-gold { color: var(--gold); }

/* ============================ Icons ============================ */
.ic { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ============================ Responsive ============================ */
@media (max-width: 920px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { min-height: auto; }
  .hero-proof { grid-template-columns: 1fr; gap: var(--s-4); }
  .hero { padding-top: 104px; }
}

/* ============================================================
 * Phase 4 — marketing page components (added for the multi-page site).
 * All token-driven; light + dark via tokens.css. CSP-clean (no inline style).
 * ============================================================ */

/* ---- Header: actions cluster + mobile menu (script.js hooks) ---- */
.header-actions { display: flex; align-items: center; gap: var(--s-4); }
.nav-login { color: inherit; font-size: 0.94rem; font-weight: 500; }
.nav-login:hover { color: var(--gold); }

.menu-toggle-lines, .menu-toggle-lines::before, .menu-toggle-lines::after {
  display: block; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
  transition: transform var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.menu-toggle-lines { position: relative; }
.menu-toggle-lines::before, .menu-toggle-lines::after { content: ""; position: absolute; left: 0; }
.menu-toggle-lines::before { top: -7px; }
.menu-toggle-lines::after { top: 7px; }
.site-header.is-menu-open { color: var(--header-ink-scrolled); background: var(--header-bg-scrolled); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.site-header.is-menu-open .menu-toggle-lines { background: transparent; }
.site-header.is-menu-open .menu-toggle-lines::before { transform: translateY(7px) rotate(45deg); }
.site-header.is-menu-open .menu-toggle-lines::after { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 72px 0 auto; z-index: var(--z-dropdown);
  display: grid; gap: var(--s-3);
  padding: var(--s-5) var(--pad) var(--s-6);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--sh-2); border-top: 1px solid var(--line);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: grid; gap: 2px; }
.mobile-menu a { color: var(--ink); font-weight: 600; font-size: 1.05rem; padding: 10px 0; border-bottom: 1px solid var(--line); }
.mobile-menu a:hover { color: var(--forest); }
.mobile-menu-actions { margin-top: var(--s-3); }
body.menu-open { overflow: hidden; }

/* ---- Trust / trades band ---- */
.service-band { padding: var(--s-6) 0; border-block: 1px solid var(--line); }
.service-band .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); }
.service-band .band-label { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-right: var(--s-2); }
/* Symmetric grid of equal-width, equal-height trade pills, each with an icon. */
.trades { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: var(--s-2); }
.trades span { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); font-size: 0.86rem; font-weight: 600; }
.trades span .ic { width: 16px; height: 16px; flex: none; color: var(--forest-2); }
@media (max-width: 480px) { .trades { grid-template-columns: 1fr 1fr; } }

/* ---- Two-column split (intro / offer / proof) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: start; }
.split.split--lead { grid-template-columns: 0.9fr 1.1fr; }
.quiet-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
.quiet-list li { position: relative; padding-left: 26px; color: var(--muted); }
.quiet-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
/* In a two-column split, the right column starts at the top of the section — level
 * with the eyebrow, which leaves the bullet list floating above the headline. On
 * `.split--offset` we push the second column down by the eyebrow's height so its
 * first line sits level with the big headline, balancing the two columns. */
@media (min-width: 921px) {
  .split--offset > :nth-child(2) { padding-top: calc(0.76rem * 1.6 + var(--s-3)); }
  .split--offset > :nth-child(2) > .quiet-list { margin-top: 0; }
  /* Vertically center the bullet column against the taller text column so the two
   * sides read as balanced (used on the "Your dashboard" section). */
  .split--centered { align-items: center; }
}
/* Extra breathing room between a split's text and the cards that follow it. */
.dash-cards { margin-top: var(--s-7); }

/* ---- Process steps ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
/* Playful paper-plane that flies step 1 -> 4 leaving a gold contrail (SMIL in the
 * markup; this just styles + scopes it). Desktop-only (the path is drawn for a
 * 4-across row) and disabled under reduced motion. */
.steps-wrap { position: relative; }
/* A thin band across the top of the steps, level with the number badges, so the
 * plane weaves through the NUMBERS (not the body text). */
.steps-flight { position: absolute; top: 0; left: 0; width: 100%; height: 56px; pointer-events: none; z-index: 4; overflow: visible; opacity: 0; transition: opacity .25s var(--ease); }
.steps-flight.is-flying { opacity: 1; }
.steps-flight .flight-path { fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 6; }
.steps-flight .ff-plane path { fill: var(--gold); stroke: var(--gold-dark); stroke-width: .5; }
.steps-flight .ff-plane { filter: drop-shadow(0 1px 2px rgba(9, 35, 29, .25)); }
@media (max-width: 920px) { .steps-flight { display: none; } }
@media (prefers-reduced-motion: reduce) { .steps-flight { display: none; } }
.step-card .step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
  margin-bottom: var(--s-3); border-radius: var(--r-pill);
  background: var(--forest); color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
}
.band-deep .step-card .step-num { background: var(--gold); color: var(--gold-ink); }
.step-card h3 { margin-bottom: var(--s-2); }
.step-card p { color: var(--muted); }
.band-deep .step-card p { color: rgba(255, 255, 255, .8); }

/* ---- Check / proof items (use inside .grid) ---- */
.check-item { display: flex; gap: var(--s-3); align-items: flex-start; }
.check-item .ic { flex: none; width: 24px; height: 24px; color: var(--forest-2); margin-top: 1px; }
.band-deep .check-item .ic { color: var(--gold); }
.check-item strong { display: block; margin-bottom: 3px; }
.check-item span { color: var(--muted); }
.band-deep .check-item span { color: rgba(255, 255, 255, .8); }
/* Breathing room between the "how we choose your look" cards and the proof checks below */
.look-checks { margin-top: var(--s-8); }

/* ---- Examples grid (static labeled tiles; honest "Example layout") ---- */
.examples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.example-tile { border: 1.5px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background-color: var(--surface); box-shadow: var(--sh-1); --shimmer-fill: var(--surface); transition: box-shadow .18s ease; }
.example-thumb { aspect-ratio: 4 / 3; display: flex; align-items: flex-end; padding: var(--s-4); }
.example-thumb .example-style { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.example-thumb.ex-1 { background: linear-gradient(135deg, #1c5a48, #09231d); }
.example-thumb.ex-2 { background: linear-gradient(135deg, #2c6e57, #123b32); }
.example-thumb.ex-3 { background: linear-gradient(135deg, #3a4a44, #0d1f1a); }
.example-thumb.ex-4 { background: linear-gradient(135deg, #6b5a2e, #2a2410); }
.example-thumb.ex-5 { background: linear-gradient(135deg, #244b6a, #0d1f2a); }
.example-thumb.ex-6 { background: linear-gradient(135deg, #5a2e2e, #2a1010); }
.example-meta { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); }
.example-meta .trade { font-weight: 700; }
.example-meta .tag { font-size: 0.8rem; color: var(--muted); }
/* Rendered featured-demo tiles (examples.js): screenshot + theme tag + Launch/Growth
   toggle + an "expanded live view" modal. Static placeholder tiles above are unaffected. */
.example-thumb { position: relative; }
.example-thumb .example-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.example-thumb .example-style { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.example-thumb--clickable { cursor: pointer; }
.example-tile--demo { display: flex; flex-direction: column; }
.example-tile--demo .example-meta { padding-bottom: var(--s-2); }

/* The card tag carries BOTH the style descriptor and the color-theme name (moved out of
   the photo overlay), each in one of the brand's two colors: the style word in dark green,
   the theme word in gold. Replaces the old "Live demo" / "Featured" tag text. */
.example-meta .tag.example-style-tag { font-weight: 700; letter-spacing: 0.01em; }
.example-style-tag .ex-w-style { color: var(--forest); }
.example-style-tag .ex-w-theme { color: var(--gold-dark); }
.example-style-tag .ex-sep { color: var(--muted); font-weight: 400; padding: 0 0.18em; }

.example-actions { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 0 var(--s-4) var(--s-4); }
.example-variants { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; background: var(--surface); }
.example-variant-btn { font: inherit; font-size: 0.76rem; font-weight: 600; line-height: 1; padding: 0.34rem 0.72rem; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: background .15s ease, color .15s ease; }
.example-variant-btn + .example-variant-btn { border-left: 1px solid var(--line); }
.example-variant-btn:hover:not([disabled]) { color: var(--ink); background: var(--tint); }
.example-variant-btn[aria-pressed="true"] { background: var(--forest); color: #fff; }
.example-variant-btn:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.example-variant-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.example-view { font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--gold-dark); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; white-space: nowrap; }
.example-view:hover { color: var(--forest); text-decoration: underline; }
.example-view:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }

/* Dark-green shimmer ring on hover (reuses the signature conic-border affordance; the
   1.5px transparent-on-hover border means no layout shift). */
.example-tile:hover {
  border-color: transparent;
  box-shadow: var(--sh-2), var(--glow-shimmer);
  background-image:
    linear-gradient(var(--shimmer-fill), var(--shimmer-fill)),
    conic-gradient(from var(--shimmer-angle),
      var(--shimmer-base) 0deg, var(--shimmer-base) 72deg,
      var(--shimmer-glint) 96deg, var(--shimmer-peak) 110deg, var(--shimmer-glint) 124deg,
      var(--shimmer-base) 150deg, var(--shimmer-base) 360deg);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: shimmerRotate var(--shimmer-speed) linear infinite;
}
@media (prefers-reduced-motion: reduce) { .example-tile:hover { animation: none; } }

/* Expanded live-view modal: a FULL-WINDOW overlay that embeds the actual demo site with
   a Launch/Growth switch (header bar) so the customer can compare packages full screen. */
body.example-modal-open { overflow: hidden; }
.example-modal { position: fixed; inset: 0; z-index: 1000; display: flex; background: var(--surface); }
.example-modal-dialog { display: flex; flex-direction: column; width: 100vw; height: 100vh; background: var(--surface); overflow: hidden; }
.example-modal-head { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); background: var(--paper); }
.example-modal-title { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; min-width: 0; }
.example-modal-title strong { font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.example-modal-title span { font-size: 0.8rem; color: var(--muted); }
.example-modal-open { font-size: 0.82rem; font-weight: 600; color: var(--gold-dark); text-decoration: none; white-space: nowrap; }
.example-modal-open:hover { color: var(--forest); text-decoration: underline; }
.example-modal-close { font-size: 1rem; line-height: 1; width: 2rem; height: 2rem; flex: none; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); cursor: pointer; }
.example-modal-close:hover { background: var(--tint); }
.example-modal-close:focus-visible { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
.example-modal-frame { flex: 1; position: relative; background: var(--tint); }
.example-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 640px) {
  .example-modal-head { flex-wrap: wrap; }
  .example-modal-title { margin-right: 0; flex: 1 0 100%; }
}

/* ---- FAQ accordion (native details/summary, CSP-safe) ---- */
.faq { display: grid; gap: var(--s-3); max-width: 860px; }
.faq.center { margin-inline: auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); cursor: pointer; font-weight: 700; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .ic { flex: none; color: var(--forest-2); transform-box: fill-box; transform-origin: center; transition: transform var(--dur-2) var(--ease); }
.faq-item[open] summary .ic { transform: rotate(180deg); }
.faq-body { padding: 0 var(--s-5) var(--s-5); color: var(--muted); }

/* ---- Compare / spec table ---- */
.table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; }
.cmp-table th, .cmp-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp-table thead th { font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.cmp-table tbody tr:hover { background: var(--tint); }
.cmp-table td.yes { color: var(--ok); font-weight: 700; }

/* ---- Contact form layout ---- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 36px); box-shadow: var(--sh-1); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-5); }
.form-grid .field.full { grid-column: 1 / -1; }
.form-note { font-size: 0.9rem; color: var(--muted); }
.form-status { min-height: 1.5rem; font-weight: 600; }
.form-status.ok { color: var(--ok); }
.form-status.bad { color: var(--error); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Prose (legal / privacy / about copy) ---- */
.prose { max-width: 760px; }
.prose h2 { margin-top: var(--s-7); font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.prose h3 { margin-top: var(--s-5); }
.prose p, .prose li { color: var(--muted); }
.prose ul { padding-left: var(--s-5); display: grid; gap: var(--s-2); }
.prose a { text-decoration: underline; }

/* ---- Misc ---- */
.section-foot { margin-top: var(--s-6); }
.center-text { text-align: center; }
.muted { color: var(--muted); }

/* ---- Phase 4 responsive ---- */
@media (max-width: 920px) {
  .header-actions { display: none; }
  .split, .split.split--lead { grid-template-columns: 1fr; gap: var(--s-5); }
  .steps { grid-template-columns: 1fr 1fr; }
  .examples-grid { grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .steps { grid-template-columns: 1fr; }
  .examples-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Intake — payment-gated multi-step wizard
 * ============================================================ */
/* The intake page has a light hero, so its fixed header must stay light at the top
 * (not the transparent-on-dark default). This wins over .is-scrolled by source order. */
.site-header.intake-header { color: var(--header-ink-scrolled); background: var(--header-bg-scrolled); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--sh-1); }
.intake-main { padding: 104px var(--pad) var(--s-9); max-width: 940px; margin-inline: auto; }
.intake-hero { margin-bottom: var(--s-6); }
.intake-hero h1 { font-size: clamp(2rem, 4vw, 3.1rem); }
.intake-hero p { color: var(--muted); max-width: 60ch; }

.payment-gate {
  display: grid; gap: 4px; padding: var(--s-4) var(--s-5); margin-bottom: var(--s-5);
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2); min-height: 66px;
}
.payment-gate strong { color: var(--ink); }
.payment-gate span { color: var(--muted); font-size: 0.92rem; }
.payment-gate.is-verified { border-color: var(--ok); background: var(--ok-bg); }
.payment-gate.is-verified strong { color: var(--ok); }
.payment-gate.is-warning { border-color: var(--warn); background: var(--warn-bg); }

.intake-form.is-disabled { opacity: 0.5; filter: saturate(.4); pointer-events: none; }

/* progress indicator */
.wizard-steps { list-style: none; display: flex; gap: var(--s-2); margin: 0 0 var(--s-3); padding: 0; }
.wizard-steps li { flex: 1; min-width: 0; }
.wizard-steps li button { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: var(--muted); }
.wizard-steps li button:disabled { cursor: default; }
.wizard-steps .dot {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border-radius: var(--r-pill); border: 1.5px solid var(--line-2); background: var(--surface);
  font-family: var(--font-mono); font-size: 0.84rem; color: var(--muted); --shimmer-fill: var(--surface);
}
.wizard-steps .step-name { font-size: 0.78rem; font-weight: 600; text-align: center; }
.wizard-steps li.is-done .dot { background: var(--gold); border-color: var(--gold); color: var(--gold-ink); }
.wizard-steps li.is-current button { color: var(--ink); }
.wizard-steps li.is-current .dot { color: var(--forest); font-weight: 700; }

.wizard-progress { height: 4px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; margin-bottom: var(--s-6); }
.wizard-progress::after { content: ""; display: block; height: 100%; width: var(--w, 0%); background: var(--forest-2); transition: width var(--dur-3) var(--ease); }

fieldset.wizard-step { border: none; margin: 0; padding: 0; animation: wzin var(--dur-3) var(--ease); }
.wizard-step[hidden] { display: none; }
@keyframes wzin { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { fieldset.wizard-step { animation: none; } }
.wizard-step > legend { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.05; margin-bottom: var(--s-2); padding: 0; }
.wizard-step .step-intro { color: var(--muted); margin-bottom: var(--s-5); }

.intake-form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }
.intake-form label { display: grid; gap: 6px; font-weight: 600; font-size: 0.94rem; margin-bottom: var(--s-4); }
.intake-form input, .intake-form textarea, .intake-form select {
  width: 100%; padding: 12px 13px; font: inherit; font-weight: 400; color: var(--ink);
  background: var(--surface-3); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.intake-form input:focus, .intake-form textarea:focus, .intake-form select:focus { outline: none; border-color: var(--forest-2); box-shadow: 0 0 0 3px rgba(36, 106, 85, .14); }
.intake-form input:user-invalid, .intake-form textarea:user-invalid, .intake-form select:user-invalid { border-color: var(--error); }
.intake-form textarea { resize: vertical; min-height: 90px; }
.intake-form label.checkbox-row { grid-template-columns: auto 1fr; align-items: start; gap: var(--s-3); font-weight: 500; }
.intake-form label.checkbox-row input { width: auto; margin-top: 3px; }

.field-label { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.field-help { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--r-pill); border: 1px solid var(--line-2); background: var(--surface); color: var(--muted); font-size: 0.76rem; cursor: help; }
.field-tip { display: none; position: absolute; top: 26px; left: 0; z-index: var(--z-tooltip); width: min(300px, 72vw); padding: 10px 12px; background: var(--deep); color: #fff; font-weight: 400; font-size: 0.85rem; line-height: 1.45; border-radius: var(--r-sm); box-shadow: var(--sh-2); }
.field-help:hover + .field-tip, .field-help:focus + .field-tip, .field-help:focus-visible + .field-tip { display: block; }

.assets-note { padding: var(--s-4); border-radius: var(--r); background: var(--tint); color: var(--ink); margin-bottom: var(--s-5); font-size: 0.95rem; }
.assets-note strong { color: var(--forest); }

.review-summary { display: grid; gap: var(--s-4); }
.review-group { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-4) var(--s-5); }
.review-group .review-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.review-group h3 { font-size: 1.05rem; margin: 0; }
.review-group dl { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 6px var(--s-4); margin: 0; }
.review-group dt { color: var(--muted); font-size: 0.9rem; }
.review-group dd { margin: 0; }
.review-edit { background: none; border: none; color: var(--forest-2); font-weight: 600; cursor: pointer; padding: 0; font: inherit; }

.wizard-nav { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.wizard-nav .spacer { flex: 1; }

.saved-pill { display: inline-flex; align-items: center; gap: 6px; min-width: 92px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--line); color: var(--muted); font-size: 0.78rem; font-weight: 600; }

.intake-result { margin-top: var(--s-6); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.intake-result[hidden] { display: none; }
.intake-result textarea { width: 100%; margin: var(--s-4) 0; padding: 12px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface-3); font-family: var(--font-mono); font-size: 0.85rem; }

@media (max-width: 620px) {
  .intake-form .form-grid { grid-template-columns: 1fr; }
  .wizard-steps .step-name { display: none; }
  .review-group dl { grid-template-columns: 1fr; }
}

/* ---- Custom-build pricing band (pricing.html #custom) ---- */
.price-band {
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-5) var(--s-7); align-items: center;
  margin-top: var(--s-6); padding: var(--s-6) var(--s-7);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.price-band h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.06; margin: var(--s-2) 0 var(--s-3); }
.price-band .lead { max-width: 58ch; }
.price-band-formula { margin: var(--s-4) 0 var(--s-2); font-size: 1.12rem; }
.price-band-formula strong { font-family: var(--font-display); font-size: 1.5rem; letter-spacing: -0.01em; }
.price-band-cta { display: grid; gap: var(--s-3); justify-items: start; max-width: 240px; }
.price-band-cta .muted { font-size: 0.88rem; }

/* ---- Multi-city SEO explainer (pricing.html) ---- */
.seo-cities {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--s-6) var(--s-8); align-items: center;
  margin-top: var(--s-7); padding: var(--s-6) var(--s-7);
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--tint);
}
.seo-cities h3 { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.06; margin: var(--s-2) 0 var(--s-3); }
.seo-cities-math { display: grid; gap: var(--s-2); padding: var(--s-5) var(--s-6); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.seo-math-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 0.98rem; }
.seo-math-row strong { font-family: var(--font-mono); font-size: 1.02rem; }
.seo-math-total { border-bottom: none; padding-top: var(--s-3); font-weight: 700; }
.seo-math-total strong { color: var(--gold-dark); font-size: 1.3rem; }
.seo-cities-math .muted { margin-top: var(--s-2); font-size: 0.85rem; }

@media (max-width: 860px) {
  .price-band, .seo-cities { grid-template-columns: 1fr; }
  .price-band-cta { max-width: none; }
}
.section-foot-note { margin-top: var(--s-4); }

/* ---- Star-field hero backdrop (index.html; canvas injected lazily by
 * assets/js/hero-field.js) ------------------------------------------------
 * Everything here must look finished WITHOUT the canvas, because that is what
 * mobile, prefers-reduced-motion, data-saver, no-JS and no-WebGL visitors get:
 * the bed and scrim below are the design, and the star field is an enhancement
 * laid on top of it.
 *
 * Stacking inside .hero--field:  canvas (0)  <  scrim (1)  <  content (2).
 *
 * Only the homepage hero carries .hero--field. Interior pages keep the forest
 * gradient on plain .hero above — adding the class (and an empty .hero-canvas
 * div) is all it takes to roll this treatment out to them. */
.hero { position: relative; overflow: hidden; }
.hero-canvas { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-canvas canvas { display: block; width: 100%; height: 100%; }
.hero-content { position: relative; z-index: 1; }

/* The field cannot be in the document at first paint (three.js has to arrive
 * first), so it MUST NOT snap on when it does. The canvas starts invisible and
 * hero-field.js adds .is-ready once it has actually drawn a frame — the fade
 * turns a hard switch into something that reads as intentional.
 *
 * Fail-safe by construction: if three.js never loads, WebGL is unavailable, or
 * the first frame never draws, the class is never added and the canvas simply
 * stays invisible over the static bed. */
/* 2s, linear. Long and even is what makes this imperceptible — an eased fade
 * has a fast middle section, and the fast section is the part you notice. */
.hero-canvas { opacity: 0; transition: opacity 2000ms linear; }
.hero-canvas.is-ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-canvas { transition: none; } }

/* A star field needs a near-black bed; the forest gradient would drown it.
 * Kept close to true black so the difference between "field not loaded yet" and
 * "field running" is as small as possible — that gap is what the fade covers. */
.hero--field {
  background:
    radial-gradient(120% 100% at 78% 34%, rgba(10, 30, 25, .22), transparent 66%),
    radial-gradient(90% 80% at 12% 90%, rgba(5, 17, 14, .20), transparent 74%),
    #010302;
}
/* Lighter than the scrim a forest hero would need, because the bed underneath
 * is already dark — enough to hold the headline, not enough to flatten the
 * field. Sits ABOVE the canvas, so it dims the stars behind the copy and
 * leaves them alone on the open right-hand side. */
.hero--field::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(2, 5, 4, .92) 0%, rgba(2, 5, 4, .70) 32%, rgba(2, 5, 4, .22) 62%, rgba(2, 5, 4, 0) 86%),
    radial-gradient(130% 120% at 50% 50%, transparent 40%, rgba(1, 3, 2, .62) 100%);
}
.hero--field .hero-content { z-index: 2; }

@media (prefers-reduced-motion: reduce) { .hero-canvas { display: none; } }

/* ---- Brand logo mark (assets/brand/logo-*.png) ---- */
.brand, .footer-brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-logo { display: block; width: 30px; height: 30px; flex: none; }
.footer-brand .brand-logo { width: 34px; height: 34px; }

/* ============================================================
 * Wave C (revision round 2026-08-02) — product imagery + nav/footer
 * unification + hero reassurance row. Token-driven, CSP-clean.
 * ============================================================ */

/* ---- Product shots: real dashboard/report screenshots ---- */
.product-shot {
  margin: 0; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--deep); box-shadow: var(--sh-3);
}
.product-shot img { display: block; width: 100%; height: auto; }
.product-shot figcaption { padding: var(--s-3) var(--s-4); font-size: 0.85rem; color: var(--muted); background: var(--surface); border-top: 1px solid var(--line); }
/* Screenshot wrapped in a link (e.g. the homepage dashboard band -> /demo). */
a.product-shot { display: block; transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
a.product-shot:hover, a.product-shot:focus-visible { transform: translateY(-3px); box-shadow: var(--sh-4); }
/* Light-theme report pages read better on a paper frame than the deep green. */
.product-shot--light { background: var(--surface); }
/* A screenshot sitting inside a card/offer (seo-report $9 hero card). */
.offer-shot { margin: var(--s-4) 0; }
/* Standalone centered shot between content blocks (how-it-works dashboard). */
.product-shot--free { max-width: 880px; margin: var(--s-7) auto 0; }
/* Media split: copy left, screenshot right; stacks on mobile (image first). */
.split--media { align-items: center; }
@media (max-width: 920px) {
  .split--media > :first-child { order: 2; }
  .split--media > :last-child { order: 1; }
}
/* Two-up strip of report sample shots (seo-report compare section). */
.shot-strip { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-6); }
@media (max-width: 760px) { .shot-strip { grid-template-columns: 1fr; } }

/* ---- Sample-report gallery (examples.html #reports, Wave D 2026-08-02) ----
 * Cards for each report product: screenshot thumb (when a live sample exists),
 * one-line what-it-is + price, and either a live sample link or an honest
 * "sample coming soon" tag — never a fake preview. */
.report-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-6); }
@media (max-width: 760px) { .report-gallery { grid-template-columns: 1fr; } }
.report-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-1); overflow: hidden;
}
.report-card .product-shot { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); box-shadow: none; }
.report-card-body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5) var(--s-5) var(--s-4); }
.report-card h3 { margin: 0 0 var(--s-1); font-size: 1.12rem; }
.report-price { margin: 0 0 var(--s-3); font-size: 0.88rem; font-weight: 700; color: var(--gold-dark, var(--ink)); }
.report-card p.report-copy { margin: 0 0 var(--s-4); color: var(--muted); font-size: 0.95rem; }
.report-card-foot { margin-top: auto; }
.report-soon {
  display: inline-block; padding: 5px 12px; border-radius: var(--r-pill);
  border: 1px dashed var(--line-2); background: var(--surface-2); color: var(--muted);
  font-size: 0.8rem; font-weight: 600;
}
/* The three no-sample-yet products share a compact row under the two live cards. */
.report-gallery--compact { grid-template-columns: repeat(3, 1fr); margin-top: var(--s-5); }
@media (max-width: 920px) { .report-gallery--compact { grid-template-columns: 1fr; } }

/* ---- Hero reassurance row (price anchor under the CTAs) ---- */
.hero-reassure { margin: var(--s-4) 0 0; font-size: 0.95rem; color: rgba(255, 255, 255, .78); }
.hero-reassure strong { color: #fff; font-weight: 700; }
.hero-reassure .sep { margin: 0 var(--s-2); color: rgba(215, 182, 93, .75); font-weight: 700; }

/* ---- Footer second column: free tools & resources ---- */
.site-footer nav.footer-col { flex-direction: column; align-items: flex-start; gap: 2px; max-width: none; }
.site-footer nav.footer-col a::after { content: none; }
.footer-col-title { margin: 0 0 2px; font-family: var(--font-display); font-weight: 700; font-size: 0.98rem; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
/* Wide screens: brand | site links | tools column on one row (the flex base
 * stays for narrow screens, where the three blocks wrap and stack). */
@media (min-width: 921px) {
  .footer-inner { display: grid; grid-template-columns: minmax(220px, 1.1fr) minmax(0, 2fr) auto; align-items: start; column-gap: var(--s-7); }
}