/* Repli marketing site, light theme only, tokens from the prod app style guide */

:root{
  --surface:#f4f5f8; --card:#ffffff; --card-low:#fafbfc; --card-lowest:#eef0f4;
  --ink:#1a1d26; --body:#363b47; --muted:#7b8090; --faint:#aeb3bf;
  --outline:#e6e8ee; --outline-soft:#edeef2; --chipbg:#f3f4f7;
  --primary:#6d5ef0; --primary-deep:#5a32e0; --primary-container:#efeafe; --primary-on-container:#5a45d8;
  --primary-tint:#f6f4ff; --primary-card-border:#e7e0fb;
  --success:#2f9d6b; --success-container:#e6f5ec; --success-on:#3a7d54;
  --gradient:linear-gradient(135deg,#6d5ef0 0%,#a18aff 100%);
  --btn-shadow:0 6px 14px -6px rgba(90,50,224,.6);
  --shadow-card:0 1px 2px rgba(26,29,38,.04), 0 10px 26px -16px rgba(26,29,38,.16);
  --radius:10px; --radius-sm:6px; --radius-xl:14px;
  --sans:'Hanken Grotesk',-apple-system,Roboto,Helvetica,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--card);color:var(--body);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{color:var(--ink);line-height:1.15;text-wrap:balance}
a{color:var(--primary-deep)}
section{scroll-margin-top:76px}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}

/* ---------- primitives ---------- */
.r-btn{display:inline-flex;align-items:center;gap:8px;border:none;border-radius:var(--radius);padding:11px 20px;font-size:15px;font-weight:600;cursor:pointer;text-decoration:none;transition:transform 150ms,box-shadow 150ms,background 150ms}
.r-btn.primary,.r-btn.grad{position:relative;overflow:hidden;background:linear-gradient(135deg,#6d5ef0 0%,#8f7bff 55%,#a18aff 100%);color:#fff;box-shadow:var(--btn-shadow)}
.r-btn.primary::before,.r-btn.grad::before{content:'';position:absolute;top:0;bottom:0;left:-80%;width:55%;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%);transform:skewX(-20deg)}
.r-btn.primary:hover,.r-btn.grad:hover{transform:translateY(-2px);box-shadow:0 12px 24px -8px rgba(90,50,224,.5)}
.r-btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--outline)}
.r-btn.ghost:hover{background:var(--chipbg)}
.r-btn.big{padding:14px 28px;font-size:16.5px;border-radius:12px}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-on-container);background:var(--primary-container);border-radius:999px;padding:5px 14px}
.rx-h2{font-size:clamp(30px,3.6vw,42px);font-weight:800;letter-spacing:-.02em;margin-top:14px}
.secsub{color:var(--muted);max-width:64ch;margin-top:10px}
.grad{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.tagchip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:600}
.tagchip .dot{width:6px;height:6px;border-radius:50%}
.statuspill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 10px;font-size:11.5px;font-weight:600;background:var(--success-container);color:var(--success-on)}
.statuspill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--success)}
.rx-alt{background:var(--surface)}
.livedot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0}
.chiprow{display:flex;gap:10px;flex-wrap:wrap}
.eyebrow.shopchip{display:inline-flex;align-items:center;gap:7px;background:var(--success-container);color:#2f7d54}
.eyebrow.shopchip img{width:15px;height:15px;object-fit:contain}

/* ---------- nav ---------- */
.sitenav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 40px;background:rgba(255,255,255,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--outline-soft)}
.sitenav .logo{height:30px;width:auto}
.sitenav .links{display:flex;gap:26px;font-size:14.5px;font-weight:500}
.sitenav .links a{color:var(--body);text-decoration:none}
.sitenav .links a:hover{color:var(--primary-deep)}

/* ---------- hero ---------- */
.rx-hero{position:relative;overflow:hidden;background:var(--card)}
.rx-hero-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.12fr .88fr;gap:52px;align-items:center;padding:88px 40px 76px}
.rx-hero h1{font-size:clamp(44px,5.6vw,74px);font-weight:800;letter-spacing:-.028em;line-height:1.02;margin:20px 0 18px}
.rx-hero .sub{font-size:19px;max-width:46ch;margin-bottom:28px}
.ctarow{display:flex;gap:12px;flex-wrap:wrap}
.rx-channels{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--muted);margin-top:18px}
.chanicons{display:inline-flex;gap:9px;align-items:center}
.chanicons img{width:20px;height:20px;object-fit:contain}
.rx-photo{position:relative}
.rx-photo::before{content:'';position:absolute;inset:20px -16px -16px 20px;background:var(--card-lowest);border-radius:24px;transform:rotate(3deg)}
.rx-photo > img{position:relative;border-radius:18px;box-shadow:0 26px 52px -26px rgba(26,29,38,.38)}
.rx-photo .sparkle{position:absolute;z-index:2}
.rx-photo .s1{top:-14px;right:-12px;width:30px}
.rx-photo .s2{bottom:-8px;left:-16px;width:18px;opacity:.75}
.db-float{position:absolute;z-index:2;background:var(--card);border:1px solid var(--outline);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:10px 16px;font-size:13px;font-weight:600;color:var(--ink)}
.db-float small{display:block;font-weight:500;color:var(--muted);font-size:11.5px}
.db-float.f1{left:-30px;bottom:52px}
.db-float.f2{right:-16px;top:36px}

/* ---------- numbers strip ---------- */
.db-numbers{background:var(--surface);border-top:1px solid var(--outline-soft);border-bottom:1px solid var(--outline-soft);padding:56px 40px}
.db-numbers-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.db-num b{display:block;font-size:clamp(44px,5vw,68px);font-weight:800;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.05}
.db-num b span{font-size:inherit;color:inherit}
.db-num > span{font-size:14.5px;color:var(--muted)}

/* ---------- Chloe story ---------- */
.db-story{max-width:1180px;margin:0 auto;padding:72px 40px;display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.db-story img{border-radius:18px;box-shadow:var(--shadow-card)}
.db-story h2{font-size:34px;font-weight:800;letter-spacing:-.015em;margin:14px 0 16px}
.db-story p{margin-bottom:14px;max-width:58ch}
.db-pull{border-left:3px solid var(--primary);padding:6px 0 6px 20px;font-size:19px;font-weight:600;color:var(--ink);margin:20px 0;max-width:50ch}

/* ---------- stop / get ---------- */
.dc-lists{max-width:1080px;margin:0 auto;padding:72px 40px;display:grid;grid-template-columns:1fr 1fr;gap:22px}
.dc-list{border-radius:var(--radius-xl);padding:30px;border:1px solid var(--outline)}
.dc-list.stop{background:var(--card)}
.dc-list.start{background:var(--ink);border-color:var(--ink)}
.dc-list h3{font-size:14px;letter-spacing:.07em;text-transform:uppercase;margin-bottom:18px}
.dc-list.stop h3{color:var(--muted)}
.dc-list.start h3{color:#a18aff}
.dc-list ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.dc-list li{padding-left:28px;position:relative;font-size:15.5px}
.dc-list.stop li{color:var(--body)}
.dc-list.stop li::before{content:'✕';position:absolute;left:0;color:var(--faint);font-weight:700}
.dc-list.start li{color:#e8eaf0}
.dc-list.start li::before{content:'✓';position:absolute;left:0;color:#7fe0d3;font-weight:700}

/* ---------- steps ---------- */
.db-steps{background:var(--card);border-top:1px solid var(--outline-soft);border-bottom:1px solid var(--outline-soft);padding:72px 40px}
.db-steps-inner{max-width:800px;margin:0 auto}
.db-steps h2{margin-bottom:34px}
.db-step{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:26px 0;border-top:1px solid var(--outline-soft)}
.db-step .n{font-size:28px;font-weight:800;color:var(--primary);font-variant-numeric:tabular-nums}
.db-step h3{font-size:19px;margin-bottom:6px}
.db-step p{font-size:15px;max-width:60ch}

/* ---------- Copilot ---------- */
.rx-cop{background:#fcfbff;border-top:1px solid var(--outline-soft);border-bottom:1px solid var(--outline-soft);padding:84px 40px}
.rx-cop-inner{max-width:1180px;margin:0 auto}
.rx-cop-inner > .secsub{max-width:66ch}
.rx-cop-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;margin-top:40px}
.rx-sources{display:flex;flex-direction:column;gap:12px}
.rx-src{background:var(--card);border:1px solid var(--outline);border-radius:var(--radius-xl);padding:14px 18px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow-card)}
.rx-src .ic{width:36px;height:36px;flex-shrink:0;border-radius:10px;background:var(--primary-container);color:var(--primary-on-container);display:flex;align-items:center;justify-content:center}
.rx-src .ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rx-src b{display:block;font-size:14px;color:var(--ink)}
.rx-src span{font-size:12.5px;color:var(--muted)}
.rx-src .ok{margin-left:auto;color:var(--success);font-weight:800}
.rx-feed{text-align:center;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--primary-on-container);padding:10px 0 0}
.rx-ticket{background:var(--card);border:1px solid var(--outline);border-radius:16px;box-shadow:0 26px 52px -28px rgba(26,29,38,.28);overflow:hidden;font-size:13.5px}
.rx-tick-head{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--outline-soft);background:var(--card-low)}
.rx-tick-head .who{font-weight:700;color:var(--ink);font-size:13px}
.rx-tick-head .ord{font-size:11.5px;color:var(--muted)}
.rx-msg{margin:16px 18px;padding:13px 16px;background:var(--chipbg);border-radius:12px;color:var(--body);max-width:88%;line-height:1.5}
.tagchip.chan{background:#e6f1fb;color:#2b5a99}
.tagchip.chan img{width:12px;height:12px;object-fit:contain}
.rx-src .ic.shop{background:#fff;border:1px solid var(--outline-soft)}
.rx-src .ic.shop img{width:22px;height:22px;object-fit:contain}
.rx-order{display:flex;align-items:center;gap:12px;margin:0 18px 14px;padding:10px 12px;border:1px solid var(--outline);border-radius:12px;background:var(--card-low)}
.rx-order .prod{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#fff;border:1px solid var(--outline-soft);flex-shrink:0}
.rx-order .oinfo{flex:1;min-width:0}
.rx-order .oinfo b{display:block;font-size:13px;color:var(--ink)}
.rx-order .oinfo span{font-size:11.5px;color:var(--muted)}
.rx-order .osrc{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:#2f7d54;background:var(--success-container);border-radius:999px;padding:3px 10px;flex-shrink:0}
.rx-order .osrc img{width:13px;height:13px;object-fit:contain}
.rx-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.rx-benefit{background:var(--card);border:1px solid var(--outline);border-radius:var(--radius-xl);padding:20px 22px;box-shadow:var(--shadow-card)}
.rx-benefit b{display:block;font-size:15px;color:var(--ink);margin-bottom:6px}
.rx-benefit span{font-size:13.5px;color:var(--body)}
.rx-cp{margin:0 18px 18px;background:#fcfbff;border:1px solid var(--primary-card-border);border-radius:12px;padding:14px 16px}
.cp-label{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--primary-on-container);margin-bottom:6px}
.cp-replay{border:1px solid var(--primary-card-border);background:var(--card);color:var(--primary-on-container);border-radius:999px;padding:3px 10px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-family:var(--sans);cursor:pointer;opacity:0;pointer-events:none;transition:opacity 300ms}
.cp-replay.show{opacity:1;pointer-events:auto}
.cp-replay:hover{background:var(--primary-container)}
.cp-think{display:none;gap:5px;padding:6px 0 10px}
.cp-think.show{display:flex}
.cp-think i{width:7px;height:7px;border-radius:50%;background:var(--primary);opacity:.35}
.rx-cp .draft{color:var(--body);line-height:1.55;min-height:112px}
.rx-cp .draft.typing::after{content:'▍';color:var(--primary)}
.rx-src{transition:border-color 300ms,box-shadow 300ms,transform 300ms}
.rx-src.lit{border-color:var(--primary);box-shadow:0 10px 24px -12px rgba(109,94,240,.55);transform:translateX(4px)}
.rx-src .ic{transition:background 300ms,color 300ms}
.rx-src.lit .ic{background:var(--primary);color:#fff}
.rx-beams{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;display:none}
.rx-beams path{fill:none;stroke:var(--primary-card-border);stroke-width:1.5}
.rx-beams path.hotbeam{stroke:var(--primary);stroke-width:2;opacity:0}
.rx-cop-grid{position:relative}
.rx-cites{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.rx-cites .tagchip{background:var(--primary-container);color:var(--primary-on-container)}
.rx-cp-actions{display:flex;gap:8px;margin-top:12px}
.rx-cp-actions .r-btn{padding:7px 14px;font-size:13px}

/* ---------- platform ---------- */
.rx-plat{padding:84px 40px;background:var(--card)}
.rx-plat-inner{max-width:1180px;margin:0 auto}
.rx-plat-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:22px;margin-top:36px;align-items:start}
.rx-side{display:flex;flex-direction:column;gap:22px}
.rx-appwrap{position:relative}
.rx-toast{position:absolute;top:-16px;right:-8px;z-index:5;background:var(--card);border:1px solid var(--outline);border-radius:12px;box-shadow:0 14px 30px -14px rgba(26,29,38,.35);padding:10px 16px;font-size:12.5px;color:var(--body);opacity:0;transform:translateY(-6px);transition:opacity 400ms,transform 400ms;pointer-events:none}
.rx-toast b{color:var(--ink)}
.rx-toast.show{opacity:1;transform:none}
.rx-app{display:grid;grid-template-columns:212px 1fr;border:1px solid var(--outline);border-radius:16px;overflow:hidden;background:var(--card);box-shadow:var(--shadow-card);font-size:13px}
.rx-app > *{min-width:0}
.rx-rail{background:var(--card-low);border-right:1px solid var(--outline-soft);padding:12px 10px 16px}
.rx-rail .rl-h{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 10px 4px}
.rx-rail .rl{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:8px;color:var(--body);font-weight:500;font-size:12.5px}
.rx-rail .rl i{font-style:normal;font-size:10.5px;color:var(--muted);background:var(--chipbg);border-radius:999px;padding:1px 7px}
.rx-rail .rl.on{background:var(--primary-container);color:var(--primary-on-container);font-weight:700}
.rx-rail .rl.on i{background:rgba(255,255,255,.7);color:var(--primary-on-container)}
.appframe{background:var(--card);border:1px solid var(--outline);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);overflow:hidden;font-size:13.5px}
.af-top{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--outline-soft);background:var(--card-low)}
.af-top i{width:10px;height:10px;border-radius:50%;background:var(--outline);display:inline-block}
.af-top .af-name{margin-left:8px;font-size:12px;font-weight:600;color:var(--muted)}
.af-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--outline-soft)}
.af-row:last-child{border-bottom:none}
.af-avatar{position:relative;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.af-avatar > img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.chbadge{position:absolute;right:-4px;bottom:-4px;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #fff;box-shadow:0 1px 3px rgba(26,29,38,.3);overflow:hidden;display:flex;align-items:center;justify-content:center}
.chbadge img{width:100%;height:100%;object-fit:contain}
.presence{position:absolute;right:-2px;bottom:-2px;width:10px;height:10px;border-radius:50%;background:var(--success);border:2px solid #fff}
.af-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--success-on)}
.rlc{display:inline-flex;align-items:center;gap:7px;min-width:0}
.rlc img{width:13px;height:13px;object-fit:contain}
.af-main{flex:1;min-width:0}
.af-main .af-who{font-weight:700;color:var(--ink);font-size:13px}
.af-main .af-subj{color:var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.af-meta{display:flex;gap:6px;align-items:center;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}
.rp-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 16px 8px}
.rp-kpi{background:var(--card-low);border:1px solid var(--outline-soft);border-radius:var(--radius);padding:12px}
.rp-kpi b{display:block;font-size:20px;color:var(--ink);font-variant-numeric:tabular-nums}
.rp-kpi span{font-size:11.5px;color:var(--muted)}
.rp-chart{padding:10px 16px 14px}
.rp-chart svg{width:100%;height:84px;display:block}
.rp-chart .grid line{stroke:var(--outline-soft);stroke-width:1}
.rp-chart .line{stroke:var(--primary);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.rp-chart .enddot{fill:var(--primary)}
.rp-days{display:flex;justify-content:space-between;padding:6px 2px 0;font-size:10px;font-weight:600;color:var(--faint);letter-spacing:.04em}
.af-time{font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;flex-shrink:0}
.af-row.unread .af-who{color:var(--primary-deep)}
.af-row.unread .af-who::after{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--primary);margin-left:7px;vertical-align:1px}
.statuspill.open{background:var(--note-surface, #fbf0db);color:#8a6520}
.statuspill.open::before{background:#c2843a}
.tgl{width:32px;height:19px;flex-shrink:0;border-radius:999px;background:var(--outline);position:relative;transition:background 250ms;display:inline-block}
.tgl i{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(26,29,38,.25);transition:left 250ms}
.tgl.on{background:var(--primary)}
.tgl.on i{left:15px}
.ranchip{background:var(--success-container);color:var(--success-on);border-radius:999px;padding:2px 9px;font-size:10.5px;font-weight:700;flex-shrink:0;opacity:0;transition:opacity 400ms}
.ranchip.show{opacity:1}

/* ---------- testimonials ---------- */
.da-sec{max-width:1180px;margin:0 auto;padding:72px 40px}
.da-quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.da-quote{background:var(--card);border:1px solid var(--outline);border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow-card);position:relative;padding-top:44px}
.da-quote::before{content:'\201C';position:absolute;top:8px;left:22px;font-size:48px;line-height:1;font-weight:800;color:var(--outline)}
.da-quote p{font-size:15.5px;color:var(--ink);font-weight:500;margin-bottom:14px}
.da-quote .who{font-size:13px;color:var(--muted)}

/* ---------- pricing ---------- */
.db-pricing{max-width:1180px;margin:0 auto;padding:72px 40px}
.db-tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;margin-top:34px}
.db-tier{background:var(--card);border:1px solid var(--outline);border-radius:var(--radius-xl);padding:24px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow-card)}
.db-tier.hot{border:2px solid var(--primary);box-shadow:0 10px 26px -16px rgba(26,29,38,.3)}
.db-tier .tname{font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.db-tier.hot .tname{color:var(--primary-on-container)}
.db-tier .tweek{font-size:30px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.db-tier .tweek small{font-size:14px;font-weight:600;color:var(--muted)}
.db-tier .tmonth{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.db-tier ul{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:6px}
.db-tier li{font-size:13.5px;color:var(--body);padding-left:20px;position:relative}
.db-tier li::before{content:'✓';position:absolute;left:0;color:var(--success);font-weight:700}
.db-hotchip{align-self:flex-start;background:var(--primary-container);color:var(--primary-on-container);font-size:11px;font-weight:700;border-radius:999px;padding:3px 10px;letter-spacing:.04em;text-transform:uppercase}
.rp-ratecard{margin-top:38px}
.rp-ratecard h3{font-size:16px;margin-bottom:12px}
.rp-ratecard .swhead{margin-top:26px}
.rp-ratecard .swhead span{font-weight:500;color:var(--muted);font-size:13px}
.tablewrap{overflow-x:auto;border:1px solid var(--outline);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}
table.pricetable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;background:var(--card)}
table.pricetable th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 16px;border-bottom:1px solid var(--outline)}
table.pricetable td{padding:13px 16px;border-bottom:1px solid var(--outline-soft);font-size:14.5px;color:var(--body)}
table.pricetable tr:last-child td{border-bottom:none}
table.pricetable td.plan{font-weight:700;color:var(--ink)}
table.pricetable td.money{font-weight:600;color:var(--ink)}
.price-note{font-size:12.5px;color:var(--muted);margin-top:14px;max-width:70ch}

/* ---------- CTA + footer ---------- */
.rx-cta{position:relative;overflow:hidden;text-align:center;padding:88px 40px;background:var(--ink)}
.rx-cta h2{color:#fff;font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-.02em;margin-bottom:12px}
.rx-cta p{color:#b8bcc6;margin-bottom:30px}
footer.sitefoot{padding:28px 40px;border-top:1px solid var(--outline-soft);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:var(--card)}
footer.sitefoot img{height:22px;width:auto;opacity:.85}
footer.sitefoot p{font-size:13px;color:var(--muted)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: no-preference){
  /* .js-anim is set by an inline script and removed again if site.js never
     loads, so content is never hidden by CSS the page cannot un-hide. */
  .js-anim .rv{opacity:0;transform:translateY(26px);transition:opacity 650ms cubic-bezier(.2,.7,.3,1),transform 650ms cubic-bezier(.2,.7,.3,1)}
  .js-anim .rv.in{opacity:1;transform:none}
  .rv.d1{transition-delay:90ms}.rv.d2{transition-delay:180ms}.rv.d3{transition-delay:270ms}
  .sparkle{animation:floaty 6s ease-in-out infinite}
  .rx-photo .s2{animation-delay:-3s}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  .js-anim .rx-cites,.js-anim .rx-cp-actions{opacity:0;transition:opacity 450ms}
  .js-anim .rx-cites.show,.js-anim .rx-cp-actions.show{opacity:1}
  .cp-think i{animation:thinkPulse 1.1s ease-in-out infinite}
  .cp-think i:nth-child(2){animation-delay:.18s}
  .cp-think i:nth-child(3){animation-delay:.36s}
  @keyframes thinkPulse{0%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}}
  .af-row.arrive{animation:rowIn 450ms cubic-bezier(.2,.7,.3,1)}
  @keyframes rowIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
  .statuspill.flash{animation:pillFlash 900ms ease-out}
  @keyframes pillFlash{0%{box-shadow:0 0 0 0 rgba(109,94,240,.55)}100%{box-shadow:0 0 0 10px rgba(109,94,240,0)}}
  .rp-chart .line.drawing{transition:stroke-dashoffset 1400ms cubic-bezier(.3,.6,.3,1)}
  .js-anim .rp-chart .area,.js-anim .rp-chart .enddot{opacity:0;transition:opacity 600ms}
  .js-anim .rp-chart.done .area,.js-anim .rp-chart.done .enddot{opacity:1}
  .livedot{animation:livePulse 2.2s ease-out infinite}
  @keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(47,157,107,.45)}70%{box-shadow:0 0 0 6px rgba(47,157,107,0)}100%{box-shadow:0 0 0 0 rgba(47,157,107,0)}}
  .r-btn.primary::before,.r-btn.grad::before{transition:left 650ms ease}
  .r-btn.primary:hover::before,.r-btn.grad:hover::before{left:125%}
  .r-btn.grad.big::before{animation:sheen 5.5s ease-in-out infinite}
  @keyframes sheen{0%{left:-80%}14%{left:125%}100%{left:125%}}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (min-width:901px){
  .rx-beams{display:block}
}
@media (max-width:900px){
  .rx-hero-inner{grid-template-columns:1fr;padding:56px 24px 48px;gap:40px}
  .db-story,.rx-cop-grid,.rx-plat-grid,.dc-lists,.da-quotes{grid-template-columns:1fr}
  .db-numbers-inner{grid-template-columns:1fr;gap:24px}
  .db-tiers{grid-template-columns:1fr 1fr}
  .rx-app{grid-template-columns:1fr}
  .rx-rail{display:none}
  .sitenav{padding:12px 20px}
  .sitenav .links{display:none}
  .db-numbers,.db-story,.dc-lists,.db-steps,.rx-cop,.rx-plat,.da-sec,.db-pricing,.rx-cta{padding-left:24px;padding-right:24px}
  .rx-benefits{grid-template-columns:1fr}
  .rx-toast{right:4px;top:-12px}
  .db-float.f1{left:8px}
  .db-float.f2{right:8px}
}
@media (max-width:560px){
  .db-tiers{grid-template-columns:1fr}
}

/* ================= v2: design-pass sections ================= */

/* shared */
.wrap{max-width:1180px;margin:0 auto;padding:84px 40px}
.band{background:var(--card);border-top:1px solid var(--outline-soft)}
.band.alt{background:var(--surface)}
.lede{font-size:19px;font-weight:600;color:var(--ink);margin-top:12px;max-width:60ch}
.subhead{font-size:20px;font-weight:800;color:var(--ink);margin:44px 0 14px}
.minihead{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:38px 0 14px}
.kicker{font-size:20px;font-weight:700;color:var(--ink);text-align:center;margin-top:34px}
.tbc{display:inline-block;background:var(--note-surface,#fbf0db);color:#8a6520;border-radius:6px;padding:2px 9px;font-size:12px;font-weight:700;white-space:nowrap}
.pillchip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--body);background:var(--card);border:1px solid var(--outline);border-radius:999px;padding:6px 15px;box-shadow:0 1px 2px rgba(26,29,38,.05)}
.pillchip img{width:15px;height:15px;object-fit:contain}

/* nav */
.sitenav .brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.brandline{font-size:13px;color:var(--muted);border-left:1px solid var(--outline);padding-left:12px}
.sitenav .links{gap:22px;font-size:14px}

/* hero */
.heroline{font-size:clamp(40px,4.6vw,57px);font-weight:800;letter-spacing:-.031em;line-height:1.05;color:var(--ink);margin:22px 0 18px}
.heroline .hl{display:block;overflow:hidden}
.heroline .hl > span{display:block}
.heroline .accent{color:var(--primary)}
.rx-hero .sub{font-size:17px;max-width:52ch;margin-bottom:26px}
.herometa{font-size:12.5px;color:var(--muted);margin-top:8px}
.herometa b{color:var(--body)}

/* proof strip */
.proof{background:var(--ink);color:#fff;padding:52px 40px}
.proof-inner{max-width:1180px;margin:0 auto}
.logorow{border:1px dashed rgba(255,255,255,.18);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.logorow p{font-size:13px;color:#b8bcc6;margin:0}
.proofstats{display:grid;grid-template-columns:repeat(2,1fr);gap:34px}
.pstat b{display:block;font-size:clamp(30px,3.4vw,44px);font-weight:800;letter-spacing:-.02em;color:var(--primary-container);line-height:1.1}
.pstat > span{font-size:13.5px;color:#b8bcc6}
.chanicons.big img{width:26px;height:26px}
.chanicons.big{margin-bottom:10px}

/* without / with */
.swap{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;margin-top:34px}
.swapicon{width:38px;height:38px;border-radius:50%;border:1px solid var(--outline);background:var(--card);display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:16px}
.onecompany{color:#fff;font-weight:800;font-size:18px;margin-bottom:14px}
table.pricetable.compare td.was{color:var(--muted)}
table.pricetable.compare th.hl{color:var(--primary-on-container)}

/* journey */
.journey{background:var(--card);border-top:1px solid var(--outline-soft)}
.jstep{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;align-items:center;padding:44px 0;border-top:1px solid var(--outline-soft)}
.jstep:first-of-type{border-top:none}
.jnum{font-size:12.5px;font-weight:700;color:var(--primary);margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jtext h3{font-size:26px;font-weight:800;letter-spacing:-.015em;margin-bottom:10px}
.jtext p{font-size:15px;max-width:52ch}
.blueprint{border:1px solid var(--primary-card-border);border-radius:16px;background:var(--card);box-shadow:var(--shadow-card);overflow:hidden}
.bp-head{display:flex;justify-content:space-between;align-items:center;padding:11px 15px;border-bottom:1px solid var(--outline-soft);font-size:12.5px;font-weight:700;color:var(--ink)}
.bp-count{color:var(--primary-on-container);background:var(--primary-container);border-radius:999px;padding:2px 10px;font-size:11px}
.scatter{display:flex;flex-wrap:wrap;gap:7px;padding:14px 15px;border-bottom:1px solid var(--outline-soft)}
.scatter span{font-size:11.5px;color:var(--muted);background:var(--chipbg);border-radius:6px;padding:3px 9px}
.bp-rows{padding:6px 0}
.bp-row{display:flex;align-items:center;gap:10px;padding:9px 15px;font-size:13px;font-weight:600;color:var(--ink)}
.bp-row i{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:500;color:var(--muted)}
.bp-row .ok,.bp-done .ok{color:var(--success);font-weight:800}
.bp-ic{width:22px;height:22px;border-radius:6px;background:var(--primary-container);color:var(--primary-on-container);display:flex;align-items:center;justify-content:center;font-size:11px}
.bp-foot{padding:10px 15px;border-top:1px solid var(--outline-soft);font-size:11.5px;color:var(--muted);background:var(--card-low)}
.bp-foot b{color:var(--body)}
.bp-done{display:flex;align-items:center;gap:10px;padding:10px 15px;border-top:1px solid var(--outline-soft);font-size:12.5px;font-weight:600;color:var(--ink);background:var(--primary-tint)}
.bp-done i{margin-left:auto;font-style:normal;font-size:11px;font-weight:500;color:var(--muted)}
.bnum{width:20px;height:20px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800}
.wirebox{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;padding:14px 15px}
.wirelist{display:flex;flex-direction:column;gap:8px}
.wr{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--body);background:var(--card-low);border:1px solid var(--outline-soft);border-radius:8px;padding:8px 10px}
.wi{width:20px;height:20px;border-radius:50%;background:var(--primary-container);color:var(--primary-on-container);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0}
.wirecp{background:var(--primary-tint);border:1px solid var(--primary-card-border);border-radius:10px;padding:11px}
.wcp-head{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:var(--primary-on-container);margin-bottom:7px}
.wirecp p{font-size:11.5px;color:var(--body);margin-bottom:10px}
.r-btn.tiny{padding:5px 12px;font-size:11.5px;border-radius:7px}
.runstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 15px}
.rs{background:var(--card-low);border:1px solid var(--outline-soft);border-radius:10px;padding:11px}
.rs b{display:block;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.rs span{font-size:11px;color:var(--muted)}
.autoshift{padding:16px 15px}
.ash{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700}
.ash .bar{flex:1;height:9px;border-radius:999px;background:var(--primary);overflow:hidden;display:block}
.ash .bar i{display:block;height:100%;background:var(--outline);border-radius:999px}
.who.human{color:var(--muted)}
.who.ai{color:var(--primary-on-container)}
.ashnote{font-size:12px;color:var(--body);margin-top:10px}

/* results */
.casecard{background:var(--card);border:1px solid var(--outline);border-radius:16px;box-shadow:var(--shadow-card);padding:26px 28px;margin-top:30px}
.casehead{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--outline-soft)}
.casehead b{display:block;font-size:16px;color:var(--ink)}
.casehead span{font-size:12.5px;color:var(--muted)}
.casebody{display:grid;grid-template-columns:1fr 1fr;gap:26px;padding:18px 0}
.casebody h4{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.casebody p{font-size:14.5px}
.casecard blockquote{font-size:18px;font-weight:600;color:var(--ink);border-left:3px solid var(--primary);padding-left:18px;margin:6px 0 12px}
.attrib{font-size:12.5px;color:var(--muted)}
.casegrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:18px;margin-top:20px}
.minicase{background:var(--card);border:1px solid var(--outline);border-radius:14px;padding:22px;box-shadow:var(--shadow-card)}
.minicase b{font-size:15px;color:var(--ink)}
.minicase .sector{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}
.minicase blockquote{font-size:14.5px;color:var(--body);margin-bottom:14px}
.ministats{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid var(--outline-soft);padding-top:12px}
.ministats b{display:block;font-size:15px}
.ministats span{font-size:11px;color:var(--muted)}
.minicase.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;border-style:dashed;background:transparent;box-shadow:none;color:var(--muted)}
.minicase.empty p{font-size:12.5px}

/* chloe */
.chloestats{display:flex;gap:30px;flex-wrap:wrap;border-top:1px solid var(--outline-soft);padding-top:18px;margin-top:20px}
.chloestats b{display:block;font-size:19px;color:var(--ink)}
.chloestats span{font-size:12px;color:var(--muted)}

/* lifecycle */
.lifecycle{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.lc{background:var(--card);border:1px solid var(--outline);border-radius:12px;padding:14px}
.lc .n{display:inline-flex;width:22px;height:22px;border-radius:6px;background:var(--primary-container);color:var(--primary-on-container);align-items:center;justify-content:center;font-size:11px;font-weight:800;margin-bottom:9px}
.lc b{display:block;font-size:13px;color:var(--ink);margin-bottom:5px}
.lc span{font-size:11.5px;color:var(--muted)}

/* agents */
.agents{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.agent{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--outline);border-radius:12px;padding:13px 16px;box-shadow:var(--shadow-card)}
.agent img{width:38px;height:38px;border-radius:50%;flex-shrink:0}
.agent b{display:flex;align-items:center;gap:7px;font-size:14px;color:var(--ink)}
.agent span{font-size:12.5px;color:var(--muted)}
.role{margin-left:auto;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:3px 10px;flex-shrink:0}
.role.ai{background:var(--primary-container);color:var(--primary-on-container)}
.role.human{background:var(--chipbg);color:var(--body)}

/* faq */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:32px}
.fq{background:var(--card);border:1px solid var(--outline);border-radius:12px;padding:20px 22px;box-shadow:var(--shadow-card)}
.fq h3{font-size:15.5px;margin-bottom:8px}
.fq p{font-size:14px;color:var(--body)}

/* pricing extras */
.resbox{display:flex;gap:14px;align-items:flex-start;background:var(--primary-tint);border:1px solid var(--primary-card-border);border-radius:12px;padding:14px 18px;margin-top:22px;max-width:70ch}
.restag{background:var(--primary-container);color:var(--primary-on-container);border-radius:6px;padding:3px 9px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;flex-shrink:0}
.resbox p{font-size:13.5px}
.anchor{font-size:15px;color:var(--body);margin-top:18px;max-width:70ch}
.anchor b{color:var(--ink)}
.guarantees{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:20px}
.guarantees span{background:var(--card);border:1px solid var(--outline);border-radius:10px;padding:12px 16px;font-size:13px;color:var(--body)}
.ratecols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.rchead{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:9px}
.rchead span{font-weight:500;color:var(--muted)}
.rcfoot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:18px}
.rcfoot span{font-size:12.5px;color:var(--muted)}

/* final cta + footer */
.rx-cta .sparkle{position:absolute;width:22px}
.rx-cta .c1{top:16%;left:12%}
.rx-cta .c2{bottom:18%;right:14%}
.oremail{color:#8d9197;font-size:13px;margin-top:18px}
.oremail a{color:#a18aff}
footer.sitefoot.big{display:grid;grid-template-columns:2fr 1fr 1fr;gap:36px;align-items:start;padding:48px 40px 32px;max-width:1180px;margin:0 auto}
.sitefoot.big .fcol img{height:24px;margin-bottom:12px}
.sitefoot.big .fcol p{font-size:13px;color:var(--muted);max-width:44ch}
.sitefoot.big .fline{color:var(--ink);font-weight:700;margin-top:10px}
.sitefoot.big h4{font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.sitefoot.big .fcol a{display:block;font-size:13.5px;color:var(--body);text-decoration:none;margin-bottom:7px}
.sitefoot.big .fcol a:hover{color:var(--primary-deep)}
.sitefoot.big .copyright{grid-column:1/-1;border-top:1px solid var(--outline-soft);padding-top:18px;font-size:12.5px;color:var(--muted)}

@media (max-width:900px){
  .wrap{padding:56px 24px}
        .proofstats,.guarantees,.lifecycle,.faq,.agents,.ratecols,.casebody,.casegrid{grid-template-columns:1fr}
  .swap{grid-template-columns:1fr}
  .swapicon{justify-self:center;transform:rotate(90deg)}
  .jstep{grid-template-columns:1fr;gap:22px}
  footer.sitefoot.big{grid-template-columns:1fr;gap:26px;padding:36px 24px 26px}
}

/* ================= v3: design-pass animations ================= */
.sitenav{transition:box-shadow 220ms}
.nav-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--gradient);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.sitenav{position:sticky}
.sitenav .links a{background-image:linear-gradient(var(--primary-deep),var(--primary-deep));background-repeat:no-repeat;background-position:0 100%;background-size:0% 1.5px;transition:background-size 260ms,color 260ms}

@media (prefers-reduced-motion: no-preference){
  .js-anim [data-mask]{overflow:hidden}
  .js-anim [data-mask] > .maskin{display:block;transform:translateY(110%)}
  .js-anim [data-mask].in-mask > .maskin{transform:none;transition:transform 760ms cubic-bezier(.2,.7,.25,1)}
  .bp-row,.bp-done{transition:opacity 420ms ease,transform 420ms cubic-bezier(.2,.7,.3,1)}
  .js-anim .blueprint.arm .bp-row,.js-anim .blueprint.arm .bp-done{opacity:0;transform:translateY(8px)}
  .js-anim .blueprint.arm .bp-row.lit,.js-anim .blueprint.arm .bp-done.lit{opacity:1;transform:none}
  .ash .bar i{transition:width 1100ms cubic-bezier(.3,.7,.3,1)}
  .js-anim .blueprint.arm .ash .bar i{width:100%}
    .heroinbox .af-row.swapout{opacity:0;transform:translateY(-8px)}
  .rx-cta{--gx:50%;--gy:50%}
  .rx-cta::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(320px 220px at var(--gx) var(--gy),rgba(161,138,255,.16),transparent 70%);opacity:0;transition:opacity 400ms}
  .rx-cta:hover::after{opacity:1}
  .rx-cta .r-btn{position:relative;z-index:1;transition:transform 180ms cubic-bezier(.2,.7,.3,1),box-shadow 180ms}
  .db-tier{transition:transform 260ms cubic-bezier(.2,.7,.3,1),box-shadow 260ms}
  .db-tier:hover{transform:translateY(-4px);box-shadow:0 18px 34px -18px rgba(26,29,38,.3)}
}

/* ================= v4: buildout timeline ================= */
.tl{background:var(--card);border:1px solid var(--outline);border-radius:16px;box-shadow:var(--shadow-card);padding:24px 26px 26px;margin:30px 0 8px;display:flex;flex-direction:column;gap:16px}
.tl-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--ink)}
.tl-days{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.tl-days span{border-radius:8px;padding:10px 0;text-align:center;font-size:12px;font-weight:700;background:var(--primary-container);color:var(--primary-on-container);font-variant-numeric:tabular-nums}
.tl-days span.w2{background:var(--primary);color:#fff}
.tl-days span.last{background:var(--ink);color:#fff}
.tl-groups{display:grid;grid-template-columns:repeat(10,1fr);gap:6px}
.tl-g{border-top:2px solid var(--primary-card-border);padding-top:10px;padding-right:8px}
.tl-g.w2{border-top-color:var(--primary)}
.tl-g.last{border-top-color:var(--ink)}
.tl-g b{display:block;font-size:13px;color:var(--ink);margin-bottom:3px}
.tl-g span{font-size:12.5px;color:var(--muted)}
.g1{grid-column:span 1}.g2{grid-column:span 2}.g3{grid-column:span 3}.g4{grid-column:span 4}
.tl-who{display:flex;gap:10px;align-items:center;border-top:1px solid var(--outline-soft);padding-top:14px;font-size:13px;color:var(--body)}
.tl-who img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0}
.tl-who b{color:var(--ink)}
@media (max-width:900px){
  .tl{padding:18px}
  .tl-days span{font-size:10.5px;padding:8px 0}
  .tl-groups{grid-template-columns:1fr;gap:12px}
  .tl-g{grid-column:auto}
}

/* ================= v5: why it hasn't worked ================= */
.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:26px}
.tool{background:var(--card);border:1px solid var(--outline);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-card)}
.tool .lab{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tool h3{font-size:18px;margin-bottom:8px}
.tool p{font-size:14.5px;color:var(--body)}
@media (max-width:900px){.tools{grid-template-columns:1fr}}

/* ================= v6: woven hero ================= */
.hero-text{max-width:860px;margin:0 auto;padding:72px 40px 36px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.hero-text .heroline{font-size:clamp(44px,5.4vw,68px);margin:4px 0 0}
.hero-text .sub{max-width:62ch;margin:0}
.hero-text .ctarow{justify-content:center;margin-top:6px}
.hero-text .herometa{margin-top:0}
.wv-stage{position:relative;max-width:1180px;margin:0 auto;height:660px;padding:0 40px}
.wv-frame{position:absolute;left:40px;right:40px;top:80px;height:470px;background:var(--card);border:1px solid var(--outline);border-radius:18px;box-shadow:0 30px 60px -28px rgba(26,29,38,.3);overflow:hidden;font-size:13px}
.wv-body{display:grid;grid-template-columns:180px 1fr;height:100%}
.wv-rail{background:var(--card-low);border-right:1px solid var(--outline-soft);padding:12px 10px;font-size:12px;color:var(--body)}
.wv-rail p{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:8px}
.wv-rail p.on{background:var(--primary-container);color:var(--primary-on-container);font-weight:700}
.wv-rail p.rl-h{padding:12px 10px 4px;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wv-rail img{width:13px;height:13px;object-fit:contain}
.wv-rows .af-row{padding:11px 14px}
.wv-photo{position:absolute;left:50%;top:0;transform:translateX(-50%);width:380px;z-index:2}
.wv-photo img{width:100%;height:620px;object-fit:cover;object-position:50% 15%;border-radius:20px;border:6px solid var(--card);box-shadow:0 34px 70px -28px rgba(26,29,38,.55)}
.wv-cp{position:absolute;left:50%;margin-left:112px;top:118px;width:324px;z-index:3;background:var(--card);border:1px solid var(--primary-card-border);border-radius:14px;box-shadow:0 22px 44px -20px rgba(26,29,38,.4);padding:13px 15px;font-size:12.5px;color:var(--body);line-height:1.5}
.wv-cp .cp-label{margin-bottom:7px}
.wv-cites{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
.wv-cites .tagchip{background:var(--primary-container);color:var(--primary-on-container)}
.wv-cites .tagchip.chan{background:var(--success-container);color:#2f7d54}
.wv-toast{position:absolute;left:50%;margin-left:-430px;top:440px;z-index:3;background:var(--ink);color:#fff;border-radius:12px;padding:10px 14px;font-size:12.5px;box-shadow:0 18px 36px -16px rgba(26,29,38,.5);display:flex;align-items:center;gap:8px}
.wv-toast .livedot{background:#4fc18f}
.wv-kpi{position:absolute;left:50%;margin-left:-410px;top:520px;z-index:3;width:240px;background:var(--card);border:1px solid var(--outline);border-radius:12px;box-shadow:0 18px 36px -16px rgba(26,29,38,.35);padding:11px 13px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wv-kpi b{display:block;font-size:18px;color:var(--ink);font-variant-numeric:tabular-nums}
.wv-kpi span{font-size:10px;color:var(--muted)}
.wv-chip{position:absolute;left:50%;margin-left:150px;top:560px;z-index:3;background:var(--card);border:1px solid var(--outline);border-radius:10px;box-shadow:0 10px 26px -16px rgba(26,29,38,.3);padding:9px 13px;font-size:12px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.wv-stage .sparkle{position:absolute;left:50%;margin-left:200px;top:-6px;z-index:4}
@media (max-width:900px){
  .hero-text{padding:48px 24px 24px}
  .wv-stage{height:auto;padding:0 24px 40px;display:flex;flex-direction:column;align-items:center;gap:16px}
  .wv-frame,.wv-toast,.wv-kpi,.wv-chip,.wv-stage .sparkle{display:none}
  .wv-photo{position:static;transform:none;width:min(360px,100%)}
  .wv-photo img{height:auto;aspect-ratio:3/4}
  .wv-cp{position:static;margin:0;width:min(360px,100%)}
}

/* ---------- v7: line drawn sky behind the hero ---------- */
.rx-hero{position:relative;overflow:hidden}
.hero-text,.wv-stage{position:relative;z-index:1}
.sky{position:absolute;inset:0;z-index:0;pointer-events:none;--ink:#b3a4ff;--paper:#f5f2ff;--plane:#9d8bff;--pfill:#f5f2ff;--trail:#cbc0ff;--gull:#b3a4ff;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 22%,transparent 34%,transparent 66%,#000 78%,#000 100%);
  mask-image:linear-gradient(90deg,#000 0,#000 22%,transparent 34%,transparent 66%,#000 78%,#000 100%)}
.sky .el{position:absolute;overflow:visible}
.sky path,.sky use{fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.sky use.paper{fill:var(--paper);fill-opacity:.92}
.sky .plane path{stroke:var(--plane)}
.sky .plane path.drawn{fill:var(--pfill)}
.sky .plane .win{fill:none}
.sky .flock path{stroke:var(--gull)}
#trailFade stop{stop-color:var(--trail)}
.sky use.ink2{stroke-width:1;opacity:.34;transform:translate(1.6px,1.3px)}
.sky .hint{opacity:.55;stroke-width:1.3}
.sky .far{opacity:.5}.sky .mid{opacity:.75}
.sky .trail{stroke:url(#trailFade);stroke-width:1.4}
.sky .win{stroke-dasharray:2 3.6;stroke-width:1.5;opacity:.85}
.sky .wing{transform-box:view-box;transform-origin:12px 7px}
.sky .drawn{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600)}
@media (prefers-reduced-motion: no-preference){
  .sky .drawn{animation:draw 2.4s cubic-bezier(.4,0,.2,1) forwards;animation-delay:var(--d,0s)}
  @keyframes draw{to{stroke-dashoffset:0}}
  .sky .drift{animation:drift var(--dur,150s) linear infinite;animation-delay:var(--delay,0s)}
  @keyframes drift{from{transform:translateX(-22vw)}to{transform:translateX(122vw)}}
  .sky .bob{animation:bob var(--bob,11s) ease-in-out infinite;animation-delay:var(--bd,0s)}
  @keyframes bob{0%,100%{translate:0 0}50%{translate:0 -7px}}
  .sky .flock{animation:flock 78s linear infinite;animation-delay:-26s}
  @keyframes flock{from{transform:translate(-14vw,14px)}to{transform:translate(116vw,-14px)}}
  .sky .wing.l{animation:flapL .95s ease-in-out infinite alternate}
  .sky .wing.r{animation:flapR .95s ease-in-out infinite alternate}
  @keyframes flapL{from{transform:rotate(-16deg)}to{transform:rotate(14deg)}}
  @keyframes flapR{from{transform:rotate(16deg)}to{transform:rotate(-14deg)}}
  .sky .plane{offset-path:path('M -180 300 L 1620 160');offset-rotate:auto;animation:fly 40s linear infinite;animation-delay:1.6s;animation-fill-mode:backwards}
  @keyframes fly{0%{offset-distance:0%;opacity:0}3%{opacity:1}42%{opacity:1}45%{offset-distance:100%;opacity:0}100%{offset-distance:100%;opacity:0}}
}

@media (prefers-reduced-motion: reduce){
  .sky .drawn{stroke-dashoffset:0}
  .sky .trail{display:none}
}
@media (max-width:900px){ .sky{display:none} }

/* ---------- v8: founder quote under the hero graphic ---------- */
.founderq{position:relative;z-index:1;max-width:780px;margin:28px auto 0;padding:0 40px 76px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;border:0;background:none}
.founderq-mark{width:22px;height:22px;fill:var(--primary)}
.founderq blockquote{margin:0;font-size:clamp(19px,1.9vw,24px);line-height:1.5;font-weight:600;letter-spacing:-.012em;color:var(--ink);text-wrap:balance}
.founderq figcaption{display:flex;align-items:center;gap:12px;margin-top:4px}
.founderq figcaption img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid var(--card);box-shadow:0 4px 12px -4px rgba(26,29,38,.35)}
.founderq figcaption span{display:flex;flex-direction:column;text-align:left;line-height:1.25}
.founderq figcaption b{font-size:14px;color:var(--ink)}
.founderq figcaption small{font-size:12.5px;color:var(--muted)}
@media (max-width:900px){ .founderq{padding:0 22px 56px;margin-top:8px} }

/* ---------- v9: five-step flow (replaces the journey) ---------- */
.flow{background:var(--card);border-top:1px solid var(--outline-soft)}
.flow .rx-h2 em{font-style:normal;color:var(--primary)}
.path{position:relative;margin-top:40px}
.path::before{content:"";position:absolute;left:17px;top:34px;bottom:34px;width:2px;background:linear-gradient(var(--primary-card-border),#c4b7ff,var(--primary-card-border))}
.step{display:grid;grid-template-columns:34px 1fr 360px;gap:0 28px;align-items:center;padding:28px 0}
.step+.step{border-top:1px solid var(--outline-soft)}
.num{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-size:13.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;position:relative;z-index:1}
.step h3{font-size:22px;font-weight:800;letter-spacing:-.015em;color:var(--ink);margin:0 0 8px;line-height:1.15}
.step h3 small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.step-text p{font-size:15.5px;line-height:1.6;color:var(--body);margin:0;max-width:56ch}
.step-text p + p{margin-top:12px}
.step-text p b{color:var(--ink);font-weight:700}
.flow .step-text p b{color:#e9ecf2}
.step-sub{margin:18px 0 8px;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.flow .step-sub{color:#e9ecf2}
.step-meta{margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.flow .step-meta{color:#8f94a3}
/* the two closing sections: same grid as a step, but deliberately not numbered */
.coda{border-top:1px solid var(--outline-soft)}
.flow .coda{border-top-color:rgba(255,255,255,.09)}
.coda > .num{background:none;box-shadow:none;color:transparent}
.coda > .num::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--primary-card-border)}
.flow .coda > .num::after{background:rgba(196,183,255,.5)}
.coda h3 .soonbadge{vertical-align:middle;margin-left:8px}
.pop-chip{display:inline-block;margin-left:7px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;font-style:normal;letter-spacing:.02em;vertical-align:middle;background:var(--primary-container);color:var(--primary-on-container);border:1px solid var(--primary-card-border)}
.flow .pop-chip{background:rgba(124,101,255,.18);color:#c4b7ff;border-color:rgba(124,101,255,.38)}
.mini{background:var(--card);border:1px solid var(--outline);border-radius:14px;box-shadow:0 1px 2px rgba(26,29,38,.04),0 18px 40px -24px rgba(26,29,38,.3);padding:14px 16px;font-size:12.5px;color:var(--body)}
.mini-t{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:9px;display:flex;align-items:center;gap:6px}
.mini-t.v{color:var(--primary-on-container)}
.mini b{color:var(--ink);font-weight:700}
.mini-row{display:flex;align-items:center;gap:10px}
.mini-row div,.mini-opt div{display:flex;flex-direction:column;line-height:1.3}
.mini-row span,.mini-opt div span{color:var(--muted);font-size:12px}
.mini-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.mini .chip{display:inline-flex;align-items:center;gap:5px;background:var(--primary-container);color:var(--primary-on-container);border-radius:999px;padding:2px 9px;font-size:11px;font-weight:600}
.mini .chip.g{background:#e6f5ec;color:#3a7d54}
.mini .av{width:28px;height:28px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid var(--card);box-shadow:0 2px 6px rgba(26,29,38,.2);flex:none}
.mini .av.ini{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--primary-container);color:var(--primary-on-container)}
.mini .avs{display:flex}.mini .avs .av+.av{margin-left:-8px;background:#e3f6f4;color:#1f8a7a}
.mini-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mini-list li{display:flex;gap:8px;align-items:center}
.mini-list li::before{content:"";width:14px;height:14px;border-radius:50%;background:#e6f5ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233a7d54' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/9px no-repeat;flex:none}
.mini-p{margin:0 0 10px;font-size:13px;line-height:1.5;color:var(--body);white-space:pre-line}
.mini-inbox{padding:0;overflow:hidden}
.mini-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--outline-soft);background:#fafbfc}
.mini-bar>span:not(.chip){width:8px;height:8px;border-radius:50%;background:var(--outline)}
.mini-bar b{margin-left:6px;font-size:11px;font-weight:600;color:var(--muted)}
.mini-bar .chip{margin-left:auto}
.mini-rows{padding:10px 12px;display:grid;gap:8px}
.mini-rows>div{display:flex;align-items:center;gap:8px}
.mini-rows img{width:14px;height:14px;object-fit:contain}
.mini-rows .chip{margin-left:auto}
.mini-opts{display:grid;gap:8px}
.mini-opt{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--outline-soft);border-radius:10px}
@media (max-width:900px){
  .path::before{display:none}
  .step{grid-template-columns:34px 1fr;gap:14px 14px;padding:24px 0}
  .step .mini{grid-column:2}
  .step h3{font-size:19px}
}

/* ---------- v10: the flow on the ink, glass cards ---------- */
.flow{background:var(--ink);border-top:0}
.flow .eyebrow{background:rgba(255,255,255,.08);color:#c4b7ff}
.flow .rx-h2{color:#eef0f5}
.flow .secsub{color:#a3a8b6}
.flow .step+.step{border-top-color:rgba(255,255,255,.09)}
.flow .path::before{background:linear-gradient(rgba(196,183,255,.12),#8f7bff,rgba(196,183,255,.12))}
.flow .num{background:#8f7bff;color:#fff;box-shadow:0 0 0 5px rgba(143,123,255,.16)}
.flow .step h3{color:#e6e8ee}
.flow .step h3 small{color:#8f94a3}
.flow .step-text p{color:#aeb3c0}
.flow .mini{background:radial-gradient(120% 70% at 50% 0%,rgba(143,123,255,.16),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 26px 50px -28px rgba(0,0,0,.75);color:#c3c7d1;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.flow .mini b{color:#e6e8ee}
.flow .mini-t{color:#8f94a3}
.flow .mini-t.v{color:#c4b7ff}
.flow .mini-row span,.flow .mini-opt div span{color:#8f94a3}
.flow .mini .chip{background:rgba(143,123,255,.2);color:#cfc5ff}
.flow .mini .chip.g{background:rgba(79,193,143,.16);color:#7fdcae}
.flow .mini .av{border-color:#2b2f3b;box-shadow:0 2px 8px rgba(0,0,0,.5)}
.flow .mini .av.ini{background:rgba(143,123,255,.22);color:#cfc5ff}
.flow .mini .avs .av+.av{background:rgba(79,193,143,.2);color:#7fdcae}
.flow .mini-list{color:#d0d4dd}
.flow .mini-list li::before{background:rgba(79,193,143,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237fdcae' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/9px no-repeat}
.flow .mini-p{color:#d0d4dd}
.flow .mini-bar{background:rgba(255,255,255,.035);border-bottom-color:rgba(255,255,255,.08)}
.flow .mini-bar>span:not(.chip){background:rgba(255,255,255,.16)}
.flow .mini-bar b{color:#8f94a3}
.flow .mini-rows{color:#d0d4dd}
.flow .mini-rows img{filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
.flow .mini-opt{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.025)}
.flow .livedot{box-shadow:0 0 0 3px rgba(79,193,143,.18)}

/* ---------- v11: living hero demo (scenes) ---------- */
.wv-cp{min-height:236px;transition:opacity 260ms ease,transform 260ms ease}
.wv-cp.fade{opacity:0;transform:translateY(4px)}
.cp-label{display:block}
.cp-state{display:block;font-size:11px;font-weight:600;color:var(--muted);margin:-3px 0 7px;text-transform:none;letter-spacing:0}
.cp-state:empty{display:none}
.cp-state.working::after{content:"";display:inline-block;width:14px;margin-left:2px;text-align:left;animation:cpDots 1.1s steps(4,end) infinite}
@keyframes cpDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.cp-ctx{background:var(--card-low);border:1px solid var(--outline-soft);border-radius:10px;padding:8px 10px;margin:4px 0 9px;font-size:11.5px;color:var(--body);line-height:1.45}
.cp-ctx:empty{display:none}
.ctx-h{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.ctx-h img{width:13px;height:13px;object-fit:contain}
.ctx-h b{color:var(--ink);font-weight:700}
.ctx-h i{margin-left:auto;font-style:normal;font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.ctx-l{color:var(--body)}
.ctx-step{display:flex;align-items:center;gap:7px;padding:2px 0;color:var(--muted);transition:color 200ms}
.ctx-step::before{content:"";width:12px;height:12px;border-radius:50%;border:1.5px solid var(--outline);flex:none;transition:all 200ms}
.ctx-step.on{color:var(--ink)}
.ctx-step.on::before{border-color:transparent;background:#e6f5ec url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233a7d54' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/8px no-repeat}
.cp-text{margin:0;min-height:38px;white-space:pre-line}
.cp-cursor{display:none;width:2px;height:13px;background:var(--primary);vertical-align:-2px;margin-left:1px;border-radius:1px}
.wv-cp.streaming .cp-cursor{display:inline-block;animation:cpBlink .9s steps(2,end) infinite}
@keyframes cpBlink{50%{opacity:0}}
.cp-cites{transition:opacity 300ms}
.cp-cites.hide{opacity:0}
.cp-foot{display:flex;align-items:center;gap:10px;margin-top:10px;min-height:26px;font-size:11.5px;color:var(--muted);font-weight:600}
.cp-btn{display:inline-flex;align-items:center;background:linear-gradient(135deg,#6d5ef0 0%,#8f7bff 55%,#a18aff 100%);color:#fff;border-radius:8px;padding:5px 12px;font-size:11.5px;font-weight:700;box-shadow:0 4px 10px -5px rgba(90,50,224,.6);transition:transform 160ms,opacity 200ms}
.cp-btn.pressed{transform:scale(.96);opacity:.75}
.cp-btn.gone{display:none}
.cp-after{display:inline-flex;align-items:center;gap:6px}
.cp-after:not(:empty)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success)}
.wv-cp[data-kind="auto"] .cp-kind,.wv-cp[data-kind="agent"] .cp-kind{color:var(--primary-on-container)}
.wv-cap{position:absolute;left:6px;right:6px;bottom:6px;padding:40px 118px 14px 16px;border-radius:0 0 14px 14px;background:linear-gradient(180deg,rgba(26,29,38,0),rgba(26,29,38,.82));color:#fff;display:flex;flex-direction:column;gap:2px}
.wv-cap b{font-size:13px;font-weight:700}
.wv-cap span{font-size:11.5px;color:#d3d6dd;line-height:1.35}
.wv-rows .af-row{transition:background 300ms}
.wv-rows .af-row.active{background:#f6f4ff}
.statuspill.working{background:var(--primary-container);color:var(--primary-on-container)}
.statuspill.pop{animation:pillPop 500ms cubic-bezier(.2,.7,.3,1)}
@keyframes pillPop{0%{transform:scale(.85)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.wv-toast.pop{animation:toastPop 420ms cubic-bezier(.2,.7,.3,1)}
@keyframes toastPop{0%{transform:scale(.94);opacity:.4}100%{transform:scale(1);opacity:1}}
#wvResolved.tick{animation:kpiTick 500ms ease}
@keyframes kpiTick{0%{color:var(--primary)}100%{color:var(--ink)}}
@media (prefers-reduced-motion: reduce){.cp-state.working::after,.wv-cp.streaming .cp-cursor{animation:none}}
.statuspill.working::before{background:var(--primary)}

/* ---------- v12: customer header + product lines in the hero demo ---------- */
.cp-cust{display:flex;align-items:center;gap:9px;padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid var(--outline-soft)}
.cu-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;overflow:hidden}
.cu-av img{width:100%;height:100%;object-fit:cover}
.cu-main{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.cu-main b{font-size:12.5px;color:var(--ink);font-weight:700;white-space:nowrap}
.cu-main span{font-size:11px;color:var(--muted);white-space:nowrap}
.cu-facts{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px;font-size:10.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cu-facts em{font-style:normal;background:var(--primary-container);color:var(--primary-on-container);border-radius:999px;padding:1px 7px;font-size:10px;font-weight:700}
.cu-facts em.new{background:var(--success-container);color:#2f7d54}
.cu-facts em.warn{background:#fbf0db;color:#8a6520}
.ctx-prod{display:flex;align-items:center;gap:8px;padding:6px 0 5px}
.ctx-prod img{width:36px;height:36px;border-radius:8px;object-fit:cover;background:#fff;border:1px solid var(--outline-soft);flex:none}
.ctx-prod div{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ctx-prod div b{font-size:11.5px;color:var(--ink)}
.ctx-prod div span{font-size:10.5px;color:var(--muted)}
.ctx-prod i{margin-left:auto;font-style:normal;font-size:10px;font-weight:700;border-radius:999px;padding:2px 7px;background:var(--success-container);color:#2f7d54;white-space:nowrap}
.ctx-prod i.warn{background:#fbf0db;color:#8a6520}
.ctx-prod i.info{background:var(--primary-container);color:var(--primary-on-container)}
.ctx-l.arrow{color:var(--ink);font-weight:600}

/* ---------- v13: the Chloe chip names what she did in each scene ---------- */
.wv-chip{max-width:330px;padding:8px 14px 8px 8px;gap:9px}
.wv-chip img{width:26px;height:26px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid var(--card);box-shadow:0 2px 6px rgba(26,29,38,.25);flex:none}
.wv-chip .chip-t{line-height:1.3}
.wv-chip.pop{animation:toastPop 420ms cubic-bezier(.2,.7,.3,1)}

/* ---------- v14: reading focus + night sky on the flow ---------- */
.flow{position:relative;overflow:hidden}
.flow .wrap{position:relative;z-index:1}
.nightsky{position:absolute;inset:0;z-index:0;pointer-events:none}
.nightsky i{position:absolute;width:var(--s,1px);height:var(--s,1px);border-radius:50%;background:#fff;opacity:.28}
.nightsky .ncloud{position:absolute;overflow:visible;opacity:.9}
.nightsky .ncloud use{fill:rgba(255,255,255,.022);stroke:rgba(255,255,255,.095);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.nightsky .shoot{position:absolute;width:150px;height:1.5px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(214,208,255,.9));transform:rotate(-28deg);transform-origin:right center;opacity:0}
.nightsky .shoot::after{content:"";position:absolute;right:-2px;top:-1.5px;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px 2px rgba(214,208,255,.8)}
.path::after{content:"";position:absolute;left:17px;top:34px;width:2px;height:var(--fill,0px);background:#a18aff;box-shadow:0 0 14px rgba(143,123,255,.7);transition:height 600ms cubic-bezier(.2,.7,.3,1);z-index:0}
.flow .step{transition:opacity 450ms ease}
.flow .step-text,.flow .mini{transition:opacity 380ms ease}
.flow .path.has-focus .step:not(.focus) .step-text,.flow .path.has-focus .step:not(.focus) .mini{opacity:.62}
.flow .num{transition:transform 380ms cubic-bezier(.2,.7,.3,1),box-shadow 380ms ease}
.flow .step.focus .num{transform:scale(1.18);box-shadow:0 0 0 7px rgba(143,123,255,.22),0 0 34px rgba(143,123,255,.6)}
.flow .mini{transition:transform 480ms cubic-bezier(.2,.7,.3,1),box-shadow 480ms ease,border-color 480ms ease}
.flow .step.focus .mini{transform:translateY(-5px) scale(1.03);border-color:rgba(196,183,255,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 34px 64px -28px rgba(0,0,0,.85),0 0 0 1px rgba(143,123,255,.16),0 0 60px -20px rgba(143,123,255,.35)}
.flow .step.focus h3{color:#fff}
.flow .step.focus .step-text p{color:#cdd1db}
@media (prefers-reduced-motion: no-preference){
  .nightsky i{animation:twinkle var(--p,5s) ease-in-out infinite;animation-delay:var(--d,0s)}
  @keyframes twinkle{0%,100%{opacity:.16}50%{opacity:.62}}
  .nightsky .ncloud{animation:drift var(--dur,260s) linear infinite;animation-delay:var(--delay,0s)}
  .nightsky .shoot{animation:shoot var(--dur,16s) linear infinite;animation-delay:var(--delay,0s)}
  @keyframes shoot{0%{transform:translate(0,0) rotate(-28deg);opacity:0}2%{opacity:1}7%{transform:translate(-460px,245px) rotate(-28deg);opacity:0}100%{transform:translate(-460px,245px) rotate(-28deg);opacity:0}}
}
@media (max-width:900px){ .path::after{display:none} .flow .path.has-focus .step:not(.focus){opacity:.75} }

/* ---------- v15: the software, a guided tour ---------- */
.plat{background:var(--surface);border-top:1px solid var(--outline-soft)}
.plat-grid{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:56px;margin-top:44px;align-items:start}
.chapters{display:flex;flex-direction:column}
.chap{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:24px 0;border-top:1px solid var(--outline-soft);transition:opacity 400ms}
.chap:first-child{border-top:0}
.chapters.has-focus .chap:not(.focus){opacity:.45}
.ch-n{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--primary-on-container);font-variant-numeric:tabular-nums}
.chap h3{font-size:24px;font-weight:800;letter-spacing:-.018em;color:var(--ink);line-height:1.15;margin:0}
.chap p{font-size:15.5px;line-height:1.6;color:var(--body);margin:0}
.chap p+p{margin-top:12px}
.ch-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.ch-chips span{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--outline);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--body)}
.ch-chips img{width:13px;height:13px;object-fit:contain}
.plat-stick{position:sticky;top:92px}
.pf{background:var(--card);border:1px solid var(--outline);border-radius:16px;box-shadow:0 30px 60px -28px rgba(26,29,38,.35),0 1px 2px rgba(26,29,38,.05);overflow:hidden;font-size:12.5px;color:var(--body)}
.pf-body{display:grid;grid-template-columns:128px 216px 1fr;min-height:440px;transition:grid-template-columns 300ms}
.pf[data-state="automations"] .pf-body,.pf[data-state="agents"] .pf-body,.pf[data-state="kb"] .pf-body,.pf[data-state="reports"] .pf-body{grid-template-columns:128px 1fr}
.pf [data-for]:not(.on){display:none!important}
.pf-nav{background:var(--card-low);border-right:1px solid var(--outline-soft);padding:10px 8px;display:flex;flex-direction:column;gap:2px}
.pn{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;font-size:12px;font-weight:600;color:var(--body);transition:background 200ms,color 200ms}
.pn svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pn img{width:14px;height:14px;object-fit:contain;flex:none}
.pn.on{background:var(--primary-container);color:var(--primary-on-container)}
.pf-list{border-right:1px solid var(--outline-soft);overflow:hidden}
.pf-filters{display:flex;gap:4px;padding:8px 8px 6px;border-bottom:1px solid var(--outline-soft)}
.pf-filters span{font-size:10.5px;font-weight:600;color:var(--muted);padding:3px 7px;border-radius:999px;white-space:nowrap}
.pf-filters span.on{background:var(--primary-container);color:var(--primary-on-container)}
.pf-list .af-row{padding:7px 10px;gap:6px;display:grid;grid-template-columns:28px 1fr;grid-template-areas:"av main" "meta meta"}
.pf-list .af-avatar{width:28px;height:28px;font-size:10.5px;grid-area:av}
.pf-list .af-main{grid-area:main}
.pf-list .af-who{font-size:12px}.pf-list .af-subj{font-size:11.5px}
.pf-list .af-meta{grid-area:meta;justify-content:flex-start;gap:5px;margin-top:2px}
.pf-list .af-meta .tagchip{font-size:10px;padding:1px 7px}
.pf-list .statuspill{font-size:10px;padding:1px 7px}
.pf-list .af-row.sel{background:#f6f4ff}
.pf-list .chbadge{width:14px;height:14px}
.pf-main{padding:12px 14px;min-width:0}
.pv{display:flex;flex-direction:column;gap:10px;animation:pvIn 380ms cubic-bezier(.2,.7,.3,1)}
@keyframes pvIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pv-k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pv-h{display:flex;align-items:center;justify-content:space-between}
.pv-h b{font-size:14px;color:var(--ink)}
.pill-on{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#2f7d54}
.pill-on i{width:26px;height:15px;border-radius:999px;background:var(--success);position:relative}
.pill-on i::after{content:"";position:absolute;right:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff}
.pf .cp-cust{margin-bottom:0}
.cv-thread{display:flex;flex-direction:column;gap:8px}
.msg{border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.5}
.msg.in{background:var(--card-low);border:1px solid var(--outline-soft);align-self:flex-start;max-width:92%}
.msg.out{background:var(--primary-tint);border:1px solid var(--primary-card-border);align-self:flex-end;max-width:92%}
.msg.note{background:#fbf6e6;border:1px solid #f1e3b8;color:#6b5320}
.msg p{margin:0;color:inherit}
.m-who{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink);margin-bottom:3px}
.m-who i{font-style:normal;font-weight:500;color:var(--muted)}
.m-who img{width:16px;height:16px;border-radius:50%;object-fit:cover}
.msg .act{display:inline-flex;align-items:center;gap:5px;margin-top:6px;background:var(--success-container);color:#2f7d54;border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:600}
.msg .act img{width:11px;height:11px}
.cv-ctx{display:flex;align-items:center;gap:8px;border:1px solid var(--outline-soft);border-radius:10px;padding:7px 9px;background:var(--card-low)}
.cv-ctx img{width:32px;height:32px;border-radius:7px;object-fit:cover;border:1px solid var(--outline-soft);background:#fff}
.cv-ctx div{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.cv-ctx b{font-size:11.5px;color:var(--ink)}.cv-ctx span{font-size:10.5px;color:var(--muted)}
.cv-ctx .tagchip{margin-left:auto;font-size:10px;padding:1px 7px;background:var(--success-container);color:#2f7d54}
.cv-ctx .tagchip img{width:11px;height:11px;border:0;border-radius:0}
.cc-plain{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--outline);border-radius:10px;padding:9px 11px;color:var(--faint);font-size:12px;margin-top:auto}
.cc-plain .cc-tools{font-size:10.5px;font-weight:700;color:var(--primary-on-container);background:var(--primary-container);border-radius:999px;padding:2px 8px}
.cc-cop{border:1px solid var(--primary-card-border);border-radius:12px;padding:10px 12px;background:var(--card);box-shadow:0 12px 30px -18px rgba(90,50,224,.35);margin-top:auto}
.cc-cop .cp-label{margin-bottom:6px}
.cc-cop .cp-text{font-size:12px;line-height:1.5;color:var(--body);min-height:36px}
.cc-cop.streaming .cp-cursor{display:inline-block;animation:cpBlink .9s steps(2,end) infinite}
.cc-cop .wv-cites{margin-top:8px;transition:opacity 300ms}
.cc-cop .wv-cites.hide{opacity:0}
.cp-ghost{font-size:11.5px;font-weight:700;color:var(--muted);padding:5px 4px}
.rule{display:flex;flex-direction:column;gap:4px;border:1px solid var(--outline-soft);border-radius:10px;padding:8px 10px;background:var(--card-low)}
.rule-k{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-on-container)}
.rule .ctx-step{font-size:12px;color:var(--ink)}
.rule-log{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:#2f7d54;background:var(--success-container);border-radius:10px;padding:8px 10px;opacity:0;transition:opacity 300ms}
.rule-log.show{opacity:1}
.rule-list{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--body);margin-top:auto}
.rule-list span{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
.rule-list b{font-weight:600;color:var(--body);padding:5px 9px;border:1px solid var(--outline-soft);border-radius:8px}
.ag-wrap{display:grid;grid-template-columns:1fr 172px;gap:14px}
.ag-chat{display:flex;flex-direction:column;gap:8px}
.ag-chat .ag{transition:opacity 350ms,transform 350ms}
.ag-chat.arm .ag{opacity:0;transform:translateY(6px)}
.ag-chat.arm .ag.show{opacity:1;transform:none}
.ag-done{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:700;color:#2f7d54;padding:4px 0 0}
.ag-roster{display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--outline-soft);padding-left:14px}
.ag-roster .ag{display:flex;flex-direction:row;align-items:center;gap:8px}
.ag-roster img{width:30px;height:30px;border-radius:50%;object-fit:cover}
.ag-roster .ag > div{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.ag-roster b{font-size:12px;color:var(--ink)}.ag-roster div span{font-size:10.5px;color:var(--muted)}
.ag-roster .livedot{margin-left:auto}
.ag-note{font-size:11px;color:var(--muted);margin:4px 0 0;line-height:1.4}
.kb-wrap{display:grid;grid-template-columns:190px 1fr;gap:14px;min-height:400px}
.kb-list{display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--outline-soft);padding-right:12px}
.kb-a{display:flex;flex-direction:column;padding:7px 9px;border-radius:8px;line-height:1.3}
.kb-a b{font-size:12px;color:var(--ink);font-weight:600}.kb-a span{font-size:10.5px;color:var(--muted)}
.kb-a.on{background:var(--primary-container)}.kb-a.on b{color:var(--primary-on-container)}
.kb-art{display:flex;flex-direction:column;gap:8px}
.kb-art > b{font-size:15px;color:var(--ink)}
.kb-meta{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.kb-meta img{width:18px;height:18px;border-radius:50%;object-fit:cover;object-position:50% 15%}
.kb-art p{margin:0;font-size:12.5px;line-height:1.55;color:var(--body)}
.sh-order{display:flex;align-items:center;gap:9px;border:1px solid var(--outline-soft);border-radius:10px;padding:7px 9px;background:var(--card-low)}
.sh-order img{width:36px;height:36px;border-radius:8px;object-fit:cover;background:#fff;border:1px solid var(--outline-soft)}
.sh-order div{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.sh-order b{font-size:12px;color:var(--ink)}.sh-order span{font-size:10.5px;color:var(--muted)}
.sh-order .st{margin-left:auto;font-style:normal;font-size:10px;font-weight:700;border-radius:999px;padding:2px 7px;background:var(--card);border:1px solid var(--outline);color:var(--muted);white-space:nowrap}
.sh-order .st.ship{background:var(--success-container);color:#2f7d54;border-color:transparent}
.sh-actions{display:flex;gap:6px;flex-wrap:wrap}
.sh-actions span{font-size:11.5px;font-weight:700;color:var(--ink);border:1px solid var(--outline);border-radius:8px;padding:5px 10px;background:var(--card)}
.sh-actions span:first-child{background:var(--primary);color:#fff;border-color:var(--primary)}
.sh-note{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);margin:auto 0 0}
.sh-note img{width:12px;height:12px}
.pf .rp-kpis{padding:0;gap:8px}
.pf .rp-chart{padding:4px 0 0}
.rp-topics{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.rp-topics span{font-size:11px;color:var(--muted);border:1px solid var(--outline-soft);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:2px}
.rp-topics b{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums}
.pf-cap{display:flex;align-items:center;gap:8px;margin:14px 4px 0;font-size:13px;color:var(--muted)}
.pf-cap b{color:var(--ink)}
@media (max-width:1100px){ .plat-grid{grid-template-columns:minmax(260px,320px) 1fr;gap:32px} .pf-body{grid-template-columns:44px 190px 1fr} .pf[data-state="automations"] .pf-body,.pf[data-state="agents"] .pf-body,.pf[data-state="kb"] .pf-body,.pf[data-state="reports"] .pf-body{grid-template-columns:44px 1fr} .pn span{display:none} .pn{justify-content:center;padding:8px 0} }
@media (max-width:900px){
  .plat-grid{grid-template-columns:1fr;gap:20px}
  .plat-stick{position:sticky;top:64px;z-index:2;order:-1}
  .pf-body{grid-template-columns:44px 1fr!important;min-height:0}
  .pf-list{display:none!important}
  .pf-main{padding:10px 12px}
  .chap{min-height:0;padding:22px 0}
  .chapters.has-focus .chap:not(.focus){opacity:.7}
  .ag-wrap,.kb-wrap{grid-template-columns:1fr}
  .ag-roster{border-left:0;padding-left:0;border-top:1px solid var(--outline-soft);padding-top:10px}
  .kb-list{border-right:0;padding-right:0}
  .kb-wrap{min-height:0}
  .rp-topics{grid-template-columns:repeat(2,1fr)}
}

/* ---------- v16: pricing, two paths ---------- */
.pt-note{margin-top:14px;max-width:70ch}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;margin-top:26px}
.tier{position:relative;background:var(--card);border:1px solid var(--outline);border-radius:18px;padding:24px 22px 22px;display:flex;flex-direction:column;gap:4px;box-shadow:0 1px 2px rgba(26,29,38,.04),0 14px 34px -24px rgba(26,29,38,.25);transition:transform 300ms cubic-bezier(.2,.7,.3,1),box-shadow 300ms}
.tier:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(26,29,38,.04),0 24px 44px -24px rgba(26,29,38,.35)}
.tier.hot{border-color:transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,#6d5ef0,#a18aff 60%,#c4b7ff) border-box;border:2px solid transparent;box-shadow:0 24px 50px -26px rgba(90,50,224,.5)}
.tier-hot{position:absolute;top:-13px;left:18px;background:linear-gradient(135deg,#6d5ef0,#8f7bff);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:4px 11px;box-shadow:0 6px 14px -6px rgba(90,50,224,.7)}
.tier .tname{font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-on-container)}
.twho{font-size:12.5px;color:var(--muted);margin-bottom:10px}
.tprice{display:flex;align-items:baseline;gap:2px;line-height:1}
.tprice .tcur{font-size:18px;font-weight:700;color:var(--muted);align-self:flex-start;margin-top:6px}
.tnum{font-size:38px;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.tnum.morph{animation:tnumMorph 480ms ease}
@keyframes tnumMorph{0%{opacity:.3;transform:translateY(6px)}100%{opacity:1;transform:none}}
.tprice .per{font-size:13px;font-weight:600;color:var(--muted);margin-left:4px}
.tier .tweek{font-size:12px;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums}
.tier ul{list-style:none;margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--outline-soft);display:flex;flex-direction:column;gap:8px;flex:1}
.tier li{font-size:13.5px;color:var(--body);padding-left:22px;position:relative;line-height:1.4}
.tier li::before{content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;background:var(--success-container) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233a7d54' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/9px no-repeat}
.tier li b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}
.tier-btn{margin-top:18px;justify-content:center;border:1px solid var(--outline);background:var(--card);color:var(--ink);font-weight:700}
.tier.hot .tier-btn{background:linear-gradient(135deg,#6d5ef0 0%,#8f7bff 55%,#a18aff 100%);color:#fff;border-color:transparent;box-shadow:0 8px 18px -8px rgba(90,50,224,.6)}
.db-pricing .guarantees{margin-top:26px}
.db-pricing .rp-ratecard{margin-top:44px;padding-top:34px;border-top:1px solid var(--outline-soft)}
@media (max-width:1100px){ .tiers{grid-template-columns:repeat(2,1fr)} }
@media (max-width:900px){
  .tiers{grid-template-columns:1fr}
}

/* ---------- v17: done for you ---------- */
.tm-ini{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 15%;flex:none;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
@keyframes fdIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.dfy-points{display:grid;grid-template-columns:1fr 1fr;gap:22px 28px}
.dfy-cta{margin-top:22px}
.dfy-cta .herometa{margin-top:10px}
.dfy-points-h{font-size:20px;font-weight:800;letter-spacing:-.015em;color:var(--ink);margin:24px 0 0}
.dp b{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.012em;color:var(--ink);margin-bottom:5px;line-height:1.25}
.dp-n{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-on-container);font-variant-numeric:tabular-nums;margin-bottom:4px}
.dp-result{margin-top:26px;background:var(--primary-tint);border:1px solid var(--primary-card-border);border-radius:16px;padding:20px 22px}
.dp-result .dp-n{margin-bottom:6px}
.dp-result p{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.dp p{margin:0;font-size:13.5px;line-height:1.55;color:var(--body)}
.dfy-ways{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px}
.way{background:var(--card-low);border:1px solid var(--outline);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.way-k{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.way b{font-size:20px;font-weight:800;letter-spacing:-.015em;color:var(--ink)}
.way p{margin:0;font-size:14px;line-height:1.55;color:var(--body);max-width:48ch}
.way-link{font-size:13.5px;font-weight:700;color:var(--primary-on-container);text-decoration:none;margin-top:6px}
.way-link:hover{text-decoration:underline}
@media (max-width:900px){ .dfy-points{grid-template-columns:1fr;gap:16px} .dfy-ways{grid-template-columns:1fr} }

/* ---------- v18: pricing calculator ---------- */
.calc{margin-top:28px;background:var(--card-low);border:1px solid var(--outline);border-radius:18px;padding:26px 28px 22px}
.calc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.calc-head > div > b{display:block;font-size:22px;font-weight:800;letter-spacing:-.015em;color:var(--ink);margin:6px 0 4px}
.calc-head p{margin:0;font-size:13.5px;color:var(--muted);max-width:52ch}
.calc-read{text-align:right;display:flex;flex-direction:column;line-height:1}
.calc-read b{font-size:44px;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.calc-read span{font-size:12.5px;color:var(--muted);margin-top:4px}
.calc-slider{position:relative;margin:22px 0 26px}
.calc-slider input{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:linear-gradient(90deg,#6d5ef0 0%,#a18aff var(--pct,22%),var(--outline) var(--pct,22%));outline:none;margin:0;cursor:pointer}
.calc-slider input::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid #6d5ef0;box-shadow:0 6px 16px -6px rgba(90,50,224,.7);cursor:grab}
.calc-slider input::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:3px solid #6d5ef0;box-shadow:0 6px 16px -6px rgba(90,50,224,.7);cursor:grab}
.calc-slider input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(143,123,255,.3)}
.calc-ticks{position:relative;height:16px;margin-top:8px}
.calc-ticks span{position:absolute;transform:translateX(-50%);font-size:11px;font-weight:600;color:var(--faint);font-variant-numeric:tabular-nums}
.calc-ticks span::before{content:"";position:absolute;left:50%;top:-8px;width:1px;height:5px;background:var(--outline)}
.calc-out{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.co{background:var(--card);border:1px solid var(--primary);border-radius:14px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;box-shadow:0 12px 30px -20px rgba(90,50,224,.5)}
.calc-toggle{display:flex;align-items:flex-start;gap:12px;margin:2px 0 16px;cursor:pointer}
.calc-toggle input{position:absolute;opacity:0;width:0;height:0}
.calc-toggle .tg{flex:none;width:38px;height:22px;border-radius:999px;background:var(--outline);position:relative;transition:background 200ms;margin-top:1px}
.calc-toggle .tg::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(26,29,38,.3);transition:transform 200ms cubic-bezier(.2,.7,.3,1)}
.calc-toggle input:checked+.tg{background:var(--primary)}
.calc-toggle input:checked+.tg::after{transform:translateX(16px)}
.calc-toggle input:focus-visible+.tg{outline:2px solid var(--primary);outline-offset:2px}
.tg-l{font-size:14px;font-weight:700;color:var(--ink);line-height:1.4}
.tg-l .soonbadge{vertical-align:1px}
.tg-l small{display:block;font-size:12.5px;font-weight:500;color:var(--muted);margin-top:2px}
.co-sum{margin:0 0 8px;font-size:15px;line-height:1.45;color:var(--ink)}
.co-sum b{color:var(--primary-on-container)}
.co-k{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.co-plan{font-size:13px;font-weight:700;color:var(--primary-on-container)}
.co-price{display:flex;align-items:baseline;gap:2px;line-height:1;margin:4px 0 2px}
.co-price i{font-style:normal;font-size:16px;font-weight:700;color:var(--muted);align-self:flex-start;margin-top:4px}
.co-price span{font-size:32px;font-weight:800;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.co-price em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--muted);margin-left:4px}
.co-line{font-size:12.5px;color:var(--body);font-variant-numeric:tabular-nums}
.co-rate{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.calc-note{margin:16px 0 0;font-size:12.5px;color:var(--muted)}
.calc-toggle{display:none!important}
.agent-price{display:none!important}
@media (max-width:900px){ .calc{padding:20px 18px} .calc-out{grid-template-columns:1fr} .calc-read b{font-size:36px} }
.co-alt{font-size:12px;font-weight:600;color:var(--primary-on-container);margin-top:4px;font-variant-numeric:tabular-nums}
.co-alt:empty{display:none}
.co-line b{color:var(--ink)}

/* ---------- v19: a little colour everywhere + Meet Chloe ---------- */
.band,.plat,.db-pricing,.story{position:relative;overflow:clip}
.band > *,.plat > *,.db-pricing > *,.story > *{position:relative;z-index:1}
.story{background:var(--card);border-top:1px solid var(--outline-soft)}
.story-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}
.st-photo{position:relative;padding:24px 40px 40px 0}
.st-main{position:relative;z-index:1;border-radius:22px;box-shadow:0 34px 70px -30px rgba(26,29,38,.5);aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}
.st-second{position:absolute;z-index:2;right:-6px;bottom:-4px;width:38%;aspect-ratio:3/4;object-fit:cover;border-radius:16px;border:5px solid var(--card);box-shadow:0 22px 44px -22px rgba(26,29,38,.5);transform:rotate(-5deg)}
.st-chip{position:absolute;z-index:3;left:-14px;top:52px;display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--outline);border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:0 14px 30px -18px rgba(26,29,38,.4)}
.st-sp{position:absolute;z-index:3;right:8%;top:-4px}
.story .rx-h2 em{font-style:normal}
.st-text > p{max-width:58ch;margin-top:12px}
.st-quote{position:relative;margin:22px 0 18px;padding:18px 20px 16px 22px;border-radius:16px;background:var(--card-low);border:1px solid var(--outline);max-width:56ch}
.st-quote .founderq-mark{width:16px;height:16px;fill:var(--primary);position:absolute;left:-8px;top:-8px;background:var(--card);border-radius:50%;padding:3px;box-sizing:content-box;border:1px solid var(--primary-card-border)}
.st-quote p{margin:0;font-size:17.5px;font-weight:600;line-height:1.5;color:var(--ink);letter-spacing:-.01em}
.st-quote span{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;font-weight:700;color:var(--muted)}
.st-quote span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--success)}
.st-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.st-stats div{background:var(--card);border:1px solid var(--outline);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow-card)}
.st-stats b{display:block;font-size:24px;font-weight:800;letter-spacing:-.025em;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}

.st-stats span{font-size:12px;color:var(--muted)}
.st-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.st-tags span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--success-on);background:var(--success-container);border-radius:999px;padding:5px 11px}
.st-tags span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success)}
@media (prefers-reduced-motion: no-preference){
    @keyframes blobDrift{from{transform:rotate(-4deg) scale(1)}to{transform:rotate(6deg) scale(1.06)}}
}
@media (max-width:1000px){ .story-grid{grid-template-columns:1fr;gap:44px} .st-photo{padding:20px 30px 30px 0;max-width:460px} }
@media (max-width:900px){ .st-stats{grid-template-columns:1fr 1fr 1fr;gap:8px} .st-stats b{font-size:20px} .st-chip{left:0} }
/* v20: the second colour is green, in small touches */
.eyebrow:not(.shopchip)::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--success);margin-right:8px;vertical-align:1px}

/* ---------- v21: hero composition, left to right: Chloe, the helpdesk, Copilot ---------- */
.wv-stage{height:716px}
.wv-photo{left:40px;top:84px;transform:none;width:340px;z-index:1}
.wv-photo img{height:560px;object-position:50% 12%}
.wv-cap{padding-right:96px}
.wv-frame{left:300px;right:40px;top:70px;height:480px;z-index:2}
.wv-rows .af-row{padding:6px 336px 6px 14px}
.wv-rows .af-avatar{width:28px;height:28px;font-size:11px}
.wv-rows .af-who,.wv-rows .af-subj{font-size:12.5px}
.wv-cp{left:auto;margin-left:0;right:0;top:196px;min-height:404px;z-index:3}
.wv-toast{left:auto;margin-left:0;left:240px;top:436px;z-index:3}
.wv-kpi{left:auto;margin-left:0;left:372px;top:572px;z-index:3}
.wv-chip{left:auto;margin-left:0;left:24px;top:662px;z-index:3;max-width:330px}
.wv-stage .sparkle{left:auto;margin-left:0;left:352px;top:64px}
@media (max-width:900px){ .wv-photo{position:static;width:min(380px,100%);margin:0 auto} .wv-photo img{height:auto} .wv-cp{position:static;min-height:0} }

/* ---------- v22: the customer's message inside the scene card ---------- */
.wv-cp{display:flex;flex-direction:column}
.cp-msg{background:var(--card-low);border:1px solid var(--outline-soft);border-radius:10px;padding:8px 10px;margin-bottom:10px}
.cp-msg-who{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--ink);margin-bottom:2px}
.cp-msg-who i{font-style:normal;font-weight:500;color:var(--muted)}
.cp-msg-who .via-ic{width:13px;height:13px;object-fit:contain;flex:0 0 auto}
.cp-text .trk,.mini-p .trk{color:var(--primary-on-container);text-decoration:underline;text-underline-offset:2px;word-break:break-all}
.cp-msg p{margin:0;font-size:12px;line-height:1.5;color:var(--body);white-space:pre-line}
.wv-cp .cp-text{flex:1}
.wv-cp{min-height:420px}

/* ---------- v23: hero, software on top, Chloe beneath with the arrow ---------- */
.wv-stage{height:920px}
.wv-frame{left:40px;right:40px;top:0;height:470px;z-index:2}
.wv-rows .af-row{padding-right:336px}
.wv-cp{right:0;top:40px;min-height:440px;z-index:3}
.wv-toast{left:auto;margin-left:0;left:70px;top:426px;z-index:3}
.wv-stage .sparkle{left:auto;margin-left:0;left:auto;right:300px;top:-14px}
.wv-photo{left:40px;top:560px;transform:none;width:250px;z-index:3}
.wv-photo img{height:320px;object-position:50% 15%;border-radius:18px;border:5px solid var(--card);box-shadow:0 30px 60px -28px rgba(26,29,38,.5)}
.wv-cap{display:none}
.creds{position:absolute;left:5px;right:5px;bottom:5px;padding:44px 14px 13px;border-radius:0 0 14px 14px;background:linear-gradient(180deg,rgba(26,29,38,0),rgba(26,29,38,.86));color:#fff;display:flex;flex-direction:column;gap:7px}
.creds b{font-size:13.5px}
.creds .cc{display:flex;gap:5px;flex-wrap:wrap}
.creds .cc span{font-size:10.5px;font-weight:700;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:3px 8px;color:#fff}
.hero-arrow{position:absolute;z-index:3;left:296px;top:478px;width:260px;height:200px;pointer-events:none;overflow:visible}
.hero-arrow path{fill:none;stroke:#b3a4ff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-arrow .ar-line{stroke-dasharray:400;stroke-dashoffset:400}
.hero-arrow .ar-head{stroke-dasharray:60;stroke-dashoffset:60}
.wv-chip{left:auto;margin-left:0;left:296px;top:514px;z-index:4;max-width:290px}
.wv-kpi{left:auto;margin-left:0;left:600px;right:auto;top:772px;z-index:3}
.tagline{position:absolute;z-index:3;left:600px;top:586px;width:520px}
.tagline b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.18;text-wrap:balance}
.tagline > span{display:block;margin-top:10px;font-size:15px;color:var(--muted)}
.teamrow{display:flex;align-items:center;margin-top:18px}
.teamrow img,.teamrow i{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid var(--card);box-shadow:0 2px 6px rgba(26,29,38,.2);margin-right:-8px;font-style:normal;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.teamrow em{font-style:normal;font-size:12.5px;font-weight:600;color:var(--body);margin-left:18px}
@media (prefers-reduced-motion: no-preference){
  .hero-arrow .ar-line{animation:arrowDraw 1.1s cubic-bezier(.4,0,.2,1) 1.6s forwards}
  .hero-arrow .ar-head{animation:arrowDraw .35s ease-out 2.6s forwards}
  @keyframes arrowDraw{to{stroke-dashoffset:0}}
}
@media (prefers-reduced-motion: reduce){ .hero-arrow path{stroke-dashoffset:0} }
@media (max-width:900px){
  .wv-stage{height:auto;display:flex;flex-direction:column;gap:18px}
  .wv-cp{position:static;min-height:0;order:1}
  .wv-photo{position:relative;left:auto;top:auto;width:min(300px,100%);margin:6px auto 0;order:2}
  .wv-photo img{height:auto;aspect-ratio:3/4}
  .hero-arrow,.wv-kpi,.wv-frame,.wv-toast,.wv-chip,.wv-stage .sparkle{display:none}
  .tagline{position:static;width:auto;margin-top:4px;padding:0 4px;order:3}
  .tagline b{font-size:22px}
}

/* ---------- v24: the layout Tom picked, agents at work, +1 on the counter ---------- */
.wv-stage{height:1010px}
.wv-photo{left:40px;top:560px;width:340px}
.wv-photo img{height:430px;object-position:50% 15%}
.onchip{position:absolute;z-index:3;left:22px;top:22px;display:inline-flex;align-items:center;gap:7px;background:var(--card);border-radius:999px;padding:7px 13px;font-size:12px;font-weight:700;color:var(--ink);box-shadow:0 8px 20px -10px rgba(26,29,38,.45)}
.creds{padding:56px 18px 18px}
.creds b{font-size:16px}
.creds .cc span{font-size:11px;padding:4px 9px}
.hero-arrow{left:372px;top:462px;width:360px;height:260px}
.hero-arrow .ar-line{stroke-dasharray:600;stroke-dashoffset:600}
.ar-label{position:absolute;z-index:4;left:646px;top:596px;background:var(--card);border:1px solid var(--primary-card-border);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:700;color:var(--primary-on-container);box-shadow:0 10px 24px -14px rgba(90,50,224,.35);white-space:nowrap}
.wv-toast{left:auto;margin-left:0;left:580px;top:444px;padding:8px 14px 8px 8px;gap:9px}
.toast-av{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid rgba(255,255,255,.25);flex:none}
.toast-when{font-style:normal;color:#8f94a3;font-size:12px;margin-left:2px}
.wv-toast.pop .toast-av{animation:toastPop 420ms cubic-bezier(.2,.7,.3,1)}
.tagline{left:560px;top:670px;width:560px}
.tagline b{font-size:40px;line-height:1.08;letter-spacing:-.028em}
.tagline b em{font-style:normal;color:var(--primary)}
.wv-kpi{position:static;width:auto;background:none;border:0;box-shadow:none;padding:0;display:flex;gap:44px;margin:22px 0 4px}
.wv-kpi > div{position:relative}
.wv-kpi b{font-size:32px;letter-spacing:-.025em;line-height:1.1}
.wv-kpi span{font-size:12.5px}
#wvResolved.tick{animation:kpiTickGreen 700ms ease}
@keyframes kpiTickGreen{0%{color:var(--success)}70%{color:var(--success)}100%{color:var(--ink)}}
.plus1{position:absolute;left:100%;top:-6px;margin-left:6px;font-size:15px;font-weight:800;color:var(--success);pointer-events:none;animation:plusUp 1100ms cubic-bezier(.2,.7,.3,1) forwards}
@keyframes plusUp{0%{opacity:0;transform:translateY(8px) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.1)}100%{opacity:0;transform:translateY(-26px) scale(1)}}
.tagline .teamrow{margin-top:16px}
.cur{position:absolute;z-index:3;left:56%;top:40%;display:flex;align-items:flex-start;pointer-events:none;transition:left 900ms cubic-bezier(.3,.7,.2,1),top 900ms cubic-bezier(.3,.7,.2,1);opacity:0}
.cur.show{opacity:1}
.cur svg{width:16px;height:16px;fill:var(--ink);stroke:#fff;stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 2px 3px rgba(26,29,38,.35))}
.cur img,.cur i{width:22px;height:22px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid #fff;box-shadow:0 3px 8px rgba(26,29,38,.3);margin:8px 0 0 -4px;font-style:normal;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex:none}
.cur.press svg{transform:scale(.82);transform-origin:top left;transition:transform 120ms}
.cur .ripple{position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;border:2px solid var(--primary);animation:rip 480ms ease-out forwards;pointer-events:none}
@keyframes rip{from{transform:scale(.4);opacity:.9}to{transform:scale(2.6);opacity:0}}
.wv-rows .af-row.clicked{background:var(--primary-tint)}
.wv-rows .af-row{transition:background 260ms}
@media (max-width:900px){ .cur,.ar-label{display:none} .onchip{left:14px;top:14px} .tagline{position:static;width:auto} .tagline b{font-size:26px} .wv-kpi{display:flex} }
.toast-ini{width:24px;height:24px;border-radius:50%;font-style:normal;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;border:2px solid rgba(255,255,255,.25)}

/* ---------- v25: a crisper arrow, the toast out of its way ---------- */
.hero-arrow{left:372px;top:462px;width:350px;height:180px;overflow:visible}
.hero-arrow .ar-line{fill:none;stroke:#8f7bff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:520;stroke-dashoffset:520}
.hero-arrow .ar-dot{fill:#8f7bff;opacity:0}
.hero-arrow .ar-head{fill:#8f7bff;stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.4)}
.ar-label{left:520px;top:556px;transform:translate(-50%,-50%);padding:8px 16px;border:1px solid var(--primary-card-border);box-shadow:0 12px 26px -14px rgba(90,50,224,.35);opacity:0}
.wv-toast{left:60px;top:426px}
.tagline{left:600px;top:664px;width:540px}
@media (prefers-reduced-motion: no-preference){
  .hero-arrow .ar-dot{animation:arrowFade .3s ease-out 1.5s forwards}
  .hero-arrow .ar-line{animation:arrowDraw 1.1s cubic-bezier(.4,0,.2,1) 1.6s forwards}
  .hero-arrow .ar-head{animation:arrowHead .35s cubic-bezier(.2,.7,.3,1.4) 2.55s forwards}
  .ar-label{animation:arrowFade .4s ease-out 2.2s forwards}
  @keyframes arrowFade{to{opacity:1}}
  @keyframes arrowHead{to{opacity:1;transform:scale(1)}}
}
@media (prefers-reduced-motion: reduce){ .hero-arrow .ar-line{stroke-dashoffset:0} .hero-arrow .ar-dot,.hero-arrow .ar-head,.ar-label{opacity:1;transform:none} }

/* ---------- v26: the arrow, one bend, one colour ---------- */
.hero-arrow{left:378px;top:470px;width:330px;height:176px;overflow:visible}
.hero-arrow .ar-line{fill:none;stroke:var(--primary);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420}
.hero-arrow .ar-head{fill:var(--primary);stroke:none;opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.5)}
.ar-label{position:static;display:inline-flex;align-items:center;gap:7px;transform:none;margin:0 0 14px;opacity:1;background:var(--card);border:1px solid var(--outline);box-shadow:none;color:var(--body);font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:999px}
.ar-label::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success)}
.tagline{top:656px}
@media (prefers-reduced-motion: no-preference){
  .hero-arrow .ar-line{animation:arrowDraw 1s cubic-bezier(.4,0,.2,1) 1.6s forwards}
  .hero-arrow .ar-head{animation:arrowHead .3s cubic-bezier(.2,.7,.3,1.4) 2.5s forwards}
  .ar-label{animation:none}
}
@media (max-width:900px){ .ar-label{display:inline-flex} }
@media (prefers-reduced-motion: reduce){ .hero-arrow .ar-head{opacity:1;transform:none} }

/* ---------- v27: option H, a dotted stem from the label up to the inbox, no arrow ---------- */
.ar-label{position:relative;left:auto;top:auto;transform:none;display:inline-flex;width:max-content;align-self:flex-start}
.tagline{display:flex;flex-direction:column;align-items:flex-start}
.stem{position:absolute;left:50%;bottom:100%;width:2px;height:158px;margin-left:-1px;margin-bottom:6px;background:repeating-linear-gradient(to top,var(--primary) 0 3px,transparent 3px 9px);opacity:.55;transform-origin:bottom;transform:scaleY(0)}
.stem::before{content:"";position:absolute;left:-4px;top:-5px;width:10px;height:10px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 4px rgba(109,94,240,.16);opacity:0}
@media (prefers-reduced-motion: no-preference){
  .stem{animation:stemGrow .7s cubic-bezier(.4,0,.2,1) 1.6s forwards}
  .stem::before{animation:arrowFade .3s ease-out 2.3s forwards}
  @keyframes stemGrow{to{transform:scaleY(1)}}
}
@media (prefers-reduced-motion: reduce){ .stem{transform:none} .stem::before{opacity:1} }
@media (max-width:900px){ .stem{display:none} }
/* ---------- v28: Chloe closer to the words, green dot on the chip ---------- */
.tagline{left:424px;width:600px}
.ar-label::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);flex:none;margin-right:9px}
/* ---------- v29: the bottom group centred under the helpdesk ---------- */
.wv-photo{left:118px}
.tagline{left:502px}

/* ---------- v30: step cards perform when their step is in focus ---------- */
.step-link{color:#c4b7ff;font-weight:700;text-decoration:none;white-space:nowrap}
.step-link:hover{text-decoration:underline}
.mini-cal{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin-top:10px}
.mini-cal span{font-size:10.5px;font-weight:700;text-align:center;padding:7px 0;border-radius:7px;border:1px solid rgba(255,255,255,.1);color:#8f94a3;transition:background 350ms,color 350ms,border-color 350ms}
.mini-cal span.slot.on{background:#8f7bff;color:#fff;border-color:transparent;box-shadow:0 0 0 3px rgba(143,123,255,.25)}
.mini-booked{display:flex;align-items:center;gap:7px;margin-top:9px;font-size:11.5px;font-weight:700;color:#7fdcae;opacity:0;transform:translateY(4px);transition:opacity 300ms,transform 300ms}
.mini-booked.on{opacity:1;transform:none}
.mini[data-anim="list"] .mini-list li{transition:opacity 300ms,transform 300ms}
.mini[data-anim="list"].arm .mini-list li{opacity:.35;transform:translateX(-4px)}
.mini[data-anim="list"].arm .mini-list li.on{opacity:1;transform:none}
.mini[data-anim="rows"].arm .mini-rows > div{opacity:0;transform:translateY(-6px);transition:opacity 320ms,transform 320ms}
/* ---------- the Build step card: channels feed the AI, actions come out ---------- */
.mini-hub .hub-in{display:flex;justify-content:space-between;gap:4px;padding:12px 12px 0}
.mini-hub .hub-in span{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;min-width:0;font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap}
.mini-hub .hub-in img{width:18px;height:18px;object-fit:contain}
.mini-hub .hub-in .livedot{width:10px;height:10px;margin:4px 0}
.mini-hub .hub-link{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;justify-items:center;padding:6px 12px 0}
.mini-hub .hub-link i{width:1px;height:18px;background:linear-gradient(180deg,rgba(143,123,255,.15),#8f7bff);position:relative;overflow:hidden}
.mini-hub .hub-link i::after{content:"";position:absolute;left:-1px;top:-6px;width:3px;height:6px;border-radius:2px;background:#e4defc;animation:hubDrop 1.6s linear infinite}
.mini-hub .hub-link i:nth-child(2)::after{animation-delay:.3s}
.mini-hub .hub-link i:nth-child(3)::after{animation-delay:.6s}
.mini-hub .hub-link i:nth-child(4)::after{animation-delay:.9s}
.mini-hub .hub-link i:nth-child(5)::after{animation-delay:1.2s}
@keyframes hubDrop{to{transform:translateY(26px)}}
.mini-hub .hub-link.one{grid-template-columns:1fr;padding:4px 12px 0}
.mini-hub .hub-sec{padding:8px 12px 0}
.mini-hub .hub-sec.tight{padding-top:6px}
.mini-hub .hub-k{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8f94a3;margin-bottom:6px}
.mini-hub .hub-chips{display:flex;flex-wrap:wrap;gap:5px}
.mini-hub .hub-chips .chip{font-size:11px;padding:3px 9px;margin:0}
.flow .mini-hub .hub-chips .chip{background:rgba(255,120,120,.14);color:#ffb3b3}
.mini-hub .hub-core{display:flex;align-items:center;gap:10px;margin:4px 12px 4px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,rgba(109,94,240,.3),rgba(143,123,255,.12));border:1px solid rgba(143,123,255,.4);box-shadow:0 10px 24px -14px rgba(109,94,240,.8)}
.mini-hub .hub-core .ai-badge{width:34px;height:34px;font-size:16px;background:linear-gradient(135deg,#6d5ef0,#a18aff);color:#fff;border-color:transparent}
.mini-hub .hub-core b{display:block;font-size:13px}
.mini-hub .hub-core span{font-size:11px;color:#a3a8b6}
.mini-hub .mini-rows{padding-top:8px;gap:7px}
.mini-hub .mini-rows .tm-ini{width:20px;height:20px;font-size:10px}
.mini-hub .hub-foot{padding:2px 12px 12px}
.flow .mini-hub .hub-in span{color:#8f94a3}
@media (prefers-reduced-motion:reduce){.mini-hub .hub-link i::after{animation:none}}

.mini[data-anim="rows"].arm .mini-rows > div.on{opacity:1;transform:none}
.mini[data-anim="stream"] .mini-chips{transition:opacity 300ms}
.mini[data-anim="stream"].arm .mini-chips{opacity:0}
.mini[data-anim="stream"].arm .mini-chips.on{opacity:1}
.mini[data-anim="stream"].arm .mini-p::after{content:"";display:inline-block;width:2px;height:12px;background:#c4b7ff;vertical-align:-2px;margin-left:2px;animation:cpBlink .9s steps(2,end) infinite}
.mini[data-anim="stream"].arm.done .mini-p::after{display:none}
.mini-opt{transition:border-color 320ms,background 320ms,box-shadow 320ms}
.mini[data-anim="toggle"] .mini-opt.lit{border-color:rgba(196,183,255,.5);background:rgba(143,123,255,.12);box-shadow:0 0 0 1px rgba(143,123,255,.25)}
/* ---------- v31: numbers stay solid, muted until in focus ---------- */
.flow .step{transition:none}
.flow .num{background:#3b3f52;box-shadow:0 0 0 5px rgba(143,123,255,.08);color:#c9cdd8}
.flow .step.focus .num{background:#8f7bff;color:#fff}
.flow .path::before{z-index:0}

/* ---------- v32: the accent words shine ---------- */
.heroline .accent,.flow .rx-h2 em,.tagline b em,.who .rx-h2 em{position:relative;display:inline-block;color:transparent;background:linear-gradient(110deg,#6d5ef0 0%,#6d5ef0 30%,#8f7bff 42%,#e9e2ff 50%,#8f7bff 58%,#6d5ef0 70%,#6d5ef0 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.heroline .accent::before,.heroline .accent::after,.flow .rx-h2 em::before,.flow .rx-h2 em::after,.tagline b em::before,.tagline b em::after{content:"";position:absolute;width:.32em;height:.32em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23c4b7ff' d='M12 0C13 7 17 11 24 12 17 13 13 17 12 24 11 17 7 13 0 12 7 11 11 7 12 0Z'/%3E%3C/svg%3E") center/contain no-repeat;opacity:0;pointer-events:none;transform:scale(.4)}
.heroline .accent::before,.flow .rx-h2 em::before,.tagline b em::before{right:-.22em;top:-.1em}
.heroline .accent::after,.flow .rx-h2 em::after,.tagline b em::after{left:-.18em;bottom:.02em;width:.22em;height:.22em}
@media (prefers-reduced-motion: no-preference){
  .heroline .accent,.flow .rx-h2 em,.tagline b em,.who .rx-h2 em{animation:shineSweep 5.5s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes shineSweep{0%{background-position:100% 0}45%{background-position:100% 0}75%{background-position:0% 0}100%{background-position:0% 0}}
  .heroline .accent::before,.flow .rx-h2 em::before,.tagline b em::before{animation:glint 5.5s ease-in-out infinite;animation-delay:3.3s}
  .heroline .accent::after,.flow .rx-h2 em::after,.tagline b em::after{animation:glint 5.5s ease-in-out infinite;animation-delay:3.9s}
  @keyframes glint{0%,100%{opacity:0;transform:scale(.4) rotate(0deg)}8%{opacity:1;transform:scale(1) rotate(15deg)}16%{opacity:0;transform:scale(.5) rotate(30deg)}}
}
@media (prefers-reduced-motion: reduce){ .heroline .accent,.flow .rx-h2 em,.tagline b em{background-position:50% 0} }
/* ---------- v34: the software heading pinned where it was; frame pinned beneath it ---------- */
.plat .wrap{padding-top:0}
.plat-top{position:relative;z-index:3;padding:40px 40px 14px;margin:0 -40px;background:var(--surface)}
.plat-top::after{content:"";position:absolute;left:0;right:0;top:100%;height:34px;background:linear-gradient(var(--surface),rgba(244,245,248,0));pointer-events:none}
@media (min-width:901px){
  .plat-top{position:sticky;top:74px}
  .plat-grid{margin-top:16px}
  .plat-stick{top:252px}
  .chap{min-height:52vh;padding:20px 0}
  .chap:first-child{padding-top:10px}
  .chap:last-child{min-height:40vh}
}
/* ---------- v36: shorter tour frame ---------- */
.pf-main{padding:10px 12px}
.pv{gap:8px}
.pf .cp-cust{padding-bottom:7px;margin-bottom:0}
.cc-cop .cp-text{min-height:0}

/* ---------- v37: the founder quote on its own grey band ---------- */
.quoteband{background:var(--surface);border-top:1px solid var(--outline-soft);padding:64px 0 60px}
.quoteband .founderq{margin:0 auto;padding:0 40px}
.wv-stage{height:1040px}
@media (max-width:900px){ .quoteband{padding:44px 0} }

/* ---------- v38: done for you, a live shift and three cards ---------- */
.dfy-points{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dp{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--outline);border-radius:16px;padding:20px 20px 18px;box-shadow:var(--shadow-card)}
.dp b{font-size:16px}
.dp p{font-size:13.5px;flex:1}
.dp .mini{margin-top:8px}
.mini.light{background:var(--card-low);border:1px solid var(--outline-soft);box-shadow:none;color:var(--body)}
.mini.light .mini-t{color:var(--muted)}
.mini.light .mini-p{color:var(--body)}
.mini.light .mini-rows{color:var(--ink);padding:0}
.mini.light .mini-rows > div{display:flex;align-items:center;gap:8px;font-size:12px}
.mini.light .mini-rows .tm-ini{width:22px;height:22px;font-size:9px;flex:none}
.mini.light .mini-rows .chip{margin-left:auto}
.mini.light .chip.warn{background:#fbf0db;color:#8a6520}
.mini.light .mini-list{color:var(--body)}
.mini.light[data-anim="stream"].arm .mini-p::after{background:var(--primary)}
.dfy-ways .way{position:relative;background:var(--card);border:1px solid var(--outline);border-radius:18px;padding:26px 26px 24px}
.dfy-ways .way.hot{border:2px solid transparent;background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(135deg,#6d5ef0,#a18aff 60%,#c4b7ff) border-box;box-shadow:0 24px 50px -26px rgba(90,50,224,.4)}
.way-hot{position:absolute;top:-13px;left:22px;background:linear-gradient(135deg,#6d5ef0,#8f7bff);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:4px 11px;box-shadow:0 6px 14px -6px rgba(90,50,224,.7)}
.way-btn{display:inline-flex;align-items:center;align-self:flex-start;margin-top:10px;background:linear-gradient(135deg,#6d5ef0 0%,#8f7bff 55%,#a18aff 100%);color:#fff;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 8px 18px -8px rgba(90,50,224,.6)}
.way-btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--outline);box-shadow:none}
@media (max-width:1000px){ .dfy-points{grid-template-columns:1fr 1fr} }
@media (max-width:900px){ .dfy-points{grid-template-columns:1fr} }

/* ---------- v39: the two path cards, the three buildout cards beneath ---------- */
.dfy-points{grid-template-columns:repeat(3,1fr);margin-top:22px}
@media (max-width:1000px){ .dfy-points{grid-template-columns:1fr 1fr} }
@media (max-width:900px){ .dfy-points{grid-template-columns:1fr} }

/* ---------- v40: AI agents are full-body figures or a sparkle badge, never a cropped circle ---------- */
.ai-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--primary-container);color:var(--primary);font-size:14px;font-style:normal;flex:none;border:2px solid var(--card);box-shadow:0 2px 6px rgba(26,29,38,.15)}
.ai-badge.sm{width:22px;height:22px;font-size:11px;border-width:1px;box-shadow:none}
.teamrow .ai-badge{width:34px;height:34px;margin-right:-8px}
.m-who .ai-badge{width:18px;height:18px;font-size:9px}
.ag-roster .ag{align-items:center;gap:10px;padding:4px 0}
.ag-roster img.ag-fig{width:44px;height:64px;border-radius:0;object-fit:contain;object-position:center bottom;flex:none;image-rendering:auto}

/* ---------- v41: who this is for (replaces the failed-tools argument) ---------- */
.who .secsub b{color:var(--ink);font-weight:700}
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.wsign{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--outline);border-radius:16px;padding:20px 20px 18px;box-shadow:var(--shadow-card)}
.wnum{font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--primary-on-container);font-variant-numeric:tabular-nums}
.wsign > b{font-size:16.5px;font-weight:800;letter-spacing:-.012em;color:var(--ink);line-height:1.25}
.wsign > p{margin:0;font-size:13.5px;line-height:1.55;color:var(--body);flex:1}
.wvis{margin-top:8px}
.notif{display:flex;align-items:flex-start;gap:9px;padding:8px 0;border-top:1px solid var(--outline-soft)}
.notif:first-of-type{border-top:0;padding-top:2px}
.chbadge-i{width:24px;height:24px;border-radius:7px;background:var(--card);border:1px solid var(--outline-soft);display:flex;align-items:center;justify-content:center;flex:none}
.chbadge-i img{width:14px;height:14px;object-fit:contain}
.notif div{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.notif b{font-size:12px;color:var(--ink)}
.notif span{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.peak{width:100%;height:70px;display:block}
.pk-area{fill:rgba(109,94,240,.12)}
.pk-line{fill:none;stroke:var(--primary);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.pk-cap{stroke:var(--success);stroke-width:1.5;stroke-dasharray:4 4}
.pk-legend{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:6px}
.pk-legend i{display:inline-block;width:12px;height:0;border-top:1.5px dashed var(--success);vertical-align:middle;margin-right:5px}
.pk-legend .hot{color:var(--primary-on-container);font-weight:700}
.stack{display:flex;flex-wrap:wrap;gap:6px}
.stack span{font-size:11.5px;font-weight:600;color:var(--body);background:var(--card);border:1px solid var(--outline);border-radius:999px;padding:4px 10px}
.nobody{display:flex;align-items:center;gap:9px;margin-top:10px;padding:8px 10px;border:1px dashed var(--outline);border-radius:10px}
.nobody .tm-ini{width:26px;height:26px;border-radius:50%;background:var(--card-lowest);color:var(--muted);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none}
.nobody div{display:flex;flex-direction:column;line-height:1.3}
.nobody b{font-size:12px;color:var(--ink)}.nobody span{font-size:11px;color:var(--muted)}
.who .kicker{margin-top:26px}
@media (max-width:1000px){ .who-grid{grid-template-columns:1fr 1fr} }
@media (max-width:900px){ .who-grid{grid-template-columns:1fr} }
.who-grid > *{min-width:0}
.wsign .mini{min-width:0}

/* ---------- v42: questions in three conversations, hairlines not cards ---------- */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:40px;margin-top:38px}
.qa-col h3{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-on-container);margin:0 0 6px;padding-bottom:10px;border-bottom:2px solid var(--primary-card-border)}
.q{padding:16px 0 18px;border-bottom:1px solid var(--outline-soft);display:flex;flex-direction:column;gap:7px}
.q:last-child{border-bottom:0}
.q b{font-size:15.5px;font-weight:800;letter-spacing:-.012em;color:var(--ink);line-height:1.3}
.q p{margin:0;font-size:13.5px;line-height:1.6;color:var(--body)}
.q a{font-size:13px;font-weight:700;color:var(--primary-on-container);text-decoration:none;align-self:flex-start}
.q a::after{content:" \2192";font-weight:400}
.q a:hover{text-decoration:underline}
@media (max-width:1000px){ .qa-grid{gap:28px} }
@media (max-width:900px){ .qa-grid{grid-template-columns:1fr;gap:12px} }

/* ---------- v43: the three done-for-you points as columns, not cards ---------- */
.dfy-points{gap:36px;margin-top:34px}
.dfy-points .dp{background:none;border:0;border-top:2px solid var(--primary-card-border);border-radius:0;box-shadow:none;padding:18px 0 0}
.dfy-points .dp > b{font-size:17px}
.dfy-points .dp .mini{margin-top:10px}

/* ---------- v44: who this is for on the ink; questions on the grey ---------- */
.who{background:var(--ink);border-top:0}
.who .eyebrow{background:rgba(255,255,255,.08);color:#c4b7ff}
.who .rx-h2{color:#eef0f5}
.who .secsub{color:#a3a8b6}
.who .secsub b{color:#fff}
.who .wsign{background:radial-gradient(120% 70% at 50% 0%,rgba(143,123,255,.16),transparent 60%),linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 26px 50px -28px rgba(0,0,0,.75)}
.who .wnum{color:#c4b7ff}
.who .wsign > b{color:#eef0f5}
.who .wsign > p{color:#aeb3c0}
.who .mini.light{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);color:#c3c7d1}
.who .mini.light .mini-t{color:#8f94a3}
.who .chbadge-i{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.who .notif{border-top-color:rgba(255,255,255,.08)}
.who .notif b{color:#eef0f5}
.who .notif span{color:#8f94a3}
.who .pk-area{fill:rgba(143,123,255,.22)}
.who .pk-line{stroke:#a18aff}
.who .pk-cap{stroke:#4fc18f}
.who .pk-legend{color:#8f94a3}
.who .pk-legend .hot{color:#c4b7ff}
.who .pk-legend i{border-top-color:#4fc18f}
.who .stack span{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#d0d4dd}
.who .nobody{border-color:rgba(255,255,255,.16)}
.who .nobody .tm-ini{background:rgba(255,255,255,.1);color:#c3c7d1}
.who .nobody b{color:#eef0f5}
.who .nobody span{color:#8f94a3}
.who .kicker{color:#c3c7d1}
.qa{background:var(--surface)}
/* ---------- v45: who this is for gets its night sky and the shine ---------- */
.who .nightsky{z-index:0}
.who .wrap{position:relative;z-index:1}
.who .rx-h2 em{font-style:normal}

/* ---------- v46: the reps have faces and names ---------- */
.teamrow img,.tm img,.fd img,.cur img,.avs .av{object-position:50% 22%}

/* ---------- v47: the closing band and footer ---------- */
.rx-cta{padding:96px 40px 84px}
.rx-cta .nightsky{z-index:0}
.rx-cta .sparkle{display:none}
.cta-in{position:relative;z-index:1;max-width:680px;margin:0 auto}
.rx-cta h2 em{font-style:normal;position:relative;display:inline-block;color:transparent;background:linear-gradient(110deg,#8f7bff 0%,#8f7bff 30%,#c4b7ff 42%,#fff 50%,#c4b7ff 58%,#8f7bff 70%,#8f7bff 100%);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.rx-cta p{font-size:16.5px;line-height:1.6;max-width:56ch;margin-left:auto;margin-right:auto}
.rx-cta .oremail{font-size:13.5px;color:#8f94a3;margin:16px 0 0}
.rx-cta .oremail a{color:#c4b7ff}
.cta-people{display:flex;align-items:center;justify-content:center;margin-top:30px}
.cta-people img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:50% 22%;border:2px solid var(--ink);box-shadow:0 0 0 1px rgba(255,255,255,.15);margin-right:-9px}
.cta-people span{margin-left:18px;font-size:12.5px;font-weight:600;color:#a3a8b6}
footer.sitefoot.big{grid-template-columns:2fr 1fr 1.2fr 1fr}
footer.sitefoot .fcol a span{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}
@media (prefers-reduced-motion: no-preference){ .rx-cta h2 em{animation:shineSweep 5.5s cubic-bezier(.4,0,.2,1) infinite} }
@media (max-width:900px){ footer.sitefoot.big{grid-template-columns:1fr 1fr} .rx-cta{padding:64px 22px} }

/* ---------- v48: fix the invisible tier price ($ sign), USD tags, one border on the hot+recommended tier ---------- */
.pcur{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);align-self:flex-start;margin:9px 0 0 3px}
.co-price small{font-size:10.5px;font-weight:700;letter-spacing:.04em;color:var(--muted);margin:0 2px 0 3px;align-self:baseline}

/* ---------- v49: AI agents add-on note in pricing ---------- */
.addon{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--card-low);border:1px dashed var(--outline);border-radius:14px;padding:16px 20px;margin-top:22px}
.addon-k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--primary-on-container);background:var(--primary-container);border-radius:999px;padding:4px 10px}
.addon b{font-size:15px;color:var(--ink)}
.addon p{flex:1;min-width:220px;margin:0;font-size:13.5px;color:var(--body)}
.addon a{font-size:13.5px;font-weight:700;color:var(--primary-on-container);text-decoration:none;white-space:nowrap}
.addon a:hover{text-decoration:underline}

/* ---------- v50: one set of plan tiers, add-ons listed under them ---------- */
.addons{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin-top:22px}
.addons .addon{margin-top:0;flex-direction:column;align-items:flex-start;gap:8px}
.addons .addon p{min-width:0}
.calc-out{grid-template-columns:1fr}

/* ---------- v51: the full rinse. Phone layout for the hero, nav, software tour and calculator; skip link ---------- */
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 14px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{left:8px}
@media (max-width:900px){
  .sitenav{padding:10px 16px;gap:12px}
  .sitenav .brandline{display:none}
  .sitenav .r-btn{white-space:nowrap;padding:10px 16px;font-size:14px}
  /* hero: the woven stage becomes a stack. Copilot scene, then Chloe, then the tagline */
  .wv-stage{height:auto;padding:8px 24px 40px;display:flex;flex-direction:column;align-items:center;gap:18px}
  .wv-frame,.wv-toast,.cur,.wv-stage .sparkle{display:none}
  .wv-cp{position:static;order:1;width:min(380px,100%);min-height:0;margin:0}
  .wv-photo{position:relative;left:auto;top:auto;order:2;transform:none;width:min(340px,100%);margin:0}
  .wv-photo img{height:auto}
  .tagline{position:static;order:3;width:min(380px,100%);left:auto;top:auto;transform:none;margin:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left}
  .tagline b{font-size:26px;line-height:1.2}
  .wv-kpi{display:flex;gap:28px;margin:16px 0 4px}
  .tagline .teamrow{margin-top:12px}
  /* software tour: the pinned frame sits on an opaque band so chapter text never shows through it */
  .plat-top{margin:0 -24px;padding:32px 24px 12px}
  /* The phone nav is 63px tall and opaque, so a 58px offset slid the top of the
     frame underneath it and clipped its rounded corner. */
  .plat-stick{background:var(--surface);padding-bottom:8px;top:68px}
  .plat-stick .pf-cap{margin-top:10px}
}
@media (max-width:600px){
  .calc-ticks span:first-child{display:none}
  .calc-head{flex-direction:column;align-items:flex-start;gap:10px}
}

/* ---------- v52: phone polish. Menu button, steady hero card, pricing path chips, chips that never wrap ---------- */
.navtog{display:none}
@media (max-width:900px){
  .sitenav{position:sticky}
  .navtog{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid var(--outline);border-radius:10px;background:#fff;cursor:pointer;padding:0;flex-shrink:0;position:relative}
  .navtog span,.navtog span::before,.navtog span::after{content:"";display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform 220ms ease,opacity 220ms ease}
  .navtog span{position:relative}
  .navtog span::before{position:absolute;left:0;top:-6px}
  .navtog span::after{position:absolute;left:0;top:6px}
  .sitenav.open .navtog span{background:transparent}
  .sitenav.open .navtog span::before{transform:translateY(6px) rotate(45deg)}
  .sitenav.open .navtog span::after{transform:translateY(-6px) rotate(-45deg)}
  .sitenav .links{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:6px 16px 14px;background:#fff;z-index:60;border-bottom:1px solid var(--outline-soft);box-shadow:0 18px 30px -20px rgba(26,29,38,.35)}
  .sitenav.open .links{display:flex}
  .sitenav .links a{padding:13px 4px;font-size:16px;font-weight:600;border-top:1px solid var(--outline-soft);background-image:none!important}
  .sitenav .links a:first-child{border-top:0}
  .sitenav .r-btn{margin-left:auto}
  /* the Copilot scene is in the flow on phones, so it keeps one height across scenes */
  .wv-cp{min-height:450px}
  .mini-rows .chip,.tm-st,.statuspill{white-space:nowrap}
}
/* ---------- v53: phone tour. The pinned frame never outgrows the screen; every state fits its cap ---------- */
@media (max-width:900px){
  .plat-stick .pf{max-height:max(360px,calc(100vh - 340px));overflow:hidden}
  .plat-stick .pf-body{min-height:0}
  .plat-stick .pf-cap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .plat-stick .pf-cap .livedot{display:inline-block;vertical-align:middle;margin-right:6px}
  .plat-stick .pf-cap b{margin-right:6px}
  .pf[data-state="copilot"] .cv-ctx,.pf[data-state="automations"] .rule-list,.pf .ag-roster,.pf .kb-list,.pf .sh-note{display:none}
  .pf .msg{padding:8px 10px}
  .pf .msg p{font-size:12px;line-height:1.45}
  .chap{padding:18px 0}
  .chap h3{font-size:20px}
  .chap p{font-size:14.5px}
}

/* ---------- v54: legal and utility pages (privacy, terms, data deletion) ---------- */
.legalwrap{max-width:760px;margin:0 auto;padding:72px 24px 96px}
.legal-eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--primary-on-container);background:var(--primary-container);border-radius:999px;padding:5px 14px}
.legalwrap h1{font-size:clamp(32px,5vw,46px);font-weight:800;letter-spacing:-.028em;line-height:1.08;color:var(--ink);margin:18px 0 10px}
.legal-date{font-size:14px;color:var(--muted);margin:0 0 8px}
.legal-lede{font-size:17px;line-height:1.65;color:var(--body);margin:0 0 8px}
.legalwrap h2{font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--ink);margin:36px 0 10px;padding-top:22px;border-top:1px solid var(--outline-soft)}
.legalwrap h2:first-of-type{border-top:0;padding-top:0}
.legalwrap p{font-size:16px;line-height:1.7;color:var(--body);margin:0 0 14px}
.legalwrap ul{margin:0 0 14px;padding-left:20px}
.legalwrap li{font-size:16px;line-height:1.7;color:var(--body);margin-bottom:7px}
.legalwrap a{color:var(--primary-deep);text-decoration:underline;text-underline-offset:2px}
.legal-note{background:var(--card);border:1px solid var(--outline);border-radius:14px;padding:16px 18px;margin:0 0 26px}
.legal-note p{margin:0;font-size:15px}
.legal-back{display:inline-block;margin-top:36px;font-size:15px;font-weight:600;color:var(--primary-deep);text-decoration:none}
.legal-back:hover{text-decoration:underline}
.sitenav.plain .links{display:none}
@media (max-width:900px){ .legalwrap{padding:48px 20px 72px} .sitenav.plain .navtog{display:none} }

/* ---------- v55: footer gained a Legal column ---------- */
footer.sitefoot.big{grid-template-columns:1.9fr 1fr 1fr 1fr 1fr}
@media (max-width:1100px){ footer.sitefoot.big{grid-template-columns:1.6fr 1fr 1fr 1fr} }
@media (max-width:900px){ footer.sitefoot.big{grid-template-columns:1fr 1fr} }

/* ---------- v56: the inbox comes back on phones, above Copilot ---------- */
@media (max-width:900px){
  /* the frame stacks first, so the story reads inbox then Copilot drafting it */
  .wv-frame{display:block;position:static;left:auto;right:auto;top:auto;height:auto;width:100%;order:0;font-size:13px;box-shadow:0 18px 34px -22px rgba(26,29,38,.28)}
  .wv-frame .cur{display:none}
  .wv-body{grid-template-columns:1fr;height:auto}
  /* the left rail turns into a scrolling strip of counts under the header */
  .wv-rail{display:flex;gap:6px;overflow-x:auto;padding:10px 12px;border-right:0;border-bottom:1px solid var(--outline-soft);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .wv-rail::-webkit-scrollbar{display:none}
  .wv-rail p{flex:0 0 auto;white-space:nowrap;padding:5px 11px;border-radius:999px;border:1px solid var(--outline-soft);background:var(--card);font-size:11.5px;font-weight:600;color:var(--body)}
  .wv-rail p.on{border-color:transparent}
  .wv-rail p.rl-h{display:none}
  /* only the four tickets the scenes light up, plus one more for depth */
  .wv-rows .af-row{padding:10px 14px;gap:10px}
  .wv-rows .af-row:nth-child(n+6){display:none}
  .wv-rows .af-main{min-width:0;flex:1}
  .wv-rows .af-who,.wv-rows .af-subj{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wv-rows .af-avatar{width:30px;height:30px}
  .wv-rows .statuspill{flex-shrink:0}
}

/* ---------- v57: on phones the two hero cards stagger and overlap, like the desktop weave ---------- */
@media (max-width:900px){
  .wv-frame{width:94%;align-self:flex-start;padding-bottom:24px}
  /* position:relative is only here to carry z-index, so the desktop offsets
     (top:56px, right:0) must be cleared or the card sits 56px low */
  .wv-cp{width:94%;align-self:flex-end;position:relative;top:auto;right:auto;left:auto;z-index:3;margin-top:-36px}
  /* a plain 1fr track grows to its content's width and the card clips it, so
     the status pills fell off the right edge. minmax(0,1fr) pins it to the card */
  .wv-body{grid-template-columns:minmax(0,1fr)}
  .wv-rows,.wv-rail{min-width:0}
}

/* ---------- v58: the Book a CX workshop page ---------- */
.au-hero{position:relative;background:var(--surface);overflow:hidden}
.au-hero-in{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:64px}
.au-hero h1{font-size:clamp(36px,4.6vw,58px);font-weight:800;letter-spacing:-.03em;line-height:1.06;color:var(--ink);margin:18px 0 16px}
.au-hero h1 em{font-style:normal}
.au-hero .secsub{margin:0 0 22px;max-width:560px}
.au-leave{background:var(--card);border:1px solid var(--outline);border-radius:16px;padding:18px 20px;margin:0 0 24px;max-width:520px}
.au-leave-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.au-leave ul{margin:0;padding:0;list-style:none}
.au-leave li{position:relative;padding-left:26px;font-size:15.5px;font-weight:600;color:var(--ink);margin-bottom:8px}
.au-leave li:last-child{margin-bottom:0}
.au-leave li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;border-radius:50%;background:var(--success-container)}
.au-leave li::after{content:"";position:absolute;left:4px;top:10px;width:6px;height:3px;border-left:1.6px solid var(--success);border-bottom:1.6px solid var(--success);transform:rotate(-45deg)}
.au-hero .herometa{margin-top:18px}
.au-hero-photo{position:relative;border-radius:20px;overflow:hidden;box-shadow:0 34px 64px -30px rgba(26,29,38,.45)}
.au-hero-photo img{display:block;width:100%;height:520px;object-fit:cover;object-position:50% 14%}
.au-hero-photo .creds{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(rgba(26,29,38,0),rgba(26,29,38,.82));color:#fff}
.au-hero-photo .creds b{display:block;font-size:15px;margin-bottom:8px}
.au-hero-photo .cc{display:flex;flex-wrap:wrap;gap:6px}
.au-hero-photo .cc span{font-size:11.5px;font-weight:600;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:4px 10px}
.au-hero-photo .onchip{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.94);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:700;color:var(--ink)}

/* what you leave with */
.au-leavewith{background:var(--card)}
.au-sheet{max-width:940px;margin:34px auto 0;background:var(--surface);border:1px solid var(--outline);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(26,29,38,.3)}
.au-sheet-body{display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:24px}
.au-sheet-col .pv-k{display:block;margin-bottom:14px}
.au-bar{display:grid;grid-template-columns:1fr 96px 42px;align-items:center;gap:10px;margin-bottom:11px;font-size:13.5px;color:var(--body)}
.au-bar i{display:block;height:8px;border-radius:999px;background:var(--outline-soft);position:relative}
.au-bar i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:999px;background:var(--primary)}
.au-bar b{font-size:13px;font-weight:700;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.au-sheet-note{margin:14px 0 0;font-size:13.5px;font-weight:600;color:var(--primary-deep)}
.au-order{margin:0 0 22px;padding-left:20px}
.au-order li{margin-bottom:10px;font-size:13.5px}
.au-order b{display:block;color:var(--ink);font-size:14.5px}
.au-order span{color:var(--muted)}
.au-k2{margin-top:4px}
.au-cost{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--outline-soft);font-size:13.5px;color:var(--body)}
.au-cost b{font-size:15px;font-weight:800;color:var(--ink)}
.au-cost em{font-style:normal;font-size:12px;font-weight:500;color:var(--muted)}
.au-leavewith .kicker{margin-top:20px;text-align:center;font-size:13.5px;color:var(--muted)}

/* the calendar */
.au-book{background:var(--surface);padding:0 0 88px}
.au-book .wrap{padding-bottom:0}
.au-book-grid{display:grid;grid-template-columns:360px 1fr;gap:34px;align-items:start;margin-top:28px}
.au-prep{background:var(--card);border:1px solid var(--outline);border-radius:18px;padding:22px;position:sticky;top:96px}
.au-prep-who{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.au-prep-who img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.au-prep-who b{display:block;font-size:15px;color:var(--ink)}
.au-prep-who span{font-size:13px;color:var(--muted)}
.au-prep-q{margin:0 0 20px;padding-left:14px;border-left:2px solid var(--primary);font-size:14.5px;line-height:1.6;color:var(--body);font-style:italic}
.au-prep-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.au-prep-list{margin:0 0 14px;padding:0;list-style:none}
.au-prep-list li{position:relative;padding-left:16px;margin-bottom:11px;font-size:13.5px;line-height:1.55;color:var(--body)}
.au-prep-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--primary)}
.au-prep-list b{color:var(--ink)}
.au-prep-none{margin:0;font-size:13px;color:var(--muted);border-top:1px solid var(--outline-soft);padding-top:12px}
.au-cal{background:var(--card);border:1px solid var(--outline);border-radius:18px;overflow:hidden;min-height:760px}
.au-cal-fallback{padding:26px;text-align:center;font-size:15px;color:var(--body)}
.au-orline{margin:26px 0 0;text-align:center;font-size:14.5px;color:var(--muted)}
.au-orline a{color:var(--primary-deep)}

@media (max-width:1000px){
  .au-hero-in{grid-template-columns:1fr;gap:32px}
  .au-hero-photo{max-width:420px}
  .au-hero-photo img{height:420px}
  .au-book-grid{grid-template-columns:1fr;gap:22px}
  .au-prep{position:static}
}
@media (max-width:900px){
  .au-hero-in{padding-top:36px;padding-bottom:44px}
  .au-sheet-body{grid-template-columns:1fr;gap:22px}
  .au-bar{grid-template-columns:1fr 70px 38px}
  .au-cal{min-height:0}
  .au-book{padding-bottom:56px}
  .au-hero .ctarow{flex-direction:column;align-items:stretch}
  .au-hero .ctarow .r-btn{width:100%;justify-content:center}
}

/* ---------- v85: FAQ as dropdowns ---------- */
.q{padding:0;border-bottom:1px solid var(--outline-soft);display:block}
.q>summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:14px;padding:15px 0;-webkit-tap-highlight-color:transparent}
.q>summary::-webkit-details-marker{display:none}
.q>summary::marker{content:""}
.q>summary>b{flex:1;min-width:0;font-size:15.5px;font-weight:800;letter-spacing:-.012em;color:var(--ink);line-height:1.35}
.q>summary:hover>b{color:var(--primary-deep)}
.q>summary:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:6px}
.q-ch{flex-shrink:0;width:22px;height:22px;margin-top:1px;border:1px solid var(--outline);border-radius:999px;position:relative;transition:background 200ms ease,border-color 200ms ease,transform 240ms cubic-bezier(.2,.7,.3,1)}
.q-ch::before,.q-ch::after{content:"";position:absolute;top:50%;left:50%;width:9px;height:1.6px;border-radius:2px;background:var(--ink);transition:transform 240ms cubic-bezier(.2,.7,.3,1),opacity 200ms ease}
.q-ch::before{transform:translate(-50%,-50%)}
.q-ch::after{transform:translate(-50%,-50%) rotate(90deg)}
.q[open]>summary .q-ch{background:var(--primary-container);border-color:var(--primary-card-border)}
.q[open]>summary .q-ch::before{background:var(--primary-on-container)}
.q[open]>summary .q-ch::after{opacity:0;transform:translate(-50%,-50%) rotate(0deg)}
.q-in{overflow:hidden}
/* The drawer slides open in CSS, with no JS in the path. The collapse is only ever
   applied where the browser can also animate back out to auto, so there is no engine
   in which a question can end up stuck shut. Everywhere else <details> opens instantly. */
@supports (interpolate-size: allow-keywords) and (selector(::details-content)) {
  .q{interpolate-size:allow-keywords}
  .q::details-content{block-size:0;overflow:hidden;transition:block-size 300ms cubic-bezier(.2,.7,.3,1),content-visibility 300ms allow-discrete}
  .q[open]::details-content{block-size:auto}
  @media (prefers-reduced-motion:reduce){ .q::details-content{transition:none} }
}
.q-body{display:flex;flex-direction:column;gap:8px;padding:0 36px 18px 0}
.q-body p{margin:0;font-size:13.5px;line-height:1.6;color:var(--body)}
.q .q-body a{font-size:13px;font-weight:700;color:var(--primary-on-container);text-decoration:none;align-self:flex-start}
.q .q-body a::after{content:" \2192";font-weight:400}
.q .q-body a:hover{text-decoration:underline}
.qa-col h3{margin-bottom:0}
@media (max-width:900px){
  .qa-grid{gap:26px}
  .q>summary{padding:16px 0}
  .q>summary>b{font-size:16px}
  .q-body{padding-right:8px}
  .q-body p{font-size:14.5px}
}

/* ---------- v85: pricing now sits above the questions, so it needs its own top edge ---------- */
.db-pricing{border-top:1px solid var(--outline-soft)}

/* ---------- v85: phone software tour. One fixed frame height, so nothing under it ever jumps ---------- */
@media (max-width:900px){
  .plat-stick .pf{
    height:clamp(340px,calc(100vh - 296px),452px);
    height:clamp(340px,calc(100svh - 296px),452px);
    max-height:none;
    position:relative;
    overflow:hidden;
    transition:none
  }
  .plat-stick .pf-body{height:100%;min-height:0;overflow:hidden}
  .plat-stick .pf-main{min-height:0;overflow:hidden}
  .plat-stick .pf::after{content:"";position:absolute;left:1px;right:1px;bottom:0;height:34px;border-radius:0 0 15px 15px;pointer-events:none;background:linear-gradient(rgba(255,255,255,0),var(--card) 78%)}
  /* No panel crossfade rule here on purpose: .pv already animates with pvIn from the
     base styles. Re-declaring it with animation-fill-mode:both pinned the panel at
     opacity 0 until the animation engine started it, which read as a blank frame. */
  /* The agent scene is the tallest of the seven. Its customer header repeats what the
     chat already says, so on a phone it goes and the "resolved by Bec" line survives. */
  .plat-stick .pf[data-state="agents"] .cp-cust{display:none}
  .plat-stick .pf[data-state="agents"] .pf-main{display:flex;flex-direction:column;justify-content:flex-end}
  .plat-stick .pf[data-state="agents"]::after{height:22px}
  /* Chapter 01 is about the queue, so on a phone the queue is what it shows. The
     conversation belongs to chapter 02, where Copilot drafts the reply. */
  .plat-stick .pf[data-state="inbox"] .pf-list{display:block!important}
  .plat-stick .pf[data-state="inbox"] .pf-main{display:none}
  .plat-stick .pf[data-state="inbox"] .pf-list .af-row{padding:11px 10px}
  /* The knowledge base reads better with its article list, now the frame has the room. */
  .plat-stick .pf[data-state="kb"] .kb-list{display:flex;flex-direction:column;gap:5px;border-right:0;padding:0 0 10px;margin-bottom:10px;border-bottom:1px solid var(--outline-soft)}
  .plat-stick .pf[data-state="kb"] .kb-list .kb-a:nth-child(n+5){display:none}
}
/* pvIn is defined once, up with .pv. A second @keyframes of the same name here
   silently replaced it for the whole document, so it is deliberately not repeated. */
@media (prefers-reduced-motion:reduce){ .pv{animation:none} }

/* ---------- v59: the calendar runs full width and opens fully, no inner scrolling ---------- */
.au-prep-row{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start;background:var(--card);border:1px solid var(--outline);border-radius:16px;padding:18px 22px;margin:26px 0 22px}
.au-prep-row .au-prep-who{display:flex;align-items:center;gap:12px;margin:0}
.au-prep-row .au-prep-who img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex-shrink:0}
.au-prep-row .au-prep-who b{display:block;font-size:14.5px;color:var(--ink)}
.au-prep-row .au-prep-who span{font-size:12.5px;color:var(--muted)}
.au-prep-items{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
.au-prep-items li{position:relative;padding-left:15px;font-size:13px;line-height:1.5;color:var(--muted)}
.au-prep-items li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--primary)}
.au-prep-items b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:2px}
/* no card around the calendar: Calendly paints its own white, so any spare
   height reads as page space instead of an empty box */
.au-cal{background:none;border:0;border-radius:0;overflow:visible;min-height:0}
.au-cal .calendly-inline-widget{height:760px}
.au-cal .calendly-inline-widget.sized{height:auto}
.au-cal iframe{display:block;border-radius:16px}
@media (max-width:900px){
  .au-prep-row{grid-template-columns:1fr;gap:16px;padding:16px 18px}
  .au-prep-items{grid-template-columns:1fr;gap:12px}
  .au-cal .calendly-inline-widget{height:1180px}
}
@media (max-width:600px){
  .au-cal .calendly-inline-widget{height:1280px}
}

/* ---------- v86: review fixes ---------- */
/* A phone in landscape is ~375px tall. The pinned frame plus its caption is taller
   than that, so it covered the whole screen AND pushed pick()'s reference line
   behind it, driving the tour from a chapter nobody could see. Below that height
   the frame stops pinning and the section reads as a plain stack. */
@media (max-width:900px) and (max-height:560px){
  .plat-stick{position:static;background:none;padding-bottom:0}
  .plat-stick .pf{height:auto;max-height:none}
  .plat-stick .pf::after{display:none}
  .plat-stick .pf-body,.plat-stick .pf-main{height:auto;overflow:visible}
}
/* Failsafe for the question drawers: if the block-size transition ever fails to
   run, site.js sets this and the answers open instantly instead of staying shut. */
.no-details-anim .q::details-content{transition:none}

/* ---------- v60: legal column removed, footer back to four tracks ---------- */
footer.sitefoot.big{grid-template-columns:1.9fr repeat(3,1fr)}
@media (max-width:1100px){ footer.sitefoot.big{grid-template-columns:1.6fr repeat(3,1fr)} }
@media (max-width:900px){ footer.sitefoot.big{grid-template-columns:1fr 1fr} }

/* ---------- v61: "Launching soon" badge on the AI agents ---------- */
.soonbadge{display:inline-flex;align-items:center;gap:5px;vertical-align:middle;background:#fbf0db;color:#8a6520;border:1px solid #f0dfb8;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:700;letter-spacing:.01em;line-height:1.3;white-space:nowrap;font-style:normal;text-transform:none}
.soonbadge::before{content:"";width:5px;height:5px;border-radius:50%;background:#c2843a;flex-shrink:0}
.soonbadge.sm{padding:2px 7px;font-size:10px}
h3 .soonbadge,b .soonbadge{position:relative;top:-2px}
.flow .soonbadge,.who .soonbadge{background:rgba(240,223,184,.14);color:#e6cf9a;border-color:rgba(240,223,184,.28)}
.flow .soonbadge::before,.who .soonbadge::before{background:#e0b464}
@media (max-width:900px){ .soonbadge{font-size:10.5px;padding:2px 8px} .tm .soonbadge{display:none} }

/* ---------- v62: the sky comes to phones. Plane flies in from off screen, clouds drift ---------- */
.skym{display:none}
@media (max-width:900px){
  /* the desktop sky stays off: its plane is a squiggle at this width and its
     clouds are fixed px, so they hang off the edge. This is the portrait one. */
  .sky{display:none}
  .skym{display:block;position:absolute;left:0;right:0;top:0;height:600px;z-index:0;pointer-events:none;overflow:hidden;
    --ink:#b3a4ff;--paper:#f5f2ff;--plane:#9d8bff;--pfill:#f7f5ff;--gull:#c0b3ff;
    -webkit-mask-image:linear-gradient(#000 0,#000 62%,rgba(0,0,0,0) 96%);
    mask-image:linear-gradient(#000 0,#000 62%,rgba(0,0,0,0) 96%)}
  .skym svg{position:absolute;overflow:visible}
  .skym use{fill:var(--paper);stroke:var(--ink);stroke-width:2;stroke-linejoin:round;vector-effect:non-scaling-stroke}
  /* clouds sit at the edges and in the gaps, never behind the headline */
  .skym-cloud.c1{left:-14px;top:34px;opacity:.62}
  .skym-cloud.c2{right:-30px;top:96px;opacity:.5}
  .skym-cloud.c3{left:-46px;top:330px;opacity:.44}
  .skym-cloud.c4{right:-8px;top:430px;opacity:.5}
  .skym-birds{left:26px;top:214px;opacity:.5}
  .skym-birds path{fill:none;stroke:var(--gull);stroke-width:1.6;stroke-linecap:round}
  /* the plane's own canvas, sized for a narrow screen */
  .skym-planewrap{left:0;top:0;width:100%;height:260px}
  .skym-plane path{fill:none;stroke:var(--plane);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
  .skym-plane path.drawn{fill:var(--pfill)}
  .skym-plane .win{stroke:var(--ink);opacity:.55}
  .skym-plane .trail{stroke:url(#skymTrail);stroke-width:1.6}
  .skym-tip{fill:#2f9d6b;stroke:none}
  .skym-cockpit{fill:#2f9d6b;stroke:none;opacity:.75}
  /* the hero text and the product cards sit above the sky */
  .rx-hero .hero-text,.rx-hero .wv-stage{position:relative;z-index:1}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  /* the plane starts off the left edge, crosses, climbs slightly, and leaves.
     Then a long quiet gap before it comes round again. */
  .skym-plane{offset-path:path('M -80 78 L 484 16');offset-rotate:auto;opacity:.92;
    animation:skymFly 34s linear infinite;animation-delay:1.4s;animation-fill-mode:backwards}
  /* the crossing takes 34% of the cycle, about 11.5s, which is 30% quicker than
     the 15s it used to take. The cycle stays 34s so it appears just as often. */
  @keyframes skymFly{
    0%{offset-distance:0%;opacity:0}
    3%{opacity:1}
    29%{opacity:1}
    34%{offset-distance:100%;opacity:0}
    100%{offset-distance:100%;opacity:0}
  }
  .skym-tip{animation:skymBlink 2.4s ease-in-out infinite}
  @keyframes skymBlink{0%,100%{opacity:1}50%{opacity:.25}}
  .skym-cloud{animation:skymDrift var(--d,150s) linear infinite;animation-delay:var(--dd,0s)}
  .skym-cloud.c1{--d:190s;--dd:-40s}
  .skym-cloud.c2{--d:240s;--dd:-150s}
  .skym-cloud.c3{--d:165s;--dd:-90s}
  .skym-cloud.c4{--d:210s;--dd:-20s}
  @keyframes skymDrift{from{transform:translateX(-30vw)}to{transform:translateX(130vw)}}
  .skym-birds .wing{animation:flap 1.1s ease-in-out infinite;transform-origin:12px 7px}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  /* a still, composed sky: the plane parked mid flight where it looks best */
  .skym-plane{transform:translate(206px,44px) rotate(-6deg);opacity:.92}
  .skym-plane .trail{opacity:.55}
}

/* ---------- v63: a real corridor of sky above the hero text for the plane ---------- */
@media (max-width:900px){
  .hero-text{padding:112px 24px 24px}
  /* clouds keep the plane company in the same band, then thin out lower down */
  .skym-cloud.c1{left:-16px;top:18px;opacity:.6}
  .skym-cloud.c2{right:-34px;top:118px;opacity:.42}
  .skym-cloud.c3{left:-50px;top:372px;opacity:.4}
  .skym-cloud.c4{right:-10px;top:476px;opacity:.46}
  .skym-birds{left:30px;top:250px;opacity:.42}
}

/* ---------- v64: the headline carries a full sentence now, so it needs its own scale ---------- */
.heroline.long{font-size:clamp(30px,3.5vw,46px);letter-spacing:-.022em;line-height:1.12}
.hero-text .heroline.long{font-size:clamp(30px,3.9vw,52px)}
@media (max-width:900px){
  .hero-text .heroline.long{font-size:clamp(28px,7.4vw,36px);line-height:1.14}
  .rx-hero .sub{font-size:16px}
}

/* ---------- v65: step five now shows four endings, so the rows get tighter ---------- */
.mini-opts.four{display:grid;gap:7px}
.mini-opts.four .mini-opt{padding:7px 9px;gap:9px}
.mini-opts.four .mini-opt .av{width:24px;height:24px}
.mini-opts.four .mini-opt .avs .av{width:22px;height:22px}
.mini-opts.four .mini-opt b{font-size:12.5px}
.mini-opts.four .mini-opt span{font-size:11px}
.mini-opts.four .tm-ini{width:24px;height:24px;font-size:11px;flex-shrink:0}

/* ---------- v66: phone hero, left aligned with a taller sky, to Tom's layout ---------- */
@media (max-width:900px){
  /* everything in the hero text ranges left instead of centring */
  .hero-text{align-items:flex-start;text-align:left;padding:200px 24px 24px;gap:16px}
  .hero-text .sub{max-width:none;margin:0}
  .hero-text .heroline.long{margin:2px 0 0}
  /* the sky gets the room the mockup gives it, and the plane is drawn bigger */
  .skym{height:700px}
  .skym-planewrap{height:330px}
  .skym-cloud.c1{left:-30px;top:52px;width:150px!important;opacity:.55}
  .skym-cloud.c2{right:-46px;top:18px;width:160px!important;opacity:.5}
  .skym-cloud.c3{left:-40px;top:452px;width:140px!important;opacity:.34}
  .skym-cloud.c4{right:-16px;top:560px;width:96px!important;opacity:.4}
  .skym-birds{left:64px;top:160px;width:62px!important;opacity:.45}
  /* primary fills the width, secondary drops to a link */
  .hero-text .ctarow{flex-direction:column;align-items:stretch;width:100%;gap:16px;margin-top:10px}
  .hero-text .ctarow .r-btn.grad{width:100%;justify-content:center;padding:19px 20px;font-size:17px;border-radius:14px}
  .hero-text .ctarow .r-btn.ghost{width:auto;align-self:flex-start;background:none;border:0;box-shadow:none;padding:0;font-size:16.5px;font-weight:700;color:var(--primary-deep)}
  .hero-text .ctarow .r-btn.ghost::after{content:"\2192";margin-left:12px;font-weight:600}
  /* the credit line picks up the green dot from the mockup */
  .hero-text .herometa{position:relative;padding-left:19px;text-align:left;font-size:13.5px;line-height:1.5;margin-top:4px}
  .hero-text .herometa::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--success)}
}

/* ---------- v67: chip on top, then the sky, then the headline, as in the mockup ---------- */
@media (max-width:900px){
  /* the chip sits just under the nav; the sky opens in the gap beneath it */
  .hero-text{padding:22px 24px 24px;gap:0}
  .hero-text .pillchip{margin-bottom:0}
  .hero-text .heroline.long{margin:206px 0 0}
  .hero-text .sub{margin:16px 0 0}
  .hero-text .ctarow{margin-top:24px}
  .hero-text .herometa{margin-top:16px}
  /* the sky now occupies the corridor between the chip and the headline */
  .skym{top:70px;height:620px}
  .skym-planewrap{top:0;height:250px}
  .skym-cloud.c1{left:-34px;top:26px;width:158px!important;opacity:.5}
  .skym-cloud.c2{right:-50px;top:6px;width:150px!important;opacity:.42}
  .skym-cloud.c3{left:-44px;top:392px;width:140px!important;opacity:.3}
  .skym-cloud.c4{right:-18px;top:500px;width:92px!important;opacity:.36}
  .skym-birds{left:52px;top:150px;width:56px!important;opacity:.4}
}
@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  /* the flight band moves with it: in low from the left, out high to the right */
  .skym-plane{offset-path:path('M -90 168 L 486 44')}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .skym-plane{transform:translate(196px,96px) rotate(-7deg)}
}

/* ---------- v68: two clouds in the corridor, nothing smudging behind the button ---------- */
@media (max-width:900px){
  .skym{height:400px;-webkit-mask-image:linear-gradient(#000 0,#000 72%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(#000 0,#000 72%,rgba(0,0,0,0) 100%)}
  .skym-cloud.c1{left:-38px;top:24px;width:162px!important;opacity:.5}
  .skym-cloud.c2{right:-26px;top:96px;width:124px!important;opacity:.34}
  .skym-cloud.c3,.skym-cloud.c4{display:none}
  .skym-birds{left:56px;top:186px;width:54px!important;opacity:.38}
}

/* ---------- v69: the right hand cloud was too faint to read ---------- */
@media (max-width:900px){
  .skym-cloud.c2{right:-34px;top:0;width:132px!important;opacity:.46}
}

/* ---------- v70: the workshop headline's second half takes the same shine as the home page accent ---------- */
.au-hero h1 em{font-style:normal;position:relative;display:inline-block;color:transparent;
  background:linear-gradient(110deg,#6d5ef0 0%,#6d5ef0 30%,#8f7bff 42%,#e9e2ff 50%,#8f7bff 58%,#6d5ef0 70%,#6d5ef0 100%);
  background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@media (prefers-reduced-motion:no-preference){
  .au-hero h1 em{animation:shineSweep 5.5s cubic-bezier(.4,0,.2,1) infinite}
}