/* why: the /energia/fatura/ page and the parts the /energia/ hub shares with it (spec 2026-10-21-energia-hub-fatura §2).
   Sources, in order: the field bar and the dark action of the common hero kit (vault/heroi-comum/heroi.css), then
   vault/fatura-zero/fatura-zero.css (round 2) verbatim, then the phase-1 additions. Loaded after inicio.css; hub.css
   builds on this file. Tokens only. */

/* ─── 0. From the common hero kit (vault/heroi-comum/heroi.css): the parts the fatura page uses ─────── */
/* why: the field bar (the home's € bar and email bar, one construction): field + one dark round action in a pill. */
.hc-bar { display: flex; align-items: center; gap: var(--s-2); padding: 6px 6px 6px var(--s-4); border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--paper); box-shadow: var(--shadow-card); }
.hc-bar:focus-within { outline: 2px solid var(--ink-deep); outline-offset: 2px; }
.hc-bar input { flex: 1; min-width: 0; min-height: 44px; border: 0; outline: 0; background: none; font: 400 var(--t-base) var(--font-doc); color: var(--ink); }
.hc-bar input::placeholder { color: var(--ink-60); opacity: 1; }
/* why: the unit beside the field («€/mês»), muted at the field's size. */
.hc-bar__unit { font: 400 var(--t-base) var(--font-doc); color: var(--ink-60); }
/* why: the bar's one round dark action, 44 px. */
.hc-bar__go { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink-deep); color: var(--paper); font-size: var(--t-base); cursor: pointer; }
/* why: the card's one dark action when it is a button, not a bar (upload, «marcar os aparelhos»): full width, 52 px. */
.hc-btn { display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; min-height: 52px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-pill); background: var(--ink-deep); color: var(--paper); font: 500 var(--t-sm)/1.2 var(--font-ui); text-align: center; text-decoration: none; cursor: pointer; }
.hc-btn:focus-within { outline: 2px solid var(--ink-deep); outline-offset: 2px; }
/* why: one visible focus ring on the bar's round action and on the dark button. */
.hc-bar__go:focus-visible, .hc-btn:focus-visible { outline: 2px solid var(--ink-deep); outline-offset: 2px; }

/* why: /energia/fatura/ round 2 (vault/fatura-zero). The page borrows the /seguro-auto/ constructions from home.css
   (.composer, .steps, .insurers, .inside/.cell, .split, .faq) and the home's panel and nav from inicio.css. This file
   only adapts them and adds the result card. Tokens only; see notas.md. */

/* ─── 1. Hero: the home's panel, the insurance hero's centred column ─────── */
/* why: everything in the panel is centred, as on /seguro-auto/; the nav keeps the full width. */
.fz-hero { justify-items: center; text-align: center; }
/* why: the nav spans the panel; it is the home's nav, not the insurance white strip. */
.fz-hero > .gnav { justify-self: stretch; text-align: left; }
/* why: the centred column: question, lede, bar, privacy line. */
.fz-centro { display: grid; justify-items: center; width: min(100%, 820px); margin-top: var(--s-6); }
/* why: the question in 2 lines, as the insurance h1 (20ch), at the panel's sizes. */
.fz-hero h1 { max-width: 20ch; font-size: var(--t-lg); }
/* why: the lede under the question, shown on the phone too (2 lines on desktop). */
.fz-lede { margin: var(--s-4) 0 0; max-width: 46ch; font-size: var(--t-sm); line-height: 1.4; color: var(--on-dark-75); }
/* why: the composer is the file label: the whole bar is the target, full width of the column. */
.fz-up { width: 100%; margin-top: var(--s-5); padding: var(--s-2) var(--s-2) var(--s-2) var(--s-2); gap: var(--s-3); cursor: pointer; }
/* why: the file input is sr-only, so the bar shows the keyboard focus. */
.fz-up:focus-within { outline: 2px solid var(--peach); outline-offset: 3px; }
/* why: the avatar disc is fixed at 44 px so the bar height does not move between states. */
.fz-up .composer__avatar { width: 44px; height: 44px; padding: 0; color: var(--ink); }
/* why: the bar's words, left-aligned like an input's placeholder. */
.fz-up__t { flex: 1; min-width: 0; text-align: left; font-size: var(--t-base); line-height: 1.2; color: var(--ink); }
/* why: after the upload the bar shows the file, as the insurance doc chip does. */
.fz-up__doc { font: 500 var(--t-sm) var(--font-doc); }
/* why: the file's status, muted. */
.fz-up__meta { font-size: var(--t-sm); color: var(--ink-60); }
/* why: the round arrow keeps 44 px on the phone. */
.fz-up .composer__send { width: 44px; height: 44px; }
/* why: the privacy line, small and quiet under the bar. */
.fz-priv { margin: var(--s-3) 0 0; font-size: 13px; color: var(--on-dark-60); max-width: none; }
/* why: the steps sit at the bottom of the panel, with air above them. */
.fz-passos3 { margin-top: var(--s-8); }
/* why: the footnote is centred under whatever the panel shows. */
.fz-nota { margin-top: var(--s-5); text-align: center; }

/* ─── The result card: one paper card under the bar ──────────────────────── */
/* why: paper card, same width as the bar, the steps' radius and shadow; left-aligned inside. */
.fz-res { width: min(100%, 820px); margin-top: var(--s-4); padding: var(--s-5); border-radius: var(--r-card); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-card); text-align: left; }
/* why: each state's block stacks on one gap. */
.fz-res > div { display: grid; gap: var(--s-4); }
/* why: the paragraphs sit on the gap, not on the global p margin. */
.fz-res p { margin: 0; max-width: none; }
/* why: the mono eyebrow of the insurance steps (.step__label). */
.fz-eb { font: 500 var(--t-xs)/1.3 var(--font-doc); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-50); }

/* why: «lendo»: the three readings, stacked on the phone. */
.fz-ler3 { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
/* why: one reading: disc, label, value, on a cream pill. */
.fz-ler3 li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-4); border-radius: var(--r-pill); background: var(--cream); font-size: var(--t-sm); }
/* why: the value read, in mono. */
.fz-ler3 b { font: 500 var(--t-sm) var(--font-doc); }
/* why: the status disc. */
.fz-ler3 i { position: relative; width: 24px; height: 24px; border-radius: var(--r-pill); }
/* why: a done reading is a filled «barato» disc. */
.fz-ler3 [data-feito] i { background: var(--band-barato); }
/* why: the drawn tick inside the done disc. */
.fz-ler3 [data-feito] i::after { content: ''; position: absolute; left: 8px; top: 5px; width: 6px; height: 11px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* why: the reading in progress: a turning ring. */
.fz-ler3 [data-agora] i { border: 2px solid var(--tint-20); border-top-color: var(--ink-deep); animation: fz-gira 900ms linear infinite; }
/* why: the value not read yet is muted text. */
.fz-ler3 [data-agora] b { font-family: var(--font-ui); font-weight: 400; color: var(--ink-60); }
/* why: the ring's turn (tokens.css stops it under reduced motion). */
@keyframes fz-gira { to { transform: rotate(360deg); } }

/* why: a supplier as a name tile (logos are not confirmed). */
.fz-tile { display: inline-flex; align-items: center; flex: none; min-height: 28px; padding: 0 var(--s-3); border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--cream); font: 500 13px/1.2 var(--font-ui); color: var(--ink); white-space: nowrap; }
/* why: «confirmar»: the tile and the offer on one line that may wrap. */
.fz-forn { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font-size: 14px; color: var(--ink-60); }
/* why: what we read, as rows on the phone. */
.fz-lido { margin: 0; display: grid; }
/* why: one value: label, figure, «corrigir», with hairlines. */
.fz-lido > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s-3); min-height: 52px; border-top: 1px solid var(--hairline); }
/* why: no line above the first value. */
.fz-lido > div:first-child { border-top: 0; }
/* why: the label, muted. */
.fz-lido dt { font-size: 14px; color: var(--ink-60); }
/* why: the figure in mono, never wrapped. */
.fz-lido dd { margin: 0; font: 500 var(--t-sm) var(--font-doc); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* why: «corrigir» as a small text action with a 44 px target. */
.fz-corr { min-height: 44px; padding: 0; border: 0; background: none; font: 400 14px var(--font-ui); color: var(--ink-60); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; justify-self: start; }
/* why: visible focus on the text action. */
.fz-corr:focus-visible { outline: 2px solid var(--ink-deep); outline-offset: 2px; }

/* why: «veredicto»: loss and bars, then the top 3; side by side from 900 px. */
.fz-ver { display: grid; gap: var(--s-5); }
/* why: each half stacks on a small gap. */
.fz-ver__a, .fz-ver__b { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
/* why: the loss, the card's one big figure, in the loss colour (the home's .rs__n). */
.fz-perda { font: 500 var(--t-2xl)/1 var(--font-doc); letter-spacing: -.04em; color: var(--band-caro); font-variant-numeric: tabular-nums; }
/* why: the top 3 as a bare list. */
.fz-top { list-style: none; margin: 0; padding: 0; display: grid; }
/* why: one offer: tile and price on a line, the offer name under them; hairlines between. */
.fz-top li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-3); align-items: center; padding: var(--s-2) 0; border-top: 1px solid var(--hairline); }
/* why: no line above the first offer. */
.fz-top li:first-child { border-top: 0; padding-top: 0; }
/* why: the tile keeps its own width. */
.fz-top .fz-tile { justify-self: start; }
/* why: the price in mono. */
.fz-top b { font: 500 var(--t-sm) var(--font-doc); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* why: the cheapest in the «barato» colour, as its bar. */
.fz-top li:first-child b { color: var(--band-barato); }
/* why: the offer name, muted, under the tile. */
.fz-top__o { grid-column: 1 / -1; font-size: 13px; line-height: 1.35; color: var(--ink-60); }
/* why: the CTA and the quiet link: one row from 900 px, stacked on the phone. */
.fz-cta { display: grid; gap: var(--s-2); justify-items: center; padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
/* why: «Só avise-me se baixar» as a text link with a 44 px target. */
.fz-so { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--t-sm); color: var(--ink); text-underline-offset: 3px; }
/* why: phase 1 renders «Só avise-me se baixar» (and, under GANHO_MIN, «Quero que a equipa me ligue») as a <button>: strip
   the browser's grey button so it reads as the mock's text link. */
button.fz-so { padding: 0; border: 0; background: none; font-family: var(--font-ui); text-decoration: underline; cursor: pointer; }
/* why: visible focus on the text action. */
button.fz-so:focus-visible { outline: 2px solid var(--ink-deep); outline-offset: 2px; }
/* why: the call request, opened on tap, under a hairline. */
.fz-form { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
/* why: the form's heading. */
.fz-form__h { font-weight: 500; font-size: var(--t-sm); }
/* why: the owner's open slot for the call-back time, marked so it never ships as a promise. */
.fz-quando { font: inherit; color: inherit; } /* the call-back time, a draft sentence part since 2026-10-29 (was a mono placeholder) */
/* why: the fields stacked on the phone. */
.fz-campos { display: grid; gap: var(--s-3); }
/* why: a field with its label above it. */
.fz-campo { display: grid; gap: 4px; min-width: 0; font-size: 14px; color: var(--ink-60); }
/* why: «(opcional)» smaller. */
.fz-campo small { font-size: 12px; }
/* why: the inputs as the insurance signup field: hairline pill, 48 px, 16 px text so iOS does not zoom. */
.fz-campo input, .fz-campo select, .fz-linha input { min-width: 0; min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--hairline); border-radius: var(--r-pill); background: var(--paper); font: 400 16px var(--font-ui); color: var(--ink); }
/* why: visible focus on the fields. */
.fz-campo input:focus-visible, .fz-campo select:focus-visible, .fz-linha input:focus-visible { outline: 2px solid var(--ink-deep); outline-offset: 1px; }
/* why: placeholders in the muted ink. */
.fz-campo input::placeholder, .fz-linha input::placeholder { color: var(--ink-50); }
/* why: the peach pill keeps its own width. */
.fz-pedir { justify-self: start; min-height: 48px; }
/* why: the consent line read before or under the button. */
.fz-consent { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-60); }
/* why: the privacy link in ink. */
.fz-consent a { color: var(--ink); text-underline-offset: 2px; }

/* why: «falhou»: the one sentence at card-heading size. */
.fz-falhou { font-size: var(--t-md); line-height: 1.2; }
/* why: telefone + email + peach pill on one row that wraps: the insurance signup row. */
.fz-linha { display: flex; flex-wrap: wrap; gap: var(--s-2); }
/* why: the two fields share the row; each wraps to its own line under 200 px. */
.fz-linha input { flex: 1 1 200px; }
/* why: the peach pill, 48 px, never squeezed. */
.fz-linha .signup__go { flex: none; min-height: 48px; }
/* why: «ou diga quanto paga» between two hairlines. */
.fz-ou { display: flex; align-items: center; gap: var(--s-3); font: 400 var(--t-xs) var(--font-doc); color: var(--ink-50); text-transform: uppercase; letter-spacing: .06em; }
/* why: the hairlines either side of «ou». */
.fz-ou::before, .fz-ou::after { content: ''; flex: 1; height: 1px; background: var(--hairline); }
/* why: the € bar keeps its content inside the card. */
.fz-mes { min-width: 0; }

/* ─── 2. Supplier strip ──────────────────────────────────────────────────── */
/* why: the strip's names sit in the same grey as the insurer logos, at UI size. */
.fz-strip .insurers__word { font-size: var(--t-base); font-weight: 500; }
/* why: name boxes narrower than logo boxes, so more names fit the screen. */
.fz-strip .insurers__track li { width: auto; padding-inline: var(--s-4); }

/* ─── 3. Interest row ────────────────────────────────────────────────────── */
/* why: one centred, light row on white: heading, line, fields, consent. */
.fz-int { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-6) var(--s-4) var(--s-8); text-align: center; }
/* why: the band's heading at the small-statement size. */
.fz-int h2 { font-size: var(--t-lg); font-weight: 300; }
/* why: the line under the heading, muted. */
.fz-int__l { margin: 0; font-size: var(--t-sm); color: var(--ink-60); }
/* why: the row is as wide as the insurance signup row. */
.fz-int .fz-linha { width: min(100%, 640px); margin-top: var(--s-2); }

/* ─── 4–5. Sections: one header pattern, one rhythm ──────────────────────── */
/* why: the bento's art panels hold paper cards; the stacked bar and its legend fill the wide one. */
.fz-barra { display: flex; gap: 2px; height: 36px; border-radius: var(--r-card); overflow: hidden; margin-bottom: var(--s-4); }
/* why: each segment's width is its share, set inline. */
.fz-barra i { display: block; flex: none; }
/* why: energia, the biggest share, in the darkest fill. */
.fz-s1 { background: var(--ink-deep); }
/* why: potência. */
.fz-s2 { background: var(--mauve); }
/* why: the included service. */
.fz-s3 { background: var(--peach); }
/* why: taxes and VAT. */
.fz-s4 { background: var(--peach-ink); }
/* why: the legend, 2 columns on the phone, 4 from 900 px. */
.fz-leg { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
/* why: one legend item: swatch beside name, € and % under it. */
.fz-leg li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 2px var(--s-2); align-items: center; }
/* why: the swatch. */
.fz-leg i { width: 10px; height: 10px; border-radius: var(--r-pill); }
/* why: the share's name. */
.fz-leg span { font-size: 13px; color: var(--ink-60); }
/* why: € and % in the text column. */
.fz-leg b, .fz-leg small { grid-column: 2; }
/* why: the € in mono. */
.fz-leg b { font: 500 var(--t-sm) var(--font-doc); font-variant-numeric: tabular-nums; }
/* why: the % muted. */
.fz-leg small { font: 400 12px var(--font-doc); color: var(--ink-50); }
/* why: the last figure row of a snippet closes without a rule (the insurance page does it inline). */
.figure-row.fz-ult { border-bottom: 0; }
/* why: a floor under every cell's text, so the art panels in one row end at the same height. */
.fz-sec .cell__foot { min-height: 108px; }
/* why: the consumption card's one big number. */
.fz-grande { margin: 0 0 var(--s-2); font: 500 var(--t-xl)/1 var(--font-doc); letter-spacing: -.03em; }
/* why: the unit beside it, small. */
.fz-grande small { margin-left: 6px; font: 400 var(--t-sm) var(--font-ui); letter-spacing: 0; color: var(--ink-60); }

/* why: the pair section: its header in the container, the pair under it on the page's gap. */
.fz-par { padding-top: clamp(var(--s-8), 8vw, var(--s-10)); }
/* why: the pair starts on the same gap as the bento's grid. */
.fz-par .split { margin-top: var(--s-8); }
/* why: content sets the panels' height on the phone (no near-full-screen panels). */
.fz-par .split__side { min-height: 0; gap: var(--s-5); }
/* why: the dark side's bill line is static (one line, no animation). */
.fz-linha-d { position: static; }
/* why: the light side's three checks, as paper rows. */
.fz-tres { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); width: min(100%, 440px); text-align: left; }
/* why: one check: name, line, link. */
.fz-tres li { display: grid; gap: 2px; padding: var(--s-4) var(--s-4) var(--s-2); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-card); }
/* why: the check's name. */
.fz-tres b { font-weight: 500; font-size: var(--t-sm); }
/* why: the check's figure line, muted. */
.fz-tres span { font-size: 14px; line-height: 1.4; color: var(--ink-60); }
/* why: the tool link, 44 px target. */
.fz-tres a { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; font-size: 14px; color: var(--ink); text-underline-offset: 3px; }

/* why: the FAQ as on /seguro-auto/: inicio.css narrows it for the home; this restores the insurance sizes. */
.fz-faq { margin-top: 0; padding: clamp(var(--s-8), 7vw, var(--s-10)) var(--s-4); }
/* why: the FAQ title at the section size. */
.fz-faq .faq__panel h2 { font-size: var(--t-xl); }

@media (min-width: 900px) {
  /* why: the question at the insurance hero size, centred in 2 lines. */
  .fz-hero h1 { font-size: var(--t-2xl); max-width: 20ch; }
  /* why: the lede at body size on desktop. */
  .fz-lede { font-size: var(--t-base); }
  /* why: the column sits lower in the taller panel. */
  .fz-centro { margin-top: var(--s-8); }
  /* why: the bar at the insurance composer size. */
  .fz-up { padding: var(--s-3) var(--s-3) var(--s-3) var(--s-3); gap: var(--s-4); }
  /* why: the avatar and the arrow at the insurance sizes. */
  .fz-up .composer__avatar, .fz-up .composer__send { width: 52px; height: 52px; }
  /* why: the bar's words at the composer input size. */
  .fz-up__t { font-size: var(--t-md); }
  /* why: the result card gets more air on desktop. */
  .fz-res { padding: var(--s-6); }
  /* why: the readings side by side. */
  .fz-ler3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* why: what we read as a 2×2 of tiles: label, big figure, «corrigir». */
  .fz-lido { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  /* why: one tile on cream. */
  .fz-lido > div { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; padding: var(--s-3) var(--s-4) 0; border: 0; border-radius: var(--r-card); background: var(--cream); gap: 0 var(--s-3); }
  /* why: the label spans the tile's top. */
  .fz-lido dt { grid-column: 1 / -1; }
  /* why: the figure big on the tile. */
  .fz-lido dd { font-size: var(--t-md); }
  /* why: «Está certo» keeps its own width, centred (the button only: the success blocks share .fz-ok). */
  .hc-btn.fz-ok { width: auto; justify-self: center; padding: 0 var(--s-8); }
  /* why: loss + bars left, top 3 right. */
  .fz-ver { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  /* why: CTA and link on one centred row. */
  .fz-cta { grid-auto-flow: column; justify-content: center; gap: var(--s-5); }
  /* why: the CTA keeps its own width. */
  .fz-cta .hc-btn { width: auto; padding: 0 var(--s-6); }
  /* why: the three fields on one row. */
  .fz-campos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* why: the strip a step larger. */
  .fz-strip .insurers__word { font-size: var(--t-md); }
  /* why: the legend in one row. */
  .fz-leg { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* why: the pair's panels on desktop. */
  .fz-par .split__side { min-height: 600px; }
}

/* ─── Phase 1 additions (spec 2026-10-21) ────────────────────────────────── */
/* why: «em breve» on a page that does not exist yet: a small peach-pale mono chip (hub and fatura). Ruling C4: defined
   here once, at the 12.8 px token (the vault mock's 11 px is under the 12 px floor). */
.eh-breve { display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--peach-pale); color: var(--ink); font: 500 var(--t-xs)/1.5 var(--font-doc); font-style: normal; letter-spacing: .02em; text-transform: none; vertical-align: 1px; white-space: nowrap; }
/* why: approved fix 2 (2026-10-21): on the phone the three steps stack; home.css makes .steps a sideways scroller there. */
@media (max-width: 720px) {
  .fz-passos3 { display: grid; grid-template-columns: minmax(0, 1fr); overflow: visible; scroll-snap-type: none; padding: 0; margin-inline: 0; }
}
/* why: a «corrigir» opens the value in place: the field takes the row's width under its label. */
.fz-corr__campo { display: flex; flex-wrap: wrap; gap: var(--s-2); grid-column: 1 / -1; margin-top: var(--s-2); }
/* why: ruling C18 (spec §8): the opened field's label is visible, on its own line above the field. */
.fz-corr__rot { flex: 1 0 100%; font-size: 13px; color: var(--ink-60); }
/* why: the corrected value's input, the composer's look at form height. */
.fz-corr__in { flex: 1; min-height: 44px; padding: 0 var(--s-3); border: 1px solid var(--hairline); border-radius: var(--r-pill); font: 400 var(--t-sm) var(--font-ui); color: var(--ink); background: var(--paper); }
/* why: a value the reader did not find is marked, and its field opens required. */
.fz-lido [data-falta] dd { color: var(--ink-50); }
/* why: the error line under a field or form (role=alert), the house error size. */
.fz-erro { margin: var(--s-1) 0 0; font-size: 13px; color: var(--ink); }
/* why: the inline email-only watch under the verdict («Só avise-me se baixar»): the avisos bar, narrower. */
.fz-aviso { margin-top: var(--s-3); max-width: 420px; }
/* why: the education sections' figures without a reading; hidden figure twins keep the cell's height. */
.fz-sem { color: var(--ink-50); font-size: var(--t-sm); }
/* why: spec §7 «sem-oferta»: no takeable offer for the reading; a line with the comparator link, then the € bar. */
.fz-semoferta { display: grid; gap: var(--s-3); }
/* why: without JavaScript the interest row's form cannot post (no endpoint takes a plain form): ruling C19 hides the row
   (spec §6.3, §9); only its noscript line shows. */
html:not([data-js]) .fz-int > :not(noscript) { display: none; }
/* why: the success block after a form (focusable, tabindex -1): the home's .v8mail__ok box, so «Pedido registado» reads as
   a result and not loose text under the buttons. */
.fz .card-ok { display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--hairline); border-radius: var(--r-card); background: var(--paper); color: var(--ink); text-align: left; }
/* why: the box's display must not undo [hidden]. */
.fz .card-ok[hidden] { display: none; }
/* why: «fica» (under GANHO_MIN) takes the loss figure's place: a lead sentence, one step above body. */
.fz-fica { margin: 0; font-size: var(--t-md); line-height: 1.35; color: var(--ink); }