/* Affordable Access Health, direction "1 Night Dial" (picked 2026-11-06). Shared tokens and components; the home composition is in v2.css.
   Material: midnight navy ground, cool white ink, one sea-green signal, Archivo (expanded, 800) for heads and numerals, Inter for body and forms.
   The operate flow (quiz, checklists, legal pages) sits on light paper so forms stay familiar; the dial and the dates sit on the night ground. */

/* ---------- fonts (self-hosted, OFL 1.1, see fonts/OFL.txt; Portuguese is inside the latin subset) ---------- */
@font-face { font-family: "Archivo"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/archivo-latin.woff2") format("woff2"); } /* static instance: wght 800, wdth 112 */
@font-face { font-family: "Inter"; font-weight: 400 700; font-style: normal; font-display: swap; src: url("fonts/inter-latin.woff2") format("woff2"); }
@font-face { font-family: "Body Fallback"; src: local("Helvetica Neue"), local("Arial"); size-adjust: 100%; ascent-override: 97%; descent-override: 24%; line-gap-override: 0%; }
@font-face { font-family: "Display Fallback"; src: local("Arial Black"), local("Helvetica Neue"), local("Arial"); size-adjust: 96%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }

/* ---------- tokens ---------- */
:root {
  color-scheme: only light;      /* the palette is fixed; no browser dark-mode rewrite */
  /* the night ground and its ink */
  --night: #0B1C2A; --night-2: #112638; --night-3: #183349; --night-4: #1F4059;
  --ink: #F2F6F7;        /* 15:1 on night */
  --ink-2: #C9D6DD;      /* 11.6:1 on night, 8.8:1 on night-3 */
  --n-muted: #98ACB8;    /* 7.4:1 on night, 5.5:1 on night-3 */
  --rule: rgba(242, 246, 247, .16);
  --n-boundary: #5F7E95; /* field edges on the night ground, 3.4:1 */
  --signal: #5EE0A6;     /* the one bright action on the night ground */
  --signal-hover: #7BE8B8;
  --signal-ink: #07241A; /* 9.9:1 on signal */
  --signal-dim: #2C8F66;
  /* the paper surfaces and their ink */
  --paper: #F3F6F5; --paper-2: #E6ECEA; --white: #FFFFFF;
  --paper-ink: #0C2231; --paper-ink-2: #395363; /* 6.8:1 on paper-2 */
  --paper-muted: #5B717E; /* 5.1:1 on white, 4.7:1 on paper */
  --paper-rule: #CCD7D4;
  --control-boundary: #6B8290; /* 4.0:1 on white */
  --green: #176C52;      /* the primary action on paper, selected choices, completed steps */
  --green-ink: #0F5440;
  --green-mid: #3DAA7E;  /* the illustrations' accent fill */
  --green-soft: #C9E5D8;
  --tint: #EAF5EF;       /* a selected choice */
  --ring: rgba(23, 108, 82, .14);
  --track: #E6ECEA;
  --amber: #F2B04C; --amber-bg: #FFF4E3; --amber-ink: #8A4B00;
  --err: #B42318; --err-bg: #FDECEA; --rose: #F27C7C; --error-field: #FFF8F7;
  --focus: var(--amber);         /* 9.1:1 on night */
  --focus-paper: var(--paper-ink);
  --shadow: 0 20px 50px rgba(12, 34, 49, .12), 0 1px 0 rgba(12, 34, 49, .05);
  --shadow-1: 0 10px 30px rgba(12, 34, 49, .16);
  --shadow-night: 0 30px 60px -30px rgba(0, 0, 0, .7);
  --hairline-ink: rgba(12, 34, 49, .12);
  --code: ui-monospace, monospace;
  /* names the quiz, legal pages and review-only pages still use */
  --navy: var(--paper-ink); --navy-2: #17475F; --line: var(--paper-rule); --line-2: #B9C7C3; --muted: var(--paper-muted); --faint: #6B8290;
  --glass: var(--paper-2); --glass-2: #D6DFDC; --paper-warm: var(--paper); --paper-line: var(--paper-rule); --surface: var(--white); --surface-2: var(--paper-2);
  --ftr-ink: var(--ink-2); --ftr-fine: var(--n-muted); --ftr-line: var(--rule); --focus-on-navy: var(--amber);
  --blue: var(--paper-ink); --sky: var(--navy-2); --blue-soft: var(--paper-2); --mint: var(--paper-2); --mint-2: var(--tint); --portrait-bg: var(--night-4);

  --display: "Archivo", "Display Fallback", "Arial Black", sans-serif;
  --body: "Inter", "Body Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: var(--display);

  /* the spacing scale: the only spacing values on the site */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --sec: var(--s8);       /* section padding on phones */
  --gutter: 20px; --wrap: 1240px;
  --col: 36rem;           /* a text column */
  --col-fine: 34rem;

  /* the type scale: nothing a phone reads as body text goes under 16px */
  --t-xs: 0.875rem; --t-sm: 1rem; --t-md: 1.0625rem; --t-lg: 1.125rem; --t-h3: 1.5rem;
  --t-h2: clamp(1.875rem, 1.3rem + 2.1vw, 2.875rem);
  --t-bill: clamp(2.25rem, 1.4rem + 3.4vw, 4rem);
  --t-bill-door: var(--t-bill);

  --r-in: 12px; --r-tile: 14px; --r: 18px; --pill: 999px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --d-micro: 180ms; --d-ui: 220ms; --d-answer: 420ms; --d-arrow: 500ms;
}
@media (min-width: 768px) { :root { --gutter: 32px; --sec: 80px; } }
@media (min-width: 1024px) { :root { --sec: var(--s9); } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--night); overflow-x: clip; }
body { margin: 0; min-width: 320px; background: var(--night); color: var(--ink); font-family: var(--body); font-size: var(--t-md); line-height: 1.5; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--s2); }
.paper :focus-visible, .sec :focus-visible, .doc :focus-visible { outline-color: var(--focus-paper); }
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.skip { position: absolute; left: var(--s2); top: -60px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; background: var(--signal); color: var(--signal-ink); padding: var(--s2) var(--s4); border-radius: var(--pill); font-weight: 600; text-decoration: none; }
.skip:focus { top: var(--s2); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { font-size: var(--t-bill); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.015em; line-height: 1.1; }
.num { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; line-height: 1; }
p { max-width: var(--col); }
.eyebrow { display: flex; align-items: center; gap: 10px; font-size: var(--t-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--green); line-height: 1.4; }
.eyebrow::before { content: ""; flex: none; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.fine { font-size: var(--t-sm); color: var(--n-muted); max-width: var(--col-fine); line-height: 1.5; }
.fine p + p { margin-top: var(--s1); }
.fine p { max-width: none; }
.fine > a:only-child { display: inline-flex; align-items: center; min-height: 44px; }
.lede { font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); line-height: 1.45; color: var(--ink-2); max-width: 34ch; text-wrap: pretty; }
.lead { font-size: var(--t-lg); line-height: 1.5; color: var(--ink-2); max-width: 36ch; text-wrap: pretty; }
section { padding-block: var(--sec); }
.prose { display: grid; gap: var(--s3); }
.prose > * { min-width: 0; }
.prose > h3, .prose > .rows, .prose > .tbl, .prose > .card, .prose > .acts, .prose > .fine, .prose > .links { margin-top: var(--s3); }
.prose > :first-child { margin-top: 0; }

/* the paper surfaces: everything inside reads in dark ink */
.paper, .sec, .doc { background: var(--paper); color: var(--paper-ink); }
.paper .fine, .sec .fine, .doc .fine { color: var(--paper-muted); }
.paper .lede, .sec .lead { color: var(--paper-ink-2); }
.paper-2 { background: var(--paper-2); }

/* a two-column section: h2 on the left, the body on the right (stacked on phones) */
.sec .wrap { display: grid; gap: var(--s5); align-items: start; }
.sec .body { display: grid; gap: var(--s5); }
.sec .body > * { min-width: 0; }
.sec-plain .wrap { display: block; }
.sec-plain .body { max-width: 44rem; }
.section-heading { display: grid; gap: var(--s3); min-width: 0; }
.section-heading > p { font-size: var(--t-md); line-height: 1.5; }
@media (min-width: 900px) { .sec .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 56px; } .sec-plain .wrap { display: block; } .sec .body { gap: var(--s6); } }

/* ---------- buttons and text links ---------- */
button.btn { font-family: var(--body); -webkit-appearance: none; appearance: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: var(--s3) 26px; border-radius: var(--pill); font: 600 var(--t-md)/1.2 var(--body); text-decoration: none; cursor: pointer; border: 0; text-align: center; text-wrap: balance; transition: background-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease), transform var(--d-micro) var(--ease); -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform var(--d-arrow) var(--ease); }
.btn-signal { background: var(--signal); color: var(--signal-ink); }
.btn-signal:hover { background: var(--signal-hover); color: var(--signal-ink); }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--rule); }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--ink-2); color: var(--ink); }
.btn-green, .btn-fill { background: var(--green); color: var(--white); }
.btn-green:hover, .btn-fill:hover { background: var(--green-ink); color: var(--white); }
.btn-fill:hover svg, .btn-fill:focus-visible svg { transform: translateX(4px); }
.btn-line { background: transparent; color: var(--paper-ink); box-shadow: inset 0 0 0 2px var(--paper-ink); }
.btn-line:hover { background: var(--paper-2); color: var(--paper-ink); }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }
.tlink { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: var(--s1) 0; font-weight: 600; font-size: var(--t-md); text-decoration: none; }
.tlink:hover { text-decoration: underline; }
.tlink svg { width: 18px; height: 18px; flex: none; }
.acts { display: grid; gap: var(--s3); justify-items: start; }
.acts .btn { width: 100%; }
.acts > a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
@media (min-width: 640px) { .acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); } .acts > * { flex: 0 0 auto; } .acts .btn { width: auto; min-width: 14rem; } }

/* ---------- header: the logo chip, the language pill, the phone ---------- */
.hdr { background: var(--white); color: var(--paper-ink); box-shadow: 0 1px 0 var(--paper-rule); } /* the night surfaces name their ink, so a page whose body is paper (the review-only workspace) still reads */
.hdr .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 68px; padding-block: var(--s3); }
.logo { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 10px; border-radius: 10px; background: var(--white); }
.hdr .logo { padding-inline: 0; }
.hdr :focus-visible { outline-color: var(--focus-paper); }
.logo img { height: 32px; width: auto; }
.hdr-r { display: flex; align-items: center; gap: var(--s4); }
.hdr-r .lang { display: inline-flex; align-items: center; min-height: 44px; padding: var(--s2) var(--s4); box-shadow: inset 0 0 0 1px var(--paper-muted); border-radius: var(--pill); font-weight: 500; font-size: var(--t-sm); color: var(--paper-ink); text-decoration: none; transition: box-shadow var(--d-micro) var(--ease), color var(--d-micro) var(--ease); }
.hdr-r .lang:hover { box-shadow: inset 0 0 0 1px var(--paper-ink); background: var(--paper-2); color: var(--paper-ink); }
.hdr-r .tel { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; font-weight: 600; font-size: var(--t-sm); color: var(--paper-ink); text-decoration: none; white-space: nowrap; }
.hdr-r .tel:hover { text-decoration: underline; }
@media (max-width: 600px) { .hdr-r .tel > span:first-child { display: none; } }
@media (min-width: 768px) { .hdr .wrap { min-height: 76px; } .logo { min-height: 48px; } .logo img { height: 36px; } .hdr-r { gap: var(--s5); } .hdr-r .lang, .hdr-r .tel { min-height: 48px; } } /* the logo chip and the links share one 48px row */

/* ---------- hero: who Victor is and the one ask ----------
   Phone: the portrait row (photo, name, credential), the headline, one line, the request button, the call button.
   Desktop: copy left, the portrait card right. The dial sits in its own band under the hero (v2.css). */
.hero { padding-block: var(--s6) var(--s7); background: var(--night); color: var(--ink); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6); grid-template-areas: "who" "copy"; }
.hero-copy { grid-area: copy; min-width: 0; }
.hero .who { grid-area: who; }
.hero h1 { max-width: 16ch; }
.hero h1 .g { color: var(--signal); }
.hero .lede { margin-top: var(--s5); max-width: 40ch; }
.hero .acts { margin-top: var(--s6); }
.hero .cred { margin-top: var(--s5); font-size: var(--t-sm); color: var(--n-muted); max-width: none; }
/* the portrait: the old site's photo in a soft frame; on a phone a row, on desktop a card */
.hero .who { display: flex; align-items: center; gap: var(--s4); margin: 0; min-width: 0; }
.hero .who img { flex: none; width: 88px; height: auto; border-radius: var(--r-tile); background: var(--night-4); }
.hero .who figcaption { display: grid; gap: 2px; font-size: var(--t-sm); line-height: 1.4; color: var(--ink-2); min-width: 0; }
.hero .who figcaption b { color: var(--ink); font-family: var(--display); font-weight: 800; font-size: var(--t-lg); letter-spacing: -0.015em; line-height: 1.15; }
.hero .who figcaption span { max-width: none; }
@media (min-width: 960px) {
  .hero { padding-block: var(--s8) var(--s8); }
  .hero .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "copy who"; align-items: center; column-gap: var(--s8); }
  .hero .who { flex-direction: column; align-items: stretch; gap: var(--s4); justify-self: end; width: 100%; max-width: 360px; padding: var(--s4); border-radius: var(--r); background: var(--night-3); box-shadow: var(--shadow-night); }
  .hero .who img { width: 100%; border-radius: var(--r-tile); }
  .hero .who figcaption { padding-inline: var(--s1); }
}

/* ---------- the dial card (its band and columns are in v2.css) ---------- */
.dial { background: var(--night-3); border-radius: var(--r); padding: var(--s5); box-shadow: var(--shadow-night); }
.dial fieldset { display: grid; gap: var(--s4); align-content: start; }
.dial h2 { max-width: 14ch; }
.dial .sub { color: var(--ink-2); max-width: 36ch; margin-bottom: var(--s2); }
.fields { display: grid; gap: var(--s4); }
.dial .field { gap: 6px; }
.dial .field label { font-size: var(--t-sm); font-weight: 500; color: var(--ink-2); }
.dial .field input, .dial .field select { height: 52px; background-color: var(--night); border-color: var(--n-boundary); color: var(--ink); caret-color: var(--signal); font-size: var(--t-lg); }
.dial .field select { background-image: url("chevron-night.svg"); }
.dial .field input::placeholder { color: var(--n-muted); }
.dial .field input:focus, .dial .field select:focus { border-color: var(--signal); }
.dial .field input:hover:not(:focus), .dial .field select:hover:not(:focus) { border-color: var(--ink-2); }
.dial .fine { font-size: var(--t-sm); color: var(--n-muted); max-width: none; }
.dial .err { color: var(--rose); }
.dial .go { width: 100%; }
.dial-out { display: grid; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.dial-out-title { font: 600 var(--t-sm)/1.4 var(--body); color: var(--n-muted); outline: none; }
.dial-out-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.gauge { width: 100%; height: auto; }
.gauge .z-low, .gauge .z-high { stroke: var(--night-4); }
.gauge .z-mid { stroke: var(--signal); }
.gauge .needle { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; }
.gauge .hub { fill: var(--ink); }
.gauge .tick { fill: var(--n-muted); font: 600 13px var(--body); }
.readout { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s5); max-width: none; }
.readout .num { font-size: 3.25rem; color: var(--ink); }
.verdict { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.05; }
.verdict i { width: 14px; height: 14px; border-radius: 50%; background: var(--signal); flex: none; }
.dial-out p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; max-width: none; }
.dial-out .btn { margin-top: var(--s2); width: 100%; }
/* the empty dial: a muted gauge that holds the result's place beside the fields on desktop (hidden on phones and once a result shows) */
.dial-idle { display: none; }
/* Side by side only between 700 and 959px, where each field is at least 286px wide so "Choose household size" shows in full
   (the select needs about 265px: 200px of text at 18px plus 16px and 48px of padding). Below 700px the card is too narrow and
   from 960px the fieldset shares the card with the gauge, so the fields stack there. Side by side, the two fields share one
   label row and one control row (subgrid), so a wrapping label never pushes its input below its neighbour. */
@media (min-width: 700px) and (max-width: 959px) {
  .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 52px; column-gap: var(--s4); row-gap: 6px; }
  .fields > .field { grid-row: span 2; grid-template-rows: subgrid; row-gap: 6px; }
}
@media (min-width: 960px) {
  .dial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s8); padding: var(--s7); align-items: center; }
  .dial noscript { grid-column: 1 / -1; }
  .dial-out { margin-top: 0; padding-top: 0; border-top: 0; align-self: center; }
  .dial-idle { display: grid; gap: var(--s3); justify-items: center; align-self: center; }
  .dial-idle svg { width: 100%; max-width: 400px; height: auto; }
  .dial-idle path { stroke: var(--night-4); }
  .dial-idle .mid { stroke: var(--n-boundary); }
  .dial-idle .needle { stroke: var(--n-boundary); stroke-width: 5; stroke-linecap: round; }
  .dial-idle .hub { fill: var(--n-boundary); }
  .dial-idle p { color: var(--n-muted); font-size: var(--t-sm); max-width: none; }
  .dial:has(.dial-out:not([hidden])) .dial-idle { display: none; }
}

/* ---------- the one card, and the quieter tile ---------- */
.card { background: var(--white); color: var(--paper-ink); border: 1px solid var(--paper-rule); border-radius: var(--r); padding: var(--s5); display: grid; gap: var(--s4); align-content: start; }
.card > * { min-width: 0; }
.tile { background: var(--paper-2); border-radius: var(--r-tile); padding: var(--s4); }
@media (min-width: 640px) { .card { padding: var(--s6); } }

/* ---------- the one list: hairline rows ---------- */
.rows { list-style: none; display: grid; border-top: 1px solid var(--paper-rule); max-width: 44rem; }
.rows > li, .rows > details { border-bottom: 1px solid var(--paper-rule); min-width: 0; }
.row { display: flex; align-items: center; gap: var(--s4); min-height: 56px; padding-block: var(--s3); line-height: 1.45; }
.row > span, .row > p { flex: 1 1 auto; min-width: 0; max-width: none; }
.row > svg { width: 22px; height: 22px; flex: none; color: var(--green); }
a.row, summary.row { font-weight: 600; text-decoration: none; cursor: pointer; }
summary.row { list-style: none; }
summary.row::-webkit-details-marker { display: none; }
.row-body { padding: 0 0 var(--s5); display: grid; gap: var(--s3); }
.row-body > * { min-width: 0; }
.row-body ul { padding-left: var(--s5); display: grid; gap: var(--s2); max-width: var(--col); }
.row .d, .row b { flex: none; font-family: var(--body); font-weight: 600; font-size: var(--t-lg); min-width: 5.25rem; }
.rows .fine { max-width: none; }

/* the check list: a green tick before each item (door pages, the confirmation, the Portuguese support block) */
.rows-check { border-top: 0; gap: var(--s2); }
.rows-check > li { border-bottom: 0; }
.rows-check .row { align-items: flex-start; min-height: 0; padding: var(--s3) var(--s4); border: 1px solid var(--paper-rule); border-radius: var(--r-tile); background: var(--white); color: var(--paper-ink); }
.rows-check .row::before { content: ""; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green-soft) url("check.svg") center / 14px no-repeat; margin-top: 1px; }

/* the accordion: hairline rows, a chevron that turns */
.faq-list { border-top: 1px solid var(--paper-rule); gap: 0; max-width: none; }
.faq-list > details { border: 0; border-bottom: 1px solid var(--paper-rule); border-radius: 0; }
.faq-list > details > summary { justify-content: space-between; gap: var(--s3); min-height: 64px; padding: 20px 0; font-size: var(--t-lg); }
.faq-list > details > summary:hover { color: var(--green-ink); }
.faq-list > details > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--d-ui) var(--ease); }
.faq-list > details[open] > summary::after { transform: rotate(-135deg); }
.faq-list .row-body { padding: 0 0 var(--s5); color: var(--paper-ink-2); }
.faq-list .row-body p { max-width: none; }

/* ---------- inputs (paper by default; the dial restyles its own) ---------- */
.field { display: grid; gap: var(--s2); }
.field label, .field .lab { font-weight: 600; font-size: var(--t-md); }
.field input, .field select { width: 100%; min-width: 0; height: 54px; border: 1.5px solid var(--control-boundary); border-radius: var(--r-in); background: var(--white); color: var(--paper-ink); caret-color: var(--paper-ink); font: 500 var(--t-md)/1.2 var(--body); padding: 0 var(--s4); transition: border-color var(--d-micro) var(--ease); }
.field select { -webkit-appearance: none; appearance: none; padding-right: var(--s7); cursor: pointer; background-image: url("chevron.svg"); background-repeat: no-repeat; background-position: right var(--s4) center; background-size: 20px; text-overflow: ellipsis; }
.field input::placeholder { color: var(--paper-muted); opacity: 1; font-weight: 400; }
.field input:focus, .field select:focus { border-color: var(--paper-ink); }
.field input:focus-visible, .field select:focus-visible { outline: 3px solid var(--focus-paper); outline-offset: 3px; }
.dial .field input:focus-visible, .dial .field select:focus-visible { outline-color: var(--focus); }
[aria-invalid="true"] { border-color: var(--err) !important; }
.err { font-size: var(--t-sm); color: var(--err); font-weight: 600; }
.err:empty { display: none; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s5); }
fieldset:disabled { opacity: .65; }
fieldset:disabled input, fieldset:disabled select, fieldset:disabled button { cursor: not-allowed; }
fieldset .btn-fill, fieldset .btn-line { width: 100%; }
.check { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--t-sm); line-height: 1.5; font-weight: 400; cursor: pointer; }
.check input { flex: 0 0 auto; width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--green); cursor: pointer; }
.fold > summary.row { min-height: 52px; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line-2); border-radius: var(--r-tile); background: var(--paper); font-size: var(--t-md); }
.fold > summary.row::after { content: ""; flex: none; width: 10px; height: 10px; margin-right: 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--d-ui) var(--ease); }
.fold[open] > summary.row::after { transform: rotate(-135deg); }
.fold[open] > summary.row { border-radius: var(--r-tile) var(--r-tile) 0 0; }
.fold[open] > .fold-body { padding: var(--s4); border: 1px solid var(--line-2); border-top: 0; border-radius: 0 0 var(--r-tile) var(--r-tile); }
.fold-body { padding: var(--s1) 0 var(--s3); display: grid; gap: var(--s4); font-size: var(--t-sm); }
.fold-body > * { min-width: 0; }
.fold-body h3 { margin-top: var(--s3); }
.fold-body .rows .row { min-height: 48px; padding-block: var(--s2); }
.tbl { border-collapse: collapse; width: 100%; max-width: var(--col); font-size: var(--t-sm); }
.tbl caption { text-align: left; font-weight: 600; padding-bottom: var(--s2); }
.tbl th, .tbl td { text-align: left; padding: var(--s2) var(--s2) var(--s2) 0; border-bottom: 1px solid var(--paper-rule); vertical-align: top; }
.tbl th { font-size: var(--t-sm); color: var(--paper-muted); }
.tbl td { font-variant-numeric: tabular-nums; }
.links { list-style: none; display: grid; gap: var(--s1); font-size: var(--t-sm); }
.links a { display: inline-block; padding: var(--s1) 0; }

/* ---------- footer: the business card in three columns, then the small print once ---------- */
.ftr { background: var(--night); color: var(--ink-2); padding-block: var(--s7) var(--s8); border-top: 1px solid var(--rule); font-size: var(--t-sm); line-height: 1.5; }
.ftr a { color: var(--ink); }
.ftr .wrap { display: grid; gap: var(--s6); }
.ftr .id { display: grid; gap: var(--s2); align-content: start; } /* the review-only pages' one-block footer */
.ftr .logo { width: max-content; }
.ftr .logo img { height: 30px; width: auto; }
.ftr-grid { display: grid; gap: var(--s6); }
.ftr-col { display: grid; gap: var(--s2); align-content: start; min-width: 0; }
.ftr-col p { max-width: none; }
.ftr-h { font-size: var(--t-xs); font-weight: 600; color: var(--n-muted); line-height: 1.4; margin-bottom: var(--s1); }
.ftr .who { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.02em; }
.ftr-links { list-style: none; display: grid; gap: var(--s1); }
.ftr-links li { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .4em; min-width: 0; }
.ftr-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; } /* 44px rows on every width: tablets are touch devices too */
.ftr-links a:hover { text-decoration: underline; }
.ftr-links + .ftr-links { margin-top: calc(var(--s1) - var(--s2)); } /* the legal column's two lists (the build adds privacy and terms first) read as one */
.ftr-k { color: var(--n-muted); }
.ftr-legal { display: grid; gap: var(--s2); padding-top: var(--s5); border-top: 1px solid var(--rule); color: var(--n-muted); font-size: var(--t-xs); }
.ftr-legal p { max-width: 80ch; }
.ftr .copy { color: var(--ink-2); margin-top: var(--s2); }
.ftr p, .ftr a { overflow-wrap: anywhere; }
@media (min-width: 600px) { .ftr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); } .ftr-col:first-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .ftr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ftr-col:first-child { grid-column: auto; } }

/* ---------- document pages (privacy, terms) on paper; the 404 on the night ground ---------- */
.doc { padding-block: var(--s6) var(--s8); }
.doc .wrap { max-width: 44rem; display: grid; gap: var(--s5); }
.doc .wrap > *, .doc section > * { min-width: 0; }
.doc p, .doc li, .nf p { overflow-wrap: anywhere; }
.doc h1 { font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem); }
.doc section { padding: 0; border: 0; display: grid; gap: var(--s3); }
.doc section + section { margin-top: var(--s3); }
.doc section h2 { font-size: var(--t-h3); line-height: 1.15; }
.doc p, .doc li { max-width: var(--col); }
.doc ul { padding-left: var(--s5); display: grid; gap: var(--s2); }
.doc .updated { color: var(--paper-muted); font-size: var(--t-sm); }
.doc .resumo { background: var(--paper-2); border-radius: var(--r); padding: var(--s5); margin-top: var(--s3); }
.doc .resumo p { overflow-wrap: anywhere; }
.doc .toc { display: grid; gap: var(--s2); padding: var(--s4) var(--s5); border-radius: var(--r-tile); background: var(--paper-2); }
.doc .toc-title { font-weight: 600; }
.doc .toc ol { display: grid; gap: var(--s1); padding-left: 1.25rem; }
.qpage .wrap { gap: var(--s6); }
.qpage .qgroup { display: grid; gap: var(--s5); scroll-margin-top: var(--s4); }
.qpage .qgroup + .qgroup { margin-top: var(--s4); }
.qpage .rows { max-width: none; }
.qpage .row-body ul { padding-left: 0; list-style: none; }
.qpage .row-body ul li { display: flex; gap: var(--s3); align-items: start; }
.qpage .row-body ul svg { width: 22px; height: 22px; flex: none; color: var(--green); margin-top: 2px; }
.qpage .row-body ul.wont svg { color: var(--err); }
/* the 404: a night page, the question-sized heading and the one way home */
.nf { padding-block: var(--s8) var(--s9); background: var(--night); color: var(--ink); }
.nf .wrap { display: grid; gap: var(--s5); justify-items: start; }
.nf h1 { font-size: var(--t-bill); line-height: 1.1; max-width: 12ch; }
.nf .lede { max-width: none; }
.nf .fine { max-width: none; font-size: var(--t-md); color: var(--ink-2); }
.nf .fine a { color: var(--ink); }

/* Phone forms keep native controls readable without squeezing their selected values. */
@media (max-width: 639px) {
  .customer-home form.card { padding: var(--s3); }
  .customer-home .fold[open] > .fold-body { padding: var(--s3); }
  .field select { font-size: 1rem; padding-left: var(--s2); padding-right: 20px; background-size: 16px; background-position: right var(--s1) center; }
  .dial .field select { padding-left: var(--s4); }
}
@media (max-width: 374px) { :root { --gutter: 16px; } }
@media (max-width: 899px) {
  .customer-home { --t-xs: 0.875rem; }
  .skip { min-height: 44px; }
}
/* Text links inside prose (the FAQ answers, the legal documents, the privacy link beside the consent, the fallback contact line,
   the 404's Portuguese line): a 44px hit area at every width, padded above and below and pulled back with the same negative
   margins, so the line of type keeps its height and the paragraph does not open up. Every such paragraph carries one link, so no
   two hit areas overlap. The legal documents' contents list is a column of links, so there each row is 44px tall instead. */
.faq-list .row-body a, .doc a:not(.toc a), #privacy-link, #fallback-contact, .nf a:not(.btn) { display: inline-block; max-width: 100%; padding-block: calc((44px - 1lh) / 2); margin-block: calc((1lh - 44px) / 2); }
.doc .toc ol { gap: 0; }
.doc .toc ol a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- icons ---------- */
.ic { width: 22px; height: 22px; fill: currentColor; flex: none; }
::selection { background: var(--signal); color: var(--signal-ink); }

/* Motion only answers interaction; the introduction is readable immediately. */
@media (prefers-reduced-motion: reduce) {
  :root { --d-micro: 0ms; --d-ui: 0ms; --d-answer: 0ms; --d-arrow: 0ms; }
  html { scroll-behavior: auto; }
  .btn svg { transition: none; }
  .btn-fill:hover svg, .btn-fill:focus-visible svg { transform: none; }
}