/* ============================================================
   ASSIGNMENT PANEL — STRIPE-GRADE REDESIGN LAYER (v1)
   Loaded LAST on every marketing page, so it wins the cascade.

   Goals (per brief):
     • Typeface  → Inter (Rasmus Andersson) everywhere. No serif.
     • Palette   → keep Tory Blue #0B5FA5 + Zest #E46F2E.
     • Surfaces  → light only. No dark section backgrounds.
     • Craft     → Stripe / HubSpot calm: hairlines, soft shadows,
                   restrained type scale, generous rhythm.

   Works across BOTH marketing CSS systems (public/styles.css for
   the home page and public/assets/base.css for inner pages) because
   they share class names (.nav, .footer, .btn, .hero…) and drive
   their typography through the --serif / --sans CSS variables,
   which we re-point to Inter below.
   ============================================================ */

/* ---- 1. Typeface: re-point both font variables to Inter ----
   Every `font-family: var(--serif|--sans)` in the legacy sheets
   now resolves to Inter. One declaration, whole site. */
:root {
  --serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'cv05' 1, 'ss03' 1, 'cv11' 1;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings: Inter at display sizes reads heavier than a serif, so we
   pull the weight back to ~720 and cap the scale — Stripe/Linear keep
   hero type confident but never shouty. */
.h-display, .h-mega {
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 720;
  letter-spacing: -0.032em;
  line-height: 1.04;
}
.h-1 { font-size: clamp(34px, 4.2vw, 52px); font-weight: 720; letter-spacing: -0.028em; line-height: 1.08; }
.h-2 { font-weight: 680; letter-spacing: -0.024em; }
.h-3 { font-weight: 660; letter-spacing: -0.018em; }
.h-4 { font-weight: 640; letter-spacing: -0.014em; }
.h-display em, .h-1 em, .h-2 em, .h-3 em, .h-mega em { font-style: normal; font-weight: inherit; }
/* eyebrows/labels: clean uppercase micro-type, no italic serif */
.hero-eyebrow, .label, .eyebrow { font-style: normal !important; }

/* ---- 2. Buttons: Stripe weight, radius, soft shadow ---- */
.btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.008em;
  border-radius: 9px;
  transition: background .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease, border-color .15s ease;
}
.btn-tory, .btn-primary {
  background: var(--tory); color: #fff;
  box-shadow: 0 1px 2px rgba(11, 95, 165, 0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-tory:hover, .btn-primary:hover {
  background: var(--tory-2); color: #fff;
  box-shadow: 0 4px 14px rgba(11, 95, 165, 0.26);
  transform: translateY(-1px);
}
.btn-zest {
  background: var(--zest); color: #fff;
  box-shadow: 0 1px 2px rgba(228, 111, 46, 0.28);
}
.btn-zest:hover {
  background: var(--zest-2, #C95C1F); color: #fff;
  box-shadow: 0 4px 14px rgba(228, 111, 46, 0.30);
  transform: translateY(-1px);
}
/* Ghost buttons readable on the now-light surfaces */
.btn-ghost-l, .btn-ghost-d, .btn-white {
  background: #fff;
  color: var(--ink, #0A0A0A) !important;
  border: 1px solid rgba(10, 10, 10, 0.12);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.04);
}
.btn-ghost-l:hover, .btn-ghost-d:hover, .btn-white:hover {
  background: #f6f8fc;
  color: var(--tory) !important;
  border-color: rgba(11, 95, 165, 0.35);
  transform: translateY(-1px);
}

/* ---- 3. Nav: clean white, hairline, calm links (Stripe top bar) --- */
.nav {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid rgba(10, 10, 10, 0.06);
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 1px 0 rgba(10, 10, 10, 0.06), 0 8px 24px rgba(10, 10, 10, 0.04);
}
.nav-links a {
  color: var(--ink, #0A0A0A);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.006em;
  padding: 6px 2px;
}

/* ---- 4. HERO → light (kill the dark photo + black overlay) ----
   Hero shares the page surface so there's no white-on-bone seam — one
   calm canvas, like Stripe's. */
.hero { background: var(--bone, #faf8f3); min-height: auto; padding: 96px 0 104px; }
.hero-bg { background: transparent !important; background-image: none !important; }
.hero-overlay { background: transparent !important; }
.hero h1 { color: var(--ink, #0A0A0A); }
.hero h1 em { color: var(--tory); }
.hero .sub { color: #3f4757; }
.hero-eyebrow {
  background: rgba(11, 95, 165, 0.07) !important;
  border: 1px solid rgba(11, 95, 165, 0.16) !important;
  color: var(--tory) !important;
}
.hero-stats { border-top: 1px solid rgba(10, 10, 10, 0.10) !important; }
.hero-stat .n { color: var(--ink, #0A0A0A); }
.hero-stat .n em { color: var(--zest); }
.hero-stat .l { color: #6b7280; }

/* ---- 5. CareerPanel "family" section → light ---- */
.family-section { background: #f6f8fc !important; color: var(--ink, #0A0A0A); }
.family-section .h-1, .family-section .h-2, .family-section .h-3,
.family-section h2, .family-section h3 { color: var(--ink, #0A0A0A) !important; }
.family-section .p, .family-section p, .family-section li { color: #3f4757 !important; }
/* Feature bullets were white text on the old dark panel — make them
   readable on the new light surface (leave the orange check icons alone). */
.family-section .family-bullets li,
.family-section .family-bullets .text,
.family-section .family-bullets span { color: #41506a !important; }
.family-section .family-bullets strong { color: #16233a !important; font-weight: 600; }
.family-section .label { color: var(--tory) !important; }
.cat-tip, .cat-tip::after { background: #0A1628; } /* keep the little speech bubble */

/* Generic dark section utilities → light tint.
   Scoped with :not(.book-cover) so decorative dark props (e.g. a
   book cover on the samples page) keep their intended look. */
.sec-ink, .dark:not(.book-cover) {
  background: #f6f8fc !important;
  color: var(--ink, #0A0A0A) !important;
}
.sec-ink .h-1, .sec-ink .h-2,
.dark:not(.book-cover) .h-1, .dark:not(.book-cover) .h-2,
.sec-ink h2, .dark:not(.book-cover) h2 { color: var(--ink, #0A0A0A) !important; }

/* ---- 6. FOOTER → light, hairline, calm (home + inner) ---- */
.footer {
  background: #ffffff !important;
  color: #3f4757 !important;
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}
.footer .logo, .footer .logo-text { color: var(--ink, #0A0A0A) !important; }
.footer .logo-mark .bar { background: var(--tory) !important; }
.footer .logo-mark .bar:nth-child(2) { background: var(--zest) !important; }
.footer h5 { color: var(--ink, #0A0A0A) !important; }
.footer-tag { color: #6b7280 !important; }
.footer ul li, .footer ul li a { color: #3f4757 !important; }
.footer ul li:hover, .footer ul li a:hover { color: var(--tory) !important; }
.footer-bottom {
  color: #6b7280 !important;
  border-top: 1px solid rgba(10, 10, 10, 0.08) !important;
}
.footer-bottom .legal a { color: #6b7280 !important; }
.footer-bottom .legal a:hover { color: var(--tory) !important; }

/* ---- 7. Cards / forms: hairline + soft shadow, crisp focus ---- */
input, textarea, select { font-family: 'Inter', system-ui, sans-serif; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--tory) !important;
  box-shadow: 0 0 0 3px rgba(11, 95, 165, 0.15) !important;
}

/* ---- 8. Selection accent ---- */
::selection { background: rgba(11, 95, 165, 0.16); }

/* ============================================================
   9. MOTION & MICRO-INTERACTION CRAFT
   One easing language, subtle (1–2px) and fast (140–200ms).
   Calm, not busy — the Stripe/Linear feel.
   ============================================================ */
:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* entrances, expansion */
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Every interactive surface shares one transition language. */
.btn, .nav-links a, .nav-actions a, a.btn, button,
.safety-card, .card, .pricing-card, .review-card, .faq-item,
.hero-card, .cs-tick, input, textarea, select, .chip, .pill {
  transition:
    background-color .18s var(--ease-soft),
    border-color .18s var(--ease-soft),
    color .15s var(--ease-soft),
    box-shadow .22s var(--ease-soft),
    transform .18s var(--ease-soft);
}

/* Buttons: lift on hover, press in on click. */
.btn { will-change: transform; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); }

/* Cards that already invite interaction get a gentle lift + deeper shadow. */
.safety-card:hover, .pricing-card:hover, .review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(10, 22, 40, 0.10), 0 2px 6px rgba(10, 22, 40, 0.05);
}

/* Nav links: a quiet underline that grows from the left. */
.nav-links a { position: relative; }

/* Keyboard focus: a single, branded ring — never the raw browser outline. */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(11, 95, 165, 0.35);
  border-radius: 8px;
}

/* Calm the entrance choreography: reveals are quick and subtle, never
   sliding halfway across the screen (that templated, AI-generated feel). */
[data-reveal] { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out) !important; }
[data-reveal].sr-in, [data-reveal]:not([class*="sr-"]) { opacity: 1 !important; }
.reveal { transition-duration: .55s !important; transition-timing-function: var(--ease-out) !important; }

/* Smooth media — no hard pixel edges on the photos/cards. */
img { image-rendering: auto; }

/* Respect users who prefer less motion — kill transforms & long animations. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   10. CASE STUDY — concise single section (.mc-case)
   Replaces the old multi-beat scroll narrative. One calm block:
   portrait + outcome on the left, a tight 7-day timeline on the
   right, then a single CTA. Editorial, light, restrained.
   ============================================================ */
.mc-case { padding: 104px 0; background: #ffffff; }
.mc-case-inner { max-width: 1180px; }
.mc-case-head { max-width: 760px; margin: 0 0 52px; }
.mc-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5b6b7f; margin-bottom: 18px;
}
.mc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--zest); }
.mc-title {
  font-size: clamp(32px, 4.2vw, 50px); font-weight: 720; letter-spacing: -0.03em;
  line-height: 1.05; color: #0b1f33; margin: 0 0 14px;
}
.mc-title em { font-style: normal; color: var(--tory); }
.mc-sub { font-size: 16.5px; color: #5b6b7f; margin: 0; letter-spacing: -0.004em; }

.mc-grid {
  display: grid; grid-template-columns: 0.88fr 1.12fr; gap: 60px; align-items: start;
}
@media (max-width: 920px) { .mc-grid { grid-template-columns: 1fr; gap: 44px; } }

/* Left — portrait, outcome, supervisor quote */
.mc-portrait { margin: 0; }
.mc-portrait img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 18px; display: block;
  box-shadow: 0 18px 44px rgba(10, 22, 40, 0.14), 0 2px 8px rgba(10, 22, 40, 0.06);
}
.mc-portrait figcaption { font-size: 13px; color: #90a0b3; margin-top: 12px; }
.mc-outcome {
  display: flex; align-items: center; gap: 18px;
  margin-top: 26px; padding: 18px 22px;
  background: #f6f9fc; border: 1px solid #e4e9f0; border-radius: 16px;
}
.mc-outcome-num { font-size: 46px; font-weight: 760; letter-spacing: -0.03em; color: var(--tory); line-height: 1; }
.mc-outcome-num span { font-size: 22px; font-weight: 600; }
.mc-outcome-meta { display: flex; flex-direction: column; gap: 3px; }
.mc-outcome-meta strong { font-size: 18px; font-weight: 660; color: #0b1f33; }
.mc-outcome-meta span { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #90a0b3; }
.mc-quote {
  margin: 22px 0 0; padding-left: 18px; border-left: 3px solid var(--zest);
  font-size: 16px; line-height: 1.62; color: #41506a; font-style: italic;
}
.mc-quote cite { display: block; margin-top: 12px; font-style: normal; font-size: 12.5px; color: #90a0b3; letter-spacing: 0.02em; }

/* Right — condensed vertical timeline */
.mc-timeline { list-style: none; margin: 4px 0 0; padding: 0; position: relative; }
.mc-timeline::before { content: ""; position: absolute; left: 8px; top: 12px; bottom: 14px; width: 2px; background: #e3e9f1; }
.mc-step { position: relative; display: grid; grid-template-columns: 104px 1fr; gap: 18px; padding: 0 0 30px 34px; }
.mc-step:last-child { padding-bottom: 0; }
.mc-step::before {
  content: ""; position: absolute; left: 2px; top: 4px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--tory); box-shadow: 0 0 0 4px #fff;
  transition: transform .18s var(--ease-soft), background .18s var(--ease-soft);
}
.mc-step:hover::before { background: var(--tory); transform: scale(1.12); }
.mc-time {
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 11px; letter-spacing: 0.03em; color: var(--tory); font-weight: 600; padding-top: 3px;
  white-space: nowrap;
}
.mc-step-body h3 { font-size: 18px; font-weight: 660; letter-spacing: -0.012em; color: #0b1f33; margin: 0 0 5px; }
.mc-step-body p { font-size: 15px; line-height: 1.6; color: #5b6b7f; margin: 0; }
@media (max-width: 560px) {
  .mc-step { grid-template-columns: 1fr; gap: 4px; padding-left: 28px; }
  .mc-time { padding-top: 0; margin-bottom: 4px; }
}

/* CTA row + footnote */
.mc-cta-row {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  margin-top: 60px; padding-top: 34px; border-top: 1px solid #eef2f7;
}
.mc-cta-row p { font-size: clamp(20px, 2.4vw, 26px); font-weight: 680; letter-spacing: -0.022em; color: #0b1f33; margin: 0; }
.mc-cta-row p em { font-style: normal; color: var(--tory); }
.mc-cta-fine {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: #90a0b3; margin-left: auto;
}
.mc-footnote { margin: 26px 0 0; font-size: 12.5px; line-height: 1.65; color: #aeb8c6; max-width: 820px; }

/* ============================================================
   11. WHITE, NOT CREAM
   Re-point the warm bone/cream tokens to crisp white + a cool,
   barely-there gray for panels. No warm off-white anywhere.
   ============================================================ */
:root {
  --bone:    #ffffff;
  --cream:   #f5f8fc;
  --cream-2: #eef3f9;
  /* Tighten the palette to brand: fold the stray purple "vivid" accent
     used on inner pages into Tory Blue. Two colours only — blue + zest. */
  --vivid:   #0B5FA5;
  --vivid-2: #0E72C4;
  /* The darkest navy (--tory-4) was used as a background for feature/CTA
     bands. Re-point it to a deep brand blue so nothing reads "dark". */
  --tory-4:  #0a4f8a;
}
/* Buttons sitting on a now-blue band stay legible as white chips. */
.gnt-cta .btn, .gnt-cta .btn-tory { background: #ffffff !important; color: var(--tory) !important; }
.gnt-cta .btn:hover { background: #eef5fc !important; }
body { background: #ffffff; }
.hero { background: #ffffff; }

/* ============================================================
   12. WHY IT'S SAFE — calm numbered grid (.why-safe)
   Replaces the auto-shuffling 10-card deck. Scannable, white,
   editorial. Smooth hover lift, hairline edges.
   ============================================================ */
.why-safe { padding: 104px 0; background: #ffffff; }
.ws-head { max-width: 720px; margin: 0 auto 52px; text-align: center; }
.ws-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #5b6b7f; margin-bottom: 18px;
}
.ws-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--zest); }
.ws-title { font-size: clamp(32px, 4.2vw, 50px); font-weight: 720; letter-spacing: -0.03em; line-height: 1.05; color: #0b1f33; margin: 0 0 14px; }
.ws-title em { font-style: normal; color: var(--tory); }
.ws-sub { font-size: 16.5px; color: #5b6b7f; margin: 0; letter-spacing: -0.004em; }

.ws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 18px;
}
.ws-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #e6ebf2;
  border-radius: 16px;
  padding: 26px 24px 24px;
  overflow: hidden;
  transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft), border-color .2s var(--ease-soft);
}
/* a hairline accent that wipes in from the top-left on hover */
.ws-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--tory); border-radius: 3px 3px 0 0;
  transition: width .28s var(--ease-out);
}
.ws-card:hover { transform: translateY(-4px); border-color: #d3deee; box-shadow: 0 14px 34px rgba(10, 22, 40, 0.09), 0 2px 6px rgba(10, 22, 40, 0.05); }
.ws-card:hover::before { width: 100%; }
.ws-num {
  display: block; margin-bottom: 16px;
  font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--tory);
}
.ws-card h3 { font-size: 17px; font-weight: 660; letter-spacing: -0.014em; color: #0b1f33; margin: 0 0 8px; }
.ws-card p { font-size: 14.5px; line-height: 1.6; color: #5b6b7f; margin: 0; }

/* ============================================================
   13. SERVICE TILES (/services) — rebuilt as clean light cards
   A past "remove all gradients" pass left these with white text on
   a transparent background (invisible). Restore them as white,
   bordered, hover-lift tiles with a blue icon — matching .ws-card.
   ============================================================ */
.svc-tile {
  background: #ffffff !important;
  border: 1px solid #e6ebf2 !important;
  border-radius: 18px !important;
  color: #0b1f33 !important;
  box-shadow: 0 1px 2px rgba(16, 42, 73, 0.05) !important;
  transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft), border-color .2s var(--ease-soft) !important;
}
.svc-tile:hover {
  transform: translateY(-4px) !important;
  border-color: #d3deee !important;
  box-shadow: 0 16px 38px rgba(10, 22, 40, 0.10), 0 2px 6px rgba(10, 22, 40, 0.05) !important;
}
.svc-tile h3 { color: #0b1f33 !important; letter-spacing: -0.018em; }
.svc-tile p { color: #5b6b7f !important; }
.svc-tile .svc-tile-foot, .svc-tile .price-from { color: #0b1f33 !important; font-weight: 600; }
.svc-tile .price-from small, .svc-tile small, .svc-tile em { color: #90a0b3 !important; font-weight: 500; font-style: normal; }
.svc-icon {
  background: #eaf2fb !important;
  color: var(--tory) !important;
  border-radius: 12px !important;
}
.svc-icon svg, .svc-tile-foot svg, .svc-tile svg { color: var(--tory) !important; }

/* ============================================================
   14. PRICING — the "featured" plan (/pricing)
   Lost its gradient background (white text on white = invisible).
   Restore it as the single standout: a solid Tory-blue plan card
   with a white CTA. Other plans stay clean white with dark text.
   ============================================================ */
.prc-card.featured {
  background: var(--tory) !important;
  border: 1px solid var(--tory) !important;
  box-shadow: 0 20px 48px rgba(11, 95, 165, 0.26) !important;
}
.prc-card.featured .btn,
.prc-card.featured .btn-tory,
.prc-card.featured .btn-zest {
  background: #ffffff !important;
  color: var(--tory) !important;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.18) !important;
}
.prc-card.featured .btn:hover { background: #eef5fc !important; color: var(--tory-2, #0E72C4) !important; }

/* ============================================================
   15. SAMPLE BOOK COVERS (/samples)
   The varied "book cover" colours were stripped to transparent
   (white text on white). Restore each cover's solid colour so the
   bookshelf reads. The cream cover goes light-with-dark-text.
   ============================================================ */
.book-cover.tory   { background: var(--tory) !important; }
.book-cover.jungle { background: var(--jungle, #2AA872) !important; }
.book-cover.vivid  { background: var(--vivid) !important; }
.book-cover.zest   { background: var(--zest) !important; }
.book-cover.dark   { background: #0b1f33 !important; }
.book-cover.cream  { background: #e9edf3 !important; }
.book-cover.cream .book-title,
.book-cover.cream .book-author,
.book-cover.cream .book-tag { color: #0b1f33 !important; }
.book-cover.cream .book-tag { background: rgba(11, 37, 64, 0.08) !important; }

/* ============================================================
   16. TL;DR CALLOUT (.tldr-section) — was a dark navy band with
   dark text (invisible + a dark background). Convert to a clean
   light-blue callout with dark text. Shared across content pages.
   ============================================================ */
.tldr-section, .vault-section {
  background: #f4f8fc !important;
  border: 1px solid #e4ecf5 !important;
  border-radius: 18px !important;
  color: #3c4a5e !important;
}
.tldr-section *:not(.btn):not(svg):not(path):not(.btn-tory):not(.btn-zest),
.vault-section *:not(.btn):not(svg):not(path):not(.btn-tory):not(.btn-zest) { color: #41506a !important; }
.tldr-section h1, .tldr-section h2, .tldr-section h3, .tldr-section .sec-head, .tldr-section strong,
.vault-section h1, .vault-section h2, .vault-section h3, .vault-section .sec-head, .vault-section strong { color: #0b1f33 !important; }
.tldr-section em, .vault-section em { color: var(--tory) !important; }
.tldr-section svg, .vault-section svg { color: var(--tory) !important; }

/* Guarantee seal badge — lost its colour (white text on white). Restore. */
.gnt-seal-core { background: var(--tory) !important; }
.gnt-seal-core .lbl { color: #ffffff !important; }
.gnt-seal-core .sublbl { color: rgba(255, 255, 255, 0.85) !important; }

/* Featured contact channel (/contact) — lost its colour. Solid blue. */
.ct-channel.featured { background: var(--tory) !important; border-color: var(--tory) !important; box-shadow: 0 16px 38px rgba(11, 95, 165, 0.22) !important; }
.ct-channel.featured .btn { background: #ffffff !important; color: var(--tory) !important; }

/* ============================================================
   17. HEADER & FOOTER ANCHORS
   On an all-white page the nav and footer vanished. Give the
   header a crisp defined white bar, and the footer a solid
   Tory-blue block so it's unmistakably the end of the page.
   (Header stays light for nav legibility; footer carries the colour.)
   ============================================================ */

/* Header — a clearly defined white bar that floats over the page. */
.nav {
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid rgba(10, 22, 40, 0.10) !important;
  box-shadow: 0 1px 3px rgba(10, 22, 40, 0.05) !important;
}
.nav.scrolled { box-shadow: 0 4px 16px rgba(10, 22, 40, 0.08) !important; }

/* Footer — solid Tory-blue block with a thin zest top accent. */
.footer {
  background: var(--tory) !important;
  color: rgba(255, 255, 255, 0.80) !important;
  border-top: 3px solid var(--zest) !important;
}
.footer .logo, .footer .logo-text { color: #ffffff !important; }
.footer .logo-mark .bar { background: #ffffff !important; }
.footer .logo-mark .bar:nth-child(2) { background: var(--zest) !important; }
.footer h5 { color: #ffffff !important; }
.footer-tag { color: rgba(255, 255, 255, 0.72) !important; }
.footer ul li, .footer ul li a { color: rgba(255, 255, 255, 0.82) !important; }
.footer ul li:hover, .footer ul li a:hover { color: #ffffff !important; }
.footer-bottom {
  color: rgba(255, 255, 255, 0.62) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.16) !important;
}
.footer-bottom .legal a { color: rgba(255, 255, 255, 0.72) !important; }
.footer-bottom .legal a:hover { color: #ffffff !important; }

/* ============================================================
   18. HERO DEPTH — kill the flatness without a stock photo
   A faint dot-grid for texture, two soft brand-tinted glows so
   the quote card floats off an aura, and a bottom fade so it
   melts cleanly into the page. The Stripe/Linear move.
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero-bg {
  position: absolute !important;
  inset: 0 !important;
  background-color: #ffffff !important;
  background-image:
    radial-gradient(820px 520px at 82% 16%, rgba(11, 95, 165, 0.10), rgba(11, 95, 165, 0) 60%),
    radial-gradient(620px 480px at 6% 94%, rgba(228, 111, 46, 0.06), rgba(228, 111, 46, 0) 55%),
    radial-gradient(rgba(13, 42, 73, 0.055) 1px, rgba(0, 0, 0, 0) 1.4px) !important;
  background-size: 100% 100%, 100% 100%, 22px 22px !important;
  background-repeat: no-repeat, no-repeat, repeat !important;
  background-position: 0 0, 0 0, 0 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0) 100%) !important;
          mask-image: linear-gradient(to bottom, #000 0%, #000 58%, rgba(0,0,0,0) 100%) !important;
}
/* A soft halo directly behind the floating quote card. */
.hero .calc { position: relative; }
.hero .calc::before {
  content: "";
  position: absolute;
  inset: -40px -30px -30px -40px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(11, 95, 165, 0.14), rgba(11, 95, 165, 0) 100%);
  filter: blur(6px);
  pointer-events: none;
}

/* ============================================================
   19. SECTION RHYTHM — depth via alternating bands
   All-white made the page read as one flat sheet. Alternate
   white with a faint cool-gray so each section is its own band,
   and lift the cards a touch so they sit ABOVE the surface.
   Sequence: white(hero) · tint(safe) · white(careers) ·
   tint(portal) · white(case) · blue(contact) · white(faq) · blue(footer)
   ============================================================ */
.why-safe { background: #f6f8fc !important; }
.family-section { background: #ffffff !important; }

/* Dark portal-showcase → a clean light showcase band */
#portal-showcase, .portal-pitch, .portal-pitch-bg { background: #f6f8fc !important; }
/* Base text dark so nothing inherits the old white-on-dark colour. */
#portal-showcase, #portal-showcase .portal-pitch-left,
#portal-showcase p, #portal-showcase span, #portal-showcase div,
#portal-showcase li { color: #3c4a5e !important; }
/* The dashboard mockup inside becomes a clean white app-preview card */
.portal-dash-frame {
  background: #ffffff !important;
  border: 1px solid #e6ebf2 !important;
  box-shadow: 0 24px 60px rgba(10, 22, 40, 0.14) !important;
}
.portal-dash-frame [class*="bar"], .portal-dash-bar { background: #eef3f9 !important; }
.portal-dash-frame .portal-dash-live, .portal-dash-live { color: var(--tory) !important; }
.portal-notif { background: #ffffff !important; border: 1px solid #eef2f7 !important; color: #0b1f33 !important; }
.portal-notif *:not(svg):not(path) { color: #3c4a5e !important; }
.portal-orb { opacity: 0.35 !important; }
#portal-showcase .portal-h, #portal-showcase .portal-feat-title { color: #0b1f33 !important; }
#portal-showcase .portal-h em { color: var(--tory) !important; font-style: normal; }
#portal-showcase .portal-sub, #portal-showcase .portal-feat-desc { color: #5b6b7f !important; }
#portal-showcase .portal-eyebrow { color: var(--tory) !important; }
#portal-showcase .portal-eyebrow-dot { background: var(--zest) !important; }
.portal-feat {
  background: #ffffff !important;
  border: 1px solid #e6ebf2 !important;
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 6px 16px rgba(10, 22, 40, 0.05) !important;
}
.portal-feat-icon { background: #eaf2fb !important; color: var(--tory) !important; }
.portal-feat-icon svg { color: var(--tory) !important; }
#portal-showcase .btn-portal-ghost {
  color: #0b1f33 !important;
  background: #ffffff !important;
  border: 1px solid rgba(10, 22, 40, 0.16) !important;
}
#portal-showcase .btn-portal-ghost:hover { background: #f1f5fb !important; color: var(--tory) !important; }

/* Lift the content cards off the surface (less flat) */
.ws-card, .svc-tile {
  box-shadow: 0 1px 2px rgba(10, 22, 40, 0.04), 0 6px 18px rgba(10, 22, 40, 0.06) !important;
}
.card { box-shadow: 0 1px 2px rgba(16, 42, 73, 0.04), 0 4px 14px rgba(16, 42, 73, 0.05); }