:root {
      --white:#ffffff;--off-white:#F6F8FA;--light-gray:#EEF1F4;--border:#E2E7EC;
      --text-muted:#93A0AC;--text-secondary:#5A6672;--text-primary:#1A2430;
      --blue:#17537A;--blue-light:#E7F0F6;--blue-mid:#2E769E;
      --green:#2E7D5B;--green-bg:#E6F4EC;--blue:#1e4d8c;--blue-bg:#e8eef8;
      --radius:12px;--radius-sm:8px;
      --shadow:0 1px 3px rgba(0,0,0,0.06),0 4px 16px rgba(0,0,0,0.06);
      --shadow-hover:0 2px 8px rgba(0,0,0,0.08),0 8px 24px rgba(0,0,0,0.1);
    }
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    body{font-family:'DM Sans',sans-serif;background:var(--white);color:var(--text-primary);line-height:1.6;-webkit-font-smoothing:antialiased;}

    nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,0.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 2rem;height:60px;display:flex;align-items:center;justify-content:space-between;}
    .nav-logo{font-family:'Space Grotesk',sans-serif;font-size:1.2rem;font-weight:600;color:var(--text-primary);text-decoration:none;letter-spacing:-0.02em;}
    .nav-logo span{color:var(--blue);}
    .nav-links{display:flex;gap:0.25rem;list-style:none;}
    .nav-links a{font-size:0.85rem;color:var(--text-secondary);text-decoration:none;padding:0.4rem 0.75rem;border-radius:6px;transition:color 0.15s,background 0.15s;white-space:nowrap;}
    .nav-links a:hover,.nav-links a.active{color:var(--text-primary);background:var(--light-gray);}
    .nav-links a.active{font-weight:500;}
    .nav-links a.nav-highlight{background:var(--blue-light);color:var(--blue);font-weight:500;}
    .nav-links a.nav-highlight:hover{background:var(--blue-light);color:var(--blue-mid);}
    .nav-links a.active.nav-highlight{background:var(--blue-light);color:var(--blue);}
    .nav-drawer ul a.nav-highlight{color:var(--blue);background:var(--blue-light);}
    .nav-drawer ul a.active.nav-highlight{color:var(--blue);background:var(--blue-light);}

    .hero{background:var(--off-white);border-bottom:1px solid var(--border);padding:4rem 2rem 3rem;text-align:center;}
    .hero-eyebrow{display:inline-block;font-size:0.75rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);margin-bottom:1rem;}
    .hero h1{font-family:'Space Grotesk',sans-serif;font-size:clamp(2rem,5vw,3rem);font-weight:400;letter-spacing:-0.03em;line-height:1.1;margin-bottom:0.75rem;}
    .hero p{font-size:1rem;color:var(--text-secondary);font-weight:300;max-width:480px;margin:0 auto;}

    .main{max-width:800px;margin:0 auto;padding:3rem 1.5rem 5rem;}

    .calc-card{background:var(--white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;margin-bottom:2.5rem;}
    .calc-header{padding:1.5rem 2rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;}
    .calc-header-left h2{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:400;letter-spacing:-0.02em;}
    .calc-header-left p{font-size:0.82rem;color:var(--text-muted);margin-top:0.15rem;}

    .toggle-row{display:flex;background:var(--light-gray);border-radius:8px;padding:3px;gap:2px;}
    .toggle-btn{font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:500;color:var(--text-secondary);background:none;border:none;padding:0.3rem 0.65rem;border-radius:6px;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
    .toggle-btn.active{background:var(--white);color:var(--text-primary);box-shadow:0 1px 3px rgba(0,0,0,0.1);}

    .calc-body{padding:1.5rem 2rem 2rem;}
    .input-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem;}
    @media(max-width:520px){.input-grid{grid-template-columns:1fr;}}

    .field{display:flex;flex-direction:column;gap:0.4rem;}
    .field label{font-size:0.8rem;font-weight:500;color:var(--text-secondary);}
    .input-wrap{position:relative;}
    .field input{width:100%;font-family:'DM Sans',sans-serif;font-size:1rem;color:var(--text-primary);background:var(--off-white);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:0.65rem 3.2rem 0.65rem 0.9rem;outline:none;transition:border-color 0.15s,box-shadow 0.15s,background 0.15s;-moz-appearance:textfield;}
    .field input::-webkit-inner-spin-button,.field input::-webkit-outer-spin-button{-webkit-appearance:none;}
    .field input:focus{border-color:var(--blue-mid);background:var(--white);box-shadow:0 0 0 3px rgba(23,83,122,0.1);}
    .field input.err{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,0.08);}
    .input-suffix{position:absolute;right:0.75rem;top:50%;transform:translateY(-50%);font-size:0.78rem;font-weight:500;color:var(--text-muted);pointer-events:none;}
    .field-hint{font-size:0.72rem;color:var(--text-muted);}
    .field-hint.err{color:#c0392b;}

    /* Bottle size selector */
    .bottle-sizes{margin-bottom:1.25rem;}
    .bottle-sizes-label{font-size:0.8rem;font-weight:500;color:var(--text-secondary);margin-bottom:0.5rem;display:block;}
    .bottle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:0.5rem;}
    .bottle-btn{font-family:'DM Sans',sans-serif;font-size:0.8rem;font-weight:400;color:var(--text-secondary);background:var(--off-white);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:0.5rem 0.6rem;cursor:pointer;text-align:center;transition:all 0.15s;line-height:1.3;}
    .bottle-btn:hover{border-color:var(--blue-mid);color:var(--text-primary);}
    .bottle-btn.active{background:var(--blue-light);border-color:rgba(23,83,122,0.4);color:var(--blue);font-weight:500;}
    .bottle-btn .size-name{display:block;font-size:0.7rem;color:var(--text-muted);margin-top:0.1rem;}
    .bottle-btn.active .size-name{color:var(--blue-mid);}

    /* Headspace row */
    .headspace-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.75rem;padding:0.85rem 1.25rem;background:var(--off-white);border:1px solid var(--border);border-radius:var(--radius-sm);flex-wrap:wrap;}
    .headspace-label{font-size:0.82rem;color:var(--text-secondary);white-space:nowrap;}
    .headspace-label strong{color:var(--text-primary);}
    .hs-options{display:flex;gap:0.4rem;flex-wrap:wrap;}
    .hs-btn{font-family:'DM Sans',sans-serif;font-size:0.75rem;font-weight:500;color:var(--text-secondary);background:var(--white);border:1px solid var(--border);border-radius:6px;padding:0.25rem 0.6rem;cursor:pointer;transition:all 0.15s;}
    .hs-btn.active{background:var(--blue-light);color:var(--blue);border-color:rgba(23,83,122,0.3);}

    .calc-btn{width:100%;font-family:'DM Sans',sans-serif;font-size:0.95rem;font-weight:500;color:var(--white);background:var(--blue);border:none;border-radius:var(--radius-sm);padding:0.85rem;cursor:pointer;transition:background 0.15s,transform 0.1s,box-shadow 0.15s;}
    .calc-btn:hover{background:var(--blue-mid);box-shadow:0 4px 12px rgba(23,83,122,0.25);}
    .calc-btn:active{transform:scale(0.99);}

    .result-area{margin-top:1.75rem;display:none;}
    .result-area.on{display:block;animation:fadeInUp 0.3s ease forwards;}
    .result-divider{height:1px;background:var(--border);margin-bottom:1.75rem;}

    /* Big bottle count display */
    .bottle-count-display{text-align:center;margin-bottom:1.5rem;padding:1.75rem;background:var(--blue-light);border:1px solid rgba(23,83,122,0.2);border-radius:var(--radius);}
    .bottle-count-number{font-family:'Space Grotesk',sans-serif;font-size:4rem;font-weight:400;letter-spacing:-0.04em;color:var(--blue);line-height:1;}
    .bottle-count-label{font-size:0.85rem;color:var(--blue-mid);margin-top:0.25rem;}
    .bottle-count-size{font-size:0.78rem;color:var(--text-muted);margin-top:0.1rem;}

    /* Fill bar */
    .fill-wrap{margin-bottom:1.25rem;padding:1rem 1.25rem;background:var(--off-white);border:1px solid var(--border);border-radius:var(--radius-sm);}
    .fill-label{font-size:0.75rem;font-weight:500;color:var(--text-muted);letter-spacing:0.05em;text-transform:uppercase;margin-bottom:0.6rem;}
    .fill-bar{height:16px;border-radius:8px;background:var(--border);overflow:hidden;}
    .fill-bar-inner{height:100%;background:var(--blue);border-radius:8px;transition:width 0.4s ease;}
    .fill-bar-remainder{height:100%;background:#d4864a88;transition:width 0.4s ease;}
    .fill-legend{display:flex;gap:1.25rem;margin-top:0.5rem;flex-wrap:wrap;}
    .fill-legend-item{display:flex;align-items:center;gap:0.4rem;font-size:0.75rem;color:var(--text-secondary);}
    .fill-dot{width:10px;height:10px;border-radius:2px;}
    .fill-dot.full{background:var(--blue);}
    .fill-dot.rem{background:#d4864a88;}

    .result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1rem;}
    @media(max-width:500px){.result-grid{grid-template-columns:1fr 1fr;}}
    .result-box{background:var(--off-white);border:1px solid var(--border);border-radius:var(--radius-sm);padding:1.1rem 1.25rem;}
    .result-box.green{background:var(--green-bg);border-color:rgba(45,106,79,0.2);}
    .result-box.blue{background:var(--blue-bg);border-color:rgba(30,77,140,0.2);}
    .result-label{font-size:0.72rem;font-weight:500;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:0.3rem;}
    .result-box.green .result-label{color:var(--green);}
    .result-box.blue .result-label{color:var(--blue);}
    .result-value{font-family:'Space Grotesk',sans-serif;font-size:1.75rem;font-weight:400;letter-spacing:-0.03em;line-height:1;color:var(--text-primary);}
    .result-box.green .result-value{color:var(--green);}
    .result-box.blue .result-value{color:var(--blue);}
    .result-unit{font-family:'DM Sans',sans-serif;font-size:0.85rem;font-weight:300;color:var(--text-muted);margin-left:0.15rem;}

    .result-note{font-size:0.78rem;color:var(--text-muted);display:flex;align-items:flex-start;gap:0.5rem;padding:0.9rem 1rem;background:var(--off-white);border:1px solid var(--border);border-radius:var(--radius-sm);}
    .result-note svg{flex-shrink:0;margin-top:0.1rem;}
    .reset-btn{display:block;width:100%;font-family:'DM Sans',sans-serif;font-size:0.82rem;color:var(--text-muted);background:none;border:none;padding:0.75rem;cursor:pointer;margin-top:0.5rem;transition:color 0.15s;text-align:center;}
    .reset-btn:hover{color:var(--text-secondary);}

    .section{margin-bottom:3rem;}
    .section-title{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:400;letter-spacing:-0.02em;margin-bottom:0.75rem;}
    .section-body{font-size:0.9rem;color:var(--text-secondary);line-height:1.75;}
    .section-body p+p{margin-top:0.75rem;}

    .tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0.75rem;margin-top:1.25rem;}
    .tool-link{display:block;padding:1rem 1.25rem;background:var(--white);border:1px solid var(--border);border-radius:var(--radius-sm);text-decoration:none;transition:border-color 0.15s,box-shadow 0.15s,transform 0.15s;}
    .tool-link:hover{border-color:var(--blue-mid);box-shadow:var(--shadow-hover);transform:translateY(-1px);}
    .tool-link-name{font-size:0.875rem;font-weight:500;color:var(--text-primary);margin-bottom:0.2rem;}
    .tool-link-desc{font-size:0.775rem;color:var(--text-muted);}
    .tool-link.soon{opacity:0.5;cursor:default;pointer-events:none;}
    .badge{display:inline-block;font-size:0.65rem;font-weight:500;letter-spacing:0.04em;text-transform:uppercase;background:var(--blue-light);color:var(--blue);border-radius:4px;padding:0.15rem 0.4rem;margin-left:0.4rem;vertical-align:middle;}

    footer{background:var(--off-white);border-top:1px solid var(--border);padding:2rem;text-align:center;}
    .footer-logo{font-family:'Space Grotesk',sans-serif;font-size:1rem;color:var(--text-primary);margin-bottom:0.4rem;}
    .footer-logo span{color:var(--blue);}
    footer p{font-size:0.78rem;color:var(--text-muted);}
    footer a{color:var(--text-secondary);text-decoration:none;}
    footer a:hover{color:var(--blue);}

    @keyframes fadeInUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
  
    .nav-hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;background:none;border:none;cursor:pointer;border-radius:6px;transition:background 0.15s;}
    .nav-hamburger:hover{background:var(--light-gray);}
    .nav-hamburger span{display:block;width:20px;height:2px;background:var(--text-primary);border-radius:2px;transition:transform 0.25s,opacity 0.25s;transform-origin:center;}
    .nav-hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .nav-hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0);}
    .nav-hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
    .nav-drawer{display:none;position:fixed;top:60px;left:0;right:0;background:rgba(255,255,255,0.98);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:0.75rem 1.25rem 1.25rem;z-index:99;box-shadow:0 8px 24px rgba(0,0,0,0.08);}
    .nav-drawer.open{display:block;animation:fadeInDown 0.2s ease;}
    .nav-drawer ul{list-style:none;display:flex;flex-direction:column;gap:0.15rem;}
    .nav-drawer ul a{display:block;font-size:0.9rem;color:var(--text-secondary);text-decoration:none;padding:0.6rem 0.75rem;border-radius:6px;transition:color 0.15s,background 0.15s;}
    .nav-drawer ul a:hover,.nav-drawer ul a.active{color:var(--text-primary);background:var(--light-gray);}
    .nav-drawer ul a.active{font-weight:500;color:var(--blue);}
    @keyframes fadeInDown{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}
    @media(max-width:920px){.nav-links{display:none;}.nav-hamburger{display:flex;} nav{padding:0 1rem;} .nav-drawer{padding:0.75rem 1rem 1.25rem;}}
  
    /* ── Learning Resource Center ──────────────────────────────── */
    .resource-center { background: var(--off-white); border-top: 1px solid var(--border); padding: 3rem 2rem 2.5rem; }
    .rc-inner { max-width: 860px; margin: 0 auto; }
    .rc-header { margin-bottom: 1.75rem; }
    .rc-eyebrow { display: inline-block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.4rem; }
    .rc-title { font-family: 'Space Grotesk', sans-serif; font-size: 1.15rem; font-weight: 400; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 0.4rem; }
    .rc-desc { font-size: 0.82rem; color: var(--text-secondary); max-width: 540px; line-height: 1.6; }
    .rc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.75rem; margin-bottom: 1.5rem; }
    .rc-col-label { font-size: 0.67rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.6rem; }
    .rc-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
    .rc-list a { font-size: 0.83rem; font-weight: 500; color: var(--text-primary); text-decoration: none; transition: color 0.15s; }
    .rc-list a:hover { color: var(--blue); }
    .rc-sub { font-size: 0.73rem; color: var(--text-muted); display: block; margin-top: 0.05rem; }
    .rc-all-link { text-align: center; padding-top: 0.5rem; }
    .rc-all-link a { font-size: 0.8rem; font-weight: 500; color: var(--blue); text-decoration: none; padding: 0.45rem 1.1rem; border: 1px solid rgba(23,83,122,0.35); border-radius: 6px; transition: all 0.15s; }
    .rc-all-link a:hover { background: var(--blue-light); }

    @media print {
      nav, .nav-drawer, .hero, .ad-slot, .affiliate-box,
      .section, .resource-center, footer, .dc-toolbar, .dc-panel,
      .calc-btn, .reset-btn, .faq-outer, .faq-section, .faq-list,
      .badge, .toggle-row, .still-row, .spirit-row, .preset-row,
      .spirit-presets, .spirit-cuts { display: none !important; }
      body { background: #fff !important; }
      .main { padding: 0.5rem !important; max-width: 100% !important; }
      .calc-card { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
      .result-area { display: block !important; }
      .hero { padding: 1rem !important; border: none !important; background: white !important; }
    }

    .calc-cta{background:var(--blue-light);border:1px solid rgba(23,83,122,0.2);border-left:3px solid var(--blue);border-radius:var(--radius);padding:1.5rem;margin:2rem 0;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;}
    .calc-cta-text{flex:1;min-width:0;}
    .calc-cta-text strong{display:block;font-size:0.95rem;font-weight:500;color:var(--text-primary);margin-bottom:0.3rem;}
    .calc-cta-text p{font-size:0.82rem;color:var(--text-secondary);margin:0;line-height:1.5;}
    .calc-cta-btn{display:inline-block;font-size:0.82rem;font-weight:500;color:var(--white);background:var(--blue);border-radius:var(--radius-sm);padding:0.6rem 1.25rem;text-decoration:none;border:none;white-space:nowrap;transition:background 0.15s;flex-shrink:0;}
    .calc-cta-btn:hover{background:var(--blue-mid);}
    @media(max-width:560px){.calc-cta{flex-direction:column;gap:1rem;}.calc-cta-btn{width:100%;text-align:center;}}
  
    /* ── Sidebar layout ── */
    .page-with-sidebar { max-width: 1100px; margin: 0 auto; padding: 3rem 1.5rem 5rem; display: grid; grid-template-columns: 1fr 280px; gap: 2rem; align-items: start; }
    .main-col { min-width: 0; }
    @media (max-width: 900px) { .page-with-sidebar { grid-template-columns: 1fr; padding: 2rem 1rem 4rem; } }

/* ── ComponentCalc additions ── */
:root{
  --amber:#E8902A;--amber-light:#FBEEDD;--amber-deep:#CC7A18;
  --blue-deep:#103C5A;--bg:#F6F8FA;
}
body{background:var(--bg);}
.nav-logo span{color:var(--amber);}
.footer-logo span{color:var(--amber);}

/* Primary action buttons use amber for high-contrast conversion */
.calc-btn{background:var(--amber);}
.calc-btn:hover{background:var(--amber-deep);box-shadow:0 4px 12px rgba(232,144,42,0.28);}

/* Imperial / Metric unit toggle (global + per-calculator) */
.unit-toggle{display:inline-flex;background:var(--light-gray);border-radius:8px;padding:3px;gap:2px;}
.unit-btn{font-family:'DM Sans',sans-serif;font-size:0.78rem;font-weight:500;color:var(--text-secondary);background:none;border:none;padding:0.3rem 0.8rem;border-radius:6px;cursor:pointer;transition:all 0.15s;white-space:nowrap;}
.unit-btn.active{background:var(--white);color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,0.1);}
.unit-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;}
.unit-bar-label{font-size:0.72rem;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--text-muted);}

/* Liability / accuracy callout used on every calculator */
.note-callout{display:flex;gap:0.6rem;align-items:flex-start;font-size:0.8rem;color:var(--text-secondary);background:var(--blue-light);border:1px solid rgba(23,83,122,0.18);border-left:3px solid var(--blue);border-radius:var(--radius-sm);padding:0.85rem 1rem;margin:1.25rem 0;line-height:1.55;}
.note-callout strong{color:var(--text-primary);}

/* Long-form prose (legal, methodology, guides) */
.prose{font-size:0.92rem;color:var(--text-secondary);line-height:1.75;}
.prose h2{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:500;color:var(--text-primary);letter-spacing:-0.02em;margin:2rem 0 0.75rem;}
.prose h3{font-family:'Space Grotesk',sans-serif;font-size:1.05rem;font-weight:500;color:var(--text-primary);margin:1.5rem 0 0.5rem;}
.prose p{margin-bottom:0.85rem;}
.prose ul{margin:0.5rem 0 1rem 1.25rem;}
.prose li{margin-bottom:0.4rem;}
.prose a{color:var(--blue);text-decoration:none;font-weight:500;}
.prose a:hover{text-decoration:underline;}
.prose table{width:100%;border-collapse:collapse;font-size:0.85rem;margin:1rem 0;}
.prose th{text-align:left;padding:0.5rem 0.9rem;border-bottom:2px solid var(--border);}
.prose td{padding:0.45rem 0.9rem;border-bottom:1px solid var(--border);}

/* Unit-scoped visibility: toggled by data-units on <html> (set in markup + utils) */
[data-units="imperial"] .u-metric{display:none !important;}
[data-units="metric"] .u-imperial{display:none !important;}
.calc-header .unit-toggle{margin-left:auto;}