/* Home page = the owner's reference (meetmytutor_v2_live_activity_refined), section by section.
   Source file: class names are the reference's; scripts/build-site-v3.r-mjs prefixes them with r- and writes site/assets/pages/home-ref.r-css.
   Dark is the reference as delivered (its final "V2 refinement" layer). Light is derived from the same tokens. */
.rh {
  --r-sec: var(--bg); --r-soft: var(--bg-alt); --r-card: var(--surface); --r-card2: var(--surface-2); --r-row: #1d2739;
  --r-line: var(--line); --r-ink: var(--ink); --r-head: #f2f5fc; --r-mut: var(--muted); --r-dim: #9ba8bd; --r-dim0: #92a0ad;
  --r-kick: #91a7ff; --r-acc: #788cf5; --r-ico-bg: #27324d; --r-ico-fg: #9db3ff; --r-tag-bg: #28375a; --r-tag-fg: #b5c6ff;
  --r-btn: #5366e0; --r-btn-fg: #fff; --r-dk: #26334d; --r-dk-fg: #fff; --r-out-bg: #202a3d; --r-out-fg: #eaf0fb; --r-out-bd: #3a465f;
  --r-tabs: #101724; --r-tab: #a7b2c6; --r-tab-on: #2b3650; --r-tab-on-fg: #fff; --r-main: #151d2c; --r-notice: #1c2638; --r-time: #8d9bb1;
  --r-pip: #4a5670; --r-bar: #30394c; --r-note: #202a3b; --r-pill-bg: #283c36; --r-pill-fg: #a4dfc4; --r-ok: #6fd3bd;
  --r-live: #9bb1ff; --r-h1: #f5f7fc; --r-lead: #b3bfd1; --r-trust: #a6b2c6; --r-avbd: #151b29; --r-av: #2a3752; --r-av1: #33436b; --r-avfg: #eef2fc;
  --r-ul: #bdc7d8; --r-num: #9aafff; --r-picon: #26334d; --r-picon-fg: #c7d3ff; --r-check: #28375a; --r-check-fg: #b3c4ff; --r-ichip: #a9bcff;
  --r-mig: #1a2232; --r-mig-bd: #34436b; --r-shadow: 0 10px 28px rgba(0, 0, 0, .18); --r-pshadow: 0 12px 34px rgba(0, 0, 0, .22);
  --r-blue-fg: #0a5fc4; --r-gold-fg: #8a5a0f; --r-hov: #788cf5;
  font-family: var(--sans); line-height: 1.55; color: var(--r-ink); background: var(--r-sec);
}
:root[data-theme="light"] .rh {
  --r-row: #f8f9fd; --r-head: var(--ink); --r-dim: #566180; --r-dim0: #566180; --r-kick: #3f50c9; --r-acc: #4659d6;
  --r-ico-bg: #e6e9fb; --r-ico-fg: #3748bd; --r-tag-bg: #e6e9fb; --r-tag-fg: #2f3fae; --r-btn: #4659d6;
  --r-dk: #1a2232; --r-out-bg: #fff; --r-out-fg: #141a2b; --r-out-bd: #c3cae0;
  --r-tabs: #e9ecf6; --r-tab: #45516b; --r-tab-on: #fff; --r-tab-on-fg: #141a2b; --r-main: #f6f8fd; --r-notice: #fff; --r-time: #566180;
  --r-pip: #c3cae0; --r-bar: #dde1ef; --r-note: #f3f5fb; --r-pill-bg: #e1f3ea; --r-pill-fg: #126b59; --r-ok: #126b59;
  --r-live: #3748bd; --r-h1: var(--ink); --r-lead: #45516b; --r-trust: #566180; --r-avbd: var(--bg); --r-av: #c9d1f0; --r-av1: #b3bff0; --r-avfg: #141a2b;
  --r-ul: #45516b; --r-num: #3f50c9; --r-picon: #e6e9fb; --r-picon-fg: #3748bd; --r-check: #e6e9fb; --r-check-fg: #3748bd;
  --r-mig: #fff; --r-mig-bd: #c3cae0; --r-shadow: 0 10px 28px rgba(20, 26, 43, .08); --r-pshadow: 0 12px 34px rgba(20, 26, 43, .1);
  --r-hov: #4659d6;
}
.rh *, .rh *::before, .rh *::after { box-sizing: border-box; }
.rh h1, .rh h2, .rh h3, .rh h4 { font-family: inherit; font-weight: 700; letter-spacing: normal; max-width: none; text-wrap: wrap; margin: 0; line-height: 1.55; }
.rh p { margin: 1em 0; }
.rh ul { margin: 1em 0; padding: 0 0 0 40px; list-style: disc; }
.rh button { font: inherit; }
.rh a { color: inherit; text-decoration: none; }
.rh small, .rh time, .rh b { font-family: inherit; }
.rh .r-wrap { width: min(1180px, calc(100% - 44px)); max-width: none; margin: auto; padding: 0; }

/* buttons */
.rh .r-btn { border: 0; border-radius: 9px; padding: 12px 18px; font-size: 13px; font-weight: 750; cursor: pointer; transition: .2s; display: inline-flex; justify-content: center; align-items: center; gap: 8px; line-height: 1.55; text-decoration: none; }
.rh .r-btn:hover { transform: translateY(-2px); }
.rh .r-primary { background: var(--r-btn); color: var(--r-btn-fg); }
.rh .r-darkbtn { background: var(--r-dk); color: var(--r-dk-fg); }
.rh .r-outline { background: var(--r-out-bg); color: var(--r-out-fg); border: 1px solid var(--r-out-bd); }
.rh .r-limebtn { background: #8db2ff; color: #151b29; }
.rh .r-btn:focus-visible { outline: 3px solid #8da7ff; outline-offset: 3px; }

/* hero */
.rh .r-hero { background: var(--r-sec); padding: 78px 0 72px; overflow: hidden; position: relative; }
.rh .r-heroGrid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 62px; align-items: center; position: relative; }
.rh .r-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: 1.7px; font-weight: 850; color: var(--r-kick); display: flex; align-items: center; gap: 9px; margin: 0; }
.rh .r-eyebrow::before { content: ""; height: 2px; width: 24px; background: var(--r-acc); }
.rh h1 { font-size: clamp(42px, 5.4vw, 67px); line-height: 1.04; letter-spacing: -3px; color: var(--r-h1); margin: 19px 0 20px; font-weight: 800; }
.rh h1 .r-hl { color: var(--r-acc); }
.rh .r-hero p.r-lead { font-size: 17px; color: var(--r-lead); max-width: 520px; line-height: 1.75; margin: 1em 0; }
.rh .r-heroBtns { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 25px; }
.rh .r-trustline { display: flex; align-items: center; gap: 11px; font-size: 12px; color: var(--r-trust); }
.rh .r-avatars { display: flex; }
.rh .r-avatars span { width: 27px; height: 27px; border-radius: 50%; border: 2px solid var(--r-avbd); margin-left: -6px; background: var(--r-av); display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--r-avfg); }
.rh .r-avatars span:first-child { margin-left: 0; background: var(--r-av1); }
.rh .r-heroPanel { background: var(--r-card); border: 1px solid var(--r-line); border-radius: 16px; padding: 17px; box-shadow: var(--r-pshadow); }
.rh .r-panelTop { display: flex; justify-content: space-between; align-items: center; padding: 3px 4px 14px; border-bottom: 1px solid var(--r-line); gap: 12px; }
.rh .r-panelTitle { font-size: 13px; font-weight: 800; color: var(--r-ink); }
.rh .r-panelTop small { display: block; }
.rh .r-live { font-size: 9px; color: var(--r-live); font-weight: 800; display: flex; align-items: center; gap: 6px; letter-spacing: .08em; white-space: nowrap; }
.rh .r-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--r-acc); box-shadow: 0 0 0 4px var(--r-ico-bg); }
.rh .r-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 14px 0; }
.rh .r-stat { background: var(--r-card2); border: 1px solid var(--r-line); padding: 11px; border-radius: 13px; }
.rh .r-stat b { display: block; color: var(--r-ink); font-size: 20px; letter-spacing: -.6px; }
.rh .r-stat span { font-size: 10px; color: var(--r-dim); }
.rh .r-activity { display: grid; gap: 8px; }
.rh .r-activityRow { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px; background: var(--r-row); border: 1px solid var(--r-line); border-radius: 9px; }
.rh .r-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--r-ico-bg); color: var(--r-ico-fg); font-weight: 900; }
.rh .r-ico.r-blue { background: #e9efff; color: var(--r-blue-fg); }
.rh .r-ico.r-gold { background: #fff3db; color: var(--r-gold-fg); }
.rh .r-activityRow b { display: block; font-size: 11px; color: var(--r-ink); }
.rh .r-activityRow small { display: block; font-size: 10px; color: var(--r-dim); }
.rh .r-tag { font-size: 9px; padding: 4px 7px; border-radius: 99px; background: var(--r-tag-bg); color: var(--r-tag-fg); font-weight: 800; white-space: nowrap; }
.rh .r-panelFoot { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; padding: 10px 4px 0; color: var(--r-dim); font-size: 10px; gap: 10px; }

/* sections */
.rh .r-section { padding: 88px 0; background: var(--r-sec); color: var(--r-ink); scroll-margin-top: 78px; }
.rh .r-section.r-soft { background: var(--r-soft); }
.rh .r-center { text-align: center; }
.rh .r-sectionHead { max-width: 690px; margin: 0 auto 42px; }
.rh .r-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: 1.6px; color: var(--r-kick); font-weight: 850; }
.rh .r-section h2 { font-size: clamp(30px, 4vw, 43px); line-height: 1.12; letter-spacing: -1.8px; color: var(--r-head); margin: 12px 0; }
.rh .r-sectionHead p { color: var(--r-mut); font-size: 15px; margin: 12px auto 0; max-width: 620px; }

/* demo shell */
.rh .r-demoShell { max-width: 1000px; margin: auto; background: var(--r-card); border: 1px solid var(--r-line); border-radius: 14px; padding: 18px; overflow: hidden; text-align: start; }
.rh .r-demoHead { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; }
.rh .r-demoTabs { display: flex; gap: 6px; background: var(--r-tabs); padding: 5px; border-radius: 999px; }
.rh .r-demoTab { border: 0; padding: 10px 16px; border-radius: 999px; color: var(--r-tab); background: transparent; font-size: 12px; font-weight: 800; cursor: pointer; }
.rh .r-demoTab.r-active { background: var(--r-tab-on); color: var(--r-tab-on-fg); box-shadow: 0 2px 9px rgba(0, 0, 0, .25); }
.rh .r-demoContent { display: grid; grid-template-columns: 1.08fr .92fr; gap: 16px; margin-top: 15px; }
.rh .r-demoMain { background: var(--r-main); border: 1px solid var(--r-line); border-radius: 18px; padding: 20px; min-width: 0; }
.rh .r-demoMain h3 { font-size: 17px; color: var(--r-head); margin: 0 0 5px; }
.rh .r-demoMain > p { font-size: 12px; color: var(--r-mut); margin: 0 0 17px; }
.rh .r-notice { display: flex; gap: 12px; padding: 13px; background: var(--r-notice); border: 1px solid var(--r-line); border-radius: 9px; margin: 9px 0; align-items: flex-start; animation: feedIn .35s ease both; }
.rh .r-notice .r-ico { flex: 0 0 34px; }
.rh .r-notice b { font-size: 12px; color: var(--r-ink); display: block; }
.rh .r-notice p { font-size: 11px; color: var(--r-mut); margin: 3px 0 0; }
.rh .r-notice time { font-size: 9px; color: var(--r-time); white-space: nowrap; margin-left: auto; }
.rh .r-notice.r-newEvent { border-color: var(--r-acc); }
.rh .r-demoAside { border-radius: 18px; padding: 20px; background: #0f1522; border: 1px solid #30394c; color: #fff; display: flex; flex-direction: column; justify-content: space-between; min-height: 320px; }
.rh .r-demoAside h4 { font-size: 16px; margin: 0 0 7px; color: #fff; }
.rh .r-demoAside p { font-size: 11px; line-height: 1.7; color: #c4d0db; margin: 0; }
.rh .r-step { display: flex; gap: 11px; align-items: flex-start; margin: 17px 0; }
.rh .r-stepNo { width: 24px; height: 24px; border-radius: 8px; background: #2a3652; color: #b9c8ff; font-size: 11px; font-weight: 900; display: grid; place-items: center; flex: 0 0 24px; }
.rh .r-step b { display: block; font-size: 11px; color: #fff; }
.rh .r-step small { display: block; color: #aebbd0; font-size: 10px; margin-top: 2px; }
.rh .r-stepLine { border-left: 1px solid #34546a; margin-left: 12px; height: 11px; }
.rh .r-demoAside .r-miniStatus { border-top: 1px solid #30394c; margin-top: 12px; padding-top: 13px; display: flex; justify-content: space-between; font-size: 10px; color: #b8c4d7; }
.rh .r-miniStatus strong { color: #a9bcff; }
.rh .r-sliderControls { display: flex; align-items: center; gap: 10px; }
.rh .r-arrow { width: 31px; height: 31px; border: 1px solid var(--r-out-bd); border-radius: 50%; background: var(--r-out-bg); color: var(--r-out-fg); cursor: pointer; font-size: 16px; line-height: 1; }
.rh .r-pips { display: flex; gap: 5px; }
.rh .r-pip { width: 6px; height: 6px; border-radius: 10px; background: var(--r-pip); }
.rh .r-pip.r-active { width: 20px; background: var(--r-acc); }
@keyframes feedIn { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }

/* value cards */
.rh .r-valueGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; text-align: start; }
.rh .r-valueCard, .rh .r-portal, .rh .r-progressCard, .rh .r-integration { background: var(--r-card); border: 1px solid var(--r-line); border-radius: 14px; box-shadow: none; }
.rh .r-valueCard { padding: 23px; }
.rh .r-valueCard .r-ico { margin-bottom: 18px; width: 42px; height: 42px; }
.rh .r-valueCard h3 { color: var(--r-ink); font-size: 16px; margin: 0 0 8px; }
.rh .r-valueCard p { color: var(--r-mut); font-size: 12px; margin: 0; line-height: 1.75; }

/* portals */
.rh .r-portals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: start; }
.rh .r-portal { padding: 20px; transition: .2s; }
.rh .r-portal:hover { transform: translateY(-4px); box-shadow: var(--r-shadow); border-color: var(--r-hov); }
.rh .r-portalNum { font-size: 10px; color: var(--r-num); font-weight: 900; letter-spacing: 1px; }
.rh .r-portal h3 { margin: 10px 0 7px; color: var(--r-ink); font-size: 17px; }
.rh .r-portal p { font-size: 11px; line-height: 1.7; color: var(--r-mut); min-height: 59px; margin: 1em 0; }
.rh .r-portal ul { padding-left: 17px; margin: 14px 0 0; color: var(--r-ul); font-size: 11px; line-height: 2; }
.rh .r-portalIcon { width: 42px; height: 42px; background: var(--r-picon); color: var(--r-picon-fg); border-radius: 13px; display: grid; place-items: center; font-size: 19px; margin-top: 14px; }

/* attendance and progress */
.rh .r-progressGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.rh .r-progressGrid h2.r-pg { font-size: 38px; letter-spacing: -1.5px; line-height: 1.1; margin: 12px 0; }
.rh .r-progressGrid > div > p.r-pgp { color: var(--r-mut); font-size: 13px; line-height: 1.8; margin: 1em 0; }
.rh .r-featureList { display: grid; gap: 17px; margin-top: 25px; }
.rh .r-feature { display: flex; gap: 12px; }
.rh .r-check { width: 25px; height: 25px; flex: 0 0 25px; background: var(--r-check); border-radius: 50%; display: grid; place-items: center; color: var(--r-check-fg); font-size: 12px; font-weight: 900; }
.rh .r-feature b { font-size: 13px; color: var(--r-ink); display: block; }
.rh .r-feature p { margin: 3px 0 0; font-size: 11px; color: var(--r-mut); }
.rh .r-progressCard { padding: 21px; box-shadow: var(--r-shadow); border-radius: 14px; }
.rh .r-progressTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rh .r-student { display: flex; align-items: center; gap: 11px; }
.rh .r-studentAvatar { width: 42px; height: 42px; background: #fee7d6; color: #7a4a2f; border-radius: 14px; display: grid; place-items: center; font-weight: 900; }
.rh .r-student b { font-size: 13px; display: block; color: var(--r-ink); }
.rh .r-student small { font-size: 10px; color: var(--r-mut); }
.rh .r-progressPill { font-size: 9px; background: var(--r-pill-bg); color: var(--r-pill-fg); padding: 6px 9px; border-radius: 99px; font-weight: 900; }
.rh .r-progressItem { border-top: 1px solid var(--r-line); padding: 14px 0; }
.rh .r-progressItem:last-of-type { padding-bottom: 0; }
.rh .r-progressItemHead { display: flex; justify-content: space-between; font-size: 11px; color: var(--r-ul); }
.rh .r-bar { height: 7px; border-radius: 99px; background: var(--r-bar); margin-top: 8px; overflow: hidden; }
.rh .r-bar span { display: block; height: 100%; background: var(--r-acc); border-radius: 99px; }
.rh .r-tutorNote { background: var(--r-note); padding: 13px; border-radius: 13px; font-size: 11px; color: var(--r-ul); margin-top: 13px; }
.rh .r-tutorNote b { color: var(--r-ink); }
.rh .r-tutorNote .r-ok { color: var(--r-ok); font-weight: 800; }

/* how it works */
.rh .r-howGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: start; }
.rh .r-how { border-top: 2px solid #5267ad; padding: 18px 8px 0; }
.rh .r-how span { font-size: 11px; color: var(--r-num); font-weight: 900; }
.rh .r-how h3 { color: var(--r-ink); font-size: 15px; margin: 8px 0; }
.rh .r-how p { font-size: 11px; color: var(--r-mut); line-height: 1.7; margin: 0; }

/* MMT Bot band */
.rh .r-aiBand { background: #1a2232; border: 1px solid #38496d; border-radius: 14px; padding: 40px; color: #fff; display: grid; grid-template-columns: 1fr .9fr; gap: 35px; align-items: center; overflow: hidden; position: relative; }
.rh .r-aiBand h2 { color: #fff; font-size: 33px; letter-spacing: -1.2px; margin: 10px 0; }
.rh .r-aiBand p { color: #bdc8dc; font-size: 13px; max-width: 490px; }
.rh .r-aiBand .r-kicker, .rh .r-aiChip b { color: #a8bcff; }
.rh .r-aiFeature { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; position: relative; z-index: 1; }
.rh .r-aiChip { border: 1px solid #405276; background: #263653; border-radius: 13px; padding: 14px; font-size: 11px; color: #e7edfb; }
.rh .r-aiChip b { display: block; font-size: 12px; margin-bottom: 4px; }

/* integrations */
.rh .r-integrationGrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; text-align: start; }
.rh .r-integration { padding: 17px; display: flex; gap: 11px; align-items: center; border-radius: 14px; }
.rh .r-integrationIcon { width: 35px; height: 35px; background: var(--r-picon); border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: var(--r-ichip); }
:root[data-theme="light"] .rh .r-integrationIcon { color: #3748bd; }
.rh .r-integration b { display: block; font-size: 11px; color: var(--r-ink); }
.rh .r-integration small { font-size: 9px; color: var(--r-mut); }
.rh .r-integration small { font-size: 10px; }

/* migration + closing call */
.rh .r-migration { background: var(--r-mig); border: 1px solid var(--r-mig-bd); border-radius: 14px; padding: 33px; display: flex; justify-content: space-between; align-items: center; gap: 25px; text-align: start; }
.rh .r-migration h2 { font-size: 26px; margin: 7px 0; color: var(--r-head); letter-spacing: -1px; }
.rh .r-migration p { font-size: 12px; color: var(--r-mut); max-width: 640px; margin: 0; }
.rh .r-cta { background: #1a2232; padding: 62px 25px; text-align: center; color: #fff; border-top: 1px solid #34436b; border-bottom: 1px solid #34436b; display: block; margin: 0; }
.rh .r-cta .r-wrap { display: block; }
.rh .r-cta h2 { font-size: 36px; letter-spacing: -1.5px; margin: 0 0 10px; color: #fff; max-width: none; }
.rh .r-cta p { color: #b7c3d7; font-size: 14px; margin: 0 auto 24px; }
.rh .r-cta .r-kicker { color: #8db2ff; }
.rh .r-cta .r-btn { margin: 4px; }
.rh .r-cta .r-outline { background: #202a3d; color: #eaf0fb; border-color: #3a465f; }
.rh .r-cta .r-note { font-size: 11px; color: #aab9c6; margin-top: 14px; }
.rh .r-cta a.r-btn { text-decoration: none; }

/* tablet and phone, as in the reference */
@media (max-width: 950px) {
  .rh .r-heroGrid { gap: 30px; }
  .rh .r-portals, .rh .r-integrationGrid, .rh .r-valueGrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .rh .r-wrap { width: min(100% - 30px, 560px); }
  .rh .r-hero { padding: 52px 0 48px; }
  .rh .r-heroGrid, .rh .r-progressGrid, .rh .r-aiBand { grid-template-columns: 1fr; }
  .rh .r-heroGrid { gap: 35px; }
  .rh h1 { font-size: 47px; letter-spacing: -2px; }
  .rh .r-hero p.r-lead { font-size: 14px; }
  .rh .r-section { padding: 62px 0; }
  .rh .r-sectionHead { margin-bottom: 28px; }
  .rh .r-demoContent { grid-template-columns: 1fr; }
  .rh .r-demoHead { align-items: flex-start; flex-direction: column; }
  .rh .r-demoTabs { width: 100%; }
  .rh .r-demoTab { flex: 1; padding: 9px 8px; font-size: 10px; }
  .rh .r-demoMain { padding: 14px; }
  .rh .r-demoAside { min-height: unset; }
  .rh .r-valueGrid { grid-template-columns: 1fr; }
  .rh .r-portals { grid-template-columns: 1fr 1fr; }
  .rh .r-portal { padding: 15px; }
  .rh .r-portal p { min-height: unset; }
  .rh .r-portal ul { font-size: 10px; }
  .rh .r-howGrid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .rh .r-aiBand { padding: 27px 22px; }
  .rh .r-aiBand h2 { font-size: 28px; }
  .rh .r-migration { display: block; padding: 25px; }
  .rh .r-migration .r-btn { margin-top: 18px; }
  .rh .r-cta h2 { font-size: 29px; }
  .rh .r-section h2 { font-size: 33px; }
}
@media (max-width: 390px) {
  .rh .r-portals { grid-template-columns: 1fr; }
  .rh .r-heroBtns .r-btn { width: 100%; }
  .rh .r-stats { gap: 5px; }
  .rh .r-stat { padding: 8px; }
  .rh .r-stat b { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .rh .r-notice { animation: none; transition: none; } .rh .r-btn, .rh .r-portal { transition: none; } .rh .r-btn:hover, .rh .r-portal:hover { transform: none; } }

.rh .r-panelTop small.r-pt, .rh .r-demoHead small.r-pt { font-size: 10px; color: var(--r-dim); }
.rh .r-demoContent[hidden] { display: none; }

/* portal tutorial video, compare table */
.rh .r-portal[data-portal] { cursor: pointer; position: relative; }
.rh .r-portal .r-watch { position: absolute; top: 16px; right: 16px; min-height: 0; padding: 5px 10px; font-size: 11px; line-height: 1.3; }
.rh .r-cmpWrap { overflow-x: auto; border: 1px solid var(--r-line); border-radius: 14px; background: var(--r-card); }
.rh .r-cmp { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 760px; }
.rh .r-cmp th, .rh .r-cmp td { text-align: start; padding: 13px 15px; border-bottom: 1px solid var(--r-line); vertical-align: top; line-height: 1.55; color: var(--r-mut); }
.rh .r-cmp thead th { color: var(--r-head); font-size: 12px; background: var(--r-row); }
.rh .r-cmp tbody th { color: var(--r-head); font-weight: 700; width: 17%; }
.rh .r-cmp td.r-own { color: var(--r-head); background: var(--r-row); }
.rh .r-cmp tr:last-child th, .rh .r-cmp tr:last-child td { border-bottom: 0; }
.rh .r-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rh .r-cmpNote { font-size: 11px; color: var(--r-mut); max-width: 760px; margin: 18px auto 0; text-align: center; }
.rh .r-cmpNote a { color: var(--r-kick); font-weight: 700; }
.r-vback { position: fixed; inset: 0; z-index: 90; background: rgba(4, 8, 17, .82); display: flex; align-items: center; justify-content: center; padding: 18px; }
.r-vbox { width: min(960px, 100%); max-height: 94vh; background: var(--surface, #1a2232); color: var(--ink, #eaf0fa); border: 1px solid var(--line, #39445b); border-radius: 18px; padding: 16px; box-shadow: 0 25px 100px rgba(0, 0, 0, .5); }
.r-vhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.r-vhead h3 { margin: 0; font-size: 17px; }
.r-vclose { border: 0; background: var(--surface-2, #2a354a); color: inherit; border-radius: 50%; width: 34px; height: 34px; font-size: 20px; cursor: pointer; }
.r-vbox video { width: 100%; max-height: 74vh; border-radius: 12px; background: #000; display: block; }

@media (max-width: 720px) { .rh .r-dur, .rh .r-cta .r-btn[data-form="seat"] { display: none; } }