/* The US pages (/us/**). The office dashboard's design system (DESIGN.md at
   the repo root, admin/src/index.css) carried over to a marketing page: white
   and a warm-grey ladder, 1px hairlines instead of shadows, one blue accent
   spent only on the primary action, selection, focus and links, and colour
   that means state. Only the type sizes and the section rhythm are scaled up.
   The approved reference is site/_design-alternatives/d.html. The Singapore
   pages (site/index.html, blog/, privacy.html) use this file too, then
   assets/css/sg.css for the few pieces only they need. */
:root{
  /* ink + surface ladder */
  --ink:#1C1C1A; --ink-2:#5E5E5A; --ink-3:#767671; --ink-4:#B4B4AF;
  --canvas:#FFFFFF; --s1:#F8F8F7; --s2:#F3F3F2; --s3:#EEEEEC; --s4:#E4E4E2;
  --line:#E4E4E2; --line-strong:#D8D8D5;
  /* the one accent */
  --accent:#1D7AC6; --accent-hover:#1560A0; --accent-soft:#EBF5FD; --accent-edge:#C8E4F8;
  /* semantic: text values darkened only where AA needs it on a soft ground */
  --ok:#059669; --ok-ink:#047857; --ok-bg:#E0EFE8;
  --warn:#B45309; --warn-bg:#FEF3C7;
  --bad:#C0392B; --bad-bg:#FDECEA;
  --info:#1D6FA4; --info-bg:#EBF4FF;
  /* the app icon rail, and nothing else */
  --navy:#0D1B2E; --rail-fg:#8AA0BC;
  /* the Maintenance Contract header tint and avatar colours (app rebuilds) */
  --c-tint:#FAF5EA; --c-edge:#EFE6D2; --c-iconbg:#F6ECD6; --c-icon:#9A6714;
  --av-a:#1D7AC6;
  /* shape + depth */
  --r-xs:4px; --r-sm:6px; --r-btn:8px; --r-card:12px; --r-lg:16px; --r-pill:999px;
  --sh-dropdown:0 8px 24px rgba(28,28,26,.09),0 1px 3px rgba(28,28,26,.05);
  /* families */
  --f-sans:'Inter',system-ui,sans-serif;
  --f-display:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --f-mono:'DM Mono',ui-monospace,monospace;
  --wrap:1200px; --gutter:32px; --nav-h:56px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 15px/1.6 var(--f-sans);letter-spacing:-0.005em;font-variant-numeric:tabular-nums;overflow-x:clip;max-width:100vw}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;color:var(--ink)}
p,ul,ol,dl,dd,figure{margin:0}
ul,ol{padding:0}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-xs)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
/* A reading column, left-aligned to the page grid rather than centred */
.wrap.narrow{max-width:var(--wrap)}
.wrap.narrow>*{max-width:800px}
.sr-only,.cmp caption.sr-cap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* An unverified fact, price or contact detail. Loud on purpose: nothing
   marked like this may ship indexed. Pages holding one carry noindex. */
.verify{background:#FFF1B8;color:#5C4300;border-radius:4px;padding:0 4px;box-shadow:inset 0 -1px 0 #E8C85A;font-weight:600}

/* ── Type: the app's Text variants, scaled for a page ── */
.label{font:600 11px/1.45 var(--f-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2)}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:0;color:var(--ink-2)}
.sec-h,.h2{font-size:34px;font-weight:700;line-height:1.15;letter-spacing:-0.025em;max-width:24ch}
.sec-sub,.sub{font-size:16px;color:var(--ink-2);max-width:60ch;margin-top:12px}
.lead{font-size:18px;line-height:1.55;color:var(--ink-2)}

/* ── Buttons: Button.tsx — primary / outline / ghost ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:1px solid transparent;border-radius:var(--r-btn);font:500 13px/1.2 var(--f-sans);letter-spacing:-0.05px;white-space:nowrap;cursor:pointer;transition:background-color .12s,border-color .12s,color .12s;text-decoration:none!important}
.btn-lg{height:40px;padding:0 16px;font-size:14px}
.btn-pri{background:var(--accent);color:#fff}
.btn-pri:hover{background:var(--accent-hover)}
.btn-out{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-out:hover{background:var(--s1);border-color:var(--line-strong)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--s2);color:var(--ink)}
.btn svg{flex:none}
/* A text link with an arrow: "See every feature →" */
.arrow,.link-arrow{display:inline-flex;align-items:center;gap:6px;font:500 14px/1.3 var(--f-sans);color:var(--accent)}
.arrow .c{transition:transform .12s}
.arrow:hover .c{transform:translateX(3px)}

/* ── Badge.tsx: soft pill, 6px dot ── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:var(--r-pill);font:500 11px/1.45 var(--f-sans);letter-spacing:0;white-space:nowrap;background:var(--s2);color:var(--ink-2);vertical-align:middle}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.b-ok{background:var(--ok-bg);color:var(--ok-ink)} .b-ok::before{background:var(--ok)}
.b-warn{background:var(--warn-bg);color:var(--warn)}
.b-bad{background:var(--bad-bg);color:var(--bad)}
.b-info{background:var(--info-bg);color:var(--info)}
.b-neutral,.badge:not([class*=" b-"]){background:var(--s2);color:var(--ink-2)}
.b-neutral::before,.badge:not([class*=" b-"])::before{background:var(--ink-4)}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--s2);color:var(--ink-2);font:500 11px/1 var(--f-sans)}
/* a quiet status dot + label, for dense rows */
.dot{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink)}
.dot::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--ink-4)}
.dot.ok::before{background:var(--ok)} .dot.warn::before{background:var(--warn)} .dot.none::before{background:var(--ink-4)}

/* ── NAV ── */
.topnav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);-webkit-backdrop-filter:saturate(1.2) blur(6px);backdrop-filter:saturate(1.2) blur(6px)}
.nav-in{height:var(--nav-h);display:flex;align-items:center;gap:28px}
.logo{display:flex;align-items:center;gap:8px;flex:none;text-decoration:none!important}
.logo-img{height:22px;width:auto}
.region{display:block;width:22px;height:auto;border-radius:2px;box-shadow:0 0 0 1px rgba(28,28,26,.12)}
.nav-links{display:flex;align-items:center;gap:2px;height:100%}
.nav-links>a,.nav-dd-btn{display:inline-flex;align-items:center;gap:4px;height:100%;padding:0 10px;font:400 13px/1 var(--f-sans);color:var(--ink-2);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;text-decoration:none!important}
.nav-links>a:hover,.nav-dd-btn:hover{color:var(--ink)}
.nav-links>a[aria-current],.nav-dd-btn.is-cur{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.nav-dd{position:relative;height:100%}
.nav-dd-btn svg{transition:transform .12s}
.nav-dd.open .nav-dd-btn{color:var(--ink)}
.nav-dd.open .nav-dd-btn svg{transform:rotate(180deg)}
.mega{position:absolute;top:calc(100% + 6px);left:-8px;width:720px;display:none;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-dropdown)}
.nav-dd.open .mega{display:grid}
@media (hover:hover) and (min-width:901px){
  .nav-dd:hover .mega,.nav-dd:focus-within .mega{display:grid}
  .nav-dd::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
}
.mega-h{padding:8px 10px 4px}
.mega a{display:block;padding:8px 10px;border-radius:var(--r-sm);color:var(--ink);text-decoration:none!important}
.mega a:hover{background:var(--s1)}
.mega a[aria-current]{background:var(--accent-soft)}
.mega a b{display:block;font:500 13px/1.3 var(--f-sans)}
.mega a[aria-current] b{color:var(--accent)}
.mega a span{display:block;font-size:12px;line-height:1.4;color:var(--ink-2);margin-top:2px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.nav-burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-btn);cursor:pointer;color:var(--ink);padding:0}
.nav-links>a.nav-si-m{display:none}
/* The open mobile menu holds the page still behind it. */
html.nav-locked,html.nav-locked body{overflow:hidden}

/* ── HERO ── */
.hero{padding:72px 0}
/* One column: label and headline, then the lead and buttons beneath. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;max-width:880px}
.hero-grid>*{min-width:0}
.hero h1{font-size:56px;font-weight:700;line-height:1.04;letter-spacing:-0.035em;margin-top:14px;max-width:20ch;text-wrap:balance}
.hero .lead{font-size:18px;max-width:60ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.hero-stage{margin-top:56px}
/* Short points under the hero's call to action: a FactLine. */
/* A photo behind the hero (New York; Singapore swaps the variables in
   sg.css). The dark wash keeps the copy at well over 4.5:1 against the
   brightest part of the sky. Image URLs are root-absolute so they resolve the
   same wherever the variables are set. */
.hero.photo{--hero-img:url(/assets/images/new-york-skyline.webp);--hero-img-sm:url(/assets/images/new-york-skyline-1200.webp);--hero-pos:center 38%;padding:112px 0 104px;background:linear-gradient(90deg,rgba(9,14,26,.88) 0%,rgba(9,14,26,.74) 50%,rgba(9,14,26,.5) 100%),var(--hero-img) var(--hero-pos)/cover no-repeat}
.hero.photo h1{color:#fff}
.hero.photo .label{color:#E4E4E2}
.hero.photo .lead{color:#E4E8EE}
.hero.photo :focus-visible{outline-color:#fff}

/* PAGE HERO (guides, articles, pricing) */
.phero{padding:56px 0 64px}
.crumbs{font-size:13px;color:var(--ink-2);margin-bottom:20px}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--ink)}
.phero h1{font-size:44px;line-height:1.1;letter-spacing:-0.03em;max-width:20ch;text-wrap:balance}
.phero .lead{margin-top:16px;max-width:60ch}
.phero .hero-cta{margin-top:24px}
.reviewed{font-size:13px;color:var(--ink-2);margin-top:20px;max-width:75ch}

/* ── The product frame: a static grouped surface, so a hairline and no
   shadow. The app rebuilds in pages-us/_includes/ use everything below. ── */
.frame,.shot-frame{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;overflow:hidden}
.shot-frame img{width:100%;height:auto}
.shot-frame.crop img{height:100%;object-fit:cover;object-position:top}
.app{display:grid;grid-template-columns:60px minmax(0,1fr);min-height:100%}
.rail{background:var(--navy);display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 0 12px}
.rail .mark{width:28px;height:28px;border-radius:6px;margin-bottom:10px}
.rail .tenant{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);color:#fff;font:600 12px/32px var(--f-sans);text-align:center;margin-bottom:8px}
.rail i{position:relative;width:40px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--rail-fg)}
.rail i.on{background:rgba(255,255,255,.08);color:#fff}
.rail i.dotted::after{content:"";position:absolute;top:5px;right:9px;width:6px;height:6px;border-radius:50%;background:#E5484D}
.rail .me{margin-top:auto;width:36px;height:36px;border-radius:50%;background:var(--av-a);color:#fff;font:600 12px/36px var(--f-sans);text-align:center;box-shadow:0 0 0 6px rgba(255,255,255,.05)}
.page{padding:20px 28px 8px;min-width:0}
.page-h{font:700 24px/1.2 var(--f-display);letter-spacing:-0.4px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-top:12px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;font:400 13px/1.3 var(--f-sans);color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;text-decoration:none!important}
.tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:500}
.reg-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 6px}
.reg-bar .t{display:flex;align-items:center;gap:8px;font:600 13px/1.3 var(--f-sans)}
.reg-bar .t .n{font-weight:400;color:var(--ink-2)}
.filters{display:flex;gap:6px}
.chip{height:30px;padding:0 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-btn);font-size:13px;color:var(--ink);background:#fff}
.chip.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:500}
.field{height:32px;padding:0 10px;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:var(--r-btn);font-size:13px;color:var(--ink-3);background:#fff;min-width:0}
.field.sel{justify-content:space-between}
.field.sel svg{color:var(--ink-2)}
/* register table */
.rt{width:100%;border-collapse:collapse;font-size:13px}
.rt th{font:400 13px/1.3 var(--f-sans);color:var(--ink-2);text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.rt td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.rt tr:last-child td{border-bottom:0}
.rt .nm{font:500 13px/1.35 var(--f-sans);color:var(--ink)}
.rt .nm small{display:block;font:400 12px/1.5 var(--f-sans);color:var(--ink-2);margin-top:2px}
.rt .nm small code,.id{font-family:var(--f-mono);font-size:12px;color:var(--ink-2)}
.auditor{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r-sm);background:var(--ok-bg);color:var(--ok-ink);font-size:13px;white-space:nowrap}
.due{display:flex;align-items:center;gap:10px;white-space:nowrap}
.due b{display:block;font:500 13px/1.35 var(--f-sans)}
.due span{display:block;font-size:12px;line-height:1.4;color:var(--warn)}
.ring{flex:none}
.act{text-align:right;white-space:nowrap}
.kebab{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;color:var(--ink-2);vertical-align:middle;margin-left:4px}
/* recreated app pieces that sit inside a stage */
.shot-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:#fff}
.shot-scroll:focus-visible{outline-offset:3px}
.mini{min-width:760px}
.band{background:var(--c-tint);border-bottom:1px solid var(--c-edge);padding:18px 28px 16px}
.crumb{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink-2)}
.crumb b{font-weight:500;color:var(--ink)}
.dh{display:flex;align-items:center;gap:12px;margin-top:10px}
.dh .ic{width:40px;height:40px;border-radius:10px;background:var(--c-iconbg);color:var(--c-icon);display:flex;align-items:center;justify-content:center;flex:none}
.dh h4{margin:0;font:700 22px/1.2 var(--f-display);letter-spacing:-0.4px;display:flex;align-items:center;gap:10px}
.dh small{display:block;font-size:13px;color:var(--ink-2);margin-top:2px}
.dh .acts{margin-left:auto;display:flex;gap:6px}
.banner{border:1px solid var(--line);border-radius:var(--r-card);padding:16px 18px;margin:20px 0 14px}
.banner b{display:block;font:700 17px/1.3 var(--f-display);letter-spacing:-0.2px}
.banner span{display:block;font-size:13px;color:var(--ink-2);margin-top:4px}
.factline{display:flex;flex-wrap:wrap;gap:4px 22px;font-size:13px;color:var(--ink-2);padding:12px 0 2px;border-top:1px solid var(--line)}
.tabs.contract .tab.on{color:var(--c-icon);border-bottom-color:var(--c-icon)}
.seg{display:inline-flex}
.seg span{height:30px;padding:0 12px;display:inline-flex;align-items:center;border:1px solid var(--line);margin-left:-1px;font-size:13px;color:var(--ink-2);background:#fff}
.seg span:first-child{border-radius:var(--r-btn) 0 0 var(--r-btn);margin-left:0}
.seg span:last-child{border-radius:0 var(--r-btn) var(--r-btn) 0}
.seg span.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:500;position:relative;z-index:1}
.lift{font:500 12px/1.5 var(--f-mono);color:var(--ink)}
/* the Auditor's booking page */
.book{background:var(--s2);padding:28px}
.book-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 28px}
.book-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}
.book-top h4{margin:6px 0 0;font:700 24px/1.2 var(--f-display);letter-spacing:-0.5px}
.book-top small{display:block;font-size:14px;color:var(--ink-2);margin-top:4px}
.book-due{display:flex;gap:10px;align-items:center}
.book-due b{display:block;font:500 14px/1.3 var(--f-sans);color:var(--warn)}
.book-due span{font-size:13px;color:var(--ink-2)}
.bk-spec{display:grid;grid-template-columns:repeat(5,auto);justify-content:start;gap:4px 40px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:16px 20px;margin-top:20px}
.bk-spec div{font-size:14px}
.bk-spec .label{display:block;margin-bottom:4px}
.cal{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.cal-h{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--line)}
.cal-h b{font:600 15px/1 var(--f-display)}
.cal-legend{display:flex;gap:18px;padding:10px 14px;font-size:12px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.cal-legend span{display:inline-flex;align-items:center;gap:6px}
.cal-legend span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}
.cal-grid{display:grid;grid-template-columns:56px repeat(5,1fr)}
.cal-grid>div{border-left:1px solid var(--line);border-top:1px solid var(--line);min-height:36px;position:relative;font-size:12px}
.cal-grid>.hd{border-top:0;text-align:center;padding:8px 0;color:var(--ink-2);font-size:11px;letter-spacing:.06em}
.cal-grid>.hd b{display:block;font:600 15px/1.3 var(--f-sans);color:var(--ink);letter-spacing:0}
.cal-grid>.tm{border-left:0;color:var(--ink-2);padding:4px 8px;font-size:11px}
.ev{position:absolute;z-index:1;left:4px;right:4px;top:4px;border-radius:var(--r-sm);padding:4px 8px;font-size:12px;line-height:1.3}
.ev.busy{background:var(--s3);color:var(--ink-2);border-left:3px solid var(--ink-4)}
.ev.mine{background:var(--accent-soft);color:var(--accent-hover);border:1px solid var(--accent);font-weight:500}

/* ── PARTNERS ── */
.partners{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--s1)}
.partners .wrap{display:flex;align-items:center;gap:40px;padding-top:22px;padding-bottom:22px}
.partners-row{display:flex;align-items:center;gap:40px;flex-wrap:wrap}
.partners-row img{height:26px;width:auto;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.7}
.partners+section{border-top:0}

/* ── SECTIONS ── */
section{padding:96px 0;border-top:1px solid var(--line)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.split>*{min-width:0}
.split .sticky{position:sticky;top:calc(var(--nav-h) + 32px)}
/* "What is …": a heading and a few paragraphs */
.whatis{max-width:820px}
.whatis p{font-size:16px;color:var(--ink-2);margin-top:16px;max-width:70ch}
.whatis ul,.flist{margin:12px 0 0 20px;font-size:16px;color:var(--ink-2)}
.whatis li,.flist li{margin-top:6px}
.whatis b,.whatis strong{color:var(--ink);font-weight:600}

/* Problem rows: an Issues-list shape */
.plist{border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:24px minmax(0,1fr);gap:4px 12px;padding:24px 0;border-bottom:1px solid var(--line)}
.prow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--warn);margin-top:9px;grid-row:span 2}
.prow h3{font-size:18px;font-weight:600;letter-spacing:-0.015em;line-height:1.35}
.prow p{color:var(--ink-2)}

/* Info rows: a title beside its description (replaces card grids) */
.ilist{margin-top:40px;border-top:1px solid var(--line)}
.irow{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:8px 32px;padding:22px 0;border-bottom:1px solid var(--line);align-items:baseline}
.irow>*{min-width:0}
.irow h3{font-size:17px;font-weight:600;letter-spacing:-0.01em;line-height:1.35;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.irow p{color:var(--ink-2)}
.irow p+p{margin-top:8px}
.irow .stores{margin-top:12px}
.irow .num{font:500 12px/1.5 var(--f-mono);color:var(--ink-2);display:block;margin-bottom:4px}

/* What's included: a two-column list, each item ticked like a done Timeline node */
.incl{display:grid;grid-template-columns:1fr 1fr;column-gap:48px;margin-top:40px;border-top:1px solid var(--line)}
.incl>div{padding:20px 0 20px 32px;border-bottom:1px solid var(--line);position:relative}
.incl>div::before{content:"";position:absolute;left:0;top:22px;width:20px;height:20px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='m2 5.2 2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat}
.incl h3{font-size:16px;font-weight:600;letter-spacing:-0.01em;line-height:1.4}
.incl p{font-size:14px;color:var(--ink-2);margin-top:4px}

/* ── Before / after: two Job Timelines. Before is black, after is green. ── */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.gs{border:1px solid var(--line);border-radius:var(--r-card);background:#fff;padding:24px}
.gs-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:8px}
.gs-h .figure{font:700 30px/1.1 var(--f-display);letter-spacing:-0.02em;text-align:right}
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;padding:12px 0;font-size:15px}
.tl li:not(:last-child)::after{content:"";position:absolute;left:9.5px;top:34px;bottom:-10px;width:1px;background:var(--line-strong)}
.node{width:20px;height:20px;border-radius:50%;margin-top:2px;display:flex;align-items:center;justify-content:center;background:#fff;border:1.5px solid var(--line-strong);position:relative;z-index:1}
.node.done{background:var(--ok);border-color:var(--ok);color:#fff}
.gs.before{background:var(--ink);border-color:var(--ink);color:#fff}
.gs.before .gs-h{border-bottom-color:rgba(255,255,255,.16)}
.gs.before .label{color:#C8C8C4}
.gs.before .figure{color:#fff}
.gs.before .tl li{color:#E4E4E2}
.gs.before .tl li::after{background:rgba(255,255,255,.22)}
.gs.before .node{background:var(--ink);border-color:#858580}
.gs.after{background:var(--ok-ink);border-color:var(--ok-ink);color:#fff}
.gs.after .gs-h{border-bottom-color:rgba(255,255,255,.22)}
.gs.after .label{color:#E7F6EF}
.gs.after .figure{color:#fff}
.gs.after .tl li{color:#fff}
.gs.after .tl li::after{background:rgba(255,255,255,.35)}
.gs.after .node.done{background:#fff;border-color:#fff}
.gs.after .node.done svg path{stroke:var(--ok-ink)}

/* ── Stages: the app's TabBar over a run of stages ── */
.stage-tabs{position:sticky;top:var(--nav-h);z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);margin:28px 0 8px}
.stage-tabs .tabs{border-bottom:0;margin-top:0}
.stage-tabs .tab{padding:14px 12px 12px;font-size:14px}
.stage-tabs .tab .mono{font-size:11px;color:var(--ink-2)}
.stage-tabs .tab.on .mono{color:var(--accent)}
.stages{margin-top:16px}
.stage{padding:56px 0 8px;scroll-margin-top:calc(var(--nav-h) + 56px)}
.stage+.stage{border-top:1px solid var(--line);margin-top:56px}
.st-text{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;margin-bottom:32px}
.st-text>*{min-width:0}
.st-num{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.st-num .mono{font-size:12px}
.st-text h3{font-size:26px;font-weight:700;line-height:1.2;letter-spacing:-0.02em}
.st-text p{color:var(--ink-2);font-size:16px}
.st-text p+p{margin-top:12px}
.st-text .stores{margin-top:16px}
/* FactLine: the contract page's "4 elevators covered · Jan 2026 – Jan 2027" row */
.facts{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.facts span{display:inline-flex;align-items:center;gap:8px}
.facts span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--ink-4)}
.cap{margin-top:12px;font-size:13px;color:var(--ink-2)}
.more{margin-top:56px}
/* A phone screenshot on a quiet surface */
.phone-stage{display:flex;justify-content:center;align-items:flex-start;gap:24px;flex-wrap:wrap;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:40px 24px}
.phone-stage .phone{width:260px}
.phone{border:1px solid var(--line);border-radius:28px;overflow:hidden;background:#fff;max-width:100%}
.phone img{width:100%;height:auto}

/* ── APPS ── */
.apps{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:64px;align-items:start;margin-top:40px}
.apps>*{min-width:0}
.applist{border-top:1px solid var(--line)}
.app-row{padding:24px 0;border-bottom:1px solid var(--line)}
.app-row h3{font-size:19px;font-weight:600;letter-spacing:-0.015em}
.app-row p{color:var(--ink-2);margin-top:6px}
.phones{display:grid;grid-template-columns:1fr 1fr;gap:16px;position:sticky;top:calc(var(--nav-h) + 32px)}
.phones.one{grid-template-columns:minmax(0,300px);justify-content:center}
.phones figure{margin:0}
.phone-cap{margin-top:10px;font-size:13px;color:var(--ink-2)}

/* App Store / Google Play: outline buttons */
.stores{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.store{height:40px;padding:0 14px 0 12px;gap:10px}
.store svg{width:18px;height:18px}
.store span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;font-size:13px;font-weight:500}
.store small{font-size:10.5px;font-weight:400;color:var(--ink-2)}

/* ── COMPARISON: Table.tsx density, quiet status dots, selected column ── */
.cmp-wrap{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:40px;background:#fff}
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th{font:400 13px/1.3 var(--f-sans);color:var(--ink-2);text-align:left;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--s1);vertical-align:bottom}
.cmp th.us{color:var(--accent);font-weight:600;background:var(--accent-soft);box-shadow:inset 0 2px 0 var(--accent)}
.cmp td{padding:14px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp tr:last-child td{border-bottom:0}
.cmp td.f{font-weight:500;color:var(--ink)}
.cmp td.us{background:#F5FAFE}
.cmp td.s{font-size:12px;color:var(--ink-2)}
.cmp td>span{display:inline-flex;align-items:baseline;gap:8px}
/* y / p / n: included, partly, not — as quiet dots */
.cmp i{width:6px;height:6px;border-radius:50%;flex:none;background:var(--ink-4);position:relative;top:-1px}
.cmp i.y{background:var(--ok)} .cmp i.p{background:var(--warn)} .cmp i.n{background:var(--ink-4)}
.cmp-note,.sources{font-size:14px;color:var(--ink-2);margin-top:16px;max-width:75ch}
ol.sources,ul.sources{padding-left:20px}
.sources li{margin-top:6px}

/* ── OUTCOMES: a SpecTable, not a stat strip ── */
.spec-t{border-top:1px solid var(--line)}
.spec-r{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line)}
.spec-r .v{font:700 36px/1 var(--f-display);letter-spacing:-0.03em}
.spec-r .k{font-size:17px;color:var(--ink-2);max-width:46ch}

/* ── ListRow: a linked row in a grouped surface (replaces link cards) ── */
.rows{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:40px}
.lrow{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) auto;gap:20px;align-items:center;padding:18px 20px;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none!important;transition:background-color .12s}
.lrow.has-img{grid-template-columns:56px minmax(0,220px) minmax(0,1fr) auto}
.lrow>*{min-width:0}
.lrow:last-child{border-bottom:0}
.lrow:hover{background:var(--s1)}
.lrow img{width:56px;height:36px;object-fit:cover;border-radius:var(--r-xs);border:1px solid var(--line)}
.lrow h3{font-size:17px;font-weight:600;letter-spacing:-0.01em;line-height:1.35;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.lrow .label{display:block;margin-bottom:4px}
.lrow p{font-size:14px;color:var(--ink-2)}
.lrow .go{font:500 13px/1.3 var(--f-sans);color:var(--accent);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}

/* "What LiftAuth doesn't do", side notes: a quiet grouped surface */
.fair{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 24px;margin-top:40px}
.fair h3{font-size:17px;font-weight:600;letter-spacing:-0.01em;margin-bottom:8px}
.fair p,.fair li{font-size:15px;color:var(--ink-2)}
.fair ul{padding-left:20px;display:flex;flex-direction:column;gap:6px;margin-top:4px}

/* New York: the DOB test cycles beside how LiftAuth keeps up with them */
.dob{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:64px;align-items:start;margin-top:40px}
.dob>*{min-width:0}
.dob-list{list-style:none;border-top:1px solid var(--line)}
.dob-list li{display:grid;grid-template-columns:96px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--line)}
.dob-list .cat{font:700 26px/1.1 var(--f-display);color:var(--ink);letter-spacing:-0.02em}
.dob-list .when{font:600 16px/1.35 var(--f-sans);color:var(--ink)}
.dob-list p{font-size:15px;color:var(--ink-2);margin-top:4px;max-width:46ch}
.dob-side{border:1px solid var(--line);border-radius:var(--r-card);padding:24px}
.dob-side h3{font-size:22px;letter-spacing:-0.02em;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:4px}

/* PRICING */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.plan{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px;display:flex;flex-direction:column}
.plan.best{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.plan .badge{align-self:flex-start;margin-bottom:14px}
.plan h3{font-size:20px;letter-spacing:-0.015em}
.plan .term{font-size:14px;color:var(--ink-2);margin-top:4px}
.plan .price{font:700 44px/1 var(--f-display);color:var(--ink);letter-spacing:-0.03em;margin-top:22px}
.plan .per{font-size:14px;color:var(--ink-2);margin-top:8px}
.plan .ticks{margin:24px 0 28px}
.plan .btn{margin-top:auto}
.ticks{list-style:none;display:flex;flex-direction:column;gap:10px}
.ticks li{font-size:15px;position:relative;padding-left:28px;color:var(--ink)}
.ticks li::before{content:"";position:absolute;left:0;top:3px;width:18px;height:18px;border-radius:50%;background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='m2 5.2 2 2 4-4.4' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat}
.addons{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;margin-top:40px}
.addon{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:18px 20px;border-bottom:1px solid var(--line)}
.addon:last-child{border-bottom:0}
.addon h4{font:600 15px/1.35 var(--f-sans);color:var(--ink)}
.addon p{font-size:14px;color:var(--ink-2);margin-top:2px}
.addon .from{font-size:14px;color:var(--ink);font-weight:500;white-space:nowrap}
.addon .from{text-align:right}
.addon .from small{font-size:12px;font-weight:400;color:var(--ink-2)}
.bigco{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px}
.bigco h3{font-size:19px;letter-spacing:-0.015em}
.bigco p{font-size:15px;color:var(--ink-2);margin-top:4px}

/* PROSE (guides, articles) */
.prose{font-size:17px;line-height:1.7;color:var(--ink-2)}
.prose>*+*{margin-top:18px}
.prose>p,.prose>ul,.prose>ol{max-width:75ch}
.prose h2{font-size:26px;line-height:1.2;letter-spacing:-0.02em;margin-top:56px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose h3{font-size:19px;line-height:1.3;letter-spacing:-0.015em;margin-top:36px;scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose h2+*,.prose h3+*{margin-top:12px}
.prose a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose b,.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{padding-left:22px}
.prose li+li{margin-top:8px}
.prose table,.tablewrap table{width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:#fff;font-size:14px;line-height:1.5}
.prose th,.prose td{text-align:left;padding:12px 16px;vertical-align:top}
.prose thead th{background:var(--s1);color:var(--ink-2);font-weight:400;font-size:13px;border-bottom:1px solid var(--line)}
.prose tbody td{border-top:1px solid var(--line);color:var(--ink)}
.prose tbody tr:first-child td{border-top:0}
.prose td:first-child{font-weight:500}
.tablewrap{overflow-x:auto}
.callout{background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:20px 22px;font-size:16px}
.callout.warn{background:var(--warn-bg);border-color:#F2D59B}
.callout h4{font:600 15px/1.4 var(--f-sans);color:var(--ink);margin-bottom:6px}
.callout p+p{margin-top:8px}
.toc{border:1px solid var(--line);border-radius:var(--r-card);padding:18px 22px;font-size:15px}
.toc h4{font:600 11px/1.45 var(--f-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.toc ol{padding-left:20px}
.toc li+li{margin-top:6px}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--accent)}
/* A product in a "best of" list */
.tool{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px 26px;margin-top:16px}
.tool.us{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.tool h3{margin:0;font-size:21px;letter-spacing:-0.015em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tool .meta{font-size:14px;color:var(--ink-2);margin-top:6px}
.tool dl{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px 16px;margin-top:16px;font-size:15px;padding-top:14px;border-top:1px solid var(--line)}
.tool dt{font-weight:500;color:var(--ink)}
.tool dd{color:var(--ink-2)}
.tool p{font-size:15px;margin-top:12px}
.tool .src{font-size:13px;color:var(--ink-2);margin-top:12px}
/* LiftAuth beside "what it doesn't do" */
.sides{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.side{border:1px solid var(--line);border-radius:var(--r-card);padding:20px 22px;background:#fff}
.side.us{background:var(--s1)}
.side h4{font:600 11px/1.45 var(--f-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.side p{font-size:15px;margin:0}
/* The closing "Track this in LiftAuth" block on guides and articles */
.endcta{margin-top:56px;background:var(--s1);border:1px solid var(--line);border-radius:var(--r-card);padding:28px}
.endcta h3{font-size:22px;letter-spacing:-0.02em;margin-bottom:8px}
.endcta p{font-size:16px;color:var(--ink-2);max-width:60ch;margin-bottom:20px}
.endcta .row{display:flex;gap:8px;flex-wrap:wrap}

/* FAQ: a hairline list of disclosures */
.faq{margin-top:32px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font:600 16px/1.4 var(--f-sans);color:var(--ink);letter-spacing:-0.01em;padding:18px 0;min-height:44px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;margin-top:5px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%235E5E5A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat;transition:transform .12s}
.faq details[open] summary::after{transform:rotate(180deg)}
.faq details p{font-size:15px;color:var(--ink-2);padding-bottom:20px;max-width:65ch}

/* ── CTA + FORM ── */
.cta{background:var(--s1);scroll-margin-top:var(--nav-h)}
.cta-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.cta-grid>*{min-width:0}
.cta h2{font-size:34px;font-weight:700;letter-spacing:-0.025em;line-height:1.15;max-width:18ch}
.cta-copy h1{font-size:44px;line-height:1.1;letter-spacing:-0.03em;max-width:14ch;text-wrap:balance}
.cta-copy>p{color:var(--ink-2);margin-top:12px;font-size:16px;max-width:42ch}
.cta-steps{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:24px}
.cta-steps li{font-size:15px;position:relative;padding-left:18px;color:var(--ink-2)}
.cta-steps li::before{content:"";position:absolute;left:0;top:.65em;width:6px;height:6px;border-radius:50%;background:var(--ink-4)}
.cta-steps b{color:var(--ink);font-weight:600}
.cta-alt{font-size:14px;color:var(--ink-2);margin-top:24px}
.cf-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:28px}
.cf-card form{display:grid;gap:16px}
.cf-card [hidden]{display:none!important}
.cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cf-card label{display:grid;gap:6px;align-content:start}
.cf-card label>span{font:600 12px/1.4 var(--f-sans);color:var(--ink)}
.cf-card .opt{font-weight:400;color:var(--ink-2)}
.cf-card input,.cf-card select,.cf-card textarea{width:100%;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r-btn);background:#fff;font:400 14px/1.4 var(--f-sans);color:var(--ink);transition:border-color .12s,box-shadow .12s}
.cf-card textarea{height:auto;padding:10px 12px;resize:vertical;min-height:96px}
.cf-card select{-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%235E5E5A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.cf-card input::placeholder,.cf-card textarea::placeholder{color:var(--ink-3)}
.cf-card input:hover,.cf-card select:hover,.cf-card textarea:hover{border-color:var(--line-strong)}
.cf-card input:focus,.cf-card select:focus,.cf-card textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-edge)}
.cf-card [aria-invalid="true"]{border-color:var(--bad)}
.cf-card [aria-invalid="true"]:focus{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-bg)}
.cf-err,.cf-card label>.cf-err{font:500 12px/1.4 var(--f-sans);color:var(--bad)}
.cf-choice{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;margin:0;padding:0;min-width:0}
.cf-choice legend{font:600 12px/1.4 var(--f-sans);color:var(--ink);margin-bottom:6px;padding:0}
.cf-card .cf-choice label{display:flex;flex-direction:row;align-items:flex-start;gap:10px;background:#fff;border:1px solid var(--line);border-radius:var(--r-btn);padding:12px 14px;cursor:pointer}
.cf-card .cf-choice label>span{font:500 14px/1.35 var(--f-sans)}
.cf-card .cf-choice label:hover{border-color:var(--line-strong)}
.cf-card .cf-choice label:has(input:checked){background:var(--accent-soft);border-color:var(--accent)}
.cf-card .cf-choice label:has(input:focus-visible){box-shadow:0 0 0 2px var(--accent-edge)}
.cf-card .cf-choice input{width:auto;height:auto;margin:2px 0 0;accent-color:var(--accent);box-shadow:none}
.cf-card .cf-choice input:focus{box-shadow:none}
.cf-choice small{display:block;font-weight:400;color:var(--ink-2);font-size:12px;margin-top:2px}
.cf-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.cf-submit{justify-self:start}
.cf-submit:disabled{opacity:.6;cursor:progress}
.cf-status{font-size:13px;color:var(--ink-2)}
.cf-status:empty{display:none}
.cf-status.err{color:var(--bad)}
.cf-fine{font-size:12px;color:var(--ink-2)}
.cf-done{text-align:center;padding:40px 10px;outline:none}
.cf-done h3{font-size:22px;margin:16px 0 8px}
.cf-done p{color:var(--ink-2)}
.cf-tick{width:48px;height:48px;border-radius:50%;background:var(--ok-bg);color:var(--ok-ink);display:inline-flex;align-items:center;justify-content:center;font-size:22px;font-weight:700}

/* ── FOOTER ── */
footer{background:#fff;padding:64px 0 32px;border-top:1px solid var(--line)}
.cta+footer,section.cta~footer{border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:48px}
.foot-logo{height:22px;width:auto}
.foot-about{font-size:13px;color:var(--ink-2);margin-top:14px;max-width:28ch}
.foot-contact{margin-top:12px;font-size:13px;display:flex;flex-direction:column;gap:4px}
.foot-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.foot-col{display:flex;flex-direction:column;gap:8px}
.foot-h{font:600 11px/1.45 var(--f-sans);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);margin:0 0 4px}
.foot-col a{font-size:13px;color:var(--ink);line-height:1.4}
.foot-col a:hover{color:var(--accent)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-2)}

/* ── RESPONSIVE ── */
@media (max-width:1080px){
  .hero h1{font-size:48px}
  .split,.apps,.cta-grid,.st-text,.dob{grid-template-columns:1fr;gap:28px}
  .split .sticky,.phones{position:static}
  .phones{max-width:600px}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  :root{--gutter:16px}
  .nav-in{gap:12px}
  .nav-links,.nav-right .si{display:none}
  .nav-burger{display:inline-flex}
  .nav-right .btn{height:44px;padding:0 14px}
  .topnav.menu-open .nav-links{display:flex;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;align-items:stretch;height:auto;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-dropdown);padding:8px 16px 16px;gap:0;max-height:calc(100vh - var(--nav-h));overflow-y:auto}
  .topnav.menu-open .nav-links>a,.topnav.menu-open .nav-dd-btn{height:48px;border-bottom:1px solid var(--line);margin:0;padding:0 4px;width:100%;font-size:15px;justify-content:space-between}
  .topnav.menu-open .nav-links>a[aria-current],.topnav.menu-open .nav-dd-btn.is-cur{border-bottom-color:var(--line)}
  .topnav.menu-open .nav-links>a.nav-si-m{display:flex}
  .nav-dd{height:auto}
  .mega{position:static;width:auto;box-shadow:none;border:0;padding:4px 0 8px;grid-template-columns:1fr}
  .mega a{padding:10px 4px}
  .hero{padding:40px 0 56px}
  .hero.photo{padding:64px 0;background:linear-gradient(rgba(9,14,26,.82),rgba(9,14,26,.82)),var(--hero-img-sm) center/cover no-repeat}
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .hero h1{font-size:38px;letter-spacing:-0.03em}
  .hero .lead{font-size:17px}
  .hero-cta .btn{height:44px;flex:1 1 auto}
  .hero-stage{margin-top:36px}
  .phero{padding:40px 0 48px}
  .phero h1{font-size:34px}
  .cta-copy h1{font-size:34px}
  .rail{display:none}
  .app{grid-template-columns:1fr}
  .page{padding:16px 16px 4px}
  .filters,.hide-n{display:none!important}
  .reg-bar{margin-top:14px}
  /* register rows stack below the breakpoint, as the app's do */
  .rt thead{display:none}
  .rt,.rt tbody,.rt tr,.rt td{display:block;width:100%}
  .rt tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
  .rt tr:last-child{border-bottom:0}
  .rt td{border:0;padding:0;width:auto}
  .rt td.c-name{grid-column:1}
  .rt td.c-due{grid-column:2;grid-row:1 / span 2;align-self:center}
  .rt td.c-tag{grid-column:1}
  .auditor{font-size:12px;max-width:100%}
  /* recreated app pieces reflow instead of scrolling */
  .shot-scroll[role=img]{overflow:hidden}
  .mini{min-width:0}
  .band{padding:14px 16px}
  .dh{flex-wrap:wrap;align-items:flex-start}
  .dh h4{font-size:18px;flex-wrap:wrap;gap:6px 10px}
  .banner{margin:16px 0 12px;padding:14px}
  .banner b{font-size:15px}
  .factline{gap:2px 16px}
  .seg+.seg{display:none}
  .book{padding:10px}
  .book-card{padding:16px}
  .book-top{flex-direction:column;gap:12px}
  .book-top h4{font-size:20px}
  .bk-spec{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding:14px}
  .cal-legend{flex-wrap:wrap;gap:6px 14px}
  .cal-grid{grid-template-columns:40px repeat(5,minmax(0,1fr))}
  .cal-grid>.tm{padding:4px 4px;font-size:10.5px}
  .ev{left:2px;right:2px;padding:3px 4px;font-size:11px}
  .partners .wrap{flex-direction:column;align-items:flex-start;gap:14px}
  .partners-row{gap:24px}
  .partners-row img{height:20px}
  section{padding:64px 0}
  .sec-h,.h2,.cta h2{font-size:28px}
  .sec-sub{font-size:15px}
  .ba{grid-template-columns:1fr}
  .gs{padding:18px}
  .gs-h .figure{font-size:26px}
  .stage{padding-top:44px;scroll-margin-top:calc(var(--nav-h) + 52px)}
  .stage+.stage{margin-top:40px}
  .st-text{gap:16px;margin-bottom:24px}
  .st-text h3{font-size:22px}
  .st-text p{font-size:15px}
  .stage-tabs{margin-left:calc(var(--gutter) * -1);margin-right:calc(var(--gutter) * -1);padding:0 var(--gutter)}
  .stage-tabs .tab{padding:12px 10px 10px;font-size:13px;min-height:44px}
  .phone-stage{padding:24px 16px}
  .phone-stage .phone{width:220px}
  .irow{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .incl{grid-template-columns:1fr}
  .cmp-wrap{border:0;border-radius:0;overflow:visible;background:transparent}
  .cmp thead{display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
  .cmp tr{border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:10px;overflow:hidden;background:#fff}
  .cmp td{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:14px;border-bottom:1px solid var(--line)}
  .cmp tr td:last-child{border-bottom:0}
  .cmp td.f{background:var(--s1);font-weight:600}
  .cmp td[data-col]::before{content:attr(data-col);color:var(--ink-2);font-size:13px;flex:none;max-width:45%}
  .cmp td>span{text-align:right;justify-content:flex-end}
  .cmp td.us{background:#F5FAFE}
  .cmp td.s{display:block}
  .spec-r{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .spec-r .v{font-size:30px}
  .spec-r .k{font-size:15px}
  .lrow,.lrow.has-img{grid-template-columns:minmax(0,1fr);gap:6px;align-items:start;padding:16px}
  .lrow.has-img{grid-template-columns:48px minmax(0,1fr);gap:6px 14px}
  .lrow.has-img img{width:48px;height:32px;grid-row:span 3}
  .lrow.has-img>*:not(img){grid-column:2}
  .plans,.sides{grid-template-columns:1fr}
  .addon{flex-direction:column;gap:6px}
  .addon .from{text-align:left}
  .tool dl{grid-template-columns:1fr;gap:2px}
  .tool dd{margin-bottom:10px}
  .prose{font-size:16px}
  .prose h2{font-size:23px}
  .endcta{padding:22px}
  .endcta .btn{height:44px}
  .cf-card{padding:18px}
  .cf-row,.cf-choice{grid-template-columns:1fr}
  .cf-card input,.cf-card select{height:44px}
  .cf-submit{justify-self:stretch;height:44px}
  .foot-links{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-col{gap:0}
  .foot-col a{padding:13px 0}
  .foot-h{margin-bottom:0}
  .store{height:44px}
  a.arrow{min-height:44px}
  .phones{gap:10px}
  /* The demo page puts the form right after its heading on small screens,
     ahead of the trial details. */
  .cta-grid.form-first{display:flex;flex-direction:column;gap:0}
  .form-first .cta-copy{display:contents}
  .form-first .cf-card{order:1;margin-top:24px}
  .form-first .cta-steps,.form-first .fair,.form-first .cta-alt{order:2}
  .form-first .cta-steps{margin-top:32px}
}
@media (max-width:560px){
  .dob-list li{grid-template-columns:1fr;gap:4px}
}
@media (max-width:420px){
  .hero h1{font-size:34px}
  .phone{border-radius:20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important}
  html{scroll-behavior:auto}
}

/* Building manager pages take the building manager app's forest green
   (building_web/src/index.css) in place of the contractor blue. */
body.theme-green{--accent:#3A6B52;--accent-hover:#2E5441;--accent-soft:#E4EFEA;--accent-edge:#C5DDD0}
.theme-green .cmp td.us{background:#F3F8F5}