/* appsg.ai public website
   Brand: deep navy #14143C, accent red #E63E2E, cream #FAF8F3.
   Restrained corporate register: serif headlines, generous rules, red used
   only where we want the eye to land (badges, primary CTAs, key numbers). */

:root{
  --navy:#14143c; --navy-2:#1e1e50; --navy-3:#2a2a5a;
  --red:#e63e2e; --red-2:#c8331c;
  --cream:#faf8f3; --cream-2:#f4f1e8; --paper:#ffffff;
  --ink:#14143c; --ink-2:#33334f; --muted:#5a5d6b; --muted-2:#7c7f8c;
  --line:#e6e2d6; --line-2:#d4d0c2; --line-dark:rgba(255,255,255,.14);
  --ok:#2f6f48;
  --serif:'Source Serif 4','Source Serif Pro',Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --wrap:1160px; --r:8px; --r-lg:14px;
  /* one spacing scale for everything that sits under a heading, so the
     gap is a decision made once here rather than per page. */
  --gap-title:10px;    /* small heading (card, step) to its own text   */
  --gap-lede:18px;     /* section heading to its lede paragraph        */
  --gap-head:48px;     /* a whole head block to the content it opens   */
  --gap-head-sm:30px;  /* same, where the head is a sub-head in a section */
  --gap-group:52px;    /* above a sub-head that follows a previous block */
  --nav-gap:28px;      /* between the header's brand, links and actions   */
  --shadow:0 1px 2px rgba(20,20,60,.04),0 8px 28px rgba(20,20,60,.07);
  --shadow-lg:0 24px 60px rgba(20,20,60,.14);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none !important}
a{color:var(--navy);text-decoration:none}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;letter-spacing:-.015em;margin:0;color:var(--ink);line-height:1.15}
h1{font-size:clamp(34px,5.2vw,56px)}
h2{font-size:clamp(26px,3.4vw,38px)}
h3{font-size:20px}
p{margin:0 0 1em}
/* The gap under a heading is set once, by heading rank, not per page. */
h1+p,h2+p{margin-top:var(--gap-lede)}
h3+p,h4+p,h3+ul,h3+ol,h4+ul,h4+ol{margin-top:var(--gap-title)}
/* components that zero or set their own top margin still owe the gap
   when they sit directly under a heading */
h3+p.calc-note,h4+p.calc-note,.guide-sec h3+.guide-steps{margin-top:var(--gap-title)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r)}
/* The page gutter. Anything that also carries .wrap must set its vertical
   padding with padding-top / padding-bottom, NEVER the `padding:` shorthand:
   the shorthand resets these 24px to zero, they are on the same element and
   equal specificity means the later rule wins. That is what put the hero
   headline flush against the screen edge on mobile. */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ── buttons ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:var(--r);border:1px solid transparent;
  font:600 15px/1 var(--sans);cursor:pointer;text-align:center;transition:background .16s,border-color .16s,transform .16s,box-shadow .16s}
.btn:hover{transform:translateY(-1px)}
.btn-accent{background:var(--red);color:#fff;box-shadow:0 6px 18px rgba(230,62,46,.24)}
.btn-accent:hover{background:var(--red-2);box-shadow:0 10px 24px rgba(230,62,46,.3)}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{background:transparent;color:var(--navy);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--navy);background:rgba(20,20,60,.03)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:var(--cream-2)}
.btn-outline-light{background:transparent;color:#fff;border-color:var(--line-dark)}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.btn-block{display:flex;width:100%}
.btn-lg{padding:16px 30px;font-size:16px}
.lnk{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.lnk:hover{color:var(--red)}

/* ── header ──────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:100;background:rgba(250,248,243,.88);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.nav.is-stuck{border-bottom-color:var(--line);box-shadow:0 2px 14px rgba(20,20,60,.05)}
.nav-in{display:flex;align-items:center;gap:var(--nav-gap);height:70px}
.nav-brand{flex:0 0 auto;display:flex;align-items:center}
.nav-brand img{height:40px;width:auto;max-width:100%;object-fit:contain;object-position:left center}
.nav-links{display:flex;gap:26px;margin-left:6px;flex:1 1 auto}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--red)}
.nav-links a.is-on{border-bottom-color:var(--red);color:var(--ink)}
.nav-cta{display:flex;align-items:center;gap:18px;flex:0 0 auto}
.nav-cta .btn{padding:10px 20px;font-size:14.5px}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer;flex:0 0 auto}
.nav-burger span{display:block;width:22px;height:2px;background:var(--navy);transition:transform .2s,opacity .2s}
.nav-burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-drawer{display:flex;flex-direction:column;gap:2px;padding:10px 24px 22px;border-top:1px solid var(--line);background:var(--cream)}
.nav-drawer a{padding:12px 0;font-size:16px;font-weight:500;border-bottom:1px solid var(--line)}
.nav-drawer .btn{margin-top:14px;border-bottom:0}

/* ── sections ────────────────────────────────────────── */
.sec{padding:88px 0}
.sec-tight{padding:64px 0}
.sec-cream2{background:var(--cream-2)}
.sec-paper{background:var(--paper)}
.sec-navy{background:var(--navy);color:#fff}
.sec-navy h2,.sec-navy h3,.sec-navy h4{color:#fff}
.sec-navy p{color:#c9c9de}
.eyebrow{display:inline-block;font:700 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin-bottom:16px}
.sec-navy .eyebrow{color:#ff8a7c}
.sec-head{max-width:720px;margin-bottom:var(--gap-head)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.tight{margin-bottom:var(--gap-head-sm)}
.sec-head.next{margin-top:var(--gap-group)}
.sec-head p{font-size:18px;color:var(--muted);margin:var(--gap-lede) 0 0}
/* A page's leading heading has to be an h1 for search engines and for the AI
   crawlers that read structure before prose. The design has no oversized page
   title, so the tag changes and the type scale does not: .page-h1 renders at
   the h2 size it replaced. Tag and size are separate decisions. */
.page-h1{font-size:clamp(26px,3.4vw,38px)}
.sec-navy .sec-head p{color:#b9b9d2}
/* Standing lede paragraph, for heads built without the .sec-head wrapper.
   Spacing above it comes from the h1+p / h2+p rule, so it matches. */
.lede{font-size:18px;color:var(--muted);max-width:62ch}
.sec-navy .lede{color:#b9b9d2}
.lede-sm{font-size:16.5px;color:var(--muted);max-width:65ch}

/* ── hero ────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(900px 480px at 82% -8%,rgba(230,62,46,.08),transparent 60%),
  radial-gradient(700px 500px at 8% 0,rgba(20,20,60,.07),transparent 55%),var(--cream)}
.hero-in{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-top:76px;padding-bottom:84px}
.hero h1{text-wrap:balance}
.hero h1 .hl{color:var(--red);white-space:nowrap}
.hero-lede{font-size:19px;color:var(--muted);max-width:560px;margin:var(--gap-lede) 0 30px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-micro{font-size:13.5px;color:var(--muted-2);margin:16px 0 0}
.hero-micro b{color:var(--ink-2);font-weight:600}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--paper);border:1px solid var(--line);
  border-radius:999px;padding:7px 16px 7px 8px;font-size:13px;font-weight:500;color:var(--ink-2);margin-bottom:22px;box-shadow:var(--shadow)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(230,62,46,.14)}

.trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.5)}
.trustbar-in{display:flex;flex-wrap:wrap;gap:14px 44px;justify-content:center;padding-top:20px;padding-bottom:20px;font-size:13.5px;color:var(--muted);font-weight:500}
.trustbar-in span{display:inline-flex;align-items:center;gap:9px}
.trustbar-in svg{flex:0 0 auto;color:var(--red)}

/* ── phone mock ──────────────────────────────────────── */
.mock{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.mock-top{display:flex;align-items:center;gap:10px;padding:13px 18px;background:var(--navy);color:#fff}
.mock-avatar{width:30px;height:30px;border-radius:50%;background:var(--red);display:grid;place-items:center;font:700 12px var(--sans);color:#fff}
.mock-top b{font-size:14px;font-weight:600}
.mock-top small{display:block;font-size:11px;color:#9fa0c4;font-weight:400}
.mock-body{padding:18px;display:flex;flex-direction:column;gap:12px;background:#f7f5ef}
.bub{max-width:84%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.5;box-shadow:0 1px 2px rgba(20,20,60,.06)}
.bub-in{background:#fff;border-bottom-left-radius:4px;align-self:flex-start}
.bub-out{background:#e8f3ea;border-bottom-right-radius:4px;align-self:flex-end;color:#1d3a26}
.bub .cite{display:block;margin-top:7px;font-size:11.5px;color:var(--muted-2);border-top:1px dashed var(--line-2);padding-top:6px}
.bub .who{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-bottom:4px;font-weight:700}
.mock-gate{margin:0;padding:14px 18px;background:#fff;border-top:1px solid var(--line);font-size:13px;color:var(--ink-2)}
.mock-gate b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red);margin-bottom:5px}
.mock-gate .row{display:flex;gap:8px;margin-top:10px}
.mock-gate .row span{font-size:12px;font-weight:600;padding:6px 12px;border-radius:6px}
.mock-gate .yes{background:var(--navy);color:#fff}
.mock-gate .no{background:var(--cream-2);color:var(--ink-2);border:1px solid var(--line)}

/* ── generic cards ───────────────────────────────────── */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow)}
.card h3{margin-bottom:var(--gap-title)}
.card p{color:var(--muted);font-size:14.5px;margin:0}
.card-ico{width:38px;height:38px;border-radius:9px;background:var(--cream-2);color:var(--red);display:grid;place-items:center;margin-bottom:16px;border:1px solid var(--line)}
.sec-navy .card{background:rgba(255,255,255,.05);border-color:var(--line-dark)}
.sec-navy .card p{color:#b9b9d2}
.sec-navy .card-ico{background:rgba(255,255,255,.08);border-color:var(--line-dark);color:#ff8a7c}

/* ── leaks / problem ─────────────────────────────────── */
.leak{border-left:3px solid var(--red);padding:4px 0 4px 22px}
.leak h3{font-size:18px;margin-bottom:var(--gap-title)}
.leak p{color:var(--muted);font-size:15px;margin:0}

/* ── steps ───────────────────────────────────────────── */
.steps{counter-reset:s;display:grid;gap:22px 26px;grid-template-columns:repeat(auto-fit,minmax(216px,1fr))}
.step{position:relative;padding-top:22px;border-top:2px solid var(--line-2)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:-14px;left:0;background:var(--cream);padding-right:12px;
  font:700 13px/1 var(--mono);color:var(--red);letter-spacing:.08em}
.sec-paper .step::before{background:var(--paper)}
.step h3{font-size:19px;margin-bottom:var(--gap-title)}
.step p{color:var(--muted);font-size:15px;margin:0}

/* ── agents ──────────────────────────────────────────── */
.agents{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
.agent{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;transition:border-color .16s,transform .16s,box-shadow .16s}
.agent:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow)}
.agent b{display:block;font-size:14.5px;font-weight:600;margin-bottom:5px}
.agent span{font-size:13px;color:var(--muted);display:block}
.agent .tag{display:inline-block;margin-bottom:11px;font:700 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:4px;background:var(--cream-2);color:var(--muted)}
.agent .tag.ext{background:rgba(230,62,46,.09);color:var(--red-2)}

/* ── channels ────────────────────────────────────────── */
.chan{display:flex;gap:16px;align-items:flex-start;padding:22px 0;border-bottom:1px solid var(--line-dark)}
.chan:last-child{border-bottom:0}
.chan-ico{flex:0 0 auto;width:40px;height:40px;border-radius:9px;background:rgba(255,255,255,.07);border:1px solid var(--line-dark);display:grid;place-items:center;color:#ff8a7c;font-weight:700;font-size:13px}
.chan b{display:block;font-size:15.5px;margin-bottom:4px;color:#fff}
.chan p{margin:0;font-size:14px;color:#b9b9d2}

/* ── value / calculator ──────────────────────────────── */
.calc{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.calc-in{padding:34px}
.calc-out{padding:34px;background:var(--navy);color:#fff;display:flex;flex-direction:column;justify-content:center}
.calc-f{margin-bottom:22px}
.calc-f label{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:10px}
.calc-f output{font:700 15px/1 var(--sans);color:var(--red)}
.calc-f input[type=range]{width:100%;accent-color:var(--red);height:22px}
.calc-note{font-size:12.5px;color:var(--muted-2);margin:0}
.calc-out .big{font-family:var(--serif);font-size:clamp(38px,5vw,54px);line-height:1;color:#fff;margin:6px 0 4px}
.calc-out .lab{font:700 11.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#ff8a7c}
.calc-out .sub{font-size:14px;color:#c9c9de;margin:0}
.calc-split{display:flex;gap:28px;margin:26px 0 22px;padding-top:22px;border-top:1px solid var(--line-dark)}
.calc-split div{flex:1}
.calc-split b{display:block;font-family:var(--serif);font-size:24px;font-weight:500;color:#fff}
.calc-split span{font-size:12.5px;color:#9fa0c4}

/* ── governance list ─────────────────────────────────── */
.gov{display:grid;grid-template-columns:repeat(2,1fr);gap:0 44px}
.gov div{padding:18px 0;border-bottom:1px solid var(--line)}
.gov b{display:block;font-size:15px;font-weight:600;margin-bottom:4px}
.gov p{margin:0;font-size:14px;color:var(--muted)}

/* ── pricing ─────────────────────────────────────────── */
.toggle{display:inline-flex;align-items:center;gap:4px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px;margin:0 auto 12px;box-shadow:var(--shadow)}
.toggle button{border:0;background:none;font:600 14px/1 var(--sans);color:var(--muted);padding:9px 20px;border-radius:999px;cursor:pointer;transition:background .16s,color .16s}
.toggle button.is-on{background:var(--navy);color:#fff}
.toggle .save{font-size:11.5px;font-weight:700;color:var(--red);margin-left:6px}
.plans{display:grid;gap:18px;align-items:start;grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.plan{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.plan.is-featured{border-color:var(--red);box-shadow:0 0 0 1px var(--red),var(--shadow-lg);padding-top:34px}
.plan-badge{position:absolute;top:-1px;left:50%;transform:translate(-50%,-50%);background:var(--red);color:#fff;
  font:700 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:7px 14px;border-radius:999px;white-space:nowrap}
.plan-name{font-size:19px;margin-bottom:var(--gap-title)}
.plan-tag{font-size:13.5px;color:var(--muted);min-height:40px;margin:0 0 18px}
.plan-price{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.plan-price .amt{font-family:var(--serif);font-size:36px;font-weight:600;letter-spacing:-.02em;line-height:1.05}
.plan-price .per{font-size:14px;color:var(--muted)}
.plan-sub{font-size:12.5px;color:var(--muted-2);margin:7px 0 20px;min-height:18px}
.plan-sub .save{color:var(--ok);font-weight:600}
.plan .btn{margin-bottom:18px}
.plan-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.plan-list li{font-size:13.8px;color:var(--ink-2);padding-left:24px;position:relative;line-height:1.45}
.plan-list li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:8px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.plan-list li.head{padding-left:0;font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:10px}
.plan-list li.head::before{display:none}
.plan-foot{margin-top:auto}
.plan-custom{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:34px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between;margin-top:20px}
.plan-custom h3{color:#fff;font-size:24px;margin-bottom:var(--gap-title)}
.plan-custom p{color:#b9b9d2;margin:0;max-width:620px;font-size:15px}

/* ── comparison matrix ───────────────────────────────── */
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);-webkit-overflow-scrolling:touch}
table.cmp{border-collapse:collapse;width:100%;min-width:860px}
.cmp th,.cmp td{padding:13px 16px;text-align:center;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
.cmp thead th{background:var(--paper);border-bottom:2px solid var(--line-2)}
.cmp .rowlab{text-align:left;font-weight:500;color:var(--ink-2);position:sticky;left:0;background:var(--paper);z-index:1;white-space:nowrap}
.cmp .grp td{background:var(--cream-2);font:700 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:10px 16px}
.cmp .pname{font-size:15px;font-weight:700;font-family:var(--serif)}
.cmp .pprice{font-size:19px;font-weight:700;margin-top:2px}
.cmp .psub{font-size:11px;color:var(--muted-2);font-weight:400;margin-top:2px}
.cmp .btn{margin-top:10px;width:100%;padding:9px 12px;font-size:13.5px}
.cmp .y{color:var(--ok);font-weight:700}
.cmp .n{color:var(--line-2)}
.cmp .on{background:rgba(230,62,46,.045)}
.cmp thead th.on{box-shadow:inset 0 3px 0 var(--red)}

/* ── faq ─────────────────────────────────────────────── */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;position:relative;font-size:17px;font-weight:600;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:27px;width:9px;height:9px;border-right:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .ans{padding:0 40px 22px 0;color:var(--muted);font-size:15.5px}
.faq .ans p:last-child{margin-bottom:0}

/* ── final cta ───────────────────────────────────────── */
.final{text-align:center;padding-top:92px;padding-bottom:92px}
.final h2{font-size:clamp(30px,4vw,44px);max-width:760px;margin:0 auto var(--gap-lede)}
.final p{max-width:600px;margin:0 auto 30px;font-size:17.5px}
.final .hero-cta{justify-content:center}

/* ── forms ───────────────────────────────────────────── */
.formcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;box-shadow:var(--shadow)}
.field{display:block;margin-bottom:18px}
.field span{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;font:400 15px/1.5 var(--sans);color:var(--ink);
  background:var(--paper);border:1px solid var(--line-2);border-radius:var(--r)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(20,20,60,.08)}
.field textarea{min-height:120px;resize:vertical}
.hp{position:absolute;left:-9999px}
.alert{padding:14px 18px;border-radius:var(--r);margin-bottom:22px;font-size:14.5px}
.alert-ok{background:#ecf4ee;border:1px solid #c4dfcc;color:#1d4a2e}
.alert-err{background:#fef2f0;border:1px solid #f3c5bf;color:#95231b}

/* ── inline links ────────────────────────────── */
main p a:not(.btn), main .gov a, main .faq a{color:var(--red);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
main p a:not(.btn):hover, main .gov a:hover{color:var(--red-2)}
.sec-navy p a:not(.btn){color:#ff8a7c}

/* ── footer ──────────────────────────────────────────── */
.foot{background:var(--navy);color:#c9c9de;padding:64px 0 0;font-size:14px}
.foot-in{display:grid;grid-template-columns:2.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px}
.foot-brand img{height:24px;width:auto;filter:brightness(0) invert(1);opacity:.9}
.foot-brand p{color:#9fa0c4;font-size:13.5px;line-height:1.6;max-width:400px;margin:14px 0 0}
.foot-brand .foot-parent{font-size:13px;color:#7d7e9e;margin-top:12px}
.foot-col h4{color:#fff;font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;margin-bottom:14px}
.foot-col a{display:block;color:#b9b9d2;padding:6px 0;font-size:14px}
.foot-col a:hover{color:#fff}
.foot-bar{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;border-top:1px solid var(--line-dark);padding-top:22px;padding-bottom:18px;font-size:12.5px;color:#7d7e9e}
.foot-legal{padding-bottom:30px;font-size:11.5px;line-height:1.65;color:#8a8bae}
.foot-legal p{margin:0;max-width:900px}
.foot-legal p+p{margin-top:8px}
.foot-legal a{color:#b9b9d2;text-decoration:underline;text-underline-offset:2px}
.foot-legal a:hover{color:#fff}

/* ── reveal ──────────────────────────────────────────── */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.js .rv.on{opacity:1;transform:none}

/* ── responsive ──────────────────────────────────────── */
@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:44px;padding-top:56px;padding-bottom:64px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .foot-in{grid-template-columns:1fr 1fr;gap:32px}
}
@media (max-width:860px){
  :root{--nav-gap:14px}
  .nav-links,.nav-cta .lnk{display:none}
  .nav-burger{display:flex;margin-right:-8px}
  .nav-cta{margin-left:auto;flex:0 0 auto}
  /* Below about 355px there is no gutter left to trim, so let the logo
     scale rather than the page grow a sideways scroll. */
  .nav-brand{flex:0 1 auto;min-width:0}
  .sec{padding:64px 0}
  .g3,.g2,.gov,.calc{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .calc-out{border-top:1px solid var(--line)}
}
@media (max-width:700px){
  .plans{grid-template-columns:1fr}
}
@media (max-width:560px){
  :root{--nav-gap:10px}
  .g4{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
  .nav-cta .btn{padding:9px 14px;font-size:13.5px}
  .calc-split{flex-direction:column;gap:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .btn:hover,.agent:hover{transform:none}
}

/* ── roster (hero image, and the whole positioning) ──── */
.roster{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.roster-top{display:flex;align-items:center;gap:10px;padding:15px 22px;background:var(--navy);color:#fff}
.roster-top b{font-size:14.5px;font-weight:600;display:block}
.roster-top small{display:block;font-size:11px;color:#9fa0c4;font-weight:400}
.roster-body{padding:6px 22px 12px}
.rrow{display:grid;grid-template-columns:34px 1fr auto;gap:6px 14px;align-items:center;padding:13px 0;border-top:1px solid var(--line)}
.roster-body .rrow:first-child{border-top:0}
.rrow .av{grid-row:span 2;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  font:600 11.5px/1 var(--sans);background:var(--cream-2);color:var(--muted);border:1px solid var(--line)}
.rrow.is-digital .av{background:var(--red);color:#fff;border-color:var(--red)}
.rrow .rname{font-size:15px;font-weight:600;color:var(--ink)}
.rrow .rtitle{grid-column:2;font-size:13px;color:var(--muted);line-height:1.35}
.rrow .chip{grid-row:span 2;font:700 9.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 10px;border-radius:999px;white-space:nowrap;border:1px solid var(--line-2);color:var(--muted)}
.rrow .chip.is-digital{background:var(--red);border-color:var(--red);color:#fff}
.rrow .chip.is-training{background:var(--cream-2);border-color:var(--line-2);color:var(--ink-2)}
.roster-foot{margin:0;padding:14px 22px;border-top:1px solid var(--line);background:var(--surface-2);
  font-size:13px;color:var(--muted);font-style:italic}

/* ── employment states ───────────────────────────────── */
.states{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.state{padding:26px 24px;border-right:1px solid var(--line);position:relative}
.state:last-child{border-right:0}
.state .state-n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--red);
  color:#fff;font:700 12px/1 var(--sans);margin-bottom:14px}
.state b{display:block;font-size:17px;font-weight:600;margin-bottom:6px;font-family:var(--serif)}
.state span{font-size:14.5px;color:var(--muted)}

/* ── role cards ──────────────────────────────────────── */
.rolegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:16px}
.rolecard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:20px;transition:border-color .16s,transform .16s,box-shadow .16s;color:inherit}
.rolecard:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow);text-decoration:none}
.rolecard b{display:block;font-size:15.5px;font-weight:600;margin-bottom:6px}
.rolecard .rb{font-size:13.5px;color:var(--muted);flex:1 1 auto}
.rolecard .tag{display:inline-block;margin-bottom:12px;font:700 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:4px;background:var(--cream-2);color:var(--muted);align-self:flex-start}
.rolecard .tag.ext{background:rgba(230,62,46,.09);color:var(--red-2)}
.rolecard .more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:13px;font-weight:600;color:var(--red)}
.rolecard:hover .more{gap:9px}

/* ── one role page ───────────────────────────────────── */
.jobmeta{display:flex;flex-wrap:wrap;gap:10px 34px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:26px 0 34px}
.jobmeta div{font-size:14px}
.jobmeta b{display:block;font:700 10.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.duties{list-style:none;margin:var(--gap-title) 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.duties li{position:relative;padding-left:30px;font-size:16px;color:var(--ink-2)}
.duties li::before{content:"";position:absolute;left:0;top:8px;width:15px;height:8px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}

@media (max-width:860px){
  .states{grid-template-columns:1fr}
  .state{border-right:0;border-bottom:1px solid var(--line)}
  .state:last-child{border-bottom:0}
}

/* credits shown as the technical detail under the conversation headline */
.plan-list .plan-detail{display:block;font-size:11.5px;color:var(--muted-2);margin-top:2px}

/* ── new-hire onboarding portal mock ─────────────────── */
.portal{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden}
.portal-top{display:flex;flex-direction:column;gap:10px;padding:15px 20px;background:var(--navy);color:#fff}
.portal-top b{font-size:14.5px;font-weight:600;display:block}
.portal-top small{display:block;font-size:11px;color:#9fa0c4}
.portal-prog{display:block;height:4px;border-radius:2px;background:rgba(255,255,255,.18)}
.portal-prog span{display:block;height:100%;border-radius:2px;background:var(--red)}
.portal-video{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:132px;padding:16px 18px;
  background:linear-gradient(150deg,#1e1e50 0%,#2a2a5a 55%,#14143c 100%)}
.portal-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35)}
.portal-play::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%);
  border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.portal-cap{font-size:12.5px;line-height:1.45;color:#e8e8f2;background:rgba(0,0,0,.34);padding:7px 10px;border-radius:5px;align-self:flex-start}
.portal-quiz{padding:16px 20px;border-top:1px solid var(--line);background:var(--surface)}
.portal-quiz b{display:block;font:700 10px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.portal-quiz p{margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink)}
.portal-quiz .opt{display:block;font-size:13px;color:var(--ink-2);padding:7px 11px;border:1px solid var(--line);
  border-radius:6px;margin-bottom:6px;background:var(--paper)}
.portal-quiz .opt.is-right{border-color:var(--ok);background:rgba(47,111,72,.07);color:var(--ok);font-weight:600}
.portal-ask{padding:15px 20px;border-top:1px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column;gap:9px}
.portal-ask-q{align-self:flex-end;max-width:88%;font-size:13px;background:var(--surface);border:1px solid var(--line);
  padding:8px 11px;border-radius:12px 12px 4px 12px;color:var(--ink-2)}
.portal-ask-a{max-width:92%;font-size:13px;background:#e8f3ea;color:#1d3a26;padding:9px 12px;border-radius:12px 12px 12px 4px;line-height:1.5}
.portal-ask-a b{display:block;font:700 10px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:#3d6b4c;margin-bottom:5px}

/* ── onboarding guide + prepare page ─────────────────── */
.call-out{display:block;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:0 var(--r) var(--r) 0;padding:20px 24px;margin:28px 0 0}
.call-out b{display:block;font-size:16px;margin-bottom:6px}
.call-out span{font-size:15px;color:var(--muted)}

.prep{border-top:1px solid var(--line)}
.prep-row{display:flex;gap:24px;align-items:flex-start;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}
.prep-row b{display:block;font-size:16px;font-weight:600;margin-bottom:4px}
.prep-row span{font-size:14.5px;color:var(--muted)}
.prep-tag{flex:0 0 auto;font:700 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  padding:6px 10px;border-radius:4px;background:var(--cream-2);color:var(--muted);white-space:nowrap}
.prep-tag.is-need{background:rgba(230,62,46,.09);color:var(--red-2)}

.guide-wrap{display:grid;grid-template-columns:210px 1fr;gap:56px;align-items:start}
.guide-index{position:sticky;top:96px}
.guide-index a{display:flex;gap:10px;align-items:baseline;padding:8px 0;font-size:14px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.guide-index a:last-child{border-bottom:0}
.guide-index a span{font:700 11px/1 var(--mono);color:var(--red);flex:0 0 14px}
.guide-index a:hover{color:var(--red);text-decoration:none}

.guide-sec{padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid var(--line);scroll-margin-top:96px}
.guide-sec:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.guide-n{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:0 0 10px}
.guide-sec h3{font-size:clamp(22px,2.8vw,29px);margin-bottom:var(--gap-title)}
.guide-lede{font-size:17px;color:var(--muted);max-width:60ch}
.guide-steps{counter-reset:g;list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.guide-steps li{counter-increment:g;position:relative;padding-left:40px}
.guide-steps li::before{content:counter(g);position:absolute;left:0;top:1px;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font:700 11px/1 var(--sans);background:var(--cream-2);color:var(--ink-2);border:1px solid var(--line)}
.guide-steps b{display:block;font-size:15.5px;font-weight:600;margin-bottom:3px}
.guide-steps span{font-size:14.5px;color:var(--muted)}
.guide-done{margin:24px 0 0;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);font-size:14.5px;color:var(--ink-2)}
.guide-done b{font:700 10px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ok);margin-right:8px}

@media (max-width:860px){
  .guide-wrap{grid-template-columns:1fr;gap:32px}
  .guide-index{position:static;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;background:var(--surface)}
  .prep-row{flex-direction:column;gap:8px}
}

/* ── pricing: make the step-up and the real differences legible ───────── */
.plan-list li.up{font-weight:600;color:var(--ink)}
.plan-list li.up::before{border-left-color:var(--red);border-bottom-color:var(--red)}
.cmp tr.is-same td, .cmp tr.is-same .rowlab{color:var(--muted-2)}
.cmp tr.is-same .y{color:var(--muted-2)}
.cmp .rowlab .all{display:block;font:600 9.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--line-2);margin-top:3px}

/* sample induction module, shown in place of the mock once a file exists */
.portal-video.has-video{padding:0;min-height:0;background:#000;display:block}
.portal-video.has-video video{display:block;width:100%;height:auto;max-height:260px;object-fit:cover}

/* The two directions a custom worker can face, on roles.php. Deliberately not
   .card: these are a pair of statements with a worked example each, not a grid
   of features, and they carry the same tag chips as the role cards above them
   so the connection to "customer facing / internal" reads without a caption. */
.dir{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:26px;box-shadow:var(--shadow)}
.dir .tag{display:inline-block;margin-bottom:14px;font:700 10px/1 var(--sans);
  letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:4px;
  background:var(--cream-2);color:var(--muted)}
.dir .tag.ext{background:rgba(230,62,46,.09);color:var(--red-2)}
.dir h3{font-size:18px}
.dir p{color:var(--muted);font-size:15px;margin:0}
.dir h3+p{margin-top:var(--gap-title)}
.dir .eg{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-2);
  font-size:14.5px;color:var(--ink-2)}
.dir .eg b{display:block;font:700 10.5px/1 var(--sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:7px}

/* ── policy documents ─────────────────────────────────
   Two columns: the policy list parked in a sticky sidebar, the document in a
   reading measure beside it. The top gap is deliberately much tighter than a
   marketing section, because a policy page has no hero to breathe under and the
   reader is here to read, not to be introduced. */
.legal-sec{padding:30px 0 72px}
.legal-grid{display:grid;grid-template-columns:212px minmax(0,1fr);gap:0 56px;align-items:start}
.legal-side{position:sticky;top:88px}          /* clears the 70px sticky header */
.legal-side-h{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin:0 0 12px}
.legal-nav{display:flex;flex-direction:column;gap:1px}
.legal-nav a{font-size:14px;font-weight:500;color:var(--muted);padding:7px 0 7px 13px;
  border-left:2px solid var(--line);line-height:1.4}
.legal-nav a:hover{color:var(--red);border-left-color:var(--line-2)}
.legal-nav a.is-on{color:var(--ink);font-weight:600;border-left-color:var(--red)}

.legal{max-width:74ch;font-size:16.5px;color:var(--ink-2)}
.legal h1{font-size:clamp(28px,3.8vw,38px)}
.legal h2{font-size:clamp(20px,2.4vw,25px);margin-top:var(--gap-group)}
.legal h3{font-size:18px;margin-top:var(--gap-head-sm)}
.legal p,.legal li{line-height:1.72}
.legal ul,.legal ol{margin:var(--gap-title) 0 1em;padding-left:22px}
.legal li{margin-bottom:9px}
.legal a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
.legal a:hover{color:var(--red)}
.legal-updated{margin-top:var(--gap-title);font-size:14px;color:var(--muted-2)}
.legal-draft{margin:var(--gap-head-sm) 0;padding:14px 18px;border-radius:var(--r);
  background:#fdf3f1;border:1px solid #f3c9c2;color:#8d2c1d;font-size:14.5px}
.legal-toc{margin:var(--gap-head-sm) 0;padding:18px 22px;background:var(--cream-2);
  border:1px solid var(--line);border-radius:var(--r-lg);font-size:14.5px}
.legal-toc strong{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:10px}
.legal-toc ol{margin:0;padding-left:20px}
.legal-toc li{margin-bottom:5px;color:var(--ink-2)}
.legal-more{margin-top:var(--gap-group);padding-top:20px;border-top:1px solid var(--line);
  font-size:14.5px;color:var(--muted)}

/* Below the sidebar breakpoint the list goes back to a strip above the document.
   Sticky is dropped with it: a sticky bar on a phone eats the screen. */
@media (max-width:900px){
  .legal-grid{grid-template-columns:minmax(0,1fr);gap:0}
  .legal-side{position:static;top:auto;padding-bottom:20px;margin-bottom:var(--gap-head-sm);
    border-bottom:1px solid var(--line)}
  .legal-side-h{margin-bottom:10px}
  .legal-nav{flex-direction:row;flex-wrap:wrap;gap:6px 20px}
  .legal-nav a{padding:3px 0;border-left:0;border-bottom:2px solid transparent}
  .legal-nav a.is-on{border-left:0;border-bottom-color:var(--red)}
}
@media (max-width:560px){
  .legal-sec{padding:22px 0 56px}
  .legal{font-size:16px}
}

/* Callouts inside a policy document: the AI output disclaimer and the
   cross-border processing notice. Like .legal-tbl these were styled from
   app.css and arrived unstyled, sitting flush against their heading with no
   box at all. They are the clauses a reader most needs to actually see, and a
   disclaimer that does not look like one is a weaker disclaimer, so they get a
   visible box rather than being folded into body copy. Navy, not the red of
   .legal-draft, which means something else entirely. */
.legal-callout{margin:var(--gap-head-sm) 0;padding:16px 20px;border-radius:var(--r);
  background:var(--cream-2);border:1px solid var(--line);border-left:3px solid var(--navy);
  font-size:15.5px;color:var(--ink-2)}
.legal-callout p{margin:0}
.legal-callout p+p{margin-top:10px}
.legal-callout strong{color:var(--ink)}

/* Tables in the policy documents. These carried their styling from app.css
   before the pages moved, so they arrived unstyled. Below 700px the table
   becomes its own scroll container: a sub-processor table cannot be made
   narrow enough to fit a phone without becoming unreadable, and it must not
   push the whole page sideways. */
.legal-tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin:var(--gap-title) 0 1.2em}
.legal-tbl th,.legal-tbl td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
.legal-tbl th{background:var(--cream-2);color:var(--ink);font-weight:600;font-size:13px}
.legal-tbl td{color:var(--ink-2)}
@media (max-width:700px){
  .legal-tbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* ── experience centre, contact page ──────────────────
   Sits directly under the lede, above the secondary "other ways in" rows,
   because "there is a real place you can walk into" is the strongest thing in
   that column. Kept deliberately light: a top and bottom rule rather than a
   card, so it reads as part of the column instead of competing with the form
   across from it. Every row is operator data and every row can be absent. */
.xc{margin-top:var(--gap-head-sm);padding:20px 0;
  border-top:2px solid var(--navy);border-bottom:1px solid var(--line)}
.xc-h{font:700 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);margin:0 0 14px}
.xc-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px 34px;align-items:start}
.xc-addr{font-style:normal;font-size:15.5px;line-height:1.65;color:var(--ink-2);margin:0}
.xc-dir{display:block;margin-top:8px;font-size:14px}
.xc-meta{display:grid;gap:14px;margin:0;align-content:start}
.xc-meta div{margin:0}
.xc-meta dt{font:700 10.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:5px}
.xc-meta dd{margin:0;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.xc-meta dd a{color:var(--navy);font-weight:600}
.xc-meta dd a:hover{color:var(--red)}
@media (max-width:560px){
  .xc-body{grid-template-columns:1fr;gap:16px}
}

/* Dial code and number, one field to the reader.
   Scoped as .field span.phone-row on purpose: `.field span` at line 283 sets
   display:block for the field's own label text and outranks a bare .phone-row,
   which silently stacks the two controls instead of putting them side by side.
   Same specificity trap as the app's form labels. */
.field span.phone-row{display:grid;grid-template-columns:minmax(104px,auto) minmax(0,1fr);
  gap:8px;margin-bottom:0}
.field span.phone-row select{min-width:0}