/* Portfolio Stress Test landing pages (26yusduruv_neg / 26yusduruv_hoyor).
   The only stylesheet on these pages besides the Bootstrap grid. The template sheets are
   not loaded, so nothing here has to out-shout them; the opt-in form contract (.form
   wrapper, field names, conv.js) is untouched and is styled below.

   One type system for the whole page. Every element takes its family, size, weight and
   line-height from the tokens below - nothing declares its own font. */

.st-page {
  /* palette: the template's navy, red and gold */
  --st-navy: #00143d;
  --st-navy-2: #0b2560;
  --st-red: #b51700;
  --st-red-dark: #961300;
  --st-green: #5cb85c;          /* the reference page's call to action */
  --st-green-dark: #4a9d4a;
  --st-gold: #b8860b;
  --st-gold-bright: #e6c25a;
  --st-gold-soft: #fbf5e3;
  --st-ink: #151515;
  --st-muted: #5f6670;
  --st-line: #e1e5ea;
  --st-bg: #f6f7f9;

  /* type */
  /* Mulish, one family for the whole page. It is a humanist sans with a wide weight
     range, so headlines and body separate by weight rather than by a second face.
     --st-font-head stays a token in case the headlines ever take a face of their own. */
  --st-font: "Mulish", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --st-font-head: var(--st-font);
  --st-fs-display: clamp(38px, 5.6vw, 72px);   /* h1: the kicker */
  --st-fs-h2: clamp(24px, 2.7vw, 32px);         /* section titles, sub-headline */
  --st-fs-h3: 17px;                             /* step titles */
  --st-fs-stat: clamp(24px, 2.6vw, 30px);       /* the three figures */
  --st-fs-body: 19px;
  --st-fs-small: 15px;
  --st-fs-label: 12px;
  --st-lh-tight: 1.15;
  --st-lh-heading: 1.3;
  --st-lh-body: 1.65;
  --st-track: 0.14em;                           /* uppercase labels */

  /* spacing rhythm */
  --st-s1: 8px;
  --st-s2: 12px;
  --st-s3: 16px;
  --st-s4: 24px;
  --st-s5: 32px;
  --st-s6: 48px;
  --st-radius: 8px;
  --st-shadow: 0 6px 18px rgba(0, 20, 61, 0.06);
  --st-shadow-lg: 0 14px 40px rgba(0, 20, 61, 0.14);

  font-family: var(--st-font);
  font-size: var(--st-fs-body);
  line-height: var(--st-lh-body);
  color: var(--st-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.st-page > .st-article {
  flex: 1 0 auto;
}

/* Element defaults. Bootstrap reboot styles bare elements at (0,0,1); these sit at
   (0,1,0) so they win, while the element list stays inside :where() so every component
   rule below still overrides them on a plain class, with no !important anywhere. */
.st-page :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, label, span, strong, em, input, button) {
  font-family: var(--st-font);
}
.st-page :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: var(--st-navy);
  line-height: var(--st-lh-heading);
}
/* Headlines. One family across the page now, so this block is what separates them from
   body copy by weight; it is also the single hook if they ever take a second face. */
.st-page .st-kicker,
.st-page .st-headline,
.st-page .st-sub,
.st-page .st-steps-title,
.st-page .st-step h3,
.st-page .form-title,
.st-page .st-stat-value {
  font-family: var(--st-font-head);
}
.st-page :where(p) {
  margin: 0 0 var(--st-s3);
}
.st-page :where(a) {
  color: var(--st-navy);
}

/* uppercase label style, used for every small caption on the page */
.st-label {
  font-size: var(--st-fs-label);
  font-weight: 700;
  letter-spacing: var(--st-track);
  text-transform: uppercase;
  line-height: 1.2;
}

/* ---------- wrapper: real gutters, independent of the template's .container ---------- */
.st-wrap {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 var(--st-s4);
  box-sizing: border-box;
}

/* ---------- header ---------- */
.st-page .st-header {
  background: var(--st-navy);
  border-top: 4px solid var(--st-gold);
  box-shadow: none;
}
.st-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--st-s3);
  min-height: 84px;
  padding-top: var(--st-s2);
  padding-bottom: var(--st-s2);
}
.st-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
/* The site's own logo file. It is a white mark with dark outline detail, drawn for a dark
   ground, so it needs no recolouring here. Displayed at less than half its native height,
   which keeps it sharp on high-density screens. */
.st-logo img {
  display: block;
  height: 46px;
  width: auto;
  max-height: none;
}
.st-page .st-phone,
.st-page .st-phone:hover,
.st-page .st-phone:focus {
  text-align: right;
  text-decoration: none;
  color: #fff;
  line-height: 1.2;
}
.st-page .st-phone-number {
  color: #fff;
}
.st-page .st-phone:hover .st-phone-number {
  color: var(--st-gold-bright);
}
.st-phone-label {
  display: block;
  font-size: var(--st-fs-label);
  font-weight: 700;
  letter-spacing: var(--st-track);
  text-transform: uppercase;
  color: var(--st-gold-bright);
  margin-bottom: 2px;
}
.st-phone-number {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.st-trustline {
  background: var(--st-navy-2);
  color: #d9def0;
  font-size: var(--st-fs-label);
  font-weight: 700;
  letter-spacing: var(--st-track);
  text-transform: uppercase;
  text-align: center;
  padding: 8px var(--st-s2);
  line-height: 1.4;
}
.st-trustline .st-stars {
  color: var(--st-gold-bright);
  letter-spacing: 0.1em;
  margin-right: 6px;
}
.st-trustline span + span::before {
  content: "\00b7";
  margin: 0 10px;
  color: #7f8bb0;
}

/* ---------- hero ---------- */
.st-hero {
  background: linear-gradient(180deg, #fff 0%, var(--st-bg) 100%);
  border-bottom: 1px solid var(--st-line);
  padding: var(--st-s6) 0;
}
/* The title reads across the whole page rather than down one column: it is the claim the
   page makes, and the two columns below it are the evidence and the form. */
.st-hero-head {
  max-width: 1000px;
  margin: 0 auto var(--st-s5);
  text-align: center;
}
.st-hero .row {
  margin-left: -12px;
  margin-right: -12px;
}
.st-hero .row > [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}
.st-kicker {
  font-size: var(--st-fs-display);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--st-red);
  margin-bottom: 0;
  text-wrap: balance;
}
.st-headline {
  font-size: var(--st-fs-h2);
  font-weight: 600;
  color: var(--st-navy);
  margin: var(--st-s2) 0 0;
}

/* The $100,000 comparison is the argument of the page, so it reads across the full width
   under the headline rather than down one column. Lifting it out of the copy also puts the
   heading below it level with the form, which is where the eye goes next. */
.st-compare-band {
  max-width: 1000px;
  margin: 0 auto var(--st-s5);
}
.st-compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--st-s2);
  margin-bottom: var(--st-s1);
}
.st-stat {
  background: #fff;
  border: 1px solid var(--st-line);
  border-top: 4px solid var(--st-gold);
  border-radius: var(--st-radius);
  padding: var(--st-s3) var(--st-s2) var(--st-s3);
  text-align: center;
  box-shadow: var(--st-shadow);
}
.st-stat.is-cash {
  border-top-color: #6f8a68;
}
.st-stat.is-silver {
  border-top-color: #8e98a3;
}
.st-stat-icon {
  display: block;
  width: 84px;
  height: 56px;
  margin: 0 auto var(--st-s1);
}
.st-stat-label {
  font-size: var(--st-fs-label);
  font-weight: 700;
  letter-spacing: var(--st-track);
  text-transform: uppercase;
  color: var(--st-muted);
  line-height: 1.2;
}
.st-stat-value {
  font-size: var(--st-fs-stat);
  font-weight: 800;
  line-height: var(--st-lh-tight);
  color: var(--st-gold);
  margin: 4px 0 var(--st-s1);
  font-variant-numeric: tabular-nums;
}
.st-stat.is-cash .st-stat-value {
  color: var(--st-red);
}
.st-stat.is-silver .st-stat-value {
  color: #5c6773;
}
.st-delta {
  display: inline-block;
  font-size: var(--st-fs-label);
  font-weight: 700;
  line-height: 1.2;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--st-gold-soft);
  color: #7a5a06;
}
.st-stat.is-cash .st-delta {
  background: #fbe9e6;
  color: var(--st-red-dark);
}
.st-stat.is-silver .st-delta {
  background: #eef1f4;
  color: #4d5866;
}
.st-compare-note {
  font-size: var(--st-fs-small);
  line-height: 1.5;
  color: var(--st-muted);
  text-align: center;
  margin-bottom: 0;
}

.st-sub {
  font-size: var(--st-fs-h2);
  font-weight: 800;
  margin: 0 0 var(--st-s3);
}
.st-lead-first {
  display: block;
  margin: 0 0 var(--st-s1);
}
.st-copy p,
.st-copy li {
  font-size: var(--st-fs-body);
  line-height: var(--st-lh-body);
  max-width: 56ch;
}
.st-copy p {
  margin-bottom: var(--st-s3);
}
.st-lead {
  font-size: var(--st-fs-body);
  font-weight: 700;
  color: var(--st-navy);
  margin: var(--st-s4) 0 var(--st-s2);
}
.st-checks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--st-s3);
}
.st-checks li {
  position: relative;
  padding-left: 34px;
  margin-bottom: var(--st-s3);
  line-height: 1.5;
}
.st-checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--st-gold);
  box-shadow: inset 0 0 0 5px #fff, 0 0 0 1px var(--st-gold);
}
.st-closer {
  font-weight: 700;
  color: var(--st-navy);
  margin: var(--st-s4) 0 0;
}

/* ---------- form card ---------- */
.st-page .content-box.hidden-form.form {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 0;
  background: #fff;
  border: 1px solid var(--st-line);
  border-radius: 10px;
  box-shadow: var(--st-shadow-lg);
  overflow: hidden;
}
.st-form-head {
  background: var(--st-navy);
  color: #fff;
  padding: var(--st-s3) var(--st-s4);
  text-align: center;
}
.st-form-eyebrow {
  font-size: var(--st-fs-label);
  font-weight: 700;
  letter-spacing: var(--st-track);
  text-transform: uppercase;
  color: var(--st-gold-bright);
  margin: 0 0 6px;
  line-height: 1.2;
}
.st-page .form-title {
  font-size: 19px;
  font-weight: 800;
  line-height: var(--st-lh-heading);
  color: #fff;
  margin: 0;
  text-align: center;
}
.st-form-body {
  padding: var(--st-s4) var(--st-s4) var(--st-s3);
}
.st-page .form-field {
  margin: 0 0 var(--st-s2);
}
.st-page .form-field label {
  display: block;
  font-size: var(--st-fs-label);
  font-weight: 700;
  letter-spacing: var(--st-track);
  text-transform: uppercase;
  color: var(--st-muted);
  margin: 0 0 6px;
  line-height: 1.2;
}
.st-page .form-field input {
  display: block;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #cfd5dc;
  border-radius: 6px;
  box-shadow: none;
  font-size: 16px;
  color: var(--st-ink);
  background: #fff;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.st-page .form-field input::placeholder {
  color: #9aa3ad;
}
.st-page .form-field input:focus {
  border-color: var(--st-navy);
  box-shadow: 0 0 0 3px rgba(0, 20, 61, 0.15);
}
.st-page .submit {
  margin-top: var(--st-s3);
}
.st-page .submit .cta {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0;
  box-sizing: border-box;
  border: none;
  border-radius: 6px;
  background: var(--st-red);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(181, 23, 0, 0.28);
  appearance: none;
  -webkit-appearance: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.st-page .submit .cta:hover,
.st-page .submit .cta:focus {
  background: var(--st-red-dark);
  box-shadow: 0 6px 18px rgba(181, 23, 0, 0.35);
}
.st-page .submit .cta:focus-visible {
  outline: 3px solid rgba(0, 20, 61, 0.35);
  outline-offset: 2px;
}
.st-form-meta {
  display: flex;
  justify-content: center;
  gap: var(--st-s2) var(--st-s3);
  flex-wrap: wrap;
  font-size: var(--st-fs-label);
  font-weight: 600;
  color: var(--st-muted);
  margin: var(--st-s3) 0 0;
  line-height: 1.4;
}
.st-form-meta span::before {
  content: "\2713";
  color: #2e7d4f;
  margin-right: 5px;
}
.st-bonus {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--st-gold-soft);
  border: 1px solid #ecdcae;
  border-radius: 6px;
  padding: 10px var(--st-s2);
  margin: var(--st-s4) 0 0;
  font-size: var(--st-fs-small);
  line-height: 1.5;
  color: #5a4306;
  text-align: left;
}
.st-bonus b {
  color: #3f2f04;
}
.st-bonus-icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--st-gold);
  color: #fff;
  font-size: var(--st-fs-small);
  font-weight: 800;
  line-height: 26px;
  text-align: center;
}
.st-page .privacy-link {
  display: block;
  text-align: center;
  font-size: var(--st-fs-label);
  color: var(--st-muted);
  margin: var(--st-s2) 0 0;
  line-height: 1.4;
}

/* ---------- how it works ---------- */
.st-steps {
  padding: var(--st-s6) 0 var(--st-s3);
}
.st-steps-title {
  font-size: var(--st-fs-h2);
  font-weight: 800;
  text-align: center;
  margin-bottom: var(--st-s4);
}
.st-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--st-s3);
}
.st-step {
  background: #fff;
  border: 1px solid var(--st-line);
  border-radius: var(--st-radius);
  padding: var(--st-s4) var(--st-s3) var(--st-s3);
  box-shadow: var(--st-shadow);
}
.st-step-num {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--st-navy);
  color: #fff;
  font-size: var(--st-fs-small);
  font-weight: 800;
  line-height: 32px;
  text-align: center;
  margin-bottom: var(--st-s2);
}
.st-step h3 {
  font-size: var(--st-fs-h3);
  font-weight: 700;
  margin-bottom: 6px;
}
.st-step p {
  font-size: var(--st-fs-small);
  line-height: 1.55;
  color: var(--st-muted);
  margin: 0;
}

/* ---------- trust band ---------- */
.st-trust {
  border-top: 1px solid var(--st-line);
  padding: var(--st-s4) 0 var(--st-s5);
  text-align: center;
}
.st-trust-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--st-s2) var(--st-s3);
  max-width: 1040px;
  margin: 0 auto;
  font-size: var(--st-fs-label);
  font-weight: 700;
  letter-spacing: var(--st-track);
  text-transform: uppercase;
  color: var(--st-navy);
  line-height: 1.4;
}
.st-trust-items span {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  text-align: center;
  gap: 8px;
}
.st-trust-items span::before {
  content: "\25C6";
  color: var(--st-gold);
  font-size: 10px;
  line-height: 1.7;
  flex: 0 0 auto;
}
.st-disclaimer {
  font-size: var(--st-fs-label);
  line-height: 1.6;
  color: var(--st-muted);
  max-width: 760px;
  margin: var(--st-s4) auto 0;
  text-align: center;
}

/* ---------- footer: same navy and gold rule as the header ---------- */
.st-page footer.st-footer {
  position: static;
  background: var(--st-navy);
  border-top: 4px solid var(--st-gold);
  color: #d9def0;
  /* auto top margin, not 0: the body is a column of full height, so this pushes the
     footer to the bottom of the window on a page too short to fill it, while still
     letting it scroll away normally on a page that is long enough. */
  margin: auto 0 0;
  padding: 0;
}
/* The footer is the copyright bar alone: the brand block that used to sit above it
   repeated the header, and the page already carries the phone in three other places. */
.st-footer-bar {
  background: var(--st-navy-2);
}
.st-footer-bar-inner {
  display: flex;
  justify-content: space-between;
  gap: var(--st-s3);
  flex-wrap: wrap;
  padding-top: var(--st-s3);
  padding-bottom: var(--st-s3);
  font-size: var(--st-fs-label);
  line-height: 1.5;
  color: #aeb8d6;
}
.st-footer-bar-inner a {
  color: #fff;
  text-decoration: none;
}
.st-footer-bar-inner a:hover {
  text-decoration: underline;
}

/* ---------- sticky mobile CTA ---------- */
.st-sticky {
  display: none;
}

/* ---------- layout ---------- */
@media (min-width: 992px) {
  .st-hero .row {
    align-items: flex-start;
  }
  .st-copy {
    padding-right: var(--st-s5);
  }
  .st-form-col {
    display: flex;
    justify-content: center;
  }
}
@media (max-width: 991.98px) {
  .st-trust-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-hero {
    padding: var(--st-s5) 0;
  }
  .st-hero-head {
    margin-bottom: var(--st-s4);
  }
  .st-form-col {
    margin-top: var(--st-s5);
  }
  .st-sticky {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 10px var(--st-s3) calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--st-line);
    box-shadow: 0 -8px 24px rgba(0, 20, 61, 0.12);
  }
  .st-sticky a {
    display: block;
    text-align: center;
    background: var(--st-red);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 14px;
    border-radius: 6px;
    text-decoration: none;
  }
  .st-page footer.st-footer {
    padding-bottom: 76px;
  }
}
@media (max-width: 575.98px) {
  .st-wrap {
    padding: 0 var(--st-s3);
  }
  .st-header-inner {
    min-height: 68px;
  }
  .st-logo img {
    height: 36px;
  }
  .st-phone-label {
    display: none;
  }
  .st-phone-number {
    font-size: 16px;
  }
  .st-compare {
    grid-template-columns: 1fr;
    gap: var(--st-s1);
  }
  .st-stat {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    grid-template-areas: "icon label delta" "icon value delta";
    align-items: center;
    column-gap: var(--st-s2);
    text-align: left;
    padding: var(--st-s2) var(--st-s3);
  }
  .st-stat-icon {
    grid-area: icon;
    width: 64px;
    height: 44px;
    margin: 0;
  }
  .st-stat-label {
    grid-area: label;
  }
  .st-stat-value {
    grid-area: value;
    margin: 2px 0 0;
  }
  .st-delta {
    grid-area: delta;
  }
  .st-steps-grid {
    grid-template-columns: 1fr;
  }
  .st-trust-items {
    grid-template-columns: 1fr;
  }
  .st-trust-items span {
    justify-content: flex-start;
    text-align: left;
  }
  .st-page {
    --st-fs-body: 17px;
  }
  .st-footer-bar-inner {
    display: block;
  }
  .st-footer-bar-inner span {
    display: block;
    margin-bottom: 4px;
  }
}
/* ---------- classic article layout ----------
   26yusduruv_neg and _hoyor are laid out and styled the way 26tavarvanyus_bogino_har is:
   a plain white column with no card around it, the argument on the left with the offer
   cover beside it, and the opt-in below in that page's own form treatment. That page is
   live and is never touched; it is read as a reference only.

   What is NOT borrowed is its stylesheets. Type, colour and spacing stay on the tokens at
   the top of this file, so these pages are Mulish like the rest of the set rather than the
   Times New Roman and Helvetica at fixed pixel sizes that page ends up with. */
/* Unscoped on purpose: the _new pair runs the hero layout but carries the same words, so
   the pieces of copy the two share are styled once here rather than twice. */
.st-sub {
  text-transform: uppercase;
}
.st-sub-em {
  color: var(--st-red);
  white-space: nowrap;
}
.st-turn {
  text-align: center;
}
/* The question that leads into the form. On the hero layout it closes the copy column,
   where the form is already beside it. */
.st-question {
  font-size: var(--st-fs-h3);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--st-navy);
  margin: var(--st-s4) 0 0;
}

.st-article {
  background: #fff;
  padding: var(--st-s4) 0 var(--st-s6);
}
/* One measure for everything on the page. The headline block was centred across 900px
   while the copy sat in a 760px box inside it, so the copy started at an edge that lined
   up with nothing. 820px at 19px is about 62 characters, which is the measure anyway, so
   the container is the only width there is and nothing nests inside it. */
.st-classic {
  max-width: 890px;
  margin: 0 auto;
}
/* The header carries the logo alone, as the reference page does. */
.st-header-plain {
  justify-content: flex-start;
  min-height: 0;
}
.st-header-plain .st-logo img {
  height: 38px;
}

/* Headline block: centred, the red line then the darker sub-line. */
.st-article .st-kicker,
.st-article .st-headline,
.st-article .st-figures,
.st-article .st-turn {
  text-align: center;
}
.st-article .st-kicker {
  font-size: 60px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: var(--st-s3) 0 var(--st-s2);
}
.st-article .st-headline {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--st-s5);
}
/* What $100,000 became, as one line. Set in the body colour like the rest of the page:
   the figures carry the comparison, and colouring them per metal turned a plain statement
   into a chart. Weight does the work instead. */
.st-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--st-s1) var(--st-s3);
  font-size: clamp(15px, 1.7vw, 19px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--st-ink);
  margin: 0 auto var(--st-s3);
}
.st-fig b {
  font-weight: 900;
}
.st-fig-sep {
  color: #c9ced4;
  font-weight: 400;
}
.st-turn {
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--st-s5);
}

.st-article-row {
  margin-left: -12px;
  margin-right: -12px;
  align-items: flex-start;
}
.st-article-row > [class*="col-"] {
  padding-left: 12px;
  padding-right: 12px;
}
/* The list sits tighter. Most of that gap was the 16px between items rather than the
   line height, so both come down; the line height stops at 1.2 rather than 1 because a
   bullet that wraps at a narrower width would otherwise have its descenders touching the
   line under it. */
.st-article .st-checks li {
  line-height: 1.2;
  margin-bottom: var(--st-s1);
}

/* The argument runs the full width of the column, left aligned because that is where
   prose is read from. No inner max-width: the column is the measure.

   padding-right is reset because .st-copy still carries 32px of it above 992px, from when
   it was the left column of the old hero beside a sticky form. On this layout that pulled
   every paragraph 32px short of a right edge the headline above still reached, which is
   what made the block look inset. */
.st-article .st-copy {
  text-align: left;
  padding-right: 0;
}
.st-article .st-copy p,
.st-article .st-copy li {
  max-width: none;
}
/* Third step of the scale, and the opt-in question below is the same step: they are the
   same kind of thing, so they are the same size and weight. They were drifting apart
   because only one of them set a weight and the other took the browser default. */
.st-article .st-sub,
.st-article .st-optin-title {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: uppercase;
  margin: 0 0 var(--st-s4);
}
/* The caps come from CSS rather than from the markup, so the sentence is stored as words
   and a screen reader says it rather than spelling it out letter by letter. The size steps
   down for them: capitals are wider, and this has to stay one sentence rather than break
   into fragments. */
.st-article .st-sub {
  text-align: left;
  text-wrap: balance;
}
/* The turn stays red, and stays inside the sentence. */
.st-sub-em {
  color: var(--st-red);
  white-space: nowrap;
}

.st-figure {
  text-align: center;
}
.st-figure-img {
  display: block;
  width: 100%;
  max-width: 340px;
  height: auto;
  margin: 0 auto;
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0, 20, 61, 0.22);
  cursor: pointer;
}

/* The opt-in: its own block below the argument, with the cover on the left and the form
   on the right, which is the pairing the reference page closes on. Centred on each other
   rather than to their tops, because the two are different heights and a top-aligned
   cover leaves the form floating against nothing. */
.st-optin {
  margin: var(--st-s6) auto 0;
  text-align: center;
}
.st-optin-row {
  align-items: center;
}
.st-article .st-optin-title {
  text-align: center;
  text-wrap: balance;
  margin: 0 0 var(--st-s4);
}
/* The form is the reference's: a bordered light box, one centred title line, plain fields
   and a green uppercase button that fills the width. */
.st-article .content-box.hidden-form.form {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: var(--st-s4) var(--st-s3);
  background: #f7f7f7;
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  box-shadow: none;
  overflow: visible;
  text-align: center;
}
.st-article .form-title {
  font-size: 20px;
  font-weight: 800;
  line-height: var(--st-lh-heading);
  text-align: center;
  margin: 0 0 var(--st-s3);
}
.st-article .st-form-body {
  padding: 0;
}
.st-article .form-field {
  margin: 0 0 var(--st-s2);
}
.st-article .form-field input {
  height: 46px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  background: #fff;
  font-size: 17px;
  box-shadow: none;
}
.st-article .form-field input::placeholder {
  color: #9aa3ad;
}
.st-article .submit {
  margin-top: var(--st-s3);
}
.st-article .submit .cta {
  height: 54px;
  border-radius: 4px;
  background: var(--st-green);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  box-shadow: none;
}
.st-article .submit .cta:hover,
.st-article .submit .cta:focus {
  background: var(--st-green-dark);
  box-shadow: none;
}
.st-article .privacy-link {
  font-size: var(--st-fs-small);
  color: var(--st-muted);
  text-decoration: underline;
  margin-top: var(--st-s3);
}
.st-bonus-line {
  font-size: var(--st-fs-body);
  line-height: 1.5;
  text-align: center;
  margin: var(--st-s4) 0 var(--st-s1);
}
.st-terms-line {
  font-size: var(--st-fs-small);
  color: var(--st-muted);
  text-align: center;
  margin: 0;
}
.st-article .st-disclaimer {
  text-align: center;
  margin-top: var(--st-s6);
}

/* One ink for the whole page, the way the reference sets it. The headings, the lead lines,
   the closer, the form title and the links were all navy, which put a second near-black
   next to the real one and read as a mix rather than as a scheme. The red headline and the
   turn line are the only colour left.

   Scoped to .st-article on purpose - the _new pair shares this stylesheet and keeps its
   navy. */
.st-article :where(h1, h2, h3, h4, h5, h6),
.st-article .st-headline,
.st-article .st-sub,
.st-article .st-lead,
.st-article .st-closer,
.st-article .form-title,
.st-article a {
  color: var(--st-ink);
}
.st-article .st-kicker,
.st-article .st-sub .st-sub-em {
  color: var(--st-red);
}
.st-article .st-checks li::before {
  background: var(--st-ink);
  box-shadow: inset 0 0 0 5px #fff, 0 0 0 1px var(--st-ink);
  /* Centred on the first line rather than nudged with a fixed offset. The old top:6px was
     measured against the looser line height this list used to have, so tightening it left
     every marker sitting low. Half the difference between the line box and the marker
     keeps it centred whatever the size becomes. */
  top: calc((1.2em - 20px) / 2);
}

@media (max-width: 767.98px) {
  .st-article .st-kicker {
    font-size: 34px;
  }
  .st-article .st-headline {
    font-size: 24px;
  }
  /* Stacked, the cover is what the lead scrolls past to reach the form, so it keeps its
     place above it but takes less of the screen doing so. */
  .st-figure-img {
    max-width: 220px;
  }
  .st-optin {
    margin-top: var(--st-s5);
  }
  .st-optin-row > [class*="col-"] + [class*="col-"] {
    margin-top: var(--st-s4);
  }
  .st-figures {
    display: block;
    text-align: center;
  }
  .st-figures .st-fig {
    display: block;
  }
  .st-figures .st-fig-sep {
    display: none;
  }
}

/* ---------- compact variant: the form above the fold ----------
   Carried by the _new pages as a class on <body>. The header is one row, the hero and
   the comparison sit tighter and the type steps down a size, so on a laptop the form is
   on screen without scrolling. The article pages do not carry the class and are
   unchanged. Written last so it outranks the base rules at equal specificity. */
.st-page.st-compact {
  --st-fs-display: clamp(30px, 4vw, 46px);
  --st-fs-h2: clamp(20px, 2vw, 24px);
  --st-fs-stat: clamp(22px, 2.1vw, 26px);
  --st-fs-body: 16px;
  --st-fs-small: 13px;
  --st-lh-body: 1.5;
}
.st-compact .st-header-inner {
  min-height: 60px;
  padding-top: 6px;
  padding-bottom: 6px;
  gap: var(--st-s3);
}
.st-compact .st-logo img {
  height: 36px;
}
/* The trust line sits between the logo and the phone number instead of on a band of
   its own beneath them. */
.st-compact .st-header-inner .st-trustline {
  flex: 1 1 auto;
  background: transparent;
  padding: 0;
  font-size: 11px;
  line-height: 1.3;
}
.st-compact .st-phone-label {
  font-size: 10px;
  margin-bottom: 0;
}
.st-compact .st-phone-number {
  font-size: 18px;
}
.st-compact .st-hero {
  padding: var(--st-s3) 0 var(--st-s4);
}
.st-compact .st-hero-head {
  margin-bottom: var(--st-s3);
}
.st-compact .st-headline {
  margin-top: 4px;
}
.st-compact .st-compare-band {
  margin-bottom: var(--st-s3);
}
.st-compact .st-compare {
  margin-bottom: 6px;
}
.st-compact .st-stat {
  padding: var(--st-s2);
  border-top-width: 3px;
}
.st-compact .st-stat-icon {
  width: 56px;
  height: 38px;
  margin-bottom: 4px;
}
.st-compact .st-stat-value {
  margin: 2px 0 4px;
}
.st-compact .st-delta {
  padding: 3px 8px;
  font-size: 11px;
}
.st-compact .st-sub {
  margin-bottom: var(--st-s2);
}
.st-compact .st-copy p {
  margin-bottom: var(--st-s2);
}
.st-compact .st-lead {
  margin: var(--st-s3) 0 var(--st-s1);
}
.st-compact .st-checks li {
  margin-bottom: var(--st-s1);
}
.st-compact .st-checks li::before {
  /* 20px marker on a 24px line */
  top: 2px;
}
.st-compact .st-closer {
  margin-top: var(--st-s3);
}
.st-compact .st-form-head {
  padding: var(--st-s2) var(--st-s3);
}
.st-compact .form-title {
  font-size: 17px;
}
.st-compact .st-form-body {
  padding: var(--st-s3) var(--st-s3) var(--st-s2);
}
.st-compact .form-field {
  margin-bottom: var(--st-s1);
}
@media (max-width: 991.98px) {
  .st-compact .st-header-inner {
    flex-wrap: wrap;
  }
  .st-compact .st-header-inner .st-trustline {
    flex-basis: 100%;
    order: 3;
    font-size: 10px;
  }
  .st-compact .st-hero {
    padding: var(--st-s3) 0;
  }
  .st-compact .st-form-col {
    margin-top: var(--st-s3);
  }
}
@media (max-width: 575.98px) {
  .st-compact .st-phone-number {
    font-size: 16px;
  }
}