/* ===========================================================================
   Driftproof — 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.
   This one is an instrument panel, because its claim is that they don't and
   nothing is watching. Where Payoutproof rules the page evenly, this rules it
   in offset pairs — two lines that should coincide and do not, which is the
   product in one shape, and the same idea as the mark.

   Type is IBM Plex Sans throughout rather than Payoutproof's Spectral display.
   Same family, so the two products read as one vendor; a heavy sans rather
   than a serif, because a monitoring tool that sets its headlines in a
   bookish serif is dressing up as something it is not.

   Severity colours are the SAME four the admin screen uses. Somebody who has
   seen the plugin should recognise the page, and somebody who reads the page
   first should not be surprised by the plugin.
   =========================================================================== */

: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, 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 mark's amber, kept for the two moments that are about THIS
     product rather than the ecosystem: the headline's drifted rule, and the
     two records that no longer agree. Purple everywhere would make all three
     pages the same page. */
  --accent:    #B06D1A;
  --accent-2:  #E0A458;
  --accent-3:  #F0C68E;
  --accent-bg: #FDF4E7;

  /* 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; }

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

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

.dw-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;
}
.dw-skip:focus { left: 0; }

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

.dw-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.dw-sec        { padding-block: clamp(62px, 8vw, 110px); }
.dw-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.
*/
.dw-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);
}
.dw-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;
}
.dw-drift > * { position: relative; z-index: 1; }

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

.dw-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;
}
.dw-nav.is-stuck { border-bottom-color: var(--rule); }
.dw-nav-in { display: flex; align-items: center; gap: 24px; height: 62px; }
.dw-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink);
            text-decoration: none; letter-spacing: -0.02em; }
.dw-nav-links { display: flex; gap: 22px; margin-left: auto; }
.dw-nav-links a { color: var(--ink-2); text-decoration: none; font-size: 15px; }
.dw-nav-links a:hover { color: var(--ink); }

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

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

.dw-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;
}
.dw-btn:hover { background: var(--paper-2); }
.dw-btn:active { transform: translateY(1px); }
.dw-btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-cta); }
.dw-btn--primary:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff; transform: translateY(-1px); }
.dw-btn--sm { padding: 9px 15px; font-size: 14.5px; }

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

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

.dw-hero { padding-block: clamp(48px, 7vw, 92px) clamp(32px, 4vw, 56px); }
.dw-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);
}
.dw-chips { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 26px; }
.dw-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink-2); }
.dw-chip svg { flex: none; color: var(--ok); }

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


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

.dw-claim {
  display: grid; gap: 4px;
  font-family: var(--mono); font-size: clamp(15px, 2.1vw, 21px);
  text-align: center; color: var(--ink-2);
}
.dw-claim b { color: var(--ink); font-weight: 500; }
.dw-claim i { font-style: normal; color: var(--accent); }
/* The second line is nudged, so the drift is visible rather than described. */
.dw-claim span:last-child { transform: translateX(clamp(10px, 3vw, 34px)); }

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

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

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

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

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

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

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

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

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

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

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

.dw-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);
}
.dw-compare { width: 100%; border-collapse: collapse; min-width: 640px; }
.dw-compare th, .dw-compare td { padding: 13px 18px; text-align: left; border-bottom: 1px solid var(--rule); }
.dw-compare thead th { background: var(--paper-2); font-size: 14px; }
.dw-compare tbody th { font-weight: 500; color: var(--ink-2); }
.dw-compare tbody tr:last-child th, .dw-compare tbody tr:last-child td { border-bottom: 0; }
.dw-yes { color: var(--ok); font-weight: 600; }
.dw-part { color: var(--s2); }
.dw-no { color: var(--ink-3); }

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

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

.dw-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 .dw-toggle
   so that "#dw-annual:checked ~ .dw-plans" can reach the prices — a
   sibling combinator cannot climb out of a wrapper. A hide rule scoped
   to .dw-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="dw-bill"] { position: absolute; width: 0; height: 0;
  opacity: 0; pointer-events: none; }
.dw-toggle label { padding: 7px 16px; border-radius: 999px; font-size: 14.5px; font-weight: 600;
                   color: var(--ink-2); cursor: pointer; }
#dw-monthly:checked ~ .dw-toggle-in label[for="dw-monthly"],
#dw-annual:checked  ~ .dw-toggle-in label[for="dw-annual"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm); }
.dw-save { color: var(--ok); font-weight: 700; font-size: 12.5px; }

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

.dw-plan { background: var(--card); border: 1px solid var(--rule-2); border-radius: var(--r);
           padding: 24px 22px; display: flex; flex-direction: column; height: 100%; }
.dw-plan--hero { border-color: var(--brand); box-shadow: var(--shadow-lg); position: relative; }
.dw-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; }
.dw-plan h3 { font-size: 17px; }
.dw-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; }
.dw-plan-p small { font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.dw-plan ul { list-style: none; margin: 16px 0; padding: 0; color: var(--ink-2); font-size: 15px; }
.dw-plan li { padding-left: 22px; position: relative; }
.dw-plan li + li { margin-top: 7px; }
.dw-plan li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.dw-plan-cta { margin-top: auto; }
.dw-plan-cta .dw-btn { width: 100%; }

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

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

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

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

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

.dw-foot { border-top: 1px solid var(--rule); padding-block: 34px; color: var(--ink-3); font-size: 14.5px; }
.dw-foot a { color: var(--ink-2); }
.dw-foot-in { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; }
.dw-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) {
  .dw-rise { animation: dw-rise .5s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes dw-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

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

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

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

.dw-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;
}
.dw-guide-fig img { display: block; width: 100%; height: auto; }
.dw-guide-fig:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .dw-guide-fig { transition: none; }
  .dw-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) {
  .dw-guide { grid-template-columns: 1fr; }
  .dw-guide-fig { order: 2; }
}

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

   Chargeproof's page can quote an industry dispute rate, because one exists
   and is published. There is no published rate for how often a webhook drops
   or a hold lapses, so this band does not invent one. It prices a SINGLE
   instance of the three most expensive checks and then says plainly that the
   count is the one number nobody can tell you — which is what the free scan
   is for. A fabricated benchmark on a page selling a tool whose whole pitch
   is that it does not guess would be the worst possible copy.

   So the brand sits on the note at the bottom, not on a column: the argument
   this band is making is "run the scan", not "column three wins". */

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

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

.dw-arith-col {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
}

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

.dw-arith-v {
  font-size: clamp(28px, 3.6vw, 37px);
  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 37px type and leaves a 37px void under it. */
  line-height: 1.12;
  margin: 8px 0 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dw-arith-v small { font-size: 14.5px; font-weight: 500; color: var(--ink-3); margin-left: 4px;
                    letter-spacing: 0; }

.dw-arith-col p.dw-arith-why { font-size: 14.5px; color: var(--ink-2); line-height: 1.55;
                               margin: 14px 0 18px; }

/* The severity badge is the findings screen's own .dw-sev, not a second one:
   a card here that said S2 in S1's colour would contradict the product it is
   describing. Only the positioning is local. */
.dw-arith-col .dw-sev {
  align-self: flex-start;
  margin-top: auto;
}

.dw-arith-note {
  margin-top: 18px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-3);
  border-radius: var(--r);
  padding: 22px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.dw-arith-note p { margin: 0; max-width: 62ch; font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
.dw-arith-note b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------- 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. */

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

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

.dw-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. */
.dw-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);
}

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