/* NexoNutra brand manual v1.0: palette B, Plus Jakarta Sans. Always light, neutral first:
   white and paper with ink text; green only for the logo, buttons, icons and checks; amber as a small spark. */
:root {
  color-scheme: light;
  --white: #FFFFFF; --paper: #FBFAF6; --ink: #14251D; --muted: #56675E; --line: #E6E8E2;
  --green: #1F7A4D; --green-hover: #17603C; --amber: #F2A93B; --red: #B4441F;
  --font: "Plus Jakarta Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 17px/1.6 var(--font); }
a { color: var(--ink); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; letter-spacing: -.015em; text-wrap: balance; }
p { margin: 0; }
svg { flex: none; }
[hidden] { display: none !important; }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 720px) { .wrap { padding-inline: 32px; } }
.narrow { max-width: 760px; }

/* header */
header { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, .94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 12px; }
.logo img { display: block; height: 30px; width: auto; }
.bar nav { display: flex; align-items: center; gap: 2px; }
.bar nav a.link { color: var(--muted); text-decoration: none; font-size: 15px; font-weight: 500; padding: 8px 10px; display: none; }
.bar nav a.link.strong { color: var(--ink); font-weight: 700; }
@media (min-width: 820px) { .bar nav a.link { display: inline; } }
.bar nav a.link:hover { color: var(--green); }
.lang { border: 1px solid var(--line); background: var(--white); color: var(--ink); border-radius: 999px; padding: 7px 14px;
        font: 600 14px var(--font); text-decoration: none; margin-left: 8px; }
.lang:hover { border-color: var(--green); color: var(--green); }

/* hero */
.hero { background: radial-gradient(900px 420px at 100% 0%, #F4F2EA, transparent 70%), var(--white); }
.hero .wrap { display: grid; gap: 40px; padding-block: 56px 48px; align-items: center; }
@media (min-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); padding-block: 88px 72px; } }
.eyebrow { color: var(--muted); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 14px; }
h1 { font-size: clamp(34px, 5.6vw, 56px); line-height: 1.07; font-weight: 800; letter-spacing: -.025em; margin-bottom: 20px; max-width: 15ch; }
.lead { font-size: clamp(17px, 2vw, 19px); color: var(--muted); max-width: 36em; margin-bottom: 30px; }
.buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 12px; font: 700 16px/1.2 var(--font);
       text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.btn svg { width: 18px; height: 18px; }
.btn.primary { background: var(--green); color: var(--white); }
.btn.primary:hover { background: var(--green-hover); }
.btn.primary[disabled] { opacity: .6; cursor: progress; }
.btn.ghost { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn.ghost:hover { border-color: var(--green); color: var(--green); }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
.badges li { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 999px;
             padding: 6px 13px; font-size: 14px; font-weight: 600; }
.badges svg { width: 16px; height: 16px; color: var(--green); stroke-width: 2.4; }
.hero-card { background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 32px 28px; display: grid; gap: 22px; justify-items: center; }
.hero-card .sym { width: 128px; height: auto; }
.hero-card .formats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; }
.fmt { background: var(--white); border-radius: 14px; padding: 14px 6px 12px; display: grid; justify-items: center; gap: 6px; font-size: 13px;
       font-weight: 600; text-align: center; }
.fmt svg { width: 30px; height: 30px; color: var(--green); }
.hero-card .pack { font-size: 14px; color: var(--muted); text-align: center; }
@media (max-width: 899px) { .hero-card { padding: 24px 18px; } .hero-card .sym { width: 92px; } }

section { padding-block: 64px; }
@media (min-width: 720px) { section { padding-block: 88px; } }
.alt { background: var(--paper); border-block: 1px solid var(--line); }
h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.15; font-weight: 800; margin-bottom: 10px; }
h3 { font-size: 18px; font-weight: 700; }
.sub { color: var(--muted); margin-bottom: 32px; max-width: 38em; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 24px; }
.card h3 { margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 16px; }
.icon { width: 46px; height: 46px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); color: var(--green); display: grid;
        place-items: center; margin-bottom: 16px; }
.icon svg { width: 24px; height: 24px; }
.split { display: grid; gap: 32px; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } }
.formats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; margin-bottom: 16px; }
.formats-row .fmt { border: 1px solid var(--line); }
.note { color: var(--muted); font-size: 15px; }
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.facts li:last-child { border-bottom: 0; }
.facts svg { width: 22px; height: 22px; color: var(--green); margin-top: 2px; stroke-width: 2.2; }
.steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); counter-reset: step; }
.steps .card { position: relative; padding-top: 68px; }
.steps .card::before { counter-increment: step; content: counter(step); position: absolute; top: 22px; left: 24px; width: 32px; height: 32px; border-radius: 50%;
                       background: var(--paper); border: 1px solid var(--line); color: var(--ink); font-weight: 800; display: grid; place-items: center; font-size: 15px; }
.steps .card:last-child::before { background: var(--amber); border-color: var(--amber); }

/* about */
.about { align-items: center; }
.about .lead { margin-bottom: 16px; }
.who { display: inline-flex; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; margin-top: 12px; }
.who img { width: 52px; height: 52px; padding: 9px 11px; background: var(--white); border: 1px solid var(--line); border-radius: 50%; object-fit: contain; }
.who b { display: block; }
.who span { color: var(--muted); font-size: 15px; }

/* quote form */
.quote-wrap { display: grid; gap: 32px; }
@media (min-width: 980px) { .quote-wrap { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; } }
.quote, .result { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: clamp(18px, 3vw, 32px); display: grid; gap: 28px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 14px; }
legend { font-weight: 800; font-size: 18px; padding: 0; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
legend .n { width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--white); font-size: 14px; display: grid; place-items: center; }
legend small { font-weight: 500; font-size: 14px; color: var(--muted); }
.lbl, .field > span { font-size: 14px; font-weight: 600; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip span { display: block; border: 1px solid var(--line); border-radius: 999px; padding: 9px 16px; font-size: 15px; font-weight: 600; background: var(--white); }
.chip:hover span { border-color: var(--green); }
.chip input:checked + span { background: var(--green); border-color: var(--green); color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }
.row2 { display: grid; gap: 14px; }
@media (min-width: 620px) { .row2 { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; min-width: 0; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 100%; font: 400 16px/1.4 var(--font); color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
textarea { resize: vertical; min-height: 92px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error { color: var(--red); font-weight: 600; font-size: 15px; }
.send { display: grid; gap: 14px; justify-items: start; }
.consent, .private { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; font-size: 14px; color: var(--muted); }
.consent svg, .private svg { width: 20px; height: 20px; color: var(--green); margin-top: 2px; }
.private b { color: var(--ink); }
.result { gap: 12px; }
.result pre { margin: 4px 0; white-space: pre-wrap; word-break: break-word; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 14px;
              font: 400 14px/1.5 var(--font); max-height: 320px; overflow: auto; }
.okmark { width: 48px; height: 48px; border-radius: 50%; background: var(--green); color: var(--white); display: grid; place-items: center; }
.okmark svg { width: 26px; height: 26px; stroke-width: 2.6; }
.side { display: grid; gap: 18px; }
.direct { background: var(--white); border: 1px solid var(--line); border-radius: 16px; padding: 18px; display: grid; gap: 8px; justify-items: start; }
.email { font-size: 18px; font-weight: 800; color: var(--ink); text-decoration: none; word-break: break-all; }
.email:hover { color: var(--green); }

/* plain document pages */
.doc { padding-block: 56px 72px; }
.doc h1 { max-width: none; font-size: clamp(30px, 4.5vw, 44px); margin-bottom: 6px; }
.doc h2 { font-size: 22px; margin: 34px 0 8px; }
.doc p, .doc li { color: var(--muted); max-width: 68ch; }
.doc ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.updated { font-size: 15px; }
.back { margin-top: 40px; font-weight: 600; }

footer { border-top: 1px solid var(--line); padding-block: 32px 44px; color: var(--muted); font-size: 14px; }
footer .wrap { display: grid; gap: 14px; }
footer img { height: 22px; width: auto; }
footer a { color: var(--muted); }

/* ---------------------------------------------------------------- motion and conversion details
   Everything is visible without JavaScript. Motion only guides the eye toward the quote button, and it is
   switched off for people who ask their device for less motion. */
header { transition: box-shadow .25s ease; }
header.scrolled { box-shadow: 0 6px 24px rgba(20, 37, 29, .07); }
.micro { margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--muted); }
.micro + .badges { margin-top: 22px; }

/* hero: one staged entrance when the page opens */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms + 60ms); }

/* sections ease in as they come into view (only when JavaScript is running) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
              transition-delay: calc(var(--i, 0) * 80ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* small responses to the pointer */
.card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.btn { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; }
.btn svg { transition: transform .2s ease; }
@media (hover: hover) {
  .card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(20, 37, 29, .08); border-color: #D5DAD1; }
  .btn:hover svg { transform: translateX(3px); }
  .fmt svg, .icon svg { transition: transform .25s ease; }
  .card:hover .icon svg, .fmt:hover svg { transform: scale(1.1) rotate(-4deg); }
}
.btn:active { transform: scale(.98); }
.chip span { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }

/* the signature moment: the capsule's two halves meet when the diagram comes into view */
.js .flow .cap-a { transform: translateX(-12px); opacity: 0; }
.js .flow .cap-b { transform: translateX(12px); opacity: 0; }
.js .flow .cap-a, .js .flow .cap-b { transition: transform .7s cubic-bezier(.3, 1.4, .4, 1) .35s, opacity .4s ease .35s; }
.js .flow.in .cap-a, .js .flow.in .cap-b { transform: none; opacity: 1; }

/* questions and answers */
.faq { display: grid; gap: 10px; margin-top: 22px; }
.faq details { border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 48px 16px 18px; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--green);
                      border-bottom: 2px solid var(--green); transform: translateY(-70%) rotate(45deg); transition: transform .2s ease; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 18px 18px; color: var(--muted); max-width: 62ch; }
.faq details[open] p { animation: rise .3s ease both; }

/* the form's success mark draws itself */
@keyframes draw { to { stroke-dashoffset: 0; } }
#q-ok:not([hidden]) .okmark svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw .5s ease .15s forwards; }
#q-ok:not([hidden]) .okmark { animation: rise .35s ease both; }

/* phones: the quote button stays within reach after the first screen */
.sticky-cta { display: none; }
@media (max-width: 819px) {
  .sticky-cta { display: flex; align-items: center; justify-content: center; gap: 8px; position: fixed; left: 16px; right: 16px;
                bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 6; background: var(--green); color: var(--white);
                font: 700 16px/1.2 var(--font); text-decoration: none; padding: 15px 20px; border-radius: 14px;
                box-shadow: 0 10px 30px rgba(20, 37, 29, .22); transform: translateY(160%); transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
  .sticky-cta svg { width: 18px; height: 18px; }
  .sticky-cta.show { transform: none; }
  footer { padding-bottom: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .rise, .faq details[open] p, #q-ok:not([hidden]) .okmark, #q-ok:not([hidden]) .okmark svg path { animation: none; }
  #q-ok:not([hidden]) .okmark svg path { stroke-dashoffset: 0; }
  .js .reveal, .js .flow .cap-a, .js .flow .cap-b { opacity: 1; transform: none; transition: none; }
  .flow-link i { animation: none; }
  .flow-node, .flow-role { transition: none; animation: none; }
  .card, .btn, .btn svg, .sticky-cta, header { transition: none; }
}

/* the checklist page, and the link to it from the first screen */
.explore { margin-top: 12px; font-size: 15px; font-weight: 600; }
.explore a { display: inline-flex; align-items: center; gap: 6px; color: var(--green); text-decoration: none; border-bottom: 1px solid transparent; }
.explore a:hover { border-bottom-color: var(--green); }
.explore svg { width: 16px; height: 16px; }
.explore + .badges { margin-top: 22px; }
.checklist .lead { max-width: none; margin: 14px 0 22px; }
.questions { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 14px; counter-reset: q; }
.questions li { counter-increment: q; position: relative; background: var(--white); border: 1px solid var(--line); border-radius: 18px;
                padding: 22px 22px 20px 74px; display: grid; gap: 8px; }
.questions li::before { content: counter(q); position: absolute; left: 22px; top: 22px; width: 36px; height: 36px; border-radius: 50%;
                        background: var(--ink); color: var(--white); font-weight: 800; display: grid; place-items: center; }
.questions h2 { font-size: 19px; margin: 0; line-height: 1.3; }
.questions p { max-width: none; }
.questions .good { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; color: var(--ink); }
.questions .good svg { width: 20px; height: 20px; color: var(--green); margin-top: 3px; stroke-width: 2.4; }
.abroad { margin-top: 22px; padding: 16px 18px; border-left: 3px solid var(--amber); background: var(--paper); border-radius: 0 12px 12px 0; }
.check-cta { margin-top: 34px; background: var(--paper); border: 1px solid var(--line); border-radius: 20px; padding: 24px; display: flex;
             flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.check-cta h2 { margin: 0 0 4px; font-size: 22px; }
.disclaimer { margin-top: 22px; font-size: 14px; }
@media (max-width: 560px) { .questions li { padding: 66px 18px 18px; } .questions li::before { left: 18px; top: 18px; } }
@media print {
  header, footer, .sticky-cta, .print, .check-cta { display: none !important; }
  body { font-size: 12pt; }
  .doc { padding: 0; }
  .questions li { break-inside: avoid; border-color: #bbb; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* photographs: illustrations of the product formats, never of a specific facility */
.hero-photo { margin: 0; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--paper); }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-photo figcaption { padding: 12px 16px 14px; font-size: 14px; font-weight: 600; color: var(--muted); text-align: center; }
.photo-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 18px; }
@media (min-width: 620px) { .photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 980px) { .photo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.photo { margin: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--white); }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.photo figcaption { padding: 10px 12px 12px; font-weight: 700; font-size: 15px; text-align: center; }
@media (hover: hover) { .photo:hover img { transform: scale(1.05); } }
@media (max-width: 619px) { .photo:first-child { grid-column: span 2; } .photo:first-child img { aspect-ratio: 2 / 1; } }
.count-grid { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.count-grid li { background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 20px; display: grid;
                 grid-template-columns: 26px minmax(0, 1fr); gap: 12px; font-weight: 600; }
.count-grid svg { width: 24px; height: 24px; color: var(--green); stroke-width: 2.4; }
@media (prefers-reduced-motion: reduce) { .photo img { transition: none; } }

/* who does what: the brand, NexoNutra and the manufacturer as three buttons */
.flow { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 24px; padding: 26px 18px 18px; }
.flow-row { display: flex; align-items: stretch; justify-content: center; }
.flow-node { flex: 1 1 0; min-width: 0; max-width: 132px; display: grid; justify-items: center; align-content: start; gap: 10px; padding: 16px 6px 12px;
             background: var(--white); border: 2px solid var(--line); border-radius: 18px; color: var(--ink); cursor: pointer;
             font: 700 13px/1.25 var(--font); text-align: center;
             transition: border-color .25s ease, box-shadow .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1); }
.flow-node svg { width: 38px; height: 38px; }
.flow-node.nexo svg { width: 62px; height: 38px; overflow: visible; }
.flow-node:hover { border-color: #C9D2C7; }
.flow-node[aria-selected="true"] { border-color: var(--green); box-shadow: 0 10px 24px rgba(31, 122, 77, .16); transform: translateY(-4px); }
.flow-link { flex: 0 1 44px; min-width: 14px; align-self: center; height: 4px; position: relative; overflow: hidden; margin-inline: 4px;
             background: radial-gradient(circle, #B9C2B8 1.6px, transparent 2px) 0 50% / 10px 4px repeat-x; }
.flow-link i { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 4px; opacity: 0;
               background: linear-gradient(90deg, transparent, var(--green)); }
@keyframes travel { from { left: -40%; } to { left: 100%; } }
.flow[data-step="1"] .flow-link:nth-of-type(1) i, .flow[data-step="2"] .flow-link:nth-of-type(2) i { opacity: 1; animation: travel 1.1s ease-in-out infinite; }
.flow-panels { margin-top: 18px; min-height: 76px; }
.flow-role { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-size: 15px; color: var(--muted); }
.flow-role b { color: var(--ink); }
.flow-role + .flow-role { margin-top: 8px; }
.js .flow-role { display: none; }
.js .flow-role.on { display: block; animation: rise .35s ease both; }
.flow-hint { margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; }
html:not(.js) .flow-hint { display: none; }

/* the quote form one step at a time (when JavaScript runs; otherwise all three parts are shown) */
.wiz { display: grid; gap: 14px; }
.wiz-progress { display: grid; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); }
.wiz-bar { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.wiz-bar i { display: block; height: 100%; width: 33.4%; border-radius: 999px; background: var(--green); transition: width .35s cubic-bezier(.2, .7, .2, 1); }
.wiz-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.quote.wizard fieldset:not([hidden]) { animation: rise .35s ease both; }
.quote.wizard .send { gap: 14px; }
.quote.wizard .send .btn { justify-self: start; }
@media (max-width: 560px) { .wiz-buttons .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .quote.wizard fieldset:not([hidden]) { animation: none; } .wiz-bar i { transition: none; } }

/* situations a visitor can recognize: they describe the visitor, never an invented client or result */
.situations .card h3 { line-height: 1.3; }
.sit-cta { margin-top: 26px; }

/* longer answers are listed one per line, each a full-width tap target */
.chips.stack { display: grid; gap: 8px; }
.chips.stack .chip span { border-radius: 14px; padding: 13px 16px 13px 44px; position: relative; }
.chips.stack .chip span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; margin-top: -9px;
                                  border-radius: 50%; border: 2px solid #B9C2B8; background: var(--white); }
.chips.stack .chip input:checked + span::before { border-color: var(--white); background: var(--white); box-shadow: inset 0 0 0 4px var(--green); }

/* a question that was skipped */
.quote .missing { color: var(--red) !important; }
.quote legend.missing .n { background: var(--red); }