/* /ai-surfaces page styles. brand.css, convo.css and aiready.css must load
   first: this page reuses aiready's section grid, product card and the
   ChatGPT / WebMCP mockups, and adds its own surface grid, plain-English
   record ledger and setup steps. */

  /* ── Hero ── */
  .aisurf-hero { padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
  .aisurf-hero .eyebrow { margin-bottom: clamp(24px, 3vw, 36px); }
  .aisurf-hero .h1 { max-width: 26ch; margin-bottom: clamp(24px, 3vw, 36px); }
  .aisurf-hero .lede { color: var(--mute-dark); max-width: 72ch; }

  /* ── Four surface cards ── */
  .aisurf-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(14px, 2vw, 20px);
    margin-top: clamp(32px, 4vw, 48px);
  }
  @media (min-width: 640px) { .aisurf-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1040px) { .aisurf-grid { grid-template-columns: repeat(4, 1fr); } }
  .aisurf-card {
    display: block;
    padding: 20px 22px 22px;
    border: 1px solid var(--hairline-dark);
    border-radius: 14px;
    background: var(--ink-soft);
    text-decoration: none;
    color: inherit;
    transition: transform 0.12s ease, border-color 0.12s ease;
  }
  .aisurf-card:hover { transform: translateY(-2px); border-color: rgba(242, 237, 226, 0.4); }
  .aisurf-card-title {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.4;
    margin-bottom: 8px;
  }
  .aisurf-card-copy { display: block; font-size: 13.5px; line-height: 1.6; color: var(--mute-dark); }
  .aisurf-card::after {
    content: "→";
    display: block;
    margin-top: 14px;
    font-family: var(--mono);
    color: var(--signal);
  }



  /* ── Dark section copy ── */
  .aisurf-section .aiready-copy { color: var(--mute-dark); }



  /* ── Log ledger ── */
  .aisurf-ledger {
    margin: 0;
    background: var(--ink-soft);
    border: 1px solid var(--hairline-dark);
    border-radius: 18px;
    padding: 16px 18px 18px;
    font-family: var(--mono);
    font-size: 11.5px;
  }
  .aisurf-ledger-head {
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--signal);
    margin-bottom: 12px;
  }
  .aisurf-ledger-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--hairline-dark);
    color: var(--bone);
  }
  .aisurf-ledger-time { color: rgba(242, 237, 226, 0.5); }
  .aisurf-ledger-text { overflow-wrap: anywhere; }
  @media (max-width: 480px) {
    .aisurf-ledger-row { grid-template-columns: 1fr; gap: 2px; }
    .aisurf-ledger-time { display: none; }
  }

  /* ── Bulleted list ── */
  .aisurf-list {
    margin: clamp(18px, 2.5vw, 26px) 0;
    padding-left: 20px;
    max-width: 62ch;
    display: grid;
    gap: 10px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--mute-dark);
  }
  .aisurf-list strong { color: var(--bone); }


  /* ── Five-minute steps ── */
  .aisurf-steps {
    list-style: none;
    margin: clamp(24px, 3vw, 36px) 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  @media (min-width: 720px) { .aisurf-steps { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1040px) { .aisurf-steps { grid-template-columns: repeat(4, 1fr); } }
  .aisurf-step {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid var(--hairline-dark);
    border-radius: 14px;
    background: var(--ink-soft);
  }
  .aisurf-step-num {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    background: var(--signal);
    color: #fff;
    font-family: var(--display);
    font-weight: 800;
    font-size: 14px;
  }
  .aisurf-step-title {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 6px;
  }
  .aisurf-step-copy { display: block; font-size: 13.5px; line-height: 1.6; color: var(--mute-dark); }

  .aisurf-note {
    margin-top: clamp(18px, 2.5vw, 26px);
    max-width: 62ch;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--mute-dark);
  }

  /* ── Questions (native details/summary, no JS) ── */
  .aisurf-faq {
    width: 100%;
    margin-top: clamp(20px, 3vw, 32px);
    border-top: 1px solid var(--hairline-light);
  }
  .aisurf-faq-item { border-bottom: 1px solid var(--hairline-light); }
  .aisurf-faq-q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.4;
    color: var(--ink);
  }
  .aisurf-faq-q::-webkit-details-marker { display: none; }
  .aisurf-faq-q::after {
    content: "+";
    flex: none;
    font-family: var(--mono);
    font-size: 18px;
    color: var(--signal);
  }
  .aisurf-faq-item[open] .aisurf-faq-q::after { content: "−"; }
  .aisurf-faq-a {
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.7;
    color: rgba(12, 34, 64, 0.82);
  }

  /* Anchored sections land with air above them. */
  .aisurf-section[id], .light[id] { scroll-margin-top: 24px; }