/* =====================================================================================
   SDA · Service page "Atlas ERP" (Figma 2214:31031 → frame 1086:7608)
   Reused unchanged: css/home/* (homepage prototype) and css/service.css (Custom dashboards page:
   ride-over panels, scaled 1440 frames, reveal, modules accordion, "What you get" grid, What we've built,
   ROI teaser). This file holds the ERP layout, the new sections and the overrides for reused blocks.
   ===================================================================================== */

/* ---------- ride stack: 9 layers ---------- */
.r8{z-index:8}.r9{z-index:9}
.ride:not(.r1)>.pin,.ride:not(.r1)>.zone{border-radius:calc(40px * var(--s)) calc(40px * var(--s)) 0 0;box-shadow:0 -30px 80px -20px rgba(0,0,0,.55)}
.r3>.runway,.r4>.runway,.r7>.runway{height:100vh}
.r2>.runway{height:160vh}   /* savings: hold ≈ 50vh fully in view before the next panel rides over (Yuliia) */
.r5>.runway{height:130vh}   /* What we've built: the screens stay in view a moment before the ROI panel covers them */
.r6>.runway,.r8>.runway{height:140vh}
#zD{overflow:clip}

/* ---------- shared bits ---------- */
.sv-h.x72{font-size:56px;letter-spacing:.84px}   /* all section titles = Heading/3XS */
.sv-eye{margin:0;font:500 24px/1.2 var(--rubik);letter-spacing:.36px;text-transform:uppercase;color:var(--yellow)}
.sv-sub{margin:0;width:670px;max-width:100%;font:400 20px/1.5 var(--rubik);color:#959595}
.ph-tag{position:absolute;left:16px;top:16px;z-index:2;padding:6px 8px;border:1px dashed rgba(255,255,255,.6);border-radius:4px;font:500 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.85);pointer-events:none}

/* square CTA buttons (Figma "Button" 153 × 153, same family as the ROI / footer squares) */
.sq-row{display:flex;gap:20px}
.sq{flex:none;width:153px;height:153px;padding:12px;border-radius:8px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;
  font:500 16px/1.5 var(--mono);transition:background .25s,translate .35s var(--ease),box-shadow .35s var(--ease)}
.sq span{align-self:stretch}
.sq svg{transition:transform .35s var(--ease)}
.sq:hover{translate:0 -3px}.sq:hover svg{transform:translate(2px,-2px)}
.sq:active{translate:0 1px}
.sq-yel{background:var(--yellow);color:#131313;box-shadow:6.4px 8px 22.4px rgba(5,5,5,.29),22.4px 35.2px 41.6px rgba(5,5,5,.26),51.2px 78.4px 56px rgba(5,5,5,.15)}
.sq-yel:hover{background:#ffe84d}
.sq-glass{background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px var(--yellow);color:var(--yellow);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}
.sq-glass:hover{background:transparent;box-shadow:inset 0 0 0 1px #fff;color:#fff}
.sq-glass:active{background:rgba(0,0,0,.2);box-shadow:inset 0 0 0 1px #b39d13;color:#b39d13}
.sq-blue{background:var(--blue);color:#fff}
.sq-blue:hover{background:#2615b0}
.sq-line{box-shadow:inset 0 0 0 1px var(--blue);color:var(--blue)}
.sq-line:hover{box-shadow:inset 0 0 0 1px #211587;color:#211587}

/* caution tapes: the words run along the tape, each tape in its own direction */
.tape{position:absolute;height:64px;padding:8px;overflow:hidden;transform-origin:0 0;pointer-events:none;
  -webkit-backdrop-filter:blur(14.24px);backdrop-filter:blur(14.24px);
  box-shadow:6.4px 8px 22.4px rgba(5,5,5,.29),22.4px 35.2px 41.6px rgba(5,5,5,.26),51.2px 78.4px 56px rgba(5,5,5,.15),91.2px 139.2px 67.2px rgba(5,5,5,.04)}
.tape-run{display:flex;width:max-content;animation:tapeRun var(--dur,70s) linear infinite}
.tape[data-dir="-1"] .tape-run{animation-direction:reverse}
.tape-run span{flex:none;font:800 40px/48px var(--rubik);letter-spacing:.6px;text-transform:uppercase;color:#131313;white-space:pre}
@keyframes tapeRun{to{transform:translateX(-50%)}}
.t-grey{background:#535353}
.t-yel{background:#9c8910}

/* ================= 0 · header (Figma Header instance 1089:15120) ================= */
.er-header{justify-content:flex-start}
.er-menu{display:flex;gap:48px;margin-left:48px}
.er-menu a{font:500 16px/1.5 var(--mono);color:var(--text2);padding:16px 0;white-space:nowrap;transition:color .2s}
.er-menu a:hover{color:#fff}
.er-hright{margin-left:auto;display:flex;align-items:center;gap:24px}
/* language dropdown — UI Kit "Dropdown" 1343:19495, dark theme: Filled #191919 → Hover #282828 → Focused #000 + 1px white inside, caret up; list #191919 r8, 48px items */
.dd{position:relative}
.dd-trg{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:8px;height:56px;padding:16px;border-radius:8px;background:#191919;
  font:500 16px/1.5 var(--mono);color:#fff;cursor:pointer;transition:background .2s,color .2s,box-shadow .2s}
.dd-trg svg{flex:none;transition:transform .3s var(--ease)}
.dd-trg:hover{background:#282828;color:#dcdcdc}
.dd.open .dd-trg{background:#000;color:#dcdcdc;box-shadow:inset 0 0 0 1px #fff}
.dd.open .dd-trg svg{transform:rotate(180deg)}   /* Caret Down → Caret Up */
.dd-trg:focus-visible{outline:2px solid var(--yellow);outline-offset:3px}
.dd-list{position:absolute;left:0;top:64px;min-width:124px;margin:0;padding:0;list-style:none;border-radius:8px;background:#191919;overflow:hidden;z-index:20;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.7);opacity:0;visibility:hidden;translate:0 -6px;transition:opacity .2s var(--ease),translate .3s var(--ease),visibility 0s .3s}
.dd.open .dd-list{opacity:1;visibility:visible;translate:0 0;transition:opacity .2s var(--ease),translate .3s var(--ease)}
.dd-list li{height:48px;padding:12px 16px;font:500 16px/1.5 var(--mono);color:#dcdcdc;cursor:pointer;transition:background .15s,color .15s}
.dd-list li:hover,.dd-list li.act{background:#282828;color:#fff}
.dd-list li[aria-selected="true"]{color:#fff}
@media (prefers-reduced-motion:reduce){.dd-list,.dd-trg svg{transition:none}}

/* ================= 1 · hero (Figma 1086:7609) ================= */
#svHero{overflow:clip}
#heroFr{height:932px}
#heroFr>*{position:absolute}
.eh-eye{left:40px;top:96px;margin:0;font:500 24px/1.2 var(--rubik);letter-spacing:.36px;text-transform:uppercase;color:var(--text2);z-index:3}
#heroFr h1{left:40px;top:133px;width:1015px;font-size:56px;letter-spacing:.84px;z-index:3}   /* Heading/3XS */
#heroFr h1 span{color:var(--yellow)}   /* Figma: "Stop digging" in accent yellow */
.eh-lead{left:40px;top:291px;width:498px;margin:0;font:400 20px/1.5 var(--rubik);z-index:3}
.eh-btns{left:40px;top:391px;display:flex;gap:20px;z-index:4}   /* homepage hero buttons: Button Large, Default form (56 px) */
.t-grey:not(.t-long){left:-74px;top:413px;width:1297px;transform:rotate(4.55deg);z-index:1}
.t-yel{left:-67px;top:657px;width:1641px;transform:rotate(-18.92deg);z-index:1;--dur:90s}
/* Pulse dashboard = homepage NovaPulse card (css/home/00-base-hero: .stage/.card3d/.slab/.plastic/.desc) */
#heroFr .eh-stage{left:780px;top:133px;width:620px;height:496px;z-index:2}   /* Figma 2781:42741: the whole dashboard down to the Finances row, nothing cut */
.eh-plastic{aspect-ratio:1239/990;border-radius:14px;overflow:hidden;background:#f5f5f5;
  box-shadow:0 40px 80px -34px rgba(0,0,0,.7),0 12px 30px -14px rgba(0,0,0,.45),12.7px 7.9px 33px rgba(47,30,193,.12),50px 33px 60px rgba(47,30,193,.1)}
.eh-plastic img{display:block;width:100%;height:100%;max-width:none;user-select:none;-webkit-user-drag:none;pointer-events:none}
/* zones react like the homepage NovaPulse: the active block lifts on a white surface card with a soft shadow; nothing dims */
.ez{all:unset;position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:calc(var(--h) * 1%);border-radius:10px;cursor:pointer;z-index:1}
.ez::before{content:"";position:absolute;inset:-6px;border-radius:14px;background:#fff;opacity:0;transform:scale(.985);
  box-shadow:0 24px 48px -20px rgba(19,19,40,.42),0 8px 18px -8px rgba(19,19,40,.18);transition:opacity .45s var(--ease),transform .55s var(--eo)}
.ez i{position:absolute;inset:0;border-radius:10px;background:url(../images/hero-pulse-full.webp) no-repeat;
  background-size:calc(10000% / var(--w)) calc(10000% / var(--h));
  background-position:calc(var(--x) / (100 - var(--w)) * 100%) calc(var(--y) / (100 - var(--h)) * 100%);
  opacity:0;transition:opacity .2s var(--ease),transform .55s var(--eo)}
.ez.on{z-index:2}
.ez.on::before{opacity:1;transform:scale(1)}
.ez.on i{opacity:1;transform:translateY(-3px) scale(1.015)}
.ez:focus-visible{outline:2px solid var(--yellow);outline-offset:8px}
.card3d.dragging .ez{cursor:grabbing}
#heroFr .eh-desc{left:660px;top:466px;z-index:5}
.eh-desc{animation:rise .9s var(--ease) backwards .75s}   /* backwards: a filled animation would switch the glass off */
#heroFr .eh-desc .tr svg{color:#fff}
.eh-fade{display:none}
.eh-pills{left:0;top:744px;width:1440px;z-index:3;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.eh-track{display:flex;gap:12px;width:max-content;padding-right:12px;animation:runline 40s linear infinite}
.eh-pills:hover .eh-track{animation-play-state:paused}
.pill{flex:none;padding:9px 15px;border:1px solid #2f2f2f;border-radius:8px;font:500 16px/1.5 var(--mono);color:#959595;white-space:nowrap;
  background:rgba(19,19,19,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pill b{font-weight:500;color:var(--yellow)}
.pill.dup{display:block}
/* entrance (homepage 99-hero-entrance timing) */
.eh-eye{animation:rise .9s var(--ease) backwards .05s}
.eh-lead{animation:rise .9s var(--ease) backwards .3s}
.eh-btns{animation:rise .9s var(--ease) backwards .42s}
.er-header{animation-fill-mode:backwards!important}   /* a filled animation on an ancestor switches off backdrop blur */
.eh-pills{animation:rise .9s var(--ease) backwards .9s}
.tape{animation:tapeIn 1.1s var(--eo) backwards .2s}
.t-yel{animation-delay:.32s}
@keyframes tapeIn{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
#ehStage{animation:cardIn 1.2s var(--ease) backwards .3s}

/* ================= 2 · Your business isn't off-the-shelf (Figma 1217:36069) ================= */
#svShelf{overflow:clip}
#svShelf .sv-fr{padding:0 40px 144px;display:flex;flex-direction:column;gap:40px}
#svShelf .sv-h,#svShelf .sh-row{position:relative;z-index:1}
.t-long{left:-41px;top:301px;width:2900px;transform:rotate(4.44deg);z-index:0;--dur:120s}
.sh-row{display:flex;gap:20px;height:473px}
.sh-video{all:unset;box-sizing:border-box;position:relative;flex:none;width:842px;height:473px;border-radius:16px;background:#959595;display:grid;place-items:center;cursor:pointer;overflow:hidden}
.sh-video::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 70% at 50% 50%,rgba(255,255,255,.08),rgba(0,0,0,.08));pointer-events:none}
.sh-play{width:100px;height:100px;border-radius:50%;background:rgba(255,255,255,.35);display:grid;place-items:center;color:#fff;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:transform .5s var(--eo),background .3s}
.sh-play svg{margin-left:6px}
.sh-video:hover .sh-play{transform:scale(1.08);background:rgba(255,255,255,.45)}
.sh-video:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.sh-col{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between}
.sh-text p{margin:0;font:400 20px/1.5 var(--rubik);color:#fff}
.sh-text p+p{margin-top:30px}
.sh-col .sq-row{align-self:flex-end}

/* ================= 3 · See the money you could save (Figma 1132:1249 / 1154:31544) ================= */
#svSave .sv-fr{padding:80px 0;display:flex;flex-direction:column;gap:40px}
.sv-head2{display:flex;gap:20px;align-items:flex-end;padding:0 40px}
.sv-head2 .sv-h{flex:none;width:auto;white-space:nowrap}   /* one line on desktop */
@media (min-width:1200px){#svSave .sv-head2{position:relative}#svSave .sv-head2 .sv-lead{position:absolute;right:40px;top:0;width:325px}}   /* Figma: lead top-right, next to the title */
.sv-row2{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding:0 40px}
.sv-row2 .tg{margin:0}
.sv-lead{margin:0;width:497px;font:400 16px/1.5 var(--rubik);color:#131313;transition:opacity .3s var(--ease),translate .45s var(--eo)}
.sv-lead.swap{opacity:0;translate:0 8px}
.tg{position:relative;align-self:flex-start;margin:0 40px;display:flex;gap:4px;padding:4px;border-radius:8px;background:#f6f6f6}
.tg button{all:unset;position:relative;z-index:1;box-sizing:border-box;padding:14px 16px;font:500 24px/1.5 var(--mono);color:#535353;cursor:pointer;white-space:nowrap;transition:color .35s var(--ease)}
.tg button.on{color:#fff}
.tg button:not(.on):hover{color:#131313}
.tg button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
#saveTg button{font-size:16px;padding:12px 10px}   /* UI Kit Text Toggle, Size M (Yuliia) */
.tg-ind{position:absolute;left:4px;top:4px;bottom:4px;width:176px;border-radius:4px;background:var(--blue);transition:translate .55s var(--eo),width .55s var(--eo)}
.sg-grid{padding:0 40px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:220px;gap:8px}   /* Figma 1199:34637: 6 × 2 square cards, section fits one screen */
@media (min-width:1200px){.sg-grid .sg-total{grid-column:6;grid-row:1;padding:24px 20px}.sg-total .sg-per{font-size:24px}.sg-total .sg-sum{font-size:40px;letter-spacing:.6px;font-variant-numeric:normal}}   /* total = 6th card of row 1; Monospace/L + Heading/4XS */
.sg{position:relative;perspective:1400px}
.sg-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s var(--eo) var(--fd,0s)}
.sg.flip .sg-in{transform:rotateY(180deg)}
.sg:not(.sg-total){cursor:pointer;outline:none}
.sg.peek .sg-in{transition-duration:.7s;transition-delay:0s}
.sg:focus-visible .sg-face{box-shadow:inset 0 0 0 2px var(--blue)}
.sg-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:24px;border-radius:8px;background:#f6f6f6;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.f-without{transform:rotateY(180deg)}
.sg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.sg-ic{flex:none;width:48px;height:48px;color:var(--blue)}
.sg-logo{display:block;height:48px;width:auto;max-width:56px}
.sg-p{font:500 24px/1.5 var(--mono);color:#131313;font-variant-numeric:tabular-nums}
.sg-t h3{margin:0;font:500 16px/1.5 var(--rubik);letter-spacing:0;text-transform:uppercase;color:#131313}
.sg-t small{display:block;margin-top:8px;font:500 16px/1.5 var(--mono);color:#959595}
.sg-total{display:flex;flex-direction:column;justify-content:space-between;padding:40px;border-radius:8px;background:var(--blue);color:#fff;overflow:hidden}
.sg-total small{font:500 16px/1.5 var(--mono)}
.sg-per{display:block;font:500 32px/1.5 var(--mono);transition:opacity .25s}
.sg-per.swap{opacity:0}
.sg-sum{display:block;margin-top:8px;font:800 40px/1.2 var(--rubik);letter-spacing:.6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-total.bump{animation:sgBump .7s var(--eo)}
@keyframes sgBump{40%{transform:scale(1.025)}}

/* ================= 4 · What's inside — Custom dashboards "How we solve it" accordion, dark cards (Figma 1437:17075) ================= */
#svMods.ins .sv-fr{padding:80px 40px 144px;display:flex;flex-direction:column;gap:40px}
.ins-head{display:flex;flex-direction:column;gap:16px}
.ins .md-row{flex:none;height:600px}
.ins .md:not(.on){background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 45%,rgba(0,0,0,.12)),rgba(8,8,24,.42);-webkit-backdrop-filter:none;backdrop-filter:none;   /* glass: stat-card recipe from Custom dashboards */
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(255,255,255,.08),0 24px 48px -28px rgba(0,0,0,.6)}
.ins .md:not(.on)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 40% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 60%)}
.ins .md:not(.on):hover{background:rgba(255,255,255,.05)}
.ins .md.on{flex-basis:912px}
.ins .md-body{width:784px;color:#fff;gap:24px}
.ins .md-body h3{font-size:40px;letter-spacing:.6px}   /* Heading/4XS */
.ins .md-body p{max-width:784px}
.ins-tags{display:flex;flex-wrap:wrap;gap:16px}
.ins-tags span{padding:7px 15px;border:1px solid #2f2f2f;border-radius:8px;font:500 16px/1.5 var(--mono);color:#fff;white-space:nowrap}   /* secondary pill (as the inactive "Take a look" pills) */
.ins .md-img{top:auto!important;bottom:0;left:125px}
.ins .md-img img{width:787px;height:auto}
.ins-ph{width:787px;height:254px;border:1.5px dashed rgba(255,255,255,.18);border-bottom:0;border-radius:16px 16px 0 0;background:rgba(255,255,255,.03)}
.ins-ph .ph-tag{left:50%;top:50%;translate:-50% -50%;white-space:nowrap}

/* ================= 5 · industries line (Figma 1407:16226) ================= */
#svInd .sv-fr{padding:0 40px 144px}
.ind{margin:0 -40px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ind-run{display:flex;width:max-content;animation:runline 36s linear infinite}
.ind:hover .ind-run{animation-play-state:paused}
.ind-g{display:flex;gap:96px;padding-right:96px}
.ind-g span{font:500 40px/1.2 var(--rubik);letter-spacing:.6px;text-transform:uppercase;color:#fff;white-space:nowrap}   /* Title/L */

/* ================= 6 · How our AI is different (Figma 1154:27271) — new: the request flows through the diagram ================= */
#svAi .sv-fr{padding:0 0 144px}
.ai-dots{position:absolute;inset:-40px 0 0;pointer-events:none;will-change:transform;contain:strict;   /* static dot field rasterised once on its own layer */
  background-image:radial-gradient(circle,#3a3a3a 1.3px,transparent 1.8px);background-size:44px 44px;background-position:12px 8px;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 92%);mask:linear-gradient(180deg,transparent 0,#000 30%,#000 62%,transparent 92%)}
.ai-head{position:relative;padding:0 40px}
.ai-row{display:flex;gap:16px;align-items:stretch;justify-content:space-between}
.ai-tt{display:flex;flex-direction:column;justify-content:space-between;min-height:153px}   /* same height as the square CTAs */
.ai-row .sv-h{flex:none;width:900px;font-size:40px;letter-spacing:.6px}   /* Heading/4XS: title + diagram fit one screen */
.ai-dia{position:relative;margin:40px 40px 0;width:1360px;height:525px}
.ai-lines{position:absolute;left:0;top:0;width:1360px;height:525px;overflow:visible;pointer-events:none}
.ai-lines .ln{fill:none;stroke:rgba(93,230,181,.55);stroke-width:1}
.ai-lines .ln.q{stroke:none}
.ai-box{position:absolute;isolation:isolate;display:flex;flex-direction:column;gap:8px;padding:32px;border-radius:8px;background:rgba(19,19,19,.4);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);--rim:linear-gradient(135deg,rgba(47,30,193,.95),rgba(47,30,193,.25) 55%,rgba(255,255,255,.08));
  transition:background .5s var(--ease)}
.ai-box::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .5s}
.ai-box h3{margin:0;font:500 24px/1.2 var(--rubik);letter-spacing:.36px;text-transform:uppercase;color:#fff}
.ai-box p{margin:0;font:500 16px/1.5 var(--mono);color:#959595}
.ai-ask{left:80px;top:159px;width:230px;height:127px}
.ai-core{left:429px;top:115px;width:446px;height:216px;gap:24px;--rim:linear-gradient(135deg,rgba(93,230,181,.95),rgba(93,230,181,.35) 60%,rgba(93,230,181,.6))}
.ai-core h3{font-size:32px;letter-spacing:.48px}
.ai-core ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font:500 16px/1.5 var(--mono)}
.ai-core li:nth-child(1){color:#f6f6f6}.ai-core li:nth-child(2){color:#dcdcdc}.ai-core li:nth-child(3){color:#959595}
.ai-out{position:absolute;left:993px;top:0;width:287px;display:flex;flex-direction:column;gap:32px}
.ai-out .ai-box{position:relative;height:127px}
.ai-box.lit{background:rgba(255,255,255,.05)}
/* glow = its own layer that only fades (no animated box-shadow) */
.ai-box::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;opacity:0;will-change:opacity;
  box-shadow:0 0 0 1px rgba(255,255,255,.04),0 18px 50px -20px var(--glowc,rgba(47,30,193,.8));transition:opacity .6s var(--ease)}
.ai-box.lit::after{opacity:1}
.ai-core.lit{--glowc:rgba(93,230,181,.55)}
.ai-ask.lit{--glowc:rgba(255,224,27,.45)}
.ai-core li{transition:color .4s,translate .5s var(--eo)}
.ai-core.think li{animation:aiLine .9s var(--ease) both}
.ai-core.think li:nth-child(2){animation-delay:.12s}.ai-core.think li:nth-child(3){animation-delay:.24s}
@keyframes aiLine{30%{color:#fff;translate:4px 0}}
.ai-dot{position:absolute;left:0;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;z-index:2;pointer-events:none;
  transform:translate(var(--x,0px),var(--y,0px));opacity:var(--o,1);will-change:transform,opacity}
.ai-dot.y{background:var(--yellow);box-shadow:0 0 14px rgba(255,224,27,.6);--x:374px;--y:218px}
.ai-dot.g{background:#5de6b5;box-shadow:0 0 14px rgba(93,230,181,.6)}
.ai-dot.b{background:var(--blue);box-shadow:0 0 14px rgba(47,30,193,.9);--x:949px;--y:223px}
#aiDg1{--x:941px;--y:132px}#aiDg2{--x:912px;--y:243px}
.ai-legend{position:absolute;left:0;top:0;margin:0;padding:0;list-style:none;display:flex;gap:32px;font:400 12px/1.5 var(--rubik);color:#959595}
.ai-legend li{display:flex;align-items:center;gap:8px}
.ai-legend i{width:8px;height:8px;border-radius:50%}
.ai-legend .y{background:var(--yellow)}.ai-legend .g{background:#5de6b5}.ai-legend .b{background:var(--blue)}

/* ================= 7 · A dozen places — the "What you get" grid (Figma 1086:11830) ================= */
.fg-head{display:flex;flex-direction:column;gap:16px}
.wg-c svg{color:#fff}

/* ================= 8 · Proof (Figma 1086:12100) ================= */
#svProof .sv-fr{padding:0 40px 144px;display:flex;gap:8px;align-items:stretch}
.pf-left{flex:none;width:676px;display:flex;flex-direction:column;gap:24px;padding-top:9px}
.pf-head{display:flex;flex-direction:column;gap:16px}
.pf-head .sv-sub{margin-top:8px}
.pf-left{justify-content:space-between}
.pf-row{display:flex;gap:8px}
.pf-row .pf{flex:1}
.pf-right{flex:none;width:676px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf{position:relative;min-width:0;height:326px;display:flex;flex-direction:column;gap:8px;padding:40px;border-radius:8px;color:#fff;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 45%,rgba(0,0,0,.12)),rgba(8,8,24,.42);-webkit-backdrop-filter:none;backdrop-filter:none;   /* glass look without backdrop blur: a tinted fill + rim, no per-frame blur over the animated gradient (perf, v24) */
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(255,255,255,.08),0 24px 48px -28px rgba(0,0,0,.6)}
/* proof cards: plain blur 7 like the homepage glass (the per-card SVG liquid filter was dropped for performance) */
.pf::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.1) 22%,rgba(255,255,255,0) 50%,rgba(255,255,255,.06) 78%,rgba(255,255,255,.26) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pf::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 40% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 60%)}
.pf>*{position:relative;z-index:1}
.pf.hl::before,.pf.hl::after{display:none}
.pf b{display:flex;align-items:center;font:800 56px/1.2 var(--rubik);letter-spacing:.84px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pf p{margin:0;font:400 16px/1.5 var(--rubik);color:#959595}
.pf.hl{background:#fff;color:#131313;box-shadow:var(--glow);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.pf.hl p{color:#535353}
.pf-12 svg{width:48px;height:48px;margin:0 4px}

/* ================= 9 · Built by SDA (Figma 1086:12133, white) ================= */
#svSda .sv-fr{padding:72px 40px;display:flex;align-items:flex-start;gap:56px}
.sda-art{position:relative;flex:none;width:612px;height:619px;pointer-events:none}
.sda-art .dash{position:absolute;left:-4px;top:-5px}
.sda-art img{display:block;width:612px;max-width:none;user-select:none;-webkit-user-drag:none}
.sda-col{flex:none;width:672px;display:flex;flex-direction:column;gap:32px}
.sda-text{display:flex;flex-direction:column;gap:16px}
.sda-text p{margin:0;font:400 16px/1.5 var(--rubik);color:#535353}   /* Body text/S/Regular */
#sdaArt .dash{animation:none}
html.js #sdaArt:not(.in) .dash{opacity:0;transform:translateY(60px) rotate(-2deg)}
#sdaArt .dash{transition:opacity .9s var(--ease),transform 1.2s var(--eo),translate .9s var(--eo)}

/* ================= 10 · Two very different ways (Figma 1086:12630) ================= */
#svTwo .sv-fr{padding:72px 40px 144px;display:flex;flex-direction:column;gap:32px}   /* title → toggle → cards fit one screen (≈ 730 px) */
.tw-row{display:flex;gap:8px;align-items:stretch}
.tw{flex:1;min-width:0;min-height:662px;display:flex;flex-direction:column;gap:32px;padding:40px;border-radius:8px;background:#191919}
.tw-head h3{margin:0;font:800 40px/1.2 var(--rubik);letter-spacing:.6px;text-transform:uppercase;color:#959595}
.tw-head p{margin:8px 0 0;font:500 16px/1.5 var(--mono);color:#959595}
.tw ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:16px}
.tw li{display:flex;gap:10px;font:400 20px/1.5 var(--rubik);color:#959595}
.tw li svg{flex:none;width:24px;height:24px;margin-top:3px;color:#535353}
.tw.hl{background:#fff;box-shadow:var(--glow)}
.tw.hl h3{color:#131313}
.tw.hl .tw-head p{color:#535353}
.tw.hl li{color:#131313}
.tw.hl li svg{color:#131313}
/* the Atlas list ticks in, one item after another, when the card appears */
html.js .tw.hl:not(.in) li{opacity:.25}
html.js .tw.hl:not(.in) li svg{transform:scale(.4);opacity:0}
.tw.hl li{transition:opacity .6s var(--ease) calc(.45s + var(--i) * .14s)}
.tw.hl li svg{transition:transform .55s cubic-bezier(.34,1.6,.64,1) calc(.45s + var(--i) * .14s),opacity .3s calc(.45s + var(--i) * .14s)}

/* ================= 13 · FAQ — homepage component, receipts on the left (Figma 1086:12705) ================= */
.fq-card.fq-rcpt{height:auto;overflow:visible;border-radius:0;isolation:auto}
.fq-rcpt img{display:block;width:494px;max-width:none;height:auto;transition:transform 1s var(--eo),rotate 1s var(--eo)}
.fq-rcpt:hover img{transform:none;rotate:-1.2deg}
.fq-a-in p+p{margin-top:16px}
.frameFaq{padding-top:80px}
.fq-right h2{font-size:56px;letter-spacing:.84px}   /* Heading/3XS */

/* ================= reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  .ind-run{animation:none}
  .tape-run,.tape,.eh-eye,.eh-lead,.eh-btns,.eh-pills,.eh-track,#ehStage,.eh-desc{animation:none!important}
  .ez{transition:none}
  .sg-in{transition:none}
  .tw.hl li,.tw.hl li svg{transition:none}
  html.js .tw.hl:not(.in) li,html.js .tw.hl:not(.in) li svg{opacity:1;transform:none}
  html.js #sdaArt:not(.in) .dash{opacity:1;transform:none}
  .ai-core.think li{animation:none}
}
@media (min-width:1200px){.eh-stage img,.sda-art img,.ins .md-img img{max-width:none}}

/* =====================================================================================
   MOBILE + TABLET (≤1199px) — same building blocks as the Custom dashboards page
   ===================================================================================== */
@media (max-width:1199px){
  .er-hright,.er-menu{display:none}
  .er-header .burger{margin-left:auto}
  .r3>.runway,.r4>.runway,.r7>.runway{height:70vh}
  .r2>.runway{height:100vh}   /* savings: ≈ 30vh hold after its last row */
  .r5>.runway{height:95vh}
  .r6>.runway,.r8>.runway{height:100vh}
  .ride:not(.r1)>.pin,.ride:not(.r1)>.zone{border-radius:28px 28px 0 0}
  .sv-h.x72{font-size:32px!important}
  .sv-eye{font-size:16px;letter-spacing:.24px}
  .sv-sub{font-size:16px}
  .sq{width:auto;flex:1;max-width:200px;height:120px}
  .eh-btns{flex-direction:column;align-items:stretch;gap:12px}
  .eh-btns .btn{width:100%;height:56px;justify-content:space-between;padding:16px 16px 16px 20px}   /* homepage m1 */

  /* hero: copy → buttons → dashboards on the tapes → highlights ticker */
  #heroFr{height:auto;padding:84px var(--gx) 40px;display:flex;flex-direction:column;gap:20px;position:relative}
  #heroFr>*{position:relative;left:auto!important;top:auto!important;width:auto!important}
  .eh-eye{order:0;font-size:14px;letter-spacing:.21px}
  #heroFr h1{order:1;margin:0}
  .eh-lead{order:2;font-size:16px;max-width:520px}
  .eh-btns{order:3;margin-top:8px}
  #heroFr .eh-stage{order:4;position:relative!important;height:auto;margin-top:12px}
  #heroFr .eh-desc{order:5;position:relative!important;margin:-56px 0 0 12px;width:min(300px,calc(100% - 24px))!important;z-index:5}
  .tape{height:40px;padding:5px 8px}
  .tape-run span{font-size:24px;line-height:30px;letter-spacing:.36px}
  .t-yel{position:absolute!important;left:-60px!important;top:auto!important;bottom:150px;width:170%!important;transform:rotate(-14deg)}
  .eh-pills{order:6;margin:0 calc(var(--gx) * -1);overflow:hidden;
    -webkit-mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
  .pill{font-size:14px;padding:8px 12px}

  /* off-the-shelf */
  #svShelf .sv-fr{padding:24px var(--gx) 72px;gap:24px}
  .t-long{position:relative!important;left:auto;top:auto;order:2;margin:8px -60px;width:auto!important;transform:rotate(-3deg)}
  #svShelf .sv-h{order:1}
  .sh-row{order:3;flex-direction:column;height:auto;gap:24px}
  .sh-video{width:100%;height:auto;aspect-ratio:842/473}
  .sh-play{width:72px;height:72px}
  .sh-play svg{width:30px;height:30px}
  .sh-text p{font-size:16px}
  .sh-text p+p{margin-top:16px}
  .sh-col{gap:24px}
  .sh-col .sq-row{align-self:stretch}

  /* savings */
  #svSave .sv-fr{padding:48px 0 72px;gap:24px}
  .sv-head2{flex-direction:column;align-items:flex-start;gap:16px;padding:0 var(--gx)}
  .sv-head2 .sv-h{width:auto;white-space:normal}
  .sv-row2{flex-direction:column;align-items:stretch;padding:0 var(--gx);gap:16px}
  .ai-tt{min-height:0;gap:12px}
  .sv-lead{width:auto;font-size:16px}
  .tg{margin:0 var(--gx);align-self:stretch}
  .tg button{flex:1;text-align:center;font-size:16px;padding:12px 8px}
  .sg-grid{padding:0 var(--gx);grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .sg{aspect-ratio:1}
  .sg-face{padding:16px}
  .sg-ic{width:40px;height:40px}
  .sg-logo{height:40px;max-width:46px}
  .sg-p{font-size:16px}
  .sg-t h3{font-size:15px;letter-spacing:.22px}
  .sg-t small{font-size:12px;margin-top:4px}
  .sg-total{grid-column:auto;order:99;aspect-ratio:1;padding:16px;flex-direction:column;align-items:stretch;justify-content:space-between;gap:12px}   /* fills the empty cell next to the last card (11 cards + total) */
  .sg-total>div{text-align:right}
  .sg-per{font-size:16px}
  .sg-sum{font-size:24px;letter-spacing:.36px;margin-top:2px}

  /* what's inside: tablets = vertical accordion, phones = stacked sticky cards (both from the dashboards page), dark cards */
  #svMods.ins .sv-fr{padding:56px var(--gx) 80px;gap:24px}
  .ins .md-row{height:auto}
  .ins .md-body{width:auto;gap:16px}
  .ins .md-body h3{font-size:22px}
  .ins .md-body p{font-size:16px}
  .ins-tags{gap:8px}
  .ins-tags span{font-size:13px;padding:5px 10px}
  .ins .md-img{position:relative;left:auto!important;bottom:auto;margin:24px 0 0 0}
  .ins .md-img,.ins .md-img.ins-ph{height:auto}
  .ins .md-img img{width:100%;max-width:none}
  .ins-ph{width:100%;aspect-ratio:787/254}

  /* industries */
  #svInd .sv-fr{padding:0 var(--gx) 72px}
  .ind{margin:0 calc(var(--gx) * -1)}
  .ind-g{gap:48px;padding-right:48px}
  .ind-g span{font-size:22px;letter-spacing:.33px}

  /* AI: the same flow stacked top → bottom */
  #svAi .sv-fr{height:auto;padding:0 0 80px}
  .ai-head{padding:0 var(--gx)}
  .ai-row{flex-direction:column;gap:24px}
  .ai-row .sv-h{width:auto;font-size:28px!important}
  .ai-row{align-items:stretch}
  .ai-row .sq-row{align-self:stretch}
  .ai-dia{margin:40px var(--gx) 0;width:auto;height:auto;display:flex;flex-direction:column;gap:28px}
  .ai-lines,.ai-dot{display:none}
  .ai-box,.ai-out{position:relative;left:auto;top:auto;width:auto;height:auto}
  .ai-box{padding:20px}
  .ai-box h3{font-size:18px}
  .ai-core h3{font-size:22px}
  .ai-box p,.ai-core ul{font-size:14px}
  .ai-core{gap:16px}
  .ai-out{gap:12px}
  .ai-ask::after,.ai-core::after{content:"";position:absolute;left:50%;bottom:-28px;width:1px;height:28px;background:linear-gradient(180deg,rgba(255,224,27,.8),rgba(93,230,181,.8))}
  .ai-core::after{background:linear-gradient(180deg,rgba(93,230,181,.8),rgba(47,30,193,.9))}
  .ai-legend{position:relative;left:auto;top:auto;flex-wrap:wrap;gap:12px 20px}

  /* a dozen places */
  #svWyg .fg-head{gap:12px}

  /* proof */
  #svProof .sv-fr{flex-direction:column;padding:0 var(--gx) 80px}
  .pf-left,.pf-right{width:auto;align-self:stretch}
  .pf-left{padding-top:0}
  .pf{height:auto;min-height:170px;padding:20px;gap:8px;justify-content:space-between}
  .pf b{font-size:36px;letter-spacing:.54px}
  .pf p{font-size:14px}
  .pf-12 svg{width:36px;height:36px}

  /* built by SDA */
  #svSda .sv-fr{height:auto;padding:48px var(--gx) 80px;display:flex;flex-direction:column;gap:24px}
  .sda-art{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:875/885;max-width:560px}
  .sda-art .dash{left:0;top:0;width:100%}
  .sda-art img{width:100%}
  .sda-col{position:relative;left:auto;top:auto;width:auto;gap:24px;flex:auto}
  .sda-text{gap:16px}
  .sda-text p{font-size:16px}

  /* two ways */
  #svTwo .sv-fr{padding:56px var(--gx) 80px;gap:24px}
  .tw-row{flex-direction:column}
  .tw{min-height:0;padding:24px;gap:20px}
  .tw-head h3{font-size:26px;letter-spacing:.39px}
  .tw-head p{font-size:14px}
  .tw ul{gap:12px}
  .tw li{font-size:16px}
  .tw li svg{width:20px;height:20px;margin-top:2px}

  /* FAQ receipts */
  .fq-card.fq-rcpt{aspect-ratio:auto!important;display:flex;justify-content:center}
  .frameFaq{padding-top:48px}
  .eh-pills{margin:0 calc(var(--gx) * -1)}
  .fq-rcpt img{width:min(100%,380px)}
}
@media (min-width:600px) and (max-width:1199px){
  .eh-btns{flex-direction:row}.eh-btns .btn{flex:1;width:auto}   /* homepage m2 */
  .sv-h.x72{font-size:44px!important}
  .sg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sg-face{padding:24px}
  .sg-t h3{font-size:16px}
  .sg-total{padding:24px}.sg-per{font-size:20px}.sg-sum{font-size:32px;letter-spacing:.48px}
  .pf-row,.pf-right{gap:8px}
  .tw-row{flex-direction:row}
  .ai-out{flex-direction:row}
  .ai-out .ai-box{flex:1}
}
@media (min-width:900px) and (max-width:1199px){
  .sg-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sg-total{grid-column:auto;order:0;flex-direction:column;align-items:flex-start;aspect-ratio:1}
  .sg-total>div{text-align:left}
  #svProof .sv-fr{flex-direction:row}
  #svProof .pf-left,#svProof .pf-right{flex:1}
  #svSda .sv-fr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:40px;align-items:center}
}
/* phones: modules as stacked sticky cards — white like the desktop open card */
@media (max-width:599px){
  /* stacked cards: the card on top is white with the blue glow (as the open card on desktop), the ones it rides over are glass (as the closed cards) */
  #mdRow.md-stack .md{background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 45%,rgba(0,0,0,.12)),rgba(8,8,24,.78)!important;box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(255,255,255,.08),0 24px 48px -28px rgba(0,0,0,.6)!important;transition:background .35s var(--ease),box-shadow .35s var(--ease)}
  #mdRow.md-stack .md::after{display:none}
  #mdRow.md-stack .md-body,#mdRow.md-stack .md-body h3{color:#fff}
  #mdRow.md-stack .md-body p{color:#959595}
  #mdRow.md-stack .ins-tags span{border-color:rgba(255,255,255,.25);color:#fff}
  #mdRow.md-stack .md.stk-act{background:#fff!important;box-shadow:var(--glow)!important}
  #mdRow.md-stack .md.stk-act .md-body,#mdRow.md-stack .md.stk-act .md-body h3{color:#131313}
  #mdRow.md-stack .md.stk-act .md-body p{color:#535353}
  #mdRow.md-stack .md.stk-act .ins-tags span{border-color:#dcdcdc;color:#131313}
  #mdRow.md-stack .ins-ph{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06)}
  #mdRow.md-stack .ins-ph .ph-tag{color:#dcdcdc;border-color:rgba(255,255,255,.35);background:transparent}
  #mdRow.md-stack .md.stk-act .ins-ph{border-color:rgba(19,19,19,.18);background:#f6f6f6}
  #mdRow.md-stack .md.stk-act .ins-ph .ph-tag{color:#535353;border-color:rgba(19,19,19,.25);background:#fff}
  #mdRow.md-stack .md{height:560px}
  #mdRow.md-stack .md-img{margin:20px -24px 0 0}
  #mdRow.md-stack .md-img img{width:150%;max-width:none}
  .sq{max-width:none}
}
@media (max-width:1199px) and (prefers-reduced-motion:reduce){.eh-track{animation:none}}

/* ================= 14 · CTA — homepage component with the Heading/3XS title ================= */
@media (min-width:1200px){
  .frameCta{height:566px}
  .frameCta h2{font-size:56px;letter-spacing:.84px;width:640px}
  .ct-tag{transform:translate(-200px,-28px) scale(.8);transform-origin:800px 160px}
  .ct-lead{top:256px}
  .ct-list{top:340px}
}
/* footer statement: Heading/3XS */
@media (min-width:1200px){.ft-big p{font-size:56px;letter-spacing:.84px}}
/* Two ways: one line on desktop */
@media (min-width:1200px){.tw-title{white-space:nowrap;font-size:40px!important;letter-spacing:.6px!important}}   /* at 56 px the line is 1544 px wide; Heading/4XS fits (≈1100) */

/* ================= 10 · Two different ways — rebuilt as flip cards, same pattern as "See the money you could save" ================= */
.tw-bar{padding:0}
@media (min-width:1200px){#svTwo .tw-bar{align-items:center}}
.tg-dark{background:#191919}   /* UI Kit Text Toggle, Size L, Theme Dark */
.tg-dark button{color:#959595}
.tg-dark button.on{color:#131313}
.tg-dark button:not(.on):hover{color:#fff}
.tg-dark .tg-ind{background:#fff}   /* active segment white (Yuliia) */
#twTg button{font-size:16px;padding:12px 10px}   /* Text Toggle Size M, same as savings */
.tg-dark button:focus-visible{outline-color:#fff}
.tw-lead{width:auto;font:500 16px/1.5 var(--mono);color:#959595}
.tw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:240px;gap:8px}
.tc{position:relative;perspective:1400px;cursor:pointer;outline:none}
.tc-in{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .9s var(--eo) var(--fd,0s)}
.tc.flip .tc-in{transform:rotateY(180deg)}
.tc.peek .tc-in{transition-duration:.7s;transition-delay:0s}
.tc-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;gap:16px;padding:32px;border-radius:8px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.tc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.tc-top svg{flex:none;width:40px;height:40px}
.tc-top span{font:500 16px/1.5 var(--mono);white-space:nowrap;opacity:0;translate:0 -4px;transition:opacity .3s var(--ease),translate .4s var(--ease)}
/* the label shows only on a card turned over on its own, to say it differs from the rest */
.tc.peek .tc-top span{opacity:1;translate:0 0;transition-delay:.35s}
.tc-face p{margin:0;font:400 20px/1.5 var(--rubik)}   /* Body text/M */
/* typical side: glass (stat-card recipe) */
.f-typ{background:linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 45%,rgba(0,0,0,.12)),rgba(8,8,24,.42);-webkit-backdrop-filter:none;backdrop-filter:none;color:#dcdcdc;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),inset -1px -1px 0 rgba(255,255,255,.08),0 24px 48px -28px rgba(0,0,0,.6)}
.f-typ::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(90% 40% at 0% 0%,rgba(255,255,255,.07),rgba(255,255,255,0) 60%)}
.f-typ svg{color:#959595}
.f-typ .tc-top span{color:#959595}
/* Atlas side: white with the blue glow */
.f-atl{transform:rotateY(180deg);background:#fff;color:#131313;
  /* the blue glow without its upward layer: every remaining layer falls right/down, under the next cards (they paint on top), so white cards never show a neighbour's shadow */
  box-shadow:1px 8px 17px rgba(35,19,174,.39),5px 30px 31px rgba(35,19,174,.34),12px 68px 41px rgba(35,19,174,.2),21px 120px 49px rgba(35,19,174,.06)}
.f-atl svg{color:var(--blue)}
.f-atl .tc-top span{color:#535353}
.tc:focus-visible .tc-face{outline:2px solid var(--yellow);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.tc-in{transition:none}}
@media (max-width:1199px){
  .tw-grid{grid-template-columns:1fr;grid-auto-rows:auto}
  .tc{min-height:220px}
  .tc-face{padding:24px;gap:16px}
  .tc-face p{font-size:16px}
  .tc-top span{font-size:13px}
  .tc-top svg{width:32px;height:32px}
  .tg-dark button{font-size:16px}
}
@media (min-width:600px) and (max-width:1199px){.tw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tc{min-height:240px}}

/* static stand-in for the zones that do not hold the single live gradient (same palette as the Neat BLUE config) */
.zbg{background:radial-gradient(70% 55% at 72% 18%,rgba(12,12,113,.75),rgba(12,12,113,0) 70%),radial-gradient(60% 50% at 18% 78%,rgba(23,30,59,.8),rgba(23,30,59,0) 70%),radial-gradient(50% 45% at 90% 85%,rgba(0,17,41,.9),rgba(0,17,41,0) 70%),#010101}

/* off screen or covered by the next panel: infinite loops pause (js watch) */
.off,.off *{animation-play-state:paused!important}

/* Lighter ride-over (Yuliia, v23): the dark zones (gradient inside) scroll in normal flow; only the white panels pin, hold and get covered.
   No ride-over shadows. The next panel overlaps the dark zone by its 40 px corner radius so the rounded top still sits on the dark. */
.ride.flow>.pin{position:relative;top:auto!important}
.ride.flow>.runway{display:none}
.ride.flow+.ride{margin-top:calc(-40px * var(--s))}
.ride>.pin,.ride>.zone{box-shadow:none!important}
@media (max-width:1199px){.ride.flow+.ride{margin-top:-28px}}

/* What's inside: the open card is white with the blue glow, as on the Custom dashboards page (Yuliia, v24); closed cards stay glass */
.ins .md.on{background:#fff;box-shadow:var(--glow);-webkit-backdrop-filter:none;backdrop-filter:none}
.ins .md.on .md-body{color:#131313}
.ins .md.on .ins-tags span{border-color:#dcdcdc;color:#131313}
.ins .md.on .ins-ph{border-color:rgba(19,19,19,.18);background:#f6f6f6}
.ins .md.on .ins-ph .ph-tag{color:#535353;border-color:rgba(19,19,19,.25);background:#fff}

.zbg canvas{display:none}   /* animated gradient off (v25) */

/* ================= glass without live blur (perf, v26) =================
   Backdrop blur is recomputed for every frame the page scrolls under it. Everything except the hero feature card
   (liquid glass, as on the homepage) now fakes the frosted look with a denser tint + rim instead. */
*:not(.eh-desc){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.pill{background:rgba(19,19,19,.62)}
.sq-glass,.btn.secondary{background:rgba(0,0,0,.38)}
.sq-glass:hover{background:rgba(0,0,0,.25)}
.ai-box{background:rgba(19,19,19,.62)}
.ai-box.lit{background:rgba(36,36,44,.7)}
.sh-play{background:rgba(255,255,255,.28)}


/* ================= PHONES — reworked to Yuliia's mobile frame (Figma 2909:52187), v32 ================= */
.ai-lg,.ai-el{display:none}
@media (max-width:599px){
  /* type: Heading/Mobile/S 28, eyebrow 14 */
  .sv-h,.sv-h.x72{font-size:28px!important;letter-spacing:.42px!important}
  #heroFr h1{font-size:28px!important}
  .sv-eye{font-size:14px;letter-spacing:.21px}
  /* the tapes are desktop decoration: the mobile frame has none */
  .tape{display:none!important}

  /* buttons: Button Large rows, full width, 16 px apart (all sections) */
  .sq-row{flex-direction:column;gap:16px;align-self:stretch}
  .sq{width:100%;max-width:none;height:56px;flex:none;flex-direction:row;align-items:center;justify-content:space-between;padding:16px 16px 16px 20px;border-radius:8px;font:500 16px/1.5 var(--mono)}
  .sq svg{order:2;width:24px;height:24px}
  .sq span{order:1;align-self:auto}

  /* hero: title + lead → dashboard with glass card → buttons → highlights */
  #heroFr{padding:84px var(--gx) 80px;gap:24px}
  #heroFr h1{order:1}
  .eh-lead{order:2;margin-top:-8px}
  #heroFr .eh-stage{order:3;margin-top:0;width:74%!important}
  #heroFr .eh-desc{order:4;margin:-84px 0 0 auto;width:215px!important}
  #heroFr .eh-desc h2{font-size:18px!important;letter-spacing:.27px}
  #heroFr .eh-desc p{font-size:14px!important}
  .eh-btns{order:5;margin-top:12px}
  .eh-pills{order:6;margin:0 calc(var(--gx) * -1);padding:0 var(--gx);-webkit-mask:none;mask:none;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .eh-pills::-webkit-scrollbar{display:none}
  .pill{font:500 16px/1.5 var(--mono);padding:8px 12px;border-radius:8px}

  /* shelf */
  #svShelf .sv-fr{padding:0 var(--gx) 48px;gap:24px}
  .sh-video{aspect-ratio:343/193;border-radius:8px}
  .ph-tag{text-transform:none;letter-spacing:0;font-size:12px;border:0;padding:0;left:16px;top:16px}
  .sh-text p+p{margin-top:16px}

  /* AI inside: title → flow → buttons, legend between the nodes */
  #svAi .sv-fr{display:flex;flex-direction:column;gap:24px;padding:48px var(--gx) 64px}
  .ai-head,.ai-row{display:contents}
  .ai-tt{order:1;gap:8px}
  .ai-dia{order:2;margin:0;gap:0}
  #svAi .sq-row{order:3}
  .ai-box{padding:20px;gap:4px}
  .ai-box h3{font-size:24px;letter-spacing:.36px}
  .ai-box p{font-size:16px}
  .ai-core ul{font-size:14px}
  .ai-core li{display:inline}
  .ai-core li::after{content:' '}
  .ai-core{gap:4px}
  .ai-legend{display:none}
  .ai-dia{position:relative}
  .ai-dot{display:block;width:12px;height:12px;margin:-6px 0 0 -6px}
  .ai-lg.y{position:relative}
  .ai-lg.y::after{content:"";position:absolute;left:47px;top:0;bottom:0;width:1px;background:linear-gradient(180deg,rgba(255,224,27,.8),rgba(93,230,181,.8))}
  .ai-lg{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;padding:24px 0;font:400 12px/1.5 var(--rubik);color:#959595}
  .ai-lg::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--yellow)}
  .ai-lg.g::before{background:#5de6b5}.ai-lg.b::before{background:var(--blue)}
  .ai-ask::after,.ai-core::after{display:none}
  .ai-out{position:relative;flex-direction:column;gap:0;margin-left:88px;padding-top:32px}
  .ai-out::before{content:"";position:absolute;left:-41px;top:0;bottom:50px;width:1px;background:linear-gradient(180deg,rgba(93,230,181,.7),rgba(47,30,193,.8))}
  .ai-out .ai-box{height:auto}
  .ai-el{display:block;position:absolute;left:-41px;top:calc(50% - 12px);width:41px;height:12px;border-left:1px solid rgba(47,30,193,.8);border-bottom:1px solid rgba(47,30,193,.8);border-bottom-left-radius:12px}

  /* a dozen places */
  #svWyg .sv-fr{padding:48px var(--gx) 64px}
  .wg-grid{gap:8px}
  .wg-c{padding:24px;gap:16px;min-height:0}
  .wg-c svg{width:44px;height:44px}
  .wg-c h3{font-size:24px;letter-spacing:.36px}
  .wg-i{aspect-ratio:1}
  .wg-grid>:nth-child(8),.wg-grid>:nth-child(9){display:none}   /* the mobile frame shows two images only */
  .wg-grid>:nth-child(6){order:1}.wg-grid>:nth-child(11){order:2}.wg-grid>:nth-child(12){order:3}

  /* proof */
  #svProof .sv-fr{padding:48px var(--gx) 64px;gap:8px}
  .pf-left,.pf-right{gap:8px}
  .pf-head{margin-bottom:16px}
  .pf{min-height:0;padding:20px;gap:4px;justify-content:flex-start}
  .pf b{font:500 20px/1.2 var(--rubik);letter-spacing:.3px}
  .pf p{font-size:12px}
  .pf-12 svg{width:20px;height:20px;margin:0 2px}
  .pf-row,.pf-right{align-items:stretch}

  /* built by SDA: dashboards → title → text → buttons */
  #svSda .sv-fr{padding:48px var(--gx) 64px;gap:32px}
  .sda-col{gap:32px}
  .sda-text{gap:24px}
}

/* phones + tablets: Built by SDA dashboards. The PNG has the devices in its left 75 % and empty space at the bottom (shadow room),
   so the art box crops to the devices + shadow (1500 × 1560 of 1749 × 1769 px): equal air on both sides, centred in the column. */
@media (max-width:1199px){
  .sda-art{aspect-ratio:1500/1560;overflow:hidden;margin-inline:auto;width:100%;max-width:560px}
  .sda-art .dash{width:116.6%}
  .sda-art{-webkit-mask:linear-gradient(90deg,#000 86%,transparent),linear-gradient(180deg,#000 88%,transparent);-webkit-mask-composite:source-in;mask:linear-gradient(90deg,#000 86%,transparent),linear-gradient(180deg,#000 88%,transparent);mask-composite:intersect}   /* the cut edge of the glow fades out */
}

/* phones/tablets: dark zones are pinned like the white ones (the next panel rides over them), so their runways match the white ones */
@media (max-width:1199px){.ride.r1>.runway,.ride.r3>.runway,.ride.r5>.runway,.ride.r7>.runway{height:100vh}}