/* ── Fairway design tokens ──────────────────────────────────
     Mirrors the canonical palette in admin/css/admin.css so the
     marketing site, signup wizard, admin SPA, and member SPA
     all draw colours from the same source of truth. Local
     marketing-specific tokens (--page-text-*, --paper-tint) are
     derived from the canonical values for the dark theme. */
  :root {
    /* Shared with admin/css/admin.css :root.
       --green-deep matches the hex used by the canonical favicon
       SVG (#081a10) and --gold matches its accent (#c9a057), so the
       favicon's rounded-square background blends seamlessly with
       the page when the lockup sits on the hero. Update both
       together if either changes. */
    --green-deep:   #081a10;
    --green-mid:    #1a4d2e;
    --green-light:  #4A7A5C;
    --gold:         #c9a057;
    --gold-light:   #e8d5a3;
    --gold-dim:     rgba(201,160,87,0.18);
    --gold-soft:    rgba(201,160,87,0.10);
    --gold-line:    rgba(201,160,87,0.35);
    --cream:        #F5F0E8;
    --cream-dark:   #EDE6D6;
    --white:        #FFFEFB;
    --red:          #C0392B;
    --green-badge:  #16A34A;

    /* Dark-theme derivations for the marketing surface only */
    --paper-tint:   rgba(245,240,232,0.78);
    --paper-faint:  rgba(245,240,232,0.55);
    --paper-line:   rgba(245,240,232,0.10);
    --paper-veil:   rgba(245,240,232,0.04);

    /* Radii — marketing keeps softer corners than admin's --radius:0
       on purpose (different visual register), but they're collapsed
       into 2 tokens so we stop drifting between 12 / 14 / 16 / 18 / 22. */
    --radius-card:  18px;
    --radius-soft:  12px;
    --radius-pill:  999px;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body {
    height: 100%;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    color: var(--cream);
    /* Flat darker green — same hex as the favicon's rounded-square
       background so the lockup blends seamlessly with the page.
       The earlier radial-gradient version added gold + sage tints
       at the corners; removed at the founder's request for a
       deeper, more deliberate palette. */
    background: var(--green-deep);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  body {
    display: flex; flex-direction: column; min-height: 100vh;
  }

  nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 22px 36px;
    max-width: 1240px; width: 100%; margin: 0 auto;
  }
  .brand {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 500;
    color: var(--cream); text-decoration: none;
    letter-spacing: 0.02em;
  }
  .brand-mark {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    /* The SVG inside is the canonical favicon — it carries its own
       rounded-square background and accent strokes, so no CSS paint
       is needed here. Don't reintroduce a background colour: it'd
       double up with the SVG's own rect and create a halo. */
  }
  .nav-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    font-size: 13px; font-weight: 600;
    color: var(--green-deep);
    background: var(--gold);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: transform 120ms ease, background 120ms ease;
  }
  .nav-cta:hover { background: var(--gold-light); transform: translateY(-1px); }

  /* In-nav anchor links (Pricing / Tutorials / FAQ). Sit between brand and
     CTA, hide on narrow screens so the CTA stays accessible. */
  .nav-links {
    display: inline-flex; align-items: center; gap: 28px;
    margin-left: auto; margin-right: 24px;
  }
  .nav-link {
    font-size: 13px; font-weight: 500;
    color: var(--paper-faint);
    text-decoration: none;
    transition: color 120ms ease;
  }
  .nav-link:hover { color: var(--cream); }
  .nav-link[aria-current="page"] { color: var(--cream); }
  @media (max-width: 760px) {
    .nav-links { display: none; }
  }

  main {
    flex: 1;
    display: flex; align-items: center;
    padding: 60px 36px;
  }
  /* Sub-pages (/features, /pricing, /tutorials, /faq)
     use a vertical layout: page-hero on top, content
     section directly below. The default `display: flex`
     above is meant for the home page where <main> only
     holds the hero, so it'd lay the page-hero and the
     content section out side-by-side here. Switch to
     block layout when a .page-hero is present, and
     drop the horizontal padding so the page-hero and
     its content section provide their own. */
  main:has(.page-hero) {
    display: block;
    padding: 0;
    align-items: initial;
  }
  .hero {
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
  }
  .eyebrow {
    display: inline-block;
    padding: 6px 12px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gold);
    background: rgba(184,149,42,0.08);
    border: 1px solid rgba(184,149,42,0.25);
    border-radius: var(--radius-pill);
    margin-bottom: 28px;
  }
  h1 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(40px, 8vw, 92px);
    line-height: 1.04;
    letter-spacing: -0.01em;
    margin-bottom: 26px;
    max-width: 12ch;
  }
  h1 em {
    color: var(--gold);
    font-style: italic;
  }
  .lede {
    font-size: clamp(16px, 1.4vw, 19px);
    line-height: 1.6;
    color: rgba(245,240,232,0.75);
    max-width: 56ch;
    margin-bottom: 38px;
  }
  .cta-row {
    display: flex; gap: 14px; flex-wrap: wrap;
    margin-bottom: 56px;
  }
  .cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 28px;
    font-size: 15px; font-weight: 600;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
  }
  .cta-primary {
    color: var(--green-deep); background: var(--gold);
  }
  .cta-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
  .cta-secondary {
    color: var(--cream);
    background: transparent;
    border: 1px solid rgba(245,240,232,0.25);
  }
  .cta-secondary:hover {
    border-color: rgba(184,149,42,0.6);
    color: var(--gold);
  }

  .surfaces {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-top: 36px;
  }
  .surface {
    padding: 22px 22px 20px;
    background: rgba(245,240,232,0.04);
    border: 1px solid rgba(245,240,232,0.08);
    border-radius: var(--radius-card);
    transition: border-color 160ms ease, background 160ms ease;
  }
  .surface:hover {
    border-color: rgba(184,149,42,0.4);
    background: rgba(245,240,232,0.06);
  }
  .surface-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 500;
    color: var(--gold);
    margin-bottom: 4px;
  }
  .surface-url {
    font-size: 12px;
    color: rgba(245,240,232,0.55);
    letter-spacing: 0.02em;
  }
  .surface-desc {
    font-size: 13px;
    color: rgba(245,240,232,0.75);
    line-height: 1.5;
    margin-top: 10px;
  }

  /* ─── Pricing ──────────────────────────────────────── */
  .pricing-section {
    padding: 80px 36px;
    background:
      radial-gradient(ellipse at 80% 20%, rgba(184,149,42,0.10) 0%, transparent 60%),
      transparent;
  }
  .pricing-inner {
    max-width: 1100px;
    margin: 0 auto;
  }
  .pricing-head {
    text-align: center;
    margin-bottom: 56px;
  }
  .pricing-eyebrow {
    display: inline-block;
    padding: 6px 12px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gold);
    background: rgba(184,149,42,0.08);
    border: 1px solid rgba(184,149,42,0.25);
    border-radius: var(--radius-pill);
    margin-bottom: 22px;
  }
  .pricing-head h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.1;
    margin-bottom: 18px;
    letter-spacing: -0.005em;
  }
  .pricing-head p {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(245,240,232,0.75);
    max-width: 56ch;
    margin: 0 auto 32px;
  }

  /* Monthly / Annual toggle */
  .billing-toggle {
    display: inline-flex;
    padding: 4px;
    background: rgba(245,240,232,0.05);
    border: 1px solid rgba(245,240,232,0.10);
    border-radius: var(--radius-pill);
    gap: 0;
  }
  .billing-toggle button {
    background: transparent;
    border: 0;
    padding: 10px 22px;
    font: inherit;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: rgba(245,240,232,0.65);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease;
    display: inline-flex; align-items: center; gap: 8px;
  }
  .billing-toggle button.active {
    background: var(--gold);
    color: var(--green-deep);
  }
  .billing-toggle button:not(.active):hover {
    color: rgba(245,240,232,0.9);
  }
  .save-tag {
    display: inline-block;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(15,33,24,0.20);
    color: var(--green-deep);
    border-radius: var(--radius-pill);
  }
  .billing-toggle button:not(.active) .save-tag {
    background: rgba(184,149,42,0.20);
    color: var(--gold);
  }

  /* "14-day free trial" callout on paid tier cards */
  .trial-banner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--gold);
    background: rgba(184,149,42,0.10);
    border: 1px solid rgba(184,149,42,0.30);
    border-radius: var(--radius-pill);
  }
  .trial-banner::before {
    content: '✦';
    font-size: 10px;
    opacity: 0.9;
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  /* 2-tier variant used before the v1 collapse to a single plan.
     Kept in case tiered pricing comes back. */
  .pricing-grid.pricing-grid-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 820px;
    margin: 0 auto;
  }
  /* Single-plan variant used since the v1 collapse. One card, capped
     at ~440px so it reads as a considered product tile rather than
     stretching to the full band width. */
  .pricing-grid.pricing-grid-1 {
    grid-template-columns: minmax(320px, 440px);
    justify-content: center;
  }
  @media (max-width: 880px) {
    .pricing-grid,
    .pricing-grid.pricing-grid-1,
    .pricing-grid.pricing-grid-2 { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  }
  .pricing-card {
    position: relative;
    padding: 36px 28px 32px;
    background: rgba(245,240,232,0.04);
    border: 1px solid rgba(245,240,232,0.10);
    border-radius: var(--radius-card);
    display: flex; flex-direction: column;
    transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
  }
  .pricing-card:hover {
    transform: translateY(-4px);
    border-color: rgba(184,149,42,0.35);
  }
  .pricing-card.featured {
    background: rgba(184,149,42,0.08);
    border-color: rgba(184,149,42,0.55);
  }
  .pricing-badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    background: var(--gold);
    color: var(--green-deep);
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
  .pricing-tier-name {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px; font-weight: 500;
    color: var(--gold);
    margin-bottom: 8px;
  }
  .pricing-tagline {
    font-size: 13px;
    color: rgba(245,240,232,0.65);
    line-height: 1.5;
    margin-bottom: 24px;
    min-height: 40px;
  }
  .pricing-amount {
    display: flex; align-items: baseline; gap: 4px;
    margin-bottom: 4px;
  }
  .pricing-amount .price {
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px; font-weight: 500;
    line-height: 1;
    color: var(--cream);
  }
  .pricing-amount .pence {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px; font-weight: 500;
    color: rgba(245,240,232,0.65);
  }
  .pricing-unit {
    font-size: 13px;
    color: rgba(245,240,232,0.55);
    margin-bottom: 28px;
  }
  .pricing-features {
    list-style: none;
    margin-bottom: 32px;
    flex: 1;
  }
  .pricing-features li {
    padding: 9px 0 9px 26px;
    position: relative;
    font-size: 14px;
    color: rgba(245,240,232,0.82);
    line-height: 1.4;
    border-bottom: 1px solid rgba(245,240,232,0.06);
  }
  .pricing-features li:last-child { border-bottom: 0; }
  .pricing-features li::before {
    content: '';
    position: absolute;
    left: 0; top: 14px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: rgba(184,149,42,0.18);
    border: 1px solid rgba(184,149,42,0.55);
  }
  .pricing-features li::after {
    content: '';
    position: absolute;
    left: 4px; top: 18px;
    width: 6px; height: 3px;
    border-left: 1.5px solid var(--gold);
    border-bottom: 1.5px solid var(--gold);
    transform: rotate(-45deg);
  }
  .pricing-cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%;
    padding: 14px 24px;
    font-size: 14px; font-weight: 600;
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background 120ms ease, transform 120ms ease;
  }
  .pricing-cta-primary {
    background: var(--gold); color: var(--green-deep);
  }
  .pricing-cta-primary:hover { background: var(--gold-light); transform: translateY(-1px); }
  .pricing-cta-secondary {
    background: transparent;
    color: var(--cream);
    border: 1px solid rgba(245,240,232,0.25);
  }
  .pricing-cta-secondary:hover {
    border-color: rgba(184,149,42,0.6);
    color: var(--gold);
  }
  .pricing-note {
    text-align: center;
    margin-top: 38px;
    font-size: 13px;
    color: rgba(245,240,232,0.55);
    line-height: 1.7;
  }
  .pricing-note strong { color: rgba(245,240,232,0.8); }

  /* ── "Optional add-on" pill — section heading version ──────────
       Used on the websites band to signal at a glance that what
       follows is NOT part of the per-member Fairway subscription.
       Mirrors the signup wizard's optional-pill but darker-keyed
       for the marketing site theme. */
  .optional-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(184,149,42,0.10);
    border: 1px solid rgba(184,149,42,0.45);
    border-radius: var(--radius-pill);
  }
  .optional-pill::before {
    content: '+';
    display: inline-block;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--green-deep);
    text-align: center;
    line-height: 16px;
    font-size: 13px; font-weight: 800;
  }
  .optional-pill-divider {
    color: rgba(184,149,42,0.45);
    margin: 0 2px;
  }
  .optional-pill-note {
    color: rgba(245,240,232,0.55);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: none;
  }
  /* In-card "Add-on" tag for each website-card / above the price. */
  .addon-tag {
    display: inline-block;
    padding: 3px 9px;
    margin-bottom: 12px;
    font-size: 9.5px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold);
    background: rgba(184,149,42,0.10);
    border: 1px solid rgba(184,149,42,0.35);
    border-radius: var(--radius-pill);
  }

  /* Concierge upsell CSS removed with the feature. If it comes back,
     restore .concierge-card / .concierge-eyebrow / .concierge-included
     / .concierge-price-block / .concierge-tier-breakdown from git. */

  /* ── Website packages band ───────────────────────────────────── */
  .websites-band {
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid rgba(245,240,232,0.08);
  }
  .websites-head {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 40px;
  }
  .websites-eyebrow {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
  }
  .websites-band h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 38px; font-weight: 500;
    color: var(--cream);
    margin-bottom: 12px;
    line-height: 1.15;
  }
  .websites-head p {
    font-size: 15px;
    color: rgba(245,240,232,0.65);
    line-height: 1.55;
  }
  .websites-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
  /* Single-package variant used since the v1 scope-cut. Same card
     styling, capped at ~440px so the lone card reads as a considered
     product tile rather than stretching across the whole band. */
  .websites-grid.websites-grid-1 {
    grid-template-columns: minmax(320px, 440px);
    justify-content: center;
  }
  @media (max-width: 880px) {
    .websites-grid,
    .websites-grid.websites-grid-1 { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
  }
  .website-card {
    position: relative;
    padding: 32px 28px 28px;
    background: rgba(245,240,232,0.03);
    border: 1px solid rgba(245,240,232,0.09);
    border-radius: var(--radius-card);
    display: flex; flex-direction: column;
    transition: transform 220ms ease, border-color 220ms ease;
  }
  .website-card:hover {
    transform: translateY(-4px);
    border-color: rgba(184,149,42,0.35);
  }
  .website-featured {
    background: rgba(184,149,42,0.07);
    border-color: rgba(184,149,42,0.5);
  }
  .website-badge {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    font-size: 10px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    background: var(--gold);
    color: var(--green-deep);
    border-radius: var(--radius-pill);
    white-space: nowrap;
  }
  .website-tier {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px; font-weight: 500;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .website-price {
    display: flex; align-items: baseline; gap: 4px;
    margin-bottom: 2px;
  }
  .website-currency {
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px; font-weight: 500;
    color: rgba(245,240,232,0.75);
  }
  .website-amount {
    font-family: 'Cormorant Garamond', serif;
    font-size: 48px; font-weight: 500;
    color: var(--cream);
    line-height: 1;
  }
  .website-once {
    margin-left: 6px;
    font-size: 11px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: rgba(245,240,232,0.55);
    align-self: center;
  }
  .website-hosting {
    font-size: 12px;
    color: rgba(245,240,232,0.5);
    margin-bottom: 20px;
  }
  .website-features {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    flex: 1;
  }
  .website-features li {
    padding: 7px 0 7px 22px;
    position: relative;
    font-size: 13px;
    color: rgba(245,240,232,0.78);
    line-height: 1.45;
  }
  .website-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--gold);
    font-weight: 700;
  }
  .website-cta { width: 100%; }
  .websites-foot {
    text-align: center;
    margin-top: 36px;
    font-size: 13px;
    color: rgba(245,240,232,0.55);
    line-height: 1.7;
  }
  .websites-foot strong { color: rgba(245,240,232,0.78); }

  /* Feature grid — "Every Fairway-built website includes" */
  .ws-features-grid {
    margin-top: 48px;
    padding: 40px 32px;
    background: rgba(245,240,232,0.03);
    border: 1px solid rgba(184,149,42,0.18);
    border-radius: var(--radius-soft);
  }
  .ws-features-heading {
    margin: 0 0 32px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 28px;
    font-weight: 500;
    color: var(--cream);
    text-align: center;
    letter-spacing: 0.01em;
  }
  .ws-features-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px 20px;
  }
  .ws-feature {
    padding: 4px 4px 4px 0;
  }
  .ws-feature-icon {
    font-size: 22px;
    margin-bottom: 8px;
    line-height: 1;
  }
  .ws-feature-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
  }
  .ws-feature-text {
    font-size: 13px;
    color: rgba(245,240,232,0.72);
    line-height: 1.55;
  }
  .ws-feature-text code {
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 11.5px;
    background: rgba(184,149,42,0.12);
    padding: 1px 5px;
    color: var(--gold);
  }
  @media (max-width: 600px) {
    .ws-features-grid { padding: 28px 20px; }
    .ws-features-heading { font-size: 22px; margin-bottom: 24px; }
    .ws-features-list { grid-template-columns: 1fr; gap: 18px; }
  }

  footer {
    padding: 28px 36px;
    text-align: center;
    font-size: 12px;
    color: rgba(245,240,232,0.45);
    letter-spacing: 0.02em;
  }
  footer a {
    color: rgba(245,240,232,0.65);
    text-decoration: none;
    margin: 0 8px;
  }
  footer a:hover { color: var(--gold); }

  @media (max-width: 640px) {
    nav { padding: 18px 22px; }
    main { padding: 32px 22px; }
    .cta { padding: 14px 22px; font-size: 14px; }
  }

  /* ═══════════════════════════════════════════════════════════════
     SCREENSHOT PLACEHOLDER SLOTS
     Each slot is a sized, labelled container ready to receive a
     real screenshot. To swap in an image, change:
       <div class="screenshot-slot hero-mock-1" ...>...</div>
     to:
       <img  class="screenshot-slot hero-mock-1" src="img/screens/file.png" alt="…">
     The CSS handles both cases — div with placeholder children, or
     <img> at the same dimensions. Aspect ratio + positioning are
     preserved either way.
     ═══════════════════════════════════════════════════════════════ */
  .screenshot-slot {
    background:
      repeating-linear-gradient(45deg,
        rgba(184,149,42,0.04),
        rgba(184,149,42,0.04) 12px,
        rgba(184,149,42,0.07) 12px,
        rgba(184,149,42,0.07) 24px),
      rgba(245,240,232,0.03);
    border: 2px dashed rgba(184,149,42,0.45);
    border-radius: var(--radius-card);
    box-shadow: 0 18px 60px rgba(0,0,0,0.35),
                0 2px 8px rgba(0,0,0,0.18);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px;
    padding: 28px 22px;
    color: var(--paper-tint);
    text-align: center;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    position: relative;
    overflow: hidden;
    /* Default sizing — overridden by inline modifiers (hero-mock-N,
       showcase variants, feature-band visual). */
    aspect-ratio: 4/3;
  }
  img.screenshot-slot {
    /* When the placeholder is replaced with <img>, kill placeholder
       chrome (dashed border, pattern) and let the image fill cleanly. */
    background: none;
    border: 0;
    padding: 0;
    object-fit: cover;
    object-position: top center;
  }
  /* Corner brackets — pure-CSS "crop marks" that signal placeholder. */
  .screenshot-slot::before,
  .screenshot-slot::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border: 2px solid var(--gold);
    pointer-events: none;
  }
  .screenshot-slot::before {
    top: 12px; left: 12px;
    border-right: none; border-bottom: none;
  }
  .screenshot-slot::after {
    bottom: 12px; right: 12px;
    border-left: none; border-top: none;
  }
  img.screenshot-slot::before, img.screenshot-slot::after { display: none; }

  .screenshot-slot-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(184,149,42,0.18);
    color: var(--gold);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    margin-bottom: 4px;
  }
  .screenshot-slot-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--cream);
    letter-spacing: 0.02em;
    line-height: 1.3;
  }
  .screenshot-slot-meta {
    font-size: 10.5px;
    color: var(--paper-faint);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    letter-spacing: 0.04em;
  }
  .screenshot-slot-meta code {
    color: var(--gold);
    background: rgba(184,149,42,0.10);
    padding: 1px 6px;
    border-radius: 4px;
    margin: 0 2px;
    font-size: 10px;
  }
  /* Phone-shaped placeholder. */
  .screenshot-slot.phone {
    aspect-ratio: 9/19;
    border-radius: 32px;
    max-width: 260px;
    margin: 0 auto;
  }

  /* (Mock-component CSS removed — superseded by .screenshot-slot
     placeholders above. Drop screenshots into the labelled slots in
     the HTML to bring them back. Git history preserves the originals
     if we ever want to revert to the CSS-rendered mockups.) */
  /* ═══════════════════════════════════════════════════════════════
     (deleted block follows — preserved comment-only so the next
     SECTION BANDS divider keeps its surrounding whitespace.)
     ═══════════════════════════════════════════════════════════════ */

  /* ═══════════════════════════════════════════════════════════════
     SECTION BANDS — How it works, Showcase, Features, Social, FAQ, CTA
     ═══════════════════════════════════════════════════════════════ */

  /* Shared section-container helpers. */
  .section-shell {
    max-width: 1180px;
    margin: 0 auto;
    padding: 96px 36px;
  }
  .section-head {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 56px;
  }
  .section-eyebrow {
    display: inline-block;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .section-h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 500; line-height: 1.1;
    color: var(--cream);
    margin-bottom: 14px;
  }
  .section-h2 em { color: var(--gold); font-style: italic; }
  .section-lede {
    font-size: 16px;
    color: var(--paper-tint);
    line-height: 1.6;
  }

  /* ── Hero showcase strip (sits inside the existing .hero) ──────
       Two-row CSS grid. Row 1: admin tee sheet (left) + phone (right).
       Phone column is fixed at 220px so its 9/19 aspect produces a
       height close to the admin's 16/10 at the same row — matched
       heights, no dead corners. Row 2: leaderboard spans both
       columns as a panoramic strip, filling the area that was
       previously empty under the admin shot. */
  .hero-mockups {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-rows: auto auto;
    column-gap: 32px;
    row-gap: 32px;
    margin-top: 56px;
    align-items: start;
  }
  @media (max-width: 880px) { .hero-mockups { display: none; } }
  .hero-mock-1 {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16/10;
    transform: rotate(-1.5deg);
  }
  .hero-mock-2 {
    grid-column: 2;
    grid-row: 1;
    aspect-ratio: 9/19;
    justify-self: end;
    align-self: start;
  }
  .hero-mock-3 {
    grid-column: 1 / -1;   /* span both columns */
    grid-row: 2;
    aspect-ratio: 16/6;    /* panoramic — fills the row cleanly */
    transform: rotate(0.8deg);
  }

  /* ── "How it works" 3-step band ──────────────────────────────── */
  .how-section {
    background: linear-gradient(180deg,
                  transparent 0%,
                  rgba(15,33,24,0.40) 50%,
                  transparent 100%);
  }
  .how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    counter-reset: how;
  }
  @media (max-width: 880px) {
    .how-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  }
  .how-step {
    position: relative;
    padding: 36px 28px;
    background: var(--paper-veil);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-card);
  }
  .how-step::before {
    counter-increment: how;
    content: counter(how, decimal-leading-zero);
    font-family: 'Cormorant Garamond', serif;
    font-size: 56px; line-height: 1;
    color: var(--gold);
    opacity: 0.50;
    margin-bottom: 16px;
    display: block;
  }
  .how-step-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px; font-weight: 500;
    color: var(--cream);
    margin-bottom: 8px;
  }
  .how-step-time {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.10em; text-transform: uppercase;
    color: var(--gold);
  }
  .how-step-text {
    font-size: 14px; line-height: 1.6;
    color: var(--paper-tint);
  }
  .how-arrow {
    position: absolute;
    right: -22px; top: 50%;
    transform: translateY(-50%);
    color: var(--gold-line);
    font-size: 22px;
    pointer-events: none;
  }
  @media (max-width: 880px) { .how-arrow { display: none; } }

  /* ── Product showcase (3 big mockups) ──────────────────────────── */
  .showcase-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  @media (max-width: 980px) {
    .showcase-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  }
  .showcase-item { display: flex; flex-direction: column; gap: 18px; }
  .showcase-mock { aspect-ratio: 4/3; }
  .showcase-mock.phone { aspect-ratio: 9/16; max-width: 240px; margin: 0 auto; }
  .showcase-caption-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 500;
    color: var(--cream);
    margin-bottom: 6px;
  }
  .showcase-caption-text {
    font-size: 13.5px;
    color: var(--paper-tint);
    line-height: 1.55;
  }

  /* ── Feature deep-dive alternating bands ─────────────────────── */
  .features-section { padding: 80px 0; }
  .feature-band {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
    padding: 56px 36px;
  }
  @media (max-width: 880px) {
    .feature-band { grid-template-columns: 1fr; gap: 36px; }
    .feature-band.reverse .feature-text { order: 1; }
    .feature-band.reverse .feature-visual { order: 2; }
  }
  .feature-band.reverse .feature-text { order: 2; }
  .feature-band.reverse .feature-visual { order: 1; }
  .feature-eyebrow {
    display: inline-block;
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
  }
  .feature-h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 500; line-height: 1.15;
    color: var(--cream);
    margin-bottom: 14px;
  }
  .feature-h3 em { color: var(--gold); font-style: italic; }
  .feature-desc {
    font-size: 15px; line-height: 1.65;
    color: var(--paper-tint);
    margin-bottom: 22px;
  }
  .feature-list { list-style: none; padding: 0; margin: 0; }
  .feature-list li {
    position: relative;
    padding-left: 26px;
    padding-bottom: 10px;
    font-size: 14px;
    color: var(--paper-tint);
    line-height: 1.5;
  }
  .feature-list li::before {
    content: '✓';
    position: absolute; left: 0; top: -1px;
    color: var(--gold);
    font-weight: 700;
  }
  .feature-visual { aspect-ratio: 4/3; }

  /* ── Social proof band ────────────────────────────────────────── */
  .proof-section { background: rgba(15,33,24,0.45); }
  .proof-card {
    max-width: 820px;
    margin: 0 auto;
    padding: 48px 56px;
    background: var(--paper-veil);
    border: 1px solid var(--paper-line);
    border-left: 3px solid var(--gold);
    border-radius: var(--radius-card);
  }
  @media (max-width: 640px) {
    .proof-card { padding: 32px 28px; }
  }
  .proof-quote-mark {
    font-family: 'Cormorant Garamond', serif;
    font-size: 64px; line-height: 0.6;
    color: var(--gold);
    opacity: 0.6;
    margin-bottom: 4px;
  }
  .proof-quote {
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px; font-weight: 400;
    color: var(--cream);
    line-height: 1.45;
    margin-bottom: 24px;
  }
  .proof-attrib {
    display: flex; align-items: center; gap: 12px;
    font-size: 13px;
    color: var(--paper-tint);
  }
  .proof-attrib .av {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold), var(--gold-light));
    color: #0F2118;
    font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .proof-attrib strong { color: var(--cream); font-weight: 600; }

  .pilot-strip {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--paper-line);
    text-align: center;
  }
  .pilot-strip-label {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--paper-faint);
    margin-bottom: 18px;
  }
  .pilot-logos {
    display: flex; flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 28px 48px;
  }
  .pilot-logo {
    font-family: 'Cormorant Garamond', serif;
    font-size: 19px; font-weight: 500;
    color: var(--paper-tint);
    letter-spacing: 0.02em;
  }
  .pilot-logo:nth-child(even) { font-style: italic; }

  /* ── FAQ band ──────────────────────────────────────────────────── */
  .faq-list { max-width: 760px; margin: 0 auto; }
  .faq-item {
    border-top: 1px solid var(--paper-line);
    padding: 24px 4px;
  }
  .faq-item:last-child { border-bottom: 1px solid var(--paper-line); }
  .faq-item summary {
    cursor: pointer;
    list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    gap: 24px;
    font-size: 16px; font-weight: 500;
    color: var(--cream);
    line-height: 1.4;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after {
    content: '+';
    flex: 0 0 24px;
    text-align: center;
    font-size: 24px; font-weight: 300;
    color: var(--gold);
    transition: transform 200ms ease;
  }
  .faq-item[open] summary::after { transform: rotate(45deg); }
  .faq-answer {
    margin-top: 14px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--paper-tint);
  }

  /* ── Final CTA band ────────────────────────────────────────────── */
  .final-cta-section { padding: 96px 36px 112px; text-align: center; }
  .final-cta-card {
    max-width: 880px;
    margin: 0 auto;
    padding: 64px 48px;
    background:
      radial-gradient(ellipse at 30% 0%, rgba(184,149,42,0.20) 0%, transparent 60%),
      linear-gradient(135deg, rgba(184,149,42,0.10) 0%, rgba(184,149,42,0.04) 100%);
    border: 1px solid rgba(184,149,42,0.40);
    border-radius: var(--radius-card);
  }
  @media (max-width: 640px) {
    .final-cta-card { padding: 44px 28px; }
  }
  .final-cta-h2 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(30px, 4.5vw, 48px);
    font-weight: 500; line-height: 1.1;
    color: var(--cream);
    margin-bottom: 14px;
  }
  .final-cta-h2 em { color: var(--gold); font-style: italic; }
  .final-cta-text {
    font-size: 15px;
    color: var(--paper-tint);
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 540px; margin-left: auto; margin-right: auto;
  }
  .final-cta-row {
    display: flex; flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
  }

  /* ── Expanded footer ───────────────────────────────────────────── */
  footer.footer-rich {
    background: rgba(15,33,24,0.55);
    border-top: 1px solid var(--paper-line);
    padding: 56px 36px 32px;
    margin-top: 0;
    flex-direction: column;
    text-align: left;
    align-items: stretch;
    display: block;
    font-size: 13px;
  }
  .footer-inner {
    max-width: 1180px;
    margin: 0 auto;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: 48px;
    margin-bottom: 40px;
  }
  @media (max-width: 880px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
  }
  @media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
  }
  .footer-brand {
    display: inline-flex; align-items: center; gap: 12px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 500;
    color: var(--cream); text-decoration: none;
    margin-bottom: 14px;
  }
  .footer-brand .brand-mark { background: var(--green-deep); }
  .footer-tag {
    color: var(--paper-tint); line-height: 1.55;
    max-width: 260px;
  }
  .footer-col-h {
    font-size: 11px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 18px;
  }
  .footer-col ul { list-style: none; padding: 0; margin: 0; }
  .footer-col li { margin-bottom: 12px; }
  .footer-col a {
    color: var(--paper-tint);
    text-decoration: none;
    transition: color 120ms ease;
    margin: 0;
  }
  .footer-col a:hover { color: var(--cream); }
  .footer-base {
    display: flex; justify-content: space-between; align-items: center;
    padding-top: 28px;
    border-top: 1px solid var(--paper-line);
    color: var(--paper-faint);
    font-size: 12px;
  }
  .footer-base a { color: var(--paper-faint); margin: 0 8px; }
  .footer-base a:hover { color: var(--cream); }
  @media (max-width: 560px) {
    .footer-base { flex-direction: column; gap: 14px; text-align: center; }
  }

  /* ════════════════════════════════════════════
     TUTORIALS SECTION
     Sits between FAQ and final CTA. Filter chips
     scope the grid by surface (member / admin /
     website builder). Cards are <details> so the
     expand/collapse is keyboard-accessible without
     custom JS.
     ════════════════════════════════════════════ */
  /* On the standalone /tutorials page the section just needs bottom
     padding before the final CTA — top padding comes from `.subpage-lead`
     so all sub-pages share the same opening rhythm. Background and
     borders dropped (body's gradient already provides them). */
  #tutorials {
    padding-bottom: 110px;
  }

  .tut-filter {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 10px;
    margin: 0 auto 56px;
    max-width: 800px;
  }
  .tut-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    font-family: inherit; font-size: 13px; font-weight: 500;
    color: var(--paper-faint);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
  }
  .tut-chip:hover { color: var(--cream); border-color: rgba(255,255,255,0.28); }
  .tut-chip.active {
    color: var(--green-deep);
    background: var(--gold);
    border-color: var(--gold);
  }
  .tut-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px;
    padding: 0 7px;
    font-size: 11px; font-weight: 600;
    background: rgba(255,255,255,0.08);
    color: inherit;
    border-radius: var(--radius-pill);
    line-height: 1;
  }
  .tut-chip.active .tut-count {
    background: rgba(11, 31, 18, 0.18);
  }

  /* Masonry-style layout via CSS multi-column: each column flows
     independently, so opening one card only lengthens its own column
     instead of stretching every card in the row. break-inside: avoid
     keeps each card together when the layout reflows. */
  .tut-grid {
    column-count: 3;
    column-gap: 22px;
    max-width: 1120px;
    margin: 0 auto;
  }
  .tut-card {
    background: rgba(255, 250, 240, 0.025);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-card);
    transition: border-color 200ms ease, transform 200ms ease, background 200ms ease;
    overflow: hidden;
    /* Critical for masonry: keep each card whole inside its column,
       and ensure block-level layout so width auto-fills the column. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: block;
    margin: 0 0 22px;
  }
  .tut-card[hidden] { display: none; }
  .tut-card:hover {
    border-color: rgba(184, 149, 42, 0.35);
    background: rgba(255, 250, 240, 0.04);
  }
  .tut-card[open] {
    border-color: rgba(184, 149, 42, 0.55);
    background: rgba(255, 250, 240, 0.06);
  }
  .tut-card summary {
    display: block;
    padding: 26px 28px;
    cursor: pointer;
    list-style: none;
    position: relative;
  }
  .tut-card summary::-webkit-details-marker { display: none; }
  .tut-card summary::after {
    content: '+';
    position: absolute;
    top: 26px; right: 26px;
    font-family: 'Cormorant Garamond', serif;
    font-size: 24px; font-weight: 300;
    color: var(--gold);
    line-height: 1;
    transition: transform 220ms ease;
  }
  .tut-card[open] summary::after {
    content: '−';
    transform: rotate(0deg);
  }
  .tut-tag {
    display: inline-block;
    padding: 4px 11px;
    font-size: 10.5px; font-weight: 600;
    letter-spacing: 0.06em; text-transform: uppercase;
    border-radius: var(--radius-pill);
    margin-bottom: 14px;
  }
  .tut-tag-member  { background: rgba(115, 165, 128, 0.18); color: #9ec9ab; }
  .tut-tag-admin   { background: rgba(184, 149, 42, 0.18); color: var(--gold); }
  .tut-tag-website { background: rgba(126, 161, 199, 0.18); color: #a9c4dd; }
  .tut-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 22px; font-weight: 500;
    color: var(--cream);
    margin: 0 0 8px;
    letter-spacing: 0.005em;
    padding-right: 30px; /* leave room for the +/− glyph */
  }
  .tut-blurb {
    font-size: 14px; line-height: 1.55;
    color: var(--paper-faint);
    margin: 0 0 14px;
  }
  .tut-meta {
    display: inline-block;
    font-size: 11.5px; font-weight: 500;
    letter-spacing: 0.04em; text-transform: uppercase;
    color: rgba(245, 240, 232, 0.45);
  }
  .tut-steps {
    margin: 0;
    padding: 0 28px 30px 56px;
    list-style: decimal;
    color: var(--paper-faint);
    font-size: 14.5px; line-height: 1.7;
  }
  .tut-steps li { margin-bottom: 12px; }
  .tut-steps li:last-child { margin-bottom: 0; }
  .tut-steps li::marker {
    color: var(--gold);
    font-weight: 600;
  }
  .tut-steps strong { color: var(--cream); font-weight: 600; }
  .tut-steps a { color: var(--gold-light); }
  .tut-steps a:hover { color: var(--gold); }
  .tut-steps code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--cream);
  }
  @media (max-width: 1000px) {
    .tut-grid { column-count: 2; }
  }
  @media (max-width: 760px) {
    #tutorials { padding-bottom: 80px; }
    .tut-grid { column-count: 1; column-gap: 0; }
    .tut-card { margin-bottom: 16px; }
    .tut-card summary { padding: 22px 22px; }
    .tut-card summary::after { right: 22px; top: 22px; }
    .tut-steps { padding: 0 22px 24px 48px; }
  }

  /* ════════════════════════════════════════════
     PAGE HERO
     Used at the top of every sub-page (/features,
     /pricing, /tutorials, /faq). Distinct from
     `.section-head` (which is designed for a
     section WITHIN a longer page). The page hero
     gives each sub-page real visual weight so it
     reads as its own destination — bigger type,
     larger eyebrow chip, generous padding,
     centred horizontally and self-contained.
     ════════════════════════════════════════════ */
  .page-hero {
    max-width: 1180px;
    margin: 0 auto;
    padding: 130px 36px 70px;
    text-align: center;
  }
  .page-hero-eyebrow {
    display: inline-block;
    padding: 7px 14px;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--gold);
    background: rgba(184,149,42,0.10);
    border: 1px solid rgba(184,149,42,0.30);
    border-radius: var(--radius-pill);
  }
  .page-hero-h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(38px, 6vw, 68px);
    font-weight: 500; line-height: 1.05;
    color: var(--cream);
    letter-spacing: -0.01em;
    max-width: 920px;
    margin: 26px auto 0;
  }
  .page-hero-h1 em {
    font-style: italic;
    color: var(--gold-light);
  }
  .page-hero-lede {
    font-size: 18px; line-height: 1.55;
    color: var(--paper-tint);
    max-width: 640px;
    margin: 26px auto 0;
  }
  .page-hero-lede a { color: var(--gold); }
  .page-hero-lede a:hover { color: var(--gold-light); }

  /* Billing toggle on /pricing — sits centered under
     the page hero, above the pricing grid. */
  .billing-toggle-wrap {
    display: flex;
    justify-content: center;
    margin: 0 auto 56px;
  }

  /* Content shell — used directly under .page-hero
     to width-constrain the page's main content
     without piling extra vertical padding on top
     of what the hero already provides. */
  .page-content {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 36px 110px;
  }

  @media (max-width: 760px) {
    .page-hero { padding: 90px 24px 50px; }
    .page-hero-lede { font-size: 16px; }
    .page-content { padding: 0 24px 80px; }
    .billing-toggle-wrap { margin-bottom: 40px; }
  }

  /* ════════════════════════════════════════════
     SUB-PAGE CONTENT WIDTH
     The sub-pages use the same canonical multi-
     column grids as the home page (.pricing-grid,
     .feature-band, .tut-grid, .websites-grid), so
     no per-grid overrides are needed here. Each
     grid collapses to a single column at its own
     mobile breakpoint, which is what we want.
     ════════════════════════════════════════════ */