/* styles/sections/event-landing.css
 * /sfdemonight/: a standalone event landing page with its own slim header (logo, one sign-up
 * button) and footer (logo, contact line, copyright) instead of the site chrome; a centred
 * hero with the demo screenshot (its emoji placeholder shows only if the image fails, via
 * js/demonight.js); the numbered recap steps and the callout; the audience cards; the Notion
 * waitlist form. Moved from css/demonight.css onto tokens. Every band sits on the white page
 * field. The 767px and 768px queries are the page's own pre-swap switches. */
@layer sections {
  .demonight-header {
    padding-block: var(--space-24);
    border-bottom: 1px solid var(--line-2);
  }

  .demonight-header .container,
  .demonight-footer .footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .demonight-page .logo,
  .demonight-footer .footer-logo a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .demonight-page .logo img,
  .demonight-footer .footer-logo img {
    width: auto;
    height: 32px;
  }

  .demonight-nav {
    display: flex;
    align-items: center;
  }

  .demonight-hero {
    padding-block: var(--space-96);
  }

  .demonight-hero-content {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
  }

  .demonight-hero-content .cta-pair {
    justify-content: center;
  }

  .demonight-hero h1 {
    margin-bottom: var(--space-24);
  }

  /* Before the swap the subheadline was 18px below 900 and 28px from 900. No role holds 28px;
     from 900 it takes the body-lg role's 900px step (20px). */
  .demonight-subheadline {
    margin-bottom: var(--space-64);
    color: var(--ink-muted);
  }

  .demo-visual {
    position: relative;
    margin-block: var(--space-64);
  }

  .demo-screenshot {
    width: 100%;
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-floating);
  }

  .demo-visual-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-24);
    padding: var(--space-96) var(--space-48);
    border: 2px dashed var(--rule-edge);
    border-radius: var(--radius-md);
    background: var(--paper);
  }

  .demo-screenshot:not([src$="demo-flow.png"]) ~ .demo-visual-placeholder,
  .demo-screenshot[src$="demo-flow.png"]:not([src*="404"]) ~ .demo-visual-placeholder {
    display: none;
  }

  .visual-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
  }

  .step-icon,
  .user-icon {
    flex-shrink: 0;
    font-size: 2rem;
  }

  .step-label {
    color: var(--ink-muted);
  }

  .demo-visual-placeholder .arrow {
    color: var(--ink-55);
    font-size: 1.5rem;
  }

  .demonight-section {
    padding-block: var(--space-96);
  }

  .demonight-section .container {
    --container-max: 852px;
  }

  .demonight-section h2 {
    margin-bottom: var(--space-32);
    text-align: center;
  }

  .demonight-section .section-intro {
    margin-bottom: var(--space-48);
    color: var(--ink-muted);
    text-align: center;
  }

  .demo-flow {
    display: flex;
    flex-direction: column;
    gap: var(--space-32);
    margin-bottom: var(--space-48);
  }

  .flow-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-24);
  }

  .step-number {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fern);
    color: var(--white);
  }

  .step-content h3 {
    margin-bottom: var(--space-8);
  }

  .step-content p {
    color: var(--ink-muted);
  }

  .demo-point {
    padding: var(--space-32);
    border-left: 4px solid var(--fern);
    border-radius: var(--radius-md);
    background: var(--paper);
  }

  .user-types {
    display: grid;
    gap: var(--space-32);
    margin-bottom: var(--space-48);
  }

  .user-type {
    display: flex;
    align-items: flex-start;
    gap: var(--space-16);
    padding: var(--space-24);
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
  }

  .early-access-note {
    color: var(--ink-muted);
    font-style: italic;
    text-align: center;
  }

  .notion-form-container {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-32);
    border-radius: var(--radius-md);
    background: var(--white);
    box-shadow: var(--elevation-low);
  }

  .notion-form-container iframe {
    width: 100%;
    min-height: 600px;
    border: 0;
  }

  .demonight-footer {
    padding: var(--space-64) 0 var(--space-32);
    border-top: 1px solid var(--rule-edge);
  }

  .demonight-footer .footer-content {
    margin-bottom: var(--space-32);
  }

  .demonight-footer .footer-links {
    display: flex;
    gap: var(--space-32);
    color: var(--ink-muted);
  }

  .demonight-footer .footer-bottom {
    padding-top: var(--space-32);
    border-top: 1px solid var(--rule-edge);
    color: var(--ink-muted);
    text-align: center;
  }

  @media (width <= 767px) {
    .demonight-page .logo img {
      height: 28px;
    }

    .demonight-hero,
    .demonight-section {
      padding-block: var(--space-48);
    }

    .demo-visual-placeholder {
      flex-direction: column;
      gap: var(--space-16);
      padding: var(--space-64) var(--space-24);
    }

    .demo-visual-placeholder .arrow {
      transform: rotate(90deg);
    }

    .flow-step {
      flex-direction: column;
      gap: var(--space-16);
    }

    .notion-form-container {
      padding: var(--space-24);
    }

    .demonight-footer .footer-content {
      flex-direction: column;
      gap: var(--space-24);
      text-align: center;
    }

    .demonight-footer .footer-links {
      flex-direction: column;
      gap: var(--space-8);
    }
  }

  @media (width >= 900px) {
    .demonight-subheadline {
      --t-body-lg-size: 20px;
    }
  }
}