/* Azul Prints — shared site shell (Stage 5).
   Loaded after each page's own <style>, so the token block below re-skins the
   legacy variable names every template uses (--ink, --blue, --steel, …) with
   the approved palette, and the header/footer rules style the shared markup
   that tools/apply-shell.py injects into every marketing page. */

:root {
  /* approved tokens */
  --navy: #0B2238; --blue: #005BD8; --blue-deep: #004AB0; --blue-soft: #E8F0FC;
  --page: #F4F7FB; --surface: #FFFFFF; --text: #22364A; --text-2: #526477;
  --on-dark: #E6EEF7; --on-dark-2: #B8C7D9; --line: #D5DEE8; --line-strong: #7F92A8;
  --ok: #157347; --warn: #8A5300; --bad: #B42318;
  --r: 12px; --r-sm: 8px;
  --shadow: 0 1px 2px rgba(11,34,56,.06), 0 8px 24px rgba(11,34,56,.08);
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --ease: cubic-bezier(.4,0,.2,1);
  /* legacy names used by the page templates, mapped to the same values */
  --ink: #0B2238; --ink-soft: #22364A; --blue-mid: #004AB0; --blue-bright: #005BD8; --blue-light: #4D8BE6;
  --ice: #E8F0FC; --ice-deep: #C9DBF5; --steel: #F4F7FB; --border: #D5DEE8; --muted: #526477; --white: #FFFFFF;
  --green: #157347; --green-bg: #E8F4EC; --green-bd: #BFE0CB;
  --amber: #8A5300; --amber-bg: #FFF4E0; --amber-bd: #EBD2A6;
  --red: #B42318; --red-bg: #FCEBE9; --red-bd: #F0B8B2;
  --r-lg: 12px;
  --shadow-card: 0 1px 2px rgba(11,34,56,.06), 0 8px 24px rgba(11,34,56,.08);
  --shadow-lift: 0 1px 2px rgba(11,34,56,.06), 0 8px 24px rgba(11,34,56,.08);
}
/* Base. Every page gets the same box model, no browser body margin and the same
   default type. Pages that set their own body size (homepage, calculator) still
   win because the type defaults sit at zero specificity. Element margins are
   deliberately not zeroed here: the page components set their own spacing and
   long-form content relies on normal paragraph, list and table rhythm. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: var(--sans); color: var(--text); background: var(--surface); -webkit-font-smoothing: antialiased; }
:where(body) { font-size: 16px; line-height: 1.55; }
:where(img) { max-width: 100%; height: auto; }
:where(button, input, select, textarea) { font: inherit; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 2000; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: var(--r-sm); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: 12px; }

/* Shared buttons used by the shell */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border-radius: var(--r-sm); font-weight: 700; font-size: 16px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .15s var(--ease), color .15s var(--ease); font-family: var(--sans); line-height: 1.2; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-deep); color: #fff; }
.btn-on-dark { background: #fff; color: var(--navy); }
.btn-on-dark:hover { background: var(--blue-soft); color: var(--navy); }
.btn-ghost-dark { color: #fff; border-color: rgba(255,255,255,.45); background: transparent; }
.btn-ghost-dark:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.08); }
.btn-outline { color: var(--navy); border-color: var(--line-strong); background: var(--surface); }
.btn-outline:hover { border-color: var(--navy); color: var(--navy); }

/* ============================================= HEADER ============================================= */
.assurance { background: var(--navy); color: var(--on-dark); font-size: 14px; }
.assurance ul { list-style: none; display: flex; justify-content: center; gap: 0; padding: 8px 0; }
.assurance li { padding: 0 18px; border-left: 1px solid rgba(230,238,247,.25); }
.assurance li:first-child { border-left: none; }
@media (max-width: 760px) { .assurance li:nth-child(n+2) { display: none; } }
@media (max-width: 400px) { .assurance { font-size: 13px; } }
#site-header { position: sticky; top: 0; z-index: 1000; background: var(--surface); border-bottom: 1px solid var(--line); }
#site-header.scrolled { box-shadow: 0 2px 12px rgba(11,34,56,.06); }
.nav-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand img { height: 56px; width: auto; display: block; }
nav[aria-label="Main navigation"] { display: flex; align-items: center; gap: 2px; }
.nav-link, .nav-menu > button { display: inline-flex; align-items: center; gap: 6px; font-size: 15.5px; font-weight: 600; color: var(--text); text-decoration: none; padding: 10px 14px; min-height: 44px; border-radius: var(--r-sm); background: none; border: none; cursor: pointer; }
.nav-link:hover, .nav-menu > button:hover, .nav-menu > button[aria-expanded="true"] { background: var(--page); color: var(--navy); }
.nav-menu { position: relative; }
.nav-menu > button::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-panel { position: absolute; left: 0; top: calc(100% + 6px); min-width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px; list-style: none; z-index: 1100; }
.nav-panel[hidden] { display: none; }
.nav-panel a { display: block; padding: 10px 12px; border-radius: var(--r-sm); color: var(--text); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav-panel a:hover, .nav-panel a:focus-visible { background: var(--page); color: var(--navy); }
.nav-panel a small { display: block; font-size: 13px; color: var(--text-2); }
.nav-cta { margin-left: 8px; }
.nav-right { display: none; align-items: center; gap: 8px; }
#hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; }
#hamburger span { width: 20px; height: 2px; background: var(--navy); border-radius: 2px; display: block; }
@media (max-width: 960px) {
  nav[aria-label="Main navigation"] { display: none; }
  .nav-right { display: flex; }
  .nav-right .btn { min-height: 40px; padding: 8px 14px; font-size: 15px; }
  #hamburger { display: flex; }
  .nav-wrap { height: 64px; padding: 0 16px; }
  .brand img { height: 44px; }
}
#mobile-menu { position: fixed; inset: 0; z-index: 1200; background: var(--surface); overflow-y: auto; padding: 16px 16px 32px; }
#mobile-menu[hidden] { display: none; }
.mm-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mm-head img { height: 44px; width: auto; }
.mm-close { min-height: 44px; padding: 8px 14px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--r-sm); font-weight: 600; font-size: 15px; color: var(--navy); cursor: pointer; }
.mm-group { border-top: 1px solid var(--line); padding: 14px 0 6px; }
.mm-group h2 { font-size: 14px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; }
.mm-group a { display: block; padding: 11px 4px; font-size: 17px; font-weight: 600; color: var(--navy); text-decoration: none; }
.mm-cta { margin-top: 16px; width: 100%; }


/* ============================================= FOOTER ============================================= */
#site-footer { background: var(--navy); color: var(--on-dark-2); padding: 56px 0 28px; border-top: 1px solid rgba(230,238,247,.12); }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 36px; }
.footer-brand img { height: 48px; width: auto; margin-bottom: 14px; }
.footer-brand p { font-size: 15px; line-height: 1.55; color: var(--on-dark-2); max-width: 300px; }
.footer-col-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer-col ul { list-style: none; display: grid; gap: 9px; }
.footer-col a { color: var(--on-dark); text-decoration: none; font-size: 15px; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-bottom { border-top: 1px solid rgba(230,238,247,.14); padding-top: 20px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--on-dark-2); }
.footer-bottom a { color: var(--on-dark); }
@media (max-width: 860px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }


/* ============================================= SHARED PAGE COMPONENTS ============================================= */
/* Containers and sections (the homepage is the reference) */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 640px) { .wrap, .wrap-narrow { padding: 0 16px; } }
.section { padding: 72px 0; }
.section-pale { background: var(--page); }
.section-h { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); line-height: 1.1; color: var(--navy); margin-bottom: 10px; letter-spacing: -.005em; }
.section-p { font-size: 17px; color: var(--text-2); max-width: 62ch; margin-bottom: 32px; }
@media (max-width: 640px) { .section { padding: 44px 0; } .section-p { margin-bottom: 24px; } }

/* Page hero for product, guide and company pages: white, breadcrumb, serif H1,
   one-sentence lead, the quote action and the price facts in the first screen. */
.ph { background: var(--surface); border-bottom: 1px solid var(--line); padding: 36px 0 36px; }
.ph-pale { background: var(--page); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 16px; padding: 0; font-size: 14px; color: var(--text-2); }
.crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--line-strong); }
.crumbs a { color: var(--text-2); }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }
.ph h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.08; letter-spacing: -.005em; color: var(--navy); max-width: 24ch; margin: 0 0 12px; }
.ph-lead { font-size: 18px; line-height: 1.5; color: var(--text); max-width: 60ch; margin: 0 0 22px; }
.ph-actions { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; margin: 0 0 14px; }
.ph-link { font-weight: 600; font-size: 16px; }
.ph-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; list-style: none; margin: 0; padding: 0; font-size: 15px; color: var(--text-2); }
.ph-facts b { color: var(--navy); font-variant-numeric: tabular-nums; }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; }
@media (max-width: 900px) { .ph-grid { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width: 640px) { .ph { padding: 28px 0 28px; } .ph-actions .btn { width: 100%; } }

/* Reading column */
.prose { max-width: 68ch; font-size: 17px; line-height: 1.6; color: var(--text); }
.prose h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; color: var(--navy); margin: 40px 0 10px; }
.prose h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 28px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 14px 22px; }
.prose li { margin-bottom: 6px; }
.prose a { font-weight: 600; }
.prose table { margin: 10px 0 18px; }

/* Data tables */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 18px; border: 1px solid var(--line); border-radius: var(--r); }
.tbl { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--surface); }
.tbl caption { text-align: left; font-size: 17px; font-weight: 700; color: var(--navy); padding: 0 0 10px; caption-side: top; }
.tbl th, .tbl td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th { font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--page); white-space: nowrap; }
.tbl td { font-variant-numeric: tabular-nums; }
.tbl tr:last-child td { border-bottom: none; }
.tbl td b, .tbl td strong { color: var(--navy); }
.tbl .num { text-align: right; }
.ladder { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.ladder caption { text-align: left; font-size: 17px; font-weight: 700; color: var(--navy); padding: 0 0 10px; }
.ladder th, .ladder td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.ladder th { font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--page); }
.ladder td { font-variant-numeric: tabular-nums; }
.ladder td:last-child, .ladder th:last-child { text-align: right; }
.ladder tr:last-child td { border-bottom: none; }
.ladder td b { color: var(--navy); }
.ladder-note { font-size: 14px; color: var(--text-2); margin-top: 10px; }

/* Callouts: one quiet note style, status colours only when they mean something */
.note { border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: var(--r-sm); background: var(--page); padding: 14px 16px; font-size: 16px; color: var(--text); margin: 0 0 18px; }
.note-warn { border-left-color: var(--warn); background: #FFF4E0; }
.note-ok { border-left-color: var(--ok); background: #E8F4EC; }
.note p { margin: 0; }
.note p + p { margin-top: 6px; }

/* Steps (a real sequence) */
.steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; margin: 0; padding: 0; }
.steps li { counter-increment: step; border-top: 2px solid var(--navy); padding-top: 16px; }
.steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 12px; }
.steps h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.steps p { font-size: 16px; color: var(--text); margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; } }

/* Check list (three to five points, no cards) */
.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; }
.points li::before { content: ''; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%; background: var(--ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 100% no-repeat; }
.points h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 3px; }
.points p { font-size: 16px; color: var(--text); margin: 0; max-width: 56ch; }

/* Two-column feature: text + figure */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.split figure { margin: 0; }
.split figure img { width: 100%; border-radius: var(--r); }
.split figcaption { font-size: 14px; color: var(--text-2); margin-top: 10px; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 28px; } }

/* Related links */
.related { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 24px; }
.related a { display: block; padding: 12px 0; border-top: 1px solid var(--line); color: var(--navy); font-weight: 600; text-decoration: none; }
.related a:hover { color: var(--blue); }
.related small { display: block; font-weight: 400; color: var(--text-2); font-size: 14px; }

/* FAQ (details) */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px; font-size: 18px; font-weight: 600; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 24px; font-weight: 400; color: var(--blue); flex-shrink: 0; line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq .faq-a { padding: 0 4px 20px; font-size: 16px; color: var(--text); max-width: 68ch; }
.faq .faq-a p + p { margin-top: 8px; }
.faq-more { margin-top: 16px; font-size: 15px; color: var(--text-2); }

/* Final CTA band */
.cta-band { background: var(--navy); color: var(--on-dark); padding: 56px 0; }
.cta-band .cta-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3vw, 36px); color: #fff; line-height: 1.1; margin-bottom: 6px; }
.cta-band p { font-size: 16px; color: var(--on-dark-2); }

/* Responsive tables in legacy page content */
@media (max-width: 640px) {
  .page-wrap table:not(.tbl):not(.ladder), main table:not(.tbl):not(.ladder) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================= LEGACY TEMPLATE NEUTRALISERS ============================================= */
/* Old templates style the shell by element (footer{…}, header{…}, nav a{…}); the ids win. */
#site-footer { border-radius: 0; text-align: left; margin-top: 0; }
#site-footer .footer-brand img { margin-left: 0; }
#site-header { height: auto; background: var(--surface); backdrop-filter: none; }
#site-header .nav-wrap { height: 72px; }
@media (max-width: 960px) { #site-header .nav-wrap { height: 64px; } }
.hero-btn, .btn-primary, .btn-secondary, .btn-ghost { max-width: 100%; white-space: normal; }
/* The old templates sat their content under a fixed header; the shared header is
   sticky and in flow, so the offsets they carry become dead space. */
.page-wrap { padding-top: 32px !important; }
main[style*="padding-top"], main.page-wrap, main { padding-top: 0; }
main.page-wrap { padding-top: 32px !important; }
@media (max-width: 767px) { .page-wrap, main.page-wrap { padding-top: 24px !important; } }
/* Pieces the shell replaces or the brief retires */
#float-btn, .trust-bar, .social-proof-bar, #activity-ticker, .mobile-cta-float, .sticky-cta { display: none !important; }
/* Scroll-reveal effects are retired: content is visible without animation */
.reveal, .reveal-delay-1, .reveal-delay-2, .reveal-delay-3 { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
/* Scroll targets land below the sticky header */
[id] { scroll-margin-top: 88px; }