/* ===========================================================================
   Chargeproof — product page
   ---------------------------------------------------------------------------
   Standalone. Deliberately does not load the portfolio's nav or shell: a
   product page competes for one decision, and a twenty-link mega-menu spends
   the visitor's attention somewhere else.

   Payoutproof's page is a ledger, because its claim is that two sides agree.
   Driftproof's is an instrument panel, because its claim is that they have
   stopped agreeing and nothing is watching. This one is a case file against a
   clock: a chargeback is a claim somebody is making, on purpose, with a
   deadline attached, and the page is organised around the thing running out.

   It keeps Driftproof's offset pair, and the offset means something else
   here. There it was one fact recorded twice and the copies had drifted.
   Here it is two different halves of one answer — the gateway holds the
   claim and the deadline, the store holds the evidence — sitting apart
   because nothing joins them. That is the problem the product exists for,
   so the shape stays and only its reason changes.

   Type is IBM Plex Sans throughout, as on Driftproof. Same family across all
   three products, so they read as one vendor.

   The accent is #E06C75, the same red as the mark, and it is used for one
   thing only: what is at risk. Not for emphasis, not for decoration. A page
   about money leaving should spend its one loud colour on the money.
   =========================================================================== */

:root {
  color-scheme: light;

  /* Cool instrument grey, not the warm cream every generated page reaches for. */
  --paper:   #FBFAFD;
  --paper-2: #F4F1F9;
  --card:    #FFFFFF;

  --ink:   #16202B;
  --ink-2: #3D4C5A;
  --ink-3: #6B7B8A;
  --faint: #93A1AE;

  --rule:   #E3EAF0;
  --rule-2: #CFDAE4;

  /* WooCommerce purple, taken from the plugin's own stylesheet (#7f54b3
     appears 19 times in it, #674399 twelve). This is the CHROME: buttons,
     links, nav, the eyebrow, the pricing frame. A visitor should recognise
     the ecosystem before they read a word. */
  --brand:    #7F54B3;
  --brand-2:  #674399;
  --brand-3:  #C9B3E4;
  --brand-bg: #F5F1FB;

  /* And the product's own red, from the mark, kept for the two moments that
     are about THIS product rather than the ecosystem: the headline emphasis
     and anything at risk. Purple everywhere would make all three pages the
     same page. */
  --accent:    #B3323D;
  --accent-2:  #E06C75;
  --accent-3:  #F2A7AD;
  --accent-bg: #FDF1F2;

  /* The admin screen's four, unchanged. State must never read as brand. */
  --s1:    #A6383C;
  --s1-bg: #FBECEC;
  --s2:    #8A6216;
  --s2-bg: #FBF2DF;
  --ok:    #1B7A5A;
  --ok-bg: #E6F4EF;
  --info:  #1D4F7C;
  --info-bg: #EAF2FA;

  /* Softer and deeper than before, and tinted toward the brand rather than
     neutral grey — a pure-black shadow on a tinted ground reads as dirt. */
  --shadow-sm: 0 1px 2px rgba(58,38,88,.05), 0 2px 8px rgba(58,38,88,.04);
  --shadow-md: 0 2px 6px rgba(58,38,88,.04), 0 14px 34px rgba(58,38,88,.08);
  --shadow-lg: 0 6px 12px rgba(58,38,88,.05), 0 36px 72px rgba(58,38,88,.13);
  --shadow-cta: 0 2px 6px rgba(127,84,179,.24), 0 12px 28px rgba(127,84,179,.22);

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;

  --wrap: 1140px;
  --gut:  clamp(18px, 4vw, 40px);

  --sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* ------------------------------------------------------------------ reset */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); }

h1, h2, h3 {
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(36px, 5.2vw, 58px); }
h2 { font-size: clamp(28px, 3.4vw, 40px); }
h3 { font-size: 19px; letter-spacing: -0.012em; line-height: 1.3; }

.cf-eyebrow { font-size: 12.5px; font-weight: 600; letter-spacing: .1em;
              text-transform: uppercase; color: var(--brand); margin-bottom: 14px; }
.cf-sub  { color: var(--ink-2); font-size: clamp(16.5px, 1.6vw, 18.5px); max-width: 62ch; margin-top: 14px; }
.cf-lede { font-size: clamp(17px, 1.8vw, 19.5px); color: var(--ink-2); max-width: 56ch; }
.cf-num  { font-variant-numeric: tabular-nums; }
.cf-muted { color: var(--ink-3); font-size: 14px; }

.cf-sr {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.cf-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--card); color: var(--ink); padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.cf-skip:focus { left: 0; }

/* ----------------------------------------------------------------- layout */

.cf-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.cf-sec        { padding-block: clamp(62px, 8vw, 110px); }
.cf-sec--tight { padding-block: clamp(44px, 5vw, 68px); }

/*
  The drifted page. Two rules where a ledger would have one, the second offset
  from the first — the same idea as the mark, at page scale.

  Very low contrast on purpose: it should read as an instrument's background
  grid, never as content, and it must not fight the text sitting on it.
*/
.cf-drift {
  position: relative;
  background:
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px) 0 0 / 50% 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px) 100% 6px / 50% 100% no-repeat,
    var(--paper-2);
}
.cf-drift::after {
  /* Fade both edges so it reads as texture rather than as a table someone
     forgot to fill in. */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--paper), transparent 18%, transparent 82%, var(--paper));
  pointer-events: none;
}
.cf-drift > * { position: relative; z-index: 1; }

/* -------------------------------------------------------------------- nav */

.cf-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.cf-nav.is-stuck { border-bottom-color: var(--rule); }
.cf-nav-in { display: flex; align-items: center; gap: 24px; height: 62px; }
.cf-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink);
            text-decoration: none; letter-spacing: -0.02em; }
.cf-nav-links { display: flex; gap: 22px; margin-left: auto; }
.cf-nav-links a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.cf-nav-links a:hover { color: var(--ink); }

@media (max-width: 860px) { .cf-nav-links { display: none; } .cf-nav-in { gap: 12px; } .cf-nav .cf-btn { margin-left: auto; } }

/* ---------------------------------------------------------------- buttons */

.cf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: 15.5px; font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1px solid var(--rule-2);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.cf-btn:hover { background: var(--paper-2); }
.cf-btn:active { transform: translateY(1px); }
.cf-btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-cta); }
.cf-btn--primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; transform: translateY(-1px); }
.cf-btn--sm { padding: 9px 15px; font-size: 14.5px; }

.cf-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ------------------------------------------------------------------- hero */

.cf-hero { padding-block: clamp(48px, 7vw, 92px) clamp(32px, 4vw, 56px); }
.cf-hero h1 em {
  font-style: normal;
  color: var(--accent);
  /* The one flourish: the claim itself gets the drifted rule under it. */
  box-shadow: inset 0 -0.14em 0 var(--accent-3);
}
.cf-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; }
.cf-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); }
.cf-chip svg { flex: none; color: var(--ok); }

/* Browser chrome around the screenshot, so a flat PNG reads as a screen. */
.cf-frame {
  margin-top: 44px;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--card);
}
.cf-frame-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px;
                background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.cf-frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-2); }
.cf-cap { text-align: center; color: var(--ink-3); font-size: 13.5px; margin-top: 14px; }


/* ------------------------------------------------------------ the claim */

.cf-claim {
  display: grid; gap: 4px;
  font-family: var(--mono); font-size: clamp(15px, 2.1vw, 21px);
  text-align: center; color: var(--ink-2);
}
.cf-claim b { color: var(--ink); font-weight: 500; }
.cf-claim i { font-style: normal; color: var(--accent); }
/* The second line is nudged, so the gap between the two systems is visible
   rather than described. Inherited from Driftproof, where it meant drift
   between two copies of one fact; here it is the distance between the
   gateway's claim and the store's evidence. */
.cf-claim span:last-child { transform: translateX(clamp(10px, 3vw, 34px)); }

/* --------------------------------------------------- problem / solution */

.cf-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 34px; }
@media (max-width: 860px) { .cf-split { grid-template-columns: 1fr; } }

.cf-col { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 24px 24px 28px; }
.cf-col--before { border-color: var(--rule-2); }
.cf-col--after  { border-color: var(--brand-3); box-shadow: var(--shadow-md); }
.cf-col h3 { margin-bottom: 14px; }
.cf-steps { margin: 0; padding-left: 20px; color: var(--ink-2); }
.cf-steps li + li { margin-top: 9px; }

/* ------------------------------------------------------------- the checks */

.cf-checks { border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; margin-top: 30px; background: var(--card); }
.cf-check { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: baseline;
            padding: 14px 18px; }
.cf-check + .cf-check { border-top: 1px solid var(--rule); }
.cf-check dt { font-weight: 600; }
.cf-check dd { margin: 0; color: var(--ink-2); font-size: 15px; }
.cf-sev { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; }
.cf-sev--s1 { background: var(--s1-bg); color: var(--s1); }
.cf-sev--s2 { background: var(--s2-bg); color: var(--s2); }
.cf-tier { margin: 30px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
@media (max-width: 700px) {
  .cf-check { grid-template-columns: 52px 1fr; }
  .cf-check dd { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------------ facts */

.cf-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 860px) { .cf-facts { grid-template-columns: repeat(2, 1fr); } }
.cf-fact { text-align: center; }
.cf-fact b { display: block; font-size: clamp(30px, 4vw, 44px); line-height: 1.05; letter-spacing: -0.03em;
             font-variant-numeric: tabular-nums; }
.cf-fact span { display: block; color: var(--ink-3); font-size: 14px; margin-top: 6px; }

/* ------------------------------------------------------------------ bento */

.cf-bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 34px; }
.cf-cell { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 22px 22px 24px; grid-column: span 2; }
.cf-cell--lead { grid-column: span 4; }
.cf-cell--pair { grid-column: span 3; }
.cf-cell p { color: var(--ink-2); margin: 10px 0 0; }
@media (max-width: 980px) { .cf-bento { grid-template-columns: repeat(2, 1fr); } .cf-cell, .cf-cell--lead, .cf-cell--pair { grid-column: span 1; } }
@media (max-width: 620px) { .cf-bento { grid-template-columns: 1fr; } }

/* A miniature of the real finding row, so the bento leads with the product. */
.cf-mini { margin-top: 18px; border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
.cf-mini-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: 14px; }
.cf-mini-row + .cf-mini-row { border-top: 1px solid var(--rule); }
.cf-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cf-dot--s1 { background: var(--s1); } .cf-dot--s2 { background: var(--s2); }
.cf-mini-what { flex: 1; color: var(--ink-2); }
.cf-mini-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* -------------------------------------------------------------- compare */

.cf-tablewrap {
  margin-top: 30px; overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r);
  background:
    linear-gradient(to right, var(--card) 40%, transparent) 0 0 / 44px 100% no-repeat local,
    linear-gradient(to left,  var(--card) 40%, transparent) 100% 0 / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(22,32,43,.16), transparent) 0 0 / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(22,32,43,.16), transparent) 100% 0 / 16px 100% no-repeat scroll,
    var(--card);
}
.cf-compare { width: 100%; border-collapse: collapse; min-width: 640px; }
.cf-compare th, .cf-compare td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--rule); }
.cf-compare thead th { background: var(--paper-2); font-size: 14px; }
.cf-compare tbody th { font-weight: 500; color: var(--ink-2); }
.cf-compare tbody tr:last-child th, .cf-compare tbody tr:last-child td { border-bottom: 0; }
.cf-yes { color: var(--ok); font-weight: 600; }
.cf-part { color: var(--s2); }
.cf-no { color: var(--ink-3); }

@media (max-width: 860px) {
  .cf-compare tbody th, .cf-compare thead th:first-child {
    position: sticky; left: 0; z-index: 2; background: var(--card); box-shadow: 1px 0 0 var(--rule);
  }
  .cf-compare thead th:first-child { background: var(--paper-2); }
}

/* -------------------------------------------------------------- pricing */

.cf-toggle { display: inline-flex; align-items: center; gap: 2px; background: var(--paper-2);
             border: 1px solid var(--rule); border-radius: 999px; padding: 4px; margin-top: 22px; }
/* Targeted by name, not by ancestor. These inputs sit OUTSIDE .cf-toggle
   so that "#cf-annual:checked ~ .cf-plans" can reach the prices — a
   sibling combinator cannot climb out of a wrapper. A hide rule scoped
   to .cf-toggle therefore stopped matching when they moved, and shipped
   two bare radio buttons next to the toggle. Zero-sized so they take no
   layout wherever they end up. */
input[name="cf-bill"] { position: absolute; width: 0; height: 0;
  opacity: 0; pointer-events: none; }
.cf-toggle label { padding: 7px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
                   color: var(--ink-2); cursor: pointer; }
#cf-monthly:checked ~ .cf-toggle-in label[for="cf-monthly"],
#cf-annual:checked  ~ .cf-toggle-in label[for="cf-annual"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.cf-save { color: var(--ok); font-weight: 700; font-size: 12.5px; }

.cf-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; align-items: start; }
@media (max-width: 1000px) { .cf-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cf-plans { grid-template-columns: 1fr; } }

.cf-plan { background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r);
           padding: 24px 22px; display: flex; flex-direction: column; height: 100%; }
.cf-plan--hero { border-color: var(--brand); box-shadow: var(--shadow-lg); position: relative; }
.cf-plan-tag { position: absolute; top: -11px; left: 22px; background: var(--brand); color: #fff;
               font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
               padding: 4px 10px; border-radius: 999px; }
.cf-plan h3 { font-size: 17px; }
.cf-plan-p { font-weight: 700; font-size: 40px; line-height: 1.1; margin: 8px 0 2px;
             letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.cf-plan-p small { font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.cf-plan ul { list-style: none; margin: 16px 0; padding: 0; color: var(--ink-2); font-size: 15px; }
.cf-plan li { padding-left: 22px; position: relative; }
.cf-plan li + li { margin-top: 7px; }
.cf-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.cf-plan-cta { margin-top: auto; }
.cf-plan-cta .cf-btn { width: 100%; }

/* The annual/monthly swap. Radios and sibling selectors rather than
   JavaScript, so the prices are correct before any script runs. */
.cf-yr { display: none; }
#cf-annual:checked ~ .cf-plans .cf-mo { display: none; }
#cf-annual:checked ~ .cf-plans .cf-yr { display: inline; }

/* ------------------------------------------------------------------- faq */

.cf-faq { margin-top: 30px; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--card); }
.cf-faq details + details { border-top: 1px solid var(--rule); }
.cf-faq summary { padding: 16px 20px; cursor: pointer; font-weight: 600; }
.cf-faq summary:hover { background: var(--paper-2); }
.cf-faq p { margin: 0; padding: 0 20px 18px; color: var(--ink-2); max-width: 72ch; }

/* ----------------------------------------------------------------- final */

.cf-final { text-align: center; }
.cf-final .cf-ctas { justify-content: center; }

.cf-foot { border-top: 1px solid var(--rule); padding-block: 34px; color: var(--ink-3); font-size: 14.5px; }
.cf-foot a { color: var(--ink-2); }
.cf-foot-in { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.cf-foot-in nav { margin-left: auto; display: flex; gap: 18px; }

/* ---------------------------------------------------------------- motion */

/* Purposeful only: sections settle into place on first view. Everything is
   visible at rest — nothing waits on an observer to become readable, so a
   screenshot or a reader with motion disabled still sees a finished page. */
@media (prefers-reduced-motion: no-preference) {
  .cf-rise { animation: cf-rise .5s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes cf-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------------------------------------------------------------- guide */

.cf-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.cf-note { margin-top: 18px; font-size: 14px; color: var(--ink-3); }

.cf-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
.cf-guide-say .cf-sub { margin-top: 14px; }
.cf-guide-say .cf-cta-row { margin-top: 24px; }

.cf-guide-fig {
  display: block;
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cf-guide-fig img { display: block; width: 100%; height: auto; }
.cf-guide-fig:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .cf-guide-fig { transition: none; }
  .cf-guide-fig:hover { transform: none; }
}

/* Stacked, and the document goes underneath: on a phone the pages are too
   small to read anyway, so they stop being the argument and become the proof. */
@media (max-width: 860px) {
  .cf-guide { grid-template-columns: 1fr; }
  .cf-guide-fig { order: 2; }
}

/* ------------------------------------------------------------ arithmetic

   Three columns: what it costs by hand, what it costs with the evidence
   ready, and the difference. The third is the one the page is making an
   argument with, so it carries the brand and the other two do not. */

.cf-arith {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

@media (max-width: 860px) { .cf-arith { grid-template-columns: 1fr; } }

.cf-arith-col {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 24px 22px 26px;
}

.cf-arith-col--after { border-color: var(--rule-2); }

.cf-arith-col--gain {
  border-color: var(--brand);
  background: var(--brand-bg);
  box-shadow: var(--shadow-md);
}

.cf-arith-k {
  font-size: 12.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 600;
}

.cf-arith-v {
  font-size: clamp(30px, 4vw, 40px);
  font-weight: 700;
  letter-spacing: -.02em;
  /* Both halves matter. Without the line-height the body's 1.6 pads the
     figure; without the explicit margin the browser's default 1em on a <p>
     scales with the 40px type and leaves a 40px void under it. */
  line-height: 1.12;
  margin: 6px 0 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.cf-arith-col--gain .cf-arith-v { color: var(--brand-2); }
.cf-arith-v small { font-size: 15px; font-weight: 500; color: var(--ink-3); margin-left: 2px; }

.cf-arith-col ul { margin: 16px 0 0; padding-left: 18px; }
.cf-arith-col li { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; margin-bottom: 7px; }

/* ------------------------------------------------------------- assurance

   The four objections that stand between reading the price and paying it,
   answered immediately above it. Every line is checkable — an overstated
   reassurance is worse than none on a page whose product refuses to guess. */

.cf-assure {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 900px) { .cf-assure { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cf-assure { grid-template-columns: 1fr; } }

.cf-assure li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
  padding-left: 26px;
  position: relative;
}

/* A tick drawn in CSS rather than an emoji, which would date the page and
   read differently on every platform. */
.cf-assure li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 3px;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg);
}

.cf-assure b { color: var(--ink); font-weight: 600; }