/* Kerbrank landing pages: /for-agencies, /compare/brightlocal, /compare/local-falcon.
   Same look as the homepage (night-green hero, Inter 760 headlines with an
   Instrument Serif italic accent, 22px radius, hairlines), rebuilt here
   because home.css only loads on /. Everything is scoped to body.landing
   and uses the l- prefix so nothing leaks into other pages. */

.landing {
  --l-radius: 22px;
  --l-night: #07170F;
  --l-night-2: #0B2219;
  --l-cream: #F4F1E8;
  --l-cream-2: #B9C8C0;
  --l-amber: #E9B869;
  --l-mint: #4FD1A0;
  --l-line-d: rgba(244, 241, 232, .12);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing { --l-night: #0B2A1E; --l-night-2: #10362A; }
}
:root[data-theme="dark"] .landing { --l-night: #0B2A1E; --l-night-2: #10362A; }

/* ---------- type */
.landing main h1, .landing main h2, .landing main h3.l-h3 {
  font-family: var(--sans); font-weight: 760; letter-spacing: -.035em; text-wrap: balance;
}
.landing main h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.05; }
.landing main h1 em, .landing main h2 em { font-family: var(--serif); font-weight: 400; font-style: italic; letter-spacing: -.01em; color: var(--brand-2); }
.landing main .l-dark h1, .landing main .l-dark h2, .landing main .l-hero h1 { color: var(--l-cream); }
.landing main .l-dark h1 em, .landing main .l-dark h2 em, .landing main .l-hero h1 em { color: var(--l-amber); }
.landing .section-head.l-center { margin-inline: auto; text-align: center; }
.landing .section-head.l-center p { margin-inline: auto; }
.l-kicker { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--s-eyebrow); margin-bottom: 10px; }
.landing .l-num, .landing .compare td, .landing .l-price, .landing .mini-table, .landing .l-stat b { font-variant-numeric: tabular-nums; }

/* header: the night treatment comes from site.css (:is(body.home, body.landing) #kr-head). */

/* ---------- hero */
.l-hero { position: relative; overflow: hidden; color: var(--l-cream); padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 96px);
  background:
    radial-gradient(50% 60% at 80% 30%, rgba(46, 154, 99, .26), transparent 70%),
    radial-gradient(35% 45% at 96% 88%, rgba(200, 134, 43, .18), transparent 70%),
    radial-gradient(40% 50% at 0% 100%, rgba(46, 154, 99, .12), transparent 70%),
    var(--l-night); }
.l-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--l-line-d) 1px, transparent 1px), linear-gradient(90deg, var(--l-line-d) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(70% 70% at 50% 40%, #000 20%, transparent 75%); }
.l-hero .wrap { position: relative; z-index: 1; }
.l-hero-grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
@media (min-width: 1000px) { .l-hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5.4fr); } }
.l-crumbs { margin: 0 0 26px; font-size: .84rem; color: var(--l-cream-2); }
.l-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; }
.l-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.l-crumbs li + li::before { content: "/"; opacity: .5; }
.l-crumbs a { color: var(--l-cream-2); text-decoration: none; display: inline-block; padding: 4px 0; }
.l-crumbs a:hover { color: var(--l-cream); text-decoration: underline; text-underline-offset: 3px; }
.l-crumbs [aria-current] { color: var(--l-cream); }
.l-badge { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border: 1px solid var(--l-line-d); border-radius: 999px; background: rgba(244, 241, 232, .05); font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: var(--l-cream); margin-bottom: 22px; }
.l-badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--l-mint); box-shadow: 0 0 0 4px rgba(79, 209, 160, .18); }
.landing .l-hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; letter-spacing: -.045em; margin-bottom: .36em; max-width: 16ch; }
.landing .l-hero h1 em { letter-spacing: -.02em; }
.l-hero .lede { color: var(--l-cream-2); margin-bottom: 30px; }
.l-hero .btn:not(.btn-ghost), .l-cta .btn:not(.btn-ghost) { background: var(--l-cream); color: var(--l-night); box-shadow: 0 10px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .6); }
.l-hero .btn:not(.btn-ghost):hover, .l-cta .btn:not(.btn-ghost):hover { background: #fff; color: var(--l-night); }
.l-hero .btn-ghost, .l-cta .btn-ghost { color: var(--l-cream); border-color: rgba(244, 241, 232, .28); background: rgba(244, 241, 232, .04); }
.l-hero .btn-ghost:hover, .l-cta .btn-ghost:hover { background: rgba(244, 241, 232, .1); color: var(--l-cream); }
.landing .btn { transition: transform .15s ease, background .15s ease, box-shadow .15s ease; }
.landing .btn:active { transform: translateY(1px); }
.l-ticks { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9rem; color: var(--l-cream-2); }
.l-ticks li { display: inline-flex; align-items: center; gap: 7px; }
.l-ticks li::before { content: ""; width: 12px; height: 7px; border-left: 2px solid var(--l-mint); border-bottom: 2px solid var(--l-mint); transform: rotate(-45deg) translate(1px, -2px); }
.l-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* the product, lit */
.l-stage { position: relative; }
.l-stage::before { content: ""; position: absolute; inset: 8% 6% 12%; background: radial-gradient(closest-side, rgba(79, 209, 160, .32), transparent); filter: blur(30px); z-index: 0; }
.l-stage > * { position: relative; z-index: 1; }
@media (min-width: 640px) and (max-width: 999px) { .l-stage { max-width: 580px; margin-inline: auto; width: 100%; } }
@media (min-width: 1000px) and (max-width: 1199px) { .l-stage { margin-right: 44px; } }

/* white-label report mock (agency hero) */
.l-report { background: var(--surface); color: var(--ink); border: 1px solid rgba(255, 255, 255, .5); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .06); }
.l-report-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: #1E3A5F; color: #fff; }
.l-report-logo { flex: none; width: 34px; height: 34px; border-radius: 9px; background: #F2C14E; color: #1E3A5F; display: grid; place-items: center; font-weight: 800; font-size: .95rem; letter-spacing: -.03em; }
.l-report-bar div b { display: block; font-size: .98rem; letter-spacing: -.01em; }
.l-report-bar div span { display: block; font-size: .76rem; opacity: .78; }
.l-report-tag { margin-left: auto; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: rgba(255, 255, 255, .14); white-space: nowrap; }
.l-report-body { padding: 18px; display: grid; gap: 16px; }
.l-report-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; }
.l-report .mini-heat { max-width: none; gap: 3px; }
.l-report-stats { display: grid; gap: 10px; margin: 0; }
.l-report-stats div { border: 1px solid var(--line-2); border-radius: 12px; padding: 10px 12px; background: var(--paper); }
.l-report-stats dt { font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.l-report-stats dd { margin: 2px 0 0; font-weight: 760; font-size: 1.35rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.l-report-stats dd small { font-size: .74rem; font-weight: 600; color: color-mix(in oklab, var(--win) 72%, var(--ink)); margin-left: 4px; letter-spacing: 0; }
.l-report-jobs { list-style: none; margin: 0; padding: 12px 0 0; border-top: 1px solid var(--line-2); display: grid; gap: 8px; font-size: .86rem; }
.l-report-jobs li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.l-report-jobs i { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .7rem; font-weight: 700; background: color-mix(in oklab, #1E3A5F 12%, var(--surface)); color: #1E3A5F; }
.l-report-foot { display: flex; justify-content: space-between; gap: 10px; padding: 11px 18px; border-top: 1px solid var(--line); font-size: .76rem; color: var(--ink-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .l-report-jobs i { color: #9CC0EA; background: rgba(156, 192, 234, .14); } }
:root[data-theme="dark"] .l-report-jobs i { color: #9CC0EA; background: rgba(156, 192, 234, .14); }
.l-share { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.l-share span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 12px; background: rgba(244, 241, 232, .07); border: 1px solid var(--l-line-d); color: var(--l-cream); font-size: .84rem; font-weight: 550; }
.l-share svg { width: 16px; height: 16px; fill: none; stroke: var(--l-mint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 1200px) { .l-report { transform: perspective(1600px) rotateY(-4deg) rotateX(2deg); transform-origin: 60% 50%; } }
@media (max-width: 420px) { .l-report-top { grid-template-columns: minmax(0, 1fr); } .l-report-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .l-report-stats dd { font-size: 1.1rem; } .l-report-tag { display: none; } }

/* at-a-glance card (compare heroes) */
.l-glance { background: var(--surface); color: var(--ink); border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .5); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6); }
.l-glance-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--paper); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.l-glance-head .us { color: var(--brand-2); }
.l-glance dl { margin: 0; }
.l-glance-row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--line-2); align-items: baseline; font-size: .9rem; }
.l-glance-row:last-child { border-bottom: 0; }
.l-glance-row dt { font-weight: 600; color: var(--ink); }
.l-glance-row dd { margin: 0; color: var(--ink-2); }
.l-glance-row dd.us { color: var(--ink); font-weight: 650; }
.l-glance-foot { padding: 11px 18px; border-top: 1px solid var(--line); font-size: .76rem; color: var(--ink-2); background: var(--paper); }
@media (min-width: 1200px) { .l-glance { transform: perspective(1600px) rotateY(-4deg) rotateX(2deg); transform-origin: 60% 50%; } }

/* ---------- sections */
.l-wash { background: var(--s-wash); border-block: 1px solid var(--line); }
.l-dark { background: var(--l-night); color: var(--l-cream); }
.l-dark p { color: var(--l-cream-2); }
.l-dark .eyebrow, .l-dark .l-kicker { color: var(--l-amber); }
.l-dark a:not(.btn) { color: var(--l-cream); }

/* bento: what a client report contains */
.l-bento { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) and (max-width: 959px) { .l-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .l-t-map, .l-t-comp { grid-column: 1 / -1; } .l-t-map .mini-heat { max-width: 360px; } }
@media (min-width: 960px) {
  .l-bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .l-t-map { grid-column: span 7; grid-row: span 2; }
  .l-t-ai, .l-t-fix { grid-column: span 5; }
  .l-t-comp { grid-column: span 12; }
}
.l-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--l-radius); padding: clamp(22px, 2.6vw, 30px); display: flex; flex-direction: column; gap: 20px; min-width: 0; box-shadow: 0 1px 2px rgba(15, 26, 22, .04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
@media (hover: hover) { .l-tile:hover { transform: translateY(-3px); box-shadow: 0 22px 44px -24px rgba(7, 23, 15, .35); border-color: color-mix(in oklab, var(--brand-2) 28%, var(--line)); } }
.landing main .l-tile h3 { font-family: var(--sans); font-weight: 760; letter-spacing: -.03em; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.15; margin: 0 0 8px; text-wrap: balance; }
.landing main .l-t-map h3 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.l-tile p { color: var(--ink-2); margin: 0; font-size: .96rem; max-width: 52ch; }
.l-tile-viz { background: var(--paper); border: 1px solid var(--line-2); border-radius: 14px; padding: 16px; margin-top: auto; }
.l-t-map .l-tile-viz { padding: clamp(16px, 2.4vw, 28px); }
.l-t-map .mini-heat { max-width: 440px; margin-inline: auto; gap: 5px; }
.l-t-map .mini-legend { justify-content: center; margin-top: 14px; }
.l-mapstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.l-mapstats div { background: var(--paper); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; }
.l-mapstats dt { font-size: .72rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.l-mapstats dd { margin: 4px 0 0; font-weight: 760; font-size: clamp(1.3rem, 2vw, 1.7rem); letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .l-mapstats { grid-template-columns: 1fr 1fr; } .l-mapstats div:last-child { grid-column: 1 / -1; } }
.l-tile-dark { background: var(--l-night-2); border-color: var(--l-night-2); color: var(--l-cream); }
.landing main .l-tile-dark h3 { color: var(--l-cream); }
.l-tile-dark p { color: var(--l-cream-2); }
.l-tile-dark .l-kicker { color: var(--l-amber); }
.l-chat { display: grid; gap: 12px; margin-top: auto; }
.l-bubble { border-radius: 16px; padding: 11px 15px; font-size: .92rem; line-height: 1.5; max-width: 92%; }
.l-bubble-q { justify-self: end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 4px; }
.l-bubble-a { background: var(--paper); border: 1px solid var(--line-2); border-bottom-left-radius: 4px; color: var(--ink-2); }
.l-bubble-a b { color: var(--ink); font-weight: 600; }
.l-bubble-a mark { background: color-mix(in oklab, var(--accent) 22%, transparent); color: var(--ink); font-weight: 650; padding: 0 3px; border-radius: 4px; }
.l-chat-foot { border-top: 1px solid var(--line-2); padding-top: 12px; }
.l-chat-foot .ai-rate b { font-size: 2rem; white-space: nowrap; }
.l-fixes { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: 10px; }
.l-fixes li { display: flex; gap: 12px; align-items: flex-start; background: rgba(244, 241, 232, .05); border: 1px solid var(--l-line-d); border-radius: 12px; padding: 12px 14px; font-size: .92rem; color: var(--l-cream); }
.l-fixes b { display: block; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--l-mint); margin-bottom: 2px; }
.l-fixes li:not(.done) b { color: var(--l-amber); }
.l-fix-tick { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; background: rgba(79, 209, 160, .16); color: var(--l-mint); }
.l-fix-next { background: rgba(233, 184, 105, .16); color: var(--l-amber); }
.l-t-comp { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .l-t-comp { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } .l-t-comp .l-tile-viz { margin: 0; } }
.l-tile .mini-table { width: 100%; font-size: .88rem; }
.l-tile .mini-table th { white-space: nowrap; }
.l-tile .mini-table td:first-child { white-space: nowrap; }
.l-tile .mini-table .num { text-align: right; }

/* branded links and PDFs */
.l-split { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 960px) { .l-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.l-split-copy .lede { margin-bottom: 20px; }
.l-split-copy .tick { margin: 0 0 22px; }
.l-split-copy .tick li { color: var(--ink-2); }
.l-split-copy .tick b { color: var(--ink); font-weight: 650; }
.l-settings { background: var(--surface); border: 1px solid var(--line); border-radius: var(--l-radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.l-settings-head { padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); background: var(--paper); }
.l-settings-body { padding: 20px; display: grid; gap: 14px; }
.l-field { display: grid; gap: 6px; }
.l-field span { font-size: .8rem; font-weight: 600; color: var(--ink-2); }
.l-field div { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); font-size: .95rem; color: var(--ink); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.l-swatch { flex: none; width: 20px; height: 20px; border-radius: 6px; background: #1E3A5F; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.l-settings-note { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: .86rem; color: color-mix(in oklab, var(--win) 72%, var(--ink)); font-weight: 600; }
.l-covers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 0 20px 20px; }
.l-cover { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--paper); font-size: .78rem; }
.l-cover-top { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #fff; font-weight: 700; background: #1E3A5F; }
.l-cover-top i { width: 16px; height: 16px; border-radius: 5px; background: #F2C14E; }
.l-cover-body { padding: 12px; color: var(--ink-2); line-height: 1.4; }
.l-cover-body b { display: block; color: var(--ink); font-size: .86rem; margin-bottom: 2px; }
.l-cover-k { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 6px; }

/* pricing for many clients */
.l-plans { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); max-width: 980px; margin-inline: auto; }
@media (min-width: 760px) { .l-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.l-plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--l-radius); padding: 30px 28px 28px; display: flex; flex-direction: column; }
.landing main .l-plan h3 { font-family: var(--sans); font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.l-plan .for { font-size: .92rem; color: var(--ink-2); margin: 0 0 20px; }
.l-price { font-family: var(--sans); font-weight: 760; font-size: 3.4rem; line-height: 1; letter-spacing: -.05em; }
.l-price small { font-size: .9rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0; margin-left: 4px; }
.l-per { margin: 10px 0 0; font-size: .9rem; color: var(--ink-2); }
.l-plan .tick { margin: 22px 0 26px; font-size: .95rem; }
.l-plan .btn { margin-top: auto; width: 100%; }
.l-plan-pick { background: var(--l-night-2); border-color: var(--l-night-2); color: var(--l-cream); box-shadow: 0 30px 60px -20px rgba(7, 23, 15, .5); }
.l-plan-pick .for, .l-plan-pick .l-price small, .l-plan-pick .l-per { color: var(--l-cream-2); }
.l-plan-pick .tick li::before { border-color: var(--l-mint); }
.l-plan-pick .btn { background: var(--l-cream); color: var(--l-night); }
.l-plan-pick .btn:hover { background: #fff; color: var(--l-night); }
.l-plan .btn-ghost:hover { border-color: var(--ink); background: var(--surface); }
.l-plans-more { text-align: center; margin: 28px auto 0; color: var(--ink-2); max-width: 64ch; }
.l-plans-more b { color: var(--ink); }
.l-plans-more a { font-weight: 600; white-space: nowrap; }

/* stat band */
.l-stats { padding: clamp(44px, 6vw, 68px) 0; }
.l-stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
@media (min-width: 860px) { .l-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.l-stat { border-left: 1px solid var(--l-line-d); padding-left: 20px; }
.l-stat b { display: block; font-family: var(--sans); font-weight: 760; font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1; letter-spacing: -.045em; color: var(--l-cream); }
.l-stat b small { font-size: .45em; letter-spacing: 0; margin-left: 3px; color: var(--l-amber); }
.l-stat span { display: block; margin-top: 10px; color: var(--l-cream-2); font-size: .95rem; max-width: 26ch; }

/* comparison table */
.landing .compare-wrap { border-radius: var(--l-radius); }
.landing .compare { width: 100%; }
.landing .compare thead th.us { box-shadow: inset 0 3px 0 var(--brand-2); }
.landing .compare td.us { background: color-mix(in oklab, var(--brand-2) 9%, var(--surface)); }
.landing .compare td.more { color: var(--ink); }
.landing .compare td.more::after { content: "They do more"; display: inline-block; margin-left: 8px; font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: color-mix(in oklab, var(--accent) 18%, transparent); color: color-mix(in oklab, var(--accent) 55%, var(--ink)); vertical-align: 1px; white-space: nowrap; }
.landing .compare thead th { text-align: left; }
@media (min-width: 701px) { .landing .compare th, .landing .compare td { border-bottom: 1px solid var(--line-2); } .landing .compare tbody tr:last-child td { border-bottom: 0; } }
.landing .fineprint { margin: 16px 0 0; }

/* fair verdicts */
.l-fair { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .l-fair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.l-fair-card { border-radius: var(--l-radius); padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); background: var(--surface); }
.l-fair-card.l-fair-us { background: var(--l-night-2); border-color: var(--l-night-2); color: var(--l-cream); }
.landing main .l-fair-card h3 { font-family: var(--sans); font-weight: 760; letter-spacing: -.03em; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.15; margin: 0 0 16px; text-wrap: balance; }
.landing main .l-fair-us h3 { color: var(--l-cream); }
.l-fair-card .tick li { color: var(--ink-2); margin: 12px 0; }
.l-fair-card .tick b { color: var(--ink); font-weight: 650; }
.l-fair-us .tick li { color: var(--l-cream-2); }
.l-fair-us .tick b { color: var(--l-cream); }
.l-fair-us .tick li::before { border-color: var(--l-mint); }
.l-fair-us .l-kicker { color: var(--l-amber); }

/* credits arithmetic */
.l-maths { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
@media (min-width: 760px) { .l-maths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.l-maths div { border: 1px solid var(--line); border-radius: 18px; padding: 22px; background: var(--surface); }
.l-maths b { display: block; font-weight: 760; font-size: clamp(2rem, 3.6vw, 2.8rem); letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.l-maths span { display: block; margin-top: 10px; color: var(--ink-2); font-size: .94rem; }

/* notes and cross-links */
.l-notes { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .l-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.l-note { border-top: 2px solid var(--ink); padding-top: 20px; }
.landing main .l-note h3 { font-family: var(--sans); font-size: 1.12rem; font-weight: 700; letter-spacing: -.015em; margin: 0 0 8px; }
.l-note p { color: var(--ink-2); margin: 0; font-size: .97rem; }
.l-links { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .l-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.l-link { display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); color: var(--ink); text-decoration: none; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.l-link b { font-weight: 700; font-size: 1.05rem; letter-spacing: -.015em; }
.l-link span { color: var(--ink-2); font-size: .93rem; }
.l-link em { font-style: normal; font-weight: 600; color: var(--brand-2); margin-top: auto; padding-top: 6px; font-size: .92rem; }
@media (hover: hover) { .l-link:hover { transform: translateY(-3px); border-color: color-mix(in oklab, var(--brand-2) 35%, var(--line)); box-shadow: 0 18px 36px -22px rgba(7, 23, 15, .35); } }
.l-dark .l-link { background: rgba(244, 241, 232, .05); border-color: var(--l-line-d); color: var(--l-cream); }
.l-dark .l-link span { color: var(--l-cream-2); }
.l-dark .l-link em { color: var(--l-amber); }
.l-dark a.l-link { color: var(--l-cream); }

/* FAQ with help box */
.landing .faq summary { transition: color .15s ease; }
.landing .faq summary:hover { color: var(--brand-2); }
.l-help { margin-top: 28px; padding: 22px; border-radius: 20px; background: var(--l-night-2); color: var(--l-cream); }
.l-help-title { font-weight: 760; font-size: 1.15rem; letter-spacing: -.01em; margin: 0 0 6px; color: var(--l-cream); }
.l-help p { color: var(--l-cream-2); margin: 0 0 16px; font-size: .95rem; }
.l-help .btn:not(.btn-ghost) { background: var(--l-cream); color: var(--l-night); }
.l-help .btn-ghost { color: var(--l-cream); border-color: rgba(244, 241, 232, .28); background: transparent; }
.l-help .btn-ghost:hover { background: rgba(244, 241, 232, .1); }
.l-help-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.l-guides { display: grid; gap: 4px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.l-guides a { padding: 7px 0; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.l-guides a:hover { text-decoration-color: currentColor; }

/* final CTA */
.landing .l-cta { background: var(--l-night); }
.landing .l-cta h2 { color: var(--l-cream); max-width: 20ch; }
.landing .l-cta h2 em { color: var(--l-amber); }
.landing .l-cta p { color: var(--l-cream-2); }
.l-cta .l-ticks { justify-content: center; margin-top: 22px; }

/* focus that shows on night green */
.landing .s-head :focus-visible, .l-hero :focus-visible, .l-dark :focus-visible, .l-cta :focus-visible,
.l-tile-dark :focus-visible, .l-help :focus-visible, .l-plan-pick :focus-visible, .l-fair-us :focus-visible { outline: 2px solid var(--l-amber); outline-offset: 3px; }

/* dark mode: night sections keep their edges */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .landing .l-hero, :root:not([data-theme="light"]) .landing .l-dark, :root:not([data-theme="light"]) .landing .l-cta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); border-block: 1px solid var(--l-line-d); }
  :root:not([data-theme="light"]) .landing .mini-heat i.rw { background: repeating-linear-gradient(45deg, #1b2a33 0 3px, transparent 3px 6px); }
  :root:not([data-theme="light"]) .landing .l-plan-pick, :root:not([data-theme="light"]) .landing .l-fair-us { outline: 1px solid color-mix(in oklab, var(--l-amber) 35%, transparent); }
}
:root[data-theme="dark"] .landing .l-hero, :root[data-theme="dark"] .landing .l-dark, :root[data-theme="dark"] .landing .l-cta { border-block: 1px solid var(--l-line-d); }

/* motion: transform and opacity only, and only with consent */
@media (prefers-reduced-motion: no-preference) {
  .l-stage { animation: l-rise 1s .1s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes l-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.landing main .l-links-title { font-family: var(--sans); font-size: .76rem; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin: clamp(48px, 6vw, 72px) 0 16px; }
@media (max-width: 420px) {
  .l-glance-head, .l-glance-row { padding-inline: 14px; gap: 8px; }
  .l-glance-head { letter-spacing: .04em; font-size: .64rem; }
  .l-glance-row { font-size: .86rem; }
}