/* =========================================================
   SpeedDistanceCalculator.com — COMPLETE CSS (FINAL)
   ✅ Attractive light theme (not dull)
   ✅ Inputs:
      - #inputsGrid is flex
      - 2nd + 3rd blocks stay in one row when JS adds .pair45 (45% each)
      - Unit box never cuts text (km/h, hour, seconds)
      - Distance row uses space properly (no wasted right side)
   ✅ Dropdown:
      - Closed select text centered
      - Options centered
   ✅ Steps:
      - ONLY mathematical operations look handwritten
      - Normal text stays normal (NOT cursive)
      - Handwritten math ink = RED
      - Lined notebook background ONLY behind math tokens area
      - Slight human tilt + subtle pen-pressure shadow ONLY on math
   ✅ Responsive: 360px → 2000px
   ========================================================= */


/* ================= TOKENS ================= */
:root{
  --bg:#f4f7fb;
  --bg2:#eef3fb;

  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --muted2:#64748b;

  --line:#e5e7eb;

  --brand:#2563eb;
  --brand2:#1d4ed8;
  --brand3:#60a5fa;

  --brandSoft:rgba(37,99,235,.10);
  --brandSoft2:rgba(37,99,235,.18);

  --good:#10b981;
  --warn:#f59e0b;
  --bad:#ef4444;

  --shadow:0 12px 30px rgba(2,6,23,.10);
  --shadow2:0 10px 22px rgba(2,6,23,.08);
  --shadow3:0 22px 60px rgba(2,6,23,.12);

  --r10:10px;
  --r12:12px;
  --r14:14px;
  --r16:16px;
  --r18:18px;
  --r24:24px;

  --max:1140px;

  /* handwritten stack (browser safe) */
  --hand: "Segoe Print","Bradley Hand","Comic Sans MS","Chalkboard SE","Marker Felt",cursive;

  /* red ink */
  --ink:#b10012;
  --inkDark:#8f000e;
}





/* ================================
   Global Typography ( +1px scale )
   - Base is 17px (commonly 16px)
   - Adjusts by breakpoint for better readability
================================== */

html{ font-size:17px; }

/* Small phones */
@media (max-width:360px){
  html{ font-size:17px; } /* +1 over typical 16px */
}

/* Phones */
@media (min-width:361px) and (max-width:480px){
  html{ font-size:17px; }
}

/* Large phones / small tablets */
@media (min-width:481px) and (max-width:768px){
  html{ font-size:18px; } /* +1 over typical 17px */
}

/* Tablets / small laptops */
@media (min-width:769px) and (max-width:1024px){
  html{ font-size:19px; } /* +1 over typical 18px */
}

/* Desktop */
@media (min-width:1025px){
  html{ font-size:19px; }
}

/* Make long text comfortable */
body{ line-height:1.55; }
p, li{ line-height:1.7; }


/* ================= RESET ================= */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.55;
  color:var(--text);
  background:
    radial-gradient(1100px 620px at 12% 0%, rgba(37,99,235,.12), transparent 62%),
    radial-gradient(900px 560px at 92% 10%, rgba(96,165,250,.10), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  min-height:100vh;
  overflow-x:hidden;
  padding-left:5%;
  padding-right:5%;
}
@media (max-width:768px){
  body{ padding-left:1px; padding-right:1px; }
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* Skip link */
.skip{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip:focus{
  position:fixed;left:16px;top:16px;width:auto;height:auto;
  padding:10px 12px;border-radius:var(--r14);
  background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow2);
  z-index:9999;
}


/* ================= HEADER ================= */
#siteHeader{
  position:static;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border-bottom:1px solid rgba(229,231,235,.80);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
#siteHeader.is-scrolled{
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 26px rgba(2,6,23,.10);
  border-bottom-color: rgba(219,230,247,1);
}

.topbar{
  max-width:var(--max);
  margin:0 auto;
  padding:12px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  min-width:0;
}
.logo{
  width:38px;
  height:38px;
  border-radius:10px;
  background: url("/images/logo-32.svg") no-repeat center / contain;
  border:1px solid rgba(37,99,235,.18);
  box-shadow: 0 12px 32px rgba(37,99,235,.20);
  transition: transform .25s ease;
}

#siteHeader.is-scrolled .logo{transform: translateY(-1px)}

.brand strong{font-size:14px;letter-spacing:.2px}
.brand span{display:block;font-size:12px;color:var(--muted2);margin-top:-2px}

nav{
  margin-left:auto;
  display:flex;
  gap:4px;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-end;
  flex-shrink:0;
}
nav a{
  font-size:12px;
  color:var(--muted);
  padding:6px 8px;
  border-radius:var(--r12);
  border:1px solid transparent;
  white-space:nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .08s ease;
}
nav a:hover{
  color:var(--text);
  background: var(--brandSoft);
  border-color: var(--brandSoft2);
}
nav a:active{transform: translateY(1px)}


/* ================= BUTTONS ================= */
.btn{
  appearance:none;
  border:1px solid var(--line);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  color:var(--text);
  padding:10px 12px;
  border-radius:var(--r14);
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
  box-shadow: 0 8px 18px rgba(2,6,23,.06);
  transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
}
.btn:hover{
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 14px 30px rgba(2,6,23,.10);
  filter: brightness(1.02);
}
.btn:active{transform: translateY(1px)}
.btn.primary{
  color:#fff;
  border-color: rgba(29,78,216,.35);
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  box-shadow: 0 18px 52px rgba(37,99,235,.22);
}
.btn.primary:hover{box-shadow: 0 20px 58px rgba(37,99,235,.26)}
.btn.good{
  border-color: rgba(16,185,129,.24);
  background: linear-gradient(135deg, rgba(16,185,129,.16), rgba(16,185,129,.08));
}
.btn.mini{
  padding:8px 10px;
  font-size:12px;
  border-radius:14px;
}


/* ================= MAIN LAYOUT ================= */
.hero{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:18px;
  align-items:start;
}

.card{
  background: rgba(255,255,255,.92);
  border:1px solid rgba(229,231,235,.95);
  border-radius:var(--r24);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.headline{padding:14px 10px 10px}
h1{
  margin:0;
  font-size:clamp(22px,2.6vw,36px);
  line-height:1.15;
  letter-spacing:-.3px;
}
.sub{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
  max-width:72ch;
}


/* ================= INPUTS GRID ================= */
#inputsGrid{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  padding:10px 8px 8px;
}

/* each block full width default */
#inputsGrid > [data-block]{flex:0 0 100%;max-width:100%}

/* JS adds .pair45 to 2nd & 3rd blocks */
#inputsGrid > .pair45{flex:0 0 45%;max-width:45%;min-width:0}

/* keep solve always full width */
#inputsGrid > [data-block="solve"]{flex:0 0 100%;max-width:100%}

label{
  display:block;
  font-size:12px;
  color:var(--muted2);
  margin:0 0 6px 2px;
  letter-spacing:.2px;
}


/* ================= FIELD (INPUT + UNIT) =================
   Your HTML structure:
   .field (outer) contains:
     - input
     - div.field.selectWrap (inner) contains select
========================================================= */
.field{
  position:relative;
  display:flex;
  align-items:stretch;
  border:1px solid rgba(229,231,235,.95);
  border-radius:var(--r16);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  overflow:hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.field:hover{
  border-color: rgba(37,99,235,.22);
  box-shadow: 0 12px 26px rgba(2,6,23,.08);
}
.field:focus-within{
  border-color: rgba(37,99,235,.55);
  box-shadow: 0 14px 30px rgba(37,99,235,.16);
  transform: translateY(-1px);
}

/* input */
.field > input{
  flex:1;
  min-width:0;
  padding:12px 10px;
  border:0;
  outline:none;
  background:transparent;
  color:var(--text);
  font-size:15px;
  font-weight:900;
  letter-spacing:.1px;
}
.field > input::placeholder{color:#94a3b8;font-weight:800}
.field > input:disabled{background:#f3f6fb;color:#64748b;cursor:not-allowed}

/* unit wrapper (inner .field) */
.field > .field{
  flex:0 0 auto;
  width:clamp(88px, 24%, 140px);
  min-width:88px;
  border:0 !important;
  border-left:1px solid rgba(229,231,235,.95) !important;
  border-radius:0 !important;
  background:transparent !important;
  display:flex;
  align-items:stretch;
  overflow:hidden;
}

/* Distance row: KM/Meter label is short — compact the unit */
#inputsGrid > [data-block="distance"] .field > .field{
  width:clamp(76px, 16%, 110px);
  min-width:76px;
}

/* select (closed) centered */
.field select{
  max-width:none;
  width:100%;
  border:0;
  outline:none;
  background: linear-gradient(180deg, #f8fbff, #f1f7ff);
  color:var(--text);
  padding:12px 32px 12px 8px;
  font-size:12.5px;
  font-weight:950;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
  white-space:nowrap;
  text-align:center;
  text-align-last:center;
  -moz-text-align-last:center;
}

/* options centered */
.field select option{
  text-align:center;
  background:#fff;
  color:var(--text);
}

/* dropdown arrow (for selectWrap) */
.field.selectWrap::after{
  content:"";
  position:absolute;
  right:14px;
  top:50%;
  width:10px;height:10px;
  border-right:2px solid rgba(15,23,42,.55);
  border-bottom:2px solid rgba(15,23,42,.55);
  transform: translateY(-60%) rotate(45deg);
  pointer-events:none;
  opacity:.9;
}

/* ── Stepper ▲▼ controls (JS-injected) ── */
.stepperCtl{
  display:flex;
  flex-direction:column;
  justify-content:stretch;
  border-left:1px solid rgba(229,231,235,1);
  background:transparent;
  flex-shrink:0;
}
.stepperCtl button{
  width:34px;
  flex:1;
  border:0;
  background:transparent;
  cursor:pointer;
  font-weight:900;
  font-size:13px;
  line-height:1;
  user-select:none;
  color:var(--muted);
  transition:background .15s ease, color .15s ease;
}
.stepperCtl button:hover{
  background:rgba(37,99,235,.07);
  color:var(--brand);
}
.stepperCtl button:active{
  background:rgba(37,99,235,.13);
}


/* ================= ACTIONS / HINT ================= */
.actionsBelowTime{
  padding:0 8px 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.hint{
  color:var(--muted2);
  font-size:12px;
  padding:0 8px 12px;
}


/* ================= OUTPUT / STEPS ================= */
.out{padding:12px 8px 14px}
.resultBar{
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
}
.big{
  font-size:18px;
  font-weight:950;
  letter-spacing:-.2px;
  color:var(--text);
  flex:1;
  min-width:240px;
}
.big small{
  display:block;
  margin-top:6px;
  color:var(--muted2);
  font-size:12px;
  font-weight:800;
}
.miniActions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Step boxes */
.steps{
  margin-top:12px;
  display:grid;
  gap:12px;
}
.stepBox{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,252,255,.95));
  border:1px solid rgba(229,231,235,.95);
  border-radius:var(--r24);
  padding:14px 14px 12px;
  box-shadow: var(--shadow2);
}
.stepTitle{
  font-size:13px;
  font-weight:950;
  color:var(--text);
  margin:0 0 8px;
  letter-spacing:.1px;
}

/* Normal (non-math) inside steps */
.stepBox p{
  margin:0;
  color:var(--muted);
  font-size:14px;
}

/* The math paragraph (contains .mono tokens) stays normal font overall */
.stepBox .math{
  margin:0;
  word-break:break-word;
}

/* The math tokens (pills) become handwritten red */
.stepBox .math .mono,
.stepBox .mono{
  font-family: var(--hand);
  color: var(--ink);
  font-size:15.5px;
  font-weight:800;

  /* human writing feel */
  transform: rotate(-0.28deg);
  transform-origin:left top;
  text-shadow: 0.2px 0.2px 0 rgba(0,0,0,.10);

  /* notebook area only for tokens */
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.92)),
    repeating-linear-gradient(
      to bottom,
      rgba(15,23,42,.08) 0px,
      rgba(15,23,42,.08) 1px,
      transparent 1px,
      transparent 28px
    );

  border:1px solid rgba(37,99,235,.22);
  border-radius:14px;
  padding:6px 10px;
  display:inline-block;
  margin:2px 2px;
}

/* make tokens a little darker on hover like ink */
.stepBox .math .mono:hover{color:var(--inkDark)}

/* Optional fraction helper if you use .frac in future */
.stepBox .math .frac{
  display:inline-grid;
  grid-template-rows:auto 3px auto;
  align-items:center;
  justify-items:center;
  padding:0 4px;
}
.stepBox .math .frac .bar{
  height:3px;
  width:100%;
  background: var(--ink);
  border-radius:999px;
  opacity:.95;
}

/* messages */
.msg{
  margin-top:10px;
  padding:10px 12px;
  border-radius:var(--r16);
  border:1px solid rgba(229,231,235,.95);
  background:#f8fbff;
  color:var(--muted);
  font-size:12px;
}
.msg.ok{border-color: rgba(16,185,129,.30); background: rgba(16,185,129,.08); color:#0b1a2a}
.msg.warn{border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); color:#0b1a2a}
.msg.bad{border-color: rgba(239,68,68,.28); background: rgba(239,68,68,.10); color:#0b1a2a}


/* ================= RIGHT COLUMN ================= */
.side{
  display:grid;
  gap:14px;
  position:sticky;
  top:70px;
  align-self:start;
}

/* hide old adbox completely */
.adbox{display:none!important}



/* ── New aside widget base ── */
.sw-card{
  background:#fff;
  border:1px solid rgba(229,231,235,.95);
  border-radius:18px;
  padding:16px;
  box-shadow:0 4px 16px rgba(2,6,23,.07);
  transition:box-shadow .2s ease,transform .2s ease;
}
.sw-card:hover{
  box-shadow:0 8px 28px rgba(2,6,23,.11);
  transform:translateY(-1px);
}

/* widget header */
.sw-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.sw-title{margin:0;font-size:13px;font-weight:800;letter-spacing:.1px;color:var(--text)}
.sw-icon{
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.sw-icon--blue{background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid rgba(37,99,235,.15);color:#2563eb}
.sw-icon--green{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid rgba(16,185,129,.18);color:#10b981}
.sw-icon--orange{background:linear-gradient(135deg,#fff7ed,#ffedd5);border:1px solid rgba(245,158,11,.18);color:#d97706}

/* ── Widget 1: Formula triangle ── */
.sw-formula{background:linear-gradient(150deg,#eef4ff 0%,#fff 55%)}

.sw-triangle{display:grid;gap:3px;margin-bottom:14px}
.sw-tri-top{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  padding:10px 8px 8px;
  min-height:72px;
  clip-path:polygon(18% 100%,50% 0%,82% 100%);
  border-radius:6px 6px 0 0;
}
.sw-tri-top b{font-size:26px;line-height:1;font-weight:900;margin-top:14px}
.sw-tri-top small{font-size:8.5px;opacity:.88;letter-spacing:.8px;text-transform:uppercase;margin-top:2px}
.sw-tri-row{display:grid;grid-template-columns:1fr auto 1fr;gap:3px}
.sw-tri-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1d4ed8,#1e40af);
  color:#fff;border-radius:0 0 10px 10px;
  padding:10px 4px;min-height:52px;
}
.sw-tri-cell b{font-size:22px;line-height:1;font-weight:900}
.sw-tri-cell small{font-size:8.5px;opacity:.85;letter-spacing:.6px;text-transform:uppercase;margin-top:2px}
.sw-tri-x{
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:900;color:#1d4ed8;padding:0 2px;
}

/* formula pills */
.sw-pills{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.sw-pills li{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;
  background:#f8fbff;
  border:1px solid rgba(37,99,235,.13);
  border-radius:11px;
}
.sw-pill-code{
  font-family:monospace;font-weight:900;font-size:13px;
  color:#1d4ed8;background:rgba(37,99,235,.09);
  padding:3px 9px;border-radius:7px;letter-spacing:.2px;
}
.sw-pill-label{font-size:11.5px;font-weight:700;color:var(--muted2);white-space:nowrap}

/* ── Widget 2: Unit converter ── */
.sw-units{background:linear-gradient(150deg,#f0fdf4 0%,#fff 55%)}

.sw-conv-row{
  display:flex;align-items:center;gap:8px;
  padding:9px 12px;margin-bottom:8px;
  background:#fff;border:1px solid rgba(16,185,129,.18);border-radius:11px;
}
.sw-from,.sw-to{
  font-weight:800;font-size:13px;color:var(--text);
  background:#f0fdf4;padding:2px 8px;border-radius:6px;white-space:nowrap;
}
.sw-conv-code{
  margin-left:auto;font-family:monospace;font-weight:900;font-size:13px;
  color:#10b981;background:rgba(16,185,129,.10);
  padding:2px 8px;border-radius:6px;white-space:nowrap;
}
.sw-eg{
  font-size:12px;color:var(--muted);margin:0;
  padding:8px 12px;
  background:rgba(16,185,129,.05);border:1px solid rgba(16,185,129,.12);border-radius:10px;
}
.sw-eg strong{color:#10b981}


/* ================= CONTENT / FOOTER ================= */
section{margin-top:18px}
.contentGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pad{padding:18px}
h2{margin:0 0 10px;font-size:18px;letter-spacing:-.2px;color:var(--text)}
p{margin:0 0 10px;color:var(--muted);font-size:14px}

footer{
  margin-top:26px;
  border-top:1px solid rgba(229,231,235,.95);
  background:#fff;
}
.foot{
  max-width:var(--max);
  margin:0 auto;
  padding:18px 16px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  color:var(--muted2);
  font-size:12px;
}
.foot .links{display:flex;gap:12px;flex-wrap:wrap}

/* =========================================
   Hide the input we are solving for
   (disabled input block)
   ========================================= */

/* Hide the entire block that contains a disabled input */
/* ================= RESPONSIVE ================= */
@media (min-width:769px){
  .headline{ padding:18px 18px 12px; }
  #inputsGrid{ padding:14px 18px 10px; }
  .actionsBelowTime{ padding:0 18px 18px; }
  .hint{ padding:0 18px 18px; }
  .out{ padding:16px 18px 18px; }
}
@media (max-width: 980px){
  .hero{grid-template-columns:1fr}
  .contentGrid{grid-template-columns:1fr}
  nav{justify-content:flex-end;margin-left:auto}
  .brand{min-width:0}
  .side{position:static;grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .side{grid-template-columns:1fr}
}

@media (max-width: 540px){
  .btn.primary{flex:1}
  .actionsBelowTime .btn:not(.primary){flex:1}
  .miniActions{width:100%}
  .miniActions .btn{flex:1}
}

/* ── Input grid: 360px → 520px ── */
@media (min-width: 360px) and (max-width: 520px){
  #inputsGrid{ padding:10px 6px 8px; gap:8px; }

  /* pair45 side-by-side */
  #inputsGrid > .pair45{ flex:0 0 47%; max-width:47%; min-width:0; }

  /* Input: more horizontal room */
  .field > input{ padding:11px 10px; font-size:14px; min-width:0; }

  /* Unit dropdown: fixed narrow width */
  .field > .field{
    flex: 0 0 80px;
    width: 80px;
    min-width: 0;
  }

  /* Distance unit narrower */
  #inputsGrid > [data-block="distance"] .field > .field{
    flex: 0 0 70px;
    width: 70px;
  }

  /* Select: tight padding */
  .field select{
    padding: 11px 24px 11px 6px;
    font-size: 11.5px;
    text-align: center;
    text-align-last: center;
  }

  .field.selectWrap::after{ right: 8px; }

  /* tokens slightly smaller */
  .stepBox .math .mono{ font-size:15px; padding:6px 9px; }
}

/* ── 521px → 768px: full width available, inputs get maximum space ── */
@media (min-width: 521px) and (max-width: 768px){
  #inputsGrid{ padding:10px 6px 8px; gap:10px; }

  .field > input{ padding:12px 10px; font-size:15px; min-width:0; }

  .field > .field{
    flex: 0 0 90px;
    width: 90px;
    min-width: 0;
  }

  #inputsGrid > [data-block="distance"] .field > .field{
    flex: 0 0 78px;
    width: 78px;
  }

  .field select{
    padding: 12px 26px 12px 6px;
    font-size: 12px;
    text-align: center;
    text-align-last: center;
  }

  .field.selectWrap::after{ right: 9px; }

  .actionsBelowTime{ padding:0 6px 12px; }
  .hint{ padding:0 6px 12px; }
  .out{ padding:12px 6px 14px; }
}

/* Print */
@media print{
  header, .adbox, nav, .miniActions, .actionsBelowTime{display:none !important}
  body{background:#fff;color:#000}
  .card,.stepBox{box-shadow:none}
  .card{border:1px solid #ccc}
}
/* =========================================================
   HH:MM:SS Time Input Row
   ========================================================= */
.hmsInputRow{
  margin-top:8px;
  padding:10px 12px;
  background:linear-gradient(180deg,#f8fbff,#f1f7ff);
  border:1px solid rgba(37,99,235,.18);
  border-radius:var(--r16);
}
.hmsLabel{
  display:block;
  font-size:11px;
  color:var(--muted2);
  margin-bottom:8px;
  letter-spacing:.2px;
}
.hmsFields{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:nowrap;
}
.hmsGroup{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1;
  min-width:0;
}
.hmsGroup input{
  width:100%;
  min-width:0;
  padding:9px 8px;
  border:1px solid rgba(229,231,235,.95);
  border-radius:var(--r10);
  background:#fff;
  color:var(--text);
  font-size:14px;
  font-weight:900;
  text-align:center;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.hmsGroup input:focus{
  border-color:rgba(37,99,235,.55);
  box-shadow:0 4px 12px rgba(37,99,235,.14);
}
.hmsLbl{
  font-size:11px;
  color:var(--muted2);
  font-weight:700;
  white-space:nowrap;
}
.hmsSep{
  font-size:18px;
  font-weight:900;
  color:var(--brand);
  line-height:1;
  flex:0 0 auto;
}

/* ── HMS row: pull out of pair45 constraint, span full card width ≤768px ── */
@media (max-width:768px){
  /* hmsInputRow breaks out of the 47% time block visually */
  .hmsInputRow{
    /* stretch across full inputsGrid width using negative margins */
    margin-left: calc(-100% - 6px);   /* 6px = inputsGrid gap */
    width: calc(200% + 6px);
    margin-top: 6px;
  }
  .hmsInputRow{ padding:8px 10px; }
  .hmsLabel{ font-size:10px; margin-bottom:5px; }
  .hmsFields{ gap:4px; }
  .hmsGroup input{ padding:8px 6px; font-size:13px; }
  .hmsLbl{ font-size:10px; }
  .hmsSep{ font-size:15px; }
}

/* ── ≤400px: slightly more compact ── */
@media (max-width:400px){
  .hmsInputRow{
    margin-left: calc(-100% - 6px);
    width: calc(200% + 6px);
  }
  .hmsGroup input{ padding:7px 4px; font-size:12px; }
}

/* =========================================================
   JS-Generated Content Font Size — +2px per media query
   Applies to: stepBox, math tokens, result text, msg, detailHeader
   Base sizes defined here and scaled up at each breakpoint.
   ========================================================= */

/* Base (mobile-first, <360px): slightly smaller */
.stepBox .math .mono,
.stepBox .mono        { font-size: 14px; }
.stepBox p            { font-size: 13px; }
.stepTitle            { font-size: 12px; }
.detailHeader         { font-size: 16px; text-align:center; font-weight:950; letter-spacing:-.2px; color:#0f172a; margin:6px 0 12px; }
.big                  { font-size: 16px; }
.big small            { font-size: 11px; }
.msg                  { font-size: 11px; }

/* Small phones: 360px → 480px (+2px over base) */
@media (min-width:360px) and (max-width:480px){
  .stepBox .math .mono,
  .stepBox .mono        { font-size: 16px; }
  .stepBox p            { font-size: 15px; }
  .stepTitle            { font-size: 14px; }
  .detailHeader         { font-size: 18px; }
  .big                  { font-size: 18px; }
  .big small            { font-size: 13px; }
  .msg                  { font-size: 13px; }
}

/* Large phones / small tablets: 481px → 768px (+4px over base) */
@media (min-width:481px) and (max-width:768px){
  .stepBox .math .mono,
  .stepBox .mono        { font-size: 18px; }
  .stepBox p            { font-size: 16px; }
  .stepTitle            { font-size: 15px; }
  .detailHeader         { font-size: 20px; }
  .big                  { font-size: 20px; }
  .big small            { font-size: 14px; }
  .msg                  { font-size: 14px; }
}

/* Tablets / small laptops: 769px → 1024px (+6px over base) */
@media (min-width:769px) and (max-width:1024px){
  .stepBox .math .mono,
  .stepBox .mono        { font-size: 20px; }
  .stepBox p            { font-size: 17px; }
  .stepTitle            { font-size: 16px; }
  .detailHeader         { font-size: 21px; }
  .big                  { font-size: 21px; }
  .big small            { font-size: 15px; }
  .msg                  { font-size: 15px; }
}

/* Desktop: 1025px+ (+8px over base) */
@media (min-width:1025px){
  .stepBox .math .mono,
  .stepBox .mono        { font-size: 22px; }
  .stepBox p            { font-size: 18px; }
  .stepTitle            { font-size: 17px; }
  .detailHeader         { font-size: 22px; }
  .big                  { font-size: 22px; }
  .big small            { font-size: 15px; }
  .msg                  { font-size: 15px; }
}



/* =========================================================
   RESPONSIVE FIX PACK (Added)
   Goal: Inputs never disappear on very small screens (<=359px)
   Safe: Only affects layout on small widths; no JS conflicts.
   ========================================================= */

/* Base safety: prevent flex children from forcing overflow */
.field, .field *{ min-width:0; box-sizing:border-box; }

/* ── XS phones ≤359px: stack input + unit vertically ── */
@media (max-width: 359px){

  /* pair blocks full width — no side-by-side at this size */
  #inputsGrid > .pair45{ flex:0 0 100%; max-width:100%; }

  /* field wraps so unit goes below input */
  .field{ flex-wrap:wrap; overflow:visible; }

  /* input takes full row */
  .field > input{ flex:1 1 100%; width:100%; min-width:0; padding:11px 12px; }

  /* unit select: full row below input */
  .field > .field{
    order: 3;
    flex: 0 0 100%;
    width: 100% !important;
    min-width: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(229,231,235,.95) !important;
    border-radius: 0 !important;
  }

  .field select{
    text-align: left;
    text-align-last: left;
    -moz-text-align-last: left;
    padding: 9px 36px 9px 12px;
    font-size: 12.5px;
  }

  .actionsBelowTime{ padding:0 14px 16px; }
  .actionsBelowTime .btn{ flex:1 1 100%; width:100%; }
  .miniActions{ width:100%; }
  .miniActions .btn{ flex:1 1 100%; }
}

/* ── 360px–399px: pair side-by-side but field fixed-width units ── */
@media (min-width: 360px) and (max-width: 399px){
  #inputsGrid > .pair45{ flex:0 0 47%; max-width:47%; min-width:0; }

  .field > input{ padding:10px 8px; font-size:14px; }

  .field > .field{ flex:0 0 76px; width:76px; min-width:0; }
  #inputsGrid > [data-block="distance"] .field > .field{ flex:0 0 66px; width:66px; }

  .field select{ padding:10px 22px 10px 6px; font-size:11px; }
  .field.selectWrap::after{ right:8px; }
}

@media (min-width: 400px) and (max-width: 479px){
  .actionsBelowTime .btn{flex:1}
}




/* =========================================================
   Km/h → m/s SEO Section (Clean + Stylish + Equal Columns)
   - Scoped to .kmh-ms-seo so it won't affect other parts
   ========================================================= */

.kmh-ms-seo{
  width:100%;
  max-width:980px;
  margin:18px auto;
  padding:16px;
  background:#f9fafb;
  border:1px solid #eef2f7;
  border-radius:12px;
}

/* Typography */
.kmh-ms-seo h2{
  margin:0 0 10px;
  font-size:1.35rem;
  line-height:1.25;
}
.kmh-ms-seo h3{
  margin:16px 0 10px;
  font-size:1.1rem;
  line-height:1.3;
}
.kmh-ms-seo p{
  margin:10px 0;
  font-size:0.98rem;
  line-height:1.65;
  color:var(--muted);
}

/* Quick Tip callout */
.kmh-ms-cta{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:flex-start;
  padding:12px 14px;
  background:#ecfeff;
  border:1px solid #cffafe;
  border-radius:12px;
  margin:10px 0 14px;
}
.kmh-ms-cta .badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 12px;
  border-radius:999px;
  background:#0ea5e9;
  color:#fff;
  font-size:0.8rem;
  font-weight:900;
  letter-spacing:.2px;
  white-space:nowrap;
  line-height:1;
}
.kmh-ms-cta p{
  margin:0;
  color:var(--text);
  font-size:1rem;
  line-height:1.5;
}

/* Formula box */
.kmh-ms-seo .formula-box{
  margin:12px 0;
  padding:12px 14px;
  background:#e8f2ff;
  border-left:5px solid #2563eb;
  border-radius:12px;
  color:var(--text);
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.kmh-ms-seo .formula-box .label{
  opacity:.85;
  margin-right:4px;
  font-weight:700;
}

/* =========================
   Table: Equal 2 Columns + Centered + Attractive
   ========================= */

.kmh-ms-seo .table-wrap{
  display:flex;
  justify-content:center;
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:6px 0;
}

/* Use a “card table” look */
.kmh-ms-seo .conversion-table{
  width:100%;
  max-width:520px;      /* keeps it looking neat on desktop */
  min-width:320px;
  table-layout:fixed;   /* IMPORTANT: equal column width */
  border-collapse:separate;
  border-spacing:0;
  font-size:1rem;
  background:#ffffff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  overflow:hidden;      /* clips rounded corners */
}

/* If any global CSS breaks table layout, restore table behavior */
.kmh-ms-seo .conversion-table{display:table !important;}
.kmh-ms-seo .conversion-table thead{display:table-header-group !important;}
.kmh-ms-seo .conversion-table tbody{display:table-row-group !important;}
.kmh-ms-seo .conversion-table tr{display:table-row !important;}
.kmh-ms-seo .conversion-table th,
.kmh-ms-seo .conversion-table td{
  display:table-cell !important;
  width:50%;
  padding:14px 10px;
  text-align:center;
  vertical-align:middle;   /* vertical center */
  border-bottom:1px solid #eef2f7;
  border-right:1px solid #eef2f7;
}
.kmh-ms-seo .conversion-table th:last-child,
.kmh-ms-seo .conversion-table td:last-child{
  border-right:none;
}
.kmh-ms-seo .conversion-table tbody tr:last-child td{
  border-bottom:none;
}

/* Header style */
.kmh-ms-seo .conversion-table th{
  background:#2563eb;
  color:#fff;
  font-weight:900;
  font-size:1.05rem;
  padding:16px 10px;
  letter-spacing:.2px;
}

/* Body rows: clean + hover attention */
.kmh-ms-seo .conversion-table tbody tr:nth-child(odd){background:#f8fafc;}
.kmh-ms-seo .conversion-table tbody tr:nth-child(even){background:#ffffff;}
.kmh-ms-seo .conversion-table tbody tr:hover{
  background:#eef2ff;
}

/* Make numbers look bold & readable */
.kmh-ms-seo .conversion-table td{
  font-weight:800;
  color:var(--text);
}

/* Memory tip */
.kmh-ms-seo .memory-tip{
  margin:12px 0 10px;
  font-size:0.98rem;
  background:#fff7ed;
  border:1px solid #ffedd5;
  padding:12px 14px;
  border-radius:12px;
  color:var(--text);
}

/* FAQ */
.kmh-ms-seo .mini-faq{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:12px;
  padding:12px 14px;
}
.kmh-ms-seo .mini-faq summary{
  cursor:pointer;
  user-select:none;
}
.kmh-ms-seo .mini-faq p{margin:10px 0 0;}

/* =========================
   Responsive: keep 2 equal columns ALWAYS
   ========================= */

/* Very small devices */
@media (max-width:360px){
  .kmh-ms-seo{padding:12px;border-radius:10px;}
  .kmh-ms-seo h2{font-size:1.12rem;}
  .kmh-ms-seo .conversion-table{min-width:280px;}
  .kmh-ms-seo .conversion-table th,
  .kmh-ms-seo .conversion-table td{padding:12px 8px;font-size:0.95rem;}
}

/* Phones */
@media (max-width:480px){
  .kmh-ms-cta{flex-direction:column;align-items:flex-start;}
  .kmh-ms-seo .formula-box{padding:12px;}
  .kmh-ms-seo .conversion-table{max-width:100%;}
}

/* Tablets */
@media (min-width:481px) and (max-width:768px){
  .kmh-ms-seo{padding:18px;}
  .kmh-ms-seo h2{font-size:1.4rem;}
  .kmh-ms-seo .conversion-table{max-width:560px;}
}

/* Desktop */
@media (min-width:769px){
  .kmh-ms-seo{padding:20px;}
}


/* =========================================================
   Stacked Fraction Utilities (Use anywhere in steps/content)
   For division like a/b or (x×5)/18
   ---------------------------------------------------------
   HTML examples:
   <span class="mfrac"><span class="top">5</span><span class="bar"></span><span class="bottom">18</span></span>
   <span class="mslash">5/18</span>
   ========================================================= */

.mfrac{
  display:inline-grid;
  grid-template-rows:auto 2px auto;
  align-items:center;
  justify-items:center;
  vertical-align:middle;
  padding:0 4px;
  line-height:1.1;
}
.mfrac .top,
.mfrac .bottom{
  font-family:var(--hand);
  color:var(--ink);
  font-weight:900;
  font-size:1em;
  padding:0 2px;
}
.mfrac .bar{
  width:100%;
  height:2px;
  background:var(--ink);
  border-radius:999px;
  opacity:.95;
}

/* Simple slash fraction (clean, no stacked look) */
.mslash{
  font-family:var(--hand);
  color:var(--ink);
  font-weight:900;
}

/* If used inside a token pill, keep it tight */
.stepBox .mono .mfrac{padding:0 2px;}
.stepBox .mono .mfrac .bar{height:2px;}

/* =========================================================
   NEW ADDITIONS: Header, Share Modal, Ad Blocks, SEO Sections, FAQ
   ========================================================= */

/* ── Header: improved background color — scoped to #siteHeader ONLY ── */
#siteHeader {
  background: linear-gradient(135deg, #0b2a5a 0%, #1a4090 50%, #0e3374 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
#siteHeader .topbar { padding: 14px 16px; }
#siteHeader.is-scrolled {
  background: linear-gradient(135deg, #091f45 0%, #15337a 100%) !important;
  box-shadow: 0 10px 36px rgba(2,6,23,.22) !important;
}
#siteHeader nav a { color: rgba(255,255,255,.78) !important; }
#siteHeader nav a:hover { color: #fff !important; background: rgba(255,255,255,.12) !important; border-color: rgba(255,255,255,.2) !important; }
#siteHeader .brand strong { color: #fff; font-size: 15px; }
#siteHeader .brand span { color: rgba(255,255,255,.65); }


/* ── Logo: white bg box, shows inline SVG ── */
.logo {
  width: 40px !important;
  height: 40px !important;
  background-color: #fff !important;
  background-image: none !important;
  border: 2px solid rgba(255,255,255,.4) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.22), 0 0 0 3px rgba(255,255,255,.08) !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: transform .25s ease !important;
}
.logo svg { display: block; flex-shrink: 0; }
#siteHeader.is-scrolled .logo { transform: translateY(-1px); }

/* ── Nav: always single-line across ALL screen sizes ── */
/* Base: two-row layout — brand row on top, nav row below */
#siteHeader .topbar {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 16px 8px;
}
#siteHeader .brand {
  flex-shrink: 0;
}
#siteHeader nav {
  margin-left: 0;
  width: 100%;
  justify-content: flex-start;
  gap: 2px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}
#siteHeader nav a {
  font-size: 12px;
  padding: 4px 10px;
}
/* ≤ 420px: tighten on small phones */
@media (max-width: 420px) {
  #siteHeader nav a {
    font-size: 11px;
    padding: 4px 7px;
  }
  .logo { width: 32px !important; height: 32px !important; }
  .logo svg { width: 18px; height: 18px; }
}
/* ≤ 340px: ultra-narrow */
@media (max-width: 340px) {
  #siteHeader nav a { padding: 3px 5px; font-size: 10.5px; }
}

/* ── kmh-ms-head: override any inherited header styles ── */
.kmh-ms-head {
  background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 100%) !important;
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  border-radius: 10px 10px 0 0;
  padding: 20px 18px 18px !important;
  margin: -16px -16px 16px -16px;
}
.kmh-ms-head h2 {
  color: #fff !important;
  font-size: clamp(1.05rem, 2.5vw, 1.35rem) !important;
  margin: 0 0 10px !important;
  line-height: 1.3 !important;
}
.kmh-ms-head .kmh-ms-sub {
  color: rgba(255,255,255,.88) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  margin: 0 0 12px !important;
}
.kmh-ms-head .kmh-ms-sub strong { color: #fff !important; }
.kmh-ms-head .kmh-ms-sub em { color: rgba(255,255,255,.72) !important; font-style: italic; }
.kmh-ms-head .kmh-ms-sub .mfrac .top,
.kmh-ms-head .kmh-ms-sub .mfrac .bottom { color: #fbbf24 !important; }
.kmh-ms-head .kmh-ms-sub .mfrac .bar { background: #fbbf24 !important; }
.kmh-ms-head .kmh-ms-cta {
  background: rgba(255,255,255,.14) !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 10px !important;
  margin: 0 !important;
}
.kmh-ms-head .kmh-ms-cta p { color: #fff !important; margin: 0 !important; }
.kmh-ms-head .kmh-ms-cta p strong { color: #fde68a !important; }

/* ── Ad Blocks ── */
.adbox {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: var(--max);
  margin: 14px auto;
  min-height: 90px;
  background: linear-gradient(135deg, #f8fafc, #eef2f7);
  border: 1px dashed rgba(37,99,235,.22);
  border-radius: var(--r16);
  position: relative;
  overflow: hidden;
}
.adbox::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(37,99,235,.03) 10px,
    rgba(37,99,235,.03) 20px
  );
}
.adbox__label {
  position: relative;
  z-index: 1;
  font-size: 12px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: .8px;
  text-transform: uppercase;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 6px 16px;
  background: #fff;
}
.adbox--top { min-height: 100px; }
.adbox--after-calc { margin: 12px 0; border-radius: var(--r16); }
.adbox--faq { margin: 20px auto; }
.adbox--footer { margin: 14px auto; }

/* ── Share Modal ── */
.share-modal-box {
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 440px;
  margin: 16px;
  box-shadow: 0 32px 80px rgba(2,6,23,.22), 0 0 0 1px rgba(229,231,235,.8);
  animation: modalPop .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalPop {
  from { transform: scale(.92) translateY(10px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}
.share-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.share-modal-title {
  font-size: 17px;
  font-weight: 900;
  color: var(--text);
  letter-spacing: -.2px;
}
.share-modal-close {
  border: 1px solid var(--line);
  background: #f8fbff;
  color: var(--muted);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease;
}
.share-modal-close:hover { background: #fee2e2; color: var(--bad); border-color: rgba(239,68,68,.3); }
.share-modal-sub {
  font-size: 13px;
  color: var(--muted2);
  margin: 0 0 20px;
  line-height: 1.5;
}
.share-btns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: transform .1s ease, box-shadow .2s ease, filter .15s ease;
}
.share-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.share-btn:active { transform: translateY(0); }
.share-wa { background: #25D366; color: #fff; border-color: #22c05e; }
.share-tw { background: #000; color: #fff; border-color: #333; }
.share-fb { background: #1877F2; color: #fff; border-color: #1565d8; }
.share-copy { background: linear-gradient(135deg, #f1f5f9, #e8eff8); color: var(--text); border-color: var(--line); }
.share-copied-msg {
  margin-top: 12px;
  padding: 10px 14px;
  background: rgba(16,185,129,.1);
  border: 1px solid rgba(16,185,129,.25);
  border-radius: 12px;
  color: #065f46;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
@media (max-width: 380px) {
  .share-btns-grid { grid-template-columns: 1fr; }
  .share-modal-box { padding: 20px 16px 18px; }
}

/* ── SEO Sections ── */
.seo-section { margin-top: 16px; }
.seo-section h2 { font-size: 20px; margin-bottom: 12px; }
.seo-section p { color: var(--muted); font-size: 14px; line-height: 1.7; }

/* Examples Grid */
.seo-examples-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 760px) { .seo-examples-grid { grid-template-columns: 1fr; } }

.seo-example-card {
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(160deg, #f8fbff, #fff);
  box-shadow: 0 4px 12px rgba(2,6,23,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.seo-example-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(2,6,23,.1); }
.seo-example-card h3 { font-size: 14px; margin: 10px 0 6px; font-weight: 900; }
.seo-example-card p { font-size: 13px; margin: 0 0 10px; }

.seo-example-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 900; color: #fff;
}
.seo-example-icon--blue  { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.seo-example-icon--green { background: linear-gradient(135deg, #10b981, #059669); }
.seo-example-icon--orange { background: linear-gradient(135deg, #f59e0b, #d97706); }

.seo-example-formula {
  font-family: monospace;
  font-size: 13px;
  padding: 8px 12px;
  background: rgba(37,99,235,.06);
  border: 1px solid rgba(37,99,235,.13);
  border-radius: 10px;
  color: var(--text);
}

/* SEO Reference Table */
.seo-table-wrap {
  overflow-x: auto;
  margin: 14px 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(229,231,235,.9);
}
.seo-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.seo-ref-table th {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  letter-spacing: .3px;
}
.seo-ref-table td {
  padding: 11px 16px;
  text-align: center;
  border-bottom: 1px solid #f1f5f9;
  font-weight: 700;
  color: var(--text);
}
.seo-ref-table tbody tr:nth-child(odd) { background: #f8fafc; }
.seo-ref-table tbody tr:nth-child(even) { background: #fff; }
.seo-ref-table tbody tr:hover { background: #eef2ff; }
.seo-ref-table tbody tr:last-child td { border-bottom: none; }
.seo-table-note {
  font-size: 13px !important;
  background: #fff7ed;
  border: 1px solid #ffedd5;
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 10px !important;
  color: var(--text) !important;
}

/* Applications Grid */
.seo-apps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px;
}
@media (max-width: 580px) { .seo-apps-grid { grid-template-columns: 1fr; } }
.seo-app-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid rgba(229,231,235,.9);
  border-radius: 14px;
  background: #fafbfd;
}
.seo-app-icon { font-size: 24px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.seo-app-item strong { display: block; font-size: 13px; font-weight: 900; margin-bottom: 4px; color: var(--text); }
.seo-app-item p { font-size: 12.5px !important; margin: 0 !important; color: var(--muted) !important; line-height: 1.55 !important; }

/* Exam Tricks Grid */
.seo-tricks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 16px;
}
@media (max-width: 760px) { .seo-tricks-grid { grid-template-columns: 1fr; } }
.seo-trick-card {
  border: 1px solid rgba(139,92,246,.18);
  border-radius: 16px;
  padding: 16px;
  background: linear-gradient(160deg, #faf5ff, #fff);
  position: relative;
}
.seo-trick-badge {
  display: inline-block;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: .4px;
}
.seo-trick-card h3 { font-size: 13.5px; font-weight: 900; margin: 0 0 8px; color: var(--text); }
.seo-trick-card p { font-size: 13px !important; color: var(--muted) !important; margin: 0 0 10px !important; }
.seo-trick-example {
  font-family: monospace;
  font-size: 12.5px;
  padding: 8px 12px;
  background: rgba(139,92,246,.07);
  border: 1px solid rgba(139,92,246,.15);
  border-radius: 10px;
  color: #4c1d95;
}

/* ── FAQ Section ── */
.faq-intro { margin-bottom: 16px !important; }
.faq-grid { display: grid; gap: 10px; }
.faq-item {
  border: 1px solid rgba(229,231,235,.95);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff, #fafbfd);
  overflow: hidden;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.faq-item:hover { box-shadow: 0 4px 14px rgba(2,6,23,.08); border-color: rgba(37,99,235,.2); }
.faq-item summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 800;
  font-size: 14px;
  color: var(--text);
  list-style: none;
  user-select: none;
  transition: background .15s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  font-size: 18px;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item[open] { border-color: rgba(37,99,235,.25); box-shadow: 0 4px 18px rgba(37,99,235,.08); }
.faq-q-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}
.faq-answer {
  padding: 0 16px 14px 50px;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}
.faq-answer p { color: var(--muted); font-size: 13.5px; margin: 0 0 8px; }
.faq-answer ul { padding-left: 18px; margin: 8px 0; }
.faq-answer li { margin-bottom: 4px; color: var(--muted); font-size: 13.5px; }
.faq-answer code {
  font-family: monospace;
  background: rgba(37,99,235,.08);
  color: var(--brand);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 13px;
}
.faq-note {
  margin-top: 18px !important;
  padding: 12px 16px;
  background: #f0f9ff;
  border: 1px solid rgba(14,165,233,.2);
  border-radius: 12px;
  font-size: 13px !important;
  color: #0369a1 !important;
}

@media (max-width: 760px) {
  .faq-answer { padding-left: 16px; }
}

/* =========================================================
   SEO Intro Paragraph (after calculator result)
   ========================================================= */
.seo-intro-para {
  margin: 16px 18px 0;
  padding: 16px 18px;
  background: linear-gradient(135deg, #f0f6ff 0%, #f8fbff 60%, #fff 100%);
  border: 1px solid rgba(37,99,235,.14);
  border-left: 4px solid var(--brand);
  border-radius: 0 var(--r14) var(--r14) 0;
}
.seo-intro-para p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  color: var(--muted) !important;
}
.seo-intro-para strong {
  color: var(--text);
  font-weight: 800;
}

/* =========================================================
   ASIDE: Only 2 widgets — TSD Triangle + Unit Converter
   On desktop: sticky right column
   On mobile (≤980px): show AFTER article, full width
   ========================================================= */

/* Desktop: aside stays as right column (already works via .hero grid) */

/* Mobile: move aside AFTER the article card */
@media (max-width: 980px) {
  .hero {
    display: flex;
    flex-direction: column;
  }
  /* article comes first */
  .hero > article { order: 1; }
  /* aside after-calc ad comes second */
  .hero > .adbox--after-calc { order: 2; }
  /* aside widgets come AFTER the article */
  .hero > aside {
    order: 3;
    position: static !important;
    /* On mobile, show as a 2-col row for the 2 widgets */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (max-width: 560px) {
  .hero > aside {
    grid-template-columns: 1fr;
  }
}

/* Override: ensure .hero uses flex on mobile for order control */
@media (max-width: 980px) {
  .hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px;
  }
  .hero > article { order: 1; width: 100%; }
  .hero > .adbox--after-calc { order: 2; width: 100%; }
  .hero > aside.side {
    order: 3;
    width: 100%;
    position: static !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}
@media (max-width: 560px) {
  .hero > aside.side {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================
   ASIDE FIX — Clean 2-column grid: article | aside
   No extra elements inside .hero breaking the grid
   ========================================================= */

/* Desktop: 2-col grid */
.hero {
  display: grid !important;
  grid-template-columns: 1fr 300px !important;
  gap: 18px;
  align-items: start;
}

/* Mobile ≤980px: article first, then aside below */
@media (max-width: 980px) {
  .hero {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }
  /* aside stacks as 2 side-by-side cards below article */
  .hero > aside.side {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
    position: static !important;
  }
}

@media (max-width: 560px) {
  .hero > aside.side {
    grid-template-columns: 1fr !important;
  }
}

/* Ensure aside stays sticky on desktop */
@media (min-width: 981px) {
  .hero > aside.side {
    position: sticky;
    top: 70px;
    align-self: start;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

/* =========================================================
   BUTTON IMPROVEMENTS — Icons + Colors + Readability
   ========================================================= */



/* Calculate button — keep primary blue, add icon spacing */
#calcBtn {
  font-size: 15px !important;
  padding: 12px 20px !important;
  gap: 8px !important;
  letter-spacing: .1px;
}
#calcBtn svg { flex-shrink: 0; }

/* Reset button — warm orange tint for clear contrast */
.btn-reset {
  background: linear-gradient(135deg, #fff7ed, #ffedd5) !important;
  border-color: rgba(234,88,12,.25) !important;
  color: #c2410c !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 11px 16px !important;
  gap: 7px !important;
}
.btn-reset:hover {
  background: linear-gradient(135deg, #ffedd5, #fed7aa) !important;
  border-color: rgba(234,88,12,.45) !important;
  filter: none !important;
  box-shadow: 0 8px 20px rgba(234,88,12,.15) !important;
}
.btn-reset svg { flex-shrink: 0; color: #ea580c; }

/* Print button — neutral teal tint */
.btn-print {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7) !important;
  border-color: rgba(22,163,74,.22) !important;
  color: #15803d !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 11px 16px !important;
  gap: 7px !important;
}
.btn-print:hover {
  background: linear-gradient(135deg, #dcfce7, #bbf7d0) !important;
  border-color: rgba(22,163,74,.40) !important;
  filter: none !important;
  box-shadow: 0 8px 20px rgba(22,163,74,.14) !important;
}
.btn-print svg { flex-shrink: 0; color: #16a34a; }

/* Share button inside calculator — indigo/violet */
.btn-share-calc {
  background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
  border-color: rgba(37,99,235,.22) !important;
  color: #1d4ed8 !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 11px 16px !important;
  gap: 7px !important;
}
.btn-share-calc:hover {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
  border-color: rgba(37,99,235,.40) !important;
  filter: none !important;
  box-shadow: 0 8px 20px rgba(37,99,235,.15) !important;
}
.btn-share-calc svg { flex-shrink: 0; color: #2563eb; }

/* Actions row: wrap nicely on all screen sizes */
.actionsBelowTime {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 0 18px 18px !important;
  align-items: center !important;
}

/* On mobile, stack share below the other three */
@media (max-width: 600px) {
  #calcBtn { flex: 1 1 100%; justify-content: center; }
  .btn-reset, .btn-print, .btn-share-calc { flex: 1 1 calc(33% - 8px); justify-content: center; }
}
@media (max-width: 420px) {
  .btn-reset, .btn-print, .btn-share-calc { flex: 1 1 100%; justify-content: center; }
}

/* ===== TABLE OF CONTENTS ===== */
.toc {
  background: #f0f4ff;
  border: 1px solid #c7d7fc;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1rem 0 1.5rem;
  font-size: 0.92rem;
}
.toc-title {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #1e3a8a;
  margin: 0 0 .5rem;
}
.toc-list {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .75rem;
  list-style: disc;
}
.toc-list li { flex: 1 1 140px; }
.toc-list a { color: #2563eb; text-decoration: none; }
.toc-list a:hover { text-decoration: underline; }

/* ===== RELATED CALCULATORS ===== */
.related-calc-list {
  padding-left: 1.25rem;
  margin: .5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.5rem;
}
.related-calc-list li { flex: 1 1 200px; }
.related-calc-list a { color: #2563eb; text-decoration: none; }
.related-calc-list a:hover { text-decoration: underline; }

/* ===== SCROLL PROGRESS BAR ===== */
#scrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #2563eb, #10b981);
  z-index: 99999;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ===== FORMULA IMAGE WRAP ===== */
.formula-img-wrap {
  margin: 1.25rem 0 0;
  text-align: center;
}
.formula-img-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}
.formula-img-wrap figcaption {
  font-size: 0.82rem;
  color: #6b7280;
  margin-top: 0.4rem;
}

/* ===== EXAMPLES EXTRA ===== */
.examples-extra {
  margin-top: 1.75rem;
  border-top: 1px solid #e5e7eb;
  padding-top: 1.25rem;
}
.examples-extra h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1e3a8a;
  margin: 1.25rem 0 0.35rem;
}
.examples-extra h3:first-child { margin-top: 0; }
.example-sol {
  background: #f0f9ff;
  border-left: 3px solid #2563eb;
  padding: 0.45rem 0.75rem;
  border-radius: 0 6px 6px 0;
  margin: 0.3rem 0;
  font-size: 0.93rem;
}
.example-note {
  background: #fff7ed;
  border-left: 3px solid #f59e0b;
  padding: 0.45rem 0.75rem;
  border-radius: 0 6px 6px 0;
  margin: 0.3rem 0;
  font-size: 0.9rem;
  color: #92400e;
}

/* ===== COMMON MISTAKES GRID ===== */
.mistakes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.mistake-item {
  background: #fff;
  border: 1px solid #fca5a5;
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.mistake-label {
  font-size: 0.75rem;
  font-weight: 700;
  color: #dc2626;
  letter-spacing: .04em;
  margin-bottom: 0.35rem;
}
.mistake-item h3 {
  font-size: 0.97rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.4rem;
}
.mistake-item p {
  font-size: 0.88rem;
  color: #4b5563;
  margin: 0 0 0.5rem;
}
.mistake-fix {
  background: #f0fdf4;
  border-left: 3px solid #16a34a;
  padding: 0.4rem 0.65rem;
  border-radius: 0 6px 6px 0;
  font-size: 0.86rem;
  color: #166534;
}

/* ===== PEOPLE ALSO ASK GRID ===== */
.paa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.paa-item {
  background: #f8faff;
  border: 1px solid #dbeafe;
  border-radius: 10px;
  padding: 1rem 1.1rem;
}
.paa-item h3 {
  font-size: 0.96rem;
  font-weight: 700;
  color: #1e3a8a;
  margin: 0 0 0.45rem;
}
.paa-item p {
  font-size: 0.88rem;
  color: #374151;
  margin: 0;
  line-height: 1.6;
}


/* ═══════════════════════════════════════════════════
   CALC PAGINATION NAV
   ═══════════════════════════════════════════════════ */
.calc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 28px 16px 12px;
  flex-wrap: wrap;
}

.calc-page-numbers {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Number buttons */
.calc-page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brandSoft);
  text-decoration: none;
  border: none;
  transition: background .18s, color .18s, box-shadow .15s, transform .12s;
  flex-shrink: 0;
}
.calc-page-num:hover {
  background: var(--brandSoft2);
  color: var(--brand2);
  transform: translateY(-1px);
}
.calc-page-num.active {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 14px rgba(37,99,235,.35);
  pointer-events: none;
  cursor: default;
  transform: none;
}

/* Prev / Next buttons */
.calc-page-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 18px;
  height: 44px;
  border-radius: 12px;
  font-size: .9rem;
  font-weight: 700;
  color: var(--brand);
  background: var(--brandSoft);
  text-decoration: none;
  border: none;
  white-space: nowrap;
  transition: background .18s, color .18s, box-shadow .15s, transform .12s;
  flex-shrink: 0;
}
.calc-page-btn:hover {
  background: var(--brandSoft2);
  color: var(--brand2);
  transform: translateY(-1px);
}
.calc-page-btn svg {
  flex-shrink: 0;
}

/* ── Responsive breakpoints ── */

/* ≤ 520px — hide Prev/Next labels, tighten gaps */
@media (max-width: 520px) {
  .calc-pagination {
    gap: 5px;
    padding: 22px 10px 10px;
  }
  .calc-page-numbers {
    gap: 4px;
  }
  .calc-page-btn span {
    display: none;
  }
  .calc-page-btn {
    padding: 0 12px;
    height: 38px;
  }
  .calc-page-num {
    width: 36px;
    height: 38px;
    font-size: .82rem;
    border-radius: 10px;
  }
}

/* ≤ 380px — even tighter */
@media (max-width: 380px) {
  .calc-page-numbers {
    gap: 3px;
  }
  .calc-page-num {
    width: 32px;
    height: 34px;
    font-size: .78rem;
    border-radius: 8px;
  }
  .calc-page-btn {
    padding: 0 9px;
    height: 34px;
    border-radius: 8px;
  }
}

/* ≤ 360px — very small phones */
@media (max-width: 360px) {
  .calc-pagination {
    gap: 4px;
    padding: 18px 8px 8px;
  }
  .calc-page-numbers {
    gap: 2px;
  }
  .calc-page-num {
    width: 28px;
    height: 30px;
    font-size: .72rem;
    border-radius: 7px;
  }
  .calc-page-btn {
    padding: 0 8px;
    height: 30px;
    border-radius: 7px;
  }
}

/* ≤ 340px — absolute minimum */
@media (max-width: 340px) {
  .calc-page-num {
    width: 26px;
    height: 28px;
    font-size: .68rem;
    border-radius: 6px;
  }
  .calc-page-btn {
    padding: 0 6px;
    height: 24px;
    border-radius: 5px;
  }
  .calc-page-btn svg {
    width: 13px;
    height: 13px;
  }
}