:root{--navy:#0f1e38;--navy-2:#14294a;--blue:#0078d4;--blue-2:#2159aa;--orange:#f26522;--orange-dark:#d4541a;--ink:#13213a;--muted:#5a6475;--paper:#fff;--mist:#f4f7fb;--line:#dde3ee;--success:#1b8a5a;--radius:18px;--shadow:0 24px 70px rgba(15,30,56,.12);--font:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--font);line-height:1.65;-webkit-font-smoothing:antialiased}body.menu-open{overflow:hidden}img{display:block;max-width:100%}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}.container{width:min(1160px,calc(100% - 40px));margin-inline:auto}.skip-link{position:fixed;left:16px;top:-70px;z-index:9999;padding:10px 16px;border-radius:8px;background:#fff;color:var(--navy);box-shadow:var(--shadow)}.skip-link:focus{top:16px}.eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 16px;color:var(--blue);font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.eyebrow:before{content:"";width:25px;height:2px;background:var(--orange)}h1,h2,h3{margin:0;color:var(--navy);font-weight:800;letter-spacing:-.035em;line-height:1.12}h1{font-size:clamp(2.8rem,6vw,5.6rem)}h2{font-size:clamp(2rem,4vw,3.35rem)}h3{font-size:1.2rem}.lead{font-size:clamp(1.05rem,1.6vw,1.23rem);color:var(--muted)}.text-gradient{background:linear-gradient(110deg,#5db9ff,var(--orange) 92%);background-clip:text;-webkit-background-clip:text;color:transparent}.btn{display:inline-flex;min-height:50px;align-items:center;justify-content:center;gap:10px;padding:12px 20px;border:1px solid transparent;border-radius:12px;font-weight:750;cursor:pointer;transition:.2s transform,.2s box-shadow,.2s background}.btn:hover{transform:translateY(-2px)}.btn-primary{color:#fff;background:var(--orange);box-shadow:0 10px 26px rgba(242,101,34,.28)}.btn-primary:hover{background:var(--orange-dark)}.btn-outline{color:#fff;border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.08)}.btn-dark{color:#fff;background:var(--navy)}.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--blue);font-weight:800}.link-arrow:after{content:"\2192";transition:transform .2s}.link-arrow:hover:after{transform:translateX(4px)}
.site-header{position:fixed;inset:0 0 auto;z-index:50;color:#fff;transition:background-color .28s ease,box-shadow .28s ease,backdrop-filter .28s ease}.nav-wrap{height:84px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:11px;font-size:1.1rem;font-weight:850;letter-spacing:-.02em}.brand-mark{position:relative;width:37px;height:37px;border-radius:11px;background:linear-gradient(145deg,#5dc2ff,var(--blue));box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}.brand-mark:before{content:"";position:absolute;inset:9px 11px;border:3px solid #fff;border-top-width:6px;border-radius:3px 3px 8px 8px;clip-path:polygon(50% 0,100% 18%,100% 70%,50% 100%,0 70%,0 18%)}.brand span small{display:block;margin-top:-4px;color:#9bd7ff;font-size:.58rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.nav-links{display:flex;align-items:center;gap:30px}.nav-links>a:not(.btn){font-size:.92rem;font-weight:650;color:rgba(255,255,255,.82)}.nav-links>a:not(.btn):hover,.nav-links>a[aria-current=page]{color:#fff}.menu-toggle{display:none;width:44px;height:44px;padding:10px;border:0;background:transparent;color:#fff}.menu-toggle span{display:block;height:2px;margin:6px 0;background:currentColor}
.hero{position:relative;min-height:auto;padding:150px 0 120px;overflow:hidden;color:#fff;background:radial-gradient(circle at 78% 22%,rgba(0,196,255,.2),transparent 27%),linear-gradient(132deg,var(--navy) 8%,#164b85 60%,#2159aa)}.hero:before{content:"";position:absolute;inset:0;opacity:.16;background-image:linear-gradient(rgba(255,255,255,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.1) 1px,transparent 1px);background-size:65px 65px;mask-image:linear-gradient(to right,transparent,#000)}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr;align-items:center;gap:0}.hero h1{color:#fff}.hero .lead{margin:24px 0 32px;color:rgba(255,255,255,.76)}.hero-actions{display:flex;flex-wrap:wrap;gap:12px}.hero-note{display:flex;align-items:center;gap:11px;margin-top:25px;color:rgba(255,255,255,.68);font-size:.88rem}.pulse{width:9px;height:9px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 7px rgba(74,222,128,.13)}
.trustbar{position:relative;z-index:3;margin-top:-50px}.trust-inner{display:grid;grid-template-columns:repeat(3,1fr);align-items:center;min-height:100px;padding:20px 30px;border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow)}.trust-copy{color:var(--muted);font-size:.92rem}.trust-copy strong{display:block;color:var(--navy);font-size:1rem}.trust-item{padding-left:24px;border-left:1px solid var(--line);color:var(--muted);font-size:.82rem}.trust-item strong{display:block;color:var(--blue);font-size:1.35rem}.section{padding:105px 0}.section-alt{background:var(--mist)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:48px}.section-head>div{max-width:720px}.section-head .lead{max-width:420px;margin:0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:#fff;transition:.25s transform,.25s box-shadow,.25s border}.feature-card:hover{transform:translateY(-6px);border-color:#badbf3;box-shadow:0 22px 55px rgba(15,30,56,.1)}.feature-tile-image{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--navy);transition:transform .45s ease}.feature-card:hover .feature-tile-image{transform:scale(1.035)}.feature-card-body{padding:25px 28px 28px}.feature-card p{margin:11px 0 0;color:var(--muted);font-size:.94rem}.platform{display:grid;grid-template-columns:.9fr 1.1fr;gap:78px;align-items:center}.platform-copy .lead{margin:20px 0 28px}.check-list{display:grid;gap:14px;padding:0;margin:0;list-style:none}.check-list li{position:relative;padding-left:31px;color:var(--muted)}.check-list li:before{content:"\2713";position:absolute;left:0;top:1px;display:grid;width:22px;height:22px;place-items:center;border-radius:50%;color:#fff;background:var(--success);font-size:.7rem;font-weight:900}.dashboard-visual{position:relative;padding:28px;border-radius:26px;background:var(--navy);box-shadow:var(--shadow)}.dash-top{display:flex;justify-content:space-between;margin-bottom:22px;color:#fff}.dash-top small{color:#92a7c8}.dash-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}.dash-card{min-height:118px;padding:18px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.06);color:#fff}.dash-card.wide{grid-column:1/-1}.dash-label{color:#9fb4d2;font-size:.75rem}.dash-number{font-size:1.8rem;font-weight:850}.progress{height:7px;margin-top:14px;border-radius:8px;background:#263d60;overflow:hidden}.progress span{display:block;width:84%;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--blue),#55d8ff)}.bars{display:flex;align-items:flex-end;gap:8px;height:50px;margin-top:12px}.bars i{flex:1;border-radius:4px 4px 0 0;background:#2a85cf}.bars i:nth-child(2){height:70%}.bars i:nth-child(3){height:45%;background:var(--orange)}.bars i:nth-child(4){height:90%}.bars i:nth-child(5){height:60%}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.step{position:relative;padding:0 36px}.step:first-child{padding-left:0}.step:last-child{padding-right:0}.step:not(:last-child):after{content:"";position:absolute;right:0;top:25px;width:1px;height:calc(100% - 25px);background:var(--line)}.step-number{display:inline-flex;margin-bottom:22px;color:var(--orange);font-size:2.3rem;font-weight:850}.step p{color:var(--muted)}.cta{padding:0 0 105px}.cta-inner{position:relative;overflow:hidden;padding:62px;border-radius:28px;color:#fff;background:linear-gradient(120deg,var(--navy),#184d84)}.cta-inner:after{content:"";position:absolute;width:360px;height:360px;right:-120px;top:-150px;border:70px solid rgba(255,255,255,.05);border-radius:50%}.cta-inner h2{color:#fff}.cta-inner p{color:rgba(255,255,255,.72)}
.page-hero{padding:160px 0 88px;color:#fff;background:radial-gradient(circle at 80%,rgba(0,196,255,.18),transparent 28%),linear-gradient(130deg,var(--navy),#194f88)}.page-hero h1{color:#fff;font-size:clamp(2.6rem,5vw,4.6rem)}.page-hero .lead{color:rgba(255,255,255,.72)}.content-grid{display:grid;grid-template-columns:280px 1fr;gap:65px}.side-nav{position:sticky;top:25px;align-self:start;padding:22px;border:1px solid var(--line);border-radius:16px;background:var(--mist)}.side-nav a{display:block;padding:8px 4px;color:var(--muted);font-size:.92rem}.side-nav a:hover{color:var(--blue)}.rich-copy{max-width:800px}.rich-copy h2{margin:45px 0 16px;font-size:1.85rem}.rich-copy h2:first-child{margin-top:0}.rich-copy h3{margin:28px 0 8px}.rich-copy p,.rich-copy li{color:var(--muted)}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.about-panel{min-height:420px;padding:34px;border-radius:24px;background:linear-gradient(145deg,var(--navy),#1b5895);color:#fff}.about-panel h3{color:#fff;font-size:1.8rem}.principles{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:65px}.principle{padding:20px;border:1px solid rgba(255,255,255,.14);border-radius:14px;background:rgba(255,255,255,.06)}.principle strong{display:block;font-size:1.35rem}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:72px}.contact-card{padding:32px;border-radius:20px;color:#fff;background:var(--navy)}.contact-card a{color:#75c9ff}.form-card{padding:35px;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.field{margin-bottom:18px}.field label{display:block;margin-bottom:7px;color:var(--navy);font-size:.88rem;font-weight:750}.field input,.field textarea,.field select{width:100%;padding:13px 14px;border:1px solid #cbd5e1;border-radius:10px;color:var(--ink);background:#fff}.field input:focus,.field textarea:focus,.field select:focus{outline:3px solid rgba(0,120,212,.14);border-color:var(--blue)}.form-status{display:none;margin-top:15px;padding:12px;border-radius:10px;background:#e9f8f0;color:#146b47}.site-footer{padding:65px 0 24px;color:#c3d2e6;background:radial-gradient(circle at 85% 0%,rgba(0,150,255,.12),transparent 45%),linear-gradient(150deg,#1a3560 0%,#132a4e 55%,#111f39 100%)}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:45px}.footer-brand p{max-width:330px}.footer-title{margin:0 0 16px;color:#fff;font-size:.88rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.footer-links{display:grid;gap:10px}.footer-links a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:50px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:.82rem}.not-found{display:grid;min-height:100vh;place-items:center;padding:40px;text-align:center;background:var(--navy);color:#fff}.not-found h1{color:#fff}.not-found .code{font-size:clamp(6rem,18vw,13rem);font-weight:900;line-height:.85;color:rgba(255,255,255,.07)}
@media(max-width:900px){.nav-links{position:fixed;inset:0 0 0 25%;display:flex;flex-direction:column;align-items:stretch;padding:105px 30px 30px;transform:translateX(100%);background:var(--navy);transition:transform .25s}.nav-links.open{transform:none}.menu-toggle{display:block;position:relative;z-index:2}.hero{min-height:auto}.hero-grid,.platform,.about-grid,.contact-grid{grid-template-columns:1fr}.trust-inner{grid-template-columns:1fr 1fr}.trust-copy{grid-column:1/-1}.trust-item{padding:10px 0;border:0}.feature-grid{grid-template-columns:1fr 1fr}.content-grid{grid-template-columns:1fr}.side-nav{position:static}.footer-grid{grid-template-columns:1.2fr 1fr 1fr}.footer-brand{grid-column:1/-1}}
@media(max-width:620px){.container{width:min(100% - 28px,1160px)}.nav-wrap{height:72px}.brand span small{display:none}.nav-links{left:12%}.hero{padding:125px 0 90px}.hero-grid{gap:42px}.hero-actions .btn{width:100%}.trustbar{margin-top:-34px}.trust-inner{padding:20px;grid-template-columns:1fr 1fr}.section{padding:75px 0}.section-head{display:block}.section-head .lead{margin-top:18px}.feature-grid,.steps,.principles,.form-row{grid-template-columns:1fr}.step{padding:24px 0}.step:first-child{padding-top:0}.step:not(:last-child):after{left:0;right:auto;top:auto;bottom:0;width:100%;height:1px}.platform{gap:45px}.dash-grid{grid-template-columns:1fr}.dash-card.wide{grid-column:auto}.cta{padding-bottom:75px}.cta-inner{padding:38px 25px}.page-hero{padding:125px 0 65px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-bottom{display:block}.contact-grid{gap:35px}.form-card{padding:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* ─────────────────────────────────────────────────────────────────────────
   Typography — mirrors the RASPSYS public site (assets/css/style.css).

   Note on the heading face: style.css declares Playfair Display for h1–h4
   early on, then overrides it near the end of the file with Outfit for
   h1–h6. The later rule wins, so RASPSYS actually RENDERS in Outfit.
   This file matches what renders. Playfair is kept available as
   --font-serif for any deliberate serif accent.
   ───────────────────────────────────────────────────────────────────────── */
:root{
  --font:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-heading:'Outfit','Inter',system-ui,sans-serif;
  --font-display:'Outfit','Inter',system-ui,sans-serif;
  --font-serif:'Playfair Display',Georgia,serif;
}

/* Base: 16px root, generous body leading (RASPSYS uses 1.7). */
/* scroll-behavior is set earlier in this file and deliberately NOT repeated
   here: the prefers-reduced-motion override sits between the two, and
   re-declaring it after that block would override the reader preference. */
html{font-size:16px}
body{font-family:var(--font);font-weight:400;letter-spacing:0;line-height:1.7}

/* Headings: Outfit, 700, tight leading. */
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;line-height:1.2}
h1{font-size:clamp(2.2rem,5vw,3.5rem);letter-spacing:-.03em}
h2{font-size:clamp(1.8rem,4vw,2.6rem);letter-spacing:-.02em}
h3{font-size:clamp(1.25rem,3vw,1.6rem);letter-spacing:-.01em}
h4{font-size:1.2rem;letter-spacing:-.01em}
h5,h6{font-size:1rem;letter-spacing:0}

/* Lead paragraphs get looser leading than body copy, as on RASPSYS. */
.lead{font-size:clamp(1rem,1.8vw,1.2rem);line-height:1.8}

/* The home hero is a deliberate display treatment and is larger than the
   general scale. RASPSYS scopes its own hero separately for the same reason.
   Stated explicitly here because .hero h1 previously set no size and was
   therefore governed by the bare h1 rule above. */
.hero h1{font-size:clamp(2.8rem,6vw,5.6rem);line-height:1.05;letter-spacing:-.035em}
.hero .lead{font-size:clamp(1.05rem,1.6vw,1.23rem);line-height:1.65}

/* Inner-page heroes keep their existing scoped size; only leading is aligned. */
.page-hero h1{line-height:1.08}
.page-hero .lead{line-height:1.7}

/* Display face for chrome and numerals. */
.brand,.btn,.nav-links,.eyebrow,.footer-title,.step-number,
.dash-number,.trust-item strong,.principle strong{font-family:var(--font-display)}
.brand{font-weight:700}
.nav-links>a:not(.btn){font-weight:600}
.btn{font-weight:700;letter-spacing:-.01em}

/* Compact numbered markers remain available on the detailed features page. */
.feature-icon{display:grid;width:48px;height:48px;margin-bottom:22px;place-items:center;border-radius:14px;color:var(--blue);font-family:var(--font-display);font-weight:800;background:#e8f3fd}
.feature-card:nth-child(3n+2) .feature-icon{color:var(--orange);background:#fff0e9}

/* Small print stays readable rather than merely small. */
.footer-bottom,.hero-note,.form-text{line-height:1.6}

/* Re-asserted last: no rule after this point may reintroduce motion for
   readers who have asked for less of it. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── Sticky header ────────────────────────────────────────────────────────
   The bar is transparent over the dark hero. Once the page scrolls it gains a
   solid ground, because the content below the hero is light and white nav text
   on it would be invisible. Text colour never changes, so only the background
   animates and nothing reflows.
   ─────────────────────────────────────────────────────────────────────── */
.site-header.is-stuck{
  background:rgba(15,30,56,.92);
  box-shadow:0 6px 26px rgba(5,15,35,.26);
}
@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){
  .site-header.is-stuck{
    background:rgba(15,30,56,.78);
    -webkit-backdrop-filter:saturate(150%) blur(12px);
    backdrop-filter:saturate(150%) blur(12px);
  }
}
/* Slightly shorter once stuck, so it takes less of the viewport while reading. */
.site-header.is-stuck .nav-wrap{height:70px}

/* The mobile menu is a full-height panel; the bar behind it must be solid
   whatever the scroll position, or the brand sits on transparent ground. */
body.menu-open .site-header{
  background:rgba(15,30,56,.97);
  box-shadow:none;
}

/* A fixed bar covers anything an in-page link jumps to, so give anchor targets
   room to clear it. Matters for index.html#how-it-works, linked from the nav
   on every page. */
section[id],h1[id],h2[id],h3[id],[id].section{scroll-margin-top:104px}
.feature-tile-image{height:200px;aspect-ratio:auto}
@media(max-width:620px){
  section[id],h1[id],h2[id],h3[id],[id].section{scroll-margin-top:88px}
  .site-header.is-stuck .nav-wrap{height:64px}
}

/* ── Home hero: centred ───────────────────────────────────────────────────
   The hero lost its side-by-side artwork, so the copy now sits alone across
   the full width. Centred reads better than one left-aligned column with
   empty space beside it.

   Scoped to .hero, which only exists on index.html — the inner pages use
   .page-hero and stay left-aligned.

   text-align alone is not enough: .eyebrow, .hero-actions and .hero-note are
   flex containers, so their own main axis has to be centred too.
   ─────────────────────────────────────────────────────────────────────── */
.hero{text-align:center}
.hero .eyebrow{justify-content:center}
.hero-actions{justify-content:center}
.hero-note{justify-content:center}

/* ── CTA band: centred ────────────────────────────────────────────────────
   Matches the home hero. The buttons already centre, because the band reuses
   .hero-actions (used in exactly two places, both on index.html), so without
   this the copy sat left of centred buttons.

   .eyebrow is inline-flex, so text-align on the parent already positions the
   element; justify-content centres its own contents.
   ─────────────────────────────────────────────────────────────────────── */
.cta-inner{text-align:center}
.cta-inner .eyebrow{justify-content:center}

/* ── Contact card: same lighter gradient as the footer ────────────────────
   Was a flat var(--navy) #0f1e38, noticeably darker than the footer it sits
   above. Reuses the footer's exact stops so the two read as one family; the
   radial accent is nudged to 88%/52% because the card is a narrow column,
   not a full-width band.

   Contrast on the lightest point (#1a3560 + accent = #164376):
   white 10.01:1, #75c9ff links 5.51:1 — both pass WCAG AA.
   ─────────────────────────────────────────────────────────────────────── */
.contact-card{background:radial-gradient(circle at 88% 0%,rgba(0,150,255,.14),transparent 52%),linear-gradient(150deg,#1a3560 0%,#132a4e 55%,#111f39 100%)}

/* ── "What happens next" card ─────────────────────────────────────────────
   Sits under .contact-card in the contact aside, mirroring the card-alt
   block on raspsys.com/contact-us.html. Deliberately light: it follows a
   dark panel, and the light ground lets .check-list keep its existing
   var(--muted) text and green check circles without an override.

   Border, radius and ground are taken from .form-card / --mist so the two
   columns of the contact grid read as one system.
   ─────────────────────────────────────────────────────────────────────── */
.next-card{margin-top:22px;padding:28px;border:1px solid var(--line);border-radius:20px;background:var(--mist)}
.next-card h4{margin:0 0 18px;color:var(--navy)}

/* ── Menubar brand: "SF Backup", bold orange with a gradient ──────────────
   Scoped to .site-header on purpose: .brand is also used in the footer,
   which stays on the existing wordmark.

   Stops are lighter than --orange-dark by necessity. The header is fixed and
   transparent at rest, so the brand sits on the top-left of the hero
   gradients (#0f1e38) and on rgba(15,30,56,.92) once stuck. At 1.1rem/800 =
   17.6px it falls just under the WCAG large-text threshold, so it needs
   4.5:1 — and --orange-dark #d4541a only reaches 4.02:1 there. These stops
   run 5.27:1 to 8.52:1 on every ground the brand actually meets.

   The @supports guard matters: -webkit-text-fill-color:transparent without
   working background-clip:text renders the wordmark invisible, so the flat
   colour below is the fallback, not a nicety.
   ─────────────────────────────────────────────────────────────────────── */
.site-header .brand span{font-size:1.35rem;font-weight:800;letter-spacing:-.02em;color:var(--orange)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  .site-header .brand span{background:linear-gradient(96deg,#ffa552 0%,#ff8a3d 45%,var(--orange) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}

/* ── Inner-page heroes: centred, matching the home hero ───────────────────
   .page-hero carries the same three children on every page that has one
   (about, contact, features, privacy, sitemap): .eyebrow, h1, .lead.
   404.html uses .not-found, which is already centred via place-items.

   .eyebrow is inline-flex, so text-align on the parent positions the element
   itself; justify-content centres its contents if it ever wraps.
   ─────────────────────────────────────────────────────────────────────── */
.page-hero{text-align:center}
.page-hero .eyebrow{justify-content:center}

/* ── Contact form submit: centred ─────────────────────────────────────────
   .btn is inline-flex, so margin-inline:auto alone does nothing. Switching
   to flex makes it a block-level box that auto margins can centre, and
   width:fit-content stops it stretching to the full form width.
   ─────────────────────────────────────────────────────────────────────── */
#contact-form [type=submit]{display:flex;width:fit-content;margin-inline:auto}

/* ── Outline button hover ─────────────────────────────────────────────────
   Previously the only hover feedback was .btn:hover's 2px lift; the fill and
   border never changed. Brightens the glass instead of switching hue, so it
   stays the secondary action beside the orange primary.

   .18 is the ceiling, not a taste call: the hero gradient reaches #2159aa
   behind these buttons, and at .24 the white label drops to 3.98:1 there.
   At .18 the worst ground still gives 4.54:1.
   ─────────────────────────────────────────────────────────────────────── */
.btn-outline:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.18)}

/* ── Feature cards without an image tile need their own padding ───────────
   .feature-card has never had padding of its own. On index.html that is fine
   because the content sits inside .feature-card-body, which pads it. The
   cards on features.html have no such wrapper — icon, h3 and p are direct
   children — so their text ran flush against the border.

   Keyed on the absence of .feature-card-body rather than on a page or an
   icon, so any future card built either way is correct without a new rule.

   Degrades safely: where :has() is unsupported the whole selector is invalid
   and the rule is dropped, leaving today's behaviour rather than pushing
   padding around the image cards on index.html.
   ─────────────────────────────────────────────────────────────────────── */
.feature-card:not(:has(.feature-card-body)){padding:28px}

@media(max-width:620px){
  .feature-card:not(:has(.feature-card-body)){padding:22px}
}

/* ── Trustbar after removing the .trust-copy cell ─────────────────────────
   .trust-item draws a left divider between the stats. That divider was only
   ever an inter-item rule; with the copy cell gone the first item sits at the
   card edge, so its border would read as a stray line just inside the border.
   ─────────────────────────────────────────────────────────────────────── */
.trust-item:first-child{padding-left:0;border-left:0}

/* ── Try Now sits at its hover colour ─────────────────────────────────────
   Asked for deliberately: it is the secondary call to action in the bar, and
   the brighter glass makes it read as a button rather than as a nav link that
   happens to have a border.

   Hover cannot brighten the fill any further: .18 is already the ceiling.
   The hero gradient reaches #2159aa behind the bar, where .18 gives the white
   label 4.54:1 and .26 drops it to 3.81:1 — under AA. So hover responds
   through the border instead, which carries no text-contrast cost, alongside
   the 2px lift .btn:hover already applies.
   ─────────────────────────────────────────────────────────────────────── */
.nav-links .btn-outline{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.18)}
.nav-links .btn-outline:hover{border-color:rgba(255,255,255,.95);background:rgba(255,255,255,.18)}

/* Honeypot: off-screen for bots to fill in, never shown or focusable. */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Contact form status line. Hidden until the submit handler fills it in. */
.field-error { display: block; margin-top: 6px; font-size: .875rem; color: #c0392b; }
.field [aria-invalid="true"] { border-color: #c0392b; }

/* ── Toasts ───────────────────────────────────────────────────────────────
   Every error, info and success message is shown here. The stack sits above
   the sticky header and is pinned bottom-right on desktop, full width on
   phones so a message never covers the field being corrected.
   ─────────────────────────────────────────────────────────────────────── */
.rv-toast-stack {
  position: fixed;
  z-index: 1080;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(380px, calc(100vw - 48px));
  pointer-events: none;
}

.rv-toast {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 30, 56, .18);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .22s ease, transform .22s ease;
}

.rv-toast.is-visible { opacity: 1; transform: translateY(0); }
.rv-toast.is-leaving { opacity: 0; transform: translateY(8px); }

.rv-toast__message {
  flex: 1;
  margin: 0;
  color: var(--ink);
  font-size: .94rem;
  line-height: 1.45;
}

/* Names the toast type for screen readers without repeating it on screen. */
.rv-toast__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.rv-toast__close {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.rv-toast__close:hover { background: var(--mist); color: var(--ink); }
.rv-toast__close:focus-visible { outline: 3px solid rgba(0, 120, 212, .3); outline-offset: 1px; }

.rv-toast__link { color: var(--blue); font-weight: 650; text-decoration: underline; white-space: nowrap; }
.rv-toast__link:hover { color: var(--navy); }

.rv-toast--success { border-left-color: #1e7a4c; }
.rv-toast--error   { border-left-color: #c0392b; }
.rv-toast--info    { border-left-color: var(--blue); }

@media (max-width: 640px) {
  .rv-toast-stack {
    right: 12px;
    left: 12px;
    bottom: 12px;
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rv-toast { transition: none; opacity: 1; transform: none; }
  .rv-toast.is-leaving { opacity: 0; }
}