/*
  rebuild/spine-offering.css
  Shared styles for /services hub + individual offering pages.
  Supplements rebuild/spine.css + rebuild/tokens.css.
  No design literals — reads through token var() only.
*/

@layer structure {

  /* ── Page hero (offering pages) ────────────────────────────────── */
  .offer-hero {
    padding-block: var(--space-7) var(--space-6);
    border-bottom: 1px solid var(--color-hairline);
    position: relative;
    overflow: hidden;
  }
  .offer-hero__eyebrow {
    font-size: var(--type-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-signal);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .offer-hero__eyebrow::before {
    content: '';
    display: block;
    width: 24px;
    height: 1px;
    background: var(--color-signal);
    flex-shrink: 0;
  }
  .offer-hero__h1 {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    max-width: 22ch;
    margin-bottom: var(--space-4);
  }
  .offer-hero__h1 .muted-word { color: var(--color-ink-muted); }
  .offer-hero__sub {
    font-size: var(--type-h4);
    font-weight: var(--weight-light);
    color: var(--color-ink-muted);
    max-width: var(--measure-read);
    line-height: var(--leading-body);
    margin-bottom: var(--space-5);
  }
  .offer-hero__price-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
  }
  .offer-price {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1;
    letter-spacing: var(--tracking-display);
    color: var(--color-ink);
  }
  .offer-price-note {
    font-size: var(--type-small);
    color: var(--color-ink-faint);
  }
  .offer-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
  }
  .btn-pill { border-radius: var(--radius-pill) !important; }

  /* ── Zone sections ─────────────────────────────────────────────── */
  .offer-zone {
    padding-block: var(--space-section);
    border-top: 1px solid var(--color-hairline);
  }
  .offer-zone__eyebrow {
    font-size: var(--type-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-signal);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }
  .offer-zone__eyebrow::before {
    content: '';
    display: block;
    width: 16px;
    height: 1px;
    background: var(--color-signal);
    flex-shrink: 0;
  }
  .offer-zone__h2 {
    font-family: var(--font-display);
    font-size: var(--type-h2);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-display);
    margin-bottom: var(--space-5);
    max-width: 32ch;
  }

  /* Zone 2: deliverable cards */
  .deliverable-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-4);
  }
  @media (min-width: 720px) { .deliverable-grid { grid-template-columns: repeat(2, 1fr); } }
  .deliverable-card {
    background: var(--surface-2);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
  }
  .deliverable-card__name {
    font-size: var(--type-small);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin-bottom: var(--space-2);
  }
  .deliverable-card__desc {
    font-size: var(--type-small);
    color: var(--color-ink-muted);
    line-height: var(--leading-body);
  }

  /* Zone 3: steps */
  .steps-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }
  .step-row {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
  }
  .step-row__num {
    font-family: var(--font-display);
    font-size: var(--type-h2);
    line-height: 1;
    color: var(--color-signal);
    flex-shrink: 0;
    width: 2.5ch;
    opacity: 0.7;
  }
  .step-row__content {}
  .step-row__title {
    font-size: var(--type-h4);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin-bottom: var(--space-1);
  }
  .step-row__body {
    font-size: var(--type-body);
    color: var(--color-ink-muted);
    line-height: var(--leading-body);
  }

  /* Zone 4: proof block */
  .proof-honest {
    background: var(--surface-2);
    border: 1px solid var(--color-hairline-2);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-4);
  }
  .proof-honest p {
    font-size: var(--type-body);
    color: var(--color-ink-muted);
    line-height: var(--leading-body);
  }
  .proof-honest p + p { margin-top: var(--space-3); }
  .proof-honest strong { color: var(--color-ink); font-weight: var(--weight-medium); }

  /* Zone 5: price + config entry */
  .price-zone-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-top: var(--space-4);
  }
  @media (min-width: 720px) { .price-zone-grid { grid-template-columns: 1fr 1fr; } }
  .tier-card {
    background: var(--surface-2);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .tier-card--featured {
    border-color: rgba(194,255,0,0.4);
    background: linear-gradient(135deg, rgba(194,255,0,0.04), var(--surface-2) 60%);
  }
  .tier-card__name {
    font-family: var(--font-display);
    font-size: var(--type-h3);
    color: var(--color-ink);
    line-height: 1.1;
  }
  .tier-card__price {
    font-family: var(--font-display);
    font-size: var(--type-h2);
    color: var(--color-signal);
    line-height: 1;
  }
  .tier-card__desc {
    font-size: var(--type-body);
    color: var(--color-ink-muted);
    line-height: var(--leading-body);
    flex: 1;
  }
  .config-entry {
    margin-top: var(--space-5);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-3);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
  .config-entry p {
    font-size: var(--type-body);
    color: var(--color-ink-muted);
  }

  /* Zone 6: CTA */
  .offer-cta-zone {
    text-align: center;
    padding-block: var(--space-section);
    border-top: 1px solid var(--color-hairline);
  }
  .offer-cta-zone h2 {
    font-family: var(--font-display);
    font-size: var(--type-h2);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-display);
    margin-bottom: var(--space-4);
  }
  .offer-cta-zone p {
    font-size: var(--type-body);
    color: var(--color-ink-muted);
    margin-bottom: var(--space-5);
    max-width: 50ch;
    margin-inline: auto;
  }
  .step-down-note {
    margin-top: var(--space-4);
    font-size: var(--type-small);
    color: var(--color-ink-faint);
  }
  .step-down-note a {
    color: var(--color-ink-muted);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* Pairing row */
  .pairing-row {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-hairline);
  }
  .pairing-row__label {
    font-size: var(--type-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-faint);
    margin-bottom: var(--space-3);
  }
  .pairing-row__cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
  .pairing-card {
    background: var(--surface-3);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    transition: border-color var(--dur-fast) var(--ease-out);
  }
  .pairing-card:hover { border-color: var(--color-hairline-2); }
  .pairing-card__name {
    font-size: var(--type-small);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }
  .pairing-card__price {
    font-size: 0.75rem;
    color: var(--color-ink-faint);
  }

  /* ── Services hub ──────────────────────────────────────────────── */
  .hub-funnel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--surface-2);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    margin-top: var(--space-5);
  }
  .funnel-node {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--type-small);
    color: var(--color-ink-muted);
    text-decoration: none;
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-pill);
    padding: 0.4rem 1rem;
    transition: border-color var(--dur-fast), color var(--dur-fast);
  }
  .funnel-node:hover { border-color: var(--color-hairline-2); color: var(--color-ink); }
  .funnel-node.lime { color: var(--color-signal); border-color: rgba(194,255,0,0.3); }
  .funnel-arrow { color: var(--color-ink-faint); font-size: 1rem; }

  .routing-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-5);
  }
  @media (min-width: 720px) { .routing-block { grid-template-columns: repeat(3, 1fr); } }
  .routing-card {
    background: var(--surface-2);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    text-decoration: none;
    transition: border-color var(--dur-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .routing-card:hover { border-color: rgba(194,255,0,0.2); }
  .routing-card__trigger {
    font-size: var(--type-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-faint);
    font-weight: 600;
  }
  .routing-card__action {
    font-family: var(--font-display);
    font-size: var(--type-h3);
    color: var(--color-ink);
    line-height: 1.1;
  }
  .routing-card__dest {
    font-size: var(--type-small);
    color: var(--color-signal);
  }

  .hub-bucket {
    margin-top: var(--space-6);
  }
  .hub-bucket__label {
    font-size: var(--type-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-faint);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-hairline);
  }
  .hub-bucket__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    margin-top: var(--space-3);
  }
  @media (min-width: 720px) { .hub-bucket__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .hub-bucket__grid { grid-template-columns: repeat(3, 1fr); } }
  .hub-bucket__grid.wide-2 { }
  @media (min-width: 720px) { .hub-bucket__grid.wide-2 { grid-template-columns: 1fr 1fr; } }
  .hub-card {
    background: var(--surface-2);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-decoration: none;
    transition: border-color var(--dur-base);
  }
  .hub-card:hover { border-color: rgba(194,255,0,0.2); }
  .hub-card--flagship { border-color: rgba(194,255,0,0.3); background: linear-gradient(135deg, rgba(194,255,0,0.04), var(--surface-2) 60%); }
  .hub-card--gated { opacity: 0.6; pointer-events: none; }
  .hub-card__tag {
    font-size: var(--type-eyebrow);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-faint);
  }
  .hub-card--flagship .hub-card__tag { color: var(--color-signal); }
  .hub-card__name {
    font-size: var(--type-h4);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    line-height: var(--leading-snug);
  }
  .hub-card__desc {
    font-size: var(--type-small);
    color: var(--color-ink-muted);
    line-height: var(--leading-body);
    flex: 1;
  }
  .hub-card__price {
    font-size: var(--type-small);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin-top: var(--space-1);
  }
  .hub-card__cta {
    font-size: var(--type-small);
    color: var(--color-signal);
    margin-top: var(--space-1);
  }

  /* anti-cannibalization note */
  .anti-cannib {
    margin-top: var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-3);
    border: 1px solid var(--color-hairline);
    border-radius: var(--radius-md);
    font-size: var(--type-small);
    color: var(--color-ink-faint);
    line-height: var(--leading-body);
  }

  /* ── Shared nav ──────────────────────────────────────────────── */
  .offer-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .offer-nav .nav-links { display: none; list-style: none; gap: var(--space-5); }
  @media (min-width: 720px) { .offer-nav .nav-links { display: flex; } }
  .offer-nav .nav-links a {
    font-size: var(--type-small);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--color-ink-muted);
    text-decoration: none;
    transition: color var(--dur-fast);
  }
  .offer-nav .nav-links a:hover { color: var(--color-ink); }
  .nav-lime { color: var(--color-signal) !important; }

  /* ── Footer (shared across offering pages) ──────────────────── */
  .offer-footer { background: var(--surface-2); border-top: 1px solid var(--color-hairline); padding-block: var(--space-6); }
  .offer-footer .container { display: flex; flex-direction: column; gap: var(--space-3); }
  @media (min-width: 720px) { .offer-footer .container { flex-direction: row; justify-content: space-between; align-items: center; } }
  .offer-footer-nap { font-size: var(--type-small); color: var(--color-ink-faint); line-height: var(--leading-body); }
  .offer-footer-nap a { color: var(--color-ink-faint); text-decoration: none; }
  .offer-footer-nap a:hover { color: var(--color-ink-muted); }
  .offer-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--type-small); }
  .offer-footer-links a { color: var(--color-ink-faint); text-decoration: none; transition: color var(--dur-fast); }
  .offer-footer-links a:hover { color: var(--color-ink-muted); }
  .offer-footer-legal { font-size: 0.6875rem; color: var(--color-ink-faint); }
}