/* Phone call cards - 1080 wide, ONE column, ONE accent.
   The images this replaces were 1672 wide, two and three columns, and a different
   accent colour on every single one. That is why they read as chaotic on a phone.
   Everything here is sized for a 1080px phone screen at 1:1, so nothing needs a pinch. */

@font-face{font-family:Bricolage;src:url("bricolage-latin.woff2") format("woff2");font-weight:200 800;font-display:block}
@font-face{font-family:Jakarta;src:url("jakarta-latin.woff2") format("woff2");font-weight:200 800;font-display:block}

:root{
  --navy:#14213D; --deep:#0C1730; --brand:#2E5E96; --bright:#3B7BC4;
  --steel:#5689B6; --paper:#F5F6F8; --muted:#64748B; --line:#E2E6EC;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#fff}
body{font-family:Jakarta,system-ui,sans-serif;color:var(--navy)}

.page{width:1080px;background:#fff;padding:54px 56px 40px;display:flex;flex-direction:column}

.hd{display:flex;align-items:flex-start;gap:20px}
.badge{flex:0 0 auto;width:68px;height:68px;border-radius:17px;
  background:linear-gradient(135deg,var(--bright),var(--brand));color:#fff;
  font-family:Bricolage,serif;font-weight:800;font-size:35px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 20px rgba(20,33,61,.18)}
.ht{flex:1;padding-top:2px}
.ht h1{font-family:Bricolage,serif;font-weight:800;font-size:46px;line-height:1.05;
  letter-spacing:-.015em;text-transform:uppercase}
.of{margin-top:9px;font-size:19px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel)}
.goal{margin-top:18px;font-size:24px;line-height:1.35;color:var(--muted)}
.legend{margin-top:12px;font-size:19px;color:var(--steel)}
.legend b{color:var(--brand);font-weight:800}
.hrule{height:3px;background:var(--line);border-radius:2px;margin:24px 0 26px}

.body{display:flex;flex-direction:column;gap:15px}

/* a line she says out loud - the blue bar is the whole signal */
.you{background:var(--paper);border-left:7px solid var(--brand);border-radius:0 14px 14px 0;
  padding:21px 26px;font-size:32px;line-height:1.42;color:var(--navy)}

/* a line the roofer says - never read this one out */
.him{padding:9px 26px 9px 30px;border-left:7px solid var(--line);
  font-size:26px;line-height:1.4;color:var(--muted);font-style:italic}
.him .who{display:inline-block;font-style:normal;font-weight:800;font-size:16px;
  letter-spacing:.14em;color:#fff;background:var(--steel);
  border-radius:6px;padding:3px 9px;margin-right:12px;vertical-align:2px}

.lbl{font-size:20px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);padding-top:12px}
.div{height:1px;background:var(--line);margin:8px 0}

.ft{padding-top:28px;margin-top:26px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:18px;color:var(--muted)}
.ft .src{font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}

/* the phone cards carry the legend under the header, so the footer copy is not used */
.ft .flg{display:none !important}