/* Layout: rounded product-sheet boards stacked on a cool green-grey canvas.
   Hero = mint copy panel + live photo panel; app UI is coded, not pictured. */
:root{
  --canvas:#E4EAE6;
  --paper:#FFFFFF;
  --paper-2:#F2F6F3;
  --paper-3:#E9F0EB;
  --mint:#C8F1D6;
  --mint-2:#9FE5BA;
  --mint-3:#E6F8EC;
  --on-mint:#0A2419;
  --forest:#0E3A2B;
  --forest-2:#17513D;
  --forest-3:#1F6A50;
  --on-forest:#ECF8F1;
  --on-forest-2:rgba(236,248,241,.7);
  --lav:#DDD0F8;
  --lav-2:#B9A2EF;
  --lav-3:#F1ECFD;
  --on-lav:#21163E;
  --ink:#0B1F17;
  --ink-2:#44574D;
  --ink-3:#5E6F67;
  --line:rgba(11,31,23,.13);
  --line-2:rgba(11,31,23,.07);
  --btn:#0E3A2B;
  --btn-h:#17513D;
  --btn-fg:#F1FBF5;
  --ghost-line:rgba(11,31,23,.3);
  --good:#1D8752;
  --good-bg:#DDF5E6;
  --bad:#BE3A34;
  --bad-bg:#FBEBEA;
  --warn:#9A6514;
  --warn-bg:#FBF0DA;
  --glass:rgba(255,255,255,.86);
  --glass-line:rgba(255,255,255,.9);
  --photo-ink:#FFFFFF;
  --photo-shade:rgba(5,22,15,.82);
  --shadow:0 1px 2px rgba(11,31,23,.06),0 14px 34px -14px rgba(11,31,23,.24);
  --shadow-s:0 1px 2px rgba(11,31,23,.08),0 6px 16px -8px rgba(11,31,23,.2);
  --logo-bg:#0E3A2B;
  --logo-fg:#C8F1D6;
  --logo-spark:#DDD0F8;

  --f-display:"Funnel Display","Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r-board:32px;
  --r-card:22px;
  --pad-board:clamp(28px,1rem + 3.4vw,72px);
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --canvas:#040C09;--paper:#0B1813;--paper-2:#10211A;--paper-3:#152A21;
    --mint:#133A29;--mint-2:#73DCA0;--mint-3:#0F2A1F;--on-mint:#E2F6EA;
    --forest:#0F3527;--forest-2:#184B38;--forest-3:#21624A;--on-forest:#ECF8F1;--on-forest-2:rgba(236,248,241,.68);
    --lav:#2A2148;--lav-2:#9C86E8;--lav-3:#1B1630;--on-lav:#ECE4FF;
    --ink:#E3F0E9;--ink-2:#A9BDB2;--ink-3:#809389;
    --line:rgba(227,240,233,.14);--line-2:rgba(227,240,233,.07);
    --btn:#8FE6B4;--btn-h:#B4F0CC;--btn-fg:#062116;--ghost-line:rgba(227,240,233,.34);
    --good:#5ED596;--good-bg:#12321F;--bad:#FF7E75;--bad-bg:#33161A;--warn:#F2C26B;--warn-bg:#33270F;
    --glass:rgba(12,26,20,.86);--glass-line:rgba(227,240,233,.16);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.7);
    --shadow-s:0 1px 2px rgba(0,0,0,.4),0 8px 18px -8px rgba(0,0,0,.6);
    --logo-bg:#8FE6B4;--logo-fg:#062116;--logo-spark:#5A3FC0;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --canvas:#040C09;--paper:#0B1813;--paper-2:#10211A;--paper-3:#152A21;
  --mint:#133A29;--mint-2:#73DCA0;--mint-3:#0F2A1F;--on-mint:#E2F6EA;
  --forest:#0F3527;--forest-2:#184B38;--forest-3:#21624A;--on-forest:#ECF8F1;--on-forest-2:rgba(236,248,241,.68);
  --lav:#2A2148;--lav-2:#9C86E8;--lav-3:#1B1630;--on-lav:#ECE4FF;
  --ink:#E3F0E9;--ink-2:#A9BDB2;--ink-3:#809389;
  --line:rgba(227,240,233,.14);--line-2:rgba(227,240,233,.07);
  --btn:#8FE6B4;--btn-h:#B4F0CC;--btn-fg:#062116;--ghost-line:rgba(227,240,233,.34);
  --good:#5ED596;--good-bg:#12321F;--bad:#FF7E75;--bad-bg:#33161A;--warn:#F2C26B;--warn-bg:#33270F;
  --glass:rgba(12,26,20,.86);--glass-line:rgba(227,240,233,.16);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.7);
  --shadow-s:0 1px 2px rgba(0,0,0,.4),0 8px 18px -8px rgba(0,0,0,.6);
  --logo-bg:#8FE6B4;--logo-fg:#062116;--logo-spark:#5A3FC0;
  color-scheme:dark;
}

@font-face{font-family:"Funnel Display";src:url("../fonts/funnel-display.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url("../fonts/onest.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 96px)}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--canvas)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0}
dl,dd{margin:0}
:focus-visible{outline:2px solid var(--forest-3);outline-offset:3px;border-radius:8px}
.ic{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:-.125em}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--btn);color:var(--btn-fg);padding:10px 16px;border-radius:12px;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}
.sel{user-select:all}
[hidden]:not([hidden=until-found i]){display:none!important}

.wrap{width:100%;max-width:1392px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main{display:flex;flex-direction:column;gap:16px;padding-block:16px 0}
.board{background:var(--paper);border-radius:var(--r-board);padding:var(--pad-board);position:relative}
.board--forest{background:var(--forest);color:var(--on-forest)}

/* ---------- type ---------- */
.h2{font-family:var(--f-display);font-weight:500;font-size:clamp(2rem,1.25rem + 2.5vw,3.4rem);line-height:1.02;letter-spacing:-.028em;text-wrap:balance}
.h3{font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem);line-height:1.12;letter-spacing:-.018em;text-wrap:balance}
.h4{font-family:var(--f-display);font-weight:600;font-size:1.22rem;line-height:1.2;letter-spacing:-.012em;text-wrap:balance}
.sub{color:var(--ink-2);font-size:clamp(1rem,.96rem + .22vw,1.125rem);line-height:1.6;max-width:58ch;text-wrap:pretty}
.label{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.label--on{color:var(--on-forest-2)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(28px,3vw,48px);max-width:820px}
.sec-head--split{max-width:none;grid-template-columns:1.1fr 1fr;align-items:end;gap:20px 56px}
.sec-head--split > div{display:grid;gap:16px}
.sec-head--center{text-align:center;justify-items:center;margin-inline:auto}

/* ---------- buttons & chips ---------- */
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.55em;height:42px;padding:0 20px;border-radius:999px;border:1px solid transparent;font:600 .76rem/1 var(--f-body);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s,transform .2s var(--ease)}
.pill:active{transform:scale(.97)}
.pill .ic{font-size:1.15em}
.pill--lg{height:50px;padding:0 26px;font-size:.8rem}
.pill--dark{background:var(--btn);color:var(--btn-fg)}
.pill--dark:hover{background:var(--btn-h)}
.pill--ghost{border-color:var(--ghost-line);color:var(--ink);background:transparent}
.pill--ghost:hover{background:var(--line-2);border-color:var(--ink-3)}
.icon-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;font-size:18px;transition:background-color .2s}
.icon-btn:hover{background:var(--paper-2)}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;background:var(--paper);color:var(--ink);font:500 .78rem/1 var(--f-body)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips li{display:inline-flex;align-items:center;height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--line);font-size:.78rem;color:var(--ink-2);white-space:nowrap}
.ticks{display:grid;gap:10px}
.ticks li{position:relative;display:flex;align-items:center;min-height:20px;padding-left:30px;font-weight:500}
.ticks li::before{content:"";position:absolute;left:0;top:50%;width:20px;height:20px;margin-top:-10px;border-radius:50%;background:var(--mint)}
.ticks li::after{content:"";position:absolute;left:4px;top:50%;width:12px;height:12px;margin-top:-6px;background:var(--on-mint);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 60%,transparent);animation:ping 1.8s infinite;flex:none}
.sync-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);flex:none}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}70%{box-shadow:0 0 0 7px color-mix(in srgb,var(--good) 0%,transparent)}100%{box-shadow:0 0 0 0 transparent}}

/* avatars (initials) */
.av{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint);color:var(--on-mint);font:600 .72rem/1 var(--f-body);flex:none;font-style:normal}
.av--lav{background:var(--lav);color:var(--on-lav)}
.av--s{width:26px;height:26px;font-size:.62rem}
.av--l{width:46px;height:46px;font-size:.9rem}

/* ---------- logo ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{width:34px;height:34px;flex:none}
.brand-word{font:650 1.32rem/1 var(--f-display);letter-spacing:-.03em}
.brand--on{color:var(--on-forest);--logo-bg:var(--mint-2);--logo-fg:#062116;--logo-spark:#5A3FC0}

/* ---------- header ---------- */
.hdr{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 16px);z-index:50;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none;transition:top .35s var(--ease)}
.hdr-in{pointer-events:auto;max-width:1360px;margin-inline:auto;display:grid;grid-template-columns:1.02fr 1fr;align-items:center;padding:22px 22px 0 clamp(24px,3.4vw,48px);border-radius:28px;border:1px solid transparent;transition:background-color .35s,box-shadow .35s,padding .35s var(--ease),max-width .45s var(--ease),border-color .35s}
.hdr-in > .brand{grid-column:1;grid-row:1}
.hdr-nav{grid-column:1;grid-row:1;justify-self:end;display:flex;align-items:center;gap:4px;padding-right:clamp(16px,2vw,32px)}
.hdr-nav a{position:relative;padding:8px 10px;font-size:.9rem;font-weight:500;text-decoration:none;color:var(--ink);border-radius:999px;transition:background-color .2s}
.hdr-nav a + a::before{content:"";position:absolute;left:-4px;top:50%;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45;transform:translateY(-50%)}
.hdr-nav a:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.hdr-act{grid-column:2;grid-row:1;justify-self:end;display:flex;align-items:center;gap:8px}
.hdr-act .icon-btn{background:var(--glass);border-color:var(--glass-line);backdrop-filter:blur(8px)}
.hdr-login{background:var(--glass);border-color:var(--glass-line);backdrop-filter:blur(8px)}
.theme-btn .ic-sun{display:none}
:root[data-mode="dark"] .theme-btn .ic-sun{display:inline-block}
:root[data-mode="dark"] .theme-btn .ic-moon{display:none}
.burger{display:none}
.hdr.is-scrolled{top:calc(env(safe-area-inset-top,0px) + 10px)}
.hdr.is-scrolled .hdr-in{grid-template-columns:auto 1fr auto;max-width:1120px;padding:8px 8px 8px 18px;background:var(--glass);border-color:var(--line);box-shadow:var(--shadow);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.hdr.is-scrolled .hdr-nav{grid-column:2;justify-self:center;padding-right:0}
.hdr.is-scrolled .hdr-act{grid-column:3}
.hdr.is-scrolled .brand-mark{width:30px;height:30px}
.mnav{pointer-events:auto;max-width:1360px;margin:10px auto 0;background:var(--paper);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow);padding:12px;display:grid;gap:2px}
.mnav > a{padding:12px 14px;border-radius:14px;text-decoration:none;font:500 1.05rem/1.2 var(--f-display)}
.mnav > a:hover{background:var(--paper-2)}
.mnav-cta{display:flex;flex-wrap:wrap;gap:8px;padding:10px 6px 4px;border-top:1px solid var(--line-2);margin-top:6px}

/* ---------- hero ---------- */
.hero-board{display:grid;grid-template-columns:1.02fr 1fr;border-radius:var(--r-board);overflow:hidden;background:var(--mint);color:var(--on-mint);min-height:min(900px,calc(100svh - 32px))}
.hero-copy{display:flex;flex-direction:column;padding:112px clamp(24px,3.4vw,48px) clamp(20px,2.4vw,32px);min-width:0}
.kick{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--on-mint) 25%,transparent);font:500 .74rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.kick::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--forest-3)}
.hero-h{margin-top:22px;font-family:var(--f-display);font-weight:620;text-transform:uppercase;font-size:clamp(2.35rem,1.05rem + 3.55vw,4.55rem);line-height:.97;letter-spacing:-.022em}
.hero-faces{display:inline-flex;align-items:center;vertical-align:.32em;margin-inline:.18em .1em;padding:4px 14px 4px 4px;border-radius:999px;background:var(--paper);color:var(--ink-2);font:500 .72rem/1.15 var(--f-body);letter-spacing:0;text-transform:none;box-shadow:var(--shadow-s);white-space:nowrap}
.hero-faces img{width:34px;height:34px;border-radius:50%;border:2px solid var(--paper);object-fit:cover}
.hero-faces img + img{margin-left:-11px}
.hero-faces span{margin-left:9px;white-space:nowrap}
.hero-rule{height:1px;background:currentColor;opacity:.22;margin:30px 0 22px}
.hero-lede{display:flex;gap:12px;max-width:47ch;font-size:clamp(1rem,.96rem + .2vw,1.1rem);line-height:1.55;color:color-mix(in srgb,var(--on-mint) 82%,transparent)}
.hero-lede .dot{width:8px;height:8px;margin-top:.55em;border-radius:50%;background:var(--on-mint);flex:none}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.hero-board .pill--ghost{border-color:color-mix(in srgb,var(--on-mint) 34%,transparent);color:var(--on-mint)}
.hero-foot{margin-top:auto;padding-top:40px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:10px;align-items:stretch}
.hf-card,.hf-live{background:var(--paper);color:var(--ink);border-radius:20px;padding:12px}
.hf-card{display:flex;gap:12px;align-items:center}
.hf-go{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--btn);color:var(--btn-fg);flex:none;font-size:17px}
.hf-list{flex:1;display:grid;gap:5px;min-width:0}
.hf-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.8rem;font-weight:500;line-height:1.25}
.hf-list i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);flex:none;transition:background-color .3s,border-color .3s}
.hf-list i.on{background:var(--forest-3);border-color:var(--forest-3);box-shadow:inset 0 0 0 2.5px var(--paper)}
.hf-live{display:grid;align-content:space-between;gap:6px;padding:12px 14px}
.hf-live-k{display:flex;align-items:center;gap:7px;font-size:.74rem;color:var(--ink-3)}
.hf-live-v{font:500 1rem/1 var(--f-display);color:var(--ink)}
.hf-live-v b{font:600 1.5rem/1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hf-bar{height:6px;border-radius:9px;background:var(--paper-3);overflow:hidden}
.hf-bar i{display:block;height:100%;width:calc(var(--p) * 100%);background:var(--forest-3);border-radius:inherit;transition:width .8s var(--ease)}
@keyframes nudge{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}

.hero-media{position:relative;min-height:560px;overflow:hidden;background:var(--paper-3);isolation:isolate}
.hm-img,.hm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.hm-shade{position:absolute;inset:0;background:linear-gradient(to top,var(--photo-shade) 0%,transparent 42%);opacity:.75;pointer-events:none}
.hm-tags{position:absolute;left:clamp(16px,2vw,28px);top:100px;display:grid;grid-template-columns:repeat(3,auto);gap:6px;justify-content:start}
.tag{display:inline-flex;align-items:center;justify-content:center;height:30px;min-width:30px;padding:0 13px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);color:var(--ink);font-size:.8rem;font-weight:500;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tag--o{padding:0;width:30px;font-size:14px}
.hm-overlay{position:absolute;inset:0;pointer-events:none}
.lc{position:absolute;width:min(270px,64%);background:var(--glass);color:var(--ink);border:1px solid var(--glass-line);border-radius:18px;padding:12px;box-shadow:var(--shadow);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);font-size:.8rem;transition:opacity .5s var(--ease),transform .6s var(--ease)}
.lc-call{right:clamp(14px,2vw,28px);top:150px}
.lc-ai{left:clamp(14px,2vw,28px);top:262px}
.lc-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.78rem}
.lc-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--mint);color:var(--on-mint);font-size:14px}
.lc-ic--lav{background:var(--lav);color:var(--on-lav)}
.lc-time{margin-left:auto;font:500 .74rem/1 var(--f-mono);font-variant-numeric:tabular-nums;color:var(--ink-3)}
.lc-who{display:flex;align-items:center;gap:10px;margin-top:10px}
.lc-who b{display:block;font-weight:600;font-size:.88rem}
.lc-who small{display:block;font:500 .72rem/1.3 var(--f-mono);color:var(--ink-3)}
.lc-match{display:flex;align-items:center;gap:6px;margin-top:10px;padding:6px 9px;border-radius:10px;background:var(--good-bg);color:var(--good);font-size:.74rem;font-weight:600;transition:opacity .4s,transform .4s var(--ease)}
.lc-badge{margin-left:auto;font-size:.66rem;font-weight:600;padding:3px 8px;border-radius:999px;background:var(--good-bg);color:var(--good);transition:opacity .4s}
.lc-lines{display:grid;gap:5px;margin-top:9px}
.lc-lines li{display:flex;gap:8px;align-items:baseline;line-height:1.35;transition:opacity .4s,transform .4s var(--ease)}
.lc-lines li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lav-2);flex:none;transform:translateY(-2px)}
/* animated states (only when JS drives the sequence) */
.hm-overlay.js .lc{opacity:0;transform:translateY(12px) scale(.97)}
.hm-overlay.js .lc.show{opacity:1;transform:none}
.hm-overlay.js [data-lc-match],.hm-overlay.js [data-lc-saved]{opacity:0}
.hm-overlay.js [data-lc-match].show,.hm-overlay.js [data-lc-saved].show{opacity:1}
.hm-overlay.js .lc-lines li{opacity:0;transform:translateX(-6px)}
.hm-overlay.js .lc-lines li.show{opacity:1;transform:none}
.lc-call.ringing .lc-ic{animation:ring .9s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}

.wave{position:absolute;left:0;right:0;bottom:70px;height:36%;display:flex;align-items:center;gap:clamp(4px,.6vw,8px);padding-inline:clamp(10px,1.4vw,20px);pointer-events:none}
.wave i{flex:1;height:100%;border-radius:999px;background:var(--mint-2);transform:scaleY(var(--s,.2));transform-origin:50% 50%;transition:transform .16s linear;opacity:.92}
.wave i:nth-child(5n+3){background:var(--lav-2)}
.wave--sm{bottom:0;height:24%;opacity:.95}
.hm-bar{position:absolute;left:clamp(12px,1.6vw,22px);right:clamp(12px,1.6vw,22px);bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--photo-ink);font-size:.8rem}
.hm-live{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:rgba(5,22,15,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hm-live b{font:500 .8rem/1 var(--f-mono);font-variant-numeric:tabular-nums}
.hm-ctrls{display:flex;gap:6px}
.hm-ctrls i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:rgba(5,22,15,.35);font-size:15px;backdrop-filter:blur(8px)}

/* ---------- tour ---------- */
.tour-head{display:grid;grid-template-columns:1fr 1fr;gap:28px 64px;align-items:start}
.tour-side{display:grid;gap:18px}
.tour-tabs{display:grid;border-top:1px solid var(--line)}
.tour-tabs button{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:12px 4px 12px 12px;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;transition:background-color .2s}
.tour-tabs button::after{content:"";width:30px;height:30px;border-radius:50%;background:var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7C73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E") center/14px no-repeat;transition:background-color .2s,transform .3s var(--ease)}
.tour-tabs button:hover{background:var(--paper-2)}
.tour-tabs button[aria-selected="true"]{background:var(--mint-3)}
.tour-tabs button[aria-selected="true"]::after{background-color:var(--mint-2);transform:rotate(45deg)}
.tt-k{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--line);font:500 .7rem/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tour-tabs button[aria-selected="true"] .tt-k{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.tt-v{font-size:.92rem;color:var(--ink-2);min-width:0}
.tt-prog{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:var(--forest-3)}
.tour-stage{display:grid;grid-template-columns:minmax(250px,320px) minmax(0,1fr);gap:16px;margin-top:clamp(28px,3vw,44px);align-items:stretch}
.tour-info{display:flex;flex-direction:column;gap:16px;background:var(--paper-2);border-radius:var(--r-card);padding:26px}
.tour-info article{display:grid;gap:14px}
.tour-info article p{color:var(--ink-2)}
.seg--view{align-self:flex-start;border:1px solid var(--line);background:var(--paper)}
.seg--view button{border:0;background:none;padding:7px 14px;border-radius:999px;font-size:.78rem;font-weight:600;color:var(--ink-3);cursor:pointer}
.seg--view button[aria-pressed="true"]{background:var(--btn);color:var(--btn-fg)}
.tour-shot{grid-column:2;grid-row:1;margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow);align-self:start}
.tour-shot img{width:100%;height:auto;display:block}
.tour-legend{margin-top:auto;display:flex;gap:10px;align-items:baseline;padding-top:16px;border-top:1px solid var(--line);font-size:.82rem;color:var(--ink-3)}

/* ---------- app (coded product UI) ---------- */
.app{--app-r:20px;display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:var(--app-r);overflow:hidden;box-shadow:var(--shadow);font-size:13px;line-height:1.4;min-width:0}
.app-top{display:flex;align-items:center;gap:12px;padding:9px 12px;background:var(--paper-2);border-bottom:1px solid var(--line-2)}
.app-dots{display:flex;gap:6px}
.app-dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.app-url{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:9px;background:var(--paper);color:var(--ink-3);font:500 .72rem/1 var(--f-mono);overflow:hidden;white-space:nowrap}
.app-url span{overflow:hidden;text-overflow:ellipsis}
.app-sync{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;border-radius:999px;background:var(--good-bg);color:var(--good);font-size:.74rem;font-weight:600;white-space:nowrap;transition:background-color .3s}
.app-sync.flash .sync-dot{animation:ping .9s 2}
.app-sync.busy{background:var(--warn-bg);color:var(--warn)}
.app-sync.busy .sync-dot{background:var(--warn)}
.app-body{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) minmax(250px,300px);min-height:500px;flex:1}
.app-rail{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 0;background:var(--forest);color:var(--on-forest-2)}
.ar-logo{--logo-bg:var(--mint-2);--logo-fg:#062116;--logo-spark:#5A3FC0}
.ar-logo svg{width:30px;height:30px;display:block;margin-bottom:10px}
.app-rail i{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font-size:16px}
.app-rail i.on{background:var(--forest-2);color:var(--mint-2)}
.app-main{position:relative;padding:16px;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:12px}
.app-dial{position:relative;display:flex;flex-direction:column;gap:12px;padding:14px;background:var(--paper-2);border-left:1px solid var(--line-2);min-width:0}
.app-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.app-main > *,.app-dial > *{min-width:0}
.dp-q,.dp-card,.cm-panel,.cm-box,.cm-tr-wrap{grid-template-columns:minmax(0,1fr)}
.fx-pkt{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:.7rem;font-weight:600;white-space:nowrap;box-shadow:var(--shadow-s);will-change:transform}
.fx-pkt .ic{font-size:12px}

/* app: shared bits */
.cm-crumb{display:flex;align-items:center;gap:6px;font-size:.72rem;color:var(--ink-3)}
.cm-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cm-title{font:600 1.05rem/1.2 var(--f-display);letter-spacing:-.01em}
.cm-tools{display:flex;gap:6px}
.ab{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:9px;border:1px solid var(--line);background:var(--paper);font-size:.74rem;font-weight:600;white-space:nowrap;transition:background-color .2s,color .2s,transform .15s,box-shadow .2s}
.ab .ic{font-size:13px}
.ab--pri{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.ab--mint{background:var(--mint);border-color:transparent;color:var(--on-mint)}
.ab--bad{background:var(--bad);border-color:var(--bad);color:#fff}
.ab.press{transform:scale(.93);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint-2) 60%,transparent)}
.st{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:.68rem;font-weight:600;white-space:nowrap;background:var(--paper-3);color:var(--ink-2)}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st--dial{background:var(--lav-3);color:color-mix(in srgb,var(--lav-2) 70%,var(--ink))}
.st--ring{background:var(--warn-bg);color:var(--warn)}
.st--conn{background:var(--good-bg);color:var(--good)}
.st--done{background:var(--paper-3);color:var(--ink-2)}
.st--bad{background:var(--bad-bg);color:var(--bad)}
.st--q{background:transparent;color:var(--ink-3);border:1px dashed var(--line)}
.st--q::before{display:none}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.92em}
.cm-table{border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.cm-tr{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) 56px 100px;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--line-2);transition:background-color .35s}
.cm-tr:first-child{border-top:0}
.cm-th{font-size:.66rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;background:var(--paper-2)}
.cm-name{display:flex;align-items:center;gap:8px;min-width:0;font-weight:600}
.cm-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-tr.cur{background:var(--mint-3)}
.cm-tr.hit,.hit{animation:hit 1.1s var(--ease)}
@keyframes hit{0%{box-shadow:inset 0 0 0 999px color-mix(in srgb,var(--mint-2) 45%,transparent)}100%{box-shadow:inset 0 0 0 999px transparent}}
.cm-panel{border:1px solid var(--line-2);border-radius:14px;padding:10px 12px;display:grid;gap:6px}
.cm-ph{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.cm-done{display:grid;grid-template-columns:minmax(0,1fr) auto 52px 64px;gap:10px;align-items:center;font-size:.76rem;padding:4px 0;border-top:1px dashed var(--line-2)}
.cm-done:first-of-type{border-top:0}
.cm-new{animation:drop .5s var(--ease)}
@keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.cm-rec{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--line-2);border-radius:14px}
.cm-rec b{display:block;font:600 1rem/1.2 var(--f-display)}
.cm-rec small{display:block;color:var(--ink-3);font-size:.74rem}
.cm-rec .st{margin-left:auto}
.cm-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.cm-fields div{padding:9px 10px;border-radius:12px;background:var(--paper-2);min-width:0}
.cm-fields dt{font-size:.64rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.cm-fields dd{font-weight:600;font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.cm-box{border:1px solid var(--line-2);border-radius:14px;padding:10px 12px;display:grid;gap:7px;align-content:start;min-width:0}
.cm-box h5{margin:0;font-size:.66rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;font-weight:500;display:flex;align-items:center;gap:6px}
.cm-box li{display:flex;gap:8px;align-items:baseline;font-size:.78rem;line-height:1.35;transition:background-color .3s,opacity .3s}
.cm-box li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-3);flex:none;transform:translateY(-2px)}
.cm-box li.lit{background:var(--mint-3);border-radius:6px;box-shadow:0 0 0 4px var(--mint-3)}
.cm-box li.lit::before{background:var(--good)}
.cm-box li.pend{opacity:.0}
.cm-note{font-size:.78rem;color:var(--ink-2);font-style:italic;min-height:1.4em}
.typing::after{content:"";display:inline-block;width:2px;height:1em;background:currentColor;margin-left:2px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.tr-line{display:grid;gap:2px;padding:7px 10px;border-radius:12px;background:var(--paper-2);font-size:.78rem;max-width:92%;animation:drop .4s var(--ease)}
.tr-line small{font-size:.64rem;color:var(--ink-3)}
.tr-line--me{justify-self:end;background:var(--mint-3)}
.cm-tr-wrap{display:grid;gap:6px;align-content:start}

/* dialer panel */
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dp-title{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.82rem}
.dp-title svg{width:22px;height:22px}
.dp-card{background:var(--paper);border:1px solid var(--line-2);border-radius:16px;padding:12px;display:grid;gap:10px}
.dp-who{display:flex;align-items:center;gap:10px;min-width:0}
.dp-who b{display:block;font-weight:600;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-who small{display:block;font-size:.72rem;color:var(--ink-3)}
.dp-who > div{min-width:0}
.dp-time{font:500 1.5rem/1 var(--f-mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.dp-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dp-ring{position:relative;width:118px;height:118px;margin-inline:auto}
.dp-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.dp-ring circle{fill:none;stroke-width:10}
.dp-ring .trk{stroke:var(--paper-3)}
.dp-ring .val{stroke:var(--forest-3);stroke-linecap:round;transition:stroke-dashoffset .8s var(--ease)}
.dp-ring .val2{stroke:var(--lav-2);stroke-linecap:round}
.dp-ring-c{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.dp-ring-c b{font:600 1.5rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.dp-ring-c small{font-size:.66rem;color:var(--ink-3)}
.dp-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dp-stats div{padding:8px;border-radius:12px;background:var(--paper);border:1px solid var(--line-2);text-align:center;min-width:0}
.dp-stats b{display:block;font:600 1.05rem/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.dp-stats small{display:block;font-size:.62rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dp-meta{font-size:.72rem;color:var(--ink-3);display:grid;gap:3px}
.dp-ctrl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dp-ctrl span{display:grid;justify-items:center;gap:4px;padding:9px 4px;border-radius:12px;background:var(--paper);border:1px solid var(--line-2);font-size:.66rem;font-weight:600;transition:background-color .25s,color .25s,transform .15s}
.dp-ctrl span .ic{font-size:16px}
.dp-ctrl span.on{background:var(--btn);color:var(--btn-fg);border-color:var(--btn)}
.dp-ctrl span.press{transform:scale(.92)}
.dp-btns{display:flex;gap:6px}
.dp-btns .ab{flex:1;justify-content:center;height:36px}
.dp-q{display:grid;gap:6px}
.dp-qi{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:12px;background:var(--paper);border:1px solid var(--line-2);font-size:.74rem}
.dp-qi span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dp-toast{background:var(--forest);color:var(--on-forest);border-radius:16px;padding:12px;display:grid;gap:10px;animation:drop .5s var(--ease)}
.dp-toast .dp-who small{color:var(--on-forest-2)}
.dp-toast .ab{border-color:transparent}
.dp-toast .ring-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint-2);color:var(--forest);animation:ring .9s ease-in-out infinite;flex:none}
.dp-match{display:flex;align-items:center;gap:6px;padding:6px 9px;border-radius:10px;background:color-mix(in srgb,var(--mint-2) 22%,transparent);color:var(--mint-2);font-size:.72rem;font-weight:600}
.eq{display:inline-flex;align-items:center;gap:2px;height:14px}
.eq i{width:3px;height:100%;border-radius:2px;background:currentColor;animation:eq 1s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:-.3s}.eq i:nth-child(3){animation-delay:-.6s}.eq i:nth-child(4){animation-delay:-.15s}
@keyframes eq{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}

/* ---------- about (who we are) ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(32px,5vw,84px);align-items:center;overflow:hidden}
.about-copy{display:grid;gap:18px;align-content:start}
.about .h2{color:var(--on-forest)}
.statement{font-family:var(--f-display);font-weight:380;font-size:clamp(1.18rem,1rem + .62vw,1.55rem);line-height:1.4;letter-spacing:-.012em;max-width:46ch;text-wrap:pretty}
.statement .w{transition:opacity .35s}
.statement.js .w{opacity:.4}
.statement.js .w.lit{opacity:1}
.about-p{color:var(--on-forest-2);max-width:62ch;font-size:.96rem}
.about-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:6px}
.about-facts div{display:grid;gap:6px;align-content:start;padding:14px 16px;border-radius:18px;background:var(--forest-2)}
.about-facts dt{display:flex;align-items:center;gap:8px;font:600 1rem/1.25 var(--f-display);color:var(--mint-2)}
.about-facts dd{color:var(--on-forest-2);font-size:.86rem;line-height:1.45}
.about-vis{position:relative;padding:34px 30px 40px 26px;min-width:0}
.about-photo{margin:0;border-radius:26px;overflow:hidden;aspect-ratio:4/4.5;background:var(--forest-2);box-shadow:0 40px 70px -30px rgba(0,0,0,.6)}
.about-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.about-card{position:absolute;left:0;top:0;width:clamp(170px,16vw,236px);aspect-ratio:1.7;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:20px;background:var(--lav);color:var(--on-lav);box-shadow:0 26px 50px -20px rgba(0,0,0,.55);transform:rotate(-5deg) translateY(var(--py,0px))}
.about-logo{width:clamp(34px,3vw,46px);height:clamp(34px,3vw,46px)}
.about-word{font:650 clamp(1.55rem,1rem + 1.3vw,2.3rem)/1 var(--f-display);letter-spacing:-.04em}
.about-node{position:absolute;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:999px;background:var(--glass);color:var(--ink);border:1px solid var(--glass-line);box-shadow:var(--shadow);font-size:.82rem;font-weight:600;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);animation:bob 6s ease-in-out infinite}
.about-node i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--on-mint);font-size:14px}
.about-node.n1{right:0;top:22%}
.about-node.n2{left:4px;top:52%;animation-delay:-2s}
.about-node.n2 i{background:var(--lav);color:var(--on-lav)}
.about-node.n3{right:12%;bottom:58px;animation-delay:-4s}
.about-live{position:absolute;left:12%;bottom:4px;display:flex;align-items:center;gap:9px;height:44px;padding:0 16px;border-radius:999px;background:var(--mint-2);color:#062116;font-size:.84rem;font-weight:600;box-shadow:var(--shadow)}
.about-live .live-dot{background:#0E3A2B}
.about-live em{font-style:normal;font-weight:500;opacity:.7}
.about-live [data-about-live]{transition:opacity .3s}

/* ---------- problem ---------- */
.pb-grid{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:20px;align-items:start}
.pb-list{display:grid;gap:6px;position:sticky;top:110px}
.pb-list button{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--paper);text-align:left;font-weight:600;font-size:.94rem;line-height:1.3;cursor:pointer;transition:background-color .2s,border-color .2s}
.pb-list button:hover{background:var(--paper-2)}
.pb-list button[aria-selected="true"]{background:var(--paper-2);border-color:var(--ink-3)}
.pb-st{width:22px;height:22px;border-radius:50%;flex:none;border:2px solid var(--bad);background:var(--bad-bg);position:relative}
.pb-st::after{content:"!";position:absolute;inset:0;display:grid;place-items:center;font:700 .7rem/1 var(--f-body);color:var(--bad)}
.pb-list button.solved .pb-st{border-color:var(--good);background:var(--good)}
.pb-list button.solved .pb-st::after{content:"";background: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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.pb-count{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:baseline;padding:12px 4px 0;font-size:.84rem;color:var(--ink-3)}
.pb-count b{color:var(--ink);font-variant-numeric:tabular-nums}
.pb-meter{display:block;flex:1 0 100%;margin-top:6px;height:6px;border-radius:9px;background:var(--paper-3);overflow:hidden}
.pb-meter i{display:block;height:100%;width:0;background:var(--good);border-radius:inherit;transition:width .6s var(--ease)}
.pb-stage{display:grid;gap:16px;min-width:0}
.pb-pair{display:grid;grid-template-columns:minmax(0,1fr) 46px minmax(0,1fr);gap:12px;align-items:stretch;animation:drop .45s var(--ease)}
.pb-card{display:flex;flex-direction:column;gap:12px;padding:24px;border-radius:var(--r-card);min-width:0}
.pb-card--bad{background:var(--paper-2);border:1px dashed var(--line)}
.pb-card--bad > p:not(.pb-tag){color:var(--ink-2)}
.pb-card--good{background:var(--mint);color:var(--on-mint)}
.pb-card--good > p:not(.pb-tag){font-size:1.06rem;line-height:1.5}
.pb-tag{display:inline-flex;align-items:center;gap:6px;font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.pb-card--bad .pb-tag{color:var(--bad)}
.pb-card--good .pb-tag{color:color-mix(in srgb,var(--on-mint) 72%,transparent)}
.pb-arrow{align-self:center;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--btn);color:var(--btn-fg);font-size:18px}
.pb-nav{display:flex;flex-wrap:wrap;gap:10px}
.mini{margin-top:auto;background:var(--paper);color:var(--ink);border-radius:16px;padding:12px;display:grid;gap:7px;font-size:.8rem;box-shadow:var(--shadow-s)}
.mini--bad{box-shadow:none;border:1px solid var(--line-2)}
.mini-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--line-2)}
.mini-row span{display:flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:.76rem;min-width:0}
.mini:not(.mini--bad) .mini-row span{font-family:var(--f-body);font-weight:600;font-size:.8rem}
.mini-row em{font-style:normal;font-size:.72rem;color:var(--ink-3)}
.mini-row em.ok{color:var(--good);font-weight:600}
.mini-row--cur{color:var(--bad)}
.caret{display:inline-block;width:2px;height:1em;background:currentColor;margin-left:1px;vertical-align:-2px;animation:blink 1s steps(2) infinite}
.mini-foot{display:flex;align-items:center;gap:7px;font-size:.74rem;color:var(--ink-3);padding-top:2px}
.mini-k{display:flex;align-items:center;gap:7px;font-size:.72rem;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em}
.mini-bul{display:grid;gap:5px}
.mini-bul li{display:flex;gap:8px;align-items:baseline;font-size:.82rem;line-height:1.35}
.mini-bul li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--good);flex:none;transform:translateY(-2px)}
.mini-rec{display:flex;align-items:center;gap:10px;min-width:0}
.mini-rec > div{min-width:0}
.mini-rec b{display:block;font-weight:600;font-size:.86rem}
.mini-rec small{display:block;color:var(--ink-3);font-size:.72rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-call{margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--good-bg);color:var(--good);font:600 .72rem/1 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.mini-call--btn{background:var(--btn);color:var(--btn-fg);font-family:var(--f-body);transition:transform .2s}
.mini-call--btn.press{transform:scale(.92)}
.tabs-chaos{display:flex;flex-wrap:wrap;gap:4px}
.tabs-chaos span{padding:6px 10px;border-radius:8px 8px 0 0;background:var(--paper-2);border:1px solid var(--line);font-size:.72rem;transform:rotate(var(--r,0deg))}
.tabs-chaos span:nth-child(2){--r:-2deg}.tabs-chaos span:nth-child(3){--r:1.5deg}.tabs-chaos span:nth-child(4){--r:-1deg}
.scribble{font:italic 500 .9rem/1.3 var(--f-body);color:var(--ink-3);transform:rotate(-1.2deg);padding:6px 0;text-decoration:line-through wavy color-mix(in srgb,var(--bad) 55%,transparent)}
.bars{display:flex;align-items:flex-end;gap:6px;height:70px}
.bars i{flex:1;border-radius:6px 6px 3px 3px;background:var(--forest-3);height:calc(var(--h,.1)*100%);opacity:.9}
.bars i:nth-child(2n){background:var(--mint-2)}
.bars--empty i{background:var(--paper-3);height:12%;border:1px dashed var(--line)}

/* ---------- how ---------- */
.how-vis{margin-top:4px;margin-bottom:22px}
.hv-track{height:4px;border-radius:9px;background:var(--paper-3);margin:0 10%;position:relative;top:25px}
.hv-track i{position:absolute;left:0;top:0;bottom:0;width:var(--f,0%);background:var(--forest-3);border-radius:inherit;transition:width .7s var(--ease)}
.hv-nodes{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.hv-node{display:grid;justify-items:center;gap:8px;text-align:center}
.hv-node b{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;background:var(--paper);border:1.5px solid var(--line);color:var(--ink-3);font-size:20px;transition:background-color .35s,color .35s,border-color .35s,transform .35s var(--ease)}
.hv-node em{font:500 .72rem/1.2 var(--f-mono);font-style:normal;color:var(--ink-3);transition:color .3s}
.hv-node.done b{background:var(--mint);border-color:var(--mint);color:var(--on-mint)}
.hv-node.is-on b{background:var(--btn);border-color:var(--btn);color:var(--btn-fg);transform:scale(1.08)}
.hv-node.is-on em{color:var(--ink)}
.how-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;order:2}
.how{display:flex;flex-direction:column}
.how .sec-head{order:0}
.how-vis{order:1}
.how-steps > li{border-radius:var(--r-card);background:var(--paper-2);padding:10px 10px 20px;display:grid;align-content:start;gap:12px;transition:background-color .35s,color .35s}
.how-steps > li.is-on{background:var(--mint);color:var(--on-mint)}
.how-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;background:var(--paper-3);margin-bottom:4px}
.how-btn{display:grid;gap:10px;justify-items:start;text-align:left;border:0;background:none;padding:0 10px;cursor:pointer}
.how-body{padding:0 10px}
.how-n{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;color:var(--ink-3)}
.how-n::before{content:"Step "}
.how-steps li.is-on .how-n{color:var(--forest-3)}
.how-t{font:600 1.12rem/1.2 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.how-body{display:grid;gap:12px;font-size:.9rem;color:var(--ink-2)}
.how-steps li.is-on .how-body{color:color-mix(in srgb,var(--on-mint) 80%,transparent)}
.how-steps li.is-on .chips li{border-color:color-mix(in srgb,var(--on-mint) 25%,transparent);color:var(--on-mint)}

/* ---------- compare ---------- */
.cmp-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:stretch}
.cmp-card{border-radius:var(--r-card);padding:clamp(22px,2.4vw,32px);display:grid;gap:20px;align-content:start}
.cmp-img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:16px;margin:-6px 0 -2px}
.cmp-card header{display:grid;gap:8px;justify-items:start}
.cmp-card .label{color:inherit;opacity:.7}
.cmp-card--lav{background:var(--lav);color:var(--on-lav)}
.cmp-card--mint{background:var(--mint);color:var(--on-mint)}
.cmp-demo{background:var(--paper);color:var(--ink);border-radius:16px;padding:12px;display:grid;gap:10px;min-height:132px;align-content:start;box-shadow:var(--shadow-s)}
.cmp-q{display:grid;gap:6px}
.q-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:10px;font-size:.8rem;font-weight:600;transition:background-color .3s}
.q-item em{margin-left:auto;font-style:normal;font-size:.7rem;color:var(--ink-3);font-weight:500}
.q-item--on{background:var(--mint-3)}
.q-item--on em{color:var(--good);font-weight:600}
.cmp-dl{display:grid}
.cmp-dl div{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:11px 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.cmp-dl dt{font:500 .7rem/1.5 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;opacity:.72}
.cmp-dl dd{font-weight:500;font-size:.94rem}
.cmp-vs{align-self:center;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--paper);box-shadow:var(--shadow);border:6px solid var(--paper-2)}
.cmp-vs svg{width:36px;height:36px}
.cmp-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:18px 18px 18px 24px;border-radius:999px;background:var(--paper-2)}
.cmp-foot p{color:var(--ink-2);font-weight:500}

/* ---------- what we do ---------- */
.do-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.do-card{display:grid;align-content:start;gap:14px;padding:10px 10px 24px;border-radius:var(--r-card);background:var(--paper-2);transition:background-color .3s,transform .3s var(--ease)}
.do-card:hover{background:var(--mint-3);transform:translateY(-3px)}
.do-card p{color:var(--ink-2);font-size:.94rem}
.do-card > :not(.do-img){margin-inline:14px}
.do-img{width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:16px;background:var(--paper-3)}
.do-card .do-ic{margin-top:-37px;position:relative;border:4px solid var(--paper-2);width:54px;height:54px;border-radius:17px;transition:border-color .3s}
.do-card:hover .do-ic{border-color:var(--mint-3)}
.do-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--mint);color:var(--on-mint);font-size:20px}
.do-card:nth-child(2n) .do-ic{background:var(--lav);color:var(--on-lav)}

/* ---------- features keypad ---------- */
.ft{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,410px);gap:clamp(28px,5vw,80px);align-items:center}
.ft-copy{display:grid;gap:18px;align-content:start}
.ft-screen{margin-top:12px;padding:24px;border-radius:var(--r-card);background:var(--mint-3);border:1px solid color-mix(in srgb,var(--mint-2) 50%,transparent);display:grid;gap:10px;min-height:190px;align-content:start}
.ft-key{display:flex;align-items:baseline;gap:6px;font:500 .8rem/1 var(--f-mono);color:var(--ink-3)}
.ft-key span:first-child{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--btn);color:var(--btn-fg);font-size:1rem}
.ft-screen p:last-child{color:var(--ink-2);max-width:56ch}
.phone{background:var(--forest);color:var(--on-forest);border-radius:40px;padding:22px 22px 18px;box-shadow:var(--shadow);display:grid;gap:16px;border:8px solid var(--forest-2)}
.phone-top{display:grid;justify-items:center;gap:4px;padding:16px 0 6px}
.phone-num{font:500 2.6rem/1 var(--f-mono);letter-spacing:.04em;min-height:1em}
.phone-lbl{font-size:.8rem;color:var(--on-forest-2)}
.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.keypad button{display:grid;justify-items:center;gap:2px;padding:12px 4px;border-radius:20px;border:0;background:var(--forest-2);color:var(--on-forest);cursor:pointer;transition:background-color .2s,transform .15s,color .2s}
.keypad button:hover{background:var(--forest-3)}
.keypad button:active{transform:scale(.95)}
.keypad b{font:500 1.45rem/1 var(--f-mono)}
.keypad small{font-size:.64rem;color:var(--on-forest-2);white-space:nowrap}
.keypad button[aria-pressed="true"]{background:var(--mint-2);color:#062116}
.keypad button[aria-pressed="true"] small{color:#0E3A2B}
.phone-hint{text-align:center;font-size:.7rem;color:var(--on-forest-2)}

/* ---------- why ---------- */
.why-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.why-card{grid-column:span 2;display:grid;align-content:start;gap:12px;padding:22px;border-radius:var(--r-card);background:var(--paper-2)}
.why-card--a,.why-card--b{grid-column:span 3}
.why-card p{color:var(--ink-2);font-size:.94rem}
.why-vis{background:var(--paper);border-radius:16px;padding:14px;min-height:118px;display:grid;gap:10px;align-content:center;box-shadow:var(--shadow-s);margin-bottom:6px}
.why-card--a .why-vis{background:var(--mint)}
.why-card--a .why-vis .mini-rec{background:var(--paper);padding:10px;border-radius:12px}
.why-card .why-chip{justify-self:start;font-size:.72rem;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--forest);color:var(--on-forest)}
.why-log{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.why-log div{padding:8px;border-radius:10px;background:var(--paper-2)}
.why-log dt{font-size:.62rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.why-log dd{font-weight:600;font-size:.82rem}
.seg{display:flex;padding:4px;border-radius:999px;background:var(--paper-2);gap:2px}
.seg span{flex:1;text-align:center;padding:7px 6px;border-radius:999px;font-size:.74rem;font-weight:600;color:var(--ink-3);transition:background-color .3s,color .3s;white-space:nowrap}
.seg span.on{background:var(--btn);color:var(--btn-fg)}
.why-seg-t{text-align:center;font-size:.8rem;color:var(--ink-2)}
.why-card--d .why-vis{background:var(--lav-3)}
.route{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:6px;font-size:.72rem;font-weight:600}
.route-in{padding:5px 9px;border-radius:999px;background:var(--mint);color:var(--on-mint)}
.route-in--b{background:var(--lav);color:var(--on-lav)}
.route-line{height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 10px);position:relative;overflow:hidden}
.route-line i{position:absolute;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--forest-3);animation:flow 1.8s linear infinite}
.route-line--b i{animation-direction:reverse;background:var(--lav-2)}
@keyframes flow{from{left:-6px}to{left:100%}}
.route-ag{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:.7rem}
.route-ag em{font-style:normal;color:var(--good);font-size:.64rem}
.nums{margin-top:14px;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr));gap:12px;padding:clamp(22px,2.6vw,34px);border-radius:var(--r-card);background:var(--forest);color:var(--on-forest)}
.nums-k{display:grid;gap:8px;align-content:start;padding-right:16px}
.nums-k .label{color:var(--on-forest-2)}
.nums-t{font:600 1.3rem/1.2 var(--f-display)}
.nums-d{font-size:.88rem;color:var(--on-forest-2)}
.num{display:grid;gap:8px;align-content:start;padding-left:16px;border-left:1px solid color-mix(in srgb,var(--on-forest) 16%,transparent)}
.num b{font:500 clamp(2.6rem,1.6rem + 2.4vw,4rem)/.9 var(--f-display);color:var(--mint-2);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.num span{font-size:.84rem;color:var(--on-forest-2)}

/* ---------- roi ---------- */
.roi{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:start}
.roi-copy{display:grid;gap:16px}
.roi-form{display:grid;gap:22px;margin-top:14px}
.rf{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:center}
.rf label{font-weight:600;font-size:.95rem}
.rf output{font:500 .9rem/1 var(--f-mono);font-variant-numeric:tabular-nums;padding:6px 10px;border-radius:999px;background:var(--mint-3)}
.rf input{grid-column:1/-1}
.rf-scale{grid-column:1/-1;display:flex;justify-content:space-between;font:500 .7rem/1 var(--f-mono);color:var(--ink-3)}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:9px;background:linear-gradient(90deg,var(--forest-3) var(--fill,30%),var(--paper-3) var(--fill,30%))}
input[type="range"]::-moz-range-track{height:6px;border-radius:9px;background:var(--paper-3)}
input[type="range"]::-moz-range-progress{height:6px;border-radius:9px;background:var(--forest-3)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:var(--paper);border:6px solid var(--btn);box-shadow:var(--shadow-s)}
input[type="range"]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--paper);border:6px solid var(--btn)}
.roi-note{font-size:.8rem;color:var(--ink-3)}
.roi-out{display:grid;gap:12px}
.ro-photo{margin:0;border-radius:var(--r-card);overflow:hidden}
.ro-photo img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:50% 35%}
.ro-card{border-radius:var(--r-card);padding:24px 26px;display:grid;gap:6px;position:relative;overflow:hidden}
.ro-card--mint{background:var(--mint);color:var(--on-mint)}
.ro-card--forest{background:var(--forest);color:var(--on-forest);min-height:210px}
.ro-k{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.ro-v{font:500 clamp(2.4rem,1.6rem + 2.4vw,3.8rem)/1 var(--f-display);letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.ro-s{font-size:.9rem;opacity:.75}
.ro-wave{height:64px;margin-top:14px;display:flex;align-items:flex-end;gap:6px;overflow:hidden}
.ro-wave i{flex:0 0 8px;border-radius:999px;background:var(--mint-2);height:calc(var(--h,.3)*100%);transition:height .5s var(--ease)}
.ro-wave i:nth-child(4n+2){background:var(--lav-2)}
.roi-out .pill{justify-self:start}

/* ---------- teams ---------- */
.tm-row{display:flex;gap:10px;height:clamp(420px,40vw,540px)}
.tm-card{position:relative;flex:1 1 0;min-width:0;border-radius:var(--r-card);overflow:hidden;cursor:pointer;transition:flex-grow .6s var(--ease);background:var(--paper-3);outline-offset:3px}
.tm-card.is-open{flex-grow:3.4}
.tm-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.tm-card.is-open img{transform:scale(1.03)}
.tm-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--photo-shade) 0%,transparent 60%);pointer-events:none}
.tm-body{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px;display:grid;gap:10px;color:var(--photo-ink)}
.tm-body .h4{font-size:1.15rem}
.tm-card:not(.is-open) .tm-body .h4{writing-mode:vertical-rl;transform:rotate(180deg);justify-self:start;white-space:nowrap}
.tm-body p,.tm-body .chips{transition:opacity .4s .15s}
.tm-card:not(.is-open) .tm-body p,.tm-card:not(.is-open) .tm-body .chips{opacity:0;position:absolute;pointer-events:none}
.tm-body p{max-width:46ch;font-size:.94rem;color:color-mix(in srgb,var(--photo-ink) 86%,transparent)}
.chips--on li{border-color:rgba(255,255,255,.4);color:var(--photo-ink);background:rgba(255,255,255,.12);backdrop-filter:blur(6px)}

/* ---------- testimonials ---------- */
.ts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:24px clamp(28px,4vw,64px);align-items:center;overflow:hidden}
.ts-orbit{position:relative;aspect-ratio:1;width:100%;max-width:520px;justify-self:center;grid-row:span 2}
.ring{position:absolute;inset:0;margin:auto;border-radius:50%;border:1px solid var(--line)}
.r1{width:100%;height:100%}.r2{width:72%;height:72%}.r3{width:44%;height:44%;background:var(--mint-3);border-color:transparent}
.ring{transition:border-color .4s}
.r2{border-style:dashed;border-color:color-mix(in srgb,var(--forest-3) 30%,transparent);animation:orb 140s linear infinite reverse}
/* rotating tracks: avatars ride the rings and stay upright */
.orb{position:absolute;inset:0;margin:auto;border-radius:50%;container-type:size;animation:orb var(--d,90s) linear infinite;pointer-events:none}
.orb--o{width:100%;height:100%;--d:90s}
.orb--m{width:72%;height:72%;--d:64s;animation-direction:reverse}
.orb--m .orb-c{animation-direction:normal}
.orb-p{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(-50cqh)}
.orb-u{position:absolute;left:0;top:0;transform:translate(-50%,-50%) rotate(calc(-1 * var(--a)))}
.orb-c{display:block;animation:orb var(--d,90s) linear infinite reverse}
@keyframes orb{to{transform:rotate(360deg)}}
.ob{display:block;max-width:none;width:52px;height:52px;border-radius:50%;object-fit:cover;border:3px solid var(--paper);box-shadow:var(--shadow-s);transition:transform .6s var(--ease),box-shadow .6s,border-color .6s}
.ob--s{width:44px;height:44px}
.ob.is-speaking{transform:scale(1.32);border-color:var(--mint-2);box-shadow:0 0 0 6px color-mix(in srgb,var(--mint-2) 35%,transparent),0 14px 30px -10px rgba(11,31,23,.45)}
.ob-chip{display:block;white-space:nowrap;padding:6px 12px;border-radius:999px;background:var(--mint);color:var(--on-mint);font-size:.76rem;font-weight:600;box-shadow:var(--shadow-s);animation:chip 7s ease-in-out infinite}
.c2{background:var(--lav);color:var(--on-lav);animation-delay:-2.4s}
.c3{background:var(--paper);color:var(--ink);border:1px solid var(--line);animation-delay:-4.6s}
@keyframes chip{0%,100%{transform:scale(1)}8%{transform:scale(1.12)}16%{transform:scale(1)}}
.ob-logo{position:absolute;left:50%;top:50%;width:17%;height:17%;transform:translate(-50%,-50%);filter:drop-shadow(0 10px 18px rgba(11,31,23,.22));animation:logo-b 4.5s ease-in-out infinite}
@keyframes logo-b{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
.ob-ripple{position:absolute;inset:0;margin:auto;width:44%;height:44%;pointer-events:none}
.ob-ripple i{position:absolute;inset:0;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--forest-3) 45%,transparent);opacity:0;animation:ripple 4.5s cubic-bezier(.2,.6,.3,1) infinite}
.ob-ripple i:nth-child(2){animation-delay:1.5s}.ob-ripple i:nth-child(3){animation-delay:3s}
@keyframes ripple{0%{transform:scale(.45);opacity:.9}100%{transform:scale(2.25);opacity:0}}
.ts-orbit:hover .orb,.ts-orbit:hover .orb-c,.ts-orbit:hover .r2,.ts-orbit.paused .orb,.ts-orbit.paused .orb-c,.ts-orbit.paused .r2,.ts-orbit.paused .ob-ripple i,.ts-orbit.paused .ob-chip{animation-play-state:paused}
/* word-by-word heading reveal + highlighter sweep */
[data-split].js .sw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .02em .1em;margin:0 -.02em -.1em}
[data-split].js .sw > span{display:inline-block;transform:translateY(108%) rotate(4deg);transform-origin:0 100%;opacity:0;transition:transform .9s var(--ease),opacity .6s ease;transition-delay:calc(var(--i) * 60ms)}
[data-split].split-in .sw > span{transform:none;opacity:1}
.hl{background:linear-gradient(transparent 58%,color-mix(in srgb,var(--mint-2) 70%,transparent) 58%,color-mix(in srgb,var(--mint-2) 70%,transparent) 92%,transparent 92%) no-repeat 0 0/0% 100%;color:inherit;transition:background-size 1.1s var(--ease) .75s;padding:0 .04em}
[data-split]:not(.js) .hl,[data-split].split-in .hl{background-size:100% 100%}
.ts-sub{transition:opacity .8s ease .5s,transform .8s var(--ease) .5s}
.ts-head.pre .ts-sub{opacity:0;transform:translateY(14px)}
/* quote: words blur in */
.tq .qw{display:inline-block;white-space:pre}
.tq.play .qw{animation:qw .7s var(--ease) both;animation-delay:calc(var(--i) * 26ms)}
@keyframes qw{from{opacity:0;filter:blur(8px);transform:translateY(8px)}to{opacity:1;filter:none;transform:none}}
.tq.play figcaption{animation:drop .6s var(--ease) both;animation-delay:.45s}
.ts-av{transition:opacity .3s,transform .5s var(--ease)}
.ts-av.swap{opacity:0;transform:scale(.7) rotate(-12deg)}
.ts-dots button{position:relative;overflow:hidden}
.ts-dots button::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:var(--mint-2)}
.ts-quote.tick .ts-dots button[aria-current="true"]{background:color-mix(in srgb,var(--mint-2) 30%,transparent)}
.ts-quote.tick .ts-dots button[aria-current="true"]::after{animation:fillw 7s linear forwards}
.ts-quote.tick.hold .ts-dots button[aria-current="true"]::after{animation-play-state:paused}
@keyframes fillw{to{width:100%}}
.ts-quote{isolation:isolate}
.ts-quote::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(120% 80% at 100% 0%,color-mix(in srgb,var(--mint-2) 16%,transparent),transparent 60%);pointer-events:none}
.ts-head{display:grid;gap:16px;align-self:end}
.ts-quote{position:relative;align-self:start;background:var(--forest);color:var(--on-forest);border-radius:var(--r-card);padding:44px 28px 22px;margin-top:30px;display:grid;gap:16px}
.ts-av{position:absolute;left:28px;top:-30px;width:60px;height:60px;border-radius:50%;object-fit:cover;border:4px solid var(--paper);transition:opacity .3s}
.tq{margin:0;display:grid;gap:14px;animation:drop .5s var(--ease)}
.tq blockquote{margin:0;font:400 clamp(1.05rem,.98rem + .35vw,1.25rem)/1.5 var(--f-display);letter-spacing:-.005em}
.tq blockquote::before{content:"\201C";display:block;font:600 2.6rem/.6 var(--f-display);color:var(--mint-2);margin-bottom:6px}
.tq figcaption{display:grid;gap:2px}
.tq figcaption b{font-weight:600}
.tq figcaption span{font-size:.86rem;color:var(--on-forest-2)}
.ts-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid color-mix(in srgb,var(--on-forest) 14%,transparent)}
.ts-dots{display:flex;gap:6px}
.ts-dots button{width:28px;height:6px;border-radius:9px;border:0;padding:0;background:color-mix(in srgb,var(--on-forest) 25%,transparent);cursor:pointer;transition:background-color .3s,width .3s}
.ts-dots button[aria-current="true"]{background:var(--mint-2);width:44px}
.ts-note{font:500 .66rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-forest-2)}
.fb{grid-column:1/-1;border-radius:var(--r-card);background:var(--paper-2)}
.fb summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;cursor:pointer;list-style:none}
.fb summary::-webkit-details-marker{display:none}
.fb summary span{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;color:var(--ink-2);font-size:.92rem}
.fb summary b{color:var(--ink);font:600 1.05rem/1.2 var(--f-display)}
.fb summary .ic{width:34px;height:34px;padding:8px;border-radius:50%;border:1px solid var(--line);transition:transform .3s var(--ease)}
.fb[open] summary .ic{transform:rotate(45deg)}
.fb-form{display:grid;gap:14px;padding:0 22px 22px}
.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld{display:grid;gap:6px;margin:0;border:0;padding:0;min-width:0}
.fld label,.fld legend{font-size:.82rem;font-weight:600;padding:0}
.fld input,.fld textarea{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem}
.fld input:focus,.fld textarea:focus{outline:2px solid var(--forest-3);outline-offset:1px}
.rate{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rate legend{width:100%;margin-bottom:6px}
.rate input{position:absolute;opacity:0;width:1px;height:1px}
.rate label{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:var(--paper);cursor:pointer;font:500 .9rem/1 var(--f-mono)}
.rate input:checked + label{background:var(--btn);color:var(--btn-fg);border-color:var(--btn)}
.rate input:focus-visible + label{outline:2px solid var(--forest-3);outline-offset:2px}
.fb-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.fb-msg{font-size:.88rem;color:var(--ink-2)}

/* ---------- faq ---------- */
.faq{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:32px clamp(32px,5vw,80px);align-items:start}
.faq-head{display:grid;gap:18px;justify-items:start;position:sticky;top:110px}
.faq-photo{position:relative;margin:10px 0 0;width:100%;max-width:420px;border-radius:var(--r-card);overflow:hidden}
.faq-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.faq-photo figcaption{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 13px;border-radius:999px;background:var(--glass);color:var(--ink);border:1px solid var(--glass-line);font-size:.78rem;font-weight:600;backdrop-filter:blur(10px)}
.faq-list{border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 4px;cursor:pointer;list-style:none;font:500 clamp(1.08rem,1rem + .35vw,1.3rem)/1.3 var(--f-display);letter-spacing:-.01em}
.faq-list summary::-webkit-details-marker{display:none}
.fq-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);flex:none;font-size:16px;transition:transform .35s var(--ease),background-color .3s}
.faq-list details[open] .fq-ic{transform:rotate(90deg);background:var(--mint);border-color:transparent;color:var(--on-mint)}
.faq-list details p{padding:0 56px 24px 4px;color:var(--ink-2);max-width:62ch}

/* ---------- cta ---------- */
.cta{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);padding:0;overflow:hidden;background:var(--lav);color:var(--on-lav)}
.cta-copy{padding:var(--pad-board);display:grid;gap:18px;align-content:center}
.cta-h{font:550 clamp(2.2rem,1.3rem + 3vw,4rem)/1 var(--f-display);letter-spacing:-.03em;text-wrap:balance}
.cta .sub{color:color-mix(in srgb,var(--on-lav) 78%,transparent)}
.cta .pill--ghost{border-color:color-mix(in srgb,var(--on-lav) 34%,transparent);color:var(--on-lav)}
.cta-media{position:relative;min-height:440px}
.cta-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.cta-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:var(--glass);color:var(--ink);border:1px solid var(--glass-line);box-shadow:var(--shadow);font-size:.82rem;font-weight:600;backdrop-filter:blur(10px)}
.cta-chip b{font:500 .82rem/1 var(--f-mono);font-variant-numeric:tabular-nums}
.cta-chip--a{left:20px;top:24px}
.cta-chip--b{right:20px;top:40%}
.cta-chip--b .ic{color:var(--lav-2)}

/* ---------- footer ---------- */
.ftr-wrap{padding-block:16px}
.ftr{position:relative;overflow:hidden;container-type:inline-size;background:var(--forest);color:var(--on-forest);border-radius:var(--r-board);padding:clamp(36px,4vw,64px) var(--pad-board) 28px}
.ftr-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px clamp(32px,5vw,96px)}
.ftr-brand{display:grid;gap:18px;align-content:start}
.ftr-brand > p{color:var(--on-forest-2);max-width:44ch;font-size:.94rem}
.news{display:grid;gap:8px;margin-top:6px}
.news label{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-forest-2)}
.news-row{display:flex;align-items:center;border-bottom:1px solid color-mix(in srgb,var(--on-forest) 35%,transparent)}
.news-row input{flex:1;min-width:0;background:transparent;border:0;color:var(--on-forest);font:inherit;padding:12px 0}
.news-row input::placeholder{color:var(--on-forest-2)}
.news-row input:focus{outline:none}
.news-row:focus-within{border-color:var(--mint-2)}
.news-row button{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:0;background:var(--mint-2);color:#062116;cursor:pointer;font-size:16px}
.news-msg{font-size:.84rem;color:var(--mint-2);min-height:1.2em}
.ftr-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.ftr-cols div{display:grid;gap:9px;align-content:start}
.ftr-h{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-forest-2);margin-bottom:4px}
.ftr-cols a{text-decoration:none;color:var(--on-forest);font-size:.92rem;opacity:.88}
.ftr-cols a:hover{opacity:1;text-decoration:underline;text-underline-offset:3px}
.ftr-contact{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:40px}
.ftr-contact a{color:inherit;text-decoration:none}
.ftr-contact a:hover{text-decoration:underline;text-underline-offset:3px}
.ftr-contact p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:16px 18px;border-radius:18px;background:var(--forest-2);font-size:.95rem}
.ftr-contact .label{width:100%}
.copy{position:relative;z-index:2;touch-action:manipulation;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:1px solid color-mix(in srgb,var(--on-forest) 30%,transparent);background:transparent;color:var(--on-forest);cursor:pointer;font-size:13px}
.copy.ok{background:var(--mint-2);color:#062116;border-color:transparent}
.ftr-word{font:650 clamp(4rem,1rem + 29vw,31rem)/.78 var(--f-display);font-size:35cqi;letter-spacing:-.06em;color:var(--forest-2);margin:40px 0 0 -.04em;user-select:none;white-space:nowrap;pointer-events:none;position:relative;z-index:0}
.ftr-legal{margin-top:20px;font-size:.8rem;color:var(--on-forest-2)}

/* ---------- reveal (scroll-driven, visible at rest elsewhere) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sec-head,.tour-stage,.pb-grid,.how-steps,.cmp-card,.do-card,.ft-copy,.phone,.why-card,.nums,.roi-out,.tm-row,.ts-quote,.ts-orbit,.faq-list,.cta-copy,.ftr-top{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 38%}
  }
}
@keyframes rv{from{opacity:0;transform:translateY(30px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .hdr-nav{display:none}
  .hdr-login{display:none}
  .burger{display:inline-grid}
  .hdr.is-scrolled .hdr-in{grid-template-columns:auto 1fr}
  .hdr.is-scrolled .hdr-act{grid-column:2}
  .why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .why-card,.why-card--a,.why-card--b{grid-column:span 1}
  .why-card--e{grid-column:1/-1}
  .nums{grid-template-columns:repeat(4,minmax(0,1fr))}
  .nums-k{grid-column:1/-1;padding:0 0 8px}
  .num:nth-of-type(2){border-left:0;padding-left:0}
  .do-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .how-steps{grid-template-columns:repeat(5,minmax(160px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .how-steps > li{scroll-snap-align:start}
}
@media (max-width:1000px){
  .hero-board{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding-top:100px}
  .hero-media{min-height:clamp(480px,90vw,640px)}
  .hm-tags{top:24px}
  .lc-call{top:84px}
  .lc-ai{top:auto;bottom:130px}
  .hdr-in{grid-template-columns:1fr auto;padding-right:16px}
  .hdr-act{grid-column:2}
  .tour-head{grid-template-columns:1fr}
  .tour-stage{grid-template-columns:1fr}
  .tour-shot{grid-column:1;grid-row:auto}
  .tour-info{padding:22px}
  .tour-legend{margin-top:0}
  .sec-head--split{grid-template-columns:1fr}
  .pb-grid{grid-template-columns:1fr}
  .pb-list{position:static;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
  .pb-list button{scroll-snap-align:start}
  .pb-count{grid-column:1/-1;display:none}
  .ft{grid-template-columns:1fr}
  .phone{max-width:420px;width:100%;justify-self:center}
  .roi{grid-template-columns:1fr}
  .ts{grid-template-columns:1fr}
  .ts-orbit{max-width:380px;grid-row:auto}
  .faq{grid-template-columns:1fr}
  .faq-head{position:static}
  .cta{grid-template-columns:1fr}
  .about{grid-template-columns:1fr}
  .about-vis{max-width:560px;width:100%;justify-self:center}
  .ftr-top{grid-template-columns:1fr}
  .app-body{grid-template-columns:44px minmax(0,1fr) minmax(220px,260px)}
  .cm-tr{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 92px}
  .cm-tr > :nth-child(3){display:none}
  .cm-tr .mono{white-space:nowrap}
}
@media (max-width:760px){
  :root{--r-board:24px;--r-card:18px}
  .hero-h{font-size:clamp(2.1rem,9.6vw,3rem)}
  .hero-faces{display:none}
  .hm-tags{display:none}
  .lc-call{top:14px;left:14px;right:14px;width:auto}
  .lc-ai{display:none}
  .hero-foot{grid-template-columns:1fr}
  .hf-live{display:none}
  .hdr-act .pill--dark{display:none}
  .app-body{grid-template-columns:minmax(0,1fr);min-height:0}
  .app-rail{display:none}
  .app-dial{border-left:0;border-top:1px solid var(--line-2)}
  .cm-tr{grid-template-columns:minmax(0,1.4fr) 92px;row-gap:2px}
  .cm-tr > :nth-child(2),.cm-tr > :nth-child(3){display:none}
  .cm-done{grid-template-columns:minmax(0,1fr) auto 52px}
  .cm-done > :nth-child(4){display:none}
  .cm-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cm-cols{grid-template-columns:1fr}
  .app-url{display:none}
  .app-top{justify-content:space-between}
  .pb-pair{grid-template-columns:1fr}
  .pb-arrow{transform:rotate(90deg);justify-self:center}
  .how-vis{display:none}
  .how-steps{grid-template-columns:1fr;overflow:visible}
  .how-steps > li:not(.is-on) .how-body,.how-steps > li:not(.is-on) .how-img{display:none}
  .faq-photo{max-width:none}
  .cmp-grid{grid-template-columns:1fr}
  .cmp-vs{justify-self:center;margin:-34px 0;z-index:1}
  .cmp-dl div{grid-template-columns:96px 1fr}
  .cmp-foot{border-radius:22px}
  .do-grid{grid-template-columns:1fr}
  .why-grid{grid-template-columns:1fr}
  .why-card--e{grid-column:auto}
  .why-log{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .num{border-left:0;padding-left:0;border-top:1px solid color-mix(in srgb,var(--on-forest) 16%,transparent);padding-top:12px}
  .tm-row{flex-direction:column;height:auto}
  .tm-card{flex:none;height:220px}
  .tm-card.is-open{height:420px}
  .tm-card:not(.is-open) .tm-body .h4{writing-mode:horizontal-tb;transform:none}
  .fb-row{grid-template-columns:1fr}
  .faq-list details p{padding-right:4px}
  .cta-media{min-height:380px}
  .ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ftr-contact{grid-template-columns:1fr}
  .statement{max-width:none}
  .about-facts{grid-template-columns:1fr}
  .about-vis{padding:26px 10px 34px}
  .about-card{width:150px}
  .about-node{height:34px;font-size:.74rem}
  .about-node i{width:24px;height:24px}
  .about-live{left:6%;font-size:.76rem;height:38px}
}
@media (max-width:420px){
  .hero-cta .pill{flex:1 1 100%}
  .lc{width:min(250px,78%)}
  .dp-stats small{font-size:.58rem}
}
@media (prefers-reduced-motion:reduce){
  .orb,.orb-c,.r2,.ob-chip,.ob-logo,.ob-ripple i{animation:none!important}
  [data-split].js .sw > span{transform:none;opacity:1;transition:none}
  .hl{transition:none}
  .tq.play .qw,.tq.play figcaption{animation:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* preview-only note for links to other site pages */
.dt-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);z-index:80;max-width:min(520px,calc(100vw - 32px));padding:12px 18px;border-radius:16px;background:var(--btn);color:var(--btn-fg);font-size:.88rem;box-shadow:var(--shadow);transform:translate(-50%,140%);opacity:0;transition:transform .4s var(--ease),opacity .3s;pointer-events:none}
.dt-toast.show{transform:translate(-50%,0);opacity:1}
[data-mode="dark"] .hl{background-image:linear-gradient(transparent 62%,color-mix(in srgb,var(--mint-2) 38%,transparent) 62%,color-mix(in srgb,var(--mint-2) 38%,transparent) 94%,transparent 94%)}


/* =====================================================================
   Inner pages (v3 mint) — shared components
   ===================================================================== */
.hdr-nav > * + *::before{content:"";position:absolute;left:-4px;top:50%;width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.45;transform:translateY(-50%)}
.hdr-nav a + a::before{content:none}
.hdr-nav > a,.nav-dd{position:relative}
.hdr-nav a[aria-current="page"],.nav-dd-btn[aria-current="page"]{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.nav-dd-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 10px;border:0;background:none;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--ink);cursor:pointer}
.nav-dd-btn .ic{font-size:13px;transition:transform .25s var(--ease)}
.nav-dd-btn[aria-expanded="true"] .ic{transform:rotate(180deg)}
.nav-dd-btn:hover{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.mnav-group{display:grid;gap:2px;padding:4px 0 6px 14px;border-left:2px solid var(--line-2);margin:0 0 4px 14px}
.mnav-group a{padding:9px 12px;border-radius:12px;text-decoration:none;font-size:.95rem;color:var(--ink-2)}
.mnav-group a:hover{background:var(--paper-2)}
.mnav-k{padding:10px 14px 4px;font:500 .7rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}

/* page hero */
.hero--page .hero-board{min-height:min(780px,calc(100svh - 32px))}
.hero--page .hero-h{font-size:clamp(2.05rem,.9rem + 3vw,3.9rem);line-height:1}
.hero--page .hero-lede + .hero-lede{margin-top:12px}
.hero--page .hero-copy{padding-bottom:clamp(24px,3vw,40px)}
.hero-crumb{display:flex;align-items:center;gap:8px;font:500 .74rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;color:color-mix(in srgb,var(--on-mint) 70%,transparent)}
.hero-crumb a{color:inherit;text-decoration:none}
.hero-crumb a:hover{text-decoration:underline}
.hero-pts{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:34px}
.hero-pts li{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 10px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:.84rem;font-weight:500}
.hero-pts li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--mint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23062116' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.hero-note{margin-top:14px;font-size:.86rem;color:color-mix(in srgb,var(--on-mint) 75%,transparent)}
.ph-card{position:absolute;right:clamp(14px,2vw,28px);top:110px;width:min(300px,70%);background:var(--glass);color:var(--ink);border:1px solid var(--glass-line);border-radius:20px;padding:14px;box-shadow:var(--shadow);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);font-size:.82rem;display:grid;gap:10px}
.ph-card--l{right:auto;left:clamp(14px,2vw,28px)}
.ph-card--low{top:auto;bottom:100px}
.ph-k{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.8rem}
.ph-k .lc-ic{flex:none}
.ph-k em{margin-left:auto;font:500 .72rem/1 var(--f-mono);font-style:normal;color:var(--ink-3);font-variant-numeric:tabular-nums}
.ph-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:12px;transition:background-color .3s}
.ph-row > div{min-width:0;flex:1}
.ph-row b{display:block;font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row small{display:block;font-size:.72rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-row.on{background:var(--mint-3)}
.ph-big{font:600 1.6rem/1 var(--f-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ph-big small{font:500 .8rem/1 var(--f-body);color:var(--ink-3);margin-left:4px}
.ph-tiles{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ph-tiles div{padding:9px 10px;border-radius:12px;background:var(--paper-2)}
.ph-tiles b{display:block;font:600 1.15rem/1.1 var(--f-display);font-variant-numeric:tabular-nums}
.ph-tiles small{font-size:.68rem;color:var(--ink-3)}
.ph-bars{display:flex;align-items:flex-end;gap:5px;height:46px}
.ph-bars i{flex:1;border-radius:5px 5px 2px 2px;background:var(--mint-2);height:var(--h,40%)}
.ph-bars i:nth-child(3n){background:var(--lav-2)}
.ph-field{display:grid;gap:3px}
.ph-field span{font-size:.66rem;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em}
.ph-field code{display:block;padding:7px 9px;border-radius:9px;background:var(--paper-2);font:500 .74rem/1.2 var(--f-mono);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background-color .3s,box-shadow .3s}
.ph-field.on code{background:var(--mint-3);box-shadow:inset 0 0 0 1px var(--mint-2)}
.ph-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-radius:999px;background:var(--glass);color:var(--ink);border:1px solid var(--glass-line);box-shadow:var(--shadow);font-size:.82rem;font-weight:600;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ph-chip .ic{color:var(--forest-3)}

/* generic layout pieces */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,84px);align-items:center}
.split--rev > .split-media{order:2}
.split-copy{display:grid;gap:16px;align-content:start}
.split-copy > p:not(.label){color:var(--ink-2);max-width:62ch}
.board--forest .split-copy > p:not(.label){color:var(--on-forest-2)}
.board--forest .h2{color:var(--on-forest)}
.split-media{position:relative;min-width:0}
.frame{position:relative;margin:0;border-radius:26px;overflow:hidden;aspect-ratio:var(--ar,4/3);background:var(--paper-3)}
.frame img{width:100%;height:100%;object-fit:cover;object-position:var(--op,50% 35%)}
.frame--tall{--ar:4/4.6}
.frame--wide{--ar:16/9}
.fchip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 8px;border-radius:999px;background:var(--glass);color:var(--ink);border:1px solid var(--glass-line);box-shadow:var(--shadow);font-size:.82rem;font-weight:600;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);white-space:nowrap}
.fchip i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--mint);color:var(--on-mint);font-size:13px}
.fchip--lav i{background:var(--lav);color:var(--on-lav)}
.fchip--dark{background:var(--btn);color:var(--btn-fg);border-color:transparent}
.fchip--dark i{background:var(--mint-2);color:#062116}
.cards{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:12px}
.card{display:grid;align-content:start;gap:12px;padding:24px;border-radius:var(--r-card);background:var(--paper-2);min-width:0;transition:background-color .3s,transform .3s var(--ease)}
.card p{color:var(--ink-2);font-size:.95rem}
a.card{text-decoration:none;color:inherit}
a.card:hover{background:var(--mint-3);transform:translateY(-3px)}
.icb{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--mint);color:var(--on-mint);font-size:20px;flex:none}
.cards > :nth-child(2n) .icb{background:var(--lav);color:var(--on-lav)}
.card--img{padding:10px 10px 24px}
.card--img > :not(img):not(.card-img){margin-inline:14px}
.card--img > img,.card-img{width:100%;aspect-ratio:var(--ar,16/11);object-fit:cover;border-radius:16px;background:var(--paper-3)}
.card--img .icb{margin-top:-37px;position:relative;border:4px solid var(--paper-2);width:54px;height:54px;border-radius:17px}
a.card--img:hover .icb{border-color:var(--mint-3)}
.card-more{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;color:var(--forest-3)}
.card-n{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;color:var(--ink-3)}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{display:grid;align-content:start;gap:10px;padding:22px;border-radius:20px;background:var(--forest-2);min-width:0}
.tile .icb{background:color-mix(in srgb,var(--mint-2) 20%,transparent);color:var(--mint-2)}
.tile h3{font:600 1.12rem/1.25 var(--f-display);color:var(--on-forest);letter-spacing:-.01em}
.tile p{color:var(--on-forest-2);font-size:.92rem}
.board--forest .sec-head .sub{color:var(--on-forest-2)}
.board--forest .label{color:var(--on-forest-2)}
.note{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:var(--warn-bg);color:var(--ink);font-size:.88rem}
.note .ic{color:var(--warn);margin-top:3px;flex:none}

/* service: problems as a call log */
.plog{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,72px);align-items:center}
.plog-copy{display:grid;gap:16px}
.plog-copy p{color:var(--on-forest-2)}
.log{background:var(--paper);color:var(--ink);border-radius:24px;padding:10px;box-shadow:0 40px 70px -30px rgba(0,0,0,.6)}
.log-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 12px;font-size:.8rem;font-weight:600}
.log-top span:last-child{font:500 .72rem/1 var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.log-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px;border-radius:16px;border-top:1px solid var(--line-2);cursor:pointer;transition:background-color .3s}
.log-row:first-of-type{border-top:0}
.log-row:hover{background:var(--paper-2)}
.log-row.on{background:var(--mint-3);border-top-color:transparent}
.log-ic{grid-row:span 2;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--bad-bg);color:var(--bad);font-size:16px;transition:background-color .35s,color .35s}
.log-row.fixed .log-ic{background:var(--good-bg);color:var(--good)}
.log-row .ic-ok{display:none}.log-row.fixed .ic-ok{display:inline-block}.log-row.fixed .ic-miss{display:none}
.log-row h3{font:600 1rem/1.3 var(--f-display);letter-spacing:-.005em}
.log-row p{grid-column:2/-1;color:var(--ink-2);font-size:.88rem;line-height:1.5;max-height:0;overflow:hidden;opacity:0;transition:max-height .45s var(--ease),opacity .35s}
.log-row.on p{max-height:7em;opacity:1}
.log-st{font:500 .7rem/1 var(--f-mono);color:var(--bad);white-space:nowrap}
.log-row.fixed .log-st{color:var(--good)}

/* service: what-is flow */
.flow{position:absolute;left:clamp(10px,3%,28px);right:clamp(10px,3%,28px);bottom:-26px;display:grid;grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr);align-items:center;gap:8px;padding:12px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);font-size:.78rem}
.flow-col{display:grid;gap:5px;min-width:0}
.flow-col > span{font:500 .64rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.flow-list{display:grid;gap:4px}
.flow-list li{padding:5px 8px;border-radius:8px;background:var(--paper-2);font:500 .72rem/1.2 var(--f-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .3s,opacity .3s}
.flow-list li.on{background:var(--mint);color:var(--on-mint)}
.flow-list li.done{opacity:.45;text-decoration:line-through}
.flow-core{display:grid;justify-items:center;gap:6px;position:relative}
.flow-core svg{width:46px;height:46px}
.flow-core::before,.flow-core::after{content:"";position:absolute;top:23px;width:24px;height:2px;background:repeating-linear-gradient(90deg,var(--forest-3) 0 4px,transparent 4px 7px)}
.flow-core::before{right:100%}.flow-core::after{left:100%}
.flow-agent{display:flex;align-items:center;gap:8px;padding:8px;border-radius:12px;background:var(--paper-2)}
.flow-agent b{display:block;font-size:.74rem}
.flow-agent small{display:block;font:500 .7rem/1.2 var(--f-mono);color:var(--good);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.split-media--flow{padding-bottom:30px}

/* service: features bento */
.bento{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(210px,auto);gap:12px}
.bx{display:grid;align-content:start;gap:12px;padding:24px;border-radius:var(--r-card);background:var(--paper-2);min-width:0;position:relative;overflow:hidden}
.bx p{color:var(--ink-2);font-size:.94rem}
.bx--big{grid-column:span 2;grid-row:span 2}
.bx--wide{grid-column:span 2}
.bx--full{grid-column:1/-1}
.bx--s2{grid-column:span 2}
.bx--photo{align-content:end;color:var(--photo-ink);background:var(--forest);min-height:260px}
.bx--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bx--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--photo-shade) 0%,rgba(5,22,15,.35) 55%,transparent 80%)}
.bx--photo > :not(img){position:relative;z-index:1}
.bx--photo p{color:color-mix(in srgb,var(--photo-ink) 86%,transparent)}
.bx--photo .icb{background:var(--mint-2);color:#062116}
.bx--photo h3{color:var(--photo-ink)}

/* service: benefits */
.ben{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start}
.ben-media{position:sticky;top:110px}
.ben-bars{position:absolute;left:16px;right:16px;bottom:16px;display:grid;gap:8px;padding:14px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);font-size:.78rem;box-shadow:var(--shadow)}
.ben-k{display:flex;justify-content:space-between;gap:10px;font:500 .68rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ben-k span{color:var(--ink);transition:opacity .3s}
.ben-bar{display:grid;grid-template-columns:110px 1fr;align-items:center;gap:10px}
.ben-bar i{display:block;height:10px;border-radius:9px;background:var(--paper-3);overflow:hidden}
.ben-bar i::before{content:"";display:block;height:100%;width:var(--w,50%);border-radius:inherit;background:var(--lav-2);transition:width 1s var(--ease)}
.ben-bar.good i::before{background:var(--forest-3)}
.nlist{display:grid}
.nlist li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px 16px;padding:22px 0;border-top:1px solid var(--line)}
.nlist li:last-child{border-bottom:1px solid var(--line)}
.nlist .n{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--mint);color:var(--on-mint);font:500 .9rem/1 var(--f-mono)}
.nlist li:nth-child(2n) .n{background:var(--lav);color:var(--on-lav)}
.nlist h3{font:600 1.18rem/1.25 var(--f-display);letter-spacing:-.01em}
.nlist p{color:var(--ink-2)}

/* service: use cases */
.uses{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:start}
.uses-side{position:sticky;top:110px;display:grid;gap:18px}
.uses-side .frame{--ar:4/4.2}

/* steps without images (service pages) */
.how-steps--plain > li{padding:20px}
.how-steps--plain .how-btn{padding:0}
.how-steps--plain .how-body{padding:0}

/* ======================= dialers ======================= */
.spectrum{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;margin-bottom:18px;font:500 .72rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.spectrum i{height:8px;border-radius:9px;background:linear-gradient(90deg,var(--mint-2),var(--lav-2))}
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mode{display:grid;align-content:start;gap:10px;padding:20px;border-radius:var(--r-card);background:var(--paper-2);text-decoration:none;color:inherit;border:1px solid transparent;transition:background-color .3s,border-color .3s,transform .3s var(--ease)}
.mode:hover{transform:translateY(-3px);border-color:var(--line)}
.mode.live{background:var(--mint-3)}
.mode h3{font:600 1.15rem/1.2 var(--f-display);letter-spacing:-.01em}
.mode p{color:var(--ink-2);font-size:.9rem}
.mode dl{display:grid;gap:6px;margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}
.mode dl div{display:flex;justify-content:space-between;gap:10px;font-size:.8rem}
.mode dt{color:var(--ink-3)}
.mode dd{font-weight:600;text-align:right}
.pace{display:inline-flex;gap:3px;align-items:flex-end;height:14px}
.pace i{width:5px;border-radius:2px;background:var(--line);height:calc(30% + var(--k)*14%)}
.pace i.on{background:var(--forest-3)}
.lvw{display:grid;grid-template-columns:minmax(220px,280px) minmax(0,1fr);gap:16px}
.lvw-tabs{display:grid;gap:6px;align-content:start}
.lvw-tabs button{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--paper);text-align:left;font-weight:600;font-size:.92rem;cursor:pointer;transition:background-color .2s,border-color .2s}
.lvw-tabs button:hover{background:var(--paper-2)}
.lvw-tabs button[aria-selected="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.lvw-tabs button[aria-selected="true"] .st{background:color-mix(in srgb,var(--btn-fg) 18%,transparent);color:var(--btn-fg)}
.lvw-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:22px;border-radius:var(--r-card);background:var(--paper-2);min-width:0}
.lvw-info{display:grid;gap:14px;align-content:start}
.lvw-info ol{display:grid;gap:10px;counter-reset:s}
.lvw-info ol li{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;font-size:.94rem;color:var(--ink-2)}
.lvw-info ol li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--paper);border:1px solid var(--line);font:500 .78rem/1 var(--f-mono);color:var(--ink)}
.lvw-k{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.lvw-watch{display:flex;gap:10px;padding:12px 14px;border-radius:14px;background:var(--warn-bg);font-size:.88rem}
.lvw-watch .ic{color:var(--warn);margin-top:3px;flex:none}
.lv{display:grid;gap:8px;align-content:start;padding:14px;border-radius:18px;background:var(--paper);box-shadow:var(--shadow-s);min-width:0}
.lv-agent{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--forest);color:var(--on-forest)}
.lv-agent b{display:block;font-size:.86rem}
.lv-agent small{display:block;font-size:.72rem;color:var(--on-forest-2)}
.lv-agent .st{margin-left:auto}
.lv-line{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;border:1px solid var(--line-2);font:500 .8rem/1.2 var(--f-mono);transition:background-color .3s,border-color .3s}
.lv-line i{width:10px;height:10px;border-radius:50%;background:var(--line);justify-self:center;transition:background-color .3s}
.lv-line[data-s="dial"] i{background:var(--lav-2)}
.lv-line[data-s="ring"] i{background:var(--warn);animation:ping 1s infinite}
.lv-line[data-s="live"]{background:var(--good-bg);border-color:transparent}
.lv-line[data-s="live"] i{background:var(--good)}
.lv-line[data-s="busy"] i{background:var(--bad)}
.lv-line[data-s="drop"]{opacity:.5;text-decoration:line-through}
.lv-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:16px;font-size:.8rem;color:var(--ink-2)}
.lv-legend span{display:inline-flex;align-items:center;gap:6px}
.lv-legend i{width:10px;height:10px;border-radius:50%}
.ctrls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.ctrl{display:grid;grid-template-columns:40px 1fr;gap:2px 12px;align-items:center;padding:14px;border-radius:18px;background:var(--forest-2)}
.ctrl i{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--mint-2) 20%,transparent);color:var(--mint-2);font-size:17px}
.ctrl b{color:var(--on-forest);font-weight:600}
.ctrl span{color:var(--on-forest-2);font-size:.86rem;line-height:1.4}
.deal{display:grid;gap:12px;padding:16px;border-radius:24px;background:var(--paper-2)}
.seg2{display:inline-flex;padding:4px;border-radius:999px;background:var(--paper);border:1px solid var(--line);gap:2px;justify-self:start}
.seg2 button{border:0;background:none;padding:8px 16px;border-radius:999px;font-weight:600;font-size:.84rem;color:var(--ink-3);cursor:pointer}
.seg2 button[aria-selected="true"],.seg2 button[aria-pressed="true"]{background:var(--btn);color:var(--btn-fg)}
.deal-call{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--forest);color:var(--on-forest)}
.deal-call b{display:block;font:500 .95rem/1.2 var(--f-mono)}
.deal-call small{color:var(--on-forest-2);font-size:.74rem}
.deal-call .st{margin-left:auto}
.deal-rec{display:grid;gap:8px;padding:14px;border-radius:16px;background:var(--paper);box-shadow:var(--shadow-s);animation:drop .5s var(--ease)}
.deal-rec h4{display:flex;align-items:center;gap:10px;font:600 1rem/1.2 var(--f-display)}
.deal-rec h4 small{font:500 .74rem/1 var(--f-body);color:var(--ink-3)}
.deal-rec ul{display:grid;gap:6px}
.deal-rec li{display:grid;grid-template-columns:70px 1fr;gap:10px;font-size:.84rem;padding:6px 8px;border-radius:10px}
.deal-rec li span:first-child{font:500 .72rem/1.5 var(--f-mono);color:var(--ink-3)}
.deal-rec li.hl{background:var(--mint-3)}
.finder{display:grid;grid-template-columns:auto auto 1fr;gap:14px 24px;align-items:center;margin-bottom:16px;padding:16px 18px;border-radius:20px;background:var(--paper-2)}
.finder-q{display:grid;gap:6px}
.finder-q > span{font:500 .7rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.finder-rec{justify-self:end;text-align:right;font-size:.94rem;color:var(--ink-2);max-width:46ch}
.finder-rec b{color:var(--ink)}
.finder-rec a{color:var(--forest-3);font-weight:600}
.tbl-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--line)}
.tbl{width:100%;border-collapse:collapse;font-size:.88rem;min-width:900px}
.tbl th,.tbl td{padding:13px 14px;text-align:left;vertical-align:middle;border-bottom:1px solid var(--line-2)}
.tbl thead th{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2)}
.tbl tbody th{font-weight:600}
.tbl tbody th a{color:inherit;text-decoration:none}
.tbl tbody th a:hover{text-decoration:underline}
.tbl td{color:var(--ink-2)}
.tbl tr{transition:background-color .3s}
.tbl tr.is-rec{background:var(--mint-3)}
.tbl tr.is-alt{background:var(--lav-3)}
.tbl tbody th{min-width:250px}
.tbl tr.is-rec th a::after,.tbl tr.is-alt th a::after{display:inline-block;white-space:nowrap;margin-left:8px;padding:3px 8px;border-radius:999px;font:600 .62rem/1 var(--f-body);letter-spacing:.04em;text-transform:uppercase;vertical-align:2px}
.tbl tr.is-rec th a::after{content:"Start here";background:var(--btn);color:var(--btn-fg)}
.tbl tr.is-alt th a::after{content:"Also good";background:var(--lav);color:var(--on-lav)}
.risk{padding:4px 9px;border-radius:999px;font-size:.74rem;font-weight:600}
.risk--low{background:var(--good-bg);color:var(--good)}
.risk--medium{background:var(--warn-bg);color:var(--warn)}
.risk--high{background:var(--bad-bg);color:var(--bad)}

/* ======================= pricing ======================= */
.bill{display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
.bill button{border:0;background:none;padding:8px 18px;border-radius:999px;font-weight:600;font-size:.86rem;color:var(--ink-3);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.bill button[aria-pressed="true"]{background:var(--btn);color:var(--btn-fg)}
.bill em{font-style:normal;font-size:.7rem;padding:3px 7px;border-radius:999px;background:var(--mint);color:var(--on-mint)}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px;align-items:stretch}
.plan{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:16px;padding:28px;border-radius:26px;background:var(--paper-2);position:relative}
.plan--feat{background:var(--mint);color:var(--on-mint)}
.plan--dark{background:var(--forest);color:var(--on-forest)}
.plan h3{font:600 1.5rem/1.1 var(--f-display);letter-spacing:-.02em}
.plan .desc{font-size:.94rem;opacity:.82}
.plan-flag{position:absolute;top:22px;right:22px;padding:5px 11px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:.72rem;font-weight:600}
.price{display:flex;align-items:baseline;gap:4px;font-family:var(--f-display)}
.price .cur{font-size:1.4rem;font-weight:500}
.price b{font-size:clamp(2.8rem,2rem + 2vw,3.8rem);font-weight:550;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.price .per{font:500 .9rem/1 var(--f-body);opacity:.75}
.plan-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.plan-meta div{padding:10px 12px;border-radius:14px;background:color-mix(in srgb,currentColor 7%,transparent)}
.plan-meta b{display:block;font:600 1.05rem/1.2 var(--f-display)}
.plan-meta small{font-size:.76rem;opacity:.75}
.plan ul{display:grid;gap:9px;align-content:start}
.plan li{display:flex;gap:10px;font-size:.92rem;line-height:1.45}
.plan li::before{content:"";width:18px;height:18px;margin-top:2px;flex:none;border-radius:50%;background:color-mix(in srgb,currentColor 14%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6A50' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.plan--dark li::before{background-color:color-mix(in srgb,var(--mint-2) 25%,transparent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FE5BA' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.plan li.half{opacity:.7}
.plan .pill{justify-self:stretch}
.plan--feat .pill--ghost,.plan--dark .pill--ghost{border-color:color-mix(in srgb,currentColor 35%,transparent);color:inherit}
.plan--dark .pill--dark{background:var(--mint-2);color:#062116}
.price-note{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding:16px 20px;border-radius:999px;background:var(--paper-2);font-size:.92rem;color:var(--ink-2)}
.price-note a{color:var(--forest-3);font-weight:600}
.ptbl{min-width:640px}
.ptbl td:not(:first-child),.ptbl th:not(:first-child){text-align:center}
.ptbl tr.grp td{background:var(--paper-2);font:500 .72rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.yes{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--good-bg);color:var(--good)}
.no{color:var(--ink-3)}
.usage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center}
.usage-cards{display:grid;gap:10px}
.uc{display:grid;grid-template-columns:150px 1fr;gap:6px 18px;align-items:center;padding:18px 20px;border-radius:20px;background:var(--paper-2)}
.uc b{grid-row:span 2;font:550 1.9rem/1 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.uc span{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.uc p{color:var(--ink-2);font-size:.92rem}

/* ======================= resources ======================= */
.setup{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:start}
.setup-steps{display:grid;gap:8px}
.setup-steps li{display:grid;grid-template-columns:44px 1fr;gap:4px 14px;padding:16px;border-radius:18px;background:var(--forest-2);cursor:pointer;transition:background-color .3s}
.setup-steps li.on{background:var(--mint);color:var(--on-mint)}
.setup-steps .n{grid-row:span 2;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--mint-2) 20%,transparent);color:var(--mint-2);font:500 .9rem/1 var(--f-mono)}
.setup-steps li.on .n{background:var(--forest);color:var(--mint-2)}
.setup-steps b{font:600 1.05rem/1.3 var(--f-display);color:var(--on-forest)}
.setup-steps li.on b{color:var(--on-mint)}
.setup-steps span{font-size:.9rem;color:var(--on-forest-2)}
.setup-steps li.on span{color:color-mix(in srgb,var(--on-mint) 80%,transparent)}
.cti{position:sticky;top:110px;display:grid;gap:10px;padding:18px;border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 40px 70px -30px rgba(0,0,0,.6)}
.cti-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600}
.cti-top span:last-child{font:500 .72rem/1 var(--f-mono);color:var(--ink-3)}
.cti-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cti-grid .ph-field:nth-child(-n+4){grid-column:1/-1}
.cti-res{display:grid;gap:4px;padding:12px;border-radius:14px;background:var(--good-bg);color:var(--good);font-size:.84rem;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)}
.cti-res small{color:var(--ink-2);font-weight:500}
.cti.done .cti-res{opacity:1;transform:none}
.clog{display:grid;gap:12px;position:relative}
.clog::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:2px;background:var(--line)}
.clog-item{display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;position:relative}
.clog-dot{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:2px solid var(--line);font-size:16px;color:var(--ink-3);z-index:1}
.clog-item:first-child .clog-dot{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.clog-card{display:grid;gap:10px;padding:22px;border-radius:var(--r-card);background:var(--paper-2)}
.clog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font:500 .72rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.clog-meta .st{text-transform:none;letter-spacing:0}
.clog-card ul{display:grid;gap:6px}
.clog-card li{display:flex;gap:10px;font-size:.92rem;color:var(--ink-2)}
.clog-card li::before{content:"";width:6px;height:6px;margin-top:.55em;border-radius:50%;background:var(--forest-3);flex:none}

/* ======================= blog ======================= */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.filters button{height:38px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font-weight:600;font-size:.86rem;cursor:pointer;color:var(--ink-2)}
.filters button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.post{display:grid;grid-template-rows:auto 1fr;border-radius:var(--r-card);background:var(--paper-2);overflow:hidden;text-decoration:none;color:inherit;transition:transform .3s var(--ease),background-color .3s}
.post:hover{transform:translateY(-4px);background:var(--mint-3)}
.post-img{position:relative;aspect-ratio:16/10;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.post:hover .post-img img{transform:scale(1.04)}
.post-cat{position:absolute;left:12px;top:12px;padding:6px 11px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);font-size:.74rem;font-weight:600;backdrop-filter:blur(8px)}
.post-big{position:absolute;right:12px;bottom:12px;display:grid;padding:8px 12px;border-radius:14px;background:var(--btn);color:var(--btn-fg);text-align:right}
.post-big b{font:600 1.2rem/1 var(--f-display)}
.post-big small{font-size:.66rem;opacity:.8}
.post-body{display:grid;gap:10px;align-content:start;padding:20px}
.post-body h3{font:600 1.15rem/1.3 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.post-body p{color:var(--ink-2);font-size:.92rem}
.post-meta{display:flex;align-items:center;gap:10px;margin-top:4px;font-size:.78rem;color:var(--ink-3)}
.post-meta .av{width:28px;height:28px;font-size:.62rem}
.post--feat{grid-column:1/-1;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);grid-template-rows:none}
.post--feat .post-img{aspect-ratio:auto;min-height:340px}
.post--feat .post-body{padding:clamp(22px,3vw,40px);align-content:center}
.post--feat h3{font-size:clamp(1.4rem,1.1rem + 1vw,2rem)}
.news-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 40px;align-items:center;padding:clamp(22px,3vw,36px);border-radius:var(--r-card);background:var(--lav);color:var(--on-lav);margin-top:16px}
.news-band h3{font:600 1.5rem/1.2 var(--f-display);letter-spacing:-.015em}
.news-band p{opacity:.8}
.news-band form{display:flex;gap:8px;flex-wrap:wrap}
.news-band input{flex:1;min-width:200px;height:48px;padding:0 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--on-lav) 22%,transparent);background:var(--paper);color:var(--ink);font:inherit}
.news-band .msg{flex-basis:100%;font-size:.86rem}
.post-empty{grid-column:1/-1;padding:30px;text-align:center;color:var(--ink-3)}
/* article */
.art-hero .hero-board{min-height:0}
.art{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
.art-toc{position:sticky;top:110px;display:grid;gap:8px}
.art-toc a{padding:8px 12px;border-radius:12px;text-decoration:none;color:var(--ink-2);font-size:.9rem;border-left:2px solid var(--line)}
.art-toc a.on{color:var(--ink);border-left-color:var(--forest-3);background:var(--paper-2)}
.prose{max-width:70ch;font-size:1.06rem;line-height:1.75;color:var(--ink-2)}
.prose > * + *{margin-top:1.1em}
.prose .ldr{font-size:1.22rem;line-height:1.6;color:var(--ink)}
.prose h2{font:600 1.6rem/1.25 var(--f-display);letter-spacing:-.015em;color:var(--ink);margin-top:1.8em;scroll-margin-top:110px}
.prose h3{font:600 1.25rem/1.3 var(--f-display);color:var(--ink);margin-top:1.5em;scroll-margin-top:110px}
.prose b,.prose strong{color:var(--ink)}
.prose blockquote{margin:1.4em 0;padding:18px 22px;border-radius:18px;background:var(--mint-3);color:var(--ink);font:500 1.15rem/1.5 var(--f-display);border-left:4px solid var(--forest-3)}
.prose ul{display:grid;gap:8px;padding-left:0}
.prose ul li{display:flex;gap:10px}
.prose ul li::before{content:"";width:7px;height:7px;margin-top:.7em;border-radius:50%;background:var(--forest-3);flex:none}
.prose .callout{padding:18px 20px;border-radius:18px;background:var(--lav-3);color:var(--ink);font-size:1rem}
.prose .tbl-wrap{border-radius:16px}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem}
.prose th,.prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-2)}
.prose th{background:var(--paper-2);font:500 .72rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.art-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:28px}
.art-foot{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;margin-top:40px}
.art-author{display:flex;align-items:center;gap:14px;padding:20px;border-radius:var(--r-card);background:var(--paper-2)}
.art-author b{display:block;font-weight:600}
.art-author small{color:var(--ink-3)}
.art-cta{display:grid;gap:10px;padding:22px;border-radius:var(--r-card);background:var(--forest);color:var(--on-forest)}
.art-cta h4{font:600 1.2rem/1.2 var(--f-display)}
.art-cta p{color:var(--on-forest-2);font-size:.92rem}
.art-cta .pill{justify-self:start;background:var(--mint-2);color:#062116}

/* ======================= community ======================= */
.spaces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.space{display:grid;grid-template-columns:46px 1fr;gap:4px 14px;align-items:start;padding:20px;border-radius:var(--r-card);background:var(--paper-2);text-decoration:none;color:inherit;transition:background-color .3s,transform .3s var(--ease)}
.space:hover{background:var(--mint-3);transform:translateY(-3px)}
.space .icb{grid-row:span 3}
.space b{font:600 1.05rem/1.3 var(--f-display)}
.space span{color:var(--ink-2);font-size:.88rem}
.space em{font:500 .72rem/1.4 var(--f-mono);font-style:normal;color:var(--ink-3)}
.forum{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.threads{display:grid;gap:8px}
.thread{display:grid;grid-template-columns:54px minmax(0,1fr);gap:14px;padding:16px;border-radius:20px;background:var(--paper);border:1px solid var(--line-2);animation:drop .4s var(--ease)}
.vote{display:grid;justify-items:center;align-content:center;gap:2px;width:54px;height:62px;border-radius:14px;border:1px solid var(--line);background:var(--paper-2);cursor:pointer;font:600 .92rem/1 var(--f-mono);color:var(--ink)}
.vote .ic{font-size:14px;transform:rotate(-90deg)}
.vote[aria-pressed="true"]{background:var(--mint);border-color:transparent;color:var(--on-mint)}
.thread a{font:600 1.02rem/1.35 var(--f-display);color:var(--ink);text-decoration:none}
.thread a:hover{text-decoration:underline}
.thread-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:8px;font-size:.78rem;color:var(--ink-3)}
.thread-meta .chip{height:24px;font-size:.72rem;background:var(--paper-2)}
.faces{display:inline-flex;align-items:center}
.faces .av{width:24px;height:24px;font-size:.56rem;border:2px solid var(--paper);margin-left:-6px}
.faces .av:first-child{margin-left:0}
.badge-ok{display:inline-flex;align-items:center;gap:5px;color:var(--good);font-weight:600}
.badge-hot{color:var(--bad);font-weight:600}
.typing-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:20px;border:1px dashed var(--line);font-size:.86rem;color:var(--ink-3)}
.ldr{display:grid;gap:14px;padding:20px;border-radius:var(--r-card);background:var(--forest);color:var(--on-forest);position:sticky;top:110px}
.lead-top{display:flex;align-items:end;justify-content:space-between;gap:10px}
.lead-top h3{font:600 1.3rem/1.1 var(--f-display)}
.ldr .seg2{background:var(--forest-2);border-color:transparent}
.ldr .seg2 button{color:var(--on-forest-2)}
.ldr .seg2 button[aria-pressed="true"]{background:var(--mint-2);color:#062116}
.lead-rows{display:grid;gap:6px}
.lead-row{display:grid;grid-template-columns:28px 34px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border-radius:14px;background:var(--forest-2)}
.lead-row .rk{font:500 .8rem/1 var(--f-mono);color:var(--mint-2);text-align:center}
.lead-row b{display:block;font-size:.9rem}
.lead-row small{display:block;font-size:.72rem;color:var(--on-forest-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lead-row em{font:600 1rem/1 var(--f-display);font-style:normal;font-variant-numeric:tabular-nums}
.lead-note{font-size:.78rem;color:var(--on-forest-2)}
.events{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.event-list{display:grid;gap:10px}
.event{display:grid;grid-template-columns:70px minmax(0,1fr);gap:16px;padding:18px;border-radius:20px;background:var(--paper-2)}
.event-date{display:grid;place-content:center;text-align:center;width:70px;height:74px;border-radius:16px;background:var(--mint);color:var(--on-mint)}
.event:nth-child(2n) .event-date{background:var(--lav);color:var(--on-lav)}
.event-date b{font:600 1.6rem/1 var(--f-display)}
.event-date small{font:500 .72rem/1.4 var(--f-mono);text-transform:uppercase;letter-spacing:.08em}
.event h3{font:600 1.08rem/1.3 var(--f-display)}
.event p{color:var(--ink-2);font-size:.9rem}
.event em{font:500 .74rem/1 var(--f-mono);font-style:normal;color:var(--ink-3)}

/* ======================= about ======================= */
.mv{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.mv-card{display:grid;grid-template-rows:auto 1fr;border-radius:26px;overflow:hidden;background:var(--paper-2)}
.mv-card:nth-child(2){background:var(--forest);color:var(--on-forest)}
.mv-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mv-body{display:grid;gap:14px;align-content:start;padding:clamp(22px,3vw,36px)}
.mv-card:nth-child(2) .label{color:var(--on-forest-2)}
.mv-card:nth-child(2) .h3{color:var(--on-forest)}
.mv-body p{color:var(--ink-2)}
.mv-card:nth-child(2) .mv-body p{color:var(--on-forest-2)}
.mv-belief{padding:14px 16px;border-radius:16px;background:var(--mint);color:var(--on-mint)!important;font:500 1rem/1.5 var(--f-display)}
.serve{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.serve-card{position:relative;border-radius:22px;overflow:hidden;min-height:380px;display:grid;align-content:end;color:var(--photo-ink)}
.serve-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.serve-card:hover img{transform:scale(1.05)}
.serve-card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--photo-shade) 0%,rgba(5,22,15,.3) 55%,transparent 75%)}
.serve-card div{position:relative;z-index:1;display:grid;gap:8px;padding:18px}
.serve-card h3{font:600 1.08rem/1.25 var(--f-display)}
.serve-card p{font-size:.86rem;color:color-mix(in srgb,var(--photo-ink) 86%,transparent)}
.creds{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.cred{display:grid;gap:10px;align-content:start;padding:14px;border-radius:20px;background:var(--paper-2);text-align:left;border:0;cursor:zoom-in;color:inherit;font:inherit}
.cred-img{display:grid;place-items:center;height:120px;padding:10px;border-radius:14px;background:#FFFFFF}
.cred-img img{max-height:100px;width:auto;object-fit:contain}
.cred b{font-weight:600;font-size:.92rem}
.cred small{font-size:.76rem;color:var(--ink-3)}
.lightbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:24px;background:rgba(4,12,9,.78);backdrop-filter:blur(6px)}
.lightbox img{max-width:min(900px,92vw);max-height:80vh;border-radius:18px;background:#fff}
.lightbox button{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);right:18px}

/* ======================= contact ======================= */
.ct{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:14px;align-items:start}
.ct-app{border-radius:24px;overflow:hidden;border:1px solid var(--line);background:var(--paper);box-shadow:var(--shadow)}
.ct-app .app-top{justify-content:space-between}
.ct-form{display:grid;gap:14px;padding:clamp(18px,3vw,30px)}
.ct-form h2{font:600 1.6rem/1.15 var(--f-display);letter-spacing:-.015em}
.ct-form > p{color:var(--ink-2)}
.ct-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fld .req{color:var(--bad)}
.fld .err{font-size:.78rem;color:var(--bad);min-height:0}
.fld.bad input,.fld.bad textarea{border-color:var(--bad)}
.attach{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;border:1.5px dashed var(--line);cursor:pointer;color:var(--ink-2);font-size:.88rem}
.attach input{position:absolute;opacity:0;width:1px;height:1px}
.attach:focus-within{outline:2px solid var(--forest-3);outline-offset:2px}
.attach b{color:var(--ink);font-weight:600}
.chk{display:flex;align-items:center;gap:10px;font-size:.9rem}
.chk input{width:18px;height:18px;accent-color:var(--forest-3)}
.chk a{color:var(--forest-3);font-weight:600}
.ct-sent{display:grid;gap:10px;justify-items:start;padding:clamp(18px,3vw,30px)}
.ct-sent h3{font:600 1.5rem/1.2 var(--f-display)}
.ct-sent p{color:var(--ink-2)}
.ct-sent .note{max-width:52ch}
.rec{position:sticky;top:110px;display:grid;gap:12px;padding:18px;border-radius:24px;background:var(--forest);color:var(--on-forest)}
.rec-top{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600}
.rec-who{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:var(--forest-2)}
.rec-who b{display:block;font:600 1.05rem/1.2 var(--f-display);word-break:break-word}
.rec-who small{color:var(--on-forest-2);font-size:.78rem}
.rec dl{display:grid;gap:6px}
.rec dl div{display:grid;grid-template-columns:70px minmax(0,1fr);gap:10px;padding:10px 12px;border-radius:12px;background:var(--forest-2);font-size:.86rem}
.rec dt{color:var(--on-forest-2);font-size:.76rem}
.rec dd{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-note{padding:12px;border-radius:12px;background:var(--forest-2);font-size:.86rem;color:var(--on-forest-2);min-height:64px;word-break:break-word}
.rec-route{font-size:.8rem;color:var(--on-forest-2)}
.rec .st{background:color-mix(in srgb,var(--mint-2) 20%,transparent);color:var(--mint-2)}
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}
.strip > div{display:grid;gap:6px;align-content:start;padding:18px;border-radius:20px;background:var(--paper-2)}
.strip .label{display:flex;align-items:center;gap:8px}
.strip b{font:600 1.08rem/1.3 var(--f-display);word-break:break-word}
.strip small{color:var(--ink-3);font-size:.82rem}
.strip .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.strip .copy{border-color:var(--line);color:var(--ink)}
.strip .copy.ok{background:var(--mint-2);color:#062116}
.offices{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.office-list{display:grid;gap:10px}
.office{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:18px;border-radius:20px;background:var(--paper-2)}
.office .flag{grid-row:span 2;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--mint);color:var(--on-mint);font:600 .9rem/1 var(--f-mono)}
.office:nth-child(2) .flag{background:var(--lav);color:var(--on-lav)}
.office b{font:600 1.08rem/1.2 var(--f-display)}
.office small{color:var(--ink-2);font-size:.88rem}
.office-time{grid-row:span 2;display:grid;justify-items:end;gap:6px;text-align:right}
.office-time b{font:500 1.1rem/1 var(--f-mono);font-variant-numeric:tabular-nums}
.office-time a{font-size:.8rem;font-weight:600;color:var(--forest-3)}

/* ======================= legal ======================= */
.lg-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.doc-wrap{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start}
.toc{position:sticky;top:110px;display:grid;gap:4px;padding:16px;border-radius:22px;background:var(--paper-2)}
.toc .label{padding:4px 8px 8px}
.toc a{display:grid;grid-template-columns:26px 1fr;gap:4px;padding:8px;border-radius:12px;text-decoration:none;color:var(--ink-2);font-size:.88rem;line-height:1.35}
.toc a span{font:500 .78rem/1.5 var(--f-mono);color:var(--ink-3)}
.toc a:hover{background:var(--paper)}
.toc a.on{background:var(--mint);color:var(--on-mint)}
.toc a.on span{color:var(--on-mint)}
.toc-bar{height:4px;border-radius:9px;background:var(--line);overflow:hidden;margin:8px 8px 0}
.toc-bar i{display:block;height:100%;width:var(--p,0%);background:var(--forest-3)}
.doc{display:grid;gap:12px;min-width:0}
.doc-sec{display:grid;gap:14px;padding:clamp(20px,3vw,32px);border-radius:var(--r-card);background:var(--paper-2);scroll-margin-top:110px}
.doc-sec h2{display:flex;align-items:baseline;gap:12px;font:600 clamp(1.25rem,1.1rem + .5vw,1.55rem)/1.25 var(--f-display);letter-spacing:-.012em}
.doc-sec h2 .n{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 8px;border-radius:12px;background:var(--mint);color:var(--on-mint);font:500 .86rem/1 var(--f-mono);flex:none}
.doc-sec h3{font:600 1.1rem/1.3 var(--f-display);margin-top:6px}
.doc-sec p,.doc-sec li,.doc-sec dd{color:var(--ink-2);line-height:1.7}
.doc-sec a{color:var(--forest-3);font-weight:600}
.doc-list{display:grid;gap:8px}
.doc-list li{display:flex;gap:10px}
.doc-list li::before{content:"";width:7px;height:7px;margin-top:.7em;border-radius:50%;background:var(--forest-3);flex:none}
.doc-list.cols{grid-template-columns:1fr 1fr;gap:8px 24px}
.doc-list.check li::before,.doc-list.rights li::before{width:20px;height:20px;margin-top:.2em;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E3A2B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.doc-list.rights{grid-template-columns:repeat(3,minmax(0,1fr))}
.doc-list.rights li{padding:12px;border-radius:14px;background:var(--paper)}
.doc-dl{display:grid;gap:10px}
.doc-dl.grid,.doc-dl.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
.doc-dl > div{display:grid;gap:4px;padding:14px 16px;border-radius:16px;background:var(--paper)}
.doc-dl dt{font:600 1rem/1.3 var(--f-display);color:var(--ink)}
.doc-note{display:grid;gap:6px;padding:16px;border-radius:16px;border:1.5px dashed var(--warn);background:var(--warn-bg)}
.doc-note b{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warn)}
.doc-contact{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:20px;align-items:center;padding:clamp(20px,3vw,32px);border-radius:var(--r-card);background:var(--forest);color:var(--on-forest);scroll-margin-top:110px}
.doc-contact h2{display:flex;align-items:baseline;gap:12px;font:600 1.5rem/1.2 var(--f-display);color:var(--on-forest)}
.doc-contact h2 .n{display:inline-grid;place-items:center;min-width:40px;height:40px;border-radius:12px;background:var(--mint-2);color:#062116;font:500 .86rem/1 var(--f-mono)}
.doc-contact p,.doc-contact li{color:var(--on-forest-2)}
.doc-contact ul{display:grid;gap:8px;margin-top:10px}
.doc-contact li{display:flex;gap:10px;align-items:center}
.doc-contact li b{color:var(--on-forest);font-weight:600}
.doc-contact a{color:var(--mint-2)}
.doc-contact img{border-radius:18px;aspect-ratio:1;object-fit:cover;width:100%}
.legal-flag{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:8px 14px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:.84rem;font-weight:600}

/* reveal for new blocks */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .split-copy,.split-media,.cards,.tiles,.log,.bento,.nlist,.uses-side,.modes,.lvw,.plans,.ptbl,.usage-cards,.posts,.spaces,.threads,.event-list,.mv,.serve,.creds,.ct-app,.strip,.office-list,.lg-links,.doc-sec,.clog-item{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}

/* ======================= responsive ======================= */
@media (max-width:1180px){
  .modes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .serve{grid-template-columns:repeat(3,minmax(0,1fr))}
  .creds{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .finder{grid-template-columns:1fr 1fr}
  .finder-rec{grid-column:1/-1;justify-self:start;text-align:left}
}
@media (max-width:1000px){
  .split,.plog,.ben,.uses,.usage,.setup,.forum,.events,.offices,.ct,.doc-wrap,.art,.news-band{grid-template-columns:1fr}
  .split--rev > .split-media{order:0}
  .ben-media,.uses-side,.cti,.ldr,.rec,.toc,.art-toc{position:static}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bx--big{grid-column:1/-1;grid-row:auto;min-height:340px}
  .bx--wide,.bx--s2{grid-column:span 2}
  .bx--s2:not(.bx--photo){grid-column:span 1}
  .cards{--cols:2!important}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lvw{grid-template-columns:1fr}
  .lvw-tabs{grid-auto-flow:column;grid-auto-columns:minmax(170px,1fr);overflow-x:auto;padding-bottom:6px}
  .plans{grid-template-columns:1fr}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post--feat{grid-template-columns:1fr}
  .spaces{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mv{grid-template-columns:1fr}
  .art-toc{display:none}
  .toc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toc .label,.toc .toc-bar{grid-column:1/-1}
  .doc-contact{grid-template-columns:1fr}
  .doc-contact img{max-width:220px}
  .ph-card{top:84px}
}
@media (max-width:760px){
  .ph-card{left:14px;right:14px;width:auto;top:14px}
  .ph-card--low{top:auto;bottom:70px}
  .ph-chip{display:none}
  .cards{--cols:1!important}
  .tiles{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .bx--big,.bx--wide,.bx--s2,.bx--full{grid-column:auto}
  .modes{grid-template-columns:1fr}
  .lvw-panel{grid-template-columns:1fr}
  .ctrls{grid-template-columns:1fr}
  .finder{grid-template-columns:1fr}
  .posts{grid-template-columns:1fr}
  .spaces{grid-template-columns:1fr}
  .serve{grid-template-columns:1fr 1fr}
  .serve-card{min-height:300px}
  .creds{grid-template-columns:1fr 1fr}
  .lg-links{grid-template-columns:1fr}
  .strip{grid-template-columns:1fr}
  .ct-row{grid-template-columns:1fr}
  .doc-list.cols,.doc-list.rights,.doc-dl.grid,.doc-dl.tiles{grid-template-columns:1fr}
  .toc{grid-template-columns:1fr}
  .uc{grid-template-columns:1fr}
  .uc b{grid-row:auto}
  .flow{position:relative;left:auto;right:auto;bottom:auto;margin-top:-30px;margin-inline:10px}
  .split-media--flow{padding-bottom:0}
  .plan-meta{grid-template-columns:1fr 1fr}
  .price-note{border-radius:20px}
  .art-foot{grid-template-columns:1fr}
  .office{grid-template-columns:44px minmax(0,1fr)}
  .office .flag{width:44px;height:44px}
  .office-time{grid-column:2;grid-row:auto;justify-items:start;text-align:left}
}
@media (max-width:420px){
  .serve{grid-template-columns:1fr}
  .creds{grid-template-columns:1fr}
}

/* ======================= dialers (extra) ======================= */
.md-card{width:min(320px,74%)}
.md-chips{display:flex;flex-wrap:wrap;gap:5px}
.md-chips button{height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--paper);font:500 .72rem/1 var(--f-body);color:var(--ink-2);pointer-events:none;transition:background-color .3s,color .3s,border-color .3s}
.md-chips button.on{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.md-core{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:10px 12px;border-radius:14px;background:var(--mint-3)}
.md-core b{font:600 1.05rem/1.2 var(--f-display)}
.md-core small{grid-column:1;font-size:.72rem;color:var(--ink-3)}
.md-core .pace{grid-row:1/span 2;grid-column:2;height:22px}
.md-core .pace i{width:6px}
.md-scale{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font:500 .6rem/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.md-scale i{height:5px;border-radius:9px;background:linear-gradient(90deg,var(--mint-2),var(--lav-2))}
.trio .card--img{padding-bottom:22px}
.trio .h3{font:600 1.6rem/1.1 var(--f-display);letter-spacing:-.02em}
.ringsec .ctrls{margin-top:8px}
.ringsec .split-media{align-self:stretch;display:grid}
.ringsec .frame{height:100%;--ar:auto;min-height:420px}
.cbar{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--ink);box-shadow:var(--shadow)}
.cbar-who{display:flex;align-items:center;gap:10px;min-width:0}
.cbar-who b{display:block;font-size:.86rem}
.cbar-who small{display:block;font:500 .7rem/1.2 var(--f-mono);color:var(--good);font-variant-numeric:tabular-nums}
.cbar-btns{display:flex;gap:5px}
.cbar-btns span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--paper-2);font-size:14px;color:var(--ink-2);transition:background-color .3s,color .3s,transform .3s var(--ease)}
.cbar-btns span.on{background:var(--btn);color:var(--btn-fg);transform:translateY(-2px)}
.cbar-btns span:nth-child(7).on{background:var(--bad);color:#fff}
.deal-pts{display:grid;gap:10px;margin-top:6px}
.deal-pts li{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:center;padding:14px;border-radius:18px;background:var(--paper-2)}
.deal-pts li:nth-child(2) .icb{background:var(--lav);color:var(--on-lav)}
.deal-pts b{display:block;font:600 1.02rem/1.3 var(--f-display)}
.deal-pts span:not(.icb){font-size:.9rem;color:var(--ink-2)}
.deal-img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:50% 35%;border-radius:16px}
.deal-call .ring-ic{flex:none}
.deal-step{display:flex;align-items:center;gap:8px;font:500 .74rem/1 var(--f-mono);color:var(--ink-3);padding:0 4px}
.deal-step .ic{color:var(--forest-3)}
.resp{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,4vw,56px);align-items:stretch}
.resp-img{--ar:auto;height:100%;min-height:360px}
.resp-copy{display:grid;gap:16px;align-content:center}
.resp-copy .sub{color:var(--on-forest-2)}
.resp .h2{color:var(--on-forest)}
.tiles--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.note--dark{background:var(--forest-2);color:var(--on-forest-2)}
.note--dark .ic{color:var(--mint-2)}
.lv-mini{display:grid;gap:4px;padding:10px 12px;border-radius:12px;background:var(--lav-3);font-size:.78rem;animation:drop .4s var(--ease)}
.lv-mini b{font-size:.86rem}
.lv-mini small{color:var(--ink-3)}
.lv-k2{display:flex;justify-content:space-between;font:500 .66rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:4px 2px}
.lv-line em{font-style:normal;font-size:.7rem;color:var(--ink-3);font-family:var(--f-body);white-space:nowrap}
.lv-line[data-s="live"] em{color:var(--good);font-weight:600}
.lvw-tags{display:flex;flex-wrap:wrap;gap:6px}
.lvw-head{display:flex;align-items:center;gap:10px}
.lvw-head .n{font:500 .78rem/1 var(--f-mono);color:var(--ink-3)}
.lvw-info h3{font:600 1.6rem/1.1 var(--f-display);letter-spacing:-.02em}
.lvw-info > p{color:var(--ink-2)}
.lvw-go{justify-self:start}
@media (max-width:1000px){
  .resp{grid-template-columns:1fr}
  .resp-img{min-height:0;--ar:16/9;height:auto}
  .ringsec .frame{min-height:0;--ar:4/3;height:auto}
}
@media (max-width:760px){
  .tiles--2{grid-template-columns:1fr}
  .md-card{width:auto}
  .cbar-btns span{width:28px;height:28px}
  .cbar-btns span:nth-child(n+5){display:none}
}

.lv-agent .st{background:color-mix(in srgb,var(--mint-2) 18%,transparent);color:var(--mint-2)}
.lv-rec{display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px 12px;border-radius:14px;background:var(--paper-2);font-size:.8rem;transition:background-color .4s}
.lv-rec .ic{color:var(--forest-3);font-size:16px}
.lv-rec small{display:block;font:500 .64rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lv-rec b{font-weight:600}
.lv-rec.hit{background:var(--mint-3)}
.lv{align-content:stretch;grid-auto-rows:min-content}

/* ======================= shared extras ======================= */
.av--brand{background:var(--btn);color:var(--btn-fg)}
.av--brand svg{width:62%;height:62%}
.av--more{background:var(--paper-3);color:var(--ink-2);font-size:.6rem}
.hero--long .hero-lede{font-size:.98rem}
.hero--long .hero-h{font-size:clamp(1.9rem,.9rem + 2.6vw,3.3rem)}
.callout-m{padding:14px 16px;border-radius:16px;background:var(--lav-3);font-size:.94rem}
.ph-btn{justify-self:start;transition:transform .2s}
.ph-btn.press,.ab.press{transform:scale(.95)}

/* blog extras */
.art-hero .hero-h{font-size:clamp(1.7rem,1rem + 2vw,2.9rem);text-transform:none;letter-spacing:-.025em;line-height:1.08}
.art-by{margin-top:auto;padding-top:28px;color:color-mix(in srgb,var(--on-mint) 80%,transparent)}
.art-by b{color:var(--on-mint)}
.post-meta b{font-weight:600}
.posts .post[hidden]{display:none}
#related .posts{grid-template-columns:repeat(3,minmax(0,1fr))}

/* pricing extras */
.bill-card{width:min(300px,72%)}
.seats{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:.76rem;color:var(--ink-3)}
.seats b{font:600 1.1rem/1 var(--f-display);color:var(--ink);font-variant-numeric:tabular-nums}
.seat-row{display:flex;flex-wrap:wrap;gap:3px}
.seat-row i{width:14px;height:14px;border-radius:50%;background:var(--mint-2);animation:drop .35s var(--ease)}
.seat-row i.x{background:var(--lav-2)}
.bill-note{font-size:.8rem;opacity:.75;margin-top:-8px}
.plan--dark .price b{font-size:clamp(2.2rem,1.8rem + 1.4vw,3rem)}
.price b{transition:opacity .2s}
.usage .split-copy .split-media{margin-top:6px}

/* resources extras */
.cti-col{position:sticky;top:110px;display:grid;gap:12px}
.cti-col .cti{position:relative;top:auto}
.cti-photo{--ar:16/8}
.cti .ph-field code{min-height:2.1em}
.cti .ph-field.on code{animation:none}
.logwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:start}
.logwrap-side{position:sticky;top:110px;display:grid;gap:18px;justify-items:start}
.logwrap-side .sec-head{margin-bottom:0}
.logwrap-side .frame{width:100%;--ar:4/3.2}
.clog-meta b{color:var(--ink);font-weight:600}

/* community extras */
.lead-row--mod{grid-template-columns:28px 34px minmax(0,1fr) auto}
.lead-row em small{font:500 .66rem/1 var(--f-body);color:var(--on-forest-2)}
.lead-img{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:16/9}
.lead-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.ldr .label{margin-bottom:6px}
.thread[hidden]{display:none}
.thread-meta .ic{font-size:13px;vertical-align:-2px}
.vote span{font-variant-numeric:tabular-nums}
.typing-row .eq i{background:var(--ink-3)}

/* about extras */
.bridge{position:absolute;inset:0;pointer-events:none}
.br-core{position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;display:grid;place-items:center;border-radius:24px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.br-core svg{width:48px;height:48px}
.br-node{position:absolute;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow);font-size:.82rem;font-weight:600;color:var(--ink);white-space:nowrap}
.br-node i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--mint);color:var(--on-mint);font-size:13px}
.br-node--0{left:6%;top:12%}
.br-node--1{right:6%;top:40%}
.br-node--1 i{background:var(--lav);color:var(--on-lav)}
.br-node--2{left:10%;bottom:12%}
.br-node.on{background:var(--btn);color:var(--btn-fg);border-color:transparent}
.cred-note{margin-top:16px;font-size:.84rem;color:var(--ink-3);max-width:80ch}
.cards .card-n + .icb{margin-top:-4px}

/* contact extras */
.ct-top{gap:14px}
.dots{display:inline-flex;gap:6px}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--line)}
.dots i:first-child{background:#E46A5F}.dots i:nth-child(2){background:#E9B84A}.dots i:nth-child(3){background:#5BBF7A}
.ct-menu{display:flex;gap:14px;font-size:.78rem;color:var(--ink-3)}
.ct-menu b{color:var(--ink)}
.ct-bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line-2);font-size:.8rem;flex-wrap:wrap}
.ct-crumb{color:var(--ink-3)}
.ct-crumb i{font-style:normal;margin:0 4px}
.ct-crumb b{color:var(--ink);font-weight:600}
.ct-search{display:inline-flex;align-items:center;gap:8px;margin-left:auto;height:30px;padding:0 10px;border-radius:9px;background:var(--paper-2);color:var(--ink-3)}
.ct-search kbd{font:500 .66rem/1 var(--f-mono);padding:3px 5px;border-radius:5px;border:1px solid var(--line);background:var(--paper)}
.ct-on{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:9px;background:var(--good-bg);color:var(--good);font-weight:600}
.ct-prog{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:10px 14px;font:500 .7rem/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--line-2)}
.ct-prog .toc-bar{margin:0}
.ct-prog b{color:var(--ink)}
.ct-form .fld--full{grid-column:1/-1}
.fld input,.fld textarea{width:100%;min-width:0;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.fld textarea{resize:vertical;min-height:110px}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--forest-3);box-shadow:0 0 0 3px color-mix(in srgb,var(--forest-3) 18%,transparent)}
.fld .err:empty{display:none}
.flabel{font-size:.82rem;font-weight:600}
.fld{position:relative}
.attach-x{position:absolute;right:10px;bottom:12px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;cursor:pointer;color:var(--ink-2)}
.attach .ic{font-size:18px;color:var(--forest-3);flex:none}
.attach.has{border-style:solid;border-color:var(--forest-3);background:var(--mint-3)}
.ct-send{justify-self:start}
.ct-sent .icb{width:56px;height:56px;border-radius:18px;font-size:24px}
.ct-sent .note .ic{margin-top:2px}
.rec-img{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:16/9}
.rec-img img{width:100%;height:100%;object-fit:cover}
.rec-route{display:flex;align-items:center;gap:8px}
.rec-route b{color:var(--on-forest)}
.rec-who .av .ic{font-size:18px}
.rec dd.on{color:var(--mint-2)}
.strip a{color:inherit;text-decoration:none}
.strip a:hover b{text-decoration:underline}
.strip .label .ic{font-size:13px}
.office{cursor:pointer;border:1.5px solid transparent;transition:border-color .25s,background-color .25s}
.office:hover{background:var(--paper-3)}
.office[aria-pressed="true"]{border-color:var(--forest-3);background:var(--mint-3)}
.office-pin{position:absolute;left:18px;right:18px;bottom:18px;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);color:var(--ink)}
.office-pin div{min-width:0;flex:1}
.office-pin b{display:block;font:600 1.05rem/1.2 var(--f-display)}
.office-pin small{display:block;font-size:.8rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.office-pin em{font-style:normal;font-size:1rem}
.office-pin.hit{animation:hit 1s var(--ease)}

/* legal extras */
.doc-sec h2 .doc-ic{margin-left:auto;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--paper);color:var(--forest-3);font-size:17px;flex:none}
.doc-sec h3 .sn{font:500 .8rem/1 var(--f-mono);color:var(--ink-3);margin-right:6px}
.doc-kv,.doc-contact ul{display:grid;gap:8px}
.doc-kv li{display:grid;grid-template-columns:90px 1fr;gap:10px;padding:12px 14px;border-radius:14px;background:var(--paper)}
.doc-kv .k,.doc-contact .k{font:500 .72rem/1.6 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.doc-contact .k{color:var(--on-forest-2);min-width:76px}
.doc-contact li{padding:10px 12px;border-radius:12px;background:var(--forest-2)}
.dc-name{margin-top:14px;color:var(--on-forest)}
.doc-note p{color:var(--ink)}
.sec-list li{font-size:1rem;color:var(--ink-2)}
.lg-cards .card--img > img{--ar:16/8;object-position:50% 30%}
.toc a{transition:background-color .2s,color .2s}
@media (max-width:1000px){
  .cti-col,.logwrap-side{position:static}
  .logwrap{grid-template-columns:1fr}
  #related .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ct-menu span{display:none}
}
@media (max-width:760px){
  #related .posts{grid-template-columns:1fr}
  .ct-search{display:none}
  .ct-on{margin-left:auto}
  .bill-card{width:auto}
  .br-node{font-size:.74rem;height:34px}
  .doc-kv li{grid-template-columns:1fr}
  .office-pin small{white-space:normal}
}
.flow-agent,.flow-agent > div{min-width:0}
@media (max-width:1000px){.lvw{grid-template-columns:minmax(0,1fr)}}
.plan{display:flex;flex-direction:column}
.plan ul{flex:1}
.ph-chip,.ph-card{z-index:3}
.ph-card > *{min-width:0}
.ph-tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.posts .news-band{grid-template-columns:1fr;margin-top:0;align-content:center;gap:18px}
.posts .news-band form{flex-direction:column;align-items:stretch}
.posts .news-band input{min-width:0}
.posts .news-band .pill{justify-content:center}
.fld input[type=checkbox]{width:18px;height:18px;padding:0;border-radius:4px;flex:none}
.chk{font-weight:500!important}
.office .flag,.office-time{grid-row:auto}
.office-txt{display:grid;gap:4px;min-width:0}
@media (max-width:760px){.office-time{grid-column:2}}

.art-by .av{background:var(--paper)}
.art-tags .chip{background:var(--paper-2)}
.art-author{align-content:center}
@media (max-width:760px){
  .finder{grid-template-columns:minmax(0,1fr)}
  .finder .seg2{flex-wrap:wrap;border-radius:18px;max-width:100%}
  .tbl-wrap{max-width:100%}
}
.tbl-wrap{position:relative}
@media (max-width:1000px){
  .ben-media{position:relative}
  .lvw-tabs{grid-auto-columns:max-content}
  .lvw-tabs button{white-space:nowrap}
}
@media (max-width:760px){
  .hero--page .hero-media{min-height:520px}
  .ph-card [data-qr]:nth-last-child(-n+2){display:none}
  .md-card .md-scale{display:none}
  .tbl tbody th{min-width:170px}
  .ph-card--low{top:auto!important;bottom:60px}
}

/* ===== page heroes: live cards dock at the bottom so faces stay clear ===== */
.hero--page .ph-card,.hero--page .ph-card--low{top:auto;bottom:22px;right:22px;left:auto}
.hero--page .hero-media:has(.ph-card) .wave{left:0;right:auto;width:calc(100% - min(340px,46%));bottom:26px;height:24%}
.hero--page .hm-shade{background:linear-gradient(to top,var(--photo-shade) 0%,transparent 55%)}
.ph-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;position:relative;counter-reset:qs}
.ph-steps li{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;height:26px;border-radius:999px;background:var(--paper-2);font-size:.7rem;font-weight:600;color:var(--ink-3);transition:background-color .35s,color .35s,transform .35s var(--ease)}
.ph-steps li::before{counter-increment:qs;content:counter(qs);font:500 .62rem/1 var(--f-mono);opacity:.7}
.ph-steps li.done{background:var(--mint-3);color:var(--forest-3)}
.ph-steps li.done::before{content:"✓";opacity:1}
.ph-steps li.on{background:var(--btn);color:var(--btn-fg);transform:translateY(-1px)}
.hero--dock .ph-row{padding:6px 8px}
@media (max-width:1000px){
  .hero--page .ph-card{bottom:18px;right:18px}
}
@media (max-width:760px){
  .hero--page .ph-card,.hero--page .ph-card--low{left:12px;right:12px;bottom:12px;top:auto!important;width:auto}
  .hero--page .hero-media:has(.ph-card) .wave{display:none}
}
.hero--dock .ph-row small{display:none}
.hero--dock .ph-row{padding:5px 8px}
.hero--dock .ph-card{gap:8px}

/* ===== Product mega dropdown (smooth) ===== */
.nav-dd{position:relative}
.nav-dd::after{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:18px}
.nav-dd-panel{position:absolute;left:-14px;top:calc(100% + 14px);z-index:60;display:grid;grid-template-columns:1fr 1fr 236px;gap:6px;width:min(812px,calc(100vw - 48px));padding:10px;border-radius:26px;background:var(--paper);border:1px solid var(--line);box-shadow:0 30px 70px -24px rgba(8,30,21,.35),0 2px 6px rgba(8,30,21,.06);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.975);transform-origin:12% 0;transition:opacity .22s ease,transform .38s var(--ease),visibility 0s linear .38s}
.nav-dd-panel::before{content:"";position:absolute;left:44px;top:-7px;width:14px;height:14px;background:var(--paper);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);border-radius:3px 0 0 0}
.nav-dd.open .nav-dd-panel{opacity:1;visibility:visible;transform:none;transition:opacity .22s ease,transform .38s var(--ease),visibility 0s}
.mega-col{position:relative;z-index:1;display:grid;align-content:start;gap:2px;padding:6px}
.mega-k{padding:6px 10px 8px;font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.mega-a{display:grid;grid-template-columns:38px 1fr;gap:12px;align-items:center;padding:9px 10px;border-radius:14px;text-decoration:none;color:var(--ink);
  opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .45s var(--ease),background-color .2s}
.nav-dd.open .mega-a,.nav-dd.open .mega-feat{opacity:1;transform:none;transition-delay:calc(var(--i) * 28ms)}
.mega-a i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--mint);color:var(--on-mint);font-size:17px;transition:transform .35s var(--ease)}
.mega-col:nth-child(3) .mega-a i{background:var(--lav);color:var(--on-lav)}
.mega-a:hover i,.mega-a:focus-visible i{transform:scale(1.08) rotate(-4deg)}
.mega-a b{display:flex;align-items:center;gap:6px;font-weight:600;font-size:.92rem}
.mega-a small{display:block;font-size:.76rem;color:var(--ink-3);line-height:1.35}
.mega-a[aria-current="page"]{background:var(--mint-3)}
.mega-a::before,.mega-feat::before{content:none!important}
.mega-new{display:inline-block;padding:2px 7px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font:600 .58rem/1.4 var(--f-body);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.mega-hl{position:absolute;left:0;top:0;width:0;height:0;border-radius:14px;background:var(--paper-2);opacity:0;pointer-events:none;transition:transform .32s var(--ease),width .32s var(--ease),height .32s var(--ease),opacity .2s}
.mega-hl.on{opacity:1}
.mega-feat{position:relative;z-index:1;display:grid;align-content:start;gap:6px;padding:8px 8px 14px;border-radius:20px;background:var(--forest);color:var(--on-forest);text-decoration:none;opacity:0;transform:translateY(6px);transition:opacity .3s ease,transform .45s var(--ease)}
.mega-img{position:relative;display:block;border-radius:14px;overflow:hidden;aspect-ratio:4/3;margin-bottom:6px}
.mega-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.mega-feat:hover .mega-img img{transform:scale(1.06)}
.mega-img .mega-new{position:absolute;left:8px;top:8px;background:var(--mint-2);color:#062116}
.mega-feat b{padding:0 6px;font:600 1.02rem/1.2 var(--f-display)}
.mega-feat small{padding:0 6px;font-size:.78rem;color:var(--on-forest-2);line-height:1.4}
.mega-go{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 0;font-size:.8rem;font-weight:600;color:var(--mint-2)}
.mega-go .ic{transition:transform .3s var(--ease)}
.mega-feat:hover .mega-go .ic{transform:translateX(4px)}
.hdr-nav .mega a{font-size:inherit;padding:inherit}
.hdr-nav .mega .mega-a{padding:9px 10px}
.hdr-nav .mega .mega-feat{padding:8px 8px 14px;border-radius:20px;color:var(--on-forest)}
.hdr-nav .mega .mega-a{border-radius:14px}
.mega-a b{white-space:nowrap}
.hdr-nav .mega a:hover{background:transparent}
/* mobile accordion */
.mnav-acc{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 14px;border:0;border-radius:14px;background:none;color:var(--ink);font:500 1.05rem/1.2 var(--f-display);cursor:pointer;text-align:left}
.mnav-acc:hover{background:var(--paper-2)}
.mnav-acc .ic{transition:transform .35s var(--ease)}
.mnav-acc[aria-expanded="true"] .ic{transform:rotate(180deg)}
.mnav-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.mnav-acc-body.open{grid-template-rows:1fr}
.mnav-acc-body > .mnav-group{overflow:hidden;min-height:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;transition:padding .4s var(--ease)}
.mnav-acc-body.open > .mnav-group{padding-top:4px;padding-bottom:6px}
.mnav-group a{display:flex;align-items:center;gap:8px}
@media (prefers-reduced-motion:reduce){.nav-dd-panel,.mega-a,.mega-feat,.mega-hl,.mnav-acc-body{transition:none!important}}


/* =====================================================================
   Feature page: AI Call Summary Software (fx-)
   ===================================================================== */
/* hero: centered copy + wide photo stage */
.fx-hero-board{position:relative;border-radius:var(--r-board);background:var(--mint);color:var(--on-mint);padding:clamp(118px,11vw,150px) clamp(16px,3vw,40px) clamp(16px,3vw,40px);overflow:hidden;isolation:isolate}
.fx-hero-board::before{content:"";position:absolute;inset:-20% -10% auto;height:70%;background:radial-gradient(50% 60% at 50% 0%,color-mix(in srgb,var(--paper) 60%,transparent),transparent 70%);z-index:-1;pointer-events:none}
.fx-hero-copy{display:grid;justify-items:center;text-align:center;max-width:980px;margin:0 auto}
.fx-hero-copy .kick{align-self:auto}
.fx-h1{margin-top:20px;font:620 clamp(2.5rem,1.1rem + 4.6vw,5.6rem)/.98 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
.fx-lede{margin-top:22px;max-width:62ch;font-size:clamp(1rem,.95rem + .3vw,1.18rem);line-height:1.6;color:color-mix(in srgb,var(--on-mint) 82%,transparent)}
.fx-hero-copy .hero-cta{justify-content:center}
.fx-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;margin-top:26px}
.fx-trust li{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;font-weight:500}
.fx-trust .ic{width:20px;height:20px;padding:4px;border-radius:50%;background:var(--forest);color:var(--mint-2)}
.fx-stage{position:relative;margin-top:clamp(32px,4vw,52px);border-radius:26px;overflow:hidden;aspect-ratio:16/8.2;background:var(--paper-3);box-shadow:0 40px 80px -40px rgba(8,30,21,.45)}
.fx-stage-img{width:100%;height:100%;object-fit:cover;object-position:30% 30%}
.fx-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,rgba(5,22,15,.18));pointer-events:none}
.fx-wave{left:0;right:auto;width:52%;bottom:0;height:20%;z-index:1}
.fx-float{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 8px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow);font-size:.82rem;font-weight:600;color:var(--ink);animation:fx-bob 6s ease-in-out infinite}
.fx-float .ic{width:26px;height:26px;padding:5px;border-radius:50%;background:var(--mint);color:var(--on-mint)}
.fx-float .live-dot{margin-left:6px}
.fx-float--a{left:22px;top:22px}
.fx-float--b{left:22px;top:70px;animation-delay:-3s}
@keyframes fx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* live summary window */
.fx-app{position:absolute;z-index:3;right:clamp(14px,2.4vw,32px);top:clamp(14px,2.4vw,28px);width:min(390px,40%);max-height:calc(100% - 28px);overflow:hidden;display:grid;gap:10px;padding:14px;border-radius:22px;background:color-mix(in srgb,var(--paper) 90%,transparent);border:1px solid var(--glass-line);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 30px 60px -24px rgba(8,30,21,.5);color:var(--ink);font-size:.8rem}
.fx-app-top{display:flex;align-items:center;gap:10px}
.fx-app-t{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.fx-app-t svg{width:20px;height:20px}
.fx-rec{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:500 .72rem/1 var(--f-mono);color:var(--bad)}
.fx-rec i{width:8px;height:8px;border-radius:50%;background:var(--bad);animation:blink 1.2s steps(1) infinite}
.fx-rec.off{color:var(--ink-3)}.fx-rec.off i{background:var(--line);animation:none}
.fx-who{display:flex;align-items:center;gap:10px;padding:8px;border-radius:14px;background:var(--paper-2)}
.fx-who b{display:block;font-size:.86rem}
.fx-who small{color:var(--ink-3);font-size:.72rem}
.fx-who > span{margin-left:auto}
.fx-tr{display:grid;gap:6px;min-height:20px}
.fx-tr-l{display:grid;gap:2px;padding:7px 9px;border-radius:12px;background:var(--paper-2);animation:drop .35s var(--ease)}
.fx-tr-l small{font:500 .64rem/1 var(--f-mono);color:var(--ink-3)}
.fx-tr-l.me{background:var(--mint-3);margin-left:16px}
.fx-tr-l span.typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;background:currentColor;vertical-align:-2px;animation:blink 1s steps(1) infinite}
.fx-gen{display:none;gap:6px;padding:8px 10px;border-radius:12px;background:var(--lav-3)}
.fx-gen span{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.76rem}
.fx-gen i{display:block;height:5px;border-radius:9px;background:color-mix(in srgb,var(--lav-2) 35%,transparent);overflow:hidden}
.fx-gen b{display:block;height:100%;width:40%;border-radius:inherit;background:var(--lav-2);animation:fx-load 1.1s ease-in-out infinite}
@keyframes fx-load{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.fx-app.gen .fx-gen{display:grid}
.fx-sum{display:none;gap:4px;padding:10px;border-radius:14px;border:1px solid var(--line-2);background:var(--paper)}
.fx-app.sum .fx-sum{display:grid}
.fx-sum-k{font:500 .62rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:4px}
.fx-sum ul{display:grid;gap:3px}
.fx-sum li{font-size:.8rem;opacity:0;transform:translateY(4px);transition:opacity .35s,transform .35s var(--ease)}
.fx-sum li.in{opacity:1;transform:none}
.fx-sum ul:not(.fx-todo) li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:var(--forest-3);vertical-align:1px}
.fx-todo li{display:flex;align-items:center;gap:6px}
.fx-todo .ic{width:16px;height:16px;padding:2px;border-radius:5px;border:1.5px solid var(--line);color:transparent;transition:background-color .3s,color .3s,border-color .3s}
.fx-todo li.done .ic{background:var(--forest-3);border-color:var(--forest-3);color:#fff}
.fx-saved{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;background:var(--good-bg);color:var(--good);font-weight:600;font-size:.76rem;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)}
.fx-saved b{color:var(--ink)}
.fx-app.saved .fx-saved{opacity:1;transform:none}
.fx-app.sum .fx-tr-l:not(:last-child){display:none}
.fx-app.saved{box-shadow:0 30px 60px -24px rgba(8,30,21,.5),0 0 0 3px color-mix(in srgb,var(--mint-2) 70%,transparent)}


/* ===== features: pinned while you scroll, each step opens one feature ===== */
.fx-feat{padding:0}
.fx-feat-pin{display:grid;gap:clamp(18px,3vh,30px);padding:var(--pad-board)}
.fx-feat-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:12px clamp(28px,4vw,64px);align-items:end}
.fx-feat-head .sub{max-width:52ch}
.fx-feat-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.fx-fl{display:flex;flex-direction:column;border-top:1px solid var(--line);min-height:0}
.fx-fi{position:relative;border-bottom:1px solid var(--line);transition:opacity .4s}
.fx-fi-btn{display:grid;grid-template-columns:44px 1fr 40px;align-items:center;gap:10px;width:100%;padding:16px 0;border:0;background:none;text-align:left;cursor:pointer;color:var(--ink)}
.fx-fi-n{font:500 .78rem/1 var(--f-mono);color:var(--ink-3);transition:color .3s}
.fx-fi-t{font:600 clamp(1.05rem,.98rem + .3vw,1.25rem)/1.2 var(--f-display);letter-spacing:-.012em;transition:transform .45s var(--ease),color .3s}
.fx-fi-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--paper-2);color:var(--ink-3);transition:background-color .35s,color .35s,transform .45s var(--ease)}
.fx-fi.on .fx-fi-n{color:var(--forest-3)}
.fx-fi.on .fx-fi-t{transform:translateX(4px)}
.fx-fi.on .fx-fi-ic{background:var(--mint);color:var(--on-mint);transform:rotate(-6deg)}
.fx-fi-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.fx-fi-body > div{overflow:hidden;min-height:0}
.fx-fi-body p{padding:0 50px 18px 54px;color:var(--ink-2);font-size:.93rem;line-height:1.6;opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .6s var(--ease)}
.fx-fi.on .fx-fi-body{grid-template-rows:1fr}
.fx-fi.on .fx-fi-body p{opacity:1;transform:none;transition-delay:.12s}
.fx-fi-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.fx-fi-bar i{display:block;height:100%;width:var(--fp,0%);background:var(--forest-3)}
.fx-view{position:relative;min-height:0}
.fx-view-in{position:relative;height:100%;min-height:420px;border-radius:28px;overflow:hidden;background:var(--paper-3)}
.fx-vi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 1.4s var(--ease)}
.fx-vi.on{opacity:1;transform:none}
.fx-view-shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,22,15,.55),transparent 55%);pointer-events:none}
.fx-ov{position:absolute;left:18px;right:18px;bottom:18px;display:grid;gap:10px;padding:16px;border-radius:20px;background:color-mix(in srgb,var(--paper) 92%,transparent);border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);color:var(--ink);opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .6s var(--ease);pointer-events:none}
.fx-ov.on{opacity:1;transform:none;transition-delay:.15s}
.fx-ov-k{display:flex;align-items:center;gap:8px;font:500 .7rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.fx-ov-k .ic{width:24px;height:24px;padding:5px;border-radius:8px;background:var(--mint);color:var(--on-mint)}
.fx-ov-big{font:600 1.3rem/1.2 var(--f-display)}
.fx-ov-s{font-size:.86rem;color:var(--ink-2)}
.fx-ov-lines{display:grid;gap:6px}
.fx-ov-lines i{display:block;height:6px;border-radius:9px;background:var(--paper-3)}
.fx-ov-chips{display:flex;flex-wrap:wrap;gap:6px}
.fx-ov-chips span{padding:7px 11px;border-radius:999px;background:var(--mint-3);font-size:.8rem;font-weight:600}
.fx-ov-chips span.lav{background:var(--lav-3)}
.fx-ov.on .fx-ov-chips span{animation:fx-pop .5s var(--ease) both}
.fx-ov.on .fx-ov-chips span:nth-child(2){animation-delay:.15s}.fx-ov.on .fx-ov-chips span:nth-child(3){animation-delay:.3s}
@keyframes fx-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.fx-ov-notes{display:grid;gap:6px}
.fx-ov-notes li{padding:8px 10px;border-radius:10px;background:var(--paper-2);font-size:.86rem}
.fx-ov.on .fx-ov-notes li{animation:drop .5s var(--ease) both}
.fx-ov.on .fx-ov-notes li:nth-child(2){animation-delay:.18s}.fx-ov.on .fx-ov-notes li:nth-child(3){animation-delay:.36s}
.fx-ov-todo{display:grid;gap:6px}
.fx-ov-todo li{display:flex;align-items:center;gap:8px;font-size:.88rem}
.fx-ov-todo .ic{width:18px;height:18px;padding:3px;border-radius:6px;background:var(--forest-3);color:#fff}
.fx-ov-todo em{margin-left:auto;font:500 .72rem/1 var(--f-mono);font-style:normal;color:var(--ink-3)}
.fx-ov-tl{display:grid;gap:8px;padding-left:12px;border-left:2px solid var(--line)}
.fx-ov-tl li{position:relative;display:grid}
.fx-ov-tl li::before{content:"";position:absolute;left:-18px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--line)}
.fx-ov-tl li:first-child::before{background:var(--mint-2);border-color:var(--forest-3)}
.fx-ov-tl b{font-size:.88rem}
.fx-ov-tl small{font-size:.74rem;color:var(--ink-3)}
.fx-ov-search{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-radius:12px;border:1.5px solid var(--forest-3);font-weight:600}
.fx-ov-search kbd{font:500 .7rem/1 var(--f-mono);color:var(--ink-3)}
.fx-ov-res{font-size:.88rem;color:var(--ink-2)}
.fx-ov-res mark{background:var(--mint-2);color:#062116;border-radius:4px;padding:0 3px}
.fx-view-n{position:absolute;right:18px;top:18px;padding:7px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(8px);font:500 .74rem/1 var(--f-mono);color:var(--ink)}

.fx-scroll-hint{display:none}
@media (min-width:1001px) and (min-height:640px){
  .fx-feat{height:calc(100vh + var(--n) * 46vh)}
  .fx-feat-pin{position:sticky;top:0;height:100vh;box-sizing:border-box;padding-top:clamp(88px,11vh,112px);padding-bottom:clamp(18px,3vh,30px);grid-template-rows:auto minmax(0,1fr) auto}
  .fx-feat-row{min-height:0}
  .fx-fl{height:100%}
  .fx-fi-btn{padding:clamp(9px,1.6vh,16px) 0}
  .fx-view-in{min-height:0}
  .fx-scroll-hint{display:flex;align-items:center;justify-content:center;gap:10px;font:500 .68rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);transition:opacity .4s}
  .fx-feat.end .fx-scroll-hint{opacity:0}
  .fx-mouse{position:relative;width:18px;height:28px;border:1.5px solid currentColor;border-radius:10px}
  .fx-mouse i{position:absolute;left:50%;top:5px;width:3px;height:6px;margin-left:-1.5px;border-radius:3px;background:currentColor;animation:fx-wheel 1.6s ease-in-out infinite}
}
@keyframes fx-wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{transform:translateY(0);opacity:0}}

/* ===== workflow: notes leave the transcript and file themselves into the summary ===== */
.fx-flow .sec-head{max-width:760px}
.fx-sort{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,400px);gap:22px;align-items:stretch;padding:22px;border-radius:24px;background:var(--forest-2);background-image:radial-gradient(color-mix(in srgb,var(--on-forest) 9%,transparent) 1px,transparent 1px);background-size:18px 18px;overflow:hidden}
.fx-trn{display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:18px;border-radius:20px;background:color-mix(in srgb,var(--on-forest) 5%,transparent);border:1px solid color-mix(in srgb,var(--on-forest) 12%,transparent);color:var(--on-forest)}
.fx-trn-top{display:flex;align-items:center;gap:10px}
.fx-trn-top b{display:block;font-size:.92rem}
.fx-trn-top small{font-size:.74rem;color:var(--on-forest-2)}
.fx-trn-k{margin-left:auto;font:500 .64rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-forest-2);white-space:nowrap}
.fx-trn-l{display:grid;align-content:start;gap:10px;transition:opacity .6s ease,filter .6s ease}
.fx-sort:not(.sorted) .fx-trn-l{opacity:.32;filter:blur(1.5px)}
.fx-tl{display:grid;gap:4px;max-width:90%;justify-self:start;padding:10px 13px;border-radius:16px 16px 16px 5px;background:color-mix(in srgb,var(--on-forest) 8%,transparent);font-size:.92rem;line-height:1.55}
.fx-tl.me{justify-self:end;border-radius:16px 16px 5px 16px;background:color-mix(in srgb,var(--mint-2) 15%,transparent)}
.fx-tl b{font:500 .6rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-forest-2)}
.fx-mk{background:transparent;color:inherit;border-radius:5px;padding:1px 4px;margin:0 -2px;box-decoration-break:clone;-webkit-box-decoration-break:clone;transition:background-color .5s ease,color .5s ease}
.fx-sort.sorted .fx-mk{transition-delay:calc(var(--i) * 70ms + .5s)}
.fx-sort.sorted .fx-mk--k{background:var(--mint-2);color:#062116}
.fx-sort.sorted .fx-mk--d{background:var(--lav-2);color:#1C1236}
.fx-sort.sorted .fx-mk--f{background:#FFE7A3;color:#4A3A0B}
.fx-trn-foot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--on-forest) 6%,transparent);font-size:.84rem;color:var(--on-forest-2);transition:background-color .5s,color .5s}
.fx-trn-foot .ic{color:var(--mint-2)}
.fx-trn-foot b{color:var(--on-forest);font-variant-numeric:tabular-nums}
.fx-sort.sorted .fx-trn-foot{background:color-mix(in srgb,var(--mint-2) 16%,transparent)}
.fx-card{display:grid;align-content:start;gap:6px;padding:14px 16px;border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.fx-card-top{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.fx-card-top svg{width:22px;height:22px}
.fx-card-top b{font-weight:600}
.fx-card-top .st{margin-left:auto}
.fx-sg{display:grid;gap:4px}
.fx-sg p{display:flex;align-items:center;gap:6px;font:500 .64rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.fx-sg p .ic{font-size:12px;color:var(--forest-3)}
.fx-slot{display:block;height:30px;border-radius:9px;border:1.5px dashed var(--line);transition:border-color .4s}
.fx-sort.sorted .fx-slot{border-color:transparent}
.fx-note{position:absolute;z-index:2;left:var(--sx);top:var(--sy);display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:9px;font-size:.8rem;font-weight:600;white-space:nowrap;box-shadow:0 12px 26px -12px rgba(0,0,0,.65);transform:rotate(var(--sr));transition:left .95s var(--ease),top .95s var(--ease),transform .95s var(--ease),box-shadow .6s;transition-delay:calc(var(--i) * 70ms)}
.fx-note--k{background:var(--mint);color:var(--on-mint)}
.fx-note--d{background:var(--lav);color:var(--on-lav)}
.fx-note--f{background:#FFF1C9;color:#4A3A0B}
.fx-sort.sorted .fx-note{transform:none;box-shadow:none}
.fx-steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:clamp(28px,3vw,44px)}
.fx-steps-line{position:absolute;left:10%;right:10%;top:27px;height:2px;background:color-mix(in srgb,var(--on-forest) 16%,transparent)}
.fx-steps-line i{display:block;height:100%;width:var(--p,0%);background:var(--mint-2);transition:width .25s linear}
.fx-step{position:relative;display:grid;justify-items:center;align-content:start;text-align:center;gap:10px}
.fx-step-ic{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:18px;background:var(--forest);border:1.5px solid color-mix(in srgb,var(--on-forest) 20%,transparent);color:var(--on-forest-2);font-size:20px;transition:background-color .4s,color .4s,border-color .4s,transform .4s var(--ease)}
.fx-step-ic em{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--paper);color:var(--ink);font:600 .64rem/1 var(--f-mono);font-style:normal}
.fx-step.on .fx-step-ic{background:var(--mint-2);border-color:var(--mint-2);color:#062116;transform:translateY(-3px)}
.fx-step h3{font:600 1.02rem/1.25 var(--f-display);color:var(--on-forest)}
.fx-step p{font-size:.88rem;color:var(--on-forest-2);line-height:1.5}

/* ===== teams: four aligned cards ===== */
.fx-teams{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
.fx-team{display:grid;align-content:start;gap:8px}
.fx-team-img{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:3/3.7;background:var(--paper-3)}
.fx-team-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;transition:transform .9s var(--ease)}
.fx-team:hover .fx-team-img img{transform:scale(1.05)}
.fx-team-note{position:absolute;left:12px;right:12px;bottom:12px;display:grid;gap:5px;padding:12px;border-radius:16px;background:color-mix(in srgb,var(--paper) 92%,transparent);border:1px solid var(--glass-line);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);color:var(--ink);opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .7s var(--ease);transition-delay:calc(var(--i) * 110ms)}
.fx-teams.in .fx-team-note{opacity:1;transform:none}
.fx-team-note p{display:flex;align-items:center;gap:6px;font:500 .62rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.fx-team-note p span{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--mint);color:var(--on-mint);font-size:11px}
.fx-team:nth-child(2n) .fx-team-note p span{background:var(--lav);color:var(--on-lav)}
.fx-team-note b{font:600 .92rem/1.3 var(--f-display);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.fx-team-note small{display:flex;align-items:center;gap:5px;font-size:.7rem;color:var(--good);font-weight:600}
.fx-team-note small svg{width:14px;height:14px}
.fx-team .h4{margin-top:8px}
.fx-team > p{color:var(--ink-2);font-size:.92rem;line-height:1.55}

/* ===== benefits with a before / after slider ===== */
.fx-ben{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:stretch}
.fx-cmp{position:relative;height:100%;min-height:440px;border-radius:26px;overflow:hidden;background:var(--paper-3);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.fx-cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.fx-cmp-b{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.fx-cmp-h{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 24px rgba(255,255,255,.6);pointer-events:none}
.fx-cmp-h i{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:var(--btn);color:var(--btn-fg);box-shadow:var(--shadow);transition:transform .3s var(--ease)}
.fx-cmp-h i::before{content:"";position:absolute;inset:-7px;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:fx-halo 2.4s ease-out infinite}
@keyframes fx-halo{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.35);opacity:0}}
.fx-cmp.drag .fx-cmp-h i{transform:scale(1.12)}
.fx-cmp-l{position:absolute;top:16px;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:.78rem;font-weight:600;box-shadow:var(--shadow-s);pointer-events:none}
.fx-cmp-l--a{left:16px;background:var(--paper);color:var(--ink)}
.fx-cmp-l--b{right:16px;background:var(--btn);color:var(--btn-fg)}
.fx-cmp-l .ic{color:var(--mint-2)}
.fx-cmp-tip{position:absolute;left:var(--pos);bottom:18px;transform:translateX(-50%);padding:6px 12px;border-radius:999px;background:rgba(5,22,15,.72);color:#fff;font-size:.74rem;font-weight:600;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.fx-cmp.used .fx-cmp-tip{opacity:0}
.fx-cmp-in{position:absolute;left:0;bottom:0;width:1px;height:1px;opacity:0;pointer-events:none}
.fx-cmp:focus-within .fx-cmp-h i{outline:3px solid var(--mint-2);outline-offset:4px}
.fx-ben-copy{display:grid;gap:16px;align-content:center}
.fx-bl{display:grid;gap:10px;margin-top:8px}
.fx-bl li{display:grid;grid-template-columns:46px 1fr;gap:14px;align-items:start;padding:16px;border-radius:20px;background:var(--paper-2);transition:background-color .3s,transform .3s var(--ease)}
.fx-bl li:hover{background:var(--mint-3);transform:translateX(4px)}
.fx-bl li:nth-child(2) .icb{background:var(--lav);color:var(--on-lav)}
.fx-bl h3{font:600 1.1rem/1.25 var(--f-display)}
.fx-bl p{color:var(--ink-2);font-size:.92rem;margin-top:4px}

/* ===== FAQ as a chat (every page) ===== */
.fx-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,64px);align-items:start}
.fx-faq-side{position:sticky;top:110px;display:grid;gap:16px;justify-items:start}
.fx-faq-img{position:relative;margin:0;width:100%;border-radius:24px;overflow:hidden;aspect-ratio:4/3.2}
.fx-faq-img img{width:100%;height:100%;object-fit:cover}
.fx-faq-img figcaption{position:absolute;left:12px;bottom:12px;right:12px;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);font-size:.78rem;font-weight:600;color:var(--ink)}
.fx-chat{display:grid;gap:22px;padding:clamp(16px,2vw,26px);border-radius:28px;background:var(--paper-2)}
.fx-qa{display:grid;gap:10px}
.fx-q{justify-self:end;display:flex;align-items:flex-end;gap:8px;max-width:86%;will-change:transform,opacity}
.fx-q span{padding:12px 16px;border-radius:20px 20px 6px 20px;background:var(--btn);color:var(--btn-fg);font:600 1rem/1.35 var(--f-display)}
.fx-q .av{font-size:.56rem}
.fx-a{display:flex;align-items:flex-end;gap:8px;max-width:92%;will-change:transform,opacity}
.fx-a p{position:relative;padding:12px 16px;border-radius:20px 20px 20px 6px;background:var(--paper);color:var(--ink-2);box-shadow:var(--shadow-s);line-height:1.6;font-size:.96rem}
.fx-typing{position:absolute;left:16px;top:50%;display:inline-flex;gap:4px;margin-top:-4px;opacity:0;pointer-events:none}
.fx-typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3);animation:fx-dot 1s ease-in-out infinite}
.fx-typing i:nth-child(2){animation-delay:.15s}.fx-typing i:nth-child(3){animation-delay:.3s}
@keyframes fx-dot{0%,100%{transform:translateY(0);opacity:.4}50%{transform:translateY(-4px);opacity:1}}
/* scroll-linked: bubbles rise in as they enter and fold away as they leave, in both directions */
@keyframes fx-qin{0%{opacity:0;transform:translate3d(36px,30px,0) scale(.92)}18%,84%{opacity:1;transform:none}100%{opacity:0;transform:translate3d(0,-16px,0) scale(.97)}}
@keyframes fx-ain{0%,5%{opacity:0;transform:translate3d(-30px,30px,0) scale(.94)}24%,84%{opacity:1;transform:none}100%{opacity:0;transform:translate3d(0,-16px,0) scale(.97)}}
@keyframes fx-dots{0%,9%{opacity:0}14%,22%{opacity:1}28%,100%{opacity:0}}
@keyframes fx-atext{0%,20%{opacity:0;filter:blur(6px)}32%,100%{opacity:1;filter:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fx-q{animation:fx-qin linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .fx-a{animation:fx-ain linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .fx-a p{view-timeline:--fxa block}
    .fx-a .fx-typing{animation:fx-dots linear both;animation-timeline:--fxa;animation-range:entry 0% exit 100%}
    .fx-a .fx-a-t{animation:fx-atext linear both;animation-timeline:--fxa;animation-range:entry 0% exit 100%}
  }
}
/* fallback without scroll timelines: same feel with transitions */
.fx-chat.io .fx-q,.fx-chat.io .fx-a{opacity:0;transition:opacity .6s ease,transform .9s var(--ease)}
.fx-chat.io .fx-q{transform:translate3d(36px,28px,0) scale(.92)}
.fx-chat.io .fx-a{transform:translate3d(-30px,28px,0) scale(.94);transition-delay:.18s}
.fx-chat.io .fx-a-t{opacity:0;transition:opacity .5s ease .75s}
.fx-chat.io .in{opacity:1;transform:none}
.fx-chat.io .fx-a.in .fx-a-t{opacity:1}
.fx-chat.io .fx-a.in .fx-typing{animation:fx-dots-t 1.05s ease both}
@keyframes fx-dots-t{0%,15%{opacity:0}30%,70%{opacity:1}100%{opacity:0}}

/* CTA with photo */
.fx-cta{position:relative;display:grid;align-items:center;min-height:520px;border-radius:var(--r-board);overflow:hidden;background:var(--forest);color:var(--on-forest);isolation:isolate}
.fx-cta-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:65% 40%;z-index:-2}
.fx-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(9,40,29,.96) 0%,rgba(9,40,29,.86) 40%,rgba(9,40,29,.2) 75%,transparent)}
.fx-cta-copy{display:grid;gap:18px;max-width:600px;padding:var(--pad-board)}
.fx-cta-h{font:600 clamp(2.1rem,1.1rem + 3vw,3.9rem)/1.02 var(--f-display);letter-spacing:-.03em;color:#F2FBF5}
.fx-cta-copy p{color:rgba(226,246,234,.82);font-size:1.02rem;line-height:1.6}
.fx-cta .pill--ghost{border-color:rgba(226,246,234,.4);color:#F2FBF5}
.fx-cta .pill--dark{background:var(--mint-2);color:#062116}
.fx-fade{display:inline-block;background:linear-gradient(90deg,#F2FBF5 0%,#F2FBF5 40%,rgba(242,251,245,.12) 60%,rgba(242,251,245,.12) 100%);background-size:260% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-fade 6s ease-in-out infinite}
@keyframes fx-fade{0%,20%{background-position:0 0}50%,62%{background-position:100% 0}90%,100%{background-position:0 0}}
.fx-cta-chip{position:absolute;right:28px;bottom:28px;display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);color:var(--ink);font-size:.82rem;font-weight:600;box-shadow:var(--shadow);animation:fx-bob 6s ease-in-out infinite}
.fx-cta-chip .ic{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--forest-3);color:#fff}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .fx-stage,.fx-sort,.fx-steps,.fx-team,.fx-cmp,.fx-ben-copy,.fx-faq-side,.fx-cta-copy{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .fx-float,.fx-cta-chip,.fx-fade,.fx-typing i,.fx-gen b,.fx-rec i,.fx-mouse i,.fx-cmp-h i::before{animation:none!important}
  .fx-fade{color:#F2FBF5;background:none}
  .fx-note,.fx-vi,.fx-ov,.fx-team-note,.fx-fi-body,.fx-fi-body p,.fx-sum li,.fx-saved,.fx-mk,.fx-trn-l{transition:none!important}
}

/* responsive */
@media (max-width:1180px){
  .fx-teams{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px),(max-height:639px){
  .fx-feat{height:auto}
  .fx-feat-head{grid-template-columns:1fr}
  .fx-feat-row{grid-template-columns:1fr;gap:18px}
  .fx-view{order:-1;position:sticky;top:76px;z-index:3}
  .fx-view-in{height:min(44vh,360px);min-height:0}
  .fx-fi .fx-fi-body{grid-template-rows:1fr}
  .fx-fi .fx-fi-body p{opacity:1;transform:none}
  .fx-fi:not(.on){opacity:.5}
  .fx-fi-bar{display:none}
}
@media (max-width:1000px){
  .fx-ben,.fx-faq{grid-template-columns:1fr}
  .fx-faq-side{position:static}
  .fx-cmp{height:auto;min-height:0;aspect-ratio:4/3.2}
  .fx-stage{aspect-ratio:auto;display:grid}
  .fx-stage-img{aspect-ratio:4/3;height:auto;object-position:35% 20%}
  .fx-stage::after{display:none}
  .fx-app{position:relative;right:auto;top:auto;transform:none;width:auto;max-height:none;min-height:440px;align-content:start;margin:-28px 14px 14px;background:var(--paper)}
  .fx-steps{grid-template-columns:1fr;gap:12px}
  .fx-steps-line{left:27px;right:auto;top:28px;bottom:28px;width:2px;height:auto}
  .fx-steps-line i{width:100%;height:var(--p,0%)}
  .fx-step{grid-template-columns:56px 1fr;justify-items:start;text-align:left;column-gap:16px;row-gap:4px}
  .fx-step-ic{grid-row:span 2}
  .fx-sort{grid-template-columns:1fr}
  .fx-note{left:var(--mx);top:var(--my)}
}
@media (max-width:760px){
  .fx-hero-board{padding-top:104px}
  .fx-float--b{display:none}
  .fx-wave{display:none}
  .fx-teams{grid-template-columns:1fr}
  .fx-team-img{aspect-ratio:4/4.2}
  .fx-fi-body p{padding:0 0 16px 54px}
  .fx-cta{min-height:0}
  .fx-cta::before{background:linear-gradient(0deg,rgba(9,40,29,.97) 45%,rgba(9,40,29,.5))}
  .fx-cta-chip{display:none}
  .fx-sort{padding:14px;gap:14px}
  .fx-note{font-size:.74rem;padding:0 10px;height:28px}
  .fx-tl{font-size:.86rem;max-width:96%}
  .fx-q,.fx-a{max-width:100%}
}
@media (max-width:760px){
  .fx-ov{left:10px;right:10px;bottom:10px;padding:12px;gap:7px;font-size:.92em}
  .fx-ov-big{font-size:1.1rem}
  .fx-ov-tl li:nth-child(3),.fx-ov-notes li:nth-child(3){display:none}
  .fx-view-n{top:10px;right:10px}
}

/* =====================================================================
   Feature page: Call Transfer Software (xf-), reuses the fx- layout
   ===================================================================== */
.fx-h1--long{font-size:clamp(2.2rem,1rem + 3vw,4.1rem);line-height:1.03;max-width:23ch;margin-inline:auto}
/* hero window: pick -> brief -> connected */
.xf-pick,.xf-brief,.xf-path{display:none;gap:7px;padding:10px;border-radius:14px;border:1px solid var(--line-2);background:var(--paper);animation:drop .4s var(--ease)}
.xf-app.s-pick .xf-pick,.xf-app.s-brief .xf-brief,.xf-app.s-done .xf-path{display:grid}
.xf-pick .fx-sum-k,.xf-brief .fx-sum-k{margin-top:0}
.xf-app.s-done .fx-tr-l:not(:last-child){display:none}
.xf-ags{display:grid;gap:5px}
.xf-ag{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:6px 8px;border-radius:11px;background:var(--paper-2);transition:background-color .3s,box-shadow .3s}
.xf-ag b,.xf-to b{display:block;font-size:.8rem;line-height:1.2}
.xf-ag small,.xf-to small{font-size:.7rem;color:var(--ink-3)}
.xf-ag em{font-style:normal;font-size:.68rem;font-weight:600;color:var(--good);display:inline-flex;align-items:center;gap:5px}
.xf-ag em::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.xf-ag em.busy{color:var(--ink-3)}
.xf-ag.sel{background:var(--mint-3);box-shadow:inset 0 0 0 1.5px var(--forest-3)}
.xf-mode{display:flex;gap:6px}
.xf-mode span{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;border-radius:999px;border:1px solid var(--line);font-size:.72rem;font-weight:600;color:var(--ink-2);transition:background-color .3s,color .3s,border-color .3s}
.xf-mode span.on{background:var(--btn);color:var(--btn-fg);border-color:transparent}
.xf-to{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px}
.xf-hold{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:var(--lav-3);font-style:normal;font-size:.68rem;font-weight:600;color:var(--ink-2)}
.xf-hold i{width:7px;height:7px;border-radius:50%;background:var(--lav-2);animation:blink 1.2s steps(1) infinite}
.xf-note{min-height:3.1em;padding:8px 10px;border-radius:10px;background:var(--paper-2);font-size:.78rem;line-height:1.45}
.xf-note.typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;background:currentColor;vertical-align:-2px;animation:blink 1s steps(1) infinite}
.xf-nodes{display:grid;grid-template-columns:auto 1fr auto 1fr auto;align-items:center;gap:6px;padding:4px 2px}
.xf-node{display:grid;justify-items:center;gap:4px;font-size:.66rem;font-weight:600;color:var(--ink-2);transition:opacity .5s}
.xf-node .av{font-size:.6rem}
.xf-ln{position:relative;height:2px;margin-bottom:16px;border-radius:2px;background:var(--line);overflow:hidden}
.xf-ln i{position:absolute;inset:0;background:var(--forest-3);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.xf-app.s-done .xf-ln i{transform:none}
.xf-app.s-done .xf-ln--2 i{transition-delay:.55s}
.xf-app.left .xf-node--you{opacity:.35}
.xf-done{display:flex;align-items:center;gap:7px;font-size:.76rem;font-weight:600;color:var(--good);opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s var(--ease)}
.xf-done .ic{width:16px;height:16px;padding:2px;border-radius:50%;background:var(--good);color:#fff}
.xf-app.left .xf-done{opacity:1;transform:none}
/* feature viewer overlays */
.xf-ags--ov .xf-ag{background:var(--paper-2)}
.fx-ov.on .xf-ags--ov .xf-ag{animation:drop .5s var(--ease) both}
.fx-ov.on .xf-ags--ov .xf-ag:nth-child(2){animation-delay:.15s}.fx-ov.on .xf-ags--ov .xf-ag:nth-child(3){animation-delay:.3s}
.xf-avs{display:flex}
.xf-avs .av{width:46px;height:46px;font-size:.78rem;border:3px solid var(--paper)}
.xf-avs .av + .av{margin-left:-12px}
.fx-ov.on .xf-avs .av{animation:fx-pop .5s var(--ease) both}
.fx-ov.on .xf-avs .av:nth-child(2){animation-delay:.15s}.fx-ov.on .xf-avs .av:nth-child(3){animation-delay:.3s}
/* CTA word */
.xf-hl{position:relative;display:inline-block;color:var(--mint-2)}
.xf-hl::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;border-radius:9px;background:var(--mint-2);transform-origin:left;animation:xf-line 5s var(--ease) infinite}
@keyframes xf-line{0%{transform:scaleX(0)}25%,80%{transform:scaleX(1)}100%{transform:scaleX(0);transform-origin:right}}
@media (prefers-reduced-motion:reduce){
  .xf-hl::after,.xf-hold i,.xf-note.typing::after{animation:none!important}
  .xf-pick,.xf-brief,.xf-path,.xf-ln i,.xf-done,.xf-node{animation:none!important;transition:none!important}
}
@media (max-width:760px){
  .fx-h1--long{max-width:none}
  .xf-ags--ov .xf-ag:nth-child(3){display:none}
}

/* =====================================================================
   Feature page: Call Management Software (mc-), reuses the fx- layout
   ===================================================================== */
.mc-ban{display:none;align-items:center;gap:8px;padding:9px 10px;border-radius:12px;font-size:.76rem;font-weight:600;animation:drop .35s var(--ease)}
.mc-ban b{margin-left:auto;font:500 .72rem/1 var(--f-mono)}
.mc-ban .ic{width:16px;height:16px;flex:none}
.mc-ban--hold{background:var(--lav-3);color:var(--ink)}
.mc-ban--mute{background:color-mix(in srgb,var(--bad) 12%,var(--paper));color:var(--bad)}
.mc-app.mc-hold-on .mc-ban--hold,.mc-app.mc-mute-on .mc-ban--mute{display:flex}
.mc-eq{display:inline-flex;align-items:flex-end;gap:2px;height:12px;flex:none}
.mc-eq i{width:3px;height:12px;border-radius:2px;background:var(--lav-2);transform-origin:bottom;animation:mc-eq 1s ease-in-out infinite}
.mc-eq i:nth-child(2){animation-delay:.2s}.mc-eq i:nth-child(3){animation-delay:.4s}
@keyframes mc-eq{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.mc-rec{display:none;gap:6px;padding:10px;border-radius:14px;border:1px solid var(--line-2);background:var(--paper);animation:drop .4s var(--ease)}
.mc-app.mc-rec-on .mc-rec{display:grid}
.mc-app.mc-rec-on .fx-tr-l:not(:last-child){display:none}
.mc-rec .fx-sum-k{margin-top:0;display:flex;align-items:center;gap:6px}
.mc-rec .fx-sum-k .ic{width:14px;height:14px;color:var(--forest-3)}
.mc-rec ul{display:grid;gap:4px}
.mc-rec li{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:9px;background:var(--paper-2);font-size:.76rem;transition:background-color .4s,box-shadow .4s}
.mc-rec li span{color:var(--ink-3)}
.mc-app.mc-found .mc-hl{background:#FFF1C9;color:#4A3A0B;box-shadow:inset 0 0 0 1.5px #E5C35A}
.mc-app.mc-found .mc-hl span{color:#6B5A1E}
.mc-ctrls{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.mc-c{display:grid;justify-items:center;gap:4px;font-size:.62rem;font-weight:600;color:var(--ink-2)}
.mc-c i{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line-2);color:var(--ink);transition:background-color .3s,color .3s,border-color .3s,transform .2s var(--ease)}
.mc-c .ic{width:16px;height:16px}
.mc-c.on i{background:var(--btn);color:var(--btn-fg);border-color:transparent}
.mc-c--end i{background:color-mix(in srgb,var(--bad) 14%,var(--paper));color:var(--bad);border-color:transparent}
.mc-c.press i{transform:scale(.86)}
.mc-ctrls--ov{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mc-ctrls--ov .mc-c{font-size:.74rem}
.mc-ctrls--ov .mc-c i{width:44px;height:44px;border-radius:14px}
.mc-ctrls--ov .mc-c--hold i{background:var(--mint);color:var(--on-mint);border-color:transparent}
.fx-ov.on .mc-ctrls--ov .mc-c{animation:fx-pop .45s var(--ease) both}
.fx-ov.on .mc-ctrls--ov .mc-c:nth-child(2){animation-delay:.06s}.fx-ov.on .mc-ctrls--ov .mc-c:nth-child(3){animation-delay:.12s}
.fx-ov.on .mc-ctrls--ov .mc-c:nth-child(4){animation-delay:.18s}.fx-ov.on .mc-ctrls--ov .mc-c:nth-child(5){animation-delay:.24s}.fx-ov.on .mc-ctrls--ov .mc-c:nth-child(6){animation-delay:.3s}
@media (prefers-reduced-motion:reduce){
  .mc-eq i,.mc-ban,.mc-rec{animation:none!important}
  .mc-rec li,.mc-c i{transition:none!important}
}
@media (max-width:760px){
  .mc-ctrls--ov .mc-c i{width:38px;height:38px}
  .mc-ctrls--ov{gap:6px}
}

/* =====================================================================
   Product page: Sales Calling Platform (sp-)
   ===================================================================== */
/* hero window: five module tabs */
.sp-app{gap:10px}
.sp-team{margin-left:auto;font:500 .7rem/1 var(--f-mono);color:var(--ink-3)}
.sp-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:4px;border-radius:14px;background:var(--paper-2)}
.sp-tab{display:grid;justify-items:center;gap:3px;padding:7px 2px;border-radius:10px;font-size:.66rem;font-weight:600;color:var(--ink-3);transition:background-color .3s,color .3s,box-shadow .3s}
.sp-tab .ic{width:15px;height:15px}
.sp-tab.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-s)}
.sp-panes{display:grid;min-height:176px}
.sp-pane{grid-area:1/1;display:grid;align-content:start;gap:7px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease),visibility 0s .4s}
.sp-pane.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s,transform .5s var(--ease),visibility 0s}
.sp-pane .fx-sum-k{margin-top:0;display:flex;align-items:center;gap:6px}
.sp-pane .fx-sum-k .ic{width:14px;height:14px;color:var(--forest-3)}
.sp-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:var(--paper-2);font-size:.76rem}
.sp-row span{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.sp-row .ic{width:14px;height:14px;color:var(--forest-3)}
.sp-row--ok{background:var(--good-bg)}
.sp-row--ok span{color:var(--good);font-weight:600}
.sp-row--ok .ic{color:var(--good)}
.sp-chips{display:flex;flex-wrap:wrap;gap:5px}
.sp-chips span{padding:6px 10px;border-radius:999px;border:1px solid var(--line);font-size:.7rem;font-weight:600;color:var(--ink-2)}
.sp-chips span.on{background:var(--btn);color:var(--btn-fg);border-color:transparent}
.sp-tg{position:relative;flex:none;width:30px;height:18px;border-radius:999px;background:var(--line);transition:background-color .35s}
.sp-tg::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.sp-tg.on{background:var(--forest-3)}
.sp-tg.on::after{transform:translateX(12px)}
.sp-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.sp-kpis p{display:grid;gap:2px;padding:8px;border-radius:10px;background:var(--paper-2)}
.sp-kpis b{font:600 1.05rem/1 var(--f-display)}
.sp-kpis small{font-size:.66rem;color:var(--ink-3)}
.sp-bars{display:flex;align-items:flex-end;gap:6px;height:74px;padding:8px 10px;border-radius:10px;background:var(--paper-2)}
.sp-bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--mint-2);transform-origin:bottom;transform:scaleY(.15);transition:transform .6s var(--ease)}
.sp-bars i:nth-child(2n){background:var(--lav-2)}
.sp-pane.on .sp-bars i{transform:none}
.sp-pane.on .sp-bars i:nth-child(2){transition-delay:.05s}.sp-pane.on .sp-bars i:nth-child(3){transition-delay:.1s}.sp-pane.on .sp-bars i:nth-child(4){transition-delay:.15s}
.sp-pane.on .sp-bars i:nth-child(5){transition-delay:.2s}.sp-pane.on .sp-bars i:nth-child(6){transition-delay:.25s}.sp-pane.on .sp-bars i:nth-child(7){transition-delay:.3s}
.sp-sum{display:grid;gap:4px}
.sp-sum li{font-size:.78rem;padding-left:13px;position:relative}
.sp-sum li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--forest-3)}
.sp-foot{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--ink-3)}

/* platform overview hub */
.sp-hub{display:grid;justify-items:center;margin-top:clamp(28px,3vw,44px)}
.sp-core{position:relative;z-index:1;display:grid;gap:6px;width:min(420px,100%);padding:14px;border-radius:22px;background:var(--paper);border:1px solid var(--line-2);box-shadow:0 30px 60px -36px rgba(8,30,21,.45)}
.sp-core-top{display:flex;align-items:center;gap:8px;padding-bottom:8px;border-bottom:1px solid var(--line-2)}
.sp-core-top svg{width:22px;height:22px}
.sp-core-top .st{margin-left:auto}
.sp-core-who{display:flex;align-items:center;gap:10px;padding:6px 2px}
.sp-core-who b{display:block;font-size:.9rem}
.sp-core-who small{font-size:.74rem;color:var(--ink-3)}
.sp-crow{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;background:var(--paper-2);font-size:.8rem;transition:background-color .35s,box-shadow .35s,transform .35s var(--ease)}
.sp-crow span{color:var(--ink-3)}
.sp-crow.on{background:var(--mint-3);box-shadow:inset 0 0 0 1.5px var(--forest-3);transform:translateX(4px)}
.sp-lines{display:block;width:100%;height:clamp(70px,8vw,120px);overflow:visible}
.sp-lines path{fill:none;stroke:var(--line);stroke-width:2;transition:stroke .35s}
.sp-lines path.on{stroke:var(--forest-3);stroke-dasharray:6 7;animation:sp-flow .9s linear infinite}
@keyframes sp-flow{to{stroke-dashoffset:-13}}
.sp-mods{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;width:100%}
.sp-mod{position:relative;display:grid;align-content:start;gap:8px;padding:16px;border-radius:22px;background:var(--paper-2);border:1px solid transparent;cursor:pointer;outline:none;transition:background-color .35s,border-color .35s,transform .45s var(--ease),box-shadow .35s}
.sp-mod img{width:92px;height:92px;object-fit:contain;margin:-6px 0 2px -6px;transition:transform .5s var(--ease)}
.sp-mod-n{position:absolute;right:16px;top:16px;font:500 .74rem/1 var(--f-mono);color:var(--ink-3)}
.sp-mod h3{font:600 1.08rem/1.2 var(--f-display);letter-spacing:-.01em}
.sp-mod p{font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.sp-mod.on{background:var(--paper);border-color:var(--forest-3);transform:translateY(-6px);box-shadow:0 26px 50px -30px rgba(8,30,21,.45)}
.sp-mod.on img{transform:translateY(-4px) rotate(-4deg) scale(1.05)}
.sp-mod.on .sp-mod-n{color:var(--forest-3)}
.sp-mod:focus-visible{outline:3px solid var(--forest-3);outline-offset:3px}

/* getting started */
.sp-start{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,80px);align-items:start}
.sp-start-copy{position:sticky;top:120px;display:grid;gap:16px;justify-items:start}
.sp-moves{position:relative;display:grid;gap:14px}
.sp-moves-line{position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:var(--line)}
.sp-moves-line i{display:block;width:100%;height:var(--p,0%);background:var(--forest-3);transition:height .25s linear}
.sp-move{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start}
.sp-move-n{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--paper);border:1.5px solid var(--line);font:600 1.05rem/1 var(--f-display);color:var(--ink-3);transition:background-color .4s,color .4s,border-color .4s}
.sp-move.in .sp-move-n{background:var(--mint);border-color:var(--mint);color:var(--on-mint)}
.sp-move-b{display:grid;gap:8px;padding:18px 20px;border-radius:22px;background:var(--paper-2);opacity:.45;transform:translateX(14px);transition:opacity .5s,transform .6s var(--ease)}
.sp-move.in .sp-move-b{opacity:1;transform:none}
.sp-move-b h3{display:flex;align-items:center;gap:8px;font:600 1.15rem/1.25 var(--f-display)}
.sp-move-b h3 .ic{color:var(--forest-3)}
.sp-move-b p{color:var(--ink-2);font-size:.94rem}
.sp-vis{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:4px;padding:10px;border-radius:14px;background:var(--paper);border:1px solid var(--line-2)}
.sp-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--mint-3);font-size:.78rem;font-weight:600}
.sp-pill .ic{width:14px;height:14px;color:var(--forest-3)}
.sp-mini{font-size:.76rem;color:var(--ink-3)}
.sp-arrow{width:26px;height:2px;border-radius:2px;background:var(--forest-3);position:relative}
.sp-arrow::after{content:"";position:absolute;right:-1px;top:-3px;width:7px;height:7px;border-top:2px solid var(--forest-3);border-right:2px solid var(--forest-3);transform:rotate(45deg)}
.sp-avs{display:flex}
.sp-avs .av{border:2px solid var(--paper)}
.sp-avs .av + .av{margin-left:-8px}
.sp-call{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:.78rem;font-weight:600}
.sp-call .ic{width:14px;height:14px}
.sp-logged{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--good-bg);color:var(--good);font-size:.78rem;font-weight:600}
.sp-logged .ic{width:14px;height:14px}

/* who it serves */
.sp-serve{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,4vw,64px);align-items:center}
.sp-serve-copy{display:grid;gap:16px}
.sp-obj{position:relative;margin:0;justify-self:center}
.sp-obj img{position:relative;z-index:1;width:100%;height:auto;animation:sp-float 7s ease-in-out infinite}
.sp-obj--teams{width:min(360px,80%);margin-top:8px}
.sp-glow{position:absolute;inset:18% 12% 8%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--lav-2) 45%,transparent),transparent);filter:blur(10px)}
@keyframes sp-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-2deg)}}
.sp-tcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sp-tc{display:grid;align-content:start;gap:10px;padding:20px;border-radius:24px;background:var(--paper);border:1px solid var(--line-2);box-shadow:0 18px 40px -30px rgba(8,30,21,.4);transition:transform .45s var(--ease),border-color .35s,box-shadow .35s}
.sp-tc:hover{transform:translateY(-5px);border-color:var(--forest-3);box-shadow:0 26px 50px -30px rgba(8,30,21,.5)}
.sp-tc-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--mint);color:var(--on-mint)}
.sp-tc:nth-child(2n) .sp-tc-ic{background:var(--lav);color:var(--on-lav)}
.sp-tc h3{font:600 1.12rem/1.25 var(--f-display)}
.sp-tc p{font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.sp-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sp-tags li{padding:5px 10px;border-radius:999px;background:var(--paper-2);font-size:.74rem;font-weight:600;color:var(--ink-2)}

/* why dialtri: dark panel + setup card */
.sp-why{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,4vw,64px);align-items:center;overflow:hidden}
.sp-why-copy{display:grid;gap:16px}
.sp-why-copy .sub{color:var(--on-forest-2)}
.sp-whys{display:grid;gap:10px;margin-top:6px}
.sp-whys li{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;align-items:start;padding:14px 16px;border-radius:18px;background:color-mix(in srgb,var(--on-forest) 6%,transparent);border:1px solid color-mix(in srgb,var(--on-forest) 12%,transparent);transition:background-color .3s,transform .35s var(--ease)}
.sp-whys li:hover{background:color-mix(in srgb,var(--on-forest) 10%,transparent);transform:translateX(4px)}
.sp-why-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:color-mix(in srgb,var(--mint-2) 18%,transparent);color:var(--mint-2)}
.sp-whys h3{font:600 1.06rem/1.25 var(--f-display);color:var(--on-forest)}
.sp-whys p{margin-top:3px;font-size:.9rem;line-height:1.55;color:var(--on-forest-2)}
.sp-setup{justify-self:center;width:min(440px,100%);padding:16px;border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 40px 80px -40px rgba(0,0,0,.7);transform:rotate(-2.5deg);transition:transform .6s var(--ease)}
.sp-setup:hover{transform:rotate(0)}
.sp-set-top{display:flex;align-items:center;gap:10px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line-2)}
.sp-set-top b{display:block;font-size:.95rem}
.sp-set-top small{font-size:.74rem;color:var(--ink-3)}
.sp-set-top .st{margin-left:auto;opacity:0;transform:scale(.8);transition:opacity .4s,transform .4s var(--ease)}
.sp-setup.saved .sp-set-top .st{opacity:1;transform:none}
.sp-setup ul{display:grid;gap:4px}
.sp-setup li{display:flex;align-items:center;gap:10px;padding:9px 6px;border-radius:12px}
.sp-setup li + li{border-top:1px solid var(--line-2)}
.sp-setup li b{display:block;font-size:.86rem}
.sp-setup li small{font-size:.72rem;color:var(--ink-3)}
.sp-setup li > div{flex:1;min-width:0}
.sp-set-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;background:var(--paper-2);color:var(--ink-2)}
.sp-set-ic .ic{width:16px;height:16px}
.sp-set-ic--brand{width:40px;height:40px;background:var(--mint);color:var(--on-mint)}
.sp-time{font:500 .72rem/1 var(--f-mono);font-style:normal;padding:6px 8px;border-radius:8px;background:var(--paper-2);white-space:nowrap}
.sp-setup .sp-tg{width:38px;height:22px}
.sp-setup .sp-tg::after{width:18px;height:18px}
.sp-setup .sp-tg.on::after{transform:translateX(16px)}

/* our product: four tools */
.tls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,40px)}
.tl{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:14px;padding:18px;border-radius:24px;background:var(--paper-2);border:1px solid transparent;transition:transform .45s var(--ease),border-color .35s,background-color .35s,box-shadow .35s}
.tl:hover{transform:translateY(-6px);background:var(--paper);border-color:var(--forest-3);box-shadow:0 26px 50px -30px rgba(8,30,21,.45)}
.tl-n{font:500 .78rem/1 var(--f-mono);color:var(--ink-3)}
.tl h3{display:flex;align-items:center;gap:10px;font:600 clamp(1.05rem,.98rem + .3vw,1.22rem)/1.25 var(--f-display);letter-spacing:-.01em}
.tl-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--mint);color:var(--on-mint)}
.tl:nth-child(2n) .tl-ic{background:var(--lav);color:var(--on-lav)}
.tl-vis{position:relative;display:grid;align-content:center;gap:8px;min-height:150px;padding:14px;border-radius:18px;background:var(--paper);border:1px solid var(--line-2);overflow:hidden}
.tl:hover .tl-vis{background:var(--paper-2)}
.tl-vis .ic{width:14px;height:14px}
/* 1 workflow: three steps light up in turn */
.tl-vis--1{gap:0;justify-items:start}
.tl-node{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line-2);font-size:.76rem;font-weight:600;color:var(--ink-3);transition:background-color .4s,color .4s,border-color .4s}
.tl-node .ic{color:currentColor}
.tl-link{width:2px;height:12px;margin-left:20px;background:var(--line)}
.tls.in .tl-vis--1 .tl-node{animation:tl-step 4.5s ease-in-out infinite}
.tls.in .tl-vis--1 .tl-node:nth-of-type(2){animation-delay:.6s}.tls.in .tl-vis--1 .tl-node:nth-of-type(3){animation-delay:1.2s}
@keyframes tl-step{0%,8%{background:var(--paper-2);color:var(--ink-3);border-color:var(--line-2)}18%,80%{background:var(--mint-3);color:var(--ink);border-color:var(--forest-3)}100%{background:var(--paper-2);color:var(--ink-3);border-color:var(--line-2)}}
/* 2 call control: buttons with a suggestion */
.tl-ctrls{display:flex;gap:8px}
.tl-ctrls i{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--paper-2);border:1px solid var(--line-2);color:var(--ink)}
.tl-ctrls i.on{background:var(--btn);color:var(--btn-fg);border-color:transparent}
.tl-ctrls .ic{width:16px;height:16px}
.tl-tip{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:7px 11px;border-radius:12px;background:var(--lav-3);font-size:.74rem;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .5s .3s,transform .6s var(--ease) .3s}
.tl-tip .ic{color:var(--lav-2)}
.tls.in .tl-tip{opacity:1;transform:none}
/* 3 assistant: summary lines write in */
.tl-ai{display:inline-flex;align-items:center;gap:6px;font:500 .66rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tl-ai .ic{color:var(--forest-3)}
.tl-ln{display:block;height:8px;width:92%;border-radius:9px;background:var(--paper-3);transform-origin:left;transform:scaleX(.1);transition:transform .8s var(--ease)}
.tls.in .tl-ln{transform:none}
.tls.in .tl-ln:nth-of-type(2){transition-delay:.15s}.tls.in .tl-ln:nth-of-type(3){transition-delay:.3s}
.tl-ok{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:6px 10px;border-radius:999px;background:var(--good-bg);color:var(--good);font-size:.74rem;font-weight:600;opacity:0;transition:opacity .5s .8s}
.tls.in .tl-ok{opacity:1}
/* 4 analytics: bars grow */
.tl-vis--4{grid-template-columns:auto 1fr;align-items:end;gap:14px}
.tl-kpi{display:grid;gap:2px}
.tl-kpi b{font:600 1.7rem/1 var(--f-display);letter-spacing:-.02em}
.tl-kpi small{font-size:.72rem;color:var(--ink-3)}
.tl-bars{display:flex;align-items:flex-end;gap:5px;height:96px}
.tl-bars i{flex:1;height:var(--h);border-radius:5px 5px 2px 2px;background:var(--mint-2);transform-origin:bottom;transform:scaleY(.1);transition:transform .7s var(--ease)}
.tl-bars i:nth-child(2n){background:var(--lav-2)}
.tls.in .tl-bars i{transform:none}
.tls.in .tl-bars i:nth-child(2){transition-delay:.06s}.tls.in .tl-bars i:nth-child(3){transition-delay:.12s}.tls.in .tl-bars i:nth-child(4){transition-delay:.18s}.tls.in .tl-bars i:nth-child(5){transition-delay:.24s}.tls.in .tl-bars i:nth-child(6){transition-delay:.3s}

@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sp-core,.sp-mods,.sp-tc,.sp-setup,.tl{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .sp-obj img,.sp-lines path.on,.tls.in .tl-node{animation:none!important}
  .sp-pane,.sp-move-b,.sp-move-n,.sp-bars i,.sp-tg,.sp-tg::after,.sp-crow,.sp-mod,.tl-ln,.tl-bars i,.tl-tip,.tl-ok{transition:none!important}
}
@media (max-width:1180px){
  .sp-mods{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp-lines{display:none}
  .sp-core{margin-bottom:22px}
}
@media (max-width:1000px){
  .sp-start,.sp-serve,.sp-why{grid-template-columns:1fr}
  .tls{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-start-copy{position:static}
  .sp-mods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-mod:last-child{grid-column:1/-1}
  .sp-setup{transform:none}
}
@media (max-width:1000px){
  .sp-app{min-height:0}
}
@media (max-width:760px){
  .sp-team{display:none}
  .sp-app .fx-app-t{white-space:nowrap}
}
@media (max-width:640px){
  .sp-mods,.sp-tcs,.tls{grid-template-columns:1fr}
}

/* ===================== Help Center (/help/, hc-) ===================== */
.hc-search{display:flex;align-items:center;gap:12px;max-width:760px;margin:clamp(20px,3vw,32px) 0 16px;padding:6px 8px 6px 18px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);transition:border-color .25s,box-shadow .25s}
.hc-search:focus-within{border-color:var(--forest-3);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint-2) 40%,transparent)}
.hc-search-ic{display:grid;place-items:center;color:var(--ink-3);font-size:20px;flex:none}
.hc-search input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:1rem;color:var(--ink);padding:12px 0;outline:none}
.hc-search input::placeholder{color:var(--ink-3)}
.hc-search input::-webkit-search-cancel-button{cursor:pointer}
.hc-count{flex:none;font:500 .74rem/1 var(--f-mono);letter-spacing:.04em;padding:9px 12px;border-radius:999px;background:var(--mint);color:var(--on-mint);font-variant-numeric:tabular-nums}
.hc-topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
.hc-topic{display:grid;gap:8px;padding:22px 24px 8px;border-radius:var(--r-card);background:var(--paper-2);min-width:0}
.hc-topic[hidden]{display:none}
.hc-topic h3{display:flex;align-items:center;gap:12px;font:600 1.15rem/1.2 var(--f-display);letter-spacing:-.012em;margin-bottom:4px}
.hc-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--mint);color:var(--on-mint);font-size:18px;flex:none}
.hc-topic:nth-child(4n+2) .hc-ic,.hc-topic:nth-child(4n+3) .hc-ic,.hc-step:nth-child(2n) .hc-ic,.hc-cc:nth-child(2n) .hc-ic{background:var(--lav);color:var(--on-lav)}
.hc-qs{display:grid}
.hc-q{border-top:1px solid var(--line)}
.hc-q[hidden]{display:none}
.hc-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;font-weight:600;font-size:.96rem;line-height:1.4}
.hc-q summary::-webkit-details-marker{display:none}
.hc-plus{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);font-size:13px;flex:none;transition:transform .3s var(--ease),background-color .25s,color .25s}
.hc-q summary:hover .hc-plus{background:var(--mint-3)}
.hc-q[open] .hc-plus{transform:rotate(45deg);background:var(--btn);color:var(--btn-fg);border-color:transparent}
.hc-q p{padding:0 42px 16px 0;color:var(--ink-2);font-size:.94rem;line-height:1.6}
.hc-none{margin-top:12px;padding:18px 22px;border-radius:var(--r-card);background:var(--paper-2);color:var(--ink-2)}
.hc-none[hidden]{display:none}
.hc-none a{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.hc-guide{list-style:none;margin:clamp(20px,3vw,32px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.hc-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;padding:24px;border-radius:var(--r-card);background:var(--paper-2);min-width:0;transition:background-color .3s}
.hc-step:hover{background:var(--mint-3)}
.hc-step-n{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--forest);color:var(--mint-2);font:600 1rem/1 var(--f-mono)}
.hc-step h3{display:flex;align-items:center;gap:10px;font:600 1.12rem/1.25 var(--f-display);letter-spacing:-.01em;margin:4px 0 8px}
.hc-step h3 .hc-ic{width:30px;height:30px;border-radius:9px;font-size:14px}
.hc-step p{color:var(--ink-2);font-size:.94rem;line-height:1.6}
.hc-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.86rem;font-weight:600;color:var(--forest-3)}
.hc-more .ic{transition:transform .25s var(--ease)}
a:hover > .hc-more .ic,.hc-more:hover .ic{transform:translateX(3px)}
:root[data-mode="dark"] .hc-more{color:var(--mint-2)}
.hc-fixes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(20px,3vw,32px)}
.hc-fix{display:grid;align-content:start;gap:12px;padding:24px;border-radius:var(--r-card);background:rgba(236,248,241,.06);border:1px solid rgba(236,248,241,.12);min-width:0}
.hc-fix h3{display:flex;align-items:center;gap:12px;font:600 1.12rem/1.25 var(--f-display);letter-spacing:-.01em;color:var(--on-forest)}
.hc-fix-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--mint-2);color:#062116;font-size:18px;flex:none}
.hc-fix:nth-child(2n) .hc-fix-ic{background:var(--lav-2);color:#1A1033}
.hc-fix-k{font:500 .7rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-forest-2)}
.hc-fix ol{list-style:none;margin:0;padding:0;counter-reset:hf;display:grid;gap:10px}
.hc-fix li{counter-increment:hf;display:grid;grid-template-columns:24px minmax(0,1fr);gap:10px;font-size:.93rem;line-height:1.55;color:rgba(236,248,241,.86)}
.hc-fix li::before{content:counter(hf);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(236,248,241,.12);font:600 .72rem/1 var(--f-mono);color:var(--on-forest)}
.hc-contact{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(20px,3vw,32px)}
.hc-cc{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:24px;border-radius:var(--r-card);background:var(--paper-2);color:inherit;text-decoration:none;min-width:0;transition:background-color .3s,transform .3s var(--ease)}
.hc-cc:hover{background:var(--mint-3);transform:translateY(-3px)}
.hc-cc .hc-ic{margin-bottom:10px}
.hc-cc b{font:600 1.1rem/1.25 var(--f-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.hc-cc small{color:var(--ink-2);font-size:.88rem;line-height:1.5}
.hc-cc .hc-more{margin-top:auto;padding-top:10px}

/* ===================== ROI calculator (/tools/roi-calculator/, rc-) ===================== */
.rc{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(24px,3.4vw,56px);align-items:start;margin-top:clamp(20px,3vw,32px)}
.rc-form{display:grid;gap:14px}
.rc-k{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rc-presets{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:4px}
.rc-presets .rc-k{margin-right:4px}
.rc-presets button{border:1px solid var(--line);background:var(--paper);color:var(--ink);font:600 .86rem/1 var(--f-body);padding:11px 16px;border-radius:999px;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.rc-presets button:hover{background:var(--paper-2)}
.rc-presets button[aria-pressed="true"]{background:var(--btn);color:var(--btn-fg);border-color:transparent}
.rc-group{border:0;margin:0;padding:22px 24px 24px;border-radius:var(--r-card);background:var(--paper-2);display:grid;gap:20px;min-width:0}
.rc-group legend{float:left;width:100%;padding:0;display:flex;align-items:center;gap:10px;font:600 1.12rem/1.2 var(--f-display);letter-spacing:-.01em}
.rc-gi{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--mint);color:var(--on-mint);font-size:16px;flex:none}
.rc-group + .rc-group .rc-gi{background:var(--lav);color:var(--on-lav)}
.rc-group .rf output{background:var(--paper)}
.rc-billing{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 12px 12px 24px;border-radius:var(--r-card);background:var(--paper-2)}
.rc-billing .bill{background:var(--paper)}
.rc-out{display:grid;gap:12px;position:sticky;top:110px}
.rc-main{min-height:0;gap:8px}
.rc-main .ro-v{font-size:clamp(2.6rem,1.8rem + 2.6vw,4.2rem);overflow-wrap:anywhere}
.rc-main .ro-s{opacity:1;color:var(--on-forest-2)}
.rc-bar{display:flex;height:12px;margin-top:14px;border-radius:999px;background:var(--mint-2);overflow:hidden}
.rc-bar i{display:block;height:100%;min-width:6px;max-width:100%;border-radius:999px;background:var(--lav-2);transition:width .5s var(--ease)}
.rc-bar-k{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;font-size:.8rem;color:var(--on-forest-2)}
.rc-bar-k b{font-weight:600;color:var(--on-forest);margin-left:auto}
.rc-sw{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.rc-sw--c{background:var(--lav-2)}
.rc-sw--v{background:var(--mint-2)}
.rc-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rc-stat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:3px;align-content:start;padding:18px;border-radius:var(--r-card);background:var(--paper-2);min-width:0}
.rc-si{grid-row:span 3;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--mint);color:var(--on-mint);font-size:17px}
.rc-stat:nth-child(2n) .rc-si{background:var(--lav);color:var(--on-lav)}
.rc-stat small{font:500 .7rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.rc-stat b{font:500 clamp(1.5rem,1.2rem + .9vw,2rem)/1.05 var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.rc-stat em{font-style:normal;font-size:.8rem;color:var(--ink-3)}
.rc-break{margin:0;display:grid;padding:4px 20px;border-radius:var(--r-card);background:var(--paper-2)}
.rc-break div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--line)}
.rc-break div:first-child{border-top:0}
.rc-break dt{font-size:.92rem;color:var(--ink)}
.rc-break dt small{display:block;margin-top:2px;font-size:.76rem;color:var(--ink-3)}
.rc-break dd{margin:0;font:500 1rem/1 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-tw dt,.rc-tw dd{color:var(--ink-2)}
.rc-ent{display:flex;align-items:flex-start;gap:10px;padding:14px 18px;border-radius:var(--r-card);background:var(--lav-3);color:var(--on-lav);font-size:.9rem;line-height:1.5}
.rc-ent[hidden]{display:none}
.rc-ent .ic{font-size:18px;margin-top:2px}
.rc-ent a{color:inherit;font-weight:600}
.rc-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rc-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ghost-line);background:none;color:var(--ink);font:600 .9rem/1 var(--f-body);padding:14px 18px;border-radius:999px;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.rc-btn:hover{background:var(--paper-2)}
.rc-btn.is-done{background:var(--mint);color:var(--on-mint);border-color:transparent}
.rc-drivers .card-n{text-transform:uppercase}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .hc-topics,.hc-guide,.hc-fixes,.hc-contact,.rc-form,.rc-how{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .hc-plus,.hc-step,.hc-cc,.hc-more .ic,.rc-bar i{transition:none!important}
  .hc-cc:hover{transform:none}
}
@media (max-width:1180px){
  .hc-guide,.hc-fixes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hc-contact{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1000px){
  .rc{grid-template-columns:1fr}
  .rc-out{position:static}
}
@media (max-width:760px){
  .hc-topics,.hc-guide,.hc-fixes{grid-template-columns:1fr}
  .hc-topic{padding:20px 18px 6px}
  .hc-step,.hc-fix,.hc-cc{padding:20px}
  .hc-q p{padding-right:0}
  .rc-group{padding:20px 18px}
  .rc-billing{padding:14px 14px 14px 18px}
}
@media (max-width:560px){
  .hc-contact{grid-template-columns:1fr}
  .hc-count{display:none}
  .hc-step{grid-template-columns:1fr;gap:12px}
  .rc-stats{gap:8px}
  .rc-stat{grid-template-columns:1fr;padding:16px}
  .rc-si{grid-row:auto;margin-bottom:8px}
  .rc-break{padding:4px 16px}
  .rc-break div{flex-wrap:wrap;gap:4px 16px}
  .rc-acts .pill{width:100%;justify-content:center}
  .rc-btn{flex:1;justify-content:center}
}

/* ROI "how it works": the maths worked out with the visitor's own numbers (forest board) */
.rc-how{display:grid;grid-template-columns:minmax(270px,360px) minmax(0,1fr);gap:clamp(16px,2.4vw,32px);margin-top:clamp(24px,3vw,40px);align-items:stretch}
.rc-side{display:grid;align-content:start;gap:18px;min-width:0}
.rc-steps{position:relative;display:grid;gap:6px;--p:0}
.rc-steps::before,.rc-steps::after{content:"";position:absolute;left:32px;top:31px;width:2px;border-radius:2px;pointer-events:none}
.rc-steps::before{bottom:31px;background:rgba(236,248,241,.14)}
.rc-steps::after{height:calc((100% - 62px) * var(--p));background:var(--mint-2);transition:height .5s var(--ease)}
.rc-st{position:relative;z-index:1;display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:14px;width:100%;padding:12px 14px;border:1px solid transparent;border-radius:18px;background:none;color:var(--on-forest-2);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:background-color .3s,border-color .3s,color .3s}
.rc-st:hover{background:rgba(236,248,241,.05);color:var(--on-forest)}
.rc-st.is-on{background:rgba(236,248,241,.09);border-color:rgba(236,248,241,.16);color:var(--on-forest)}
.rc-st-n{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--forest);border:2px solid rgba(236,248,241,.24);font:600 .74rem/1 var(--f-mono);transition:background-color .3s,border-color .3s,color .3s}
.rc-st.is-done .rc-st-n{border-color:var(--mint-2);color:var(--mint-2)}
.rc-st.is-on .rc-st-n{background:var(--mint-2);border-color:var(--mint-2);color:#062116}
.rc-st-t{font:600 1rem/1.25 var(--f-display);letter-spacing:-.01em}
.rc-st-v{padding:6px 9px;border-radius:999px;background:rgba(236,248,241,.08);font:500 .78rem/1 var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap;transition:background-color .3s,color .3s}
.rc-st.is-on .rc-st-v{background:var(--mint-2);color:#062116}
.rc-st-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mint-2);transform:scaleX(0);transform-origin:left;pointer-events:none}
.rc-how.is-auto .rc-st.is-on .rc-st-bar{animation:rc-tick 5.5s linear forwards}
.rc-how.is-paused .rc-st.is-on .rc-st-bar{animation-play-state:paused}
@keyframes rc-tick{to{transform:scaleX(1)}}
.rc-legend{list-style:none;margin:0;padding:16px 18px;display:grid;gap:10px;border-radius:18px;border:1px dashed rgba(236,248,241,.18);font-size:.84rem;color:var(--on-forest-2)}
.rc-legend li{display:flex;align-items:center;gap:10px}
.rc-lg{width:24px;height:14px;border-radius:5px;flex:none}
.rc-lg--in{background:var(--mint-2)}
.rc-lg--c{background:var(--lav-2)}
.rc-lg--k{border:1px dashed rgba(236,248,241,.5)}
.rc-stage{position:relative;isolation:isolate;display:grid;grid-template-rows:1fr auto;gap:18px;min-width:0;padding:clamp(20px,2.6vw,36px);border-radius:var(--r-card);background:linear-gradient(160deg,rgba(236,248,241,.1),rgba(236,248,241,.03));border:1px solid rgba(236,248,241,.14);overflow:hidden}
.rc-stage::before{content:"";position:absolute;z-index:-1;width:460px;height:460px;right:-160px;top:-200px;border-radius:50%;background:radial-gradient(closest-side,rgba(115,220,160,.2),transparent);pointer-events:none}
.rc-sps{display:grid;min-width:0}
.rc-sp{grid-area:1/1;position:relative;display:flex;flex-direction:column;gap:18px;min-width:0;visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s}
.rc-sp.is-on{visibility:visible;opacity:1;transition:opacity .45s}
.rc-sp-wm{position:absolute;z-index:-1;right:-.04em;top:-.22em;font:600 clamp(5rem,3.6rem + 5vw,10rem)/1 var(--f-display);letter-spacing:-.06em;color:rgba(236,248,241,.05);pointer-events:none}
.rc-sp-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.rc-sp-k{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-forest-2)}
.rc-live{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:rgba(236,248,241,.08);font:500 .72rem/1 var(--f-mono);letter-spacing:.03em;color:var(--on-forest)}
.rc-live i{width:7px;height:7px;border-radius:50%;background:var(--mint-2);animation:rc-pulse 2s ease-out infinite}
@keyframes rc-pulse{0%{box-shadow:0 0 0 0 rgba(115,220,160,.55)}70%,100%{box-shadow:0 0 0 8px rgba(115,220,160,0)}}
.rc-sp-h{display:flex;align-items:center;gap:14px;font:600 clamp(1.5rem,1.1rem + 1.2vw,2.2rem)/1.1 var(--f-display);letter-spacing:-.025em;color:var(--on-forest)}
.rc-sp-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--mint-2);color:#062116;font-size:22px;flex:none}
.rc-eqs{display:grid;gap:12px}
.rc-eq-row{display:grid;gap:14px;padding:clamp(14px,1.6vw,20px);border-radius:18px;background:rgba(2,16,10,.32);border:1px solid rgba(236,248,241,.08)}
.rc-eq-l{font:500 .7rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-forest-2)}
.rc-eq-t{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.rc-tk{position:relative;display:inline-grid;justify-items:start;gap:5px;padding:9px 12px 8px;border-radius:12px;min-width:0}
.rc-tk b{font:600 1.18rem/1 var(--f-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.rc-tk small{max-width:16ch;font:500 .62rem/1.25 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;opacity:.78}
.rc-tk em{position:absolute;top:-8px;right:-6px;padding:3px 6px;border-radius:6px;background:var(--forest);border:1px solid var(--lav-2);color:var(--lav-2);font:600 .56rem/1 var(--f-mono);font-style:normal;letter-spacing:.04em;text-transform:uppercase}
.rc-tk--in{background:var(--mint-2);color:#062116}
.rc-tk--c{background:var(--lav-2);color:#1A1033}
.rc-tk--k{border:1px dashed rgba(236,248,241,.42);color:var(--on-forest)}
.rc-op{font:500 1.3rem/1 var(--f-mono);font-style:normal;color:var(--on-forest-2)}
.rc-op--p{font-size:1.9rem;font-weight:300}
.rc-op--eq{color:var(--mint-2);font-weight:600;font-size:1.8rem;align-self:center}
.rc-eq-out{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding-top:12px;border-top:1px dashed rgba(236,248,241,.16)}
.rc-res{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.rc-res b{font:600 clamp(2rem,1.4rem + 1.6vw,2.9rem)/1 var(--f-display);letter-spacing:-.035em;color:var(--mint-2);font-variant-numeric:tabular-nums}
.rc-res small{font:500 .64rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-forest-2)}
.rc-sp-p{max-width:62ch;color:var(--on-forest-2);font-size:.98rem;line-height:1.6}
.rc-say{display:grid;gap:8px;max-width:64ch;padding:2px 0 2px 18px;border-left:3px solid var(--mint-2);font-size:1.08rem;line-height:1.55;color:var(--on-forest)}
.rc-say-k{font:500 .68rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-forest-2)}
.rc-say b{font-weight:700;color:var(--mint-2);font-variant-numeric:tabular-nums}
.rc-feeds{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.rc-feeds-k{margin-right:4px;font:500 .7rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-forest-2)}
.rc-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:999px;border:1px solid rgba(236,248,241,.2);background:rgba(236,248,241,.05);color:var(--on-forest);font:600 .86rem/1 var(--f-body);text-decoration:none;cursor:pointer;transition:background-color .25s,border-color .25s,color .25s}
.rc-chip b{display:grid;place-items:center;min-width:26px;height:22px;padding:0 6px;border-radius:999px;background:rgba(236,248,241,.12);font:600 .66rem/1 var(--f-mono)}
.rc-chip .ic{font-size:14px;transition:transform .25s var(--ease)}
.rc-chip:hover{background:var(--mint-2);border-color:transparent;color:#062116}
.rc-chip:hover b{background:rgba(6,33,22,.14)}
.rc-chip:hover .ic{transform:translateX(3px)}
a.rc-chip{padding-left:14px}
.rc-final{font-size:.95rem;color:var(--on-forest-2)}
.rc-final b{font:600 1.15rem/1 var(--f-display);color:var(--mint-2);font-variant-numeric:tabular-nums}
.rc-final i{font-style:normal;margin:0 4px}
.rc-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid rgba(236,248,241,.1)}
.rc-edit{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--on-forest);text-decoration:none}
.rc-edit .ic{color:var(--mint-2);font-size:18px}
.rc-edit:hover{text-decoration:underline;text-underline-offset:4px}
.rc-nav div{display:flex;gap:8px}
.rc-go{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(236,248,241,.26);background:none;color:var(--on-forest);font-size:18px;cursor:pointer;transition:background-color .25s,color .25s,border-color .25s}
.rc-go:hover{background:var(--mint-2);border-color:transparent;color:#062116}
.rc-go--prev .ic{transform:scaleX(-1)}
@media (prefers-reduced-motion:no-preference){
  .rc-sp.is-on .rc-tk,.rc-sp.is-on .rc-op,.rc-sp.is-on .rc-res{animation:rc-in .5s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms)}
  .rc-sp.is-on .rc-res b{animation:rc-glow 1.2s var(--ease) both;animation-delay:calc(var(--i,0) * 55ms + 250ms)}
}
@keyframes rc-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes rc-glow{from{text-shadow:0 0 24px rgba(115,220,160,.7)}to{text-shadow:none}}
@media (prefers-reduced-motion:reduce){
  .rc-live i,.rc-st-bar{animation:none!important}
  .rc-steps::after,.rc-sp,.rc-sp.is-on,.rc-st,.rc-st-n{transition:none!important}
}
@media (max-width:1000px){
  .rc-how{grid-template-columns:1fr}
  .rc-steps{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
  .rc-steps::-webkit-scrollbar{display:none}
  .rc-steps::before,.rc-steps::after{display:none}
  .rc-st{flex:0 0 auto;width:auto;grid-template-columns:auto auto;gap:10px;padding:10px 14px 10px 10px;scroll-snap-align:start;border-color:rgba(236,248,241,.12)}
  .rc-st-n{width:30px;height:30px}
  .rc-st-v{display:none}
  .rc-side{display:contents}
  .rc-steps{order:1}
  .rc-stage{order:2}
  .rc-legend{order:3;display:flex;flex-wrap:wrap;gap:8px 18px;padding:12px 14px}
}
@media (max-width:560px){
  .rc-stage{padding:18px 16px}
  .rc-sp-h{font-size:1.4rem}
  .rc-sp-ic{width:40px;height:40px;font-size:18px}
  .rc-eq-t{gap:8px}
  .rc-tk{padding:8px 10px 7px}
  .rc-tk b{font-size:1.05rem}
  .rc-op{font-size:1.1rem}
  .rc-res b{font-size:2rem}
  .rc-op--eq{font-size:1.4rem}
  .rc-edit{font-size:.84rem}
}

/* ===================== Dialer software comparison hub (/dialers/compare/, cb- banners, cv- criteria) ===================== */
.cb-board{background:radial-gradient(70% 55% at 50% 0%,color-mix(in srgb,var(--mint) 70%,transparent),transparent 70%),var(--paper)}
main > section.wrap > .board.cb-board{padding-top:max(132px,calc(var(--pad-y) + 28px))}
.cb-head{display:grid;justify-items:center;gap:16px;max-width:1080px;margin:0 auto clamp(32px,4.4vw,56px);text-align:center}
.cb-head .kick{align-self:auto}
.cb-h1{font:600 clamp(2rem,1.1rem + 2.6vw,3.5rem)/1.06 var(--f-display);letter-spacing:-.035em;text-wrap:balance}
.cb-hl{background:linear-gradient(transparent 60%,var(--mint-2) 60% 92%,transparent 92%);padding:0 .06em}
:root[data-mode="dark"] .cb-hl{background:linear-gradient(transparent 60%,color-mix(in srgb,var(--mint-2) 40%,transparent) 60% 92%,transparent 92%)}
.cb-sub{max-width:660px;font-size:clamp(1rem,.95rem + .25vw,1.12rem);line-height:1.6;color:var(--ink-2);text-wrap:balance}
.cb-note{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:var(--paper-2);font:500 .74rem/1 var(--f-mono);letter-spacing:.03em;color:var(--ink-2)}
.cb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,2.6vw,34px) clamp(18px,2.4vw,32px);max-width:1200px;margin:0 auto}
.cb{display:grid;gap:12px;justify-items:center;color:inherit;text-decoration:none;min-width:0}
.cb-art{position:relative;isolation:isolate;display:block;width:100%;aspect-ratio:2.82/1;border-radius:18px;overflow:hidden;container-type:inline-size;
  background:radial-gradient(70% 130% at 18% 45%,#1C6B4F 0%,#0E3A2B 55%,#072619 100%);box-shadow:0 1px 2px rgba(11,31,23,.08),0 18px 34px -22px rgba(11,31,23,.45);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.cb-art::before{content:"";position:absolute;z-index:-1;left:6%;top:50%;width:34%;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(159,229,186,.28),transparent);pointer-events:none}
.cb-r{position:absolute;inset:0;z-index:0;background:var(--ac);clip-path:polygon(57% 0,100% 0,100% 100%,47% 100%);transition:clip-path .55s var(--ease)}
.cb-l{position:absolute;z-index:1;left:0;top:0;bottom:0;width:46%;display:flex;align-items:center;justify-content:center;gap:2.4cqi;color:#F2FBF5;--logo-bg:#9FE5BA;--logo-fg:#062116;--logo-spark:#5A3FC0}
.cb-mark svg{display:block;width:9.4cqi;height:9.4cqi;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
.cb-word{font:650 5.2cqi/1 var(--f-display);letter-spacing:-.035em}
.cb-vs{position:absolute;z-index:2;left:52%;top:50%;transform:translate(-50%,-50%);font:800 7.4cqi/1 var(--f-display);letter-spacing:-.05em;color:#fff;text-shadow:0 .6cqi 2.4cqi rgba(4,20,14,.45);transition:transform .45s var(--ease)}
.cb-rc{position:absolute;z-index:1;right:0;top:0;bottom:0;width:41%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6cqi;padding:0 3cqi;color:var(--ac-ink);text-align:center}
.cb-name{font:650 5.2cqi/1.1 var(--f-display);letter-spacing:-.035em;text-wrap:balance;overflow-wrap:break-word}
.cb-cap{font-size:1rem;font-weight:500;color:var(--forest-3);text-align:center}
:root[data-mode="dark"] .cb-cap{color:var(--mint-2)}
a.cb:hover .cb-art{transform:translateY(-5px);box-shadow:0 2px 4px rgba(11,31,23,.08),0 28px 44px -24px rgba(11,31,23,.55)}
a.cb:hover .cb-r{clip-path:polygon(59% 0,100% 0,100% 100%,49% 100%)}
a.cb:hover .cb-vs{transform:translate(-50%,-50%) scale(1.08) rotate(-4deg)}
a.cb:hover .cb-cap{text-decoration:underline;text-underline-offset:4px}
/* empty slots */
.cb--soon .cb-r{background:repeating-linear-gradient(135deg,var(--ac) 0 16px,color-mix(in srgb,var(--ac) 80%,#fff) 16px 32px)}
.cb-q{font:600 9cqi/1 var(--f-display);opacity:.72}
.cb-tag{padding:1cqi 2cqi;border-radius:999px;background:color-mix(in srgb,var(--ac-ink) 12%,transparent);font:600 max(.6rem,1.9cqi)/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.cb--soon .cb-cap{color:var(--ink-3)!important;font-weight:400}
/* suggest a comparison */
.cb--ask .cb-r{background:var(--paper-2)}
.cb--ask .cb-r::after{content:"";position:absolute;inset:0}
.cb-plus{display:grid;place-items:center;width:9cqi;height:9cqi;border-radius:50%;background:var(--btn);color:var(--btn-fg);font-size:3.6cqi;transition:transform .45s var(--ease)}
.cb-ask{font:600 max(.82rem,3.4cqi)/1.15 var(--f-display);letter-spacing:-.02em}
a.cb--ask:hover .cb-plus{transform:rotate(90deg)}
/* what every comparison covers */
.cv-cs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:clamp(20px,3vw,32px)}
.cv-c{position:relative;display:grid;align-content:start;gap:12px;padding:24px;border-radius:var(--r-card);background:var(--paper-2);min-width:0;overflow:hidden;transition:background-color .3s}
.cv-c:hover{background:var(--mint-3)}
.cv-c:nth-child(2n) .icb{background:var(--lav);color:var(--on-lav)}
.cv-c-n{position:absolute;right:18px;top:14px;font:600 clamp(2.4rem,2rem + 1.4vw,3.4rem)/1 var(--f-display);letter-spacing:-.04em;color:var(--ink);opacity:.07}
.cv-c h3{font:600 1.15rem/1.2 var(--f-display);letter-spacing:-.012em}
.cv-c p{color:var(--ink-2);font-size:.94rem;line-height:1.55}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cb-grid > *,.cv-cs{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .cb-art,.cb-r,.cb-vs,.cb-plus{transition:none!important}
  a.cb:hover .cb-art{transform:none}
}
@media (max-width:1100px){
  .cv-cs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .cb-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .cv-cs{grid-template-columns:1fr}
}

/* ===================== Dialers page (Nov 2026 content): pl- pipeline, ck- checklist, wr- editorial rows, spectrum ===================== */
/* how it dials: a contact travels along five stations */
.pl{position:relative;--k:0;margin-top:clamp(24px,3vw,40px);padding-top:66px}
.pl-rail{position:absolute;left:10%;right:10%;top:calc(66px + 27px);height:4px;border-radius:4px;background:var(--paper-3)}
.pl-rail i{display:block;height:100%;width:calc(var(--k) * 25%);border-radius:inherit;background:linear-gradient(90deg,var(--mint-2),var(--lav-2));transition:width .7s var(--ease)}
.pl-tok{position:absolute;top:0;left:calc(10% + var(--k) * 20%);transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;background:var(--btn);color:var(--btn-fg);box-shadow:var(--shadow);white-space:nowrap;transition:left .7s var(--ease);z-index:2}
.pl-tok::after{content:"";position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:2px}
.pl-tok b{display:block;font-size:.8rem;line-height:1.1}
.pl-tok small{display:block;font:500 .66rem/1.2 var(--f-mono);opacity:.8}
.pl-stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.pl-st{display:grid;justify-items:center;gap:16px;cursor:pointer;outline:none;min-width:0}
.pl-node{position:relative;z-index:1;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--paper);border:2px solid var(--line);color:var(--ink-3);font-size:22px;transition:background-color .4s,border-color .4s,color .4s,transform .4s var(--ease)}
.pl-st.is-done .pl-node{border-color:var(--mint-2);color:var(--forest-3)}
.pl-st.is-on .pl-node{background:var(--mint-2);border-color:var(--mint-2);color:#062116;transform:scale(1.12);box-shadow:0 0 0 8px color-mix(in srgb,var(--mint-2) 30%,transparent)}
.pl-card{display:grid;align-content:start;gap:8px;width:100%;height:100%;padding:20px 18px;border-radius:var(--r-card);background:var(--paper-2);border:1px solid transparent;transition:background-color .4s,border-color .4s,transform .4s var(--ease),box-shadow .4s}
.pl-st.is-on .pl-card{background:var(--paper);border-color:var(--mint-2);transform:translateY(-6px);box-shadow:var(--shadow)}
.pl-st:focus-visible .pl-card{outline:2px solid var(--forest-3);outline-offset:3px}
.pl-n{font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;color:var(--ink-3)}
.pl-card h3{font:600 1.12rem/1.2 var(--f-display);letter-spacing:-.012em}
.pl-card p{font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.pl-tag{justify-self:start;margin-top:4px;padding:6px 10px;border-radius:999px;background:var(--paper-3);font:500 .68rem/1.2 var(--f-mono);color:var(--ink-2);transition:background-color .4s,color .4s}
.pl-st.is-on .pl-tag{background:var(--mint);color:var(--on-mint)}
:root[data-mode="dark"] .pl-st.is-done .pl-node{color:var(--mint-2)}
/* getting started: launch checklist */
.ck-b{background:linear-gradient(160deg,var(--mint-3),var(--paper) 70%)}
.ck{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,4vw,64px);align-items:center}
.ck-copy{display:grid;gap:16px;justify-items:start}
.ck-ring{position:relative;width:148px;height:148px;margin-top:8px}
.ck-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.ck-ring circle{fill:none;stroke:var(--paper-3);stroke-width:10}
.ck-ring .ck-arc{stroke:var(--forest-3);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--ck,0) * 25);transition:stroke-dashoffset .6s var(--ease)}
:root[data-mode="dark"] .ck-ring .ck-arc{stroke:var(--mint-2)}
.ck-ring > span{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ck-ring b{font:600 2.6rem/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ck-ring small{font:500 .68rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ck-card{padding:clamp(16px,2vw,24px);border-radius:28px;background:var(--paper);box-shadow:var(--shadow);min-width:0}
.ck-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 6px 16px;font-weight:600;font-size:.92rem}
.ck-top > span:first-child{display:inline-flex;align-items:center;gap:8px}
.ck-state{padding:6px 12px;border-radius:999px;background:var(--paper-3);font:600 .7rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);transition:background-color .4s,color .4s}
.ck.is-live .ck-state{background:var(--mint-2);color:#062116}
.ck-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ck-i{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;padding:16px;border-radius:18px;background:var(--paper-2);transition:background-color .4s,opacity .4s}
.ck-i:not(.is-done){opacity:.72}
.ck-i.is-done{background:var(--mint-3);opacity:1}
.ck-box{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;border:2px dashed var(--ghost-line);color:transparent;font-size:18px;transition:background-color .35s,border-color .35s,color .35s,transform .35s var(--ease)}
.ck-i.is-done .ck-box{background:var(--forest-3);border:2px solid var(--forest-3);color:#fff;transform:scale(1.06)}
:root[data-mode="dark"] .ck-i.is-done .ck-box{background:var(--mint-2);border-color:var(--mint-2);color:#062116}
.ck-body{min-width:0}
.ck-body h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font:600 1.08rem/1.25 var(--f-display);letter-spacing:-.01em}
.ck-n{font:500 .66rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ck-body p{margin-top:4px;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.ck-vis{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.ck-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font:500 .72rem/1 var(--f-mono);color:var(--ink-2)}
.ck-mini{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--ink-3)}
.ck-seg{display:inline-flex;gap:3px;padding:3px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.ck-seg span{padding:6px 12px;border-radius:999px;font-size:.76rem;font-weight:600;color:var(--ink-3)}
.ck-seg span.on{background:var(--btn);color:var(--btn-fg)}
.ck-go{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:.8rem;font-weight:600}
/* why dialtri: editorial rows on the forest board */
.wr{margin-top:clamp(20px,3vw,36px);border-bottom:1px solid rgba(236,248,241,.12)}
.wr-row{display:grid;grid-template-columns:64px minmax(0,1.05fr) minmax(0,1fr) minmax(250px,300px);align-items:center;gap:clamp(16px,2.4vw,36px);padding:clamp(20px,2.4vw,30px) 0;border-top:1px solid rgba(236,248,241,.12);cursor:pointer;outline:none}
.wr-n{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid rgba(236,248,241,.25);font:500 .78rem/1 var(--f-mono);color:var(--on-forest-2);transition:background-color .4s,color .4s,border-color .4s}
.wr-t{font:600 clamp(1.5rem,1rem + 1.6vw,2.5rem)/1.05 var(--f-display);letter-spacing:-.03em;color:rgba(236,248,241,.55);transition:color .4s}
.wr-d{font-size:.98rem;line-height:1.6;color:var(--on-forest-2)}
.wr-vis{display:grid;gap:8px;padding:14px;border-radius:18px;background:rgba(236,248,241,.06);border:1px solid rgba(236,248,241,.1);opacity:.45;transform:scale(.97);transition:opacity .45s,transform .45s var(--ease),background-color .45s}
.wr-row.is-on .wr-n{background:var(--mint-2);border-color:var(--mint-2);color:#062116}
.wr-row.is-on .wr-t,.wr-row:hover .wr-t{color:var(--on-forest)}
.wr-row.is-on .wr-vis{opacity:1;transform:none;background:rgba(236,248,241,.1)}
.wr-row:focus-visible .wr-t{text-decoration:underline;text-underline-offset:6px}
.wv-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;gap:3px}
.wv-bar i{display:block;border-radius:4px;transition:flex-basis .9s var(--ease)}
.wv-bar .w1,.wv-leg .w1{background:rgba(236,248,241,.35)}.wv-bar .w2,.wv-leg .w2{background:var(--lav-2)}.wv-bar .w3,.wv-leg .w3{background:var(--mint-2)}
.wv-bar .w1{flex-basis:34%}.wv-bar .w2{flex-basis:30%}.wv-bar .w3{flex-basis:36%}
.wr-row.is-on .wv-bar .w1{flex-basis:10%}.wr-row.is-on .wv-bar .w2{flex-basis:8%}.wr-row.is-on .wv-bar .w3{flex-basis:82%}
.wv-leg{display:flex;gap:12px;font:500 .66rem/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--on-forest-2)}
.wv-leg span{display:inline-flex;align-items:center;gap:5px}.wv-leg i{width:8px;height:8px;border-radius:2px}
.wv-ctl{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.8rem;color:var(--on-forest-2)}
.wv-step{display:inline-flex;align-items:center;gap:6px;padding:3px;border-radius:999px;background:rgba(2,16,10,.35)}
.wv-step i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(236,248,241,.12);font-style:normal;color:var(--on-forest)}
.wv-step b{min-width:46px;text-align:center;font:600 .78rem/1 var(--f-mono);color:var(--mint-2)}
.wv-hours{position:relative;width:120px;height:8px;border-radius:4px;background:rgba(2,16,10,.35)}
.wv-hours i{position:absolute;left:28%;right:22%;top:0;bottom:0;border-radius:4px;background:var(--mint-2);transition:left .8s var(--ease),right .8s var(--ease)}
.wr-row.is-on .wv-hours i{left:20%;right:30%}
.wv-rec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.wv-who{grid-column:1/-1;display:flex;align-items:center;gap:8px;font-size:.84rem;color:var(--on-forest)}
.wv-f{display:grid;gap:3px;padding:7px 8px;border-radius:10px;background:rgba(2,16,10,.3)}
.wv-f small{font:500 .58rem/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--on-forest-2)}
.wv-f b{font-size:.76rem;color:var(--mint-2);clip-path:inset(0 100% 0 0);transition:clip-path .6s var(--ease)}
.wr-row.is-on .wv-f b{clip-path:inset(0 0 0 0)}
.wr-row.is-on .wv-f:nth-child(3) b{transition-delay:.25s}.wr-row.is-on .wv-f:nth-child(4) b{transition-delay:.5s}
.wv-dash{display:grid;gap:8px}
.wv-live{display:inline-flex;align-items:center;gap:6px;font:500 .66rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-forest-2)}
.wv-live i{width:7px;height:7px;border-radius:50%;background:var(--mint-2)}
.wv-bars{display:flex;align-items:flex-end;gap:6px;height:46px}
.wv-bars i{flex:1;height:calc(var(--h) * 40%);border-radius:4px 4px 2px 2px;background:linear-gradient(to top,var(--forest-3),var(--mint-2));transition:height .8s var(--ease)}
.wr-row.is-on .wv-bars i{height:calc(var(--h) * 100%)}
.wr-row.is-on .wv-bars i:nth-child(2n){transition-delay:.1s}
/* our software: a roomy list of dialers on a mint -> lavender rail, one calm stage beside it */
.lvw--list{grid-template-columns:minmax(280px,.78fr) minmax(0,1.5fr);gap:clamp(24px,4vw,64px);margin-top:clamp(28px,3.6vw,52px);align-items:start}
.dl-side{position:relative;display:grid;gap:18px;padding-left:30px}
.dl-side::before{content:"";position:absolute;left:6px;top:8px;bottom:8px;width:4px;border-radius:4px;background:linear-gradient(var(--mint-2),var(--lav-2))}
.dl-end{display:inline-flex;align-items:center;gap:8px;margin:0;font:500 .7rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lvw--list .lvw-tabs{display:grid;gap:6px}
.lvw--list .lvw-tabs button{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:14px;padding:16px 18px;border:1px solid transparent;border-radius:18px;background:none;color:var(--ink-2);text-align:left;font:600 1.02rem/1.25 var(--f-display);letter-spacing:-.01em;white-space:normal;transition:background-color .25s,border-color .25s,color .25s}
.lvw--list .lvw-tabs button::before{content:"";position:absolute;left:-31px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--paper);border:3px solid var(--dc);transform:scale(0);transition:transform .3s var(--ease)}
.lvw--list .lvw-tabs button:hover{background:var(--paper-2);color:var(--ink)}
.lvw--list .lvw-tabs button[aria-selected="true"]{background:var(--paper-2);border-color:var(--line);color:var(--ink)}
.lvw--list .lvw-tabs button[aria-selected="true"]::before{transform:scale(1)}
.lvw--list .lvw-tabs button[aria-selected="true"] .st--conn{background:var(--good-bg);color:var(--good)}
.lvw--list .lvw-tabs button[aria-selected="true"] .st--q{background:transparent;color:var(--ink-3)}
.dt-n{font:500 .72rem/1 var(--f-mono);color:var(--ink-3)}
.dt-name{display:grid;gap:8px;min-width:0}
.dt-name .pace{height:11px}
.lvw--list .lvw-panel{grid-template-columns:1fr;gap:22px;padding:clamp(24px,3.2vw,48px);border-radius:28px;background:var(--paper-2)}
.lvw--list .lvw-info{gap:12px}
.lvw--list .lvw-info h3{font-size:clamp(1.7rem,1.2rem + 1.3vw,2.4rem);letter-spacing:-.03em}
.lvw--list .lvw-info > p{max-width:52ch;font-size:1.05rem;line-height:1.6}
.lvw--list .lv{padding:clamp(16px,2vw,24px);gap:10px}
.lvw--list .lv-legend{margin:0;font-size:.78rem}
.lvw-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--line)}
.lvw-facts div{display:grid;gap:6px;padding:16px 16px 0 0}
.lvw-facts div + div{padding-left:16px;border-left:1px solid var(--line)}
.lvw-facts dt{font:500 .66rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.lvw-facts dd{margin:0;font-weight:600;font-size:.94rem;line-height:1.4}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .pl,.ck-card,.wr{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .pl-rail i,.pl-tok,.pl-node,.pl-card,.ck-box,.ck-i,.ck-ring .ck-arc,.wr-vis,.wv-bar i,.wv-hours i,.wv-f b,.wv-bars i,.lvw--list .lvw-tabs button::before{transition:none!important}
}
@media (max-width:1100px){
  .wr-row{grid-template-columns:56px minmax(0,1fr) minmax(220px,260px)}
  .wr-d{grid-column:2;grid-row:2}
  .wr-vis{grid-column:3;grid-row:1/3}
}
@media (max-width:1000px){
  .lvw--list{grid-template-columns:1fr}
  .dl-side{padding-left:0}
  .dl-side::before,.dl-end{display:none}
  .lvw--list .lvw-tabs{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .lvw--list .lvw-tabs::-webkit-scrollbar{display:none}
  .lvw--list .lvw-tabs button{grid-template-columns:auto auto;padding:12px 14px;border-color:var(--line);font-size:.92rem;white-space:nowrap}
  .lvw--list .lvw-tabs button::before,.dt-n,.dt-name .pace{display:none}
  .pl{padding-top:0;padding-left:0}
  .pl-rail{left:28px;right:auto;top:28px;bottom:28px;width:4px;height:auto}
  .pl-rail i{width:100%;height:calc(var(--k) * 25%);transition:height .7s var(--ease)}
  .pl-tok{display:none}
  .pl-stages{grid-template-columns:1fr;gap:10px}
  .pl-st{grid-template-columns:58px minmax(0,1fr);justify-items:stretch;align-items:start;gap:14px}
  .pl-node{justify-self:center}
  .pl-st.is-on .pl-card{transform:none}
  .ck{grid-template-columns:1fr}
  .ck-copy{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .ck-copy > :not(.ck-ring){grid-column:1}
  .ck-ring{grid-column:2;grid-row:1/4;width:120px;height:120px}
}
@media (max-width:760px){
  .wr-row{grid-template-columns:44px minmax(0,1fr);gap:10px 14px}
  .wr-n{width:40px;height:40px}
  .wr-d,.wr-vis{grid-column:2;grid-row:auto}
  .wr-vis{opacity:1;transform:none}
  .lvw-facts{grid-template-columns:1fr}
  .lvw-facts div + div{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:14px}
}
@media (max-width:560px){
  .ck-copy{grid-template-columns:1fr}
  .ck-ring{grid-column:1;grid-row:auto;width:110px;height:110px}
  .ck-i{grid-template-columns:30px minmax(0,1fr);gap:10px;padding:14px}
  .ck-box{width:28px;height:28px;border-radius:9px;font-size:15px}
}
:root[data-mode="dark"] .dt-name .pace i.on{background:var(--mint-2)}

/* ===================== Power Dialer page (/dialers/power-dialer/) ===================== */
/* hero card: the next call is always ready */
.pwh{width:min(330px,82%)}
.pwh-now{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--paper-2)}
.pwh-now b{display:block;font-size:.86rem}.pwh-now small{font-size:.7rem;color:var(--ink-3)}
.pwh-next{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:4px 2px}
.pwh-next small{display:block;font:500 .62rem/1.2 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pwh-next b{font-size:.84rem}
.pwh-ring{position:relative;display:grid;place-items:center;width:38px;height:38px}
.pwh-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.pwh-ring circle{fill:none;stroke:var(--paper-3);stroke-width:3.4}
.pwh-ring .pwh-arc{stroke:var(--forest-3);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--o,100);transition:stroke-dashoffset .9s linear}
:root[data-mode="dark"] .pwh-ring .pwh-arc{stroke:var(--mint-2)}
.pwh-ring b{font:600 .82rem/1 var(--f-mono)}
.pwh-q{display:flex;gap:4px}.pwh-q i{width:7px;height:7px;border-radius:50%;background:var(--paper-3)}.pwh-q i.on{background:var(--mint-2)}
/* how it works: loop ring */
.lp{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,64px);align-items:center}
.lp-copy{display:grid;gap:16px;justify-items:start}
.lp-ring{--s:clamp(360px,40vw,560px);position:relative;width:var(--s);height:var(--s);justify-self:center;--k:0}
.lp-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.lp-track{fill:none;stroke:var(--paper-3);stroke-width:10}
.lp-arc{fill:none;stroke:var(--mint-2);stroke-width:10;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--ao,100)}
.lp-lap{fill:none;stroke:var(--mint-2);stroke-width:10;opacity:0}
.lp-ring.is-lap .lp-lap{animation:lplap .9s ease-out}
@keyframes lplap{0%{opacity:.9;stroke-width:10}100%{opacity:0;stroke-width:26}}
.lp-orb,.lp-li{position:absolute;left:50%;top:50%;width:0;height:0}
.lp-orb{z-index:2;transform:rotate(var(--oa,-90deg)) translateX(calc(var(--s) * .425)) rotate(calc(-1 * var(--oa,-90deg)))}
.lp-ring.is-jump .lp-orb{transition:transform .6s var(--ease)}
.lp-ring.is-jump .lp-arc{transition:stroke-dashoffset .6s var(--ease)}
.lp-orb i{position:absolute;left:-10px;top:-10px;width:20px;height:20px;border-radius:50%;background:var(--forest-3);box-shadow:0 0 0 6px color-mix(in srgb,var(--mint-2) 45%,transparent),0 0 22px 4px color-mix(in srgb,var(--mint-2) 55%,transparent)}
:root[data-mode="dark"] .lp-orb i{background:var(--mint-2)}
.lp-ring.is-moving .lp-orb i{animation:lporb .5s ease-in-out infinite alternate}
@keyframes lporb{to{box-shadow:0 0 0 9px color-mix(in srgb,var(--mint-2) 30%,transparent),0 0 30px 6px color-mix(in srgb,var(--mint-2) 60%,transparent)}}
.lp-nodes{list-style:none;margin:0;padding:0}
.lp-li{z-index:3;transform:rotate(var(--a)) translateX(calc(var(--s) * .425)) rotate(calc(-1 * var(--a)))}
.lp-node{position:absolute;left:0;top:0;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:600 .9rem/1 var(--f-display);white-space:nowrap;box-shadow:var(--shadow-s);cursor:pointer;transition:background-color .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.lp-node:hover{border-color:var(--forest-3)}
.lp-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper-2);font-size:15px;transition:background-color .3s,color .3s}
.lp-node.is-on{background:var(--btn);color:var(--btn-fg);border-color:transparent;transform:translate(-50%,-50%) scale(1.06)}
.lp-node.is-on .lp-ic{background:var(--mint-2);color:#062116}
.lp-node.is-next{border-color:color-mix(in srgb,var(--mint-2) 70%,var(--line))}
.lp-node.is-next .lp-ic{background:color-mix(in srgb,var(--mint-2) 30%,var(--paper-2))}
.lp-mob{display:none}
.lp-core{position:absolute;left:50%;top:50%;width:calc(var(--s) * .56);height:calc(var(--s) * .56);transform:translate(-50%,-50%);display:grid;border-radius:50%;background:var(--paper-2)}
.lp-pane{grid-area:1/1;display:grid;align-content:center;justify-items:center;gap:10px;padding:0 9%;text-align:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s,transform .4s var(--ease),visibility 0s .4s}
.lp-pane.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .45s,transform .45s var(--ease)}
.lp-k{font:500 .66rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.lp-pane h3{font:600 clamp(1.3rem,1rem + .9vw,1.8rem)/1.1 var(--f-display);letter-spacing:-.025em}
.lp-pane p{font-size:clamp(.84rem,.78rem + .2vw,.95rem);line-height:1.5;color:var(--ink-2)}
.lp-chip{padding:6px 12px;border-radius:999px;background:var(--mint);color:var(--on-mint);font:500 .7rem/1.2 var(--f-mono)}
/* inside the dialer: control console */
.pc-b{background:linear-gradient(180deg,var(--paper),var(--paper-2))}
.pcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(20px,3vw,36px)}
.pc{display:grid;grid-template-rows:auto 1fr;gap:18px;padding:clamp(18px,2vw,26px);border-radius:26px;background:var(--paper);border:1px solid var(--line);box-shadow:0 1px 2px rgba(11,31,23,.04);min-width:0}
.pc-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.pc-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--forest);color:var(--mint-2);font-size:19px}
.pc-head h3{font:600 1.15rem/1.2 var(--f-display);letter-spacing:-.012em}
.pc-head p{margin-top:4px;font-size:.92rem;line-height:1.55;color:var(--ink-2)}
.pc-ui{padding:16px;border-radius:18px;background:var(--paper-2);min-width:0}
.pq-sort,.pp-step{display:inline-flex;gap:3px;padding:3px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.pq-sort button{border:0;background:none;padding:7px 12px;border-radius:999px;font:600 .78rem/1 var(--f-body);color:var(--ink-3);cursor:pointer}
.pq-sort button[aria-pressed="true"]{background:var(--btn);color:var(--btn-fg)}
.pq-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.pq-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--paper);font-size:.84rem}
.pq-row:first-child{box-shadow:inset 3px 0 0 var(--mint-2)}
.pq-tags{display:flex;gap:4px}
.pq-tags em{font:500 .64rem/1 var(--f-mono);font-style:normal;padding:5px 7px;border-radius:999px;background:var(--paper-2);color:var(--ink-3);transition:background-color .3s,color .3s}
.pq-list[data-k="priority"] em[data-k="priority"],.pq-list[data-k="status"] em[data-k="status"],.pq-list[data-k="source"] em[data-k="source"]{background:var(--mint);color:var(--on-mint)}
.pp{display:grid;gap:16px}
.pp .rf output{background:var(--paper)}
.pp-ret{display:flex;align-items:center;justify-content:space-between;gap:12px;font-weight:600;font-size:.95rem}
.pp-step button{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:50%;background:var(--paper-2);color:var(--ink);font-size:1rem;cursor:pointer}
.pp-step button:hover{background:var(--mint-3)}
.pp-step b{min-width:28px;display:grid;place-items:center;font:600 .9rem/1 var(--f-mono)}
.pp-sum{padding:10px 12px;border-radius:12px;background:var(--paper);font-size:.84rem;color:var(--ink-2)}
.ps{display:grid;gap:10px}
.ps-who{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px}
.ps-who b{display:block;font-size:.88rem}.ps-who small{font-size:.72rem;color:var(--ink-3)}
.ps-hist{list-style:none;margin:0;padding:0 0 0 14px;display:grid;gap:8px;border-left:2px solid var(--line)}
.ps-hist li{font-size:.84rem;color:var(--ink-2)}
.ps-hist small{display:block;font:500 .62rem/1.2 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ps-now{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:12px;background:var(--paper)}
.ps-now small{display:block;font:500 .62rem/1.2 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ps-now b{font-size:.86rem}
.ps-st{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--warn-bg);color:var(--warn);font-size:.74rem;font-weight:600;transition:background-color .3s,color .3s}
.ps-st em{font-style:normal}
.ps.is-saved .ps-st{background:var(--good-bg);color:var(--good)}
.pt-tags{display:flex;flex-wrap:wrap;gap:6px}
.pc-tag{border:1px solid var(--line);background:var(--paper);padding:8px 12px;border-radius:999px;font:600 .8rem/1 var(--f-body);color:var(--ink);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.pc-tag:hover{border-color:var(--forest-3)}
.pc-tag[aria-pressed="true"]{background:var(--btn);color:var(--btn-fg);border-color:transparent}
.pt-k{margin:14px 0 8px;font:500 .64rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.pt-bars{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pt-bars li{display:grid;grid-template-columns:110px minmax(0,1fr) 28px;align-items:center;gap:10px;font-size:.78rem;color:var(--ink-2)}
.pt-bars i{height:8px;width:var(--w);min-width:6px;border-radius:4px;background:linear-gradient(90deg,var(--mint-2),var(--lav-2));transition:width .5s var(--ease)}
.pt-bars b{font:600 .76rem/1 var(--f-mono);text-align:right;color:var(--ink)}
/* why power dialing: steady rhythm line + four pillars */
.rh{position:relative;margin-top:clamp(20px,3vw,36px)}
.rh-svg{display:block;width:100%;height:auto;overflow:visible}
.rh-base{fill:none;stroke:rgba(236,248,241,.12);stroke-width:3;stroke-linejoin:round}
.rh-draw{fill:none;stroke:var(--mint-2);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.rh.in .rh-draw{animation:rh-draw 2.4s var(--ease) forwards}
@keyframes rh-draw{to{stroke-dashoffset:0}}
.rh-peak{fill:var(--forest);stroke:var(--mint-2);stroke-width:3;transform-box:fill-box;transform-origin:center;transition:fill .3s,transform .3s var(--ease)}
.rh-peak.is-on{fill:var(--mint-2);transform:scale(1.35)}
.rh-cols{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vw,28px)}
.rh-col{display:grid;align-content:start;justify-items:center;gap:10px;padding:22px 18px 24px;border-radius:24px;text-align:center;cursor:default;outline:none;transition:background-color .35s}
.rh-col.is-on,.rh-col:hover{background:rgba(236,248,241,.07)}
.rh-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:rgba(236,248,241,.08);color:var(--mint-2);font-size:22px;transition:background-color .35s,color .35s}
.rh-col.is-on .rh-ic{background:var(--mint-2);color:#062116}
.rh-n{font:500 .7rem/1 var(--f-mono);letter-spacing:.08em;color:var(--on-forest-2)}
.rh-col h3{font:600 clamp(1.2rem,1rem + .6vw,1.5rem)/1.15 var(--f-display);letter-spacing:-.02em;color:var(--on-forest)}
.rh-col p{font-size:.94rem;line-height:1.6;color:var(--on-forest-2)}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .lp-ring,.pcs,.rh-cols{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .lp-arc,.lp-orb,.lp-node,.lp-pane,.lp-ring.is-jump .lp-orb,.lp-ring.is-jump .lp-arc,.pwh-ring .pwh-arc,.pt-bars i,.rh-peak{transition:none!important}
  .rh-draw{stroke-dashoffset:0;animation:none!important}
  .lp-ring.is-moving .lp-orb i,.lp-ring.is-lap .lp-lap{animation:none!important}
}
@media (max-width:1100px){
  .lp{grid-template-columns:1fr}
  .lp-copy{justify-items:start}
}
@media (max-width:1000px){
  .pcs{grid-template-columns:1fr}
  .rh-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rh-svg{display:none}
}
@media (max-width:760px){
  .lp-ring{--s:auto;width:auto;height:auto}
  .lp-svg,.lp-orb,.lp-core{display:none}
  .lp-nodes{display:grid;gap:10px;padding-left:22px;border-left:3px solid var(--mint-2)}
  .lp-li{position:static;width:auto;height:auto;transform:none}
  .lp-node{position:static;transform:none!important;box-shadow:none}
  .lp-mob{display:block;margin:8px 0 6px 4px;font-size:.94rem;line-height:1.55;color:var(--ink-2)}
  .pq-row{grid-template-columns:auto minmax(0,1fr)}
  .pq-tags{grid-column:1/-1}
  .pt-bars li{grid-template-columns:90px minmax(0,1fr) 24px}
}
@media (max-width:560px){
  .rh-cols{grid-template-columns:1fr}
  .rh-col{justify-items:start;text-align:left}
}

/* ===================== Click-to-Call page (/dialers/click-to-call/) ===================== */
/* hero card: a pointer clicks the number, the call rings, the contact's details open */
.cth{width:min(330px,82%)}
.cth-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;padding:10px;border-radius:14px;background:var(--paper-2)}
.cth-row b{display:block;font-size:.86rem}.cth-row small{font-size:.7rem;color:var(--ink-3)}
.cth-num{grid-column:1/-1;position:relative;justify-self:start;display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font:500 .8rem/1 var(--f-mono);color:var(--forest-3);transition:background-color .25s,color .25s,transform .2s,box-shadow .3s,border-color .25s}
:root[data-mode="dark"] .cth-num{color:var(--mint-2)}
.cth-num .ic{font-size:13px}
.cth.is-hover .cth-num{box-shadow:0 0 0 4px color-mix(in srgb,var(--mint-2) 35%,transparent)}
.cth.is-click .cth-num,.cth.is-call .cth-num{background:var(--btn);color:var(--btn-fg);border-color:transparent}
.cth.is-click .cth-num{transform:scale(.94)}
.cth-cur{position:absolute;left:calc(100% + 46px);top:calc(100% + 26px);font-size:20px;line-height:0;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));transition:left .75s var(--ease),top .75s var(--ease),opacity .3s}
.cth-cur .ic,.ac-cur .ic{fill:#fff;stroke:#0B1F17;stroke-width:1.6}
.cth.is-hover .cth-cur,.cth.is-click .cth-cur{left:60%;top:52%}
.cth.is-call .cth-cur{opacity:0}
.cth-det{display:grid;gap:6px;max-height:0;opacity:0;overflow:hidden;transition:max-height .5s var(--ease),opacity .4s}
.cth.is-call .cth-det{max-height:120px;opacity:1}
.cth-det p{display:flex;justify-content:space-between;gap:12px;font-size:.76rem}
.cth-det small{color:var(--ink-3);white-space:nowrap}.cth-det b{font-weight:600;text-align:right}

/* where it lives: workspace window with five surfaces */
.wl-wrap{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(28px,4.5vw,64px);align-items:center}
.wl-copy{display:grid;gap:16px;justify-items:start}
.wl-hint{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:8px 14px;border-radius:999px;background:var(--paper-2);font:500 .76rem/1 var(--f-mono);color:var(--ink-2)}
.wl-hint .ic{color:var(--forest-3);font-size:15px}
:root[data-mode="dark"] .wl-hint .ic{color:var(--mint-2)}
.wl{border:1px solid var(--line);border-radius:24px;background:var(--paper);overflow:hidden;box-shadow:var(--shadow-s)}
.wl-bar{display:flex;align-items:center;gap:6px;height:40px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--paper-2);font:500 .7rem/1 var(--f-mono);color:var(--ink-3)}
.wl-bar i{width:9px;height:9px;border-radius:50%;background:var(--paper-3)}
.wl-bar span{margin-left:10px}
.wl-body{display:grid;grid-template-columns:224px minmax(0,1fr);min-height:430px}
.wl-nav{display:grid;align-content:start;gap:4px;padding:14px;border-right:1px solid var(--line);background:color-mix(in srgb,var(--paper-2) 55%,var(--paper))}
.wl-tab{position:relative;display:flex;align-items:center;gap:10px;padding:10px 12px;white-space:nowrap;border:0;border-radius:12px;background:none;color:var(--ink-2);font:500 .92rem/1.2 var(--f-body);text-align:left;cursor:pointer;overflow:hidden;transition:background-color .25s,color .25s,box-shadow .25s}
.wl-tab:hover{background:var(--paper-2);color:var(--ink)}
.wl-tab.is-on{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:var(--shadow-s)}
.wl-tab:focus-visible{outline:2px solid var(--forest-3);outline-offset:2px}
.wl-tab::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--mint-2);transform:scaleX(0);transform-origin:left}
.wl.is-run .wl-tab.is-on::after{animation:wlprog var(--wl-step,5s) linear forwards}
@keyframes wlprog{to{transform:scaleX(1)}}
.wl-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--paper-3);color:var(--ink-2);font-size:15px;flex:none;transition:background-color .25s,color .25s}
.wl-tab.is-on .wl-ic{background:var(--mint);color:var(--on-mint)}
.wl-stage{position:relative;display:grid;padding:clamp(18px,2.6vw,34px)}
.wl-pane{grid-area:1/1;display:grid;align-content:start;gap:18px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s,transform .4s var(--ease),visibility 0s .3s}
.wl-pane.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .4s,transform .45s var(--ease)}
.wl-head h3{font:600 clamp(1.2rem,1rem + .6vw,1.5rem)/1.15 var(--f-display);letter-spacing:-.02em}
.wl-head p{margin-top:6px;max-width:58ch;color:var(--ink-2);line-height:1.55}
.wl-mock{display:grid;gap:10px;padding:16px;border-radius:18px;background:var(--paper-2)}
.wl-prof{display:flex;align-items:center;gap:12px;padding:2px 2px 6px}.wl-prof b{display:block}.wl-prof small{font-size:.78rem;color:var(--ink-3)}
.wl-fields{display:grid;gap:8px;margin:0}
.wl-fields div{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px;min-height:46px;padding:7px 10px;border-radius:12px;background:var(--paper)}
.wl-fields dt{font:500 .66rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.wl-fields dd{margin:0;font-size:.86rem}
.wl-num{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--forest-3);font:500 .8rem/1 var(--f-mono);white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,box-shadow .3s,transform .15s,border-color .2s}
:root[data-mode="dark"] .wl-num{color:var(--mint-2)}
.wl-num .ic{font-size:13px}
.wl-num:hover{background:var(--mint-3);border-color:transparent}
.wl-num:focus-visible{outline:2px solid var(--forest-3);outline-offset:2px}
.wl-num.is-press,:root[data-mode="dark"] .wl-num.is-press{transform:scale(.94);background:var(--btn);color:var(--btn-fg);border-color:transparent;box-shadow:0 0 0 5px color-mix(in srgb,var(--mint-2) 40%,transparent)}
.wl-cap{font:500 .66rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);padding:2px 2px 4px}
.wl-rows{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wl-rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:46px;padding:7px 10px;border-radius:12px;background:var(--paper)}
.wl-rows b{font-size:.86rem;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-rows em{font-style:normal;font-size:.74rem;color:var(--ink-3);white-space:nowrap}
.wl-act{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:12px;background:var(--good-bg);color:var(--good);font-size:.8rem;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--ease)}
.wl-act.is-on{opacity:1;transform:none}
.wl-search{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;border-radius:12px;background:var(--paper);border:1px solid var(--line);font-size:.92rem}
.wl-search .ic{color:var(--ink-3)}
.wl-caret{width:1.5px;height:18px;margin-left:-6px;background:var(--ink);animation:wlcar 1s steps(1) infinite}
@keyframes wlcar{50%{opacity:0}}
.wl-toast{position:absolute;right:clamp(14px,2.2vw,30px);bottom:clamp(14px,2.2vw,28px);display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);font-size:.82rem;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.wl-toast.is-on{opacity:1;transform:none}
.wl-toast em{font:500 .78rem/1 var(--f-mono);font-style:normal;color:var(--ink-2)}

/* after the click: five steps across the top, one call builds up in the console below */
.ac{display:grid;gap:clamp(22px,3vw,34px);margin-top:clamp(24px,3vw,40px)}
.ac-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.ac-st{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding:16px 16px 14px;border-radius:20px;background:var(--paper-2);border:1px solid transparent;cursor:pointer;outline:none;transition:background-color .5s,border-color .5s,box-shadow .5s,transform .6s var(--ease)}
.ac-st:hover{border-color:var(--line)}
.ac-st.is-on{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow);transform:translateY(-4px)}
.ac-st:focus-visible{outline:2px solid var(--forest-3);outline-offset:2px}
.ac-dot{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--paper);border:2px solid var(--paper-3);font:600 .8rem/1 var(--f-mono);color:var(--ink-3);transition:background-color .5s,border-color .5s,color .5s}
.ac-dot .ic{display:none;font-size:15px}
.ac-st.is-done .ac-dot,.ac-st.is-on .ac-dot{background:var(--mint-2);border-color:var(--mint-2);color:#062116}
.ac-st.is-done .ac-dot b{display:none}
.ac-st.is-done .ac-dot .ic{display:block}
.ac-tx{display:grid;align-content:start;gap:6px}
.ac-when{justify-self:start;padding:4px 9px;border-radius:999px;background:var(--lav-3);color:color-mix(in srgb,var(--lav-2) 65%,var(--ink));font:500 .64rem/1.2 var(--f-mono);letter-spacing:.04em;white-space:nowrap}
.ac-st h3{font:600 1.02rem/1.2 var(--f-display);letter-spacing:-.01em}
.ac-st p{font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.ac-bar{display:block;height:3px;border-radius:3px;background:var(--paper-3);overflow:hidden}
.ac-bar i{display:block;height:100%;width:100%;border-radius:inherit;background:var(--mint-2);transform-origin:left;transform:scaleX(var(--f,0))}
.ac-st.is-done .ac-bar i{transform:none}
/* the console */
.acc{max-width:980px;width:100%;justify-self:center;border-radius:26px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden}
.acc-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper-2)}
.acc-who b{display:block;font-size:.95rem}.acc-who small{font-size:.76rem;color:var(--ink-3)}
.acc-t{font:500 .84rem/1 var(--f-mono);font-style:normal;color:var(--ink-2);font-variant-numeric:tabular-nums}
.acc-body{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-areas:"prof notes" "prof log" "next next";gap:12px;padding:18px;min-height:330px}
.acc-blk{border-radius:18px;background:var(--paper-2);padding:14px 16px;opacity:0;transform:translateY(14px) scale(.98);transition:opacity .9s ease,transform 1.1s var(--ease)}
.acc.s1 .acc-prof,.acc.s2 .acc-notes,.acc.s3 .acc-log,.acc.s4 .acc-next{opacity:1;transform:none}
.acc-prof{grid-area:prof}.acc-notes{grid-area:notes}.acc-log{grid-area:log}
.acc-next{grid-area:next;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;background:var(--mint-3)}
.acc-k{display:flex;align-items:center;gap:7px;margin-bottom:10px;font:500 .66rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.acc-k .ic{font-size:13px;color:var(--forest-3)}
:root[data-mode="dark"] .acc-k .ic{color:var(--mint-2)}
.acc-prof ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.acc-prof li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px;padding:9px 10px;border-radius:12px;background:var(--paper);font-size:.84rem}
.acc-prof li small{font:500 .68rem/1.4 var(--f-mono);color:var(--ink-3)}
.acc-type{min-height:3.1em;font-size:.92rem;line-height:1.55;color:var(--ink)}
.acc-caret{display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--ink);animation:wlcar 1s steps(1) infinite}
.acc:not(.typing) .acc-caret{display:none}
.acc-saved{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 10px;border-radius:999px;background:var(--good-bg);color:var(--good);font-size:.74rem;font-weight:600;opacity:0;transition:opacity .6s}
.acc.saved .acc-saved{opacity:1}
.acc-cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.acc-cells span{display:grid;gap:4px;padding:10px;border-radius:12px;background:var(--paper)}
.acc-cells small{font:500 .64rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.acc-cells b{font-size:.92rem}
.acc-cal{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--btn);color:var(--btn-fg);font-size:18px}
.acc-next b{display:block;font-size:.92rem}.acc-next small{font-size:.76rem;color:var(--ink-2)}
.acc-dial{position:absolute;inset:0;z-index:2;display:grid;place-content:center;justify-items:center;gap:18px;background:var(--paper);transition:opacity .8s ease,visibility 0s .8s}
.acc.s1 .acc-dial{opacity:0;visibility:hidden}
.acc-dial p{font-size:.9rem;color:var(--ink-2)}
.acc-ring{position:relative;display:grid;place-items:center;width:150px;height:150px}
.acc-ring b{position:relative;z-index:1;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--btn);color:var(--btn-fg);font-size:26px;box-shadow:var(--shadow)}
.acc-ring i{position:absolute;inset:43px;border-radius:50%;border:2px solid var(--mint-2);opacity:0;animation:accring 2.4s ease-out infinite}
.acc-ring i:nth-child(2){animation-delay:.8s}.acc-ring i:nth-child(3){animation-delay:1.6s}
@keyframes accring{0%{opacity:.85;transform:scale(1)}100%{opacity:0;transform:scale(2.3)}}

/* daily use: one sky in a frame, four tall glass panels, the sun crosses it slowly */
#daily-use .sec-head--center{max-width:780px}
.dy{position:relative;margin-top:clamp(24px,3vw,40px);border-radius:32px;overflow:hidden;isolation:isolate;border:1px solid var(--line);
  --st:#F9CFA8;--sb:#FBE9D9;--h1:#7FD8A8;--h2:#A9E6C3;--h3:#CDEFD9;--night:0;background:linear-gradient(180deg,var(--st),var(--sb))}
.dy-sky{position:absolute;inset:0;z-index:0;pointer-events:none}
.dy-hills{position:absolute;left:0;right:0;bottom:0;width:100%;height:44%}
.dy-h1{fill:var(--h1)}.dy-h2{fill:var(--h2)}.dy-h3{fill:var(--h3)}
.dy-sun{position:absolute;left:0;top:0;width:92px;height:92px;margin:-46px 0 0 -46px;transform:translate(var(--sx,10%),var(--sy,60%));opacity:var(--so,1);will-change:transform}
.dy-sun::before{content:"";position:absolute;inset:-46px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,120,.55),rgba(255,214,120,0))}
.dy-sun i{position:absolute;inset:18px;border-radius:50%;background:radial-gradient(circle at 38% 36%,#FFF3C4,#F7C04F 62%,#EE9F45);box-shadow:0 0 40px 10px rgba(255,200,90,.45)}
.dy-moon{position:absolute;right:11%;top:9%;width:60px;height:60px;border-radius:50%;background:transparent;box-shadow:inset 15px -7px 0 0 #F7F2DA;
  filter:drop-shadow(0 0 16px rgba(247,242,218,.6));opacity:var(--mo,0);transform:translateY(calc((1 - var(--mo,0)) * 24px)) rotate(-18deg)}
.dy-stars{position:absolute;inset:0 0 40% 0;opacity:var(--night,0)}
.dy-stars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 6px 1px rgba(255,255,255,.7);animation:dytw 3.2s ease-in-out infinite;animation-delay:var(--d)}
@keyframes dytw{50%{opacity:.25}}
.dy-ps{position:relative;z-index:1;list-style:none;margin:0;padding:16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;min-height:clamp(520px,44vw,600px)}
.dy-p{position:relative;display:grid;grid-template-rows:auto 1fr auto;gap:12px;border-radius:24px;padding:12px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(7px) saturate(1.15);-webkit-backdrop-filter:blur(7px) saturate(1.15);cursor:pointer;outline:none;transition:background-color 1.2s ease,border-color 1.2s ease,box-shadow 1.2s ease,backdrop-filter 1.2s ease}
.dy-p.is-on{background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.9);box-shadow:0 0 0 3px color-mix(in srgb,var(--mint-2) 70%,transparent),0 24px 60px -28px rgba(8,30,21,.55);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0)}
.dy-p:focus-visible{outline:2px solid #fff;outline-offset:3px}
.dy-time{align-self:start;justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.86);color:#0B1F17;font:600 .72rem/1 var(--f-mono);box-shadow:0 4px 14px -6px rgba(0,0,0,.25)}
.dy-time .ic{font-size:12px}
.dy-card{display:grid;gap:6px;padding:16px;border-radius:18px;background:color-mix(in srgb,var(--paper) 94%,transparent);box-shadow:0 12px 30px -18px rgba(8,30,21,.5);transform:translateY(6px);transition:transform 1s var(--ease),box-shadow 1s}
.dy-p.is-on .dy-card{transform:none;box-shadow:0 18px 40px -20px rgba(8,30,21,.6)}
.dy-card h3{font:600 1.12rem/1.2 var(--f-display);letter-spacing:-.01em}
.dy-card > p{font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.dy-task{display:grid;gap:7px;margin-top:6px;padding:10px;border-radius:14px;background:var(--paper-2)}
.dy-k{font:500 .6rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.dy-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px}
.dy-who{min-width:0}
.dy-who b{display:block;font-size:.78rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dy-who small{display:block;font-size:.66rem;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dy-btn{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:.68rem;font-weight:600;white-space:nowrap;transition:transform .2s,background-color .5s,color .5s,box-shadow .4s}
.dy-btn em{font-style:normal}
.dy-btn .ic{font-size:12px}
.dy-btn.is-press{transform:scale(.92);box-shadow:0 0 0 5px color-mix(in srgb,var(--mint-2) 40%,transparent)}
.dy-btn.is-done{background:var(--good-bg);color:var(--good)}
.dy-btn.is-done .ic{animation:dyring .9s ease-in-out infinite}
.dy-p:last-child .dy-btn.is-done .ic{animation:none}
@keyframes dyring{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}

/* daily use: clouds and the little scene above each card */
.dy-clouds{position:absolute;inset:0;opacity:calc(1 - var(--night,0) * .9)}
.dy-cl{position:absolute;top:var(--y);left:-260px;width:150px;height:44px;border-radius:999px;background:rgba(255,255,255,.72);transform:scale(var(--s));transform-origin:left;
  animation:dycl var(--t) linear infinite;animation-delay:var(--d);filter:blur(.5px)}
.dy-cl::before,.dy-cl::after{content:"";position:absolute;border-radius:50%;background:inherit}
.dy-cl::before{width:60px;height:60px;left:24px;top:-28px}
.dy-cl::after{width:78px;height:78px;left:60px;top:-40px}
@keyframes dycl{to{left:calc(100% + 40px)}}
.dy-sc{align-self:center;display:grid;gap:8px;color:#0B1F17;opacity:.7;transform:translateY(4px) scale(.98);transition:opacity 1s ease,transform 1s var(--ease)}
.dy-p.is-on .dy-sc{opacity:1;transform:none}
.dy-n,.dy-mail,.dy-list,.dy-cal{border-radius:14px;background:rgba(255,255,255,.84);box-shadow:0 12px 26px -16px rgba(8,30,21,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.dy-sc small{display:block;font-size:.66rem;color:#53625B}
.dy-sc b{display:block;font-size:.78rem;font-weight:600}
@keyframes dyfl{50%{transform:translateY(-4px)}}
@keyframes dyin{from{opacity:0;transform:translateY(12px) scale(.96)}}
/* morning: missed calls and an inquiry waiting */
.dy-n{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;padding:8px 10px;animation:dyfl 6s ease-in-out infinite;animation-delay:calc(var(--i) * -2s)}
.dy-n:nth-child(2){margin-left:14px}.dy-n:nth-child(3){margin-left:6px}
.dy-n-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#FBE3E0;color:#C2483C;font-size:13px}
.dy-n:nth-child(3) .dy-n-ic{background:#E6DEFB;color:#5B43B5}
.dy-p.is-on .dy-n{animation:dyin .8s var(--ease) both,dyfl 6s ease-in-out infinite;animation-delay:calc(var(--i) * .3s),calc(.8s + var(--i) * -2s)}
/* midday: the email that asks for a call */
.dy-mail{display:grid;gap:7px;padding:12px;animation:dyfl 7s ease-in-out infinite}
.dy-mail-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px}
.dy-mail-h .ic{color:#5B43B5;font-size:14px}
.dy-mail-h b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dy-mail-b{font-size:.8rem;line-height:1.45;color:#1E2D26;font-style:italic}
.dy-mail-f{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:7px;border-top:1px solid rgba(11,31,23,.1);font-size:.7rem;color:#53625B}
.dy-num{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:#DFF6E8;color:#0E3B2A;font:500 .66rem/1 var(--f-mono);white-space:nowrap}
.dy-num .ic{font-size:11px}
.dy-p.is-on .dy-num{animation:dynum 1.6s ease-in-out .8s 3}
@keyframes dynum{50%{box-shadow:0 0 0 5px rgba(127,216,168,.55);background:#9FE5BA}}
/* afternoon: renewals ticked off one by one */
.dy-list{padding:12px;animation:dyfl 6.5s ease-in-out infinite}
.dy-list-h{margin-bottom:8px;font:500 .6rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#53625B}
.dy-list ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.dy-list li{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px}
.dy-chk{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:2px solid rgba(11,31,23,.2);color:transparent;font-size:11px;transition:background-color .4s,border-color .4s,color .4s}
.dy-p:not(.is-on) .dy-list li:first-child .dy-chk{background:#7FD8A8;border-color:#7FD8A8;color:#062116}
.dy-p.is-on .dy-chk{animation:dychk .5s var(--ease) both;animation-delay:calc(1.2s + var(--i) * 1.1s)}
@keyframes dychk{from{background:transparent;border-color:rgba(11,31,23,.2);color:transparent;transform:scale(.7)}to{background:#7FD8A8;border-color:#7FD8A8;color:#062116;transform:none}}
/* day's end: tomorrow's callbacks */
.dy-cal{display:grid;gap:6px;padding:12px;animation:dyfl 7.5s ease-in-out infinite}
.dy-cal-h{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;margin-bottom:2px}
.dy-cal-h .ic{color:#0E3B2A;font-size:14px}
.dy-slot{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:8px;padding:6px 8px;border-radius:10px;background:#EEF7F1;border-left:3px solid #7FD8A8}
.dy-slot:nth-child(3){background:#F1ECFC;border-left-color:#A58BEA}
.dy-slot em{font:600 .66rem/1 var(--f-mono);font-style:normal;color:#0E3B2A}
.dy-p.is-on .dy-slot{animation:dyin .7s var(--ease) both;animation-delay:calc(.5s + var(--i) * .45s)}

/* setup and fit (forest board): one aligned 3-column grid */
.sf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:16px;margin-top:clamp(24px,3vw,40px)}
.sf-k{grid-column:1/-1;margin:0 0 12px 2px;font:500 .7rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-forest-2)}
.sf-k + .sf-steps{margin-bottom:28px}
.sf-steps,.sf-tiles{grid-column:1/-1;display:grid;grid-template-columns:subgrid;gap:16px}
@supports not (grid-template-columns:subgrid){.sf-steps,.sf-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.sf-steps{position:relative;list-style:none;margin:0;padding:52px 0 0;--p:0}
.sf-steps::before,.sf-steps::after{content:"";position:absolute;z-index:0;top:17px;left:38px;height:2px;border-radius:2px}
.sf-steps::before{width:calc((100% + 16px) * 2 / 3);background:rgba(236,248,241,.16)}
.sf-steps::after{width:calc((100% + 16px) * 2 / 3 * var(--p));background:var(--mint-2);transition:width 1.6s var(--ease)}
.sf-step{position:relative;z-index:1;display:grid;grid-template-rows:auto auto 1fr auto;row-gap:6px;padding:20px;border-radius:22px;background:rgba(236,248,241,.05);border:1px solid rgba(236,248,241,.1);transition:background-color .8s,border-color .8s}
.sf-step.is-on{background:rgba(236,248,241,.08);border-color:rgba(159,229,186,.35)}
.sf-node{position:absolute;left:20px;top:-52px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--forest);border:2px solid rgba(236,248,241,.25);color:var(--on-forest-2);font:600 .72rem/1 var(--f-mono);transition:background-color .6s,border-color .6s,color .6s}
.sf-node .ic{display:none;font-size:15px}
.sf-step.is-on .sf-node{background:var(--mint-2);border-color:var(--mint-2);color:#062116}
.sf-step.is-on .sf-node b{display:none}.sf-step.is-on .sf-node .ic{display:block}
.sf-step h3{margin-top:8px}
.sf-foot{align-self:end;display:flex;align-items:center;gap:10px;margin-top:12px;padding-top:14px;border-top:1px solid rgba(236,248,241,.1)}
.sf-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(236,248,241,.1);color:var(--mint-2);font-size:18px}
.sf-step h3,.sf-tile h3{font:600 1.08rem/1.2 var(--f-display);color:var(--on-forest)}
.sf-step p,.sf-tile p{font-size:.9rem;line-height:1.5;color:var(--on-forest-2)}
.sf-sw{position:relative;flex:none;width:44px;height:26px;border-radius:999px;background:rgba(236,248,241,.18);transition:background-color .5s}
.sf-sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .5s var(--ease)}
.sf-step.is-on .sf-sw{background:var(--mint-2)}
.sf-step.is-on .sf-sw i{transform:translateX(18px)}
.sf-st{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(159,229,186,.14);color:var(--mint-2);font:500 .7rem/1 var(--f-mono);opacity:0;transform:translateX(-6px);transition:opacity .5s,transform .5s var(--ease)}
.sf-step.is-on .sf-st{opacity:1;transform:none}
.sf-tile{display:grid;grid-template-rows:auto 1fr;border-radius:22px;background:rgba(236,248,241,.05);border:1px solid rgba(236,248,241,.1);overflow:hidden}
.sf-tx{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:6px;align-content:start;padding:18px 20px 20px}
.sf-tx .sf-ic{grid-row:1/3}
.sf-tx h3{align-self:center}
.sf-v{position:relative;height:150px;padding:16px;background:rgba(0,0,0,.2);border-bottom:1px solid rgba(236,248,241,.08);display:grid;align-content:center;gap:10px}
/* fit 1: typed digits (one wrong) vs one click */
.sf-lane{display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:34px}
.sf-lk{font:500 .6rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-forest-2)}
.sf-dg{display:flex;gap:2px}
.sf-dg i{display:grid;place-items:center;width:15px;height:22px;border-radius:5px;background:rgba(236,248,241,.12);color:var(--on-forest);font:500 .66rem/1 var(--f-mono);font-style:normal;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s,background-color .3s}
.sf-dg i.on{opacity:1;transform:none}
.sf-v--typo.err .sf-dg i.bad{background:#F2A49A;color:#3A0D08}
.sf-x,.sf-ok{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;font-size:.66rem;font-weight:600;white-space:nowrap;opacity:0;transform:scale(.9);transition:opacity .4s,transform .4s var(--ease)}
.sf-x{background:rgba(242,164,154,.18);color:#F2A49A}
.sf-ok{background:rgba(159,229,186,.18);color:var(--mint-2)}
.sf-v--typo.err .sf-x,.sf-v--typo.ok .sf-ok{opacity:1;transform:none}
.sf-pill{position:relative;justify-self:start;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:999px;background:rgba(236,248,241,.12);color:var(--on-forest);font:500 .7rem/1 var(--f-mono);white-space:nowrap;transition:background-color .3s,color .3s,transform .2s}
.sf-v--typo.press .sf-pill{transform:scale(.94)}
.sf-v--typo.press .sf-pill,.sf-v--typo.ok .sf-pill{background:var(--mint-2);color:#062116}
.sf-cur{position:absolute;right:-14px;bottom:-14px;font-size:17px;line-height:0;opacity:0;transform:translate(14px,10px);transition:opacity .4s,transform .7s var(--ease)}
.sf-cur .ic{fill:#fff;stroke:#0B1F17;stroke-width:1.6}
.sf-v--typo.aim .sf-cur{opacity:1;transform:none}
/* fit 2: one workspace with a live call bar */
.sf-wn{border-radius:12px;background:rgba(236,248,241,.08);overflow:hidden}
.sf-wn-bar{display:flex;gap:4px;padding:6px 8px;background:rgba(236,248,241,.06)}
.sf-wn-bar i{width:6px;height:6px;border-radius:50%;background:rgba(236,248,241,.25)}
.sf-wn-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:8px;padding:8px}
.sf-wn-c{display:grid;grid-template-columns:auto minmax(0,1fr);gap:5px 8px;align-items:center}
.sf-wn-c .av{grid-row:1/4}
.sf-wn-c b{height:5px;border-radius:3px;background:rgba(236,248,241,.3)}
.sf-wn-c b:nth-child(3){width:70%}.sf-wn-c b:nth-child(4){width:46%}
.sf-wn-call{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border-radius:10px;background:var(--mint-2);color:#062116}
.sf-wn-call em{font:600 .7rem/1 var(--f-mono);font-style:normal;font-variant-numeric:tabular-nums}
.sf-wave{display:flex;align-items:center;gap:2px;height:18px}
.sf-wave i{width:3px;height:100%;border-radius:2px;background:#062116;transform-origin:center;animation:sfwave 1.1s ease-in-out infinite}
.sf-wave i:nth-child(2){animation-delay:-.2s}.sf-wave i:nth-child(3){animation-delay:-.45s}.sf-wave i:nth-child(4){animation-delay:-.1s}
.sf-wave i:nth-child(5){animation-delay:-.6s}.sf-wave i:nth-child(6){animation-delay:-.3s}.sf-wave i:nth-child(7){animation-delay:-.75s}
@keyframes sfwave{0%,100%{transform:scaleY(.3)}50%{transform:scaleY(1)}}
.sf-cap{display:inline-flex;align-items:center;gap:6px;font:500 .62rem/1 var(--f-mono);color:var(--on-forest-2);text-transform:uppercase;letter-spacing:.06em}
.sf-cap .ic{color:var(--mint-2);font-size:12px}
/* fit 3: click calls counted beside the team's other calls */
.sf-v--bars{grid-template-columns:auto minmax(0,1fr);grid-template-rows:1fr auto;column-gap:16px;row-gap:8px;align-content:stretch}
.sf-cnt{display:grid;align-content:center;gap:2px}
.sf-cnt b{font:600 2rem/1 var(--f-display);color:var(--on-forest);font-variant-numeric:tabular-nums}
.sf-cnt small{max-width:9ch;font:500 .6rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-forest-2)}
.sf-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end;height:100%}
.sf-col{display:flex;flex-direction:column-reverse;gap:2px;height:100%;position:relative;padding-bottom:14px}
.sf-col i{display:block;border-radius:4px;transform-origin:bottom;transform:scaleY(.06);transition:transform 1.4s var(--ease),height 1.4s var(--ease)}
.sf-col i:first-of-type{height:var(--a);background:var(--mint-2)}
.sf-col i:last-of-type{height:var(--b);background:var(--lav-2)}
.sf-col small{position:absolute;left:0;right:0;bottom:0;text-align:center;font:500 .56rem/1 var(--f-mono);color:var(--on-forest-2)}
.sf-v--bars.in .sf-col i{transform:none}
.sf-leg{grid-column:1/-1;display:flex;align-items:center;gap:6px;font:500 .58rem/1 var(--f-mono);color:var(--on-forest-2);text-transform:uppercase;letter-spacing:.04em}
.sf-leg i{width:8px;height:8px;border-radius:2px;background:var(--mint-2)}
.sf-leg i:nth-of-type(2){margin-left:10px;background:var(--lav-2)}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .wl,.acc,.dy,.sf{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .cth-cur,.cth-det,.cth-num,.wl-pane,.wl-tab,.wl-act,.wl-toast,.ac-st,.acc-blk,.acc-dial,.dy-p,.dy-card,.dy-btn,.sf-step,.sf-sw i,.sf-st,.sf-steps::after,.sf-col i,.sf-dg i{transition:none!important}
  .wl-caret,.wl-tab::after,.acc-ring i,.acc-caret,.dy-stars i,.dy-btn .ic,.sf-wave i,.dy-cl,.dy-n,.dy-mail,.dy-list,.dy-cal,.dy-num,.dy-chk,.dy-slot{animation:none!important}
}
@media (max-width:1100px){
  .wl-wrap{grid-template-columns:1fr}
  .ac-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dy-ps{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}
  .dy-p{min-height:470px}
  .sf{grid-template-columns:1fr}
  .sf-steps,.sf-tiles{grid-template-columns:1fr}
  .sf-steps::before,.sf-steps::after{display:none}
  .sf-steps{padding-top:0}
  .sf-step{grid-template-columns:auto minmax(0,1fr);column-gap:12px}
  .sf-node{position:static;grid-row:1;grid-column:1}
  .sf-step .sf-ic{grid-row:1;grid-column:2}
  .sf-step h3,.sf-step p,.sf-foot{grid-column:1/-1}
}
@media (max-width:760px){
  .wl-body{grid-template-columns:1fr;min-height:0}
  .wl-nav{display:flex;overflow-x:auto;gap:6px;padding:10px;border-right:0;border-bottom:1px solid var(--line);scrollbar-width:none}
  .wl-nav::-webkit-scrollbar{display:none}
  .wl-tab{flex:none;padding:8px 12px 8px 8px}
  .wl-ic{width:28px;height:28px}
  .wl-stage{padding:18px 16px 84px}
  .wl-rows li{grid-template-columns:auto minmax(0,1fr) auto}
  .wl-rows li em{display:none}
  .wl-fields div{grid-template-columns:70px minmax(0,1fr)}
  .wl-toast{left:16px;right:16px;bottom:16px}
  .ac-steps{grid-template-columns:1fr 1fr}
  .acc-body{grid-template-columns:1fr;grid-template-areas:"prof" "notes" "log" "next";min-height:0}
  .acc-top{grid-template-columns:auto minmax(0,1fr) auto}
  .acc-t{display:none}
}
@media (max-width:560px){
  .ac-steps{grid-template-columns:1fr}
  .ac-st{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto}
  .ac-bar{grid-column:1/-1}
  .dy-ps{grid-template-columns:1fr;padding:12px}
  .dy-p{min-height:0;gap:14px}
  .dy-sc{max-width:320px}
  .acc-next{grid-template-columns:auto minmax(0,1fr)}
  .acc-next .st{grid-column:2;justify-self:start}
}

/* ===================== Predictive Dialer page (/dialers/predictive-dialer/) ===================== */
/* hero card: four lines ring at once, the live answer goes to a free agent */
.prh{width:min(330px,82%)}
.prh-lines{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.prh-l{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:12px;background:var(--paper-2);transition:opacity .4s,transform .4s var(--ease),background-color .4s}
.prh-l.is-out{opacity:.35;transform:translateX(8px)}
.prh-l.is-live{background:var(--mint-3)}
.prh-n{font:500 .76rem/1 var(--f-mono);font-variant-numeric:tabular-nums}
.prh-ag{display:flex;align-items:center;gap:8px;padding-top:4px}
.prh-ag small{margin-right:2px;font:500 .6rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.prh-a{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 3px;border-radius:999px;background:var(--paper-2);transition:background-color .4s,color .4s}
.prh-a em{font-size:.64rem;font-style:normal;font-weight:600;color:var(--ink-2)}
.prh-a.is-busy{background:var(--good-bg)}
.prh-a.is-busy em{color:var(--good)}

/* how pacing works: four photo steps, each with one small live widget; the active step moves along */
.pq{margin-top:clamp(28px,3vw,44px)}
.pq-rail{position:relative;height:2px;margin:0 0 22px;border-radius:2px;background:var(--paper-3);overflow:hidden}
.pq-rail i{position:absolute;inset:0;border-radius:inherit;background:var(--forest-3);transform-origin:left;transform:scaleX(var(--p,.12))}
:root[data-mode="dark"] .pq-rail i{background:var(--mint-2)}
.pq-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.5vw,22px)}
.pq-s{display:grid;align-content:start;gap:8px}
.pq-ph{position:relative;aspect-ratio:4/5;border-radius:26px;overflow:hidden;background:var(--paper-2);transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.pq-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 2.4s var(--ease)}
.pq-ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,16,11,0) 50%,rgba(4,16,11,.38))}
.pq-s.is-on .pq-ph{transform:translateY(-8px);box-shadow:0 34px 50px -32px rgba(11,31,23,.6)}
.pq-s.is-on .pq-ph img{transform:scale(1.05)}
.pq-n{display:flex;align-items:center;gap:12px;margin-top:16px;font:500 .72rem/1 var(--f-mono);letter-spacing:.08em;color:var(--ink-3);transition:color .5s}
.pq-n::after{content:"";flex:1;height:1px;background:var(--line)}
.pq-s.is-on .pq-n{color:var(--ink)}
.pq-s h3{font:600 clamp(1.1rem,1rem + .35vw,1.3rem)/1.2 var(--f-display);letter-spacing:-.015em}
.pq-s p{font-size:.92rem;line-height:1.55;color:var(--ink-2)}

.pq-w{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;padding:12px 14px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);color:var(--ink);transition:transform .8s var(--ease)}
.pq-s.is-on .pq-w{transform:translateY(-4px)}
/* 01 pace number + three lines ringing */
.pq-w--ratio{display:flex;align-items:center;gap:10px}
.pq-w--ratio b{font:600 2rem/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pq-w--ratio span{font:500 .58rem/1.35 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.pq-lines{display:flex;gap:4px;margin-left:auto}
.pq-lines em{width:9px;height:24px;border-radius:5px;background:color-mix(in srgb,var(--ink) 14%,transparent);animation:pqline 1.8s ease-in-out infinite}
.pq-lines em:nth-child(2){animation-delay:.3s}.pq-lines em:nth-child(3){animation-delay:.6s}
@keyframes pqline{0%,100%{background:color-mix(in srgb,var(--ink) 14%,transparent);box-shadow:none}35%{background:var(--mint-2);box-shadow:0 0 10px var(--mint-2)}}
/* 02 numbers being filtered */
.pq-w--filter{list-style:none;margin:0;display:grid;gap:5px;padding:10px 12px}
.pq-w--filter li{display:flex;align-items:center;justify-content:space-between;gap:8px;font:500 .74rem/1 var(--f-mono);font-variant-numeric:tabular-nums;transition:opacity .5s}
.pq-w--filter li span{transition:color .5s}
.pq-w--filter em{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:var(--paper-2);font:600 .62rem/1 var(--f-body);font-style:normal;color:var(--ink-2);transition:background-color .4s,color .4s}
.pq-w--filter em::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pq-w--filter li.is-ring em::before{animation:csblink 1s ease-in-out infinite}
.pq-w--filter li.is-dead{opacity:.45}
.pq-w--filter li.is-dead span{text-decoration:line-through}
.pq-w--filter li.is-live em{background:var(--btn);color:var(--btn-fg)}
@keyframes csblink{50%{opacity:.3}}
/* 03 a live answer reaches an agent */
.pq-w--match{display:flex;align-items:center;gap:12px}
.pq-av{position:relative;display:grid}
.pq-av .av{width:38px;height:38px;font-size:.7rem;transition:opacity .4s}
.pq-ring{position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--mint-2);animation:pqring 2s ease-out infinite}
@keyframes pqring{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.pq-w--match b{display:block;font-size:.9rem}
.pq-w--match small{display:block;margin-top:2px;font-size:.74rem;font-weight:600;color:var(--good);transition:color .4s}
.pq-w--match.is-wait small{color:var(--ink-3);font-weight:500}
/* 04 the pace follows the answer rate */
.pq-w--adj{display:grid;gap:6px}
.pq-w--adj svg{display:block;width:100%;height:34px;overflow:visible}
.pq-w--adj path{fill:none;stroke:var(--lav-2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;stroke-dasharray:1 2;stroke-dashoffset:0}
.pq-w--adj path.is-draw{animation:pqdraw 1.4s var(--ease) both}
@keyframes pqdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.pq-w--adj span{font:600 .64rem/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}

/* pacing controls: a bento of five tiles; the photo tile holds the pause switch */
.gb{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(300px,auto));gap:14px;margin-top:clamp(24px,3vw,40px)}
.gb-t{position:relative;display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:6px;padding:24px;border-radius:28px;background:var(--paper-2);border:1px solid var(--line);overflow:hidden}
.gb-t h3{font:600 1.15rem/1.2 var(--f-display);letter-spacing:-.01em}
.gb-t p{font-size:.9rem;line-height:1.5;color:var(--ink-2);max-width:36ch}
.gb-ctl{align-self:end;display:flex;align-items:center;gap:16px;margin-top:18px}
.gb-step{display:inline-flex;align-items:center;gap:4px;margin-left:auto;padding:4px;border-radius:999px;background:var(--paper);border:1px solid var(--line)}
.gb-step button{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:var(--paper-2);color:var(--ink);font-size:1.1rem;line-height:1;cursor:pointer;transition:background-color .25s}
.gb-step button:hover{background:var(--mint)}
.gb-step button:focus-visible,.gb-keys button:focus-visible,.gb-sw:focus-visible{outline:2px solid var(--forest-3);outline-offset:2px}
.gb-step b{min-width:22px;text-align:center;font:600 .9rem/1 var(--f-mono)}
/* photo tile */
.gb-t--photo{grid-row:1/3;display:flex;flex-direction:column;justify-content:flex-end;padding:0;min-height:560px;border:0;background:var(--forest)}
.gb-t--photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter 1s var(--ease),transform 1.6s var(--ease)}
.gb.is-paused .gb-t--photo > img{filter:grayscale(.65) brightness(.82);transform:scale(1.02)}
.gb-glass{position:relative;margin:14px;padding:18px 20px 20px;border-radius:22px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--shadow);display:grid;gap:6px}
.gb-run{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.gb-live{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--ink)}
.gb-live i{width:9px;height:9px;border-radius:50%;background:var(--good);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 20%,transparent);transition:background-color .4s,box-shadow .4s}
.gb.is-paused .gb-live i{background:#E0A43A;box-shadow:0 0 0 4px rgba(224,164,58,.22);animation:csblink 1.4s ease-in-out infinite}
.gb-sw{position:relative;flex:none;width:58px;height:32px;padding:0;border:0;border-radius:999px;background:var(--good);cursor:pointer;transition:background-color .35s}
.gb-sw i{position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.3);transform:translateX(26px);transition:transform .4s var(--ease)}
.gb-sw[aria-pressed="false"]{background:color-mix(in srgb,var(--ink) 25%,transparent)}
.gb-sw[aria-pressed="false"] i{transform:none}
/* max lines */
.gb-big{display:flex;align-items:center;gap:10px}
.gb-big b{font:600 3.8rem/.9 var(--f-display);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.gb-big small{font:500 .6rem/1.35 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.gb-bars{display:flex;align-items:flex-end;gap:7px;height:66px}
.gb-bars i{width:14px;height:100%;border-radius:7px;background:color-mix(in srgb,var(--ink) 10%,transparent);transition:background-color .35s}
.gb-bars i.on{background:var(--good);animation:gbbar 1.6s ease-in-out infinite;animation-delay:calc(var(--i) * .22s)}
@keyframes gbbar{0%,100%{opacity:1}45%{opacity:.45}}
.gb.is-paused .gb-bars i.on{animation:none;background:color-mix(in srgb,var(--good) 45%,transparent)}
/* calling hours */
.gb-day{align-self:end;display:grid;gap:8px;margin-top:34px}
.gb-track{position:relative;height:38px;border-radius:12px;background:linear-gradient(90deg,#26344D 0%,#5B6C8F 22%,#F3D7A6 40%,#FFF0CF 52%,#F6D3A0 66%,#6B6E97 82%,#26344D 100%);opacity:.95}
.gb-track::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.gb-win{position:absolute;top:-4px;bottom:-4px;left:var(--a,37.5%);right:calc(100% - var(--b,75%));border-radius:14px;border:2px solid var(--good);background:color-mix(in srgb,var(--good) 16%,transparent);transition:left .7s var(--ease),right .7s var(--ease)}
.gb-now{position:absolute;top:-8px;bottom:-8px;left:var(--n,50%);width:2px;margin-left:-1px;border-radius:2px;background:var(--ink)}
.gb-now em{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(var(--tx,-50%));transition:transform .4s var(--ease);padding:3px 7px;border-radius:999px;background:var(--ink);color:var(--paper);font:600 .6rem/1 var(--f-mono);font-style:normal;white-space:nowrap;font-variant-numeric:tabular-nums}
.gb-now.is-in{background:var(--good)}
.gb-now.is-in em{background:var(--good);color:#fff}
.gb-scale{display:flex;justify-content:space-between;font:500 .58rem/1 var(--f-mono);color:var(--ink-3)}
.gb-keys{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.gb-keys button{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink-2);font-size:.76rem;font-weight:600;cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.gb-keys button:hover{color:var(--ink)}
.gb-keys button[aria-pressed="true"]{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
/* retry logic */
.gb-ctl--retry{flex-direction:column;align-items:stretch;gap:14px}
.gb-ctl--retry .gb-step{align-self:flex-end}
.gb-path{position:relative;display:flex;align-items:center;justify-content:space-between;height:58px;padding:22px 4px 0}
.gb-path::before{content:"";position:absolute;left:10px;right:10px;top:40px;height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 10px)}
.gb-dot{position:relative;z-index:1;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--paper);border:2px solid color-mix(in srgb,var(--ink) 20%,transparent);font:600 .56rem/1 var(--f-mono);color:var(--ink-3);transition:background-color .35s,border-color .35s,color .35s}
.gb-dot.is-done{background:var(--lav);border-color:var(--lav-2);color:var(--on-lav)}
.gb-dot--end{width:auto;height:22px;padding:0 9px;border-radius:999px;font-size:.58rem;letter-spacing:.05em;text-transform:uppercase}
.gb-dot--end.is-done{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.gb-num{position:absolute;top:0;left:0;z-index:2;padding:4px 8px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font:600 .62rem/1 var(--f-mono);white-space:nowrap;transform:translateX(var(--x,0px));transition:transform .55s var(--ease),opacity .4s,background-color .3s}
.gb-num.is-ret{opacity:0}
/* rules you set */
.gb-t--rules{background:var(--forest);border-color:transparent;color:var(--on-forest)}
.gb-t--rules p{color:var(--on-forest-2)}
.gb-seal{display:grid;place-items:center;width:46px;height:46px;margin-bottom:8px;border-radius:14px;background:rgba(236,248,241,.1);color:var(--mint-2);font-size:21px}
.gb-applied{align-self:end;list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.gb-applied li{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(236,248,241,.08);border:1px solid rgba(236,248,241,.14);font-size:.76rem;font-weight:600;color:var(--on-forest)}
.gb-applied .ic{color:var(--mint-2);font-size:12px}
.gb-applied li.is-hit{animation:gbhit .9s var(--ease)}
@keyframes gbhit{0%{background:rgba(159,229,186,.35);transform:translateY(-2px)}100%{background:rgba(236,248,241,.08);transform:none}}

/* who uses it: team list beside a large photo (photos dissolve over each other; nothing jumps) */
.pw{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,3vw,40px);align-items:stretch;margin-top:clamp(24px,3vw,40px)}
.pw-list{list-style:none;margin:0;padding:0;display:grid;align-content:center;gap:4px}
.pw-t{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;width:100%;padding:16px 18px;border:0;border-radius:18px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:background-color .6s cubic-bezier(.4,0,.2,1)}
.pw-t:hover{background:color-mix(in srgb,var(--paper-2) 60%,transparent)}
.pw-t.is-on{background:var(--paper-2)}
.pw-t:focus-visible{outline:2px solid var(--forest-3);outline-offset:2px}
.pw-n{font:500 .74rem/1.6 var(--f-mono);color:var(--ink-3)}
.pw-tx{min-width:0}
.pw-tx b{display:block;font:600 clamp(1.15rem,1rem + .5vw,1.45rem)/1.2 var(--f-display);letter-spacing:-.015em;color:var(--ink-3);transition:color .6s cubic-bezier(.4,0,.2,1)}
.pw-t.is-on .pw-tx b{color:var(--ink)}
.pw-d{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .65s cubic-bezier(.4,0,.2,1),opacity .3s ease}
.pw-d > span{min-height:0;overflow:hidden}
.pw-dt{display:block;padding-top:6px;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.pw-t.is-on .pw-d{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .65s cubic-bezier(.4,0,.2,1),opacity .5s ease .2s}
.pw-bar{grid-column:2;display:block;height:2px;margin-top:10px;border-radius:2px;background:var(--paper-3);overflow:hidden;opacity:0;transition:opacity .5s}
.pw-t.is-on .pw-bar{opacity:1}
.pw-bar i{display:block;height:100%;background:var(--mint-2);transform-origin:left;transform:scaleX(0)}
:root:not([data-mode="dark"]) .pw-bar i{background:var(--forest-3)}
.pw-media{position:relative;min-height:440px;border-radius:28px;overflow:hidden;background:var(--paper-2);isolation:isolate}
.pw-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.04);z-index:0}
.pw-img.is-prev{opacity:1;transform:none;z-index:1}
.pw-img.is-on{opacity:1;transform:none;z-index:2;transition:opacity 1.1s cubic-bezier(.4,0,.2,1),transform 2.2s cubic-bezier(.2,.7,.2,1)}
.pw-chips{position:absolute;left:18px;bottom:18px;z-index:3;display:grid}
.pw-chip{grid-area:1/1;justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);font-weight:600;font-size:.86rem;box-shadow:var(--shadow);opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .5s var(--ease)}
.pw-chip.is-on{opacity:1;transform:none;transition:opacity .5s ease .45s,transform .7s var(--ease) .45s}
.pw-chip .ic{color:var(--forest-3)}
:root[data-mode="dark"] .pw-chip .ic{color:var(--mint-2)}

/* reading the results: dashboard on the forest board */
.rr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,40px)}
.rr-w{display:grid;grid-template-rows:auto 1fr;gap:16px;padding:20px;border-radius:24px;background:rgba(236,248,241,.05);border:1px solid rgba(236,248,241,.1)}
.rr-w--talk{grid-column:span 2}
.rr-w header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
.rr-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(236,248,241,.1);color:var(--mint-2);font-size:17px}
.rr-w h3{font:600 1.05rem/1.2 var(--f-display);color:var(--on-forest)}
.rr-w header p{margin-top:4px;font-size:.88rem;line-height:1.5;color:var(--on-forest-2)}
.rr-talk{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:20px;padding:16px;border-radius:18px;background:rgba(0,0,0,.18)}
.rr-talk svg{width:120px;height:120px;transform:rotate(-90deg)}
.rr-ring{fill:none;stroke:var(--lav-2);stroke-width:14;opacity:.55}
.rr-arc{fill:none;stroke:var(--mint-2);stroke-width:14;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.6s var(--ease)}
.rr-talk-v{display:grid;gap:2px}
.rr-talk-v b{font:600 2.4rem/1 var(--f-display);color:var(--on-forest);font-variant-numeric:tabular-nums}
.rr-talk-v small,.rr-big small{font:500 .64rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-forest-2)}
.rr-leg{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rr-leg li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px;padding:9px 12px;border-radius:12px;background:rgba(236,248,241,.06);font-size:.84rem;color:var(--on-forest-2)}
.rr-leg b{color:var(--on-forest);font:600 .86rem/1 var(--f-mono)}
.rr-leg i{width:10px;height:10px;border-radius:3px}
.rr-leg .k1{background:var(--mint-2)}.rr-leg .k2{background:var(--lav-2)}
.rr-cr,.rr-idle,.rr-drop{display:grid;gap:12px;align-content:end;padding:14px;border-radius:18px;background:rgba(0,0,0,.18)}
.rr-big{display:flex;align-items:baseline;gap:10px}
.rr-big b{font:600 2rem/1 var(--f-display);color:var(--on-forest);font-variant-numeric:tabular-nums}
.rr-cbs,.rr-dbs{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;align-items:end;height:84px}
.rr-cb,.rr-db{display:grid;grid-template-rows:1fr auto;gap:4px;height:100%;align-items:end}
.rr-cb i,.rr-db i{display:block;height:var(--h);border-radius:4px 4px 2px 2px;background:var(--mint-2);transform-origin:bottom;transform:scaleY(.05);transition:transform 1.2s var(--ease),height 1.2s var(--ease)}
.rr-cb small{font:500 .56rem/1 var(--f-mono);color:var(--on-forest-2);text-align:center}
.rr-db{grid-template-rows:1fr}
.rr-db i{background:rgba(236,248,241,.35)}
.rr-db i.hi{background:#F2A49A}
.rr.in .rr-cb i,.rr.in .rr-db i{transform:none}
.rr-lim{position:absolute;left:0;right:0;bottom:46%;border-top:2px dashed #F2A49A}
.rr-lim em{position:absolute;right:0;top:-18px;font:500 .56rem/1 var(--f-mono);font-style:normal;text-transform:uppercase;letter-spacing:.06em;color:#F2A49A}
.rr-strip{display:flex;height:26px;border-radius:8px;overflow:hidden;gap:2px}
.rr-strip i{flex:0 0 var(--w);transform-origin:left;transform:scaleX(0);transition:transform .5s ease}
.rr-strip .t{background:var(--mint-2)}.rr-strip .w{background:var(--lav-2)}.rr-strip .i{background:repeating-linear-gradient(135deg,#F2A49A 0 4px,rgba(242,164,154,.4) 4px 8px)}
.rr.in .rr-strip i{transform:none}
.rr-strip-k{display:flex;flex-wrap:wrap;gap:12px;font:500 .6rem/1 var(--f-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--on-forest-2)}
.rr-strip-k span{display:inline-flex;align-items:center;gap:5px}
.rr-strip-k i{width:9px;height:9px;border-radius:2px}
.rr-strip-k .t{background:var(--mint-2)}.rr-strip-k .w{background:var(--lav-2)}.rr-strip-k .i{background:#F2A49A}
.rr-flag{display:inline-flex;align-items:center;gap:7px;justify-self:start;padding:6px 10px;border-radius:999px;background:rgba(159,229,186,.14);color:var(--mint-2);font-size:.74rem;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .6s,transform .6s var(--ease)}
.rr-flag--bad{background:rgba(242,164,154,.16);color:#F2A49A}
.rr-flag.is-on{opacity:1;transform:none}
.rr-reps{list-style:none;margin:0;padding:14px;display:grid;gap:10px;border-radius:18px;background:rgba(0,0,0,.18);align-content:center}
.rr-reps li{display:grid;grid-template-columns:auto 74px minmax(0,1fr) auto;align-items:center;gap:10px}
.rr-rn{font-size:.8rem;color:var(--on-forest);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-rb{height:8px;border-radius:999px;background:rgba(236,248,241,.1);overflow:hidden}
.rr-rb i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--mint-2),var(--lav-2));transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease),width 1.2s var(--ease)}
.rr.in .rr-rb i{transform:none}
.rr-reps b{font:600 .74rem/1 var(--f-mono);color:var(--on-forest-2)}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .pq,.gb,.pw,.rr{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .prh-l,.prh-a,.pq-ph,.pq-ph img,.pq-w,.gb-t--photo > img,.gb-win,.gb-num,.gb-sw i,.pw-img,.pw-chip,.pw-d,.pw-t,.pw-tx b,.rr-arc,.rr-cb i,.rr-db i,.rr-strip i,.rr-rb i,.rr-flag{transition:none!important}
  .pq-lines em,.pq-ring,.pq-w--filter li em::before,.gb-bars i,.gb-live i{animation:none!important}
}
@media (max-width:1100px){
  .pq-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px}
  .pq-ph{aspect-ratio:5/4}
  .gb{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .gb-t--photo{min-height:520px}
  .pw{grid-template-columns:1fr}
  .pw-media{min-height:360px;order:-1}
  .rr{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .pq-rail{display:none}
  .pq-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:10px 2px 6px;margin:-10px -2px 0;scrollbar-width:none}
  .pq-row::-webkit-scrollbar{display:none}
  .pq-s{scroll-snap-align:start}
  .pq-ph{aspect-ratio:4/5}
  .gb{grid-template-columns:1fr}
  .gb-t--photo{grid-row:auto;min-height:480px}
  .gb-t{padding:20px}
  .rr{grid-template-columns:1fr}
  .rr-w--talk{grid-column:auto}
  .rr-talk{grid-template-columns:auto minmax(0,1fr)}
  .rr-leg{grid-column:1/-1}
  .pw-media{min-height:260px}
}

/* ===================== Progressive Dialer page (/dialers/progressive-dialer/) ===================== */
/* hero card: a rep's status — the next call dials only once the rep is ready */
.pgh{--pgh-c:var(--lav-2);width:min(320px,82%)}
.pgh[data-s="ready"],.pgh[data-s="live"]{--pgh-c:var(--good)}
.pgh[data-s="dial"]{--pgh-c:#E0A43A}
.pgh-rep{display:flex;align-items:center;gap:10px;padding:10px;border-radius:14px;background:var(--paper-2)}
.pgh-av{display:grid}
.pgh-av .av{width:36px;height:36px;font-size:.7rem;box-shadow:0 0 0 3px var(--paper-2),0 0 0 5px var(--pgh-c);transition:box-shadow .5s}
.pgh-who{flex:1;min-width:0}
.pgh-who b{display:block;font-size:.86rem}
.pgh-who small{display:block;margin-top:1px;font-size:.72rem;font-weight:600;color:var(--ink-3);transition:color .4s}
.pgh[data-s="ready"] .pgh-who small,.pgh[data-s="live"] .pgh-who small{color:var(--good)}
.pgh[data-s="dial"] .pgh-who small{color:var(--warn)}
.pgh-tm{font:500 .72rem/1 var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.pgh-bar{height:4px;border-radius:4px;background:var(--paper-3);overflow:hidden}
.pgh-bar i{display:block;height:100%;border-radius:inherit;background:var(--pgh-c);transform-origin:left;transform:scaleX(var(--p,0));transition:background-color .4s}
.pgh-call{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-radius:12px;border:1px dashed color-mix(in srgb,var(--ink) 22%,transparent);transition:background-color .5s,border-color .5s,opacity .5s}
.pgh-num{font:500 .78rem/1 var(--f-mono);font-variant-numeric:tabular-nums}
.pgh-cs{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:var(--paper-2);font-size:.66rem;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:background-color .4s,color .4s}
.pgh[data-s="wrap"] .pgh-call{opacity:.6}
.pgh[data-s="dial"] .pgh-call{border-style:solid;border-color:color-mix(in srgb,#E0A43A 60%,transparent)}
.pgh[data-s="dial"] .pgh-cs{background:var(--warn-bg);color:var(--warn)}
.pgh[data-s="dial"] .pgh-cs::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:pgblink 1s ease-in-out infinite}
.pgh[data-s="live"] .pgh-call{border-color:transparent;background:var(--good-bg)}
.pgh[data-s="live"] .pgh-cs{background:var(--btn);color:var(--btn-fg)}
.pgh[data-s="miss"] .pgh-call{opacity:.5}
.pgh[data-s="miss"] .pgh-num{text-decoration:line-through}
@keyframes pgblink{50%{opacity:.3}}

/* the ready rule: five steps beside a rep's desk */
.rdy{--rdy-c:var(--good);--rdy-bg:var(--good-bg);--rdy-fg:var(--good);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"list side";gap:14px clamp(24px,4vw,64px);align-items:start;margin-top:clamp(24px,3vw,40px)}
.rdy[data-s="dial"]{--rdy-c:#E0A43A;--rdy-bg:var(--warn-bg);--rdy-fg:var(--warn)}
.rdy[data-s="wrap"]{--rdy-c:var(--lav-2);--rdy-bg:var(--lav-3);--rdy-fg:color-mix(in srgb,var(--lav-2) 55%,var(--ink))}
.rdy[data-s="paused"]{--rdy-c:color-mix(in srgb,var(--ink) 30%,transparent);--rdy-bg:var(--paper-3);--rdy-fg:var(--ink-2)}
.rdy-list{grid-area:list;position:relative;list-style:none;margin:0;padding:0;display:grid;gap:4px}
.rdy-list::before{content:"";position:absolute;left:33px;top:30px;bottom:30px;width:2px;border-radius:2px;background:var(--line)}
.rdy-s button{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;width:100%;padding:14px 18px;border:0;border-radius:20px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:background-color .55s cubic-bezier(.4,0,.2,1)}
.rdy-s button:hover{background:color-mix(in srgb,var(--paper-2) 60%,transparent)}
.rdy-s.is-on button{background:var(--paper-2)}
.rdy-s button:focus-visible{outline:2px solid var(--forest-3);outline-offset:2px}
.rdy-n{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--paper);border:1.5px solid color-mix(in srgb,var(--ink) 22%,transparent);font:600 .8rem/1 var(--f-mono);color:var(--ink-2);transition:background-color .45s,border-color .45s,color .45s}
.rdy-s.is-on .rdy-n{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.rdy-tx b{display:block;margin-top:5px;font:600 1.12rem/1.25 var(--f-display);letter-spacing:-.01em}
.rdy-tx span{display:block;margin-top:5px;font-size:.93rem;line-height:1.55;color:var(--ink-2)}
.rdy-side{grid-area:side;display:grid;gap:14px;align-content:start}
@media (min-height:860px){.rdy-side{position:sticky;top:96px}}
.rdy-desk{display:grid;gap:12px;padding:18px;border-radius:30px;background:var(--paper-2);border:1px solid var(--line)}
.rdy-rep{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:20px;background:var(--paper);border:1px solid var(--line)}
.rdy-ring{display:grid}
.rdy-ring .av{width:46px;height:46px;font-size:.82rem;box-shadow:0 0 0 3px var(--paper),0 0 0 6px var(--rdy-c);transition:box-shadow .5s}
.rdy-who{flex:1;min-width:0}
.rdy-who b{display:block;font-size:.98rem}
.rdy-who small{display:block;margin-top:2px;font-size:.76rem;color:var(--ink-3)}
.rdy-pill{padding:7px 13px;border-radius:999px;background:var(--rdy-bg);color:var(--rdy-fg);font-size:.76rem;font-weight:600;white-space:nowrap;transition:background-color .45s,color .45s}
.rdy-now{display:grid;gap:10px;padding:16px;border-radius:20px;background:var(--paper);border:1px solid var(--line);transition:border-color .5s}
.rdy[data-s="live"] .rdy-now{border-color:color-mix(in srgb,var(--good) 55%,var(--line))}
.rdy-k{font:500 .6rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.rdy-card{display:flex;align-items:center;gap:12px;transition:opacity .4s,transform .5s var(--ease)}
.rdy-card.is-in{animation:rdyin .55s var(--ease)}
@keyframes rdyin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rdy-cav{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:13px;background:var(--lav);color:var(--on-lav);font-size:.78rem;font-weight:600}
.rdy-cn{min-width:0}
.rdy-cn b{display:block;font-size:.98rem}
.rdy-cn small{display:block;margin-top:2px;font:500 .74rem/1.3 var(--f-mono);color:var(--ink-3)}
.rdy-cs{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:6px 11px;border-radius:999px;background:var(--paper-2);font-size:.72rem;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:background-color .4s,color .4s}
.rdy[data-s="dial"] .rdy-cs{background:var(--warn-bg);color:var(--warn)}
.rdy[data-s="dial"] .rdy-cs::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:pgblink 1s ease-in-out infinite}
.rdy[data-s="live"] .rdy-cs{background:var(--btn);color:var(--btn-fg)}
.rdy[data-s="miss"] .rdy-cs{background:var(--bad-bg);color:var(--bad)}
.rdy[data-s="miss"] .rdy-card{opacity:.55}
.rdy-rec{display:flex;align-items:center;gap:8px;margin:0;padding:9px 11px;border-radius:12px;background:var(--paper-2);font-size:.8rem;color:var(--ink-3);transition:background-color .45s,color .45s}
.rdy-rec .ic{flex:none;color:var(--ink-3);transition:color .45s}
.rdy[data-s="live"] .rdy-rec{background:var(--mint-3);color:var(--ink)}
.rdy[data-s="live"] .rdy-rec .ic{color:var(--good)}
.rdy-queue{display:grid;gap:8px;padding:4px 2px 0}
.rdy-queue ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rdy-queue li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px;border-radius:13px;background:var(--paper);border:1px solid var(--line)}
.rdy-qn b{font-size:.84rem}
.rdy-qn small{margin-left:6px;font-size:.74rem;color:var(--ink-3)}
.rdy-qp{font:500 .72rem/1 var(--f-mono);color:var(--ink-3)}
.rdy-queue li.is-retry .rdy-qp{padding:4px 8px;border-radius:999px;background:var(--lav-3);color:color-mix(in srgb,var(--lav-2) 55%,var(--ink));font-family:var(--f-body);font-weight:600}
.rdy-foot{display:flex;align-items:center;gap:8px;padding:2px 4px 0}
.rdy-note{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-2)}
.rdy-note::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--rdy-c);transition:background-color .45s}
.rdy-pause{justify-self:start}
.rdy-pause .ic{margin-right:6px}

/* where it fits: one minute of a rep's time in three modes */
.mx{--mx-talk:#2FAE6C;--mx-prep:#B9A2EF;--mx-ring:color-mix(in srgb,var(--ink) 13%,transparent);--mx-wait:#E5776D;
  display:grid;gap:clamp(24px,3vw,40px);margin-top:clamp(24px,3vw,40px)}
:root[data-mode="dark"] .mx{--mx-talk:#73DCA0;--mx-prep:#9C86E8;--mx-wait:#FF7E75}
.mx-chart{position:relative;padding:clamp(18px,2.4vw,32px);border-radius:30px;background:var(--paper-2);border:1px solid var(--line)}
.mx-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 28px;margin-bottom:22px}
.mx-k{font:600 1.05rem/1.2 var(--f-display)}
.mx-legend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px}
.mx-legend li{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-2);cursor:default;transition:opacity .35s}
.mx-legend i{width:16px;height:10px;border-radius:3px}
.mx-g--talk{background:var(--mx-talk)}
.mx-g--prep{background:var(--mx-prep)}
.mx-g--ring{background:var(--mx-ring)}
.mx-g--hand{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 30%,transparent) 0 3px,color-mix(in srgb,var(--ink) 10%,transparent) 3px 7px)}
.mx-g--wait{background:var(--mx-wait)}
.mx-lanes{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.mx-lane{display:grid;grid-template-columns:180px minmax(0,1fr) 170px;align-items:center;gap:18px}
.mx-lab{font-size:.9rem;font-weight:600;color:var(--ink-2)}
.mx-lane--prog .mx-lab{color:var(--ink)}
.mx-bar{position:relative;height:46px;border-radius:13px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.mx-lane--prog .mx-bar{height:58px;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mx-talk) 60%,transparent),0 14px 30px -20px color-mix(in srgb,var(--mx-talk) 80%,transparent)}
.mx-g{position:absolute;top:6px;bottom:6px;left:calc(var(--x) + 2px);width:calc(var(--w) - 4px);border-radius:8px;clip-path:inset(0 var(--c,100%) 0 0);transition:opacity .4s}
.mx-tag{justify-self:start;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:.78rem;font-weight:600;color:var(--ink-2);white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .6s,transform .6s var(--ease)}
.mx-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--ink) 35%,transparent)}
.mx-lane--prog .mx-tag{background:var(--good-bg);border-color:transparent;color:var(--good)}
.mx-lane--prog .mx-tag::before{background:var(--mx-talk)}
.mx-lane--pred .mx-tag::before{background:var(--mx-wait)}
.mx.is-done .mx-tag{opacity:1;transform:none}
.mx-ticks{display:flex;justify-content:space-between;margin:12px 188px 0 198px;font:500 .58rem/1 var(--f-mono);color:var(--ink-3)}
.mx-head{position:absolute;left:0;top:0;width:2px;height:0;margin-left:-1px;border-radius:2px;background:var(--ink);opacity:.75;pointer-events:none}
.mx-head::before{content:"";position:absolute;top:-5px;left:-4px;width:10px;height:10px;border-radius:50%;background:var(--ink)}
.mx[data-f] .mx-g{opacity:.16}
.mx[data-f="talk"] .mx-g--talk,.mx[data-f="prep"] .mx-g--prep,.mx[data-f="ring"] .mx-g--ring,.mx[data-f="hand"] .mx-g--hand,.mx[data-f="wait"] .mx-g--wait{opacity:1}
.mx[data-f] .mx-legend li{opacity:.45}
.mx[data-f="talk"] [data-mx-k="talk"],.mx[data-f="prep"] [data-mx-k="prep"],.mx[data-f="ring"] [data-mx-k="ring"],.mx[data-f="hand"] [data-mx-k="hand"],.mx[data-f="wait"] [data-mx-k="wait"]{opacity:1}
.mx-pts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px)}
.mx-pt{display:grid;align-content:start;gap:8px;padding-top:18px;border-top:1px solid var(--line);transition:border-color .4s}
.mx-pt > i{width:30px;height:10px;border-radius:3px}
.mx-pt h3{margin-top:4px;font:600 clamp(1.1rem,1rem + .35vw,1.3rem)/1.2 var(--f-display);letter-spacing:-.015em}
.mx-pt p{font-size:.93rem;line-height:1.55;color:var(--ink-2)}
.mx-pt.is-on{border-top-color:var(--ink)}

/* team fit: photo cards on a rail (rise in one by one, photos drift with the scroll, timer line on the active card) */
.tfr-side{display:grid;gap:18px;justify-items:start}
.tfr-nav{display:flex;align-items:center;gap:8px}
.tfr-arw{display:grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);font-size:18px;cursor:pointer;transition:background-color .3s,border-color .3s,color .3s,transform .2s}
.tfr-arw:hover{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.tfr-arw[data-tfr-step="-1"] .ic{transform:rotate(180deg)}
.tfr-arw:active{transform:scale(.94)}
.tfr-arw:focus-visible,.tfr-dot:focus-visible{outline:2px solid var(--forest-3);outline-offset:2px}
.tfr-count{margin-left:10px;font:500 .74rem/1 var(--f-mono);color:var(--ink-3);font-variant-numeric:tabular-nums}
.tfr-count b{color:var(--ink);font-weight:600}
.tfr{margin-top:clamp(20px,3vw,34px)}
.tfr-rail{list-style:none;display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,29vw,410px);gap:20px;margin:0 calc(-1 * var(--edge));padding:10px var(--edge) 14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--edge);scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.tfr-rail::-webkit-scrollbar{display:none}
.tfr-rail.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.tfr-c{scroll-snap-align:start;display:grid;grid-template-rows:auto 1fr;gap:18px}
.tfr.js-wait .tfr-c{opacity:0}
.tfr.is-in .tfr-c{animation:tfrin .9s var(--ease) both;animation-delay:calc(var(--i) * 110ms)}
@keyframes tfrin{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
.tfr-c figure{position:relative;margin:0;aspect-ratio:4/3;border-radius:26px;overflow:hidden;background:var(--paper-2);transform:translateZ(0);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tfr-c figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,16,11,0) 55%,rgba(4,16,11,.28));pointer-events:none}
.tfr-c img{display:block;width:100%;height:100%;object-fit:cover;transform:translateX(var(--px,0px)) scale(1.14);transition:transform .9s var(--ease);will-change:transform}
.tfr-c:hover figure{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(11,31,23,.55)}
.tfr-c:hover img{transform:translateX(var(--px,0px)) scale(1.2)}
.tfr-c figcaption{position:absolute;left:14px;top:14px;z-index:1;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:.76rem;font-weight:600;color:var(--ink)}
.tfr-c figcaption i{width:7px;height:7px;border-radius:50%;background:var(--good);box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 50%,transparent);animation:tfrdot 2.2s ease-out infinite}
@keyframes tfrdot{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--good) 55%,transparent)}70%,100%{box-shadow:0 0 0 8px color-mix(in srgb,var(--good) 0%,transparent)}}
.tfr-tx{display:grid;grid-template-rows:auto auto 1fr auto;gap:6px;padding:0 4px}
.tfr-n{font:500 .72rem/1 var(--f-mono);color:var(--ink-3);transition:color .5s}
.tfr-tx h3{font:600 1.28rem/1.2 var(--f-display);letter-spacing:-.015em}
.tfr-tx p{font-size:.93rem;line-height:1.55;color:var(--ink-2)}
.tfr-line{display:block;height:2px;margin-top:10px;border-radius:2px;background:var(--line);overflow:hidden}
.tfr-line b{display:block;height:100%;background:var(--forest-3);transform-origin:left;transform:scaleX(0)}
:root[data-mode="dark"] .tfr-line b{background:var(--mint-2)}
.tfr-c.is-on .tfr-n{color:var(--ink)}
.tfr-c.is-on .tfr-line b{transform:scaleX(var(--p,0))}
.tfr-dots{display:flex;gap:6px;margin-top:20px}
.tfr-dot{width:26px;height:4px;padding:0;border:0;border-radius:4px;background:var(--paper-3);cursor:pointer;transition:background-color .45s,width .45s var(--ease)}
.tfr-dot.is-on{width:50px;background:var(--forest-3)}
:root[data-mode="dark"] .tfr-dot.is-on{background:var(--mint-2)}

/* rep experience: one clean call screen on a soft stage; the tabs show one thing at a time */
.rpe{position:relative;display:grid;justify-items:center;gap:26px;margin-top:clamp(24px,3vw,40px);padding:clamp(22px,3.2vw,48px) clamp(16px,3vw,48px) clamp(26px,3vw,44px);border-radius:34px;overflow:hidden;
  background:radial-gradient(60% 70% at 50% 45%,color-mix(in srgb,var(--mint) 70%,transparent),transparent 70%),var(--paper-2);border:1px solid var(--line)}
:root[data-mode="dark"] .rpe{background:radial-gradient(60% 70% at 50% 45%,rgba(115,220,160,.08),transparent 70%),var(--paper-2)}
.rpe-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:5px;border-radius:999px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-s)}
.rpe-tab{position:relative;display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 9px;border:0;border-radius:999px;background:none;color:var(--ink-2);font-size:.84rem;font-weight:600;white-space:nowrap;cursor:pointer;overflow:hidden;transition:color .4s,background-color .4s}
.rpe-tab:hover{color:var(--ink)}
.rpe-tab.is-on{background:var(--btn);color:var(--btn-fg)}
.rpe-tab:focus-visible{outline:2px solid var(--forest-3);outline-offset:2px}
.rpe-tn{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--paper-2);font:600 .64rem/1 var(--f-mono);color:var(--ink-2);transition:background-color .4s,color .4s}
.rpe-tab.is-on .rpe-tn{background:color-mix(in srgb,var(--btn-fg) 18%,transparent);color:var(--btn-fg)}
.rpe-prog{position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--btn-fg) 70%,transparent);transform-origin:left;transform:scaleX(0);opacity:0}
.rpe-tab.is-on .rpe-prog{opacity:.55;transform:scaleX(var(--p,0))}
.rpe-screen{width:min(100%,720px);border-radius:24px;background:var(--paper);border:1px solid var(--line);box-shadow:0 40px 70px -46px rgba(11,31,23,.55),0 2px 6px rgba(11,31,23,.05);overflow:hidden}
:root[data-mode="dark"] .rpe-screen{box-shadow:0 40px 70px -46px rgba(0,0,0,.9)}
.rpe-bar{display:flex;align-items:center;gap:14px;padding:12px 14px 12px 16px;border-bottom:1px solid var(--line);font-size:.82rem}
.rpe-live{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border-radius:999px;background:var(--good-bg);color:var(--good);font-weight:600}
.rpe-live i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pgblink 1.4s ease-in-out infinite}
.rpe-live b{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.rpe-who{display:inline-flex;align-items:center;gap:8px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rpe-end{display:grid;place-items:center;flex:none;width:34px;height:34px;margin-left:auto;border-radius:50%;background:var(--bad);color:#fff;font-size:15px}
.rpe-views{display:grid;min-height:286px}
.rpe-v{grid-area:1/1;align-self:center;padding:26px clamp(20px,3vw,36px);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .5s ease,transform .7s var(--ease),visibility 0s .5s}
.rpe-v.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s ease .12s,transform .8s var(--ease) .12s,visibility 0s}
.rpe-k{margin:0 0 16px;font:500 .62rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
/* items inside a view come in one after another while it is on */
.rpe-v .rpe-hist li,.rpe-v .rpe-acct dl > div,.rpe-v .rpe-script li{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .6s var(--ease)}
.rpe-v.is-play .rpe-hist li,.rpe-v.is-play .rpe-acct dl > div,.rpe-v.is-play .rpe-script li{opacity:1;transform:none}
.rpe-v.is-play li:nth-child(2),.rpe-v.is-play dl > div:nth-child(2){transition-delay:.18s}
.rpe-v.is-play li:nth-child(3),.rpe-v.is-play dl > div:nth-child(3){transition-delay:.36s}
.rpe-v.is-play dl > div:nth-child(4){transition-delay:.54s}
/* 1 contact history */
.rpe-hist{position:relative;list-style:none;margin:0;padding:0 0 0 22px;display:grid;gap:18px}
.rpe-hist::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--line)}
.rpe-hist li{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:12px;font-size:.92rem}
.rpe-hist li::before{content:"";position:absolute;left:-22px;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;background:var(--paper);border:2px solid var(--good)}
.rpe-hist b{font:600 .76rem/1 var(--f-mono);color:var(--ink-2)}
.rpe-hist span{color:var(--ink)}
.rpe-hist em{padding:5px 10px;border-radius:999px;background:var(--good-bg);color:var(--good);font-size:.72rem;font-weight:600;font-style:normal}
.rpe-hist em.muted{background:var(--paper-3);color:var(--ink-3)}
/* 2 account details */
.rpe-id{display:flex;align-items:center;gap:14px;padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.rpe-id .av{width:48px;height:48px;font-size:.84rem}
.rpe-id b{display:block;font-size:1.05rem}
.rpe-id small{display:block;margin-top:2px;font-size:.8rem;color:var(--ink-3)}
.rpe-id em{margin-left:auto;padding:5px 10px;border-radius:999px;background:var(--lav-3);color:color-mix(in srgb,var(--lav-2) 50%,var(--ink));font-size:.72rem;font-weight:600;font-style:normal}
.rpe-acct dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 24px;margin:14px 0 0}
.rpe-acct dt{font:500 .6rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.rpe-acct dd{margin:6px 0 0;font-weight:600;font-size:.95rem}
/* 3 call notes */
.rpe-type{min-height:5em;margin:0;font-size:1.08rem;line-height:1.6;color:var(--ink)}
.rpe-caret{display:inline-block;width:2px;height:1.1em;margin-left:2px;vertical-align:-3px;background:var(--good);animation:pgblink .9s steps(1) infinite}
.rpe-saved{display:inline-flex;align-items:center;gap:7px;margin:14px 0 0;padding:7px 12px;border-radius:999px;background:var(--good-bg);font-size:.78rem;font-weight:600;color:var(--good);opacity:0;transform:translateY(6px);transition:opacity .45s,transform .5s var(--ease)}
.rpe-saved.is-on{opacity:1;transform:none}
/* 4 outcome and follow-up */
.rpe-chips{display:flex;flex-wrap:wrap;gap:8px}
.rpe-chips span{padding:11px 18px;border-radius:14px;border:1px solid var(--line);background:var(--paper-2);font-size:.9rem;font-weight:600;color:var(--ink-2);transition:background-color .35s,color .35s,border-color .35s,transform .2s}
.rpe-out.s1 .pick{transform:scale(.96)}
.rpe-out.s1 .pick,.rpe-out.s2 .pick,.rpe-out.s3 .pick{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.rpe-out.s2 .pick,.rpe-out.s3 .pick{transform:none}
.rpe-cb{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:9px 14px;border-radius:12px;background:var(--mint-3);font-size:.88rem;font-weight:600;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .45s,transform .55s var(--ease)}
.rpe-cb .ic{color:var(--good)}
.rpe-out.s2 .rpe-cb,.rpe-out.s3 .rpe-cb{opacity:1;transform:none}
.rpe-next{display:flex;align-items:center;gap:7px;width:max-content;margin-top:14px;padding:10px 16px;border-radius:999px;background:var(--paper-3);font-size:.84rem;font-weight:600;color:var(--ink-3);transition:background-color .45s,color .45s,box-shadow .45s}
.rpe-out.s3 .rpe-next{background:var(--good-bg);color:var(--good);box-shadow:0 0 0 5px color-mix(in srgb,var(--good) 12%,transparent)}
/* 5 script guidance */
.rpe-script{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.rpe-script li{display:flex;align-items:center;gap:12px;font-size:1rem;color:var(--ink-2);transition:color .4s,opacity .45s ease,transform .6s var(--ease)}
.rpe-script li::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 22%,transparent);transition:background-color .4s,border-color .4s,box-shadow .4s}
.rpe-script li.is-done{color:var(--ink)}
.rpe-script li.is-done::before{background:var(--good);border-color:var(--good);box-shadow:inset 0 0 0 4px var(--paper)}
/* caption under the screen */
.rpe-caps{display:grid;width:min(100%,600px);text-align:center}
.rpe-cap{grid-area:1/1;display:grid;align-content:start;gap:8px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .45s ease,transform .6s var(--ease),visibility 0s .45s}
.rpe-cap.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .15s,transform .7s var(--ease) .15s,visibility 0s}
.rpe-cap h3{font:600 clamp(1.2rem,1.05rem + .5vw,1.5rem)/1.2 var(--f-display);letter-spacing:-.015em}
.rpe-cap p{font-size:.98rem;line-height:1.6;color:var(--ink-2)}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .rdy,.mx,.rpe{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .pgh-call,.pgh-av .av,.rdy-ring .av,.rdy-card,.rdy-rec,.mx-g,.tfr-c,.tfr-c img,.tfr-c figure,.rpe-v,.rpe-cap,.rpe-v li,.rpe-v dl > div{transition:none!important;animation:none!important}
  .pgh-cs::before,.rdy-cs::before,.rpe-live i,.rpe-caret,.tfr-c figcaption i{animation:none!important}
}
@media (max-width:1100px){
  .rdy{grid-template-columns:1fr;grid-template-areas:"side" "list"}
  .rdy-side{position:static}
  .mx-lane{grid-template-columns:130px minmax(0,1fr) 150px;gap:14px}
  .mx-ticks{margin:12px 164px 0 144px}
}
@media (max-width:760px){
  .mx-top{margin-bottom:16px}
  .mx-lane{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"lab tag" "bar bar";gap:8px 10px}
  .mx-lab{grid-area:lab}.mx-tag{grid-area:tag;padding:5px 9px;font-size:.7rem}.mx-bar{grid-area:bar}
  .rdy-qn small{display:none}
  .rdy-qp{white-space:nowrap}
  .mx-ticks{margin:10px 0 0}
  .mx-pts{grid-template-columns:1fr}
  .tfr-rail{grid-auto-columns:82%;gap:14px}
  .tfr-count{display:none}
  .rpe{border-radius:26px;gap:20px}
  .rpe-tabs{flex-wrap:nowrap;justify-content:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none;border-radius:18px}
  .rpe-tabs::-webkit-scrollbar{display:none}
  .rpe-tab{flex:none;font-size:.78rem}
  .rpe-who{display:none}
  .rpe-views{min-height:300px}
  .rpe-v{padding:22px 18px}
  .rpe-hist li{grid-template-columns:52px minmax(0,1fr);row-gap:6px}
  .rpe-hist em{grid-column:2;justify-self:start}
  .rpe-acct dl{grid-template-columns:1fr}
  .rpe-id em{display:none}
  .rpe-type{font-size:.98rem}
}

/* ===================== Preview Dialer page (/dialers/preview-dialer/) — built on the Progressive page's designs ===================== */
/* hero card: the record shows first, the number is held back until the rep dials */
.pvh-note{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0;padding:8px 10px;border-radius:12px;background:var(--lav-3);font-size:.76rem;transition:opacity .4s}
.pvh-note span{flex:none;font:500 .56rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.pvh-note b{font-weight:600;text-align:right;color:var(--ink)}
.pvh[data-s="live"] .pvh-note,.pvh[data-s="dial"] .pvh-note{opacity:.7}

/* how it works: the five steps beside the rep's preview screen (rdy- look) */
.rdy--pv[data-s="queue"],.rdy--pv[data-s="review"],.rdy--pv[data-s="later"]{--rdy-c:var(--lav-2);--rdy-bg:var(--lav-3);--rdy-fg:color-mix(in srgb,var(--lav-2) 55%,var(--ink))}
.rdy--pv[data-s="decide"]{--rdy-c:#E0A43A;--rdy-bg:var(--warn-bg);--rdy-fg:var(--warn)}
.rdy--pv[data-s="skip"]{--rdy-c:color-mix(in srgb,var(--ink) 30%,transparent);--rdy-bg:var(--paper-3);--rdy-fg:var(--ink-2)}
.rdy--pv[data-s="review"] .rdy-cs{background:var(--lav-3);color:color-mix(in srgb,var(--lav-2) 55%,var(--ink))}
.rdy--pv[data-s="decide"] .rdy-cs{background:var(--warn-bg);color:var(--warn)}
.rdy--pv[data-s="live"] .rdy-cs,.rdy--pv[data-s="record"] .rdy-cs{background:var(--btn);color:var(--btn-fg)}
.rdy--pv[data-s="skip"] .rdy-cs{background:var(--paper-3);color:var(--ink-2)}
.rdy--pv[data-s="later"] .rdy-cs{background:var(--lav-3);color:color-mix(in srgb,var(--lav-2) 55%,var(--ink))}
.rdy--pv[data-s="skip"] .rdy-card{opacity:.55}
.rdy--pv[data-s="live"] .rdy-rec,.rdy--pv[data-s="record"] .rdy-rec{background:var(--mint-3);color:var(--ink)}
.rdy--pv[data-s="live"] .rdy-rec .ic,.rdy--pv[data-s="record"] .rdy-rec .ic{color:var(--good)}
.pvq-facts{display:grid;gap:0;margin:0;padding:4px 12px;border-radius:14px;background:var(--paper-2);transition:background-color .45s,opacity .45s}
.pvq-facts > div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:.82rem}
.pvq-facts > div:last-child{border-bottom:0}
.pvq-facts dt{color:var(--ink-3)}
.pvq-facts dd{display:inline-flex;align-items:center;gap:6px;margin:0;font-weight:600;text-align:right}
.pvq-facts dd .ic{color:var(--good);font-size:13px}
.pvq-facts dd.is-flag{color:var(--bad)}
.pvq-facts dd.is-flag .ic{display:none}
.rdy--pv[data-s="queue"] .pvq-facts{opacity:.45}
.rdy--pv[data-s="review"] .pvq-facts{background:var(--lav-3)}
.pvq-timer{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;font-size:.74rem;color:var(--ink-3)}
.pvq-timer > span:first-child{font:500 .58rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.pvq-bar{height:5px;border-radius:5px;background:var(--paper-3);overflow:hidden}
.pvq-bar i{display:block;height:100%;border-radius:inherit;background:var(--rdy-c);transform-origin:left;transform:scaleX(var(--p,0));transition:background-color .4s}
.pvq-timer b{min-width:38px;text-align:right;font:600 .78rem/1 var(--f-mono);color:var(--ink);font-variant-numeric:tabular-nums}
.pvq-acts{display:flex;flex-wrap:wrap;gap:8px}
.pvq-acts .pill .ic{margin-right:6px}
.pvq-acts .pill{transition:box-shadow .4s,transform .2s,background-color .3s,color .3s}
.rdy--pv[data-s="decide"] .pvq-acts .pill{box-shadow:0 0 0 4px color-mix(in srgb,#E0A43A 28%,transparent)}
.pvq-acts .pill.is-pick{transform:scale(.96);box-shadow:0 0 0 5px color-mix(in srgb,var(--good) 35%,transparent)}

/* inside the dialer: one clean screen, one control at a time (rpe- look) */
.pvc-live{background:var(--lav-3);color:color-mix(in srgb,var(--lav-2) 50%,var(--ink))}
.pvc-dial{background:var(--good)}
.pvc-timer{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(20px,4vw,44px)}
.pvc-ring{position:relative;width:156px;height:156px}
.pvc-ring svg{display:block;width:100%;height:100%}
.pvc-trk{fill:none;stroke:var(--paper-3);stroke-width:10}
.pvc-arc{fill:none;stroke:var(--good);stroke-width:10;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--o,0)}
.pvc-ring.is-end .pvc-arc{stroke:#E0A43A}
.pvc-rv{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:4px}
.pvc-rv b{font:600 2.8rem/1 var(--f-display);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.pvc-rv small{font:500 .56rem/1.3 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.pvc-side{display:grid;gap:16px}
.pvc-opts{display:flex;flex-wrap:wrap;gap:8px}
.pvc-opts span{padding:10px 15px;border-radius:14px;border:1px solid var(--line);background:var(--paper-2);font-size:.86rem;font-weight:600;color:var(--ink-2)}
.pvc-opts span.on{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.pvc-auto{display:flex;align-items:center;gap:10px;margin:0;font-size:.86rem;font-weight:600;color:var(--ink-2)}
.pvc-auto i{position:relative;flex:none;width:36px;height:21px;border-radius:999px;background:var(--good)}
.pvc-auto i::after{content:"";position:absolute;right:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.pvc-auto.is-fire span{color:var(--warn)}
.pvc-fields{list-style:none;margin:0;padding:0;display:grid}
.pvc-fields li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.94rem;color:var(--ink-2);transition:color .35s,opacity .45s ease,transform .6s var(--ease)}
.pvc-fields li:last-child{border-bottom:0}
.pvc-fields li.is-on{color:var(--ink);font-weight:600}
.pvc-sw{position:relative;flex:none;width:36px;height:21px;border-radius:999px;background:color-mix(in srgb,var(--ink) 18%,transparent);transition:background-color .35s}
.pvc-sw::after{content:"";position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .35s var(--ease)}
.pvc-fields li.is-on .pvc-sw{background:var(--good)}
.pvc-fields li.is-on .pvc-sw::after{transform:translateX(15px)}
.pvc-shown{margin:14px 0 0;font-size:.84rem;color:var(--ink-3)}
.pvc-shown b{color:var(--ink);font-family:var(--f-mono)}
.rpe-v .pvc-fields li{opacity:0;transform:translateY(8px)}
.rpe-v.is-play .pvc-fields li{opacity:1;transform:none}
.rpe-v.is-play .pvc-fields li:nth-child(2){transition-delay:.12s}
.rpe-v.is-play .pvc-fields li:nth-child(3){transition-delay:.24s}
.rpe-v.is-play .pvc-fields li:nth-child(4){transition-delay:.36s}
.rpe-v.is-play .pvc-fields li:nth-child(5){transition-delay:.48s}
.pvc-back{display:flex;align-items:center;gap:10px;margin:20px 0 0;padding:11px 14px;border-radius:14px;background:var(--good-bg);font-size:.86rem;color:var(--ink);opacity:0;transform:translateY(8px);transition:opacity .45s,transform .55s var(--ease)}
.pvc-back .ic{flex:none;color:var(--good);font-size:16px}
.pvc-back.is-on{opacity:1;transform:none}
.pvc-back.is-on .ic{animation:pvspin .9s var(--ease)}
@keyframes pvspin{from{transform:rotate(-180deg)}to{transform:none}}

/* why preview dialing: chart kinds added for this page (mx- look) */
.mx--pv{--mx-flag:#E0A43A}
:root[data-mode="dark"] .mx--pv{--mx-flag:#F2C26B}
.mx-g--flag{background:var(--mx-flag)}
.mx-g--coach{background:linear-gradient(90deg,var(--mx-prep) 0 50%,var(--mx-talk) 50% 100%)}
.mx[data-f="flag"] .mx-g--flag,.mx[data-f="coach"] .mx-g--prep,.mx[data-f="coach"] .mx-g--talk{opacity:1}
.mx[data-f="flag"] [data-mx-k="flag"],.mx[data-f="coach"] [data-mx-k="prep"],.mx[data-f="coach"] [data-mx-k="talk"]{opacity:1}
.mx-pts--4{grid-template-columns:repeat(4,minmax(0,1fr))}

@media (prefers-reduced-motion:reduce){
  .pvh-note,.pvq-facts,.pvq-bar i,.pvq-acts .pill,.pvc-fields li,.pvc-back,.pvc-sw,.pvc-sw::after{transition:none!important;animation:none!important}
}
@media (max-width:1100px){
  .mx-pts--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .mx-pts--4{grid-template-columns:1fr}
  .pvc-timer{grid-template-columns:1fr;justify-items:center;text-align:center}
  .pvc-opts{justify-content:center}
  .pvc-auto{justify-content:center}
  .pvc-ring{width:132px;height:132px}
  .pvq-acts .pill{flex:1 1 auto;justify-content:center}
}

/* ===================== Parallel Dialer page (/dialers/parallel-dialer/) — built on the Predictive page's designs ===================== */
/* hero card: three lines ring for one rep */
.pah-b{margin-left:auto;font:500 .62rem/1 var(--f-mono);letter-spacing:.05em;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* inside a parallel call: five photo steps (pq- look) */
.pq-row--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.pq-row--5 .pq-w{left:10px;right:10px;bottom:10px;padding:10px 12px}
.pq-row--5 .pq-w--ratio b{font-size:1.7rem}
.pq-row--5 .pq-w--filter li{font-size:.68rem}
.pq-w--vm{display:flex;align-items:center;gap:10px}
.ppv-wave{flex:none;display:flex;align-items:center;gap:2px;height:28px}
.ppv-wave i{width:3px;height:var(--h,12px);border-radius:2px;background:var(--lav-2);animation:ppwave 1.2s ease-in-out infinite;animation-delay:calc(var(--i) * -90ms)}
@keyframes ppwave{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.pq-w--vm.is-clear .ppv-wave i{animation:none;transform:scaleY(.18);background:color-mix(in srgb,var(--ink) 20%,transparent);transition:transform .4s,background-color .4s}
.ppv-t{min-width:0}
.ppv-t b{display:block;font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ppv-t small{display:block;margin-top:2px;font-size:.66rem;color:var(--ink-3);transition:color .4s}
.pq-w--vm.is-clear .ppv-t small{color:var(--good);font-weight:600}
.pq-w--next{display:grid;gap:8px}
.ppn-out{display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:4px 9px;border-radius:999px;background:var(--good-bg);color:var(--good);font-size:.68rem;font-weight:600;transition:opacity .4s}
.ppn-out::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.ppn-b{display:flex;align-items:center;gap:6px;font:500 .6rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.ppn-b span{margin-right:auto}
.ppn-b i{width:18px;height:8px;border-radius:4px;background:color-mix(in srgb,var(--ink) 14%,transparent);transition:background-color .3s,box-shadow .3s}
.ppn-b i.on{background:var(--mint-2);box-shadow:0 0 8px var(--mint-2)}

/* line settings: wait between attempts + ring duration tile (gb- look) */
.prw-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.prw-k{font:500 .6rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.prw-keys{margin-top:0}
.prw-keys button{padding:7px 10px;font-size:.72rem}
.prw-row .gb-step{margin-left:auto}
.prr-ctl{align-self:end;display:flex;align-items:center;gap:14px;margin-top:16px}
.prr-big{display:flex;align-items:center;gap:10px}
.prr-big b{font:600 3.4rem/.9 var(--f-display);letter-spacing:-.05em;color:var(--on-forest);font-variant-numeric:tabular-nums}
.prr-big small{font:500 .6rem/1.35 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--on-forest-2)}
.prr-step{margin-left:auto;background:rgba(236,248,241,.08);border-color:rgba(236,248,241,.16)}
.prr-step button{background:rgba(236,248,241,.1);color:var(--on-forest)}
.prr-step button:hover{background:rgba(159,229,186,.3)}
.prr-line{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:14px;background:rgba(0,0,0,.2)}
.prr-num{font:500 .72rem/1 var(--f-mono);color:var(--on-forest);font-variant-numeric:tabular-nums;transition:opacity .4s}
.prr-bar{height:6px;border-radius:6px;background:rgba(236,248,241,.12);overflow:hidden}
.prr-bar i{display:block;height:100%;border-radius:inherit;background:var(--mint-2);transform-origin:left;transform:scaleX(var(--p,0))}
.prr-st{font-size:.7rem;font-weight:600;color:var(--on-forest-2);white-space:nowrap;transition:color .3s}
.prr.is-drop .prr-bar i{background:#F2A49A}
.prr.is-drop .prr-st{color:#F2A49A}
.prr.is-drop .prr-num{opacity:.5}

/* lists and records: forest dashboard (rr- look) */
.pl-imp,.pl-panel{display:grid;gap:12px;align-content:start;padding:14px;border-radius:18px;background:rgba(0,0,0,.18)}
.pl-file{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(80px,1.1fr) auto;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(236,248,241,.06)}
.pl-fi{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(159,229,186,.14);color:var(--mint-2);font-size:16px}
.pl-fn b{display:block;font:600 .82rem/1.2 var(--f-mono);color:var(--on-forest)}
.pl-fn small{display:block;margin-top:3px;font-size:.72rem;color:var(--on-forest-2)}
.pl-fb{height:6px;border-radius:6px;background:rgba(236,248,241,.1);overflow:hidden}
.pl-fb i{display:block;height:100%;border-radius:inherit;background:var(--mint-2);transform-origin:left;transform:scaleX(var(--p,0))}
.pl-fc{font:600 .86rem/1 var(--f-mono);color:var(--on-forest);font-variant-numeric:tabular-nums}
.pl-camps{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pl-camps li{display:grid;grid-template-columns:120px minmax(0,1fr) 56px;align-items:center;gap:12px;font-size:.82rem;color:var(--on-forest-2)}
.pl-cb{height:9px;border-radius:999px;background:rgba(236,248,241,.08);overflow:hidden}
.pl-cb i{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,var(--mint-2),var(--lav-2));transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease)}
.pl.is-sorted .pl-cb i{transform:none}
.pl-camps li:nth-child(2) i{transition-delay:.15s}.pl-camps li:nth-child(3) i{transition-delay:.3s}
.pl-camps b{font:600 .8rem/1 var(--f-mono);color:var(--on-forest);text-align:right;font-variant-numeric:tabular-nums}
.pl-excl{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pl-excl li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:11px;background:rgba(236,248,241,.05);font:500 .76rem/1 var(--f-mono);color:var(--on-forest);transition:opacity .45s,background-color .45s}
.pl-excl em{font:600 .66rem/1 var(--f-body);font-style:normal;color:var(--mint-2)}
.pl-excl li.is-x{opacity:.55;background:rgba(242,164,154,.08)}
.pl-excl li.is-x span{text-decoration:line-through}
.pl-excl li.is-x em{color:#F2A49A}
.pl-note{margin:0;font-size:.76rem;color:var(--on-forest-2)}
.pl-note b{color:var(--on-forest);font-family:var(--f-mono)}
.pl-rec{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;background:rgba(236,248,241,.06)}
.pl-rec b{display:block;font-size:.84rem;color:var(--on-forest)}
.pl-rec small{display:block;font-size:.72rem;color:var(--on-forest-2)}
.pl-dir{display:flex;align-items:center;gap:8px;margin:0;padding:8px 10px;border-radius:11px;font-size:.78rem;color:var(--on-forest-2);border:1px dashed rgba(236,248,241,.14);transition:background-color .45s,color .45s,border-color .45s}
.pl-dir .ic{flex:none;color:var(--mint-2);font-size:13px;transition:transform .45s var(--ease)}
.pl-dir--out .ic{transform:rotate(180deg)}
.pl-dir b{color:var(--on-forest)}
.pl-dir.is-on{background:rgba(159,229,186,.12);border-color:transparent;color:var(--on-forest)}
.pl-tags{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pl-tags li{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-radius:11px;background:rgba(236,248,241,.05);border:1px solid transparent;font-size:.8rem;font-weight:600;color:var(--on-forest-2);transition:background-color .35s,color .35s,border-color .35s,transform .25s}
.pl-tags li b{font:600 .78rem/1 var(--f-mono);color:var(--on-forest);font-variant-numeric:tabular-nums}
.pl-tags li.is-on{background:rgba(159,229,186,.16);border-color:rgba(159,229,186,.4);color:var(--on-forest);transform:translateX(3px)}
.pl-rk{display:grid;grid-template-columns:minmax(0,1fr) 40px 50px;gap:8px;padding:0 0 2px;font:500 .56rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--on-forest-2)}
.pl-rk span:first-child{padding-left:2px}
.pl-reps{padding:0;background:none}
.pl-reps li{grid-template-columns:auto 58px minmax(0,1fr) 40px 50px}
.pl-reps em{font:500 .66rem/1 var(--f-mono);font-style:normal;color:var(--on-forest-2);text-align:right}
.pl-reps b{text-align:right}
.pl.in .rr-rb i{transform:none}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .pl{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .ppv-wave i,.ppn-b i,.prr-bar i,.pl-cb i,.pl-excl li,.pl-dir,.pl-tags li{transition:none!important;animation:none!important}
}
@media (max-width:1100px){
  .pq-row--5{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .pq-row--5{grid-template-columns:none}
  .pl-file{grid-template-columns:auto minmax(0,1fr) auto}
  .pl-fb{grid-column:1/-1}
  .pl-camps li{grid-template-columns:96px minmax(0,1fr) 48px}
}

/* ===================== Call Workflows page (/product/call-workflows/) ===================== */
/* hero card: a rule — WHEN / IF / THEN */
.wfh{width:min(330px,82%)}
.wfh .ph-k em.wfh-on{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:999px;background:var(--good-bg);color:var(--good);font:600 .62rem/1 var(--f-body)}
.wfh-on i{width:6px;height:6px;border-radius:50%;background:currentColor;animation:wfblink 1.6s ease-in-out infinite}
@keyframes wfblink{50%{opacity:.3}}
.wfh-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wfh-r{display:grid;grid-template-columns:42px minmax(0,1fr) 18px;align-items:center;gap:8px;padding:8px 9px;border-radius:12px;background:var(--paper-2);opacity:.5;transition:opacity .45s,background-color .45s}
.wfh-r.is-on{opacity:1;background:var(--mint-3)}
.wfh-k{justify-self:start;padding:3px 6px;border-radius:6px;background:var(--lav-3);font:600 .56rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--lav-2) 50%,var(--ink))}
.wfh-r:nth-child(2) .wfh-k{background:var(--warn-bg);color:var(--warn)}
.wfh-r:nth-child(3) .wfh-k{background:var(--good-bg);color:var(--good)}
.wfh-v{font-size:.76rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wfh-ok{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--good);color:#fff;font-size:10px;opacity:0;transform:scale(.6);transition:opacity .3s,transform .35s var(--ease)}
.wfh-r.is-done .wfh-ok{opacity:1;transform:none}
.wfh-foot{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px;font:500 .6rem/1 var(--f-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.wfh-foot b{font-size:.76rem;color:var(--ink);font-variant-numeric:tabular-nums}
.wfh-bar{height:4px;border-radius:4px;background:var(--paper-3);overflow:hidden}
.wfh-bar i{display:block;height:100%;background:var(--good);transform-origin:left;transform:scaleX(var(--p,0))}

/* building blocks: five photo panels, the open one grows and shows its block; a rule line on top */
.cwb{margin-top:clamp(24px,3vw,40px)}
.cwb-row{list-style:none;margin:0;padding:0;display:flex;gap:12px;height:clamp(420px,calc(100vh - 250px),560px)}
.cwb-p{position:relative;flex:1 1 0;min-width:0;border-radius:28px;overflow:hidden;background:var(--forest);isolation:isolate;transition:flex-grow .85s cubic-bezier(.65,0,.25,1)}
.cwb-p.is-on{flex-grow:6}
.cwb-p:not(.is-on):hover{flex-grow:1.35}
.cwb-p > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.4s var(--ease)}
.cwb-p.is-on > img{transform:scale(1)}
.cwb-p:not(.is-on):hover > img{transform:scale(1.16)}
.cwb-p::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(4,16,11,.08) 28%,rgba(4,16,11,.82));background-color:rgba(4,16,11,.38);transition:background-color .7s}
.cwb-p.is-on::after{background-color:rgba(4,16,11,0)}
.cwb-tab{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:16px;width:100%;padding:20px 0 22px;border:0;background:none;color:#fff;font:inherit;cursor:pointer}
.cwb-tab:focus-visible{outline:3px solid var(--mint-2);outline-offset:-3px;border-radius:28px}
.cwb-n{padding:7px 9px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:500 .68rem/1 var(--f-mono);letter-spacing:.08em}
.cwb-vt{writing-mode:vertical-rl;font:600 1.12rem/1 var(--f-display);letter-spacing:-.01em;white-space:nowrap;text-shadow:0 1px 10px rgba(4,16,11,.35)}
.cwb-ti{display:grid;place-items:center;width:38px;height:38px;margin-top:auto;border-radius:50%;background:#9FE5BA;color:#0A2419;font-size:16px}
.cwb-n,.cwb-vt,.cwb-ti{transition:opacity .3s}
.cwb-p.is-on .cwb-n,.cwb-p.is-on .cwb-vt,.cwb-p.is-on .cwb-ti{opacity:0}
.cwb-body{position:absolute;left:28px;bottom:34px;z-index:3;display:grid;gap:10px;width:min(460px,calc(100% - 56px));color:#fff;pointer-events:none;opacity:0;transform:translateY(16px);transition:opacity .25s,transform .4s var(--ease)}
.cwb-p.is-on .cwb-body{opacity:1;transform:none;transition:opacity .5s ease .4s,transform .8s var(--ease) .4s}
.cwb-k{justify-self:start;display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font:500 .62rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase}
.cwb-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#9FE5BA;color:#0A2419;font-size:12px}
.cwb-body h3{font:600 clamp(1.6rem,1.1rem + 1.1vw,2.3rem)/1.06 var(--f-display);letter-spacing:-.025em;color:#fff}
.cwb-body p{max-width:44ch;font-size:1rem;line-height:1.55;color:rgba(255,255,255,.86)}
.cwb-ui{position:absolute;top:22px;right:22px;z-index:3;display:grid;gap:7px;width:min(256px,calc(100% - 44px));padding:14px 15px 15px;border-radius:18px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 22px 44px -26px rgba(4,16,11,.7);color:var(--ink);pointer-events:none;opacity:0;transform:translateY(-10px) scale(.96);transform-origin:100% 0;transition:opacity .25s,transform .4s var(--ease)}
.cwb-p.is-on .cwb-ui{opacity:1;transform:none;transition:opacity .5s ease .6s,transform .8s var(--ease) .6s}
.cwb-uk{font:500 .56rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.cwb-uv{font:600 1.02rem/1.25 var(--f-display);letter-spacing:-.01em}
.cwb-uv.is-swap{animation:cwbswap .5s var(--ease)}
@keyframes cwbswap{from{opacity:0;transform:translateY(6px)}}
.cwb-ui small{font-size:.74rem;line-height:1.35;color:var(--ink-2)}
.cwb-ping{display:flex;align-items:center;gap:9px;font-size:.74rem;color:var(--ink-2)}
.cwb-ping i{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--good)}
.cwb-ping i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--good);opacity:0}
.cwb-p.is-on .cwb-ping i::after{animation:cwbping 1.6s ease-out infinite}
@keyframes cwbping{0%{opacity:.85;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}
.cwb-avs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 6px;margin-top:2px}
.cwb-avs .av{width:32px;height:32px;font-size:.64rem}
.cwb-avs small{flex-basis:100%}
.cwb-p.is-on .cwb-avs .av{animation:cwbpick 3.6s ease-in-out infinite}
.cwb-p.is-on .cwb-avs .av:nth-child(2){animation-delay:1.2s}
.cwb-p.is-on .cwb-avs .av:nth-child(3){animation-delay:2.4s}
@keyframes cwbpick{0%,6%{box-shadow:0 0 0 0 transparent;transform:none}14%,30%{box-shadow:0 0 0 3px var(--good);transform:translateY(-2px)}38%,100%{box-shadow:0 0 0 0 transparent;transform:none}}
.cwb-ring{display:flex;align-items:center;gap:10px}
.cwb-ring svg{flex:none;width:34px;height:34px;transform:rotate(-90deg)}
.cwb-ring circle{fill:none;stroke-width:3.5;stroke:color-mix(in srgb,var(--ink) 12%,transparent)}
.cwb-ring .cwb-ring-f{stroke:var(--good);stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.cwb-p.is-on .cwb-ring-f{animation:cwbring 5s linear infinite}
@keyframes cwbring{to{stroke-dashoffset:0}}
.cwb-task{display:flex;align-items:center;gap:9px}
.cwb-task i{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:6px;border:2px solid color-mix(in srgb,var(--ink) 25%,transparent);color:transparent;font-size:11px}
.cwb-p.is-on .cwb-task i{animation:cwbtick 4s ease infinite}
@keyframes cwbtick{0%,32%{background:transparent;border-color:color-mix(in srgb,var(--ink) 25%,transparent);color:transparent}42%,92%{background:var(--good);border-color:var(--good);color:#fff}100%{background:transparent;border-color:color-mix(in srgb,var(--ink) 25%,transparent);color:transparent}}
.cwb-fl{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px}
.cwb-fl li{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;opacity:.3}
.cwb-fl li i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--good);color:#fff;font-size:10px}
.cwb-p.is-on .cwb-fl li{animation:cwbfl .5s var(--ease) .9s forwards}
.cwb-p.is-on .cwb-fl li:nth-child(2){animation-delay:1.5s}
.cwb-p.is-on .cwb-fl li:nth-child(3){animation-delay:2.1s}
@keyframes cwbfl{to{opacity:1}}
.cwb-prog{position:absolute;left:28px;right:28px;bottom:16px;z-index:3;height:3px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden;opacity:0;transition:opacity .3s}
.cwb-p.is-on .cwb-prog{opacity:1}
.cwb-prog b{display:block;height:100%;border-radius:inherit;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.cwb-p.is-on .cwb-prog b{animation:cwbprog 7s linear forwards}
.cwb.is-hold .cwb-prog b,.cwb.is-idle .cwb-prog b{animation-play-state:paused}
@keyframes cwbprog{to{transform:scaleX(1)}}
.cwb.is-still .cwb-prog{display:none}

/* how it works: a workflow canvas — nodes joined by wires — beside an inspector */
.cwn{margin-top:clamp(24px,3vw,40px)}
.cwn-win{border-radius:30px;background:var(--forest);color:var(--on-forest);box-shadow:0 50px 90px -60px rgba(11,31,23,.8);overflow:hidden}
:root[data-mode="dark"] .cwn-win{border:1px solid var(--line)}
.cwn-top{display:flex;align-items:center;gap:14px;padding:14px 16px 14px 18px;border-bottom:1px solid rgba(236,248,241,.1)}
.cwn-name{display:inline-flex;align-items:center;gap:10px;min-width:0;font-size:.92rem}
.cwn-name b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwn-name b.is-swap{animation:cwbswap .5s var(--ease)}
.cwn-tic{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;background:#9FE5BA;color:#0A2419;font-size:14px}
.cwn-live{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font:500 .64rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--on-forest-2);white-space:nowrap}
.cwn-live b{color:var(--on-forest);font-variant-numeric:tabular-nums}
.cwn-live i{width:7px;height:7px;border-radius:50%;background:#9FE5BA;box-shadow:0 0 8px #9FE5BA;animation:wfblink 1.4s ease-in-out infinite}
.cwn.is-paused .cwn-live i{animation:none;background:#E0A43A;box-shadow:none}
.cwn-play,.cwn-arw{display:grid;place-items:center;flex:none;width:38px;height:38px;padding:0;border:1px solid rgba(236,248,241,.24);border-radius:50%;background:rgba(236,248,241,.05);color:var(--on-forest);cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.cwn-play:hover,.cwn-arw:hover{background:#9FE5BA;border-color:#9FE5BA;color:#0A2419}
.cwn-play .ic:last-child,.cwn.is-paused .cwn-play .ic:first-child{display:none}
.cwn.is-paused .cwn-play .ic:last-child{display:block}
.cwn-body{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.cwn-canvas{position:relative;padding:clamp(24px,2.8vw,40px) clamp(20px,2.6vw,40px) 76px;background-image:radial-gradient(rgba(236,248,241,.14) 1px,transparent 1.3px);background-size:22px 22px;background-position:11px 11px}
.cwn-wires{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.cwn-w{fill:none;stroke:rgba(236,248,241,.24);stroke-width:2;stroke-dasharray:4 6;stroke-linecap:round}
.cwn-w--on{stroke:#9FE5BA;stroke-width:2.5;transition:stroke-dashoffset .7s cubic-bezier(.55,0,.2,1)}
.cwn-w--on.no-tr{transition:none}
.cwn-pulse{fill:#fff;opacity:0;filter:drop-shadow(0 0 6px #9FE5BA)}
.cwn-pulse.is-on{opacity:1}
.cwn-nodes{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:30px}
.cwn-nodes li{width:58%}
.cwn-nodes li:nth-child(even){justify-self:end}
.cwn-node{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;padding:11px 14px 11px 11px;border:1px solid rgba(236,248,241,.14);border-radius:18px;background:color-mix(in srgb,var(--forest-2) 72%,var(--forest));color:var(--on-forest);font:inherit;text-align:left;cursor:pointer;opacity:.6;transition:opacity .45s,border-color .45s,box-shadow .45s}
.cwn-node:hover{opacity:.92}
.cwn-node.is-done{opacity:1}
.cwn-node.is-on{opacity:1;border-color:#9FE5BA;box-shadow:0 0 0 4px rgba(159,229,186,.14),0 20px 36px -20px rgba(0,0,0,.65)}
.cwn-node:focus-visible{outline:2px solid #9FE5BA;outline-offset:3px}
.cwn-nic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:rgba(236,248,241,.08);color:#9FE5BA;font-size:17px;transition:background-color .45s,color .45s}
.cwn-node.is-on .cwn-nic{background:#9FE5BA;color:#0A2419}
.cwn-nt{display:grid;gap:3px;min-width:0}
.cwn-nt small{font:500 .54rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--on-forest-2)}
.cwn-nt b{font-size:.95rem;font-weight:600;line-height:1.2}
.cwn-nt em{font-style:normal;font-size:.74rem;color:var(--on-forest-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwn-st{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid rgba(236,248,241,.26);color:transparent;font-size:11px;transition:background-color .35s,border-color .35s,color .35s}
.cwn-node.is-done .cwn-st{background:#9FE5BA;border-color:#9FE5BA;color:#0A2419}
.cwn-node.is-on .cwn-st{border-color:#9FE5BA;border-top-color:transparent;animation:cwnspin .9s linear infinite}
.cwn.is-paused .cwn-node.is-on .cwn-st{animation:none;border-top-color:#9FE5BA}
@keyframes cwnspin{to{transform:rotate(360deg)}}
.cwn-done{position:absolute;left:50%;bottom:22px;display:inline-flex;align-items:center;gap:8px;margin:0;padding:9px 15px;border-radius:999px;background:#9FE5BA;color:#0A2419;font-size:.8rem;font-weight:600;white-space:nowrap;opacity:0;transform:translate(-50%,10px);transition:opacity .4s,transform .5s var(--ease)}
.cwn-done.is-on{opacity:1;transform:translate(-50%,0)}
.cwn-insp{display:grid;grid-template-rows:auto auto 1fr auto;gap:22px;padding:clamp(24px,2.8vw,40px);border-left:1px solid rgba(236,248,241,.1);background:rgba(236,248,241,.035)}
.cwn-txs{display:grid}
.cwn-tx{grid-area:1/1;display:grid;align-content:start;gap:12px;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .35s,transform .5s var(--ease),visibility 0s .5s}
.cwn-tx.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .12s,transform .7s var(--ease) .12s,visibility 0s}
.cwn-k{font:500 .64rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#9FE5BA}
.cwn-tx h3{font:600 clamp(1.6rem,1.1rem + 1.2vw,2.4rem)/1.06 var(--f-display);letter-spacing:-.025em;color:var(--on-forest)}
.cwn-tx p{max-width:40ch;font-size:1.02rem;line-height:1.6;color:var(--on-forest-2)}
.cwn-out{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border-radius:16px;background:rgba(236,248,241,.07);border:1px solid rgba(236,248,241,.1)}
.cwn-ok{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#9FE5BA;color:#0A2419;font-size:13px}
.cwn-out small{display:block;font:500 .56rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--on-forest-2)}
.cwn-out b{display:block;margin-top:5px;font-size:.88rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwn-out b.is-swap{animation:cwbswap .45s var(--ease)}
.cwn-ctl{grid-row:4;display:flex;align-items:center;gap:12px}
.cwn-arw[data-cwn-step="-1"] .ic{transform:rotate(180deg)}
.cwn-dots{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.cwn-dots i{height:4px;border-radius:4px;background:rgba(236,248,241,.16);transition:background-color .45s}
.cwn-dots i.is-on{background:#9FE5BA}

/* workflow examples: five workflows around a rep; each run drops a note on her screen */
.cwe{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.95fr) minmax(0,1fr);align-items:center;gap:clamp(16px,2vw,28px);margin-top:clamp(24px,3vw,40px)}
.cwe-col{display:grid;gap:14px}
.cwe-c{position:relative;display:grid;gap:10px;padding:18px 18px 20px;border-radius:22px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow-s);cursor:pointer;overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s,border-color .5s,opacity .45s}
.cwe-c:hover{transform:translateY(-3px)}
.cwe-c.is-fire{border-color:color-mix(in srgb,var(--good) 55%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 12%,transparent),var(--shadow)}
.cwe-ch{display:flex;align-items:center;gap:12px}
.cwe-ic{display:grid;place-items:center;flex:none;width:38px;height:38px;border-radius:12px;background:var(--mint);color:var(--on-mint);font-size:17px;transition:background-color .4s,color .4s}
.cwe-c[data-tone="lav"] .cwe-ic{background:var(--lav);color:var(--on-lav)}
.cwe-c h3{flex:1;min-width:0;font:600 1.06rem/1.2 var(--f-display);letter-spacing:-.01em}
.cwe-c p{font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.cwe-flow{display:flex;flex-wrap:wrap;align-items:center;gap:5px;font:500 .58rem/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.cwe-flow span{padding:5px 8px;border-radius:8px;background:var(--paper-2)}
.cwe-flow i{display:inline-grid;color:var(--good);font-size:10px}
.cwe-bar{position:absolute;left:0;right:0;bottom:0;height:3px}
.cwe-bar b{display:block;height:100%;background:var(--good);transform-origin:0 50%;transform:scaleX(0)}
.cwe-c.is-fire .cwe-bar b{animation:cwebar 2.9s linear forwards}
@keyframes cwebar{to{transform:scaleX(1)}}
.cwe-sw{position:relative;flex:none;width:46px;height:27px;padding:0;border:0;border-radius:999px;background:var(--good);cursor:pointer;transition:background-color .3s}
.cwe-sw i{position:absolute;left:3px;top:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transform:translateX(19px);transition:transform .35s var(--ease)}
.cwe-sw[aria-pressed="false"]{background:color-mix(in srgb,var(--ink) 22%,transparent)}
.cwe-sw[aria-pressed="false"] i{transform:none}
.cwe-c.is-off{opacity:.58}
.cwe-c.is-off .cwe-ic{background:var(--paper-3);color:var(--ink-3)}
.cwe-ph{position:relative;margin:0;aspect-ratio:3/4;border-radius:30px;overflow:hidden;background:var(--paper-2);box-shadow:0 40px 70px -46px rgba(11,31,23,.6)}
.cwe-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cwe-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,16,11,.22),rgba(4,16,11,0) 22%,rgba(4,16,11,0) 52%,rgba(4,16,11,.45));pointer-events:none}
.cwe-feed{position:absolute;left:12px;right:12px;bottom:12px;z-index:1;display:flex;flex-direction:column-reverse;gap:8px}
.cwe-t{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px 10px 10px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 16px 30px -20px rgba(4,16,11,.7);transform-origin:50% 100%;animation:cwein .6s var(--ease) backwards;transition:opacity .45s,transform .45s var(--ease)}
@keyframes cwein{from{opacity:0;transform:translateY(16px) scale(.95)}}
.cwe-t:nth-child(2){opacity:.88;transform:scale(.97)}
.cwe-t:nth-child(3){opacity:.62;transform:scale(.94)}
.cwe-t.is-gone{opacity:0;transform:scale(.9)}
.cwe-tic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--mint);color:var(--on-mint);font-size:14px}
.cwe-t--lav .cwe-tic{background:var(--lav);color:var(--on-lav)}
.cwe-t--off .cwe-tic{background:var(--paper-3);color:var(--ink-3)}
.cwe-tt{display:grid;gap:2px;min-width:0}
.cwe-tt b{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwe-tt small{font-size:.72rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cwe-t em{font:500 .56rem/1 var(--f-mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.cwe-who{position:absolute;left:12px;top:12px;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font-size:.76rem;font-weight:600;color:var(--ink)}
.cwe-who i{width:7px;height:7px;border-radius:50%;background:var(--good);animation:wfblink 1.6s ease-in-out infinite}

/* good for: big team cards that stack as you scroll */
.cwt{list-style:none;margin:clamp(24px,3vw,40px) 0 0;padding:0;display:grid;gap:28px}
.cwt-c{position:sticky;top:calc(98px + var(--i) * 16px)}
.cwt-in{--p:0;position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);height:clamp(380px,calc(100vh - 300px),470px);border-radius:32px;overflow:hidden;background:var(--mint);color:var(--ink);box-shadow:0 30px 60px -40px rgba(11,31,23,.55);transform-origin:50% 0;transform:scale(calc(1 - var(--p) * .06))}
.cwt-in::after{content:"";position:absolute;inset:0;z-index:2;background:#04100B;opacity:calc(var(--p) * .3);pointer-events:none}
.cwt-c:nth-child(2) .cwt-in{background:var(--lav)}
.cwt-c:nth-child(3) .cwt-in{background:var(--forest);color:var(--on-forest)}
.cwt-c:nth-child(4) .cwt-in{background:var(--paper-2);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -40px rgba(11,31,23,.55)}
.cwt-c:nth-child(5) .cwt-in{background:var(--lav-3);box-shadow:inset 0 0 0 1px var(--line),0 30px 60px -40px rgba(11,31,23,.55)}
.cwt-c:nth-child(even) .cwt-ph{order:2}
.cwt-ph{position:relative;margin:0;min-height:0;overflow:hidden}
.cwt-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cwt-tx{display:flex;flex-direction:column;gap:14px;min-width:0;padding:clamp(24px,3vw,46px)}
.cwt-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cwt-ic{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--paper);color:var(--ink);font-size:21px}
.cwt-c:nth-child(3) .cwt-ic{background:#9FE5BA;color:#0A2419}
.cwt-c:nth-child(4) .cwt-ic{background:var(--mint);color:var(--on-mint)}
.cwt-c:nth-child(5) .cwt-ic{background:var(--lav);color:var(--on-lav)}
.cwt-n{font:500 .7rem/1 var(--f-mono);letter-spacing:.08em;opacity:.7}
.cwt-tx h3{margin-top:auto;font:600 clamp(1.9rem,1.2rem + 1.9vw,3.1rem)/1.02 var(--f-display);letter-spacing:-.03em;color:inherit}
.cwt-tx p{max-width:38ch;font-size:clamp(1rem,.95rem + .2vw,1.12rem);line-height:1.55;color:inherit;opacity:.82}
.cwt-flow{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;background:var(--paper);font-size:.82rem;font-weight:600}
.cwt-flow .ic{color:var(--good)}
.cwt-c:nth-child(3) .cwt-flow{background:rgba(236,248,241,.12)}
.cwt-c:nth-child(3) .cwt-flow .ic{color:#9FE5BA}
.cwt-c:nth-child(4) .cwt-flow,.cwt-c:nth-child(5) .cwt-flow{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}

.cwe-sw:focus-visible,.cwn-play:focus-visible,.cwn-arw:focus-visible{outline:2px solid var(--good);outline-offset:3px}

/* advantages: bento on a mint board */
.board.wfa-board{background:var(--mint-3)}
.wfa{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:clamp(24px,3vw,40px)}
.wfa-c{grid-column:span 2;grid-row:span 3;display:grid;grid-template-rows:subgrid;gap:8px;padding:18px 18px 22px;border-radius:26px;background:var(--paper);border:1px solid var(--line)}
.wfa-c--1,.wfa-c--2{grid-column:span 3}
.wfa-vis{display:grid;align-content:center;gap:10px;min-height:150px;margin-bottom:8px;padding:16px;border-radius:18px;background:var(--paper-2)}
.wfa-c h3{font:600 1.12rem/1.2 var(--f-display);letter-spacing:-.01em}
.wfa-c p{font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.wfa-same{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wfa-same li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px}
.wfa-same b{font:500 .6rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--good)}
.wfa-path{position:relative;display:flex;justify-content:space-between;align-items:center}
.wfa-path::before{content:"";position:absolute;left:4px;right:4px;top:50%;height:2px;margin-top:-1px;background:color-mix(in srgb,var(--ink) 14%,transparent)}
.wfa-path em{position:relative;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid color-mix(in srgb,var(--ink) 22%,transparent);animation:wfastep 3.2s ease-in-out infinite}
.wfa-path em:nth-child(2){animation-delay:.5s}.wfa-path em:nth-child(3){animation-delay:1s}.wfa-path em:nth-child(4){animation-delay:1.5s}
@keyframes wfastep{0%,8%{background:var(--paper);border-color:color-mix(in srgb,var(--ink) 22%,transparent)}18%,60%{background:var(--good);border-color:var(--good)}80%,100%{background:var(--paper);border-color:color-mix(in srgb,var(--ink) 22%,transparent)}}
.wfa-fus{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.wfa-fus li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 11px;border-radius:12px;background:var(--paper);font-size:.84rem;font-weight:600;transition:opacity .4s}
.wfa-fus li > i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 22%,transparent);color:transparent;font-size:11px;transition:background-color .35s,border-color .35s,color .35s}
.wfa-fus em{font:500 .56rem/1 var(--f-mono);font-style:normal;letter-spacing:.05em;text-transform:uppercase;color:var(--good);opacity:0;transition:opacity .4s}
.wfa-fus li.is-on > i{background:var(--good);border-color:var(--good);color:#fff}
.wfa-fus li.is-on em{opacity:1}
.wfa-bars{display:grid;gap:14px}
.wfa-ba{display:flex;gap:6px;margin-bottom:2px}
.wfa-ba b{padding:5px 10px;border-radius:999px;background:var(--paper);color:var(--ink-3);font-size:.7rem;font-weight:600;transition:background-color .45s,color .45s}
.wfa-c--3:not(.is-after) .wfa-ba b:first-child,.wfa-c--3.is-after .wfa-ba b:last-child{background:var(--ink);color:var(--paper)}
.wfa-bars span{display:grid;gap:6px}
.wfa-bars small{font:500 .58rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.wfa-bars i{display:block;height:14px;border-radius:999px;transition:width 1.4s var(--ease)}
.wfa-bars i[data-wfa-b1]{width:72%;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.wfa-bars i[data-wfa-b2]{width:30%;background:var(--good)}
.wfa-c--3.is-after i[data-wfa-b1]{width:26%}
.wfa-c--3.is-after i[data-wfa-b2]{width:82%}
.wfa-rules{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.wfa-rules li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-radius:12px;background:var(--paper);font-size:.8rem;font-weight:600}
.wfa-sw{position:relative;flex:none;width:32px;height:19px;border-radius:999px;background:color-mix(in srgb,var(--ink) 20%,transparent);transition:background-color .35s}
.wfa-sw::after{content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:#fff;transition:transform .35s var(--ease)}
.wfa-sw.on{background:var(--good)}
.wfa-sw.on::after{transform:translateX(13px)}
.wfa-edit,.wfa-inh{justify-self:start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--lav-3);color:color-mix(in srgb,var(--lav-2) 50%,var(--ink));font-size:.7rem;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .45s var(--ease)}
.wfa-inh{background:var(--good-bg);color:var(--good)}
.wfa-edit.is-on,.wfa-inh.is-on{opacity:1;transform:none}
.wfa-team{display:flex;align-items:center}
.wfa-team .av{width:42px;height:42px;font-size:.74rem;margin-right:-8px;box-shadow:0 0 0 3px var(--paper-2);transition:transform .5s var(--ease),opacity .4s}
.wfa-team .wfa-new{opacity:0;transform:scale(.5) translateX(-10px)}
.wfa-team .wfa-new.is-on{opacity:1;transform:none;box-shadow:0 0 0 3px var(--paper-2),0 0 0 5px var(--good)}
/* the same bento with four cards (AI Call Controls page) and a call that a rep redirects by hand */
.wfa--4 .wfa-c{grid-column:span 3}
.wfa-ov{display:grid;gap:8px}
.wfa-ov-c{display:flex;align-items:center;gap:8px;font:500 .62rem/1.2 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.wfa-ov-c .ic{color:var(--good);font-size:13px}
.wfa-ov-s{display:grid}
.wfa-ov-s > span{grid-area:1/1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:11px 12px;border-radius:14px;background:var(--paper);font-size:.8rem;transition:opacity .5s,transform .6s var(--ease)}
.wfa-ov small{display:block;font:500 .56rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.wfa-ov b{display:block;margin-top:3px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wfa-ov i{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--mint);color:var(--on-mint);font-size:14px}
.wfa-ov .wfa-ov-b i{background:var(--lav);color:var(--on-lav)}
.wfa-c--3:not(.is-after) .wfa-ov-b,.wfa-c--3.is-after .wfa-ov-a{opacity:0;transform:translateY(8px)}
/* AI Calling Assistant: the sample-summary bento */
.wfa-q{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:4px 10px;margin:0;padding:12px 14px;border-radius:16px 16px 16px 4px;background:var(--paper)}
.wfa-q > span{grid-row:span 2;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--lav);color:var(--on-lav);font-size:14px}
.wfa-q b{font-size:.9rem;font-weight:600}
.wfa-q small{font:500 .56rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.wfa-wk{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.wfa-wk span{display:grid;justify-items:center;gap:5px;padding:9px 0;border-radius:12px;background:var(--paper);font:500 .56rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.wfa-wk b{font:600 1rem/1 var(--f-display);color:var(--ink)}
.wfa-wk .on{background:var(--btn);color:var(--btn-fg)}
.wfa-wk .on b{color:var(--btn-fg)}
.wfa-btns{display:flex;gap:6px}
.wfa-btns > b,.wfa-btns > i{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;font-size:.74rem;font-weight:600;font-style:normal}
.wfa-btns > b{background:var(--paper);color:var(--ink);transition:background-color .4s,color .4s}
.wfa-btns > b .ic{font-size:11px}
.wfa-btns > b.is-on{background:var(--good);color:#fff}
.wfa-btns > i{border:1px solid var(--line);color:var(--ink-2)}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cwb,.cwn,.cwe,.wfa{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .wfh-r,.wfh-ok,.wfa-bars i,.wfa-fus li > i,.wfa-team .av,.cwb-p,.cwb-p > img,.cwb-body,.cwb-ui,.cwn-tx,.cwn-w--on,.cwe-t,.cwe-c,.cwt-in{transition:none!important;animation:none!important}
  .wfh-on i,.wfa-path em,.cwb-ping i::after,.cwb-avs .av,.cwb-ring-f,.cwb-task i,.cwb-fl li,.cwn-live i,.cwn-st,.cwe-who i{animation:none!important}
  .cwb-fl li{opacity:1}
  .cwb-ring .cwb-ring-f{stroke-dashoffset:35}
  .cwb-task i{background:var(--good);border-color:var(--good);color:#fff}
  .cwt-in{transform:none!important}
  .cwt-in::after{display:none}
}
@media (max-width:1100px){
  .cwb-row{height:clamp(420px,calc(100vh - 250px),480px)}
  .cwb-vt{font-size:1rem}
  .cwb-body p{font-size:.94rem}
  .cwn-body{grid-template-columns:1fr}
  .cwn-insp{border-left:0;border-top:1px solid rgba(236,248,241,.1)}
  .cwn-nodes li{width:62%}
  .cwe{grid-template-columns:minmax(0,.82fr) minmax(0,1fr);align-items:start}
  .cwe-col{display:contents}
  .cwe-ph{grid-column:1;grid-row:1 / span 5;position:sticky;top:98px}
  .cwe-c{grid-column:2}
  .cwt-in{height:clamp(360px,calc(100vh - 300px),430px)}
  .wfa{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wfa-c,.wfa-c--1,.wfa-c--2{grid-column:auto}
  .wfa-c--5{grid-column:1/-1}
  .wfa--4 .wfa-c{grid-column:auto}
}
@media (max-width:760px){
  .cwb-row{flex-direction:column;height:auto;gap:10px}
  .cwb-p{flex:none;height:70px;border-radius:22px;transition:height .8s cubic-bezier(.65,0,.25,1)}
  .cwb-p.is-on{height:500px}
  .cwb-tab{flex-direction:row;justify-content:flex-start;gap:12px;padding:0 18px}
  .cwb-tab:focus-visible{border-radius:22px}
  .cwb-vt{writing-mode:horizontal-tb;font-size:1.05rem}
  .cwb-ti{width:32px;height:32px;margin:0 0 0 auto;font-size:14px}
  .cwb-p:not(.is-on):hover{flex-grow:0}
  .cwb-ui{top:14px;left:14px;right:14px;width:auto}
  .cwb-body{left:18px;bottom:32px;width:calc(100% - 36px)}
  .cwb-body p{font-size:.92rem}
  .cwb-prog{left:18px;right:18px;bottom:15px}
  .cwn-top{gap:10px;padding:12px 12px 12px 14px}
  .cwn-live{display:none}
  .cwn-name{margin-right:auto}
  .cwn-canvas{padding:20px 14px 72px}
  .cwn-nodes{gap:24px}
  .cwn-nodes li{width:88%}
  .cwn-node{gap:10px;padding:10px 11px 10px 10px}
  .cwn-nic{width:34px;height:34px;font-size:15px}
  .cwn-insp{padding:22px 18px 20px}
  .cwe{grid-template-columns:1fr}
  .cwe-ph{grid-column:auto;grid-row:auto;position:relative;top:auto;order:-1;aspect-ratio:4/5}
  .cwe-c{grid-column:auto}
  .cwt{gap:20px}
  .cwt-c{top:calc(80px + var(--i) * 10px)}
  .cwt-in{grid-template-columns:1fr;grid-template-rows:minmax(0,44%) minmax(0,1fr);height:clamp(470px,calc(100vh - 160px),540px);border-radius:26px}
  .cwt-c:nth-child(even) .cwt-ph{order:0}
  .cwt-tx{gap:10px;padding:20px 20px 24px}
  .cwt-ic{width:42px;height:42px;border-radius:13px;font-size:18px}
  .cwt-tx h3{font-size:1.7rem}
  .cwt-tx p{font-size:.95rem}
  .cwt-flow{font-size:.76rem}
  .wfa{grid-template-columns:1fr}
  .wfa-fus li{grid-template-columns:auto minmax(0,1fr);row-gap:3px}
  .wfa-fus em{grid-column:2}
  .wfa-c--5{grid-column:auto}
}

/* ===================== CRM Integrations page (/integrations/) ===================== */
/* hero card: a contact record — the call starts here, the fields fill in, "Synced" */
.crh{width:min(330px,82%);display:grid;gap:10px}
.crh-link{display:flex;align-items:center;gap:8px}
.crh-app{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:999px;background:var(--paper-2);font-size:.7rem;font-weight:600;white-space:nowrap}
.crh-app .ic{width:22px;height:22px;padding:5px;border-radius:50%;background:var(--lav);color:var(--on-lav)}
.crh-app--dt .ic{background:var(--forest);color:#9FE5BA}
.crh-wire{position:relative;flex:1;height:2px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--ink) 24%,transparent) 0 4px,transparent 4px 8px)}
.crh-wire i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--good);animation:crhw 2.6s ease-in-out infinite}
.crh-wire i:nth-child(2){background:var(--lav-2);animation-name:crhw2;animation-delay:1.3s}
@keyframes crhw{0%{left:0;opacity:0}15%,85%{opacity:1}100%{left:calc(100% - 8px);opacity:0}}
@keyframes crhw2{0%{left:calc(100% - 8px);opacity:0}15%,85%{opacity:1}100%{left:0;opacity:0}}
.crh-rec{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-radius:14px;background:var(--paper-2)}
.crh-rec .av{width:34px;height:34px;font-size:.66rem}
.crh-rec b{display:block;font-size:.84rem;font-weight:600}
.crh-rec small{display:block;font-size:.7rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crh-call{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:.7rem;font-weight:600;transition:background-color .35s}
.crh-call .ic{width:12px;height:12px}
.crh-call em{font-style:normal}
.crh.is-calling .crh-call{background:var(--good);color:#fff;animation:crhring 1s ease-in-out infinite}
@keyframes crhring{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--good) 22%,transparent)}}
.crh-fs{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.crh-f{display:grid;grid-template-columns:62px minmax(0,1fr) 18px;align-items:center;gap:8px;padding:8px 9px;border-radius:12px;background:var(--paper-2);transition:background-color .45s}
.crh-f span{font:600 .55rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.crh-f b{font-size:.76rem;font-weight:600;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .4s}
.crh-f b.is-swap{animation:cwbswap .5s var(--ease)}
.crh-f i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--good);color:#fff;font-size:10px;opacity:0;transform:scale(.6);transition:opacity .3s,transform .35s var(--ease)}
.crh-f.is-new{background:var(--mint-3)}
.crh-f.is-new b{color:var(--ink)}
.crh-f.is-new i{opacity:1;transform:none}
.crh-foot{display:flex;align-items:center;gap:8px;margin:0;font:500 .6rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);transition:color .4s}
.crh-foot i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--ink) 25%,transparent);transition:background-color .4s}
.crh.is-synced .crh-foot{color:var(--good)}
.crh.is-synced .crh-foot i{background:var(--good);animation:wfblink 1.6s ease-in-out infinite}

/* overview: Without / With — three loose tools snap into one record */
.cro{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(24px,3vw,40px)}
.cro-side{display:grid;gap:24px;align-content:center}
.cro-tg{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(100%,440px);padding:5px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line)}
.cro-tg button{position:relative;z-index:1;padding:11px 12px;border:0;border-radius:999px;background:none;color:var(--ink-2);font:600 .82rem/1.2 var(--f-body);cursor:pointer;transition:color .4s}
.cro-tg button:hover{color:var(--ink)}
.cro-tg button[aria-pressed="true"]{color:var(--btn-fg)}
.cro-tg button:focus-visible{outline:2px solid var(--good);outline-offset:2px}
.cro-pill{position:absolute;left:5px;top:5px;bottom:5px;width:calc(50% - 5px);border-radius:999px;background:var(--btn);transition:transform .6s var(--ease)}
.cro.is-with .cro-pill{transform:translateX(100%)}
.cro-txs{display:grid}
.cro-tx{grid-area:1/1;display:grid;gap:12px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s,transform .5s var(--ease),visibility 0s .5s}
.cro-tx.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .1s,transform .7s var(--ease) .1s,visibility 0s}
.cro-tx h3{font:600 clamp(1.7rem,1.1rem + 1.3vw,2.5rem)/1.06 var(--f-display);letter-spacing:-.025em}
.cro-tx p{max-width:40ch;font-size:1.05rem;line-height:1.6;color:var(--ink-2)}
.cro-stage{position:relative;height:420px;border-radius:30px;background:radial-gradient(60% 70% at 100% 0%,color-mix(in srgb,var(--lav) 55%,transparent),transparent 70%),radial-gradient(60% 70% at 0% 100%,color-mix(in srgb,var(--mint) 80%,transparent),transparent 70%),var(--paper-2);overflow:hidden;isolation:isolate}
.cro-stage::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(color-mix(in srgb,var(--ink) 12%,transparent) 1px,transparent 1.3px);background-size:22px 22px;opacity:.6}
.cro-t{position:absolute;border-radius:18px;background:var(--paper);border:1px solid var(--line);box-shadow:0 24px 44px -26px rgba(11,31,23,.45);overflow:hidden;transition:left .9s var(--ease),top .9s var(--ease),width .9s var(--ease),height .9s var(--ease),transform .9s var(--ease)}
.cro-t--crm{left:44%;top:24px;width:52%;height:236px;padding:14px;transform:rotate(3deg);z-index:1}
.cro-t--ph{left:3%;top:44px;width:38%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 12px 9px 9px;transform:rotate(-5deg);z-index:2}
.cro-t--nt{left:10%;top:262px;width:42%;height:128px;padding:12px 14px;transform:rotate(-2deg);z-index:2}
.cro.is-with .cro-t--crm{left:7%;top:22px;width:86%;height:376px;transform:none}
.cro.is-with .cro-t--ph{left:11%;top:70px;width:78%;transform:none}
.cro.is-with .cro-t--nt{left:11%;top:256px;width:78%;height:86px;transform:none}
.cro-rec{transition:opacity .4s}
.cro.is-with .cro-rec{opacity:0}
.cro-bar{display:flex;align-items:center;gap:5px;margin:0 0 12px;font:500 .58rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cro-bar i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.cro-bar span{margin-left:6px}
.cro-rec{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;margin-bottom:22px}
.cro-rec .av{width:36px;height:36px;font-size:.68rem}
.cro-rec b,.cro-ph b{display:block;font-size:.86rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cro-rec small,.cro-ph small{display:block;font-size:.72rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cro-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cro-rows li{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:8px;padding:7px 10px;border-radius:10px;background:var(--paper-2)}
.cro-rows span{font:500 .56rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.cro-rows b{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cro-no,.cro-yes{font-style:normal}
.cro-yes{display:none}
.cro.is-with .cro-no{display:none}
.cro.is-with .cro-yes{display:inline;animation:cwbswap .6s var(--ease)}
.cro-rows .cro-no{color:var(--ink-3)}
.cro-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--forest);color:#9FE5BA;font-size:14px}
.cro-tm{font:500 .7rem/1 var(--f-mono);color:var(--good);font-variant-numeric:tabular-nums}
.cro-ln{display:block;height:7px;margin-bottom:8px;border-radius:7px;background:var(--paper-3)}
.cro.is-with .cro-ln{display:none}
.cro-saved{display:none;align-items:center;gap:7px;font-size:.78rem;font-weight:600;color:var(--good)}
.cro-saved .ic{width:18px;height:18px;padding:4px;border-radius:50%;background:var(--good);color:#fff}
.cro.is-with .cro-saved{display:inline-flex;animation:cwbswap .6s var(--ease) .3s both}
.cro-lost,.cro-ok{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap;box-shadow:0 12px 24px -16px rgba(11,31,23,.5);transition:opacity .45s,transform .6s var(--ease)}
.cro-lost .ic,.cro-ok .ic{width:12px;height:12px}
.cro-lost{background:var(--bad-bg);color:var(--bad);animation:crobob 3.4s ease-in-out infinite}
.cro-lost--2,.cro-lost--3{background:var(--warn-bg);color:var(--warn)}
.cro-lost--1{left:56%;top:290px}
.cro-lost--2{left:5%;top:172px;animation-delay:-1.1s}
.cro-lost--3{left:60%;top:346px;animation-delay:-2.2s}
@keyframes crobob{50%{transform:translateY(-6px) rotate(-2deg)}}
.cro.is-with .cro-lost{opacity:0;transform:translateY(18px) scale(.9);animation:none}
.cro-ok{left:50%;top:356px;background:var(--good);color:#fff;opacity:0;transform:translate(-50%,10px)}
.cro.is-with .cro-ok{opacity:1;transform:translate(-50%,0);transition-delay:.5s}
.cro-pts{list-style:none;margin:clamp(24px,3vw,36px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cro-pt{display:grid;align-content:start;gap:8px;padding:20px;border-radius:22px;background:var(--paper);border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s}
.cro-pt:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cro-pic{display:grid;place-items:center;width:42px;height:42px;margin-bottom:4px;border-radius:13px;background:var(--mint);color:var(--on-mint);font-size:18px}
.cro-pt:nth-child(2) .cro-pic{background:var(--lav);color:var(--on-lav)}
.cro-pt:nth-child(3) .cro-pic{background:var(--forest);color:#9FE5BA}
.cro-pt h3{font:600 1.1rem/1.2 var(--f-display);letter-spacing:-.01em}
.cro-pt p{font-size:.92rem;line-height:1.55;color:var(--ink-2)}

/* data sync: DialTri | five lanes | your CRM */
.crd{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,.9fr) minmax(0,1fr);grid-template-areas:"dt mid crm" "tx tx tx";gap:26px clamp(16px,2vw,28px);align-items:center;margin-top:clamp(24px,3vw,40px)}
.crd-w--dt{grid-area:dt}.crd-mid{grid-area:mid}.crd-w--crm{grid-area:crm}.crd-txs{grid-area:tx}
.crd-w{display:grid;gap:8px;padding:16px;border-radius:24px;box-shadow:0 36px 64px -44px rgba(11,31,23,.55)}
.crd-w--dt{background:var(--forest);color:var(--on-forest);--hit:#9FE5BA}
.crd-w--crm{background:var(--paper);border:1px solid var(--line);--hit:var(--good)}
:root[data-mode="dark"] .crd-w--dt{border:1px solid var(--line)}
.crd-wh{display:flex;align-items:center;gap:9px;margin:0 0 6px;font-size:.92rem;font-weight:600}
.crd-wh em{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font:500 .56rem/1 var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.crd-wh em i{width:6px;height:6px;border-radius:50%;background:#9FE5BA;animation:wfblink 1.4s ease-in-out infinite}
.crd-wi{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#9FE5BA;color:#0A2419;font-size:14px}
.crd-w--crm .crd-wi{background:var(--lav);color:var(--on-lav)}
.crd-who{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:10px;border-radius:14px;background:rgba(236,248,241,.07)}
.crd-who .av{width:34px;height:34px;font-size:.66rem}
.crd-who b{display:block;font-size:.86rem}
.crd-who small{display:block;font-size:.72rem;color:var(--on-forest-2)}
.crd-rows{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.crd-rows li{display:grid;grid-template-columns:66px minmax(0,1fr);align-items:center;gap:8px;padding:8px 10px;border-radius:11px;background:var(--paper-2)}
.crd-w--dt .crd-rows li{background:rgba(236,248,241,.06)}
.crd-rows span{font:500 .55rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.crd-w--dt .crd-rows span{color:var(--on-forest-2)}
.crd-rows b{font-size:.8rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crd-in{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;margin:0;padding:9px 10px;border-radius:12px;background:rgba(159,229,186,.1);font-size:.74rem;color:var(--on-forest-2)}
.crd-in .ic{width:26px;height:26px;padding:6px;border-radius:50%;background:#9FE5BA;color:#0A2419}
.crd-in b{display:block;margin-top:2px;font-size:.8rem;color:var(--on-forest)}
.crd-tl{list-style:none;margin:2px 0 0;padding:10px 10px 4px;border-radius:12px;background:var(--paper-2);display:grid;gap:8px}
.crd-tl li{position:relative;display:flex;align-items:center;gap:9px;font-size:.76rem;color:var(--ink-2)}
.crd-tl li i{flex:none;width:9px;height:9px;border-radius:50%;border:2px solid var(--good);background:var(--paper)}
.crd-tl li:first-child{color:var(--ink);font-weight:600}
.crd-tl li:first-child i{background:var(--good)}
.crd [data-k]{transition:box-shadow .45s,opacity .45s}
.crd.is-live [data-k]:not(.is-hit){opacity:.5}
.crd [data-k].is-hit{box-shadow:0 0 0 2px var(--hit),0 0 0 6px color-mix(in srgb,var(--hit) 18%,transparent)}
.crd-ends{display:flex;justify-content:space-between;margin:0 0 10px;padding:0 4px;font:500 .58rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.crd-lanes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.crd-l{display:grid;gap:8px;width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink-2);font:inherit;text-align:left;cursor:pointer;transition:background-color .4s,border-color .4s,color .4s,box-shadow .4s}
.crd-l:hover{color:var(--ink)}
.crd-l:focus-visible{outline:2px solid var(--good);outline-offset:2px}
.crd-lt{display:flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600}
.crd-lt .ic{flex:none;width:13px;height:13px;color:var(--good)}
.crd-l--in .crd-lt .ic{transform:rotate(180deg);color:var(--lav-2)}
.crd-tr{position:relative;display:block;height:4px;border-radius:4px;background:var(--paper-3);overflow:hidden}
.crd-tr i{position:absolute;left:0;top:0;width:28%;height:100%;border-radius:4px;background:linear-gradient(90deg,transparent,var(--good));opacity:.3;animation:crdgo 2s linear infinite}
.crd-tr i:nth-child(2){animation-delay:-1s}
.crd-l--in .crd-tr i{background:linear-gradient(270deg,transparent,var(--lav-2));animation-name:crdback}
@keyframes crdgo{from{transform:translateX(-100%)}to{transform:translateX(360%)}}
@keyframes crdback{from{transform:translateX(360%)}to{transform:translateX(-100%)}}
.crd-l.is-on{border-color:color-mix(in srgb,var(--good) 50%,var(--line));background:var(--mint-3);color:var(--ink);box-shadow:0 14px 26px -18px rgba(11,31,23,.5)}
.crd-l--in.is-on{border-color:color-mix(in srgb,var(--lav-2) 60%,var(--line));background:var(--lav-3)}
.crd-l.is-on .crd-tr i{opacity:1;animation-duration:1.3s}
.crd-txs{display:grid;justify-self:center;width:min(100%,640px);text-align:center}
.crd-tx{grid-area:1/1;display:grid;gap:8px;justify-items:center;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .35s,transform .5s var(--ease),visibility 0s .5s}
.crd-tx.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease .1s,transform .6s var(--ease) .1s,visibility 0s}
.crd-k{font:500 .62rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--good)}
.crd-tx h3{font:600 clamp(1.35rem,1.1rem + .7vw,1.8rem)/1.15 var(--f-display);letter-spacing:-.02em}
.crd-tx p{font-size:1rem;line-height:1.6;color:var(--ink-2)}

/* setup: a settings window that walks through the five steps */
.crs{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(20px,3vw,44px);align-items:start;margin-top:clamp(24px,3vw,40px)}
.crs-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.crs-s{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:14px;width:100%;padding:14px 16px;border:1px solid transparent;border-radius:18px;background:none;color:var(--ink-2);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:background-color .35s,border-color .35s,box-shadow .35s,color .35s}
.crs-s:hover{background:var(--paper-2)}
.crs-s:focus-visible{outline:2px solid var(--good);outline-offset:2px}
.crs-s.is-on{background:var(--paper);border-color:var(--line);box-shadow:var(--shadow-s);color:var(--ink)}
.crs-n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ink) 20%,transparent);font:600 .8rem/1 var(--f-mono);transition:background-color .35s,border-color .35s,color .35s}
.crs-s.is-on .crs-n{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.crs-s.is-done .crs-n{background:var(--good-bg);border-color:var(--good);color:var(--good)}
.crs-st{padding-top:6px}
.crs-st b{display:block;font:600 1.04rem/1.25 var(--f-display);letter-spacing:-.01em}
.crs-st small{display:block;max-height:0;opacity:0;overflow:hidden;font-size:.9rem;line-height:1.5;color:var(--ink-2);transition:max-height .5s var(--ease),opacity .4s,margin .4s}
.crs-s.is-on .crs-st small{max-height:90px;margin-top:5px;opacity:1}
.crs-ck{display:grid;place-items:center;width:22px;height:22px;margin-top:6px;border-radius:50%;background:var(--good);color:#fff;font-size:11px;opacity:0;transform:scale(.6);transition:opacity .3s,transform .35s var(--ease)}
.crs-s.is-done .crs-ck{opacity:1;transform:none}
.crs-ln{position:absolute;left:16px;right:16px;bottom:0;height:2px}
.crs-ln b{display:block;height:100%;border-radius:2px;background:var(--good);transform-origin:0 50%;transform:scaleX(0)}
.crs-s.is-on .crs-ln b{animation:crsln 4.8s linear forwards}
.crs.is-hold .crs-ln b,.crs.is-idle .crs-ln b{animation-play-state:paused!important}
.crs.is-still .crs-ln{display:none}
@keyframes crsln{to{transform:scaleX(1)}}
.crs-win{display:grid;grid-template-rows:auto 1fr auto;min-height:430px;border-radius:26px;background:var(--paper);border:1px solid var(--line);box-shadow:0 40px 70px -46px rgba(11,31,23,.5);overflow:hidden}
.crs-top{display:flex;align-items:center;gap:6px;margin:0;padding:13px 16px;border-bottom:1px solid var(--line);background:var(--paper-2);font:500 .6rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.crs-top > i{width:9px;height:9px;border-radius:50%;background:color-mix(in srgb,var(--ink) 16%,transparent)}
.crs-top > span{margin-left:8px}
.crs-prog{margin-left:auto;width:90px;height:4px;border-radius:4px;background:var(--paper-3);overflow:hidden}
.crs-prog i{display:block;height:100%;border-radius:inherit;background:var(--good);transform-origin:0 50%;transform:scaleX(var(--p,.2));transition:transform .6s var(--ease)}
.crs-panes{display:grid;padding:clamp(18px,2vw,26px)}
.crs-p{grid-area:1/1;display:grid;align-content:start;gap:16px;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.crs-p.is-on{opacity:1;visibility:visible;transition:opacity .4s ease .05s,visibility 0s}
.crs-ph{display:none}
.crs-ui{display:grid;gap:12px;align-content:start}
.crs-a{opacity:0;transform:translateY(8px)}
.crs-p.is-on .crs-a{animation:crsa .5s var(--ease) both;animation-delay:calc(var(--d,0) * 120ms + 150ms)}
@keyframes crsa{to{opacity:1;transform:none}}
.crs-pk{display:flex;justify-content:space-between;margin:0;font:500 .6rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.crs-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.crs-tile{display:grid;align-content:start;justify-items:start;gap:8px;min-height:104px;padding:14px;border-radius:16px;border:1.5px solid var(--line);background:var(--paper-2)}
.crs-tile i{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--paper);color:var(--ink-3);font-size:15px}
.crs-tile em{display:block;width:78%;height:7px;border-radius:7px;background:var(--paper-3)}
.crs-tile em + em{width:52%}
.crs-tile b{font-size:.86rem}
.crs-p.is-on .crs-tile--on{animation:crsa .5s var(--ease) .27s both,crssel .45s ease 1.3s both}
.crs-p.is-on .crs-tile--on i{animation:crsseli .45s ease 1.3s both}
@keyframes crssel{to{border-color:var(--good);background:var(--mint-3);box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 14%,transparent)}}
@keyframes crsseli{to{background:var(--good);color:#fff}}
.crs-perm{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.crs-perm li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:var(--paper-2);font-size:.86rem;font-weight:600}
.crs-perm i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--good);color:#fff;font-size:10px}
.crs-perm small{font:500 .56rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.crs-btn{justify-self:start;display:inline-grid;padding:11px 18px;border-radius:999px;background:var(--btn);color:var(--btn-fg);font-size:.84rem;font-weight:600}
.crs-btn em{grid-area:1/1;display:inline-flex;align-items:center;gap:7px;font-style:normal}
.crs-btn em .ic{width:14px;height:14px}
.crs-btn em:last-child{opacity:0}
.crs-p.is-on .crs-btn{animation:crsa .5s var(--ease) .63s both,crsbtn .35s ease 2.1s both}
.crs-p.is-on .crs-btn em:first-child{animation:crsout .25s ease 2.05s both}
.crs-p.is-on .crs-btn em:last-child{animation:crsin .35s ease 2.25s both}
@keyframes crsbtn{to{background:var(--good);color:#fff}}
@keyframes crsout{to{opacity:0}}
@keyframes crsin{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.crs-map{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.crs-map li{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center}
.crs-map span{padding:9px 12px;border-radius:12px;background:var(--paper-2);font-size:.84rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crs-map span:last-child{background:var(--mint-3)}
.crs-map i{position:relative;height:2px;margin:0 6px;background:var(--good);transform-origin:0 50%;transform:scaleX(0)}
.crs-map i::after{content:"";position:absolute;right:-2px;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--good)}
.crs-p.is-on .crs-map i{animation:crsmap .45s var(--ease) both;animation-delay:calc(var(--d,0) * 160ms + 550ms)}
@keyframes crsmap{to{transform:scaleX(1)}}
.crs-rad{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.crs-rad li{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;border:1px solid var(--line);font-size:.86rem;font-weight:600}
.crs-rad li i{flex:none;width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--ink) 28%,transparent)}
.crs-rad li.is-sel{border-color:var(--good);background:var(--mint-3)}
.crs-rad li.is-sel i{border-color:var(--good);background:var(--good);box-shadow:inset 0 0 0 3px var(--mint-3)}
.crs-chips{display:flex;flex-wrap:wrap;gap:7px}
.crs-chips span{padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--paper-2);font-size:.8rem;font-weight:600}
.crs-test{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:var(--paper-2)}
.crs-test b{display:block;font-size:.88rem}
.crs-test small{display:block;font-size:.76rem;color:var(--ink-3)}
.crs-ti{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--btn);color:var(--btn-fg);font-size:14px}
.crs-test--ok{background:var(--good-bg)}
.crs-test--ok .crs-ti{background:var(--good);color:#fff}
.crs-roll{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--line)}
.crs-roll b{display:block;font-size:.88rem}
.crs-roll small{display:block;font-size:.76rem;color:var(--ink-3)}
.crs-sw{position:relative;flex:none;width:42px;height:24px;border-radius:999px;background:color-mix(in srgb,var(--ink) 20%,transparent)}
.crs-sw::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.crs-p.is-on .crs-sw{animation:crsswb .35s ease 1.9s both}
.crs-p.is-on .crs-sw::after{animation:crsswk .4s var(--ease) 1.9s both}
@keyframes crsswb{to{background:var(--good)}}
@keyframes crsswk{to{transform:translateX(18px)}}
.crs-ft{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line)}
.crs-arw{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;transition:background-color .3s,color .3s,border-color .3s}
.crs-arw .ic{transform:rotate(180deg)}
.crs-arw:hover{background:var(--btn);border-color:var(--btn);color:var(--btn-fg)}
.crs-k{font:500 .66rem/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.crs-k b{color:var(--ink)}
.crs-next{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:0;border-radius:999px;background:var(--btn);color:var(--btn-fg);font:600 .82rem/1 var(--f-body);cursor:pointer;transition:background-color .3s}
.crs-next:hover{background:var(--btn-h)}
.crs-next .ic{width:14px;height:14px}
.crs-arw:focus-visible,.crs-next:focus-visible{outline:2px solid var(--good);outline-offset:2px}

/* configuration: one contact record in the middle, four settings around it pointing at the part they control */
.board.crc-board{background:var(--mint-3)}
.crc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,420px) minmax(0,1fr);gap:clamp(40px,6vw,104px);align-items:center;margin-top:clamp(28px,3vw,48px)}
.crc-lines{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.crc-lines path{fill:none;stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:1.5;stroke-dasharray:3 5;transition:stroke .4s}
.crc-lines circle{fill:var(--mint-3);stroke:color-mix(in srgb,var(--ink) 28%,transparent);stroke-width:1.5;transition:fill .4s,stroke .4s}
.crc-lines .is-on path{stroke:var(--good);stroke-width:2;stroke-dasharray:6 6;animation:crcdash .9s linear infinite}
.crc-lines .is-on circle{fill:var(--good);stroke:var(--good)}
@keyframes crcdash{to{stroke-dashoffset:-12}}
.crc-col{position:relative;z-index:1;list-style:none;margin:0;padding:0;display:grid;gap:clamp(64px,8vw,130px)}
.crc-col--r{align-self:end;padding-bottom:24px}
.crc-c{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:16px;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;opacity:.5;transition:opacity .4s}
.crc-col--l .crc-c{grid-template-columns:minmax(0,1fr) auto;text-align:right}
.crc-col--l .crc-n{order:2}
.crc-c:hover,.crc-c.is-on{opacity:1}
.crc-c:focus-visible{outline:2px solid var(--good);outline-offset:6px;border-radius:12px}
.crc-n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--paper);border:1.5px solid color-mix(in srgb,var(--ink) 18%,transparent);font:600 .8rem/1 var(--f-mono);transition:background-color .4s,border-color .4s,color .4s,box-shadow .4s}
.crc-c.is-on .crc-n{background:var(--btn);border-color:var(--btn);color:var(--btn-fg);box-shadow:0 0 0 7px color-mix(in srgb,var(--good) 16%,transparent)}
.crc-tx{padding-top:4px}
.crc-tx b{display:block;font:600 clamp(1.15rem,1rem + .45vw,1.4rem)/1.2 var(--f-display);letter-spacing:-.015em}
.crc-tx small{display:block;margin-top:6px;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.crc-card{position:relative;z-index:1;display:grid;gap:10px;padding:18px;border-radius:28px;background:var(--paper);box-shadow:0 44px 80px -48px rgba(11,31,23,.55)}
.crc-hd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:2px 2px 14px;border-bottom:1px solid var(--line)}
.crc-hd .av{width:42px;height:42px;font-size:.76rem}
.crc-hd b{display:block;font-size:1rem;font-weight:600}
.crc-hd small{display:block;font-size:.78rem;color:var(--ink-3)}
.crc-hd em{display:inline-flex;align-items:center;gap:6px;padding:5px 10px 5px 6px;border-radius:999px;background:var(--lav-3);color:color-mix(in srgb,var(--lav-2) 55%,var(--ink));font:500 .56rem/1 var(--f-mono);font-style:normal;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.crc-hd em .ic{width:16px;height:16px;padding:3px;border-radius:50%;background:var(--lav);color:var(--on-lav)}
.crc-p{padding:11px 13px 9px;border-radius:16px;background:var(--paper-2);transition:background-color .4s,box-shadow .4s}
.crc-p.is-on{background:var(--paper);box-shadow:0 0 0 2px var(--good),0 0 0 8px color-mix(in srgb,var(--good) 14%,transparent)}
.crc-k{display:flex;justify-content:space-between;gap:10px;margin:0 0 6px;font:500 .56rem/1.2 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.crc-k span:last-child{opacity:0;color:var(--good);transition:opacity .4s}
.crc-p.is-on .crc-k span:last-child{opacity:1}
.crc-p ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.crc-p li{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) auto;align-items:center;gap:10px;padding:5px 0;font-size:.84rem}
.crc-p li > span{font-size:.76rem;color:var(--ink-3);white-space:nowrap}
.crc-p li > b{min-width:0;font-weight:600;line-height:1.3}
.crc-chip{padding:4px 9px;border-radius:999px;background:var(--good-bg);color:var(--good);font-size:.68rem;font-weight:600;font-style:normal;white-space:nowrap;opacity:0;transform:translateX(-6px);transition:opacity .4s,transform .5s var(--ease)}
.crc-chip--off{background:var(--paper-3);color:var(--ink-3)}
.crc-p.is-on .crc-chip{opacity:1;transform:none}
.crc-p.is-on li:nth-child(2) .crc-chip{transition-delay:.12s}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .crc{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .crc-lines .is-on path{animation:none}
  .crc-c,.crc-n,.crc-p,.crc-chip{transition:none!important}
}
@media (max-width:1100px){
  .crc{grid-template-columns:minmax(0,1fr) minmax(300px,340px) minmax(0,1fr);gap:44px}
  .crc-tx small{font-size:.88rem}
}
@media (max-width:860px){
  .crc{grid-template-columns:1fr;gap:22px}
  .crc-lines{display:none}
  .crc-card{order:-1}
  .crc-col{gap:22px}
  .crc-col--r{align-self:auto;padding-bottom:0}
  .crc-hd{grid-template-columns:auto minmax(0,1fr)}
  .crc-hd em{display:none}
  .crc-col--l .crc-c{grid-template-columns:auto minmax(0,1fr);text-align:left}
  .crc-col--l .crc-n{order:0}
  .crc-n{width:40px;height:40px}
  .crc-c{opacity:.62}
}

/* configuration bento: a small CRM-field chip on the mapping rows */
.wfa-mk{padding:5px 9px;border-radius:9px;background:var(--paper);font:600 .74rem/1 var(--f-body);font-style:normal;white-space:nowrap}

@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .cro,.cro-pts,.crd,.crs{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  }
}
@media (prefers-reduced-motion:reduce){
  .crh-wire i,.crh.is-calling .crh-call,.crh.is-synced .crh-foot i,.cro-lost,.crd-tr i,.crd-wh em i{animation:none!important}
  .cro-t,.cro-tx,.crd-tx,.crs-p,.crs-st small{transition:none!important}
  .crs-a,.crs-p.is-on .crs-a,.crs-p.is-on .crs-map i{animation:none!important;opacity:1;transform:none}
  .crs-p.is-on .crs-tile--on{animation:none!important;border-color:var(--good);background:var(--mint-3)}
  .crs-p.is-on .crs-btn{animation:none!important;opacity:1;transform:none;background:var(--good);color:#fff}
  .crs-p.is-on .crs-btn em:first-child{animation:none!important;opacity:0}
  .crs-p.is-on .crs-btn em:last-child{animation:none!important;opacity:1}
  .crs-p.is-on .crs-sw{animation:none!important;background:var(--good)}
  .crs-p.is-on .crs-sw::after{animation:none!important;transform:translateX(18px)}
}
@media (max-width:1100px){
  .cro{grid-template-columns:1fr}
  .crd{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"mid mid" "tx tx" "dt crm"}
  .crd-lanes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crd-lanes li:last-child{grid-column:1/-1}
  .crs{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cro-tg button{padding:10px 8px;font-size:.76rem}
  .cro-t--ph{left:4%;top:20px;width:72%}
  .cro-t--crm{left:28%;top:96px;width:68%;height:196px;padding:12px}
  .cro-t--nt{left:5%;top:290px;width:58%;height:112px}
  .cro.is-with .cro-t--crm{left:4%;top:20px;width:92%;height:380px}
  .cro.is-with .cro-t--ph{left:8%;top:66px;width:84%}
  .cro.is-with .cro-t--nt{left:8%;top:252px;width:84%;height:86px}
  .cro-rows li{grid-template-columns:66px minmax(0,1fr)}
  .cro-rec{margin-bottom:20px}
  .cro-lost--2,.cro-lost--3{display:none}
  .cro-lost--1{left:auto;right:3%;top:330px}
  .cro-ok{top:352px}
  .cro-pts{grid-template-columns:1fr}
  .crd{grid-template-columns:1fr;grid-template-areas:"mid" "tx" "dt" "crm"}
  .crd-lanes{grid-template-columns:1fr}
  .crs-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .crs-s{grid-template-columns:1fr;justify-items:center;padding:8px 4px 12px;border-radius:14px}
  .crs-st,.crs-ck{display:none}
  .crs-ln{left:8px;right:8px}
  .crs-ph{display:grid;gap:5px}
  .crs-ph span{font:500 .6rem/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--good)}
  .crs-ph b{font:600 1.25rem/1.2 var(--f-display);letter-spacing:-.015em}
  .crs-ph small{font-size:.9rem;line-height:1.5;color:var(--ink-2)}
  .crs-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crs-tile{min-height:92px}
  .crs-k{display:none}
}


/* =====================================================================
   Log in / Sign up
   ===================================================================== */
.au-body{min-height:100svh}
.au{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);gap:16px;min-height:100svh;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px));max-width:1640px;margin-inline:auto}

/* ---------- form side ---------- */
.au-side{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--r-board);padding:clamp(20px,1rem + 1.4vw,36px) clamp(20px,1rem + 2.4vw,56px) 22px;min-width:0}
.au-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.au-top-r{display:flex;align-items:center;gap:8px}
.au-home{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:.86rem;font-weight:500;text-decoration:none;color:var(--ink-2);transition:background-color .2s,color .2s}
.au-home:hover{background:var(--paper-2);color:var(--ink)}
.au-home .ic{transition:transform .25s var(--ease)}
.au-home:hover .ic{transform:translateX(-3px)}
main.au-main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:22px;width:100%;max-width:452px;margin-inline:auto;padding-block:clamp(24px,4vh,48px)}
.au-foot{font-size:.78rem;color:var(--ink-3);text-align:center}
.au-foot a{color:var(--ink-2);text-underline-offset:3px}

/* tabs */
.au-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line-2)}
.au-tabs a{position:relative;z-index:1;display:grid;place-items:center;height:42px;border-radius:999px;font:600 .9rem/1 var(--f-body);text-decoration:none;color:var(--ink-3);transition:color .3s}
.au-tabs a[aria-current="page"]{color:var(--ink)}
.au-tabs a:hover{color:var(--ink)}
.au-tabs-pill{position:absolute;left:4px;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:999px;background:var(--paper);box-shadow:var(--shadow-s);transition:transform .45s var(--ease)}
[data-view="signup"] .au-tabs-pill{transform:translateX(100%)}
[data-view="reset"] .au-tabs,[data-view="done"] .au-tabs{display:none}
:root[data-mode="dark"] .au-tabs-pill{background:var(--paper-3)}

/* forms */
.au-card{position:relative}
.au-form{display:grid;gap:15px}
.au-form.in,.au-done.in{animation:au-in .5s var(--ease) both}
@keyframes au-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.au-head{display:grid;gap:8px;margin-bottom:4px}
.au-h{font-family:var(--f-display);font-weight:560;font-size:clamp(1.8rem,1.3rem + 1.2vw,2.3rem);line-height:1.04;letter-spacing:-.026em;text-wrap:balance}
.au-head p{color:var(--ink-2);line-height:1.55;text-wrap:pretty}
.au-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.au-fld{display:grid;gap:7px;min-width:0}
.au-fld > label,.au-lbl{font-size:.84rem;font-weight:600;color:var(--ink)}
.au-in{position:relative}
.au-in input{width:100%;min-width:0;height:48px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--paper-2);color:var(--ink);font:inherit;font-size:.96rem;transition:border-color .2s,box-shadow .2s,background-color .2s}
.au-in input::placeholder{color:var(--ink-3);opacity:.75}
.au-in input:hover{border-color:var(--ghost-line)}
.au-in input:focus{outline:none;background:var(--paper);border-color:var(--forest-3);box-shadow:0 0 0 4px color-mix(in srgb,var(--forest-3) 16%,transparent)}
:root[data-mode="dark"] .au-in input:focus{border-color:var(--mint-2);box-shadow:0 0 0 4px color-mix(in srgb,var(--mint-2) 18%,transparent)}
.au-in input[type=password],.au-in:has(.au-eye) input,.au-in input.has-eye{padding-right:52px}
.au-fld.bad .au-in input{border-color:var(--bad);background:color-mix(in srgb,var(--bad-bg) 55%,var(--paper))}
.au-fld.ok .au-in::after{content:"";position:absolute;right:16px;top:50%;width:16px;height:16px;margin-top:-8px;background:var(--good);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat;animation:au-pop .3s var(--ease)}
.au-fld.ok .au-in:has(.au-eye)::after{display:none}
@keyframes au-pop{from{transform:scale(.4);opacity:0}}
.au-err{font-size:.8rem;line-height:1.4;color:var(--bad)}
.au-err:empty{display:none}
.au-fld.bad .au-err{animation:au-in .3s var(--ease)}
.au-eye{position:absolute;right:6px;top:50%;width:40px;height:40px;margin-top:-20px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:var(--ink-3);cursor:pointer;font-size:18px;transition:background-color .2s,color .2s}
.au-eye:hover{background:var(--line-2);color:var(--ink)}
.au-eye .ic-off,.au-eye[aria-pressed="true"] .ic:not(.ic-off){display:none}
.au-eye[aria-pressed="true"] .ic-off{display:inline-block}
.au-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:2px}
.au-meter i{height:4px;border-radius:4px;background:var(--line);transition:background-color .3s}
.au-meter[data-s="1"] i:nth-child(-n+1){background:var(--bad)}
.au-meter[data-s="2"] i:nth-child(-n+2){background:var(--warn)}
.au-meter[data-s="3"] i:nth-child(-n+3){background:var(--forest-3)}
.au-meter[data-s="4"] i{background:var(--good)}
:root[data-mode="dark"] .au-meter[data-s="3"] i:nth-child(-n+3){background:var(--mint-2)}
.au-meter-t{font-size:.78rem;color:var(--ink-3)}
.au-seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.au-seg-b{height:42px;border-radius:12px;border:1px solid var(--line);background:var(--paper-2);font-size:.86rem;font-weight:600;color:var(--ink-2);cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .15s}
.au-seg-b:hover{border-color:var(--ghost-line);color:var(--ink)}
.au-seg-b:active{transform:scale(.96)}
.au-seg-b[aria-checked="true"]{background:var(--mint);border-color:transparent;color:var(--on-mint)}
.au-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.au-chk{display:inline-flex;align-items:flex-start;gap:10px;font-size:.88rem;color:var(--ink-2);line-height:1.45;cursor:pointer}
.au-chk input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--forest-3)}
:root[data-mode="dark"] .au-chk input{accent-color:var(--mint-2)}
.au-chk a{color:var(--ink);text-underline-offset:3px}
.au-link{border:0;background:none;padding:4px 0;font-size:.88rem;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--ghost-line);text-underline-offset:4px;cursor:pointer}
.au-link:hover{text-decoration-color:currentColor}
.au-submit{width:100%;margin-top:4px;position:relative}
.au-submit .ic{transition:transform .25s var(--ease)}
.au-submit:hover .ic{transform:translateX(3px)}
.au-submit.busy{pointer-events:none}
.au-submit.busy .ic{opacity:0}
.au-submit.busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:au-spin .7s linear infinite}
@keyframes au-spin{to{transform:rotate(360deg)}}
.au-sso{width:100%}
.au-or{display:flex;align-items:center;gap:14px;font:500 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.au-or::before,.au-or::after{content:"";height:1px;flex:1;background:var(--line)}
.au-msg{font-size:.86rem;line-height:1.5;color:var(--ink-2);padding:12px 14px;border-radius:14px;background:var(--mint-3)}
.au-msg:empty{display:none}
.au-note-sm{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.84rem;color:var(--ink-2)}
.au-note-sm .ic{color:var(--good)}
.au-switch{text-align:center;font-size:.9rem;color:var(--ink-2)}
.au-switch a{color:var(--ink);font-weight:600;text-underline-offset:4px}
.au-back{justify-self:start;display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:6px 0;font-size:.88rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.au-back:hover{color:var(--ink)}

/* done */
.au-done{display:grid;gap:16px;justify-items:start}
.au-done:focus{outline:none}
.au-done-ic{position:relative;width:64px;height:64px}
.au-done-ic > svg{width:64px;height:64px}
.au-done-ic i{position:absolute;right:-8px;bottom:-8px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--good);color:#fff;border:3px solid var(--paper);font-size:14px;animation:au-pop .5s .2s var(--ease) both}
.au-done > p:not(.note){color:var(--ink-2);line-height:1.55}
.au-done .note{background:var(--paper-2);color:var(--ink-2);font-size:.84rem}
.au-done-cta{display:flex;flex-wrap:wrap;gap:10px}

/* ---------- scene side ---------- */
.au-scene{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(16px,2.4vh,26px);padding:0 clamp(20px,1rem + 2vw,48px) clamp(22px,3vh,36px);border-radius:var(--r-board);background:var(--forest);color:var(--on-forest);overflow:hidden;isolation:isolate;min-width:0}
.au-scene::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 45% at 50% 22%,color-mix(in srgb,var(--mint-2) 22%,transparent),transparent 70%),radial-gradient(50% 40% at 90% 100%,color-mix(in srgb,var(--lav-2) 26%,transparent),transparent 70%),radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--on-forest) 13%,transparent) 1px,transparent 1.4px) 0 0/22px 22px}
.au-scene-top{position:absolute;left:clamp(20px,1rem + 2vw,40px);right:clamp(20px,1rem + 2vw,40px);top:22px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:.8rem;z-index:2}
.au-live{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:color-mix(in srgb,var(--on-forest) 9%,transparent);border:1px solid color-mix(in srgb,var(--on-forest) 14%,transparent);font-weight:500}
.au-live .live-dot{background:var(--mint-2)}
.au-live span:last-child{transition:opacity .3s}
.au-clock{color:var(--on-forest-2);font-size:.82rem}

/* ID card */
.idc-wrap{position:relative;width:min(100%,440px);padding-top:96px;transform-origin:50% -420px;animation:idc-swing 7s ease-in-out infinite}
@keyframes idc-swing{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
.idc-strap{position:absolute;left:50%;bottom:calc(100% - 84px);width:30px;height:100vh;margin-left:-15px;border-radius:0 0 6px 6px;background:linear-gradient(90deg,transparent 3px,color-mix(in srgb,#fff 35%,transparent) 3px 4px,transparent 4px calc(100% - 4px),color-mix(in srgb,#fff 35%,transparent) calc(100% - 4px) calc(100% - 3px),transparent 0),linear-gradient(var(--lav-2),color-mix(in srgb,var(--lav-2) 80%,#000));box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.idc-clip{position:absolute;left:50%;top:72px;width:44px;height:34px;margin-left:-22px;border-radius:9px;background:linear-gradient(#e9efeb,#b8c4bd);box-shadow:inset 0 -2px 0 rgba(0,0,0,.15),0 4px 10px -4px rgba(0,0,0,.5);z-index:2}
.idc-clip::after{content:"";position:absolute;left:50%;bottom:7px;width:20px;height:6px;margin-left:-10px;border-radius:4px;background:#7d8a83}
.idc{position:relative;display:grid;gap:14px;padding:18px 20px 16px;border-radius:24px;background:linear-gradient(140deg,var(--mint) 0%,color-mix(in srgb,var(--mint) 55%,var(--paper)) 50%,var(--lav-3) 100%);color:var(--on-mint);box-shadow:0 30px 60px -24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.35) inset;overflow:hidden;transition:transform .5s var(--ease)}
:root[data-mode="dark"] .idc{background:linear-gradient(140deg,#1B4A36 0%,#14382A 55%,#241D40 100%);color:var(--on-mint);box-shadow:0 30px 60px -24px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08) inset}
.idc::before{content:"";position:absolute;left:50%;top:10px;width:52px;height:8px;margin-left:-26px;border-radius:6px;background:color-mix(in srgb,var(--on-mint) 18%,transparent)}
.idc-sheen{position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.idc.verified .idc-sheen{animation:idc-sheen 1.3s var(--ease)}
@keyframes idc-sheen{to{transform:translateX(120%)}}
.idc-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.idc-brand{display:inline-flex;align-items:center;gap:8px;font:650 1.08rem/1 var(--f-display);letter-spacing:-.03em}
.idc-brand svg{width:28px;height:28px}
.idc-k{font:500 .64rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--on-mint) 10%,transparent)}
.idc-body{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center}
.idc-photo{position:relative;width:96px;height:112px;border-radius:16px;background:linear-gradient(160deg,var(--lav) 0%,var(--lav-2) 100%);color:var(--on-lav);display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 3px color-mix(in srgb,var(--paper) 70%,transparent)}
:root[data-mode="dark"] .idc-photo{background:linear-gradient(160deg,#3A2E66 0%,#5B47A8 100%);box-shadow:0 0 0 3px rgba(255,255,255,.1)}
.idc-photo span{font:600 2.1rem/1 var(--f-display);letter-spacing:-.02em;transition:transform .35s var(--ease),opacity .35s}
.idc-photo span:empty{display:none}
.idc-ph{font-size:44px;opacity:.5;stroke-width:1.6}
.idc-photo.has .idc-ph{display:none}
.idc-photo.has span{animation:au-pop .35s var(--ease)}
.idc-scan{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--mint-2) 70%,transparent) 85%,#fff 100%);opacity:0;transform:translateY(-100%)}
.idc.scanning .idc-scan{opacity:.9;animation:idc-scan 1.1s ease-in-out infinite alternate}
@keyframes idc-scan{from{transform:translateY(-100%)}to{transform:translateY(330%)}}
.idc-dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;min-width:0}
.idc-dl > div{min-width:0}
.idc-dl > div:nth-child(3){grid-column:1/-1}
.idc-dl dt{font:500 .6rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.62}
.idc-dl dd{margin-top:3px;font-weight:600;font-size:.92rem;line-height:1.25;min-height:1.25em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idc-dl dd.ph{opacity:.38;font-weight:500}
.idc-dl dd.typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:currentColor;animation:au-caret .8s steps(1) infinite}
@keyframes au-caret{50%{opacity:0}}
.idc-dl dd.flash{animation:idc-flash .6s var(--ease)}
@keyframes idc-flash{from{background:color-mix(in srgb,var(--mint-2) 60%,transparent);border-radius:4px}}
.idc-foot{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px dashed color-mix(in srgb,var(--on-mint) 22%,transparent)}
.idc-foot .mono{font-size:.78rem;letter-spacing:.04em}
.idc-bars{flex:1;height:22px;min-width:40px;background:repeating-linear-gradient(90deg,currentColor 0 2px,transparent 2px 4px,currentColor 4px 5px,transparent 5px 8px,currentColor 8px 11px,transparent 11px 13px);opacity:.55;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.idc-foot .st{background:color-mix(in srgb,var(--paper) 70%,transparent)}
.idc-foot .st--q{background:transparent;border-color:color-mix(in srgb,var(--on-mint) 30%,transparent);color:var(--on-mint)}
:root[data-mode="dark"] .idc-foot .st{background:rgba(0,0,0,.25)}
.idc-stamp{position:absolute;right:24px;bottom:62px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:2px solid var(--good);border-radius:12px;color:var(--good);background:color-mix(in srgb,var(--paper) 80%,transparent);font:700 .78rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-12deg) scale(1.6);opacity:0;pointer-events:none}
.idc-stamp .ic{stroke-width:3}
.idc.verified .idc-stamp{animation:idc-stamp .55s cubic-bezier(.3,1.5,.5,1) forwards}
@keyframes idc-stamp{to{opacity:1;transform:rotate(-12deg) scale(1)}}
:root[data-mode="dark"] .idc-stamp{background:rgba(6,24,16,.75)}

/* steps */
.au-steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,520px);--p:0}
.au-steps::before,.au-steps::after{content:"";position:absolute;left:10%;right:10%;top:17px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--on-forest) 16%,transparent)}
.au-steps::after{right:auto;width:calc(80% * var(--p));background:var(--mint-2);transition:width .45s var(--ease)}
.au-steps li{position:relative;z-index:1;display:grid;justify-items:center;gap:8px;text-align:center}
.au-steps span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--forest-2);border:1px solid color-mix(in srgb,var(--on-forest) 16%,transparent);color:var(--on-forest-2);font-size:15px;transition:background-color .35s,color .35s,border-color .35s,transform .35s var(--ease)}
.au-steps b{font-size:.74rem;font-weight:500;color:var(--on-forest-2);line-height:1.2;transition:color .3s}
.au-steps li.now span{border-color:var(--mint-2);color:var(--mint-2);animation:au-ring 1.4s infinite}
.au-steps li.now b{color:var(--on-forest)}
.au-steps li.done span{background:var(--mint-2);border-color:var(--mint-2);color:#062116;transform:scale(1.06)}
.au-steps li.done b{color:var(--on-forest)}
@keyframes au-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--mint-2) 50%,transparent)}80%,100%{box-shadow:0 0 0 9px transparent}}

/* mini app */
.ma{position:relative;width:min(100%,580px);background:var(--paper);color:var(--ink);border-radius:20px;overflow:hidden;box-shadow:0 28px 60px -26px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.12);font-size:13px;line-height:1.4}
.ma-top{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--paper-2);border-bottom:1px solid var(--line-2)}
.ma-top .dots{display:flex;gap:5px}
.ma-top .dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.ma-t{flex:1;min-width:0;display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-t svg{width:18px;height:18px;flex:none}
.ma-top .st{transition:background-color .3s,color .3s}
.ma-top .st.flash{animation:hit 1s var(--ease)}
.ma-body{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);min-height:192px}
.ma-list{display:grid;align-content:start;gap:2px;padding:8px;border-right:1px solid var(--line-2)}
.ma-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px;border-radius:12px;transition:background-color .35s}
.ma-c div{min-width:0;display:grid}
.ma-c b{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-c small{font-size:.7rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma-call{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--paper-2);color:var(--ink-2);font-size:13px;transition:background-color .3s,color .3s,transform .15s}
.ma-c.is-cur{background:var(--mint-3)}
.ma-c.is-cur .ma-call{background:var(--btn);color:var(--btn-fg)}
.ma-c.is-done .ma-call{background:var(--good-bg);color:var(--good)}
.ma-call.press,.ms .ab.press{transform:scale(.88)}
.ma-stage{position:relative;padding:12px;background:var(--paper-2);min-width:0;overflow:hidden}
.ms{display:grid;gap:9px;align-content:start;height:100%;animation:ms-in .45s var(--ease) both}
@keyframes ms-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.ms--idle{place-items:center;color:var(--ink-3);text-align:center;align-content:center}
.ms--idle p{display:inline-flex;align-items:center;gap:8px;font-size:.78rem}
.ms-who{display:flex;align-items:center;gap:10px;min-width:0}
.ms-who div{display:grid;min-width:0}
.ms-who b{font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms-who small{font-size:.72rem;color:var(--ink-3)}
.ms-rows{display:grid;gap:5px;padding:9px 10px;border-radius:12px;background:var(--paper);border:1px solid var(--line-2)}
.ms-rows li{display:flex;justify-content:space-between;gap:10px;font-size:.72rem;color:var(--ink-3)}
.ms-rows b{color:var(--ink);font-weight:600;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ms .ab{justify-self:start;transition:transform .15s,background-color .2s}
.ms--dial{justify-items:center;text-align:center;align-content:center}
.ms-ring{position:relative;display:grid;place-items:center;width:58px;height:58px}
.ms-ring .av{position:relative;z-index:1}
.ms-ring span{position:absolute;inset:6px;border-radius:50%;border:2px solid var(--mint-2);animation:ms-ring 1.6s ease-out infinite}
.ms-ring span + span{animation-delay:.8s}
.ms--live .ms-ring span{border-color:var(--good);animation-duration:2.4s}
@keyframes ms-ring{from{transform:scale(.8);opacity:.9}to{transform:scale(1.5);opacity:0}}
.ms--dial > b{font-size:.88rem}
.ms-wave{display:flex;align-items:center;gap:3px;height:22px}
.ms-wave i{width:3px;height:100%;border-radius:3px;background:var(--line);transform:scaleY(.18);transition:background-color .3s}
.ms--live .ms-wave i{background:var(--forest-3);animation:ms-wave .9s ease-in-out infinite alternate}
:root[data-mode="dark"] .ms--live .ms-wave i{background:var(--mint-2)}
.ms-wave i:nth-child(3n){animation-delay:-.3s}.ms-wave i:nth-child(3n+1){animation-delay:-.6s}.ms-wave i:nth-child(4n){animation-duration:.7s}.ms-wave i:nth-child(5n){animation-duration:1.1s}
@keyframes ms-wave{from{transform:scaleY(.15)}to{transform:scaleY(1)}}
.ms-ctl{display:flex;gap:5px}
.ms-ctl .ab{height:26px;padding:0 8px;font-size:.66rem}
.ms-h{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600}
.ms-h .ic{color:var(--lav-2)}
.ms-h .mono{margin-left:auto;color:var(--ink-3);font-weight:500;font-size:.7rem}
.ms-notes{display:grid;gap:6px}
.ms-notes li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:8px;align-items:start;padding:7px 9px;border-radius:10px;background:var(--paper);border:1px solid var(--line-2);font-size:.74rem;line-height:1.35;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease)}
.ms-notes li.on{opacity:1;transform:none}
.ms-notes em{font:500 .58rem/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal;text-align:center;border-radius:6px;background:var(--lav-3);color:color-mix(in srgb,var(--lav-2) 60%,var(--ink))}
.ms-notes li:last-child em{background:var(--mint-3);color:var(--good)}
.ms-notes span.typing::after{content:"";display:inline-block;width:2px;height:1em;margin-left:1px;vertical-align:-.15em;background:currentColor;animation:au-caret .8s steps(1) infinite}
.ms-saved{display:grid;gap:6px}
.ms-saved li{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:var(--paper);border:1px solid var(--line-2);font-size:.76rem;opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s var(--ease)}
.ms-saved li.on{opacity:1;transform:none}
.ms-saved li > .ic{display:grid;place-items:center;color:var(--good);font-size:14px}
.ms-saved b{margin-left:auto;font-weight:600}
.ms-crm{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--ink-3)}
.ms-crm .av{width:22px;height:22px;font-size:.56rem}
.ma-caps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-2)}
.ma-caps li{display:flex;align-items:center;gap:7px;padding:10px 10px 12px;font-size:.72rem;font-weight:500;color:var(--ink-3);line-height:1.2;transition:color .3s,background-color .3s}
.ma-caps li + li{border-left:1px solid var(--line-2)}
.ma-caps span{display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;background:var(--paper-2);font:600 .64rem/1 var(--f-mono);transition:background-color .3s,color .3s}
.ma-caps li.on{color:var(--ink);background:var(--mint-3)}
.ma-caps li.on span{background:var(--btn);color:var(--btn-fg)}
.ma-caps li.done span{background:var(--mint);color:var(--on-mint)}
.ma-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--line-2)}
.ma-bar i{display:block;height:100%;width:0;background:var(--forest-3)}
:root[data-mode="dark"] .ma-bar i{background:var(--mint-2)}
.ma-cur{position:absolute;left:0;top:0;z-index:5;width:22px;height:22px;margin:-3px 0 0 -4px;color:var(--ink);opacity:0;transition:transform .8s var(--ease),opacity .3s;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.ma-cur .ic{width:22px;height:22px;fill:var(--paper);stroke:var(--ink);stroke-width:1.6}
.ma-cur.on{opacity:1}
.ma-cur.tap .ic{animation:ma-tap .3s var(--ease)}
@keyframes ma-tap{50%{transform:scale(.8)}}

@media (min-width:901px) and (min-height:800px){
  .au-scene{position:sticky;top:16px;align-self:start;height:calc(100svh - 32px)}
}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .au{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .ma-body{grid-template-columns:minmax(0,1fr)}
  .ma-list{grid-template-columns:repeat(3,minmax(0,1fr));border-right:0;border-bottom:1px solid var(--line-2)}
  .ma-c{grid-template-columns:auto minmax(0,1fr);padding:7px}
  .ma-c .ma-call{display:none}
  .ma-stage{min-height:184px}
}
@media (max-width:900px){
  .au{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:max(12px,env(safe-area-inset-top,0px))}
  .au-side{padding-bottom:20px}
  main.au-main{padding-block:28px 32px}
  .au-scene{padding-top:0}
  .ma-body{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
  .ma-list{grid-template-columns:minmax(0,1fr);border-right:1px solid var(--line-2);border-bottom:0}
  .ma-c{grid-template-columns:auto minmax(0,1fr) auto}
  .ma-c .ma-call{display:grid}
}
@media (max-width:620px){
  .au-home{width:42px;padding:0;justify-content:center}
  .au-home span{display:none}
  .au-2{grid-template-columns:minmax(0,1fr)}
  .au-seg{grid-template-columns:repeat(2,1fr)}
  .au-scene-top{top:16px;left:16px;right:16px}
  .idc-wrap{padding-top:118px}
  .idc-strap{bottom:calc(100% - 106px);height:54px;border-radius:6px}
  .idc-strap::before{content:"";position:absolute;left:50%;top:-7px;width:16px;height:16px;margin-left:-8px;border-radius:50%;border:3px solid #b8c4bd;background:var(--forest)}
  .idc-clip{top:94px}
  .ma-top .dots{display:none}
  .idc{padding:16px 16px 14px;gap:12px}
  .idc-body{grid-template-columns:76px minmax(0,1fr);gap:12px}
  .idc-photo{width:76px;height:92px}
  .idc-photo span{font-size:1.7rem}
  .idc-dl{grid-template-columns:minmax(0,1fr);gap:7px}
  .idc-dl > div:nth-child(4){display:none}
  .idc-stamp{right:12px;top:12px;bottom:auto;padding:6px 10px;font-size:.7rem}
  .au-steps b{font-size:.66rem}
  .ma-body{grid-template-columns:minmax(0,1fr)}
  .ma-list{grid-template-columns:repeat(3,minmax(0,1fr));border-right:0;border-bottom:1px solid var(--line-2);padding:6px}
  .ma-c{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:4px;padding:6px 4px}
  .ma-c .ma-call,.ma-c small{display:none}
  .ma-c b{font-size:.7rem;max-width:100%}
  .ma-stage{min-height:188px}
  .ma-caps li{flex-direction:column;align-items:center;text-align:center;gap:5px;padding:9px 4px 11px;font-size:.64rem}
}
@media (max-width:380px){
  .au-top .brand-word{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .idc-wrap,.au-steps li.now span,.ms-ring span,.ms--live .ms-wave i,.idc.scanning .idc-scan,.live-dot{animation:none}
  .au-form.in,.au-done.in,.ms{animation:none}
  .ma-cur{display:none}
  .ms-wave i{transform:scaleY(.5)}
}


/* =====================================================================
   Full-bleed layout: every section runs edge to edge (no floating cards).
   Content lines up on one column: --edge is the side padding of every
   section, the header and the footer (wider screens keep a 1312px column).
   ===================================================================== */
:root{
  --r-board:0px;
  --edge:max(var(--pad-board),calc((100vw - 1440px) / 2 + 64px));
  --pad-y:clamp(56px,1.6rem + 4.4vw,120px);
  /* heroes and the header sit closer to the screen edge so the first screen has no empty band */
  --hero-x:clamp(20px,1rem + 3.6vw,112px);
}
@media (max-width:760px){:root{--r-board:0px}}
body{background:var(--paper)}

/* sections */
main{gap:0;padding-block:0}
main > .wrap{max-width:none;padding-left:0;padding-right:0}
main > section.wrap > .board{padding:var(--pad-y) var(--edge);border-radius:0}
main > section.wrap > .board.cta{padding:0}
main > section.wrap > .board.fx-feat{padding:0}
.cta-copy{padding:var(--pad-y) clamp(28px,4vw,72px) var(--pad-y) var(--edge)}
.cta-media{min-height:520px}
.fx-feat-pin{padding:var(--pad-y) var(--edge)}
/* two light sections in a row get a hairline between them */
main > section.wrap:has(> .board:not(.board--forest):not(.cta)) + section.wrap > .board:not(.board--forest):not(.cta){box-shadow:inset 0 1px 0 var(--line-2)}

/* home + page heroes fill the first screen */
.hero-board{min-height:100svh;border-radius:0}
.hero--page .hero-board{min-height:0}  /* page heroes size to their content (no empty band) */
.art-hero .hero-board{min-height:0}
.hero-copy{padding-left:var(--hero-x);padding-top:clamp(112px,14vh,150px)}
/* on wide screens the hero type keeps growing so the copy fills its half */
@media (min-width:1001px){
  .hero-h{font-size:clamp(2.35rem,1.05rem + 3.55vw,6.4rem)}
  .hero--page .hero-h{font-size:clamp(2.05rem,.9rem + 3vw,5.4rem)}
  .hero--long .hero-h{font-size:clamp(1.9rem,.9rem + 2.6vw,4.6rem)}
  .art-hero .hero-h{font-size:clamp(1.7rem,1rem + 2vw,4rem)}
  .hero:not(.hero--page) .hero-h{max-width:9.2em}
  .fx-stage{aspect-ratio:auto;height:clamp(420px,46vw,760px)}
}
@media (min-width:1600px){
  .hero-lede{max-width:52ch;font-size:clamp(1.1rem,.5rem + .6vw,1.35rem)}
  .hero--long .hero-lede{font-size:clamp(.98rem,.4rem + .6vw,1.2rem)}
}

/* AI Call Summary hero, mission/vision pair, closing banner */
.fx-hero-board{border-radius:0;min-height:100svh;padding-left:var(--hero-x);padding-right:var(--hero-x);display:flex;flex-direction:column;justify-content:center}
.fx-cta{border-radius:0;min-height:min(100svh,720px)}
.fx-cta-copy{padding-left:var(--edge);padding-right:var(--edge)}
.mv{gap:0}
.mv-card{border-radius:0}
.mv-card:first-child .mv-body{padding-left:var(--edge)}
.mv-card:last-child .mv-body{padding-right:var(--edge)}

/* header: full width, lined up with the content column */
.hdr{top:env(safe-area-inset-top,0px);padding-left:0;padding-right:0}
.hdr-in{max-width:none;border-radius:0;border-width:0 0 1px;padding:24px var(--hero-x) 0}
.hdr.is-scrolled{top:env(safe-area-inset-top,0px)}
.hdr.is-scrolled .hdr-in{max-width:none;border-radius:0;padding:10px var(--hero-x);border-color:var(--line);box-shadow:0 10px 30px -22px rgba(11,31,23,.45)}
.mnav{margin:0;border-radius:0 0 24px 24px;border-width:0 0 1px;padding:12px var(--hero-x) 16px}

/* footer */
.ftr-wrap{max-width:none;padding:0}
.ftr{border-radius:0;padding:var(--pad-y) var(--edge) 28px}

/* log in / sign up */
.au{max-width:none;padding:0;gap:0;min-height:100svh}
.au-side,.au-scene{border-radius:0}
.au-side{padding-left:clamp(20px,1rem + 3vw,72px);padding-right:clamp(20px,1rem + 3vw,72px)}

@media (min-width:901px) and (min-height:800px){
  .au-scene{top:0;height:100svh}
}
@media (max-width:1000px){
  .hero-board,.hero--page .hero-board{min-height:0}
  .hero-copy{padding-top:110px;padding-right:var(--hero-x)}
  .hero-media{min-height:clamp(480px,90vw,640px)}
  .hdr-in{padding:18px var(--hero-x) 0}
  .hdr.is-scrolled .hdr-in{padding:10px var(--hero-x)}
  .fx-hero-board{min-height:0}
  .mv{grid-template-columns:minmax(0,1fr)}
  .mv-card .mv-body{padding-left:var(--edge);padding-right:var(--edge)}
  .cta-copy{padding:var(--pad-y) var(--edge)}
}
@media (max-width:760px){
  .hdr-in{padding:14px var(--hero-x) 0}
  .hdr.is-scrolled .hdr-in{padding:8px var(--hero-x)}
  .cta-media{min-height:360px}
}

/* ---------- hero corner (page heroes): service live strip + jump links ---------- */
.hf-go{text-decoration:none;transition:transform .25s var(--ease),background-color .2s}
a.hf-go:hover{transform:rotate(45deg)}
.hero-foot--nav{grid-template-columns:minmax(0,1fr)}
.hf-nav{align-items:center;padding:12px 16px 12px 12px}
.hf-nav-in{flex:1;min-width:0;display:grid;gap:6px}
.hf-k{font:500 .66rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.hf-links{display:grid;grid-template-columns:minmax(0,1fr);gap:0 22px}
.hf-links--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.hf-links a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;font-size:.82rem;font-weight:500;line-height:1.25;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2);transition:color .2s}
.hf-links li:last-child a,.hf-links--2 li:nth-last-child(2) a{border-bottom:0}
.hf-links a span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hf-links a .ic{font-size:13px;color:var(--ink-3);transition:transform .25s var(--ease),color .2s}
.hf-links a:hover{color:var(--forest-3)}
.hf-links a:hover .ic{transform:translateX(3px);color:var(--forest-3)}
:root[data-mode="dark"] .hf-links a:hover,:root[data-mode="dark"] .hf-links a:hover .ic{color:var(--mint-2)}
.hero-foot--svc .hf-list li{transition:color .3s}
.hero-foot--svc .hf-list li.on{color:var(--forest-3)}
:root[data-mode="dark"] .hero-foot--svc .hf-list li.on{color:var(--mint-2)}
.hero-foot--svc .hf-live-v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1600px){
  .hero-foot{padding-top:56px;gap:12px}
  .hf-card,.hf-live{padding:16px 18px}
  .hf-list li,.hf-links a{font-size:.9rem}
  .hf-live-v b{font-size:1.8rem}
}
@media (max-width:760px){
  .hf-links--2{grid-template-columns:minmax(0,1fr)}
  .hf-links--2 li:nth-last-child(2) a{border-bottom:1px solid var(--line-2)}
}


/* =====================================================================
   Section redesigns (27 Oct): product tour card, problem showcase, step slider,
   dialer comparison, why-DialTri card fan
   ===================================================================== */
@keyframes rd-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- tour: one card, product areas on the left, live app on the right ---------- */
main > section#tour > .board{padding-top:clamp(44px,1rem + 3vw,80px)}
.tour-head{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:end;gap:18px clamp(32px,5vw,80px)}
.tour-head .h2{font-size:clamp(1.9rem,1.1rem + 2.1vw,3.1rem)}
.jc{display:grid;grid-template-columns:minmax(250px,.34fr) minmax(0,1fr);margin-top:clamp(24px,2.6vw,36px);border:1px solid var(--line);border-radius:28px;background:var(--paper);box-shadow:0 34px 70px -48px rgba(11,31,23,.45);overflow:hidden}
.jc-side{display:flex;flex-direction:column;gap:14px;padding:clamp(18px,2vw,28px) clamp(14px,1.6vw,22px);border-right:1px solid var(--line)}
.jc-side > .label{padding-left:12px}
.jc-tabs{display:grid;gap:6px}
.jc-tabs button{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);align-items:center;gap:14px;width:100%;padding:11px 14px 11px 12px;border:0;border-radius:16px;background:none;text-align:left;cursor:pointer;color:var(--ink-2);overflow:hidden;font:inherit;transition:background-color .3s,color .3s}
.jc-tabs button::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--btn);transform:scaleY(0);transition:transform .45s var(--ease)}
.jc-tabs button:hover{background:var(--paper-2);color:var(--ink)}
.jc-tabs button[aria-selected="true"]{background:var(--paper-2);color:var(--ink)}
.jc-tabs button[aria-selected="true"]::before{transform:none}
.jc-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;border:1px solid var(--line);background:var(--paper);color:var(--ink-3);font-size:19px;transition:background-color .35s,color .35s,border-color .35s,transform .45s var(--ease)}
.jc-tabs button[aria-selected="true"] .jc-ic{background:var(--mint);border-color:transparent;color:var(--on-mint);transform:rotate(-6deg)}
.jc-tx{display:grid;gap:3px;min-width:0}
.jc-tabs .tt-k{display:block;height:auto;padding:0;border:0;border-radius:0;background:none;text-transform:none;font:600 1.04rem/1.2 var(--f-display);letter-spacing:-.01em;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc-tabs .tt-v{font-size:.8rem;line-height:1.3;color:var(--ink-3)}
.jc-tabs .tt-prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--forest-3)}
:root[data-mode="dark"] .jc-tabs .tt-prog{background:var(--mint-2)}
.jc-side .tour-legend{margin:auto 12px 0}
.jc-main{display:grid;gap:clamp(18px,2vw,26px);align-content:start;padding:clamp(16px,1.8vw,24px);min-width:0}
.jc-vis{position:relative;padding:clamp(14px,1.8vw,26px);border-radius:20px;background:radial-gradient(60% 80% at 0% 0%,color-mix(in srgb,var(--lav) 70%,transparent),transparent 70%),radial-gradient(60% 80% at 100% 100%,color-mix(in srgb,var(--mint) 90%,transparent),transparent 70%),var(--paper-2);overflow:hidden;isolation:isolate}
.jc-fit{position:relative;min-width:0}
.jc-fit.scaled .app{position:absolute;left:0;top:0;transform:scale(var(--s,1));transform-origin:0 0;max-width:none}
.jc-fit .app{box-shadow:0 30px 60px -30px rgba(11,31,23,.45)}
.jc-info{min-width:0;padding:0 clamp(4px,.6vw,8px) 4px}
.jc-info article{display:grid;gap:12px}
.jc-info article:not([hidden]){animation:rd-in .5s var(--ease) both}
.jc-h{font:600 clamp(1.6rem,1.1rem + 1.2vw,2.3rem)/1.08 var(--f-display);letter-spacing:-.025em}
.jc-p{font-size:clamp(1rem,.95rem + .22vw,1.14rem);line-height:1.55;color:var(--ink-2);max-width:64ch}
.jc-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:4px}
.jc-chips{display:flex;flex-wrap:wrap;gap:8px}
.jc-chips li{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 16px;border:1px solid var(--ghost-line);border-radius:999px;font-size:.9rem;font-weight:500;color:var(--ink)}
.jc-chips .ic{color:var(--good);font-size:15px}
@media (max-width:1100px){
  .jc{grid-template-columns:minmax(0,1fr)}
  .jc-side{border-right:0;border-bottom:1px solid var(--line);padding-bottom:12px}
  .jc-side > .label,.jc-side .tour-legend{display:none}
  .jc-tabs{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:-4px -4px 0;padding:4px}
  .jc-tabs::-webkit-scrollbar{display:none}
  .jc-tabs button{flex:0 0 auto;width:auto;grid-template-columns:38px auto;gap:10px;padding:8px 14px 8px 8px;scroll-snap-align:start}
  .jc-tabs button::before{top:auto;left:12px;right:12px;bottom:0;width:auto;height:3px;border-radius:3px 3px 0 0;transform:scaleX(0)}
  .jc-tabs button[aria-selected="true"]::before{transform:none}
  .jc-ic{width:38px;height:38px;font-size:16px;border-radius:11px}
  .jc-tabs .tt-v{display:none}
}
@media (max-width:1000px){
  .tour-head{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .jc{border-radius:22px;margin-inline:calc(-1 * min(var(--edge),8px))}
  .jc-vis{padding:10px;border-radius:16px}
  .jc-row{flex-direction:column;align-items:flex-start}
  .jc-chips li{height:34px;padding:0 12px;font-size:.82rem}
}

/* ---------- problem showcase (blob, object, list) ---------- */
.pb .sec-head{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 56px;align-items:end}
.pb .sec-head .label{grid-column:1}
.pb .sec-head .h2{grid-column:1}
.pb .sec-head .sub{grid-column:2;grid-row:2}
@media (max-width:1000px){.pb .sec-head{grid-template-columns:minmax(0,1fr)}.pb .sec-head .sub{grid-column:1;grid-row:auto}}
.pv{--pv-blob:var(--mint-2);--pv-ink:var(--on-mint);position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:0 clamp(24px,4vw,64px);padding:clamp(18px,2.4vw,32px);border-radius:32px;background:var(--paper-2);overflow:hidden;isolation:isolate}
.pv[data-tone="lav"]{--pv-blob:var(--lav-2);--pv-ink:var(--on-lav)}
.pv[data-tone="forest"]{--pv-blob:var(--forest-3);--pv-ink:#F1FBF5}
.pv[data-tone="duo"]{--pv-blob:color-mix(in srgb,var(--mint-2) 50%,var(--lav-2));--pv-ink:var(--ink)}
/* dark theme: deeper blobs with light type, so the title reads on the blob and on the card */
:root[data-mode="dark"] .pv{--pv-blob:#1F6A50;--pv-ink:#F1FBF5}
:root[data-mode="dark"] .pv[data-tone="lav"]{--pv-blob:#4B3A8C}
:root[data-mode="dark"] .pv[data-tone="forest"]{--pv-blob:#245E6B}
:root[data-mode="dark"] .pv[data-tone="duo"]{--pv-blob:#3B3F86}
:root[data-mode="dark"] .pv-dot--c{opacity:.35}
.pv-art{position:relative;min-height:clamp(380px,34vw,500px)}
.pv-blob{position:absolute;left:0;top:0;width:80%;height:100%;background:var(--pv-blob);border-radius:42% 58% 64% 36% / 44% 40% 60% 56%;transition:background-color .9s var(--ease),border-radius 1.3s var(--ease),transform 1.3s var(--ease);z-index:0}
.pv[data-tone="lav"] .pv-blob{border-radius:58% 42% 38% 62% / 52% 61% 39% 48%;transform:rotate(-5deg) translateX(2%)}
.pv[data-tone="forest"] .pv-blob{border-radius:36% 64% 52% 48% / 58% 36% 64% 42%;transform:rotate(4deg) translateY(1%)}
.pv[data-tone="duo"] .pv-blob{border-radius:50% 50% 34% 66% / 38% 56% 44% 62%;transform:rotate(-2deg) scale(1.02)}
.pv-dot{position:absolute;border-radius:50%;z-index:1;pointer-events:none;transition:transform 1.3s var(--ease),background-color .9s}
.pv-dot--a{width:46px;height:46px;left:72%;top:6%;background:var(--lav);filter:blur(1px);animation:pv-bob 7s ease-in-out infinite}
.pv-dot--b{width:22px;height:22px;left:62%;top:4%;background:#fff;opacity:.8;animation:pv-bob 5s ease-in-out infinite reverse}
.pv-dot--c{width:70px;height:70px;left:44%;bottom:-18px;background:var(--mint);filter:blur(10px);opacity:.9;animation:pv-bob 9s ease-in-out infinite}
.pv[data-tone="lav"] .pv-dot--a{background:var(--mint);transform:translate(-40px,30px)}
.pv[data-tone="forest"] .pv-dot--a{background:var(--mint-2);transform:translate(10px,60px)}
.pv[data-tone="duo"] .pv-dot--a{background:var(--lav-2);transform:translate(-20px,-6px)}
@keyframes pv-bob{50%{translate:0 -10px}}
.pv-titles{position:absolute;left:clamp(22px,3.2vw,48px);top:clamp(26px,3.4vw,52px);width:min(64%,440px);z-index:2}
.pv-t{position:absolute;left:0;top:0;width:100%;font:650 clamp(1.9rem,1rem + 2.4vw,3.5rem)/1 var(--f-display);letter-spacing:-.03em;color:var(--pv-ink);text-wrap:balance;opacity:0;transform:translateX(40px);filter:blur(8px);transition:opacity .55s,transform .8s var(--ease),filter .6s,color .6s}
.pv-t.is-on{position:relative;opacity:1;transform:none;filter:none;transition-delay:.12s}
.pv-t.out{transform:translateX(-50px);transition-delay:0s}
.pv-objs{position:absolute;right:-2%;bottom:0;width:min(60%,400px);aspect-ratio:1;z-index:3;animation:pv-float 6s ease-in-out infinite}
@keyframes pv-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1.5deg)}}
.pv-obj{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transform:translateX(45%) rotate(10deg) scale(.82);filter:blur(10px);transition:opacity .6s,transform .9s var(--ease),filter .7s}
.pv-obj.is-on{opacity:1;transform:none;filter:drop-shadow(0 28px 34px rgba(8,30,21,.28));transition-delay:.08s}
.pv-obj.out{transform:translateX(-60%) rotate(-12deg) scale(.78);transition-delay:0s}
.pv-count{position:absolute;left:clamp(22px,3.2vw,48px);bottom:clamp(20px,2.6vw,36px);z-index:2;font:500 .82rem/1 var(--f-mono);letter-spacing:.06em;color:var(--pv-ink);transition:color .6s}
.pv-count b{font:600 1.6rem/1 var(--f-display);letter-spacing:-.02em}
.pv-side{display:flex;flex-direction:column;justify-content:center;min-width:0;padding:clamp(8px,1.6vw,24px) clamp(0px,1vw,14px)}
.pv-ds{display:grid}
.pv-d{grid-area:1/1;display:grid;gap:12px;align-content:center;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .45s,transform .6s var(--ease),visibility 0s .6s}
.pv-d.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .55s .12s,transform .7s .12s var(--ease),visibility 0s}
.pv-tag{display:inline-flex;align-items:center;gap:8px;font:500 .8rem/1 var(--f-mono);letter-spacing:.09em;text-transform:uppercase}
.pv-tag--bad{color:var(--bad)}
.pv-tag--good{color:var(--good);margin-top:clamp(14px,1.6vw,24px);padding-top:clamp(14px,1.6vw,24px);border-top:1px solid var(--line);width:100%}
.pv-p{font:400 clamp(1.08rem,.98rem + .4vw,1.32rem)/1.55 var(--f-body);color:var(--ink-2);text-wrap:pretty}
.pv-s{font:500 clamp(1.4rem,1.05rem + 1.05vw,2.05rem)/1.25 var(--f-display);letter-spacing:-.018em;color:var(--ink);text-wrap:pretty}
.pv-lk{font:500 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-top:14px;border-top:1px solid var(--line)}
.pv-list{display:grid;gap:4px}
.pv-row{width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) 30px;align-items:center;gap:12px;padding:6px 8px 6px 6px;border:0;border-radius:14px;background:transparent;color:var(--ink);text-align:left;cursor:pointer;transition:background-color .3s,box-shadow .3s}
.pv-row img{width:48px;height:48px;object-fit:contain;border-radius:13px;background:var(--mint-3);padding:4px}
:root[data-mode="dark"] .pv-row img{background:var(--paper-3)}
.pv-rt{font-weight:600;font-size:.9rem;line-height:1.25}
.pv-plus{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper);color:var(--ink-2);font-size:14px;transition:transform .4s var(--ease),background-color .3s,color .3s}
.pv-row:hover{background:color-mix(in srgb,var(--paper) 70%,transparent)}
.pv-row.is-on{background:var(--paper);box-shadow:var(--shadow-s)}
.pv-row.is-on .pv-plus{transform:rotate(45deg);background:var(--btn);color:var(--btn-fg)}
.pv-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(14px,2vw,22px);padding-top:16px;border-top:1px solid var(--line)}
.pv-segs{display:flex;gap:6px;flex:0 1 220px}
.pv-segs i{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden;position:relative}
.pv-segs i::after{content:"";position:absolute;inset:0;background:var(--forest-3);transform:scaleX(0);transform-origin:left}
:root[data-mode="dark"] .pv-segs i::after{background:var(--mint-2)}
.pv-segs i.done::after,.pv-segs i.full::after{transform:none}
.pv-segs i.run::after{animation:pv-seg var(--dur,5200ms) linear forwards}
.pv.paused .pv-segs i.run::after{animation-play-state:paused}
@keyframes pv-seg{to{transform:none}}
.pv-ctl{display:flex;gap:6px;padding:5px;border-radius:999px;background:var(--paper);box-shadow:var(--shadow-s)}
.pv-btn{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:0;background:var(--paper-2);color:var(--ink);cursor:pointer;font-size:16px;transition:transform .2s,background-color .2s}
.pv-btn:first-child .ic{transform:rotate(180deg)}
.pv-btn--go{background:var(--btn);color:var(--btn-fg)}
.pv-btn:active{transform:scale(.92)}
.pv-how{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;font-weight:600;color:var(--ink);text-decoration:none}
.pv-how:hover{text-decoration:underline;text-underline-offset:4px}
@media (max-width:1000px){
  .pv{grid-template-columns:minmax(0,1fr)}
  .pv-art{min-height:clamp(320px,62vw,460px)}
  .pv-side{padding-top:18px}
}
@media (max-width:600px){
  .pv{padding:14px;border-radius:24px}
  .pv-art{min-height:330px}
  .pv-blob{width:92%}
  .pv-titles{width:76%;left:18px;top:22px}
  .pv-t{font-size:clamp(1.6rem,7vw,2.1rem)}
  .pv-objs{width:62%;right:-6%}
  .pv-count{left:18px;bottom:18px}
  .pv-how{display:none}
  .pv-s{font-size:1.25rem}
  .pv-p{font-size:1.02rem}
  .pv-segs{flex:1}
}

/* ---------- how it works: image slider (one step in focus) ---------- */
.st8{display:grid;gap:clamp(18px,2.4vw,30px)}
.st8-tiles{display:flex;align-items:center;gap:12px;height:clamp(300px,30vw,430px)}
.st8-li{flex:1 1 0;min-width:0;height:74%;transition:flex-grow .8s var(--ease),height .8s var(--ease)}
.st8-li.is-on{flex-grow:3.2;height:100%}
.st8-tile{position:relative;display:block;width:100%;height:100%;padding:0;border:0;border-radius:22px;overflow:hidden;cursor:pointer;background:var(--paper-3);color:#fff;text-align:left;font:inherit;transition:box-shadow .6s,transform .3s var(--ease)}
.st8-li.is-on .st8-tile{cursor:default;box-shadow:0 34px 60px -32px rgba(8,30,21,.6)}
.st8-li:not(.is-on) .st8-tile:hover{transform:translateY(-4px)}
.st8-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease),filter .6s}
.st8-li:not(.is-on) .st8-tile img{filter:saturate(.55) brightness(.9)}
.st8-li.is-on .st8-tile img{transform:scale(1.04)}
.st8-tile::after{content:"";position:absolute;inset:0;background:var(--tint,var(--forest));mix-blend-mode:multiply;opacity:.5;transition:opacity .6s}
.st8-li:nth-child(5n+1){--tint:var(--forest-2)}
.st8-li:nth-child(5n+2){--tint:var(--lav-2)}
.st8-li:nth-child(5n+3){--tint:var(--mint-2)}
.st8-li:nth-child(5n+4){--tint:var(--forest-3)}
.st8-li:nth-child(5n+5){--tint:var(--lav-2)}
.st8-li.is-on .st8-tile::after{opacity:0}
.st8-tile::before{content:"";position:absolute;inset:45% 0 0;z-index:1;background:linear-gradient(transparent,rgba(5,22,15,.72));transition:opacity .5s}
.st8-li.is-on .st8-tile::before{opacity:0}
.st8-ov{position:absolute;left:0;right:0;bottom:0;z-index:2;display:grid;gap:8px;padding:clamp(18px,2vw,28px);background:linear-gradient(transparent,rgba(5,22,15,.84));opacity:0;transform:translateY(12px);transition:opacity .4s,transform .5s var(--ease)}
.st8-li.is-on .st8-ov{opacity:1;transform:none;transition-delay:.35s}
.st8-ov em{font:500 .72rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;font-style:normal;opacity:.85}
.st8-ov b{font:600 clamp(1.3rem,.9rem + 1.1vw,2rem)/1.1 var(--f-display);letter-spacing:-.018em;text-wrap:balance;max-width:24ch}
.st8-mini{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:grid;gap:6px;color:#fff;transition:opacity .3s}
.st8-mini b{font:600 1.5rem/1 var(--f-display);letter-spacing:-.02em}
.st8-mini small{font-size:.78rem;font-weight:600;line-height:1.25;text-wrap:balance;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.st8-li.is-on .st8-mini{opacity:0}
.st8-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 56px;align-items:start}
.st8-texts{min-height:150px}
.st8-tx{display:grid;gap:10px;max-width:62ch}
.st8-tx:not([hidden]){animation:rd-in .5s var(--ease) both}
.st8-k{font:500 .72rem/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.st8-d{font:500 clamp(1.05rem,.98rem + .3vw,1.25rem)/1.5 var(--f-body);color:var(--ink)}
.st8-pg{display:flex;align-items:center;gap:20px;padding-top:4px}
.st8-bar{width:clamp(120px,14vw,220px);height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.st8-bar i{display:block;height:100%;width:0;background:var(--forest-3)}
:root[data-mode="dark"] .st8-bar i{background:var(--mint-2)}
.st8-nums{display:flex;align-items:baseline;gap:12px;min-height:2.8rem}
.st8-num{border:0;background:none;padding:4px 2px;font:500 1.05rem/1 var(--f-display);color:var(--ink-3);cursor:pointer;transition:font-size .45s var(--ease),color .3s}
.st8-num:hover{color:var(--ink)}
.st8-num.is-on{font-size:2.6rem;font-weight:600;color:var(--ink)}
@media (max-width:1000px){.st8-mini small{display:none}}
@media (max-width:760px){
  .st8-tiles{height:260px;gap:6px}
  .st8-li{height:78%}
  .st8-li.is-on{flex-grow:9}
  .st8-tile{border-radius:16px}
  .st8-mini{display:none}
  .st8-foot{grid-template-columns:minmax(0,1fr)}
  .st8-pg{order:-1;justify-content:space-between}
  .st8-texts{min-height:0}
}

/* ---------- dialer comparison: one table, both columns side by side ---------- */
.cmp .sec-head{margin-bottom:clamp(22px,2.6vw,36px)}
.vs-wrap{max-width:1080px;margin-inline:auto}
.vs{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:12px 0;margin-inline:-12px;width:calc(100% + 24px)}
.vs-corner{width:21%}
.vs th,.vs td{text-align:left;vertical-align:middle}
.vs thead th{padding:16px 18px;border-radius:22px 22px 0 0}
.vs-col--p{background:var(--lav-3)}
.vs-col--a{background:var(--mint-3)}
.vs-hd{display:flex;align-items:center;gap:14px}
.vs-hd img{width:clamp(56px,6vw,76px);height:clamp(56px,6vw,76px);border-radius:18px;object-fit:cover;flex:none}
.vs-hd div{display:grid;gap:5px;justify-items:start;min-width:0}
.vs-lab{font:500 .66rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.vs-name{font:600 clamp(1.15rem,1rem + .5vw,1.45rem)/1.1 var(--f-display);letter-spacing:-.015em}
.vs-chip{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:var(--paper);font-size:.74rem;font-weight:500}
.vs tbody th{padding:14px 12px 14px 0;font-weight:600;font-size:.9rem;color:var(--ink);border-top:1px solid var(--line)}
.vs tbody th .vs-ic{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:10px;border-radius:9px;background:var(--paper-2);color:var(--ink-2);font-size:14px;vertical-align:middle}
.vs tbody td{padding:14px 18px;font-weight:500;font-size:.96rem;line-height:1.45;border-top:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
.vs tbody tr:last-child td{border-radius:0 0 22px 22px;padding-bottom:20px}
.vs-lanes td{padding-block:12px}
.vs-pace{display:block;width:min(150px,80%);height:6px;margin-bottom:8px;border-radius:6px;background:color-mix(in srgb,var(--ink) 10%,transparent);overflow:hidden}
.vs-pace i{display:block;height:100%;width:calc(var(--p) * 100%);border-radius:inherit;background:var(--forest-3);transform-origin:left;transition:transform 1.2s var(--ease)}
.vs-col--p .vs-pace i{background:var(--lav-2)}
:root[data-mode="dark"] .vs-col--a .vs-pace i{background:var(--mint-2)}
.vs:not(.in) .vs-pace i{transform:scaleX(0)}
.vs-lane{display:flex;align-items:center;gap:10px;height:44px;min-width:0}
.vs-card{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px 0 5px;border-radius:999px;background:var(--paper);font-size:.8rem;white-space:nowrap;flex:none;box-shadow:var(--shadow-s)}
.vs-notes{display:grid;gap:4px;flex:1;min-width:30px;max-width:90px}
.vs-notes i{display:block;height:5px;border-radius:4px;background:color-mix(in srgb,var(--ink) 12%,transparent);position:relative;overflow:hidden}
.vs-notes i:nth-child(2){width:80%}.vs-notes i:nth-child(3){width:60%}
.vs-notes i::after{content:"";position:absolute;inset:0;background:var(--lav-2);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.vs-notes i.on::after{transform:none}
.vs-go{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--paper);color:var(--ink-3);font-size:.76rem;font-weight:600;white-space:nowrap;flex:none;transition:background-color .3s,color .3s,transform .2s}
.vs-go.ready{background:var(--btn);color:var(--btn-fg)}
.vs-go.live{background:var(--good);color:#fff}
.vs-go.press{transform:scale(.92)}
.vs-q{flex:1;min-width:0;display:flex;gap:6px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 14%,#000 80%,transparent);mask:linear-gradient(90deg,transparent,#000 14%,#000 80%,transparent)}
.vs-q-in{display:flex;gap:6px;flex:none;animation:vs-q 5s linear infinite}
.vs-q .av{flex:none}
@keyframes vs-q{to{transform:translateX(-50%)}}
.vs-go--auto{background:var(--btn);color:var(--btn-fg)}
.vs-go--auto .ic{animation:vs-ring 1s ease-in-out infinite}
@keyframes vs-ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}
.cmp-foot{max-width:1080px;margin-inline:auto}
@media (max-width:700px){
  .vs,.vs thead,.vs tbody,.vs tr{display:block}
  .vs{margin:0;width:100%}
  .vs thead tr,.vs tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px}
  .vs-corner{display:none}
  .vs thead th{padding:12px;border-radius:18px 18px 0 0}
  .vs-hd{flex-direction:column;align-items:flex-start;gap:10px}
  .vs-hd img{width:52px;height:52px;border-radius:14px}
  .vs tbody th{grid-column:1/-1;padding:14px 0 8px;border-top:0;font-size:.82rem}
  .vs tbody td{padding:10px 12px;font-size:.88rem;border-top:0}
  .vs tbody tr:last-child td{border-radius:0 0 18px 18px}
  .vs-lane{flex-wrap:wrap;height:auto;gap:6px}
  .vs-notes{display:none}
  .vs-chip{height:auto;min-height:24px;padding:3px 10px;white-space:normal;line-height:1.3}
}

/* ---------- why DialTri: a fan of cards, one in front ---------- */
.fan-sec{overflow:hidden;isolation:isolate}
.fan-sec::before{content:"";position:absolute;left:50%;top:52%;width:min(1100px,120%);height:70%;transform:translate(-50%,-50%);background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--mint-2) 22%,transparent),transparent 70%);z-index:-1;pointer-events:none}
.fan-sec .sec-head{position:relative;z-index:2;margin-bottom:clamp(12px,1.6vw,22px)}
.fan-sec .h2{color:var(--on-forest)}
.fan-sec .sub{color:var(--on-forest-2)}
.fan{position:relative;z-index:1;--cw:clamp(200px,16vw,240px);--ch:calc(var(--cw) * 1.36);--fx:calc(var(--cw) * .8)}
.fan-stage{position:relative;height:calc(var(--ch) + 190px);touch-action:pan-y}
.fan-card{--cbg:#C8F1D6;--cink:#0A2419;position:absolute;left:50%;bottom:92px;width:var(--cw);height:var(--ch);margin-left:calc(var(--cw) / -2);display:flex;flex-direction:column;gap:4px;padding:18px 18px 0;border-radius:26px;background:var(--cbg);color:var(--cink);overflow:hidden;transform-origin:50% 140%;transform:translateX(calc(var(--d,0) * var(--fx))) translateY(calc(var(--ad,0) * 16px)) rotate(calc(var(--d,0) * 6.5deg)) scale(calc(1 - var(--ad,0) * .07));z-index:calc(10 - var(--ad,0));box-shadow:0 26px 50px -26px rgba(0,0,0,.6);transition:transform .9s var(--ease),box-shadow .6s,filter .6s}
.fan-card--2{--cbg:#DDD0F8;--cink:#21163E}
.fan-card--3{--cbg:#F4F7F2}
.fan-card--4{--cbg:#9FE5BA}
.fan-card--5{--cbg:linear-gradient(165deg,#8B71E0,#B9A2EF);--cink:#FFFFFF}
.fan-card.is-on{transform:translateY(-18px) scale(1.12);box-shadow:0 40px 80px -30px rgba(0,0,0,.7),0 0 0 2px rgba(255,255,255,.35)}
.fan-card:not(.is-on){filter:saturate(.8) brightness(.9)}
.fan-n{font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;opacity:.6}
.fan-t{margin:2px 0 0;font:650 1.12rem/1.15 var(--f-display);letter-spacing:-.015em;text-wrap:balance}
.fan-hit{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.fan-hit::after{content:"";position:absolute;inset:0;z-index:2}
.fan-card.is-on .fan-hit{cursor:default}
.fan-hit:focus-visible{outline:none}
.fan-hit:focus-visible::after{outline:3px solid var(--mint-2);outline-offset:-3px;border-radius:26px}
.fan-s{font-size:.74rem;font-weight:500;opacity:.72}
.fan-img{width:96%;margin:auto auto -4%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.18));transition:transform .9s var(--ease)}
.fan-card.is-on .fan-img{animation:fan-bob 5s ease-in-out infinite}
@keyframes fan-bob{50%{transform:translateY(-8px) rotate(-2deg)}}
.fan-go{position:absolute;left:50%;bottom:14px;z-index:3;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 13px;border-radius:999px;background:#0A2419;color:#F1FBF5;font-size:.72rem;font-weight:600;letter-spacing:.02em;text-decoration:none;white-space:nowrap;opacity:0;transform:translate(-50%,10px);transition:opacity .4s,transform .5s var(--ease);pointer-events:none}
.fan-go .ic{font-size:12px}
.fan-card.is-on .fan-go{opacity:1;transform:translate(-50%,0);pointer-events:auto;transition-delay:.35s}
.fan-card--5 .fan-go{background:#fff;color:#21163E}
.fan-tag{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px 0 10px;border-radius:999px;font-size:.78rem;font-weight:600;color:#0A2419;pointer-events:none;animation:fan-drift 9s ease-in-out infinite}
.fan-tag .ic{position:absolute;width:16px;height:16px;fill:currentColor;stroke:none}
.fan-tag--a{left:8%;top:20%;background:var(--mint-2)}
.fan-tag--a .ic{right:-14px;top:-12px;color:var(--mint-2);transform:rotate(80deg)}
.fan-tag--b{right:9%;top:29%;background:#B9A2EF;color:#21163E;animation-delay:-3s}
.fan-tag--b .ic{left:-14px;top:-12px;color:#B9A2EF}
.fan-tag--c{left:17%;top:40%;background:#F2C26B;animation-delay:-6s}
.fan-tag--c .ic{right:-13px;top:-12px;color:#F2C26B;transform:rotate(80deg)}
@keyframes fan-drift{0%,100%{translate:0 0}33%{translate:14px -10px}66%{translate:-10px 8px}}
.fan-spark{position:absolute;width:14px;height:14px;z-index:0;opacity:.6;animation:fan-tw 3.6s ease-in-out infinite}
.fan-spark::before,.fan-spark::after{content:"";position:absolute;left:50%;top:50%;width:100%;height:2px;margin:-1px 0 0 -50%;border-radius:2px;background:var(--on-forest)}
.fan-spark::after{transform:rotate(90deg)}
.fan-spark--a{left:24%;top:16%}
.fan-spark--b{right:22%;top:20%;animation-delay:-1.2s}
.fan-spark--c{right:15%;top:64%;animation-delay:-2.4s}
@keyframes fan-tw{50%{opacity:.15;transform:scale(.6) rotate(45deg)}}
.fan-foot{position:relative;z-index:12;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:16px;max-width:720px;margin:-24px auto 0}
.fan-copy{display:grid;gap:8px;justify-items:center;text-align:center;min-height:5.2em}
.fan-k{font:500 .78rem/1 var(--f-mono);letter-spacing:.08em;color:var(--on-forest-2)}
.fan-k b{font:600 1.15rem/1 var(--f-display);color:var(--mint-2)}
.fan-d{max-width:56ch;font-size:clamp(1rem,.96rem + .2vw,1.12rem);line-height:1.55;color:var(--on-forest)}
.fan-d:not([hidden]){animation:rd-in .5s var(--ease) both}
.fan-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid color-mix(in srgb,var(--on-forest) 28%,transparent);background:transparent;color:var(--on-forest);font-size:17px;cursor:pointer;transition:background-color .2s,transform .2s}
.fan-btn:hover{background:color-mix(in srgb,var(--on-forest) 10%,transparent)}
.fan-btn:active{transform:scale(.92)}
.fan-btn--prev .ic{transform:rotate(180deg)}
.nums.nums--fan{margin-top:clamp(28px,3.4vw,52px);padding:clamp(22px,2.4vw,32px) 0 0;border-radius:0;background:none;border-top:1px solid color-mix(in srgb,var(--on-forest) 16%,transparent)}
@media (max-width:1100px){.fan-tag{display:none}}
@media (max-width:760px){
  .fan{--cw:min(56vw,210px);--fx:calc(var(--cw) * .5)}
  .fan-stage{height:calc(var(--ch) + 120px)}
  .fan-card{bottom:56px}
  .fan-foot{margin-top:-10px}
  .fan-card{padding:14px 14px 0;border-radius:22px}
  .fan-t{font-size:1rem}
  .fan-card.is-on{transform:translateY(-10px) scale(1.06)}
  .fan-foot{grid-template-columns:40px minmax(0,1fr) 40px;gap:10px}
  .fan-btn{width:40px;height:40px}
  .fan-spark{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pv-objs,.pv-dot,.vs-q-in,.vs-go--auto .ic{animation:none}
  .fan-card,.st8-li,.pv-obj,.pv-t,.pv-blob{transition:none}
  .fan-img,.fan-tag,.fan-spark{animation:none!important}
}

/* pills inside text columns keep their own width */
.split-copy > .pill{justify-self:start;align-self:flex-start}

/* ---------- header actions: theme | Log in | Book demo  [Get started →] ---------- */
.hdr-cta{display:flex;align-items:center;gap:4px;height:52px;padding:5px 5px 5px 6px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 10px 30px -18px rgba(11,31,23,.35);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);transition:background-color .35s,box-shadow .35s,border-color .35s}
.hdr.is-scrolled .hdr-cta{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr-ic{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);font-size:19px;cursor:pointer;transition:background-color .2s,color .2s}
.hdr-ic:hover{background:var(--line-2);color:var(--ink)}
.hdr-sep{width:1px;height:22px;background:var(--line);flex:none}
.hdr-txt{display:inline-flex;align-items:center;height:40px;padding:0 14px;border-radius:999px;font:500 .95rem/1 var(--f-body);color:var(--ink-2);text-decoration:none;white-space:nowrap;transition:color .2s,background-color .2s}
.hdr-txt:hover{color:var(--ink);background:var(--line-2)}
.hdr-go{display:inline-flex;align-items:center;gap:10px;height:42px;margin-left:6px;padding:0 20px;border-radius:14px;background:var(--btn);color:var(--btn-fg);font:600 .95rem/1 var(--f-body);text-decoration:none;white-space:nowrap;transition:background-color .2s,transform .2s var(--ease)}
.hdr-go .ic{font-size:1.05em;transition:transform .25s var(--ease)}
.hdr-go:hover{background:var(--btn-h)}
.hdr-go:hover .ic{transform:translateX(3px)}
.hdr-go:active{transform:scale(.97)}
@media (max-width:1180px){
  .hdr-txt,.hdr-sep{display:none}
  .hdr-go{margin-left:2px}
}
@media (max-width:1000px){
  .hdr-act .hdr-go{display:inline-flex}
}
@media (max-width:520px){
  .hdr-cta{height:46px;padding:3px}
  .hdr-ic{width:38px;height:38px}
  .hdr-go{height:38px;padding:0 13px;font-size:.84rem;gap:7px;border-radius:12px}
}

/* ---------- 404 ---------- */
.nf{min-height:100svh;display:grid;place-content:center;justify-items:center;gap:16px;text-align:center;padding-top:150px!important}
.nf-num{font:650 clamp(6rem,3rem + 12vw,13rem)/.85 var(--f-display);letter-spacing:-.06em;background:linear-gradient(120deg,var(--mint-2),var(--lav-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.nf .sub{max-width:46ch}
.nf-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:8px}

/* ---------- language selector (globe) ---------- */
.hdr-lang{position:relative}
.lang-menu{position:absolute;right:-6px;top:calc(100% + 14px);z-index:60;min-width:220px;display:grid;gap:2px;padding:8px;border-radius:18px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);animation:rd-in .25s var(--ease) both}
.hdr-cta .lang-menu{left:-6px;right:auto}
.lang-k{padding:6px 10px 8px;font:500 .66rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lang-menu button{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:11px;background:none;color:var(--ink);font:500 .92rem/1.2 var(--f-body);text-align:left;cursor:pointer;transition:background-color .2s}
.lang-menu button:hover,.lang-menu button:focus-visible{background:var(--paper-2);outline:none}
.lang-menu small{font:500 .68rem/1 var(--f-mono);letter-spacing:.06em;color:var(--ink-3)}
.lang-menu .ic{opacity:0;color:var(--good)}
.lang-menu [aria-checked="true"]{background:var(--mint-3)}
.lang-menu [aria-checked="true"] .ic{opacity:1}
.hdr-lang [aria-expanded="true"]{background:var(--line-2);color:var(--ink)}
/* Google website translator: keep its bar and tooltips out of the design */
body{top:0!important}
body > .skiptranslate,.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame,#dt-gt{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
@media (max-width:520px){
  .hdr-go{display:none!important}
  .hdr-cta .lang-menu{left:auto;right:-50px;top:calc(100% + 12px);min-width:210px}
}

/* ---------- contact: office globe ---------- */
.ct-globe{position:relative;margin:0;width:100%;max-width:620px;aspect-ratio:1;justify-self:center;touch-action:pan-y;isolation:isolate}
.ct-globe::before{content:"";position:absolute;inset:8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--mint-2) 34%,transparent),transparent);filter:blur(36px);pointer-events:none}
:root[data-mode="dark"] .ct-globe::before{background:radial-gradient(closest-side,color-mix(in srgb,var(--mint-2) 22%,transparent),transparent)}
.ct-globe canvas{display:block;width:100%;height:100%;cursor:grab;outline:none}
.ct-globe canvas.is-drag{cursor:grabbing}
.ct-globe canvas.is-pin{cursor:pointer}
.ct-globe-hint{position:absolute;left:4%;top:5%;display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px 0 10px;border-radius:999px;font-size:.8rem;font-weight:600;color:var(--ink-2);background:var(--glass);border:1px solid var(--line);box-shadow:var(--shadow-s);backdrop-filter:blur(10px);pointer-events:none;transition:opacity .5s}
.ct-globe-hint .ic{font-size:15px;color:var(--forest-3)}
:root[data-mode="dark"] .ct-globe-hint .ic{color:var(--mint-2)}
.ct-globe.used .ct-globe-hint{opacity:0}
.ct-probe{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden}
@media (max-width:1000px){.ct-globe{max-width:520px}}

/* header with the seven menus: brand | menu (centred) | actions at every desktop width, so the menu never runs into the logo */
@media (min-width:1261px){
  .hdr-in,.hdr.is-scrolled .hdr-in{grid-template-columns:auto 1fr auto;column-gap:16px}
  .hdr-nav,.hdr.is-scrolled .hdr-nav{grid-column:2;justify-self:center;padding-right:0;gap:2px}
  .hdr-act,.hdr.is-scrolled .hdr-act{grid-column:3}
}
/* laptop widths: drop "Book demo" (it is in every page's closing section and the mobile menu) and tighten the menu */
@media (min-width:1261px) and (max-width:1520px){
  .hdr-demo{display:none!important}
  .hdr-in,.hdr.is-scrolled .hdr-in{column-gap:12px}
  .hdr-nav,.hdr.is-scrolled .hdr-nav{gap:0}
  .hdr-nav a,.hdr-nav .nav-dd-btn{padding-inline:7px;font-size:.88rem}
  .nav-dd-tg{width:22px;height:22px}
}
/* below 1261px the seven menus no longer fit beside the actions: use the menu button (same as tablets) */
@media (max-width:1260px){
  .hdr-nav{display:none}
  .burger{display:inline-grid}
  .hdr-txt,.hdr-sep{display:none}
  .hdr-go{margin-left:2px}
  .hdr-in,.hdr.is-scrolled .hdr-in{grid-template-columns:auto 1fr}
  .hdr-act,.hdr.is-scrolled .hdr-act{grid-column:2;justify-self:end}
}

/* Product in the header: the word opens the product page, the arrow (or hover) opens the menu */
.nav-dd{display:inline-flex;align-items:center}
.hdr-nav .nav-dd-link{padding-right:4px}
.nav-dd-btn.is-sec{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.nav-dd-tg{display:grid;place-items:center;width:26px;height:26px;margin-left:-1px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background-color .2s}
.nav-dd-tg:hover,.nav-dd.open .nav-dd-tg{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.nav-dd-tg .ic{font-size:13px;transition:transform .25s var(--ease)}
.nav-dd-tg[aria-expanded="true"] .ic{transform:rotate(180deg)}
.nav-dd-tg:focus-visible{outline:2px solid var(--forest-3);outline-offset:2px}
.mnav-row{display:flex;align-items:center;gap:4px}
.mnav-link{flex:1;padding:12px 14px;border-radius:14px;text-decoration:none;color:var(--ink);font:500 1.05rem/1.2 var(--f-display)}
.mnav-link:hover,.mnav-link[aria-current="page"]{background:var(--paper-2)}
.mnav-acc--ic{width:48px;flex:none;justify-content:center;padding:12px}

/* closing photo section: keep the text column a readable width on every screen
   (the edge padding grows on wide screens, so the width limit applies to the text itself) */
.fx-cta-copy{box-sizing:content-box;max-width:620px;padding-right:clamp(24px,4vw,64px)}
.fx-cta-h{text-wrap:balance}

/* header menus (MENUS in shared.py): every section of the URL list has a dropdown.
   The word opens the section page; the arrow or hover opens the menu. Features has no page, so its word opens the menu. */
.hdr-nav > * + *::before{content:none}
.nav-dd-panel{left:calc(-14px + var(--dx,0px))}
.nav-dd-panel::before{left:calc(44px - var(--dx,0px))}
.nav-dd-panel.mega--c1{grid-template-columns:minmax(0,1fr) 236px;width:min(600px,calc(100vw - 32px))}
.nav-dd-panel.mega--c1.mega--nc{grid-template-columns:minmax(0,1fr);width:min(330px,calc(100vw - 32px))}
.nav-dd-panel.mega--c2.mega--nc{grid-template-columns:1fr 1fr;width:min(600px,calc(100vw - 32px))}
.mega-col .mega-a + .mega-k{margin-top:8px}
.hdr-nav .nav-dd-word{padding:8px 8px 8px 10px;font-family:inherit;font-size:.9rem;font-weight:500;line-height:inherit;color:var(--ink)}
.nav-dd-word.is-sec{background:color-mix(in srgb,var(--ink) 9%,transparent)}
.nav-dd.open .nav-dd-word{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.nav-dd-word:focus-visible{outline:2px solid var(--forest-3);outline-offset:2px}
.mnav-acc .ic{flex:none}
/* footer: Product, Dialers, Solutions, Resources, Company */
.ftr-cols{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px 20px}
@media (max-width:760px){.ftr-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mnav-group a[aria-current="page"]{background:var(--mint-3);color:var(--ink);font-weight:600}

/* header menu over the hero photo: sit on the same frosted pill as the actions, so the words read on any photo, light or dark */
@media (min-width:1261px){
  .hdr-nav{height:52px;padding:0 8px;border-radius:999px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 10px 30px -18px rgba(11,31,23,.35);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);transition:background-color .35s,box-shadow .35s,border-color .35s}
  .hdr.is-scrolled .hdr-nav{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* header dropdowns: the word and its arrow share one rounded hover/active shape (they used to light up separately) */
.hdr-nav .nav-dd{border-radius:999px;transition:background-color .2s}
.hdr-nav .nav-dd:hover,.hdr-nav .nav-dd.open{background:color-mix(in srgb,var(--ink) 7%,transparent)}
.hdr-nav .nav-dd:has(> .is-sec),.hdr-nav .nav-dd:has(> [aria-current="page"]){background:color-mix(in srgb,var(--ink) 9%,transparent)}
.hdr-nav .nav-dd:has(> .is-sec):hover,.hdr-nav .nav-dd:has(> [aria-current="page"]):hover{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.hdr-nav .nav-dd > .nav-dd-link,.hdr-nav .nav-dd > .nav-dd-link:hover,.hdr-nav .nav-dd > .nav-dd-link.is-sec,.hdr-nav .nav-dd > .nav-dd-link[aria-current="page"],
.hdr-nav .nav-dd > .nav-dd-tg,.hdr-nav .nav-dd > .nav-dd-tg:hover,.hdr-nav .nav-dd.open > .nav-dd-tg,
.hdr-nav .nav-dd > .nav-dd-word,.hdr-nav .nav-dd > .nav-dd-word:hover,.hdr-nav .nav-dd.open > .nav-dd-word,.hdr-nav .nav-dd > .nav-dd-word.is-sec{background:transparent}
.hdr-nav .nav-dd > .nav-dd-tg{margin-right:6px}

/* Progressive Dialer page: its ready board keeps the original two-area layout (no .rdy-side wrapper) */
.dt-prg .rdy{grid-template-areas:"list desk" "list pause"}
.dt-prg .rdy-desk{grid-area:desk;position:sticky;top:110px}
.dt-prg .rdy-pause{grid-area:pause}
@media (max-width:1100px){
  .dt-prg .rdy{grid-template-areas:"desk" "pause" "list"}
  .dt-prg .rdy-desk{position:static}
}