/* ============ /compare in the 2026-09 look ============
   Loads after styles.css. The board's structure, marks and full-notes toggle
   are unchanged (#138); this re-dresses them for the white page:
   - the Verbamor column is a faint vermilion wash with a deeper cap, where
     it was a blue tint, so "ours" reads in the brand colour;
   - the strongest cell in a row keeps its grey plate and bold value, so a
     row Verbamor loses still reads as plainly as one it wins;
   - hairlines and soft depth in place of the hard outline and offset. */

main { overflow-x: clip; }

/* ---------- Hero ---------- */
.cmp4-hero { position: relative; padding: 64px 0 36px; }
.cmp4-hero::before {
  content: ""; position: absolute; z-index: -1; top: 0; bottom: -40px; left: 50%; width: 100vw; transform: translateX(-50%);
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(10,10,11,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(10,10,11,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 55% 80% at 70% 20%, #000 15%, transparent 70%);
          mask-image: radial-gradient(ellipse 55% 80% at 70% 20%, #000 15%, transparent 70%);
}
.cmp4-hero .kicker { color: var(--primary); margin-bottom: 18px; }
.cmp4-hero h1 { font-size: clamp(46px, 6vw, 80px); line-height: .98; letter-spacing: -0.048em; }
.cmp4-hero .lede { margin-top: 20px; font-size: 19px; line-height: 1.55; color: var(--nav-ink); max-width: 40em; }
.cmp4-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.cmp4-jump-k { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.cmp4-jump a {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px;
  font-size: 14.5px; font-weight: 500; color: var(--ink); background: #fff; border: 1px solid var(--outline);
  box-shadow: var(--shadow-riso-sm); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .2s;
}
.cmp4-jump a::after { content: "\2192"; color: var(--muted); transition: transform .25s var(--ease-out), color .2s; }
.cmp4-jump a:hover { color: var(--ink); transform: translateY(-1px); border-color: #D4D4D8; box-shadow: var(--shadow-riso); }
.cmp4-jump a:hover::after { transform: translateX(2px); color: var(--primary); }

/* ---------- Toggle bar ---------- */
.cmp4-bar { margin-top: 8px; }
.cmp4-toggle { font-weight: 500; }
.cmp4-switch { border-width: 1px; }
.cmp4-toggle[aria-pressed="true"] .cmp4-switch { background: var(--ink); border-color: var(--ink); }

/* ---------- The board ---------- */
.cmp4 {
  --cmp4-cap: #FDE3DA;
  --cmp4-tint: #FFF5F2;
  --cmp4-rule: rgba(10,10,11,.12);
  --cmp4-plate: #F4F4F5;
  border: 1px solid var(--outline); border-radius: 24px;
  box-shadow: 0 1px 2px rgba(10,10,11,.05), 0 24px 60px -24px rgba(10,10,11,.18);
}
.cmp4-head { top: 65px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.cmp4-head .cmp4-own { background: var(--cmp4-cap); }
.cmp4-name { font-weight: 600; letter-spacing: -0.01em; }
.cmp4-own .cmp4-name, .cmp4-own .cmp4-val, .cmp4-own .cmp4-label { color: var(--primary); }
.cmp4-own.cmp4-neg .cmp4-val { color: var(--muted); }
.cmp4-own.cmp4-best { background: var(--cmp4-cap); }
.cmp4-best .cmp4-val { color: var(--ink); }
.cmp4-own.cmp4-best .cmp4-val { color: var(--primary); }
.cmp4-feat b { letter-spacing: -0.01em; }
.cmp4-side { border-right-color: var(--line); }
.cmp4-full a, .cmp4-fix a { color: var(--primary); }
@media (hover: hover) {
  .cmp4 { --cmp4-col: #FAFAFA; }
}

/* ---------- Pricing ---------- */
.plans { margin-top: 112px; }
.plans h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.04em; line-height: 1.04; }
.plan-switch { border: 1px solid var(--outline); box-shadow: var(--shadow-riso-sm); background: #F4F4F5; }
.plan-switch button { font-weight: 500; }
.plan-switch button[aria-checked="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(10,10,11,.1), 0 2px 8px -2px rgba(10,10,11,.12); }
.plan-save { background: var(--primary-wash); color: var(--primary); }
.plan-card {
  position: relative; border: 1px solid var(--outline); border-radius: 24px;
  box-shadow: 0 2px 4px rgba(10,10,11,.04), 0 30px 70px -24px rgba(10,10,11,.22);
}
.plan-card::before {
  content: ""; position: absolute; inset: -10% -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(239,74,43,.12), rgba(239,74,43,0)); filter: blur(24px);
}
.plan-price { font-weight: 650; letter-spacing: -0.045em; }
.plan-like { background: #FAFAFA; border: 1px solid var(--line); border-radius: 14px; }

/* ---------- The close ---------- */
.plans ~ .post-cta, .cmp4-hero ~ .post-cta {
  position: relative; overflow: hidden; margin-top: 96px; padding: 72px 24px;
  background: #fff; border: 1px solid var(--outline); border-radius: 28px; box-shadow: var(--shadow-riso);
}
.plans ~ .post-cta::before, .cmp4-hero ~ .post-cta::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 260px at 50% 0%, rgba(239,74,43,.12), transparent 70%),
    linear-gradient(to right, rgba(10,10,11,.05) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(to bottom, rgba(10,10,11,.05) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 10%, #000 10%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 90% at 50% 10%, #000 10%, transparent 75%);
}
.plans ~ .post-cta > *, .cmp4-hero ~ .post-cta > * { position: relative; }
.plans ~ .post-cta h2, .cmp4-hero ~ .post-cta h2 { font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.04em; }
.plans ~ .post-cta .btn, .cmp4-hero ~ .post-cta .btn { min-height: 50px; padding: 14px 26px; }

/* Proof numbers: the homepage's stat row. */
.cmp4-cred { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); }
.cmp4-cred .cred-grid { gap: 0; }
.cmp4-cred .cred-item { align-items: flex-start; text-align: left; padding: 0 24px; }
.cmp4-cred .cred-item:first-child { padding-left: 0; }
.cmp4-cred .cred-item + .cred-item { border-left: 1px solid var(--line); }
.cmp4-cred .cred-n { font-size: clamp(26px, 2.6vw, 34px); font-weight: 650; letter-spacing: -0.035em; color: var(--ink); }
.cmp4-cred .cred-k { font-family: "Geist", -apple-system, system-ui, sans-serif; font-size: 13.5px; letter-spacing: 0; text-transform: none; color: var(--muted); }

/* ---------- Read further: link cards ---------- */
.cmp4-out { margin-top: 96px; }
.cmp4-out > h2 { font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.04em; }
.cmp4-out h3 { margin-top: 44px; font-size: 11.5px; letter-spacing: .08em; color: var(--muted); font-weight: 500; }
.cmp4-out h3 + p { margin-top: 6px; color: var(--nav-ink); }
.cmp4-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.cmp4-links li {
  position: relative; padding: 16px 18px; border: 1px solid var(--outline); border-radius: 16px; background: #fff;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .2s;
}
.cmp4-links li::before { display: none; }
.cmp4-links a { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; }
.cmp4-links a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
@media (hover: hover) {
  .cmp4-links li:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: #D4D4D8; }
  .cmp4-links li:hover a { color: var(--primary); }
}

@media (max-width: 720px) {
  .cmp4-hero { padding: 40px 0 24px; }
  .cmp4-hero .lede { font-size: 17px; }
  .cmp4 { border-radius: 18px; }
  .plans { margin-top: 80px; }
  .plans ~ .post-cta, .cmp4-hero ~ .post-cta { padding: 52px 18px; border-radius: 22px; }
  .cmp4-cred .cred-item { padding: 0 14px; }
  .cmp4-cred .cred-item:nth-child(odd) { padding-left: 0; border-left: 0; }
}