/*
Theme Name: WaterHeaterLab
Theme URI: https://waterheaterlab.com
Author: NET STUDIO LLC
Author URI: https://waterheaterlab.com/about/
Description: Custom mobile-first theme for WaterHeaterLab. Thermal-imaging gradient design system (ironbow: cyan - violet - coral - amber), comparison-table-first layout with sticky-column tables on mobile, self-hosted fonts, no page builder.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: waterheaterlab
Tags: blog, news, one-column, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   Self-hosted fonts (latin subsets, variable)
   Display: Bricolage Grotesque - Body: Inter - Data: JetBrains Mono
   ============================================================ */
@font-face{
  font-family:"Bricolage Grotesque";
  src:url(assets/fonts/bricolage-grotesque-latin.woff2) format("woff2");
  font-weight:700 800;font-style:normal;font-stretch:100%;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  src:url(assets/fonts/inter-latin.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";
  src:url(assets/fonts/inter-italic-latin.woff2) format("woff2");
  font-weight:400 700;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url(assets/fonts/jetbrains-mono-latin.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   Design tokens
   Thermal-imaging gradient (ironbow) is the brand thread:
   cold cyan -> violet -> hot coral -> amber.
   Canonical breakpoints: 480 / 640 / 880 / 920 / 1160
   ============================================================ */
:root{
  --ink:#0D1B2A;
  --ink-2:#3D5165;
  --ink-3:#54687D;
  --paper:#F4F8FB;
  --card:#FFFFFF;
  --line:#DEE9F2;

  --cyan:#00B4D8;
  --cyan-deep:#0E7490;
  --violet:#6D5BFF;
  --violet-deep:#4A3DD6;
  --coral:#FF5A3C;
  --coral-deep:#C93417;
  --amber:#FFB021;
  --amber-deep:#8A5A00;

  /* dark "device" panel palette */
  --panel:#122437;
  --panel-2:#1B3247;
  --panel-3:#24425C;
  --panel-ink:#7E97AE;
  --panel-ink-2:#A7BBCD;
  --panel-paper:#E8F1F8;
  --panel-body:#C8D8E6;
  --panel-link:#8FE8F8;

  /* light tints */
  --tint-cyan:#E3F6FB;
  --tint-violet:#ECE9FF;
  --tint-coral:#FFEAE4;
  --tint-amber:#FFF1D6;
  --tint-blue:#EAF2F8;
  --hover-wash:#E6EFF6;

  --thermal:linear-gradient(115deg,#00B4D8 0%,#6D5BFF 38%,#FF5A3C 72%,#FFB021 100%);
  --thermal-soft:linear-gradient(115deg,rgba(0,180,216,.12),rgba(109,91,255,.10),rgba(255,90,60,.12));
  /* darker stops of the same ramp - for text on light backgrounds (WCAG) */
  --thermal-deep:linear-gradient(115deg,#0E7490 0%,#4A3DD6 40%,#C93417 75%,#B45309 100%);
  --lcd:#5EEAD4; /* device-readout green: dark "LCD" surfaces only */

  --radius-lg:28px;
  --radius-md:18px;
  --radius-sm:12px;

  --shadow-card:0 2px 6px rgba(13,27,42,.05),0 18px 40px -18px rgba(13,27,42,.18);
  --shadow-pop:0 4px 10px rgba(13,27,42,.08),0 30px 60px -20px rgba(13,27,42,.28);

  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --w-max:1180px;
  --header-h:72px;
  --section-pad:88px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip; /* clips the hero blobs only - do NOT move to html (breaks position:sticky) */
}
[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
img,svg{display:block}
img{max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
/* button reset scoped to theme controls only - Gutenberg buttons keep their styles */
.nav-toggle,.seg button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:12px 22px;border-radius:0 0 14px 0;font-weight:600}
.skip-link:focus{left:0}
.screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);border:0;white-space:nowrap}
.sticky{/* required theme marker class */}
.bypostauthor{/* required theme marker class */}

.wrap{max-width:var(--w-max);margin-inline:auto;padding-inline:24px}
@media (max-width:640px){.wrap{padding-inline:18px}}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(244,248,251,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(222,233,242,.9);
}
body.admin-bar .site-header{top:32px}
@media (max-width:782px){body.admin-bar .site-header{top:46px}}
.nav{display:flex;align-items:center;gap:32px;height:var(--header-h)}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.22rem;letter-spacing:-.02em}
.logo .mark{width:36px;height:36px;flex:none}
.logo b{font-weight:800}
.logo .lab{background:var(--thermal);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav .nav-links{display:flex;gap:6px;margin-left:auto;list-style:none}
.nav .nav-links a{
  display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:999px;font-weight:500;font-size:.95rem;color:var(--ink-2);
  white-space:nowrap;transition:background .2s,color .2s;
}
.nav .nav-links a svg{flex:none;opacity:.6;transition:opacity .2s}
.nav .nav-links a:hover svg{opacity:1}
.nav .nav-links a:hover,
.nav .nav-links .current-menu-item > a,
.nav .nav-links .current-menu-ancestor > a,
.nav .nav-links a[aria-current="page"]{background:var(--hover-wash);color:var(--ink)}
.nav .nav-links .current-menu-item > a svg,
.nav .nav-links a[aria-current="page"] svg{opacity:1}
.nav-cta{
  margin-left:8px;flex:none;
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:999px;
  background:var(--ink);color:#fff;font-weight:600;font-size:.95rem;white-space:nowrap;
  transition:transform .2s,box-shadow .2s;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px -8px rgba(13,27,42,.5)}
.nav-toggle{display:none;margin-left:auto;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px}
.nav-toggle:hover{background:var(--hover-wash)}
/* breakpoint calibrated for ~5 short items - re-tune if the menu grows */
@media (min-width:1161px){.nav .nav-links .mobile-cta{display:none}}
@media (max-width:1160px){
  .nav .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav.open .nav-links{
    display:flex;flex-direction:column;position:absolute;top:var(--header-h);left:0;right:0;
    background:var(--card);border-bottom:1px solid var(--line);
    padding:14px 18px 22px;gap:4px;box-shadow:var(--shadow-card);margin:0;
  }
  .nav.open .nav-links a{display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:1.05rem;border-radius:14px}
  .nav.open .nav-links .mobile-cta a{
    background:var(--ink);color:#fff;font-weight:600;justify-content:center;margin-top:8px;
  }
}

/* ---------- section scaffolding ---------- */
.section{padding:var(--section-pad) 0}
.section-head{max-width:640px;margin-bottom:52px}
.section-head .kicker{
  font-family:var(--font-mono);font-size:.76rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--ink-3);
}
.section-head .kicker::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--thermal)}
.section-head h1,.section-head h2{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.1;margin-bottom:14px;
}
.section-head p{color:var(--ink-2);font-size:1.06rem}
@media (max-width:640px){
  :root{--section-pad:56px}
  .section-head{margin-bottom:36px}
  .eyebrow-more{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:64px 0 96px}
.hero-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none}
.hero-blob.cold{width:520px;height:520px;background:#8EE3F5;top:-160px;left:-140px}
.hero-blob.hot{width:460px;height:460px;background:#FFC9B8;top:40px;right:-160px}
.hero-blob.mid{width:360px;height:360px;background:#D7CFFF;bottom:-180px;left:38%}
.hero-grid{
  position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:48px;align-items:center;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.78rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cyan-deep);background:var(--tint-cyan);border:1px solid #BFE9F4;
  padding:7px 14px;border-radius:999px;margin-bottom:22px;
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--thermal)}
.hero h1{
  font-family:var(--font-display);
  font-size:clamp(2.5rem,5.6vw,4.15rem);
  line-height:1.04;letter-spacing:-.03em;font-weight:800;
  margin-bottom:22px;
}
.hero h1 .thermal-text{
  background:var(--thermal-deep);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero p.lede{font-size:1.15rem;color:var(--ink-2);max-width:34rem;margin-bottom:32px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;border-radius:999px;font-weight:600;font-size:1rem;
  transition:transform .2s,box-shadow .2s;
}
.btn svg{transition:transform .2s}
.btn:hover svg{transform:translateX(3px)}
.btn-hot{
  color:#fff;
  background:linear-gradient(115deg,#6D5BFF 0%,#C93417 92%);
  box-shadow:0 12px 28px -10px rgba(255,90,60,.55);
}
.btn-hot:hover{transform:translateY(-2px);box-shadow:0 18px 34px -10px rgba(255,90,60,.6)}
.btn-ghost{
  color:var(--ink);background:var(--card);border:1.5px solid var(--line);
  box-shadow:0 2px 6px rgba(13,27,42,.05);
}
.btn-ghost:hover{transform:translateY(-2px);border-color:#C6D8E6}
.hero-proof{
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;
  font-family:var(--font-mono);font-size:.8rem;color:var(--ink-2);
}
.hero-proof span{display:inline-flex;align-items:center;gap:8px}
.hero-proof svg{flex:none}
@media (max-width:920px){
  .hero{padding:44px 0 60px}
  .hero-grid{grid-template-columns:1fr;gap:20px}
  .tank-scene{transform:scale(.82);margin-block:-44px -30px;padding-top:0}
  .spec-chip.c1{left:-6px;top:0}
  .spec-chip.c2{right:-6px}
  .spec-chip.c3{left:-6px}
}

/* ---------- 3D tank ---------- */
.tank-scene{position:relative;perspective:1300px;display:flex;justify-content:center;padding:20px 0 34px}
.tank-rig{position:relative;transform-style:preserve-3d;transition:transform .35s ease}
@media (prefers-reduced-motion:no-preference){
  .tank-rig{animation:tankFloat 7s ease-in-out infinite}
  @keyframes tankFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
}
.tank{
  position:relative;width:206px;height:452px;
  transform:rotateX(4deg) rotateY(-14deg);
  transform-style:preserve-3d;
}
.tank-body{
  position:absolute;inset:22px 0 0 0;
  border-radius:103px/38px;
  background:linear-gradient(90deg,#AEC4D6 0%,#E7F1F8 16%,#FFFFFF 38%,#EDF4F9 55%,#C3D5E3 80%,#93AABD 100%);
  box-shadow:inset 0 -26px 34px -18px rgba(13,27,42,.28);
}
.tank-top{
  position:absolute;top:0;left:0;width:206px;height:46px;border-radius:50%;
  background:linear-gradient(180deg,#F6FAFD 0%,#D4E2ED 70%,#B9CDDC 100%);
  box-shadow:inset 0 3px 6px rgba(255,255,255,.9),inset 0 -4px 8px rgba(13,27,42,.12);
}
.tank-band{
  position:absolute;left:12px;top:62px;width:10px;height:330px;border-radius:6px;
  background:linear-gradient(180deg,#FFB021 0%,#FF5A3C 34%,#6D5BFF 72%,#00B4D8 100%);
  box-shadow:0 0 0 3px rgba(255,255,255,.65);
}
.tank-band::after{
  content:"";position:absolute;left:14px;top:0;bottom:0;width:8px;
  background:repeating-linear-gradient(180deg,#9FB4C6 0 2px,transparent 2px 25px);
}
.tank-panel{
  position:absolute;left:50%;bottom:76px;translate:-50% 0;
  width:116px;height:84px;border-radius:16px;
  background:linear-gradient(180deg,var(--panel),var(--ink));
  box-shadow:0 8px 18px -6px rgba(13,27,42,.5),inset 0 1px 0 rgba(255,255,255,.14);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
}
.tank-panel .readout{
  font-family:var(--font-mono);font-size:1.05rem;font-weight:700;color:var(--lcd);
  letter-spacing:.04em;text-shadow:0 0 14px rgba(94,234,212,.6);
}
.tank-panel .model{font-family:var(--font-mono);font-size:.56rem;color:var(--panel-ink);letter-spacing:.22em}
.gauge{position:relative;width:34px;height:17px;overflow:hidden}
.gauge::before{
  content:"";position:absolute;inset:0 0 -17px 0;border-radius:50%;
  border:3px solid var(--panel-3);border-bottom-color:transparent;border-right-color:transparent;
  transform:rotate(45deg);
}
.gauge .needle{
  position:absolute;bottom:0;left:50%;width:2px;height:14px;background:var(--coral);
  transform-origin:bottom center;transform:rotate(32deg);border-radius:2px;
}
.pipe{position:absolute;top:-42px;width:20px;height:66px;border-radius:10px 10px 4px 4px}
.pipe::after{
  content:"";position:absolute;top:-9px;left:-5px;width:30px;height:14px;border-radius:7px;
  background:inherit;filter:brightness(1.12);
}
.pipe.cold{left:38px;background:linear-gradient(90deg,#0891B2,#38CFEA 45%,#0E7490)}
.pipe.hot{right:38px;background:linear-gradient(90deg,#D9482B,#FF8266 45%,#C93417)}
.tank-valve{
  position:absolute;bottom:42px;left:-12px;width:30px;height:12px;border-radius:7px;
  background:linear-gradient(180deg,#FF8266,#C93417);
  box-shadow:0 2px 5px rgba(13,27,42,.3);
}
.tank-valve::after{
  content:"";position:absolute;left:-6px;top:-4px;width:10px;height:20px;border-radius:5px;
  background:linear-gradient(180deg,#D9482B,#A82A10);
}
/* ground shadow lives in .tank-scene (not the floating rig) so it stays put */
.tank-shadow{
  position:absolute;bottom:6px;left:50%;translate:-50% 0;
  width:236px;height:42px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(13,27,42,.30),transparent 68%);
}
.spec-chip{
  position:absolute;z-index:2;
  display:flex;flex-direction:column;gap:2px;
  background:rgba(255,255,255,.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(222,233,242,.9);border-radius:14px;
  padding:10px 14px;box-shadow:var(--shadow-card);
}
.spec-chip .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.spec-chip .v{font-family:var(--font-mono);font-size:.98rem;font-weight:700}
.spec-chip .v.cold{color:var(--cyan-deep)}
.spec-chip .v.hot{color:var(--coral-deep)}
.spec-chip .v.amber{color:var(--amber-deep)}
.spec-chip.c1{top:12px;left:-14%}
.spec-chip.c2{top:36%;right:-16%}
.spec-chip.c3{bottom:34%;left:-18%}
@media (prefers-reduced-motion:no-preference){
  .spec-chip{animation:chipFloat 6s ease-in-out infinite}
  .spec-chip.c2{animation-delay:1.4s}
  .spec-chip.c3{animation-delay:2.6s}
  @keyframes chipFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
}

/* ---------- decision paths ---------- */
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.path-card{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 28px 28px;box-shadow:var(--shadow-card);
  transition:transform .25s ease,box-shadow .25s ease;
  display:flex;flex-direction:column;gap:14px;
}
.path-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-pop)}
.path-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:5px;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.path-card.cold::before{background:linear-gradient(90deg,#00B4D8,#6D5BFF)}
.path-card.mid::before{background:linear-gradient(90deg,#6D5BFF,#FF5A3C)}
.path-card.hot::before{background:linear-gradient(90deg,#FF5A3C,#FFB021)}
.path-icon{
  width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;flex:none;
}
.path-card.cold .path-icon{background:var(--tint-cyan);color:var(--cyan-deep)}
.path-card.mid .path-icon{background:var(--tint-violet);color:var(--violet-deep)}
.path-card.hot .path-icon{background:var(--tint-coral);color:var(--coral-deep)}
.path-card h3{font-family:var(--font-display);font-weight:700;font-size:1.3rem;letter-spacing:-.015em}
.path-card p{color:var(--ink-2);font-size:.97rem;flex-grow:1}
.path-stat{
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-3);
  border-top:1px dashed var(--line);padding-top:14px;
}
.path-link{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.95rem}
.path-card.cold .path-link{color:var(--cyan-deep)}
.path-card.mid .path-link{color:var(--violet-deep)}
.path-card.hot .path-link{color:var(--coral-deep)}
.path-link svg{transition:transform .2s}
.path-card:hover .path-link svg{transform:translateX(4px)}
@media (max-width:900px){.paths{grid-template-columns:1fr;max-width:520px}}

/* ---------- comparison table (the load-bearing component) ---------- */
.compare-section{background:linear-gradient(180deg,var(--paper) 0%,var(--tint-blue) 100%)}
.table-shell{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-pop);overflow:hidden;
}
.table-scroller{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.table-scroller:focus-visible{outline-offset:-3px}
table.compare{border-collapse:separate;border-spacing:0;width:100%;min-width:820px}
.compare th,.compare td{
  padding:18px 22px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--line);font-size:.95rem;
}
.compare thead th{
  font-family:var(--font-display);font-weight:700;font-size:1.05rem;letter-spacing:-.01em;
  background:var(--card);border-bottom:2px solid var(--ink);padding-top:24px;
}
.compare thead .th-sub{display:block;font-family:var(--font-mono);font-weight:400;font-size:.7rem;letter-spacing:.06em;color:var(--ink-3);margin-top:4px;text-transform:uppercase}
/* each technology owns one hue of the ramp - reused by its win chips */
.compare thead th.col-a{box-shadow:inset 0 4px 0 var(--amber)}
.compare thead th.col-b{box-shadow:inset 0 4px 0 var(--coral)}
.compare thead th.col-c{box-shadow:inset 0 4px 0 var(--cyan)}
.compare tbody th{
  font-weight:600;font-size:.92rem;color:var(--ink-2);white-space:nowrap;
}
.compare .sticky-col{
  position:sticky;left:0;z-index:2;background:var(--card);
  box-shadow:6px 0 12px -8px rgba(13,27,42,.14);
  min-width:170px;
}
.compare td .num{font-family:var(--font-mono);font-weight:700;font-size:1rem;display:block}
.compare td .note{display:block;font-size:.82rem;color:var(--ink-3);margin-top:3px}
.win{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;
}
.win.cold{background:#DFF6FB;color:#0B5D74}
.win.hot{background:#FFE9E3;color:#A82A10}
.win.amber{background:var(--tint-amber);color:#7A5000}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:none}
/* verdict lives OUTSIDE the scroller so it wraps at every viewport width */
.table-verdict{background:var(--ink);color:var(--panel-paper);padding:26px 28px}
.table-verdict .verdict-label{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--panel-ink);display:block;margin-bottom:8px;
}
.table-verdict p{font-size:.92rem;line-height:1.6;color:var(--panel-body)}
.table-verdict strong{color:#fff}
.table-verdict a{color:var(--panel-link);text-decoration:underline;text-underline-offset:3px}
.table-verdict a strong{color:var(--panel-link)}
.swipe-hint{
  display:none;align-items:center;gap:8px;justify-content:center;
  font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);
  padding:12px;border-top:1px solid var(--line);background:#FAFCFE;
}
.table-shell.scrolled .swipe-hint{display:none}
@media (max-width:870px){.table-shell:not(.scrolled) .swipe-hint{display:flex}}
@media (max-width:480px){
  .compare th,.compare td{padding:14px 14px}
  .compare .sticky-col{min-width:104px}
  .compare tbody th{white-space:normal;font-size:.8rem;line-height:1.35}
  table.compare{min-width:760px}
}
.table-note{
  margin-top:18px;font-size:.83rem;color:var(--ink-3);max-width:56rem;
}
.table-note a{color:var(--cyan-deep);text-decoration:underline;text-underline-offset:3px}

/* ---------- sizing widget ---------- */
.sizer{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;
  background:var(--ink);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-pop);
}
.sizer-intro{padding:52px 48px;color:var(--panel-paper);position:relative;overflow:hidden}
.sizer-intro::after{
  content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(109,91,255,.35),transparent 70%);
  bottom:-140px;left:-100px;pointer-events:none;
}
.sizer-intro .kicker{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--panel-link);margin-bottom:16px;
  display:inline-flex;align-items:center;gap:10px;
}
.sizer-intro .kicker::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--thermal)}
.sizer-intro h2{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.85rem,3.6vw,2.7rem);line-height:1.12;margin-bottom:14px;
}
.sizer-intro p{color:var(--panel-ink-2);font-size:1rem;max-width:26rem}
.sizer-tool{background:var(--panel);padding:48px;display:flex;flex-direction:column;gap:26px}
.sizer-q{font-weight:600;color:var(--panel-paper);font-size:1.02rem}
.seg{display:flex;gap:10px;flex-wrap:wrap}
.seg button{
  flex:1;min-width:76px;min-height:52px;padding:12px 10px;border-radius:14px;
  background:var(--panel-2);color:var(--panel-ink-2);font-weight:600;font-size:.95rem;
  border:1.5px solid transparent;transition:all .2s;
}
.seg button:hover{background:var(--panel-3);color:#fff}
.seg button[aria-pressed="true"],
.seg button[aria-checked="true"]{
  background:linear-gradient(115deg,#6D5BFF,#FF5A3C);color:#fff;border-color:rgba(255,255,255,.25);
  box-shadow:0 10px 24px -8px rgba(255,90,60,.5);
}
.sizer-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.res-card{background:var(--ink);border:1px solid var(--panel-3);border-radius:16px;padding:18px 16px;text-align:center}
.res-card .k{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--panel-ink);display:block;margin-bottom:8px}
.res-card .v{font-family:var(--font-mono);font-size:1.5rem;font-weight:700;color:var(--lcd);display:block;line-height:1.1}
.res-card .u{font-family:var(--font-mono);font-size:.7rem;color:var(--panel-ink)}
.sizer-note{font-size:.8rem;color:var(--panel-ink)}
.sizer-note a{color:var(--panel-link);text-decoration:underline;text-underline-offset:3px}
@media (max-width:880px){
  .sizer{grid-template-columns:1fr}
  .sizer-intro{padding:40px 28px 30px}
  .sizer-tool{padding:30px 22px 36px}
  .sizer-results{grid-template-columns:repeat(3,minmax(0,1fr))}
  .res-card{padding:16px 10px}
  .res-card .v{font-size:clamp(1rem,4.5vw,1.2rem)}
}
@media (max-width:480px){
  .seg{display:grid;grid-template-columns:repeat(2,1fr)}
}

/* ---------- guide cards (loop-friendly: auto-fill) ---------- */
.guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.guide-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;box-shadow:var(--shadow-card);
  transition:transform .25s ease,box-shadow .25s ease;
  display:flex;flex-direction:column;
}
.guide-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-pop)}
.guide-thumb{height:130px;position:relative;overflow:hidden}
.guide-thumb.t1{background:linear-gradient(135deg,#00B4D8,#6D5BFF)}
.guide-thumb.t2{background:linear-gradient(135deg,#6D5BFF,#FF5A3C)}
.guide-thumb.t3{background:linear-gradient(135deg,#FF5A3C,#FFB021)}
.guide-thumb.t4{background:linear-gradient(135deg,#FFB021,#FF8266)}
.guide-thumb img{width:100%;height:100%;object-fit:cover}
.guide-thumb svg{position:absolute;right:-14px;bottom:-16px;opacity:.3;color:#fff}
.guide-thumb .data{
  position:absolute;left:14px;bottom:12px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.04em;
  color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(13,27,42,.35);
}
.guide-body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:10px;flex-grow:1}
.guide-tag{
  display:inline-block;align-self:flex-start;
  font-family:var(--font-mono);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;background:var(--tint-blue);color:var(--ink-2);
}
.guide-card h3,.guide-card h2{font-family:var(--font-display);font-weight:700;font-size:1.06rem;line-height:1.3;letter-spacing:-.01em;flex-grow:1}
.guide-card h3 a:hover,.guide-card h2 a:hover{color:var(--cyan-deep)}
.guide-meta{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-3)}

/* ---------- method ---------- */
.method-section{background:linear-gradient(180deg,var(--tint-blue) 0%,var(--paper) 100%)}
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:step;position:relative}
@media (min-width:881px){
  /* the ramp connects the three steps: cold data in, hot verdict out */
  .method::before{
    content:"";position:absolute;top:46px;left:4%;right:4%;height:3px;border-radius:2px;
    background:var(--thermal);opacity:.4;
  }
}
.step{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px 28px;box-shadow:var(--shadow-card);position:relative;
}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--font-mono);font-weight:700;font-size:.8rem;letter-spacing:.1em;
  display:inline-flex;padding:6px 12px;border-radius:999px;margin-bottom:18px;
  background:var(--ink);color:#fff;
}
/* step pills walk the ramp: cyan -> violet -> coral */
.step:nth-child(1)::before{background:var(--cyan-deep)}
.step:nth-child(2)::before{background:var(--violet-deep)}
.step:nth-child(3)::before{background:var(--coral-deep)}
.step h3{font-family:var(--font-display);font-weight:700;font-size:1.18rem;margin-bottom:10px;letter-spacing:-.01em}
.step p{color:var(--ink-2);font-size:.95rem}
@media (max-width:880px){.method{grid-template-columns:1fr;max-width:520px}}

/* ---------- article & page layout ---------- */
.prose{max-width:760px;margin-inline:auto}
.article-head{max-width:760px;margin:0 auto 36px}
.crumbs{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-3);margin-bottom:18px}
.crumbs a{color:var(--cyan-deep)}
.crumbs a:hover{text-decoration:underline}
.article-head .guide-tag{margin-bottom:16px}
.article-head h1{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.08;margin-bottom:18px;
}
.article-meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-family:var(--font-mono);font-size:.78rem;color:var(--ink-3);
}
.article-meta a{color:var(--cyan-deep)}
.article-meta a:hover{text-decoration:underline}
.article-figure{max-width:760px;margin:0 auto 36px}
.article-figure img{border-radius:var(--radius-md);width:100%}
.page-head{max-width:760px;margin:0 auto 36px}
.page-head h1{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.025em;
  font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.08;
}

/* typographic layer for post/page content (Gutenberg output) */
.entry-content{font-size:1.05rem;line-height:1.75}
.entry-content > *{margin-bottom:1.25em}
.entry-content > *:last-child{margin-bottom:0}
/* nested blocks (group/columns/quote) keep their rhythm despite the global reset */
.entry-content p,.entry-content ul,.entry-content ol{margin-bottom:1.25em}
.entry-content li > ul,.entry-content li > ol{margin-top:.45em;margin-bottom:0}
.entry-content h2,.entry-content h3,.entry-content h4{
  font-family:var(--font-display);letter-spacing:-.02em;line-height:1.2;margin-bottom:.6em;
}
.entry-content h2{font-size:1.68rem;font-weight:800;margin-top:1.9em}
.entry-content h3{font-size:1.3rem;font-weight:700;margin-top:1.6em}
.entry-content h4{font-size:1.1rem;font-weight:700;margin-top:1.4em}
.entry-content > h2:first-child,.entry-content > h3:first-child{margin-top:0}
.entry-content a{color:var(--cyan-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.entry-content a:hover{color:var(--ink)}
.entry-content ul,.entry-content ol{padding-left:1.35em}
.entry-content ul{list-style:disc}
.entry-content ol{list-style:decimal}
.entry-content li{margin-bottom:.45em}
.entry-content li::marker{color:var(--cyan-deep);font-weight:700}
.entry-content blockquote{
  border-left:4px solid var(--violet);background:var(--card);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:18px 24px;color:var(--ink-2);
}
.entry-content blockquote p:last-child{margin-bottom:0}
.entry-content img{border-radius:var(--radius-md)}
.entry-content figure{margin-block:1.8em}
.entry-content figcaption{font-family:var(--font-mono);font-size:.76rem;color:var(--ink-3);margin-top:10px;text-align:left}
.entry-content code{font-family:var(--font-mono);font-size:.86em;background:var(--tint-blue);padding:2px 7px;border-radius:6px}
.entry-content pre{background:var(--ink);color:var(--panel-paper);padding:20px 24px;border-radius:var(--radius-sm);overflow-x:auto}
.entry-content pre code{background:none;padding:0;color:inherit}
.entry-content hr,.entry-content .wp-block-separator{
  border:none;height:3px;border-radius:2px;background:var(--thermal);opacity:.35;
  max-width:120px;margin:2.6em auto;
}
/* tables inside articles: always scrollable, never break the viewport */
.entry-content table{border-collapse:collapse;width:100%;font-size:.93rem;margin:0}
.entry-content th,.entry-content td{padding:12px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.entry-content thead th{font-family:var(--font-display);font-weight:700;border-bottom:2px solid var(--ink);background:var(--card)}
.entry-content tbody th{font-weight:600;color:var(--ink-2)}
.entry-content .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.entry-content .table-scroller{
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  margin-block:1.8em;
}
.entry-content .table-scroller .wp-block-table{overflow:visible;margin:0}
.entry-content .table-scroller table{min-width:560px}
.entry-content .table-scroller.is-scrollable{margin-bottom:0}
.entry-content .swipe-hint{display:flex;margin:0 0 1.8em;border:1px solid var(--line);border-top:none;border-radius:0 0 var(--radius-sm) var(--radius-sm)}
/* lab-bench pattern dropped into articles: the shell's own rules win back
   over the generic entry-content table baseline above */
.entry-content .table-shell{margin-block:1.8em}
.entry-content .table-shell .table-scroller{border:none;border-radius:0;margin-block:0;background:none}
.entry-content table.compare{border-collapse:separate;border-spacing:0;min-width:820px;font-size:.95rem}
.entry-content .compare th,.entry-content .compare td{padding:18px 22px;font-size:.95rem}
.entry-content .compare thead th{font-size:1.05rem}
@media (max-width:480px){
  .entry-content .compare th,.entry-content .compare td{padding:14px}
  .entry-content .compare tbody th{font-size:.8rem}
  .entry-content .table-shell .table-scroller table.compare{min-width:760px}
}
.entry-content .wp-block-button__link{
  display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:999px;
  background:var(--ink);color:#fff;font-weight:600;text-decoration:none;
}
.entry-content .wp-block-button__link:hover{color:#fff}
.entry-content .table-verdict a,
.entry-content .table-verdict a strong{color:var(--panel-link)}
.entry-content .table-verdict a:hover{color:#fff}
.entry-content .wp-block-quote cite{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-3);font-style:normal}
.alignleft{float:left;margin:0 1.5em 1em 0;max-width:50%}
.alignright{float:right;margin:0 0 1em 1.5em;max-width:50%}
.aligncenter{margin-left:auto;margin-right:auto}
@media (max-width:640px){
  .alignleft,.alignright{float:none;margin:0 0 1em;max-width:100%}
}

/* author box (E-E-A-T) */
.author-box{
  max-width:760px;margin:56px auto 0;
  display:flex;gap:22px;align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
  padding:26px 28px;box-shadow:var(--shadow-card);
}
.author-box img{width:76px;height:76px;border-radius:50%;flex:none;object-fit:cover}
.author-box .k{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);display:block;margin-bottom:6px;
}
.author-box .name{font-family:var(--font-display);font-weight:700;font-size:1.1rem;margin-bottom:6px}
.author-box p{font-size:.92rem;color:var(--ink-2)}
.author-box a{color:var(--cyan-deep);text-decoration:underline;text-underline-offset:3px}
@media (max-width:480px){.author-box{flex-direction:column}.author-box img{width:64px;height:64px}}

/* ---------- archive / pagination / search ---------- */
.archive-head .desc{max-width:640px}.archive-head .desc>p:first-child{margin-top:0}.archive-head .desc>p:last-child{margin-bottom:0}
.pagination{margin-top:48px}
.pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 14px;
  border-radius:12px;background:var(--card);border:1px solid var(--line);
  font-family:var(--font-mono);font-size:.85rem;font-weight:500;color:var(--ink-2);
}
.pagination a.page-numbers:hover{border-color:#C6D8E6;color:var(--ink)}
.pagination .page-numbers.current{background:var(--ink);color:#fff;border-color:var(--ink)}
.pagination .page-numbers.dots{border:none;background:none}
.search-form{display:flex;gap:10px;max-width:480px}
.search-form .search-field{
  flex:1;font:inherit;padding:13px 18px;border-radius:999px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);min-width:0;
}
.search-form .search-field:focus{outline:3px solid var(--violet);outline-offset:2px}
.search-form .search-submit{
  font:inherit;font-weight:600;cursor:pointer;border:none;
  padding:13px 22px;border-radius:999px;background:var(--ink);color:#fff;
}
.nothing-found{max-width:640px}
.nothing-found .search-form{margin-top:26px}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:var(--panel-ink-2);padding:64px 0 36px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:44px}
.footer-grid h4{
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--panel-ink);margin-bottom:16px;
}
.footer-grid ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.footer-grid a{display:inline-block;padding:7px 0;font-size:.93rem;transition:color .2s}
.footer-grid a:hover{color:#fff}
.footer-brand p{font-size:.9rem;max-width:22rem;margin-top:14px}
.footer-brand .company{font-family:var(--font-mono);font-size:.74rem;color:var(--panel-ink);margin-top:12px}
.footer-brand .logo{color:#fff}
.footer-bottom{
  border-top:1px solid var(--panel-3);padding-top:26px;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--font-mono);font-size:.74rem;color:var(--panel-ink);
}
.footer-bottom a{text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover{color:#fff}
@media (max-width:880px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:540px){.footer-grid{grid-template-columns:1fr}}

/* ---------- reveals (hidden state only when JS confirms IO support) ---------- */
html.has-io .reveal{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease}
html.has-io .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- print ---------- */
@media print{
  html.has-io .reveal{opacity:1!important;transform:none!important}
  .site-header,.hero-blob,.tank-scene,.swipe-hint,.nav-toggle,.skip-link{display:none!important}
  .table-verdict,.sizer-intro,.sizer-tool,.res-card{background:#fff!important;color:#000!important}
  .table-verdict p,.table-verdict strong,.sizer-intro p,.sizer-q,.res-card .v{color:#000!important}
  .site-footer{background:#fff;color:#000}
}