/* Odore homepage, round 3. Geist throughout: the site speaks in the product's own typeface. */
:root{
  --canvas:#F3F2EE;--canvas-2:#EAE9E3;--tile:#E8E7E1;--line:#D8D7D0;
  --ink:#14201B;--ink-2:#4A5550;
  --green:#1C4A39;--green-2:#27604B;--green-deep:#0C261E;--green-foot:#0B231B;
  --dark:#0F1714;--on-dark:#EEF2EF;--on-dark-2:#A9B9B1;
  --font:'Geist','Inter',Helvetica,Arial,sans-serif;
  --gut:max(24px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));--max:1440px;
  --grade:saturate(.86) contrast(1.04) brightness(.98);
  --edge:rgba(20,32,27,.10);--edge-dk:rgba(255,255,255,.12);
  --r-s:8px;--r-m:12px;--r-l:20px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --sh-1:0 1px 2px rgba(12,38,30,.06);
  --sh-2:0 18px 44px rgba(12,38,30,.14);
  --sh-3:0 40px 100px rgba(2,14,10,.45),0 2px 6px rgba(2,14,10,.2);
  --fs-h1:clamp(40px,4.4vw,64px);--fs-h2:clamp(30px,3.1vw,44px);--fs-h3:20px;--fs-body:17px;
  /* product UI tokens (DOSSIER-FACTS section 14) */
  --u-ink:#1A1A1A;--u-2:#525252;--u-3:#6B6B6B;--u-line:#EBEBEB;--u-in:#E2E2E2;--u-wash:#F5F5F5;--u-canvas:#FAFAFA;
  --u-dark:#1F1F1F;--u-teal:#0E7A6B;--u-teal-w:#E7F2EF;--u-teal-b:#BFDED6;
  --u-att:#B45309;--u-att-d:#E0A030;--u-att-w:#FDF3E4;--u-blk:#C2410C;--u-blk-d:#DC4A2B;--u-blk-w:#FDEBE4;--u-ok:#166A3F;--u-ok-d:#2E9E62;--u-ok-w:#E6F4EC;
  --u-av:#EAE6DF;--u-av-t:#57534A;
  --t-ink:#14201B;--t-ink2:#4A5550;--t-canvas:#F3F2EE;--t-surface:#FFFFFF;--t-line:#D8D7D0;--t-font:var(--font);--t-ondark:#EEF2EF;--t-dark:#0F1714;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-padding-top:calc(80px + env(safe-area-inset-top, 0px));}
body{background:var(--canvas);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;letter-spacing:-0.006em;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
img,video{display:block;max-width:100%;}
h1,h2,h3,p,ul,ol,figure{margin:0;}
ul,ol{padding:0;list-style:none;}
h1,h2,h3{font-weight:500;letter-spacing:-0.03em;text-wrap:balance;}
p{text-wrap:pretty;}
button{font:inherit;}
:focus-visible{outline:2px solid var(--green-2);outline-offset:3px;border-radius:var(--r-s);}
.dk :focus-visible,.hero :focus-visible,.cta :focus-visible,footer :focus-visible{outline-color:#CFE3D6;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
.num{font-variant-numeric:tabular-nums;}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.ico{width:16px;height:16px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}

/* Buttons and links */
.btn{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:var(--r-s);background:var(--green);color:#fff;font-size:15px;font-weight:500;white-space:nowrap;transition:background-color .16s ease,transform .16s ease;}
@media (hover:hover) and (pointer:fine){.btn:hover{background:var(--green-2);color:#fff;}}
.btn:active{transform:scale(.97);}
.btn.light{background:#fff;color:var(--ink);}
@media (hover:hover) and (pointer:fine){.btn.light:hover{background:#E8EFEA;color:var(--ink);}}
.lnk{display:inline-flex;align-items:center;font-size:15px;font-weight:500;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:rgba(74,85,80,.45);transition:color .16s ease,text-decoration-color .16s ease;}
@media (hover:hover) and (pointer:fine){.lnk:hover{color:var(--green);text-decoration-color:currentColor;}}
.on-dk .lnk,.hero .lnk,.dk .lnk,.cta .lnk{color:var(--on-dark);text-decoration-color:rgba(238,242,239,.4);}
@media (hover:hover) and (pointer:fine){.on-dk .lnk:hover,.hero .lnk:hover,.dk .lnk:hover,.cta .lnk:hover{color:#CFE3D6;text-decoration-color:currentColor;}}

/* Header, phone menu and footer: assets/chrome.css (shared by every page) */

/* ---------- Product UI kit (scoped to .ui) ---------- */
.ui{font-family:var(--font);font-size:13px;line-height:20px;letter-spacing:-0.006em;color:var(--u-ink);font-variant-numeric:tabular-nums;background:var(--u-canvas);text-align:left;}
.ui b{font-weight:500;}
.ui .mut{color:var(--u-2);}
.ui .sm{font-size:12px;line-height:16px;color:var(--u-3);}
.ui .cap{font-size:11px;line-height:16px;letter-spacing:.04em;text-transform:uppercase;color:var(--u-3);font-weight:500;}
.ui .card{background:#fff;border:1px solid var(--u-line);border-radius:7px;}
.ui .pill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border:1px solid var(--u-in);border-radius:999px;background:#fff;color:var(--u-ink);white-space:nowrap;}
.ui .pill.off{color:var(--u-3);border-style:dashed;}
.ui .pill.on{background:var(--u-dark);border-color:var(--u-dark);color:#fff;}
.ui .pill .c{color:var(--u-3);}
.ui .pill.on .c{color:#C9C9C9;}
.ui .bt{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;border:1px solid var(--u-in);background:#fff;color:var(--u-ink);font-weight:500;white-space:nowrap;}
.ui .bt.pri{background:var(--u-dark);border-color:var(--u-dark);color:#fff;}
.ui .lk{color:var(--u-teal);font-weight:500;}
.ui .ct{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 6px;border-radius:999px;background:var(--u-teal-w);color:var(--u-teal);font-size:12px;font-weight:500;}
.ui .ct.att{background:var(--u-att-w);color:var(--u-att);}
.ui .st{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;color:var(--u-2);}
.ui .st::before{content:"";width:6px;height:6px;border-radius:50%;background:#8A8A8A;}
.ui .st.ok::before{background:var(--u-ok-d);}.ui .st.att::before{background:var(--u-att-d);}.ui .st.blk::before{background:var(--u-blk-d);}
.ui .tag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:500;background:var(--u-wash);color:var(--u-2);}
.ui .tag.ok{background:var(--u-ok-w);color:var(--u-ok);}.ui .tag.att{background:var(--u-att-w);color:var(--u-att);}
.ui .av{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--u-av);}
.ui .avt{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--u-av);color:var(--u-av-t);font-size:12px;font-weight:500;flex:0 0 auto;}
.ui .star{width:12px;height:12px;fill:currentColor;stroke:none;}
.ui .ico{width:15px;height:15px;color:var(--u-2);}
/* app chrome */
.app{border-radius:var(--r-m);overflow:hidden;outline:1px solid rgba(255,255,255,.14);outline-offset:-1px;box-shadow:var(--sh-3);}
.app.lt{outline-color:var(--edge);box-shadow:var(--sh-2);}
.tb{display:flex;align-items:center;gap:4px;height:48px;padding:0 14px;border-bottom:1px solid var(--u-line);background:rgba(250,250,250,.96);}
.tb .mk{width:15px;height:16px;margin-right:12px;flex:0 0 auto;}
.tb .nv{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;color:var(--u-2);white-space:nowrap;}
.tb .nv.on{background:#EFEFEF;color:var(--u-ink);font-weight:500;}
.tb .nv.on .ico{color:var(--u-ink);}
.tb .sp{flex:1 1 auto;}
.tb .srch{display:flex;align-items:center;gap:8px;width:220px;height:30px;padding:0 10px;border:1px solid var(--u-in);border-radius:999px;background:#fff;color:var(--u-3);margin-right:auto;margin-left:auto;}
.tb .cmp{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--u-in);border-radius:8px;background:#fff;white-space:nowrap;}
.tb .cmp .star{color:var(--u-teal);}
.tb .me{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--u-in);background:#fff;font-size:12px;font-weight:500;margin-left:8px;}
.side-nav{width:196px;flex:0 0 auto;padding:14px 10px;border-right:1px solid var(--u-line);background:var(--u-canvas);}
.side-nav .br{display:flex;align-items:center;gap:8px;padding:4px 8px 2px;font-weight:500;}
.side-nav .br i{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E9C79A,#B9784A 70%);}
.side-nav .brs{padding:2px 8px 12px 34px;color:var(--u-3);}
.side-nav .brs b{color:var(--u-ink);font-weight:400;}
.side-nav .gl{padding:10px 8px 4px;font-size:12px;color:var(--u-3);}
.side-nav .it{display:flex;align-items:center;gap:8px;height:30px;padding:0 8px;border-radius:8px;color:var(--u-2);}
.side-nav .it.on{background:#EFEFEF;color:var(--u-ink);font-weight:500;}
.side-nav .it .ct{margin-left:auto;}

/* ---------- Hero ---------- */
.hero{position:relative;height:clamp(760px,100svh,960px);background:radial-gradient(120% 90% at 85% 10%,#173D30 0%,var(--green-deep) 55%,#081B15 100%);color:#fff;overflow:hidden;isolation:isolate;}
.hero .in{position:relative;height:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut);}
.hero .copy{position:absolute;left:var(--gut);top:clamp(150px,22vh,220px);width:min(520px,36%);z-index:2;}
.hero h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-0.04em;font-weight:500;}
.hero .sub{margin-top:24px;font-size:18px;line-height:1.5;color:var(--on-dark-2);max-width:30em;}
.hero .ctas{display:flex;align-items:center;gap:22px;margin-top:32px;flex-wrap:wrap;}
.hero .ctas .btn{background:#fff;color:var(--ink);}
@media (hover:hover) and (pointer:fine){.hero .ctas .btn:hover{background:#E8EFEA;}}
.hero .figs{position:absolute;left:var(--gut);bottom:40px;display:flex;gap:40px;z-index:2;}
.hero .figs div{font-size:14px;line-height:1.4;color:#B5C5BC;}
.hero .figs b{display:block;font-size:24px;line-height:1.2;font-weight:500;color:#fff;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.scene{position:absolute;top:118px;left:calc(var(--gut) + min(520px,36%) + 48px);right:var(--gut);}
/* Review desk at work */
.rd{display:flex;flex-direction:column;height:820px;}
.rd .hd{display:flex;align-items:baseline;gap:8px;padding:18px 24px 0;}
.rd .hd .tt{font-size:21px;line-height:28px;font-weight:600;letter-spacing:-0.02em;}
.rd .hd .n{font-size:21px;color:var(--u-3);}
.rd .hd .r{margin-left:auto;display:flex;gap:8px;align-items:center;}
.rd .chips{display:flex;gap:6px;padding:14px 24px;flex-wrap:wrap;align-items:center;}
.rd .chips .ds{margin-left:auto;white-space:nowrap;color:var(--u-2);padding-left:12px;}
.rd .panes{display:flex;align-items:flex-start;margin:0 24px;flex:1 1 auto;min-height:0;border:1px solid var(--u-line);border-bottom:0;border-radius:7px 7px 0 0;background:#fff;overflow:hidden;}
.rd .list{width:224px;flex:0 0 auto;border-right:1px solid var(--u-line);align-self:stretch;}
.rd .list .se{display:flex;align-items:center;gap:8px;padding:10px;border-bottom:1px solid var(--u-line);}
.rd .list .se span{flex:1;white-space:nowrap;overflow:hidden;height:32px;border:1px solid var(--u-in);border-radius:8px;padding:5px 10px;color:var(--u-3);}
.rd .list .grp{padding:6px 12px;background:var(--u-wash);color:var(--u-2);font-size:12px;}
.rd .li{display:flex;align-items:center;gap:10px;height:56px;padding:0 12px;border-bottom:1px solid var(--u-line);position:relative;transition:background-color .2s ease;}
.rd .li .t{flex:1;min-width:0;}
.rd .li .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400;}
.rd .li .w{font-size:12px;color:var(--u-att);white-space:nowrap;}
.rd .li.on{background:var(--u-teal-w);}
.rd .li.on::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--u-teal);}
.rd .det{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.rd .dh{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--u-line);}
.rd .dh .who{flex:1;min-width:0;}
.rd .dh .who b{display:block;font-size:15px;line-height:20px;}
.rd .db{display:flex;gap:16px;padding:16px;}
.rd .media{position:relative;width:180px;flex:0 0 auto;aspect-ratio:504/900;border-radius:8px;overflow:hidden;background:#1d2b25;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;}
.rd .media img,.rd .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--grade);}
.rd .info{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;}
.rd .info .q{color:var(--u-ink);}
.rd .req li{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--u-line);}
.rd .req li:last-child{border-bottom:0;}
.rd .req .ok{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--u-ok-w);color:var(--u-ok);flex:0 0 auto;}
.rd .req .ok svg{width:10px;height:10px;stroke-width:2.2;}
.rd .req .r{margin-left:auto;font-size:12px;color:var(--u-ok);}
.rd .kp{display:grid;grid-template-columns:1fr 1fr 1fr;border:1px solid var(--u-line);border-radius:7px;}
.rd .kp > div{padding:8px 10px;border-left:1px solid var(--u-line);}
.rd .kp > div:first-child{border-left:0;}
.rd .kp b{display:block;font-size:17px;line-height:24px;font-weight:600;letter-spacing:-0.01em;}
.rd .note{display:flex;gap:8px;padding:10px 12px;border-radius:7px;background:var(--u-wash);color:var(--u-2);}
.rd .note .star{color:var(--u-teal);margin-top:4px;}
.rd .note b{color:var(--u-ink);}
.rd .df{margin-top:12px;display:flex;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--u-line);background:#fff;min-height:58px;}
.rd .df .done{display:none;align-items:center;gap:8px;color:var(--u-ok);font-weight:500;}
.rd .df .done i{width:18px;height:18px;border-radius:50%;background:var(--u-ok);color:#fff;display:grid;place-items:center;}
.rd .df .done svg{width:11px;height:11px;stroke:#fff;stroke-width:2.2;}
.rd .df .pos{margin-left:auto;display:flex;align-items:center;gap:6px;color:var(--u-3);}
.rd .df kbd{font:inherit;font-size:11px;display:inline-grid;place-items:center;width:18px;height:18px;border:1px solid var(--u-in);border-radius:4px;color:var(--u-2);}
/* resting state (also reduced motion): the decision is made */
.rd .is-done .act{display:none;}
.rd .is-done .done{display:inline-flex;}
.rd [data-n] .b{display:none;}
/* hero sequence: plays once, then rests */
@media (prefers-reduced-motion:no-preference){
  .js-hero .scene{animation:rise .8s cubic-bezier(.2,.8,.2,1) .15s both;}
  .js-hero .rd .li{animation:fadeup .4s cubic-bezier(.2,.8,.2,1) both;}
  .js-hero .rd .li:nth-child(3){animation-delay:.5s}.js-hero .rd .li:nth-child(4){animation-delay:.56s}.js-hero .rd .li:nth-child(5){animation-delay:.62s}.js-hero .rd .li:nth-child(6){animation-delay:.68s}.js-hero .rd .li:nth-child(7){animation-delay:.74s}.js-hero .rd .li:nth-child(8){animation-delay:.8s}
  .js-hero .rd .req li{animation:fadeup .3s ease-out both;}
  .js-hero .rd .req li:nth-child(1){animation-delay:1.4s}.js-hero .rd .req li:nth-child(2){animation-delay:1.6s}.js-hero .rd .req li:nth-child(3){animation-delay:1.8s}.js-hero .rd .req li:nth-child(4){animation-delay:2s}
  .js-hero .rd .note{animation:fadeup .4s ease-out 2.5s both;}
  .js-hero .rd .is-pending .act .pri{transition:transform 140ms var(--ease-out),background-color 140ms ease;}
  .js-hero .rd .pressing .act .pri{transform:scale(.96);background:#000;}
  .js-hero .rd .is-done .done{animation:fadeup .3s ease-out both;}
}
.rd .is-pending .act{display:flex;gap:8px;}
.rd .is-pending .done{display:none;}
.rd [data-n].pend .a{display:none;}
.rd [data-n].pend .b{display:inline;}
@keyframes rise{from{transform:translateY(16px);opacity:0;}to{transform:none;opacity:1;}}
@keyframes fadeup{from{transform:translateY(4px);opacity:0;}to{transform:none;opacity:1;}}

/* ---------- Logo line ---------- */
.logos{padding:30px 0 0;}
.logos .row{display:flex;align-items:center;gap:28px;padding:0 var(--gut);max-width:var(--max);margin:0 auto;}
.logos .lab{font-size:14px;color:var(--ink-2);white-space:nowrap;flex:0 0 auto;}
.logos [data-m="marquee"]{flex:1 1 auto;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);}
/* the track holds the logos twice and moves by exactly one set (-50%), so the loop point is seamless: no padding inside it */
.logos .track{display:flex;width:max-content;animation:marquee 110s linear infinite;will-change:transform;}
.logos .lg{flex:0 0 auto;width:180px;height:60px;padding:0 20px;display:flex;align-items:center;justify-content:center;}
.logos .lg img{width:auto;max-width:140px;filter:grayscale(1) brightness(.2);opacity:.6;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Section heads ---------- */
.sec{padding:128px 0;}
.eb{font-size:14px;font-weight:500;color:var(--green-2);margin-bottom:18px;}
.h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-0.035em;}
.lede{font-size:var(--fs-body);line-height:1.55;color:var(--ink-2);max-width:36em;margin-top:20px;}
.dk .lede,.on-dk .lede{color:var(--on-dark-2);}
.hd2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end;}
.hd2 .lede{margin-top:0;}

/* ---------- Statement ---------- */
.stmt{padding:136px 0 40px;}
.stmt .h2{max-width:17em;}
.stmt .say{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:64px;border-top:1px solid var(--line);}
.stmt .say > div{padding-top:22px;}
.stmt .say h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-0.02em;}
.stmt .say p{margin-top:8px;color:var(--ink-2);}

/* ---------- System: the product's own nav as the tabs ---------- */
.sys{padding:128px 0;}
.sys .stage{margin-top:56px;border-radius:var(--r-l);background:var(--tile);padding:40px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:start;min-height:640px;}
.sys .pnl[hidden]{display:none !important;}
.sys .pnl{display:contents;}
.sys .pt h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-0.02em;}
.sys .pt p{margin-top:10px;color:var(--ink-2);}
.sys .pt .tg{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px;}
.sys .pt .tg span{font-size:13px;height:28px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--ink);}
.sys .pt .lnk{margin-top:24px;}
.sys .scr{min-width:0;}
.js-tabs .sys .pnl.enter .scr{animation:fadeup 180ms var(--ease-out) both;}
.win{display:flex;flex-direction:column;min-height:560px;}
.win .bd{display:flex;flex:1 1 auto;min-height:0;}
.win .mn{flex:1 1 auto;min-width:0;padding:22px 26px;background:#fff;}
.win .mn .h4{margin:0;font-size:21px;line-height:28px;font-weight:600;letter-spacing:-0.02em;}
/* Today */
.tdy .ov{margin-top:4px;color:var(--u-ink);}
.tdy .ov .cap{margin-right:6px;}
.tdy .ask{margin-top:14px;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 8px 0 16px;border:1px solid var(--u-in);border-radius:10px;color:var(--u-3);font-size:15px;}
.tdy .ask i{width:32px;height:32px;border-radius:50%;background:#EFEFEF;display:grid;place-items:center;}
.tdy .dis{margin-top:6px;}
.tdy .sg{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap;}
.tdy .q{margin-top:14px;}
.tdy .q .qh{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--u-line);}
.tdy .qr{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--u-line);}
.tdy .qr:last-child{border-bottom:0;}
.tdy .qr .ic{width:44px;display:flex;}
.tdy .qr .ic .ico{width:26px;height:26px;padding:5px;border:1px solid var(--u-line);border-radius:7px;}
.tdy .qr .ic img{width:24px;height:24px;border-radius:50%;margin-right:-8px;border:2px solid #fff;object-fit:cover;}
.tdy .qr .t{flex:1;min-width:0;}
.tdy .qr .t b,.tdy .qr .t .sm{display:block;}
.tdy .qr .chev{width:14px;height:14px;color:var(--u-3);}
.cdr{width:300px;flex:0 0 auto;border-left:1px solid var(--u-line);background:#fff;display:flex;flex-direction:column;}
.cdr .h{display:flex;align-items:center;gap:8px;padding:14px 16px;font-weight:500;font-size:14px;}
.cdr .h .star{color:var(--u-teal);width:13px;height:13px;}
.cdr .tbs{display:flex;gap:16px;padding:0 16px;border-bottom:1px solid var(--u-line);}
.cdr .tbs span{padding:8px 0;color:var(--u-2);}
.cdr .tbs span.on{color:var(--u-ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--u-ink);}
.cdr .body{padding:14px 16px;display:flex;flex-direction:column;gap:12px;flex:1;}
.cdr .me{align-self:flex-end;background:#EFEFEF;border-radius:10px;padding:8px 12px;}
.cdr .by{display:flex;align-items:center;gap:6px;}
.cdr .by .tag{gap:4px;}
.cdr .by .star{width:9px;height:9px;color:var(--u-teal);}
.cdr ul li{position:relative;padding-left:12px;margin-top:2px;}
.cdr ul li::before{content:"";position:absolute;left:0;top:9px;width:4px;height:4px;border-radius:50%;background:var(--u-2);}
.cdr sup{font-size:9px;color:var(--u-teal);margin-left:1px;}
.cdr .in{margin:auto 16px 14px;border:1px solid var(--u-in);border-radius:10px;padding:10px 12px;color:var(--u-3);}
/* Creator record */
.rec .crumb{color:var(--u-2);display:flex;align-items:center;gap:6px;}
.rec .who{display:flex;gap:14px;align-items:center;margin-top:12px;}
.rec .who > img{width:52px;height:52px;border-radius:50%;object-fit:cover;}
.rec .who .nm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.rec .who .nm .h4{font-size:21px;}
.rec .who .r{margin-left:auto;display:flex;gap:8px;}
.rec .tabsx{display:flex;gap:18px;margin-top:14px;border-bottom:1px solid var(--u-line);}
.rec .tabsx span{padding:8px 0;color:var(--u-2);white-space:nowrap;}
.rec .tabsx span.on{color:var(--u-ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--u-teal);}
.rec .kpis{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:14px;}
.rec .kpis > div{padding:10px 12px;border-left:1px solid var(--u-line);}
.rec .kpis > div:first-child{border-left:0;}
.rec .kpis b{display:block;font-size:21px;line-height:28px;font-weight:600;letter-spacing:-0.02em;}
.rec .cols{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:14px;margin-top:14px;}
.rec .tl .th{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--u-line);}
.rec .tl .row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;padding:10px 14px;border-bottom:1px solid var(--u-line);}
.rec .tl .row:last-child{border-bottom:0;}
.rec .sf{padding:14px;}
.rec .sf .ring{display:flex;gap:12px;align-items:center;}
.rec .sf .ring svg{width:56px;height:56px;flex:0 0 auto;}
.rec .sf .bars{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;}
.rec .sf .bars i{display:block;height:3px;border-radius:2px;background:var(--u-ok);margin-top:4px;}
/* Campaigns */
.cmp-s .kp3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
.cmp-s .kp3 .card{padding:12px 14px;}
.cmp-s .kp3 b{display:block;font-size:21px;line-height:28px;font-weight:600;}
.cmp-s .stg{margin-top:14px;padding:14px;}
.cmp-s .stg .s{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--u-line);border-radius:7px;margin-top:8px;}
.cmp-s .stg .s .t{flex:1;}
.cmp-s .kit{margin-top:14px;padding:14px;}
.cmp-s .kit .kg{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:10px;}
.cmp-s .kit .kg b{display:block;font-size:19px;line-height:26px;font-weight:600;}
.cmp-s .kit .kg b.tl{color:var(--u-teal);}
/* Studio portal builder */
.pb{display:grid;grid-template-columns:200px minmax(0,1fr) 200px;gap:0;flex:1;}
.pb .tree{border-right:1px solid var(--u-line);padding:12px 10px;background:#fff;}
.pb .tree .it{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border-radius:6px;color:var(--u-2);}
.pb .tree .it.on{background:#EFEFEF;color:var(--u-ink);font-weight:500;}
.pb .tree .it.sub{padding-left:22px;}
.pb .pv{background:var(--u-wash);padding:14px;display:flex;flex-direction:column;align-items:center;}
.pb .pv .bar{align-self:stretch;display:flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--u-2);}
.pb .pv .bar .r{margin-left:auto;}
.portal{width:100%;max-width:340px;background:#FAF8F4;border:1px solid var(--u-line);border-radius:12px;overflow:hidden;color:#1B1A18;}
.portal .phd{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#fff;border-bottom:1px solid var(--u-line);}
.portal .phd b{font-weight:600;letter-spacing:.06em;font-size:12px;}
.portal .nv2{display:flex;gap:6px;padding:10px 14px;overflow:hidden;}
.portal .nv2 span{height:26px;padding:0 10px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid #E4E0D8;white-space:nowrap;font-size:12px;}
.portal .nv2 span.on{background:#10695E;border-color:#10695E;color:#fff;}
.portal .bl{margin:0 14px 10px;padding:12px;background:#fff;border:1px solid #ECE8E0;border-radius:10px;}
.portal .bl .tag.ok{background:#E3F0EC;color:#10695E;}
.portal .prog{height:6px;border-radius:3px;background:#ECE8E0;margin:8px 0;}
.portal .prog i{display:block;height:100%;width:33%;border-radius:3px;background:#10695E;}
.portal .chk{display:flex;align-items:center;gap:8px;padding:3px 0;}
.portal .chk i{width:14px;height:14px;border-radius:50%;border:1.5px solid #B9B3A8;}
.portal .chk.d i{background:#10695E;border-color:#10695E;}
.portal .chk.d s{color:#8A857C;}
.portal .cmpn{display:flex;gap:10px;align-items:center;}
.portal .cmpn img{width:44px;height:44px;border-radius:8px;object-fit:cover;object-position:50% 15%;filter:var(--grade);}
.pb .thm{border-left:1px solid var(--u-line);padding:14px;background:#fff;}
.pb .thm .sw{display:flex;align-items:center;gap:8px;padding:4px 0;}
.pb .thm .sw i{width:16px;height:16px;border-radius:4px;border:1px solid rgba(0,0,0,.08);}
.pb .thm .sw span{margin-left:auto;font-size:11px;color:var(--u-3);}
/* Analytics report builder */
.rb .ctl{margin-top:14px;padding:12px 14px;display:grid;grid-template-columns:92px 1fr;gap:8px 10px;align-items:center;}
.rb .ctl .row{display:flex;gap:6px;flex-wrap:wrap;}
.rb .ctl .pill{height:26px;padding:0 10px;}

.rb .cmpz{grid-column:1/-1;background:var(--u-wash);border-radius:6px;padding:6px 10px;font-weight:500;}
.rb .chart{margin-top:14px;padding:12px 14px;}
.rb .chart svg{width:100%;height:auto;display:block;margin-top:8px;}
.rb .src{margin-top:8px;}
.rb .act{display:flex;gap:8px;margin-left:auto;}
.rb .top{display:flex;align-items:center;gap:8px;margin-top:12px;}
.rb .top .nm{height:32px;padding:5px 10px;border:1px solid var(--u-in);border-radius:8px;min-width:200px;}

/* ---------- Companion and agents ---------- */
.cmpn-s{padding:128px 0;}
.cmpn-s .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:56px;}
.cmpn-s .tilex{border-radius:var(--r-l);background:var(--tile);padding:32px;display:flex;flex-direction:column;gap:24px;}
.cmpn-s .tilex h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-0.02em;}
.cmpn-s .tilex p{margin-top:6px;color:var(--ink-2);max-width:32em;}
.cmpn-s .cdr{width:auto;border:1px solid var(--u-line);border-radius:var(--r-m);box-shadow:var(--sh-2);min-height:430px;}
.scope .sh{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--u-line);background:var(--u-canvas);border-radius:7px 7px 0 0;}
.scope .sh .r{margin-left:auto;}
.scope .sr{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--u-line);}
.scope .sr:last-child{border-bottom:0;}
.scope .ai{display:inline-flex;align-items:center;gap:3px;height:20px;padding:0 7px;border-radius:999px;background:var(--u-teal-w);color:var(--u-teal);font-size:11px;font-weight:600;}
.scope .ai .star{width:8px;height:8px;}
.scope .sr .t{flex:1;min-width:0;}
.scope .sr .t b{display:block;}
.scope .seg{display:inline-flex;border:1px solid var(--u-in);border-radius:8px;overflow:hidden;}
.scope .seg span{padding:4px 10px;color:var(--u-3);}
.scope .seg span.on{background:#fff;color:var(--u-ink);font-weight:500;box-shadow:0 0 0 1px var(--u-in);}
.scope .lock{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--u-in);border-radius:8px;color:var(--u-2);}
.scope .lock .ico{width:13px;height:13px;}
.agents{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px;}
.agents span{font-size:14px;height:32px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;}

/* ---------- Proof ---------- */
.proof{padding:128px 0;background:var(--canvas-2);}
.proof .who{font-size:14px;font-weight:500;color:var(--green-2);}
.proof .h2{margin-top:18px;max-width:20em;}
.proof .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;margin:64px 0 0;}
.proof .stats div{display:flex;flex-direction:column-reverse;justify-content:flex-end;border-top:1px solid var(--line);padding-top:20px;}
.proof .stats dd{margin:0;font-size:var(--fs-h1);line-height:1;letter-spacing:-0.04em;font-weight:500;color:var(--green);}
.proof .stats dt{margin-top:12px;font-size:16px;color:var(--ink-2);}
.proof .stats sup{font-size:11px;margin-left:1px;}
.proof .foot{display:flex;flex-wrap:wrap;align-items:center;gap:24px;justify-content:space-between;margin-top:32px;}
.proof .note{font-size:14px;color:var(--ink-2);max-width:44em;}

/* ---------- Launch ---------- */
.ful{margin-top:48px;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:22px 28px;border-radius:var(--r-m);background:var(--tile);}
.ful p{color:var(--ink-2);max-width:62em;}
.ful p b{color:var(--ink);font-weight:500;}
.ful .lnk{flex:0 0 auto;}

/* Workspace then Companion share the canvas, so the gap between them is one section break, not two */
.sys + .cmpn-s,.kn + .sys{padding-top:16px;}
/* ---------- Experts: Odore specialists inside the client's team ---------- */
.xp{padding:128px 0;}
.xp-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px;margin-top:56px;}
.xp-stage{display:grid;place-items:center;padding:40px;border-radius:var(--r-l);background:var(--tile);}
.xp-team{width:100%;max-width:580px;border:1px solid var(--u-line);border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-2);overflow:hidden;}
.xp-h{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:14px 16px 12px;border-bottom:1px solid var(--u-line);}
.xp-h .t{display:flex;flex-direction:column;}
.xp-h b{font-size:15px;line-height:22px;font-weight:500;}
.xp-ms{padding:4px 0;}
.xp-m{display:flex;align-items:center;gap:12px;padding:10px 16px;}
.xp-m + .xp-m{border-top:1px solid var(--u-line);}
.xp-m .t{flex:1;min-width:0;display:flex;flex-direction:column;}
.xp-m .nm{display:flex;align-items:center;gap:8px;}
.xp-m b{font-weight:500;}
.xp-m .avt{width:32px;height:32px;}
.xp .avt.od{background:var(--green);color:#fff;}
.xp-od{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px 0 6px;border-radius:999px;background:var(--u-teal-w);color:var(--green);font-size:12px;font-weight:500;}
.xp-od svg{width:11px;height:11px;fill:currentColor;}
.xp-r{font-size:12px;line-height:16px;color:var(--u-3);}
.xp-act{display:flex;flex-direction:column;gap:8px;padding:12px 16px 14px;border-top:1px solid var(--u-line);background:var(--u-canvas);}
.xp-a{display:flex;align-items:center;gap:10px;}
.xp-a .avt{width:24px;height:24px;font-size:11px;}
.xp-a .tx{flex:1;min-width:0;color:var(--u-2);}
.xp-a .tx b{color:var(--u-ink);font-weight:500;}
.xp-ways{display:flex;flex-direction:column;gap:12px;}
.xp-ways li{flex:1 1 0;display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-content:center;padding:24px 28px;border-radius:var(--r-l);background:var(--tile);}
.xp-ways .n{padding-top:3px;font-size:14px;line-height:20px;font-weight:500;color:var(--green-2);font-variant-numeric:tabular-nums;}
.xp-ways h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-0.02em;}
.xp-ways p{margin-top:6px;color:var(--ink-2);text-wrap:pretty;}
/* motion: the final state is the markup; home.js adds js-xp, then .play once the team is seen: the two Odore members join, then their work lands */
.js-xp .xp-team:not(.play) .xp-m.od,.js-xp .xp-team:not(.play) .xp-a{opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .js-xp .xp-team.play .xp-m.od{animation:xp-in .26s var(--ease-out) calc(60ms + var(--i,0) * 60ms) both;}
  .js-xp .xp-team.play .xp-a{animation:xp-in .24s var(--ease-out) calc(240ms + var(--i,0) * 80ms) both;}
}
@keyframes xp-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@media (max-width:1099px){
  .xp-stage{padding:28px;}
  .xp-ways li{padding:20px 22px;}
}
@media (max-width:899px){
  .xp-grid{grid-template-columns:1fr;}
  /* the three ways read as one list in one tile on tablets and phones */
  .xp-ways{gap:0;padding:0 24px;border-radius:var(--r-l);background:var(--tile);}
  .xp-ways li{padding:20px 0;border-radius:0;background:none;}
  .xp-ways li + li{border-top:1px solid var(--line);}
}
@media (max-width:759px){
  .xp-grid{margin-top:28px;gap:12px;}
  /* the team card sits straight on the canvas, as the workspace screens do on phones */
  .xp-stage{padding:0;border-radius:0;background:none;}
  /* phones keep the two Odore members next to the brand manager, and one line of their work */
  .xp-m.xp-x,.xp-a.xp-x{display:none;}
  .xp-h{padding:12px 14px 10px;}
  .xp-m{padding:10px 14px;gap:10px;}
  .xp-act{padding:10px 14px 12px;}
  .xp-a .avt{width:26px;height:26px;font-size:12px;}
  .xp-ways{padding:0 16px;border-radius:var(--r-m);}
  .xp-ways li{grid-template-columns:24px minmax(0,1fr);gap:10px;padding:14px 0;}
  .xp-ways .n{padding-top:2px;}
  .xp-ways h3{font-size:18px;}
  .xp-ways p{margin-top:2px;font-size:15px;}
  .xp .ful{margin-top:32px;}
}

/* ---------- Trust (dark) ---------- */
.dk{background:var(--dark);color:var(--on-dark);padding:128px 0;}
.dk .top{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:start;}
.dk .lnk{margin-top:28px;}
.dk ul{display:grid;grid-template-columns:1fr 1fr;gap:0 32px;}
.dk li{padding:20px 0;border-top:1px solid var(--edge-dk);display:grid;grid-template-columns:44px 1fr;gap:4px 16px;align-items:start;}
.dk li .mk{grid-row:span 2;width:44px;height:44px;border-radius:10px;background:#fff;display:grid;place-items:center;padding:6px;}
.dk li .mk img{max-width:100%;max-height:100%;}
.dk li .mk.t{background:transparent;border:1px solid var(--edge-dk);}
.dk li .mk.t svg{width:20px;height:20px;stroke:#CFE3D6;}
.dk li h3{font-size:17px;line-height:1.35;letter-spacing:-0.015em;}
.dk li p{color:var(--on-dark-2);font-size:15px;}

/* ---------- CTA ---------- */
.cta{padding:24px 0 24px;background:var(--canvas);}
.cta .card{position:relative;overflow:hidden;border-radius:var(--r-l);background:radial-gradient(90% 120% at 90% 0%,#1E4A3B 0%,var(--green-deep) 60%);color:#fff;padding:88px 64px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end;}
.cta h2{font-size:var(--fs-h2);line-height:1.08;letter-spacing:-0.035em;max-width:14em;}
.cta p{margin-top:16px;color:var(--on-dark-2);font-size:var(--fs-body);}
.cta .acts{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.cta .mark{position:absolute;right:-60px;top:-80px;width:360px;opacity:.07;pointer-events:none;}

/* Reveal on scroll (only once home.js has run) */
.js [data-anim]{opacity:0;transform:translateY(12px);transition:opacity .38s var(--ease-out),transform .38s var(--ease-out);}
.js [data-anim] + [data-anim]{transition-delay:60ms;}
.js [data-anim].in{opacity:1;transform:none;}

/* ---------- Responsive ---------- */
@media (max-width:1279px){
  .rd .list{display:none;}
  .cdr.hide-md{display:none;}
  .pb{grid-template-columns:180px minmax(0,1fr);}
  .pb .thm{display:none;}
  .rec .kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .rec .kpis > div:nth-child(4){border-left:0;}
  .rec .kpis > div:nth-child(n+4){border-top:1px solid var(--u-line);}
}
@media (max-width:1099px){
  .hero .copy{width:380px;}
  .hero h1{font-size:46px;}
  .scene{left:calc(var(--gut) + 412px);}
  .sys .stage{grid-template-columns:1fr;padding:28px;gap:24px;min-height:0;}
  .side-nav{display:none;}
  .cmpn-s .grid{grid-template-columns:1fr;}
  .hd2{grid-template-columns:1fr;gap:20px;}
  .dk .top{grid-template-columns:1fr;gap:40px;}
  .ful{grid-template-columns:1fr;}
}
@media (max-width:1023px){
  .hero .figs{gap:28px;}
}
@media (max-width:759px){
  :root{--gut:max(16px, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));--fs-body:16px;}
  .sec,.cmpn-s,.proof,.xp,.dk{padding:88px 0;}
  .stmt{padding:88px 0 24px;}
  .sys{padding:64px 0 88px;}
  .hero{height:auto;min-height:0;}
  .hero .in{height:auto;padding-top:96px;}
  .hero .copy{position:static;width:auto;}
  .hero h1{font-size:40px;line-height:1.04;}
  .hero .sub{font-size:16px;margin-top:16px;}
  .hero .ctas{margin-top:22px;}
  .hero .figs{position:static;margin-top:28px;gap:0;justify-content:space-between;}
  .hero .figs b{font-size:20px;}
  .hero .figs div{font-size:13px;}
  .scene{position:relative;top:auto;left:auto;right:auto;width:auto;margin:32px 0 0;height:560px;}
  .scene .app{border-radius:var(--r-m) var(--r-m) 0 0;}
  .rd{height:560px;}
  .tb .nv:not(.on),.tb .srch,.tb .cmp span{display:none;}
  .tb .cmp{padding:0 8px;}
  .rd .hd{padding:14px 14px 0;}
  .rd .hd .r{display:none;}
  .rd .chips{padding:10px 14px;}
  .rd .panes{margin:0 14px;}
  .rd .db{gap:12px;padding:12px;}
  .rd .media{width:120px;}
  .rd .info{gap:8px;}
  .rd .info .q{display:none;}
  .rd .kp{grid-template-columns:1fr 1fr;}
  .rd .kp > div:nth-child(3){display:none;}
  .rd .df .pos{display:none;}
  .rd .note{margin:0 12px;}
  .logos .row{gap:16px;}
  .logos .lab{font-size:13px;white-space:normal;width:84px;}
  .stmt .say{grid-template-columns:1fr;gap:0;margin-top:40px;}
  .stmt .say > div{padding:18px 0;border-bottom:1px solid var(--line);}
  .sys .stage{padding:20px 16px;border-radius:var(--r-m);margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);border-radius:0;}
  .win{min-height:0;}
  .win .mn{padding:16px;}
  .tb{padding:0 10px;}
  .cdr.hide-sm{display:none;}
  .tdy .sg .pill:nth-child(n+2){display:none;}
  .tdy .qr{padding:10px 12px;gap:10px;}
  .tdy .qr .ic{width:36px;}
  .tdy .qr .t .sm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rec .who .r{display:none;}
  .rec .tabsx{overflow:hidden;}
  .rec .kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rec .kpis > div:nth-child(4){border-left:1px solid var(--u-line);}
  .rec .kpis > div:nth-child(odd){border-left:0;}
  .rec .kpis > div:nth-child(n+3){border-top:1px solid var(--u-line);}
  .rec .kpis > div:nth-child(n+5){display:none;}
  .rec .cols{grid-template-columns:1fr;}
  .rec .tl .row{grid-template-columns:1fr;gap:2px;}
  .rec .tl .row .lk{display:none;}
  .cmp-s .kp3{grid-template-columns:1fr 1fr;}
  .cmp-s .kp3 .card:nth-child(3){display:none;}
  .cmp-s .kit .kg{grid-template-columns:1fr 1fr;}
  .pb{grid-template-columns:1fr;}
  .pb .tree{display:none;}
  .rb .ctl{grid-template-columns:1fr;}
  .rb .ctl .cap{margin-top:4px;}
  .rb .top{flex-wrap:wrap;}
  .rb .act{display:none;}
  .cmpn-s .tilex{padding:20px 16px;border-radius:var(--r-m);}
  .scope .sr .seg span{padding:4px 8px;}
  .scope .sr .t .sm{display:none;}
  .proof .para{font-size:26px;}
  .ful{padding:20px 16px;margin-top:48px;}
  .ful .two{grid-template-columns:1fr;}
  .dk ul{grid-template-columns:1fr;}
  .cta .card{grid-template-columns:1fr;padding:56px 22px;gap:28px;}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-property:color,background-color,border-color,text-decoration-color,box-shadow !important;}
  .js [data-anim]{opacity:1 !important;transform:none !important;}
  /* still: the strip cannot scroll, so every logo wraps into a static centred row (phones: the 759px block below) */
  .logos [data-m="marquee"]{-webkit-mask-image:none;mask-image:none;}
  .logos .track{transform:none !important;flex-wrap:wrap;justify-content:center;width:auto;padding:0 var(--gut);}
  .logos .lg[aria-hidden="true"]{display:none;}
}
.tb .mk{fill:#1A1A1A;}
.rd .df .pos .lk{margin-right:6px;}
@media (max-width:759px){.proof .para{line-height:1.7;}}
/* pass 2: top bar fits its window */
.tb{overflow:hidden;}
@media (max-width:1599px){.tb .srch{width:30px;padding:0;justify-content:center;flex:0 0 auto;}.tb .srch .l{display:none;}}
@media (max-width:1279px){.tb .nv:not(.on) .l{display:none;}.tb .nv:not(.on){padding:0 8px;}}
@media (max-width:1099px){.proof .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 32px;}}
@media (max-width:759px){
  .scene{height:auto;}
  .rd{height:auto;}
  .rd .panes{border-bottom:1px solid var(--u-line);border-radius:7px;margin-bottom:14px;}
  .proof .stats{gap:24px 16px;margin-top:40px;}
  .proof .stats dd{font-size:40px;}
  .proof .stats dt{font-size:14px;}
  .ful{flex-direction:column;align-items:flex-start;padding:20px 16px;gap:14px;}
}
.tdy .qr .ic.av3{width:60px;}
@media (max-width:759px){
  .tdy .qr .ic.av3{width:44px;}
  .tdy .qr .ic.av3 img:nth-child(3){display:none;}
  .pbst,.pbv{display:none !important;}
  .pb .pv .bar .r{display:none;}
}
@media (max-width:759px){
  .scope .sr{flex-wrap:wrap;row-gap:6px;}
  .scope .sr .t{flex:1 1 calc(100% - 60px);}
  .scope .sr .lock,.scope .sr .seg{margin-left:52px;}
}
/* contrast: two product tints darkened a step so their text clears 4.5:1 */
.ui .tag.ok{color:#166A3F;}
.rd .li.on .w{color:#9A4508;}

/* ---------- Polish 1 ---------- */
/* hero: collapsed rail (the product's focus mode), window sized to its content */
.hbd{display:flex;align-items:stretch;}
.rail{width:52px;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 0;border-right:1px solid var(--u-line);background:var(--u-canvas);}
.rail .bd{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E9C79A,#B9784A 70%);margin-bottom:10px;}
.rail span{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;}
.rail span.on{background:#EFEFEF;}
.rail span.on .ico{color:var(--u-ink);}
.rd{height:auto;flex:1 1 auto;min-width:0;}
.rd .hd .r .ds{color:var(--u-2);white-space:nowrap;margin-right:6px;}
.rd .panes{align-items:stretch;border-bottom:1px solid var(--u-line);border-radius:7px;margin-bottom:24px;}
.rd .list{display:flex;flex-direction:column;}
.rd .list .lf{margin-top:auto;padding:10px 12px;border-top:1px solid var(--u-line);}
.rd .df{margin-top:auto;}
.rd .db + .note{margin:0 16px;}
/* resting state: the post is decided, nothing waits */
.rd .wb{display:none;}
.rd.decided .wa{display:none;}
.rd.decided .tag.wb{display:inline-flex;}
.rd.decided .w .wb{display:grid;}
.rd .tick{width:18px;height:18px;border-radius:50%;background:var(--u-teal-w);color:var(--u-teal);place-items:center;}
.rd .tick svg{width:11px;height:11px;stroke-width:2.2;color:var(--u-teal);}
/* sequence plays when the window is seen, not on load */
.js-hero .rd:not(.play) .req li,.js-hero .rd:not(.play) .note{opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .js-hero .rd .req li,.js-hero .rd .note{animation:none;}
  .js-hero .rd.play .req li{animation:fadeup .3s ease-out both;}
  .js-hero .rd.play .req li:nth-child(1){animation-delay:.3s}.js-hero .rd.play .req li:nth-child(2){animation-delay:.5s}.js-hero .rd.play .req li:nth-child(3){animation-delay:.7s}.js-hero .rd.play .req li:nth-child(4){animation-delay:.9s}
  .js-hero .rd.play .note{animation:fadeup .4s ease-out 1.4s both;}
}
@media (max-width:1279px){
  .scene{top:100px;}
  .rd .media{width:140px;}
  .rd .info .q{display:none;}
  .rd .hd .r .bt{display:none;}
  .rd .db{padding:14px 16px;}
}
@media (max-width:1099px){.rail{display:none;}}

/* workspace: the tab bar is the product's own top bar, sitting on the window */
.sys .stage{grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"pt bar" "pt scr";row-gap:0;}
.sys .pnl .pt{grid-area:pt;align-self:center;}
.sys .pnl .scr{grid-area:scr;}
.sys .wbar{grid-area:bar;border:1px solid var(--u-line);border-bottom-color:var(--u-line);border-radius:var(--r-m) var(--r-m) 0 0;background:#FAFAFA;position:relative;z-index:1;}
.sys .scr .app{border-radius:0 0 var(--r-m) var(--r-m);}
.sys .tabs{display:flex;gap:4px;align-items:center;}
.sys .tab{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--u-2);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap;transition:background-color .15s ease,color .15s ease;}
@media (hover:hover) and (pointer:fine){.sys .tab:hover{background:#F2F2F2;color:var(--u-ink);}}
.sys .tab[aria-selected="true"]{background:#EFEFEF;color:var(--u-ink);font-weight:500;}
.sys .tab[aria-selected="true"] .ico{color:var(--u-ink);}
.sys .tab:focus-visible{outline:2px solid var(--u-teal);outline-offset:1px;}
.sys .wbar .srch{margin-left:auto;margin-right:8px;}
@media (max-width:1099px){
  .sys .stage{grid-template-columns:1fr;grid-template-areas:"pt" "bar" "scr";row-gap:0;}
  .sys .pnl .pt{margin-bottom:24px;}
}
@media (max-width:759px){
  .sys .wbar .srch,.sys .wbar .cmp span,.sys .wbar .me{display:none;}
  .sys .wbar .cmp{margin-left:auto;}
  .sys .tab[aria-selected="false"] .l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .sys .tab{padding:0 9px;}
  .rb .chart svg text{font-size:19px;}
  .rb .chart svg text.o{display:none;}
}

@media (max-width:1279px){.rd .list{display:none;}}
/* the workspace tabs keep their labels where the hero bar collapses them */
.sys .wbar .tab{display:inline-flex !important;}
.sys .wbar .tab .l{display:inline;}
@media (max-width:759px){
  .sys .wbar .tab[aria-selected="false"] .l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}

/* ---------- Polish 2 ---------- */
/* hero: cut-outs from the product around one creator's reel, laid out by the space they have */
.comp{container-type:inline-size;container-name:comp;}
.cw{position:relative;height:640px;}
.fr{position:absolute;background:#fff;border-radius:var(--r-m);box-shadow:var(--sh-3);outline:1px solid rgba(255,255,255,.14);outline-offset:-1px;}
.fr .cap{display:block;}
.post{left:34%;top:0;width:280px;padding:14px;}
.post .fh{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.post .fh .who{flex:1;min-width:0;}
.post .fh .who b{display:block;}
.post .media{position:relative;width:100%;aspect-ratio:504/900;border-radius:8px;overflow:hidden;background:#1d2b25;}
.post .media img,.post .media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:var(--grade);}
.post .perf{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border:1px solid var(--u-line);border-radius:7px;}
.post .perf > div{padding:7px 10px;border-left:1px solid var(--u-line);}
.post .perf > div:first-child{border-left:0;}
.post .perf b{display:block;font-size:17px;line-height:24px;font-weight:600;}
.post .scs{display:flex;gap:14px;margin-top:10px;flex-wrap:wrap;}
.ana{left:calc(34% + 250px);top:40px;width:240px;padding:16px;}
.ana .big{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.02em;}
.ana .bars{display:flex;gap:8px;align-items:flex-end;height:64px;margin-top:12px;}
.ana .bars i{flex:1;border-radius:3px 3px 0 0;background:var(--u-teal-b);}
.ana .bars i.last{background:var(--u-teal);height:var(--h1);transform-origin:50% 100%;transition:transform 360ms var(--ease-out);}
.cw:not(.decided) .ana .bars i.last{transform:scaleY(.79);}
.ana .bl{display:flex;justify-content:space-between;margin-top:6px;}
.ana .bl span{flex:1;text-align:center;}
.rev{left:0;top:290px;width:330px;padding:14px;}
.rev .rh{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.rev .rh .cap{width:100%;}
.rev .rh .tag{margin-left:auto;}
.crm{left:calc(34% + 240px);top:470px;width:270px;padding:14px;}
.crm .cr{display:flex;gap:10px;align-items:center;margin:6px 0 8px;}
.crm .cr b{display:block;}
.crm .tlr{display:grid;grid-template-columns:62px 1fr;gap:8px;padding:6px 0;border-top:1px solid var(--u-line);}
.cw .note{display:flex;gap:8px;padding:10px 12px;border-radius:7px;background:var(--u-wash);color:var(--u-2);}
.cw .note .star{color:var(--u-teal);margin-top:4px;flex:0 0 auto;}
.cw .note b{color:var(--u-ink);}
.cw .req{margin-top:8px;}
.cw .req li{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--u-line);}
.cw .req li:last-child{border-bottom:0;}
.cw .req .ok{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;background:var(--u-ok-w);color:var(--u-ok);flex:0 0 auto;}
.cw .req .ok svg{width:10px;height:10px;stroke-width:2.2;}
.cw .req .r{margin-left:auto;font-size:12px;color:var(--u-ok);}
.cw .df{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--u-line);min-height:46px;}
.cw .df .done{display:none;align-items:center;gap:8px;color:var(--u-ok);font-weight:500;}
.cw .df .done i{width:18px;height:18px;border-radius:50%;background:var(--u-ok);display:grid;place-items:center;}
.cw .df .done svg{width:11px;height:11px;stroke:#fff;stroke-width:2.2;}
.cw .is-done .act{display:none;}
.cw .is-done .done{display:inline-flex;}
.cw .is-pending .act{display:flex;gap:8px;}
.cw .wb{display:none;}
.cw.decided .wa{display:none;}
.cw.decided .tag.wb{display:inline-flex;}
.cw [data-n] .b{display:none;}
.cw [data-n].pend .a{display:none;}
.cw [data-n].pend .b{display:inline;}
.js-hero .cw:not(.play) .req li,.js-hero .cw:not(.play) .note{opacity:0;}
@media (prefers-reduced-motion:no-preference){
  .js-hero .cw .fr{animation:rise .48s var(--ease-out) both;}
  .js-hero .cw .post{animation-delay:.06s}.js-hero .cw .ana{animation-delay:.12s}.js-hero .cw .rev{animation-delay:.18s}.js-hero .cw .crm{animation-delay:.24s}
  .js-hero .cw.play .req li{animation:fadeup .24s var(--ease-out) both;}
  .js-hero .cw.play .req li:nth-child(1){animation-delay:.04s}.js-hero .cw.play .req li:nth-child(2){animation-delay:.1s}.js-hero .cw.play .req li:nth-child(3){animation-delay:.16s}.js-hero .cw.play .req li:nth-child(4){animation-delay:.22s}
  .js-hero .cw.play .note{animation:fadeup .28s var(--ease-out) .3s both;}
  .js-hero .cw .is-pending .act .pri{transition:transform 140ms var(--ease-out),background-color 140ms ease;}
  .js-hero .cw .pressing .act .pri{transform:scale(.97);background:#000;}
  .js-hero .cw .is-done .done{animation:fadeup .24s var(--ease-out) both;}
}
.js-hero .scene.comp{animation:none;}
@container comp (max-width:700px){
  .cw{height:600px;}
  .post{left:auto;right:0;width:260px;}
  .ana{left:16px;top:16px;width:300px;}
  .rev{left:0;top:270px;width:330px;}
  .crm{display:none;}
}
@container comp (max-width:480px){
  .cw{height:auto;padding-bottom:28px;}
  .fr{position:relative;left:auto;right:auto;top:auto;}
  .post{width:230px;}
  .ana{position:absolute;right:0;left:auto;top:64px;width:150px;padding:12px;}
  .ana .big{font-size:26px;line-height:32px;}
  .ana .big .tag,.ana .bl{display:none;}
  .ana .bars{height:44px;gap:5px;}
  .rev{width:100%;margin-top:-80px;}
}
@media (max-width:759px){
  .scene.comp{margin-top:36px;}
}

/* Companion, powered by six agents */
.pwr{margin-top:24px;border-radius:var(--r-l);background:var(--green-deep);color:var(--on-dark);padding:32px;}
.pwr-h{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;}
.pwr-n{font-size:var(--fs-h3);font-weight:500;letter-spacing:-0.02em;}
.pwr-s{color:var(--on-dark-2);}
.pwr-g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:24px;margin-top:22px;border-top:1px solid rgba(255,255,255,.18);}
.pwr-g li{position:relative;padding-top:20px;}
.pwr-g li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:#7FC8B6;}
.pwr-g b{display:block;font-weight:500;}
.pwr-g span{display:block;margin-top:6px;font-size:15px;color:var(--on-dark-2);}
@media (max-width:1099px){.pwr-g{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:0;}.pwr-g li{padding-bottom:20px;}}
@media (max-width:759px){.pwr{padding:22px 16px;border-radius:var(--r-m);}.pwr-g{grid-template-columns:1fr 1fr;gap:0 16px;}}


/* Built screens hold their layout by the space they are given, so browser zoom reflows them as a whole */
.sys .scr{container-type:inline-size;container-name:scr;}
@container scr (max-width:900px){
  .side-nav,.cdr.hide-md{display:none;}
  .pb{grid-template-columns:180px minmax(0,1fr);}
  .pb .thm{display:none;}
  .rec .kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .rec .kpis > div:nth-child(4){border-left:0;}
  .rec .kpis > div:nth-child(n+4){border-top:1px solid var(--u-line);}
}
@container scr (max-width:680px){
  .rec .cols{grid-template-columns:1fr;}
  .rec .who .r{display:none;}
  .cmp-s .kit .kg{grid-template-columns:1fr 1fr;}
}
@container scr (max-width:520px){
  .win .mn{padding:16px;}
  .tdy .sg .pill:nth-child(n+2){display:none;}
  .tdy .qr{padding:10px 12px;gap:10px;}
  .tdy .qr .t .sm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .rec .tabsx{overflow:hidden;}
  .rec .kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .rec .kpis > div:nth-child(4){border-left:1px solid var(--u-line);}
  .rec .kpis > div:nth-child(odd){border-left:0;}
  .rec .kpis > div:nth-child(n+3){border-top:1px solid var(--u-line);}
  .rec .kpis > div:nth-child(n+5){display:none;}
  .rec .tl .row{grid-template-columns:1fr;gap:2px;}
  .rec .tl .row .lk{display:none;}
  .cmp-s .kp3{grid-template-columns:1fr 1fr;}
  .cmp-s .kp3 .card:nth-child(3){display:none;}
  .pb{grid-template-columns:1fr;}
  .pb .tree{display:none;}
  .rb .ctl{grid-template-columns:1fr;}
  .rb .top{flex-wrap:wrap;}
  .rb .act{display:none;}
}
.cmpn-s .tilex{container-type:inline-size;container-name:tile;}
@container tile (max-width:420px){
  .scope .sr{flex-wrap:wrap;row-gap:6px;}
  .scope .sr .t{flex:1 1 calc(100% - 60px);}
  .scope .sr .lock,.scope .sr .seg{margin-left:52px;}
}
/* clip 7 carries a faint stock mark at about 65 percent of its height: show the top 58 percent only */
.post .media{aspect-ratio:252/262;}
.post .media img,.post .media video{object-position:50% 0;}
.post{top:20px;}
.ana{top:60px;}
.rev{top:250px;}
.crm{top:340px;}
.cw{height:590px;}
@container comp (max-width:700px){
  .cw{height:560px;}
  .post{top:0;}
  .ana{top:16px;}
  .rev{top:230px;}
}
@container comp (max-width:480px){
  .cw{height:auto;}
  .post{top:auto;}
  .ana{top:56px;}
  .rev{margin-top:-36px;top:auto;}
}
.post .media{aspect-ratio:252/240;}
.post .media img,.post .media video{object-position:50% 17%;}
.post{left:calc(34% + 40px);}
.ana{left:calc(34% + 290px);}
.crm{left:calc(34% + 280px);width:250px;}
@container comp (max-width:700px){.post{left:auto;}}
.rec .tl .row{align-items:start;}
@container scr (max-width:760px){.rb .top{flex-wrap:wrap;}.rb .act{margin-left:0;}}
@media (max-width:759px){.pb{grid-template-columns:1fr !important;}.pb .tree{display:none;}}
.portal .bl > div{flex-wrap:wrap;gap:4px;}
@container scr (max-width:720px){.rec .cols{grid-template-columns:1fr;}}
/* hero composition by container width (kept last so it wins over the wide layout above) */
@container comp (max-width:700px){
  .cw{height:560px;}
  .post{left:auto;right:0;top:0;width:260px;}
  .ana{left:16px;top:16px;width:300px;}
  .rev{left:0;top:230px;width:330px;}
  .crm{display:none;}
}
@container comp (max-width:480px){
  .cw{height:auto;padding-bottom:28px;}
  .fr{position:relative;left:auto;right:auto;top:auto;}
  .post{width:230px;}
  .ana{position:absolute;right:0;left:auto;top:56px;width:150px;padding:12px;}
  .rev{width:100%;margin-top:-36px;}
}
@container comp (max-width:700px){.ana{width:230px;}.ana .big{flex-wrap:wrap;row-gap:4px;}}
/* 1024: the Review desk card no longer runs under the creator card; the creator card is narrower and the desk is bounded by the space beside it */
@container comp (max-width:700px){.post{width:220px;}.rev{width:min(330px,calc(100% - 236px));}}
@container comp (max-width:480px){.ana{width:150px;}}
.portal .bl > div.cmpn{flex-wrap:nowrap;}
.hero h1{text-wrap:pretty;}
@media (min-width:1100px){
  .hero .copy{width:min(560px,39%);}
  .scene{left:calc(var(--gut) + min(560px,39%) + 40px);}
}

/* 390: the scene sits in flow with no relative offset, so the hero grows to hold the whole Review desk card */
@media (max-width:759px){.scene{top:auto;}}
@media (max-width:759px){.hero .in{padding-bottom:36px;}}
@container comp (max-width:480px){.post{width:230px;}.rev{width:100%;}}

/* ---------- The record scene (round 3 final, fable-c): the hero's approval lands in the record, goes into the report, carries into the next campaign ---------- */
.rs{background:var(--canvas-2);padding:56px 0 112px;}
.rs .hd2 .h2{max-width:14em;}
.rsc{margin-top:32px;position:relative;}
.rs-step{display:flex;align-items:center;gap:14px;position:relative;}
.rs-step .n{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:17px;font-weight:500;flex:0 0 auto;font-variant-numeric:tabular-nums;}
.rs-step .t{font-size:21px;line-height:1.3;letter-spacing:-0.02em;font-weight:500;color:var(--ink);max-width:30em;}
.rs-step.s1{padding-bottom:40px;}
.rs-step.s1::before{content:"";position:absolute;left:16px;top:36px;bottom:0;width:4px;background:var(--green);}
.rs-step .chip{position:absolute;left:36px;top:36px;display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px 0 8px;border-radius:999px;background:#fff;color:var(--ink);font-size:13px;font-weight:500;box-shadow:0 0 0 1px var(--green),0 8px 20px -8px rgba(12,38,30,.4);white-space:nowrap;opacity:0;pointer-events:none;}
.rs-step .chip i{width:14px;height:14px;border-radius:50%;background:var(--green);}
.rs-win{box-shadow:0 0 0 1px var(--green),0 0 0 4px rgba(28,74,57,.18),0 40px 80px -40px rgba(12,38,30,.5);outline:0;overflow:hidden;}
.rs-win .tb .tab{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:8px;color:var(--u-2);white-space:nowrap;}
.rs-win .tb .tab.on{background:#EFEFEF;color:var(--u-ink);font-weight:500;}
.rs-win .tb .tab.on .ico{color:var(--u-ink);}
.rs-win .tb .cmp.on{background:var(--u-teal-w);color:var(--u-teal);}
.rs-win .bd{display:flex;align-items:stretch;}
.rsr{flex:1 1 auto;min-width:0;}
.rsr .mline{margin-top:10px;}
.rsr .cols{align-items:start;}
.rsr .side{display:flex;flex-direction:column;gap:10px;}
.rsr .cx{padding:12px 14px;}
.rsr .cx p{margin-top:6px;}
.rsr .cx .kv{display:flex;justify-content:space-between;gap:12px;margin-top:6px;}
.rsr .tl .row{display:grid;grid-template-columns:104px minmax(0,1fr) auto;gap:10px;padding:9px 14px;border-bottom:1px solid var(--u-line);}
.rsr .tl .row:last-child{border-bottom:0;}
.rsr .tl .row.new{background:var(--u-teal-w);box-shadow:inset 2px 0 0 var(--u-teal);}
.rs-win .cdr .h .x{margin-left:auto;color:var(--u-3);font-size:16px;}
.rs-win .cdr sup{font-size:9px;color:var(--u-teal);margin-left:1px;}
/* the two cells below the record, each hung from it by a solid line */
.rs-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:0;}
.rs-cell{position:relative;padding-top:56px;}
.rs-cell::before{content:"";position:absolute;left:16px;top:0;width:4px;height:56px;background:var(--green);transform-origin:top;}
.rs-cell .rs-step{margin-bottom:16px;}
.rs-cell .card{box-shadow:0 0 0 1px var(--green),0 24px 48px -32px rgba(12,38,30,.45);border-color:transparent;overflow:hidden;}
.rs-cell .rh{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--u-line);flex-wrap:wrap;}
.rs-cell .rh .r{margin-left:auto;}
.rs-rep .big{display:flex;align-items:flex-end;gap:12px;padding:14px 14px 12px;flex-wrap:wrap;}
.rs-rep .big .tag{white-space:nowrap;}
.rs-rep .big b{display:block;font-size:34px;line-height:40px;font-weight:600;letter-spacing:-0.02em;}
.rs-rep .big .tag{margin-bottom:8px;}
.rs-rep .lst .hr,.rs-rep .lst .row{display:grid;grid-template-columns:110px minmax(0,1fr) 60px 64px 50px;gap:8px;padding:8px 14px;border-top:1px solid var(--u-line);}
.rs-rep .lst .hr{padding-top:10px;}
.rs-rep .lst .row span:nth-child(n+4){font-variant-numeric:tabular-nums;}
.rs-rep .lst .row.new{background:var(--u-teal-w);box-shadow:inset 2px 0 0 var(--u-teal);font-weight:500;}
.rs-cmp .tabsx{display:flex;gap:16px;padding:0 14px;border-bottom:1px solid var(--u-line);}
.rs-cmp .tabsx span{padding:9px 0;color:var(--u-2);white-space:nowrap;}
.rs-cmp .tabsx span.on{color:var(--u-ink);font-weight:500;box-shadow:inset 0 -2px 0 var(--u-teal);}
.rs-cmp .cr{display:flex;gap:12px;padding:12px 14px;border-bottom:1px solid var(--u-line);align-items:flex-start;}
.rs-cmp .cr:last-child{border-bottom:0;}
.rs-cmp .cr .av{width:36px;height:36px;margin-top:2px;}
.rs-cmp .cr .t{flex:1;min-width:0;}
.rs-cmp .cr .nm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.rs-cmp .cr.new{background:var(--u-teal-w);box-shadow:inset 2px 0 0 var(--u-teal);}
.rs-cmp .carry{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.rs-cmp .carry span{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--u-in);background:#fff;font-size:12px;font-weight:500;color:var(--u-ink);white-space:nowrap;}
/* the sequence: resting state in the markup; with JS and motion, the approval arrives first, then the report, then the next campaign */
.rs [data-n] .b{display:none;}
.rs [data-n].pend .a{display:none;}
.rs [data-n].pend .b{display:inline;}
.js-rs .rsc:not(.play) .rs-new{opacity:0;}
.js-rs .rsc:not(.play) .rs-cell::before{transform:scaleY(0);}
@media (prefers-reduced-motion:no-preference){
  .js-rs .rsc.play .rs-new{animation:rs-in .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0s);}
  .js-rs .rsc.play .rs-step.s1 .chip{animation:rs-drop 1s cubic-bezier(.4,0,.2,1) .2s both;}
  .js-rs .rsc.play .rs-cell.c2::before{animation:rs-grow .5s cubic-bezier(.2,.8,.2,1) 1.8s both;}
  .js-rs .rsc.play .rs-cell.c3::before{animation:rs-grow .5s cubic-bezier(.2,.8,.2,1) 2.8s both;}
  .js-rs .rsc.play .rs-cell::after{content:"";position:absolute;left:12px;top:0;width:12px;height:12px;border-radius:50%;background:var(--green);opacity:0;}
  .js-rs .rsc.play .rs-cell.c2::after{animation:rs-dot .6s cubic-bezier(.4,0,.2,1) 1.9s both;}
  .js-rs .rsc.play .rs-cell.c3::after{animation:rs-dot .6s cubic-bezier(.4,0,.2,1) 2.9s both;}
}
@keyframes rs-in{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
@keyframes rs-drop{0%{opacity:0;transform:translateY(-6px);}15%{opacity:1;}80%{opacity:1;transform:translateY(34px);}100%{opacity:0;transform:translateY(40px);}}
@keyframes rs-grow{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes rs-dot{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(50px);}}
/* logos now sit under the scene */
.logos{padding:48px 0 0;}
@media (max-width:1279px){
  .rsr .cols{grid-template-columns:minmax(0,1fr) 220px;}
}
@media (max-width:1099px){
  .rs-win .bd{flex-direction:column;}
  .rs-win .cdr{width:auto;border-left:0;border-top:1px solid var(--u-line);}
  .rs-win .cdr .in{margin-top:12px;}
  .rs-row{grid-template-columns:1fr;gap:0;}
  .rs-step .t{font-size:19px;}
}
@media (max-width:759px){
  .rs{padding:48px 0 72px;}
  .rsc{margin-top:24px;}
  .rs-step{align-items:flex-start;}
  .rs-step .n{width:30px;height:30px;font-size:15px;}
  .rs-step .t{font-size:17px;}
  .rs-step.s1{padding-bottom:32px;}
  .rs-step.s1::before{left:13px;top:30px;}
  .rs-step .chip{left:30px;top:30px;}
  .rs-cell{padding-top:40px;}
  .rs-cell::before{left:13px;height:40px;}
  .rs-cell::after{left:9px;}
  .rs-win{border-radius:var(--r-m);}
  .rs-win .tb .tab:not(.on){padding:0 8px;}
  .rs-win .tb .tab:not(.on) .l,.rs-win .tb .srch,.rs-win .tb .cmp span,.rs-win .tb .me{display:none;}
  .rs-win .tb .cmp{margin-left:auto;}
  .rsr .side{display:none;}
  .rsr .cols{grid-template-columns:1fr;}
  .rs-win .cdr .in{display:none;}
  .rsr .tl .row{grid-template-columns:1fr;gap:2px;padding:8px 12px;}
  .rsr .tl .row .lk{display:none;}
  .rsr .tl .th .pill{display:none;}
  .rsr .tl .row:nth-child(n+6){display:none;}
  .rs-win .cdr .body{gap:10px;}
  .rs-win .cdr .body .pill:nth-child(2){display:none;}
  .rs-cell .rh .r{margin-left:0;flex-basis:100%;}
  .rs-rep .lst .hr,.rs-rep .lst .row{grid-template-columns:92px minmax(0,1fr) 46px 48px;}
  .rs-rep .lst .hr span:nth-child(3),.rs-rep .lst .row span:nth-child(3){display:none;}
  .rs-cmp .tabsx{overflow:hidden;gap:12px;}
  .rs-cmp .cr:last-child{display:none;}
}
/* workspace: two screens are open below the tabbed one; their bars are static copies of the product's top bar */
.sys .tab.on{background:#EFEFEF;color:var(--u-ink);font-weight:500;}
.sys .tab.on .ico{color:var(--u-ink);}
.sys .stage.st2{margin-top:24px;min-height:0;}
.sys .stage.st2 .scr .app{min-height:0;}
a.tab:focus-visible{outline:2px solid var(--u-teal);outline-offset:1px;}
.sys .st2 .tab{cursor:default;}
@media (hover:hover) and (pointer:fine){.sys .st2 .tab:hover{background:transparent;color:var(--u-2);}}
@media (hover:hover) and (pointer:fine){.sys .st2 .tab.on:hover{background:#EFEFEF;color:var(--u-ink);}}

/* ---------- Polish 3 (opus-gr): tidy pass, spacing, edges and fit only ---------- */
/* surfaces that are .card and .ui on the same node never got the .ui .card radius */
.rs-cell .card.ui{border-radius:var(--r-m);}
.cmpn-s .scope.card.ui{border-radius:var(--r-m);overflow:hidden;border:1px solid var(--u-line);box-shadow:var(--sh-2);}
.cmpn-s .scope .sh{border-radius:0;}
/* the two Companion tiles size to their content, not to a forced chat height */
.cmpn-s .cdr{min-height:0;}
.portal .nv2{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);}
/* workspace: headings break between words, not at the hyphen */
.sys .pt h3{text-wrap:pretty;}
/* report builder: the label and controls keep one line; only the name field gives way */
.rb .top > *{flex:0 0 auto;}
.rb .top .mut{white-space:nowrap;}
.rb .top .nm{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* workspace tab bars: 40px hit area on the live tabs without changing their look */
.sys .wbar .tab{position:relative;}
.sys .wbar .tab::before{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px;}
@media (max-width:759px){
  .sys .wbar a.tab .l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .sys .wbar a.tab{padding:0 9px;}
  .sys .st2 .wbar .tab:not(.on) .l{display:none;}
  .sys .st2 .wbar .tab:not(.on){padding:0 9px;}
}
/* record scene, report: the week-on-week tag sits beside the number it qualifies, as in the hero */
.rs-rep .big{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:end;}
.rs-rep .big > div{display:contents;}
.rs-rep .big .cap{grid-column:1/-1;}
.rs-rep .big .tag{justify-self:start;}
/* rhythm: the record section opens with the same air as the sections below it */
@media (min-width:760px){.rs{padding-top:96px;}}
@media (max-width:759px){.rs{padding-top:72px;}}
/* the CTA card sits in an even 24px gutter above and below */
.rb .act{gap:6px;}
.rb .top .nm{padding-left:9px;padding-right:9px;}
/* record scene: cards 2 and 3 share one height when they sit side by side */
@media (min-width:1100px){.rs-cell{display:flex;flex-direction:column;}.rs-cell .card{flex:1 1 auto;}}
/* record scene: step labels break evenly, no single word left on the second line */
.rs-step .t{text-wrap:balance;}

/* ---------- Record scene recomposed (opus-gr): one rail of numbered steps, each beside its screen ---------- */
/* header: heading, then the explanation under it at a reading measure */
@media (min-width:760px){
  .rs .hd2{grid-template-columns:1fr;gap:16px;}
  .rs .hd2 .lede{max-width:65ch;}
  .rs{padding-bottom:96px;}
}
@media (min-width:1100px){
  .rsc{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:40px;margin-top:48px;}
  .rs-step .t{font-size:19px;}
  .rs-step.s1{grid-column:1;grid-row:1;align-self:stretch;align-items:flex-start;padding-bottom:0;}
  .rs-step.s1 .chip{left:0;top:132px;}
  .rs-win{grid-column:2;grid-row:1;}
  .rsr{container-type:inline-size;container-name:scr;}
  .rs-row{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,1fr);gap:0;}
  .rs-cell{display:grid;grid-template-columns:240px minmax(0,1fr);column-gap:40px;padding-top:40px;}
  .rs-cell::before{height:40px;}
  .rs-cell .rs-step{grid-column:1;margin-bottom:0;align-self:stretch;align-items:flex-start;}
  .rs-cell .card{grid-column:2;}
  /* the rail runs from badge 1 to badge 3 without a gap: step 1 to the bottom of its row, the cell gaps, step 2 to the bottom of its row */
  .rs-cell.c2 .rs-step::before{content:"";position:absolute;left:16px;top:36px;bottom:0;width:4px;background:var(--green);transform-origin:top;}
  .js-rs .rsc:not(.play) .rs-cell.c2 .rs-step::before{transform:scaleY(0);}
  .js-rs .rsc .rs-cell::after{display:none;}
}
@media (min-width:1100px) and (prefers-reduced-motion:no-preference){
  .js-rs .rsc.play .rs-cell.c2 .rs-step::before{animation:rs-grow .5s cubic-bezier(.2,.8,.2,1) 2.3s both;}
}
/* below 1280 the Companion drawer sits under the record, so the record keeps its width */
@media (min-width:1100px) and (max-width:1279px){
  .rs-win .bd{flex-direction:column;}
  .rs-win .cdr{width:auto;border-left:0;border-top:1px solid var(--u-line);}
  .rs-win .cdr .in{margin-top:12px;}
}
/* the window and both cards share the window's own surface: 12px radius, one 1px hairline, one soft shadow */
.rs .rs-win.app.lt,.rs .rs-cell .card.ui{border-radius:var(--r-m);outline:1px solid var(--edge);outline-offset:-1px;box-shadow:var(--sh-2);}
/* 1280 to 1439: the record keeps its side cards beside the timeline instead of stacking them, so the window stays close to the cards in height */
@media (min-width:1280px) and (max-width:1439px){
  .rs .rsr .cols{grid-template-columns:minmax(0,1fr) 196px;}
  .rs .rsr .tl .row{grid-template-columns:84px minmax(0,1fr);}
  .rs .rsr .tl .row .lk{display:none;}
}
.rs .rsr .tl .th .lk{white-space:nowrap;}

/* ---------- Workspace, pinned (js-pin is set by home.js only at 1024 px and wider, with motion allowed) ---------- */
.js-pin .sys .pin{margin-top:56px;border-radius:var(--r-l);background:var(--tile);padding:40px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;align-items:start;}
.js-pin .sys .pin-win{position:sticky;top:96px;min-width:0;}
.js-pin .sys .pin .stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"bar" "scr";margin:0;padding:0;background:none;border-radius:0;min-height:0;}
.js-pin .sys .pin .pnl,.js-pin .sys .pin .pnl[hidden]{display:block !important;grid-area:scr;min-width:0;opacity:0;transform:translateY(8px);visibility:hidden;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 0s linear 180ms;}
.js-pin .sys .pin .pnl.pin-on{opacity:1;transform:none;visibility:visible;transition-delay:0s;}
.js-pin .sys .pin .pnl .scr{grid-area:auto;}
.js-pin .sys .pin .pnl.enter .scr{animation:none;}
.js-pin .sys .stage.st2{display:none;}
.js-pin .sys .pin-step{min-height:68vh;display:flex;align-items:center;cursor:pointer;}
.js-pin .sys .pin-step .pt{margin:0;padding-left:20px;box-shadow:inset 2px 0 0 transparent;transition:box-shadow .2s ease;}
.js-pin .sys .pin-step .pt h3,.js-pin .sys .pin-step .pt p{transition:color .2s ease;}
.js-pin .sys .pin-step:not(.on) .pt h3,.js-pin .sys .pin-step:not(.on) .pt p{color:#5E6863;}
.js-pin .sys .pin-step.on .pt{box-shadow:inset 2px 0 0 var(--green);}
.js-pin .sys .wbar a.tab.on{background:#EFEFEF;color:var(--u-ink);font-weight:500;}
.js-pin .sys .wbar a.tab.on .ico{color:var(--u-ink);}
@media (max-width:1279px){
  .js-pin .sys .pin{grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:32px;padding:28px;}
}
.js-pin .sys .pin-step:first-child{margin-top:26vh;}
/* record scene: each caption follows the reader down its screen */
@media (min-width:1100px){.rs-step .n,.rs-step .t{position:sticky;top:96px;}}

/* ---------- Workspace: Companion at work and its suggestions ---------- */
.tdy .tchat{margin-top:14px;display:flex;flex-direction:column;gap:8px;}
.tdy .hq{align-self:flex-end;max-width:85%;background:#EFEFEF;color:var(--u-ink);padding:8px 12px;border-radius:12px 12px 4px 12px;}
.tdy .ha{background:#fff;border:1px solid var(--u-line);border-radius:10px;padding:12px 14px;color:var(--u-ink);}
.tdy .ha p{text-wrap:pretty;}
.tdy .hw{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:12px;}
.tdy .hw b{font-weight:500;color:var(--u-teal);}
.tdy .hw span{color:var(--u-3);}
.tdy .hw .star,.sx .star,.sxi .star{width:12px;height:12px;color:var(--u-teal);}
.tdy .ask.hask{margin-top:0;height:44px;font-size:14px;}
.ui .ag{display:inline-flex;align-items:center;height:20px;padding:0 8px;margin-left:6px;border-radius:999px;background:var(--u-teal-w);color:var(--u-teal);font-size:11px;font-weight:500;vertical-align:1px;white-space:nowrap;}
.tdy .qr .t b{display:flex;align-items:center;flex-wrap:wrap;}
.sx .sx-r{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--u-line);}
.sx .sx-r:first-of-type{border-top:0;}
.sx .sx-r .t{flex:1;min-width:0;}
.sx .sx-r .t b{display:block;font-weight:500;}
.sx .sx-r .t .sm{display:block;}
.sx .k{display:inline-block;margin-right:6px;color:var(--u-teal);font-weight:500;}
.ui .bt.sx-a{height:28px;padding:0 10px;font-size:12px;}
.ui .bt.sx-a:last-child{background:var(--u-dark);border-color:var(--u-dark);color:#fff;}
.cdr .sx{display:flex;flex-direction:column;}
.rec .rcol{display:flex;flex-direction:column;gap:14px;min-width:0;}
.rec .sxc{padding:12px 14px;}
.rec .sxc .sxh{display:flex;align-items:center;gap:6px;padding-bottom:4px;}
.rec .sxc .sxh b{font-weight:500;}
.rec .sxc .sx-r{flex-wrap:wrap;gap:4px 10px;}
.sxp{margin-top:12px;display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--u-teal-w) !important;border-color:var(--u-teal-b) !important;}
.sxp .sxi{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;background:#fff;border:1px solid var(--u-teal-b);color:var(--u-teal);}
.sxp .sxi .ico{width:15px;height:15px;}
.sxp .t{flex:1;min-width:0;}
.sxp .t b{display:block;font-weight:500;}
.sxp .t .sm{display:block;margin-top:2px;color:var(--u-2);}
@media (max-width:640px){
  .sxp{flex-wrap:wrap;}
  .sxp .t{flex-basis:calc(100% - 40px);}
  .tdy .ask.hask{height:40px;}
}
.js-pin .sys .pin-step:last-child{margin-bottom:12vh;}

/* ---------- Know every creator: what comes in, her one profile, what the agents suggest next ---------- */
.kn{padding:128px 0;}
.kn .h2{max-width:13em;}
.kn-hd .lede{max-width:34em;}
.kn-stage{position:relative;margin-top:48px;padding:44px 40px 40px;border-radius:var(--r-l);background:radial-gradient(110% 120% at 50% 0%,#173D30 0%,var(--green-deep) 58%,#081B15 100%);isolation:isolate;}
.kn-flow{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1.12fr) 72px minmax(0,1fr);grid-template-rows:auto 1fr;row-gap:18px;}
.kn-wires{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2;}
.kn-wires path{fill:none;stroke-linecap:round;}
.kn-wires .kn-w{stroke:rgba(201,214,207,.42);stroke-width:1.5;}
.kn-wires .kn-p,.kn-wires .kn-r{stroke:#8FD8BF;stroke-width:2.5;stroke-dasharray:18px 100000px;stroke-dashoffset:18px;}
.kn-wires .kn-port{fill:#8FD8BF;stroke:#0C261E;stroke-width:2.5;}
.kn-lab{position:relative;z-index:1;justify-self:start;display:inline-flex;align-items:center;height:30px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.13);color:#DDE7E1;font-size:14px;font-weight:500;letter-spacing:-0.01em;white-space:nowrap;}
.kn-lab.l1{grid-column:1;grid-row:1;}.kn-lab.l2{grid-column:3;grid-row:1;}.kn-lab.l3{grid-column:5;grid-row:1;}
.kn-sig{grid-column:1;grid-row:2;display:flex;flex-direction:column;gap:12px;}
.kn-pro{grid-column:3;grid-row:2;}
.kn-out{grid-column:5;grid-row:2;align-self:center;display:flex;flex-direction:column;gap:12px;}
/* surfaces: white product cards on the green stage, shadows not borders, 12px cards inside a 20px stage */
.kn .kn-c,.kn .kn-pro,.kn .kn-s{position:relative;z-index:1;background:#fff;box-shadow:0 1px 2px rgba(2,14,10,.28),0 18px 40px -18px rgba(2,14,10,.65);}
.kn .kn-c,.kn .kn-s{border-radius:var(--r-m);padding:14px 16px;}
.kn .kn-c .t{flex:1;min-width:0;text-wrap:pretty;}
.kn .kn-c .sm,.kn .kn-s .sm{text-wrap:pretty;}
/* channels */
.kn-ch-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
.kn-chr{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:8px;height:32px;border-top:1px solid var(--u-line);}
.kn-chr b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kn-chr .n{font-weight:600;font-variant-numeric:tabular-nums;}
/* safety and aesthetic */
.kn-sc{display:flex;gap:12px;align-items:flex-start;}
.kn-i{width:32px;height:32px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;background:var(--u-teal-w);color:var(--u-teal);}
.kn .kn-i .ico{color:var(--u-teal);width:16px;height:16px;}
.kn-sh{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;margin-bottom:3px;}
.kn-sh b{font-size:14px;font-weight:600;}
.kn .kn-sh .ag{margin-left:auto;}
/* conversations */
.kn-cvh{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.kn-src{display:inline-flex;align-items:center;gap:6px;font-weight:500;}
.kn-bub{margin:8px 0 10px;padding:8px 12px;max-width:92%;border-radius:4px 12px 12px 12px;background:#E3F1EB;color:var(--u-ink);text-wrap:pretty;}
.kn-em{padding-top:9px;border-top:1px solid var(--u-line);color:var(--u-2);}
.kn-em .kn-src{font-weight:400;}
/* the profile: where everything lands */
.kn .kn-pro{display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:16px;box-shadow:0 0 0 4px rgba(143,216,191,.16),0 1px 2px rgba(2,14,10,.3),0 40px 80px -30px rgba(2,14,10,.8);}
.kn-ph{display:flex;align-items:center;gap:14px;}
.kn-av{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--u-av);outline:1px solid rgba(0,0,0,.1);outline-offset:-1px;}
.kn-ph .nm{display:flex;align-items:center;gap:8px;}
.kn-ph .nm b{font-size:18px;line-height:24px;font-weight:600;letter-spacing:-0.015em;}
.kn-kp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:10px;background:var(--u-canvas);box-shadow:inset 0 0 0 1px var(--u-line);}
.kn-kp > div{display:flex;flex-direction:column;padding:10px 12px;box-shadow:-1px 0 0 var(--u-line);}
.kn-kp > div:first-child{box-shadow:none;}
.kn-kp > .kn-k4{display:none;}
.kn-kp b{font-size:24px;line-height:30px;font-weight:600;letter-spacing:-0.02em;font-variant-numeric:tabular-nums;}
.kn-row{display:flex;flex-direction:column;gap:6px;}
.kn-tk{display:flex;flex-wrap:wrap;gap:6px;}
.kn-pl{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px 0 9px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--u-in);white-space:nowrap;font-weight:500;}
.kn-pl.on{background:var(--u-teal-w);box-shadow:inset 0 0 0 1px var(--u-teal-b);color:var(--u-teal);}
.kn .kn-pl.on .ico{color:var(--u-teal);}
.kn .kn-pl .ico{width:14px;height:14px;}
.kn-hs{display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--u-2);}
.kn-hs b{color:var(--u-ink);font-weight:600;font-variant-numeric:tabular-nums;}
.kn-tl{margin-top:auto;}
.kn-tl > .cap{display:block;margin-bottom:6px;}
.kn-win{height:108px;overflow:hidden;border-radius:8px;box-shadow:inset 0 0 0 1px var(--u-line);}
.kn-list{transition:transform 360ms var(--ease-out);}
.kn-li{display:grid;grid-template-columns:84px minmax(0,1fr) auto;align-items:center;gap:10px;height:36px;padding:0 12px;box-shadow:0 1px 0 var(--u-line);}
.kn-li .tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kn-li.new{background:var(--u-teal-w);box-shadow:inset 2px 0 0 var(--u-teal),0 1px 0 var(--u-line);}
.kn-li.new .tx{font-weight:500;}
.kn-list.pend{transform:translateY(-36px);}
/* suggestions */
.kn-s{display:flex;align-items:center;gap:12px;}
.kn-s .t{flex:1;min-width:0;}
.kn-s .t b{display:block;font-size:14px;font-weight:600;}
.kn-s .t .sm{display:block;margin-top:1px;}
.kn-s .k{color:var(--u-teal);font-weight:500;font-size:12px;}
.kn .kn-s .ag{margin-left:0;}
.kn-df{flex:0 0 auto;display:flex;align-items:center;}
.kn .kn-df .bt{height:30px;padding:0 12px;font-size:12px;}
.kn-done{display:none;align-items:center;gap:6px;height:30px;color:var(--u-ok);font-weight:500;font-size:12px;}
.kn-done i{width:18px;height:18px;border-radius:50%;background:var(--u-ok);display:grid;place-items:center;}
.kn-done svg{width:11px;height:11px;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.kn-s.is-done .bt{display:none;}
.kn-s.is-done .kn-done{display:inline-flex;}
.kn .kn-s.is-done{box-shadow:0 0 0 2px #8FD8BF,0 1px 2px rgba(2,14,10,.28),0 18px 40px -18px rgba(2,14,10,.65);}
.kn-df .bt{transition:transform 140ms var(--ease-out),background-color 140ms ease;}
.kn-s.pressing .bt{transform:scale(.97);background:#000;}
.kn-loop{position:relative;z-index:1;margin-top:4px;display:flex;gap:10px;padding:14px 16px;border-radius:var(--r-m);background:#E3F1EB;color:var(--green-deep);font-size:14px;line-height:1.45;}
.kn-loop .star{width:13px;height:13px;flex:0 0 auto;margin-top:4px;fill:var(--u-teal);}
.kn-loop p{text-wrap:pretty;}
.kn-cap{margin-top:16px;font-size:14px;line-height:1.5;color:var(--ink-2);}
/* the sequence: the decided state is the markup; home.js adds js-kn and pending classes only with motion allowed.
   Trigger classes on the flow: p1 signals, w1 wires into the profile, p2 profile fills, p3 wires out and suggestions.
   Wide: all four at once, offset by --o2 and --o3. Stacked (kn-seq): each beat when it is on screen, no offset. */
.kn-flow{--o2:.45s;--o3:.75s;}
.kn-flow.kn-seq{--o2:0s;--o3:0s;}
.js-kn .kn-flow .kn-w{stroke-dasharray:var(--len) var(--len);}
.js-kn .kn-flow:not(.w1) .kn-w.g1,.js-kn .kn-flow:not(.p3) .kn-w.g3{stroke-dashoffset:var(--len);}
.js-kn .kn-flow:not(.w1) .kn-port.g1,.js-kn .kn-flow:not(.p3) .kn-port.g3,.js-kn .kn-flow:not(.p1) .kn-sig > .kn-c,.js-kn .kn-flow:not(.p2) .kn-f,.js-kn .kn-flow:not(.p3) .kn-s{opacity:0;}
.js-kn .kn-flow:not(.done) .kn-loop{opacity:0;}
.kn-kp{--k:0}.kn-row.kn-f{--k:1}.kn-row.kn-f + .kn-row.kn-f{--k:2}.kn-tl{--k:3}
.kn-out .kn-s:nth-child(1){--k:0}.kn-out .kn-s:nth-child(2){--k:1}.kn-out .kn-s:nth-child(3){--k:2}
@media (prefers-reduced-motion:no-preference){
  .js-kn .kn-flow.w1 .kn-w.g1{animation:kn-draw 360ms var(--ease-in-out) var(--d,0s) both;}
  .js-kn .kn-flow.w1 .kn-p.g1{animation:kn-run 450ms var(--ease-in-out) calc(var(--d,0s) + .08s) both;}
  .js-kn .kn-flow.w1 .kn-port.g1{animation:kn-fade .2s var(--ease-out) var(--d,0s) both;}
  .js-kn .kn-flow.p3 .kn-w.g3{animation:kn-draw 360ms var(--ease-in-out) calc(var(--o3) + var(--d,0s)) both;}
  .js-kn .kn-flow.p3 .kn-p.g3{animation:kn-run 450ms var(--ease-in-out) calc(var(--o3) + var(--d,0s) + .08s) both;}
  .js-kn .kn-flow.p3 .kn-port.g3{animation:kn-fade .2s var(--ease-out) var(--o3) both;}
  .js-kn .kn-flow.ret .kn-r{animation:kn-run 450ms var(--ease-in-out) both;}
  .js-kn .kn-flow.p1 .kn-sig > .kn-c{animation:kn-in 360ms var(--ease-out) both;}
  .js-kn .kn-flow.p1 .kn-sig > .kn-c:nth-child(2){animation-delay:.06s}.js-kn .kn-flow.p1 .kn-sig > .kn-c:nth-child(3){animation-delay:.12s}.js-kn .kn-flow.p1 .kn-sig > .kn-c:nth-child(4){animation-delay:.18s}
  .js-kn .kn-flow.p2 .kn-f{animation:kn-in 360ms var(--ease-out) calc(var(--o2) + var(--k,0) * 60ms) both;}
  .js-kn .kn-flow.p3 .kn-s{animation:kn-in 360ms var(--ease-out) calc(var(--o3) + .1s + var(--k,0) * 60ms) both;}
  .js-kn .kn-flow.done .kn-loop{animation:kn-in 360ms var(--ease-out) .1s both;}
  .js-kn .kn-s.is-done .kn-done{animation:kn-fade .2s var(--ease-out) both;}
  .js-kn .kn-flow.done .kn-li.new{animation:kn-flash 1.2s ease-out both;}
}
@keyframes kn-draw{from{stroke-dashoffset:var(--len);}to{stroke-dashoffset:0;}}
@keyframes kn-run{from{stroke-dashoffset:18px;}to{stroke-dashoffset:calc(var(--len) * -1);}}
@keyframes kn-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes kn-fade{from{opacity:0;}to{opacity:1;}}
@keyframes kn-flash{from{background-color:#BFE6D7;}to{background-color:var(--u-teal-w);}}
/* below 1100 the three beats stack, each label a node on one line down the middle */
@media (max-width:1099px){
  .kn-flow{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:0;}
  .kn-lab.l1,.kn-lab.l2,.kn-lab.l3{grid-column:1;grid-row:auto;justify-self:center;margin:56px 0 16px;}
  .kn-lab.l1{margin-top:0;}
  .kn-sig,.kn-pro,.kn-out{grid-column:1;grid-row:auto;}
  .kn-sig{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;}
  .kn-sig > .kn-cv{order:1;}.kn-sig > .kn-sc{order:2;}
  .kn .kn-pro{width:100%;max-width:640px;justify-self:center;}
  .kn-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;}
  .kn-out .kn-s{flex-direction:column;align-items:flex-start;}
  .kn-out .kn-df{margin-top:auto;}
  .kn-loop{grid-column:1 / -1;margin-top:0;}
}
@media (max-width:759px){
  .kn{padding-top:72px;}
  .kn-stage{margin-top:32px;padding:28px 14px 16px;border-radius:var(--r-m);}
  .kn-lab.l1,.kn-lab.l2,.kn-lab.l3{margin:40px 0 14px;}
  .kn-lab.l1{margin-top:0;}
  .kn-sig,.kn-out{grid-template-columns:minmax(0,1fr);}
  .kn-sig > .kn-cv,.kn-sig > .kn-sc{order:0;}
  .kn .kn-c,.kn .kn-s{padding:12px 14px;}
  .kn .kn-pro{padding:16px 14px;gap:14px;}
  .kn-out .kn-s{flex-direction:row;align-items:center;}
  .kn-out .kn-df{margin-top:0;}
  .kn-kp b{font-size:21px;line-height:28px;}
  .kn-kp > div{padding:8px 10px;}
  .kn-li{grid-template-columns:76px minmax(0,1fr);}
  .kn-li > .sm:last-child{display:none;}
}

/* Workspace screens without the product sidebar: the step text already names the sub-areas */
.sys .side-nav{display:none !important;}

/* ---------- Workspace hub: full screens, a counter and progress, one small transition each time a step becomes active ---------- */
/* step text: counter, area, a short title and one or two lines */
.sys .pt .pk{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;font-size:13px;line-height:20px;}
.sys .pt .pn{color:var(--ink-2);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
.sys .pt .pa{color:var(--green);font-weight:500;}
html:not(.js-pin) .sys .pt .pn{display:none;}
.js-pin .sys .pin-step .pt h3{font-size:28px;line-height:1.16;letter-spacing:-0.028em;text-wrap:balance;}
.js-pin .sys .pin-step .pt p{margin-top:12px;font-size:16px;line-height:1.55;text-wrap:pretty;}
.js-pin .sys .pin-step .pt .pa{transition:color .2s ease;}
.js-pin .sys .pin-step:not(.on) .pt .pa{color:#5E6863;}
@media (max-width:1279px){.js-pin .sys .pin-step .pt h3{font-size:23px;}.js-pin .sys .pin-step .pt p{font-size:15px;}}
/* pinned: one window height for every screen, centred under the header; step spacing follows the window */
.js-pin .sys .pin-win{top:var(--pin-top,96px);}
.js-pin .sys .pin .win{height:var(--win-h,572px);min-height:0;}
.js-pin .sys .pin .win .bd{overflow:hidden;}
.js-pin .sys .pin-step{min-height:50vh;}
.js-pin .sys .pin-step:first-child{margin-top:max(0px,calc(var(--pin-h,620px) / 2 - 25vh));}
.js-pin .sys .pin-step:last-child{margin-bottom:max(0px,calc(var(--pin-h,620px) / 2 - 25vh));}
.sys .wprog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--u-teal);transform-origin:0 50%;transform:scaleX(var(--p,.2));transition:transform 280ms var(--ease-out);pointer-events:none;}
.win .mn{display:flex;flex-direction:column;min-height:0;}
.cdr .h .sm{margin-left:auto;font-weight:400;}
/* a status that changes: both states share one cell, the final one is the resting state */
.ui .sw{display:inline-grid;align-items:center;justify-items:end;}
.ui .sw > *{grid-area:1/1;}
.ui .sw .s0{opacity:0;}
.ui .sw.r{margin-left:auto;}
/* Today */
.tdy .tdh{display:flex;align-items:baseline;gap:12px;}
.tdy .tdh .sm{margin-left:auto;}
.tdy .tchat{margin-top:12px;}
.tdy .ha{padding:10px 14px;}
.tdy .q{margin-top:12px;flex:1 1 auto;display:flex;flex-direction:column;min-height:0;}
.tdy .qr{flex:1 1 0;min-height:44px;padding:6px 16px;}
.tdy .q .qh{padding:10px 16px;}
.tdy .cdr .sx-r .av{width:28px;height:28px;}
.cdr .sxi{width:28px;height:28px;flex:0 0 auto;display:grid;place-items:center;border-radius:8px;background:var(--u-teal-w);}
.cdr .sxi .ico{width:14px;height:14px;color:var(--u-teal);}
.tdy .cdr .in{margin-bottom:6px;}
.tdy .cdr .dis{padding:0 16px 12px;}
/* Creators */
.rec .who{margin-top:0;}
.rec .who > img{width:48px;height:48px;}
.rec .tabsx{margin-top:12px;}
.rec .kpis{margin-top:12px;}
.rec .kpis > div{padding:8px 12px;}
.rec .kpis b{font-size:20px;line-height:26px;}
.rec .cols{flex:1 1 auto;min-height:0;grid-template-columns:minmax(0,1fr) 270px;gap:12px;margin-top:12px;}
.rec .lcol{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;}
.rec .tl{flex:1 1 auto;min-height:0;overflow:hidden;}
.rec .tl .th{padding:10px 14px;}
.rec .tl .th .pill{height:24px;padding:0 10px;}
.rec .tl .th .pill.on{margin-left:8px;}
.rec .tl .row{padding:8px 14px;}
.rec .tl .row.new{background:var(--u-teal-w);box-shadow:inset 2px 0 0 var(--u-teal);}
.rec .sf{padding:12px 14px;flex:0 0 auto;}
.rec .sf .ring{align-items:flex-start;}
.rec .sf .ring svg{width:48px;height:48px;}
.rec .sf .sfh{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.rec .sf .sfh .ag{margin-left:auto;}
.rec .sf p{text-wrap:pretty;}
.rec .sxc{display:flex;flex-direction:column;}
.rec .sxc .sxh{padding-bottom:6px;}
.rec .sxc .sxh .ag{margin-left:auto;}
.rec .sxc .sx-r{padding:12px 0;}
.rec .sxc .sxf{margin-top:auto;padding-top:10px;border-top:1px solid var(--u-line);}
/* Campaigns */
.cmp-s .ch{display:flex;align-items:center;gap:8px;}
.cmp-s .ch > div:first-child{margin-right:auto;}
.cmp-s .ch .h4 .sm{font-weight:400;margin-left:2px;letter-spacing:0;}
.cmp-s .ch .sw.r{margin-right:8px;}
.cmp-s .stp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px;padding:14px 16px;}
.cmp-s .sn{position:relative;display:flex;flex-direction:column;gap:2px;padding-top:34px;min-width:0;}
.cmp-s .sn > .dot,.cmp-s .sn > .dsw{position:absolute;left:0;top:0;}
.cmp-s .dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;}
.cmp-s .dot.ok{background:var(--u-ok-w);}
.cmp-s .dot.ok .ico{width:13px;height:13px;color:var(--u-ok);stroke-width:2.4;}
.cmp-s .dot.att{background:var(--u-att-w);box-shadow:inset 0 0 0 1.5px var(--u-att-d);}
.cmp-s .sn:not(:last-child)::after{content:"";position:absolute;left:32px;right:-8px;top:11px;height:2px;border-radius:1px;background:#CFE8DA;}
.cmp-s .sn .st,.cmp-s .sn > .sw{margin-top:6px;}
.cmp-s .sn > .sw{justify-items:start;}
.cmp-s .c2{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;margin-top:12px;flex:1 1 auto;min-height:0;}
.cmp-s .hist{overflow:hidden;}
.cmp-s .hist .th{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--u-line);}
.cmp-s .hist .row{display:flex;gap:10px;align-items:center;padding:8px 14px;border-bottom:1px solid var(--u-line);}
.cmp-s .hist .row:last-child{border-bottom:0;}
.cmp-s .hist .row .av,.cmp-s .hist .row .avt{width:26px;height:26px;font-size:10px;}
.cmp-s .hist .row .t{min-width:0;}
.cmp-s .hist .row .t b,.cmp-s .hist .row .t .sm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmp-s .hist .row.new{background:var(--u-teal-w);box-shadow:inset 2px 0 0 var(--u-teal);}
.cmp-s .kit{margin-top:0;padding:12px 14px;display:flex;flex-direction:column;}
.cmp-s .kit .kh{display:flex;align-items:center;justify-content:space-between;}
.cmp-s .kit .kg{grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:10px;}
.cmp-s .kit .kg b{font-size:18px;line-height:24px;}
.cmp-s .kit .kn2{margin-top:auto;padding-top:8px;}
.cmp-s .sxp{margin-top:12px;}
.sxp .av3{display:flex;flex:0 0 auto;}
.sxp .av3 img{width:26px;height:26px;border-radius:50%;border:2px solid var(--u-teal-w);margin-right:-8px;object-fit:cover;}
.sxp .av3 img:last-child{margin-right:0;}
/* Studio: the portal publishes the campaign, Companion drafts the message on her channel */
.win .bd.stu{flex-direction:column;}
.stu .stb{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--u-line);background:#fff;}
.stu .stb .pill{height:26px;}
.stu .pb2{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:168px minmax(0,1fr) 300px;}
.stu .tree{border-right:1px solid var(--u-line);padding:12px 10px;background:#fff;}
.stu .tree .cap{padding:4px 8px 6px;}
.stu .tree .it + .cap{padding-top:14px;}
.stu .tree .it{display:flex;align-items:center;gap:8px;height:28px;padding:0 8px;border-radius:6px;color:var(--u-2);white-space:nowrap;}
.stu .tree .it .sm{margin-left:auto;}
.stu .tree .it.on{background:#EFEFEF;color:var(--u-ink);font-weight:500;}
.stu .tree .it.sub{padding-left:24px;}
.stu .tree .it.nw{color:var(--u-ink);}
.stu .tree .it.nw i{width:6px;height:6px;border-radius:50%;background:var(--u-teal);margin-left:auto;}
.stu .pv{background:var(--u-wash);padding:12px 16px 0;display:flex;flex-direction:column;align-items:center;min-width:0;overflow:hidden;}
.stu .pv .bar{align-self:stretch;display:flex;align-items:center;gap:4px;margin-bottom:12px;color:var(--u-2);}
.stu .pv .bar b{color:var(--u-ink);font-weight:500;}
.stu .pv .bar .r{margin-left:auto;display:flex;gap:6px;}
.stu .portal{max-width:320px;flex:1 1 auto;border-bottom:0;border-radius:12px 12px 0 0;}
.stu .portal .bl{margin:0 12px 10px;padding:10px 12px;}
.stu .portal .hl{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.stu .portal .cmpn > div{flex:1;min-width:0;}
.stu .portal .cmpn img{width:40px;height:48px;border-radius:6px;}
.stu .portal .cmpn.new{border-color:#B9DCD2;box-shadow:0 6px 16px rgba(16,105,94,.10);}
.stu .portal .prog i{width:100%;}
.stu .cdr{width:auto;min-width:0;border-left:1px solid var(--u-line);}
.dm .body{gap:10px;}
.dm .to{display:flex;align-items:center;gap:10px;}
.dm .to .t{flex:1;min-width:0;}
.dm .to .t b,.dm .to .t .sm{display:block;}
.dm .to .tag{gap:4px;background:var(--u-ok-w);color:var(--u-ok);}
.dm .to .tag .ico{width:12px;height:12px;color:var(--u-ok);}
.dm .bub{position:relative;background:var(--u-teal-w);border-radius:12px 12px 12px 4px;padding:10px 12px 8px;color:var(--u-ink);}
.dm .bub p{text-wrap:pretty;}
.dm .bub .bm{display:block;text-align:right;margin-top:4px;}
.dm .typ{position:absolute;left:12px;top:14px;display:flex;gap:4px;opacity:0;}
.dm .typ i{width:6px;height:6px;border-radius:50%;background:var(--u-teal);}
.dm .act{display:flex;gap:8px;}
.dm .act .bt{flex:1;justify-content:center;}
.dm .also{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--u-line);border-radius:10px;margin-top:auto;}
.dm .also .ico{flex:0 0 auto;}
.dm .also .t{flex:1;min-width:0;}
.dm .also .t b,.dm .also .t .sm{display:block;}
/* Analytics */
.rb .top{margin-top:0;gap:10px;}
.rb .top .h4 + .sm{margin-top:2px;}
.rb .fl{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.rb .fl .pill{height:28px;color:var(--u-2);}
.rb .fl .pill b{color:var(--u-ink);}
.rb .k3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px;}
.rb .k3 > div{padding:10px 14px;border-left:1px solid var(--u-line);}
.rb .k3 > div:first-child{border-left:0;}
.rb .k3 b{display:block;font-size:21px;line-height:28px;font-weight:600;letter-spacing:-0.02em;}
.rb .chart{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-top:12px;}
.rb .chart .chh{display:flex;align-items:center;gap:8px;}
.rb .chart svg{flex:1 1 auto;min-height:0;}
.ins .body{gap:12px;}
.ins .ib{padding:12px;border:1px solid var(--u-line);border-radius:10px;}
.ins .ib b{display:block;margin-bottom:4px;text-wrap:pretty;}
.ins .ib p{text-wrap:pretty;}
.ins .sug{padding:10px 12px;border-radius:10px;background:var(--u-teal-w);color:var(--u-teal);font-weight:500;text-wrap:pretty;}
.ins .act{display:flex;gap:8px;}
.ins .fn{margin-top:auto;}
.ins sup{font-size:9px;color:var(--u-teal);margin-left:1px;}
/* narrower windows: the agent panels stay, the least important detail gives way */
@container scr (max-width:900px){
  .rec .kpis{grid-template-columns:repeat(4,minmax(0,1fr));}
  .rec .kpis > div:nth-child(4){border-left:1px solid var(--u-line);}
  .rec .kpis > div:nth-child(n+4){border-top:0;}
  .rec .kpis > div:nth-child(n+5){display:none;}
  .stu .pb2{grid-template-columns:minmax(0,1fr) 270px;}
  .stu .tree{display:none;}
  .ins{width:250px;}
  .cmp-s .ch .bt{display:none;}
}
@container scr (max-width:760px){
  .sys .rec .cols{grid-template-columns:minmax(0,1fr) 230px;}
  .rec .kpis{grid-template-columns:repeat(3,minmax(0,1fr));}
  .rec .kpis > div:nth-child(n+4){display:none;}
  .rec .tl .row{grid-template-columns:76px minmax(0,1fr);}
  .rec .tl .row .lk,.rec .tl .th .pill:not(.on){display:none;}
  .rec .sf .sfh .ag{display:none;}
  .stu .pb2{grid-template-columns:minmax(0,1fr) 250px;}
  .stu .pv{padding:12px 10px 0;}
  .stu .pv .bar .r{display:none;}
  .stu .stb .pill:not(.on),.stu .stb > .bt{display:none;}
  .rb .fl .pill:nth-child(n+3){display:none;}
  .rb .top .act .bt:not(.pri){display:none;}
  .ins{width:230px;}
  .cmp-s .c2{grid-template-columns:minmax(0,1fr) 190px;}
}
@container scr (max-width:520px){
  .sys .rec .cols{grid-template-columns:1fr;}
  .rec .tl .row:nth-child(n+5){display:none;}
  .win .bd.an,.stu .pb2{display:flex;flex-direction:column;}
  .stu .pv{display:none;}
  .stu .cdr,.ins{width:auto;border-left:0;border-top:1px solid var(--u-line);}
  .cmp-s .stp{grid-template-columns:1fr;gap:12px;}
  .cmp-s .sn{padding:0 0 0 36px;}
  .cmp-s .sn::after{display:none;}
  .cmp-s .sn > .st,.cmp-s .sn > .sw{margin-top:2px;}
  .cmp-s .c2{grid-template-columns:1fr;}
  .cmp-s .hist .row:nth-child(n+4){display:none;}
  .rb .k3 > div:nth-child(3){display:none;}
  .rb .k3{grid-template-columns:1fr 1fr;}
  .ins .fn{margin-top:4px;}
}
/* one transition each time a step becomes active (home.js adds .play to the active screen only; final states are the markup) */
@media (prefers-reduced-motion:no-preference){
  .js-pin .sys .pnl.play .a-row{animation:hub-land .32s var(--ease-out) backwards;animation-delay:calc(.1s + var(--i,0) * 40ms);}
  .js-pin .sys .pnl.play .a-up{animation:hub-land .32s var(--ease-out) backwards;animation-delay:calc(var(--d,.2s) * .6);}
  .js-pin .sys .pnl.play .a-pop{animation:hub-pop .24s var(--ease-out) .03s backwards;}
  .js-pin .sys .pnl.play .a-new{animation:hub-new .4s var(--ease-out) backwards;animation-delay:calc(var(--d,.8s) * .55);}
  .js-pin .sys .pnl.play .sw .s0{animation:hub-out .2s var(--ease-out) both;animation-delay:var(--sw,.55s);}
  .js-pin .sys .pnl.play .sw .bt.s0{animation-name:hub-press;animation-duration:.26s;}
  .js-pin .sys .pnl.play .sw .s1{animation:hub-in .24s var(--ease-out) backwards;animation-delay:calc(var(--sw,.55s) + .1s);}
  .js-pin .sys .pnl.play .a-type{animation:hub-in .28s var(--ease-out) backwards;animation-delay:calc(var(--d,1s) * .6);}
  .js-pin .sys .pnl.play .typ{animation:hub-typ .62s linear .05s both;}
  .js-pin .sys .pnl.play .typ i{animation:hub-dot .28s ease-in-out .05s 2 alternate both;}
  .js-pin .sys .pnl.play .typ i:nth-child(2){animation-delay:.13s;}
  .js-pin .sys .pnl.play .typ i:nth-child(3){animation-delay:.21s;}
  .js-pin .sys .pnl.play .arc{animation:hub-arc .6s var(--ease-out) .1s backwards;}
  .js-pin .sys .pnl.play .ln{animation:hub-line .6s var(--ease-in-out) .12s backwards;}
  .js-pin .sys .pnl.play .dts circle{animation:hub-in .2s var(--ease-out) .66s backwards;}
}
@keyframes hub-land{from{opacity:0;transform:translateY(8px);}}
@keyframes hub-pop{from{opacity:0;transform:translateY(6px) scale(.97);}}
@keyframes hub-new{from{opacity:0;transform:translateY(-6px);background-color:#CDEBE2;}}
@keyframes hub-out{from{opacity:1;}to{opacity:0;}}
@keyframes hub-press{0%{opacity:1;transform:scale(1);}45%{opacity:1;transform:scale(.94);}100%{opacity:0;transform:scale(.94);}}
@keyframes hub-in{from{opacity:0;}}
@keyframes hub-typ{0%,88%{opacity:1;}100%{opacity:0;}}
@keyframes hub-dot{from{opacity:.35;transform:none;}to{opacity:1;transform:translateY(-2px);}}
@keyframes hub-arc{from{stroke-dasharray:0 150.8;}}
@keyframes hub-line{from{stroke-dasharray:1 1;stroke-dashoffset:1;}to{stroke-dasharray:1 1;stroke-dashoffset:0;}}
.cdr > .dis{padding:0 16px 12px;}
.ins .nx{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:var(--u-wash);margin-top:auto;}
.ins .nx b{font-weight:500;}
.ins .fn{margin-top:0;}
.cmp-s .sn .sw .st{margin-top:0;}
.cmp-s .sn > .dsw{margin-top:0;width:24px;height:24px;}
@container scr (max-width:760px){
  .rec .sf{display:none;}
  .rec .tl .row:nth-child(n+6){display:none;}
  .rb .chart svg text{font-size:15px;}
  .rb .chart svg text.y0{display:none;}
  .rb .chart svg text.o{display:none;}
  .ins .act{flex-wrap:wrap;}
  .ins .ib p sup + *{display:none;}
  .ins .fn{display:none;}
}
@container scr (max-width:760px){
  .sys .rec .cols{grid-template-columns:minmax(0,1fr) 250px;}
  .rec .tl .row:nth-child(6){display:grid;}
  .rec .sxc .sxh .ag{display:none;}
  .rec .sxc .sx-r{padding:10px 0;}
}
.tdy .qr{flex:1 0 auto;}
@container scr (max-width:520px){.tdy .tdh .sm{display:none;}}


/* Companion chat: the answer as three sourced items with actions */
.cdr .cx{display:flex;flex-direction:column;gap:8px;}
.cdr .cx .cl{color:var(--u-ink);}
.cdr .cx .ci{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px var(--u-line),0 1px 2px rgba(0,0,0,.03);}
.cdr .cx .cd{flex:0 0 auto;width:7px;height:7px;margin-top:6px;border-radius:50%;background:var(--u-teal);}
.cdr .cx .cd.att{background:var(--u-att-d);}
.cdr .cx .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cdr .cx .t b{font-weight:500;color:var(--u-ink);}
.cdr .cx .t span{font-size:12px;line-height:16px;color:var(--u-3);font-variant-numeric:tabular-nums;}
.cdr .cx .cbar{display:block;height:3px;margin-top:6px;border-radius:2px;background:var(--u-line);overflow:hidden;}
.cdr .cx .cbar i{display:block;width:73%;height:100%;border-radius:inherit;background:var(--u-teal);}
.cdr .cx .cs{flex:0 0 auto;align-self:center;font-size:11px;line-height:16px;color:var(--u-teal);background:var(--u-teal-w);border-radius:6px;padding:2px 7px;white-space:nowrap;font-weight:500;}
.cdr .cx .cact{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px;}
.cdr .cx .cbn{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;font-size:12px;font-weight:500;color:var(--u-ink);background:#fff;box-shadow:inset 0 0 0 1px var(--u-in);}
.cdr .cx .cbn.pri{background:var(--u-teal);color:#fff;box-shadow:none;}
.cdr.dm .h .ico{width:14px;height:14px;color:var(--u-teal);}

/* ---------- Emil pass: polish ---------- */
/* hero, wide: the analytics and record cards end on the page gutter, like the header's button */
@container comp (min-width:701px){.ana,.crm{left:auto;right:0;}.crm{width:240px;}}
.ana .big .tag{letter-spacing:0;}
/* the hero line breaks on the comma: Every creator / relationship, / in one place. */
.hero h1{text-wrap:balance;}
/* press feedback on the real controls */
.sys .tab{transition:background-color .15s ease,color .15s ease,transform 140ms var(--ease-out);}
.lnk{transition:color .16s ease,text-decoration-color .16s ease,transform 140ms var(--ease-out);}
.sys .wbar button.tab:active,.sys .wbar a.tab:active,.lnk:active{transform:scale(.97);}
.btn{transition:background-color .16s ease,transform 140ms var(--ease-out);}

/* ---------- Emil pass: phones feel native ---------- */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
a,button,[role="tab"]{touch-action:manipulation;}
@media (pointer:coarse){
  .lnk{min-height:44px;}
}
@media (max-width:759px){
  /* mock UI text keeps a 12 px floor, captions a 15 px floor */
  .ui .cap,.ui .ag,.scope .ai,.cdr .cx .cs{font-size:12px;}
  .kn-cap,.proof .note{font-size:15px;}
}

/* ---------- Emil pass: phone layouts, designed rather than stacked (desktop untouched) ---------- */
/* rhythm on phones: sections 64 px top and bottom, heading block to content 28 px, inside a group 10 to 16 px */
@media (min-width:760px){.sys-row{display:contents;}}
.snap-ct{display:none;}
@media (max-width:759px){
  .kn{padding:64px 0;}
  .sys,.cmpn-s,.proof,.xp,.dk{padding:64px 0;}
  .hd2{gap:14px;}
  .h2{text-wrap:balance;}
  /* sideways rows: one card and the edge of the next, a count under the row */
  .snap-x{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .snap-x::-webkit-scrollbar{display:none;}
  .snap-x > *{flex:0 0 calc(100% - 44px);min-width:0;scroll-snap-align:start;}
  .snap-ct.on{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-top:12px;font-size:13px;line-height:20px;color:var(--ink-2);font-variant-numeric:tabular-nums;}
  /* logos: the label above a full-width row, smaller cells so two or three logos are always in view, same speed (16 px/s) */
  .logos{padding-top:40px;}
  .logos .row{flex-direction:column;align-items:stretch;gap:4px;}
  .logos .lab{width:auto;white-space:nowrap;text-align:center;font-size:13px;}
  .logos [data-m="marquee"]{flex:0 0 auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
  .logos .lg{width:132px;height:52px;padding:0 16px;}
  .logos .lg img{max-width:100px;}
  .logos .track{animation-duration:80s;}
  /* hero: headline, the call to action, then the reel and its decision */
  .hero .in{padding-top:calc(88px + env(safe-area-inset-top, 0px));padding-bottom:28px;}
  .hero .figs{margin-top:24px;}
  .scene.comp{margin-top:28px;}
  .post .fh .tag,.post .scs{display:none;}
  .cw .rev{margin-top:-10px;}
  /* know every creator */
  .kn-stage{margin-top:28px;padding:24px 12px 12px;}
  .kn-lab.l1,.kn-lab.l2,.kn-lab.l3{margin:28px 0 12px;}
  .kn-lab.l1{margin-top:0;}
  .kn-sig,.kn-out{gap:10px;}
  /* workspace: three screens in one sideways row, each with its own text above its window */
  /* 64 px below each row is room for the card shadows (a scroller clips both axes), taken back by the negative margin */
  .sys-row{margin:28px calc(var(--gut) * -1) -64px;padding:0 var(--gut) 64px;scroll-padding-inline:var(--gut);align-items:flex-start;}
  .sys-row > .stage,.sys-row > .stage.st2{margin:0;padding:0;background:none;border-radius:0;min-height:0;}
  .sys .pnl .pt{margin-bottom:16px;}
  .sys .pt p{margin-top:6px;}
  /* each screen keeps the panel that carries its point; the row is as tall as its tallest card */
  .sys-row .cmp-s .hist,.sys-row .ins .nx,.sys-row .rb .fl{display:none;}
  .sys-row .tdy .qr .ic,.sys-row .tdy .qr .ic.av3{width:40px;}
  .sys-row .tdy .qr .t b{column-gap:6px;}
  .sys-row .tdy .qr .t b .ag{margin-left:0;}
  .sys-row .cmp-s .c2{grid-template-columns:1fr;}
  /* Companion: the answer and its sources, without the empty input box and tab strip */
  .cmpn-s .grid{margin-top:28px;gap:12px;}
  .cmpn-s .tilex{gap:18px;}
  .cmpn-s .tilex > .cdr .tbs,.cmpn-s .tilex > .cdr > .in{display:none;}
  .pwr{margin-top:12px;}
  .pwr-g li{padding-top:14px;padding-bottom:10px;}
  .pwr-g span{font-size:14px;margin-top:4px;}
  .ful{margin-top:32px;}
  /* proof, trust, closing */
  .proof .h2{margin-top:14px;}
  .proof .stats{margin-top:32px;}
  .dk .top{gap:28px;}
  .dk li{padding:16px 0;}
  .cta .card{padding:44px 20px;gap:24px;}
}

/* ---------- Calm phones: one focal point per section, about one screen each (desktop untouched) ---------- */
@media (max-width:759px){
  /* one profile: the three beats as one sideways row of three cards, the next card peeking, a count under the row */
  .kn-stage{padding:22px 14px 14px;}
  .kn-flow{grid-template-columns:none;grid-template-rows:auto 1fr;grid-auto-flow:column;grid-auto-columns:calc(100% - 30px);column-gap:10px;row-gap:0;margin:0 -14px -24px;padding:0 14px 24px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:14px;scrollbar-width:none;}
  .kn-flow::-webkit-scrollbar{display:none;}
  .kn-wires{display:none;}
  .kn-lab.l1,.kn-lab.l2,.kn-lab.l3{grid-row:1;justify-self:start;margin:0 0 12px;}
  .kn-lab.l1{grid-column:1;}.kn-lab.l2{grid-column:2;}.kn-lab.l3{grid-column:3;}
  .kn-sig,.kn-pro,.kn-out{grid-row:2;min-width:0;scroll-snap-align:start;}
  .kn-sig{grid-column:1;}.kn-out{grid-column:3;align-self:stretch;}
  .kn .kn-pro{grid-column:2;width:auto;max-width:none;justify-self:stretch;}
  /* beats one and three: one white card each, the parts divided by hairlines */
  .kn-sig,.kn-out{display:flex;flex-direction:column;gap:0;padding:2px 14px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(2,14,10,.28),0 18px 40px -18px rgba(2,14,10,.65);}
  .kn .kn-sig > .kn-c,.kn .kn-out > .kn-s,.kn .kn-out > .kn-s.is-done{padding:12px 0;border-radius:0;background:none;box-shadow:none;}
  .kn .kn-sig > .kn-c + .kn-c,.kn .kn-out > .kn-s + .kn-s{box-shadow:0 -1px 0 var(--u-line);}
  .kn-sc .ag,.kn-sc .kn-sh > .sm,.kn-s .ag{display:none;}
  .kn-sc{gap:10px;}
  .kn-sc .kn-i{width:28px;height:28px;}
  .kn-chr{height:30px;}
  .kn-bub{margin:6px 0 8px;}
  .kn-out .kn-s{flex-direction:row;align-items:center;}
  .kn-out .kn-loop{margin:auto -14px -2px;padding:12px 14px;border-radius:0 0 16px 16px;}
  /* beat two: her profile, four scores, where she talks and the two latest lines */
  .kn .kn-pro{gap:14px;}
  .kn-pro .kn-row + .kn-row,.kn-pro .kn-nt{display:none;}
  .kn-kp{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kn-kp > .kn-k4{display:flex;}
  .kn-kp > div,.kn-kp > div:first-child{box-shadow:none;}
  .kn-kp > div:nth-child(2n){box-shadow:-1px 0 0 var(--u-line);}
  .kn-kp > div:nth-child(n+3){border-top:1px solid var(--u-line);}
  .kn-win{height:72px;}
  .kn-li:nth-child(n+4){display:none;}
  .kn-stage > .snap-ct.on{margin-top:2px;padding-right:2px;color:var(--on-dark-2);}
  /* each card plays fast when it comes into the row */
  .js-kn .kn-flow.p1 .kn-sig > .kn-c,.js-kn .kn-flow.p2 .kn-f,.js-kn .kn-flow.p3 .kn-s,.js-kn .kn-flow.done .kn-loop{animation-duration:260ms;}
  /* workspace: each screen keeps its focal moment; the step is its name and headline (the longer line stays for screen readers) */
  /* the hidden line is positioned inside its own step, so it never adds width to the page from a card off to the side */
  .sys .pnl .pt{position:relative;}
  .sys .pnl .pt p{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .sys-row .tdy .tdh .sm,.sys-row .tdy .qr .t .sm,.sys-row .tdy .qr:nth-child(n+5){display:none;}
  .sys-row .rec .tabsx,.sys-row .rec .cols,.sys-row .rec .kpis > div:nth-child(3),.sys-row .rec .kpis > div:nth-child(4){display:none;}
  .sys-row .stu .stb,.sys-row .dm .also{display:none;}
  .sys-row .cmp-s .c2,.sys-row .cmp-s .sxp,.sys-row .cmp-s .stp .sn > .sm{display:none;}
  .sys-row .rb .k3,.sys-row .rb .src,.sys-row .ins .cap{display:none;}
  /* Companion: the chat answer and a compact row of its agents; the scopes tile keeps its words for screen readers only */
  .cmpn-s .grid{gap:0;}
  .cmpn-s .tilex{position:relative;padding:0;background:none;border-radius:0;}
  .cmpn-s .tilex > div:not(.cdr):not(.card){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .cmpn-s .tilex > .cdr .h .sm{display:none;}
  .pwr{margin-top:16px;padding:18px 16px;}
  .pwr-n{font-size:18px;}
  .pwr-g{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;border-top:0;}
  .pwr-g li,.pwr-g li + li{padding:0;}
  .pwr-g li::before{display:none;}
  .pwr-g b{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:14px;}
  .pwr-g span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  /* hero: two checks on the review card, not four */
  .cw .rev .req li:nth-child(n+3){display:none;}
  /* experts: the three ways and fulfilment as plain text under the team card, not two more tiles */
  .xp-ways{padding:0;border-radius:0;background:none;}
  .xp .ful{padding:18px 0 0;border-radius:0;background:none;box-shadow:0 -1px 0 var(--line);}
}

/* Experts team: real faces; Odore specialists carry a green ring, the agency partner a neutral chip */
.ui .avt.has-img{background:none;overflow:hidden;padding:0;}
.ui .avt.has-img img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover;outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;}
.xp .avt.od.has-img{box-shadow:0 0 0 2px #fff,0 0 0 3.5px var(--green);}
.xp-ag{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;background:var(--u-wash);color:var(--u-2);font-size:12px;font-weight:500;}

/* ---------- Fresh-eyes fixes ---------- */
/* fulfilment line under the experts: a small heading of its own */
.ful .cap{display:block;margin-bottom:4px;font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--green);}
/* each phone card's static app bar exists only for the five-card row */
.sys .pbar{display:none;}
@media (max-width:759px){
  /* workspace: five cards in one sideways row (Today, Creators, Campaigns, Studio, Analytics), each sized to its content */
  .sys-row > .stage:first-child{display:contents;}
  .sys-row > .stage:first-child > .wbar{display:none;}
  .sys .sys-row .pnl.ws-card[hidden]{display:flex !important;}
  .sys-row .ws-card{flex:0 0 calc(100% - 44px);min-width:0;scroll-snap-align:start;}
  .sys-row #pnl-today{order:1;}.sys-row #pnl-creators{order:2;}.sys-row > .stage.st2{order:3;}.sys-row #pnl-studio{order:4;}.sys-row > .stage.st2:last-child{order:5;}
  .sys .sys-row .pbar{display:flex;}
  /* home.js clips the row under the card in view to the card plus 5 px each side (taller cards beside it stop level with it), so the window shadow is drawn in under the card and stays inside that strip */
  .sys-row .app.win{box-shadow:0 12px 20px -12px rgba(12,38,30,.18);}
  /* the app bars in the phone cards are pictures of the product, not controls */
  .sys-row .wbar{pointer-events:none;}
  .sys-row .wbar .tab .l{display:none;}
  .sys-row .wbar .tab.on .l{display:inline;}
  .sys-row .wbar .tab:not(.on){padding:0 9px;}
  /* Today: all six queues, so the rows add up to the total */
  .sys-row .tdy .qr:nth-child(n+5){display:flex;}
  /* each card keeps one focal moment: Today the queue, Creators the profile and Companion's suggestions, Analytics the trend and its finding */
  .sys-row .tdy .tchat{display:none;}
  .sys-row .rec .cols{display:block;}
  .sys-row .rec .lcol,.sys-row .rec .sxc .sxf{display:none;}
  .sys-row .rec .kpis,.sys-row .ins .ib{display:none;}
  .sys-row .cmp-s .sxp{display:flex;}
  .sys-row .cmp-s .sxp .ag{margin-left:0;}
  .sys-row .cmp-s .sxp > .av3,.sys-row .cmp-s .sxp .t > .sm,.sys-row .cmp-s .ch .crumb{display:none;}
  /* each card is as tall as its content; home.js sets the row to the visible card's height, so the count sits right under it */
  .sys-row{align-items:flex-start;}
  .sys .sys-row .pnl.ws-card{display:flex !important;flex-direction:column;}
  .sys-row > .stage.st2{grid-template-rows:auto auto auto;align-content:start;}
  /* Analytics: the axis labels are too small to read at this size; the card names the chart and its window */
  .sys-row .chart svg text{display:none;}
  /* logos under reduced motion: every logo in a still, wrapped grid */
  /* experts: all four people and all three lines of activity, as the caption describes */
  .xp-m.xp-x,.xp-a.xp-x{display:flex;}
  /* one profile, third card: as tall as its content, the loop note directly under the suggestions */
  .kn-out{align-self:start;}
  .kn-out .kn-loop{margin:2px -14px -2px;}
}
@media (max-width:759px) and (prefers-reduced-motion:reduce){
  .logos [data-m="marquee"]{-webkit-mask-image:none;mask-image:none;}
  .logos .track{display:flex;flex-wrap:wrap;justify-content:center;width:auto;padding:0 var(--gut);transform:none;}
  .logos .lg{width:33.333%;height:48px;padding:0 8px;}
  .logos .lg img{max-width:88px;}
  .logos .lg[aria-hidden="true"]{display:none;}
}

/* ---------- Re-check fixes ---------- */
/* pinned workspace at 1024 to 1099: the window is narrower, so the bar drops the search icon and the account avatar and keeps Companion whole */
@media (min-width:1024px) and (max-width:1099px){
  .js-pin .pin-win .wbar .srch,.js-pin .pin-win .wbar .me{display:none;}
  .js-pin .pin-win .wbar .cmp{margin-left:auto;flex-shrink:0;}
}
@media (max-width:759px){
  /* sideways rows follow the visible card's height (home.js); the row never scrolls up and down */
  .snap-x,.kn-flow{overflow-y:hidden;}
  .snap-x[style*="height"],.kn-flow[style*="height"]{transition:height .26s cubic-bezier(.2,.8,.2,1);}
  /* one profile: each of the three cards as tall as its content */
  .kn-flow{grid-template-rows:auto auto;align-content:start;}
  .kn-sig,.kn .kn-pro{align-self:start;}
}
@media (max-width:759px) and (prefers-reduced-motion:reduce){
  .snap-x[style*="height"],.kn-flow[style*="height"]{transition:none;}
}

/* Handover links: the workspace tiles to /platform, the three ways to /specialists */
.sys-more{margin-top:32px;}
.xp-side{display:flex;flex-direction:column;gap:16px;min-width:0;}
.xp-side .xp-ways{flex:1 1 auto;}
.xp-side .lnk{align-self:flex-start;}
@media (max-width:759px){.sys-more{margin-top:24px;}.xp-side{gap:8px;}}

/* ---------- Swipe rows, the same everywhere on phones: 50 px of the next card, the row to the screen edge, "1 of N" with dots ---------- */
@media (max-width:759px){
  /* one dot per card under the count, the one in view filled (currentColor, so the dark stage's lighter count carries over) */
  .snap-ct .d{display:flex;align-items:center;gap:5px;}
  .snap-ct .d i{width:6px;height:6px;border-radius:3px;background:currentColor;opacity:.3;transition:width .2s var(--ease-out),opacity .2s var(--ease-out);}
  .snap-ct .d i.on{width:16px;opacity:1;}
  .snap-x:focus-visible{outline-offset:-2px;}
  /* one profile: the dark stage runs edge to edge so its row does too; cards line up with the page text */
  .kn-stage{margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1);padding-left:var(--gut);padding-right:var(--gut);border-radius:0;}
  .kn-flow{grid-auto-columns:calc(100% - 44px);margin:0 calc(var(--gut) * -1) -24px;padding:0 var(--gut) 24px;scroll-padding-inline:var(--gut);}
}
@media (max-width:759px) and (prefers-reduced-motion:reduce){
  .snap-ct .d i{transition:none;}
}

/* ---------- Fix round, 4 Oct ---------- */
/* workspace below the pinned layout (760 to 1023 px, and any width with reduced motion or no script): all five screens, stacked
   in the product's order, each in its own tile with its own static top bar (the phone row's order and bars) */
@media (min-width:760px){
  html:not(.js-pin) .sys .sys-row{display:flex;flex-direction:column;gap:24px;margin-top:56px;}
  html:not(.js-pin) .sys-row > .stage:first-child{display:contents;}
  html:not(.js-pin) .sys-row > .stage:first-child > .wbar{display:none;}
  html:not(.js-pin) .sys .sys-row > .stage.st2{margin-top:0;}
  html:not(.js-pin) .sys .sys-row .pnl.ws-card,html:not(.js-pin) .sys .sys-row .pnl.ws-card[hidden]{display:grid !important;grid-template-columns:minmax(0,300px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"pt bar" "pt scr";column-gap:40px;align-items:start;padding:40px;border-radius:var(--r-l);background:var(--tile);}
  html:not(.js-pin) .sys .sys-row .pbar{display:flex;}
  html:not(.js-pin) .sys-row #pnl-today{order:1;}html:not(.js-pin) .sys-row #pnl-creators{order:2;}html:not(.js-pin) .sys-row > .stage.st2{order:3;}html:not(.js-pin) .sys-row #pnl-studio{order:4;}html:not(.js-pin) .sys-row > .stage.st2:last-child{order:5;}
}
@media (min-width:760px) and (max-width:1099px){
  html:not(.js-pin) .sys .sys-row .pnl.ws-card,html:not(.js-pin) .sys .sys-row .pnl.ws-card[hidden]{grid-template-columns:1fr;grid-template-areas:"pt" "bar" "scr";padding:28px;}
}
/* workspace bars below 1024 px: no search icon, so five tabs, Companion and the avatar fit the window */
@media (max-width:1023px){
  .sys .wbar .srch{display:none;}
  .sys .wbar .cmp{margin-left:auto;}
}
/* Companion: an agent proposal under the scopes, as on /platform */
.cmpn-s .sc-fig{display:flex;flex-direction:column;gap:12px;}
.cmpn-s .hprop{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--u-line);border-radius:var(--r-m);background:#fff;box-shadow:var(--sh-2);}
.hprop .av{width:36px;height:36px;}
.hprop .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.hprop .t > .sm:first-child{display:flex;align-items:center;gap:8px;}
.hprop .t b{font-size:14px;font-weight:600;}
.hprop .k{color:var(--u-teal);font-weight:500;font-size:12px;}
.hprop .ag{margin-left:0;}
.hprop .done{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;color:var(--u-ok);font-weight:500;font-size:12px;}
.hprop .done i{width:18px;height:18px;border-radius:50%;background:var(--u-ok);display:grid;place-items:center;}
.hprop .done svg{width:11px;height:11px;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
/* one profile, wide: the profile card sizes to its content and sits level with the middle of the signals, so no gap opens above its latest lines */
@media (min-width:1100px){
  .kn .kn-pro{align-self:center;}
  .kn-tl{margin-top:0;}
}
/* hero figures on the smallest phones: room between the three, and each label wraps under its number */
@media (max-width:379px){
  .hero .figs{gap:20px;}
  .hero .figs div{max-width:9ch;}
}
/* Companion on phones: the chat and the scopes as a two-card swipe row (1 of 2), each with its heading, then each agent with its one job */
@media (max-width:759px){
  .cmpn-s .grid.snap-x{display:flex;gap:10px;margin:28px calc(var(--gut) * -1) 0;padding:0 var(--gut) 20px;scroll-padding-inline:var(--gut);align-items:flex-start;}
  .cmpn-s .grid.snap-x > .tilex{flex:0 0 calc(100% - 44px);gap:14px;}
  .cmpn-s .tilex > div:not(.cdr):not(.card){position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;}
  .cmpn-s .tilex h3{font-size:20px;}
  .cmpn-s .tilex p{font-size:15px;line-height:1.5;}
  .cmpn-s .tilex > .sc-fig .scope{display:block;}
  .cmpn-s .scope .sh .r,.cmpn-s .scope .ai,.cmpn-s .scope .sh2,.cmpn-s .scope .sh2 ~ .sr,.cmpn-s .scope .sr3{display:none;}
  .cmpn-s .scope .sr{flex-wrap:wrap;gap:8px 10px;padding:10px 12px;}
  .cmpn-s .scope .sr .t{flex:1 1 100%;}
  .cmpn-s .scope .sr .lock,.cmpn-s .scope .sr .seg{white-space:nowrap;}
  .cmpn-s .scope .sr .lock,.cmpn-s .scope .sr .seg{margin-left:0;}
  .cmpn-s .scope .sr .t .sm{display:block;}
  .cmpn-s .scope .lock{font-size:12px;padding:4px 8px;}
  .cmpn-s .hprop{flex-wrap:wrap;padding:14px;}
  .cmpn-s .hprop .t{flex-basis:calc(100% - 48px);}
  .cmpn-s .hprop .done{margin-left:48px;}
  .cmpn-s .grid.snap-x + .snap-ct.on{margin-top:0;}
  .pwr-g{display:block;margin-top:10px;}
  .pwr-g li,.pwr-g li + li{display:block;padding:12px 0;border-top:1px solid rgba(255,255,255,.14);}
  .pwr-g li:first-child{border-top:0;}
  .pwr-g b{display:block;height:auto;padding:0;border-radius:0;background:none;box-shadow:none;font-size:15px;line-height:20px;}
  .pwr-g span{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;margin-top:2px;font-size:14px;line-height:20px;}
}
@media (max-width:759px){
  /* a smaller canvas takes a shorter shadow, so it fades out inside the row's 20 px of room */
  .cmpn-s .grid.snap-x .cdr,.cmpn-s .grid.snap-x .scope.card.ui,.cmpn-s .grid.snap-x .hprop{box-shadow:0 0 0 1px rgba(20,32,27,.05),0 6px 16px rgba(12,38,30,.08);}
}