/* Calculixy — shared.css
   Loaded on ALL 152 pages. Nav, footer, cookie, drawer, ads, guide styles.
   Calculator chrome excluded — lives in calculator.css.
   Last updated: 2026-06-20
*/

/* Calculixy — shared.css
   Loaded on all 38 core calculator pages.
   Cached by browser after first load — zero re-parse cost on page 2+.
   Tool-specific CSS stays inline in each calculator page.
   Last updated: 2026-06-20
*/

:root{
      --bg: #f8f8fc;
      --surface: #ffffff;
      --surface2: #f0f0f8;
      --border: #e0e0ee;
      --accent: #10b981;
      --accent2: #818cf8;
      --accent3: #f472b6;
      --text: #0a0a1a;
      --text2: #4a4a6a;
      --text3: #9090b0;
      --red: #f87171;
      --radius: 16px;
      --radius-sm: 10px;
      --font-display: 'Syne', sans-serif;
      --font-mono: 'DM Mono', monospace;
}
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { scroll-padding-top: 84px; scroll-behavior: smooth; 
  scrollbar-gutter: stable;
    }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-display);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      overflow-x: hidden;
    
  /* Reserve scrollbar space up-front: eliminates the
     horizontal content shift when scrollbar appears (CLS fix) */
  scrollbar-gutter: stable;
  /* Ensure body starts at top=0 — prevents initial paint shift */
  margin: 0;
    }
/* ── SELF-HOSTED FONTS ──────────────────────────────────────────
   Drop woff2 files in /fonts/ to fully eliminate the Google Fonts
   DNS lookup. See fonts/FONT_SETUP.md for download instructions.
   When self-hosting is active, remove the Google Fonts <link> tags
   from all HTML pages (or keep them as fallback — browsers will
   use the first matching @font-face match, which is this one).
   ── */

/* Syne — Display font (headings, nav, buttons) */
@font-face {
  font-family: 'Syne';
  /* Disabled missing local font src: syne-400.woff2 not present in package. */
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Syne';
  /* Disabled missing local font src: syne-600.woff2 not present in package. */
  font-weight: 600;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Syne';
  /* Disabled missing local font src: syne-700.woff2 not present in package. */
  font-weight: 700;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'Syne';
  /* Disabled missing local font src: syne-800.woff2 not present in package. */
  font-weight: 800;
  font-style: normal;
  font-display: optional;
}
/* DM Mono — Monospace font (result numbers, code, calculator display) */
@font-face {
  font-family: 'DM Mono';
  /* Disabled missing local font src: dm-mono-400.woff2 not present in package. */
  font-weight: 400;
  font-style: normal;
  font-display: optional;
}
@font-face {
  font-family: 'DM Mono';
  /* Disabled missing local font src: dm-mono-500.woff2 not present in package. */
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
/* ── GRID BG ── */
    body::before {
      content: '';
      position: fixed;
      inset: 0;
      background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 48px 48px;
      opacity: 0.3;
      pointer-events: none;
      z-index: 0;
    }
    /* ── NAV ── */
    nav {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(255,255,255,0.92);
      -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .nav-logo {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.5px;
      color: var(--text);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .nav-logo span {
      color: var(--accent);
    }
    .nav-tools {
      display: flex;
      gap: 6px;
      align-items: center;
      justify-content: center;
      flex: 1;
      min-width: 0;
      padding: 0 16px;}

    .nav-btn {
      background: none;
      border: none;
      color: var(--text2);
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      padding: 7px 12px;
      border-radius: 8px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
    }
    .nav-btn:hover, .nav-btn.active {
      background: var(--surface2);
      color: var(--text);
    }
    .nav-btn.active { color: var(--accent); }

    .nav-group { position: relative; }
    .nav-menu {
      display: none;
      position: absolute;
      top: 38px;
      left: 0;
      min-width: 230px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px;
      box-shadow: 0 18px 48px rgba(0,0,0,0.45);
      z-index: 300; max-height: 70vh; overflow-y: auto; overflow-x: hidden;}
    .nav-group.open .nav-menu { display: grid; gap: 4px; }
    .nav-group:focus-within .nav-menu { display: grid; gap: 4px; }
    .nav-menu button, .nav-menu a {
      width: 100%; text-align: left; border: 0; background: transparent; color: var(--text2);
      font-family: var(--font-display); font-weight: 600; font-size: 13px; padding: 9px 10px;
      border-radius: 8px; cursor: pointer; text-decoration: none; display: block;}
    .nav-menu button:hover, .nav-menu a:hover { background: var(--surface2); color: var(--accent); }

    @media (max-width: 980px) {
      .nav-tools { display: none; }
    }
    /* ── MAIN LAYOUT ── */
    main {
      position: relative;
      z-index: 1;
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 20px 80px;
    }
    /* ── HERO ── */
    .hero {
      text-align: center;
      padding: 48px 0 36px;
    }
    .hero-tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 2px;
      text-transform: uppercase;
      color: var(--accent);
      background: rgba(16,185,129,0.1);
      border: 1px solid rgba(16,185,129,0.2);
      padding: 5px 14px;
      border-radius: 100px;
      margin-bottom: 20px;
    }
    .hero h1 {
      font-size: clamp(36px, 6vw, 72px);
      font-weight: 800;
      line-height: 1.05;
      letter-spacing: -2px;
      margin-bottom: 16px;
    }
    .hero h1 em {
      font-style: normal;
      color: var(--accent);
    }
    .hero p {
      font-size: 17px;
      color: var(--text2);
      max-width: 480px;
      margin: 0 auto 32px;
      line-height: 1.6;
      font-weight: 400;
    }
    /* ── TOOL GRID ── */
    .tool-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
      margin-bottom: 48px;
    }
    .tool-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px 16px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .tool-card::before {
      content: '';
      position: absolute;
      inset: 0;
      opacity: 0;
      transition: opacity 0.2s;
    }
    .tool-card:nth-child(1)::before { background: radial-gradient(ellipse at top left, rgba(16,185,129,0.08), transparent 70%); }
    .tool-card:nth-child(2)::before { background: radial-gradient(ellipse at top left, rgba(129,140,248,0.08), transparent 70%); }
    .tool-card:nth-child(3)::before { background: radial-gradient(ellipse at top left, rgba(244,114,182,0.08), transparent 70%); }
    .tool-card:nth-child(4)::before { background: radial-gradient(ellipse at top left, rgba(251,191,36,0.08), transparent 70%); }
    .tool-card:nth-child(5)::before { background: radial-gradient(ellipse at top left, rgba(52,211,153,0.08), transparent 70%); }
    .tool-card:nth-child(6)::before { background: radial-gradient(ellipse at top left, rgba(248,113,113,0.08), transparent 70%); }
    .tool-card:nth-child(7)::before { background: radial-gradient(ellipse at top left, rgba(251,146,60,0.08), transparent 70%); }
    .tool-card:nth-child(8)::before { background: radial-gradient(ellipse at top left, rgba(167,139,250,0.08), transparent 70%); }
    .tool-card:nth-child(9)::before { background: radial-gradient(ellipse at top left, rgba(34,211,238,0.08), transparent 70%); }
    .tool-card:nth-child(10)::before { background: radial-gradient(ellipse at top left, rgba(74,222,128,0.08), transparent 70%); }
    .tool-card:nth-child(11)::before { background: radial-gradient(ellipse at top left, rgba(250,204,21,0.08), transparent 70%); }
    .tool-card:nth-child(12)::before { background: radial-gradient(ellipse at top left, rgba(248,113,113,0.08), transparent 70%); }
    .tool-card:nth-child(13)::before { background: radial-gradient(ellipse at top left, rgba(52,211,153,0.08), transparent 70%); }
    .tool-card:nth-child(14)::before { background: radial-gradient(ellipse at top left, rgba(251,146,60,0.08), transparent 70%); }
    .tool-card:nth-child(15)::before { background: radial-gradient(ellipse at top left, rgba(244,114,182,0.08), transparent 70%); }
    .tool-card:nth-child(16)::before { background: radial-gradient(ellipse at top left, rgba(99,102,241,0.08), transparent 70%); }
    .tool-card:nth-child(17)::before { background: radial-gradient(ellipse at top left, rgba(16,185,129,0.08), transparent 70%); }
    .tool-card:nth-child(18)::before { background: radial-gradient(ellipse at top left, rgba(245,158,11,0.08), transparent 70%); }

    .tool-card:hover {
      border-color: var(--accent2);
      transform: translateY(-2px);
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    }
    .tool-card:hover::before { opacity: 1; }

    .tool-card.active {
      border-color: var(--accent);
      box-shadow: 0 0 0 1px var(--accent), 0 8px 32px rgba(16,185,129,0.15);
    }
    .tool-icon {
      font-size: 28px;
      margin-bottom: 10px;
      display: block;
    }
    .tool-name {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.2px;
    }
    .tool-desc {
      font-size: 11px;
      color: var(--text3);
      margin-top: 4px;
      font-weight: 400;
    }
    /* ── FAQ ── */
    .faq-section {
      margin-top: 32px;
      border-top: 1px solid var(--border);
      padding-top: 24px;
    
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
    }
    .faq-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text3);
      letter-spacing: 1px;
      text-transform: uppercase;
      margin-bottom: 16px;
    }
    .faq-item {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      margin-bottom: 8px;
      overflow: hidden;
    }
    .faq-q {
      padding: 14px 16px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text2);
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: color 0.15s;
      user-select: none;
      -webkit-user-select: none;
    }
    .faq-q:hover { color: var(--text); }
    .faq-q.open { color: var(--accent); }

    .faq-q::after {
      content: '+';
      font-size: 18px;
      font-weight: 300;
      color: var(--text3);
      transition: transform 0.2s;
    }
    .faq-q.open::after { content: '−'; }

    .faq-a {
      display: none;
      padding: 0 16px 14px;
      font-size: 13px;
      color: var(--text3);
      line-height: 1.7;
      font-weight: 400;
    }
    .faq-a.open { display: block; }

    /* ── AD SIDEBAR ── */
    .ad-sidebar {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    .ad-slot {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--text2);
      font-size: 12px;
      font-weight: 500;
      line-height: 1.6;
      padding: 18px;
    }
    .ad-slot h3 { font-size: 13px; color: var(--text); margin-bottom: 10px; letter-spacing: -0.2px; }
    .ad-slot p { color: var(--text3); margin-bottom: 10px; }
    .ad-slot ul { list-style: none; display: grid; gap: 8px; }
    .ad-slot li { display:flex; gap:8px; align-items:flex-start; color:var(--text3); }
    .ad-slot a { color: var(--accent); text-decoration: none; font-weight: 700; }
    .ad-slot a:hover { text-decoration: underline; }

    .ad-slot-rect { min-height: 250px; }
    .ad-slot-tall { min-height: 600px; }
    /* ── ADSENSE-SAFE PLACEHOLDER ZONES ── */
    .cx-ad-zone { max-width: 1100px; margin: 32px auto; padding: 0 24px; }
    .cx-ad-label { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text3); text-align: center; margin-bottom: 6px; }
    .cx-ad-box {
  /* Leaderboard 728×90 */
  aspect-ratio: 728 / 90;
  min-height: 90px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  font-size: 12px;
  contain: layout style;
    }
.cx-ad-box.rect {
  /* Medium Rectangle 300×250 */
  aspect-ratio: 6 / 5;
  min-height: 250px;
  width: 300px;
}
    @media (max-width: 680px) { .cx-ad-zone { padding: 0 16px; margin: 24px auto; } }
    .adsense-ready {
  /* When AdSense activates: hide placeholder UI, keep size reserved */
  border-style: solid;
  border-color: transparent;
  background: transparent;
    }
  /* The ins.adsbygoogle inside will fill the space we reserved */
  /* No height change = zero CLS */
/* Ensure AdSense <ins> fills the reserved space exactly */
.cx-ad-slot ins.adsbygoogle,
.cx-ad-wrap ins.adsbygoogle {
  display: block !important;
  width: 300px !important;
  height: 600px !important;
  /* Contained: ad iframe mutations don't reflow the page */
  contain: strict;
}
/* Medium Rectangle variant */
.cx-ad-slot.rect ins.adsbygoogle,
.cx-ad-wrap.rect ins.adsbygoogle {
  width: 300px !important;
  height: 250px !important;
}
    /* ── INFO STRIP ── */
    .info-strip {
      margin-top: 48px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
    }
    @media (max-width: 600px) {
      .info-strip { grid-template-columns: 1fr; }
    }
    .info-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
    }
    .info-card h3 {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .info-card p {
      font-size: 13px;
      color: var(--text3);
      line-height: 1.6;
      font-weight: 400;
    }
    /* ── FOOTER ── */
    footer {
      position: relative;
      z-index: 1;
      border-top: 1px solid var(--border);
      padding: 24px 20px;
      text-align: center;
      color: var(--text3);
      font-size: 12px;
      font-weight: 400;
    }
    footer a { color: var(--text3); text-decoration: none; }
    footer a:hover { color: var(--accent); }

    .result-box { position: relative; }
    .copy-btn {
      position: absolute;
      top: 8px; right: 8px;
      background: var(--surface, #fff);
      border: 1px solid var(--border, #dfe2f2);
      border-radius: 7px;
      color: var(--text2, #50546a);
      font-size: 11px;
      font-weight: 700;
      padding: 4px 10px;
      cursor: pointer;
      transition: transform 0.1s ease, box-shadow 0.1s ease, color 0.15s, border-color 0.15s;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 0 0 #c8cbdf, 0 1px 2px rgba(9,9,27,.07);
      white-space: nowrap;
    }
    .copy-btn:hover { color: var(--accent, #10b981); border-color: rgba(16,185,129,.3); }
    .copy-btn:active { transform: translateY(2px); box-shadow: 0 0 0 0 transparent, 0 1px 1px rgba(9,9,27,.05); }
    .copy-btn.copied { color: var(--accent); border-color: var(--accent); }
    /* ── SHARE MODAL ── */
    .share-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.7);
      z-index: 500;
      align-items: center;
      justify-content: center;
      padding: 20px;
      -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    }
    .share-overlay.open { display: flex; animation: fadeUp 0.2s ease; }
    .share-modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 28px;
      max-width: 480px;
      width: 100%;
      box-shadow: 0 24px 64px rgba(0,0,0,0.6);
    }
    .share-modal h3 {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -0.5px;
      margin-bottom: 6px;
    }
    .share-modal p {
      font-size: 13px;
      color: var(--text3);
      margin-bottom: 20px;
      line-height: 1.5;
    }
    .share-url-box {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;
    }
    .share-url-input {
      flex: 1;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text2);
      font-family: var(--font-mono);
      font-size: 16px;
      padding: 10px 12px;
      outline: none;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .share-copy-url-btn {
      background: var(--accent);
      border: none;
      border-radius: var(--radius-sm);
      color: #0a0a0f;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 700;
      padding: 10px 16px;
      cursor: pointer;
      white-space: nowrap;
      flex-shrink: 0;
      transition: all 0.15s;
    }
    .share-copy-url-btn:hover { background: #0ea271; }
    .share-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-bottom: 16px;
    }
    .share-action-btn {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text2);
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      padding: 10px;
      min-height: 44px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      transition: all 0.15s;
      text-decoration: none;
    }
    .share-action-btn:hover { color: var(--text); border-color: var(--text3); }
    .share-close-btn {
      width: 100%;
      background: none;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text3);
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 600;
      padding: 10px;
      cursor: pointer;
      transition: all 0.15s;
    }
    .share-close-btn:hover { color: var(--text); border-color: var(--text3); }

    /* ── PRINT STYLES ── */
    
      main { padding: 0 !important; }
      .calc-area { grid-template-columns: 1fr !important; }
    /* ── RESPONSIVE ── */
    @media (max-width: 480px) {
      .btn { height: 52px; font-size: 15px; }
      .display-val { font-size: 28px; }
      .form-row { grid-template-columns: 1fr; }
      nav { padding: 0 12px; }
      .hero { padding: 40px 0 32px; }
    }
    /* Unified side-by-side calculator layout fix */
    .calc-area > .calculator-column { grid-column: 1; grid-row: 1; }
    .calc-area > .guide-sidebar { grid-column: 2; grid-row: 1; 
  content-visibility: auto;
  contain-intrinsic-size: 0 800px;
    }
    .calc-area, .calc-area > .calculator-column, .calc-area > .guide-sidebar { vertical-align: top; }
    @media (max-width: 680px) {
      .calc-area > .calculator-column { grid-column: 1; grid-row: 1; }
      .calc-area > .guide-sidebar { grid-column: 1; grid-row: 2; }
    }
/* Calculator card/link click target: keep active calculator at top of viewport */
.calc-area#calculator-workspace{scroll-margin-top:84px;}
/* Force side-by-side alignment at all desktop widths */
@media (min-width: 681px) {
  .calc-area,
  #calculator-workspace.calc-area {
    grid-template-columns: minmax(280px, 420px) minmax(0, 1fr) !important;
    grid-template-areas: "calculator guide" !important;
    align-items: start !important;
  }
  .calc-area > .calculator-column { grid-column: 1 !important; grid-row: 1 !important; align-self: start !important; }
  .calc-area > .guide-sidebar { grid-column: 2 !important; grid-row: 1 !important; align-self: start !important; margin-top: 0 !important; }
}
.calc-area.cx-focus-pulse{outline:2px solid rgba(16,185,129,.75);outline-offset:8px;border-radius:18px;}

    .rm-type-btn{flex:1;padding:9px 0;font-size:12px;font-weight:700;border:none;cursor:pointer;transition:all .2s;color:var(--text2);background:var(--surface2)}
    .rm-type-active{background:var(--accent2)!important;color:#0a0a0f!important}
    .cx-rm-section-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
    .cx-rm-hint{color:var(--text3);font-weight:400;font-size:12px}

  
    
    
    
    

  
    
    
    
    
    
    

  
#calculator-workspace { min-height: calc(100vh - 60px); }
  /* The ad wrap itself must NOT stretch with the column */
  #calculator-workspace > .calculator-column > .cx-ad-wrap,
  .calc-area > .calculator-column > .cx-ad-wrap {
    align-self: flex-start !important;
    flex-shrink: 0;
  }
.cx-ad-wrap{
  margin-top:16px;
  display:flex;
  justify-content:center;
  width:100%;
  /* CLS-GUARD: contain layout so ad network DOM mutations don't
     propagate reflow up to the calculator column or body       */
  contain: layout style;
}
/* ── CLS-ZERO PLACEHOLDER ─────────────────────────────────────────
   Use aspect-ratio as the primary size reservation. The browser
   allocates the exact footprint before any script or image loads.
   min-height is a fallback for older engines.
   300×600 = 1/2 → aspect-ratio: 1 / 2
   300×250 = 6/5 → aspect-ratio: 6 / 5
   728×90  = 728/90 → aspect-ratio: 728 / 90
   ─────────────────────────────────────────────────────────────── */
.cx-ad-slot{
  width:300px;
  /* aspect-ratio reserves the space before the ad script runs  */
  aspect-ratio: 1 / 2;          /* 300×600 half-page           */
  min-height:600px;              /* fallback for Safari <15     */
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface2);
  border:1px dashed var(--border);
  border-radius:var(--radius-sm,10px);
  color:var(--text3);
  font-family:var(--font-display,sans-serif);
  font-size:12px;
  letter-spacing:0.5px;
  text-align:center;
  overflow:hidden;
  /* Prevent ad content mutations from reflowing the sidebar    */
  contain: layout style;
  /* GPU-composite the ad layer so animations don't trigger
     a main-thread paint on the calculator form                 */
  will-change: transform;
}
/* Clear will-change once sticky kicks in (avoid memory overhead) */
.cx-ad-slot:not(.cx-sticky .cx-ad-slot) {
  will-change: auto;
}
.cx-ad-slot .cx-ad-label{ opacity:0.6; padding:12px; }

/* Desktop sticky. Applied by default (placeholder + adsense/self). Mediavine opts out. */
@media (min-width: 1024px){
  .cx-ad-wrap.cx-sticky{
    position:-webkit-sticky;
    position:sticky;
    top:78px;                  /* clear the sticky nav */
    align-self:flex-start;     /* CRITICAL: do not stretch, or there's no room to scroll */
    margin-top:16px;
  }
    /* push the ad to the bottom of the stretched column so it tracks the full guide */
  /* The flex spacer above the ad consumes leftover column height so the ad starts
     near the calculator and the sticky travel spans the rest of the guide. */
  .calculator-column > .cx-ad-wrap.cx-sticky{ margin-top:16px; }
}
/* Mobile & tablet (<1024px): never sticky on any network; render inline. */
@media (max-width: 1023px){
  .cx-ad-wrap{
    display:none !important;
  }
  .cx-ad-slot{
    width:100%;
    max-width:336px;
    min-height:280px;
    margin:0 auto;
  }
}
/* ── AD STICKY: column height for sticky travel (block flow, NO flex — UI safe) ── */
@media (min-width: 1024px) {
  .calc-area,
  #calculator-workspace.calc-area { align-items: stretch !important; }
  .calc-area > .calculator-column,
  #calculator-workspace > .calculator-column {
    align-self: stretch !important;
    overflow: visible !important;
  }
  .calc-area { overflow: visible !important; }
}
/* ── GUIDE ARTICLE STYLING (cx-guide-article) — matches guide-panel card aesthetic ── */
.cx-guide-article .article { color: var(--text2); }
.cx-guide-article .head { margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.cx-guide-article .tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent); background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.2); padding: 4px 12px; border-radius: 100px; margin-bottom: 14px; }
.cx-guide-article .head h2 { color: var(--text); font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: -0.5px; margin: 0 0 12px; border: none; padding: 0; }
.cx-guide-article .dek { color: var(--text2); font-size: 15px; line-height: 1.6; margin: 0 0 14px; }
.cx-guide-article .date-row { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text3); }
.cx-guide-article .date-row span { position: relative; }
.cx-guide-article .date-row span:not(:last-child)::after { content: '·'; position: absolute; right: -9px; color: var(--text3); }
.cx-guide-article .body { color: var(--text2); }
.cx-guide-article h2 { color: var(--text); font-size: 19px; font-weight: 700; letter-spacing: -0.3px; margin: 28px 0 12px; }
.cx-guide-article h3 { color: var(--text); font-size: 16px; font-weight: 700; margin: 22px 0 10px; }
.cx-guide-article p { color: var(--text2); font-size: 14px; line-height: 1.75; margin: 0 0 14px; }
.cx-guide-article ul { margin: 0 0 14px; padding-left: 22px; }
.cx-guide-article li { color: var(--text2); font-size: 14px; line-height: 1.7; margin-bottom: 7px; }
.cx-guide-article strong { color: var(--text); font-weight: 700; }
.cx-guide-article a { color: var(--accent); text-decoration: none; }
.cx-guide-article a:hover { text-decoration: underline; }
.cx-guide-article .underwriting-desk { margin-bottom: 8px; }
.cx-guide-article .callout { background: rgba(129,140,248,0.07); border: 1px solid rgba(129,140,248,0.25); border-left: 3px solid var(--accent2); border-radius: var(--radius-sm, 10px); padding: 14px 16px; margin: 16px 0; font-size: 13px; line-height: 1.65; }
.cx-guide-article .callout strong { color: var(--accent2); }
.cx-guide-article .formula { background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--accent2); border-radius: var(--radius-sm, 10px); color: var(--text); font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.8; padding: 14px 16px; margin: 16px 0; overflow-x: auto; white-space: pre-wrap; }
.cx-guide-article .disclaimer { font-size: 11px; color: var(--text3); margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); line-height: 1.6; }
.cx-guide-article .author-box { font-size: 12px; color: var(--text3); margin-top: 16px; }
.cx-guide-article .related { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.cx-guide-article section { margin-bottom: 4px; }

/* ── COOKIE PREFERENCES BANNER ── */
.cx-cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:99998;background:var(--surface,#fff);border-top:1px solid var(--border,#dfe2f2);padding:12px 24px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));display:none;align-items:center;gap:16px;flex-wrap:wrap;box-shadow:0 -4px 24px rgba(9,9,27,.06);
  transform: translateY(0);
  transition: transform 0.2s ease;
  will-change: transform;
}
.cx-cookie-text{flex:1;min-width:200px;font-size:12.5px;line-height:1.55;color:var(--text2,#50546a);margin:0;}
.cx-cookie-link{font-weight:700;color:var(--accent,#10b981);text-decoration:none;}
.cx-cookie-link:hover{text-decoration:underline;}
.cx-cookie-controls{display:flex;align-items:center;gap:12px;flex-wrap:wrap;flex-shrink:0;}
.cx-cookie-toggles{display:flex;align-items:center;gap:12px;}
.cx-toggle-group{display:flex;align-items:center;gap:6px;}
.cx-toggle-group-label{font-size:12px;font-weight:600;color:var(--text2,#50546a);font-family:var(--font-display,'Syne',sans-serif);white-space:nowrap;}
.cx-toggle-wrap{position:relative;width:36px;height:20px;flex-shrink:0;}
.cx-toggle-wrap input{opacity:0;width:0;height:0;position:absolute;}
.cx-toggle-track{position:absolute;inset:0;border-radius:999px;background:var(--border,#dfe2f2);cursor:pointer;transition:background .2s;}
.cx-toggle-wrap input:checked ~ .cx-toggle-track{background:var(--accent,#10b981);}
.cx-toggle-thumb{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s;pointer-events:none;}
.cx-toggle-wrap input:checked ~ .cx-toggle-track .cx-toggle-thumb{transform:translateX(16px);}
.cx-cookie-actions{display:flex;align-items:center;gap:8px;}
.cx-cookie-save{border-radius:999px;padding:8px 18px;font:700 12px var(--font-display,'Syne',sans-serif);cursor:pointer;border:0;background:var(--accent,#10b981);color:#fff;transition:opacity .15s;white-space:nowrap;}
.cx-cookie-save:hover{opacity:.85;}
.cx-cookie-decline{border-radius:999px;padding:8px 14px;font:600 12px var(--font-display,'Syne',sans-serif);cursor:pointer;background:transparent;border:1px solid var(--border,#dfe2f2);color:var(--text2,#50546a);transition:all .15s;white-space:nowrap;}
.cx-cookie-decline:hover{border-color:var(--text3,#777a9b);color:var(--text,#09091b);}
@media(max-width:640px){.cx-cookie-banner{padding:14px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));}
.cx-cookie-controls{width:100%;flex-direction:column;align-items:flex-start;gap:10px;}
.cx-cookie-toggles{gap:16px;}
.cx-cookie-actions{width:100%;}.cx-cookie-save{flex:1;text-align:center;}.cx-cookie-decline{flex:1;text-align:center;}}

/* ── MOBILE NAV DRAWER + HAMBURGER (was missing — caused raw nav text) ── */
  .cx-hamburger { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--surface2); border: 1px solid var(--border); border-radius: 9px; cursor: pointer; flex-shrink: 0; margin-left: 10px; transition: background 0.15s, border-color 0.15s; }
  .cx-hamburger:hover { background: var(--surface); border-color: var(--accent); }
  .cx-drawer-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 998; backdrop-filter: blur(2px); opacity: 0; transition: opacity 0.25s ease; }
  .cx-drawer { position: fixed; top: 0; left: 0; width: min(320px, 88vw); height: 100dvh; background: var(--surface); border-right: 1px solid var(--border); z-index: 999; overflow-y: auto; overscroll-behavior: contain; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.32,0,0.15,1); display: flex; flex-direction: column; -webkit-overflow-scrolling: touch; }
  .cx-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; position: sticky; top: 0; background: var(--surface); z-index: 1; }
  .cx-drawer-logo { font-family: var(--font-display); font-size: 18px; font-weight: 800; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 7px; }
  .cx-drawer-close { width: 34px; height: 34px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; color: var(--text2); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
  .cx-drawer-close:hover { border-color: var(--accent); color: var(--accent); }
  .cx-drawer-body { padding: 12px 0 32px; flex: 1; }
  .cx-drawer-cat { border-bottom: 1px solid var(--border); }
  .cx-drawer-cat-btn { width: 100%; background: none; border: none; display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--text); cursor: pointer; text-align: left; transition: background 0.12s; }
  .cx-drawer-cat-btn:hover { background: var(--surface2); }
  .cx-drawer-cat-chevron { margin-left: auto; font-size: 12px; color: var(--text3); transition: transform 0.2s; flex-shrink: 0; }
  .cx-drawer-cat-btn.cx-open .cx-drawer-cat-chevron { transform: rotate(90deg); }
  .cx-drawer-cat-links { display: none; padding: 2px 0 10px; background: rgba(0,0,0,0.15); }
  .cx-drawer-util { margin-top: 6px; padding: 14px 18px 0; display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); }
  
  @media (max-width: 980px) { .cx-hamburger { display: flex; } }
  

/* Mobile drawer open-state rules (slide drawer into view) */
  .cx-drawer.cx-open { transform: translateX(0); }
  .cx-drawer-overlay.cx-open { display: block; opacity: 1; }
  .cx-drawer-cat-links.cx-open { display: block; }
  .cx-drawer-cat-links a { display: block; padding: 10px 18px 10px 42px; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text2); text-decoration: none; transition: background 0.12s, color 0.12s; }
  .cx-drawer-cat-links a:hover, .cx-drawer-cat-links a.cx-current { background: var(--surface2); color: var(--accent); }
  .cx-drawer-util a { display: block; padding: 10px 18px; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text2); text-decoration: none; border-radius: 8px; transition: background 0.12s, color 0.12s; }
  .cx-drawer-util a:hover { background: var(--surface2); color: var(--accent); }
  .cx-drawer-cat-btn.cx-active { color: var(--accent); }

  /* ── Action bar ── */
  .calc-action-bar { display: flex; gap: 8px; padding: 12px 20px; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 0; }
  .action-btn { background: var(--surface); border: 1.5px solid var(--accent); border-radius: 999px; color: var(--accent); font-family: var(--font-display, sans-serif); font-size: 11px; font-weight: 700; padding: 5px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: background 0.15s, color 0.15s; white-space: nowrap; }
  .action-btn:hover { background: var(--accent); color: #0a0a0f; }

    @media (max-width: 480px) {
      .share-modal { padding: 20px 16px; }
      .share-url-box { flex-direction: column; }
      .share-copy-url-btn { width: 100%; }
      .share-actions { grid-template-columns: 1fr 1fr; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } html { scroll-behavior: auto !important; } }
    
    /* Skip to main content link (WCAG 2.4.1) */
    .skip-link {
      position: absolute;
      top: -44px;
      left: 8px;
      z-index: 999999;
      padding: 8px 16px;
      background: var(--accent, #10b981);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      border-radius: 0 0 8px 8px;
      text-decoration: none;
      transition: top .15s;
    }
    .skip-link:focus { top: 0; outline: 2px solid #fff; outline-offset: 2px; }
    
    /* ── BULLETPROOF MOBILE AD HIDE ── */
    @media (max-width: 1023px) {
      #cx-ad-wrap, .cx-ad-wrap, [data-ad-network] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
      }
    }
/* CLS guard: reserve space for mortgage shared inputs */
#mort-shared-inputs { min-height: 120px; }

/* ── WCAG 2.4.11 FOCUS APPEARANCE ───────────────────────────────────────────
   Keyboard focus rings meet WCAG 2.2 AA requirements:
   - 2px minimum outline width
   - 3:1 contrast ratio against adjacent background (accent #10b981 on white)
   - Visible on both light and dark backgrounds via dual-ring technique
   - :focus-visible only (not :focus) to avoid mouse-click rings on most browsers
   ──────────────────────────────────────────────────────────────────────────── */

/* Interactive elements: unified focus ring */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
[role="tab"]:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: 2px;
  /* Dual-ring technique: white halo beneath accent ring gives
     visible separation from any background color */
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
  border-radius: 4px;
}
/* Remove :focus (non-keyboard) ring on most browsers */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}
/* Calculator button — high-visibility focus for primary action */
.calc-btn-primary:focus-visible {
  outline: 3px solid var(--accent, #10b981);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.2);
}
/* FAQ buttons — ensure expanded state is visible to keyboard users */
.faq-q:focus-visible {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: 1px;
}
/* Nav tabs */
.nav-btn:focus-visible,
[role="tab"]:focus-visible {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: -2px;  /* inside the button */
}
/* cx-hamburger — mobile nav toggle */
.cx-hamburger:focus-visible {
  outline: 2px solid var(--accent, #10b981);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.25);
}
/* cx-validation error input state — ensure it persists during focus */
.cx-input-error:focus-visible {
  outline: 2px solid var(--red, #dc2626);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);


}
/* ── PRINT STYLES ────────────────────────────────────────────────────────────
   All @media print rules have been consolidated into css/print.css.
   Loaded via <link media="print"> on every calculator, blog, and utility page.
   See css/print.css for the full 800-line production print stylesheet.
   ─────────────────────────────────────────────────────────────────────────── */