/* ===========================================================
   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);
}
.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);
  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 auto;
}
.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;
}

/* 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: 14px;
  color: var(--ink-muted);
  line-height: 1.6;
  max-width: 320px;
}
.footer-col h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  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: 10px; }
.footer-col a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  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: 12px;
  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 {
  header, footer, .topbar, .trust-strip, .calc-actions, .calc-tabs { display: none; }
  .calc-grid { grid-template-columns: 1fr; }
  .result-panel { background: white; color: black; border: 2px solid black; }
  .result-panel * { color: black !important; }
}

/* ===========================================================
   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;
}
[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); }

/* ===========================================================
   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: 2px !important;
  border-color: #cbd5e1 !important;
}
[data-theme="dark"] .calc-card {
  border-color: #334155 !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;
  }
}