/* Landing page. Tokens only — no literal colours, sizes or durations.
 * Logical properties throughout, per STORY-03-03 / EPIC-11. */

@layer base {
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    background: var(--c-cream);
    color: var(--c-ink);
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
  }

  h1,
  h2,
  h3 {
    margin: 0;
  }
}

@layer components {
  .wrap {
    max-inline-size: 60rem;
    margin-inline: auto;
    padding-inline: var(--space-md);
  }

  .skip {
    position: absolute;
    inset-block-start: -100%;
    inset-inline-start: var(--space-sm);
    padding: var(--space-2xs) var(--space-sm);
    background: var(--c-card);
    color: var(--c-accent-text);
    border-radius: var(--radius-md);
    z-index: 10;
  }
  .skip:focus {
    inset-block-start: var(--space-2xs);
  }

  /* ------------------------------------------------------------ masthead */

  .masthead {
    padding-block: var(--space-2xl) var(--space-xl);
    background: var(--c-paper);
    border-block-end: 1px solid var(--c-line);
  }

  /* Wordmark, single brand colour. Small and quiet — it sits above a 72px
   * headline and should not compete with it.
   *
   * --c-accent-text, not --brand-accent. At 17px this is body-size text and
   * needs 4.5:1; the brand pink is 2.85:1 and fails. This is the accessible
   * member of the same accent family — see ADR-003. */
  .wordmark {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-display);
    font-size: 1.0625rem;
    font-weight: var(--weight-black);
    letter-spacing: -0.01em;
    color: var(--c-accent-text);
  }

  .display {
    font-family: var(--font-display);
    font-size: var(--size-display);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }

  /* --c-accent-text, never --brand-accent. At this size the threshold relaxes
   * to 3:1 and the brand fill is 2.85:1 — it fails even that. See ADR-003. */
  .accent {
    color: var(--c-accent-text);
  }

  .lede {
    max-inline-size: 34rem;
    margin-block: var(--space-md) 0;
    font-size: 1.125rem;
    color: var(--c-muted);
    text-wrap: pretty;
  }

  /* -------------------------------------------------------------- signup */

  section {
    padding-block: var(--space-2xl);
  }

  .signup h2,
  .how h2,
  .safety h2 {
    font-family: var(--font-display);
    font-size: var(--size-h2);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-snug);
    text-wrap: balance;
  }

  .sub {
    max-inline-size: 30rem;
    margin-block: var(--space-2xs) var(--space-lg);
    color: var(--c-muted);
    text-wrap: pretty;
  }

  .field {
    max-inline-size: 34rem;
  }

  .label {
    display: block;
    margin-block-end: var(--space-3xs);
    font-size: var(--size-label);
    font-weight: var(--weight-bold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--c-muted);
  }

  .input-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
  }

  input[type='email'] {
    flex: 1 1 16rem;
    font: inherit;
    padding: var(--space-2xs) var(--space-sm);
    color: var(--c-ink);
    background: var(--c-field);
    border: 1.5px solid var(--c-field-line);
    border-radius: var(--radius-pill);
    min-block-size: var(--target-comfortable);
  }
  input[type='email']::placeholder {
    color: var(--c-muted);
  }
  /* Invalid state is never colour alone — the message below carries it. */
  input[aria-invalid='true'] {
    border-color: var(--c-accent-text);
    border-width: 2px;
  }

  .btn-primary {
    font: inherit;
    font-weight: var(--weight-bold);
    padding-inline: var(--space-lg);
    padding-block: var(--space-2xs);
    color: #fff;
    background: var(--brand-accent-deep);
    border: 1.5px solid var(--brand-accent-deep);
    border-radius: var(--radius-pill);
    cursor: pointer;
    min-block-size: var(--target-comfortable);
    transition: background var(--motion-fast);
  }
  .btn-primary:hover:not(:disabled) {
    background: var(--c-accent-text);
  }
  .btn-primary:disabled {
    cursor: progress;
    opacity: 1; /* never dim text — see ADR-003 */
    background: var(--c-muted);
    border-color: var(--c-muted);
  }

  .error,
  .success {
    margin-block: var(--space-2xs) 0;
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
  }
  .error {
    color: var(--c-accent-text);
  }
  .error::before {
    content: '✕ ';
  }
  .success {
    display: flex;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-lg);
    background: var(--c-card);
    border: 1.5px solid var(--c-accent-text);
    font-size: var(--size-body);
    max-inline-size: 34rem;
  }
  .success::before {
    content: '✓';
    color: var(--c-accent-text);
    font-weight: var(--weight-black);
  }
  [hidden] {
    display: none !important;
  }

  .fineprint {
    max-inline-size: 34rem;
    margin-block-start: var(--space-md);
    font-size: var(--size-small);
    color: var(--c-muted);
    text-wrap: pretty;
  }

  /* ----------------------------------------------------------------- how */

  .how,
  .safety {
    border-block-start: 1px solid var(--c-line);
  }

  /* The moderation-notice treatment from the design guide. Reused on purpose:
   * this is the same rule the product states when it refuses a submission, so
   * it should look the same here as it will there. */
  .rule {
    max-inline-size: 44rem;
    margin-block: var(--space-md) 0;
    padding: var(--space-sm) var(--space-md);
    font-size: 1.0625rem;
    border: 1.5px solid var(--c-accent-text);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--brand-accent) 8%, transparent);
    text-wrap: pretty;
  }


  .steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-lg);
    margin-block-start: var(--space-lg);
    padding: 0;
    list-style: none;
    counter-reset: step;
  }
  .steps h3 {
    margin-block: var(--space-2xs) var(--space-3xs);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--weight-black);
    text-wrap: balance;
  }
  .steps p {
    margin: 0;
    color: var(--c-muted);
    text-wrap: pretty;
  }
  .step-num {
    font-size: var(--size-small);
    font-weight: var(--weight-black);
    color: var(--c-accent-text);
  }

  /* -------------------------------------------------- secondary pages */

  .masthead.compact {
    padding-block: var(--space-xl) var(--space-lg);
  }

  .page-title {
    margin-block-start: var(--space-2xs);
    font-family: var(--font-display);
    font-size: var(--size-h1);
    font-weight: var(--weight-black);
    letter-spacing: var(--tracking-display);
    line-height: var(--leading-snug);
  }

  .updated {
    margin-block: var(--space-2xs) 0;
    font-size: var(--size-small);
    color: var(--c-muted);
  }

  .wordmark a {
    color: inherit;
    text-decoration: none;
  }
  .wordmark a:hover {
    text-decoration: underline;
  }

  /* Legal prose. Narrower than the landing column — long lines are the main
   * reason nobody reads a privacy notice. */
  .prose {
    padding-block: var(--space-xl) var(--space-2xl);
  }
  .prose h2 {
    margin-block: var(--space-xl) var(--space-2xs);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--weight-black);
    text-wrap: balance;
  }
  .prose p,
  .prose li {
    max-inline-size: 42rem;
    margin-block: 0 var(--space-2xs);
    text-wrap: pretty;
  }
  .prose ul {
    margin-block: 0 var(--space-sm);
    padding-inline-start: var(--space-md);
  }
  .prose .rule {
    max-inline-size: 42rem;
  }
  .prose .fineprint {
    margin-block-start: var(--space-xl);
  }

  /* Stacked fields, for forms with more than one. */
  .stack {
    display: grid;
    gap: var(--space-md);
    max-inline-size: 38rem;
  }

  textarea {
    inline-size: 100%;
    font: inherit;
    padding: var(--space-2xs) var(--space-sm);
    color: var(--c-ink);
    background: var(--c-field);
    border: 1.5px solid var(--c-field-line);
    border-radius: var(--radius-lg);
    resize: vertical;
  }
  textarea::placeholder {
    color: var(--c-muted);
  }
  textarea[aria-invalid='true'] {
    border-color: var(--c-accent-text);
    border-width: 2px;
  }

  /* Visible to screen readers, not on screen. Never display:none — that
   * removes it from the accessibility tree too. */
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ------------------------------------------------------------- footer */

  footer {
    padding-block: var(--space-lg) var(--space-2xl);
    border-block-start: 1px solid var(--c-line);
  }
  footer .fineprint {
    margin-block-start: 0;
  }
  .site-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2xs) var(--space-md);
  }
  .site-footer nav {
    display: flex;
    gap: var(--space-md);
  }
  .site-footer nav a {
    font-size: var(--size-small);
    color: var(--c-accent-text);
    min-block-size: var(--target-min);
  }
  /* Sits in the footer beside the links; margin-inline-start:auto pushes it
   * to the far edge on wide screens and lets it wrap on narrow ones. */
  .theme-toggle {
    margin-inline-start: auto;
    font: inherit;
    font-size: var(--size-small);
    padding: var(--space-3xs) var(--space-xs);
    color: var(--c-ink);
    background: transparent;
    border: 1.5px solid var(--c-field-line);
    border-radius: var(--radius-pill);
    cursor: pointer;
    min-block-size: var(--target-comfortable);
    transition: border-color var(--motion-fast), background var(--motion-fast);
  }
  .theme-toggle:hover {
    border-color: var(--c-accent-text);
  }

  .wordmark-sm {
    font-family: var(--font-display);
    font-weight: var(--weight-black);
    color: var(--c-accent-text);
  }
}