:root{
  /* Navy carries the authority. Deeper and cooler than before — the old one read as corporate blue. */
  --navy-950:#040a14; --navy-900:#081221; --navy-800:#0f1e35; --navy-700:#18304f; --navy-600:#22456f;
  /* Orientra blue identifies Operations. */
  --blue-800:#1a3fb8; --blue-700:#1d4ed8; --blue-600:#2563eb; --blue-500:#3b82f6; --blue-400:#60a5fa;
  --blue-200:#bfdbfe; --blue-100:#dbeafe; --blue-50:#eff6ff; --blue-tint:#f5f8ff;
  /* A controlled warm orange identifies Safety and attention. An accent, never a theme. */
  --amber-700:#b45309; --amber-600:#d97706; --amber-500:#f59e0b; --amber-100:#fef3c7; --amber-50:#fffbeb;
  --emerald-600:#059669; --emerald-500:#10b981; --emerald-50:#ecfdf5; --rose-600:#e11d48; --rose-50:#fff1f2;
  --ink:#0a1424; --slate-700:#334155; --slate-600:#4a5a70; --slate-500:#64748b; --slate-400:#94a3b8;
  --slate-300:#cbd5e1; --slate-200:#e4e9f0; --slate-100:#f1f5f9; --slate-50:#f8fafc;
  --line:#e6ebf2;
  --maxw:1200px;
  /* Layered, colour-tinted shadows. A single flat shadow is the fastest way to look like a template. */
  --sh-xs:0 1px 2px rgba(10,20,36,.05);
  --sh-sm:0 1px 2px rgba(10,20,36,.04),0 2px 6px rgba(10,20,36,.04);
  --sh-md:0 2px 4px rgba(10,20,36,.03),0 8px 24px rgba(10,20,36,.06);
  --sh-lg:0 4px 8px rgba(10,20,36,.04),0 16px 40px rgba(10,20,36,.09);
  --sh-xl:0 8px 16px rgba(10,20,36,.05),0 32px 72px rgba(10,20,36,.14);
  --sh-glow:0 0 0 1px rgba(37,99,235,.08),0 18px 48px rgba(37,99,235,.13);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;
  font-feature-settings:'cv02','cv03','cv04','ss03';font-variant-ligatures:contextual;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
@media(max-width:600px){.wrap{padding:0 20px}}

/* ---------- type ----------
   Inter Tight for display. The single biggest thing that separates a premium page from a template
   is display type that is LARGE, TIGHT and set at a real optical size. The old scale topped out at
   3.35rem with default tracking, which reads as a slide deck. */
h1,h2,h3,h4,.display{font-family:"Inter Tight",Inter,ui-sans-serif,system-ui,sans-serif;color:var(--navy-900);font-weight:700}
h1{font-size:clamp(2.45rem,5.1vw,4.1rem);line-height:1.03;letter-spacing:-.038em}
h2{font-size:clamp(1.75rem,3.3vw,2.7rem);line-height:1.08;letter-spacing:-.032em}
h3{font-size:1.12rem;line-height:1.25;letter-spacing:-.018em;font-weight:650}
h4{font-size:.95rem;letter-spacing:-.01em;font-weight:700}
p{color:var(--slate-600)}
.lede{font-size:1.16rem;line-height:1.58;color:var(--slate-600);max-width:60ch;font-weight:420}
@media(max-width:600px){.lede{font-size:1.05rem}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-700);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--blue-600),var(--blue-400))}
.eyebrow.safety{color:var(--amber-700)}
.eyebrow.safety::before{background:linear-gradient(90deg,var(--amber-600),var(--amber-500))}
.eyebrow.light{color:var(--blue-400)}
.eyebrow.light::before{background:linear-gradient(90deg,var(--blue-400),rgba(96,165,250,.25))}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
.tabular{font-variant-numeric:tabular-nums}
.grad{background:linear-gradient(105deg,var(--blue-600),var(--blue-400) 60%,var(--amber-500));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- header ---------- */
.skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--navy-900);padding:12px 18px;z-index:200;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}
header.site{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(230,235,242,.9)}
.nav{display:flex;align-items:center;gap:4px;height:76px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Inter Tight",Inter,sans-serif;font-weight:700;letter-spacing:-.035em;font-size:1.22rem;color:var(--navy-900);margin-right:18px;flex-shrink:0;line-height:1.05}
.brand .mark{width:32px;height:32px;flex-shrink:0}
.brand small{display:block;font-size:.53rem;letter-spacing:.3em;font-weight:600;color:var(--slate-400);margin-top:2px;font-family:Inter,sans-serif}
.navlinks{display:flex;align-items:center;gap:1px}
.navitem{position:relative}
.navitem>a,.navitem>button{display:flex;align-items:center;gap:5px;font-size:.9rem;font-weight:500;color:var(--slate-700);padding:10px 13px;border-radius:9px;background:none;border:0;cursor:pointer;font-family:inherit;line-height:1.4;transition:color .15s,background .15s}
.navitem>a:hover,.navitem>button:hover{color:var(--navy-900);background:var(--slate-100)}
.navitem .caret{width:9px;height:9px;opacity:.45;transition:transform .18s}
.navitem:hover .caret,.navitem:focus-within .caret{transform:rotate(180deg)}
.dropdown{position:absolute;top:calc(100% + 10px);left:-10px;min-width:330px;background:rgba(255,255,255,.98);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-xl);padding:9px;opacity:0;visibility:hidden;transform:translateY(-7px) scale(.985);transition:all .18s cubic-bezier(.2,.8,.3,1)}
.navitem:hover .dropdown,.navitem:focus-within .dropdown{opacity:1;visibility:visible;transform:none}
.dropdown a{display:block;padding:11px 13px;border-radius:12px;transition:background .13s}
.dropdown a:hover{background:var(--blue-tint)}
.dropdown a b{display:block;font-size:.9rem;font-weight:650;color:var(--navy-900);letter-spacing:-.012em}
.dropdown a span{display:block;font-size:.79rem;color:var(--slate-500);margin-top:2px;line-height:1.45}
.navactions{margin-left:auto;display:flex;align-items:center;gap:6px;flex-shrink:0}
.navactions .signin{font-size:.885rem;font-weight:550;color:var(--slate-600);padding:10px 12px;border-radius:9px}
.navactions .signin:hover{color:var(--navy-900);background:var(--slate-100)}
@media(max-width:1120px){.navlinks{display:none}}
.menubtn{display:none;margin-left:auto;background:#fff;border:1px solid var(--slate-300);border-radius:11px;padding:10px 12px;cursor:pointer;color:var(--navy-900)}
@media(max-width:1120px){.menubtn{display:flex}.navactions .signin{display:none}}
@media(max-width:560px){.navactions .btn{display:none}}
#mobilenav{display:none;border-top:1px solid var(--line);background:#fff;max-height:calc(100dvh - 76px);overflow-y:auto}
#mobilenav.open{display:block}
#mobilenav .wrap{padding-top:14px;padding-bottom:26px}
#mobilenav h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--slate-400);margin:18px 0 4px;font-weight:700}
#mobilenav a{display:block;padding:12px 0;font-weight:550;font-size:1rem;color:var(--navy-900);border-bottom:1px solid var(--slate-100);min-height:46px}
#mobilenav .btn{margin-top:20px;width:100%}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:.925rem;letter-spacing:-.012em;padding:13px 22px;border-radius:11px;border:1px solid transparent;cursor:pointer;transition:all .17s cubic-bezier(.2,.8,.3,1);min-height:46px;font-family:inherit;text-align:center;white-space:nowrap}
.btn-primary{background:linear-gradient(180deg,var(--blue-600),var(--blue-700));color:#fff;box-shadow:0 1px 2px rgba(10,20,36,.12),0 6px 18px rgba(37,99,235,.24);border-color:var(--blue-700)}
.btn-primary:hover{background:linear-gradient(180deg,var(--blue-700),var(--blue-800));box-shadow:0 2px 4px rgba(10,20,36,.14),0 10px 26px rgba(37,99,235,.32);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--navy-900);border-color:var(--slate-300);box-shadow:var(--sh-xs)}
.btn-ghost:hover{border-color:var(--slate-400);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.btn-onnavy{background:#fff;color:var(--navy-900);border-color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.22)}
.btn-onnavy:hover{background:var(--blue-50);transform:translateY(-1px)}
.btn-outline-light{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.btn-outline-light:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.12)}
.btn-lg{padding:15px 28px;font-size:1rem;min-height:54px;border-radius:12px}
.btn .arw{width:15px;height:15px;transition:transform .17s}
.btn:hover .arw{transform:translateX(3px)}

/* ---------- sections ---------- */
section{padding:88px 0}
section.tight{padding:60px 0}
@media(max-width:720px){section{padding:64px 0}}
section.tinted{background:linear-gradient(180deg,#fff,var(--blue-tint) 22%,var(--blue-tint) 78%,#fff);}
section.slate{background:var(--slate-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.navy{background:var(--navy-950);color:#fff;position:relative;overflow:hidden}
section.navy::before{content:"";position:absolute;inset:0;background:
  radial-gradient(900px 500px at 12% -10%,rgba(37,99,235,.28),transparent 60%),
  radial-gradient(700px 420px at 92% 106%,rgba(217,119,6,.13),transparent 62%);pointer-events:none}
section.navy .wrap{position:relative;z-index:1}
section.navy h2,section.navy h3,section.navy h4{color:#fff}
section.navy p,section.navy .lede{color:#9fb2cc}
.sechead{max-width:54ch;margin-bottom:52px}
.sechead.center{margin-left:auto;margin-right:auto}
.sechead .lede{margin-top:16px}

/* ---------- grid + cards ---------- */
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}
.split>*,.grid>*{min-width:0}
.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .2s,border-color .2s}
.card.pad-lg{padding:34px}
a.card{display:block}
a.card:hover{border-color:var(--blue-200);box-shadow:var(--sh-md);transform:translateY(-3px)}
.card h3{margin-bottom:9px}
.card p{font-size:.93rem;line-height:1.6}
section.navy .card{background:rgba(255,255,255,.035);border-color:rgba(148,163,184,.16);backdrop-filter:blur(8px)}
section.navy .card p{color:#93a7c2}
section.navy a.card:hover{border-color:rgba(96,165,250,.5);background:rgba(255,255,255,.06)}

/* icons — a bordered glass tile rather than a flat pastel square */
.icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(160deg,#fff,var(--blue-50));border:1px solid var(--blue-100);color:var(--blue-700);box-shadow:var(--sh-xs)}
.icon.safety{background:linear-gradient(160deg,#fff,var(--amber-50));border-color:var(--amber-100);color:var(--amber-700)}
.icon svg{width:21px;height:21px}
section.navy .icon{background:linear-gradient(160deg,rgba(96,165,250,.18),rgba(96,165,250,.05));border-color:rgba(96,165,250,.28);color:var(--blue-400);box-shadow:none}
section.navy .icon.safety{background:linear-gradient(160deg,rgba(245,158,11,.18),rgba(245,158,11,.05));border-color:rgba(245,158,11,.28);color:var(--amber-500)}

/* ---------- lists ---------- */
ul.check{list-style:none;display:grid;gap:11px;margin-top:20px}
ul.check li{display:flex;gap:11px;font-size:.935rem;color:var(--slate-700);line-height:1.5}
ul.check li>svg{width:19px;height:19px;flex-shrink:0;margin-top:2px;color:var(--blue-600);padding:3px;border-radius:50%;background:var(--blue-50)}
ul.check.safety li>svg{color:var(--amber-600);background:var(--amber-50)}
section.navy ul.check li{color:#bccbdf}
section.navy ul.check li>svg{background:rgba(96,165,250,.16);color:var(--blue-400)}
ul.plain{list-style:none;display:grid;gap:8px;font-size:.92rem;color:var(--slate-600)}
ul.plain li{padding-left:17px;position:relative}
ul.plain li::before{content:"";position:absolute;left:0;top:.63em;width:5px;height:5px;border-radius:50%;background:var(--slate-300)}

/* ---------- product cards ---------- */
.prodcard{position:relative;border:1px solid var(--line);border-radius:20px;padding:32px;background:#fff;box-shadow:var(--sh-md);display:flex;flex-direction:column;overflow:hidden}
.prodcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue-600),var(--blue-400))}
.prodcard.safety::before{background:linear-gradient(90deg,var(--amber-600),var(--amber-500))}
.prodcard.both::before{background:linear-gradient(90deg,var(--blue-600),var(--amber-500))}
.prodcard .kicker{font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-700);margin-bottom:6px}
.prodcard.safety .kicker{color:var(--amber-700)}
.prodcard.both .kicker{color:var(--navy-700)}
.prodcard h3{font-size:1.45rem;font-weight:700;letter-spacing:-.03em;margin-bottom:10px}
.prodcard .btn{margin-top:auto;align-self:flex-start}
.prodcard ul.check{margin-bottom:28px}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.wide-right{grid-template-columns:.92fr 1.08fr}
.split.wide-left{grid-template-columns:1.08fr .92fr}
@media(max-width:1000px){.split,.split.wide-right,.split.wide-left{grid-template-columns:1fr;gap:44px}}

/* ---------- hero ----------
   LIGHT, not navy. The reference the owner chose leads with a bright, open hero and puts the
   visual weight on the right. A dark gradient hero with a glow blob is the single most dated thing
   a B2B site can do in 2026. */
.hero{position:relative;padding:78px 0 0;overflow:hidden;background:#fff}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 480px at 88% 8%,rgba(37,99,235,.10),transparent 62%),
    radial-gradient(560px 420px at 4% 92%,rgba(217,119,6,.055),transparent 60%),
    linear-gradient(180deg,#fff 0%,var(--blue-tint) 62%,#fff 100%);}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(37,99,235,.10) 1px,transparent 1px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(700px 420px at 82% 12%,#000,transparent 72%);
  mask-image:radial-gradient(700px 420px at 82% 12%,#000,transparent 72%)}
.hero .wrap{position:relative;z-index:1;padding-bottom:86px}
.hero .split{align-items:center}
@media(max-width:1000px){.hero .split{gap:26px}}
.hero h1{max-width:15ch}
.hero .lede{margin-top:24px;font-size:1.2rem}
.hero .cta{display:flex;flex-wrap:wrap;gap:13px;margin-top:36px}
.hero .quickpoints{display:flex;flex-wrap:wrap;gap:20px;margin-top:28px}
.hero .quickpoints span{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;font-weight:550;color:var(--slate-700)}
.hero .quickpoints svg{width:17px;height:17px;color:var(--blue-600);padding:2px;border-radius:50%;background:var(--blue-50)}

.pagehero{position:relative;padding:76px 0 64px;border-bottom:1px solid var(--line);overflow:hidden;background:#fff}
.pagehero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 380px at 84% -20%,rgba(37,99,235,.10),transparent 62%),linear-gradient(180deg,var(--blue-tint),#fff)}
.pagehero.safety::before{background:radial-gradient(700px 380px at 84% -20%,rgba(217,119,6,.09),transparent 62%),linear-gradient(180deg,var(--amber-50),#fff)}
.pagehero .wrap{position:relative;z-index:1}
.pagehero h1{max-width:19ch}
.pagehero .lede{margin-top:20px}

/* ---------- key line ---------- */
.keyline{position:relative;padding:6px 0 6px 26px;margin:30px 0;font-family:"Inter Tight",Inter,sans-serif;font-size:1.3rem;font-weight:600;color:var(--navy-900);letter-spacing:-.026em;line-height:1.34}
.keyline::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:3px;background:linear-gradient(180deg,var(--blue-600),var(--blue-400))}
.keyline.safety::before{background:linear-gradient(180deg,var(--amber-600),var(--amber-500))}
section.navy .keyline{color:#fff}
section.navy .keyline::before{background:linear-gradient(180deg,var(--blue-400),rgba(96,165,250,.3))}
.bigstatement{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(1.4rem,2.6vw,2.05rem);font-weight:600;letter-spacing:-.03em;line-height:1.26;color:var(--navy-900);text-align:center;max-width:24ch;margin:0 auto}
section.navy .bigstatement{color:#fff}

/* ---------- callout ---------- */
.callout{background:linear-gradient(160deg,var(--blue-50),#fff);border:1px solid var(--blue-100);border-radius:16px;padding:24px 26px}
.callout.safety{background:linear-gradient(160deg,var(--amber-50),#fff);border-color:var(--amber-100)}
.callout.plain{background:var(--slate-50);border-color:var(--line)}
.callout p{color:var(--slate-700);font-size:.945rem;line-height:1.62}
.callout p+p{margin-top:12px}
.callout h3{margin-bottom:8px}

/* ---------- steps ---------- */
ol.steps{list-style:none;counter-reset:s;display:grid;gap:10px}
ol.steps li{counter-increment:s;display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px 20px;box-shadow:var(--sh-xs);transition:border-color .18s,box-shadow .18s}
ol.steps li:hover{border-color:var(--blue-200);box-shadow:var(--sh-sm)}
ol.steps li::before{content:counter(s);flex-shrink:0;width:28px;height:28px;border-radius:9px;background:linear-gradient(160deg,var(--navy-700),var(--navy-900));color:#fff;font-size:.78rem;font-weight:700;display:grid;place-items:center}
ol.steps li b{display:block;color:var(--navy-900);font-size:.955rem;font-weight:650;letter-spacing:-.012em}
ol.steps li span{display:block;font-size:.87rem;color:var(--slate-500);margin-top:3px;line-height:1.5}

/* ---------- flow ---------- */
.flow{display:grid;gap:7px;max-width:420px}
.flow.center{margin:0 auto}
.flow .node{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 20px;text-align:center;font-weight:600;font-size:.925rem;color:var(--navy-900);box-shadow:var(--sh-xs);letter-spacing:-.014em}
.flow .node.accent{border-color:var(--blue-300,var(--blue-200));background:linear-gradient(160deg,var(--blue-50),#fff);color:var(--blue-800)}
.flow .node.safety{border-color:var(--amber-100);background:linear-gradient(160deg,var(--amber-50),#fff);color:var(--amber-700)}
.flow .arrow{display:grid;place-items:center;color:var(--slate-300)}
.flow .arrow svg{width:16px;height:16px}
section.navy .flow .node{background:rgba(255,255,255,.05);border-color:rgba(148,163,184,.2);color:#fff}
section.navy .flow .node.accent{background:rgba(59,130,246,.16);border-color:rgba(96,165,250,.45);color:#dbeafe}
section.navy .flow .node.safety{background:rgba(245,158,11,.13);border-color:rgba(245,158,11,.4);color:#fde68a}
section.navy .flow .arrow{color:rgba(148,163,184,.5)}

/* ---------- architecture columns ---------- */
.arch{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;align-items:stretch}
@media(max-width:980px){.arch{grid-template-columns:1fr}}
.arch .col{position:relative;border-radius:18px;padding:28px;border:1px solid var(--line);background:#fff;overflow:hidden;box-shadow:var(--sh-sm)}
.arch .col::before{content:"";position:absolute;top:0;left:0;right:0;height:3px}
.arch .col.ops::before{background:linear-gradient(90deg,var(--blue-600),var(--blue-400))}
.arch .col.shared{background:linear-gradient(180deg,var(--slate-50),#fff)}
.arch .col.shared::before{background:linear-gradient(90deg,var(--slate-400),var(--slate-300))}
.arch .col.safety::before{background:linear-gradient(90deg,var(--amber-600),var(--amber-500))}
.arch h4{font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:18px;font-weight:700}
.arch .col.ops h4{color:var(--blue-700)}
.arch .col.shared h4{color:var(--slate-500)}
.arch .col.safety h4{color:var(--amber-700)}
.arch ul{list-style:none;display:grid;gap:9px}
.arch li{font-size:.9rem;color:var(--slate-700);font-weight:480}

/* ============================================================ PRODUCT INTERFACE
   Rendered at the application's OWN scale — 13px base, real spacing, real chrome — and then
   scaled as a whole where it has to fit. The previous version shrank the text to 8.5px while
   leaving the chrome thick, which is why it read as pixel art rather than as software. A real
   screenshot reduced in size keeps its proportions; that is what this now does. */
.app{background:#fff;border:1px solid var(--slate-200);border-radius:14px;box-shadow:var(--sh-xl);overflow:hidden;font-size:13px;line-height:1.5;color:var(--ink);width:940px}
.app .chrome{display:flex;align-items:center;gap:10px;padding:12px 16px;background:linear-gradient(180deg,#fbfcfe,#f4f7fb);border-bottom:1px solid var(--slate-200)}
.app .chrome .dots{display:flex;gap:6px}
.app .chrome .dots i{width:10px;height:10px;border-radius:50%;background:#dfe5ee}
.app .chrome .addr{flex:1;text-align:center;font-size:11.5px;color:var(--slate-400);font-weight:500;letter-spacing:.01em}
.app .topbar{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--slate-200);background:#fff}
.app .topbar .t{font-family:"Inter Tight",Inter,sans-serif;font-size:15px;font-weight:650;letter-spacing:-.02em;color:var(--navy-900)}
.app .topbar .s{font-size:12px;color:var(--slate-500)}
.app .body{padding:20px}
.app .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.app .kpi{border:1px solid var(--slate-200);border-radius:11px;padding:13px 15px;background:#fff}
.app .kpi .l{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-400)}
.app .kpi .v{font-family:"Inter Tight",Inter,sans-serif;font-size:24px;font-weight:650;letter-spacing:-.03em;color:var(--navy-900);margin-top:3px;line-height:1.1}
.app .kpi .h{font-size:11.5px;color:var(--slate-500);margin-top:1px}
.app .week{display:grid;grid-template-columns:150px repeat(5,1fr);gap:8px}
.app .week .hd{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-400);padding-bottom:6px}
.app .week .who{display:flex;flex-direction:column;justify-content:center;padding:10px 0}
.app .week .who b{font-size:13px;font-weight:600;color:var(--navy-900);letter-spacing:-.01em}
.app .week .who span{font-size:11.5px;color:var(--slate-500)}
.app .week .cell{border:1px solid var(--slate-200);border-radius:10px;padding:8px;min-height:92px;background:var(--slate-50);display:flex;flex-direction:column;gap:6px}
.app .week .cell.off{background:repeating-linear-gradient(135deg,#f8fafc,#f8fafc 6px,#f1f5f9 6px,#f1f5f9 12px)}
.app .week .cell.away{background:linear-gradient(160deg,var(--amber-50),#fff);border-color:var(--amber-100)}
.app .job{background:#fff;border:1px solid var(--slate-200);border-left:3px solid var(--blue-500);border-radius:8px;padding:7px 9px;box-shadow:var(--sh-xs)}
.app .job.amber{border-left-color:var(--amber-500)}
.app .job b{display:block;font-size:11.5px;font-weight:600;color:var(--navy-900);line-height:1.3;letter-spacing:-.008em}
.app .job span{display:block;font-size:10.5px;color:var(--slate-500);margin-top:2px}
.app .free{font-size:11px;color:var(--slate-400);margin-top:auto}
.app .away{font-size:11.5px;font-weight:650;color:var(--amber-700);line-height:1.3}
.app .row{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--slate-200);border-radius:10px;margin-bottom:8px;background:#fff}
.app .row:last-child{margin-bottom:0}
.app .row .nm{font-weight:600;color:var(--navy-900);font-size:13px;letter-spacing:-.01em}
.app .row .mu{color:var(--slate-500);font-size:12px}
.app .pill{font-size:10.5px;font-weight:700;letter-spacing:.04em;padding:3px 9px;border-radius:999px;text-transform:uppercase}
.app .pill.blue{background:var(--blue-50);color:var(--blue-700)}
.app .pill.amber{background:var(--amber-50);color:var(--amber-700)}
.app .pill.green{background:var(--emerald-50);color:var(--emerald-600)}
.app .pill.rose{background:var(--rose-50);color:var(--rose-600)}
.app .pill.slate{background:var(--slate-100);color:var(--slate-600)}
.app .sectitle{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-400);margin:0 0 10px}
.app .bar{height:7px;border-radius:4px;background:var(--slate-200);overflow:hidden;display:flex}
.app .bar i{height:100%;display:block}
.app .split2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.app .note{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--slate-50);border:1px solid var(--slate-200);font-size:12px;color:var(--slate-600);line-height:1.55}

/* the phone — also at natural scale */
.phone{width:300px;border-radius:34px;border:9px solid #10182a;background:#fff;overflow:hidden;box-shadow:0 10px 24px rgba(10,20,36,.16),0 40px 80px rgba(10,20,36,.28);flex-shrink:0;font-size:13px}
.phone .status{height:24px;background:#10182a}
.phone .top{background:#10182a;color:#fff;padding:0 16px 14px}
.phone .top b{font-family:"Inter Tight",Inter,sans-serif;font-size:15px;font-weight:600;letter-spacing:-.02em;display:block}
.phone .top small{display:block;font-size:11.5px;color:#8ba1bf;margin-top:2px}
.phone .body{padding:14px;background:#fff}
.phone .req{border:1px solid var(--amber-500);background:linear-gradient(160deg,var(--amber-50),#fff);border-radius:12px;padding:11px 12px;margin-bottom:12px}
.phone .req b{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--amber-700)}
.phone .req span{display:block;font-size:12px;color:#7c2d12;margin-top:4px;line-height:1.45}
.phone .step{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--slate-200);border-radius:10px;margin-bottom:7px;font-size:12.5px;color:var(--slate-700)}
.phone .step .dot{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.phone .cta{background:linear-gradient(180deg,var(--blue-600),var(--blue-700));color:#fff;border-radius:11px;padding:13px;text-align:center;font-weight:650;font-size:14px;margin-top:12px;box-shadow:0 6px 16px rgba(37,99,235,.3)}

/* SCALED STAGE — the whole interface is scaled as ONE OBJECT, so every proportion survives.
   zoom rather than transform: scale() on purpose: zoom reflows, so the container takes the
   reduced height by itself. A transform would leave the original height behind and blow a hole in
   the page. Where zoom is unavailable the mock simply renders at full size inside a scroller,
   which is ugly but not broken. */
.stage{zoom:var(--z,.62);width:max-content;max-width:none}
@supports not (zoom:1){.stage{zoom:normal;width:100%;overflow-x:auto}.stage .app{width:940px}}
/* THE INTERFACE SCROLLS INSIDE ITS OWN BOX; THE PAGE NEVER SCROLLS SIDEWAYS.
   A 940px interface cannot fit a 375px phone at a readable scale, and squashing it to fit is how
   it stopped looking like software in the first place. So it stays at honest proportions, shrinks
   further on small screens, and pans inside its own container if it still does not fit. The
   negative margins give the drop shadow somewhere to live inside a scroller. */
.stagewrap{position:relative;display:flex;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;
  padding:10px 10px 30px;margin:-10px -10px -30px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.stagewrap::-webkit-scrollbar{height:6px}
.stagewrap::-webkit-scrollbar-thumb{background:var(--slate-300);border-radius:3px}
.stagewrap.clip{overflow:hidden;border-radius:18px}
@media(max-width:900px){.stage{zoom:calc(var(--z,.62) * .72)}}
@media(max-width:560px){.stage{zoom:calc(var(--z,.62) * .58)}}

/* THE HERO VISUAL BLEEDS PAST THE COLUMN.
   A product shot boxed neatly inside a grid column reads as a screenshot somebody pasted in. Every
   premium software site lets the interface run off the right edge, because it says the software is
   bigger than the page. The hero section clips the overflow so nothing widens the document. */
.herovis{position:relative;display:flex;align-items:flex-end;gap:0;width:max-content}
.herovis .board{position:relative;z-index:1}
.herovis .handheld{position:relative;z-index:2;margin-left:-124px;margin-bottom:-34px;filter:drop-shadow(0 24px 48px rgba(10,20,36,.22))}
@media(max-width:1000px){
  .herovis{transform:scale(.86);transform-origin:top left}
  .herovis .handheld{margin-left:-100px}
}
@media(max-width:700px){.herovis{transform:scale(.66)}}
@media(max-width:520px){.herovis .handheld{display:none}}

/* ---------- table ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh-sm)}
table.data{width:100%;border-collapse:collapse;font-size:.915rem;min-width:520px}
table.data th{text-align:left;padding:14px 20px;background:var(--slate-50);font-size:.69rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500);border-bottom:1px solid var(--line);font-weight:700}
table.data td{padding:15px 20px;border-bottom:1px solid var(--slate-100);color:var(--slate-600);vertical-align:top}
table.data tr:last-child td{border-bottom:0}
table.data td b{color:var(--navy-900);font-weight:600}

/* ---------- form ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:.73rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--slate-500);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--slate-300);border-radius:11px;padding:13px 14px;font-size:.94rem;font-family:inherit;color:var(--ink);background:#fff;min-height:48px;transition:border-color .15s,box-shadow .15s}
.field textarea{min-height:112px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(59,130,246,.14)}
.field .hint{font-size:.79rem;color:var(--slate-400);margin-top:6px}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.fieldrow{grid-template-columns:1fr}}

/* ---------- CTA band ---------- */
.ctaband{position:relative;background:var(--navy-950);border-radius:24px;padding:56px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:36px;flex-wrap:wrap;overflow:hidden;box-shadow:var(--sh-xl)}
.ctaband::before{content:"";position:absolute;inset:0;background:
  radial-gradient(620px 340px at 8% -20%,rgba(37,99,235,.36),transparent 62%),
  radial-gradient(520px 300px at 96% 120%,rgba(217,119,6,.18),transparent 62%)}
.ctaband>*{position:relative;z-index:1}
.ctaband h2{color:#fff;margin-bottom:10px;font-size:clamp(1.5rem,2.7vw,2.1rem)}
.ctaband p{color:#a9bbd4;max-width:50ch}
.ctaband .acts{display:flex;gap:13px;flex-wrap:wrap}
@media(max-width:760px){.ctaband{padding:38px 26px}}

/* ---------- footer ---------- */
footer.site{background:var(--navy-950);color:#8ba0bd;padding:72px 0 34px;font-size:.9rem;position:relative;overflow:hidden}
footer.site::before{content:"";position:absolute;inset:0;background:radial-gradient(800px 320px at 20% -30%,rgba(37,99,235,.16),transparent 60%)}
footer.site .wrap{position:relative;z-index:1}
footer.site .cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:34px}
@media(max-width:940px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:700}
footer.site ul{list-style:none;display:grid;gap:11px}
footer.site a{transition:color .15s}
footer.site a:hover{color:#fff}
footer.site .brandcol .brand{color:#fff;margin-bottom:16px}
footer.site .brandcol .brand small{color:#5d748a}
footer.site .brandcol p{color:#71879f;font-size:.87rem;max-width:32ch;line-height:1.65}
footer.site .base{margin-top:52px;padding-top:26px;border-top:1px solid rgba(148,163,184,.13);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem;color:#61789a}
/* ---------- pricing ---------- */
.pricegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.pricegrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.pricegrid{grid-template-columns:1fr}}
.pricecard{border:1px solid var(--line);border-radius:18px;padding:24px;background:#fff;box-shadow:var(--sh-sm)}
.pricecard .who{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500)}
.pricecard .amt{font-family:"Inter Tight",Inter,sans-serif;font-size:2.3rem;font-weight:700;letter-spacing:-.035em;color:var(--navy-900);line-height:1.1;margin-top:10px}
.pricecard .amt small{font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--slate-500)}
.pricecard .annual{margin-top:10px;font-size:.92rem;color:var(--slate-600)}
.pricecard .annual b{color:var(--navy-900);font-weight:650}
.pricecard.custom .amt{font-size:1.5rem}
.trialnote{display:inline-block;margin-top:14px;font-size:.9rem;font-weight:600;color:var(--slate-600)}
section.navy .trialnote,.ctaband .trialnote{color:#bccbdf}

/* ---------- legal ---------- */
.legal{max-width:78ch}
.legal h2{font-size:1.35rem;margin:38px 0 12px}
.legal h3{margin:20px 0 6px}
.legal p{margin:10px 0}
.legal ul{margin:10px 0 10px 22px;color:var(--slate-600);display:grid;gap:7px}
.legal a{color:var(--blue-700);text-decoration:underline;text-underline-offset:2px}
.legal code{font-size:.88em;background:var(--slate-100);padding:1px 5px;border-radius:5px}
.legal .fine{font-size:.85rem;color:var(--slate-500);margin-top:26px}
.draftnote{border:1px solid var(--amber-500);background:var(--amber-50);color:#5a3306;border-radius:14px;padding:16px 18px;font-size:.93rem;line-height:1.55}
.draftnote b{color:#3d1d05}
.pricetable{width:100%;border-collapse:collapse;margin:14px 0;font-size:.93rem}
.pricetable th,.pricetable td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--slate-700)}
.pricetable th{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500)}
.stagingnote{background:linear-gradient(90deg,var(--amber-500),var(--amber-600));color:#3d1d05;font-size:.79rem;font-weight:650;padding:9px 0;text-align:center;letter-spacing:-.005em}