@font-face{font-family:"IBM Plex Mono";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
:root{
/* Legacy tokens; the brand guidelines block further down overrides colours and fonts. */
--blue:#1E4C7A;--blue-on-navy:#2BB673;--sage:#F5F9F7;
--page:#F5F9F7;--graphite:#3B4754;--amber:#B45309;--red:#B42318;/* amber and red for status only, always with words */
--font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;--text:#3B4754;--muted:#3B4754;--bg:var(--sage);--border:rgba(59,71,84,.18);
--ok-bg:#EAF6EF;--ok-fg:var(--green);--warn-bg:#FFFFFF;--warn-fg:#B45309;--bad-fg:#B42318;--bad-bg:#FFFFFF;--radius:10px;--shadow:0 1px 2px rgba(14,42,71,.06),0 2px 8px rgba(14,42,71,.06)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--text);background:var(--page);font-size:14px;line-height:1.65}
img{max-width:100%;display:block}a{color:var(--green);text-underline-offset:2px}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
h1,h2,h3,.brand,.price{font-family:var(--font-head)}
h1,h2,h3{color:var(--navy-900);line-height:1.2;letter-spacing:-.015em;margin:0 0 16px}
h1{font-size:clamp(32px,5vw,50px)}h2{font-size:clamp(26px,3.4vw,34px)}h3{font-size:19px}
p{margin:0 0 16px}.lead{font-size:14px;color:var(--muted);max-width:640px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green);margin-bottom:12px;display:block}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px;z-index:9}
header.top{background:var(--navy-800);color:#fff;position:sticky;top:0;z-index:5}
header.top .wrap{display:flex;align-items:center;gap:24px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:22px}
.brand .logo{height:46px;width:auto;display:block}footer .brand .logo{height:52px}
nav.main{display:flex;gap:4px;margin-left:auto;align-items:center}
nav.main a{color:#FFFFFF;text-decoration:none;font-weight:500;padding:10px 14px;border-radius:6px;min-height:44px;display:flex;align-items:center}
nav.main a:hover,nav.main a[aria-current=page]{background:var(--navy-700);color:#fff}
nav.main a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--green)}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--navy-600);color:#fff;border-radius:6px;min-height:44px;padding:0 14px;font:inherit;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:8px;font-weight:600;text-decoration:none;border:2px solid transparent;font-size:16px;cursor:pointer;font-family:inherit}
.btn-accent{background:var(--navy-800);color:#fff}.btn-accent:hover{background:var(--navy-600);color:#fff}header .btn-accent,.band .btn-accent{background:#fff;color:var(--navy-800)}header .btn-accent:hover,.band .btn-accent:hover{background:var(--sage);color:var(--navy-900)}
.btn-ghost{border-color:var(--border);color:var(--navy-800);background:#fff}.btn-ghost:hover{border-color:var(--navy-600)}
.btn-light{border-color:#1E4C7A;color:#fff}.btn-light:hover{background:var(--navy-700);color:#fff}
nav.main .btn{margin-left:8px;padding:0 18px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.hero{background:linear-gradient(180deg,var(--sage),#fff);padding:72px 0 56px;border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.shot{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 32px rgba(14,42,71,.10);background:#fff}
.shot img{width:100%;height:auto}.shot.crop{aspect-ratio:16/11}.shot.crop img{height:100%;object-fit:cover;object-position:top left}
.shot figcaption,.cap{font-size:13px;color:var(--muted);padding:8px 12px;border-top:1px solid var(--border);background:var(--navy-50)}
section{padding:72px 0}section.alt{background:var(--bg)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow);border-top:4px solid var(--navy-800)}
.card p:last-child{margin:0}.card.acc{border-top-color:var(--green)}
.feature{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;padding:40px 0}
.feature.flip>:first-child{order:2}
ul.ticks{list-style:none;padding:0;margin:0 0 16px}ul.ticks li{padding-left:30px;position:relative;margin-bottom:10px}
ul.ticks li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;background:var(--assured-green);color:var(--navy-900);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:3px}
.pill{display:inline-block;border:1px solid var(--ok-fg);background:var(--ok-bg);color:var(--ok-fg);border-radius:999px;padding:4px 14px;font-weight:600;font-size:15px}
.pill.warn{border-color:var(--warn-fg);background:var(--warn-bg);color:var(--warn-fg)}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.compare .card h3{display:flex;gap:8px;align-items:center}
.band{background:var(--navy-800);color:#FFFFFF;padding:64px 0}.band h2{color:#fff}.band .lead{color:#EAF6EF}
.price-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:24px;align-items:stretch}
.price{font-size:42px;font-weight:700;color:var(--navy-900);line-height:1}.price small{font-size:16px;font-weight:500;color:var(--muted)}
.tag{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--ok-bg);color:var(--green);padding:3px 10px;border-radius:999px;margin-bottom:12px}
.bundle{margin-top:24px;display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
table.t{width:100%;border-collapse:collapse;background:#fff;font-size:16px}
table.t th,table.t td{padding:14px 16px;border-bottom:1px solid var(--border);text-align:left}
table.t th{background:var(--navy-50);color:var(--navy-900)}table.t td.c{text-align:center}
.tw{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
.faq details{background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:10px;padding:0 20px}
.faq summary{cursor:pointer;font-weight:600;padding:16px 0;min-height:48px}
form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-weight:600;margin:0 0 6px;font-size:15px}
.field{margin-bottom:18px}.hint{font-weight:400;color:var(--muted);font-size:14px}
input,select,textarea{width:100%;min-height:48px;border:1px solid #3B4754;border-radius:8px;padding:10px 12px;font:inherit;font-size:16px;background:#fff;color:var(--text)}
.hp{position:absolute;left:-5000px}
.notice{background:var(--info,var(--navy-50));border:1px solid var(--border);border-left:4px solid var(--green);padding:16px;border-radius:8px}
.prose{max-width:760px}.prose h2{font-size:24px;margin-top:36px}
footer{background:var(--navy-900);color:#EAF6EF;padding:48px 0 32px;font-size:15px}
footer a{color:#FFFFFF}.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
footer h2{color:#fff;margin:0 0 12px;font-size:15px;line-height:inherit;letter-spacing:normal}footer ul{list-style:none;padding:0;margin:0}footer li{margin-bottom:8px}
.legal{border-top:1px solid var(--navy-700);margin-top:32px;padding-top:20px;font-size:14px}
@media (max-width:900px){
 .hero-grid,.feature,.grid3,.price-grid,.compare,.fgrid{grid-template-columns:1fr}.feature.flip>:first-child{order:0}
 .hero{padding:48px 0 40px}section{padding:52px 0}.feature{gap:24px;padding:24px 0}
 .nav-toggle{display:inline-flex;align-items:center}
 nav.main{display:none;position:absolute;top:68px;left:0;right:0;background:var(--navy-800);flex-direction:column;align-items:stretch;padding:8px 16px 16px;border-top:1px solid var(--navy-700)}
 .nav-open nav.main{display:flex}nav.main .btn{margin:8px 0 0}
 form .row{grid-template-columns:1fr}.lead{font-size:14px}
}
ul.crosses li::before{content:"–";background:var(--warn-bg);color:var(--warn-fg)}

nav.main a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--blue-on-navy)}.band a:not(.btn){color:var(--blue-on-navy)}
.shot figcaption{background:var(--sage)}
nav.main a.btn-accent{color:var(--navy-800)}
header.top :focus-visible,footer :focus-visible,.band :focus-visible{outline-color:#2BB673}
/* utility classes (replace former inline styles, which the CSP blocks; !important keeps inline-style precedence) */
.u-top{align-items:start !important}.u-white{color:#fff !important}.f-blurb{margin-top:12px !important;max-width:380px !important}
.u-mt8{margin-top:8px !important}.u-mt16{margin-top:16px !important}.u-mt20{margin-top:20px !important}.u-mt28{margin-top:28px !important}
.u-mb4{margin:0 0 4px !important}.u-m0{margin:0 !important}.u-tall{min-height:50vh !important}.btn.u-full{width:100% !important}

/* S3-09 footer blurb */
footer .fgrid p{margin-top:12px;max-width:380px}

/* form states */
.err{display:block;color:var(--bad-fg);font-size:14px;font-weight:600;margin-top:6px}
[aria-invalid=true]{border-color:var(--bad-fg);border-width:2px}
.notice.ok{border-left-color:var(--green)}.notice.bad{border-left-color:var(--bad-fg)}
.slot{aspect-ratio:16/11;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:var(--sage);color:var(--muted);font-weight:600;border:2px dashed rgba(59,71,84,.18);border-radius:var(--radius)}
.brand-word{font-weight:700}
.shot.crop.pos-bottom img{object-position:bottom left}
.u-mb16{margin:0 0 16px !important}
/* green text sitting on sage: hero bands and .alt sections */
.hero .eyebrow,section.alt .eyebrow,.hero .pill,.hero .tag,section.alt .pill,section.alt .tag{color:var(--green-on-sage)}
.shot.phone{width:100%;max-width:320px;justify-self:center;margin-left:auto;margin-right:auto}
.shot figcaption.demo-cap{font-size:13px;line-height:1.4;color:var(--muted);padding:6px 12px}
.shot.crop{aspect-ratio:auto}.shot.crop img{aspect-ratio:16/11;height:auto;width:100%;object-fit:cover}
.shot picture{display:block}
@media (max-width:600px){.shot.crop.has-phone img{aspect-ratio:auto}}
.tw:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.narrow-only{display:none}.phoneset{gap:12px;padding:12px;background:var(--navy-50)}.phoneset img{width:100%;height:auto;border:1px solid var(--border);border-radius:8px}
@media (max-width:600px){.has-phoneset .wide-only{display:none}.has-phoneset .narrow-only{display:grid}}
/* brand update: green actions on light backgrounds; navy colourway unchanged */
code,kbd,samp,.ref{font-family:var(--font-mono);font-size:.94em}
.btn-accent{background:var(--green);color:#fff}.btn-accent:hover{background:var(--st-navy);color:#fff}
header .btn-accent,.band .btn-accent,nav.main a.btn-accent{background:#fff;color:var(--green)}header .btn-accent:hover,.band .btn-accent:hover,nav.main a.btn-accent:hover{background:#fff;color:var(--st-navy);border-color:var(--green)}
.btn-ghost{color:var(--green);background:#fff}.btn-ghost:hover{border-color:var(--green)}
.hero{background:linear-gradient(180deg,#fff,var(--page))}section.alt{background:#fff}
.card.acc{border-top-color:var(--green-large)}
.shot figcaption,.shot figcaption.demo-cap{background:var(--navy-50);color:var(--graphite)}
.slot{background:var(--navy-50);border-color:var(--border)}
/* calmer layout (S C: "looks a bit busy"): one page background, flat cards, steady spacing, quieter labels */
.hero{background:var(--page);border-bottom:0;padding:96px 0 88px}
section,section.alt{background:var(--page);padding:96px 0}
section+section{border-top:1px solid var(--border)}
.hero+section{border-top:1px solid var(--border)}
.card,.card.acc{border:1px solid var(--border);border-top:1px solid var(--border);box-shadow:none;padding:32px}
.grid3,.compare,.price-grid{gap:32px}
h2{margin-bottom:12px}h3{font-size:18px;margin-bottom:10px}
.section-intro{max-width:620px;margin:0 0 48px}
.lead{line-height:1.55}
.eyebrow{font-size:12px;letter-spacing:.1em;margin-bottom:14px}
.shot{box-shadow:0 1px 3px rgba(14,42,71,.08);border-color:var(--border)}
.feature{gap:72px;padding:56px 0}.feature+.feature{border-top:1px solid var(--border)}
ul.ticks li{padding-left:26px;margin-bottom:8px}
ul.ticks li::before{content:"✓";background:none;color:var(--green);width:auto;height:auto;font-size:17px;font-weight:800;margin-top:0;display:block}
ul.crosses li::before{content:"–";background:none;color:var(--graphite)}
.tag{background:none;padding:0;border-radius:0;letter-spacing:.1em;color:var(--graphite)}
.hero .tag,section.alt .tag{color:var(--graphite)}
.price{margin:8px 0 0}
.faq{max-width:760px}.faq details{border:0;border-bottom:1px solid var(--border);border-radius:0;background:none;padding:0;margin:0}
.tw{border-color:var(--border)}table.t th{background:#fff}
.band{padding:88px 0;border-top:0}
section.band+footer{border-top:0}
@media (max-width:900px){.hero{padding:56px 0 48px}section,section.alt{padding:64px 0}.band{padding:64px 0}.feature{gap:28px;padding:40px 0}.section-intro{margin-bottom:32px}.grid3,.compare,.price-grid{gap:20px}.card,.card.acc{padding:24px}}
.form-noscript{margin:0 0 16px;padding:12px 14px;border:1px solid rgba(59,71,84,.18);border-radius:8px;background:#F5F9F7;color:#3B4754}
/* ===== SureTrain brand guidelines v1.0 (S C, Oct 2026): the ONLY design source. Overrides everything above. =====
   Navy #0E2A47 headings, text, top bar. Assured Green #2BB673 = fills, badges, highlights and logo only, never text.
   Green text: --green-text #1A7F4F (small text and links on light backgrounds only); --green-large #178A50 (icons, large text >=24px).
   Amber #B45309 and Red #B42318 are for status only, always with words. Fonts: Manrope 800 headings, IBM Plex Sans body, IBM Plex Mono references. */
@font-face{font-family:"Manrope";font-style:normal;font-display:swap;font-weight:200 800;src:url(fonts/manrope-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-display:swap;font-weight:400;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-display:swap;font-weight:600;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
/* Brand exception (S C, 17 Oct): Fraunces Italic for the phrase "rail training" in the features hub heading only (.fhub-hero .fhl). Use nowhere else. */
@font-face{font-family:"Fraunces";font-style:italic;font-display:swap;font-weight:300 700;src:url(fonts/fraunces-latin-wght-italic.woff2) format("woff2")}
:root{
--st-navy:#0E2A47;--st-assured-green:#2BB673;--st-line-blue:#1E4C7A;--st-sage:#EAF6EF;--st-graphite:#3B4754;--st-mist:#F5F9F7;
--green-text:#1A7F4F;/* small green text and links on light backgrounds only */
--green-large:#178A50;/* icons and large text only */
--st-amber:#B45309;--st-red:#B42318;--st-border:rgba(59,71,84,.18);--st-field-border:#3B4754;--st-on-navy-muted:#EAF6EF;--st-line-blue-light:#EAF6EF;
--navy-900:var(--st-navy);--navy-800:var(--st-navy);--navy-700:var(--st-line-blue);--navy-600:var(--st-line-blue);--navy-50:var(--st-mist);
--green:var(--green-text);--green-on-sage:var(--green-text);--assured-green:var(--st-assured-green);
--blue:var(--st-line-blue);--blue-on-navy:var(--st-assured-green);--sage:var(--st-sage);--page:#FFFFFF;--graphite:var(--st-graphite);
--text:var(--st-navy);--muted:var(--st-graphite);--bg:var(--st-mist);--border:var(--st-border);
--ok-bg:var(--st-sage);--ok-fg:var(--green-text);--warn-bg:#FFFFFF;--warn-fg:var(--st-amber);--bad-fg:var(--st-red);--bad-bg:#FFFFFF;
--font:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--font-head:"Manrope",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;--radius:12px}
body{font-size:14px;color:var(--text);background:var(--page);font-family:var(--font)}
a{color:var(--green-text)}
h1,h2,h3{color:var(--st-navy);letter-spacing:-.02em;font-weight:800;font-family:var(--font-head)}
h1{font-size:clamp(34px,5vw,56px);line-height:1.08}h2{font-size:clamp(26px,3.4vw,38px);line-height:1.15}h3{font-size:20px;line-height:1.25}
.lead{color:var(--muted)}
.eyebrow,.hero .eyebrow,section.alt .eyebrow{color:var(--green-text);font-family:var(--font-head);font-size:13px;letter-spacing:.12em;font-weight:700}
/* navy top bar (guide p11 app header) */
header.top{background:var(--st-navy);border-bottom:0}
nav.main a{color:#FFFFFF}nav.main a:hover,nav.main a[aria-current=page]{background:var(--st-line-blue);color:#fff}
nav.main a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--st-assured-green)}
.nav-toggle{border-color:var(--st-line-blue)}
header.top :focus-visible,footer :focus-visible{outline-color:var(--st-assured-green)}
/* buttons: see PM ruling block at end of file */
.btn{border-radius:10px;font-weight:600}
.btn-accent{background:var(--st-navy);color:#fff;border-color:var(--st-navy)}
.btn-accent:hover{background:var(--st-line-blue);border-color:var(--st-line-blue);color:#fff}
header .btn-accent,nav.main a.btn-accent,.band .btn-accent{background:var(--green-text);border-color:var(--green-text);color:#fff}
header .btn-accent:hover,nav.main a.btn-accent:hover,.band .btn-accent:hover{background:var(--st-navy);border-color:#fff;color:#fff}
.btn-ghost,.btn-light{background:#fff;color:var(--st-navy);border-color:var(--st-navy)}.btn-ghost:hover,.btn-light:hover{background:var(--st-sage);border-color:var(--st-navy);color:var(--st-navy)}
/* hero: Sage Mist soft panel, assured-green rule as highlight */
.hero{background:var(--st-sage);color:var(--text);border-bottom:0}
.hero h1{color:var(--st-navy)}.hero .lead{color:var(--muted)}
.hero h1::after{content:"";display:block;width:88px;height:6px;border-radius:3px;background:var(--st-assured-green);margin-top:24px}
.hero .shot{border:1px solid var(--border)}
.hero+section{border-top:0}
/* sections and cards */
section{background:#fff}section+section{border-top:1px solid var(--border)}
section.alt{background:var(--st-mist)}
.card,.card.acc{background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:none}
.card.acc{border-top:4px solid var(--st-assured-green)}
.grid3{counter-reset:feat}
.grid3 .card.acc{counter-increment:feat;position:relative;padding-top:88px}
.grid3 .card.acc::before{content:"0" counter(feat);position:absolute;left:32px;top:30px;width:44px;height:44px;border-radius:10px;background:var(--st-sage);color:var(--st-navy);font-family:var(--font-head);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center}
.card p{color:var(--muted)}
ul.ticks li::before{color:var(--green-large)}ul.crosses li::before{color:var(--muted)}
.pill{border-color:var(--green-text);background:var(--st-sage);color:var(--green-text)}.pill.warn{border-color:var(--st-amber);background:var(--warn-bg);color:var(--st-amber)}
.hero .pill,section.alt .pill{color:var(--green-text)}
.tag,.hero .tag,section.alt .tag{color:var(--green-text)}
code,kbd,samp,.ref{font-family:var(--font-mono)}
/* pricing: Core card in Assurance Navy */
.price,.card .price{color:var(--st-navy);font-family:var(--font-head);font-weight:800;letter-spacing:-.02em}.price small{color:var(--muted);letter-spacing:0;font-family:var(--font);font-weight:400;display:block;margin-top:6px}
.price-grid .card h2{font-size:clamp(24px,2.4vw,28px)}
.price-grid>.card:first-child{background:var(--st-navy);border-color:var(--st-navy);color:#fff}
.price-grid>.card:first-child h2,.price-grid>.card:first-child h3,.price-grid>.card:first-child .price,.price-grid>.card:first-child .price small,.price-grid>.card:first-child p,.price-grid>.card:first-child li{color:#fff}
.price-grid>.card:first-child .tag{color:#FFFFFF}
.price-grid>.card:first-child ul.ticks li::before{color:var(--st-assured-green)}
.price-grid>.card:first-child a:not(.btn){color:#fff}
.price-grid>.card:first-child .btn-accent{background:var(--green-text);border-color:var(--green-text);color:#fff}
.price-grid>.card:first-child :focus-visible{outline-color:#fff}
/* closing band: navy panel */
.band{background:var(--st-navy);color:#fff;border-top:0;position:relative}
.band::before{content:none}
.band h2{color:#fff}.band .lead{color:var(--st-on-navy-muted)}.band a:not(.btn){color:#fff}
.band :focus-visible{outline-color:var(--st-assured-green)}
/* footer navy: uses logo-on-navy */
footer{background:var(--st-navy);color:var(--st-on-navy-muted)}footer a{color:#fff}.legal{border-top-color:var(--st-line-blue)}
/* tables, captions, notices */
table.t th{background:var(--st-mist);color:var(--st-navy)}
.shot{border-color:var(--border);border-radius:12px;box-shadow:none}
.shot figcaption,.shot figcaption.demo-cap,.cap{background:var(--st-mist);color:var(--st-graphite);border-top-color:var(--border)}
.notice{background:var(--st-mist);border-color:var(--border);border-left:4px solid var(--st-assured-green)}
.notice.ok{border-left-color:var(--st-assured-green)}.notice.bad{border-left-color:var(--st-red);background:var(--bad-bg);color:var(--st-red)}
.slot{background:var(--st-mist);border-color:var(--border);color:var(--muted)}
.form-noscript{background:var(--st-mist);border-color:var(--border);color:var(--text)}
/* form fields: border >=3:1; one shared red for errors (status) */
input,select,textarea{border:1.5px solid var(--st-field-border);border-radius:10px;color:var(--text);background:#fff}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--st-line-blue);outline-offset:1px;border-color:var(--st-line-blue)}
.err{color:var(--st-red)}[aria-invalid=true]{border-color:var(--st-red);border-width:2px}
.hint{color:var(--muted)}
.faq details{border-bottom-color:var(--border)}
.tw{border-color:var(--border)}.tw:focus-visible{outline-color:var(--st-line-blue)}
:focus-visible{outline-color:var(--st-line-blue)}
@media (max-width:900px){nav.main{background:var(--st-navy);border-top-color:var(--st-line-blue)}.grid3 .card.acc{padding-top:84px}.grid3 .card.acc::before{left:24px;top:24px}}

/* PM ruling 16 Oct (guide p.11): primary buttons Assured Green fill + Navy label (5.58:1).
   Hover: same fill (no off-guide shade), navy inset ring + underline. Focus: 3px ring, navy on light, white on navy.
   Amber is for expiring/at-risk only; non-expiry markers are neutral.
   Type: body 14px per guide p.8 (inputs stay 16px to stop iOS zoom). Only guide colours: borders Graphite at low opacity. */
:root{--btn-primary-bg:var(--st-assured-green);--btn-primary-fg:var(--st-navy)}
.btn-accent,header .btn-accent,nav.main a.btn-accent,.band .btn-accent,.price-grid>.card:first-child .btn-accent{background:var(--btn-primary-bg);border-color:var(--btn-primary-bg);color:var(--btn-primary-fg)}
.btn-accent:hover,header .btn-accent:hover,nav.main a.btn-accent:hover,.band .btn-accent:hover,.price-grid>.card:first-child .btn-accent:hover{background:var(--btn-primary-bg);border-color:var(--st-navy);color:var(--btn-primary-fg);box-shadow:inset 0 0 0 1px var(--st-navy);text-decoration:underline;text-underline-offset:3px}
.btn:focus-visible{outline:3px solid var(--st-navy);outline-offset:3px}
header.top .btn:focus-visible,.band .btn:focus-visible,.price-grid>.card:first-child .btn:focus-visible{outline-color:#fff}
body{font-size:14px;line-height:1.65}footer,label,.pill,table.t{font-size:14px}
form .row{align-items:end}
.feature.text-only{grid-template-columns:minmax(0,760px)}
/* sign-off 17 Oct: plan headers stay on one line at 390 */
table.t th:not(:first-child){white-space:nowrap}
@media (max-width:600px){table.t th,table.t td{padding:12px 8px}table.t th:first-child,table.t td:first-child{padding-left:12px}}
/* 21 Oct (PM ruling: "Quality Assurance Suite"): on phones that one plan header may wrap at its space, so the compare table still fits at 390 */
@media (max-width:600px){table.t th.th-wrap{white-space:normal}}
/* 22 Oct: "Quality Assurance Suite" takes two lines beside the other plans, so every plan heading keeps two lines' height and the prices line up */
@media (min-width:901px){.price-grid .card h2{min-height:2.3em}}
/* Features redesign (S C 17 Oct: "too busy", split into pages): a calm hub of six cards plus one short page per area.
   Brand tokens only. Icons: navy outline with one Action Green element on a Sage Mist tile (guide p9-10). */
nav.main a[aria-current=true]{background:var(--st-line-blue);color:#fff;box-shadow:inset 0 -3px 0 var(--st-assured-green)}
.fgrid{grid-template-columns:2fr 1fr 1fr 1fr}
.ficon-tile{width:48px;height:48px;border-radius:12px;background:var(--st-sage);display:inline-flex;align-items:center;justify-content:center;flex:none}
.ficon{display:block}
.fhub{padding:88px 0 96px}
.fgrid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:14px;padding:28px 28px 26px;scroll-margin-top:92px;transition:border-color .15s}
.fcard:hover{border-color:var(--st-navy)}
.fcard h2{font-size:20px;line-height:1.25;letter-spacing:-.01em;margin:0 0 8px;scroll-margin-top:180px}
.fcard p{color:var(--muted);margin:0 0 20px}
.fcard-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}
.fcard .tag,.fhero .tag{margin:0}
.fmore{margin-top:auto;font-weight:600;color:var(--green-text)}
.fmore::after{content:"";position:absolute;inset:0;border-radius:14px}/* whole card is the link's click area */
.fmore:focus-visible{outline:0}.fcard:has(.fmore:focus-visible){outline:3px solid var(--st-navy);outline-offset:3px}
.fquiet{background:var(--st-mist);padding:72px 0}
.fquiet h2{font-size:22px;margin-bottom:28px}
.grid3.quiet h3{font-size:16px;margin-bottom:6px}.grid3.quiet p{color:var(--muted);margin:0}
.fhero{padding:64px 0 60px}
.fhero h1{max-width:820px;font-size:clamp(32px,4.4vw,48px)}
.fhero .lead{max-width:600px;margin:0}
.crumb{margin:0 0 24px;font-weight:600}
.fhero-row{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.fhero .ficon-tile{background:#fff}/* white tile on the Sage Mist hero */
.fsec{padding:96px 0}.fsec:has(.text-only){padding:72px 0}
.fsec .feature{padding:0;gap:80px;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.fsec .feature.text-only{grid-template-columns:minmax(0,600px)}
.ftext{max-width:480px}.feature.text-only .ftext{max-width:600px}
.ftext h2{font-size:clamp(24px,2.6vw,30px);margin-bottom:16px}
.ftext ul.ticks{margin-top:24px}
.pager{background:#fff;border-top:1px solid var(--border);padding:32px 0}
.pager .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center}
.pager a{display:flex;flex-direction:column;justify-content:center;min-height:44px;color:var(--st-navy);font-family:var(--font-head);font-weight:800;font-size:16px;text-decoration:none}
.pager a span{font-family:var(--font);font-weight:400;font-size:13px;color:var(--muted)}
.pager a:hover{text-decoration:underline}
.pager .all{color:var(--green-text);font-family:var(--font);font-weight:600;font-size:14px;text-decoration:underline}
.pager .next{text-align:right}
@media (max-width:900px){.fgrid{grid-template-columns:1fr 1fr}.fgrid>:first-child{grid-column:1/-1}.fgrid-cards{grid-template-columns:1fr 1fr;gap:20px}.fhub{padding:56px 0 64px}.fsec{padding:64px 0}.fsec .feature{gap:32px;grid-template-columns:1fr}.ftext{max-width:none}.fquiet{padding:56px 0}.fhero{padding:48px 0 44px}}
@media (max-width:600px){.fgrid-cards{grid-template-columns:1fr}.pager .wrap{grid-template-columns:1fr 1fr;gap:16px;align-items:start}.pager .all{grid-row:2;grid-column:1/-1;justify-self:center}}
/* Features polish (S C 17 Oct: "one word in green ... make it look sexier"). Features pages only: every rule hangs off
   .fhero, .fhub, .fcard or .fband, which no other page uses. Brand fonts and colours only.
   Green phrase: Action Green #178A50 (large text, >=3.95:1 on Sage Mist), no underline or rule: site links are green and underlined,
   so an underlined phrase would read as a link. The colour alone is the one accent; no bar under the h1 either. */
.fhero{position:relative;background:linear-gradient(180deg,var(--st-sage),var(--st-mist));padding:112px 0 120px}
.fhero h1{font-size:clamp(38px,5.6vw,68px);line-height:1.06;letter-spacing:-.035em;max-width:18ch;margin:0 0 28px;text-wrap:balance}
.fhub-hero h1{font-size:clamp(42px,7vw,88px);line-height:1.04;max-width:13ch;margin-bottom:32px}
.fhero h1::after{content:none}/* the green phrase is the accent instead */
.fhl{color:var(--green-large);letter-spacing:-.045em;text-decoration:none}
/* hub only: the approved Fraunces Italic exception. Scaled up so its x-height meets Manrope's; no rail underline (the italic carries the emphasis);
   a little right padding so the italic overhang on the final "g" is never clipped */
.fhub-hero .fhl{font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:560;font-size:1.1em;line-height:.9;letter-spacing:-.012em;text-decoration:none;padding-right:.05em}
.fhero .lead{max-width:560px}
.fhero .crumb{margin-bottom:32px}.fhero .crumb a{display:inline-flex;align-items:center;min-height:44px}
.fhero-row{margin-bottom:28px}.fhero .ficon-tile{width:56px;height:56px;border-radius:14px}
/* brand motif: a quiet track (two rails, sleepers) along the foot of the hero, below the text; decorative only */
.fhero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:14px;pointer-events:none;
 background:linear-gradient(rgba(14,42,71,.14),rgba(14,42,71,.14)) 0 2px/100% 1.5px no-repeat,linear-gradient(rgba(14,42,71,.14),rgba(14,42,71,.14)) 0 10.5px/100% 1.5px no-repeat,repeating-linear-gradient(90deg,rgba(14,42,71,.09) 0 3px,transparent 3px 26px)}
.fhub{padding:112px 0 120px}
.fgrid-cards{gap:28px}
.fcard{padding:36px 32px 30px;border-radius:18px;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.fcard:hover{border-color:var(--st-navy);box-shadow:0 18px 40px -20px rgba(14,42,71,.28);transform:translateY(-3px)}
.fcard-top{margin-bottom:28px}
.fcard .ficon-tile{width:56px;height:56px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(23,138,80,.16)}
.fcard h2{font-size:22px;letter-spacing:-.02em;margin-bottom:10px}
.fcard p{margin-bottom:24px}
.fmore{display:inline-flex;align-items:center;align-self:flex-start;min-height:44px;text-decoration-thickness:1px;text-underline-offset:4px}
.fcard:hover .fmore{text-decoration-thickness:2px}
.fmore::after{border-radius:18px}
.fband{padding:136px 0}
.fband h2{font-size:clamp(34px,5vw,60px);line-height:1.05;letter-spacing:-.035em;max-width:14ch;margin-bottom:20px}
.fband h2::before{content:"";display:block;width:56px;height:6px;border-radius:3px;background:var(--st-assured-green);margin-bottom:32px}
.fband .lead{max-width:540px}
.fhero .lead,.fband .lead{text-wrap:pretty}
.fband .ctas{margin-top:36px}.fband .btn{min-height:56px;padding:0 32px}
@media (prefers-reduced-motion:reduce){.fcard{transition:none}.fcard:hover{transform:none}}
@media (max-width:900px){.fhero{padding:64px 0 76px}.fhub{padding:64px 0 72px}.fgrid-cards{gap:20px}.fband{padding:88px 0}}
@media (max-width:600px){.fcard{padding:28px 24px 24px}.fhero .crumb{margin-bottom:20px}}
/* Hub hero screenshot (S C 17 Oct: "Need a screenshot of the system at the side of the title"). Hub only: every rule hangs off
   .fhub-hero or .fhub-shot. Text left, picture right, columns 45/55; at 900px and below the picture follows the text.
   v4 (QA F1 at 7852d55: the frame ran past the window and its edge cut words; PM: "calm and premium"): the frame stays inside
   its column at every width, so nothing runs past the window and the hero clips nothing. Its width is min(the column, the
   file's width + 2px for its borders) and the picture is scaled to fit, so it is never shown above 1:1 (it's a 1x app capture).
   The pictures are clean crops of the app's "Upcoming courses" card, without the app menu (make-hero-img-v4.py): left and top
   edges on the app's plain page background, the right edge in the gap between two table columns, the bottom edge in the white
   space under a row. So no width can cut a word. Beside the heading and on tablets, features-hero-card-942e4731-572 (title, Ref,
   Date and Venue, all seven courses, 572x509), shown at 1:1 from 1140px up, where the 55% column is 574.2px; at 600px and below
   the tighter features-hero-card-phone-942e4731-356 (Ref and Date, 356x509). --shot-max is each file's width + 2px; build.py
   checks both values, and its sizes attribute mirrors this rule. 22 Oct 2026: no height or aspect ratio is set here on purpose.
   The frame takes its height from the picture (the width and height on its img and source, written by build.py from each
   file), so the taller crops show all seven rows with no row cut, and the spacing around the frame is unchanged.
   Two columns: the heading scales with the 45% column (the first line is about 7.7em, the column 8.2em), so it keeps its three
   lines (Built around how / rail training / actually runs); plain wrapping there, because balancing could move "how" down a line.
   Simple browser frame: hairline border, three neutral dots and the "Demo data" label, soft navy-tinted shadow. */
.fhub-hero-grid{display:grid;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:48px;align-items:center}
.fhub-hero h1{font-size:clamp(40px,calc((min(100vw,1140px) - 96px) * .055),58px);text-wrap:wrap}
.fhub-shot{--shot-max:574px;width:min(100%,var(--shot-max));margin:0;background:#fff;border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 2px 6px rgba(14,42,71,.06),0 28px 56px -24px rgba(14,42,71,.26)}
.fhub-shot figcaption{display:flex;align-items:center;min-height:34px;padding:0 14px;border-bottom:1px solid var(--border);font-size:13px;line-height:1.3;font-weight:600;color:var(--st-graphite)}
.fhub-shot figcaption::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:rgba(14,42,71,.16);box-shadow:14px 0 0 rgba(14,42,71,.16),28px 0 0 rgba(14,42,71,.16);margin-right:44px}
.fhub-shot picture{display:block}
.fhub-shot img{width:100%;height:auto}
@media (max-width:900px){.fhub-hero{padding:48px 0 64px}.fhub-hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}.fhub-hero h1{font-size:clamp(42px,7vw,88px);text-wrap:balance}}/* one column: heading as before */
@media (max-width:600px){.fhub-hero{padding:40px 0 56px}.fhub-hero-grid{gap:28px}.fhub-shot{--shot-max:358px;border-radius:10px}.fhub-shot figcaption{min-height:28px;padding:0 10px}.fhub-shot figcaption::before{margin-right:40px}}
/* PM rule A1: the Self-check Suite hub card carries the standard disclaimer (build.py FEATURES "note", hub card only) as a quiet
   secondary line under its description: 13px (the brand minimum) Graphite, 9.46:1 on the white card. The link keeps the foot
   of the card, so each row's cards stay equal height (grid stretch). */
.fcard p:has(+.fnote){margin-bottom:10px}
.fcard .fnote{font-size:13px;line-height:1.5;color:var(--st-graphite)}
/* generated:phone-ratios */
@media (max-width:600px){.shot.has-phone.ph-dashboard-courses-942e4731 img,.shot.crop.has-phone.ph-dashboard-courses-942e4731 img{aspect-ratio:620/506}}