/* =====================================================================
   Darren Talks : apple-design preview layer
   Loaded LAST on every page so it sits on top of shared.css and the
   per-page <style> blocks. Brand kept (navy + green), everything else
   follows the apple.com system: whitespace, type first, quiet colour.
   ===================================================================== */

:root {
  --a-bg: #ffffff;
  --a-bg-alt: #f6f7f9;
  --a-bg-elev: #f0f1f4;
  --a-ink: #1d1d1f;
  --a-ink-2: #56565b;
  --a-ink-3: #6e6e73;
  --a-line: #d2d2d7;
  --a-navy: #0f1e33;
  --a-green: #2a7350;
  --a-green-hover: #236244;
  --a-green-soft: #e8f2ec;
  --a-radius: 18px;
  --a-radius-sm: 12px;
  --a-pill: 980px;
  --a-shadow: 0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.07);
  --a-shadow-hover: 0 4px 12px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.10);
  --a-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
  --a-ease: cubic-bezier(.25,.1,.25,1);

  /* re-point the old site variables so every page inherits the new palette */
  --hero-dark: #0f1e33;
  --navy: #0f1e33;
  --text-dark: #1d1d1f;
  --text-body: #424245;
  --grey-light: #f0f1f4;
  --grey-mid: #d2d2d7;
  --grey-text: #56565b;
  --green: #2a7350;
  --green-dark: #236244;
  --radius: 18px;
  --radius-sm: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.06), 0 16px 40px rgba(0,0,0,.10);
}

/* ---------- Base ---------- */
html body {
  font-family: var(--a-font) !important;
  font-size: 17px;
  line-height: 1.53;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html body h1, html body h2, html body h3, html body h4 {
  font-family: var(--a-font) !important;
  letter-spacing: -0.022em;
  font-weight: 700;
}
html body h1 { line-height: 1.07; }
html body h2 { line-height: 1.1; }
html body h3 { line-height: 1.2; letter-spacing: -0.015em; font-weight: 600; }
html body a { transition: color .2s var(--a-ease), background .2s var(--a-ease), opacity .2s var(--a-ease); }
::selection { background: rgba(42,115,80,.18); }

html body.a-std .container { max-width: 1080px; padding-left: 22px; padding-right: 22px; }
html body .section { padding: 100px 0; }
html body .section-sm { padding: 64px 0; }
html body .section-lg { padding: 120px 0; }
@media (max-width: 734px) {
  html body { font-size: 16px; }
  html body .section { padding: 64px 0; }
  html body .section-lg { padding: 80px 0; }
  html body .container { padding-left: 20px; padding-right: 20px; }
}

/* Eyebrows: small, green, no shouting */
html body .eyebrow, html body .small-eyebrow, html body .hero-eyebrow {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--a-green) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
}
html body .section-title {
  font-size: clamp(32px, 4.4vw, 48px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.08 !important;
  color: var(--a-ink) !important;
}
html body .section-sub, html body .lede {
  font-size: clamp(19px, 2vw, 21px) !important;
  line-height: 1.45 !important;
  font-weight: 400;
}
html body .section-header { margin-bottom: 48px; }

/* ---------- Promo banner (was orange) ---------- */
.fr-banner{background:#f5a524;color:#0f1e33;position:relative;z-index:101;}
.fr-banner-inner{max-width:1200px;margin:0 auto;padding:11px 52px 11px 24px;display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;font-size:.98rem;line-height:1.4;text-align:center;}
.fr-banner strong{font-weight:800;}
.fr-banner a.fr-banner-btn{background:#0f1e33;color:#fff;font-weight:700;padding:8px 16px;border-radius:999px;white-space:nowrap;font-size:.9rem;}
.fr-banner a.fr-banner-btn:hover{background:#1a2e4a;}
.fr-banner-x{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:1.3rem;line-height:1;color:#0f1e33;opacity:.7;padding:6px;}
@media(max-width:600px){.fr-banner-inner{font-size:.9rem;gap:10px;padding:10px 40px 10px 16px;}}
html body .fr-banner { background: var(--a-green) !important; color: #fff !important; border-bottom: none; }
html body .fr-banner-inner { font-size: 14px !important; padding-top: 11px !important; padding-bottom: 11px !important; gap: 14px !important; }
html body .fr-banner strong { font-weight: 600 !important; }
html body .fr-banner a.fr-banner-btn { background: #fff !important; color: var(--a-green) !important; padding: 6px 16px !important; border-radius: 999px !important; font-weight: 600 !important; font-size: 13px !important; white-space: nowrap; }
html body .fr-banner a.fr-banner-btn:hover { background: #eef2ef !important; text-decoration: none; }
html body .fr-banner-x { color: rgba(255,255,255,.85) !important; font-size: 18px !important; }

/* ---------- Navigation: frosted glass bar ---------- */
html body .nav {
  background: rgba(251,251,253,.80) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: none !important;
}
html body .nav-inner { min-height: 56px !important; padding: 6px 22px !important; max-width: 1080px !important; }
html body .nav .logo img { height: 36px !important; }
html body .nav-links a {
  color: var(--a-ink) !important;
  opacity: .82;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
  background: none !important;
  padding: 6px 10px !important;
}
html body .nav-links a:hover { opacity: 1; color: var(--a-ink) !important; }
html body .nav-links a.active { opacity: 1; color: var(--a-green) !important; font-weight: 500 !important; }
html body .nav-links a.active::after, html body .nav-links a::after { display: none !important; }
html body .nav-toggle span, html body .nav-toggle::before, html body .nav-toggle::after { background: var(--a-ink) !important; }
@media (max-width: 1068px) {
  html body .nav-links.open, html body .nav-links.active, html body .nav-links.show {
    background: rgba(251,251,253,.97) !important;
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0,0,0,.08) !important;
  }
  html body .nav-links.open a, html body .nav-links.active a, html body .nav-links.show a {
    font-size: 17px !important; padding: 12px 22px !important; opacity: 1;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
}

/* Breadcrumb */
html body .dt-breadcrumb { background: transparent !important; border: 0 !important; font-size: 13px !important; color: var(--a-ink-2) !important; }
html body .dt-breadcrumb a { color: var(--a-green) !important; }

/* ---------- Buttons: pills ---------- */
html body .btn, html body .btn-cta, html body .btn-primary, html body button.dt-newsletter-btn,
html body .dt-signup-btn, html body .fr-banner-btn, html body .cta-button, html body a.button {
  border-radius: var(--a-pill) !important;
  font-family: var(--a-font) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  box-shadow: none !important;
  transform: none !important;
}
html body .btn { padding: 12px 24px !important; font-size: 17px !important; }
html body .btn-sm { padding: 8px 18px !important; font-size: 15px !important; }
html body .btn-lg { padding: 14px 28px !important; font-size: 17px !important; }
html body .btn-primary, html body .btn-cta, html body .dt-newsletter-btn {
  background: var(--a-green) !important; color: #fff !important; border: 0 !important;
}
html body .btn-primary:hover, html body .btn-cta:hover, html body .dt-newsletter-btn:hover {
  background: var(--a-green-hover) !important;
}
html body .btn-outline, html body .btn-outline-dark {
  background: transparent !important;
  color: var(--a-green) !important;
  border: 1px solid var(--a-green) !important;
}
html body .btn-outline:hover, html body .btn-outline-dark:hover { background: var(--a-green) !important; color: #fff !important; }

/* "Read more" style links: Apple's chevron link */
html body .read-more, html body .tool-arrow {
  color: var(--a-green) !important;
  font-weight: 400 !important;
  font-size: 17px !important;
}
html body .read-more:hover { text-decoration: underline; }

/* ---------- Homepage hero ---------- */
html body .hero {
  background: var(--a-bg-elev) !important;
  color: var(--a-ink) !important;
  padding: 96px 0 100px !important;
  overflow: hidden;
}
html body .hero::before, html body .hero::after { display: none !important; }
html body .hero h1 {
  color: var(--a-ink) !important;
  font-size: clamp(44px, 6.6vw, 80px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.04 !important;
}
html body .hero h1 span { color: var(--a-green) !important; }
html body .hero .hero-sub { color: var(--a-ink-2) !important; font-size: clamp(19px, 2vw, 22px) !important; line-height: 1.42 !important; }
html body .hero .hero-eyebrow { margin-bottom: 18px !important; }
html body .hero .btn-outline { color: var(--a-green) !important; border-color: var(--a-green) !important; }
html body .hero .btn-outline:hover { color: #fff !important; }
html body .hero-video .vframe { border-radius: 28px !important; box-shadow: 0 30px 60px rgba(0,0,0,.18) !important; background: #000; }
html body .hero-video-cap { color: var(--a-ink-2) !important; font-size: 13px !important; }

/* Stats bar: big Apple numbers */
html body .stats-bar { background: #fff !important; border: 0 !important; padding: 72px 0 !important; }
html body .stat-num { color: var(--a-ink) !important; font-size: clamp(36px, 4.6vw, 56px) !important; font-weight: 700 !important; letter-spacing: -0.03em !important; line-height: 1 !important; }
html body .stat-label { color: var(--a-ink-2) !important; font-size: 15px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: -0.01em !important; margin-top: 8px; }

/* About strip */
html body .about-strip { background: var(--a-bg-alt) !important; }
html body .about-strip img { box-shadow: none !important; border: 0 !important; }

/* Category tiles (homepage "What do you want to learn") */
html body .cat-grid { gap: 20px !important; }
html body .category-card {
  background: var(--a-bg-alt) !important;
  border: 0 !important;
  border-radius: var(--a-radius) !important;
  box-shadow: none !important;
  padding: 32px 24px !important;
  transition: transform .35s var(--a-ease), box-shadow .35s var(--a-ease), background .35s var(--a-ease) !important;
}
html body .category-card:hover { background: #fff !important; box-shadow: var(--a-shadow-hover) !important; transform: translateY(-4px) !important; }
html body .cat-icon { display: inline-flex !important; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--a-green); font-size: 0 !important; margin-bottom: 14px !important; }
html body .cat-icon svg { width: 36px; height: 36px; }
html body .cat-title { color: var(--a-ink) !important; font-size: 19px !important; font-weight: 600 !important; letter-spacing: -0.015em; }
html body .cat-count { color: var(--a-ink-2) !important; font-size: 14px !important; }

/* CTA strip ("If a conversation would help") as a dark rounded tile */
html body .cta-strip, html body .cta-strip-navy {
  background: #fff !important;
  padding: 24px 0 100px !important;
}
html body .cta-strip > .container {
  background: var(--a-navy);
  border-radius: 28px;
  padding: 80px 40px !important;
  max-width: 1036px;
}
html body .cta-strip h2 { color: #fff !important; font-size: clamp(32px, 4.4vw, 48px) !important; letter-spacing: -0.025em !important; }
html body .cta-strip p { color: rgba(255,255,255,.72) !important; font-size: 19px !important; }
html body .cta-strip .btn { background: #fff !important; color: var(--a-ink) !important; border: 0 !important; }
html body .cta-strip .btn:hover { background: #f5f5f7 !important; }
html body .cta-strip a:not(.btn) { color: #9be3c0 !important; }
@media (max-width: 734px) { html body .cta-strip > .container { border-radius: 22px; padding: 56px 24px !important; margin: 0 16px; } }

/* ---------- Page and article heroes: light, type first ---------- */
html body .blog-hero, html body .page-hero, html body .journey-hero, html body .roadmap-hero,
html body .about-hero {
  background: var(--a-bg-elev) !important;
  background-image: none !important;
  color: var(--a-ink) !important;
  padding: 72px 22px 56px !important;
}
html body .blog-hero::before, html body .blog-hero::after,
html body .page-hero::before, html body .page-hero::after,
html body .journey-hero::before, html body .journey-hero::after,
html body .roadmap-hero::before, html body .roadmap-hero::after { display: none !important; }
html body .blog-hero h1, html body .page-hero h1, html body .journey-hero h1, html body .roadmap-hero h1,
html body .about-hero h1 {
  color: var(--a-ink) !important;
  font-size: clamp(36px, 5.6vw, 64px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.032em !important;
  line-height: 1.06 !important;
}
html body .blog-hero h1 { max-width: 900px; margin-left: auto; margin-right: auto; }
html body .blog-hero p, html body .page-hero p, html body .journey-hero p, html body .roadmap-hero p,
html body .about-hero p { color: var(--a-ink-2) !important; }
html body :is(.blog-hero,.page-hero,.journey-hero,.roadmap-hero,.about-hero) > p,
html body :is(.blog-hero,.page-hero,.journey-hero,.roadmap-hero,.about-hero) > .container > p,
html body :is(.page-hero,.roadmap-hero,.about-hero) :is(.hero-inner,.hero-left,.about-hero-inner,.hero-copy) > div > p,
html body :is(.page-hero,.roadmap-hero,.about-hero) :is(.hero-left,.about-hero-inner,.hero-copy) > p {
  font-size: clamp(19px, 2vw, 22px) !important;
  line-height: 1.42 !important;
  max-width: 720px;
}
html body .blog-hero > .container > p { margin-left: auto; margin-right: auto; }
html body .blog-hero .blog-meta-item { color: var(--a-ink-3) !important; font-size: 14px !important; }
html body .blog-hero .blog-meta-item + .blog-meta-item::before { color: var(--a-line) !important; }
html body .blog-hero .eyebrow, html body .page-hero .eyebrow, html body .page-hero.with-image .eyebrow,
html body .journey-hero .eyebrow, html body .roadmap-hero .eyebrow { color: var(--a-green) !important; background: none !important; }
html body .journey-hero p a:not([class]), html body .roadmap-hero p a:not([class]), html body .journey-hero .breadcrumb a { color: var(--a-green) !important; }
html body .journey-hero, html body .journey-hero * { text-shadow: none !important; }
html body .roadmap-hero li, html body .roadmap-hero .hero-bullets li { color: var(--a-ink) !important; }

/* Hero photo, moved out of the background into a rounded frame */
html body .a-hero-photo {
  max-width: 1036px;
  margin: 40px auto 0;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 21 / 9;
  background: var(--a-bg-alt);
}
html body .a-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 734px) {
  html body .blog-hero, html body .page-hero, html body .journey-hero, html body .roadmap-hero { padding: 48px 20px 36px !important; }
  html body .a-hero-photo { aspect-ratio: 4 / 3; border-radius: 18px; margin-top: 28px; }
}

/* ---------- Article body ---------- */
html body .blog-content { color: #333336 !important; font-size: 19px !important; line-height: 1.6 !important; }
html body .blog-content h2 {
  font-size: clamp(28px, 3.2vw, 36px) !important;
  letter-spacing: -0.025em !important;
  margin-top: 64px !important; margin-bottom: 18px !important;
  border: 0 !important; padding: 0 !important;
}
html body .blog-content h3 { font-size: 22px !important; margin-top: 36px !important; }
html body .blog-content p a:not([class]):not([style*="background"]), html body .blog-content li a:not([class]):not([style*="background"]), html body .blog-content td a:not([class]) { color: var(--a-green) !important; text-decoration: none !important; }
html body .blog-content p a:hover, html body .blog-content li a:hover, html body .blog-content td a:hover { text-decoration: underline !important; }
html body .blog-content a.btn, html body .blog-content a.btn-cta, html body .blog-content a.btn-primary { color: #fff !important; text-decoration: none !important; }

html body .blog-content blockquote { border-left: 0 !important; padding: 0 !important; font-size: 26px !important; line-height: 1.3; color: var(--a-ink) !important; font-weight: 600; letter-spacing: -0.02em; margin: 40px 0 !important; background: none !important; }
@media (max-width: 734px) { html body .blog-content { font-size: 17px !important; } }

/* Callouts, tips and boxes: soft tinted panels, no heavy borders */
html body .callout, html body .soft-cta, html body .cta-box, html body .homeowner-box, html body .warning,
html body .jargon-explainer, html body .disclaimer, html body .signup-card, html body .journey-link-block {
  border-radius: var(--a-radius) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html body .callout:not(.green):not(.gold):not(.warning):not(.amber):not(.red), html body .homeowner-box, html body .jargon-explainer, html body .journey-link-block {
  background: var(--a-bg-alt) !important;
}
html body .callout, html body .homeowner-box, html body .jargon-explainer, html body .journey-link-block { padding: 26px 30px !important; }
@media (max-width: 734px) { html body .callout, html body .homeowner-box, html body .jargon-explainer, html body .journey-link-block { padding: 20px 20px !important; } }
html body .callout-title { color: var(--a-green) !important; font-size: 15px !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: -0.01em !important; }
html body .soft-cta, html body .signup-card { background: var(--a-green-soft) !important; padding: 36px !important; }
html body .disclaimer { background: transparent !important; color: var(--a-ink-3) !important; font-size: 13px !important; padding: 0 !important; }

/* Tables */
html body table { border-collapse: collapse !important; border: 0 !important; font-size: 16px; }
html body table th { font-weight: 600 !important; border: 0 !important; border-bottom: 1px solid var(--a-line) !important; text-transform: none !important; letter-spacing: -0.01em !important; }
html body table td { border: 0 !important; border-bottom: 1px solid #e8e8ed !important; }
html body table tr:nth-child(even) td { background: transparent !important; }
html body .table-responsive { border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }

/* ---------- Cards across the site ---------- */
html body .blog-card, html body .video-card, html body .tool-card, html body .topic-card, html body .roundup-card,
html body .jargon-card, html body .step-card, html body .stage-card {
  background: #fff !important;
  border: 1px solid #dfe1e6 !important;
  border-radius: var(--a-radius) !important;
  box-shadow: var(--a-shadow) !important;
  overflow: hidden;
  transition: transform .35s var(--a-ease), box-shadow .35s var(--a-ease) !important;
}
html body .blog-card:hover, html body .video-card:hover, html body .tool-card:hover, html body .topic-card:hover,
html body .roundup-card:hover, html body .stage-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: var(--a-shadow-hover) !important;
}
html body .blog-card h2, html body .blog-card h3, html body .video-card-title, html body .tool-card h3, html body .topic-card h3 {
  color: var(--a-ink) !important; font-weight: 600 !important; letter-spacing: -0.02em !important;
}
html body .blog-card-thumb { border-radius: 0 !important; background: var(--a-bg-alt); }
html body .blog-tag, html body .video-card-category, html body .tool-tag, html body .tag, html body .status-tag {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  color: var(--a-green) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
}
html body .blog-card .blog-meta-item, html body .meta { color: var(--a-ink-3) !important; font-size: 13px !important; }
html body .video-thumb { border-radius: 0 !important; }
html body .play-btn { background: rgba(255,255,255,.88) !important; color: var(--a-ink) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 24px rgba(0,0,0,.18) !important; }
html body .play-btn svg, html body .play-btn path { fill: var(--a-ink) !important; }

/* Grey sections alternate with white, Apple style */
html body .section.alt, html body .section.grey, html body section.bg-light, html body .bg-grey { background: var(--a-bg-alt) !important; }

/* Blog filter chips and search */
html body .filter-btn, html body .cat-filter, html body .blog-filter button, html body .filter-chip, html body [data-filter] {
  border-radius: var(--a-pill) !important;
  border: 0 !important;
  background: var(--a-bg-alt) !important;
  color: var(--a-ink) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  box-shadow: none !important;
}
html body .filter-btn.active, html body .cat-filter.active, html body .filter-chip.active, html body [data-filter].active {
  background: var(--a-ink) !important; color: #fff !important;
}
html body input[type="search"], html body input[type="text"], html body input[type="email"], html body input[type="number"],
html body input[type="tel"], html body select, html body textarea {
  border-radius: 12px !important;
  border: 1px solid var(--a-line) !important;
  background: #fff !important;
  font-family: var(--a-font) !important;
  font-size: 17px !important;
  color: var(--a-ink) !important;
  box-shadow: none !important;
}
html body input:focus, html body select:focus, html body textarea:focus {
  outline: none !important;
  border-color: var(--a-green) !important;
  box-shadow: 0 0 0 4px rgba(42,115,80,.15) !important;
}

/* ---------- Calculators ---------- */
html body .calc-field label, html body .form-group label { color: var(--a-ink) !important; font-weight: 500 !important; font-size: 15px !important; }
html body .calculator, html body .calc-card, html body .calc-box, html body .calc-panel, html body .results, html body .result-card, html body .results-card {
  border-radius: var(--a-radius) !important;
  border: 0 !important;
  box-shadow: var(--a-shadow) !important;
}
html body .breakdown-value, html body .result-value, html body .result-big { letter-spacing: -0.02em !important; }
html body input[type="range"] { accent-color: var(--a-green); }

/* FAQ: clean disclosure list */
html body .faq-item { border: 0 !important; border-bottom: 1px solid var(--a-line) !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
html body .faq-item summary, html body .faq-q, html body .faq-question { font-size: 19px !important; font-weight: 600 !important; color: var(--a-ink) !important; letter-spacing: -0.015em; padding: 22px 0 !important; }
html body .faq-body { color: var(--a-ink-2) !important; font-size: 17px !important; }

/* Journey checklist */
html body .j-checklist-item, html body .checklist-item { border-color: #e8e8ed !important; }
html body .j-check-box, html body .check-box { border-radius: 7px !important; border-color: var(--a-line) !important; }
html body .step-num, html body .timeline-dot { background: var(--a-green) !important; color: #fff !important; box-shadow: none !important; }
html body .fact-number { letter-spacing: -0.03em !important; }
html body .trust-bar { background: var(--a-bg-alt) !important; border: 0 !important; }
html body .trust-item { color: var(--a-ink) !important; }

/* Related articles block */
html body .dt-related { background: var(--a-bg-alt) !important; border: 0 !important; border-radius: var(--a-radius) !important; }

/* ---------- Newsletter: Apple style sign-up band ---------- */
html body .dt-newsletter {
  background: var(--a-bg-alt) !important;
  color: var(--a-ink) !important;
  padding: 80px 0 !important;
  border: 0 !important;
}
html body .dt-newsletter-title { color: var(--a-ink) !important; font-size: clamp(28px, 3.2vw, 36px) !important; letter-spacing: -0.025em !important; font-weight: 700 !important; }
html body .dt-newsletter-sub { color: var(--a-ink-2) !important; font-size: 17px !important; }
html body .dt-newsletter-input { background: #fff !important; color: var(--a-ink) !important; border: 1px solid var(--a-line) !important; border-radius: var(--a-pill) !important; padding-left: 20px !important; }
html body .dt-newsletter-input::placeholder { color: var(--a-ink-3) !important; }

/* ---------- Footer: light, small print, apple.com style ---------- */
html body.a-std .footer {
  background: var(--a-bg-alt) !important;
  color: var(--a-ink-2) !important;
  border-top: 0 !important;
  padding: 56px 0 32px !important;
  font-size: 12px !important;
}
html body.a-std .footer .container { max-width: 1080px; }
html body.a-std .footer h4, html body.a-std .footer h3, html body.a-std .footer .footer-col h4 {
  color: var(--a-ink) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 10px !important;
}
html body.a-std .footer a, html body.a-std .footer li, html body.a-std .footer p { color: #424245 !important; font-size: 12px !important; line-height: 1.9 !important; }
html body.a-std .footer a:hover { color: var(--a-ink) !important; text-decoration: underline; }
html body.a-std .footer .logo-darren { color: var(--a-ink) !important; }
html body.a-std .footer .logo-talks { color: var(--a-green) !important; }
html body.a-std .footer .logo { font-size: 17px !important; justify-content: flex-start !important; }
html body.a-std .footer-bottom { border-top: 1px solid var(--a-line) !important; margin-top: 32px !important; padding-top: 18px !important; }
html body.a-std .footer-disclaimer, html body.a-std .footer-bottom p, html body.a-std .footer-bottom a { color: var(--a-ink-2) !important; font-size: 12px !important; }
html body.a-std .footer ~ * a, html body body > .policy-links a { color: var(--a-ink-2) !important; }

/* Cookie banner: frosted card */
html body .cookie-banner, html body #cookie-banner, html body .cc-banner, html body [class*="cookie-consent"] {
  background: rgba(255,255,255,.92) !important;
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  color: var(--a-ink) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  border-radius: 18px !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.15) !important;
}


/* Emoji icons replaced site wide: keep things clean */
html body .a-noemoji { display: none !important; }

/* Preview ribbon so nobody mistakes this for the live site */
.a-preview-flag {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 9999; background: rgba(29,29,31,.86); color: #fff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font: 500 12px/1 var(--a-font); letter-spacing: 0; padding: 9px 14px; border-radius: 980px;
  pointer-events: none;
}

/* Line icons that replaced the old emoji */
html body .a-ico { width: 1.1em; height: 1.1em; vertical-align: -0.17em; color: currentColor; flex-shrink: 0; display: inline-block; }
html body .cat-icon .a-ico, html body .topic-icon .a-ico, html body .icon .a-ico, html body .tool-card .a-ico:first-child,
html body .journey-hero .a-ico, html body .stage-icon .a-ico, html body .j-icon .a-ico { width: 34px; height: 34px; }
html body .topic-icon, html body .icon, html body .stage-icon { font-size: 0 !important; line-height: 1 !important; background: none !important; }
html body .topic-icon .a-ico, html body .icon .a-ico { font-size: 16px; }
html body .callout-title .a-ico, html body h2 .a-ico, html body h3 .a-ico { margin-right: .3em; }
html body .cta-strip .a-ico, html body.a-std .footer .a-ico { color: currentColor; }

/* Legal links bar and cookie notice (both built by cookie-consent.js) */
html body.a-std #dt-legal-links { background: var(--a-bg-alt) !important; color: var(--a-ink-3) !important; padding: 0 16px 28px !important; }
html body.a-std #dt-legal-links a { color: var(--a-ink-2) !important; text-decoration: none !important; }
html body.a-std #dt-legal-links a:hover { text-decoration: underline !important; }
html body #dt-cookie-banner {
  background: rgba(29,29,31,.88) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 0 !important; border-radius: 18px !important; box-shadow: 0 20px 50px rgba(0,0,0,.25) !important;
  font-family: var(--a-font) !important; max-width: 640px !important;
}
html body #dt-cookie-banner p { font-size: 13px !important; color: rgba(255,255,255,.86) !important; }
html body #dt-cookie-banner a { color: #9be3c0 !important; }
html body #dt-cookie-banner button { border-radius: 980px !important; font-family: var(--a-font) !important; font-weight: 500 !important; font-size: 14px !important; }
html body #dt-cc-accept { background: #fff !important; color: var(--a-ink) !important; border: 0 !important; }
html body #dt-cc-reject { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.35) !important; }

/* Refinements after first review */
html body .hero h1 { font-size: clamp(44px, 5.3vw, 72px) !important; }
html body .dt-newsletter { background: #fff !important; border-top: 1px solid #e8e8ed !important; }
html body.a-std .footer { border-top: 0 !important; }
.a-preview-flag { left: auto; right: 16px; transform: none; }

/* Dark tiles: article CTA box and key facts box */
html body .cta-box, html body .key-facts {
  background: var(--a-navy) !important; color: #fff !important; border: 0 !important;
  border-radius: 24px !important; box-shadow: none !important;
}
html body .cta-box { padding: 56px 40px !important; }
html body .cta-box::before, html body .key-facts::after { display: none !important; }
html body .cta-box h3, html body .cta-box h2 { color: #fff !important; font-size: clamp(24px, 3vw, 32px) !important; letter-spacing: -0.022em !important; }
html body .cta-box p { color: rgba(255,255,255,.75) !important; font-size: 17px !important; }
html body .cta-box a:not(.btn):not(.btn-cta):not(.btn-primary) { color: #9be3c0 !important; }
html body .key-facts h3 { color: #9be3c0 !important; text-transform: none !important; letter-spacing: -0.01em !important; font-size: 15px !important; font-weight: 600 !important; }
html body .key-facts, html body .key-facts p, html body .key-facts li { color: rgba(255,255,255,.88) !important; }
html body .key-facts strong, html body .key-facts h4 { color: #fff !important; }
@media (max-width: 734px) { html body .cta-box { padding: 40px 22px !important; border-radius: 20px !important; } }

/* Journey stage header: light like the other heroes */
html body .stage-header { background: var(--a-bg-elev) !important; background-image: none !important; color: var(--a-ink) !important; padding: 64px 0 48px !important; }
html body .stage-header::before, html body .stage-header::after { display: none !important; }
html body .stage-header h1 { color: var(--a-ink) !important; font-size: clamp(36px, 5.4vw, 60px) !important; letter-spacing: -0.032em !important; line-height: 1.06 !important; }
html body .stage-header .subtitle, html body .stage-header p { color: var(--a-ink-2) !important; font-size: clamp(19px, 2vw, 21px) !important; }
html body .stage-header .breadcrumb, html body .stage-header .breadcrumb a { color: var(--a-ink-2) !important; }
html body .stage-header .breadcrumb a { color: var(--a-green) !important; text-decoration: none !important; }
html body .stage-header .stage-num { color: var(--a-green) !important; text-transform: none !important; letter-spacing: -0.01em !important; font-size: 15px !important; font-weight: 600 !important; }
html body .stage-icon-large { background: none !important; font-size: 0 !important; }
html body .stage-icon-large .a-ico { width: 40px; height: 40px; }

/* Small labels sit on their own line above titles */
html body .tool-tag, html body .blog-tag, html body .video-card-category { display: block !important; margin-bottom: 6px !important; width: auto !important; }
html body .tool-tag.cta, html body .tool-tag.external { background: none !important; }

/* Dark panels keep white text */
html body .dt-qs { background: var(--a-navy) !important; border-radius: 24px !important; padding: 28px 26px 20px !important; }
html body .dt-qs-title { color: #9be3c0 !important; text-transform: none !important; letter-spacing: -0.01em !important; font-size: 15px !important; font-weight: 600 !important; }
html body .dt-q { border-radius: 14px !important; color: #fff !important; }
html body .dt-q strong { color: #fff !important; }
html body .dt-q-cta { background: var(--a-green) !important; }
html body .key-facts .fact-number { color: #fff !important; }
html body .key-facts .fact-label { color: rgba(255,255,255,.7) !important; }
html body .cta-box strong, html body .key-facts strong, html body .cta-strip strong { color: #fff !important; }

/* Heroes that used to sit on a photo: force dark text now they are light */
html body .page-hero.with-image h1, html body .blog-hero.with-image h1,
html body .page-hero .hero-inner h1 { color: var(--a-ink) !important; }
html body .page-hero.with-image p, html body .blog-hero.with-image p,
html body .page-hero .hero-inner p { color: var(--a-ink-2) !important; }
html body .page-hero.with-image .eyebrow, html body .blog-hero.with-image .eyebrow { color: var(--a-green) !important; background: none !important; }
html body .page-hero .hero-badges span, html body .page-hero .hero-bullets li, html body .roadmap-hero .hero-bullets li { color: var(--a-ink) !important; background: var(--a-bg-alt) !important; border: 0 !important; border-radius: 980px !important; }
html body .page-hero.with-image .trust-bar, html body .blog-hero .trust-bar { background: #fff !important; box-shadow: var(--a-shadow) !important; border: 0 !important; border-radius: 14px !important; }
html body .tool-card .btn { font-size: 15px !important; padding: 10px 20px !important; }

/* About page stats, roadmap hero */
html body .stats-about { background: #fff !important; border: 0 !important; padding: 64px 0 !important; }
html body .a-stat-num { color: var(--a-ink) !important; font-size: clamp(36px, 4.4vw, 52px) !important; letter-spacing: -0.03em !important; font-weight: 700 !important; }
html body .stats-about [class*="label"] { color: var(--a-ink-2) !important; }
html body .stats-about [class*="sub"] { color: var(--a-green) !important; }
html body .social-btn { border-radius: 980px !important; border: 1px solid var(--a-green) !important; color: var(--a-green) !important; background: transparent !important; }
html body .social-btn:hover { background: var(--a-green) !important; color: #fff !important; }
html body h1 .accent, html body .roadmap-hero h1 span { color: var(--a-green) !important; }
html body .roadmap-hero .hero-bullets li, html body .page-hero .hero-bullets li { background: none !important; border-radius: 0 !important; }
html body .signup-card p, html body .signup-card .lede { font-size: 15px !important; color: var(--a-ink-2) !important; }
html body .signup-card h3 { font-size: 19px !important; }

/* ===== Review pass 2 fixes ===== */
/* Hero meta lines that used to be white */
html body .blog-hero .blog-meta, html body .blog-hero .blog-meta *, html body .page-hero .blog-meta, html body .page-hero .blog-meta * { color: var(--a-ink-2) !important; }
html body .journey-hero .badges, html body .journey-hero .badges *, html body .page-hero .badges, html body .page-hero .badges * { color: var(--a-ink) !important; }
html body .journey-hero .badges > *, html body .page-hero .badges > * { background: #fff !important; border: 1px solid #dfe1e6 !important; }
/* Related links box */
html body .dt-related a { color: var(--a-green) !important; }
/* Panels: visible edge so they never melt into the page */
html body .callout, html body .homeowner-box, html body .jargon-explainer, html body .journey-link-block,
html body .warning, html body .soft-cta, html body .signup-card, html body .dt-related, html body .trust-bar,
html body .faq-item details, html body .pir-faq-item, html body .dt-note, html body .dt-sources, html body .dt-res, html body .dt-qf-notice {
  border: 1px solid #dfe1e6 !important;
}
html body .warning, html body .callout.warning { border-color: #f1d9a8 !important; }
html body .trust-bar { background: #fff !important; }
html body .faq-item { border: 0 !important; border-bottom: 1px solid var(--a-line) !important; }
/* Calculators page button overflowing on phones */
html body .tool-card .btn, html body .calc-card .btn { white-space: normal !important; max-width: 100% !important; box-sizing: border-box !important; }

/* ===== Navigation spacing ===== */
html body .nav-inner { gap: 32px !important; }
html body .nav-links:not(.open) { gap: 2px !important; margin-left: auto !important; justify-content: flex-end !important; flex: 0 1 auto !important; }

/* ===== New simple logo ===== */
html body .a-logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
html body .a-logo-mark { width: 30px; height: 30px; flex: 0 0 30px; display: block; }
html body .a-logo-word { font-family: var(--a-font); font-size: 19px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--a-ink); white-space: nowrap; }
html body .a-logo-word span { color: var(--a-green); }
html body.a-std .footer .a-logo-word { font-size: 17px; }

/* Inline white text left inside heroes that are now light */
html body :is(.blog-hero,.page-hero,.journey-hero,.roadmap-hero,.about-hero,.stage-header,.hero) :is([style*="color:#fff"],[style*="color: #fff"],[style*="color:white"],[style*="color: white"],[style*="color:rgba(255,255,255"],[style*="color: rgba(255,255,255"]):not(a[class]):not(.btn) { color: var(--a-ink-2) !important; }
html body .hero .hero-pill { color: var(--a-green) !important; background: var(--a-green-soft) !important; border: 0 !important; }
/* Dark cards keep white headings */
html body .check-file-card h3, html body .check-file-card h4 { color: #fff !important; }
html body .check-file-card p { color: rgba(255,255,255,.85) !important; }
/* Pages with their own dark headers: green word on navy needs the lighter green */
html body .site-bar [class*="talks"], html body .links-header [class*="talks"], html body .brand { color: #6ee8aa !important; }

/* Fixes for colour problems that were already on the live site */
html body .site-bar span[style*="#2a7350"], html body .name .talks, html body .pir-hero h1 span { color: #6ee8aa !important; }
html body .pir-hero-sub { color: rgba(255,255,255,.82) !important; }
html body .next-step-card .next-step-meta, html body .next-step-btn.secondary .next-label { color: var(--a-green) !important; }
html body .next-step-btn.primary .next-label { color: rgba(255,255,255,.85) !important; }
html body .hero-pill { color: var(--a-green) !important; background: var(--a-green-soft) !important; border: 0 !important; }
html body [style*="#25F4EE"] { background: #1d1d1f !important; }
html body .hero-cta-row a[style*="rgba(255,255,255,0.12)"] { background: transparent !important; color: var(--a-green) !important; border: 1px solid var(--a-green) !important; }
html body .yfh-split div[style*="#6f8fb3"] { background: #4d6f96 !important; }
html body .yfh-legend i[style*="#6f8fb3"] { background: #4d6f96 !important; }
html body .category-card { border: 1px solid #dfe1e6 !important; }
html body table { background: transparent !important; }

/* Menu collapses to the button before the links can crowd the logo */
@media (max-width: 1060px) {
  html body .nav-links:not(.open) { display: none !important; }
  html body .nav-toggle { display: flex !important; }
  html body .nav-links.open {
    display: flex !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important;
    flex-direction: column !important; align-items: stretch !important; gap: 0 !important;
    padding: 8px 0 24px !important; min-height: 0 !important;
    background: #fff !important; box-shadow: 0 24px 40px rgba(0,0,0,.12) !important; border-top: 1px solid #e5e5ea !important;
  }
}

/* ===== Review pass 3 ===== */
/* Hero meta line: proper spacing between date, topic and read time */
html body .blog-hero .blog-meta { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px 0; }
html body .blog-hero .blog-meta-item + .blog-meta-item::before { content: "\00B7"; margin: 0 12px; color: var(--a-ink-3) !important; }
/* Numbered lists in articles were all showing 0 */
html body .blog-content ol { counter-reset: ol-counter; }
html body .blog-content ol > li { counter-increment: ol-counter; }
/* At a glance stats: four items sit as two by two, or four across on wide screens */
html body .facts-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr) !important; }
@media (min-width: 900px) { html body .facts-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr) !important; } }
/* Related guides box */
html body .dt-related { padding: 28px 32px !important; margin: 48px auto 64px !important; box-sizing: border-box; max-width: min(820px, calc(100% - 40px)) !important; }
html body .dt-related h2, html body .dt-related h3 { margin-top: 0 !important; }
/* Full width "Found this useful?" band is a band, not a card */
html body section.soft-cta { border-radius: 0 !important; border: 0 !important; border-top: 1px solid #e3e5ea !important; border-bottom: 1px solid #e3e5ea !important; }
/* Less dead space straight after a hero */
html body :is(.blog-hero,.page-hero,.journey-hero,.stage-header,.roadmap-hero) + :is(section.section,.section) { padding-top: 56px !important; }
/* Calculator card buttons on phones */
@media (max-width: 734px) { html body .tool-card .btn { width: 100% !important; justify-content: center; text-align: center; } }

/* Key term cards: breathing room between title and text */
html body .jargon-explainer h3, html body .jargon-card h3, html body .jargon-term { margin-bottom: 8px !important; }
/* Free guide promo card */
html body .dt-roadmap-promo > .container > div { border-left: 1px solid #dfe1e6 !important; border: 1px solid #dfe1e6 !important; border-radius: 20px !important; box-shadow: var(--a-shadow) !important; }
html body .dt-roadmap-promo > .container > div > div:first-child .a-ico { width: 40px; height: 40px; }
html body .dt-roadmap-promo a[style*="#0f1e33"] { background: var(--a-green) !important; border-radius: 980px !important; }
/* Soft booking band button */
html body section.soft-cta a { border-radius: 980px !important; }
/* Phone buttons on dark tiles */
html body .cta-strip .btn-outline, html body .cta-box .btn-outline { color: #fff !important; border-color: rgba(255,255,255,.6) !important; background: transparent !important; }
html body .cta-strip .btn-outline:hover, html body .cta-box .btn-outline:hover { background: rgba(255,255,255,.12) !important; }
html body :is(.signup-card,[class*="signup"],[class*="optin"],[class*="lead-form"]) :is(.lede,.section-sub) { font-size: 15px !important; line-height: 1.5 !important; color: var(--a-ink-2) !important; }

/* Icons: inherit their text colour, green only where they stand alone */
html body :is(.cat-icon,.topic-icon,.icon,.stage-icon-large,.cf-icon,.callout-title,.hero-badges,.badges,.j-icon,.stage-icon) .a-ico,
html body :is(h2,h3,h4) > .a-ico, html body .blog-content p > .a-ico:first-child { color: var(--a-green); }
html body [style*="background:var(--green)"] .a-ico, html body [style*="background:#2a7350"] .a-ico, html body .check-file-card .a-ico, html body .key-facts .a-ico, html body .cta-strip .a-ico, html body .cta-box .a-ico { color: #fff !important; }
/* Headings inside boxed panels should not carry the big article top margin */
html body .blog-content :is([class*="box"],[class*="card"],.callout,.key-facts,.dt-qs,.dt-related) :is(h2,h3) { margin-top: 6px !important; }
/* Status tags (Confirmed, Proposed, Unresolved) stay as small pills */
html body .status-tag { display: inline-block !important; padding: 2px 9px !important; border-radius: 980px !important; background: var(--a-green-soft) !important; font-size: 12px !important; white-space: nowrap; }
html body .status-tag.status-proposed, html body .status-tag[class*="unres"], html body .status-tag[class*="pending"] { background: #fdf3e3 !important; color: #8a5a00 !important; }
/* Mobile: wide tables scroll sideways inside their own box instead of being cut off */
@media (max-width: 734px) {
  html body main table, html body .blog-content table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; font-size: 14px; }
  html body p[style*="columns:2"] { columns: 1 !important; }
  html body div[style*="border-left:5px solid #2a7350"][style*="display:flex"] { flex-wrap: wrap !important; }
  html body .blog-hero .blog-meta-item + .blog-meta-item::before { display: none; }
  html body .blog-hero .blog-meta { gap: 2px 16px; }
}
/* Footer links each on their own line */
html body.a-std .footer-col a { display: block; }
/* Sources box lines up with the article column */
html body .dt-sources { padding: 24px 28px !important; border-radius: 18px !important; box-sizing: border-box; }

/* Sources box sits inside the article column */
html body .dt-sources { max-width: min(820px, calc(100% - 40px)) !important; margin-left: auto !important; margin-right: auto !important; }
/* Form fields never spill past their card */
html body input, html body select, html body textarea { box-sizing: border-box !important; max-width: 100%; }
@media (max-width: 734px) { html body input, html body select { font-size: 16px !important; } }

/* Inputs with a £ / % / yrs label built into the box: one box, not two */
html body :is(.input-wrapper,.input-group,[class*="input-wrap"],div:has(> input):has(> span)) {
  border-radius: 12px !important; overflow: hidden; background: #fff !important;
}
html body :is(.input-wrapper,.input-group,[class*="input-wrap"],div:has(> input):has(> span)) input {
  border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important;
}
html body :is(.input-wrapper,.input-group,[class*="input-wrap"],div:has(> input):has(> span)):focus-within {
  border-color: var(--a-green) !important; box-shadow: 0 0 0 4px rgba(42,115,80,.15) !important;
}
html body div:has(> input):has(> span) { box-sizing: border-box !important; max-width: 100% !important; }

/* ===== Review pass 4 ===== */
html body .sources-block { max-width: min(820px, calc(100% - 40px)) !important; margin: 32px auto 12px !important; box-sizing: border-box; border-radius: 18px !important; padding: 22px 26px !important; }
html body .dt-related { margin-top: 24px !important; }
@media (max-width: 734px) {
  html body div[style*="border-left:5px solid #2a7350"][style*="display:flex"] > div[style*="flex:1"] { flex: 1 1 100% !important; }
  html body div[style*="border-left:5px solid #2a7350"][style*="display:flex"] > a { margin-left: 0 !important; }
  html body .timeline-item { display: block !important; }
  html body .timeline-item > * { width: auto !important; max-width: none !important; }
}
@media (min-width: 735px) { html body .tool-card .btn { white-space: nowrap !important; } }
html body .fact-number, html body .a-stat-num, html body .stat-num { white-space: nowrap; }
html body.a-std .footer-col a, html body.a-std .footer-col li { margin: 0 !important; padding: 0 !important; line-height: 2 !important; }
html body:not(.a-std) #dt-legal-links { flex-basis: 100%; width: 100%; box-sizing: border-box; }
@media (max-width: 734px) { html body .timeline-item > .timeline-dot { width: 12px !important; height: 12px !important; border-radius: 50% !important; } }
html body div[style*="border-left:5px solid #2a7350"] a[style*="#0f1e33"] { background: var(--a-green) !important; border-radius: 980px !important; }