/* ==========================================================================
   tripi.work - design system + styles (v1.10.1 redesign)
   Minimal, editorial, restrained. One accent. No glass; one radial hero wash.
   Type: Inter (UI) / Roboto Mono (codes). 8-pt spacing scale. WCAG 2.2 AA.
   ========================================================================== */
:root{
  --navy-950:#070E1F;--navy-900:#0B1730;--navy-800:#14284C;
  --ink:#0B1730;--text:#33415A;--muted:#5F6E8C;
  --line:#E4E9F1;--line-2:#EEF2F7;--bg:#FFFFFF;--bg-alt:#F5F7FB;
  --teal:#07B49B;--teal-700:#047A69;--teal-100:#DDF6F1;--teal-light:#5EE0CB;
  --on-dark:#FFFFFF;--on-dark-2:rgba(255,255,255,.76);--on-dark-3:rgba(255,255,255,.56);--line-dark:rgba(255,255,255,.10);
  --ui:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mono:'Roboto Mono',ui-monospace,monospace;
  --fs-1:clamp(44px,6.4vw,84px);--fs-2:clamp(30px,3.6vw,46px);--fs-3:20px;
  --s-1:8px;--s-2:16px;--s-3:24px;--s-4:32px;--s-5:40px;--s-6:56px;--s-7:72px;--s-8:96px;
  --r-sm:8px;--r:12px;--r-lg:20px;--wrap:1200px;
  --shadow-1:0 1px 2px rgba(11,23,48,.06);--shadow-2:0 12px 32px -16px rgba(11,23,48,.25);--shadow-3:0 40px 80px -40px rgba(11,23,48,.45);
  --ease:cubic-bezier(.2,.7,.2,1);
}
/* ---------- dark theme (website): toggled by the sun/moon icon, follows the OS by default ---------- */
[data-theme="dark"]{--ink:#F2F5FA;--text:#C7D0DE;--muted:#93A0B8;--line:rgba(255,255,255,.12);--line-2:rgba(255,255,255,.08);--bg:#0B1730;--bg-alt:#0F1B33;--teal-100:rgba(7,180,155,.16);--teal-700:#5EE0CB;--navy-900:#070E1F;--navy-950:#050A17;--shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 12px 32px -16px rgba(0,0,0,.6);--shadow-3:0 40px 80px -40px rgba(0,0,0,.8);color-scheme:dark}
[data-theme="dark"] .engine,[data-theme="dark"] .svc,[data-theme="dark"] .tier,[data-theme="dark"] .steps li,[data-theme="dark"] .tour__tab.is-on,[data-theme="dark"] .tour__tab:hover,[data-theme="dark"] .tour__tab::before{background:#14213D;border-color:var(--line)}
[data-theme="dark"] .tour__tab.is-on::before{background:var(--teal);color:#fff}[data-theme="dark"] .tier:hover{border-color:rgba(255,255,255,.25)}[data-theme="dark"] .tier--hi{box-shadow:0 0 0 3px rgba(7,180,155,.2)}
[data-theme="dark"] .form{background:#14213D;color:var(--text)}[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea{background:#0F1B33;border-color:rgba(255,255,255,.18);color:var(--ink)}[data-theme="dark"] .field label{color:var(--ink)}
[data-theme="dark"] .nav.is-scrolled{background:rgba(5,10,23,.92)}[data-theme="dark"] .frame,[data-theme="dark"] .hero__shot{box-shadow:var(--shadow-3),0 0 0 1px rgba(255,255,255,.1)}[data-theme="dark"] .cap:hover{background:#0F1B33}
[data-theme="dark"] .checks li{color:var(--ink)}[data-theme="dark"] .outcome p,[data-theme="dark"] .spot__text p,[data-theme="dark"] .apps__text p{color:var(--text)}[data-theme="dark"] .faq summary{color:var(--ink)}[data-theme="dark"] .sticky{background:rgba(5,10,23,.94)}
[data-theme="dark"] .skip{background:#14213D;color:var(--ink)}[data-theme="dark"] .phone{background:#050A17}
/* theme toggle */
.theme-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;transition:background .18s,border-color .18s,color .18s}.theme-btn:hover{background:rgba(255,255,255,.1)}.theme-btn svg{width:18px;height:18px}.theme-btn .ico-sun{display:none}[data-theme="dark"] .theme-btn .ico-sun{display:block}[data-theme="dark"] .theme-btn .ico-moon{display:none}

/* ---------- nav: dark-hero (transparent/unscrolled) state is unchanged in both themes on purpose —
   the hero band itself is always dark navy, a fixed brand element, not part of the toggle. Two states
   DO need to fully honour the toggle instead of staying dark regardless: the bar once scrolled past the
   hero, and the full-screen mobile menu — both used to hard-code a dark background. Fixed below so each
   becomes a genuinely light (white) surface in light theme, exactly as dark as before in dark theme. ---------- */
.nav__brand{display:inline-flex}
.nav__brand-img.is-navy{display:none}
/* In light theme the nav's backdrop is white in every state - unscrolled (the hero is now white too),
   scrolled, and the open mobile menu - so the logo, links, icons and buttons are simply "light theme"
   coloured throughout, not scoped to scroll/menu state (that scoping was the bug: it left the very
   first, unscrolled view of the site with a white-on-white logo and controls). */
[data-theme="light"] .nav__brand-img.is-white{display:none}
[data-theme="light"] .nav__brand-img.is-navy{display:block}
[data-theme="light"] .nav__links a{color:var(--text)}
[data-theme="light"] .nav__links a:hover{color:var(--ink)}
[data-theme="light"] .nav__burger span{background:var(--ink)}
[data-theme="light"] .theme-btn{border-color:var(--line);color:var(--ink)}
[data-theme="light"] .theme-btn:hover{background:var(--bg-alt)}
[data-theme="light"] .nav .btn--ghost{color:var(--ink);border-color:var(--line)}
[data-theme="light"] .nav .btn--ghost:hover{background:var(--bg-alt);color:var(--ink)}
[data-theme="light"] .nav.is-scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
[data-theme="light"] .nav.is-open{background:#fff}
[data-theme="light"] .nav.is-open .nav__links a{color:var(--ink);border-bottom-color:var(--line)}
[data-theme="light"] .nav.is-open .nav__links a:hover{color:var(--teal-700)}

/* ---------- LIGHT THEME: the "dark accent" surfaces (hero, the three dark feature bands, footer,
   sticky CTA bar) become genuinely white in light theme instead of staying navy - full fix for "the
   background should be either fully dark or fully white". Everything that already consumes these
   tokens (.hero, .sec--dark, .foot, .cap, .safe__list, .eyebrow, .live, .demo__alt) needs no other
   change - only what the tokens resolve to changes per theme. Hard-coded colours that don't go through
   a token are overridden individually below. ---------- */
[data-theme="light"]{
  --navy-900:#FFFFFF; --navy-950:#FFFFFF;
  --on-dark:var(--ink); --on-dark-2:var(--text); --on-dark-3:var(--muted);
  --line-dark:var(--line); --teal-light:var(--teal-700);
}
[data-theme="light"] .hero::before{background:radial-gradient(900px 520px at 78% 10%,rgba(7,180,155,.08),transparent 70%)}
[data-theme="light"] .hero__title,[data-theme="light"] .hero__facts b{color:var(--ink)}
[data-theme="light"] .hero .btn--link{color:var(--ink)}
[data-theme="light"] .hero .btn--link:hover{color:var(--teal-700)}
[data-theme="light"] .cap:hover{background:var(--bg-alt)}
[data-theme="light"] .sticky{background:rgba(255,255,255,.94);color:var(--ink);border-top-color:var(--line);box-shadow:0 -4px 24px rgba(11,23,48,.08)}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:88px}
body.site{margin:0;font:400 16px/1.6 var(--ui);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.site a{color:inherit;text-decoration:none;cursor:pointer}.site a:hover,.site a:focus,.site a:active,.site a:visited{text-decoration:none}
.site button{font:inherit;cursor:pointer}.site img,.site picture{display:block;max-width:100%;height:auto}
.site :focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:12px;z-index:100;background:#fff;color:var(--ink);padding:10px 14px;border-radius:var(--r-sm);font-weight:600}.skip:focus{left:12px}
.wrap{width:min(var(--wrap),calc(100% - 48px));margin-inline:auto}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* typography */
h1,h2,h3,h4{margin:0;color:var(--ink);letter-spacing:-.022em;line-height:1.12;font-weight:700}
h2{font-size:var(--fs-2);max-width:20ch}h3{font-size:var(--fs-3);letter-spacing:-.01em}p{margin:0}
.lede{font-size:18px;line-height:1.55;color:var(--muted);max-width:52ch}
.faq-more{margin-top:var(--s-5);padding:var(--s-3) var(--s-3);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-alt);max-width:38ch}
.faq-more p{margin:0;font-size:14.5px;color:var(--muted)}
.faq-more p:first-child{font-weight:600;color:var(--ink);margin-bottom:4px}
.faq-more a{color:var(--teal-700);font-weight:600}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--teal-light);margin:0 0 var(--s-2)}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--teal-light)}
.eyebrow--dark{color:var(--teal-700)}
.kicker{display:inline-block;font:600 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--teal-700);margin-bottom:12px}
.sec--dark h2,.sec--dark h3{color:var(--on-dark)}.sec--dark p,.sec--dark .lede{color:var(--on-dark-2)}.sec--dark .kicker{color:var(--teal-light)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:10px;border:1px solid transparent;font:600 15px var(--ui);white-space:nowrap;transition:background .18s var(--ease),color .18s,border-color .18s,transform .12s;line-height:1}
.btn:active{transform:translateY(1px)}
.btn--lg{height:52px;padding:0 24px;font-size:16px;border-radius:12px}.btn--block{width:100%}
.site .btn--primary,.site .btn--primary:visited{background:#047A69;color:#fff}.site .btn--primary:hover,.site .btn--primary:focus{background:#03665A;color:#fff}
.site .btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}.site .btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.site .btn--link{background:transparent;color:#fff;padding:0 6px}.site .btn--link:hover{color:var(--teal-light)}.site .btn--link svg{transition:transform .18s}.site .btn--link:hover svg{transform:translateX(3px)}
.btn:disabled{cursor:not-allowed;opacity:.55}
.textlink{display:inline-flex;align-items:center;gap:6px;font:600 15px var(--ui);color:var(--teal-700)}.textlink::after{content:"\2192";transition:transform .18s}.textlink:hover::after{transform:translateX(3px)}

/* layout primitives */
.sec{padding:var(--s-8) 0}.sec--tight{padding:var(--s-6) 0}.sec--alt{background:var(--bg-alt)}.sec--dark{background:var(--navy-900);color:var(--on-dark)}
.sec__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:var(--s-4);align-items:end;margin-bottom:var(--s-5)}
@media(max-width:900px){.sec__head{grid-template-columns:1fr;gap:var(--s-2)}.sec{padding:var(--s-7) 0}}
.grid{display:grid;gap:var(--s-2)}.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:960px){.grid--3,.grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.grid--3,.grid--4{grid-template-columns:1fr}}
.checks{list-style:none;margin:var(--s-3) 0;padding:0;display:grid;gap:10px}.checks li{position:relative;padding-left:28px;font-size:15px;color:var(--ink)}
.checks li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--teal-100)}
.checks li::after{content:"";position:absolute;left:5px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--teal)}
.checks--sm li{font-size:14px}
.sec--dark .checks li,.checks--light li{color:var(--on-dark)}.sec--dark .checks li::before,.checks--light li::before{background:rgba(94,224,203,.18)}.sec--dark .checks li::after,.checks--light li::after{background:var(--teal-light)}

/* nav */
.progress{position:fixed;left:0;top:0;height:2px;width:0;background:var(--teal);z-index:60}
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .2s,box-shadow .2s}
.nav.is-scrolled{background:rgba(11,23,48,.92);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line-dark)}
.nav__in{display:flex;align-items:center;gap:var(--s-4);height:76px}
.nav__brand img{height:42px;width:auto}
.nav__links{display:flex;gap:26px}.nav__links a{font:500 14px var(--ui);color:var(--on-dark-2);padding:8px 0}.nav__links a:hover{color:#fff}
.nav__cta{margin-left:auto;display:flex;gap:10px}
.theme-btn{order:0}
.nav__burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:5px;border-radius:8px}.nav__burger span{width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.nav.is-open .nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav.is-open .nav__burger span:nth-child(2){opacity:0}.nav.is-open .nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:960px){.nav__links,.nav__cta{display:none}.nav__burger{display:flex}.nav.is-open{position:fixed;inset:0;background:var(--navy-900);overflow:auto;display:block}.nav.is-open .nav__in{height:auto;min-height:76px;flex-wrap:wrap;align-items:center}.nav.is-open .nav__brand{order:1;height:76px;display:flex;align-items:center}.nav.is-open .nav__burger{order:3}.nav.is-open .theme-btn{order:2;margin-left:auto;margin-right:8px}.nav.is-open .nav__links{order:3;flex:0 0 100%}.nav.is-open .nav__cta{order:4;flex:0 0 100%}.nav.is-open .nav__links,.nav.is-open .nav__cta{display:flex;flex-direction:column;width:min(var(--wrap),calc(100% - 40px));margin:0 auto}.nav.is-open .nav__links{padding-top:8px;border-top:1px solid var(--line-dark)}.nav.is-open .nav__links a{padding:14px 0;font-size:17px;border-bottom:1px solid var(--line-dark);color:#fff}.nav.is-open .nav__cta{padding:20px 0 32px;gap:10px}.nav.is-open .nav__cta .btn{height:50px}}

/* hero */
.hero{position:relative;background:var(--navy-900);color:var(--on-dark);padding:140px 0 var(--s-6);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 520px at 78% 10%,rgba(30,58,102,.75),transparent 70%);pointer-events:none}
.hero__bg{position:absolute;inset:0;z-index:0}.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.28}
.hero__canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.55}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s-6);align-items:center}
.hero__title{font-size:var(--fs-1);font-weight:800;letter-spacing:-.035em;line-height:.98;color:#fff;margin:0 0 var(--s-3)}
.hero__accent{color:var(--teal-light);display:inline-block}.hero__accent.is-swap{animation:swap .5s var(--ease)}
@keyframes swap{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero__sub{font-size:18px;line-height:1.55;color:var(--on-dark-2);max-width:56ch;margin:0 0 var(--s-4)}
.hero__cta{display:flex;gap:var(--s-2);flex-wrap:wrap;align-items:center}
.hero__shot{margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;background:#0F1B33;padding:8px;box-shadow:var(--shadow-3),0 0 0 1px rgba(255,255,255,.08);transition:transform .15s ease-out}
.hero__shot img{border-radius:12px;width:100%;height:auto}
.hero__cap{display:flex;align-items:center;gap:8px;padding:10px 6px 2px;font:500 12.5px var(--ui);color:var(--on-dark-3)}
.live{width:8px;height:8px;border-radius:50%;background:var(--teal-light);box-shadow:0 0 0 4px rgba(94,224,203,.18)}
.hero__facts{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-6);padding-top:var(--s-4);border-top:1px solid var(--line-dark)}
.hero__facts div{display:flex;gap:14px;align-items:flex-start}.hero__facts b{font:700 22px/1 var(--ui);color:#fff;min-width:64px;letter-spacing:-.02em}.hero__facts span{font:400 13.5px/1.45 var(--ui);color:var(--on-dark-2)}
@media(max-width:1100px){.hero__in{grid-template-columns:1fr}.hero{padding-top:120px}}
@media(max-width:900px){.hero__facts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.hero__facts{grid-template-columns:1fr}.hero__title{font-size:44px}}

/* outcomes */
.outcome{padding:var(--s-3) 0 var(--s-3) var(--s-3);border-left:2px solid var(--teal)}
.outcome h3{font-size:18px;margin:6px 0 8px}.outcome p{font-size:14.5px;color:var(--muted)}

/* tour */
.tour{display:grid;grid-template-columns:320px minmax(0,1fr);gap:var(--s-4);align-items:start}
.tour__tabs{display:flex;flex-direction:column;gap:6px;counter-reset:tab}
.tour__tab{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;text-align:left;border:1px solid transparent;background:transparent;border-radius:var(--r);padding:12px 14px;transition:background .15s,border-color .15s}
.tour__tab::before{content:counter(tab);counter-increment:tab;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--ink);font:600 12px var(--mono)}
.tour__tab b{grid-column:2;font:600 15px var(--ui);color:var(--ink)}.tour__tab span{grid-column:2;font:400 13px/1.45 var(--ui);color:var(--muted);margin-top:2px}
.tour__tab:hover{background:#fff;border-color:var(--line)}
.tour__tab.is-on{background:#fff;border-color:var(--line);box-shadow:var(--shadow-1)}.tour__tab.is-on::before{background:var(--teal);border-color:var(--teal);color:#fff}
.tour__stage{position:sticky;top:96px}
.frame{border-radius:var(--r-lg);background:#0F1B33;padding:8px;box-shadow:var(--shadow-3),0 0 0 1px rgba(11,23,48,.12);position:relative;aspect-ratio:16/9.6;overflow:hidden}
.frame__bar{display:flex;align-items:center;gap:6px;height:24px;margin-bottom:6px}.frame__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}.frame__bar span{margin-left:10px;font:500 11.5px var(--mono);color:rgba(255,255,255,.5)}
.tour__panel{position:absolute;left:8px;right:8px;top:38px;bottom:8px;opacity:0;transition:opacity .3s}.tour__panel[hidden]{display:block}.tour__panel img{width:100%;height:100%;object-fit:cover;object-position:top left;border-radius:10px}.tour__panel.is-on{opacity:1}
@media(max-width:960px){.tour{grid-template-columns:minmax(0,1fr)}.tour__tabs{min-width:0}.tour__stage{position:static}.tour__tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;max-width:100%}.tour{min-width:0}.tour__tabs::-webkit-scrollbar{height:6px}.tour__tabs::-webkit-scrollbar-thumb{background:#cfd8e6;border-radius:3px}.tour__tab{flex:0 0 230px;scroll-snap-align:start;background:#fff;border-color:var(--line)}}

/* spotlights */
.spot{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--s-6);align-items:center;padding:var(--s-6) 0;border-top:1px solid var(--line-2)}
.spot:first-child{border-top:0;padding-top:0}
.spot--rev .spot__text{order:2}.spot--rev .spot__shot{order:1}
.spot__text p{font-size:16px;color:var(--muted);margin-top:var(--s-2)}
.spot__shot{margin:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-3),0 0 0 1px rgba(11,23,48,.08);transition:transform .15s ease-out}
@media(max-width:960px){.spot{grid-template-columns:1fr}.spot--rev .spot__text{order:1}.spot--rev .spot__shot{order:2}}

/* capabilities */
.caps{gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:var(--r-lg);overflow:hidden}
.cap{background:var(--navy-900);padding:var(--s-4) var(--s-3);transition:background .15s}.cap:hover{background:#102243}
.cap__ic{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;background:rgba(94,224,203,.12);color:var(--teal-light);margin-bottom:var(--s-2)}.cap__ic svg{width:20px;height:20px}
.cap h3{font-size:17px}.cap p{margin-top:8px;font-size:14px;color:var(--on-dark-2)}

/* engines */
.engines{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-2)}
.engine{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s-3)}
.engine__name{display:inline-block;font:600 11.5px/1 var(--mono);letter-spacing:.08em;color:var(--teal-700);background:var(--teal-100);padding:6px 9px;border-radius:999px;margin-bottom:14px}
.engine h3{font-size:16px}.engine p{margin-top:8px;font-size:13.5px;color:var(--muted)}
@media(max-width:1100px){.engines{grid-template-columns:repeat(3,1fr)}}@media(max-width:700px){.engines{grid-template-columns:1fr}}

/* apps */
.apps{display:grid;grid-template-columns:minmax(0,1fr) 520px;gap:var(--s-6);align-items:center}
.apps__text p{font-size:16px;color:var(--muted);margin-top:var(--s-2)}
.apps__phones{position:relative;height:600px}
.phone{position:absolute;width:270px;border-radius:36px;background:#0B1730;padding:10px;box-shadow:var(--shadow-3),inset 0 0 0 1px rgba(255,255,255,.08)}
.phone img{border-radius:27px;width:100%;height:auto}
.phone--back{left:16px;top:44px;transform:rotate(-6deg);opacity:.9}.phone--front{left:220px;top:0;transform:rotate(4deg)}
@media(max-width:1100px){.apps{grid-template-columns:1fr}.apps__phones{height:560px;max-width:520px;margin:0 auto}}
@media(max-width:560px){.apps__phones{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px;overflow:hidden}.phone{position:static;width:auto;transform:none;opacity:1;border-radius:26px;padding:7px}.phone img{border-radius:20px}}
.apps{min-width:0}.apps__phones{max-width:100%;overflow:hidden}

/* services */
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s-4) var(--s-3)}
.svc__ic{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;margin-bottom:var(--s-2)}.svc__ic svg{width:22px;height:22px}
.svc__ic.is-blue{background:#EAF2FE;color:#125CC9}.svc__ic.is-purple{background:#F3E8FD;color:#7C3AED}.svc__ic.is-teal{background:var(--teal-100);color:var(--teal-700)}
.svc p{margin-top:8px;font-size:14.5px;color:var(--muted)}

/* safety */
.safe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6);align-items:start}
.safe>div>p{font-size:16px;margin-top:var(--s-2)}
.safe__list{margin:0;display:grid;gap:10px}.safe__list div{border:1px solid var(--line-dark);border-radius:var(--r);padding:16px 18px}
.safe__list dt{font:600 14px var(--ui);color:var(--teal-light);margin-bottom:4px}.safe__list dd{margin:0;font-size:14px;color:var(--on-dark-2)}
@media(max-width:900px){.safe{grid-template-columns:1fr}}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s-2)}
.steps li{border:1px solid var(--line);border-radius:var(--r);padding:var(--s-3)}
.steps span{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy-800);color:#fff;font:600 13px var(--ui);margin-bottom:12px}
.steps b{display:block;font:600 16px var(--ui);color:var(--ink)}.steps p{margin-top:6px;font-size:13.5px;color:var(--muted)}
@media(max-width:1000px){.steps{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* tiers */
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:var(--s-4) var(--s-3);transition:border-color .15s,box-shadow .15s}
.tier:hover{border-color:#cfd8e6;box-shadow:var(--shadow-2)}.tier--hi{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-100)}
.tier h3{font-size:22px}.tier p{margin-top:8px;font-size:14.5px;color:var(--muted)}

/* faq */
.faqwrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-6);align-items:start}
.faqwrap>div:first-child{position:sticky;top:96px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 44px 18px 0;font:600 16px var(--ui);color:var(--ink);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:2px;top:12px;font:300 26px/1 var(--ui);color:var(--teal-700);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 18px;font-size:15px;color:var(--muted);max-width:60ch}
@media(max-width:900px){.faqwrap{grid-template-columns:1fr}.faqwrap>div:first-child{position:static}}

/* demo + form */
.demo{display:grid;grid-template-columns:minmax(0,1fr) 540px;gap:var(--s-6);align-items:start}
.demo__text>p{font-size:16px;margin-top:var(--s-2)}.demo__alt a{color:var(--teal-light);font-weight:600}
.form{background:#fff;color:var(--text);border-radius:var(--r-lg);padding:var(--s-4);display:grid;gap:var(--s-2)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-2)}
.field{display:grid;gap:6px}.field label{font:600 13px var(--ui);color:var(--ink)}.field label span{color:var(--teal-700)}
.field input,.field select,.field textarea{height:46px;border:1px solid #CBD5E3;border-radius:10px;background:#fff;color:var(--ink);padding:0 14px;font:400 15px var(--ui);width:100%;transition:border-color .15s,box-shadow .15s}
.field textarea{height:auto;padding:12px 14px;resize:vertical;min-height:88px}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-100)}
.field.is-invalid input{border-color:#B91C36;box-shadow:0 0 0 3px #FCE4E8}.field__err{display:none;font:500 12.5px var(--ui);color:#B3213A}.field.is-invalid .field__err{display:block}
.hp{position:absolute;left:-9999px;height:0;width:0;opacity:0}
.form__fine{font-size:12.5px;color:var(--muted)}.sec--dark .form p{color:var(--muted)}.form__ok{font-weight:600;color:var(--teal-700)!important}.form__fail{font-weight:600;color:#B3213A!important}
@media(max-width:1000px){.demo{grid-template-columns:1fr}}@media(max-width:560px){.form__row{grid-template-columns:1fr}.form{padding:var(--s-3)}}

/* sticky CTA */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(11,23,48,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line-dark);color:#fff;transform:translateY(100%);transition:transform .3s var(--ease)}
.sticky.is-on{transform:none}.sticky__in{display:flex;align-items:center;gap:var(--s-2);height:66px}
.sticky__in span b{display:block;font:600 14px var(--ui)}.sticky__in span small{font:400 12.5px var(--ui);color:var(--on-dark-3)}.sticky__in .btn{margin-left:auto}
@media(max-width:600px){.sticky__in span small{display:none}.sticky__in span b{font-size:13px}}

/* footer */
.foot{background:var(--navy-950);color:var(--on-dark-2);padding:var(--s-6) 0 var(--s-4)}
.foot__in{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,.6fr));gap:var(--s-4)}
.foot__brand img{height:40px;width:auto}.foot__brand p{margin-top:var(--s-2);font-size:14px;max-width:44ch}
.foot__col h4{margin:0 0 12px;font:600 12px var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-3)}
.foot__col a{display:block;font:500 14px var(--ui);color:var(--on-dark-2);padding:5px 0}.foot__col a:hover{color:#fff}
.foot__fine{grid-column:1/-1;border-top:1px solid var(--line-dark);padding-top:18px;font-size:12.5px;color:var(--on-dark-3)}
@media(max-width:800px){.foot__in{grid-template-columns:1fr 1fr}}@media(max-width:480px){.foot__in{grid-template-columns:1fr}}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}.reveal.is-in{opacity:1;transform:none}