/* AMB-only token aliases not in global.css (warm role hues). */
  :root {
    --warm-1: #e8744a;
    --warm-2: #d4a45c;
    --warm-deep: #c45a2e;
  }

  /* This bespoke page doesn't link shell.css, so the prototype has NO global
     heading `text-wrap: balance` — balance is hand-tuned per-element (hero only).
     Our global.css applies balance to all h1-h4, so reset the section headings
     back to `wrap` here to match the prototype's line breaks. (is:global, but
     this block only loads on this page.) */
  h2,
  h3,
  h4 {
    text-wrap: wrap;
  }

  /* ===== Section head — shared by every content section ===== */
  .sec-head { max-width: 880px; }
  .sec-head .eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    margin: 0 0 28px;
  }
  .sec-head h2 {
    margin: 0; font-size: clamp(36px, 4.4vw, 56px);
    line-height: 1.05; letter-spacing: -0.025em; font-weight: 500;
    color: var(--ink);
  }
  .sec-head p {
    margin: 16px 0 0; font-size: 18px;
    line-height: 1.55; letter-spacing: 0; font-weight: 400;
    color: var(--ink-muted);
    max-width: 56ch;
  }

  /* ======================================================================
     HERO — interior-page variant: centered copy stack with a pill CTA
     (no email capture), Ramp-style two-tone headline, and the warm dither
     agent panel full-width below the copy.
     ====================================================================== */
  section.hero {
    padding: 0;
    background: var(--paper);
    position: relative;
    overflow: hidden;
  }
  section.hero .container {
    /* 96px top = the .phero product-page canon. */
    padding: 96px 50px 104px;
    display: flex; flex-direction: column;
    align-items: center;
    gap: 56px;
    position: relative;
    z-index: 1;
  }
  .hero-text {
    max-width: 760px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center;
    position: relative; z-index: 2;
  }
  .hero-product {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 12px;
    border-radius: var(--pill);
    background: #e7efe9; color: var(--accent-deep);
    font-size: 14px; font-weight: 500; line-height: 1;
    margin-bottom: 26px;
  }
  .hero-product svg { width: 15px; height: 15px; }
  /* Two-tone selective weighting: the set-up reads quiet, the operative
     phrase carries the ink. */
  .hero h1 {
    font-size: clamp(44px, 5.4vw, 72px);
    line-height: 1.05; letter-spacing: -0.035em;
    font-weight: 500; margin: 0 0 18px;
    color: var(--ink-muted);
    text-wrap: balance;
    max-width: 17ch;
  }
  .hero h1 b { font-weight: 600; color: var(--ink); }
  .hero .lede {
    font-size: 18px; line-height: 1.5; color: var(--ink-muted);
    margin: 0 0 32px;
    max-width: 520px;
    text-wrap: balance;
  }
  .hero .cta-row { display: flex; gap: 12px; justify-content: center; }

  /* The agent panel — warm dither gradient + noise, the homepage featured-
     tile recipe blown up to hero scale. Conversation reveals message by
     message on load. */
  .hero-agent {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    width: 100%;
    max-width: 980px;
    min-height: 530px;
    padding: 28px 40px;
    display: flex; flex-direction: column; justify-content: center;
    background:
      radial-gradient(ellipse 70% 60% at 22% 78%, #e8744a 0%, transparent 55%),
      radial-gradient(ellipse 60% 60% at 80% 80%, #d4a45c 0%, transparent 55%),
      radial-gradient(ellipse 80% 70% at 20% 18%, #a89cc4 0%, transparent 60%),
      radial-gradient(ellipse 70% 50% at 80% 15%, #c89880 0%, transparent 55%),
      linear-gradient(160deg, #b3a4c8 0%, #d49870 55%, #b88858 100%);
  }
  .hero-agent::after {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    mix-blend-mode: overlay;
    opacity: 0.85;
    pointer-events: none;
  }
  .hero-agent > * { position: relative; z-index: 1; }
  @media (max-width: 640px) { section.hero .hero-agent { min-height: 515px; justify-content: flex-start; } }
  .hr-rail { width: min(560px, 100%); margin: 0 auto; display: flex; flex-direction: column; }
  .hr-step { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; }
  .hr-node { display: flex; flex-direction: column; align-items: center; }
  .hr-dot {
    width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; z-index: 1;
    border: 1.5px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px); display: grid; place-items: center; color: #fff;
    font-size: 11px; font-weight: 600; transition: all 0.45s var(--ease);
  }
  .hr-dot svg { width: 10px; height: 10px; display: none; }
  .hr-line { width: 1.5px; flex: 1; background: rgba(255,255,255,0.28); min-height: 12px; }
  .hr-step:last-child .hr-line { display: none; }
  .hr-body { padding-bottom: 16px; min-width: 0; }
  .hr-lbl {
    font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.66); padding-top: 3px; text-shadow: 0 1px 2px rgba(40,20,8,0.3);
  }
  .hr-sum {
    font-size: 13.5px; color: rgba(255,255,255,0.88); margin-top: 2px;
    text-shadow: 0 1px 2px rgba(40,20,8,0.3);
    max-height: 0; opacity: 0; overflow: hidden; transition: all 0.5s var(--ease);
  }
  /* Registered so the review window's fade band can be transitioned (a plain
     custom property would snap; a registered <length> interpolates). */
  @property --hr-fade { syntax: "<length>"; inherits: false; initial-value: 0px; }

  .hr-detail {
    max-height: 0; opacity: 0; overflow: hidden;
    display: flex; flex-direction: column; gap: 8px;
    transition: max-height 0.6s var(--ease), opacity 0.45s var(--ease) 0.1s, margin 0.6s var(--ease);
  }

  /* Chat + artifact primitives on the warm dither. */
  .hr-msg-user { display: flex; justify-content: flex-end; }
  .hr-msg-agent { display: flex; justify-content: flex-start; }
  .hr-bub {
    background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.24);
    color: #fff; backdrop-filter: blur(8px);
    font-size: 15px; line-height: 1.45; padding: 9px 14px;
    border-radius: 14px; border-bottom-right-radius: 5px; max-width: 88%;
  }
  .hr-abub {
    background: rgba(255,255,255,0.94); border: 1px solid var(--line);
    color: var(--ink); font-size: 15px; line-height: 1.45; padding: 9px 14px;
    border-radius: 14px; border-bottom-left-radius: 5px; max-width: 88%;
    box-shadow: 0 6px 18px -10px rgba(0,0,0,0.2);
  }
  .hr-card {
    background: rgba(255,255,255,0.97); border: 1px solid var(--line);
    border-radius: 12px; padding: 13px 15px; color: var(--ink);
    box-shadow: 0 10px 30px -14px rgba(0,0,0,0.24);
  }
  .hr-run {
    display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
    background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.24);
    backdrop-filter: blur(8px); color: #fff;
    font-size: 13px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  }
  .hr-run svg { width: 13px; height: 13px; display: block; opacity: 0.85; flex: 0 0 auto; }
  .hr-run .dim { font-weight: 400; opacity: 0.75; }
  .hr-brand { width: 16px; height: 16px; flex: 0 0 auto; border-radius: 3px; overflow: hidden; display: inline-flex; }
  .hr-brand img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .hr-prop-row { display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--ink-muted); white-space: nowrap; }
  .hr-prop-row .ch { font-weight: 500; color: var(--ink); }
  /* Atomic wrap groups: if the row breaks on mobile, the name and the
     old->new price pair each stay on one line. */
  .hr-pn, .hr-pp { display: inline-flex; align-items: center; gap: 7px; }
  .hr-prop-row .arr { color: var(--ink-subtle); }
  .hr-num { font-variant-numeric: tabular-nums; }
  .hr-old { color: var(--ink-subtle); text-decoration: line-through; }
  .hr-new { color: var(--accent-deep); font-weight: 600; }
  .hr-why { margin-top: 5px; font-size: 13px; color: var(--ink-subtle); }
  .hr-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
  .hr-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 500; padding: 5px 13px; border-radius: 999px;
    background: var(--paper-sunken); color: var(--ink); border: 1px solid var(--line);
    transition: all 0.35s var(--ease);
  }
  .hr-btn svg { width: 11px; height: 11px; display: block; }
  .hr-btn .x { display: none; }
  /* Proposal resolution (JS toggles .ok at b4 / .no at b5 and swaps labels). */
  .hr-prop.ok .hr-btn.ap { background: var(--accent); color: #fff; border-color: var(--accent); }
  .hr-prop.ok .hr-btn.ap .x { display: block; }
  .hr-prop.ok .hr-btn.rj { display: none; }
  .hr-prop.no .hr-btn.rj { background: rgba(184,80,63,0.1); color: #b8503f; border-color: rgba(184,80,63,0.3); }
  .hr-prop.no .hr-btn.rj .x { display: block; }
  .hr-prop.no .hr-btn.ap { display: none; }
  .hr-prop .hr-prop-row, .hr-prop .hr-why { transition: opacity 0.35s var(--ease); }
  .hr-prop.no .hr-prop-row, .hr-prop.no .hr-why { opacity: 0.6; }
  /* "Applied in Ads Manager" receipt — appears beside the Approved button. */
  .hr-applied {
    display: none; align-items: center; gap: 5px; white-space: nowrap;
    font-size: 12.5px; font-weight: 500; color: var(--accent-deep);
  }
  .hr-applied svg { width: 11px; height: 11px; flex: 0 0 auto; }
  .hr-applied .al-short { display: none; }
  @media (max-width: 430px) {
    .hr-applied .al-full { display: none; }
    .hr-applied .al-short { display: inline; }
  }
  .hr-prop.ok .hr-applied { display: inline-flex; animation: hr-applied-in 0.4s var(--ease) 0.45s backwards; }
  @keyframes hr-applied-in { from { opacity: 0; transform: translateX(-6px); } }
  /* Ghost cursor — clicks Approve (b4) then Reject (b5). */
  .hr-cursor {
    position: absolute; top: 0; left: 0; z-index: 5;
    width: 22px; height: 22px;
    opacity: 0; pointer-events: none;
    transition: transform 0.75s cubic-bezier(0.3, 0.8, 0.3, 1), opacity 0.35s var(--ease);
  }
  .hr-cursor.is-on { opacity: 1; }
  .hr-cursor .ptr {
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
    transition: transform 0.13s var(--ease);
    transform-origin: 5px 5px;
  }
  .hr-cursor.is-click .ptr { transform: scale(0.8); }

  /* Learn artifacts — compact white receipt rows. */
  .hr-fact { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 10px 14px; }
  .hr-fact > svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ink-subtle); }
  .hr-fact .f-lbl { font-weight: 500; }
  .hr-fact .f-chip {
    font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
    background: var(--accent-soft); color: var(--accent-deep);
  }
  .hr-fact .hr-prec { margin-left: auto; }

  /* Precision delta — dim old value, green new value pops in on the learn beat. */
  .hr-prec { display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; font-weight: 600; }
  .hr-prec .p-old { color: var(--ink-subtle); }
  .hr-prec .p-arr { color: var(--ink-subtle); }
  .hr-prec .p-new { color: var(--accent-deep); display: inline-block; transform: scale(0.6); opacity: 0; transition: transform 0.4s var(--ease) 0.9s, opacity 0.4s var(--ease) 0.9s; }
  .hero-agent.at-8 .hr-prec .p-new { transform: none; opacity: 1; }

  /* Beat reveals — data-b="N" elements appear from beat N onward. */
  .hero-agent [data-b] { opacity: 0; transform: translateY(8px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
  .hero-agent.at-1 [data-b="1"], .hero-agent.at-2 [data-b="2"], .hero-agent.at-3 [data-b="3"],
  .hero-agent.at-4 [data-b="4"], .hero-agent.at-5 [data-b="5"], .hero-agent.at-6 [data-b="6"],
  .hero-agent.at-7 [data-b="7"], .hero-agent.at-8 [data-b="8"] { opacity: 1; transform: none; }

  /* Propose & review is a chat viewport: unsent items take no layout space,
     each new one expands at the bottom of the bottom-anchored stack and pushes
     older ones up and out through the top fade mask. */
  .hr-step.st2 .hr-detail > [data-b] {
    flex: 0 0 auto;
    max-height: 0; opacity: 0; transform: none; overflow: hidden; margin-top: 0;
    transition: max-height 0.55s var(--ease), opacity 0.45s var(--ease) 0.1s, margin 0.55s var(--ease);
  }
  .hero-agent.at-3 .hr-step.st2 .hr-detail > [data-b="3"],
  .hero-agent.at-6 .hr-step.st2 .hr-detail > [data-b="6"],
  .hero-agent.at-7 .hr-step.st2 .hr-detail > [data-b="7"] { max-height: 240px; opacity: 1; margin-top: 8px; }
  /* The two proposals land just behind the message that introduces them. */
  .hr-step.st2 .hr-detail > .hr-prop.p1 { transition-delay: 0.35s; }
  .hr-step.st2 .hr-detail > .hr-prop.p2 { transition-delay: 0.55s; }

  /* Step states — active expands its detail; done fills the dot + shows the receipt. */
  .hero-agent.is-1 .hr-step.st1 .hr-detail,
  .hero-agent.is-2 .hr-step.st1 .hr-detail { max-height: 220px; opacity: 1; margin-top: 8px; }
  .hero-agent.at-3 .hr-step.st1 .hr-dot { background: #fff; color: var(--warm-deep); border-color: #fff; }
  .hero-agent.at-3 .hr-step.st1 .hr-dot svg { display: block; }
  .hero-agent.at-3 .hr-step.st1 .hr-dot .n { display: none; }
  .hero-agent.at-3 .hr-step.st1 .hr-sum { max-height: 44px; opacity: 1; }
  .hr-step.st2 .hr-detail { gap: 0; justify-content: flex-end; }
  /* Top fade band — sized by --hr-fade, and OFF (0px) until the window really
     overflows. */
  .hr-step.st2 .hr-detail {
    --hr-fade: 0px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hr-fade));
    mask-image: linear-gradient(to bottom, transparent 0, #000 var(--hr-fade));
    transition: max-height 0.6s var(--ease), opacity 0.45s var(--ease) 0.1s,
                margin 0.6s var(--ease), --hr-fade 0.45s var(--ease);
  }
  .hr-step.st2 .hr-detail.is-clipped { --hr-fade: 48px; }
  .hero-agent.is-3 .hr-step.st2 .hr-detail, .hero-agent.is-4 .hr-step.st2 .hr-detail,
  .hero-agent.is-5 .hr-step.st2 .hr-detail, .hero-agent.is-6 .hr-step.st2 .hr-detail,
  .hero-agent.is-7 .hr-step.st2 .hr-detail { max-height: 320px; opacity: 1; margin-top: 8px; }
  .hero-agent.at-8 .hr-step.st2 .hr-dot { background: #fff; color: var(--warm-deep); border-color: #fff; }
  .hero-agent.at-8 .hr-step.st2 .hr-dot svg { display: block; }
  .hero-agent.at-8 .hr-step.st2 .hr-dot .n { display: none; }
  .hero-agent.at-8 .hr-step.st2 .hr-sum { max-height: 44px; opacity: 1; }
  .hero-agent.is-8 .hr-step.st3 .hr-detail { max-height: 180px; opacity: 1; margin-top: 8px; }
  .hero-agent.is-8 .hr-step.st3 .hr-dot { background: #fff; color: var(--warm-deep); border-color: #fff; }

  /* Reduced motion: no clock runs — show the completed loop as a static state. */
  @media (prefers-reduced-motion: reduce) {
    .hero-agent [data-b] { opacity: 1; transform: none; transition: none; }
    .hero-agent .hr-dot { background: #fff; color: var(--warm-deep); border-color: #fff; }
    .hero-agent .hr-dot svg { display: block; }
    .hero-agent .hr-dot .n { display: none; }
    .hero-agent .hr-sum { max-height: 44px; opacity: 1; }
    .hero-agent .hr-step.st3 .hr-detail { max-height: 180px; opacity: 1; margin-top: 8px; }
    .hero-agent .hr-prec .p-new { transform: none; opacity: 1; transition: none; }
  }

  /* ======================================================================
     THE SHIFT — the same Tuesday morning, two ways.
     ====================================================================== */
  section.shift { padding: 0; }
  section.shift .container {
    padding-top: 112px; padding-bottom: 112px;
    display: flex; flex-direction: column; gap: 64px;
  }
  .shift-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .shift-tile {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--paper-cool);
    padding: 28px;
    display: flex; flex-direction: column; gap: 22px;
  }
  .shift-tile.is-converge {
    background: var(--accent-mist);
    border-color: rgba(47,110,75,0.16);
  }
  .shift-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .shift-head h3 {
    margin: 0;
    font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.55;
    color: var(--ink);
  }
  .shift-head .day {
    font-size: 12.5px; color: var(--ink-subtle);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .shift-tile.is-converge .shift-head { border-bottom-color: rgba(47,110,75,0.14); }
  .shift-tile.is-converge .shift-head h3 { color: var(--accent-deep); }
  /* Morning scoreboard — three quiet stats above the timeline. */
  .shift-stats {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .shift-stat .k {
    font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-subtle); font-weight: 500;
    margin-bottom: 4px;
  }
  .shift-stat .v {
    font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--ink); font-variant-numeric: tabular-nums;
    line-height: 1.2;
  }
  .shift-stat .note {
    font-size: 11.5px; color: var(--ink-muted);
    margin-top: 2px;
  }
  .shift-tile.is-converge .shift-stat .v { color: var(--accent-deep); }
  /* Timeline rows — time gutter + entry + optional delta. */
  .shift-rows { display: flex; flex-direction: column; }
  .shift-row {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
    font-size: 13.5px;
  }
  .shift-tile.is-converge .shift-row { border-top-color: rgba(47,110,75,0.12); }
  .shift-row .t {
    font-size: 12px; color: var(--ink-subtle);
    font-variant-numeric: tabular-nums;
  }
  .shift-row .e { color: var(--ink-soft); }
  .shift-row .e b { font-weight: 600; color: var(--ink); }
  .shift-row .d {
    font-size: 12.5px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
    white-space: nowrap;
  }
  .shift-row .d.is-bad  { color: var(--warm-deep); }
  .shift-row .d.is-good { color: var(--accent); }
  /* Mobile: one tile at a time behind a pill tabset. */
  .shift-toggle { display: none; }
  @media (max-width: 960px) {
    .shift-toggle {
      display: inline-flex; align-items: center; gap: 4px;
      align-self: center;
      background: var(--paper-cool);
      border: 1px solid var(--line);
      border-radius: 99px;
      padding: 4px;
      margin-bottom: -12px;
    }
    .st-btn {
      padding: 9px 18px; border: 0;
      background: transparent;
      border-radius: 99px;
      font-family: inherit;
      font-size: 13.5px; font-weight: 500;
      color: var(--ink-muted);
      cursor: pointer;
      transition: color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
    }
    .st-btn.is-active {
      background: var(--paper);
      color: var(--ink);
      box-shadow: 0 2px 6px -2px rgba(14, 16, 20, 0.10), 0 1px 2px rgba(14,16,20,0.04);
    }
    .shift-grid[data-view="without"] .shift-tile.is-converge { display: none; }
    .shift-grid[data-view="converge"] .shift-tile:not(.is-converge) { display: none; }
    .shift-grid[data-view] .shift-tile { animation: shift-swap 0.45s var(--ease); }
  }
  @keyframes shift-swap { from { opacity: 0; transform: translateY(6px); } }
  @media (prefers-reduced-motion: reduce) {
    .shift-grid[data-view] .shift-tile { animation: none; }
  }

  /* ======================================================================
     HOW IT WORKS — Autopilot in 90 days.
     ====================================================================== */
  section.phases { padding: 0; position: relative; }
  /* Soft blue radial backdrop. */
  .phases-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(40% 22% at 85% 6%, var(--grad-2), transparent 60%),
      radial-gradient(35% 25% at 14% 32%, var(--grad-2), transparent 60%),
      radial-gradient(42% 25% at 20% 90%, var(--grad-2), transparent 60%);
    pointer-events: none;
    z-index: 0;
    opacity: 0.7;
  }
  section.phases > * { position: relative; z-index: 1; }
  section.phases .container {
    padding-top: 112px; padding-bottom: 112px;
    display: flex; flex-direction: column; gap: 64px;
  }
  .phase-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }
  .phase-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
  }
  .phase-strip {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 11.5px; font-weight: 500;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-subtle);
  }
  .phase-strip .idx { font-weight: 600; }
  .phase-card.is-cool .phase-strip .idx { color: #5a8aa6; }
  .phase-card.is-verd .phase-strip .idx { color: #5a8aa6; }
  .phase-card.is-warm .phase-strip .idx { color: #5a8aa6; }
  /* Mock panel — soft role wash behind a monochrome product sketch. */
  .phase-mock {
    border-radius: 10px;
    padding: 22px;
    min-height: 250px;
    display: flex; flex-direction: column; justify-content: center; gap: 10px;
  }
  .phase-card.is-cool .phase-mock {
    background:
      radial-gradient(70% 70% at 30% 35%, rgba(124,176,196,0.22), transparent 70%),
      linear-gradient(160deg, rgba(124,176,196,0.08), rgba(124,176,196,0.03));
  }
  .phase-card.is-verd .phase-mock {
    background:
      radial-gradient(70% 70% at 30% 35%, rgba(124,176,196,0.22), transparent 70%),
      linear-gradient(160deg, rgba(124,176,196,0.08), rgba(124,176,196,0.03));
  }
  .phase-card.is-warm .phase-mock {
    background:
      radial-gradient(70% 70% at 30% 35%, rgba(124,176,196,0.22), transparent 70%),
      linear-gradient(160deg, rgba(124,176,196,0.08), rgba(124,176,196,0.03));
  }
  .phase-card h3 {
    margin: 0;
    font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.55;
    color: var(--ink);
  }
  .phase-card > p {
    margin: 0;
    font-size: 16.5px; line-height: 1.55;
    color: var(--ink-muted);
  }

  /* Phase 01 mock — ask-the-assistant exchange. */
  .pm-chat { display: flex; flex-direction: column; gap: 8px; }
  .pm-bubble {
    align-self: flex-end;
    background: var(--paper); border: 1px solid var(--line);
    padding: 7px 12px; border-radius: 12px;
    font-size: 11.5px; color: var(--ink);
    max-width: 92%;
  }
  .pm-bubble.is-agent {
    align-self: flex-start;
    background: var(--paper-cool);
  }
  .pm-bubble.is-agent b { font-weight: 600; }

  /* Phase 02 mock — suggested-change card with approve/reject. */
  .pm-suggest {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 12px 14px;
  }
  .pm-suggest .head {
    font-size: 10.5px; color: var(--ink-subtle); font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    margin-bottom: 8px;
    display: flex; justify-content: space-between; align-items: center;
  }
  .pm-suggest .head .live {
    display: inline-flex; align-items: center; gap: 5px;
    text-transform: none; letter-spacing: 0;
    color: var(--ink-muted);
  }
  .pm-suggest .head .live i {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent);
  }
  .pm-suggest .body { font-size: 12.5px; color: var(--ink); margin-bottom: 3px; }
  .pm-suggest .body b { font-weight: 600; }
  .pm-suggest .sub { font-size: 11px; color: var(--ink-muted); margin-bottom: 12px; }
  .pm-suggest .btns { display: flex; gap: 6px; justify-content: flex-end; }
  .pm-suggest .btns span {
    padding: 5px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
  }
  .pm-suggest .btns .reject { color: var(--ink-soft); border: 1px solid var(--line-strong); }
  .pm-suggest .btns .approve { background: var(--ink); color: var(--paper); }

  /* Phase 03 mock — the notification feed. */
  .pm-feed { display: flex; flex-direction: column; gap: 6px; }
  .pm-feed .row {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px 11px;
    display: flex; align-items: center; gap: 9px;
    font-size: 11.5px; color: var(--ink);
  }
  .pm-feed .row .tick {
    width: 15px; height: 15px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent-deep);
    display: grid; place-items: center;
    flex: 0 0 auto;
  }
  .pm-feed .row .tick svg { width: 9px; height: 9px; display: block; }
  .pm-feed .row span.lbl { flex: 1; }
  .pm-feed .row span.lbl b { font-weight: 600; }
  .pm-feed .row .when {
    font-size: 10.5px; color: var(--ink-subtle);
    font-variant-numeric: tabular-nums;
  }

  /* ======================================================================
     WHY IT WORKS — bento split: warm dither featured tile beside a 2×2 quad.
     ====================================================================== */
  section.why { padding: 0; }
  section.why .container {
    padding-top: 112px; padding-bottom: 112px;
    display: flex; flex-direction: column; gap: 64px;
  }
  .bento.is-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .bento-tile {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: var(--paper-cool);
    padding: 28px;
    display: flex; flex-direction: column;
    border: 1px solid var(--line);
  }
  .bento-tile.is-featured.is-warm {
    background:
      radial-gradient(ellipse 70% 60% at 22% 78%, #e8744a 0%, transparent 55%),
      radial-gradient(ellipse 60% 60% at 80% 80%, #d4a45c 0%, transparent 55%),
      radial-gradient(ellipse 80% 70% at 20% 18%, #a89cc4 0%, transparent 60%),
      radial-gradient(ellipse 70% 50% at 80% 15%, #c89880 0%, transparent 55%),
      linear-gradient(160deg, #b3a4c8 0%, #d49870 55%, #b88858 100%);
    color: #ffffff;
    border-color: transparent;
    min-height: 500px;
    padding: 36px;
  }
  .bento-tile.is-featured::after {
    content: ''; position: absolute; inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
    background-size: 180px 180px;
    mix-blend-mode: overlay;
    opacity: 0.85;
    pointer-events: none;
  }
  .bento-tile.is-featured .feat-title {
    position: relative; z-index: 1;
    margin: 0 0 18px;
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    max-width: 18ch;
  }
  .bento-tile.is-featured .feat-body {
    position: relative; z-index: 1;
    margin: 0;
    max-width: 48ch;
    font-size: 16.5px; line-height: 1.55;
    color: rgba(255,255,255,0.94);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  }
  /* Autonomy mock — translucent dark card on the dither. */
  .feat-autonomy {
    position: relative; z-index: 1;
    margin-top: auto;
    background: rgba(14,16,20,0.28);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 12px;
    color: #ffffff;
  }
  .feat-autonomy .head {
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .feat-autonomy .head .lbl {
    font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
    color: rgba(255,255,255,0.85); font-weight: 600;
  }
  .feat-autonomy .head .val {
    font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
  }
  .feat-autonomy .bar-row {
    display: grid; grid-template-columns: 56px 1fr 40px;
    align-items: center; gap: 10px;
    font-size: 11.5px; font-weight: 500;
  }
  .feat-autonomy .bar-row .bar {
    height: 8px; background: rgba(255,255,255,0.22);
    border-radius: 999px; overflow: hidden;
  }
  .feat-autonomy .bar-row .bar i {
    display: block; height: 100%;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255,255,255,0.85) 100%);
  }
  .feat-autonomy .bar-row .v {
    text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
  }
  .feat-autonomy .learn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px;
    color: rgba(255,255,255,0.92);
  }
  .feat-autonomy .learn svg { width: 12px; height: 12px; flex: 0 0 auto; }

  /* 2×2 quad of supporting tiles. */
  .bento-quad {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
  }
  .bento-small {
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 22px;
    min-height: 0;
    display: flex; flex-direction: column;
    cursor: pointer;
    transition: background 0.18s var(--ease), transform 0.18s var(--ease);
  }
  .bento-small:hover {
    background: var(--paper-cool);
    transform: translateY(-1px);
  }
  /* `.is-static` opts a card out of the click affordance. */
  .bento-small.is-static { cursor: default; }
  .bento-small.is-static:hover { background: var(--paper); transform: none; }
  .bento-small.is-static:hover .icon {
    background: var(--paper-cool); color: var(--ink); border-color: var(--line);
  }
  .bento-small.is-static:hover .icon .ic-default { opacity: 1; transform: none; }
  .bento-small .icon {
    position: relative;
    width: 36px; height: 36px;
    border-radius: 8px;
    background: var(--paper-cool);
    border: 1px solid var(--line);
    display: grid; place-items: center;
    color: var(--ink);
    margin-bottom: 0;
    flex: 0 0 auto;
    transition: background 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
  }
  .bento-small .icon svg { width: 18px; height: 18px; }
  .bento-small .icon .ic-default,
  .bento-small .icon .ic-arrow {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
  }
  .bento-small .icon .ic-arrow { opacity: 0; transform: translate(-2px, 2px); }
  .bento-small:hover .icon { background: var(--accent); color: #ffffff; border-color: var(--accent); }
  .bento-small:hover .icon .ic-default { opacity: 0; transform: translate(2px, -2px); }
  .bento-small:hover .icon .ic-arrow { opacity: 1; transform: translate(0, 0); }
  .bento-small h3 {
    margin: auto 0 6px 0;
    font-size: 20px; font-weight: 600;
    color: var(--ink);
    letter-spacing: -0.015em; line-height: 1.15;
  }
  .bento-small p {
    margin: 0;
    font-size: 16.5px; font-weight: 400; line-height: 1.4;
    color: var(--ink-muted);
    letter-spacing: -0.005em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  }

  /* ======================================================================
     VS. THE ALTERNATIVES — Swiss comparison table.
     ====================================================================== */
  section.compare { padding: 0; }
  section.compare .container {
    padding-top: 112px; padding-bottom: 112px;
    display: flex; flex-direction: column; gap: 64px;
  }
  .compare-table {
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    background: var(--paper);
    display: grid;
    grid-template-columns: 150px 1fr 1fr;
  }
  .cmp-cell {
    padding: 22px 26px;
    border-top: 1px solid var(--line);
    font-size: 16.5px; line-height: 1.5;
    display: flex; align-items: center; gap: 12px;
  }
  .cmp-cell.is-head {
    border-top: 0;
    flex-direction: column; align-items: flex-start; gap: 4px;
    padding-top: 26px; padding-bottom: 26px;
  }
  .cmp-cell.is-dim {
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-subtle);
  }
  .cmp-cell.col-generic { border-left: 1px solid var(--line); color: var(--ink-muted); }
  .cmp-cell.col-converge {
    border-left: 1px solid rgba(47,110,75,0.16);
    background: var(--accent-mist);
    color: var(--ink);
  }
  .cmp-cell.is-head .who {
    font-size: 11.5px; font-weight: 600;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ink-subtle);
  }
  .cmp-cell.col-converge.is-head .who { color: var(--accent); }
  .cmp-cell.is-head .name {
    font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
    color: var(--ink);
  }
  .cmp-mark {
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center;
    flex: 0 0 auto;
  }
  .cmp-mark svg { width: 11px; height: 11px; display: block; }
  .cmp-mark.is-x { background: var(--paper-sunken); color: var(--ink-subtle); }
  .cmp-mark.is-check { background: var(--accent-soft); color: var(--accent-deep); }
  /* Category groups are markup-only on desktop (display:contents keeps the
     flat 3-col grid); on mobile each becomes its own card. */
  .cmp-group { display: contents; }
  .cmp-txt { min-width: 0; }
  .cmp-tag { display: none; }

  /* ===== CTA band — homepage fixture ===== */
  section.cta-band {
    padding: 0; background: var(--paper);
    position: relative;
    /* Do NOT put a z-index here — this section is `.no-hatch` and relies on the
       section.no-hatch::after white mask (z-index 2) to cover the body hatch. */
  }
  section.cta-band .container { padding-top: 96px; padding-bottom: 96px; }
  .cta-bg {
    position: absolute; inset: 0;
    background:
      radial-gradient(680px 360px at 100% 0%, var(--grad-3), transparent 66%),
      radial-gradient(680px 360px at 0% 100%, var(--grad-2), transparent 66%);
    pointer-events: none;
    z-index: 0;
  }
  section.cta-band .cta-inner { position: relative; z-index: 1; }
  .cta-inner { position: relative; text-align: center; max-width: 720px; margin: 0 auto; }
  .cta-inner h2 {
    margin: 0 0 16px;
    font-size: clamp(40px, 5vw, 64px);
    font-weight: 600; letter-spacing: -0.035em; line-height: 1.04;
    color: var(--ink);
  }
  .cta-inner h2 .accent { color: var(--accent); }
  .cta-inner p {
    font-size: 18px; color: var(--ink-muted); margin: 0 0 28px;
  }
  .cta-inner .row { display: flex; gap: 12px; justify-content: center; }

  /* ===== responsive ===== */
  @media (max-width: 960px) {
    section.hero .container {
      padding: 56px 24px 64px;
      gap: 40px;
    }
    .hero-agent { min-height: 520px; padding: 24px 20px; }
    .shift-grid { grid-template-columns: 1fr; }
    .phase-row { grid-template-columns: 1fr; }
    .bento.is-split { grid-template-columns: 1fr; }
    .bento-quad .bento-small { min-height: 160px; }
    /* Compare: one card per category. */
    .compare-table {
      display: flex; flex-direction: column; gap: 12px;
      border: 0; border-radius: 0; background: transparent; overflow: visible;
    }
    .cmp-group {
      display: block;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--paper);
      overflow: hidden;
    }
    .cmp-cell { border-left: 0 !important; padding: 16px 20px; align-items: flex-start; }
    .cmp-cell.is-head { display: none; }
    .cmp-cell.is-dim { border-top: 0; padding-bottom: 0; }
    .cmp-cell.col-generic { border-top: 0; }
    .cmp-cell .cmp-mark { margin-top: 1px; }
    .cmp-tag {
      display: block;
      font-size: 10.5px; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: var(--ink-subtle);
      margin-bottom: 3px;
    }
    .cmp-cell.col-converge .cmp-tag { color: var(--accent); }
    section.shift .container,
    section.phases .container,
    section.why .container,
    section.compare .container {
      padding-top: 64px; padding-bottom: 64px;
      gap: 40px;
    }
  }
  @media (max-width: 640px) {
    /* Value-prop quad goes full-width; un-clamp the copy. */
    .bento-quad { grid-template-columns: 1fr; grid-template-rows: none; }
    .bento-quad .bento-small { min-height: 0; }
    .bento-small h3 { margin-top: 14px; }
    .bento-small p { display: block; -webkit-line-clamp: unset; overflow: visible; }
    /* Hero rail: proposal rows wrap instead of clipping off the card. */
    .hr-prop-row { white-space: normal; flex-wrap: wrap; row-gap: 2px; }
    .hero-agent.is-3 .hr-step.st2 .hr-detail, .hero-agent.is-4 .hr-step.st2 .hr-detail,
    .hero-agent.is-5 .hr-step.st2 .hr-detail, .hero-agent.is-6 .hr-step.st2 .hr-detail,
    .hero-agent.is-7 .hr-step.st2 .hr-detail { max-height: 300px; }
    .hr-btn { padding: 5px 11px; }
    .hr-applied { font-size: 12px; }
  }
  @media (max-width: 520px) {
    /* Hold all three stats on one row; notes wrap to a second line. */
    .shift-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .shift-stat .k { letter-spacing: 0.04em; }
    .shift-stat .note { line-height: 1.35; }
  }
  /* Phones: match the shared .container-page gutter (20px), drop
     text-wrap:balance, and let the gradient panel bleed edge-to-edge. */
  @media (max-width: 700px) {
    .hr-step.st2 .hr-detail > .hr-prop.p1 { transition-delay: 1.35s; }
    .hr-step.st2 .hr-detail > .hr-prop.p2 { transition-delay: 1.55s; }
    section.hero .container { padding-left: 20px; padding-right: 20px; }
    .hero h1 { text-wrap: pretty; }
    section.hero .hero-agent {
      align-self: stretch;
      margin-left: -20px; margin-right: -20px;
      width: auto; max-width: none;
      border-radius: 0;
    }
  }

  /* ===================================================================
     LIVE PHASE ANIMATIONS — ported from the production PhaseAssistant /
     PhaseCopilot / PhaseAutopilot components, recolored onto the warm/
     verdant tokens. Driven by the shared rAF loop in the script block.
     =================================================================== */
  .phase-mock[data-phase-assistant],
  .phase-mock[data-phase-copilot],
  .phase-mock[data-phase-autopilot] { position: relative; overflow: hidden; }

  /* --- Phase 01 · Assistant --- */
  .pa-inner { position: relative; width: 100%; display: flex; flex-direction: column; gap: 12px; justify-content: center; }
  .pa-user-row { display: flex; justify-content: flex-end; }
  .pa-bubble { max-width: 82%; padding: 9px 13px; border-radius: 10px 10px 2px 10px; background: var(--accent); color: #fff; font-size: 13px; line-height: 1.35; box-shadow: 0 1px 2px rgba(47,110,75,0.25); min-height: 14px; }
  .pa-caret { opacity: 0.7; }
  .pa-agent-row { display: flex; align-items: flex-start; gap: 7px; opacity: 0; transition: opacity 300ms ease; }
  .pa-agent-row[data-shown] { opacity: 1; }
  .pa-avatar { width: 18px; height: 18px; border-radius: 5px; background: var(--accent-mist); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
  .pa-avatar svg { display: block; }
  .pa-reply-wrap { flex: 1; min-width: 0; }
  .pa-thinking { display: none; gap: 3px; padding: 7px 10px; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px 10px 10px 2px; width: fit-content; }
  .pa-thinking[data-shown] { display: inline-flex; }
  .pa-thinking span { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-subtle); animation: pa-thinking-dot 1000ms ease-in-out infinite; }
  .pa-thinking span:nth-child(2) { animation-delay: 150ms; }
  .pa-thinking span:nth-child(3) { animation-delay: 300ms; }
  @keyframes pa-thinking-dot { 0%,60%,100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-2px); opacity: 1; } }
  .pa-reply { display: none; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px 10px 10px 2px; padding: 8px 11px; font-size: 13px; line-height: 1.35; }
  .pa-reply[data-shown] { display: block; }
  .pa-reply-header { color: var(--ink-subtle); font-size: 11px; margin-bottom: 7px; padding-left: 2px; }
  .pa-reply-row { display: flex; align-items: center; gap: 8px; padding: 3px 2px; opacity: 0; transform: translateY(3px); transition: opacity 250ms ease, transform 250ms ease; }
  .pa-reply-row[data-shown] { opacity: 1; transform: translateY(0); }
  .pa-dot { width: 5px; height: 5px; border-radius: 50%; background: #dc2626; flex-shrink: 0; }
  .pa-mono { font-size: 13px; }
  .pa-name { flex: 1; color: var(--ink-soft); }
  .pa-spend { color: var(--ink-subtle); font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
  .pa-learned { display: flex; align-items: center; gap: 6px; margin-left: 25px; margin-top: -2px; opacity: 0; transform: translateY(-4px); transition: opacity 350ms ease, transform 350ms ease; }
  .pa-learned[data-shown] { opacity: 1; transform: translateY(0); }
  .pa-learned-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); background: var(--accent-mist); padding: 2px 6px; border-radius: 4px; }
  .pa-learned-text { font-size: 11px; color: var(--ink-subtle); }

  /* --- Phase 02 · Copilot --- */
  .pc-inner { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .pc-card { width: 100%; background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); opacity: 0; transform: translateY(6px) scale(0.98); transition: opacity 350ms ease, transform 350ms cubic-bezier(0.22,1,0.36,1); }
  .pc-card[data-shown] { opacity: 1; transform: translateY(0) scale(1); }
  .pc-card-header { display: flex; align-items: center; gap: 7px; margin-bottom: 9px; }
  .pc-avatar { width: 16px; height: 16px; border-radius: 4px; background: var(--accent-mist); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .pc-avatar svg { display: block; }
  .pc-card-title { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
  .pc-card-time { font-size: 11px; color: var(--ink-subtle); margin-left: auto; font-family: var(--font-ui); }
  .pc-proposal { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
  .pc-mono { font-weight: 500; }
  .pc-old { color: var(--ink-subtle); font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
  .pc-new { color: #1f7a45; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
  .pc-arrow { vertical-align: -2px; color: var(--ink-subtle); margin: 0 1px; }
  .pc-caption { font-size: 11px; color: var(--ink-subtle); margin-top: 6px; line-height: 1.4; }
  .pc-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 11px; }
  .pc-btn { height: 27px; padding: 0 11px; font-size: 13px; font-weight: 500; border-radius: 5px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink-subtle); font-family: inherit; cursor: default; }
  .pc-approve { padding: 0 10px; font-weight: 600; border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 1px 2px rgba(47,110,75,0.25); display: inline-flex; align-items: center; justify-content: center; min-width: 96px; gap: 4px; transition: all 200ms ease; position: relative; }
  .pc-approve[data-state='hover'] { box-shadow: 0 0 0 3px rgba(47,110,75,0.18); }
  .pc-approve[data-state='clicked'] { transform: scale(0.96); }
  .pc-approve[data-state='success'] { background: #2f8f57; border-color: #2f8f57; }
  .pc-approve-default { display: inline-flex; }
  .pc-approve-success { display: none; align-items: center; gap: 4px; }
  .pc-approve[data-state='success'] .pc-approve-default { display: none; }
  .pc-approve[data-state='success'] .pc-approve-success { display: inline-flex; }
  .pc-cursor { display: none; position: absolute; right: -8px; bottom: -8px; width: 14px; height: 14px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
  .pc-approve[data-state='hover'] .pc-cursor { display: block; }
  .pc-cursor svg { display: block; }
  .pc-strip { width: 100%; margin-top: 8px; display: flex; align-items: center; flex-wrap: nowrap; gap: 8px; padding: 7px 11px; border-radius: 6px; background: var(--accent-mist); border: 1px solid rgba(47,110,75,0.18); opacity: 0; transform: translateY(-4px); transition: opacity 300ms ease, transform 300ms ease, background 250ms ease, border-color 250ms ease; }
  .pc-strip[data-shown] { opacity: 1; transform: translateY(0); }
  .pc-strip[data-updated] { background: #e8f5ee; border-color: rgba(47,143,87,0.30); }
  .pc-strip-spinner { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid rgba(47,110,75,0.25); border-top-color: var(--accent); animation: pc-spin 700ms linear infinite; flex-shrink: 0; display: block; }
  .pc-strip[data-updated] .pc-strip-spinner { display: none; }
  .pc-strip-check { display: none; flex-shrink: 0; color: #1f7a45; }
  .pc-strip[data-updated] .pc-strip-check { display: block; }
  @keyframes pc-spin { to { transform: rotate(360deg); } }
  .pc-strip-text { font-size: 11px; font-weight: 600; letter-spacing: 0.02em; color: var(--accent); white-space: nowrap; }
  .pc-strip[data-updated] .pc-strip-text { color: #1f7a45; }
  .pc-strip-meta { margin-left: auto; font-size: 11px; color: var(--ink-subtle); font-weight: 400; white-space: nowrap; font-family: var(--font-ui); }

  /* --- Phase 03 · Autopilot --- */
  .pap-stack { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
  .pap-header { height: 22px; display: flex; align-items: center; gap: 6px; padding: 0 8px; }
  .pap-pulse { position: relative; width: 7px; height: 7px; flex-shrink: 0; }
  .pap-pulse-ring, .pap-pulse-dot { position: absolute; inset: 0; border-radius: 50%; background: #2f8f57; }
  .pap-pulse-ring { opacity: 0; transform-origin: center; }
  .pap-title { font-size: 11px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0.02em; }
  .pap-counter { margin-left: auto; display: inline-flex; align-items: baseline; gap: 4px; }
  .pap-mono { font-family: inherit; }
  .pap-count { font-size: 13px; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
  .pap-actions-label { font-size: 11px; color: var(--ink-subtle); }
  .pap-notes { display: flex; flex-direction: column; gap: 7px; }
  .pap-note { display: none; align-items: center; gap: 9px; padding: 7px 10px; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 13px; box-shadow: 0 1px 1px rgba(0,0,0,0.02); }
  .pap-action { width: 14px; height: 14px; border-radius: 3px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .pap-action svg { display: block; }
  .pap-action-paused { background: #fdeaea; color: #b91c1c; }
  .pap-action-scaled { background: #e8f5ee; color: #1f7a45; }
  .pap-action-label { font-weight: 600; font-size: 11px; }
  .pap-action-label-paused { color: #b91c1c; }
  .pap-action-label-scaled { color: #1f7a45; }
  .pap-brand { display: inline-flex; flex-shrink: 0; }
  .pap-brand img { display: block; width: 11px; height: 11px; object-fit: contain; }
  .pap-target { font-size: 13px; color: var(--ink-soft); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pap-detail { font-size: 11px; color: var(--ink-subtle); font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
  .pap-auto { font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); background: var(--accent-mist); padding: 2px 5px; border-radius: 3px; flex-shrink: 0; }
  .pap-note.glow-trigger[data-kind='paused'] { animation: pap-glow-paused 900ms ease-out forwards; }
  .pap-note.glow-trigger[data-kind='scaled'] { animation: pap-glow-scaled 900ms ease-out forwards; }
  @keyframes pap-glow-paused { from { box-shadow: 0 0 0 3px rgba(220,38,38,0.14); border-color: rgba(220,38,38,0.30); } to { box-shadow: 0 1px 1px rgba(0,0,0,0.02); border-color: var(--line-strong); } }
  @keyframes pap-glow-scaled { from { box-shadow: 0 0 0 3px rgba(22,163,74,0.14); border-color: rgba(22,163,74,0.30); } to { box-shadow: 0 1px 1px rgba(0,0,0,0.02); border-color: var(--line-strong); } }

  /* --- Self-learning pillar (ported from PillarSelfLearningAnim) --- */
  .sla-stage {
    position: relative; z-index: 1; margin-top: 30px;
    width: 100%;
    display: flex; flex-direction: column;
  }
  .sla-stage::before {
    content: ''; display: block; height: 1px; margin-bottom: 22px;
    background: linear-gradient(90deg, rgba(255,255,255,0.34), rgba(255,255,255,0));
  }
  .sla-chart-panel { padding: 0; flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .sla-chart-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
  .sla-eyebrow { font-weight: 600; text-transform: uppercase; color: rgba(255,255,255,0.82); text-shadow: 0 1px 2px rgba(40,20,8,0.28); }
  .sla-eyebrow-chart { font-size: 11px; letter-spacing: 0.08em; }
  .sla-eyebrow-lesson { font-size: 10px; letter-spacing: 0.1em; }
  .sla-pct-readout { font-size: 28px; font-weight: 600; color: #fff; font-family: ui-monospace,'SF Mono',Menlo,monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; text-shadow: 0 1px 3px rgba(40,20,8,0.35); }
  .sla-pct-suffix { font-size: 16px; color: rgba(255,255,255,0.78); font-weight: 500; margin-left: 1px; }
  .sla-bars { position: relative; flex: 1; min-height: 80px; display: flex; align-items: flex-end; gap: 5px; }
  .sla-bar-cell { flex: 1; height: 100%; position: relative; display: flex; align-items: flex-end; }
  .sla-bar {
    width: 100%; height: 0%; --o: 0.7;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(255,255,255,var(--o)) 0%, rgba(255,255,255,calc(var(--o) * 0.62)) 100%);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    border: 1px solid rgba(255,255,255,calc(var(--o) * 0.55)); border-bottom: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.5);
    transition: height 312ms cubic-bezier(0.22,1,0.36,1);
  }
  .sla-bar-cell:nth-child(1)  .sla-bar { --o: 0.25 }
  .sla-bar-cell:nth-child(2)  .sla-bar { --o: 0.29 }
  .sla-bar-cell:nth-child(3)  .sla-bar { --o: 0.34 }
  .sla-bar-cell:nth-child(4)  .sla-bar { --o: 0.40 }
  .sla-bar-cell:nth-child(5)  .sla-bar { --o: 0.46 }
  .sla-bar-cell:nth-child(6)  .sla-bar { --o: 0.53 }
  .sla-bar-cell:nth-child(7)  .sla-bar { --o: 0.60 }
  .sla-bar-cell:nth-child(8)  .sla-bar { --o: 0.67 }
  .sla-bar-cell:nth-child(9)  .sla-bar { --o: 0.74 }
  .sla-bar-cell:nth-child(10) .sla-bar { --o: 0.81 }
  .sla-bar-cell:nth-child(11) .sla-bar { --o: 0.88 }
  .sla-bar-cell:nth-child(12) .sla-bar { --o: 0.95 }
  .sla-axis { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10px; color: rgba(255,255,255,0.72); font-family: ui-monospace,'SF Mono',Menlo,monospace; }
  .sla-lesson-panel { position: relative; padding: 20px 0 0; height: 150px; flex-shrink: 0; display: flex; flex-direction: column; contain: layout paint; }
  .sla-lesson-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; padding: 0; }
  .sla-stack { position: relative; flex: 1; overflow: hidden; padding: 0; }
  .sla-row { position: absolute; top: 0; left: 0; right: 0; opacity: 0; will-change: transform, opacity; transform-origin: left center; }
  .sla-pill { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 11px; border-radius: 7px; background: rgba(255,255,255,0.13); border: 1px solid rgba(255,255,255,0.24); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .sla-wash { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.28), rgba(255,255,255,0)); pointer-events: none; opacity: 0; }
  .sla-glyph { flex-shrink: 0; width: 14px; height: 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 3px; font-size: 11px; font-weight: 700; line-height: 1; background: rgba(255,255,255,0.22); color: #fff; transition: background 200ms ease, color 200ms ease; }
  .sla-row[data-slot="0"] .sla-glyph { background: #fff; color: var(--warm-deep); }
  .sla-text { margin: 0; font-size: 12.5px; line-height: 1.35; color: #fff; letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; font-weight: 450; text-shadow: 0 1px 2px rgba(40,20,8,0.22); }
  .sla-row[data-slot="0"] .sla-text { font-weight: 500; }

  @media (prefers-reduced-motion: reduce) {
    .pa-thinking span, .pc-strip-spinner { animation: none; }
  }