/* Westmark Assurance: the licence page.
   ==================================================================
   This is the one page on the site that is allowed to be loud. It
   keeps the Westmark lock-up, the Outfit headings and the graphite,
   and adds a bright blue so the page converts rather than merely
   informs. It loads after site.css and only ever adds to it, so
   nothing here changes any other page.

   The bright blue is #1A46D8. It measures 7.2 to 1 against white, so
   unlike the gold it is safe as text, as a button and as a rule on a
   light background.

   The bright cyan is #5CE1FF. It measures 12.1 to 1 on graphite and
   1.4 to 1 on white, so it follows the same rule as the gold: it
   appears on graphite and never on a light background.

   To change the accent, edit --pop and --pop-tint below. Keep any
   replacement above 4.5 to 1 against white or the buttons stop being
   readable.
   ================================================================== */

:root {
  --pop: #1A46D8;
  --pop-dark: #123AB8;
  --pop-tint: #EEF2FE;
  --pop-tint-2: #DCE4FD;
  --spark: #5CE1FF;
}

/* ---- Loud hero ---- */
.pop-hero { background: var(--pop-tint); border-bottom: 1px solid var(--pop-tint-2); padding: 74px 0 70px; }
.pop-hero .kick { display: inline-flex; align-items: center; gap: 9px; background: var(--pop); color: #fff; font-family: var(--head); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; padding: 8px 15px; border-radius: 100px; margin: 0 0 24px; }
.pop-hero h1 { font-size: clamp(38px, 5.4vw, 62px); line-height: 1.03; letter-spacing: -0.028em; max-width: 17ch; margin: 0 0 22px; }
.pop-hero h1 em { font-style: normal; color: var(--pop); }
.pop-hero .lede { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--steel); max-width: 60ch; margin: 0; }
.pop-hero .btns { margin-top: 32px; }
.pop-hero .reassure { margin: 20px 0 0; font-size: 15px; color: var(--mute); }

.btn.pop { background: var(--pop); color: #fff; font-weight: 700; }
.btn.pop:hover { background: var(--pop-dark); }
.btn.popline { background: #fff; border-color: var(--pop); color: var(--pop); font-weight: 700; }
.btn.popline:hover { background: var(--pop-tint); }
.btn.big { padding: 19px 32px; font-size: 18px; }

/* ---- Problem tiles ---- */
.pain { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 720px) { .pain { grid-template-columns: minmax(0, 1fr); } }
.pain div { background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--pop); border-radius: 12px; padding: 24px 26px; box-shadow: var(--shadow); }
.pain h3 { font-size: 18px; margin: 0 0 8px; }
.pain p { margin: 0; color: var(--steel); font-size: 15.5px; }

/* ---- Big numbers on graphite ---- */
.numbers { background: var(--graphite); border-radius: 18px; padding: 44px; }
.numbers .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
@media (max-width: 900px) { .numbers { padding: 32px; } .numbers .row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; } }
@media (max-width: 480px) { .numbers .row { grid-template-columns: minmax(0, 1fr); } }
.numbers b { display: block; font-family: var(--head); font-weight: 700; font-size: 46px; line-height: 1; letter-spacing: -0.03em; color: var(--spark); margin-bottom: 10px; }
.numbers span { display: block; color: #C9CCD1; font-size: 15px; line-height: 1.45; }
.numbers h2 { color: var(--offwhite); margin: 0 0 26px; }

/* ---- Included list ---- */
.included { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 34px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 760px) { .included { grid-template-columns: minmax(0, 1fr); } }
.included li { position: relative; padding-left: 34px; font-size: 16.5px; line-height: 1.5; }
.included li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--pop); }
.included li::after { content: ""; position: absolute; left: 7px; top: 9px; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.included b { display: block; font-family: var(--head); font-weight: 700; }
.included span { color: var(--steel); font-size: 15px; }

/* ---- Side by side comparison ---- */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
@media (max-width: 820px) { .versus { grid-template-columns: minmax(0, 1fr); } }
.versus > div { border: 1px solid var(--rule); border-radius: 16px; padding: 30px; background: var(--white); box-shadow: var(--shadow); }
.versus > div.lead { border: 2px solid var(--pop); box-shadow: 0 14px 34px rgba(26,70,216,.14); }
.versus .flag { display: inline-block; background: var(--pop); color: #fff; font-family: var(--head); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 100px; margin-bottom: 16px; }
.versus h3 { font-size: 22px; margin: 0 0 10px; }
.versus .who { font-family: var(--head); font-weight: 500; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); margin: 0 0 18px; }
.versus ul { padding-left: 20px; margin: 0 0 22px; }
.versus li { margin-bottom: 8px; color: var(--steel); }
.versus .btn { width: 100%; }

/* ---- Bands ---- */
.bands { width: 100%; border-collapse: collapse; }
.bands th, .bands td { text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--rule); }
.bands thead th { background: var(--pop-tint); font-family: var(--head); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--pop); }
.bands tbody tr:last-child td { border-bottom: 0; }
.bands td:first-child { font-family: var(--head); font-weight: 700; white-space: nowrap; }

/* ---- Objections ---- */
.qa { border-top: 1px solid var(--rule); padding: 22px 0; }
.qa:last-of-type { border-bottom: 1px solid var(--rule); }
.qa h3 { font-size: 18px; margin: 0 0 8px; }
.qa p { margin: 0; color: var(--steel); }

/* ---- Closing call to action ---- */
.close-cta { background: var(--pop); border-radius: 20px; padding: 54px; text-align: center; }
@media (max-width: 700px) { .close-cta { padding: 36px 24px; } }
.close-cta h2 { color: #fff; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -0.025em; margin: 0 auto 16px; max-width: 20ch; }
.close-cta p { color: #DDE4FE; font-size: 18px; margin: 0 auto 30px; max-width: 56ch; }
.close-cta .btns { justify-content: center; margin: 0; }
.close-cta .btn.solid { background: #fff; color: var(--pop); font-weight: 700; }
.close-cta .btn.solid:hover { background: var(--pop-tint); }
.close-cta .btn.hollow { border-color: rgba(255,255,255,.55); color: #fff; }
.close-cta .btn.hollow:hover { background: rgba(255,255,255,.12); }
.close-cta .small { color: #C6D1FB; font-size: 14.5px; margin: 24px auto 0; }

/* What to tell us in the first email */
.tellus { background: var(--white); border: 1px solid var(--rule); border-left: 4px solid var(--pop); border-radius: 14px; padding: 30px 34px; max-width: 760px; margin: 0 auto; }
@media (max-width: 700px) { .tellus { padding: 24px 22px; } }
.tellus h2 { font-size: clamp(21px, 2.4vw, 26px); letter-spacing: -0.02em; margin: 0 0 16px; }
.tellus ul { list-style: none; padding: 0; margin: 0 0 18px; }
.tellus li { position: relative; padding: 8px 0 8px 26px; border-top: 1px solid var(--rule); font-size: 16px; color: var(--steel); }
.tellus li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--pop); }
.tellus > p { font-size: 15.5px; color: var(--mute); margin: 0; }
.bands td:nth-child(3) { white-space: nowrap; font-family: var(--head); font-weight: 700; color: var(--ink); }

/* Second tier pill, graphite rather than the pop colour. Was an inline
   style attribute, which the site's Content-Security-Policy discards. */
.versus .flag.alt { background: var(--graphite); }