/* ===========================================================
   CalculateHours.net - Shared Stylesheet
   =========================================================== */

:root {
  --bg: #ffffff;
  --bg-warm: #f8fafc;
  --paper: #ffffff;
  --ink: #0f172a;
  --ink-soft: #334155;
  --ink-muted: #64748b;
  --line: #e2e8f0;
  --line-soft: #f1f5f9;
  --accent: #3b82f6;
  --accent-deep: #2563eb;
  --accent-soft: #dbeafe;
  --gold: #f59e0b;
  --green: #10b981;
  --green-soft: #d1fae5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Geist', -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); }

/* TOP BAR */
.topbar {
  background: var(--ink);
  color: var(--bg);
  padding: 8px 0;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.topbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
}
.topbar-inner span { opacity: 0.7; }
.topbar-inner .live::before {
  content: '●';
  color: #4a9b3a;
  margin-right: 6px;
  animation: pulse 2s infinite;
}
@keyframes pulse { 50% { opacity: 0.4; } }

/* HEADER */
header {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}

/* Adsterra banner: sits below the sticky nav, above page content/breadcrumbs.
   Desktop slot is 728x90, mobile slot is 320x50; only the matching one shows. */
.ad-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.ad-banner-inner { margin: 0 auto; }
.ad-banner-inner.desktop { min-width: 728px; min-height: 90px; }
.ad-banner-inner.mobile { display: none; min-width: 320px; min-height: 50px; }
@media (max-width: 720px) {
  .ad-banner { padding: 8px 12px; }
  .ad-banner-inner.desktop { display: none; }
  .ad-banner-inner.mobile { display: block; }
}
.nav {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 600;
  font-variation-settings: "SOFT" 50, "opsz" 80;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-mark {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  position: relative;
  display: inline-block;
}
.logo-mark::before, .logo-mark::after {
  content: '';
  position: absolute;
  background: var(--ink);
  left: 50%;
  top: 50%;
}
.logo-mark::before {
  width: 1.5px;
  height: 10px;
  transform: translate(-0.75px, -10px);
}
.logo-mark::after {
  width: 1.5px;
  height: 7px;
  transform: translate(-0.75px, -7px) rotate(90deg);
  transform-origin: 0 0;
}
.logo small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-left: 4px;
}

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  align-items: center;
}
.nav-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
}
.nav-links a:hover { color: var(--accent); }
.nav-links a.active::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}
.nav-cta {
  background: var(--accent);
  color: #ffffff !important;
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2);
}
.nav-cta:hover { background: var(--accent-deep); box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); }

/* DROPDOWN */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 12px;
  min-width: 280px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s;
  box-shadow: 0 12px 32px rgba(26,22,18,0.08);
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 14px;
  font-size: 14px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
}
.nav-dropdown-menu a:hover {
  background: var(--bg-warm);
  color: var(--accent);
}
.nav-dropdown-menu a small {
  display: block;
  color: var(--ink-muted);
  font-size: 11px;
  margin-top: 2px;
}

/* HERO */
.hero {
  padding: 60px 24px 40px;
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}
.hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--accent);
}
.hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 400;
  font-variation-settings: "SOFT" 50, "opsz" 144;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: 24px;
  max-width: 900px;
  color: var(--ink);
}
.hero h1 em {
  font-style: italic;
  color: var(--accent);
  font-variation-settings: "SOFT" 100, "opsz" 144;
}
.hero p {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 620px;
  margin-bottom: 32px;
  line-height: 1.55;
}
.hero-meta {
  display: flex;
  gap: 28px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  flex-wrap: wrap;
}
.hero-meta span { display: flex; align-items: center; gap: 6px; }
.hero-meta span::before {
  content: '✓';
  color: var(--green);
  font-weight: bold;
}

/* BREADCRUMB */
.breadcrumb {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.breadcrumb a {
  text-decoration: none;
  color: var(--ink-muted);
  margin-right: 8px;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin-right: 8px; }

/* CALCULATOR CARDS */
.calc-section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px 60px;
}
.calc-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 32px;
  align-items: start;
}
.calc-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
}
.calc-header {
  padding: 24px 28px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--bg-warm), var(--paper));
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.calc-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.calc-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-warm);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 4px;
}
.calc-tab {
  background: transparent;
  border: none;
  padding: 7px 16px;
  font-size: 13px;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  color: var(--ink-muted);
  cursor: pointer;
  border-radius: 100px;
  transition: all 0.2s;
}
.calc-tab.active { background: var(--ink); color: var(--bg); }

.calc-body { padding: 28px; }
.calc-body.hidden { display: none; }

.day-row {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 110px 50px;
  gap: 12px;
  align-items: end;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.day-row:last-of-type { border-bottom: none; }
.day-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding-bottom: 12px;
}
.day-label .day-name { color: var(--ink); font-weight: 600; display: block; font-size: 14px; }

.field-group { display: flex; flex-direction: column; gap: 4px; }
.field-group label {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.time-input {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.time-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.time-input input {
  border: none;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  background: transparent;
  width: 100%;
  outline: none;
  color: var(--ink);
}
.time-input select {
  border: none;
  background: var(--bg-warm);
  padding: 10px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  color: var(--ink);
}
.break-input, .text-input {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  outline: none;
  width: 100%;
  color: var(--ink);
}
.break-input:focus, .text-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.day-result {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  text-align: right;
  padding-bottom: 12px;
  color: var(--accent);
  font-weight: 600;
}
.day-result small { display: block; color: var(--ink-muted); font-size: 10px; font-weight: 400; }

.rate-section {
  margin-top: 20px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.rate-field label {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  display: block;
  margin-bottom: 6px;
}
.rate-input {
  display: flex;
  align-items: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.rate-input span {
  padding: 0 12px;
  color: var(--ink-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  border-right: 1px solid var(--line);
}
.rate-input input, .rate-input select {
  border: none;
  padding: 10px 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  background: transparent;
  width: 100%;
  outline: none;
  color: var(--ink);
}

.calc-actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.btn {
  padding: 12px 24px;
  border-radius: 4px;
  border: none;
  font-family: 'Geist', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.btn-primary {
  background: var(--accent);
  color: #ffffff;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
}
.btn-primary:hover {
  background: var(--accent-deep);
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.25);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--bg-warm); }

/* RESULT PANEL */
.result-panel {
  background: var(--ink);
  color: var(--bg);
  border-radius: 4px;
  padding: 28px;
  position: sticky;
  top: 90px;
  overflow: hidden;
  align-self: start;
}
.result-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--gold), var(--accent));
  z-index: 1;
}
.result-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
}
.result-hours {
  font-family: 'Fraunces', serif;
  font-size: 64px;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: 4px;
  color: var(--bg);
}
.result-hours .unit {
  font-size: 22px;
  color: var(--accent-soft);
  margin-left: 4px;
  font-style: italic;
}
.result-decimal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 24px;
}

.result-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 20px 0;
}

.result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  font-size: 14px;
}
.result-row .label {
  color: rgba(255, 255, 255, 0.85);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.result-row .value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--bg);
}
.result-row.highlight .value {
  color: var(--gold);
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 500;
}

/* SECTIONS */
.section {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 24px;
}
.section-header {
  margin-bottom: 48px;
  text-align: center;
}
.section-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 16px;
}
.section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  max-width: 720px;
  margin: 0 auto;
}
.section-title em {
  font-style: italic;
  color: var(--accent);
}

/* CONTENT PROSE */
.prose {
  max-width: 760px;
  margin: 0;
}
.prose h2 {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 48px 0 16px;
  line-height: 1.2;
}
.prose h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  margin: 32px 0 12px;
  letter-spacing: -0.01em;
}
.prose p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.prose ul, .prose ol {
  margin: 0 0 16px 24px;
  color: var(--ink-soft);
}
.prose li {
  margin-bottom: 8px;
  line-height: 1.7;
}
.prose strong { color: var(--ink); font-weight: 600; }
.prose code {
  background: var(--bg-warm);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--accent-deep);
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14px;
}
.prose th, .prose td {
  border: 1px solid var(--line);
  padding: 12px 16px;
  text-align: left;
}
.prose th {
  background: var(--bg-warm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}
.prose td { color: var(--ink-soft); }

/* CALLOUT */
.callout {
  background: var(--paper);
  border-left: 3px solid var(--accent);
  padding: 20px 24px;
  margin: 24px 0;
  border-radius: 0 4px 4px 0;
}
.callout-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.callout p { margin: 0; }

/* TILES */
.calc-grid-related {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.calc-tile {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 24px;
  border-radius: 4px;
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: block;
}
.calc-tile::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.calc-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}
.calc-tile:hover::before { transform: scaleX(1); }

.tile-icon {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
}
.tile-name {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.tile-desc {
  font-size: 13px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* HOW-TO */
.howto {
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.howto-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 24px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 80px;
}
.howto-left h2 {
  font-family: 'Fraunces', serif;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin-bottom: 20px;
}
.howto-left h2 em { font-style: italic; color: var(--accent); }
.howto-left p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.6;
}
.step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step-num {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 400;
  font-style: italic;
  color: var(--accent);
}
.step h3 {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.step p {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.6;
}

/* FAQ */
.faq-section { background: var(--bg); }
.faq-grid { max-width: 880px; margin: 0 auto; }
.faq-item {
  border-top: 1px solid var(--line);
  padding: 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  padding: 28px 0;
  text-align: left;
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--ink);
  letter-spacing: -0.01em;
  gap: 24px;
  min-width: 0;
}
.faq-question code {
  word-break: break-word;
}
.faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.3s;
}
.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: var(--accent);
  top: 50%;
  left: 50%;
  transition: transform 0.3s;
}
.faq-icon::before {
  width: 14px; height: 1.5px;
  transform: translate(-50%, -50%);
}
.faq-icon::after {
  width: 1.5px; height: 14px;
  transform: translate(-50%, -50%);
}
.faq-item.open .faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.faq-item.open .faq-answer { max-height: 800px; }
.faq-answer-inner {
  padding: 0 0 28px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
  max-width: 720px;
}

/* Static FAQ pages (the /faq/ category pages): answers shown by default, no
   accordion toggle or +/- icon. */
.faq-static .faq-question {
  cursor: default;
  padding-bottom: 12px;
  font-size: 19px;
  margin: 0;
}
.faq-static .faq-answer {
  max-height: none;
  overflow: visible;
}
.faq-static .faq-icon { display: none; }

/* TRUST */
.trust-strip {
  background: var(--ink);
  color: var(--bg);
  padding: 24px 0;
}
.trust-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0.85;
}
.trust-num {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
  margin-right: 4px;
  text-transform: none;
}

/* FOOTER */
footer {
  background: var(--bg-warm);
  padding: 64px 0 24px;
  border-top: 1px solid var(--line);
}
.footer-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 500;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.footer-tag {
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 340px;
}
.footer-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 13px; }
.footer-col a {
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ink-muted);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.05em;
  flex-wrap: wrap;
  gap: 12px;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .calc-grid { grid-template-columns: 1fr 320px; gap: 20px; }
  .calc-grid-related { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .result-hours { font-size: 52px !important; }
  .result-panel { padding: 22px !important; }
}
@media (max-width: 900px) {
  .calc-grid { grid-template-columns: 1fr !important; }
  .result-panel { position: static; }
  .howto-inner { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .logo { font-size: 20px; gap: 8px; }
  .logo-mark { width: 28px; height: 28px; }
  .day-row {
    grid-template-columns: 80px 1fr 1fr;
    gap: 8px;
  }
  .rate-section { grid-template-columns: 1fr; }
  .result-hours { font-size: 48px; }
  .hero h1 { font-size: 36px; }
  .calc-grid-related { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .trust-inner { flex-direction: column; gap: 12px; }
}

/* PRINT */
@media print {
  /* Hide site chrome and interactive controls; keep just the content. */
  header, footer, .topbar, .trust-strip,
  .mobile-nav-drawer, .mobile-nav-toggle,
  .pv-result-actions, .pv-unit-switch,
  .theme-toggle, .pv-actions { display: none !important; }
  body { background: #fff; color: #000; }
  .calc-grid, #calc, #tool { grid-template-columns: 1fr; display: block; }
  /* The result card is dark on screen — force black-on-white for print. */
  .pv-result { background: #fff !important; color: #000 !important; border: 1px solid #999; }
  .pv-result * { color: #000 !important; }
  .pv-result-number, .pv-result-unit, .pv-cell-num, .pv-cell-unit { color: #000 !important; }
  a { color: #000 !important; text-decoration: underline; }
  @page { margin: 18mm; }
}

/* ===========================================================
   SHARE MENU + ACTION BUTTONS
   =========================================================== */
.action-row {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.action-row .share-wrap { position: relative; }
.action-row button, .action-row a {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--bg);
  padding: 7px 14px;
  font-size: 12px;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.action-row button:hover, .action-row a:hover {
  background: var(--accent);
  border-color: var(--accent);
}

.share-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 12px 32px rgba(26, 22, 18, 0.18);
  min-width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s;
  z-index: 50;
}
.share-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.share-menu button {
  width: 100%;
  background: none !important;
  border: none !important;
  padding: 9px 12px !important;
  text-align: left;
  font-size: 13px !important;
  color: var(--ink) !important;
  cursor: pointer;
  border-radius: 4px;
  display: flex !important;
  align-items: center;
  gap: 10px;
  font-family: 'Geist', sans-serif;
  font-weight: 500;
  text-transform: none !important;
  letter-spacing: 0 !important;
  transition: background 0.15s;
}
.share-menu button:hover {
  background: var(--bg-warm) !important;
  color: var(--accent) !important;
}
.share-menu .share-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 50%;
  background: var(--bg-warm);
  flex-shrink: 0;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.share-menu .divider {
  height: 1px;
  background: var(--line);
  margin: 6px 4px;
}

/* "Now" and "Swap" small inline buttons */
.inline-btn {
  background: none;
  border: 1px solid var(--line);
  padding: 4px 8px;
  font-size: 10px;
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  border-radius: 3px;
  cursor: pointer;
  margin-left: 6px;
  transition: all 0.15s;
}
.inline-btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}

/* Embed code dialog */
.embed-block {
  background: var(--bg-warm);
  border: 1px solid var(--line);
  padding: 16px;
  border-radius: 4px;
  margin: 20px 0;
}
.embed-code {
  background: var(--ink);
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 14px;
  border-radius: 4px;
  word-break: break-all;
  line-height: 1.5;
  margin-top: 12px;
}
.citation-block {
  background: var(--paper);
  border-left: 3px solid var(--gold);
  padding: 16px 20px;
  margin: 24px 0;
  font-size: 14px;
  color: var(--ink-soft);
  font-family: 'Fraunces', serif;
  font-style: italic;
}
.citation-block strong {
  font-style: normal;
  color: var(--ink);
}

/* ===========================================================
   SAVE/LOAD DIALOG
   =========================================================== */
.save-dialog {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 18, 0.6);
  z-index: 1000;
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.save-dialog.open { display: flex; }
.save-dialog-card {
  background: var(--paper);
  border-radius: 8px;
  width: 100%;
  max-width: 520px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}
.save-dialog-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.close-btn {
  background: none;
  border: none;
  font-size: 28px;
  cursor: pointer;
  color: var(--ink-muted);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.close-btn:hover { background: var(--bg-warm); color: var(--ink); }
.saved-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed var(--line-soft);
}
.saved-item:last-child { border-bottom: none; }

/* ===========================================================
   FIX: trust-strip spacing
   =========================================================== */
section + .trust-strip,
.calc-section + .trust-strip {
  margin-top: 0;
}
.trust-strip + section {
  margin-top: 0;
}
/* Ensure result-panel doesn't visually merge with trust-strip when adjacent */
.calc-section {
  padding-bottom: 60px;
}

/* ===========================================================
   ALIGNMENT FIX — make result panel column sticky
   Both columns of .calc-grid start at top. The right column
   (.result-col) sticks while scrolling so it stays beside
   the form even when the form is tall.
   =========================================================== */
.result-col {
  position: sticky;
  top: 90px;
  align-self: start;
}
.result-col .result-panel {
  position: static;
}

/* Homepage preview keeps its non-sticky behavior */
.result-col .result-panel[style*="position:static"] {
  position: static !important;
}

/* On narrower screens where columns stack, no sticky */
@media (max-width: 900px) {
  .result-col {
    position: static;
  }
}

/* Footer logo — mirrors header logo for brand consistency */
.footer-logo {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 600;
  font-variation-settings: "SOFT" 50, "opsz" 80;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.footer-logo small {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  font-weight: 700;
  color: var(--accent);
  margin-left: 2px;
  text-transform: uppercase;
}

/* ===========================================================
   LIVE CALCULATION FEEDBACK — gold pulse when numbers update
   Adds a brief warm glow to result values when they change.
   =========================================================== */
@keyframes goldPulse {
  0%   { color: var(--gold); text-shadow: 0 0 12px rgba(245, 158, 11, 0.55), 0 0 24px rgba(245, 158, 11, 0.3); }
  50%  { color: var(--gold); text-shadow: 0 0 8px rgba(245, 158, 11, 0.4), 0 0 16px rgba(245, 158, 11, 0.2); }
  100% { color: var(--bg); text-shadow: none; }
}
@keyframes goldPulseHighlight {
  0%   { color: #fcd34d; text-shadow: 0 0 12px rgba(244, 210, 138, 0.7), 0 0 24px rgba(245, 158, 11, 0.35); }
  50%  { color: var(--gold); text-shadow: 0 0 8px rgba(245, 158, 11, 0.5); }
  100% { color: var(--gold); text-shadow: none; }
}
.pulse-update {
  animation: goldPulse 0.6s ease-out;
}
.result-row.highlight .pulse-update,
.result-row.highlight.pulse-update .value,
.pulse-update.is-highlight {
  animation: goldPulseHighlight 0.6s ease-out;
}

/* Subtle border-glow on the result panel itself when any cell updates */
@keyframes panelGlow {
  0%   { box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.4), 0 8px 32px rgba(245, 158, 11, 0.18); }
  100% { box-shadow: none; }
}
.result-panel.panel-pulse {
  animation: panelGlow 0.5s ease-out;
}

/* ============================================================
   MOBILE OVERFLOW FIXES
   Prevent horizontal page scroll at <= 480px viewports.
   Tables and dense day-rows can exceed viewport width on mobile;
   wrap them so they scroll within their container, not the page.
   ============================================================ */
@media (max-width: 480px) {
  /* Hours-calculator week table: allow horizontal scroll within the days area
     so the multi-column day rows can't push the whole page wider than the viewport */
  #daysContainer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #daysContainer .day-row {
    min-width: 560px;
  }
  /* Generic content tables: scroll horizontally instead of pushing the page wide.
     Tables with multi-column content (jurisdiction tables, comparison tables, etc.)
     often have unbreakable phrases that exceed mobile viewport width.
     Making the table itself scroll horizontally fixes overflow without forcing
     long content to wrap awkwardly. */
  main table,
  .calc-content table,
  section table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Inside scrollable tables, keep cell content on one line so the scroll is meaningful
     (otherwise the table just wraps and overflow-x never kicks in) */
  main table th, main table td,
  .calc-content table th, .calc-content table td,
  section table th, section table td {
    white-space: nowrap;
  }
  /* Time-zone-converter results grid: drop to 1fr below 480px so the 220px
     minimum doesn't force overflow when there's any horizontal padding */
  #tzResults {
    grid-template-columns: 1fr !important;
  }
}

/* ===========================================================
   DARK MODE
   =========================================================== */
[data-theme="dark"] {
  --bg: #0b1220;
  --bg-warm: #111a2c;
  --paper: #131e34;
  --ink: #f1f5f9;
  --ink-soft: #cbd5e1;
  --ink-muted: #94a3b8;
  --line: #1f2937;
  --line-soft: #1a2538;
  --accent: #60a5fa;
  --accent-deep: #93c5fd;
  --accent-soft: rgba(96, 165, 250, 0.18);
  --gold: #fbbf24;
  --green: #34d399;
  --green-soft: rgba(52, 211, 153, 0.18);
}
[data-theme="dark"] header {
  background: rgba(11, 18, 32, 0.92);
}
[data-theme="dark"] .nav-dropdown-menu,
[data-theme="dark"] .share-menu {
  background: #131e34;
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] .calc-card,
[data-theme="dark"] .calc-tile,
[data-theme="dark"] .callout {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}
[data-theme="dark"] .calc-header {
  background: linear-gradient(180deg, #0e1727, var(--paper));
}
[data-theme="dark"] .topbar {
  background: #000;
}
[data-theme="dark"] code,
[data-theme="dark"] pre {
  background: #0e1727;
  color: #93c5fd;
}
/* The result card uses var(--ink) as its background, which flips light in dark
   mode. Pin it to a fixed dark surface so the white result text and the outlined
   action buttons (which assume a dark card) stay readable. */
[data-theme="dark"] .pv-result,
[data-theme="dark"] .pv-result-cell {
  background: #0e1727;
}
[data-theme="dark"] .pv-result,
[data-theme="dark"] .pv-result-number,
[data-theme="dark"] .pv-result-unit,
[data-theme="dark"] .pv-cell-num,
[data-theme="dark"] .pv-cell-unit {
  color: #f1f5f9;
}
[data-theme="dark"] .pv-unit-btn.is-active {
  background: #f1f5f9;
  color: #0e1727;
  border-color: #f1f5f9;
}
[data-theme="dark"] .pv-section {
  border-color: #ffffff;
  border-width: 2.5px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 4px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .pv-result {
  border: 2.5px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 4px 24px rgba(0,0,0,0.4);
}
[data-theme="dark"] .prose code { background: #0e1727; color: #93c5fd; }

/* Theme toggle button */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  margin-left: 4px;
}
.theme-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}
[data-theme="dark"] .theme-toggle { color: var(--gold); }

/* Mobile drawer dark-mode toggle: a full-width labelled row, not the round
   icon button used in the desktop topbar. */
.mnav-theme-li { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
.theme-toggle.mnav-theme-toggle {
  width: 100%;
  height: auto;
  border-radius: 8px;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 14px;
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-left: 0;
}
.theme-toggle.mnav-theme-toggle:hover { color: var(--accent); }

/* ===========================================================
   FILE UPLOAD ZONE
   =========================================================== */
.drop-zone {
  border: 2px dashed var(--line);
  border-radius: 6px;
  padding: 28px 20px;
  text-align: center;
  background: var(--bg-warm);
  transition: all 0.2s;
  cursor: pointer;
  margin-top: 16px;
}
.drop-zone:hover,
.drop-zone.drag-over {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.drop-zone-icon {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--ink-muted);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  color: var(--ink-muted);
}
.drop-zone.drag-over .drop-zone-icon {
  border-color: var(--accent);
  color: var(--accent);
}
.drop-zone-text {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.drop-zone-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.drop-zone input[type=file] { display: none; }

/* ===========================================================
   PREVIEW PANEL (image / file detection)
   =========================================================== */
.preview-card {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  overflow: hidden;
}
.preview-card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-warm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.preview-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.preview-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-muted);
}
.preview-body {
  padding: 20px;
  text-align: center;
  background:
    linear-gradient(45deg, var(--bg-warm) 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(-45deg, var(--bg-warm) 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(45deg, transparent 75%, var(--bg-warm) 75%) 0 0/16px 16px,
    linear-gradient(-45deg, transparent 75%, var(--bg-warm) 75%) 0 0/16px 16px,
    var(--paper);
}
.preview-body img {
  max-width: 100%;
  max-height: 360px;
  height: auto;
  display: inline-block;
  border-radius: 4px;
}
.preview-binary {
  background: var(--paper);
  padding: 24px;
  text-align: center;
  color: var(--ink-muted);
  font-size: 14px;
}
.preview-binary strong { color: var(--ink); font-family: 'JetBrains Mono', monospace; }
.preview-actions {
  padding: 12px 16px;
  border-top: 1px solid var(--line-soft);
  background: var(--bg-warm);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ===========================================================
   JWT / PEM / Basic-auth output components
   =========================================================== */
.jwt-segments {
  display: grid;
  gap: 16px;
  margin: 16px 0;
}
.jwt-segment {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper);
  overflow: hidden;
}
.jwt-segment-header {
  padding: 10px 14px;
  background: var(--bg-warm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.jwt-segment-header.header { color: #d97706; }
.jwt-segment-header.payload { color: var(--accent); }
.jwt-segment-header.signature { color: #7c3aed; }
[data-theme="dark"] .jwt-segment-header.header { color: #fbbf24; }
[data-theme="dark"] .jwt-segment-header.signature { color: #c4b5fd; }
.jwt-segment-body {
  padding: 14px 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ink);
}
.jwt-segment-body .k { color: var(--accent); }
.jwt-segment-body .s { color: #059669; }
.jwt-segment-body .n { color: #d97706; }
[data-theme="dark"] .jwt-segment-body .s { color: #34d399; }
[data-theme="dark"] .jwt-segment-body .n { color: #fbbf24; }

.claim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 12px;
}
.claim-table th, .claim-table td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  font-family: 'JetBrains Mono', monospace;
}
.claim-table th {
  background: var(--bg-warm);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  font-weight: 600;
}
.claim-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'JetBrains Mono', monospace;
}
.claim-badge.ok { background: var(--green-soft); color: #047857; }
.claim-badge.warn { background: rgba(245, 158, 11, 0.18); color: #b45309; }
.claim-badge.bad { background: #fee2e2; color: #b91c1c; }
[data-theme="dark"] .claim-badge.ok { color: #6ee7b7; }
[data-theme="dark"] .claim-badge.warn { color: #fcd34d; }
[data-theme="dark"] .claim-badge.bad { background: rgba(239, 68, 68, 0.25); color: #fca5a5; }

/* ===========================================================
   VALIDATOR RESULT BIG STATE
   =========================================================== */
.validator-state {
  padding: 32px 24px;
  text-align: center;
  border-radius: 6px;
  border: 2px solid;
  margin: 16px 0;
}
.validator-state.valid {
  background: var(--green-soft);
  border-color: var(--green);
  color: #047857;
}
.validator-state.invalid {
  background: #fee2e2;
  border-color: #ef4444;
  color: #b91c1c;
}
.validator-state.idle {
  background: var(--bg-warm);
  border-color: var(--line);
  color: var(--ink-muted);
}
[data-theme="dark"] .validator-state.valid { color: #6ee7b7; }
[data-theme="dark"] .validator-state.invalid { background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
.validator-icon {
  font-size: 40px;
  line-height: 1;
  font-family: 'Fraunces', serif;
  margin-bottom: 12px;
}
.validator-headline {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.validator-detail {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
}

/* ===========================================================
   KEYBOARD SHORTCUT HINT
   =========================================================== */
.kbd-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding: 10px 14px;
  background: var(--bg-warm);
  border-radius: 4px;
  font-size: 11px;
  color: var(--ink-muted);
  font-family: 'JetBrains Mono', monospace;
}
.kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink);
  margin: 0 2px;
}

/* Dark mode polish for input fields */
[data-theme="dark"] textarea,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] select,
[data-theme="dark"] .code-area,
[data-theme="dark"] .output-area,
[data-theme="dark"] .break-input,
[data-theme="dark"] .text-input,
[data-theme="dark"] .charset-select {
  background: #0e1727;
  border-color: var(--line);
  color: var(--ink);
}
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] input::placeholder { color: var(--ink-muted); }
[data-theme="dark"] .drop-zone { background: #0e1727; }
[data-theme="dark"] .preview-binary { background: #0e1727; color: var(--ink-soft); }
[data-theme="dark"] .calc-tab.active { background: var(--accent); color: #0b1220; }
[data-theme="dark"] .nav-cta { background: var(--accent); color: #0b1220; }
[data-theme="dark"] .btn-primary { background: var(--accent); color: #0b1220; }
[data-theme="dark"] .btn-primary:hover { background: var(--accent-deep); }
[data-theme="dark"] .btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
[data-theme="dark"] .btn-ghost:hover { color: var(--accent); border-color: var(--accent); }

/* ===========================================================
   MEGA MENU (replaces .nav-dropdown-menu when many items)
   =========================================================== */
.nav-dropdown.has-mega .nav-megamenu {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 24px 28px 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
  min-width: 760px;
  display: none;
  z-index: 200;
}
[data-theme="dark"] .nav-dropdown.has-mega .nav-megamenu {
  background: #131e34;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}
.nav-dropdown.has-mega:hover .nav-megamenu,
.nav-dropdown.has-mega:focus-within .nav-megamenu { display: block; }

.nav-megamenu-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.nav-mega-col h5 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 700;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}
.nav-mega-col a {
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  margin: 0 -10px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  line-height: 1.35;
}
.nav-mega-col a small {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  margin-top: 2px;
  font-weight: 400;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
}
.nav-mega-col a:hover {
  background: var(--bg-warm);
  color: var(--accent);
}
.nav-mega-col a:hover small { color: var(--ink-soft); }

.nav-mega-footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.nav-mega-footer a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.nav-mega-footer a:hover { text-decoration: underline; }

/* Mobile: collapse to a single column */
@media (max-width: 900px) {
  .nav-dropdown.has-mega .nav-megamenu {
    min-width: 320px;
    padding: 18px 20px 14px;
  }
  .nav-megamenu-cols { grid-template-columns: 1fr; gap: 16px; }
}

/* Hide the old .nav-dropdown-menu inside .has-mega — we use .nav-megamenu instead */
.nav-dropdown.has-mega > .nav-dropdown-menu { display: none; }

/* ===========================================================
   v3 POLISH — compressed hero, bigger inputs, bolder borders, brighter text
   =========================================================== */

/* Hero — reduce vertical space so decoder is closer to the top of the page */
.hero {
  padding-top: 36px !important;
  padding-bottom: 28px !important;
  max-width: 1280px;
  margin: 0 auto;
}
.hero h1 {
  margin-top: 10px !important;
  margin-bottom: 14px !important;
  line-height: 1.05 !important;
}
.hero p {
  margin-bottom: 14px !important;
  max-width: 760px;
}
.hero-meta {
  margin-top: 12px !important;
  gap: 14px !important;
}

/* Bigger, more prominent input/output textareas */
.code-area,
.output-area {
  min-height: 180px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 1.55 !important;
  padding: 16px 18px !important;
  color: var(--ink) !important;
  letter-spacing: 0.005em;
  border-width: 2px !important;
}
[data-theme="dark"] .code-area,
[data-theme="dark"] .output-area {
  color: #f1f5f9 !important;
}
/* Decoder input gets a touch more height because users often paste long strings */
#b64Input, #plainInput {
  min-height: 220px !important;
}

/* Bolder borders on the main decoder card and inputs */
.calc-card {
  border-width: 3px !important;
  border-color: #94a3b8 !important;
}
[data-theme="dark"] .calc-card {
  border-color: #475569 !important;
}
.code-area, .output-area, .break-input, .text-input, .charset-select {
  border-width: 2px !important;
  border-color: #cbd5e1 !important;
}
[data-theme="dark"] .code-area,
[data-theme="dark"] .output-area,
[data-theme="dark"] .break-input,
[data-theme="dark"] .text-input,
[data-theme="dark"] .charset-select {
  border-color: #334155 !important;
}

/* On focus, brighter accent border */
.code-area:focus,
.output-area:focus,
.break-input:focus,
.text-input:focus,
.charset-select:focus,
.time-input:focus-within {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft) !important;
  outline: none;
}

/* Placeholder visible but distinct */
.code-area::placeholder,
.output-area::placeholder {
  color: var(--ink-muted) !important;
  font-weight: 400;
  opacity: 0.7;
}

/* ===========================================================
   FORM OPTION LABELS — add space before <small> descriptions
   so "Live mode" and "Decode as you type" don't run together
   =========================================================== */
.option-row label small {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-muted);
  font-weight: 400;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.02em;
  text-transform: none;
}

/* Same treatment for inline option labels in random-base64 and similar tools */
.option-row > label:not(:has(small)) + small,
.option-row label + small {
  margin-left: 0.5em;
}

/* ===========================================================
   STATS PANEL — space between number and unit ("0 chars" not "0chars")
   =========================================================== */
.result-headline .unit {
  margin-left: 6px;
  font-size: 0.55em;
  color: var(--ink-muted);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: lowercase;
}

/* ===========================================================
   ADSTERRA BANNER AD PLACEHOLDER
   728x90 desktop / 320x50 mobile, centered, below the nav.
   The container reserves height to prevent CLS (Cumulative Layout Shift).
   =========================================================== */
.ad-banner {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 16px 6px;
  background: transparent;
}
.ad-banner-inner {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Desktop: 728x90 — reserve dimensions so the slot is stable */
@media (min-width: 768px) {
  .ad-banner-inner {
    width: 728px;
    height: 90px;
  }
  .ad-banner-inner.mobile { display: none; }
}
/* Mobile: 320x50 */
@media (max-width: 767px) {
  .ad-banner-inner.desktop { display: none; }
  .ad-banner-inner.mobile {
    width: 320px;
    height: 50px;
  }
}
.ad-banner-inner.desktop { width: 728px; height: 90px; }
.ad-banner-inner.mobile { width: 320px; height: 50px; }
.ad-label {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.5;
  pointer-events: none;
}

/* ===========================================================
   STATS RESULT — make the headline number prominent
   The .result-panel uses background: var(--ink) (dark navy) and
   color: var(--bg) (warm white). The headline inside must follow
   the same inverted color scheme to remain readable.
   =========================================================== */
.result-headline {
  font-family: 'Fraunces', serif;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--bg);
  margin: 4px 0 6px;
}
.result-headline .unit {
  margin-left: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  vertical-align: 0.18em;
}
.result-sub {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 4px;
}

/* ===========================================================
   FORM LABELS — bigger, more readable across all input forms
   ("Paste PEM-encoded text", "Base64 input", etc.)
   =========================================================== */
.field-group label {
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  font-weight: 600 !important;
  color: var(--ink-soft) !important;
  margin-bottom: 6px;
}
[data-theme="dark"] .field-group label { color: #cbd5e1 !important; }

/* ===========================================================
   MOBILE NAV — hamburger menu replaces hidden nav-links on small screens
   =========================================================== */
.mobile-nav-toggle {
  display: none;
  background: transparent;
  border: none;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}
.mobile-nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px auto;
  transition: transform 0.2s, opacity 0.2s;
  border-radius: 1px;
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mobile-nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
[data-theme="dark"] .mobile-nav-toggle span { background: var(--ink); }

/* Mobile nav drawer — full-width panel sliding down from the header */
.mobile-nav-drawer {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.1);
  z-index: 199;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 12px 16px 24px;
}
.mobile-nav-drawer.open { display: block; }
.mobile-nav-drawer ul { list-style: none; padding: 0; margin: 0; }
.mobile-nav-drawer > ul > li { border-bottom: 1px solid var(--line-soft); }
.mobile-nav-drawer > ul > li:last-child { border-bottom: none; }
.mobile-nav-drawer a, .mobile-nav-drawer .mnav-group-toggle {
  display: block;
  padding: 14px 8px;
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  border: none;
  text-align: left;
  width: 100%;
  cursor: pointer;
  font-family: inherit;
}
.mobile-nav-drawer a:hover, .mobile-nav-drawer .mnav-group-toggle:hover {
  color: var(--accent);
}
.mobile-nav-drawer .mnav-section {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  padding: 14px 8px 6px;
  font-weight: 600;
}
.mobile-nav-drawer .mnav-sub a {
  padding: 10px 8px 10px 20px;
  font-size: 14px;
  color: var(--ink-soft);
  font-weight: 400;
}
.mobile-nav-drawer .mnav-sub a small {
  display: block;
  font-size: 11px;
  color: var(--ink-muted);
  font-family: 'JetBrains Mono', monospace;
  margin-top: 2px;
}
.mobile-nav-drawer .mnav-cta {
  display: inline-block;
  background: var(--accent);
  color: white !important;
  border-radius: 100px;
  padding: 10px 18px;
  margin-top: 12px;
  width: auto;
  font-size: 14px;
  font-weight: 600;
}
[data-theme="dark"] .mobile-nav-drawer { background: var(--paper); }
[data-theme="dark"] .mobile-nav-drawer a { color: var(--ink); }

/* Show hamburger / hide regular nav-links on small screens (single rule, replaces the older one) */
@media (max-width: 720px) {
  .nav-links { display: none; }
  .mobile-nav-toggle { display: block; }
}

/* Make sure header has proper layout when hamburger is visible */
@media (max-width: 720px) {
  .nav {
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
  }
  /* Tighten container padding on small screens */
  .calc-card { margin-left: 8px; margin-right: 8px; }
  .calc-body { padding: 18px 16px; }
  .calc-header { padding: 18px 16px; }
  /* Smaller hero headline */
  .hero { padding-left: 16px; padding-right: 16px; }
  .hero h1 { font-size: clamp(28px, 8vw, 38px); line-height: 1.1; }
  .hero p { font-size: 15px; }
  /* Make stats panel readable */
  .result-headline { font-size: 36px; }
  /* Bigger touch targets for buttons */
  .btn, button.btn, .calc-actions button {
    min-height: 44px;
    padding: 10px 18px;
  }
  /* Stack the encode-style + options row on small screens */
  .calc-row,
  .calc-options-row,
  .field-row {
    flex-direction: column;
    gap: 12px;
  }
  /* Prevent input zoom on iOS (font-size 16+ on inputs disables auto-zoom) */
  .code-area, .output-area, .break-input, .text-input {
    font-size: 16px !important;
  }
  /* Breadcrumb wraps cleanly */
  .breadcrumb { padding: 12px 16px; flex-wrap: wrap; }
}

/* On very small screens, give nav-megamenu mobile-drawer behavior alternative
   (the megamenu hover doesn't work on touch; we hide it and rely on the drawer) */
@media (max-width: 720px) {
  .nav-dropdown.has-mega .nav-megamenu { display: none !important; }
}

/* ===========================================================
   MOBILE TABLE + WIDE CODE BLOCK OVERFLOW FIX
   On howitworks.html and any future content with tables/code,
   tables become horizontally scrollable inside a wrapper and
   long <code> blocks wrap or scroll instead of pushing the page wide.
   =========================================================== */
.prose table {
  display: block;
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
}
.prose pre,
.prose code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
}
.prose pre code { white-space: pre; }  /* preserve formatting inside code blocks */

@media (max-width: 720px) {
  .prose, .prose * {
    max-width: 100%;
  }
  .prose table {
    font-size: 13px;
  }
  .prose pre {
    font-size: 12px;
    padding: 12px;
  }
}


/* ===========================================================
   POOL CALCULATOR LAYER — styles the pv-* engine markup to the house system.
   Shared chrome (header/nav/footer/hero/prose/faq) comes from the network CSS
   above; this only adds calculator-specific rules.
   =========================================================== */

/* pool cross-section keeps WATER colours against the dark result panel */
:root{
  --pv-water:#38bdf8; --pv-water-top:#7dd3fc; --pv-floor:#0c4a6e;
  --pv-grid:#e2e8f0; --pv-dim:#64748b; --pv-label:#0f172a;
}
[data-theme="dark"]{
  --pv-water:#38bdf8; --pv-water-top:#7dd3fc; --pv-floor:#7dd3fc;
  --pv-grid:#1f2937; --pv-dim:#94a3b8; --pv-label:#f1f5f9;
}

/* hero trust row (page-level, mono) */
.pv-hero-wrap{max-width:1280px;margin:0 auto;padding:0 24px}
.trust.pv-trust{display:flex;gap:28px;flex-wrap:wrap;font-family:'JetBrains Mono',monospace;
  font-size:12px;color:var(--ink-muted);text-transform:uppercase;letter-spacing:0.1em;margin-top:4px}
.trust.pv-trust span{display:inline-flex;align-items:center;gap:7px}
.trust.pv-trust b{color:var(--ink);font-weight:600}
.trust.pv-trust .tick{color:var(--green);font-weight:bold}

/* calculator layout: editor + sticky result, viz under editor */
#calc{display:grid;grid-template-columns:1fr 380px;
  grid-template-areas:"editor result" "viz result";gap:28px;align-items:start;
  max-width:1280px;margin:0 auto;padding:0 24px 64px}
#calc>.pv-editor{grid-area:editor}
#calc>.pv-result{grid-area:result}
#calc>.pv-viz{grid-area:viz}
#calc>.pv-error{grid-area:viz}

.pv-editor{display:grid;gap:20px}
.pv-section{background:var(--paper);border:2.5px solid #94a3b8;border-radius:4px;
  padding:24px;display:grid;gap:16px;box-shadow:0 4px 24px rgba(15,23,42,0.05)}
.pv-section-head{display:flex;gap:10px;align-items:center}
.pv-label-input{flex:1;font-family:'Fraunces',serif;font-size:20px;font-weight:500;
  letter-spacing:-0.01em;border:none;border-bottom:2px solid transparent;padding:2px;
  background:transparent;color:var(--ink)}
.pv-label-input:focus{outline:none;border-bottom-color:var(--accent)}
.pv-row{display:flex;gap:14px;flex-wrap:wrap}
.pv-field{display:grid;gap:6px;flex:1;min-width:140px}
.pv-field-label{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--ink-muted);
  text-transform:uppercase;letter-spacing:0.08em;font-weight:500}
.pv-input,.pv-select{background:var(--bg);border:1px solid var(--line);border-radius:4px;
  padding:10px 12px;font-family:'JetBrains Mono',monospace;font-size:14px;outline:none;
  width:100%;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.pv-input:focus,.pv-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.pv-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;cursor:pointer}
.pv-ftin{display:flex;gap:8px}
.pv-ftin-box{position:relative;flex:1;display:flex;align-items:center}
.pv-ftin-box .pv-input{padding-right:34px}
.pv-ftin-unit{position:absolute;right:11px;font-family:'JetBrains Mono',monospace;
  color:var(--ink-muted);font-size:11px;font-weight:600;pointer-events:none}
.pv-actions{display:flex;gap:12px;flex-wrap:wrap}
.pv-btn{padding:12px 22px;border-radius:4px;border:1px solid var(--line);background:transparent;
  font-family:'Geist',sans-serif;font-weight:500;font-size:14px;cursor:pointer;color:var(--ink);transition:all .2s}
.pv-btn-add:hover{background:var(--bg-warm);border-color:var(--accent);color:var(--accent)}
.pv-btn-share{background:var(--accent);color:#fff;border-color:transparent;font-weight:600;
  box-shadow:0 2px 8px rgba(59,130,246,0.25)}
.pv-btn-share:hover{background:var(--accent-deep);box-shadow:0 4px 14px rgba(59,130,246,0.35);transform:translateY(-1px)}
.pv-btn-remove{margin-left:auto;width:36px;height:36px;padding:0;border-radius:4px;font-size:1.2rem;
  line-height:1;color:var(--ink-muted);background:var(--bg-warm)}
.pv-btn-remove:hover{color:#dc2626;background:#fef2f2;border-color:#fecaca}

.pv-result{background:var(--ink);color:var(--bg);border-radius:4px;padding:28px;position:sticky;
  top:90px;overflow:hidden;display:grid;gap:18px;align-self:start}
.pv-result::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--gold),var(--accent));z-index:1}
.pv-result-main{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pv-result-number{font-family:'Fraunces',serif;font-size:60px;font-weight:300;
  font-variation-settings:"opsz" 144,"SOFT" 30;line-height:1.02;letter-spacing:-0.04em;
  color:var(--bg);font-variant-numeric:tabular-nums}
.pv-result-unit{font-family:'JetBrains Mono',monospace;font-size:14px;color:rgba(255,255,255,0.7);
  letter-spacing:0.04em;text-transform:lowercase}
.pv-unit-switch{display:flex;gap:6px;flex-wrap:wrap}
.pv-unit-btn{padding:6px 12px;border:1px solid rgba(255,255,255,0.18);border-radius:100px;
  background:transparent;font-family:'JetBrains Mono',monospace;font-size:11px;cursor:pointer;
  color:rgba(255,255,255,0.7);text-transform:lowercase;letter-spacing:0.04em;transition:all .2s}
.pv-unit-btn:hover{border-color:rgba(255,255,255,0.4);color:#fff}
.pv-unit-btn.is-active{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.pv-result-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,0.08);
  border-radius:4px;overflow:hidden}
.pv-result-cell{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--ink)}
.pv-cell-num{font-family:'JetBrains Mono',monospace;font-weight:600;font-size:16px;color:var(--bg);
  font-variant-numeric:tabular-nums}
.pv-cell-unit{font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,0.6);font-size:10px;
  text-transform:lowercase;letter-spacing:0.04em}
.pv-breakdown{display:grid;gap:2px;border-top:1px solid rgba(255,255,255,0.1);padding-top:16px}
.pv-breakdown-row{display:flex;justify-content:space-between;align-items:baseline;
  font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,0.85);padding:5px 0}
.pv-breakdown-row span:first-child{text-transform:uppercase;letter-spacing:0.06em;font-size:11px;color:rgba(255,255,255,0.7)}
.pv-mono{color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}

.pv-viz{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:24px;
  box-shadow:0 4px 24px rgba(15,23,42,0.05)}
.pv-error{background:#fff7ed;border:1px solid #fed7aa;color:#9a3412;padding:16px;border-radius:4px}

.pv-note{margin:28px auto;max-width:1232px;font-size:14px;color:var(--ink-soft);
  background:var(--bg-warm);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:4px;padding:16px 18px;line-height:1.6}
.pv-note b{color:var(--ink)}

@media (max-width:900px){
  #calc{grid-template-columns:1fr;grid-template-areas:"editor" "result" "viz"}
  .pv-result{position:static}
  .pv-result-number{font-size:48px}
}
@media (max-width:480px){
  .pv-result-grid{grid-template-columns:1fr}
  .pv-field{min-width:120px}
}

/* downstream tool pages: same two-column layout as the hub */
#tool{display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start;
  max-width:1280px;margin:0 auto;padding:0 24px 48px}
#tool>.pv-editor{min-width:0}
@media (max-width:900px){#tool{grid-template-columns:1fr}#tool .pv-result{position:static}}

/* Safety callout (e.g. call 811 before digging) — high-visibility warning */
.callout-safety {
  border-left-color: #dc2626;
  background: rgba(220, 38, 38, 0.06);
}
.callout-safety .callout-title { color: #dc2626; }

/* ---- Grouped (multi-column) Tools dropdown ---- */
.nav-dropdown-menu-grouped {
  display: flex;
  gap: 8px;
  min-width: 720px;
  padding: 16px;
}
.nav-dropdown-group {
  flex: 1;
  min-width: 170px;
}
.nav-dropdown-heading {
  font-family: var(--mono, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 4px 14px 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.nav-dropdown-menu-grouped a { padding: 8px 14px; }

/* keep the wide grouped menu on-screen (it's centered via translateX -50%) */
.nav-dropdown-wide .nav-dropdown-menu-grouped { max-width: 92vw; }

/* Mobile drawer sub-section headings */
.mobile-nav-drawer .mnav-subheading {
  font-family: var(--mono, monospace);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 10px 0 4px;
}

/* Locked (read-only) shape field on single-shape pages */
.pv-locked-field {
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-warm);
  color: var(--ink-muted);
  font-size: 14px;
}

/* Two-view visualizer: top-down footprint + side cross-section */
.pv-viz-top, .pv-viz-cross { width: 100%; }
.pv-viz-top svg, .pv-viz-cross svg { width: 100%; height: auto; display: block; }
.pv-viz-top { margin-bottom: 4px; }

/* Visualizer caption explaining the side/depth view's role */
.pv-viz-note {
  font-size: 12px;
  color: var(--ink-muted);
  margin: 6px 2px 0;
  line-height: 1.5;
}

/* Step-by-step HowTo + common-sizes reference table */
.pv-howto-steps { margin: 12px 0 16px; padding-left: 0; }
.pv-howto-steps li { margin-bottom: 10px; line-height: 1.6; }
.pv-sizes-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 4px;
  font-size: 14px;
}
.pv-sizes-table th, .pv-sizes-table td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
}
.pv-sizes-table th {
  font-family: var(--mono, monospace);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.pv-sizes-table td:last-child {
  font-family: var(--mono, monospace);
  font-variant-numeric: tabular-nums;
}

/* Categorized calculator directory on the hub */
/* Calculator directory — matched to Construction Calc HQ's .calc-tile spec
   (their actual CSS): Fraunces serif names, 24px padding, 4px radius, and a
   sliding accent bar on hover. Same font system the network already uses. */
.pv-directory { margin-top: 8px; }
.pv-dir-group { margin-bottom: 44px; }
.pv-dir-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 16px;
  padding-bottom: 0;
}
.pv-dir-count {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
  margin-left: 4px;
}
.pv-dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.pv-dir-card {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 18px 20px;
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.pv-dir-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}
.pv-dir-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.07);
}
.pv-dir-card:hover::before { transform: scaleX(1); }
.pv-dir-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  margin-top: 2px;
}
.pv-dir-icon svg { width: 20px; height: 20px; display: block; }
.pv-dir-card-body { display: block; min-width: 0; }
.pv-dir-name {
  display: block;
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  color: var(--accent);
}
.pv-dir-desc {
  display: block;
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* FAQ hub cards, breadcrumbs, and category tool links */
.pv-faq-card { display: flex; flex-direction: column; }
.pv-faq-count {
  display: inline-block;
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--accent);
}
.pv-crumbs {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 0;
  font-size: 13px;
  color: var(--ink-muted);
}
.pv-crumbs a { color: var(--ink-muted); text-decoration: none; }
.pv-crumbs a:hover { color: var(--accent); text-decoration: underline; }
.pv-crumbs [aria-current="page"] { color: var(--ink); }
.pv-crumb-sep { color: var(--line); margin: 0 2px; }
.pv-faq-toollink {
  color: var(--ink);
  text-decoration: none;
}
.pv-faq-toollink:hover { color: var(--accent); text-decoration: underline; }

/* Free-tools network cards: external links to sibling sites */
/* Network cards have no icon, so reset the icon-row flex layout from
   .pv-dir-card back to a simple stacked block (name above description). */
.pv-net-card {
  display: block;
  padding: 18px 20px;
}
.pv-net-card .pv-dir-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin-bottom: 6px;
}
.pv-net-card:hover .pv-dir-name {
  text-decoration: underline;
}
.pv-net-card .pv-dir-name::after {
  content: ' ↗';
  color: var(--accent);
  font-size: 12px;
}

/* Result action buttons: PDF / Copy / Share */
.pv-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.pv-result-actions .pv-btn {
  flex: 1 1 auto;
  min-width: 104px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  border-width: 2px;
}
.pv-btn-pdf {
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
}
.pv-btn-pdf:hover { filter: brightness(1.08); }
/* Outlined actions sit on the DARK result card, so they need light text. */
.pv-btn-copy, .pv-btn-share2, .pv-btn-embed {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.pv-btn-copy:hover, .pv-btn-share2:hover, .pv-btn-embed:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

/* Embed mode: ?embed=1 strips site chrome, leaving only the calculator. */
.pv-embed .topbar,
.pv-embed header,
.pv-embed footer,
.pv-embed .pv-directory,
.pv-embed .section-header,
.pv-embed .pv-note,
.pv-embed .prose,
.pv-embed .howto,
.pv-embed .pv-howto-steps,
.pv-embed .faq-block,
.pv-embed .pv-sizes-table,
.pv-embed .callout-safety { display: none !important; }
.pv-embed main, .pv-embed #calc, .pv-embed #tool { margin: 0; padding: 12px; }
.pv-embed body { background: var(--bg); }
/* a small "powered by" credit shown only in embeds */
.pv-embed-credit { display: none; }
.pv-embed .pv-embed-credit {
  display: block; text-align: center; font-size: 12px;
  padding: 8px; color: var(--ink-muted);
}
.pv-embed .pv-embed-credit a { color: var(--accent); text-decoration: none; }

/* Embed dialog (the snippet popup) */
.pv-embed-dialog {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); padding: 20px;
}
.pv-embed-dialog[hidden] { display: none; }
.pv-embed-box {
  background: var(--paper); color: var(--ink);
  border-radius: 12px; max-width: 520px; width: 100%;
  padding: 24px; box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
.pv-embed-box h3 { margin: 0 0 6px; font-size: 18px; }
.pv-embed-box p { margin: 0 0 14px; font-size: 13px; color: var(--ink-muted); }
.pv-embed-code {
  width: 100%; box-sizing: border-box; min-height: 92px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  padding: 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg-warm); color: var(--ink); resize: vertical;
}
.pv-embed-actions { display: flex; gap: 8px; margin-top: 14px; }
.pv-embed-actions .pv-btn { flex: 1 1 auto; cursor: pointer; text-align: center; }
.pv-embed-preview {
  margin-top: 14px; border: 1px dashed var(--line); border-radius: 8px;
  overflow: hidden; background: var(--bg);
}

/* Static page "last updated" line */
.page-updated { font-size: 13px; color: var(--ink-muted); margin: 0 0 18px; }