/* =============================================================
   global.css — LawyerTools.ai
   Concaténation VERBATIM des 6 blocs \3c style> de Landing Page.html,
   dans l ordre source (la cascade en depend). NE PAS reformater.
   Importe globalement via Base.astro (aucun scoping Astro).
   ============================================================= */

/* ===== BLOC 1 — master + :root tokens + --ip-* bezel (source L59-1827) ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  /* ---- 6-COLOR PALETTE ---- */
  --ink:#1A1814;            /* warm near-black (text, dark surfaces) */
  --ink-2:#2A2620;          /* secondary dark */
  --paper:#FFFFFF;          /* clean white canvas (Apple-like) */
  --paper-2:#F5F5F7;        /* light neutral gray (muted sections) */
  --rule:#E5E0D6;           /* dividers / borders */
  --rule-2:#D4CCBC;         /* stronger borders */

  /* ---- 3 ACCENTS ---- */
  --mint:#3FB089;           /* Harry / personal */
  --peach:#D97757;          /* Jeanne / deal */
  --lavender:#6B5BD2;       /* system / orchestration */

  /* tinted backgrounds (10% mix on paper) */
  --mint-bg:#E8F5EE;--mint-border:#A8D9C2;--mint-text:#1F7A55;
  --peach-bg:#FBEEE6;--peach-border:#EFC4A8;--peach-text:#9A4519;
  --lavender-bg:#EEEBFA;--lavender-border:#C6BDF0;--lavender-text:#4A3CB0;

  /* legacy aliases (do not remove — used across the page) */
  --bg:var(--paper);--bg-2:var(--paper-2);--bg-3:#FFFFFF;
  --text:var(--ink);--text-2:#5C574E;--text-3:#6E6A61;
  --border:var(--rule);--border-2:var(--rule-2);
  --accent:var(--lavender);--accent-h:#5A4BB8;
  --rose:#D9577E;--rose-bg:#FBEAF0;--rose-border:#EFB4C8;--rose-text:#9A2849;

  /* ---- 8-PT SPACING SCALE ---- */
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;
  --s-7:40px;--s-8:48px;--s-9:64px;--s-10:80px;--s-11:96px;--s-12:120px;--s-14:160px;--s-16:200px;

  /* ---- TYPE SCALE ---- */
  --t-display:clamp(64px,9vw,128px);
  --t-h1:clamp(48px,6vw,84px);
  --t-h2:clamp(36px,4.5vw,56px);
  --t-h3:clamp(24px,2.4vw,32px);
  --t-h4:20px;
  --t-body:16px;
  --t-small:14px;
  --t-caption:12px;
  --t-micro:11px;

  /* ---- ELEVATION ---- */
  --shadow-1:0 1px 2px rgba(26,24,20,.06);
  --shadow-2:0 4px 12px rgba(26,24,20,.08);
  --shadow-3:0 12px 32px -8px rgba(26,24,20,.14);
  --shadow-4:0 24px 60px -20px rgba(26,24,20,.20);

  /* ---- FONTS ---- */
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --display:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
}
html{scroll-behavior:smooth}
html,body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.6;text-rendering:optimizeLegibility}
body{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden}

/* ============ NAV ============ */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,0.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,0.06)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:0 32px;height:56px;max-width:1320px;margin:0 auto;position:relative}
.nav-links-primary{display:flex;align-items:center;gap:26px;list-style:none;padding:0;margin:0 auto 0 12px}
.nav-links-primary li{display:flex}
.nav-right{display:flex;align-items:center;gap:14px}
.nav-lang{display:inline-flex;background:rgba(0,0,0,0.045);border-radius:8px;padding:2px;gap:0;flex-shrink:0}
.nav-lang-btn{background:transparent;border:none;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;cursor:pointer;color:var(--text-2);letter-spacing:.06em;transition:background .15s,color .15s,box-shadow .15s;font-family:inherit}
.nav-lang-btn.active{background:#FFF;color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,0.08)}
.nav-lang-btn:not(.active):hover{color:var(--ink)}
.nav-login{font-size:12px;color:var(--text-2);text-decoration:none;letter-spacing:-.005em;transition:color .15s;white-space:nowrap}
.nav-login:hover{color:var(--ink)}
.nav-cta{font-size:12px;font-weight:500;color:#FFF;background:var(--ink);border-radius:999px;padding:7px 14px;text-decoration:none;letter-spacing:-.005em;transition:background .15s,transform .12s;white-space:nowrap}
.nav-cta:hover{background:#000;transform:translateY(-1px)}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;width:44px;height:44px;margin-right:-8px;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.nav-burger span{display:block;width:18px;height:1.5px;background:var(--ink);border-radius:1px;transition:transform .25s,opacity .25s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.nav-mobile{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(255,255,255,0.98);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--rule);padding:18px 32px 24px;box-shadow:0 12px 32px -8px rgba(0,0,0,0.10);z-index:49}
.nav-mobile.open{display:block}
.nav-mobile ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.nav-mobile a{font-size:15px;color:var(--ink);text-decoration:none;display:block;letter-spacing:-.005em}
.nav-mobile a:hover{color:var(--text-2)}
.nav-mobile-divider{height:1px;background:var(--rule);margin:4px 0}
.nav-mobile-lang{display:inline-flex;background:rgba(0,0,0,0.045);border-radius:8px;padding:2px;width:fit-content;gap:0;margin-top:4px}
@media(max-width:1080px){
  .nav-cta{display:none}
  .nav-right{gap:12px}
  .nav-links-primary{gap:20px;margin-left:0}
}
@media(max-width:920px){
  .nav-links-primary,.nav-right .nav-lang,.nav-right .nav-login,.nav-right .nav-cta{display:none}
  .nav-burger{display:flex}
  .nav-inner{justify-content:space-between;gap:12px}
}
@media(max-width:920px){
  .nav-right .nav-badge{display:none}
}
.logo{text-decoration:none;display:inline-flex;align-items:center;gap:9px}
.logomark{flex-shrink:0;display:block}
.wordmark{font-size:16px;font-weight:600;letter-spacing:-0.034em;display:inline-flex;align-items:baseline}
.l1{color:#5CC8A0}
.l2{color:#8B6FE8}
.l3{color:#F5A06A;font-size:13px;font-weight:500;margin-left:1px;letter-spacing:-0.01em;position:relative;top:1px}
.nav-r{display:flex;align-items:center;gap:18px}
.nav-link{font-size:13px;color:var(--text-2);text-decoration:none;letter-spacing:-0.005em;transition:color .15s;font-weight:500}
.nav-link:hover{color:var(--text)}
.nav-badge{font-size:11px;font-weight:500;letter-spacing:0.04em;white-space:nowrap;flex-shrink:0;line-height:1;color:var(--accent);background:rgba(74,123,247,0.08);border:1px solid rgba(74,123,247,0.18);border-radius:999px;padding:3px 10px;display:inline-flex;align-items:center;gap:5px}
.nav-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}

/* ============ TYPE PRIMITIVES ============ */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:11px;font-weight:500;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3);font-family:var(--mono)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}
.eyebrow-tri{display:flex;gap:4px}
.eyebrow-tri i{width:6px;height:6px;border-radius:50%;display:block}

/* ============ SECTIONS ============ */
.sec{padding:112px 40px;position:relative}
.sec-inner{max-width:1200px;margin:0 auto}
.sec-muted{background:var(--bg-2)}
.sec-dark{background:var(--ink);color:#F5F5F7}
.sec-dark .eyebrow{color:rgba(255,255,255,0.55)}
.sec-head{margin-bottom:52px;max-width:760px}
.sec-h2{font-size:clamp(38px,5vw,64px);font-weight:600;letter-spacing:-0.035em;line-height:1.02;margin-top:18px}
.sec-sub{font-size:19px;font-weight:300;color:var(--text-2);line-height:1.55;letter-spacing:-0.011em;margin-top:20px;max-width:600px}
.sec-dark .sec-sub{color:rgba(255,255,255,0.62)}

/* ============ HERO ============ */
.hero{padding:84px 40px 104px;position:relative;overflow:hidden;background:var(--paper)}
.hero::before{content:"";position:absolute;top:-220px;right:-180px;width:920px;height:920px;background:
  radial-gradient(circle at 30% 40%, rgba(212,197,255,0.45) 0%, transparent 38%),
  radial-gradient(circle at 70% 60%, rgba(178,237,212,0.42) 0%, transparent 42%),
  radial-gradient(circle at 50% 80%, rgba(255,212,178,0.38) 0%, transparent 40%);
  filter:blur(40px);pointer-events:none;border-radius:50%;opacity:0.9}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,0,0,0.08),transparent)}
.hero-inner{max-width:1200px;margin:0 auto;position:relative}
.hero-eyebrow{margin-bottom:32px}
h1{font-size:clamp(64px,9vw,128px);font-weight:600;letter-spacing:-0.05em;line-height:0.92;max-width:1000px;margin-bottom:36px}
h1{font-family:var(--sans);font-size:var(--t-display);font-weight:500;letter-spacing:-0.045em;line-height:0.94;max-width:1000px;margin-bottom:var(--s-6)}
h1 .gradient{font-family:var(--display);font-style:italic;font-weight:400;color:var(--ink);letter-spacing:-0.025em;background:none;-webkit-text-fill-color:initial}
.hero-sub{font-family:var(--sans);font-size:21px;font-weight:400;color:var(--text-2);max-width:580px;line-height:1.5;letter-spacing:-0.012em;margin-bottom:var(--s-8)}

/* ============ FORM ============ */
.form-wrap{max-width:520px;position:relative}
.input-row{display:flex;align-items:center;gap:8px;background:#FFF;border:1px solid var(--rule-2);border-radius:18px;padding:8px 8px 8px 22px;transition:border-color .2s,box-shadow .2s,transform .2s;box-shadow:0 1px 2px rgba(26,24,20,.04),0 8px 24px -8px rgba(26,24,20,.08)}
.input-row:focus-within{border-color:var(--lavender);box-shadow:0 0 0 4px color-mix(in srgb, var(--lavender) 14%, transparent),0 8px 24px -8px rgba(107,91,210,.18)}
input[type=email]{flex:1;min-width:0;background:transparent;border:none;outline:none;font-family:var(--sans);font-size:15px;color:var(--ink);letter-spacing:-0.011em;height:48px;padding:0}
input[type=email]::placeholder{color:var(--text-3)}
.btn{background:var(--ink);color:#FFF;border:none;border-radius:12px;padding:0 22px;height:48px;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:-0.005em;cursor:pointer;white-space:nowrap;transition:background .15s,transform .12s;display:inline-flex;align-items:center;gap:8px;flex-shrink:0}
.btn:hover{background:#000;transform:translateY(-1px)}
.btn:active{transform:scale(0.97)}
.btn:disabled{opacity:.6;cursor:default;transform:none}
.btn-accent{background:var(--accent)}
.btn-accent:hover{background:var(--accent-h)}
.btn-arrow{transition:transform .2s}
.btn:hover .btn-arrow{transform:translateX(2px)}

.form-note{font-size:12.5px;color:var(--text-3);margin-top:16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;letter-spacing:-.005em}
.spots-pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--text-2);background:#FFF;border:1px solid var(--rule);border-radius:999px;padding:4px 11px 4px 9px;letter-spacing:.01em;white-space:nowrap;flex-shrink:0}
.spots-pill .live-dot{width:6px;height:6px;border-radius:50%;background:#34C759;box-shadow:0 0 8px rgba(52,199,89,0.6);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.success-box{display:none;align-items:center;gap:12px;background:rgba(52,199,89,0.06);border:1px solid rgba(52,199,89,0.25);border-radius:14px;padding:14px 18px}
.success-box .chk{width:28px;height:28px;border-radius:50%;background:#34C759;display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;flex-shrink:0}
.success-box p{font-size:14px;color:var(--text)}

/* ============ HERO TICKER ============ */
.hero-meta{margin-top:var(--s-11);padding-top:var(--s-6);border-top:1px solid var(--rule);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-6);max-width:880px}
.hero-meta-item{display:flex;flex-direction:column;gap:6px}
.hero-meta-item .label{font-family:var(--mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.hero-meta-item .value{font-family:var(--display);font-size:28px;font-weight:400;letter-spacing:-0.02em;color:var(--ink);line-height:1}
.hero-meta-item .value .sub{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--text-3);margin-left:6px;letter-spacing:.02em;text-transform:lowercase}

/* ===== HERO ASIDE — clock + live ticker ===== */
.hero-inner{position:relative}
.hero-aside{position:absolute;top:8px;right:0;width:260px;display:flex;flex-direction:column;gap:14px;pointer-events:none}
.hero-clock-card{background:#FFF;border:1px solid var(--rule);border-radius:18px;box-shadow:var(--shadow-3);padding:18px 18px 16px;display:flex;align-items:center;gap:14px}
.hero-clock{width:64px;height:64px;border-radius:50%;border:1.5px solid var(--rule-2);position:relative;flex-shrink:0;background:#FAF8F4}
.hero-clock svg{width:100%;height:100%;display:block}
.hero-clock-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.15}
.hero-clock-label-l1{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:500}
.hero-clock-label-l2{font-family:var(--display);font-style:italic;font-size:18px;color:var(--ink);font-weight:400;letter-spacing:-.005em}
.hero-clock-label-l3{font-family:var(--mono);font-size:11px;color:var(--text-2);letter-spacing:.01em;margin-top:1px}
.hero-clock .hand-hour{transform-origin:50% 50%;animation:hHour 60s linear infinite}
.hero-clock .hand-min{transform-origin:50% 50%;animation:hMin 5s linear infinite}
@keyframes hHour{from{transform:rotate(232deg)}to{transform:rotate(592deg)}}
@keyframes hMin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* .hero-ticker removed — it announced a "Now" for a story told in the past tense,
   and duplicated the 07:48 → 08:08 proof less clearly. */
.hero-ticker .pulse{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(63,176,137,0.16);animation:pulse 1.5s ease-in-out infinite;flex-shrink:0}
.hero-ticker .ticker-content{flex:1;min-width:0}
.hero-ticker .ticker-label{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);display:block;margin-bottom:3px}
.hero-ticker .ticker-text{font-size:13.5px;color:var(--ink);letter-spacing:-.005em;line-height:1.3}
.hero-ticker .ticker-text strong{font-family:var(--display);font-style:italic;font-weight:400;color:var(--peach-text);font-size:14.5px}
@media(max-width:1000px){.hero-aside{display:none}}

/* ---- Hero: two columns. Left the argument, right the evidence. ---- */
.hero-inner{display:grid;grid-template-columns:1.02fr .98fr;column-gap:56px;align-items:center}
.hero-eyebrow,.hero h1,.hero-sub,.hero .form-wrap{grid-column:1}
.hero h1{max-width:none;font-size:clamp(48px,5.6vw,86px);line-height:.96;margin-bottom:28px}
.hero-sub{max-width:46ch}
.hero-proof-card{grid-column:2;grid-row:1/span 4;justify-self:end;width:100%;max-width:420px;background:#FFF;border:1px solid var(--rule);border-radius:20px;padding:24px 24px 20px;box-shadow:0 1px 2px rgba(26,24,20,.03),0 30px 60px -28px rgba(26,24,20,.22)}
.hpc-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);padding-bottom:16px;margin-bottom:2px;border-bottom:1px solid var(--rule)}
.hpc-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(63,176,137,.16);flex-shrink:0}
.hpc-row{display:flex;gap:16px;padding:16px 0 0}
.hpc-time{font-family:var(--mono);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--ink);letter-spacing:.02em;flex-shrink:0;width:44px;padding-top:1px}
.hpc-out .hpc-time{color:var(--peach-text);font-weight:500}
.hpc-body{min-width:0;flex:1}
.hpc-what{display:block;font-size:14.5px;color:var(--ink);letter-spacing:-.01em;line-height:1.35;font-weight:450}
.hpc-meta{display:block;font-size:12.5px;color:var(--text-3);letter-spacing:-.005em;margin-top:3px;line-height:1.4}
.hpc-gap{display:flex;align-items:center;gap:10px;padding:14px 0 0;margin-left:60px}
.hpc-gap-line{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--rule-2) 0 3px,transparent 3px 6px)}
.hpc-gap-badge{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--peach-text);background:var(--peach-bg);border:1px solid var(--peach-border);border-radius:999px;padding:3px 9px;white-space:nowrap}
.hpc-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.hpc-file{font-family:var(--mono);font-size:10.5px;letter-spacing:-.002em;color:var(--text-2);background:var(--paper-2);border:1px solid var(--rule);border-radius:6px;padding:3px 7px 3px 20px;position:relative;white-space:nowrap}
.hpc-file::before{content:"";position:absolute;left:7px;top:50%;transform:translateY(-50%);width:8px;height:10px;border-radius:1px}
.hpc-file.pdf::before{background:#C7341B}
.hpc-file.doc::before{background:#2B579A}
.hpc-said{font-size:13.5px;line-height:1.55;color:var(--text-2);letter-spacing:-.007em;padding:14px 0 2px;margin:0}
.hpc-said em{font-style:normal;color:var(--ink);background:linear-gradient(var(--mint-bg),var(--mint-bg)) no-repeat 0 100% / 100% .55em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hpc-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);font-family:var(--display);font-style:italic;font-size:15px;color:var(--text-2);letter-spacing:-.008em;margin-bottom:0}
.hpc-cta{display:inline-flex;align-items:flex-end;gap:7px;margin-top:14px;font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:-.008em;text-decoration:underline;text-decoration-color:var(--rule-2);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .18s,gap .18s}
.hpc-cta:hover{text-decoration-color:var(--ink);gap:10px}
.hpc-cta-arrow{font-size:12px;color:var(--peach-text);flex-shrink:0;text-decoration:none;line-height:1.5}
.hero-proof-card{opacity:0;transform:translateY(16px);animation:heroIn .9s cubic-bezier(.4,0,.2,1) .8s forwards}
@media(max-width:1040px){
  /* One spacing system only. The children were authored for block flow and keep
     their own margin-bottom; a row-gap here compounds with those margins and
     double-spaces the whole stack. The proof card is the single child with no
     margin, so it takes the spacing explicitly. */
  .hero-inner{grid-template-columns:1fr;row-gap:0}
  .hero-eyebrow,.hero h1,.hero-sub,.hero .form-wrap,.hero-proof-card{grid-column:1}
  .hero-proof-card{grid-row:auto;justify-self:center;max-width:520px;margin-top:44px}
}
.hero-proof .label{font-variant-numeric:tabular-nums;font-size:12px;letter-spacing:.1em;color:var(--text-3)}
.hero-proof-line{font-family:var(--sans)!important;font-size:14.5px!important;font-weight:400!important;line-height:1.4;letter-spacing:-.008em;color:var(--text-2)!important;max-width:26ch}
.hero-proof-punch .label{color:var(--peach-text)}
.hero-proof-num{font-family:var(--display);font-size:44px;font-weight:400;letter-spacing:-.02em;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.hero-proof-punch .sub{font-family:var(--sans);font-size:15px;color:var(--text-2);letter-spacing:-.01em;text-transform:none}
.hero-proof-note{margin-top:6px;font-family:var(--display);font-style:italic;font-size:14px;color:var(--text-3);letter-spacing:-.005em;line-height:1.35;max-width:24ch}
@media(max-width:1000px){.hero-meta{grid-template-columns:1fr 1fr}.hero-proof-punch{grid-column:1/-1}}
@media(max-width:600px){.hero-meta{grid-template-columns:1fr}}
/* Mobile: stop hero grid items (proof card, form) from forcing the 1fr track wider than the
   viewport — grid min-width:auto blowout was clipping the hero copy/button on phones (esp. Safari). */
@media(max-width:600px){
  .hero-inner,.hero-inner>*{min-width:0}
  .input-row,.hpc-files{flex-wrap:wrap}
}

.hero-alt-cta{margin-top:12px;font-size:13.5px;color:var(--text-3);letter-spacing:-.006em}
.hero-alt-cta a{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px;transition:color .15s,text-decoration-color .15s}
.hero-alt-cta a:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* ---- Credibility band ---- */
.credband{padding:22px 40px;background:#FFF;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.credband-inner{max-width:1200px;margin:0 auto;display:flex;align-items:flex-start;gap:12px 36px;flex-wrap:wrap}
.credband-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);flex-shrink:0;line-height:19px}
.credband-items{display:flex;gap:10px 32px;flex-wrap:wrap;align-items:flex-start;flex:1 1 auto}
.credband-item{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);letter-spacing:-.008em;white-space:nowrap}
.credband-item::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--rule-2);flex-shrink:0}
@media(max-width:900px){.credband-inner{flex-direction:column;gap:10px}.credband-label{line-height:1}}
@media(max-width:760px){.credband{padding:18px 24px}.credband-items{gap:14px 22px}.credband-item{font-size:12.5px;white-space:normal}}

/* ============ TRUST BAND ============ */
.trust{padding:36px 40px;background:var(--bg-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.trust-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:48px;flex-wrap:wrap}
.trust-label{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3);flex-shrink:0}
.trust-logos{display:flex;gap:36px;flex-wrap:wrap;align-items:center;flex:1}
.trust-logo{font-size:15px;font-weight:500;letter-spacing:-0.02em;color:var(--text-2);font-family:Georgia,serif;font-style:italic}

/* ============ CHANNELS — LIGHT MODE ============ */
.channels{padding:140px 40px;background:var(--paper-2);color:var(--ink);position:relative;overflow:hidden}
.channels::before{content:"";position:absolute;top:-200px;left:-200px;width:700px;height:700px;background:radial-gradient(circle,rgba(107,91,210,0.06),transparent 65%);pointer-events:none}
.channels::after{content:"";position:absolute;bottom:-200px;right:-200px;width:700px;height:700px;background:radial-gradient(circle,rgba(63,176,137,0.06),transparent 65%);pointer-events:none}
.channels .sec-head{position:relative}
.channels .sec-h2{color:#FFF}
.channels .sec-sub{color:rgba(255,255,255,0.6)}

/* ============ CINEMATIC ACTS LAYOUT — LIGHT ============ */
.channels{display:flex;flex-direction:column;background:var(--paper-2);padding:0}
.channels::before,.channels::after{display:none}
.ch-intro{order:0;padding:72px 32px 8px;text-align:center;max-width:880px;margin:0 auto}
.ch-intro .eyebrow{justify-content:center;color:var(--text-3);display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.ch-intro-h{font-family:var(--display);font-size:clamp(30px,3.4vw,46px);line-height:1.05;letter-spacing:-.02em;font-weight:500;color:var(--ink);margin:14px 0 0}
.ch-intro-h-lite{display:inline-block;color:var(--text-2);font-weight:400;font-style:italic}
.ch-intro-sub{font-style:italic;color:var(--text-3);font-size:14px;letter-spacing:.01em;margin:0 0 32px}
.ch-intro-sig{display:flex;gap:6px;justify-content:center;margin-top:18px}
.ch-intro-sig-hidden{display:none}
/* The day clock: hands track the act you are reading, not a decorative loop. */
.day-clock{display:inline-flex;align-items:center;gap:16px;background:#FFF;border:1px solid var(--rule);border-radius:18px;padding:16px 22px 16px 16px;box-shadow:var(--shadow-2);margin-top:26px;text-align:left}
.day-clock-face{width:62px;height:62px;border-radius:50%;border:1.5px solid var(--rule-2);background:var(--paper);flex-shrink:0}
.day-clock-face svg{width:100%;height:100%;display:block}
#dcHour,#dcMin{transform-origin:50% 50%;transition:transform .8s cubic-bezier(.34,1.3,.5,1)}
.day-clock-label{display:flex;flex-direction:column;gap:1px}
.day-clock-l1{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.dc-day-prev{display:inline}
.dc-day-today{display:none}
.day-clock-l2{font-family:var(--display);font-size:30px;line-height:1.05;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.day-clock-l3{font-family:var(--mono);font-size:10.5px;color:var(--text-3);letter-spacing:.02em;margin-top:2px}
@media(max-width:600px){.day-clock{padding:13px 18px 13px 13px;gap:13px}.day-clock-face{width:50px;height:50px}.day-clock-l2{font-size:25px}}
.ch-intro-sig i{width:8px;height:8px;border-radius:50%;display:block}

/* sticky chapter bar — Sarah's day timeline (LIGHT) */
.ch-chapter{order:0;position:sticky;top:64px;z-index:30;backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);background:rgba(250,248,244,.78);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ch-chapter-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 32px;max-width:1400px;margin:0 auto;gap:32px}
.ch-chapter-l{display:flex;align-items:center;gap:10px;flex-shrink:0}
.ch-chapter-clock{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--rule-2);position:relative;flex-shrink:0;background:#FFF}
.ch-chapter-clock::before,.ch-chapter-clock::after{content:"";position:absolute;left:50%;top:50%;background:var(--ink);transform-origin:bottom center;border-radius:1px}
.ch-chapter-clock::before{width:1.5px;height:5px;margin-left:-.75px;margin-top:-5px;transform:rotate(0deg);animation:hHourTiny 80s linear infinite}
.ch-chapter-clock::after{width:1px;height:7px;margin-left:-.5px;margin-top:-7px;transform:rotate(0deg);animation:hMinTiny 6s linear infinite}
@keyframes hHourTiny{from{transform:rotate(232deg)}to{transform:rotate(592deg)}}
@keyframes hMinTiny{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.ch-chapter-day{display:flex;flex-direction:column;line-height:1.1}
.ch-chapter-day-l1{font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase}
.ch-chapter-day-l2{font-family:var(--display);font-style:italic;font-size:14px;color:var(--ink);font-weight:500;margin-top:2px}
.ch-chapter-day-l2 #chapterNow{color:var(--mint);transition:color .4s}
.ch-chapter[data-current-phase="2"] #chapterNow{color:var(--mint)}
.ch-chapter[data-current-phase="3"] #chapterNow{color:var(--peach)}
.ch-chapter[data-current-phase="4"] #chapterNow{color:var(--peach)}
.ch-chapter[data-current-phase="5"] #chapterNow{color:var(--lavender)}
.ch-chapter[data-current-phase="6"] #chapterNow{color:var(--lavender)}

.ch-chapter-progress{display:flex;align-items:center;gap:0;flex:1 1 auto;position:relative;max-width:760px}
.ch-chapter-rail{position:absolute;top:14px;left:14px;right:14px;height:1.5px;background:var(--rule-2);z-index:0}
.ch-chapter-rail-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--mint),var(--peach),var(--lavender),var(--rose));transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 12px rgba(245,160,106,.3)}
.ch-chapter-dots{list-style:none;padding:0;margin:0;display:flex;justify-content:space-between;position:relative;z-index:1;width:100%}
.ch-chapter-dots li{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative;flex:0 0 auto}
.ch-chapter-dots li .ch-stop-dot{width:10px;height:10px;border-radius:50%;background:var(--rule-2);border:2px solid var(--paper-2);transition:all .35s cubic-bezier(.4,0,.2,1);box-shadow:0 0 0 0 transparent}
.ch-chapter-dots li .ch-stop-time{font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:.04em;transition:color .3s,opacity .3s;white-space:nowrap}
.ch-chapter-dots li .ch-stop-label{font-size:11px;color:var(--text-3);letter-spacing:-.005em;transition:color .3s,opacity .3s;white-space:nowrap;font-weight:400}
.ch-chapter-dots li:hover .ch-stop-dot{transform:scale(1.25);background:var(--text-3)}
.ch-chapter-dots li:hover .ch-stop-time,.ch-chapter-dots li:hover .ch-stop-label{color:var(--ink)}
.ch-chapter-dots li.active .ch-stop-time{color:var(--ink);font-weight:500}
.ch-chapter-dots li.active .ch-stop-label{color:var(--ink);font-weight:500}
.ch-chapter-dots li.passed .ch-stop-time{color:var(--text-2)}
.ch-chapter-dots li[data-phase="1"].active .ch-stop-dot,.ch-chapter-dots li[data-phase="2"].active .ch-stop-dot{background:var(--mint);box-shadow:0 0 0 5px rgba(92,200,160,.2),0 0 16px rgba(92,200,160,.5);transform:scale(1.2)}
.ch-chapter-dots li[data-phase="3"].active .ch-stop-dot,.ch-chapter-dots li[data-phase="4"].active .ch-stop-dot{background:var(--peach);box-shadow:0 0 0 5px rgba(245,160,106,.2),0 0 16px rgba(245,160,106,.5);transform:scale(1.2)}
.ch-chapter-dots li[data-phase="5"].active .ch-stop-dot,.ch-chapter-dots li[data-phase="6"].active .ch-stop-dot{background:var(--lavender);box-shadow:0 0 0 5px rgba(139,111,232,.2),0 0 16px rgba(139,111,232,.5);transform:scale(1.2)}
.ch-chapter-dots li[data-phase="1"].passed .ch-stop-dot,.ch-chapter-dots li[data-phase="2"].passed .ch-stop-dot{background:var(--mint);opacity:.5}
.ch-chapter-dots li[data-phase="3"].passed .ch-stop-dot,.ch-chapter-dots li[data-phase="4"].passed .ch-stop-dot{background:var(--peach);opacity:.5}
.ch-chapter-dots li[data-phase="5"].passed .ch-stop-dot,.ch-chapter-dots li[data-phase="6"].passed .ch-stop-dot{background:var(--lavender);opacity:.5}

.ch-chapter-r{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
.ch-chapter-r .live-dot{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(92,200,160,.2);animation:pulse 1.5s ease-in-out infinite}

/* ---- Play the day button ---- */
.ch-play-btn{position:relative;background:#FFF;border:1px solid var(--rule-2);color:var(--ink);padding:7px 14px 7px 10px;border-radius:999px;cursor:pointer;font:inherit;text-transform:none;letter-spacing:-.005em;font-size:12px;font-weight:500;font-family:var(--sans);transition:background .25s,border-color .25s,transform .15s,box-shadow .25s;overflow:hidden;box-shadow:var(--shadow-1)}
.ch-play-btn:hover{background:#FFF;border-color:var(--text-3);box-shadow:var(--shadow-2)}
.ch-play-btn:active{transform:scale(.97)}
.ch-play-icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--mint);color:#FFF;margin-right:2px;transition:background .25s}
.ch-play-btn.playing .ch-play-icon{background:var(--peach)}
.ch-play-ico-play{display:block;margin-left:1px}
.ch-play-ico-pause{display:none}
.ch-play-btn.playing .ch-play-ico-play{display:none}
.ch-play-btn.playing .ch-play-ico-pause{display:block}
.ch-play-progress{position:absolute;left:0;bottom:0;right:0;height:2px;background:rgba(255,255,255,.06);overflow:hidden;opacity:0;transition:opacity .3s}
.ch-play-progress-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--mint),var(--peach),var(--lavender),var(--rose));transition:width .2s linear}
.ch-play-btn.playing .ch-play-progress{opacity:1}
.ch-play-btn.playing .ch-play-label::after{content:""}

/* ---- Magnetic primary buttons (cursor pull) ---- */
.btn{transition:transform .25s cubic-bezier(.2,.8,.3,1.2),background .2s,box-shadow .2s}

/* acts — flex order to keep visual sequence regardless of DOM */
article.act{display:block;padding:80px 32px 40px;position:relative;width:100%;max-width:1400px;margin:0 auto}
article.act[data-act="1"]{order:1;background:transparent}
.act-divider[data-divider="1"]{order:2}
article.act[data-act="2"]{order:3;background:transparent}
.act-divider[data-divider="2"]{order:4}
article.act[data-act="3"]{order:5;background:transparent}
.act-divider[data-divider="3"]{order:6}
article.act[data-act="4"]{order:7;background:transparent}
.ch-outro{order:8}

.act-topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:0 0 28px;flex-wrap:wrap;max-width:1400px;margin:0 auto}
.act-meta{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.act-num{font-family:var(--display);font-size:72px;font-weight:500;color:var(--act-color);line-height:.9;letter-spacing:-.02em;opacity:0;transform:translateX(-12px);transition:opacity .5s,transform .5s}
.act-time{font-family:var(--mono);font-size:13px;color:var(--text-3);letter-spacing:.04em;opacity:0;transform:translateX(-12px);transition:opacity .5s .1s,transform .5s .1s}
.act-desc{font-size:18px;color:var(--ink);font-weight:500;letter-spacing:-.01em;opacity:0;transform:translateX(-12px);transition:opacity .5s .2s,transform .5s .2s;max-width:520px;line-height:1.35}
.act-channel{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;border:1px solid var(--rule);background:#FFF;font-family:var(--mono);font-size:11px;color:var(--text-2);letter-spacing:.04em;text-transform:uppercase;opacity:0;transition:opacity .5s .25s;box-shadow:var(--shadow-1)}
.act-ch-dot{width:6px;height:6px;border-radius:50%}
article.act.in-view .act-num,article.act.in-view .act-time,article.act.in-view .act-desc,article.act.in-view .act-channel{opacity:1;transform:translateX(0)}
.act-note{margin:-16px 0 28px;font-size:14px;color:var(--text-3);font-style:italic;max-width:560px;opacity:0;transition:opacity .6s .4s;line-height:1.5}
article.act.in-view .act-note{opacity:1}
.act-mode{display:inline-flex;align-items:center;gap:10px;margin:-4px 0 30px;padding:7px 8px 7px 14px;border-radius:999px;border:1px solid var(--act-color);background:#FFF;font-size:13px;color:var(--ink);letter-spacing:-.005em;max-width:max-content;opacity:0;transform:translateY(6px);transition:opacity .6s .45s,transform .6s .45s;box-shadow:0 2px 10px -4px rgba(26,24,20,.12)}
article.act.in-view .act-mode{opacity:1;transform:none}
.act-mode-k{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:#FFF;background:var(--act-color);padding:4px 8px;border-radius:999px;flex-shrink:0}
.act-mode b{font-weight:600;color:var(--act-color)}
@media (max-width:780px){.act-note{display:none}}

/* unified mock wrapper — shadow, ring, label */
article.act .ch-panel{position:relative;padding:0;margin:0 auto 24px;max-width:1400px;border-radius:24px;opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.4,0,.2,1) .15s,transform .7s cubic-bezier(.4,0,.2,1) .15s}
article.act.in-view .ch-panel{opacity:1;transform:translateY(0)}
article.act .ch-panel::before{content:attr(data-demo-label);position:absolute;top:-14px;left:24px;z-index:5;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#FFF;background:var(--act-color,#FFF);padding:6px 12px;border-radius:999px;font-weight:600;box-shadow:0 4px 14px rgba(26,24,20,.18),0 0 0 4px var(--paper-2);line-height:1}
article.act[data-act="1"] .ch-panel::before{background:var(--mint)}
article.act[data-act="2"] .ch-panel::before{background:var(--peach)}
article.act[data-act="3"] .ch-panel::before{background:var(--lavender);color:#FFF}
article.act[data-act="4"] .ch-panel::before{background:var(--rose);color:#FFF}
article.act .ch-panel::after{content:"";position:absolute;inset:0;border-radius:24px;pointer-events:none;box-shadow:0 40px 80px -30px rgba(26,24,20,.28),0 16px 32px -12px rgba(26,24,20,.14),0 0 0 1px rgba(26,24,20,.04);z-index:0}
article.act .ch-panel > *{position:relative;z-index:1;border-radius:20px;overflow:hidden}
article.act .ch-panel .win-frame{box-shadow:none;border-radius:20px}
@media(max-width:780px){article.act .ch-panel{margin-bottom:18px;border-radius:18px}article.act .ch-panel > *{border-radius:14px}article.act .ch-panel::before{left:16px;font-size:9px;padding:5px 10px}}
article.act_legacy_unused .ch-panel{display:block;animation:none;opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.4,0,.2,1) .15s,transform .7s cubic-bezier(.4,0,.2,1) .15s;max-width:1400px;margin:0 auto}
article.act.in-view .ch-panel{opacity:1;transform:translateY(0)}

/* dividers */
.act-divider{display:flex;align-items:center;justify-content:center;gap:18px;padding:60px 32px;max-width:1400px;margin:0 auto;width:100%}
.act-divider-line{flex:1;height:1px;background:var(--rule-2);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.4,0,.2,1)}
.act-divider-line:last-child{transform-origin:right}
.act-divider.in-view .act-divider-line{transform:scaleX(1)}
.act-divider-time{font-family:var(--mono);font-size:12px;color:var(--text-3);letter-spacing:.08em;white-space:nowrap;opacity:0;transition:opacity .4s .5s}
.act-divider.in-view .act-divider-time{opacity:1}

/* filmic scene-transition cards (camera travel between apps + time jump) */
.act-divider.act-cut{flex-direction:column;gap:0;padding:40px 32px}
.act-cut .act-cut-rail{width:2px;height:36px;border-radius:2px;background:linear-gradient(var(--rule-2),color-mix(in srgb,var(--rule-2) 20%,transparent));opacity:0;transform:scaleY(.3);transform-origin:top;transition:opacity .5s,transform .6s cubic-bezier(.4,0,.2,1)}
.act-cut .act-cut-rail:last-child{background:linear-gradient(color-mix(in srgb,var(--rule-2) 20%,transparent),var(--rule-2));transform-origin:bottom}
.act-cut.in-view .act-cut-rail{opacity:1;transform:scaleY(1)}
.act-cut-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:26px 30px 28px;background:#FFF;border:1px solid var(--rule);border-radius:20px;box-shadow:var(--shadow-2);max-width:620px;margin:13px 0;opacity:0;transform:translateY(16px) scale(.98);transition:opacity .6s .1s,transform .7s .1s cubic-bezier(.34,1.4,.5,1)}
.act-cut.in-view .act-cut-card{opacity:1;transform:none}

/* transition track: app→app + time→time, with a travelling pulse */
.cut-track{display:flex;align-items:center;gap:16px;width:100%;justify-content:center}
.cut-node{display:flex;align-items:center;gap:11px;flex-shrink:0}
.cut-node-app{position:relative;width:36px;height:36px;border-radius:9px;background:var(--c);color:#FFF;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;box-shadow:0 4px 13px -3px var(--c);flex-shrink:0;font-family:var(--sans)}
.cut-node:first-child .cut-node-app{opacity:.62}
.cut-node:last-child .cut-node-app{animation:cutArrive 1.8s ease-in-out infinite}
@keyframes cutArrive{0%,100%{box-shadow:0 4px 13px -3px var(--c)}50%{box-shadow:0 4px 13px -3px var(--c),0 0 0 6px color-mix(in srgb,var(--c) 16%,transparent)}}
.cut-node-meta{display:flex;flex-direction:column;line-height:1.2}
.cut-node:first-child .cut-node-meta{align-items:flex-start}
.cut-node:last-child .cut-node-meta{align-items:flex-end}
.cut-node-meta b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.cut-node-meta i{font-family:var(--mono);font-style:normal;font-size:10px;color:var(--text-3);letter-spacing:.03em;margin-top:3px;white-space:nowrap}

.cut-flow{flex:1;min-width:96px;max-width:210px;display:flex;flex-direction:column;align-items:center;gap:8px}
.cut-flow-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);white-space:nowrap}
.cut-flow-track{position:relative;width:100%;height:16px;overflow:hidden;display:flex;align-items:center}
.cut-flow-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,transparent,var(--rule-2) 18%,var(--rule-2) 82%,transparent)}
.cut-flow-chev{position:absolute;top:50%;left:0;transform:translateY(-50%);font-family:var(--mono);font-size:12px;letter-spacing:7px;color:var(--text-3);white-space:nowrap;animation:cutChev 1.3s linear infinite;opacity:.55}
@keyframes cutChev{from{transform:translate(-26px,-50%)}to{transform:translate(0,-50%)}}
.cut-flow-pulse{position:absolute;top:50%;height:2px;width:46%;transform:translateY(-50%);border-radius:2px;animation:cutPulse 1.7s cubic-bezier(.45,0,.55,1) infinite}
.act-cut[data-divider="1"] .cut-flow-pulse{background:linear-gradient(90deg,transparent,#3FB089,#D97757,transparent)}
.act-cut[data-divider="2"] .cut-flow-pulse{background:linear-gradient(90deg,transparent,#0078D4,#6264A7,transparent)}
@keyframes cutPulse{0%{left:-46%}100%{left:100%}}

.act-cut-line{font-family:var(--display);font-style:italic;font-size:22px;line-height:1.3;color:var(--ink);letter-spacing:-.01em;max-width:460px;text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.cut-flow-chev,.cut-flow-pulse,.cut-node:last-child .cut-node-app{animation:none}}
@media(max-width:600px){.cut-track{flex-direction:column;gap:12px}.cut-node-meta{align-items:center!important}.cut-flow{max-width:none;width:100%}.cut-flow-track{width:120px}.act-cut-line{font-size:18px}.act-cut-card{padding:22px}}

/* outro */
.ch-outro{order:8;padding:140px 32px 160px;text-align:center;max-width:880px;margin:0 auto}
.ch-outro-h{font-family:var(--display);font-size:clamp(56px,7vw,96px);font-weight:500;color:var(--ink);letter-spacing:-.03em;line-height:1;margin:0 0 24px;font-style:italic}
.ch-outro-sub{font-size:18px;color:var(--text-2);line-height:1.5;max-width:640px;margin:0 auto 60px}
.ch-outro-cta-h{font-size:16px;color:var(--ink);font-weight:500;margin:0 0 18px;letter-spacing:-.005em}
.ch-outro-cta .form-wrap{max-width:520px;margin:0 auto}
.input-row-dark{background:#FFF;border:1px solid var(--rule-2);border-radius:18px;padding:8px;display:flex;align-items:center;transition:border-color .2s,background .2s;box-shadow:var(--shadow-2)}
.input-row-dark:focus-within{border-color:var(--lavender);box-shadow:0 0 0 4px color-mix(in srgb, var(--lavender) 14%, transparent),var(--shadow-2)}
.input-row-dark input{flex:1;background:transparent;border:none;outline:none;padding:10px 18px;color:var(--ink);font-size:15px;font-family:var(--sans)}
.input-row-dark input::placeholder{color:var(--text-3)}
.input-row-dark .float-label{color:var(--text-3)}
.btn-light{background:var(--ink);color:#FFF;border-radius:12px;padding:11px 22px;border:none;font-weight:500;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .2s,box-shadow .2s}
.btn-light:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(26,24,20,.18)}

/* The closing CTA is the only signup below the hero. It was hidden when
   .ch-outro carried a replacement — that element no longer exists. */

@media (max-width:780px){
  .ch-chapter{top:56px}
  .ch-chapter-inner{padding:10px 18px;gap:12px}
  .ch-chapter-eyebrow{font-size:10px}
  .ch-chapter-dots{gap:24px}
  .act{padding:60px 18px 24px}
  .act-num{font-size:48px}
  .act-desc{font-size:16px}
  .act-topbar{padding-bottom:18px;gap:14px}
  .act-channel{padding:5px 11px;font-size:10px}
  .act-divider{padding:36px 18px}
  .ch-outro{padding:90px 24px 110px}
}

.ch-tabs{display:inline-flex;gap:4px;margin-bottom:40px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:999px;padding:5px;position:relative}
.ch-tab{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:22px;border:none;background:transparent;font-family:var(--sans);font-size:13px;font-weight:500;color:rgba(255,255,255,0.7);cursor:pointer;letter-spacing:-.005em;white-space:nowrap;text-align:left;line-height:1.2}
.ch-tab > .ch-tab-text{display:flex;flex-direction:column;gap:1px}
.ch-tab-title{font-weight:600;letter-spacing:-.012em;font-size:13px}
.ch-tab-sub{font-family:var(--mono);font-size:10px;font-weight:400;color:rgba(255,255,255,.42);letter-spacing:.01em}
.ch-tab.active .ch-tab-sub{color:rgba(15,16,18,.5)}
.ch-tab.hidden-prop-unused{color:rgba(255,255,255,0.65);cursor:pointer;transition:color .2s;white-space:nowrap;letter-spacing:-0.005em}
.ch-tab.active{background:#FFF;color:var(--ink);box-shadow:0 4px 16px rgba(0,0,0,0.18)}
.ch-tab-dot{width:8px;height:8px;border-radius:50%}
/* legacy .ch-panel display rules removed */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ============ WINDOW FRAME ============ */
.win-frame{border-radius:18px;overflow:hidden;background:#FFF;color:var(--text);box-shadow:0 30px 60px -20px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.06)}
.win-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);background:#FAFAFB}
.win-dots{display:flex;gap:6px}
.win-dot{width:11px;height:11px;border-radius:50%}
.wd-r{background:#FF5F57}.wd-y{background:#FFBD2E}.wd-g{background:#28C840}
.win-title{font-size:12px;color:var(--text-3);font-family:var(--mono);margin:0 auto;letter-spacing:-0.01em}

/* OUTLOOK — Mac (Fluent 2026) */
.ol-frame{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;background:#FAF9F8;color:#242424}
.ol-titlebar{display:flex;align-items:center;gap:14px;background:#1E6BE2;padding:0 14px;height:38px;color:#FFF;position:relative}
.ol-mac-dots{display:flex;gap:8px;align-items:center;padding-right:4px}
.ol-mac-dots i{width:12px;height:12px;border-radius:50%;display:block}
.ol-mac-dots .r{background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.ol-mac-dots .y{background:#FEBC2E;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.ol-mac-dots .g{background:#28C840;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.18)}
.ol-app{display:none}
.ol-app-icon{display:none}
.ol-search{flex:1;max-width:680px;margin:0 auto;background:rgba(255,255,255,0.16);border:none;border-radius:6px;height:26px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;font-size:13px;color:rgba(255,255,255,0.92);font-weight:400}
.ol-search .ic-svg{width:13px;height:13px;color:rgba(255,255,255,.85);stroke-width:2}
.ol-icon-btn .ic-svg{width:16px;height:16px;color:#FFF;stroke-width:1.8}
.ol-search-icon{opacity:0.95}
.ol-titlebar-r{display:flex;align-items:center;gap:14px;font-size:12px;color:#FFF}
.ol-icon-btn{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;background:transparent;color:#FFF;font-size:14px;cursor:pointer;position:relative}
.ol-icon-btn:hover{background:rgba(255,255,255,0.14)}
.ol-bell-badge{position:absolute;top:-2px;right:-2px;background:#E04141;color:#FFF;font-size:9px;font-weight:700;border-radius:8px;min-width:14px;height:14px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1}
.ol-account{display:none}

.ol-ribbon{display:flex;align-items:center;gap:2px;padding:6px 10px 6px 14px;background:#F4F2EF;border-bottom:1px solid #E8E4DE;font-size:12.5px;color:#3C3A37}
.ol-newmail{display:inline-flex;align-items:center;gap:8px;background:#1E6BE2;color:#FFF;padding:7px 16px;border-radius:6px;font-size:12.5px;font-weight:600;letter-spacing:-0.005em;cursor:pointer;box-shadow:0 1px 2px rgba(30,107,226,.25);margin-right:10px}
.ol-newmail .nm-ico{font-size:13px;line-height:1}
.ol-rb-hamburger{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#3C3A37;cursor:pointer;font-size:14px;margin-right:4px}
.ol-rb-hamburger:hover{background:#E8E4DE}
.ol-ribbon-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:6px;cursor:pointer;font-weight:500;color:#3C3A37;font-size:12.5px;letter-spacing:-0.005em}
.ol-ribbon-btn:hover{background:#E8E4DE}
.ol-ribbon-btn .rb-ico{font-size:13px;color:#605E5C}
.ol-ribbon-btn.primary{display:none}
.ol-ribbon-sep{width:1px;height:18px;background:#D9D4CC;margin:0 4px}
.ol-ribbon-spacer{flex:1}

.ol-layout{display:grid;grid-template-columns:48px 200px 300px 492px;height:620px;background:#FFF;overflow:hidden}
.ol-nav{background:#F4F2EF;border-right:1px solid #E8E4DE;padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:2px}
.ol-nav-plus{width:32px;height:32px;border-radius:50%;background:#FFF;border:1px solid #D9D4CC;display:flex;align-items:center;justify-content:center;color:#1E6BE2;font-size:18px;font-weight:300;margin-bottom:8px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.ol-nav-btn{width:34px;height:34px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#605E5C;font-size:15px;cursor:pointer;position:relative}
.ol-nav-btn:hover{background:#EAE7E0}
.ol-nav-btn.act{background:#E3EDFC;color:#1E6BE2}
.ol-nav-btn.act::before{display:none}

.ol-sidebar{background:#FAF9F8;border-right:1px solid #E8E4DE;padding:14px 0 10px;overflow:auto;min-height:0}
.ol-folders-hd{display:flex;justify-content:flex-start;align-items:center;gap:6px;padding:6px 14px;font-size:12.5px;font-weight:600;color:#242424;letter-spacing:-0.008em;cursor:pointer}
.ol-folders-hd::before{content:"›";color:#605E5C;font-weight:400;font-size:13px;display:inline-block;transform:rotate(90deg)}
.ol-folders-hd.collapsed::before{transform:rotate(0deg)}
.ol-folder{padding:5px 14px 5px 30px;font-size:12.5px;color:#3C3A37;display:flex;justify-content:space-between;align-items:center;cursor:pointer;position:relative;letter-spacing:-0.005em;border-radius:0}
.ol-folder:hover{background:#EFEBE4}
.ol-folder.act{background:#E3EDFC;color:#1E6BE2;font-weight:600}
.ol-folder.act::before{display:none}
.ol-folder .ic{position:absolute;left:14px;color:#605E5C;font-size:12px}
.ol-folder.act .ic{color:#1E6BE2}
.ol-badge{font-size:11.5px;font-weight:600;color:#1E6BE2;letter-spacing:-0.005em}
.ol-folders-sub{font-size:10.5px;font-weight:600;color:#605E5C;text-transform:uppercase;letter-spacing:0.06em;padding:14px 14px 4px;display:flex;align-items:center;gap:6px}
.ol-folders-sub::before{content:"›";color:#605E5C;font-weight:400;font-size:13px}
.ol-agent-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-right:8px}

.ol-list{border-right:1px solid #E8E4DE;display:flex;flex-direction:column;background:#FFF;min-height:0;overflow:hidden}
.ol-list-toggle{display:flex;align-items:center;gap:0;padding:10px 14px 8px;border-bottom:1px solid #F0EDE6;justify-content:space-between}
.ol-list-pills{display:flex;background:#F4F2EF;border-radius:14px;padding:2px;font-size:12px;font-weight:500}
.ol-list-pill{padding:4px 14px;border-radius:12px;cursor:pointer;color:#605E5C;letter-spacing:-0.005em}
.ol-list-pill.act{background:#FFF;color:#242424;box-shadow:0 1px 2px rgba(0,0,0,.06);font-weight:600}
.ol-list-filter{width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#605E5C;font-size:13px;cursor:pointer}
.ol-list-filter:hover{background:#F0EDE6}
.ol-list-hd{display:none}
.ol-list-body{flex:1;overflow:auto}
.ol-list-day{font-size:12px;font-weight:600;color:#3C3A37;padding:10px 14px 6px;display:flex;align-items:center;gap:6px;letter-spacing:-0.005em;background:#FFF}
.ol-list-day::before{content:"˅";color:#605E5C;font-size:10px}
.ol-item{padding:10px 14px 10px 22px;border-bottom:none;cursor:pointer;position:relative;display:flex;gap:10px;margin:0 6px;border-radius:6px}
.ol-item:hover{background:#F4F2EF}
.ol-item.act{background:#E3EDFC}
.ol-item.act::before{display:none}
.ol-item.ol-unread::after{content:"";position:absolute;left:8px;top:50%;transform:translateY(-50%);width:7px;height:7px;background:#1E6BE2;border-radius:50%}
.ol-avatar-sm{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:11px;font-weight:600;flex-shrink:0;letter-spacing:0.02em}
.ol-item-main{flex:1;min-width:0}
.ol-item-row1{display:flex;justify-content:space-between;align-items:baseline;gap:6px;margin-bottom:2px}
.ol-item-from{font-size:13px;font-weight:600;color:#242424;letter-spacing:-0.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ol-item-time{font-size:11.5px;color:#605E5C;flex-shrink:0;font-weight:500}
.ol-item.ol-unread .ol-item-time,.ol-item.ol-unread .ol-item-from{color:#1E6BE2}
.ol-item-subj{font-size:12px;color:#3C3A37;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-0.005em}
.ol-item.ol-unread .ol-item-subj{font-weight:600;color:#242424}
.ol-item-prev{font-size:11.5px;color:#605E5C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.005em}
.ol-item-flag{position:absolute;right:12px;bottom:12px;color:#D83B01;font-size:11px}
.ol-item-attach{position:absolute;right:14px;top:12px;color:#605E5C;font-size:13px;transform:rotate(-25deg)}
.ol-item .sent-pill{display:inline-flex;align-items:center;background:#E3EDFC;color:#1E6BE2;font-size:10.5px;font-weight:600;border-radius:3px;padding:0 6px;margin-left:6px;letter-spacing:-0.005em}

.ol-content{background:#FFF;display:flex;flex-direction:column;overflow:auto;position:relative;min-height:0}
.ol-actbar{display:flex;align-items:center;gap:0;padding:8px 22px;border-bottom:1px solid #F0EDE6;font-size:12px;color:#3C3A37;justify-content:flex-end}
.ol-actbar-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;cursor:pointer;color:#605E5C;font-size:14px}
.ol-actbar-btn:hover{background:#F4F2EF}
.ol-actbar-btn .ic{display:none}
.ol-actbar-sep{display:none}
.ol-actbar-spacer{display:none}
.ol-readpane{padding:18px 28px 28px;flex:1}
.ol-subj{font-size:19px;font-weight:700;color:#242424;margin-bottom:14px;letter-spacing:-0.018em;line-height:1.3}
.ol-meta-row{display:none}
.ol-email-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px;padding-bottom:0;border-bottom:none}
.ol-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:14px;font-weight:600;flex-shrink:0;letter-spacing:0.02em}
.ol-head-main{flex:1;min-width:0}
.ol-from-row{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.ol-from-row::before{content:"•";color:#1E924E;font-size:13px;margin-right:-2px}
.ol-from-name{font-size:14px;font-weight:600;color:#242424;letter-spacing:-0.005em}
.ol-from-role{display:none}
.ol-from-email{font-size:13px;color:#242424;font-weight:500}
.ol-to-row{font-size:12.5px;color:#3C3A37;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ol-to-row strong{color:#242424;font-weight:500}
.ol-to-row .lbl{color:#605E5C;font-weight:500;min-width:18px}
.ol-to-row .cc-lbl{color:#605E5C;font-weight:500;margin-left:6px}
.ol-to-row .chev{color:#605E5C;font-size:10px}
.ol-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-size:11.5px;color:#605E5C;flex-shrink:0}
.ol-head-time{font-size:12px;color:#605E5C;font-weight:500}

.ol-body{font-size:13.5px;color:#242424;line-height:1.7;letter-spacing:-0.005em}
.ol-body p{margin-bottom:14px}
.ol-typing{padding:10px 14px;border-top:1px solid #EDEBE9;background:#FAF9F8;font-size:11.5px;color:#605E5C;display:flex;align-items:center;gap:8px}
.ol-typing-dots{display:inline-flex;gap:3px}
.ol-typing-dots span{width:4px;height:4px;border-radius:50%;background:#605E5C;opacity:.4;animation:typingDot 1.4s infinite}
.ol-typing-dots span:nth-child(2){animation-delay:.2s}
.ol-typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingDot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

.ol-meta-pill{display:none}

.ol-body{font-size:13.5px;color:#242424;line-height:1.7;letter-spacing:-0.005em}
.ol-body p{margin-bottom:14px}
.ol-section{margin-top:22px}
.ol-section-hd{font-family:"DM Mono",ui-monospace,monospace;font-size:10.5px;color:#605E5C;text-transform:uppercase;letter-spacing:0.12em;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.ol-section-hd::after{content:"";flex:1;height:1px;background:#EDEBE9}
.ol-section-hd .count{font-family:"Segoe UI",sans-serif;color:#605E5C;font-weight:500;letter-spacing:-0.01em;text-transform:none;font-size:11px}
.ol-row{display:grid;grid-template-columns:14px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #F3F2F1;font-size:13px;line-height:1.55}
.ol-row:last-child{border-bottom:none}
.ol-dot{width:8px;height:8px;border-radius:50%;margin-top:7px}
.ol-dot.r{background:#D83B01;box-shadow:0 0 0 3px rgba(216,59,1,0.12)}
.ol-dot.y{background:#CA8B02;box-shadow:0 0 0 3px rgba(202,139,2,0.12)}
.ol-dot.g{background:#107C10;box-shadow:0 0 0 3px rgba(16,124,16,0.12)}
.ol-dot.b{background:#2564CF;box-shadow:0 0 0 3px rgba(37,100,207,0.12)}
.ol-dot.v{background:#8B6FE8;box-shadow:0 0 0 3px rgba(139,111,232,0.12)}
.ol-row strong{font-weight:600;color:#242424}
.ol-row .sub{color:#605E5C}
.ol-action{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:#2564CF;background:#EFF6FC;border:1px solid #DEECF9;border-radius:3px;padding:2px 8px;margin-left:6px;cursor:pointer;font-weight:500;letter-spacing:-0.005em;transition:background .15s;text-decoration:none;vertical-align:1px}
.ol-action:hover{background:#DEECF9}
.ol-suggested{margin-top:22px;background:#F1FAF5;border:1px solid #C8EDD8;border-left:3px solid #107C10;border-radius:4px;padding:14px 16px}
.ol-suggested .ol-section-hd{margin-top:0;margin-bottom:10px}
.ol-suggested .ol-section-hd::after{background:#C8EDD8}
.ol-suggested .ol-row{border-bottom-color:rgba(16,124,16,0.12)}
.ol-suggested .ol-row:last-child{border-bottom:none}
.ol-sig{margin-top:24px;padding-top:14px;border-top:1px solid #EDEBE9;color:#605E5C;font-size:12.5px}
.ol-sig-name{color:#242424;font-weight:600;font-size:13px}

@media(max-width:1100px){
  .ol-layout{grid-template-columns:48px 280px 1fr}
  .ol-sidebar{display:none}
  .ol-head-r{display:none}
  .ol-from-row{flex-wrap:wrap}
}
@media(max-width:820px){
  .ol-layout{grid-template-columns:1fr}
  .ol-titlebar,.ol-ribbon,.ol-nav,.ol-list{display:none}
  .ol-readpane{padding:18px 20px 24px}
}

/* WHATSAPP */
.wa-stage{display:grid;grid-template-columns:auto;justify-content:center;align-content:center;padding:36px 0;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",sans-serif;position:relative}
:root{
  --ip-radius:55px;--ip-pad:6px;--ip-railw:2px;--ip-bg:#0b0b0d;
  --ip-rail:#a6a7ad;--ip-rail2:#dcdde2;
  --ip-shadow:inset 0 0 0 1.5px var(--ip-rail2);
  --ip-screen-radius:46px;
  --ip-isl-w:104px;--ip-isl-h:25px;--ip-isl-top:14px;--ip-isl-radius:13px;
  --ip-isl-bg:#000 radial-gradient(circle 3.5px at calc(100% - 13px) 50%,#26323f 0%,#0a0d12 62%,rgba(0,0,0,0) 66%);
  --ip-isl-shadow:inset 0 0 1px rgba(255,255,255,.16),0 1px 2px rgba(0,0,0,.4);
  --ip-btn:#7c7d83;
}
/* Shared iPhone 17 Pro bezel — single source of truth for all 3 mocks */
.wa-phone{width:360px;box-sizing:border-box;border:var(--ip-railw) solid var(--ip-rail);border-radius:var(--ip-radius);background:var(--ip-bg);padding:var(--ip-pad);position:relative;box-shadow:var(--ip-shadow)}

/* ============================================================
   REUSABLE iPhone 17 Pro bezel asset — for ANY future mock:
     <div class="ios-bezel"><div class="ios-bezel-screen"> …screen… </div></div>
   The Dynamic Island is drawn automatically (::after) — no extra markup.
   Every value comes from the --ip-* variables above, so this frame,
   the WhatsApp .wa-phone, and the Outlook/Teams bezels stay identical.
   ============================================================ */
.ios-bezel{width:360px;height:758px;box-sizing:border-box;border:var(--ip-railw) solid var(--ip-rail);border-radius:var(--ip-radius);background:var(--ip-bg);padding:var(--ip-pad);position:relative;box-shadow:var(--ip-shadow)}
.ios-bezel::after{content:"";position:absolute;top:var(--ip-isl-top);left:50%;transform:translateX(-50%);width:var(--ip-isl-w);height:var(--ip-isl-h);border-radius:var(--ip-isl-radius);background:var(--ip-isl-bg);box-shadow:var(--ip-isl-shadow);z-index:40}
.ios-bezel-screen{width:100%;height:100%;border-radius:var(--ip-screen-radius);overflow:hidden;background:#fff;position:relative;display:flex;flex-direction:column}
/* Shared physical side buttons (action+volume left, power right) — drawn on the frame's free ::before, no markup */
.wa-phone::before,
.ios-bezel::before,
.cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ol-frame::before,
.cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-frame::before{
  content:"";position:absolute;inset:-8px;border-radius:63px;pointer-events:none;z-index:3;
  background:linear-gradient(180deg,var(--ip-btn) 0 24px,transparent 24px 44px,var(--ip-btn) 44px 80px,transparent 80px 88px,var(--ip-btn) 88px 122px) left 3px top 146px / 5px 122px no-repeat,linear-gradient(var(--ip-btn),var(--ip-btn)) right 3px top 230px / 5px 64px no-repeat;
}
/* let the side buttons protrude past the phone edge (unclip the wrappers, screen still self-clips) */
.cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .cpf-media,
.cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .cpf-scale,
.cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ch-panel,
.cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ch-panel > *,
.cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .wa-stage,
.cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .wa-conv-pane,
.cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .wa-phone,
.cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ol-frame,
.cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-frame{overflow:visible!important}
.wa-screen{border-radius:46px;overflow:hidden;background:#FFF;position:relative;display:flex;flex-direction:column;height:740px}
.wa-island{position:absolute;top:var(--ip-isl-top);left:50%;transform:translateX(-50%);width:var(--ip-isl-w);height:var(--ip-isl-h);border-radius:var(--ip-isl-radius);z-index:30;background:var(--ip-isl-bg);box-shadow:var(--ip-isl-shadow)}
.wa-statusbar{background:transparent;padding:18px 32px 8px;display:flex;justify-content:space-between;align-items:center;color:#000;font-size:15.5px;font-weight:600;letter-spacing:-0.015em;height:54px;position:relative;z-index:5}
.wa-statusbar .wa-time{padding-left:4px}
.wa-statusbar .wa-sb-icons{display:flex;align-items:center;gap:5px;padding-right:2px}
.wa-header{background:rgba(247,247,247,0.92);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:0.5px solid rgba(0,0,0,0.12);padding:4px 10px 8px;display:flex;align-items:center;gap:6px;position:relative;z-index:4}
.wa-back{color:#00A884;display:flex;align-items:center;gap:1px;cursor:pointer;padding:4px 4px 4px 0}
.wa-back-chev{font-size:28px;font-weight:300;line-height:1;letter-spacing:-2px;margin-right:-2px}
.wa-back-count{font-size:13px;font-weight:400;letter-spacing:-0.01em}
.wa-header-center{flex:1;display:flex;align-items:center;gap:9px;padding-left:4px;min-width:0}
.wa-av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#F5A06A 0%,#D67844 100%);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:600;flex-shrink:0;position:relative;letter-spacing:-0.01em}
.wa-av::after{content:"";position:absolute;bottom:-1px;right:-1px;width:11px;height:11px;border-radius:50%;background:#25D366;border:2px solid #F7F7F7;box-shadow:0 0 0 0.5px rgba(0,0,0,0.05)}
.wa-info{flex:1;line-height:1.18;min-width:0}
.wa-name{font-size:14px;font-weight:600;color:#000;letter-spacing:-0.012em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wa-status{font-size:11.5px;color:#8E8E93;letter-spacing:-0.005em;margin-top:1px}
.wa-status .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#25D366;margin-right:5px;vertical-align:1px}
.wa-header-actions{display:flex;align-items:center;gap:20px;color:#00A884;padding:0 6px 0 4px}
.wa-header-actions svg{display:block}
.wa-body{background:#E5DDD5;flex:1;padding:14px 8px 6px;display:flex;flex-direction:column;gap:3px;position:relative;overflow-y:auto;overflow-x:hidden;background-image:url("data:image/svg+xml,%3Csvg width='150' height='150' viewBox='0 0 150 150' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23D3C7B4' stroke-width='1.3' opacity='0.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 22 q-3 -4 -6 -1 q-3 3 6 9 q9 -6 6 -9 q-3 -3 -6 1'/%3E%3Ccircle cx='60' cy='18' r='5'/%3E%3Cpath d='M100 16 q8 -3 14 4 q-8 3 -14 -4'/%3E%3Cpath d='M126 30 l4 -5 l4 5 l4 -5'/%3E%3Cpath d='M30 60 l3 6 l6 0 l-5 4 l2 6 l-6 -4 l-6 4 l2 -6 l-5 -4 l6 0 z'/%3E%3Cpath d='M70 55 h12 v9 a6 6 0 0 1 -12 0 z'/%3E%3Ccircle cx='116' cy='62' r='4'/%3E%3Cpath d='M18 100 q6 -8 12 0 t12 0'/%3E%3Cpath d='M62 95 q-3 -4 -6 -1 q-3 3 6 9 q9 -6 6 -9 q-3 -3 -6 1'/%3E%3Cpath d='M100 100 l5 -5 l5 5 l5 -5'/%3E%3Ccircle cx='134' cy='108' r='5'/%3E%3Cpath d='M24 134 l3 6 l6 0 l-5 4 l2 6 l-6 -4 l-6 4 l2 -6 l-5 -4 l6 0 z'/%3E%3Cpath d='M68 130 q8 -3 14 4 q-8 3 -14 -4'/%3E%3Cpath d='M108 136 q6 -8 12 0 t12 0'/%3E%3C/g%3E%3C/svg%3E")}
.wa-body::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(229,221,213,0.45) 0%,rgba(229,221,213,0) 9%,rgba(229,221,213,0) 94%,rgba(229,221,213,0.35) 100%);pointer-events:none;z-index:1}
.wa-date-badge{text-align:center;margin:4px 0 10px;position:relative;z-index:2}
.wa-date-badge span{font-size:12.5px;color:#54656F;background:rgba(225,245,254,0.92);border-radius:8px;padding:5px 12px 4px;font-weight:500;letter-spacing:0.02em;box-shadow:0 1px 0.5px rgba(0,0,0,0.06)}
.wa-encryption{text-align:center;font-size:11.5px;color:#54656F;background:rgba(255,243,196,0.92);border-radius:8px;padding:7px 18px;margin:0 auto 10px;max-width:300px;line-height:1.4;position:relative;z-index:2;box-shadow:0 1px 0.5px rgba(0,0,0,0.06)}
.wa-msg{max-width:78%;padding:6px 9px 8px;border-radius:8px;font-size:15px;line-height:1.32;position:relative;word-break:break-word;box-shadow:0 1px 0.5px rgba(0,0,0,0.13);color:#111B21;letter-spacing:-0.01em;z-index:2;white-space:pre-line}
.wa-msg.out{align-self:flex-end;background:#D9FDD3;border-top-right-radius:0;margin-right:9px}
.wa-msg.in{align-self:flex-start;background:#FFFFFF;border-top-left-radius:0;margin-left:9px}
.wa-msg.out::after{content:"";position:absolute;top:0;right:-8px;width:8px;height:13px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='13'%3E%3Cpath%20d='M5.188%201H0v11.193l6.467-8.625C7.526%202.156%206.958%201%205.188%201z'%20fill='%23D9FDD3'/%3E%3C/svg%3E") top left no-repeat}
.wa-msg.in::after{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='13'%3E%3Cpath%20d='M2.812%201H8v11.193L1.533%203.568C.474%202.156%201.042%201%202.812%201z'%20fill='%23ffffff'/%3E%3C/svg%3E") top left no-repeat}
.wa-msg.cont{margin-top:1px}
.wa-msg.cont::after{display:none}
.wa-msg.cont.out{border-top-right-radius:8px;margin-right:9px}
.wa-msg.cont.in{border-top-left-radius:8px;margin-left:9px}
.wa-meta{display:inline-flex;align-items:center;gap:2px;float:right;margin-left:10px;margin-top:8px;line-height:1;transform:translateY(2px)}
.wa-time{font-size:11px;color:#667781;letter-spacing:-0.005em}
.wa-tick{display:inline-block;width:16px;height:11px;margin-left:-1px;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg' fill='%2353BDEB'%3E%3Cpath d='M17.394 5.035l-.57-.444a.434.434 0 0 0-.609.076l-6.39 8.198a.38.38 0 0 1-.577.039l-.427-.388a.381.381 0 0 0-.578.038l-.451.576a.497.497 0 0 0 .043.645l1.575 1.51a.38.38 0 0 0 .577-.039l7.483-9.602a.436.436 0 0 0-.076-.609zm-4.892 0l-.57-.444a.434.434 0 0 0-.609.076l-6.39 8.198a.38.38 0 0 1-.577.039l-2.614-2.556a.435.435 0 0 0-.614.007l-.505.516a.435.435 0 0 0 .007.614l3.887 3.8a.38.38 0 0 0 .577-.039l7.483-9.602a.435.435 0 0 0-.075-.609z'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;background-position:center}
.wa-typing{align-self:flex-start;background:#FFFFFF;border-radius:8px;border-top-left-radius:0;padding:11px 14px;margin-left:9px;box-shadow:0 1px 0.5px rgba(0,0,0,0.13);display:inline-flex;align-items:center;gap:4px;position:relative;z-index:2;width:fit-content}
.wa-typing::after{content:"";position:absolute;top:0;left:-8px;width:8px;height:13px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='13'%3E%3Cpath%20d='M2.812%201H8v11.193L1.533%203.568C.474%202.156%201.042%201%202.812%201z'%20fill='%23ffffff'/%3E%3C/svg%3E") top left no-repeat}
/* tailless rounded bubbles — no languette */
.wa-msg.out,.wa-msg.in,.wa-typing{border-radius:8px!important}
.wa-msg.out::after,.wa-msg.in::after,.wa-typing::after{display:none!important}
.wa-typing-dot{width:7px;height:7px;border-radius:50%;background:#8696A0;opacity:0.45;animation:waDot 1.3s infinite ease-in-out}
.wa-typing-dot:nth-child(2){animation-delay:0.18s}
.wa-typing-dot:nth-child(3){animation-delay:0.36s}
@keyframes waDot{0%,60%,100%{opacity:0.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.wa-typing-label{align-self:flex-start;font-size:11px;color:#667781;margin:2px 0 0 14px;letter-spacing:-0.005em;z-index:2;font-style:italic}
.wa-input-zone{background:#F7F7F7;padding:7px 7px 7px;display:flex;align-items:flex-end;gap:5px;border-top:0.5px solid rgba(0,0,0,0.06)}
.wa-plus{width:30px;height:34px;background:transparent;color:#54656F;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:28px;font-weight:300;line-height:1}
.wa-input-pill{flex:1;background:#FFF;border:0.5px solid rgba(0,0,0,0.1);border-radius:20px;padding:8px 10px 8px 14px;display:flex;align-items:flex-end;gap:8px;min-height:38px;max-height:400px;overflow:visible}
.wa-input-text{flex:1;font-size:15px;color:#8E8E93;letter-spacing:-0.005em;line-height:1.35;white-space:pre-wrap;word-break:break-word;padding-bottom:1px}
.wa-sticker{flex-shrink:0;width:22px;height:22px;color:#54656F;display:flex;align-items:center;justify-content:center;margin-bottom:1px}
.wa-cam{width:30px;height:34px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#54656F}
.wa-mic{width:30px;height:34px;background:transparent;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#54656F}
.wa-send{width:38px;height:38px;border-radius:50%;background:#25D366;display:none;align-items:center;justify-content:center;flex-shrink:0;color:#FFF;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.wa-input-zone.cn-has-input .wa-mic,.wa-input-zone.cn-has-input .wa-cam{display:none}
.wa-input-zone.cn-has-input .wa-send{display:flex;animation:waSendIn .22s cubic-bezier(.3,1.5,.4,1)}
@keyframes waSendIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
.wa-home-indicator{background:#F7F7F7;padding:8px 0 10px;display:flex;justify-content:center}
.wa-home-indicator::after{content:"";width:138px;height:5px;background:#000;border-radius:3px;opacity:0.85}

/* TEAMS — New Teams (Mac) 2026 */
.tm-frame{font-family:-apple-system,"SF Pro Text",BlinkMacSystemFont,"Segoe UI Variable","Segoe UI",sans-serif;background:#F5F5F5;color:#242424;letter-spacing:-0.005em}
.tm-titlebar{display:flex;align-items:center;background:#F0F0F0;padding:0 14px;height:40px;gap:12px;border-bottom:1px solid #E1E1E1;position:relative}
.tm-mac-dots{display:flex;gap:8px;align-items:center;padding-right:4px}
.tm-mac-dots i{width:12px;height:12px;border-radius:50%;display:block}
.tm-mac-dots .r{background:#FF5F57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.tm-mac-dots .y{background:#FEBC2E;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.tm-mac-dots .g{background:#28C840;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.2)}
.tm-tb-l{display:flex;align-items:center;gap:4px}
.tm-tb-arrow{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#424242;cursor:pointer}
.tm-tb-arrow .ic-svg{width:16px;height:16px}
.tm-tb-arrow:hover{background:#E1E1E1}
.tm-tb-arrow.dim{color:#B0B0B0}
.tm-search{flex:1;max-width:640px;margin:0 auto;background:#FFF;border:1px solid #D9D9D9;border-radius:6px;height:28px;display:flex;align-items:center;gap:8px;padding:0 14px;font-size:12.5px;color:#605E5C;font-weight:400}
.tm-tb-r{display:flex;align-items:center;gap:6px}
.tm-tb-icon{width:26px;height:26px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#424242;font-size:14px;cursor:pointer}
.tm-tb-icon:hover{background:#E1E1E1}
.tm-account{width:26px;height:26px;border-radius:50%;background:#A4262C;color:#FFF;display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:600;letter-spacing:0.01em;position:relative}
.tm-account::after{content:"";position:absolute;bottom:-1px;right:-1px;width:8px;height:8px;border-radius:50%;background:#13A10E;border:1.5px solid #F0F0F0}

.tm-layout{display:grid;grid-template-columns:54px 240px 580px;height:620px;background:#FFF;overflow:hidden}
.tm-rail{background:#F4F2EF;border-right:1px solid #E1E1E1;padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:0}
.tm-rail-btn{width:46px;height:48px;display:flex;align-items:center;justify-content:center;color:#424242;cursor:pointer;border-radius:6px;position:relative;margin:1px 0}
.tm-rail-btn:hover{background:#EBE8E2}
.tm-rail-btn.act{color:#5B5FC7}
.tm-rail-btn.act::before{content:"";position:absolute;left:-4px;top:8px;bottom:8px;width:3px;background:#5B5FC7;border-radius:0 3px 3px 0}
.tm-rail-btn.act .ic-svg{color:#5B5FC7}
.tm-rail-badge{position:absolute;top:6px;right:6px;background:#A4262C;color:#FFF;font-size:9px;font-weight:700;border-radius:8px;min-width:14px;height:14px;display:flex;align-items:center;justify-content:center;padding:0 3px;line-height:1;border:1.5px solid #F4F2EF}
.tm-rail-spacer{flex:1}
.tm-rail-divider{width:32px;height:1px;background:#D9D4CC;margin:6px 0}

.tm-panel{background:#FAFAFA;border-right:1px solid #E1E1E1;display:flex;flex-direction:column;overflow:hidden}
.tm-panel-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px 8px;border-bottom:none}
.tm-panel-title{font-size:16px;font-weight:700;color:#242424;letter-spacing:-0.018em}
.tm-panel-actions{display:flex;align-items:center;gap:2px;color:#424242}
.tm-panel-actions .tm-tb-icon{width:24px;height:24px;font-size:13px}
.tm-panel-chips{display:flex;gap:6px;padding:0 14px 8px;align-items:center}
.tm-panel-chip{font-size:12px;padding:3px 10px;border-radius:14px;color:#424242;cursor:pointer;background:#FFF;border:1px solid #E1E1E1;letter-spacing:-0.005em;font-weight:500}
.tm-panel-chip.act{background:#EBE8FF;border-color:#C5C9F0;color:#3F44A8;font-weight:600}
.tm-panel-chip.right{margin-left:auto;border:none;background:transparent;color:#605E5C;padding:3px 6px}
.tm-panel-chip .ic-svg{width:13px;height:13px;color:#605E5C}
.tm-panel-body{flex:1;overflow:auto;padding:4px 0 12px}
.tm-team-hd{display:flex;align-items:center;gap:6px;padding:5px 14px;cursor:pointer;font-size:12.5px;font-weight:600;color:#242424}
.tm-team-hd:hover{background:#F0F0F0}
.tm-team-chev{color:#605E5C;font-size:10px;width:12px;display:inline-flex;justify-content:center}
.tm-team-icon{width:22px;height:22px;border-radius:4px;background:linear-gradient(135deg,#5B5FC7,#7B5BD9);color:#FFF;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;letter-spacing:0}
.tm-team-icon.gold{background:linear-gradient(135deg,#CA8B02,#E0A93E)}
.tm-team-icon.green{background:linear-gradient(135deg,#107C10,#1B8A1B)}
.tm-channels{padding:1px 0 6px}
.tm-channel{display:flex;align-items:center;gap:6px;padding:5px 14px 5px 38px;cursor:pointer;font-size:12.5px;color:#3C3A37;position:relative;border-radius:0;margin:0 4px;border-radius:6px}
.tm-channel:hover{background:#F0F0F0}
.tm-channel.act{background:#E3EDFC;color:#1E6BE2;font-weight:600}
.tm-channel.act::before{display:none}
.tm-channel-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-channel .pin{color:#605E5C;font-size:9px;opacity:0.7;position:absolute;left:22px}
.tm-channel .lock{color:#605E5C;font-size:10px;position:absolute;left:22px}
.tm-channel-badge{font-size:11px;background:#A4262C;color:#FFF;border-radius:10px;padding:0 7px;font-weight:700;letter-spacing:-0.005em;min-width:18px;text-align:center;height:16px;display:inline-flex;align-items:center;justify-content:center}
.tm-panel-foot{padding:8px 14px;font-size:12px;color:#1E6BE2;cursor:pointer;border-top:1px solid #F0F0F0}

.tm-main{display:flex;flex-direction:column;background:#FFF;overflow:hidden}
.tm-ch-head{padding:8px 18px;border-bottom:none;display:flex;align-items:center;justify-content:space-between;gap:14px}
.tm-ch-l{display:flex;align-items:center;gap:10px;min-width:0}
.tm-ch-icon{width:28px;height:28px;border-radius:5px;background:linear-gradient(135deg,#3D7AE8,#1E6BE2);color:#FFF;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.tm-ch-name{font-size:15px;font-weight:700;color:#242424;letter-spacing:-0.012em;display:flex;align-items:center;gap:14px}
.tm-ch-name .hash{display:none}
.tm-ch-star{display:none}
.tm-ch-meta{display:none}
.tm-ch-r{display:flex;align-items:center;gap:4px}
.tm-meet-btn,.tm-meet-split{display:none}
.tm-icon-btn{width:30px;height:30px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#424242;cursor:pointer;font-size:14px}
.tm-icon-btn:hover{background:#F0F0F0}

.tm-tabs{display:flex;align-items:center;gap:0;padding:0 18px;border-bottom:1px solid #E1E1E1;background:#FFF;margin-top:-2px}
.tm-tab{padding:8px 14px 10px;font-size:13px;font-weight:500;color:#605E5C;cursor:pointer;border-bottom:2px solid transparent;letter-spacing:-0.005em;display:flex;align-items:center;gap:6px;position:relative;top:1px}
.tm-tab.act{color:#5B5FC7;border-bottom-color:#5B5FC7;font-weight:600}
.tm-tab:hover:not(.act){color:#242424}
.tm-tab-plus{display:none}

.tm-messages{flex:1;padding:14px 24px 8px;display:flex;flex-direction:column;gap:6px;overflow:auto;background:#FFF}
.tm-day-divider{display:flex;align-items:center;gap:10px;color:#605E5C;font-size:11.5px;font-weight:500;margin:4px 0 8px;letter-spacing:0.01em;justify-content:center}
.tm-day-divider::before,.tm-day-divider::after{content:"";flex:1;height:1px;background:#E8E8E8}

.tm-msg{display:flex;gap:12px;padding:6px 8px;border-radius:6px;position:relative}
.tm-msg:hover{background:#F8F8F8}

/* Sarah's own messages — right-aligned card */
.tm-msg-me{justify-content:flex-end}
.tm-msg-me .tm-msg-body{flex:0 1 auto;max-width:70%}
.tm-msg-me .tm-msg-meta{justify-content:flex-end;color:#605E5C}
.tm-msg-me .tm-msg-name{display:none}
.tm-msg-me .tm-msg-time{margin-left:0;font-size:11.5px;color:#605E5C}
.tm-msg-me .tm-msg-text{background:#5B5FC7;color:#fff;padding:8px 12px;border-radius:14px 14px 4px 14px;font-size:13.5px;line-height:1.5}
.tm-msg-me .tm-av{display:none}
.tm-readreceipt{font-size:10.5px;color:#13A10E;text-align:right;margin-top:2px;letter-spacing:-0.005em}

.tm-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#FFF;flex-shrink:0;margin-top:2px;letter-spacing:-0.005em;position:relative}
.tm-av-tl{background:#0E7C42}
.tm-av-er{background:#A4262C}
.tm-av-d{background:linear-gradient(135deg,#3D7AE8,#1E6BE2)}
.tm-av-h{background:linear-gradient(135deg,#5CC8A0,#3FB089)}
.tm-av-sc{background:#A4262C}
.tm-av::after{content:"";position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:#13A10E;border:1.5px solid #FFF}
.tm-av.away::after{background:#FCE100}
.tm-av.dnd::after{background:#A4262C}
.tm-av-d::before{content:"AI";position:absolute;bottom:-3px;right:-4px;width:14px;height:9px;border-radius:3px;background:#5B5FC7;color:#FFF;font-size:7px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1px solid #FFF;letter-spacing:0}
.tm-av-d::after{display:none}
.tm-av-h::before{content:"AI";position:absolute;bottom:-3px;right:-4px;width:14px;height:9px;border-radius:3px;background:#3FB089;color:#FFF;font-size:7px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1px solid #FFF;letter-spacing:0}
.tm-av-h::after{display:none}

.tm-msg-body{flex:1;min-width:0}
.tm-msg-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.tm-msg-name{font-size:13.5px;font-weight:600;color:#242424;letter-spacing:-0.012em}
.tm-msg-role{display:none}
.tm-msg-time{font-size:11.5px;color:#605E5C}
.tm-msg-text{font-size:13.5px;color:#242424;line-height:1.5}
.tm-mention{color:#1E6BE2;background:transparent;padding:0;font-weight:600;letter-spacing:-0.005em}
.tm-mention.you{background:transparent;border:none;color:#1E6BE2}

.tm-card{background:#FFF;border:1px solid #E1E1E1;border-radius:6px;border-left:3px solid #7B5BD9;padding:14px 16px 12px;margin-top:8px;max-width:520px;box-shadow:0 1px 2px rgba(0,0,0,0.04)}
.tm-card-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.tm-card-thumb{width:34px;height:34px;border-radius:6px;background:linear-gradient(135deg,#7B5BD9,#5B5FC7);color:#FFF;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.tm-card-ttl{font-size:14px;font-weight:600;color:#242424;line-height:1.2;letter-spacing:-0.012em}
.tm-card-sub{font-size:11.5px;color:#616161;margin-top:1px}
.tm-card-body{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;color:#242424;line-height:1.5}
.tm-card-body .k{color:#616161;font-weight:500}
.tm-card-body .v{color:#242424}
.tm-card-body .v .pill{display:inline-flex;align-items:center;gap:4px;background:#DFF6DD;color:#0E7C42;border-radius:3px;padding:1px 7px;font-size:11.5px;font-weight:600;letter-spacing:-0.005em;margin-left:4px}
.tm-card-body .v .chip{display:inline-block;background:#F0F0F0;color:#424242;border-radius:3px;padding:1px 7px;font-size:11.5px;margin:0 2px 1px 0}
.tm-card-actions{display:flex;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid #F0F0F0}
.tm-card-btn{font-size:12.5px;font-weight:600;padding:5px 12px;border-radius:4px;cursor:pointer;letter-spacing:-0.005em}
.tm-card-btn.primary{background:#5B5FC7;color:#FFF}
.tm-card-btn.primary:hover{background:#4F52B2}
.tm-card-btn.ghost{background:transparent;color:#424242;border:1px solid #D1D1D1}
.tm-card-btn.ghost:hover{background:#F0F0F0}
.tm-file{display:flex;align-items:center;gap:10px;margin-top:8px;padding:8px 10px;background:#FFF;border:1px solid #E1E1E1;border-radius:6px;max-width:340px;cursor:default;transition:border-color .15s,box-shadow .15s}
.tm-file:hover{border-color:#C8C8C8;box-shadow:0 1px 4px rgba(0,0,0,.06)}
.tm-file-icon{width:30px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.tm-file-icon svg{width:100%;height:100%;display:block}
.tm-file-meta{flex:1;min-width:0;line-height:1.2}
.tm-file-name{font-size:13px;font-weight:600;color:#185ABD;letter-spacing:-.005em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-file-sub{font-size:11px;color:#605E5C;letter-spacing:-.005em;margin-top:2px}
.tm-file-dl{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:#605E5C;border-radius:4px}

.tm-reactions{display:flex;gap:6px;margin-top:8px}
.tm-react-pill{display:inline-flex;align-items:center;gap:4px;background:#F0F0F0;border:1px solid #E1E1E1;border-radius:14px;padding:1px 8px 1px 6px;font-size:12px;color:#424242;cursor:pointer;letter-spacing:-0.005em;font-weight:500}
.tm-react-pill:hover{background:#E8E8E8}
.tm-react-pill .emo{font-size:13px}
.tm-react-pill .cnt{font-size:11px;color:#616161;font-weight:600}
.tm-react-pill.you{background:#EEF0FA;border-color:#C5C9F0;color:#5B5FC7}
.tm-react-pill.you .cnt{color:#5B5FC7}

.tm-typing{display:flex;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:#616161;font-style:italic;letter-spacing:-0.005em}
.tm-typing-dots{display:inline-flex;gap:3px;align-items:center}
.tm-typing-dots span{width:5px;height:5px;border-radius:50%;background:#5B5FC7;opacity:0.5;animation:tmDot 1.3s infinite ease-in-out}
.tm-typing-dots span:nth-child(2){animation-delay:.18s}
.tm-typing-dots span:nth-child(3){animation-delay:.36s}
@keyframes tmDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.tm-composer{margin:0 14px 14px;border:none;background:transparent;display:flex;flex-direction:row;align-items:flex-end;gap:8px;box-shadow:none;position:relative}
.tm-composer-field{flex:1;display:flex;align-items:flex-end;gap:12px;background:#FFF;border:1px solid #E1E1E1;border-radius:20px;padding:9px 14px;min-height:40px;max-height:140px;overflow:hidden}
.tm-field-tools{display:flex;align-items:center;gap:13px;flex-shrink:0;color:#605E5C;margin-bottom:1px}
.tm-field-tools .tm-ft{width:21px;height:21px;display:flex;align-items:center;justify-content:center}
.tm-field-tools svg{width:21px;height:21px;display:block}
.tm-composer-tools{display:none}
.tm-tool{width:28px;height:28px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer;color:#605E5C}
.tm-tool:hover{background:#F0F0F0}
.tm-tool b{font-weight:700}
.tm-tool i{font-style:italic;font-family:"Times New Roman",serif}
.tm-tool u{text-decoration:underline}
.tm-tool-sep{display:none}
.tm-composer-input{flex:1;font-size:14px;color:#9E9E9E;letter-spacing:-0.005em;line-height:1.4;padding:1px 0;min-height:auto;word-break:break-word}
.tm-composer-bottom{display:flex;align-items:center;justify-content:flex-end;padding:4px 8px 6px 10px;border-top:none}
.tm-composer-l{display:none}
.tm-composer-r{display:flex;align-items:center;gap:2px}
.tm-send{width:30px;height:34px;border-radius:0;background:transparent;color:#5B5FC7;display:flex;align-items:flex-end;justify-content:center;cursor:pointer;flex-shrink:0;padding-bottom:6px}
.tm-send svg{width:24px;height:24px;display:block}
.tm-send.dim{color:#9CA0D6}
.tm-send:hover{background:#F0F0F0}

/* ============ AGENTS ============ */
.agents-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.agent-card{position:relative;overflow:hidden;border-radius:24px;padding:48px 40px;background:#FFF;border:1px solid var(--border);transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s}
.agent-card:hover{transform:translateY(-4px);box-shadow:0 24px 48px -12px rgba(0,0,0,0.08)}
.agent-card::before{content:"";position:absolute;inset:0;border-radius:24px;padding:1px;background:linear-gradient(135deg,transparent 30%,var(--c1) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.4}
.pa-card{--c1:var(--mint)}
.da-card{--c1:var(--peach)}
.agent-orb{position:absolute;top:-80px;right:-80px;width:240px;height:240px;border-radius:50%;filter:blur(60px);opacity:.25;pointer-events:none}
.pa-card .agent-orb{background:radial-gradient(circle,var(--mint),transparent 70%)}
.da-card .agent-orb{background:radial-gradient(circle,var(--peach),transparent 70%)}
.agent-id{display:flex;align-items:center;gap:12px;margin-bottom:24px;position:relative}
.agent-avatar{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:600;letter-spacing:-0.02em;box-shadow:0 4px 12px rgba(0,0,0,0.08)}
.pa-card .agent-avatar{background:linear-gradient(135deg,var(--mint),#7AD9B5)}
.da-card .agent-avatar{background:linear-gradient(135deg,var(--peach),#F8C49A)}
.agent-addr{font-family:var(--mono);font-size:11.5px;color:var(--text-3);letter-spacing:-0.01em}
.agent-card h3{font-size:32px;font-weight:600;letter-spacing:-0.032em;line-height:1.05;margin-bottom:14px;position:relative}
.agent-card>p.lede{font-size:15.5px;color:var(--text-2);line-height:1.6;margin-bottom:28px;max-width:440px;position:relative;letter-spacing:-0.011em}
.kh-pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;border-radius:999px;padding:5px 12px;margin-bottom:24px;border:1px solid;font-family:var(--mono);letter-spacing:-0.01em;position:relative}
.kh-mint{color:var(--mint-text);background:var(--mint-bg);border-color:var(--mint-border)}
.kh-peach{color:var(--peach-text);background:var(--peach-bg);border-color:var(--peach-border)}
.feats{display:flex;flex-direction:column;gap:12px;position:relative}
.feat{display:flex;align-items:flex-start;gap:12px;font-size:14px;color:var(--text);line-height:1.55;letter-spacing:-0.011em}
.feat-check{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#fff;font-size:10px}
.pa-card .feat-check{background:var(--mint)}
.da-card .feat-check{background:var(--peach)}

/* ============ MODES ============ */
/* compact recap band — the four ways, all already seen in the story */
.modes-recap{margin-top:8px}
.modes-recap-rail{position:relative;display:flex;align-items:center;justify-content:space-between;gap:0;margin:0 auto 30px;max-width:760px;padding:0 8px}
.modes-recap-rail::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;transform:translateY(-50%);background:linear-gradient(90deg,var(--mint),var(--peach) 38%,var(--peach) 64%,var(--lavender));border-radius:2px;opacity:.5}
.modes-recap-end{position:relative;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3);background:var(--paper-2);padding:4px 10px;border-radius:999px;white-space:nowrap}
section.sec-muted .modes-recap-end{background:#FFF;border:1px solid var(--rule)}
.modes-stops{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mode-stop{position:relative;background:#FFF;border:1px solid var(--rule);border-radius:18px;padding:22px 20px 20px;display:flex;flex-direction:column;gap:0;box-shadow:0 1px 0 rgba(26,24,20,.02)}
.mode-stop.s-blue{border-top:3px solid #4A7BF7}
.mode-stop.s-mint{border-top:3px solid var(--mint)}
.mode-stop.s-peach{border-top:3px solid var(--peach)}
.mode-stop.s-lavender{border-top:3px solid #8B6FE8}
.mode-stop-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:14px}
.mode-stop-n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.mode-stop-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;font-weight:500;white-space:nowrap}
.mode-stop-tag.on{background:var(--ink);color:#FAF8F4}
.mode-stop-tag.off{background:transparent;color:var(--text-3);border:1px solid var(--rule-2)}
.mode-stop h3{font-size:18px;font-weight:600;letter-spacing:-0.02em;line-height:1.12;margin:0 0 7px;color:var(--text)}
.mode-stop p{font-size:13px;color:var(--text-2);line-height:1.5;margin:0;letter-spacing:-0.008em}
.mode-stop-eg{margin-top:13px;padding-top:13px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:11px;color:var(--text-3);line-height:1.45;letter-spacing:-0.005em}
@media(max-width:860px){.modes-stops{grid-template-columns:repeat(2,1fr)}.modes-recap-rail{max-width:none}}
@media(max-width:520px){.modes-stops{grid-template-columns:1fr}.modes-recap-rail{display:none}}

.modes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mode-card{border-radius:24px;padding:36px 32px;border:1px solid;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:380px}
.mc-mint{background:linear-gradient(180deg,var(--mint-bg) 0%,#FFF 100%);border-color:var(--mint-border)}
.mc-peach{background:linear-gradient(180deg,var(--peach-bg) 0%,#FFF 100%);border-color:var(--peach-border)}
.mc-lavender{background:linear-gradient(180deg,var(--lavender-bg) 0%,#FFF 100%);border-color:var(--lavender-border)}
.mode-num{font-family:var(--mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:auto;padding-bottom:32px}
.mode-num-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:auto;padding-bottom:32px}
.mode-num-row .mode-num{margin-bottom:0;padding-bottom:0}
.mode-seen{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;font-weight:500;white-space:nowrap}
.mode-seen.on{background:var(--ink);color:#FAF8F4}
.mode-seen.off{background:transparent;color:var(--text-3);border:1px solid var(--rule-2)}
.mode-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:#FFF;border:1px solid;font-size:20px}
.mc-mint .mode-icon{border-color:var(--mint-border);color:var(--mint-text)}
.mc-peach .mode-icon{border-color:var(--peach-border);color:var(--peach-text)}
.mc-lavender .mode-icon{border-color:var(--lavender-border);color:var(--lavender-text)}
.mode-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;border-radius:999px;padding:4px 12px;border:1px solid;margin-bottom:14px;background:rgba(255,255,255,0.8);font-family:var(--mono);align-self:flex-start}
.mb-mint{color:var(--mint-text);border-color:var(--mint-border)}
.mb-peach{color:var(--peach-text);border-color:var(--peach-border)}
.mb-lavender{color:var(--lavender-text);border-color:var(--lavender-border)}
.mode-badge{display:inline-flex;align-items:center;gap:6px}
.mb-pulse{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb, currentColor 20%, transparent);animation:pulse 2s ease-in-out infinite;display:inline-block}
.mode-card h3{font-size:24px;font-weight:600;letter-spacing:-0.025em;margin-bottom:10px;color:var(--text);line-height:1.15}
.mode-card>p{font-size:14.5px;color:var(--text-2);line-height:1.6;margin-bottom:22px;letter-spacing:-0.011em}
.mode-eg{font-family:var(--mono);font-size:12px;line-height:1.95;border-radius:14px;padding:16px 18px;background:rgba(255,255,255,0.7);border:1px solid rgba(0,0,0,0.04);backdrop-filter:blur(8px);color:var(--text-2);letter-spacing:-0.01em}
.mode-eg .ex-arrow{color:var(--text-3);margin-right:6px}

/* ---- Modes: autonomy spectrum ---- */
.modes-spectrum{display:flex;align-items:center;gap:18px;max-width:720px;margin:0 auto 48px;padding:0 8px}
.modes-spectrum-l,.modes-spectrum-r{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--text-3);text-transform:uppercase;white-space:nowrap;font-weight:500}
.modes-spectrum-rail{flex:1;height:2px;position:relative;background:linear-gradient(to right,#4A7BF7,var(--mint),var(--peach),var(--lavender));border-radius:1px;opacity:.55}
.modes-spectrum-tick{position:absolute;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ink);transform:translateX(-50%);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.modes-spectrum-tick:nth-of-type(1){border-color:#4A7BF7}
.modes-spectrum-tick:nth-of-type(2){border-color:var(--mint)}
.modes-spectrum-tick:nth-of-type(3){border-color:var(--peach)}
.modes-spectrum-tick:nth-of-type(4){border-color:var(--lavender)}
@media(max-width:560px){.modes-spectrum{gap:10px}.modes-spectrum-l,.modes-spectrum-r{font-size:9.5px;letter-spacing:.08em}}

/* ---- Modes: mini-mockup blocks (replaces .mode-eg) ---- */
.mode-mock{margin-top:0;padding:16px;background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.04);border-radius:14px;backdrop-filter:blur(8px);font-size:12px;line-height:1.5;color:var(--ink)}
/* Direct — chat bubbles */
.mock-direct{display:flex;flex-direction:column;gap:6px}
.mock-bubble{display:inline-block;max-width:90%;padding:8px 12px;border-radius:14px;font-size:12px;line-height:1.4;letter-spacing:-.005em}
.mock-bubble-you{background:#4A7BF7;color:#FFF;align-self:flex-end;border-bottom-right-radius:4px}
.mock-bubble-agent{background:#F0EDE3;color:var(--ink);align-self:flex-start;border-bottom-left-radius:4px}
/* Routine — calendar grid */
.mock-routine{display:flex;flex-direction:column;gap:0}
.mock-cal-row{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:12px;border-bottom:1px solid rgba(0,0,0,.05)}
.mock-cal-row:last-of-type{border-bottom:0}
.mock-cal-day{width:32px;color:var(--text-3);font-size:11px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase}
.mock-cal-dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px color-mix(in srgb, var(--mint) 18%, transparent);flex-shrink:0}
.mock-cal-dot.pending{background:transparent;border:1.5px dashed var(--mint);box-shadow:none}
.mock-cal-time{color:var(--text-2);font-size:11px;margin-left:auto;font-family:var(--mono);letter-spacing:.02em}
.mock-cal-caption{font-size:11px;color:var(--text-3);margin-top:10px;font-style:italic;letter-spacing:-.005em}
/* Triggered — if/then pseudo-code */
.mock-trigger{display:flex;flex-direction:column;gap:2px}
.mock-code{display:flex;gap:10px;align-items:baseline;font-family:var(--mono);font-size:12px;letter-spacing:-.005em}
.mock-code-key{color:var(--peach-text);font-weight:600;min-width:44px;text-transform:lowercase;letter-spacing:.02em}
.mock-code-val{color:var(--ink);flex:1;line-height:1.45}
.mock-code-arrow{text-align:left;margin:4px 0 4px 14px;color:var(--text-3);font-size:13px;line-height:1}
/* Proactive — alert notification */
.mock-proactive{padding:14px}
.mock-alert{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:rgba(139,111,232,.10);border-left:2px solid var(--lavender);border-radius:6px}
.mock-alert-dot{width:8px;height:8px;border-radius:50%;background:var(--lavender);box-shadow:0 0 0 3px color-mix(in srgb, var(--lavender) 22%, transparent);margin-top:5px;flex-shrink:0;animation:mockAlertPulse 2s ease-in-out infinite}
.mock-alert-body{flex:1;min-width:0}
.mock-alert-title{font-size:12px;font-weight:500;color:var(--ink);letter-spacing:-.005em;line-height:1.3}
.mock-alert-sub{font-size:11px;color:var(--text-3);margin-top:3px;font-style:italic;letter-spacing:-.005em}
@keyframes mockAlertPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.mock-alert-dot{animation:none}}

/* ============ INTEGRATIONS ============ */
.int-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:880px}
.int-card{border:1px solid var(--border);border-radius:18px;padding:28px 24px;background:#FFF;transition:border-color .2s,transform .3s}
.int-card:hover{border-color:var(--border-2);transform:translateY(-2px)}
.int-cat{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3);margin-bottom:12px}
.int-card h4{font-size:16px;font-weight:600;letter-spacing:-0.018em;margin-bottom:14px;color:var(--text)}
.int-list{font-size:13px;color:var(--text-2);line-height:2;letter-spacing:-0.005em}
.int-list .row{display:flex;align-items:center;gap:10px}
.int-list .row::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--border-2);flex-shrink:0;display:none}
.int-list .row .int-mark{width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:#FFF;font-size:10px;font-weight:700;letter-spacing:-.02em;flex-shrink:0;font-family:var(--sans);box-shadow:0 1px 3px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.18)}

/* ---- Integrations: 3-layer stack ---- */
.int-layers{max-width:880px;margin:64px auto 0;display:flex;flex-direction:column}
.int-layer{padding:28px 32px;border-radius:18px;background:#FFF;border:1px solid var(--rule);text-align:center}
.int-layer-agents{background:rgba(245,160,106,.05);border-color:var(--peach-border)}
.int-layer-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin:0 0 6px}
.int-layer-agents .int-layer-label{color:var(--peach-text)}
.int-layer-sub{font-size:13.5px;color:var(--text-2);font-style:italic;letter-spacing:-.005em;margin:0 0 22px}
.int-row{display:flex;justify-content:center;align-items:flex-start;gap:28px;flex-wrap:wrap}
.int-row-wrap{gap:18px 26px}
.int-tool{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:60px}
.int-tool-mark{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--text)!important;background:var(--paper)!important;border:1px solid var(--rule-2);font-weight:600;font-size:14px;letter-spacing:-.01em;box-shadow:none;background-image:none!important;transition:transform .25s,border-color .25s,background .25s}
.int-tool:hover .int-tool-mark{transform:translateY(-2px);border-color:var(--text-3);background:#FFF!important}
.int-tool-name{font-size:11px;color:var(--text-2);letter-spacing:-.005em;line-height:1.2;text-align:center}
.int-connectors{display:flex;justify-content:space-around;padding:0 96px;pointer-events:none}
.int-conn{width:1px;height:34px;background:repeating-linear-gradient(to bottom,var(--rule-2) 0 4px,transparent 4px 8px)}
.int-agents-row{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:8px;flex-wrap:wrap}
.int-agent-orb{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-family:var(--display);font-style:italic;font-size:22px;font-weight:400;box-shadow:0 6px 16px -8px rgba(26,24,20,.25)}
.int-agent-orb.mint{background:linear-gradient(135deg,#5CC8A0,#3FB089)}
.int-agent-orb.peach{background:linear-gradient(135deg,#F5B591,#D97757)}
.int-agent-label{font-family:var(--mono);font-size:10.5px;color:var(--text-3);letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.int-link{width:36px;height:1px;background:repeating-linear-gradient(to right,var(--text-3) 0 3px,transparent 3px 6px);opacity:.55}
.int-data-foot{text-align:center;font-size:12px;color:var(--text-3);font-style:italic;margin-top:18px;letter-spacing:-.005em}
@media(max-width:680px){
  .int-layer{padding:22px 18px}
  .int-row{gap:18px}
  .int-connectors{padding:0 40px}
  .int-tool{min-width:54px}
  .int-tool-mark{width:38px;height:38px;font-size:13px}
}

/* ============ SCREENSHOT ============ */
.screen-stage{position:relative;margin-top:24px;padding:60px 60px 0;background:linear-gradient(180deg,var(--bg-2) 0%,var(--bg) 100%);border-radius:32px;overflow:hidden}
.screen-frame{border-radius:18px 18px 0 0;overflow:hidden;border:1px solid var(--border);border-bottom:none;box-shadow:0 30px 80px -20px rgba(0,0,0,0.18),0 0 0 1px rgba(0,0,0,0.04)}
.screen-frame picture,.screen-frame img{display:block;width:100%}
.screen-frame img{height:auto}/* keep aspect: the height attr must not act as a fixed height (WebKit squished the landscape shot into a portrait box) */

/* ============ CTA ============ */
.cta-sec{position:relative;overflow:hidden;text-align:center;background:var(--ink);color:#FFF;padding:160px 40px}
.cta-sec::before{content:"";position:absolute;inset:0;background:
  radial-gradient(ellipse at 30% 30%,rgba(92,200,160,0.18) 0%,transparent 50%),
  radial-gradient(ellipse at 70% 70%,rgba(139,111,232,0.18) 0%,transparent 50%),
  radial-gradient(ellipse at 50% 50%,rgba(245,160,106,0.10) 0%,transparent 60%);
  pointer-events:none}
.cta-inner{max-width:680px;margin:0 auto;position:relative}
.cta-eyebrow{margin-bottom:32px;color:rgba(255,255,255,0.55) !important}
.cta-inner h2{font-size:clamp(48px,7vw,88px);font-weight:600;letter-spacing:-0.04em;line-height:0.98;margin-bottom:24px;color:#FFF}
.cta-inner h2 em{font-style:italic;font-weight:500;background:linear-gradient(120deg,var(--mint) 0%,var(--lavender) 50%,var(--peach) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.cta-inner>p:not([class]){font-size:18px;color:rgba(255,255,255,0.65);margin-bottom:48px;letter-spacing:-0.014em;font-weight:300}
.cta-sec .form-wrap{margin:0 auto}
.cta-sec .input-row{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.14);backdrop-filter:blur(10px);box-shadow:0 4px 24px rgba(0,0,0,0.2)}
.cta-sec .input-row:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(74,123,247,0.2)}
.cta-sec input[type=email]{color:#FFF}
.cta-sec input[type=email]::placeholder{color:rgba(255,255,255,0.4)}
.cta-sec .btn{background:#FFF;color:var(--ink)}
.cta-sec .btn:hover{background:#F5F5F7}
.cta-sec .form-note{color:rgba(255,255,255,0.5);justify-content:center}
.cta-sec .spots-pill{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.14);color:rgba(255,255,255,0.8)}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--border);padding:48px 40px 32px;background:#FFF}
.foot-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:32px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.foot-logo{text-decoration:none;display:inline-flex;align-items:center;gap:10px}
.foot-logo .wordmark{font-size:17px}
.foot-tag{font-size:13px;color:var(--text-2);margin-top:8px;max-width:280px;letter-spacing:-0.005em;line-height:1.5}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col h5{font-family:var(--mono);font-size:11px;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:14px;font-weight:500}
.foot-col a{display:block;font-size:13px;color:var(--text-2);text-decoration:none;margin-bottom:8px;letter-spacing:-0.005em;transition:color .15s}
.foot-col a:hover{color:var(--text)}
.foot-bottom{padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-3);font-family:var(--mono);letter-spacing:-0.005em;flex-wrap:wrap;gap:16px}

/* ============ SCROLL FADE ============ */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.fade-in.visible{opacity:1;transform:translateY(0)}

/* ================================================
   ANIMATION SYSTEM — scroll-driven & continuous
   ================================================ */

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

/* ---- Hero entry sequence ---- */
.h1-l1,.h1-l2{display:block;opacity:0;transform:translateY(24px);animation:heroIn .9s cubic-bezier(.4,0,.2,1) forwards}
.h1-l1{animation-delay:0ms}
.h1-l2{animation-delay:300ms}
.hero-sub{opacity:0;transform:translateY(16px);animation:heroIn .9s cubic-bezier(.4,0,.2,1) .5s forwards}
.hero-sub:nth-of-type(2){animation-delay:.6s}
.hero .form-wrap{opacity:0;transform:translateY(16px);animation:heroIn .9s cubic-bezier(.4,0,.2,1) .7s forwards}
.hero-meta{opacity:0;transform:translateY(16px);animation:heroIn .9s cubic-bezier(.4,0,.2,1) .9s forwards}
.hero-eyebrow{opacity:0;animation:heroIn .8s cubic-bezier(.4,0,.2,1) 0s forwards}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}

/* ---- Gradient text sweep on first render ---- */
h1 .gradient{background-size:240% 100%;background-position:100% 0}
h1 .gradient.h1-l2{animation:heroIn .9s cubic-bezier(.4,0,.2,1) .3s forwards,gradSweep 1.5s cubic-bezier(.4,0,.2,1) .6s forwards}
@keyframes gradSweep{to{background-position:0 0}}

/* ---- Aurora drift on hero ---- */
.hero::before{animation:aurora 60s ease-in-out infinite alternate;transform-origin:center}
@keyframes aurora{
  0%{transform:translate(0,0) rotate(0deg) scale(1)}
  50%{transform:translate(-40px,30px) rotate(120deg) scale(1.08)}
  100%{transform:translate(30px,-20px) rotate(240deg) scale(1)}
}

/* ---- Logo mark pulse ---- */
.logomark circle{animation:logoPulse 3s ease-in-out infinite;transform-origin:center}
.logomark circle:nth-child(2){animation-delay:1s}
.logomark circle:nth-child(3){animation-delay:2s}
@keyframes logoPulse{0%,100%{opacity:.85}50%{opacity:1}}

/* ---- Live-dot sonar ripple ---- */
.spots-pill .live-dot{position:relative;animation:none;overflow:visible}
.spots-pill .live-dot::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;border:1.5px solid #34C759;opacity:0;animation:sonar 2.5s cubic-bezier(.4,0,.2,1) infinite;pointer-events:none}
@keyframes sonar{
  0%{transform:scale(1);opacity:.7}
  100%{transform:scale(4);opacity:0}
}

/* ---- Section title word stagger ---- */
.tw{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.tw-in .tw{opacity:1;transform:translateY(0)}

/* ---- Tab sliding pill + panel transitions ---- */
.ch-tabs{position:relative;isolation:isolate}
.ch-tab-pill{position:absolute;top:5px;height:calc(100% - 10px);background:#FFF;border-radius:999px;box-shadow:0 4px 16px rgba(0,0,0,.22);transition:transform .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1),opacity .2s;z-index:0;left:0;opacity:0;pointer-events:none}
.ch-tab-pill.ready{opacity:1}
/* legacy tab rules removed — cinematic acts handle .ch-panel reveal */

/* ---- Agent cards stagger + deeper hover ---- */
.agent-card{opacity:0;transform:translateY(20px)}
.agents-grid.visible .agent-card{animation:cardIn .85s cubic-bezier(.4,0,.2,1) forwards}
.agents-grid.visible .agent-card:nth-child(2){animation-delay:.15s}
.agent-card:hover{transform:translateY(-6px);box-shadow:0 28px 56px -18px rgba(0,0,0,.16),0 8px 18px -8px rgba(0,0,0,.08)}
@keyframes cardIn{to{opacity:1;transform:translateY(0)}}

/* ---- Feat-check spring stagger ---- */
.feat-check{transform:scale(0);transition:transform .55s cubic-bezier(.34,1.56,.64,1)}
.feat-check.in{transform:scale(1)}

/* ---- Mode card stagger + icon motion ---- */
.mode-card{opacity:0;transform:translateY(30px)}
.modes-grid.visible .mode-card{animation:cardIn .9s cubic-bezier(.4,0,.2,1) forwards}
.modes-grid.visible .mode-card:nth-child(2){animation-delay:.12s}
.modes-grid.visible .mode-card:nth-child(3){animation-delay:.24s}
.mc-mint .mode-icon{animation:modeRot 20s linear infinite;transform-origin:center}
.mc-peach .mode-icon{animation:modePulse 2s ease-in-out infinite}
.mc-lavender .mode-icon{animation:modeBlink 1.5s ease-in-out infinite}
@keyframes modeRot{to{transform:rotate(360deg)}}
@keyframes modePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes modeBlink{0%,100%{opacity:.6}50%{opacity:1}}

/* ---- Typewriter for mode-eg ---- */
.mode-eg .twc{opacity:0;transition:opacity .08s linear}
.mode-eg.tw-go .twc{opacity:1}
.mode-eg .tw-caret{display:inline-block;width:6px;background:currentColor;opacity:.55;margin-left:1px;animation:caretBlink 1s steps(2) infinite;vertical-align:-2px;height:1em}
.mode-eg.tw-done .tw-caret{display:none}
@keyframes caretBlink{50%{opacity:0}}

/* ---- CTA orbs (continuous, independent paths) ---- */
.cta-sec::before{display:none}
.cta-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;will-change:transform}
.cta-orb-1{width:560px;height:560px;background:radial-gradient(circle,rgba(92,200,160,.45) 0%,transparent 70%);top:-120px;left:-80px;animation:orb1 25s ease-in-out infinite}
.cta-orb-2{width:680px;height:680px;background:radial-gradient(circle,rgba(139,111,232,.4) 0%,transparent 70%);bottom:-200px;right:-120px;animation:orb2 35s ease-in-out infinite}
.cta-orb-3{width:480px;height:480px;background:radial-gradient(circle,rgba(245,160,106,.32) 0%,transparent 70%);top:25%;left:38%;animation:orb3 20s ease-in-out infinite}
.cta-inner{position:relative;z-index:1}

/* ---- CTA clock pill + decrementing spot counter ---- */
.cta-eyebrow{display:inline-flex;align-items:center;gap:10px;justify-content:center}
.cta-clock{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums;font-weight:500;font-size:12px;letter-spacing:.02em}
.cta-clock svg{opacity:.7}
.cta-clock-time{color:#FFF}
.eyebrow-sep{color:rgba(255,255,255,.3);margin:0 2px}
.spots-count{font-variant-numeric:tabular-nums;font-weight:600;color:#FFF}
@keyframes spotTick{0%{transform:translateY(0);opacity:1}40%{transform:translateY(-6px);opacity:0}60%{transform:translateY(6px);opacity:0}100%{transform:translateY(0);opacity:1}}
.spots-count.tick{animation:spotTick .35s cubic-bezier(.4,0,.2,1)}
@keyframes orb1{0%,100%{transform:translate(0,0)}50%{transform:translate(140px,90px)}}
@keyframes orb2{0%,100%{transform:translate(0,0)}33%{transform:translate(-100px,-70px)}66%{transform:translate(80px,50px)}}
@keyframes orb3{0%,100%{transform:translate(0,0)}50%{transform:translate(-110px,100px)}}

/* ---- CTA headline reveal + sweep ---- */
.cta-inner h2 .ct-l1,.cta-inner h2 em{display:inline-block;opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.4,0,.2,1),transform .9s cubic-bezier(.4,0,.2,1)}
.cta-inner.cta-in h2 .ct-l1{opacity:1;transform:translateY(0)}
.cta-inner.cta-in h2 em{opacity:1;transform:translateY(0);transition-delay:.3s}
.cta-inner h2 em{background-size:240% 100%;background-position:100% 0}
.cta-inner.cta-in h2 em{animation:gradSweep 1.5s cubic-bezier(.4,0,.2,1) .6s forwards}

/* ---- Email input glow pulse when empty ---- */
.input-row.glow{animation:inputGlow 2.5s ease-in-out infinite}
@keyframes inputGlow{
  0%,100%{box-shadow:0 1px 2px rgba(0,0,0,.02),0 4px 12px rgba(0,0,0,.04),0 0 0 0 rgba(74,123,247,0)}
  50%{box-shadow:0 1px 2px rgba(0,0,0,.02),0 4px 12px rgba(0,0,0,.04),0 0 0 6px rgba(74,123,247,.10)}
}
.cta-sec .input-row.glow{animation:inputGlowDark 2.5s ease-in-out infinite}
@keyframes inputGlowDark{
  0%,100%{box-shadow:0 4px 24px rgba(0,0,0,.2),0 0 0 0 rgba(255,255,255,0)}
  50%{box-shadow:0 4px 24px rgba(0,0,0,.2),0 0 0 6px rgba(255,255,255,.06)}
}

/* ---- Success particles ---- */
.form-wrap{position:relative}
.particle{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;will-change:transform,opacity;bottom:60%;animation:particleFloat 1.8s cubic-bezier(.4,0,.2,1) forwards}
@keyframes particleFloat{
  0%{transform:translate(0,0) scale(0);opacity:0}
  15%{transform:translate(0,-8px) scale(1);opacity:1}
  100%{transform:translate(var(--px,0),-110px) scale(.5);opacity:0}
}

/* ================================================
   POLISH PASS
   ================================================ */

/* ---- Nav scrolled state + section highlight ---- */
nav{transition:box-shadow .3s cubic-bezier(.4,0,.2,1),background-color .3s}
nav.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.06)}
.nav-link{position:relative;opacity:.62;transition:opacity .25s cubic-bezier(.4,0,.2,1),color .25s}
.nav-link:hover,.nav-link.act{opacity:1;color:var(--text)}
.nav-link.act::after{content:"";position:absolute;left:0;right:0;bottom:-19px;height:2px;background:var(--accent);border-radius:2px;animation:navUnder .25s cubic-bezier(.4,0,.2,1) both}
@keyframes navUnder{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}

/* ---- Logo separation on hover (nav + footer) ---- */
.logomark circle{transition:transform .2s cubic-bezier(.4,0,.2,1)}
a:hover .logomark circle:nth-child(1){transform:translate(-2px,-2px)}
a:hover .logomark circle:nth-child(2){transform:translate(2px,-2px)}
a:hover .logomark circle:nth-child(3){transform:translate(0,2px)}

/* ---- Buttons: shimmer + press ---- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn::after{content:"";position:absolute;top:0;left:-120%;width:55%;height:100%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.32) 50%,transparent 100%);transition:left .65s cubic-bezier(.4,0,.2,1);pointer-events:none;z-index:0;transform:skewX(-18deg)}
.btn:hover::after{left:130%}
.btn>*{position:relative;z-index:1}
.btn:active{transform:scale(.97);transition:transform 0s}
.btn:hover .btn-arrow{transform:translateX(3px)}
.cta-sec .btn::after{background:linear-gradient(100deg,transparent 0%,rgba(74,123,247,.18) 50%,transparent 100%)}

/* ---- Email · plain body + attachments + 2-mail switcher ---- */
.ol-plain p{font-size:13.5px;line-height:1.65;color:#242424;margin:0 0 12px;font-family:var(--sans)}
.ol-plain p strong{color:#1B1B1B;font-weight:600}
.ol-plain .ol-bullets{margin:0 0 14px 0;padding-left:18px;font-size:13.5px;line-height:1.7;color:#242424}
.ol-plain .ol-bullets li{margin-bottom:2px}
.ol-plain .ol-sig{margin-top:18px;padding-top:14px;border-top:1px solid #EDEBE9;font-size:12.5px;color:#424242;line-height:1.5}
.ol-plain .ol-sig .ol-sig-name{font-weight:600;color:#1B1B1B;font-size:13.5px;letter-spacing:-.005em;margin-bottom:2px}
.ol-attach-row{margin:0 0 16px 0;display:flex;flex-direction:column;gap:8px}
.ol-attach-label{font-size:11px;font-family:var(--mono);color:#605E5C;letter-spacing:.04em;text-transform:uppercase}
.ol-attach-list{display:flex;flex-wrap:wrap;gap:8px}
.ol-attach{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#FFF;border:1px solid #E5E5E7;border-radius:8px;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s;min-width:240px;max-width:280px}
.ol-attach:hover{background:#F5F5F7;border-color:#D1D1D6}
.ol-attach-icon{width:28px;height:32px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:transparent;border:none;border-radius:0}
.ol-attach-icon::after{content:none}
.ol-attach-icon svg{display:block;width:100%;height:100%}
.ol-attach-meta{flex:1;min-width:0}
.ol-attach-name{font-size:13px;font-weight:600;color:#1B1B1B;letter-spacing:-.005em;line-height:1.2;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ol-attach-size{font-size:11px;color:#605E5C;font-family:var(--mono);letter-spacing:.01em}
.ol-attach-dl{color:#8A8886;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:4px;flex-shrink:0;transition:background .15s,color .15s}
.ol-attach:hover .ol-attach-dl{color:#323130}
.ol-attach-dl:hover{background:#EDEBE9}
.ol-item-attach{font-size:13px;color:#605E5C;align-self:center;margin-left:6px}
.ol-readpane[hidden]{display:none}
.ol-readpane{transition:opacity .15s}

/* ---- Attachment preview overlay (Teams-style) ---- */
.attach-preview{position:absolute;inset:0;background:rgba(20,20,22,.55);backdrop-filter:blur(2px);display:none;align-items:center;justify-content:center;z-index:30;opacity:0;transition:opacity .15s}
.attach-preview.open{display:flex;opacity:1}
.attach-preview-card{background:#FFF;border-radius:8px;width:min(560px,90%);max-height:80%;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.45);overflow:hidden}
.ap-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid #EDEBE9;background:#FAFAFA}
.ap-icon{width:36px;height:42px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ap-icon svg{width:100%;height:100%;display:block}
.ap-meta{flex:1;min-width:0}
.ap-name{font-size:14px;font-weight:600;color:#242424;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-sub{font-size:12px;color:#605E5C;font-family:var(--mono);margin-top:2px}
.ap-close{font-size:22px;color:#605E5C;cursor:pointer;line-height:1;padding:4px 10px;border-radius:4px}
.ap-close:hover{background:#EDEBE9;color:#242424}
.ap-body{padding:24px 28px;flex:1;overflow:auto;color:#242424;font-size:13px;line-height:1.6}
.ap-body h4{font-size:14px;font-weight:600;letter-spacing:-.012em;margin:0 0 10px;color:#1B1B1B}
.ap-body .ap-line{height:8px;background:#EFEFEF;border-radius:3px;margin-bottom:8px}
.ap-body .ap-line.s{width:60%}
.ap-body .ap-line.m{width:80%}
.ap-body .ap-line.l{width:100%}
.ap-body .ap-section{margin-bottom:18px}
.ap-foot{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid #EDEBE9;background:#FAFAFA}
.ap-btn{font-size:12.5px;font-weight:600;padding:6px 14px;border-radius:4px;cursor:pointer;letter-spacing:-.005em;border:1px solid #D1D1D1;background:#FFF;color:#242424}
.ap-btn.primary{background:#5B5FC7;color:#FFF;border-color:#5B5FC7}
.ap-btn.primary:hover{background:#4F52B2}

/* ---- Teams · Chat list (DM tab) ---- */
.tm-chatfilter{display:flex;gap:6px;padding:6px 14px 10px;border-bottom:1px solid #F0F0F0}
.tm-chip{font-size:12px;font-weight:500;padding:4px 10px;border-radius:14px;color:#605E5C;cursor:pointer;letter-spacing:-.005em}
.tm-chip.act{background:#F0F0FA;color:#5B5FC7}
.tm-dm-section{font-size:11px;font-weight:600;color:#605E5C;letter-spacing:.04em;text-transform:uppercase;padding:14px 14px 6px;font-family:var(--mono)}
.tm-dm{display:flex;align-items:center;gap:10px;padding:8px 14px;cursor:pointer;border-left:3px solid transparent}
.tm-dm:hover{background:#F5F5F5}
.tm-dm.act{background:#F0F0FA;border-left-color:#5B5FC7}
.tm-dm-av{width:32px;height:32px;border-radius:50%;color:#FFF;font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center;letter-spacing:-.012em;flex-shrink:0;font-family:var(--sans)}
.tm-dm-meta{flex:1;min-width:0}
.tm-dm-row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tm-dm-name{font-size:13px;font-weight:600;color:#242424;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-dm-time{font-size:11px;color:#605E5C;font-family:var(--mono);flex-shrink:0}
.tm-dm-prev{font-size:12px;color:#605E5C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

/* ---- Teams DM channel head ---- */
.tm-ch-head-dm .tm-ch-l{gap:14px}
.tm-dm-bigav{width:38px;height:38px;border-radius:50%;color:#FFF;font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;letter-spacing:-.012em;position:relative;font-family:var(--sans)}
.tm-dm-presence{position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;border-radius:50%;background:#5CC8A0;border:2px solid #FFF}
.tm-dm-tag{margin-left:8px;font-size:11px;font-weight:500;color:#5B5FC7;background:#F0F0FA;padding:2px 8px;border-radius:10px;letter-spacing:-.005em;font-family:var(--mono);text-transform:uppercase}
.tm-readreceipt{font-size:10.5px;color:#605E5C;text-align:right;margin-top:2px;font-family:var(--mono);letter-spacing:.02em}

/* DM bubble: right-aligned Sarah */
.tm-msg-me .tm-msg-body{align-items:flex-end;display:flex;flex-direction:column;max-width:70%}
.tm-msg-me .tm-msg-meta{justify-content:flex-end}
.tm-bubble-me{background:#5B5FC7;color:#fff !important;padding:8px 14px;border-radius:14px 14px 4px 14px;display:inline-block;max-width:520px;font-size:13.5px;line-height:1.5;border:none}
.tm-bubble-me strong{color:#fff}

/* ---- Channel tabs hover + spring pill ---- */
.ch-tab-pill{transition:transform .55s cubic-bezier(.34,1.56,.64,1),width .55s cubic-bezier(.34,1.56,.64,1),opacity .2s}
.ch-tab:not(.active):hover{color:rgba(255,255,255,.95)}
.ch-tab-dot{transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.ch-tab:hover .ch-tab-dot{transform:scale(1.25)}

/* ---- Floating label ---- */
.input-row{padding-top:8px;padding-bottom:8px;position:relative}
input[type=email]{height:48px}
.float-label{position:absolute;left:22px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--text-3);pointer-events:none;transition:transform .25s cubic-bezier(.4,0,.2,1),color .25s,font-weight .25s,font-size .25s;transform-origin:left center;letter-spacing:-.011em}
input[type=email]:focus~.float-label,
input[type=email]:not(:placeholder-shown)~.float-label{transform:translateY(-32px) scale(.78);color:var(--lavender);font-weight:500}
.cta-sec .float-label{color:rgba(255,255,255,.68)}
.cta-sec input[type=email]:focus~.float-label,
.cta-sec input[type=email]:not(:placeholder-shown)~.float-label{color:rgba(255,255,255,.78)}

/* ---- Form success transition (scale + fade) ---- */
.form-wrap form{transition:opacity .4s cubic-bezier(.4,0,.2,1),transform .4s cubic-bezier(.4,0,.2,1);transform-origin:center}
.form-wrap form.gone{opacity:0;transform:scale(.95);pointer-events:none}
.success-box{display:flex !important;position:absolute;top:0;left:0;right:0;opacity:0;transform:scale(.95);pointer-events:none;transition:opacity .45s cubic-bezier(.4,0,.2,1) .25s,transform .45s cubic-bezier(.4,0,.2,1) .25s;transform-origin:center;z-index:2}
.success-box:not(.in){visibility:hidden}
.success-box.in{opacity:1;transform:scale(1);pointer-events:auto;visibility:visible}

/* ---- Agent card cursor-tracking glow ---- */
.agent-card{--mx:80%;--my:10%}
.agent-orb{position:absolute !important;inset:0 !important;top:0 !important;right:0 !important;width:auto !important;height:auto !important;border-radius:0 !important;filter:none !important;opacity:1 !important;background:radial-gradient(circle 340px at var(--mx) var(--my),var(--orb-c) 0%,transparent 65%) !important;transition:background-position .12s linear}
.pa-card{--orb-c:rgba(92,200,160,.38)}
.da-card{--orb-c:rgba(245,160,106,.38)}

/* ---- Footer link underline ---- */
.foot-col a{position:relative;display:block;width:fit-content;white-space:nowrap;padding-bottom:1px}
.foot-col a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:currentColor;transition:width .22s cubic-bezier(.4,0,.2,1)}
.foot-col a:hover::after{width:100%}

/* ---- Focus-visible accessibility ---- */
*:focus{outline:none}
a:focus-visible,button:focus-visible,.ch-tab:focus-visible,.nav-link:focus-visible,.ol-nav-btn:focus-visible,.foot-col a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
.input-row:focus-within{outline:2px solid transparent}
input[type=email]:focus-visible{outline:none}

/* ---- Reduced motion master switch ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .h1-l1,.h1-l2,.hero-sub,.hero .form-wrap,.hero-meta,.hero-eyebrow,
  .agent-card,.mode-card,.fade-in,.cta-inner h2 .ct-l1,.cta-inner h2 em{
    opacity:1 !important;transform:none !important
  }
  .feat-check{transform:scale(1) !important}
  .ch-tab-pill{opacity:1 !important}
  article.act .ch-panel{opacity:1 !important;transform:none !important}
  article.act .act-num,article.act .act-time,article.act .act-desc,article.act .act-channel,article.act .act-note{opacity:1 !important;transform:none !important}
}

/* ============ AGENTS — TWO PORTRAITS + PROTOCOL BRIDGE ============ */
.diagram-sec{padding:112px 40px 124px;background:var(--paper);position:relative;overflow:hidden}
.diagram-sec::before{content:"";position:absolute;top:-220px;left:-120px;width:540px;height:540px;background:radial-gradient(circle,rgba(63,176,137,.07),transparent 65%);pointer-events:none}
.diagram-sec::after{content:"";position:absolute;bottom:-220px;right:-120px;width:540px;height:540px;background:radial-gradient(circle,rgba(217,119,87,.07),transparent 65%);pointer-events:none}
.diagram-inner{max-width:1240px;margin:0 auto;position:relative;z-index:1}
.diagram-head{max-width:760px;margin:0 auto 72px;text-align:center}
.diagram-head .eyebrow{margin:0 auto 22px;justify-content:center}
.diagram-head h2{font-size:clamp(40px,5vw,68px);font-weight:600;letter-spacing:-0.035em;line-height:1.04;color:var(--ink);margin-bottom:16px}
.diagram-head h2 .l-mint{color:var(--mint-text);font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:-.02em}
.diagram-head h2 .l-lav{color:var(--peach-text);font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:-.02em}
.diagram-sub{font-size:18px;font-weight:300;color:var(--text-2);line-height:1.5;letter-spacing:-0.011em;margin:0 auto;max-width:520px}

.ag-stage{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;max-width:1080px;margin:0 auto;position:relative}

/* ---- Portraits ---- */
.ag-portrait{position:relative;padding:34px 32px 26px;min-height:580px;display:flex;flex-direction:column;border:1px solid var(--rule);background:linear-gradient(180deg,#FFFFFF 0%,#FBF9F4 100%);overflow:hidden;transition:transform .45s cubic-bezier(.4,0,.2,1),box-shadow .45s,border-color .45s}
.ag-portrait-personal{border-top-left-radius:24px;border-bottom-left-radius:24px;border-right:none}
.ag-portrait-deal{border-top-right-radius:24px;border-bottom-right-radius:24px;border-left:none}
.ag-portrait::before{content:"";position:absolute;top:-160px;right:-100px;width:360px;height:360px;background:radial-gradient(circle, var(--ag-glow) 0%, transparent 70%);opacity:.55;pointer-events:none;transition:opacity .45s}
.ag-portrait-personal{--ag-glow:rgba(63,176,137,.20)}
.ag-portrait-deal{--ag-glow:rgba(217,119,87,.20)}
.ag-portrait-deal::before{right:auto;left:-100px}
.ag-portrait:hover{transform:translateY(-3px);box-shadow:0 24px 60px -28px rgba(26,24,20,.22);border-color:var(--rule-2)}
.ag-portrait:hover::before{opacity:.85}

.ag-portrait-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;position:relative;z-index:2}
.ag-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid}
.ag-tag-mint{background:var(--mint-bg);color:var(--mint-text);border-color:var(--mint-border)}
.ag-tag-peach{background:var(--peach-bg);color:var(--peach-text);border-color:var(--peach-border)}
.ag-tag-meta{font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:.10em;text-transform:uppercase;font-weight:500}

/* ---- Big orb ---- */
.ag-orb-wrap{position:relative;display:flex;align-items:center;justify-content:center;margin:14px auto 24px;width:200px;height:200px;z-index:2}
.ag-orb-halo{position:absolute;inset:0;border-radius:50%;opacity:.32;filter:blur(8px);animation:agHalo 5s ease-in-out infinite}
.ag-halo-mint{background:radial-gradient(circle,#5CC8A0 0%,transparent 65%)}
.ag-halo-peach{background:radial-gradient(circle,#F5A06A 0%,transparent 65%)}
@keyframes agHalo{0%,100%{transform:scale(1);opacity:.32}50%{transform:scale(1.10);opacity:.48}}
.ag-orb-ring{position:absolute;inset:14px;border-radius:50%;border:1px solid;opacity:.35;animation:agRing 6s ease-in-out infinite}
.ag-ring-mint{border-color:#5CC8A0}
.ag-ring-peach{border-color:#F5A06A}
@keyframes agRing{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.05);opacity:.6}}
.ag-orb{width:128px;height:128px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-style:italic;font-size:62px;font-weight:400;color:#FFF;position:relative;z-index:2;letter-spacing:-.02em;line-height:1}
.ag-orb-mint{background:radial-gradient(circle at 32% 26%,#A4ECCB 0%,#5CC8A0 38%,#3FB089 70%,#2A8466 100%);box-shadow:0 18px 36px -12px rgba(63,176,137,.55),inset 0 3px 6px rgba(255,255,255,.36),inset 0 -6px 14px rgba(0,0,0,.16)}
.ag-orb-peach{background:radial-gradient(circle at 32% 26%,#FBDABE 0%,#F5A06A 38%,#D97757 70%,#A85936 100%);box-shadow:0 18px 36px -12px rgba(217,119,87,.55),inset 0 3px 6px rgba(255,255,255,.36),inset 0 -6px 14px rgba(0,0,0,.16)}

/* ---- Name / role ---- */
.ag-name{font-family:var(--display);font-size:48px;font-weight:400;font-style:italic;letter-spacing:-.022em;line-height:1;text-align:center;color:var(--ink);margin:0 0 8px;position:relative;z-index:2}
.ag-role{text-align:center;font-size:13.5px;color:var(--text-2);letter-spacing:-.005em;margin:0 0 26px;font-weight:400;position:relative;z-index:2;line-height:1.4}
.ag-role em{font-style:italic;color:var(--text-3)}

/* ---- Capabilities list ---- */
.ag-caps{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:7px;position:relative;z-index:2}
.ag-caps li{font-size:14px;color:var(--ink);letter-spacing:-.005em;padding:10px 14px;background:rgba(255,255,255,.78);border:1px solid var(--rule);border-radius:10px;display:flex;align-items:center;gap:11px;backdrop-filter:blur(4px);transition:border-color .25s,transform .25s,background .25s}
.ag-portrait:hover .ag-caps li{border-color:var(--rule-2)}
.ag-cap-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.ag-portrait-personal .ag-cap-dot{background:var(--mint);box-shadow:0 0 0 3px color-mix(in srgb, var(--mint) 22%, transparent)}
.ag-portrait-deal .ag-cap-dot{background:var(--peach);box-shadow:0 0 0 3px color-mix(in srgb, var(--peach) 22%, transparent)}

/* ---- Footer ---- */
.ag-portrait-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.10em;color:var(--text-3);text-transform:uppercase;font-weight:500;position:relative;z-index:2;gap:14px}
.ag-foot-key{flex-shrink:0}
.ag-foot-val{display:flex;align-items:center;gap:0}
.ag-foot-num{margin-left:10px;font-weight:500;color:var(--text-3);letter-spacing:.06em;white-space:nowrap}
.ag-tm-av{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:10px;font-weight:600;letter-spacing:0;font-family:var(--sans);text-transform:none;margin-left:-7px;border:2px solid #FFF;box-shadow:0 1px 2px rgba(0,0,0,.10);transition:transform .25s}
.ag-tm-av:first-of-type{margin-left:0}
.ag-tm-av:hover{transform:translateY(-2px)}
.ag-tm-av.sc{background:linear-gradient(135deg,#F5A06A,#E08838)}
.ag-tm-av.tl{background:linear-gradient(135deg,#4A7BF7,#3A6AE0)}
.ag-tm-av.er{background:linear-gradient(135deg,#F06090,#D74878)}
.ag-deal-mini{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:10.5px;font-weight:500;letter-spacing:0;font-family:var(--display);font-style:italic;margin-left:-7px;border:2px solid #FFF;box-shadow:0 1px 2px rgba(0,0,0,.10);opacity:.45;background:linear-gradient(135deg,#A98FF0,#6B5BD2)}
.ag-deal-mini:first-of-type{margin-left:0}
.ag-deal-mini-active{opacity:1;background:linear-gradient(135deg,#F5B591,#D97757)}

/* ---- Bridge ---- */
.ag-bridge{width:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 6px;position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#FAF8F4 100%);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ag-bridge-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);font-weight:700;display:flex;align-items:center;gap:8px;text-align:center}
.ag-bridge-arrow{color:var(--text-3);font-size:14px;font-weight:400;letter-spacing:0}
.ag-bridge-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-top:4px;font-weight:500}
.ag-bridge-svg{width:160px;height:280px;overflow:visible;display:block;margin:10px 0}
.ag-bridge-line{fill:none;stroke-width:1.5;stroke-dasharray:5 5;stroke-linecap:round}
.ag-bridge-ping{filter:drop-shadow(0 0 6px currentColor)}
.ag-bridge-foot{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10px;color:var(--text-3);letter-spacing:.10em;text-transform:uppercase;font-weight:500;margin-top:4px}
.ag-bridge-pulse{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(63,176,137,.18);animation:pulse 1.6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.ag-orb-halo,.ag-orb-ring,.ag-bridge-pulse{animation:none}.ag-bridge-ping{display:none}}

/* ---- Caption ---- */
.ag-caption{text-align:center;margin:64px auto 0;font-size:14px;color:var(--text-3);font-style:italic;letter-spacing:-.005em;max-width:560px;line-height:1.5}

/* ---- Entry animation ---- */
.ag-stage{opacity:0;transform:translateY(14px);transition:opacity .65s cubic-bezier(.4,0,.2,1),transform .65s cubic-bezier(.4,0,.2,1)}
.ag-stage.visible{opacity:1;transform:translateY(0)}
.ag-portrait{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.ag-stage.visible .ag-portrait{opacity:1;transform:translateY(0)}
.ag-stage.visible .ag-portrait-personal{transition-delay:.1s}
.ag-stage.visible .ag-portrait-deal{transition-delay:.25s}
.ag-bridge{opacity:0;transition:opacity 1s .55s}
.ag-stage.visible .ag-bridge{opacity:1}

/* ---- Responsive ---- */
@media(max-width:880px){
  .ag-stage{grid-template-columns:1fr;gap:24px;max-width:480px}
  .ag-portrait{min-height:0;padding:28px 24px;border-radius:20px !important;border:1px solid var(--rule)}
  .ag-portrait-personal{border-radius:20px}
  .ag-portrait-deal{border-radius:20px}
  .ag-bridge{width:auto;flex-direction:row;gap:16px;border:none;background:transparent;padding:12px 0}
  .ag-bridge-svg{width:200px;height:60px;transform:rotate(90deg)}
  .ag-bridge-foot{display:none}
}
@media(max-width:560px){
  .ag-orb-wrap{width:172px;height:172px}
  .ag-orb{width:112px;height:112px;font-size:54px}
  .ag-name{font-size:40px}
}

/* ============ WHATSAPP SIDEBAR ============ */
.wa-stage{align-items:flex-start;gap:24px}
.wa-back{cursor:pointer;user-select:none}
.wa-back:hover{opacity:.7}
/* WhatsApp chat list view (the back-screen) */
.wa-list-screen{position:absolute;inset:0;background:#FFF;display:flex;flex-direction:column;border-radius:46px;overflow:hidden;transform:translateX(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);z-index:50;pointer-events:none}
.wa-list-screen.act{transform:translateX(0);pointer-events:auto}
.wa-list-head{padding:54px 18px 12px;background:#F7F7F7;display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:.5px solid rgba(0,0,0,.08)}
.wa-list-title{font-size:26px;font-weight:700;color:#000;letter-spacing:-.022em}
.wa-list-edit{font-size:15px;color:#00A884;letter-spacing:-.005em;cursor:pointer}
.wa-list-search{margin:10px 16px 6px;background:rgba(118,118,128,.12);border-radius:10px;height:36px;display:flex;align-items:center;gap:6px;padding:0 12px;font-size:15px;color:#8E8E93;letter-spacing:-.005em}
.wa-list-search svg{flex-shrink:0;opacity:.7}
.wa-list-rows{flex:1;overflow-y:auto}
.wa-list-row{display:flex;align-items:center;gap:12px;padding:11px 16px;cursor:pointer;border-bottom:.5px solid rgba(0,0,0,.06)}
.wa-list-row:active{background:#E5E5E7}
.wa-list-av{width:52px;height:52px;border-radius:50%;color:#FFF;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;flex-shrink:0;letter-spacing:-.01em}
.wa-list-av.d{background:linear-gradient(135deg,#F5A06A,#D67844)}
.wa-list-av.h{background:linear-gradient(135deg,#5CC8A0,#3FB089)}
.wa-list-meta{flex:1;min-width:0}
.wa-list-row1{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:2px;gap:8px}
.wa-list-name{font-size:16px;font-weight:600;color:#000;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-list-time{font-size:13px;color:#8E8E93;flex-shrink:0;letter-spacing:-.005em}
.wa-list-prev{font-size:14px;color:#8E8E93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.005em;line-height:1.2}
.wa-list-unread{display:inline-flex;align-items:center;justify-content:center;background:#25D366;color:#FFF;font-size:11px;font-weight:700;border-radius:999px;min-width:18px;height:18px;padding:0 6px;letter-spacing:-.01em;margin-left:6px;float:right}
.wa-sidebar{width:300px;flex-shrink:0;background:#FFFFFF;border:1px solid rgba(255,255,255,.1);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.06);margin-top:80px;align-self:flex-start;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",sans-serif}
.wa-sidebar-head{padding:14px 18px 10px;border-bottom:0.5px solid rgba(0,0,0,0.08);background:#F7F7F7}
.wa-sidebar-title{font-size:18px;font-weight:700;color:#000;letter-spacing:-0.022em}
.wa-sidebar-search{margin-top:8px;background:rgba(118,118,128,0.12);border-radius:10px;height:30px;display:flex;align-items:center;gap:6px;padding:0 10px;font-size:13px;color:#8E8E93}
.wa-sidebar-search svg{flex-shrink:0;opacity:.7}
.wa-sidebar-list{padding:4px 0}
.wa-conv-row{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;border-left:3px solid transparent;transition:background .15s}
.wa-conv-row:hover{background:#F5F5F5}
.wa-conv-row.act{background:#EFF6FF;border-left-color:#00A884}
.wa-conv-av{width:44px;height:44px;border-radius:50%;color:#FFF;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;flex-shrink:0;letter-spacing:-0.01em;position:relative}
.wa-conv-av.d{background:linear-gradient(135deg,#8B6FE8,#6B4FD0)}
.wa-conv-av.h{background:linear-gradient(135deg,#5CC8A0,#3FB089)}
.wa-conv-meta{flex:1;min-width:0}
.wa-conv-row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:2px}
.wa-conv-name{font-size:14px;font-weight:600;color:#000;letter-spacing:-0.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-conv-time{font-size:11px;color:#8E8E93;flex-shrink:0;letter-spacing:-0.005em}
.wa-conv-row2{display:flex;justify-content:space-between;align-items:center;gap:8px}
.wa-conv-prev{font-size:13px;color:#8E8E93;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.005em;flex:1;min-width:0}
.wa-conv-row.act .wa-conv-prev{color:#666}
.wa-conv-unread{width:18px;height:18px;border-radius:50%;background:#25D366;color:#FFF;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;letter-spacing:-0.01em}
.wa-conv-sub{padding:8px 14px;font-family:var(--mono);font-size:10px;color:rgba(255,255,255,.5);letter-spacing:0.08em;text-transform:uppercase}
.wa-sidebar-foot{padding:10px 14px;font-size:11px;color:#8E8E93;border-top:0.5px solid rgba(0,0,0,0.08);background:#FAFAFA;font-style:italic;text-align:center}
.wa-conv-pane{grid-area:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s cubic-bezier(.4,0,.2,1)}
.wa-conv-pane.act{opacity:1;pointer-events:auto}
@media(max-width:960px){
  .wa-stage{flex-direction:column;align-items:center}
  .wa-sidebar{width:380px;margin-top:0}
}

/* ============ MODES (4-card 2x2 condensed) ============ */
.modes-grid{grid-template-columns:1fr 1fr;gap:18px}
.mode-card{min-height:auto;padding:28px 30px;max-height:none}
.mc-blue{background:linear-gradient(180deg,#EEF3FF 0%,#FFF 100%);border-color:#C7D6FB}
.mb-blue{color:#3A6AE0;border-color:#C7D6FB}
.mc-blue .mode-icon{border-color:#C7D6FB;color:#3A6AE0}
.mc-blue .mode-icon{animation:modePulse 3s ease-in-out infinite}
.modes-grid.visible .mode-card:nth-child(4){animation-delay:.36s}
@media(max-width:780px){.modes-grid{grid-template-columns:1fr}}

/* ============ RESPONSIVE ============ */
@media(max-width:1000px){
  .agents-grid,.modes-grid{grid-template-columns:1fr}
  .int-grid{grid-template-columns:1fr}
  .hero-meta{grid-template-columns:repeat(2,1fr);gap:24px}
}
@media(max-width:760px){
  nav,footer,.hero,.channels,.sec,.cta-sec,.trust{padding-left:24px;padding-right:24px}
  .sec,.channels,.cta-sec{padding-top:96px;padding-bottom:96px}
  .hero{padding-top:72px;padding-bottom:96px}
  h1{font-size:clamp(48px,12vw,72px)}
  .sec-h2{font-size:clamp(32px,8vw,44px)}
  .ol-layout{grid-template-columns:1fr}
  .ol-sidebar,.ol-list{display:none}
  .teams-sidebar,.tm-rail,.tm-panel{display:none}
  .teams-layout,.tm-layout{grid-template-columns:1fr}
  .ch-tabs{flex-wrap:wrap}
  .int-grid{grid-template-columns:1fr}
  .screen-stage{padding:24px 24px 0}
  .foot-cols{gap:32px}
  .foot-col a{padding-top:6px;padding-bottom:6px;margin-bottom:2px}
}
@media(max-width:480px){
  h1{font-size:clamp(40px,11.5vw,60px)}
  .hero-sub{font-size:17px}
  .hero-meta{grid-template-columns:1fr 1fr;gap:18px}
  .hero{padding-top:64px;padding-bottom:72px}
  .input-row{padding-left:18px}
  .input-row .btn{padding-left:16px;padding-right:16px}
  .sec,.channels,.cta-sec{padding-top:72px;padding-bottom:72px}
}
/* ============ CINEMA ENGINE ============ */
.cn-cursor{display:none!important}
.cn-cursor-disabled{position:fixed;top:0;left:0;width:36px;height:36px;z-index:9999;pointer-events:none;opacity:0;transition:opacity .35s,transform 820ms cubic-bezier(.45,0,.25,1);will-change:transform;filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.cn-cursor.visible{opacity:1}
.cn-cursor svg{display:block;width:100%;height:100%}
.cn-cursor::after{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;border-radius:50%;border:2px solid var(--lavender);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}
.cn-cursor.clicking::after{animation:cnRipple .45s ease-out forwards}
@keyframes cnRipple{from{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
.cn-caret{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:-.15em;animation:cnBlink 1s steps(2) infinite}
@keyframes cnBlink{50%{opacity:0}}
/* iOS notification banner */
.wa-ios-notif{position:absolute;top:62px;left:8px;right:8px;z-index:40;background:rgba(245,245,247,.88);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border-radius:16px;padding:11px 12px 12px;display:flex;align-items:flex-start;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.15);cursor:pointer;transform:translateY(-30px) scale(.92);opacity:0;transition:transform .42s cubic-bezier(.34,1.56,.5,1),opacity .3s ease;font-family:-apple-system,BlinkMacSystemFont,sans-serif}
.wa-ios-notif.cn-revealed{transform:translateY(0) scale(1);opacity:1;animation:notifSlideIn .42s cubic-bezier(.34,1.56,.5,1)}
@keyframes notifSlideIn{from{transform:translateY(-40px) scale(.92);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.wa-ios-notif.cn-exit{animation:notifSlideOut .4s cubic-bezier(.4,0,1,1) forwards!important}
@keyframes notifSlideOut{from{transform:translateY(0) scale(1);opacity:1}to{transform:translateY(-34px) scale(.94);opacity:0}}
.wa-ios-notif-icon{width:32px;height:32px;flex-shrink:0;border-radius:7.5px;overflow:hidden;background:#25D366;display:flex;align-items:center;justify-content:center;color:#FFF;font-family:-apple-system,sans-serif;font-weight:700;font-size:18px}
.wa-ios-notif-outlook .wa-ios-notif-icon{background:#0078D4}
.wa-ios-notif-meta{flex:1;min-width:0}
.wa-ios-notif-row1{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.wa-ios-notif-app{font-size:11px;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.04em}
.wa-ios-notif-time{color:#999;font-size:11px}
.wa-ios-notif-title{font-size:14px;font-weight:600;color:#000;margin-top:2px;letter-spacing:-.005em;line-height:1.15}
.wa-ios-notif-body{font-size:13px;color:#000;letter-spacing:-.005em;margin-top:1px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Inline Outlook calendar notification (lives in wa-body chat flow) */
.wa-cal-notif{align-self:stretch;background:rgba(255,255,255,.98);border-radius:12px;padding:9px 11px;display:flex;gap:10px;margin:6px 4px;box-shadow:0 2px 6px rgba(0,0,0,.10);border-left:3px solid #0078D4;animation:wa-cal-in .42s cubic-bezier(.34,1.56,.5,1) both}
.wa-cal-icon{width:32px;height:32px;border-radius:8px;background:#0078D4;display:flex;align-items:center;justify-content:center;color:#FFF;flex-shrink:0}
.wa-cal-meta{flex:1;min-width:0}
.wa-cal-row1{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:1px}
.wa-cal-title{font-size:13px;font-weight:600;color:#1a1a1a;letter-spacing:-.005em;line-height:1.25}
.wa-cal-body{font-size:12px;line-height:1.35;color:#444;margin-top:2px;letter-spacing:-.005em}
@keyframes wa-cal-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.wa-cal-notif{animation:none}}
[data-cn-mock]{position:relative}
/* Outlook desktop toast (bottom-right system notification) */
.ol-toast{position:absolute;bottom:18px;right:18px;width:340px;background:#FFF;border-radius:10px;box-shadow:0 24px 56px rgba(0,0,0,.24),0 4px 14px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.04);padding:14px 16px;display:flex;gap:12px;align-items:flex-start;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;z-index:60;opacity:0;transform:translateX(20px);pointer-events:none;transition:opacity .4s,transform .4s}
.ol-toast.cn-revealed{opacity:1;transform:translateX(0);pointer-events:auto;animation:olToastIn .5s cubic-bezier(.34,1.56,.5,1)}
@keyframes olToastIn{from{opacity:0;transform:translateX(24px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
.ol-toast.cn-exit{animation:olToastOut .42s cubic-bezier(.4,0,1,1) forwards!important}
@keyframes olToastOut{from{opacity:1;transform:translateX(0) scale(1)}to{opacity:0;transform:translateX(28px) scale(.96)}}
.ol-toast-icon{width:36px;height:36px;border-radius:8px;background:#EAF3FC;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ol-toast-body{flex:1;min-width:0;padding-right:14px}
.ol-toast-row1{display:flex;justify-content:space-between;align-items:center;font-family:"Segoe UI",sans-serif;font-size:10.5px;color:#605E5C;text-transform:uppercase;letter-spacing:.06em;font-weight:600;margin-bottom:3px}
.ol-toast-title{font-size:13.5px;font-weight:600;color:#242424;letter-spacing:-.005em;margin-bottom:4px}
.ol-toast-msg{font-size:12.5px;line-height:1.4;color:#3C3A37;letter-spacing:-.005em}
.ol-toast-meta{color:#605E5C;font-size:11.5px}
.ol-toast-actions{display:flex;gap:6px;margin-top:8px}
.ol-toast-btn{background:#FFF;border:1px solid #D9D7D3;border-radius:4px;padding:3px 10px;font-size:11.5px;font-weight:500;color:#242424;cursor:pointer;font-family:inherit;letter-spacing:-.005em;transition:background .15s}
.ol-toast-btn:hover{background:#F4F2EF}
.ol-toast-btn-primary{background:#0078D4;color:#FFF;border-color:#0078D4}
.ol-toast-btn-primary:hover{background:#106EBE}
.ol-toast-close{position:absolute;top:6px;right:8px;width:22px;height:22px;border:none;background:transparent;color:#605E5C;font-size:16px;line-height:1;cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center}
.ol-toast-close:hover{background:#F4F2EF;color:#242424}
@media (prefers-reduced-motion:reduce){.ol-toast.cn-revealed{animation:none}}
@media(max-width:780px){.ol-toast{width:280px;right:10px;bottom:10px;padding:11px 13px}.ol-toast-actions{display:none}}
[data-cn-mock] [data-cn-step]:not(.cn-revealed):not(.cn-popped){display:none}
[data-cn-mock] [data-cn-step].cn-revealed{animation:cnFadeIn .25s ease-out}
[data-cn-mock] [data-cn-step].cn-popped{animation:cnFadeIn .18s ease-out}
@keyframes cnFadeIn{from{opacity:0}to{opacity:1}}
[data-cn-input].cn-typing-active{color:#000;font-weight:400}

/* ---- SVG ICON HELPER ---- */
.ic-svg{display:inline-block;flex-shrink:0;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ol-nav-btn .ic-svg{width:17px;height:17px;color:#3C3A37}
.ol-nav-btn.act .ic-svg{color:#1E6BE2}
.ol-folder .ic-svg{width:15px;height:15px;color:#605E5C;position:absolute;left:13px}
.ol-folder.act .ic-svg{color:#1E6BE2}
.ol-ribbon-btn .ic-svg{width:14px;height:14px;color:#605E5C}
.ol-newmail .ic-svg{width:13px;height:13px;stroke:#FFF;stroke-width:2}
.ol-actbar-btn .ic-svg{width:17px;height:17px;color:#3C3A37}
.tm-rail-btn .ic-svg{width:19px;height:19px;color:#424242}
.tm-rail-btn.act .ic-svg{color:#5B5FC7}
.tm-tool .ic-svg{width:15px;height:15px;color:#605E5C}
.tm-send .ic-svg{width:16px;height:16px;color:#1E6BE2;stroke-width:1.8}
.tm-tb-icon .ic-svg{width:15px;height:15px;color:#424242}
.tm-icon-btn .ic-svg{width:16px;height:16px;color:#424242}
.tm-panel-actions .ic-svg{width:15px;height:15px;color:#424242}
.ol-list-filter .ic-svg{width:14px;height:14px;color:#605E5C}

/* Teams: subtle bubble around agent messages */
.tm-msg:not(.tm-msg-me) .tm-msg-text{background:#F6F6F6;border:1px solid #EAEAEA;border-radius:4px 12px 12px 12px;padding:8px 12px;margin-top:2px;display:inline-block;max-width:560px}
.tm-msg:not(.tm-msg-me) .tm-reactions{margin-left:0}

/* TEAMS panel — Chat (conversations) view */
.tm-section{margin:6px 0 8px}
.tm-section-hd{display:flex;align-items:center;gap:6px;padding:6px 14px;font-size:11px;font-weight:600;color:#605E5C;letter-spacing:0.02em;text-transform:uppercase;cursor:pointer}
.tm-section-hd .chev{font-size:10px;color:#605E5C;width:10px;display:inline-flex;justify-content:center}
.tm-convo{display:flex;align-items:center;gap:10px;padding:7px 12px;cursor:pointer;position:relative;margin:0 4px;border-radius:6px;min-height:48px}
.tm-convo:hover{background:#F0EDE6}
.tm-convo.act{background:#E3EDFC}
.tm-convo.act .tm-convo-name{color:#1E6BE2;font-weight:600}
.tm-convo-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:11px;font-weight:600;flex-shrink:0;letter-spacing:0;position:relative}
.tm-convo-av::after{content:"";position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:#13A10E;border:1.5px solid #FAFAFA}
.tm-convo-av.tm-av-h{background:linear-gradient(135deg,#5CC8A0,#3FB089)}
.tm-convo-av.tm-av-pa{background:linear-gradient(135deg,#CA8B02,#E0A93E)}
.tm-convo-av.tm-av-pa::after{display:none}
.tm-convo-av.tm-av-h::before,.tm-convo-av.tm-av-d::before{display:none}
.tm-convo-av.tm-av-h::after{content:"";position:absolute;bottom:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:#13A10E;border:1.5px solid #FAFAFA}
.tm-convo-meta{flex:1;min-width:0}
.tm-convo-row1{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:2px}
.tm-convo-name{font-size:13px;font-weight:500;color:#242424;letter-spacing:-0.005em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm-convo-time{font-size:11px;color:#605E5C;flex-shrink:0}
.tm-convo-prev{font-size:11.5px;color:#605E5C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-0.005em}
.tm-convo.unread .tm-convo-name{font-weight:700;color:#242424}
.tm-convo.unread .tm-convo-time,.tm-convo.unread .tm-convo-prev{color:#1E6BE2;font-weight:600}
.tm-convo-badge{position:absolute;right:14px;bottom:10px;background:#A4262C;color:#FFF;font-size:10px;font-weight:700;border-radius:10px;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 5px;line-height:1}
.tm-convo .tm-pin{position:absolute;left:34px;top:6px;font-size:8px;color:#605E5C;opacity:.7;transform:rotate(-30deg)}
.tm-panel-body-dm{padding:0}
.tm-stage{position:relative;display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0;height:100%}
.tm-pane{display:none;flex-direction:column;flex:1;min-height:0;overflow:hidden;height:100%}
.tm-pane.act{display:flex}
.tm-pane > .tm-main{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;height:100%}
.tm-toast{position:absolute;top:60px;right:18px;width:340px;background:#FFFFFF;border-radius:10px;box-shadow:0 18px 48px rgba(0,0,0,.20),0 2px 8px rgba(0,0,0,.10);padding:14px 16px;display:flex;gap:12px;z-index:60;cursor:pointer;transform:translateX(40px) scale(.94);opacity:0;transition:none}
.tm-toast.cn-revealed{transform:translateX(0) scale(1);opacity:1;animation:tmToastIn .42s cubic-bezier(.34,1.56,.5,1)}
@keyframes tmToastIn{from{transform:translateX(40px) scale(.92);opacity:0}to{transform:translateX(0) scale(1);opacity:1}}
.tm-toast-icon{width:36px;height:36px;border-radius:8px;background:linear-gradient(135deg,#5CC8A0,#3FB089);color:#FFF;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0;letter-spacing:-.01em}
.tm-toast-meta{flex:1;min-width:0}
.tm-toast-app{font-size:10.5px;color:#605E5C;letter-spacing:0.02em;font-weight:500}
.tm-toast-title{font-size:13px;font-weight:600;color:#242424;margin-top:1px;letter-spacing:-0.005em}
.tm-toast-body{font-size:12.5px;color:#3C3A37;margin-top:3px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.wa-stage.cn-fading{opacity:0;transition:opacity .35s ease}
.cn-controls{position:absolute;top:14px;right:18px;z-index:25;display:flex;gap:6px;opacity:0;transition:opacity .25s;pointer-events:none}
[data-cn-mock]:hover .cn-controls,[data-cn-mock].cn-playing .cn-controls,[data-cn-mock].cn-done .cn-controls{opacity:1;pointer-events:auto}
.cn-btn{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--rule-2);color:var(--ink);font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .15s,transform .15s;display:inline-flex;align-items:center;gap:5px;box-shadow:var(--shadow-1)}
.cn-btn:hover{background:#FFF;transform:translateY(-1px);box-shadow:var(--shadow-2)}
.cn-btn[hidden]{display:none}
@media (prefers-reduced-motion:reduce){.cn-cursor{display:none}[data-cn-mock] [data-cn-step]:not(.cn-revealed):not(.cn-popped){display:none}[data-cn-mock] [data-cn-step]{animation:none!important}}

/* ===== BLOC 2 — .cpf-* carousel + display:none family (source L2004-2244) ===== */
  /* ===== CHANNEL PLAYER (Apple-style carousel) ===== */
  .cplayer{max-width:1200px;width:100%;box-sizing:border-box;margin:24px auto 0;padding:0 24px}
  .cpf-viewport{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;overflow:hidden;padding:14px 0;-webkit-mask:linear-gradient(90deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%);mask:linear-gradient(90deg,transparent 0,#000 4.5%,#000 95.5%,transparent 100%)}
  .cpf-track{display:flex;gap:22px;will-change:transform;transition:transform .62s cubic-bezier(.5,0,.18,1)}
  .cpf-frame{flex:0 0 auto;background:#FBFAF8;border:1px solid rgba(26,24,20,.09);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;height:clamp(520px,80vh,760px);opacity:.55;transition:opacity .55s ease;cursor:pointer}
  .cpf-frame.active{opacity:1;cursor:default}
  /* dynamic caption above the carousel (replaces per-frame headers) */
  .cpf-caption{max-width:680px;margin:0 auto 30px;text-align:center;min-height:118px}
  .cpf-cap-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:0 0 13px;transition:color .4s}
  .cpf-cap-kicker .d{width:7px;height:7px;border-radius:50%;background:currentColor}
  .cpf-cap-title{font-size:clamp(26px,3vw,38px);font-weight:600;letter-spacing:-.026em;line-height:1.08;margin:0 0 12px;color:var(--ink)}
  .cpf-cap-sub{font-size:16px;line-height:1.55;color:var(--text-2);margin:0 auto;max-width:560px;letter-spacing:-.006em}
  .cpf-caption.swap{opacity:0;transform:translateY(8px)}
  .cpf-caption{transition:opacity .34s ease,transform .34s ease}
  .cpf-cap{flex-shrink:0;padding:28px 34px 18px}
  .cpf-cap-k{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:0 0 10px}
  .cpf-cap h3{font-size:clamp(20px,2vw,28px);font-weight:600;letter-spacing:-.026em;line-height:1.14;margin:0;color:var(--ink);max-width:80%}
  .cpf-media{position:relative;flex:1;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#FFFFFF}
  .cpf-frame[data-cpf="email"] .cpf-media{background:radial-gradient(120% 120% at 50% 0%,#FBF1E9 0%,#F4E4D5 100%)}
  .cpf-frame[data-cpf="teams"] .cpf-media{background:radial-gradient(120% 120% at 50% 0%,#F1ECFB 0%,#E6DDF7 100%)}
  .cpf-frame[data-cpf="whatsapp"] .cpf-media{background:radial-gradient(120% 120% at 50% 0%,#E9F6EF 0%,#DAEEE3 100%)}
  .wa-annot{position:absolute;z-index:5;max-width:215px;font-size:16px;line-height:1.42;font-weight:500;color:var(--ink);letter-spacing:-.012em;padding-left:19px;opacity:0;transition:opacity .6s ease;text-wrap:pretty}
  .cpf-frame.active .wa-annot{opacity:1}
  .wa-annot-dot{position:absolute;left:0;top:5px;width:8px;height:8px;border-radius:50%;background:#25D366;box-shadow:0 0 0 4px rgba(37,211,102,.16)}
  .wa-annot-1{top:14%;left:5%}
  .wa-annot-2{bottom:16%;left:5%}
  .wa-annot-3{top:30%;right:5%;text-align:right;padding-left:0;padding-right:16px}
  .wa-annot-3 .wa-annot-dot{left:auto;right:0}
  .cpf-frame[data-cpf="email"] .wa-annot-dot{background:#1E6BE2;box-shadow:0 0 0 4px rgba(30,107,226,.16)}
  .cpf-frame[data-cpf="teams"] .wa-annot-dot{background:#5B5FC7;box-shadow:0 0 0 4px rgba(91,95,199,.16)}
  @media(max-width:1100px){ .wa-annot-1,.wa-annot-2{left:2%;max-width:150px} .wa-annot-3{right:2%;max-width:150px} }
  /* annotations show only in the desktop showcase (bezel); hidden when flat or when OT shown as windows */
  .cpf-mobile:not(.cpf-bezel) .wa-annot{display:none!important}
  .cpf-frame.cpf-win .wa-annot{display:none!important}
  @media(max-width:760px){ .wa-annot{display:none!important} }

  /* ============================================================
     MOBILE iOS RESKIN — same DOM & cinematic script, phone-app look
     ============================================================ */
  .cpf-mobile .cpf-frame{height:min(84vh,724px)}
  .cpf-mobile:not(.cpf-bezel) .cpf-cap{padding:12px 18px 8px}
  .cpf-mobile:not(.cpf-bezel) .cpf-cap-k{font-size:9.5px;margin:0 0 5px}
  .cpf-mobile:not(.cpf-bezel) .cpf-cap h3{font-size:16px;line-height:1.16;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cpf-mobile:not(.cpf-bezel) .cpf-media{align-items:stretch}
  .cpf-mobile:not(.cpf-bezel) .cpf-scale{align-self:stretch}

  /* ---- Outlook desktop → iOS Outlook ---- */
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-frame{width:384px;height:812px;background:#fff;display:flex;flex-direction:column}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-titlebar,.cpf-mobile .cpf-frame:not(.cpf-win) .ol-ribbon,.cpf-mobile .cpf-frame:not(.cpf-win) .ol-nav,.cpf-mobile .cpf-frame:not(.cpf-win) .ol-sidebar{display:none!important}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-layout{display:block;position:relative;flex:1;min-height:0;height:auto}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-list{display:flex;flex-direction:column;width:100%;height:812px;border:none;background:#fff}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-list::before{content:"Inbox";flex:0 0 auto;padding:56px 20px 2px;font-size:30px;font-weight:700;letter-spacing:-.02em;color:#1d1d1f}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-list-toggle{border:none;padding:8px 16px 8px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-list-pills{font-size:13px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-list-body{flex:1;overflow:auto;padding:0}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-list-day{padding:9px 16px 4px;font-size:12px;color:#8a8a8e;background:#fff;border:none}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-item{padding:11px 16px;gap:11px;border-bottom:1px solid #ececec;align-items:flex-start}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-avatar-sm{width:38px;height:38px;font-size:15px;border-radius:50%}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-item-from{font-size:15px;font-weight:600}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-item-time{font-size:12px;color:#8a8a8e}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-item-subj{font-size:13.5px;font-weight:500}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-item-prev{font-size:13px;color:#8a8a8e}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-content{position:absolute;inset:0;transform:translateX(100%);transition:transform .42s cubic-bezier(.4,0,.2,1);z-index:6;background:#fff;display:flex;flex-direction:column;overflow:hidden}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-content:has(.ol-readpane:not([hidden])){transform:translateX(0)}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-content{overflow:hidden!important}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-content::before{content:"‹ Inbox";order:0;flex:0 0 auto;padding:54px 16px 12px;font-size:17px;font-weight:500;color:#1E6BE2;background:#fff;border-bottom:1px solid #eee}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-readpane{order:1;flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 18px 24px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-readpane[hidden]{display:none}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-actbar{order:2;flex:0 0 auto;justify-content:space-around;padding:10px 12px;border-top:1px solid #eee;border-bottom:none;background:#fff}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-actbar-btn{width:42px;height:36px;font-size:17px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-subj{font-size:20px;line-height:1.22}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-attach-list{flex-wrap:wrap}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-toast,.cpf-mobile .cpf-frame:not(.cpf-win) .tm-toast{left:16px;right:16px;width:auto;top:60px;bottom:auto;border-radius:18px;background:rgba(245,245,247,.9);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);padding:9px 12px;box-shadow:0 10px 28px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.05)}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-toast-actions,.cpf-mobile .cpf-frame:not(.cpf-win) .ol-toast-close,.cpf-mobile .cpf-frame:not(.cpf-win) .tm-toast-actions,.cpf-mobile .cpf-frame:not(.cpf-win) .tm-toast-close{display:none}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-toast-icon{width:32px;height:32px;border-radius:7.5px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-toast-body{padding-right:0}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-toast-title{font-size:14px;margin-bottom:1px;line-height:1.15}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-toast-msg{font-size:13px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* ---- iOS Outlook: collapsed recipients + native bottom (suggested replies + reply bar + tab bar) ---- */
  .ol-to-collapsed{display:none}
  .ol-ios-bottom{display:none}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-to-full{display:none}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-to-collapsed{display:inline-flex;align-items:center;gap:5px;color:#605E5C;font-size:13.5px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-to-collapsed .chev{font-size:10px;color:#8A8A8E}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-from-email{display:none}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-actbar{display:none}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-bottom{order:3;flex:0 0 auto;display:flex;flex-direction:column;background:#fff}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-suggest{display:none}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-chip{flex:0 0 auto;border:1px solid #CBD8EA;color:#1E6BE2;background:#fff;border-radius:20px;padding:8px 16px;font-size:14.5px;font-weight:500;white-space:nowrap}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-replybar{display:flex;align-items:center;justify-content:space-between;margin:6px 13px 10px;border:1px solid #E4E4E4;border-radius:26px;padding:9px 14px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-reply-l{display:flex;align-items:center;gap:7px;color:#3C3A37;font-size:15.5px;font-weight:500}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-reply-l > svg{width:21px;height:21px;color:#3C3A37}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-reply-l .chev{font-size:11px;color:#605E5C;margin-left:-4px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-reply-r{display:flex;align-items:center;gap:17px;color:#605E5C}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-reply-r svg{width:21px;height:21px;display:block}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-more{position:relative;display:flex}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-more::after{content:"";position:absolute;top:-1px;right:-2px;width:7px;height:7px;border-radius:50%;background:#E5484D;border:1.5px solid #fff}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-tabbar{display:flex;align-items:center;justify-content:space-around;padding:7px 0 16px;border-top:1px solid #ECECEC}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-tab{display:flex;flex-direction:column;align-items:center;gap:3px;color:#8A8A8E;font-size:11px;font-weight:500}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-tab svg{width:25px;height:25px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-ios-tab.act{color:#1E6BE2}

  /* ---- Teams desktop → iOS Teams ---- */
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-frame{width:384px;height:812px;background:#fff;display:flex;flex-direction:column}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-titlebar,.cpf-mobile .cpf-frame:not(.cpf-win) .tm-rail,.cpf-mobile .cpf-frame:not(.cpf-win) .tm-panel{display:none!important}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-layout{display:block;position:relative;flex:1;min-height:0;height:auto}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-stage{height:812px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-pane.act{height:812px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-pane>.tm-main{height:812px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-ch-head{padding:52px 14px 10px 40px;border-bottom:1px solid #eee;position:relative;background:#fff}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-ch-head::before{content:"‹";position:absolute;left:12px;top:48px;font-size:26px;line-height:1;color:#5B5FC7;font-weight:400}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-tabs{display:none}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-messages{padding:12px 12px 8px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-msg{gap:8px;padding:5px 2px}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-msg:not(.tm-msg-me) .tm-av{display:none}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-msg:not(.tm-msg-me) .tm-msg-text{max-width:92%}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-composer{margin:0 12px 16px}
  /* iOS Teams: purple “+” on the left of the composer (shared with DM reference) */
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-composer-bottom{justify-content:space-between}
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-composer-l{display:flex;align-items:center}
  .tm-plus{width:26px;height:26px;border-radius:50%;background:#5B5FC7;color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:400;line-height:0;position:relative;flex-shrink:0}
  .tm-plus::after{content:"";position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:50%;background:#E5484D;border:1.5px solid #fff}
  .cpf-mobile:not(.cpf-bezel) .ol-toast,.cpf-mobile:not(.cpf-bezel) .tm-toast{display:none!important}
  .cpf-mobile .ol-content,.cpf-mobile .ol-readpane,.cpf-mobile .tm-messages{overflow-x:hidden}
  .cpf-mobile .ol-attach-list{flex-wrap:wrap;gap:8px}
  .cpf-mobile .ol-attach{min-width:0}

  /* iOS status bar for Outlook & Teams phones (matches WhatsApp) */
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-layout,
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-stage{position:relative}
  .cpf-mobile .cpf-frame:not(.cpf-win) .ol-layout::before,
  .cpf-mobile .cpf-frame:not(.cpf-win) .tm-stage::before{
    content:"9:41";position:absolute;top:0;left:0;right:0;height:46px;z-index:30;
    display:flex;align-items:center;box-sizing:border-box;padding:16px 26px 0 30px;
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;font-size:15px;font-weight:600;letter-spacing:-.01em;color:#000;
    background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2272%22%20height%3D%2214%22%20viewBox%3D%220%200%2072%2014%22%3E%3Crect%20x%3D%220%22%20y%3D%227%22%20width%3D%223%22%20height%3D%227%22%20rx%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%225%22%20y%3D%225%22%20width%3D%223%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%223%22%20width%3D%223%22%20height%3D%2211%22%20rx%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2215%22%20y%3D%220%22%20width%3D%223%22%20height%3D%2214%22%20rx%3D%221%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M23%205.4a9%209%200%200%201%2013%200l-1.9%201.9a6.3%206.3%200%200%200-9.2%200z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M25.6%208a5.4%205.4%200%200%201%207.8%200l-1.9%201.9a2.7%202.7%200%200%200-4%200z%22%20fill%3D%22%23000%22%2F%3E%3Cpath%20d%3D%22M28.2%2010.6a1.9%201.9%200%200%201%202.6%200l-1.3%201.3z%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2246%22%20y%3D%222%22%20width%3D%2221%22%20height%3D%2211%22%20rx%3D%223%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-opacity%3D%220.4%22%20stroke-width%3D%221.1%22%2F%3E%3Crect%20x%3D%2247.5%22%20y%3D%223.5%22%20width%3D%2215%22%20height%3D%228%22%20rx%3D%221.6%22%20fill%3D%22%23000%22%2F%3E%3Crect%20x%3D%2268%22%20y%3D%225%22%20width%3D%222%22%20height%3D%224%22%20rx%3D%221%22%20fill%3D%22%23000%22%20fill-opacity%3D%220.4%22%2F%3E%3C%2Fsvg%3E");background-repeat:no-repeat;background-position:right 24px top 16px;background-size:72px 14px;pointer-events:none}
  /* ---- WhatsApp → flat iOS app screen (FLAT mode only) ---- */
  .cpf-mobile:not(.cpf-bezel) .wa-stage{padding:0}
  .cpf-mobile:not(.cpf-bezel) .wa-phone{width:384px;border-radius:0;background:#fff;padding:0;box-shadow:none!important}
  .cpf-mobile:not(.cpf-bezel) .wa-island{display:none}
  .cpf-mobile:not(.cpf-bezel) .wa-screen{border-radius:0;height:812px}

  /* ============================================================
     BEZEL MODE — wrap Outlook & Teams in an iPhone frame too
     (WhatsApp keeps its native bezel) ============================ */
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ol-frame,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-frame{
    position:relative;width:360px;height:758px;box-sizing:border-box;border:var(--ip-railw) solid var(--ip-rail)!important;border-radius:var(--ip-radius)!important;padding:var(--ip-pad);
    background:var(--ip-bg)!important;
    box-shadow:var(--ip-shadow)!important;
  }
  .dev-frame{display:none!important}
  /* clip the screen's bottom corners to the bezel (kill square gray corners) */
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ol-layout,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-layout,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-stage,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-pane,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-main,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .wa-screen{border-radius:46px!important;overflow:hidden!important;transform:translateZ(0);isolation:isolate;clip-path:inset(0 round 46px)}
  /* force the bezel frame to actually clip its children to the rounded shape */
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ol-frame,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-frame,
  .cpf-frame[data-cpf="whatsapp"] .wa-phone{overflow:hidden;transform:translateZ(0)}
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ol-frame::after,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-frame::after{
    content:"";position:absolute;top:var(--ip-isl-top);left:50%;transform:translateX(-50%);
    width:var(--ip-isl-w);height:var(--ip-isl-h);border-radius:var(--ip-isl-radius);z-index:40;
    background:var(--ip-isl-bg);box-shadow:var(--ip-isl-shadow);
  }
  .cpf-mobile .wa-stage{padding:0}
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ol-layout,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-stage{border-radius:46px;overflow:hidden;height:740px}
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ol-list,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-pane.act,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-pane>.tm-main{height:100%}
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ol-frame::after,
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-frame::after{
    content:"";position:absolute;top:var(--ip-isl-top);left:50%;transform:translateX(-50%);
    width:var(--ip-isl-w);height:var(--ip-isl-h);border-radius:var(--ip-isl-radius);z-index:40;
    background:var(--ip-isl-bg);box-shadow:var(--ip-isl-shadow);
  }
  /* room under the dynamic island / status bar */
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ol-list::before{padding-top:56px}
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .ol-content::before{padding-top:54px}
  .cpf-mobile.cpf-bezel .cpf-frame:not(.cpf-win) .tm-ch-head{padding-top:54px}

  /* ---- view toggle — desktop page only, controls Outlook & Teams ---- */
  .cpf-modeswitch{display:none}
  @media(min-width:760px){ .cpf-modeswitch{display:inline-flex;align-items:center;gap:2px;background:#FFF;border:1px solid var(--rule);border-radius:999px;padding:3px;margin-left:12px;box-shadow:0 3px 10px -5px rgba(26,24,20,.2)} }
  .cpf-modeswitch button{border:none;background:transparent;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);padding:6px 11px;border-radius:999px;font-weight:600;transition:background .2s,color .2s}
  .cpf-modeswitch button.on{background:var(--ink);color:#FAF8F4}
  .cpf-morph .cpf-frame{transition:width .58s cubic-bezier(.62,0,.2,1)}
  .cpf-scale{flex:0 0 auto}
  .cpf-frame .win-frame{border-radius:0!important;box-shadow:none!important}
  /* thin, subtle scrollbars inside the mocks (replace the chunky native one) */
  .cpf-frame .ol-content::-webkit-scrollbar,.cpf-frame .ol-list::-webkit-scrollbar,.cpf-frame .ol-sidebar::-webkit-scrollbar,.cpf-frame .tm-messages::-webkit-scrollbar,.cpf-frame .wa-body::-webkit-scrollbar{width:6px;height:6px}
  .cpf-frame .ol-content::-webkit-scrollbar-thumb,.cpf-frame .ol-list::-webkit-scrollbar-thumb,.cpf-frame .ol-sidebar::-webkit-scrollbar-thumb,.cpf-frame .tm-messages::-webkit-scrollbar-thumb,.cpf-frame .wa-body::-webkit-scrollbar-thumb{background:rgba(60,58,55,.18);border-radius:4px}
  .cpf-frame .ol-content::-webkit-scrollbar-track,.cpf-frame .ol-list::-webkit-scrollbar-track,.cpf-frame .ol-sidebar::-webkit-scrollbar-track,.cpf-frame .tm-messages::-webkit-scrollbar-track,.cpf-frame .wa-body::-webkit-scrollbar-track{background:transparent}
  .cpf-frame .ch-panel{box-shadow:none!important;background:transparent!important}
  .cpf-frame[data-cpf="email"] .cpf-stage{background:#FAF9F8;padding:0}
  .cpf-frame[data-cpf="teams"] .cpf-stage{background:#F5F5F5;padding:0}
  .cpf-frame[data-cpf="whatsapp"] .cpf-stage{background:#FFFFFF;padding:0}
  .cpf-frame[data-cpf="whatsapp"] .wa-phone{background:var(--ip-bg)!important;box-shadow:var(--ip-shadow)!important}
  /* force a canonical, window-width-independent layout inside the carousel */
  .cpf-frame .ol-layout{grid-template-columns:48px 320px 560px!important}
  .cpf-frame .ol-sidebar{display:none!important}
  .cpf-frame .tm-layout{grid-template-columns:54px 248px 588px!important}
  @media(max-width:680px){ .cpf-aside{display:none} .cpf-frame[data-cpf="whatsapp"] .cpf-stage{padding:0} }
  .cpf-scale{transform-origin:center center;backface-visibility:hidden}
  .cpf-frame .ch-panel{margin:0!important;opacity:1!important;transform:none!important;transition:none!important;max-width:none!important}
  .cpf-frame .ch-panel::before{display:none!important}
  .cpf-frame .ch-panel *{pointer-events:none!important}
  .cpf-frame .cn-controls{display:none!important}

  /* hide the old scroll scaffolding — the player replaces it */
  #channels-section #chapterBar,
  #channels-section article.act,
  #channels-section .act-divider{display:none!important}

  /* narrow control: play + 3 channel icons */
  .cpf-control{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:24px}
  .cpf-play{width:46px;height:46px;border-radius:50%;background:var(--ink);color:#FAF8F4;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:transform .18s}
  .cpf-play:hover{transform:scale(1.07)}
  .cpf-play svg{width:15px;height:15px}
  .cpf-play .cp-ico-play{display:none}.cpf-play.paused .cp-ico-play{display:block}
  .cpf-play .cp-ico-pause{display:block}.cpf-play.paused .cp-ico-pause{display:none}
  .cpf-tabs{display:flex;align-items:center;gap:4px;background:#FFF;border:1px solid var(--rule);border-radius:999px;padding:5px;box-shadow:0 3px 10px -5px rgba(26,24,20,.2)}
  .cpf-tab{position:relative;width:42px;height:42px;border-radius:50%;border:none;background:transparent;cursor:pointer;padding:7px;overflow:hidden;opacity:.4;transition:opacity .25s,background .25s}
  .cpf-tab:hover{opacity:.8}
  .cpf-tab.active{opacity:1;background:var(--paper-2)}
  .cpf-tab svg{width:100%;height:100%;display:block;border-radius:8px}
  .cpf-tab-prog{position:absolute;left:6px;right:6px;bottom:3px;height:2.5px;border-radius:2px;background:rgba(26,24,20,.12);overflow:hidden;opacity:0;transition:opacity .25s}
  .cpf-tab.active .cpf-tab-prog{opacity:1}
  .cpf-tab-prog-fill{display:block;height:100%;width:0;background:var(--c)}
  @media(max-width:600px){
    .cpf-frame{height:clamp(440px,68vh,560px)}
    .cpf-bar-title{font-size:12.5px}
  }

/* ===== BLOC 3 — .agx agents (source L3405-3461) ===== */
/* ===== AGENTS — editorial (Apple-Neo) ===== */
.agx{max-width:1080px;margin:56px auto 0;padding:0 24px;display:flex;flex-direction:column;gap:18px}
.agx-row{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:center}
.agx-row .agx-art{order:1}
.agx-row .agx-text{order:2}
.agx-row.flip .agx-art{order:2}
.agx-row.flip .agx-text{order:1}
.agx-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin:0 0 16px}
.agx-kicker .d{width:7px;height:7px;border-radius:50%}
.agx-k-mint{color:var(--mint)}.agx-k-mint .d{background:var(--mint)}
.agx-k-peach{color:var(--peach)}.agx-k-peach .d{background:var(--peach)}
.agx-name{font-size:clamp(42px,5vw,64px);font-weight:600;letter-spacing:-.03em;line-height:1;margin:0 0 8px;color:var(--ink)}
.agx-role{font-family:var(--display);font-style:italic;font-size:22px;color:var(--text-2);margin:0 0 18px;letter-spacing:-.01em;line-height:1.2}
.agx-desc{font-size:16px;line-height:1.6;color:var(--text-2);margin:0 0 22px;max-width:450px;letter-spacing:-.006em}
.agx-desc em{font-style:normal;color:var(--ink);font-weight:500}
.agx-caps{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.agx-cap{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);background:#FFF;border:1px solid var(--rule);border-radius:999px;padding:7px 13px;letter-spacing:-.005em}
.agx-cap .dot{width:5px;height:5px;border-radius:50%}
.agx-cap-mint .dot{background:var(--mint)}.agx-cap-peach .dot{background:var(--peach)}
.agx-art-card{position:relative;background:#FFF;border:1px solid var(--rule);border-radius:20px;padding:22px;box-shadow:0 34px 64px -34px rgba(26,24,20,.34);overflow:hidden}
.agx-art-card::before{content:"";position:absolute;inset:0;background:radial-gradient(130% 90% at 50% 0,var(--glow),transparent 68%);opacity:.6;pointer-events:none}
.agx-art-ari{--glow:rgba(63,176,137,.16)}
.agx-art-dumb{--glow:rgba(217,119,87,.16)}
.agx-art-top{display:flex;align-items:center;gap:10px;margin-bottom:16px;position:relative}
.agx-orb{width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#FFF;font-weight:600;font-size:15px;flex-shrink:0;font-family:var(--sans)}
.agx-orb-mint{background:linear-gradient(135deg,#4FC79C,#2E9C77)}
.agx-orb-peach{background:linear-gradient(135deg,#E8895F,#C9603C)}
.agx-art-who{font-weight:600;font-size:14px;color:var(--ink)}
.agx-art-tag{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;background:var(--paper-2);color:var(--text-3)}
.agx-draft{position:relative;font-size:13.5px;line-height:1.62;color:var(--text);letter-spacing:-.006em}
.agx-draft p{margin:0 0 9px}
.agx-skel{height:8px;border-radius:4px;background:var(--rule);margin:8px 0 0}
.agx-draft-foot{margin-top:15px;padding-top:13px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:10.5px;color:#2E9C77;letter-spacing:.01em;display:flex;align-items:center;gap:7px;position:relative}
.agx-draft-foot .chk{width:14px;height:14px;border-radius:50%;background:var(--mint);color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}
.agx-vers{display:flex;flex-direction:column;gap:8px;position:relative}
.agx-ver{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;border:1px solid var(--rule);background:var(--paper);font-size:13px}
.agx-ver-cur{border-color:var(--peach-border);background:var(--peach-bg)}
.agx-ver-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-3);width:26px;flex-shrink:0;font-weight:600}
.agx-ver-cur .agx-ver-tag{color:var(--peach-text)}
.agx-ver-txt{color:var(--ink);letter-spacing:-.005em}
.agx-ver-meta{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--text-3)}
.agx-parties{margin-top:14px;padding-top:13px;border-top:1px solid var(--rule);font-size:12.5px;color:var(--text-2);letter-spacing:-.005em;line-height:1.5;position:relative}
.agx-parties b{color:var(--ink);font-weight:600}
.agx-bridge2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;padding:34px 0 30px}
.agx-bridge2-orbs{display:flex;align-items:center}
.agx-b2-line{width:130px;height:2px;position:relative;overflow:hidden;background:linear-gradient(90deg,var(--mint),var(--peach))}
.agx-b2-line::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,#fff,transparent);animation:cutFlow 2s linear infinite}
.agx-bridge2-cap{font-family:var(--display);font-style:italic;font-size:22px;color:var(--ink);letter-spacing:-.01em;max-width:620px;margin:0;line-height:1.32}
.agx-bridge2-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0}
@media (prefers-reduced-motion:reduce){.agx-b2-line::after{animation:none}}
@media(max-width:820px){
  .agx-row{grid-template-columns:1fr;gap:26px}
  .agx-row .agx-art,.agx-row .agx-text,.agx-row.flip .agx-art,.agx-row.flip .agx-text{order:0}
  .agx-name{font-size:clamp(36px,10vw,52px)}
}

/* ===== BLOC 4 — .modesx (source L3534-3578) ===== */
/* ===== MODES — bento (Apple-Neo) ===== */
.modesx-rail{display:flex;align-items:center;gap:14px;max-width:760px;margin:4px auto 28px;font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--text-3)}
.modesx-rail .ln{flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,#4A7BF7,var(--mint) 34%,var(--peach) 68%,#8B6FE8)}
.modesx-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;max-width:1000px;margin:0 auto}
.modesx-card{position:relative;border:1px solid color-mix(in srgb, var(--mc) 24%, var(--rule));border-radius:20px;padding:24px 26px;background:#FFF;overflow:hidden;display:flex;flex-direction:column;gap:14px;box-shadow:0 1px 0 rgba(26,24,20,.02)}
.modesx-card::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;background:radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--mc) 7%, transparent), transparent 70%);pointer-events:none}
.modesx-card.w7{grid-column:span 7;flex-direction:row;align-items:center;gap:28px}
.modesx-card.w5{grid-column:span 5}
.c-blue{--mc:#4A7BF7}.c-mint{--mc:var(--mint)}.c-peach{--mc:var(--peach)}.c-lav{--mc:#8B6FE8}
.mx-head-wrap{display:flex;flex-direction:column}
.modesx-card.w7 .mx-head-wrap{flex:1;min-width:0}
.mx-top{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mx-n{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mc);font-weight:700}
.mx-tag{margin-left:auto;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;white-space:nowrap}
.mx-tag.on{background:var(--ink);color:#FAF8F4}
.mx-tag.off{background:transparent;color:var(--text-3);border:1px solid var(--rule-2)}
.mx-title{font-size:22px;font-weight:600;letter-spacing:-.022em;line-height:1.1;margin:0 0 8px;color:var(--ink)}
.mx-desc{font-size:14px;color:var(--text-2);line-height:1.5;margin:0;letter-spacing:-.006em}
.mx-art{flex-shrink:0}
.modesx-card.w7 .mx-art{flex:1;min-width:0;max-width:46%}
.modesx-card.w5 .mx-art{margin-top:2px}
.mx-chat{display:flex;flex-direction:column;gap:8px}
.mx-bub{font-size:12.5px;line-height:1.4;padding:9px 13px;border-radius:14px;max-width:92%;letter-spacing:-.005em}
.mx-bub-you{align-self:flex-end;background:#4A7BF7;color:#fff;border-bottom-right-radius:4px}
.mx-bub-ag{align-self:flex-start;background:var(--paper-2);color:var(--ink);border-bottom-left-radius:4px}
.mx-cal{display:flex;flex-direction:column;gap:6px}
.mx-cal-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink);padding:7px 12px;border-radius:9px;background:var(--mint-bg);border:1px solid var(--mint-border)}
.mx-cal-row b{font-family:var(--mono);font-size:10px;width:30px;color:var(--mint-text);font-weight:600}
.mx-cal-row .t{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--mint-text);white-space:nowrap}
.mx-cal-loop{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mint-text);margin-top:3px}
.mx-rule{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mx-rule-line{font-family:var(--mono);font-size:11.5px;color:var(--ink);background:var(--peach-bg);border:1px solid var(--peach-border);border-radius:9px;padding:8px 12px;letter-spacing:-.005em;line-height:1.35}
.mx-rule-line .k{color:var(--peach-text);font-weight:700;margin-right:6px}
.mx-rule-arrow{color:var(--peach);font-size:13px;margin-left:16px}
.mx-alert{display:flex;align-items:flex-start;gap:11px;background:var(--lavender-bg);border:1px solid var(--lavender-border);border-radius:14px;padding:14px 16px}
.mx-alert-dot{width:8px;height:8px;border-radius:50%;background:#8B6FE8;margin-top:4px;flex-shrink:0;box-shadow:0 0 0 4px color-mix(in srgb,#8B6FE8 18%,transparent)}
.mx-alert b{display:block;font-size:13px;color:var(--ink);letter-spacing:-.008em;margin-bottom:3px}
.mx-alert span{font-size:12px;color:var(--text-2);line-height:1.4}
@media(max-width:820px){
  .modesx-card.w7,.modesx-card.w5{grid-column:span 12}
  .modesx-card.w7{flex-direction:column;align-items:stretch}
  .modesx-card.w7 .mx-art{max-width:none}
}

/* ===== BLOC 5 — .intx integrations (source L3639-3661) ===== */
/* ===== INTEGRATIONS — editorial w/ real icons ===== */
.intx-cluster{background:#FFF;border:1px solid var(--rule);border-radius:20px;padding:26px 22px;box-shadow:0 34px 64px -34px rgba(26,24,20,.3)}
.intx-grid{display:grid;gap:20px 12px}
.intx-grid.cols3{grid-template-columns:repeat(3,1fr)}
.intx-tool{display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center}
.intx-ico{width:46px;height:46px;border-radius:12px;overflow:hidden;flex-shrink:0}
.intx-ico svg{width:100%;height:100%;display:block}
.intx-name{font-size:11.5px;color:var(--text-2);letter-spacing:-.004em;line-height:1.25}
.intx-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);text-align:center;font-size:12px;color:var(--text-3);font-style:italic}
.intx-stat{margin-top:22px;display:flex;align-items:baseline;gap:12px}
.intx-stat b{font-size:46px;font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.intx-stat span{font-size:14px;color:var(--text-2);line-height:1.4;letter-spacing:-.006em}
/* availability states */
.intx-tool{position:relative}
.intx-tool.is-planned .intx-ico{opacity:.42;filter:saturate(.5)}
.intx-tool.is-planned .intx-name{color:var(--text-3)}
.intx-tool.is-planned .intx-name::after{content:"Planned";display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);margin-top:3px;padding:1px 5px;border:1px solid var(--rule);border-radius:4px;width:fit-content;margin-left:auto;margin-right:auto}
.intx-legend{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.intx-legend-i{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--text-3)}
.intx-legend-i i{width:6px;height:6px;border-radius:50%;background:var(--mint)}
.intx-legend-i.planned i{background:var(--rule-2)}

/* ===== BLOC 6 — .ctrl/.fdr/.faq/squircle/.daytext (source L3706-3877) ===== */
/* ===== CONTROL — autonomy scale ===== */
.ctrl-sec{padding:var(--s-14) 40px;background:#FFF;position:relative}
.ctrl-inner{max-width:1200px;margin:0 auto}
.ctrl-head{max-width:720px;margin-bottom:var(--s-9)}
.ctrl-head h2{font-size:var(--t-h2);font-weight:500;letter-spacing:-.032em;line-height:1.04;color:var(--ink);margin:18px 0 16px}
.ctrl-head h2 em{font-family:var(--display);font-style:italic;font-weight:400}
.ctrl-sub{font-size:18px;color:var(--text-2);line-height:1.55;letter-spacing:-.011em;max-width:600px}
.ctrl-scale{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--rule);border-radius:20px;overflow:hidden;background:#FFF;box-shadow:var(--shadow-2);margin-bottom:var(--s-7)}
.ctrl-step{padding:28px 26px 30px;border-right:1px solid var(--rule);position:relative}
.ctrl-step:last-child{border-right:none}
.ctrl-step-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.ctrl-step-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.ctrl-step:nth-child(1) .ctrl-step-dot{background:var(--rule-2)}
.ctrl-step:nth-child(2) .ctrl-step-dot{background:var(--mint)}
.ctrl-step:nth-child(3) .ctrl-step-dot{background:var(--peach)}
.ctrl-step-n{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.ctrl-step h3{font-size:21px;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin-bottom:8px;line-height:1.2}
.ctrl-step p{font-size:14px;color:var(--text-2);line-height:1.55;letter-spacing:-.008em;margin-bottom:16px}
.ctrl-step-eg{font-family:var(--mono);font-size:11.5px;line-height:1.7;color:var(--text-3);padding-top:14px;border-top:1px solid var(--rule);letter-spacing:-.004em}
.ctrl-scale-foot{font-family:var(--mono);font-size:11px;color:var(--text-3);letter-spacing:.04em;text-align:center;margin-bottom:var(--s-9);text-transform:uppercase}
.ctrl-guards{display:grid;grid-template-columns:1fr 1fr;gap:2px 40px;border-top:1px solid var(--rule);padding-top:var(--s-6)}
.ctrl-guard{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--rule)}
.ctrl-guard-mark{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--mint-bg);border:1px solid var(--mint-border);color:var(--mint-text);display:flex;align-items:center;justify-content:center;font-size:11px;margin-top:2px}
.ctrl-guard-body strong{display:block;font-size:15px;font-weight:500;color:var(--ink);letter-spacing:-.012em;margin-bottom:3px}
.ctrl-guard-body span{font-size:13.5px;color:var(--text-2);line-height:1.5;letter-spacing:-.006em}
@media(max-width:900px){.ctrl-scale{grid-template-columns:1fr}.ctrl-step{border-right:none;border-bottom:1px solid var(--rule)}.ctrl-step:last-child{border-bottom:none}.ctrl-guards{grid-template-columns:1fr;gap:0}}

/* ===== FOUNDER ===== */
.fdr-sec{padding:var(--s-14) 40px;background:var(--paper-2)}
.fdr-inner{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start}
.fdr-portrait{aspect-ratio:4/5;border-radius:18px;background:linear-gradient(160deg,#EDE7DC,#DDD4C4);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;overflow:hidden;box-shadow:var(--shadow-2)}
.fdr-portrait img{width:100%;height:100%;object-fit:cover;display:block}
.fdr-monogram{font-family:var(--display);font-size:64px;color:rgba(26,24,20,.28);letter-spacing:.02em}
.fdr-body h2{font-size:var(--t-h3);font-weight:500;letter-spacing:-.025em;color:var(--ink);margin:16px 0 6px;line-height:1.15}
.fdr-role{font-family:var(--mono);font-size:11.5px;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;margin-bottom:26px}
.fdr-quote{font-family:var(--display);font-size:24px;line-height:1.4;letter-spacing:-.015em;color:var(--ink);margin-bottom:22px}
.fdr-body>p:not([class]){font-size:15.5px;color:var(--text-2);line-height:1.65;letter-spacing:-.009em;margin-bottom:16px;max-width:58ch}
.fdr-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;padding-top:22px;border-top:1px solid var(--rule)}
.fdr-links a{font-size:13.5px;color:var(--text-2);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px;letter-spacing:-.006em;transition:color .15s}
.fdr-links a:hover{color:var(--ink)}
@media(max-width:820px){.fdr-inner{grid-template-columns:1fr;gap:32px}.fdr-portrait{max-width:200px}.fdr-quote{font-size:21px}}

/* ===== FAQ ===== */
.faq-sec{padding:var(--s-14) 40px;background:#FFF}
.faq-inner{max-width:820px;margin:0 auto}
.faq-head{margin-bottom:var(--s-8)}
.faq-head h2{font-size:var(--t-h2);font-weight:500;letter-spacing:-.032em;color:var(--ink);margin-top:18px;line-height:1.05}
.faq-list{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:16.5px;font-weight:500;color:var(--ink);letter-spacing:-.014em;position:relative;line-height:1.4;transition:color .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--lavender-text)}
.faq-item summary::after{content:"";position:absolute;right:6px;top:29px;width:11px;height:11px;border-right:1.5px solid var(--text-3);border-bottom:1.5px solid var(--text-3);transform:rotate(45deg);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.faq-item[open] summary::after{transform:rotate(-135deg)}
.faq-item[open] summary{color:var(--ink)}
.faq-a{padding:0 40px 24px 0;font-size:15px;color:var(--text-2);line-height:1.65;letter-spacing:-.008em}
.faq-a p{margin-bottom:12px}
.faq-a p:last-child{margin-bottom:0}
.faq-a strong{color:var(--ink);font-weight:500}
@media(max-width:600px){.faq-item summary{font-size:15.5px;padding-right:34px}.faq-a{padding-right:0}}

/* ============================================================
   AGENT vs HUMAN — visual grammar
   Teams renders bots as hexagons and people as circles. We borrow
   that convention: agent avatars are squircles, human avatars stay
   round. Colour alone was not enough — Harry and Jeanne read as human
   first names, which is the point of the metaphor and the problem
   for legibility.
   Agent colours: --mint (#5CC8A0) personal, --peach (#F5A06A) deal.
   ============================================================ */
.tm-av-d,.tm-av-h,
.wa-conv-av.d,.wa-conv-av.h,
.wa-list-av.d,.wa-list-av.h,
.wa-av,
.ol-avatar[style*="#F5A06A"],.ol-avatar-sm[style*="#F5A06A"],
.ol-avatar[style*="#5CC8A0"],.ol-avatar-sm[style*="#5CC8A0"],
.tm-convo-av.tm-av-h,.tm-convo-av.tm-av-d,
.agx-orb,
.tm-ch-icon[style*="#5CC8A0"],.tm-dm-av[style*="#F5A06A"],.tm-dm-av[style*="#5CC8A0"]{
  border-radius:32%!important;
}
/* a machine-readable marker for the cast strip legend */
.cast-shape-agent{border-radius:32%}
.cast-shape-human{border-radius:50%}
/* agent role tag inside the WhatsApp header, where nothing said "software" */
.wa-role-tag{display:inline-block;width:fit-content;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.78em;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#1F7A55;background:#E8F5EE;border:0.5px solid #A8D9C2;border-radius:3px;padding:0 4px;font-family:var(--mono);line-height:1.5;vertical-align:baseline}
.wa-status:has(.wa-role-tag){display:flex;align-items:center;line-height:0}

/* Visually hidden but announced — the phase readout for screen readers */
.sr-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- Skip link ---- */
.skip-link{position:absolute;left:16px;top:-60px;z-index:200;background:var(--ink);color:#FFF;font-size:13px;font-weight:500;padding:10px 16px;border-radius:0 0 10px 10px;text-decoration:none;transition:top .18s}
.skip-link:focus{top:0}

/* ---- Text version of the day: screen readers, crawlers, and no-JS ---- */
.daytext{max-width:820px;margin:0 auto var(--s-9);padding:0 32px}
.daytext>summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--rule);border-radius:999px;padding:9px 18px;width:fit-content;margin:0 auto;background:#FFF;transition:color .15s,border-color .15s}
.daytext>summary::-webkit-details-marker{display:none}
.daytext>summary:hover{color:var(--ink);border-color:var(--rule-2)}
.daytext-body{margin-top:26px;padding-top:24px;border-top:1px solid var(--rule)}
.daytext-body h3{font-family:var(--display);font-size:20px;font-weight:400;font-style:italic;color:var(--ink);margin:26px 0 12px;letter-spacing:-.01em}
.daytext-body h3:first-child{margin-top:0}
.daytext-body>p:not([class]){font-size:15.5px;line-height:1.7;color:var(--text-2);letter-spacing:-.008em;margin-bottom:14px}
.daytext-body b{color:var(--ink);font-weight:500}
.daytext-close{font-family:var(--display);font-style:italic;font-size:17px;color:var(--ink);padding-top:16px;border-top:1px solid var(--rule);margin-top:22px}
@media(max-width:760px){.daytext{padding:0 24px}}

/* ============ Cast strip — who is who, before the film ============ */
.cast{max-width:1000px;margin:0 auto;padding:var(--s-8) 32px 0}
.cast-label{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);text-align:center;margin-bottom:18px}


.cast-avs{display:flex;gap:-6px;flex-shrink:0}
.cast-av{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:#FFF;font-size:12px;font-weight:600;letter-spacing:-.01em;border:2px solid #FFF;margin-left:-8px;box-shadow:0 1px 3px rgba(26,24,20,.12)}
.cast-av:first-child{margin-left:0}



.cast-kind{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:4px;margin-left:8px;vertical-align:1px}
.cast-kind.ai{color:var(--mint-text);background:var(--mint-bg);border:1px solid var(--mint-border)}
.cast-kind.human{color:var(--text-3);background:var(--paper-2);border:1px solid var(--rule)}
.cast-strip{list-style:none;padding:0;margin:26px auto 0;display:grid;grid-template-columns:1fr 1fr;justify-items:center;gap:10px}
.cast-chip{display:inline-flex;align-items:center;gap:10px;background:#FFF;border:1px solid var(--rule);border-radius:999px;padding:7px 16px 7px 8px}
.cast-chip.is-ai{border-color:var(--mint-border);background:linear-gradient(0deg,var(--mint-bg),var(--mint-bg))}
.cast-chip:nth-child(4).is-ai{border-color:var(--peach-border);background:linear-gradient(0deg,var(--peach-bg),var(--peach-bg))}
.cast-chip-t{display:flex;flex-direction:column;gap:2px;line-height:1.25;text-align:left;font-size:11.5px;color:var(--text-3);letter-spacing:-.004em}
.cast-chip-t b{font-size:13.5px;font-weight:500;color:var(--ink);letter-spacing:-.012em}
.cast-chip-sub{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cast-chip-sub .cast-kind{margin-left:0}
.cast-legend{max-width:58ch;margin:18px auto 0;font-size:13px;line-height:1.5;color:var(--text-3);letter-spacing:-.005em;text-align:center;text-wrap:pretty}
.scope-out{max-width:60ch;margin:0 auto;padding:0 32px var(--s-10);font-family:var(--display);font-size:18px;line-height:1.55;color:var(--text-2);letter-spacing:-.008em;text-align:center;text-wrap:pretty}
@media(max-width:760px){.cast-strip{grid-template-columns:1fr;gap:8px}.cast-chip{padding:6px 13px 6px 7px}.cast-legend{text-align:left}.scope-out{font-size:16.5px;text-align:left;padding-left:24px;padding-right:24px}}
.cast-bridge{max-width:62ch;margin:14px auto 30px;font-family:var(--sans);font-size:16px;line-height:1.6;color:var(--text-2);letter-spacing:-.009em;text-align:center;text-wrap:pretty}
.cast-bridge strong{color:var(--ink);font-weight:500}
@media(max-width:760px){.cast-bridge{font-size:15px;text-align:left;margin-bottom:24px}}


@media(max-width:760px){}
@media(max-width:760px){.cast{padding:0 24px var(--s-7)}}

/* ============================================================
   MOBILE BEZEL PARITY
   On a real iPhone/iPad the mock was falling back to a flat,
   chrome-less screen (no bezel, no island, different height),
   so the demo phone did not match the desktop rendering.
   Restore the shared --ip-* bezel, then scale the whole frame
   uniformly so the geometry is identical — just smaller.
   ============================================================ */
@media(max-width:820px){
  .cpf-mobile:not(.cpf-bezel) .wa-phone{
    width:360px;
    border:var(--ip-railw) solid var(--ip-rail);
    border-radius:var(--ip-radius);
    background:var(--ip-bg);
    padding:var(--ip-pad);
    box-shadow:var(--ip-shadow)!important;
  }
  .cpf-mobile:not(.cpf-bezel) .wa-island{display:block}
  .cpf-mobile:not(.cpf-bezel) .wa-screen{
    border-radius:var(--ip-screen-radius);
    height:740px;
  }
  /* Uniform downscale: keeps bezel radii, island and inner type
     in exactly the desktop proportions instead of reflowing them. */
  .wa-stage{zoom:min(1, calc((100vw - 40px) / 372))}
}
@media(max-width:400px){
  .wa-stage{zoom:min(1, calc((100vw - 24px) / 372))}
}

/* ===== AJOUT PHASE 2 — conformité RGPD du formulaire waitlist (post-port, non issu de la source) ===== */
.form-legal{font-size:12px;line-height:1.5;color:var(--text-3);margin-top:12px;max-width:460px}
.form-legal a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px;transition:color .15s}
.form-legal a:hover{color:var(--ink)}
/* honeypot anti-bot : hors écran, jamais focusable, invisible aux lecteurs d'écran */
.hp-field{position:absolute!important;left:-9999px!important;top:auto;width:1px;height:1px;overflow:hidden}
.form-error{color:#B4442A;font-size:13px;line-height:1.5;margin-top:12px;max-width:460px}