/* ==========================================================================
   solar — "Usina"
   Charcoal and orange, heavy uppercase headings, big orange numbers.
   Rules live in .claude/skills/site-design/SKILL.md. Restyle only — every
   id / data-* / name / state-class hook main.js uses is preserved.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --char: #2b2b30;
  --char-2: #35353b;
  --char-line: #44444b;
  --black: #1c1c20;
  --ink: #1c1c20;
  --orange: #f58634;
  --orange-hover: #e47522;
  --orange-deep: #d9661a;
  --orange-ink: #a94a0c;
  --white: #ffffff;
  --grey: #f0f3f2;
  --rule: #dadfdd;
  --mute: #5e6068;
  --mute-d: #b5b7be;

  --r: 4px;

  --font-display: 'Montserrat', 'Arial Black', system-ui, sans-serif;
  --font-body: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --edge: 16px;
  --maxw: 74rem;
  --section-y: 64px;
}

@media (min-width: 768px) {
  :root { --edge: 24px; --section-y: 96px; }
}

/* --------------------------------------------------------------------------
   Reset + constraints
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: clip; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 48px;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, dl, figure { margin: 0; }
ul { padding: 0; list-style: none; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}
.site-header :focus-visible,
.hero-copy :focus-visible,
.section--dark :focus-visible,
.site-footer :focus-visible { outline-color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Overflow hardening — text-bearing flex/grid children may shrink; long
   unbroken strings (echoed input, big currency figures) may break. */
.bill-step[data-step],
.hero-credibility span,
.bill-head > span,
.result-hero-value,
.result-fact,
.compare-bar-meta .c-label,
.compare-bar-meta .c-value,
.step-body,
.consent-row span,
.stat-card,
.choice-card,
.placeholder-card,
.testi-card,
.footer-grid p { min-width: 0; }

.form-msg,
.result-hero-value,
.compare-bar-meta .c-label,
.compare-bar-meta .c-value,
.compare-note,
.placeholder-card .d,
.testi-card .quote,
.testi-card .who,
.footer-grid p { overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   Layout helpers + shared type
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--edge);
}

/* Kicker: orange bar + uppercase tracked label above every section heading */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-ink);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 24px;
  height: 3px;
  background: var(--orange-deep);
}
.hero .eyebrow,
.section--dark .eyebrow { color: var(--orange); }
.hero .eyebrow::before,
.section--dark .eyebrow::before { background: var(--orange); }

.section { padding-block: var(--section-y); }
.section--dark { background: var(--char); color: var(--white); }
.section--paper-dim { background: var(--grey); }

.section-head {
  max-width: 44rem;
  margin-bottom: 40px;
}
.section-head h2 {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  line-height: 1.08;
  text-transform: uppercase;
  max-width: 22ch;
}
.section-head p {
  margin-top: 16px;
  font-size: 1.0625rem;
  max-width: 56ch;
  color: var(--mute);
}
.section--dark .section-head p { color: var(--mute-d); }

.google-rating {
  margin-top: 12px;
  font-weight: 600;
}

/* links: ink text, orange underline */
.unsure-link,
.proof-instagram a,
.consent-row a,
.legal a,
.legal-back {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   Buttons — wizard advance = charcoal; conversion (text us) = orange
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  border: 2px solid var(--char);
  border-radius: var(--r);
  padding: 14px 20px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.btn-primary {
  background: var(--char);
  color: var(--white);
}
.btn-primary:disabled {
  background: var(--grey);
  border: 2px dashed var(--rule);
  color: var(--mute);
  cursor: not-allowed;
}
.btn-cta {
  background: var(--orange);
  border-color: var(--orange);
  color: var(--ink);
}
.btn-cta svg { flex-shrink: 0; }

/* Hover only for real pointers — a tap must not leave a button stuck in its
   hover color. Every :hover rule in the sheet lives in one of these blocks. */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:not(:disabled):hover { background: var(--char-2); border-color: var(--char-2); }
  .btn-cta:hover { background: var(--orange-hover); border-color: var(--orange-hover); }
  .preset-chip:hover,
  .choice-card:hover { border-color: var(--char); }
  .preset-chip.is-selected:hover,
  .choice-card.is-selected:hover { border-color: var(--orange); }
  .unsure-link:hover,
  .proof-instagram a:hover,
  .legal-back:hover { text-decoration-color: var(--ink); }
  .bill-back:hover { color: var(--ink); text-decoration-color: var(--orange-deep); }
  .modal-close:hover { background: var(--char-2); border-color: var(--char-2); }
  a.doc-tag:hover { background: var(--orange); color: var(--ink); }
  .faq-item summary:hover::after { background: var(--char-2); }
  .site-footer a:hover { text-decoration-color: var(--white); }
}

/* --------------------------------------------------------------------------
   Demo banner — only on the sample/template deploy
   -------------------------------------------------------------------------- */
.demo-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--black);
  color: #c9cad0;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
  padding: 7px var(--edge);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--char);
  color: var(--white);
  border-bottom: 1px solid var(--char-line);
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-block: 10px;
}
.brand {
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.0625rem;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.brand small {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8125rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mute-d);
}
.brand small::first-letter { text-transform: uppercase; }
/* A client with a real logo (company.logoUrl) swaps the text name for the
   image (applyBrandLogo() in main.js). The logo must work on a dark background. */
.brand-logo { display: block; height: 36px; width: auto; }
.doc-tag {
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
a.doc-tag {
  position: relative;
  border: 2px solid var(--orange);
  border-radius: 2px;
  padding: 9px 14px;
  color: var(--white);
  text-decoration: none;
  transition: background 0.14s ease, color 0.14s ease;
}
/* Invisible tap area 4px above and below the border (the inset counts from
   inside the 2px border): the box is 37-41px tall, the target 45-49px, and
   the header keeps its height. */
a.doc-tag::after { content: ""; position: absolute; inset: -6px -2px; }
span.doc-tag { color: var(--mute-d); }

@media (max-width: 479px) {
  .brand { font-size: 0.875rem; }
  a.doc-tag { font-size: 0.6875rem; letter-spacing: 0.06em; padding: 8px 10px; }
  .btn { font-size: 0.8125rem; letter-spacing: 0.04em; padding-inline: 12px; }
  .result-extra-cta .btn { font-size: 0.75rem; letter-spacing: 0.02em; }
}

/* --------------------------------------------------------------------------
   Hero — charcoal panel, photo slot (or module grid) behind the simulator
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--char);
  color: var(--white);
  padding-block: 24px 48px;
}
/* Photo slot fallback: a solar-module grid edged in orange. With
   client.json fotos.hero set, main.js adds .has-photo + --hero-foto. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 47%;
  background-image:
    linear-gradient(var(--char-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--char-line) 1px, transparent 1px);
  background-size: 46px 76px;
  background-position: -1px -1px;
  border-left: 3px solid var(--orange);
  opacity: 0.9;
  pointer-events: none;
}
.hero.has-photo {
  background:
    linear-gradient(rgba(28, 28, 32, 0.82), rgba(28, 28, 32, 0.82)),
    var(--hero-foto) center / cover no-repeat,
    var(--char);
}
.hero.has-photo::after { display: none; }

.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.hero-copy { display: grid; gap: 16px; align-content: start; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.625rem, 6.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  max-width: 20ch;
}
.hero-sub {
  font-size: 1.0625rem;
  max-width: 44ch;
  color: var(--mute-d);
}
.hero-credibility {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 8px 28px;
  max-width: 34rem;
  padding-top: 18px;
  border-top: 1px solid var(--char-line);
}
.hero-credibility span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute-d);
}
.hero-credibility strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
  font-size: clamp(1.625rem, 6.5vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
/* the region is text, not a number — keep it from towering over the others */
.hero-credibility span:last-child strong { font-size: clamp(1.125rem, 4.5vw, 1.5rem); line-height: 1.15; padding-top: 0.35em; }
.hero-jump {
  justify-self: start;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
  text-decoration-color: var(--orange);
}
.hero-stage { position: relative; }

/* Mobile: kicker, headline, then the simulator — the $ input and the first
   button must be visible at 375×812 without scrolling. */
@media (max-width: 899px) {
  .hero-copy { display: contents; }
  .hero .eyebrow { order: 0; }
  .hero h1 { order: 1; }
  .hero-stage { order: 2; }
  .hero-sub { order: 3; margin-top: 8px; }
  .hero-credibility { order: 4; }
  .hero-jump { order: 5; }
  .hero::after {
    width: 100%;
    top: auto;
    height: 62%;
    border-left: 0;
    border-top: 3px solid var(--orange);
    opacity: 0.4;
  }
}

/* --------------------------------------------------------------------------
   Bill card — the simulator
   -------------------------------------------------------------------------- */
.bill-card {
  position: relative;
  z-index: 1;
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r);
  border-top: 4px solid var(--orange);
  padding: 20px;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}
.bill-card-tear { display: none; }

.bill-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bill-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.bill-head .bill-step {
  font-size: 0.875rem;
  color: var(--mute);
  white-space: nowrap;
}

.bill-step[data-step] { margin: 0; padding: 0; border: 0; min-inline-size: 0; }

/* Crossfade between steps and into the result — see goToStep() in main.js.
   Shared with #financing, which fades in the same way once it has data. */
.bill-step[data-step],
#financing { transition: opacity 0.2s ease, transform 0.2s ease; }
.is-leaving { opacity: 0; transform: translateY(-6px); }
.is-entering { opacity: 0; transform: translateY(6px); }

.bill-question {
  margin-top: 8px;
  font-weight: 600;
  font-size: 1.125rem;
  line-height: 1.35;
}

.money-field {
  margin-top: 12px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: var(--grey);
  border: 2px solid transparent;
  border-radius: var(--r);
  padding: 0 16px;
  transition: border-color 0.12s ease;
}
.money-field:focus-within { border-color: var(--char); }
.money-field .currency {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  color: var(--mute);
}
.money-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.25rem;
  line-height: 1.15;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  /* The vertical padding lives on the input, not the grey well, so the
     whole well height is the tap target. */
  padding-block: 8px;
}
.money-field input::placeholder { color: #a3a6ad; }
.money-field input:focus { outline: none; }

.preset-chips {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.preset-chip {
  flex: 1 1 0;
  min-width: 0;
  min-height: 46px;
  border: 2px solid var(--rule);
  background: var(--white);
  color: var(--ink);
  border-radius: var(--r);
  padding: 8px 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.preset-chip.is-selected { border-color: var(--orange); background: var(--orange); }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 84px;
  border: 2px solid var(--rule);
  background: var(--white);
  border-radius: var(--r);
  padding: 12px 6px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.choice-card .ico {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  line-height: 1;
}
.choice-card .lbl {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* Last resort on the narrowest phones (320px): break a long label inside
     the card instead of spilling past its border. No effect when it fits. */
  hyphens: auto;
  overflow-wrap: anywhere;
}
.choice-card.is-selected { border-color: var(--orange); background: var(--orange); }

@keyframes choice-confirm {
  0% { transform: scale(0.94); }
  60% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.choice-card.is-confirming { animation: choice-confirm 0.28s ease; }

.unsure-link {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 0;
  background: none;
  border: 0;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}

.bill-actions {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bill-back {
  background: none;
  border: 0;
  min-height: 44px;
  padding: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  cursor: pointer;
}
.bill-result > .bill-back { display: block; margin: 12px auto 0; }

.bill-progress {
  display: flex;
  gap: 6px;
  margin-top: 14px;
}
.bill-progress i {
  flex: 1;
  height: 4px;
  background: var(--rule);
}
.bill-progress i.is-done { background: var(--orange); }

/* Small phones: on an iPhone SE, Safari shows ~553px of page, and
   "See my savings" must be in it on load. Tighter header, hero gaps and
   card spacing, plus a 16px card question that fits one line at 375px, win
   ~85px; the h1 size and the 44px tap minimum stay. Kept after the card
   rules on purpose, so it wins the cascade. */
@media (max-width: 479px) {
  .site-header .container { min-height: 52px; padding-block: 8px; }
  .brand-logo { height: 32px; }
  .hero { padding-top: 16px; }
  .hero .container { gap: 14px; }
  .bill-card { padding: 16px; }
  .bill-question { margin-top: 6px; font-size: 1rem; }
  .money-field { margin-top: 10px; }
  .money-field input { padding-block: 4px; font-size: 2rem; }
  .preset-chips { margin-top: 8px; }
  .preset-chip { min-height: 44px; }
  .bill-actions { margin-top: 10px; }
  .bill-progress { margin-top: 12px; }
  /* A long label can run 95px at 12px/0.06em; a card on a 360px phone has ~77px.
     11px (the floor for tracked labels) at 0.02em is 82px, and narrower
     card padding and gaps give it 87px at 360 and 92px at 375. */
  .choice-grid { gap: 6px; }
  .choice-card { padding-inline: 2px; }
  .choice-card .lbl { font-size: 0.6875rem; letter-spacing: 0.02em; }
}

/* "GREATER TAMPA BAY" doesn't fit a third of the row on phones (below
   ~600px, where a long region name ran 16-34px into the side gutter and was clipped
   at 320) nor in the narrow copy column of small desktops (900-1099px). There
   the two numbers share the first row and the region gets its own row. */
@media (max-width: 599px), (min-width: 900px) and (max-width: 1099px) {
  .hero-credibility { grid-template-columns: repeat(2, auto); row-gap: 16px; }
  .hero-credibility span:last-child { grid-column: 1 / -1; }
  .hero-credibility span:last-child strong { padding-top: 0; }
}

/* Calculating — short interstitial between step 3 and the result */
.bill-calculating .bill-question { margin-top: 28px; }
.calc-progress {
  margin-top: 18px;
  height: 8px;
  background: var(--grey);
  overflow: hidden;
}
.calc-progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--orange);
  transition: width var(--calc-duration, 750ms) linear;
}
.calc-progress-fill.is-filling { width: 100%; }

/* --------------------------------------------------------------------------
   Result — savings dominate, on charcoal, in orange
   -------------------------------------------------------------------------- */
.result-hero {
  margin-top: 12px;
  padding: 16px 18px 18px;
  background: var(--char);
  color: var(--white);
  border-radius: var(--r);
}
.result-hero-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-d);
}
.result-hero-value {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.5rem, 6.5vw, 2.125rem);
  line-height: 1.1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.nowrap { white-space: nowrap; }

.result-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (min-width: 420px) {
  .result-facts { grid-template-columns: repeat(4, 1fr); }
}
.result-fact {
  padding: 10px 10px 8px;
  background: var(--grey);
  border-radius: var(--r);
}
.result-fact .rf-value {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.result-fact .rf-label {
  display: block;
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

/* Cumulative savings — three bars (years 1/5/10) */
.savings-chart { margin-top: 16px; }
.chart-title {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.chart-bars {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.chart-bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
}
.cb-value {
  margin-bottom: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cb-track {
  position: relative;
  height: 72px;
  background: var(--grey);
  overflow: hidden;
}
.cb-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: var(--char);
  transition: height 0.6s ease;
}
.chart-bar:last-child .cb-fill { background: var(--orange); }
.cb-label {
  display: block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

.result-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 600;
  font-size: 0.9375rem;
}
.result-badge::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 2px;
  background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231c1c20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.bill-disclaimer {
  margin-top: 10px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--mute);
}
.bill-disclaimer:empty { display: none; }
#resultFloor .bill-disclaimer:first-child {
  margin-top: 14px;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
}
#resultFloor .btn { margin-top: 18px; }

/* --------------------------------------------------------------------------
   Result contact — the one orange action, plus email/call fallbacks
   -------------------------------------------------------------------------- */
.lead-form {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 2px solid var(--char);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lead-form > .bill-question { margin-top: 0; font-size: 1.0625rem; }
.consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--mute);
}
.consent-row input {
  margin-top: 1px;
  flex: none;
  width: 20px;
  height: 20px;
  accent-color: var(--orange-deep);
}
.consent-row a { font-weight: 600; }
.alt-contact {
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--mute);
}
.alt-contact a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--orange-deep);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.lead-form .btn-cta { margin-top: 4px; }

/* Main Instagram — supporting CTA under the text-us button */
.result-extra-cta {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.result-extra-cta .btn-primary { background: var(--white); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .result-extra-cta .btn-primary:hover { background: var(--char); color: var(--white); border-color: var(--char); }
}

/* --------------------------------------------------------------------------
   Floating text/Instagram — secondary, hidden over #resultExtraCta/#faq
   -------------------------------------------------------------------------- */
.float-btn {
  position: fixed;
  right: var(--edge);
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease, background 0.14s ease;
  pointer-events: none;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}
.float-btn.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.float-text {
  bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--orange);
  color: var(--ink);
}
.float-instagram {
  bottom: calc(16px + 54px + 12px + env(safe-area-inset-bottom));
  background: var(--char);
  color: var(--white);
  /* Over the dark bands (how-it-works, footer) the circle is the same colour
     as the page; the inset ring keeps its edge visible (>= 3:1). */
  box-shadow: inset 0 0 0 2px var(--mute-d), 0 8px 20px -8px rgba(0, 0, 0, 0.5);
}
@media (hover: hover) and (pointer: fine) {
  .float-text:hover { background: var(--orange-hover); }
  .float-instagram:hover { background: var(--char-2); }
}
@media (prefers-reduced-motion: reduce) {
  .float-btn { transition: none; }
}

/* --------------------------------------------------------------------------
   Social proof
   -------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  /* Columns follow the visible cards: a stat with no confirmed number is
     hidden (data-hide-empty), and the rest share the row without a hole. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 10px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.stat-card .n {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.25rem, 9vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--orange-deep);
  font-variant-numeric: tabular-nums;
}
.stat-card .l {
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.stat-row-note {
  margin-bottom: 48px;
  font-size: 0.8125rem;
  color: var(--mute);
}
.stat-row-note code { font-family: inherit; font-weight: 600; color: var(--ink); }

.gallery-grid, .testi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
  .testi-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}

/* Installation without a photo: a place, marked with a pin */
.placeholder-card {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 12px;
  align-items: center;
  align-content: center;
  background: var(--grey);
  border-radius: var(--r);
  padding: 14px 16px;
}
.placeholder-card::before {
  content: "";
  grid-row: 1 / 3;
  width: 40px;
  height: 40px;
  border-radius: var(--r);
  background: var(--char) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z' fill='%23f58634'/%3E%3Ccircle cx='12' cy='10' r='2.3' fill='%232b2b30'/%3E%3C/svg%3E") center / 22px no-repeat;
}
.placeholder-card .t {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.placeholder-card .d { display: block; font-size: 0.875rem; color: var(--mute); }

/* Installation with a real photo (instalacoes[].foto in client.json) */
.project-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--char);
}
.project-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.project-card figcaption {
  padding: 12px 16px 14px;
  color: var(--white);
}
.project-card .t {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.project-card .d { display: block; font-size: 0.875rem; color: var(--mute-d); }

#testimonials { margin-top: 56px !important; }
.testi-card {
  padding-top: 20px;
  border-top: 3px solid var(--orange);
}
.testi-card + .testi-card { margin-top: 24px; }
@media (min-width: 900px) { .testi-card + .testi-card { margin-top: 0; } }
.testi-card.has-photo { display: flex; gap: 14px; align-items: flex-start; }
.testi-photo {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.testi-body { min-width: 0; }
.testi-card .quote { font-size: 1.125rem; line-height: 1.5; white-space: pre-line; } /* keep line breaks typed in the admin */
.testi-card .who {
  margin-top: 14px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  line-height: 1.4;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

.proof-instagram { margin-top: 48px; }
.proof-instagram a { font-weight: 600; }

/* --------------------------------------------------------------------------
   Como funciona — a real sequence, so it earns big numbers
   -------------------------------------------------------------------------- */
.steps-list {
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) {
  .steps-list { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .step-item { padding-inline: 28px; border-left: 1px solid var(--char-line); }
  .step-item:first-child { padding-left: 0; border-left: 0; }
}
.step-item { display: flex; flex-direction: column; gap: 14px; }
.step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.step-body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white);
}
.step-body p { margin-top: 8px; font-size: 1rem; color: var(--mute-d); }

/* --------------------------------------------------------------------------
   Financiamento
   -------------------------------------------------------------------------- */
.compare-card {
  max-width: 44rem;
  background: var(--white);
  border-radius: var(--r);
  border-top: 4px solid var(--orange);
  padding: 24px;
}
.compare-bars { display: flex; flex-direction: column; gap: 22px; }
.compare-bar-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
}
.compare-bar-meta .c-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.compare-bar-meta .c-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.5rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.compare-bar-row.old .c-value { text-decoration: line-through; text-decoration-color: var(--mute); text-decoration-thickness: 2px; color: var(--mute); }
.compare-bar-row.new .c-value { font-size: 2.25rem; color: var(--orange-deep); }
.compare-bar-track {
  margin-top: 10px;
  height: 12px;
  background: var(--grey);
  overflow: hidden;
}
.compare-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  transition: width 0.6s ease;
}
.compare-bar-row.old .compare-bar-fill { background: #a3a6ad; }
.compare-bar-row.new .compare-bar-fill { background: var(--orange); }
.compare-note { margin-top: 18px; font-size: 0.8125rem; line-height: 1.5; color: var(--mute); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
@media (min-width: 900px) {
  #faq .container {
    display: grid;
    grid-template-columns: 1fr 1.7fr;
    column-gap: 64px;
    align-items: start;
  }
  #faq .section-head { grid-row: 1 / 99; position: sticky; top: 64px; }
}
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item:first-of-type { border-top: 2px solid var(--ink); }
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 14px 0;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  background: var(--char);
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
.faq-item[open] summary::after { content: "\2212"; background: var(--orange); color: var(--ink); }
.faq-item p { padding: 0 48px 22px 0; font-size: 1rem; line-height: 1.6; color: var(--mute); max-width: 60ch; }

/* --------------------------------------------------------------------------
   Footer — the company's credentials
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--black);
  color: var(--white);
  padding-block: 56px 120px;
  font-size: 0.9375rem;
  line-height: 1.5;
}
/* Privacy pages have no floating buttons to clear */
.legal + .site-footer { padding-bottom: 56px; }
.site-footer .footer-grid { display: grid; gap: 18px; }
@media (min-width: 768px) {
  .site-footer .footer-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 32px; }
  .site-footer .footer-grid > :first-child { grid-column: 1 / -1; }
}
.site-footer .footer-grid > :first-child {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--char-line);
}
.site-footer .footer-grid > :first-child strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.f-label {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute-d);
}
.site-footer a {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
/* Footer and "See more installations" links are single text lines (~19px):
   padding grows the tap area to ~45px and the equal negative margin keeps
   the text exactly where it was. */
.site-footer a,
.proof-instagram a {
  display: inline-block;
  padding-block: 13px;
  margin-block: -13px;
}
/* 16px icon in a 44px tap square; the margins cancel the extra box so the
   line height doesn't change and the icon still sits ~12px after the name. */
.site-footer .footer-instagram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -14px -14px -14px -2px;
  padding-block: 0;
  vertical-align: middle;
  text-decoration: none !important;
  color: var(--orange) !important;
}

/* --------------------------------------------------------------------------
   Reveal — kept as a hook for main.js, static by design (no scroll motion)
   -------------------------------------------------------------------------- */
.reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   "Not sure" modal
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
  align-items: flex-end;
  justify-content: center;
  background: rgba(28, 28, 32, 0.72);
}
.modal-backdrop.is-open { display: flex; }
.modal-sheet {
  width: 100%;
  max-width: 34rem;
  background: var(--white);
  border-top: 4px solid var(--orange);
  border-radius: var(--r) var(--r) 0 0;
  padding: 24px var(--edge) calc(24px + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
  .modal-backdrop { align-items: center; }
  .modal-sheet { border-radius: var(--r); padding: 32px; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6); }
}
.modal-sheet h3 {
  margin-bottom: 12px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.2;
  text-transform: uppercase;
}
.modal-sheet p { margin-bottom: 20px; font-size: 1rem; line-height: 1.55; color: var(--mute); }
.modal-sheet p strong { color: var(--ink); }
.modal-close {
  width: 100%;
  min-height: 52px;
  border: 2px solid var(--char);
  background: var(--char);
  color: var(--white);
  border-radius: var(--r);
  padding: 12px 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   privacy.html and 404.html — charcoal title band (same panel grid as the hero),
   then the policy on white
   -------------------------------------------------------------------------- */
.legal-head {
  position: relative;
  overflow: hidden;
  background: var(--char);
  color: var(--white);
  padding-block: 40px 48px;
}
.legal-head::after {
  content: "";
  position: absolute;
  inset: 0 0 0 auto;
  width: 30%;
  background-image:
    linear-gradient(var(--char-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--char-line) 1px, transparent 1px);
  background-size: 46px 76px;
  background-position: -1px -1px;
  border-left: 3px solid var(--orange);
  pointer-events: none;
}
@media (max-width: 899px) { .legal-head::after { display: none; } }
.legal-head .container { position: relative; z-index: 1; }
.legal-back {
  display: inline-block;
  /* ~45px tap target; the negative margins keep the layout where it was. */
  padding-block: 13px;
  margin-block: -13px 11px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.legal-head .legal-back { color: var(--white); text-decoration-color: var(--orange); }
.legal-head :focus-visible { outline-color: var(--orange); }
.legal h1 {
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 6.5vw, 2.75rem);
  line-height: 1.08;
  text-transform: uppercase;
  max-width: 20ch;
}
.legal-lead {
  font-size: 1.1875rem;
  line-height: 1.5;
  max-width: 50ch;
  color: var(--mute-d);
}
/* 404: the one action on the page, back to the simulator. ".legal" in the
   selector so it beats the ".legal a" link underline. The page is short, so
   the message gets room and anything below the footer is footer-coloured
   instead of a white band. */
.legal .legal-cta { width: auto; margin-top: 28px; text-decoration: none; }
.page-404 { background: var(--black); }
.page-404 .legal-head { min-height: 50vh; }
.legal-body { padding-block: 40px 96px; max-width: 44rem; }
.legal h2 {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legal-body > h2:first-child { margin-top: 0; border-top: 2px solid var(--ink); }
.legal-body p { margin-bottom: 1em; line-height: 1.65; max-width: 65ch; }
/* Desktop: question left, answer right */
@media (min-width: 900px) {
  .legal-head { padding-block: 56px 64px; }
  .legal-body {
    max-width: var(--maxw);
    display: grid;
    grid-template-columns: 17rem minmax(0, 44rem);
    column-gap: 48px;
    padding-top: 64px;
  }
  .legal h2 { grid-column: 1; margin: 0; padding-block: 24px; }
  .legal h2 ~ p { grid-column: 2; margin: 0 0 1em; }
  .legal h2 + p { padding-top: 24px; border-top: 1px solid var(--rule); }
  .legal-body > h2:first-child + p { border-top: 2px solid var(--ink); }
}
/* the header label repeats the page title right below — drop it where space is tight */
@media (max-width: 479px) { span.doc-tag { display: none; } }

/* --------------------------------------------------------------------------
   Wider viewports
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .bill-actions { flex-direction: row-reverse; align-items: center; gap: 12px; }
  .bill-actions .btn { width: auto; flex: 1; }
  .bill-actions .bill-back { flex: none; }
}
@media (min-width: 900px) {
  .hero { padding-block: 88px 96px; }
  .hero .container {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 72px;
    /* Top-aligned: once the result makes the card ~1000px tall, centring
       left the headline floating mid-card with an empty band above it. */
    align-items: start;
  }
  .bill-card { padding: 32px; }
}