/* ═════════════════════════════════════════════════════════════════════
   CALCHUB PRO – CORE DESIGN SYSTEM STYLESHEET
   Sleek Dark Modern Calculator Aesthetic with Red/Pink Accents
   https://calchubpro.in/
   ═════════════════════════════════════════════════════════════════════ */

/* ── Reset & Base ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ── Brief-requested alias tokens ──────────────────────────────
   Same values as the tokens above, exposed under the names asked
   for in the design brief, so either naming convention works from
   any future stylesheet or component. ──────────────────────────── */
:root {
  --background: var(--bg);
  --surface: var(--card-bg);
  --surface-hover: var(--card-hover);
  --border-token: var(--border);
  --text-token: var(--text);
  --muted-token: var(--muted);
  --primary: var(--red);
  --accent: var(--grad-electric);
  --radius: var(--r);
  --shadow: var(--sh-md);
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--bg);
  color: var(--text);
  line-height: 1.65;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

button, input, select, textarea {
  font-family: inherit;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: rgba(224, 41, 62, 0.55);
  border-radius: 4px;
}

/* ── Design Tokens ── */
/* ═══════════════════════════════════════════════════════════════
   DESIGN SYSTEM TOKENS  —  single source of truth for every page
   Premium deep-navy surface · CalcHub Pro red brand · electric
   blue/violet accent gradient reserved for primary CTAs only.
   ═══════════════════════════════════════════════════════════════ */
:root {
  /* Brand — CalcHub Pro red (unchanged across every redesign) */
  --red: #d81f35;
  --red2: #b81729;
  --red-dim: rgba(216, 31, 53, 0.08);
  --red-glow: rgba(216, 31, 53, 0.18);

  /* A single restrained blue, used sparingly for links + one category */
  --sky: #2563a8;
  --teal: #157a6e;
  --amber: #b7791f;
  --purple: #6d4fa3;
  --indigo: #3a4a6b;

  /* Surfaces — warm off-white, clean white cards */
  --bg: #f7f5f1;
  --bg2: #efece6;
  --bg3: #e7e3db;
  --card-bg: #ffffff;
  --card-hover: #ffffff;

  /* "Glass" is now a soft neutral tint on white/off-white, not a dark blur */
  --glass: rgba(20, 18, 15, 0.035);
  --glass2: rgba(20, 18, 15, 0.06);
  --border: rgba(20, 18, 15, 0.10);
  --border2: rgba(20, 18, 15, 0.16);

  /* Text — deep charcoal, not pure black */
  --text: #1c1a17;
  --muted: #5c574e;
  --dim: #8a8478;

  /* Feedback */
  --danger: #c0392b;
  --warn: #a8681a;
  --ok: #1f7a4d;
  --info: #2563a8;

  /* Light surfaces used by the Quick Calculate device screen */
  --lbg: #efece6;
  --llight: #ffffff;
  --lprimary: #1c1a17;
  --lmuted: #5c574e;
  --lborder: #e3ded4;
  --lacce: #d81f35;

  /* Single restrained brand gradient (two close reds — a sheen, not neon) */
  --grad-brand: linear-gradient(135deg, #d81f35 0%, #b81729 100%);
  --grad-electric: var(--grad-brand);
  --glow-blue: rgba(37, 99, 168, 0.06);
  --glow-violet: rgba(37, 99, 168, 0.05);

  /* Elevation — soft, close, no colored glow */
  --sh-sm: 0 1px 2px rgba(20, 18, 15, 0.05), 0 1px 3px rgba(20, 18, 15, 0.06);
  --sh-md: 0 4px 14px rgba(20, 18, 15, 0.08);
  --sh-lg: 0 12px 32px rgba(20, 18, 15, 0.12);

  /* Radii — 14–18px per brief */
  --r: 16px;
  --rs: 12px;
  --rx: 8px;

  /* Rhythm */
  --gut: max(20px, 5vw);
  --sec-y: clamp(48px, 6vw, 76px);
  --maxw: 1180px;

  /* Motion */
  --ease: cubic-bezier(.22, .68, .36, 1);
  --t-fast: 0.16s;
  --t: 0.2s;

  /* Type */
  --ff-head: 'Bricolage Grotesque', sans-serif;
  --ff-body: 'DM Sans', sans-serif;
  --ff-mono: 'Fira Code', monospace;
}

/* ── Sticky Navigation ── */
.nav {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 max(20px, 5vw);
  background: rgba(7, 10, 20, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  transition: all 0.3s ease;
}

.nav.stuck {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--ff-head);
  font-size: 1.22rem;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--text);
  flex-shrink: 0;
}

.logo-mark {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--red), #9e0010);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  box-shadow: 0 4px 16px var(--red-glow);
  flex-shrink: 0;
  overflow: hidden;
}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.logo-text .hi {
  color: var(--red);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  margin-right: 18px;
  list-style: none;
}

.nav-links a {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 50px;
  transition: all 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
  background: var(--glass2);
}

.nav-btn {
  background: var(--red);
  color: #fff;
  padding: 9px 22px;
  border-radius: 50px;
  font-size: 0.88rem;
  font-weight: 700;
  border: none;
  box-shadow: 0 4px 18px var(--red-glow);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.22s ease;
}

.nav-btn:hover {
  background: #c9182c;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px var(--red-glow);
}

.hbg {
  display: none;
  flex-direction: column;
  gap: 5.5px;
  background: none;
  border: none;
  padding: 6px;
  margin-left: auto;
  cursor: pointer;
}

.hbg span {
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  display: block;
  transition: all 0.3s ease;
}

.hbg.open span:nth-child(1) {
  transform: translateY(7.5px) rotate(45deg);
}
.hbg.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hbg.open span:nth-child(3) {
  transform: translateY(-7.5px) rotate(-45deg);
}

.nav-drawer {
  position: fixed;
  inset: 0;
  background: rgba(7, 9, 15, 0.98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  z-index: 850;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav-drawer.open {
  opacity: 1;
  pointer-events: all;
}

.nav-drawer a {
  color: #fff;
  font-family: var(--ff-head);
  font-size: 1.5rem;
  font-weight: 700;
  padding: 10px 32px;
  border-radius: 14px;
  transition: all 0.2s ease;
  letter-spacing: -0.3px;
}

.nav-drawer a:hover {
  color: var(--red);
  background: var(--red-dim);
}

.nav-drawer .dcta {
  background: var(--red);
  color: #fff;
  margin-top: 14px;
  font-size: 1.05rem;
  padding: 12px 36px;
  box-shadow: 0 8px 24px var(--red-glow);
}

/* ── Breadcrumb Navigation ── */
.breadcrumbs {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px max(20px, 5vw) 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--dim);
}

.breadcrumbs a {
  color: var(--muted);
  transition: color 0.2s;
}

.breadcrumbs a:hover {
  color: var(--text);
}

.breadcrumbs .sep {
  opacity: 0.5;
}

.breadcrumbs .current {
  color: var(--red2);
  font-weight: 600;
}

/* ── Calculator Hero ── */
.calc-hero {
  padding: 36px max(20px, 5vw) 24px;
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
}

.badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--red-dim);
  border: 1px solid rgba(224, 41, 62, 0.25);
  color: #ff8094;
  padding: 5px 15px;
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.calc-hero h1 {
  font-family: var(--ff-head);
  font-size: clamp(1.9rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.12;
  margin-bottom: 12px;
}

.calc-hero h1 em {
  color: var(--red);
  font-style: normal;
}

.calc-hero p {
  color: var(--muted);
  font-size: clamp(0.92rem, 2vw, 1.05rem);
  max-width: 660px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── Dedicated Calculator App Container ── */
.calc-main-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 max(20px, 5vw) 64px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: start;
}

.calc-main-wrap.single-col {
  grid-template-columns: 1fr;
  max-width: 780px;
}

/* ── Calculator Interactive Card ── */
.calc-box {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 32px 28px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  position: relative;
}

.calc-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}

.calc-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.calc-box-title {
  font-family: var(--ff-head);
  font-size: 1.25rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 9px;
}

.calc-box-reset {
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.calc-box-reset:hover {
  background: var(--red-dim);
  border-color: rgba(224, 41, 62, 0.3);
  color: #fff;
}

/* ── Form Controls ── */
.field {
  margin-bottom: 20px;
}

.field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.field-hint {
  font-size: 0.74rem;
  color: var(--dim);
  font-weight: 400;
}

.input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.input-affix {
  position: absolute;
  color: var(--dim);
  font-family: var(--ff-mono);
  font-size: 0.88rem;
  font-weight: 600;
  pointer-events: none;
}

.input-prefix {
  left: 14px;
}

.input-suffix {
  right: 14px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--rx);
  color: var(--text);
  font-size: 0.96rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.field input.has-prefix {
  padding-left: 32px;
}

.field input.has-suffix {
  padding-right: 48px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 3px var(--red-dim);
}

.field input.bad {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.ferr {
  display: none;
  color: var(--danger);
  font-size: 0.74rem;
  margin-top: 5px;
  font-weight: 500;
}

.ferr.show {
  display: block;
}

.calc-btn-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin-top: 24px;
}

.calc-submit {
  width: 100%;
  padding: 14px 20px;
  background: var(--red);
  color: #fff;
  border: none;
  border-radius: var(--rx);
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.22s ease;
  box-shadow: 0 6px 20px var(--red-glow);
}

.calc-submit:hover {
  background: #c9182c;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px var(--red-glow);
}

.calc-submit:active {
  transform: scale(0.98);
}

.calc-reset-btn {
  padding: 14px 20px;
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: var(--rx);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.calc-reset-btn:hover {
  background: var(--glass2);
  color: var(--text);
}

/* ── Result Cards ── */
.res-card {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 32px 28px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  position: relative;
}

.res-banner {
  background: linear-gradient(135deg, rgba(224, 41, 62, 0.14), rgba(224, 41, 62, 0.04));
  border: 1px solid rgba(224, 41, 62, 0.25);
  border-radius: var(--rs);
  padding: 20px;
  text-align: center;
  margin-bottom: 22px;
}

.res-banner-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 4px;
}

.res-banner-value {
  font-family: var(--ff-mono);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.5px;
}

.res-banner-value.highlight {
  color: #ff8094;
}

.res-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rrow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--rx);
  gap: 14px;
}

.rrow .rl {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}

.rrow .rv {
  font-family: var(--ff-mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.3px;
  text-align: right;
}

/* ── Content & Guides Sections ── */
.article-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 48px max(20px, 5vw) 64px;
}

.article-section h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.45rem, 3.5vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 38px 0 14px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
}

.article-section h2::before {
  content: '';
  width: 3px;
  height: 24px;
  background: var(--red);
  border-radius: 2px;
  flex-shrink: 0;
}

.article-section h3 {
  font-family: var(--ff-head);
  font-size: 1.2rem;
  font-weight: 700;
  margin: 26px 0 10px;
  color: var(--text);
}

.article-section p {
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.84;
  margin-bottom: 16px;
}

.article-section ul,
.article-section ol {
  margin: 0 0 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.article-section li {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.76;
}

.article-section strong {
  color: var(--text);
}

/* ── Formula Box ── */
.formula-box {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-left: 3px solid var(--sky);
  border-radius: var(--rs);
  padding: 20px 22px;
  margin: 22px 0;
  font-family: var(--ff-mono);
  font-size: 0.96rem;
  color: var(--sky);
  letter-spacing: 0.3px;
  overflow-x: auto;
}

.formula-box span {
  display: block;
  font-family: var(--ff-body);
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 8px;
  letter-spacing: 0;
  line-height: 1.6;
}

/* ── Highlight Boxes ── */
.highlight-box {
  border-radius: var(--rs);
  padding: 18px 22px;
  margin: 20px 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--red);
  background: rgba(224, 41, 62, 0.05);
}

.highlight-box.info {
  border-left-color: var(--sky);
  background: rgba(56, 189, 248, 0.05);
}

.highlight-box.ok {
  border-left-color: var(--teal);
  background: rgba(6, 214, 160, 0.05);
}

.highlight-box.warn {
  border-left-color: var(--amber);
  background: rgba(245, 158, 11, 0.05);
}

.highlight-box p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.74;
}

.highlight-box strong {
  color: var(--text);
}

/* ── Worked Example Box ── */
.example-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 24px;
  margin: 22px 0;
}

.example-card h4 {
  font-family: var(--ff-head);
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--text);
}

.example-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
  padding-left: 18px;
}

.example-steps li {
  font-size: 0.88rem;
  color: var(--muted);
}

/* ── Comparison Tables ── */
.table-wrap {
  overflow-x: auto;
  margin: 22px 0;
  border-radius: var(--rs);
  border: 1px solid var(--border);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  text-align: left;
}

.data-table th {
  background: var(--bg3);
  color: var(--text);
  font-family: var(--ff-head);
  font-weight: 700;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border2);
  white-space: nowrap;
}

.data-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  vertical-align: middle;
}

.data-table tr:last-child td {
  border-bottom: none;
}

.data-table tr:hover td {
  background: var(--glass);
  color: var(--text);
}

/* ── Grid Cards for Use Cases ── */
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 24px 0;
}

.uc-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 20px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.uc-card:hover {
  transform: translateY(-3px);
  border-color: var(--border2);
}

.uc-icon {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.uc-title {
  font-family: var(--ff-head);
  font-size: 0.98rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.uc-desc {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* ── FAQ Accordion ── */
.faq-wrap {
  margin: 32px 0;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-q {
  width: 100%;
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 18px 0;
  font-family: var(--ff-head);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 0.2s;
}

.faq-q:hover {
  color: var(--red2);
}

.faq-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--glass);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  flex-shrink: 0;
  transition: all 0.25s ease;
  color: var(--muted);
}

.faq-item.open .faq-icon {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
  transform: rotate(45deg);
}

.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.faq-item.open .faq-a {
  max-height: 400px;
}

.faq-a p {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.8;
  padding-bottom: 18px;
  margin: 0;
}

/* ── Related Calculators Grid ── */
.related-section {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 56px max(20px, 5vw);
}

.related-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.related-hdr {
  text-align: center;
  margin-bottom: 36px;
}

.related-hdr h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  margin-bottom: 6px;
}

.related-hdr p {
  color: var(--muted);
  font-size: 0.9rem;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.rel-card {
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--rs);
  padding: 20px;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.rel-card:hover {
  background: var(--glass2);
  border-color: rgba(224, 41, 62, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.rel-ico {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.rel-name {
  font-family: var(--ff-head);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text);
}

.rel-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 12px;
  flex: 1;
}

.rel-arrow {
  color: var(--red2);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── AdSense Responsive Slots ── */
.ad-slot-wrap {
  width: 100%;
  max-width: 970px;
  margin: 28px auto;
  padding: 12px;
  border-radius: var(--rs);
  background: rgba(255, 255, 255, 0.015);
  border: 1px dashed var(--border);
  text-align: center;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ad-label {
  font-size: 0.68rem;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

/* ── Disclaimer Box ── */
.legal-disc {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-left: 3px solid #ef4444;
  border-radius: var(--rs);
  padding: 18px 22px;
  margin: 28px 0;
}

.legal-disc h4 {
  font-family: var(--ff-head);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fca5a5;
  margin-bottom: 6px;
}

.legal-disc p {
  color: rgba(240, 242, 248, 0.7);
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 0;
}

/* ── Footer ── */
footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 56px max(20px, 5vw) 26px;
  margin-top: auto;
}

.foot-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.foot-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 36px;
  margin-bottom: 40px;
}

.foot-brand-desc {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.75;
  margin: 14px 0 18px;
  max-width: 280px;
}

.foot-col h4 {
  font-family: var(--ff-head);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--text);
  margin-bottom: 15px;
}

.foot-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.foot-col a {
  color: var(--muted);
  font-size: 0.84rem;
  transition: color 0.2s;
}

.foot-col a:hover {
  color: var(--text);
}

.foot-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.foot-copy {
  color: var(--dim);
  font-size: 0.78rem;
}

.foot-status {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--dim);
  font-size: 0.74rem;
}

.status-dot {
  width: 7px;
  height: 7px;
  background: var(--teal);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(6, 214, 160, 0.6);
}

/* ── Responsive Rules ── */
@media (max-width: 980px) {
  .calc-main-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .use-case-grid {
    grid-template-columns: 1fr;
  }
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

@media (max-width: 640px) {
  .nav-links, .nav-btn {
    display: none;
  }
  .hbg {
    display: flex;
  }
  .calc-box, .res-card {
    padding: 24px 18px;
  }
  .related-grid {
    grid-template-columns: 1fr;
  }
  .foot-top {
    grid-template-columns: 1fr;
  }
  .foot-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
  .calc-btn-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 440px) {
  .calc-hero h1 {
    font-size: 1.8rem;
  }
  .res-banner-value {
    font-size: 1.7rem;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   HOMEPAGE & SHARED COMPONENTS
   Restored after the repo-root migration. Defines the selectors used by
   index.html / about.html / contact.html that were absent from this file:
   light-surface tokens, cookie banner, hero, category pills, stats band,
   tools directory, quick multi-calculator, why/preview, FAQ + CTA wrappers.
   No existing rule above this line was modified.
   ═════════════════════════════════════════════════════════════════════ */

body > main {
  flex: 1 0 auto;
}

/* ── Cookie Consent Banner ── */
#cookie-banner {
  position: fixed;
  left: max(16px, 3vw);
  right: max(16px, 3vw);
  bottom: 16px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 20px;
  background: rgba(12, 15, 26, 0.97);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transform: translateY(160%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.45s cubic-bezier(.16,.84,.44,1), opacity 0.35s ease, visibility 0.35s;
}
#cookie-banner.show {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}
.ck-ico {
  font-size: 1.7rem;
  flex-shrink: 0;
  line-height: 1;
}
.ck-text p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
}
.ck-text strong {
  color: var(--text);
}
.ck-text a {
  color: var(--sky);
  text-decoration: underline;
}
.ck-btns {
  display: flex;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
.ck-accept,
.ck-decline {
  padding: 9px 20px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.22s ease;
  white-space: nowrap;
}
.ck-accept {
  background: linear-gradient(135deg, var(--red), var(--red2));
  color: #fff;
  box-shadow: 0 6px 18px var(--red-glow);
}
.ck-accept:hover {
  transform: translateY(-1px);
}
.ck-decline {
  background: var(--glass2);
  border-color: var(--border);
  color: var(--muted);
}
.ck-decline:hover {
  color: var(--text);
  border-color: var(--border2);
}

/* ── Shared Section Headings ── */
.section-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px;
  margin-bottom: 14px;
  background: var(--red-dim);
  border: 1px solid rgba(224, 41, 62, 0.25);
  border-radius: 50px;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--red2);
}
.sec-h {
  font-family: var(--ff-head);
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.18;
  color: var(--text);
  margin-bottom: 12px;
}
.sec-h em {
  font-style: normal;
  color: var(--red2);
}
.sec-p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.75;
  max-width: 640px;
  margin-bottom: 8px;
}

/* ── Hero ── */
.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 72px max(20px, 5vw) 64px;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hg1, .hg2, .hg3 {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
}
.hg1 {
  width: 520px; height: 520px;
  top: -140px; left: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(224,41,62,0.35), transparent 70%);
}
.hg2 {
  width: 420px; height: 420px;
  bottom: -120px; left: -80px;
  background: radial-gradient(circle, rgba(56,189,248,0.22), transparent 70%);
}
.hg3 {
  width: 380px; height: 380px;
  bottom: -100px; right: -60px;
  background: radial-gradient(circle, rgba(167,139,250,0.2), transparent 70%);
}
.hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 35%, #000 25%, transparent 72%);
}
.orb {
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--glass);
  animation: orbFloat 18s ease-in-out infinite;
}
.orb1 { width: 70px; height: 70px; top: 18%; left: 8%; }
.orb2 { width: 46px; height: 46px; top: 62%; right: 11%; animation-delay: -6s; }
.orb3 { width: 96px; height: 96px; bottom: 12%; left: 16%; animation-delay: -11s; }
@keyframes orbFloat {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-22px) }
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 7px 17px;
  margin-bottom: 22px;
  background: var(--glass2);
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: livePulse 2s infinite;
  flex-shrink: 0;
}
@keyframes livePulse {
  70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0) }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0) }
}

.hero-h1 {
  font-family: var(--ff-head);
  font-size: clamp(2.1rem, 6.4vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -1.8px;
  line-height: 1.08;
  max-width: 16ch;
  margin: 0 auto 18px;
  text-wrap: balance;
}
.hero-h1 em {
  font-style: normal;
  color: var(--red2);
}
.hero-h1 .acc {
  display: inline-block;
  min-height: 1.1em;
  background: linear-gradient(120deg, var(--red2), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.typed-word {
  border-right: 3px solid var(--red2);
  padding-right: 4px;
  animation: caret 0.85s step-end infinite;
}
@keyframes caret {
  50% { border-color: transparent }
}

.hero-p {
  color: var(--muted);
  font-size: clamp(0.95rem, 2vw, 1.08rem);
  line-height: 1.75;
  max-width: 620px;
  margin: 0 auto 30px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 13px;
  margin-bottom: 34px;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(135deg, var(--red), var(--red2));
  color: #fff;
  font-family: var(--ff-body);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 30px var(--red-glow);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px var(--red-glow);
}
.hero-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 50px;
  background: var(--glass2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.22s ease;
}
.hero-ghost:hover {
  background: var(--card-hover);
  transform: translateY(-2px);
}

/* ── Category Filter Pills ── */
.hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 820px;
}
.pill {
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--glass);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--ff-body);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
}
.pill:hover {
  color: var(--text);
  border-color: var(--border2);
  background: var(--glass2);
}
.pill.ap {
  background: linear-gradient(135deg, var(--red), var(--red2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px var(--red-glow);
}

/* ── Stats Band ── */
.stats-band {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 32px max(20px, 5vw);
}
.stats-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.stat-n {
  display: block;
  font-family: var(--ff-head);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
  line-height: 1.1;
}
.stat-n .r {
  color: var(--red2);
}
.stat-l {
  display: block;
  margin-top: 4px;
  font-size: 0.73rem;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Calculator Directory ── */
.tools-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px max(20px, 5vw);
}
.tools-hdr {
  text-align: center;
  margin-bottom: 40px;
}
.tools-hdr .sec-p {
  margin-left: auto;
  margin-right: auto;
}
.tgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
}
.tc {
  position: relative;
  display: block;
  padding: 26px 22px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.tc:hover {
  transform: translateY(-5px);
  background: var(--card-hover);
  border-color: rgba(224, 41, 62, 0.4);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.45);
}
.tc-arr {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 1rem;
  color: var(--dim);
  transition: color 0.25s ease, transform 0.25s ease;
}
.tc:hover .tc-arr {
  color: var(--red2);
  transform: translate(3px, -3px);
}
.tc-ico {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
  border-radius: var(--rs);
  background: var(--glass2);
  border: 1px solid var(--border);
  font-size: 1.4rem;
}
.tc-name {
  font-family: var(--ff-head);
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
}
.tc-desc {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.65;
  margin-bottom: 14px;
}
.tc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tc-tag {
  padding: 4px 10px;
  border-radius: 50px;
  background: var(--glass);
  border: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--dim);
}

/* ── Quick Multi-Calculator Widget ── */
#calc-zone {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 64px max(20px, 5vw) 72px;
}
.calc-head {
  max-width: 700px;
  margin: 0 auto 32px;
  text-align: center;
}
.calc-head h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.6rem, 3.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--text);
  margin-bottom: 10px;
}
.calc-head p {
  color: var(--muted);
  font-size: 0.94rem;
}
.calc-wrap {
  max-width: 880px;
  margin: 0 auto;
  background: var(--llight);
  border: 1px solid var(--lborder);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}
.tabs {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 4px;
  padding: 8px;
  background: var(--lbg);
  border-bottom: 1px solid var(--lborder);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  flex: 1 0 auto;
  padding: 10px 18px;
  border: none;
  border-radius: var(--rs);
  background: transparent;
  color: var(--lmuted);
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tab:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--lprimary);
}
.tab.on {
  background: var(--lacce);
  color: #fff;
  box-shadow: 0 4px 14px rgba(224, 41, 62, 0.28);
}
.panel {
  display: none;
}
.panel.on {
  display: block;
}
.panel-inner {
  padding: 26px 24px 30px;
  background: #ffffff;
}
.calc-screen {
  background: var(--lprimary);
  border-radius: var(--rs);
  padding: 16px 18px;
  margin-bottom: 16px;
  text-align: right;
}
.calc-expr {
  min-height: 20px;
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
  word-break: break-all;
}
.calc-disp {
  width: 100%;
  border: none;
  background: transparent;
  outline: none;
  text-align: right;
  font-family: var(--ff-mono);
  font-size: clamp(1.6rem, 5vw, 2.1rem);
  font-weight: 600;
  color: #fff;
}
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.cb {
  padding: 15px 4px;
  border: 1px solid var(--lborder);
  border-radius: var(--rs);
  background: #fff;
  color: var(--lprimary);
  font-family: var(--ff-mono);
  font-size: 1.02rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.cb:hover {
  background: var(--lbg);
  transform: translateY(-1px);
}
.cb:active {
  transform: translateY(0);
}
.cb.op {
  background: var(--lbg);
  color: var(--lacce);
  font-weight: 700;
}
.cb.fn {
  background: var(--lbg);
  color: var(--lmuted);
  font-size: 0.82rem;
}
.cb.cl {
  background: rgba(224, 41, 62, 0.1);
  border-color: rgba(224, 41, 62, 0.25);
  color: var(--lacce);
}
.cb.bk {
  background: var(--lbg);
  color: var(--lmuted);
}
.cb.eq {
  background: linear-gradient(135deg, var(--red), var(--red2));
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(224, 41, 62, 0.28);
}
.result {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--lbg);
  border: 1px solid var(--lborder);
  border-left: 4px solid var(--lacce);
  border-radius: var(--rs);
  color: var(--lprimary);
  font-size: 0.92rem;
  line-height: 1.7;
}
.result strong {
  color: var(--lacce);
}

/* ── Why CalcHub Pro / Preview ── */
.why-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 76px max(20px, 5vw);
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 52px;
  align-items: center;
}
.why-feats {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 30px;
}
.wf {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.wf-ico {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--rs);
  border: 1px solid var(--border);
  font-size: 1.2rem;
}
.wf-text h4 {
  font-family: var(--ff-head);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 5px;
}
.wf-text p {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.7;
  margin: 0;
}

.preview {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.p-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border);
}
.p-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.p-r { background: #ff5f57; }
.p-y { background: #febc2e; }
.p-g { background: #28c840; }
.p-lbl {
  margin-left: auto;
  font-family: var(--ff-mono);
  font-size: 0.64rem;
  letter-spacing: 1.2px;
  color: var(--dim);
}
.p-screen {
  padding: 22px 20px;
  text-align: right;
  background: rgba(0, 0, 0, 0.25);
}
.p-expr {
  font-family: var(--ff-mono);
  font-size: 0.78rem;
  color: var(--dim);
  margin-bottom: 6px;
}
.p-val {
  font-family: var(--ff-head);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 800;
  letter-spacing: -0.8px;
  color: var(--red2);
}
.p-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  padding: 16px;
}
.pb {
  padding: 13px 4px;
  text-align: center;
  border-radius: var(--rx);
  background: var(--glass2);
  border: 1px solid var(--border);
  font-family: var(--ff-mono);
  font-size: 0.92rem;
  color: var(--muted);
}
.pb.po {
  color: var(--red2);
  background: var(--red-dim);
  border-color: rgba(224, 41, 62, 0.22);
}
.pb.pe {
  background: linear-gradient(135deg, var(--red), var(--red2));
  border-color: transparent;
  color: #fff;
}

/* ── FAQ Section Wrapper (homepage) ── */
.faq-section {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px max(20px, 5vw) 76px;
}

/* ── Closing CTA Banner ── */
.cta-wrap {
  padding: 0 max(20px, 5vw) 80px;
}
.cta-box {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: 54px 36px;
  text-align: center;
  background: linear-gradient(145deg, var(--bg2), var(--bg3));
  border: 1px solid var(--border2);
  border-radius: 28px;
  overflow: hidden;
}
.cta-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}
.cta-box h2 {
  font-family: var(--ff-head);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--text);
  margin-bottom: 12px;
}
.cta-box p {
  color: var(--muted);
  font-size: 0.98rem;
  max-width: 560px;
  margin: 0 auto 22px;
}
.cta-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-bottom: 28px;
}
.cta-chip {
  padding: 6px 15px;
  border-radius: 50px;
  background: var(--glass);
  border: 1px solid var(--border);
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}

/* ── Footer brand column (used by 404.html) ── */
.foot-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Responsive: Homepage Components ── */
@media (max-width: 1024px) {
  .why-wrap {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 56px 20px 48px;
  }
  .tgrid {
    grid-template-columns: 1fr;
  }
  #cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
  }
  .ck-btns {
    margin-left: 0;
    width: 100%;
  }
  .ck-accept,
  .ck-decline {
    flex: 1;
  }
  .tab {
    flex: 0 0 auto;
    padding: 10px 14px;
    font-size: 0.8rem;
  }
  .panel-inner {
    padding: 20px 16px 24px;
  }
}

@media (max-width: 440px) {
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .hero-cta,
  .hero-ghost {
    justify-content: center;
    width: 100%;
  }
  .cb {
    padding: 13px 2px;
    font-size: 0.95rem;
  }
  .cta-box {
    padding: 40px 20px;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   PREMIUM LAYER v2
   Refinements on top of the base components above. Nothing here changes
   markup contracts — every selector already exists in the HTML.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Accessibility: visible focus on every interactive element ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: var(--rx);
}
.skip-target:focus { outline: none; }

::selection {
  background: rgba(224, 41, 62, 0.32);
  color: #fff;
}

/* ── Header: translucent glass, hairline border ── */
.nav {
  border-bottom: 1px solid var(--border);
  transition: background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.nav.stuck {
  background: rgba(7, 10, 20, 0.86);
  box-shadow: 0 1px 0 var(--border), 0 8px 32px rgba(0, 0, 0, 0.45);
}
.nav-links a {
  position: relative;
  padding: 6px 2px;
  color: var(--muted);
  font-weight: 500;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t) var(--ease);
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}
.nav-btn {
  background: var(--grad-brand);
  border: none;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 20px var(--red-glow);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.nav-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px var(--red-glow);
}

/* Mobile drawer: smooth slide instead of a hard toggle */
.nav-drawer {
  transition: transform 0.34s var(--ease), opacity 0.26s var(--ease);
}

/* ── Hero: restrained glow, gradient on the second line only ── */
.hero {
  padding-top: clamp(48px, 9vw, 92px);
  padding-bottom: clamp(48px, 8vw, 80px);
}
.hg1 {
  background: radial-gradient(circle, rgba(224, 41, 62, 0.22), transparent 70%);
  opacity: 0.85;
}
.hg2 {
  background: radial-gradient(circle, var(--glow-blue), transparent 70%);
}
.hg3 {
  background: radial-gradient(circle, var(--glow-violet), transparent 70%);
}
.hero-grid {
  background-size: 64px 64px;
  opacity: 0.7;
}
.hero-badge {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dim);
  background: var(--glass);
}
.hero-h1 {
  max-width: 18ch;
  letter-spacing: -2px;
  line-height: 1.04;
}
.hero-h1 .acc {
  background: var(--grad-electric);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  min-height: 0;
}
.hero-p {
  max-width: 56ch;
}
.hero-cta {
  background: var(--grad-brand);
  letter-spacing: 0.1px;
}
.hero-cta span {
  transition: transform var(--t) var(--ease);
}
.hero-cta:hover span {
  transform: translateX(4px);
}
.hero-ghost {
  background: var(--glass);
  border-color: var(--border2);
  color: var(--muted);
}
.hero-ghost:hover {
  color: var(--text);
  background: var(--glass2);
}

/* ── Category filter pills ── */
.hero-pills {
  gap: 9px;
  max-width: 760px;
}
.pill {
  padding: 9px 20px;
  font-size: 0.84rem;
  letter-spacing: 0.1px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.pill.ap {
  background: var(--grad-brand);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 22px var(--red-glow);
}

/* ── Trust strip ── */
.trust-strip {
  background: linear-gradient(180deg, var(--bg2), var(--bg));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 26px var(--gut);
}
.trust-inner {
  list-style: none;
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.ts-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  text-align: left;
}
.ts-ico {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--glass2);
  border: 1px solid var(--border);
  font-size: 1rem;
}
.ts-txt {
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--muted);
}
.ts-txt strong {
  display: block;
  font-family: var(--ff-head);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--text);
}

/* ── Calculator directory cards ── */
.tools-wrap {
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}
.tgrid {
  grid-template-columns: repeat(auto-fill, minmax(296px, 1fr));
  gap: 16px;
}
.tc {
  display: flex;
  flex-direction: column;
  padding: 24px 22px 20px;
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sh-sm);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease),
              background var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
/* Subtle per-category accent: a hairline at the top edge, revealed on hover */
.tc::before {
  content: '';
  position: absolute;
  top: 0;
  left: 18px;
  right: 18px;
  height: 1px;
  background: var(--cat, var(--red2));
  opacity: 0;
  transition: opacity var(--t) var(--ease);
}
.tc { --cat: var(--red2); }
.tc[data-cat="finance"] { --cat: var(--red2); }
.tc[data-cat="math"]    { --cat: var(--sky); }
.tc[data-cat="date"]    { --cat: var(--purple); }
.tc[data-cat="health"]  { --cat: var(--teal); }
.tc:hover,
.tc:focus-visible {
  transform: translateY(-4px);
  border-color: var(--border2);
  border-color: color-mix(in srgb, var(--cat) 42%, transparent);
  box-shadow: var(--sh-md);
  box-shadow: var(--sh-md), 0 0 0 1px color-mix(in srgb, var(--cat) 18%, transparent);
}
.tc:hover::before,
.tc:focus-visible::before {
  opacity: 0.9;
}
.tc:active {
  transform: translateY(-1px) scale(0.995);
}
.tc-ico {
  background: var(--glass2);
  background: color-mix(in srgb, var(--cat) 12%, transparent);
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--cat) 26%, transparent);
}
.tc-arr {
  opacity: 0;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
}
.tc:hover .tc-arr {
  opacity: 1;
  color: var(--cat);
}
.tc-desc {
  flex: 1 0 auto;
}
.tc-tags {
  margin-bottom: 16px;
}
.tc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.tc-cat {
  padding: 4px 11px;
  border-radius: 50px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--cat);
  background: var(--glass);
  background: color-mix(in srgb, var(--cat) 11%, transparent);
  border: 1px solid var(--border);
  border: 1px solid color-mix(in srgb, var(--cat) 24%, transparent);
  white-space: nowrap;
}
.tc-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--t) var(--ease);
}
.tc-go span {
  transition: transform var(--t) var(--ease);
}
.tc:hover .tc-go {
  color: var(--text);
}
.tc:hover .tc-go span {
  transform: translateX(3px);
}

/* ── Featured Quick Calculator: reads as a product surface ── */
#calc-zone {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bg2);
  padding-top: var(--sec-y);
  padding-bottom: var(--sec-y);
}
#calc-zone::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -180px;
  left: 50%;
  width: 760px;
  height: 480px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--glow-blue), transparent 68%);
  filter: blur(70px);
  pointer-events: none;
}
.calc-wrap {
  position: relative;
  max-width: 920px;
  border: 1px solid var(--border2);
  box-shadow: var(--sh-lg);
}
.calc-wrap::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: var(--grad-electric);
  border-radius: 2px;
  opacity: 0.85;
}
.calc-head h2 {
  letter-spacing: -1px;
}
.tab {
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.tab.on {
  background: var(--grad-brand);
}
.cb {
  min-height: 48px;
}
.cb:active {
  background: var(--lbg);
  transform: scale(0.97);
}

/* ── Content hierarchy on calculator + legal pages ── */
.article-section p,
.legal-wrap p,
.legal-wrap li {
  max-width: 72ch;
}
.sec-h {
  text-wrap: balance;
}
.formula-box,
.example-card,
.highlight-box {
  box-shadow: var(--sh-sm);
}
.faq-item {
  transition: border-color var(--t) var(--ease), background var(--t) var(--ease);
}
.faq-item.open {
  border-color: var(--border2);
}

/* ── Footer ── */
.foot-top {
  grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr));
  gap: 34px 26px;
}
.foot-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.foot-col h4 {
  font-family: var(--ff-head);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--text);
}
.foot-col a {
  color: var(--muted);
  font-size: 0.83rem;
}
.foot-col a:hover {
  color: var(--red2);
}

/* ── Cookie banner polish ── */
#cookie-banner {
  border-color: var(--border2);
  box-shadow: var(--sh-lg);
}
.ck-accept {
  background: var(--grad-brand);
}

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1100px) {
  .foot-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .trust-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .ts-item {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .foot-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .tgrid {
    grid-template-columns: 1fr;
  }
  .hero-pills {
    gap: 8px;
  }
  .pill {
    padding: 9px 15px;
    font-size: 0.79rem;
  }
}

/* Small phones: 412px / 390px / 375px */
@media (max-width: 430px) {
  :root {
    --gut: 18px;
  }
  .hero-h1 {
    font-size: clamp(1.95rem, 9vw, 2.6rem);
    letter-spacing: -1.2px;
    max-width: 100%;
  }
  .hero-badge {
    font-size: 0.63rem;
    letter-spacing: 1px;
    text-align: left;
  }
  .trust-inner {
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .tc {
    padding: 20px 18px 18px;
  }
  .tc-foot {
    flex-wrap: wrap;
    gap: 10px;
  }
  .foot-top {
    grid-template-columns: 1fr;
  }
}

/* Comfortable touch targets on any touch device */
@media (hover: none) and (pointer: coarse) {
  .pill,
  .tab,
  .nav-btn,
  .hero-cta,
  .hero-ghost,
  .ck-accept,
  .ck-decline {
    min-height: 44px;
  }
  .tc:hover {
    transform: none;
  }
  .tc:active {
    background: var(--card-hover);
    transform: scale(0.99);
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .orb,
  .live-dot {
    animation: none !important;
  }
  .tc:hover,
  .hero-cta:hover,
  .nav-btn:hover {
    transform: none;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   CALCULATOR SEARCH + FILTER STATE
   ═════════════════════════════════════════════════════════════════════ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tool-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 520px;
  margin: 26px auto 10px;
}
.ts-icon {
  position: absolute;
  left: 18px;
  font-size: 0.95rem;
  opacity: 0.5;
  pointer-events: none;
}
.tool-search-input {
  width: 100%;
  min-height: 52px;
  padding: 14px 46px 14px 46px;
  border-radius: 50px;
  border: 1px solid var(--border2);
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  font-family: var(--ff-body);
  font-size: 0.95rem;
  outline: none;
  box-shadow: var(--sh-sm);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.tool-search-input::placeholder {
  color: var(--dim);
}
.tool-search-input:focus {
  border-color: rgba(224, 41, 62, 0.55);
  box-shadow: 0 0 0 4px var(--red-dim), var(--sh-md);
}
/* Kill the native WebKit clear button — we render our own, consistently. */
.tool-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}
.ts-clear {
  position: absolute;
  right: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: var(--glass2);
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.ts-clear:hover {
  background: var(--red-dim);
  color: var(--red2);
}
.ts-clear[hidden] {
  display: none;
}

.tool-count {
  font-size: 0.78rem;
  color: var(--dim);
  letter-spacing: 0.3px;
  margin-bottom: 0;
}

/* Hidden by search/filter — a class, so it never fights the flex layout. */
.tc.hide {
  display: none !important;
}

.no-results {
  max-width: 460px;
  margin: 8px auto 0;
  padding: 44px 28px;
  text-align: center;
  background: var(--card-bg);
  border: 1px dashed var(--border2);
  border-radius: var(--r);
}
.no-results[hidden] {
  display: none;
}
.nr-ico {
  font-size: 2rem;
  margin-bottom: 12px;
  opacity: 0.6;
}
.no-results h3 {
  font-family: var(--ff-head);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 8px;
}
.no-results p {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Friendly in-widget calculation errors (replaces bare "Error") */
.calc-err {
  padding: 12px 16px;
  border-radius: var(--rs);
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.28);
  border-left: 4px solid var(--danger);
  color: #7f1d1d;
  font-size: 0.88rem;
  font-weight: 600;
}

@media (max-width: 430px) {
  .tool-search {
    margin-top: 20px;
  }
  .tool-search-input {
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }
  .no-results {
    padding: 34px 20px;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   REFERENCE REDESIGN LAYER
   Hero illustration, search bar, pill icons/counts, header Home link,
   and the Popular Calculators section. Builds on tokens/components
   already defined above — nothing here duplicates existing rules.
   ═════════════════════════════════════════════════════════════════════ */

/* ── Header: Home link with inline glyph ── */
.nl-ico {
  display: inline-block;
  margin-right: 5px;
  font-size: 0.9em;
  opacity: 0.85;
}

/* ── Hero: two-column layout (copy left, illustration right) ── */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  text-align: center;
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.15fr 0.85fr;
    justify-items: stretch;
    text-align: left;
    gap: 32px;
    align-items: center;
    max-width: 1180px;
    margin: 0 auto;
  }
  .hero-badge,
  .hero-h1,
  .hero-p,
  .tool-search,
  .hero-pills {
    grid-column: 1;
  }
  .hero-h1 { max-width: none; }
  .hero-pills { justify-content: flex-start; }
  .hero-illo {
    grid-column: 2;
    grid-row: 1 / span 5;
  }
}

/* ── Hero illustration ── */
.hero-illo {
  position: relative;
  display: none;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
}
@media (min-width: 900px) {
  .hero-illo { display: block; }
}
.hero-illo-svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.hi-shadow { fill: rgba(0,0,0,0.35); filter: blur(6px); }
.hi-body { fill: var(--bg3); stroke: var(--border2); stroke-width: 1.5; }
.hi-screen { fill: var(--indigo); opacity: 0.9; }
.hi-digits { fill: #fff; font-family: var(--ff-mono); font-size: 22px; font-weight: 600; }
.hi-keys rect { fill: var(--glass2); stroke: var(--border); stroke-width: 1; }
.hi-orbit {
  transform-origin: 150px 120px;
  animation: hiFloat 7s ease-in-out infinite;
}
@keyframes hiFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.hi-chip rect {
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.4));
}
.hi-chip text {
  text-anchor: middle;
  fill: #fff;
  font-family: var(--ff-head);
  font-size: 17px;
  font-weight: 700;
}
.hi-chip1 { transform: translate(20px, 60px); }
.hi-chip1 rect { fill: var(--teal); }
.hi-chip2 { transform: translate(210px, 190px); animation: hiFloat 6s ease-in-out infinite 0.4s; }
.hi-chip2 rect { fill: var(--indigo); }
.hi-chip3 { transform: translate(38px, 155px); animation: hiFloat 8s ease-in-out infinite 0.8s; }
.hi-chip3 rect { fill: var(--red2); }
.hi-chip4 { transform: translate(232px, 70px); animation: hiFloat 6.5s ease-in-out infinite 1.1s; }
.hi-chip4 rect { fill: var(--purple); }
.hi-note {
  position: absolute;
  top: -6px;
  right: -6px;
  font-family: var(--ff-head);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--dim);
  transform: rotate(-4deg);
  white-space: nowrap;
}

/* ── Search bar (hero) ── */
.hero .tool-search {
  max-width: 620px;
  margin: 0 0 22px;
}
@media (max-width: 899px) {
  .hero .tool-search { margin: 0 auto 22px; }
}
.tool-search-input {
  padding-right: 108px;
}
.ts-submit {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  padding: 0 22px;
  border: none;
  border-radius: 50px;
  background: var(--grad-brand);
  color: #fff;
  font-family: var(--ff-body);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px var(--red-glow);
  transition: transform var(--t-fast) var(--ease);
}
.ts-submit:hover {
  transform: translateY(-1px);
}
.ts-clear {
  right: 116px;
}

/* ── Category pills: icon + count chip ── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pill-ico {
  font-size: 0.92em;
  line-height: 1;
}
.pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 50px;
  background: rgba(255,255,255,0.12);
  font-size: 0.72rem;
  font-weight: 700;
}
.pill.ap .pill-count {
  background: rgba(255,255,255,0.28);
}

/* ── Popular Calculators ── */
.popular-wrap {
  padding-top: clamp(40px, 6vw, 64px);
  padding-bottom: clamp(32px, 5vw, 48px);
}
.popular-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  margin-bottom: 28px;
}
.popular-h {
  margin-bottom: 0;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  display: flex;
  align-items: center;
  gap: 10px;
}
.ph-spark {
  color: var(--amber);
  font-size: 0.85em;
}
.popular-viewall {
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--sky);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease);
}
.popular-viewall:hover {
  color: var(--text);
}
.popular-grid {
  grid-template-columns: repeat(4, 1fr);
}
.tc-pop .tc-ico {
  background: color-mix(in srgb, var(--ico, var(--cat)) 16%, transparent);
  border-color: color-mix(in srgb, var(--ico, var(--cat)) 32%, transparent);
}
.tc-pop:hover {
  border-color: color-mix(in srgb, var(--ico, var(--cat)) 45%, transparent);
}
.tc-pop::before {
  background: var(--ico, var(--cat));
}
.tc-pop:hover .tc-arr {
  color: var(--ico, var(--cat));
}

@media (max-width: 1024px) {
  .popular-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .popular-grid {
    grid-template-columns: 1fr;
  }
  .popular-hdr {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* ── Small phones: hero + search + pills ── */
@media (max-width: 430px) {
  .ts-submit {
    position: static;
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 13px;
  }
  .tool-search {
    flex-wrap: wrap;
  }
  .tool-search-input {
    padding-right: 46px;
  }
  .ts-clear {
    right: 12px;
  }
  .hi-note {
    display: none;
  }
}

/* Category pills can scroll horizontally rather than wrap awkwardly
   on narrow phones, matching common calculator-app UX. */
@media (max-width: 480px) {
  .hero-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .hero-pills::-webkit-scrollbar { display: none; }
  .pill { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hi-orbit, .hi-chip1, .hi-chip2, .hi-chip3, .hi-chip4 {
    animation: none !important;
  }
}

/* ═════════════════════════════════════════════════════════════════════
   PREMIUM UTILITY THEME — LIGHT REDESIGN
   Replaces the dark neon/glassmorphism direction. This layer wins on
   cascade order over every rule above it. Structure/markup unchanged;
   only appearance is touched. Tokens above already carry most pages
   (calc-box, res-card, forms, etc.) to the light palette automatically.
   ═════════════════════════════════════════════════════════════════════ */

body {
  color: var(--text);
}

/* ── Header: clean, light, minimal blur ── */
.nav {
  background: rgba(247, 245, 241, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.nav.stuck {
  background: rgba(247, 245, 241, 0.96);
  box-shadow: 0 1px 0 var(--border), 0 4px 16px rgba(20, 18, 15, 0.06);
}
.logo-text { color: var(--text); }
.logo-text .hi { color: var(--red); }
.nav-links a { color: var(--muted); }
.nav-links a:hover,
.nav-links a.active { color: var(--text); }
.nav-btn {
  padding: 10px 22px;
  box-shadow: none;
}
.nav-btn:hover {
  box-shadow: 0 4px 12px var(--red-glow);
}
.hbg span {
  background: var(--text);
}

/* Mobile drawer: full-screen light sheet instead of a dark blurred panel */
.nav-drawer {
  background: rgba(247, 245, 241, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.nav-drawer a {
  color: var(--text);
  border-bottom: 1px solid transparent;
}
.nav-drawer a:hover {
  color: var(--red);
}

/* ── Kill the neon/decorative layer ──────────────────────────────
   Large glow orbs, the animated grid overlay, and floating dots read
   as "AI startup" rather than "premium calculator." Removed, not just
   dimmed, per the brief. ─────────────────────────────────────────── */
.hg1, .hg2, .hg3, .orb, .hero-grid, .hero-illo {
  display: none !important;
}

/* ── Hero: substantially shorter, no decorative weight ── */
.hero {
  min-height: 0;
  padding: clamp(28px, 5vw, 44px) var(--gut) clamp(24px, 4vw, 36px);
  display: block;
  text-align: center;
}
@media (min-width: 900px) {
  .hero {
    display: block;
    max-width: 760px;
    margin: 0 auto;
  }
}
.hero-badge {
  background: var(--glass2);
  border-color: var(--border);
  color: var(--muted);
}
.live-dot { background: var(--ok); }
.hero-h1 {
  font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  letter-spacing: -1px;
  line-height: 1.12;
  max-width: 20ch;
  margin: 0 auto 14px;
  color: var(--text);
}
.hero-h1 .acc {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--red);
}
.hero-p {
  color: var(--muted);
  max-width: 52ch;
  margin: 0 auto 24px;
  font-size: 1rem;
}

/* ── Search: solid white field, no blur, obvious focus ── */
.hero .tool-search {
  margin: 0 auto 20px;
}
.tool-search-input {
  background: #fff;
  border: 1.5px solid var(--border2);
  color: var(--text);
  box-shadow: var(--sh-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tool-search-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 4px var(--red-dim);
}
.ts-icon { opacity: 0.4; }
.ts-clear {
  background: var(--glass2);
  color: var(--muted);
}
.ts-submit {
  background: var(--red);
  box-shadow: none;
}
.ts-submit:hover {
  background: var(--red2);
}

/* ── Category pills: light, properly contained, red = active ── */
.pill {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--muted);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--sh-sm);
}
.pill:hover {
  border-color: var(--border2);
  background: var(--bg2);
  color: var(--text);
}
.pill.ap {
  background: var(--red);
  color: #fff;
  box-shadow: none;
}
.pill-count {
  background: rgba(20, 18, 15, 0.07);
  color: var(--muted);
}
.pill.ap .pill-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
/* Prevent any clipping: pills row and its scroll-container never hide
   overflow in a way that would crop a pill; only the row itself scrolls. */
.hero-pills {
  overflow: visible;
}
@media (max-width: 480px) {
  .hero-pills {
    margin: 0 calc(var(--gut) * -1);
    padding-left: var(--gut);
    padding-right: var(--gut);
    overflow-x: auto;
  }
}

/* ── Trust strip: neutral icon chips, not colored glass ── */
.trust-strip {
  background: var(--bg2);
  border-top-color: var(--border);
  border-bottom-color: var(--border);
}
.ts-item .ts-ico {
  background: #fff;
  border-color: var(--border);
}
.ts-txt { color: var(--muted); }
.ts-txt strong { color: var(--text); }

/* ── Calculator cards: clean white, subtle border, red on interaction ──
   The rainbow per-category accent system is dropped. Every card looks
   the same until you touch it — then it goes red. That IS the brand. */
.tc, .tc-pop {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tc::before, .tc-pop::before {
  background: var(--red) !important;
}
.tc:hover, .tc-pop:hover,
.tc:focus-visible, .tc-pop:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(216, 31, 53, 0.35) !important;
  box-shadow: var(--sh-md);
}
.tc:active { transform: translateY(-1px) scale(0.994); }

.tc-ico, .tc-pop .tc-ico {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}
.tc:hover .tc-ico, .tc-pop:hover .tc-ico {
  background: var(--red-dim) !important;
  border-color: rgba(216, 31, 53, 0.3) !important;
}
.tc-name { color: var(--text); }
.tc-desc { color: var(--muted); }
.tc-tag {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--dim);
}
.tc-arr { color: var(--dim); opacity: 0; }
.tc:hover .tc-arr, .tc-pop:hover .tc-arr {
  opacity: 1;
  color: var(--red) !important;
}
.tc-cat, .tc-pop .tc-cat {
  color: var(--muted) !important;
  background: var(--bg2) !important;
  border-color: var(--border) !important;
}
.tc-go { color: var(--muted); }
.tc:hover .tc-go, .tc-pop:hover .tc-go { color: var(--red); }

/* ── "Popular Calculators" header ── */
.ph-spark { color: var(--red); }
.popular-viewall { color: var(--red); }
.popular-viewall:hover { color: var(--red2); }

/* ── Section chips / headings ── */
.section-chip {
  background: var(--red-dim);
  border-color: rgba(216, 31, 53, 0.2);
  color: var(--red2);
}
.sec-h { color: var(--text); }
.sec-h em { color: var(--red); }
.sec-p { color: var(--muted); }
.badge-chip { color: var(--red2); }
.res-banner-value.highlight { color: var(--red2); }

/* ── Quick Calculate: the signature widget ──────────────────────
   A crisp white "device" card with a deep charcoal screen, sitting on
   the page's off-white background — reads as a real calculator, not
   a UI panel. This is the section the brief asks to make distinctive. */
#calc-zone {
  background: var(--bg2);
}
#calc-zone::before {
  display: none; /* drop the blue glow */
}
.calc-head h2 { color: var(--text); }
.calc-head p { color: var(--muted); }
.calc-wrap {
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--sh-lg);
}
.calc-wrap::before {
  background: var(--red);
  opacity: 1;
  height: 3px;
}
.tabs { background: var(--bg2); border-bottom-color: var(--border); }
.tab { color: var(--lmuted); }
.tab:hover { background: rgba(20,18,15,0.05); color: var(--text); }
.tab.on { background: var(--red); box-shadow: none; }
.panel-inner { background: #fff; }
.calc-screen { background: var(--lprimary); }
.cb {
  background: #fff;
  border-color: var(--lborder);
  color: var(--lprimary);
  box-shadow: none;
}
.cb:hover { background: var(--lbg); }
.cb.op { background: var(--lbg); color: var(--red); }
.cb.eq { background: var(--red); box-shadow: none; }
.cb.eq:hover { background: var(--red2); }
.result { background: var(--lbg); border-color: var(--lborder); border-left-color: var(--red); }
.result strong { color: var(--red2); }

/* ── Why / Preview mockup: kept as a deliberate dark "device screen"
   for contrast — a real screenshot-style mockup, not stray decoration. */
.why-wrap { }
.wf-ico { background: var(--bg2); border-color: var(--border); }
.wf-text h4 { color: var(--text); }
.wf-text p { color: var(--muted); }
.preview {
  background: var(--text);
  border-color: rgba(255,255,255,0.1);
  box-shadow: var(--sh-lg);
}
.p-lbl { color: rgba(255,255,255,0.35); }
.p-expr { color: rgba(255,255,255,0.4); }
.pb {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.pb.po { background: var(--red-dim); border-color: rgba(216,31,53,0.3); color: #ff8fa0; }
.pb.pe { background: var(--red); }

/* ── FAQ ── */
.faq-item { background: var(--card-bg); border-color: var(--border); }
.faq-item.open { border-color: rgba(216,31,53,0.3); }
.faq-q { color: var(--text); }
.faq-a { color: var(--muted); }

/* ── Closing CTA ── */
.cta-box {
  background: #fff;
  border-color: var(--border);
}
.cta-box::before { background: var(--red); opacity: 1; height: 3px; }
.cta-box h2 { color: var(--text); }
.cta-box p { color: var(--muted); }
.cta-chip { background: var(--bg2); border-color: var(--border); color: var(--muted); }

/* ── Footer ── */
footer { background: var(--bg2); border-top: 1px solid var(--border); }
.foot-brand-desc { color: var(--muted); }
.foot-status { color: var(--muted); }
.status-dot { background: var(--ok); }
.foot-copy { color: var(--dim); }

/* ── Cookie banner: light card, not a dark floating panel ── */
#cookie-banner {
  background: #fff;
  border: 1px solid var(--border2);
  box-shadow: var(--sh-lg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.ck-text p { color: var(--muted); }
.ck-text strong { color: var(--text); }
.ck-decline {
  background: var(--bg2);
  border-color: var(--border);
  color: var(--muted);
}
.ck-decline:hover { color: var(--text); border-color: var(--border2); }
.ck-accept { background: var(--red); box-shadow: none; }
.ck-accept:hover { background: var(--red2); }

/* ── 404 related-card directory ── */
.rel-card { background: var(--card-bg); border-color: var(--border); }
.rel-card:hover {
  background: var(--bg2);
  border-color: rgba(216,31,53,0.3);
  box-shadow: var(--sh-md);
}
.rel-name { color: var(--text); }
.rel-desc { color: var(--muted); }

/* ── Founder card / about page ── */
.founder-card { background: var(--card-bg); border-color: var(--border); box-shadow: var(--sh-lg); }
.founder-card::before { background: var(--red); }
.founder-name { color: var(--text); }
.founder-role { background: var(--bg2); border-color: var(--border); color: var(--muted); }
.founder-bio { color: var(--muted); }
.fstat { background: var(--bg2); border-color: var(--border); }
.fstat-n { color: var(--red); }
.fstat-l { color: var(--dim); }
.mg-card { background: var(--card-bg); border-color: var(--border); }
.mg-card h3 { color: var(--text); }
.mg-card p { color: var(--muted); }

/* ── Contact page ── */
.contact-wrap { background: #fff; box-shadow: var(--sh-lg); }
.contact-wrap h2 { color: var(--text); }
.contact-wrap p.sub { color: var(--muted); }
.info-card { background: var(--card-bg); border-color: var(--border); }
.info-card:hover { background: var(--bg2); border-color: var(--border2); }
.info-card h3 { color: var(--text); }
.info-card p { color: var(--muted); }

/* ── Legal pages: readable on light, no leftover dark-theme text colors ── */
.legal-wrap h2 { color: var(--text); }
.legal-wrap p, .legal-wrap li { color: var(--muted); }
.legal-wrap strong { color: var(--text); }
.alert-card {
  background: rgba(216, 31, 53, 0.05);
  border-color: rgba(216, 31, 53, 0.2);
}
.alert-card h3 { color: var(--red2); }
.privacy-highlight {
  background: rgba(37, 99, 168, 0.05);
  border-color: rgba(37, 99, 168, 0.2);
}

/* ── Simplify glassmorphism sitewide: no heavy blur outside the header
   and mobile drawer, which need it for legibility over scrolling content. */
.wf-ico, .tc-ico, .ts-clear, .pill-count {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ── Mobile fixes called out explicitly in the brief ── */
@media (max-width: 430px) {
  .hero { padding: 24px var(--gut) 20px; }
  .hero-h1 { font-size: clamp(1.7rem, 8vw, 2.1rem); }
  .hero-p { font-size: 0.92rem; }
  .tool-search-input {
    font-size: 16px;      /* stop iOS zoom-on-focus, never let it clip */
    padding-left: 42px;
    padding-right: 42px;
  }
  .ts-icon { left: 14px; }
  .ts-clear { right: 10px; }
}

@media (hover: none) and (pointer: coarse) {
  .tc:hover, .tc-pop:hover { transform: none; }
  .tc:active, .tc-pop:active { background: var(--bg2); }
}

@media (prefers-reduced-motion: reduce) {
  .tc:hover, .tc-pop:hover, .nav-btn:hover { transform: none; }
}

/* ═════════════════════════════════════════════════════════════════════
   MOBILE OVERFLOW AUDIT — FINAL, AUTHORITATIVE FIXES
   This section is intentionally last in the file so every rule here
   wins any cascade tie against earlier, scattered mobile overrides
   accumulated across previous sessions. Nothing here changes desktop
   appearance (≥900px) or the approved light theme — only the mobile
   box model. Root causes fixed, not just overflow-x:hidden painted
   over them (that safety net already existed; see body rule below,
   kept as a second line of defense, not the fix itself).
   ═════════════════════════════════════════════════════════════════════ */

html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* ── Root cause #1: form controls ignore CSS width in flex layouts ──
   <input> (and <select>/<button>) has a browser default intrinsic
   minimum width — in WebKit-family engines this can exceed the
   available space inside a narrow flex row, silently forcing the
   whole row (and the page) wider than the viewport. This is almost
   certainly why the search icon/button looked "positioned awkwardly"
   — the input itself was pushing past its container's right edge. */
.tool-search,
.tool-search-input,
.nav,
.nav-logo,
.hero,
.hero-pills,
.tc-foot,
.ts-item,
.popular-hdr,
.tools-hdr,
.foot-brand,
.calc-head {
  min-width: 0;
}

/* ── Root cause #2: grid column without minmax(0, …) ──
   `1.6fr` alone still carries an implicit auto minimum sized to its
   content, same failure mode as flex. The other 5 footer columns
   already use minmax(0, 1fr); this one didn't. */
.foot-top {
  grid-template-columns: 1.6fr repeat(5, minmax(0, 1fr));
}

/* ── Root cause #3: overflow-x reset on the pill scroll strip ──
   A later, unrelated rule (`.hero-pills { overflow: visible; }`,
   added when fixing a *different* clipping issue) sets the `overflow`
   shorthand, which resets overflow-x on both axes. A subsequent rule
   re-applied overflow-x: auto only inside one specific media query —
   fragile, and exactly the kind of accumulated-override conflict that
   causes pills to "extend outside the viewport." Fixed here for every
   width ≤480px, unambiguously, in one place. */
@media (max-width: 480px) {
  .hero-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    max-width: 100%;
    margin: 0 calc(var(--gut) * -1);
    padding: 0 var(--gut) 4px;
  }
  .hero-pills::-webkit-scrollbar { display: none; }
  .pill {
    flex: 0 0 auto;
    min-width: 0;
  }
}

/* ── Search bar: one clean mobile layout, no absolute-overlap tricks ──
   Below 480px the button drops to its own full-width row instead of
   floating inside the input (the prior absolute-position + flex-wrap
   combination was fragile and is the most likely source of the
   "icon positioned below/around the input" symptom). */
@media (max-width: 480px) {
  .tool-search {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 18px;
  }
  .tool-search-input {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 16px;           /* stop iOS zoom-on-focus */
    padding: 13px 34px 13px 36px; /* trimmed so more placeholder is visible */
  }
  .ts-icon {
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
  }
  .ts-clear {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
  }
  .ts-submit {
    position: static;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 13px;
  }
}

/* ── Hero: confirm no oversized text at the narrowest tested width ──
   clamp() floor checked against "Everyday Calculations." — the
   longest line — at 320px with --gut:18px (284px available); this
   floor keeps every word inside that space with margin to spare. */
@media (max-width: 430px) {
  :root { --gut: 16px; }
  .hero {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 22px var(--gut) 18px;
  }
  .hero-h1 {
    font-size: clamp(1.55rem, 7.6vw, 2rem);
    max-width: 100%;
    overflow-wrap: break-word;
  }
  .hero-p {
    max-width: 32ch;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: break-word;
  }
  .hero-badge {
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── Calculator cards: guaranteed single column, no fixed widths ── */
@media (max-width: 640px) {
  .tgrid, .popular-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .tc, .tc-pop {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── Benefits / trust strip: tighter, still comfortable ── */
@media (max-width: 430px) {
  .trust-strip {
    padding: 18px var(--gut);
  }
  .trust-inner {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .ts-item {
    justify-content: flex-start;
    text-align: left;
  }
}

/* ── Header: logo/branding never forced past the hamburger ── */
@media (max-width: 640px) {
  .nav {
    padding: 0 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .nav-logo {
    flex-shrink: 1;
    min-width: 0;
  }
  .logo-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hbg {
    flex-shrink: 0;
  }
}

/* ── Blanket safety net for any text content: never the fix on its
   own (root causes above are), but a correct default regardless. ── */
@media (max-width: 480px) {
  .hero-p, .sec-p, .tc-desc, .ts-txt, .foot-brand-desc {
    overflow-wrap: break-word;
    word-break: break-word;
  }
}