/* ============================================================
   assets/css/prezzi.css
   Sections shared by EVERY service page (and, later, the city
   pages). Loaded by service pages only — never by the homepage,
   which uses none of it.

   Load order: global.css -> prezzi.css -> <service>.css
   so a page can still override a shared section locally.

   Tokens, .container, .btn and the header/footer/hero chrome stay
   in global.css and are never redefined here.

   Sections:
     1 pricing  ("Quanto costa un intervento ...")
     2 coverage ("Dove operiamo" — region cards + city links)

   Design is the /intervento-idraulico/ variant (left-aligned,
   1240px). The fabbro page previously carried a centred 1160px
   copy of the same section; both now render from this one
   definition.

   Deliberately NOT here: the "servizi"/"categorie" and "emergenza"
   blocks. They look shared from their class names but are genuinely
   different components on the two pages (fabbro's emergency is a
   centred text panel, idraulico's is two columns with a photo and a
   badge), so they stay page-local until a second page really does
   share the same design.
============================================================ */


/* ============================================================
   1. PRICING
============================================================ */
.svc-pricing{
  background:var(--paper-050);
  /* clamped rather than a flat 88px so it doesn't swallow a phone
     screen; identical to 88px from ~1250px up */
  padding:clamp(60px,7vw,88px) 5vw;
}
.svc-pricing-inner{ max-width:1240px; margin:0 auto; }

.svc-pricing-pill{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--amber-600); color:var(--paper-000);
  font-size:13px; font-weight:700; letter-spacing:.03em;
  padding:10px 20px 10px 18px; border-radius:999px;
  margin-bottom:26px;
}
.svc-pricing-pill-bar{
  width:16px; height:2px; border-radius:2px; background:var(--paper-000);
}

.svc-pricing-title{
  margin:0 0 18px;
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,38px); font-weight:800;
  color:var(--green-900); letter-spacing:-.01em;
}

.svc-pricing-intro{
  margin:0 0 8px;
  font-size:16.5px; line-height:1.65; color:var(--ink-700);
  max-width:760px;
}
.svc-pricing-intro a{
  color:var(--green-700); font-weight:700; text-decoration:underline;
}
.svc-pricing-link-full{
  display:inline-block; margin-top:4px;
  font-size:16px; font-weight:700;
  color:var(--green-900); text-decoration:underline;
}

.svc-pricing-cards{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; margin:48px 0 40px;
}
.svc-pricing-card{
  background:var(--paper-000);
  border:1px solid var(--line-200); border-radius:18px;
  padding:30px 28px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.svc-pricing-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(14,57,94,.1);
  border-color:transparent;
}

.svc-pricing-label{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:700; letter-spacing:.03em;
  color:var(--green-700); margin-bottom:16px;
}
.svc-pricing-label-dot{
  width:7px; height:7px; border-radius:50%;
  background:var(--amber-500); flex-shrink:0;
}
.svc-pricing-value{
  font-family:var(--font-display);
  font-size:27px; font-weight:800; line-height:1.15;
  color:var(--green-900); margin-bottom:10px;
}
.svc-pricing-note{ font-size:14.5px; line-height:1.5; color:var(--ink-700); }

.svc-pricing-terms{
  font-size:14.5px; line-height:1.7; color:var(--ink-700);
  max-width:900px; margin:0 0 40px;
}
.svc-pricing-terms strong{ color:var(--green-900); }

.svc-pricing-cta{
  display:inline-flex; align-items:center;
  background:transparent; color:var(--green-900);
  border:2px solid var(--green-900);
  font-family:var(--font-display);
  font-size:15.5px; font-weight:700; text-decoration:none;
  padding:15px 28px; border-radius:999px;
  transition:background .15s ease, color .15s ease;
}
.svc-pricing-cta:hover{ background:var(--green-900); color:var(--paper-000); }


/* ============================================================
   2. COVERAGE — "Dove operiamo"
   <details> region cards holding the city links, so the disclosure
   works with JavaScript disabled.
============================================================ */
.svc-coverage{
  background:var(--green-050);
  padding:clamp(60px,7vw,88px) 5vw;
}
.svc-coverage-inner{ max-width:1240px; margin:0 auto; }
.svc-coverage-head{ max-width:640px; margin-bottom:44px; }

.svc-coverage-eyebrow{
  display:flex; align-items:center; gap:10px; margin-bottom:20px;
}
.svc-coverage-eyebrow-bar{
  width:28px; height:3px; border-radius:2px;
  background:var(--amber-600); flex-shrink:0;
}
.svc-coverage-eyebrow-text{
  font-size:13px; font-weight:700; letter-spacing:.03em;
  color:var(--amber-600);
}
.svc-coverage-title{
  margin:0 0 14px;
  font-family:var(--font-display);
  font-size:clamp(28px,3vw,38px); font-weight:800;
  color:var(--green-900); letter-spacing:-.01em;
}
.svc-coverage-sub{
  margin:0; font-size:16px; line-height:1.6; color:var(--ink-700);
}

.svc-region-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
}
.svc-region-card{
  background:var(--paper-000);
  border:1px solid var(--line-200); border-radius:16px;
  padding:4px 22px; height:max-content;
}
.svc-region-card summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:12px;
  padding:20px 0;
}
.svc-region-card summary::-webkit-details-marker{ display:none; }

.svc-region-pin{
  width:34px; height:34px; border-radius:10px;
  background:var(--green-100); color:var(--green-900);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.svc-region-pin svg{ width:16px; height:16px; }

.svc-region-name-wrap{ flex:1; min-width:0; }
.svc-region-name{
  font-family:var(--font-display);
  font-size:15.5px; font-weight:700; color:var(--green-900);
}
.svc-region-count{
  display:block; font-size:12.5px; color:var(--ink-500); margin-top:2px;
}
.svc-region-plus{
  width:24px; height:24px; border-radius:50%;
  background:var(--amber-050); color:var(--amber-600);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:17px; font-weight:700;
  transition:transform .15s ease;
}
.svc-region-card[open] .svc-region-plus{ transform:rotate(45deg); }

.svc-region-cities{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(14px,1.8vw,26px);
  list-style:none; margin:0; padding:4px 0 22px;
}
/* A row is an <li> (fabbro) or a bare <a> (the other two hubs). */
.svc-region-cities > li,
.svc-region-cities > a{
  display:flex;
  /* flex-start, not center: a long city name wraps to two lines in a card
     this narrow, and centred would float the dot into the middle of them */
  align-items:flex-start; gap:9px;
  min-width:0;
  padding:8px 2px;
  border-bottom:1px solid var(--line-200);
}
.svc-region-cities > li::before,
.svc-region-cities > a::before{
  content:""; flex-shrink:0;
  width:5px; height:5px; border-radius:50%;
  background:var(--amber-500);
  /* nudged down to sit on the first line's centre rather than the row's */
  margin-top:7px;
}
.svc-region-cities a{
  min-width:0;
  font-size:13.5px; font-weight:600; line-height:1.45;
  color:var(--green-700); text-decoration:none;
  transition:color .15s ease;
}
.svc-region-cities a:hover{ color:var(--green-900); }
.svc-region-cities > li > a{ flex:1 1 auto; }

/* Optional CTA under the region grid (fabbro uses it). */
.svc-coverage-cta{ text-align:center; margin-top:40px; }


/* ============================================================
   RESPONSIVE
============================================================ */
@media (max-width:980px){
  .svc-region-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .svc-pricing-cards{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .svc-region-grid{ grid-template-columns:1fr; }
}
@media (max-width:480px){
  .svc-pricing-card{ padding:24px 22px; }
  .svc-region-card{ padding:2px 18px; }
  .svc-pricing-cta{ justify-content:center; }
}


/* ============================================================
   3. /prezzi/ — TARIFFE
   ------------------------------------------------------------
   PAGE-SCOPED. Every selector below is prefixed .pz- and no .pz-
   class appears in the markup of any other page, so the 396
   service pages that load this file render exactly as before —
   they only carry the extra bytes.

   The price tables stay real <table>s. On phones each row folds
   into a card and every cell labels itself from the data-label
   attribute the source markup already carries, so nothing is
   duplicated in the HTML to get the card view. The <thead> is
   not hidden on mobile: it becomes a compact legend, which is
   the only place the time ranges ("Lun–Ven, 8:00–17:00") are
   written, and they would otherwise be lost.
============================================================ */

/* ---------- shared shell ---------- */
.pz-inner{ max-width:1240px; margin:0 auto; }
.pz-inner--narrow{ max-width:900px; }

.pz-section{ padding:clamp(60px,7vw,88px) 5vw; }
.pz-section--alt{ background:var(--paper-050); }
.pz-section--tint{ background:var(--green-050); }

.pz-head{ max-width:70ch; margin:0 0 clamp(28px,3.5vw,44px); }
.pz-head h2:where(:not(.h1-look)){
  margin:0 0 14px;
  color:var(--green-900);
  font-size:clamp(1.5rem,1.25rem + 1.2vw,2.15rem);
  line-height:1.14;
  letter-spacing:-.02em;
}
.pz-lead{
  margin:0;
  max-width:62ch;
  font-size:1.02rem;
  line-height:1.7;
  color:var(--ink-500);
}
.pz-note{
  margin:clamp(22px,3vw,32px) 0 0;
  padding:16px 20px;
  border-left:3px solid var(--amber-500);
  background:var(--amber-050);
  border-radius:0 var(--radius-s) var(--radius-s) 0;
  font-size:.95rem;
  line-height:1.65;
  color:var(--ink-700);
}
.pz-note strong{ color:var(--green-900); }


/* ============================================================
   3.1 HERO
============================================================ */
.pz-hero{
  position:relative;
  overflow:hidden;
  background:var(--green-050);
  padding:clamp(40px,6vw,76px) 5vw clamp(44px,6vw,80px);
}
.pz-hero__shape{
  position:absolute;
  top:-48%; right:-10%;
  width:min(60vw,680px); aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,
              rgba(41,145,214,.16) 0%,
              rgba(255,81,0,.08) 45%,
              transparent 70%);
  pointer-events:none;
  z-index:0;
}
.pz-hero__inner{ position:relative; z-index:1; max-width:1240px; margin:0 auto; }

.pz-hero h1,
.pz-hero h2:where(.h1-look){
  margin:0 0 18px;
  max-width:18ch;
  color:var(--green-900);
  font-size:clamp(1.95rem,1.4rem + 2.4vw,3.1rem);
  line-height:1.05;
  letter-spacing:-.025em;
}
.pz-hero__lead{
  margin:0 0 clamp(24px,3vw,32px);
  max-width:60ch;
  font-size:clamp(1rem,.97rem + .2vw,1.1rem);
  line-height:1.7;
  color:var(--ink-700);
}

.pz-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  margin:0 0 clamp(26px,3.4vw,36px);
  padding:0;
}
.pz-point{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 16px 9px 13px;
  border:1px solid var(--line-200);
  border-radius:999px;
  background:var(--paper-000);
  font-size:.9rem;
  font-weight:600;
  line-height:1.3;
  color:var(--green-900);
}
.pz-point::before{
  content:"";
  flex-shrink:0;
  width:16px; height:16px;
  border-radius:50%;
  background:var(--green-700);
  /* white tick, drawn rather than shipped as an asset */
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat,
        linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat,
        linear-gradient(#000,#000);
  mask-composite:exclude;
}


/* ============================================================
   3.2 SERVICE TABS + PRICE TABLES
   ------------------------------------------------------------
   One table visible at a time, switched by clicking a service
   name — the behaviour the export has, rebuilt without JS.

   Three same-name radios sit before the panels; each :checked
   radio reveals its sibling panel and lights its own label.
   site.js is untouched. The radios are moved off-screen rather
   than display:none so they stay keyboard-reachable: arrow keys
   move between services, exactly like a real tab strip.

   The labels are NOT headings — the export carries these three
   words as <button>s and the page's heading hierarchy is
   reproduced exactly (hard rule 9).

   A link such as /prezzi/#fabbro picks the tab: site.js §5 ticks
   the matching radio and scrolls this heading into view.
============================================================ */
.pz-tabs{ position:relative; }
/* Where site.js scrolls to when a link names a service: keep the
   heading clear of the sticky header. */
.pz-section .pz-head{ scroll-margin-top:calc(var(--header-h) + var(--space-s)); }

.pz-tabs__input{
  position:absolute;
  width:1px; height:1px;
  margin:0;
  opacity:0;
  pointer-events:none;
}

.pz-tabs__list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 20px;
  padding:0;
}

.pz-tab{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:44px;                 /* tap target */
  padding:11px 22px;
  border:1px solid var(--line-200);
  border-radius:999px;
  background:var(--paper-000);
  cursor:pointer;
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(.95rem,.92rem + .2vw,1.05rem);
  line-height:1.2;
  color:var(--ink-700);
  user-select:none;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.pz-tab::before{
  content:"";
  width:8px; height:8px;
  border-radius:50%;
  background:var(--line-200);
  flex-shrink:0;
  transition:background .18s ease, transform .18s ease;
}
.pz-tab:hover{ border-color:var(--amber-400); color:var(--green-900); }

/* Panels are hidden until their radio is checked. */
.pz-panel{ display:none; }

/* --- Elettricista --- */
#pz-r-elettricista:checked ~ .pz-tabs__list .pz-tab[for="pz-r-elettricista"],
#pz-r-idraulico:checked    ~ .pz-tabs__list .pz-tab[for="pz-r-idraulico"],
#pz-r-fabbro:checked       ~ .pz-tabs__list .pz-tab[for="pz-r-fabbro"]{
  background:var(--green-900);
  border-color:var(--green-900);
  color:var(--paper-000);
}
#pz-r-elettricista:checked ~ .pz-tabs__list .pz-tab[for="pz-r-elettricista"]::before,
#pz-r-idraulico:checked    ~ .pz-tabs__list .pz-tab[for="pz-r-idraulico"]::before,
#pz-r-fabbro:checked       ~ .pz-tabs__list .pz-tab[for="pz-r-fabbro"]::before{
  background:var(--amber-500);
  transform:scale(1.15);
}

#pz-r-elettricista:checked ~ #pz-p-elettricista,
#pz-r-idraulico:checked    ~ #pz-p-idraulico,
#pz-r-fabbro:checked       ~ #pz-p-fabbro{ display:block; }

/* Keyboard focus has to show on the label, since the radio itself
   is off-screen. */
#pz-r-elettricista:focus-visible ~ .pz-tabs__list .pz-tab[for="pz-r-elettricista"],
#pz-r-idraulico:focus-visible    ~ .pz-tabs__list .pz-tab[for="pz-r-idraulico"],
#pz-r-fabbro:focus-visible       ~ .pz-tabs__list .pz-tab[for="pz-r-fabbro"]{
  outline:3px solid var(--green-500);
  outline-offset:3px;
}

/* Printing a tabbed page would lose two services out of three. */
@media print{
  .pz-panel{ display:block !important; }
  .pz-tabs__list{ display:none; }
}

.pz-table-wrap{
  border:1px solid var(--line-200);
  border-radius:var(--radius-m);
  background:var(--paper-000);
  box-shadow:var(--shadow-card);
  overflow:hidden;
}

.pz-table{
  width:100%;
  border-collapse:collapse;
  font-size:.93rem;
}

.pz-table thead th{
  padding:14px 18px;
  text-align:left;
  vertical-align:bottom;
  background:var(--green-900);
  color:var(--paper-000);
  font-family:var(--font-display);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  line-height:1.25;
}
.pz-table thead th span{
  display:block;
  margin-top:5px;
  font-family:var(--font-body);
  font-weight:500;
  font-size:.72rem;
  letter-spacing:.01em;
  text-transform:none;
  color:rgba(255,255,255,.66);
  white-space:nowrap;
}

.pz-table tbody th{
  padding:14px 18px;
  text-align:left;
  vertical-align:middle;
  font-weight:650;
  line-height:1.45;
  color:var(--green-900);
  border-top:1px solid var(--line-100);
}
.pz-table tbody td{
  padding:14px 18px;
  text-align:left;
  vertical-align:middle;
  white-space:nowrap;
  font-variant-numeric:tabular-nums;
  font-weight:600;
  color:var(--ink-700);
  border-top:1px solid var(--line-100);
}
.pz-table tbody tr:nth-child(even) th,
.pz-table tbody tr:nth-child(even) td{ background:var(--green-050); }

/* Out-of-hours columns carry the premium — mark them, don't explain
   them in words the source does not have. */
.pz-table tbody td:nth-child(4),
.pz-table tbody td:nth-child(5){ color:var(--amber-600); }


/* ---------- phones: each row becomes a card ---------- */
@media (max-width:860px){
  .pz-table-wrap{ border:0; border-radius:0; background:none; box-shadow:none; overflow:visible; }
  .pz-table,
  .pz-table tbody,
  .pz-table tr,
  .pz-table tbody th,
  .pz-table tbody td{ display:block; width:100%; }

  /* The header row is the only place the time ranges are written,
     so it stays — reflowed as a legend above the cards. */
  .pz-table thead{ display:block; }
  .pz-table thead tr{
    display:grid;
    gap:8px;
    padding:16px 18px;
    border-radius:var(--radius-m);
    background:var(--green-900);
  }
  .pz-table thead th{
    padding:0;
    background:none;
    border:0;
    font-size:.74rem;
  }
  .pz-table thead th:first-child{
    padding-bottom:8px;
    border-bottom:1px solid rgba(255,255,255,.18);
  }
  .pz-table thead th span{ display:inline; margin:0 0 0 6px; }

  .pz-table tbody tr{
    margin-top:14px;
    border:1px solid var(--line-200);
    border-radius:var(--radius-m);
    background:var(--paper-000);
    box-shadow:var(--shadow-card);
    overflow:hidden;
  }
  .pz-table tbody tr:nth-child(even) th,
  .pz-table tbody tr:nth-child(even) td{ background:none; }

  .pz-table tbody th{
    padding:14px 16px;
    border-top:0;
    border-bottom:1px solid var(--line-200);
    background:var(--green-050);
    font-size:.97rem;
  }
  .pz-table tbody td{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:16px;
    padding:11px 16px;
    border-top:0;
  }
  .pz-table tbody td + td{ border-top:1px solid var(--line-100); }

  /* The label comes from the attribute already in the markup. */
  .pz-table tbody td::before{
    content:attr(data-label);
    font-weight:600;
    font-size:.86rem;
    letter-spacing:.01em;
    color:var(--ink-500);
    text-transform:none;
    white-space:normal;
  }
}


/* ============================================================
   3.3 INCLUDED / NOT INCLUDED
============================================================ */
.pz-split{
  display:grid;
  gap:var(--space-m);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
}

.pz-card{
  padding:clamp(24px,3vw,34px) clamp(20px,2.5vw,30px);
  border:1px solid var(--line-200);
  border-radius:var(--radius-m);
  background:var(--paper-000);
  box-shadow:var(--shadow-card);
}
.pz-card h3{
  margin:0 0 16px;
  font-size:clamp(1.02rem,.98rem + .3vw,1.18rem);
  font-weight:700;
  line-height:1.3;
  color:var(--green-900);
}
.pz-card p{
  margin:0;
  font-size:.97rem;
  line-height:1.7;
  color:var(--ink-700);
}

.pz-card--yes{ border-top:4px solid var(--green-700); }
.pz-card--no{ border-top:4px solid var(--amber-500); }

.pz-list{
  display:grid;
  gap:11px;
  margin:0;
  padding:0;
  font-size:.97rem;
  line-height:1.6;
  color:var(--ink-700);
}
.pz-list li{ position:relative; padding-left:28px; }
.pz-list li::before{
  content:"";
  position:absolute;
  left:0; top:.34em;
  width:16px; height:16px;
  border-radius:50%;
  flex-shrink:0;
}
.pz-card--yes .pz-list li::before{
  background:var(--green-100);
  box-shadow:inset 0 0 0 1px var(--green-500);
}
.pz-card--no .pz-list li::before{
  background:var(--amber-050);
  box-shadow:inset 0 0 0 1px var(--amber-400);
}


/* ============================================================
   3.4 FACTORS
============================================================ */
.pz-grid{
  --col-min:260px; --gap:var(--space-m); --cols-max:3;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(
    auto-fit,
    minmax(max(min(var(--col-min),100%),
               (100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
  );
}

.pz-factor{
  padding:clamp(22px,2.6vw,28px) clamp(20px,2.4vw,26px);
  border:1px solid var(--line-200);
  border-left:3px solid var(--green-700);
  border-radius:var(--radius-s);
  background:var(--paper-000);
}
.pz-factor h3{
  margin:0 0 10px;
  font-size:1.02rem;
  font-weight:700;
  line-height:1.3;
  color:var(--green-900);
}
.pz-factor p{
  margin:0;
  font-size:.94rem;
  line-height:1.65;
  color:var(--ink-700);
}


/* ============================================================
   3.5 STEPS
============================================================ */
.pz-steps{
  --col-min:240px; --gap:var(--space-m); --cols-max:4;
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(
    auto-fit,
    minmax(max(min(var(--col-min),100%),
               (100% - (var(--gap) * (var(--cols-max) - 1))) / var(--cols-max)),1fr)
  );
  margin:0; padding:0;
}

.pz-step{
  position:relative;
  padding:clamp(24px,3vw,30px) clamp(20px,2.4vw,26px);
  border-radius:var(--radius-m);
  background:var(--paper-000);
  box-shadow:var(--shadow-card);
}
.pz-step__num{
  display:grid;
  place-items:center;
  width:40px; height:40px;
  margin-bottom:16px;
  border-radius:50%;
  background:var(--green-900);
  color:var(--paper-000);
  font-family:var(--font-display);
  font-weight:800;
  font-size:1rem;
  line-height:1;
}
.pz-step h3{
  margin:0 0 10px;
  font-size:1.02rem;
  font-weight:700;
  line-height:1.3;
  color:var(--green-900);
}
.pz-step p{
  margin:0;
  font-size:.94rem;
  line-height:1.65;
  color:var(--ink-700);
}


/* ============================================================
   3.6 CLOSING CTA COPY
   .cta-band itself is global.css; this only lets the band hold a
   heading plus a line of copy instead of a single lead.
============================================================ */
.pz-cta-copy{ flex:1 1 min(100%,520px); }
.pz-cta-copy h2:where(:not(.h1-look)){
  margin:0 0 8px;
  color:#fff;
  font-size:clamp(1.25rem,1.05rem + .9vw,1.75rem);
  line-height:1.15;
  letter-spacing:-.015em;
}
.pz-cta-copy p{
  margin:0;
  font-size:.98rem;
  line-height:1.6;
  color:rgba(255,255,255,.78);
}