/* ROOF.DSGN — inner-page components (additive; needs styles.css + anim.css) */

/* ===== compact page hero ===== */
.phero{position:relative;min-height:66svh;display:flex;align-items:flex-end;color:#fff;overflow:hidden}
.phero-bg{position:absolute;inset:-6% -2%;background-size:cover;background-position:center;will-change:transform}
.phero-scrim{position:absolute;inset:0;background:
  linear-gradient(to top,rgba(10,16,11,.92) 4%,rgba(12,18,13,.4) 50%,rgba(12,18,13,.5) 100%)}
.phero-in{position:relative;z-index:2;padding-block:130px clamp(48px,8vh,86px);max-width:780px;
  text-shadow:0 2px 24px rgba(8,12,9,.5)}
.phero h1{color:#fff;font-weight:400;margin-block:.4rem 1rem}
.phero-sub{font-size:clamp(1.05rem,1.7vw,1.3rem);color:rgba(255,255,255,.9);max-width:48ch;margin-bottom:1.8rem;font-weight:400}

/* breadcrumb */
.crumb{display:flex;gap:.5rem;align-items:center;font-family:'Montserrat',sans-serif;font-size:.78rem;
  letter-spacing:.04em;color:rgba(255,255,255,.8);text-transform:uppercase}
.crumb a:hover{color:var(--amber)}
.crumb .sep{opacity:.5}

/* ===== feature row (image + text, alternating) ===== */
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center;
  margin-block:clamp(2.4rem,5vw,4.4rem)}
.feature.rev{direction:rtl}
.feature.rev>*{direction:inherit}
.feature-media{height:clamp(280px,40vw,460px);border-radius:var(--r);overflow:hidden;
  background-size:cover;background-position:center;box-shadow:0 30px 70px -34px rgba(0,0,0,.45)}
.feature-body .eyebrow{margin-bottom:.6rem}
.feature-body h3{font-size:clamp(1.4rem,2.4vw,2rem);font-weight:300;font-family:var(--font-head);margin-bottom:.7rem;letter-spacing:-.01em}
.feature-body p{color:#5b625c;margin-bottom:1rem}
.band-pine .feature-body p{color:rgba(255,255,255,.74)}

/* tick list */
.ticks{list-style:none;display:grid;gap:.6rem;margin-block:1rem 1.4rem}
.ticks li{position:relative;padding-inline-start:1.7rem;color:#3a423d}
.band-pine .ticks li{color:rgba(255,255,255,.82)}
.ticks li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.55em;width:9px;height:9px;
  border-inline:2px solid var(--amber-deep);border-block-end:2px solid var(--amber-deep);transform:rotate(45deg) translateY(-2px)}

/* ===== comparison matrix ===== */
.matrix-wrap{overflow-x:auto;margin-top:2.4rem;border-radius:var(--r-sm);border:1px solid var(--line)}
.matrix{width:100%;border-collapse:collapse;min-width:640px;background:#fff}
.matrix th,.matrix td{padding:1rem 1.1rem;text-align:start;border-block-end:1px solid var(--line);font-size:.95rem}
.matrix thead th{font-family:'Montserrat',sans-serif;font-weight:700;background:var(--pine);color:#fff;font-size:.9rem}
.matrix tbody th{font-weight:600;color:#2b322d;background:var(--surface)}
.matrix td{color:#5b625c}
.matrix .yes{color:var(--amber-deep);font-weight:700}

/* ===== two-column "good for / consider" ===== */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.2rem}
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:1.8rem}
.panel h3{font-size:1.15rem;margin-bottom:.9rem}
.panel.good{border-block-start:3px solid var(--amber)}
.panel.note-panel{background:var(--surface)}

/* generic prose */
.prose{max-width:70ch}
.prose p{color:#5b625c;margin-bottom:1rem}

@media(max-width:860px){
  .feature{grid-template-columns:1fr;gap:1.4rem}
  .feature-media{height:clamp(240px,60vw,360px)}
  .split2{grid-template-columns:1fr}
}