/* Affordable Access Health, direction "1 Night Dial" (picked 2026-11-06), simplified 2026-11-06, final journey 2026-11-06. Customer
   composition: the home page's sections, the quiz, its result states, the dock, the door and Portuguese pages, and the legal pages.
   Order on the home page, every size: hero (who Victor is, the request button, the call button), how it works (paper), the request
   (the pale paper-2 band with the white card), the optional dial (night), who you'll talk to (paper), the dates (night), questions
   (paper), the footer. Night and paper alternate; the request is the one tinted band so it never melts into the paper beside it.
   One idea per section. Verbatim quiz markup and functional hooks are preserved. */
.notice { margin: 0; padding: 10px 20px; background: var(--amber-bg); color: var(--amber-ink); font-size: var(--t-sm); line-height: 1.4; max-width: none; }
.notice a { color: inherit; }
.preview-note { padding: var(--s5); border: 1px solid var(--green); border-radius: var(--r-tile); background: var(--paper-2); color: var(--paper-ink); }
.row[href] span, .lang { text-decoration: none; }
#estimate-heading { scroll-margin-top: var(--s6); }
#confirmation-heading, #uncertain-heading { position: static; scroll-margin-top: 0; scroll-margin-bottom: var(--dock-h); }
#attribution-preview { white-space: pre-wrap; overflow-wrap: anywhere; font: 16px/1.6 var(--code); color: var(--paper-ink); }
html[data-view="customer"] [data-review-only]:not([data-preview-safety]):not(:has([data-preview-safety])) { display: none !important; }
html[data-view="customer"] { scroll-padding-top: 96px; }
html[data-view="customer"] [tabindex="-1"] { scroll-margin-top: 96px; }
.customer-preview { position: sticky; top: 0; z-index: 40; padding: var(--s2) 0; background: var(--amber-bg); color: var(--amber-ink); border-bottom: 1px solid var(--line-2); font-size: var(--t-sm); line-height: 1.5; }
.customer-preview .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s1) var(--s5); }
.customer-preview a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.preview-safety { padding: var(--s5); border: 1px solid var(--line-2); border-left: 4px solid var(--amber-ink); border-radius: var(--r-tile); background: var(--amber-bg); color: var(--amber-ink); overflow-wrap: anywhere; }
.preview-safety > * + * { margin-top: var(--s3); }
.preview-safety .acts { display: flex; flex-wrap: wrap; gap: var(--s3); }
.preview-safety .acts .btn { width: auto; }
.preview-safety a { color: inherit; }
.preview-safety [hidden] { display: none !important; }
.customer-home .workspace-note { font-size: var(--t-sm); line-height: 1.5; padding-left: var(--s4); border-left: 1px solid var(--line-2); color: var(--paper-muted); max-width: var(--col); }
.customer-home .workspace-note a { color: inherit; }

/* ---------- tokens for this layout ---------- */
:root {
  --nav-h: 60px;            /* the section bar once it sticks (768 and up) */
  --dock-h: 72px;           /* the phone dock: the request button and back to top */
}
html { scroll-padding-top: 16px; }
@media (min-width: 768px) {
  html { scroll-padding-top: calc(var(--nav-h) + 8px); }
  .customer-home #review { scroll-margin-top: 96px; }
}

/* ---------- illustrations: line art in paper ink and green (the quiz reason cards) ---------- */
.illo { display: block; flex: none; border-radius: var(--r-tile); background: var(--paper-2); }
.illo svg { display: block; width: 100%; height: 100%; }
.illo .a { fill: var(--white); }
.illo .b { fill: none; stroke: var(--navy-2); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.illo .c { fill: var(--green-mid); }
.illo .d { fill: none; stroke: var(--green-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.illo .e { fill: var(--green-soft); stroke: var(--green); stroke-width: 3; }
.illo .e2 { fill: var(--green-soft); }
.illo .f { fill: none; stroke: var(--green-ink); stroke-width: 3; stroke-linecap: round; }

/* ---------- the section bar: a sticky bar from 768 up with the request button at its end; phones have the dock instead ---------- */
.secnav { display: none; background: var(--night-2); border-bottom: 1px solid var(--rule); }
.secnav ul { list-style: none; display: flex; flex-wrap: nowrap; gap: 2px; min-width: 0; }
.secnav li { min-width: 0; }
.secnav li a { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color var(--d-micro) var(--ease), color var(--d-micro) var(--ease); }
.secnav li a:hover { background: var(--night-3); color: var(--ink); }
.secnav li a[aria-current="true"] { background: transparent; color: var(--signal); box-shadow: inset 0 -3px 0 var(--signal); border-radius: 0; }
.customer-home:lang(pt-BR) .secnav li a { white-space: normal; }
.secnav-cta { display: none; }
@media (min-width: 768px) {
  .secnav { display: block; position: sticky; top: 0; z-index: 30; box-shadow: 0 1px 0 var(--rule); transition: opacity var(--d-ui) var(--ease), transform var(--d-ui) var(--ease); }
  .secnav.secnav-off { visibility: hidden; opacity: 0; transform: translateY(-100%); pointer-events: none; }
  .secnav .wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; min-height: var(--nav-h); padding-block: 8px; gap: 16px; }
}
/* Between 768 and 1023 the six English items share 704px, so the links tighten (14px, 10px sides) and stay on one row. */
@media (min-width: 768px) and (max-width: 1023px) { .secnav li a { padding-inline: 10px; font-size: var(--t-xs); } }
@media (min-width: 1024px) {
  .secnav-cta { display: inline-flex; width: auto; min-height: 44px; padding: 8px 20px; font-size: 1rem; background: var(--signal); color: var(--signal-ink); }
  .secnav-cta:hover { background: var(--signal-hover); color: var(--signal-ink); }
  .secnav li:has(> a[data-i18n="dockCta"]) { display: none; } /* the button at the bar's end is the request link from here up; the list item would be its twin */
}

/* ---------- the dial band: the optional tool after the request, one wide card on the night ground, section rhythm like every band ---------- */
.dial-band { background: var(--night); }

/* the Portuguese note that points at the English-only tool and questions */
.english-note { background: var(--night); color: var(--ink-2); padding-block: var(--s5) var(--s7); }
.english-note p { max-width: none; font-size: var(--t-sm); }
.english-note a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }

/* ---------- who you'll talk to: the one neutral band about Victor (no numbers, ratings, quotes or carrier names) ---------- */
.meet { background: var(--paper); }
.meet .wrap { display: grid; gap: var(--s6); }
.meet-head { display: grid; gap: var(--s3); }
.meet h2 { max-width: 14ch; }
.meet .sub { color: var(--paper-ink-2); font-size: var(--t-lg); max-width: 40ch; }
/* four points: one column on phones, two from 640px, four from 960px; the tiles share icon, title and line rows (subgrid) */
.points { list-style: none; display: grid; gap: var(--s3); }
.points li { display: grid; align-content: start; row-gap: var(--s2); padding: var(--s4); border-radius: var(--r-tile); background: var(--white); border: 1px solid var(--paper-rule); min-width: 0; }
.point-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tint); color: var(--green-ink); margin-bottom: var(--s1); }
.point-ic svg { width: 22px; height: 22px; }
.points h3 { font-size: var(--t-lg); line-height: 1.2; }
.points p { font-size: var(--t-sm); color: var(--paper-ink-2); line-height: 1.45; max-width: none; }
.meet-links { display: grid; gap: var(--s1); justify-items: start; max-width: none; }
.meet-links .tlink { color: var(--green-ink); }
@media (min-width: 640px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: var(--s4); }
  .points li { grid-row: span 3; grid-template-rows: subgrid; padding: var(--s5); border-radius: var(--r); }
  .meet-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); }
}
@media (min-width: 960px) {
  .meet .wrap { gap: var(--s7); }
  .meet-head { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 56px; align-items: end; }
  .points { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- how it works: three steps on paper, each a hairline row with a deep-green numbered disc (the same green as a completed quiz step) ----------
   Every width: the disc left, the title and line right. Phones and tablets stack the three rows; from 900px they stand three
   across and share the title and paragraph rows (subgrid), so a wrapping title never pushes its paragraph below its neighbours'.
   The Portuguese steps carry the numeral itself inside the disc. */
.steps { list-style: none; display: grid; gap: var(--s4); margin-top: var(--s6); }
.steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--s4); row-gap: var(--s2); align-content: start; align-items: start; border-top: 1px solid var(--paper-rule); padding-top: var(--s5); min-width: 0; }
.step-ic { display: grid; place-items: center; grid-column: 1; grid-row: 1 / span 2; width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: var(--white); font: 800 var(--t-lg)/1 var(--display); }
.step-ic svg { width: 24px; height: 24px; }
.steps h3, .steps p { grid-column: 2; }
.steps h3 { padding-top: 10px; } /* the first line sits on the disc's centre line */
.steps p { color: var(--paper-ink-2); max-width: 44ch; }
.how .fine { margin-top: var(--s5); }
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto; column-gap: var(--s6); row-gap: var(--s2); margin-top: var(--s7); }
  .steps li { grid-row: span 2; grid-template-rows: subgrid; align-items: stretch; }
}

/* ---------- dates: three numerals, the live one in green, then the one note ----------
   Phones stack them; from 640px each date is a row (numeral left, line right) under a hairline; from 900px three columns. */
.dates { background: var(--night-2); }
.dates > .wrap { display: grid; gap: var(--s6); }
.dates .num { display: block; font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: .95; color: var(--ink); }
.dates .num.on { color: var(--signal); }
.dates p { margin-top: var(--s4); color: var(--ink-2); max-width: 26ch; }
.dates > .wrap + .wrap { display: block; margin-top: var(--s6); }
.dates > .wrap + .wrap::before { content: ""; display: block; height: 1px; background: var(--rule); margin-bottom: var(--s5); } /* the rule inside the gutters, the width of the numerals above */
.dates .fine { margin-top: 0; max-width: 70ch; }
@media (min-width: 640px) and (max-width: 899px) {
  .dates > .wrap:first-child { gap: 0; }
  .dates > .wrap:first-child > div { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); column-gap: var(--s5); align-items: baseline; padding-block: var(--s4); border-top: 1px solid var(--rule); } /* 17rem holds "Dec 15" on one line at the 68px the numeral reaches by 899 (it wrapped in a 14rem track at 768) */
  .dates .num { white-space: nowrap; }
  .dates > .wrap:first-child > div:first-child { padding-top: 0; border-top: 0; }
  .dates p { margin-top: 0; max-width: 40ch; }
}
@media (min-width: 900px) { .dates > .wrap:first-child { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); } }

/* ---------- questions ---------- */
#questions .wrap { display: grid; gap: var(--s5); }
#questions .body { display: grid; gap: var(--s5); min-width: 0; }
#questions .body > * { min-width: 0; }
.jump { max-width: none; }
.jump .tlink { font-size: var(--t-md); }
.jump .tlink svg { transition: transform var(--d-ui) var(--ease); }
.jump .tlink:hover svg { transform: translateX(4px); }
@media (min-width: 900px) { #questions .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 56px; align-items: start; } }

/* ---------- the request: intro left, the white card right, on the pale paper-2 band ----------
   The band sits between "How it works" (paper) and the dial (night). Paper-2 under a hairline keeps the request its own surface,
   lifts the white card, and leaves the dark ground for the hero, the dial and the dates. Small print steps up to paper-ink-2 here:
   paper-muted is 4.3:1 on paper-2, under the 4.5:1 that 14px text needs. */
.quiz-band { background: var(--paper-2); border-top: 1px solid var(--paper-rule); }
.quiz-band .wrap { display: grid; gap: var(--s6); }
.quiz-band .intro { display: grid; gap: var(--s4); align-content: start; }
.quiz-band .intro > p { color: var(--paper-ink-2); font-size: var(--t-lg); max-width: 40ch; }
.quiz-band .intro > p.fine { font-size: var(--t-xs); }
.quiz-band .fine, .customer-home .confirmation .fine { color: var(--paper-ink-2); }
.quiz-band .preview-note, .customer-home .confirmation .preview-note { background: var(--white); }
.quiz { position: relative; padding: 22px 16px 20px; border: 1px solid var(--paper-rule); border-radius: var(--r); gap: 0; box-shadow: var(--shadow); }
.quiz fieldset { gap: 0; }
.quiz fieldset:disabled { opacity: .75; }
.qhead { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.qprog { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s2); }
.qprog li { display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: start; gap: 6px; min-width: 0; } /* number above label on phones: "Sobre você" fits one line at 320; the label row fills so all four labels match */
.qprog .l { align-self: stretch; }
.qprog .n { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--control-boundary); color: var(--paper-muted); font: 600 var(--t-xs)/1 var(--body); background: var(--white); }
.qprog .l { font-size: var(--t-xs); font-weight: 500; color: var(--paper-muted); line-height: 1.3; overflow-wrap: break-word; min-width: 0; }
.qprog li.now .n { border-color: var(--paper-ink); background: var(--paper-ink); color: var(--white); }
.qprog li.now .l { color: var(--paper-ink); font-weight: 600; }
.qprog li.done .n { border-color: var(--green); background: var(--green); color: var(--white); }
.qprog li.done .l { color: var(--green-ink); }
.qbar { height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; }
.qbar i { display: block; width: 100%; height: 100%; border-radius: 3px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform var(--d-answer) var(--ease); }
/* The fill is a class of the step, never an inline style: the live CSP has no 'unsafe-inline'. */
.quiz[data-quiz-step="1"] .qbar i { transform: scaleX(.25); }
.quiz[data-quiz-step="2"] .qbar i { transform: scaleX(.5); }
.quiz[data-quiz-step="3"] .qbar i { transform: scaleX(.75); }
.quiz[data-quiz-step="4"] .qbar i { transform: scaleX(1); }
.qcount { font-size: 1rem; color: var(--paper-muted); font-weight: 500; }
.qstep { display: grid; gap: var(--s5); padding: 0; animation: qin var(--d-ui) var(--ease); }
@keyframes qin { from { opacity: .65; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.qtitle { font-size: clamp(1.625rem, 1.3rem + 1.3vw, 2.125rem); line-height: 1.05; outline: none; }
.qtitle:focus-visible { outline: 3px solid var(--focus-paper); outline-offset: 4px; }
.qgrid { display: grid; gap: 20px; }
/* Side by side, Name and ZIP share one label row and one control row (subgrid): the Portuguese ZIP label wraps without pushing its input down. */
@media (min-width: 640px) {
  .qgrid { grid-template-rows: auto 54px; row-gap: 10px; }
  .qgrid > .field { grid-row: span 2; grid-template-rows: subgrid; row-gap: 10px; }
}
.quiz .field { gap: 10px; }
.quiz[data-quiz-step] .proxied > label:not(.vh) { font-size: 1rem; }
.choice { display: grid; gap: 10px; }
.choice-reason { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; } /* every card the height of the tallest */
.choice-method { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice [role="radio"] { display: flex; align-items: center; gap: 14px; min-height: 68px; padding: 12px 14px; border: 1.5px solid var(--control-boundary); border-radius: var(--r-tile); background: var(--white); color: var(--paper-ink); font: 500 1.0625rem/1.3 var(--body); text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; transition: border-color var(--d-micro) var(--ease), background-color var(--d-micro) var(--ease), box-shadow var(--d-micro) var(--ease), transform var(--d-micro) var(--ease); -webkit-tap-highlight-color: transparent; }
.choice [role="radio"] > span:last-child { flex: 1 1 auto; min-width: 0; }
.choice [role="radio"]::after { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--control-boundary); background: var(--white); }
.choice [role="radio"]:hover { border-color: var(--paper-ink); background: var(--tint); }
.choice [role="radio"]:active { transform: scale(.985); }
.choice [role="radio"][aria-checked="true"] { border-color: var(--green); background: var(--tint); box-shadow: 0 0 0 3px var(--ring); }
.choice [role="radio"][aria-checked="true"]::after { border-color: var(--green); background: var(--green) url("tick.svg") center / 14px no-repeat; }
.choice .ci { display: grid; place-items: center; flex: none; width: 36px; height: 36px; color: var(--navy-2); }
.choice .ci svg { width: 28px; height: 28px; }
.choice [role="radio"][aria-checked="true"] .ci { color: var(--green); }
/* The original illustrations stay as small, supporting choice icons. */
.choice-reason .illo { width: 52px; height: 42px; padding: 0; border-radius: 0; background: transparent; }
.choice-reason [role="radio"][aria-checked="true"] .illo { background: transparent; }
/* Reason copy sits top-aligned beside the icon, its first line on the icon's centre line, so four cards share one text top; the radio dot stays centred. */
.choice-reason [role="radio"] { align-items: flex-start; }
.choice-reason [role="radio"] > span:last-child { align-self: stretch; padding-top: 10px; }
.choice-reason [role="radio"]::after { align-self: center; }
.choice-method [role="radio"] { position: relative; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 108px; padding: 14px; }
.choice-method [role="radio"]::after { position: absolute; top: 12px; right: 12px; }
/* Pills sit in equal columns, two to a row: the four callback windows make a 2 x 2 block and the two languages one row, at every width. */
.choice-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.choice-pills [role="radio"] { justify-content: center; text-align: center; min-height: 44px; padding: 8px 12px; border-radius: var(--pill); font-size: 1rem; gap: 8px; }
.choice-pills [role="radio"] > span:last-child { flex: 0 1 auto; }
.choice-pills [role="radio"]::after { width: 0; height: 0; border: 0; }
.choice-pills [role="radio"][aria-checked="true"] { color: var(--green-ink); }
.field:has(> [aria-invalid="true"]) .choice [role="radio"] { border-color: var(--err); }
.quiz .fold > summary.row { background: var(--white); }
.recap { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--paper-rule); }
.recap dt { padding: 12px 14px 0; font-size: 1rem; font-weight: 500; color: var(--paper-muted); }
.recap dd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; padding: 4px 14px 12px; border-bottom: 1px solid var(--paper-rule); font-weight: 500; color: var(--paper-ink); overflow-wrap: anywhere; }
.recap dd:last-of-type { border-bottom: 0; }
.recap dd .missing { color: var(--err); font-weight: 600; }
.recap-edit { flex: none; min-height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--paper-ink); font: 600 1rem var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; border-radius: 8px; }
.recap-edit:hover { color: var(--green-ink); }
.qfoot { display: grid; gap: 14px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--paper-rule); }
.qfoot .err:empty, .qfoot #request-status:empty { display: none; }
.qnav { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: stretch; } /* Back grows with a wrapping Send label, so the pair keeps one top edge and one height */
.qnav .btn { width: auto; }
.qnav [data-quiz-back] { padding-inline: 18px; }
.qnav [data-quiz-next] { justify-self: end; min-width: 8rem; }
.qnav [data-quiz-back][hidden] + [data-quiz-next], .qnav [data-quiz-back][hidden] ~ [type="submit"] { grid-column: 1 / -1; }
.qnav [type="submit"] { grid-column: 2; }
.quiz:not([data-quiz-step]) .qnav { grid-template-columns: 1fr; }
.quiz:not([data-quiz-step]) .qnav [type="submit"] { grid-column: 1; width: 100%; }
/* Without scripts the cards do nothing, so the real selects show with their labels. */
.quiz:not([data-quiz-step]) .choice { display: none; }
.quiz:not([data-quiz-step]) .proxied > label.vh { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
.quiz .check { padding: var(--s4) 0; border-top: 1px solid var(--paper-rule); }
.quiz #privacy-note { margin-top: -4px; }
@media (min-width: 640px) {
  .quiz { padding: 28px 28px 24px; }
  .qprog li { display: flex; align-items: flex-start; }
  .qprog .l { align-self: stretch; padding-top: 3px; } /* the first line sits on the numeral's centre line, however many lines follow */
  .qprog .n { width: 26px; height: 26px; }
  .choice-reason { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .choice-reason [role="radio"] { min-height: 84px; }
  .qgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .quiz-band .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); align-items: start; }
  .quiz { padding: var(--s6); }
}
/* Beside the intro (960 to 1199) the card is narrow: four full-width reason cards, so the Portuguese labels keep to two lines, and
   Name and ZIP stack, since side by side each field is about 216px and a long name scrolls out of view (measured at 1024). */
@media (min-width: 960px) and (max-width: 1199px) {
  .choice-reason { grid-template-columns: minmax(0, 1fr); }
  .qgrid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 20px; }
  .qgrid > .field { grid-row: auto; grid-template-rows: auto 54px; }
}

/* ---------- form polish shared by the quiz and the dial ---------- */
.field > [aria-invalid="true"] { background-color: var(--error-field); }
.dial .field > [aria-invalid="true"] { background-color: var(--night); }
.field:has(> [aria-invalid="true"]) > label { color: var(--err); }
.dial .field:has(> [aria-invalid="true"]) > label { color: var(--rose); }
.field input:hover:not(:focus), .field select:hover:not(:focus) { border-color: var(--paper-ink); }
.err { display: flex; gap: 8px; align-items: flex-start; }
.err:not(:empty)::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--err) url("err.svg") center / 10px no-repeat; }
.dial .err:not(:empty)::before { background-color: var(--rose); }

/* ---------- confirmation and failure (they take the request's place, on the same paper-2 band, the white card on it) ---------- */
.customer-home .confirmation { background: var(--paper-2); border-top: 1px solid var(--paper-rule); }
/* The result takes the request's place near the end of the page; a viewport of height lets its heading scroll under the sticky bar. */
@media (min-width: 768px) { .customer-home .confirmation { min-height: calc(100vh - var(--nav-h)); } }
.customer-home #confirmation .ok-card::before { content: ""; display: block; width: 48px; height: 48px; border-radius: 50%; background: var(--green) url("tick.svg") center / 26px no-repeat; }
.customer-home #confirmation .card p { max-width: none; }
.customer-home #delivery-uncertain .body { padding: 24px; border: 1px solid var(--err); border-radius: var(--r-tile); background: var(--err-bg); gap: 16px; }
.customer-home #delivery-uncertain .body p { max-width: none; }
.customer-home #delivery-uncertain .body > a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- the dock: on a phone, "Request a review" and back to top in a bar at the bottom;
   from 768 up only a round back-to-top button. It leaves while the hero button, the dial, the quiz, the
   confirmation or the failure screen is on screen, so it never covers a control that matters. ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--night-3); border-top: 1px solid var(--rule); transition: transform var(--d-ui) var(--ease); }
.dock-cta { width: 100%; min-height: 52px; background: var(--signal); color: var(--signal-ink); }
.dock-cta:hover { background: var(--signal-hover); color: var(--signal-ink); }
.totop { display: none; place-items: center; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ink-2); background: var(--night-3); color: var(--ink); text-decoration: none; transition: background-color var(--d-micro) var(--ease); }
.totop:hover { background: var(--night-4); color: var(--ink); }
.totop svg { width: 22px; height: 22px; }
.dock.dock-top .totop { display: inline-grid; }
/* While a cover is on screen the whole dock leaves, back to top included: nothing floats over the quiz. */
.dock.dock-off { visibility: hidden; transform: translateY(120%); pointer-events: none; }
@media (max-width: 767px) {
  .customer-home .ftr, .landing-page .ftr { padding-bottom: calc(36px + var(--dock-h)); }
}
@media (min-width: 768px) {
  .dock, .dock.dock-off { left: auto; right: 24px; bottom: 24px; display: block; padding: 0; background: transparent; border: 0; pointer-events: none; }
  .dock .dock-cta { display: none; }
  .dock:not(.dock-off) .totop { pointer-events: auto; width: 52px; height: 52px; box-shadow: inset 0 0 0 1.5px var(--ink-2), var(--shadow-night); }
  .dock:not(.dock-top), .dock.dock-off { transform: translateY(140px); }
}

/* ---------- door pages and /pt/: the night hero (the situation, one line, the button, Victor), then paper slices ----------
   Order on every door and on /pt/: hero, "bring these" (three items and one note), the timing line, who you'll talk to, the closing button, the footer. */
.landing-page .hero .lede { max-width: 42ch; }

/* "bring these to the conversation": the heading, then the numbered list and one note (heading left, list right from 900px) */
.bring .wrap { display: grid; gap: var(--s5); align-items: start; }
.bring h2 { max-width: 16ch; }
.bring-body { display: grid; gap: var(--s5); min-width: 0; }
.bring ol { list-style: none; border-top: 2px solid var(--paper-ink); }
.bring li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s3); padding: var(--s4) 0; border-bottom: 1px solid var(--paper-rule); align-items: baseline; }
.bring li .num { font-size: 1.875rem; color: var(--green); }
.bring li p { font-size: var(--t-lg); font-weight: 500; line-height: 1.4; max-width: none; }
.bring .note { color: var(--paper-ink-2); max-width: 52ch; }
.bring .fine { max-width: 52ch; margin-top: calc(var(--s2) - var(--s5)); }
@media (min-width: 900px) { .bring .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: 56px; } }

/* the timing line: one icon, one short heading, one sentence, on the night ground */
.timing { background: var(--night-2); padding-block: var(--s7); }
.timing .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s4); align-items: start; }
.timing-ic { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--night-3); color: var(--signal); }
.timing-ic svg { width: 24px; height: 24px; }
.timing h2 { font-size: var(--t-h3); line-height: 1.15; max-width: none; }
.timing p { margin-top: var(--s2); color: var(--ink-2); max-width: 60ch; }

/* the close: the one button again */
.close { background: var(--night-2); padding-block: var(--s7); }
.close .wrap { display: grid; gap: var(--s4); justify-items: start; }
.close .fine { max-width: none; }
.close .fine a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }

/* ---------- legal pages ---------- */
.legal-page .doc { padding-block: 48px 72px; }
.legal-page .doc .wrap { max-width: 56rem; gap: 24px; }
.legal-page .doc .wrap > section { padding-top: 24px; border-top: 1px solid var(--paper-rule); gap: 16px; }
.legal-page .doc p, .legal-page .doc li { max-width: 44rem; }
.legal-page .toc ol { padding-inline-start: 2.5rem; }
.legal-page .doc .resumo { padding: 24px; border-top: 0; }

/* ---------- phones: compact spacing and full-width controls ---------- */
@media (max-width: 767px) {
  .customer-home .hero { padding-bottom: var(--s7); }
  .quiz[data-quiz-step="4"] .qnav { grid-template-columns: 1fr; }
  .quiz[data-quiz-step="4"] .qnav [data-quiz-back] { justify-self: start; }
  .quiz[data-quiz-step="4"] .qnav [type="submit"] { grid-column: 1; width: 100%; padding-inline: 12px; }
  .landing-page .acts, .customer-home .hero .acts { display: grid; grid-template-columns: minmax(0, 1fr); }
  .landing-page .acts .btn, .customer-home .hero .acts .btn { width: 100%; padding-inline: 12px; }
  .customer-home form.card { padding: 20px 16px; }
  .field input, .field select { font-weight: 500; }
  .field label { font-size: 1rem; }
  .check { min-height: 44px; }
  .check input { width: 28px; height: 28px; margin: 0; }
  .preview-note, .preview-safety { padding: 16px; }
  .preview-safety .acts .btn { width: 100%; }
  .ftr .id a { display: inline-flex; align-items: center; min-height: 44px; }
  .customer-home .fold[open] > .fold-body { padding: 16px 12px; }
}

/* Only progress and step changes move. The introduction is immediately readable. */
@media (prefers-reduced-motion: reduce) {
  .qstep { animation: none; }
  .qbar i, .dock, .secnav, .jump .tlink svg { transition: none; }
  .jump .tlink:hover svg { transform: none; }
}