@layer components {
  /* Public "request a quote" page: marketing copy on the left, the lead
     form (LeadSubmissionsController) on the right. Single column on small
     screens, split at the standard marketing content breakpoint. */
  .quote-layout {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-2xl) var(--spacing-lg) var(--spacing-3xl);
    display: grid;
    gap: var(--spacing-2xl);
    align-items: start;

    @media (min-width: 100ch) {
      grid-template-columns: 1fr 1fr;
      gap: var(--spacing-3xl);
      padding-top: var(--spacing-3xl);
    }
  }

  .quote-intro {
    /* .headline.medium centers itself for hero use; this column is
       left-aligned copy. */
    .headline {
      text-align: left;
    }

    .hero-text {
      font-size: var(--text-lg);
      line-height: 1.7;
      color: var(--text-secondary);
      max-width: 46ch;
      margin-bottom: var(--spacing-lg);
    }

    @media (min-width: 100ch) {
      position: sticky;
      top: calc(var(--spacing-3xl) + var(--spacing-lg)); /* clears the fixed site nav */
    }
  }

  .quote-features {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);

    li {
      display: flex;
      align-items: baseline;
      gap: var(--spacing-sm);
      font-size: var(--text-sm);
      line-height: 1.5;
      color: var(--text-secondary);
    }

    li::before {
      content: "";
      width: 6px; /* bullet dot */
      height: 6px; /* bullet dot */
      border-radius: var(--radius-full);
      background: var(--accent);
      flex-shrink: 0;
    }
  }

  .quote-form-panel {
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--spacing-xl);
  }

  .quote-form-title {
    font-family: var(--font-serif);
    font-size: var(--text-xxl);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--spacing-xs);
  }

  .quote-form-sub {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: var(--spacing-lg);
  }

  .quote-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-sm);
  }

  /* Honeypot for bots — visually removed but present in the DOM. Kept
     off-screen rather than display:none so naive bots still fill it. */
  .quote-hp {
    position: absolute;
    left: -9999px; /* off-screen */
    width: 1px; /* collapse to nothing */
    height: 1px; /* collapse to nothing */
    overflow: hidden;
  }

  .quote-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    margin: calc(-1 * var(--spacing-xs)) 0 var(--spacing-md);
    font-size: var(--text-xs);
    line-height: 1.55;
    color: var(--text-secondary);
    cursor: pointer;

    input {
      flex-shrink: 0;
      margin-top: 2px; /* aligns box with first text line */
      accent-color: var(--accent);
    }
  }

  .quote-submit {
    width: 100%;
    margin-top: var(--spacing-sm);
  }

  .quote-disclaimer {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: 1.55;
    text-align: center;
    margin-top: var(--spacing-md);

    a {
      color: inherit;
      text-decoration: underline;
    }
  }

  /* Post-submit confirmation page. */
  .quote-thanks {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--spacing-4xl) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-md);

    .hero-text {
      font-size: var(--text-lg);
      line-height: 1.7;
      color: var(--text-secondary);
      max-width: 46ch;
    }
  }

  .quote-thanks-ring {
    width: 56px; /* icon ring */
    height: 56px; /* icon ring */
    border-radius: var(--radius-full);
    background: var(--accent-wash);
    display: flex;
    align-items: center;
    justify-content: center;

    svg {
      width: 26px; /* icon */
      height: 26px; /* icon */
      stroke: var(--accent);
      fill: none;
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
  }

  .quote-thanks-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-sm);
  }
}