/* chrome.css */
:root {
  /* Core palette (only three colours allowed) */
  --ink:        #0a0a0a;
  --paper:      #ffffff;
  --ember:      #ff7d03;

  /* Ink derivatives */
  --ink-80:     #3a3a3a;
  --ink-60:     #6a6a6a;
  --ink-30:     #b5b5b5;
  --ink-08:     rgba(10, 10, 10, 0.08);
  --ink-04:     rgba(10, 10, 10, 0.04);

  /* Paper derivative */
  --paper-warm: #fafaf8;

  /* Ember derivatives */
  --ember-soft: rgba(255, 125, 3, 0.08);
  --ember-mid:  rgba(255, 125, 3, 0.18);
  --ember-dark: #e56e00;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-sans);  /* alias for clarity; same font (SPEC §5.2) */

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii */
  --radius-sm:  6px;
  --radius:     10px;
  --radius-lg:  16px;
  --radius-xl:  20px;

  /* Layout */
  --max-width: 1500px;

  /* Motion — easing canon (IMMERSION SPEC §4.1): textura's exact curves.
     --ease-out-expo updated to canonical easeOutExpo; all immersion motion
     uses ONLY --ease-out-expo or --ease-in-out-quart. */
  --ease-out-expo:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-in-out-soft:  cubic-bezier(0.4, 0, 0.2, 1);  /* retained — used by pre-immersion rules */

  --dur-fast:   150ms;
  --dur-med:    350ms;
  --dur-slow:   500ms;
  --dur-stage:  700ms;

  --stagger:    120ms;
}


/* === RESET === */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--paper);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;        /* IMMERSION §5.5 — Inter reads larger; calibrated base */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

@media (min-width: 768px) {
  body { font-size: 18px; }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }


/* === REDUCED MOTION — required, see SPEC §7.7 === */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}




/* === LAYOUT === */

.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 24px);
}


/* Button base */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 14px 28px;
  line-height: 1;
  transition:
    background  var(--dur-med) var(--ease-out-expo),
    transform   var(--dur-med) var(--ease-out-expo);
  text-decoration: none;
}


/* Primary button */
.btn-primary {
  background: var(--ember);
  color: var(--ink);
}


.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--ember-dark);
}


/* Arrow nudge inside any .btn */
.btn .arrow {
  transition: transform var(--dur-med) var(--ease-out-expo);
}


.btn:hover .arrow {
  transform: translateX(4px);
}


/* Hairline divider */
.hairline {
  height: 1px;
  background: var(--ink-08);
  border: 0;
}



/* ============================================================
 * PHASE 2 — NAV
 * ========================================================== */

/* Nav bar */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--ink-08);
  height: 72px;
  display: flex;
  align-items: center;
}

@media (max-width: 768px) {
  .nav { height: 64px; }
}



/* Inner layout row */
.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  width: 100%;
}


/* Logo wordmark */
.nav-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}


.nav-logo img {
  display: block;
  height: 48px;
  width: auto;
}

@media (max-width: 768px) {
  .nav-inner {
    position: relative;
  }
  .nav-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .nav-logo img {
    height: 30px;
  }
}


/* Hide the navbar logo on mobile/tablet ONLY on the homepage — the hero
   already has a large centred logo there. Every other page (product, about,
   articles, services, etc.) shows the centred mobile logo from the
   <= 768px block above. Add class="is-home" to index.html's <body>. */
@media (max-width: 1024px) {
  body.is-home .nav-logo { display: none; }
}



/* Nav links list */
.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto;
}


.nav-links > li {
  position: relative;
}


/* All nav links */
.nav-links > li > a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--ink-80);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out-expo);
}


.nav-links > li > a:hover,
.nav-links > li > a:focus-visible {
  color: var(--ember);
}


/* Phone CTA */
.nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ember);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 7px 12px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out-expo);
}


.nav-phone:hover,
.nav-phone:focus-visible {
  background: var(--ember-dark);
  color: var(--ink);
}


/* Book button — compact override */
.nav-book {
  font-size: 0.78rem;
  padding: 9px 22px;
  flex-shrink: 0;
  white-space: nowrap;
}


/* Hamburger toggle — hidden on desktop */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  margin-left: 0; /* far left on mobile ("app menu"); display:none on desktop (Ben 2026-05-25) */
  flex-shrink: 0;
}


.hamburger-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform var(--dur-med) var(--ease-out-expo), opacity var(--dur-fast);
}


.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {

  .nav-toggle {
    display: flex;
  }

  .nav-phone {
    display: none;
  }

  .nav-links {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--ink-08);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding: 8px 16px 16px;
    box-shadow: 0 8px 24px rgba(10, 10, 10, 0.08);
    z-index: 99;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links > li > a {
    padding: 11px 4px;
    font-size: 0.95rem;
    border-radius: 0;
    border-bottom: 1px solid var(--ink-08);
  }

  .nav-links > li:last-of-type > a {
    border-bottom: none;
  }

  /* Keep book button visible on mobile, pinned to the far right (Ben 2026-05-25).
     margin-left:auto absorbs the free space so BOOK lands far right, with the
     hamburger far left and the absolutely-centered logo between them. */
  .nav-book {
    display: inline-flex;
    flex-shrink: 0;
    margin-left: auto;
  }
}



/* --- BACK TO TOP --- */
.back-to-top { position: fixed; bottom: 32px; right: 32px; z-index: 500; width: 44px; height: 44px; border-radius: 50%; background: var(--ember); color: var(--ink); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--dur-med) var(--ease-out-expo), transform var(--dur-med) var(--ease-out-expo); }

.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.back-to-top:hover { background: var(--ember-dark); }

@media (max-width: 768px) { .back-to-top { bottom: 20px; right: 20px; }
}



/* ============================================================
 * PHASE 9 — FOOTER (SPEC §13)
 * ========================================================== */
.dev-footer { background: var(--ink); color: var(--paper); padding-block: 64px 40px; }

.footer-inner { }

.footer-brand { display: flex; flex-direction: column; gap: 4px; margin-bottom: 40px; }

.footer-wordmark { font-size: 1.1rem; font-weight: 700; color: var(--paper); letter-spacing: 0.5px; }

.footer-tagline { font-size: 0.75rem; color: rgba(255,255,255,0.5); }

.footer-cols { display: grid; grid-template-columns: repeat(5,1fr); gap: 24px; }

.footer-col h3 { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; color: rgba(255,255,255,0.5); margin-bottom: 12px; line-height: 1; }

.footer-col a, .footer-col span { display: block; font-size: 13px; color: rgba(255,255,255,0.7); line-height: 1; margin-bottom: 9px; text-decoration: none; }

.footer-col a:hover { color: var(--ember); }

.footer-hr { background: rgba(255,255,255,0.1); margin-block: 32px; }

.footer-areas { font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.8; }

.footer-areas-label { display: inline-block; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-right: 8px; }

.footer-areas a { color: rgba(255,255,255,0.4); text-decoration: none; }

.footer-areas a:hover { color: var(--ember); }

.footer-compliance { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 11px; color: rgba(255,255,255,0.4); }

.footer-compliance a { color: rgba(255,255,255,0.4); text-decoration: none; }

.footer-compliance a:hover { color: var(--ember); }

@media (max-width: 900px) { .footer-cols { grid-template-columns: repeat(2,1fr); }
}


@media (max-width: 480px) { .footer-cols { grid-template-columns: 1fr; } .footer-compliance { flex-direction: column; }
}



/* --- §11 Animated link underlines (text links only — buttons/CTAs excluded) --- */
a.link, .dev-footer a, .dev-contact .contact-link, .dev-contact .contact-footer-line a, .articles-viewall a { position: relative; text-decoration: none; }

a.link::after, .dev-footer a::after, .dev-contact .contact-link::after, .dev-contact .contact-footer-line a::after, .articles-viewall a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 350ms var(--ease-out-expo); }

a.link:hover::after, .dev-footer a:hover::after, .dev-contact .contact-link:hover::after, .dev-contact .contact-footer-line a:hover::after, .articles-viewall a:hover::after { transform: scaleX(1); }


/* Footer suburb chips — colour shift on hover */
.footer-suburbs a,
.suburb-chip,
.footer-col a {
  transition: color 200ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
}


/* ============================================================
   STYLE.CSS CASCADE OVERRIDES — added 2026-05-28
   These rules exist solely to defeat conflicting rules in style.css
   on pages that load BOTH stylesheets. Without these, the hamburger
   bars render white (invisible on white nav) and the mobile dropdown
   misaligns. See /opt/backups/ifix-chrome-css-conflict-fix-2026-05-28/
   for the pre-fix snapshot.
   ============================================================ */

/* style.css line 82: .nav-toggle span { background:#fff } would paint
   our hamburger-bar spans white. Specificity bump beats (0,0,1,1). */
.nav-toggle .hamburger-bar {
  background: var(--ink);
  transition: transform var(--dur-med) var(--ease-out-expo),
              opacity var(--dur-fast);
}

/* style.css line 83-85: .nav-toggle.open span uses the OLD class-based
   X-animation hook. New JS sets aria-expanded only. Block the stale rule
   firing if the toggle ever gets .open from anywhere. */
.nav-toggle.open .hamburger-bar:nth-child(1),
.nav-toggle.open .hamburger-bar:nth-child(2),
.nav-toggle.open .hamburger-bar:nth-child(3) {
  transform: none;
  opacity: 1;
}

/* style.css line 401: .nav-links { margin-left:16px !important } is a
   TOP-LEVEL rule (no media query), so it applies at every viewport size.
   It pins the nav-links 16px from the left of .nav-inner — breaking the
   intended margin-left:auto right-alignment on desktop AND offsetting the
   mobile dropdown 16px from the left edge. Must use !important on both
   to win the !important duel.

   Desktop: margin-left:auto pushes the UL to the far right of the flex
   container (so links sit between the logo and the right-side CTAs).
   Mobile (<=768px): margin-left:0 keeps the absolute-positioned dropdown
   flush to the left viewport edge. */
.nav .nav-links {
  margin-left: auto !important;
}

@media (max-width: 768px) {
  .nav .nav-links {
    margin-left: 0 !important;
  }
}

/* style.css line 392: .nav-phone { margin-left: auto; } adds a SECOND auto-margin
   in the nav's flex container. When two flex children both have margin-left:auto,
   free space is SPLIT between them — nav-links lands in the middle, nav-phone
   and nav-book on the right. The homepage doesn't load style.css so it doesn't
   have this bug. Override with higher specificity so chrome.css wins. */
.nav .nav-phone {
  margin-left: 0;
}

/* style.css line 346 sets `.nav-links.open { background: var(--dark) }` for
   the mobile dropdown (0,0,2,0 specificity). chrome.css's base `.nav-links`
   rule (0,0,1,0) loses on specificity even though loaded later, so the
   dropdown renders dark navy with our dark link text → unreadable.
   Match specificity here so chrome.css wins. */
@media (max-width: 768px) {
  .nav .nav-links.open {
    background: var(--paper);
    border-bottom: 1px solid var(--ink-08);
  }
  /* Also explicitly set link colour inside the open dropdown so it survives
     any per-page inline style.css with .nav-links.open .dropdown-menu rules */
  .nav .nav-links.open > li > a {
    color: var(--ink);
    background: transparent;
  }
  .nav .nav-links.open > li > a:hover,
  .nav .nav-links.open > li > a:focus-visible {
    color: var(--ember);
  }
}

/* style.css lines 59-60: .nav-links / .nav-links a colour + spacing rules
   target the OLD dark-theme nav. Override colours to match the new chrome. */
.nav .nav-links a {
  color: var(--ink);
}

.nav .nav-links a:hover,
.nav .nav-links a:focus-visible {
  color: var(--ember);
}

/* ===== CANONICAL CHROME (NAV+FOOTER) — single source of truth from index.html =====
   Auto-extracted 2026-06-13. Do not hand-edit nav/footer rules above this block;
   re-extract from home.min.css instead. Loads after style.css so these win. */
.nav{position:sticky;top:0;z-index:100;background:var(--paper);border-bottom:1px solid var(--ink-08);height:72px;display:flex;align-items:center}
@media (max-width:768px){.nav{height:64px}}
.nav-inner{display:flex;align-items:center;gap:var(--space-6);width:100%}
.nav-links>li>a,.nav-logo{display:inline-flex;align-items:center}
.nav-logo{flex-shrink:0}
.nav-logo img{display:block;height:48px;width:auto}
@media (max-width:768px){.nav-inner{position:relative}.nav-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.nav-logo img{height:48px}}
@media (max-width:1024px){body.is-home .nav-logo{display:none}}
.nav-links{display:flex;align-items:center;gap:2px;list-style:none;padding:0;margin:0 0 0 auto}
.nav-links>li{position:relative}
.nav-links>li>a{gap:4px;font-weight:500;font-size:.85rem;color:var(--ink-80);padding:6px 10px;border-radius:var(--radius-sm);transition:color var(--dur-fast) var(--ease-out-expo)}
.nav-links>li>a:focus-visible,.nav-links>li>a:hover{color:var(--ember)}
.nav-dropdown.open>a>.chev{transform:rotate(180deg)}
.nav-dropdown.open>.dropdown-menu{opacity:1;transform:translateY(0);pointer-events:auto}
.nav-phone{display:inline-flex;align-items:center;gap:6px;background:var(--ember);color:var(--ink);font-size:.78rem;font-weight:700;border-radius:6px;padding:7px 12px;white-space:nowrap;flex-shrink:0;transition:background var(--dur-fast) var(--ease-out-expo)}
.nav-phone:focus-visible,.nav-phone:hover{background:var(--ember-dark);color:var(--ink)}
.nav-book{font-size:.78rem;padding:9px 22px;flex-shrink:0;white-space:nowrap}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;background:0 0;border:0;cursor:pointer;padding:6px;border-radius:var(--radius-sm);margin-left:0;flex-shrink:0}
.hamburger-bar{display:block;width:22px;height:2px;background:var(--ink);border-radius:2px;transition:transform var(--dur-med) var(--ease-out-expo),opacity var(--dur-fast)}
.nav-toggle[aria-expanded=true] .hamburger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded=true] .hamburger-bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] .hamburger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:768px){.nav-links.open,.nav-toggle{display:flex}.nav-phone{display:none}.nav-links,.nav-links>li>a{border-bottom:1px solid var(--ink-08)}.nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;gap:0;margin-left:0;padding:8px 16px 16px;box-shadow:0 8px 24px rgba(10,10,10,.08);z-index:99}.nav-links>li>a{padding:11px 4px;font-size:.95rem;border-radius:0}.nav-links>li:last-of-type>a{border-bottom:none}.nav-dropdown.open>.dropdown-menu{max-height:600px;pointer-events:auto;padding:4px 8px 8px}.nav-book{display:inline-flex;flex-shrink:0;margin-left:auto}}
.contact-footer-line a:hover,.footer-areas a:hover,.footer-col a:hover,.footer-compliance a:hover{color:var(--ember)}
.dev-footer{background:var(--ink);color:var(--paper);padding-block:64px 40px}
.footer-brand{display:flex;flex-direction:column;gap:4px;margin-bottom:40px}
.footer-wordmark{font-size:1.1rem;font-weight:700;color:var(--paper);letter-spacing:.5px}
.footer-tagline{font-size:.75rem;color:rgba(255,255,255,.5)}
.footer-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:24px}
.footer-col h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.5);margin-bottom:12px;line-height:1}
.footer-col a,.footer-col span{display:block;font-size:13px;color:rgba(255,255,255,.7);line-height:1;margin-bottom:9px;text-decoration:none}
.footer-hr{background:rgba(255,255,255,.1);margin-block:32px}
.footer-areas{font-size:11px;color:rgba(255,255,255,.4);line-height:1.8}
.footer-areas-label{display:inline-block;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-right:8px}
.footer-areas a,.footer-compliance a{color:rgba(255,255,255,.4);text-decoration:none}
.footer-compliance{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:11px;color:rgba(255,255,255,.4)}
@media (max-width:900px){.footer-cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.footer-cols{grid-template-columns:1fr}.footer-compliance{flex-direction:column}}
.articles-viewall a,.dev-contact .contact-footer-line a,.dev-contact .contact-link,.dev-footer a,a.link{position:relative;text-decoration:none}
.articles-viewall a::after,.dev-contact .contact-footer-line a::after,.dev-contact .contact-link::after,.dev-footer a::after,a.link::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 350ms var(--ease-out-expo)}
.articles-viewall a:hover::after,.dev-contact .contact-footer-line a:hover::after,.dev-contact .contact-link:hover::after,.dev-footer a:hover::after,a.link:hover::after{transform:scaleX(1)}
.footer-col a,.footer-suburbs a,.suburb-chip{transition:color 200ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1))}
.footer-suburbs a:hover,.suburb-chip:hover{color:var(--ember, #ff7d03)}
.nav[data-slide-down]{position:sticky;top:0;opacity:1}
.nav[data-slide-down].is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){.nav[data-slide-down]{top:0!important;opacity:1!important}}
.dev-footer{padding-block:44px 26px}
.footer-brand{margin-bottom:22px}
.footer-col h3{margin-bottom:8px}
.footer-col a,.footer-col span{margin-bottom:2px;line-height:1.4}
.footer-col span{padding:5px 4px 5px 0}
.footer-hr{margin-block:18px}
.footer-areas{line-height:1.7}
.footer-cols{gap:20px 24px}
@media (max-width:480px){.footer-cols{grid-template-columns:repeat(2,1fr)}.footer-compliance{flex-direction:row;flex-wrap:wrap}}
.footer-logo{display:inline-block;line-height:0}
.footer-logo img{height:46px;width:auto;display:block}
.footer-brand{gap:8px}
.footer-tagline{font-size:.72rem;color:rgba(255,255,255,.45)}
@media (max-width:480px){.footer-logo img{height:40px}}
/* article-responsive.css */
/* ============================================================
   ARTICLE RESPONSIVE LAYOUT — Ben 2026-08-06
   Articles were a single 760px mobile-scale column at every
   viewport. This file adds tablet + desktop tiers on top of the
   per-article inline styles. Loaded last in <head> so it wins ties.
   ============================================================ */

/* ---- TABLET 601–1023px ---- */
@media (min-width: 601px) and (max-width: 1023px) {
  .article-body, .article-header { max-width: 700px; }
  .article-header h1 { font-size: clamp(1.7rem, 3.6vw, 2.2rem); }
  .article-body p, .article-body li, .article-body blockquote p { font-size: 0.95rem; }
  .article-body h2 { font-size: 1.3rem; margin: 38px 0 12px; }
  .article-body h3 { font-size: 1.05rem; }
  .pick-card { padding: 24px; }
  .pick-card p { font-size: 0.9rem; }
  .product-card { grid-template-columns: 170px 1fr; gap: 22px; }
  .product-card .product-image { width: 170px; }
}

/* ---- DESKTOP ≥1024px ---- */
@media (min-width: 1024px) {
  .article-body, .article-header { max-width: 1100px; margin-inline: auto; }
  /* resources articles carry hard-coded style="max-width:720px" wrappers
     (FAQ, related blocks) — inline styles need !important to override */
  div[style*="max-width:720px"], div[style*="max-width: 720px"] { max-width: 1100px !important; }
  .article-header { margin-bottom: 40px; }
  .article-header h1 { font-size: clamp(2rem, 2.6vw, 2.6rem); line-height: 1.15; }
  .article-header .meta { font-size: 0.78rem; }
  .article-body p, .article-body li, .article-body blockquote p { font-size: 1rem; line-height: 1.75; }
  .article-body h2 { font-size: 1.45rem; margin: 44px 0 14px; }
  .article-body h3 { font-size: 1.15rem; margin: 28px 0 10px; }
  .article-back { font-size: 0.82rem; }
  .pick-card { padding: 28px 32px; margin: 24px 0; }
  .pick-card h3 { font-size: 1.15rem; }
  .pick-card p { font-size: 0.95rem; }
  .pick-card .badge { font-size: 0.72rem; }
  .pick-card .specs { font-size: 0.85rem; padding-top: 14px; margin-top: 14px; }
  .product-card { grid-template-columns: 210px 1fr; gap: 28px; }
  .product-card .product-image { width: 210px; }
  .product-card .stars { font-size: 0.8rem; }
  .article-body .product-cta { font-size: 0.85rem; padding: 11px 22px; }
  .compare-table { font-size: 0.82rem; }
  .compare-table thead th { font-size: 0.76rem; }
  .compare-table th, .compare-table td { padding: 11px 13px; }
  .article-cta { padding: 40px; }
  .article-cta h3 { font-size: 1.2rem; }
  .article-cta p { font-size: 0.92rem; }
  .cta-grid a strong { font-size: 0.95rem; }
  .cta-grid a span { font-size: 0.8rem; }
  .bench-section { padding: 24px 28px; }
  .bench-section h3 { font-size: 1.05rem; }
  .bench-section p { font-size: 0.95rem; }
  .affiliate-disclosure { font-size: 0.8rem; }
  .all-buying-guides-link { font-size: 0.8rem; }
}

/* ---- WIDE DESKTOP ≥1440px ---- */
@media (min-width: 1440px) {
  .article-body, .article-header { max-width: 1240px; }
  div[style*="max-width:720px"], div[style*="max-width: 720px"] { max-width: 1240px !important; }
  .article-body p, .article-body li, .article-body blockquote p { font-size: 1.05rem; }
  .product-card { grid-template-columns: 240px 1fr; gap: 32px; }
  .product-card .product-image { width: 240px; }
}

/* 2026-09-18: wide comparison tables were clipped on phones (html is overflow-x:hidden,
   so the right-hand columns were cut off). Let them scroll inside their own box. */
@media (max-width: 700px) {
  .article-body table.compare-table,
  .article-body table.ip-table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
/* article-layout.css */
/* Article layout fix (Ben, 2026-09-18). Loaded LAST in <head> so it beats inline page styles. */

/* Phones: text sat 40px in from each edge (24px page padding + 16px article padding). Now 16px. */
@media (max-width: 600px) {
  .article-page .container { padding-left: 16px; padding-right: 16px; }
  .article-page .article-body, .article-page .article-header { padding-left: 0; padding-right: 0; }
}

/* Tablets and phones in landscape / desktop-site mode (601-1023px):
   the header was capped at 700px and pinned LEFT while the body was centred,
   so the title sat off-centre, and both left wide empty gutters. Both now use
   the full width and centre together. */
@media (min-width: 601px) and (max-width: 1023px) {
  .article-page .article-body, .article-page .article-header { max-width: none; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; }
  div[style*="max-width:720px"], div[style*="max-width: 720px"] { max-width: none !important; }
}

/* Phones: 3-across "related articles" link grids (69 pages) squeezed each card
   to ~100px and pushed the last one off the screen. Stack them instead. */
@media (max-width: 600px) {
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
}