/* רישומון · site.css: all page and funnel CSS, lifted from mockup/index.html (design truth). tokens.css holds the variables. */
@font-face{ font-family:Heebo; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/fonts/heebo-400.woff2") format("woff2"); }
@font-face{ font-family:Heebo; font-style:normal; font-weight:700; font-display:swap; src:url("/assets/fonts/heebo-700.woff2") format("woff2"); }

html{ scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth; }
*,*::before,*::after{ box-sizing:inherit; }
body{ margin:0; background:var(--page); color:var(--ink); font-family:var(--font); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; }
@media (min-width:1024px){ body{ font-size:18px; } }
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--g-800); text-decoration:underline; text-underline-offset:3px; }
a:hover{ color:var(--g-900); }
p{ margin:0 0 1em; }
.wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--gutter); }
.center{ text-align:center; }
.section{ padding:56px 0; }
@media (min-width:1024px){ .section{ padding:96px 0; } }
.section-mint{ background:linear-gradient(180deg,#E9F7F0 0%,#DFF3E9 100%); }
:focus-visible{ outline:3px solid var(--g-500); outline-offset:3px; border-radius:6px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- type ---------- */
h1{ font-size:clamp(30px,4.3vw,48px); line-height:1.15; margin:0 0 12px; color:var(--g-800); font-weight:700; letter-spacing:-.005em; }
.h2{ font-size:clamp(26px,3.4vw,40px); line-height:1.2; color:var(--g-800); text-align:center; margin:14px 0 0; font-weight:700; }
.h2::after{ content:""; display:block; width:56px; height:4px; border-radius:2px; background:linear-gradient(90deg,var(--g-500),var(--g-400)); margin:14px auto 0; }
.sub{ font-size:clamp(17px,1.25vw,19px); color:var(--ink-2); margin:0 0 20px; max-width:62ch; }
.lead{ color:var(--ink-2); margin:12px auto 0; max-width:60ch; text-align:center; }
.small{ font-size:14px; color:var(--ink-3); }
.num{ font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums; }
.pill{ display:inline-flex; align-items:center; gap:8px; background:var(--mint-25); color:var(--g-800); border:1px solid var(--mint-line); border-radius:999px; padding:6px 14px 6px 12px; font-size:14px; font-weight:700; line-height:1.3; }
.pill svg{ width:16px; height:16px; }
.icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 22px; border-radius:14px; border:1.5px solid transparent; font:inherit; font-weight:700; font-size:17px; line-height:1; cursor:pointer; text-decoration:none; transition:background-color .15s, color .15s, border-color .15s, transform .05s; white-space:nowrap; }
.btn-primary{ background:var(--g-800); color:#fff; }
.btn-primary:hover{ background:var(--g-900); }
.btn-primary:active{ transform:translateY(1px); }
.btn-secondary{ background:var(--card); color:var(--g-800); border-color:var(--mint-line); }
.btn-secondary:hover{ border-color:var(--g-500); }
.btn[disabled], .btn.is-disabled{ background:#CBD5D1; color:#fff; cursor:not-allowed; }
.btn-block{ width:100%; }
.btn .spinner{ display:none; width:18px; height:18px; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:spin .8s linear infinite; }
.btn.is-loading .spinner{ display:inline-block; }
@keyframes spin{ to{ transform:rotate(360deg);} }

/* ---------- fields ---------- */
.label{ display:block; font-weight:700; font-size:15px; margin:0 0 6px; color:var(--ink); }
.input{ width:100%; min-height:52px; padding:0 16px; border:1.5px solid #CBD9D5; border-radius:14px; background:#fff; color:var(--ink); font:inherit; font-size:18px; transition:border-color .15s, box-shadow .15s; }
.input::placeholder{ color:#98A4AE; }
.input:focus, .input.is-focused{ outline:none; border-color:var(--g-500); box-shadow:0 0 0 4px rgba(0,189,134,.18); }
.input[aria-invalid="true"], .input.is-invalid{ border-color:var(--red); box-shadow:0 0 0 4px rgba(179,38,30,.12); }
.input-phone{ direction:ltr; text-align:left; letter-spacing:.02em; }
.error{ display:none; margin:8px 0 0; color:var(--red); font-size:14px; font-weight:700; }
.error svg{ width:16px; height:16px; vertical-align:-3px; margin-inline-end:4px; }
.reserve{ margin:0; }
.field-row{ display:grid; gap:10px; }
@media (min-width:768px){ .field-row{ grid-template-columns:1fr auto; align-items:stretch; } }
@media (min-width:768px) and (max-width:1023px){ .hero-card .field-row{ grid-template-columns:1fr; } }
.micro{ margin:12px 0 0; font-size:14px; color:var(--ink-2); line-height:1.5; }
.consent{ margin:8px 0 0; font-size:12.5px; color:var(--ink-3); line-height:1.45; }
.resume-links{ margin:10px 0 0; font-size:14px; }
.resume-links[hidden]{ display:none; }
.reserve.is-invalid .error{ display:block; }
.reserve .btn.is-loading{ pointer-events:none; }

/* ---------- hero: short green header (logo + house), the card under it ---------- */
.hero{ position:relative; background:linear-gradient(135deg,var(--g-500) 0%,var(--g-400) 100%); color:#fff; overflow:hidden; }
.hero-head{ display:flex; justify-content:center; align-items:center; padding-top:12px; padding-bottom:12px; min-height:0; }
.hero-illo{ align-self:center; line-height:0; }
.hero-illo svg{ width:200px; height:auto; display:block; }
.hero-card-wrap{ position:relative; z-index:2; margin-top:14px; padding-bottom:24px; }
.hero-card{ --rate-bg:#fff; background:linear-gradient(160deg,#036760 0%,#04857A 100%); color:#fff; border-radius:var(--r); padding:22px 20px 24px; box-shadow:var(--shadow); border:1px solid var(--line); }
.hero-card .pill{ margin-bottom:12px; }
.hero-card h1{ margin-bottom:8px; }
.hero-card .sub{ margin-bottom:14px; }
p.sub-short{ display:none !important; } p.footnote-short{ display:none !important; }
@media (max-width:767px){ p.sub-full, p.footnote-full{ display:none !important; } p.sub-short, p.footnote-short{ display:block !important; } }
@media (min-width:768px){
  .hero-head{ padding-top:14px; padding-bottom:14px; }
  .hero-illo svg{ width:240px; }
  .hero-card-wrap{ margin-top:16px; }
  .hero-card{ padding:32px; }
}
@media (min-width:1024px){
  /* desktop: logo top right, the house centered on the header's bottom edge, the card centered below the header */
  .hero-head{ min-height:125px; padding-top:14px; padding-bottom:14px; }
  .hero-illo svg{ width:265px; }
  .hero-card-wrap{ margin-top:28px; padding-bottom:32px; }
  .hero-card{ max-width:720px; margin:0 auto; padding:36px 40px; }
}
.footnote{ margin:-6px 0 16px; font-size:13px; line-height:1.45; color:var(--ink-3); }
.star{ color:var(--g-800); font-weight:700; }
.closed-notice{ display:none; background:var(--card); color:var(--ink); border-radius:var(--r); padding:28px; box-shadow:var(--shadow); font-size:19px; font-weight:700; max-width:760px; margin:0 auto; }
body[data-countdown="closed"] .hero-card{ display:none; }
body[data-countdown="closed"] .closed-notice{ display:block; }
body[data-countdown="closed"] .reserve:not(.closed-lead-form), body[data-countdown="closed"] .reserve-btn, body[data-countdown="closed"] .band, body[data-countdown="closed"] .sticky-bar, body[data-countdown="closed"] .cta-row{ display:none !important; }
.closed-lead{ max-width:760px; margin:14px auto 0; background:var(--card); border:2px solid var(--g-500); border-radius:var(--r); padding:22px 20px 24px; }
.closed-lead-line{ margin:0 0 12px; color:var(--ink-2); }
@media (min-width:1024px){ .closed-lead{ padding:28px 32px; } }

/* ---------- countdown band ---------- */
.band{ background:var(--amber-tint); color:var(--amber); border-top:1px solid var(--amber-line); border-bottom:1px solid var(--amber-line); }
.band .wrap{ padding-top:14px; padding-bottom:14px; }
.band-main{ margin:0; font-weight:700; font-size:17px; display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; }
.band-main .sep{ opacity:.5; }
@media (max-width:520px){ .band-main .sep{ display:none; } .band-main > span{ flex-basis:100%; } }
.band-sub{ margin:4px 0 0; font-size:14px; line-height:1.5; color:#7A4A00; max-width:80ch; }
@media (min-width:1024px){ .band-main{ font-size:18px; } }

/* ---------- trust strip ---------- */
.trust{ border-bottom:1px solid var(--line); background:#fff; }
.trust-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding-top:18px; padding-bottom:18px; text-align:center; }
.trust-item strong{ display:block; color:var(--g-800); font-size:clamp(17px,2vw,24px); line-height:1.2; }
.trust-item span{ display:block; font-size:12.5px; color:var(--ink-3); line-height:1.35; margin-top:4px; }
@media (min-width:768px){ .trust-item span{ font-size:14px; } .trust-row{ padding-top:22px; padding-bottom:22px; } }



/* ---------- hero rate strip ---------- */
.hero-rate{ display:flex; flex-direction:column; gap:0; background:var(--rate-bg); border:1px solid var(--mint-line); border-radius:var(--r-s); padding:14px 18px 12px; margin:4px 0 14px; }
.hero-rate-fig{ display:flex; flex-direction:column; gap:4px; }
.hero-rate-num{ font-size:clamp(52px,10vw,76px); line-height:1; font-weight:700; color:var(--g-600); letter-spacing:-.02em; white-space:nowrap; }
.hero-rate-label{ font-size:17px; font-weight:700; color:var(--g-800); line-height:1.35; }
.hero-rate-label .star{ margin-inline-start:2px; }
.hero-rate-or{ font-size:24px; font-weight:700; color:var(--ink-3); line-height:1; padding:12px 0 10px; text-align:center; }
/* ---------- block 3: the tariff tracks ---------- */
.tracks{ display:grid; gap:14px; margin-top:32px; }
.track{ position:relative; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); text-align:center; }
.track .track-tip{ margin-top:auto; }
@media (min-width:768px){ .track-head{ min-height:168px; display:flex; flex-direction:column; justify-content:center; } .track-fast .track-head{ justify-content:flex-start; } }
.track .tile{ position:static; margin:0 auto 12px; width:52px; height:52px; border-radius:14px; }
.track-fast .track-price{ color:var(--amber); }
.track-cpi .track-price{ color:var(--blue); }
.track-cpi .track-price small{ color:var(--blue); }
.track-fast .track-price small{ color:var(--amber); }
.tile-blue{ background:linear-gradient(135deg,var(--blue-tile),#56A8FF); }
.tile-pink{ background:linear-gradient(135deg,#1D2936,#3A4B5E); }
.track-name{ font-size:20px; margin:0 0 6px; color:var(--ink); }
.track-price{ font-size:40px; line-height:1; font-weight:700; color:var(--g-600); letter-spacing:-.02em; }
.track-price small{ font-size:.5em; color:var(--g-800); }
.track-then{ display:block; font-size:14px; font-weight:700; color:var(--ink-3); margin:12px 0 8px; text-align:center; letter-spacing:0; }
.tracks-compact .track-then{ font-size:11px; margin:4px 0 2px; }
.track-unit{ font-size:13px; color:var(--ink-3); margin:4px 0 0; }
.track-badge{ display:inline-block; margin-top:12px; }
.track-list{ list-style:none; padding:0; margin:16px 0 16px; text-align:start; display:grid; gap:8px; font-size:15px; }
.track-list li{ padding-inline-start:26px; position:relative; }
.track-list li::before{ content:""; position:absolute; inset-inline-start:0; top:3px; width:16px; height:16px; border-radius:50%; background:var(--mint-100); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23036760' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); background-size:10px; background-repeat:no-repeat; background-position:center; }
.track-tip{ margin-top:16px; background:var(--mint-25); border:1px solid var(--mint-line); border-radius:var(--r-s); padding:10px 12px; font-size:14px; color:var(--ink-2); text-align:start; line-height:1.5; }
.track-tip b{ display:block; color:var(--g-800); margin-bottom:2px; }
.track-fast .track-tip{ background:var(--amber-tint); border-color:var(--amber-line); } .track-fast .track-tip b{ color:var(--amber); }
.track-cpi .track-tip{ background:var(--blue-tint); border-color:var(--blue-line); } .track-cpi .track-tip b{ color:var(--blue); }
@media (min-width:768px){ .tracks{ grid-template-columns:repeat(3,1fr); gap:18px; align-items:stretch; } }
/* the urban premium bar under the cards, as on the quote page */
.premium-bar{ position:relative; max-width:760px; margin:40px auto 0; background:#F3F5F7; border:1px solid #E6EAEE; border-radius:var(--r); padding:38px 22px 20px; text-align:center; }
.premium-bar .tile{ position:absolute; top:-24px; inset-inline-start:50%; transform:translateX(50%); width:48px; height:48px; border-radius:14px; }
.premium-bar-title{ margin:0; font-weight:700; color:var(--ink); font-size:18px; line-height:1.35; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
.premium-bar-body{ margin:6px auto 0; color:var(--ink-2); font-size:15px; line-height:1.5; max-width:60ch; }
.premium-bar.compact{ margin-top:30px; padding:30px 16px 14px; }
.premium-bar.compact .tile{ width:40px; height:40px; top:-20px; }
.premium-bar.compact .premium-bar-title{ font-size:15px; }
.premium-bar.compact .premium-bar-body{ font-size:13px; }
/* the compact, selectable cards of the funnel's details step */
.tracks-compact{ margin-top:8px; gap:10px; }
.tracks-compact .track{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:16px 12px 14px; cursor:pointer; box-shadow:none; border:1.5px solid #CBD9D5; }
.tracks-compact .track .tile{ width:40px; height:40px; margin:0 0 6px; border-radius:12px; }
.tracks-compact .track-name{ font-size:16px; margin:0; }
.tracks-compact .track-price{ font-size:30px; }
.tracks-compact .track-unit{ font-size:12.5px; }
.tracks-compact .track:has(input:checked){ border-color:var(--g-500); background:var(--mint-25); box-shadow:0 0 0 1px var(--g-500) inset; }
.tracks-compact .track:has(input:focus-visible){ outline:3px solid var(--g-500); outline-offset:3px; }
@media (min-width:768px){ .tracks-compact{ grid-template-columns:repeat(3,1fr); gap:10px; } }
@media (max-width:767px){ .tracks-compact{ grid-template-columns:repeat(3,1fr); gap:8px; } .tracks-compact .track{ padding:12px 6px 10px; } .tracks-compact .track-price{ font-size:24px; } .tracks-compact .track-name{ font-size:13.5px; } .tracks-compact .track-unit{ font-size:11.5px; } }
.band .wrap{ text-align:center; }
.band-main{ justify-content:center; }
.band-sub{ margin-inline:auto; }

/* ---------- block 4: the urban premium and the city check ---------- */
.premium-table{ width:100%; max-width:720px; margin:28px auto 0; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); font-size:16px; }
.premium-table th, .premium-table td{ padding:16px 16px; text-align:start; border-top:1px solid var(--line); vertical-align:top; }
.premium-table thead th{ border-top:0; background:#fff; color:var(--ink); font-size:16px; font-weight:700; }
.premium-table thead th:not(:first-child), .premium-table td{ text-align:center; }
.premium-table tbody th{ font-weight:700; color:var(--ink); }
.premium-table td{ color:var(--ink-2); }
.premium-table td b{ color:var(--ink); font-size:22px; }
.premium-table td:last-child{ background:#F3F5F7; }
.premium-table thead th:last-child{ background:#E6EAEE; }
.premium-table-note{ display:block; font-weight:400; font-size:13px; color:var(--ink-3); margin-top:2px; }
.pt-pair{ display:inline-grid; grid-auto-flow:column; justify-content:center; column-gap:28px; }
.pt-cell{ display:flex; flex-direction:column; align-items:center; gap:3px; min-width:5em; }
.pt-num{ white-space:nowrap; }
.pt-note{ display:block; font-size:12.5px; color:var(--ink-3); line-height:1.3; white-space:nowrap; }
@media (max-width:479px){
  .premium-table{ font-size:14px; }
  .premium-table th, .premium-table td{ padding:12px 8px; }
  .premium-table td b{ font-size:18px; }
  .premium-table td{ white-space:normal; }
  .pt-pair{ column-gap:12px; }
  .pt-cell{ min-width:0; }
  .pt-note{ font-size:11px; white-space:normal; }
}
.premium{ max-width:720px; margin:28px auto 0; background:#F3F5F7; border:1px solid #E6EAEE; border-radius:var(--r); padding:20px 22px; }
.premium-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.premium-title{ font-weight:700; color:var(--ink); font-size:17px; margin:0; line-height:1.35; }
.premium-body{ margin:6px 0 0; color:var(--ink-2); font-size:15px; line-height:1.5; }
.citycheck{ max-width:720px; margin:18px auto 0; background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px 22px; box-shadow:var(--shadow); }
.citycheck .field-row{ margin-top:6px; }
.city-result{ display:none; margin:14px 0 0; font-weight:700; line-height:1.5; }
.city-result svg{ width:18px; height:18px; vertical-align:-4px; margin-inline-end:6px; }
.city-result.ok{ color:var(--g-800); }
.city-result.no{ color:var(--ink); font-weight:400; }
.city-result.nf{ color:var(--ink-2); font-weight:400; }
body[data-cityresult="ok"] .city-result.ok, body[data-cityresult="no"] .city-result.no, body[data-cityresult="nf"] .city-result.nf{ display:block; }
/* the premium card inside the funnel's bill confirmation */
.premium.inline{ margin:16px 0 0; padding:14px 16px; }
.premium.inline .premium-title{ font-size:15px; }
.premium.inline .premium-body{ font-size:14px; }
body[data-city="48"] .premium.inline{ display:none; }
body[data-city="48"] .city-line.eligible{ display:none; }
body[data-city="54"] .city-line.not-eligible{ display:none; }

/* ---------- block 2: the two figures ---------- */
.figures{ display:grid; grid-template-columns:1fr 1fr; margin:36px auto 0; max-width:820px; }
.figure{ padding:8px 12px; text-align:center; }
.figure + .figure{ border-inline-start:1px solid var(--line); }
.figure-num{ font-size:clamp(44px,6.5vw,72px); line-height:1; font-weight:700; letter-spacing:-.02em; white-space:nowrap; }
.figure-num small{ font-size:.45em; font-weight:700; margin-inline-start:4px; color:var(--g-800); }
.figure-amber .figure-num small{ color:var(--amber); }
.figure-green .figure-num{ color:var(--g-600); }
.figure-amber .figure-num{ color:var(--amber); }
.figure-label{ font-weight:700; margin-top:10px; }
.figure-sub{ color:var(--ink-2); font-size:14px; line-height:1.45; margin:4px auto 0; max-width:26ch; }
@media (min-width:768px){ .figure{ padding:12px 28px; } .figure-sub{ font-size:15px; } }
.prose{ max-width:68ch; margin:36px auto 0; }
.prose p{ margin:0 0 14px; color:var(--ink-2); }
.prose .key{ color:var(--ink); font-weight:700; background:var(--mint-25); border-inline-start:4px solid var(--g-500); padding:14px 18px; border-radius:var(--r-s); margin:18px 0; }
.sources{ font-size:14px; color:var(--ink-3); }
.sources a{ color:var(--g-800); }
.cta-row{ text-align:center; margin-top:28px; }

/* ---------- block 5: stat cards ---------- */
.stats{ display:grid; gap:14px; margin-top:36px; }
.stat{ position:relative; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); }
.tile{ position:absolute; top:18px; inset-inline-start:18px; width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; color:#fff; }
.tile svg{ width:22px; height:22px; stroke:#fff; }
.tile-green{ background:linear-gradient(135deg,var(--g-500),var(--g-400)); }
.tile-amber{ background:linear-gradient(135deg,var(--amber-tile),#F2B458); }
.stat-label{ color:var(--ink-3); font-size:15px; margin-top:54px; }
.stat-num{ font-weight:700; font-size:clamp(34px,4.6vw,44px); line-height:1.1; color:var(--ink); letter-spacing:-.01em; margin-top:4px; }
.stat-num .unit{ font-size:.45em; font-weight:400; color:var(--ink-2); margin-inline-start:4px; }
.stat-sub{ color:var(--ink-2); font-size:15px; margin-top:6px; }
.stat-big .stat-num{ font-size:clamp(48px,7vw,80px); color:var(--g-800); }
.stat-big{ order:-1; }
.c54{ display:none; } body[data-city="54"] .c54{ display:inline; } body[data-city="54"] .c48{ display:none; }
@media (min-width:768px){ .stats{ grid-template-columns:1fr 1fr; } .stat-big{ grid-column:1 / -1; } }
@media (min-width:1024px){
  .stats{ grid-template-columns:repeat(3,1fr); gap:18px; }
  .stat{ padding:32px; }
  .stat-big{ order:1; grid-column:1 / -1; }
  .stat-big .stat-num{ margin-top:10px; }
}
.stat-sentence{ text-align:center; font-weight:700; font-size:clamp(18px,2vw,22px); color:var(--g-800); margin:28px 0 0; }
.params{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:28px auto 0; max-width:900px; }
.param{ background:var(--mint-50); color:var(--g-800); border:1px solid var(--mint-line); border-radius:var(--r-s); padding:7px 12px; font-size:14px; line-height:1.3; }
.params-note{ text-align:center; font-size:14px; color:var(--ink-2); margin:14px auto 0; max-width:70ch; }
.block-form{ max-width:640px; margin:36px auto 0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); }
@media (min-width:1024px){ .block-form{ padding:32px; } }

/* ---------- sticky bar (mobile) ---------- */
.sticky-bar{ position:fixed; left:0; right:0; bottom:0; z-index:40; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-top:1px solid var(--line); padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px)); transform:translateY(110%); transition:transform .25s ease; }
.sticky-bar.is-visible{ transform:none; }
.sticky-line{ margin:0 0 8px; font-size:13px; color:var(--amber); font-weight:700; text-align:center; }
@media (min-width:768px){ .sticky-bar{ display:none; } }

/* ---------- hero card: outlined (locked) ---------- */
.hero-card{ border:2px solid var(--g-800); box-shadow:none; }
.hero-card h1, .hero-card .sub, .hero-card .footnote, .hero-card .label, .hero-card .micro{ color:#fff; }
.hero-card .footnote, .hero-card .micro, .hero-card .consent, .hero-card .consent a{ color:rgba(255,255,255,.88); }
.hero-card .consent a{ text-decoration:underline; }
.hero-card .footnote .star{ color:#A6F0D8; }
.hero-card .pill{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.4); color:#fff; }
.hero-card .pill .icon{ stroke:#fff; }
.hero-card .btn-primary{ background:#fff; color:var(--g-800); }
.hero-card .btn-primary:hover{ background:#ECFDF7; }
.hero-card .error{ color:#FFE1DD; }
.hero-card .error .icon{ stroke:#FFE1DD; }
.hero-rate{ align-items:center; text-align:center; border-color:#fff; background:var(--mint-25); }
.hero-rate-num small{ font-size:.42em; margin-inline-start:6px; color:var(--g-800); letter-spacing:0; }

/* ---------- header: taller house on phones and tablets (locked) ---------- */
@media (max-width:1023px){
  .hero-head{ min-height:0; }
  .hero-illo svg{ width:200px; }
}
@media (min-width:768px) and (max-width:1023px){
  .hero-illo svg{ width:240px; }
}
@media (min-width:1024px){
  .hero-head{ position:relative; }
  .hero-illo{ margin:0; }
}

/* ---------- steps after registration (timeline) ---------- */
.tl{ position:relative; max-width:820px; margin:36px auto 0; }
.tl::before{ content:""; position:absolute; top:28px; bottom:28px; inset-inline-start:27px; width:2px; background:var(--mint-100); }
.tl-item{ display:grid; grid-template-columns:56px 1fr; gap:0 14px; position:relative; padding-bottom:16px; align-items:start; }
.tl-num{ width:56px; height:56px; border-radius:50%; background:linear-gradient(135deg,var(--g-500),var(--g-400)); color:#fff; font-weight:700; font-size:22px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 6px var(--mint-25); position:relative; z-index:1; }
.tl-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r-s); padding:14px 16px; box-shadow:var(--shadow); }
.tl-card.mine{ background:var(--mint-25); border-color:var(--mint-line); }
.tl-title{ font-weight:700; font-size:17px; margin:0 0 4px; line-height:1.35; }
.tl-body{ color:var(--ink-2); font-size:15px; margin:0; line-height:1.5; }
.tl-dur{ display:inline-flex; gap:6px; align-items:center; color:var(--g-800); font-weight:700; font-size:14px; margin-top:8px; }
.tl-dur svg{ width:16px; height:16px; }
.tl-phase{ position:relative; z-index:1; display:flex; justify-content:flex-start; margin:0; padding:2px 0 18px; }
.tl-phase-label{ display:inline-block; background:var(--g-800); color:#fff; font-weight:700; font-size:14px; line-height:1.3; border-radius:999px; padding:9px 16px; box-shadow:0 0 0 6px var(--mint-25); }
.tl-sum{ max-width:820px; margin:8px auto 0; background:var(--mint-25); border:1px solid var(--mint-line); border-radius:var(--r); padding:18px 20px; text-align:center; }
.tl-sum-title{ font-weight:700; font-size:18px; color:var(--g-800); margin-bottom:6px; }
.tl-sum p{ margin:0; color:var(--ink); font-size:15px; line-height:1.55; }
@media (min-width:1024px){
  .tl::before{ inset-inline-start:50%; margin-inline-start:-1px; }
  .tl-item{ grid-template-columns:1fr 56px 1fr; gap:0 24px; padding-bottom:20px; }
  .tl-num{ grid-column:2; grid-row:1; }
  .tl-item:nth-of-type(odd) .tl-card{ grid-column:1; grid-row:1; }
  .tl-item:nth-of-type(even) .tl-card{ grid-column:3; grid-row:1; }
  .tl-card{ padding:18px 20px; }
  .tl-phase{ justify-content:center; padding:4px 0 24px; }
  .tl-phase-label{ font-size:15px; padding:10px 20px; }
}

/* ---------- the funnel ---------- */
#funnel{ background:var(--page); min-height:100vh; }
.fn-wrap{ max-width:592px; margin:0 auto; padding:0 16px 40px; }
.fn-top{ display:flex; align-items:center; justify-content:space-between; padding:12px 0 10px; }
.fn-logo{ height:26px; width:auto; display:block; }
.fn-nav{ display:flex; gap:8px; }
.fn-iconbtn{ width:44px; height:44px; border-radius:12px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--g-800); padding:0; }
.fn-iconbtn svg{ width:20px; height:20px; }
.fn-back{ visibility:hidden; }
body[data-step="details"] .fn-back, body[data-step="bill"] .fn-back, body[data-step="bill-page2"] .fn-back, body[data-step="bill-reading"] .fn-back, body[data-step="bill-failed"] .fn-back, body[data-step="bill-confirm"] .fn-back, body[data-step="bill-manual"] .fn-back, body[data-step="confirm"] .fn-back, body[data-step="payment"] .fn-back{ visibility:visible; }
.fn-progress{ margin:4px 0 20px; }
body[data-step="done"] .fn-progress, body[data-step="exit"] .fn-progress, body[data-step="error"] .fn-progress, body[data-step="loading"] .fn-progress, body[data-step="choose"] .fn-progress, body[data-step="after-cutoff"] .fn-progress{ display:none; }
body[data-step="done"] .fn-card, body[data-step="exit"] .fn-card, body[data-step="error"] .fn-card{ margin-top:24px; }
body[data-step="done"] .fn-nav, body[data-step="after-cutoff"] .fn-nav{ visibility:hidden; }
.fn-progress .progress div{ position:relative; overflow:hidden; }
.fn-progress .progress div::after{ content:""; position:absolute; inset:0; width:var(--fill,0%); background:var(--g-500); border-radius:3px; }
/* fills per step: stage 1 = code, stage 2 = details + bill + confirmation, stage 3 = questions + payment */
body[data-step="code"] .fn-progress [data-stage="1"]{ --fill:100%; }
body[data-step="details"] .fn-progress [data-stage="1"], body[data-step="bill"] .fn-progress [data-stage="1"], body[data-step="bill-page2"] .fn-progress [data-stage="1"], body[data-step="bill-reading"] .fn-progress [data-stage="1"], body[data-step="bill-failed"] .fn-progress [data-stage="1"], body[data-step="bill-confirm"] .fn-progress [data-stage="1"], body[data-step="bill-manual"] .fn-progress [data-stage="1"], body[data-step="confirm"] .fn-progress [data-stage="1"], body[data-step="payment"] .fn-progress [data-stage="1"]{ --fill:100%; }
body[data-step="details"] .fn-progress [data-stage="2"]{ --fill:33%; }
body[data-step="bill"] .fn-progress [data-stage="2"], body[data-step="bill-reading"] .fn-progress [data-stage="2"], body[data-step="bill-failed"] .fn-progress [data-stage="2"], body[data-step="bill-page2"] .fn-progress [data-stage="2"]{ --fill:66%; }
body[data-step="bill-confirm"] .fn-progress [data-stage="2"], body[data-step="bill-manual"] .fn-progress [data-stage="2"], body[data-step="confirm"] .fn-progress [data-stage="2"], body[data-step="payment"] .fn-progress [data-stage="2"]{ --fill:100%; }
body[data-step="confirm"] .fn-progress [data-stage="3"]{ --fill:50%; }
body[data-step="payment"] .fn-progress [data-stage="3"]{ --fill:100%; }
.fn-progress .progress-labels span[data-stage]{ font-weight:400; }
body[data-step] .fn-progress .progress-labels span[data-stage="1"]{ font-weight:700; color:var(--g-800); }
body[data-step="details"] .fn-progress .progress-labels span[data-stage="2"], body[data-step="bill"] .fn-progress .progress-labels span[data-stage="2"], body[data-step="bill-page2"] .fn-progress .progress-labels span[data-stage="2"], body[data-step="bill-reading"] .fn-progress .progress-labels span[data-stage="2"], body[data-step="bill-failed"] .fn-progress .progress-labels span[data-stage="2"], body[data-step="bill-confirm"] .fn-progress .progress-labels span[data-stage="2"], body[data-step="bill-manual"] .fn-progress .progress-labels span[data-stage="2"], body[data-step="confirm"] .fn-progress .progress-labels span[data-stage="2"], body[data-step="payment"] .fn-progress .progress-labels span[data-stage="2"]{ font-weight:700; color:var(--g-800); }
body[data-step="confirm"] .fn-progress .progress-labels span[data-stage="3"], body[data-step="payment"] .fn-progress .progress-labels span[data-stage="3"]{ font-weight:700; color:var(--g-800); }
.fn-back svg{ transform:scaleX(-1); }
#funnel .code-boxes{ justify-content:center; gap:12px; }
#funnel .code-boxes input{ width:60px; height:64px; }
.fn-sub .fn-link{ white-space:nowrap; }
.fn-step{ display:none; }
body[data-step="loading"] .fn-step[data-step="loading"], body[data-step="choose"] .fn-step[data-step="choose"], body[data-step="after-cutoff"] .fn-step[data-step="after-cutoff"], body[data-step="bill-page2"] .fn-step[data-step="bill-page2"], body[data-step="code"] .fn-step[data-step="code"], body[data-step="details"] .fn-step[data-step="details"], body[data-step="bill"] .fn-step[data-step="bill"], body[data-step="bill-reading"] .fn-step[data-step="bill-reading"], body[data-step="bill-failed"] .fn-step[data-step="bill-failed"], body[data-step="bill-confirm"] .fn-step[data-step="bill-confirm"], body[data-step="bill-manual"] .fn-step[data-step="bill-manual"], body[data-step="confirm"] .fn-step[data-step="confirm"], body[data-step="exit"] .fn-step[data-step="exit"], body[data-step="payment"] .fn-step[data-step="payment"], body[data-step="done"] .fn-step[data-step="done"], body[data-step="error"] .fn-step[data-step="error"]{ display:block; }
.fn-h{ font-size:clamp(24px,3vw,30px); line-height:1.2; color:var(--g-800); margin:6px 0 8px; font-weight:700; }
.fn-sub{ color:var(--ink-2); margin:0 0 20px; font-size:16px; line-height:1.5; }
.fn-link{ color:var(--g-800); font-weight:700; }
.fn-fields{ display:grid; gap:16px; }
.fn-fields .two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.helper{ margin:6px 0 0; font-size:13px; color:var(--ink-3); }
.fn-err{ margin-top:12px; }
body[data-fstate="code-wrong"] .fn-err[data-err="code-wrong"], body[data-fstate="code-expired"] .fn-err[data-err="code-expired"], body[data-fstate="code-locked"] .fn-err[data-err="code-locked"], body[data-fstate="file-big"] .fn-err[data-err="file-big"], body[data-fstate="file-type"] .fn-err[data-err="file-type"], body[data-fstate="pay-failed"] .fn-err[data-err="pay-failed"]{ display:block; }
body[data-fstate="code-wrong"] .code-boxes input, body[data-fstate="code-expired"] .code-boxes input{ border-color:var(--red); }
.fn-resend{ margin:16px 0 0; color:var(--ink-3); }
.fn-actions{ position:sticky; bottom:0; padding:14px 0 calc(14px + env(safe-area-inset-bottom,0px)); margin-top:20px; background:linear-gradient(to top, var(--page) 72%, transparent); }
.fn-actions-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.bigbtns{ display:grid; gap:12px; }
.bigbtn{ display:flex; align-items:center; gap:14px; padding:18px; border:1.5px solid var(--mint-line); background:#fff; border-radius:16px; font:inherit; font-weight:700; font-size:17px; color:var(--g-800); cursor:pointer; min-height:72px; text-align:start; }
.bigbtn svg{ width:26px; height:26px; }
.bigbtn:hover{ border-color:var(--g-500); }
.note{ display:flex; gap:10px; margin-top:22px; background:var(--mint-25); border:1px solid var(--mint-line); border-radius:var(--r-s); padding:12px 14px; font-size:14px; color:var(--ink-2); line-height:1.5; }
.note p{ margin:0; } .note svg{ flex:none; color:var(--g-800); margin-top:2px; width:18px; height:18px; }
.upload-bar{ height:6px; background:var(--mint-100); border-radius:3px; overflow:hidden; margin:0 0 20px; }
.upload-bar div{ height:100%; width:40%; background:var(--g-500); border-radius:3px; animation:bar 2.4s ease-in-out infinite; }
@keyframes bar{ 0%{ width:10%; } 60%{ width:85%; } 100%{ width:95%; } }
.skel{ height:52px; border-radius:14px; background:linear-gradient(90deg,#EEF2F1 25%,#F7F9F8 50%,#EEF2F1 75%); background-size:200% 100%; animation:shimmer 1.4s linear infinite; }
@keyframes shimmer{ to{ background-position:-200% 0; } }
.bill-draw{ display:flex; justify-content:center; margin:4px 0 8px; }
.bill-draw svg{ width:200px; height:150px; fill:none; stroke:var(--ink-3); stroke-width:1.5; stroke-linecap:round; }
.bill-draw svg .mark{ stroke:var(--g-500); stroke-width:2; fill:var(--mint-25); }
.bill-draw svg text{ font:700 11px Heebo,Arial,sans-serif; fill:var(--g-800); stroke:none; }
.bill-draw.small svg{ width:150px; height:112px; }
.confirm-grid{ display:grid; gap:16px; }
.bill-thumb{ width:96px; height:128px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.bill-thumb svg{ width:100%; height:100%; fill:none; stroke:var(--ink-3); stroke-width:1.5; }
.city-line{ display:flex; gap:8px; align-items:flex-start; margin:14px 0 0; font-weight:700; color:var(--g-800); }
.city-line svg{ flex:none; margin-top:3px; }
.toggles{ display:grid; gap:12px; }
.toggle-row{ border:1px solid var(--line); border-radius:var(--r-s); padding:14px; background:#fff; }
.toggle-q{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; font-weight:700; margin-bottom:10px; line-height:1.4; }
.toggle-q .info{ background:none; border:0; padding:0; cursor:pointer; color:var(--g-800); flex:none; width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.toggle-help{ display:none; font-size:14px; color:var(--ink-2); margin:0 0 12px; line-height:1.5; }
.toggle-row.open .toggle-help{ display:block; }
.legal{ display:flex; gap:10px; align-items:flex-start; margin-top:18px; font-size:15px; line-height:1.45; }
.legal input{ width:22px; height:22px; accent-color:var(--g-800); margin:2px 0 0; flex:none; }
.summary{ background:var(--mint-25); border:1px solid var(--mint-line); border-radius:var(--r-s); padding:14px 16px; margin-bottom:12px; }
.summary-row{ display:flex; justify-content:space-between; gap:12px; }
.summary-row.total{ font-size:22px; font-weight:700; color:var(--g-800); margin-top:6px; align-items:baseline; }
.secure{ display:flex; gap:8px; align-items:flex-start; color:var(--ink-3); margin:0 0 14px; }
.secure svg{ flex:none; width:16px; height:16px; margin-top:2px; }
.pay-frame{ position:relative; padding:18px 0 8px; border-top:1px dashed #CBD9D5; border-bottom:1px dashed #CBD9D5; }
.frame-tag{ position:absolute; top:-9px; inset-inline-end:0; background:var(--page); padding:0 6px; font-size:11px; color:var(--ink-3); direction:ltr; }
.fn-track{ margin-top:4px; }
.track-opts{ display:grid; gap:8px; }
.track-opt{ display:flex; gap:10px; align-items:flex-start; border:1.5px solid #CBD9D5; border-radius:12px; padding:10px 12px; cursor:pointer; background:#fff; }
.track-opt input{ margin:4px 0 0; accent-color:var(--g-800); flex:none; }
.track-opt b{ display:block; } .track-opt small{ display:block; color:var(--ink-3); font-size:13px; }
.track-opt:has(input:checked){ border-color:var(--g-500); background:var(--mint-25); }
.done-illo{ width:230px; margin:0 auto 12px; }
.done-illo svg{ width:100%; height:auto; stroke:var(--g-800); }
.done-illo svg [fill]{ fill:rgba(0,189,134,.18); }
@media (min-width:768px){
  .fn-wrap{ padding-top:16px; }
  .fn-top{ justify-content:center; position:relative; padding:8px 0 16px; }
  .fn-logo{ height:32px; }
  .fn-nav{ position:absolute; left:0; top:4px; }
  .fn-card{ background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:32px; }
  .fn-actions{ position:static; background:none; padding:8px 0 0; margin-top:24px; }
  .fn-progress{ margin-bottom:24px; }
  .mobile-only{ display:none; }
  .confirm-grid{ grid-template-columns:1fr auto; align-items:start; }
  .confirm-grid .fn-fields{ order:1; } .confirm-grid .bill-thumb-box, .confirm-grid .bill-draw.small{ order:2; }
  .pay-frame{ background:#fff; }
  .frame-tag{ background:#fff; }
}

/* ---------- shared funnel components ---------- */
.toggle-pair{ display:inline-flex; border:1.5px solid #CBD9D5; border-radius:12px; overflow:hidden; }
.toggle-pair button{ background:#fff; border:0; padding:10px 18px; font:inherit; font-weight:700; color:var(--ink-2); cursor:pointer; min-width:92px; }
.toggle-pair button + button{ border-inline-start:1.5px solid #CBD9D5; }
.toggle-pair button.is-on{ background:var(--g-800); color:#fff; }
.toggle-pair.neg button.is-on{ background:var(--ink); }
.code-boxes{ display:flex; gap:10px; direction:ltr; }
.code-boxes input{ width:56px; height:60px; text-align:center; font:inherit; font-size:26px; font-weight:700; border:1.5px solid #CBD9D5; border-radius:12px; }
.progress{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.progress div{ height:6px; border-radius:3px; background:var(--mint-100); }
.progress div.done{ background:var(--g-500); }
.progress-labels{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; font-size:13px; color:var(--ink-3); margin-top:6px; }
.progress-labels b{ color:var(--g-800); }
.acc{ border:1px solid var(--line); border-radius:var(--r-s); background:#fff; }
.acc-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; font-weight:700; }
.acc-row svg{ width:18px; height:18px; stroke:var(--g-800); }
.acc-body{ padding:0 16px 14px; color:var(--ink-2); font-size:15px; border-top:1px solid var(--line); padding-top:12px; }
.card-demo{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; box-shadow:var(--shadow); }
.card-demo.tint{ background:var(--mint-25); border-color:var(--mint-line); }
.card-demo.outlined{ border:2px solid var(--g-500); }
.badge{ display:inline-block; background:var(--mint-25); border:1px solid var(--mint-line); color:var(--g-800); font-size:13px; font-weight:700; border-radius:999px; padding:3px 10px; }
.premium-demo{ background:var(--pink-tint); border:1px solid var(--pink-line); border-radius:var(--r); padding:20px; }
.premium-demo b{ color:var(--pink); }
.icon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px; }
.icon-cell{ border:1px solid var(--line); border-radius:var(--r-s); padding:12px 8px; text-align:center; font-size:11.5px; color:var(--ink-3); background:#fff; }
.icon-cell svg{ width:22px; height:22px; stroke:var(--g-800); margin:0 auto 6px; display:block; }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* ---------- funnel additions (design sections 4 and 14): new steps, field errors, the rows list, the payment frame ---------- */
.field .error{ display:none; }
.field.is-invalid .error{ display:block; }
.field.is-invalid .input{ border-color:var(--red); box-shadow:0 0 0 4px rgba(179,38,30,.12); }
body[data-fstate="code-unknown"] .fn-err[data-err="code-unknown"], body[data-fstate="code-other"] .fn-err[data-err="code-other"], body[data-fstate="details-other"] .fn-err[data-err="details-other"], body[data-fstate="bill-other"] .fn-err[data-err="bill-other"], body[data-fstate="confirm-other"] .fn-err[data-err="confirm-other"], body[data-fstate="pay-other"] .fn-err[data-err="pay-other"], body[data-fstate="file-big2"] .fn-err[data-err="file-big2"], body[data-fstate="file-type2"] .fn-err[data-err="file-type2"]{ display:block; }
body[data-fstate="code-unknown"] .code-boxes input{ border-color:var(--red); }
.fn-step form{ margin:0; }
.fn-actions .btn .spinner{ margin-inline-start:4px; }
.fn-actions .btn.is-loading{ pointer-events:none; }
.fn-link.is-loading{ pointer-events:none; opacity:.6; }
.rows-list{ list-style:none; padding:0; margin:0 0 8px; display:grid; gap:10px; }
.rows-list li{ background:var(--mint-25); border:1px solid var(--mint-line); border-radius:var(--r-s); padding:12px 14px; font-weight:700; color:var(--g-800); }
.rows-list li span{ font-weight:400; color:var(--ink-2); }
.bill-thumb img{ width:100%; height:100%; object-fit:cover; border-radius:10px; display:block; }
.bill-thumb-box{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.bill-thumb-box[hidden], .bill-thumb[hidden], .bill-draw[hidden], .city-block[hidden], #copiedDetails[hidden], #cityHelper[hidden], .pay-waiting[hidden], #payRetryActions[hidden]{ display:none; }
#confirmSubManual{ display:none; }
body[data-billmode="manual"] #confirmSubManual{ display:block; }
body[data-billmode="manual"] #confirmSubRead{ display:none; }
.confirm-grid .city-block, .confirm-grid > .helper, .confirm-grid > .fn-err, .confirm-grid > .fn-actions{ grid-column:1 / -1; order:3; }
.pay-frame iframe{ width:100%; min-height:520px; border:0; display:block; background:#fff; }
.pay-frame .fn-fields[hidden]{ display:none; }
.pay-waiting{ color:var(--g-800); font-weight:700; margin:12px 0 0; }
.upload-bar div.is-real{ animation:none; transition:width .2s; }
@media (min-width:768px){ .fn-actions-2 .btn{ min-width:0; } }

/* ---------- M2: block 6 (the offer), block 8 (who files), the FAQ, the closing call to action, the footer, the legal pages ---------- */
.offer{ max-width:760px; margin:32px auto 0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:24px; box-shadow:var(--shadow); }
@media (min-width:1024px){ .offer{ padding:32px 36px; } }
.offer-price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin:0 0 18px; }
.offer-sum{ font-size:clamp(34px,5vw,44px); font-weight:700; color:var(--g-800); line-height:1.1; }
.offer-vat{ font-size:14px; color:var(--ink-3); }
.offer-sep{ color:var(--ink-3); opacity:.5; }
.offer-note{ font-size:15px; color:var(--ink-2); }
@media (max-width:520px){ .offer-sep{ display:none; } .offer-note{ flex-basis:100%; } }
.offer-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.offer-list li{ display:flex; gap:12px; align-items:flex-start; color:var(--ink); line-height:1.5; }
.offer-list .tile{ position:static; flex:none; }
.endings{ display:grid; gap:12px; margin-top:22px; }
@media (min-width:768px){ .endings{ grid-template-columns:1fr 1fr; } }
.ending{ background:var(--mint-25); border:1px solid var(--mint-line); border-radius:var(--r-s); padding:16px 18px; }
.ending-title{ font-weight:700; color:var(--g-800); margin:0 0 6px; }
.ending-body{ margin:0; color:var(--ink-2); font-size:15px; line-height:1.5; }
.refund{ display:flex; gap:10px; align-items:flex-start; margin:18px 0 10px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-s); font-weight:700; color:var(--ink); }
.refund svg{ color:var(--g-800); flex:none; margin-top:2px; }
.who{ position:relative; overflow:hidden; background:var(--g-900); color:#fff; }
.who-photo{ position:absolute; inset:0; background-image:url("/assets/img/roof-edelstein-800.webp"); background-size:cover; background-position:center; }
.who-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,77,72,.82), rgba(3,103,96,.9)); }
@media (min-width:1024px){ .who-photo{ background-image:url("/assets/img/roof-edelstein-1600.webp"); } }
.who-content{ position:relative; z-index:1; }
.who .pill{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25); color:#fff; }
.h2.on-dark{ color:#fff; }
.who-card{ max-width:760px; margin:32px auto 0; background:#fff; color:var(--ink); border-radius:var(--r); padding:24px; }
@media (min-width:1024px){ .who-card{ padding:32px 36px; } }
.who-body{ margin:0 0 18px; color:var(--ink-2); line-height:1.6; }
.who-figures{ padding:0; border-top:1px solid var(--line); padding-top:16px; }
.reviews{ display:grid; gap:14px; margin-top:18px; }
@media (min-width:768px){ .reviews{ grid-template-columns:repeat(3,1fr); } }
.review{ margin:0; background:#fff; color:var(--ink); border-radius:var(--r); padding:20px; display:flex; flex-direction:column; gap:8px; }
.review .stars{ color:#E59B2B; letter-spacing:2px; font-size:16px; }
.review blockquote{ margin:0; color:var(--ink-2); font-size:15px; line-height:1.55; flex:1; }
.review figcaption{ font-weight:700; color:var(--g-800); font-size:14px; }
.faq{ max-width:760px; margin:32px auto 0; display:grid; gap:10px; }
.acc-h{ margin:0; font-size:inherit; }
.acc-row{ width:100%; background:none; border:0; font:inherit; font-weight:700; color:var(--ink); text-align:start; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; min-height:52px; border-radius:var(--r-s); }
.acc-row svg{ transition:transform .15s; flex:none; }
.acc-row[aria-expanded="true"] svg{ transform:rotate(180deg); }
.acc-body[hidden]{ display:none; }
.acc-body p{ margin:0; max-width:60ch; }
.closing-count{ font-weight:700; color:var(--amber); margin:0 0 8px; font-size:17px; }
.closing-sub{ color:var(--ink-2); font-size:14px; max-width:80ch; margin:0 auto 28px; line-height:1.5; }
.footer{ border-top:1px solid var(--line); background:#fff; padding:24px 0 calc(100px + env(safe-area-inset-bottom,0px)); font-size:14px; color:var(--ink-3); text-align:center; }
@media (min-width:768px){ .footer{ padding-bottom:32px; } }
.footer p{ margin:0; display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; }
.footer .sep{ opacity:.5; }
.footer a{ color:var(--g-800); }
.legal-head{ border-bottom:1px solid var(--line); background:#fff; padding:14px 0; }
.legal-logo img{ height:32px; width:auto; }
.legal-main{ min-height:50vh; }
.legal-main .h2{ text-align:start; }
.legal-main .h2::after{ margin-inline-start:0; }
.legal-body{ max-width:68ch; margin-top:24px; color:var(--ink-2); }

/* ---------- classes that replace the mockup's inline styles (the CSP forbids style attributes) ---------- */
.sprite{ position:absolute; }
.lead-after{ margin-top:22px; }
.helper-tight{ margin-top:-8px; }
.link-line{ margin:14px 0 0; }
.city-line.not-eligible{ color:var(--ink); font-weight:400; }
.receipt-line{ margin-top:12px; }
.done-card{ margin-top:4px; }
.done-card-title{ font-weight:700; margin-bottom:6px; }
.done-card-body{ color:var(--ink-2); }
.another-meter{ margin-top:16px; }
.house-source{ display:none; }
.fn-wrap-plain{ padding-top:40px; }
.fn-top-centered{ justify-content:center; }
.fn-card-spaced{ margin-top:24px; }
.sticky-bar[inert]{ pointer-events:none; }

/* ---------- the city combobox: a list below the field, the field's width ---------- */
.combo{ position:relative; }
.combo-list{ position:absolute; top:calc(100% + 6px); inset-inline:0; z-index:30; list-style:none; margin:0; padding:6px; background:#fff; border:1.5px solid #CBD9D5; border-radius:14px; box-shadow:var(--shadow); max-height:260px; overflow:auto; }
.combo-list[hidden]{ display:none; }
.combo-list li{ padding:10px 12px; border-radius:10px; cursor:pointer; font-size:16px; color:var(--ink); }
.combo-list li[aria-selected="true"], .combo-list li:hover{ background:var(--mint-25); color:var(--g-800); }
.combo-list .combo-empty{ color:var(--ink-3); cursor:default; }
.combo-list .combo-empty:hover{ background:none; color:var(--ink-3); }
.bill-thumb{ cursor:zoom-in; padding:0; }
.bill-thumb:hover{ border-color:var(--g-500); }