/* Clear Vision Daily — bridge pages. Colour-blocked sections, sans headings, serif body. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@700;800&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&display=swap");

:root{
  --paper:#ffffff;
  --blue:#e7eefb;
  --blue-deep:#dbe6f9;
  --cream:#fdf8ee;
  --amber:#f5ac3c;
  --navy:#101828;
  --ink:#0f1a3d;
  --ink-2:#37415a;
  --ink-3:#6a7285;
  --rule:#dfe4ec;
  --gold:#ffd21e;
  --gold-dk:#f0c000;
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  --serif:"Source Serif 4",Georgia,"Iowan Old Style",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:19px/1.65 var(--serif);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:20;background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.nav-in{
  max-width:1140px;margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:20px;
}
.brand{
  font:800 20px/1 var(--sans);letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;margin-right:auto;
}
.nav-links{display:flex;gap:22px}
.nav-links a{
  font:600 15px/1 var(--sans);color:var(--ink-2);text-decoration:none;
}
.nav-links a:hover{color:var(--ink)}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--gold);color:var(--ink);
  font:800 16px/1 var(--sans);letter-spacing:-.01em;
  padding:15px 26px;border-radius:999px;text-decoration:none;
  white-space:nowrap;
}
.btn:hover{background:var(--gold-dk)}
.btn-sm{padding:11px 18px;font-size:14.5px}
.btn-dark{background:var(--navy);color:#fff}
.btn-dark:hover{background:#000}
.btn-note{
  margin:14px 0 0;font:15px/1.45 var(--sans);color:var(--ink-3);
}

/* ---------- bands ---------- */
.band{padding:64px 22px}
.band-blue{background:var(--blue)}
.band-cream{background:var(--cream)}
.band-amber{background:var(--amber)}
.band-white{background:var(--paper)}
.in{max-width:1140px;margin:0 auto}
.col{max-width:660px;margin:0 auto}

.kicker{
  font:800 13px/1.3 var(--sans);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 14px;
}
.band-amber .kicker{color:#7a4c05}

h1{
  font:800 clamp(34px,5.2vw,54px)/1.06 var(--sans);
  letter-spacing:-.035em;margin:0 0 20px;
}
h2{
  font:800 clamp(27px,3.4vw,38px)/1.14 var(--sans);
  letter-spacing:-.03em;margin:0 0 18px;
}
h3{font:800 21px/1.25 var(--sans);letter-spacing:-.02em;margin:0 0 8px}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:1.04fr .96fr;gap:52px;align-items:center}
.hero .dek{
  font:italic 21px/1.5 var(--serif);color:var(--ink-2);margin:0 0 26px;
}
.hero-fig{margin:0}
.hero-fig img{width:100%;border-radius:14px;box-shadow:0 18px 40px rgba(15,26,61,.13)}
.hero-fig figcaption{
  font:15px/1.4 var(--sans);color:var(--ink-3);margin-top:12px;
}
.byline{display:flex;align-items:center;gap:13px;margin:0 0 26px}
.byline .avatar{
  width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:800 15px/1 var(--sans);flex:0 0 auto;
}
.byline .who{font:15px/1.4 var(--sans);color:var(--ink-2)}
.byline .who strong{display:block;color:var(--ink);font-weight:800}
.byline .who span{display:block;color:var(--ink-3);font-size:14px}

/* ---------- prose ---------- */
.prose p{margin:0 0 20px;color:var(--ink-2)}
.prose p strong{color:var(--ink);font-weight:600}
/* drop cap via ::first-letter so no character can be split out of the text */
.prose .lede-p::first-letter{
  float:left;font:800 62px/.82 var(--sans);color:var(--amber);
  margin:6px 12px 0 0;
}
.big{
  font:600 25px/1.42 var(--serif);color:var(--ink);margin:0 0 22px;
}
.pull{
  margin:36px 0;padding:26px 0;
  border-top:1px solid var(--amber);border-bottom:1px solid var(--amber);
  font:italic 600 28px/1.32 var(--serif);text-align:center;color:var(--ink);
}
.said{
  margin:30px 0 0;padding:2px 0 2px 20px;border-left:3px solid var(--amber);
  font:italic 20px/1.5 var(--serif);color:var(--ink-2);
}
.shot{margin:32px 0}
.shot img{width:100%;border-radius:12px}
.shot figcaption{font:15px/1.45 var(--sans);color:var(--ink-3);margin-top:11px}

.failed{margin:10px 0 24px;padding:0;list-style:none}
.failed li{
  border-top:1px solid var(--rule);padding:15px 0;
  font:16.5px/1.55 var(--sans);color:var(--ink-2);
}
.failed li:first-child{border-top:none}
.failed li strong{color:var(--ink);font-weight:800}

/* ---------- two-up: image beside numbered points ---------- */
.twoup{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center;margin-top:36px}
.twoup img{border-radius:12px}
.pts{margin:0;padding:0;list-style:none}
.pts li{
  display:grid;grid-template-columns:44px 1fr;gap:6px;align-items:baseline;
  border-top:1px solid var(--rule);padding:17px 0;
}
.pts li:first-child{border-top:none;padding-top:0}
.pts .n{font:800 26px/1 var(--sans);color:var(--amber)}
.pts p{margin:0;font:17px/1.5 var(--serif);color:var(--ink-2)}

/* ---------- objection list ---------- */
.checks{margin:26px 0 0;padding:0;list-style:none}
.checks li{
  display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;
  margin-bottom:20px;
}
.checks svg{width:22px;height:22px;margin-top:4px}
.checks p{margin:0;font:17.5px/1.55 var(--serif);color:var(--ink-2)}
.checks strong{color:var(--ink);font-weight:600}

/* ---------- closing ---------- */
.close{text-align:center;max-width:820px;margin:0 auto}
.close h2{font-size:clamp(30px,4.4vw,46px);margin-bottom:28px}

/* ---------- footer ---------- */
.foot{background:var(--navy);color:#9aa4b8;padding:44px 22px}
.foot-top{
  max-width:1140px;margin:0 auto 26px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.foot-top .brand{color:#fff}
.foot-in{max-width:1140px;margin:0 auto;font:15px/1.6 var(--sans)}
.foot-in p{margin:0 0 12px;max-width:78ch}
.foot-in strong{color:#dfe4ec;font-weight:800}
.foot-in a{color:#c3cddd}

@media(max-width:880px){
  body{font-size:18px}
  .band{padding:44px 20px}
  .hero,.twoup{grid-template-columns:1fr;gap:30px}
  .nav-links{display:none}
  .pull{font-size:23px}
  .big{font-size:22px}
}

/* ---------- numbered listicle items ---------- */
.numbered{
  display:grid;grid-template-columns:64px 1fr;gap:10px;align-items:start;
  border-top:1px solid var(--rule);padding:26px 0;
}
.numbered:first-of-type{border-top:none}
.big-n{
  font:800 40px/1 var(--sans);color:var(--amber);letter-spacing:-.04em;
}
.numbered h3{margin:0 0 8px}
.numbered p{margin:0;color:var(--ink-2)}

/* ---------- cta wrapper ---------- */
.cta-wrap{margin:34px 0 8px}
.band-amber .cta-wrap,.close .cta-wrap{margin-top:6px}

/* ---------- site index ---------- */
.home-list{list-style:none;margin:26px 0 0;padding:0}
.home-list li{border-top:1px solid var(--rule);padding:20px 0}
.home-list a{
  font:800 21px/1.3 var(--sans);letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;display:block;
}
.home-list a:hover{color:#1d4ed8}
.home-list span{
  display:block;margin-top:6px;font:15px/1.4 var(--sans);color:var(--ink-3);
}