/* Writing Assistant · guest page: compact intro rail (inside the app) + indexable sections below the fold.
   docs/09-VISUAL-SPEC.md §8. The real editor IS the hero (D7); this file only styles what surrounds it. */
@layer components {

  /* Guest: the rail shows the intro instead of a doc list */
  .wa-guestintro { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-2) var(--sp-5) var(--sp-5); }
  .wa-guestintro__lede { color: var(--text-2); font-size: var(--fs-label); line-height: var(--lh-label); }
  .wa-steps { display: flex; flex-direction: column; gap: var(--sp-3); counter-reset: step; }
  .wa-steps li { display: grid; grid-template-columns: var(--sp-6) minmax(0, 1fr); gap: var(--sp-3); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); }
  .wa-steps li::before {
    counter-increment: step; content: counter(step);
    display: grid; place-items: center; width: var(--sp-6); height: var(--sp-6); border-radius: 50%;
    background: var(--surface-3); color: var(--text); font-size: var(--fs-meta); font-weight: var(--fw-bold);
  }
  .wa-steps b { color: var(--text); font-weight: var(--fw-bold); }
  .wa-guestintro__foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: var(--sp-px) solid var(--border); }
  .wa-guestintro__fine { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--text-3); }
  .wa-scrollcue {
    position: absolute; left: 50%; bottom: var(--sp-3); translate: -50% 0; z-index: var(--z-page-float);
    display: inline-flex; align-items: center; gap: var(--sp-2);
    min-height: var(--ctl-md); padding: 0 var(--sp-3); border-radius: var(--r-pill);
    background: var(--surface-2); border: var(--sp-px) solid var(--border-strong); color: var(--text-2);
    font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-medium);
  }

  /* Below the fold: indexable, honest copy. */
  .wa-landing { background: var(--surface-1); border-top: var(--sp-px) solid var(--border); }
  .wa-landing__inner { width: 100%; max-width: 1080px; margin: 0 auto; padding: var(--sp-20) var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-20); }
  .wa-landing__head { display: flex; flex-direction: column; gap: var(--sp-3); max-width: 44rem; }
  .wa-landing__head--wide { max-width: none; gap: var(--sp-6); }
  .wa-eyebrow { font-size: var(--fs-meta); line-height: var(--lh-meta); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--accent); }
  .wa-landing h2 { font-size: var(--fs-head); line-height: var(--lh-head); font-weight: var(--fw-heavy); letter-spacing: var(--ls-display); text-wrap: balance; }
  .wa-landing__lede { font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--text-2); max-width: 60ch; }
  .wa-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); }
  .wa-feature { display: flex; flex-direction: column; gap: var(--sp-2); }
  .wa-feature__icon { display: grid; place-items: center; width: var(--sp-10); height: var(--sp-10); border-radius: var(--r-md); background: var(--accent-tint); color: var(--accent); margin-bottom: var(--sp-2); }
  .wa-feature h3 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-bold); }
  .wa-feature p { font-size: var(--fs-body); line-height: 1.6; color: var(--text-2); }

  .wa-demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-10); align-items: center; }
  .wa-demo__page {
    padding: var(--sp-8); border-radius: var(--r-lg); background: var(--canvas); border: var(--sp-px) solid var(--border);
    font-family: var(--font-serif); font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--text);
  }

  .wa-steps--row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
  .wa-steps--row li { font-size: var(--fs-body); line-height: 1.6; }
  .wa-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
  .wa-plan { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6); border-radius: var(--r-lg); border: var(--sp-px) solid var(--border-strong); background: var(--canvas); }
  .wa-plan__name { font-weight: var(--fw-bold); font-size: var(--fs-title); line-height: var(--lh-title); }
  .wa-plan__price { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: var(--fw-heavy); }
  .wa-plan__price small { font-size: var(--fs-label); font-weight: var(--fw-regular); color: var(--text-3); }
  .wa-plan ul { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-label); line-height: var(--lh-label); color: var(--text-2); }
  .wa-plan li { display: flex; gap: var(--sp-2); }
  .wa-plan li .wa-i { color: var(--accent); margin-top: 2px; }
  .wa-plan .wa-btn { margin-top: auto; }

  .wa-faq { display: flex; flex-direction: column; max-width: 48rem; border-top: var(--sp-px) solid var(--border); }
  .wa-faq details { border-bottom: var(--sp-px) solid var(--border); }
  .wa-faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
    min-height: var(--sp-16); cursor: pointer; list-style: none;
    font-size: var(--fs-title); line-height: var(--lh-title); font-weight: var(--fw-medium);
    padding-right: var(--sp-1);   /* room for the rotated + icon */
  }
  .wa-faq summary::-webkit-details-marker { display: none; }
  .wa-faq summary .wa-i { transition: transform var(--t-med) var(--ease-out); color: var(--text-3); }
  .wa-faq details[open] summary .wa-i { transform: rotate(45deg); }
  .wa-faq details p { padding: 0 0 var(--sp-5); color: var(--text-2); font-size: var(--fs-body); line-height: 1.65; max-width: 64ch; }

  .wa-cta { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; padding: var(--sp-12) var(--sp-6); border-radius: var(--r-xl); background: var(--canvas); border: var(--sp-px) solid var(--border); }

  @media (max-width: 1023.98px) {
    .wa-features, .wa-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .wa-demo { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 767.98px) {
    .wa-landing__inner { padding: var(--sp-12) var(--sp-5); gap: var(--sp-12); }
    .wa-features, .wa-plans, .wa-steps--row { grid-template-columns: minmax(0, 1fr); }
    .wa-demo__page { padding: var(--sp-5); }
    .wa-faq summary { min-height: var(--sp-12); font-size: var(--fs-body); }
    .wa-cta .wa-btn { width: 100%; min-height: var(--target); }
  }
}