/* site.css — the securegov.ca MARKETING SITE stylesheet (site.html, site-fr.html, site-legal.html).
   This is the SecureGov design system (Harbour palette, Manrope headings / Inter body, Calypso action
   colour, pill controls, outlined 8px cards, one hard 3px button ledge) flattened into a single file:
   tokens/{fonts,colors,typography,spacing,radii,effects,schemes,harbour,base}.css + the responsive layer
   + the legal-page rules + the few site-only rules at the bottom. It is NOT the app's styles.css and
   shares no token names with it — the dashboard (index.html) never loads this file, and this site never
   loads styles.css. Colours: tokens only; the only hard-coded literals are the token DEFINITIONS in the
   :root / [data-palette] blocks. Fonts are self-hosted (assets/fonts/, no CDN — the marketing CSP is
   font-src 'self'). */

/* ── Fonts ─────────────────────────────────────────────────────────────────────────────────────── */
@font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url("assets/fonts/manrope-400.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:500;font-display:swap;src:url("assets/fonts/manrope-500.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url("assets/fonts/manrope-600.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url("assets/fonts/manrope-700.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-weight:800;font-display:swap;src:url("assets/fonts/manrope-800.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url("assets/fonts/inter-400.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-display:swap;src:url("assets/fonts/inter-500.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-display:swap;src:url("assets/fonts/inter-600.woff2") format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url("assets/fonts/inter-700.woff2") format("woff2")}

/* ── Colour tokens (warm-black neutral ramp + the four brand hues + semantic aliases) ──────────── */
:root{
--color-white:#ffffff;
--color-neutral-lightest:#f2f2f2;
--color-neutral-lighter:#dad9d9;
--color-neutral-light:#b6b4b4;
--color-neutral:#858382;
--color-neutral-dark:#545250;
--color-neutral-darker:#24201e;
--color-neutral-darkest:#0c0805;
--color-white-5:rgba(255,255,255,.05);--color-white-10:rgba(255,255,255,.1);--color-white-15:rgba(255,255,255,.15);--color-white-20:rgba(255,255,255,.2);--color-white-30:rgba(255,255,255,.3);--color-white-40:rgba(255,255,255,.4);--color-white-50:rgba(255,255,255,.5);--color-white-60:rgba(255,255,255,.6);
--color-neutral-darkest-5:rgba(12,8,5,.05);--color-neutral-darkest-10:rgba(12,8,5,.1);--color-neutral-darkest-15:rgba(12,8,5,.15);--color-neutral-darkest-20:rgba(12,8,5,.2);--color-neutral-darkest-30:rgba(12,8,5,.3);--color-neutral-darkest-40:rgba(12,8,5,.4);--color-neutral-darkest-50:rgba(12,8,5,.5);--color-neutral-darkest-60:rgba(12,8,5,.6);--color-neutral-darkest-90:rgba(12,8,5,.9);
/* Calypso — primary action blue */
--color-calypso-lightest:#e9eff3;--color-calypso-lighter:#d4dfe7;--color-calypso-light:#6b8fad;--color-calypso:#2c5f8a;--color-calypso-dark:#234c6e;--color-calypso-darker:#112637;--color-calypso-darkest:#0d1c29;
/* Danube — navbar / accent blue */
--color-danube-lightest:#eef5fa;--color-danube-lighter:#deebf6;--color-danube-light:#8cb9e1;--color-danube:#5b9bd5;--color-danube-dark:#487caa;--color-danube-darker:#243e55;--color-danube-darkest:#1b2e3f;
/* Pine Glade — positive / protected */
--color-pine-glade-lightest:#f6faf3;--color-pine-glade-lighter:#edf5e8;--color-pine-glade-light:#c2deaf;--color-pine-glade:#a9d18e;--color-pine-glade-dark:#87a771;--color-pine-glade-darker:#435338;--color-pine-glade-darkest:#323e2a;
/* Sandy Brown — warning / attention */
--color-sandy-brown-lightest:#fdf5ef;--color-sandy-brown-lighter:#fcecdf;--color-sandy-brown-light:#f7bd90;--color-sandy-brown:#f4a261;--color-sandy-brown-dark:#c3814d;--color-sandy-brown-darker:#614026;--color-sandy-brown-darkest:#49301d;
--color-primary:var(--color-calypso);
--color-primary-dark:var(--color-calypso-dark);
--color-accent:var(--color-danube);
--color-success:var(--color-pine-glade);
--color-success-text:var(--color-pine-glade-darker);
--color-warning:var(--color-sandy-brown);
--color-warning-text:var(--color-sandy-brown-darker);
--text-body:var(--color-neutral-darkest);
--text-muted:var(--color-neutral);
--text-on-primary:var(--color-white);
--surface-page:var(--color-white);
--surface-alt:var(--color-neutral-lightest);
--surface-card:var(--color-white);
--surface-image-placeholder:var(--color-neutral-lightest);
--border-default:var(--color-neutral-darkest-15);
--border-subtle:var(--color-neutral-darkest-5);
--overlay-scrim:var(--color-neutral-darkest-90);
}

/* ── Typography: Manrope 400 headings (the source theme maps "bold" to 400), Inter body ─────────── */
:root{
--font-heading:"Manrope",ui-sans-serif,system-ui,sans-serif;
--font-body:"Inter",ui-sans-serif,system-ui,sans-serif;
--weight-heading:400;--weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:400;
/* Mobile scale (default) */
--text-h1:2.75rem;--text-h2:2.5rem;--text-h3:2rem;--text-h4:1.5rem;--text-h5:1.25rem;--text-h6:1.125rem;
--text-large:1.125rem;--text-medium:1rem;--text-regular:0.75rem;--text-small:0.75rem;--text-tiny:0.625rem;
--leading-h1:1.2;--leading-h2:1.2;--leading-h3:1.2;--leading-h4:1.3;--leading-h5:1.4;--leading-h6:1.4;--leading-body:1.5;
--tracking-heading:-0.01em;
}
@media (min-width:992px){:root{
--text-h1:4.5rem;--text-h2:3.25rem;--text-h3:2.75rem;--text-h4:2.25rem;--text-h5:1.75rem;--text-h6:1.375rem;
--text-large:1.375rem;--text-medium:1.125rem;--text-regular:1rem;--text-small:0.875rem;--text-tiny:0.75rem;
}}

/* ── Spacing (4px base), radii ("bubble" pills + 8px surfaces), effects (the one ledge shadow) ── */
:root{
--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;--space-18:4.5rem;--space-20:5rem;--space-24:6rem;--space-28:7rem;--space-30:7.5rem;
--section-px:5%;--section-py:4rem;--section-py-md:6rem;--section-py-lg:7rem;--section-intro-mb:3rem;
--eyebrow-mb:1rem;--heading-mb:1.5rem;--actions-mt:2rem;--actions-gap:1rem;
--container-xxs:20rem;--container-xs:25rem;--container-sm:30rem;--container-md:35rem;--container-lg:48rem;--container-xl:64rem;--container-xxl:80rem;
--container:var(--container-xxl);
--breakpoint-sm:480px;--breakpoint-md:768px;--breakpoint-lg:992px;
--radius-button:6.25rem;--radius-badge:6.25rem;--radius-carousel:6.25rem;--radius-form:0.75rem;--radius-card:0.5rem;--radius-image:0.5rem;--radius-checkbox:0.25rem;
--shadow-button-primary:0 3px 0 0 var(--color-calypso-dark);
--shadow-button-secondary:0 3px 0 0 var(--color-neutral-darkest-15);
--shadow-button-alternate:0 3px 0 0 var(--color-neutral-lighter);
--shadow-button-on-dark:0 3px 0 0 var(--color-white-20);
--button-press-offset:3px;--border-button:1.5px;--border-card:1px;--border-divider:1px;
--ease-default:ease-in-out;--ease-tabs:cubic-bezier(0.4,0,0.2,1);
--duration-fast:200ms;--duration-base:300ms;--duration-tabs:600ms;
--opacity-disabled:0.5;--opacity-inactive-tab:0.25;--opacity-close-icon:0.6;
}
@keyframes sg-tabs{from{opacity:0}to{opacity:1}}

/* ── Section colour schemes: one class per <section>; children read the --scheme-* vars ────────── */
:root,.scheme-1{
--scheme-background:var(--p-bg,var(--color-white));
--scheme-foreground:var(--p-surface,var(--color-white));
--scheme-text:var(--p-text,var(--color-neutral-darkest));
--scheme-border:var(--p-border,var(--color-neutral-darkest-15));
--scheme-accent:var(--p-accent,var(--color-calypso));
--scheme-btn-text:var(--p-primary-text,var(--color-white));
--stage-bg:var(--p-stage,var(--color-neutral-lightest));
}
.scheme-2{
--scheme-background:var(--p-band,var(--color-neutral-lightest));
--scheme-foreground:var(--p-surface,var(--color-neutral-lightest));
--scheme-text:var(--p-text,var(--color-neutral-darkest));
--scheme-border:var(--p-border,var(--color-neutral-darkest-15));
--scheme-accent:var(--p-accent,var(--color-calypso));
--scheme-btn-text:var(--p-primary-text,var(--color-white));
--stage-bg:var(--p-stage-2,var(--color-neutral-lighter));
}
.scheme-3{
--scheme-background:var(--p-nav-bg,var(--color-danube));
--scheme-foreground:var(--p-nav-bg,var(--color-danube));
--scheme-text:var(--p-nav-text,var(--color-white));
--scheme-border:var(--p-nav-border,var(--color-white-20));
--scheme-accent:var(--p-nav-text,var(--color-white));
--scheme-btn-text:var(--p-primary-text,var(--color-white));
--stage-bg:var(--color-white-15);
}
.scheme-4{
--scheme-background:var(--p-deep,var(--color-calypso-darkest));
--scheme-foreground:var(--p-deep-surface,var(--color-calypso-darker));
--scheme-text:var(--p-deep-text,var(--color-white));
--scheme-border:var(--p-deep-border,var(--color-white-20));
--scheme-accent:var(--p-deep-accent,var(--color-danube-light));
--scheme-btn-text:var(--p-primary-text,var(--color-white));
--stage-bg:var(--p-deep-stage,var(--color-white-10));
}
.scheme-1,.scheme-2,.scheme-3,.scheme-4{background-color:var(--scheme-background);color:var(--scheme-text)}

/* ── Harbour palette (the chosen theme). data-palette="harbour" data-mode="light|dark" on <html> ── */
[data-palette]{
  --color-calypso:var(--p-primary);--color-calypso-dark:var(--p-primary-dark);--color-calypso-lightest:var(--p-primary-tint);
  --shadow-button-primary:0 3px 0 0 var(--p-primary-dark);
  --text-body:var(--p-text);--text-muted:var(--p-muted);--surface-page:var(--p-bg);--surface-card:var(--p-surface);--border-default:var(--p-border);
  --surface-image-placeholder:var(--p-stage);
  --pill-ok-bg:var(--p-ok-bg);--pill-ok-fg:var(--p-ok-fg);--pill-warn-bg:var(--p-warn-bg);--pill-warn-fg:var(--p-warn-fg);--pill-info-bg:var(--p-primary-tint);--pill-info-fg:var(--p-primary-fg-on-tint);--pill-neutral-bg:var(--p-band);--pill-neutral-fg:var(--p-muted);
  --mock-surface:var(--p-surface);--mock-track:var(--p-track);
  --ok-color:var(--p-ok);--warn-color:var(--p-warn);
  color:var(--p-text);background:var(--p-bg);
}
[data-palette] [data-slot="button"][data-variant="default"]{color:var(--p-primary-text)!important}
[data-palette="harbour"][data-mode="light"]{
  --p-bg:#ffffff;--p-band:#f2f6f9;--p-surface:#ffffff;--p-text:#0c0805;--p-muted:#545250;--p-border:rgba(12,8,5,.15);
  --p-primary:#2c5f8a;--p-primary-dark:#234c6e;--p-primary-text:#ffffff;--p-primary-tint:#e9eff3;--p-primary-fg-on-tint:#234c6e;--p-accent:#2c5f8a;
  --p-stage:#e9eff3;--p-stage-2:#dfe8ef;--p-track:#e9eff3;
  --p-ok:#87a771;--p-ok-bg:#edf5e8;--p-ok-fg:#435338;--p-warn:#c3814d;--p-warn-bg:#fcecdf;--p-warn-fg:#614026;
  --p-nav-bg:#0d1c29;--p-nav-text:#ffffff;--p-nav-border:rgba(255,255,255,.2);
  --p-deep:#0d1c29;--p-deep-surface:#112637;--p-deep-text:#ffffff;--p-deep-border:rgba(255,255,255,.2);--p-deep-accent:#8cb9e1;--p-deep-stage:rgba(255,255,255,.08);
}
[data-palette="harbour"][data-mode="dark"]{
  --p-bg:#0d1c29;--p-band:#112637;--p-surface:#16304a;--p-text:#eef5fa;--p-muted:#9fb6c9;--p-border:rgba(255,255,255,.16);
  --p-primary:#5b9bd5;--p-primary-dark:#487caa;--p-primary-text:#0d1c29;--p-primary-tint:rgba(91,155,213,.18);--p-primary-fg-on-tint:#8cb9e1;--p-accent:#8cb9e1;
  --p-stage:rgba(255,255,255,.06);--p-stage-2:rgba(255,255,255,.06);--p-track:rgba(255,255,255,.12);
  --p-ok:#a9d18e;--p-ok-bg:rgba(169,209,142,.18);--p-ok-fg:#c2deaf;--p-warn:#f4a261;--p-warn-bg:rgba(244,162,97,.18);--p-warn-fg:#f7bd90;
  --p-nav-bg:#0a1620;--p-nav-text:#ffffff;--p-nav-border:rgba(255,255,255,.2);
  --p-deep:#071219;--p-deep-surface:#112637;--p-deep-text:#ffffff;--p-deep-border:rgba(255,255,255,.2);--p-deep-accent:#8cb9e1;--p-deep-stage:rgba(255,255,255,.06);
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────────── */
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font-body);font-weight:var(--weight-regular);font-size:1rem;line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:var(--weight-heading);letter-spacing:var(--tracking-heading);margin:0}
h1{font-size:var(--text-h1);line-height:var(--leading-h1)}h2{font-size:var(--text-h2);line-height:var(--leading-h2)}h3{font-size:var(--text-h3);line-height:var(--leading-h3)}h4{font-size:var(--text-h4);line-height:var(--leading-h4)}h5{font-size:var(--text-h5);line-height:var(--leading-h5)}h6{font-size:var(--text-h6);line-height:var(--leading-h6)}
p{margin:0}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}
button:not(:disabled),[role="button"]:not(:disabled){cursor:pointer}
img{display:block;max-width:100%}
/* In-page nav links land below the 72px sticky navbar (64px on phones) */
section[id]{scroll-margin-top:72px}
@media (max-width:991px){section[id]{scroll-margin-top:64px}}
/* Keyboard focus is visible everywhere; the mouse ring stays quiet */
a:focus-visible,button:focus-visible,select:focus-visible,[role="button"]:focus-visible{outline:2px solid var(--scheme-accent,var(--color-calypso));outline-offset:2px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── Responsive layer (breakpoints from source: 992 lg, 768 md) ──────────────────────────────── */
.sg-2col{display:grid;grid-template-columns:1fr 1fr;align-items:center}
.sg-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.sg-nav-links{display:flex;align-items:center}
.sg-burger{display:none!important}
@media (max-width:991px){
  .sg-burger{display:inline-flex!important}
  section[data-screen-label]:not([data-screen-label="navbar"]){padding:64px 5%!important}
  .sg-2col{grid-template-columns:1fr!important;gap:48px!important}
  .sg-2col > *{order:0!important}
  .sg-3col{grid-template-columns:1fr!important}
  section[data-screen-label="navbar"]{min-height:64px!important;padding:0 5%!important;position:relative!important}
  .sg-nav-links{display:none}
  .sg-nav-links.open{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;padding:8px 5% 24px;background:var(--scheme-background);border-bottom:1px solid var(--scheme-border);z-index:20}
  .sg-nav-links.open > *{width:100%;justify-content:flex-start;padding-left:0!important;padding-right:0!important}
  .sg-nav-links.open .sg-nav-actions{flex-direction:column;align-items:stretch;margin:16px 0 0!important;gap:12px!important}
  .sg-nav-links.open .sg-nav-actions > *{align-self:flex-start}
  .sg-nav-links.open .sg-nav-actions [data-slot="button"]{align-self:stretch;justify-content:center}
  .sg-tagline{display:none}
  .sg-views-stage{height:auto!important;aspect-ratio:1!important;padding:8%!important}
  .sg-3col [data-slot="card"] > div:first-child{aspect-ratio:16/10!important}
  .sg-footer-grid{grid-template-columns:1fr!important;justify-items:start;gap:32px!important}
  .sg-footer-grid > *{justify-self:start!important;align-items:flex-start!important}
  .sg-footer-legal{flex-wrap:wrap;justify-content:flex-start!important;gap:12px 20px!important}
  .sg-hero-actions [data-slot="button"]{width:100%}
  .sg-2col-inner{grid-template-columns:1fr!important}
  .sg-legal-grid{grid-template-columns:1fr!important;gap:32px!important}
  .sg-legal-nav{position:static!important;flex-direction:row!important;flex-wrap:wrap;gap:8px!important}
  .sg-legal-nav p{display:none}
  .sg-legal-nav a{border-left:0!important;border:1px solid var(--scheme-border)!important;border-radius:100px;padding:6px 14px!important;font-size:14px}
  .sg-legal-head{flex-wrap:wrap;gap:12px;padding:12px 5%!important}
  .sg-legal-head [data-slot="wordmark"] span span:last-child{display:none}
}
@media (max-width:767px){
  .sg-chips{gap:6px}
}

/* ── Legal pages (site-legal.html): markdown-ish body rendered by site-legal-app.js ──────────── */
.legal p{margin:0 0 16px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{margin-bottom:8px}
.legal table{border-collapse:collapse;width:100%;margin:0 0 16px;font-size:15px}
.legal th,.legal td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border-default)}
.legal th{font-weight:600}
.legal a{text-decoration:underline}
.legal td:first-child{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.sg-legal-nav a{display:block;text-align:left;background:none;border:0;border-left:2px solid transparent;padding:8px 14px;font:inherit;color:inherit;cursor:pointer}
.sg-legal-nav a:hover{text-decoration:none;border-left-color:var(--scheme-border)}
.sg-legal-nav a[aria-current="page"]{border-left-color:var(--color-calypso);color:var(--color-calypso);font-weight:500}

/* ── Site-only extras ────────────────────────────────────────────────────────────────────────── */
/* Post-payment thank-you: a Dialog card. Only revealed on Stripe's session_id redirect (site-app.js). */
.sg-thanks-card{max-width:560px;margin:0 auto;padding:40px;display:grid;gap:16px}
.sg-thanks-card h2{font-size:var(--text-h4)}
/* Skip link for keyboard users: visually hidden until focused */
.sg-skip{position:absolute;left:-9999px;top:8px;z-index:100;padding:8px 16px;border-radius:100px;background:var(--color-calypso);color:var(--p-primary-text,#fff)}
.sg-skip:focus{left:8px;text-decoration:none}