/* ============================================================
   Calculadora Rescisão — Design system v4 (Design V3, 25 Oct 2026):
   Brazilian government-site language, modelled on gov.br / DSGov.
   Institutional blue scale (#1351B4 primary, #0C326F dark band),
   white and light-gray (#F8F8F8) sober surfaces, the signature
   yellow (#FFCD07) as an accent stripe in small touches only, and
   gov green (#168821) reserved for success/confirm states.
   This is an INDEPENDENT site with no link to the Brazilian
   federal government; only the public design language is echoed —
   no official logos, seals or emblem are used anywhere.
   Token names (the --navy and --green families) are kept from
   earlier versions
   (they now hold the institutional blue scale) so all 117 pages
   inherit the new system unchanged. Radii are the restrained
   gov scale (4/6/8 px); panels are bordered, not floating.
   Every text/background pair >= 4.5:1 (measured — DESIGN-V3-REPORT).
   ============================================================ */

:root {
  --navy-950: #071E42;
  --navy-900: #0C326F;
  --navy: #0C326F;
  --navy-2: #103F85;
  --navy-3: #1351B4;
  --green: #1351B4;
  --green-deep: #0C326F;
  --green-bright: #8FBBF0;
  --green-soft: #E8EFFA;
  --green-softer: #F2F6FC;
  --green-border: #B7CDEB;
  --gov-green: #168821;
  --gov-green-text: #146C1B;
  --gov-green-soft: #E6F4E7;
  --sun: #FFCD07;
  --sun-soft: #FFF3BF;
  --sky: #C9DBF2;
  --sky-soft: #EAF1FA;
  --bg: #F8F8F8;
  --surface: #FFFFFF;
  --ink: #1B1B1B;
  --ink-2: #4B4E52;
  --ink-3: #71757B;
  --border: #D9DBDE;
  --border-strong: #B7BBC0;
  --warn: #8F560C;
  --warn-bg: #FCF3DE;
  --error: #B42318;
  --error-bg: #FDF0EE;
  --info-bg: #E8EFFA;
  --hero-ink-2: #DCE8F7;
  --hero-ink-3: #AECBF2;
  --hero-eyebrow: #BFD6F5;
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 8px;
  --radius-xl: 8px;
  --shadow-s: 0 1px 2px rgb(27 27 27 / .06);
  --shadow-m: 0 1px 3px rgb(27 27 27 / .08);
  --shadow-card: 0 1px 3px rgb(27 27 27 / .08);
  --shadow-hero: 0 24px 48px -20px rgb(4 24 54 / .45);
  --ring: 0 0 0 4px rgb(19 81 180 / .20);
  --font: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --container: 1140px;
}

*, *::before, *::after { box-sizing: border-box; }

/* CSP hardening (implementation pass): a regra [hidden] global que a
   flagship carregava num <style> inline já existia neste arquivo (correção
   do audit de 25 Oct 2026, junto às regras de impressão) — o <style> inline
   foi removido e a regra global existente é a que vale. */

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover, .tool-card:hover, .guide-card:hover { transform: none !important; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }

h1, h2, h3, h4 {
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 .5em;
  font-weight: 700;
}

p { margin: 0 0 1em; }

a { color: var(--green-deep); text-underline-offset: 2px; }
a:hover { color: var(--green); }

/* Skip link (implementation pass, world-class step 1): primeiro elemento
   focável de todas as páginas; invisível até receber foco por teclado. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  background: var(--navy-3);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus-visible { top: 0; color: #fff; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: #FCEFC7; }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: 56px; }
.section--alt { background: var(--surface); border-block: 1px solid var(--border); }

.grid { display: grid; gap: 20px; }
.grid-2 { display: grid; gap: 20px; }
.grid-3 { display: grid; gap: 20px; }

.stack > * + * { margin-top: 16px; }

@media (min-width: 640px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: 64px; }
}

@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid { grid-template-columns: repeat(3, 1fr); }
  .section { padding-block: 84px; }
}

/* CSP hardening (implementation pass): substitui o style="padding-top:0" da
   home. Fica DEPOIS das media queries de .section para vencer a cascata em
   qualquer viewport (a regra inline original vencia sempre). */
.section--flush-top { padding-top: 0; }

/* ---------- Type ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin: 0 0 14px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  flex-shrink: 0;
}

.page-title {
  font-size: clamp(1.875rem, 5vw, 2.625rem);
  font-weight: 700;
  letter-spacing: -.015em;
}

.section-title {
  font-size: clamp(1.5rem, 3.5vw, 2.0625rem);
  font-weight: 700;
  letter-spacing: -.015em;
  margin-bottom: 8px;
}

.lede {
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 56ch;
}

/* UX-11 (implementation pass): atalho cedo para a calculadora do guia —
   quem chega querendo o número não rola o artigo inteiro para achar a
   ferramenta; o link aparece logo após o resumo inicial de cada guia. */
.guide-calc-cta {
  border-left: 4px solid var(--navy-3);
  background: var(--info-bg);
  padding: 12px 16px;
  margin: 18px 0 6px;
  max-width: 62ch;
  line-height: 1.55;
}
.guide-calc-cta a { font-weight: 600; }

.caption { font-size: .8125rem; color: var(--ink-2); line-height: 1.5; }

.money { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: var(--radius-m);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease,
    box-shadow .18s ease, transform .18s ease;
  min-height: 48px;
}

.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--green-deep);
  color: #fff;
}
.btn-primary:active { background: var(--navy-950); }

.btn-secondary {
  background: var(--surface);
  color: var(--navy);
  border-color: var(--border-strong);
  box-shadow: none;
}
.btn-secondary:hover { border-color: var(--navy); color: var(--navy); background: var(--green-softer); }

.btn-ghost { background: transparent; color: var(--green-deep); box-shadow: none; }
.btn-ghost:hover { background: var(--green-soft); color: var(--green-deep); }

.btn-lg { font-size: 1.0625rem; padding: 15px 30px; min-height: 56px; border-radius: var(--radius-m); }
.btn-block { width: 100%; }

/* ---------- Institutional top bar (gov.br pattern) ---------- */
.gov-bar {
  background: var(--navy-950);
  color: #C9D9F2;
  font-size: .8125rem;
  line-height: 1.4;
}
.gov-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 36px;
  padding-block: 5px;
}
.gov-bar-text { font-weight: 600; }
.gov-bar-links { display: flex; gap: 2px; }
.gov-bar-links a {
  color: #C9D9F2;
  text-decoration: none;
  padding: 3px 8px;
  border-radius: var(--radius-s);
}
.gov-bar-links a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 639px) {
  .gov-bar-links { display: none; }
}

/* ---------- Header — solid institutional blue band (gov.br style),
   white wordmark, signature yellow accent line underneath ---------- */
.site-header {
  /* Static by design (owner instruction, 26 Oct 2026): the header sits in
     normal document flow and scrolls away with the page — never sticky
     or fixed. At-rest appearance is unchanged. */
  background: var(--navy-900);
  color: #fff;
  border-bottom: 4px solid var(--sun);
  box-shadow: 0 1px 4px rgb(4 24 54 / .35);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 70px;
  padding-block: 8px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover { color: #fff; }

.brand-mark {
  width: 38px;
  height: 38px;
  padding: 6px;
  border-radius: var(--radius-m);
  background: rgb(255 255 255 / .10);
  border: 1px solid rgb(255 255 255 / .35);
  box-shadow: none;
  color: #fff;
  flex-shrink: 0;
}

.brand-name { font-size: 1.0625rem; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.brand-name strong { font-weight: 800; }

.main-nav { display: none; }

.main-nav ul {
  display: flex;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  display: block;
  color: #DCE8F7;
  text-decoration: none;
  font-weight: 500;
  font-size: .9375rem;
  padding: 9px 13px;
  border-radius: var(--radius-s);
  transition: background-color .15s ease, color .15s ease;
}
.main-nav a:hover { color: #fff; background: rgb(255 255 255 / .12); }
.main-nav a[aria-current="page"] { color: #fff; background: rgb(255 255 255 / .16); font-weight: 600; }

.header-cta { display: none; margin-left: auto; min-height: 44px; padding: 10px 18px; font-size: .9375rem; }
a.header-cta {
  background: #fff;
  color: var(--navy-900);
  border-color: #fff;
}
a.header-cta:hover { background: var(--green-soft); color: var(--navy-900); border-color: var(--green-soft); }

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 1px solid rgb(255 255 255 / .45);
  border-radius: var(--radius-s);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle:hover { background: rgb(255 255 255 / .12); }

.mobile-nav {
  border-top: 1px solid var(--border);
  padding: 8px 20px 16px;
  background: var(--surface);
}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav a {
  display: block;
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  padding: 11px 4px;
  border-bottom: 1px solid var(--border);
}
.mobile-nav li:last-child a { border-bottom: 0; }
.mobile-nav a:hover { color: var(--green-deep); }

@media (min-width: 900px) {
  .main-nav { display: block; margin-left: 12px; }
  .header-cta { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding-block: 20px 0; font-size: .875rem; }
.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--ink-2);
}
.breadcrumbs li + li::before { content: "›"; margin-right: 8px; color: var(--ink-3); }
.breadcrumbs a { color: var(--ink-2); text-decoration: none; }
.breadcrumbs a:hover { color: var(--green-deep); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ---------- Hero — institutional blue band (gov.br style).
   The V2 scenic photo hero was retired in V3: the band is a sober
   institutional blue, and the working calculator sits in a white
   service panel beside the headline. ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy-900) 0%, #0A2A5C 100%);
  color: #fff;
  padding-block: 52px 60px;
}

.hero::before { content: none; }

/* Signature yellow highlight word in the hero headline */
.hero-copy h1 .hl { color: var(--sun); }

.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: rgb(255 255 255 / .10);
}

.hero > .container { position: relative; z-index: 1; }

.hero-grid {
  display: grid;
  gap: 36px;
  align-items: start;
}

.hero-copy h1 {
  color: #fff;
  font-size: clamp(2.125rem, 6vw, 3.375rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 18px;
}

.hero .eyebrow { color: var(--hero-eyebrow); }
.hero .eyebrow::before { background: var(--sun); }

.hero .lede { color: var(--hero-ink-2); margin-bottom: 26px; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
}

.hero .btn-secondary {
  background: rgb(255 255 255 / .05);
  color: #fff;
  border-color: rgb(255 255 255 / .38);
  box-shadow: none;
}
.hero .btn-secondary:hover {
  background: rgb(255 255 255 / .12);
  border-color: rgb(255 255 255 / .6);
  color: #fff;
}
.hero .btn-ghost { color: var(--hero-eyebrow); }
.hero .btn-ghost:hover { background: rgb(255 255 255 / .08); color: #fff; }

.hero-note {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--hero-ink-2);
  max-width: 54ch;
  margin: 0;
}
.hero-note strong { color: #fff; }
.hero-note svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--sun); }

.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 44px;
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid rgb(255 255 255 / .14);
}

.hero-stat { display: grid; gap: 2px; }
.hero-stat-value {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.hero-stat-label { font-size: .8125rem; color: var(--hero-ink-3); line-height: 1.4; }

/* White service panel holding the calculator on the hero band */
.hero-calc {
  position: relative;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid #C7D3E4;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-hero);
  padding: 28px;
  overflow: hidden;
}
.hero-calc::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--green);
}

.hero-calc-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.hero-calc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius-m);
  background: var(--green-soft);
  color: var(--green-deep);
  flex-shrink: 0;
}
.hero-calc-icon svg { width: 25px; height: 25px; }

.hero-calc-title {
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--navy);
  margin: 2px 0 4px;
}

.hero-calc-sub { font-size: .875rem; line-height: 1.55; color: var(--ink-2); margin: 0; }

@media (min-width: 900px) {
  .hero { padding-block: 84px 96px; }
  .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center; }
  .hero-calc { padding: 32px; }
}

/* ---------- Cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 26px;
  box-shadow: var(--shadow-s);
}

.calc-card { display: flex; flex-direction: column; gap: 8px; }

.tool-card, .guide-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 24px;
  box-shadow: var(--shadow-s);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  height: 100%;
}
.tool-card:hover, .guide-card:hover {
  border-color: var(--green);
  box-shadow: var(--shadow-card);
  color: var(--ink);
}

.tool-card h3, .guide-card h3, .tool-card h2 {
  font-size: 1.0625rem;
  margin: 0;
}
.tool-card p, .guide-card p {
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  flex: 1;
}

.card-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--green-deep);
  margin-top: 6px;
}
.card-link svg { width: 16px; height: 16px; transition: transform .18s ease; }
.tool-card:hover .card-link svg, .guide-card:hover .card-link svg { transform: translateX(3px); }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-m);
  background: var(--green-soft);
  color: var(--green-deep);
  margin-bottom: 6px;
  transition: background-color .18s ease, color .18s ease;
}
.card-icon svg { width: 25px; height: 25px; }
.tool-card:hover .card-icon, .guide-card:hover .card-icon {
  background: var(--green);
  color: #fff;
}
/* Cards rendered without an inline SVG (related-rail on tool pages):
   hide the empty chip so it does not render as a stray tinted box. */
.card-icon:empty { display: none; }

/* ---------- Calculator shell (flagship + tool pages) ---------- */
.calc-shell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: clamp(22px, 4vw, 38px);
  margin-top: 28px;
}

.calc-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  list-style: none;
  margin: 0 0 26px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--border);
}
.calc-steps li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--ink-2);
}
.calc-steps li[aria-current="step"] { color: var(--navy); }
.calc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-soft);
  color: var(--green-deep);
  font-size: .875rem;
  font-weight: 800;
  flex-shrink: 0;
}
.calc-steps li[aria-current="step"] .calc-step-num { background: var(--green); color: #fff; }

/* ---------- Forms ---------- */
.calc-form { display: grid; gap: 18px; }

.field { display: grid; gap: 7px; }
.field label { font-weight: 600; font-size: .9375rem; color: var(--navy); }
.field-hint { font-size: .8125rem; color: var(--ink-2); margin: 0; line-height: 1.5; }
.field-error { font-size: .875rem; color: var(--error); margin: 0; font-weight: 500; }

.field-row { display: grid; gap: 18px; }
@media (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="tel"], input[type="search"], select, textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  min-height: 50px;
  width: 100%;
  appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234B4E52' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
}

textarea { min-height: 96px; resize: vertical; }

input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus, select:focus, textarea:focus {
  border-color: var(--green);
  outline: none;
  box-shadow: var(--ring);
}

.field--erro input, .field--erro select, .field--erro textarea {
  border-color: var(--error);
  background: var(--error-bg);
}

.fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; }
.fieldset legend { font-weight: 600; font-size: .9375rem; color: var(--navy); padding: 0; margin-bottom: 6px; }

/* Radio cards — selectable cards for tipo de rescisão */
.radio-cards { display: grid; gap: 10px; }
@media (min-width: 640px) { .radio-cards { grid-template-columns: 1fr 1fr; } }

.radio-cards label {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-l);
  padding: 15px 16px;
  cursor: pointer;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.radio-cards label:hover { border-color: var(--green); box-shadow: var(--shadow-s); }
.radio-cards input[type="radio"] {
  width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; flex-shrink: 0;
  accent-color: var(--green);
}
.radio-cards label:has(input:checked) {
  border-color: var(--green);
  background: var(--green-softer);
  box-shadow: var(--ring);
}
.radio-cards label:has(input:focus-visible) { outline: 2px solid var(--green); outline-offset: 2px; }
.radio-cards small { display: block; color: var(--ink-2); font-weight: 400; font-size: .8125rem; line-height: 1.45; margin-top: 2px; }

/* Toggle (checkbox switch row) */
.toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  cursor: pointer;
  font-weight: 500;
}
.toggle input[type="checkbox"] {
  appearance: none;
  width: 50px; height: 29px; min-height: 0;
  border-radius: 999px;
  background: var(--border-strong);
  border: 0;
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color .18s ease, box-shadow .18s ease;
  padding: 0;
}
.toggle input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 23px; height: 23px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(27 27 27 / .3);
  transition: transform .18s ease;
}
.toggle input[type="checkbox"]:checked { background: var(--green); }
.toggle input[type="checkbox"]:checked::after { transform: translateX(21px); }
.toggle input[type="checkbox"]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* Stepper */
.stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--border-strong); border-radius: var(--radius-s); overflow: hidden; }
.stepper button {
  width: 48px; min-height: 50px;
  background: var(--bg); border: 0;
  font-size: 1.25rem; font-weight: 600; color: var(--navy);
  cursor: pointer; font-family: inherit;
}
.stepper button:hover { background: var(--green-soft); }
.stepper input {
  width: 64px; text-align: center; border: 0; border-inline: 1px solid var(--border);
  border-radius: 0; min-height: 50px;
  font-variant-numeric: tabular-nums;
}
.stepper input:focus { outline: none; box-shadow: inset var(--ring); }

.calc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }

/* Mobile sticky calculate bar */
.calc-sticky {
  position: sticky;
  bottom: 0;
  z-index: 40;
  background: var(--surface);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 24px rgb(27 27 27 / .12);
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 16px;
}
.calc-sticky .calc-sticky-value { font-weight: 800; color: var(--green-deep); font-size: 1.1875rem; }
.calc-sticky .btn { flex: 1; }
@media (min-width: 900px) { .calc-sticky { display: none; } }

/* Advanced details block */
.advanced {
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--surface);
}
.advanced > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  padding: 15px 18px;
  list-style: none;
  display: flex; align-items: center; gap: 8px;
}
.advanced > summary::-webkit-details-marker { display: none; }
.advanced > summary::after {
  content: "+"; margin-left: auto; font-size: 1.125rem; color: var(--green-deep);
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--green-soft); line-height: 1;
}
.advanced[open] > summary::after { content: "−"; }
.advanced-body { padding: 0 18px 18px; display: grid; gap: 18px; }

/* ---------- Results / receipt ---------- */
.result-panel {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: clamp(24px, 4vw, 36px);
  margin-top: 28px;
  overflow: hidden;
}
.result-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--green);
}
.result-panel[hidden] { display: none; }

.receipt { display: grid; gap: 4px; }
.receipt-title { font-size: 1.4375rem; margin-bottom: 14px; }

.receipt-section { padding-block: 12px; border-top: 1px solid var(--border); }
.receipt-section:first-of-type { border-top: 0; padding-top: 2px; }
.receipt-section-title {
  font-size: .8125rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); margin: 0 0 10px;
}

.receipt-line { padding-block: 7px; }
.receipt-line + .receipt-line { border-top: 1px dashed var(--border); }
.receipt-line-main {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.receipt-line-label { color: var(--ink); }
.receipt-line-detail { color: var(--ink-2); font-size: .875rem; }
.receipt-line-value { font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt-line-legal { font-size: .75rem; color: var(--ink-2); margin: 2px 0 0; }
.receipt-line--info { color: var(--ink-2); }
.receipt-line--info .receipt-line-value { color: var(--ink-2); font-weight: 500; }

.receipt-totals { border-top: 2px solid var(--navy); margin-top: 14px; padding-top: 10px; }
.receipt-line--subtotal {
  display: flex; justify-content: space-between; gap: 16px;
  padding-block: 4px; color: var(--ink-2); font-weight: 500;
}
.receipt-line--total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  background: var(--green-softer);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-m);
  padding: 16px 18px;
  margin-top: 10px;
  font-size: 1.125rem; font-weight: 700; color: var(--navy);
}
.receipt-line--total .money { color: var(--green-deep); font-size: 1.625rem; font-weight: 800; letter-spacing: -.01em; }

.assumptions {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  background: var(--bg);
}
.assumptions > summary { cursor: pointer; font-weight: 600; color: var(--navy); padding: 13px 18px; }
.assumptions ul { margin: 0; padding: 0 18px 12px 38px; color: var(--ink-2); font-size: .9375rem; }
.assumptions .disclaimer-full { padding: 0 18px 18px; }

.disclaimer-short { font-size: .8125rem; color: var(--ink-2); margin: 18px 0 0; }
.disclaimer-full { font-size: .8125rem; color: var(--ink-2); line-height: 1.6; margin: 0; }

/* Alerts */
.alert {
  border-radius: var(--radius-l);
  padding: 15px 18px;
  font-size: .9375rem;
  border: 1px solid var(--border);
  background: var(--info-bg);
  color: var(--ink);
}
.alert p:last-child { margin-bottom: 0; }
.alert--warn { background: var(--warn-bg); border-color: #EAD9B8; }
.alert--info { background: var(--info-bg); border-color: #B7CDEB; }

/* Checklist (seguro-desemprego Sim/Não) */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.checklist li {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-l); padding: 13px 15px;
}
.checklist .check-status {
  flex-shrink: 0; font-weight: 700; font-size: .75rem; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 999px; margin-top: 2px;
}
.checklist .check-status--sim { background: var(--gov-green-soft); color: var(--gov-green-text); }
.checklist .check-status--nao { background: var(--error-bg); color: var(--error); }

/* ---------- Content ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size: 1.625rem; margin-top: 2em; }
.prose h3 { font-size: 1.25rem; margin-top: 1.6em; }
.prose p, .prose li { color: var(--ink); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1em; }
.prose li + li { margin-top: 4px; }
.prose strong { color: var(--navy); }

.toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 20px 22px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-s);
}
.toc-title { font-weight: 700; color: var(--navy); margin: 0 0 8px; font-size: .9375rem; }
.toc ol, .toc ul { margin: 0; padding-left: 1.3em; }
.toc li + li { margin-top: 4px; }
.toc a { color: var(--ink); text-decoration: none; }
.toc a:hover { color: var(--green-deep); text-decoration: underline; }

.callout {
  border-left: 4px solid var(--green);
  background: var(--green-soft);
  border-radius: 0 var(--radius-l) var(--radius-l) 0;
  padding: 18px 20px;
  margin-block: 24px;
}
.callout p:last-child { margin-bottom: 0; }

.table-wrap { overflow-x: auto; margin-block: 20px; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); box-shadow: var(--shadow-s); }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 480px; }
.table-wrap th, .table-wrap td { padding: 11px 15px; text-align: left; border-bottom: 1px solid var(--border); }
.table-wrap thead th { background: var(--navy); color: #fff; font-weight: 600; border-bottom: 0; }
.table-wrap tbody tr { transition: background-color .12s ease; }
.table-wrap tbody tr:nth-child(even) { background: #F8F8F8; }
.table-wrap tbody tr:hover { background: #EEF3FB; }
.table-wrap tr:last-child td { border-bottom: 0; }
.table-wrap td.money, .table-wrap th.money { text-align: right; }

/* FAQ accordion — native details */
.faq { display: grid; gap: 12px; max-width: 820px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.faq details:hover { border-color: var(--green-border); }
.faq details[open] { box-shadow: var(--shadow-s); }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  padding: 17px 19px;
  list-style: none;
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-size: 1.25rem; line-height: 1; color: var(--green-deep); flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; background: var(--green-soft);
}
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 19px 17px; margin: 0; color: var(--ink-2); line-height: 1.65; }

/* Related rail */
.related-rail { display: grid; gap: 20px; }
@media (min-width: 640px) { .related-rail { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .related-rail { grid-template-columns: repeat(3, 1fr); } }

/* Trust strip */
.trust-strip {
  display: grid; gap: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: 28px;
}
@media (min-width: 900px) { .trust-strip { grid-template-columns: repeat(3, 1fr); } }
.trust-item { display: flex; gap: 14px; align-items: flex-start; }
.trust-item > svg {
  width: 46px; height: 46px; padding: 11px;
  border-radius: var(--radius-m); background: var(--green-soft);
  color: var(--green-deep); flex-shrink: 0;
}
.trust-item h3 { font-size: 1rem; margin: 2px 0 4px; }
.trust-item p { font-size: .875rem; line-height: 1.55; color: var(--ink-2); margin: 0; }

/* Steps — como funciona */
.steps { display: grid; gap: 20px; counter-reset: step; list-style: none; margin: 0; padding: 0; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 26px;
  box-shadow: var(--shadow-s);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.steps li:hover { border-color: var(--green-border); box-shadow: var(--shadow-card); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-weight: 800; font-size: 1.0625rem;
  box-shadow: none;
  margin-bottom: 14px;
}
.steps h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.steps p { font-size: .9375rem; line-height: 1.6; color: var(--ink-2); margin: 0; }

/* Badge / chips / segmented */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px;
  background: var(--green-soft); color: var(--green-deep);
}
.badge--navy { background: var(--sky-soft); color: var(--navy); }
.badge--sun { background: var(--sun); color: var(--navy-950); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row a, .chip-row span {
  display: inline-block; font-size: .875rem; font-weight: 500;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.chip-row a:hover { border-color: var(--green); color: var(--green-deep); box-shadow: var(--shadow-s); }
/* CSP hardening (implementation pass): substitui o style= gerado em JS nos
   chips de avos do 13º — atributo style inline é bloqueado pelo style-src. */
.chip-row span.chip--on { background: var(--green); color: #fff; border-color: var(--green); }

.segmented {
  display: inline-flex; background: var(--bg);
  border: 1px solid var(--border-strong); border-radius: var(--radius-m); padding: 3px; gap: 3px;
}
.segmented button, .segmented a {
  font-family: inherit; font-size: .9375rem; font-weight: 600;
  padding: 8px 16px; border: 0; border-radius: var(--radius-s);
  background: transparent; color: var(--ink-2); cursor: pointer; text-decoration: none;
  min-height: 40px; display: inline-flex; align-items: center;
}
.segmented button[aria-pressed="true"], .segmented a[aria-current="page"] {
  background: var(--surface); color: var(--navy); box-shadow: var(--shadow-s);
}

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-900); color: #D7E3F2; margin-top: 0; }

.footer-grid {
  display: grid; gap: 36px;
  padding-block: 56px 36px;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

.footer-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.25rem; font-weight: 500; color: #fff; margin: 0 0 12px;
}
.footer-logo::before {
  content: "";
  width: 34px; height: 34px; flex-shrink: 0;
  border-radius: 10px;
  background-color: rgb(255 255 255 / .07);
  border: 1px solid rgb(255 255 255 / .14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none'%3E%3Cpath d='M10 21.5 14.5 17l3 3L22 15' stroke='%23A9C8F2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M10 11.5h4M18 11.5h4' stroke='%23A9C8F2' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px 22px;
}
.footer-logo strong { font-weight: 800; }
.footer-tag { font-size: .9375rem; line-height: 1.65; margin: 0; max-width: 34ch; }

.footer-title {
  font-size: .8125rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: #fff; margin: 0 0 16px;
}
.footer-title::after {
  content: "";
  display: block;
  width: 28px; height: 2px;
  border-radius: 2px;
  background: var(--sun);
  margin-top: 9px;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-col a { color: #D7E3F2; text-decoration: none; font-size: .9375rem; transition: color .15s ease; }
.footer-col a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  border-top: 1px solid rgb(255 255 255 / .12);
  padding-block: 22px 30px;
}
.footer-bottom p { font-size: .8125rem; margin: 0; line-height: 1.65; }

/* ---------- Homepage extras ---------- */
.section-head { max-width: 640px; margin-bottom: 32px; }
.section-head p { color: var(--ink-2); margin: 0; }

.home-result {
  margin-top: 22px;
  background: var(--green-softer);
  border: 1px solid var(--green-border);
  border-radius: var(--radius-l);
  padding: 20px;
}
.home-result[hidden] { display: none; }
.home-result-value { font-size: 2rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy); line-height: 1.1; margin: 0 0 6px; }
.home-result-value .money { color: var(--green-deep); }
.home-result-label { font-size: .875rem; font-weight: 600; color: var(--ink-2); margin: 0 0 6px; }
.home-result-lines { display: grid; gap: 2px; margin-block: 12px; }
.home-result-lines .receipt-line { padding-block: 6px; }
.home-result-lines .receipt-line-main { font-size: .9375rem; }

.preview-banner {
  background: var(--warn-bg);
  border-bottom: 1px solid #EAD9B8;
  color: var(--warn);
  font-size: .875rem; font-weight: 600;
  text-align: center;
  padding: 8px 16px;
}

/* ---------- Print (receipt) ---------- */
@media print {
  .site-header, .site-footer, .nav-toggle, .mobile-nav, .calc-sticky,
  .hero-actions, .breadcrumbs, .toc { display: none !important; }
  body { background: #fff; font-size: 12pt; }
  .hero { background: #fff; color: #000; padding-block: 12pt; }
  .hero::before, .hero::after { display: none; }
  .hero-copy h1, .hero .lede, .hero-note { color: #000; }
  .section { padding-block: 12pt; }
  .result-panel, .card, .tool-card, .guide-card, .calc-shell {
    box-shadow: none; border: 1px solid #999; break-inside: avoid;
  }
  .receipt-line--total { background: #fff; }
  .receipt-line--total .money { color: #000; }
  a { color: #000; text-decoration: none; }
}

/* Coordinator fix (audit, 25 Oct 2026): component display rules (.field grid,
   .toggle flex) override the UA [hidden] rule — restore hidden semantics globally. */
[hidden] { display: none !important; }

/* Articles pass (25 Oct 2026): content figures (inline SVG diagrams/photos) */
.fig { margin: 24px 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l); box-shadow: var(--shadow-s); }
/* CSP hardening (implementation pass): substitui o style="margin:0" da home. */
.fig--flush { margin: 0; }
.fig svg { width: 100%; height: auto; display: block; }
.fig img { width: 100%; height: auto; display: block; border-radius: var(--radius-s); }
.fig figcaption { margin-top: 10px; color: var(--ink-2); font-size: .9rem; line-height: 1.45; }

/* ---------- Image presentation system (design pass, 25 Oct 2026) ----------
   Photos are shown IN FULL by default (natural aspect ratio, never cropped
   or stretched). Cover-cropping is reserved for ambient band images where
   the subject is not a face or a document. */
img { height: auto; }

.fig--photo { padding: 10px; }
.fig--photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-m);
}
.fig--photo figcaption { padding: 2px 6px 4px; }

/* Side-by-side layout: text + figure (homepage transparency, guide headers) */
.split-figure { display: grid; gap: 28px; align-items: start; }
.split-figure .prose { max-width: none; }
.split-figure .fig { margin: 0; }
@media (min-width: 900px) {
  .split-figure { grid-template-columns: 1.15fr .85fr; gap: 44px; }
  /* The sticky figure's offset was 96px to clear the old sticky header;
     with a static header it sticks 16px below the viewport top instead. */
  .split-figure .fig { position: sticky; top: 16px; }
}

/* Full-width ambient band image (no faces/documents — safe to cover-crop) */
.fig--band { padding: 0; overflow: hidden; border-radius: var(--radius-xl); }
.fig--band img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 7;
  object-fit: cover;
  display: block;
}
.fig--band figcaption { padding: 12px 18px 14px; }

/* ---------- Answer-first blocks (template support, 25 Oct 2026) ----------
   For featured-snippet / AI-overview friendly structure: a direct-answer
   summary near the top of a page, definition blocks, question-led H2s. */
.answer-block {
  background: var(--green-softer);
  border: 1px solid var(--green-border);
  border-left: 4px solid var(--green);
  border-radius: var(--radius-l);
  padding: 18px 20px;
  margin: 0 0 28px;
  max-width: 72ch;
}
.answer-block .answer-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--green-deep);
  margin-bottom: 6px;
}
.answer-block p { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--ink); }
.answer-block p + p { margin-top: 8px; }

.definition {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 18px 20px;
  margin-block: 20px;
  box-shadow: var(--shadow-s);
}
.definition dt { font-weight: 700; color: var(--navy); font-size: 1.0625rem; margin-bottom: 4px; }
.definition dd { margin: 0; color: var(--ink-2); line-height: 1.6; }

/* "Ver todos →" trailing links (replaces former inline styles) */
.more-link { margin-top: 22px; font-weight: 600; }

/* ============================================================
   Editorial craft layer (kept from Design V2, re-toned in V3).
   Print-like details: numbered section kickers with a yellow
   rule, asymmetric editorial moments. Restrained by design:
   yellow appears only in these small touches, the header accent
   line and the footer title rules.
   ============================================================ */

/* Numbered editorial section heads (homepage) */
.sec-index {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--green-deep);
  margin: 0 0 14px;
}
.sec-index::after {
  content: "";
  width: 44px;
  height: 2px;
  border-radius: 2px;
  background: var(--sun);
}
.sec-index .sec-num {
  font-size: .9375rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

/* Featured first card: breaks the uniform grid on the homepage only */
@media (min-width: 900px) {
  .tool-card--wide {
    grid-column: span 2;
    justify-content: center;
    background: linear-gradient(120deg, var(--surface) 52%, var(--green-softer));
    padding: 30px 34px;
  }
  .tool-card--wide .card-icon { width: 56px; height: 56px; border-radius: 16px; }
  .tool-card--wide .card-icon svg { width: 29px; height: 29px; }
  .tool-card--wide h3 { font-size: 1.3125rem; }
  .tool-card--wide p { font-size: 1rem; max-width: 52ch; flex: 0; }
}

/* Guide-figure colour normalization: the 221 inline SVG diagrams were
   drawn in the v1 palette; remap their paint to the v3 system here so
   every diagram on every page matches without touching page files. */
.fig svg [fill="#15324B" i] { fill: var(--navy-900); }
.fig svg [fill="#243447" i] { fill: var(--ink); }
.fig svg [fill="#637386" i] { fill: var(--ink-2); }
.fig svg [fill="#16845B" i] { fill: var(--green); }
.fig svg [fill="#0F6848" i] { fill: var(--green-deep); }
.fig svg [fill="#F4F7FA" i] { fill: var(--bg); }
.fig svg [fill="#DFE7ED" i] { fill: var(--border); }
.fig svg [stroke="#DFE7ED" i] { stroke: var(--border); }
.fig svg [stroke="#16845B" i] { stroke: var(--green); }

/* Editorial band: keep the Kombi + horizon in frame when band-cropped */
.fig--band img.pos-low { object-position: 50% 64%; }

/* ---------- Smartphone presentation (homepage) ---------- */
.section--sky {
  background: var(--sky-soft);
  border-block: 1px solid var(--border);
}
.phone-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 900px) {
  .phone-grid { grid-template-columns: 1.08fr .92fr; gap: 64px; }
  .phone-stage { order: 2; }
  .phone-copy { order: 1; }
}
.phone-stage { display: flex; justify-content: center; position: relative; }
.phone-stage::before {
  content: "";
  position: absolute;
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(201 228 245 / .55), transparent 68%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.phone-frame {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 300 / 610;
  background: #10243E;
  border-radius: 46px;
  padding: 11px;
  box-shadow: 0 2px 6px rgb(4 24 54 / .25), 0 42px 84px -28px rgb(4 24 54 / .5);
}
.phone-frame::before {
  content: "";
  position: absolute;
  top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 96px; height: 24px;
  border-radius: 0 0 14px 14px;
  background: #10243E;
  z-index: 2;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 36px;
  overflow: hidden;
  background: var(--surface);
}
.phone-screen img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.phone-caption {
  text-align: center;
  font-size: .8125rem;
  color: var(--ink-2);
  margin: 16px auto 0;
  max-width: 300px;
}

/* ---------- Closing section — dark institutional blue band,
   preceded by the signature yellow accent stripe ---------- */
.road-line {
  height: 4px;
  background: var(--sun);
}
.closing {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--navy-900), var(--navy-950) 85%);
  color: #fff;
  padding-block: 72px 80px;
}
.closing::before { content: none; }
.closing > .container { position: relative; }
.closing h2 {
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.015em;
  max-width: 22ch;
  margin-bottom: 14px;
}
.closing h2 .hl { color: var(--sun); }
.closing .lede { color: var(--hero-ink-2); }
.closing .eyebrow { color: var(--sun); }
.closing .eyebrow::before { background: var(--sun); }
.closing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.closing .btn-secondary {
  background: rgb(255 255 255 / .06);
  color: #fff;
  border-color: rgb(255 255 255 / .38);
  box-shadow: none;
}
.closing .btn-secondary:hover { background: rgb(255 255 255 / .13); border-color: rgb(255 255 255 / .6); color: #fff; }
.closing-note { font-size: .875rem; color: var(--hero-ink-3); margin: 22px 0 0; max-width: 62ch; line-height: 1.65; }

@media print {
  .phone-stage { display: none !important; }
  .closing { background: #fff; color: #000; padding-block: 12pt; }
  .closing h2, .closing .lede, .closing-note { color: #000; }
}

/* ============================================================
   Design V4 (gov.br restyle) — service-page title block.
   Calculator/tool pages follow the gov.br service pattern:
   breadcrumb, page title, "Sobre este serviço" intro, then the
   form panel, then supporting content.
   ============================================================ */
.service-about {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 26px 0 6px;
}

/* ============================================================
   Upgrade pass (26 Oct 2026) — P1 sharing/print, P2 médias form,
   P3 seguro block, P5 polish. Everything inside the V3 gov.br
   identity: same tokens, borders and radii; no new palette
   except the WhatsApp action green (functional, not decorative).
   ============================================================ */

/* ---------- P2: grouped médias fields ---------- */
.field-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-l);
  padding: 18px 18px 6px;
  margin: 0 0 18px;
  min-width: 0;
}
.field-group legend {
  font-weight: 700;
  color: var(--navy);
  padding: 0 6px;
  margin-left: -6px;
}
.field-group > .field-hint { margin-bottom: 14px; }

/* ---------- P1: share bar (screen only) ---------- */
.share-bar {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed var(--border-strong);
}
.share-bar-title { font-weight: 600; color: var(--navy); margin: 0 0 10px; }
.share-report { margin: 10px 0 0; }
.share-bar-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-whats {
  background: #146C1B;
  color: #fff;
  border: 1px solid #146C1B;
  box-shadow: var(--shadow-s);
}
.btn-whats:hover { background: #0F5715; border-color: #0F5715; color: #fff; }
/* The homepage result card sits inside the dark hero but is itself a light
   surface — restore the standard secondary button there (P1 fix). */
.hero .home-result .btn-secondary {
  background: var(--surface);
  color: var(--navy);
  border-color: var(--border-strong);
  box-shadow: none;
}
.hero .home-result .btn-secondary:hover { border-color: var(--navy); color: var(--navy); background: var(--green-softer); }
.hero .home-result .btn-whats { color: #fff; }
.hero .home-result .btn-whats:hover { color: #fff; }

/* ---------- P3: seguro-desemprego estimate block ---------- */
.seguro-bloco {
  margin-top: 18px;
  border: 1px solid var(--green-border);
  border-left: 4px solid var(--green);
  background: var(--green-softer);
  border-radius: var(--radius-l);
  padding: 16px 18px;
}
.seguro-bloco-title { font-size: 1.0625rem; margin: 0 0 6px; }
.seguro-bloco p:last-child { margin-bottom: 0; }

/* World-class step 5 (implementation pass): bloco "Próximos passos"
   calculado no resultado da flagship — prazo do art. 477 computado da
   data de saída + elos para TRCT, seguro e o roteiro pós-demissão. */
.next-steps {
  margin-top: 18px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--sun);
  background: var(--surface);
  border-radius: var(--radius-l);
  padding: 16px 18px;
}
.next-steps-title { font-size: 1.0625rem; margin: 0 0 8px; }
.next-steps ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.next-steps li { line-height: 1.55; }

/* ---------- Print document header (hidden on screen) ---------- */
.print-doc-header { display: none; }

/* ---------- P5: result reveal (instant under reduced motion) ---------- */
@keyframes resultReveal {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.result-panel:not([hidden]), .home-result:not([hidden]) {
  animation: resultReveal .28s ease-out;
}

/* ---------- Print: clean official receipt ---------- */
@media print {
  .gov-bar, .share-bar, .no-print, .calc-form, .calc-sticky,
  .service-about, .toc, .faq, .related-rail { display: none !important; }
  .print-doc-header {
    display: block;
    border-bottom: 2px solid #000;
    padding-bottom: 8pt;
    margin-bottom: 12pt;
  }
  .print-doc-brand { font-size: 15pt; font-weight: 800; margin: 0; color: #000; }
  .print-doc-sub { font-size: 9.5pt; margin: 2pt 0 0; color: #000; }
  details.assumptions > summary { list-style: none; font-weight: 700; }
}

/* Receipt-only print (button "Imprimir / salvar em PDF"): show just the
   demonstrativo of the flagship result or the homepage quick result.
   Sections that do not contain a result are removed; the form, the page
   chrome and the share bar go with them. */
@media print {
  body.print-recibo .gov-bar,
  body.print-recibo .site-header,
  body.print-recibo .site-footer,
  body.print-recibo .calc-sticky,
  body.print-recibo .breadcrumbs,
  body.print-recibo .hero-copy,
  body.print-recibo .hero-stats,
  body.print-recibo .hero-calc-head,
  body.print-recibo .service-about,
  body.print-recibo form,
  body.print-recibo .share-bar { display: none !important; }
  body.print-recibo main > *:not(#resultado):not(:has(#home-calc-result)) { display: none !important; }
  body.print-recibo #resultado,
  body.print-recibo #home-calc-result { display: block !important; }
}

/* ============================================================
   Design Enhancement Pass (26 Oct 2026) — motion, depth and
   polish INSIDE the V3 gov.br identity. Same tokens, same
   palette, same radii. Nothing here hides content on its own:
   reveal states are applied by assets/js/enhance.js only, and
   every effect is neutralised under prefers-reduced-motion.
   ============================================================ */

:root { --shadow-lift: 0 14px 34px -14px rgb(4 24 54 / .28); }

/* The header is static and scrolls away with the page, so anchored
   headings need only a small breathing offset — no fixed-header
   compensation (was 96px while the header was sticky). */
[id] { scroll-margin-top: 16px; }

/* Balanced title wrapping on the display headings */
.page-title, .section-title, .hero-copy h1, .closing h2, .receipt-title { text-wrap: balance; }

/* (Removed 26 Oct 2026: the ".scrolled" header-shadow state went with the
   sticky header — the header is static now and scrolls away, and the
   enhance.js hook that toggled the class was removed with it.) */

/* ---------- Scroll reveal (classes added by enhance.js only) ---------- */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .6s ease var(--rv-d, 0ms),
    transform .6s cubic-bezier(.22, .61, .36, 1) var(--rv-d, 0ms);
}
.rv.rv-in { opacity: 1; transform: none; }

/* ---------- Card & step hover elevation ---------- */
.tool-card:hover, .guide-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
.steps li:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}
.btn-primary:hover { box-shadow: var(--shadow-s); }

/* ---------- Section rhythm: hairline between stacked top-level sections ---------- */
main > .section + .section { border-top: 1px solid var(--border); }
main > .section--alt + .section, main > .section + .section--alt { border-top: 0; }

/* ---------- Prose link affordance ---------- */
.prose a {
  text-decoration: underline;
  text-decoration-color: var(--green-border);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
.prose a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* ---------- FAQ / details: smooth open where the platform supports it ---------- */
.faq summary { transition: background-color .18s ease; border-radius: var(--radius-l); }
.faq summary:hover { background: var(--green-softer); }
.faq details[open] summary::after { background: var(--green); color: #fff; }
.advanced[open] > summary::after { background: var(--green); color: #fff; }
@supports (interpolate-size: allow-keywords) {
  .faq details, .advanced, .assumptions { interpolate-size: allow-keywords; }
  .faq details::details-content,
  .advanced::details-content,
  .assumptions::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size .32s ease, content-visibility .32s allow-discrete;
  }
  .faq details[open]::details-content,
  .advanced[open]::details-content,
  .assumptions[open]::details-content { block-size: auto; }
}

/* ---------- Result total: one gentle glow when a result lands ---------- */
@keyframes totalGlow {
  0% { box-shadow: 0 0 0 0 rgb(255 205 7 / .5); }
  100% { box-shadow: 0 0 0 16px rgb(255 205 7 / 0); }
}
.result-panel:not([hidden]) .receipt-line--total {
  animation: totalGlow .9s ease-out .15s 1;
}

/* ---------- Photograph treatment ---------- */
.fig--photo img { border: 1px solid var(--border); }
.fig--band img { transition: transform .8s cubic-bezier(.22, .61, .36, 1); }
.fig--band:hover img { transform: scale(1.03); }

/* ---------- Reduced motion: reveal is instant, hover lift is off ---------- */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tool-card:hover, .guide-card:hover, .steps li:hover { transform: none !important; }
  .result-panel:not([hidden]) .receipt-line--total { animation: none; }
  .fig--band:hover img { transform: none; }
}

/* ---------- Print: reveal states must never hide printed content ---------- */
@media print {
  .rv { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   PREMIUM DESIGN PASS (26 Oct 2026) — the owner asked for a
   polished, modern, premium web-application feel. This layer
   evolves the V3 institutional blue family (same hues, deeper
   gradients, richer depth, choreographed entrances) rather
   than replacing the palette. Everything is transform/opacity
   only (zero CLS by construction), every effect is disabled
   under prefers-reduced-motion, and print renders the final
   static state. Presentational only: no calculator behaviour
   lives here, and enhance.js adds just two visual touches
   (submit pulse, hero-glow pause).
   ============================================================ */

:root {
  --radius-m: 8px;
  --radius-l: 12px;
  --radius-xl: 16px;
  --shadow-card: 0 1px 2px rgb(27 27 27 / .05), 0 14px 34px -18px rgb(4 24 54 / .20);
  --shadow-lift: 0 22px 46px -16px rgb(4 24 54 / .34);
  --shadow-panel: 0 2px 6px rgb(4 24 54 / .06), 0 30px 60px -30px rgb(4 24 54 / .30);
  --grad-primary: linear-gradient(180deg, #1B5BB9, var(--green) 52%, #0E4396);
  --grad-primary-hover: linear-gradient(180deg, #17509F, #0F469A 55%, #0B3577);
  --grad-bar: linear-gradient(90deg, var(--navy-3), #2E6BD8 58%, var(--sun));
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Keyframes ---------- */
@keyframes premiumRise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes premiumFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes premiumPanel {
  from { opacity: 0; transform: translateY(24px) scale(.982); }
  to { opacity: 1; transform: none; }
}
@keyframes premiumResult {
  from { opacity: 0; transform: translateY(12px) scale(.996); }
  to { opacity: 1; transform: none; }
}
@keyframes premiumGlow {
  from { transform: translate3d(-1.6%, -1%, 0) scale(1); }
  to { transform: translate3d(1.6%, 1.4%, 0) scale(1.05); }
}
@keyframes premiumFloat {
  from { transform: translateY(0); }
  to { transform: translateY(-9px); }
}
@keyframes premiumIconPop {
  0% { transform: scale(.55); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes premiumPulse {
  0% { box-shadow: 0 0 0 0 rgb(19 81 180 / .35); }
  100% { box-shadow: 0 0 0 13px rgb(19 81 180 / 0); }
}

/* ---------- Header & footer sheen ---------- */
.site-header { background: linear-gradient(180deg, #0E3A78, var(--navy-900) 72%); }
.brand-mark { box-shadow: inset 0 1px 0 rgb(255 255 255 / .22); }
.site-footer { background: linear-gradient(180deg, var(--navy-900), var(--navy-950) 34%); }

/* ---------- Hero: layered premium gradient + drifting glow ---------- */
.hero {
  background: linear-gradient(168deg, #11468C 0%, var(--navy-900) 46%, #082A59 82%, var(--navy-950) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  background:
    radial-gradient(560px 380px at 86% 4%, rgb(91 139 239 / .34), transparent 65%),
    radial-gradient(720px 480px at 6% 108%, rgb(255 205 7 / .10), transparent 62%),
    radial-gradient(circle at 88% 30%, transparent 118px, rgb(255 255 255 / .055) 119px, rgb(255 255 255 / .055) 121px, transparent 122px),
    radial-gradient(circle at 88% 30%, transparent 74px, rgb(255 255 255 / .04) 75px, rgb(255 255 255 / .04) 76px, transparent 77px),
    radial-gradient(300px 300px at 76% 90%, rgb(255 255 255 / .05), transparent 70%);
  animation: premiumGlow 26s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero.hero-away::before { animation-play-state: paused; }

/* Hero entrance choreography (load-time, staggered, fill backwards) */
.hero-copy > * { animation: premiumRise .7s var(--ease-out) backwards; }
.hero-copy > *:nth-child(2) { animation-delay: .07s; }
.hero-copy > *:nth-child(3) { animation-delay: .14s; }
.hero-copy > *:nth-child(4) { animation-delay: .21s; }
.hero-copy > *:nth-child(5) { animation-delay: .28s; }
.hero-copy > *:nth-child(6) { animation-delay: .35s; }
.hero-calc { animation: premiumPanel .85s var(--ease-out) .16s backwards; }

.hero-copy h1 { font-size: clamp(2.25rem, 6vw, 3.625rem); line-height: 1.08; }
.hero .lede { font-size: 1.1875rem; }

/* Hero calculator panel: deeper presence, gradient signature bar */
.hero-calc {
  border-color: #B9CBE8;
  box-shadow: 0 34px 68px -26px rgb(3 18 40 / .55), 0 4px 16px rgb(3 18 40 / .18);
}
.hero-calc::before { background: var(--grad-bar); }
.hero-calc-icon { background: linear-gradient(145deg, #EFF5FD, #D7E5F8); }

/* ---------- Page heroes (service/hub/guide title blocks) ---------- */
.breadcrumbs { animation: premiumFade .45s ease backwards; }
.page-title { animation: premiumRise .55s var(--ease-out) .04s backwards; }
.service-about { animation: premiumRise .55s var(--ease-out) .12s backwards; }

/* ---------- Buttons: gradient primary, shine sweep, press ---------- */
.btn-primary {
  background-color: var(--green);
  background-image: var(--grad-primary);
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(102deg, transparent 42%, rgb(255 255 255 / .20) 50%, transparent 58%);
  transform: translateX(-130%);
  transition: transform .55s ease;
  pointer-events: none;
}
.btn-primary:hover::after, .btn-primary:focus-visible::after { transform: translateX(130%); }
.btn-primary:hover {
  background-image: var(--grad-primary-hover);
  box-shadow: 0 12px 26px -12px rgb(12 50 111 / .65);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-secondary:hover { box-shadow: var(--shadow-s); transform: translateY(-1px); }

/* Honest submit feedback: one soft ring at the moment of submission,
   toggled by enhance.js. The computation is synchronous and instant —
   this never delays or gates the result. */
.btn-busy { animation: premiumPulse .32s ease-out 1; }

/* ---------- Cards: accent line, deeper lift, living icons ---------- */
.tool-card, .guide-card { position: relative; overflow: hidden; }
.tool-card::before, .guide-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--navy-3), #5B8DEF 68%, var(--sun));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .38s var(--ease-out);
  z-index: 1;
}
.tool-card:hover::before, .guide-card:hover::before,
.tool-card:focus-visible::before, .guide-card:focus-visible::before { transform: scaleX(1); }
.tool-card:hover, .guide-card:hover { transform: translateY(-4px) scale(1.005); }

.card-icon { background: linear-gradient(145deg, #F0F6FE, var(--green-soft)); }
.card-icon svg { transition: transform .28s var(--ease-out); }
.tool-card:hover .card-icon, .guide-card:hover .card-icon {
  background: linear-gradient(145deg, #1B5BB9, var(--green));
}
.tool-card:hover .card-icon svg, .guide-card:hover .card-icon svg { transform: scale(1.1) rotate(-3deg); }
.rv-in .card-icon svg {
  animation: premiumIconPop .45s var(--ease-out) calc(var(--rv-d, 0ms) + 60ms) backwards;
}
.trust-item.rv-in > svg {
  animation: premiumIconPop .45s var(--ease-out) calc(var(--rv-d, 0ms) + 60ms) backwards;
}
.step-num {
  background: linear-gradient(145deg, #1B5BB9, var(--green));
  box-shadow: 0 8px 16px -8px rgb(12 50 111 / .55);
}
.calc-step-num { box-shadow: 0 4px 10px -4px rgb(12 50 111 / .35); }

/* ---------- Calculator shell & results ---------- */
.calc-shell { position: relative; overflow: hidden; box-shadow: var(--shadow-panel); }
.calc-shell::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: var(--grad-bar);
  z-index: 1;
}
.result-panel { box-shadow: var(--shadow-panel); }
.result-panel::before { background: var(--grad-bar); }
.result-panel:not([hidden]), .home-result:not([hidden]) {
  animation: premiumResult .45s var(--ease-out);
}
.receipt-line--total { background: linear-gradient(135deg, var(--green-softer), #E1EBFA); }

/* ---------- Forms ---------- */
input[type="text"], input[type="number"], input[type="date"], input[type="email"],
input[type="tel"], input[type="search"], select, textarea { border-radius: 8px; }

/* ---------- Tables ---------- */
.table-wrap thead th { background: linear-gradient(180deg, var(--navy-2), var(--navy-900)); }

/* ---------- Photographs & phone ---------- */
.fig--photo img { border-radius: var(--radius-l); box-shadow: var(--shadow-s); }
.phone-frame { animation: premiumFloat 7s ease-in-out infinite alternate; }

/* ---------- Closing band glow ---------- */
.closing::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(640px 340px at 88% -10%, rgb(255 205 7 / .12), transparent 60%),
    radial-gradient(700px 420px at 6% 115%, rgb(91 139 239 / .20), transparent 62%);
  pointer-events: none;
}
.closing > .container { z-index: 1; }

/* ---------- Reduced motion: every premium effect is off ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .phone-frame { animation: none !important; }
  .hero-copy > *, .hero-calc, .breadcrumbs, .page-title, .service-about,
  .result-panel:not([hidden]), .home-result:not([hidden]),
  .rv-in .card-icon svg, .trust-item.rv-in > svg, .btn-busy {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .btn-primary::after { display: none; }
  .btn:active, .btn-secondary:hover,
  .tool-card:hover, .guide-card:hover,
  .tool-card:hover .card-icon svg, .guide-card:hover .card-icon svg { transform: none !important; }
  .tool-card::before, .guide-card::before { transition: none; }
}

/* ---------- Print: entrances and glows must never hide content ---------- */
@media print {
  .hero-copy > *, .hero-calc, .breadcrumbs, .page-title, .service-about,
  .result-panel, .home-result, .phone-frame,
  .rv-in .card-icon svg, .trust-item.rv-in > svg {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero::before, .closing::before, .btn-primary::after { display: none !important; }
}

/* Final completion audit fix (26 Oct 2026): on /quem-tem-direito-seguro-desemprego/
   the .checklist grid wrapper's items could not shrink below their min-content,
   which pushed one list ~1px past a 390px viewport (the only horizontal overflow
   in the 117-page × 2-viewport crawl). Grid items may now shrink to the track. */
.checklist > * { min-width: 0; }

/* ===== Full audit + refine pass (26 Oct 2026) =====
   FA-1 — Brand hit area: the logo link measured 38px tall at every width.
   The header is ~74px tall, so a 44px minimum fits without moving layout. */
.brand { min-height: 44px; }

/* FA-2 — Touch targets on coarse pointers (phones, tablets). Measured at
   390/768px before this layer: gov-bar links 24px, breadcrumb links 16px,
   TOC links 17px, footer links 17px, card title links 19px — all below the
   40px fix threshold. Fine-pointer (mouse) rendering is unchanged. Where a
   negative margin cancels the padding, the layout is pixel-identical and
   only the hit area grows; the TOC takes real padding because adjacent
   rows would otherwise overlap each other's hit areas. */
@media (pointer: coarse) {
  .gov-bar-links a { padding-block: 11px; margin-block: -8px; }
  .breadcrumbs a { display: inline-block; padding-block: 12px; margin-block: -12px; }
  .toc a { display: block; padding-block: 12px; }
  .footer-col a { display: block; padding-block: 12px; margin-block: -6px; }
  .tool-card h3 a { display: block; padding-block: 11px; margin-block: -11px; }
}

/* FA-3 — The flagship's result bar (.calc-sticky, shown below 900px) is
   ~64px tall and could cover the element a keyboard focus or an anchor
   jump scrolls to the bottom of the viewport. Reserve its height as
   scroll padding on the one page that has the bar. :has() degrades
   silently on pre-2023 engines (the bar then behaves as before). */
@media (max-width: 899px) {
  html:has(.calc-sticky) { scroll-padding-bottom: 104px; }
}