/* /platform page styles. brand.css and convo.css must load first. */

  /* ── Hero ── */
  .plat-hero {
    padding: clamp(56px, 7vw, 96px) 0 clamp(48px, 6vw, 80px);
  }
  .plat-hero-grid,
  .plat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(36px, 4vw, 56px);
    align-items: center;
  }
  @media (min-width: 940px) {
    .plat-hero-grid,
    .plat-grid { grid-template-columns: 1.15fr 1fr; gap: clamp(56px, 6vw, 96px); }
  }
  .plat-hero .eyebrow { margin-bottom: clamp(24px, 3vw, 36px); }
  .plat-hero .h1 {
    max-width: 15ch;
    margin-bottom: clamp(24px, 3vw, 36px);
  }
  .plat-hero .lede { color: var(--mute-dark); }

  /* ── Hero tool-call panel (live agent tool calls) ── */
  .toolcall-figure { margin: 0; }
  .toolcall-panel {
    background: var(--ink);
    border: 1px solid rgba(242, 237, 226, 0.16);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.6);
  }
  .toolcall-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 18px;
    border-bottom: 1px solid rgba(242, 237, 226, 0.12);
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 237, 226, 0.55);
  }
  .toolcall-dot { width: 5px; height: 5px; border-radius: 1px; background: var(--signal); flex: none; }
  .toolcall-live {
    margin-left: auto;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #42E07F;
    animation: scPulse 2.2s ease-in-out infinite;
  }
  .toolcall-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.6;
  }
  .tc-call { color: var(--bone); }
  .tc-return { color: #42E07F; }
  .tc-gap { margin-top: 8px; }
  .tc-event-name { color: var(--bone); }
  .tc-event-action { color: rgba(242, 237, 226, 0.55); }
  .toolcall-caption {
    font-family: var(--mono);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 237, 226, 0.5);
    margin-top: 12px;
    text-align: center;
  }
  /* The adoption lifecycle panel sits on the light section — dark caption,
     no border (shadow only). */
  .light .toolcall-caption { color: rgba(12, 34, 64, 0.5); }
  .light .toolcall-panel { border-color: transparent; box-shadow: 0 24px 60px -28px rgba(12, 34, 64, 0.5); }
  @media (prefers-reduced-motion: reduce) {
    .toolcall-live { animation: none; }
  }

  /* ── Section rhythm ── */
  .plat-section .eyebrow { margin-bottom: 20px; }
  .plat-section .h2 {
    max-width: 24ch;
    margin-bottom: clamp(20px, 2.4vw, 28px);
  }
  .plat-copy {
    font-family: var(--sans);
    font-size: clamp(15px, 1.3vw, 18px);
    line-height: 1.55;
    color: var(--mute-dark);
    max-width: 56ch;
    margin-bottom: clamp(28px, 3vw, 36px);
  }
  .light .plat-copy { color: var(--mute-light); }
  .plat-section .fact-list { margin-bottom: 0; }
  .plat-grid .plat-copy { margin-bottom: 0; }

  /* ── Why it matters (lead + three red-topped columns) ── */
  .plat-why .eyebrow { letter-spacing: 0.28em; font-weight: 700; }
  .plat-why-lead {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 20px;
  }
  @media (min-width: 860px) {
    .plat-why-lead { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 48px; }
  }
  .plat-why-title {
    font-size: clamp(30px, 3.6vw, 40px);
    letter-spacing: -0.025em;
    line-height: 1.05;
    max-width: none;
    margin: 0;
  }
  .plat-why-intro {
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.65;
    color: rgba(12, 34, 64, 0.7);
  }
  .plat-why-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: clamp(40px, 5vw, 52px);
  }
  @media (min-width: 760px) {
    .plat-why-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
  }
  .plat-why-item {
    border-top: 3px solid var(--signal);
    padding-top: 24px;
  }
  .plat-why-item-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: -0.015em;
    line-height: 1.2;
  }
  .plat-why-item-copy {
    font-family: var(--sans);
    font-size: 14.5px;
    line-height: 1.65;
    color: rgba(12, 34, 64, 0.7);
    margin-top: 10px;
  }

  /* ── Features section (dark, faint grid texture) ── */
  .plat-features { overflow: hidden; }
  .plat-features::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background-image:
      linear-gradient(rgba(242, 237, 226, 0.14) 1px, transparent 1px),
      linear-gradient(90deg, rgba(242, 237, 226, 0.14) 1px, transparent 1px);
    background-size: 54px 54px;
    -webkit-mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 80%);
    mask-image: radial-gradient(120% 100% at 50% 0%, #000, transparent 80%);
  }
  .plat-features .frame { position: relative; z-index: 1; }
  .plat-features .eyebrow { letter-spacing: 0.28em; font-weight: 700; }
  .plat-features-title {
    font-size: clamp(32px, 4vw, 44px);
    letter-spacing: -0.025em;
    line-height: 1.08;
    max-width: none;
    margin: 16px 0 0;
  }

  /* ── Feature grid ── */
  .feat-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 44px;
  }
  @media (min-width: 720px) {
    .feat-grid { grid-template-columns: repeat(2, 1fr); }
  }
  .feat {
    display: flex;
    flex-direction: column;
    padding: 26px 28px;
    border: 1px solid rgba(242, 237, 226, 0.14);
    border-radius: 16px;
    background: rgba(242, 237, 226, 0.05);
  }
  .feat-key {
    font-family: var(--mono);
    font-weight: 700;
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--signal);
  }
  .feat-title {
    font-family: var(--display);
    font-weight: 800;
    font-size: 21px;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-top: 9px;
  }
  .feat-copy {
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.65;
    color: rgba(242, 237, 226, 0.68);
    margin-top: 9px;
  }