/* EcoHome Intelligence — page styles
 * ---------------------------------------------------------------
 * Hand-maintained. Loaded by every page immediately AFTER
 * assets/tailwind-purged.css, so the cascade order is unchanged
 * from when this content lived at the bottom of that file.
 *
 * WHY THIS FILE EXISTS
 * These rules were extracted from pages' inline <style> blocks to
 * satisfy the CSP (style-src 'self'). They were previously appended
 * to assets/tailwind-purged.css — which is a BUILD OUTPUT of
 * `npm run build:css` (tailwindcss -i tailwind.input.css -o
 * assets/tailwind-purged.css). Running that documented command would
 * therefore have silently destroyed ~51KB of site styling. Splitting
 * them apart removes that landmine: tailwind-purged.css is now purely
 * generated and safe to rebuild, and this file is purely hand-written.
 *
 * KNOWN HAZARD — READ BEFORE ADDING RULES
 * This file is shared by every page that links it, but much of it was
 * extracted from individual pages. Bare element selectors here are
 * therefore GLOBAL, and duplicates of the same selector silently
 * override each other. That is the root cause of two production bugs
 * fixed on 2026-09-05: a body{max-width:720px} rule from one article
 * page left 47 pages jammed against the viewport edge, and bare
 * h1/h2/p colour rules repainted headings green-on-green (1.00:1
 * contrast) inside dark panels.
 *
 * So: prefer a class or a page-scoped selector. If you must use a bare
 * element selector, add it to the consolidated block at the end rather
 * than declaring the same selector twice.
 * scripts/check_css_hygiene.py enforces this and runs in CI.
 * ---------------------------------------------------------------
 */

/* === Extracted from inline styles (CSP hardening) === */

:root { --ink:#0f2e22; --ink-soft:#3d5a4e; --forest:#4aa883; --forest-strong:#0d3d2b; --leaf:#6dbb8a; --amber:#e8a838; --amber-deep:#c47a0f; --surface:#faf8f5; --surface-alt:#f0ede8; }
    * { box-sizing: border-box; }.prose p { margin-bottom:1.5rem; font-size:1.1rem; }
    .prose h2 { font-size:1.8rem; margin-top:3rem; margin-bottom:1.2rem; }
    .prose h3 { font-size:1.3rem; margin-top:2rem; margin-bottom:0.8rem; }
    .toc { background:#fff; border-radius:12px; padding:24px; margin-bottom:2rem; }
    .toc a { color:var(--ink-soft); text-decoration:none; }
    .toc a:hover { color:var(--forest); }
    .btn-primary { display:inline-block; background:var(--forest); color:#fff; padding:14px 28px; border-radius:10px; text-decoration:none; font-weight:700; }
    .inline-cta { background:#fff3e0; border-radius:12px; padding:24px; margin:2rem 0; border-left:4px solid var(--amber); }
  
    /* Mobile responsive fixes */
    @media (max-width: 768px) {
      nav > div { flex-wrap: wrap; height: auto !important; padding: 12px 16px !important; }
      nav a:not(:first-child) { font-size: 0.8rem; padding: 6px 8px; }
      nav a:last-child { padding: 8px 14px !important; }
      h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
      .prose p { font-size: 1rem; }
      table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
      .device-card, .product-card { padding: 16px; }
      main { padding: 24px 16px !important; }
    }

:root { --ink:#0f2e22; --ink-soft:#3d5a4e; --forest:#4aa883; --forest-strong:#0d3d2b; --leaf:#6dbb8a; --leaf-bright:#9fda7a; --amber:#e8a838; --amber-deep:#c47a0f; --surface:#faf8f5; --surface-alt:#f0ede8; }
    * { box-sizing: border-box; }    h1,h2,h3 { font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-0.025em; color:var(--ink); }
    p,li { font-family:'Merriweather',Georgia,serif; line-height:1.7; color:var(--ink-soft); }
    .card { background:#fff; border-radius:16px; box-shadow:0 4px 24px rgba(15,46,34,0.06),0 1px 3px rgba(15,46,34,0.04); }
    .prose p { margin-bottom:1.5rem; font-size:1.1rem; }
    .prose h2 { font-size:1.8rem; margin-top:3rem; margin-bottom:1.2rem; color:var(--ink); }
    .prose h3 { font-size:1.3rem; margin-top:2rem; margin-bottom:0.8rem; color:var(--ink); }
    .prose ul { margin-bottom:1.5rem; padding-left:1.5rem; }
    .prose li { margin-bottom:0.5rem; }
    .prose a { color:var(--forest); text-decoration:underline; }
    .toc { background:#fff; border-radius:12px; padding:24px; margin-bottom:2rem; }
    .toc a { color:var(--ink-soft); text-decoration:none; font-size:0.95rem; }
    .toc a:hover { color:var(--forest); }
    .btn-primary { display:inline-block; background:var(--forest); color:#fff; padding:14px 28px; border-radius:10px; text-decoration:none; font-weight:700; }
    .btn-primary:hover { background:var(--forest-strong); }
    .inline-cta { background:#fff3e0; border-radius:12px; padding:24px; margin:2rem 0; border-left:4px solid var(--amber); }
    .device-card { background:#fff; border-radius:12px; padding:20px; margin-bottom:16px; border:1px solid #e5e5e5; }
    .device-card h4 { margin:0 0 8px; font-size:1.1rem; font-weight:700; color:var(--ink); }
  
    /* Mobile responsive fixes */
    @media (max-width: 768px) {
      nav > div { flex-wrap: wrap; height: auto !important; padding: 12px 16px !important; }
      nav a:not(:first-child) { font-size: 0.8rem; padding: 6px 8px; }
      nav a:last-child { padding: 8px 14px !important; }
      h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
      .prose p { font-size: 1rem; }
      table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
      .device-card, .product-card { padding: 16px; }
      main { padding: 24px 16px !important; }
    }

:root { --ink:#0f2e22; --ink-soft:#3d5a4e; --forest:#4aa883; --forest-strong:#0d3d2b; --leaf:#6dbb8a; --amber:#e8a838; --amber-deep:#c47a0f; --surface:#faf8f5; --surface-alt:#f0ede8; }
    * { box-sizing: border-box; }
    body { font-family:'Inter',sans-serif; color:var(--ink); background:var(--surface); }.card { background:#fff; border-radius:16px; box-shadow:0 4px 24px rgba(15,46,34,0.06),0 1px 3px rgba(15,46,34,0.04); transition:transform 0.3s ease,box-shadow 0.3s ease; }
    .card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(15,46,34,0.1); }
    .prose p { margin-bottom:1.5rem; font-size:1.1rem; }
    .prose h2 { font-size:1.8rem; margin-top:3rem; margin-bottom:1.2rem; color:var(--ink); }
    .prose h3 { font-size:1.3rem; margin-top:2rem; margin-bottom:0.8rem; color:var(--ink); }
    .prose ul { margin-bottom:1.5rem; padding-left:1.5rem; }
    .prose li { margin-bottom:0.5rem; }
    .btn-primary { display:inline-block; background:var(--forest); color:#fff; padding:14px 28px; border-radius:10px; text-decoration:none; font-weight:700; transition:all 0.2s ease; }
    .btn-primary:hover { background:var(--forest-strong); transform:translateY(-1px); }
    .btn-amber { display:inline-block; background:var(--amber); color:#fff; padding:14px 28px; border-radius:10px; text-decoration:none; font-weight:700; transition:all 0.2s ease; }
    .btn-amber:hover { background:var(--amber-deep); transform:translateY(-1px); }
    .badge { display:inline-block; padding:4px 12px; border-radius:999px; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; }
    .tier-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
    .tier-budget { background:#fff3cd; color:#c47a0f; }
    .tier-perf { background:#e8f5e9; color:#4aa883; }
    .tier-prem { background:#e3f2fd; color:#1565c0; }
    .nav-glass { background:rgba(250,248,245,0.88); backdrop-filter:blur(16px); ; }
    .footer { background:var(--ink); color:#b5c4bb; padding:48px 24px; text-align:center; }
    .footer a { color:#7fb896; text-decoration:none; }
    .product-card { display:flex; gap:12px; padding:12px; border-radius:12px; background:rgba(245,245,245,0.5); transition:all 0.3s ease; margin-bottom:8px; }
    .product-card:hover { background:rgba(245,245,245,1); transform:translateY(-2px); }
    .product-image { width:60px; height:60px; border-radius:8px; object-fit:cover; flex-shrink:0; background-color:#f0f0f0; display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--forest); }
    .btn-buy { display:inline-block; background:var(--forest); color:white; padding:6px 14px; border-radius:6px; font-size:0.75rem; font-weight:700; text-decoration:none; transition:all 0.2s ease; border:none; }
    .btn-buy:hover { background:var(--forest-strong); transform:translateY(-1px); }
    .inline-cta { background:#fff3e0; border-radius:12px; padding:24px; margin:2rem 0; border-left:4px solid var(--amber); }
    .compare-table { width:100%; border-collapse:collapse; margin:1.5rem 0; }
    .compare-table th { background:var(--forest); color:#fff; padding:12px; text-align:left; font-weight:700; }
    .compare-table td { padding:12px; border-bottom:0; }
    .compare-table tr:nth-child(even) { background:#faf8f5; }

:root {
      --forest: #064e3b;
      --forest-2: #047857;
      --mint: #ecfdf5;
      --mint-2: #d1fae5;
      --slate-50: #f8fafc;
      --slate-100: #f1f5f9;
      --slate-200: #e2e8f0;
      --slate-400: #94a3b8;
      --slate-600: #475569;
      --slate-700: #334155;
      --slate-900: #0f172a;
      --ink: #0f172a;
      --card: #ffffff;
      --shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
      --radius-xl: 28px;
      --radius-lg: 20px;
      --radius-md: 14px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: 'Inter', sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at top right, rgba(6, 78, 59, 0.07), transparent 30%),
        radial-gradient(circle at 0% 0%, rgba(16, 185, 129, 0.06), transparent 28%),
        #fff;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    a { color: inherit; }
    img { max-width: 100%; display: block; }
    .container { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(255,255,255,0.92);
      backdrop-filter: blur(18px);
      ;
    }

    .hero {
      padding: 56px 0 28px;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 28px;
      align-items: start;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 14px;
      border-radius: 999px;
      background: var(--mint);
      color: var(--forest);
      font-size: 0.84rem;
      font-weight: 800;
      letter-spacing: 0.02em;
      border: 1px solid rgba(6, 78, 59, 0.08);
    }
    .eyebrow-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--forest-2);
      box-shadow: 0 0 0 5px rgba(6, 78, 59, 0.12);
    }
    h1 {
      margin: 18px 0 14px;
      font-size: clamp(2.5rem, 5vw, 4.6rem);
      line-height: 0.96;
      letter-spacing: -0.05em;
      color: var(--slate-900);
      max-width: 10.5ch;
    }
    .hero-copy {
      max-width: 58ch;
      color: var(--slate-600);
      font-size: 1.12rem;
      line-height: 1.75;
      margin: 0 0 26px;
    }
    .hero-points {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 22px;
    }
    .point {
      background: rgba(255,255,255,0.8);
      border: 1px solid rgba(148, 163, 184, 0.18);
      border-radius: 18px;
      padding: 14px 16px;
      display: flex;
      gap: 12px;
      align-items: flex-start;
      box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
    }
    .point svg {
      width: 20px;
      height: 20px;
      color: var(--forest);
      flex: 0 0 auto;
      margin-top: 2px;
    }
    .point strong { display: block; font-size: 0.95rem; color: var(--slate-900); margin-bottom: 2px; }
    .point span { display: block; color: var(--slate-600); font-size: 0.88rem; line-height: 1.45; }
    .panel {
      background: var(--card);
      border: 1px solid rgba(148, 163, 184, 0.18);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .calculator {
      position: sticky;
      top: 92px;
    }
    .panel-head {
      padding: 22px 24px 0;
    }
    .panel-head h2 {
      margin: 0;
      font-size: 1.35rem;
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: var(--slate-900);
    }
    .panel-head p {
      margin: 10px 0 0;
      color: var(--slate-600);
      line-height: 1.65;
      font-size: 0.98rem;
    }
    form { padding: 18px 24px 24px; }
    fieldset {
      margin: 0;
      padding: 0;
      border: 0;
    }
    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .check-item {
      border: 1px solid rgba(148, 163, 184, 0.24);
      border-radius: 18px;
      background: linear-gradient(180deg, #fff, #fbfdff);
      padding: 14px 14px 13px;
      transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
      min-height: 82px;
    }
    .check-item:hover {
      transform: translateY(-1px);
      border-color: rgba(6, 78, 59, 0.22);
      box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
    }
    .check-item label {
      display: grid;
      grid-template-columns: 18px 1fr;
      gap: 10px;
      align-items: start;
      cursor: pointer;
    }
    .check-item input {
      margin-top: 4px;
      accent-color: var(--forest);
    }
    .check-copy strong {
      display: block;
      color: var(--slate-900);
      font-size: 0.95rem;
      line-height: 1.25;
      margin-bottom: 3px;
    }
    .check-copy span {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--slate-600);
      font-size: 0.84rem;
      line-height: 1.3;
    }
    .cost-chip {
      display: inline-flex;
      align-items: center;
      padding: 3px 8px;
      border-radius: 999px;
      background: var(--mint);
      color: var(--forest);
      font-weight: 800;
      font-size: 0.78rem;
      letter-spacing: 0.01em;
    }
    .actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 18px;
    }
    .button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      border: 0;
      cursor: pointer;
      text-decoration: none;
      border-radius: 999px;
      font-size: 0.98rem;
      font-weight: 800;
      padding: 15px 18px;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .button:hover { transform: translateY(-1px); }
    .button.primary {
      background: linear-gradient(135deg, var(--forest), var(--forest-2));
      color: #fff;
      box-shadow: 0 16px 28px rgba(6, 78, 59, 0.24);
    }
    .button.secondary {
      background: #fff;
      color: var(--forest);
      border: 1px solid rgba(6, 78, 59, 0.18);
    }
    .button svg { width: 18px; height: 18px; }
    .result {
      margin: 0 24px 24px;
      padding: 20px;
      border-radius: 22px;
      background: linear-gradient(180deg, rgba(6, 78, 59, 0.06), rgba(236, 253, 245, 0.95));
      border: 1px solid rgba(6, 78, 59, 0.12);
      display: none;
    }
    .result.visible { display: block; }
    .result h3 {
      margin: 0 0 8px;
      font-size: 1.22rem;
      color: var(--slate-900);
      letter-spacing: -0.02em;
    }
    .result .amount {
      margin: 0;
      font-size: 2.05rem;
      line-height: 1;
      letter-spacing: -0.05em;
      color: var(--forest);
      font-weight: 900;
    }
    .result .sub {
      margin: 10px 0 0;
      color: var(--slate-600);
      line-height: 1.65;
    }
    .offenders {
      margin: 16px 0 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 8px;
    }
    .offenders li {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 10px 12px;
      border-radius: 14px;
      background: rgba(255,255,255,0.72);
      border: 1px solid rgba(148,163,184,0.18);
      color: var(--slate-700);
      font-size: 0.94rem;
    }
    .result-ctas {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-top: 16px;
    }
    .section {
      padding: 18px 0 8px;
    }
    .section-card {
      background: var(--card);
      border: 1px solid rgba(148, 163, 184, 0.16);
      border-radius: var(--radius-xl);
      padding: 24px;
      box-shadow: 0 14px 35px rgba(15, 23, 42, 0.05);
    }
    .section h2 {
      margin: 0 0 10px;
      font-size: 1.55rem;
      letter-spacing: -0.03em;
      color: var(--slate-900);
    }
    .section-intro {
      margin: 0 0 20px;
      color: var(--slate-600);
      line-height: 1.7;
      max-width: 65ch;
    }
    .benefits {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 16px;
    }
    .benefit {
      padding: 20px;
      border-radius: 20px;
      background: linear-gradient(180deg, #fff, #fbfefc);
      border: 1px solid rgba(148, 163, 184, 0.18);
    }
    .benefit svg { width: 22px; height: 22px; color: var(--forest); }
    .benefit h3 {
      margin: 12px 0 8px;
      font-size: 1.02rem;
      color: var(--slate-900);
    }
    .benefit p {
      margin: 0;
      color: var(--slate-600);
      line-height: 1.7;
      font-size: 0.95rem;
    }
    .site-footer {
      margin-top: 34px;
      background: #0f172a;
      color: #94a3b8;
    }
    .footer-topline { display:none; height:0; background:transparent; }
    .footer-inner { padding: 48px 0 28px; }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.25fr repeat(3, minmax(0, 1fr));
      gap: 24px;
    }
    .footer-brand {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 16px;
    }
    .footer-brand strong { color: rgba(255,255,255,0.94); font-size: 1.05rem; }
    .footer-brand span { color: #34d399; font-weight: 500; }
    .footer-brand .brand-mark {
      width: 42px; height: 42px; border-radius: 14px;
      background: linear-gradient(135deg, var(--forest), #0f766e);
      display: grid; place-items: center; flex: 0 0 auto;
      box-shadow: 0 10px 22px rgba(6, 78, 59, 0.18);
    }
    .footer-brand .brand-mark svg { width: 21px; height: 21px; color: #fff; }
    .footer-col h4 {
      margin: 0 0 14px;
      color: rgba(255,255,255,0.9);
      font-size: 0.9rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }
    .footer-col a {
      display: block;
      text-decoration: none;
      color: #94a3b8;
      padding: 6px 0;
      font-size: 0.94rem;
    }
    .footer-col a:hover { color: #34d399; }
    .footer-note {
      margin-top: 28px;
      padding-top: 18px;
      border-top: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      flex-wrap: wrap;
      color: #64748b;
      font-size: 0.82rem;
    }
    .footer-note p { margin: 0; }
    .footer-contact {
      color: #d1fae5;
      text-decoration: none;
      font-weight: 700;
    }
    .mobile-break { display: none; }
    @media (max-width: 960px) {
      .hero-grid,
      .footer-grid,
      .benefits,
      .hero-points,
      .result-ctas { grid-template-columns: 1fr; }
      .calculator { position: static; }
    }
    @media (max-width: 760px) {
      .container { width: min(100% - 24px, 1120px); }

      .hero { padding-top: 28px; }
      h1 { max-width: none; font-size: clamp(2.3rem, 11vw, 3.4rem); }
      .hero-copy { font-size: 1rem; }
      .panel-head, form, .result { padding-left: 18px; padding-right: 18px; }
      .result { margin-left: 18px; margin-right: 18px; }
      .form-grid { grid-template-columns: 1fr; }
      .check-item { min-height: unset; }
      .benefit, .section-card { padding: 18px; }
      .footer-note { align-items: flex-start; }
      .mobile-break { display: inline; }
    }

.hamburger-btn { display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--forest); }
    .hamburger-btn svg { display:block; }
    #mobile-nav { display:none; position:fixed; top:0; left:0; right:0; background:rgba(255,255,255,0.97); backdrop-filter:blur(20px); border-bottom:0; padding:80px 24px 24px; z-index:997; max-height:0; overflow:hidden; opacity:0; transition:max-height 0.35s ease, opacity 0.25s ease; }
    #mobile-nav.open { display:block; max-height:500px; opacity:1; }
    #mobile-nav a { display:block; padding:14px 0; font-size:1.1rem; font-weight:600; color:var(--ink-soft); text-decoration:none; border-bottom:0; }
    #mobile-nav a:last-child { border-bottom:none; }
    @media (max-width: 768px) {
      .hamburger-btn { display:block; }
      .desktop-nav { display:none !important; }
      nav > div { flex-wrap: wrap; height: auto !important; padding: 12px 16px !important; }
      h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
      main { padding: 24px 16px !important; }
      h2 { font-size: 1.5rem !important; }
    }

:root{--ink:#0f2e22;--ink-soft:#3d5a4e;--forest:#4aa883;--forest-strong:#0d3d2b;--leaf:#6dbb8a;--amber:#e8a838;--amber-deep:#c47a0f;--surface:#faf8f5;--surface-alt:#f0ede8;}
    *{box-sizing:border-box;}.card{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(15,46,34,0.06);transition:transform .3s,box-shadow .3s;}
    .card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(15,46,34,0.1);}
    .btn-primary{display:inline-block;background:var(--forest);color:#fff;padding:14px 28px;border-radius:10px;text-decoration:none;font-weight:700;transition:all .2s;}
    .btn-primary:hover{background:var(--forest-strong);transform:translateY(-1px);}
    .btn-amber{display:inline-block;background:var(--amber);color:#fff;padding:14px 28px;border-radius:10px;text-decoration:none;font-weight:700;transition:all .2s;}
    .btn-amber:hover{background:var(--amber-deep);transform:translateY(-1px);}
    .badge{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
    .tier-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
    .tier-budget{background:#fff3cd;color:#c47a0f;}.tier-perf{background:#e8f5e9;color:#4aa883;}.tier-prem{background:#e3f2fd;color:#1565c0;}
    .nav-glass{background:rgba(250,248,245,.88);backdrop-filter:blur(16px);border-bottom:0;}
    .footer{background:var(--ink);color:#b5c4bb;padding:48px 24px;text-align:center;}.footer a{color:#7fb896;text-decoration:none;}
    .product-card{display:flex;gap:12px;padding:12px;border-radius:12px;background:rgba(245,245,245,.5);transition:all .3s;margin-bottom:8px;}
    .product-card:hover{background:rgba(245,245,245,1);transform:translateY(-2px);}
    .product-image{width:60px;height:60px;border-radius:8px;object-fit:cover;flex-shrink:0;background:#f0f0f0;display:flex;align-items:center;justify-content:center;font-size:24px;color:var(--forest);}
    .btn-buy{display:inline-block;background:var(--forest);color:#fff;padding:6px 14px;border-radius:6px;font-size:.75rem;font-weight:700;text-decoration:none;transition:all .2s;border:none;}
    .btn-buy:hover{background:var(--forest-strong);transform:translateY(-1px);}
    .inline-cta{background:#fff3e0;border-radius:12px;padding:24px;margin:2rem 0;border-left:4px solid var(--amber);}
    .prose p{margin-bottom:1.5rem;font-size:1.1rem;}.prose h2{font-size:1.8rem;margin-top:3rem;margin-bottom:1.2rem;}.prose h3{font-size:1.3rem;margin-top:2rem;margin-bottom:.8rem;}
    .prose ul{margin-bottom:1.5rem;padding-left:1.5rem;}.prose li{margin-bottom:.5rem;}

@media (max-width: 768px) {
      .desktop-nav { display:none !important; }
    }

.hamburger-btn { display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--forest); }
    .hamburger-btn svg { display:block; }
    #mobile-nav { display:none; position:fixed; top:0; left:0; right:0; background:rgba(255,255,255,0.97); backdrop-filter:blur(20px); border-bottom:0; padding:80px 24px 24px; z-index:997; max-height:0; overflow:hidden; opacity:0; transition:max-height 0.35s ease, opacity 0.25s ease; }
    #mobile-nav.open { display:block; max-height:500px; opacity:1; }
    #mobile-nav a { display:block; padding:14px 0; font-size:1.1rem; font-weight:600; color:var(--ink-soft); text-decoration:none; border-bottom:0; }
    #mobile-nav a:last-child { border-bottom:none; }
    @media (max-width: 768px) {
      .hamburger-btn { display:block; }
      .desktop-nav { display:none !important; }
    }

:root{--ink:#0f2e22;--forest:#4aa883;--amber:#e8a838;}.product{background:#fff;border-radius:12px;padding:20px;margin:16px 0;box-shadow:0 2px 8px rgba(0,0,0,0.06);}    /* Mobile responsive fixes */
    @media (max-width: 768px) {
      nav > div { flex-wrap: wrap; height: auto !important; padding: 12px 16px !important; }
      nav a:not(:first-child) { font-size: 0.8rem; padding: 6px 8px; }
      nav a:last-child { padding: 8px 14px !important; }
      h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
      .prose p { font-size: 1rem; }
      table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
      .device-card, .product-card { padding: 16px; }
      main { padding: 24px 16px !important; }
    }

/* === Extracted inline styles (CSP hardening phase 2) === */

:root { --ink:#0f2e22; --ink-soft:#3d5a4e; --forest:#4aa883; --forest-strong:#0d3d2b; --leaf:#6dbb8a; --leaf-bright:#9fda7a; --amber:#e8a838; --amber-deep:#c47a0f; --surface:#faf8f5; --surface-alt:#f0ede8; }
        * { box-sizing: border-box; }
        body { font-family:'Inter',sans-serif; color:var(--ink); background:var(--warm-bg); }
        h1,h2,h3 { font-family:'Inter',sans-serif; font-weight:800; letter-spacing:-0.025em; }
        p,li { font-family:'Merriweather',Georgia,serif; line-height:1.7; }
        .card { background:#fff; border-radius:16px; box-shadow:0 4px 24px rgba(15,46,34,0.06),0 1px 3px rgba(15,46,34,0.04); transition:transform 0.3s ease,box-shadow 0.3s ease; }
        .card:hover { transform:translateY(-4px); box-shadow:0 16px 48px rgba(15,46,34,0.1),0 4px 12px rgba(15,46,34,0.06); }
        .btn-primary { background:var(--forest); color:white; padding:14px 32px; border-radius:10px; font-weight:700; font-size:1rem; transition:all 0.2s ease; display:inline-block; text-decoration:none; }
        .btn-primary:hover { background:var(--forest-strong); transform:translateY(-1px); }
        .kit-card { background:#fff; border:2px solid rgba(26,92,62,0.1); border-radius:16px; padding:24px; transition:all 0.2s; }
        .kit-card:hover { border-color:var(--forest); }
        .tier-badge { display:inline-block; padding:3px 10px; border-radius:999px; font-size:0.7rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
        .tier-budget { background:#fff3cd; color:#c47a0f; }
        .tier-perf { background:#e8f5e9; color:#4aa883; }
        .tier-prem { background:#e3f2fd; color:#1565c0; }
        .nav-glass { background:rgba(250,248,245,0.88); backdrop-filter:blur(16px); ; }
        .footer { background:var(--ink); color:#b5c4bb; padding:48px 24px; text-align:center; }
        .footer a { color:#7fb896; text-decoration:none; }
        
        /* Product Card Styles */
        .product-card {
            display: flex;
            flex-direction: column;
            background: #fff;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            transition: all 0.3s ease;
            height: 100%;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(0,0,0,0.1);
        }
        .product-image {
            width: 100%;
            height: 180px;
            object-fit: contain;
            background: #f8f9fa;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .product-placeholder {
            width: 100%;
            height: 180px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            color: #888;
            font-size: 3rem;
        }
        .product-info {
            padding: 16px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }
        .product-name {
            font-weight: 700;
            font-size: 1rem;
            margin-bottom: 8px;
            color: var(--ink);
        }
        .product-description {
            font-size: 0.8rem;
            color: var(--ink-soft);
            margin-bottom: 12px;
            flex-grow: 1;
        }
        .product-price {
            font-weight: 800;
            font-size: 1.2rem;
            margin: 8px 0;
            color: var(--forest);
        }
        .product-cta {
            display: inline-block;
            background: var(--forest);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.85rem;
            text-align: center;
            text-decoration: none;
            transition: all 0.2s ease;
            width: 100%;
            margin-top: 8px;
        }
        .product-cta:hover {
            background: var(--forest-strong);
            transform: translateY(-2px);
        }
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .kit-card .product-grid {
            margin-top: 0;
            margin-bottom: 20px;
        }
    .btn-buy{display:inline-block;background:var(--forest);color:white;padding:6px 14px;border-radius:6px;font-size:0.75rem;font-weight:700;text-decoration:none;transition:all 0.2s ease;border:none;text-align:center;width:100%;}.btn-buy:hover{background:var(--forest-strong);transform:translateY(-1px);}

:root { --ink:#0f2e22; --ink-soft:#3d5a4e; --forest:#4aa883; --surface:#faf8f5; }
        body { font-family:'Inter',sans-serif; color:var(--ink); background:linear-gradient(135deg,#faf8f5 0%,#f5f1ec 50%,#ede8e0 100%); }
        h1,h2,h3 { font-family:'Inter',sans-serif; font-weight:800; }
        .nav-glass { background:rgba(250,248,245,0.88); backdrop-filter:blur(16px); ; }

:root{--ink:#0f2e22;--ink-soft:#3d5a4e;--forest:#4aa883;--forest-strong:#0d3d2b;--leaf:#6dbb8a;--amber:#e8a838;--amber-deep:#c47a0f;--surface:#faf8f5;--surface-alt:#f0ede8;}
*{box-sizing:border-box;}body{font-family:'Inter',sans-serif;color:var(--ink);background:linear-gradient(135deg,#faf8f5 0%,#f5f1ec 50%,#ede8e0 100%);}
h1,h2,h3{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-0.025em;}.card{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(15,46,34,0.06);transition:transform 0.3s ease,box-shadow 0.3s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(15,46,34,0.1);}
.btn-primary{background:var(--forest);color:white;padding:14px 32px;border-radius:10px;font-weight:700;font-size:1rem;transition:all 0.2s ease;display:inline-block;text-decoration:none;}
.btn-primary:hover{background:var(--forest-strong);transform:translateY(-1px);}
.kit-card{background:#fff;border:2px solid rgba(26,92,62,0.1);border-radius:16px;padding:24px;transition:all 0.2s;}
.kit-card:hover{border-color:var(--forest);}
.tier-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:0.7rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;}
.tier-budget{background:#fff3cd;color:#c47a0f;}
.tier-perf{background:#e8f5e9;color:#4aa883;}
.tier-prem{background:#e3f2fd;color:#1565c0;}
.nav-glass{background:rgba(250,248,245,0.88);backdrop-filter:blur(16px);}
.footer{background:var(--ink);color:#b5c4bb;padding:48px 24px;text-align:center;}
.footer a{color:#7fb896;text-decoration:none;}
.bundle-card{background:#fff;border-radius:20px;padding:32px;box-shadow:0 8px 32px rgba(15,46,34,0.08);transition:all 0.3s;}
.bundle-card:hover{transform:translateY(-6px);box-shadow:0 20px 60px rgba(15,46,34,0.12);}
.price-tag{font-size:2.5rem;font-weight:900;}
/* Product Card Styles */
.product-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(15, 46, 34, 0.06);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(15, 46, 34, 0.12);
}
.product-image {
  width: 100%;
  height: 140px;
  object-fit: contain;
  margin-bottom: 16px;
  border-radius: 8px;
}
.product-icon {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  border-radius: 8px;
  font-size: 48px;
}
.product-name {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: var(--ink);
}
.product-desc {
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-bottom: 16px;
  flex-grow: 1;
}
.product-btn {
  background: var(--forest);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8rem;
  transition: all 0.2s ease;
  text-decoration: none;
  display: inline-block;
}
.product-btn:hover {
  background: var(--forest-strong);
  transform: translateY(-1px);
}
.btn-buy{display:inline-block;background:var(--forest);color:white;padding:6px 14px;border-radius:6px;font-size:0.75rem;font-weight:700;text-decoration:none;transition:all 0.2s ease;border:none;}.btn-buy:hover{background:var(--forest-strong);transform:translateY(-1px);}

:root{--ink:#0f2e22;--forest:#4aa883;--amber:#e8a838;}body{font-family:Inter,sans-serif;color:var(--ink);background:#faf8f5;line-height:1.7;}/* max-width:720px;margin:0 auto;padding:24px removed 2026-09-06 - see note at end of file */h1{font-size:2rem;font-weight:800;color:var(--forest);}h2{font-size:1.3rem;color:var(--forest);margin-top:36px;}.lead{font-size:1.1rem;opacity:0.85;}table{width:100%;border-collapse:collapse;margin:20px 0;}th,td{padding:10px;border:1px solid #ddd;text-align:left;}th{background:var(--forest);color:#fff;}.product{background:#fff;border-radius:12px;padding:20px;margin:16px 0;box-shadow:0 2px 8px rgba(0,0,0,0.06);}a{color:var(--forest);font-weight:700;}footer{margin-top:40px;padding-top:20px;border-top:0;}
    /* Mobile responsive fixes */
    @media (max-width: 768px) {
      nav > div { flex-wrap: wrap; height: auto !important; padding: 12px 16px !important; }
      nav a:not(:first-child) { font-size: 0.8rem; padding: 6px 8px; }
      nav a:last-child { padding: 8px 14px !important; }
      h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
      .prose p { font-size: 1rem; }
      table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
      .device-card, .product-card { padding: 16px; }
      main { padding: 24px 16px !important; }
    }

:root { --forest:#4aa883; --leaf:#4a7c59; --sage:#e8ece9; --surface:#fff; --surface-alt:#fdfcfb; --bg:#f5f3ef; --ink:#1a1c1a; --ink-soft:#5a6d5e; }
  body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:var(--bg); color:var(--ink); margin:0;line-height:1.75; }
  nav { position:sticky;top:0;z-index:999;background:rgba(255,255,255,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }
  nav > div { max-width:1200px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:72px; }
  nav a { text-decoration:none;color:var(--ink); }
  nav img { border-radius:8px;vertical-align:middle; }
  .desktop-nav { display:flex;align-items:center;gap:32px;font-weight:600;font-size:0.95rem; }
  .desktop-nav a { color:var(--ink-soft); }
  .hamburger-btn { display:none; background:none; border:none; cursor:pointer; padding:8px; color:var(--forest); }
  .hamburger-btn svg { display:block; }
  #mobile-nav { display:none; position:fixed; top:0; left:0; right:0; background:rgba(255,255,255,0.97); backdrop-filter:blur(20px); border-bottom:0; padding:80px 24px 24px; z-index:997; max-height:0; overflow:hidden; opacity:0; transition:max-height 0.35s ease, opacity 0.25s ease; }
  #mobile-nav.open { display:block; max-height:500px; opacity:1; }
  #mobile-nav a { display:block; padding:14px 0; font-size:1.1rem; font-weight:600; color:var(--ink-soft); text-decoration:none; border-bottom:0; }
  #mobile-nav a:last-child { border-bottom:none; }
  header { background:linear-gradient(135deg, #4aa883, #1d422e); color:white; padding:60px 24px 40px; text-align:center; }
  header h1 { font-size:2.2rem; font-weight:800; margin:0 0 16px; letter-spacing:-0.02em; }
  header p { font-size:1.2rem; max-width:700px; margin:0 auto; opacity:0.9; font-family:'Merriweather',Georgia,serif; }
  .toc { background:var(--surface); border-radius:16px; box-shadow:0 4px 24px rgba(0,0,0,0.06); padding:28px; margin:40px auto; max-width:720px; }
  .toc h3 { margin-top:0; color:var(--forest); font-size:1.3rem; }
  .toc ul { padding-left:24px; }
  .toc li { margin:12px 0; }
  .toc a { color:var(--leaf); text-decoration:none; font-weight:500; }
  main { max-width:720px;margin:0 auto;padding:40px 24px; }
  h2 { font-size:1.8rem; font-weight:800; margin:48px 0 24px; color:var(--forest); }
  h3 { font-size:1.4rem; font-weight:700; margin:32px 0 16px; color:var(--leaf); }
  p { margin:16px 0; font-size:1.05rem; color:var(--ink); }
  .device-card { background:var(--surface); border:1px solid #e0e7e2; border-radius:12px; padding:24px; margin:24px 0; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
  .btn-primary { display:inline-block; background:var(--forest); color:white; padding:12px 24px; border-radius:10px; font-weight:700; text-decoration:none; font-size:0.95rem; margin-top:12px; border-bottom:none !important; }
  .btn-primary:hover { background:#254a34; }
  ol.checklist-steps { counter-reset: step-counter; padding-left: 0; }
  ol.checklist-steps > li { list-style: none; margin: 24px 0; padding-left: 56px; position: relative; }
  ol.checklist-steps > li::before { 
    counter-increment: step-counter;
    content: counter(step-counter);
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 40px;
    background: var(--forest);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 1.1rem;
  }
  table.compare-table { width:100%; border-collapse:collapse; margin:24px 0; }
  table.compare-table th { background:var(--sage); padding:14px; text-align:left; font-weight:700; }
  table.compare-table td { padding:14px; border-bottom:1px solid #e0e7e2; }
  table.compare-table tr:last-child td { border-bottom:none; }
  .tip-box { background:#fff8e1; border-left:4px solid #f9a825; padding:20px; margin:24px 0; border-radius:0 8px 8px 0; }
  footer { background:var(--surface-alt); padding:48px 24px; margin-top:60px; text-align:center; }
  footer p { color:var(--ink-soft); margin:8px 0; }
  footer a { color:var(--leaf); text-decoration:none; margin:0 12px; }
  @media (max-width: 768px) {
    .hamburger-btn { display:block; }
    .desktop-nav { display:none !important; }
    header { padding:40px 20px 30px; }
    header h1 { font-size:1.75rem; }
    header p { font-size:1.1rem; }
    main { padding:24px 16px; }
    h2 { font-size:1.5rem; }
    .device-card { padding:20px; }
    ol.checklist-steps > li { padding-left: 48px; }
    ol.checklist-steps > li::before { width: 36px; height: 36px; font-size: 1rem; }
  }

:root{--ink:#0f2e22;--ink-soft:#3d5a4e;--forest:#4aa883;--surface:#faf8f5;--surface-alt:#f0ede8;--amber:#e8a838;--amber-deep:#c47a0f;}
    body{font-family:'Inter',sans-serif;color:var(--ink);background:var(--surface);}
    h1,h2,h3{font-weight:800;letter-spacing:-0.025em;}
    p,li{font-family:'Merriweather',Georgia,serif;line-height:1.7;}
    .prose p{margin-bottom:1.5rem;font-size:1.1rem;}
    .prose h2{font-size:1.8rem;margin-top:3rem;margin-bottom:1.2rem;}
    .prose h3{font-size:1.3rem;margin-top:2rem;margin-bottom:0.8rem;}
    .toc{background:#fff;border-radius:12px;padding:24px;margin-bottom:2rem;}
    .toc a{color:var(--ink-soft);text-decoration:none;}.toc a:hover{color:var(--forest);}
    .btn-primary{display:inline-block;background:var(--forest);color:#fff;padding:14px 28px;border-radius:10px;text-decoration:none;font-weight:700;}
    .btn-primary:hover{background:var(--forest-strong);}
    .inline-cta{background:#fff3e0;border-radius:12px;padding:24px;margin:2rem 0;border-left:4px solid var(--amber);}
    .warning{background:#fff3f3;border-radius:8px;padding:16px;margin:1.5rem 0;border-left:4px solid #d32f2f;}
    .warning strong{color:#d32f2f;}
    .step{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;border:1px solid #e5e5e5;}
    .step-number{display:inline-block;background:var(--forest);color:#fff;width:32px;height:32px;border-radius:50%;text-align:center;line-height:32px;font-weight:700;font-size:0.9rem;margin-right:12px;}
  
    /* Mobile responsive fixes */
    @media (max-width: 768px) {
      nav > div { flex-wrap: wrap; height: auto !important; padding: 12px 16px !important; }
      nav a:not(:first-child) { font-size: 0.8rem; padding: 6px 8px; }
      nav a:last-child { padding: 8px 14px !important; }
      h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
      .prose p { font-size: 1rem; }
      table { display: block; overflow-x: auto; white-space: nowrap; max-width: 100%; }
      .device-card, .product-card { padding: 16px; }
      main { padding: 24px 16px !important; }
    }

body { font-family: 'Inter', sans-serif; }
        .animate-float { animation: float 3s ease-in-out infinite; }
        @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        .animate-slide-up { animation: slideUp 0.8s ease-out forwards; }
        @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        .animation-delay-200 { animation-delay: 0.2s; }
        .animation-delay-400 { animation-delay: 0.4s; }
        .animation-delay-600 { animation-delay: 0.6s; }
        .animation-delay-800 { animation-delay: 0.8s; }

:root {
          --ink: #0f2e22;
          --ink-soft: #3d5a4e;
          --forest: #4aa883;
          --leaf: #6dbb8a;
          --surface: #faf8f5;
          --warm-bg: linear-gradient(135deg, #faf8f5 0%, #f5f1ec 50%, #ede8e0 100%);
          --persona-1: #e8a838;
          --persona-2: #f39c12;
          --persona-3: #27ae60;
          --persona-4: #2980b9;
          --persona-5: #8e44ad;
      }

        * { box-sizing: border-box; }
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            min-height: 100vh;
            font-family: 'Inter', sans-serif;
            color: var(--ink);
            background: var(--warm-bg);
        }

        h1, h2, h3, button { font-family: 'Inter', sans-serif; }

        .card {
            background: #fff;
            border-radius: 24px;
            box-shadow: 0 6px 32px rgba(15,46,34,0.08);
            padding: 32px;
            transition: all 0.2s ease;
            margin-bottom: 24px;
        }
        
        .btn {
            border-radius: 12px;
            padding: 16px 32px;
            font-weight: bold;
            cursor: pointer;
            border: none;
            font-size: 1rem;
        }

        .btn-primary {
            background: var(--forest);
            color: white;
        }

        .btn-amber {
            background: #f39c12;
            color: white;
        }

:root{--forest:#4aa883;--forest-strong:#1a4a2e;--leaf:#6DBB8A;--ink:#0F2E22;--surface:#F5F7F6;--surface-alt:#E8ECE9;}
body{font-family:'Inter',sans-serif;background:var(--surface);color:var(--ink);line-height:1.7;}
.nav-glass{background:rgba(255,255,255,0.85);backdrop-filter:blur(12px);border-bottom:0;}
.state-card{background:#fff;border-radius:16px;padding:32px;box-shadow:0 4px 24px rgba(0,0,0,0.06);transition:transform 0.2s,border-color 0.2s;border:2px solid transparent;}
.state-card:hover{transform:translateY(-4px);border-color:var(--leaf);}
.tag{display:inline-block;padding:4px 12px;border-radius:6px;font-size:12px;font-weight:700;margin-right:6px;margin-bottom:6px;}
.tag-blue{background:#e3f2fd;color:#1565c0;}
.tag-green{background:#e8f5e9;color:#4aa883;}
.tag-gold{background:#fff8e6;color:#8a6d00;}
.footer{background:var(--ink);color:#b5c4bb;padding:48px 24px;text-align:center;}
.footer a{color:#7fb896;text-decoration:none;}
/* No decorative global page dividers. */
.nav-glass-v2,
.nav-glass-v2.scrolled,
.nav-glass,
nav[style],
#mobile-nav,
.mobile-nav-menu-v2 {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
#mobile-nav a,
.mobile-nav-menu-v2 a { border-bottom: 0 !important; }
.footer-v2 .top-line,
.footer-topline { display: none !important; height: 0 !important; background: transparent !important; }
.footer-v2 .bottom-bar,
.footer-note { border-top: 0 !important; }


/* Global no-divider visual policy: remove decorative horizontal rules site-wide. */
hr {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
}
#ecohome-cookie-banner { border-top: 0 !important; box-shadow: none !important; }

/* Critical homepage utility restored after the purge pass missed it. Without this,
   the hero image/overlay only cover the left side of the screen. */
.inset-0 { inset: 0 !important; }

/* Attribute-selector fallback after Tailwind load order: remove any decorative horizontal border utilities that survived purge order. */
[class*="border-t"],
[class*="border-b"] {
  border-top-width: 0 !important;
  border-bottom-width: 0 !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
}

/* Homepage shell recovery: tailwind-purged.css contains extracted article-page
   globals, including body max-width/padding rules. Scope-reset the homepage so
   the landing page remains full-width while article templates keep their styles. */
body.home-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #fff !important;
  color: var(--slate-900, #0f172a) !important;
  line-height: 1.5 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body.home-page p,
body.home-page li {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body.home-page .nav-glass-v2 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
body.home-page #top,
body.home-page #products,
body.home-page #how-it-works,
body.home-page #audit {
  width: 100% !important;
  max-width: none !important;
}
body.home-page #top > .relative.z-10 {
  width: 100% !important;
}

/* Blog index shell recovery: the same extracted article-page body globals
   forced /blog/ into a 720px-wide column. Keep articles untouched, but let
   the blog landing/index page use its full-width nav, hero, and card grid. */
body.blog-index-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  background: #fff !important;
  color: var(--slate-900, #0f172a) !important;
  line-height: 1.5 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body.blog-index-page .nav-glass-v2 {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 50 !important;
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}
body.blog-index-page > section:first-of-type {
  width: 100% !important;
  max-width: none !important;
}
body.blog-index-page > section:nth-of-type(2) {
  width: 100% !important;
}

/* Checklist + tool shell recovery: these templates intentionally use inner
   containers for readable content, but the shared extracted body globals were
   constraining the entire page shell to article width. Restore a full-width
   shell while leaving each page's own containers in control of content width. */
body.checklist-page,
body.tool-page {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}
body.checklist-page {
  background: #f8faf9 !important;
}
body.checklist-page nav,
body.checklist-page .pt-32,
body.checklist-page .footer {
  width: 100% !important;
  max-width: none !important;
}
body.tool-page nav,
body.tool-page main,
body.tool-page footer.site-footer {
  width: 100% !important;
  max-width: none !important;
}

/* ------------------------------------------------------------------
   Layout fix (2026-09-05)
   A stray article-page rule (body{max-width:720px;margin:0 auto;padding:24px})
   was concatenated into this shared stylesheet. A later body{margin:0} rule
   then overrode only the margin, leaving max-width:720px with no auto
   centering — so every page WITHOUT a *-page override class rendered as a
   720px column jammed against the left edge of the viewport.
   Restoring horizontal centering fixes 47 pages. Pages that opt out via
   body.home-page / .blog-index-page / .checklist-page / .tool-page use
   !important and are unaffected by this rule.
   ------------------------------------------------------------------ */
body{margin-left:auto;margin-right:auto;}

/* ------------------------------------------------------------------
   Contrast fix (2026-09-05) — same root cause as the layout fix above.
   Per-page <style> blocks concatenated into this shared file contribute
   ~58 bare element-level colour rules (h1/h2/h3/p/li{color:var(--ink)|
   var(--forest)|...}). A direct rule always beats an inherited value, so
   inside a panel that explicitly declares light text —
     <section style="background:linear-gradient(...);color:#fff">
   — the heading and body text were being repainted dark/green ON TOP of
   a dark background. Worst case measured 1.00:1 (heading exactly equal to
   its own gradient stop, i.e. invisible); several others 1.48-2.16:1.
   Restoring inheritance honours what the panel author actually wrote.
   Scoped to text elements only: links and anything class-styled are left
   alone so button/CTA styling is unaffected. Verified safe: the repo
   contains zero inline background-color/border-color white declarations,
   so these substring selectors cannot match a light-background container.
   ------------------------------------------------------------------ */
[style*="color:#fff"]   :is(h1,h2,h3,h4,h5,h6,p,li,td,th),
[style*="color: #fff"]  :is(h1,h2,h3,h4,h5,h6,p,li,td,th),
[style*="color:white"]  :is(h1,h2,h3,h4,h5,h6,p,li,td,th),
[style*="color: white"] :is(h1,h2,h3,h4,h5,h6,p,li,td,th){color:inherit;}

/* The same shared stylesheet also contains an unconditional
   header{background:linear-gradient(135deg,#4aa883,#1d422e);color:white;...}
   rule (another concatenated page style). Every page loading this file
   therefore gets a dark green <header> — but the bare h1/p colour rules
   repainted its heading green-on-green (measured 1.00:1 on /quiz).
   Descendants of that header must honour its declared white. */
header :is(h1,h2,h3,h4,h5,h6,p,li){color:inherit;}

/* ------------------------------------------------------------------
   Design audit (2026-09-06)

   The 2026-09-05 layout fix below centred the body but left the stray
   article rule's max-width:720px in place, so every page without a
   *-page override still rendered as a 720px column inside a full-width
   viewport, with the fixed nav spanning the window above it and the
   footer clipped inside the column. That was treating the symptom. The
   cap is now removed at source (line ~795); every page already has its
   own wrapper (.container at min(1120px, 100% - 32px), or main at
   720px), so nothing depended on body's width. Verified: 0 pages.

   Three footer faults, all visible on /quiz:
     1. .footer-link is used in the markup of every page and had no rule
        anywhere, so links inherited display:inline and ran together as
        one centred paragraph instead of stacking.
     2. Column headings are marked up as <p style="font-weight:600">,
        not <h4>, so .footer-v2 h4's white styling never applied and the
        headings inherited slate-400 on slate-900 - about 3.6:1, under
        the 4.5:1 minimum for body text.
     3. .footer-v2 sets text-align:center, which is right for the
        stacked mobile layout and wrong for the 4-column desktop one.
   ------------------------------------------------------------------ */

.footer-v2 .footer-link {
  display: block;
  margin-bottom: 10px;
  line-height: 1.45;
}
.footer-v2 .footer-link:last-child { margin-bottom: 0; }

/* Column headings: the markup uses <p>, so target it directly rather
   than rewriting 100+ files. Matches the intent of .footer-v2 h4. */
.footer-v2 .footer-grid > div > p:first-child {
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

/* Left-align the columns once they sit side by side. Below 1024px the
   grid is 1 or 2 columns and centred reads better, so leave it. */
@media (min-width: 1024px) {
  .footer-v2 .footer-grid { text-align: left; }
}

/* Email capture row. Three separate faults stacked:
     - the input renders 64px tall against a 52px button, because an
       <input> has intrinsic sizing its box model does not predict, so
       matching padding does not produce matching heights;
     - the button inherits margin-top:12px from .btn, which pushed it
       below the input even once the heights matched;
     - align-items was never set, and the inline style on the form
       cannot be overridden for display, only added to.
   An explicit height on both plus a zeroed margin is deterministic
   where relying on flex stretch is not. */
#email-card form,
#email-card .email-row,
.email-capture-row,
#email-form {
  align-items: center;
}
#email-card input[type="email"],
#email-form input[type="email"],
.email-capture-row input[type="email"],
#email-card button,
#email-form button,
.email-capture-row button {
  height: 52px;
  box-sizing: border-box;
  border-radius: 10px;
}
#email-card button,
#email-form button,
.email-capture-row button {
  margin-top: 0;
  white-space: nowrap;
}

/* ------------------------------------------------------------------
   Mobile overflow fixes (2026-09-06)

   A full-site audit of all 105 sitemap URLs at 390px found twelve pages
   scrolling sideways. Two causes:

     1. .btn-buy is inline-block with no max-width, so a long product
        name pushed the whole page to 398-406px inside a 390px viewport.
        Affected the "Buy on Amazon" buttons on six pages.
     2. Wide data tables with no scroll container - 7, 9 and 13 columns
        on some - forced the page to 419-501px.

   An earlier pass concluded tables reflowed fine. That was tested on one
   narrow table and generalised; the wide ones do not.
   ------------------------------------------------------------------ */

.btn-buy {
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Any table that would be wider than its column scrolls inside itself
   rather than dragging the page sideways with it. */
.blog-body table,
article table,
main table,
.container table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tables already wrapped in an overflow-x container keep normal table
   layout - the wrapper is doing the job and display:block would break
   their column sizing. */
[style*="overflow-x"] > table,
.table-wrap > table {
  display: table;
  overflow-x: visible;
}