/* =================================================================
   Flooring Correct — answers.v1.css
   The /answers/ silo only: the answer-first opener, the answer box,
   and the hub's grouped question index.
   v2 (2026-08-16, same day as v1): v1 shipped with too little top padding
   on .ans, so the FIXED .nav (84px tall, overlaying the page) landed on top
   of the breadcrumb and the eyebrow. Every other page type hides this because
   .phero clears the nav with padding-top:calc(100px + safe-area). An answer
   page has no hero on purpose, so it has to do that clearing itself.
   v1 is left in place untouched: /css/* is served immutable for a year, so a
   changed file can never be relied on to reach a browser that already has it.
   WRITE-ONCE. Any further change ships answers.v3.css and repoints the silo.
   All colors come from the fc.v4.css tokens.
   ================================================================= */

/* ---------- the answer-first opener ----------
   Deliberately light, compact and NOT the .phero dark hero. The question
   and its answer have to be the first thing on screen, above the fold,
   on a 375px phone. Everything here is in service of that.            */
.ans{padding:calc(100px + env(safe-area-inset-top) + var(--pad) * .28) 0 calc(var(--pad) * .34);
  background:var(--plaster);border-bottom:1px solid var(--hairline)}
.ans .wrap{max-width:820px}

.ans-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font:600 var(--fs-xs) var(--ui);
  color:var(--ink-mid);margin-bottom:18px}
.ans-crumb a{color:var(--ink-mid);text-decoration:none;border-bottom:1px solid transparent}
.ans-crumb a:hover{color:var(--brass-dk);border-bottom-color:currentColor}
.ans-crumb [aria-current]{color:var(--navy);font-weight:700}
.ans-sep{color:var(--hairline)}

.ans .eyebrow{display:block;margin-bottom:12px}

.ans-q{font-family:var(--display);font-weight:600;color:var(--navy);
  font-size:clamp(30px,3.5vw + 12px,52px);line-height:1.1;letter-spacing:-.015em;
  margin:0 0 22px;max-width:20ch;text-wrap:balance}

/* The answer box. This paragraph is the whole product: it is the speakable
   target, the first FAQPage entity, and the thing a reader or an assistant
   lifts. It gets the strongest treatment on the page.                     */
.answer-box{position:relative;background:var(--surface);border:1px solid var(--hairline);
  border-left:4px solid var(--brass);border-radius:var(--r-sm);
  padding:clamp(18px,2.4vw,28px) clamp(18px,2.6vw,32px);box-shadow:var(--sh-1)}
.answer-box p{margin:0;font-size:var(--fs-lead);line-height:1.62;color:var(--ink);
  font-weight:500;text-wrap:pretty}

.ans-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;
  font-size:var(--fs-sm);color:var(--ink-mid)}
.ans-meta b{color:var(--navy)}
.ans-meta .divider{width:1px;height:14px;background:var(--hairline)}
.ans-tel{display:inline-flex;align-items:center;gap:6px;color:var(--brass-dk);font-weight:700;
  text-decoration:none;min-height:32px}
.ans-tel:hover{color:var(--navy)}
.ans-tel svg{flex:none}

.ans-pillar{display:inline-flex;align-items:center;gap:7px;margin-top:18px;
  font:700 var(--fs-ui) var(--ui);color:var(--brass-dk);text-decoration:none;min-height:44px}
.ans-pillar:hover{color:var(--navy)}

/* the prose section that follows reads better narrow on an answer page */
.ans + .sec .prose{max-width:74ch}

/* ---------- the hub index ---------- */
.ans-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(22px,3vw,40px)}
.ans-group{border:1px solid var(--hairline);border-radius:var(--r);background:var(--surface);
  padding:clamp(20px,2.4vw,30px);box-shadow:var(--sh-1)}
.ans-group h2{font-family:var(--display);font-size:var(--fs-h3);color:var(--navy);margin:0 0 6px}
.ans-group-note{margin:0 0 16px;color:var(--ink-mid);font-size:var(--fs-sm);line-height:1.55}
.ans-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.ans-list li{border-top:1px solid var(--hairline)}
.ans-list li:last-child{border-bottom:1px solid var(--hairline)}
.ans-list a{display:block;padding:13px 26px 13px 0;color:var(--ink);text-decoration:none;
  font-size:var(--fs-ui);line-height:1.45;position:relative;transition:color .15s,padding .15s}
.ans-list a::after{content:"→";position:absolute;right:4px;top:50%;transform:translateY(-50%);
  color:var(--brass);opacity:0;transition:opacity .15s,right .15s}
.ans-list a:hover{color:var(--brass-dk)}
.ans-list a:hover::after{opacity:1;right:0}
.ans-list a:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}

@media (max-width:820px){
  .ans-groups{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ans-q{max-width:none}
  .answer-box{border-left-width:3px}
  .ans-meta{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .ans-list a,.ans-list a::after{transition:none}
}