/* ROOT VPN v2 marketing pages (home, pricing, download). Loads after /styles.css.
   Ported from design-mockups/v2/website/styles.css; generic selectors are
   scoped under body.v2 so they never leak into the generated SEO pages.
   Hybrid theme: data-theme="dark" on product moments (hero, demo, network,
   closing), data-theme="light" on reading sections. */

.v2 p { color: var(--rv-text-secondary); margin: 0 0 20px; max-width: 68ch; }
.v2 h2 { font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -.035em; line-height: 1.12; margin: 0 0 20px; max-width: 760px; }
.v2 h3 { font-size: 20px; letter-spacing: -.025em; margin: 0 0 12px; }
.v2 main section { padding: 0; }
.section { padding-block: 104px !important; color: var(--rv-text-primary); background: var(--rv-bg-canvas); }
.section + .section[data-theme="light"] { border-top: 1px solid var(--rv-border-subtle); }
.section[data-theme="dark"] + .section[data-theme="light"], .section[data-theme="light"] + .section[data-theme="dark"] { border-top: 0; }
.v2 .section-head { margin-bottom: 56px; max-width: 720px; }
.v2 .section-head p { font-size: 18px; }
.section-note { margin: 28px auto 0 !important; text-align: center; font-size: 14px; }
.home .section-note { margin: 28px 0 0 !important; text-align: left; }
.small { font-size: 13px; line-height: 1.7; }
.quiet-label { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 32px 0 20px; }
.v2 .rv-btn { text-decoration: none; }

/* ── Hero (dark) ── */
.hero-v2 { position: relative; isolation: isolate; overflow: hidden; padding: 88px 0 72px !important; color: var(--rv-text-primary); background: var(--rv-bg-canvas); }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; filter: saturate(.45) brightness(.95); }
.hero-media video { opacity: 0; transition: opacity var(--rv-dur-420); }
.hero-media video.is-playing { opacity: 1; }
.hero-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--rv-bg-canvas) 3%, color-mix(in srgb, var(--rv-bg-canvas) 95%, transparent) 30%, color-mix(in srgb, var(--rv-bg-canvas) 15%, transparent)); }
.hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: center; }
.hero-v2 h1 { font-size: clamp(44px, 5.2vw, 76px); letter-spacing: -.04em; line-height: 1.04; margin: 24px 0; }
.hero-v2 .lead { font-size: 17px; line-height: 1.8; max-width: 510px; }
.hero-v2 .small b { color: var(--rv-text-primary); font-weight: 500; }
.hero-product { padding: 12px 0 0 32px; display: flex; flex-direction: column; align-items: flex-end; }
.hero-product .app-window { width: 100%; }
.product-caption { width: 100%; max-width: 450px; text-align: center; font-size: 12px; margin: 24px 0 0 !important; }

/* App windows (HTML renders of the real product) */
.app-window { border: 1px solid var(--rv-border-strong); background: var(--rv-bg-raised); color: var(--rv-text-primary); overflow: hidden; box-shadow: 0 32px 80px var(--rv-overlay-scrim); }
.windows { max-width: 450px; border-radius: var(--rv-radius-10); }
.app-title { display: flex; align-items: center; justify-content: space-between; height: 38px; padding: 0 14px; font-size: 11px; background: var(--rv-bg-surface-2); }
.app-title > span:first-child { display: flex; align-items: center; gap: 8px; }
.app-title img { width: 17px; height: 17px; }
.app-content { padding: 24px; }
.app-account { display: flex; justify-content: space-between; align-items: center; font: 600 14px var(--rv-font-display); margin-bottom: 24px; }
.app-window .rv-dial { --dial-size: 142px; }
.app-window .rv-dial__label { font-size: 20px; }
.app-window .rv-dial__sublabel { font-size: 11px; }
.app-location { display: flex; align-items: center; gap: 12px; padding: 14px; margin: 24px 0 8px; border: 1px solid var(--rv-border-subtle); border-radius: var(--rv-radius-10); background: var(--rv-bg-surface); font-size: 12px; }
.app-location > div { flex: 1; }
.app-location b, .app-location > div > span { display: block; }
.app-location > div > span { color: var(--rv-text-secondary); font-size: 11px; margin-top: 4px; }
.app-location .rv-num { margin-left: 12px; }
.app-window .rv-route { max-height: 118px; }
.app-stats { display: flex; justify-content: space-between; font-size: 10px; color: var(--rv-text-secondary); }

/* ── One tap to private (dark, interactive) ── */
.demo { background: var(--rv-bg-raised) !important; }
.demo-grid { display: grid; grid-template-columns: max-content minmax(0, 560px); justify-content: start; align-items: center; gap: 120px; }
.phone { width: 278px; border: 5px solid var(--rv-border-subtle); border-radius: 40px; justify-self: start; box-shadow: none; }
.phone .app-title { background: var(--rv-bg-raised); height: 44px; padding: 8px 20px; }
.camera { display: block; width: 70px; height: 19px; background: var(--rv-neutral-1000); border-radius: var(--rv-radius-999); }
.phone .app-content { padding: 20px 18px 14px; }
.phone .app-account { margin-bottom: 36px; }
.phone .rv-dial { --dial-size: 158px; }
.phone .app-location { padding: 10px; }
.app-hint { text-align: center; font-size: 11px; margin: 20px auto 0 !important; }
.phone-home { height: 4px; width: 80px; background: var(--rv-text-primary); border-radius: var(--rv-radius-999); margin: 16px auto 10px; }
.demo-story .rv-route { margin: 28px 0 36px; }
.demo-story h3 { font-size: 30px; max-width: 18ch; }
.demo-story p { max-width: 52ch; }
.proof { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rv-border-subtle); margin-top: 72px; padding-top: 40px; gap: 24px; }
.proof b { display: block; font-family: var(--rv-font-display); font-size: 38px; font-weight: 500; letter-spacing: -.03em; }
.proof span { font-size: 13px; color: var(--rv-text-secondary); }
.trust { display: flex; gap: 12px 28px; flex-wrap: wrap; font-size: 13px; margin-top: 36px; color: var(--rv-text-secondary); }

/* ── Reading sections: hairline grids, no icon tiles ── */
.list-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 40px; }
.list-3 > div { padding-top: 24px; border-top: 1px solid var(--rv-border-subtle); }
.list-3 h3 { font-size: 20px; }
.list-3 p { font-size: 15px; margin: 0; }
.uses-layout { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.uses-layout .list-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cafe { margin: 0; position: relative; aspect-ratio: 4 / 5; border-radius: var(--rv-radius-14); overflow: hidden; background: var(--rv-bg-surface-2); }
.cafe picture, .cafe img { display: block; width: 100%; height: 100%; }
.cafe img { object-fit: cover; object-position: 56% 50%; }
.cafe figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 48px 24px 20px; font-size: 13px; color: var(--rv-neutral-0);
  background: linear-gradient(180deg, transparent, rgba(11,12,14,.7)); }
.honest-media { margin: 0 0 56px; border-radius: var(--rv-radius-20); overflow: hidden; background: var(--rv-bg-canvas) url("/img/v2/honest.jpg") center / cover; aspect-ratio: 21 / 8; }
.honest-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.steps-v2 { counter-reset: step; }
.steps-v2 > div::before { counter-increment: step; content: '0' counter(step); display: block; font: 500 48px/1 var(--rv-font-display); letter-spacing: -.03em; color: var(--rv-text-tertiary); margin-bottom: 32px; }
.v2 .rv-badge { vertical-align: middle; }

/* ── Network (dark) ── */
.network { overflow: hidden; position: relative; }
.network-top { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; margin-bottom: 64px; }
.network-globe { width: 100%; aspect-ratio: 1; max-height: 460px; overflow: hidden; border-radius: var(--rv-radius-20); background: var(--rv-bg-surface) url("/img/v2/globe.jpg") center / cover; }
.network-globe video { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.4); }
.network .list-3 h3 { font-size: 20px; }
.network-callout { margin-top: 48px; padding: 24px 28px; border: 1px solid var(--rv-border-subtle); border-radius: var(--rv-radius-14); background: var(--rv-bg-surface); }
.network-callout p { margin: 0; max-width: 68ch; }
.network-callout b { color: var(--rv-text-primary); }
.network-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 48px; margin-top: 56px; border-top: 1px solid var(--rv-border-subtle); gap: 48px 40px; }
.network-facts b { font-size: 28px; font-weight: 500; letter-spacing: -.03em; }
.network-facts p { font-size: 13px; margin: 8px 0 0; }

/* ── Countries ── */
.loc-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--rv-border-subtle); }
.loc-grid > a { display: flex; align-items: center; gap: 12px; min-height: 64px; border-bottom: 1px solid var(--rv-border-subtle); text-decoration: none; font-size: 14px; padding-right: 12px; color: var(--rv-text-primary); }
.loc-grid > a:hover { color: var(--link); text-decoration: none; }
.loc-grid .soon { font-size: 11px; font-weight: 600; color: var(--rv-text-secondary); border: 1px solid var(--rv-border-subtle); border-radius: var(--rv-radius-6); padding: 2px 6px; }
.loc-grid > a.loc-all { grid-column: 1 / -1; border-bottom: 0; min-height: 56px; font-weight: 600; }
.loc-note { margin-top: 28px !important; font-size: 14px; }

/* ── Compare table ── */
.v2 table { border-collapse: collapse; width: 100%; min-width: 690px; font-size: 14px; table-layout: fixed; }
.v2 thead th:first-child { width: 22%; }
.v2 th, .v2 td { text-align: left; padding: 18px 16px; border-bottom: 1px solid var(--rv-border-subtle); }
.v2 thead th { color: var(--rv-text-secondary); font-size: 13px; font-weight: 500; }
.v2 tbody th { font-weight: 500; }
.v2 td { color: var(--rv-text-secondary); }
.v2 .col-root { background: var(--rv-bg-surface-2); color: var(--rv-text-primary); }
.table-scroll { overflow-x: auto; }

/* ── Plans ── */
.segmented-row { display: flex; justify-content: flex-start; margin: -24px 0 32px; }
.saving { font-size: 11px; margin-left: 10px; font-weight: 500; }
.rv-segmented input { inset: 0; }
.v2 .plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.v2 .plan { display: flex; flex-direction: column; border-radius: var(--rv-radius-14); padding: 24px; }
.plan-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 16px; min-height: 28px; flex-wrap: wrap; }
.plan-heading h3 { margin: 0 !important; font-size: 20px; }
.v2 .price { font: 600 38px/1.2 var(--rv-font-display); letter-spacing: -.04em; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.v2 .price small { font: 400 13px var(--rv-font-body); letter-spacing: 0; color: var(--rv-text-secondary); }
.v2 .price .peryr { display: block; font: 500 13px/1.4 var(--rv-font-body); letter-spacing: 0; color: var(--rv-text-secondary); margin-top: 4px; }
.v2 .plan > p { font-size: 14px; min-height: 0; margin: 10px 0 0; }
.v2 .plan ul { padding: 0; list-style: none; font-size: 14px; margin: 14px 0 20px; display: grid; gap: 7px; flex: 1; align-content: start; }
.v2 .plan li { padding-left: 22px; position: relative; color: inherit; }
.v2 .plan li::before { content: '\2713'; position: absolute; left: 0; color: inherit; opacity: .7; }
.v2 .plan .rv-btn { margin-top: auto; font-size: 14px; }
.recommended { background: var(--rv-bg-inverse) !important; color: var(--rv-text-inverse) !important; border-color: var(--rv-bg-inverse) !important; }
.recommended h2, .recommended h3, .recommended .price { color: var(--rv-text-inverse); }
.recommended p, .recommended .price small, .recommended .price .peryr { color: var(--rv-neutral-400) !important; }
.recommended .rv-badge { background: var(--rv-neutral-850); color: var(--rv-neutral-100); border-color: var(--rv-neutral-700); }
#plans[data-billing="monthly"] .price.annual, #plans[data-billing="annual"] .price.monthly { display: none; }

/* ── FAQ ── */
.faq-layout { display: grid; grid-template-columns: .7fr 1.3fr; gap: 80px; }
.faq-layout .section-head { margin: 0; }

/* ── Download strip ── */
.download-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.download-strip .os { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; min-height: 64px; padding: 12px 20px;
  border: 1px solid var(--rv-border-strong); border-radius: var(--rv-radius-10); color: var(--rv-text-primary); text-decoration: none; }
.download-strip .os b { font-weight: 600; }
.download-strip .os span { font-size: 13px; color: var(--rv-text-secondary); }
.download-strip a.os:hover { background: var(--rv-bg-surface-2); text-decoration: none; }
.download-strip .os.soon { border-style: dashed; border-color: var(--rv-border-subtle); }

/* ── Closing (dark) ── */
.closing { text-align: center; padding-block: 128px !important; position: relative; overflow: hidden; isolation: isolate; background: var(--rv-bg-canvas) url("/img/v2/closing.jpg") center / cover !important; }
.closing h2 { margin-inline: auto; font-size: clamp(40px, 4.5vw, 64px); }
.closing p { margin: 0 auto 32px; }
.closing-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: saturate(.7); }
.closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--rv-bg-canvas) 92%, transparent) 0%, color-mix(in srgb, var(--rv-bg-canvas) 55%, transparent) 55%, color-mix(in srgb, var(--rv-bg-canvas) 80%, transparent) 100%); }
.v2 .megafoot { margin-top: 0; }

/* ── Pricing page ── */
.page-intro { text-align: center; max-width: 800px; margin: 0 auto 32px; }
.page-intro h1 { font-size: clamp(40px, 4vw, 56px); letter-spacing: -.04em; line-height: 1.05; margin: 0 0 14px; }
.page-intro p { margin: 0 auto 18px; }
.pricing-hero { padding-top: 36px !important; }
.sharing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.consent dl { margin: 0 0 24px; }
.consent dl > div { display: grid; grid-template-columns: 95px 1fr; padding: 20px 0; border-bottom: 1px solid var(--rv-border-subtle); gap: 20px; }
.consent dt { font-size: 12px; font-weight: 600; letter-spacing: .02em; }
.consent dd { margin: 0; font-size: 14px; color: var(--rv-text-secondary); }
.consent > a { font-size: 14px; text-decoration: underline; }
.narrow > * { max-width: 880px; }

/* ── Download page ── */
.download-hero { overflow: hidden; }
.download-hero > .wrap { display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 80px; }
.download-hero h1 { font-size: clamp(40px, 4.2vw, 56px); letter-spacing: -.04em; line-height: 1.06; margin: 0 0 20px; }
.download-hero .small { margin-top: 16px; }
.download-hero-art .app-window { max-width: 340px; margin-left: auto; }
.download-hero-art .app-window .rv-dial { --dial-size: 110px; }
.download-hero-art .app-window .app-content { padding: 20px; }
.download-hero .wrap.lineup-wrap { display: block; }
.device-lineup { margin: 56px 0 0; }
.device-lineup img { display: block; width: 100%; height: auto; border-radius: var(--rv-radius-14); }
.device-lineup figcaption { margin-top: 12px; font-size: 13px; color: var(--rv-text-secondary); }
.platform-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.platform-card { border-radius: var(--rv-radius-14); padding: 24px; display: flex; flex-direction: column; }
.platform-heading h3 { font-size: 20px; margin-bottom: 4px !important; }
.platform-card.is-available { grid-column: span 2; }
.platform-heading > span { font-size: 13px; color: var(--rv-text-secondary); }
.mini-stage { display: flex; align-items: center; justify-content: center; background: var(--rv-bg-surface-2); border-radius: var(--rv-radius-10); height: 230px; padding: 24px 16px; margin: 24px 0; overflow: hidden; }
.platform-mini { width: 235px; border-radius: 8px; color: var(--rv-text-primary); background: var(--rv-bg-raised); border: 1px solid var(--rv-border-strong); overflow: hidden; }
.mini-title { height: 22px; display: flex; align-items: center; justify-content: space-between; font-size: 7px; padding: 4px 8px; background: var(--rv-bg-surface-2); }
.mini-body { text-align: center; padding: 16px; }
.mini-body > img { width: 30px; margin: 0 auto 8px; display: block; }
.mini-protected { font: 500 14px var(--rv-font-display); display: flex; align-items: center; justify-content: center; gap: 8px; }
.mini-location { display: flex; gap: 8px; justify-content: center; align-items: center; font-size: 10px; margin: 14px 0 0; }
.mini-location .rv-flag { width: 18px; height: 12px; }
.mini-body .rv-route { height: 34px; margin-top: 8px; }
.platform-mini.ios, .platform-mini.android { width: 128px; border-radius: 20px; }
.platform-mini.ios .mini-body, .platform-mini.android .mini-body { padding: 12px; }
.platform-mini .camera { width: 35px; height: 8px; }
.platform-mini .phone-home { width: 40px; height: 3px; margin: 6px auto; }
.traffic { display: flex; gap: 4px; }
.traffic i { height: 6px; width: 6px; border-radius: 50%; background: #ff5f57; }
.traffic i:nth-child(2) { background: #febc2e; }
.traffic i:nth-child(3) { background: #28c840; }
.browser-address { background: var(--rv-bg-raised); color: var(--rv-text-secondary); border-radius: 3px; width: 80%; padding: 2px 8px; }
.platform-card .small { margin-bottom: 16px; }
.platform-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; align-items: center; }
.platform-actions .rv-btn { font-size: 14px; }
.status-pill { display: inline-flex; align-items: center; padding: 4px 10px; border: 0; border-radius: var(--rv-radius-999); background: var(--rv-bg-surface-2); font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--rv-text-secondary); }
.verify { margin-top: 64px; border-top: 1px solid var(--rv-border-subtle); padding-top: 32px; display: grid; grid-template-columns: 1fr 2fr; gap: 16px 48px; }
.verify p { font-size: 15px; }
.verify > div > p:last-child { margin-bottom: 0; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .hero-grid { gap: 32px; } .hero-product { padding: 0; }
  .v2 .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-grid { gap: 64px; }
  .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loc-grid { grid-template-columns: repeat(4, 1fr); }
  .download-hero > .wrap { gap: 32px; }
  .uses-layout { grid-template-columns: 1fr; gap: 48px; }
  .uses-layout .cafe { aspect-ratio: 2 / 1; }
  .uses-layout .list-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .section { padding-block: 64px !important; }
  .v2 .section-head { margin-bottom: 36px; }
  .v2 .section-head p { font-size: 16px; }
  .hero-v2 { padding: 52px 0 40px !important; }
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-v2 h1 { font-size: 48px; }
  .hero-v2 .lead { font-size: 15px; }
  .hero-product { width: 100%; max-width: 370px; margin: auto; }
  .hero-media::after { background: linear-gradient(180deg, var(--rv-bg-canvas), color-mix(in srgb, var(--rv-bg-canvas) 85%, transparent) 48%, color-mix(in srgb, var(--rv-bg-canvas) 45%, transparent)); }
  .hero-v2 .actions { gap: 8px; }
  .demo-grid { grid-template-columns: 1fr; gap: 48px; }
  .demo-grid .phone { justify-self: center; }
  .demo-story .rv-route { max-width: 430px; }
  .proof { grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px; }
  .trust { gap: 12px 16px; }
  .list-3, .uses-layout, .uses-layout .list-3 { grid-template-columns: 1fr; gap: 28px; }
  .cafe, .uses-layout .cafe { aspect-ratio: 4 / 3; }
  .honest-media { aspect-ratio: 16 / 10; margin-bottom: 36px; }
  .network-top { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; }
  .network-globe { max-height: 320px; }
  .network-facts { grid-template-columns: 1fr; gap: 24px; }
  .loc-grid { grid-template-columns: repeat(2, 1fr); }
  .loc-grid > a { font-size: 13px; gap: 8px; }
  .v2 .plans { grid-template-columns: 1fr; }
  .plan-heading { min-height: 0; } .v2 .plan > p { min-height: 0; }
  .page-intro { margin-bottom: 40px; }
  .sharing-grid { grid-template-columns: 1fr; gap: 32px; }
  .faq-layout { grid-template-columns: 1fr; gap: 16px; }

  .download-hero > .wrap { grid-template-columns: 1fr; gap: 48px; }
  .download-hero-art .app-window { margin: auto; }
  .platform-grid { grid-template-columns: 1fr; }
  .platform-card.is-available { grid-column: auto; }
  .verify { grid-template-columns: 1fr; gap: 8px; }
  .consent { padding: 20px; }
  .consent dl > div { grid-template-columns: 74px 1fr; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-media video, .honest-media video, .closing-media, .network-globe video { display: none; }
}
@media (max-width: 760px) { .hero-v2 .rv-btn--lg { padding-inline: 18px; } }
.v2 .plan-heading h2 { font-size: 20px; letter-spacing: -.025em; line-height: 1.2; margin: 0; max-width: none; }

/* ── Layout QA pass (2026-09-25) ── */
/* Home rhythm: two reading blocks sit on the raised white surface so the long
   light run reads as distinct chapters, not one repeated hairline grid. */
.section.surface-raised { background: var(--rv-bg-raised); }
/* Power features sit inside Features as a second, card-based group. */
.feature-more { margin-top: 80px; padding-top: 0; }
.feature-more .section-head { margin-bottom: 32px; }
.feature-more .section-head h3 { font-size: 24px; letter-spacing: -.03em; margin: 0 0 8px; }
.feature-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature-cards > div { padding: 28px; border: 1px solid var(--rv-border-subtle); border-radius: var(--rv-radius-14); background: var(--rv-bg-canvas); }
.feature-cards h4 { font: 600 20px/1.2 var(--rv-font-display); letter-spacing: -.025em; margin: 0 0 12px; }
.feature-cards p { font-size: 15px; margin: 0; }

/* Comparison tables: the scroll hint fades the right edge until the end. */
.table-scroll { position: relative; }
@media (max-width: 760px) {
  .v2 table { min-width: 560px; font-size: 13px; }
  .v2 th, .v2 td { padding: 14px 12px; }
  .v2 thead th:first-child { width: 128px; }
  .v2 tbody th, .v2 thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--rv-bg-canvas); box-shadow: 1px 0 0 var(--rv-border-subtle); }
  .surface-raised tbody th, .surface-raised thead th:first-child { background: var(--rv-bg-raised); }
  .table-scroll { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
  .table-scroll.is-end { -webkit-mask-image: none; mask-image: none; }
  .feature-cards { grid-template-columns: 1fr; }
  .feature-more { margin-top: 56px; }
  .hero-v2 .actions { flex-direction: column; align-items: stretch; }
  .v2 .segmented-row { margin-top: 0; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  .feature-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-cards > div:last-child { grid-column: 1 / -1; }
}

/* Yearly promo: make "2 months free" read as an offer, not a footnote. Red is used
   only for this promotion; green stays reserved for the primary action and status. */
.v2 { --rv-promo: #D6303A; --rv-promo-soft: #FF7A80; }
.promo-pill { display: inline-block; background: var(--rv-promo); color: #fff; font: 700 11px/1 var(--rv-font-body); letter-spacing: .05em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.saving.promo-pill { margin-left: 8px; font-size: 10.5px; padding: 4px 8px; }
.plan-heading { justify-content: flex-start; }
.plan-heading .rv-badge { margin-left: auto; }
.v2 .price .was { font: 500 18px/1 var(--rv-font-body); letter-spacing: 0; color: var(--rv-text-secondary); text-decoration: line-through; text-decoration-color: var(--rv-promo); text-decoration-thickness: 2px; margin-right: 10px; vertical-align: 6px; }
.v2 .price .peryr .save { color: var(--rv-promo); font-weight: 700; }
.promo-switch { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; padding: 0; border: 0; background: none; font: 600 13px/1.3 var(--rv-font-body); color: var(--rv-text-primary); cursor: pointer; text-align: left; }
.promo-switch:hover { text-decoration: underline; text-underline-offset: 3px; }
.promo-switch:focus-visible { outline: 2px solid var(--rv-promo); outline-offset: 3px; border-radius: 4px; }
.recommended .promo-switch { color: var(--rv-text-inverse); }
.recommended .price .was { color: var(--rv-neutral-400); }
.recommended .price .peryr .save { color: var(--rv-promo-soft) !important; }
#plans[data-billing="annual"] .promo-switch, #plans[data-billing="monthly"] .promo-tag { display: none; }
.promo-switch { white-space: nowrap; }
/* Yearly ribbon sits on the card's top edge so it never moves the price row. */
.v2 .plan { position: relative; }
.promo-tag { position: absolute; top: -11px; left: 22px; box-shadow: 0 0 0 3px var(--rv-bg-canvas); }