/* ==========================================================================
   ESTIMATOR TEASER — replaces the Instant Roof Estimate form on the homepage,
   roof-replacement, and the 9 city pages. The working estimator itself stays
   on /calculator, which is where this section's CTA points.

   Desktop: headline centred across the top, the three steps down the left,
   the report right with the video strip in its footer, and the gold button
   centred under both columns.
   Phones: headline, three steps, report, button, one column.

   Deliberately its own file, not css/lp-port.css: that one is shared by 12
   pages and /css/* is served immutable, so editing it would force a ?v= bump
   on every page that links it.

   Depends on css/lp-port.css for the .lpx custom properties (--ink, --mute,
   --line) and for the .rvBs video strip and .rvlb lightbox.
   ========================================================================== */
.et.section{padding-top:clamp(44px,5vw,78px);padding-bottom:clamp(44px,5vw,78px)}
.et{overflow:hidden}
.et .et__head{max-width:760px;margin:0 auto 58px}
.et .et__head h2{font-family:var(--font-heading);font-weight:700;text-transform:uppercase;letter-spacing:.03em;line-height:1.08;color:#fff;font-size:clamp(1.7rem,3vw,2.35rem);margin:10px 0 0}
.et .et__sub{font-size:1.02rem;line-height:1.55;color:rgba(255,255,255,.78);margin:12px auto 0;max-width:540px}

.et .et__btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-heading);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:.92rem;line-height:1;padding:19px 40px;border-radius:var(--radius-md);background:var(--color-gold);color:var(--color-charcoal);box-shadow:0 16px 32px -16px rgba(197,160,89,.95);transition:background .18s,transform .14s,box-shadow .18s}
.et .et__btn:hover{background:var(--color-gold-hover);transform:translateY(-1px);box-shadow:0 20px 38px -16px rgba(197,160,89,1)}
.et .et__btn:active{transform:translateY(0)}
.et .et__btn svg{transition:transform .18s}
.et .et__btn:hover svg{transform:translateX(3px)}

/* ---------- steps ---------- */
.et__stepsblock{margin-top:0;padding-top:0;border-top:0}
/* .et__stepsh is an <h3>, and lp-port.css colours those with `.lpx h2,.lpx h3`
   at (0,2,0), which beat a lone class. On the old light ground that just made
   it dark like everything else; on the band it rendered near-black on olive and
   effectively disappeared. Scoped through the block so it wins outright rather
   than depending on which sheet is linked last. */
.et .et__stepsblock .et__stepsh{font-family:var(--font-heading);font-weight:700;font-size:.86rem;letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold);margin:0 0 26px}
.et__step{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:20px;padding:0}
.et__step-n{font-family:var(--font-heading);font-weight:800;font-size:2.5rem;line-height:1;letter-spacing:-.02em;color:var(--color-gold);flex:none;min-width:0}
.et__step-t{margin:0;font-size:1.04rem;line-height:1.5;color:rgba(255,255,255,.88);font-weight:500}

/* ---------- the locked report card ---------- */
.etc{background:#fff;border:1px solid rgba(255,255,255,.10);border-radius:var(--radius-lg);box-shadow:0 40px 90px -34px rgba(0,0,0,.75);overflow:hidden}
.etc__bar{background:var(--color-charcoal);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px}
.etc__bar img{height:19px;width:auto}
.etc__bar .rt{font-family:var(--font-heading);color:#fff;font-weight:700;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase}
.etc__body{padding:14px}
.etc__imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.etc__imgs figure{position:relative;margin:0;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.etc__imgs img{width:100%;height:158px;object-fit:cover}
.etc__imgs figcaption{position:absolute;top:7px;left:7px;background:rgba(20,20,22,.8);color:#fff;font-size:.5rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;padding:3px 6px;border-radius:4px}
/* Direct children only: the inner .l/.v divs must not inherit cell padding. */
.etc__stats{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:10px}
.etc__stats>div{padding:9px 10px;text-align:center;border-right:1px solid var(--line)}
.etc__stats>div:last-child{border-right:none}
.etc__stats .l{font-family:var(--font-heading);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);font-weight:700}
.etc__stats .v{font-family:var(--font-heading);font-weight:800;font-size:1.15rem;margin-top:3px;color:var(--ink)}

/* Locked pricing: tier names stay legible, the numbers are blurred past
   reading and a hard gradient washes the bottom of the card out. The real
   numbers still populate from js/roof-pricing.js underneath. */
.etc__locked{position:relative;margin-top:10px}
.etc__tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.etc__tier{border:1px solid var(--line);border-radius:9px;padding:11px 8px 12px;text-align:center;background:#fff}
.etc__tier.feat{border:2px solid var(--color-gold);background:linear-gradient(180deg,#fffdf7,#fff)}
.etc__tier .nm{font-family:var(--font-heading);font-weight:700;text-transform:uppercase;font-size:.74rem;letter-spacing:.03em;color:var(--ink)}
.etc__tier .pr{font-weight:800;font-size:.86rem;color:var(--ink);margin-top:6px;filter:blur(7px);opacity:.55;user-select:none;pointer-events:none}
.etc__pill{display:inline-block;font-family:var(--font-heading);font-weight:700;font-size:.46rem;letter-spacing:.11em;text-transform:uppercase;padding:3px 7px;border-radius:14px;margin-bottom:6px}
.etc__pill.gray{background:#ece6da;color:#7a7263}
.etc__pill.olive{background:var(--color-od-green);color:#fff}
.etc__pill.gold{background:var(--color-gold);color:var(--color-charcoal)}
/* -14px reaches past the card body padding so the wash hits the card edges */
.etc__locked::after{content:"";position:absolute;left:-14px;right:-14px;bottom:-14px;top:38px;background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.84) 36%,#fff 66%);pointer-events:none;z-index:1}
.etc__chip{position:absolute;left:50%;bottom:0;transform:translateX(-50%);z-index:2;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;background:var(--color-charcoal);color:#fff;font-family:var(--font-heading);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:9px 17px;border-radius:999px;box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
.etc__chip svg{color:var(--color-gold);flex:none}

/* Charcoal footer docked on the card: strip on its own row, gold button
   underneath. Identical on desktop and phones. */
.etc__foot{background:var(--color-charcoal);padding:14px;position:relative;overflow:hidden}
.etc__foot::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 78% 0%,rgba(197,160,89,.26),transparent 62%);pointer-events:none}
.etc__foot-in{position:relative;display:flex;flex-direction:column;gap:0}
.etc__foot .et__btn{width:100%}
.etc__foot .rvBs__strip{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15)}
.etc__foot .rvBs__strip:hover{background:rgba(255,255,255,.11);border-color:rgba(197,160,89,.55)}
.etc__foot .rvBs__title{color:#fff}
.etc__foot .rvBs__eyebrow{color:var(--color-gold)}
.etc__foot .rvBs__chev{color:rgba(255,255,255,.45)}

/* Compact video strip at every width. Reuses the .rvBs markup and
   js/roof-video.js, so tapping it opens the same frosted lightbox.
   lp-port.css hides .rvBs above 768px; .et .rvBs outranks that. */
.et .rvBs{display:block;margin:0}
.et .rvBs__title{font-size:.92rem}

/* ---------- layout ---------- */
.et__grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:0 52px;align-items:center;max-width:1120px;margin:0 auto}

/* ==========================================================================
   THE BAND

   The section used to sit on warm paper. It is the same deep olive as
   /calculator now, with the diagonal stripe texture and the top accent line
   that .cta-banner draws in components.css, so the teaser and the page it
   hands off to read as one surface.

   Those two pseudo-elements are copied rather than shared: giving this
   section the .cta-banner class would drag in its padding, its flex layout
   and its heading colours.
   ========================================================================== */
.et{position:relative;background:
  radial-gradient(85% 60% at 12% -5%,rgba(197,160,89,.20),transparent 60%),
  radial-gradient(70% 55% at 95% 10%,rgba(123,117,54,.30),transparent 62%),
  #2A2B22}

/* Diagonal stripe texture */
.et::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent,transparent 24px,rgba(255,255,255,0.035) 24px,rgba(255,255,255,0.035) 25px);pointer-events:none}

/* Top accent line */
.et::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,rgba(21,21,23,0.5),transparent 15%,transparent 85%,rgba(21,21,23,0.5));pointer-events:none}

/* Above the stripes. Without this the texture paints over the content: an
   absolutely positioned pseudo-element sorts after in-flow inline content. */
.et>.container{position:relative;z-index:1}

.et .eyb{color:var(--color-gold)}

/* ==========================================================================
   LAYOUT — headline across the top, steps left, sample right, button under

   The button used to be docked inside the card's charcoal footer, directly
   under the "Instant Roof Estimate" bar, which made it read as part of the
   sample rather than as the thing to click. It is its own grid cell now.
   ========================================================================== */

/* Dissolve the copy wrapper so the headline and the steps place themselves,
   the headline across both columns and the steps in the left one. */
.et__copy{display:contents}

/* Placement only. The max-width and the gap under it live on `.et .et__head`
   above, because a lone class loses to it inside this file. */
.et__head{grid-column:1/-1;grid-row:1;text-align:center}
.et__stepsblock{grid-column:1;grid-row:2}
.et__card{grid-column:2;grid-row:2}
.et__cta{grid-column:1/-1;grid-row:3;display:flex;justify-content:center;margin-top:42px}

.et__steps{display:grid;gap:28px}

/* ==========================================================================
   NARROW — last in the file on purpose. These undo the desktop placements
   above, and equal-specificity ties go to whichever rule comes later.
   ========================================================================== */
@media (max-width:900px){
  /* Phones: headline, steps, report, button. Every desktop placement has to be
     undone rather than left to cascade: display:contents and the explicit
     grid-column/grid-row would both otherwise leak into one column. */
  .et.section{padding-bottom:64px}
  .et__grid{grid-template-columns:1fr;max-width:560px;gap:18px}
  .et__copy{display:block}
  .et__copy,.et__head,.et__stepsblock,.et__card,.et__cta{grid-column:auto;grid-row:auto;max-width:none;margin-top:0}
  .et .et__head{margin-bottom:0;text-align:center}
  .et__stepsblock{text-align:center;margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
  .et .et__stepsblock .et__stepsh{font-size:.82rem;letter-spacing:.16em;margin:0 0 10px}
  .et__steps{display:block}
  .et__step{display:flex;flex-direction:row;align-items:baseline;text-align:left;gap:12px;padding:0 0 11px}
  .et__step-n{font-size:1.08rem;min-width:22px}
  .et__step-t{font-size:.9rem}
  .et__cta{margin-top:22px}
  .et .et__btn{width:100%;padding:17px 20px;font-size:.84rem}
}
@media (max-width:620px){
  .etc__tiers{gap:6px}
  .etc__tier{padding:9px 4px 11px}
  .etc__tier .nm{font-size:.62rem;letter-spacing:.01em}
  .etc__tier .etc__pill{display:none}
  .etc__tier .pr{font-size:.72rem}
  .etc__imgs img{height:104px}
  .etc__chip{font-size:.6rem;letter-spacing:.1em;padding:8px 14px}
}