/* ==========================================================================
   AI pre-sales agent landing page

   Standalone stylesheet. This page loads no other CSS, which is why generic
   class names like .btn and .card are safe here and would not be elsewhere.
   inc/enqueue.php skips wdt.css on this template for that reason.

   Light ground, one accent colour, photographs carrying a single cool blue
   element each so the images sit beside the buttons rather than fighting them.
   ========================================================================== */
@font-face{font-family:'Cabinet Grotesk';src:url(../fonts/CabinetGrotesk-Variable.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Satoshi';src:url(../fonts/Satoshi-Variable.woff2) format('woff2');font-weight:300 900;font-display:swap}


:root{
  --bg:#FFFFFF; --bg2:#F5F7FD; --bg3:#EDF1FB;
  --ink:#0A0C14; --soft:#4B5066; --dim:#868BA0;
  --line:#E2E7F4; --line2:#CFD7EC;
  --blue:#4169E1; --blue-d:#2F4FBF; --blue-l:#EAEFFD;
  --green:#0FA968; --amber:#E0821A; --red:#DC3B3B;
  --d:'Cabinet Grotesk',Segoe UI,Helvetica,Arial,sans-serif;
  --b:'Satoshi',Segoe UI,Helvetica,Arial,sans-serif;
  --ez:cubic-bezier(.22,.61,.36,1);
  --pad:24px; --r:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--b);font-size:16.5px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.sec{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
p{margin:0 0 18px;color:var(--soft)}
h1,h2,h3,h4{margin:0 0 14px;font-family:var(--d);font-weight:700;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
em{font-style:normal;color:var(--blue)}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:820px}
.sec{padding:92px 0}
.alt{background:#EFF2FB}
.eyebrow{font-size:11.5px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--blue);margin-bottom:18px}
.h2{font-size:clamp(28px,4.3vw,46px);margin-bottom:18px}
.lede{font-size:17.5px;color:var(--soft);max-width:700px;margin-bottom:38px}
.note{font-size:12.5px;color:var(--dim);line-height:1.6}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--b);font-size:15.5px;font-weight:700;padding:16px 28px;border-radius:100px;background:var(--blue);color:#fff;border:1px solid var(--blue);cursor:pointer;transition:all .25s var(--ez);box-shadow:0 8px 24px rgba(65,105,225,.26)}
.btn:hover{transform:translateY(-2px);background:var(--blue-d);box-shadow:0 12px 32px rgba(65,105,225,.34)}
.btn-lg{font-size:17px;padding:19px 34px}
.btn-sm{font-size:13.5px;padding:11px 20px;box-shadow:none}
.btn-gh{background:#fff;color:var(--ink);border-color:var(--line2);box-shadow:none}
.btn-gh:hover{background:var(--bg2);border-color:var(--blue);color:var(--blue)}
.btn-block{display:flex;width:100%}
.dot{width:9px;height:9px;border-radius:50%;background:#43E08B;flex-shrink:0;box-shadow:0 0 0 0 rgba(67,224,139,.75);animation:pl 2s infinite}
@keyframes pl{70%{box-shadow:0 0 0 10px rgba(67,224,139,0)}100%{box-shadow:0 0 0 0 rgba(67,224,139,0)}}

/* ---------- hero with photograph ---------- */
/* Desktop: photo fills the band, copy sits over the quiet left third behind a
   scrim. Phone: photo becomes a band above the copy instead, because type over
   a busy photograph on a small screen is unreadable however careful the scrim. */
.hero{position:relative;padding:0;overflow:hidden;min-height:640px;display:flex;align-items:center}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:70% 50%}
.hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,#fff 0%,rgba(255,255,255,.97) 30%,rgba(255,255,255,.80) 46%,rgba(255,255,255,.18) 62%,rgba(255,255,255,0) 76%)}
.hero-inner{position:relative;z-index:2;width:100%;padding-top:74px;padding-bottom:74px}
.hero-copy{max-width:540px}
.callcard-float{position:absolute;right:max(24px,calc(50vw - 580px));bottom:38px;z-index:3;width:352px}
.hero .callcard{box-shadow:0 30px 70px rgba(16,24,64,.22)}

/* ---------- section photographs ---------- */
.shot{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:0 18px 46px rgba(16,24,64,.10)}
.shot img{width:100%;height:100%;object-fit:cover;display:block}
.shot-cap{font-size:12px;color:var(--dim);margin-top:10px}

/* ---------- pinned horizontal scroll ---------- */
/* The section holds while the cards travel sideways, then releases. Height is
   set in JS from the real track width so the travel always ends exactly as the
   last card lands, whatever the viewport. */
.pin{position:relative}
.pin-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.pin-head{margin-bottom:30px}
.pin-track{display:flex;gap:16px;padding-left:max(var(--pad),calc(50vw - 600px));will-change:transform}
.pin-track .card{flex:0 0 300px;height:auto;min-height:216px}
.pin-bar{margin-top:26px;height:3px;border-radius:3px;background:var(--line);max-width:1200px;margin-left:auto;margin-right:auto;width:calc(100% - var(--pad)*2)}
.pin-bar span{display:block;height:100%;width:0;background:var(--blue);border-radius:3px}

/* ---------- bar ---------- */
.bar{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--d);font-weight:700;font-size:15px;letter-spacing:-.02em}
.logo svg{width:30px;height:30px}
.logo img{height:28px;width:auto;display:block}

/* ---------- hero ---------- */
.hero{padding:70px 0 60px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(680px 420px at 12% -10%,rgba(65,105,225,.12),transparent 62%),
  radial-gradient(560px 380px at 92% 8%,rgba(65,105,225,.09),transparent 60%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(38px,5.6vw,66px);margin-bottom:22px}
.hero-sub{font-size:clamp(16.5px,1.9vw,19.5px);line-height:1.6;margin-bottom:28px;max-width:560px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.micro{font-size:13px;color:var(--dim);margin-bottom:26px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--soft);padding:8px 15px;border-radius:100px;border:1px solid var(--line);background:#fff}
.chips svg{width:14px;height:14px;color:var(--blue)}

/* live call card */
.callcard{background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:0 26px 60px rgba(16,24,64,.10);overflow:hidden}
.cc-top{display:flex;align-items:center;gap:11px;padding:15px 20px;border-bottom:1px solid var(--line);background:var(--bg2)}
.cc-av{width:36px;height:36px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;font-family:var(--d);font-weight:700;font-size:14px;flex-shrink:0}
.cc-who{flex:1;min-width:0}
.cc-who b{display:block;font-size:14px;font-family:var(--d);letter-spacing:-.02em}
.cc-who span{font-size:11.5px;color:var(--dim)}
.cc-live{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--green)}
.cc-body{padding:18px 20px;display:grid;gap:11px;min-height:236px;align-content:start}
.bub{max-width:88%;padding:11px 15px;border-radius:15px;font-size:13.8px;line-height:1.55;opacity:0;transform:translateY(9px);animation:bubIn .5s var(--ez) forwards}
.bub-a{background:var(--blue-l);color:#22314f;border-bottom-left-radius:5px}
.bub-u{background:var(--bg3);color:#2b3350;margin-left:auto;border-bottom-right-radius:5px}
@keyframes bubIn{to{opacity:1;transform:none}}
.cc-foot{border-top:1px solid var(--line);padding:14px 20px;display:grid;gap:9px;background:var(--bg2)}
.cc-row{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.cc-row span{color:var(--dim)}
.cc-row b{font-family:var(--d);font-size:13px}
.cc-tag{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;padding:3px 9px;border-radius:100px;background:rgba(15,169,104,.12);color:var(--green)}
.cc-fill{opacity:0;animation:bubIn .45s var(--ez) forwards}

/* image slot */
.imgslot{border:2px dashed var(--line2);border-radius:var(--r);background:var(--bg2);padding:22px;display:grid;gap:8px;align-content:center;text-align:left;min-height:150px}
.imgslot b{font-family:var(--d);font-size:13px;color:var(--blue);letter-spacing:.2px}
.imgslot code{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.4px;line-height:1.6;color:var(--soft);background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 13px;white-space:pre-wrap}

/* ---------- problem clock ---------- */
.clockwrap{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.gapviz{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:0 14px 40px rgba(16,24,64,.06)}
.gv-row{display:grid;grid-template-columns:78px 1fr 66px;gap:12px;align-items:center;margin-bottom:14px}
.gv-row:last-child{margin-bottom:0}
.gv-l{font-size:12px;font-weight:700;color:var(--dim);text-align:right}
.gv-track{height:34px;border-radius:9px;background:var(--bg3);position:relative;overflow:hidden}
/* The fill is only a bar now. Putting the value inside it meant the 6% row,
   which is the whole point of the chart, was clipped to nothing by the
   track's overflow. */
.gv-fill{position:absolute;inset:0 auto 0 0;border-radius:9px;width:0;transition:width 1.2s var(--ez)}
.gv-v{font-size:12.5px;font-weight:800;text-align:right;color:var(--ink);white-space:nowrap}
.gv-you{background:var(--red)}
.gv-them{background:var(--green)}
.gv-agent{background:var(--blue)}
.quote{margin:34px 0;padding:24px 28px;border-left:4px solid var(--blue);background:var(--blue-l);border-radius:0 var(--r) var(--r) 0;font-family:var(--d);font-size:clamp(19px,2.5vw,25px);font-weight:600;letter-spacing:-.02em;line-height:1.35;color:var(--ink)}

/* ---------- demo ---------- */
.demo{background:transparent}
.demobox{margin-top:34px;padding:38px;border-radius:24px;background:#fff;border:1px solid var(--line2);box-shadow:0 24px 60px rgba(16,24,64,.09);text-align:center}
.demo-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:28px;padding-top:26px;border-top:1px solid var(--line);text-align:left}
.demo-notes b{display:flex;align-items:center;gap:8px;font-family:var(--d);font-size:14.5px;margin-bottom:5px}
.demo-notes svg{width:17px;height:17px;color:var(--blue);flex-shrink:0}
.demo-notes p{font-size:13.5px;margin:0;line-height:1.55}

/* ---------- loop diagram ---------- */
.loop{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.loopbox{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:0 14px 40px rgba(16,24,64,.06)}

/* ---------- timeline ---------- */
.tl{position:relative;margin-top:44px}
.tl-line{position:absolute;left:0;right:0;top:26px;height:3px;background:var(--line);border-radius:3px}
.tl-prog{position:absolute;left:0;top:0;height:100%;width:0;background:var(--blue);border-radius:3px;transition:width .18s linear}
.tl-steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.tl-step{text-align:left}
.tl-dot{width:15px;height:15px;border-radius:50%;background:#fff;border:3px solid var(--line);margin:19px 0 20px;transition:all .35s var(--ez)}
.tl-step.on .tl-dot{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 6px rgba(65,105,225,.16)}
.tl-t{font-size:11.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);margin-bottom:7px;transition:color .3s}
.tl-step.on .tl-t{color:var(--blue)}
.tl-step h4{font-size:15.5px;margin-bottom:6px}
.tl-step p{font-size:13px;line-height:1.5;margin:0}

/* ---------- leaks ---------- */
.leakgrid{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start}
.leaks{display:grid;gap:10px}
.leak{display:grid;grid-template-columns:auto 1fr;gap:15px;padding:18px 20px;border-radius:14px;border:1px solid var(--line);background:#fff;transition:all .3s var(--ez)}
.leak:hover{border-color:var(--blue);box-shadow:0 10px 26px rgba(65,105,225,.10);transform:translateX(3px)}
.leak-ic{width:38px;height:38px;border-radius:11px;background:var(--blue-l);display:grid;place-items:center;color:var(--blue);flex-shrink:0}
.leak-ic svg{width:19px;height:19px}
.leak h4{font-size:15.5px;margin-bottom:3px}
.leak p{font-size:13.3px;margin:0 0 5px;line-height:1.5}
.leak .fix{color:var(--green);font-weight:700;font-size:13px;display:flex;align-items:center;gap:6px}
.leak .fix svg{width:14px;height:14px;flex-shrink:0}
.funnelbox{position:sticky;top:100px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:0 14px 40px rgba(16,24,64,.06)}
.funnelbox h4{font-size:16px;margin-bottom:4px}
.funnelbox .note{margin-bottom:18px}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.side{border-radius:var(--r);padding:28px;border:1px solid var(--line);background:#fff}
.side.human{border-style:dashed;background:var(--bg2)}
.side h3{display:flex;align-items:center;gap:10px;font-size:18px;margin-bottom:16px}
.side h3 svg{width:22px;height:22px}
.side li{display:flex;gap:11px;align-items:flex-start;font-size:14.3px;color:var(--soft);padding:9px 0;border-bottom:1px solid var(--line);line-height:1.5}
.side li:last-child{border-bottom:0}
.side li svg{width:16px;height:16px;flex-shrink:0;margin-top:4px}
.side.agent li svg{color:var(--blue)}
.side.human li svg{color:var(--green)}
.cmp{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.cmp table{width:100%;border-collapse:collapse}
.cmp th,.cmp td{padding:13px 18px;text-align:left;font-size:14px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp thead th{font-size:11.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);background:var(--bg2);font-weight:800}
.cmp tbody th{color:var(--soft);font-weight:700;width:26%}
.cmp td{color:var(--dim)}
.cmp td.win{color:var(--ink);font-weight:700}
.cmp tr:last-child th,.cmp tr:last-child td{border-bottom:0}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:14px}
.card{padding:24px;border-radius:15px;border:1px solid var(--line);background:#fff;transition:all .32s var(--ez)}
.card:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 14px 32px rgba(65,105,225,.10)}
.card-ic{width:40px;height:40px;border-radius:11px;background:var(--blue-l);display:grid;place-items:center;color:var(--blue);margin-bottom:14px}
.card-ic svg{width:20px;height:20px}
.card h3{font-size:16.5px;margin-bottom:7px}
.card p{font-size:13.6px;line-height:1.58;margin:0}

/* ---------- maths ---------- */
.mathgrid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.bars{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;box-shadow:0 14px 40px rgba(16,24,64,.06)}
.bar-row{margin-bottom:20px}
.bar-row:last-child{margin-bottom:0}
.bar-lab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;font-size:13px}
.bar-lab span{color:var(--soft)}
.bar-lab b{font-family:var(--d);font-size:16px}
.bar-tr{height:26px;border-radius:8px;background:var(--bg3);overflow:hidden}
.bar-fl{height:100%;border-radius:8px;width:0;transition:width 1.1s var(--ez)}
.leadcost{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}
.lc{padding:20px;border-radius:14px;text-align:center;border:1px solid var(--line);background:#fff}
.lc b{display:block;font-family:var(--d);font-size:27px;letter-spacing:-.03em;margin-bottom:3px}
.lc span{font-size:12.5px;color:var(--dim);line-height:1.4;display:block}
.lc.buy b{color:var(--amber)} .lc.call b{color:var(--blue)} .lc.waste b{color:var(--red)}

/* ---------- pricing ---------- */
.pcontrols{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:30px}
.tabs,.cyc{display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:100px;border:1px solid var(--line);background:#fff}
.tabs button,.cyc button{font-family:var(--b);font-size:13.5px;font-weight:700;padding:10px 20px;border-radius:100px;border:0;background:transparent;color:var(--soft);cursor:pointer;transition:all .22s var(--ez)}
.tabs button.on,.cyc button.on{background:var(--blue);color:#fff}
.save{font-size:11.5px;font-weight:800;color:var(--green);padding:0 13px 0 7px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:stretch}
/* A class selector beats the browser default for [hidden], so it has to be
   restated here or both panes render at once. */
.plans[hidden]{display:none}
.pane[hidden]{display:none}
.plan{padding:30px 26px;border-radius:20px;border:1px solid var(--line);background:#fff;position:relative;display:flex;flex-direction:column}
.plan.pop{border-color:var(--blue);box-shadow:0 18px 48px rgba(65,105,225,.16)}
.plan-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:10.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;background:var(--blue);color:#fff;padding:5px 15px;border-radius:100px;white-space:nowrap}
.plan h3{font-size:20px;margin-bottom:4px}
.plan-head{font-size:13px;color:var(--dim);margin-bottom:20px;min-height:20px}
.price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.price-fig{font-family:var(--d);font-size:33px;font-weight:700;letter-spacing:-.035em}
.price-per{font-size:13px;color:var(--dim)}
.billed{font-size:12px;color:var(--green);font-weight:600;min-height:34px;margin-bottom:8px;line-height:1.5}
.billed b{font-weight:800}
.setup{font-size:12.3px;color:var(--dim);margin-bottom:18px}
.plan-note{font-size:13.5px;font-weight:800;color:var(--blue);padding:10px 14px;border-radius:11px;background:var(--blue-l);margin-bottom:20px;text-align:center}
.plan ul{margin-bottom:24px;flex-grow:1}
.plan li{font-size:13.5px;color:var(--soft);padding:6px 0 6px 23px;position:relative;line-height:1.5}
.plan li{padding-left:18px}
.plan li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:2px;border-radius:2px;background:var(--blue)}
.pfoot{margin-top:14px}
.pilot-split{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.pilot{margin-top:28px;padding:34px;border-radius:20px;border:1px solid var(--blue);background:var(--blue-l)}
.pilot h3{font-size:21px;margin-bottom:14px}
.pilot p{font-size:14.8px}

/* ---------- horizontal rail ---------- */
/* Ten cards stacked is most of a screen. A rail keeps the section one band
   deep and lets someone skim sideways at their own pace. */
.rail{overflow-x:auto;overflow-y:hidden;margin:0 calc(var(--pad)*-1);padding:6px var(--pad) 18px;scroll-snap-type:x proximity;scrollbar-width:thin}
.rail::-webkit-scrollbar{height:7px}
.rail::-webkit-scrollbar-thumb{background:var(--line2);border-radius:10px}
.rail-track{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(262px,1fr);gap:14px}
.rail .card{scroll-snap-align:start;height:100%}
.rail-hint{margin-top:2px}

/* ---------- add-ons ---------- */
.addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:8px}
.addon{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 18px;border-radius:13px;border:1px solid var(--line);background:#fff;transition:all .28s var(--ez)}
.addon:hover{border-color:var(--blue);box-shadow:0 10px 24px rgba(65,105,225,.10)}
.addon-n{font-size:14.2px;font-weight:600;color:var(--ink);line-height:1.35}
.addon-p{font-family:var(--d);font-size:15px;font-weight:700;color:var(--blue);white-space:nowrap}
.addon-p small{display:block;font-family:var(--b);font-size:10.5px;font-weight:600;color:var(--dim);letter-spacing:.3px}

/* ---------- demo modal ---------- */
.modal{position:fixed;inset:0;z-index:200;background:rgba(8,12,26,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:24px;animation:mIn .28s var(--ez)}
.modal[hidden]{display:none}
@keyframes mIn{from{opacity:0}to{opacity:1}}
.modal-in{width:100%;max-width:1080px;height:min(78vh,760px);background:#fff;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 40px 90px rgba(0,0,0,.45);animation:mUp .34s var(--ez)}
@keyframes mUp{from{transform:translateY(18px) scale(.99)}to{transform:none}}
.modal-bar{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-bottom:1px solid var(--line);background:var(--bg2);font-size:13px;font-weight:700;color:var(--soft)}
.modal-bar span{display:flex;align-items:center;gap:9px}
.modal-bar button{border:0;background:transparent;font-size:26px;line-height:1;color:var(--dim);cursor:pointer;padding:0 4px}
.modal-bar button:hover{color:var(--ink)}
.modal iframe{flex:1;width:100%;border:0}
@media(max-width:760px){.modal{padding:0}.modal-in{height:100dvh;max-width:none;border-radius:0}}

/* ---------- faq ---------- */
.faqtabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.faqtabs button{font-family:var(--b);font-size:13px;font-weight:700;padding:9px 17px;border-radius:100px;border:1px solid var(--line);background:#fff;color:var(--soft);cursor:pointer;transition:all .22s var(--ez)}
.faqtabs button:hover{border-color:var(--blue);color:var(--blue)}
.faqtabs button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.faq details{border-bottom:1px solid var(--line)}
.faq details[hidden]{display:none}
.faq summary{list-style:none;cursor:pointer;padding:19px 40px 19px 0;position:relative;font-family:var(--d);font-size:17px;font-weight:600;letter-spacing:-.02em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:27px;width:11px;height:11px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(45deg);transition:transform .3s var(--ez)}
.faq details[open] summary::after{transform:rotate(-135deg);top:31px}
.faq summary:hover{color:var(--blue)}
.faq details>div{padding:0 40px 22px 0}
.faq p{font-size:15px;margin:0}

/* ---------- final ---------- */
.final{background:transparent;text-align:center;padding-bottom:110px}
.contact{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:28px;font-size:14.5px}
.contact a{color:var(--soft);border-bottom:1px solid var(--line2);padding-bottom:2px}
.contact a:hover{color:var(--blue);border-bottom-color:var(--blue)}
.foot{padding:44px 0 100px;border-top:1px solid var(--line);background:var(--bg2)}

/* ---------- sticky ---------- */
.sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid var(--line)}

/* ---------- data and ownership ---------- */
/* Nine blocks in a three column masonry-ish grid. The can/cannot block spans
   two columns because its two halves need to sit side by side to make sense:
   the contrast is the argument. */
.actnote{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-radius:14px;
  background:var(--blue-l);border:1px solid rgba(65,105,225,.3);margin-bottom:30px}
.actnote svg{width:20px;height:20px;color:var(--blue);flex-shrink:0;margin-top:3px}
.actnote p{margin:0;font-size:14.5px;line-height:1.65}
.actnote b{color:var(--ink)}
.dgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.dblock{padding:26px;border-radius:var(--r);border:1px solid var(--line);background:#fff}
.dblock h3{font-size:17px;margin-bottom:10px}
.dblock p{font-size:14.5px;line-height:1.66;margin:0}
.dblock p+.dsplit{margin-top:16px}
.dblock b{color:var(--ink)}
.dblock-wide{grid-column:span 2;background:var(--bg2)}
.dsplit{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dcan{padding:18px 20px;border-radius:13px;background:#fff;border:1px solid var(--line)}
.dcan p{font-size:14px}
.dtag{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;
  padding:5px 11px;border-radius:100px;margin-bottom:11px}
.dtag-y{background:rgba(15,169,104,.12);color:var(--green)}
.dtag-n{background:rgba(220,59,59,.10);color:var(--red)}
.dtrust{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:22px 26px;
  border-radius:var(--r);border:1px solid var(--blue);background:var(--blue-l)}
.dtrust svg{width:24px;height:24px;color:var(--blue);flex-shrink:0;margin-top:2px}
.dtrust p{margin:0;font-size:15px;font-weight:600;color:var(--ink);line-height:1.6}

/* ---------- unit of work explainer ---------- */
.unitbox{margin-top:34px;padding:30px;border-radius:var(--r);background:var(--bg2);border:1px solid var(--line)}
.unitbox h3{font-size:20px;margin-bottom:8px}
.unitsplit{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:20px 0}
.unit{position:relative;padding:22px 24px 44px;border-radius:14px;background:#fff;border:1px solid var(--line)}
.unit-k{display:block;font-family:var(--d);font-size:16px;font-weight:700;color:var(--blue);margin-bottom:9px}
.unit p{font-size:14.3px;line-height:1.62;margin:0}
.unit-v{position:absolute;left:24px;bottom:18px;font-size:10.5px;font-weight:800;letter-spacing:1.6px;
  text-transform:uppercase;color:var(--dim)}

/* ---------- add-on bands ---------- */
/* Banded rather than a flat price list. Three bands read as one decision about
   how far to go; ten separate prices read as a bill being assembled. */
.abands{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:34px}
.aband{padding:24px;border-radius:var(--r);border:1px solid var(--line);background:#fff;
  transition:all .28s var(--ez)}
.aband:hover{border-color:var(--blue);box-shadow:0 12px 30px rgba(65,105,225,.10)}
.aband-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.aband-p{font-family:var(--d);font-size:23px;font-weight:700;color:var(--ink);letter-spacing:-.03em;line-height:1.1}
.aband-p small{display:block;font-family:var(--b);font-size:11px;font-weight:600;color:var(--dim);
  letter-spacing:.4px;margin-top:3px}
.aband-t{font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--blue);
  background:var(--blue-l);padding:5px 10px;border-radius:100px;text-align:right;line-height:1.4}
.aband ul{display:grid;gap:11px}
.aband li{display:flex;gap:9px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--soft)}
.aband li svg{width:14px;height:14px;color:var(--blue);flex-shrink:0;margin-top:4px}
.aband li small{display:block;font-size:12px;color:var(--dim);margin-top:2px;line-height:1.45}
.axh{font-size:15px;margin:0 0 14px;color:var(--soft);font-family:var(--b);font-weight:700}
.addon-x{font-size:12.8px;font-weight:600;color:var(--blue);text-align:right;line-height:1.45;max-width:230px}

/* ---------- footer links ---------- */
.footlinks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-bottom:16px}
.footlinks a{font-size:12.8px;font-weight:600;color:var(--soft);border-bottom:1px solid var(--line2);
  padding-bottom:1px;transition:color .2s var(--ez),border-color .2s var(--ez)}
.footlinks a:hover{color:var(--blue);border-color:var(--blue)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ez),transform .7s var(--ez)}
.rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .dgrid{grid-template-columns:1fr 1fr}
  .dblock-wide{grid-column:span 2}
  .abands{grid-template-columns:1fr}
  .aband-h{align-items:center}
  .callcard-float{position:static;width:auto;max-width:420px;margin:26px auto 0}
  .hero{min-height:0;display:block}
  .hero-media{position:relative;height:300px}
  .hero-scrim{display:none}
  .hero-inner{padding-top:38px}
  .hero-copy{max-width:none}
  .hero .chips,.hero-cta{justify-content:flex-start}
  .pin-sticky{height:auto;position:static;padding:0}
  .pin-track{display:grid;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));padding-left:0;transform:none!important}
  .pin-track .card{flex:none}
  .pin-bar{display:none}
  .hero-grid,.clockwrap,.loop,.mathgrid,.leakgrid{grid-template-columns:1fr;gap:34px}
  .funnelbox{position:static}
  .tl-steps{grid-template-columns:repeat(3,1fr);gap:26px 12px}
  .tl-line{display:none}
  .plans{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .plan.pop{order:-1}
}
@media(max-width:760px){
  :root{--pad:18px}
  .dgrid{grid-template-columns:1fr;gap:12px}
  .dblock{padding:22px}
  .dblock-wide{grid-column:auto}
  .dsplit{grid-template-columns:1fr;gap:12px}
  .unitbox{padding:22px}
  .unitsplit{grid-template-columns:1fr}
  .unit{padding:20px 22px 40px}
  .addon{flex-direction:column;align-items:flex-start;gap:6px}
  .addon-x{text-align:left;max-width:none}
  .actnote{padding:16px 18px}
  .dtrust{padding:20px}
  .aband{padding:22px}
  .aband-h{flex-direction:column;align-items:flex-start;gap:8px}
  .aband-t{text-align:left}
  .footlinks{gap:8px 16px}
  /* One column, and the photo sits under the copy rather than beside it. */
  .pilot-split{grid-template-columns:1fr;gap:22px}
  /* The subject sits right of centre in the hero photograph, so a mobile crop
     has to favour that side or he disappears out of frame. */
  .hero-media img{object-position:74% 42%}
  .hero-media{height:260px}
  /* Section photographs are decorative on a phone and cost bandwidth, so they
     get shorter rather than being dropped: the page still reads as designed. */
  .shot img{max-height:230px}
  .quote{font-size:19px;padding:18px 20px;margin:24px 0}
  .lc b{font-size:24px}
  .plan{padding:26px 22px}
  .price-fig{font-size:29px}
  .faq summary{font-size:15.5px;padding-right:34px}
  .funnelbox,.gapviz,.bars,.loopbox{padding:20px}
  .gv-row{grid-template-columns:64px 1fr 58px;gap:9px}
  .gv-l,.gv-v{font-size:11.5px}
  .sec{padding:60px 0}
  .hero{padding:44px 0 40px}
  .split,.demo-notes,.leadcost{grid-template-columns:1fr}
  .tl-steps{grid-template-columns:1fr}
  .hero-cta{flex-direction:column}.hero-cta .btn{width:100%}
  .bar .btn-sm{display:none}
  .sticky{display:block}
  .foot{padding-bottom:110px}
  .demobox{padding:24px 20px}
  .cmp thead{display:none}
  .cmp tbody tr{display:block;padding:14px 16px;border-bottom:1px solid var(--line)}
  .cmp tbody th{display:block;width:auto;border:0;padding:0 0 4px;color:var(--ink)}
  .cmp td{display:block;border:0;padding:2px 0;font-size:13.4px}
  .cmp td::before{content:attr(data-l);display:block;font-size:10.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--dim)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .dot{animation:none}
  .rv{transition-duration:.01ms}
  .btn:hover,.card:hover,.leak:hover{transform:none}
}


/* ---- Consent ------------------------------------------------------------
   This page loads only this stylesheet, never wdt.css, so the banner needs
   its styles here or it renders unstyled at the top of the document. */
.consent{position:fixed;left:20px;bottom:20px;z-index:200;max-width:380px;padding:22px 24px;
  border-radius:16px;background:#fff;border:1px solid var(--line2);
  box-shadow:0 20px 50px rgba(16,24,64,.16);transform:translateY(140%);opacity:0;
  transition:transform .5s var(--ez),opacity .5s var(--ez)}
.consent.show{transform:none;opacity:1}
.consent p{font-size:13px;line-height:1.6;color:var(--soft);margin-bottom:14px}
.consent a{color:var(--blue);border-bottom:1px solid rgba(65,105,225,.4)}
.consent-row{display:flex;gap:8px;flex-wrap:wrap}
.consent button{font-family:var(--b);font-size:12.5px;font-weight:700;padding:9px 16px;
  border-radius:100px;border:1px solid var(--line2);background:transparent;color:var(--soft);
  cursor:pointer;transition:all .25s var(--ez)}
.consent .accept{background:var(--blue);border-color:var(--blue);color:#fff}
.consent .decline:hover{color:var(--ink);border-color:var(--soft)}
@media(max-width:760px){
  /* Clear of the sticky call to action, which owns the bottom of the screen. */
  .consent{left:12px;right:12px;bottom:84px;max-width:none;padding:18px 20px}
}


/* ==========================================================================
   PREMIUM REDESIGN LAYER
   Light stays the ground. A slow living gradient drifts behind it on scroll,
   and four sections drop to a deep WDT-indigo for rhythm, the way ServiceNow
   and Apple alternate bright and dark. Everything below is transform and
   opacity only, and freezes flat under reduce-motion.
   ========================================================================== */

/* ---------- dark WDT bands ---------- */
/* Redefining the palette tokens on the band cascades to almost every child,
   so most components turn dark for free. The few hard-coded whites below are
   the exceptions that need saying out loud. */
/* Dark band = light text over the indigo stretch of the field. No background,
   no pseudo layers, so nothing can clip the pinned rail's sticky. */
.sec.dark{
  --ink:#F4F7FF; --soft:#BAC4E0; --dim:#8B94B4;
  --line:rgba(255,255,255,.14); --line2:rgba(255,255,255,.24);
  --bg2:rgba(255,255,255,.06); --bg3:rgba(255,255,255,.09); --blue-l:rgba(120,150,255,.20);
  color:var(--ink);
  background:#0C1226;
}
.sec.dark em,.sec.dark .eyebrow{color:#93AAFF}
.sec.dark .lede,.sec.dark p{color:var(--soft)}
.sec.dark .demobox,.sec.dark .bars,.sec.dark .lc,.sec.dark .card,.sec.dark .gapviz,.sec.dark .loopbox,.sec.dark .funnelbox{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.10);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 24px 60px rgba(0,0,0,.42)}
.sec.dark .card:hover{border-color:rgba(147,170,255,.6);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.sec.dark .btn-gh{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.26)}
.sec.dark .btn-gh:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.sec.dark .chips span{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:var(--soft)}
.sec.dark .note{color:var(--dim)}
.sec.dark .demo-notes b{color:#fff}
.sec.dark .card-ic{background:rgba(65,105,225,.22);color:#AFC0FF}

/* ---------- tooltip on the priced-by terms ---------- */
.tiptrip{font-size:14px;color:var(--soft);margin:-8px 0 30px;max-width:760px}
.tip{position:relative;color:var(--ink);font-weight:700;cursor:help;white-space:nowrap}
.tip>i{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;
  border:1px solid var(--line2);font-size:10px;font-style:normal;font-weight:800;color:var(--blue);
  margin-left:4px;vertical-align:baseline;transition:all .2s var(--ez)}
.tip:hover>i,.tip.open>i{background:var(--blue);color:#fff;border-color:var(--blue)}
.tipbox{position:absolute;left:0;bottom:calc(100% + 12px);width:min(300px,80vw);padding:15px 17px;
  border-radius:13px;background:#0C1226;color:#DCE4FF;font-size:12.9px;font-weight:500;line-height:1.6;
  white-space:normal;box-shadow:0 20px 48px rgba(8,12,26,.34);opacity:0;visibility:hidden;
  transform:translateY(7px);transition:all .22s var(--ez);z-index:30}
.tipbox::after{content:"";position:absolute;left:22px;top:100%;border:7px solid transparent;border-top-color:#0C1226}
.tip:hover .tipbox,.tip:focus-visible .tipbox,.tip.open .tipbox{opacity:1;visibility:visible;transform:none}

/* ---------- standard in every tier ---------- */
.stdblock{margin:6px 0 30px;padding:26px 28px;border-radius:var(--r);border:1px solid var(--line);
  background:linear-gradient(120deg,rgba(15,169,104,.06),rgba(65,105,225,.05))}
.stdhead{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.stdhead h3{margin:0;font-size:18px}
.stdhead .pill{font-size:10.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:var(--green);background:rgba(15,169,104,.12);padding:5px 11px;border-radius:100px}
.stdgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:9px 24px}
.stdgrid li{display:flex;gap:9px;align-items:flex-start;font-size:13.7px;color:var(--soft);line-height:1.5}
.stdgrid li svg{width:15px;height:15px;color:var(--green);flex-shrink:0;margin-top:3px}
.stdgrid li b{color:var(--ink);font-weight:700}

/* ---------- comparison matrix ---------- */
.matrixwrap{margin-top:30px}
.mxhead{font-size:19px;margin-bottom:4px}
.mxsub{margin-bottom:18px}
.mxscroll{border-radius:var(--r);border:1px solid var(--line);background:#fff;
  box-shadow:0 14px 40px rgba(16,24,64,.06)}
.matrix{width:100%;min-width:560px;border-collapse:collapse}
.matrix thead th{position:sticky;top:70px;z-index:5;background:var(--bg2);padding:14px 14px;
  font-family:var(--d);font-size:14.5px;font-weight:700;text-align:center;border-bottom:1px solid var(--line2)}
.matrix thead th:first-child{text-align:left;font-family:var(--b);font-size:11.5px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--dim);font-weight:800}
.matrix thead th.pop{color:var(--blue)}
.matrix thead th small{display:block;font-family:var(--b);font-size:11px;font-weight:600;color:var(--dim);margin-top:2px}
.matrix td,.matrix th{padding:11px 14px;text-align:center;font-size:13.6px;border-bottom:1px solid var(--line)}
.matrix tbody th{text-align:left;font-weight:600;color:var(--soft);width:36%}
.matrix tr.grp td{background:var(--bg2);text-align:left;font-family:var(--b);font-size:11px;font-weight:800;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--dim);padding:10px 14px}
.matrix td.val{color:var(--ink);font-weight:700;font-family:var(--d)}
.matrix tbody tr:hover th,.matrix tbody tr:hover td{background:rgba(65,105,225,.04)}
.matrix tr.grp:hover td{background:var(--bg2)}
.mx-yes{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:rgba(65,105,225,.12);color:var(--blue)}
.mx-yes svg{width:13px;height:13px}
.mx-no{color:var(--line2);font-weight:400;font-size:16px}
.mx-add{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--amber);
  background:rgba(224,130,26,.12);padding:4px 9px;border-radius:100px}

/* ---------- add-on packs ---------- */
.packs{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:26px}
.pack{padding:26px;border-radius:var(--r);border:1px solid var(--line);background:#fff;
  transition:all .28s var(--ez)}
.pack:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 16px 38px rgba(65,105,225,.12)}
.pack-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}
.pack-n{font-family:var(--d);font-size:18.5px;font-weight:700;letter-spacing:-.02em;display:flex;align-items:center;gap:9px}
.pack-n .pack-ic{width:32px;height:32px;border-radius:9px;background:var(--blue-l);display:grid;place-items:center;color:var(--blue);flex-shrink:0}
.pack-n .pack-ic svg{width:17px;height:17px}
.pack-p{font-family:var(--d);font-size:16px;font-weight:700;color:var(--blue);white-space:nowrap;text-align:right;line-height:1.2}
.pack-p small{display:block;font-family:var(--b);font-size:10.5px;font-weight:600;color:var(--dim)}
.pack .tagl{font-size:13.4px;color:var(--soft);margin:2px 0 15px}
.pack ul{display:grid;gap:9px}
.pack li{display:flex;gap:9px;align-items:flex-start;font-size:13.6px;line-height:1.5;color:var(--soft)}
.pack li svg{width:14px;height:14px;color:var(--blue);flex-shrink:0;margin-top:4px}
.pack-t{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--blue);
  background:var(--blue-l);padding:4px 9px;border-radius:100px;margin-left:8px;vertical-align:middle}

/* ---------- responsive additions ---------- */
@media(max-width:1040px){
  .packs{grid-template-columns:1fr}
}
@media(max-width:760px){
  .mxscroll{overflow-x:auto}
  .matrix thead th{position:static}
  .stdblock{padding:22px 20px}
  .tiptrip{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .aurora i{transform:none!important}
}