: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 teal (#0a8fae, 2026-11-05) identifies Operations and the brand. The variable names stay
     "blue" so every rule below moved with these values. White on 600 is 4.96:1, 700 on white 6.6:1. */
  --blue-800:#0f5266; --blue-700:#0b647d; --blue-600:#087a96; --blue-500:#0a8fae; --blue-400:#33b5d3;
  --blue-200:#aee6f2; --blue-100:#d5f3f9; --blue-50:#effbfd; --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(10,143,174,.08),0 18px 48px rgba(10,143,174,.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}
img{height:auto}
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;text-wrap:balance}
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(51,181,211,.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:#0b2a3c;margin-right:18px;flex-shrink:0;line-height:1.05}
.brand .mark{width:40px;height:32px;flex-shrink:0}
.brand small{display:block;font-size:.53rem;letter-spacing:.3em;font-weight:600;color:inherit;margin-top:4px;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(10,143,174,.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(10,143,174,.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(10,143,174,.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(51,181,211,.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(51,181,211,.18),rgba(51,181,211,.05));border-color:rgba(51,181,211,.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(51,181,211,.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(10,143,174,.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(10,143,174,.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(10,143,174,.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(51,181,211,.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(10,143,174,.16);border-color:rgba(51,181,211,.45);color:#d5f3f9}
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(10,143,174,.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(10,143,174,.14)}
/* Grey words on the form are slate-500, 4.76:1 on white. Slate-400 was 2.56:1, too faint to read. */
.field .hint{font-size:.79rem;color:var(--slate-500);margin-top:6px}
.field input::placeholder,.field textarea::placeholder{color:var(--slate-500);opacity:1}
.field label .opt{text-transform:none;letter-spacing:0;font-weight:600;color:var(--slate-500)}
.formneed{font-size:.88rem;color:var(--slate-600);margin:0 0 18px}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:560px){.fieldrow{grid-template-columns:1fr}}
/* An iPhone zooms the whole page in when a field under 16px is tapped, so phones get 16px. */
@media(max-width:760px),(pointer:coarse){.field input,.field select,.field textarea{font-size:16px}}

/* ---------- 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(10,143,174,.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(10,143,174,.16),transparent 60%)}
footer.site .wrap{position:relative;z-index:1}
footer.site .cols{display:grid;grid-template-columns:1.6fr repeat(5,1fr);gap:30px}
@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:inherit}
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}
/* Every price is a button to buy that plan (owner decision 2026-11-05). */
.pricecard{display:flex;flex-direction:column}
.pricecard .buy{display:block;margin-top:12px;padding:14px 16px;border:1.5px solid var(--navy-900);border-radius:14px;color:var(--navy-900);text-decoration:none;transition:background .15s,box-shadow .15s;min-height:44px}
.pricecard .buy:hover{background:var(--slate-50,#f8fafc);box-shadow:var(--sh-sm)}
.pricecard .buy:focus-visible{outline:2px solid var(--navy-800);outline-offset:2px}
.pricecard .buy .amt{display:block;margin-top:0}
.pricecard .buy.year{border-width:1px;border-color:var(--line)}
.pricecard .buy.year .yr{display:block;font-weight:650;font-size:1.05rem}
.pricecard .buy .annual{display:block;margin-top:4px}
.pricecard .buy .go{display:flex;align-items:center;gap:6px;margin-top:8px;font-weight:700;font-size:.92rem;color:var(--navy-900)}
.pricecard .buy .go svg{width:16px;height:16px}
.pricecard .basis{margin-top:auto;padding-top:12px;font-size:.84rem;color:var(--slate-500)}
.pricebasis{margin:-6px 0 18px;font-size:1rem;color:var(--slate-600)}
.curswitch{display:inline-flex;gap:4px;padding:4px;margin:0 0 20px;border:1px solid var(--line);border-radius:12px;background:var(--slate-50,#f8fafc)}
.curswitch label{cursor:pointer;padding:9px 16px;border-radius:9px;font-weight:650;font-size:.95rem;color:var(--slate-600);min-height:44px;display:inline-flex;align-items:center}
.curradio{position:absolute;opacity:0;width:1px;height:1px}
#cur-cad:checked~.curswitch label[for=cur-cad],#cur-usd:checked~.curswitch label[for=cur-usd]{background:#fff;color:var(--navy-900);box-shadow:var(--sh-sm)}
#cur-cad:focus-visible~.curswitch label[for=cur-cad],#cur-usd:focus-visible~.curswitch label[for=cur-usd]{outline:2px solid var(--navy-800);outline-offset:2px}
#cur-cad:checked~.curlist.usd,#cur-usd:checked~.curlist.cad{display:none}
.curlist h2{font-size:1.05rem;margin:0 0 14px;color:var(--navy-900)}
/* Home builders and contractors: the Trades add-on (owner decision 2026-11-05). A table on a wide
   screen; on a phone each package becomes a stack of tiers, each still a pair of buttons. */
.tradeshead{margin-top:54px}
.tradeshead h2{font-size:1.6rem;margin:0 0 8px;color:var(--navy-900)}
.tradeshead .lede{margin:0 0 16px}
.tradeshead .callout{margin:0 0 22px}
.tradeswrap{overflow-x:auto}
.tradestable{width:100%;border-collapse:separate;border-spacing:0 0;font-size:.95rem}
.tradestable caption{text-align:left;font-weight:700;color:var(--navy-900);font-size:1.05rem;margin:0 0 12px}
.tradestable th,.tradestable td{text-align:left;vertical-align:top;padding:14px 10px;border-bottom:1px solid var(--line)}
.tradestable thead th{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-500);padding-top:4px}
.tradestable tbody th{font-family:"Inter Tight",Inter,sans-serif;font-size:1.1rem;color:var(--navy-900);white-space:nowrap}
.tradestable .tierfor{display:none}
.tradestable .buy{display:block;margin-top:8px;padding:12px 14px;border:1.5px solid var(--navy-900);border-radius:14px;color:var(--navy-900);text-decoration:none;min-height:44px;transition:background .15s,box-shadow .15s}
.tradestable .buy:first-of-type{margin-top:0}
.tradestable .buy:hover{background:var(--slate-50,#f8fafc);box-shadow:var(--sh-sm)}
.tradestable .buy:focus-visible{outline:2px solid var(--navy-800);outline-offset:2px}
.tradestable .buy.year{border-width:1px;border-color:var(--line)}
.tradestable .buy .amt{display:block;font-family:"Inter Tight",Inter,sans-serif;font-size:1.6rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.tradestable .buy .amt small{font-size:.82rem;font-weight:600;letter-spacing:0;color:var(--slate-500)}
.tradestable .buy .amt.quoted{font-size:1.2rem}
.tradestable .buy .yr{display:block;font-weight:650}
.tradestable .buy .go{display:flex;align-items:center;gap:6px;margin-top:6px;font-weight:700;font-size:.9rem}
.tradestable .buy .go svg{width:16px;height:16px}
.tradesbig{margin-top:18px;font-size:1rem;color:var(--slate-600)}
.tradesbig a{font-weight:700;color:var(--navy-900)}
@media(max-width:760px){
  .tradestable thead{display:none}
  .tradestable caption{display:block;width:100%}
  .tradestable,.tradestable tbody,.tradestable tr,.tradestable th,.tradestable td{display:block;width:100%}
  .tradestable tr{border:1px solid var(--line);border-radius:18px;padding:16px;margin-bottom:16px;background:#fff;box-shadow:var(--sh-sm)}
  .tradestable th,.tradestable td{border:0;padding:8px 0}
  .tradestable .tierfor{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-500);margin-bottom:6px}
}
.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)}
/* A four-column table on a phone: long words may break, so the page never scrolls sideways. */
@media(max-width:600px){.pricetable{font-size:.84rem}.pricetable th,.pricetable td{padding:8px 6px;overflow-wrap:anywhere}.pricetable th{letter-spacing:.04em}}
.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}

/* ---------- real product screenshots (2026-11-05) ----------
   Pictures of the running product on a made-up company, in a browser frame or a phone frame. They
   are images, so they scale with the column and never make the page scroll sideways. */
.shot{margin:0;position:relative}
.shot picture{display:block}
.shot img{display:block;width:100%;height:auto;object-fit:contain;object-position:top center}
/* Each picture carries its own file's shape, so no container can ever squash or stretch it. A desktop
   picture (2160 x 1350) is 1440/900; a phone picture (750 x 1624) is 375/812. */
.shot img.r-desk{aspect-ratio:1440/900}
.shot img.r-phone{aspect-ratio:375/812}
.shot.browser{border-radius:16px;overflow:hidden;background:#fff;border:1px solid var(--slate-200);box-shadow:var(--sh-xl)}
.shot.browser .bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:linear-gradient(180deg,#fbfcfe,#f1f5f9);border-bottom:1px solid var(--slate-200)}
.shot.browser .bar i{width:10px;height:10px;border-radius:50%;background:#dfe5ee}
.shot.browser .bar i:first-child{background:#f3a6a0}.shot.browser .bar i:nth-child(2){background:#f5d48e}.shot.browser .bar i:nth-child(3){background:#9fd8b4}
.shot.phone{width:100%;max-width:250px;border-radius:34px;border:8px solid #0b1324;overflow:hidden;background:#0b1324;box-shadow:0 10px 24px rgba(10,20,36,.18),0 36px 70px rgba(10,20,36,.28)}
.shot.phone img{border-radius:24px}
.shot figcaption{font-size:.84rem;color:var(--slate-600);margin-top:12px;line-height:1.45}
.shot figcaption b{color:var(--navy-900);font-weight:650}
.heroshots{position:relative;padding:10px 0 34px}
.heroshots .shot.browser{width:100%;transform:perspective(1600px) rotateY(-6deg) rotateX(2deg);transform-origin:left center}
.heroshots .shot.phone{position:absolute;right:-6px;bottom:-6px;width:34%;max-width:205px;border-width:7px;border-radius:28px}
.heroshots .shot.phone img{border-radius:20px}
.heroshots::before{content:"";position:absolute;inset:-40px -30px -10px 10%;background:radial-gradient(closest-side,rgba(10,143,174,.22),transparent);filter:blur(10px);z-index:-1}
@media(max-width:1000px){.heroshots .shot.browser{transform:none}}
@media(prefers-reduced-motion:reduce){.heroshots .shot.browser{transform:none}}
.realscreens .shotrow{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:34px;align-items:start}
.realscreens .shotrow+.shotrow{margin-top:46px}
.realscreens .shotrow.flip{grid-template-columns:minmax(0,1fr) minmax(0,2.1fr)}
.realscreens .phones{display:flex;gap:22px;justify-content:center}
.realscreens .phones .shot.phone{flex:1 1 0;min-width:0}
@media(max-width:520px){.realscreens .phones{gap:12px}.realscreens .phones .shot.phone{border-width:5px;border-radius:24px}.realscreens .phones .shot.phone img{border-radius:18px}}
@media(max-width:900px){.realscreens .shotrow,.realscreens .shotrow.flip{grid-template-columns:1fr}.realscreens .phones .shot.phone{max-width:200px}}
.madeup{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:650;color:var(--blue-700);background:var(--blue-50);border:1px solid var(--blue-100);padding:5px 11px;border-radius:999px}
.ctaband{display:flex;flex-wrap:wrap;gap:13px;justify-content:center;margin-top:46px}
.tradeshots{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr);gap:28px;align-items:end;margin-top:30px}
.tradeshots .shot.phone{max-width:220px}
/* A phone picture with a caption: the frame is the inner block, so the caption sits under it on the page
   and not inside the dark frame. */
.shot.phonecap{max-width:220px}
.shot.phonecap figcaption{text-align:center}
@media(max-width:800px){.tradeshots{grid-template-columns:1fr}.tradeshots .shot.phone,.tradeshots .shot.phonecap{margin:0 auto}}
/* ON A PHONE (2026-11-06): a desktop picture in a browser frame is swapped for the same screen taken on a
   phone (<picture>, same 640px break), and the browser frame becomes a phone frame: centred, never wider
   than 290px, the picture at its own shape. Its caption sits under the frame. The hero's small phone is
   dropped there, because the COR screen it shows comes again in "Real screens" a moment later. */
@media(max-width:640px){
  .shot.browser.adaptive{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;width:auto;max-width:none;transform:none}
  .shot.browser.adaptive .bar{display:none}
  .shot.browser.adaptive picture{width:100%;max-width:290px;margin:0 auto;border:8px solid #0b1324;border-radius:36px;overflow:hidden;background:#0b1324;box-shadow:0 10px 24px rgba(10,20,36,.18),0 36px 70px rgba(10,20,36,.28)}
  .shot.browser.adaptive img{border-radius:27px}
  .shot.browser.adaptive img.r-desk{aspect-ratio:375/812}
  .shot.browser.adaptive figcaption{text-align:center;max-width:320px;margin:16px auto 0}
  .heroshots{padding:4px 0 18px}
  .heroshots .shot.phone{display:none}
  .heroshots::before{inset:-20px -10px 0}
  .tradeshots{gap:34px}
}

/* ---------- the buyer's path (2026-11-07) ----------
   The home page's first screen on a phone: the brand line, the heading, a short paragraph, then the
   trial and the demo side by side with "no card" right under the trial. Everything else waits below. */
.hero .brandline{font-family:"Inter Tight",Inter,sans-serif;font-weight:650;font-size:.98rem;letter-spacing:-.01em;color:var(--blue-700);margin-bottom:14px}
.hero .trialnote{margin-top:10px}
.trybox{display:inline-flex;flex-direction:column;align-items:flex-start}
@media(max-width:640px){.trybox{align-items:center}}
.hero .cta{align-items:flex-start}
.herocta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px;align-items:flex-start}
.herocta .trialnote{margin-top:8px}
.field input[aria-invalid=true]{border-color:var(--rose-600);box-shadow:0 0 0 3px rgba(225,29,72,.12)}
@media(max-width:640px){
  .pagehero{padding:34px 0 40px}
  .pagehero .lede{margin-top:14px}
  .herocta{flex-wrap:nowrap;gap:10px;margin-top:18px}
  .herocta>.btn,.herocta>.trybox{flex:1 1 0;min-width:0}
  .herocta .btn{width:100%;padding-left:8px;padding-right:8px;font-size:.95rem;min-height:50px}
  .herocta .trialnote{margin-top:7px;font-size:.8rem;text-align:center}
}
@media(max-width:360px){
  .hero .cta,.herocta{flex-wrap:wrap}
  .hero .cta>.btn,.hero .cta>.trybox,.herocta>.btn,.herocta>.trybox{flex:1 1 100%}
}
@media(max-width:640px){
  .hero{padding-top:22px}
  .hero .wrap{padding-bottom:44px}
  .hero h1{font-size:2.15rem}
  .hero .lede{margin-top:12px;font-size:1rem;line-height:1.5}
  .hero .cta{margin-top:18px;gap:10px;flex-wrap:nowrap}
  .hero .cta>.btn,.hero .cta>.trybox{flex:1 1 0;min-width:0}
  .hero .cta .btn{width:100%;padding-left:8px;padding-right:8px;font-size:.95rem}
  .hero .trialnote{margin-top:7px;font-size:.8rem;text-align:center}
}
/* The job, start to finish: three numbered steps. */
.journey{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;counter-reset:step;margin:0;padding:0}
.journey li{list-style:none;position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px 24px;box-shadow:var(--sh-sm)}
.journey li::before{counter-increment:step;content:counter(step);display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,var(--blue-600),var(--blue-700));color:#fff;font-weight:700;margin-bottom:14px}
.journey li.safety::before{background:linear-gradient(180deg,var(--amber-500),var(--amber-600));color:#3d1d05}
.journey h3{margin-bottom:8px}
.journey p{font-size:.95rem;line-height:1.6}
.journey .who{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500);margin-bottom:6px}
@media(max-width:860px){.journey{grid-template-columns:1fr}}
/* A short example from a made-up company: who, then what happened, in order. */
.stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.stories.one{grid-template-columns:minmax(0,760px)}
.story{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;box-shadow:var(--sh-sm);display:flex;flex-direction:column}
.story h3{margin:12px 0 10px}
.story ol{margin:4px 0 0 0;padding:0;list-style:none;display:grid;gap:9px}
.story ol li{position:relative;padding-left:84px;font-size:.93rem;line-height:1.55;color:var(--slate-700)}
.story ol li b{position:absolute;left:0;top:0;font-size:.8rem;font-weight:700;color:var(--blue-700);font-variant-numeric:tabular-nums}
.story .end{margin-top:14px;font-weight:650;color:var(--navy-900);font-size:.95rem}
.story .more{margin-top:auto;padding-top:16px;font-weight:650;color:var(--blue-700)}
@media(max-width:980px){.stories{grid-template-columns:1fr}}
/* Pricing: the worked examples. */
.worked{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:22px}
.worked .card h3{font-size:1.05rem}
.worked table{width:100%;border-collapse:collapse;margin-top:12px;font-size:.93rem}
.worked td{padding:8px 0;border-bottom:1px solid var(--line);color:var(--slate-700);vertical-align:top}
.worked td:last-child{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;padding-left:12px}
.worked tr.total td{font-weight:700;color:var(--navy-900);border-bottom:0}
@media(max-width:760px){.worked{grid-template-columns:1fr}}
.paysum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 8px}
.paysum div{background:var(--slate-50);border:1px solid var(--line);border-radius:14px;padding:18px}
.paysum b{display:block;color:var(--navy-900);margin-bottom:6px;font-family:"Inter Tight",Inter,sans-serif;font-size:1.02rem}
.paysum p{font-size:.9rem;line-height:1.55}
@media(max-width:860px){.paysum{grid-template-columns:1fr}}
/* A draft for the owner's review: only in the private staging build (site.mjs strips it from a public one). */
.draftblock{border:2px dashed var(--amber-500);border-radius:18px;padding:22px 22px 18px;background:#fffdf7}
.draftblock>.draftnote{margin-bottom:16px}
.ph{background:var(--amber-50);border:1px dashed var(--amber-600);border-radius:5px;padding:0 5px;color:#5a3306;font-weight:650}