:root{--ink:#16293f;--navy:#1f3a5f;--accent:#1f8a70;--accent-dark:#176e59;--amber:#d08c1d;--amber-tint:#fbf1dd;
--red:#b3261e;--red-tint:#f8e4e2;--blue:#3a6ea5;--blue-tint:#e5eef8;--muted:#5b6675;--bg:#f7f8fa;--line:#e3e7ee;
--night:#101b2e;--paper:#fff;--accent-tint:#e3f2ee;--radius:12px;--radius-sm:8px;
--font:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* ---- Motion -------------------------------------------------------------
   Premium here means restraint: nothing bounces, nothing slides in from the
   side, nothing waits for JavaScript. Four things, all CSS, all degrading to
   the plain page where a browser does not support them:
     1. a cross-fade between pages (View Transitions),
     2. smooth scrolling for in-page links,
     3. a small lift under the cursor on anything clickable,
     4. cards easing in as they enter the viewport (scroll-driven animation).
   Every one of them is switched off for a visitor who has asked their system
   for reduced motion — see the block at the end. */
@view-transition{navigation:auto}
html{scroll-behavior:smooth;background:var(--bg)}
/* No flash. The outgoing page is left alone at full opacity and the incoming
   one fades in over the top of it, so at every moment of the transition the
   viewer is looking at a page rather than at the background between two. The
   earlier version faded the old page out as the new one came in, which showed
   the page background through the gap for a few frames — the flash. */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:am-in .34s cubic-bezier(.33,0,.2,1) both}
@keyframes am-in{from{opacity:0}to{opacity:1}}
@keyframes am-lift{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

a,.btn,summary{transition:color .18s ease,background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease,opacity .18s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(22,41,63,.16)}
.btn:active{transform:translateY(0);box-shadow:none}
.card{transition:transform .22s cubic-bezier(.16,.6,.28,1),box-shadow .22s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 12px 32px rgba(22,41,63,.10)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* The hero settles once, on arrival. */
/* The hero, arriving. The headline is uncovered from the baseline up rather
   than faded in — the way a line of type is revealed on a printed page — and
   everything under it comes up a beat later, each element out of a soft focus.
   Long and decelerating: the headline takes 2.4s on a curve that spends most of its time slowing
   down, which is what separates considered from hurried. Runs at every screen
   size; the reduced-motion block at the foot of this file turns the whole lot
   off for anyone whose system asks for less, leaving the plain page. */
.hero h1{animation:am-reveal 2.4s cubic-bezier(.22,1,.36,1) both}
@keyframes am-reveal{
  from{opacity:0;transform:translateY(10px);clip-path:inset(0 0 100% 0)}
  to{opacity:1;transform:none;clip-path:inset(0 0 -14% 0)}
}
.hero .lede,.hero .ctas,.hero .resp{animation:am-settle 1.5s cubic-bezier(.14,.86,.2,1) both}
@keyframes am-settle{
  from{opacity:0;transform:translateY(12px);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}
}
.hero .lede{animation-delay:.55s}.hero .ctas{animation-delay:.95s}.hero .resp{animation-delay:1.3s}

/* Cards and steps ease in as they come into view. Guarded by @supports so a
   browser without scroll-driven animations simply shows them, never blank. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .card,ol.steps li,.plans>*{animation:am-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes am-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
  }
}

@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}
  .btn:hover,.card:hover{transform:none}
}
body{margin:0;font-family:var(--font);font-size:17px;line-height:1.55;color:var(--ink);background:var(--bg)}
a{color:var(--accent-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
h1{font-size:2.4rem}h2{font-size:1.6rem;margin-top:1.6em}h3{font-size:1.15rem}
p{margin:0 0 1em}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);padding:8px 12px;z-index:10}
.skip:focus{left:8px;top:8px}
/* The public site wears the same navy as the application's own front door:
   a dark bar and a dark hero, light everywhere below. Colour only — no page,
   section, wording or link changed (Philip, 22 Aug 2026). */
header.top{background:var(--navy);border-bottom:1px solid var(--navy)}
/* A little more air above and below the bar: at 64px the buttons sat almost
   on the top edge of the window (Philip, 22 Aug 2026). */
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:18px 0}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.brand img{width:36px;height:36px}
.brand .a{color:#fff}.brand .b{color:#5fd0b2}
nav.main{flex:1 1 auto;min-width:0}
nav.main ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:nowrap;align-items:center;justify-content:center}
.brand,.acts{flex:0 0 auto}
nav.main a{display:block;padding:8px 9px;white-space:nowrap;border-radius:var(--radius-sm);color:#dfe6f0;text-decoration:none;font-size:.95rem}
nav.main a:hover{background:rgba(255,255,255,.1);color:#fff}
nav.main a.cur{color:#fff;font-weight:700;background:rgba(255,255,255,.12)}
.acts{display:flex;gap:8px;align-items:center}
.btn{display:inline-block;white-space:nowrap;padding:10px 18px;border-radius:var(--radius-sm);font-weight:700;text-decoration:none;border:1px solid transparent;cursor:pointer;font:inherit;font-weight:700;line-height:1.3}
.btn.p{background:var(--accent);color:#fff}.btn.p:hover{background:var(--accent-dark)}
.btn.s{background:var(--paper);color:var(--navy);border-color:var(--paper)}.btn.s:hover{background:var(--blue-tint)}
.btn.g{background:transparent;color:var(--navy);border-color:var(--line)}
details.menu{display:none;position:relative}
details.menu .menu-cta{display:none}
/* The open menu is a panel over the page, not a block that shoves it down, and
   a tap anywhere outside closes it. The backdrop is a fixed pseudo-element on
   the summary itself, so the close is a plain <details> toggle with no script
   — which keeps the strict content-security policy intact (Philip, 22 Aug). */
details.menu[open] summary::before{content:"";position:fixed;inset:0;z-index:40}
details.menu nav{position:absolute;top:calc(100% + 10px);right:0;z-index:50;
  min-width:min(62vw,268px);max-height:calc(100vh - 110px);overflow:auto;
  background:#1b3352;border:1px solid rgba(255,255,255,.16);border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);padding:4px 18px 18px}
details.menu[open] nav{animation:am-menu .2s cubic-bezier(.16,.7,.24,1) both}
@keyframes am-menu{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
header.top{position:relative;z-index:30}
details.menu summary{list-style:none;cursor:pointer;padding:8px 12px;border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-sm);font-weight:700;color:#fff}
details.menu summary::-webkit-details-marker{display:none}
details.menu ul{list-style:none;margin:0;padding:8px 0 0;display:flex;flex-direction:column}
/* The small-screen menu opens inside the navy bar, so its links have to be
   light: they were still the body ink colour, which is navy on navy and
   invisible (Philip, 22 Aug 2026). */
details.menu a{display:block;padding:12px 4px;color:#fff;text-decoration:none;border-top:1px solid rgba(255,255,255,.18)}
details.menu li:first-child a{border-top:0}
details.menu a:hover,details.menu a:focus-visible{color:#5fd0b2}
details.menu a.cur{color:#5fd0b2;font-weight:700}
details.menu summary:hover{background:rgba(255,255,255,.1)}
details.menu[open] summary{border-color:rgba(255,255,255,.7)}
details.menu ul{padding-bottom:10px}
/* The page ends where its last section ends: a dark section must meet the dark
   footer with no pale band between them, so the bottom padding lives on the
   section rather than on main. */
main{padding:0}
main>section:last-child{padding-bottom:56px}
.hero{padding:64px 0 56px;background:linear-gradient(180deg,#1f3a5f 0%,#16293f 100%);color:#fff;margin-bottom:8px}
/* The landing page's band fills the window, so the section beneath it is not
   half-showing at the foot of the first screen. It grows past that when the
   copy needs more room. */
.hero-home{min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);display:flex;align-items:center;padding:48px 0 64px;margin-bottom:0}
.hero-home>.wrap{width:100%}
/* Every page but the landing page gets the same depth of navy, whatever the
   length of its heading and standfirst, so moving between them does not make
   the band jump up and down. The content sits at the middle
   of it: at the foot, a short standfirst left a strange empty field above it
   (Philip, 23 Aug 2026). */
.hero:not(.hero-home){min-height:460px;display:flex;align-items:center;padding:64px 0 56px}
.hero:not(.hero-home)>.wrap{width:100%}
.hero:not(.hero-home) .lede{max-width:74ch}
.hero h1{font-size:3rem;max-width:16ch;color:#fff}
.hero .lede{font-size:1.2rem;max-width:62ch;color:#dfe6f0}
.hero .note{color:#b9c6d8}
.hero .resp{background:rgba(255,255,255,.08);color:#eaf1ff;border-left-color:#5fd0b2}
.hero .btn.g{color:#fff;border-color:rgba(255,255,255,.5)}
.hero .btn.s{background:#fff;color:var(--navy);border-color:#fff}
.hero a{color:#bfe6da}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0}
.note{color:var(--muted);font-size:.95rem;max-width:70ch}
.resp{border-left:4px solid var(--accent);padding:10px 16px;background:var(--accent-tint);border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink);max-width:72ch}
section{padding:32px 0}
section.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
section.dark{background:var(--night);color:#e9edf3}
section.dark h2,section.dark h3{color:#fff}section.dark a{color:#8fd3c0}
.grid{display:grid;gap:20px 40px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* Two columns of running prose need a wider gutter than two cards do: at 20px
   the eye runs from the end of one line into the start of the next column's
   (Philip, 22 Aug 2026). */
.grid.two{gap:28px 64px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.card h3{margin-top:0}
.card p:last-child{margin-bottom:0}
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
ol.steps li{counter-increment:s;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 20px 64px;position:relative}
ol.steps li::before{content:counter(s);position:absolute;left:20px;top:18px;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;display:grid;place-items:center}
.lead{font-size:1.15rem;max-width:66ch}
.prose{max-width:72ch}
.prose h2{font-size:1.35rem;margin-top:1.8em}
.prose ul{padding-left:1.2em}
table{border-collapse:collapse;width:100%;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;font-size:.95rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--bg);font-weight:700}
tr:last-child td{border-bottom:0}
td.num,th.num{font-variant-numeric:tabular-nums;text-align:right}
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.85rem;font-weight:700;border:1px solid}
.pill.crit{color:var(--red);border-color:var(--red);background:var(--red-tint)}
.pill.major{color:#8a5a0c;border-color:var(--amber);background:var(--amber-tint)}
.pill.minor{color:var(--blue);border-color:var(--blue);background:var(--blue-tint)}
.pill.adv{color:var(--accent-dark);border-color:var(--accent);background:var(--accent-tint)}
.finding{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:grid;gap:8px;max-width:760px}
.finding .k{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.finding .ev{background:var(--bg);border-radius:var(--radius-sm);padding:10px 12px;font-size:.95rem}
/* pricing */
fieldset.toggle{border:1px solid var(--navy)}
.toggle{display:inline-flex;border:1px solid var(--navy);border-radius:999px;padding:3px;background:var(--paper);margin:12px 0 28px}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle label{padding:8px 18px;border-radius:999px;cursor:pointer;font-weight:700;color:var(--navy)}
.toggle input:checked+label{background:var(--navy);color:#fff}
.toggle input:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
.pricing .an{display:none}
.pricing:has(#int-annual:checked) .an{display:inline}
.pricing:has(#int-annual:checked) .mo{display:none}
.pricing:has(#int-annual:checked) a.mo,.pricing:has(#int-annual:checked) span.mo{display:none}
.pricing:has(#int-annual:checked) a.an{display:inline-block}
.plans{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));align-items:stretch}
.plan{display:flex;flex-direction:column;position:relative}
.plan.pop{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan .tag{position:absolute;top:-12px;left:20px;background:var(--accent);color:#fff;font-size:.8rem;font-weight:700;padding:3px 10px;border-radius:999px}
.plan .price{font-size:2rem;font-weight:700;letter-spacing:-.02em;margin:6px 0 0;font-variant-numeric:tabular-nums}
.plan .price small{font-size:1rem;font-weight:400;color:var(--muted)}
.plan .per{color:var(--muted);font-size:.9rem;margin-bottom:12px;min-height:1.4em}
.plan ul{padding-left:1.1em;margin:12px 0 16px;font-size:.95rem}
.plan ul li{margin:4px 0}
.plan .allow{font-size:.95rem;color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:6px 0 4px}
.plan .allow b{font-variant-numeric:tabular-nums}
.plan .cta{margin-top:auto}
.plan .cta .btn{width:100%;text-align:center}
details.faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0 16px;margin:8px 0}
details.faq summary{padding:14px 0;font-weight:700;cursor:pointer}
details.faq p{max-width:72ch}
/* forms */
form.f{display:grid;gap:14px;max-width:620px}
form.f label{display:grid;gap:6px;font-weight:700;font-size:.95rem}
form.f input,form.f select,form.f textarea{font:inherit;padding:10px 12px;border:1px solid #aab2bf;border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);width:100%}
form.f textarea{min-height:140px}
form.f .chk{display:flex;gap:10px;align-items:flex-start;font-weight:400}
form.f .chk input{width:auto;margin-top:4px}
form.f .row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.mt{margin-top:20px}
.after-cards{margin-top:36px}
.brand .fw{color:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.err{background:var(--red-tint);border:1px solid var(--red);color:#7a1a14;padding:12px 16px;border-radius:var(--radius-sm);max-width:620px}
.ok{background:var(--accent-tint);border:1px solid var(--accent);padding:12px 16px;border-radius:var(--radius-sm);max-width:620px}
.sev{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
/* When a dark section is the last thing on a page, it meets the dark footer
   with no pale band between them. */
footer{background:var(--night);color:#c9d1dc;padding:40px 0 32px;font-size:.92rem;margin-top:0}
footer a{color:#e9edf3}
footer .cols{display:grid;gap:24px;grid-template-columns:2fr 1fr 1fr 1fr}
footer ul{list-style:none;margin:0;padding:0}footer li{margin:4px 0}
footer h3{color:#fff;font-size:.95rem;margin-bottom:8px}
footer .legal{border-top:1px solid #2a3a52;margin-top:24px;padding-top:16px;color:#aab4c2;font-size:.85rem}
@media (max-width:1040px){
  nav.main{display:none}
  details.menu{display:block}
  .bar{flex-wrap:wrap}
  details.menu[open]{flex-basis:100%}
  /* The bar is the logo and the Menu button, nothing else. The green button
     used to stay in the row and ended up stranded beside the open menu panel,
     vertically centred against a column of links. Both of the things it led to
     — Pricing and Sign in — are in the menu itself, and the hero's own
     "See pricing" sits a few centimetres below (Philip, 22 Aug 2026). */
  /* The two buttons come out of the bar and the call to action moves to the
     foot of the open menu, full width, where a thumb reaches it and it is the
     last thing read rather than something stranded beside the list. */
  .acts>.btn{display:none}
  details.menu .menu-cta{display:block;margin:14px 0 4px;text-align:center;padding:14px 18px;font-size:1rem}
  .acts{margin-left:auto}
  /* The panel floats, so the bar keeps its ordinary centred alignment. */
  .bar{justify-content:space-between;align-items:center}
  details.menu[open]{flex-basis:auto}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .wrap{padding:0 22px}
  body{font-size:16px}
  h1,.hero h1{font-size:2rem}
  .hero{padding:40px 0 24px}
  /* On a phone the standfirsts wrap to very different depths, and a band
     tall enough for the longest would swallow the first screen on the rest.
     Here the rule is a floor, not a uniform height. */
  .hero:not(.hero-home){min-height:240px;padding:40px 0 32px}
  .hero-home{min-height:0;padding:40px 0 40px}
  form.f .row{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  .hero .ctas .btn{flex:1 1 auto;text-align:center}
  .acts .btn,details.menu summary{padding:8px 12px;font-size:.95rem}
  .brand{font-size:1.15rem}
}
@media print{header.top,footer,.acts{display:none}}