/* ==========================================================================
   landing.css — the public homepage composition
   ==========================================================================

   Extends static/css/stead.css, which owns every token and component used
   here. This file holds two things only:

     1. The page's own composition: the hero split, the pricing band, the
        session panel, the closing band.
     2. The example author site inside `.stage`, which is a drawing of an
        author page rather than a Stead page. It carries its own palette as
        scoped custom properties precisely so it does not borrow Stead's.

   Anything here that would be useful on a second page belongs in stead.css
   instead. Page stylesheets compose; they do not redefine components.
   ========================================================================== */

@layer pages {
  /* --- the example author site -----------------------------------------
     A fictional author's palette. Deliberately warm browns and olive so the
     mock reads as somebody else's site sitting inside Stead's frame. */

  .stage {
    --stage-bg: var(--clay-300);
    --stage-ink: var(--clay-700);
    --stage-chrome: #f6eeea;
    --stage-line: #dacfba;
    --stage-page: var(--paper-warm);
    --stage-brown: #734333;
    --stage-brown-soft: #84705d;
    --stage-btn: #73533f;
    --stage-book: #f3c24f;
    --stage-book-ink: #692e45;
    --stage-signup: var(--sage-100);
    --stage-signup-ink: var(--sage-800);
  }

  /* --- hero ------------------------------------------------------------- */

  .hero {
    display: grid;
    gap: var(--space-8);
    align-items: center;
    padding-block: var(--space-7) var(--space-8);
  }

  .hero-copy {
    display: grid;
    gap: var(--space-5);
    align-content: start;
  }

  .hero h1 {
    margin: 0;
  }

  .hero .lede {
    max-inline-size: 30rem;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
  }

  .hero .micro {
    margin: 0;
  }

  .hero-help {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-block-start: var(--space-2);
    color: var(--text-faint);
    font-size: var(--text-sm);
    line-height: 1.55;
  }

  .hero-help strong {
    color: var(--text);
    font-size: var(--text-md);
  }

  .help-badge {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    inline-size: 2.875rem;
    block-size: 2.875rem;
    color: var(--accent-amber-ink);
    border-radius: 50%;
    background: var(--amber-200);
    font-family: var(--serif);
    font-size: 1.5625rem;
  }

  /* --- the stage -------------------------------------------------------- */

  .stage {
    position: relative;
    padding: 1.8125rem 1.875rem 2.375rem;
    border-radius: 2.1875rem 2.1875rem 6.25rem 2.1875rem;
    background: var(--stage-bg);
  }

  .stage-label {
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    margin-block-end: 1.125rem;
    color: var(--stage-ink);
    font-size: 0.625rem;
    font-weight: var(--weight-strong);
    letter-spacing: 0.04em;
  }

  .mock {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: 0 1.125rem 1.5625rem rgb(102 37 26 / 14%);
    transform: rotate(-3deg);
  }

  .mock-bar {
    display: flex;
    gap: 0.3125rem;
    align-items: center;
    block-size: 2.125rem;
    padding-inline: 0.75rem;
    background: var(--stage-chrome);
  }

  .mock-dot {
    inline-size: 0.3125rem;
    block-size: 0.3125rem;
    border-radius: 50%;
    background: #aab6b5;
  }

  .mock-address {
    margin-inline: auto;
    color: #62706e;
    font-size: 0.625rem;
  }

  .mock-page {
    padding: 1.75rem 1.875rem;
    background: var(--stage-page);
  }

  .mock-nav {
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding-block-end: 0.875rem;
    border-block-end: 1px solid var(--stage-line);
    color: var(--stage-brown-soft);
    font-size: 0.625rem;
  }

  .mock-name {
    color: var(--stage-brown);
    font-family: var(--serif);
    font-size: 0.9375rem;
    font-weight: var(--weight-strong);
  }

  .mock-page h3 {
    max-inline-size: 16rem;
    margin: 1.875rem 0 0;
    color: var(--stage-brown);
    font-size: 2.5rem;
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
    line-height: 1.05;
  }

  .mock-page > p {
    max-inline-size: 16rem;
    margin-block: 0.625rem 0;
    color: var(--stage-brown-soft);
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .mock-btn {
    display: inline-block;
    margin-block-start: 1.125rem;
    padding: 0.5625rem 0.875rem;
    color: var(--white);
    border-radius: 1.25rem;
    background: var(--stage-btn);
    font-size: 0.625rem;
    line-height: 1;
  }

  .mock-book {
    display: grid;
    grid-template-columns: 5.8125rem minmax(0, 1fr);
    gap: 1.1875rem;
    margin-block-start: 1.6875rem;
    padding-block-start: 1.1875rem;
    border-block-start: 1px solid var(--stage-line);
  }

  .mock-cover {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    block-size: 8.3125rem;
    padding: 0.875rem;
    color: var(--stage-book-ink);
    background: var(--stage-book);
    box-shadow: 0.3125rem 0.3125rem rgb(226 172 57 / 20%);
    font-family: var(--serif);
    font-size: 1.375rem;
    line-height: 1.1;
  }

  .mock-cover small {
    font-family: var(--sans);
    font-size: 0.4375rem;
    letter-spacing: 0.0625rem;
  }

  .mock-info .mock-kicker {
    color: var(--stage-brown-soft);
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .mock-info strong {
    display: block;
    margin-block-start: 0.375rem;
    color: var(--stage-brown);
    font-family: var(--serif);
    font-size: 1.4375rem;
    font-weight: var(--weight-display);
  }

  .mock-info p {
    margin-block: 0.375rem 0;
    color: var(--stage-brown-soft);
    font-size: 0.6875rem;
    line-height: 1.5;
  }

  .mock-info .mock-btn {
    margin-block-start: 0.875rem;
  }

  .mock-signup {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    justify-content: space-between;
    margin: 1.5625rem -1.875rem -1.75rem;
    padding: 1.25rem 1.5625rem;
    color: var(--stage-signup-ink);
    background: var(--stage-signup);
    font-size: 0.75rem;
  }

  .mock-signup .mock-btn {
    margin-block-start: 0;
    background: var(--stage-signup-ink);
    white-space: nowrap;
  }

  .stage-foot {
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    margin-block-start: 1.75rem;
    padding-inline-end: 0.9375rem;
    color: var(--stage-ink);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  .stage-foot .tick {
    font-weight: var(--weight-strong);
  }

  /* --- benefit strip ----------------------------------------------------
     The strip's colour, border, and check mark are the system's; a page only
     decides whether the strip is present. */

  /* --- membership session panel ----------------------------------------- */

  .session {
    display: grid;
    gap: var(--space-8);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
  }

  .session-copy {
    display: grid;
    gap: var(--space-5);
    align-content: start;
  }

  .session h2 {
    max-inline-size: 38rem;
  }

  .session .lede {
    max-inline-size: 36rem;
  }

  .session-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
  }

  .session .pills span {
    border-color: var(--border-night);
    color: var(--text-on-night);
  }

  /* --- pricing ---------------------------------------------------------- */

  .pricing-head {
    max-inline-size: 42rem;
    margin-inline: auto;
    text-align: center;
  }

  .pricing-head .eyebrow {
    justify-content: center;
  }

  .pricing-head h2 {
    margin-block: var(--space-4) var(--space-5);
  }

  .pricing-head > p {
    color: var(--text-muted);
  }

  .membership-heading {
    max-inline-size: 48rem;
    margin-inline: auto;
    text-align: center;
  }

  /* The signed-in membership summary sits on the lavender band, so it gets a
     surface of its own instead of the band's own background. */
  .pricing-account-status {
    max-inline-size: 52rem;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface-wash);
  }

  .membership-heading h3 {
    margin-block: var(--space-3);
    font-size: var(--text-2xl);
  }

  .membership-heading p {
    color: var(--text-muted);
    font-size: var(--text-ui);
  }

  .billing-period {
    margin: var(--space-6) 0 var(--space-7);
    text-align: center;
  }

  .billing-period legend {
    margin-inline: auto;
    padding-block-end: var(--space-2);
    font-size: var(--text-md);
  }

  .billing-period-options {
    display: inline-flex;
  }

  #billing-savings {
    margin: var(--space-3) 0 0;
    color: var(--text-faint);
    font-size: var(--text-sm);
  }

  .plan-price-options {
    min-block-size: 5.625rem;
  }

  .plan-current-state {
    padding: var(--space-3) var(--space-5);
    color: var(--brand-ink);
    border-radius: var(--radius-pill);
    background: var(--brand-wash);
    font-size: var(--text-md);
    font-weight: var(--weight-strong);
    text-align: center;
  }

  .plan-card-current {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
  }

  .pricing-note {
    margin-block: var(--space-6) 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
  }

  .annual-membership {
    max-inline-size: 56rem;
    margin: var(--space-7) auto 0;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-align: center;
  }

  .annual-membership h3 {
    margin-block: var(--space-2) var(--space-3);
    font-size: var(--text-2xl);
  }

  .annual-membership p {
    color: var(--text-muted);
    font-size: var(--text-ui);
  }

  .annual-membership-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
    margin-block: var(--space-4);
  }

  .annual-membership small {
    color: var(--text-faint);
  }

  /* --- ownership -------------------------------------------------------- */

  .ownership {
    display: grid;
    gap: var(--space-8);
    align-items: start;
  }

  .ownership .lede {
    max-inline-size: 28rem;
  }

  .ownership .button {
    margin-block-start: var(--space-5);
  }

  .facts {
    border-block-start: 1px solid var(--border-soft);
  }

  .fact:last-child {
    border-block-end: 1px solid var(--border-soft);
  }

  /* --- faq -------------------------------------------------------------- */

  .faq {
    max-inline-size: 50rem;
    margin-inline: auto;
  }

  .faq h2 {
    margin-block-end: var(--space-7);
    text-align: center;
  }

  /* --- closing band ----------------------------------------------------- */

  .signup-form {
    display: grid;
    gap: var(--space-4);
    max-inline-size: 30rem;
    margin: var(--space-7) auto 0;
    padding: var(--space-6);
    color: var(--text);
    border-radius: var(--radius-lg);
    background: var(--surface-warm);
    text-align: left;
  }

  .signup-form .signup-plan-selection {
    margin: 0;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .signup-form .signup-plan-selection strong {
    color: var(--text);
    font-size: var(--text-ui);
  }

  .signup-form .button {
    inline-size: 100%;
  }

  .signup-form small {
    margin: 0;
    color: var(--text-faint);
  }

  .signup-form .field-hint {
    margin: 0;
  }

  .signup-email-label {
    display: grid;
    gap: var(--space-2);
    font-size: var(--text-md);
    font-weight: var(--weight-strong);
  }

  /* --- responsive composition ------------------------------------------- */

  @media (min-width: 68.75rem) {
    .hero {
      min-block-size: 42.5rem;
    }

    .stage {
      margin-block-start: var(--space-2);
    }
  }

  @media (min-width: 56rem) {
    .hero {
      grid-template-columns: 1.05fr 1fr;
      gap: 4.0625rem;
      padding-block: 2.625rem 3.4375rem;
    }

    .session {
      grid-template-columns: 1.4fr 1fr;
      gap: 3.75rem;
      padding: 3.5rem;
    }

    .session-side {
      padding-inline-start: 2.625rem;
      border-inline-start: 1px solid var(--border-night);
    }

    .ownership {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 5.3125rem;
    }
  }

  @media (max-width: 56rem) {
    .hero {
      padding-block: var(--space-7) var(--space-8);
    }

    .stage {
      max-inline-size: 35rem;
      inline-size: 100%;
      margin-inline: auto;
    }

    .session-side {
      padding-block-start: var(--space-6);
      border-block-start: 1px solid var(--border-night);
    }

    .ownership .facts {
      margin-block-start: var(--space-2);
    }
  }

  @media (max-width: 40rem) {
    .hero {
      padding-block: var(--space-6) var(--space-7);
    }

    .stage {
      padding: 1.5625rem 1.375rem 2rem;
      border-radius: 1.5625rem 1.5625rem 4.0625rem 1.5625rem;
    }

    .mock-page {
      padding: 1.4375rem;
    }

    .mock-page h3 {
      font-size: 2.1875rem;
    }

    .mock-book {
      grid-template-columns: 5rem minmax(0, 1fr);
      gap: 1rem;
    }

    .mock-cover {
      block-size: 7.375rem;
      font-size: 1.1875rem;
    }

    .mock-signup {
      margin: 1.5rem -1.4375rem -1.4375rem;
      padding: 1.0625rem 1.25rem;
      font-size: 0.625rem;
    }

    .stage-foot {
      font-size: 0.625rem;
      gap: 0.5625rem;
    }

    .session {
      padding: var(--space-6);
    }

    .benefit-strip .shell {
      justify-content: start;
      gap: var(--space-3);
    }

    .benefit-strip span {
      inline-size: 100%;
    }

    .signup-form {
      padding: var(--space-5);
    }
  }
}