:root{
  --bg:#fff; --mint:#eef7f1; --mint-2:#e2f0e7; --deep:#0b3d24; --deep-2:#0f4a2c; --deep-3:#082e1b;
  --ink:#0f1f17; --ink-2:#2e4237; --muted:#5a6e62; --rule:#d5e4da; --rule-2:#b9d3c3;
  --accent:#00963b; --accent-ink:#007a30; --accent-dk:#5fd68e;
  --on-dark:#fff; --on-dark-2:#b5d3c1; --on-dark-3:#8db9a0; --dark-rule:#2a5a40; --dark-track:#1c5236;
  --f-head:"Poppins","Helvetica Neue",Arial,sans-serif;
  --f-body:"Bitter",Georgia,serif;
  --gut:clamp(16px,4vw,56px); --max:1320px; --nav:64px;
  --sec:clamp(80px,9vw,136px); --head-gap:clamp(40px,5vw,72px);
  --ease:cubic-bezier(.16,1,.3,1); --ease-exit:cubic-bezier(.4,0,1,1); --ease-inout:cubic-bezier(.65,0,.35,1);
  --dur-1:160ms; --dur-2:420ms; --dur-3:900ms;
  --rise:8px; --lift:-6px; --stagger:40ms; --lag:60ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--nav)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--deep);color:#fff}
html{scrollbar-color:var(--rule-2) transparent}
body{caret-color:var(--accent)}
a{text-underline-offset:.2em;text-decoration-thickness:1px}
a{color:inherit;text-decoration:none}
p,ol,ul{margin:0}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-family:var(--f-head);font-weight:700;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--accent)}
.mint h2 em{color:var(--accent-ink)}
h2{font-size:clamp(32px,4.2vw,60px);max-width:15em}
h3{font-size:clamp(23px,2.2vw,32px);letter-spacing:-.025em;line-height:1.1}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.tn,.n{font-variant-numeric:tabular-nums}
[data-to]{display:inline-block}
.n{font-family:var(--f-head);font-weight:700;letter-spacing:-.04em;line-height:.95}
.nw{white-space:nowrap}
.art{mix-blend-mode:multiply}
.ill{font-family:var(--f-head);font-weight:500;font-size:12.5px;color:var(--muted)}
.lede{margin-top:18px;font-size:clamp(17px,1.35vw,20px);color:var(--ink-2);max-width:34em}
.sm-label{font-family:var(--f-head);font-weight:600;font-size:14px;line-height:1.3;color:var(--ink)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--deep);outline-offset:3px;border-radius:4px}

/* section bands: white and mint alternate, deep green for the example and the close */
.sec{padding:var(--sec) 0}
.sec.mint{background:var(--mint)}
.sec.ruled{border-top:1px solid var(--rule)}
.dark{background:var(--deep);color:var(--on-dark)}
.dark .lede{color:var(--on-dark-2)}
.dark .ill{color:var(--on-dark-2)}
.dark a:focus-visible,.dark button:focus-visible,.dark [tabindex]:focus-visible{outline-color:var(--on-dark)}
.sec-head + *{margin-top:var(--head-gap)}

/* nav */
.fl-nav{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--rule)}
.fl-nav .wrap{display:flex;align-items:center;justify-content:space-between;height:calc(var(--nav) - 1px);gap:20px}
.mark img{height:28px;width:auto}
.fl-nav ul{list-style:none;padding:0;display:flex;align-items:center;gap:28px;font-family:var(--f-head);font-weight:500;font-size:14px}
.fl-nav ul a:not(.btn){color:var(--ink-2);transition:color var(--dur-1) var(--ease)}
.fl-nav ul a:not(.btn):hover{color:var(--accent-ink)}
.btn{display:inline-flex;align-items:center;height:50px;padding:0 24px;font-family:var(--f-head);font-weight:600;font-size:15px;border:1.5px solid var(--deep);background:var(--deep);color:#fff;border-radius:8px;white-space:nowrap;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),transform 100ms var(--ease)}
.btn:hover{background:#1a6340;border-color:#1a6340}
.btn:active{transform:translateY(1px)}
.go svg,.more svg{transition:transform var(--dur-1) var(--ease)}
.go:hover svg,.more:hover svg{transform:translateX(3px)}
.btn.ghost{background:transparent;color:var(--deep)}
.btn.ghost:hover{background:var(--mint)}
.btn.light{background:var(--accent-dk);border-color:var(--accent-dk);color:var(--deep)}
.btn.light:hover{background:#86e3aa;border-color:#86e3aa}
.btn.sm{height:38px;padding:0 16px;font-size:13.5px}
.ctas{display:flex;flex-wrap:wrap;gap:12px}

/* 1 hero */
/* height: content plus padding, sized so the next section's top edge shows at the fold */
.hero{--pad:clamp(24px,5vh,52px);--peek:44px;--comp:clamp(470px,calc(100svh - var(--nav) - 2 * var(--pad) - var(--peek)),640px);position:relative;overflow:hidden;padding:var(--pad) 0}
/* two columns share one row: the h1's cap line is the row's top edge, the trust row's baseline its bottom edge */
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(360px,29vw,400px);column-gap:clamp(32px,3.6vw,48px);min-height:var(--comp)}
.hero .copy{--sep:clamp(20px,3vh,32px);container-type:inline-size;display:flex;flex-direction:column}
.hero .cta{margin-top:auto;padding-top:var(--sep)}
.hero .ctas .btn{height:54px;padding:0 26px;font-size:15.5px}
/* the longest word ("competitive response") measures 10.52em, so 9.3cqi keeps it on one line with 2% to spare.
   At line-height 1.08, Poppins' cap line sits .18em below the line top; the negative margin puts it on the row's top edge */
.hero h1{--h1-max:88px;font-size:clamp(24px,9.3cqi,var(--h1-max));line-height:1.12;letter-spacing:-.035em;margin-top:-.18em}

/* decision readout card */
.dcard{position:relative;z-index:1;margin:0;background:#fff;border:1px solid var(--rule);border-radius:14px;padding:20px 22px 14px;box-shadow:0 2px 8px -4px rgba(15,31,23,.16);font-family:var(--f-head)}
.dc-q{font-weight:600;font-size:19px;line-height:1.25;letter-spacing:-.015em;color:var(--ink);min-height:2.5em;text-wrap:balance}
.dc-opts{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:12px}
.dc-opts li{display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:7px;align-items:baseline;font-size:14px;line-height:1.25}
.dc-name{font-weight:500;color:var(--ink-2)}
.dc-n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}
.dc-n b{font-weight:600;color:var(--ink);transition:color var(--dur-1) var(--ease)}
.dc-bar{grid-column:1 / -1;height:8px;border-radius:4px;background:var(--mint-2);overflow:hidden}
.dc-bar i{display:block;height:100%;border-radius:4px;background:#8db9a0;transform-origin:left center;transition:background-color var(--dur-1) var(--ease)}
.dc-opts li.pick .dc-name{font-weight:600;color:var(--ink)}
.dc-opts li.win .dc-n b{color:var(--accent-ink)}
.dc-opts li.win .dc-bar i{background:var(--accent)}
.dc-read{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--rule);display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:14px;line-height:1.35}
.dc-read dt{font-weight:600;color:var(--muted);font-size:12.5px;line-height:1.5}
.dc-read dd{margin:0;color:var(--ink-2)}
.dc-read dd.why{min-height:2.7em}
.dc-read dd.best{font-weight:600;color:var(--accent-ink)}
.dc-foot{margin-top:12px;padding-top:10px;border-top:1px dashed var(--rule);font-size:12px;font-weight:500;color:var(--muted)}

/* one mint stage holds the scene and the card. The scene fills the stage above the card, edge to edge;
   the card keeps one inset from the stage's sides and bottom, and the corner radius stays concentric with the card's */
.hero .viz{--in:clamp(16px,1.7vw,24px);position:relative;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--in);padding:0 var(--in) var(--in);background:var(--mint);border-radius:calc(14px + var(--in))}
.scene{position:relative;flex:1 1 0;min-height:150px;margin:0 calc(-1 * var(--in));mix-blend-mode:multiply;-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent),linear-gradient(transparent,#000 7%,#000 93%,transparent);mask-composite:intersect}
/* the scene swaps with the card (renderCard animates #scene as one piece), so the images only switch */
.scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%;opacity:0}
.scene img.on{opacity:1}

/* the rotating word: every word shares one grid cell, so the cell is always the size of the longest and nothing moves.
   The classes hold only the resting state; the reel's motion is script-driven (heroReel) so a rotation that lands
   mid-slide starts from wherever the words are. Each word's box is one reel row: its line plus .3em under it for the
   descenders of g, p and y. The clip is exactly that row, so its top edge is the line top and nothing paints over
   "De-risk your", and translateY(±100%) puts a word wholly outside it. The negative margin gives the descender room
   back to the layout, so the subhead sits where it would under a plain line. */
.rot{display:grid;color:var(--accent);margin-bottom:-.3em;clip-path:inset(0 -.3em)}
.js .rot{cursor:pointer}
.rot-t{position:relative;display:block;width:44px;height:3px;margin-top:14px;padding:0;border:0;border-radius:2px;background:var(--rule);cursor:pointer}
.rot-t::before{content:"";position:absolute;inset:-14px -10px}
.rot-t i{display:block;height:100%;border-radius:inherit;background:var(--accent);transform:scaleX(0);transform-origin:left center}
.rot-t[aria-pressed=true] i{background:var(--muted)}
.rot-t.paused{background:var(--rule-2)}
html:not(.js) .rot-t{display:none}
@media (prefers-reduced-motion:reduce){.rot-t{display:none}}
.rot > span{grid-area:1/1;padding-bottom:.3em;opacity:0;visibility:hidden}
.rot > .on{opacity:1;visibility:visible}
.rot > [data-w]::before{content:attr(data-w)}
.no-js .rot > [data-w]{display:none}
.hero .sub{margin-top:clamp(18px,3.4vh,32px);font-size:clamp(17px,1.5vw,22px);color:var(--ink-2);max-width:26em}
.hero .sub{text-wrap:balance}
/* the stage is taller than the copy, so the column has spare height. Three equal auto margins (above the buttons,
   above and below the industry block) share it, and --sep is each gap's floor; no single band collects it all */
.sectors{margin-block:auto;padding-block:var(--sep)}
.sectors ul{list-style:none;padding:0;margin-top:12px;display:flex;flex-wrap:wrap;gap:10px 24px}
.sectors li{display:flex;align-items:center;gap:10px;font-family:var(--f-head);font-weight:500;font-size:13.5px;line-height:1.3;color:var(--ink-2)}
.sectors img{width:44px;height:44px;border-radius:10px}
.sectors .sec-1{display:none}
/* the trust row closes the copy column; at line-height 1.5 the baseline sits .4em above the box bottom */
.trust{margin-bottom:-.4em;padding-top:16px;border-top:1px solid var(--rule);font-family:var(--f-head);font-weight:500;font-size:13.5px;line-height:1.5;color:var(--ink-2);font-variant-numeric:tabular-nums}
/* separators sit in each item's left padding; the clip hides the one that starts a line */
.trust p{display:flex;flex-wrap:wrap;margin-left:-1.1em;clip-path:inset(-6px -6px -6px calc(1.1em - 4px))}
.trust p > span{position:relative;padding-left:1.1em;white-space:nowrap}
.trust p > span::before{content:"·";position:absolute;left:.42em;color:var(--muted)}
.trust b{font-weight:600;color:var(--ink)}

.cta-note{margin-top:12px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.close .cta-note{margin-top:14px;color:var(--on-dark)}

/* 2 problem: branching paths. Without JS the inline SVGs show the final state; with JS a canvas per side plays it */
.versus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:clamp(24px,4vw,64px)}
.vs .sm-label{margin-bottom:16px}
.vs.them .sm-label{color:var(--muted)}
.vs .n{display:block;font-size:clamp(44px,5vw,76px)}
.vs.them .n{color:var(--muted)}
.vs.us .n{color:var(--deep)}
.vs .cap{margin-top:10px;color:var(--ink-2)}
.paths{position:relative;height:clamp(200px,18vw,250px);margin-bottom:28px}
.paths canvas,.paths svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.paths path{vector-effect:non-scaling-stroke}
.paths canvas{display:none}
.pv-js .paths canvas{display:block}
.pv-js .paths svg{display:none}

/* 3 how it works (pinned) */
.how{position:relative;height:240vh;background:var(--bg)}
.how-stage{position:sticky;top:var(--nav);height:calc(100vh - var(--nav));height:calc(100svh - var(--nav));overflow:hidden}
.how-grid{height:100%;display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,72px);align-items:center;padding-top:clamp(16px,3vh,40px);padding-bottom:clamp(16px,3vh,40px)}
/* step progress: a vertical track with one mark per step. The track's data-step and the marks' classes change only
   when the step does. The first mark sits on the middle of the title's first line, the last on the bottom of the
   tallest step. Only colors transition: a transform animation on the fill or the marks composites them, and every
   extra layer in the pinned stage costs frames across the whole scroll. */
.how-step{--h3:clamp(23px,2.2vw,32px);--m:10px;display:grid;grid-template-columns:var(--m) minmax(0,1fr);column-gap:clamp(18px,2vw,28px);margin-top:clamp(20px,4vh,44px)}
.prog{position:relative;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--h3) * .55 - var(--m) / 2) 0 4px}
.prog::before,.prog i{content:"";position:absolute;left:calc(50% - 1px);width:2px;top:calc(var(--h3) * .55);bottom:calc(4px + var(--m) / 2)}
.prog::before{background:var(--rule)}
.prog i{background:var(--deep);transform:scaleY(0);transform-origin:center top}
.prog[data-step="1"] i{transform:scaleY(.33333)}
.prog[data-step="2"] i{transform:scaleY(.66667)}
.prog[data-step="3"] i{transform:scaleY(1)}
.prog b{position:relative;width:var(--m);height:var(--m);border-radius:50%;background:var(--rule-2);transition:background-color var(--dur-1) var(--ease)}
.prog b.done{background:var(--deep)}
.prog b.on{background:var(--accent);transform:scale(1.3)}
.steps{list-style:none;margin:0;padding:0;display:grid}
.steps h3{font-size:var(--h3)}
.steps li{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity var(--dur-1) var(--ease-exit),visibility 0s var(--dur-1)}
.steps li.on{opacity:1;visibility:visible;transition:opacity var(--dur-2) var(--ease) var(--dur-1),visibility 0s var(--dur-1)}
.steps p{margin-top:12px;color:var(--ink-2);max-width:28em;font-size:clamp(16px,1.25vw,18px)}
.how-viz{position:relative;height:100%;min-height:0}
.how-canvas{position:absolute;inset:0;width:100%;height:100%}

/* 4 the example: one slideshow on the deep band */
#example{padding:var(--sec) 0}
.ex-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px}
.ex-head .lede{margin-top:14px}
.ex-also{margin-top:6px;font-size:15.5px;color:var(--on-dark-3)}
.show{margin-top:clamp(32px,4vw,56px);outline:none}
.show:focus-visible{outline:2px solid var(--on-dark);outline-offset:8px;border-radius:8px}
.show-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid var(--dark-rule)}
.show-meta{display:flex;align-items:baseline;gap:14px;font-family:var(--f-head)}
.count{font-weight:600;font-size:15px;color:var(--on-dark);font-variant-numeric:tabular-nums;min-width:3.2em}
.show-nav{display:flex;align-items:center;gap:16px}
.sdots{display:flex;gap:4px}
.sdots button{width:28px;height:28px;padding:0;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.sdots button i{display:block;width:8px;height:8px;border-radius:50%;background:var(--dark-rule);transition:background-color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.sdots button:hover i{background:var(--on-dark-3)}
.sdots button[aria-current="true"] i{background:var(--accent-dk);transform:scale(1.35)}
.arrows{display:flex;gap:8px}
.arrow{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--on-dark-3);background:transparent;color:var(--on-dark);cursor:pointer;display:grid;place-items:center;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),opacity var(--dur-1) var(--ease)}
.arrow:hover{background:var(--deep-2);border-color:var(--on-dark)}
.arrow[aria-disabled="true"]{opacity:.35;cursor:default;background:transparent;border-color:var(--on-dark-3)}
.slides{display:grid;margin-top:clamp(28px,3.5vw,48px);touch-action:pan-y}
/* --dir is the last move's direction. Registered as not inherited and set on the slides themselves, so changing it
   restyles five elements instead of every element inside the slideshow */
@property --dir{syntax:"<number>";inherits:false;initial-value:1}
.fl-slide{grid-area:1/1;opacity:0;visibility:hidden;transform:translateX(calc(var(--dir,1) * -28px));transition:opacity var(--dur-1) var(--ease-exit),transform var(--dur-1) var(--ease-exit),visibility 0s linear var(--dur-1);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center;align-self:start}
.fl-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity var(--dur-2) var(--ease) var(--dur-1),transform var(--dur-2) var(--ease) var(--dur-1),visibility 0s}
.fl-slide h3{font-size:clamp(26px,2.8vw,42px);color:var(--on-dark);max-width:16em}
.fl-slide .lede{margin-top:14px;font-size:clamp(16px,1.25vw,18.5px)}
.card{background:var(--mint);border-radius:16px;overflow:hidden}
.card img{width:100%;mix-blend-mode:multiply}
.s-mirror .card{width:100%;max-width:470px;justify-self:center}

.s-q{align-items:start}
.simcard{background:var(--deep-2);border-radius:16px;padding:clamp(18px,2vw,28px);contain:layout paint;will-change:transform}
.sim-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sim-top label{color:var(--on-dark)}
.price-out{display:block;margin-top:2px;font-family:var(--f-head);font-weight:700;font-size:34px;letter-spacing:-.03em;line-height:1.1;color:var(--on-dark)}
.curve{display:block;width:100%;height:96px;margin-top:8px;overflow:visible}
.range{position:relative;margin-top:6px;--tw:22px}
.range input{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer;display:block}
.range input::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(to right,var(--accent-dk) var(--fill,75%),var(--dark-rule) var(--fill,75%))}
.range input::-moz-range-track{height:4px;border-radius:2px;background:var(--dark-rule)}
.range input::-moz-range-progress{height:4px;border-radius:2px;background:var(--accent-dk)}
.range input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--tw);height:var(--tw);margin-top:-9px;border-radius:50%;background:#fff;border:3px solid var(--accent-dk);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.range input::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--accent-dk);box-shadow:0 1px 4px rgba(0,0,0,.4)}
.range input:focus-visible{outline:none}
.range input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--deep-2),0 0 0 5px #fff}
.rival-tick{position:absolute;top:8px;width:2px;height:12px;background:var(--on-dark-2);left:calc(11px + (100% - 22px) * .25 - 1px);pointer-events:none}
.ticks{position:relative;height:20px;margin-top:4px;font-family:var(--f-head);font-weight:500;font-size:12px;color:var(--on-dark-2)}
.ticks span{position:absolute;top:0;white-space:nowrap}
.ticks .lo{left:0}.ticks .hi{right:0}
.ticks .rv{left:calc(11px + (100% - 22px) * .25);transform:translateX(-50%);color:var(--on-dark)}
.reads{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;margin-top:18px;padding-top:16px;border-top:1px solid var(--dark-rule)}
.reads b{display:block;font-family:var(--f-head);font-weight:700;font-size:clamp(30px,2.6vw,38px);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--on-dark)}
.reads span{display:block;margin-top:6px;font-family:var(--f-head);font-weight:600;font-size:14px;line-height:1.3;color:var(--on-dark)}
.reads small{display:block;margin-top:3px;font-size:14px;color:var(--on-dark-2);line-height:1.35}
.tiers{list-style:none;padding:0;margin-top:clamp(24px,3vw,36px)}
.tiers li{display:grid;grid-template-columns:11.5em minmax(0,1fr) 6.4em;gap:14px;align-items:center;padding:10px 0;border-top:1px solid var(--dark-rule);font-family:var(--f-head);font-size:14px}
.tiers .tn-name{font-weight:600;line-height:1.25;color:var(--on-dark)}
.tiers .tb{height:10px;border-radius:5px;background:var(--dark-track);overflow:hidden;display:flex}
.tiers .tb i{display:block;width:100%;height:100%;background:var(--on-dark-3);transform-origin:left center;transform:scaleX(0);transition:transform var(--dur-1) var(--ease)}
.tiers li.hot .tb i{background:var(--accent-dk)}
.tiers .tr{text-align:right;color:var(--on-dark-2);font-variant-numeric:tabular-nums}
.tiers li.hot .tr{color:var(--on-dark)}
.go{display:inline-flex;align-items:center;gap:10px;text-align:left;margin-top:22px;padding:0 0 3px;border:0;border-bottom:1.5px solid var(--accent-dk);background:transparent;cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--on-dark);transition:color var(--dur-1) var(--ease)}
.go:hover{color:var(--accent-dk)}
.go-note{margin-top:18px;font-size:15px;color:var(--on-dark-2)}

.nums{display:flex;flex-wrap:wrap;align-items:baseline;gap:16px clamp(20px,3vw,40px);margin-top:clamp(20px,2.5vw,32px)}
.nums .n{display:block;font-size:clamp(48px,5vw,80px);color:var(--on-dark)}
.nums .cap{display:block;margin-top:8px;color:var(--on-dark-2)}
.nums .x{font-family:var(--f-head);font-weight:600;font-size:clamp(20px,2vw,26px);color:var(--accent-dk)}
.segbar{margin-top:28px}
.segbar .bar{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:3px}
.segbar .lbls{display:flex;gap:3px;margin-top:10px;font-family:var(--f-head);font-weight:500;font-size:13px;color:var(--on-dark-2)}
.segbar .lbls span{min-width:0}
.segbar .lbls b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;color:var(--on-dark)}

.s-run{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);align-items:start}
.math{display:inline-block;margin-top:16px;padding:8px 12px;border-radius:8px;background:var(--deep-2);font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--on-dark);font-variant-numeric:tabular-nums}
.math b{color:var(--accent-dk)}
.readout{margin-top:clamp(20px,2.5vw,32px);padding-top:18px;border-top:2px solid var(--on-dark);min-height:9em}
.ro-main{font-family:var(--f-head);font-weight:700;font-size:clamp(21px,1.9vw,26px);letter-spacing:-.025em;line-height:1.15;text-wrap:balance;color:var(--on-dark)}
.ro-main .who{color:var(--accent-dk)}
#ro-who,#ro-n{display:inline-block}
.ro-sub{margin-top:10px;font-size:15.5px;color:var(--on-dark-2);line-height:1.45}
.grid .row{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr));column-gap:clamp(12px,2vw,28px);align-items:center}
.g-head{padding:0 14px 14px}
.g-head .col{font-family:var(--f-head);font-weight:600;font-size:13.5px;line-height:1.25;color:var(--on-dark-2);padding-bottom:6px;border-bottom:2px solid transparent;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.g-head .col.w{color:var(--accent-dk);border-bottom-color:var(--accent-dk)}
.g-head .sh{display:none}
.g-row{width:100%;text-align:left;border:0;background:transparent;border-top:1px solid var(--dark-rule);padding:13px 14px;cursor:pointer;border-radius:0;transition:background-color var(--dur-1) var(--ease)}
.g-row:last-child{border-bottom:1px solid var(--dark-rule)}
.g-row:hover{background:var(--deep-2)}
.g-row[aria-pressed="true"]{background:#145a36;border-radius:8px;border-top-color:transparent}
.g-row[aria-pressed="true"] + .g-row{border-top-color:transparent}
.g-row:focus-visible{outline-offset:-2px;border-radius:8px}
.sname{display:block;font-family:var(--f-head);font-weight:600;font-size:16px;line-height:1.2;color:var(--on-dark)}
.sdet{display:block;margin-top:3px;font-size:14px;line-height:1.3;color:var(--on-dark-2)}
.tag{display:inline-block;margin-top:8px;background:var(--accent-dk);color:var(--deep);padding:3px 8px;border-radius:4px;font-family:var(--f-head);font-weight:600;font-size:11.5px;letter-spacing:.02em}
.fl-cell{display:flex;align-items:center;gap:10px}
.fl-cell b{font-family:var(--f-head);font-weight:600;font-size:19px;min-width:2ch;text-align:right;color:var(--on-dark-3);font-variant-numeric:tabular-nums;transition:color var(--dur-1) var(--ease)}
.fl-cell .t{flex:1;height:10px;background:var(--dark-track);border-radius:5px;overflow:hidden}
.fl-cell .t i{display:block;height:100%;width:var(--p);background:#3f7a5a;border-radius:5px;transition:background-color var(--dur-1) var(--ease)}
.fl-cell.top b{color:var(--on-dark)}
.fl-cell.top .t i{background:var(--on-dark-3)}
.g-row[aria-pressed="true"] .fl-cell.top b{color:var(--accent-dk)}
.g-row[aria-pressed="true"] .fl-cell.top .t i{background:var(--accent-dk)}

.risk{list-style:none;padding:0;margin-top:clamp(18px,2.2vw,28px)}
.risk li{display:grid;grid-template-columns:minmax(88px,auto) minmax(0,1fr);column-gap:20px;align-items:baseline;padding:14px 0;border-top:1px solid var(--dark-rule)}
.risk li.hot{border-top:2px solid var(--on-dark)}
.risk .n{grid-row:span 2;font-size:clamp(38px,3.6vw,56px);color:var(--on-dark-3)}
.risk .hot .n{color:var(--accent-dk)}
.risk .mech{font-family:var(--f-head);font-weight:600;font-size:18px;letter-spacing:-.01em;line-height:1.25;color:var(--on-dark)}
.risk .mech small{margin-left:8px;font-family:var(--f-body);font-weight:400;font-size:13px;letter-spacing:0;color:var(--on-dark-3);white-space:nowrap}
@media (max-width:640px){.risk .mech small{display:block;margin:2px 0 0}}
.risk .why-l{margin-top:4px;font-size:15px;line-height:1.4;color:var(--on-dark-2)}
.risk-cap{margin-top:14px;font-size:14px;color:var(--on-dark-2)}

.s-ans{display:block}
.s-ans .move{margin-top:16px;font-family:var(--f-head);font-weight:600;font-size:clamp(19px,1.9vw,25px);letter-spacing:-.01em;line-height:1.35;max-width:26em;color:var(--on-dark)}
.s-ans .base{margin-top:10px;font-size:15.5px;color:var(--on-dark-2);max-width:38em}
.ans{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:end;margin-top:clamp(28px,3.5vw,48px)}
.bars .r{display:grid;grid-template-columns:minmax(0,1.1fr) 92px minmax(0,1.6fr);gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--dark-rule);font-family:var(--f-head);font-weight:500;font-size:15px;color:var(--on-dark-2)}
.bars .r.h{border-top:0;padding-top:0;font-size:12.5px;font-weight:600}
.bars .r.w{color:var(--on-dark)}
.bars .kept{font-variant-numeric:tabular-nums}
.bars .r.w .kept{color:var(--accent-dk)}
.bars .b{display:flex;align-items:center;gap:12px}
.bars .b i{display:block;height:12px;width:var(--p);background:#3f7a5a;border-radius:6px}
/* the answer's one payoff: the bars grow as the slide enters, one --stagger apart, the winner last */
.js .s-ans .bars .b i{transform-origin:left center;transform:scaleX(0)}
.js .s-ans.played .bars .b i{transform:none;transition:transform var(--dur-3) var(--ease)}
.js .s-ans.played .bars .r:nth-child(3) .b i{transition-delay:var(--stagger)}
.js .s-ans.played .bars .r:nth-child(4) .b i{transition-delay:calc(2 * var(--stagger))}
.bars .r.w .b i{background:var(--accent-dk)}
.bars .b span{white-space:nowrap;font-variant-numeric:tabular-nums}
.lift .n{display:block;font-size:clamp(76px,8.4vw,132px);color:var(--accent-dk)}
.lift .cap{display:block;margin-top:10px;font-family:var(--f-head);font-weight:600;font-size:17px;color:var(--on-dark)}
.lift .vsh{display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--dark-rule);font-size:15.5px;color:var(--on-dark-2);max-width:24em}
.lift .vsh b{font-family:var(--f-head);font-weight:600;color:var(--on-dark);font-variant-numeric:tabular-nums}

/* 5 who we work with */
.inds{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,48px)}
.inds img{width:100%;aspect-ratio:5/4;object-fit:contain}
.inds h3{margin-top:14px;padding-top:14px;border-top:2px solid var(--deep);font-size:clamp(19px,1.6vw,23px)}
.clients{margin-top:14px;font-size:15.5px;color:var(--muted);max-width:40em}

/* 6 what you can test */
.tablist{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.tab{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;align-items:center;padding:14px 0 0;border:0;border-top:2px solid var(--rule);background:transparent;text-align:left;cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:clamp(15px,1.25vw,17px);line-height:1.25;color:var(--muted);transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.tab img{width:80px;aspect-ratio:720/655;object-fit:cover;mix-blend-mode:multiply;opacity:.6;transition:opacity var(--dur-1) var(--ease)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{color:var(--ink);border-top-color:var(--accent)}
.tab[aria-selected="true"] img{opacity:1}
.tab:focus-visible{outline-offset:4px}
.panels{display:grid;margin-top:clamp(32px,4vw,56px)}
.panel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.panel[hidden]{display:grid;visibility:hidden;transition:visibility 0s linear var(--dur-1)}
.panel > *{transition:opacity var(--dur-2) var(--ease) var(--dur-1),transform var(--dur-2) var(--ease) var(--dur-1)}
.panel > .ret{transition-delay:calc(var(--dur-1) + var(--stagger))}
.panel[hidden] > *{opacity:0;transform:translateY(var(--lift));transition:opacity var(--dur-1) var(--ease-exit),transform var(--dur-1) var(--ease-exit)}
.panel .q{font-family:var(--f-head);font-weight:600;font-size:clamp(24px,2.6vw,38px);letter-spacing:-.025em;line-height:1.2;text-wrap:balance;max-width:20em}
.panel .ret{padding-top:16px;border-top:1px solid var(--rule);color:var(--ink-2)}
.panel .ret .sm-label{display:block;margin-bottom:6px;color:var(--accent-ink)}

/* 7 proof */
.proof-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:center}
.proof-grid .pic img{width:100%;max-width:640px;margin-left:auto}
.pstats{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:28px}
.pstats div{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:baseline;border-top:1px solid var(--rule-2);padding:18px 0}
.pstats div:first-child{border-top:2px solid var(--deep)}
.pstats .n{font-size:clamp(40px,4.4vw,64px);white-space:nowrap;color:var(--deep)}
.pstats div:first-child .n{color:var(--accent-ink)}
.pstats p{color:var(--ink-2)}
.pstats .ast{position:relative;top:-.62em;margin-left:.04em;font-size:.5em;letter-spacing:0}
.fn{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted);scroll-margin-top:40vh;border-radius:6px}
.pstats .ast,.ast-h{color:inherit;text-decoration:none}
.pstats .ast:hover,.ast-h:hover{color:var(--accent)}
.fn:target{animation:fn-hl 2.2s var(--ease)}
@keyframes fn-hl{0%,35%{background:color-mix(in srgb,var(--accent) 18%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 18%,transparent)}100%{background:transparent;box-shadow:0 0 0 6px transparent}}
@media (prefers-reduced-motion:reduce){.fn:target{animation:none;background:color-mix(in srgb,var(--accent) 18%,transparent)}}
.fn a{text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:3px;transition:color var(--dur-1) var(--ease),text-decoration-color var(--dur-1) var(--ease)}
.fn a:hover{color:var(--deep);text-decoration-color:var(--accent)}
.more{display:inline-flex;align-items:center;gap:10px;margin-top:28px;font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--deep);border-bottom:1.5px solid var(--accent);padding-bottom:3px;transition:color var(--dur-1) var(--ease)}
.more:hover{color:var(--accent-ink)}

/* 8 security */
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,80px);align-items:start}
.split .sec-head + *{margin-top:0}
.badges{display:flex;gap:20px;align-items:center;margin-top:32px}
.badges img{width:112px;height:112px;object-fit:contain}
.sec-cta{margin-top:28px;display:flex;width:max-content}
.facts{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(20px,3vw,48px)}
.facts li{border-top:2px solid var(--deep);padding-top:16px}
.facts b{display:block;font-family:var(--f-head);font-weight:700;font-size:clamp(24px,2.4vw,34px);letter-spacing:-.03em;line-height:1.05;color:var(--deep)}
.facts span{display:block;margin-top:8px;font-size:15.5px;color:var(--ink-2);line-height:1.4}
.facts .lead{grid-column:1 / -1}
.split .more{margin-top:32px}

/* 9 how a study works + team */
.path{position:relative}
.path-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,48px)}
.track{position:absolute;left:14px;right:calc((100% - 2 * clamp(20px,3vw,48px)) / 3 - 14px);top:13px;height:2px;background:var(--rule-2)}
.track i{position:absolute;inset:0;background:var(--deep);transform-origin:left center;transition:transform var(--dur-3) var(--ease-inout)}
.path.armed .track i{transform:scaleX(0)}
.path li{position:relative}
.dot{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--deep);color:#fff;font-family:var(--f-head);font-weight:600;font-size:13px;border:2px solid var(--deep);transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.path.armed .dot{background:var(--mint);color:var(--deep)}
/* the line runs on --ease-inout so it reaches dot 2 at half time and dot 3 at full time, when each lights */
.path li:nth-child(2) .dot{transition-delay:calc(var(--dur-3) * .5)}
.path li:nth-child(3) .dot{transition-delay:var(--dur-3)}
.path.instant *{transition:none!important}
.path h3{margin-top:24px}
.path p{margin-top:10px;color:var(--ink-2);max-width:22em}
.team{margin-top:clamp(64px,7vw,104px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--rule-2);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,5vw,80px);align-items:center}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px)}
.person{display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;align-items:center}
.avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 18%;background:var(--mint-2)}
.pname{font-family:var(--f-head);font-weight:600;font-size:18px;letter-spacing:-.015em;line-height:1.2}
.prole{margin-top:4px;font-size:14.5px;color:var(--ink-2);line-height:1.4}
.prev{margin-top:2px;font-size:14px;color:var(--muted);line-height:1.4}

/* 10 close */
.close{text-align:center}
.dark h2 em{color:var(--accent-dk)}
.close h2{margin:0 auto;font-size:clamp(36px,5.2vw,80px);max-width:12em;color:var(--on-dark)}
.close .lede{margin:18px auto 0}
.close .ctas{justify-content:center;margin-top:36px}

.foot{background:var(--deep-3);color:var(--on-dark-2);padding:32px 0;font-size:14px;border-top:1px solid var(--dark-rule)}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap}
.foot img{height:24px;width:auto;filter:brightness(0) invert(1)}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--f-head);font-weight:500}
.foot a{transition:color var(--dur-1) var(--ease)}
.foot a:hover{color:var(--on-dark)}
.foot a:focus-visible{outline-color:var(--on-dark)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
  .fl-slide{transform:none}
  .rot > [data-w]{display:none}
}
.menu-li{display:none;position:relative}
.menu-b{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px;color:var(--ink);background:none;border:0;border-radius:10px;cursor:pointer}
.menu-b:hover{background:var(--mint)}
.menu-b svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transform-origin:12px 12px;transition:transform var(--dur-2) var(--ease),opacity var(--dur-1) var(--ease)}
.menu-b[aria-expanded=true] .l1{transform:translateY(5px) rotate(45deg)}
.menu-b[aria-expanded=true] .l2{opacity:0}
.menu-b[aria-expanded=true] .l3{transform:translateY(-5px) rotate(-45deg)}
.menu-p{position:absolute;top:calc(100% + 10px);right:0;min-width:220px;padding:8px;background:#fff;border:1px solid var(--rule);border-radius:12px;box-shadow:0 12px 32px -12px rgba(15,31,23,.28);display:grid}
.menu-p[hidden]{display:none}
.menu-p a{padding:10px 12px;border-radius:8px;color:var(--ink)}
.menu-p a:hover{background:var(--mint)}
.fl-nav ul a{white-space:nowrap}
@media (max-width:1100px){
  .fl-nav .hide-md{display:none}
  .menu-li{display:block}
}
@media (max-width:999px){
  .hero{padding:28px 0 40px}
  .hero-grid{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero h1{--h1-max:60px;margin-top:0}
  .hero .ctas .btn{height:50px;padding:0 22px;font-size:15px}
  .hero .cta{margin-top:24px;padding:0 0 22px}
  .sectors{order:1;margin:24px 0 0;padding:0}
  .hero .viz{margin-top:32px;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);align-items:stretch;padding:var(--in)}
  .scene{min-height:200px;margin:calc(-1 * var(--in)) 0 calc(-1 * var(--in)) calc(-1 * var(--in))}
}
@media (max-width:639px){
  .hero .viz{display:flex;padding-top:0}
  .scene{flex:none;height:clamp(150px,44vw,240px);min-height:0;margin:0 calc(-1 * var(--in))}
  .sectors ul{margin-top:6px;gap:0}
  .sectors li{gap:0}
  .sectors img{display:none}
  .sectors li + li::before{content:"·";margin:0 .5em;color:var(--muted)}
  .hero .trust,.sectors .sm-label:not(.sec-1),.sectors ul{display:none}
  .sectors .sec-1{display:block;max-width:30ch;font-weight:500;color:var(--ink-2)}
  .sectors{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule)}
  .hero .cta{padding-bottom:0}
  .hero .ctas{flex-wrap:nowrap;align-items:center;gap:22px}
  .hero .ctas .btn.ghost{height:auto;padding:4px 0;border:0;background:none;color:var(--deep);text-decoration:underline;text-decoration-color:var(--rule-2);text-underline-offset:.3em}
  .hero .ctas .btn.ghost:hover{text-decoration-color:var(--deep);background:none}
}
@media (max-width:900px){
  .fl-nav .hide-sm{display:none}
  .how-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:12px}
  .how-step{margin-top:14px}
  .steps p{margin-top:6px;font-size:15px;line-height:1.45}
  .fl-slide,.s-run,.ans,.split,.team,.panel,.proof-grid{grid-template-columns:minmax(0,1fr)}
  .fl-slide{gap:24px}
  .slides{overflow-x:clip}
  .fl-slide{opacity:1;visibility:visible;transform:none;transition:none}
  .fl-slide:not(.on):not(.leaving){display:none}
  .s-run .readout{min-height:0}
  .proof-grid .pic img{margin:0 auto}
  .tablist{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:16px}
  .panel{align-items:start;gap:20px}
  .inds{gap:12px}
}
@media (max-width:700px){
  body{font-size:16px}
  .fl-nav ul{gap:16px}
  .mark img{height:24px}
  .btn.sm{height:36px;padding:0 12px;font-size:13px}
  .dcard{padding:18px 18px 14px}
  .dc-q{font-size:17px}
  .hero .sub{margin-top:14px;font-size:16px;line-height:1.5}
  .trust{font-size:13px}
  .how-step{--h3:22px}
  .versus{grid-template-columns:minmax(0,1fr);gap:44px}
  .paths{height:190px;margin-bottom:20px}
  .them .paths{height:130px}
  .show-bar{flex-wrap:wrap}
  .sdots button{width:22px}
  .arrow{width:40px;height:40px}
  .grid .row{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:10px}
  .g-head{padding:10px 10px 12px;position:sticky;top:calc(var(--nav) - 1px);z-index:2;background:var(--deep)}
  .g-head .corner{display:none}
  .g-head .col{font-size:12px}
  .g-head .lg{display:none}
  .g-head .sh{display:inline}
  .g-row{padding:11px 10px}
  .g-row .lbl{grid-column:1 / -1;margin-bottom:8px}
  .sname{font-size:15px}
  .fl-cell{gap:6px}
  .fl-cell b{font-size:16px}
  .tiers li{grid-template-columns:6.4em minmax(0,1fr) 5.6em;gap:10px;font-size:13px}
  .bars .r{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .bars .r .b{grid-column:1 / -1}
  .bars .r.h span:nth-child(3){display:none}
  .inds{grid-template-columns:minmax(0,1fr)}
  .inds li{display:grid;grid-template-columns:42% minmax(0,1fr);gap:16px;align-items:center}
  .inds h3{margin-top:0}
  .tab{grid-template-columns:48px minmax(0,1fr);gap:8px;font-size:14px}
  .tab img{width:48px}
  .facts{grid-template-columns:minmax(0,1fr)}
  .path-steps{grid-template-columns:minmax(0,1fr);gap:28px;padding-left:44px}
  .track{left:13px;right:auto;top:14px;bottom:14px;width:2px;height:auto}
  .track i{transform-origin:center top}
  .path.armed .track i{transform:scaleY(0)}
  .dot{position:absolute;left:-44px;top:0}
  .path h3{margin-top:0}
  .people{grid-template-columns:minmax(0,1fr)}
  .person{grid-template-columns:72px minmax(0,1fr)}
  .avatar{width:72px;height:72px}
}
/* how it works: static fallback without JS and in print */
.no-js .how{height:auto}
.no-js .how-stage{position:static;height:auto}
.no-js .how-grid{height:auto}
.no-js .steps{gap:28px}
.no-js .steps li{grid-area:auto;opacity:1;visibility:visible}
.no-js .how-step{display:block}
.no-js .how-viz,.no-js .prog{display:none}
@media print{
  .how{height:auto}
  .how-stage{position:static;height:auto}
  .how-grid{height:auto}
  .steps{gap:28px}
  .steps li{grid-area:auto;opacity:1;visibility:visible}
  .how-step{display:block}
  .how-viz,.prog{display:none}
}

/* example views: Walkthrough (slideshow) | In Slack */
.ex-view{display:inline-flex;gap:4px;padding:4px;border:1.5px solid var(--dark-rule);border-radius:999px}
.ex-view button{height:38px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--on-dark-2);font-family:var(--f-head);font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.ex-view button:hover{color:var(--on-dark)}
.ex-view button[aria-pressed="true"]{background:var(--accent-dk);color:var(--deep)}
.ex-view button:focus-visible{outline:2px solid var(--on-dark);outline-offset:2px}
.exs .slk-wrap{padding:clamp(8px,1.2vw,16px);border-radius:20px;background:var(--deep-2);border:1px solid var(--dark-rule)}
.no-js .ex-view{display:none}
.exs-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:clamp(28px,4vw,48px) 0 14px}
.exs-ill{font-family:var(--f-head);font-weight:500;font-size:12.5px;color:var(--on-dark-2)}
.exs-replay{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;font:600 13px/1 var(--f-head);cursor:pointer}
.exs-replay:hover{background:rgba(255,255,255,.08)}
.exs-replay:focus-visible{outline:2px solid #fff;outline-offset:2px}
.exs-replay svg{width:15px;height:15px}
.exs-hint{font-size:14px;color:var(--on-dark-3)}
.exs-foot{margin-top:16px}
.ex-cta{display:flex;justify-content:flex-end;margin-top:28px}
.exs-ctl{display:inline-flex;align-items:center;gap:14px}
.exs-ctl [hidden]{display:none}
.exs-prog{width:96px;height:3px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.exs-prog i{display:block;height:100%;background:var(--accent-dk);transform:scaleX(0);transform-origin:left center}
@media (max-width:640px){.exs-prog{width:56px}.ex-cta{justify-content:flex-start}}

/* ===== Slack window (all rules scoped under .slk) ===== */
.slk-wrap{container-type:inline-size}
.slk{
  --text:#1d1c1d; --muted:#616061; --link:#1264a3; --line:rgba(29,28,29,.13); --line-2:rgba(29,28,29,.3);
  --hover:#f8f8f8; --green:#007a5a; --green-h:#148567; --aub:#3f0e40; --aub-d:#350d36; --mention:rgba(29,155,209,.1);
  --plan:#7c3085; --pill:rgba(29,28,29,.06);
  position:relative;display:grid;grid-template-rows:40px minmax(0,1fr);height:clamp(600px,calc(100svh - 120px),820px);
  border-radius:12px;overflow:hidden;background:var(--aub-d);color:var(--text);
  font-family:"Slack-Lato","Lato","appleLogo",sans-serif;font-size:15px;line-height:1.46668;font-variant-ligatures:common-ligatures;
  box-shadow:0 0 0 1px rgba(0,0,0,.25),0 30px 80px -20px rgba(0,0,0,.55);-webkit-font-smoothing:antialiased;text-align:left
}
.slk *{box-sizing:border-box}
.slk [hidden]{display:none!important}
.slk button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer}
.slk svg{display:block;flex:none}
.slk b,.slk strong{font-weight:700}
.slk :focus-visible{outline:2px solid #1264a3;outline-offset:1px;border-radius:4px}
.slk .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* top bar */
.slk-top{display:flex;align-items:center;gap:12px;padding:0 12px;color:rgba(255,255,255,.85)}
.slk-lights{display:flex;gap:8px;margin-right:10px}
.slk-lights i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
.slk-lights i:nth-child(2){background:#febc2e}.slk-lights i:nth-child(3){background:#28c840}
.slk-nav{display:flex;gap:6px;opacity:.75}
.slk-nav .ic{width:16px;height:16px}
.slk-search{flex:1;max-width:620px;margin:0 auto;height:26px;border-radius:6px;background:rgba(255,255,255,.2);display:flex;align-items:center;gap:8px;padding:0 10px;font-size:13px;color:rgba(255,255,255,.85)}
.slk-search .ic{width:14px;height:14px}
.slk-top .slk-help .ic{width:18px;height:18px}

/* body */
.slk-body{display:grid;grid-template-columns:70px minmax(0,1fr);min-height:0}
.slk-rail{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:6px;color:#fff}
.slk-ws{width:36px;height:36px;border-radius:8px;background:#fff;color:var(--aub);display:grid;place-items:center;font-weight:900;font-size:15px}
.slk-ri{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;font-weight:700;color:rgba(255,255,255,.85)}
.slk-ri span{width:36px;height:36px;border-radius:8px;display:grid;place-items:center}
.slk-ri.on span{background:rgba(255,255,255,.2)}
.slk-ri .ic{width:20px;height:20px}
.slk-me{margin-top:auto;margin-bottom:12px;position:relative}
.slk-me .av{width:32px;height:32px;font-size:12px}
.slk-me::after{content:"";position:absolute;right:-3px;bottom:-3px;width:10px;height:10px;border-radius:50%;background:#2bac76;border:2px solid var(--aub-d)}
.slk-panel{display:flex;min-height:0;min-width:0;margin:0 4px 4px 0;border-radius:8px;overflow:hidden;background:#fff}

/* sidebar */
.slk-side{width:250px;flex:none;background:var(--aub);color:rgba(255,255,255,.7);display:flex;flex-direction:column;border-right:1px solid rgba(255,255,255,.1)}
.slk-side-h{height:49px;display:flex;align-items:center;justify-content:space-between;padding:0 12px 0 16px;color:#fff}
.slk-side-h b{font-size:18px;font-weight:900;display:flex;align-items:center;gap:4px}
.slk-side-h .ic{width:14px;height:14px}
.slk-side-h .cmp{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.15);display:grid;place-items:center}
.slk-side-h .cmp .ic{width:18px;height:18px}
.slk-sl{padding:6px 8px}
.slk-si{height:28px;display:flex;align-items:center;gap:8px;padding:0 10px;border-radius:6px;font-size:15px;white-space:nowrap;overflow:hidden}
.slk-si .ic{width:16px;height:16px;opacity:.9}
.slk-si.hd{font-weight:400;margin-top:8px}
.slk-si.hd .ic{width:12px;height:12px}
.slk-si.on{background:rgba(249,237,255,.95);color:#39063a;font-weight:700}
.slk-si .sav{width:20px;height:20px;border-radius:4px;flex:none}
.slk-si .you{opacity:.7;font-weight:400}

/* panes */
.slk-main,.slk-thread{display:flex;flex-direction:column;min-width:0;min-height:0;background:#fff}
.slk-main{flex:1}
.slk-thread{width:0;flex:none;border-left:1px solid var(--line);overflow:hidden;transition:width .45s cubic-bezier(.16,1,.3,1)}
.slk.is-open .slk-thread{width:min(560px,58%)}
.slk-ph{height:49px;flex:none;display:flex;align-items:center;gap:8px;padding:0 12px 0 20px;border-bottom:1px solid var(--line)}
.slk-ph .t{font-size:18px;font-weight:900;display:flex;align-items:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slk-ph .t img{width:24px;height:24px;border-radius:6px;background:#efebe2}
.slk-ph .t .ic{width:14px;height:14px}
.slk-ph .st{font-size:13px;color:var(--muted);white-space:nowrap}
.slk-ph .x{margin-left:auto;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}
.slk-ph .x:hover{background:var(--pill)}
.slk-tabs{display:flex;gap:18px;padding:0 20px;height:38px;align-items:stretch;border-bottom:1px solid var(--line);flex:none;font-size:13px}
.slk-tabs span{display:flex;align-items:center;color:var(--muted);font-weight:700}
.slk-tabs span.on{color:var(--text);box-shadow:inset 0 -2px 0 var(--aub)}
.slk-mob-h{display:none}

.slk-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:8px 0 12px;scrollbar-width:thin}
.slk-main .slk-scroll{display:flex;flex-direction:column}
.slk-intro{padding:16px 20px 8px}
.slk-intro img{width:72px;height:72px;border-radius:12px;background:#efebe2}
.slk-intro h4{margin:10px 0 2px;font-size:22px;font-weight:900;display:flex;align-items:center;gap:2px}
.slk-intro p{color:var(--text)}
.slk-intro .sp{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.slk-intro .sp span{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--line-2);border-radius:8px;font-size:13px;font-weight:700;color:var(--text)}
.slk-intro .sp .ic{width:14px;height:14px;color:var(--plan)}
.slk-grow{flex:1}

/* messages */
.slk-msg{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:8px;padding:8px 20px}
.slk-msg:hover{background:var(--hover)}
.av{width:36px;height:36px;border-radius:4px;display:grid;place-items:center;color:#fff;font-weight:900;font-size:14px;overflow:hidden}
.av.dr{background:#1d7a8c}
.av.fly{background:#efebe2}
.av.fly img{width:100%;height:100%;object-fit:cover;display:block}
.slk-nm{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:4px;line-height:1.3}
.slk-nm b{font-weight:900;font-size:15px}
.slk-app{display:inline-block;font-size:10px;font-weight:700;line-height:1.25;padding:1px 3px;border-radius:2px;background:rgba(29,28,29,.13);color:rgba(29,28,29,.7);text-transform:uppercase;align-self:center;position:relative;top:-1px}
.slk-ts{font-size:12px;color:var(--muted)}
.slk-ed{font-size:12px;color:var(--muted)}
.slk-tx{margin-top:2px;overflow-wrap:anywhere}
.slk-tx p+p,.slk-tx p+ul,.slk-tx ul+p{margin-top:6px}
.slk-tx ul{padding-left:22px;margin-top:4px}
.slk-tx li{margin:1px 0}
.slk-mn{color:var(--link);background:var(--mention);border-radius:3px;padding:0 2px}
.slk-day{position:relative;display:flex;justify-content:center;margin:12px 0 4px}
.slk-day::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1px solid var(--line)}
.slk-day span{position:relative;height:28px;display:inline-flex;align-items:center;gap:4px;padding:0 12px 0 16px;border:1px solid var(--line);border-radius:24px;background:#fff;font-size:13px;font-weight:700}
.slk-day .ic{width:12px;height:12px}
.slk-rep{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:4px 8px 4px 4px;border:1px solid transparent;border-radius:6px;font-size:13px;max-width:100%}
.slk-rep:hover{border-color:var(--line);background:#fff}
.slk-rep .av{width:24px;height:24px;border-radius:4px}
.slk-rep b{color:var(--link);font-weight:700;white-space:nowrap}
.slk-rep span{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slk-rline{display:flex;align-items:center;gap:12px;padding:4px 20px 6px;font-size:13px;color:var(--muted)}
.slk-rline::after{content:"";flex:1;border-top:1px solid var(--line)}

/* status line (assistant.threads.setStatus) */
.slk-status .slk-tx{color:var(--muted);font-style:normal}
.slk-shim{background:linear-gradient(90deg,#616061 0%,#616061 40%,#c9c4c9 50%,#616061 60%,#616061 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:slk-shim 1.6s linear infinite}
@keyframes slk-shim{from{background-position:100% 0}to{background-position:-150% 0}}

/* Block Kit: shared */
.bk{margin-top:8px}
.bk:first-child{margin-top:2px}
.bk-sec{display:flex;gap:12px;align-items:flex-start}
.bk-sec>.txt{flex:1;min-width:0}
.bk-ctx{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:12px;color:var(--muted);line-height:1.5}
.bk-ctx .ic{width:14px;height:14px}
.bk-div{border:0;border-top:1px solid var(--line);margin:12px 0}
.slk .bk-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 12px;border-radius:4px;border:1px solid var(--line-2);background:#fff;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;transition:background .12s,box-shadow .12s,transform .08s}
.slk .bk-btn:hover{background:var(--hover);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.slk .bk-btn.pri{background:var(--green);border-color:var(--green);color:#fff}
.slk .bk-btn.pri:hover{background:var(--green-h)}
.bk-btn.is-press{transform:scale(.97);filter:brightness(.92)}
.bk-btn[aria-busy="true"]{color:transparent!important;position:relative}
.bk-btn[aria-busy="true"]::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:slk-spin .7s linear infinite}
.slk .bk-btn.lg{height:36px;padding:0 16px;font-size:15px}
.bk-acts{display:flex;flex-wrap:wrap;gap:8px}
.bk-ovsel{flex:none}
.slk .bk-ovsel>button.bk-ovf{width:28px;min-height:28px;height:28px;padding:0;justify-content:center;border-radius:4px}
.bk-ovf .ic{width:16px;height:16px}

/* plan block */
.bk-plan{border:1px solid var(--line);border-radius:8px;padding:8px 12px 10px;max-width:520px}
.bk-plan-h{display:flex;align-items:center;gap:8px;width:100%;text-align:left;font-weight:700;min-height:24px}
.bk-plan-h .tt{flex:1;color:var(--text)}
.bk-plan[data-state="running"] .bk-plan-h .tt{color:var(--plan)}
.bk-plan-h .chev{color:var(--muted);transition:transform .2s}
.bk-plan.is-closed .bk-plan-h .chev{transform:rotate(180deg)}
.bk-plan.is-closed .bk-tasks{display:none}
.bk-plan .hi{width:16px;height:16px;display:grid;place-items:center}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid rgba(29,28,29,.16);border-top-color:var(--plan);animation:slk-spin .8s linear infinite}
@keyframes slk-spin{to{transform:rotate(360deg)}}
.hi .done{display:none}
.bk-plan[data-state="done"] .hi .spin{display:none}
.bk-plan[data-state="done"] .hi .done{display:block}
.bk-plan[data-state="wait"] .hi .spin{animation:none;border-top-color:rgba(29,28,29,.16)}
.bk-tasks{list-style:none;padding:0;margin:6px 0 0}
.bk-task{display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:8px;padding:3px 0}
.bk-task .ti{width:16px;height:22px;display:grid;place-items:center}
.bk-task .ti>*{display:none}
.bk-task[data-status="pending"] .ti .bk-dot{display:block;width:6px;height:6px;border-radius:50%;background:#616061}
.bk-task[data-status="in_progress"] .ti .spk{display:block;color:#d4398c;animation:slk-pulse 1s ease-in-out infinite}
.bk-task[data-status="complete"] .ti .chk{display:block}
.bk-task .ti .ic{width:15px;height:15px}
.bk-task .ti .chk{stroke-width:2.2}
@keyframes slk-pulse{50%{opacity:.45;transform:scale(.85)}}
.bk-task .tl{font-weight:400}
.bk-task:not([data-status="pending"]) .tl{font-weight:700}
.bk-task .out{grid-column:2;margin:2px 0 2px -16px;padding-left:15px;border-left:2px solid #e8e8e8}
.bk-task[data-status="pending"] .out,.bk-task[data-status="in_progress"] .out{display:none}

/* card block */
.bk-card{border:1px solid var(--line);border-radius:12px;padding:12px 16px 14px;max-width:520px;background:#fff}
.bk-card-h{display:flex;gap:10px;align-items:center}
.bk-card-h .ico{width:32px;height:32px;border-radius:6px;flex:none;display:grid;place-items:center;overflow:hidden}
.bk-card-h .ico img{width:100%;height:100%;background:#efebe2}
.bk-card-h .ico.warn{background:#fdf3d6;color:#a16b00}
.bk-card-h .ico.win{background:#e3f4ec;color:#007a5a}
.bk-card-h .ico .ic{width:18px;height:18px}
.bk-card .ct{font-weight:900;line-height:1.3}
.bk-card .cs{font-size:13px;color:var(--muted);line-height:1.35;margin-top:1px}
.bk-card .cb{margin-top:8px}
.bk-card .cx{margin-top:6px;font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:flex-start}
.bk-card .cx .ic{width:16px;height:16px;color:var(--green);stroke-width:2.2;margin-top:1px}
.bk-card .ca{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}

/* checkboxes, selects (Block Kit interactive elements) */
.bk-lbl{font-weight:700;margin-bottom:4px}
.bk-cbs{display:flex;flex-direction:column;gap:6px}
.bk-cb{display:flex;align-items:flex-start;gap:8px;cursor:pointer;line-height:1.35}
.bk-cb input{appearance:none;-webkit-appearance:none;margin:1px 0 0;width:18px;height:18px;flex:none;border:1px solid rgba(29,28,29,.5);border-radius:4px;background:#fff;display:grid;place-items:center;cursor:pointer}
.bk-cb input:checked{background:#1264a3;border-color:#1264a3}
.bk-cb input:checked::after{content:"";width:9px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.bk-cb input:focus-visible{outline:2px solid #1264a3;outline-offset:2px}
.bk-cb input:disabled{opacity:.5}
.bk-sel{position:relative;display:inline-block;max-width:100%}
.bk-sel>button{display:flex;align-items:center;gap:8px;min-height:36px;width:100%;padding:4px 10px 4px 12px;border:1px solid var(--line-2)!important;border-radius:4px;background:#fff!important;text-align:left;font-size:15px}
.bk-sel>button:hover{border-color:rgba(29,28,29,.5)!important}
.bk-sel>button[aria-expanded="true"]{border-color:#1264a3!important;box-shadow:0 0 0 1px #1264a3}
.bk-sel>button .v{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-sel>button .ic{width:14px;height:14px;color:var(--muted)}
.bk-sel.multi>button .v{white-space:normal;display:flex;flex-wrap:wrap;gap:4px;padding:2px 0}
.bk-tok{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 4px 0 8px;border-radius:4px;background:var(--pill);font-size:13px;font-weight:700;white-space:nowrap}
.bk-tok i{font-style:normal;font-weight:400;color:var(--muted);font-size:14px;width:16px;text-align:center}
.bk-menu{position:absolute;left:0;top:calc(100% + 4px);z-index:30;min-width:100%;width:max-content;max-width:min(340px,80vw);padding:8px 0;background:#fff;border-radius:8px;box-shadow:0 0 0 1px var(--line),0 4px 12px rgba(0,0,0,.12);list-style:none;margin:0;display:none}
.bk-sel.is-open .bk-menu{display:block}
.bk-menu.up{top:auto;bottom:calc(100% + 4px)}
.bk-opt{display:flex;align-items:center;gap:10px;min-height:28px;padding:4px 24px 4px 16px;font-size:15px;cursor:pointer;white-space:nowrap}
.bk-opt .ck{width:16px;color:var(--text);visibility:hidden}
.bk-opt[aria-selected="true"] .ck{visibility:visible}
.bk-opt.is-act,.bk-opt:hover{background:#1264a3;color:#fff}
.bk-opt.is-act .ck,.bk-opt:hover .ck{color:#fff}
.bk-row{display:flex;flex-wrap:wrap;gap:8px}
.bk-row .bk-sel{flex:1 1 200px}
.bk-scope{display:flex;flex-direction:column;gap:12px;max-width:520px}

/* data_visualization block */
.bk-viz{border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px 16px;max-width:520px}
.bk-viz-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bk-viz-h b{font-weight:900}
.slk .bk-ibtn{width:28px;height:28px;border-radius:4px;border:1px solid var(--line-2);background:#fff;display:grid;place-items:center;color:var(--muted)}
.bk-ibtn .ic{width:16px;height:16px}
.bk-viz svg.ch{width:100%;height:auto;margin-top:6px;overflow:visible}
.bk-viz .gl{stroke:#ebebeb}
.bk-viz .ax{font:12px "Lato",sans-serif;fill:#616061}
.bk-viz .xl{font:700 12px "Lato",sans-serif;fill:#1d1c1d}
.bk-viz .bar{fill:#de7b3e;transform-box:fill-box;transform-origin:50% 100%;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .2s}
.bk-viz .bar:hover,.bk-viz .bar:focus{opacity:.82;outline:none}
.bk-viz .tip{pointer-events:none}
.bk-viz .tip[hidden]{display:none}
.bk-viz .tip rect{fill:#fff;stroke:rgba(29,28,29,.13);filter:drop-shadow(0 2px 4px rgba(0,0,0,.12))}
.bk-viz .tip text{font:13px "Lato",sans-serif;fill:#1d1c1d}
.bk-viz .tip .tv{font-weight:900}
.bk-leg{display:flex;justify-content:center;align-items:center;gap:6px;font-size:13px;margin-top:2px}
.bk-leg i{width:10px;height:10px;border-radius:50%;background:#de7b3e}
.slk.is-pre .bk-viz .bar{transform:scaleY(0)}

/* data_table block */
.bk-dt-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.bk-dt-h b{font-weight:900}
.bk-dt-h .ib{display:flex;gap:6px}
.bk-dt{background:#f4f4f4;border-radius:12px;padding:0 4px 4px;max-width:520px}
.bk-dt table{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;table-layout:fixed}
.bk-dt th{font-weight:700;text-align:left;color:#1d1c1d;padding:8px 10px;font-size:13px;line-height:1.25;vertical-align:bottom}
.bk-dt th button{display:inline-flex;align-items:flex-end;gap:2px;text-align:left;font-weight:700}
.bk-dt th .ic{width:12px;height:12px;color:var(--muted);visibility:hidden}
.bk-dt th[aria-sort] .ic{visibility:visible}
.bk-dt th[aria-sort="ascending"] .ic{transform:rotate(180deg)}
.bk-dt th:first-child{width:44%}
.bk-dt tbody td{background:#fff;padding:7px 10px;border-top:1px solid var(--line);line-height:1.3;vertical-align:top}
.bk-dt tbody tr:first-child td{border-top:0}
.bk-dt tbody tr:first-child td:first-child{border-top-left-radius:8px}
.bk-dt tbody tr:first-child td:last-child{border-top-right-radius:8px}
.bk-dt tbody tr:last-child td:first-child{border-bottom-left-radius:8px}
.bk-dt tbody tr:last-child td:last-child{border-bottom-right-radius:8px}
.bk-dt tbody{outline:1px solid var(--line);outline-offset:0;border-radius:8px}
.bk-dt td.num{font-variant-numeric:tabular-nums}
.bk-dt td b{font-weight:700}

/* container block */
.bk-con{border:1px solid var(--line);border-radius:12px;max-width:520px}
.slk .bk-con-h{display:flex;align-items:center;gap:8px;width:100%;padding:12px 16px;text-align:left}
.bk-con-h .tw{flex:1}
.bk-con-h b{display:block;font-weight:900;line-height:1.3}
.bk-con-h small{display:block;font-size:13px;color:var(--muted);line-height:1.35}
.bk-con-h .ic{width:16px;height:16px;color:var(--muted);transition:transform .2s}
.bk-con.is-closed .bk-con-h .ic{transform:rotate(-90deg)}
.bk-img{margin:2px 0 12px;max-width:520px}
.bk-img figcaption{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--muted);margin-bottom:6px}
.bk-img figcaption svg{width:12px;height:12px}
.bk-img-f{border:1px solid var(--line);border-radius:8px;background:#f8faf9;padding:14px 12px 12px}
svg.tr{width:100%;height:auto;display:block;overflow:visible;font-family:Lato,system-ui,sans-serif}
.tr .tn{fill:#fff;stroke:#c9d3cd;stroke-width:1}
.tr .tn.drv{fill:#1d1c1d;stroke:none}.tr .tt.w{fill:#fff}
.tr .tn.hot{stroke:#e8613c;stroke-width:1.5}.tr .tn.out.hot{fill:#fdf1ec}
.tr .tn.int{fill:#e7f5ec;stroke:#2f7a52;stroke-dasharray:4 3}
.tr .tt{font-size:12px;fill:#1d1c1d}.tr .tt.b{font-weight:700}.tr .tt.r{fill:#c2401c}.tr .tt.g{fill:#1f6b44}
.tr .tw{font-size:10.5px;fill:#616061}
.tr .te{fill:none;stroke:#a7b5ad;stroke-linecap:round}.tr .te.hot{stroke:#e8613c}
.tr .tsp{stroke:#1d1c1d;stroke-width:2}
.tr .tx{stroke:#2f7a52;stroke-width:1.5;stroke-dasharray:4 3}.tr .txd{fill:#2f7a52}
.bk-con-b{padding:0 16px 12px}
.bk-con.is-closed .bk-con-b{display:none}
.bk-con-b .bk-sec+.bk-sec{margin-top:8px}

/* context_actions block */
.bk-cact{display:flex;gap:2px;margin-top:6px}
.bk-cact button{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;color:var(--muted)}
.bk-cact button:hover{background:var(--pill);color:var(--text)}
.bk-cact button[aria-pressed="true"]{color:#1264a3}
.bk-cact .ic{width:18px;height:18px}
.bk-cact .dn{transform:scaleY(-1)}

/* ephemeral */
.slk-eph .slk-only{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:2px}
.slk-eph .slk-only .ic{width:14px;height:14px}
.slk-eph .slk-only button{color:var(--link)}
.slk-eph{background:#fff}

/* composer */
.slk-comp{flex:none;margin:0 20px 16px;border:1px solid var(--line-2);border-radius:8px;background:#fff}
.slk-comp .tb{display:flex;align-items:center;gap:2px;padding:4px 6px;background:#f8f8f8;border-radius:8px 8px 0 0;color:rgba(29,28,29,.5)}
.slk-comp .tb span{width:28px;height:28px;display:grid;place-items:center;font-size:15px}
.slk-comp .tb .ic{width:16px;height:16px}
.slk-comp .tb i{width:1px;height:20px;background:var(--line);margin:0 3px}
.slk-comp .in{padding:8px 12px;min-height:40px;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere}
.slk-comp .in.has{color:var(--text)}
.slk-comp .in .car{display:inline-block;width:1px;height:18px;background:#1d1c1d;vertical-align:-3px;animation:slk-blink 1s steps(1) infinite}
@keyframes slk-blink{50%{opacity:0}}
.slk-comp .bt{display:flex;align-items:center;gap:2px;padding:2px 6px 6px;color:var(--muted)}
.slk-comp .bt span{width:28px;height:28px;display:grid;place-items:center;border-radius:6px}
.slk-comp .bt .pl{border-radius:50%;background:var(--pill);color:var(--text)}
.slk-comp .bt .ic{width:18px;height:18px}
.slk-comp .bt i{width:1px;height:20px;background:var(--line);margin:0 3px}
.slk-comp .send{margin-left:auto;display:flex;align-items:center;border-radius:6px;color:rgba(29,28,29,.35)}
.slk-comp .send.is-go{background:var(--green);color:#fff}
.slk-comp .send.is-go span{color:#fff}
.slk-comp .send span{width:30px}
.slk-comp .send .dv{width:1px;height:18px;background:currentColor;opacity:.4}
.slk-also{display:flex;align-items:center;gap:6px;margin:-8px 20px 12px;font-size:13px;color:var(--muted)}
.slk-also i{width:14px;height:14px;border:1px solid rgba(29,28,29,.5);border-radius:3px}

/* modal (Block Kit modal surface) */
.slk-ov{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;padding:16px}
.slk-ov.is-on{display:flex;animation:slk-fade .18s ease-out}
@keyframes slk-fade{from{opacity:0}}
.slk-modal{width:min(520px,100%);max-height:100%;display:flex;flex-direction:column;background:#fff;border-radius:8px;box-shadow:0 18px 48px rgba(0,0,0,.35);animation:slk-pop .2s cubic-bezier(.16,1,.3,1)}
@keyframes slk-pop{from{transform:scale(.96);opacity:0}}
.slk-mh{display:flex;align-items:center;gap:12px;padding:16px 16px 16px 24px}
.slk-mh img{width:32px;height:32px;border-radius:6px;background:#efebe2}
.slk-mh h3{flex:1;margin:0;font-size:22px;font-weight:900;line-height:1.25;font-family:inherit;letter-spacing:0}
.slk-mh .x{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;color:var(--muted)}
.slk-mh .x:hover{background:var(--pill)}
.slk-mb{padding:4px 24px 20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.slk-mf{display:flex;justify-content:flex-end;gap:12px;padding:20px 24px;border-top:1px solid var(--line)}
.slk-mctl{display:flex;flex-direction:column;gap:18px}
.slk-mctl .bk-sel{display:block}
.slk-in .ih{font-size:13px;color:var(--muted);margin-top:4px}
.bk-alert{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:8px;background:#e8f5fa;line-height:1.4}
.bk-alert .ic{width:20px;height:20px;color:#1d9bd1;margin-top:1px}
.bk-rb{display:flex;flex-direction:column;gap:6px}
.bk-rb label{display:flex;gap:8px;align-items:center;cursor:pointer}
.bk-rb input{appearance:none;-webkit-appearance:none;margin:0;width:18px;height:18px;border-radius:50%;border:1px solid rgba(29,28,29,.5);display:grid;place-items:center}
.bk-rb input:checked{border-color:#1264a3;border-width:5px}
.bk-rb input:focus-visible{outline:2px solid #1264a3;outline-offset:2px}

/* cursor */
.slk-cur{position:absolute;left:0;top:0;z-index:60;width:22px;height:22px;pointer-events:none;opacity:0;transition:transform .75s cubic-bezier(.65,0,.35,1),opacity .25s;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.slk-cur.is-on{opacity:1}
.slk-cur.is-click{animation:slk-click .25s}
@keyframes slk-click{50%{scale:.85}}

/* playback visibility */
.slk [data-step].is-hid{display:none!important}
.slk-in-anim{animation:slk-in .35s cubic-bezier(.16,1,.3,1)}
@keyframes slk-in{from{opacity:0;transform:translateY(6px)}}

/* desktop without sidebar */
@container (max-width:1120px){.slk-side{display:none}}
/* Slack mobile: thread screen only */
@container (max-width:820px){
  .slk{grid-template-rows:minmax(0,1fr);height:clamp(560px,calc(100svh - 96px),760px);border-radius:16px}
  .slk-top,.slk-rail,.slk-main,.slk-thread .slk-ph{display:none}
  .slk-body{grid-template-columns:minmax(0,1fr)}
  .slk-panel{margin:0;border-radius:0}
  .slk-thread,.slk.is-open .slk-thread{width:100%;border-left:0}
  .slk-mob-h{display:flex;align-items:center;gap:10px;height:52px;flex:none;padding:0 12px;border-bottom:1px solid var(--line)}
  .slk-mob-h .bk{margin:0}
  .slk-mob-h .ic{width:22px;height:22px}
  .slk-mob-h .tw{flex:1;min-width:0;text-align:center}
  .slk-mob-h b{display:block;font-size:17px;font-weight:900;line-height:1.2}
  .slk-mob-h small{display:block;font-size:12px;color:var(--muted)}
  .slk-msg{padding:8px 12px;column-gap:10px}
  .slk-rline{padding:4px 12px 6px}
  .slk-comp{margin:0 8px 8px;border-radius:20px}
  .slk-comp .tb,.slk-also{display:none}
  .slk-comp .in{padding:9px 14px 4px;min-height:0}
  .slk-comp .bt{padding:0 6px 6px}
  .bk-dt th:first-child{width:38%}
  .bk-dt th,.bk-dt tbody td{padding-left:7px;padding-right:7px}
  .slk-ov{align-items:flex-end;padding:0}
  .slk-modal{width:100%;max-height:92%;border-radius:16px 16px 0 0;animation:slk-sheet .28s cubic-bezier(.16,1,.3,1)}
  .slk-modal::before{content:"";width:36px;height:4px;border-radius:2px;background:rgba(29,28,29,.2);margin:8px auto 0}
  .slk-mh{padding:10px 12px 10px 16px}
  .slk-mh h3{font-size:18px}
  .slk-mb{padding:4px 16px 16px}
  .slk-mf{padding:12px 16px}
  .slk-mf .bk-btn{flex:1}
}
@keyframes slk-sheet{from{transform:translateY(40%);opacity:.4}}
@media (prefers-reduced-motion:reduce){
  .slk *,.slk{animation:none!important;transition:none!important}
}