/* Case AI landing page. Every selector is scoped under .case-lp so nothing leaks into the other marketing pages.
   Ported from case/landing/case-ai-landing.html (23 Oct 2026). */
/* Layout: the copy column of the s2reason.com home hero (top question, headline, subhead, two checks,
   callout, button, guarantee), left aligned in a 1200px wrap. Tokens are the site's own
   (s2reason-site marketing.css); light only on purpose, the site itself is light.
   */
.case-lp {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --body: #525252;
  --mut: #737373;
  --hair: #e5e5e5;
  --blue: #1568c9;
  --btn: #1568c9;
  --btn-h: #0f5bb8;
  --btn-fg: #ffffff;
  --tint: #fff4c2;
  --tint-blue: #e8f2fe;
  --deep-blue: #0f4c93;
  --warn: rgb(202 138 4 / 0.1);
  --warn-fg: #854d0e;
  --warn-ring: rgb(202 138 4 / 0.3);
  --warn-icon: #ca8a04;
  --warn-strong-bg: #fde68a;
  --warn-strong-fg: #422006;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --pad-x: 32px;
  color-scheme: light;
}
@media (max-width: 680px){ .case-lp { --pad-x: 24px; } }

.case-lp {
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  line-height: normal;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding-block: 0 48px;
}
/* The page was drawn in a plain document (content-box). The site's reset sets border-box everywhere, so put it back inside this page. */
.case-lp *, .case-lp *::before, .case-lp *::after { box-sizing: content-box; }
.case-lp .wrap, .case-lp .topbar-in, .case-lp .btn { box-sizing: border-box; }
.case-lp .wrap { max-width: 1200px; margin: 0 auto; padding-left: max(var(--pad-x), env(safe-area-inset-left, 0px)); padding-right: max(var(--pad-x), env(safe-area-inset-right, 0px)); width: 100%; }

.case-lp .hero-copy { max-width: 520px; padding-top: 40px; }
.case-lp main.wrap { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); column-gap: 48px; align-items: center; }
.case-lp .hero-shot { margin: 0; min-width: 0; padding-top: 12px; }
.case-lp .hero-shot img { display: block; width: 100%; max-width: 760px; height: auto; margin-left: auto; }
@media (max-width: 980px){
  .case-lp main.wrap { display: block; }
  .case-lp .hero-shot { padding: 28px 0 40px; }
  .case-lp .hero-shot img { margin: 0 auto; }
}
.case-lp .topbar { background: var(--warn-strong-bg); border-bottom: 1px solid rgb(202 138 4 / 0.55); color: var(--warn-strong-fg); }
.case-lp .topbar-in { max-width: 1200px; margin: 0 auto; padding: 10px max(var(--pad-x), env(safe-area-inset-right, 0px)) 10px max(var(--pad-x), env(safe-area-inset-left, 0px)); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 14px; text-align: center; }
.case-lp .topbar-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; font-weight: 500; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.08em; color: var(--warn-fg); }
.case-lp .topbar-tag::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--warn-icon); }
.case-lp .topbar-q { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; letter-spacing: -0.005em; color: var(--warn-strong-fg); }
.case-lp .topbar-cases { margin: 0; font-style: italic; font-size: 13px; line-height: 1.4; color: var(--warn-fg); }
.case-lp h1 {
  margin: 0; max-width: 520px; font-size: clamp(30px, 0.11rem + 8vw, 50px); font-weight: 550;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--ink);
}
.case-lp h1 em { display: block; font-style: normal; color: var(--blue); text-wrap: balance; }
.case-lp .hero-sub { margin: 18px 0 0; max-width: 470px; font-size: 17px; line-height: 1.5; color: var(--body); }

.case-lp .hero-bullets { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 11px; text-align: left; }
.case-lp .hero-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.45; color: var(--body); }
.case-lp .hero-bullets li > span { text-wrap: balance; }
.case-lp .hero-bullets b, .case-lp .hero-note b { font-weight: 600; color: var(--ink); }
.case-lp .hero-bullets svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--blue); }

.case-lp .hero-note { margin: 18px 0 0; padding: 2px 0 2px 14px; border-left: 2px solid var(--blue); text-align: left; }
.case-lp .hero-note-tag {
  display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue);
}
.case-lp .hero-note p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); text-wrap: balance; }

.case-lp .hero-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.case-lp .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans);
  font-size: 15px; font-weight: 500; letter-spacing: -0.005em; line-height: 1; padding: 14px 24px;
  min-height: 48px; border-radius: 6px; border: 1px solid transparent; white-space: nowrap;
  background: var(--btn); color: var(--btn-fg); transition: background 0.15s ease;
}
.case-lp .btn:hover { background: var(--btn-h); }
.case-lp .hero-guar { margin: 0; font-size: 13px; line-height: 1.4; color: var(--mut); text-wrap: balance; }

@media (max-width: 680px){
  .case-lp .hero-copy { padding-top: 28px; }
  .case-lp .hero-sub { font-size: 15px; max-width: none; }
  .case-lp .hero-bullets li { font-size: 15px; gap: 8px; }
  .case-lp .hero-bullets svg { width: 16px; height: 16px; flex-basis: 16px; }
  .case-lp .hero-note p { font-size: 13px; }
  .case-lp .hero-guar { font-size: 12px; }
  .case-lp .hero-cta .btn { width: 100%; }
}

/* ===== Landing page sections (below the approved hero) ===== */
:root:has(.case-lp) { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce){ .case-lp { scroll-behavior: auto; } }
.case-lp { padding-block: 0; }
.case-lp a { color: inherit; }
.case-lp a:focus-visible, .case-lp .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.case-lp .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* header */
.case-lp .hd { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--hair); }
.case-lp .hd-row { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.case-lp .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.case-lp .wm { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; color: var(--ink); }
.case-lp .wm i { font-style: normal; font-weight: 500; color: var(--mut); margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--hair); }
.case-lp .hd-links { display: flex; align-items: center; gap: 4px; }
.case-lp .hd-links > a:not(.btn) { color: var(--body); font-size: 14px; font-weight: 500; text-decoration: none; padding: 13px 12px; }
.case-lp .hd-links > a:not(.btn) { border-radius: 6px; transition: color 0.15s ease, background 0.15s ease; }
.case-lp .hd-links > a:not(.btn):hover { color: var(--ink); background: #f5f5f5; }
.case-lp .btn-hd { font-size: 14px; padding: 11px 18px; min-height: 42px; margin-left: 8px; text-decoration: none; }
.case-lp .hd-links .signin { min-height: 44px; box-sizing: border-box; }
.case-lp a.btn { text-decoration: none; }
.case-lp .btn-ghost { background: #fff; color: var(--ink); border-color: var(--hair); }
.case-lp .btn-ghost:hover { background: #fafafa; border-color: var(--ink); }
@media (max-width: 1040px){ .case-lp .hd-links > a:not(.btn) { padding-left: 8px; padding-right: 8px; } .case-lp .btn-hd { padding-left: 14px; padding-right: 14px; } }
@media (max-width: 900px){ .case-lp .hd-links > a:not(.btn) { display: none; } .case-lp .btn-hd { display: none; } .case-lp .hd-links .signin { display: inline-block !important; } }

/* section scaffolding */
.case-lp .sec { padding: 96px 0; border-top: 1px solid var(--hair); }
.case-lp .eyebrow { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue); border-bottom: 1px solid currentColor; padding-bottom: 6px; margin-bottom: 20px; }
.case-lp h2 { margin: 0; font-size: clamp(30px, 1.5rem + 1.6vw, 42px); font-weight: 550; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); text-wrap: balance; max-width: 760px; }
.case-lp h3 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.case-lp .lede { margin: 16px 0 0; font-size: 17px; line-height: 1.55; color: var(--body); max-width: 640px; }
.case-lp .lede strong, .case-lp .sec p strong { color: var(--ink); font-weight: 600; }
.case-lp .shead { margin-bottom: 56px; }
@media (max-width: 760px){ .case-lp .sec { padding: 64px 0; } .case-lp .shead { margin-bottom: 40px; } .case-lp .lede { font-size: 16px; } }

/* proof strip */
.case-lp .strip { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: #fff; }
.case-lp .strip-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.case-lp .strip-item { padding: 28px 28px 28px 0; }
.case-lp .strip-item + .strip-item { padding-left: 28px; border-left: 1px solid var(--hair); }
.case-lp .strip-item b { display: block; font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.case-lp .strip-item span { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--body); }
@media (max-width: 1060px){ .case-lp .strip-item { padding-right: 16px; } .case-lp .strip-item + .strip-item { padding-left: 16px; } }
@media (max-width: 560px){ .case-lp .strip-grid { grid-template-columns: 1fr; } .case-lp .strip-item + .strip-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); } }

/* cards */
.case-lp .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.case-lp .cards.two { grid-template-columns: repeat(2, 1fr); }
.case-lp .cards.four { grid-template-columns: repeat(4, 1fr); }
.case-lp .card { background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 28px 24px 24px; display: flex; flex-direction: column; }
.case-lp .card h3 { margin-bottom: 8px; }
.case-lp .card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--mut); }
.case-lp .pull { margin: 40px 0 0; font-size: 19px; line-height: 1.45; letter-spacing: -0.01em; color: var(--ink); font-weight: 500; max-width: 760px; text-wrap: balance; }
/* your judgment: open columns under a rule */
.case-lp #judgment .cards { gap: 40px; }
.case-lp #judgment .card { border: 0; border-top: 2px solid var(--ink); border-radius: 0; padding: 24px 0 0; background: transparent; }
@media (max-width: 980px){ .case-lp .cards, .case-lp .cards.four { grid-template-columns: repeat(2, 1fr); } .case-lp #judgment .cards { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
@media (max-width: 760px){ .case-lp #judgment .cards { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 640px){ .case-lp .cards, .case-lp .cards.two, .case-lp .cards.four { grid-template-columns: 1fr; } }

/* steps */
.case-lp .steps { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hair); }
.case-lp .step { padding: 28px 28px 8px 0; display: flex; flex-direction: column; align-items: flex-start; }
.case-lp .step + .step { padding-left: 28px; border-left: 1px solid var(--hair); }
.case-lp .step .n { font-family: var(--mono); font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--blue); }
.case-lp .step h3 { margin: 10px 0 8px; font-size: 18px; }
.case-lp .step p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; color: var(--mut); }
.case-lp .chipb { display: inline-block; margin-top: auto; font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--blue); background: var(--tint-blue); border-radius: 5px; padding: 4px 8px; }
@media (max-width: 980px){ .case-lp .steps { grid-template-columns: repeat(2, 1fr); } .case-lp .step:nth-child(3) { padding-left: 0; border-left: 0; } .case-lp .step:nth-child(n+3) { border-top: 1px solid var(--hair); margin-top: 24px; } }
@media (max-width: 560px){ .case-lp .steps { grid-template-columns: 1fr; } .case-lp .step + .step { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); margin-top: 24px; } }

/* feature rows */
.case-lp .feat { display: grid; grid-template-columns: minmax(0, 0.74fr) minmax(0, 1.26fr); gap: 56px; align-items: center; }
.case-lp .feat + .feat { margin-top: 96px; }
.case-lp .feat.flip { grid-template-columns: minmax(0, 1.26fr) minmax(0, 0.74fr); }
.case-lp .feat.flip .feat-img { order: -1; }
.case-lp .feat-img { margin: 0; min-width: 0; }
.case-lp .feat-img img { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; }
.case-lp .feat-copy .eyebrow { margin-bottom: 18px; }
.case-lp .feat-copy h3 { font-size: clamp(24px, 1.2rem + 1vw, 32px); font-weight: 550; letter-spacing: -0.025em; line-height: 1.15; text-wrap: balance; }
.case-lp .feat-copy p { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--body); }
.case-lp .ticks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 11px; }
.case-lp .ticks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--body); }
.case-lp .ticks svg { width: 18px; height: 18px; flex: 0 0 18px; margin-top: 2px; color: var(--blue); }
.case-lp .ticks b { color: var(--ink); font-weight: 600; }
@media (max-width: 1060px){ .case-lp .feat, .case-lp .feat.flip { grid-template-columns: 1fr; gap: 28px; } .case-lp .feat-copy { max-width: 640px; } .case-lp .feat-img img { max-width: 720px; margin: 0; } .case-lp .feat.flip .feat-img { order: 0; } .case-lp .feat + .feat { margin-top: 64px; } }


/* pricing (self-contained: .pr, .plan, .vs, .incl; copy this block with the section to reuse it in the app) */
.case-lp .pr { position: relative; max-width: 1080px; margin: 0 auto; }
.case-lp .pr-radio { position: fixed; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.case-lp .pr-head { text-align: center; }
.case-lp .pr-head .eyebrow { margin-bottom: 24px; }
.case-lp .pr-head h2 { margin: 0 auto; text-align: center; max-width: 720px; }
.case-lp .pr-head .lede { margin: 16px auto 0; text-align: center; max-width: 460px; text-wrap: balance; }
.case-lp .pr-togglerow { position: relative; display: flex; justify-content: center; margin: 32px 0 48px; }
.case-lp .pr-track { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; width: 280px; padding: 4px; border: 1px solid var(--hair); border-radius: 999px; background: #fafafa; }
.case-lp .pr-track::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--btn); transition: transform 0.2s ease-out; }
.case-lp #bill-y:checked ~ .pr-togglerow .pr-track::before { transform: translateX(100%); }
.case-lp .pr-track label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 999px; font-size: 14px; font-weight: 500; line-height: 1; color: var(--body); cursor: pointer; transition: color 0.2s ease-out; }
.case-lp .pr-track label:hover { color: var(--ink); }
.case-lp #bill-m:checked ~ .pr-togglerow label[for="bill-m"], .case-lp #bill-y:checked ~ .pr-togglerow label[for="bill-y"] { color: #fff; }
.case-lp #bill-m:focus-visible ~ .pr-togglerow label[for="bill-m"], .case-lp #bill-y:focus-visible ~ .pr-togglerow label[for="bill-y"] { outline: 2px solid var(--blue); outline-offset: 2px; }
.case-lp .pr-save { position: absolute; left: calc(50% + 140px + 16px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 8px 12px; border: 1px solid var(--hair); border-radius: 999px; background: #fff; font-size: 12px; font-weight: 500; line-height: 1; color: var(--ink); }
.case-lp .swap { display: grid; }
.case-lp .swap > * { grid-area: 1 / 1; margin: 0; transition: opacity 0.15s ease; }
.case-lp .swap .m { opacity: 0; visibility: hidden; }
.case-lp #bill-m:checked ~ .plans .swap .m { opacity: 1; visibility: visible; }
.case-lp #bill-m:checked ~ .plans .swap .y { opacity: 0; visibility: hidden; }
.case-lp .plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.case-lp .plan { background: #fff; border: 1px solid var(--hair); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; }
.case-lp .plan.rec { border: 2px solid var(--ink); padding: 31px; }
.case-lp .plan .pn { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.case-lp .plan .pn h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 32px; }
.case-lp .plan .pill { display: inline-block; background: var(--ink); color: #fff; font-size: 12px; font-weight: 500; line-height: 16px; padding: 4px 10px; border-radius: 999px; }
.case-lp .plan .price { margin-top: 24px; height: 56px; align-items: baseline; font-variant-numeric: tabular-nums; }
.case-lp .plan .price p { display: flex; align-items: baseline; gap: 8px; line-height: 56px; }
.case-lp .plan .price b { font-size: 48px; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); }
.case-lp .plan .price small { font-size: 16px; line-height: 24px; color: var(--body); }
.case-lp .plan .bill { margin-top: 8px; height: 20px; white-space: nowrap; font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; }
.case-lp .plan .bill p span { display: block; color: var(--body); }
.case-lp .plan .bill p span:first-child { font-weight: 500; color: var(--ink); }
.case-lp .plan .btn { margin-top: 24px; width: 100%; min-height: 44px; padding: 12px 16px; font-size: 15px; white-space: normal; text-align: center; line-height: 1.2; }
.case-lp .plan .btn-out { background: #fff; color: var(--btn); border-color: var(--btn); }
.case-lp .plan .btn-out:hover { background: #fafafa; }
.case-lp .plan hr { border: 0; border-top: 1px solid var(--hair); margin: 24px 0 0; width: 100%; }
.case-lp .plan .seats { margin: 24px 0 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); }
.case-lp .plan .seatsub { margin: 4px 0 0; min-height: 20px; font-size: 13px; line-height: 20px; color: var(--body); }
.case-lp .plan .train { margin: 12px 0 0; font-size: 13px; line-height: 20px; font-weight: 600; color: var(--blue); }
.case-lp .plan .ulabel { margin: 16px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; font-size: 13px; line-height: 20px; font-weight: 500; color: var(--body); }
.case-lp .plan .usage { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.case-lp .plan .usage li { font-size: 14px; line-height: 22px; color: var(--body); }
.case-lp .plan .usage b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.case-lp .pr-note { margin: 24px 0 0; text-align: center; font-size: 14px; line-height: 22px; color: var(--body); font-variant-numeric: tabular-nums; }
.case-lp .incl { margin-top: 64px; }
.case-lp .incl h3, .case-lp .vs h3 { text-align: center; font-size: 24px; font-weight: 600; letter-spacing: -0.03em; line-height: 32px; }
.case-lp .incl-row { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--hair); border-radius: 12px; background: #fff; }
.case-lp .incl-row > div { padding: 24px; border-left: 1px solid var(--hair); }
.case-lp .incl-row > div:first-child { border-left: 0; }
.case-lp .incl-row b { display: block; font-size: 15px; line-height: 22px; font-weight: 600; color: var(--ink); }
.case-lp .incl-row p { margin: 6px 0 0; font-size: 14px; line-height: 22px; color: var(--body); }
.case-lp .vs { margin-top: 64px; }
.case-lp .vs-intro { margin: 16px auto 0; max-width: 560px; text-align: center; font-size: 16px; line-height: 24px; color: var(--body); text-wrap: balance; }
.case-lp .vs .m { display: none; }
.case-lp #bill-m:checked ~ .vs .m { display: inline; }
.case-lp #bill-m:checked ~ .vs .y { display: none; }
.case-lp .vs-foot { margin: 16px auto 0; max-width: 720px; text-align: center; font-size: 13px; line-height: 20px; color: var(--body); }
.case-lp .fine { margin: 32px auto 0; font-size: 13.5px; line-height: 1.5; color: var(--body); max-width: 640px; text-align: center; text-wrap: balance; }
.case-lp main.wrap { padding-bottom: 48px; }
@media (max-width: 960px){
  .case-lp .plans { grid-template-columns: 1fr; gap: 16px; max-width: 480px; margin: 0 auto; }
  .case-lp .plan.rec { order: -1; }
  .case-lp .plan { padding: 24px; }
  .case-lp .plan.rec { padding: 23px; }
  .case-lp .plan .btn { min-height: 48px; }
  .case-lp .incl-row { grid-template-columns: 1fr; }
  .case-lp .incl-row > div { border-left: 0; border-top: 1px solid var(--hair); padding: 16px 20px; }
  .case-lp .incl-row > div:first-child { border-top: 0; }
}
@media (max-width: 640px){
  .case-lp .pr-togglerow { flex-direction: column; align-items: center; gap: 12px; margin-bottom: 32px; }
  .case-lp .pr-save { position: static; transform: none; }
}

.case-lp .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* guarantee band */
.case-lp .bandwrap { padding: 0 0 96px; }
.case-lp .band { background: var(--tint-blue); border: 1px solid rgba(21, 104, 201, 0.25); border-radius: 12px; padding: 44px 48px; display: flex; align-items: center; gap: 32px; }
.case-lp .band > div { flex: 1 1 auto; }
.case-lp .band h2 { font-size: clamp(24px, 1.2rem + 1.4vw, 32px); max-width: 640px; }
.case-lp .band p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--body); max-width: 620px; }
@media (max-width: 860px){ .case-lp .band { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 20px; } .case-lp .band::before { flex-basis: 48px; width: 48px; height: 48px; background-size: 24px 24px; } .case-lp .bandwrap { padding-bottom: 64px; } .case-lp .band .btn { width: 100%; } }

/* mid-page prompt, band link */
.case-lp .band p a { color: var(--blue); }

/* faq */
.case-lp #faq .wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 72px; align-items: start; }
.case-lp #faq .shead { margin-bottom: 0; position: sticky; top: 96px; }
@media (max-width: 900px){ .case-lp #faq .wrap { display: block; } .case-lp #faq .shead { position: static; margin-bottom: 32px; } }
.case-lp .faq { max-width: 820px; border-top: 1px solid var(--hair); }
.case-lp #faq .faq { max-width: none; }
.case-lp .faq details { border-bottom: 1px solid var(--hair); }
.case-lp .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-size: 17px; font-weight: 550; letter-spacing: -0.01em; color: var(--ink); min-height: 44px; }
.case-lp .faq summary::-webkit-details-marker { display: none; }
.case-lp .faq summary::after { content: "+"; flex: 0 0 28px; width: 28px; height: 28px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px solid var(--hair); border-radius: 50%; background: #fff; font-size: 18px; font-weight: 400; color: var(--mut); line-height: 1; padding-bottom: 2px; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.case-lp .faq summary:hover { color: var(--blue); }
.case-lp .faq summary:hover::after { border-color: var(--blue); color: var(--blue); }
.case-lp .faq details[open] summary::after { content: "\2212"; background: var(--ink); border-color: var(--ink); color: #fff; }
.case-lp .faq summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.case-lp .faq .ans { padding: 0 0 22px; font-size: 15.5px; line-height: 1.6; color: var(--body); max-width: 720px; }
.case-lp .faq .ans a { color: var(--blue); }

/* final CTA + footer */
.case-lp .finalwrap { padding: 0 0 96px; }
.case-lp .final { background: radial-gradient(ellipse 70% 90% at 50% 0%, rgba(21, 104, 201, 0.4), rgba(21, 104, 201, 0) 70%), var(--ink); border-radius: 12px; padding: 80px 48px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.case-lp .final h2 { color: #fafafa; max-width: 680px; }
.case-lp .final p { margin: 0; max-width: 560px; color: #c4c4c4; font-size: 16px; line-height: 1.6; text-wrap: balance; }
.case-lp .final .btn { background: #fff; color: var(--ink); min-height: 52px; padding: 16px 28px; }
.case-lp .final .btn:focus-visible { outline-color: #fff; }
.case-lp .final .btn:hover { background: #e5e5e5; }
.case-lp .final small { color: #a3a3a3; font-size: 13px; }
@media (max-width: 760px){ .case-lp .finalwrap { padding-bottom: 64px; } .case-lp .final { padding: 48px 24px; } .case-lp .final .btn { width: 100%; } }
.case-lp .foot { background: var(--ink); color: #a3a3a3; padding: 64px 0 40px; }
.case-lp .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.case-lp .foot .wm { color: #fafafa; }
.case-lp .foot-addr { font-style: normal; font-size: 13.5px; line-height: 1.7; color: #a3a3a3; margin-top: 18px; }
.case-lp .foot-col { display: flex; flex-direction: column; }
.case-lp .foot-h { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: #fafafa; margin: 0 0 16px; }
.case-lp .foot-col a { color: #a3a3a3; font-size: 13.5px; text-decoration: none; padding: 5px 0; }
.case-lp .foot-col a:hover { color: #fafafa; }
.case-lp .foot-bar { margin-top: 56px; border-top: 1px solid #262626; padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: #a3a3a3; }
@media (min-width: 861px){ .case-lp .foot-brand .brand { margin-top: -15px; } }
@media (max-width: 860px){ .case-lp .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .case-lp .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 1060px){ .case-lp .foot-col a { padding: 14px 0; } }

/* ===== Round 2 design ===== */
.case-lp .card h3 { text-wrap: balance; }
.case-lp .plan .price, .case-lp .step .n { font-variant-numeric: tabular-nums; }
/* in-section labels read as product tags (like BRIEF DRAFT in the app), not as a second section eyebrow */
.case-lp .feat-copy .eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.3; color: var(--deep-blue); background: var(--tint-blue); border-bottom: 0; border-radius: 5px; padding: 4px 8px; }
/* pricing: the two "included" boxes sit side by side under the plans, one row, not two stacked panels */
@media (min-width: 901px){
  .case-lp #pricing .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .case-lp #pricing .included + .included { margin-top: 24px; }
  .case-lp #pricing .wrap > * { grid-column: 1 / -1; }
  .case-lp #pricing .included:has(+ .included) { grid-column: 1; }
  .case-lp #pricing .included + .included { grid-column: 2; }
  .case-lp #pricing .included:has(+ .included) ul { grid-template-columns: 1fr 1fr; }
}
.case-lp #pricing .included + .included ul { grid-template-columns: 1fr; }
.case-lp #pricing .included { margin-top: 16px; }
.case-lp #pricing .plans + .included { margin-top: 24px; }

/* ===== Round 3 (Burak's notes, 21 Oct) ===== */
.case-lp .verdict { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; vertical-align: 2px; font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; color: #fff; border-radius: 6px; padding: 6px 10px; }
.case-lp .verdict::before { font-size: 13px; font-weight: 700; letter-spacing: 0; }
.case-lp .verdict.bad { background: #be123c; }
.case-lp .verdict.bad::before { content: "\2715"; }
.case-lp .verdict.good { background: #15803d; }
.case-lp .verdict.good::before { content: "\2713"; }
.case-lp .faq .ans ul { list-style: disc; margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; }

.case-lp .diff { background: #0b1f3a; color: #c9d6e8; padding: 96px 0; }
.case-lp .diff .eyebrow { color: #8cc0ff; }
.case-lp .diff h2 { color: #fff; max-width: 820px; }
.case-lp .diff .lede { color: #c9d6e8; max-width: 680px; }
.case-lp .diff .lede strong { color: #fff; }
.case-lp .diff-head { margin-bottom: 56px; }
.case-lp .diff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgb(255 255 255 / 0.16); }
.case-lp .diff-item { padding: 32px 32px 8px 0; }
.case-lp .diff-item + .diff-item { padding-left: 32px; border-left: 1px solid rgb(255 255 255 / 0.16); }
.case-lp .diff-n { display: block; font-family: var(--mono); font-size: 28px; font-weight: 500; color: #8cc0ff; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.case-lp .diff-item h3 { margin: 14px 0 8px; color: #fff; font-size: 20px; }
.case-lp .diff-item p { margin: 0; font-size: 15px; line-height: 1.6; color: #c9d6e8; }
.case-lp .diff-foot { margin-top: 48px; display: flex; align-items: center; justify-content: space-between; gap: 24px 32px; flex-wrap: wrap; padding: 22px 24px; border-radius: 12px; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); }
.case-lp .diff-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; counter-reset: s; font-size: 14.5px; color: #c9d6e8; }
.case-lp .diff-steps li { counter-increment: s; position: relative; padding-left: 31px; line-height: 22px; }
.case-lp .diff-steps li::before { content: counter(s); display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; position: absolute; left: 0; top: 0; border-radius: 50%; background: #8cc0ff; color: #0b1f3a; font-size: 12px; font-weight: 600; flex: none; }
.case-lp .diff-steps li:not(:last-child) { margin-right: 22px; }
.case-lp .diff-steps b { color: #fff; font-weight: 600; margin-right: 4px; }
.case-lp .diff .btn { background: #fff; color: #0b1f3a; }
.case-lp .diff .btn:hover { background: #e6eefb; }
.case-lp .diff-proof { margin: 28px 0 0; font-size: 14px; line-height: 1.55; color: #9fb3cf; }
.case-lp .diff a:focus-visible { outline-color: #fff; }
@media (max-width: 900px){
  .case-lp .diff-grid { grid-template-columns: 1fr; }
  .case-lp .diff-item, .case-lp .diff-item + .diff-item { padding: 28px 0 4px; border-left: 0; }
  .case-lp .diff-item + .diff-item { border-top: 1px solid rgb(255 255 255 / 0.16); margin-top: 24px; }
  .case-lp .diff-steps { flex-direction: column; }
}
@media (max-width: 760px){ .case-lp .diff { padding: 64px 0; } .case-lp .diff-head { margin-bottom: 40px; } .case-lp .diff-foot { padding: 20px; } .case-lp .diff .btn { width: 100%; } }
/* ===== Design pass (22 Oct): ledger layout =====
   Sections open on a numbered rail (01, 02 ...) with the headline beside it. Cards become ruled rows.
   No tinted bands, no icon boxes, no gradient stages, no glow. Product images carry exhibit captions.
   Blue is kept for buttons, links and the hero tag only. Tokens are unchanged. */
.case-lp { counter-reset: sec ex; }
.case-lp { --rail: calc(25% + 24px); }
.case-lp .sec, .case-lp .diff { padding: 112px 0; }
.case-lp .topbar { background: var(--ink); border-bottom: 0; color: #fafafa; }
.case-lp .topbar-in { justify-content: flex-start; gap: 4px 16px; }
.case-lp .topbar-tag { color: #fbbf24; }
.case-lp .topbar-tag::before { background: #fbbf24; }
.case-lp .topbar-q { color: #fafafa; }
.case-lp .topbar-cases { color: #a3a3a3; font-style: normal; font-size: 12.5px; }

/* hero: one column of copy in reading order (headline, facts, price note, button), the product on the right */
.case-lp h1 { font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; font-size: clamp(34px, 1.2rem + 4.6vw, 72px); }
.case-lp h1 { text-wrap: balance; }
.case-lp h1 em { margin-top: 14px; font-size: 0.5em; line-height: 1.25; letter-spacing: -0.02em; font-weight: 450; color: var(--mut); }
@media (max-width: 980px){ .case-lp h1 em { font-size: 0.56em; } }
.case-lp .hero-bullets svg, .case-lp .ticks svg { color: var(--ink); }
.case-lp .hero-bullets svg { color: var(--blue); }
.case-lp .hero-note { padding: 2px 0 2px 20px; border-left: 2px solid var(--blue); }
.case-lp .hero-note-tag { color: var(--blue); }
.case-lp .hero-note p { font-size: 16px; text-wrap: pretty; }
@media (min-width: 981px){
  .case-lp main.wrap { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); column-gap: 48px; align-items: start; padding-top: 72px; padding-bottom: 40px; }
  .case-lp .hero-copy { max-width: 480px; padding-top: 0; }
  .case-lp h1 { max-width: none; font-size: clamp(40px, 1.6rem + 2.2vw, 54px); }
  .case-lp .hero-bullets { margin-top: 36px; }
  .case-lp .hero-note { margin-top: 32px; }
  .case-lp .hero-cta { margin-top: 36px; }
  .case-lp .hero-shot { margin-top: 0; padding-top: 0; }
  .case-lp .hero-shot img { max-width: none; width: 100%; margin: 0; }
  .case-lp .hero-bullets li { font-size: 17px; }
}
@media (min-width: 1280px){ .case-lp .hero-shot img { width: calc(100% + 72px); } }
@media (max-width: 980px){ .case-lp .hero-note { margin-top: 28px; } }

/* proof strip: a ledger row with a small kicker, no icons */
.case-lp .strip { border-bottom: 1px solid var(--hair); }
.case-lp .strip-item { display: block; padding: 28px 28px 32px 0; }
.case-lp .strip-item .k { margin: 0 0 12px; font-family: var(--mono); font-style: normal; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mut); }
.case-lp .strip-item b { font-size: 16px; }

/* section head: numbered rail on the left, headline and lede on the right */
.case-lp .shead, .case-lp .diff-head, .case-lp .pr-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 32px; align-items: start; text-align: left; margin-bottom: 72px; }
.case-lp .pr-head { margin-bottom: 0; }
.case-lp .shead > .eyebrow, .case-lp .diff-head > .eyebrow, .case-lp .pr-head > .eyebrow { grid-column: 1; }
.case-lp .shead > :not(.eyebrow), .case-lp .diff-head > :not(.eyebrow), .case-lp .pr-head > :not(.eyebrow) { grid-column: 2; }
.case-lp .shead .eyebrow, .case-lp .diff-head .eyebrow, .case-lp .pr-head .eyebrow { counter-increment: sec; display: block; margin: 0; padding: 6px 0 0; border: 0; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; line-height: 1.5; color: var(--ink); }
.case-lp .shead .eyebrow::before, .case-lp .diff-head .eyebrow::before, .case-lp .pr-head .eyebrow::before { content: counter(sec, decimal-leading-zero); display: block; margin-bottom: 10px; color: var(--mut); }
.case-lp h2 { font-size: clamp(30px, 1.4rem + 1.7vw, 46px); max-width: 840px; font-weight: 500; }
.case-lp .lede { margin-top: 24px; }
.case-lp .pr-head h2, .case-lp .pr-head .lede { margin-left: 0; margin-right: 0; text-align: left; }
.case-lp .pr-head .lede { max-width: 640px; }

/* what your firm gets: a real comparison, row against row */
.case-lp .cmp { width: 100%; border-collapse: collapse; table-layout: fixed; }
.case-lp .cmp th, .case-lp .cmp td { text-align: left; vertical-align: top; padding: 26px 32px; border-top: 1px solid var(--hair); font-size: 16px; font-weight: 400; line-height: 1.5; color: var(--body); }
.case-lp .cmp th:first-child, .case-lp .cmp td:first-child { padding-left: 0; color: var(--mut); }
.case-lp .cmp thead th { border-top: 0; border-bottom: 2px solid var(--ink); padding-top: 0; padding-bottom: 18px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.case-lp .cmp .ours { background: #fafafa; border-left: 1px solid var(--hair); }
.case-lp .cmp thead th.ours { background: transparent; }
.case-lp .cmp td.ours { padding-right: 32px; }
.case-lp .cmp b { color: var(--ink); font-weight: 600; }
@media (max-width: 760px){
  .case-lp .cmp, .case-lp .cmp tbody, .case-lp .cmp tr, .case-lp .cmp td { display: block; }
  .case-lp .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .case-lp .cmp tr { padding: 20px 0; border-top: 1px solid var(--hair); }
  .case-lp .cmp td, .case-lp .cmp td:first-child { padding: 0; border: 0; background: none; }
  .case-lp .cmp td.ours { margin-top: 14px; padding: 14px 16px; border-left: 2px solid var(--ink); background: #fafafa; }
  .case-lp .cmp td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
}

/* why we are different: flat black, no tint */
.case-lp .diff { background: var(--ink); color: #a3a3a3; }
.case-lp .diff .eyebrow { color: #fafafa; }
.case-lp .diff .eyebrow::before { color: #737373; }
.case-lp .diff .lede, .case-lp .diff-item p { color: #a3a3a3; }
.case-lp .diff-grid { border-top-color: #262626; }
.case-lp .diff-item + .diff-item { border-left-color: #262626; }
.case-lp .diff-n { color: #737373; }
.case-lp .strip + .sec, .case-lp .strip + .diff { border-top: 0; }
.case-lp .diff-foot { padding: 32px 0 0; border: 0; border-top: 1px solid #262626; border-radius: 0; background: none; }
.case-lp .diff-steps { color: #a3a3a3; }
.case-lp .diff-steps li::before { background: #fafafa; color: var(--ink); }
.case-lp .diff .btn { background: #fff; color: var(--ink); }
.case-lp .diff .btn:hover { background: #e5e5e5; }
.case-lp .diff-proof { color: #a3a3a3; }
@media (max-width: 900px){ .case-lp .diff-item + .diff-item { border-top-color: #262626; } }

/* product: copy beside a wide exhibit */
.case-lp .feat { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 64px; align-items: start; }
.case-lp .feat.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
.case-lp .feat + .feat { margin-top: 112px; }
.case-lp .feat-copy { padding-top: 4px; }
.case-lp .feat-copy .eyebrow { display: block; margin: 0 0 16px; padding: 0; border-radius: 0; background: none; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.case-lp .feat-copy h3 { font-weight: 500; }
.case-lp .feat-img { background: none; border: 0; border-radius: 0; padding: 0; }
.case-lp .feat-img picture { display: block; background: #f5f5f5; border: 1px solid var(--hair); border-radius: 12px; padding: 12px; }
.case-lp .feat-img img { max-width: none; width: 100%; margin: 0; }
.case-lp .feat-img figcaption { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--mut); }
.case-lp .feat-img figcaption b { margin-right: 10px; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 1060px){ .case-lp .feat, .case-lp .feat.flip { grid-template-columns: 1fr; gap: 28px; } .case-lp .feat + .feat { margin-top: 72px; } .case-lp .feat-img img { max-width: 720px; } }
@media (max-width: 640px){ .case-lp .feat-img picture { margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); border-left: 0; border-right: 0; border-radius: 0; padding: 12px 4px; } .case-lp .feat-img figcaption { padding: 0; } }

/* judgment: three columns under a heavy rule */
.case-lp #judgment .wrap { display: block; }
.case-lp #judgment .shead { margin-bottom: 56px; }
.case-lp #judgment .card { padding: 24px 0 0; }
.case-lp #judgment .card h3 { margin-bottom: 10px; }
.case-lp #judgment .card p { color: var(--body); }

/* security and tools: a spec sheet, term on the rail, detail beside it */
.case-lp #security .cards.four, .case-lp #firm .cards.four { display: block; background: none; border: 0; border-top: 1px solid var(--ink); border-radius: 0; overflow: visible; }
.case-lp #security .card, .case-lp #firm .card { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: 32px; padding: 30px 0; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: none; }
.case-lp #security .card h3, .case-lp #firm .card h3 { margin: 0; font-size: 18px; }
.case-lp #security .card p, .case-lp #firm .card p { max-width: 640px; font-size: 16px; line-height: 1.55; color: var(--body); }
@media (max-width: 760px){
  .case-lp #security .card, .case-lp #firm .card { grid-template-columns: 1fr; row-gap: 8px; padding: 22px 0; }
  .case-lp #security .card h3, .case-lp #firm .card h3 { margin: 0; font-size: 18px; }
}

/* pricing: head on the rail, everything else left aligned */
.case-lp .pr { max-width: none; margin: 0; }
.case-lp .pr-togglerow { justify-content: center; margin: 48px 0 40px; }
.case-lp .pr-note, .case-lp .vs-intro, .case-lp .vs-foot, .case-lp .fine { text-align: left; margin-left: 0; margin-right: 0; }
.case-lp .pr-note { max-width: 760px; }
.case-lp .incl h3, .case-lp .vs h3 { text-align: left; font-weight: 500; }
.case-lp .vs-intro { max-width: 640px; }

/* guarantees: heavy rule, title on the rail, the terms beside it */
.case-lp .band { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 0 32px; align-items: start; padding: 40px 0 0; border: 0; border-top: 2px solid var(--ink); border-radius: 0; background: none; }
.case-lp .band > div { display: contents; }
.case-lp .band h2 { grid-column: 1; grid-row: 1 / span 4; font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.case-lp .band p { grid-column: 2; max-width: 680px; margin: 0 0 16px; }
.case-lp .band .btn { grid-column: 2; justify-self: start; margin-top: 12px; }
@media (max-width: 860px){ .case-lp .band { display: block; padding-top: 32px; } .case-lp .band h2 { margin-bottom: 20px; } .case-lp .band .btn { margin-top: 12px; } }

/* faq: the list sits under the headline column */
.case-lp #faq .wrap { display: block; }
.case-lp #faq .shead { position: static; margin-bottom: 56px; }
.case-lp #faq .faq { margin-left: var(--rail); }
.case-lp .faq summary::after, .case-lp .faq details[open] summary::after { border: 0; background: none; color: var(--ink); font-size: 22px; }
.case-lp .faq summary:hover::after { border: 0; color: var(--blue); }
@media (max-width: 900px){ .case-lp #faq .faq { margin-left: 0; } }

/* final call: flat black, joined to the footer */
.case-lp .finalwrap { background: var(--ink); padding: 112px 0 96px; }
.case-lp .final { background: none; border-radius: 0; padding: 0; text-align: left; align-items: flex-start; gap: 28px; }
.case-lp .final h2 { max-width: 900px; font-size: clamp(36px, 1.6rem + 3vw, 64px); letter-spacing: -0.035em; }
.case-lp .final p { max-width: 600px; text-wrap: pretty; }
.case-lp .foot { border-top: 1px solid #262626; padding-top: 56px; }

@media (max-width: 760px){
  .case-lp .sec, .case-lp .diff { padding: 72px 0; }
  .case-lp .shead, .case-lp .diff-head, .case-lp .pr-head { display: block; margin-bottom: 40px; }
  .case-lp .pr-head { margin-bottom: 0; }
  .case-lp .shead .eyebrow, .case-lp .diff-head .eyebrow, .case-lp .pr-head .eyebrow { margin-bottom: 20px; padding-top: 0; }
  .case-lp .shead .eyebrow::before, .case-lp .diff-head .eyebrow::before, .case-lp .pr-head .eyebrow::before { display: inline; margin: 0 10px 0 0; }
  .case-lp .finalwrap { padding: 72px 0 64px; }
  .case-lp .bandwrap { padding-bottom: 72px; }
}

/* Symmetry pass (22 Oct): equal-length copy, balanced final CTA */
.case-lp .shead h2, .case-lp .diff-head h2, .case-lp .pr-head h2, .case-lp .final h2 { text-wrap: balance; }
.case-lp .finalwrap .final { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 64px; align-items: start; }
.case-lp .finalwrap .final h2 { grid-column: 1; grid-row: 1 / span 3; max-width: none; }
.case-lp .finalwrap .final p, .case-lp .finalwrap .final small { grid-column: 2; }
.case-lp .finalwrap .final .btn { grid-column: 2; justify-self: start; }
.case-lp .vs-foot, .case-lp .fine { max-width: 780px; }
@media (max-width: 640px){ .case-lp .hero-shot img { max-width: 360px; } .case-lp .hero-shot { padding-bottom: 8px; } }
@media (max-width: 860px){ .case-lp .finalwrap .final { display: flex; flex-direction: column; align-items: flex-start; } }

/* Conversion pass (22 Oct): phone header books, quieter phone top bar, no stranded words */
@media (max-width: 900px){ .case-lp .hd-links .btn-hd { display: inline-flex; padding: 8px 14px; min-height: 40px; font-size: 14px; } .case-lp .hd-links .signin { display: none !important; } }
/* top bar: citations verified 2026-10-23 (research-court-citations.md); shown from 641px up, the phone keeps the question only */
@media (max-width: 640px){ .case-lp .topbar-cases { display: none; } }
.case-lp .topbar-cases { flex-basis: 100%; text-align: left; text-wrap: balance; }
@media (max-width: 640px){ .case-lp .topbar-q { text-wrap: balance; } }
@media (max-width: 640px){ .case-lp .hd .wm { white-space: nowrap; } .case-lp .hd-links .btn-hd { padding: 8px 12px; min-height: 44px; font-size: 13px; } .case-lp .pr-track label { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } }
@media (max-width: 380px){ .case-lp .hd .wm i { display: none; } }
@media (max-width: 1060px){ .case-lp .hd-links .btn-hd, .case-lp .pr-track label { min-height: 44px; } }
.case-lp .cmp td, .case-lp .strip-item span, .case-lp .card p, .case-lp .incl-row p, .case-lp .diff-item p, .case-lp .ticks span, .case-lp .hero-bullets li > span { text-wrap: pretty; }
.case-lp .feat { align-items: center; }
.case-lp h1 > span { display: block; text-wrap: balance; }
@media (min-width: 981px){ .case-lp h1 { max-width: none; } }
.case-lp .vs-foot { max-width: none; text-wrap: pretty; }
/* Value stack in the pricing section (task #51) */
.case-lp .stack { margin: 0 0 56px; border: 1px solid var(--hair); border-radius: 12px; background: #fff; padding: 32px; }
.case-lp .stack h3 { margin: 8px 0 0; text-align: left; font-size: 28px; font-weight: 550; letter-spacing: -0.03em; line-height: 1.15; }
.case-lp .stack-sub { margin: 8px 0 0; font-size: 15px; line-height: 22px; color: var(--body); }
.case-lp .stack ul { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--hair); }
.case-lp .stack li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 32px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--hair); }
.case-lp .stack li b { display: block; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--ink); }
.case-lp .stack li p { margin: 2px 0 0; font-size: 14px; line-height: 22px; color: var(--body); max-width: 640px; }
.case-lp .stack-val, .case-lp .stack-total s { color: var(--mut); font-size: 16px; line-height: 24px; text-decoration-thickness: 1.5px; font-variant-numeric: tabular-nums; }
.case-lp .stack-total { display: flex; justify-content: space-between; gap: 24px; margin: 0; padding: 16px 0 0; font-size: 16px; line-height: 24px; color: var(--ink); font-weight: 600; }
.case-lp .stack-total b { margin-left: 12px; color: var(--ink); }
@media (max-width: 640px){ .case-lp .stack { padding: 24px 20px; } .case-lp .stack h3 { font-size: 24px; } .case-lp .stack li { column-gap: 16px; } .case-lp .stack-total { flex-direction: column; gap: 4px; } .case-lp .stack-total b { margin-left: 0; display: block; } }

.case-lp .wm i.foot-tag { border-color: #262626; color: #a3a3a3; }

/* Skip link: hidden until it takes keyboard focus (WCAG 2.4.1 bypass blocks). */
.case-lp .skip { position: absolute; left: 16px; top: -64px; z-index: 100; padding: 12px 16px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; }
.case-lp .skip:focus { top: 12px; outline: 2px solid var(--blue); outline-offset: 2px; }

/* The site's reset removes link underlines; links inside running text need more than color (WCAG 1.4.1). */
.case-lp p a:not(.btn), .case-lp .ans a:not(.btn), .case-lp li a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 900px){ .case-lp #judgment .cards { grid-template-columns: 1fr; gap: 32px; } .case-lp .strip-grid { grid-template-columns: 1fr; } .case-lp .strip-item + .strip-item { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); } .case-lp .strip-item { padding-right: 0; } }
.case-lp .pr-pick { margin: -16px 0 24px; text-align: center; font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.case-lp .pr-save { visibility: hidden; opacity: 0; transition: opacity 0.2s ease-out; }
.case-lp #bill-y:checked ~ .pr-togglerow .pr-save { visibility: visible; opacity: 1; }
/* savings comparison: two columns per firm size on one scale, the gap marked in green */
.case-lp .vs-cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; font-variant-numeric: tabular-nums; }
.case-lp .vs-card { --h: 240px; --c: var(--cy); padding: 28px 32px 24px; background: #fff; border: 1px solid var(--hair); border-radius: 12px; }
.case-lp #bill-m:checked ~ .vs .vs-card { --c: var(--cm); }
.case-lp .vs-ch { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.case-lp .vs-ch b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.case-lp .vs-ch span { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.case-lp .vs-plot { display: flex; gap: 48px; align-items: flex-end; width: max-content; max-width: 100%; margin: 28px auto 0; padding-right: 130px; border-bottom: 1px solid #a3a3a3; box-sizing: content-box; }
.case-lp .vs-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; width: 88px; height: calc(var(--h) + 36px); }
.case-lp .vs-amt { margin-bottom: 8px; font-size: 17px; font-weight: 600; line-height: 20px; color: var(--ink); }
.case-lp .vs-col.us .vs-amt { color: var(--blue); }
.case-lp .vs-colbar { display: block; width: 100%; border-radius: 3px 3px 0 0; background: #d4d4d8; height: calc(var(--h) * var(--g)); }
.case-lp .vs-col.us .vs-colbar { background: var(--blue); height: calc(var(--h) * var(--c)); }
.case-lp .vs-name { position: absolute; top: 100%; left: 50%; width: 124px; margin: 10px 0 0 -62px; font-size: 13px; line-height: 18px; text-align: center; color: var(--body); }
.case-lp .vs-col.us .vs-name { color: var(--ink); font-weight: 500; }
.case-lp .vs-col.other::after { content: ""; position: absolute; left: 100%; bottom: calc(var(--h) * var(--g)); width: 154px; border-top: 1px dashed #a3a3a3; }
.case-lp .vs-gap { position: absolute; left: calc(100% + 18px); bottom: calc(var(--h) * var(--c)); height: calc(var(--h) * (var(--g) - var(--c))); width: 0; border-left: 1.5px solid #15803d; }
.case-lp .vs-gap::before { content: ""; position: absolute; left: -19.5px; bottom: 0; width: 19px; border-top: 1.5px solid #15803d; }
.case-lp .vs-gap b { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 600; white-space: nowrap; color: #15803d; }
.case-lp .vs-sv { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin: 52px 0 0; padding-top: 18px; border-top: 1px solid var(--hair); font-size: 14px; color: var(--body); }
.case-lp .vs-sv .vs-k { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.case-lp .vs-sv b { font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: #15803d; }
.case-lp .vs-amt .m, .case-lp .vs-gap .m, .case-lp .vs-sv .m { display: none; }
.case-lp #bill-m:checked ~ .vs .vs-amt .m, .case-lp #bill-m:checked ~ .vs .vs-gap .m, .case-lp #bill-m:checked ~ .vs .vs-sv .m { display: inline; }
.case-lp #bill-m:checked ~ .vs .vs-amt .y, .case-lp #bill-m:checked ~ .vs .vs-gap .y, .case-lp #bill-m:checked ~ .vs .vs-sv .y { display: none; }
@media (max-width: 860px) { .case-lp .vs-cards { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .case-lp .vs-card { --h: 200px; padding: 24px 20px 20px; } .case-lp .vs-plot { gap: 32px; padding-right: 92px; } .case-lp .vs-col { width: 72px; } .case-lp .vs-col.other::after { width: 122px; } .case-lp .vs-name { width: 100px; margin-left: -50px; } .case-lp .vs-gap b { font-size: 14px; } }
/* final call to action: heading cap line level with the first line beside it, two checked notes */
.case-lp .finalwrap .final h2 { margin-top: -0.075em; }
.case-lp .final-notes { display: grid; gap: 8px; margin-top: 4px; font-size: 14px; line-height: 20px; color: #d4d4d4; }
.case-lp .final-notes span { display: flex; align-items: flex-start; gap: 10px; }
.case-lp .final-notes span::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; border-radius: 50%; background: rgba(255, 255, 255, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 8.4l2.3 2.3 4.7-4.9'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* Design polish pass (23 Oct): icons that make the page scannable, a visible guarantee, spacing fixes. No copy changes. */
.case-lp {
  --ok: #15803d;
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E");
  --i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L6 18M6 6l12 12'/%3E%3C/svg%3E");
}
/* every booking button (not the small header one) ends in an arrow, so it reads as the next step */
.case-lp .btn:not(.btn-hd)::after { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; }
@media (prefers-reduced-motion: no-preference){
  .case-lp .btn:not(.btn-hd)::after { transition: transform 0.15s ease; }
  .case-lp .btn:not(.btn-hd):hover::after { transform: translateX(3px); }
}
/* hero: the guarantee under the button gets a green shield and body color, centered under the full-width phone button */
.case-lp .hero-guar { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--body); }
.case-lp .hero-guar::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--ok); -webkit-mask: var(--i-shield) center / contain no-repeat; mask: var(--i-shield) center / contain no-repeat; }
@media (max-width: 680px){ .case-lp .hero-guar { align-self: stretch; justify-content: center; font-size: 13px; } }
/* comparison: an x beside each chat-app line, a green check beside each Case AI line */
@media (min-width: 761px){
  .case-lp .cmp tbody td { position: relative; }
  .case-lp .cmp tbody td:first-child { padding-left: 30px; }
  .case-lp .cmp tbody td.ours { padding-left: 62px; }
  .case-lp .cmp tbody td::before { content: ""; position: absolute; top: 29px; left: 0; width: 18px; height: 18px; background: #737373; -webkit-mask: var(--i-x) center / 14px no-repeat; mask: var(--i-x) center / 14px no-repeat; }
  .case-lp .cmp tbody td.ours::before { left: 32px; background: var(--ok); -webkit-mask-image: var(--i-check); mask-image: var(--i-check); -webkit-mask-size: 16px; mask-size: 16px; }
}
@media (max-width: 760px){ .case-lp .cmp td.ours::before { color: var(--ok); } }
/* security: each promise starts with a green shield, the same green as the "Secure" badge */
.case-lp #security .card h3 { display: flex; align-items: flex-start; gap: 10px; }
.case-lp #security .card h3::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 1px; background: var(--ok); -webkit-mask: var(--i-shield) center / contain no-repeat; mask: var(--i-shield) center / contain no-repeat; }
/* refund band: a seal above the headline so the guarantee is seen, not just read */
.case-lp .band h2::before { content: ""; display: block; width: 48px; height: 48px; margin-bottom: 20px; border: 1px solid #bbf7d0; border-radius: 50%; background: #f0fdf4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8.3-7 10-4-1.7-7-5.5-7-10V6l7-3z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E") center / 24px no-repeat; }
/* pricing: the value card no longer touches the headline; the yearly saving reads as money saved (green) */
.case-lp .stack { margin-top: 56px; }
@media (max-width: 760px){ .case-lp .stack { margin-top: 32px; } }
.case-lp .pr-save { border-color: #bbf7d0; background: #f0fdf4; color: var(--ok); font-weight: 600; }
/* the seal sits above the headline, so the terms beside it start level with the headline text */
@media (min-width: 861px){ .case-lp .band p:first-of-type { margin-top: 68px; } }
/* "training included" is a feature, not a link: a check in front says so */
.case-lp .plan .train { display: flex; align-items: center; gap: 8px; }
.case-lp .plan .train::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
@media (max-width: 760px){ .case-lp .cmp td.ours { border-left-color: var(--ok); } }
@media (max-width: 680px){ .case-lp .hero-cta .btn { white-space: normal; text-align: center; line-height: 1.3; } }
/* hero kicker: who the page is for, above the headline */
.case-lp .hero-kicker { margin: 0 0 16px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.4; color: var(--blue); }
@media (min-width: 981px){ .case-lp .hero-kicker { margin-bottom: 20px; } }
/* the header button now carries the full name; on phones it wraps to two lines so the header never scrolls sideways */
@media (max-width: 640px){ .case-lp .hd .btn-hd { white-space: normal; text-align: center; line-height: 1.2; max-width: 116px; padding: 6px 12px; } }

/* Verdict badges: soft tints like the section eyebrows (no solid red/green blocks); gray for the chat app, page green for Case AI */
.case-lp .verdict { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; border-radius: 5px; padding: 4px 8px; color: var(--body); background: #f0f0f0; box-shadow: inset 0 0 0 1px var(--hair); }
.case-lp .verdict::before { font-size: 12px; }
.case-lp .verdict.bad { background: #f0f0f0; color: #525252; }
.case-lp .verdict.good { background: #e6f4ea; color: #166534; box-shadow: inset 0 0 0 1px rgb(21 128 61 / 0.25); }

/* FAQ group labels */
.case-lp .faq .faq-group { margin: 0; padding: 32px 0 12px; font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mut); border-bottom: 1px solid var(--hair); }
.case-lp .faq .faq-group:first-child { padding-top: 24px; }

/* case study link card: same rail-and-rule layout as the other spec-sheet blocks */
.case-lp .cs-linkwrap { padding: 0 0 96px; }
.case-lp .cs-link { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 0 32px; align-items: start; padding: 40px 0 0; border-top: 2px solid var(--ink); }
.case-lp .cs-link-k { padding-top: 6px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.case-lp .cs-link h2 { margin: 0; max-width: 720px; font-size: clamp(24px, 1.2rem + 1.4vw, 32px); }
.case-lp .cs-link p { margin: 12px 0 0; max-width: 620px; font-size: 16px; line-height: 1.55; color: var(--body); }
.case-lp .cs-link .btn { margin-top: 24px; }
@media (max-width: 860px){ .case-lp .cs-linkwrap { padding-bottom: 72px; } .case-lp .cs-link { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 32px; } .case-lp .cs-link-k { padding-top: 0; } .case-lp .cs-link .btn { width: 100%; } }

/* plans: quiet institutional cards, the same card as the in-app Billing page (task #110; check: case repo `npm run check:plans`) */
.case-lp .pr-track { width: 300px; padding: 3px; border-radius: 8px; background: #f4f4f5; }
.case-lp .pr-track::before { top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--hair); }
.case-lp #bill-y:checked ~ .pr-togglerow .pr-track::before { transform: none; }
.case-lp #bill-m:checked ~ .pr-togglerow .pr-track::before { transform: translateX(100%); }
.case-lp .pr-track label { border-radius: 6px; color: var(--body); }
.case-lp #bill-m:checked ~ .pr-togglerow label[for="bill-m"], .case-lp #bill-y:checked ~ .pr-togglerow label[for="bill-y"] { color: var(--ink); }
.case-lp .pr-save, .case-lp #bill-y:checked ~ .pr-togglerow .pr-save { visibility: visible; opacity: 1; position: absolute; left: calc(50% + 150px + 16px); padding: 0; border: 0; background: none; font-size: 13px; font-weight: 400; color: var(--body); }
.case-lp .plan { border-radius: 8px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.03), 0 7px 12px -5px rgb(0 0 0 / 0.05); }
.case-lp .plan.rec { border: 1px solid #a1a1aa; padding: 32px; }
.case-lp .plan .pn { justify-content: space-between; align-items: baseline; min-height: 0; }
.case-lp .plan .pn h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 28px; }
.case-lp .plan .rec-l { font-size: 13px; font-weight: 500; color: var(--body); }
.case-lp .plan .aud { margin: 2px 0 0; font-size: 14px; line-height: 20px; color: var(--body); }
.case-lp .plan .price b { font-weight: 500; letter-spacing: -0.01em; }
.case-lp .plan .bill p { font-size: 13px; line-height: 20px; color: var(--body); }
.case-lp .plan .btn { border-radius: 6px; }
.case-lp .plan .spec { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--hair); font-size: 14px; line-height: 20px; }
.case-lp .plan .spec .row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.case-lp .plan .spec dt { color: var(--body); }
.case-lp .plan .spec dd { margin: 0; font-weight: 500; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.case-lp .plan .opt { background: #fafafa; border: 1px solid var(--hair); border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 20px; }
.case-lp .plan .optt { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.case-lp .plan .spec + .opt { margin-top: 16px; }
.case-lp .plan .work { margin: 0; color: var(--body); }
.case-lp .plan .work .swap { display: inline-grid; font-weight: 500; color: var(--ink); }
.case-lp .plan .mult { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; border-radius: 999px; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.case-lp .plan .opt dl { margin: 0; }
.case-lp .plan .opt .row { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.case-lp .plan .opt dt { color: var(--body); }
.case-lp .plan .opt dd { margin: 0; font-weight: 500; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.case-lp .plan .opt dd.ck { display: inline-flex; align-items: center; justify-content: flex-end; }
.case-lp .plan .opt dd.swap { justify-items: end; }
.case-lp .plan .or { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13px; font-weight: 500; color: var(--ink); }
.case-lp .plan .or::before, .case-lp .plan .or::after { content: ""; flex: 1; border-top: 1px solid var(--hair); }

@media (max-width: 960px) {
  .case-lp .plan.rec { padding: 24px; }
  .case-lp .pr-togglerow { flex-direction: column; align-items: center; gap: 12px; }
  .case-lp .pr-save, .case-lp #bill-y:checked ~ .pr-togglerow .pr-save { position: static; transform: none; }
}
@media (max-width: 400px) { .case-lp .pr-track { width: 100%; } }

/* Free card (#211): four cards in a row from 1200px, two by two below, Free first on a phone */
.case-lp .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) {
  .case-lp .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .case-lp .plan, .case-lp .plan.rec { padding: 24px; }
  .case-lp .plan .price b { font-size: 40px; }
  .case-lp .plan .bill { height: 40px; white-space: normal; }
}
@media (max-width: 960px) {
  .case-lp .plans { grid-template-columns: 1fr; }
  .case-lp .plan.free { order: -2; }
}