/* ============================================================
   INOUORA AI WORKSPACE — STYLES
   Design system + all component/section styles.
   See :root above for spacing/radius/motion tokens (Phase 1).
============================================================ */

  :root{
    --bg-deep:#0a0b0d;
    --ink:#f2ede6;
    --ink-dim:#9a948b;
    --copper:#c97d4e;
    --copper-bright:#e3a06e;
    --hair:#24272b;
    --surface:#121417;
    --cyan:#5fe3c8;
    --violet:#8b7cff;
    --amber:#ffb454;
    --deep-ai:#050708;
    --scan-line: rgba(95,227,200,0.55);
    --bg-light:#f7f1e6;
    --ink-light:#241b12;
    --ink-dim-light:#7a6a54;
    --hair-light:rgba(36,27,18,0.12);
    --surface-light:#efe4cf;
  }

  /* ============================================================
     DESIGN SYSTEM — PHASE 1
     These tokens are the single source of truth for spacing, radius,
     motion timing and the reusable HUD/panel components. Every future
     phase should build on these rather than introducing new one-off
     values, so the whole site reads as one system.
  ============================================================ */
  :root{
    /* spacing scale (4px base) */
    --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
    --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
    --space-9:96px;

    /* radius scale — kept small and technical, never pill-shaped except
       the existing tab-selector pattern (that stays as-is, it's a control) */
    --radius-sm:3px; --radius-md:6px; --radius-lg:10px;

    /* motion — one easing curve used everywhere for a consistent,
       "precision instrument" feel rather than generic ease-in-out */
    --ease-tech: cubic-bezier(.16,.84,.44,1);
    --dur-fast:.2s; --dur-med:.5s; --dur-slow:.8s;

    /* hairline / glow used by HUD-style panels */
    --panel-border: rgba(95,227,200,0.16);
    --panel-glow: rgba(95,227,200,0.08);

    /* PHASE 10 — collaboration-section accent tokens. Default (root)
       value is the AI Workspace cyan register; .general overrides these
       to copper below so the same component markup/CSS renders in each
       tab's own register without duplicating rules. */
    --collab-accent: var(--cyan);
    --collab-track: rgba(95,227,200,0.25);
    --collab-accent-glow: rgba(95,227,200,0.35);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--bg-deep);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-weight:400;
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background: var(--copper); color:#0a0b0d; }
  a{ color:inherit; }
  img{max-width:100%;display:block;}
  button{ font:inherit; cursor:pointer; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  }

  /* ============================================================
     PHASE 7 — SKIP LINK
     Hidden until keyboard-focused; lets keyboard users bypass the
     header/tabs/util-row and land straight on the main content.
  ============================================================ */
  .skip-link{
    position:fixed; top:-60px; left:16px; z-index:200;
    background:var(--surface); color:var(--ink);
    border:1px solid var(--cyan); padding:12px 20px;
    font-family:'JetBrains Mono',monospace; font-size:.78rem; letter-spacing:.04em;
    text-decoration:none; border-radius:var(--radius-sm);
    transition:top .2s ease;
  }
  .skip-link:focus{ top:16px; }

  /* ============================================================
     PHASE 7 — FOCUS STATES
     A visible-but-on-brand focus ring (not the plain UA outline,
     not suppressed either): a soft glow in the system's own accent
     colour. Defaults to cyan (correct for the always-dark header,
     footer, and AI Workspace tab); the warm Home/General tab
     overrides it to copper so the ring stays legible against the
     light background instead of nearly disappearing (cyan on cream
     is ~1.4:1 contrast).
  ============================================================ */
  :focus{ outline:none; }
  :focus-visible{
    outline:2px solid var(--cyan);
    outline-offset:3px;
    border-radius:var(--radius-sm);
    box-shadow:0 0 0 4px rgba(95,227,200,0.18);
  }
  .general :focus-visible{
    outline-color:var(--copper-bright);
    box-shadow:0 0 0 4px rgba(163,103,63,0.16);
  }
  /* pill-shaped controls keep a rounder ring so it doesn't look boxy */
  .tab-btn:focus-visible, .contact-switch-btn:focus-visible, .audio-toggle:focus-visible,
  .assistant-toggle:focus-visible, .assistant-chip:focus-visible, .assistant-close:focus-visible,
  .assistant-send:focus-visible{
    border-radius:30px;
  }

  /* visually-hidden but still reachable by assistive tech — used by the
     assistant widget's text-input label */
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  /* ---------- background canvas ---------- */
  #bgcanvas{
    position:fixed; inset:0; width:100%; height:100%;
    z-index:0; pointer-events:none;
  }

  /* ---------- scroll progress ---------- */
  #progress{ position:fixed; top:0; left:0; height:2px; background:linear-gradient(90deg,var(--copper),var(--cyan),var(--violet)); z-index:80; width:0%; transition:background .5s ease; }

  /* =========================================================
     HEADER + TAB NAV  (Kenneth Cole–style persistent top nav:
     a slim announcement/util row, then a bold primary nav row
     with a sliding active-tab indicator)
  ==========================================================*/
  header{
    position:sticky; top:0; z-index:60;
    background:rgba(10,11,13,0.82);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--hair);
    transition:border-color .4s ease;
  }
  .util-row{
    display:flex; align-items:center; justify-content:center;
    gap:10px; padding:7px 20px;
    font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.16em;
    text-transform:uppercase; color:var(--ink-dim);
    border-bottom:1px solid var(--hair);
    background:rgba(255,255,255,0.015);
  }
  .util-row .sep{ opacity:.4; }
  .util-row .live{ color:var(--amber); display:inline-flex; align-items:center; gap:6px; }
  .util-row .live i{ width:5px;height:5px;border-radius:50%; background:var(--amber); box-shadow:0 0 6px var(--amber); animation:pulse 1.6s ease-in-out infinite; display:inline-block; }

  .nav-row{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px clamp(20px,5vw,56px); gap:24px;
  }
  .logo-mark{
    display:flex; align-items:center; gap:10px;
    font-family:'Fraunces',serif; font-weight:600; font-size:1.18rem;
    letter-spacing:.01em; white-space:nowrap;
    transition:font-family .35s ease;
  }
  .logo-mark .dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--copper);
    box-shadow:0 0 12px var(--copper);
    transition:background .5s ease, box-shadow .5s ease;
  }
  .logo-mark small{
    font-family:'JetBrains Mono',monospace;
    font-size:.6rem; letter-spacing:.14em; color:var(--ink-dim);
    font-weight:400; margin-left:2px;
  }

  .tabs{
    position:relative; display:grid; grid-template-columns:1fr 1fr; gap:4px;
    background:rgba(255,255,255,0.03); border:1px solid var(--hair);
    border-radius:40px; padding:4px;
  }
  .tab-indicator{
    position:absolute; top:4px; left:4px; height:calc(100% - 8px);
    border-radius:30px;
    background:linear-gradient(120deg,var(--copper),var(--copper-bright));
    transition:transform .5s cubic-bezier(.65,0,.35,1), width .5s cubic-bezier(.65,0,.35,1), background .5s ease;
    z-index:0; will-change:transform;
  }
  .tab-btn{
    position:relative; z-index:1; border:none; background:transparent;
    padding:11px 18px; border-radius:30px; font-size:.82rem; font-weight:500;
    letter-spacing:.03em; color:var(--ink-dim);
    transition:color .35s ease; white-space:nowrap; overflow:hidden;
    display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  }
  .tab-btn b{ font-weight:600; }
  .tab-btn .tag{
    font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.06em;
    padding:2px 6px; border-radius:10px; background:rgba(0,0,0,0.25); opacity:.7;
    flex-shrink:0;
  }
  .tab-btn.active{ color:#100a06; }
  .tabs.ai-active .tab-indicator{ background:linear-gradient(120deg,var(--cyan),var(--violet)); }
  .tabs.ai-active .tab-btn.active{ color:#00201a; }

  .nav-cta{
    font-family:'Inter',sans-serif; font-size:.8rem; font-weight:500;
    border:1px solid var(--hair); padding:10px 20px; border-radius:2px;
    text-decoration:none; transition:border-color .25s ease, color .25s ease, transform .25s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{ border-color:var(--copper); color:var(--copper-bright); transform:translateY(-2px); }
  body.ai-mode .nav-cta:hover{ border-color:var(--cyan); color:var(--cyan); }

  .subnav{
    display:flex; align-items:center; gap:clamp(14px,2.4vw,30px);
    padding:0 clamp(20px,5vw,56px) 14px; font-size:.78rem;
    overflow-x:auto; scrollbar-width:none;
  }
  .subnav::-webkit-scrollbar{ display:none; }
  .subnav a{
    text-decoration:none; color:var(--ink-dim); letter-spacing:.02em;
    position:relative; padding-bottom:3px; white-space:nowrap;
    transition:color .25s ease, opacity .3s ease, transform .3s ease;
  }
  .subnav a:hover{ color:var(--ink); }
  .subnav a::after{
    content:''; position:absolute; left:0; bottom:0; height:1px; width:0;
    background:var(--copper); transition:width .25s ease;
  }
  body.ai-mode .subnav a::after{ background:var(--cyan); }
  .subnav a:hover::after{ width:100%; }

  /* Phase 6: between the mobile breakpoint below and the point the
     desktop nav has room to breathe (~1100px), .logo-mark, .tabs and
     .nav-cta all sit in one unwrapped flex row and are free to
     flex-shrink. Because the tab labels are white-space:nowrap, shrinking
     the pill doesn't wrap that text — it silently overflows the pill's
     new, smaller box and visually spills into the logo next to it. Give
     the tab pill its own full-width row in this tablet range, the same
     pattern already used below 720px, so it always has room for its
     content instead of overlapping a neighbour. */
  @media (min-width:721px) and (max-width:1099px){
    .nav-row{ flex-wrap:wrap; row-gap:10px; }
    .tabs{ order:3; width:100%; }
  }

  @media (max-width:720px){
    /* ---- utility strip: collapses to one scrollable line instead of wrapping to 3-4 lines ---- */
    .util-row{
      justify-content:flex-start;
      flex-wrap:nowrap;
      white-space:nowrap;
      overflow-x:auto;
      -webkit-overflow-scrolling:touch;
      scrollbar-width:none;
      gap:8px;
      padding:6px 16px;
      font-size:.6rem;
      letter-spacing:.1em;
      max-height:34px;
      transition:max-height .3s ease, padding .3s ease, opacity .25s ease, border-color .3s ease;
    }
    .util-row::-webkit-scrollbar{ display:none; }
    .util-row .live{ flex-shrink:0; }

    /* header collapses the utility strip once the page is scrolled, reclaiming vertical space */
    header.scrolled .util-row{
      max-height:0; padding-top:0; padding-bottom:0; opacity:0;
      overflow:hidden; border-bottom-color:transparent;
    }
    header.scrolled .nav-row{ padding-top:10px; padding-bottom:10px; }

    .nav-row{
      flex-wrap:wrap; padding:12px 16px; gap:8px;
      transition:padding .3s ease;
    }
    .logo-mark{
      flex-wrap:wrap; white-space:normal; row-gap:2px;
      font-size:1.02rem; flex:1 1 auto; min-width:0;
    }
    .logo-mark #logotext{
      overflow-wrap:anywhere; line-height:1.25;
    }
    .logo-mark small{
      flex-basis:100%; margin-left:18px; display:block;
    }
    .tabs{ order:3; width:100%; margin-top:2px; }
    .tab-btn{ flex:1; justify-content:center; padding:12px 8px; font-size:.78rem; gap:6px; }
    .tab-btn .tag{ font-size:.54rem; padding:2px 5px; }
    .nav-cta{ display:none; }
    /* Phase 6: subnav links previously had no vertical padding, so the
       actual tappable area was just the text's line-height (~17px) —
       comfortably under a usable touch target. Padding grows the hit
       area without changing the link's visual size. */
    .subnav{ gap:16px; padding-bottom:4px; font-size:.74rem; }
    .subnav a{ padding:10px 0; }

    /* hero HUD strips: stack instead of wrapping mid-word on narrow screens */
    .hero-visual-label{
      flex-direction:column; align-items:flex-start; gap:4px; margin-top:28px; font-size:.9em;
    }
    .hero-visual .hud-topbar, .hero-visual .hud-botbar{
      flex-direction:column; align-items:flex-start; gap:2px;
    }
  }

  @media (max-width:400px){
    .util-row{ font-size:.56rem; letter-spacing:.08em; }
    .logo-mark{ font-size:.94rem; }
    .logo-mark small{ margin-left:16px; font-size:.56rem; }
    .tab-btn .tag{ display:none; }
  }

  /* ---------- tab switch transition overlay ---------- */
  #tabTransition{
    position:fixed; inset:0; z-index:90; pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--deep-ai); opacity:0;
    transition:opacity .35s ease;
  }
  #tabTransition.show{ opacity:1; pointer-events:all; }
  #tabTransition .grid-overlay{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(95,227,200,0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(95,227,200,0.07) 1px, transparent 1px);
    background-size:42px 42px;
    mask-image:radial-gradient(ellipse at center, black 20%, transparent 75%);
  }
  #tabTransition .scanline{
    position:absolute; left:0; right:0; height:2px; top:6%;
    background:linear-gradient(90deg, transparent, var(--scan-line), transparent);
    box-shadow:0 0 24px var(--scan-line);
    animation:sweepFast .7s ease-in-out infinite;
  }
  @keyframes sweepFast{ 0%{ top:6%; opacity:0; } 15%{opacity:1;} 50%{ top:92%; opacity:1;} 80%{opacity:0;} 100%{ top:92%; opacity:0; } }
  #tabTransition .ttext{
    position:relative; text-align:center; font-family:'JetBrains Mono',monospace;
    color:var(--cyan); letter-spacing:.26em; font-size:.78rem; text-transform:uppercase;
  }
  #tabTransition .ttext .big{
    display:block; font-family:'Fraunces',serif; font-style:italic; text-transform:none;
    letter-spacing:0; color:var(--ink); font-size:clamp(1.4rem,3vw,2.1rem); margin-top:12px;
  }

  section{ position:relative; z-index:1; }

  /* ---------- page container swap ---------- */
  .page{ display:none; }
  .page.active{ display:block; animation:pageIn .65s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes pageIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } }

  /* =========================================================
     GENERAL INOUORA — warm, serif, human
  ==========================================================*/
  .general{
    background:linear-gradient(180deg, var(--bg-light) 0%, #f0e6d2 100%);
    --bg-deep:var(--bg-light);
    --ink:var(--ink-light);
    --ink-dim:var(--ink-dim-light);
    --hair:var(--hair-light);
    --surface:var(--surface-light);
    /* PHASE 10 — copper register for the collaboration-section accents */
    --collab-accent: var(--copper-bright);
    --collab-track: rgba(143,89,52,0.25);
    --collab-accent-glow: rgba(163,103,63,0.35);
    /* Phase 7: darkened from #a3673f (4.09:1) to clear 4.5:1 AA for
       body-size copper text on the cream background (eyebrows, italic
       emphasis, section labels all read this variable). */
    --copper-bright:#8f5934;
    color:var(--ink-light);
  }

  .eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:.72rem;
    letter-spacing:.22em; text-transform:uppercase; color:var(--copper-bright);
    display:flex; align-items:center; gap:10px; margin-bottom:22px;
  }
  .eyebrow::before{ content:''; width:26px; height:1px; background:var(--copper); }

  .hero{
    min-height:84vh; display:flex; flex-direction:column; justify-content:center;
    padding:64px clamp(20px,6vw,80px) 48px; position:relative;
  }
  .hero h1{
    font-family:'Fraunces',serif; font-weight:500; font-optical-sizing:auto;
    font-size:clamp(2.6rem,6.4vw,5.6rem); line-height:1.02; letter-spacing:-.01em;
    margin:0 0 28px; max-width:16ch;
  }
  .hero h1 em{ font-style:italic; color:var(--copper-bright); font-weight:400; }
  .hero h1 .word{ display:inline-block; opacity:0; transform:translateY(28px) rotate(1deg); animation:wordIn .8s cubic-bezier(.2,.8,.2,1) forwards; }
  @keyframes wordIn{ to{ opacity:1; transform:translateY(0) rotate(0); } }
  .hero p.lead{
    font-size:clamp(1.02rem,1.6vw,1.28rem); color:var(--ink-dim);
    max-width:46ch; line-height:1.6; margin:0 0 40px;
  }
  .cta-row{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom:64px; }
  .btn{
    font-family:'Inter',sans-serif; font-size:.92rem; font-weight:500;
    padding:14px 28px; border-radius:2px; text-decoration:none;
    display:inline-flex; align-items:center; gap:8px; position:relative;
    transition:transform .2s ease, background .25s ease, color .25s ease, border-color .25s ease;
  }
  .btn-primary{ background:var(--copper); color:#100a06; }
  .btn-primary:hover{ background:var(--copper-bright); }
  .btn-ghost{ border:1px solid var(--hair); color:var(--ink); }
  .btn-ghost:hover{ border-color:var(--copper); color:var(--copper-bright); }
  .aiws .btn-primary{ background:var(--cyan); color:#00201a; }
  .aiws .btn-primary:hover{ background:#8ff2dd; }
  .aiws .btn-ghost{ border-color:rgba(95,227,200,0.25); color:#dff5ee; }
  .aiws .btn-ghost:hover{ border-color:var(--cyan); color:var(--cyan); }

  .stat-row{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:var(--hair); border:1px solid var(--hair); max-width:760px;
  }
  .stat-cell{ background:var(--bg-deep); padding:22px 20px; overflow:hidden; }
  .stat-cell b{
    display:block; font-family:'Fraunces',serif; font-size:2rem; font-weight:500;
    color:var(--ink); margin-bottom:4px;
  }
  .stat-cell span{ font-size:.74rem; color:var(--ink-dim); letter-spacing:.03em; }
  /* ---------- Phase 6: on narrow phones a forced 4-up grid squeezes each
     stat into a tall, cramped sliver with mid-word wraps. Two columns of
     wider cells reads far cleaner at ~360-430px. ---------- */
  @media (max-width:560px){
    .stat-row{ grid-template-columns:repeat(2,1fr); max-width:420px; }
    .stat-cell{ padding:18px 16px; }
    .stat-cell b{ font-size:1.6rem; }
  }

  .section-wrap{
    padding:110px clamp(20px,6vw,80px);
    border-top:1px solid var(--hair);
  }
  .section-head{ max-width:640px; margin-bottom:64px; }
  .section-head h2{
    font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.8rem,3.4vw,2.9rem);
    line-height:1.1; margin:0; letter-spacing:-.01em;
  }
  .section-head h2 em{ font-style:italic; color:var(--copper-bright); }

  .two-col{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  @media (max-width:860px){ .two-col{ grid-template-columns:1fr; } }
  .prose{ color:var(--ink-dim); line-height:1.75; font-size:1.02rem; max-width:52ch; }
  .prose strong{ color:var(--ink); font-weight:500; }
  blockquote.pull{
    font-family:'Fraunces',serif; font-style:italic; font-size:1.4rem; line-height:1.5;
    color:var(--ink); border-left:2px solid var(--copper); padding-left:28px; margin:0;
  }

  .card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
  @media (max-width:860px){ .card-grid{ grid-template-columns:1fr; } }
  .feat-card{ background:var(--bg-deep); padding:36px 30px; transition:background .3s ease, transform .35s ease; transform-style:preserve-3d; will-change:transform; }
  .feat-card:hover{ background:var(--surface); }
  /* Phase 7: was var(--copper) (2.86:1 on the cream bg — fails AA);
     --copper-bright is the AA-safe darkened text variant for this tab. */
  .feat-card .num{ font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--copper-bright); letter-spacing:.1em; }
  .feat-card h3{ font-family:'Fraunces',serif; font-weight:500; font-size:1.28rem; margin:14px 0 10px; }
  .feat-card p{ color:var(--ink-dim); font-size:.92rem; line-height:1.65; margin:0; }

  /* ---------- leadership grid — Phase 4: bordered/seamed panel grid
     (same structural language as .card-grid/.feat-card) instead of the
     plain gap-based card pattern, so Home reads as one system with
     the rest of the site rather than a generic team-bio block ---------- */
  .lead-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hair); border:1px solid var(--hair); }
  @media (max-width:860px){ .lead-grid{ grid-template-columns:1fr; } }
  .lead-card{
    position:relative; text-align:left; background:var(--bg-deep);
    padding:40px 32px 34px; overflow:hidden;
    transition:background .3s ease, transform .35s ease;
  }
  .lead-card:hover{ background:var(--surface); }
  .lead-card::before{
    content:''; position:absolute; inset:0 0 auto 0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(201,125,78,0.45), transparent);
    pointer-events:none;
  }
  .lead-card .lnum{
    display:block; font-family:'JetBrains Mono',monospace; font-size:.72rem;
    /* Phase 7: was var(--copper) (2.86:1 on the cream bg — fails AA) */
    color:var(--copper-bright); letter-spacing:.1em; margin-bottom:22px;
  }
  .avatar{
    width:56px; height:56px; border-radius:50%;
    /* Phase 7: dark gradient stop lightened from #7a4a2c (2.66:1 against
       the #100a06 initials) to #946038 (3.74:1) */
    background:linear-gradient(135deg,var(--copper),#946038);
    display:flex; align-items:center; justify-content:center;
    font-family:'Fraunces',serif; font-weight:600; color:#100a06; font-size:1.1rem;
    margin-bottom:18px; transition:transform .3s ease;
    overflow:hidden; /* clips the photo to the circle; falls back to the
                         gradient above if an <img> is absent or fails to load */
  }
  .avatar img{
    width:100%; height:100%; object-fit:cover; display:block;
  }
  .lead-card:hover .avatar{ transform:scale(1.08) rotate(-4deg); }
  .lead-card h4{ margin:0 0 8px; font-family:'Fraunces',serif; font-size:1.1rem; font-weight:500; }
  .lead-card .role{
    font-family:'JetBrains Mono',monospace; font-size:.66rem; color:var(--copper-bright);
    letter-spacing:.09em; text-transform:uppercase; margin-bottom:16px;
    display:inline-flex; padding:4px 10px; border-radius:20px;
    border:1px solid rgba(201,125,78,0.3); background:rgba(201,125,78,0.06);
  }
  .lead-card p{ color:var(--ink-dim); font-size:.88rem; line-height:1.65; margin:0; }

  /* ---------- about timeline — Phase 4: horizontal rail on desktop,
     vertical rail on mobile, reusing the pipeline rail/marker language
     from the Delivery Model section (Phase 3) so the "decade of
     delivery" story reads as a system component, not a text block ---------- */
  .timeline{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
  .timeline-track{ position:absolute; top:9px; left:0; right:0; height:1px; background:var(--hair); }
  @media (max-width:860px){
    .timeline{ grid-template-columns:1fr; gap:0; }
    .timeline-track{ display:none; }
  }
  .timeline-item{ position:relative; padding-top:34px; }
  .timeline-item .ti-marker{
    position:absolute; top:0; left:0; width:19px; height:19px; border-radius:50%;
    border:1px solid var(--copper); background:var(--bg-deep); z-index:1;
  }
  .timeline-item .ti-marker::after{
    content:''; position:absolute; inset:5px; border-radius:50%; background:var(--copper);
  }
  .timeline-item .ti-year{
    font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--copper-bright); margin-bottom:10px;
  }
  .timeline-item h4{ font-family:'Fraunces',serif; font-weight:500; font-size:1.1rem; margin:0 0 8px; color:var(--ink); }
  .timeline-item p{ color:var(--ink-dim); font-size:.86rem; line-height:1.6; margin:0; max-width:30ch; }
  @media (max-width:860px){
    .timeline-item{ padding:0 0 30px 34px; }
    .timeline-item::before{
      content:''; position:absolute; left:9px; top:24px; bottom:0; width:1px; background:var(--hair);
    }
    .timeline-item:last-child::before{ display:none; }
    .timeline-item:last-child{ padding-bottom:0; }
    .timeline-item p{ max-width:44ch; }
  }

  /* ---------- foundation panel — Phase 4: same panel/HUD treatment
     used for the AI Workspace side (hero-visual, bench-stat-panel),
     so the medical-billing foundation reads as part of one coherent
     system rather than plain prose next to it ---------- */
  .foundation-panel{ padding:28px clamp(22px,3vw,36px); align-self:stretch; }
  .foundation-stats{
    display:grid; grid-template-columns:1fr 1fr; gap:1px;
    background:rgba(95,227,200,0.14); border:1px solid rgba(95,227,200,0.14);
    margin-bottom:22px;
  }
  .foundation-stats .eng-cell{ background:rgba(10,11,13,0.7); padding:22px 18px; }
  .foundation-stats .eng-cell b{ font-size:1.8rem; color:var(--cyan); }
  .foundation-note{
    display:flex; align-items:flex-start; gap:10px; margin:0; padding-top:20px;
    border-top:1px solid rgba(95,227,200,0.12);
    font-size:.82rem; line-height:1.6; color:#93a8a2;
  }
  .foundation-note .status-dot{ flex-shrink:0; margin-top:5px; }

  /* ---------- QA discipline rail — Phase 9: same connected-rail,
     numbered-node structure as the AI Workspace .pipeline component
     (visual-system consistency), rebuilt on the warm/copper token set
     so it reads correctly on the Home tab's light background instead
     of borrowing the AI side's cyan-on-near-black treatment. Restates
     facts already in the prose above in scannable form — no new claims. */
  .qa-pipeline{ position:relative; display:flex; flex-direction:column; gap:0; margin-top:32px; }
  .qa-pipeline::before{
    content:''; position:absolute; left:13px; top:6px; bottom:6px; width:1px;
    background:var(--hair);
  }
  .qa-step{ position:relative; display:flex; gap:18px; padding:14px 0; }
  .qa-step .qn{
    position:relative; z-index:1; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%;
    border:1px solid var(--copper); background:var(--bg-deep);
    font-family:'JetBrains Mono',monospace; color:var(--copper-bright); font-size:.7rem;
  }
  .qa-step h5{ margin:0 0 4px; font-size:.95rem; font-weight:500; color:var(--ink); }
  .qa-step p{ margin:0; color:var(--ink-dim); font-size:.84rem; line-height:1.5; max-width:46ch; }

  /* ---------- Cathode partner block — Phase 9: gives the medical
     billing division the same "engagement structure" depth already
     used for the Crossmotive/TELUS chain on the AI Workspace side,
     rebuilt in copper so it stays inside the Home tab's register.
     .chain-node reuses .panel as-is (the dark instrument surface is a
     site-wide constant, used already by the Home tab's own hero-visual
     and foundation-panel) — only the arrow accent changes to copper. ---------- */
  .chain-diagram.copper .chain-arrow{ color:var(--copper-bright); }

  .partner-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
    background:var(--hair); border:1px solid var(--hair); margin-top:8px;
  }
  @media (max-width:640px){ .partner-grid{ grid-template-columns:1fr; } }
  .partner-grid .feat-card{ padding:30px 28px; }

  .partner-note{
    display:flex; align-items:flex-start; gap:10px; margin:28px 0 0; padding-top:22px;
    border-top:1px solid var(--hair);
    font-size:.82rem; line-height:1.6; color:var(--ink-dim); max-width:72ch;
  }
  .partner-note .status-dot{ flex-shrink:0; margin-top:5px; }

  .partner-label{
    margin:56px 0 20px; font-family:'JetBrains Mono',monospace; font-size:.66rem;
    letter-spacing:.14em; color:var(--copper-bright); text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
  }
  .chain-diagram.copper + .partner-label{ margin-top:40px; }

  /* ---------- Phase 9 final: claim-lifecycle hero visual — a "ledger"
     variant of .hero-visual/.panel. Deliberately NOT the dark cyan HUD
     surface the AI Workspace hero uses: warm parchment fill, copper
     hairline, ink-brown chrome text, so the Healthcare tab's signature
     visual reads as its own instrument (audit ledger) rather than a
     recoloured copy of the perception-system panel. ---------- */
  .claim-visual{
    background:linear-gradient(180deg, #fbf3e2, #f3e6cd);
    border:1px solid rgba(143,89,52,0.24);
    box-shadow:0 0 0 1px rgba(36,27,18,0.05), 0 24px 48px -26px rgba(36,27,18,0.32);
  }
  .claim-visual::before{ background:linear-gradient(90deg, transparent, rgba(143,89,52,0.4), transparent); }
  .claim-visual .hud-topbar{ color:var(--ink-dim-light); }
  .claim-visual .hud-botbar{ color:#8a7a63; }
  .claim-visual .hud-corners span{ border-color:var(--copper-bright); opacity:.6; }

  /* ---------- compliance stack — Phase 9 final: replaces the flat
     numbered .qa-pipeline rail with three physically layered, offset
     cards (real box-shadow depth + stagger, not a rail with dots) so
     the three QA principles carry visual weight of their own. Uses
     the existing .reveal system for the stagger — each card's
     transition-delay is set inline in the markup. ---------- */
  .compliance-stack{ position:relative; margin:36px 0 8px; max-width:620px; }
  .compliance-card{
    position:relative;
    background:linear-gradient(180deg, #fffdf9, var(--surface-light));
    border:1px solid var(--hair-light);
    border-left:3px solid var(--copper);
    border-radius:var(--radius-md);
    padding:26px 30px 24px;
    box-shadow:0 20px 38px -26px rgba(36,27,18,0.3), 0 1px 0 rgba(255,255,255,0.6) inset;
    transition:transform .45s var(--ease-tech), box-shadow .45s var(--ease-tech);
  }
  .compliance-card + .compliance-card{ margin-top:-16px; }
  .compliance-card:nth-child(1){ z-index:3; }
  .compliance-card:nth-child(2){ z-index:2; margin-left:24px; margin-right:-12px; }
  .compliance-card:nth-child(3){ z-index:1; margin-left:48px; margin-right:-24px; }
  .compliance-card:hover{ transform:translateY(-6px); box-shadow:0 28px 50px -24px rgba(36,27,18,0.36); }
  .cc-head{ display:flex; align-items:center; gap:14px; margin-bottom:10px; }
  .cc-num{
    flex-shrink:0; width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--copper); background:var(--bg-light);
    font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--copper-bright);
  }
  .compliance-card h5{ margin:0; font-family:'Fraunces',serif; font-size:1.12rem; font-weight:500; color:var(--ink); }
  .compliance-card p{ margin:0; color:var(--ink-dim); font-size:.88rem; line-height:1.65; max-width:48ch; }
  @media (max-width:760px){
    .compliance-card, .compliance-card:nth-child(2), .compliance-card:nth-child(3){ margin-left:0; margin-right:0; }
    .compliance-card + .compliance-card{ margin-top:14px; }
  }

  /* ---------- workforce network panel — Phase 9 final: the elaborate
     node-graph visualising the real 2,500+/30+ figures, with Cathode
     woven in as a distinct connected endpoint (real logo) rather than
     a separate block below. Panel chrome reuses the site's dark
     instrument-surface constant (.panel, already used for
     hero-visual/chain-node on this tab); the graph itself is drawn in
     copper/amber so it stays in this tab's register rather than
     reading as an AI-side cyan HUD. ---------- */
  .network-panel{ padding:var(--space-3); margin-top:56px; }
  .network-stage{ position:relative; }
  .network-panel canvas{
    width:100%; aspect-ratio:16/8; display:block;
    border-radius:calc(var(--radius-md) - 2px);
  }
  @media (max-width:760px){ .network-panel canvas{ aspect-ratio:9/12; } }

  .cathode-node{
    position:absolute; top:16%; left:88%; transform:translate(-50%,-50%);
    display:flex; flex-direction:column; align-items:center; gap:6px;
    pointer-events:none;
  }
  .cathode-card{
    background:#fbf6ea; border:1px solid rgba(201,125,78,0.4);
    border-radius:var(--radius-sm); padding:8px 14px;
    box-shadow:0 10px 22px -10px rgba(0,0,0,0.5);
  }
  .cathode-card img{ display:block; height:20px; width:auto; }
  .cathode-tag{
    font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.08em;
    text-transform:uppercase; color:var(--amber);
  }
  @media (max-width:760px){
    .cathode-node{ top:auto; bottom:6%; left:50%; }
    .cathode-card img{ height:18px; }
  }

  /* =========================================================
     AI WORKSPACE — dark, mono, cyan/violet
  ==========================================================*/
  .aiws{
    background:radial-gradient(ellipse at 50% 0%, #0a1210 0%, var(--deep-ai) 55%);
    color:#e7f5f0;
  }
  .aiws .eyebrow{ color:var(--cyan); }
  .aiws .eyebrow::before{ background:var(--cyan); }
  .aiws .section-head h2, .aiws .hero h1{ font-family:'JetBrains Mono',monospace; font-weight:500; letter-spacing:-.01em; }
  .aiws .hero h1{ font-size:clamp(2.1rem,5vw,4.2rem); text-transform:uppercase; line-height:1.08; }
  .aiws .hero h1 em{ font-style:normal; color:var(--cyan); }
  .aiws .prose{ color:#93a8a2; }
  .aiws .section-wrap{ border-top-color:rgba(95,227,200,0.12); }

  .live-badge{
    display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace;
    font-size:.7rem; letter-spacing:.1em; color:var(--amber); border:1px solid rgba(255,180,84,0.3);
    padding:6px 12px; border-radius:20px;
  }
  /* Phase 6: the full engagement string wraps to two lines inside the pill
     at phone widths, which reads awkwardly against the rounded shape —
     tighten tracking/size and let the pill grow taller with balanced
     padding rather than clipping or overflowing. */
  @media (max-width:480px){
    .live-badge{ font-size:.62rem; letter-spacing:.06em; padding:7px 12px; border-radius:14px; }
  }
  .live-badge .pulse{
    width:7px;height:7px;border-radius:50%; background:var(--amber);
    box-shadow:0 0 8px var(--amber); animation:pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(1.4);} }

  /* ---------- live object-detection canvas "video" ---------- */
  .hero-visual-label{ display:flex; justify-content:space-between; align-items:center; margin-top:40px; }
  .detect-stage{
    position:relative; border:1px solid rgba(95,227,200,0.25); background:#060a09;
    aspect-ratio:16/9; overflow:hidden; margin-top:10px; border-radius:3px;
    box-shadow:0 0 0 1px rgba(95,227,200,0.05), 0 30px 80px -30px rgba(95,227,200,0.25);
  }
  .detect-stage canvas{ width:100%; height:100%; display:block; }
  .detect-corners span{ position:absolute; width:18px; height:18px; border:2px solid var(--cyan); opacity:.8; z-index:2; }
  .detect-corners span:nth-child(1){ top:10px; left:10px; border-right:none; border-bottom:none; }
  .detect-corners span:nth-child(2){ top:10px; right:10px; border-left:none; border-bottom:none; }
  .detect-corners span:nth-child(3){ bottom:10px; left:10px; border-right:none; border-top:none; }
  .detect-corners span:nth-child(4){ bottom:10px; right:10px; border-left:none; border-top:none; }

  .detect-ticker{
    margin-top:1px; border:1px solid rgba(95,227,200,0.18); border-top:none;
    background:#04070a; overflow:hidden; padding:9px 0;
  }
  .ticker-track{
    display:flex; gap:36px; white-space:nowrap; width:max-content;
    animation:tickerScroll 22s linear infinite;
    font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.05em;
  }
  .ticker-track span{ color:#778c82; } /* Phase 7: was #5c7a72 (~4.0-4.3:1) */
  .ticker-track span b{ color:var(--cyan); font-weight:600; }
  .ticker-track span.v b{ color:var(--violet); }
  .ticker-track span.a b{ color:var(--amber); }
  @keyframes tickerScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  .module-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(95,227,200,0.14); border:1px solid rgba(95,227,200,0.14); }
  @media (max-width:860px){ .module-grid{ grid-template-columns:1fr; } }
  .module-card{ background:#070a0a; padding:34px 28px; position:relative; overflow:hidden; transition:background .3s ease, transform .35s ease; }
  .module-card:hover{ background:#0b1210; }
  .module-card .mnum{ font-family:'JetBrains Mono',monospace; font-size:.68rem; color:var(--cyan); letter-spacing:.1em; }
  .module-card h3{ font-family:'JetBrains Mono',monospace; font-weight:500; font-size:1.05rem; margin:14px 0 10px; text-transform:uppercase; letter-spacing:.02em; }
  .module-card p{ color:#93a8a2; font-size:.86rem; line-height:1.6; margin:0; }
  .module-card .conf{ margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:.72rem; color:var(--amber); opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease; }
  .module-card:hover .conf{ opacity:1; transform:translateY(0); }
  .module-card::after{
    content:''; position:absolute; left:0; right:0; bottom:0; height:2px; transform:scaleX(0); transform-origin:left;
    background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:transform .4s ease;
  }
  .module-card:hover::after{ transform:scaleX(1); }

  /* ---------- module-demo: small per-discipline canvas panel inside each
     module-card, reusing the detect-stage / hud-corners visual language
     at a compact scale (Phase 2) ---------- */
  .module-demo{
    position:relative; margin:20px 0 6px; border:1px solid rgba(95,227,200,0.18);
    background:#060a09; border-radius:3px; aspect-ratio:16/10; overflow:hidden;
  }
  .module-demo canvas{ width:100%; height:100%; display:block; }
  .module-demo-bar{
    position:absolute; left:8px; right:8px; bottom:6px; z-index:2; pointer-events:none;
    display:flex; justify-content:space-between; gap:8px;
    font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.05em;
    color:#6f8781; text-transform:uppercase;
  }
  .module-demo-bar span:first-child{ color:#93a8a2; }

  .bench-wrap{ display:grid; grid-template-columns:1.1fr .9fr; gap:64px; align-items:center; }
  @media (max-width:860px){ .bench-wrap{ grid-template-columns:1fr; } }
  .capacity-bar{ height:8px; background:rgba(95,227,200,0.1); border-radius:4px; overflow:hidden; margin:10px 0 4px; }
  .capacity-fill{ height:100%; width:0%; background:linear-gradient(90deg,var(--cyan),var(--violet)); transition:width 1.4s cubic-bezier(.2,.8,.2,1); }
  /* pipeline — Phase 3: connected rail with circular numbered nodes,
     replacing the plain stacked dividers for more visual weight */
  .pipeline{ position:relative; display:flex; flex-direction:column; gap:0; margin-top:36px; }
  .pipeline::before{
    content:''; position:absolute; left:13px; top:6px; bottom:6px; width:1px;
    background:rgba(95,227,200,0.18);
  }
  .pipe-step{ position:relative; display:flex; gap:18px; padding:16px 0; }
  .pipe-step .pn{
    position:relative; z-index:1; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%;
    border:1px solid rgba(95,227,200,0.4); background:#070a0a;
    font-family:'JetBrains Mono',monospace; color:var(--cyan); font-size:.7rem;
  }
  .pipe-step h5{ margin:0 0 4px; font-size:.95rem; font-weight:500; }
  .pipe-step p{ margin:0; color:#93a8a2; font-size:.84rem; line-height:1.5; }

  .pipeline-note{
    display:flex; align-items:center; gap:10px; margin-top:22px; padding-top:22px;
    border-top:1px solid rgba(95,227,200,0.12);
    font-size:.82rem; color:#93a8a2; line-height:1.5;
  }
  .pipeline-note .status-dot{ flex-shrink:0; }

  /* lidar canvas — now sits inside .lidar-panel (.panel treatment), so it
     no longer needs its own background/border, just the shared radius */
  .lidar-panel{ position:relative; padding:var(--space-3); }
  #lidarcanvas{ width:100%; aspect-ratio:1/1; display:block; border-radius:calc(var(--radius-md) - 2px); cursor:grab; touch-action:none; }
  #lidarcanvas:active{ cursor:grabbing; }

  /* bench readiness stat row — compact horizontal restatement of the
     real 50-person LiDAR bench facts (replaces the old 50-node grid,
     which just rendered as a solid block once fully lit). Reuses the
     .eng-cell cell pattern from the engagement panel for consistency. */
  .bench-stat-panel{ padding:28px clamp(20px,3.2vw,40px); margin-top:56px; }
  .bench-stat-row{
    display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
    background:rgba(95,227,200,0.12); border:1px solid rgba(95,227,200,0.12);
    margin-top:20px;
  }
  .bench-stat-row .eng-cell{ background:rgba(10,11,13,0.7); padding:20px 16px; }
  .bench-stat-row .eng-cell b{ font-size:1.5rem; color:var(--cyan); }
  @media (max-width:640px){ .bench-stat-row{ grid-template-columns:repeat(2,1fr); } }

  /* generic HUD top/bottom bars for any .panel — same treatment as the
     hero-visual's, generalised in Phase 3 so it's reusable site-wide */
  .panel-topbar, .panel-botbar{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    font-family:'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase;
  }
  .panel-topbar{ font-size:.66rem; color:#93a8a2; margin-bottom:18px; }
  .panel-botbar{ font-size:.63rem; color:#6f8781; margin-top:16px; }
  .panel-topbar b, .panel-botbar b{ color:var(--cyan); font-weight:600; }

  /* engagement chain diagram — Phase 3: visualises the real delivery
     chain (Inouora -> Crossmotive -> TELUS Int'l) stated in the prose */
  .chain-diagram{ display:flex; align-items:stretch; gap:0; margin:8px 0 44px; flex-wrap:wrap; }
  .chain-node{ flex:1 1 200px; padding:24px 20px; text-align:center; }
  .chain-node .cn-label{
    font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.1em;
    color:#6f8781; text-transform:uppercase; margin-bottom:10px;
  }
  .chain-node .cn-name{ font-family:'JetBrains Mono',monospace; font-size:.98rem; color:#e7f5f0; font-weight:500; line-height:1.4; }
  .chain-arrow{ display:flex; align-items:center; justify-content:center; padding:0 12px; color:var(--cyan); font-size:1.1rem; flex:0 0 auto; opacity:.7; }
  @media (max-width:760px){
    .chain-diagram{ flex-direction:column; }
    /* Phase 6 fix: flex-basis:200px on .chain-node was written for the
       horizontal (row) layout, sizing each node's width. Once the diagram
       switches to a column on mobile, that same 200px basis is read as a
       min-height instead, stretching every node to a 200px-tall block with
       mostly empty space below its two lines of text. Reset the basis so
       nodes size to their content in the stacked layout. */
    .chain-node{ flex:1 1 auto; padding:18px 20px; }
    .chain-arrow{ transform:rotate(90deg); padding:4px 0; }
  }

  .engagement-panel{
    border:1px solid rgba(255,180,84,0.25); background:linear-gradient(135deg, rgba(255,180,84,0.05), transparent);
    padding:40px clamp(24px,4vw,48px); display:grid; grid-template-columns:repeat(3,1fr); gap:28px 24px;
  }
  @media (max-width:760px){ .engagement-panel{ grid-template-columns:1fr 1fr; } }
  .eng-cell b{ display:block; font-family:'JetBrains Mono',monospace; font-size:.95rem; color:#e7f5f0; margin-bottom:6px; }
  .eng-cell span{ font-size:.72rem; color:#6b8880; letter-spacing:.06em; text-transform:uppercase; }

  .audio-toggle{
    display:inline-flex; align-items:center; gap:14px; margin-top:48px;
    border:1px solid rgba(95,227,200,0.2); padding:12px 18px; border-radius:30px;
    cursor:pointer; background:rgba(95,227,200,0.03); user-select:none;
    transition:border-color .3s ease;
  }
  .audio-toggle:hover{ border-color:var(--cyan); }
  .audio-toggle .wave{ display:flex; align-items:center; gap:2px; height:16px; }
  .audio-toggle .wave i{ width:2px; background:var(--cyan); display:block; border-radius:1px; height:4px; transition:height .12s ease; }
  .audio-toggle span.lbl{ font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.08em; color:#93a8a2; }

  /* =========================================================
     CONTACT FLOW — Phase 5: structured contact block that splits
     into two real next-steps (prospective client vs candidate).
     Only channels already published elsewhere on the site are
     used here — no invented emails, numbers, or form backends.
     The pill switch reuses the tabs.tab-btn treatment (the one
     pill-radius exception noted in the Phase 1 design tokens).
  ==========================================================*/
  .contact-flow{ margin-bottom:56px; }
  .contact-switch{
    display:inline-flex; gap:4px; background:rgba(255,255,255,0.03);
    border:1px solid var(--hair); border-radius:40px; padding:4px; margin-bottom:28px;
  }
  .contact-switch-btn{
    border:none; background:transparent; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:.82rem; font-weight:500;
    letter-spacing:.02em; color:var(--ink-dim); padding:11px 22px;
    border-radius:30px; transition:color .3s ease, background .3s ease;
    white-space:nowrap;
  }
  .contact-switch-btn.active{
    background:linear-gradient(120deg,var(--copper),var(--copper-bright)); color:#100a06;
  }
  body.ai-mode .contact-switch-btn.active{
    background:linear-gradient(120deg,var(--cyan),var(--violet)); color:#00201a;
  }
  .contact-path{ padding:clamp(26px,4vw,44px); }
  .contact-path-copy{ color:#93a8a2; font-size:.95rem; line-height:1.75; max-width:58ch; margin:0 0 28px; }
  .contact-path-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:24px; }
  .contact-path-note{
    display:flex; align-items:flex-start; gap:10px; margin:0; padding-top:20px;
    border-top:1px solid rgba(95,227,200,0.12);
    font-size:.8rem; line-height:1.6; color:#6f8781; max-width:58ch;
  }
  .contact-path-note .status-dot{ flex-shrink:0; margin-top:5px; }
  .contact-path .btn-primary{ background:var(--copper); color:#100a06; }
  .contact-path .btn-primary:hover{ background:var(--copper-bright); }
  body.ai-mode .contact-path .btn-primary{ background:var(--cyan); color:#00201a; }
  body.ai-mode .contact-path .btn-primary:hover{ background:#8ff2dd; }
  @media (max-width:520px){
    .contact-switch{ display:flex; }
    /* Phase 6: "Candidate / Job Seeker" is long enough that, once it's
       squeezed into a flex:1 slot on very narrow phones, nowrap text
       overflows the button's shrunk box by a couple of px — the one spot
       on the page that could trigger a horizontal scrollbar. Letting the
       label wrap to two lines keeps it inside its slot at any width. */
    .contact-switch-btn{ flex:1; text-align:center; padding:11px 10px; white-space:normal; line-height:1.3; }
  }

  /* =========================================================
     FOOTER
  ==========================================================*/
  footer{
    background:#050607; padding:80px clamp(20px,6vw,80px) 40px; border-top:1px solid rgba(95,227,200,0.1);
    position:relative; z-index:1;
  }
  .foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; margin-bottom:64px; }
  @media (max-width:760px){ .foot-grid{ grid-template-columns:1fr; } }
  .foot-grid h5{ font-family:'JetBrains Mono',monospace; font-size:.7rem; letter-spacing:.14em; color:var(--cyan); text-transform:uppercase; margin:0 0 18px; }
  .foot-grid p, .foot-grid a{ color:#93a8a2; font-size:.88rem; line-height:1.9; text-decoration:none; display:block; }
  .foot-grid a:hover{ color:var(--cyan); }
  .foot-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:28px; border-top:1px solid rgba(95,227,200,0.08); font-size:.76rem; color:#778c82; font-family:'JetBrains Mono',monospace; } /* Phase 7: was #5c7a72 */
  .foot-bottom a{ color:#93a8a2; text-decoration:none; }
  .foot-bottom a:hover{ color:var(--cyan); }

  .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }

  /* ============================================================
     HUD / PANEL COMPONENTS — PHASE 1
     Reusable building blocks for every future "technical" surface
     (hero, data lab, command center, industries, configurator).
     Keep new sections built FROM these rather than one-off styles.
  ============================================================ */

  /* .panel — the base technical-surface treatment: hairline border,
     near-black translucent fill, faint top highlight. Used for any
     card/module that should read as an instrument, not a content card. */
  .panel{
    position:relative;
    background:linear-gradient(180deg, rgba(18,20,23,0.9), rgba(10,11,13,0.94));
    border:1px solid var(--panel-border);
    border-radius:var(--radius-md);
    box-shadow:0 0 0 1px rgba(0,0,0,0.4), 0 24px 48px -24px rgba(0,0,0,0.6);
  }
  .panel::before{
    content:''; position:absolute; inset:0 0 auto 0; height:1px;
    background:linear-gradient(90deg, transparent, rgba(95,227,200,0.35), transparent);
    pointer-events:none;
  }

  /* .hud-corners — four bracket marks framing a technical viewport.
     Generalised from the object-detection frame so any panel can use it. */
  .hud-corners{ position:absolute; inset:0; pointer-events:none; z-index:2; }
  .hud-corners span{ position:absolute; width:16px; height:16px; border:2px solid var(--cyan); opacity:.75; }
  .hud-corners span:nth-child(1){ top:10px; left:10px; border-right:none; border-bottom:none; }
  .hud-corners span:nth-child(2){ top:10px; right:10px; border-left:none; border-bottom:none; }
  .hud-corners span:nth-child(3){ bottom:10px; left:10px; border-right:none; border-top:none; }
  .hud-corners span:nth-child(4){ bottom:10px; right:10px; border-left:none; border-top:none; }

  /* .hud-label — small monospace status/metadata pill, e.g. "PERSON · 0.97".
     Semantic colour: cyan = detection/system, violet = AI/secondary process,
     amber = attention. Reused across detect-scene, hero, and future phases. */
  .hud-label{
    font-family:'JetBrains Mono',monospace; font-size:.68rem; letter-spacing:.06em;
    color:#93a8a2; display:inline-flex; align-items:center; gap:6px;
  }
  .hud-label b{ color:var(--cyan); font-weight:600; }
  .hud-label.violet b{ color:var(--violet); }
  .hud-label.amber b{ color:var(--amber); }

  /* .status-dot — small pulsing dot for "system status" style UI chrome.
     Purely an interface signal, not a live business metric. */
  .status-dot{
    width:6px; height:6px; border-radius:50%; background:var(--cyan);
    box-shadow:0 0 0 0 rgba(95,227,200,0.6);
    animation:statusPulse 2.4s var(--ease-tech) infinite;
    display:inline-block;
  }
  @keyframes statusPulse{
    0%{ box-shadow:0 0 0 0 rgba(95,227,200,0.5); }
    70%{ box-shadow:0 0 0 6px rgba(95,227,200,0); }
    100%{ box-shadow:0 0 0 0 rgba(95,227,200,0); }
  }

  /* faint technical grid, used sparingly behind HUD panels only —
     not global, so it stays a restrained accent rather than wallpaper */
  .hud-grid-bg{
    background-image:
      linear-gradient(rgba(95,227,200,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(95,227,200,0.05) 1px, transparent 1px);
    background-size:28px 28px;
  }

  /* ============================================================
     HERO — PHASE 1
  ============================================================ */
  .hero-shell{
    position:relative; z-index:1;
    display:grid; grid-template-columns:1.05fr 1fr; gap:var(--space-8);
    align-items:center;
    padding:clamp(48px,7vw,96px) clamp(20px,6vw,80px) clamp(56px,8vw,96px);
    min-height:calc(100vh - 148px);
  }
  @media (max-width:980px){
    .hero-shell{ grid-template-columns:1fr; min-height:auto; padding-top:40px; gap:var(--space-6); }
  }

  /* Phase 7: .hero-copy only ever renders on the light Home/General tab
     (the AI Workspace hero uses the separate .hero/.aiws rules below),
     but these four rules were hardcoded to dark-mode colours — cyan
     eyebrow/em text and light-gray lead/tagline text all landed under
     1.7:1 contrast against the cream background (verified by render:
     the "data layer" emphasis word and the whole lead paragraph were
     essentially invisible). Switched to the warm copper/ink tokens the
     rest of the Home tab already uses, which also fixes the accidental
     cyan (AI Workspace's colour) bleeding into the Home tab's palette. */
  .hero-copy .eyebrow{
    font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.16em;
    color:var(--copper-bright); text-transform:uppercase; margin-bottom:var(--space-4);
    display:flex; align-items:center; gap:8px;
  }
  .hero-copy h1{
    font-family:'Fraunces',serif; font-weight:600; font-size:clamp(2.4rem,5.4vw,4.4rem);
    line-height:1.04; letter-spacing:-.01em; margin:0 0 var(--space-5); color:var(--ink);
  }
  .hero-copy h1 em{ font-style:italic; color:var(--copper-bright); font-weight:500; }
  .hero-copy .lead{
    font-size:clamp(1rem,1.6vw,1.18rem); line-height:1.7; color:var(--ink-dim);
    max-width:52ch; margin:0 0 var(--space-6);
  }
  .hero-copy .tagline{
    font-size:.86rem; color:var(--ink-dim); margin:0 0 var(--space-6); line-height:1.6; max-width:48ch; opacity:.82;
  }
  .hero-cta-row{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-bottom:var(--space-7); }

  .hero-visual{
    position:relative;
    aspect-ratio:4/3.1;
    overflow:hidden;
    padding:var(--space-2);
  }
  .hero-visual canvas{ width:100%; height:100%; display:block; border-radius:calc(var(--radius-md) - 2px); }
  .hero-visual .hud-topbar{
    position:absolute; top:var(--space-3); left:var(--space-3); right:var(--space-3);
    display:flex; justify-content:space-between; align-items:center; z-index:3;
    font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.1em; color:#93a8a2;
    text-transform:uppercase;
  }
  .hero-visual .hud-botbar{
    position:absolute; bottom:var(--space-3); left:var(--space-3); right:var(--space-3);
    display:flex; justify-content:space-between; align-items:center; z-index:3;
    font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.04em; color:#6f8781;
  }
  @media (max-width:980px){
    .hero-visual{ aspect-ratio:16/11; }
  }
  @media (max-width:480px){
    .hero-visual .hud-topbar, .hero-visual .hud-botbar{ font-size:.58rem; }
  }

  /* ============================================================
     PHASE 10 — CLIENT / INSTITUTION / JOB-SEEKER COLLABORATION
     Exclusive, animated three-panel section appended to the bottom
     of both tabs, before the footer. Built almost entirely from
     existing components: .panel/.hud-corners/.panel-topbar chrome,
     and the Home tab's unused-since-Phase-9 .qa-pipeline rail /
     the AI tab's .pipeline rail for the institution panel (each
     already in that tab's own register — no new colours invented
     there). Two genuinely new pieces: the "signal" traveling-dot
     line for the client panel, and the sequential-highlight
     stepper for the job-seeker panel, since nothing already on the
     site covered either rhythm. Colour comes from the --collab-*
     tokens (cyan by default, copper inside .general) so one set of
     rules serves both tabs' registers automatically; the Home tab's
     panel surfaces additionally get the light-parchment ".copper"
     re-theme, following the exact precedent already set by
     .claim-visual / .chain-diagram.copper on this tab.
  ============================================================ */

  .collab-featured{ padding:clamp(28px,4vw,44px); margin-bottom:28px; }
  .collab-featured-body{
    display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(28px,4vw,48px); align-items:center;
  }
  @media (max-width:760px){ .collab-featured-body{ grid-template-columns:1fr; } }
  .collab-h3{
    font-family:'Fraunces',serif; font-weight:500; font-size:clamp(1.3rem,2.2vw,1.7rem);
    margin:0 0 14px; color:#f2ede6; line-height:1.2;
  }
  .aiws .collab-h3{ font-family:'JetBrains Mono',monospace; font-weight:500; text-transform:uppercase; font-size:clamp(1.02rem,1.7vw,1.22rem); letter-spacing:.01em; }
  .collab-copy{ color:#93a8a2; font-size:.94rem; line-height:1.7; margin:0 0 4px; max-width:52ch; }

  /* ---- client / partnership: a live "signal" sweeping from
     enquiry to Inouora's Business Development desk ---- */
  .collab-signal{ position:relative; padding:28px 14px; display:flex; align-items:center; justify-content:space-between; }
  .collab-signal .sig-node{
    font-family:'JetBrains Mono',monospace; font-size:.64rem; letter-spacing:.08em; text-transform:uppercase;
    color:#93a8a2; text-align:center; z-index:2; flex-shrink:0; width:70px;
  }
  .collab-signal .sig-track{ position:relative; flex:1; height:1px; background:var(--collab-track); margin:0 12px; }
  .collab-signal .sig-dot{
    position:absolute; top:50%; left:0%; width:8px; height:8px; margin-top:-4px; border-radius:50%;
    background:var(--collab-accent); box-shadow:0 0 10px var(--collab-accent);
    animation:sigTravel 2.6s var(--ease-tech) infinite;
  }
  @keyframes sigTravel{ 0%{ left:0%; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ left:100%; opacity:0; } }

  .collab-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
  @media (max-width:860px){ .collab-grid-2{ grid-template-columns:1fr; } }
  .collab-panel{ padding:clamp(26px,3.4vw,36px); }
  /* the two side-by-side panels (Institution vs Job Seeker) can hold a
     different number of timeline steps, which used to leave their "Email
     ..." buttons at different heights even though the grid already
     stretches both panels to equal height. Turning the panel into a flex
     column and letting the action row's margin absorb the leftover space
     pins both buttons to the same baseline regardless of content length. */
  .collab-grid-2 .collab-panel{ display:flex; flex-direction:column; }
  .collab-grid-2 .collab-panel .contact-path-actions{ margin-top:auto; padding-top:22px; margin-bottom:0; }
  .collab-panel .collab-copy{ margin-bottom:6px; }
  .collab-panel .pipeline, .collab-panel .qa-pipeline{ margin-top:6px; }

  /* ---- institution / academic: a small pulse traveling down the
     existing pipeline/qa-pipeline rail (Phase 3 / Phase 4 rail
     components, reused exactly as-is — only this dot is new) ---- */
  .chain-pulse-dot{
    position:absolute; left:9px; top:6px; width:8px; height:8px; border-radius:50%;
    background:var(--collab-accent); box-shadow:0 0 10px var(--collab-accent);
    animation:chainTravel 3.2s var(--ease-tech) infinite; z-index:1;
  }
  @keyframes chainTravel{ 0%{ top:6px; opacity:0; } 8%{ opacity:1; } 92%{ opacity:1; } 100%{ top:calc(100% - 14px); opacity:0; } }

  /* ---- job seeker: sequential-highlight stepper (Apply -> Review
     -> Interview -> Onboard). New component — nothing existing on
     the site covers a "scan through discrete stages" rhythm. ---- */
  .collab-stepper-row{ display:flex; align-items:center; gap:0; margin:26px 0 6px; flex-wrap:wrap; }
  .cs-step{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; width:78px; flex-shrink:0; }
  .cs-step .cs-num{
    width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--collab-track); font-family:'JetBrains Mono',monospace; font-size:.7rem;
    color:var(--collab-accent); background:rgba(0,0,0,0.18);
    animation:stepPulse 3.6s ease-in-out infinite;
  }
  .cs-step .cs-label{ font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:#93a8a2; }
  .cs-connector{ flex:1 1 16px; height:1px; background:var(--collab-track); min-width:14px; }
  @keyframes stepPulse{
    0%,88%,100%{ box-shadow:0 0 0 0 var(--collab-accent-glow); border-color:var(--collab-track); }
    8%{ box-shadow:0 0 0 6px var(--collab-accent-glow); border-color:var(--collab-accent); }
  }

  /* ---- Healthcare tab register: light/copper "ledger" re-theme of
     the panel surface — same precedent as .claim-visual (Phase 9)
     and .chain-diagram.copper (Phase 9) on this tab ---- */
  .collab-panel.copper, .collab-featured.copper{
    background:linear-gradient(180deg, #fbf3e2, #f3e6cd);
    border:1px solid rgba(143,89,52,0.24);
    box-shadow:0 0 0 1px rgba(36,27,18,0.05), 0 24px 48px -26px rgba(36,27,18,0.32);
  }
  .collab-panel.copper::before, .collab-featured.copper::before{ background:linear-gradient(90deg, transparent, rgba(143,89,52,0.4), transparent); }
  .collab-panel.copper .panel-topbar, .collab-featured.copper .panel-topbar{ color:var(--ink-dim-light); }
  .collab-panel.copper .panel-botbar, .collab-featured.copper .panel-botbar{ color:#8a7a63; }
  .collab-panel.copper .panel-topbar b, .collab-featured.copper .panel-topbar b{ color:var(--copper-bright); }
  .collab-panel.copper .hud-corners span, .collab-featured.copper .hud-corners span{ border-color:var(--copper-bright); opacity:.6; }
  .collab-featured.copper .collab-h3{ color:var(--ink-light); }
  .collab-panel.copper .collab-copy, .collab-featured.copper .collab-copy{ color:var(--ink-dim-light); }
  .collab-featured.copper .sig-node, .collab-panel.copper .cs-label{ color:var(--ink-dim-light); }

  /* status-dot inside the copper-register panels needs the copper
     pulse ring, not the site-default cyan one */
  .collab-panel.copper .status-dot, .collab-featured.copper .status-dot{
    background:var(--copper-bright); box-shadow:0 0 0 0 rgba(163,103,63,0.6);
    animation:statusPulseCopper 2.4s var(--ease-tech) infinite;
  }
  @keyframes statusPulseCopper{
    0%{ box-shadow:0 0 0 0 rgba(163,103,63,0.5); } 70%{ box-shadow:0 0 0 6px rgba(163,103,63,0); } 100%{ box-shadow:0 0 0 0 rgba(163,103,63,0); }
  }

  @media (max-width:520px){
    .collab-signal{ padding:22px 6px; }
    .collab-signal .sig-node{ width:54px; font-size:.56rem; }
    /* Phase 10: at phone widths the connector wraps onto its own
       orphaned line once the 4 steps overflow one row. A tidy 2x2
       grid (no connector lines) reads far cleaner than a wrapped
       row here — same steps, same stagger, different arrangement. */
    .collab-stepper-row{ display:grid; grid-template-columns:1fr 1fr; gap:20px 14px; }
    .cs-connector{ display:none; }
    .cs-step{ width:auto; flex-direction:row; justify-content:flex-start; gap:10px; text-align:left; }
  }

  /* ============================================================
     PHASE 11 — SITE ASSISTANT WIDGET
     A floating, curated-Q&A helper — shared markup, present on both
     tabs (lives outside .general/.aiws so it isn't duplicated per
     tab). Register (copper vs cyan) follows the same body.ai-mode
     override pattern already used for the shared footer contact
     block (.contact-switch-btn.active, .contact-path .btn-primary)
     rather than inventing a new theming mechanism. Built from
     existing chrome: .panel, .status-dot, .panel-topbar/.panel-botbar,
     .btn — no new colours, no new fonts.
  ============================================================ */
  .assistant-widget{
    position:fixed; right:clamp(14px,3vw,28px); bottom:clamp(14px,3vw,28px);
    z-index:75; /* above header/progress (60/80... see note below), below
                   the full-screen tab-transition overlay (90) so a tab
                   switch still visually sweeps over it, below the
                   skip-link (200) which only ever shows top-left */
  }
  /* the progress bar itself sits at 80 but is a 2px sliver pinned to
     the very top of the viewport, so it never actually overlaps a
     bottom-right widget in practice */

  .assistant-toggle{
    display:inline-flex; align-items:center; gap:10px;
    font-family:'JetBrains Mono',monospace; font-size:.78rem; letter-spacing:.05em;
    color:#100a06; background:linear-gradient(120deg,var(--copper),var(--copper-bright));
    border:none; border-radius:30px; padding:8px 22px 8px 8px; cursor:pointer;
    box-shadow:0 12px 28px -10px rgba(0,0,0,0.5);
    transition:transform var(--dur-fast) var(--ease-tech), box-shadow var(--dur-fast) var(--ease-tech);
  }
  .assistant-toggle:hover{ transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(0,0,0,0.55); }
  .assistant-toggle-avatar{
    width:44px; height:44px; border-radius:50%; object-fit:cover; flex-shrink:0;
    box-shadow:0 0 0 2px rgba(16,10,6,0.15);
  }
  body.ai-mode .assistant-toggle{
    color:#00201a; background:linear-gradient(120deg,var(--cyan),var(--violet));
  }
  body.ai-mode .assistant-toggle-avatar{ box-shadow:0 0 0 2px rgba(0,32,26,0.15); }

  .assistant-panel{
    position:absolute; right:0; bottom:calc(100% + 14px);
    width:clamp(320px,92vw,392px); max-height:min(78vh,640px);
    display:flex; flex-direction:column; padding:22px;
    overflow-y:auto; /* safety net: if a persona's quick-question set plus
       a long thread ever exceeds max-height, the panel scrolls as a whole
       instead of letting content spill past its visual edge */
    background:linear-gradient(180deg, rgba(18,20,23,0.97), rgba(10,11,13,0.98));
    border:1px solid var(--panel-border); border-radius:var(--radius-lg);
    box-shadow:0 0 0 1px rgba(0,0,0,0.4), 0 32px 64px -28px rgba(0,0,0,0.7);
    transform-origin:bottom right;
    transform:translateY(10px) scale(.97); opacity:0; pointer-events:none;
    transition:transform var(--dur-med) var(--ease-tech), opacity var(--dur-med) var(--ease-tech);
  }
  .assistant-panel::before{
    content:''; position:absolute; inset:0 0 auto 0; height:1px; border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    background:linear-gradient(90deg, transparent, rgba(95,227,200,0.35), transparent); pointer-events:none;
  }
  .assistant-panel.open{ transform:translateY(0) scale(1); opacity:1; pointer-events:auto; }
  /* the panel's own `display:flex` (needed for its internal layout while
     open) would otherwise override the browser's default [hidden]{display:
     none} UA rule, since an author-specified `display` always wins over a
     UA-stylesheet default regardless of selector specificity — so it's
     restated explicitly here for whenever the hidden attribute is set */
  .assistant-panel[hidden]{ display:none; }
  /* home/general register: same copper "ledger" re-theme as the Phase 10
     collab panels, applied here via body state since this markup isn't
     duplicated per tab */
  body:not(.ai-mode) .assistant-panel{
    background:linear-gradient(180deg, #fbf3e2, #f3e6cd);
    border:1px solid rgba(143,89,52,0.24);
    box-shadow:0 0 0 1px rgba(36,27,18,0.05), 0 32px 64px -28px rgba(36,27,18,0.38);
  }
  body:not(.ai-mode) .assistant-panel::before{ background:linear-gradient(90deg, transparent, rgba(143,89,52,0.4), transparent); }

  .assistant-panel-topbar{
    display:flex; align-items:flex-start; justify-content:space-between;
    margin-bottom:12px; flex-shrink:0;
  }
  .assistant-identity{ display:flex; flex-direction:column; align-items:center; gap:6px; }
  .assistant-avatar{
    width:72px; height:72px; border-radius:50%; object-fit:cover;
    box-shadow:0 0 0 3px rgba(95,227,200,0.4), 0 0 22px -3px rgba(95,227,200,0.55);
  }
  body:not(.ai-mode) .assistant-avatar{
    box-shadow:0 0 0 3px rgba(143,89,52,0.4), 0 0 22px -3px rgba(143,89,52,0.5);
  }
  .assistant-name{
    font-family:'JetBrains Mono',monospace; font-size:.7rem; font-weight:600; letter-spacing:.05em;
    color:var(--ink); text-transform:uppercase; text-align:center; max-width:200px; line-height:1.4;
  }
  body:not(.ai-mode) .assistant-name{ color:var(--ink-light); }
  .assistant-close{
    width:26px; height:26px; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--hair); background:transparent; color:var(--ink-dim);
    border-radius:50%; font-size:1rem; line-height:1; cursor:pointer;
    transition:border-color .25s ease, color .25s ease;
  }
  .assistant-close:hover{ border-color:var(--cyan); color:var(--cyan); }
  body:not(.ai-mode) .assistant-close:hover{ border-color:var(--copper-bright); color:var(--copper-bright); }

  .assistant-disclaimer{
    font-size:.68rem; line-height:1.45; color:#6f8781; margin:0 0 10px; flex-shrink:0;
  }
  body:not(.ai-mode) .assistant-disclaimer{ color:#8a7a63; }

  .assistant-thread{
    flex:1 1 auto; overflow-y:auto; margin:0 -6px 12px; padding:0 6px 4px;
    display:flex; flex-direction:column; gap:10px; min-height:110px;
  }
  .assistant-msg{
    max-width:88%; padding:11px 14px; border-radius:var(--radius-md);
    font-size:.85rem; line-height:1.55;
  }
  .assistant-msg p{ margin:0 0 8px; }
  .assistant-msg p:last-child{ margin-bottom:0; }
  .assistant-msg.bot{
    align-self:flex-start; background:rgba(95,227,200,0.07);
    border:1px solid rgba(95,227,200,0.16); color:var(--ink);
  }
  .assistant-msg.user{
    align-self:flex-end; background:rgba(95,227,200,0.16); color:var(--ink);
    border:1px solid rgba(95,227,200,0.22);
  }
  body:not(.ai-mode) .assistant-msg.bot{
    background:rgba(143,89,52,0.08); border-color:rgba(143,89,52,0.22); color:var(--ink-light);
  }
  body:not(.ai-mode) .assistant-msg.user{
    background:rgba(143,89,52,0.18); border-color:rgba(143,89,52,0.26); color:var(--ink-light);
  }
  .assistant-msg .assistant-link{
    display:inline-flex; align-items:center; gap:6px; margin-top:2px;
    font-family:'JetBrains Mono',monospace; font-size:.72rem; letter-spacing:.03em;
    color:var(--cyan); text-decoration:none; border-bottom:1px solid rgba(95,227,200,0.35);
  }
  .assistant-msg .assistant-link:hover{ border-color:var(--cyan); }
  body:not(.ai-mode) .assistant-msg .assistant-link{ color:var(--copper-bright); border-color:rgba(143,89,52,0.4); }

  /* "considering" typing indicator — three status-dot-style pulses,
     offset in time. Neutralised to a static state under
     prefers-reduced-motion by the global rule at the top of this file. */
  .assistant-typing{ display:inline-flex; gap:5px; padding:4px 2px; }
  .assistant-typing i{
    width:6px; height:6px; border-radius:50%; background:var(--cyan);
    animation:assistantTyping 1.1s ease-in-out infinite;
  }
  body:not(.ai-mode) .assistant-typing i{ background:var(--copper-bright); }
  .assistant-typing i:nth-child(2){ animation-delay:.15s; }
  .assistant-typing i:nth-child(3){ animation-delay:.3s; }
  @keyframes assistantTyping{ 0%,60%,100%{ opacity:.25; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } }

  .assistant-personas{ flex-shrink:0; margin-bottom:8px; }
  .assistant-personas-label{
    display:block; font-family:'JetBrains Mono',monospace; font-size:.62rem; letter-spacing:.1em;
    text-transform:uppercase; color:#6f8781; margin-bottom:6px;
  }
  body:not(.ai-mode) .assistant-personas-label{ color:#8a7a63; }
  /* once a persona is chosen the full chip row collapses to this one-line
     summary, reclaiming vertical space for the thread — especially
     needed on short mobile viewports where five chips plus quick
     questions plus the input row would otherwise starve the thread down
     to a sliver */
  .assistant-persona-summary{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    font-family:'Inter',sans-serif; font-size:.78rem; color:var(--ink-dim);
  }
  .assistant-persona-summary[hidden]{ display:none; }
  .assistant-persona-summary span{ font-weight:500; color:var(--ink); }
  body:not(.ai-mode) .assistant-persona-summary span{ color:var(--ink-light); }
  .assistant-change-persona{
    font-family:'JetBrains Mono',monospace; font-size:.66rem; letter-spacing:.04em; text-transform:uppercase;
    background:none; border:none; color:var(--cyan); cursor:pointer; padding:2px 0;
  }
  body:not(.ai-mode) .assistant-change-persona{ color:var(--copper-bright); }
  /* same [hidden]-override note as .assistant-panel[hidden] above: these
     two have their own explicit `display`, so the hidden attribute needs
     restating or it's silently ignored */
  .assistant-personas-label[hidden], .assistant-persona-row[hidden]{ display:none; }
  .assistant-persona-row, .assistant-quick{ display:flex; flex-wrap:wrap; gap:8px; }
  .assistant-quick{ flex-shrink:0; margin-bottom:10px; max-height:92px; overflow-y:auto; }
  .assistant-quick:empty{ display:none; margin:0; max-height:none; }

  .assistant-chip{
    font-family:'Inter',sans-serif; font-size:.76rem; font-weight:500;
    color:var(--ink-dim); background:rgba(255,255,255,0.03); border:1px solid var(--hair);
    border-radius:30px; padding:8px 14px; cursor:pointer; text-align:left;
    transition:border-color .25s ease, color .25s ease, background .25s ease;
  }
  .assistant-chip:hover{ border-color:var(--cyan); color:var(--cyan); }
  .assistant-chip.active{ background:rgba(95,227,200,0.14); border-color:var(--cyan); color:var(--cyan); }
  body:not(.ai-mode) .assistant-chip:hover{ border-color:var(--copper-bright); color:var(--copper-bright); }
  body:not(.ai-mode) .assistant-chip.active{ background:rgba(143,89,52,0.14); border-color:var(--copper-bright); color:var(--copper-bright); }

  .assistant-form{ display:flex; gap:8px; flex-shrink:0; }
  .assistant-input{
    flex:1 1 auto; min-width:0; font-family:'Inter',sans-serif; font-size:.85rem;
    color:var(--ink); background:rgba(255,255,255,0.03); border:1px solid var(--hair);
    border-radius:30px; padding:11px 16px;
  }
  .assistant-input::placeholder{ color:#6f8781; }
  .assistant-input:focus-visible{ border-color:var(--cyan); }
  body:not(.ai-mode) .assistant-input{ color:var(--ink-light); border-color:var(--hair-light); }
  body:not(.ai-mode) .assistant-input::placeholder{ color:#a08a6c; }
  body:not(.ai-mode) .assistant-input:focus-visible{ border-color:var(--copper-bright); }
  .assistant-send{
    flex-shrink:0; width:40px; height:40px; border-radius:50%; border:none;
    background:var(--cyan); color:#00201a; font-size:1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background .25s ease;
  }
  .assistant-send:hover{ background:#8ff2dd; }
  body:not(.ai-mode) .assistant-send{ background:var(--copper); color:#100a06; }
  body:not(.ai-mode) .assistant-send:hover{ background:var(--copper-bright); }

  .assistant-botbar{
    display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
    font-family:'JetBrains Mono',monospace; font-size:.6rem; letter-spacing:.04em;
    color:#6f8781; margin-top:12px; padding-top:12px; border-top:1px solid var(--hair); flex-shrink:0;
  }
  body:not(.ai-mode) .assistant-botbar{ color:#8a7a63; border-top-color:var(--hair-light); }

  @media (max-width:480px){
    .assistant-widget{ right:14px; bottom:14px; }
    .assistant-panel{
      position:fixed; right:10px; left:10px; bottom:76px; width:auto;
      max-height:76vh;
    }
    .assistant-toggle-label{ display:none; }
    .assistant-toggle{ padding:7px; border-radius:50%; }
    .assistant-toggle-avatar{ margin:0; }
  }