/* =================================================================
   polish.css — FINAL POLISH SPRINT

   Refinement only. No new components, no architecture, no logic.
   Loaded last so it refines what screens.css established.

   The filter applied to every rule here:
     "Can I remove one thing instead of adding one thing?"

   What was REMOVED rather than added:
     · the hero's "Let's get started!" script line (JP's bubble already
       greets; the CTA already says it)
     · one of four trust badges ("Energy Savings" repeated the headline)
     · competing shadows on stacked cards (one elevation level, not three)
     · the double border+shadow on info cards (border OR shadow, not both)
     · decorative motion that didn't communicate state

   Everything resolves to --fb-* tokens.
   ================================================================= */


/* =================================================================
   1 · HERO — first impression
   The five things the first screen must say: free, personalized,
   savings, comfort, ~1 minute. The headline carries savings, the sub
   carries the rest, the perks confirm. Nothing else competes.
   ================================================================= */

.hero{
  text-align:center;
  padding-top:var(--fb-space-1);
}

/* Headline: the single loudest thing on the page. */
.hero h1{
  font-size:clamp(32px, 8.6vw, 44px);
  line-height:1.08;
  letter-spacing:-.03em;
  margin:0 0 var(--fb-space-4);
}

/* Sub carries the promise the headline can't. One line of real
   substance beats three lines of filler. */
.hero .sub{
  font-size:var(--fb-text-base);
  font-weight:var(--fb-weight-medium);
  line-height:var(--fb-leading-relaxed);
  color:var(--fb-secondary);
  opacity:.92;
  max-width:34ch;
  margin:0 auto var(--fb-space-5);
}

/* Perks: quiet confirmations, not decoration. Lighter than before —
   they were competing with the CTA for attention. */
.hero .perks{
  gap:var(--fb-space-2);
  margin:0 0 var(--fb-space-5);
}
.hero .perks div{
  min-height:34px;
  padding:0 var(--fb-space-3);
  font-size:var(--fb-text-xs);
  font-weight:var(--fb-weight-bold);
  background:rgba(255,255,255,.7);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:none;                  /* removed: shadow on a chip this small is noise */
  color:var(--fb-secondary);
}

/* JP: give him room. He is the trust signal, not an illustration. */
.jphero{ margin:0 0 var(--fb-space-3); }

/* Trust badges: 3-up, flat, quiet. They reassure; they don't sell. */
.tbadges{
  grid-template-columns:repeat(3, 1fr);
  gap:var(--fb-space-2);
  margin:var(--fb-space-4) 0 var(--fb-space-3);
}
.tbadges div{
  flex-direction:column;
  gap:var(--fb-space-1);
  min-height:56px;
  padding:var(--fb-space-2);
  font-size:var(--fb-text-2xs);
  line-height:1.25;
  background:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:none;
}

.hero .trust{
  font-size:var(--fb-text-xs);
  opacity:.72;
  margin-top:var(--fb-space-2);
}

/* The insulation toggle is the hero's one interaction — make it read
   as invitation, not as a setting. */
.mhctl{
  margin-top:var(--fb-space-4);
  font-size:var(--fb-text-xs);
}


/* =================================================================
   2 · INTERACTIVE HOUSE — the signature feature
   Slower, softer transitions so state changes read as the house
   *settling*, not switching. Nothing here loops for decoration.
   ================================================================= */

.fb-house-panel{
  border-radius:var(--fb-radius-2xl);
  box-shadow:var(--fb-shadow-sm);     /* was -md: one elevation level, not two */
  border:1px solid rgba(255,255,255,.75);
  margin-bottom:var(--fb-space-4);
}

/* Every state change on the house eases over the same duration, so
   roof, insulation, windows and glow settle together rather than
   arriving at different times. */
.fb-house-svg .roof-top,
.fb-house-svg .roof-bot,
#house-windows .win-glass,
#house-glow .glow-veil,
#house-heat,
#house-airflow{
  transition-duration:var(--fb-duration-slower);
  transition-timing-function:var(--fb-ease-out);
}
#house-insulation .ins-fill,
#house-insulation .ins-top-line{
  transition-duration:var(--fb-duration-slower);
}

/* Ambient loops calmed. The sun spun and trees swayed at a rate that
   pulled the eye away from the data. */
#house-sun .sun-rays{ animation-duration:160s; }
#house-trees .tree-l{ animation-duration:11s; }
#house-trees .tree-r{ animation-duration:13s; }
#house-clouds .cloud-a{ animation-duration:96s; }
#house-clouds .cloud-b{ animation-duration:130s; }


/* =================================================================
   3 · DASHBOARD — should feel alive
   Cleaner cards, calmer accents, and fills that ease rather than jump.
   ================================================================= */

.fb-dash{ gap:var(--fb-space-2); margin-bottom:var(--fb-space-4); }

.fb-metric{
  padding:var(--fb-space-4);
  border-radius:var(--fb-radius-lg);
  /* removed the border: the shadow already separates the card from the
     sky behind it, and both together read as heavy */
  border:none;
  box-shadow:var(--fb-shadow-sm);
  gap:var(--fb-space-2);
}

/* The accent rail was a hard 4px bar. Softer, inset, rounded. */
.fb-metric::before{
  left:var(--fb-space-2);
  top:var(--fb-space-4);
  bottom:var(--fb-space-4);
  width:3px;
  border-radius:var(--fb-radius-pill);
  opacity:.9;
}
.fb-metric{ padding-left:var(--fb-space-5); }

.fb-metric-k{
  font-size:var(--fb-text-2xs);   /* 11px. 10px tested below comfortable reading. */
  letter-spacing:.12em;
}
.fb-metric-v{
  font-size:var(--fb-text-xl);
  letter-spacing:-.02em;
}
.fb-metric[data-fb-metric="score"] .fb-metric-v{
  font-size:clamp(34px, 9.5vw, 46px);
  letter-spacing:-.03em;
}

/* Fills ease with a soft spring so a changing answer reads as the bar
   *moving*, which is the point of the dashboard. */
.fb-metric-fill{
  transition:width var(--fb-duration-slower) var(--fb-ease-spring),
             background var(--fb-duration-base) var(--fb-ease-out);
}
.fb-metric-track{ height:6px; }


/* =================================================================
   4 · ASSESSMENT — lightweight and enjoyable
   Bigger targets, calmer cards, smoother screen entry.
   ================================================================= */

/* One elevation for cards sitting on the sky. Stacked cards with
   heavy shadows read as clutter. */
.card,
.quote{
  box-shadow:var(--fb-shadow-sm);
  border:1px solid rgba(255,255,255,.8);
}

/* Selection targets: comfortably above the 44px minimum. */
.homecards label{ min-height:72px; padding:var(--fb-space-4); }
.opts label{ min-height:56px; }

/* Screen entry: a short, soft rise. Long entrances make a five-step
   flow feel slow. */
.screen.on{
  animation:fb-screen-in var(--fb-duration-base) var(--fb-ease-out);
}
@keyframes fb-screen-in{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}

/* Progress: the customer should always know where they are. */
.steps{ gap:var(--fb-space-1); }
.steps i{
  transition:background var(--fb-duration-base) var(--fb-ease-out);
}


/* =================================================================
   5 · RESULTS — the story
   Score -> what we found -> why it matters -> package -> benefits ->
   book. The markup order already tells that story; this gives each
   beat its own breathing room so it reads as chapters, not a page.
   ================================================================= */

.congrats{
  padding:var(--fb-space-6) var(--fb-space-5) var(--fb-space-5);
  box-shadow:var(--fb-shadow-lg);
  border:none;                      /* removed: a border on a dark panel adds nothing */
}

/* The savings figure is the emotional peak — let it dominate. */
.bigsave{
  margin:var(--fb-space-5) 0 var(--fb-space-4);
  padding:var(--fb-space-5) var(--fb-space-4);
  border:none;                      /* removed border; the tint is enough separation */
  background:rgba(255,255,255,.10);
}
.bigsave .n{ font-size:clamp(40px, 12vw, 56px); letter-spacing:-.03em; }
.bigsave small{ font-size:var(--fb-text-xs); opacity:.85; }

/* Each results section gets consistent spacing so the story has beats. */
#s5 .quote{ margin-bottom:var(--fb-space-4); }
#s5 .card{ margin-bottom:var(--fb-space-4); }

/* Estimate total: the number they'll remember. */
.line.total{
  font-size:var(--fb-text-xl);
  padding-top:var(--fb-space-4);
}


/* =================================================================
   6 · JP — the guide
   Present at every step, never in the way.
   ================================================================= */

.jpbar{ margin-bottom:var(--fb-space-4); }
.jpbub{
  box-shadow:var(--fb-shadow-xs);   /* was -sm: JP speaks, he doesn't shout */
  border:1px solid var(--fb-border);
  font-size:var(--fb-text-sm);
  line-height:1.45;
}


/* =================================================================
   7 · BUTTONS — confidence
   ================================================================= */

.btn{
  letter-spacing:-.01em;
  transition:transform var(--fb-duration-fast) var(--fb-ease-out),
             background-color var(--fb-duration-fast) var(--fb-ease-out),
             box-shadow var(--fb-duration-fast) var(--fb-ease-out);
}
/* Dock CTA is the primary action everywhere — give it presence. */
.dock .btn{ font-size:var(--fb-text-md); min-height:var(--fb-control-height-lg); }


/* =================================================================
   8 · MOTION + ACCESSIBILITY
   Everything above degrades to stillness, not to broken layout.
   ================================================================= */

@media (prefers-reduced-motion: reduce){
  .screen.on{ animation:none; }
  .fb-metric-fill,
  .fb-house-svg *{ transition:none !important; animation:none !important; }
}
.fb-calm .screen.on{ animation:none; }


/* =================================================================
   9 · SMALL SCREENS
   ================================================================= */

@media (max-width:380px){
  .hero h1{ font-size:clamp(28px, 8.6vw, 34px); }
  .hero .sub{ font-size:var(--fb-text-sm); }
  /* badges keep their base size — they fit, and shrinking them put the
     label under the comfortable reading floor */
  .tbadges div{ min-height:52px; }
  .fb-metric{ padding:var(--fb-space-3) var(--fb-space-3) var(--fb-space-3) var(--fb-space-5); }
}

/* Perks were wrapping to two lines at 390px, breaking the rhythm
   between the sub-headline and JP. Tightened so all three sit on one
   row on a 360px phone — three quiet confirmations reading as one
   line, not a cluster. */
.hero .perks{
  flex-wrap:nowrap;
  justify-content:center;
  gap:var(--fb-space-1);
}
.hero .perks div{
  padding:0 var(--fb-space-2);
  font-size:11px;
  letter-spacing:-.01em;
  white-space:nowrap;
  gap:var(--fb-space-1);
}
@media (min-width:400px){
  .hero .perks{ gap:var(--fb-space-2); }
  .hero .perks div{ padding:0 var(--fb-space-3); font-size:var(--fb-text-xs); }
}

/* =================================================================
   BACK TO WEBSITE
   Append to the end of css/polish.css (loaded last, presentation only).

   Quiet by design: the dock CTA is the only thing on the screen that
   should look like a button. This is a way out, not an offer.
   ================================================================= */
.backsite{
  display:inline-flex;
  align-items:center;
  align-self:flex-start;          /* if .app is a flex column, don't stretch */
  gap:6px;
  margin:6px 0 -2px;
  padding:11px 12px 11px 8px;     /* 44px tall tap target, visually light */
  min-height:44px;
  font:600 13px/1 inherit;
  letter-spacing:.01em;
  color:var(--fb-text-muted, #64748b);
  text-decoration:none;
  border-radius:var(--fb-radius-sm, 10px);
  transition:color .18s ease, background-color .18s ease;
}
.backsite svg{
  flex:none;
  transition:transform .18s ease;
}
.backsite:hover{
  color:var(--fb-secondary, #1668ac);
  background:rgba(15,23,42,.055);
}
.backsite:hover svg{ transform:translateX(-2px) }

/* Keyboard ring only — matches how the primary CTA's focus ring was fixed
   in the beta pass (outline, not box-shadow). */
.backsite:focus-visible{
  outline:2px solid var(--fb-secondary, #1668ac);
  outline-offset:2px;
}

@media (hover:none){
  .backsite:hover{ background:none; color:var(--fb-text-muted, #64748b) }
  .backsite:hover svg{ transform:none }
}

/* A printed estimate doesn't need a navigation link. */
@media print{ .backsite{ display:none } }