/* Launch site styles. Rules settled with Levi, 20 Sept 2026:
   bold tight headlines with a smaller regular sentence beneath; no label above a heading; no all-caps labels;
   light ombre grounds only; 4px buttons with a chevron; 8px borderless cards on one soft shadow; logos in colour. */
:root {
  --ink: #111733; --body: #4A5273; --mute: #606985; --line: #E3E6F0; --soft: #F6F9FC;
  --blue: #3A54E0; --blue-d: #2F45C2; --brand: #5170FF; --tint: #EEF1FF;
  --green: #0E9F6E; --red: #BE2D3A; --amber: #F2A33A; --amber-bg: #FFF6E5; --amber-ink: #6B4205;
  --card: 0 14px 32px -10px rgba(50, 50, 93, .16), 0 2px 6px rgba(17, 23, 51, .05);
  --card-sm: 0 6px 16px -6px rgba(50, 50, 93, .14), 0 1px 3px rgba(17, 23, 51, .05);
  --wrap: 1160px; --gut: 24px;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; font: 400 16px/1.55 var(--sans); color: var(--body); background: #fff; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, ul, ol, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); }
p a, .fine a { text-decoration: underline; text-underline-offset: 2px; }
img, video, svg { max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 12px; z-index: 100; background: #fff; color: var(--ink); padding: 10px 14px; border-radius: 4px; box-shadow: var(--card); }
.skip:focus { left: 16px; }
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.center { text-align: center; }
.mute { color: var(--mute); }
.fine { font-size: 13px; line-height: 1.5; color: var(--mute); }
.ico { flex: none; display: block; }

/* ---------- type ---------- */
h1 { font-weight: 700; font-size: clamp(34px, 4.5vw, 50px); line-height: 1.06; letter-spacing: -.029em; }
h2 { font-weight: 700; font-size: clamp(28px, 3.5vw, 42px); line-height: 1.12; letter-spacing: -.022em; }
h3, .h-card { font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: -.005em; }
.h3 { font-weight: 700; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.18; letter-spacing: -.02em; }
.h4 { font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: 0; margin: 36px 0 18px; }
.head { max-width: 760px; }
.head .sub { margin-top: 16px; font-size: 18.5px; line-height: 1.55; color: var(--body); max-width: 640px; text-wrap: pretty; }
.head-center { margin-inline: auto; text-align: center; }
.head-center .sub { margin-inline: auto; }
.head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; }
.lede { font-size: 17px; line-height: 1.6; color: var(--body); max-width: 600px; margin-top: 16px; }
.lede.center { margin-inline: auto; }

/* ---------- atoms ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 4px; font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; transition: background-color .15s, box-shadow .15s, color .15s; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 2px 5px rgba(58, 84, 224, .28); }
.btn-primary:hover { background: var(--blue-d); color: #fff; }
.btn-ghost { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1px #D5DAE8, 0 1px 2px rgba(17, 23, 51, .05); }
.btn-ghost:hover { color: var(--blue); box-shadow: inset 0 0 0 1px #B9C1D9, 0 1px 2px rgba(17, 23, 51, .05); }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: .6; cursor: progress; }
.chev { display: inline-block; font-weight: 600; transition: transform .15s; transform: translateY(-1px); }
a:hover > .chev, button:hover > .chev { transform: translate(3px, -1px); }
a:hover > .chev-back, button:hover > .chev-back { transform: translate(-3px, -1px); }
.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; }
@media (pointer: coarse) { .more { min-height: 40px; } }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cta-center { justify-content: center; }
.tile { display: inline-grid; place-items: center; flex: none; width: var(--s, 44px); height: var(--s, 44px); border-radius: calc(var(--s, 44px) * .24); background: linear-gradient(135deg, var(--a), var(--b)); color: #fff; }
.card { background: #fff; border-radius: 8px; box-shadow: var(--card); }
.card > h3, .card > .h-card { margin-top: 18px; }
.card > p { margin-top: 8px; font-size: 15px; }
.photo { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: var(--card); }
.photo-sm { max-width: 420px; margin-top: 36px; }
.rlogo { display: block; width: auto; max-width: 132px; object-fit: contain; }
.ticks { margin-top: 22px; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; font-size: 15.5px; color: var(--ink); }
.ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.4l2.6 2.6L13 6.6' fill='none' stroke='%233A54E0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }

/* ---------- ombre grounds (light only) ---------- */
.mesh { position: relative; isolation: isolate; }
.mesh-hero { background:
  radial-gradient(52% 78% at 88% 4%, rgba(81, 112, 255, .26), transparent 62%),
  radial-gradient(40% 62% at 100% 58%, rgba(224, 82, 156, .17), transparent 64%),
  radial-gradient(44% 60% at 58% 0%, rgba(18, 165, 165, .15), transparent 62%),
  radial-gradient(38% 56% at 4% 0%, rgba(242, 163, 58, .12), transparent 64%), #F7F9FE; }
.mesh-soft { background:
  radial-gradient(50% 80% at 100% 0%, rgba(81, 112, 255, .16), transparent 62%),
  radial-gradient(46% 70% at 0% 100%, rgba(18, 165, 165, .13), transparent 64%), #F8FAFE; }
.mesh-warm { background:
  radial-gradient(48% 80% at 8% 10%, rgba(242, 163, 58, .22), transparent 62%),
  radial-gradient(46% 76% at 96% 20%, rgba(224, 82, 156, .16), transparent 62%),
  radial-gradient(50% 70% at 50% 110%, rgba(107, 78, 199, .14), transparent 64%), #FFFBF5; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid rgba(227, 230, 240, .7); }
.nav-in { display: flex; align-items: center; gap: 40px; height: 68px; }
.brand { display: inline-flex; color: var(--ink); padding-block: 9px; margin-block: -9px; }
.wm { display: inline-flex; align-items: center; gap: 9px; }
/* the bars are as tall as the A of the wordmark and sit on its baseline, as on the live site */
.wm-g { position: relative; top: -.65px; height: 15.3px; width: auto; fill: var(--brand); }
.wm-t { font: 500 22px/1 Poppins, var(--sans); letter-spacing: -.02em; color: var(--ink); }
.nav-menu { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 24px; }
.nav-links { display: flex; gap: 4px; }
.nav-links a, .nav-login { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 4px; font-weight: 500; font-size: 15px; color: var(--ink); }
.nav-links a:hover, .nav-login:hover { color: var(--blue); }
.nav-links a[aria-current="page"] { color: var(--blue); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-right .btn { min-height: 38px; padding: 0 16px; font-size: 14.5px; }
.nav-tog { display: none; margin-left: auto; width: 44px; height: 44px; padding: 12px 10px; border: 0; border-radius: 4px; background: transparent; }
.nav-tog span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.nav-tog span + span { margin-top: 6px; }
.nav-open .nav-tog span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-open .nav-tog span:nth-child(2) { opacity: 0; }
.nav-open .nav-tog span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- sections ---------- */
.sec { padding-block: 64px; }
.sec-tight { padding-block: 0 56px; }
.soft { background: var(--soft); }
.hero { padding-block: 64px 64px; }
.slant { z-index: 1; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4.2vw), 0 100%); padding-bottom: calc(40px + 4.2vw); }
.slant + .soft, .slant + .sec:not(.logos) { margin-top: -4.2vw; padding-top: calc(24px + 4.2vw); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: 56px; align-items: center; }
.hero-copy .sub { font-size: 19px; }
.anim { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px -20px rgba(50, 50, 93, .28), 0 12px 28px -14px rgba(17, 23, 51, .22); }
.anim-v { display: block; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.anim-sm { border-radius: 8px 8px 0 0; box-shadow: 0 -2px 18px -6px rgba(50, 50, 93, .2); }
.anim-sm .anim-v { transform: scale(1.07); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.grid3 > .card, .dog .card, .faq .card { padding: 26px; }
.grid3 > .card.pillar { padding: 0; }
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; align-items: center; }
.split-top { align-items: start; }
.split-flip > .split-copy { order: 2; }
.steps { margin-top: 32px; display: grid; gap: 22px; }
.steps li { display: flex; gap: 16px; align-items: flex-start; }
.steps p { margin-top: 4px; font-size: 15px; }
.steps.even { grid-auto-rows: 1fr; }   /* every row the height of the tallest, so the icons sit on an even rhythm */
.split-copy > .more { margin-top: 24px; }

/* logo marquee */
.logos { padding-block: 26px 10px; }
.marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.marquee-track { display: flex; flex: none; align-items: center; gap: 72px; padding-right: 72px; animation: marquee 48s linear infinite; }
.marquee:hover .marquee-track, .marquee.paused .marquee-track { animation-play-state: paused; }
.logos { position: relative; }
.marquee-pause { position: absolute; right: 6px; bottom: -20px; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--card-sm), inset 0 0 0 1px var(--line); opacity: 0; transition: opacity .15s; }
.logos:hover .marquee-pause, .marquee-pause:focus-visible, .marquee-pause[aria-pressed="true"] { opacity: 1; }
.marquee-pause span { width: 8px; height: 10px; border-inline: 3px solid var(--ink); }
.marquee-pause[aria-pressed="true"] span { width: 0; height: 0; border-block: 5px solid transparent; border-inline: 9px solid var(--ink); border-right-width: 0; margin-left: 2px; }
html:not(.js) .marquee-pause { display: none; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* defend, optimize, grow */
.grid3.dog { grid-template-rows: auto 1fr 1fr; grid-auto-flow: column; row-gap: 16px; }
.dog-col { display: contents; }
.dog-name { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; color: var(--ink); }
.dot { width: 10px; height: 10px; border-radius: 50%; }

/* pillar card: same component on Home and Product */
.pillar, .pcard { display: flex; flex-direction: column; overflow: hidden; }
.pillar-top { padding: 22px 22px 0; background: #F3F5FF; background: linear-gradient(180deg, color-mix(in srgb, var(--a) 13%, #fff), color-mix(in srgb, var(--a) 4%, #fff)); }
.pillar-body { display: flex; flex-direction: column; flex: 1; padding: 26px; }
.pillar-body > p { margin-top: 12px; font-size: 15px; }
.pillar-name { display: flex; align-items: center; gap: 12px; }
.pillar-name h3 { font-size: 21px; font-weight: 700; letter-spacing: -.015em; }
.modlist { margin: 18px 0 22px; border-bottom: 1px solid var(--line); }
.modlist a { display: flex; align-items: center; gap: 10px; min-height: 44px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 500; font-size: 15px; }
.modlist a:hover { color: var(--blue); }
.modlist .ico { color: var(--a); }
.pillar-body > .more { margin-top: auto; }

/* one SKU across sites */
.skucard { overflow: hidden; }
.skucard-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); }
.skucard-h strong { font-size: 14.5px; color: var(--ink); }
.skucard-h span { font-size: 12.5px; color: var(--mute); background: var(--soft); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.sku { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sku th, .sku td { padding: 13px 22px; text-align: left; }
.sku thead th { font-weight: 500; font-size: 12.5px; color: var(--mute); }
.sku tbody tr { border-top: 1px solid var(--line); }
.sku td { font-size: 15px; font-weight: 500; color: var(--ink); }
.sku td.bad { color: var(--red); font-weight: 700; }
.sku td.paid { color: #8A5606; }
.sku td.mute { color: var(--mute); font-weight: 400; }
.flag { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.flag.ok { background: var(--green); }
.flag.bad { background: var(--red); box-shadow: 0 0 0 4px rgba(190, 45, 58, .16); }
.skucard-f { display: flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--amber-bg); color: var(--amber-ink); font-size: 14px; font-weight: 500; }
.skucard-f .ico { color: #C97A10; }
.retail-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; margin-top: 48px; }
.retail-groups h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.retail-groups p { margin-top: 6px; font-size: 15px; max-width: 460px; }
.ast { margin-left: 2px; color: var(--blue); }
.retail-note { margin-top: 28px; font-size: 14px; }
.rgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.rgrid li { display: grid; place-items: center; height: 76px; padding: 12px 14px; background: #fff; border-radius: 8px; box-shadow: var(--card-sm); }
.rgrid .rlogo { max-width: 100%; max-height: 34px; }

/* results */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 56px; text-align: center; }
.stats strong { display: block; font-weight: 700; font-size: clamp(44px, 5.4vw, 64px); line-height: 1; letter-spacing: -.035em; color: var(--ink); }
.stats span { display: block; margin: 14px auto 0; max-width: 270px; font-size: 16px; }
.results .fine { margin-top: 40px; }

/* research */
.research { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; margin-top: 40px; align-items: start; }
.feature { padding: 32px; }
.feature h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.bars { margin: 26px 0 18px; display: grid; gap: 16px; }
.bars li, .hbars li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 44px; gap: 12px; align-items: center; font-size: 14.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.bars b, .hbars b { text-align: right; }
.bar { display: block; height: 10px; border-radius: 5px; background: rgba(17, 23, 51, .08); overflow: hidden; }
.bar i { display: block; height: 100%; min-width: 3px; border-radius: 5px; background: linear-gradient(90deg, var(--brand), #6B4EC7); }
.feature .more { margin-top: 18px; }
.index li:not(.index-all) a { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.index li:first-child a { padding-top: 0; }
.index strong { display: block; font-weight: 600; font-size: 17px; line-height: 1.35; transition: color .15s; }
.index em { display: block; margin-top: 4px; font-style: normal; font-size: 14px; color: var(--mute); }
.index a:hover strong { color: var(--blue); }
.index .chev { font-size: 20px; color: var(--mute); }
.index-all { padding-top: 22px; }

.trio { display: flex; flex-wrap: wrap; gap: 16px 40px; margin-top: 30px; }
.trio strong { display: block; font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: -.01em; }
.trio span { font-size: 14px; color: var(--mute); }

/* ---------- forms ---------- */
.form { padding: 30px; }
.form label { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.form label + label, .form fieldset + label, .form label + fieldset, .form fieldset + fieldset { margin-top: 18px; }
.form input:not([type="radio"]), .form textarea { display: block; width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid #C9D0E0; border-radius: 6px; background: #fff; font: 400 15px/1.4 var(--sans); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.form textarea { resize: vertical; min-height: 64px; }
.form ::placeholder { color: #6A7290; opacity: 1; }
.form input:focus-visible, .form textarea:focus-visible { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(58, 84, 224, .2); }
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px rgba(190, 45, 58, .14); }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend { padding: 0; font-weight: 600; font-size: 14px; color: var(--ink); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
.form .pillopt { position: relative; font-weight: 500; margin: 0; }
.pillopt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pillopt span { display: block; padding: 9px 14px; border-radius: 6px; box-shadow: inset 0 0 0 1px #C9D0E0; font-size: 14.5px; color: var(--ink); transition: background-color .15s, box-shadow .15s; }
.pillopt input:checked + span { background: var(--tint); box-shadow: inset 0 0 0 2px var(--blue); color: #26358F; }
.pillopt input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form .btn { margin-top: 22px; }
.form-msg { margin-top: 12px; font-size: 14.5px; font-weight: 500; }
.form .form-msg:not(:last-child) { margin: 0 0 12px; }
.form label + .form-msg, .form fieldset + .form-msg { margin-top: 18px; }
.form-msg:empty { display: none; }
.form-msg.ok { color: #0B7A55; }
.form-msg.err { color: var(--red); }
.form .fine { margin-top: 12px; }

/* ---------- product ---------- */
.how { display: grid; gap: 64px; margin-top: 40px; }
.car-nav { display: flex; gap: 10px; }
.car-btn { display: grid; place-items: center; width: 42px; height: 42px; padding: 0 0 3px; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--card-sm), inset 0 0 0 1px var(--line); font-size: 22px; line-height: 1; color: var(--ink); transition: color .15s, opacity .15s; }
.car-btn:hover { color: var(--blue); }
.car-btn:disabled { opacity: .35; cursor: default; color: var(--ink); }
.car { --pad: max(var(--gut), calc((100vw - var(--wrap)) / 2 + var(--gut))); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 32px var(--pad) 20px; scrollbar-width: none; }
.car::-webkit-scrollbar { display: none; }
.car-track { display: flex; gap: 24px; width: max-content; }
.car-item { flex: none; width: 340px; scroll-snap-align: start; display: flex; }
.pcard { width: 100%; }
.pcard .pillar-top { padding: 18px 18px 0; }
.pcard-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.pcard-body h3 { font-size: 17px; font-weight: 700; }
.pcard-body > p { margin: 12px 0 18px; font-size: 15px; }
.pcard-body > .more { margin-top: auto; }
.car-dots { display: flex; justify-content: center; gap: 6px; }
.car-dots i { width: 6px; height: 6px; border-radius: 3px; background: #CFD4E4; transition: width .2s, background-color .2s; }
.car-dots i.on { width: 20px; background: var(--blue); }

/* ---------- pricing ---------- */
.pricing-hero { padding-bottom: 88px; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 900px; margin: 52px auto 0; }
.plan { display: flex; flex-direction: column; padding: 34px; }
.plan h2 { font-size: 24px; letter-spacing: -.015em; }
.plan-for { margin-top: 6px; font-size: 15px; color: var(--mute); }
.price { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; font-size: 15px; color: var(--mute); }
.price strong { font-weight: 700; font-size: 48px; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.plan .ticks { margin-bottom: 30px; }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan-head { display: flex; align-items: center; gap: 14px; }
.plan-head .plan-for { margin-top: 3px; }
/* Enterprise leads: tinted, outlined in brand blue, primary button. Growth stays plain white. Both prices stay ink. */
.plan-ent { background: linear-gradient(160deg, #E9EEFF 0%, #F3EFFF 42%, #FFFFFF 100%); box-shadow: inset 0 0 0 2px var(--brand), 0 24px 48px -18px rgba(58, 84, 224, .35), 0 2px 6px rgba(17, 23, 51, .05); }
.plan-start { background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--card-sm); }
.plan-start .ticks li::before { background-color: #EEF0F6; }
.promises { margin-top: 0; }
.pricing-hero + .sec-tight { background: linear-gradient(180deg, #F7F9FE 0, #fff 120px); padding-top: 8px; }
.tablecard { margin-top: 48px; overflow-x: auto; }
.plan-table { width: 100%; min-width: 760px; border-collapse: collapse; }
.plan-table th, .plan-table td { padding: 18px 24px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); font-size: 15px; }
.plan-table tbody tr:last-child > * { border-bottom: 0; }
.plan-table thead th { font-weight: 600; font-size: 14px; color: var(--ink); }
.plan-table tbody th { font-weight: 600; font-size: 15.5px; color: var(--ink); width: 25%; }
.plan-table td { color: var(--ink); }
.plan-table td.mute { color: var(--body); width: 39%; }
.plan-table .col-ent { background: #F6F8FF; font-weight: 600; }
.rowname { display: inline-flex; align-items: center; gap: 12px; }
.get { display: grid; gap: 12px; margin-top: 24px; }
.get li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; box-shadow: var(--card-sm); }
.get .ico { margin-top: 2px; color: var(--a); }
.get em { display: block; font-style: normal; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.get p { margin-top: 3px; font-size: 15px; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.faq .card > h3 { margin-top: 0; }

/* ---------- demo ---------- */
.demo-hero { padding-block: 56px 28px; }
.demo { padding-block: 28px 64px; background: linear-gradient(180deg, #F7F9FE 0, #fff 260px); }
.demo-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.demo-tabs button { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 10px; border: 0; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px #D5DAE8; font-weight: 600; font-size: 15px; color: var(--ink); transition: background-color .15s, color .15s; }
.demo-tabs button span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tint); color: var(--blue); font-size: 13px; }
.demo-tabs button[aria-selected="true"] { background: var(--blue); box-shadow: none; color: #fff; }
.demo-tabs button[aria-selected="true"] span { background: rgba(255, 255, 255, .2); color: #fff; }
.say { max-width: 760px; margin: 30px auto 32px; text-align: center; font-size: 19px; line-height: 1.55; color: var(--ink); text-wrap: pretty; }
.win { overflow: hidden; }
.win-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 20px; border-bottom: 1px solid var(--line); background: #FAFBFE; }
.dots { display: inline-flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: #DDE1EC; }
.win-bar strong { font-size: 14px; color: var(--ink); }
.crumb { flex: 1; min-width: 200px; font-size: 13.5px; color: var(--mute); }
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-weight: 600; font-size: 12.5px; line-height: 1.3; white-space: nowrap; background: #EEF0F6; color: #3A3F50; background: color-mix(in srgb, var(--pc, #606985) 13%, #fff); color: color-mix(in srgb, var(--pc, #606985) 58%, #000); }
.pill-ok { background: #E4F5EE; color: #0B6B4B; }
.pill-paid { background: #FFF0D9; color: #7A4B06; }
.pill-mute { background: #EEF0F6; color: var(--mute); }
.win-body { padding: 30px; }
.win-h { font-weight: 700; font-size: clamp(20px, 2.2vw, 25px); line-height: 1.2; letter-spacing: -.018em; max-width: 760px; }
.stats4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 24px 0 14px; }
.stat { padding: 16px 18px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.stat span { display: block; font-size: 13px; color: var(--mute); }
.stat strong { display: block; margin: 6px 0 4px; font-weight: 700; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.stat em { display: block; font-style: normal; font-size: 13px; line-height: 1.4; }
.win-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.panel { padding: 20px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.panel h3 { font-weight: 600; font-size: 14px; letter-spacing: 0; margin-bottom: 16px; }
.hbars { display: grid; gap: 10px; }
.hbars li { grid-template-columns: 118px minmax(0, 1fr) 26px; font-size: 13.5px; }
.hbars .bar { height: 8px; }
.hbars .bar i { background: var(--brand); }
.track { position: relative; height: 22px; margin: 44px 8px 26px; }
.track::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--line); }
.track i { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #C3C9DB; font-style: normal; }
.track i.t-R, .track i.t-K { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 0 0 3px #fff; z-index: 1; }
.t-R { background: var(--amber) !important; }
.t-K { background: var(--brand) !important; }
.t-o { background: #C3C9DB; }
.track b { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); font-weight: 700; font-size: 12px; color: var(--ink); }
.firsts { margin-top: 20px; border-top: 1px solid var(--line); }
.firsts li { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.firsts li:last-child { border-bottom: 0; padding-bottom: 0; }
.firsts span { color: var(--body); }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; }
.legend li { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; }
.note { margin-top: 18px; padding: 14px 16px; border-radius: 8px; font-size: 15px; font-weight: 500; }
.note-amber { background: var(--amber-bg); color: var(--amber-ink); }
.note-blue { background: var(--tint); color: #26358F; }
.panel-table { padding: 0; overflow-x: auto; }
.dtable { width: 100%; min-width: 640px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dtable th, .dtable td { padding: 13px 18px; text-align: left; }
.dtable thead th { font-weight: 600; font-size: 12.5px; color: var(--mute); }
.dtable td { border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink); }
.dtable tr.me td { background: #F3F5FF; font-weight: 600; }
.alert { margin-top: 14px; padding: 20px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.alert-h { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; }
.alert-h strong { font-size: 15px; color: var(--ink); }
.alert p { margin: 12px 0 8px; font-size: 16px; line-height: 1.55; color: var(--ink); max-width: 860px; }
.alert em { font-style: normal; font-size: 13px; color: var(--mute); }
html:not(.js) .demo-tabs, html:not(.js) .demo-next button { display: none; }
html:not(.js) [role="tabpanel"] + [role="tabpanel"] { margin-top: 56px; }
.demo-next { display: flex; flex-direction: row-reverse; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.demo .fine { margin-top: 28px; }

/* ---------- flows ---------- */
.flow { padding-block: 56px 64px; min-height: 60vh; }
.flow .split { gap: 64px; }
.embed { overflow: hidden; }
.embed iframe { display: block; width: 100%; height: 700px; border: 0; background: #fff; }
.embed .fine { padding: 14px 20px; border-top: 1px solid var(--line); }
.center-col { text-align: center; }
.center-col > .tile { margin-bottom: 26px; }
.numbered { text-align: left; }
.numbered .card > .h-card { margin-top: 16px; }
.num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--blue); font-weight: 700; font-size: 14px; }
.summary { padding: 34px; }
.summary h2 { font-size: 28px; margin-top: 2px; }
.due { display: flex; align-items: baseline; gap: 6px; margin: 26px 0 22px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--ink); }
.due span { flex: 1; font-weight: 500; font-size: 15px; }
.due strong { font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -.03em; }
.due em { font-style: normal; color: var(--mute); }
.summary .fine { margin-top: 14px; }
.devnote { margin-top: 16px; padding: 12px 14px; border-radius: 6px; background: var(--amber-bg); color: var(--amber-ink); font-size: 13.5px; line-height: 1.5; }

/* ---------- closing and footer ---------- */
.closing { padding-block: 64px; }
.contact .split { align-items: start; }
.contact-points { margin-bottom: 4px; }
.contact-points li { font-size: 16px; color: var(--body); }
.foot { padding-block: 64px 40px; background: var(--soft); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.foot-brand p { margin-top: 14px; max-width: 300px; font-size: 14.5px; }
.foot h2 { font-weight: 600; font-size: 14px; line-height: 1.4; letter-spacing: 0; margin-bottom: 12px; }
.foot li + li { margin-top: 0; }
.foot li a { display: inline-block; padding-block: 4px; font-size: 14.5px; color: var(--body); }
@media (pointer: coarse) { .foot li a { padding-block: 11px; } .foot li + li { margin-top: -8px; } }
.foot li a:hover { color: var(--blue); }
.foot-note { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; color: var(--mute); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .sec { padding-block: 56px; }
  .hero-in, .split, .flow .split { gap: 44px; }
  .grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid3.dog, .grid3.pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .stats4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .research { gap: 40px; }
}
@media (max-width: 860px) {
  .js .nav-tog { display: block; }
  .nav-in { gap: 16px; }
  html:not(.js) .nav-in { height: auto; flex-wrap: wrap; padding-block: 14px 8px; }
  html:not(.js) .nav-menu { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 8px; }
  .js .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 8px; padding: 12px var(--gut) 24px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 24px 40px -20px rgba(17, 23, 51, .25); }
  /* the open menu fills the screen under the header, so the page never shows through beneath it */
  .js .nav-open .nav-menu { display: flex; height: calc(100vh - 68px); height: calc(100dvh - 68px); overflow-y: auto; overscroll-behavior: contain; }
  .nav-links { flex-direction: column; gap: 0; }
  .nav-links a, .nav-login { min-height: 48px; padding: 0 4px; font-size: 17px; }
  .nav-links li + li { border-top: 1px solid var(--line); }
  .nav-right { flex-direction: column; align-items: stretch; gap: 8px; border-top: 1px solid var(--line); padding-top: 8px; }
  .nav-right .btn { min-height: 46px; font-size: 15px; }
  .hero { padding-block: 40px 48px; }
  .demo-hero { padding-block: 48px 28px; }
  .demo { padding-top: 20px; }
  .slant { padding-bottom: calc(32px + 4.2vw); }
  .hero-in, .split, .research, .retail-groups, .plans, .faq, .win-2 { grid-template-columns: minmax(0, 1fr); }
  .split-flip > .split-copy { order: 0; }
  .split > .split-art:first-child { order: 2; }
  .grid3, .grid3.dog, .grid3.pillars { grid-template-columns: minmax(0, 1fr); }
  .grid3.dog { grid-template-rows: none; grid-auto-flow: row; }
  .dog-name:not(:first-child) { margin-top: 20px; }
  .slant + .soft, .slant + .sec:not(.logos) { padding-top: calc(20px + 4.2vw); }
  .grid3 { margin-top: 40px; }
  .how { gap: 64px; margin-top: 48px; }
  .stats { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .retail-groups { gap: 44px; margin-top: 56px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .foot-brand { grid-column: 1 / -1; }
  .flow { padding-block: 48px 72px; }
  .embed iframe { height: 760px; }
  .photo-sm { max-width: 100%; }
}
@media (max-width: 560px) {
  :root { --gut: 20px; }
  .sec { padding-block: 48px; }
  .sec-tight { padding-block: 0 64px; }
  .closing { padding-block: 72px; }
  .head .sub, .hero-copy .sub { font-size: 17px; }
  .cta .btn { flex: 1 1 100%; }
  .btn { white-space: normal; text-align: center; line-height: 1.25; padding-block: 10px; }
  .marquee-track { gap: 48px; padding-right: 48px; }
  .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sku th, .sku td { padding: 12px 12px; }
  .sku th:first-child, .sku td:first-child { padding-left: 16px; }
  .skucard-h, .skucard-f { padding-inline: 16px; }
  .sku .rlogo { object-position: left center; }
.sku .rlogo { max-width: 84px; }
  .plan, .summary, .form, .feature { padding: 24px; }
  /* 16px or larger, or iPhone Safari zooms the page in when a field is tapped */
  .form input:not([type="radio"]), .form textarea { font-size: 16px; }
  .win-body { padding: 20px 16px; }
  .stats4 { gap: 10px; }
  .stat { padding: 14px; }
  .stat strong { font-size: 24px; }
  .car-item { width: 292px; }
  .car-nav { display: none; }
  .demo-tabs button { flex: 1 1 100%; justify-content: flex-start; }
  .bars li { grid-template-columns: 88px minmax(0, 1fr) 40px; }
  .plan-table { min-width: 0; }
  .plan-table thead th:nth-child(2), .plan-table td.mute { display: none; }
  .plan-table th, .plan-table td { padding: 14px 12px; font-size: 14px; }
  .plan-table tbody th { width: 40%; font-size: 14.5px; }
  .rowname { gap: 8px; }
  .rowname .tile { --s: 26px !important; }
  .track b { font-size: 11px; }
  .hbars li { grid-template-columns: 100px minmax(0, 1fr) 24px; }
}
@media (max-width: 380px) {
  .sku th, .sku td { padding: 11px 6px; font-size: 13.5px; }
  .sku th:first-child, .sku td:first-child { padding-left: 12px; }
  .sku thead th { font-size: 12px; }
  .sku .rlogo { max-width: 66px; }
  .skucard-h { flex-wrap: wrap; }
  .plan-table th, .plan-table td { padding: 12px 8px; font-size: 13px; }
  .plan-table th:first-child { padding-left: 12px; }
  .plan-table tbody th { width: 36%; font-size: 13.5px; }
  .rowname .tile { display: none; }
  .car-item { width: 268px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; flex: 1; gap: 28px 48px; padding: 0 var(--gut); }
  .marquee-track[aria-hidden="true"] { display: none; }
}


/* ================= round 2: pricing specs, fuller product pages, home improvement, the tour ================= */
.specs { margin: 20px 0 28px; border-top: 1px solid var(--line); }
.specs li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.specs span { color: var(--mute); }
.specs b { font-weight: 600; color: var(--ink); text-align: right; }
.plans-note { margin-top: 20px; }
.summary .plan-for { margin-top: 2px; }
.split-copy > .more + .more { margin-left: 24px; }

/* each product, on screen: bigger art, more context */
.screens { display: grid; gap: 56px; margin-top: 40px; }
.screen-row { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.screen-flip > .screen-copy { order: 2; }
.screen-flip { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.win-h + .win-2 { margin-top: 20px; }
.screen-copy .lede { margin-top: 18px; }
.screen-sub { font-weight: 600; font-size: 15px; margin: 24px 0 0; color: var(--ink); }
.screen-copy .ticks { margin-top: 12px; }
.screen-copy > .more { margin-top: 22px; }

/* module pages */
.crumbs { margin-bottom: 14px; font-size: 14px; color: var(--mute); }
.crumbs a { color: var(--mute); text-decoration: none; }
.crumbs a:hover { color: var(--blue); }
.get-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.get-grid .card { padding: 24px; }
.get-grid .ico { color: var(--a); }
.get-grid .card > h3 { margin-top: 12px; }
.get-grid .card > p { margin-top: 6px; }
.asks { display: grid; gap: 12px; }
.asks li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: #fff; border-radius: 8px; box-shadow: var(--card-sm); font-weight: 500; font-size: 16px; color: var(--ink); }
.asks .ico { margin-top: 2px; color: var(--blue); }
.lede .more { margin-left: 4px; }

/* product overview */
.pcard-list { display: grid; gap: 6px; margin: 0 0 18px; }
.pcard-list li { position: relative; padding-left: 16px; font-size: 14px; color: var(--body); }
.pcard-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--a); }
.across { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; margin-top: 40px; }
.across-item { display: flex; flex-direction: column; gap: 14px; }
.across-item h3 { font-size: 16px; }
.across-item p { margin-top: 4px; font-size: 14.5px; }

/* home improvement: the real strip in the hero, then findings in four levels, each a small chart and one sentence */
.xcard { padding: 20px 22px 18px; }
.xcard-h { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.xcard-h strong { font-size: 15px; color: var(--ink); }
.xcard .xrows { gap: 14px; margin-top: 20px; }
.xcard .xrow { grid-template-columns: 92px minmax(0, 1fr) 92px; gap: 14px; }
.xcard .xrow-who .rlogo { max-width: 88px; max-height: 24px; }
.xcard .xrow-say { grid-column: auto; }
.xcard .xrow-say strong { font-size: 14px; line-height: 1.3; }
.xcard .legend { margin-top: 16px; }
.xcard .fine { margin-top: 12px; }
.levels { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; margin-top: 44px; }
.level-h { display: flex; align-items: flex-start; gap: 14px; }
.level-h .num { flex: none; margin-top: 1px; }
.level-h h3 { font-weight: 700; font-size: 22px; line-height: 1.25; letter-spacing: -.015em; }
.level-h p { margin-top: 4px; font-size: 15.5px; }
.fgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 22px; }
.fcard { display: flex; flex-direction: column; overflow: hidden; }
.fchart { padding: 18px 18px 12px; background: #FAFBFE; border-bottom: 1px solid var(--line); }
.fx { display: block; width: 100%; height: auto; overflow: visible; }
.fx text { font-family: var(--sans); font-size: 11px; fill: var(--mute); }
.fx .tb { fill: var(--body); }
.fx .tk { fill: var(--ink); font-weight: 600; }
.fx .tw { fill: #fff; font-weight: 600; }
.fx .sm { font-size: 9.5px; }
.fbody { display: flex; flex-direction: column; flex: 1; padding: 16px 20px 20px; }
.fmeta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 10px; font-size: 13px; color: var(--mute); }
.fmeta .pill { font-size: 12px; padding: 3px 8px; }
.fcard h4 { margin-top: 8px; font-weight: 600; font-size: 16px; line-height: 1.42; letter-spacing: -.004em; color: var(--ink); text-wrap: pretty; }
.fwhere { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.fwhere .pill { font-size: 12px; padding: 3px 8px; }
.fstake { display: flex; gap: 8px; margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--ink); }
.fstake .ico { margin-top: 1px; color: #B5720F; }
.fnext { display: flex; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 6px; background: #E9F7F0; color: #0B5A40; font-size: 14px; line-height: 1.45; }
.fnext .ico { margin-top: 1px; color: var(--green); }
.fbody > .more { margin-top: auto; padding-top: 14px; font-size: 14px; }
.fwide { grid-column: span 2; flex-direction: row; }
.fwide .fchart { flex: 1.55 1 0; display: flex; align-items: center; padding: 22px; border-bottom: 0; border-right: 1px solid var(--line); }
.fwide .fbody { flex: 1 1 0; justify-content: center; padding: 28px; }
.fwide h4 { font-size: 20px; line-height: 1.35; letter-spacing: -.012em; }
.fwide .fbody > .more { margin-top: 18px; }
.matrix { margin-top: 40px; overflow: hidden; }
.mtable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mtable th, .mtable td { padding: 16px 18px; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.45; color: var(--ink); }
.mtable thead th, .mtable thead td { border-top: 0; padding-block: 22px 16px; vertical-align: middle; }
.mtable thead .rlogo { max-width: 124px; max-height: 28px; }
.mtable tbody th { width: 21%; font-weight: 600; }
.mtable tbody th a { color: var(--ink); }
.mtable tbody th a:hover { color: var(--blue); }
.mtable tbody th .chev { margin-left: 4px; color: var(--mute); }
.m-real th, .m-real td { background: #FFF8EC; }
.m-real th span { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--mute); }
.m-real b, .m-stat b { font-size: 17px; font-variant-numeric: tabular-nums; }
.meter { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: #EFE3CC; overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--amber); }
.mstack { display: none; }
.mcard { padding: 22px; }
.mcard .rlogo { max-width: 150px; max-height: 28px; object-position: left center; }
.m-stat { margin-top: 16px; padding: 12px 14px; border-radius: 6px; background: #FFF8EC; color: var(--ink); }
.m-stat em { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: var(--mute); }
.mcard dl { margin: 6px 0 0; }
.mcard dt { margin-top: 14px; font-weight: 600; font-size: 13.5px; color: var(--mute); }
.mcard dd { margin: 2px 0 0; font-size: 15px; color: var(--ink); }
.moments-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 28px 24px; margin-top: 36px; }
.moment h3 { margin-top: 14px; font-size: 16px; }
.moment p { margin-top: 4px; font-size: 14.5px; }
.custom-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 32px; }
.custom-list li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border-radius: 8px; box-shadow: var(--card-sm); font-weight: 600; font-size: 15px; color: var(--ink); }
.custom-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.custom-grid .card { padding: 24px; }
.custom-grid .card > h3 { margin-top: 16px; }

/* the tour */
.tour-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.tab-progress { position: absolute; left: 10px; right: 10px; bottom: 5px; height: 2px; border-radius: 1px; background: currentColor; opacity: .55; transform: scaleX(0); transform-origin: left; }
.tour.playing .demo-tabs button[aria-selected="true"] .tab-progress { animation: tabprog var(--step, 14s) linear forwards; }
.tour.paused .tab-progress { animation-play-state: paused !important; }
@keyframes tabprog { to { transform: scaleX(1); } }
.tour-toggle { min-height: 40px; padding: 0 14px; border: 0; border-radius: 4px; background: #fff; box-shadow: inset 0 0 0 1px #D5DAE8; font-weight: 600; font-size: 14px; color: var(--ink); }
.tour-toggle:hover { color: var(--blue); }
html:not(.js) .tour-toggle { display: none; }
.strip { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.strip i { position: relative; display: block; height: 22px; border-radius: 3px; font-style: normal; }
.s-o { background: #E3E6F0; }
.s-k { background: var(--brand); }
.s-K { background: var(--brand); box-shadow: inset 0 0 0 2px #F2A33A; }
.s-P { background: #F2A33A; }
.strip b { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); font-weight: 700; font-size: 11px; color: var(--ink); }
.panel .strip { margin-top: 26px; }
.xrows { display: grid; gap: 18px; margin-top: 24px; }
.xrow { display: grid; grid-template-columns: 150px minmax(0, 1fr) 240px; gap: 20px; align-items: center; }
.xrow-who .rlogo { max-width: 130px; object-position: left center; }
.xrow-say strong { display: block; font-size: 15px; color: var(--ink); }
.xrow-say span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--body); }
.xrows-tight { gap: 14px; margin-top: 8px; }
.xrows-tight .xrow { grid-template-columns: 96px minmax(0, 1fr) 118px; gap: 14px; }
.xrows-tight .xrow-who .rlogo { max-width: 100%; }
.xrows-tight .xrow-say { grid-column: auto; }
.panel .xrow .strip { margin-top: 0; }
.xrows-tight .strip i { height: 18px; }
.xrows + .legend, .panel .legend { margin-top: 16px; }
.stats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 14px; }
.strip-keys { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 6px; font-size: 13px; color: var(--body); }
.strip-keys b { margin-right: 6px; color: var(--ink); }
.panel + .win-2 { margin-top: 14px; }
.panel-who { display: flex; align-items: center; gap: 10px; }
.panel .panel-who h3 { margin: 0; }
.panel-who .rlogo { max-width: 90px; }
.panel > p { margin-top: 12px; font-size: 15px; color: var(--ink); }
.big-num { margin: 14px 0 0 !important; font-weight: 700; font-size: 40px !important; line-height: 1; letter-spacing: -.03em; }
.win-2-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.finding { display: grid; gap: 14px; align-content: start; }
.finding-row { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.finding-row h3 { font-size: 15px; }
.finding-row p { margin-top: 4px; font-size: 14.5px; color: var(--ink); }

/* Each tour step replays its animation when it is shown: mvp.js adds .play. No animation without motion. */
@media (prefers-reduced-motion: no-preference) {
  .play .strip i { animation: cell .35s both; animation-delay: calc(var(--i) * 26ms + var(--j, 0) * 170ms + 150ms); }
  .play .hbars .bar i { animation: grow .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 150ms); }
  .play .bl-r .bl-b i { animation: grow .9s cubic-bezier(.2, .7, .2, 1) both; }
  .play .track i { animation: drop .45s both; animation-delay: calc(var(--i) * 45ms + 300ms); }
  .play .dtable tbody tr { animation: rise .45s both; animation-delay: calc(var(--i) * 90ms + 200ms); }
  .play .stat { animation: rise .45s both; }
  .play .stat:nth-child(2) { animation-delay: .08s; } .play .stat:nth-child(3) { animation-delay: .16s; } .play .stat:nth-child(4) { animation-delay: .24s; }
  .play .alert, .play .finding-row, .play .xrow-say { animation: rise .5s both; animation-delay: calc(var(--j, 0) * 180ms + 350ms); }
  .play .note, .play .big-num, .play .strip-keys { animation: rise .5s both; animation-delay: 1s; }
  @keyframes cell { from { opacity: 0; transform: scaleY(.3); } }
  @keyframes grow { from { width: 0; } }
  @keyframes drop { from { opacity: 0; transform: translateY(-14px); } }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
}

@media (prefers-reduced-motion: no-preference) {
  .js [data-play]:not(.play) :is(.fx-pop, .fx-grow, .fx-growy, .fx-draw, .fx-fade), .js [data-play]:not(.play) .strip i { opacity: 0; }
  .play .fx-pop { transform-box: fill-box; transform-origin: center; animation: fxpop .45s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 1ms + 120ms); }
  .play .fx-grow { transform-box: fill-box; transform-origin: left center; animation: fxgrow .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 1ms + 150ms); }
  .play .fx-growy { transform-box: fill-box; transform-origin: center bottom; animation: fxgrowy .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0) * 1ms + 150ms); }
  .play .fx-draw { stroke-dasharray: 1; animation: fxdraw 1.3s cubic-bezier(.4, 0, .2, 1) both; animation-delay: calc(var(--d, 0) * 1ms + 150ms); }
  .play .fx-fade { animation: fxfade .5s both; animation-delay: calc(var(--d, 0) * 1ms + 200ms); }
  @keyframes fxpop { from { opacity: 0; transform: scale(.5); } }
  @keyframes fxgrow { from { transform: scaleX(0); } }
  @keyframes fxgrowy { from { transform: scaleY(0); } }
  @keyframes fxdraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes fxfade { from { opacity: 0; } }
}

@media (max-width: 1024px) {
  .get-grid, .across, .custom-grid, .fgrid, .custom-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .moments-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .screen-row { gap: 36px; }
  .xrow { grid-template-columns: 120px minmax(0, 1fr); }
  .xrow-say { grid-column: 2; }
}
@media (max-width: 860px) {
  .screen-row, .win-2-wide { grid-template-columns: minmax(0, 1fr); }
  .matrix { display: none; }
  .mstack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; }
  .screen-flip > .screen-copy { order: 0; }
  .screens { gap: 48px; }
}
@media (max-width: 560px) {
  .get-grid, .across, .custom-grid, .stats3 { grid-template-columns: minmax(0, 1fr); }
  .fwide { grid-column: auto; }
  .xrow, .xrows-tight .xrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .xrow-say { grid-column: auto; }
  .strip { gap: 2px; }
  .strip i, .xrows-tight .strip i { height: 16px; }
  .strip b { font-size: 9.5px; }
  .xcard { padding: 18px 16px 16px; }
  .xcard .xrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who say" "strip strip"; gap: 8px 12px; }
  .xcard .xrow-who { grid-area: who; }
  .xcard .xrow-strip { grid-area: strip; }
  .xcard .xrow-say { grid-area: say; text-align: right; }
  .moments-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
  .levels { gap: 48px; }
  .level-h h3 { font-size: 20px; }
  .split-copy > .more + .more { margin-left: 0; display: flex; margin-top: 12px; }
}
@media (max-width: 700px) {
  .fwide { flex-direction: column; }
  .fwide .fchart { border-right: 0; border-bottom: 1px solid var(--line); padding: 18px 18px 12px; }
  .fwide .fbody { padding: 16px 20px 20px; }
  .fwide h4 { font-size: 17px; }
}
/* On a phone each level's findings, and the retailer cards, become a row you swipe; the next card peeks in. */
@media (max-width: 560px) {
  .fgrid, .mstack { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); margin-inline: calc(-1 * var(--gut)); padding: 6px var(--gut) 20px; scrollbar-width: none; }
  .fgrid::-webkit-scrollbar, .mstack::-webkit-scrollbar { display: none; }
  .fgrid > .fcard, .mstack > .mcard { flex: 0 0 90%; scroll-snap-align: start; }
  /* charts shrink with the card, so their text is set larger here to land at a readable size on screen */
  .fgrid .fchart { padding: 14px 10px 10px; }
  .fgrid .fwide .fchart { padding: 14px 8px 10px; }
  .fgrid .fx text { font-size: 12.5px; }
  .fgrid .fx .sm { font-size: 11px; }
  .fgrid { margin-top: 16px; }
  .custom-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .custom-list li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; font-size: 14.5px; line-height: 1.3; }
}
@media (max-width: 380px) {
  .fgrid > .fcard { flex-basis: 94%; }
  .fgrid .fchart, .fgrid .fwide .fchart { padding: 12px 6px 8px; }
  .fgrid .fx text { font-size: 14px; }
  .fgrid .fx .sm { font-size: 13px; }
}

/* ================= round 3: book a demo, get Growth set up ================= */
/* Book a demo and Get Growth set up share one layout: heading and detail on the left, the action (the calendar or
   the form) on the right. On a phone the action comes straight after the heading, before the detail. */
.act2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-rows: auto 1fr; grid-template-areas: "head cal" "agenda cal"; gap: 40px 64px; align-items: start; }
.act2-head { grid-area: head; }
.act2-do { grid-area: cal; }
.act2-info { grid-area: agenda; }
.act2-info > .h4:first-child { margin-top: 0; }
.act2-info > .summary-sm:first-child { margin-top: 0; }
.embed-h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.embed-h strong { font-size: 16px; color: var(--ink); }
.embed-h span { font-size: 13.5px; color: var(--mute); }
.agenda { margin-top: 14px; border-top: 1px solid var(--line); }
.agenda li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.agenda-t { padding-top: 1px; font-weight: 600; font-size: 14px; color: var(--blue); font-variant-numeric: tabular-nums; }
.agenda h3 { font-size: 16px; }
.agenda p { margin-top: 2px; font-size: 15px; }
.book-alt .more, .summary-sm .fine .more { text-decoration: none; }
.book-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 22px; font-size: 15px; }
/* Get Growth set up */
.summary-sm { margin-top: 28px; padding: 24px; }
.summary-sm .plan-head h2 { font-size: 20px; margin: 0; }
.summary-sm .specs { margin: 16px 0 12px; }
.summary-sm .fine .more { margin-left: 6px; font-size: 13px; }
.form-h { font-size: 20px; letter-spacing: -.012em; }
.form-sub { margin: 4px 0 20px; font-size: 14.5px; }
@media (max-width: 860px) {
  .act2 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "cal" "agenda"; gap: 28px; }
}

/* ================= retailer pages: SEO landing pages in the launch design ================= */
.shot { margin: 0; }
.shot-frame { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 0 30px 60px -20px rgba(50, 50, 93, .28), 0 12px 28px -14px rgba(17, 23, 51, .22); }
.shot-frame img { display: block; width: 100%; height: auto; }
.shot figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-weight: 600; font-size: 13.5px; color: var(--ink); }
.shot figcaption span { font-weight: 400; color: var(--mute); }
.rhero-logo { margin-bottom: 18px; }
.rhero-logo .rlogo { max-width: 170px; max-height: 36px; object-position: left center; }
.rhero .head h1 { font-size: clamp(32px, 4vw, 46px); }
.rchecks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px; margin-top: 44px; padding-top: 28px; border-top: 1px solid rgba(17, 23, 51, .08); }
.rchecks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink); }
.rchecks .ico { margin-top: 1px; color: var(--blue); }
.answer .head { max-width: 820px; }
.routcomes .card > h3 { margin-top: 16px; }
.impl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.rsum { margin-top: 28px; padding: 28px; }
.rsum > .lede { max-width: 820px; margin: 0 0 18px; color: var(--ink); }
.acc { border-top: 1px solid var(--line); }
.acc > summary { position: relative; display: block; padding: 16px 36px 16px 0; font-weight: 600; font-size: 15.5px; color: var(--ink); cursor: pointer; list-style: none; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); transition: transform .15s; }
.acc[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); }
.acc > summary:hover { color: var(--blue); }
.acc-body { padding: 0 0 18px; }
.acc-body > p { max-width: 780px; font-size: 15px; }
.acc-body > p + .claims, .acc-body > p + p { margin-top: 14px; }
.claims { display: grid; gap: 12px; }
.claims li { position: relative; padding-left: 18px; max-width: 820px; font-size: 14.5px; line-height: 1.55; }
.claims li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
.claims a { font-size: 13px; color: var(--mute); text-decoration: underline; text-underline-offset: 2px; }
.vis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; align-items: start; }
.vis-col { padding: 24px 26px 8px; }
.vis-count { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; color: var(--mute); font-size: 14.5px; }
.vis-count b { font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.acc-item > summary { font-weight: 500; font-size: 15px; }
.faq-acc { max-width: 880px; margin-top: 28px; border-bottom: 1px solid var(--line); }
.acc-faq > summary { font-size: 16.5px; }
.rcards { margin-top: 32px; }
.rcard { display: flex; flex-direction: column; gap: 12px; padding: 24px; color: var(--ink); transition: box-shadow .15s; }
.rcard:hover { box-shadow: 0 20px 44px -12px rgba(50, 50, 93, .24), 0 2px 6px rgba(17, 23, 51, .06); color: var(--ink); }
.rcard-logo { display: flex; align-items: center; height: 32px; }
.rcard-logo .rlogo { max-width: 150px; max-height: 30px; object-position: left center; }
.rcard-t { font-size: 15px; color: var(--body); }
.rcard .more, .rhub-card .more { margin-top: auto; }
.rhub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.rhub-card { display: flex; flex-direction: column; overflow: hidden; color: var(--ink); transition: box-shadow .15s; }
.rhub-card:hover { box-shadow: 0 20px 44px -12px rgba(50, 50, 93, .24), 0 2px 6px rgba(17, 23, 51, .06); color: var(--ink); }
.rhub-shot { padding: 24px 24px 0; background: linear-gradient(180deg, #EEF1FF, #F8F9FE); }
.rhub-shot .shot-frame { border-radius: 8px 8px 0 0; box-shadow: 0 -2px 18px -6px rgba(50, 50, 93, .2); }
.rhub-shot figcaption { display: none; }
.rhub-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 24px; }
.rhub-body p { font-size: 15px; color: var(--body); }
@media (max-width: 1024px) {
  .rchecks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .impl, .vis, .rhub { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rchecks { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
  .rsum, .vis-col { padding: 20px; }
  .rhub-shot { padding: 16px 16px 0; }
  .rhub-body, .rcard { padding: 20px; }
}

/* ---------- research (/research and everything under it) ----------
   Version 3 (2 Oct 2026; site-build/research/REPORT_DESIGN.md). A published report, not a dashboard: a cover on a
   quiet ombre ground, key findings on a tint beside a bordered "about" card, then an article in which every section
   pairs one chart in a bordered figure with its explanation, and a tinted "What to do" callout. One chart everywhere:
   a row is a name, a thin bar and a value. A retailer is named in text; its logo appears once, on the cover. Brand
   blue marks the one thing to look at, grey is everything else, green is only a gain and red only a loss. Bars are
   drawn in the page as it arrives (no entrance animation), so a print, a PDF and a screenshot all show them. On a
   phone a chart row puts its name and value on one line and the bar beneath, so nothing scrolls sideways; only the
   sub-navigation scrolls, on its own line. */
.rs-nav { border-bottom: 1px solid var(--line); background: #fff; }
.rs-nav ul { display: flex; gap: 4px; margin-inline: -12px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.rs-nav ul::-webkit-scrollbar { display: none; }
.rs-nav a { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; border-bottom: 2px solid transparent; font-size: 14.5px; font-weight: 500; color: var(--mute); }
.rs-nav a:hover { color: var(--ink); }
.rs-nav a[aria-current] { color: var(--ink); font-weight: 600; border-bottom-color: var(--brand); }

.rp { padding-bottom: 96px; background: #fff; }
.rp-cover { padding-block: 22px 44px; border-bottom: 1px solid var(--line); }
.rp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--mute); }
.rp-crumbs li { display: inline-flex; align-items: center; }
.rp-crumbs li + li::before { content: "›"; margin-right: 8px; color: #A9B0C6; }
.rp-crumbs a { display: inline-flex; align-items: center; color: var(--mute); } .rp-crumbs a:hover { color: var(--blue); }
.rp-crumbs [aria-current] { color: var(--ink); }
.rp-kick { margin-top: 30px; font-size: 14px; font-weight: 600; color: var(--blue); }
.rp-cover > .wrap > .rp-kick:first-child, .rp-cover > .wrap > h1:first-child { margin-top: 26px; }
/* a logo that is only a mark, with the retailer's name beside it */
.rl { display: inline-flex; align-items: center; gap: .45em; min-width: 0; color: var(--ink); font-weight: 600; white-space: nowrap; }
.rl .rlogo { flex: none; }
.rl-t { line-height: 1.15; }
.rp-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; margin-top: 14px; }
.rp-logos a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.rp-logos .rl { font-size: 16.5px; }
.rp-cover h1 { margin-top: 12px; max-width: 920px; font-size: clamp(28px, 3.6vw, 42px); text-wrap: balance; }
.rp-dek { margin-top: 16px; max-width: 760px; font-size: clamp(18px, 1.9vw, 21px); line-height: 1.42; color: var(--ink); text-wrap: pretty; }
.rp-sub { font-size: 17.5px; line-height: 1.55; color: var(--body); }
.rp-sub a { font-weight: 600; white-space: nowrap; }
.rp-upd { display: block; margin-top: 12px; font-size: 13.5px; color: var(--mute); }
.rp-by, .rp-fresh { display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 13.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.rp-by { margin-top: 24px; } .rp-fresh { margin-top: 6px; }
.rp-by span:first-child { font-weight: 600; color: var(--ink); }
.rp-by span + span, .rp-fresh span + span { margin-left: 12px; padding-left: 12px; border-left: 1px solid #CDD3E3; }
.rp-fresh a { font-weight: 600; }
/* wide screens: the facts as a panel on the right of the cover, one fact a line */
@media (min-width: 1101px) {
  .rp-cv { display: grid; grid-template-columns: minmax(0, 1fr) 268px; gap: 0 56px; align-items: end; }
  .rp-meta { margin-bottom: 4px; padding: 6px 20px; border: 1px solid rgba(17, 23, 51, .1); border-radius: 8px; background: rgba(255, 255, 255, .72); }
  .rp-meta .rp-by, .rp-meta .rp-fresh { display: grid; gap: 0; margin: 0; font-size: 14px; }
  .rp-meta span { display: block; padding: 11px 0; line-height: 1.35; }
  .rp-meta .rp-by span + span, .rp-meta .rp-fresh span + span, .rp-meta .rp-fresh span:first-child { margin-left: 0; padding-left: 0; border-left: 0; border-top: 1px solid rgba(17, 23, 51, .08); }
}
.rp-ed { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; padding-block: 8px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.rp-ed-now { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.rp-ed-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.rp-ed-past { color: var(--mute); } .rp-ed-past a { font-weight: 600; }
.rp-ed-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.rp-ed-links > * { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.rp-ed-links a { font-weight: 600; }
.rp-ed-none { color: #8E97B3; }

.rp-glance { margin-top: 40px; }
.rp-glance h2, .rp-past h2, .rp-rel h2 { font-size: 20px; line-height: 1.3; letter-spacing: -.01em; }
.rp-glance ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.rp-glance li { display: grid; gap: 8px; align-content: start; padding: 22px 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.rp-glance b { font-size: clamp(30px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rp-glance li > span:last-child { font-size: 15px; line-height: 1.4; color: var(--body); }

/* key findings (tinted) beside about this report (bordered) */
.rp-top { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.rp-key, .rp-about { padding: 28px 30px; border-radius: 8px; }
.rp-key { background: var(--tint); }
.rp-about { display: grid; align-content: start; gap: 12px; border: 1px solid var(--line); }
.rp-key h2, .rp-about h2 { font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.rp-key ul { display: grid; gap: 13px; margin-top: 16px; }
.rp-key li { position: relative; padding-left: 20px; font-size: 16.5px; line-height: 1.5; color: var(--ink); text-wrap: pretty; }
.rp-key li::before, .rp-limits li::before, .fx-f li::before, .mt-ul li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.rp-key b, .fx-f b { font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-about p { font-size: 15px; line-height: 1.6; color: var(--body); }
.rp-about .more { font-size: 14.5px; }
a.gl { color: inherit; text-decoration: underline; text-decoration-color: #A9B4E6; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.gl:hover { color: var(--blue); text-decoration-color: currentColor; }

/* contents on the left, the article on the right */
.rp-body { display: grid; grid-template-columns: 196px minmax(0, 1fr); gap: 0 64px; margin-top: 56px; }
.rp-toc { position: sticky; top: 92px; align-self: start; padding-top: 6px; }
.rp-toc p { font-size: 13px; font-weight: 600; color: var(--ink); }
.rp-toc ol { display: grid; margin-top: 8px; border-left: 1px solid var(--line); }
.rp-toc a { display: flex; align-items: center; min-height: 36px; padding: 4px 0 4px 14px; margin-left: -1px; border-left: 1px solid transparent; font-size: 14px; line-height: 1.3; color: var(--mute); }
.rp-toc a:hover { color: var(--ink); border-left-color: var(--brand); }
.rp-toc a[aria-current] { color: var(--ink); font-weight: 600; border-left-color: var(--brand); }   /* set by mvp.js as the reader scrolls */
.rp-art { min-width: 0; }
.rp-b { padding-block: 0 56px; }
.rp-b + .rp-b, .rp-limits { padding-top: 48px; border-top: 1px solid var(--line); }
.rp-b > h2, .rp-limits h2 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.rp-f { margin-top: 12px; max-width: 720px; font-size: 20px; line-height: 1.4; font-weight: 500; color: var(--ink); text-wrap: pretty; }
.rp-status { margin-top: 16px; max-width: 720px; padding: 18px 20px; border-radius: 8px; background: var(--soft); font-size: 16px; color: var(--ink); }
.rp-when { margin-top: 12px; max-width: 680px; font-size: 15px; color: var(--mute); }
.rp-fig { margin-top: 26px; }
.rp-fig-c { padding: 28px 30px 26px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.rp-fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--mute); }
.rp-fig figcaption b { font-weight: 600; color: var(--ink); }
.rp-x, .rp-do { max-width: 700px; margin-top: 26px; }
.rp-x h3, .rp-do h3 { font-size: 14px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.rp-x p { margin-top: 6px; font-size: 16.5px; line-height: 1.62; color: var(--body); text-wrap: pretty; }
.rp-do { padding: 18px 22px 20px; border-radius: 8px; background: var(--tint); }
.rp-do h3 { color: var(--blue); }
.rp-do p { margin-top: 6px; font-size: 16.5px; line-height: 1.58; color: var(--ink); text-wrap: pretty; }
.rp-limits { padding-bottom: 8px; }
.rp-limits ul, .mt-ul { display: grid; gap: 10px; max-width: 700px; margin: 16px 0 14px; }
.rp-limits li, .mt-ul li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.55; color: var(--body); }
.rp-cite { max-width: 700px; margin-top: 32px; padding: 16px 20px; border-radius: 8px; background: var(--soft); }
.rp-cite h2 { font-size: 14px; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.rp-cite p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--body); overflow-wrap: anywhere; }

/* the chart */
.ch { display: grid; gap: 13px; }
.ch + .ch { margin-top: 14px; }
.ch li { display: grid; grid-template-columns: minmax(0, 13.5em) minmax(0, 1fr) 3.4em; gap: 4px 16px; align-items: center; font-size: 14.5px; line-height: 1.3; color: var(--ink); }
.ch-4 li { grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 4.6em 3.4em; }
.ch-4 .ch-x { order: 3; } .ch-4 .ch-v { order: 4; }
.ch-4 .ch-hd > span:last-child:empty { display: none; }
/* counts shown side by side but not compared (each from its own start date): no bar */
.ch-nb li { grid-template-columns: minmax(0, 1fr) 3.4em; } .ch-nb .ch-b { display: none; }
.ch-wide li { grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 11em; }
.ch-n { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ch-t { display: grid; gap: 1px; min-width: 0; overflow-wrap: anywhere; }
.ch-t a, .ch-s a { color: var(--ink); } .ch-t a:hover, .ch-s a:hover { color: var(--blue); }
.ch-t small, .np small { font-size: 12.5px; line-height: 1.35; color: var(--mute); }
.ch-b { position: relative; height: 6px; border-radius: 3px; background: #EEF0F6; }
.ch-b i { display: block; height: 100%; min-width: 2px; border-radius: 3px; background: #B4BBCF; }
.ch .hi .ch-b i { background: var(--brand); }
.ch .rest .ch-b i { background: #D5DAE8; }
/* changes: gains run right of the centre line, losses left */
.ch-dv::after { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: #8E97B3; }
.ch-dv i { position: absolute; top: 0; }
.ch .up .ch-dv i { background: var(--green); border-radius: 0 3px 3px 0; } .ch .down .ch-dv i { background: var(--red); border-radius: 3px 0 0 3px; }
.ch-a { margin-right: 6px; font-size: 10px; vertical-align: 1px; }
.up .ch-a, .ch-a.up { color: var(--green); } .down .ch-a, .ch-a.down { color: var(--red); }
.ch-note .ch-a.down { margin-left: 14px; }
.ch-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-x { text-align: right; font-size: 12.5px; color: var(--mute); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch .rest { color: var(--mute); } .ch .rest .ch-v { font-weight: 500; }
.ch .ch-s { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; min-height: 20px; color: var(--mute); }
.ch .ch-s b { font-weight: 500; color: var(--ink); }
.ch .ch-hd { font-size: 12px; color: var(--mute); }
.ch .ch-hd .ch-hb { grid-column: 2 / 4; text-align: right; } .ch-4 .ch-hd .ch-hb { grid-column: 2 / 5; }
.ch-h { margin: 28px 0 14px; font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--mute); }
.ch-h:first-child, .ch-gh + .ch-h, .ch-gs-n + .ch-h { margin-top: 0; }
.ch-note { margin-top: 16px; font-size: 13px; color: var(--mute); }
.ch-note + .ch-note { margin-top: 6px; }
.own { flex: none; display: inline-block; width: 7px; height: 7px; margin-left: 7px; border: 1.5px solid #8E97B3; border-radius: 50%; vertical-align: 1px; }
.ch-t > span:has(.own) { text-wrap: balance; }
.ch-note .own { margin: 0 7px 0 0; }
/* panels: one retailer each, two across; the retailer is a small bold heading, never a logo */
.ch-gs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 48px; }
.ch-ts { display: grid; gap: 30px; }
.ch-g .ch li { grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr) 3.2em; gap: 4px 12px; }
.ch-ts .ch-g .ch li { grid-template-columns: minmax(0, 15em) minmax(0, 1fr) 4.6em 3.4em; gap: 4px 16px; }
.ch-gh { margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.ch-gh a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); } .ch-gh a:hover { color: var(--blue); }
.ch-gs-n { margin: -6px 0 12px; font-size: 12.5px; color: var(--mute); }
.ch-gt { margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 15px; color: var(--ink); }

/* new products */
.np { display: grid; }
.np-gap { height: 28px; }
.np li { display: grid; grid-template-columns: minmax(0, 1fr) 4.6em 5.4em; gap: 4px 16px; align-items: baseline; padding-block: 11px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.np .np-hd { padding: 0 0 8px; border-top: 0; font-size: 12px; color: var(--mute); }
.np-hd span:nth-last-child(-n+2) { text-align: right; }
.np-n { min-width: 0; overflow-wrap: anywhere; }
.np-n a { color: var(--ink); }
.np-n a:hover { color: var(--blue); }
.np small { display: block; margin-top: 2px; }
.np-p { text-align: right; color: var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.np-k { display: none; }
.np-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* the ask, all editions, read next */
.rp-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 24px 56px; align-items: center; margin-top: 56px; padding: 36px 40px; border-radius: 10px; background: var(--soft); }
.rp-ask-a { display: grid; gap: 18px; justify-items: start; }
.rp-ask-a p { margin-top: -8px; font-size: 15.5px; color: var(--body); }
.rp-ask h2 { font-size: 24px; line-height: 1.25; letter-spacing: -.018em; }
.rp-sign { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px; align-items: end; }
.rp-sign label { display: grid; gap: 8px; font-size: 14px; color: var(--body); }
.rp-sign input[type="email"] { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #D5DAE8; border-radius: 4px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); }
.rp-sign .form-msg { grid-column: 1 / -1; margin: 0; }
.rp-sign .hp { position: absolute; left: -9999px; }
.rp-past { margin-top: 56px; }
.rp-past ul, .rx-list { margin-top: 12px; border-top: 1px solid var(--line); }
.rp-past li, .rx-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px; min-height: 48px; padding-block: 8px; border-bottom: 1px solid var(--line); font-size: 15px; }
.rp-past li a, .rx-list li a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.rx .more, .rp .more { min-height: 44px; }
.rp-past li > span:last-child, .rx-list li > span:last-child { margin-left: auto; color: var(--mute); font-variant-numeric: tabular-nums; }
.rp-now { padding: 2px 8px; border-radius: 999px; background: var(--tint); font-size: 12.5px; font-weight: 600; color: var(--blue); }
.rp-rel { margin-top: 56px; }
.rp-rel ul, .rx-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.rp-rel li, .rx-cards li { display: grid; }
.rp-rel a, .rx-cards a { display: grid; gap: 6px; align-content: start; padding: 22px 24px; border-radius: 8px; background: #fff; box-shadow: var(--card-sm); color: var(--body); font-size: 14.5px; line-height: 1.5; transition: box-shadow .15s, transform .15s; }
.rp-rel a:hover, .rx-cards a:hover { box-shadow: var(--card); transform: translateY(-1px); color: var(--body); }
.rp-rel strong, .rx-cards strong { display: inline-flex; align-items: center; gap: 6px; font-size: 16.5px; line-height: 1.3; color: var(--ink); }
.rp-rel a:hover strong { color: var(--blue); }

/* research home, retailer homes, categories, the archive, the glossary, the method */
.rx-s { margin-top: 64px; }
.rx-first { margin-top: 40px; }
.rx-sh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.rx-sh h2 { font-size: 24px; line-height: 1.2; letter-spacing: -.018em; }
.rx-when { margin-top: 14px; font-size: 14px; color: var(--mute); }
/* the feature panel: this week's report */
.fx { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); margin-top: 40px; border-radius: 10px; background: #fff; box-shadow: var(--card); overflow: hidden; }
.fx-a { display: grid; align-content: start; justify-items: start; gap: 0; padding: 34px 38px 36px; }
.fx-a h2 { font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.3; color: var(--blue); }
.fx-k { margin-top: 2px; font-size: 13.5px; color: var(--mute); font-variant-numeric: tabular-nums; }
.fx-h { margin-top: 16px; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.24; letter-spacing: -.018em; font-weight: 700; color: var(--ink); text-wrap: balance; }
.fx-f { display: grid; gap: 10px; margin: 20px 0 26px; }
.fx-f li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.5; color: var(--body); }
.fx-b { padding: 34px 36px 30px; background: var(--soft); border-left: 1px solid var(--line); }
.fx-b .ch-wide li { grid-template-columns: minmax(0, 11.5em) minmax(0, 1fr) 9.4em; gap: 4px 12px; }
.fx-b .ch-b { background: #E6E9F2; }
/* the four retailers: the only logos on /research */
.rx-ret { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.rx-ret li { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 22px 22px 12px; border-radius: 8px; background: #fff; box-shadow: var(--card-sm); }
.rx-rl { display: flex; align-items: center; min-height: 44px; font-size: 15px; }
.rx-rl .rlogo { width: auto; height: 26px; max-width: 130px; object-position: left center; }
.rx-ret dl { display: grid; gap: 12px; align-content: start; }
.rx-ret dt { font-size: 12.5px; color: var(--mute); }
.rx-ret dd { margin: 1px 0 0; font-size: 15px; line-height: 1.35; color: var(--ink); }
.rx-ret dd b, .rx-t b { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rx-ra { display: grid; border-top: 1px solid var(--line); }
.rx-ra a { text-decoration: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-size: 14.5px; font-weight: 600; }
.rx-ra a + a { border-top: 1px solid var(--line); }
/* tables: categories, sources */
.rx-tw { margin-top: 6px; }
.rx-t { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.rx-t th, .rx-t td { padding: 13px 16px 13px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.rx-t thead th { padding-block: 12px 10px; font-size: 12.5px; font-weight: 600; color: var(--mute); vertical-align: bottom; }
.rx-t tbody th { width: 26%; font-size: 15.5px; font-weight: 600; }
.rx-t tbody th a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--ink); } .rx-t tbody th a:hover { color: var(--blue); }
.rx-t td a { font-weight: 500; color: var(--ink); } .rx-t td a:hover { color: var(--blue); }
.rx-t td a b { color: var(--blue); }
.rx-links a { font-weight: 600 !important; color: var(--blue) !important; }
.rx-links > span { color: #A9B0C6; }
.rx-n { font-weight: 700; font-variant-numeric: tabular-nums; }
.rx-no { color: #8E97B3; font-size: 13.5px; }
.rx-grid th, .rx-grid td { width: 18.5%; } .rx-grid tbody th { width: 26%; }
.rx-t3 td:last-child, .rx-t3 thead th:last-child { text-align: right; padding-right: 0; width: 6em; }
.rx-cards a small { font-size: 12.5px; color: var(--mute); }
.rx-cards .more { margin-top: 6px; font-size: 14.5px; color: var(--blue); }
.rx-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rx-cards-2 a > span:not(.more) { font-size: 15.5px; color: var(--body); }
.rx-list { margin-top: 0; border-top: 0; }
.rx-ask, .rx .rp-ask { margin-top: 64px; }
.ar-h { margin: 28px 0 4px; font-size: 13.5px; font-weight: 600; letter-spacing: 0; color: var(--mute); }
.ar li { display: grid; grid-template-columns: minmax(0, 1fr) 14em minmax(0, 26em); gap: 2px 24px; align-items: center; min-height: 56px; padding-block: 6px; border-bottom: 1px solid var(--line); font-size: 15px; }
.ar-n { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.ar-d { color: var(--mute); font-variant-numeric: tabular-nums; }
.ar .rx-links { font-size: 14px; color: var(--mute); }
.ar .rx-links a { display: inline-flex; align-items: center; min-height: 32px; }
/* glossary */
.gl-ours { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.gl-ours a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--ink); background: #fff; }
.gl-ours a:hover { border-color: #B9C1D9; color: var(--blue); }
.gl-az { margin-top: 40px; padding-block: 6px; border-block: 1px solid var(--line); }
.gl-az ul { display: flex; flex-wrap: wrap; gap: 2px; }
.gl-az a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: 6px; font-size: 15px; font-weight: 600; }
.gl-az a:hover { background: var(--tint); }
.gl-list { columns: 2; column-gap: 64px; margin-top: 28px; }
.gl-l { padding-top: 6px; } .gl-l + .gl-l { margin-top: 10px; }
.gl-l > h2 { padding-bottom: 8px; margin-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 26px; line-height: 1; letter-spacing: -.02em; color: var(--brand); break-after: avoid; scroll-margin-top: 96px; }
.gl-e { padding-bottom: 22px; scroll-margin-top: 96px; break-inside: avoid; }
.gl-e:target .gl-t { color: var(--blue); }
.gl-t { font-size: 17.5px; font-weight: 700; line-height: 1.3; letter-spacing: -.005em; }
.gl-e p { margin-top: 6px; font-size: 15.5px; line-height: 1.58; color: var(--body); }
.gl-e .gl-also, .gl-e .gl-see { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.gl-also b { font-weight: 600; color: var(--ink); }
.gl-see a { font-weight: 600; }
/* method and sources */
.mt-s { margin-top: 56px; scroll-margin-top: 96px; }
.mt-five { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.mt-five li { display: grid; }
.mt-five a { display: grid; gap: 6px; align-content: start; padding: 20px 20px 22px; border-radius: 8px; background: #fff; box-shadow: var(--card-sm); color: var(--body); font-size: 14px; line-height: 1.5; transition: box-shadow .15s; }
.mt-five a:hover { box-shadow: var(--card); color: var(--body); }
.mt-five small { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin-bottom: 6px; border-radius: 50%; background: var(--tint); font-size: 13px; font-weight: 700; color: var(--blue); }
.mt-five strong { font-size: 16px; line-height: 1.3; color: var(--ink); }
.mt-src tbody th { width: 15%; } .mt-src td { width: 21%; font-size: 14.5px; line-height: 1.5; color: var(--body); vertical-align: top; } .mt-src td:nth-child(4) { width: 12%; color: var(--ink); white-space: nowrap; }
.mt-src tbody th { vertical-align: top; } .mt-src tbody th a { min-height: 28px; }
.mt-dl > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 32px; padding-block: 18px; border-bottom: 1px solid var(--line); }
.mt-dl dt { font-size: 16px; font-weight: 600; color: var(--ink); }
.mt-dl dd { margin: 0; max-width: 700px; font-size: 15.5px; line-height: 1.6; color: var(--body); }
.mt-p { max-width: 720px; margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--body); }
.mt-p a { font-weight: 600; }
.mt-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.mt-kv > div { padding: 16px 18px; border: 1px solid var(--line); border-radius: 8px; }
.mt-kv dt { font-size: 12.5px; color: var(--mute); }
.mt-kv dd { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--ink); }
.mt-own > div { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 4px 32px; padding-block: 12px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.55; }
.mt-own dt { font-weight: 600; color: var(--ink); } .mt-own dd { margin: 0; color: var(--body); }
.rx-fold { max-width: none; margin-top: 16px; border-block: 1px solid var(--line); }
.rx-fold summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--blue); list-style: none; }
.rx-fold summary::-webkit-details-marker { display: none; }
.rx-fold summary::after { content: "+"; font-size: 20px; font-weight: 400; }
.rx-fold[open] summary::after { content: "\2212"; }
.rx-fold > :last-child { padding-bottom: 20px; }
.mt-cmp td { font-size: 14px; }

@media (pointer: coarse), (max-width: 640px) { .rp-crumbs a, .rp-crumbs span, .rp-ed-past a, .rp-fresh a, .ch-gh a { min-height: 44px; } .rp-crumbs span { display: inline-flex; align-items: center; } .rp-ed-past a, .rp-fresh a { display: inline-flex; align-items: center; } .rp-crumbs li { display: inline-flex; align-items: center; } .rp-toc a { min-height: 44px; } }
@media (max-width: 1100px) {
  .rp-body { grid-template-columns: minmax(0, 1fr); margin-top: 44px; }
  .rp-toc { position: static; margin-bottom: 36px; padding: 14px 18px 12px; border: 1px solid var(--line); border-radius: 8px; }
  .rp-toc ol { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 4px; border-left: 0; }
  .rp-toc a { padding-left: 0; margin-left: 0; border-left: 0; color: var(--blue); font-weight: 500; }
  .mt-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rx-ret { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar li { grid-template-columns: minmax(0, 1fr) auto; }
  .ar .rx-links { grid-column: 1 / -1; padding-bottom: 8px; }
}
@media (max-width: 900px) {
  .rp-top, .fx { grid-template-columns: minmax(0, 1fr); }
  .fx-b { border-left: 0; border-top: 1px solid var(--line); }
  .rp-ask { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .gl-list { columns: 1; }
  .mt-kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* a wide table becomes one card per row, each cell under its column's name */
  .rx-grid thead, .mt-src thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rx-grid, .rx-grid tbody, .rx-grid tr, .rx-grid th, .rx-grid td, .mt-src, .mt-src tbody, .mt-src tr, .mt-src th, .mt-src td { display: block; width: auto; }
  .rx-grid tr, .mt-src tr { margin-top: 14px; padding: 14px 18px 8px; border: 1px solid var(--line); border-radius: 8px; }
  .rx-grid tbody th, .mt-src tbody th { padding: 0 0 8px; border-bottom: 1px solid var(--line); font-size: 16.5px; }
  .rx-grid td, .mt-src td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-bottom: 0; }
  .mt-src td:nth-child(4) { white-space: normal; }
  .rx-grid td + td, .mt-src td + td { border-top: 1px solid var(--line); }
  .rx-grid td::before, .mt-src td::before { content: attr(data-l); font-size: 12.5px; color: var(--mute); }
  .rx-grid td a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 .35em; min-height: 28px; }
  .mt-src td:nth-child(4), .mt-src td, .mt-src tbody th { width: auto; }
}
@media (max-width: 640px) {
  .rp { padding-bottom: 72px; }
  .rs-nav ul { margin-inline: -10px -16px; gap: 0; padding-right: 36px; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
  .rs-nav a { padding: 0 10px; font-size: 14px; }
  .rp-cover { padding-block: 10px 30px; }
  .rp-kick { margin-top: 18px; }
  /* the logos on one line: a mark stands alone here, and the heading under it names every retailer */
  .rp-logos { flex-wrap: nowrap; gap: 0 16px; margin-top: 6px; }
  .rp-logos .rlogo { width: auto; height: auto; max-width: 100%; max-height: 22px; }
  .rp-logos > a, .rp-logos > .rl, .rp-logos > .rlogo { flex: 0 1 auto; min-width: 0; }
  .rp-logos:has(> :nth-child(2)) .rl-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rp-cover h1 { margin-top: 8px; }
  .rp-dek { font-size: 17.5px; } .rp-sub { font-size: 16.5px; }
  .rp-by { margin-top: 18px; }
  .rp-by, .rp-fresh { display: grid; gap: 3px; }
  .rp-by span + span, .rp-fresh span + span { margin-left: 0; padding-left: 0; border-left: 0; }
  .rp-fresh { margin-top: 3px; }
  .rp-ed { display: grid; gap: 0; margin-top: 16px; padding: 0; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
  .rp-ed-now, .rp-ed-past { min-height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: 0 6px; }
  .rp-ed-links { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
  .rp-ed-links > * { min-height: 48px; padding: 6px 16px; line-height: 1.3; }
  .rp-ed-links > :nth-child(3) { grid-column: 2; grid-row: 1; justify-content: flex-end; text-align: right; border-left: 1px solid var(--line); }
  .rp-ed-links > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; justify-content: center; border-top: 1px solid var(--line); }
  .rp-glance { margin-top: 28px; }
  .rp-glance ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .rp-glance li { grid-template-columns: minmax(0, 8.2em) minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px 18px; }
  .rp-glance b { font-size: 26px; }
  .rp-top { gap: 10px; margin-top: 10px; }
  .rp-key, .rp-about { padding: 22px 20px; }
  .rp-key li { font-size: 16px; }
  .rp-body { margin-top: 28px; }
  .rp-toc { margin-bottom: 28px; padding: 12px 16px 6px; }
  .rp-b { padding-bottom: 40px; }
  .rp-b + .rp-b, .rp-limits { padding-top: 36px; }
  .rp-b > h2, .rp-limits h2 { font-size: 23px; }
  .rp-f { font-size: 18px; }
  .rp-fig { margin-top: 20px; }
  .rp-fig-c { padding: 20px 16px 18px; }
  .rp-x, .rp-do { margin-top: 22px; }
  .rp-x p, .rp-do p { font-size: 16px; }
  .rp-do { padding: 16px 18px 18px; }
  /* a row: name and value on one line, the bar beneath */
  .ch li, .ch-wide li, .ch-g .ch li, .fx-b .ch-wide li { grid-template-columns: minmax(0, 1fr) auto; }
  .ch-4 li, .ch-ts .ch-g .ch li { grid-template-columns: minmax(0, 1fr) auto 3em; }
  .ch-4 .ch-x { order: 1; } .ch-4 .ch-v { order: 2; }
  .ch-b { grid-column: 1 / -1; order: 3; }
  .ch-nb li { grid-template-columns: minmax(0, 1fr) auto; }
  .ch .ch-hd .ch-hb { grid-column: 1 / 3; text-align: left; }
  .ch .ch-hd > span:first-child:empty { display: none; }
  .ch { gap: 15px; }
  .ch-gs, .rx-cards, .rx-cards-2, .rp-rel ul { grid-template-columns: minmax(0, 1fr); }
  .ch-gs { gap: 30px; }
  .np li { grid-template-columns: minmax(0, 1fr) auto; }
  .np .np-hd { display: none; }
  .np-n { grid-column: 1 / -1; }
  .np-p { text-align: left; }
  .np-k { display: inline; }
  .rp-ask { margin-top: 44px; padding: 24px 20px; }
  .rp-sign { grid-template-columns: minmax(0, 1fr); }
  .rp-rel, .rp-past { margin-top: 44px; }
  .rp-rel ul, .rx-cards { gap: 12px; }
  .rx-s { margin-top: 48px; } .rx-first, .fx { margin-top: 28px; }
  .fx-a { padding: 24px 20px 26px; } .fx-b { padding: 24px 20px 22px; }
  .rx-ret { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rx-t tbody th { width: auto; }
  .rx-t:not(.rx-grid):not(.mt-src):not(.rx-t3) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rx-t:not(.rx-grid):not(.mt-src):not(.rx-t3) th, .rx-t:not(.rx-grid):not(.mt-src):not(.rx-t3) td { display: block; width: auto; padding-right: 0; }
  .rx-t:not(.rx-grid):not(.mt-src):not(.rx-t3) tbody th { padding-bottom: 0; border-bottom: 0; }
  .rx-t:not(.rx-grid):not(.mt-src):not(.rx-t3) td { padding-top: 2px; }
  .rx-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .gl-l > h2 { font-size: 24px; }
  .mt-s { margin-top: 44px; }
  .mt-five { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mt-five a { grid-template-columns: 26px minmax(0, 1fr); gap: 2px 14px; padding: 16px 18px; } .mt-five small { grid-row: 1 / 3; margin: 2px 0 0; } .mt-five span { grid-column: 2; }
  .mt-dl > div, .mt-own > div { grid-template-columns: minmax(0, 1fr); }
  .mt-kv { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* Kept from the earlier research styles because /tour and /pricing are drawn with them. */
.sec-tight { padding-block: 36px; }
.win { background: #fff; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(50, 50, 93, .28), 0 12px 28px -14px rgba(17, 23, 51, .22); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--mute); min-width: 0; }
.win-bar strong { flex: none; color: var(--ink); font-size: 13px; }
.win-body { padding: 20px 20px 18px; }
.panel-table { margin-top: 32px; }
.paid { display: inline-block; min-width: 4.4em; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
@media (max-width: 560px) {
  .win-body { padding: 16px 14px; }
}