/* Grateful Prints OS (os.gratefulprintsph.com). One font, Plus Jakarta Sans at 400 to 600 (nothing above semibold).
   GP cobalt and navy, 24px corners on containers, open layout, mobile first. */
@font-face{font-family:"Plus Jakarta Sans";src:url("../fonts/jakarta.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}

:root{
  --cobalt:#1565E0;--cobalt-strong:#0F52BD;--cobalt-50:#EEF4FF;--cobalt-100:#D9E6FC;--sky:#9DC2FF;
  --navy:#0B1F4B;--night:#06122E;--night-2:#0B1C44;
  --ink:#0B1F4B;--text:#2B3652;--muted:#56627C;--line:#E2E8F2;--soft:#F5F7FB;--white:#fff;
  --yellow:#FACC15;--green:#127A3E;--red:#B42318;
  --radius:24px;--radius-sm:14px;--radius-xs:10px;
  --font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --narrow:760px;--wide:1080px;--gutter:16px;--sec-y:56px;
  --shadow:0 1px 2px rgba(11,31,75,.06),0 10px 30px rgba(11,31,75,.08);
  --shadow-lg:0 30px 70px rgba(3,10,30,.45);
}
@media (min-width:768px){:root{--gutter:24px;--sec-y:80px}}
@media (min-width:1100px){:root{--sec-y:96px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;font:400 16px/1.65 var(--font);color:var(--text);background:var(--white);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:var(--cobalt);text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3,h4{font-family:var(--font);color:var(--ink);font-weight:600;margin:0;letter-spacing:-.02em}
p{margin:0}
b,strong{font-weight:600}
ul,ol{margin:0}
button{font-family:inherit}
:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--ink);padding:10px 14px;border-radius:10px;font-weight:500}
.skip:focus{top:12px}
.ic{width:20px;height:20px;flex:0 0 auto}

/* layout */
.wrap{width:100%;max-width:calc(var(--wide) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.wrap.narrow{max-width:calc(var(--narrow) + 2*var(--gutter))}
.sec{padding:var(--sec-y) 0}
.sec.alt{background:var(--soft)}
.sec.dark{background:var(--night);color:rgba(255,255,255,.8)}
.sec.dark h2,.sec.dark h3{color:#fff}
.center{text-align:center}
.head{max-width:var(--narrow);margin:0 auto 36px}
.head.center{text-align:center}
.head.left{margin-left:0}
.eyebrow{display:block;font-size:14px;font-weight:500;color:var(--cobalt);margin:0 0 12px}
.dark .eyebrow{color:var(--sky)}
.h2{font-size:clamp(28px,4.4vw,42px);line-height:1.14}
.lead{font-size:clamp(17px,1.7vw,19px);line-height:1.65;color:var(--muted);margin-top:16px}
.dark .lead,.final .lead{color:rgba(255,255,255,.76)}
.dark .tagline{color:#fff}
.tagline{margin-top:28px;font-size:17px;font-weight:500;color:var(--ink)}
.muted{color:var(--muted)}
.small{font-size:14px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:var(--radius-sm);font:500 16px/1.2 var(--font);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background-color .15s,border-color .15s,box-shadow .15s;white-space:nowrap;text-align:center}
.btn-primary{background:var(--cobalt);color:#fff;box-shadow:0 8px 22px rgba(21,101,224,.28)}
.btn-primary:hover{background:var(--cobalt-strong)}
.btn-ghost{background:#fff;color:var(--cobalt);border-color:var(--cobalt-100)}
.btn-ghost:hover{background:var(--cobalt-50)}
.on-dark .btn-ghost,.dark .btn-ghost,.hero .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.on-dark .btn-ghost:hover,.dark .btn-ghost:hover,.hero .btn-ghost:hover{background:rgba(255,255,255,.08)}
.btn-lg{min-height:58px;padding:0 30px;font-size:17px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.cta-row.left{justify-content:flex-start}
.cta-note{font-size:14px;color:var(--muted);margin-top:14px}
.dark .cta-note,.hero .cta-note{color:rgba(255,255,255,.66)}
.textlink{display:inline-flex;align-items:center;gap:6px;font-weight:500;text-decoration:none}
.textlink:hover{text-decoration:underline}
@media (max-width:520px){.cta-row .btn{width:100%}}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(6,18,46,.94);-webkit-backdrop-filter:saturate(140%) blur(10px);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav-in{display:flex;align-items:center;gap:12px;height:64px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap;min-width:0}
.brand img{width:34px;height:34px;border-radius:9px}
.brand span{display:flex;flex-direction:column;line-height:1.15}
.brand small{font-size:12px;font-weight:400;color:rgba(255,255,255,.62);letter-spacing:0}
.nav-links{display:none;gap:2px;margin-left:auto}
.nav-links a{color:rgba(255,255,255,.8);text-decoration:none;font-size:15px;font-weight:500;padding:8px 12px;border-radius:10px}
.nav-links a:hover,.nav-links a[aria-current=page]{color:#fff;background:rgba(255,255,255,.08)}
.nav-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-links+.nav-actions{margin-left:10px}
.nav .btn{min-height:40px;padding:0 16px;font-size:15px;box-shadow:none}
.nav-login{color:#fff;text-decoration:none;font-size:15px;font-weight:500;padding:8px 10px;border-radius:10px}
.nav-login:hover{background:rgba(255,255,255,.08)}
.nav .short{display:none}
@media (min-width:980px){.nav-links{display:flex}}
@media (max-width:430px){.brand small{display:none}.nav .long{display:none}.nav .short{display:inline}.nav .btn{padding:0 14px}}

/* hero */
.hero{background:radial-gradient(70% 60% at 50% 0%,rgba(21,101,224,.45),rgba(21,101,224,0) 72%),var(--night);color:#fff;padding:48px 0 60px;text-align:center;overflow:hidden}
.hero-in{max-width:980px;margin:0 auto;padding:0 var(--gutter)}
.hero .eyebrow{color:var(--sky);margin-bottom:16px}
.hero h1{color:#fff;font-size:clamp(34px,6.4vw,60px);line-height:1.06;letter-spacing:-.03em;max-width:840px;margin:0 auto}
.hero h1 .accent{color:var(--sky)}
.hero .sub{font-size:clamp(17px,2vw,20px);line-height:1.6;color:rgba(255,255,255,.8);max-width:640px;margin:20px auto 0}
.vsl{position:relative;max-width:900px;margin:36px auto 0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.14);aspect-ratio:16/9;background:#0b1c44}
.vsl-poster{display:block;width:100%;height:100%;padding:0;margin:0;border:0;background:none;cursor:pointer;position:relative}
.vsl-poster img,.vsl video{width:100%;height:100%;object-fit:cover}
.vsl-poster::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 rgba(157,194,255,0);transition:box-shadow .2s}
.vsl-poster:hover::after{box-shadow:inset 0 0 0 4px rgba(157,194,255,.55)}
.vsl-poster:focus-visible{outline:none}
.vsl-poster:focus-visible::after{box-shadow:inset 0 0 0 4px var(--sky)}
.vsl-meta{margin-top:12px;font-size:13px;color:rgba(255,255,255,.6)}
@media (min-width:768px){.hero{padding:64px 0 76px}}

/* proof band */
.proof{border-bottom:1px solid var(--line);background:#fff}
.proof ul{list-style:none;margin:0 auto;padding:24px 0;display:grid;grid-template-columns:1fr 1fr;row-gap:20px}
.proof li{text-align:center;padding:0 10px}
.proof li:nth-child(even){border-left:1px solid var(--line)}
.proof b{display:block;font-size:clamp(20px,2.6vw,28px);font-weight:600;color:var(--ink);letter-spacing:-.02em;line-height:1.2}
.proof span{display:block;font-size:14px;color:var(--muted);margin-top:4px;line-height:1.45}
@media (min-width:860px){.proof ul{grid-template-columns:repeat(4,1fr);padding:28px 0}.proof li+li{border-left:1px solid var(--line)}}

/* problem */
.problem{display:grid;gap:44px;align-items:center}
@media (min-width:920px){.problem{grid-template-columns:1fr 1.05fr;gap:56px}}
.chat{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 22px;box-shadow:var(--shadow);max-width:470px;margin:0 auto;width:100%}
.chat-top{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--ink);padding:2px 2px 14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.chat-top .ic{color:var(--cobalt)}
.chat-top .unread{margin-left:auto;background:var(--red);color:#fff;border-radius:999px;font-size:12px;font-weight:500;padding:2px 9px}
.bubble{max-width:84%;padding:9px 14px;border-radius:18px 18px 18px 6px;font-size:15px;line-height:1.45;margin:8px 0;background:#EEF1F6;color:var(--ink)}
.bubble small{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.bubble.me{margin-left:auto;border-radius:18px 18px 6px 18px;background:var(--cobalt);color:#fff}
.bubble.me small{color:rgba(255,255,255,.75)}
.chat .mascot{position:absolute;right:-6px;bottom:-30px;width:96px}
.note-card{margin:16px 0 0;padding:12px 14px;border-radius:var(--radius-xs);background:#FFFBEA;border:1px dashed #E8D27A;font-size:14px;color:#5A4A00;line-height:1.5}
.pains{list-style:none;padding:0;display:grid;gap:14px;margin-top:28px}
@media (min-width:560px){.pains{grid-template-columns:1fr 1fr;column-gap:24px}}
.pains li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5}
.pains .ic{color:var(--red);margin-top:1px}

/* from to */
.shift{display:grid;gap:16px;align-items:stretch;margin-top:40px}
@media (min-width:860px){.shift{grid-template-columns:1fr 56px 1.15fr;gap:20px}}
.shift-col{border-radius:var(--radius);padding:26px 24px;background:#fff;border:1px solid var(--line)}
.shift-col h3{font-size:16px;font-weight:600;margin-bottom:14px;color:var(--muted)}
.shift-col.after{background:var(--navy);border-color:var(--navy);color:#fff}
.shift-col.after h3{color:var(--sky)}
.shift-arrow{align-self:center;justify-self:center;width:48px;height:48px;border-radius:50%;background:var(--cobalt);color:#fff;display:grid;place-items:center;transform:rotate(90deg)}
@media (min-width:860px){.shift-arrow{transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:14px;font-weight:500;color:var(--ink);line-height:1.2}
.chip .ic{width:16px;height:16px;color:var(--muted)}
.chip.strike{color:var(--muted);text-decoration:line-through;text-decoration-color:rgba(180,35,24,.55)}
.after-list{list-style:none;padding:0;display:grid;gap:10px}
@media (min-width:520px){.after-list{grid-template-columns:1fr 1fr}}
.after-list li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;color:#fff}
.after-list .ic{color:var(--sky);margin-top:1px}
.after-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-weight:600;color:#fff;font-size:17px}
.after-brand img{width:36px;height:36px;border-radius:10px}

/* one system flow */
.flow{list-style:none;padding:0;margin:44px 0 0;display:grid;gap:18px;counter-reset:step}
.flow li{position:relative;padding:0 0 0 58px;min-height:44px}
.flow li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:#fff;border:2px solid var(--cobalt);color:var(--cobalt);font-weight:600;font-size:15px;display:grid;place-items:center}
.flow li::after{content:"";position:absolute;left:20px;top:46px;bottom:-16px;width:2px;background:var(--cobalt-100)}
.flow li:last-child::after{display:none}
.flow li:last-child::before{background:var(--cobalt);color:#fff}
.flow h3{font-size:17px;line-height:1.3;padding-top:9px}
.flow p{font-size:15px;color:var(--muted);margin-top:4px;line-height:1.5}
@media (min-width:980px){
  .flow{grid-template-columns:repeat(7,1fr);gap:0}
  .flow li{padding:60px 8px 0;text-align:center}
  .flow li::before{left:50%;transform:translateX(-50%)}
  .flow li::after{left:calc(50% + 26px);right:calc(-50% + 26px);top:20px;bottom:auto;width:auto;height:2px}
  .flow h3{padding-top:0;font-size:16px}
  .flow p{font-size:14px}
}

/* live preview */
.tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.tab{font:500 14px/1.2 var(--font);padding:10px 15px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer}
.tab:hover{border-color:var(--cobalt-100);background:var(--cobalt-50)}
.tab[aria-selected=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.frame{margin:22px auto 0;max-width:1000px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.frame-bar{height:36px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#F2F4F8;border-bottom:1px solid var(--line)}
.frame-bar i{width:10px;height:10px;border-radius:50%;background:#D4DAE5}
.frame-bar span{margin-left:10px;font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:8px;padding:2px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left;background:var(--soft)}
.panel.phones{background:var(--soft);padding:22px 16px 0;display:flex;justify-content:center;gap:18px}
.panel.phones img{width:auto;max-width:42%;aspect-ratio:auto;border:7px solid #1B2433;border-bottom:0;border-radius:28px 28px 0 0;object-fit:contain;max-height:440px}
.cap{padding:14px 18px;font-size:15px;color:var(--text);border-top:1px solid var(--line);background:#fff;line-height:1.5}

/* devices */
.devices{position:relative;max-width:940px;margin:44px auto 0;padding:0 7% 7% 7%}
.dv-laptop .dv-screen{border:10px solid #1B2433;border-bottom-width:14px;border-radius:18px 18px 6px 6px;overflow:hidden;background:#1B2433;box-shadow:var(--shadow)}
.dv-laptop .dv-screen img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left}
.dv-base{height:14px;margin:0 -6%;border-radius:0 0 14px 14px;background:linear-gradient(#D8DEE8,#B9C2D1);position:relative}
.dv-base::before{content:"";position:absolute;left:50%;top:0;width:16%;height:6px;transform:translateX(-50%);background:#AAB4C5;border-radius:0 0 8px 8px}
.dv-tablet{position:absolute;right:0;bottom:2%;width:27%;border:9px solid #1B2433;border-radius:22px;overflow:hidden;background:#1B2433;box-shadow:var(--shadow-lg)}
.dv-phone{position:absolute;left:0;bottom:0;width:17%;border:7px solid #1B2433;border-radius:24px;overflow:hidden;background:#1B2433;box-shadow:var(--shadow-lg)}
.dv-tablet img,.dv-phone img{width:100%}
.devices figure{margin:0}
.checks{list-style:none;padding:0;display:grid;gap:12px;margin:44px auto 0;max-width:860px}
@media (min-width:640px){.checks{grid-template-columns:1fr 1fr;column-gap:32px}}
.checks li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45;color:var(--ink)}
.checks .ic{color:var(--cobalt);margin-top:2px}

/* feature cards */
.features{display:grid;gap:20px;margin-top:40px}
@media (min-width:640px){.features{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.features{grid-template-columns:repeat(3,1fr)}}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.feature>img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left;border-bottom:1px solid var(--line);background:var(--soft)}
.feature .fbody{padding:20px 22px 24px}
.feature .label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--cobalt)}
.feature .label .ic{width:18px;height:18px}
.feature h3{font-size:19px;line-height:1.3;margin-top:8px}
.feature p{font-size:15px;color:var(--muted);margin-top:8px;line-height:1.55}
.feature.icon-only{justify-content:flex-start}
.also{display:grid;gap:14px;margin-top:28px;list-style:none;padding:0}
@media (min-width:640px){.also{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.also{grid-template-columns:repeat(3,1fr)}}
.also li{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line)}
.also .ic{color:var(--cobalt);width:22px;height:22px;margin-top:2px}
.also b{display:block;font-size:15px;color:var(--ink);font-weight:600}
.also span{display:block;font-size:14px;color:var(--muted);line-height:1.5;margin-top:2px}
.price-line{margin-top:14px;font-size:15px;color:var(--muted)}

/* 3D floor */
.floor-wrap{margin:36px auto 0;max-width:1000px;background:#F7F9FD;border-radius:var(--radius);padding:10px;box-shadow:var(--shadow-lg)}
.floor-wrap svg{width:100%;height:auto}
.floor-wrap svg text{font-family:var(--font)}
.points{display:grid;gap:22px;margin-top:40px}
@media (min-width:700px){.points{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.points{grid-template-columns:repeat(4,1fr)}}
.point .ic{width:28px;height:28px;color:var(--sky);margin-bottom:10px}
.point h3{font-size:17px}
.point p{font-size:15px;color:rgba(255,255,255,.72);margin-top:6px;line-height:1.55}

/* guide */
.guide{display:grid;gap:44px;align-items:start}
@media (min-width:940px){.guide{grid-template-columns:1fr 1fr;gap:56px}}
.ask{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.ask-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.ask-head .ic{color:var(--cobalt)}
.ask-head b{font-size:16px;color:var(--ink)}
.ask-head span{font-size:13px;color:var(--muted);margin-left:auto;text-align:right}
.ask-body{padding:16px 18px 20px;display:grid;gap:10px}
.q{justify-self:end;background:var(--cobalt);color:#fff;border-radius:18px 18px 6px 18px;padding:9px 14px;font-size:15px;max-width:86%}
.a{justify-self:start;background:var(--soft);border-radius:18px 18px 18px 6px;padding:11px 14px;font-size:15px;max-width:94%;color:var(--ink);width:100%}
.a ul{list-style:none;padding:0;margin:8px 0 0}
.a li{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-top:1px solid var(--line);padding:6px 0 0;margin-top:6px;color:var(--text)}
.a li span:last-child{white-space:nowrap;font-weight:500;color:var(--ink)}
.ask-foot{padding:12px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);background:#FBFCFE}
.roles{display:grid;gap:22px;margin-top:28px}
.role{display:flex;gap:14px;align-items:flex-start}
.role .ic{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--cobalt-50);color:var(--cobalt);flex:0 0 40px}
.role h3{font-size:17px}
.role p{font-size:15px;color:var(--muted);margin-top:4px;line-height:1.55}

/* versus */
.vs{max-width:920px;margin:36px auto 0;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.vs-row{display:grid;grid-template-columns:1fr 1fr}
.vs-row>div{padding:14px 16px;font-size:15px;line-height:1.45;display:flex;gap:10px;align-items:flex-start}
.vs-row .no{color:rgba(255,255,255,.62);background:rgba(255,255,255,.03)}
.vs-row .yes{color:#fff;background:rgba(21,101,224,.2)}
.vs-row .no .ic{color:#F19A93;margin-top:1px}
.vs-row .yes .ic{color:var(--sky);margin-top:1px}
.vs-row+.vs-row>div{border-top:1px solid rgba(255,255,255,.08)}
.vs-head>div{font-weight:600;font-size:14px;color:#fff;padding-top:16px;padding-bottom:16px}
.vs-head .no{color:rgba(255,255,255,.75)}
@media (max-width:520px){.vs-row>div{padding:12px;font-size:14px;gap:8px}.vs-row .ic{width:18px;height:18px}}

/* who */
.who{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px;margin:32px auto 0;list-style:none;padding:0}
.who li{padding:12px 18px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:15px;font-weight:500;color:var(--ink)}

/* paths */
.paths{display:grid;gap:20px;margin-top:40px}
@media (min-width:880px){.paths{grid-template-columns:1fr 1fr}}
.path{border-radius:var(--radius);padding:28px 24px;border:1px solid var(--line);background:#fff;position:relative;display:flex;flex-direction:column}
.path.main{border:2px solid var(--cobalt);box-shadow:0 18px 48px rgba(21,101,224,.12)}
.badge{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;font-size:13px;font-weight:500;padding:4px 11px;border-radius:999px;background:var(--cobalt-50);color:var(--cobalt)}
.badge.solid{background:var(--cobalt);color:#fff}
.path h3{font-size:22px;margin-top:14px}
.path .sub2{font-size:15px;color:var(--muted);margin-top:6px}
.ticks{list-style:none;padding:0;margin-top:18px;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5}
.ticks .ic{color:var(--cobalt);margin-top:1px}
.path .fine{margin-top:auto;padding-top:18px;font-size:14px;color:var(--muted)}
.path .rider{position:absolute;right:14px;top:-34px;width:84px}
@media (max-width:420px){.path .rider{width:64px;top:-26px}}

/* pricing */
.billing{display:inline-flex;padding:4px;border-radius:16px;background:#fff;border:1px solid var(--line);gap:4px;box-shadow:var(--shadow)}
.billing button{font:500 15px/1.2 var(--font);border:0;background:transparent;padding:11px 18px;border-radius:12px;cursor:pointer;color:var(--ink)}
.billing button[aria-pressed=true]{background:var(--navy);color:#fff}
.billing .save{font-size:12px;font-weight:500;margin-left:6px;color:var(--green)}
.billing button[aria-pressed=true] .save{color:#9BE7B5}
.founding{display:flex;gap:14px;align-items:flex-start;max-width:820px;margin:28px auto 0;padding:16px 20px;border-radius:var(--radius-sm);background:#FFF9E3;border:1px solid #F3DD86;color:#4A3C00;font-size:15px;line-height:1.55;text-align:left}
.founding .ic{color:#B58900;width:24px;height:24px;margin-top:1px}
.founding b{color:#3A2F00}
.plans{display:grid;gap:22px;margin-top:36px;align-items:stretch}
@media (min-width:920px){.plans{grid-template-columns:repeat(3,1fr);gap:20px}}
.plan{border:1px solid var(--line);border-radius:var(--radius);padding:28px 24px;background:#fff;display:flex;flex-direction:column;position:relative;text-align:left}
.plan.best{border:2px solid var(--cobalt);box-shadow:0 20px 50px rgba(21,101,224,.16)}
.plan .flag{position:absolute;top:-14px;left:24px;background:var(--cobalt);color:#fff;font-size:13px;font-weight:500;padding:5px 12px;border-radius:999px}
.plan h3{font-size:21px}
.plan .for{font-size:15px;color:var(--muted);margin-top:4px;line-height:1.5}
.price{margin-top:18px;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.price b{font-size:42px;font-weight:600;color:var(--ink);letter-spacing:-.03em;line-height:1}
.price span{font-size:15px;color:var(--muted)}
.price-note{font-size:14px;color:var(--muted);margin-top:8px;min-height:21px}
.price-note.good{color:var(--green)}
.plan ul{list-style:none;padding:0;margin:20px 0 24px;display:grid;gap:10px;flex:1}
.plan li{display:flex;gap:10px;font-size:15px;line-height:1.45}
.plan li .ic{color:var(--cobalt);margin-top:1px}
.includes{max-width:900px;margin:36px auto 0;text-align:center}
.includes h3{font-size:16px;color:var(--ink)}
.includes ul{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;list-style:none;padding:0;margin-top:14px}
.includes li{font-size:14px;padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--text)}
.next{display:grid;gap:18px;max-width:1000px;margin:44px auto 0;list-style:none;padding:0;counter-reset:nx}
@media (min-width:760px){.next{grid-template-columns:repeat(4,1fr);gap:20px}}
.next li{position:relative;padding-left:44px;font-size:15px;line-height:1.5;color:var(--muted);text-align:left}
.next li::before{counter-increment:nx;content:counter(nx);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--cobalt-50);color:var(--cobalt);font-weight:600;font-size:14px;display:grid;place-items:center}
.next b{display:block;color:var(--ink);font-size:15px;font-weight:600}

/* setup services */
.services{display:grid;gap:20px;margin-top:36px}
@media (min-width:760px){.services{grid-template-columns:1fr 1fr}}
@media (min-width:1060px){.services{grid-template-columns:repeat(3,1fr)}}
.service{border:1px solid var(--line);border-radius:var(--radius);padding:24px;background:#fff;display:flex;flex-direction:column}
.service h3{font-size:18px}
.service .sprice{margin-top:10px;font-size:15px;color:var(--muted)}
.service .sprice b{font-size:26px;color:var(--ink);font-weight:600;letter-spacing:-.02em;margin-right:4px}
.service .opts{list-style:none;padding:0;margin-top:10px;display:grid;gap:6px}
.service .opts li{display:flex;justify-content:space-between;font-size:15px;border-bottom:1px solid var(--line);padding:6px 0}
.service .opts li b{font-weight:600;color:var(--ink)}
.service ul.ticks{margin-top:16px}
.service .more{margin-top:12px;font-size:14px;color:var(--muted)}

/* compare table */
.compare{width:100%;border-collapse:separate;border-spacing:0;margin-top:32px;font-size:15px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.compare th,.compare td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.compare thead th{background:var(--soft);font-weight:600;color:var(--ink);font-size:15px}
.compare tbody tr:last-child td,.compare tbody tr:last-child th{border-bottom:0}
.compare td{color:var(--text)}
.compare th[scope=row]{font-weight:500;color:var(--ink)}
.compare .ic{color:var(--cobalt)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius)}

/* mission */
.mission{display:grid;gap:36px;align-items:center}
@media (min-width:900px){.mission{grid-template-columns:1.2fr .8fr}}
.quote{margin:24px 0 0;padding:0 0 0 18px;border-left:3px solid var(--cobalt);font-size:clamp(18px,2vw,21px);line-height:1.55;color:var(--ink);font-weight:500}
.mission .mascot{max-width:260px;margin:0 auto}

/* faq */
.faq{max-width:var(--narrow);margin:28px auto 0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-size:17px;font-weight:500;color:var(--ink);position:relative;line-height:1.45}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:translateY(-75%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.faq .ans{padding:0 0 20px;color:var(--muted);font-size:16px;line-height:1.65}
.faq .ans p+p{margin-top:10px}

/* final cta */
.final{background:radial-gradient(60% 80% at 50% 100%,rgba(21,101,224,.38),rgba(21,101,224,0) 70%),var(--night);text-align:center;color:#fff}
.final h2{color:#fff}
.final .mascot{width:120px;margin:0 auto 18px}

/* page header (inner pages) */
.page-hero{background:radial-gradient(70% 70% at 50% 0%,rgba(21,101,224,.4),rgba(21,101,224,0) 72%),var(--night);color:#fff;padding:52px 0 56px;text-align:center}
.page-hero h1{color:#fff;font-size:clamp(32px,5.4vw,52px);line-height:1.08;letter-spacing:-.03em;max-width:820px;margin:0 auto}
.page-hero .sub{font-size:clamp(17px,1.9vw,19px);color:rgba(255,255,255,.8);max-width:660px;margin:16px auto 0;line-height:1.6}
.page-hero .eyebrow{color:var(--sky)}

/* features page */
.module{display:grid;gap:28px;align-items:center;padding:44px 0;border-top:1px solid var(--line)}
.module:first-of-type{border-top:0;padding-top:8px}
@media (min-width:900px){.module{grid-template-columns:1fr 1.1fr;gap:56px}.module.flip>:first-child{order:2}}
.module h2{font-size:clamp(24px,3vw,32px);line-height:1.2}
.module .ticks{margin-top:18px}
.module .shot{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);background:#fff}
.module .shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top left}
.module .shot.phone{max-width:300px;margin:0 auto;border:8px solid #1B2433;border-radius:30px}
.module .shot.phone img{aspect-ratio:auto}
.arch{display:grid;gap:18px;margin-top:36px}
@media (min-width:900px){.arch{grid-template-columns:1fr 1fr 1fr;align-items:stretch}}
.arch-box{border-radius:var(--radius);padding:22px;border:1px solid var(--line);background:#fff}
.arch-box.os{border:2px solid var(--cobalt);background:var(--cobalt-50)}
.arch-box h3{font-size:17px;color:var(--ink)}
.arch-box p{font-size:14px;color:var(--muted);margin-top:6px}
.arch-box ul{list-style:none;padding:0;margin-top:12px;display:grid;gap:6px}
.arch-box li{font-size:14px;color:var(--text);display:flex;gap:8px;align-items:flex-start}
.arch-box li .ic{width:16px;height:16px;color:var(--cobalt);margin-top:3px}
.arch-flow{display:flex;align-items:center;justify-content:center;color:var(--cobalt);font-size:14px;text-align:center;gap:8px;flex-direction:column}
.arch-flow .ic{width:28px;height:28px;transform:rotate(90deg)}
@media (min-width:900px){.arch-flow .ic{transform:none}}

/* tutorials */
.learn-nav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:24px}
.learn-nav a{font-size:14px;font-weight:500;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);color:#fff;text-decoration:none}
.learn-nav a:hover{background:rgba(255,255,255,.08)}
.track{padding:8px 0 0}
.track+.track{margin-top:48px}
.track-head{display:flex;gap:14px;align-items:center;margin-bottom:18px}
.track-head .ic{width:44px;height:44px;padding:10px;border-radius:14px;background:var(--cobalt-50);color:var(--cobalt)}
.track-head h2{font-size:clamp(22px,2.8vw,28px)}
.track-head p{font-size:15px;color:var(--muted)}
.guides details{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;margin-top:10px}
.guides summary{list-style:none;cursor:pointer;padding:16px 44px 16px 18px;font-size:16px;font-weight:500;color:var(--ink);position:relative}
.guides summary::-webkit-details-marker{display:none}
.guides summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:translateY(-75%) rotate(45deg)}
.guides details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.guides .gbody{padding:0 18px 18px;font-size:15px;color:var(--text);line-height:1.65}
.guides .gbody ol,.guides .gbody ul{padding-left:20px;margin-top:8px;display:grid;gap:6px}
.guides .gbody p+p,.guides .gbody p+ol,.guides .gbody p+ul,.guides .gbody ol+p,.guides .gbody ul+p{margin-top:10px}
.guides .where{display:inline-block;font-size:13px;font-weight:500;color:var(--cobalt);background:var(--cobalt-50);border-radius:8px;padding:2px 8px;margin-top:10px}
.spec{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
.spec th,.spec td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:left;vertical-align:top}
.spec th{color:var(--ink);font-weight:600}

/* checkout */
.checkout{display:grid;gap:28px;align-items:start;margin-top:8px}
@media (min-width:980px){.checkout{grid-template-columns:1.35fr .9fr;gap:36px}}
.steps{list-style:none;padding:0;display:flex;gap:8px;flex-wrap:wrap;margin:0 0 22px}
.steps li{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--muted);padding:7px 12px 7px 8px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.steps li span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;background:var(--soft);color:var(--muted)}
.steps li[aria-current=step]{color:var(--ink);border-color:var(--cobalt)}
.steps li[aria-current=step] span{background:var(--cobalt);color:#fff}
.steps li.done span{background:var(--cobalt-50);color:var(--cobalt)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px 20px}
@media (min-width:640px){.card{padding:28px}}
.card h2{font-size:22px}
.card .hint{font-size:15px;color:var(--muted);margin-top:6px}
.choice{display:grid;gap:12px;margin-top:20px}
.option{position:relative;display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px;cursor:pointer;background:#fff;transition:border-color .15s,background-color .15s}
.option:hover{border-color:var(--cobalt-100)}
.option input{position:absolute;opacity:0;pointer-events:none}
.option .mark{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:2px solid #B9C3D4;margin-top:2px;display:grid;place-items:center}
.option.check .mark{border-radius:7px}
.option .mark::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--cobalt);transform:scale(0);transition:transform .15s}
.option.check .mark::after{width:12px;height:7px;border-radius:0;background:none;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) scale(0);margin-top:-3px}
.option:has(input:checked){border-color:var(--cobalt);background:var(--cobalt-50)}
.option:has(input:checked) .mark{border-color:var(--cobalt)}
.option:has(input:checked) .mark::after{transform:scale(1)}
.option.check:has(input:checked) .mark{background:var(--cobalt)}
.option.check:has(input:checked) .mark::after{transform:rotate(-45deg) scale(1)}
.option:has(input:focus-visible){outline:3px solid var(--sky);outline-offset:2px}
.option .otext{flex:1;min-width:0}
.option b{display:block;font-size:16px;color:var(--ink);font-weight:600}
.option small{display:block;font-size:14px;color:var(--muted);margin-top:2px;line-height:1.5}
.option .oprice{font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap;margin-left:auto;padding-left:10px}
.seg{display:inline-flex;padding:4px;border-radius:14px;background:var(--soft);border:1px solid var(--line);gap:4px;margin-top:18px}
.seg button{font:500 15px/1.2 var(--font);border:0;background:transparent;padding:10px 16px;border-radius:10px;cursor:pointer;color:var(--ink)}
.seg button[aria-pressed=true]{background:#fff;color:var(--cobalt);box-shadow:var(--shadow)}
.field{display:grid;gap:6px;margin-top:16px}
.field label{font-size:14px;font-weight:500;color:var(--ink)}
.field .opt{font-weight:400;color:var(--muted)}
.input,.select,.textarea{width:100%;font:400 16px/1.4 var(--font);color:var(--ink);background:#fff;border:1px solid #CBD3E1;border-radius:12px;padding:12px 14px;min-height:48px}
.textarea{min-height:96px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(21,101,224,.18)}
.field .err{font-size:13px;color:var(--red);display:none}
.field.bad .input,.field.bad .select{border-color:var(--red)}
.field.bad .err{display:block}
.grid2{display:grid;gap:0 16px}
@media (min-width:600px){.grid2{grid-template-columns:1fr 1fr}}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.pill input{position:absolute;opacity:0;pointer-events:none}
.pill:has(input:checked){background:var(--navy);border-color:var(--navy);color:#fff}
.pill:has(input:focus-visible){outline:3px solid var(--sky);outline-offset:2px}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:18px;font-size:14px;color:var(--text);line-height:1.5}
.consent input{width:20px;height:20px;margin-top:1px;accent-color:var(--cobalt);flex:0 0 20px}
.nav-btns{display:flex;gap:12px;justify-content:space-between;margin-top:26px;flex-wrap:wrap}
.nav-btns .btn{flex:1 1 160px}
.summary{position:sticky;top:84px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow)}
.summary h2{font-size:18px}
.sum-rows{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:10px}
.sum-rows li{display:flex;justify-content:space-between;gap:14px;font-size:15px;color:var(--text)}
.sum-rows li span:last-child{white-space:nowrap;font-weight:500;color:var(--ink)}
.sum-rows li.muted span{color:var(--muted);font-weight:400}
.sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);margin-top:14px;padding-top:14px;font-weight:600;color:var(--ink)}
.sum-total b{font-size:26px;letter-spacing:-.02em}
.sum-note{font-size:13px;color:var(--muted);margin-top:10px;line-height:1.55}
.review-list{list-style:none;padding:0;margin-top:16px;display:grid;gap:8px}
.review-list li{display:grid;grid-template-columns:140px 1fr;gap:12px;font-size:15px;border-bottom:1px solid var(--line);padding-bottom:8px}
.review-list li span:first-child{color:var(--muted)}
@media (max-width:480px){.review-list li{grid-template-columns:1fr;gap:2px}}
.send{display:grid;gap:12px;margin-top:22px}
@media (min-width:600px){.send{grid-template-columns:1fr 1fr}}
.sent{display:none;margin-top:18px;padding:14px 16px;border-radius:var(--radius-sm);background:#ECF8F1;border:1px solid #BFE5CF;color:#0E5A2E;font-size:15px;line-height:1.55}
.sent.show{display:block}
.copybox{width:100%;margin-top:14px;font:400 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--text);background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px;min-height:150px;resize:vertical}

/* 404 */
.nf{min-height:60vh;display:grid;place-items:center;text-align:center;padding:64px 16px}
.nf img{width:120px;margin:0 auto 18px}

/* footer */
.foot{background:var(--night);color:rgba(255,255,255,.64);font-size:14px;padding:52px 0 30px}
.foot a{color:rgba(255,255,255,.86);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot-grid{display:grid;gap:30px}
@media (min-width:820px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.foot .brand{margin-bottom:12px}
.foot h2{color:#fff;font-size:14px;font-weight:600;margin-bottom:12px;letter-spacing:0}
.foot ul{list-style:none;padding:0;display:grid;gap:9px}
.foot p{line-height:1.6;max-width:360px}
.legal{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:20px;font-size:13px;line-height:1.6;display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}

/* mobile menu */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:#fff;border:1px solid rgba(255,255,255,.2)}
.menu summary::-webkit-details-marker{display:none}
.menu summary .ic{width:22px;height:22px}
.menu[open] summary{background:rgba(255,255,255,.1)}
.menu nav{position:absolute;right:0;top:52px;min-width:220px;background:var(--night-2);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);padding:8px;display:grid;box-shadow:var(--shadow-lg)}
.menu nav a{color:#fff;text-decoration:none;font-size:16px;font-weight:500;padding:12px 14px;border-radius:10px}
.menu nav a:hover,.menu nav a[aria-current=page]{background:rgba(255,255,255,.08)}
@media (min-width:980px){.menu{display:none}}
.label-like{font-size:14px;font-weight:500;color:var(--ink)}
.summary .next{grid-template-columns:1fr;margin-top:20px;gap:12px}
.summary .next li{font-size:14px}
.option select{margin-top:10px}
.option .otext .select{max-width:280px}
fieldset{border:0;margin:0;padding:0;min-width:0}
.card h2:focus{outline:none}

/* QA fixes */
[hidden]{display:none!important}
.nav-login{white-space:nowrap}
@media (max-width:600px){.nav-login{display:none}}
.final .cta-note{color:rgba(255,255,255,.66)}
@media (max-width:600px){.chat .mascot{display:none}.mission .mascot{max-width:200px}}
@media (min-width:601px){.note-card{margin-right:84px}}
.checkout>*{min-width:0}
.option .oprice{white-space:normal;text-align:right;max-width:44%}
@media (max-width:480px){.option{flex-wrap:wrap}.option .oprice{margin-left:36px;padding-left:0;text-align:left;max-width:none;width:100%}}
.table-scroll{position:relative}

/* ===== v2 update: progression, package tags, areas, 3D, remote, presets, benefits, packages, connect ===== */
.progression{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:0;margin:22px 0 0}
.progression li{font-size:14px;font-weight:500;padding:6px 14px;border-radius:999px;border:1px solid rgba(157,194,255,.35);color:#DCE8FF;background:rgba(21,101,224,.18)}
.textlink.light{color:#fff}
.final-name{margin-top:22px;font-size:15px;font-weight:500;color:var(--sky)}
.final .progression{margin-top:10px}

.status{display:inline-flex;align-items:center;font-size:12px;font-weight:500;line-height:1.4;padding:2px 9px;border-radius:999px;background:#FFF4D6;color:#7A5300;border:1px solid #F1D58A;white-space:nowrap;vertical-align:middle}
.status.live{background:#E7F6EE;color:#0E5A2E;border-color:#BFE5CF}
.dark .status{background:rgba(250,204,21,.14);color:#FDE68A;border-color:rgba(250,204,21,.35)}
.dark .status.live{background:rgba(34,197,94,.14);color:#A7F3C5;border-color:rgba(34,197,94,.35)}
.pk{display:inline-flex;align-items:center;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.02em;padding:2px 8px;border-radius:999px;background:var(--cobalt-50);color:var(--cobalt);border:1px solid var(--cobalt-100);vertical-align:middle;white-space:nowrap}

.areas{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:14px}
@media (min-width:640px){.areas{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.areas{grid-template-columns:repeat(3,1fr)}}
.areas li{display:flex;gap:14px;align-items:flex-start;padding:18px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line)}
.areas .ic{width:40px;height:40px;padding:9px;border-radius:12px;background:var(--cobalt-50);color:var(--cobalt);flex:0 0 40px}
.areas h3{font-size:16px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.areas p{font-size:14px;color:var(--text);margin-top:4px;line-height:1.5}
.areas .why{color:var(--muted)}

@media (min-width:980px){.flow.six{grid-template-columns:repeat(6,1fr)}}
.benefit-chips{list-style:none;padding:0;margin:36px auto 0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.benefit-chips li{display:inline-flex;gap:8px;align-items:center;padding:10px 16px;border-radius:999px;background:var(--cobalt-50);color:var(--ink);font-size:15px;font-weight:500}
.benefit-chips .ic{color:var(--cobalt);width:18px;height:18px}

.quote-dark{margin-top:18px;font-size:clamp(17px,2vw,20px);font-weight:500;color:#fff}
.iso{margin:32px auto 0;max-width:980px;background:#F3F6FB;border-radius:var(--radius);padding:12px;box-shadow:var(--shadow-lg)}
.iso img{width:100%;height:auto;border-radius:16px}
.iso figcaption{font-size:13px;color:var(--muted);text-align:center;padding:10px 4px 2px}
.shown{list-style:none;padding:0;margin:26px auto 0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:860px}
.shown li{font-size:14px;font-weight:500;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);color:#E6EEFF}
.fine-dark{font-size:14px;color:rgba(255,255,255,.62);margin:16px auto 0;max-width:680px}
.clicks{display:grid;gap:28px;align-items:center;margin-top:48px}
@media (min-width:1000px){.clicks{grid-template-columns:1.15fr .85fr;gap:40px}}
.clicks .fine-dark{margin-left:0}
.shot-frame{margin:0;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.14);box-shadow:var(--shadow-lg);background:#fff}
.shot-frame img{width:100%;height:auto}
.clicks h3{font-size:22px;color:#fff}
.click-list{list-style:none;padding:0;margin:14px 0 0;display:grid}
.click-list li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.click-list b{color:#fff;font-size:15px;font-weight:600}
.click-list span:not(.status){grid-column:1;color:rgba(255,255,255,.72);font-size:14px}
.click-list .status{grid-column:2;grid-row:1 / span 2;align-self:center}

.monitor{list-style:none;padding:0;margin:40px auto 0;display:grid;gap:10px;max-width:900px}
@media (min-width:560px){.monitor{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.monitor{grid-template-columns:repeat(4,1fr)}}
.monitor li{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line);font-size:15px;font-weight:500;color:var(--ink)}
.monitor .ic{color:var(--cobalt)}
.ask-wide{max-width:640px;margin:32px auto 0}
.ask-head .pk{margin-left:auto}

.config{list-style:none;padding:0;margin:0 auto;display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:900px}
.config li{display:inline-flex;gap:8px;align-items:center;padding:10px 16px;border-radius:999px;background:var(--soft);border:1px solid var(--line);font-size:15px;font-weight:500;color:var(--ink)}
.cmd-block{display:grid;gap:28px;align-items:center;margin-top:44px;padding:20px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--line)}
@media (min-width:960px){.cmd-block{grid-template-columns:1.1fr .9fr;padding:32px}}
.cmd-block .shot-frame{border-color:var(--line);box-shadow:var(--shadow)}
.cmd-block h3{font-size:22px}

.presets{display:grid;gap:14px;margin-top:8px}
@media (min-width:640px){.presets{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.presets{grid-template-columns:repeat(5,1fr)}}
.presets article{padding:18px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line)}
.presets h3{font-size:16px}
.steps-line{margin-top:8px;font-size:14px;color:var(--text);line-height:1.8}
.steps-line span{color:var(--cobalt);margin:0 3px}
.presets-note{max-width:820px;margin:24px auto 0;text-align:center;font-size:15px;color:var(--muted);line-height:1.6}
.presets-note .status{margin-right:6px}

.benefits{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:14px}
@media (min-width:640px){.benefits{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.benefits{grid-template-columns:repeat(4,1fr)}}
.benefits li{padding:20px;border-radius:var(--radius-sm);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1)}
.benefits b{display:block;font-size:18px;font-weight:600;color:#fff}
.benefits span{display:block;margin-top:6px;font-size:15px;color:rgba(255,255,255,.72);line-height:1.5}

.plan .tier{font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--cobalt)}
.plan h3{font-size:22px;margin-top:4px}
.plan .cmd-lead{margin-top:10px;font-size:15px;font-weight:500;color:var(--ink)}
.plan .cmd-shot{margin-top:14px;border-radius:14px;border:1px solid var(--line);background:#F3F6FB;width:100%;height:auto}
.price .from{font-size:15px;color:var(--muted);margin-right:2px}
.plan .offer{margin-top:14px;font-size:14px;color:var(--ink);background:var(--soft);border-radius:12px;padding:10px 12px;line-height:1.5}
.plan .offer span{color:var(--cobalt);font-weight:600;margin:0 2px}
.plan .plus{margin-top:16px;font-size:14px;font-weight:600;color:var(--ink)}
.plan ul{margin:10px 0 18px}
.plan li.soon{color:var(--muted)}
.plan li.soon .ic{color:#B58900}
.plan .limits{font-size:14px;color:var(--muted);margin:-4px 0 18px}
.plan.command{border:2px solid var(--navy)}

.compare .ic.no{color:#B8C1D1}
.compare-acc{display:none;margin-top:24px}
@media (max-width:719px){.compare-wide{display:none}.compare-acc{display:grid;gap:10px}}
.compare-acc details{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff}
.compare-acc summary{list-style:none;cursor:pointer;padding:16px 44px 16px 16px;font-weight:600;color:var(--ink);position:relative;display:flex;flex-direction:column;gap:2px}
.compare-acc summary span{font-size:14px;font-weight:400;color:var(--muted)}
.compare-acc summary::-webkit-details-marker{display:none}
.compare-acc summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;border-right:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:translateY(-75%) rotate(45deg)}
.compare-acc details[open] summary::after{transform:translateY(-25%) rotate(-135deg)}
.compare-acc ul{list-style:none;padding:0 16px 10px;margin:0}
.compare-acc li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--line);font-size:14px}
.compare-acc .ic{color:var(--cobalt)}

.adds{list-style:none;padding:0;margin:28px auto 0;max-width:860px;display:grid;gap:10px}
.adds li{padding:14px 16px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line);font-size:15px;color:var(--text)}
.adds b{display:inline-block;min-width:96px;color:var(--cobalt);font-weight:600;margin-right:8px}

.diagram{list-style:none;padding:0;margin:18px 0 6px;display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.diagram li{position:relative;padding:9px 14px;border-radius:12px;background:var(--cobalt-50);border:1px solid var(--cobalt-100);color:var(--ink);font-weight:500;font-size:15px}
.diagram li+li::before{content:"↓";position:absolute;top:-21px;left:18px;color:var(--cobalt);font-size:15px;line-height:1}
.diagram.both li+li::before{content:"↕"}
.flowstrip{margin:28px auto 0;max-width:1000px;padding:20px;border-radius:var(--radius);background:var(--soft);border:1px solid var(--line);text-align:center}
.flowstrip-title{font-weight:600;color:var(--ink);font-size:15px}
.flowstrip ol{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 6px}
.flowstrip li{display:inline-flex;align-items:center;font-size:14px;font-weight:500;color:var(--ink);padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.flowstrip li+li::before{content:"›";margin:0 8px 0 -4px;color:var(--cobalt)}
.flowstrip .fine{margin-top:12px;font-size:14px;color:var(--muted);line-height:1.6}

.see{display:grid;gap:16px;max-width:860px;margin:0 auto}
@media (min-width:700px){.see{grid-template-columns:1fr 1fr}}
.see-card{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--radius);background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--text);transition:border-color .15s,box-shadow .15s}
.see-card:hover{border-color:var(--cobalt);box-shadow:var(--shadow)}
.see-card .ic{width:28px;height:28px;color:var(--cobalt)}
.see-card b{font-size:18px;color:var(--ink);font-weight:600}
.see-card span{font-size:15px;color:var(--muted)}
#see-it .mission{margin-top:48px}
.mission-title{font-size:clamp(24px,3vw,32px)}

.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(11,31,75,.08);transform:translateY(110%);transition:transform .2s}
.sticky-cta.show{transform:none}
.sticky-cta .btn{flex:1;min-height:46px;font-size:15px;padding:0 12px;box-shadow:none}
@media (min-width:761px){.sticky-cta{display:none!important}}
@media (max-width:760px){.foot{padding-bottom:100px}}
#demo-alt{margin-top:28px}
.brand .b-short{display:none}
@media (max-width:430px){.brand .b-long{display:none}.brand .b-short{display:inline}}
@media (max-width:600px){.adds b{display:block;margin:0 0 4px}}
.plan ul{align-content:start}
.plan li{align-items:flex-start}
.plan li .status{align-self:center;margin-left:4px}
.plans>.plan{min-width:0}
.plan .btn{white-space:normal}
@media (max-width:360px){.plan{padding:24px 18px}}