/* ==========================================================================
   Tarang, WhatsApp AI platform 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:#F8FAF9; --bg2:#EFF6F1; --bg3:#E4F1EA;
  --ink:#0F172A; --soft:#475569; --dim:#64748B;
  --line:#E4EAE7; --line2:#CBD5D0;
  --blue:#059669; --blue-d:#047857; --blue-l:#D1FAE5;
  --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(5,150,105,.26)}
.btn:hover{transform:translateY(-2px);background:var(--blue-d);box-shadow:0 12px 32px rgba(5,150,105,.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(5,150,105,.12),transparent 62%),
  radial-gradient(560px 380px at 92% 8%,rgba(5,150,105,.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(5,150,105,.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(5,150,105,.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(5,150,105,.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(5,150,105,.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(5,150,105,.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(5,150,105,.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(5,150,105,.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(5,150,105,.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:#0B1220;
}
.sec.dark em,.sec.dark .eyebrow{color:#34D399}
.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(5,150,105,.22);color:#6EE7B7}

/* ---------- 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:#0B1220;color:#DCF3EA;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:#0B1220}
.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(5,150,105,.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(5,150,105,.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(5,150,105,.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(5,150,105,.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}
}


/* ==========================================================================
   EDUCATION LANDING (page-admissions-agent.php)
   Same system, three additions: a photo-free two-column hero, the media
   flow chips, and the economics block. Everything else reuses the classes
   above. Scoped under .aedu so it can never touch the real-estate page.
   ========================================================================== */
.aedu .ahero{padding:60px 0 74px;position:relative;overflow:hidden}
.aedu .ahero::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  radial-gradient(680px 420px at 12% -10%,rgba(5,150,105,.12),transparent 62%),
  radial-gradient(560px 380px at 92% 6%,rgba(5,150,105,.09),transparent 60%)}
.aedu .aherogrid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.aedu .ahero h1{font-size:clamp(40px,6vw,72px);line-height:1.03;letter-spacing:-.02em;margin-bottom:20px}
.aedu .ahero-sub{font-size:clamp(16.5px,1.9vw,19px);line-height:1.6;color:var(--soft);margin-bottom:26px;max-width:560px}
.aedu .ahero .callcard{max-width:420px;margin-left:auto}

/* media-buying flow chips */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;margin-top:30px}
.flownode{padding:12px 18px;border-radius:100px;border:1px solid var(--line);background:#fff;
  font-family:var(--b);font-weight:700;font-size:13.6px;color:var(--ink);box-shadow:0 8px 24px rgba(20,30,70,.07)}
.flownode.is-dec{border-color:var(--blue);color:var(--blue);background:var(--blue-l)}
.flownode.is-loop{border-style:dashed;color:var(--soft)}
.flowarrow{color:var(--blue);font-weight:800;font-size:15px}

/* economics block */
.arithbox{margin-top:8px;max-width:560px;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;box-shadow:0 14px 40px rgba(16,24,64,.06);overflow:hidden}
.arow{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:16px 22px;border-bottom:1px solid var(--line)}
.arow span{font-size:14.5px;color:var(--soft)}
.arow b{font-family:var(--d);font-size:20px;letter-spacing:-.02em;white-space:nowrap}
.arow b.confirm{font-size:13px;font-weight:700;color:var(--amber);background:rgba(224,130,26,.12);padding:4px 10px;border-radius:100px}
.apunch{padding:20px 22px;font-family:var(--d);font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--blue);background:var(--blue-l)}

@media(max-width:900px){
  .aedu .aherogrid{grid-template-columns:1fr;gap:34px}
  .aedu .ahero .callcard{margin:0 auto}
}


/* ---------- founding-offer banner ---------- */
/* A royal-blue bar so it reads as an offer, not fine print. Three quiet pieces
   of motion carry attention without hurting the premium feel: it slides down
   once on load, a soft light sheen sweeps across every few seconds, and the
   button holds a gentle pulse. All of it freezes flat under reduce-motion. */
.promobar{position:sticky;top:0;z-index:95;overflow:hidden;color:#fff;
  background:linear-gradient(100deg,#047857 0%,#059669 52%,#056E52 100%);
  box-shadow:0 6px 20px rgba(20,30,70,.22);animation:promoDrop .55s var(--ez) both}
.promobar::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 34%,rgba(255,255,255,.22) 50%,transparent 66%);
  transform:translateX(-120%);animation:promoSheen 7s ease-in-out 1.4s infinite}
@keyframes promoDrop{from{transform:translateY(-100%)}to{transform:none}}
@keyframes promoSheen{0%,58%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}
.promobar-in{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:48px;padding:9px 0}
.promobar-msg{margin:0;display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:13.5px;line-height:1.4;color:#E6F6EF}
.promobar-tag{font-weight:800;letter-spacing:.6px;text-transform:uppercase;background:#fff;color:var(--blue-d);padding:4px 12px;border-radius:100px;font-size:11px;white-space:nowrap}
.promobar-text{color:#DCF3EA}
.promo-hi{color:#FFD27A;font-weight:800}
.promobar-right{display:flex;align-items:center;gap:13px;flex-shrink:0}
.promobar-count{display:flex;align-items:center;gap:7px;font-family:var(--d);font-weight:800;font-size:14.5px;color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.promobar-count::before{content:"";width:8px;height:8px;border-radius:50%;background:#FFD27A;box-shadow:0 0 0 0 rgba(255,210,122,.75);animation:promoPing 1.6s infinite}
@keyframes promoPing{70%{box-shadow:0 0 0 7px rgba(255,210,122,0)}100%{box-shadow:0 0 0 0 rgba(255,210,122,0)}}
.promobar .btn-sm{background:#fff;color:var(--blue-d);border-color:#fff;box-shadow:none;font-weight:800;animation:promoPulse 2.6s ease-in-out infinite}
.promobar .btn-sm:hover{background:#FFD27A;color:#3A2A00;border-color:#FFD27A;animation:none}
@keyframes promoPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}}
.promobar-x{background:transparent;border:0;color:rgba(255,255,255,.7);font-size:22px;line-height:1;cursor:pointer;padding:0 2px}
.promobar-x:hover{color:#fff}
body.has-promo .bar{top:var(--promo-h,48px)}
@media(max-width:760px){
  .promobar-text{display:none}
  .promobar-in{gap:10px}
  .promobar-count{font-size:13px}
  .promobar-tag{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .promobar{animation:none}
  .promobar::after{display:none}
  .promobar .btn-sm,.promobar-count::before{animation:none}
}


/* ==========================================================================
   TARANG COMPONENTS (WhatsApp AI platform)
   Chat hero, trust bar, alternating feature rows, four-column pricing.
   ========================================================================== */

/* ---------- WhatsApp chat hero ---------- */
.wachat{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 26px 60px rgba(15,23,42,.14);max-width:410px}
.wa-top{display:flex;align-items:center;gap:11px;padding:12px 16px;background:#075E54;color:#fff}
.wa-av{width:38px;height:38px;border-radius:50%;background:#25D366;display:grid;place-items:center;color:#fff;font-family:var(--d);font-weight:800;font-size:15px;flex-shrink:0}
.wa-who{flex:1;min-width:0}
.wa-who b{display:block;font-size:14px;font-family:var(--d);letter-spacing:-.01em}
.wa-who span{font-size:11.5px;color:rgba(255,255,255,.8)}
.wa-live{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#8FE3A9}
.wa-body{padding:16px;display:grid;gap:9px;min-height:238px;align-content:start;background:#ECE5DD}
.wa-bub{max-width:84%;padding:9px 13px 7px;border-radius:12px;font-size:13.7px;line-height:1.5;color:#111b21;
  box-shadow:0 1px 1px rgba(0,0,0,.09);opacity:0;transform:translateY(8px);animation:waIn .45s var(--ez) forwards}
.wa-in{background:#fff;border-top-left-radius:4px}
.wa-out{background:#D9FDD3;margin-left:auto;border-top-right-radius:4px}
.wa-bub.voice{display:flex;align-items:center;gap:9px;min-width:190px}
.wa-bub.voice svg{width:20px;height:20px;color:var(--blue);flex-shrink:0}
.wa-wave{flex:1;height:18px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--blue) 0 2px,transparent 2px 5px);opacity:.5}
.wa-time{font-size:9.5px;color:#667781;display:block;text-align:right;margin-top:2px}
@keyframes waIn{to{opacity:1;transform:none}}
.wa-foot{border-top:1px solid var(--line);padding:13px 16px;display:grid;gap:8px;background:#fff}
.wa-frow{display:flex;justify-content:space-between;align-items:center;font-size:12.5px}
.wa-frow span{color:var(--dim)} .wa-frow b{font-family:var(--d);font-size:13px}
.wa-cardtag{font-size:10px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;padding:3px 9px;border-radius:100px;background:var(--blue-l);color:var(--blue-d)}
.wa-fill{opacity:0;animation:waIn .45s var(--ez) forwards}
.hero .wachat{margin-left:auto}

/* ---------- trust bar ---------- */
.trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.trustbar-in{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 36px;padding:16px var(--pad)}
.trustbar span{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--soft)}
.trustbar svg{width:16px;height:16px;color:var(--blue);flex-shrink:0}

/* ---------- alternating feature rows ---------- */
.frow{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-bottom:66px}
.frow:last-child{margin-bottom:0}
.frow.rev .frow-media{order:-1}
.frow h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:12px}
.frow-copy>p{font-size:15.5px;margin-bottom:6px}
.frow ul{display:grid;gap:10px;margin:16px 0 18px}
.frow li{display:flex;gap:10px;font-size:14.6px;color:var(--soft);line-height:1.5}
.frow li svg{width:17px;height:17px;color:var(--blue);flex-shrink:0;margin-top:3px}
.frow-link{font-weight:700;color:var(--blue);font-size:14px}
.frow-media{border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:0 20px 50px rgba(15,23,42,.10)}
.frow-media img{width:100%;display:block}

/* ---------- feature-row product mockups ----------
   Real interface renderings, not icon placeholders: each frow-media holds a
   built mockup (the same coded-screenshot technique as the hero's WhatsApp
   card) plus one floating stat chip, the way a working product photographs
   itself. One chip per mockup, not scattered decoration. */
.frow-media.has-mock{overflow:visible;border:0;box-shadow:none;border-radius:0;
  position:relative;display:flex;justify-content:center;padding:22px 14px}
.uimock{width:100%;max-width:380px;background:#fff;border:1px solid var(--line);
  border-radius:20px;box-shadow:0 24px 60px rgba(15,23,42,.14);overflow:hidden}
.uimock-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;border-radius:100px;background:#fff;border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(15,23,42,.16);font-size:12.5px;font-weight:700;
  color:var(--ink);white-space:nowrap;z-index:2}
.uimock-chip svg{width:15px;height:15px;color:var(--blue);flex-shrink:0}
.uimock-chip.chip-tr{top:2px;right:0}
.uimock-chip.chip-bl{bottom:2px;left:0}

/* AI assistant mockup: the wachat thread, condensed */
.uimock-chat .wa-top{background:#075E54}
.uimock-chat .wa-body{min-height:0;padding:18px 16px}

/* Shared team inbox mockup */
.uimock-inbox .wa-top{background:#075E54}
.inbox-list{padding:8px;display:grid;gap:2px;background:#fff}
.inbox-row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  padding:12px 10px;border-radius:12px}
.inbox-row.is-active{background:var(--blue-l)}
.inbox-av{width:36px;height:36px;border-radius:50%;background:var(--bg3);color:var(--soft);
  display:grid;place-items:center;font-family:var(--d);font-weight:700;font-size:13.5px;flex-shrink:0}
.inbox-mid{min-width:0}
.inbox-mid b{display:block;font-size:13.6px;font-family:var(--d);letter-spacing:-.01em}
.inbox-mid span{display:block;font-size:12px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-tag{font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;white-space:nowrap}
.inbox-tag.tag-ai{background:var(--blue-l);color:var(--blue-d)}
.inbox-tag.tag-human{background:var(--ink);color:#fff}
.inbox-tag.tag-new{background:rgba(224,130,26,.14);color:var(--amber)}

/* Broadcasts mockup: campaign header + live funnel bars (animated by the
   same .rv reveal logic that drives the maths-section bars) */
.uimock-bc{padding:20px 22px}
.bc-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:18px}
.bc-head b{font-family:var(--d);font-size:14.5px;letter-spacing:-.01em}
.bc-live{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  letter-spacing:.8px;text-transform:uppercase;color:var(--green)}
.uimock-bc .bar-row{margin-bottom:14px}
.uimock-bc .bar-row:last-child{margin-bottom:0}
.uimock-bc .bar-tr{height:18px;border-radius:6px}
.uimock-bc .bar-lab{font-size:12px;margin-bottom:5px}
.uimock-bc .bar-lab b{font-size:13.5px}

/* Knowledge base mockup: uploaded docs + a grounded answer */
.uimock-kb{padding:18px 20px}
.kb-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--line)}
.kb-row:last-of-type{border-bottom:0}
.kb-ic{width:30px;height:30px;border-radius:9px;background:var(--bg2);color:var(--blue);
  display:grid;place-items:center;flex-shrink:0}
.kb-ic svg{width:15px;height:15px}
.kb-name{flex:1;font-size:13.4px;font-weight:600;color:var(--ink)}
.kb-ok{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:var(--green)}
.kb-ok svg{width:13px;height:13px}
.kb-q{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--bg2);
  font-size:12.6px;color:var(--soft);line-height:1.5}
.kb-q b{color:var(--ink)}

@media(max-width:900px){
  .uimock-chip{position:static;margin:14px auto 0;box-shadow:0 10px 24px rgba(15,23,42,.12)}
  .frow-media.has-mock{padding:6px 14px 0;flex-direction:column;align-items:center}
}

/* ---------- feature-grid group label ---------- */
.grouplab{display:flex;align-items:center;gap:10px;margin:6px 0 18px;font-family:var(--d);font-size:15px;font-weight:700}
.grouplab .pip{font-size:10.5px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;padding:4px 11px;border-radius:100px}
.pip-free{background:var(--bg3);color:var(--soft)} .pip-ai{background:var(--blue-l);color:var(--blue-d)}

/* ---------- four-column pricing table ---------- */
.ptable-wrap{overflow-x:auto;margin-top:28px;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:0 14px 40px rgba(15,23,42,.06)}
.ptable{width:100%;min-width:780px;border-collapse:collapse}
.ptable th,.ptable td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--line);font-size:13.6px;vertical-align:middle}
.ptable thead th{background:var(--bg2);vertical-align:bottom;border-bottom:1px solid var(--line2)}
.ptable thead th:first-child{text-align:left}
.pt-name{font-family:var(--d);font-size:18px;font-weight:700;display:block}
.pt-price{font-family:var(--d);font-size:23px;font-weight:800;color:var(--ink);display:block;margin-top:4px}
.pt-per{font-size:11px;color:var(--dim);font-weight:600}
.pt-setup{display:block;font-size:10.5px;color:var(--blue-d);font-weight:700;margin-top:6px}
.ptable thead th.pop{background:var(--blue-l)}
.pt-tag{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#fff;background:var(--blue);padding:3px 10px;border-radius:100px;margin-bottom:7px}
.ptable tbody th{text-align:left;font-weight:600;color:var(--soft);width:26%}
.ptable td.pop{background:rgba(5,150,105,.05)}
.ptable td.val{font-family:var(--d);font-weight:700;color:var(--ink)}
.ptable tbody tr:hover td,.ptable tbody tr:hover th{background:rgba(5,150,105,.05)}
.ptable tbody tr:hover td.pop{background:rgba(5,150,105,.09)}
.pt-tick{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--blue-l);color:var(--blue)}
.pt-tick svg{width:13px;height:13px}
.pt-dash{color:var(--line2);font-size:16px}
.ptable tfoot td{padding:16px}
.pt-cta{display:inline-flex;width:100%}

/* wallet + done-for-you callouts */
.callout{margin-top:22px;padding:22px 26px;border-radius:var(--r);border:1px solid var(--line);background:var(--bg2)}
.callout.accent{border-color:var(--blue);background:var(--blue-l)}
.callout h4{font-size:17px;margin-bottom:8px}
.callout p{font-size:14.6px;margin:0}
.dfy{display:grid;gap:12px;margin-top:14px}
.dfy-item{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:#fff}
.dfy-item svg{width:20px;height:20px;color:var(--blue);margin-top:2px}
.dfy-item b{font-family:var(--d)} .dfy-item p{font-size:14px;margin:4px 0 0}
.addons2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin-top:14px}
.addon2{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:13.6px}
.addon2 span{color:var(--soft)} .addon2 b{font-family:var(--d);color:var(--blue);white-space:nowrap}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .frow{grid-template-columns:1fr;gap:26px;margin-bottom:48px}
  .frow.rev .frow-media{order:0}
  .hero .wachat,.wachat{margin:26px auto 0}
}
@media(max-width:760px){
  .trustbar-in{gap:10px 20px}
  .frow-media{box-shadow:0 12px 30px rgba(15,23,42,.10)}
}

/* ---------- comparison table (Tarang vs typical) ---------- */
.ptable.vs2{min-width:560px}
.vs-dim{color:var(--dim);font-size:13px}
.ptable.vs2 td.val.pop{color:var(--blue-d);font-weight:700}

/* ---------- in-modal interactive demo ---------- */
.demo-chat{flex:1;display:flex;flex-direction:column;min-height:0;width:100%;max-width:560px;margin:0 auto;
  background:#ECE5DD;border-left:1px solid var(--line);border-right:1px solid var(--line)}
.dc-note{padding:8px 14px;font-size:11.5px;color:#667781;background:#fff;border-bottom:1px solid var(--line);text-align:center}
.dc-body{flex:1;overflow-y:auto;min-height:0;padding:16px;display:grid;gap:9px;align-content:start}
.dc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:10px 14px;background:#fff;border-top:1px solid var(--line)}
.dc-chip{font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:100px;border:1px solid var(--blue);
  color:var(--blue-d);background:var(--blue-l);cursor:pointer;transition:background .15s,color .15s}
.dc-chip:hover{background:var(--blue);color:#fff}
.dc-form{display:flex;gap:8px;padding:10px 14px;background:#fff;border-top:1px solid var(--line)}
.dc-form input{flex:1;border:1px solid var(--line2);border-radius:100px;padding:10px 15px;font-size:14px;outline:none;font-family:inherit}
.dc-form input:focus{border-color:var(--blue)}
.dc-form button{width:42px;height:42px;border:0;border-radius:50%;background:var(--blue);color:#fff;cursor:pointer;flex-shrink:0;display:grid;place-items:center}
.dc-form button svg{width:19px;height:19px}
.dc-form button:hover{background:var(--blue-d)}
.dc-typing{display:flex;gap:4px;align-items:center;width:auto;min-width:0}
.dc-typing span{width:7px;height:7px;border-radius:50%;background:#9aa4ab;animation:dcT 1s infinite}
.dc-typing span:nth-child(2){animation-delay:.15s}
.dc-typing span:nth-child(3){animation-delay:.3s}
@keyframes dcT{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}