/* ===========================================================
   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: 10px;
  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: 14px;
  font-weight: 600;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.breadcrumb a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  margin-right: 8px;
}
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb span { margin-right: 8px; color: var(--ink-muted); font-weight: 400; }

/* 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;
}
.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: 900px) {
  .calc-grid { grid-template-columns: 1fr; }
  .result-panel { position: static; }
  .howto-inner { grid-template-columns: 1fr; gap: 40px; }
}
@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: 720px) {
  .nav-links { display: none; }
  .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: 10px;
  letter-spacing: 0.15em;
  font-weight: 400;
  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;
  }
}

/* ============================================================
   Ad banner — Adsterra 728x90 desktop / 320x50 mobile
   ============================================================ */
.ad-banner {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px auto 0;
  padding: 0 24px;
  width: 100%;
  max-width: 1280px;
  min-height: 90px;
}
.ad-banner-inner {
  display: none;
  line-height: 0;
}
.ad-banner-inner.desktop {
  width: 728px;
  height: 90px;
}
.ad-banner-inner.mobile {
  width: 320px;
  height: 50px;
}
@media (min-width: 768px) {
  .ad-banner-inner.desktop { display: block; }
}
@media (max-width: 767px) {
  .ad-banner-inner.mobile { display: block; }
  .ad-banner { min-height: 50px; }
}
@media print {
  .ad-banner { display: none !important; }
}