:root {
  --navy: #244f7d;
  --navy-dark: #173654;
  --blue: #3d88bc;
  --blue-soft: #eaf4fa;
  --yellow: #ffd96a;
  --ink: #17324d;
  --muted: #5c7185;
  --line: #c9dbe8;
  --paper: #ffffff;
  --background: #f4f8fb;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 68px;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: "Segoe UI", Calibri, Arial, sans-serif;
  line-height: 1.55;
}

a { color: inherit; }

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

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

:focus-visible {
  outline: 3px solid rgba(61, 136, 188, 0.42);
  outline-offset: 3px;
}

.site-header {
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  min-height: 52px;
  padding: 0 clamp(1.25rem, 4vw, 3.5rem);
  position: sticky;
  top: 0;
  z-index: 50;
}

.brand {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  text-decoration: none;
}

.brand img { height: auto; width: 150px; }

.site-nav { align-items: center; display: flex; gap: clamp(0.9rem, 2vw, 1.4rem); }

.site-nav a {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 650;
  text-decoration: none;
}

.site-nav a:hover, .site-nav a:focus-visible { color: var(--navy); }

.nav-toggle {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--navy-dark);
  cursor: pointer;
  display: none;
  font-size: 0.84rem;
  font-weight: 800;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
}

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  background: currentColor;
  border-radius: 99px;
  display: block;
  height: 2px;
  transition: transform 160ms ease, opacity 160ms ease;
  width: 18px;
}

.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before, .nav-toggle-icon::after { content: ""; left: 0; position: absolute; }
.nav-toggle-icon::before { top: -5px; }
.nav-toggle-icon::after { top: 5px; }
.site-header[data-menu-open="true"] .nav-toggle-icon { background: transparent; }
.site-header[data-menu-open="true"] .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.site-header[data-menu-open="true"] .nav-toggle-icon::after { top: 0; transform: rotate(-45deg); }

.button-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.15rem;
}

.text-link, .card-link {
  color: var(--navy);
  font-weight: 800;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.hero {
  align-items: center;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 217, 106, 0.34), transparent 24rem),
    linear-gradient(145deg, #f8fbfd 0%, #eaf4fa 100%);
  display: grid;
  gap: clamp(1.8rem, 4.4vw, 4rem);
  grid-template-columns: minmax(0, 1.2fr) minmax(270px, 0.8fr);
  padding: clamp(3.1rem, 5.2vw, 4.75rem) 5vw;
}

.hero-copy { max-width: 850px; }

.hero h1 {
  font-size: clamp(3rem, 4vw, 3.5rem);
  line-height: 1.03;
  margin-bottom: 1.1rem;
}

.eyebrow {
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  margin: 0 0 1rem;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  color: var(--navy-dark);
  font-size: clamp(2.25rem, 3.2vw, 2.625rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
  margin-bottom: 1.25rem;
}

h2 {
  color: var(--navy-dark);
  font-size: clamp(1.75rem, 2.3vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1.12;
}

h3 {
  color: var(--navy-dark);
  font-size: clamp(1.25rem, 1.8vw, 1.4375rem);
  line-height: 1.15;
}

.lead {
  color: var(--muted);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  max-width: 760px;
}

.button {
  align-items: center;
  background: var(--navy);
  border: 2px solid var(--navy);
  border-radius: 10px;
  color: var(--paper);
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  margin-top: 0.75rem;
  min-height: 44px;
  padding: 0.65rem 1.1rem;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease;
}

.button:hover, .button:focus-visible {
  background: var(--navy-dark);
  transform: translateY(-2px);
}

.principles {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 16px 45px rgba(23, 54, 84, 0.11);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}

.principles span {
  color: var(--blue);
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  margin-bottom: 1.5rem;
}

.principles strong {
  color: var(--navy-dark);
  display: block;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.12;
}

.principles p { color: var(--muted); margin: 1rem 0 0; }

.products { padding: clamp(3.1rem, 5.3vw, 4.5rem) 5vw; }

.explore {
  margin: 0 auto;
  max-width: 1240px;
  padding: clamp(2.9rem, 4.5vw, 4rem) 5vw;
}

.explore-access { padding-bottom: clamp(2.6rem, 4vw, 3.5rem); }

.explore-topics {
  border-top: 1px solid var(--line);
  padding-top: clamp(3rem, 4.8vw, 4.2rem);
}

.listing-page {
  margin: 0 auto;
  max-width: 1240px;
  padding: clamp(1.75rem, 3vw, 2.625rem) 5vw clamp(3rem, 5vw, 4.25rem);
}

.content-page {
  margin: 0 auto;
  max-width: 1200px;
  padding: clamp(1.75rem, 3vw, 2.625rem) 5vw clamp(3rem, 5vw, 4.25rem);
}

.tool-page {
  margin: 0 auto;
  max-width: 1240px;
  padding: clamp(1.75rem, 3vw, 2.625rem) 5vw clamp(3rem, 5vw, 4.25rem);
}

.explore-grid,
.card-grid {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1.45rem;
}

.explore-card,
.listing-card,
.related-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.15rem, 2vw, 1.6rem);
}

.explore-card h3,
.listing-card h2,
.listing-card h3,
.related-card h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.5rem);
  margin: 0.7rem 0 0.8rem;
}

.explore-card p,
.listing-card p,
.related-card p { color: var(--muted); }

.card-number,
.card-kicker {
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.page-intro {
  max-width: 920px;
  padding-bottom: 1.6rem;
}

.page-intro h1,
.content-header h1,
.tool-header h1 {
  font-size: clamp(2.25rem, 3.2vw, 2.625rem);
  letter-spacing: -0.04em;
  line-height: 1.04;
}

.content-header h1.long-title,
.tool-header h1.long-title {
  font-size: clamp(2.1rem, 2.9vw, 2.5rem);
  max-width: 860px;
}

.page-intro .lead { max-width: 780px; }

.breadcrumb {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 1.2rem;
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.45rem;
}

.breadcrumb a { color: var(--navy); }

.listing-card { display: flex; flex-direction: column; }
.listing-card .card-link { margin-top: auto; }

.tool-category + .tool-category {
  border-top: 1px solid var(--line);
  margin-top: 2.35rem;
  padding-top: 2.15rem;
}

.category-header { max-width: 900px; }
.category-header h2 { font-size: clamp(1.65rem, 2.2vw, 2rem); margin-bottom: 0; }

.content-layout {
  display: grid;
  gap: clamp(2.25rem, 4.3vw, 4rem);
  grid-template-columns: minmax(0, 1fr) 290px;
}

.content-header,
.tool-header { max-width: 930px; }

.content-meta {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  gap: 0.6rem 1.2rem;
  margin: 1rem 0 1.7rem;
}

.article-body {
  font-size: 1.06rem;
  max-width: 740px;
}

.article-body h2 {
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  margin-top: 2.1rem;
}

.article-body h3 { font-size: clamp(1.25rem, 1.8vw, 1.4375rem); margin-top: 1.8rem; }
.article-body p, .article-body li { color: #344f67; }
.article-body li + li { margin-top: 0.45rem; }

.callout,
.side-card {
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.25rem;
}

.callout { margin: 1.7rem 0; }
.callout p:last-child, .side-card p:last-child { margin-bottom: 0; }
.side-card { position: sticky; top: 84px; }

.tool-shell {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 14px 42px rgba(23, 54, 84, 0.08);
  margin: 1.5rem 0 2.35rem;
  max-width: 900px;
  padding: clamp(1.15rem, 2.5vw, 1.75rem);
}

.tool-shell-wide { max-width: none; }

.privacy-note {
  align-items: flex-start;
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--muted);
  display: flex;
  font-size: 0.88rem;
  gap: 0.65rem;
  margin: 0 0 1.2rem;
  padding: 0.85rem 1rem;
}

.privacy-note strong { color: var(--navy-dark); }

.text-tool-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.text-panel { min-width: 0; }

.text-panel-header {
  align-items: center;
  display: flex;
  gap: 0.8rem;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.text-panel-header label,
.text-panel-header strong {
  color: var(--navy-dark);
  font-size: 0.92rem;
  font-weight: 800;
}

.text-counter { color: var(--muted); font-size: 0.78rem; }

.text-area {
  background: #fff;
  border: 1px solid #9db8ca;
  border-radius: 10px;
  color: var(--ink);
  font-family: Consolas, "Courier New", monospace;
  line-height: 1.5;
  min-height: 300px;
  padding: 0.9rem;
  resize: vertical;
  tab-size: 4;
  width: 100%;
}

.text-area:focus { border-color: var(--blue); }
.text-area-short { min-height: 220px; }

.text-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin: 1rem 0;
}

.action-button,
.secondary-button,
.quiet-button {
  border-radius: 9px;
  cursor: pointer;
  font-weight: 800;
  min-height: 44px;
  padding: 0.65rem 1rem;
}

.action-button { background: var(--navy); border: 1px solid var(--navy); color: #fff; }
.action-button:hover, .action-button:focus-visible { background: var(--navy-dark); }
.secondary-button { background: #fff; border: 1px solid var(--navy); color: var(--navy); }
.secondary-button:hover, .secondary-button:focus-visible { background: var(--blue-soft); }
.quiet-button { background: transparent; border: 1px solid var(--line); color: var(--muted); }
.quiet-button:hover, .quiet-button:focus-visible { border-color: var(--blue); color: var(--navy); }

.tool-status {
  color: var(--muted);
  font-size: 0.88rem;
  min-height: 1.4em;
}

.tool-status[data-state="success"] { color: #25633f; }
.tool-status[data-state="error"] { color: #9b3d2d; }
.tool-status[data-state="warning"] { color: #795800; }

.option-grid {
  display: grid;
  gap: 0.9rem 1.2rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.2rem 0;
}

.check-option {
  align-items: flex-start;
  color: var(--ink);
  display: flex;
  font-size: 0.9rem;
  gap: 0.55rem;
}

.check-option input { margin-top: 0.25rem; }

.compact-field { max-width: 220px; }
.compact-field input, .compact-field select { min-height: 44px; }

.text-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.8rem 0;
}

.stat-chip {
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy-dark);
  font-size: 0.8rem;
  font-weight: 750;
  padding: 0.35rem 0.7rem;
}

.inspector-view {
  background: #102a42;
  border-radius: 10px;
  color: #eef7fc;
  font-family: Consolas, "Courier New", monospace;
  line-height: 1.65;
  margin: 0;
  max-height: 420px;
  min-height: 180px;
  overflow: auto;
  padding: 1rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.visible-space { color: #8fcfff; }
.visible-control { background: #fff0b8; border-radius: 3px; color: #4a3a00; padding: 0 0.18em; }
.visible-invisible { background: #ffd4c9; border-radius: 3px; color: #6f2418; padding: 0 0.18em; }

.line-ending-diagnostic {
  border-top: 1px solid var(--line);
  margin-top: 0.9rem;
  padding-top: 0.8rem;
}

.line-ending-diagnostic > strong { color: var(--navy-dark); font-size: 0.88rem; }
.line-ending-diagnostic .text-stats { margin: 0.55rem 0; }

.line-ending-message {
  color: var(--muted);
  font-size: 0.84rem;
  margin: 0;
}

.line-ending-message[data-state="success"] { color: #25633f; }
.line-ending-message[data-state="warning"] { color: #795800; font-weight: 750; }

.line-ending-source {
  color: var(--muted);
  font-size: 0.78rem;
  margin: 0.35rem 0 0;
}

.line-ending-source[data-state="warning"] { color: #795800; }

.inspector-glossary {
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: 1rem;
  padding: 0.85rem 1rem;
}

.inspector-glossary summary { color: var(--navy-dark); cursor: pointer; font-weight: 800; }

.inspector-glossary dl {
  display: grid;
  gap: 0.75rem 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 1rem 0;
}

.inspector-glossary dl div { border-top: 1px solid rgba(36, 79, 125, 0.16); padding-top: 0.65rem; }
.inspector-glossary dt { color: var(--navy-dark); font-weight: 800; }
.inspector-glossary dd { color: var(--muted); font-size: 0.86rem; margin: 0.2rem 0 0; }
.inspector-glossary p { color: var(--muted); font-size: 0.86rem; margin: 0; }
.inspector-glossary a { color: var(--navy); font-weight: 750; }

.diff-options {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.2rem;
  margin: 1rem 0;
}

.font-control {
  align-items: center;
  color: var(--navy-dark);
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 750;
  gap: 0.5rem;
  margin-left: auto;
}

.font-control select {
  background: #fff;
  border: 1px solid #9db8ca;
  border-radius: 8px;
  color: var(--ink);
  min-height: 40px;
  padding: 0.45rem 0.65rem;
}

.text-comparer { --diff-font-size: 11px; }
.text-comparer .text-area,
.text-comparer .diff-line-content { font-size: var(--diff-font-size); }

.diff-map-help {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0.6rem 0 0.45rem;
  text-align: right;
}

.diff-results-wrap {
  padding-right: 28px;
  position: relative;
  scroll-margin-top: 88px;
}

.diff-grid {
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 620px;
  overflow: auto;
}

.diff-overview {
  background: #dbe8f0;
  border: 1px solid #b8cedd;
  border-radius: 999px;
  bottom: 12px;
  position: absolute;
  right: 4px;
  top: 46px;
  width: 14px;
}

.diff-overview:empty { display: none; }

.diff-marker {
  border: 2px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(23, 54, 84, 0.18);
  cursor: pointer;
  height: 12px;
  left: 50%;
  min-height: 0;
  padding: 0;
  position: absolute;
  transform: translate(-50%, -50%);
  width: 12px;
}

.diff-marker:hover,
.diff-marker:focus-visible { box-shadow: 0 0 0 3px rgba(61, 136, 188, 0.3); }
.diff-marker-changed { background: #d49a00; }
.diff-marker-added { background: #318759; }
.diff-marker-removed { background: #c9503e; }

.diff-panel { min-width: 0; }
.diff-panel + .diff-panel { border-left: 1px solid var(--line); }
.diff-heading { background: var(--blue-soft); color: var(--navy-dark); font-weight: 800; padding: 0.7rem 0.9rem; position: sticky; top: 0; z-index: 1; }
.diff-row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); min-height: 1.8rem; }
.diff-row + .diff-row { border-top: 1px solid #e5eef4; }
.diff-line-number { background: #f1f6f9; color: #718698; font-family: Consolas, monospace; padding: 0.25rem 0.55rem; text-align: right; user-select: none; }
.diff-line-content { font-family: Consolas, "Courier New", monospace; line-height: 1.45; overflow-wrap: anywhere; padding: 0.25rem 0.6rem; white-space: pre-wrap; }

.example-code {
  background: #102a42;
  border-radius: 10px;
  color: #eef7fc;
  font-family: Consolas, "Courier New", monospace;
  line-height: 1.65;
  overflow-x: auto;
  padding: 1rem;
  white-space: pre-wrap;
}
.diff-row-added .diff-line-content { background: #e6f6ec; }
.diff-row-removed .diff-line-content { background: #ffebe7; }
.diff-row-changed .diff-line-content { background: #fff5d8; }
.diff-row-empty .diff-line-content { background: #f6f8fa; }
.diff-mark-added { background: #9ed7ae; color: inherit; }
.diff-mark-removed { background: #f3aaa0; color: inherit; }

.form-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.field { display: flex; flex-direction: column; gap: 0.45rem; }
.field-wide { grid-column: 1 / -1; }

.field label {
  color: var(--navy-dark);
  font-size: 0.9rem;
  font-weight: 750;
}

.field input,
.field select {
  background: #fff;
  border: 1px solid #9db8ca;
  border-radius: 10px;
  color: var(--ink);
  min-height: 50px;
  padding: 0.7rem 0.85rem;
  width: 100%;
}

.field input:focus,
.field select:focus { border-color: var(--blue); }

.field input:disabled {
  background: #edf3f7;
  color: var(--muted);
}

.form-section-title {
  border-top: 1px solid var(--line);
  color: var(--navy-dark);
  font-size: 1rem;
  font-weight: 800;
  grid-column: 1 / -1;
  margin: 0.4rem 0 0;
  padding-top: 1.35rem;
}

.field-help {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0;
}

.advanced-options {
  border-top: 1px solid var(--line);
  margin-top: 1.4rem;
  padding-top: 1.2rem;
}

.advanced-options summary {
  color: var(--navy);
  cursor: pointer;
  font-weight: 800;
}

.advanced-options .form-grid { margin-top: 1.2rem; }

.calculator-result {
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 12px;
  margin-top: 1.25rem;
  min-height: 94px;
  padding: 1.2rem 1.35rem;
}

.calculator-result[data-state="error"] {
  background: #fff5f2;
  border-color: #d99682;
}

.result-value {
  color: var(--navy-dark);
  display: block;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 850;
  line-height: 1.15;
}

.result-detail { color: var(--muted); margin: 0.4rem 0 0; }

.result-summary {
  color: var(--navy-dark);
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  margin: 0;
}

.result-summary-primary {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
}

.result-summary-primary span {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 750;
  text-transform: uppercase;
}

.result-summary-primary strong {
  color: var(--navy-dark);
  display: block;
  flex-basis: 100%;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.05;
}

.result-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 1rem;
}

.result-item {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem;
}

.result-item span {
  color: var(--muted);
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.result-item strong {
  color: var(--navy-dark);
  font-size: 1.08rem;
}

.result-footnote {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 0.9rem 0 0;
}

.tool-copy { max-width: 850px; }
.tool-copy h2 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); margin-top: 2.4rem; }
.formula { font-family: Consolas, "Courier New", monospace; }
.page-disclaimer { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.88rem; margin: 1.5rem 0 0; padding-top: 1rem; }

.related-section {
  border-top: 1px solid var(--line);
  margin-top: 2.1rem;
  padding-top: 1.65rem;
}

.related-section > h2,
.related-section .section-heading h2 { font-size: clamp(1.4rem, 2vw, 1.7rem); margin-bottom: 0.55rem; }

.related-section > .eyebrow { margin-bottom: 0.65rem; }
.related-section > p:not(.eyebrow) { margin-bottom: 0.65rem; max-width: 820px; }

.related-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.section-heading { max-width: 900px; }

.product-card {
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 16px 50px rgba(23, 54, 84, 0.09);
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  margin-top: 2rem;
  overflow: hidden;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
}

.tag {
  color: var(--blue);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.product-copy h3 { margin: 0.7rem 0 1rem; }

.product-copy p, .product-copy li { color: var(--muted); }

.product-copy ul { padding-left: 1.2rem; }

.product-visual {
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  padding: 1rem;
}

.product-visual img { border-radius: 12px; height: auto; width: 100%; }
.products-all { margin: 1.5rem 0 0; text-align: right; }
.products-all .card-link { font-weight: 800; }

.learn-callout {
  padding: 0 5vw clamp(3.1rem, 5.3vw, 4.5rem);
}

.learn-callout-panel {
  align-items: center;
  background: #fffaf0;
  border: 1px solid #ead9a8;
  border-left: 6px solid var(--yellow);
  border-radius: 20px;
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1fr) auto;
  margin: 0 auto;
  max-width: 1240px;
  overflow: hidden;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}

.learn-callout-copy { max-width: 800px; }

.learn-callout-copy h2 { margin-bottom: 0.8rem; }

.learn-audience {
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--navy);
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
  padding: 0.32rem 0.7rem;
  text-transform: uppercase;
}

.learn-callout-lead {
  color: var(--navy-dark);
  font-size: clamp(1.08rem, 1.5vw, 1.25rem);
  font-weight: 750;
  line-height: 1.35;
  margin-bottom: 0.6rem;
}

.learn-callout-lead + p {
  color: var(--muted);
  margin-bottom: 0.4rem;
  max-width: 760px;
}

.learn-callout .button span { margin-left: 0.35rem; }

.learn-callout-visual {
  align-items: center;
  display: flex;
  justify-content: center;
  width: clamp(110px, 12vw, 160px);
}

.learn-callout-visual img { height: auto; width: 100%; }

.about {
  background: var(--navy);
  color: rgba(255, 255, 255, 0.82);
  padding: clamp(3.1rem, 5.3vw, 4.5rem) 5vw;
}

.about .eyebrow { color: var(--yellow); }

.about h2 { color: var(--paper); max-width: 900px; }

.about > p:last-child { font-size: 1rem; max-width: 820px; }

.site-footer {
  background: #102a42;
  color: rgba(255, 255, 255, 0.72);
  padding: 1.25rem 5vw;
}

.footer-inner {
  align-items: center;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1240px;
}

.footer-brand-block { max-width: 640px; }
.footer-brand { display: inline-flex; }
.footer-brand img { height: auto; width: 160px; }
.site-footer p { font-size: 0.82rem; margin: 0.45rem 0 0; }

.footer-actions {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  text-align: right;
}

.footer-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: flex-end; }
.footer-nav a { color: rgba(255, 255, 255, 0.76); font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.footer-contact { color: var(--paper); font-size: 0.86rem; font-weight: 750; }
.footer-social { display: flex; gap: 0.4rem; }
.footer-social a {
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  height: 2rem;
  justify-content: center;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
  width: 2rem;
}
.footer-social a:hover,
.footer-social a:focus-visible { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.45); color: #fff; }
.footer-social svg { fill: currentColor; height: 1rem; width: 1rem; }

.task-guide .task-title {
  align-items: baseline;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.8rem;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  padding-top: 1rem;
}

.task-guide .task-title + p {
  line-height: 1.62;
  margin-bottom: 1.8rem;
}

.task-guide .task-title + p strong {
  color: var(--navy);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  white-space: nowrap;
}

.task-number {
  color: var(--blue);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.tool-stage-label {
  align-items: center;
  color: var(--navy-dark);
  display: flex;
  font-size: 0.85rem;
  font-weight: 800;
  gap: 0.6rem;
  margin: 1.2rem 0 1rem;
  text-transform: uppercase;
}

.tool-stage-label span {
  align-items: center;
  background: var(--navy);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

.prompt-tool .text-toolbar {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  margin: 1.25rem 0;
  padding: 1rem 0;
}

.prompt-tool .text-toolbar > .tool-stage-label {
  margin: 0 auto 0 0;
}

.prompt-result-panel .text-toolbar {
  border-bottom: 0;
  margin-bottom: 0;
}

.prompt-result-panel {
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 14px;
  padding: clamp(1rem, 2vw, 1.4rem);
  scroll-margin-top: 76px;
}

.prompt-result-panel[data-state="ready"] {
  background: #f3f9fc;
  border-color: #8eb9d5;
  border-left-color: var(--navy);
  box-shadow: 0 12px 30px rgba(23, 54, 84, 0.1);
}

.prompt-result-panel .tool-stage-label { margin-top: 0; }
.prompt-result-panel .tool-status { margin-bottom: 0; }

.price-tool form {
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1rem, 2.3vw, 1.5rem);
}

.price-tool .calculator-result {
  border-left-width: 6px;
  box-shadow: 0 10px 28px rgba(23, 54, 84, 0.07);
}

.price-tool .result-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.price-tool .result-item { padding: 0.8rem; }
.price-tool .result-footnote { border-top: 1px solid var(--line); padding-top: 0.75rem; }

@media (max-width: 900px) {
  .hero, .product-card { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .principles { max-width: 620px; }
  .content-layout { grid-template-columns: 1fr; }
  .side-card { position: static; }
  .option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .hero, .products, .about, .explore, .learn-callout, .listing-page, .content-page, .tool-page { padding-left: 1.2rem; padding-right: 1.2rem; }
  h1 { font-size: clamp(2.15rem, 10vw, 2.625rem); }
  .hero { padding-bottom: 2.85rem; padding-top: 2.85rem; }
  .hero h1 { font-size: clamp(2.4rem, 10.5vw, 3rem); }
  .product-card { border-radius: 18px; padding: 1.3rem; }
  .learn-callout-panel { grid-template-columns: 1fr; padding: 1.3rem; }
  .learn-callout-visual { display: none; }
  .explore-grid, .card-grid, .form-grid, .related-grid, .result-grid, .text-tool-grid, .option-grid, .diff-grid { grid-template-columns: 1fr; }
  .diff-panel + .diff-panel { border-left: 0; border-top: 1px solid var(--line); }
  .diff-results-wrap { padding-right: 0; }
  .diff-overview { display: none; }
  .diff-map-help { display: none; }
  .font-control { margin-left: 0; width: 100%; }
  .field-wide, .form-section-title { grid-column: auto; }
  .page-intro h1, .content-header h1, .tool-header h1 { font-size: clamp(2.1rem, 9.5vw, 2.625rem); }
  .content-header h1.long-title, .tool-header h1.long-title { font-size: clamp(1.95rem, 8.8vw, 2.35rem); }
  .price-tool .result-grid { grid-template-columns: 1fr; }
  .inspector-glossary dl { grid-template-columns: 1fr; }
  .footer-inner { align-items: flex-start; flex-direction: column; gap: 1.2rem; }
  .footer-actions { align-items: flex-start; text-align: left; }
  .footer-nav { justify-content: flex-start; }
}

@media (max-width: 760px) {
  .site-header { min-height: 52px; padding-left: 1.2rem; padding-right: 1.2rem; }
  .brand img { width: 140px; }
  .nav-toggle { display: inline-flex; }
  .site-nav {
    align-items: stretch;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 26px rgba(23, 54, 84, 0.1);
    display: none;
    flex-direction: column;
    gap: 0;
    left: 0;
    padding: 0.65rem 1.2rem 0.9rem;
    position: absolute;
    right: 0;
    top: 100%;
  }
  .site-header[data-menu-open="true"] .site-nav { display: flex; }
  .site-nav a { border-radius: 8px; font-size: 0.95rem; padding: 0.7rem 0.6rem; }
  .site-nav a:hover, .site-nav a:focus-visible { background: var(--blue-soft); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .nav-toggle-icon, .nav-toggle-icon::before, .nav-toggle-icon::after, .checklist-progress-track span { transition: none; }
}

/* Verticais editoriais e ferramentas interativas */
.vertical-hero {
  background: linear-gradient(145deg, #f8fbfd 0%, var(--blue-soft) 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, 0.8fr);
  margin-bottom: 2.35rem;
  padding: clamp(1.6rem, 3.1vw, 2.4rem);
}

.vertical-hero h1 { font-size: clamp(2.35rem, 3.5vw, 2.875rem); }
.vertical-hero .button { align-self: start; }
.vertical-section + .vertical-section { margin-top: 2.35rem; }
.vertical-section h2 { font-size: clamp(1.75rem, 2.3vw, 2rem); }
.vertical-feature {
  align-items: center;
  background: var(--navy);
  border-radius: 18px;
  color: rgba(255, 255, 255, 0.82);
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr auto;
  padding: clamp(1.35rem, 2.7vw, 2rem);
}
.vertical-feature h2, .vertical-feature h3 { color: #fff; }
.vertical-feature .eyebrow { color: var(--yellow); }
.vertical-feature p { max-width: 760px; }
.vertical-feature .button { background: #fff; border-color: #fff; color: var(--navy); white-space: nowrap; }
.future-slot { border: 1px dashed #9db8ca; border-radius: 14px; color: var(--muted); padding: 1.25rem; }
.interest-cta { background: #fff8df; border: 1px solid #ead28a; border-radius: 14px; padding: 1.25rem; }
.interest-cta h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); margin-bottom: 0.6rem; }
.interest-cta p { color: var(--muted); }
.interest-cta a { color: var(--navy); font-weight: 800; }

.field textarea {
  background: #fff;
  border: 1px solid #9db8ca;
  border-radius: 10px;
  color: var(--ink);
  min-height: 120px;
  padding: 0.7rem 0.85rem;
  resize: vertical;
  width: 100%;
}
.field textarea.prompt-output { min-height: 340px; }
.field textarea:focus { border-color: var(--blue); }
.checklist-progress {
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 0 0 1.1rem;
  padding: 0.85rem 0.95rem;
}
.checklist-progress-copy { align-items: baseline; display: flex; gap: 0.5rem 1rem; justify-content: space-between; }
.checklist-progress-copy strong { color: var(--navy-dark); }
.checklist-progress-copy span { color: var(--muted); font-size: 0.82rem; }
.checklist-progress-track { background: #dce7ee; border-radius: 99px; height: 7px; margin-top: 0.6rem; overflow: hidden; }
.checklist-progress-track span { background: #668aa3; display: block; height: 100%; transition: width 180ms ease; width: 0; }
.checklist-group { background: #f8fbfd; border: 1px solid var(--line); border-top: 3px solid #9db8ca; border-radius: 14px; margin: 0; padding: 0.85rem 1rem 0.15rem; }
.checklist-group + .checklist-group { margin-top: 1.5rem; }
.checklist-group > legend { color: var(--navy-dark); font-size: 1.2rem; font-weight: 800; padding: 0 0.45rem; }
.checklist-item { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 0.82rem 0.2rem; }
.checklist-group > .checklist-item:first-of-type { border-top: 0; }
.checklist-item legend { color: var(--ink); font-weight: 750; padding: 0 0.3rem; }
.radio-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.55rem; }
.radio-row label { align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; display: inline-flex; gap: 0.4rem; min-height: 44px; padding: 0.35rem 0.7rem; }
.radio-row label:has(input:checked) { background: var(--navy); border-color: var(--navy); color: #fff; }
.result-breakdown { margin-top: 1rem; }
.result-breakdown summary { color: var(--navy); cursor: pointer; font-weight: 800; }
.calculator-result h3 { font-size: 1.15rem; margin: 1.15rem 0 0.35rem; }
.calculator-result section + section { border-top: 1px solid var(--line); margin-top: 0.85rem; padding-top: 0.25rem; }
.source-list { font-size: 0.92rem; }
.source-list a { overflow-wrap: anywhere; }
.article-body table { border-collapse: collapse; margin: 1.5rem 0; width: 100%; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 0.65rem; text-align: left; }
.article-body th { background: var(--blue-soft); color: var(--navy-dark); }

/* Conteúdo evergreen: salário mínimo */
.salary-answer {
  background: linear-gradient(145deg, #f8fbfd 0%, var(--blue-soft) 100%);
  border: 1px solid var(--line);
  border-left: 6px solid var(--blue);
  border-radius: 16px;
  margin: 1.2rem 0 1rem;
  max-width: 820px;
  padding: clamp(1rem, 2vw, 1.35rem);
}
.salary-answer p { color: #344f67; margin: 0; }
.salary-answer p + p { margin-top: 0.55rem; }
.salary-answer p:first-child { color: var(--navy-dark); font-size: clamp(1.12rem, 2vw, 1.3rem); }
.salary-answer-source { font-size: 0.88rem; }
.salary-competence-callout { border-left: 5px solid var(--yellow); }
.salary-content-page .article-body { min-width: 0; }
.table-scroll { margin: 1.5rem 0; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; width: 100%; }
.table-scroll:focus-visible { outline: 3px solid rgba(18, 112, 184, 0.28); outline-offset: 3px; }
.table-scroll table { margin: 0; min-width: 640px; }
.salary-history-table { min-width: 610px !important; }
.salary-history-table td:nth-child(1),
.salary-history-table td:nth-child(2) { white-space: nowrap; }
.salary-side-card h2 { font-size: 1.3rem; margin: 0.7rem 0 0.85rem; }
.salary-side-card dl { margin: 0; }
.salary-side-card dl div { align-items: baseline; border-top: 1px solid var(--line); display: flex; gap: 1rem; justify-content: space-between; padding: 0.65rem 0; }
.salary-side-card dt { color: var(--muted); font-size: 0.84rem; }
.salary-side-card dd { color: var(--navy-dark); font-weight: 800; margin: 0; text-align: right; }
.salary-faq { border-bottom: 1px solid var(--line); margin-top: 1rem; }
.salary-faq details { border-top: 1px solid var(--line); padding: 0.85rem 0; }
.salary-faq summary { color: var(--navy-dark); cursor: pointer; font-weight: 800; }
.salary-faq p { color: var(--muted); margin: 0.65rem 0 0; }
.salary-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 760px) {
  .salary-related-grid { grid-template-columns: 1fr; }
  .table-scroll { margin-left: -0.25rem; margin-right: -0.25rem; padding: 0.25rem; }
}

@media (max-width: 900px) {
  .vertical-hero, .vertical-feature { grid-template-columns: 1fr; }
  .vertical-feature .button { justify-self: start; }
}

@media (min-width: 761px) {
  .radio-row label { min-height: 38px; }
}

/* Formatador SQL */
.sql-tool { max-width: 1120px; }
.sql-editor { min-height: 330px; white-space: pre; }
.sql-input-stage { margin-bottom: 1.2rem; }
.sql-options {
  background: #f8fbfd;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 1.2rem 0;
  padding: 1.1rem;
}
.sql-options-heading { align-items: flex-end; display: flex; gap: 1rem; justify-content: space-between; margin-bottom: 1rem; }
.sql-options-heading h2 { font-size: 1.35rem; margin: 0.2rem 0 0; }
.sql-options-heading p { color: var(--muted); font-size: 0.85rem; margin: 0; }
.sql-profile-grid { align-items: end; }
.sql-profile-grid .field { max-width: 540px; }
.sql-custom-options { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.sql-primary-actions { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); padding: 0.9rem 0; }
.sql-primary-actions .tool-stage-label { margin: 0 auto 0 0; }
.sql-result-panel { background: var(--blue-soft); border: 1px solid var(--line); border-left: 5px solid var(--blue); border-radius: 14px; padding: 1rem; }
.sql-result-panel .sql-editor { background: #fff; }
.sql-result-panel [hidden] { display: none; }
.sql-result-empty { color: var(--muted); margin: 0; padding: 1.25rem 0.25rem; }
.sql-result-panel[data-state="ready"] { border-left-color: var(--navy); box-shadow: 0 10px 26px rgba(23, 54, 84, 0.08); scroll-margin-top: 76px; }

@media (max-width: 620px) {
  .sql-editor { min-height: 280px; }
  .sql-options-heading { align-items: flex-start; flex-direction: column; }
  .sql-primary-actions { align-items: stretch; }
  .sql-primary-actions .tool-stage-label { width: 100%; }
  .sql-primary-actions button { flex: 1 1 auto; }
}

/* Calculadora de Horas Trabalhadas */
.hours-tool [hidden] { display: none !important; }
.tool-header-note { color: var(--muted); font-size: 0.9rem; margin: 0.55rem 0 0; }
.hours-tool { max-width: 960px; }
.hours-tool .privacy-note { background: #f8fbfd; border-color: #d7e4ec; border-radius: 10px; font-size: 0.82rem; gap: 0.5rem; margin-bottom: 1rem; padding: 0.5rem 0.7rem; }
.hours-tool .privacy-note > span { color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.hours-tool .privacy-note p { margin: 0; }
.hours-mode-control { border-bottom: 1px solid var(--line); margin-bottom: 1.35rem; padding-bottom: 1.35rem; }
.hours-mode-label { color: var(--navy-dark); display: block; font-size: 0.9rem; font-weight: 800; margin-bottom: 0.55rem; }
.hours-mode-tabs { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hours-mode-tab {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--navy-dark);
  cursor: pointer;
  min-height: 78px;
  padding: 0.8rem 0.95rem;
  text-align: left;
}
.hours-mode-tab strong { display: block; font-size: 1rem; margin-bottom: 0.18rem; }
.hours-mode-tab span { color: var(--muted); display: block; font-size: 0.82rem; line-height: 1.35; }
.hours-mode-tab[aria-selected="true"] { background: var(--blue-soft); border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.hours-mode-tab[aria-selected="true"] span { color: var(--ink); }
.hours-panel-intro { color: var(--muted); margin: 0 0 1rem; }
.hours-periods-note { color: var(--muted); font-size: 0.82rem; margin: -0.25rem 0 0.75rem; }
.hours-primary-fields { margin-bottom: 1.1rem; }
.duration-fieldset { border: 0; margin: 0; min-width: 0; padding: 0; }
.duration-fieldset legend { color: var(--navy-dark); font-size: 0.9rem; font-weight: 800; margin-bottom: 0.45rem; padding: 0; }
.duration-inputs { display: grid; gap: 0.65rem; grid-template-columns: repeat(2, minmax(0, 140px)); margin-top: 0.55rem; }
.duration-inputs label { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.duration-inputs label span { display: block; margin-bottom: 0.28rem; }
.duration-inputs input {
  background: #fff;
  border: 1px solid #9db8ca;
  border-radius: 10px;
  color: var(--ink);
  min-height: 44px;
  padding: 0.7rem 0.8rem;
  width: 100%;
}
.duration-inputs input:focus { border-color: var(--blue); }
.field-error { color: #9c3327; font-size: 0.82rem; font-weight: 700; margin: 0.25rem 0 0; min-height: 0; }
.field-error:empty { display: none; }
.hours-actions { border-top: 1px solid var(--line); margin-bottom: 0; margin-top: 1.25rem; padding-top: 1rem; }
.hours-more-options { background: transparent; border: 0; color: var(--navy); cursor: pointer; font-weight: 800; margin-left: auto; padding: 0.65rem 0; text-decoration: underline; text-underline-offset: 3px; }
.hours-period { background: #f8fbfd; border: 1px solid var(--line); border-radius: 12px; margin: 0 0 0.85rem; padding: 0.95rem; position: relative; }
.hours-period legend { color: var(--navy-dark); float: left; font-size: 0.95rem; font-weight: 850; padding: 0; }
.hours-remove-period { float: right; margin: -0.15rem 0 0.7rem; padding: 0.45rem 0.65rem; }
.hours-period-grid { clear: both; display: grid; gap: 0.8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hours-period-actions { margin: 0 0 1.15rem; }
.hours-inline-status { color: var(--muted); font-size: 0.82rem; margin: 0; }
.hours-adjustments-title { border-top: 1px solid var(--line); color: var(--navy-dark); font-size: 0.9rem; margin: 0; padding: 1rem 0 0.75rem; }
.hours-duration-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hours-double-count { margin: 1.1rem 0 0; }
.hours-double-count label { align-items: flex-start; color: var(--navy-dark); display: flex; font-size: 0.9rem; gap: 0.5rem; }
.hours-double-count input { flex: 0 0 auto; height: 1.1rem; margin-top: 0.15rem; width: 1.1rem; }
.hours-result { scroll-margin-top: 72px; }
.hours-result-title { font-size: 1rem; margin: 0 0 0.65rem; text-transform: uppercase; }
.hours-result-actions { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.hours-balance strong { font-size: 1.2rem; }
.copy-status { color: var(--muted); font-size: 0.84rem; margin: 0.7rem 0 0; min-height: 1.2em; }
.hours-copy .faq-list { border-bottom: 1px solid var(--line); margin-top: 1rem; }
.hours-copy .faq-list details { border-top: 1px solid var(--line); padding: 0.85rem 0; }
.hours-copy .faq-list summary { color: var(--navy-dark); cursor: pointer; font-weight: 800; }
.hours-copy .faq-list p { color: var(--muted); margin: 0.65rem 0 0; }
.hours-legal-note { margin-top: 2rem; }
.hours-confirmation { background: var(--paper); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 55px rgba(15, 45, 72, 0.24); color: var(--ink); max-width: 500px; padding: 1.25rem; width: calc(100% - 2rem); }
.hours-confirmation::backdrop { background: rgba(8, 32, 53, 0.56); }
.hours-confirmation h2 { color: var(--navy-dark); font-size: 1.3rem; margin: 0 0 0.6rem; }
.hours-confirmation p { color: var(--muted); margin: 0; }
.hours-confirmation .text-toolbar { justify-content: flex-end; margin-bottom: 0; }

@media (max-width: 620px) {
  .hours-mode-tabs, .hours-period-grid, .hours-duration-grid { grid-template-columns: 1fr; }
  .hours-mode-tab { min-height: 70px; }
  .duration-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hours-actions { align-items: stretch; }
  .hours-actions .action-button { flex: 1 1 100%; }
  .hours-actions .secondary-button { flex: 1 1 auto; }
  .hours-more-options { margin-left: 0; text-align: center; }
  .hours-period { padding: 0.85rem; }
  .hours-remove-period { font-size: 0.78rem; }
}

/* Calculadora de Hora Extra */
.overtime-tool [hidden] { display: none !important; }
.overtime-tool { max-width: 960px; }
.overtime-tool .privacy-note { background: #f8fbfd; border-color: #d7e4ec; border-radius: 10px; font-size: 0.82rem; gap: 0.5rem; margin-bottom: 1.15rem; padding: 0.5rem 0.7rem; }
.overtime-tool .privacy-note > span { color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.overtime-tool .privacy-note p { margin: 0; }
.overtime-tool form > .field { margin-bottom: 1.25rem; }
.overtime-option-group { border: 0; border-top: 1px solid var(--line); margin: 0; min-width: 0; padding: 1.15rem 0 0; }
.overtime-option-group + .overtime-option-group { margin-top: 1.15rem; }
.overtime-option-group legend { color: var(--navy-dark); font-size: 0.95rem; font-weight: 800; padding: 0; }
.overtime-option-group .radio-row { margin-bottom: 0.6rem; }
.overtime-custom-field { margin-top: 0.85rem; max-width: 260px; }
.overtime-suffix-input { align-items: stretch; display: flex; }
.overtime-suffix-input input { border-radius: 10px 0 0 10px; min-width: 0; }
.overtime-suffix-input span { align-items: center; background: #edf3f7; border: 1px solid #9db8ca; border-left: 0; border-radius: 0 10px 10px 0; color: var(--navy-dark); display: flex; font-weight: 800; padding: 0 0.85rem; }
.overtime-duration { border-top: 1px solid var(--line); margin-top: 1.15rem; padding-top: 1.15rem; }
.overtime-duration-inputs { grid-template-columns: repeat(2, minmax(0, 180px)); }
.overtime-hours-link { background: #f8fbfd; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 0.88rem; margin: 1rem 0 0; padding: 0.75rem 0.85rem; }
.overtime-hours-link strong { color: var(--navy-dark); }
.overtime-hours-link a { color: var(--navy); font-weight: 800; }
.overtime-actions { border-top: 1px solid var(--line); margin-bottom: 0; margin-top: 1.15rem; padding-top: 1rem; }
.overtime-result { scroll-margin-top: 72px; }
.overtime-calculation { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 0.9rem; }
.overtime-calculation strong { color: var(--navy-dark); }
.overtime-calculation p { color: var(--muted); margin: 0.35rem 0 0; }
.overtime-copy ol:not(.source-list) { color: var(--muted); padding-left: 1.3rem; }

@media (max-width: 620px) {
  .overtime-tool input { font-size: 16px; }
  .overtime-duration-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overtime-actions { align-items: stretch; }
  .overtime-actions .action-button { flex: 1 1 100%; }
  .overtime-actions .secondary-button { flex: 1 1 auto; }
}

/* Calculadora de Vale-Transporte */
.transport-tool [hidden] { display: none !important; }
.transport-tool { max-width: 960px; }
.transport-tool .privacy-note { background: #f8fbfd; border-color: #d7e4ec; border-radius: 10px; font-size: 0.82rem; gap: 0.5rem; margin-bottom: 1.15rem; padding: 0.5rem 0.7rem; }
.transport-tool .privacy-note > span { color: var(--muted); font-size: 0.78rem; line-height: 1.45; }
.transport-tool .privacy-note p { margin: 0; }
.transport-primary-fields { margin-bottom: 1.15rem; }
.transport-advanced { border-top: 1px solid var(--line); padding-top: 1rem; }
.transport-partial-toggle { align-items: flex-start; color: var(--navy-dark); cursor: pointer; display: flex; gap: 0.65rem; min-height: 44px; }
.transport-partial-toggle input { flex: 0 0 auto; height: 1.15rem; margin-top: 0.18rem; width: 1.15rem; }
.transport-partial-toggle span { display: block; }
.transport-partial-toggle strong { display: block; font-size: 0.92rem; }
.transport-partial-toggle small { color: var(--muted); display: block; font-size: 0.8rem; font-weight: 400; line-height: 1.45; margin-top: 0.15rem; }
.transport-partial-fields { background: #f8fbfd; border: 1px solid var(--line); border-radius: 10px; margin-top: 0.75rem; max-width: 480px; padding: 0.85rem; }
.transport-actions { border-top: 1px solid var(--line); margin-bottom: 0; margin-top: 1.15rem; padding-top: 1rem; }
.transport-result { scroll-margin-top: 72px; }
.transport-equilibrium { background: rgba(255, 255, 255, 0.7); border: 1px solid var(--line); border-radius: 10px; margin-top: 1rem; padding: 0.9rem; }
.transport-equilibrium strong { color: var(--navy-dark); }
.transport-equilibrium p { color: var(--muted); margin: 0.35rem 0 0; }
.transport-copy ol:not(.source-list) { color: var(--muted); padding-left: 1.3rem; }

@media (max-width: 620px) {
  .transport-tool input { font-size: 16px; }
  .transport-actions { align-items: stretch; }
  .transport-actions .action-button { flex: 1 1 100%; }
  .transport-actions .secondary-button { flex: 1 1 auto; }
}

@media print {
  .site-header, .site-footer, .breadcrumb, .tool-header, .privacy-note, .tool-copy, .related-section, .text-toolbar, .interest-cta, .checklist-form, .checklist-progress { display: none !important; }
  body { background: #fff; color: #000; }
  .tool-page, .tool-shell { border: 0; box-shadow: none; margin: 0; max-width: none; padding: 0; }
  .checklist-item { break-inside: avoid; }
  .calculator-result { background: #fff; border: 1px solid #777; box-shadow: none; }
}