/* PropertyProject marketing site */
:root{
  /* colour */
  --ink:#17304F; --ink-2:#51607A; --soft:#F5F7FA; --rule:#DDE3EC; --white:#fff; --navy:#0F2238;
  --line-ctl:#7B8BA3;
  --accent:#1A73E8; --accent-btn:#1666D0; --accent-btn-h:#1557B0; --accent-text:#1557B0;
  --ok:#137333; --ok-bg:#E6F4EA; --warn:#8A5300; --warn-bg:#FEF1D6; --open:#1557B0; --open-bg:#E8F0FE;
  --on-navy:#fff; --on-navy-2:#C7D6EC; --on-navy-link:#9CC3F2; --on-navy-err:#FFB4AB; --hair-navy:rgba(255,255,255,.16);
  /* spacing scale (px): 4 8 12 16 24 32 40 48 64 96 */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px; --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-64:64px; --sp-96:96px;
  --sec-y:clamp(72px,8vw,112px); --gutter:48px; --nav-clear:96px;
  /* radii */
  --r-xl:28px; --r-lg:20px; --r-win:16px; --r-sm:12px; --r-pill:999px;
  /* type */
  --font-d:'Figtree',system-ui,sans-serif; --font-b:'Noto Sans',system-ui,sans-serif;
  --fs-h1:clamp(38px,6vw,64px); --fs-h2:clamp(30px,3.6vw,44px); --fs-h3-step:clamp(24px,2.6vw,30px); --fs-lead:clamp(18px,1.7vw,21px);
  --shadow-1:0 1px 2px rgba(23,48,79,.08),0 1px 3px rgba(23,48,79,.06);
  --shadow-2:0 24px 64px rgba(23,48,79,.14),0 2px 6px rgba(23,48,79,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:#fff;color:var(--ink);font-family:var(--font-b);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{height:auto}
a{color:var(--accent-text)}
button{font:inherit;color:inherit;cursor:pointer}
[hidden],.err[hidden],.form-error[hidden],.success[hidden],#demoForm[hidden]{display:none}
section[id]{scroll-margin-top:var(--nav-clear)}
:focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprite{position:absolute}
.skip{position:absolute;left:var(--sp-16);top:-60px;z-index:200;background:var(--ink);color:#fff;padding:var(--sp-12) var(--sp-16);border-radius:var(--r-pill);text-decoration:none}
.skip:focus{top:var(--sp-12)}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.nowrap{white-space:nowrap}

/* layout */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gutter)}
.sec{padding:var(--sec-y) 0}
.soft{background:var(--soft)}
.head{max-width:720px;margin-bottom:var(--sp-48)}
h1,h2,h3{font-family:var(--font-d);color:var(--ink);margin:0;text-wrap:balance}
p,li,figcaption{text-wrap:pretty}
h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.015em;font-weight:600}
h3{font-size:20px;line-height:1.3;font-weight:600}
p{margin:0 0 var(--sp-16)}
.eyebrow{margin:0 0 var(--sp-24);font-family:var(--font-d);font-weight:600;font-size:16px;line-height:1.4;color:var(--ink-2);text-wrap:balance}
.lead{font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2);margin:var(--sp-16) 0 0;max-width:62ch}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-8);background:var(--accent-btn);color:#fff;border:1px solid transparent;border-radius:var(--r-pill);padding:12px var(--sp-24);min-height:48px;font-family:var(--font-b);font-weight:600;font-size:16px;line-height:24px;text-decoration:none;transition:background-color .15s}
.btn:hover{background:var(--accent-btn-h)}
.btn-sm{padding:var(--sp-8) var(--sp-24);font-size:15px;min-height:44px}
.btn[aria-disabled="true"]{opacity:.7;cursor:default;pointer-events:none}
.btn-text{background:none;border:0;color:var(--accent-text);font-weight:600;padding:0;min-height:44px;display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:3px}
.is-static,.is-static:hover{background:var(--soft);color:var(--ink-2);pointer-events:none;cursor:default;opacity:1;min-height:36px;padding:var(--sp-4) var(--sp-16)}

/* nav */
.navhold{position:fixed;top:0;left:0;right:0;z-index:100;padding:var(--sp-12) var(--sp-16) 0;pointer-events:none}
.nav{pointer-events:auto;position:relative;max-width:1104px;margin:0 auto;display:flex;align-items:center;gap:var(--sp-16);padding:var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-24);border-radius:var(--r-pill);background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 30px rgba(23,48,79,.12),0 1px 3px rgba(23,48,79,.14)}
.wordmark{display:inline-flex;align-items:center;gap:var(--sp-12);min-height:44px;font-family:var(--font-d);font-weight:700;font-size:19px;color:var(--ink);text-decoration:none;margin-right:auto;white-space:nowrap}
.wordmark img{width:38px;height:auto;display:block;flex:none}
.links{display:flex;gap:var(--sp-4)}
.nl{display:inline-flex;align-items:center;padding:var(--sp-12) 14px;min-height:44px;border-radius:var(--r-pill);font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.nl:hover{background:rgba(23,48,79,.08)}
.nl[aria-current="location"]{background:rgba(23,48,79,.10);font-weight:700}
.nav-cta{flex:none}
.icon-btn{width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:inline-grid;place-items:center;color:var(--ink);padding:0}
.icon-btn:hover,.menu-btn[aria-expanded="true"]{background:rgba(23,48,79,.08)}
.menu-btn{display:none}
.mobile-menu{display:none;pointer-events:auto;max-width:1104px;margin:var(--sp-8) auto 0;background:#fff;border-radius:var(--r-lg);padding:var(--sp-12);box-shadow:0 10px 30px rgba(23,48,79,.16)}
.mobile-menu a{display:block;padding:14px var(--sp-16);min-height:44px;border-radius:var(--r-sm);color:var(--ink);font-weight:600;text-decoration:none}
.mobile-menu a:hover{background:var(--soft)}
.mobile-menu a.menu-cta{display:flex;width:100%;margin-top:var(--sp-8);padding:12px var(--sp-24);min-height:48px;border-radius:var(--r-pill);color:#fff;background:var(--accent-btn);justify-content:center}
.mobile-menu a.menu-cta:hover{background:var(--accent-btn-h)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.nav{background:#fff}}
@media (prefers-reduced-transparency:reduce){.nav{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* hero */
.hero{padding:152px 0 var(--sec-y);text-align:center;background:radial-gradient(1200px 500px at 50% -10%,#E8F0FE 0%,rgba(255,255,255,0) 70%)}
.hero h1{margin:0 auto;max-width:16em;font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em;font-weight:600}
.hero .lead{margin:var(--sp-24) auto var(--sp-32);text-wrap:balance}
.cta{display:flex;justify-content:center}
.hero-proof{margin:var(--sp-24) 0 0;font-size:16px;color:var(--ink-2);text-wrap:balance}
.hero-shot{margin:var(--sp-64) auto 0;max-width:880px;text-align:left}
.shot-cap{margin:var(--sp-16) 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);text-align:center}

/* window / mockup */
.mat{background:rgba(255,255,255,.7);border:1px solid var(--rule);border-radius:var(--r-xl);padding:var(--sp-12);box-shadow:var(--shadow-2)}
.step .mat{background:var(--soft)}
.win{background:#fff;border:1px solid var(--rule);border-radius:var(--r-win);overflow:hidden}
.mat .win{box-shadow:none}
.shot{pointer-events:none;user-select:text}
.win-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);border-bottom:1px solid var(--rule);background:#FBFCFD}
.dots{display:flex;gap:var(--sp-8)}
.dots i{width:12px;height:12px;border-radius:50%;background:#E3E8EF}
.dots i:nth-child(1){background:#F28B82}.dots i:nth-child(2){background:#FDD663}.dots i:nth-child(3){background:#81C995}
.win-title{font-size:12px;line-height:1.4;color:var(--ink-2);font-weight:600;text-align:center;white-space:nowrap}
.app-main,.pad{padding:var(--sp-24)}
.app-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);margin-bottom:var(--sp-16)}
.app-h{margin:0;font-family:var(--font-d);font-weight:600;font-size:20px;line-height:1.3}
.jobs{border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.job{display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp-16);padding:var(--sp-16) var(--sp-24);border-top:1px solid var(--rule)}
.job:first-child{border-top:0}
.job-main{display:flex;flex-direction:column;min-width:0}
.job-t{font-weight:600;font-size:16px;line-height:1.4}
.job-s{font-size:14px;line-height:1.5;color:var(--ink-2)}
.badge{display:inline-flex;align-items:center;gap:var(--sp-8);border-radius:var(--r-pill);padding:var(--sp-4) var(--sp-12);font-size:12px;line-height:1.5;font-weight:600;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.b-open{background:var(--open-bg);color:var(--open)}
.b-progress{background:var(--warn-bg);color:var(--warn)}
.b-done{background:var(--ok-bg);color:var(--ok)}
.l{display:block;font-weight:600;font-size:14px;line-height:1.5;margin-bottom:var(--sp-8)}
.input{width:100%;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);background:#fff;border:1px solid var(--line-ctl);border-radius:var(--r-sm);padding:12px var(--sp-16);min-height:48px}
.pad .input{margin-bottom:var(--sp-16)}
.seg{display:flex;flex-wrap:wrap;gap:var(--sp-8);margin-bottom:var(--sp-16)}
.seg-i{display:inline-flex;align-items:center;gap:var(--sp-8);border:1px solid var(--line-ctl);border-radius:var(--r-pill);padding:var(--sp-8) var(--sp-16);font-size:14px;line-height:1.4;font-weight:600;color:var(--ink-2)}
.seg-i[data-state="on"]{background:var(--open-bg);border-color:var(--accent);color:var(--accent-text)}
.seg-i .ic{width:16px;height:16px}
.chip-file{display:flex;align-items:center;gap:var(--sp-12);border:1.5px dashed var(--line-ctl);border-radius:var(--r-sm);padding:var(--sp-16);color:var(--ink-2);font-size:14px;line-height:1.5}
.job-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-16);margin-bottom:var(--sp-16)}
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-8);margin-bottom:var(--sp-24)}
.st{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);border:1px solid var(--line-ctl);border-radius:var(--r-sm);padding:var(--sp-8) var(--sp-4);font-size:12px;font-weight:600;color:var(--ink-2);text-align:center;line-height:1.25}
.st .ic{width:14px;height:14px}
.st[data-state="done"]{background:var(--ink);border-color:var(--ink);color:#fff}
.st[data-state="current"]{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff}
.act{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-16);font-size:14px;line-height:1.5}
.act li{display:flex;flex-wrap:wrap;column-gap:var(--sp-8)}
.act .who{font-weight:600}
.act .when{color:var(--ink-2);font-size:12px;align-self:center}
.act .what{flex-basis:100%;color:var(--ink-2)}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-12);margin-bottom:var(--sp-16)}
.kpi{border:1px solid var(--rule);border-radius:var(--r-sm);padding:var(--sp-12) var(--sp-16)}
.kpi small{display:block;color:var(--ink-2);font-size:12px;line-height:1.4;font-weight:600}
.kpi b{display:block;font-family:var(--font-d);font-size:28px;line-height:1.2;font-variant-numeric:tabular-nums}
.chart-t{margin:0 0 var(--sp-8);font-size:12px;line-height:1.4;font-weight:600;color:var(--ink-2)}
.chart{display:flex;align-items:flex-end;gap:var(--sp-12);height:112px;border-bottom:1px solid var(--rule)}
.chart .col{flex:1;height:100%;display:flex;align-items:flex-end;justify-content:center;min-width:0}
.chart .bar{width:60%;max-width:32px;background:var(--accent);border-radius:6px 6px 0 0}
.xl{display:flex;gap:var(--sp-12);padding-top:var(--sp-8);font-size:12px;line-height:1.4;color:var(--ink-2)}
.xl span{flex:1;text-align:center;min-width:0}

/* how it works */
.stack{display:flex;flex-direction:column;gap:var(--sp-96)}
.step{display:grid;grid-template-columns:5fr 7fr;gap:var(--sp-64);align-items:center}
.step-text{max-width:44ch;margin-bottom:calc(var(--sp-16) + 21px)} /* centre on the mockup, not mockup + caption */
.step-text h3{font-size:var(--fs-h3-step);line-height:1.2;margin-bottom:var(--sp-12)}
.step-text p{color:var(--ink-2);margin:0;text-wrap:balance}
.stepno{display:block;margin-bottom:var(--sp-12);font-family:var(--font-d);font-size:14px;line-height:1.4;font-weight:600;color:var(--accent-text)}
.step-shot{margin:0;min-width:0}
.more{margin-top:var(--sp-64)}
.checks{list-style:none;margin:var(--sp-24) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,auto);grid-auto-flow:column;gap:var(--sp-16) var(--sp-32)}
.checks li{display:flex;align-items:flex-start;gap:var(--sp-12);font-size:18px;line-height:1.5;max-width:62ch}
.checks .ic{color:var(--ok);margin-top:3px}

/* what you get */
.rollout{list-style:none;margin:0;padding:0;max-width:760px}
.rollout li{position:relative;padding:0 0 var(--sp-32) var(--sp-40);margin-left:var(--sp-8)}
.rollout li:last-child{padding-bottom:0}
.rollout li:not(:last-child)::after{content:"";position:absolute;left:-1px;top:var(--sp-24);bottom:0;width:2px;background:var(--rule)}
.rollout li::before{content:"";position:absolute;left:-8px;top:var(--sp-4);width:16px;height:16px;border-radius:50%;background:var(--accent)}
.rollout h3{margin-bottom:var(--sp-4)}
.rollout p{margin:0;color:var(--ink-2);max-width:62ch}
.price{text-wrap:balance;margin:var(--sp-48) 0 0;padding-top:var(--sp-24);border-top:1px solid var(--rule);max-width:760px;font-size:20px;line-height:1.5}

/* faq */
.faq{max-width:760px}
#faq{padding-bottom:calc(var(--sec-y) + var(--sp-24))}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-child{border-bottom:1px solid var(--rule)}
.faq summary{text-wrap:balance;list-style:none;cursor:pointer;min-height:56px;padding:20px var(--sp-48) 20px 0;position:relative;font-family:var(--font-d);font-weight:600;font-size:18px;line-height:1.4}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:0;top:19px;font-size:28px;line-height:1;color:var(--ink-2);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] summary{padding-bottom:var(--sp-8)}
.faq .ans{padding:0 var(--sp-48) var(--sp-24) 0;color:var(--ink-2);max-width:62ch}
.faq .ans p:last-child{margin:0}

/* closing */
.closing{position:relative;background:var(--ink);color:#F3F6FB;padding:var(--sec-y) 0 var(--sp-48)}
.crest{position:absolute;left:0;right:0;bottom:calc(100% - 1px);height:48px;width:100%;display:block}
.closing h2,.success h3{color:var(--on-navy)}
.cintro .lead{color:var(--on-navy-2);text-wrap:balance}
.crow{display:grid;grid-template-columns:1fr minmax(320px,440px);gap:var(--sp-64);align-items:start}
.cintro{padding-top:var(--sp-8)}
.formcard{padding:var(--sp-32);border-radius:var(--r-xl);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.formcard label{display:block;margin-bottom:var(--sp-8);font-size:14px;line-height:1.5;font-weight:600;color:#F3F6FB}
.field{margin-bottom:var(--sp-24)}
.fine,.formcard .fine{text-wrap:balance;font-size:14px;line-height:1.5;color:var(--on-navy-2);margin:0}
#reqNote{margin-bottom:var(--sp-24)}
.formcard .btn+.fine,#formStatus+.fine{margin-top:var(--sp-16)}
#formStatus:not(:empty){margin-top:var(--sp-12)}
.fine .btn-text{display:inline-block;min-height:44px;margin:-11px 0;padding:11px 0;font-size:inherit;line-height:inherit;color:var(--on-navy)}
.formcard .btn{width:100%;background:#fff;color:var(--ink)}
.formcard .btn:hover{background:var(--open-bg)}
.formcard .btn[aria-disabled="true"]:hover{background:#fff}
.err{color:var(--on-navy-err);font-size:14px;line-height:1.5;margin:var(--sp-8) 0 0}
.field.bad .input{border-color:var(--on-navy-err);box-shadow:0 0 0 1px var(--on-navy-err)}
.form-error{background:rgba(255,180,171,.12);border:1px solid var(--on-navy-err);color:var(--on-navy);border-radius:var(--r-sm);padding:var(--sp-12) var(--sp-16);margin-bottom:var(--sp-24)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.success{text-align:center;padding:var(--sp-24) 0}
.success .tick{width:72px;height:72px;border-radius:50%;background:var(--ok-bg);color:var(--ok);display:grid;place-items:center;margin:0 auto var(--sp-24)}
.success .tick .ic{width:36px;height:36px;stroke-width:2.4}
.success h3{font-size:var(--fs-h3-step);margin-bottom:var(--sp-8)}
.success p{color:var(--on-navy-2)}
.success:focus,.success h3:focus{outline:0}

/* footer */
.foot{background:var(--ink);color:#F3F6FB;padding:0 0 var(--sp-40)}
.foot-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-24);padding-top:var(--sp-40);border-top:1px solid var(--hair-navy)}
.foot .brand{display:flex;align-items:center;gap:var(--sp-16)}
.foot .brand img{width:72px;height:auto;flex:none}
.brand-name{display:block;font-family:var(--font-d);font-weight:600;font-size:20px;line-height:1.3;color:var(--on-navy)}
.brand-by{display:block;font-size:14px;line-height:1.5;color:var(--on-navy-2)}
.foot-links{display:flex;gap:var(--sp-8);margin-inline:calc(-1*var(--sp-12))}
.foot button.lnk{min-height:44px;padding:0 var(--sp-12);background:none;border:0;color:#E3ECF8;font-size:16px;text-decoration:underline;text-underline-offset:4px}
.foot button.lnk:hover{color:#fff}
.legal{margin:var(--sp-32) 0 0;padding-top:var(--sp-24);border-top:1px solid var(--hair-navy);font-size:14px;line-height:1.5;color:var(--on-navy-2)}

/* focus on dark */
.closing :focus-visible,.foot :focus-visible{outline-color:#fff;outline-offset:2px;box-shadow:0 0 0 5px var(--navy)}
.formcard .input:focus-visible{outline:3px solid var(--on-navy-link);outline-offset:2px;box-shadow:none}
.formcard .field.bad .input:focus-visible{box-shadow:0 0 0 1px var(--on-navy-err)}

/* dialogs */
dialog{border:0;padding:0;border-radius:var(--r-lg);background:#fff;color:var(--ink);box-shadow:0 40px 100px rgba(15,34,56,.35);max-width:min(640px,calc(100vw - 32px));width:100%;max-height:calc(100dvh - 32px);overflow:hidden}
dialog::backdrop{background:rgba(15,34,56,.45)}
.dlg-head{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-16) var(--sp-16) var(--sp-16) var(--sp-32);border-bottom:1px solid var(--rule)}
.dlg-head h2{flex:1;font-size:24px;line-height:1.2}
.dlg-body{padding:var(--sp-32);overflow:auto;max-height:calc(100dvh - 120px)}
.dlg-body:focus-visible{outline-offset:-3px}
.dlg-body h3{margin:var(--sp-24) 0 var(--sp-8);font-size:16px}
.dlg-body p{color:var(--ink-2)}
.dlg-body>:last-child{margin-bottom:0}
html.dlg-open{overflow:hidden}

/* reveal (head + step shots only; never the hero) */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s var(--d,0s),transform .6s var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
@keyframes ppShow{to{opacity:1;transform:none}}
.js .reveal:not(.in){animation:ppShow .01s 2.5s forwards}

/* responsive */
@media (max-width:1020px){:root{--gutter:32px}}
@media (max-width:900px){
  .step{grid-template-columns:1fr;gap:var(--sp-32)}
  .step-text{margin-bottom:0}
  .crow{grid-template-columns:1fr;gap:var(--sp-40)}
  .formcard{max-width:560px}
  .checks{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
}
@media (max-width:820px){
  :root{--gutter:24px}
  .hero{padding-top:120px}
  .hero-shot{margin-top:var(--sp-40)}
  .head{margin-bottom:var(--sp-32)}
  .stack{gap:var(--sp-64)}
  .more{margin-top:var(--sp-48)}
  .crest{height:32px}
  .links{display:none}
  .menu-btn{display:inline-grid}
  .mobile-menu.open{display:block;max-height:calc(100dvh - 88px);overflow:auto}
}
@media (min-width:521px){.mobile-menu a.menu-cta{display:none}}
@media (max-width:520px){
  :root{--gutter:20px}
  .navhold{padding-inline:var(--sp-12)}
  .nav-cta{display:none}
  .mat{padding:var(--sp-8);border-radius:var(--r-lg)}
  .win{border-radius:var(--r-sm)}
  .app-main,.pad{padding:var(--sp-16)}
  .job{padding:var(--sp-12) var(--sp-16)}
  .win-bar{grid-template-columns:auto 1fr;gap:var(--sp-8)}
  .win-bar>:last-child:empty{display:none}
  .win-title{text-align:right;overflow:hidden;text-overflow:ellipsis}
  .dots{gap:6px}
  .dots i{width:10px;height:10px}
  .stepper{grid-template-columns:1fr 1fr}
  .seg{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .seg-i{justify-content:center;padding:var(--sp-8) var(--sp-4)}
  .job{grid-template-columns:1fr;gap:var(--sp-8)}
  .job .badge{justify-self:start}
  .kpi{padding:var(--sp-12)}
  .kpi b{font-size:24px}
  .formcard{padding:var(--sp-24)}
}
@media (max-width:360px){
  .hero h1{font-size:34px}
  .seg{grid-template-columns:1fr 1fr}
  .win-title{white-space:normal}
  .kpis{grid-template-columns:1fr;gap:var(--sp-8)}
  .kpi{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12)}
}

/* motion, print, forced colours */
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@media print{
  .formcard{display:none}
  .step,.mat,.faq details{break-inside:avoid}
  .js .reveal{opacity:1!important;transform:none!important;animation:none}
  .navhold,.skip{display:none}
  .hero{padding-top:var(--sp-24);background:none}
  .sec{padding-block:var(--sp-40)}
  .mat{box-shadow:none}
  .closing,.foot,.crest{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (forced-colors:active){
  .btn,.nav{border:1px solid ButtonText}
  .badge::before,.rollout li::before{forced-color-adjust:none}
}

main:focus{outline:0}

/* ===== v2: realistic app windows, features page, gold standard + comparison, motion ===== */

/* nav: five links need the menu button a little earlier */
@media (max-width:960px){
  .links{display:none}
  .menu-btn{display:inline-grid}
  .mobile-menu.open{display:block;max-height:calc(100dvh - 88px);overflow:auto}
}
.nl[aria-current="page"]{background:rgba(23,48,79,.10);font-weight:700}
.mobile-menu a[aria-current="page"]{background:var(--soft)}

/* --- realistic app window (static picture) --- */
.hero-shot{max-width:1040px}
.shot{container-type:inline-size}
.shell{display:grid;grid-template-columns:188px minmax(0,1fr);font-size:13px;line-height:1.4;text-align:left}
.side{display:flex;flex-direction:column;gap:2px;padding:var(--sp-12) var(--sp-8);background:#F8FAFC;border-right:1px solid var(--rule)}
.school{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-4) var(--sp-8) var(--sp-12);font-size:12px;font-weight:600;line-height:1.3}
.sch-av{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--ink);color:#fff;font-family:var(--font-d);font-size:13px;font-weight:700}
.sn{display:flex;align-items:center;gap:var(--sp-8);padding:7px var(--sp-8);border-radius:var(--sp-8);color:var(--ink-2);font-weight:600}
.sn .ic{width:16px;height:16px}
.sn .n{margin-left:auto;font-size:12px;font-variant-numeric:tabular-nums}
.sn[data-state="on"]{background:var(--open-bg);color:var(--open)}
.side-gap{flex:1;min-height:var(--sp-24)}
.side-user{display:flex;align-items:center;gap:var(--sp-8);padding:var(--sp-12) var(--sp-8) var(--sp-4);border-top:1px solid var(--rule);font-size:12px;line-height:1.3}
.side-user b{display:block;font-weight:600}
.side-user span{color:var(--ink-2)}
.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:var(--sp-12);padding:var(--sp-12) var(--sp-16);border-bottom:1px solid var(--rule)}
.topbar .app-h{margin:0 auto 0 0;font-size:17px;white-space:nowrap}
.srch{display:flex;align-items:center;gap:6px;min-width:168px;padding:6px var(--sp-12);border:1px solid var(--rule);border-radius:var(--r-pill);color:var(--ink-2);font-size:12px;background:#fff}
.srch .ic{width:14px;height:14px}
.mbtn{display:inline-flex;align-items:center;gap:6px;padding:7px var(--sp-12);border-radius:var(--r-pill);background:var(--accent-btn);color:#fff;font-size:12px;font-weight:600;white-space:nowrap}
.mbtn .ic{width:14px;height:14px}
.mbtn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line-ctl)}
.body{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-16)}
.fps{display:flex;flex-wrap:wrap;gap:6px}
.fp{display:inline-flex;gap:6px;padding:4px var(--sp-12);border:1px solid var(--rule);border-radius:var(--r-pill);font-size:12px;font-weight:600;color:var(--ink-2);background:#fff}
.fp b{font-weight:600;font-variant-numeric:tabular-nums;opacity:.75}
.fp[data-state="on"]{background:var(--ink);border-color:var(--ink);color:#fff}
.tbl2{border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.tr{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1.5fr) minmax(0,1.25fr) minmax(0,.9fr) minmax(0,1.45fr) minmax(0,.55fr);gap:var(--sp-12);align-items:center;padding:10px var(--sp-16);border-top:1px solid var(--rule)}
.tr:first-child{border-top:0}
.tr.th{padding-block:8px;background:#FBFCFD;font-size:12px;font-weight:600;color:var(--ink-2)}
.tr b{display:block;font-weight:600;line-height:1.35}
.tr small{display:block;color:var(--ink-2);font-size:12px}
.tr .cut{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who{display:flex;align-items:center;gap:6px;min-width:0}
.who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.av{flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:700;background:var(--open-bg);color:var(--open)}
.av.a2{background:#E6F4EA;color:#137333}.av.a3{background:#FEF1D6;color:#8A5300}.av.a4{background:#EEE7FA;color:#5B3A9E}.av.a5{background:var(--ink);color:#fff}
.pd{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.pd::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-ctl)}
.pd[data-p="urgent"]{color:#B3261E}.pd[data-p="urgent"]::before{background:#B3261E}
.pd[data-p="high"]{color:var(--warn)}.pd[data-p="high"]::before{background:#D98E04}
.b-wait{background:#EEE7FA;color:#5B3A9E}
.b-late{background:#FCE8E6;color:#B3261E}
.tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);background:var(--soft);border:1px solid var(--rule);font-size:12px;font-weight:600;color:var(--ink-2);vertical-align:1px}
.cardm{border:1px solid var(--rule);border-radius:var(--r-sm);padding:var(--sp-12) var(--sp-16);background:#fff;min-width:0}
.cardm h4{margin:0 0 var(--sp-8);font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--ink-2)}
.row2{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--sp-12)}
.kp4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-12)}
.kp4 .kpi small{font-size:12px}
.kpi i{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--ok)}
.kpi i.mute{color:var(--ink-2)}

/* detail */
.det{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:var(--sp-12)}
.det-h{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-12)}
.det-h b{font-family:var(--font-d);font-size:17px;line-height:1.3;font-weight:600}
.det-h small{display:block;color:var(--ink-2);font-size:12px;margin-bottom:2px}
.thumbs{display:flex;gap:var(--sp-8)}
.thumb{display:grid;place-items:center;width:84px;height:60px;border-radius:var(--sp-8);color:#fff;background:linear-gradient(135deg,#8FB5EE,#3F73BF)}
.thumb.t2{background:linear-gradient(135deg,#B9C4D4,#6E7F99)}
.thumb.t3{background:#fff;border:1.5px dashed var(--line-ctl);color:var(--ink-2)}
.thumb .ic{width:20px;height:20px}
.meta{display:grid;gap:var(--sp-12);align-content:start}
.meta div{font-size:12px;color:var(--ink-2)}
.meta b{display:block;margin-top:2px;font-size:13px;color:var(--ink);font-weight:600}
.feed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-12);position:relative}
.feed li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:var(--sp-8);font-size:13px;line-height:1.45}
.feed li b{font-weight:600}
.feed li small{color:var(--ink-2);font-size:12px;margin-left:6px}
.feed p{margin:2px 0 0;color:var(--ink-2)}
.quote{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);margin-top:6px;padding:8px var(--sp-12);border:1px solid var(--rule);border-radius:var(--sp-8);background:#FBFCFD;font-size:12px}
.quote b{font-size:14px}
.stepper .st{font-size:12px}

/* chart */
.glg{display:flex;gap:var(--sp-12);font-size:12px;color:var(--ink-2);margin-bottom:var(--sp-8)}
.glg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;background:var(--accent)}
.glg i.d{background:var(--ink)}
.gchart{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-8);height:132px;border-bottom:1px solid var(--rule);background:linear-gradient(var(--rule) 1px,transparent 1px) 0 0/100% 33.333% repeat-y}
.g{display:flex;align-items:flex-end;justify-content:center;gap:3px;height:100%}
.g i{display:block;width:38%;max-width:20px;border-radius:4px 4px 0 0;background:var(--accent);transform-origin:bottom}
.g i+i{background:var(--ink)}
.gx{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-8);padding-top:6px;font-size:12px;color:var(--ink-2);text-align:center}
.hb{display:grid;grid-template-columns:72px minmax(0,1fr) 26px;gap:var(--sp-8);align-items:center;margin-top:7px;font-size:12px}
.hb .tr2{height:8px;border-radius:99px;background:#EEF1F5;overflow:hidden}
.hb .fi{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#5C9DEA);transform-origin:left}
.hb b{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}

/* new job form window */
.fm{display:grid;gap:var(--sp-12);padding:var(--sp-16)}
.fm .l{margin:0 0 4px;font-size:12px}
.fld{padding:9px var(--sp-12);border:1px solid var(--line-ctl);border-radius:var(--sp-8);background:#fff;font-size:13px;line-height:1.4}
.fld.big{min-height:62px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12)}
.tog{display:flex;align-items:center;gap:var(--sp-12);padding:10px var(--sp-12);border:1px solid var(--rule);border-radius:var(--sp-8);font-size:12px;line-height:1.4}
.tog em{margin-left:auto;flex:none;position:relative;width:34px;height:20px;border-radius:99px;background:var(--accent-btn)}
.tog em::after{content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:#fff}
.fm-foot{display:flex;justify-content:flex-end;gap:var(--sp-8)}

/* board / schedule / people / phone */
.kb{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-8)}
.kcol{display:flex;flex-direction:column;gap:6px;padding:var(--sp-8);border-radius:var(--sp-12);background:#F1F4F8;min-width:0}
.kcol h4{display:flex;justify-content:space-between;margin:2px 4px 2px;font-family:var(--font-b);font-size:12px;font-weight:600;color:var(--ink-2)}
.kc{padding:8px 10px;border:1px solid var(--rule);border-radius:var(--sp-8);background:#fff;box-shadow:var(--shadow-1);font-size:12px;line-height:1.35}
.kc b{display:block;font-weight:600;margin-bottom:6px}
.kc .foot2{display:flex;align-items:center;justify-content:space-between;gap:6px;color:var(--ink-2)}
.list2{display:flex;flex-direction:column}
.li2{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:var(--sp-12);align-items:center;padding:10px var(--sp-16);border-top:1px solid var(--rule)}
.li2:first-child{border-top:0}
.li2 .ico{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--open-bg);color:var(--open)}
.li2 .ico .ic{width:18px;height:18px}
.li2 b{display:block;font-weight:600}
.li2 small{color:var(--ink-2);font-size:12px}
.ph-stage{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-24);align-items:center;padding:var(--sp-24);background:linear-gradient(180deg,#F8FAFC,#EEF2F7)}
.ph{width:224px;border:7px solid var(--ink);border-radius:32px;background:#fff;padding:var(--sp-16) var(--sp-12) var(--sp-12);font-size:12px;line-height:1.4;text-align:left}
.ph h5{margin:0 0 var(--sp-8);font-family:var(--font-d);font-size:15px}
.ph .fld{margin-bottom:var(--sp-8);padding:7px 10px;font-size:12px}
.ph .mbtn{display:flex;justify-content:center;margin-top:var(--sp-8)}
.notif{padding:var(--sp-12);border:1px solid var(--rule);border-radius:var(--sp-12);background:#fff;box-shadow:var(--shadow-1);font-size:12px;line-height:1.45}
.notif+.notif{margin-top:var(--sp-8)}
.notif b{display:block;font-weight:600}
.notif small{color:var(--ink-2)}
.nrow{display:flex;gap:var(--sp-8);align-items:flex-start}
.nico{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--open-bg);color:var(--open)}
.nico .ic{width:16px;height:16px}

/* container-driven degradation: the same picture works at any width */
@container (max-width:760px){
  .shell{grid-template-columns:52px minmax(0,1fr)}
  .school span,.sn span,.side-user div,.sn .n{display:none}
  .school,.sn,.side-user{justify-content:center}
  .tr{grid-template-columns:minmax(0,2.3fr) minmax(0,1.4fr) minmax(0,1fr) 34px minmax(0,.6fr)}
  .tr>:nth-child(2){display:none}
  .tr .who>span:not(.av){display:none}
  .hd-a{font-size:0}
  .hd-a::after{content:"Who";font-size:12px}
  .srch{min-width:0}
  .srch span{display:none}
  .row2,.det{grid-template-columns:1fr}
  .meta{grid-template-columns:repeat(3,1fr)}
  .ph-stage{grid-template-columns:1fr;justify-items:center}
}
@container (max-width:560px){
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .tr{grid-template-columns:minmax(0,1fr) auto}
  .tr>:nth-child(n+4){display:none}
  .tr>:nth-child(3){grid-column:2}
  .kp4{grid-template-columns:1fr 1fr}
  .kb{grid-template-columns:1fr 1fr}
  .two{grid-template-columns:1fr}
  .srch{display:none}
  .body{padding:var(--sp-12)}
}

/* --- features page --- */
.fhero{padding:152px 0 var(--sp-64);text-align:center;background:radial-gradient(1200px 500px at 50% -10%,#E8F0FE 0%,rgba(255,255,255,0) 70%)}
.fhero h1{margin:0 auto;max-width:16em;font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.03em;font-weight:600}
.fhero .lead{margin:var(--sp-24) auto 0;text-wrap:balance}
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-16)}
.fcard{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-24);border:1px solid var(--rule);border-radius:var(--r-xl);background:#fff;color:inherit;text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
.fcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);border-color:#C5D3E8}
.fcard .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--open-bg);color:var(--open);margin-bottom:var(--sp-8)}
.fcard h3{font-size:20px}
.fcard p{margin:0;color:var(--ink-2);font-size:16px}
.fcard .go{margin-top:auto;padding-top:var(--sp-8);display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent-text)}
.fcard .go .ic{width:16px;height:16px;transition:transform .2s}
.fcard:hover .go .ic{transform:translateX(3px)}
.fsec{padding:var(--sp-64) 0;scroll-margin-top:var(--nav-clear)}
.fsec:nth-of-type(even){background:var(--soft)}
.fsec .step-text{margin-bottom:var(--sp-24)}
.fsec .step-text ul{list-style:none;margin:var(--sp-16) 0 0;padding:0;display:grid;gap:var(--sp-8)}
.fsec .step-text li{display:flex;gap:var(--sp-8);align-items:flex-start;font-size:16px;color:var(--ink-2)}
.fsec .step-text li .ic{width:18px;height:18px;margin-top:4px;color:var(--ok)}
.fsec .step-text .stepno{color:var(--accent-text)}
.fsec .step{align-items:center}
.jump{display:flex;flex-wrap:wrap;gap:var(--sp-8);justify-content:center;margin-top:var(--sp-32)}
.jump a{padding:8px var(--sp-16);min-height:44px;display:inline-flex;align-items:center;border:1px solid var(--rule);border-radius:var(--r-pill);background:#fff;color:var(--ink);font-weight:600;text-decoration:none;font-size:15px;transition:background-color .2s,border-color .2s}
.jump a:hover{background:var(--open-bg);border-color:#C5D3E8}
.cta-band{padding:var(--sec-y) 0;text-align:center;background:var(--ink);color:#F3F6FB}
.cta-band h2{color:#fff;max-width:18em;margin:0 auto}
.cta-band .lead{margin:var(--sp-16) auto var(--sp-32);color:var(--on-navy-2)}
.cta-band .btn{background:#fff;color:var(--ink)}
.cta-band .btn:hover{background:var(--open-bg)}
.cta-band :focus-visible{outline-color:#fff;outline-offset:3px;box-shadow:0 0 0 5px var(--navy)}
.inc-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-16);margin:0;padding:0;list-style:none;counter-reset:s}
.inc-strip li{padding:var(--sp-24);border:1px solid var(--rule);border-radius:var(--r-lg);background:#fff}
.inc-strip h3{font-size:18px;margin-bottom:var(--sp-4)}
.inc-strip p{margin:0;color:var(--ink-2);font-size:15px}
.inc-strip .ic{width:22px;height:22px;color:var(--accent-text);margin-bottom:var(--sp-12)}

/* --- gold standard + comparison --- */
.gold-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-32) var(--sp-40);margin:0;padding:0;list-style:none}
.gold-grid li{padding-top:var(--sp-16);border-top:2px solid var(--ink)}
.gold-grid .gn{display:block;margin-bottom:var(--sp-8);font-family:var(--font-d);font-size:14px;font-weight:700;color:var(--accent-text);letter-spacing:.04em}
.gold-grid h3{font-size:20px;margin-bottom:var(--sp-8)}
.gold-grid p{margin:0;color:var(--ink-2);font-size:16px}
.cmp-head{margin:var(--sp-96) 0 var(--sp-32);max-width:720px}
.cmp-head h3{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.015em}
.cmp-wrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-xl);background:#fff;-webkit-overflow-scrolling:touch}
.cmp-wrap:focus-visible{outline-offset:-3px}
.cmp{width:100%;min-width:820px;border-collapse:separate;border-spacing:0;font-size:15px;line-height:1.4}
.cmp caption{text-align:left;padding:var(--sp-16) var(--sp-24) 0;font-size:14px;color:var(--ink-2)}
.cmp th,.cmp td{padding:14px var(--sp-16);text-align:left;border-top:1px solid var(--rule);vertical-align:middle}
.cmp thead th{border-top:0;padding-top:var(--sp-24);padding-bottom:var(--sp-16);font-family:var(--font-d);font-weight:600;font-size:15px;color:var(--ink);vertical-align:bottom}
.cmp thead th small{display:block;margin-top:2px;font-family:var(--font-b);font-weight:400;font-size:13px;color:var(--ink-2)}
.cmp tbody th{font-weight:600;width:30%;padding-left:var(--sp-24)}
.cmp .us{background:#F3F8FF;border-left:1px solid #C5D3E8;border-right:1px solid #C5D3E8}
.cmp thead .us{border-top-left-radius:var(--r-lg);border-top-right-radius:var(--r-lg);color:var(--accent-text)}
.cmp tbody tr:last-child .us{border-bottom:1px solid #C5D3E8;border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg)}
.cv{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.cv .ic{width:18px;height:18px}
.cv[data-v="yes"]{color:var(--ok)}
.cv[data-v="part"]{color:var(--warn)}
.cv[data-v="no"]{color:var(--ink-2)}
.cmp-note{margin:var(--sp-16) 0 0;font-size:14px;color:var(--ink-2);max-width:62ch}

/* --- subtle motion (never hides content) --- */
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}}
@keyframes flash{0%,100%{background-color:transparent}30%{background-color:#E8F0FE}}
@keyframes barGrow{from{transform:scaleY(0)}}
@keyframes fiGrow{from{transform:scaleX(0)}}
@keyframes pulseRing{0%{box-shadow:0 0 0 0 rgba(22,102,208,.35)}70%{box-shadow:0 0 0 7px rgba(22,102,208,0)}100%{box-shadow:0 0 0 0 rgba(22,102,208,0)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.97)}}
.hero-shot .tr:not(.th){animation:rowIn .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.25s + var(--i,0)*.08s)}
.hero-shot .tr.new{animation:rowIn .6s cubic-bezier(.2,.7,.2,1) both .25s,flash 2.6s ease-in-out 1.1s 1}
.badge.live::before{animation:pulseDot 2.4s ease-in-out infinite}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.35}}
.st[data-state="current"]{animation:pulseRing 2.6s ease-out infinite}
.reveal.in .g i{animation:barGrow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0)*70ms + .15s)}
.reveal.in .hb .fi{animation:fiGrow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0)*70ms + .25s)}
.reveal.in .kc,.reveal.in .notif,.reveal.in .feed li,.reveal.in .li2{animation:popIn .55s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--k,0)*90ms + .2s)}
.js .reveal.fgrid>*,.js .reveal.gold-grid>*{transition:opacity .6s,transform .6s;transition-delay:calc(var(--k,0)*70ms)}
.mat{transition:box-shadow .4s}
.hero-shot .mat:hover{box-shadow:0 30px 72px rgba(23,48,79,.18),0 2px 6px rgba(23,48,79,.06)}
.btn{transition:background-color .15s,transform .15s}
.btn:active{transform:scale(.98)}
.rollout li::before{transition:transform .3s}
.rollout li:hover::before{transform:scale(1.25)}
.ph{animation:floatY 6s ease-in-out infinite}
.cmp tbody tr{transition:background-color .2s}
.cmp tbody tr:hover th,.cmp tbody tr:hover td:not(.us){background:#FAFBFD}

/* --- responsive --- */
@media (max-width:1020px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gold-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .inc-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .fhero{padding-top:120px}
  .fsec{padding:var(--sp-48) 0}
  .cmp-head{margin-top:var(--sp-64)}
}
@media (max-width:620px){
  .fgrid,.gold-grid,.inc-strip{grid-template-columns:1fr}
}
@media print{
  .cmp-wrap{overflow:visible}
  .cmp{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-shot .tr,.hero-shot .tr.new,.st[data-state="current"],.ph,.badge.live::before{animation:none!important}
  .reveal.in .g i,.reveal.in .hb .fi,.reveal.in .kc,.reveal.in .notif,.reveal.in .feed li,.reveal.in .li2{animation:none!important}
  .fcard,.fcard:hover{transform:none}
}

.cta{flex-wrap:wrap;gap:var(--sp-12)}
.btn-ghost{background:#fff;color:var(--accent-text);border-color:var(--line-ctl)}
.btn-ghost:hover{background:var(--open-bg)}
.more-link{margin:var(--sp-24) 0 0}
.more-link .btn-text{min-height:44px;text-decoration:none;gap:6px}
.more-link .btn-text:hover{text-decoration:underline}
.more-link .ic{width:16px;height:16px}

/* assets window */
.kp3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-12)}
.tr.ast{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.1fr)}
.pchart{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;height:104px;border-bottom:1px solid var(--rule);background:linear-gradient(var(--rule) 1px,transparent 1px) 0 0/100% 33.333% repeat-y}
.pc{display:flex;align-items:flex-end;justify-content:center;height:100%}
.pc i{display:block;width:62%;max-width:26px;border-radius:4px 4px 0 0;background:var(--accent);transform-origin:bottom}
.px{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;padding-top:6px;font-size:12px;color:var(--ink-2);text-align:center}
.reveal.in .pc i{animation:barGrow .9s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--k,0)*60ms + .15s)}
@container (max-width:760px){
  .tr.ast{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,.9fr) minmax(0,1.1fr)}
  .tr.ast>:nth-child(2){display:block}
}
@container (max-width:560px){
  .tr.ast{grid-template-columns:minmax(0,1fr) auto}
  .tr.ast>:nth-child(n+3){display:none}
  .tr.ast>:nth-child(2){grid-column:2}
  .kp3{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.reveal.in .pc i{animation:none!important}}
.jump{max-width:900px;margin-inline:auto}
.more-link{margin:var(--sp-32) 0 0}
.more-link .btn{gap:var(--sp-8)}
.more-link .btn .ic{width:18px;height:18px}

.badge::before{flex:none}

.next{list-style:none;margin:var(--sp-32) 0 0;padding:0;display:grid;gap:var(--sp-16)}
.next li{display:flex;align-items:center;gap:var(--sp-12);color:var(--on-navy);font-size:17px}
.next span{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--hair-navy);background:rgba(255,255,255,.08);font-family:var(--font-d);font-weight:700;font-size:14px}

/* ===== v2 additions: devices, trust, pricing, prose pages ===== */
.devices{position:relative;max-width:1100px;margin:var(--sp-64) auto 0;padding:0 0 var(--sp-24)}
.laptop{position:relative;width:86%;margin:0 auto 0 0}
.lid{position:relative;background:#0E1828;border-radius:20px 20px 0 0;padding:16px 16px 20px;box-shadow:0 40px 80px rgba(15,34,56,.22),0 4px 10px rgba(15,34,56,.10)}
.lid::before{content:"";position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2B3A50}
.screen{border-radius:6px;overflow:hidden;background:#fff}
.screen .win{border:0;border-radius:0;box-shadow:none;margin:0}
.screen .win-bar{background:#F3F5F8}
.lbase{position:relative;height:18px;width:108%;margin-left:-4%;background:linear-gradient(180deg,#E3E7ED 0%,#C5CCD6 60%,#AEB7C3 100%);border-radius:2px 2px 16px 16px;box-shadow:0 18px 30px rgba(15,34,56,.18)}
.lbase::before{content:"";position:absolute;top:0;left:50%;width:16%;margin-left:-8%;height:7px;background:#B3BCC8;border-radius:0 0 10px 10px}
.phone{position:absolute;right:0;bottom:0;width:240px;background:#0E1828;border-radius:40px;padding:10px;box-shadow:0 30px 60px rgba(15,34,56,.28),0 3px 8px rgba(15,34,56,.12);transform-origin:bottom right}
.pscreen{position:relative;background:#F7F9FC;border-radius:31px;overflow:hidden;padding:0 0 16px;font-size:12px;line-height:1.4;text-align:left}
.island{position:absolute;top:9px;left:50%;width:72px;height:20px;margin-left:-36px;background:#0E1828;border-radius:12px}
.pstat{display:flex;justify-content:space-between;padding:10px 22px 0;font-weight:600;font-size:11px;color:var(--ink);height:34px}
.papp{display:flex;align-items:center;gap:8px;padding:6px 14px 10px;border-bottom:1px solid var(--rule);background:#fff}
.papp img{width:24px;height:auto}
.papp b{font-family:var(--font-d);font-size:13px;color:var(--ink)}
.pbody{padding:12px 14px 0}
.pbody h5{margin:0 0 8px;font-family:var(--font-d);font-size:15px;color:var(--ink)}
.pbody .fld{margin-bottom:8px;padding:8px 10px;font-size:12px;background:#fff}
.pbody .mbtn{display:flex;justify-content:center;margin:4px 0 12px;padding:9px}
.pbody .notif{margin-top:8px}
.dev-cap{text-align:center;margin-top:var(--sp-24)}
@media (max-width:900px){.phone{transform:scale(.7)}.laptop{width:94%}}
@media (max-width:600px){.phone{transform:scale(.5);right:-6px}.lid{padding:8px 8px 10px;border-radius:12px 12px 0 0}.lbase{height:10px}.devices{margin-top:var(--sp-40)}}

.trust{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:#fff}
.trust ul{list-style:none;margin:0 auto;padding:var(--sp-24) var(--gutter);max-width:1200px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-24)}
.trust li{display:flex;gap:var(--sp-12);align-items:flex-start;font-size:15px;line-height:1.45;color:var(--ink-2)}
.trust li b{display:block;color:var(--ink);font-family:var(--font-d);font-weight:600;font-size:16px}
.trust .ic{width:24px;height:24px;color:var(--accent-text);margin-top:2px}
@media (max-width:900px){.trust ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.trust ul{grid-template-columns:1fr;padding:var(--sp-24)}}

.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--sp-48);align-items:center}
.split .devices{margin:0}
@media (max-width:960px){.split{grid-template-columns:1fr}}

.tiers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-24);max-width:960px}
.tier{position:relative;background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-32);box-shadow:var(--shadow-1);display:flex;flex-direction:column}
.tier.feat{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-2)}
.tier h3{font-size:22px}
.tier .who{display:block;color:var(--ink-2);font-size:15px;margin:4px 0 var(--sp-24)}
.tier .amt{font-family:var(--font-d);font-size:46px;font-weight:700;line-height:1;color:var(--ink);letter-spacing:-.02em}
.tier .amt small{font-size:17px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.tier .setup{margin:var(--sp-8) 0 var(--sp-24);color:var(--ink-2)}
.tier .checks{grid-template-columns:1fr;margin:0 0 var(--sp-24)}
.tier .btn{margin-top:auto}
.gst{color:var(--ink-2);font-size:14px;margin-top:var(--sp-16)}
@media (max-width:760px){.tiers{grid-template-columns:1fr}}

.safe-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-24)}
.safe-grid li{background:#fff;border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-24)}
.soft .safe-grid li{box-shadow:var(--shadow-1)}
.safe-grid .ic{width:28px;height:28px;color:var(--accent-text);margin-bottom:var(--sp-12)}
.safe-grid h3{font-size:18px;margin-bottom:var(--sp-8)}
.safe-grid p{margin:0;color:var(--ink-2);font-size:15px}
@media (max-width:900px){.safe-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.safe-grid{grid-template-columns:1fr}}

.phero{padding:calc(var(--nav-clear) + var(--sp-64)) 0 var(--sp-48);background:linear-gradient(180deg,#F2F6FC,#fff)}
.phero h1{font-size:clamp(34px,5vw,54px);line-height:1.08;letter-spacing:-.02em;font-weight:700;max-width:16em}
.crumbs{font-size:14px;color:var(--ink-2);margin-bottom:var(--sp-16)}
.crumbs a{color:var(--ink-2)}
.prose{max-width:720px}
.prose h2{font-size:clamp(24px,2.6vw,30px);margin:var(--sp-48) 0 var(--sp-16)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:var(--sp-24) 0 var(--sp-8)}
.prose p,.prose li{color:var(--ink-2);font-size:17px}
.prose ul{padding-left:1.2em;margin:0 0 var(--sp-16)}
.prose li{margin-bottom:var(--sp-8)}
.facts{border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden;max-width:720px;margin:0}
.facts div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--sp-16);padding:var(--sp-16) var(--sp-24);border-top:1px solid var(--rule)}
.facts div:first-child{border-top:0}
.facts dt{font-weight:600;color:var(--ink)}
.facts dd{margin:0;color:var(--ink-2)}
@media (max-width:560px){.facts div{grid-template-columns:1fr;gap:2px}}
.people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-24);max-width:720px;list-style:none;padding:0;margin:0}
.people li{border:1px solid var(--rule);border-radius:var(--r-lg);padding:var(--sp-24);background:#fff}
.people b{display:block;font-family:var(--font-d);font-size:19px;color:var(--ink)}
.people span{color:var(--ink-2)}
@media (max-width:560px){.people{grid-template-columns:1fr}}
.contact-line{display:flex;gap:var(--sp-12);align-items:center;margin-top:var(--sp-24);color:var(--on-navy-2)}
.contact-line a{color:#fff;font-weight:600}
.contact-line .ic{color:var(--on-navy-link)}
.foot-cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--sp-32);padding-bottom:var(--sp-32)}
.foot-cols h4{margin:0 0 var(--sp-12);font-family:var(--font-d);font-size:15px;color:#fff}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{margin:0 0 var(--sp-8)}
.foot-cols a{color:var(--on-navy-2);text-decoration:none}
.foot-cols a:hover{color:#fff;text-decoration:underline}
.foot-cols .brand{align-items:flex-start}
.foot-co{color:var(--on-navy-2);font-size:14px;margin-top:var(--sp-16)}
.foot-co a{color:#fff}
@media (max-width:860px){.foot-cols{grid-template-columns:1fr 1fr}}
.center{text-align:center}
.more-faq{margin-top:var(--sp-24)}
.foot-cols{padding-top:var(--sp-48);border-top:1px solid var(--hair-navy)}
.tier .checks,.split .checks{display:grid;grid-template-columns:1fr;gap:var(--sp-8)}
.split{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.split .laptop{width:84%}
@media (max-width:960px){.split{grid-template-columns:1fr}}
.more-faq a{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.tier .checks,.split .checks{grid-template-rows:none;grid-auto-flow:row}.tier .checks li{font-size:16px}
.tier h2{font-size:22px;letter-spacing:0}@media (max-width:600px){.dev-cap{text-align:left}}

/* ===== v3 product mockups: fixed canvases scaled into true device proportions ===== */
.dscene,.dpair,.bwin,.dphone,.dlaptop{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.vp,.vp *{pointer-events:none}
.vp{position:relative;overflow:hidden;aspect-ratio:16/10;container-type:inline-size;background:#fff}
.vp.pv{aspect-ratio:360/740}
.ucv{position:absolute;top:0;left:0;width:1200px;height:750px;transform-origin:0 0;transform:scale(tan(atan2(100cqw,1200px)))}
.ucv.upcv{width:360px;height:740px;transform:scale(tan(atan2(100cqw,360px)))}

.ucv.c{width:960px;height:600px;transform:scale(tan(atan2(100cqw,960px)))}
.ucv.c .u-app{grid-template-columns:64px 1fr}
.ucv.c .u-sb{padding:20px 12px;align-items:center}
.ucv.c .u-brand{margin:0 0 20px}.ucv.c .u-brand span,.ucv.c .u-ni span,.ucv.c .u-sch div{display:none}
.ucv.c .u-ni{padding:10px}.ucv.c .u-sch{border:0;padding:0}
.ucv.c .u-mn{padding:28px 32px;gap:18px}
.ucv.c .u-gc{height:150px}.ucv.c .u-det{grid-template-columns:1fr 260px}
@media (min-width:961px){.step{grid-template-columns:4fr 8fr;gap:var(--sp-48)}}
/* browser window */
.bwin{border-radius:14px;overflow:hidden;background:#fff;border:1px solid #DCE3EC;box-shadow:0 30px 70px rgba(15,34,56,.14),0 2px 6px rgba(15,34,56,.06)}
.bbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:38px;padding:0 14px;background:#F4F6F9;border-bottom:1px solid #E4E9F0}
.bbar .dots{display:flex;gap:7px}.bbar .dots i{width:11px;height:11px;border-radius:50%;background:#E4E8EE}
.burl{display:inline-flex;align-items:center;gap:6px;padding:4px 14px;border-radius:8px;background:#fff;border:1px solid #E4E9F0;font-size:12px;color:#7B8BA3}
.burl .ic{width:12px;height:12px}

/* laptop: 16:10 panel, thin bezel, low wide base */
.dlaptop{position:relative}
.dlid{position:relative;background:#0D1522;border-radius:clamp(10px,1.8vw,20px) clamp(10px,1.8vw,20px) 0 0;padding:clamp(6px,1.25%,14px) clamp(6px,1.25%,14px) clamp(8px,1.6%,18px);box-shadow:0 0 0 1px #2A3546 inset}
.dlid .vp{border-radius:3px}
.dcam{position:absolute;top:clamp(2px,.45%,6px);left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:#2E3B4F}
.dbase{position:relative;height:clamp(8px,1.4vw,16px);margin:0 -6%;background:linear-gradient(180deg,#E9EDF2 0%,#CDD4DD 55%,#A9B3C0 100%);border-radius:0 0 clamp(8px,1.4vw,18px) clamp(8px,1.4vw,18px);box-shadow:0 22px 40px -10px rgba(15,34,56,.35)}
.dbase span{position:absolute;top:0;left:50%;width:15%;margin-left:-7.5%;height:40%;background:#BFC7D2;border-radius:0 0 8px 8px}

/* phone */
.dphone{background:#0D1522;padding:clamp(4px,.75vw,10px);border-radius:16%/7.6%;box-shadow:0 30px 60px rgba(15,34,56,.28),0 0 0 1px #2A3546 inset}
.dps{border-radius:13%/6.2%;overflow:hidden}

/* scenes */
.dscene{position:relative;max-width:1040px;margin:var(--sp-64) auto 0;padding:0 2% 0 4%}
.dscene .dlaptop{width:84%}
.dscene .dphone{position:absolute;right:0;bottom:-3%;width:21%}
.dpair{display:flex;justify-content:center;align-items:flex-end;gap:6%;padding:6% 8% 0;background:linear-gradient(180deg,#EEF3FA,#F7F9FC);border-radius:var(--r-lg);overflow:hidden;margin:0}
.dpair .dphone{width:36%;margin-bottom:-14%}
.dpair .dphone+.dphone{margin-bottom:-4%}
.split .dscene{margin:0;padding:0}
@media (max-width:600px){.dscene{margin-left:-14px;margin-right:-14px;padding:0}}
.step-shot .bwin{width:100%}

/* ---- app UI kit (canvas pixels) ---- */
.u-app{position:relative;display:grid;grid-template-columns:224px 1fr;height:100%;font-family:var(--font-b);font-size:15px;line-height:1.4;color:#17304F;background:#fff;text-align:left}
.u-app .ic,.p-app .ic{width:18px;height:18px}
.u-sb{display:flex;flex-direction:column;gap:2px;padding:22px 14px;background:#F6F8FB;border-right:1px solid #E6EBF1}
.u-brand{display:flex;align-items:center;gap:10px;margin:0 10px 24px;font-family:var(--font-d);font-weight:700;font-size:16px}
.u-brand img{width:28px;height:auto}
.u-ni{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;color:#5A6880;font-weight:500}
.u-ni.on{background:#fff;color:#17304F;font-weight:600;box-shadow:0 1px 2px rgba(23,48,79,.08),0 0 0 1px #E6EBF1}
.u-ni.on .ic{color:#1666D0}
.u-sch{margin-top:auto;display:flex;gap:10px;align-items:center;padding:14px 10px 0;border-top:1px solid #E6EBF1}
.u-sch b{display:block;font-size:13px}.u-sch small{display:block;font-size:12px;color:#7B8BA3}
.u-mn{display:flex;flex-direction:column;gap:22px;padding:34px 44px;min-width:0}
.u-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.u-t{display:block;font-family:var(--font-d);font-size:28px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.u-hd small{display:block;margin-top:4px;color:#7B8BA3;font-size:14px}
.u-acts{display:flex;gap:10px;flex:none}
.u-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;background:#1666D0;color:#fff;font-weight:600;font-size:14px;white-space:nowrap}
.u-btn .ic{width:16px;height:16px}
.u-btn.g{background:#fff;color:#17304F;box-shadow:0 0 0 1px #D5DCE6 inset}
.u-btn.full{display:flex;justify-content:center;margin-top:6px;padding:14px}
.u-tabs{display:flex;gap:30px;border-bottom:1px solid #E6EBF1;font-size:14px;color:#7B8BA3;margin-top:-4px}
.u-tabs span{padding-bottom:12px}
.u-tabs .on{color:#17304F;font-weight:600;box-shadow:inset 0 -2px #1666D0}
.u-tbl{display:flex;flex-direction:column}
.u-row{display:grid;grid-template-columns:var(--c);gap:16px;align-items:center;padding:15px 6px;border-bottom:1px solid #EEF1F5}
.u-row:last-child{border-bottom:0}
.u-th{padding-top:0;padding-bottom:10px;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8A97AB}
.u-jt b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.u-jt small{display:block;font-size:13px;color:#7B8BA3;margin-top:2px}
.u-mut{color:#5A6880;font-size:14px;display:inline-flex;align-items:center;gap:8px}
.u-mut .ic{width:15px;height:15px;color:#8A97AB}
.u-r{text-align:right}
.u-pill{display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.u-pill.o{background:#E8F0FE;color:#1557B0}.u-pill.p{background:#FEF1D6;color:#8A5300}.u-pill.w{background:#F1ECFB;color:#5B3BA8}.u-pill.d{background:#E6F4EA;color:#137333}.u-pill.x{background:#FCE8E6;color:#B3261E}
.u-pri{display:inline-flex;align-items:center;gap:7px;font-size:14px;color:#5A6880}
.u-pri i{width:8px;height:8px;border-radius:50%;background:#A9B4C4}
.u-pri.urgent i{background:#D93025}.u-pri.high i{background:#E8710A}
.u-pri.urgent{color:#B3261E;font-weight:600}
.u-av{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;font-size:11px;font-weight:700;color:#fff;background:#17304F}
.u-av.a2{background:#2C7A6B}.u-av.a3{background:#8C4FB5}.u-av.a4{background:#C2671B}.u-av.a5{background:#4F6A8F}.u-av.a6{background:#1666D0}
.u-who{display:inline-flex;align-items:center;gap:10px;font-size:14px;white-space:nowrap}
.u-card{border:1px solid #E6EBF1;border-radius:14px;padding:20px;background:#fff}
.u-card h4{margin:0 0 14px;font-size:14px;font-weight:600}
.u-k4,.u-k3{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.u-k3{grid-template-columns:repeat(3,1fr)}
.u-kpi small{display:block;font-size:13px;color:#7B8BA3}
.u-kpi b{display:block;font-family:var(--font-d);font-size:34px;font-weight:700;line-height:1.1;margin:6px 0 2px}
.u-kpi em{font-style:normal;font-size:13px;color:#137333}
.u-r2{display:grid;grid-template-columns:1.25fr 1fr;gap:16px;flex:1}
.u-leg{display:flex;gap:16px;font-size:12px;color:#5A6880;margin:-6px 0 10px}
.u-leg i{display:inline-block;width:9px;height:9px;border-radius:2px;background:#4C8DF0;margin-right:6px}.u-leg i.d{background:#17304F}
.u-gc{display:flex;gap:18px;height:190px;align-items:flex-end;border-bottom:1px solid #E6EBF1;padding:0 6px}
.u-g{flex:1;display:flex;flex-direction:column;align-items:center;height:100%}
.u-g div{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:5px}
.u-g i{width:18px;border-radius:4px 4px 0 0;background:#4C8DF0}.u-g i.d{background:#17304F}
.u-g span{font-size:12px;color:#7B8BA3;margin:8px 0 -26px}
.u-hb{display:grid;grid-template-columns:84px 1fr 28px;gap:12px;align-items:center;font-size:13px;color:#5A6880;margin-bottom:14px}
.u-hb div{height:8px;border-radius:4px;background:#EEF1F5}.u-hb i{display:block;height:100%;border-radius:4px;background:#4C8DF0}
.u-hb b{text-align:right;color:#17304F}
.u-kb{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;flex:1}
.u-col{background:#F6F8FB;border-radius:14px;padding:14px}
.u-col h4{display:flex;justify-content:space-between;margin:2px 4px 12px;font-size:13px;font-weight:600}
.u-col h4 em{font-style:normal;color:#7B8BA3;font-weight:500}
.u-kc{background:#fff;border:1px solid #E6EBF1;border-radius:12px;padding:14px;margin-bottom:10px;box-shadow:0 1px 2px rgba(23,48,79,.05)}
.u-kc b{display:block;font-size:14px;font-weight:600;margin-bottom:12px}
.u-kc div{display:flex;justify-content:space-between;align-items:center}
.u-kc .u-av{width:26px;height:26px;font-size:10px}
.u-ov{position:absolute;inset:0;background:rgba(13,21,34,.32)}
.u-panel{position:absolute;top:0;right:0;bottom:0;width:470px;background:#fff;padding:30px 32px;display:flex;flex-direction:column;gap:18px;box-shadow:-24px 0 60px rgba(13,21,34,.18)}
.u-ph{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-d);font-size:22px}
.u-x{color:#7B8BA3}
.u-fl label{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.u-in{border:1px solid #D5DCE6;border-radius:10px;padding:11px 14px;font-size:14px;background:#fff}
.u-in.big{min-height:74px}
.u-two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.u-seg{display:flex;gap:8px}
.u-seg span{flex:1;text-align:center;padding:9px 0;border:1px solid #D5DCE6;border-radius:10px;font-size:14px;color:#5A6880}
.u-seg .on{border-color:#1666D0;background:#E8F0FE;color:#1557B0;font-weight:600}
.u-imgs{display:flex;gap:10px}
.u-imgs i{width:88px;height:66px;border-radius:10px;display:grid;place-items:center;color:#7B8BA3}
.u-imgs i.g1{background:linear-gradient(135deg,#C9D6E6,#8FA5BF 60%,#6E86A4)}
.u-imgs i.g2{background:linear-gradient(160deg,#E7DCCB,#B9A68C 55%,#8D7B63)}
.u-imgs i.add{border:1.5px dashed #C3CCD8}
.u-imgs.lg i{width:150px;height:100px}
.u-tog{display:flex;justify-content:space-between;align-items:center;font-size:14px;padding:12px 14px;border-radius:10px;background:#F6F8FB}
.u-tog em{width:40px;height:24px;border-radius:12px;background:#1666D0;position:relative}
.u-tog em::after{content:"";position:absolute;right:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff}
.u-pf{margin-top:auto;display:flex;justify-content:flex-end;gap:10px}
.u-det{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:start}
.u-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:20px}
.u-steps div{font-size:13px;color:#8A97AB}
.u-steps i{display:block;height:6px;border-radius:3px;background:#E6EBF1;margin-bottom:8px}
.u-steps .d i{background:#1666D0}.u-steps .c i{background:linear-gradient(90deg,#1666D0 55%,#E6EBF1 55%)}
.u-steps .d,.u-steps .c{color:#17304F;font-weight:600}
.u-feed{list-style:none;margin:20px 0 0;padding:0}
.u-feed li{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:14px 0;border-top:1px solid #EEF1F5}
.u-feed b{font-size:14px}.u-feed small{margin-left:8px;font-size:12px;color:#8A97AB}
.u-feed p{margin:4px 0 0;font-size:14px;color:#5A6880}
.u-q{display:flex;gap:10px;align-items:center;margin-top:10px;padding:10px 12px;border-radius:10px;background:#F6F8FB;color:#17304F;font-weight:600;font-size:13px;width:max-content}
.u-q em{font-style:normal;color:#137333}
.u-meta{display:flex;flex-direction:column;gap:16px}
.u-meta small{display:block;font-size:12px;color:#8A97AB;margin-bottom:6px}
.u-meta b{font-size:14px;font-weight:600}

/* phone app (canvas pixels) */
.p-app{height:100%;background:#F6F8FB;font-family:var(--font-b);font-size:14px;line-height:1.4;color:#17304F;text-align:left}
.p-st{display:flex;justify-content:space-between;align-items:center;height:48px;padding:6px 26px 0;font-weight:600;font-size:14px}
.p-isl{width:96px;height:28px;border-radius:14px;background:#0D1522}
.p-bt{width:24px;height:11px;border-radius:3px;border:1.5px solid #17304F;position:relative}
.p-top{display:flex;align-items:center;gap:10px;padding:10px 20px 14px;background:#F6F8FB;font-family:var(--font-d);font-size:20px}
.p-top img{width:26px;height:auto}
.p-bd{padding:4px 20px;display:flex;flex-direction:column;gap:14px}
.p-bd .u-imgs i{width:96px;height:74px}
.p-up{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:16px;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(23,48,79,.06),0 0 0 1px #E6EBF1}
.p-up b{display:block;font-size:15px;margin-bottom:6px}
.p-up p{margin:8px 0 0;font-size:13px;color:#5A6880}
.p-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center}
.p-ic.p{background:#FEF1D6;color:#8A5300}.p-ic.d{background:#E6F4EA;color:#137333}.p-ic.o{background:#E8F0FE;color:#1557B0}