/* ─────────────────────────────────────────────────────────────────────────────
   REVENECT — public site.

   Separate from dashboard.css on purpose: this is the only page a stranger sees,
   it carries a display typeface and dark bands the app has no use for, and the two
   should be free to change without breaking each other.

   The look: a light, centred, editorial page. Headlines carry it; the brand ramp
   (violet → blue → cyan) is spent on one gradient in the h1 and on small accents,
   and the buttons are near-black pills rather than gradient slabs — so the colour
   lands where it means something.

   The illustrations are not stock art. They are real flow-step cards and real
   WhatsApp bubbles, built in CSS. The page is about conversations and a node
   canvas, so it shows conversations and node cards.
───────────────────────────────────────────────────────────────────────────── */

:root {
  --v:        #7C3AED;   /* violet — accent, eyebrows, markers */
  --b:        #2563EB;
  --c:        #06B6D4;
  --grad:     linear-gradient(100deg, #7C3AED, #2563EB 50%, #06B6D4);

  --ink:      #0B1020;   /* dark bands */
  --ink-2:    #080C18;   /* footer, one step deeper */
  --btn:      #151A28;   /* solid button + headings */
  --text:     #151A28;
  --slate:    #5B6478;   /* body copy */
  --faint:    #8A92A6;   /* captions, mono notes */
  --paper:    #F7F8FB;   /* the alternating band */
  --card:     #FFFFFF;
  --line:     rgba(11,16,32,.07);   /* section rules — deliberately faint */
  --line-2:   rgba(11,16,32,.14);
  --on-dark:  rgba(255,255,255,.72);
  --on-dark-2:rgba(255,255,255,.40);
  --wa:       #25D366;   /* the one colour that is not ours — WhatsApp's */

  --display: "Sora", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body:    "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --wrap: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--logo-h, 42px) + 54px); }
body {
  margin: 0; background: var(--card); color: var(--text);
  font-family: var(--body); font-size: 16px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -.03em;
                 line-height: 1.1; text-wrap: balance; margin: 0; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; }

/* ── shared ──────────────────────────────────────────────────────────────── */
.eyebrow {
  display: block; font-family: var(--mono); font-size: 12px; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase; color: var(--v); margin-bottom: 22px;
}
.on-dark .eyebrow { color: #22D3EE; }

/* Pills, and solid near-black rather than a gradient: the gradient is the headline's. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-size: 16px; font-weight: 600; line-height: 1;
  padding: 16px 30px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: transform .12s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn); color: #fff; }
.btn-primary:hover { background: #232A3E; }
.btn-ghost { background: transparent; color: var(--btn); border-color: rgba(21,26,40,.20); }
.btn-ghost:hover { border-color: var(--btn); }
.on-dark .btn-primary { background: #fff; color: var(--btn); }
.on-dark .btn-primary:hover { background: #E8EAF2; }
.on-dark .btn-ghost { color: #fff; border-color: rgba(255,255,255,.26); }
.on-dark .btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn-sm { padding: 11px 20px; font-size: 14.5px; }

.section { padding: 112px 40px; }
.section.tint { background: var(--paper); border-top: 1px solid var(--line); }
/* Section heads are centred: the page reads as an argument made to a room, not a spec sheet. */
.section-head { text-align: center; margin: 0 auto 60px; }
.section-head h2 { font-size: 44px; margin: 0 auto 14px; max-width: 22em; }
.section-head p { font-size: 18px; line-height: 1.7; color: var(--slate); max-width: 40em; margin: 0 auto; }
.on-dark .section-head p { color: var(--on-dark); }

/* Sections arrive as you reach them — but ONLY once JavaScript has confirmed it is running.
   The .js class is set by an inline script in <head>; without it nothing is ever hidden, so a
   script that fails to load leaves a complete page rather than a blank one. */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ── nav ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.86); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
/* --logo-h comes from Admin → Settings → Branding, set on <body> by index.php. The bar is
   sized from it, so a tall logo makes the bar taller instead of being cropped. */
.nav-in { display: flex; align-items: center; gap: 28px; padding: 8px 40px;
          min-height: calc(var(--logo-h, 42px) + 34px); max-width: none; }
.nav-logo { display: flex; align-items: center; text-decoration: none; margin-right: auto; }
.nav-logo svg, .nav-logo img { height: var(--logo-h, 42px); width: auto; display: block; }
.foot svg, .foot img { height: var(--foot-logo-h, 34px); width: auto; display: block; }
.nav-links { display: flex; gap: 26px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--slate); text-decoration: none; }
.nav-links a:hover { color: var(--v); }
.nav-cta { display: flex; gap: 14px; align-items: center; }
.nav-cta .signin { font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--btn); }
.nav-cta .signin:hover { color: var(--v); }
.nav-burger { display: none; background: 0; border: 0; padding: 8px; cursor: pointer; color: var(--btn); }

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 112px 40px 0; text-align: center; background: var(--card); }
.hero h1 { font-size: 78px; line-height: 1.04; letter-spacing: -.035em;
           margin: 0 auto; max-width: 16.5em; }
.hero h1 .grad {
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub { font-size: 20px; line-height: 1.6; color: var(--slate); max-width: 33em; margin: 28px auto 34px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero-note { font-family: var(--mono); font-size: 12.5px; color: var(--faint); margin-top: 20px; }

/* The product, sitting on the fold: the canvas rising out of the section edge with the
   conversation it produced beside it. Two halves of one claim, in one picture. */
.hero-shot { position: relative; margin: 80px auto 0; max-width: var(--wrap); }
.hero-shot::before {
  content: ""; position: absolute; inset: auto 6% 4%; height: 72%;
  background: radial-gradient(60% 60% at 50% 60%, rgba(124,58,237,.20), transparent 72%);
  filter: blur(10px); pointer-events: none;
}
.hero-shot-in {
  position: relative; display: grid; grid-template-columns: 1fr 340px; gap: 22px;
  text-align: left; align-items: end;
}

/* ── the canvas card ─────────────────────────────────────────────────────── */
.canvas {
  background: #0F1526; border-radius: 24px; padding: 28px;
  box-shadow: 0 34px 80px rgba(11,16,32,.28);
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  display: flex; flex-direction: column; gap: 10px;
}
.hero-shot .canvas { border-radius: 24px 24px 0 0; }
.canvas-bar {
  display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 8px;
}
.canvas-bar .live { color: #22D3EE; }
.node { background: #182036; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; overflow: hidden; }
.node.on { border-color: rgba(124,58,237,.7); box-shadow: 0 0 0 2px rgba(124,58,237,.22); }
.node-h { background: rgba(255,255,255,.05); padding: 8px 12px; font-family: var(--mono);
          font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); }
.node-b { padding: 11px 12px; font-size: 13.5px; color: #DCE3F2; }
.node-s { padding: 0 12px 11px; font-family: var(--mono); font-size: 11px;
          color: rgba(255,255,255,.40); display: flex; gap: 14px; }
.node-s .drop { color: #FDA4AF; }
.node-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.wire { height: 14px; margin-left: 26px; border-left: 2px solid rgba(255,255,255,.16); }

/* ── the phone ───────────────────────────────────────────────────────────── */
.phone {
  background: #0F1526; border: 1px solid rgba(255,255,255,.10); border-radius: 26px;
  padding: 14px; box-shadow: 0 30px 70px rgba(11,16,32,.30);
}
.phone-bar {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px;
}
.phone-av { width: 34px; height: 34px; border-radius: 50%; background: var(--grad); flex: none; }
.phone-who { font-size: 13.5px; font-weight: 600; color: #fff; line-height: 1.3; }
.phone-who small { display: block; font-size: 11px; color: var(--wa); font-weight: 500; }
.thread { display: flex; flex-direction: column; gap: 9px; }
.bub { max-width: 86%; padding: 10px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.bub.out { align-self: flex-end; background: #134E38; color: #E9FFF4; border-bottom-right-radius: 4px; }
.bub.in  { align-self: flex-start; background: #1C2438; color: #DCE3F2; border-bottom-left-radius: 4px; }
.bub .tick { color: #4FC3F7; font-size: 11px; margin-left: 6px; }
.bub-btns { display: flex; flex-direction: column; gap: 5px; margin-top: 9px;
            border-top: 1px solid rgba(255,255,255,.10); padding-top: 8px; }
.bub-btns span { text-align: center; font-size: 12.5px; font-weight: 600; color: #7FD8F5;
                 padding: 6px; border-radius: 7px; background: rgba(255,255,255,.05); }
.phone-tag {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.08);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.40);
}
.phone-tag .hot { color: #FDA4AF; background: rgba(253,164,175,.14); padding: 3px 8px; border-radius: 999px; }

/* ── the number strip ────────────────────────────────────────────────────── */
.strip { padding: 44px 40px; background: var(--paper); border-top: 1px solid var(--line); }
.strip-in { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: var(--wrap); margin: 0 auto; }
.strip-i { text-align: center; }
.strip-i .k { display: block; font-family: var(--display); font-size: 34px; font-weight: 700;
              letter-spacing: -.03em; color: var(--v); }
.strip-i .l { font-size: 13.5px; line-height: 1.5; color: #6B7488; }

/* ── what it does: numbered, not boxed ───────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 60px; }
.f-num { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--v); }
.f h3 { font-size: 22px; letter-spacing: -.02em; margin: 10px 0; }
.f p { font-size: 15.5px; line-height: 1.7; color: var(--slate); }

/* ── how it works ────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.step-n { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.step-n span:first-child { font-family: var(--mono); font-size: 12px; color: var(--v); }
.step-n .rule { flex: 1; height: 1px; background: var(--line-2); }
.step h3 { font-size: 18px; letter-spacing: -.02em; margin: 0 0 9px; }
.step p { font-size: 14.5px; line-height: 1.7; color: var(--slate); }

/* ── two channels ────────────────────────────────────────────────────────── */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.ch { background: var(--card); border: 1px solid var(--line-2); border-radius: 20px; padding: 34px 32px; }
.ch.lead { border-color: rgba(124,58,237,.28); box-shadow: 0 14px 40px rgba(124,58,237,.08); }
.ch-tag { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
          text-transform: uppercase; color: var(--v); }
.ch h3 { font-size: 23px; letter-spacing: -.02em; margin: 12px 0 10px; }
.ch > p { font-size: 15.5px; color: var(--slate); margin-bottom: 20px; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ticks li { font-size: 14.5px; line-height: 1.6; padding-left: 24px; position: relative; }
.ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--v); font-weight: 700; }
.ticks li.no::before { content: "!"; color: #C2410C; }
.ch-note { margin-top: 20px; padding: 13px 15px; border-radius: 12px; font-size: 13px; line-height: 1.6;
           background: #FFF7ED; border: 1px solid #FED7AA; color: #7C2D12; }
.ch-note strong { color: #7C2D12; }
.ch-note.info { background: rgba(37,99,235,.05); border-color: rgba(37,99,235,.18); color: var(--slate); }
.ch-note.info strong { color: var(--btn); }

/* ── the builder band ────────────────────────────────────────────────────── */
.builder { background: var(--ink); color: #fff; }
.builder-in { display: grid; grid-template-columns: 1fr 1.15fr; gap: 60px; align-items: center; }
.builder h2 { font-size: 42px; line-height: 1.1; margin: 0 0 18px; }
.builder p.lead { color: var(--on-dark); font-size: 17px; line-height: 1.7; margin-bottom: 24px; }
.builder .ticks li { color: var(--on-dark); }
.builder .ticks li::before { color: var(--c); }
.builder .ticks strong { color: #fff; }

/* ── lead qualifier ──────────────────────────────────────────────────────── */
.lq { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: start; }
.lq-steps { list-style: none; margin: 0; padding: 0; counter-reset: q; }
.lq-steps li { position: relative; padding: 0 0 26px 52px; }
.lq-steps li::before {
  counter-increment: q; content: counter(q);
  position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--mono); font-size: 13px;
  color: #fff; background: var(--grad);
}
.lq-steps li::after {
  content: ""; position: absolute; left: 15.5px; top: 38px; bottom: 6px; width: 1px; background: var(--line-2);
}
.lq-steps li:last-child { padding-bottom: 0; }
.lq-steps li:last-child::after { display: none; }
.lq-steps h3 { font-size: 18px; letter-spacing: -.02em; margin-bottom: 8px; }
.lq-steps p { font-size: 14.5px; line-height: 1.7; color: var(--slate); }

.lead-card {
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 20px; padding: 26px 28px;
  position: sticky; top: calc(var(--logo-h, 42px) + 54px);
}
.lead-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.lead-top strong { display: block; font-family: var(--display); font-size: 18px; letter-spacing: -.02em; }
.lead-ph { font-family: var(--mono); font-size: 12.5px; color: var(--faint); }
.pill-hot { flex: none; font-family: var(--mono); font-size: 11.5px; color: #9F1239;
            background: #FFE4E6; border: 1px solid #FECDD3; padding: 4px 10px; border-radius: 999px; }
.lead-meter { height: 5px; border-radius: 3px; background: rgba(11,16,32,.09); margin: 14px 0 18px; overflow: hidden; }
.lead-meter span { display: block; height: 100%; background: var(--grad); }
.lead-fields { margin: 0; display: flex; flex-direction: column; gap: 9px; }
.lead-fields > div { display: flex; gap: 14px; align-items: baseline; }
.lead-fields dt { flex: 0 0 84px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
                  text-transform: uppercase; color: var(--faint); }
.lead-fields dd { margin: 0; font-size: 14.5px; }
.lead-why { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-2);
            font-size: 13.5px; color: var(--slate); line-height: 1.65; }
.lead-why span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
                 text-transform: uppercase; color: var(--v); margin-bottom: 5px; }
.lead-foot { margin-top: 16px; font-family: var(--mono); font-size: 11.5px; color: var(--faint); }

/* ── pricing ─────────────────────────────────────────────────────────────── */
.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.plan { background: var(--card); border: 1px solid var(--line-2); border-radius: 20px;
        padding: 34px 30px; display: flex; flex-direction: column; }
.plan.hi { border-color: rgba(124,58,237,.28); box-shadow: 0 14px 40px rgba(124,58,237,.08); }
.plan h3 { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .16em;
           text-transform: uppercase; color: var(--v); }
.plan .price { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -.03em; margin: 12px 0 2px; }
.plan .per { font-family: var(--mono); font-size: 12px; color: var(--faint); margin-bottom: 24px; }
.plan .ticks { margin-bottom: 26px; }
.plan .ticks li { color: var(--slate); }
.plan .btn { margin-top: auto; }
.price-note { margin-top: 30px; font-size: 14.5px; line-height: 1.7; color: var(--slate);
              text-align: center; max-width: 46em; margin-inline: auto; }
.price-note strong { color: var(--btn); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { max-width: 840px; margin: 0 auto; }
.qa { border-bottom: 1px solid rgba(11,16,32,.10); }
.qa summary {
  cursor: pointer; list-style: none; padding: 22px 36px 22px 0; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: 4px; top: 19px; color: var(--v);
                     font-size: 22px; line-height: 1; transition: transform .25s; }
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: var(--v); }
.qa-a { padding: 0 36px 24px 0; font-size: 15px; line-height: 1.75; color: var(--slate); }

/* ── request access ──────────────────────────────────────────────────────── */
.cta { background: var(--ink); color: #fff; padding: 104px 40px; }
.cta-in { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.cta h2 { font-size: 44px; line-height: 1.1; margin: 0 0 18px; }
.cta p.lead { color: var(--on-dark); font-size: 17px; line-height: 1.7; margin-bottom: 22px; }
.cta .ticks li { color: var(--on-dark); }
.cta .ticks li::before { color: #22D3EE; }
.form { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12);
        border-radius: 20px; padding: 28px; }
.form .fi { margin-bottom: 15px; }
.form label { display: block; font-size: 12.5px; font-weight: 600; color: var(--on-dark); margin-bottom: 6px; }
.form input, .form textarea {
  width: 100%; font-family: var(--body); font-size: 15px; color: #fff;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px; padding: 12px 14px;
}
.form input::placeholder, .form textarea::placeholder { color: rgba(255,255,255,.34); }
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--c); box-shadow: 0 0 0 3px rgba(6,182,212,.18);
}
.form textarea { resize: vertical; min-height: 96px; }
.form .btn { width: 100%; margin-top: 6px; }
.form .fine { font-size: 12.5px; color: var(--on-dark-2); margin-top: 12px; text-align: center; }
.note { padding: 13px 16px; border-radius: 12px; font-size: 14.5px; margin-bottom: 18px; }
.note.ok  { background: rgba(16,185,129,.14); border: 1px solid rgba(16,185,129,.4); color: #A7F3D0; }
.note.bad { background: rgba(239,68,68,.12);  border: 1px solid rgba(239,68,68,.4);  color: #FECACA; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot { padding: 44px 40px 48px; background: var(--ink-2); color: var(--on-dark-2); font-size: 14px; }
.foot-in { max-width: var(--wrap); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; }
.foot-links { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.foot a { color: var(--on-dark); text-decoration: none; }
.foot a:hover { color: #fff; }
.foot-legal { max-width: var(--wrap); margin: 26px auto 0; padding-top: 22px;
              border-top: 1px solid rgba(255,255,255,.08); font-size: 12.5px; line-height: 1.7; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hero h1 { font-size: 58px; }
  .section-head h2 { font-size: 38px; }
  .hero-shot-in { grid-template-columns: 1fr; }
  .hero-shot-in .phone { max-width: 380px; margin: 0 auto; }
  .hero-shot .canvas { border-radius: 24px; }
}
@media (max-width: 940px) {
  .builder-in, .cta-in { grid-template-columns: 1fr; gap: 44px; }
  .lq { grid-template-columns: 1fr; gap: 36px; }
  .lead-card { position: static; }
  .grid { gap: 40px; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .two { grid-template-columns: 1fr; }
  .strip-in { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
}
@media (max-width: 700px) {
  .section, .cta { padding: 72px 22px; }
  .hero { padding: 64px 22px 0; }
  .hero h1 { font-size: 40px; letter-spacing: -.03em; }
  .hero-sub { font-size: 17px; margin: 22px auto 26px; }
  .hero-cta .btn { width: 100%; }
  .hero-shot { margin-top: 54px; }
  .strip, .foot { padding-inline: 22px; }
  .section-head { margin-bottom: 44px; }
  .section-head h2 { font-size: 30px; }
  .section-head p { font-size: 16px; }
  .grid, .steps { grid-template-columns: 1fr; }
  .builder h2, .cta h2 { font-size: 30px; }
  .node-row { grid-template-columns: 1fr; }
  .lead-fields > div { flex-direction: column; gap: 2px; }
  .lead-fields dt { flex: none; }

  .nav-in { padding: 8px 22px; min-height: calc(var(--logo-h, 42px) * .8 + 26px); gap: 12px; }
  .nav-logo svg, .nav-logo img { height: calc(var(--logo-h, 42px) * .8); }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex; flex-direction: column; gap: 0; position: absolute;
    top: calc(var(--logo-h, 42px) * .8 + 26px); left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 8px 22px 18px;
  }
  .nav-links.open a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-burger { display: block; }
  .nav-cta .signin { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; }
}

/* ── the demo video ──────────────────────────────────────────────────────────
   A 16:9 frame that never causes layout shift while the file loads, on a dark ground so
   letterboxing on an odd aspect ratio reads as deliberate rather than as a gap. */
.demo-frame { max-width: 940px; margin: 0 auto; aspect-ratio: 16 / 9; background: #0F1420;
              border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
              box-shadow: 0 26px 60px -28px rgba(15,20,32,.42); }
.demo-frame video, .demo-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 720px) {
  .demo-frame { border-radius: 12px; }
}

/* ── the video's language switch ─────────────────────────────────────────────
   Only rendered when both languages exist, so it never offers a choice that isn't one.
   Sits above the frame rather than over it: an overlay would cover the first frame of the
   video, which is the one thing a still player has to sell itself with. */
.vlang { display: flex; justify-content: center; gap: 6px; margin: 0 auto 14px;
         padding: 4px; border: 1px solid var(--line); border-radius: 999px;
         background: var(--card); width: max-content; }
.vlang-b { display: block; padding: 7px 18px; border-radius: 999px; font-size: 13.5px;
           font-weight: 600; color: var(--slate); text-decoration: none; line-height: 1;
           transition: background .15s ease, color .15s ease; }
.vlang-b:hover { color: var(--ink); }
.vlang-b.on { background: var(--ink); color: #fff; }
.vlang-b:focus-visible { outline: 2px solid var(--v); outline-offset: 2px; }

/* ── Help Center and the request page (help-center.php, request.php) ───────── */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hc-top { padding: 72px 40px 56px; background: var(--paper); border-bottom: 1px solid var(--line); }
.hc-top .wrap { max-width: 840px; }
.hc-crumbs { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--faint); margin-bottom: 18px; }
.hc-crumbs a { color: var(--v); text-decoration: none; }
.hc-top h1 { font-size: 56px; line-height: 1.05; margin: 0 0 14px; }
.hc-top p { font-size: 18px; color: var(--slate); max-width: 36em; margin: 0 0 28px; }
.hc-search input { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 15px 18px; border-radius: 14px;
                   border: 1px solid var(--line-2); background: var(--card); color: var(--text); }
.hc-search input:focus { outline: 2px solid var(--v); outline-offset: 1px; border-color: transparent; }
.hc-body { padding-top: 48px; }
.qa summary .hc-qh { display: inline; font: inherit; letter-spacing: inherit; margin: 0; }
.qa:target summary { color: var(--v); }
.hc-link { margin-left: 8px; color: var(--faint); text-decoration: none; font-family: var(--mono); font-size: 13px; }
.hc-link:hover { color: var(--v); }
.hc-empty { max-width: 840px; margin: 0 auto; color: var(--slate); }
.hc-empty a { color: var(--v); }
.hc-cta { text-align: center; }
.hc-cta .wrap { max-width: 640px; }
.hc-cta .btn { margin-top: 8px; }
.req-page h1 { font-size: 44px; line-height: 1.1; margin: 0 0 18px; color: #fff; }
.req-page { min-height: calc(100vh - 220px); }
.req-more { color: var(--on-dark-2); font-size: 14.5px; margin-top: 18px; }
.req-more a { color: #fff; }
@media (max-width: 700px) {
  .hc-top { padding: 44px 22px 36px; }
  .hc-top h1 { font-size: 38px; }
  .req-page h1 { font-size: 32px; }
}