/* Segmented-control style: one rounded container holds both options;
     the active option fills with red. */
  .aud-tabs{display:flex;justify-content:center;padding:62px 16px 2px;position:relative;z-index:5}
  .aud-tabs-inner{display:inline-flex;align-items:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:3px;gap:2px}
  .aud-tabs-inner .aud-tab{flex:0 0 auto;border:none;background:transparent;color:rgba(255,255,255,.68);padding:6px 14px;border-radius:999px;font-family:var(--font-body);font-size:.72rem;font-weight:600;letter-spacing:.02em;line-height:1.2;cursor:pointer;transition:background .18s,color .18s;white-space:nowrap}
  .aud-tabs-inner .aud-tab:hover{color:#fff}
  .aud-tabs-inner .aud-tab.active{background:#b91c1c;color:#fff}
  [data-lighting="light"] .aud-tabs-inner{background:rgba(0,0,0,.04);border-color:rgba(0,0,0,.10)}
  [data-lighting="light"] .aud-tabs-inner .aud-tab{color:rgba(0,0,0,.64)}
  [data-lighting="light"] .aud-tabs-inner .aud-tab:hover{color:#1a1a1e}
  [data-lighting="light"] .aud-tabs-inner .aud-tab.active{background:#b91c1c;color:#fff}
  /* 2026-05-24: audience tabs removed; #proPanel is now always
     visible and lives further down the page (after Philosophy,
     before FAQ). The body.aud-pro toggle is dead but the .aud-*
     CSS rules above are kept in place in case the segmented
     control gets re-introduced. */
  /* 2026-06-15 redesign: reframed from "who uses it" (six identical
     boxes that made the product read as sales/law/founder software) to
     "what it trains." Debate is the visual source card; the professions
     are smaller cards radiating off it. Each pro card is a mini scene:
     an SVG room (the AI/opponent/judge is always the red figure), a
     human line, the phases, a live mini-transcript as proof, skill
     tags. The through-line: the room changes, the skill does not. */
  #proPanel{display:block;padding:28px 16px 76px}
  .pro-wrap{max-width:1400px;margin:0 auto}
  .pro-eyebrow{font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#ef4444;margin-bottom:12px}
  .pro-title{font-family:var(--font-display);font-size:clamp(2rem,4.6vw,3rem);font-weight:700;letter-spacing:-.025em;line-height:1.04;margin-bottom:12px}
  .pro-sub{color:var(--text-dim);font-size:1.05rem;line-height:1.55;max-width:700px;margin-bottom:38px}

  /* layout: source (debate) is a full-width banner on top; the
     application cards sit in a grid below it. Stacked rather than
     side-by-side so the source never stretches to an awkward height. */
  .pro-layout{display:flex;flex-direction:column;gap:16px}

  /* shared card chrome */
  .pro-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:18px;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}

  /* animated drawn scenes replace the stock-photo strip. Each scene uses
     the same grammar: quiet room geometry, live red pressure, one moving
     line showing the argument transfer. */
  .pro-scene{
    position:relative;display:flex;align-items:center;justify-content:center;
    height:176px;width:calc(100% + (var(--pro-pad,19px) * 2));
    margin:calc(var(--pro-pad,19px) * -1) calc(var(--pro-pad,19px) * -1) 18px;
    border-radius:18px 18px 0 0;overflow:hidden;color:rgba(255,255,255,.68);
    background:
      radial-gradient(circle at 78% 18%,rgba(239,68,68,.18),transparent 33%),
      radial-gradient(circle at 18% 86%,rgba(255,255,255,.08),transparent 32%),
      linear-gradient(135deg,rgba(239,68,68,.13),rgba(255,255,255,.025));
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  [data-theme="light"] .pro-scene,
  [data-lighting="light"] .pro-scene{
    color:rgba(22,22,28,.64);
    background:
      radial-gradient(circle at 78% 18%,rgba(239,68,68,.16),transparent 33%),
      radial-gradient(circle at 18% 86%,rgba(255,255,255,.85),transparent 35%),
      linear-gradient(135deg,rgba(239,68,68,.09),rgba(0,0,0,.025));
    border-bottom-color:rgba(0,0,0,.07);
  }
  .pro-scene::before{
    content:"";position:absolute;inset:14px;border-radius:14px;
    border:1px solid currentColor;opacity:.08;
  }
  .pro-scene svg{
    position:relative;z-index:1;width:78%;max-width:320px;height:auto;
    max-height:84%;overflow:visible;filter:drop-shadow(0 18px 26px rgba(0,0,0,.14));
  }
  .pro-scene .pro-fill{fill:currentColor;stroke:none;opacity:.12}
  .pro-scene .pro-line{opacity:.52}
  .pro-scene .pro-faint{opacity:.32}
  .pro-acc{color:#ef4444;animation:proAccPulse 3.2s ease-in-out infinite}
  .pro-flow{stroke-dasharray:5 7;animation:proFlow 6s linear infinite}
  .pro-bob{transform-box:fill-box;transform-origin:center;animation:proBob 4.4s ease-in-out infinite}
  .pro-talk{transform-box:fill-box;transform-origin:center;animation:proTalk 2.8s ease-in-out infinite}
  .pro-meter{transform-box:fill-box;transform-origin:left center;animation:proMeter 3.8s ease-in-out infinite}
  .pro-ring{transform-box:fill-box;transform-origin:center;animation:proRing 3.6s ease-out infinite}
  .pro-delay-1{animation-delay:.45s}
  .pro-delay-2{animation-delay:.9s}
  .pro-delay-3{animation-delay:1.35s}
  @keyframes proAccPulse{0%,100%{opacity:.58}50%{opacity:1}}
  @keyframes proFlow{to{stroke-dashoffset:-72}}
  @keyframes proBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
  @keyframes proTalk{0%,100%{transform:scale(.86);opacity:.42}50%{transform:scale(1.05);opacity:1}}
  @keyframes proMeter{0%,100%{transform:scaleX(.42)}50%{transform:scaleX(1)}}
  @keyframes proRing{0%{transform:scale(.72);opacity:.5}80%,100%{transform:scale(1.28);opacity:0}}
  .pro-apps .pro-app:nth-child(2) .pro-acc{animation-delay:.5s}
  .pro-apps .pro-app:nth-child(3) .pro-acc{animation-delay:1s}
  .pro-apps .pro-app:nth-child(4) .pro-acc{animation-delay:1.5s}
  .pro-apps .pro-app:nth-child(5) .pro-acc{animation-delay:2s}
  .pro-apps .pro-app:nth-child(6) .pro-acc{animation-delay:2.5s}
  @media (prefers-reduced-motion:reduce){
    .pro-acc,.pro-flow,.pro-bob,.pro-talk,.pro-meter,.pro-ring{animation:none}
  }

  /* — source (debate) banner — two columns: identity | detail.
     No hard border or glow (read as "weird bordering"); just a flat,
     gentle red wash to mark it as the origin, and a big arena scene. */
  .pro-source{padding:24px 32px;display:grid;grid-template-columns:.74fr 1.5fr;gap:40px;align-items:center;
    border-color:transparent;
    background:rgba(239,68,68,.06)}
  .pro-source:hover{border-color:rgba(239,68,68,.22)}
  .pro-source .pro-scene{width:100%;height:236px;margin:0 0 18px;border-radius:14px}
  .pro-source .pro-scene svg{width:min(92%,470px);max-width:470px;max-height:84%}
  .pro-src-tag{font-size:.6rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#ef4444;margin:0 0 10px;display:flex;align-items:center;gap:9px}
  .pro-src-tag::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(239,68,68,.5),transparent)}
  .pro-src-title{font-family:var(--font-display);font-size:1.72rem;font-weight:700;line-height:1.07;letter-spacing:-.02em;color:var(--text)}
  .pro-src-body{font-size:.96rem;color:var(--text-dim);line-height:1.55;margin-bottom:16px}
  .pro-src-body b{color:var(--text);font-weight:600}
  .pro-loop{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
  .pro-loop span{font-size:.72rem;font-weight:600;color:var(--text);background:rgba(239,68,68,.13);border:1px solid rgba(239,68,68,.3);border-radius:999px;padding:5px 11px}

  /* — applications grid — */
  .pro-apps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  .pro-app{--pro-pad:19px;padding:var(--pro-pad) var(--pro-pad) 17px;display:flex;flex-direction:column;overflow:hidden}
  .pro-app:hover{transform:translateY(-3px);border-color:rgba(239,68,68,.42)}
  /* 2026-06-15: bumped from .57rem/.13em — the room label (Lawyers,
     Founders...) was too small and over-tracked to read at a glance. */
  .pro-card-tag{font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#ef4444;margin-bottom:9px}
  .pro-card-title{font-size:.97rem;font-weight:700;line-height:1.28;margin-bottom:9px;color:var(--text)}
  .pro-phases{font-size:.66rem;font-weight:700;letter-spacing:.045em;text-transform:uppercase;color:var(--text-ghost);margin-bottom:12px}

  /* mini transcript — the proof. lifts on hover. */
  .pro-clash{border:1px solid var(--border);border-radius:11px;padding:9px 11px;margin-bottom:14px;background:var(--bg-card);display:flex;flex-direction:column;gap:6px;transition:border-color .2s ease}
  .pro-app:hover .pro-clash{border-color:rgba(239,68,68,.32)}
  .pro-clash p{margin:0;font-size:.78rem;line-height:1.38;display:flex;gap:8px}
  .pro-clash .who{flex-shrink:0;font-weight:800;font-size:.55rem;letter-spacing:.07em;text-transform:uppercase;padding-top:3px;width:24px}
  .pro-clash .ai .who{color:#ef4444}
  .pro-clash .you .who{color:var(--text-ghost)}
  .pro-clash .ai{color:var(--text-dim)}
  .pro-clash .you{color:var(--text);font-weight:500}

  /* skill tags — auto-labelled "Trains" so the section reads as skill-based */
  .pro-skills{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:auto}
  .pro-skills::before{content:"Trains";font-size:.56rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-ghost);margin-right:1px}
  .pro-skills span{font-size:.64rem;font-weight:600;color:var(--text-dim);border:1px solid var(--border);border-radius:7px;padding:3px 8px}
  .pro-src-skills .pro-skills span{border-color:rgba(239,68,68,.28);color:var(--text)}

  @media (max-width:900px){
    .pro-apps{grid-template-columns:repeat(2,1fr)}
  }
  @media (max-width:700px){
    .pro-source{grid-template-columns:1fr;gap:16px}
    .pro-source .pro-scene{height:150px;margin-bottom:14px}
  }
  @media (max-width:560px){
    .pro-apps{grid-template-columns:1fr}
    .pro-src-title{font-size:1.4rem}
  }