/* ajiltAI — story sections (one-day timeline, module flow, plan builder, ready plans).
   Every class is prefixed "s-" so nothing collides with app.css; colours come from its theme tokens. */
:root{ --s-brand-line:color-mix(in srgb, var(--brand) 45%, transparent); }
.s-acc{ color:var(--brand-text); }
.s-pinsec{ padding-bottom:0; }
/* the timeline starts right under the nav: land on its first scene, not 80px above it */
#story{ padding-top:0; scroll-margin-top:-80px; }
.s-head{ padding-bottom:28px; }
.s-pin{ position:relative; }
.s-stage{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }
.s-pop{ opacity:0; transform:translateY(12px); transition:opacity .5s var(--ease), transform .5s var(--ease); transition-delay:calc(var(--d,0) * 1s); }
.s-lbl{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.s-pill{ font-style:normal; font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px; white-space:nowrap; display:inline-block; }
.s-pill.full{ background:var(--brand-soft); color:var(--brand-text); }
.s-pill.half{ background:var(--gold-soft); color:var(--gold); }
.s-pill.add{ border:1px dashed var(--line-strong); color:var(--ink-soft); }
.s-pill.none{ color:var(--ink-faint); }
@keyframes s-flow{ to{ stroke-dashoffset:-28; } }


/* ---------- one day (horizontal timeline) ---------- */
.s-day{ background:transparent; display:flex; flex-direction:column; justify-content:center; gap:22px; --s-top:clamp(96px, 14.7svh, 140px); --s-bot:clamp(20px, 5svh, 48px); padding:var(--s-top) 0 var(--s-bot); }
.s-day > *{ opacity:var(--in,0); }
.s-day-head{ padding:0 max(16px, calc((100% - 1180px) / 2)); }
.s-day-h{ font-size:clamp(20px,2.4vw,30px); margin-top:8px; }
.s-clock{ position:relative; z-index:5; padding:0 max(16px, calc((100% - 1180px) / 2)); display:flex; align-items:baseline; gap:10px; }
.s-clock b{ font-size:clamp(22px,3vw,34px); color:var(--brand-text); }
.s-clock small{ color:var(--ink-faint); font-size:13px; }
.s-track{ position:relative; align-self:flex-start; flex:none; height:min(520px, calc(100svh - 226px - var(--s-top) - var(--s-bot))); display:flex; will-change:transform; }
.s-scene{ flex:0 0 var(--sw,100vw); height:100%; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px; padding:0 max(16px, calc((var(--sw,100vw) - 1180px) / 2)); }
.s-scene.on .s-pop{ opacity:1; transform:none; }
.s-sc-t h3{ font-size:clamp(22px,3vw,38px); line-height:1.12; margin:0 0 14px; }
.s-sc-t p{ color:var(--ink-soft); line-height:1.6; font-size:16px; max-width:470px; margin:0; }
.s-mtags{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.s-mtag{ display:inline-flex; gap:8px; align-items:center; background:var(--surface); border:1px solid var(--s-brand-line); border-radius:999px; padding:6px 12px 6px 8px; font-size:12.5px; }
.s-mtag svg{ width:15px; height:15px; color:var(--brand-text); }
.s-mtag s{ color:var(--ink-faint); font-size:11.5px; }
.s-sc-m{ display:grid; place-items:center; position:relative; }
.s-phone{ width:min(290px,72vw); height:min(460px, calc(100svh - 256px - var(--s-top) - var(--s-bot))); border-radius:34px; background:var(--surface); color:var(--ink); border:1px solid var(--line-strong); padding:10px; box-shadow:0 30px 80px var(--shadow-lg), inset 0 0 0 5px var(--surface-2); display:flex; flex-direction:column; }
.s-ph-top{ height:44px; display:flex; align-items:center; gap:10px; padding:0 10px; border-bottom:1px solid var(--line); font-size:12.5px; font-weight:700; flex:none; }
.s-ph-top i{ width:26px; height:26px; border-radius:50%; background:var(--brand-soft); color:var(--brand-text); display:grid; place-items:center; font-size:10px; font-style:normal; }
.s-ph-body{ flex:1; padding:12px 8px; display:flex; flex-direction:column; gap:8px; overflow:hidden; justify-content:flex-end; }
.s-bb{ max-width:86%; padding:9px 12px; border-radius:16px; font-size:12.5px; line-height:1.45; }
.s-bb.me{ align-self:flex-end; background:#2563EB; color:#fff; border-bottom-right-radius:5px; }
.s-bb.ai{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:5px; }
.s-bb small{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--brand-text); margin-top:4px; }
.s-slots{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.s-sl{ border:1px solid var(--line-strong); border-radius:10px; padding:9px; text-align:center; font-family:var(--font-mono); font-size:12px; }
.s-sl.off{ opacity:.3; text-decoration:line-through; }
.s-sl.sel{ background:#22C55E; color:#04210E; border-color:#22C55E; font-weight:700; }
.s-ok{ background:var(--brand-soft); border:1px solid var(--s-brand-line); border-radius:12px; padding:10px 12px; font-size:12.5px; }
.s-ok b{ color:var(--brand-text); display:block; margin-bottom:2px; }
.s-toastm{ position:absolute; right:max(0px, calc(50% - 250px)); top:10%; background:var(--surface); border:1px solid var(--line-strong); border-radius:12px; padding:10px 14px; font-size:12.5px; box-shadow:0 14px 40px var(--shadow-lg); display:flex; gap:8px; align-items:center; }
.s-toastm svg{ width:16px; height:16px; color:var(--brand-text); }
.s-qr{ width:100px; height:100px; margin:4px auto; border:6px solid #fff; background:repeating-conic-gradient(#0A0D0B 0 25%, #fff 0 50%) 0 0/16px 16px; border-radius:4px; }
.s-pay{ background:#fff; color:#111; border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center; font-size:12px; }
.s-pay b{ display:block; font-family:var(--font-mono); font-size:20px; }
.s-laptop{ width:min(560px,88vw); border-radius:14px; background:var(--surface); border:1px solid var(--line-strong); overflow:hidden; box-shadow:0 30px 80px var(--shadow-lg); }
.s-lp-top{ display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--line); }
.s-lp-top i{ width:9px; height:9px; border-radius:50%; background:var(--surface-3); }
.s-lp-body{ padding:16px; display:grid; gap:12px; }
.s-k3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.s-k3 div{ background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:10px; font-size:11px; color:var(--ink-faint); }
.s-k3 b{ display:block; font-family:var(--font-mono); color:var(--ink); font-size:17px; margin-top:3px; }
.s-bars{ display:flex; align-items:flex-end; gap:8px; height:130px; padding:6px 4px 0; }
.s-bars i{ flex:1; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg, var(--brand), rgba(74,222,128,.2)); height:var(--h); transform:scaleY(0); transform-origin:bottom; transition:transform .8s var(--ease) calc(var(--d) * 1s); }
.s-scene.on .s-bars i{ transform:none; }
.s-call{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
.s-bigav{ width:84px; height:84px; border-radius:50%; background:var(--brand-soft); color:var(--brand-text); display:grid; place-items:center; font-family:var(--font-display); box-shadow:0 0 0 10px rgba(74,222,128,.06), 0 0 0 22px rgba(74,222,128,.03); }
.s-wave{ display:flex; gap:3px; align-items:center; height:48px; }
.s-wave i{ width:4px; border-radius:2px; background:var(--brand); height:20%; animation:s-wv 1s ease-in-out infinite; animation-delay:calc(var(--i) * -.08s); }
@keyframes s-wv{ 50%{ height:95%; } }
.s-tr{ display:grid; gap:6px; width:100%; }
.s-notif{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; font-size:12px; line-height:1.45; }
.s-notif b{ display:block; font-size:11px; color:var(--ink-faint); margin-bottom:3px; font-weight:600; }
.s-hub{ width:min(460px,86vw); height:auto; }
.s-hub text{ fill:var(--ink); font-family:var(--font-body); font-size:13px; font-weight:700; }
.s-hub rect{ fill:var(--surface); stroke:var(--line-strong); }
.s-hub circle{ fill:var(--brand-soft); stroke:var(--brand); }
.s-hub line{ stroke:var(--brand); stroke-width:2; stroke-dasharray:5 7; animation:s-flow 1s linear infinite; opacity:.8; }
.s-all{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; width:min(460px,88vw); }
.s-all div{ aspect-ratio:1; border-radius:16px; background:var(--brand-soft); border:1px solid var(--s-brand-line); color:var(--brand-text); display:grid; place-items:center; position:relative; }
.s-all svg{ width:26px; height:26px; }
.s-all span{ position:absolute; top:6px; left:8px; font-family:var(--font-mono); font-size:10px; color:var(--ink-faint); }
.s-team{ position:relative; z-index:5; display:flex; justify-content:center; align-items:center; gap:16px; padding:0 16px; }
.s-team-l span{ display:block; font-size:11px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.s-team-l b{ font-size:18px; }
.s-team-l em{ font-style:normal; color:var(--brand-text); }
.s-tslots{ display:flex; gap:6px; }
.s-ts{ width:34px; height:34px; padding:0; border-radius:10px; border:1px solid var(--line); display:grid; place-items:center; color:var(--ink-faint); background:var(--bg); cursor:pointer; transition:.4s var(--ease); }
.s-ts:hover{ border-color:var(--brand); color:var(--brand-text); }
.s-ts svg{ width:16px; height:16px; }
.s-ts.on{ background:var(--brand-soft); border-color:var(--s-brand-line); color:var(--brand-text); }
.s-ts.now{ transform:translateY(-6px); box-shadow:0 0 0 3px var(--brand-soft); }
@media (max-width:820px){
  .s-day{ gap:10px; padding:108px 0 32px; }
  .s-day-h{ font-size:18px; }
  .s-track{ height:calc(100svh - 340px); }
  .s-scene{ grid-template-columns:1fr; align-content:center; gap:14px; padding:0 16px; }
  .s-sc-m{ order:-1; }
  .s-sc-t h3{ font-size:19px; margin-bottom:8px; }
  .s-sc-t p{ font-size:13.5px; }
  .s-mtags{ margin-top:10px; }
  .s-phone{ height:min(300px, 34svh); width:min(250px,70vw); }
  .s-bars{ height:80px; }
  .s-toastm{ display:none; }
  .s-team{ flex-direction:column; gap:6px; }
  .s-tslots{ gap:4px; }
  .s-ts{ width:24px; height:24px; border-radius:7px; }
  .s-ts svg{ width:12px; height:12px; }
  .s-team-l{ text-align:center; }
}

/* ---------- module flow ---------- */
.s-flow{ background:radial-gradient(ellipse at 60% 45%, var(--brand-soft), transparent 60%); }
.s-grid{ position:absolute; inset:0; background-image:radial-gradient(var(--line-strong) 1px, transparent 1.4px); background-size:24px 24px; }
.s-world{ position:absolute; left:0; top:0; width:1400px; height:720px; transform-origin:0 0; will-change:transform; }
.s-wires{ position:absolute; left:0; top:0; width:1400px; height:720px; overflow:visible; }
.s-w{ fill:none; stroke:var(--brand); stroke-width:2; opacity:.75; }
.s-w.s-loop{ stroke:var(--gold); stroke-dasharray:6 8; animation:s-flow 1.2s linear infinite; }
.s-pk{ fill:var(--brand); filter:drop-shadow(0 0 5px var(--brand)); }
.s-node{ position:absolute; width:168px; height:62px; border-radius:14px; background:var(--surface); border:1px solid var(--line-strong); display:flex; align-items:center; gap:10px; padding:0 12px; cursor:pointer; opacity:0; text-align:left; color:var(--ink); font:inherit; transition:border-color .3s, box-shadow .3s, background .3s; }
.s-ni{ width:36px; height:36px; border-radius:10px; background:var(--surface-3); color:var(--ink-soft); display:grid; place-items:center; flex:none; transition:.3s; }
.s-ni svg{ width:19px; height:19px; }
.s-nt b{ display:block; font-size:13.5px; line-height:1.2; }
.s-nt small{ display:block; font-size:11px; color:var(--ink-faint); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100px; }
.s-nn{ position:absolute; top:-9px; right:10px; font-family:var(--font-mono); font-size:10px; background:var(--bg); border:1px solid var(--line-strong); color:var(--ink-faint); padding:1px 6px; border-radius:6px; }
.s-node::before, .s-node::after{ content:""; position:absolute; top:50%; width:10px; height:10px; margin-top:-5px; border-radius:50%; background:var(--bg); border:2px solid var(--line-strong); }
.s-node::before{ left:-6px; }
.s-node::after{ right:-6px; }
.s-node.on{ border-color:var(--s-brand-line); }
.s-node.on .s-ni{ background:var(--brand-soft); color:var(--brand-text); }
.s-node.on::before, .s-node.on::after{ border-color:var(--brand); }
.s-node.s-act{ border-color:var(--brand); background:var(--surface-2); box-shadow:0 0 0 5px var(--brand-soft), 0 20px 50px var(--shadow-lg); }
.s-node:hover{ border-color:var(--brand); }
.s-node.s-cust{ border-radius:31px; cursor:default; }
.s-node.s-cust .s-ni{ border-radius:50%; background:var(--gold-soft); color:var(--gold); }
.s-node.s-cust::before{ display:none; }
.s-hud{ position:absolute; top:86px; right:28px; display:flex; gap:10px; z-index:5; }
.s-hud > div{ background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(10px); border:1px solid var(--line); border-radius:14px; padding:10px 14px; min-width:160px; }
.s-hud span{ display:block; font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.s-hud b{ font-size:20px; display:block; margin-top:3px; }
.s-hud em{ font-style:normal; color:var(--brand-text); }
.s-steps{ position:absolute; right:16px; top:55%; transform:translateY(-50%); display:flex; flex-direction:column; gap:1px; z-index:5; }
.s-steps button{ width:18px; height:21px; padding:0; border:0; background:transparent; display:grid; place-items:center; cursor:pointer; }
.s-steps button:hover i{ background:var(--brand-text); transform:scaleX(1.6); }
.s-steps i{ width:4px; height:16px; border-radius:2px; background:var(--line-strong); transition:background .3s, transform .2s; }
.s-steps i.on{ background:var(--brand); }
/* the explanation that travels with the active node */
.s-co{ position:absolute; left:0; top:0; z-index:6; width:340px; will-change:transform; }
.s-co-in{ background:color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter:blur(12px); border:1px solid var(--line-strong); border-radius:18px; padding:18px 20px; box-shadow:0 24px 60px var(--shadow-lg); }
.s-co-in.in{ animation:s-coin .45s var(--ease); }
@keyframes s-coin{ from{ opacity:0; transform:translateY(8px); } }
.s-co::before{ content:""; position:absolute; z-index:1; width:12px; height:12px; background:var(--surface); border:solid var(--line-strong); transform:rotate(45deg); }
.s-co[data-side="right"]::before{ left:-6px; top:calc(var(--ay,40px) - 6px); border-width:0 0 1px 1px; }
.s-co[data-side="left"]::before{ right:-6px; top:calc(var(--ay,40px) - 6px); border-width:1px 1px 0 0; }
.s-co[data-side="down"]::before{ top:-6px; left:calc(var(--ax,40px) - 6px); border-width:1px 0 0 1px; }
.s-co[data-side="up"]::before{ bottom:-6px; left:calc(var(--ax,40px) - 6px); border-width:0 1px 1px 0; }
.s-co[data-side="none"]::before{ display:none; }
.s-co-top{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); }
.s-co-top b{ color:var(--brand-text); font-weight:600; }
.s-co h3{ font-size:18px; margin:8px 0 6px; line-height:1.25; }
.s-co p{ margin:0; color:var(--ink-soft); font-size:13.5px; line-height:1.55; }
.s-co-rep{ display:flex; gap:12px; align-items:center; margin-top:12px; padding-top:12px; border-top:1px dashed var(--line-strong); font-size:12.5px; }
.s-co-rep i{ width:32px; height:32px; border-radius:10px; background:var(--brand-soft); color:var(--brand-text); display:grid; place-items:center; flex:none; }
.s-co-rep i svg{ width:17px; height:17px; }
.s-co-rep s{ display:block; color:var(--ink-faint); }
.s-co-rep b{ display:block; color:var(--brand-text); margin-top:2px; }
.s-co .btn{ margin-top:14px; }
@media (max-width:760px){
  .s-hud{ left:10px; right:10px; top:74px; }
  .s-hud > div{ flex:1; min-width:0; padding:8px 10px; }
  .s-hud b{ font-size:15px; }
  .s-steps{ display:none; }
  .s-co{ width:calc(100% - 20px); }
  .s-co-in{ padding:14px 16px; }
  .s-co h3{ font-size:16px; }
  .s-co p{ font-size:13px; }
}

/* ---------- module dashboard sheet ---------- */
.s-sheet{ position:fixed; inset:0; z-index:95; display:grid; place-items:center; padding:20px; }
.s-sheet[hidden]{ display:none; }
.s-sheet-bg{ position:absolute; inset:0; background:var(--backdrop); backdrop-filter:blur(6px); }
.s-sheet-card{ position:relative; width:min(1080px,100%); max-height:calc(100svh - 40px); overflow:auto; border-radius:24px; background:var(--bg-alt); border:1px solid var(--line-strong); padding:14px; box-shadow:0 40px 120px var(--shadow-lg); }
.s-x{ position:absolute; top:20px; right:22px; z-index:2; width:34px; height:34px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); cursor:pointer; font-size:14px; }
.s-others{ padding:18px 6px 6px; }
.s-orail{ display:grid; grid-template-columns:repeat(auto-fill, minmax(172px,1fr)); gap:8px; }
.s-oc{ display:flex; gap:10px; align-items:center; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px; cursor:pointer; color:var(--ink); font:inherit; }
.s-oc:hover{ border-color:var(--s-brand-line); }
.s-oi{ width:30px; height:30px; border-radius:8px; background:var(--brand-soft); color:var(--brand-text); display:grid; place-items:center; flex:none; }
.s-oi svg{ width:16px; height:16px; }
.s-oc b{ display:block; font-size:12.5px; }
.s-oc small{ font-size:11px; color:var(--ink-faint); }
.s-dash{ background:linear-gradient(180deg, var(--surface), var(--bg-alt)); border:1px solid var(--line-strong); border-radius:20px; overflow:hidden; animation:s-coin .5s var(--ease); }
.s-dash-top{ display:flex; align-items:center; gap:7px; padding:11px 16px; border-bottom:1px solid var(--line); font-size:11.5px; color:var(--ink-faint); }
.s-dash-top i{ width:9px; height:9px; border-radius:50%; background:var(--surface-3); }
.s-dash-top span{ margin-left:10px; }
.s-dash-in{ padding:22px; display:grid; gap:16px; }
.s-dash-head{ display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:center; }
.s-dash-ic{ width:54px; height:54px; border-radius:15px; background:var(--brand-soft); color:var(--brand-text); display:grid; place-items:center; }
.s-dash-ic svg{ width:27px; height:27px; }
.s-dash-head h3{ font-size:clamp(18px,2.2vw,24px); margin-top:6px; }
.s-dash-head p{ margin:6px 0 0; color:var(--ink-soft); font-size:14px; line-height:1.5; max-width:560px; }
.s-dash-rep{ border:1px solid var(--line); border-radius:14px; padding:10px 14px; text-align:right; }
.s-dash-rep span{ display:block; font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.s-dash-rep b{ display:block; font-size:14px; margin:4px 0; }
.s-dash-rep s{ color:var(--ink-faint); font-size:13px; }
.s-kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.s-kpi{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:12px 14px; }
.s-kpi span{ font-size:12px; color:var(--ink-faint); }
.s-kpi b{ display:block; font-size:clamp(17px,2.3vw,25px); margin-top:4px; }
.s-dash-body{ display:grid; grid-template-columns:1.5fr 1fr; gap:12px; }
.s-panel{ background:var(--surface-2); border:1px solid var(--line); border-radius:14px; padding:14px; }
.s-gap{ margin-top:14px; }
.s-live{ width:7px; height:7px; border-radius:50%; background:var(--brand); animation:s-pulse 1.6s infinite; }
@keyframes s-pulse{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent); } 100%{ box-shadow:0 0 0 10px transparent; } }
.s-row{ display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--line); font-size:13.5px; animation:s-rowin .5s var(--ease) both; }
.s-row:nth-child(2){ border-top:0; }
@keyframes s-rowin{ from{ opacity:0; transform:translateX(-10px); } }
.s-rtag{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); background:var(--surface-3); padding:3px 7px; border-radius:6px; }
.s-rok{ font-family:var(--font-mono); font-size:11.5px; color:var(--brand-text); white-space:nowrap; }
.s-spark{ width:100%; height:80px; display:block; }
.s-trow{ display:flex; justify-content:space-between; align-items:center; padding:5px 0; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); }
.s-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.s-chip{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); border-radius:999px; padding:5px 10px; font:inherit; font-size:12px; cursor:pointer; }
.s-chip svg{ width:14px; height:14px; color:var(--brand-text); }
.s-chip:hover{ border-color:var(--brand); }
@media (max-width:720px){
  .s-sheet{ padding:0; place-items:end stretch; }
  .s-sheet-card{ border-radius:22px 22px 0 0; max-height:92svh; padding:8px; }
  .s-orail{ grid-template-columns:repeat(2,1fr); }
  .s-dash-in{ padding:14px; gap:12px; }
  .s-dash-head{ grid-template-columns:auto 1fr; gap:12px; }
  .s-dash-ic{ width:44px; height:44px; }
  .s-dash-rep{ grid-column:1/-1; text-align:left; }
  .s-dash-head p{ font-size:13px; }
  .s-dash-body{ grid-template-columns:1fr; }
  .s-kpis{ gap:6px; }
  .s-kpi{ padding:9px 10px; }
  .s-kpi span{ font-size:11px; }
  .s-row{ font-size:12.5px; }
}

/* ---------- compare: separate SaaS vs one system ---------- */
.s-cmp{ display:grid; gap:16px; margin-top:36px; }
.s-vs{ display:grid; grid-template-columns:1.35fr 1fr; gap:16px; }
.s-card{ background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:22px; }
.s-card-k{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); font-weight:600; }
.s-tools{ width:100%; border-collapse:collapse; margin-top:10px; font-size:14px; }
.s-tools td{ padding:10px 4px; border-bottom:1px solid var(--line); vertical-align:middle; }
.s-tools td + td{ text-align:right; font-family:var(--font-mono); white-space:nowrap; color:var(--ink-soft); }
.s-tools small{ display:block; color:var(--ink-faint); font-size:12px; margin-top:2px; }
.s-tools .s-staff td{ background:var(--gold-soft); }
.s-tools .s-staff td:first-child{ border-radius:10px 0 0 10px; padding-left:10px; }
.s-tools .s-staff td:last-child{ border-radius:0 10px 10px 0; padding-right:10px; color:var(--ink); font-weight:700; }
.s-tools tfoot td{ border-bottom:0; padding-top:14px; font-weight:800; color:var(--red); }
.s-tools tfoot td:first-child{ font-family:var(--font-display); }
.s-hidden{ display:flex; flex-wrap:wrap; gap:6px; }
.s-hidden span{ font-size:12.5px; padding:6px 11px; border-radius:999px; border:1px dashed var(--line-strong); color:var(--ink-soft); }
.s-us{ border-color:var(--brand); background:linear-gradient(170deg, var(--brand-soft), var(--surface) 55%); display:flex; flex-direction:column; gap:16px; }
.s-us-price{ font-family:var(--font-mono); font-size:clamp(26px,3.2vw,36px); font-weight:700; color:var(--brand-text); }
.s-us-price small{ font-size:14px; color:var(--ink-faint); font-weight:500; }
.s-checks{ list-style:none; margin:0; padding:0; display:grid; gap:11px; font-size:14.5px; flex:1; }
.s-checks li{ display:flex; gap:10px; align-items:flex-start; }
.s-checks li::before{ content:"✓"; flex:none; width:20px; height:20px; border-radius:50%; background:var(--btn); color:var(--btn-ink); font-size:11px; font-weight:800; display:grid; place-items:center; margin-top:1px; }
.s-us .btn{ justify-content:center; }
.s-costbars{ display:grid; gap:14px; }
.s-cb{ display:grid; grid-template-columns:190px 1fr 150px; gap:14px; align-items:center; font-size:14px; }
.s-cb b{ text-align:right; }
.s-cb-bar{ height:14px; border-radius:99px; background:var(--surface-3); position:relative; overflow:hidden; }
.s-cb-bar::after{ content:""; position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:99px; transform:scaleX(0); transform-origin:left; transition:transform 1.2s var(--ease); }
.s-cb-bar.them::after{ background:var(--red); opacity:.75; }
.s-cb-bar.us::after{ background:var(--brand); transition-delay:.35s; }
.s-costbars.in .s-cb-bar::after{ transform:none; }
.s-why{ padding-bottom:10px; }
.s-why-t{ font-family:var(--font-display); font-size:18px; font-weight:700; margin-bottom:6px; }
.s-why-r{ display:grid; grid-template-columns:190px 1fr 1fr; gap:16px; align-items:center; padding:13px 0; border-top:1px solid var(--line); font-size:14px; }
.s-why-h{ border-top:0; padding-bottom:6px; font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:800; color:var(--ink-faint); }
.s-why-h span:last-child{ color:var(--brand-text); }
.s-bad, .s-good{ display:flex; gap:9px; align-items:flex-start; }
.s-bad{ color:var(--ink-faint); }
.s-bad::before{ content:"✕"; color:var(--red); font-weight:800; }
.s-good{ font-weight:600; }
.s-good::before{ content:"✓"; color:var(--brand-text); font-weight:800; }
@media (max-width:900px){ .s-vs{ grid-template-columns:1fr; } }
@media (max-width:720px){
  .s-card{ padding:16px; }
  .s-tools{ font-size:13px; }
  .s-tools td:nth-child(2){ display:none; }
  .s-cb{ grid-template-columns:1fr auto; gap:6px 10px; }
  .s-cb-bar{ grid-column:1 / -1; grid-row:2; }
  .s-why-h{ display:none; }
  .s-why-r{ grid-template-columns:1fr 1fr; gap:6px 12px; font-size:13px; }
  .s-why-r b{ grid-column:1 / -1; }
}

/* ---------- build your own plan ---------- */
.s-build{ display:grid; grid-template-columns:1fr 360px; gap:22px; margin-top:36px; align-items:start; }
.s-q{ font-family:var(--font-display); font-size:16px; font-weight:600; display:flex; gap:10px; align-items:baseline; }
.s-q span{ color:var(--brand-text); font-size:13px; }
.s-presets{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:14px 0 16px; font-size:13px; color:var(--ink-faint); }
.s-pre{ border:1px solid var(--line-strong); background:var(--surface); color:var(--ink-soft); border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer; transition:.2s; }
.s-pre:hover{ border-color:var(--brand); color:var(--brand-text); }
.s-pre.s-pre-x{ background:transparent; border-style:dashed; }
.s-jobs{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.s-job{ position:relative; display:grid; grid-template-columns:auto 1fr; column-gap:10px; row-gap:3px; align-items:center; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px; cursor:pointer; color:var(--ink); font:inherit; transition:border-color .2s, background .2s, transform .2s; }
.s-job:hover{ border-color:var(--s-brand-line); transform:translateY(-2px); }
.s-ji{ grid-row:1 / 3; width:36px; height:36px; border-radius:10px; background:var(--surface-3); color:var(--ink-faint); display:grid; place-items:center; transition:.2s; }
.s-ji svg{ width:18px; height:18px; }
.s-job b{ font-size:13px; line-height:1.25; padding-right:22px; }
.s-job small{ font-size:11.5px; color:var(--ink-faint); }
.s-jchk{ position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:6px; border:1.5px solid var(--line-strong); display:grid; place-items:center; transition:.2s; }
.s-job.on{ border-color:var(--brand); background:linear-gradient(160deg, var(--brand-soft), var(--surface) 70%); }
.s-job.on .s-ji{ background:var(--brand-soft); color:var(--brand-text); }
.s-job.on .s-jchk{ background:var(--btn); border-color:var(--btn); }
.s-job.on .s-jchk::after{ content:""; width:5px; height:9px; border:solid var(--btn-ink); border-width:0 2px 2px 0; transform:translateY(-1px) rotate(45deg); }
.s-bsum{ position:sticky; top:90px; background:var(--surface); border:1px solid var(--line-strong); border-radius:20px; padding:22px; display:flex; flex-direction:column; gap:12px; box-shadow:0 20px 50px var(--shadow); }
.s-bs-h{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.s-bs-h b{ font-family:var(--font-display); font-size:17px; }
.s-bs-h span{ font-size:12px; background:var(--brand-soft); color:var(--brand-text); padding:4px 10px; border-radius:999px; }
.s-bs-ln{ display:flex; justify-content:space-between; gap:10px; font-size:13px; color:var(--ink-soft); }
.s-bs-ln s{ color:var(--ink-faint); }
.s-bs-tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.s-bt{ position:relative; border:1px solid var(--line); background:var(--surface-2); border-radius:12px; padding:8px 6px; cursor:pointer; color:var(--ink-soft); font:inherit; display:grid; gap:2px; justify-items:center; }
.s-bt span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; }
.s-bt b{ font-family:var(--font-mono); font-size:13px; color:var(--ink); white-space:nowrap; }
.s-bt:disabled{ opacity:.4; cursor:not-allowed; }
.s-bt.rec::after{ content:"★"; position:absolute; top:-8px; right:-4px; background:var(--btn); color:var(--btn-ink); font-size:10px; width:18px; height:18px; border-radius:50%; display:grid; place-items:center; }
.s-bt.on{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-text); }
.s-bs-plan{ display:grid; gap:2px; border-top:1px dashed var(--line-strong); padding-top:14px; }
.s-bs-plan .s-tg{ font-size:12px; letter-spacing:.06em; color:var(--ink-soft); }
.s-bs-plan b{ font-family:var(--font-mono); font-size:34px; line-height:1.1; font-weight:800; }
.s-bs-plan small{ font-size:14px; color:var(--ink-faint); font-weight:600; margin-left:2px; }
.s-bs-notes{ list-style:none; margin:0; padding:10px 12px; border-radius:12px; background:var(--surface-2); display:grid; gap:4px; font-size:12.5px; color:var(--ink-soft); }
.s-bs-notes .s-add::before{ content:"+ "; color:var(--gold); }
.s-bs-notes .s-no::before{ content:"✕ "; color:var(--red); }
.s-bs-save{ align-items:baseline; }
.s-bs-save b{ font-family:var(--font-mono); font-size:16px; color:var(--brand-text); }
.s-bsum .btn{ justify-content:center; }
.s-bs-link{ text-align:center; font-size:13px; color:var(--brand-text); text-decoration:none; font-weight:600; }
.s-empty{ margin:0; color:var(--ink-faint); font-size:14px; }
@media (max-width:1000px){ .s-build{ grid-template-columns:1fr; } .s-bsum{ position:static; } }
@media (max-width:720px){ .s-jobs{ grid-template-columns:repeat(2,1fr); gap:8px; } .s-job{ padding:10px; } .s-ji{ width:30px; height:30px; } }

/* ---------- ready-made plans ---------- */
.s-tb{ display:grid; grid-template-columns:1fr 340px; gap:18px; margin-top:36px; }
.s-tabs{ grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.s-tab{ position:relative; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px; cursor:pointer; color:var(--ink); font:inherit; transition:.25s; }
.s-tg{ font-family:var(--font-mono); font-size:11px; color:var(--ink-faint); letter-spacing:.12em; }
.s-tab b{ display:block; font-family:var(--font-display); font-size:15px; margin:6px 0 8px; font-weight:600; }
.s-pr{ font-family:var(--font-mono); font-size:20px; font-weight:700; }
.s-pr small{ font-size:12px; color:var(--ink-faint); font-weight:500; }
.s-tab.on{ border-color:var(--brand); background:linear-gradient(180deg, var(--brand-soft), var(--surface)); box-shadow:0 0 0 3px var(--brand-soft); }
.s-popb{ position:absolute; top:-10px; right:14px; background:var(--btn); color:var(--btn-ink); font-size:10.5px; font-weight:800; padding:3px 9px; border-radius:999px; }
.s-tiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.s-tile{ position:relative; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px; min-height:112px; transition:all .45s var(--ease); }
.s-ti{ width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--surface-3); color:var(--ink-faint); transition:.45s; }
.s-ti svg{ width:17px; height:17px; }
.s-tile b{ display:block; font-size:13px; margin:10px 0 3px; line-height:1.25; }
.s-tile small{ font-size:11.5px; color:var(--ink-faint); }
.s-tile .s-pill{ position:absolute; top:12px; right:10px; }
.s-tile.full{ border-color:var(--s-brand-line); background:linear-gradient(160deg, var(--brand-soft), var(--surface) 60%); }
.s-tile.full .s-ti{ background:var(--brand-soft); color:var(--brand-text); }
.s-tile.half{ border-color:color-mix(in srgb, var(--gold) 40%, transparent); }
.s-tile.half .s-ti{ background:var(--gold-soft); color:var(--gold); }
.s-tile.add{ border-style:dashed; opacity:.7; }
.s-tile.none{ opacity:.3; filter:grayscale(1); }
.s-sum{ background:var(--surface); border:1px solid var(--line-strong); border-radius:18px; padding:22px; display:flex; flex-direction:column; gap:13px; position:sticky; top:90px; align-self:start; }
.s-ln{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13.5px; color:var(--ink-soft); }
.s-ln b{ color:var(--ink); white-space:nowrap; }
.s-meter{ height:8px; border-radius:99px; background:var(--surface-3); overflow:hidden; }
.s-meter i{ display:block; height:100%; background:var(--brand); border-radius:99px; transition:width .6s var(--ease); }
.s-price{ display:grid; gap:2px; }
.s-price b{ font-family:var(--font-mono); font-size:36px; line-height:1.1; font-weight:800; }
.s-price b small{ font-size:15px; color:var(--ink-faint); font-weight:600; margin-left:2px; }
.s-price > small{ font-size:12px; color:var(--ink-faint); }
.s-sep{ border-top:1px dashed var(--line-strong); padding-top:13px; }
.s-psave{ background:var(--brand-soft); border-radius:14px; padding:12px 14px; }
.s-psave > span:first-child{ font-size:12px; color:var(--ink-faint); }
.s-psave b{ display:block; font-size:24px; color:var(--brand-text); margin:2px 0 6px; }
.s-xr{ display:inline-block; background:var(--btn); color:var(--btn-ink); font-weight:700; font-size:12px; padding:4px 10px; border-radius:999px; }
.s-legend{ display:flex; flex-wrap:wrap; gap:8px; }
.s-note{ font-size:11.5px; color:var(--ink-faint); line-height:1.5; margin:0; }
.s-sum .btn{ justify-content:center; }
@media (max-width:900px){ .s-tb{ grid-template-columns:1fr; } .s-tiles{ grid-template-columns:repeat(2,1fr); } .s-sum{ position:static; } }
@media (max-width:560px){ .s-tabs{ gap:6px; } .s-tab{ padding:12px 10px; } .s-tab b{ font-size:11.5px; } .s-pr{ font-size:14px; } .s-tg{ font-size:10px; } }
@media (prefers-reduced-motion:reduce){ .s-pop, .s-bars i{ transition:none; } .s-wave i, .s-hub line, .s-w.s-loop{ animation:none; } }

/* ---------- demo: view as a role ---------- */
.s-roles{ display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; padding:10px 16px; border-bottom:1px solid var(--line); background:var(--surface); }
.s-roles > span{ font-size:11.5px; font-weight:800; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.07em; }
.s-rb{ display:flex; flex-wrap:wrap; gap:4px; background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:3px; }
.s-rb button{ border:0; background:transparent; color:var(--ink-soft); font:inherit; font-size:13px; font-weight:700; padding:6px 13px; border-radius:999px; cursor:pointer; display:inline-flex; gap:6px; align-items:center; transition:.2s; }
.s-rb button svg{ width:15px; height:15px; }
.s-rb button:hover{ color:var(--ink); }
.s-rb button[aria-pressed="true"]{ background:var(--btn); color:var(--btn-ink); }
.s-roles em{ font-style:normal; font-size:12.5px; color:var(--ink-faint); margin-left:auto; }
.side button.noperm{ color:var(--ink-faint); opacity:.55; }

/* ---------- demo: website template ---------- */
.ws-head{ margin-top:44px; }
.ws-head h3{ font-size:clamp(20px,2.4vw,28px); }
.ws-head p{ color:var(--ink-soft); margin:8px 0 0; font-size:15px; }
.ws-app{ position:relative; }
.ws-tag{ margin-left:auto; font-size:11.5px; font-weight:700; color:var(--brand-text); background:var(--brand-soft); padding:4px 10px; border-radius:999px; white-space:nowrap; }
.ws{ --wa-soft:color-mix(in srgb, var(--wa) 12%, transparent); height:620px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; display:flex; flex-direction:column; }
.ws-nav{ position:sticky; top:0; z-index:2; background:color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter:blur(10px); display:flex; align-items:center; gap:22px; padding:16px 28px; border-bottom:1px solid var(--line); font-size:13.5px; font-weight:600; color:var(--ink-soft); }
.ws-logo{ display:flex; align-items:center; gap:8px; color:var(--ink); font-family:var(--font-display); font-size:16px; margin-right:auto; }
.ws-logo svg{ width:22px; height:22px; color:var(--wa); }
.ws-btn{ display:inline-block; background:var(--wa); color:#fff; font-weight:700; font-size:13px; padding:9px 16px; border-radius:999px; }
.ws-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line-strong); }
.ws-hero{ display:grid; grid-template-columns:1.3fr 1fr; gap:24px; align-items:center; padding:28px 28px 20px; background:linear-gradient(180deg, var(--wa-soft), transparent); flex:none; }
.ws-hero small{ font-size:12px; font-weight:700; color:var(--wa); text-transform:uppercase; letter-spacing:.06em; }
.ws-hero h4{ font-family:var(--font-display); font-size:clamp(24px,3vw,38px); line-height:1.1; margin:10px 0; }
.ws-hero p{ color:var(--ink-soft); margin:0 0 18px; font-size:15px; max-width:44ch; }
.ws-cta{ display:flex; gap:8px; flex-wrap:wrap; }
.ws-rate{ display:block; margin-top:14px; font-size:12.5px; color:var(--ink-faint); }
.ws-art{ height:230px; border-radius:24px; background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--wa) 45%, transparent), var(--wa-soft) 70%); display:grid; place-items:center; color:var(--wa); }
.ws-art{ overflow:hidden; place-items:stretch; }
.ws-art svg, .ws-art img{ width:100%; height:100%; display:block; object-fit:cover; }
.ws-art .k1{ fill:var(--wa); } .ws-art .k2{ fill:color-mix(in srgb, var(--wa) 42%, var(--surface-2)); } .ws-art .k3{ fill:color-mix(in srgb, var(--wa) 14%, var(--surface-2)); }
.ws-art .l1{ fill:#FBFAF7; } .ws-art .w{ fill:#C89F73; } .ws-art .d1{ fill:#2B3038; } .ws-art .d2{ fill:#4A515C; } .ws-art .g{ fill:#3F9A5A; }
.ws-art .sl{ fill:none; stroke:#FBFAF7; stroke-width:4; stroke-linecap:round; } .ws-art .sa{ fill:none; stroke:var(--wa); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.ws-art .st{ fill:none; stroke:#A57E55; stroke-width:3; }
.ws-feat{ display:flex; flex-wrap:wrap; gap:8px; padding:0 28px; }
.ws-feat span{ display:inline-flex; gap:7px; align-items:center; font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); }
.ws-feat svg{ width:15px; height:15px; color:var(--wa); }
.ws-sec{ padding:26px 28px; }
.ws-sec h5{ font-family:var(--font-display); font-size:18px; margin:0 0 12px; }
.ws-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.ws-card{ display:grid; gap:6px; padding:14px; border-radius:16px; border:1px solid var(--line); background:var(--surface); }
.ws-card i{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; background:var(--wa-soft); color:var(--wa); }
.ws-card i svg{ width:18px; height:18px; }
.ws-card b{ font-size:14px; }
.ws-card span{ font-size:15px; font-weight:700; }
.ws-card em{ font-style:normal; font-size:12px; font-weight:700; color:var(--wa); }
.ws-foot{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:14px 28px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-faint); }
.ws-foot b{ color:var(--ink); }
.ws-chat{ position:absolute; right:18px; bottom:18px; z-index:3; box-shadow:0 8px 24px var(--shadow-lg); width:44px; height:44px; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; }
.ws-chat svg{ width:19px; height:19px; }
.ws-hint{ position:absolute; left:50%; bottom:14px; transform:translateX(-50%); z-index:3; font-size:12px; font-weight:700; color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px 12px; pointer-events:none; animation:ws-bob 2s ease-in-out infinite; }
@keyframes ws-bob{ 50%{ transform:translate(-50%, -4px); } }
.ws-head .ind-tabs{ margin-top:14px; }
.ws > *{ flex:none; }
.ws-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin:22px 28px 0; padding:18px; border-radius:18px; background:var(--wa-soft); }
.ws-stats div{ text-align:center; }
.ws-stats b{ display:block; font-family:var(--font-display); font-size:24px; color:var(--wa); }
.ws-stats span{ font-size:12.5px; color:var(--ink-soft); }
.ws-two{ display:grid; grid-template-columns:1.2fr 1fr; gap:24px; align-items:start; }
.ws-book{ display:grid; gap:10px; padding:18px; border-radius:18px; border:1px solid var(--line); background:var(--surface); }
.ws-book h5{ margin:0; }
.ws-field{ display:flex; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:12px; background:var(--surface-2); font-size:13px; }
.ws-field span{ color:var(--ink-faint); }
.ws-pick{ display:flex; flex-wrap:wrap; gap:6px; }
.ws-pick span{ font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:10px; border:1px solid var(--line-strong); }
.ws-pick span.on{ background:var(--wa); border-color:var(--wa); color:#fff; }
.ws-book .ws-btn{ text-align:center; }
.ws-team{ display:grid; gap:10px; }
.ws-team div{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; border:1px solid var(--line); background:var(--surface); }
.ws-team i{ width:38px; height:38px; border-radius:50%; background:var(--wa-soft); color:var(--wa); display:grid; place-items:center; font-style:normal; font-weight:800; }
.ws-team b{ font-size:14px; }
.ws-rev{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.ws-rev figure{ margin:0; padding:16px; border-radius:16px; background:var(--surface-2); }
.ws-rev blockquote{ margin:0 0 10px; font-size:14px; line-height:1.55; }
.ws-rev figcaption{ font-size:12.5px; color:var(--wa); font-weight:700; }
.ws-faq{ padding:16px; border-radius:16px; border:1px solid var(--line); }
.ws-faq b{ font-size:14.5px; }
.ws-faq p{ margin:6px 0 0; color:var(--ink-soft); font-size:14px; line-height:1.55; }
.ws-contact{ display:flex; flex-wrap:wrap; gap:8px; }
.ws-contact span{ display:inline-flex; align-items:center; gap:7px; font-size:13px; padding:8px 12px; border-radius:12px; background:var(--surface-2); }
.ws-contact svg{ width:15px; height:15px; color:var(--wa); }
@media (max-width:760px){
  .ws{ height:560px; }
  .ws-stats{ grid-template-columns:repeat(2,1fr); margin:16px 16px 0; }
  .ws-two, .ws-rev{ grid-template-columns:1fr; }
  .ws-nav{ gap:12px; padding:12px 16px; } .ws-nav > span:not(.ws-btn){ display:none; }
  .ws-hero{ grid-template-columns:1fr; padding:24px 16px 16px; } .ws-art{ display:none; }
  .ws-feat, .ws-sec, .ws-foot{ padding-left:16px; padding-right:16px; }
  .ws-grid{ grid-template-columns:repeat(2,1fr); }
  .ws-tag{ display:none; }
  .s-roles em{ margin-left:0; width:100%; }
}

/* ---------- phones: "Next" button, taps and sideways swipes step through the stories ---------- */
.s-day, .s-flow{ touch-action:pan-y pinch-zoom; }
.s-next{ display:none; align-items:center; gap:6px; border:0; border-radius:999px; padding:9px 16px; background:var(--btn); color:var(--btn-ink); font:inherit; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 8px 20px var(--btn-glow); }
.s-clock .s-next{ margin-left:auto; align-self:center; }
.s-co .s-next{ margin-top:12px; }
@media (hover:none) and (pointer:coarse){ .s-next{ display:inline-flex; } }

/* ---------- one-day story: layered slide (device runs a little ahead, neighbours fade back) ---------- */
.s-scene{ --dx:0; --ad:min(1, max(var(--dx), calc(var(--dx) * -1))); opacity:calc(1 - var(--ad) * .55); }
.s-sc-m{ transform:translate3d(calc(var(--dx) * 18%), 0, 0) scale(calc(1 - var(--ad) * .06)); will-change:transform; }
.s-sc-t{ transform:translate3d(calc(var(--dx) * -6%), 0, 0); will-change:transform; }
@media (prefers-reduced-motion:reduce){ .s-sc-m, .s-sc-t{ transform:none; } }

/* ---------- demo: bookings as a day calendar ---------- */
#appView{ position:relative; }
.bk-bar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.bk-btn{ border:1px solid var(--line-strong); border-radius:999px; padding:6px 14px; font-size:13px; font-weight:700; }
.bk-arrows{ display:flex; gap:2px; }
.bk-arrows i{ font-style:normal; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:18px; color:var(--ink-soft); }
.bk-title{ font-family:var(--font-display); font-size:18px; margin-right:auto; }
.bk-seg{ display:flex; border:1px solid var(--line-strong); border-radius:999px; overflow:hidden; }
.bk-seg span{ padding:6px 14px; font-size:12.5px; font-weight:700; color:var(--ink-soft); }
.bk-seg span.on{ background:var(--brand-soft); color:var(--brand-text); }
.bk-stats{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.bk-stats span{ font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:999px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); }
.bk-stats span b{ color:var(--ink); }
.bk-scroll{ overflow-x:auto; }
.bkA{ --cols:3; border:1px solid var(--line); border-radius:14px; overflow:hidden; min-width:560px; }
.bkA-head, .bkA .bk-grid{ display:grid; grid-template-columns:56px repeat(var(--cols), 1fr); }
.bkA-head{ background:var(--surface-2); border-bottom:1px solid var(--line); }
.bk-staff{ display:flex; gap:10px; align-items:center; padding:10px 12px; border-left:1px solid var(--line); min-width:0; }
.bk-staff > i{ flex:none; min-width:34px; height:34px; padding:0 6px; border-radius:50%; background:var(--c); color:#fff; display:grid; place-items:center; font-style:normal; font-weight:800; }
.bk-staff > i.num{ border-radius:10px; font-size:12px; }
.bk-staff b{ display:block; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-staff small{ font-size:11.5px; color:var(--ink-faint); }
.bk-load{ height:4px; border-radius:99px; background:var(--surface-3); margin-top:5px; overflow:hidden; width:120px; max-width:100%; }
.bk-load i{ display:block; height:100%; background:var(--c); }
.bk-grid{ position:relative; height:calc(var(--row) * 10); background-image:repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px var(--row)); }
.bk-grid::after{ content:""; position:absolute; inset:0; pointer-events:none; background-image:repeating-linear-gradient(to bottom, transparent 0 calc(var(--row) / 2), color-mix(in srgb, var(--line) 50%, transparent) calc(var(--row) / 2) calc(var(--row) / 2 + 1px), transparent calc(var(--row) / 2 + 1px) var(--row)); }
.bk-times{ position:relative; }
.bk-times span{ position:absolute; right:8px; transform:translateY(3px); font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums; }
.bk-col{ position:relative; border-left:1px solid var(--line); }
.bk-ev{ position:absolute; z-index:1; left:4px; right:6px; border:0; border-left:3px solid var(--c); border-radius:8px; background:color-mix(in srgb, var(--c) 17%, var(--surface)); color:var(--ink); text-align:left; padding:5px 8px; font:inherit; font-size:12px; line-height:1.3; overflow:hidden; cursor:pointer; display:flex; flex-direction:column; gap:1px; transition:box-shadow .2s, transform .2s; }
.bk-ev b{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:28px; }
.bk-ev span{ color:var(--ink-soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bk-ev small{ color:var(--ink-faint); font-size:11px; }
.bk-ev:hover, .bk-ev.sel{ box-shadow:0 8px 22px var(--shadow-lg); transform:translateY(-1px); z-index:4; }
.bk-ev.st-wait{ background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 13%, var(--surface)) 0 6px, var(--surface) 6px 12px); outline:1px dashed color-mix(in srgb, var(--c) 55%, transparent); outline-offset:-1px; }
.bk-ev em{ position:absolute; top:5px; right:6px; display:flex; gap:3px; font-style:normal; }
.bk-ev em i{ font-style:normal; font-size:9.5px; font-weight:800; padding:1px 5px; border-radius:6px; background:var(--c); color:#fff; }
.bk-ev em i.dep{ background:var(--gold); color:#1a1300; }
.bk-ev.xs{ padding:3px 6px; justify-content:center; }
.bk-ev.xs b{ padding-right:0; }
.bk-ev.xs em{ display:none; }
.bk-free{ position:absolute; left:4px; right:6px; border:1.5px dashed var(--line-strong); border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:700; color:var(--ink-faint); }
.bk-now{ position:absolute; left:56px; right:0; height:2px; background:#EA4335; z-index:3; pointer-events:none; }
.bk-now::before{ content:""; position:absolute; left:-6px; top:-4px; width:10px; height:10px; border-radius:50%; background:#EA4335; }
.bk-pop{ position:absolute; z-index:10; width:280px; background:var(--surface); border:1px solid var(--line-strong); border-radius:16px; padding:14px 16px; box-shadow:0 24px 60px var(--shadow-lg); font-size:13px; animation:viewIn .25s var(--ease) both; }
.bk-pop-h{ display:flex; gap:10px; align-items:flex-start; }
.bk-pop-h i{ flex:none; width:12px; height:12px; border-radius:4px; background:var(--c); margin-top:4px; }
.bk-pop-h b{ font-size:15px; line-height:1.3; flex:1; }
.bk-pop-h button{ border:0; background:transparent; color:var(--ink-faint); font-size:15px; cursor:pointer; }
.bk-pop p{ margin:6px 0 10px 22px; color:var(--ink-soft); }
.bk-pop dl{ display:grid; grid-template-columns:auto 1fr; gap:6px 12px; margin:0 0 12px 22px; }
.bk-pop dt{ color:var(--ink-faint); }
.bk-pop dd{ margin:0; font-weight:700; }
.bk-pop .pill{ margin-left:22px; }
.bk-pop-a{ display:flex; gap:6px; margin:12px 0 0 22px; }
.bk-pop-a span{ font-size:12px; font-weight:700; padding:6px 10px; border-radius:999px; border:1px solid var(--line-strong); }
@media (max-width:760px){ .bk-title{ font-size:15px; width:100%; order:-1; } .bk-seg{ display:none; } }

/* ---------- compare: the balance ---------- */
@property --tilt{ syntax:"<angle>"; inherits:true; initial-value:0deg; }
/* a top-pan balance: posts rise from the beam ends, so the load stacks freely on the plates.
   --L beam length, --pw plate width, --py pivot height; cqw = the stage's own width */
.s-scale-stage{ position:relative; height:360px; margin-top:6px; container-type:inline-size; --L:min(560px, 60cqw); --pw:min(236px, 37cqw); --py:262px; --post:40px; --tilt:0deg;
  --m-hi:#E4F0E8; --m-mid:#A9C4B2; --m-lo:#5F7E6A; transition:--tilt 1.8s cubic-bezier(.34,1.4,.5,1) .9s; }
.s-scale.in .s-scale-stage{ --tilt:7deg; }
.s-base{ position:absolute; left:50%; bottom:4px; width:210px; height:16px; transform:translateX(-50%); border-radius:8px 8px 5px 5px; background:linear-gradient(var(--m-hi), var(--m-lo)); box-shadow:0 14px 26px var(--shadow); }
.s-base::before{ content:""; position:absolute; left:50%; top:-9px; width:120px; height:11px; transform:translateX(-50%); border-radius:6px 6px 0 0; background:linear-gradient(var(--m-hi), var(--m-mid)); }
.s-pole{ position:absolute; left:50%; top:var(--py); bottom:28px; width:24px; transform:translateX(-50%); clip-path:polygon(32% 0, 68% 0, 100% 100%, 0 100%); background:linear-gradient(90deg, var(--m-lo), var(--m-hi) 45%, var(--m-mid) 60%, var(--m-lo)); }
.s-beam{ position:absolute; left:50%; top:var(--py); width:var(--L); height:9px; border-radius:5px; background:linear-gradient(#4ADE80, #15803D); box-shadow:0 4px 10px var(--shadow); transform:translate(-50%, -50%) rotate(var(--tilt)); }
.s-beam::before, .s-beam::after{ content:""; position:absolute; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #86EFAC, #15803D); }
.s-beam::before{ left:0; } .s-beam::after{ left:100%; }
.s-pivot{ position:absolute; left:50%; top:var(--py); width:30px; height:30px; border-radius:50%; transform:translate(-50%, -50%); background:radial-gradient(circle, var(--brand) 0 5px, transparent 6px), radial-gradient(circle at 35% 30%, var(--m-hi), var(--m-mid) 60%, var(--m-lo)); box-shadow:0 0 0 3px var(--surface), 0 6px 14px var(--shadow); }
.s-pan{ --side:-1; position:absolute; width:var(--pw); display:flex; flex-direction:column; align-items:center;
  left:calc(50% + var(--side) * var(--L) / 2 * cos(var(--tilt))); top:calc(var(--py) + var(--side) * var(--L) / 2 * sin(var(--tilt))); transform:translate(-50%, -100%); }
.s-pan.r{ --side:1; }
.s-plate{ width:100%; height:11px; border-radius:3px 3px 12px 12px / 3px 3px 11px 11px; background:linear-gradient(var(--m-hi), var(--m-mid) 55%, var(--m-lo)); box-shadow:0 8px 16px var(--shadow); position:relative; z-index:1; }
.s-post{ width:8px; height:var(--post); background:linear-gradient(90deg, var(--m-lo), var(--m-hi) 50%, var(--m-lo)); }
.s-load{ align-self:stretch; display:flex; flex-direction:column-reverse; align-items:center; gap:6px; padding-bottom:5px; }
.s-tier{ display:flex; justify-content:center; gap:6px; }
/* the weights: white blocks so every brand logo reads in both themes */
.s-brick{ --bw:58px; width:var(--bw); height:var(--bw); display:grid; place-items:center; border-radius:12px; background:#fff; border:1px solid rgba(15,26,20,.08); box-shadow:0 6px 14px var(--shadow), inset 0 -3px 0 rgba(15,26,20,.06);
  opacity:0; transform:translateY(-70px); transition:opacity .35s, transform .6s cubic-bezier(.34,1.5,.5,1); transition-delay:calc(.15s + var(--i) * .1s); }
.s-brick img, .s-brick svg{ width:calc(var(--bw) * .52); height:calc(var(--bw) * .52); object-fit:contain; }
.s-brick svg{ color:#3D4D44; }
.s-scale.in .s-brick{ opacity:1; transform:none; }
.s-ours{ width:auto; height:auto; padding:16px 18px; box-shadow:0 10px 26px var(--btn-glow, rgba(21,128,61,.25)), 0 0 0 2px var(--brand); }
.s-ours img{ width:92px; height:auto; }
.s-scale-legend{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:8px; }
.s-scale-legend > div{ display:flex; flex-direction:column; gap:10px; padding:16px; border-radius:16px; border:1px solid var(--line); }
.s-scale-legend .us{ border-color:var(--brand); background:linear-gradient(170deg, var(--brand-soft), transparent 60%); }
.s-scale-legend b{ font-size:14px; }
.s-sum-n{ font-family:var(--font-mono); font-size:clamp(24px,3vw,32px); font-weight:800; }
.s-sum-n small{ font-size:13px; color:var(--ink-faint); font-weight:600; margin-left:2px; }
.us .s-sum-n{ color:var(--brand-text); }
.them .s-sum-n{ color:var(--red); }
.s-scale-legend .s-checks{ align-content:start; }
.s-bill{ list-style:none; margin:0; padding:0; display:grid; gap:9px; flex:1; }
.s-bill li{ display:grid; grid-template-columns:32px 1fr auto; gap:10px; align-items:center; }
.s-bill .s-lg{ width:32px; height:32px; border-radius:9px; background:#fff; border:1px solid rgba(15,26,20,.08); display:grid; place-items:center; }
.s-bill .s-lg img{ width:20px; height:20px; object-fit:contain; }
.s-bill b{ display:block; font-size:13.5px; }
.s-bill small{ display:block; font-size:12px; color:var(--ink-faint); line-height:1.35; }
.s-bill em{ font-style:normal; font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.s-bill-staff{ padding-top:9px; border-top:1px dashed var(--line-strong); }
.s-bill-staff .s-lg{ background:linear-gradient(#E0413A, #A91E1E); border-color:transparent; color:#fff; }
.s-bill-staff .s-lg svg{ width:17px; height:17px; }
.s-bill-staff em{ color:var(--red); }
.s-scale-legend .btn{ justify-content:center; margin-top:auto; }
.s-scale .s-note{ margin-top:12px; }
@media (max-width:720px){
  .s-scale-stage{ height:290px; --L:60cqw; --pw:37cqw; --py:218px; --post:28px; }
  .s-scale.in .s-scale-stage{ --tilt:8deg; }
  .s-base{ width:150px; } .s-base::before{ width:84px; }
  .s-brick{ --bw:calc((37cqw - 12px) / 3); border-radius:9px; }
  .s-ours{ padding:10px; } .s-ours img{ width:62px; }
  .s-scale-legend{ grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce){ .s-scale-stage, .s-brick{ transition:none; } }

/* ---------- flow: the services each module connects to ---------- */
/* left/top are the centre; logos sit on white in both themes, like app icons */
.s-sat{ position:absolute; width:42px; height:42px; margin:-21px 0 0 -21px; display:grid; place-items:center; border-radius:50%; background:#fff; border:1.5px solid var(--brand); box-shadow:0 0 0 3px var(--brand-soft), 0 4px 14px var(--shadow); opacity:0; }
.s-sat img{ width:26px; height:26px; object-fit:contain; }
.s-sat::after{ content:attr(data-n); position:absolute; left:50%; top:calc(100% + 6px); transform:translateX(-50%); padding:3px 8px; border-radius:6px; background:var(--ink); color:var(--bg); font-size:11px; font-weight:700; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s; z-index:2; }
.s-sat:hover::after{ opacity:1; }
.s-sw{ fill:none; stroke:var(--ink-faint); stroke:color-mix(in srgb, var(--brand) 45%, var(--ink-faint)); stroke-width:1.6; stroke-dasharray:4 4; opacity:0; }