/* Round 4, after decagon.ai. One type scale, one content width (1160), one frame style. */
:root{
  --page:#f3f3f0; --paper:#fff; --ink:#141514; --ink2:#2d302d; --mute:#646862; --faint:#a3a6a0;
  --line:rgba(20,21,20,.11); --chip:rgba(20,21,20,.06);
  --green:#2b6a46; --green2:#3d8b5e; --mint:#9ed6b2; --mint2:#cfeedd;
  --dark:#0c0d0d; --dark2:#171918; --dark3:#202322; --dline:rgba(255,255,255,.12); --dtext:#ecedeb; --dmute:#a1a5a0;
  --w:1160px; --gut:max(20px,4vw); --r:20px; --rs:14px;
  --sans:"Figtree",-apple-system,"Segoe UI",system-ui,sans-serif; --serif:"Fraunces",Georgia,serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--page);-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:8px}
.wrap{width:100%;max-width:calc(var(--w) + 2 * var(--gut));margin:0 auto;padding-left:var(--gut);padding-right:var(--gut)}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- type scale ---------- */
.h1{font-size:76px;line-height:1;font-weight:500;letter-spacing:-.042em;text-wrap:balance}
.h2{font-size:46px;line-height:1.1;font-weight:450;letter-spacing:-.028em;text-wrap:balance}
.h3{font-size:31px;line-height:1.18;font-weight:400;letter-spacing:-.016em;text-wrap:balance}
.lead{font-size:19px;line-height:1.5;color:var(--mute);max-width:560px}
.h3 em,.h2 em{font-style:normal;color:var(--green)}

/* ---------- buttons: two styles, one height ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:50px;padding:0 24px;border-radius:999px;
  font-size:16px;font-weight:500;letter-spacing:-.005em;white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.btn:active{transform:scale(.98)}
.btn svg{width:17px;height:17px;flex:none}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:#2a2c2a}
.btn--line{background:rgba(255,255,255,.55);border-color:rgba(20,21,20,.22);color:var(--ink);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.btn--line:hover{background:rgba(255,255,255,.85);border-color:rgba(20,21,20,.4)}
.btn--light{background:#fff;color:var(--ink)}
.btn--light:hover{background:#e9eae7}
.btn--sm{height:42px;padding:0 18px;font-size:15px}

/* ---------- header: inside the hero, then a floating bar ---------- */
.hd{position:fixed;left:0;right:0;top:0;z-index:60;pointer-events:none}
.hd__bar{pointer-events:auto;max-width:1376px;margin:16px auto 0;height:76px;border-radius:16px;display:flex;align-items:center;gap:36px;
  padding:0 calc((1376px - var(--w)) / 2);transition:background .3s,box-shadow .3s,color .3s;border:1px solid transparent}
.hd.is-scrolled .hd__bar{background:rgba(243,243,240,.82);-webkit-backdrop-filter:saturate(1.5) blur(18px);backdrop-filter:saturate(1.5) blur(18px);
  border-color:rgba(20,21,20,.06);box-shadow:0 8px 30px rgba(20,21,20,.06)}
.hd.is-dark .hd__bar{background:rgba(42,44,43,.72);border-color:rgba(255,255,255,.08);color:#fff;box-shadow:none}
.word{font-family:var(--serif);font-size:27px;font-weight:600;letter-spacing:-.05em;line-height:1;font-optical-sizing:auto;white-space:nowrap}
.word span{color:var(--green)}
.hd.is-dark .word span{color:var(--mint)}
.hd__nav{display:flex;align-items:center;gap:30px;margin-right:auto}
.hd__nav a{font-size:15.5px;font-weight:450;opacity:.86;transition:opacity .2s;position:relative}
.hd__nav a:hover{opacity:1}
.hd__nav a[aria-current]{opacity:1}
.hd__nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1.5px;background:currentColor;border-radius:2px}
.hd__act{display:flex;align-items:center;gap:12px}
.hd .btn--line{background:rgba(255,255,255,.42);height:42px;padding:0 18px;font-size:15px}
.hd.is-dark .btn--line{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.hd.is-dark .btn--dark{background:#fff;color:var(--ink)}
.menu{display:none;position:relative}
.menu summary{list-style:none;width:44px;height:44px;border-radius:999px;display:grid;place-items:center;cursor:pointer;border:1px solid rgba(20,21,20,.2)}
.menu summary::-webkit-details-marker{display:none}
.menu summary svg{width:20px;height:20px}
.hd.is-dark .menu summary{border-color:rgba(255,255,255,.3)}
.menu__p{position:absolute;right:0;top:54px;width:min(300px,calc(100vw - 32px));padding:10px;border-radius:16px;background:#fff;color:var(--ink);
  box-shadow:0 24px 60px rgba(0,0,0,.18);display:flex;flex-direction:column}
.menu__p a{padding:13px 14px;border-radius:10px;font-size:17px}
.menu__p a:hover{background:var(--chip)}

/* ---------- hero card ---------- */
.hero{position:relative;padding:12px 12px 0}
.hero__card{position:relative;height:clamp(640px,calc(100svh - 24px),830px);border-radius:var(--r);overflow:hidden;background:var(--sky,#a9bc97)}
.hero__art{position:absolute;inset:0}
.hero__art img{width:100%;height:100%;object-fit:cover;object-position:62% 70%}
.hero__in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-start;padding-top:clamp(150px,22vh,200px)}
.hero__in .h1{max-width:640px}
.hero__sub{margin-top:26px;font-size:20px;line-height:1.5;color:#2c332c;max-width:470px}
.hero__cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:12px}
.hero__down{position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);z-index:3;width:56px;height:56px;border-radius:999px;background:var(--page);
  display:grid;place-items:center;box-shadow:0 0 0 1px rgba(20,21,20,.06),0 10px 24px rgba(20,21,20,.08)}
.hero__down svg{width:20px;height:20px}
.hero--rs .hero__art img{object-position:70% 62%}
.hero--rs .hero__sub{color:#2d3329}

/* ---------- customer logos ---------- */
.logos{padding:88px 0 8px}
.logos__grid{display:grid;grid-template-columns:repeat(5,1fr);row-gap:16px}
.logos__grid div{height:92px;display:grid;place-items:center;min-width:0}
.logos__grid img{height:calc(var(--h) * 1.12);width:auto;max-width:min(180px,88%);object-fit:contain;opacity:.66;filter:grayscale(1)}

/* ---------- section header ---------- */
.sec{padding:128px 0 0}
.rule{height:1px;background:var(--line)}
.pill{display:inline-flex;align-items:center;gap:9px;height:38px;padding:0 16px;border-radius:999px;background:var(--chip);font-size:15px;font-weight:500;color:var(--ink2)}
.pill::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--green)}
.sh{padding-top:32px;display:flex;flex-direction:column;align-items:flex-start}
.sh .h2{margin-top:56px}
.sh .lead{margin-top:18px}
.sh--row{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px}
.sh--row > div:first-child{display:flex;flex-direction:column;align-items:flex-start}
.sh--row .lead{max-width:640px}

/* ---------- use cases: one featured call, three more beside it ---------- */
.uc{padding-top:112px}
.story{margin-top:56px;padding-top:48px;border-top:1px solid var(--line);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.story__talk{padding-right:64px;display:flex;flex-direction:column}
.kind{display:flex;align-items:center;gap:10px;font-size:17px;font-weight:500;color:var(--ink2)}
.kind svg{width:21px;height:21px;color:var(--green);flex:none}
.story__q{margin-top:28px;display:flex;align-items:center;gap:12px;font-size:21px;color:var(--mute)}
.story__q .wave{color:var(--green2);height:16px}
.story__a{margin-top:16px;font-size:44px;line-height:1.16;letter-spacing:-.03em;font-weight:400;text-wrap:balance}
.story__who{margin-top:auto;padding-top:40px;display:flex;align-items:center;gap:16px}
.story__who img{width:60px;height:60px;border-radius:999px;object-fit:cover}
.story__who b{display:block;font-size:17px;font-weight:600}
.story__who span{display:block;font-size:16px;color:var(--mute)}
.story__out{border-left:1px solid var(--line);padding-left:64px;display:flex;flex-direction:column;justify-content:center}
.story__lab{font-size:17px;color:var(--mute)}
.story__big{margin-top:10px;font-size:76px;line-height:1;letter-spacing:-.045em;font-weight:450;
  background:linear-gradient(100deg,#1f5a39 10%,#3f9a66 90%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:8px}
.story__det{margin-top:12px;font-size:21px;color:var(--ink2)}
.story__saved{margin-top:28px;display:flex;align-items:center;gap:10px;font-size:17px;font-weight:500;color:var(--green)}
.story__saved svg{width:19px;height:19px}
.minis{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mini{background:var(--paper);border-radius:var(--r);padding:26px 26px 28px;display:flex;flex-direction:column;box-shadow:0 1px 0 rgba(20,21,20,.04)}
.mini__a{margin-top:22px;display:flex;align-items:center;gap:14px;font-size:21px;line-height:1.3;letter-spacing:-.012em}
.mini__a img{width:42px;height:42px;border-radius:999px;object-fit:cover;flex:none}
.mini__out{margin-top:auto;padding-top:26px;font-size:24px;font-weight:450;letter-spacing:-.02em;color:var(--green)}

/* ---------- the difference: words left, a tilted sheet right ---------- */
.diff{padding-top:136px}
.diff__grid{margin-top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
.diff__text p{font-size:28px;line-height:1.36;letter-spacing:-.016em;max-width:520px;text-wrap:balance}
.diff__text p + p{margin-top:28px}
.diff__text em{font-style:normal;color:var(--green)}
.slab{position:relative;height:420px;display:grid;place-items:center;perspective:1800px}
.slab::before{content:"";position:absolute;width:520px;height:360px;left:50%;top:58%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(79,170,114,.42),rgba(158,214,178,.18) 55%,transparent);filter:blur(30px)}
.slab__card{position:relative;width:520px;padding:34px 38px 38px;border-radius:16px;
  background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(240,248,243,.94));
  transform:rotateX(52deg) rotateZ(-28deg);transform-style:preserve-3d;
  box-shadow:0 1px 0 #e3ece6,0 2px 0 #dfe9e2,0 3px 0 #dbe6df,0 4px 0 #d7e3db,0 5px 0 #d3e0d7,0 6px 0 #cfddd4,0 7px 0 #cbdad0,0 8px 0 #c7d7cd,
    0 9px 0 #c3d4c9,0 10px 0 #bfd1c6,0 30px 60px rgba(31,90,57,.18)}
.slab__t{font-size:24px;font-weight:600;color:#1d5a37;letter-spacing:-.01em}
.slab__card ol{margin:18px 0 0;padding:0;list-style:none;counter-reset:n}
.slab__card li{counter-increment:n;display:block;padding:10px 0 10px 32px;text-indent:-32px;font-size:21px;line-height:1.35;color:var(--ink);font-weight:450}
.slab__card li::before{content:counter(n) ".";display:inline-block;text-indent:0;color:var(--faint);min-width:20px;margin-right:12px}
.tok{color:#1f6b45;background:rgba(61,139,94,.12);border-radius:6px;padding:0 6px}

/* ---------- dark chapter ---------- */
.dk{margin:136px 12px 0;border-radius:var(--r);background:var(--dark);color:var(--dtext);padding:104px 0 112px;position:relative;overflow:hidden}
.dk .rule{background:var(--dline)}
.dk .pill{background:rgba(255,255,255,.08);color:var(--dtext)}
.dk .pill::before{background:var(--mint)}
.dk .h3 em,.dk .h2 em{color:var(--mint)}
.tl{position:relative;margin-top:24px}
.tl__line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(255,255,255,.12)}
.tl__fill{position:absolute;left:0;top:0;width:1px;height:var(--p,0%);background:linear-gradient(180deg,rgba(158,214,178,0),var(--mint))}
.st{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:470px}
.st__dot{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:999px;background:#3a3d3b;box-shadow:0 0 0 6px var(--dark);transition:background .4s,box-shadow .4s}
.st.is-on .st__dot{background:var(--mint);box-shadow:0 0 0 6px var(--dark),0 0 22px 4px rgba(158,214,178,.45)}
.st__text{padding-right:80px}
.st__text p{margin-top:16px;font-size:19px;line-height:1.55;color:#c2c6c0;max-width:440px}
.st__vis{position:relative;display:grid;place-items:center;padding-left:56px;min-height:400px}
.st__vis > *{transform:scale(1.12);transform-origin:center}
.st__vis > .stack{transform:perspective(1600px) rotateY(-16deg) rotateX(6deg) scale(1.12)}
.st__vis::before{content:"";position:absolute;left:56%;top:55%;width:440px;height:360px;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(61,139,94,.5),rgba(61,139,94,.14) 60%,transparent);filter:blur(36px);pointer-events:none}
.glass{position:relative;border-radius:16px;color:var(--ink);background:linear-gradient(160deg,#fbfcfb,#e3efe7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(0,0,0,.2),0 30px 70px rgba(0,0,0,.45)}
.badge{position:absolute;top:-16px;right:-16px;width:40px;height:40px;border-radius:999px;background:var(--green2);display:grid;place-items:center;color:#fff;
  box-shadow:0 0 0 5px rgba(61,139,94,.25),0 6px 20px rgba(0,0,0,.4)}
.badge svg{width:20px;height:20px}

/* step 1: a live call and what it captured */
.live{position:relative;width:400px}
.live__pill{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 20px 0 10px;border-radius:14px;background:var(--green2);color:#fff;font-size:17px;font-weight:500;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 16px 40px rgba(0,0,0,.4);margin:0 0 -10px 28px;position:relative;z-index:2}
.live__pill i{width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.wave{display:inline-flex;align-items:center;gap:2.5px;height:16px}
.wave b{width:2.5px;border-radius:2px;background:currentColor;height:40%}
.wave b:nth-child(2){height:90%}.wave b:nth-child(3){height:60%}.wave b:nth-child(4){height:100%}.wave b:nth-child(5){height:50%}
.js-motion .is-on .wave b{animation:wv 1s ease-in-out infinite alternate}
.wave b:nth-child(2){animation-delay:-.4s!important}.wave b:nth-child(3){animation-delay:-.7s!important}.wave b:nth-child(4){animation-delay:-.2s!important}.wave b:nth-child(5){animation-delay:-.55s!important}
@keyframes wv{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.live__card{padding:30px 28px 14px}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid rgba(20,21,20,.08)}
.row:first-child{border-top:0}
.row span{font-size:16px;color:var(--mute)}
.row b{font-size:18px;font-weight:500;display:flex;align-items:center;gap:8px;text-align:right}
.row b svg{width:18px;height:18px;color:var(--green2);flex:none}

/* step 2: two shifts, confirmed */
.shifts{display:flex;gap:22px}
.shift{width:206px;padding:24px 22px 22px}
.shift small{display:block;font-size:15px;color:var(--mute)}
.shift strong{display:block;margin-top:14px;font-size:38px;line-height:1;font-weight:450;letter-spacing:-.03em}
.shift em{display:block;margin-top:8px;font-style:normal;font-size:16px;color:var(--ink2)}
.shift .ok{margin-top:24px;display:flex;align-items:center;gap:10px;padding-top:16px;border-top:1px solid rgba(20,21,20,.08)}
.shift .ok img{width:30px;height:30px;border-radius:999px;object-fit:cover}
.shift .ok span{font-size:15px;font-weight:600;color:var(--green)}
.shift:nth-child(2){margin-top:48px}

/* step 3: the database, sorted */
.stack{width:430px;display:flex;flex-direction:column;gap:12px;transform:perspective(1600px) rotateY(-16deg) rotateX(6deg)}
.person{display:flex;align-items:center;gap:14px;padding:16px 18px}
.person .ini{width:40px;height:40px;border-radius:999px;background:#dfe8e2;display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--ink2);flex:none}
.person b{font-size:17px;font-weight:600;margin-right:auto}
.st-chip{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;font-size:15px;font-weight:500;white-space:nowrap}
.st-chip::before{content:"";width:7px;height:7px;border-radius:999px;background:currentColor}
.st-chip--ok{background:#e1f1e7;color:#22663f}
.st-chip--wait{background:#f6ecd9;color:#8a5a12}
.st-chip--no{background:#ececea;color:#5f625e}
.stack .person:nth-child(2){margin-left:28px}.stack .person:nth-child(3){margin-left:56px}.stack .person:nth-child(4){margin-left:84px;opacity:.9}

/* inner card with a real screen */
.dk__card{margin-top:40px;border-radius:var(--r);background:var(--dark2);border:1px solid rgba(255,255,255,.06);padding:56px 40px 0;overflow:hidden}
.dk__head{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:end;padding:0 16px}
.dk__head p{font-size:19px;line-height:1.55;color:#c2c6c0;max-width:460px}
.screen{margin-top:48px;border-radius:14px 14px 0 0;overflow:hidden;border:1px solid rgba(255,255,255,.1);border-bottom:0;background:#fff;
  box-shadow:0 -10px 60px rgba(0,0,0,.35);-webkit-mask-image:linear-gradient(180deg,#000 86%,transparent);mask-image:linear-gradient(180deg,#000 86%,transparent)}
.screen img{width:100%;height:auto}
.screen--fit{max-width:848px;margin:48px auto 56px;border-radius:14px;border:1px solid rgba(255,255,255,.1);-webkit-mask-image:none;mask-image:none;padding:0}

/* integrations */
.ints{margin-top:96px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
.ints p{margin-top:16px;font-size:19px;color:#c2c6c0;max-width:380px}
.ints__grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--dline);border-left:1px solid var(--dline)}
.ints__grid div{height:92px;display:grid;place-items:center;border-right:1px solid var(--dline);border-bottom:1px solid var(--dline)}
.ints__grid img{height:var(--h);width:auto;max-width:120px;object-fit:contain;filter:brightness(0) invert(1);opacity:.72}
.ints__grid .mk{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:600;color:rgba(255,255,255,.72)}
.ints__grid .mk img{height:22px}

/* ---------- channels: words that cycle next to a photo ---------- */
.ch__grid{margin-top:72px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:80px;align-items:stretch}
.ch__text{display:flex;flex-direction:column}
.ch__text .lead{margin-top:18px}
.words{list-style:none;margin:44px 0 0;padding:0 0 30px;border-bottom:1px solid var(--line)}
.words li{font-size:68px;line-height:1.16;letter-spacing:-.035em;font-weight:450;color:var(--ink);transition:color .6s}
.js-motion .words li{color:#c9cbc5}
.js-motion .words li.is-on{color:var(--green)}
.ch__say{margin-top:26px;font-size:20px;line-height:1.45;color:var(--ink2);max-width:440px}
.ch__photo{position:relative;border-radius:var(--r);overflow:hidden;min-height:720px}
.ch__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ch__photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,106,70,0) 45%,rgba(43,106,70,.55) 100%);mix-blend-mode:multiply}

/* ---------- picture cards: the photo is the card, the label sits on it ---------- */
.grid-cards{margin-top:64px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{position:relative;height:460px;border-radius:var(--r);overflow:hidden;color:#fff;min-width:0;background:#1c1f1d}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;background:linear-gradient(180deg,rgba(10,12,11,0),rgba(10,12,11,.72))}
.card b{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;font-size:25px;line-height:1.15;font-weight:500;letter-spacing:-.02em}

/* ---------- try it ---------- */
.try__grid{margin-top:72px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:80px;align-items:center}
.try__art{position:relative;border-radius:var(--r);overflow:hidden;height:460px;display:grid;place-items:center;
  background:radial-gradient(60% 70% at 18% 110%,rgba(61,139,94,.75),transparent 70%),radial-gradient(50% 55% at 95% -5%,rgba(158,214,178,.32),transparent 70%),var(--dark)}
.try__art::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px) 0 0/22px 22px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.try__art > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85}
.try__panel{position:relative;z-index:1;display:flex;align-items:center;gap:24px;padding:22px 30px 22px 22px;border-radius:18px;background:rgba(14,16,15,.62);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14);color:#fff}
.try__panel .qr{width:124px;height:124px;border-radius:12px;background:#fff;padding:9px;flex:none}
.try__panel b{display:block;font-size:30px;font-weight:450;letter-spacing:-.02em;white-space:nowrap}
.try__panel span{display:block;margin-top:4px;font-size:17px;color:rgba(255,255,255,.78)}
.try__text .h2{margin:0}
.try__text p{margin-top:18px;font-size:19px;color:var(--mute);max-width:420px}
.try__text .btn{margin-top:36px}

/* ---------- trust ---------- */
.trust__grid{margin-top:56px;display:grid;grid-template-columns:repeat(4,1fr);background:#e6eee7;border-radius:var(--r);padding:40px 12px 44px}
.trust__grid > div{padding:0 28px}
.trust__grid > div + div{border-left:1px solid rgba(20,21,20,.1)}
.trust__grid i{width:48px;height:48px;border-radius:999px;background:#fff;display:grid;place-items:center;color:var(--green)}
.trust__grid i svg{width:22px;height:22px}
.trust__grid b{display:block;margin-top:22px;font-size:21px;line-height:1.3;font-weight:500;letter-spacing:-.01em}
.trust__grid a{text-decoration:underline;text-decoration-color:rgba(20,21,20,.3);text-underline-offset:4px}

/* ---------- closing band joined to the footer ---------- */
.end{margin:136px 12px 0;border-radius:var(--r) var(--r) 0 0;background:var(--dark);color:var(--dtext);overflow:hidden}
.close{position:relative;height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--gut)}
.close > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%}
.close::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(12,13,13,.25) 0%,rgba(12,13,13,0) 40%,rgba(12,13,13,.15) 75%,var(--dark) 100%)}
.close .h2{position:relative;z-index:2;font-size:64px;line-height:1.06;letter-spacing:-.035em;max-width:760px;color:#fff;margin-top:-70px}
.close .btn{position:relative;z-index:2;margin-top:40px}
/* The footer is /site/footer.css, shared by every page (7 Nov 2026). */

/* ---------- research: the interview player ---------- */
.play{display:inline-flex;align-items:center;gap:12px;height:52px;padding:0 22px 0 8px;border-radius:14px;border:0;background:var(--green2);color:#fff;font-size:17px;font-weight:500;cursor:pointer;
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset,0 16px 40px rgba(0,0,0,.4);margin:0 0 -10px 28px;position:relative;z-index:2}
.play i{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.2);display:grid;place-items:center}
.play i svg{width:16px;height:16px}
.play .pz{display:none}
.play.is-playing .pz{display:block}.play.is-playing .pl{display:none}
.try__art--photo > img{opacity:1}
.try__art--photo::after{display:none}
.talk{width:430px}
.talk__card{padding:30px 28px 26px}
.talk__bar{height:3px;border-radius:3px;background:rgba(20,21,20,.1);overflow:hidden;margin-bottom:18px}
.talk__bar i{display:block;height:100%;width:0;background:var(--green2)}
.talk p{font-size:17px;line-height:1.45;color:var(--mute);padding:10px 0;transition:color .3s}
.talk p b{display:block;font-size:14.5px;font-weight:600;letter-spacing:.01em;color:var(--faint);margin-bottom:2px}
.talk p.me{color:var(--ink)}
.talk p.is-now{color:var(--ink)}
.talk p.is-now b{color:var(--green)}
.concept{width:400px;padding:14px 14px 22px}
.concept img{width:100%;height:220px;object-fit:cover;border-radius:10px}
.concept p{margin:18px 10px 0;font-size:20px;line-height:1.35}
.concept small{display:block;margin:0 10px 8px;font-size:15px;color:var(--mute)}
.themes{width:430px;padding:28px 28px 22px}
.themes h4{margin:0 0 14px;font-size:22px;font-weight:600;letter-spacing:-.01em}
.th{padding:13px 0;border-top:1px solid rgba(20,21,20,.08)}
.th span{display:block;font-size:17px;font-weight:500}
.th i{display:block;margin-top:9px;height:6px;border-radius:6px;background:rgba(20,21,20,.08);overflow:hidden}
.th i::after{content:"";display:block;height:100%;width:var(--v);border-radius:6px;background:linear-gradient(90deg,#2b6a46,#4ea173)}
.quote{margin-top:12px;padding:14px 16px;border-radius:12px;background:#fff;border:1px solid rgba(20,21,20,.08);font-size:16px;line-height:1.45}
.quote em{display:block;font-style:normal;color:var(--green);font-size:15px;font-weight:600;margin-top:6px}

/* ---------- reveal: visible without JS, quiet rise with it ---------- */
.js-motion [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js-motion [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js-motion [data-reveal]{opacity:1;transform:none;transition:none}
  .js-motion .is-on .wave b{animation:none}
}

/* ---------- tablet ---------- */
@media (max-width:1180px){
  .hd__bar{padding:0 24px;margin:12px 12px 0;gap:24px}
  .hd__nav{gap:22px}
  .h1{font-size:66px}
  .hero__sub{max-width:430px}
  .hero__art img{object-position:30% 70%}
  .story__talk{padding-right:40px}.story__out{padding-left:40px}
  .story__big{font-size:62px}
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  .st__text{padding-right:48px}.st__vis{padding-left:48px}
  .live,.talk,.themes,.stack{transform:scale(.9)}
  .slab{overflow:hidden}
  .slab__card{transform:rotateX(52deg) rotateZ(-28deg) scale(.84)}
}
@media (max-width:1000px){
  .hd__nav{display:none}
  .hd__act .btn--line{display:none}
  .menu{display:block}
  .h2{font-size:40px}
  .diff__grid,.ch__grid,.try__grid,.ints,.dk__head{grid-template-columns:1fr;gap:48px}
  .slab{height:380px;overflow:visible}
  .tl__line{left:20px}
  .st{grid-template-columns:1fr;min-height:0;padding:56px 0 56px 56px}
  .st__dot{left:20px;top:72px}
  .st__text{padding-right:0}
  .st__vis{padding-left:0;margin-top:40px;justify-items:start;min-height:0}
  .st__vis::before{left:40%}
  .live,.talk,.themes,.stack{transform:none}
  .st__vis > *,.st__vis > .stack{transform:none}
  .ch__photo{min-height:520px}
  .trust__grid{grid-template-columns:1fr 1fr;row-gap:32px}
  .trust__grid > div:nth-child(3){border-left:0}
  /* tablet: the hero stacks like the phone, so the words never sit on the people */
  .hero__card{height:auto;min-height:0;display:flex;flex-direction:column}
  .hero__art{position:relative;order:2;height:520px;inset:auto;flex:none;margin-top:auto;-webkit-mask-image:linear-gradient(180deg,transparent,#000 24%);mask-image:linear-gradient(180deg,transparent,#000 24%)}
  .hero__art img{object-position:74% 100%}
  .hero--rs .hero__art img{object-position:80% 100%}
  .hero__in{order:1;height:auto;padding-top:150px;padding-bottom:8px;justify-content:flex-start}
  .diff__grid{margin-top:44px}
  .dk__head{gap:16px}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  body{font-size:16px}
  .hd__bar{height:64px;margin:10px 10px 0;padding:0 10px 0 18px;gap:12px}
  .hd .btn--dark{height:40px;padding:0 15px;font-size:14.5px}
  .word{font-size:24px}
  .hero{padding:8px 8px 0}
  .hero__card{height:auto;min-height:0;display:flex;flex-direction:column}
  .hero__art{position:relative;order:2;height:340px;inset:auto;flex:none;margin-top:auto;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%);mask-image:linear-gradient(180deg,transparent,#000 30%)}
  .hero__art img{object-position:74% 100%}
  .hero--rs .hero__art img{object-position:80% 100%}
  .hero__in{order:1;height:auto;padding-top:112px;padding-bottom:8px;justify-content:flex-start}
  .h1{font-size:43px;letter-spacing:-.04em}
  .hero__sub{font-size:18px;margin-top:18px}
  .hero__cta{margin-top:28px}
  .hero__cta .btn{flex:1 1 auto}
  .hero__down{display:none}
  .logos{padding:64px 0 0}
  .logos__grid{grid-template-columns:repeat(2,1fr);row-gap:0}
  .logos__grid div{height:80px}
  .logos__grid img{max-width:140px;height:calc(var(--h) * .9)}
  .sec{padding-top:96px}
  .sh .h2{margin-top:36px}
  .h2{font-size:34px}
  .h3{font-size:27px}
  .lead{font-size:18px}
  .sh--row{grid-template-columns:1fr}
  .uc{padding-top:96px}
  .story{grid-template-columns:1fr;margin-top:36px;padding-top:32px}
  .story__talk{padding-right:0}
  .story__q{margin-top:20px;font-size:18px}
  .story__a{font-size:31px}
  .story__who{padding-top:24px}
  .story__out{border-left:0;padding-left:0;border-top:1px solid var(--line);margin-top:28px;padding-top:24px}
  .story__big{font-size:48px}
  .story__det{font-size:18px}
  .story__saved{margin-top:18px}
  .minis{grid-template-columns:1fr;margin-top:28px;gap:12px}
  .mini{padding:22px}
  .mini__a{font-size:19px;margin-top:16px}
  .mini__out{padding-top:16px;font-size:21px}
  .diff{padding-top:96px}
  .diff__grid{margin-top:44px;gap:24px}
  .diff__text p{font-size:23px}
  .slab{height:330px;margin:0;overflow:visible}
  .slab::before{width:300px;height:220px}
  .slab__card{width:320px;padding:22px 22px 24px;transform:rotateX(40deg) rotateZ(-16deg) scale(.94)}
  .slab__t{font-size:18px}
  .slab__card li{font-size:16px;padding:6px 0 6px 32px}
  .tok{white-space:nowrap}
  .dk{margin:96px 8px 0;padding:80px 0 88px}
  .tl__line{left:8px}
  .st{padding:48px 0 48px 36px}
  .st__dot{left:8px;top:60px}
  .st__text p{font-size:17px}
  .st__vis{margin-top:32px;width:100%}
  .live,.talk,.themes,.concept{width:100%}
  .live__pill,.play{margin-left:16px}
  .shifts{gap:12px;width:100%}
  .shift{width:auto;flex:1;padding:18px 16px}
  .shift strong{font-size:27px;white-space:nowrap}
  .shift:nth-child(2){margin-top:32px}
  .stack{width:100%;transform:none}
  .stack .person:nth-child(n){margin-left:0}
  .person{padding:13px 14px;display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:8px}
  .person .ini{grid-row:span 2}
  .person .st-chip{grid-column:2;justify-self:start}
  .person b{font-size:16px}
  .st-chip{font-size:14px;height:30px}
  .dk__card{margin-top:24px;padding:40px 20px 0}
  .dk__head{gap:16px}
  .screen{margin-top:32px;margin-left:-4px;margin-right:-4px}
  .ints{margin-top:72px;gap:32px}
  .ints__grid{grid-template-columns:repeat(2,1fr)}
  .ints__grid div{height:76px}
  .ch__grid{margin-top:44px;gap:40px}
  .words{margin-top:32px}
  .words li{font-size:48px}
  .ch__say{font-size:18px}
  .ch__photo{min-height:440px}
  .grid-cards{margin-top:40px;grid-template-columns:1fr 1fr;gap:12px}
  .card{height:300px}
  .card b{left:16px;right:16px;bottom:16px;font-size:19px}
  .try__grid{margin-top:44px;gap:36px}
  .try__art{height:340px}
  .try__panel{padding:18px 22px}
  .try__panel .qr{display:none}
  .try__panel b{font-size:26px}
  .trust__grid{grid-template-columns:1fr;padding:12px 22px;row-gap:0}
  .trust__grid > div,.trust__grid > div + div{padding:22px 0;border-left:0;border-bottom:1px solid rgba(20,21,20,.1)}
  .trust__grid > div:last-child{border-bottom:0}
  .trust__grid b{font-size:19px;margin-top:16px}
  .end{margin:96px 8px 0}
  .close{height:520px}
  .close .h2{font-size:42px;margin-top:-40px}
}

/* research hero: soften the tree under the nav so the links stay readable */
.hero--rs .hero__card::after{content:"";position:absolute;left:0;right:0;top:0;height:150px;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(228,233,208,.78),rgba(228,233,208,0))}
@media (max-width:640px){
  .screen{overflow:hidden}
  .screen img{width:190%;max-width:none}
  .screen--fit img{width:200%;margin-left:-100%}
}

/* =========================================================================
   Round 5: Navid's section notes (3 Nov 2026). Old live sections rebuilt in this style.
   ========================================================================= */

/* the try-it button: solid white, so it reads as a real button on the painting and on paper */
.btn--white{background:#fff;color:var(--ink);border-color:rgba(20,21,20,.12);box-shadow:0 1px 2px rgba(20,21,20,.06),0 8px 22px rgba(20,21,20,.08)}
.btn--white:hover{background:#f4f5f2;border-color:rgba(20,21,20,.24)}
.btn--white svg{color:var(--green)}

/* customer logos: only the ones that fit the page, in one even grid */
.logos__grid--4{grid-template-columns:repeat(4,1fr)}

/* ---------- staffing: get a call from our agent ---------- */
.ring{padding-top:104px}
.ring__card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--paper);border-radius:var(--r);overflow:hidden;border:1px solid rgba(20,21,20,.07);
  box-shadow:0 1px 0 rgba(20,21,20,.04),0 30px 80px rgba(20,21,20,.07)}
.ring__art{position:relative;min-height:520px;display:grid;place-items:center;background:
  radial-gradient(60% 60% at 50% 55%,rgba(158,214,178,.55),transparent 70%),linear-gradient(160deg,#e3ede6,#d2e2d7)}
.ring__art::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(20,21,20,.07) 1px,transparent 1.2px) 0 0/22px 22px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,transparent 40%,#000);mask-image:radial-gradient(70% 70% at 50% 50%,transparent 40%,#000)}
.orb{position:relative;z-index:1;width:236px;height:236px;border-radius:999px;border:0;cursor:pointer;display:grid;place-items:center;color:#fff;
  background:radial-gradient(circle at 34% 28%,#f4fbf6 0%,#bfe5cc 30%,#5fae80 68%,#2b6a46 100%);
  box-shadow:0 30px 70px rgba(43,106,70,.35),inset 0 -10px 30px rgba(20,60,38,.25),inset 0 8px 20px rgba(255,255,255,.6)}
.orb::before{content:"";position:absolute;inset:-18px;border-radius:999px;border:1px solid rgba(61,139,94,.28)}
.orb::after{content:"";position:absolute;inset:-40px;border-radius:999px;border:1px solid rgba(61,139,94,.14)}
.orb svg{width:64px;height:64px;filter:drop-shadow(0 4px 10px rgba(20,60,38,.35))}
.js-motion .orb{animation:breathe 4.8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.ring__text{padding:64px 64px 56px;display:flex;flex-direction:column;justify-content:center}
.ring__text .h2{max-width:460px}
.ticks{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.ticks li{position:relative;padding-left:36px;font-size:18px;line-height:1.45;color:var(--ink2);max-width:440px}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:999px;background:var(--green2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.ring__form{margin-top:36px;display:flex;gap:10px;max-width:460px}
.ring__form input{flex:1;min-width:0;height:50px;padding:0 20px;border-radius:999px;border:1px solid rgba(20,21,20,.18);background:#fff;font:inherit;font-size:16px;color:var(--ink)}
.ring__form input::placeholder{color:#8a8e88}
.ring__form input:focus{outline:none;border-color:var(--green2);box-shadow:0 0 0 4px rgba(61,139,94,.15)}
.ring__form input.is-invalid{border-color:#b54a3a;box-shadow:0 0 0 4px rgba(181,74,58,.12)}
.ring__err{margin-top:12px;font-size:15px;color:#9b3f31;max-width:460px}
.ring__done{margin-top:36px;display:flex;align-items:center;gap:14px;font-size:19px;color:var(--ink)}
.ring__done i{width:44px;height:44px;border-radius:999px;background:var(--green2);display:grid;place-items:center;color:#fff;flex:none}
.ring__done i svg{width:20px;height:20px}
.ring__alt{margin-top:22px;font-size:16px;color:var(--mute);align-self:flex-start;border-bottom:1px solid rgba(20,21,20,.2);padding-bottom:2px}
.ring__alt:hover{color:var(--ink)}

/* ---------- staffing: where applicants come from, where answers land ---------- */
.flowsec{margin-top:112px}
.flowsec .h3{max-width:560px}
.flow__heads{margin-top:56px;display:grid;grid-template-columns:220px 1fr 200px 1fr 360px;font-size:15px;color:var(--dmute)}
.flow__heads span:last-child{grid-column:5}
.flow{position:relative;margin-top:18px;height:380px;display:grid;grid-template-columns:220px 1fr 200px 1fr 360px;align-items:center}
.flow__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.flow__lines path{fill:none;stroke:rgba(255,255,255,.16);stroke-width:1.2;vector-effect:non-scaling-stroke}
.flow__lines circle{fill:var(--mint)}
.flow__in{grid-column:1;display:flex;flex-direction:column;gap:16px}
.flow__in div{height:72px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid var(--dline);display:grid;place-items:center}
.flow__in img{height:var(--h);width:auto;max-width:150px;filter:brightness(0) invert(1);opacity:.82}
.flow__hub{grid-column:3;position:relative;width:200px;height:200px;border-radius:999px;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#4fa877,#2b6a46 62%,#1d4a31);box-shadow:0 0 0 10px rgba(61,139,94,.12),0 0 0 22px rgba(61,139,94,.06),0 30px 80px rgba(0,0,0,.5)}
.flow__hub .word{font-size:30px;color:#fff}
.flow__hub .word span{color:var(--mint)}
.js-motion .flow__hub{animation:hubglow 3.2s ease-in-out infinite}
@keyframes hubglow{50%{box-shadow:0 0 0 14px rgba(61,139,94,.16),0 0 0 30px rgba(61,139,94,.07),0 30px 80px rgba(0,0,0,.5)}}
.flow__out{grid-column:5;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--dline);border-left:1px solid var(--dline)}
.flow__out div{height:76px;display:grid;place-items:center;border-right:1px solid var(--dline);border-bottom:1px solid var(--dline);background:var(--dark)}
.flow__out img{height:var(--h);width:auto;max-width:104px;object-fit:contain;filter:brightness(0) invert(1);opacity:.74}
.flow__out .mk{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:rgba(255,255,255,.74);white-space:nowrap}
.flow__out .mk img{height:19px}
@media (prefers-reduced-motion:reduce){.flow__lines circle{display:none}.js-motion .flow__hub,.js-motion .orb{animation:none}}

/* ---------- staffing: industries, each photo with what the agent confirmed ---------- */
.grid-cards--ind .card{height:540px}
.card img{transition:transform 1.2s var(--ease)}
.card:hover img{transform:scale(1.04)}
.card__chip{align-self:flex-start;margin-bottom:10px;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px 0 8px;border-radius:999px;
  background:rgba(255,255,255,.94);color:var(--ink);font-size:15px;font-weight:500;box-shadow:0 8px 24px rgba(0,0,0,.18);white-space:nowrap}
.card__chip i{width:26px;height:26px;border-radius:999px;background:var(--green2);display:grid;place-items:center;color:#fff;flex:none}
.card__chip i svg{width:14px;height:14px}
.card__foot{position:absolute;left:24px;right:24px;bottom:22px;z-index:1;display:flex;flex-direction:column;gap:6px}
.card__foot b{position:static}
.card__roles{font-size:16px;line-height:1.35;color:rgba(255,255,255,.82)}

/* ---------- research: how it works with the real Studio screens ---------- */
.dk .sh .h2{color:#fff;max-width:760px}
.how{margin-top:40px}
.how__st{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:72px;align-items:center;padding:72px 0;border-top:1px solid var(--dline)}
.how__st:first-child{border-top:0}
.how__n{display:block;font-family:var(--serif);font-size:56px;line-height:1;font-weight:600;letter-spacing:-.04em;color:var(--mint);margin-bottom:22px}
.how__txt p{margin-top:16px;font-size:19px;line-height:1.55;color:#c2c6c0;max-width:400px}
.shot{margin:0;border-radius:16px;overflow:hidden;background:#fff;border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.5)}
.shot img{width:100%;height:auto}
/* step 3: the interview, playable */
.listen{border-radius:16px;background:#fff;color:var(--ink);padding:28px 30px 18px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.listen__top{display:flex;align-items:center;gap:18px;padding-bottom:22px;border-bottom:1px solid rgba(20,21,20,.08)}
.listen .play{margin:0;height:56px;width:56px;padding:0;border-radius:999px;justify-content:center;box-shadow:0 10px 24px rgba(43,106,70,.3);flex:none}
.listen .play i{width:auto;height:auto;background:none}
.listen .play i svg{width:20px;height:20px}
.listen__lab{display:flex;flex-direction:column;flex:none}
.listen__lab b{font-size:18px;font-weight:600}
.listen__lab span{font-size:15px;color:var(--mute)}
.listen .talk__bar{flex:1;height:36px;margin:0;background:none;border-radius:0;position:relative;overflow:hidden;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36' preserveAspectRatio='none'%3E%3Cg fill='black'%3E%3Crect x='0' y='14' width='2' height='8' rx='1'/%3E%3Crect x='4' y='10' width='2' height='16' rx='1'/%3E%3Crect x='8' y='6' width='2' height='24' rx='1'/%3E%3Crect x='12' y='12' width='2' height='12' rx='1'/%3E%3Crect x='16' y='4' width='2' height='28' rx='1'/%3E%3Crect x='20' y='9' width='2' height='18' rx='1'/%3E%3Crect x='24' y='13' width='2' height='10' rx='1'/%3E%3Crect x='28' y='7' width='2' height='22' rx='1'/%3E%3Crect x='32' y='11' width='2' height='14' rx='1'/%3E%3Crect x='36' y='15' width='2' height='6' rx='1'/%3E%3Crect x='40' y='8' width='2' height='20' rx='1'/%3E%3Crect x='44' y='3' width='2' height='30' rx='1'/%3E%3Crect x='48' y='10' width='2' height='16' rx='1'/%3E%3Crect x='52' y='14' width='2' height='8' rx='1'/%3E%3Crect x='56' y='6' width='2' height='24' rx='1'/%3E%3Crect x='60' y='12' width='2' height='12' rx='1'/%3E%3Crect x='64' y='9' width='2' height='18' rx='1'/%3E%3Crect x='68' y='5' width='2' height='26' rx='1'/%3E%3Crect x='72' y='13' width='2' height='10' rx='1'/%3E%3Crect x='76' y='8' width='2' height='20' rx='1'/%3E%3Crect x='80' y='11' width='2' height='14' rx='1'/%3E%3Crect x='84' y='4' width='2' height='28' rx='1'/%3E%3Crect x='88' y='12' width='2' height='12' rx='1'/%3E%3Crect x='92' y='7' width='2' height='22' rx='1'/%3E%3Crect x='96' y='14' width='2' height='8' rx='1'/%3E%3Crect x='100' y='9' width='2' height='18' rx='1'/%3E%3Crect x='104' y='6' width='2' height='24' rx='1'/%3E%3Crect x='108' y='12' width='2' height='12' rx='1'/%3E%3Crect x='112' y='10' width='2' height='16' rx='1'/%3E%3Crect x='116' y='14' width='2' height='8' rx='1'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 36' preserveAspectRatio='none'%3E%3Cg fill='black'%3E%3Crect x='0' y='14' width='2' height='8' rx='1'/%3E%3Crect x='4' y='10' width='2' height='16' rx='1'/%3E%3Crect x='8' y='6' width='2' height='24' rx='1'/%3E%3Crect x='12' y='12' width='2' height='12' rx='1'/%3E%3Crect x='16' y='4' width='2' height='28' rx='1'/%3E%3Crect x='20' y='9' width='2' height='18' rx='1'/%3E%3Crect x='24' y='13' width='2' height='10' rx='1'/%3E%3Crect x='28' y='7' width='2' height='22' rx='1'/%3E%3Crect x='32' y='11' width='2' height='14' rx='1'/%3E%3Crect x='36' y='15' width='2' height='6' rx='1'/%3E%3Crect x='40' y='8' width='2' height='20' rx='1'/%3E%3Crect x='44' y='3' width='2' height='30' rx='1'/%3E%3Crect x='48' y='10' width='2' height='16' rx='1'/%3E%3Crect x='52' y='14' width='2' height='8' rx='1'/%3E%3Crect x='56' y='6' width='2' height='24' rx='1'/%3E%3Crect x='60' y='12' width='2' height='12' rx='1'/%3E%3Crect x='64' y='9' width='2' height='18' rx='1'/%3E%3Crect x='68' y='5' width='2' height='26' rx='1'/%3E%3Crect x='72' y='13' width='2' height='10' rx='1'/%3E%3Crect x='76' y='8' width='2' height='20' rx='1'/%3E%3Crect x='80' y='11' width='2' height='14' rx='1'/%3E%3Crect x='84' y='4' width='2' height='28' rx='1'/%3E%3Crect x='88' y='12' width='2' height='12' rx='1'/%3E%3Crect x='92' y='7' width='2' height='22' rx='1'/%3E%3Crect x='96' y='14' width='2' height='8' rx='1'/%3E%3Crect x='100' y='9' width='2' height='18' rx='1'/%3E%3Crect x='104' y='6' width='2' height='24' rx='1'/%3E%3Crect x='108' y='12' width='2' height='12' rx='1'/%3E%3Crect x='112' y='10' width='2' height='16' rx='1'/%3E%3Crect x='116' y='14' width='2' height='8' rx='1'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100%;
  background:rgba(20,21,20,.16)}
.listen .talk__bar i{position:absolute;left:0;top:0;bottom:0;background:var(--green2)}
.listen__time{font-size:15px;color:var(--mute);font-variant-numeric:tabular-nums;flex:none}
.listen__lines{padding-top:8px}
.listen__lines p{display:grid;grid-template-columns:104px 1fr;gap:16px;padding:14px 0;font-size:17px;line-height:1.45;color:var(--mute);transition:color .3s;border-top:1px solid rgba(20,21,20,.06)}
.listen__lines p:first-child{border-top:0}
.listen__lines p b{font-size:15px;font-weight:600;color:#8a8e88;padding-top:2px}
.listen__lines p.me{color:var(--ink2)}
.listen__lines p.is-now{color:var(--ink)}
.listen__lines p.is-now b{color:var(--green)}
.listen__lines .fu{font-style:normal;display:inline-flex;align-items:center;height:24px;padding:0 9px;margin-left:8px;border-radius:999px;background:#e1f1e7;color:#22663f;font-size:13.5px;font-weight:600;vertical-align:2px}

/* ---------- research: what teams use it for, a list beside one picture ---------- */
.uses__grid{margin-top:64px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:72px;align-items:center}
.uses__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.uses__list li{display:flex;align-items:baseline;gap:20px;padding:20px 0;border-bottom:1px solid var(--line);font-size:26px;line-height:1.2;letter-spacing:-.018em;color:var(--ink);cursor:default;transition:color .4s}
.uses__list li span{font-size:15px;letter-spacing:0;color:var(--faint);font-variant-numeric:tabular-nums;width:24px;flex:none;transition:color .4s}
.uses__list li{position:relative}
.uses__list li::before{content:"";position:absolute;left:-20px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:999px;background:var(--green2);opacity:0;transition:opacity .4s}
.js-motion .uses__list li{color:var(--ink2)}
.js-motion .uses__list li.is-on{color:var(--green)}
.js-motion .uses__list li.is-on::before{opacity:1}
.js-motion .uses__list li.is-on span{color:var(--green)}
.uses__pics{position:relative;aspect-ratio:1310/753;border-radius:var(--r);overflow:hidden;background:#d9d6cc;max-width:100%}
.uses__pics img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.js-motion .uses__pics img{opacity:0;transition:opacity .8s var(--ease)}
.js-motion .uses__pics img.is-on{opacity:1}

/* ---------- research: try the interviewer ---------- */
.rtry{margin-top:56px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:80px;align-items:center}
.rtry__screen{display:block;position:relative;border-radius:var(--r);overflow:hidden;padding:44px;background:
  radial-gradient(60% 70% at 30% 100%,rgba(158,214,178,.6),transparent 70%),linear-gradient(160deg,#eef4f0,#dfeae2)}
.rtry__screen img{width:100%;height:auto;border-radius:14px;box-shadow:0 1px 0 rgba(20,21,20,.04),0 24px 60px rgba(20,21,20,.14);transition:transform .8s var(--ease)}
.rtry__screen:hover img{transform:translateY(-4px)}
.rtry__text p{margin-top:18px;font-size:19px;color:var(--mute);max-width:420px}
.rtry__text .btn{margin-top:36px}

/* ---------- research: questions, open, two columns ---------- */
.faq{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;column-gap:72px;border-top:1px solid var(--line)}
.faq > div{padding:30px 0 32px;border-bottom:1px solid var(--line)}
.faq h3{font-size:21px;font-weight:500;letter-spacing:-.012em;line-height:1.3}
.faq p{margin-top:10px;font-size:17px;line-height:1.55;color:var(--mute);max-width:460px}

@media (max-width:1180px){
  .flow__heads,.flow{grid-template-columns:190px 1fr 170px 1fr 330px}
  .flow__hub{width:170px;height:170px}
  .flow__hub .word{font-size:26px}
}
@media (max-width:1000px){
  .ring__card,.how__st,.uses__grid,.rtry{grid-template-columns:1fr}
  .ring__art{min-height:400px}
  .ring__text{padding:48px 40px 44px}
  .flow__heads{display:none}
  .flow{height:auto;display:flex;flex-direction:column;align-items:stretch;gap:0}
  .flow__lines{display:none}
  .flow__in{flex-direction:row;flex-wrap:wrap;gap:10px}
  .flow__in div{flex:1 1 calc(50% - 5px)}
  .flow__hub{align-self:center;width:150px;height:150px;margin:56px 0}
  .flow__hub::before,.flow__hub::after{content:"";position:absolute;left:50%;width:1px;height:46px;background:linear-gradient(180deg,rgba(158,214,178,0),var(--mint))}
  .flow__hub::before{bottom:100%;margin-bottom:10px}
  .flow__hub::after{top:100%;margin-top:10px;transform:rotate(180deg)}
  .flow__hub .word{font-size:24px}
  .how__st{gap:40px;padding:56px 0}
  .uses__grid,.rtry{gap:48px}
  .uses__pics{order:-1}
  .faq{grid-template-columns:1fr}
}
@media (max-width:640px){
  .logos__grid--4{grid-template-columns:repeat(2,1fr)}
  .ring{padding-top:72px}
  .ring__art{min-height:300px}
  .orb{width:168px;height:168px}
  .orb svg{width:48px;height:48px}
  .ring__text{padding:36px 22px 32px}
  .ticks li{font-size:17px}
  .ring__form{flex-direction:column}
  .ring__form input{flex:none;width:100%}
  .ring__form .btn{width:100%}
  .flowsec{margin-top:80px}
  .flow__out div{height:62px}
  .flow__out img{max-width:84px;height:calc(var(--h) * .82)}
  .flow__out .mk{font-size:14px}
  .grid-cards--ind{grid-template-columns:1fr}
  .grid-cards--ind .card{height:420px}
  .how__n{font-size:44px;margin-bottom:16px}
  .how__txt p{font-size:17px}
  .listen{padding:20px 18px 10px}
  .listen__top{gap:14px}
  .listen__lab span{display:none}
  .listen__lines p{grid-template-columns:1fr;gap:4px;font-size:16px}
  .uses__grid{margin-top:40px}
  .uses__list li{font-size:21px;padding:16px 0}
  .rtry{margin-top:40px}
  .rtry__screen{padding:20px}
  .faq{margin-top:40px}
  .faq h3{font-size:19px}
}
.faq p a{text-decoration:underline;text-decoration-color:rgba(20,21,20,.3);text-underline-offset:4px}
html:not(.js-motion) .uses__pics img:not(:first-child){display:none}

/* research step 4: the report for the same meal-kit study, drawn like the Studio themes panel */
.rep{border-radius:16px;background:#fbfaf7;color:var(--ink);padding:30px 32px 28px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.rep__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid rgba(20,21,20,.08)}
.rep__head h4{margin:0;font-family:var(--serif);font-size:26px;font-weight:600;letter-spacing:-.02em}
.rep__head span{font-size:15px;color:var(--mute)}
.rep__t{margin-top:20px;font-size:15px;font-weight:600;color:var(--mute)}
.rep__row{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:12px 0;border-bottom:1px solid rgba(20,21,20,.06)}
.rep__row span{font-size:17px}
.rep__row em{font-style:normal;font-family:var(--serif);font-size:16px;color:var(--mute)}
.rep__row i{grid-column:1 / -1;height:4px;border-radius:4px;background:rgba(20,21,20,.06);overflow:hidden}
.rep__row i::after{content:"";display:block;height:100%;width:var(--v);background:#2b6a46;border-radius:4px}
.rep__q{margin:22px 0 0;padding:16px 18px;border-left:3px solid var(--green2);border-radius:8px;background:#f1efe9;font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.4}
.rep__q cite{display:block;margin-top:6px;font-family:var(--sans);font-style:normal;font-size:14.5px;font-weight:600;color:var(--green)}
@media (max-width:640px){
  .rep{padding:22px 20px 20px}
  .rep__head h4{font-size:22px}
  .rep__row span{font-size:16px}
  .shot--zl img{width:165%;max-width:none}
  .dk__card .screen img{width:190%;margin-left:-90%}
}

/* =========================================================================
   Round 6 (3 Nov 2026, Navid's second pass): the live sections he prefers, in this page's type.
   ========================================================================= */

/* section headers without the label pills */
.sh .h2{margin-top:56px}
.sh--bare{padding-top:0}
.sh--bare .h2{margin-top:0}

/* customer logos: one line, "Trusted by teams at", drifting slowly */
.logos--run{padding:72px 0 0}
.logos__lab{text-align:center;font-size:15px;color:var(--mute)}
.marq{margin-top:26px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq__track{display:flex;width:max-content}
.js-motion .marq__track{animation:marq var(--marq,46s) linear infinite}
.marq:hover .marq__track{animation-play-state:paused}
.marq__set{display:flex;align-items:center;gap:80px;padding-right:80px;height:72px}
.marq__set img{height:var(--h);width:auto;max-width:170px;object-fit:contain;opacity:.62;filter:grayscale(1)}
@keyframes marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.js-motion .marq__track{animation:none}}

/* ---------- staffing: try the call, as on the live page (a window with the orb, the list beside it) ---------- */
.demo{padding-top:96px}
.demo__card{background:#fff;border-radius:20px;overflow:hidden;border:1px solid rgba(20,21,20,.07);
  box-shadow:0 30px 60px -12px rgba(18,30,22,.14),0 8px 24px rgba(18,30,22,.06)}
.demo__chrome{height:36px;display:flex;align-items:center;padding:0 16px;background:#f5f7f5;border-bottom:1px solid #e3e8e4}
.demo__lights{display:flex;gap:7px}
.demo__lights i{width:11px;height:11px;border-radius:50%;display:block;background:#d9ddd9}
.demo__inner{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:48px;padding:64px 64px}
.demo__stage{display:flex;flex-direction:column;align-items:center;gap:34px}
.uorb{position:relative;width:240px;height:240px;border-radius:50%;overflow:hidden;cursor:pointer;isolation:isolate;border:0;padding:0;
  background:radial-gradient(closest-side,#f3f8f4 0%,#e6f0e9 100%);box-shadow:0 24px 60px rgba(46,107,68,.22),0 4px 16px rgba(17,20,24,.08);transition:transform .25s ease,box-shadow .25s ease}
.uorb:hover{transform:scale(1.03);box-shadow:0 28px 70px rgba(46,107,68,.3),0 4px 16px rgba(17,20,24,.1)}
.uorb__l{position:absolute;inset:-18%;border-radius:50%;filter:blur(22px)}
.uorb__l--a{background:radial-gradient(42% 46% at 30% 28%,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 70%),radial-gradient(55% 55% at 72% 30%,rgba(46,107,68,.55) 0%,rgba(46,107,68,0) 75%)}
.uorb__l--b{background:radial-gradient(50% 55% at 70% 76%,rgba(183,217,192,.9) 0%,rgba(183,217,192,0) 72%),radial-gradient(40% 44% at 24% 70%,rgba(124,199,150,.55) 0%,rgba(124,199,150,0) 70%)}
.uorb__l--c{background:conic-gradient(from 120deg at 55% 45%,rgba(46,107,68,0) 0deg,rgba(46,107,68,.28) 90deg,rgba(183,217,192,.35) 180deg,rgba(205,229,212,.4) 260deg,rgba(46,107,68,0) 360deg)}
.js-motion .uorb__l--a{animation:udrift 17s ease-in-out infinite alternate}
.js-motion .uorb__l--b{animation:udrift 23s ease-in-out infinite alternate-reverse}
.js-motion .uorb__l--c{animation:uspin 26s linear infinite}
@keyframes uspin{to{transform:rotate(360deg)}}
@keyframes udrift{0%{transform:translate(-4%,-2%) scale(1)}50%{transform:translate(3%,4%) scale(1.06)}100%{transform:translate(-2%,3%) scale(.98)}}
.uorb__play{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center}
.uorb__play::before{content:"";width:0;height:0;margin-left:10px;border-style:solid;border-width:26px 0 26px 42px;border-color:transparent transparent transparent #fff;filter:drop-shadow(0 4px 14px rgba(17,20,24,.18))}
.demo__cta{height:52px;padding:0 44px;border-radius:999px;border:0;background:var(--green);color:#fff;font:inherit;font-size:18px;font-weight:600;cursor:pointer;transition:background .2s,transform .2s}
.demo__cta:hover{background:#245a3a;transform:translateY(-1px)}
.demo__info{background:rgba(46,107,68,.06);border:1px solid rgba(46,107,68,.12);border-radius:16px;padding:36px 38px}
.demo__info h2{font-size:30px;line-height:1.2;font-weight:450;letter-spacing:-.02em}
.demo__info .ticks{margin-top:22px}
.demo__info .ticks li{font-size:17px}
/* the call-me dialog */
.dmodal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px}
.dmodal__bg{position:absolute;inset:0;background:rgba(8,15,12,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.dmodal__box{position:relative;width:min(440px,100%);background:#fff;border-radius:20px;padding:40px 36px 34px;box-shadow:0 40px 90px rgba(8,15,12,.35)}
.dmodal__x{position:absolute;top:12px;right:14px;width:40px;height:40px;border:0;background:none;font-size:28px;line-height:1;color:#8c928c;cursor:pointer;border-radius:999px}
.dmodal__x:hover{color:var(--ink);background:var(--chip)}
.dmodal h3{font-size:24px;font-weight:500;letter-spacing:-.015em}
.dmodal p{margin-top:8px;font-size:16px;color:var(--mute)}
.dmodal .ring__form{margin-top:22px;flex-direction:column}
.dmodal .ring__form input{flex:none;width:100%}
.dmodal .ring__form .btn{width:100%}
.dmodal__done{text-align:center;padding:8px 0 2px}
.dmodal__orb{width:84px;height:84px;border-radius:50%;margin:0 auto 20px;background:radial-gradient(45% 45% at 32% 30%,rgba(255,255,255,.9) 0%,rgba(255,255,255,0) 70%),radial-gradient(closest-side,#b7d9c0 0%,#2e6b44 130%)}
.js-motion .dmodal__orb{animation:dpulse 1.6s ease-in-out infinite}
@keyframes dpulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(46,107,68,.35)}50%{transform:scale(1.06);box-shadow:0 0 0 16px rgba(46,107,68,0)}}
@media (prefers-reduced-motion:reduce){.js-motion .uorb__l,.js-motion .dmodal__orb{animation:none!important}}

/* ATS flow: a calm node instead of the green ball */
.flow__hub{width:200px;height:auto;border-radius:20px;padding:26px 0 22px;background:#1b1e1c;border:1px solid rgba(255,255,255,.14);
  box-shadow:0 0 0 8px rgba(255,255,255,.03),0 30px 80px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;gap:12px}
.js-motion .flow__hub{animation:none}
.flow__hub .word{font-size:30px}
.flow__live{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--dmute)}
.flow__live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(158,214,178,.18)}
.js-motion .flow__live::before{animation:lpulse 2s ease-in-out infinite}
@keyframes lpulse{50%{box-shadow:0 0 0 7px rgba(158,214,178,.06)}}

/* ---------- research: how it works, each real screen in the green frame from the live page ---------- */
.rhow{padding-top:128px}
.rpanel{position:sticky;top:110px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:52px;align-items:stretch;background:var(--page);padding:28px 0}
.rpanel + .rpanel{margin-top:200px}
.rpanel__copy{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:6px}
.rpanel__copy b{display:block;font-family:var(--serif);font-weight:600;font-size:84px;line-height:.95;letter-spacing:-.045em;color:var(--green)}
.rpanel__copy h3{margin-top:16px}
.rpanel__copy p{margin-top:12px;font-size:18px;line-height:1.5;color:var(--mute);max-width:32ch}
.rpanel__vis{align-self:center;min-width:0}
.gframe{position:relative;margin:0;padding:28px;border-radius:22px;overflow:hidden;isolation:isolate;background:#285b39;
  background-image:radial-gradient(ellipse at 5% 90%,#b1d278b8,transparent 45%),radial-gradient(ellipse at 90% 15%,#629778af,transparent 50%),linear-gradient(135deg,#194334,#547b3e 50%,#1c4a38);
  box-shadow:0 12px 40px rgba(35,72,46,.08)}
.gframe::before{content:"";position:absolute;inset:-80px;background:url('/decagon/assets/live/reference-brief-blur.webp') center/cover;filter:blur(32px) saturate(.8);opacity:.18;z-index:-1}
.gframe--b{background-image:radial-gradient(ellipse at 15% 10%,#9fbb64bf,transparent 50%),linear-gradient(150deg,#2c4937,#4a713f,#284c3e)}
.gframe--c{background-image:radial-gradient(ellipse at 85% 90%,#b0cf7680,transparent 45%),linear-gradient(135deg,#194d40,#376644,#567448)}
.gframe--d{background-image:radial-gradient(ellipse at 10% 90%,#b3ca708f,transparent 50%),linear-gradient(135deg,#284537,#6a8150,#23563f)}
.gframe--e{background-image:radial-gradient(ellipse at 90% 5%,#d4df9694,transparent 50%),linear-gradient(135deg,#315941,#73915b,#2c533e)}
.gglass{padding:10px;border:1px solid rgba(240,255,230,.36);background:rgba(221,255,223,.17);border-radius:15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.33),0 6px 20px rgba(13,41,23,.11);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.gglass img{display:block;width:100%;height:auto;border-radius:9px;box-shadow:0 2px 12px rgba(14,41,26,.16)}
.gglass .listen{box-shadow:0 2px 12px rgba(14,41,26,.16);border-radius:9px}
.rhow__end{height:120px}

/* ---------- research: six ways, as on the live page (rows that open one at a time beside one picture) ---------- */
.acc{margin-top:56px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:64px;align-items:center}
.acc__rows{border-top:1px solid var(--line)}
.acc__row{border-bottom:1px solid var(--line);position:relative}
.acc__head{display:block;width:100%;text-align:left;border:0;background:none;padding:20px 0;font:inherit;font-size:24px;line-height:1.2;letter-spacing:-.015em;color:var(--ink2);cursor:pointer;transition:color .3s}
.acc__row.is-on .acc__head{color:var(--ink)}
.acc__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc__body > p{overflow:hidden;font-size:17px;line-height:1.5;color:var(--mute);max-width:44ch}
.acc__row.is-on .acc__body{grid-template-rows:1fr}
.acc__row.is-on .acc__body > p{padding-bottom:20px}
.acc__prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden}
.acc__prog i{display:block;height:100%;width:0;background:var(--green)}
.js-motion .acc__row.is-on .acc__prog i{animation:accfill var(--acc,5.5s) linear forwards}
@keyframes accfill{to{width:100%}}
.acc__stage{position:relative;aspect-ratio:1310/753;border-radius:var(--r);overflow:hidden;background:#d9d6cc}
.acc__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s var(--ease)}
.js-motion .acc__stage img{opacity:0}
.js-motion .acc__stage img.is-on{opacity:1}
html:not(.js-motion) .acc__stage img:not(:first-child){display:none}
html:not(.js-motion) .acc__row.is-on .acc__body{grid-template-rows:1fr}

/* ---------- research: try it yourself, as on the live page ---------- */
.ltry{margin-top:56px;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start}
.ltry__l{display:flex;flex-direction:column;align-items:center;padding-top:12px}
.lorb{position:relative;display:grid;place-items:center;width:248px;aspect-ratio:1;border-radius:50%;overflow:hidden;
  box-shadow:0 18px 46px rgba(46,107,68,.16),0 3px 10px rgba(17,20,24,.05);transition:box-shadow .28s ease}
.lorb:hover{box-shadow:0 26px 64px rgba(46,107,68,.26),0 5px 14px rgba(17,20,24,.08)}
.lorb__g{position:absolute;inset:-14%;border-radius:50%;filter:blur(13px);background:
  radial-gradient(52% 52% at 30% 24%,#fff 0%,#fdf7ef 42%,rgba(253,247,239,0) 74%),
  radial-gradient(56% 56% at 76% 78%,#e7c5a0 0%,rgba(231,197,160,0) 68%),
  radial-gradient(64% 64% at 70% 26%,#8fc7bb 0%,rgba(143,199,187,0) 70%),
  radial-gradient(100% 100% at 50% 50%,#d5e7dd 0%,#b7d9c0 100%)}
.lorb svg{position:relative;width:50px;height:auto;color:#fff;filter:drop-shadow(0 2px 6px rgba(17,20,24,.22))}
.js-motion .lorb{animation:lbreathe 6.5s ease-in-out infinite}
.js-motion .lorb__g{animation:uspin 34s linear infinite}
@keyframes lbreathe{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-7px,0) scale(1.025)}}
.ltry__state{margin-top:22px;font-size:17px;color:var(--ink2);text-align:center}
.ltry__note{margin-top:14px;font-size:15px;color:var(--mute);text-align:center;display:flex;flex-direction:column;gap:6px;align-items:center}
.ltry__note a{text-decoration:underline;text-decoration-color:rgba(20,21,20,.3);text-underline-offset:3px}
.ltry__r{display:grid;justify-items:center}
.ltry__shot{margin:0;width:100%;max-width:300px;border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(20,21,20,.16)}
.ltry__shot img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.ltry__lab{margin:18px 0 10px;font-size:15px;color:var(--mute)}
.wplay{width:100%;max-width:340px;display:flex;align-items:center;gap:13px;padding:10px 14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(20,21,20,.06)}
.wplay .play{margin:0;width:40px;height:40px;padding:0;border-radius:50%;justify-content:center;box-shadow:none;flex:none;background:var(--green)}
.wplay .play i{width:auto;height:auto;background:none}
.wplay .play i svg{width:14px;height:14px}
.wplay .talk__bar{flex:1;position:relative;height:30px;margin:0;background:none;border-radius:0;display:flex;align-items:center;gap:2px;overflow:visible}
.wplay .talk__bar b{flex:1 1 0;min-width:0;height:var(--h,40%);border-radius:2px;background:#d8d5cd}
.wplay .talk__bar i{position:absolute;inset:0;width:0;display:flex;align-items:center;gap:2px;overflow:hidden;background:none}
.wplay__t{font-size:15px;color:var(--mute);font-variant-numeric:tabular-nums;flex:none}

/* ---------- research: questions people ask, as on the live page ---------- */
.lfaq{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:12px 32px;align-items:start}
.lfaq__col{display:flex;flex-direction:column;gap:12px}
.lfaq details{border:1px solid var(--line);border-radius:14px;background:#fff;transition:box-shadow .2s}
.lfaq details[open]{box-shadow:0 8px 24px rgba(20,21,20,.05)}
.lfaq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 22px;font-size:18px;font-weight:500;cursor:pointer}
.lfaq summary::-webkit-details-marker{display:none}
.lfaq summary::after{content:"";width:12px;height:12px;flex:none;background:linear-gradient(currentColor,currentColor) center/12px 1.6px no-repeat,linear-gradient(currentColor,currentColor) center/1.6px 12px no-repeat;color:var(--mute);transition:transform .3s var(--ease)}
.lfaq details[open] summary::after{transform:rotate(45deg)}
.lfaq details p{padding:0 22px 22px;font-size:17px;line-height:1.55;color:var(--mute)}

@media (max-width:1000px){
  .demo__inner{grid-template-columns:1fr;gap:36px;padding:44px 36px}
  .rpanel{position:static;grid-template-columns:1fr;gap:20px;padding:0}
  .rpanel + .rpanel{margin-top:72px}
  .rhow__end{height:0}
  .acc,.ltry,.lfaq{grid-template-columns:1fr}
  .acc__stage{order:-1}
}
@media (max-width:640px){
  .logos--run{padding-top:56px}
  .marq__set{gap:48px;padding-right:48px;height:60px}
  .marq__set img{max-width:130px;height:calc(var(--h) * .85)}
  .demo{padding-top:64px}
  .demo__inner{padding:32px 20px;gap:28px}
  .uorb{width:180px;height:180px}
  .uorb__play::before{border-width:20px 0 20px 32px;margin-left:8px}
  .demo__info{padding:24px 20px}
  .demo__info h2{font-size:24px}
  .dmodal__box{padding:34px 22px 26px}
  .flow__hub{width:180px}
  .rhow{padding-top:96px}
  .rpanel__copy b{font-size:52px}
  .gframe{padding:14px;border-radius:16px}
  .gglass{padding:6px;border-radius:11px}
  .gglass img{border-radius:6px}
  .acc__head{font-size:20px;padding:16px 0}
  .lorb{width:200px}
  .lfaq summary{font-size:17px;padding:18px}
  .lfaq details p{padding:0 18px 18px;font-size:16px}
}
.wplay .talk__bar b.on{background:var(--green)}
.sh > .h2:first-child{margin-top:0}
.sh--bare{padding-top:0}
.dk__card--first{margin-top:0}
.grid-cards--ind{grid-template-columns:repeat(3,1fr)}
.grid-cards--ind .card{height:500px}
@media (max-width:1180px){.grid-cards--ind{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid-cards--ind{grid-template-columns:1fr}.grid-cards--ind .card{height:420px}}
.ltry__btn{margin-top:30px}
.wplay{margin-top:22px}
@media (max-width:640px){
  .rhow__stack{padding-top:32px}
  .rpanel__vis .gframe{padding:10px;border-radius:14px}
  .rpanel__vis .gglass{padding:4px;border-radius:9px}
  .rpanel__vis .gglass img{border-radius:5px}
}
@media (max-width:640px){.flow__out{grid-template-columns:repeat(2,1fr)}.flow__out div{height:64px}.flow__out img{max-width:110px;height:var(--h)}.flow__out div:last-child{display:none}}

/* =========================================================================
   Round 7 (3 Nov 2026): Mac-window glass try card, an inbox you can click through, pop-in motion.
   ========================================================================= */

/* try the call: a glass Mac window over a soft green field (the live page's owner pick, 9 Sep 2026) */
.demo{padding-top:88px}
.demo__field{position:relative;border-radius:28px;padding:72px 0;overflow:hidden;
  background:radial-gradient(55% 70% at 18% 20%,rgba(158,214,178,.75),transparent 70%),radial-gradient(50% 60% at 85% 85%,rgba(95,174,128,.45),transparent 70%),
  radial-gradient(40% 50% at 70% 10%,rgba(231,197,160,.35),transparent 70%),linear-gradient(160deg,#e4efe7,#d3e5d9)}
.demo__field::after{content:"";position:absolute;inset:0;background:radial-gradient(rgba(20,60,38,.08) 1px,transparent 1.2px) 0 0/22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 70%);mask-image:linear-gradient(180deg,#000,transparent 70%);pointer-events:none}
.demo__field .demo__card{position:relative;z-index:1;max-width:1000px;margin:0 auto;background:rgba(255,255,255,.58);
  -webkit-backdrop-filter:blur(28px) saturate(1.5);backdrop-filter:blur(28px) saturate(1.5);border:1px solid rgba(255,255,255,.75);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.25),0 30px 60px -12px rgba(18,40,26,.18),0 8px 24px rgba(18,40,26,.08)}
.demo__chrome{position:relative;height:38px;background:rgba(255,255,255,.45);border-bottom:1px solid rgba(17,20,24,.06)}
.demo__lights i:nth-child(1){background:#ff5f57}.demo__lights i:nth-child(2){background:#febc2e}.demo__lights i:nth-child(3){background:#28c840}
.demo__title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#3a3f45;white-space:nowrap}
.umark{width:22px;height:22px;border-radius:50%;background:#fff;display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:12px;font-weight:800;color:var(--ink);box-shadow:0 0 0 1px rgba(17,20,24,.08),0 1px 4px rgba(17,20,24,.12)}
.umark i{font-style:normal;color:var(--green)}
.demo__live{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:7px;background:#e9f1ec;color:var(--green);font-size:12px;font-weight:600}
.demo__live i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.js-motion .demo__live i{animation:dlive 1.6s infinite}
@keyframes dlive{50%{opacity:.25}}
.demo__field .demo__info{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 6px 20px rgba(17,20,24,.04)}
.demo__field .demo__inner{padding:56px 60px 60px}

/* the ATS node: smaller, no status line */
.flow__hub{width:176px;padding:20px 0 18px;border-radius:18px}
.flow__hub .word{font-size:26px}
.flow__live{display:none}

/* the inbox: big, light, and you can click through it */
.inbx .sh--row{align-items:end}
.ibx{margin-top:56px;border-radius:20px;overflow:hidden;background:#fff;border:1px solid rgba(20,21,20,.08);
  box-shadow:0 1px 0 rgba(20,21,20,.03),0 40px 90px -20px rgba(20,40,28,.18),0 10px 30px rgba(20,40,28,.06)}
.ibx__bar{position:relative;height:42px;display:flex;align-items:center;padding:0 16px;background:#f7f8f6;border-bottom:1px solid #eceeea}
.ibx__bar .demo__lights i{width:11px;height:11px}
.ibx__bar .demo__title{font-size:13.5px}
.ibx__body{display:grid;grid-template-columns:200px 340px minmax(0,1fr);height:560px}
.ibx__side{border-right:1px solid #eceeea;padding:18px 12px;display:flex;flex-direction:column;gap:2px;background:#fbfbfa}
.ibx__side b{font-size:13px;font-weight:600;color:#8a8e88;padding:6px 10px 10px}
.ibx__f{display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border:0;border-radius:9px;background:none;font:inherit;font-size:15px;color:var(--ink2);cursor:pointer;text-align:left}
.ibx__f svg{width:17px;height:17px;color:#7d837c;flex:none}
.ibx__f em{margin-left:auto;font-style:normal;font-size:13px;color:#8a8e88}
.ibx__f:hover{background:#f0f2ef}
.ibx__f.is-on{background:#e9f1ec;color:var(--green)}
.ibx__f.is-on svg{color:var(--green)}
.ibx__list{border-right:1px solid #eceeea;overflow:hidden;display:flex;flex-direction:column}
.ibx__lh{display:flex;align-items:center;justify-content:space-between;height:54px;padding:0 18px;border-bottom:1px solid #eceeea;font-size:16px;font-weight:600}
.ibx__lh span{font-size:13px;font-weight:500;color:#8a8e88}
.ibx__it{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:14px 18px;border:0;border-bottom:1px solid #f1f2f0;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--ink);transition:background .2s}
.ibx__it:hover{background:#f7f8f6}
.ibx__it.is-on{background:#eef4f0;box-shadow:inset 3px 0 0 var(--green2)}
.ibx__it[hidden]{display:none}
.ibx__av{grid-row:span 2;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:13.5px;font-weight:600;color:#fff}
.ibx__n{font-size:15px;font-weight:600;display:flex;align-items:center;gap:7px;min-width:0}
.ibx__n svg{width:14px;height:14px;color:#8a8e88;flex:none}
.ibx__t{font-size:13px;color:#8a8e88}
.ibx__p{grid-column:2;font-size:14px;color:#646862;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ibx__chip{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap}
.ibx__chip--ok{background:#e1f1e7;color:#22663f}.ibx__chip--wait{background:#f6ecd9;color:#8a5a12}.ibx__chip--you{background:#e8eef7;color:#2f5d93}
.ibx__th{position:relative;overflow:hidden;background:#fdfdfc}
.ibx__pn{position:absolute;inset:0;display:flex;flex-direction:column}
.ibx__pn[hidden]{display:none}
.ibx__ph{display:flex;align-items:center;gap:12px;height:72px;padding:0 24px;border-bottom:1px solid #eceeea;background:#fff}
.ibx__ph .ibx__av{grid-row:auto;width:40px;height:40px}
.ibx__ph div{display:flex;flex-direction:column;margin-right:auto;min-width:0}
.ibx__ph b{font-size:16px}
.ibx__ph > div span{font-size:13.5px;color:#8a8e88}
.ibx__btn{height:34px;padding:0 13px;border-radius:9px;border:1px solid #e2e5e1;background:#fff;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ibx__btn--g{background:var(--green);border-color:var(--green);color:#fff}
.ibx__msgs{flex:1;padding:22px 24px;display:flex;flex-direction:column;gap:12px;overflow:hidden}
.ibx__day{align-self:center;font-size:12.5px;color:#9a9e98}
.ibx__m{max-width:78%;padding:11px 14px;border-radius:14px;font-size:15px;line-height:1.45}
.ibx__m small{display:flex;align-items:center;gap:6px;font-size:12.5px;color:#8a8e88;margin-bottom:4px}
.ibx__m small svg{width:13px;height:13px}
.ibx__m--in{align-self:flex-start;background:#f1f3f0;border-bottom-left-radius:5px}
.ibx__m--out{align-self:flex-end;background:#e4efe8;border-bottom-right-radius:5px}
.ibx__call{align-self:stretch;border:1px solid #e6e9e5;border-radius:14px;background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.ibx__ch{display:flex;align-items:center;gap:12px}
.ibx__ch i{width:34px;height:34px;border-radius:50%;background:var(--green2);display:grid;place-items:center;color:#fff;flex:none}
.ibx__ch i svg{width:16px;height:16px}
.ibx__ch b{font-size:15px}
.ibx__ch span{margin-left:auto;font-size:13px;color:#8a8e88}
.ibx__wave{height:26px;display:flex;align-items:center;gap:2px}
.ibx__wave b{flex:1;height:var(--h);border-radius:2px;background:#c9dccf}
.ibx__ans{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;font-size:14px;padding-top:8px;border-top:1px solid #f0f1ef}
.ibx__ans span{color:#8a8e88}
.ibx__ans b{font-weight:500;display:flex;align-items:center;gap:6px}
.ibx__ans b svg{width:14px;height:14px;color:var(--green2)}
.ibx__note{align-self:center;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:#fff;border:1px solid #e6e9e5;font-size:13px;font-weight:500;color:var(--ink2)}
.ibx__note svg{width:14px;height:14px;color:var(--green2)}
.js-motion .ibx__pn.is-in .ibx__msgs > *{animation:ipop .55s var(--ease) both}
.js-motion .ibx__pn.is-in .ibx__msgs > *:nth-child(2){animation-delay:.12s}.js-motion .ibx__pn.is-in .ibx__msgs > *:nth-child(3){animation-delay:.3s}
.js-motion .ibx__pn.is-in .ibx__msgs > *:nth-child(4){animation-delay:.48s}.js-motion .ibx__pn.is-in .ibx__msgs > *:nth-child(5){animation-delay:.66s}
@keyframes ipop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}

/* pop-in motion, as on the live research page: the hero wipes up, groups arrive one after another */
.js-motion .hero__in .h1,.js-motion .hero__in .hero__sub,.js-motion .hero__in .hero__cta{animation:wipe .9s cubic-bezier(.16,1,.3,1) both}
.js-motion .hero__in .hero__sub{animation-delay:.08s}.js-motion .hero__in .hero__cta{animation-delay:.16s}
@keyframes wipe{from{clip-path:inset(100% -48px -48px -48px);transform:translateY(18px)}to{clip-path:inset(-48px -48px -48px -48px);transform:none}}
.js-motion [data-pop] > *{opacity:0;transform:translateY(16px) scale(.97);transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 70ms)}
.js-motion [data-pop].is-in > *{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js-motion .hero__in .h1,.js-motion .hero__in .hero__sub,.js-motion .hero__in .hero__cta,.js-motion .ibx__pn.is-in .ibx__msgs > *{animation:none}
  .js-motion [data-pop] > *{opacity:1;transform:none;transition:none}
}

@media (max-width:1180px){.ibx__body{grid-template-columns:170px 300px minmax(0,1fr)}}
@media (max-width:1000px){
  .ibx__body{grid-template-columns:1fr;height:auto}
  .ibx__side{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid #eceeea;padding:10px 12px}
  .ibx__side b{display:none}
  .ibx__f{flex:none}
  .ibx__f em{margin-left:6px}
  .ibx__list{border-right:0;border-bottom:1px solid #eceeea}
  .ibx__th{height:440px}
}
@media (max-width:640px){
  .demo__field{padding:28px 14px;border-radius:20px}
  .demo__field .demo__inner{padding:30px 18px 28px}
  .demo__title span:not(.umark){display:none}
  .ibx__ph{padding:0 16px;gap:10px}
  .ibx__ph .ibx__btn:not(.ibx__btn--g){display:none}
  .ibx__msgs{padding:16px}
  .ibx__m{max-width:90%}
  .ibx__th{height:470px}
}
.flowsec--first{margin-top:0}
/* each green frame pops up as it arrives, like the live page */
.js-motion [data-popone]{opacity:0;transform:translateY(24px) scale(.96);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js-motion [data-popone].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js-motion [data-popone]{opacity:1;transform:none;transition:none}}
.ibx__it .ibx__chip{grid-column:3;grid-row:2;justify-self:end}
.ibx__ph button.ibx__btn{cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.ibx__ph button.ibx__btn:hover{border-color:#cfd4ce}
.ibx__ph button.ibx__btn--g:hover{background:#245a3a}
.ibx__btn.is-done{background:#e1f1e7;border-color:#e1f1e7;color:#22663f}
.ibx__btn.is-mine{background:#e8eef7;border-color:#e8eef7;color:#2f5d93}

/* =========================================================================
   Round 8 (3 Nov 2026): phone fixes, thinner try-card border, ATS logos colour on hover, industries swipe on phones.
   ========================================================================= */

/* research step 3 on phones: the waveform gets its own line instead of shrinking to a sliver */
@media (max-width:640px){
  .listen__top{flex-wrap:wrap;row-gap:14px}
  .listen__lab{flex:1}
  .listen .talk__bar{order:3;flex:1 1 100%;height:30px}
}

/* staffing try card: a thin green frame instead of a wide green field (Navid: "we can make it way smaller") */
.demo__field{padding:22px}
.demo__field .demo__card{max-width:none;border-radius:16px}
.demo__field .demo__inner{padding:60px 72px 64px}
@media (max-width:640px){
  .demo{padding-top:56px}
  .demo__field{padding:10px;border-radius:20px}
  .demo__field::after{display:none}
  .demo__field .demo__card{border-radius:13px}
  .demo__chrome{height:34px}
  .demo__lights i{width:10px;height:10px}
  .demo__field .demo__inner{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:30px 20px 24px}
  .demo__stage,.demo__field .demo__info{display:contents}
  .uorb{order:1;align-self:center;width:150px;height:150px}
  .uorb__play::before{border-width:17px 0 17px 27px;margin-left:7px}
  .demo__info h2{order:2;margin-top:24px;font-size:25px;text-align:center;text-wrap:balance}
  .demo__info .ticks{order:3;margin-top:20px;gap:12px}
  .demo__info .ticks li{font-size:16px;padding-left:32px}
  .demo__info .ticks li::before{width:21px;height:21px;top:1px}
  .demo__cta{order:4;margin-top:26px;width:100%;height:54px}
}

/* number dialog: a bottom sheet on phones, green button like "Try the call" */
.dmodal .ring__form .btn{background:var(--green);border-color:var(--green)}
.dmodal .ring__form .btn:hover{background:#245a3a}
@media (max-width:640px){
  .dmodal{align-items:flex-end;padding:0}
  .dmodal__box{width:100%;border-radius:22px 22px 0 0;padding:30px 22px calc(26px + env(safe-area-inset-bottom,0px))}
  .dmodal__box::before{content:"";position:absolute;top:9px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:5px;background:#dfe2df}
  .js-motion .dmodal:not([hidden]) .dmodal__box{animation:dsheet .42s cubic-bezier(.2,.9,.25,1)}
}
@keyframes dsheet{from{transform:translateY(100%)}to{transform:none}}

/* ATS flow: each logo turns to its own colours on a white tile when you point at it (on touch screens they light up one by one) */
.flow__in div,.flow__out div{position:relative;transition:background-color .35s,border-color .35s}
.flow img.lg-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);filter:none;opacity:0;transition:opacity .35s}
.flow__in img:not(.lg-c),.flow__out img:not(.lg-c){transition:opacity .35s}
.flow__in div:hover,.flow__in div.is-lit{background:#fff;border-color:#fff}
.flow__out div:hover,.flow__out div.is-lit{background:#fff}
.flow div:hover > img:not(.lg-c),.flow div.is-lit > img:not(.lg-c){opacity:0}
.flow div:hover > img.lg-c,.flow div.is-lit > img.lg-c{opacity:1}
.flow__out div:hover .mk,.flow__out div.is-lit .mk{color:#1d1f1d}
.flow__out div:hover .mk img,.flow__out div.is-lit .mk img{filter:none;opacity:1}
.flow__out .mk img{transition:filter .35s,opacity .35s}

/* ATS flow on phones: job boards in one row, a smaller node, ATS logos three across */
@media (max-width:640px){
  .flowsec .h3{font-size:30px}
  .flow{margin-top:36px}
  .flow__in{flex-wrap:nowrap;gap:8px}
  .flow__in div{flex:1 1 0;height:56px;border-radius:12px;min-width:0}
  .flow__in img{max-width:calc(100% - 14px);height:calc(var(--h) * .62)}
  .flow__hub{width:150px;margin:40px 0;padding:16px 0 14px}
  .flow__hub::before,.flow__hub::after{height:32px}
  .flow__hub .word{font-size:22px}
  .flow__out{grid-template-columns:repeat(3,1fr)}
  .flow__out div{height:58px}
  .flow__out div:nth-child(n+13){display:none}
  .flow__out img{max-width:78%;height:calc(var(--h) * .7)}
}

/* industries on phones: a swipeable row that turns by itself, not six cards stacked */
.ind-dots{display:none}
@media (max-width:640px){
  .grid-cards--ind{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:0 var(--gut);scroll-padding:0 var(--gut)}
  .grid-cards--ind::-webkit-scrollbar{display:none}
  .grid-cards--ind .card{flex:0 0 84%;height:440px;scroll-snap-align:start}
  .ind-dots{display:flex;justify-content:center;gap:8px;margin-top:18px}
  .ind-dots button{width:7px;height:7px;padding:0;border:0;border-radius:7px;background:rgba(20,21,20,.18);cursor:pointer;transition:width .3s,background-color .3s}
  .ind-dots button.is-on{width:22px;background:var(--green)}
}
.flow__out div:hover .mk img,.flow__out div.is-lit .mk img{content:url("/decagon/assets/logos/ondark/google-sheets.png")}

/* =========================================================================
   Round 9 (3 Nov 2026): phone polish after Navid looked on his iPhone.
   ========================================================================= */

/* phone hero: edge to edge, no page-coloured border around it */
@media (max-width:640px){
  .hero{padding:0}
  .hero__card{border-radius:0 0 26px 26px}
}

/* try card on phones: just the window lights, no centred mark */
@media (max-width:640px){
  .demo__title{display:none}
  .demo__chrome{height:30px}
}

/* ATS hover: not a white tile. The tile lifts a little and the logo shows its own colours, made readable on dark */
.flow__in div:hover,.flow__in div.is-lit{background:rgba(255,255,255,.085);border-color:rgba(255,255,255,.2)}
.flow__out div:hover,.flow__out div.is-lit{background:#1f2321}
.flow__out div:hover .mk,.flow__out div.is-lit .mk{color:#fff}
.flow div:hover > img.lg-c,.flow div.is-lit > img.lg-c{opacity:1}

/* Six ways on tablets and phones: the rows first, the picture right under them, no big hole between */
@media (max-width:1000px){
  .acc{gap:28px}
  .acc__stage{order:0}
}
@media (max-width:640px){
  .acc{margin-top:32px;gap:24px}
  .acc__stage{aspect-ratio:4/3}
  .acc__head{font-size:19px;padding:15px 0}
  .acc__body > p{font-size:16px}
}

/* research step 3 on phones: the same size as the other steps (three lines, tighter type) */
@media (max-width:640px){
  .rpanel .listen{padding:18px 16px 6px}
  .rpanel .listen .play{width:46px;height:46px}
  .rpanel .listen__top{padding-bottom:14px}
  .rpanel .listen__lab b{font-size:16px}
  .rpanel .listen__lines p{font-size:15px;line-height:1.4;padding:10px 0}
  .rpanel .listen__lines p b{font-size:13px}
  .rpanel .listen__lines p:nth-child(4){display:none}
}

/* ATS on phones: the ATS logos as the same rounded tiles as the job boards, and less empty space under them */
@media (max-width:640px){
  #ats.dk{padding-bottom:64px}
  .flow__out{gap:8px;border:0}
  .flow__out div{height:60px;border:1px solid var(--dline);border-radius:12px;background:rgba(255,255,255,.04)}
  .flow__in div{background:rgba(255,255,255,.04)}
}
/* ATS on phones: all fifteen integrations, five rows of three */
@media (max-width:640px){.flow__out div:nth-child(n+13),.flow__out div:last-child{display:grid}}
/* the white mono logos are pre-rendered images, so no colour filter is needed (WebKit blurred masked SVGs under filters) */
.flow img[src*="/logos/integrations/mono/"]{filter:none}
@media (max-width:640px){.flow__out .mk{font-size:13px;gap:6px}.flow__out .mk img{height:15px}}