/* ============================================================
   replacecost.com — design system
   Concept: the estimate sheet a contractor should have given you.
   Palette is drawn from roofing materials: asphalt slate, copper
   verdigris (patina), aged cedar. Paper is cool drafting stock.
   ============================================================ */

:root{
  --ink:      #14191C;
  --ink-2:    #47535A;
  --ink-3:    #7A868C;
  --paper:    #EDEFEC;
  --card:     #FFFFFF;
  --patina:   #2C6B5B;
  --patina-d: #1E4E42;
  --patina-l: #DCE8E3;
  --amber:    #96601C;
  --amber-l:  #F6EEDF;
  --flag:     #9C2F26;
  --flag-l:   #F8E9E7;
  --rule:     #D3D8D3;
  --rule-2:   #E4E8E3;

  --f-display: "Archivo", system-ui, sans-serif;
  --f-body:    "Public Sans", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --wrap: 1080px;
  --r: 4px;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-tight{max-width:760px;margin:0 auto;padding:0 24px}

/* ---------- type ---------- */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.025em;line-height:1.12;margin:0}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.55rem,3.2vw,2.15rem);margin-top:3rem;margin-bottom:.85rem}
h3{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem;letter-spacing:-.015em}
p{margin:0 0 1.05rem}
a{color:var(--patina-d);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--patina)}
strong{font-weight:600}

.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--patina);
  margin:0 0 .9rem;display:block;
}
.lede{font-size:1.14rem;color:var(--ink-2);line-height:1.6}

:focus-visible{outline:2.5px solid var(--patina);outline-offset:2px}

/* ---------- header ---------- */
.masthead{border-bottom:1px solid var(--rule);background:var(--paper);position:sticky;top:0;z-index:50}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:20px}
.brand{font-family:var(--f-display);font-weight:700;font-size:1.12rem;letter-spacing:-.03em;color:var(--ink);text-decoration:none;white-space:nowrap}
.brand span{color:var(--patina)}
.nav{display:flex;gap:22px;font-size:.88rem;font-weight:500}
.nav a{color:var(--ink-2);text-decoration:none}
.nav a:hover{color:var(--patina-d)}
@media(max-width:720px){.nav{display:none}}

/* ---------- hero ---------- */
.hero{padding:52px 0 30px;border-bottom:1px solid var(--rule)}
.hero h1{max-width:16ch}
.hero .lede{max-width:56ch;margin-top:1.1rem}

/* the signature strip: the two numbers that actually matter */
.split-teaser{
  display:grid;grid-template-columns:1fr auto 1fr;gap:0;
  margin-top:2rem;max-width:520px;
  border:1px solid var(--rule);background:var(--card);
}
.split-teaser>div{padding:14px 18px}
.split-teaser .vs{
  display:grid;place-items:center;padding:0 12px;
  font-family:var(--f-mono);font-size:.7rem;color:var(--ink-3);
  border-left:1px solid var(--rule-2);border-right:1px solid var(--rule-2);
}
.split-teaser b{display:block;font-family:var(--f-mono);font-size:1.35rem;font-weight:600}
.split-teaser .a b{color:var(--ink)}
.split-teaser .b b{color:var(--flag)}
.split-teaser small{display:block;font-size:.72rem;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase;font-family:var(--f-mono)}

/* ---------- estimate sheet (signature element) ---------- */
.sheet{
  background:var(--card);border:1px solid var(--rule);
  margin:34px 0;
}
.sheet-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:16px 22px;border-bottom:2px solid var(--ink);flex-wrap:wrap;
}
.sheet-head h2{margin:0;font-size:1.15rem;letter-spacing:-.01em}
.sheet-head .stamp{
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
.sheet-body{padding:22px}

.field-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px 20px}
.field label{
  display:block;font-family:var(--f-mono);font-size:.7rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);margin-bottom:6px;
}
.field input,.field select{
  width:100%;font-family:var(--f-mono);font-size:.95rem;
  padding:9px 11px;border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper);color:var(--ink);
}
.field input:focus,.field select:focus{border-color:var(--patina);background:var(--card)}
.field .hint{font-size:.74rem;color:var(--ink-3);margin-top:5px;line-height:1.4}

.btn{
  font-family:var(--f-display);font-weight:600;font-size:.95rem;letter-spacing:-.01em;
  background:var(--patina);color:#fff;border:0;border-radius:var(--r);
  padding:12px 26px;cursor:pointer;
}
.btn:hover{background:var(--patina-d)}

/* line-item output */
.lines{width:100%;border-collapse:collapse;font-family:var(--f-mono);font-size:.87rem;margin-top:6px}
.lines th{
  text-align:left;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-3);font-weight:600;padding:0 0 8px;border-bottom:1px solid var(--rule);
}
.lines th.num,.lines td.num{text-align:right}
.lines td{padding:9px 0;border-bottom:1px dotted var(--rule-2)}
.lines .lbl{color:var(--ink-2)}
.lines .q{color:var(--ink-3);font-size:.8rem}
.lines tr.total td{
  border-top:2px solid var(--ink);border-bottom:0;padding-top:12px;
  font-weight:600;font-size:1.02rem;
}
.lines tr.total td.num{color:var(--amber)}

.range-band{
  margin-top:20px;padding:16px 18px;background:var(--amber-l);
  border-left:3px solid var(--amber);
}
.range-band .n{font-family:var(--f-mono);font-size:1.6rem;font-weight:600;color:var(--amber);line-height:1.2}
.range-band .k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}

/* ACV vs RCV — the thing no other cost site shows */
.payout{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);margin-top:22px;border:1px solid var(--rule)}
.payout>div{background:var(--card);padding:16px 18px}
.payout .k{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-bottom:5px}
.payout .n{font-family:var(--f-mono);font-size:1.42rem;font-weight:600;line-height:1.2}
.payout .rcv .n{color:var(--patina)}
.payout .acv .n{color:var(--flag)}
.payout .sub{font-size:.78rem;color:var(--ink-2);margin-top:6px;line-height:1.45}
@media(max-width:560px){.payout{grid-template-columns:1fr}}

.gap-note{
  margin-top:14px;padding:13px 16px;background:var(--flag-l);
  border-left:3px solid var(--flag);font-size:.9rem;line-height:1.55;
}
.gap-note b{color:var(--flag)}

.disclose{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--rule-2);
  font-size:.79rem;color:var(--ink-3);line-height:1.55;
}

/* ---------- callouts ---------- */
.note{background:var(--card);border-left:3px solid var(--patina);padding:15px 19px;margin:1.6rem 0;font-size:.95rem;line-height:1.6}
.note.warn{border-left-color:var(--flag)}
.note b{display:block;margin-bottom:5px;font-family:var(--f-display);letter-spacing:-.01em}

/* ---------- data table ---------- */
.data{width:100%;border-collapse:collapse;font-size:.92rem;margin:1.4rem 0;background:var(--card);border:1px solid var(--rule)}
.data th{
  text-align:left;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);font-weight:600;
  padding:11px 14px;border-bottom:2px solid var(--ink);
}
.data td{padding:11px 14px;border-bottom:1px solid var(--rule-2)}
.data tr:last-child td{border-bottom:0}
.data td.num,.data th.num{text-align:right;font-family:var(--f-mono);font-size:.88rem}
.data caption{caption-side:bottom;text-align:left;font-size:.78rem;color:var(--ink-3);padding-top:9px}

/* ---------- trade index (homepage) ---------- */
.trades{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:2rem 0}
.trade{background:var(--card);padding:20px;text-decoration:none;color:inherit;display:block}
.trade:hover{background:var(--patina-l)}
.trade .n{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:-.02em;margin-bottom:4px}
.trade .r{font-family:var(--f-mono);font-size:.82rem;color:var(--amber);font-weight:600}
.trade .d{font-size:.82rem;color:var(--ink-3);margin-top:6px;line-height:1.45}
.trade[aria-disabled="true"]{opacity:.5;pointer-events:none}
.trade[aria-disabled="true"] .r{color:var(--ink-3)}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--rule);margin-top:2rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  padding:15px 0;cursor:pointer;font-family:var(--f-display);font-weight:600;
  font-size:1rem;letter-spacing:-.015em;list-style:none;display:flex;
  justify-content:space-between;gap:16px;align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--patina);font-size:1.1rem;flex:0 0 auto}
.faq details[open] summary::after{content:"\2013"}
.faq .a{padding:0 0 16px;font-size:.95rem;color:var(--ink-2);max-width:68ch}
.faq .a p:last-child{margin-bottom:0}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--rule);margin-top:64px;padding:32px 0 44px;font-size:.85rem;color:var(--ink-3)}
.foot a{color:var(--ink-2)}
.foot .cols{display:flex;gap:44px;flex-wrap:wrap;margin-bottom:22px}
.foot .col h4{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:9px;font-weight:600}
.foot .col a{display:block;margin-bottom:5px;text-decoration:none}
.foot .col a:hover{text-decoration:underline}

/* ---------- ad slots (AdSense) ---------- */
.ad{margin:2.4rem 0;min-height:90px;display:grid;place-items:center;border:1px dashed var(--rule);background:var(--card)}
.ad small{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}

/* ---------- misc ---------- */
.crumb{font-family:var(--f-mono);font-size:.76rem;color:var(--ink-3);padding:16px 0 0}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--patina)}
.updated{font-family:var(--f-mono);font-size:.72rem;color:var(--ink-3);letter-spacing:.06em}
.toc{background:var(--card);border:1px solid var(--rule);padding:18px 22px;margin:2rem 0}
.toc h4{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;font-weight:600}
.toc ol{margin:0;padding-left:20px;font-size:.92rem}
.toc li{margin-bottom:5px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}