/* =========================================================
   AC Comfort & Sizing Tool — Stylesheet
   Design tokens ported directly from reeceac.com so this tool
   feels like a native part of the site (same blues, glass
   cards, DM Serif Display headings, pill buttons, shine sweep).
   Everything is scoped under .ac-tool so it can be dropped into
   an existing page without leaking styles.
   ========================================================= */

/* =========================================================
   Site-wide nav bar (mirrors reeceac.com's fixed top nav)
   Lives outside .ac-tool as a fixed element, same as it does
   on every other page of the site — so it needs the palette
   available at :root, not just scoped under .ac-tool.
   ========================================================= */
:root {
  --ink:          #070d1f;
  --ink-soft:     #2a3558;
  --ink-muted:    #64739c;
  --bg:           #f2f5ff;
  --blue:         #033efe;
  --blue-lt:      #3a63ff;
  --blue-pale:    #dce6ff;
  --blue-deep:    #0128c8;
  --white:        #ffffff;
  --ease:         cubic-bezier(0.4,0,0.2,1);
  --grad-brand:   linear-gradient(100deg, #033efe 0%, #3a63ff 25%, #7fa8ff 50%, #3a63ff 75%, #033efe 100%);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); }

nav#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 0 5vw; height: 72px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.5s var(--ease);
}
nav#nav.scrolled {
  background: rgba(242,245,255,0.88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(3,62,254,0.1);
  box-shadow: 0 2px 24px rgba(3,62,254,0.08);
}
@media (max-width: 700px) {
  nav#nav.scrolled { background: rgba(242,245,255,0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
.nav-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.nav-logo img { height: 68px; width: auto; object-fit: contain; }
.nav-links { display: flex; align-items: center; gap: 1.4rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; position: relative; transition: color 0.3s; white-space: nowrap; font-family: 'Inter', sans-serif; }
.nav-links a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1.5px; background: var(--blue); transition: width 0.35s var(--ease); }
.nav-links a:hover { color: var(--blue); }
.nav-links a:hover::after { width: 100%; }
.nav-links a.current { color: var(--blue); }
.nav-links a.current::after { width: 100%; }
.nav-phone { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; font-weight: 600; color: var(--blue) !important; letter-spacing: 0.03em !important; text-transform: none !important; }
.nav-phone::after { display: none !important; }
.nav-phone svg { width: 14px; height: 14px; flex-shrink: 0; }
.nav-cta {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex !important; align-items: center !important;
  font-size: 0.74rem !important; font-weight: 600 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important;
  font-family: 'Inter', sans-serif;
  color: var(--white) !important; background: var(--blue) !important;
  padding: 0.6rem 1.3rem !important; border-radius: 100px !important;
  text-decoration: none !important; box-shadow: 0 4px 18px rgba(3,62,254,0.28) !important;
  white-space: nowrap !important; transition: transform 0.2s !important;
}
/* Static gradient (no infinite background-position animation) — same
   flicker-avoidance reasoning as .btn--primary below. */
.nav-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--grad-brand); background-size: 250% auto; background-position: 30% 50%; }
.nav-cta::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 2; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent); transform: skewX(-20deg); transition: left 0.65s var(--ease); pointer-events: none; }
.nav-cta:hover::after { left: 130%; }
.nav-cta:hover { transform: translateY(-1px) !important; }

.nav-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; z-index: 310; position: relative; }
.nav-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--ink); border-radius: 2px; transition: transform 0.38s var(--ease), opacity 0.28s var(--ease), width 0.3s var(--ease); transform-origin: center; }
.menu-open .nav-hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.menu-open .nav-hamburger span:nth-child(2) { opacity: 0; transform: scaleX(0.2); }
.menu-open .nav-hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-menu { position: fixed; inset: 0; z-index: 300; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.38s var(--ease); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 6.5rem 1.5rem 2.5rem; }
.mobile-menu::before { content: ''; position: absolute; top: -150px; right: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(3,62,254,0.1), transparent 70%); pointer-events: none; }
.menu-open .mobile-menu { opacity: 1; pointer-events: all; }
.mobile-menu-logo { display: block; margin-bottom: 1.3rem; opacity: 0; transform: translateY(10px); transition: opacity 0.3s, transform 0.3s; flex-shrink: 0; }
.mobile-menu-logo img { height: 60px; width: auto; }
.menu-open .mobile-menu-logo { opacity: 1; transform: none; transition-delay: 0.04s; }
.mobile-menu-links { list-style: none; text-align: center; flex-shrink: 0; margin: 0; padding: 0; }
.mobile-menu-links a { font-size: clamp(1.15rem, 4.6vw, 1.6rem); font-weight: 300; color: var(--ink); text-decoration: none; display: block; padding: 0.32rem 0; opacity: 0; transform: translateY(16px); transition: color 0.25s, opacity 0.36s var(--ease), transform 0.36s var(--ease); font-family: 'DM Serif Display', serif; }
.mobile-menu-links a:hover { color: var(--blue); }
.menu-open .mobile-menu-links li:nth-child(1) a { opacity:1; transform:none; transition-delay:0.06s; }
.menu-open .mobile-menu-links li:nth-child(2) a { opacity:1; transform:none; transition-delay:0.09s; }
.menu-open .mobile-menu-links li:nth-child(3) a { opacity:1; transform:none; transition-delay:0.12s; }
.menu-open .mobile-menu-links li:nth-child(4) a { opacity:1; transform:none; transition-delay:0.15s; }
.menu-open .mobile-menu-links li:nth-child(5) a { opacity:1; transform:none; transition-delay:0.18s; }
.menu-open .mobile-menu-links li:nth-child(6) a { opacity:1; transform:none; transition-delay:0.21s; }
.menu-open .mobile-menu-links li:nth-child(7) a { opacity:1; transform:none; transition-delay:0.24s; }
.menu-open .mobile-menu-links li:nth-child(8) a { opacity:1; transform:none; transition-delay:0.27s; }
.mobile-menu-divider { width:40px; height:1px; background:rgba(3,62,254,0.2); margin:1.1rem auto; opacity:0; transition:opacity 0.3s; flex-shrink: 0; }
.menu-open .mobile-menu-divider { opacity:1; transition-delay:0.28s; }
.mobile-menu-cta { display: inline-block; font-size:0.74rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; font-family: 'Inter', sans-serif; color:var(--white); background:var(--blue); padding:0.9rem 2.2rem; border-radius:100px; text-decoration:none; box-shadow:0 6px 24px rgba(3,62,254,0.28); opacity:0; transform:translateY(10px); flex-shrink: 0; transition: background 0.3s, opacity 0.32s var(--ease), transform 0.32s var(--ease); }
.mobile-menu-cta:hover { background:var(--blue-deep); }
.menu-open .mobile-menu-cta { opacity:1; transform:none; transition-delay:0.3s; }
.mobile-menu-secondary { display:flex; gap:1.6rem; margin-top:1.1rem; flex-shrink:0; }
.mobile-menu-secondary-link { background:none; border:none; cursor:pointer; font-family:'Inter', sans-serif; font-size:0.72rem; font-weight:600; letter-spacing:0.04em; color: var(--ink-muted); text-decoration:none; padding:0.3rem 0; opacity:0; transform:translateY(10px); transition: color 0.25s, opacity 0.32s var(--ease), transform 0.32s var(--ease); }
.mobile-menu-secondary-link:hover { color: var(--blue); }
.menu-open .mobile-menu-secondary-link { opacity:1; transform:none; transition-delay:0.33s; }
@media (max-height: 640px) {
  .mobile-menu { padding: 5.5rem 1.5rem 2rem; }
  .mobile-menu-logo { margin-bottom: 0.8rem; }
  .mobile-menu-logo img { height: 46px; }
  .mobile-menu-links a { font-size: clamp(1.05rem, 4.2vw, 1.3rem); padding: 0.22rem 0; }
  .mobile-menu-divider { margin: 0.8rem auto; }
}
@media (max-width: 960px) { .nav-hamburger { display: flex; } .nav-links { display: none; } }
body.menu-open { overflow: hidden; }

.ac-tool {
  /* ---- Core palette (matches reeceac.com :root) ---- */
  --ink:          #070d1f;
  --ink-soft:     #2a3558;
  --ink-muted:    #64739c;
  --bg:           #f2f5ff;
  --bg-2:         #e6ebff;
  --blue:         #033efe;
  --blue-lt:      #3a63ff;
  --blue-pale:    #dce6ff;
  --blue-deep:    #0128c8;
  --white:        #ffffff;
  --glass-bg:     rgba(255,255,255,0.72);
  --glass-border: rgba(255,255,255,0.88);
  --glass-shadow: 0 8px 40px rgba(3,62,254,0.07), 0 2px 8px rgba(0,0,0,0.04);
  --radius-lg:    20px;
  --radius-md:    14px;
  --radius-sm:    8px;
  --ease:         cubic-bezier(0.4,0,0.2,1);
  --grad-brand:   linear-gradient(100deg, #033efe 0%, #3a63ff 25%, #7fa8ff 50%, #3a63ff 75%, #033efe 100%);

  /* ---- Status colors (tool-specific, kept in the same family) ---- */
  --green-600: #0a9d5c;
  --green-100: #e2f7ee;
  --amber-600: #b56a00;
  --amber-100: #fdf0dc;
  --red-600:   #d92d2d;
  --red-100:   #fbe6e3;

  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  max-width: 1080px;
  margin: 0 auto;
  padding: 6.5rem 1.5rem 3rem; /* top padding clears the fixed site nav (72px) */
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.ac-tool *,
.ac-tool *::before,
.ac-tool *::after {
  box-sizing: border-box;
}

/* ---------- Ambient background blobs (matches site hero) ---------- */

.ac-tool__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: var(--radius-lg); }
.ac-tool__blob { position: absolute; border-radius: 50%; filter: blur(70px); }
.ac-tool__blob--1 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(3,62,254,0.12), transparent 70%); top: -140px; left: -120px; }
.ac-tool__blob--2 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(58,99,255,0.1), transparent 70%); bottom: -100px; right: -100px; }

@media (prefers-reduced-motion: reduce) {
  .ac-tool *, .ac-tool *::before, .ac-tool *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.ac-tool > * { position: relative; z-index: 1; }

/* ---------- Header ---------- */

.ac-tool__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.ac-tool__brand {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.ac-tool__logo {
  height: 48px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}

.ac-tool__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.ac-tool__eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--blue); display: block; flex-shrink: 0; }
.ac-tool__eyebrow span { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--blue); }

.ac-tool__title {
  margin: 0;
  font-family: 'DM Serif Display', serif;
  font-size: 1.9rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.ac-tool__title em {
  font-style: italic;
  background: var(--grad-brand);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: acGradientShift 6s linear infinite;
}

@keyframes acGradientShift { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

.ac-tool__subtitle {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 46ch;
}

.ac-tool__call {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--white);
  background: var(--blue);
  padding: 0.7rem 1.3rem;
  border-radius: 100px;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(3,62,254,0.28);
  transition: background 0.25s, transform 0.2s, box-shadow 0.25s;
  white-space: nowrap;
}
.ac-tool__call:hover { background: var(--blue-deep); transform: translateY(-1px); box-shadow: 0 10px 30px rgba(3,62,254,0.36); }
.ac-tool__call svg { width: 14px; height: 14px; }

/* ---------- Tabs ---------- */

.ac-tool__tabs {
  display: flex;
  gap: 0.4rem;
  border-bottom: 2px solid rgba(3,62,254,0.12);
  margin-bottom: 2rem;
}

.tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-muted);
  padding: 0.85rem 1.1rem;
  margin-bottom: -2px;
  border-bottom: 3px solid transparent;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab-btn:hover { color: var(--blue); }
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.tab-icon { font-size: 1.05rem; }

/* ---------- Panels & layout ---------- */

.tab-panel { animation: acFadeIn 0.25s ease; }
@keyframes acFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.panel-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 780px) { .panel-grid { grid-template-columns: 1fr; } }

.results-stack { display: flex; flex-direction: column; gap: 1.25rem; }

/* ---------- Glass cards (matches site's .service-card / .step-card) ---------- */

.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--glass-shadow);
  padding: 1.6rem;
  position: relative;
  overflow: hidden;
}
.card::after {
  content: '';
  position: absolute; inset: 0; border-radius: var(--radius-lg);
  background: linear-gradient(140deg, rgba(255,255,255,0.5) 0%, transparent 55%);
  pointer-events: none;
}

.card__title {
  margin: 0 0 1.15rem;
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink);
  position: relative;
}

/* ---------- Form fields ---------- */

.field { margin-bottom: 1.25rem; position: relative; }

.field__label {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.45rem;
}

.field input[type="number"] {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* >=16px prevents iOS Safari from auto-zooming on focus */
  color: var(--ink);
  background: rgba(255,255,255,0.75);
  padding: 0.85rem 0.9rem;
  border: 1px solid rgba(3,62,254,0.16);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.field input[type="number"]:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(3,62,254,0.12); }
.field input[aria-invalid="true"] { border-color: var(--red-600); }

.field__error {
  min-height: 1.1rem;
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--red-600);
}

/* Segmented F/C toggle */

.segmented {
  display: inline-flex;
  border: 1px solid rgba(3,62,254,0.16);
  border-radius: 999px;
  padding: 3px;
  background: rgba(255,255,255,0.6);
  width: fit-content;
}
.segmented input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.segmented label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.segmented input[type="radio"]:checked + label { background: var(--blue); color: var(--white); }
.segmented input[type="radio"]:focus-visible + label { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Priority cards */

.priority-cards { display: grid; gap: 0.6rem; }
.priority-cards input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.priority-card {
  display: flex; flex-direction: column; gap: 0.15rem;
  min-height: 44px;
  justify-content: center;
  border: 1px solid rgba(3,62,254,0.16);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.6);
  padding: 0.85rem 0.9rem;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.priority-card__title { font-weight: 700; font-size: 0.9rem; color: var(--ink); }
.priority-card__desc { font-size: 0.78rem; color: var(--ink-muted); }
.priority-cards input[type="radio"]:checked + .priority-card { border-color: var(--blue); background: var(--blue-pale); }
.priority-cards input[type="radio"]:focus-visible + .priority-card { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- Buttons (matches site's shine-sweep primary button) ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.9rem 1.2rem;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  transition: transform 0.2s, box-shadow 0.3s, background 0.3s;
  position: relative; overflow: hidden; isolation: isolate;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  color: var(--white);
  background: var(--blue);
  box-shadow: 0 6px 26px rgba(3,62,254,0.3);
}
.btn--primary::before {
  /* Static gradient rather than an animated background-position sweep.
     Animating background-position forces a full repaint of this layer
     every frame, and because these buttons sit inside backdrop-filter
     cards, that repaint was cascading into a visible flicker/jitter on
     the whole card. The site's own main page already disables this
     same animation on mobile for the same reason (see index.html) —
     here we just skip the animation entirely and keep a fixed,
     good-looking gradient position instead. */
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--grad-brand); background-size: 250% auto;
  background-position: 30% 50%;
}
.btn--primary::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; z-index: 2;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg); transition: left 0.65s var(--ease); pointer-events: none;
}
.btn--primary:hover::after { left: 130%; }
.btn--primary:hover { box-shadow: 0 10px 34px rgba(3,62,254,0.4); }

.btn--cta {
  color: var(--ink);
  background: var(--white);
  margin-top: 0.25rem;
  box-shadow: 0 8px 28px rgba(3,62,254,0.12);
}
.btn--cta:hover { background: var(--blue-pale); transform: translateY(-2px); }

/* ---------- Badges (matches site's hero-badge-pill) ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.85rem;
  border-radius: 100px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--glass-border);
}
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.badge--eco { color: var(--green-600); }
.badge--eco::before { background: var(--green-600); }
.badge--balanced { color: var(--blue); }
.badge--balanced::before { background: var(--blue); }
.badge--caution { color: var(--amber-600); }
.badge--caution::before { background: var(--amber-600); }
.badge--budget { color: var(--ink-muted); }
.badge--budget::before { background: var(--ink-muted); }

/* ---------- Result headline ---------- */

.result-card__label {
  margin: 1rem 0 0.1rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.result-card__value {
  margin: 0;
  font-family: 'DM Serif Display', serif;
  font-size: 3rem;
  font-weight: 400;
  color: var(--ink);
  line-height: 1;
  position: relative;
}
.result-card__value em {
  font-style: normal;
  background: var(--grad-brand);
  background-size: 250% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: acGradientShift 6s linear infinite;
}
.result-card__tip {
  margin: 1rem 0 0;
  font-size: 0.87rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

/* ---------- Chart section headings ---------- */

.chart-block { margin-top: 1.5rem; }
.chart-block__title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 0.6rem;
}
.chart-block__note {
  font-size: 0.74rem;
  color: var(--ink-muted);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ---------- Live weather map ---------- */

.weather-map {
  position: relative;
  width: 100%;
  padding-bottom: 68%;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.4);
}
.weather-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Efficiency gauge (temperature) ---------- */

.gauge-svg { width: 100%; height: auto; display: block; }
.gauge-marker-label { font-size: 13px; font-weight: 700; }
.gauge-scale-label { font-size: 12px; fill: var(--ink-muted); }

/* ---------- Bar chart ---------- */

.bar-chart-svg { width: 100%; height: auto; display: block; }
.bar-chart-value { font-size: 14px; font-weight: 700; }
.bar-chart-label { font-size: 12px; fill: var(--ink-muted); }

/* ---------- Stat grid (sizing results) ---------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
  margin-top: 1rem;
}
@media (max-width: 480px) { .stat-grid { grid-template-columns: 1fr; } }

.stat {
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.8rem;
  text-align: center;
}
.stat__label {
  margin: 0 0 0.25rem;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stat__value { margin: 0; font-family: 'DM Serif Display', serif; font-size: 1.5rem; font-weight: 400; color: var(--ink); }

/* ---------- Cost comparison callout ---------- */

.cost-callout {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.75rem; padding: 0.9rem 1rem;
  background: var(--blue-pale); border-radius: var(--radius-sm);
}
.cost-callout__figure { font-family: 'DM Serif Display', serif; font-size: 1.6rem; color: var(--blue-deep); }
.cost-callout__text { font-size: 0.82rem; color: var(--ink-soft); }

/* ---------- Info / glossary panel ---------- */

.info-panel {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.7rem;
}
.info-item {
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
}
.info-item__term { font-size: 0.8rem; font-weight: 700; color: var(--ink); margin-bottom: 0.2rem; }
.info-item__def { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.55; }

.tips-list { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.tips-list li { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- FAQ accordion (matches site's .faq-item) ---------- */

.ac-tool__faq { margin-top: 2.5rem; }
.faq-list { display: flex; flex-direction: column; gap: 0.8rem; margin-top: 1.2rem; }
.faq-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
}
.faq-item summary {
  list-style: none; cursor: pointer;
  min-height: 48px;
  padding: 1.1rem 1.4rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.88rem; font-weight: 600; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-icon {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
  background: var(--blue-pale);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.25s var(--ease), background 0.25s;
  font-size: 0.9rem; color: var(--blue); font-weight: 700;
}
.faq-item[open] summary .faq-icon { background: var(--blue); color: #fff; transform: rotate(45deg); }
.faq-answer { padding: 0 1.4rem 1.3rem; font-size: 0.85rem; line-height: 1.68; color: var(--ink-soft); }

/* ---------- Section heading (matches site's section-eyebrow / section-h2) ---------- */

.ac-tool__section-head { margin-bottom: 0.5rem; }

/* ---------- Footer ---------- */

.ac-tool__footer {
  margin-top: 2.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(3,62,254,0.12);
}
.ac-tool__footer p { margin: 0; font-size: 0.75rem; color: var(--ink-muted); text-align: center; }
.ac-tool__credit { margin-top: 0.5rem !important; opacity: 0.75; }
.ac-tool__credit a { color: var(--blue); text-decoration: none; }
.ac-tool__credit a:hover { text-decoration: underline; }

/* ---------- Mobile / app-like enhancements ---------- */

@media (max-width: 640px) {
  .ac-tool {
    padding: 5.5rem 1rem 2rem; /* top padding clears the fixed site nav (72px) */
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    border-radius: 0;
  }

  .ac-tool__header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.85rem;
  }

  .ac-tool__brand { gap: 0.7rem; }
  .ac-tool__logo { height: 40px; }
  .ac-tool__title { font-size: 1.45rem; }
  .ac-tool__subtitle { font-size: 0.88rem; }

  .ac-tool__call {
    justify-content: center;
    width: 100%;
    min-height: 48px;
  }

  /* Sticky tab bar — feels like an app's top nav while scrolling.
     Offset by the fixed site nav's height (72px) so it docks just
     below it instead of being hidden underneath. */
  .ac-tool__tabs {
    position: sticky;
    top: 72px;
    z-index: 30;
    margin: 0 -1rem 1.5rem;
    padding: 0 1rem;
    background: rgba(242,245,255,0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .tab-btn { flex: 1; font-size: 0.78rem; padding: 0.8rem 0.4rem; }
  .tab-btn span:not(.tab-icon) { white-space: normal; line-height: 1.15; }

  .card { padding: 1.15rem; }

  .weather-map { padding-bottom: 62%; }

  .result-card__value { font-size: 2.5rem; }

  .cost-callout { flex-direction: column; align-items: flex-start; gap: 0.2rem; }
}

/* ---------- Utility ---------- */

[hidden] { display: none !important; }