/* Everything below the first screen. Loaded without blocking render; see site.css for tokens. */

/* ============================================================
   Product demo. .stage.is-live turns on the animated, fixed-height view.
   Without it (no JS, reduced motion) everything sits still in its final frame.
   ============================================================ */
.demo{overflow:clip}
.demo::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(40% 42% at 12% 40%, #DCEBFA 0%, rgba(220,235,250,0) 72%),
    radial-gradient(36% 40% at 90% 62%, rgba(245,166,35,.16) 0%, rgba(245,166,35,0) 72%),
    radial-gradient(44% 30% at 62% 14%, #EAF3FB 0%, rgba(234,243,251,0) 72%)}
.demo-panel{border-radius:32px; padding:10px}
.demo-panel::after{display:none}
.demo-top{display:flex; align-items:center; gap:8px}
.demo-tabs{position:relative; flex:1; min-width:0; display:grid; grid-template-columns:repeat(3,1fr); border-radius:20px; padding:4px; background:rgba(13,27,42,.05)}
.tab-thumb{position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px)/3); border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(13,27,42,.08), 0 8px 18px -10px rgba(13,27,42,.26); transition:transform var(--t-spring) var(--spring)}
.demo-tab{position:relative; z-index:1; min-height:48px; padding:0 8px; border-radius:16px; overflow:hidden; font:600 .9375rem/1.2 var(--bodyf); letter-spacing:-.008em; color:var(--ink-2); transition:color .2s ease}
.demo-tab[aria-selected="true"]{color:var(--ink)}
.tab-bar{position:absolute; left:14px; right:14px; bottom:5px; height:2.5px; border-radius:2px; overflow:hidden; opacity:0; background:rgba(13,27,42,.08); transition:opacity .2s ease}
.tab-bar b{display:block; width:100%; height:100%; border-radius:2px; background:var(--amber); transform-origin:0 50%; transform:scaleX(0); transition:transform 130ms linear}
.demo-tab[aria-selected="true"] .tab-bar{opacity:1}
.demo-toggle{flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:rgba(13,27,42,.05); color:var(--ink); transition:transform .16s var(--ease-out)}
.demo-toggle:active{transform:scale(.94)}
.demo-toggle .i-play{display:none}
.demo-toggle[aria-pressed="true"] .i-play{display:block}
.demo-toggle[aria-pressed="true"] .i-pause{display:none}
.demo-note{padding:10px 10px 4px; font-size:.8125rem; color:var(--ink-2); text-align:center}
.i{width:18px; height:18px; flex:none}

.stage{position:relative; margin-top:10px; border-radius:24px; background:rgba(248,249,251,.74); box-shadow:inset 0 0 0 1px rgba(13,27,42,.05); overflow:hidden}
@media (prefers-reduced-motion:no-preference){ .js .stage{height:560px} }
.stage.is-live{contain:strict}

/* orb dock: one orb travels between scenes */
.orb-dock{position:absolute; left:0; top:0; z-index:6; width:0; height:0; pointer-events:none; opacity:0; transition:transform 700ms var(--spring), opacity .4s ease}
.stage.is-live .orb-dock.is-ready{opacity:1}
.orb-host{position:relative; width:0; height:0}
.orb-host{position:relative}
.orb-still,.orb-canvas{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:none; pointer-events:none}
.orb-still{height:auto; transition:opacity .25s ease}
.orb-canvas{opacity:0; transition:opacity .25s ease}
.orb-slot{display:block; flex:none; width:56px; height:56px; border-radius:50%}
.orb-slot-sm{width:36px; height:36px}
.orb-slot-lg{width:112px; height:112px}
.stage:not(.is-live) .orb-slot{display:none}

/* scenes */
.scene{position:relative; display:block}
.js .scene:not(.is-on){display:none}
.stage.is-live .scene{position:absolute; inset:0; display:block; opacity:0; visibility:hidden; transform:scale(.985); transition:opacity .35s ease, transform var(--t-spring) var(--spring), visibility 0s linear .35s}
.stage.is-live .scene.is-on{opacity:1; visibility:visible; transform:none; transition:none; animation:sceneIn .42s var(--ease-out) both}
@keyframes sceneIn{from{opacity:0; transform:scale(.985)} to{opacity:1; transform:none}}
.stage.is-live .scene{contain:strict}
.stage.is-live .scene.is-parked{content-visibility:hidden}
.scene:focus-visible{outline-offset:-3px}

/* step system: data-at elements appear when the timeline reaches them */
[data-off]:not(.on){opacity:0}
.armed [data-at]{transition:opacity .34s var(--ease-out), transform var(--t-spring) var(--spring)}
.armed [data-at]:not(.on){opacity:0; transform:translate3d(0,8px,0)}
.armed .pop:not(.on){opacity:0; transform:translate3d(0,10px,0) scale(.94)}
.armed .pop{transition:opacity .28s var(--ease-out), transform var(--t-bounce) var(--spring-bounce)}
.armed .typed{visibility:hidden}
.armed .typed.is-typing{visibility:visible}
.armed .tc{visibility:hidden}
.armed .tc.v{visibility:visible}
.armed .tc.cur{box-shadow:1.5px 0 0 var(--amber)}
.swap{display:grid}
.swap > *{grid-area:1/1}

/* 2A */
.inq{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:12px}
.stage.is-live .inq{position:absolute; inset:0}
.ch{position:relative; display:flex; flex-direction:column; min-width:0; padding:14px; border-radius:20px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.05), var(--shadow-sm); transition:opacity .4s ease, transform var(--t-spring) var(--spring), box-shadow .4s ease}
.ch-h{display:flex; align-items:center; gap:8px; margin-bottom:12px; font:600 .9375rem/1 var(--display); letter-spacing:-.01em; color:var(--ink-2)}
.stage.is-live .inq[data-ch="call"] .ch-call, .stage.is-live .inq[data-ch="sms"] .ch-sms, .stage.is-live .inq[data-ch="web"] .ch-web{box-shadow:0 0 0 1.5px rgba(245,166,35,.75), var(--shadow-md)}
.stage.is-live .inq[data-ch="inbox"] .ch{opacity:.34; transform:scale(.985)}
.call-top{display:flex; align-items:center; gap:10px; min-height:56px}
.av{position:relative; flex:none; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--sky-2); font:600 .875rem/1 var(--display); color:var(--ink)}
.ringer{position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 2px var(--amber); transition:none !important}
.ringer.on{animation:ringer 1s var(--ease-out) infinite}
@keyframes ringer{0%{transform:scale(1); opacity:.9} 100%{transform:scale(1.55); opacity:0}}
.caller{flex:1; min-width:0; display:grid; gap:1px; font-size:.875rem; color:var(--ink-2)}
.caller b{font:600 1rem/1.25 var(--display); color:var(--ink)}
.swap-b{font-weight:600; color:var(--ink)}
.ts{display:grid; gap:9px; margin-top:12px; font-size:.875rem; line-height:1.38; color:var(--ink)}
.ts li{display:grid; gap:1px}
.ts b{font-size:.75rem; font-weight:600; color:var(--ink-2)}
.ts-them{padding-left:14px; border-left:2px solid var(--line)}
.jobcard{display:grid; margin-top:auto; padding:11px 13px; border-radius:14px; background:var(--ink); color:#fff; box-shadow:var(--shadow-md)}
.jobcard-k{font-size:.75rem; font-weight:600; color:var(--amber)}
.jobcard b{font:600 1.125rem/1.2 var(--display); letter-spacing:-.012em}
.jobcard-s{font-size:.8125rem; color:#C8D3DE}
.tick-line{display:flex; align-items:center; gap:7px; margin-top:9px; font-size:.875rem; font-weight:500; color:var(--green)}
.phone{position:relative; flex:1; min-height:0; display:flex; flex-direction:column; padding:10px 10px 12px; border-radius:24px; background:#F4F2EC; box-shadow:inset 0 0 0 1.5px rgba(13,27,42,.12)}
.phone-notch{position:absolute; left:50%; top:6px; width:52px; height:5px; margin-left:-26px; border-radius:4px; background:rgba(13,27,42,.2)}
.phone-bar{display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:6px 4px 6px 6px; font:600 .9375rem/1 var(--display)}
.bubbles{display:flex; flex-direction:column; gap:7px; min-height:0}
.bub{max-width:88%; padding:8px 11px; border-radius:15px; font-size:.875rem; line-height:1.32}
.bub-them{align-self:flex-start; background:#fff; color:var(--ink); border-bottom-left-radius:5px; box-shadow:0 1px 1px rgba(13,27,42,.05)}
.bub-us{align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:5px}
.tapchips{display:flex; justify-content:flex-end; gap:6px}
.tapchip{display:inline-flex; align-items:center; min-height:30px; padding:0 11px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px rgba(13,27,42,.16); font-size:.8125rem; font-weight:600}
.armed .tapchip[data-at]:not(.on){opacity:1; transform:none}
.tapchip[data-at].on{background:var(--amber); box-shadow:none; transform:scale(.96)}
.pill-done{display:inline-flex; align-items:center; align-self:center; gap:6px; min-height:30px; padding:0 12px; border-radius:999px; background:rgba(30,122,70,.1); color:var(--green); font-size:.8125rem; font-weight:600}
.browser{flex:1; min-height:0; display:flex; flex-direction:column; border-radius:14px; overflow:hidden; box-shadow:inset 0 0 0 1.5px rgba(13,27,42,.1)}
.browser-bar{display:flex; align-items:center; gap:5px; height:32px; padding:0 10px; background:#F4F2EC}
.browser-bar i{width:8px; height:8px; border-radius:50%; background:rgba(13,27,42,.18)}
.browser-bar span{flex:1; margin-left:6px; padding:2px 8px; border-radius:7px; background:#fff; font-size:.6875rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.browser-page{position:relative; flex:1; min-height:300px; display:flex; flex-direction:column; gap:8px; padding:12px; background:#fff}
.sk{display:block; border-radius:6px; background:#EFEDE7}
.sk-a{height:58px; background:linear-gradient(120deg,var(--sky),var(--sky-2))}
.sk-b{height:9px; width:70%}.sk-c{height:9px; width:88%}.sk-d{height:9px; width:48%}
.widget{position:absolute; right:8px; left:8px; bottom:8px; display:flex; flex-direction:column; gap:7px; padding:10px; border-radius:16px; background:#FBFAF7; box-shadow:0 0 0 1px rgba(13,27,42,.06), var(--shadow-md); transform-origin:100% 100%}
.armed .widget:not(.on){opacity:0; transform:translate3d(0,14px,0) scale(.94)}
.widget-h{display:flex; align-items:center; justify-content:space-between; min-height:36px; font:600 .875rem/1 var(--display)}
.widget .bub{font-size:.8125rem; padding:7px 10px}
.widget .pill-done{min-height:28px}
.inbox{display:none}
.stage:not(.is-live) .inbox{display:block; grid-column:1/-1}
.inbox{padding:14px 16px; border-radius:22px; background:rgba(255,255,255,.9); border:1px solid #fff; box-shadow:inset 0 1px 0 #fff, 0 0 0 1px rgba(13,27,42,.05), var(--shadow-lg)}
.stage.is-live .inbox{display:block; position:absolute; left:50%; top:50%; width:min(560px,calc(100% - 28px)); margin-left:calc(min(560px,calc(100% - 28px))/-2); margin-top:-136px; z-index:4}
.armed .inbox:not(.on){opacity:0; transform:translate3d(0,22px,0) scale(.97); pointer-events:none}
.inbox-h{display:flex; align-items:center; gap:10px; min-height:44px; margin-bottom:6px}
.inbox-h h3{font-size:1.25rem; flex:1}
.inbox-n{min-height:26px; display:inline-flex; align-items:center; padding:0 10px; border-radius:999px; background:var(--amber); color:var(--ink); font-size:.8125rem; font-weight:600}
.inbox li{display:flex; align-items:center; gap:12px; padding:10px 0; border-top:1px solid var(--line)}
.ch-ic{display:grid; place-items:center; flex:none; width:38px; height:38px; border-radius:12px; background:var(--sky); color:var(--ink)}
.inbox li div{flex:1; min-width:0; display:grid; font-size:.875rem; color:var(--ink-2); line-height:1.3}
.inbox li b{font:600 1rem/1.25 var(--display); color:var(--ink)}
.inbox li em{font-style:normal; font-size:.875rem; font-weight:600; color:var(--ink); text-align:right}

/* 2B */
.sched{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto; gap:12px; padding:12px}
.stage.is-live .sched{position:absolute; inset:0}
.cal{grid-row:1/3; display:flex; flex-direction:column; min-height:0; padding:12px 14px 14px; border-radius:20px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.05), var(--shadow-sm)}
.cal-h{display:flex; align-items:center; gap:10px; min-height:44px; margin-bottom:8px}
.say{flex:1; min-width:0; display:grid; font:600 1.0625rem/1.25 var(--display); letter-spacing:-.012em}
.say > *{grid-area:1/1}
.say-warn{color:var(--red)}
.cal-grid{flex:1; min-height:0; display:flex; flex-direction:column; --hr:40px}
.cal-days{display:grid; grid-template-columns:repeat(5,1fr); padding-left:24px; font-size:.8125rem; font-weight:500; color:var(--ink-2); text-align:center; margin-bottom:6px}
.cal-days .is-today{color:var(--ink); font-weight:700}
.cal-body{position:relative; flex:1; min-height:calc(var(--hr)*10); padding-left:24px}
.cal-hr{position:absolute; left:0; right:0; top:calc(var(--t)*var(--hr)); border-top:1px solid var(--line); font-size:.75rem; line-height:1; color:var(--ink-2); padding-top:3px}
.cal-cols{position:absolute; left:24px; right:0; top:0; bottom:0}
.blk,.clash{position:absolute; left:calc(var(--d)*20% + 2px); width:calc(20% - 4px); top:calc(var(--t)*var(--hr)); height:calc(var(--h)*var(--hr) - 3px); border-radius:9px}
.blk{padding:5px 7px; overflow:hidden; background:var(--sky); font-size:.75rem; font-weight:500; line-height:1.2; color:var(--ink)}
.blk-tom{transition:transform var(--t-spring) var(--spring), background-color .3s ease; background:var(--sky-2)}
.blk-tom.is-moved{transform:translate3d(0,calc(var(--hr)*.5),0); background:#fff; box-shadow:inset 0 0 0 1.5px var(--amber)}
.blk-new{z-index:2; background:var(--amber); color:var(--ink); font-weight:600; box-shadow:0 8px 18px -8px rgba(138,90,0,.7); transition:transform 620ms var(--spring-bounce), opacity .3s ease}
.blk-new[data-pos="hover"]{transform:translate3d(0,calc(var(--hr)*-.42),0) scale(1.06)}
.blk-new[data-pos="clash"]{transform:translate3d(0,calc(var(--hr)*1.5),0) scale(1.02)}
.clash{z-index:1; background:rgba(179,50,31,.14); box-shadow:inset 0 0 0 1.5px var(--red); transition:opacity .2s ease}
.clash.on{animation:clashFlash .34s ease-in-out 3}
@keyframes clashFlash{50%{opacity:.35}}
.map{position:relative; min-height:0; border-radius:20px; overflow:hidden; background:#EDF3F9; box-shadow:0 0 0 1px rgba(13,27,42,.05), var(--shadow-sm)}
.map-svg{position:absolute; inset:0; width:100%; height:100%}
.leg{fill:none; stroke:var(--ink); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; transition:stroke-dashoffset 900ms var(--ease-io), stroke .3s ease}
.armed .leg{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 900ms var(--ease-io), stroke .3s ease}
.armed .leg:not(.on){opacity:1; transform:none}
.armed .leg.on{stroke-dashoffset:0}
.armed .leg-a.is-bad{stroke:var(--red)}
.pin{position:absolute; left:var(--x); top:var(--y); display:grid; place-items:center; width:28px; height:28px; margin:-14px 0 0 -14px; border-radius:50%; background:var(--amber); color:var(--ink); font:700 .875rem/1 var(--display); box-shadow:0 0 0 3px #fff, 0 6px 14px -4px rgba(13,27,42,.45)}
.armed .pin:not(.on){opacity:0; transform:scale(.6)}
.armed .pin{transition:opacity .2s ease, transform var(--t-bounce) var(--spring-bounce)}
.leg-tag{position:absolute; left:var(--x); top:var(--y); display:grid; justify-items:center; padding:5px 10px; border-radius:11px; background:#fff; font-size:.75rem; font-weight:600; line-height:1.25; white-space:nowrap; box-shadow:var(--shadow-sm); transform:translate3d(-50%,0,0) !important}
.armed .leg-tag:not(.on){opacity:0}
.leg-warn{color:var(--red); max-height:1.3em}
.leg-tag.is-fixed .leg-warn{display:none}
.next{display:flex; align-items:center; gap:10px; justify-content:space-between; padding:12px 14px; border-radius:20px; background:var(--ink); color:#fff; box-shadow:var(--shadow-md)}
.next-t{display:grid; min-width:0; font-size:.8125rem; color:#C8D3DE; line-height:1.3}
.next-t b{font:600 1.125rem/1.25 var(--display); color:#fff; letter-spacing:-.012em}
.next-t > span{color:var(--amber); font-weight:600}
.next-a{display:flex; gap:6px; flex:none}
.mini-btn{display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 12px; border-radius:999px; background:rgba(255,255,255,.12); font-size:.8125rem; font-weight:600; color:#fff}
.mini-btn-p{background:var(--amber); color:var(--ink)}
.mini-btn .i{width:15px; height:15px}

/* 2C */
.qi{position:relative}
.stage.is-live .qi{position:absolute; inset:0}
.q-part{display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1fr); gap:16px; padding:16px; align-items:center}
.stage.is-live .q-part{position:absolute; inset:0}
.q-left{display:grid; justify-items:center; gap:18px; text-align:center; padding:8px 12px}
.you{min-height:3.1em; max-width:340px; font:600 clamp(1.25rem,1.05rem + .8vw,1.625rem)/1.24 var(--display); letter-spacing:-.018em; text-wrap:balance}
.q-think{display:grid; justify-items:center; min-height:1.6em; font-size:.9375rem; font-weight:600; color:var(--amber-deep)}
.q-think > span{grid-area:1/1}
.q-think .on{animation:thinkPulse 1.1s ease-in-out infinite}
@keyframes thinkPulse{50%{opacity:.5}}
.doc{display:flex; flex-direction:column; align-self:stretch; padding:16px 18px; border-radius:22px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.05), var(--shadow-md)}
.doc-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:10px; border-bottom:1px solid var(--line); font-size:.875rem; color:var(--ink-2)}
.doc-title b{font:600 1.1875rem/1.2 var(--display); letter-spacing:-.014em; color:var(--ink)}
.doc-lines{display:grid; gap:0}
.doc-lines li{display:flex; justify-content:space-between; gap:12px; padding:7px 0; font-size:.9375rem; color:var(--ink-2)}
.doc-lines b{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
.doc-total{margin-top:2px; padding-top:9px !important; border-top:1px solid var(--line); color:var(--ink) !important; font-weight:600}
.doc-total b{font:650 1.25rem/1.1 var(--display); letter-spacing:-.012em}
.track{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:12px}
.track li{display:flex; align-items:center; gap:6px; min-height:32px; padding:0 8px; border-radius:10px; background:var(--sky); font-size:.8125rem; font-weight:600}
.track i{flex:none; width:8px; height:8px; border-radius:50%; background:var(--amber)}
.doc-dep{margin-top:8px; font-size:.875rem; font-weight:600; color:var(--green)}
.paid{display:flex; align-items:center; justify-content:center; gap:9px; margin-top:auto; min-height:52px; padding:0 14px; border-radius:15px; background:rgba(30,122,70,.1); color:var(--green); font:650 1.0625rem/1 var(--display); letter-spacing:-.01em}
.tick-draw path{stroke-dasharray:1; stroke-dashoffset:0}
.armed .paid:not(.on) .tick-draw path{stroke-dashoffset:1}
.armed .paid.on .tick-draw path{stroke-dashoffset:0; transition:stroke-dashoffset .46s var(--ease-out) .12s}

/* no-JS and reduced motion: the final frames, stacked */
.stage:not(.is-live) .sched{grid-template-columns:1fr}
.stage:not(.is-live) .cal{grid-row:auto}
.stage:not(.is-live) .map{height:240px}
.stage:not(.is-live) .q-part{grid-template-columns:1fr}
.stage:not(.is-live) .blk-tom{transform:translate3d(0,calc(var(--hr)*.5),0); background:#fff; box-shadow:inset 0 0 0 1.5px var(--amber)}
.stage:not(.is-live) .leg-warn{display:none}

@media (max-width:979px){
  .stage.is-live .inq{display:block; padding:10px}
  .stage.is-live .ch{position:absolute; left:10px; right:10px; top:10px; bottom:10px}
  .stage.is-live .inq .ch{opacity:0; visibility:hidden; transform:translate3d(28px,0,0); transition:opacity .3s ease, transform var(--t-spring) var(--spring), visibility 0s linear .3s}
  .stage.is-live .inq[data-ch="call"] .ch-call, .stage.is-live .inq[data-ch="sms"] .ch-sms, .stage.is-live .inq[data-ch="web"] .ch-web{opacity:1; visibility:visible; transform:none; transition:opacity .3s ease .05s, transform var(--t-spring) var(--spring) .05s, visibility 0s}
  .stage.is-live .inq[data-ch="sms"] .ch-call, .stage.is-live .inq[data-ch="web"] .ch-call, .stage.is-live .inq[data-ch="web"] .ch-sms{transform:translate3d(-28px,0,0)}
  .inq{grid-template-columns:1fr}
  .browser-page{min-height:340px}
  .sched{grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 170px auto}
  .cal{grid-row:auto; padding:10px 12px 12px}
  .q-part{grid-template-columns:1fr; gap:10px; padding:10px; align-content:start}
  .q-left{grid-template-columns:auto 1fr; justify-items:start; text-align:left; gap:4px 12px; padding:2px}
  .q-left .orb-slot{grid-row:1/3; width:64px; height:64px}
  .you{min-height:2.5em; font-size:1.0625rem; max-width:none}
  .q-think{justify-items:start; font-size:.875rem}
  .doc{padding:12px 14px}
  .doc-lines li{padding:5px 0; font-size:.875rem}
  .paid{min-height:44px; margin-top:8px; font-size:.9375rem}
  .track{margin-top:8px}
}
@media (max-width:979px) and (prefers-reduced-motion:no-preference){ .js .stage{height:640px} }
@media (max-width:767px){
  .demo-panel{border-radius:26px; padding:8px}
  .demo-tab{font-size:.8125rem; padding:0 6px; min-height:52px}
  .tab-bar{left:10px; right:10px}
  .demo-toggle{width:40px; height:40px}
  .demo-top{gap:6px}
  /* calendar: three days on a phone */
  .cal-days{grid-template-columns:repeat(3,1fr)}
  .cal-days span:nth-child(1),.cal-days span:nth-child(5){display:none}
  .blk,.clash{left:calc((var(--d) - 1)*33.33% + 2px); width:calc(33.33% - 4px)}
  .cal-grid{--hr:27px}
  .say{font-size:.9375rem}
  .next{flex-wrap:wrap}
  .next-a{width:100%}
  .mini-btn{flex:1; justify-content:center}
  .blk{font-size:.6875rem; padding:3px 5px}
  .blk[style*="--d:0"],.blk[style*="--d:4"]{display:none}
}

/* ---------- Talk to Lana ---------- */
.talk{overflow:clip}
.talk::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 46% at 8% 58%, rgba(245,166,35,.14) 0%, rgba(245,166,35,0) 72%),
    radial-gradient(42% 50% at 34% 30%, #E2EEFB 0%, rgba(226,238,251,0) 72%),
    radial-gradient(40% 44% at 92% 70%, #EAF3FB 0%, rgba(234,243,251,0) 72%)}
.talk-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(16px,2.4vw,28px); align-items:stretch}
.talk-card{display:flex; flex-direction:column; padding:clamp(24px,3.4vw,44px); border-radius:32px; background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.7))}
.talk-sub{margin-top:8px; font:600 clamp(1.1875rem,1.05rem + .55vw,1.5rem)/1.25 var(--display); letter-spacing:-.016em; color:var(--ink)}
.talk-how{margin-top:12px; color:var(--ink-2); max-width:52ch; text-wrap:pretty}
.talk-form{display:grid; gap:14px; margin-top:24px}
.field{display:grid; gap:6px}
.field label{font-size:.9375rem; font-weight:600; color:var(--ink)}
.field input{width:100%; height:54px; padding:0 16px; border-radius:15px; border:1px solid #D9D4C9; background:#fff; font-size:1.0625rem; color:var(--ink); box-shadow:inset 0 1px 2px rgba(13,27,42,.04); transition:border-color .16s ease, box-shadow .16s ease; -webkit-appearance:none; appearance:none}
.field input::placeholder{color:#6B7682}
.field input:focus{outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(245,166,35,.55)}
.field input[aria-invalid="true"]{border-color:var(--red)}
.field-err{min-height:0; font-size:.9375rem; font-weight:500; color:var(--red)}
.field-err:empty{display:none}
.consent{display:flex; align-items:flex-start; gap:10px; min-height:28px; font-size:.9375rem; color:var(--ink-2); cursor:pointer}
.consent input{flex:none; width:20px; height:20px; margin:2px 0 0; accent-color:var(--ink)}
.talk-submit{width:100%; justify-content:space-between; padding-left:24px}
.talk-submit:disabled{opacity:.72; cursor:progress}
.talk-privacy{font-size:.875rem; color:var(--ink-2)}
.talk-privacy a{font-weight:500; text-underline-offset:2px}
.talk-reveal{display:grid; justify-items:center; gap:6px; margin-top:auto; padding-top:18px; text-align:center}
.talk-reveal.is-in{animation:talkIn var(--t-spring) var(--spring) both}
@keyframes talkIn{from{opacity:0; transform:translate3d(0,14px,0) scale(.98)} to{opacity:1; transform:none}}
.talk-orb{position:relative; width:112px; height:112px; margin:18px 0 26px}
.talk-orb-host{width:112px; height:112px}
.talk-k{font-size:.9375rem; font-weight:500; color:var(--ink-2)}
.talk-number{font:650 clamp(1.75rem,1.4rem + 1.6vw,2.5rem)/1.15 var(--display); letter-spacing:-.022em; color:var(--ink); text-decoration:none; font-variant-numeric:tabular-nums}
.talk-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; margin-top:14px}
.talk-actions .btn{width:100%; padding:0 16px; min-height:60px; font-size:1.125rem}
.talk-note{margin-top:8px; font-size:.875rem; color:var(--ink-2)}
.talk-photo{position:relative; min-height:560px; border-radius:32px; overflow:hidden; background:#7DB6E8; box-shadow:var(--shadow-lg)}
.talk-photo picture,.talk-photo img{position:absolute; inset:0; width:100%; height:100%}
.talk-photo img{object-fit:cover; object-position:50% 22%}
.talk-chips{position:absolute; inset:0; pointer-events:none}
.talk-chip,.talk-input{position:absolute; color:var(--ink); background:rgba(255,255,255,.4); -webkit-backdrop-filter:blur(var(--blur)) saturate(170%); backdrop-filter:blur(var(--blur)) saturate(170%);
  border:1px solid rgba(255,255,255,.62); box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 14px 30px -14px rgba(13,27,42,.5)}
.talk-chip{display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border-radius:999px; font-size:.9375rem; font-weight:600; white-space:nowrap}
.talk-chip.c1{left:7%; top:9%}
.talk-chip.c2{right:6%; top:27%}
.talk-chip.c3{left:8%; top:52%}
.talk-input{left:16px; right:16px; bottom:16px; display:flex; align-items:center; gap:10px; min-height:56px; padding:0 18px; border-radius:20px; font-size:1rem; font-weight:500}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .talk-chip,.talk-input{background:rgba(255,255,255,.92)}
}
@media (prefers-reduced-transparency:reduce){ .talk-chip,.talk-input{background:#fff; -webkit-backdrop-filter:none; backdrop-filter:none} }
@media (prefers-contrast:more){ .talk-chip,.talk-input{background:#fff; border-color:var(--ink); -webkit-backdrop-filter:none; backdrop-filter:none} }
@media (prefers-reduced-motion:reduce){ .talk-reveal.is-in{animation:none} }
@media (max-width:919px){
  .talk-grid{grid-template-columns:1fr}
  .talk-photo{min-height:0; aspect-ratio:4/5; max-height:600px}
  .talk-chip{min-height:38px; padding:0 13px; font-size:.875rem}
  .talk-actions .btn{min-height:56px; font-size:1.0625rem}
}

/* ---------- calculator ---------- */
.calc{overflow:clip}
.calc::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(38% 34% at 88% 26%, #DCEBFA 0%, rgba(220,235,250,0) 72%),
    radial-gradient(32% 26% at 70% 44%, rgba(245,166,35,.12) 0%, rgba(245,166,35,0) 72%)}
.calc-card{max-width:920px; margin-inline:auto; padding:clamp(22px,3.4vw,44px); border-radius:32px}
.sl{display:grid; gap:14px}
.sl label{display:flex; justify-content:space-between; align-items:center; gap:16px; font:600 clamp(1.1875rem,1.05rem + .7vw,1.625rem)/1.2 var(--display); letter-spacing:-.018em; color:var(--ink)}
.sl output{flex:none; display:grid; place-items:center; min-width:60px; height:52px; padding:0 12px; border-radius:16px; background:var(--ink); color:#fff; font:650 1.625rem/1 var(--display); letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.sl input[type=range]{--p:50%; width:100%; height:44px; margin:-10px 0; background:none; cursor:pointer; -webkit-appearance:none; appearance:none; touch-action:pan-y}
.sl input[type=range]:focus-visible{outline:none}
.sl input[type=range]::-webkit-slider-runnable-track{height:10px; border-radius:6px; background:linear-gradient(90deg,var(--ink) var(--p),#E9E5DC var(--p))}
.sl input[type=range]::-moz-range-track{height:10px; border-radius:6px; background:#E9E5DC}
.sl input[type=range]::-moz-range-progress{height:10px; border-radius:6px; background:var(--ink)}
.sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:30px; height:30px; margin-top:-10px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 1px rgba(13,27,42,.12), 0 4px 10px rgba(13,27,42,.24); transition:transform .16s var(--ease-out), box-shadow .16s ease}
.sl input[type=range]::-moz-range-thumb{width:30px; height:30px; border-radius:50%; background:#fff; border:0; box-shadow:0 0 0 1px rgba(13,27,42,.12), 0 4px 10px rgba(13,27,42,.24)}
.sl input[type=range]:active::-webkit-slider-thumb{transform:scale(1.1)}
.sl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--ink)}
.sl input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #fff, 0 0 0 6px var(--ink)}
.sl-ends{display:flex; justify-content:space-between; margin-top:-6px; font-size:.875rem; color:var(--ink-2); font-variant-numeric:tabular-nums}
.calc-result{margin-top:clamp(20px,2.6vw,28px); padding-top:clamp(20px,2.6vw,28px); border-top:1px solid rgba(13,27,42,.1)}
.calc-figs{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(14px,2.4vw,28px); align-items:end; margin-top:4px}
.calc-k{font-size:.9375rem; font-weight:500; color:var(--ink-2)}
.calc-big{display:grid}
.calc-big span{font:650 clamp(3rem,2rem + 4vw,5rem)/1.02 var(--display); letter-spacing:-.034em; font-variant-numeric:tabular-nums}
.calc-big small{font-size:1rem; color:var(--ink-2)}
.calc-two{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.calc-two div{display:grid; padding:14px 16px; border-radius:18px; background:rgba(255,255,255,.72); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(13,27,42,.05)}
.calc-two b{font:650 1.875rem/1.08 var(--display); letter-spacing:-.022em; font-variant-numeric:tabular-nums}
.calc-two span{font-size:.875rem; color:var(--ink-2); line-height:1.3}
.calc-how{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:18px clamp(14px,2.4vw,28px); margin-top:20px; padding-top:18px; border-top:1px solid rgba(13,27,42,.1)}
.calc-how h3{font-size:1rem; letter-spacing:-.008em; margin-bottom:8px}
.calc-how dl{display:grid; gap:7px; margin:0}
.calc-how dl div{display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px 14px; font-size:.875rem; line-height:1.35}
.calc-how dt{color:var(--ink-2)}
.calc-how dd{margin:0; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink)}
.calc-assume{display:grid; gap:7px; font-size:.875rem; line-height:1.35; color:var(--ink-2)}
.calc-note{margin-top:16px; font-size:.875rem; line-height:1.45; color:var(--ink-2)}
@media (max-width:767px){ .calc-figs,.calc-how{grid-template-columns:1fr} }

/* mission */
.mission{max-width:980px; margin:clamp(72px,10vw,136px) auto 0; text-align:center}
.mission blockquote{font:500 clamp(1.75rem,1.2rem + 2.4vw,3rem)/1.2 var(--display); letter-spacing:-.024em; color:var(--ink); text-wrap:balance}
.mission figcaption{margin-top:24px; font:500 1.0625rem/1.3 var(--bodyf); color:var(--ink-2)}

/* ---------- three features ---------- */
.feats{overflow:clip; padding-top:clamp(32px,4vw,64px)}
.feat-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,24px)}
.feat{display:flex; flex-direction:column}
.feat-media{position:relative; aspect-ratio:1/1.08; border-radius:28px; overflow:hidden; background:var(--sky-2); box-shadow:var(--shadow-md)}
.feat-media picture,.feat-media img{width:100%; height:100%}
.feat-media img{object-fit:cover}
.feat h3{margin-top:20px; font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem)}
.feat > p{margin-top:8px; color:var(--ink-2); text-wrap:pretty}
.micro{position:absolute; left:12px; right:12px; bottom:12px; min-height:128px; padding:14px; border-radius:20px; background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.68)); -webkit-backdrop-filter:blur(var(--blur)) saturate(165%); backdrop-filter:blur(var(--blur)) saturate(165%)}
/* missed call → text back */
.miss-a{display:flex; align-items:center; gap:10px}
.miss-a span:last-child{display:grid; line-height:1.25}
.miss-a b{font:600 1rem/1.25 var(--display)}
.miss-a small{font-size:.8125rem; color:var(--ink-2)}
.miss-ic{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:rgba(179,50,31,.12); color:var(--red); flex:none}
.miss-b{margin-top:10px; margin-left:auto; max-width:92%; padding:8px 12px; border-radius:15px 15px 5px 15px; background:var(--ink); color:#fff; font-size:.875rem; line-height:1.34; transform-origin:100% 100%}
.js .feat:not(.play) .miss-a,.js .feat:not(.play) .miss-b,.js .feat:not(.play) .stamp{opacity:0}
.play .miss-a{animation:missA .6s var(--ease-out) .15s both}
.play .miss-b{animation:missB var(--t-bounce) var(--spring-bounce) 1.25s both}
@keyframes missA{from{opacity:0; transform:translate3d(0,8px,0)} to{opacity:1; transform:none}}
@keyframes missB{from{opacity:0; transform:translate3d(0,8px,0) scale(.92)} to{opacity:1; transform:none}}
/* voice picker */
.vp-row{display:flex; justify-content:space-between; gap:4px}
.vp{position:relative; width:44px; height:44px; border-radius:50%; flex:none; transition:transform .16s var(--ease-out), box-shadow .2s ease}
.vp img{width:44px; height:44px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #fff}
.vp:active{transform:scale(.94)}
.vp[aria-pressed="true"] img{box-shadow:0 0 0 2px #fff, 0 0 0 4.5px var(--amber)}
.vp:focus-visible{border-radius:50%}
.vp-now{display:flex; align-items:center; gap:10px; margin-top:12px; min-height:42px}
.vp-t{flex:1; min-width:0; display:grid; line-height:1.25}
.vp-t b{font:600 1rem/1.25 var(--display)}
.vp-t small{font-size:.8125rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.vp-wave{display:flex; align-items:center; gap:2.5px; height:34px; flex:none}
.vp-wave i{display:block; width:3px; height:100%; border-radius:2px; background:var(--ink); transform:scaleY(.12); transform-origin:50% 50%}
.vp-wave.is-idle i{transition:transform .3s var(--ease-out)}
/* paid stamp */
.inv{display:grid; gap:8px; padding:12px 14px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.05)}
.inv-h{display:flex; justify-content:space-between; gap:8px; font-size:.875rem}
.inv-h b{font:600 .9375rem/1.25 var(--display)}
.inv-h span{font-weight:600; font-variant-numeric:tabular-nums}
.inv i{display:block; height:8px; border-radius:5px; background:#EFEDE7}
.inv i.s{width:58%}
.stamp{position:absolute; right:22px; bottom:12px; padding:5px 14px; border:3px solid var(--green); border-radius:10px; color:var(--green); background:rgba(255,255,255,.88); font:800 1.375rem/1 var(--display); letter-spacing:.02em; transform:rotate(-8deg)}
.play .stamp{animation:stamp .62s .55s both}
@keyframes stamp{
  0%{opacity:0; transform:rotate(-8deg) scale(1.9); animation-timing-function:cubic-bezier(.5,0,.9,.6)}
  48%{opacity:1; transform:rotate(-8deg) scale(.94); animation-timing-function:var(--ease-out)}
  100%{opacity:1; transform:rotate(-8deg) scale(1)}
}
.micro-paid .inv{transition:transform .2s ease}
.play .micro-paid .inv{animation:invHit .3s var(--ease-out) .85s both}
@keyframes invHit{0%,100%{transform:none} 30%{transform:translate3d(0,2px,0) scale(.99)}}
@media (prefers-reduced-motion:reduce){
  .play .miss-a,.play .miss-b,.play .stamp,.play .micro-paid .inv{animation:none}
  .js .feat:not(.play) .miss-a,.js .feat:not(.play) .miss-b,.js .feat:not(.play) .stamp{opacity:1}
}
@media (max-width:919px){
  .feat-grid{grid-template-columns:1fr; gap:36px}
  .feat-media{aspect-ratio:1/1}
  .vp-row{justify-content:space-around}
}

/* ============================================================
   Product showcase. Pinned on wide screens with motion allowed; everywhere else
   a swipeable carousel of phone screens. The screens match the real light-theme
   dashboard tokens (bg #eef3f8, white panels, navy rail).
   ============================================================ */
.showcase{position:relative; --d-bg:#eef3f8; --d-line:rgba(13,27,42,.1); --d-body:#3a5169; --d-muted:#566B7F; overflow:clip}
.showcase::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(44% 30% at 76% 30%, #DCEBFA 0%, rgba(220,235,250,0) 72%),
    radial-gradient(30% 20% at 92% 60%, rgba(245,166,35,.13) 0%, rgba(245,166,35,0) 72%),
    radial-gradient(40% 26% at 10% 74%, #EAF3FB 0%, rgba(234,243,251,0) 72%)}
.sc-pin{padding-block:clamp(56px,8vw,96px)}
.sc-text h2{text-align:center; margin-bottom:28px}
.sc-stage{display:none}
.sc-note{margin-top:8px; font-size:.8125rem; color:var(--ink-2); text-align:center}

/* carousel (default layout) */
.sc-track{display:flex; gap:14px; margin-inline:calc(var(--gutter)*-1); padding:8px var(--gutter) 12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; scroll-padding-inline:var(--gutter)}
.sc-track::-webkit-scrollbar{display:none}
.sc-track:focus-visible{outline-offset:-3px}
.sc-step{flex:none; width:min(78vw,320px); scroll-snap-align:center; display:flex; flex-direction:column; align-items:center; text-align:center}
.sc-step h3{margin-top:18px}
.sc-step > p{margin-top:6px; color:var(--ink-2); text-wrap:pretty}
.sc-m-phone{width:92%}
.sc-dots{display:flex; justify-content:center; gap:0; margin-top:4px}
.sc-dots button{display:grid; place-items:center; width:44px; height:44px; border-radius:50%}
.sc-dots i{display:block; width:9px; height:9px; border-radius:50%; background:#CFCAC0; transition:transform .3s var(--spring-bounce), background-color .2s ease}
.sc-dots button[aria-current="step"] i{background:var(--ink); transform:scale(1.35)}

/* phone frame + phone screens (designed at 300 × 620, scaled by --ps) */
.phone-frame{position:relative; padding:7px; border-radius:38px; background:#0D1B2A; box-shadow:var(--shadow-lg), inset 0 0 0 1.5px rgba(255,255,255,.14)}
.phone-frame::before{content:""; position:absolute; left:50%; top:13px; width:64px; height:17px; margin-left:-32px; border-radius:10px; background:#0D1B2A; z-index:2}
.phone-glass{position:relative; aspect-ratio:300/620; border-radius:31px; overflow:hidden; background:var(--d-bg)}
.ps{position:absolute; left:0; top:0; width:300px; height:620px; padding:38px 14px 16px; transform-origin:0 0; transform:scale(var(--ps,.87)); color:var(--ink); font-size:13px; line-height:1.3; text-align:left; display:flex; flex-direction:column; gap:9px; background:var(--d-bg)}
.ps h5{margin:4px 0 0; font:650 15px/1.2 var(--display)}
.ps small{font-size:12px; color:var(--d-muted)}
.ps-top{display:flex; align-items:center; justify-content:space-between; min-height:28px}
.ps-top img{height:20px; width:auto}
.ps-title{font:650 17px/1.2 var(--display); letter-spacing:-.012em}
.ps-av{display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--amber); font:700 13px/1 var(--display)}
.ps-date{font-size:12px; color:var(--d-muted)}
.ps-hi{font:650 25px/1.12 var(--display); letter-spacing:-.022em; margin-top:-7px}
.ps-hi b{font-weight:650; color:var(--amber-deep)}
.ps-next{display:grid; gap:1px; padding:12px 13px; border-radius:16px; background:var(--ink); color:#fff}
.ps-next span{font-size:12px; font-weight:600; color:var(--amber)}
.ps-next b{font:650 16px/1.2 var(--display)}
.ps-next small{color:#C8D3DE}
.ps-btns{display:flex; gap:6px; margin-top:8px}
.ps-btns i{flex:1; display:grid; place-items:center; height:32px; border-radius:10px; font-style:normal; font-weight:600; font-size:12px; background:rgba(255,255,255,.12)}
.ps-btns i.p{background:var(--amber); color:var(--ink)}
.ps-list{display:grid; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--d-line)}
.ps-list li{display:flex; gap:10px; padding:9px 12px; font-size:13px}
.ps-list li + li{border-top:1px solid var(--d-line)}
.ps-list time{font-weight:600; min-width:38px}
.ps-money{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ps-money div{display:grid; padding:10px 12px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--d-line)}
.ps-money b{font:650 19px/1.15 var(--display); letter-spacing:-.014em}
.ok{color:var(--green)}
.ps-map{height:170px; border-radius:16px; overflow:hidden; flex:none}
.ps-stops{display:grid; gap:4px}
.ps-stops li{display:flex; align-items:center; gap:10px}
.ps-stops i{display:grid; place-items:center; flex:none; width:26px; height:26px; border-radius:50%; background:var(--amber); font:700 13px/1 var(--display); font-style:normal}
.ps-stops div{display:grid; line-height:1.25}
.ps-stops b{font-weight:600; font-size:13.5px}
.leg-l{padding-left:36px; font-size:12px; color:var(--d-muted)}
.ps-seg{display:grid; grid-template-columns:1fr 1fr; padding:3px; border-radius:11px; background:rgba(13,27,42,.06)}
.ps-seg i{display:grid; place-items:center; height:32px; border-radius:9px; font-style:normal; font-weight:600; font-size:13px; color:var(--d-body)}
.ps-seg i.on{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(13,27,42,.1)}
.ps-docs{display:grid; gap:7px}
.ps-docs li{display:flex; justify-content:space-between; gap:8px; padding:11px 12px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--d-line)}
.ps-docs div{display:grid; line-height:1.3}
.ps-docs b{font-weight:600; font-size:14px}
.ps-docs .r{justify-items:end}
.st{display:inline-flex; align-items:center; min-height:20px; padding:0 8px; border-radius:999px; background:var(--sky); font-style:normal; font-size:11.5px; font-weight:600; color:var(--ink)}
.st-ok{background:rgba(30,122,70,.12); color:var(--green)}
.ps-paybtn{display:grid; place-items:center; height:44px; margin-top:auto; border-radius:14px; background:var(--ink); color:#fff; font-weight:600; font-size:14px}
.ps-talk{align-items:center; text-align:center}
.ps-talk .ps-top{width:100%}
.ps-orb{position:relative; width:112px; height:112px; margin:18px 0 10px}
.ps-orb-host{width:112px; height:112px}
.fake-orb{position:absolute; inset:-60%; background:url("../img/brand/orb-static-528.webp") center/contain no-repeat}
.has-orb > .fake-orb{display:none}
.ps-status{font-weight:600; color:var(--d-muted)}
.ps-you{align-self:flex-end; max-width:86%; padding:8px 12px; border-radius:15px 15px 5px 15px; background:var(--ink); color:#fff; font-size:13.5px; text-align:left}
.ps-ai{align-self:flex-start; max-width:92%; padding:8px 12px; border-radius:15px 15px 15px 5px; background:#fff; box-shadow:0 0 0 1px var(--d-line); font-size:13.5px; text-align:left}
.ps-hold{display:grid; place-items:center; width:100%; height:48px; margin-top:auto; border-radius:999px; background:var(--amber); font-weight:600; font-size:14px}

/* pinned layout */
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  .js .showcase{height:360vh}
  .js .sc-pin{position:sticky; top:0; height:100vh; min-height:620px; padding:0; display:flex; align-items:center}
  .js .sc-grid{display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1fr); gap:clamp(24px,3vw,44px); align-items:center}
  .js .sc-text h2{text-align:left; font-size:clamp(2rem,1.2rem + 1.9vw,2.875rem); margin-bottom:24px}
  .js .sc-track{display:grid; margin:0; padding:0; overflow:visible; scroll-snap-type:none}
  .js .sc-step{grid-area:1/1; width:auto; align-items:flex-start; text-align:left; opacity:0; transform:translate3d(0,14px,0); transition:opacity .34s ease, transform var(--t-spring) var(--spring); pointer-events:none}
  .js .sc-step.is-on{opacity:1; transform:none; pointer-events:auto; transition-delay:.08s}
  .js .sc-step h3{margin-top:0; font-size:clamp(1.375rem,1.2rem + .7vw,1.75rem)}
  .js .sc-step > p{font-size:1.0625rem; max-width:38ch}
  .js .sc-m-phone{display:none}
  .js .sc-dots{justify-content:flex-start; margin:14px 0 0 -16px}
  .js .sc-note{text-align:left; margin-top:2px}
  .js .sc-stage{display:block; position:relative; padding:0 11% 40px 0}
  .lap{width:100%}
  .showcase.is-near .lap,.showcase.is-near .sc-phone,.showcase.is-near .scr{will-change:transform,opacity}
  .lap-lid{padding:9px 9px 0; border-radius:18px 18px 0 0; background:#0D1B2A; box-shadow:var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.1)}
  .lap-screen{position:relative; aspect-ratio:1120/700; border-radius:9px 9px 0 0; overflow:hidden; background:var(--d-bg)}
  .lap-canvas{position:absolute; left:0; top:0; width:1120px; height:700px; display:flex; transform-origin:0 0; transform:scale(var(--lk,.68))}
  .lap-base{height:14px; margin:0 -3%; border-radius:0 0 16px 16px; background:linear-gradient(180deg,#D8D5CD,#B8B4AA); box-shadow:0 18px 30px -14px rgba(13,27,42,.4)}
  .sc-phone{position:absolute; right:0; bottom:0; width:21%}
  .sc-phone .phone-frame{padding:5px; border-radius:28px}
  .sc-phone .phone-frame::before{top:9px; width:46px; height:12px; margin-left:-23px}
  .sc-phone .phone-glass{border-radius:23px}
}
/* the dashboard recreation */
.dr{flex:none; width:206px; display:flex; flex-direction:column; padding:18px 12px; background:linear-gradient(180deg,#0d1b2a,#0a1524); color:#A9BFD3}
.dr-logo{height:25px; width:auto; margin:2px 8px 18px}
.dr-nav{display:grid; gap:3px}
.dr-nav li{position:relative; display:flex; align-items:center; gap:11px; padding:11px 10px; border-radius:11px; font-size:14.5px; font-weight:500; transition:background-color .3s ease, color .3s ease}
.dr-nav .i{color:#7A9BB5; transition:color .3s ease}
.dr-nav li.on{background:rgba(245,166,35,.14); color:#EAF2F9}
.dr-nav li.on .i{color:#F5C75D}
.dr-acct{display:flex; align-items:center; gap:10px; margin-top:auto; padding:8px}
.dr-acct div{display:grid; line-height:1.3}
.dr-acct b{color:#EAF2F9; font:600 13.5px/1.3 var(--display)}
.dr-acct small{font-size:12px; color:#8EA8BE}
.dr-av{display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:50%; background:var(--amber); color:var(--ink); font:700 14px/1 var(--display)}
.dr-av.s{width:26px; height:26px; font-size:12px}
.dm{position:relative; flex:1; min-width:0; color:var(--ink); font-size:15px; line-height:1.35}
.scr{position:absolute; inset:0; padding:24px 96px 24px 26px; opacity:0}
.scr[data-scr="0"]{opacity:1}
.d-hero{display:grid; grid-template-columns:1fr 330px; gap:18px; margin-bottom:18px}
.d-date{font-size:14px; color:var(--d-muted)}
.d-h1{margin:2px 0 4px; font:650 36px/1.12 var(--display); letter-spacing:-.026em; color:var(--ink)}
.d-h1 span{color:var(--amber-deep)}
.d-sum{font-size:15px; color:var(--d-body)}
.d-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 0}
.d-kpis div{display:grid; padding:12px 14px; border-radius:14px; background:#fff; box-shadow:0 0 0 1px var(--d-line)}
.d-kpis dt{font-size:13px; color:var(--d-muted)}
.d-kpis dd{margin:0; font:650 25px/1.2 var(--display); letter-spacing:-.018em}
.d-kpis-4{grid-template-columns:repeat(4,1fr); margin:0 0 14px}
.d-next{display:grid; align-content:start; gap:2px; padding:18px; border-radius:16px; background:var(--ink); color:#fff}
.d-next > span{font-size:13.5px; font-weight:600; color:var(--amber)}
.d-next b{font:650 21px/1.2 var(--display); letter-spacing:-.016em}
.d-next small{font-size:14px; color:#C8D3DE}
.d-next p{margin-top:8px; font-size:15px; font-weight:600}
.d-next div{display:flex; gap:7px; margin-top:12px}
.d-next i{flex:1; display:grid; place-items:center; height:40px; border-radius:11px; font-style:normal; font-weight:600; font-size:14px; background:rgba(255,255,255,.12)}
.d-next i.p{background:var(--amber); color:var(--ink)}
.d-row{display:grid; grid-template-columns:1.1fr 1fr; gap:16px}
.d-card{padding:16px 18px; border-radius:16px; background:#fff; box-shadow:0 0 0 1px var(--d-line)}
.d-card header{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px}
.d-card h5{margin:0; font:650 18px/1.2 var(--display); letter-spacing:-.012em}
.d-card header em{font-style:normal; font-size:13.5px; font-weight:600; color:var(--amber-deep)}
.d-run li{display:flex; align-items:center; gap:14px; padding:10px 0; border-top:1px solid var(--d-line)}
.d-run time{min-width:70px; font-size:14px; font-weight:600}
.d-run div{flex:1; display:grid; line-height:1.25}
.d-run b{font-weight:600}
.d-run small{font-size:13px; color:var(--d-muted)}
.dot{width:9px; height:9px; border-radius:50%; background:#CBD6E0}
.dot.on{background:var(--amber)}
.d-money{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.d-money div{display:grid}
.d-money small{font-size:13px; color:var(--d-muted)}
.d-money b{font:650 27px/1.2 var(--display); letter-spacing:-.02em}
.d-bars{display:flex; align-items:flex-end; gap:8px; height:84px; margin-top:12px}
.d-bars i{flex:1; height:var(--h); border-radius:6px 6px 2px 2px; background:var(--sky-2)}
.d-bars i.on{background:var(--amber)}
.d-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
.d-head h4{margin:0; font:650 28px/1.15 var(--display); letter-spacing:-.022em; color:var(--ink)}
.d-seg{display:inline-flex; padding:3px; border-radius:11px; background:rgba(13,27,42,.06)}
.d-seg i{display:grid; place-items:center; height:32px; padding:0 14px; border-radius:9px; font-style:normal; font-size:13.5px; font-weight:600; color:var(--d-body)}
.d-seg i.on{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(13,27,42,.1)}
.d-new{display:grid; place-items:center; height:40px; padding:0 18px; border-radius:11px; background:var(--amber); font-weight:600; font-size:14px}
.d-disp{display:grid; grid-template-columns:1fr 1.05fr; gap:14px; height:calc(100% - 56px)}
.d-board{display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px}
.b-col{display:grid; align-content:start; gap:6px; min-width:0}
.b-col header{display:flex; justify-content:flex-start; align-items:center; gap:8px; margin:0 0 4px; font:600 15px/1.2 var(--display)}
.b-job{display:grid; padding:9px 11px; border-radius:12px; background:var(--d-bg); line-height:1.25}
.b-job.on{background:var(--ink); color:#fff}
.b-job time{font-size:12.5px; font-weight:600; color:var(--d-muted)}
.b-job.on time{color:var(--amber)}
.b-job b{font-weight:600; font-size:14.5px}
.b-job small{font-size:12.5px; color:var(--d-muted)}
.b-job.on small{color:#C8D3DE}
.b-leg{padding-left:11px; font-size:12px; color:var(--d-muted); border-left:2px dashed #C6D0DA; margin-left:12px}
.d-route{position:relative; padding:0; overflow:hidden}
.d-route > svg{position:absolute; inset:0}
.d-route-tag{position:absolute; left:12px; top:12px; padding:7px 11px; border-radius:11px; background:#fff; font-size:13.5px; box-shadow:var(--shadow-sm)}
.d-route-tag b{font-weight:650}
.d-route-ok{position:absolute; left:12px; bottom:12px; display:flex; align-items:center; gap:6px; padding:7px 11px; border-radius:11px; background:#fff; font-size:13.5px; font-weight:600; color:var(--green); box-shadow:var(--shadow-sm)}
.d-table{padding:14px 16px}
.d-table table{width:100%; margin-top:10px; border-collapse:collapse; font-size:14.5px}
.d-table td{padding:10px 8px; border-top:1px solid var(--d-line)}
.d-table td:first-child{color:var(--d-muted); font-size:13.5px}
.d-table b{font-weight:600}
.d-table .n{text-align:right; font-variant-numeric:tabular-nums; font-weight:600}
.d-table .st{font-size:12.5px; min-height:24px; padding:0 10px}
.d-talk{display:flex; flex-direction:column; align-items:center; height:100%; padding-top:6px}
.d-talk-orb{position:relative; width:150px; height:150px; margin:26px 0 34px}
.d-talk-host{width:150px; height:150px}
.d-talk-st{font-weight:600; color:var(--d-muted)}
.d-talk-th{display:grid; gap:8px; width:min(620px,100%); margin-top:14px}
.d-talk-th .t-you{justify-self:end; padding:9px 14px; border-radius:16px 16px 5px 16px; background:var(--ink); color:#fff}
.d-talk-th .t-ai{justify-self:start; padding:10px 14px; border-radius:16px 16px 16px 5px; background:#fff; box-shadow:0 0 0 1px var(--d-line); font-size:15.5px}
.d-talk-chips{display:flex; gap:8px; margin-top:14px}
.d-talk-chips i{display:grid; place-items:center; height:36px; padding:0 14px; border-radius:999px; background:#fff; box-shadow:0 0 0 1px var(--d-line); font-style:normal; font-size:14px; font-weight:500}
.d-talk-hold{display:flex; align-items:center; gap:8px; height:48px; margin-top:auto; padding:0 26px; border-radius:999px; background:var(--amber); font-weight:600}

/* ---------- pricing ---------- */
.pricing{overflow:clip}
.pricing::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 34% at 50% 40%, #DCEBFA 0%, rgba(220,235,250,0) 72%),
    radial-gradient(26% 22% at 36% 54%, rgba(245,166,35,.14) 0%, rgba(245,166,35,0) 72%)}
.plans{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.16fr) minmax(0,1fr); gap:clamp(12px,1.6vw,20px); align-items:stretch; padding-block:22px}
.plan{display:flex; flex-direction:column; padding:clamp(22px,2.4vw,30px); border-radius:28px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.05), var(--shadow-sm)}
.plan h3{font-size:1.5rem}
.plan-top{display:flex; align-items:center; justify-content:space-between; gap:10px}
.plan-tag{display:inline-flex; align-items:center; min-height:28px; padding:0 11px; border-radius:999px; background:var(--amber); color:var(--ink); font-size:.8125rem; font-weight:600; white-space:nowrap}
.plan-for{margin-top:4px; color:var(--ink-2)}
.price{display:flex; align-items:baseline; gap:3px; margin-top:16px; font-family:var(--display)}
.price-n{font-size:clamp(2.75rem,2.2rem + 1.6vw,3.5rem); line-height:1.05; font-weight:650; letter-spacing:-.034em; font-variant-numeric:tabular-nums}
.price-n small{margin-left:3px; font-size:1.125rem; font-weight:500; letter-spacing:0; color:var(--ink-2)}
.plan-bill{margin-top:2px; font-size:.9375rem; color:var(--ink-2)}
.plan-cta{width:100%; margin-top:18px; justify-content:center}
.plan-cta.btn-primary{justify-content:space-between; padding-left:24px}
.plan-plus{margin-top:22px; font-size:.9375rem; font-weight:600; color:var(--ink)}
.plan-group{margin-top:20px}
.plan-plus + .plan-group{margin-top:12px}
.plan-gh{display:flex; align-items:center; gap:9px; font:600 1rem/1.2 var(--display); letter-spacing:-.008em; color:var(--ink)}
.plan-gi{flex:none; width:26px; height:26px; padding:4px; border-radius:9px; background:var(--sky); color:var(--ink)}
.plan-list{display:grid; gap:7px; margin-top:10px}
.plan-list li{position:relative; padding-left:24px; font-size:.9375rem; line-height:1.35; color:var(--ink)}
.plan-list li::before{content:""; position:absolute; left:1px; top:1px; width:18px; height:18px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2 6.8-7.2' fill='none' stroke='%231E7A46' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
/* Solo is the one to look at: navy, a size up, lifted past its neighbours */
.plan-main{margin-block:-22px; padding:clamp(26px,3vw,40px); color:#fff;
  background:radial-gradient(120% 70% at 88% -6%,rgba(245,166,35,.2),transparent 62%),radial-gradient(110% 60% at 0% 104%,rgba(107,170,235,.16),transparent 66%),var(--ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.06), 0 2px 4px rgba(13,27,42,.12), 0 44px 80px -36px rgba(13,27,42,.62)}
.plan-main h3,.plan-main .plan-gh,.plan-main .plan-plus{color:#fff}
.plan-main h3{font-size:1.75rem}
.plan-main .plan-for,.plan-main .plan-bill,.plan-main .price-n small{color:rgba(255,255,255,.76)}
.plan-main .price-n{font-size:clamp(3.25rem,2.6rem + 2vw,4.25rem)}
.plan-main .plan-cta{background:#fff; color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 28px -14px rgba(0,0,0,.7)}
.plan-main .plan-cta::before{background:linear-gradient(112deg,transparent 38%,rgba(13,27,42,.07) 50%,transparent 62%)}
.plan-main .plan-gi{background:rgba(245,166,35,.18); color:var(--amber)}
.plan-main .plan-list li{color:rgba(255,255,255,.94)}
.plan-main .plan-list li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2 6.8-7.2' fill='none' stroke='%23F5A623' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.price-note{margin:clamp(30px,3.4vw,40px) auto 0; max-width:720px; text-align:center; font-size:.9375rem; color:var(--ink-2); text-wrap:balance}
.price-note-2{margin-top:6px}
.cmp-open{display:flex; justify-content:center; margin-top:18px}
.cmp-chev{transition:transform .22s var(--ease-out)}
.cmp-btn[aria-expanded="true"] .cmp-chev{transform:rotate(180deg)}
.cmp{margin-top:18px; padding:clamp(6px,1.4vw,18px) clamp(10px,2.2vw,30px) clamp(10px,1.6vw,20px); border-radius:28px; background:#fff; box-shadow:0 0 0 1px rgba(13,27,42,.05), var(--shadow-sm)}
.js .cmp{display:none}
.js .cmp.is-open{display:block; animation:cmpIn .3s var(--ease-out) both}
@keyframes cmpIn{from{opacity:0; transform:translate3d(0,-8px,0)}}
.cmp-table{width:100%; border-collapse:collapse; font-size:.9375rem; line-height:1.3}
.cmp-table th,.cmp-table td{padding:10px 6px; border-bottom:1px solid var(--line); vertical-align:middle}
.cmp-table tbody tr:last-child > *{border-bottom:0}
.cmp-table tbody th[scope=row]{padding-left:2px; text-align:left; font-weight:400; color:var(--ink)}
.cmp-table td{width:15%; text-align:center; font-weight:500; font-variant-numeric:tabular-nums}
.cmp-table td:nth-child(3){background:rgba(245,166,35,.07)}
.cmp-g th,.cmp-g td{padding-top:22px; padding-bottom:8px; font-weight:600}
.cmp-g th{text-align:left; padding-left:2px; font:600 1.0625rem/1.2 var(--display); letter-spacing:-.01em}
.cmp-g td{font-size:.875rem; color:var(--ink-2)}
.cmp-g .plan-gi{display:inline-block; margin-right:9px; vertical-align:-7px}
.cmp-y{display:inline-block; vertical-align:middle; color:var(--green)}
.cmp-n{color:#A9A69E}
@media (max-width:919px){
  .plans{grid-template-columns:1fr; max-width:520px; margin-inline:auto; padding-block:0}
  .plan-main{order:-1; margin-block:0}
  .cmp-table{font-size:.875rem}
  .cmp-table td{width:17%}
  .cmp-table th,.cmp-table td{padding-inline:3px}
  .cmp-g td{font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){ .js .cmp.is-open{animation-duration:.01ms} .cmp-chev{transition-duration:.01ms} }

/* ---------- FAQ ---------- */
.faq-wrap{display:grid; grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(24px,5vw,72px); align-items:start}
.faq-list{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{font-size:inherit; letter-spacing:0; font-family:inherit}
.faq-q{display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; min-height:68px; padding:14px 2px; text-align:left; font:600 clamp(1.0625rem,1rem + .35vw,1.25rem)/1.25 var(--display); letter-spacing:-.012em; color:var(--ink); border-radius:10px}
.faq-i{position:relative; flex:none; width:36px; height:36px; border-radius:50%; background:rgba(13,27,42,.05); transition:transform var(--t-spring) var(--spring), background-color .2s ease}
.faq-i::before,.faq-i::after{content:""; position:absolute; left:11px; right:11px; top:17px; height:2px; border-radius:2px; background:var(--ink)}
.faq-i::after{transform:rotate(90deg); transition:transform var(--t-spring) var(--spring)}
.faq-q[aria-expanded="true"] .faq-i{background:var(--amber); transform:rotate(180deg)}
.faq-q[aria-expanded="true"] .faq-i::after{transform:rotate(0deg)}
@media (hover:hover) and (pointer:fine){ .faq-q:hover .faq-i{background:rgba(13,27,42,.09)} .faq-q[aria-expanded="true"]:hover .faq-i{background:var(--amber)} }
/* the one height animation on the page: a user-opened accordion, contained so it can't reflow the world */
.faq-a{display:grid; grid-template-rows:1fr}
.js .faq-a{grid-template-rows:0fr; visibility:hidden; transition:grid-template-rows var(--t-spring) var(--spring), visibility 0s linear var(--t-spring)}
.js .faq-a.is-open{grid-template-rows:1fr; visibility:visible; transition:grid-template-rows var(--t-spring) var(--spring), visibility 0s}
.faq-a-in{overflow:hidden; min-height:0}
.faq-a p{padding:0 48px 20px 2px; color:var(--ink-2); text-wrap:pretty; transform:translate3d(0,-6px,0); opacity:0; transition:opacity .28s ease, transform var(--t-spring) var(--spring)}
html:not(.js) .faq-a p,.faq-a.is-open p{opacity:1; transform:none}
.faq-a a{font-weight:500; text-underline-offset:2px; color:var(--ink)}
@media (max-width:919px){ .faq-wrap{grid-template-columns:1fr} .faq-a p{padding-right:8px} }
@media (prefers-reduced-motion:reduce){ .js .faq-a,.js .faq-a.is-open,.faq-a p,.faq-i,.faq-i::after{transition-duration:.01ms} }

/* ---------- final CTA ---------- */
.final-sec{padding-bottom:clamp(40px,6vw,72px)}
.final{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:stretch; min-height:480px; border-radius:36px; overflow:hidden; background:linear-gradient(120deg,#EAF3FB,#D6E8FA); box-shadow:var(--shadow-lg)}
.final-copy{position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; gap:26px; padding:clamp(28px,5vw,64px)}
.final-copy h2{font-size:clamp(2.5rem,1.5rem + 3.6vw,4.5rem); line-height:1.03; letter-spacing:-.03em}
.final-cta{display:flex; flex-wrap:wrap; gap:12px}
.final-photo{display:block; position:relative; min-height:100%}
.final-photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:60% 40%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 9%,rgba(0,0,0,.85) 19%,#000 28%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.4) 9%,rgba(0,0,0,.85) 19%,#000 28%)}
@media (max-width:919px){
  .final{grid-template-columns:1fr; min-height:0}
  .final-photo{order:-1; min-height:0; aspect-ratio:1/.86}
  .final-photo img{-webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%); mask-image:linear-gradient(180deg,#000 76%,transparent 100%)}
  .final-copy{padding-top:6px}
}

/* ---------- footer ---------- */
.foot{padding:clamp(36px,5vw,56px) 0 clamp(28px,4vw,40px); border-top:1px solid var(--line)}
.foot-top{display:grid; grid-template-columns:1.5fr repeat(5,minmax(0,1fr)); gap:28px 20px}
.foot-brand{display:grid; align-content:start; justify-items:start; gap:14px}
.foot-social{display:flex; gap:6px; margin-left:-2px}
.foot-social a{display:grid; place-items:center; width:44px; height:44px; border-radius:50%; color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); transition:color .2s ease, box-shadow .2s ease, transform .16s var(--ease-out)}
.foot-social a:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){ .foot-social a:hover{color:var(--ink); box-shadow:inset 0 0 0 1px #CFC9BD} }
.foot-logo{display:inline-block; border-radius:8px; align-self:start}
.foot-logo img{width:auto; height:32px}
.foot-col{display:grid; align-content:start; gap:2px}
.foot-col h3{margin-bottom:6px; font-size:1rem; letter-spacing:-.008em}
.foot-col a{display:flex; align-items:center; min-height:36px; width:max-content; color:var(--ink-2); text-decoration:none; font-size:.9375rem; border-radius:6px}
@media (hover:hover) and (pointer:fine){ .foot-col a:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px} }
.foot-line{margin-top:28px; padding-top:18px; border-top:1px solid var(--line); font-size:.875rem; color:var(--ink-2); text-wrap:balance}
.foot-line a{color:inherit; text-underline-offset:2px}
@media (max-width:767px){
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}

/* ---------- integrations ----------
   No backdrop blur here: pulses move under the nodes, so the nodes are solid white. */
.tools{overflow:clip}
.tools::before{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 56% at 70% 50%, #E6F1FC 0%, rgba(230,241,252,0) 72%),
    radial-gradient(24% 30% at 86% 78%, rgba(245,166,35,.1) 0%, rgba(245,166,35,0) 72%)}
.tools-grid{display:grid; grid-template-columns:minmax(0,.7fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center}
.tools-copy{display:grid; justify-items:start; gap:14px}
.tools-link{display:inline-flex; align-items:center; gap:8px; min-height:44px; font-weight:600; color:var(--ink); text-underline-offset:4px}
.tools-link svg{color:var(--amber-deep); transition:transform var(--t-bounce) var(--spring-bounce)}
@media (hover:hover) and (pointer:fine){ .tools-link:hover svg{transform:translate3d(3px,0,0)} }
.hubx{position:relative; height:clamp(480px,44vw,620px)}
.hubx-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none}
.hubx-lines path{fill:none; stroke:rgba(13,27,42,.15); stroke-width:1.5; stroke-linecap:round; transition:stroke .3s ease}
.hubx-lines path.is-live{stroke:rgba(214,132,14,.8)}
.hubx-orb{position:absolute; left:50%; top:50%; width:0; height:0; z-index:1}
.hubx-nodes{position:absolute; inset:0; z-index:3; margin:0; padding:0; list-style:none}
.nodex{position:absolute; left:var(--x); top:var(--y); width:0; height:0}
.nodex-ic{position:absolute; left:-37px; top:-37px; display:grid; place-items:center; width:74px; height:74px; border-radius:50%; background:#fff; box-shadow:inset 0 1px 0 #fff, inset 0 -3px 8px rgba(13,27,42,.05), 0 0 0 1px rgba(13,27,42,.07), var(--shadow-sm)}
.nodex-ic img,.nodex-ic > svg{display:block; width:38px; height:38px}
.nodex-ic::after{content:""; position:absolute; inset:-1px; border-radius:50%; box-shadow:0 0 0 2px var(--amber), 0 0 18px rgba(245,166,35,.5); opacity:0; transform:scale(.94); transition:opacity .55s ease, transform .7s var(--ease-out)}
.nodex.is-hit .nodex-ic::after{opacity:1; transform:scale(1.08); transition-duration:.14s,.32s}
.nodex-l{position:absolute; left:0; top:43px; transform:translateX(-50%); font-size:.8125rem; font-weight:500; color:var(--ink-2); white-space:nowrap}
.nodex.lab-top .nodex-l{top:auto; bottom:43px}
.nodex-beta{position:absolute; right:-7px; top:-3px; padding:2px 7px; border-radius:999px; background:var(--ink); color:#fff; font-size:.6875rem; font-weight:600; line-height:1.2}
.pulsex{position:absolute; left:0; top:0; z-index:2; width:10px; height:10px; margin:-5px 0 0 -5px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(245,166,35,.22), 0 0 14px rgba(245,166,35,.7); opacity:0; pointer-events:none}
.hubx-cap{position:absolute; left:0; top:0; z-index:4; padding:6px 12px; border-radius:999px; background:var(--ink); color:#fff; font-size:.8125rem; font-weight:600; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .22s ease}
.hubx-cap.on{opacity:1}
@media (max-width:979px){
  .tools-grid{grid-template-columns:1fr}
  .tools-copy{justify-items:center; text-align:center}
  .hubx{width:100%; max-width:640px; height:clamp(420px,70vw,560px); margin-inline:auto}
}
@media (max-width:560px){
  .nodex{left:var(--mx); top:var(--my)}
  .nodex-ic{left:-30px; top:-30px; width:60px; height:60px}
  .nodex-ic img,.nodex-ic > svg{width:32px; height:32px}
  .nodex-l{top:34px; font-size:.75rem}
  .nodex.lab-top .nodex-l{top:auto; bottom:34px}
  .nodex-beta{right:-8px; top:-4px; font-size:.625rem}
  .hubx-cap{font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){ .pulsex,.hubx-cap{display:none} }

/* phones: glass by opacity alone. A blur on every scroll frame isn't worth it on a mid-range GPU, and these cards
   have moving parts inside. So thin white, with ring art behind the big cards to give them something to show through.
   Over a photo the white stays at .56 or more: on a black patch that's still 5:1 for ink text. */
@media (max-width:767px){
  .demo,.talk,.calc{--ink-2:#1F2E3D; --line:rgba(13,27,42,.13); --green:#14592F}
  .demo::before,.talk::before,.calc::before{background:var(--rings-amber) right -430px top -240px/860px 860px no-repeat,var(--rings-sky) left -430px bottom -240px/860px 860px no-repeat,linear-gradient(135deg,#EAF3FB,#FAF3E4)}
  .demo-panel.glass,.talk-card.glass,.calc-card.glass{background:linear-gradient(155deg,rgba(255,255,255,.4),rgba(255,255,255,.22) 42%,rgba(255,255,255,.28))}
  .calc-two div{background:rgba(255,255,255,.42)}
  .micro{--ink-2:#1F2E3D; --green:#14592F; -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(255,255,255,.6))}
  .talk-chip,.talk-input{-webkit-backdrop-filter:none; backdrop-filter:none; background:rgba(255,255,255,.62)}
  .sc-m-phone{content-visibility:auto; contain-intrinsic-size:auto 540px}
}
/* each dashboard screen lays out on its own */
.scr{contain:layout paint}