/* ===========================================================================
   Payoutproof — 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.

   The design is a ledger, because the product's entire claim is that two
   sides agree. A faint rule runs behind the page the way it runs across
   ledger paper; figures are tabular so columns line up; debits are ink and
   credits are blue, the same split the logo makes with two bars of exactly
   equal length.

   Type is Spectral over IBM Plex Sans + Plex Mono — the faces already used in
   the brand lockups, and a bold serif display is where 2026 landed anyway.
   =========================================================================== */

/* --------------------------------------------------------------- tokens */

:root {
  color-scheme: light;

  /* Ledger paper: cool, barely tinted. 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, the product's column in the
     comparison. A visitor should recognise the ecosystem before they read
     a word. */
  --brand:      #7F54B3;
  --brand-2:    #674399;
  --brand-3:    #C9B3E4;
  --brand-bg:   #F5F1FB;

  /* Brand blue, from the mark — and here it is not decoration. This page's
     blue is the CREDIT column: the logo splits into two bars of equal length
     and the ledger splits debit from credit the same way. It stays on the
     things that carry that meaning — credits, the accounting identity, the
     headline's ruled claim — and nowhere else. Painting it purple would
     delete the one idea the design is built on. */
  --accent:     #1D4F7C;
  --accent-2:   #2F7FC4;
  --accent-3:   #7BB0E8;
  --accent-bg:  #EAF2FA;

  /* Semantic, kept clear of the accent so state never reads as brand. */
  --ok:         #1B7A5A;
  --ok-bg:      #E6F4EF;
  --warn:       #8A6216;
  --warn-bg:    #FBF2DF;
  --bad:        #A6383C;
  --bad-bg:     #FBECEC;

  /* 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;
  --serif: Spectral, ui-serif, Georgia, "Times New Roman", serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}


/* ---------------------------------------------------------------- reset */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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, svg { max-width: 100%; display: block; }
a { color: var(--brand); text-underline-offset: 3px; }

:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.021em;
  line-height: 1.12;
  text-wrap: balance;
  margin: 0;
}

h1 { font-size: clamp(38px, 5.6vw, 62px); }
h2 { font-size: clamp(29px, 3.6vw, 42px); }
h3 { font-size: 19px; letter-spacing: -0.012em; line-height: 1.3; }

p { margin: 0; }

.ll-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.ll-skip:focus { left: 0; }

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

.ll-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.ll-sec { padding-block: clamp(62px, 8vw, 110px); }
.ll-sec--tight { padding-block: clamp(44px, 5vw, 68px); }

/* The ruled page. Very low contrast: it should read as paper, never as
   content, and it must not fight the text sitting on it. */
.ll-ruled {
  position: relative;
  background:
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px),
    var(--paper-2);
}
.ll-ruled::after {
  /* Fade the ruling out at 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;
}
.ll-ruled > * { position: relative; z-index: 1; }

.ll-eyebrow {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 14px;
}

.ll-sub {
  color: var(--ink-2);
  font-size: clamp(16.5px, 1.6vw, 18.5px);
  max-width: 62ch;
  margin-top: 14px;
}

.ll-num { font-variant-numeric: tabular-nums; }

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

.ll-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s, background .2s;
}
.ll-nav[data-stuck="true"] { border-bottom-color: var(--rule); }

.ll-nav-in {
  display: flex; align-items: center; gap: 14px;
  min-height: 62px;
}

.ll-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif); font-weight: 700; font-size: 20.5px;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
  margin-right: auto;
}
.ll-brand img { width: 30px; height: 30px; border-radius: 7px; }

.ll-nav-links { display: flex; align-items: center; gap: 4px; }
.ll-nav-links a {
  color: var(--ink-2); text-decoration: none;
  font-size: 15px; font-weight: 500;
  padding: 8px 12px; border-radius: var(--r-sm);
}
.ll-nav-links a:hover { color: var(--ink); background: var(--paper-2); }

@media (max-width: 800px) { .ll-nav-links { display: none; } }

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

.ll-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;
}
.ll-btn:hover { background: var(--paper-2); }
.ll-btn:active { transform: translateY(1px); }

.ll-btn--primary {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: var(--shadow-cta);
}
.ll-btn--primary:hover { background: var(--brand-2); border-color: var(--brand-2);
                         transform: translateY(-1px); }

.ll-btn--sm { padding: 9px 15px; font-size: 14.5px; }

.ll-cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

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

.ll-hero { padding-block: clamp(44px, 6vw, 82px) clamp(30px, 4vw, 46px); }

.ll-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 960px) { .ll-hero-grid { grid-template-columns: 1fr; } }

.ll-hero h1 { margin-bottom: 18px; }
.ll-hero h1 em {
  font-style: normal;
  color: var(--accent);
  /* The one flourish: the claim itself gets the ledger rule under it. */
  box-shadow: inset 0 -0.14em 0 var(--accent-3);
}

.ll-lede { font-size: clamp(17px, 1.8vw, 19.5px); color: var(--ink-2); max-width: 54ch; }

.ll-trust {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin-top: 22px; font-size: 14px; color: var(--ink-3);
}
.ll-trust span { display: inline-flex; align-items: center; gap: 7px; }
.ll-trust svg { width: 15px; height: 15px; color: var(--ok); flex: none; }

/* ------------------------------------------------------------ app frame */

/* Chrome around a screenshot. Signals "this is the actual product" rather
   than a marketing illustration, which is the whole reason the shot is here. */
.ll-frame {
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
.ll-frame-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 10px 13px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.ll-frame-bar i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--rule-2); flex: none;
}
.ll-frame-bar b {
  margin-left: 8px; font: 500 12.5px/1 var(--mono);
  color: var(--faint); letter-spacing: .01em;
}
.ll-frame img { width: 100%; height: auto; }

figure { margin: 0; }
.ll-cap {
  margin-top: 12px; font-size: 14px; color: var(--ink-3);
  text-align: center; max-width: 66ch; margin-inline: auto;
}

/* ------------------------------------------------------- identity band */

.ll-identity {
  display: grid; place-items: center;
  gap: 10px; text-align: center;
}
.ll-identity-eq {
  font-family: var(--mono);
  font-size: clamp(13px, 1.9vw, 19px);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-radius: 999px;
  padding: 14px clamp(16px, 3vw, 30px);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  max-width: 100%;
  white-space: nowrap;
}
.ll-identity-eq b { color: var(--accent); font-weight: 700; }
.ll-identity-eq i { color: var(--ok); font-style: normal; font-weight: 700; }

/* ------------------------------------------------------------- figures */

.ll-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}
.ll-facts > div { background: var(--card); padding: 24px 22px; }
.ll-facts b {
  display: block;
  font-family: var(--serif); font-weight: 700;
  font-size: 38px; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
}
.ll-facts span { font-size: 14.5px; color: var(--ink-3); }

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

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

.ll-col {
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 26px;
  background: var(--card);
}
.ll-col--before { background: var(--paper-2); }
.ll-col h3 { margin-bottom: 4px; }
.ll-col-tag {
  font-size: 12px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; margin-bottom: 12px;
}
.ll-col--before .ll-col-tag { color: var(--faint); }
.ll-col--after  .ll-col-tag { color: var(--ok); }

.ll-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 11px; }
.ll-steps li {
  display: grid; grid-template-columns: 20px 1fr; gap: 11px;
  font-size: 15.5px; color: var(--ink-2); line-height: 1.5;
}
.ll-steps svg { width: 18px; height: 18px; margin-top: 3px; }
.ll-col--before svg { color: var(--faint); }
.ll-col--after  svg { color: var(--ok); }

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

.ll-bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.ll-cell {
  /* Half-width by default. The spans below tile the six columns exactly —
     4+2, then 3+3, then 3+3 — because a bento grid with a hole in it reads
     as a layout bug rather than as composition. */
  grid-column: span 3;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 24px;
  display: flex; flex-direction: column; gap: 9px;
}
/* One cell earns the most room: the claim the whole product rests on, and
   the only one that can show its own output. */
.ll-cell--lead { grid-column: span 4; }
.ll-cell--pair { grid-column: span 2; }

@media (max-width: 900px) {
  .ll-bento { grid-template-columns: repeat(2, 1fr); }
  .ll-cell, .ll-cell--wide, .ll-cell--lead { grid-column: span 1; }
}
@media (max-width: 560px) {
  .ll-bento { grid-template-columns: 1fr; }
}

.ll-cell-ico {
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--brand-bg); color: var(--brand);
  margin-bottom: 4px;
}
.ll-cell-ico svg { width: 18px; height: 18px; }
.ll-cell p { color: var(--ink-2); font-size: 15.5px; }

/* A journal rendered in the grid, so one cell shows the actual output
   rather than describing it. */
.ll-mini {
  margin-top: 6px;
  font-family: var(--mono); font-size: 12.5px;
  border-top: 1px solid var(--rule);
}
.ll-mini div {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 12px; padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.ll-mini span:first-child { color: var(--ink-2); }
.ll-mini .dr { color: var(--ink); font-weight: 600; min-width: 74px; text-align: right; }
.ll-mini .cr { color: var(--accent); font-weight: 600; min-width: 74px; text-align: right; }
.ll-mini .hd span { color: var(--faint); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* --------------------------------------------------------------- states */

.ll-states {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px; margin-top: 36px;
}
.ll-state {
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 22px;
  background: var(--card);
  border-top: 3px solid var(--rule-2);
}
.ll-state p:last-child { color: var(--ink-2); font-size: 15.5px; }
.ll-state-h {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; margin-bottom: 8px;
  letter-spacing: .02em;
}
.ll-state-h::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor;
}
.ll-state--ok   { border-top-color: var(--ok);   }
.ll-state--ok   .ll-state-h { color: var(--ok);   }
.ll-state--info { border-top-color: var(--accent); }
.ll-state--info .ll-state-h { color: var(--accent); }
.ll-state--bad  { border-top-color: var(--bad);  }
.ll-state--bad  .ll-state-h { color: var(--bad);  }

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

.ll-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 22px; padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.ll-toggle label {
  font-size: 14.5px; font-weight: 600; color: var(--ink-3);
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  transition: background .15s, color .15s;
}
.ll-toggle label:hover { color: var(--ink); }
/* By name, not by ancestor: the inputs live outside .ll-toggle so the
   price selector can reach .ll-plans. Zero-sized so they take no layout. */
input[name="ll-bill"] { position: absolute; width: 0; height: 0;
  opacity: 0; pointer-events: none; }
/* The active pill. + no longer works now the inputs are not adjacent to
   their labels, so this reaches into the wrapper the same way the price
   rule reaches into .ll-plans. */
#ll-monthly:checked ~ .ll-toggle-in label[for="ll-monthly"],
#ll-annual:checked ~ .ll-toggle-in label[for="ll-annual"] {
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm);
}
#ll-monthly:focus-visible ~ .ll-toggle-in label[for="ll-monthly"],
#ll-annual:focus-visible ~ .ll-toggle-in label[for="ll-annual"] { outline: 2.5px solid var(--brand); outline-offset: 2px; }
.ll-save { color: var(--ok); font-weight: 700; font-size: 12.5px; }

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

.ll-plan {
  background: var(--card);
  border: 1px solid var(--rule-2);
  border-radius: var(--r);
  padding: 24px 22px;
  display: flex; flex-direction: column;
  height: 100%;
}
.ll-plan--hero {
  border-color: var(--brand);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.ll-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;
}

.ll-plan-n { font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.ll-plan-p {
  font-family: var(--serif); font-weight: 700;
  font-size: 40px; line-height: 1.1; margin: 8px 0 2px;
  font-variant-numeric: tabular-nums;
}
.ll-plan-p small { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--ink-3); }
.ll-plan-w { font-size: 14px; color: var(--ink-3); min-height: 2.8em; }
.ll-plan ul { list-style: none; margin: 16px 0 20px; padding: 0; display: grid; gap: 9px; }
.ll-plan li {
  font-size: 14.5px; color: var(--ink-2);
  display: grid; grid-template-columns: 17px 1fr; gap: 9px; align-items: start;
}
.ll-plan li svg { width: 15px; height: 15px; color: var(--ok); margin-top: 4px; }
.ll-plan-cta { margin-top: auto; }
.ll-plan-cta .ll-btn { width: 100%; }

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

.ll-note { margin-top: 18px; font-size: 14px; color: var(--ink-3); }

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

.ll-faq { max-width: 780px; margin-top: 34px; }
.ll-faq details {
  border-bottom: 1px solid var(--rule);
}
.ll-faq summary {
  list-style: none; cursor: pointer;
  padding: 18px 40px 18px 0;
  position: relative;
  font-family: var(--serif); font-weight: 700; font-size: 18.5px;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.ll-faq summary::-webkit-details-marker { display: none; }
.ll-faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 10px; height: 10px; margin-top: -6px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg); transition: transform .18s ease;
}
.ll-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.ll-faq summary:hover { color: var(--brand); }
.ll-faq p { padding: 0 0 20px; color: var(--ink-2); font-size: 16px; max-width: 70ch; }

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

.ll-final {
  border: 1px solid var(--rule-2);
  border-radius: var(--r-lg);
  background: var(--card);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
  box-shadow: var(--shadow-md);
}
.ll-final .ll-cta-row { justify-content: center; margin-top: 24px; }
.ll-final .ll-sub { margin-inline: auto; }

/* --------------------------------------------------------------- footer */

.ll-foot {
  border-top: 1px solid var(--rule);
  padding-block: 34px 44px;
  font-size: 14.5px; color: var(--ink-3);
}
.ll-foot-in { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: center; }
.ll-foot a { color: var(--ink-2); text-decoration: none; }
.ll-foot a:hover { color: var(--brand); text-decoration: underline; }
.ll-foot nav { display: flex; flex-wrap: wrap; 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) {
  .ll-rise { animation: ll-rise .5s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes ll-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------------------------------------------------------- refinements */


@media (max-width: 560px) {
  /* Stacked buttons of different widths read as a mistake. Equal width and
     full bleed, with the primary on top where the thumb is. */
  .ll-cta-row { flex-direction: column; align-items: stretch; }
  .ll-cta-row .ll-btn { width: 100%; }

  /* The header CTA competes with the hero's at full size. */
  .ll-nav .ll-btn { padding: 8px 13px; font-size: 14px; }
  .ll-brand { font-size: 18.5px; }
  .ll-brand img { width: 26px; height: 26px; }

  .ll-trust { gap: 6px 14px; }
}

/* A long single-column lede is harder to read than a shorter one; cap it
   before the type scale does. */
@media (max-width: 700px) {
  .ll-lede { font-size: 17px; }
}

/* ----------------------------------------------------------- comparison */

/* A real table, not a grid of divs. Answer engines quote tables well, and a
   screen reader gets row and column relationships for free. */
.ll-tablewrap { overflow-x: auto; margin-top: 30px; border-radius: var(--r); border: 1px solid var(--rule-2); }

.ll-compare {
  width: 100%; min-width: 620px;
  border-collapse: collapse;
  background: var(--card);
  font-size: 15px;
}
.ll-compare th, .ll-compare td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.ll-compare thead th {
  font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); background: var(--paper-2);
  border-bottom: 1px solid var(--rule-2);
  white-space: nowrap;
}
.ll-compare tbody th { font-weight: 600; color: var(--ink); width: 34%; }
.ll-compare td { color: var(--ink-2); }
.ll-compare tr:last-child th, .ll-compare tr:last-child td { border-bottom: 0; }

/* The product's own column carries a tint so the eye finds it without the
   table shouting. */
.ll-compare .ll-mine { background: var(--brand-bg); color: var(--ink); font-weight: 500; }
.ll-compare thead .ll-mine { color: var(--brand); }

.ll-yes, .ll-no, .ll-part {
  display: inline-flex; align-items: center; gap: 7px;
}
.ll-yes::before, .ll-no::before, .ll-part::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
}
.ll-yes::before  { background: var(--ok); }
.ll-part::before { background: var(--warn); }
.ll-no::before   { background: var(--faint); }

/* ------------------------------------------------------- mobile fixes */

/* The identity scrolled horizontally on a phone, which hid "= deposit" —
   the entire point of the line. It is short enough to wrap, so let it, and
   drop the pill radius that only makes sense on one line. */
@media (max-width: 760px) {
  .ll-identity-eq {
    white-space: normal;
    overflow-x: visible;
    border-radius: var(--r);
    line-height: 1.9;
    text-align: center;
  }
}

/* Scroll shadows on the comparison table.
   The table has to scroll on a phone — collapsing it to cards would cost the
   row/column semantics that make it extractable — but a cut-off column with
   no affordance just looks like a bug, and the column being hidden is the
   one the reader came for. The two `local` gradients paint the card colour
   over each edge and scroll with the content; the two `scroll` shadows are
   fixed to the frame, so a shadow is only visible while there is something
   past that edge to reach. */
.ll-tablewrap {
  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);
}
.ll-compare { background: transparent; }
.ll-compare thead th { background: var(--paper-2); }

/* Keep the row label in view while the columns scroll past it, or the reader
   loses track of which question each answer belongs to. */
@media (max-width: 860px) {
  .ll-compare tbody th,
  .ll-compare thead th:first-child {
    position: sticky; left: 0; z-index: 2;
    background: var(--card);
    box-shadow: 1px 0 0 var(--rule);
  }
  .ll-compare thead th:first-child { background: var(--paper-2); }
}

/* Said plainly as well as shown, because a shadow is a hint and not everyone
   reads hints. */
.ll-swipe { display: none; }
@media (max-width: 860px) {
  .ll-swipe {
    display: block;
    font-size: 13.5px; color: var(--ink-3);
    margin-top: 18px;
  }
}

/* Footer links were 23px tall — under any reasonable touch target. */
@media (max-width: 700px) {
  .ll-foot nav { gap: 4px 10px; }
  .ll-foot nav a { padding: 10px 2px; display: inline-block; }
  .ll-brand { padding-block: 6px; }
}

/* Visible only to assistive tech. The table's caption describes what is being
   compared, which a screen reader announces before the rows; the human-facing
   footnote sits below the scroll container instead, because inside it, it
   inherited the table's min-width and was clipped on a phone exactly like the
   columns were. */
.ll-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* A full-width bento cell. Used by the one whose explanation does not
   compress: seven cells tile the six columns as 4+2 / 6 / 3+3 / 3+3, and a
   grid with a hole in it reads as a layout bug rather than composition. */
.ll-cell--full { grid-column: span 6; }
@media (max-width: 900px) { .ll-cell--full { grid-column: span 1; } }

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

/* The two-up thumbnail carries the weight here: a cover alone reads as a
   title slide, and the point being made is that there is a real document
   behind the link. Image second in the source so the sentence that explains
   it is what a narrow screen and a screen reader reach first. */
.ll-guide {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
.ll-guide-say .ll-sub { margin-top: 14px; }
.ll-guide-say .ll-cta-row { margin-top: 24px; }

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

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

/* ------------------------------------------------------- reconciliation

   Chargeproof's page can argue with an industry dispute rate, because one is
   published. There is no published figure for what a bad payout
   reconciliation costs, and inventing one would undo the only thing this
   product sells, which is that the number is right.

   So this band does not estimate anything. It is one payout, worked, and it
   ties — the visitor can add it up. Set in the mono face at ledger rhythm,
   same rule weight as .ll-mini, because the claim and the evidence for it
   should look like the same object.

   Not .ll-mini itself: that is a two-column debit/credit journal and this is
   a single running column down to a total. Same materials, different shape. */

.ll-recon {
  margin-top: 30px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px 32px;
  align-items: start;
}

@media (max-width: 880px) { .ll-recon { grid-template-columns: 1fr; } }

.ll-recon-tbl {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  padding: 22px 24px;
  font-family: var(--mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.ll-recon-tbl div {
  display: grid;
  grid-template-columns: 1fr 4.5ch auto;
  gap: 10px 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.ll-recon-tbl div:last-child { border-bottom: 0; padding-bottom: 0; }

.ll-recon-tbl .lbl { color: var(--ink-2); }
.ll-recon-tbl .n   { color: var(--faint); text-align: right; font-size: 12.5px; }
.ll-recon-tbl .amt { color: var(--ink); text-align: right; min-width: 10ch; }

/* The deposit is the line the bank statement will also show, so it is the
   one line set as a credit — the same blue the journal uses for one. */
.ll-recon-tbl .ll-recon-sum {
  border-top: 2px solid var(--ink);
  border-bottom: 0;
  margin-top: 4px;
  padding-top: 12px;
  font-weight: 600;
}
.ll-recon-tbl .ll-recon-sum .lbl { color: var(--ink); }
.ll-recon-tbl .ll-recon-sum .amt { color: var(--accent); font-weight: 700; font-size: 15px; }

.ll-recon-say { display: flex; flex-direction: column; gap: 16px; max-width: 42ch; }

.ll-recon-say p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.ll-recon-say b { color: var(--ink); font-weight: 600; }

.ll-recon-say .ll-recon-hi {
  background: var(--brand-bg);
  border: 1px solid var(--brand-3);
  border-radius: var(--r-sm);
  padding: 14px 16px;
}

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

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

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

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

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