/* ==========================================================================
   home-2026.css — the 2026 homepage
   ==========================================================================
   Scoped under .h26 so nothing here can reach the header, the footer or any
   other page. Those keep their existing styles and their existing JS bindings
   (menu-toggle, darkModeToggle, locale switcher, blog ticker) untouched.

   Dark mode here follows the site's own mechanism — body.dark-mode, set by
   js/main.js — not prefers-color-scheme. A media query would fight the toggle.

   Colours come from style/tokens.css (--vypa-blue, --lemon, --ink, --sun).
   Nothing in this file invents a brand colour.
   ========================================================================== */

/* Declared on body.h26-page as well as .h26: only the homepage has a .h26
   element, so tokens scoped to it alone never resolved on the other 44 pages
   and every var(--h-ink) / var(--h-line) in the sitewide button rules below
   was an invalid declaration - which is why outline buttons lost their border
   and their text colour everywhere except the homepage. */
body.h26-page,
.h26 {
  /* surfaces, light */
  --h-page: #ffffff;
  --h-ink: #0B0F1A;
  --h-soft: #f3f6fb;
  --h-line: #e3e8f1;
  --h-muted: #5d667a;
  --h-card: #ffffff;

  /* the hero panel */
  --h-screen: var(--vypa-blue);
  --h-screen-ink: #ffffff;
  --h-screen-glow: 0 30px 70px rgb(0 40 150 / .26);
  --h-bezel: #0B0F1A;
  --h-bezel-edge: #242c3c;
  --h-rule: rgb(255 255 255 / .22);

  /* the handset */
  --h-dev: var(--vypa-blue);
  --h-dev-card: #ffffff;
  --h-dev-num: var(--vypa-blue);
  --h-dev-label: #5d667a;
  --h-dev-line: #13192a;
  --h-dev-nav: rgb(255 255 255 / .92);
  --h-dev-dot: #c3d0e8;

  --h-host: #07CB91;
  --h-display: 'Archivo', 'Inter', system-ui, sans-serif;

}

/* The surface itself is only painted inside .h26. Applying it to body.h26-page
   would repaint every page white and override the backgrounds those pages set
   for themselves - the skyline, the dark-mode gradient. Tokens travel; paint
   does not. */
.h26 {
  background: var(--h-page);
  color: var(--h-ink);
}

body.dark-mode,
body.dark-mode .h26 {
  --h-page: #070A12;
  --h-ink: #EEF1F7;
  --h-soft: #0E1320;
  --h-line: #1b2230;
  --h-muted: #99a3b8;
  --h-card: #0E1320;

  /* A near-black screen on a near-black page disappears. In dark mode the panel
     stays lit, and the bezel lightens, so page / frame / screen stay three layers. */
  --h-screen: linear-gradient(168deg, #13235c 0%, #0c1636 52%, #080f26 100%);
  --h-screen-glow: 0 0 0 1px rgb(96 136 255 / .20), 0 34px 80px rgb(22 56 170 / .34);
  --h-bezel: #1a2130;
  --h-bezel-edge: #333d50;
  --h-rule: rgb(255 255 255 / .16);

  --h-dev: #0E1320;
  --h-dev-card: rgb(255 255 255 / .06);
  --h-dev-num: #EEF1F7;
  --h-dev-label: #8d97ad;
  --h-dev-line: #232c3d;
  --h-dev-nav: rgb(255 255 255 / .06);
  --h-dev-dot: #2a3344;
}

.h26 * { box-sizing: border-box; }
.h26 h1, .h26 h2, .h26 h3, .h26 h4 { margin: 0; text-wrap: balance; }
.h26 p { margin: 0; }
.h26 a { color: inherit; text-decoration: none; }
.h26 img { max-width: 100%; display: block; }
.h26-shell { max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.h26-disp { font-family: var(--h-display); font-weight: 900; letter-spacing: -.035em; line-height: .92; }
.h26-lem { color: var(--lemon); }
.h26-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--vypa-blue); }

.h26-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: var(--radius-pill, 999px); padding: 13px 24px;
  font-size: 14px; font-weight: 700; white-space: nowrap; border: 0; cursor: pointer;
  transition: transform .15s ease;
}
.h26-btn:hover { transform: translateY(-1px); }
/* These carry .h26 so they outrank `.h26 a { color: inherit }` (0,1,1). Without
   it every button inherited its container's text colour: black-on-black in a
   white card, and dark olive on black inside the lemon band. */
.h26 .h26-btn-lemon { background: var(--lemon); color: var(--ink); }
.h26 .h26-btn-ink   { background: var(--ink); color: #ffffff; }
.h26 .h26-btn-blue  { background: var(--vypa-blue); color: #ffffff; }
.h26 .h26-btn-ghost { background: transparent; color: var(--h-screen-ink);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .34); }
/* On a white card the ghost outline needs an ink edge, not a white one. */
.h26 .h26-rc .h26-btn-ghost { color: var(--h-ink); box-shadow: inset 0 0 0 1.5px var(--h-line); }
@media (prefers-reduced-motion: reduce) { .h26 *, .h26 *::before { transition: none !important; } }

/* ---------- hero inside the panel ---------- */
.h26-tv {
  background: var(--h-bezel);
  border-radius: clamp(14px, 1.8vw, 22px);
  padding: clamp(7px, 1vw, 11px);
  box-shadow: var(--h-screen-glow), inset 0 0 0 1px var(--h-bezel-edge);
  margin-top: 10px;
}
.h26-screen {
  background: var(--h-screen); color: var(--h-screen-ink);
  border-radius: clamp(8px, 1vw, 13px); overflow: hidden;
  padding: clamp(24px, 5.5vw, 74px) clamp(16px, 4.5vw, 64px);
}
/* The old 38px floor was wider than the panel's inner width at 390px, and the
   panel clips, so the longest line lost its last word. 29px fits 320px. */
.h26-screen h1 { font-size: clamp(29px, 8.4vw, 104px); }
.h26-sub { margin-top: 20px; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.5; max-width: 46ch; opacity: .92; }
.h26-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }

.h26-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--h-rule); margin-top: clamp(30px, 4.5vw, 54px); border-top: 1px solid var(--h-rule); }
@media (max-width: 700px) { .h26-stats { grid-template-columns: repeat(2, 1fr); } }
.h26-stat { background: var(--vypa-blue); padding: 18px 14px; }
body.dark-mode .h26-stat { background: #0c1636; }
.h26-stat b { display: block; font-family: var(--h-display); font-weight: 900;
  font-size: clamp(23px, 3.2vw, 38px); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.h26-stat > span { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .86; }
/* Direct child only. The figure is `<b><span data-mp="basic">CA$10</span></b>`
   since the price has to be swappable per country, and a descendant selector
   caught that span too - painting the number in the caption's 10.5px uppercase
   while the three figures beside it stayed 34px. */

/* ---------- chooser band ---------- */
.h26-band { background: var(--lemon); color: var(--lemon-ink); border-radius: var(--radius-pill, 999px); margin-top: 16px; }
.h26-band-in { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 14px clamp(18px, 2.4vw, 30px); }
.h26-band strong { font-family: var(--h-display); font-weight: 800; font-size: clamp(15px, 1.9vw, 20px); letter-spacing: -.02em; }
.h26-picks { display: flex; flex-wrap: wrap; gap: 8px; }
/* A stadium radius reads as a pill only while the row is one line; once it wraps
   it becomes an oval, so below the wrap point it goes back to being a card. */
@media (max-width: 760px) {
  .h26-band { border-radius: 26px; }
  .h26-band-in { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; }
  .h26-band strong { text-align: center; }
  .h26-picks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .h26-picks .h26-btn { justify-content: center; padding: 12px 8px; font-size: 12.5px; }
}

/* ---------- sections ---------- */
.h26-pad { padding-block: clamp(54px, 8vw, 96px); }
.h26-head h2 { font-family: var(--h-display); font-weight: 900; letter-spacing: -.03em;
  line-height: 1; font-size: clamp(28px, 4.4vw, 52px); margin-top: 12px; }
.h26-head p { margin-top: 14px; color: var(--h-muted); font-size: 16px; line-height: 1.6; max-width: 52ch; }

/* role cards */
.h26-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 38px; }
@media (max-width: 820px) { .h26-roles { grid-template-columns: 1fr; } }
.h26-rc { border-radius: 26px; overflow: hidden; border: 1px solid var(--h-line);
  background: var(--h-card); display: flex; flex-direction: column; }
.h26-rc .shot { aspect-ratio: 16/10; overflow: hidden; background: var(--h-soft); }
.h26-rc .shot img { width: 100%; height: 100%; object-fit: cover; }
.h26-rc .body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.h26-rc h3 { font-family: var(--h-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.h26-rc p { font-size: 13.5px; color: var(--h-muted); line-height: 1.55; }
.h26-rc .go { margin-top: auto; padding-top: 12px; }
.h26-tag { align-self: flex-start; border-radius: var(--radius-pill, 999px); padding: 4px 11px;
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- handsets ---------- */
.h26-soft { background: var(--h-soft); border-block: 1px solid var(--h-line); }
.h26-modes { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(28px, 5vw, 60px); align-items: center; margin-top: 36px; }
@media (max-width: 900px) { .h26-modes { grid-template-columns: 1fr; } }
.h26-bens { display: flex; flex-direction: column; gap: 14px; }
.h26-ben { display: flex; gap: 12px; align-items: flex-start; }
.h26-ben i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; display: block; }
.h26-ben h4 { font-family: var(--h-display); font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.h26-ben p { color: var(--h-muted); font-size: 13px; line-height: 1.5; margin-top: 2px; }

/* The shadow needs room inside the box. Once this row becomes a scroller (below)
   overflow-y is forced to clip, which sliced a 54px blur flat across the bottom. */
.h26-phones { display: flex; gap: clamp(8px,1.6vw,18px); justify-content: center; align-items: flex-end;
  padding: 34px 0 60px; margin: -34px 0 -60px; }
/* The shell is hardware, so it stays dark in both themes. What's on the screen follows. */
.h26-phone { flex: 1 1 0; max-width: 188px; min-width: 0; aspect-ratio: 9/18.6;
  background: #0a0d15; border-radius: clamp(18px,2.6vw,28px); padding: 5px;
  box-shadow: 0 24px 54px rgb(11 15 26 / .30), inset 0 0 0 1px #262f41; }
.h26-phone.lift { transform: translateY(-28px); box-shadow: 0 30px 60px rgb(11 15 26 / .36), inset 0 0 0 1.5px var(--lemon); }
@media (max-width: 620px) {
  .h26-phone.lift { transform: none; }
  .h26-phones { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory;
    padding: 30px 20px 56px; margin: -30px -20px -56px; }
  .h26-phone { flex: 0 0 168px; scroll-snap-align: center; }
}
.h26-pscreen { height: 100%; background: var(--h-dev); border-radius: clamp(14px,2vw,23px);
  padding: 8px 7px 7px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.h26-notch { height: 9px; width: 30%; margin: 0 auto 2px; border-radius: 999px; background: #0a0d15; }
.h26-phead { display: flex; align-items: center; gap: 4px; color: #fff; }
.h26-phead .hm { font-family: var(--h-display); font-weight: 900; font-size: 9px; letter-spacing: -.02em; margin-right: auto; }
.h26-ptag { border-radius: 999px; padding: 2.5px 8px; font-size: 7px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.h26-greet { font-family: var(--h-display); font-weight: 900; font-size: 14px; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: .9px #fff; margin-top: 1px; }
.h26-psub { font-size: 6.5px; line-height: 1.4; color: #fff; opacity: .85; }
.h26-pmoney { background: var(--h-dev-card); border-radius: 999px; padding: 5px 9px;
  font-family: var(--h-display); font-weight: 900; font-size: 11px; letter-spacing: -.02em;
  color: var(--h-host); font-variant-numeric: tabular-nums; align-self: flex-start; }
.h26-pact { background: var(--lemon); color: var(--lemon-ink); border-radius: 12px; padding: 9px; }
.h26-pact span { display: block; font-size: 5.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; opacity: .72; }
.h26-pact b { display: block; font-family: var(--h-display); font-weight: 900; font-size: 10.5px;
  line-height: 1.12; letter-spacing: -.02em; margin: 3px 0 6px; }
.h26-pact i { display: inline-block; background: var(--ink); color: #fff; border-radius: 999px;
  padding: 4px 9px; font-size: 6.5px; font-weight: 800; font-style: normal; }
.h26-pstats { background: var(--h-dev-card); border-radius: 12px; padding: 8px 9px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px 6px; }
.h26-pstats div b { display: block; font-family: var(--h-display); font-weight: 900; font-size: 11px;
  letter-spacing: -.02em; color: var(--h-dev-num); font-variant-numeric: tabular-nums; }
.h26-pstats div span { display: block; font-size: 5.5px; color: var(--h-dev-label); margin-top: 1px; line-height: 1.25; }
.h26-prow { display: flex; gap: 5px; align-items: center; }
.h26-prow .lab { flex: 1; background: var(--h-dev-card); border-radius: 10px; padding: 6px 8px;
  font-size: 5.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--h-dev-label); }
.h26-prow .amt { background: var(--ink); color: #fff; border-radius: 10px; padding: 6px 9px;
  font-family: var(--h-display); font-weight: 900; font-size: 9px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.h26-plist { background: var(--h-dev-card); border-radius: 10px; padding: 7px 8px; }
.h26-plist b { display: block; font-size: 7.5px; font-weight: 800; color: var(--h-dev-num); }
.h26-plist span { display: block; font-size: 5.5px; color: var(--h-dev-label); margin-top: 1px; }
.h26-pbar { margin-top: auto; border-radius: 999px; background: var(--h-dev-nav);
  display: flex; align-items: center; gap: 6px; padding: 4px 7px; }
.h26-pbar u { display: flex; align-items: center; gap: 3px; background: var(--lemon); color: var(--lemon-ink);
  border-radius: 999px; padding: 3px 7px; font-size: 5.5px; font-weight: 800; text-decoration: none; }
.h26-pbar s { width: 7px; height: 7px; border-radius: 2px; background: var(--h-dev-dot); display: block; }

/* ---------- players ---------- */
.h26-pgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(192px, 1fr)); gap: 12px; margin-top: 34px; }
.h26-pl { background: var(--h-card); border: 1px solid var(--h-line); border-radius: 18px;
  padding: 18px; display: flex; flex-direction: column; gap: 7px; }
.h26-pl h4 { font-family: var(--h-display); font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.h26-pl p { font-size: 12.5px; color: var(--h-muted); line-height: 1.5; }
.h26-pl .spec { font-size: 11px; color: var(--h-muted); font-variant-numeric: tabular-nums; }
.h26-pl .how { margin-top: auto; padding-top: 10px; font-size: 11.5px; font-weight: 700; color: var(--vypa-blue); }
.h26-chip { align-self: flex-start; border-radius: 999px; padding: 3px 10px; font-size: 9.5px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--lemon); color: var(--lemon-ink); }
.h26-chip.grey { background: var(--h-line); color: var(--h-muted); }
.h26-chip.blue { background: var(--vypa-blue); color: #fff; }

/* ---------- verticals rail ---------- */
.h26-rail { display: flex; gap: 12px; overflow-x: auto; padding-block: 8px 20px; margin-top: 34px; scroll-snap-type: x mandatory; }
.h26-rcd { flex: 0 0 250px; scroll-snap-align: start; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--h-line); background: var(--h-card); display: flex; flex-direction: column; }
.h26-rcd .shot { aspect-ratio: 16/10; overflow: hidden; background: var(--h-soft); }
.h26-rcd .shot img { width: 100%; height: 100%; object-fit: cover; }
.h26-rcd .b { padding: 15px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.h26-rcd h4 { font-family: var(--h-display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.h26-rcd p { font-size: 12.5px; color: var(--h-muted); line-height: 1.5; }

/* ---------- close ---------- */
.h26-close { background: var(--vypa-blue); color: #fff; border-radius: 26px; padding: clamp(30px,5vw,54px);
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: space-between; }
.h26-close h2 { font-family: var(--h-display); font-weight: 900; font-size: clamp(27px,4.2vw,44px); letter-spacing: -.03em; line-height: 1; }

/* ---------- SEO detail ----------
   The copy the old homepage carried in the open stays, in the markup, where a
   crawler reads it in full. The reader sees five quiet rows and opens what they
   want. Accordion content is indexed normally under mobile-first indexing. */
.h26-seo { border-top: 1px solid var(--h-line); }
.h26-seolist { margin-top: 26px; border-top: 1px solid var(--h-line); }
.h26-seo details { border-bottom: 1px solid var(--h-line); }
.h26-seo summary { display: flex; align-items: center; gap: 14px; cursor: pointer; list-style: none;
  padding: 18px 2px; font-family: var(--h-display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(16px,2vw,20px); }
.h26-seo summary::-webkit-details-marker { display: none; }
.h26-seo summary::after { content: "+"; margin-left: auto; font-family: inherit; font-weight: 600; font-size: 21px; color: var(--h-muted); line-height: 1; }
.h26-seo details[open] summary::after { content: "\2212"; }
.h26-seo summary:hover { color: var(--vypa-blue); }
.h26-seo .ans { padding: 0 2px 20px; max-width: 74ch; color: var(--h-muted); font-size: 14.5px; line-height: 1.7; }
.h26-seo .ans a { color: var(--vypa-blue); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- side drawer + floating contact ----------
   Both are position:fixed, so they sit outside the header and cannot disturb
   main.js. They do not implement country or theme themselves — they forward the
   click to the header's own controls, so the site's existing logic still runs. */
/* Phone only. Above 768px the header still carries the country dropdown and the
   dark-mode toggle, so a second set would just be two switches for one setting.
   768px is the header's own collapse point in main.css — matched deliberately,
   so the drawer appears exactly as those controls fold away. */
.h26-sidetab { position: fixed; right: 0; top: 50%; transform: translateY(-50%);
  z-index: 995; display: flex; align-items: stretch; }
.h26-sidetab-handle { flex: 0 0 auto; width: 28px; border: 0; cursor: pointer; padding: 0;
  background: var(--vypa-blue); color: #fff; border-radius: 14px 0 0 14px;
  display: grid; place-items: center;
  box-shadow: -8px 0 22px rgb(0 66 255 / .38), -2px 0 6px rgb(11 15 26 / .20),
              inset 1px 0 0 rgb(255 255 255 / .22); }
.h26-sidetab-handle:hover { box-shadow: -10px 0 28px rgb(0 66 255 / .50),
  -2px 0 6px rgb(11 15 26 / .22), inset 1px 0 0 rgb(255 255 255 / .30); }
body.dark-mode .h26-sidetab-handle { box-shadow: -8px 0 24px rgb(0 66 255 / .55),
  inset 1px 0 0 rgb(255 255 255 / .28); }
.h26-sidetab-handle svg { width: 13px; height: 13px; transition: transform .28s ease; }
.h26-sidetab[data-open="true"] .h26-sidetab-handle svg { transform: rotate(180deg); }
.h26-sidedraw { width: 0; overflow: hidden; transition: width .28s ease; background: var(--h-card);
  border: 1px solid var(--h-line); border-right: 0; border-radius: 14px 0 0 14px;
  box-shadow: -10px 0 30px rgb(11 15 26 / .16); }
.h26-sidetab[data-open="true"] .h26-sidedraw { width: 212px; }
.h26-sidedraw-in { width: 212px; padding: 8px; }
.h26-side-lab { font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--h-muted); padding: 6px 10px 4px; }
.h26-side-row { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: transparent;
  color: var(--h-ink); font: inherit; font-size: 13.5px; font-weight: 600; text-align: left;
  padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.h26-side-row:hover { background: rgb(0 66 255 / .07); }
.h26-side-row img { width: 19px; height: 14px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; }
.h26-side-row svg { width: 16px; height: 16px; flex: 0 0 auto; }
.h26-side-group + .h26-side-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--h-line); }
@media (prefers-reduced-motion: reduce) { .h26-sidedraw, .h26-sidetab-handle svg { transition: none; } }
@media (max-width: 620px) { .h26-sidetab { top: 42%; } }


/* ==========================================================================
   2026 header
   ==========================================================================
   The bar becomes logo-left / actions-right. The country flag and the dark-mode
   switch leave it entirely and live in the side drawer, which is why the drawer
   is no longer phone-only — it is now the only home for both.

   Both controls are hidden VISUALLY, not removed: #darkModeToggle and the
   .location-menu items stay in the DOM so js/main.js and js/locale.js keep their
   bindings, and js/home-2026.js drives the real controls rather than a copy.
   Scoped to body.h26-page so no other page is touched.
   ========================================================================== */

/* The country pill sits in the bar beside the mark. The theme switch is pinned to
   the viewport edge instead - it is page chrome, not a menu item - which is why it
   is positioned against the header rather than placed in the row. */
/* relative, not static: .location-menu is absolutely positioned against this,
   so making it static sent the menu to the header's edge instead of under the
   button. It only needed to stop being pinned, not stop being an anchor. */
body.h26-page .location-dropdown {
  position: relative !important; margin: 0 !important; order: 2;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
}
body.h26-page .location-menu {
  top: calc(100% + 8px) !important; left: 0 !important; right: auto !important;
  border-radius: 14px;
}
body.h26-page .location-btn {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid var(--h-line); background: transparent; color: var(--h-ink);
  border-radius: var(--radius-pill, 999px); padding: 7px 13px;
  font-size: 13px; font-weight: 600;
}
body.h26-page .location-btn:hover { background: rgb(0 66 255 / .07); }
body.h26-page .location-btn .flag-icon { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; }

body.h26-page .toggle-switch {
  position: absolute !important;
  right: 14px; top: 26px; left: auto !important; bottom: auto !important;
  margin: 0 !important; z-index: 1400;
}
@media (max-width: 768px) {
  /* The country capsule returns to the bar, beside the mark, as it was before -
     flag, name and caret. It shrinks rather than disappears: at 320px the row is
     logo + capsule + Log In, so each gives up a few pixels instead of one of
     them leaving. */
  body.h26-page .location-dropdown { display: block !important; }
  body.h26-page .location-btn { padding: 6px 10px; font-size: 13px; gap: 6px; }
  body.h26-page .location-btn .flag-icon { width: 17px; height: 12px; }
  body.h26-page .toggle-switch { right: 12px; top: 18px; }
}
@media (max-width: 420px) {
  body.h26-page .brand, body.h26-page .logo { width: 78px !important; }
  body.h26-page .location-btn { padding: 5px 8px; font-size: 12px; gap: 5px; }
  body.h26-page .location-btn .dropdown-icon { font-size: 8px; }
  body.h26-page .btn-outline2-mobile { padding: 7px 12px !important; font-size: 12.5px !important; }
  body.h26-page .navbar { gap: 7px; padding-inline: 12px !important; }
}

body.h26-page .navbar {
  width: auto; max-width: 1200px;
  padding: 14px 20px 12px;
  gap: 16px;
}
/* The stock header pads 40px a side; at phone width that leaves the bar wider
   than the space it sits in. */
@media (max-width: 768px) { body.h26-page > header { padding-inline: 0 !important; } }
body.h26-page .nav-left { gap: 0; }

/* The stock rule centres the mark with position:absolute + left:41%. Here it
   sits at the start of the row like any other flex child. */
body.h26-page .logo {
  position: static !important;
  left: auto !important; top: auto !important;
  transform: none !important;
  width: 112px !important; min-width: 0 !important;
  height: 34px; margin: 0; z-index: auto;
}
@media (max-width: 768px) {
  body.h26-page .logo { width: 96px !important; height: 28px; }
  body.h26-page .navbar { padding: 12px 16px 10px; }
}

/* Actions: Get started is the one filled control in the bar. */
body.h26-page .navbar .btn-filled {
  background: var(--vypa-blue); color: #fff;
  border-radius: var(--radius-pill, 999px);
  padding: 11px 20px; font-weight: 700; font-size: 14px; border: 0;
}
body.h26-page .navbar .btn-outline {
  border-radius: var(--radius-pill, 999px); padding: 10px 18px; font-size: 14px; font-weight: 600;
}


/* ---------- blog ticker ----------
   Pill edges from the new design, the original golden badge from the old site.
   The bar keeps its navy so white headline text stays legible on it. */
body.h26-page .blog-ticker-bar {
  border-radius: var(--radius-pill, 999px);
  max-width: 1200px; margin: 0 auto 10px; padding: 0 14px 0 8px;
  height: 42px; border-top: 0;
  background: rgb(0 20 60 / .94);
  box-shadow: 0 6px 18px rgb(11 15 26 / .16);
}
body.h26-page .ticker-badge {
  background: var(--sun); color: #3a2d00;
  font-weight: 800; letter-spacing: .09em; padding: 5px 12px;
}
body.h26-page .ticker-link { color: rgb(255 255 255 / .92); font-weight: 500; }
@media (max-width: 768px) {
  body.h26-page .blog-ticker-bar { margin-inline: 12px; padding: 0 10px 0 6px; height: 38px; }
}


/* ---------- fixed-header clearance ----------
   body > header is position:fixed, so the page starts underneath it. The exact
   height moves with the ticker and the breakpoint, so js/home-2026.js measures
   the header and writes --h26-top. This is the pre-paint fallback so nothing
   jumps before that runs. */
body.h26-page .h26 { padding-top: var(--h26-top, 124px); }
@media (max-width: 768px) { body.h26-page .h26 { padding-top: var(--h26-top, 112px); } }

/* ---------- mobile Log In ----------
   The stock rule pins this absolutely at coordinates tuned for the old centred
   logo, where it now lands on top of the ticker headline. Re-pin it into the
   nav row, clear of the theme switch at the edge. */
@media (max-width: 768px) {
  body.h26-page .btn-outline2-mobile {
    top: 12px !important; right: 54px !important;
    left: auto !important; bottom: auto !important;
    transform: none !important;
    padding: 7px 12px !important; font-size: 13px !important;
    border-radius: var(--radius-pill, 999px) !important;
  }
  body.h26-page .login-dropdown-menu { top: 52px !important; right: 12px !important; left: auto !important; }
}


/* ---------- phone navbar row ----------
   .menu-toggle and .nav-left are both .navbar children, so space-between pinned
   the hamburger left and threw the logo to the right edge - directly under the
   absolutely-positioned Log In. Pack the row from the start instead. */
@media (max-width: 768px) {
  body.h26-page .navbar { justify-content: flex-start; gap: 10px; }
  body.h26-page .nav-left { margin-right: auto; }
}
/* With the hamburger gone, Log In is the bar's only control and the only route
   to the three portals, so it stays at every width. */


/* ==========================================================================
   Phone bar, settled
   ==========================================================================
   Hamburger and the slide toggle are both gone: the toggle lives in the side
   drawer, and with the bar reduced to logo + actions there is nothing left for
   a hamburger to reveal. Removing it would leave the phone with no navigation
   at all, so the nav links themselves become a scrollable row underneath.
   Both controls are hidden, not deleted — #darkModeToggle stays in the DOM so
   main.js keeps its binding and the drawer can still drive it.
   ========================================================================== */
body.h26-page .menu-toggle,
body.h26-page .hamburger,
body.h26-page .mobile-nav { display: none !important; }

@media (max-width: 768px) {
  body.h26-page .navbar { flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
  body.h26-page .nav-left { margin-right: 0; }
  /* It is a sibling of .navbar inside <header>, so position:static gives it a
     full-width row of its own above the logo. It stays pinned - just at
     coordinates that make sense now the slide toggle is gone. */
  body.h26-page .btn-outline2-mobile {
    top: 12px !important; right: 12px !important;
    left: auto !important; bottom: auto !important;
    width: auto !important; transform: none !important;
  }

  /* Navigation lives behind the Log In dropdown and the footer on phones; the
     bar itself stays down to the mark and one control. */
  body.h26-page .navbar nav { display: none !important; }
  body.h26-page .navbar .buttons .btn-filled { display: none !important; }
  body.h26-page .navbar nav .nav-drop-caret,
  body.h26-page .navbar nav .nav-drop-menu { display: none !important; }
}

/* ---------- ticker width ----------
   The stock rule is width:100%; adding side margins made it 100% + 24px, which
   is why it ran off the right edge. Let the margins take the width instead. */
body.h26-page .blog-ticker-bar { width: auto !important; max-width: 1200px; }
@media (max-width: 768px) {
  body.h26-page .blog-ticker-bar { margin: 0 12px 10px !important; }
}


/* ---------- consent banner ----------
   The stock card is a tall centred block that lands over the hero: on a phone the
   first thing a visitor sees is a wall of consent and none of the product. Same
   copy, same buttons, same logic - laid out as a slim bar pinned to the bottom. */
body.h26-page .vypa-consent__card {
  max-width: 1200px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 14px 18px; border-radius: 18px;
}
body.h26-page .vypa-consent__text { font-size: .8rem; line-height: 1.5; }
body.h26-page .vypa-consent__actions { margin-left: auto; }
@media (max-width: 768px) {
  body.h26-page .vypa-consent__card { padding: 12px 14px; border-radius: 16px; gap: 10px; }
  body.h26-page .vypa-consent__text { font-size: .76rem; }
  body.h26-page .vypa-consent__actions { margin-left: 0; width: 100%; }
  body.h26-page .vypa-consent__actions .vypa-consent__btn { flex: 1 1 0; justify-content: center; }
}

/* ---------- promo card ----------
   js/promo.js fires its hardware card on load, over the hero CTAs. Hold it until
   the visitor has scrolled past the first screen, so the homepage gets to make
   its case before the upsell arrives. */
/* js/promo.js builds <aside class="vp-promo">. My first attempt guessed at three
   other class names, so the delay never applied and the card kept landing on the
   hero. This is the real one. */
body.h26-page .vp-promo { opacity: 0; visibility: hidden; transition: opacity .35s ease; }
body.h26-page.h26-scrolled .vp-promo { opacity: 1; visibility: visible; }


/* ---------- Log In pill (phones) ----------
   The old site's control, kept whole so its dropdown still lists the three
   portals. Pinned where the slide toggle used to sit. */
@media (max-width: 768px) {
  body.h26-page .btn-outline2-mobile {
    display: inline-flex !important;
    background: transparent !important;
    color: var(--ink) !important;
    border: 2px solid var(--ink) !important;
    border-radius: var(--radius-pill, 999px) !important;
    padding: 9px 16px !important;
    font-size: 14px !important; font-weight: 700 !important;
    gap: 6px !important;
  }
  body.h26-page .btn-outline2-mobile .login-arrow { color: var(--ink) !important; }
  body.dark-mode.h26-page .btn-outline2-mobile {
    color: #fff !important; border-color: #fff !important;
  }
  body.dark-mode.h26-page .btn-outline2-mobile .login-arrow { color: #fff !important; }
  body.h26-page .navbar { flex-wrap: nowrap; padding: 14px 14px 10px; }
}


/* ---------- desktop bar ----------
   .navbar holds .nav-left, nav and .buttons. Packing from the start and giving
   nav `margin-left:auto` throws the links and the buttons together on the right,
   leaving the mark and the country pill alone on the left. */
@media (min-width: 769px) {
  body.h26-page .navbar { justify-content: flex-start; gap: 16px; }
  body.h26-page .nav-left { margin-right: 0; gap: 14px; }

  body.h26-page .navbar nav {
    margin-left: auto; display: flex; align-items: center; gap: 22px;
  }
  body.h26-page .navbar nav > a,
  body.h26-page .navbar nav .nav-drop > a {
    font-size: 14.5px !important; font-weight: 600 !important;
    color: var(--h-ink) !important;   /* the stock inline green no longer matches the palette */
  }
  body.h26-page .navbar nav > a:hover,
  body.h26-page .navbar nav .nav-drop > a:hover { color: var(--vypa-blue) !important; }

  body.h26-page .navbar .buttons { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
  body.h26-page .navbar .buttons .btn-outline { font-size: 14px; padding: 9px 16px; }
  body.h26-page .navbar .buttons .btn-filled { font-size: 14px; padding: 10px 20px; }
}

/* ---------- hero slider ----------
   The panel is a screen, so it plays more than one thing: the claim, then the
   reel. Slides are equal-width children of a translated track rather than
   absolutely positioned, so the tallest one sets the height and nothing jumps. */
.h26-slider { position: relative; overflow: hidden; }
.h26-slides { display: flex; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.h26-slide { flex: 0 0 100%; min-width: 0; }
.h26-slide--video { position: relative; border-radius: 10px; overflow: hidden; min-height: 300px; display: flex; }
.h26-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h26-slide-over { position: relative; z-index: 1; align-self: flex-end; padding: 22px;
  width: 100%; background: linear-gradient(to top, rgb(5 10 30 / .82), rgb(5 10 30 / 0)); }
.h26-slide-over h2 { font-size: clamp(26px, 4.4vw, 54px); }
.h26-dots { display: flex; gap: 7px; margin-top: 18px; }
.h26-dots button { width: 26px; height: 5px; border: 0; padding: 0; cursor: pointer;
  border-radius: 999px; background: rgb(255 255 255 / .34); transition: background .25s ease; }
.h26-dots button.is-on { background: var(--lemon); }
.h26-dots button:hover { background: rgb(255 255 255 / .6); }
@media (prefers-reduced-motion: reduce) { .h26-slides { transition: none; } }

/* Smaller panel: the hero no longer has to carry the whole message alone. */
.h26-screen { padding: clamp(22px, 4vw, 48px) clamp(16px, 3.4vw, 44px) !important; }
.h26-screen h1 { font-size: clamp(29px, 6.4vw, 78px) !important; }
.h26-slide .h26-sub { margin-top: 14px; }
.h26-slide .h26-acts { margin-top: 20px; }
.h26-stats { margin-top: clamp(22px, 3vw, 36px) !important; }

/* ---------- hero: the panel is the slide ----------
   The track carries whole .h26-tv panels. Padding plus equal negative margin
   gives the glow somewhere to fall, since a scroller clips its own overflow. */
/* The track must clip to slide, so the panel's 80px glow needs room inside the
   clip or it is sliced into a hard rectangle. Padding gives it that room;
   matching negative margins keep the layout where it was. */
.h26-herowrap { position: relative; overflow: hidden; padding: 40px 0 96px; margin: -40px 0 -78px; }
.h26-dots { margin-top: 0 !important; }
.h26-heroslides { display: flex; transition: transform .6s cubic-bezier(.4,0,.2,1); }
.h26-heroslide { flex: 0 0 100%; min-width: 0; padding-inline: 2px; }
@media (prefers-reduced-motion: reduce) { .h26-heroslides { transition: none; } }

.h26-screen--video { padding: 0 !important; position: relative; min-height: clamp(300px, 46vw, 520px); display: flex; }
.h26-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.h26-slide-over { position: relative; z-index: 1; align-self: flex-end; width: 100%;
  padding: clamp(20px, 3.4vw, 44px);
  background: linear-gradient(to top, rgb(4 9 26 / .86), rgb(4 9 26 / .15) 70%, rgb(4 9 26 / 0)); }
.h26-slide-over h2 { font-size: clamp(26px, 4.6vw, 58px); }

.h26-dots { display: flex; gap: 7px; margin-top: 14px; justify-content: center; }
.h26-dots button { width: 28px; height: 5px; border: 0; padding: 0; cursor: pointer;
  border-radius: 999px; background: var(--h-line); transition: background .25s ease; }
.h26-dots button.is-on { background: var(--vypa-blue); }

/* ---------- fewer lines in the panel ----------
   The stats were a full 1px grid: five rules carving the panel into boxes. One
   hairline above the row is enough; spacing does the rest. */
.h26-stats {
  display: grid !important; grid-template-columns: repeat(4, 1fr) !important;
  gap: 18px 28px !important; background: none !important;
  border-top: 1px solid rgb(255 255 255 / .22) !important;
  padding-top: clamp(18px, 2.4vw, 28px) !important;
  margin-top: clamp(22px, 3vw, 34px) !important;
}
@media (max-width: 700px) { .h26-stats { grid-template-columns: repeat(2, 1fr) !important; } }
.h26-stat { background: none !important; padding: 0 !important; }
body.dark-mode .h26-stat { background: none !important; }

/* ---------- drawer: phones only again ----------
   On desktop the bar carries the country pill and the corner carries the theme
   switch, so the drawer has nothing left to hold. */
@media (min-width: 769px) { .h26-sidetab { display: none !important; } }

/* ---------- desktop theme switch ----------
   Pinned to the page's top-right corner, outside the menu row. */
@media (min-width: 769px) {
  body.h26-page .toggle-switch {
    display: inline-block !important;
    position: fixed !important;
    top: 18px !important; right: 16px !important;
    left: auto !important; bottom: auto !important;
    z-index: 1500; margin: 0 !important;
  }
  body.h26-page .navbar { padding-right: 58px; }
}

/* ---------- final pass ---------- */

/* 1. The login caret is blue, as it always was on the old site. */
body.h26-page .btn-outline2-mobile .login-arrow,
body.h26-page .desktop-login-btn .desktop-login-arrow,
body.h26-page .desktop-login-btn i { color: var(--vypa-blue) !important; }
body.dark-mode.h26-page .btn-outline2-mobile .login-arrow,
body.dark-mode.h26-page .desktop-login-btn .desktop-login-arrow,
body.dark-mode.h26-page .desktop-login-btn i { color: var(--vypa-blue) !important; }

/* 2. "Pick your side" is phone-only. On desktop the bar already carries
      Signage, Host and Advertise, so the strip repeats what is above it. */
@media (min-width: 769px) { .h26-band { display: none !important; } }

/* 3. A little air above the phone bar - the mark and the button were sitting
      hard against the top edge. */
@media (max-width: 768px) {
  body.h26-page .navbar { padding-top: 20px !important; }
  body.h26-page .btn-outline2-mobile { top: 20px !important; }
  body.h26-page .login-dropdown-menu { top: 62px !important; }
}

/* 4. "See it running." sits in the lower third, so it does not need hero scale. */
.h26-slide-over h2 { font-size: clamp(22px, 3vw, 40px) !important; }
.h26-slide-over .h26-sub { font-size: clamp(14px, 1.3vw, 16px); margin-top: 10px; }
.h26-slide-over .h26-acts { margin-top: 16px; }

/* The "now on the Samsung Smart TV app store" flag from the old hero. */
.h26-newsflag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
  border-radius: var(--radius-pill, 999px); padding: 6px 14px 6px 6px;
  background: rgb(255 255 255 / .14); color: #fff !important;
  font-size: 12.5px; font-weight: 600; line-height: 1; }
.h26-newsflag span { background: var(--lemon); color: var(--lemon-ink);
  border-radius: var(--radius-pill, 999px); padding: 4px 9px; font-size: 10px;
  font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.h26-newsflag:hover { background: rgb(255 255 255 / .22); }

/* ==========================================================================
   Restored sections — scale corrections
   ========================================================================== */

/* Client logos were 100px tall, which made six brands wider than the viewport
   and left a scrollbar across the row. Half that reads as a logo wall. */
body.h26-page .partner-row {
  gap: clamp(24px, 4vw, 52px) !important;
  padding: 10px 20px 18px !important;
  scrollbar-width: none;
}
body.h26-page .partner-row::-webkit-scrollbar { display: none; }
body.h26-page .partner-row img {
  height: clamp(38px, 5vw, 56px) !important;
  max-width: 130px !important;
  opacity: .85; transition: opacity .25s ease, transform .25s ease;
}
body.h26-page .partner-row img:hover { opacity: 1; transform: translateY(-2px); }
body.h26-page .partner-stats h2 { font-size: clamp(22px, 3vw, 34px); }

/* The newsletter band padded only its left edge, so the copy hugged one side
   while the embedded form sat in a wide empty half. Balanced, capped and
   stacking, with a reserved slot so a blocked embed does not read as a hole. */
body.h26-page .subscribe-hero {
  padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 48px) !important;
  gap: clamp(24px, 4vw, 48px) !important;
  flex-wrap: wrap;
  border-radius: 22px;
}
body.h26-page .subscribe-content { flex: 1 1 360px; min-width: 0; }
body.h26-page .subscribe-hero h2 {
  font-size: clamp(24px, 3.4vw, 40px) !important; line-height: 1.1; margin: 0 0 10px;
}
body.h26-page .subscribe-hero p {
  font-size: 15px; line-height: 1.6; max-width: 56ch; margin: 0;
}
body.h26-page .subscribe-hero .ml-embedded {
  flex: 1 1 320px; min-width: 0; min-height: 56px; align-self: center;
}
@media (max-width: 768px) {
  body.h26-page .subscribe-hero { flex-direction: column; align-items: stretch; }
}

/* ---------- drawer tab height ----------
   The handle had no height of its own, so align-items:stretch sized it to the
   collapsed drawer's content - a ~300px blue slab instead of a tab. */
.h26-sidetab { align-items: center !important; }
.h26-sidetab-handle { height: 72px; align-self: center; }
.h26-sidedraw { max-height: 78vh; overflow-y: auto; }

/* ---------- equal-height hero slides ----------
   The video panel was shorter than the type panel, so moving to slide 2 left a
   gap the height of the difference. Every panel now fills the track. */
.h26-heroslide { display: flex; }
.h26-heroslide > .h26-tv { flex: 1 1 auto; display: flex; flex-direction: column; }
.h26-heroslide > .h26-tv > .h26-screen { flex: 1 1 auto; }
.h26-screen--video { min-height: 0 !important; }

/* ---------- video slide on narrow screens ----------
   The panel is tall and narrow on a phone while the clip is 16:9, so `cover`
   had to crop hard to fill it - reading as a heavy zoom. `contain` shows the
   whole frame against the panel's own dark ground instead. */
@media (max-width: 768px) {
  /* `contain` showed the whole frame but left a tall black void beneath it,
     which looked worse than the crop. Back to filling the panel. */
  .h26-hero-video { object-fit: cover; object-position: center; }
  .h26-slide-over { padding: 16px 16px 18px; }
  .h26-slide-over h2 { font-size: clamp(20px, 6vw, 28px) !important; }
  .h26-slide-over .h26-sub { font-size: 13px; margin-top: 6px; }
  .h26-slide-over .h26-acts { margin-top: 12px; }
  .h26-slide-over .h26-btn { padding: 10px 18px; font-size: 13px; }
}

/* ---------- drawer tab shadow ----------
   The blue glow read as a halo against the page. A plain black shadow just
   lifts the tab off the edge. */
.h26-sidetab-handle,
.h26-sidetab-handle:hover,
body.dark-mode .h26-sidetab-handle {
  box-shadow: -4px 0 14px rgb(0 0 0 / .28), -1px 0 3px rgb(0 0 0 / .20) !important;
}
.h26-sidetab-handle:hover { box-shadow: -5px 0 18px rgb(0 0 0 / .36), -1px 0 3px rgb(0 0 0 / .24) !important; }

/* ---------- hero glow, un-clipped ----------
   The slider clips to slide, and the wrap had vertical padding only — so the
   panel's glow ran into the left and right walls of the clip and stopped in a
   straight line. Two changes: give the wrap side room (matched by negative
   margin, so layout is unchanged), and pull the shadow in with a negative
   spread so it falls mostly downward instead of sideways. */
.h26-herowrap {
  padding: 40px 20px 96px !important;
  margin: -40px -20px -78px !important;
}
.h26 .h26-tv { box-shadow: 0 30px 56px -22px rgb(0 40 150 / .45), inset 0 0 0 1px var(--h-bezel-edge); }
body.dark-mode .h26 .h26-tv {
  box-shadow: 0 34px 64px -24px rgb(22 56 170 / .55), inset 0 0 0 1px var(--h-bezel-edge);
}

/* ---------- newsletter band ---------- */
body.h26-page .subscribe-slot { flex: 1 1 320px; min-width: 0; align-self: center; }
body.h26-page .subscribe-fallback[hidden] { display: none; }
body.h26-page .subscribe-points {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
body.h26-page .subscribe-points li {
  position: relative; padding-left: 24px; font-size: 14.5px; line-height: 1.5; color: var(--h-ink);
}
body.h26-page .subscribe-points li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--vypa-blue);
}
/* No embed and no fallback would leave a tall empty half, so the band sizes to
   its copy instead of reserving space for something that never arrived. */
body.h26-page .subscribe-hero .ml-embedded { min-height: 0; }


/* ---------- chooser band, narrow widths ----------
   Three fixed-content buttons in a 3-column grid could not shrink below their
   text, so the third ran past the band's edge. minmax(0,1fr) lets them. */
@media (max-width: 760px) {
  .h26-picks { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; }
  .h26-picks .h26-btn {
    min-width: 0; padding: 11px 6px !important;
    font-size: clamp(11px, 3.1vw, 12.5px) !important;
    overflow: hidden; text-overflow: ellipsis;
  }
  .h26-band-in { padding: 14px 12px !important; }
}

/* ==========================================================================
   Hero scale
   ==========================================================================
   The panel was taking the whole first screen, worst of all on a phone. Two
   changes: the stats row moved out of the panel onto the page, and the panel
   itself is capped so the hero - flag, headline, buttons, stats - lands in one
   view instead of forcing a scroll before anything is read. */

.h26 .h26-screen { padding: clamp(20px, 3vw, 40px) clamp(16px, 3vw, 40px) !important; }
.h26 .h26-screen h1 { font-size: clamp(27px, 5vw, 60px) !important; }
.h26 .h26-slide .h26-sub { margin-top: 12px; font-size: clamp(14px, 1.3vw, 17px); }
.h26 .h26-slide .h26-acts { margin-top: 18px; }
.h26 .h26-newsflag { margin-bottom: 12px; font-size: 12px; }
.h26 .h26-screen--video { min-height: clamp(220px, 30vw, 380px) !important; }

/* Stats now sit on the page, so they take page ink rather than panel white. */
.h26-stats--out {
  border-top: 1px solid var(--h-line) !important;
  color: var(--h-ink);
  margin: clamp(20px, 2.6vw, 30px) 0 0 !important;
  padding-top: clamp(16px, 2vw, 24px) !important;
  gap: 16px 24px !important;
}
.h26-stats--out .h26-stat b { color: var(--vypa-blue); font-size: clamp(22px, 2.8vw, 34px); }
.h26-stats--out .h26-stat > span { color: var(--h-muted); opacity: 1; }
body.dark-mode .h26-stats--out .h26-stat b { color: var(--lemon); }

@media (max-width: 768px) {
  .h26 .h26-screen h1 { font-size: clamp(25px, 7.4vw, 36px) !important; }
  .h26 .h26-slide .h26-sub { font-size: 13.5px; }
  .h26 .h26-slide .h26-acts { gap: 8px; }
  .h26 .h26-slide .h26-acts .h26-btn { padding: 11px 18px; font-size: 13px; }
  .h26-stats--out { grid-template-columns: repeat(2, 1fr) !important; gap: 14px 16px !important; }
  .h26-herowrap { padding: 24px 20px 56px !important; margin: -24px -20px -44px !important; }
}

/* ---------- slider bleed ----------
   Side padding on the wrap gave the glow room but also widened the clip, so the
   next panel showed at the edge. The room belongs inside each slide: the clip
   then lands exactly on the slide boundary and nothing peeks. */
.h26-herowrap { padding-inline: 0 !important; margin-inline: 0 !important; }
.h26-heroslide { padding-inline: clamp(10px, 1.4vw, 18px) !important; }

/* ==========================================================================
   SITE DESIGN LAYER
   ==========================================================================
   The chrome went site-wide in the previous pass, but every page below the
   header still carried its own typography and its own buttons — the audit
   found eleven different button class systems across 43 pages. This layer
   unifies the shared primitives so the whole site reads as one product,
   without rewriting a single page's markup.

   It only changes type, colour, radius and button treatment. It deliberately
   does NOT touch layout — no display, grid, flex or positioning — because
   those are tuned per page and changing them blind would break them.
   ========================================================================== */

/* ---- display type ---- */
body.h26-page h1,
body.h26-page h2,
body.h26-page .lp-h1,
body.h26-page .lp-h2,
body.h26-page .hero-title,
body.h26-page .section-title,
body.h26-page .testimonial-title {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.04;
  text-wrap: balance;
}
body.h26-page h3,
body.h26-page h4 {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ---- one button system ----
   Every solid control becomes the blue pill, every outlined one the ink pill.
   Listed explicitly rather than with a wildcard so nothing unexpected is
   caught. :not() guards the homepage's own buttons, which are already right. */
body.h26-page .btn-filled,
body.h26-page .cta-btn,
body.h26-page .cta-button,
body.h26-page .cmp-btn-solid,
body.h26-page .ooh-btn-solid,
body.h26-page .btn-primary,
body.h26-page .shop-buy,
body.h26-page .hs-cta,
body.h26-page .industry-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--vypa-blue); color: #fff;
  border: 0; border-radius: var(--radius-pill, 999px);
  padding: 13px 26px; font-weight: 700; font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
body.h26-page .btn-filled:hover,
body.h26-page .cta-btn:hover,
body.h26-page .cta-button:hover,
body.h26-page .btn-primary:hover,
body.h26-page .shop-buy:hover,
body.h26-page .hs-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgb(0 66 255 / .26);
}

body.h26-page .btn-outline,
body.h26-page .cmp-btn-ghost,
body.h26-page .ooh-btn:not(.ooh-btn-solid),
body.h26-page .lp-btn-ghost,
body.h26-page .cta-button.secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; color: var(--h-ink);
  border: 1.5px solid var(--h-line);
  border-radius: var(--radius-pill, 999px);
  padding: 12px 24px; font-weight: 600; font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
body.h26-page .btn-outline:hover,
body.h26-page .cmp-btn-ghost:hover,
body.h26-page .lp-btn-ghost:hover {
  background: rgb(0 66 255 / .06); border-color: var(--vypa-blue); color: var(--vypa-blue);
}

/* The nav keeps its own sizing — it sits in a tighter bar. */
body.h26-page .navbar .btn-filled { padding: 10px 20px; font-size: 14px; }
body.h26-page .navbar .btn-outline { padding: 9px 18px; font-size: 14px; }

/* ---- shared radius ---- */
body.h26-page .feature-card,
body.h26-page .industry-card,
body.h26-page .testimonial-card,
body.h26-page .stat-card,
body.h26-page .lp-card,
body.h26-page .cmp-card,
body.h26-page .price-card { border-radius: 18px; }

/* ---- links ---- */
body.h26-page .learn-more-link { font-weight: 700; color: var(--vypa-blue); }

/* The video panel keeps a dark ground, so any part the clip does not cover
   reads as a screen that is simply off rather than as a gap. */
.h26-screen--video { background: #05080f !important; }
.h26-hero-video { inset: 0; width: 100% !important; height: 100% !important; }
/* Drag feel: the track follows the finger, so no text selection mid-swipe. */
.h26-herowrap { touch-action: pan-y; }
.h26-heroslides { user-select: none; -webkit-user-select: none; }
.h26-heroslides.is-dragging { transition: none !important; cursor: grabbing; }

/* ---------- navbar fallback ----------
   advertise-demo, contact, demo and host-demo were built with only the desktop
   button group - no .btn-outline2-mobile. With the nav links and country pill
   folded away on phones that left a bar holding nothing but the logo. Where the
   mobile pill is absent, the desktop Log In stands in. */
@media (max-width: 768px) {
  body.h26-page header:not(:has(.btn-outline2-mobile)) .buttons {
    display: flex !important; align-items: center; gap: 8px;
    position: absolute !important; top: 12px; right: 12px; z-index: 1400;
  }
  body.h26-page header:not(:has(.btn-outline2-mobile)) .desktop-login-wrapper { display: block !important; }
  body.h26-page header:not(:has(.btn-outline2-mobile)) .desktop-login-btn {
    display: inline-flex !important; align-items: center; gap: 6px;
    background: transparent !important; color: var(--ink) !important;
    border: 2px solid var(--ink) !important;
    border-radius: var(--radius-pill, 999px) !important;
    padding: 8px 15px !important; font-size: 13.5px !important; font-weight: 700 !important;
  }
  body.dark-mode.h26-page header:not(:has(.btn-outline2-mobile)) .desktop-login-btn {
    color: #fff !important; border-color: #fff !important;
  }
  body.h26-page header:not(:has(.btn-outline2-mobile)) .buttons .btn-filled { display: none !important; }
}

/* ---------- store badges in the app section ----------
   The same markup the footer uses, so the App Store badge keeps its .is-soon
   state - a dimmed span, not a link - until that app actually ships. */
/* No label: the badges already read "Download on the Google Play". */
.h26-apps { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--h-line); }
.h26-apps .footer-apps-badges { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.h26-apps .app-badge { margin: 0; }
@media (max-width: 900px) { .h26-apps .footer-apps-badges { justify-content: flex-start; } }

/* ---------- video overlay ----------
   As a flex child it only sat near the bottom, leaving a band of video below
   the gradient so the whole thing read as a floating strip. Pinned to the
   panel's own edges, it ends exactly where the screen ends. */
.h26-screen--video { display: block !important; position: relative; }
.h26-slide-over {
  position: absolute !important;
  left: 0; right: 0; bottom: 0; width: auto !important;
  align-self: auto !important;
  background: linear-gradient(to top, rgb(4 9 26 / .92) 0%, rgb(4 9 26 / .72) 42%, rgb(4 9 26 / 0) 100%);
  padding: clamp(28px, 5vw, 64px) clamp(18px, 3.4vw, 44px) clamp(18px, 2.6vw, 34px);
}

/* ==========================================================================
   Blog ticker — self-contained
   ==========================================================================
   The ticker markup was added to 25 pages, but its styles live in blog.css and
   24 of those pages never loaded it, so it rendered as raw unstyled HTML. These
   are blog.css's own ticker rules, copied here so the strip carries its styling
   with it instead of depending on a stylesheet the page may not have. Loading
   all of blog.css everywhere would drag blog-card and blog-grid rules onto
   pages that have no business with them. */
.blog-ticker-bar {
  display: none; align-items: center; gap: 12px; width: 100%;
  padding: 0 40px; height: 38px;
  background: rgb(0 20 60 / .92);
  border-top: 1px solid rgb(255 255 255 / .08);
  overflow: hidden;
}
body.has-ticker .blog-ticker-bar { display: flex; }
.ticker-badge {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
  background: var(--vypa-blue); color: #fff;
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.ticker-link {
  flex: 1; min-width: 0; font-size: .82rem; font-weight: 500;
  color: rgb(255 255 255 / .9); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s;
}
.ticker-link:hover { color: #60a5fa; }
.ticker-dots { display: flex; gap: 4px; flex-shrink: 0; }
.ticker-chevron { flex-shrink: 0; font-size: .7rem; color: rgb(255 255 255 / .4); }
@media (max-width: 768px) {
  .blog-ticker-bar { padding: 0 16px; gap: 8px; }
  .ticker-dots { display: none; }
}

/* ---------- video caption, final ----------
   No separate box to drift. The scrim is a pseudo-element on the panel itself,
   so it is the panel's own bottom edge by definition, and the text sits on top
   of it pinned to the bottom-left corner. */
.h26-screen--video { position: relative !important; }
.h26-screen--video::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 62%; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, rgb(3 7 20 / .94) 0%, rgb(3 7 20 / .70) 38%, rgb(3 7 20 / 0) 100%);
}
.h26-slide-over {
  position: absolute !important; z-index: 2;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  top: auto !important; width: auto !important;
  background: none !important;
  padding: 0 clamp(18px, 3vw, 40px) clamp(18px, 2.6vw, 32px) !important;
}
.h26-slide-over h2,
.h26-slide-over .h26-sub { text-shadow: 0 2px 14px rgb(0 0 0 / .55); }

/* ---------- store badges: invert against the page ----------
   They were the same tone as whatever sat behind them - white on a white page,
   near-black on a dark one - so they disappeared in both themes. Inverting
   makes them read as a control in either. */
body.h26-page .app-badge {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: #fff !important;
}
body.h26-page .app-badge .app-badge-kicker { color: rgb(255 255 255 / .70) !important; }
body.h26-page .app-badge .app-badge-name { color: #fff !important; }
body.h26-page .app-badge-glyph--apple { fill: #fff; color: #fff; }
body.h26-page .app-badge.is-soon {
  background: rgb(11 15 26 / .55) !important;
  border-color: rgb(11 15 26 / .18) !important;
  color: rgb(255 255 255 / .82) !important;
}
body.h26-page .app-badge.is-soon .app-badge-kicker { color: rgb(255 255 255 / .62) !important; }

body.dark-mode.h26-page .app-badge {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #0B0F1A !important;
}
body.dark-mode.h26-page .app-badge .app-badge-kicker { color: #5d667a !important; }
body.dark-mode.h26-page .app-badge .app-badge-name { color: #0B0F1A !important; }
body.dark-mode.h26-page .app-badge-glyph--apple { fill: #0B0F1A; color: #0B0F1A; }
body.dark-mode.h26-page .app-badge.is-soon {
  background: rgb(255 255 255 / .62) !important;
  border-color: rgb(255 255 255 / .24) !important;
  color: #3f4654 !important;
}
body.dark-mode.h26-page .app-badge.is-soon .app-badge-kicker { color: #6b7384 !important; }

/* ---------- hero tablet ----------
   Slide one's right half was empty blue. The tablet fills it and shows the
   product instead of describing it. Absolute, so it cannot push the copy
   around or change the panel height - the slide keeps the size it had. */
.h26-heroslide:first-child .h26-screen { position: relative; overflow: hidden; }
.h26-hero-tab {
  position: absolute;
  right: -3%;
  bottom: -8%;
  width: clamp(300px, 40%, 580px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 26px 50px rgb(0 10 60 / .42));
}
.h26-heroslide:first-child .h26-newsflag,
.h26-heroslide:first-child .h26-disp,
.h26-heroslide:first-child .h26-sub,
.h26-heroslide:first-child .h26-acts { position: relative; z-index: 1; }
.h26-heroslide:first-child .h26-disp,
.h26-heroslide:first-child .h26-sub,
.h26-heroslide:first-child .h26-acts { max-width: 58%; }
/* Below 1024px the copy takes the full width and the tablet shrinks into the
   bottom-right corner - the dead space beside the buttons - instead of sitting
   behind the headline at full size. */
@media (max-width: 1024px) {
  .h26-heroslide:first-child .h26-disp,
  .h26-heroslide:first-child .h26-sub,
  .h26-heroslide:first-child .h26-acts { max-width: 74%; }
  .h26-hero-tab { width: clamp(120px, 26%, 220px); right: -3%; bottom: -3%; }
}
@media (max-width: 620px) {
  .h26-heroslide:first-child .h26-disp,
  .h26-heroslide:first-child .h26-sub { max-width: 100%; }
  .h26-heroslide:first-child .h26-acts { max-width: 68%; }
  .h26-hero-tab {
    width: 116px; right: -10px; bottom: -8px;
    filter: drop-shadow(0 10px 20px rgb(0 10 60 / .40));
  }
}
@media (max-width: 400px) {
  .h26-hero-tab { width: 96px; right: -12px; bottom: -6px; }
}

/* ==========================================================================
   Log In — one control at every width, on every page
   ==========================================================================
   The desktop button carries class "btn-outline desktop-login-btn", so the
   sitewide outline rule above repainted its 2px black border in light grey and
   it stopped reading as a pill at all. It gets the mobile treatment back,
   scaled up for the bar rather than redesigned.

   The two menus were also opening together: .login-dropdown-menu is the mobile
   one (position:fixed, top:100px right:15px) and .desktop-login-dropdown is the
   desktop one, and nothing was hiding either by width. */
body.h26-page .desktop-login-btn,
body.h26-page .navbar .buttons .btn-outline.desktop-login-btn {
  display: inline-flex !important; align-items: center; gap: 7px;
  background: transparent !important;
  color: var(--ink) !important;
  border: 2px solid var(--ink) !important;
  border-radius: var(--radius-pill, 999px) !important;
  padding: 10px 20px !important;
  font-size: 15px !important; font-weight: 700 !important; line-height: 1;
}
body.h26-page .desktop-login-btn:hover { background: rgb(11 15 26 / .06) !important; }
body.h26-page .desktop-login-btn i,
body.h26-page .desktop-login-btn .desktop-login-arrow { color: var(--vypa-blue) !important; }

body.dark-mode.h26-page .desktop-login-btn {
  color: #fff !important; border-color: #fff !important;
}
body.dark-mode.h26-page .desktop-login-btn:hover { background: rgb(255 255 255 / .10) !important; }

/* One menu per width. */
@media (min-width: 769px) {
  body.h26-page .login-dropdown-menu { display: none !important; }
}
@media (max-width: 768px) {
  body.h26-page .desktop-login-dropdown { display: none !important; }
}

/* ---------- floating contact button ----------
   It sat flat against the page with no depth, so it read as painted on rather
   than hovering above. Two shadows do the work: a soft wide one for the lift
   and a tight dark one for contact with the surface - the same treatment the
   drawer tab uses. The ring keeps a near-black circle legible in dark mode,
   where the page behind it is almost the same value. */
body.h26-page .contact-icon {
  box-shadow: 0 10px 26px rgb(0 0 0 / .28), 0 2px 6px rgb(0 0 0 / .22) !important;
  transition: box-shadow .2s ease, transform .2s ease, background-color .2s ease;
}
body.h26-page .contact-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgb(0 0 0 / .34), 0 3px 8px rgb(0 0 0 / .26) !important;
}
body.dark-mode.h26-page .contact-icon {
  box-shadow: 0 10px 26px rgb(0 0 0 / .55), 0 2px 6px rgb(0 0 0 / .40),
              inset 0 0 0 1px rgb(255 255 255 / .16) !important;
}
body.dark-mode.h26-page .contact-icon:hover {
  box-shadow: 0 14px 34px rgb(0 0 0 / .62), 0 3px 8px rgb(0 0 0 / .45),
              inset 0 0 0 1px rgb(255 255 255 / .24) !important;
}
@media (prefers-reduced-motion: reduce) {
  body.h26-page .contact-icon:hover { transform: none; }
}

/* ==========================================================================
   Country capsule on phones — appended last on purpose
   ==========================================================================
   main.css collapses .location-btn to a 36px flag-only circle below 768px and
   hides the label and chevron with !important. Restoring the capsule means
   out-ranking that, and since the specificity ties, the rules have to come
   later in the file than every other 768px block here. Hence the position.

   At 320px the row is logo + capsule + Log In, so each element gives up a few
   pixels rather than one of them dropping out. */
@media (max-width: 768px) {
  body.h26-page .location-btn {
    display: inline-flex !important;
    width: auto !important;
    border-radius: var(--radius-pill, 999px) !important;
    padding: 6px 11px !important;
    gap: 6px !important;
    border: 1px solid var(--h-line) !important;
    background: transparent !important;
    font-size: 13px !important; font-weight: 600 !important;
    color: var(--h-ink) !important;
  }
  body.h26-page .location-btn .location-text { display: inline !important; }
  body.h26-page .location-btn .dropdown-icon { display: inline-block !important; font-size: 9px; opacity: .6; }
  body.h26-page .location-btn .flag-icon {
    width: 17px !important; height: 12px !important; object-fit: cover; border-radius: 2px;
  }
  body.dark-mode.h26-page .location-btn { color: #fff !important; }
}
@media (max-width: 480px) {
  body.h26-page .logo { width: 74px !important; height: 24px !important; }
  body.h26-page .navbar { gap: 7px !important; padding-inline: 12px !important; }
  body.h26-page .location-btn { padding: 5px 8px !important; font-size: 11.5px !important; gap: 5px !important; }
  body.h26-page .location-btn .flag-icon { width: 15px !important; height: 11px !important; }
  body.h26-page .btn-outline2-mobile { padding: 6px 11px !important; font-size: 12px !important; right: 12px !important; }
}

/* ---------- Log In open state ----------
   The caret rotates 180deg and stays visible - measured open and closed. It
   animates, though, and a chevron at 90deg is edge-on, so a screenshot taken
   mid-rotation reads as "the arrow vanished".

   Two changes, both small: the rotation is quicker so less time is spent
   edge-on, and the caret turns lemon while the menu is open so the state does
   not rely on reading the angle of a 15px glyph.

   A filled open state was tried and abandoned. The background would not take
   even as an inline !important, while colour on the same element did - so
   something other than the cascade is involved, and shipping it half-applied
   meant white text on a transparent button. The arrow colour alone is honest
   and verifiably works. */
body.h26-page .desktop-login-arrow,
body.h26-page .btn-outline2-mobile .login-arrow { transition: transform .16s ease !important; }

body.h26-page .desktop-login-btn.h26-login-open i,
body.h26-page .btn-outline2-mobile.h26-login-open .login-arrow { color: #B6F23A !important; }
body.dark-mode.h26-page .desktop-login-btn.h26-login-open i,
body.dark-mode.h26-page .btn-outline2-mobile.h26-login-open .login-arrow { color: #B6F23A !important; }


/* ==========================================================================
   Dark-mode switch on phones — appended last so it wins the 768px blocks above
   ==========================================================================
   It is back in the bar's top-right corner at every width. At 320px the row is
   logo + capsule + Log In + switch in 296px of usable width, so everything
   steps down together and Log In moves left to clear the switch. main.css
   already sizes the switch to 35x15 below 768px; this only places it. */
@media (max-width: 768px) {
  body.h26-page .toggle-switch {
    display: inline-block !important;
    position: absolute !important;
    top: 20px !important; right: 12px !important;
    left: auto !important; bottom: auto !important;
    margin: 0 !important; z-index: 1400;
  }
  body.h26-page .btn-outline2-mobile { right: 58px !important; }
}
@media (max-width: 420px) {
  body.h26-page .logo { width: 66px !important; height: 22px !important; }
  body.h26-page .location-btn { padding: 4px 7px !important; font-size: 11px !important; gap: 4px !important; }
  body.h26-page .location-btn .flag-icon { width: 14px !important; height: 10px !important; }
  body.h26-page .btn-outline2-mobile {
    padding: 5px 9px !important; font-size: 11.5px !important; right: 52px !important;
  }
  body.h26-page .toggle-switch { right: 10px !important; top: 21px !important; }
  body.h26-page .navbar { gap: 6px !important; padding-inline: 10px !important; }
}

/* ==========================================================================
   Country capsule, logo and flag — appended last to win the blocks above
   ==========================================================================
   Three corrections:

   The capsule took a light hairline while Log In beside it took a 2px ink
   border, so the two controls did not read as the same family. It now carries
   the same stroke.

   The logo had been cut to 66px purely to fit four items at 320px. It goes
   back up; the room comes from the capsule dropping its label on the narrowest
   screens instead, where flag + caret still reads as a country picker.

   The flags are 2:1 (Canada and Nigeria are 1920x960) and were being drawn
   into a 1.42:1 box with object-fit:cover, which cropped roughly 29% off each
   side - precisely where Canada's red bars are. contain fits the whole flag,
   and the UK at 1.67:1 and the US at 1.90:1 are no longer cropped either. */
body.h26-page .location-btn {
  border: 2px solid var(--ink) !important;
  border-radius: var(--radius-pill, 999px) !important;
  background: transparent !important;
  font-weight: 700 !important;
}
body.dark-mode.h26-page .location-btn {
  border-color: #ffffff !important; color: #ffffff !important;
}
body.h26-page .location-btn .dropdown-icon { color: var(--vypa-blue) !important; opacity: 1; }

body.h26-page .location-btn .flag-icon {
  object-fit: contain !important;
  width: 20px !important; height: 13px !important;
  border-radius: 2px;
}

@media (max-width: 768px) {
  body.h26-page .logo { width: 92px !important; height: 30px !important; }
  body.h26-page .location-btn { padding: 5px 10px !important; font-size: 12.5px !important; gap: 6px !important; }
  body.h26-page .location-btn .flag-icon { width: 19px !important; height: 12px !important; }
}
@media (max-width: 420px) {
  body.h26-page .logo { width: 84px !important; height: 27px !important; }
  /* flag + caret only: still unmistakably a country picker, and it buys the
     logo back the width it had given up. */
  body.h26-page .location-btn .location-text { display: none !important; }
  body.h26-page .location-btn { padding: 4px 8px !important; gap: 4px !important; }
  body.h26-page .location-btn .flag-icon { width: 20px !important; height: 13px !important; }
  body.h26-page .btn-outline2-mobile { padding: 6px 10px !important; font-size: 12px !important; right: 52px !important; }
  body.h26-page .navbar { gap: 6px !important; padding-inline: 10px !important; }
}

/* ---------- stats, re-homed ----------
   They sat under the hero, where four numbers competed with the headline and
   the CTAs for the first screen. Under the three role cards they read as proof
   of what was just claimed, and the hero gets to make one point. */
.h26-stats--out {
  margin-top: clamp(28px, 4vw, 44px) !important;
  padding-top: clamp(20px, 2.6vw, 30px) !important;
}

/* ==========================================================================
   Phone bar, final arrangement — appended last to win the 768px blocks above
   ==========================================================================
   Two rows, as the old site had them: the theme switch alone in the very top
   corner, and below it the logo, the country capsule and Log In on one line.
   The switch is page chrome, not a nav item, so it sits above rather than
   competing for the same row.

   The capsule was tall because main.css sizes it to a 36px circle below 768px
   and I had overridden its width but not its height, so it stayed 36px and
   merely stretched. Height is now set by its contents, which makes it slimmer
   than the logo - it does not need to match it. */
@media (max-width: 768px) {
  body.h26-page .toggle-switch {
    top: 6px !important; right: 12px !important;
    left: auto !important; bottom: auto !important;
  }
  body.h26-page .btn-outline2-mobile {
    top: 28px !important; right: 12px !important;
    left: auto !important; bottom: auto !important;
  }
  body.h26-page .login-dropdown-menu { top: 70px !important; right: 12px !important; }

  body.h26-page .navbar { padding-top: 30px !important; }

  body.h26-page .location-btn {
    height: auto !important;
    min-height: 0 !important;
    padding: 3px 9px !important;
    align-self: center;
  }
  body.h26-page .location-btn .flag-icon { height: 11px !important; width: 18px !important; }
}
@media (max-width: 420px) {
  body.h26-page .location-btn { padding: 3px 7px !important; }
  body.h26-page .btn-outline2-mobile { top: 27px !important; right: 10px !important; }
  body.h26-page .toggle-switch { right: 10px !important; }
}

/* ==========================================================================
   Dark-mode Log In, ticker contrast, hero spacing, phone bar layout
   ========================================================================== */

/* 1. Log In vanished in dark mode: it computed to rgb(11,15,26) text and border
      on a near-black page. The light rule uses
      `body.h26-page .navbar .buttons .btn-outline.desktop-login-btn` (0,5,1) and
      the dark override was only 0,3,1, so it never won. Same long form here. */
body.dark-mode.h26-page .navbar .buttons .btn-outline.desktop-login-btn,
body.dark-mode.h26-page .desktop-login-btn {
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  background: transparent !important;
}
body.dark-mode.h26-page .navbar .buttons .btn-outline.desktop-login-btn i,
body.dark-mode.h26-page .desktop-login-btn i { color: #B6F23A !important; }

/* 2. The ticker is navy (0,20,60) - fine on a white page, invisible on a dark
      one. In dark mode it lifts off the background and takes an edge, so the
      strip reads as a strip. */
body.dark-mode.h26-page .blog-ticker-bar {
  background: rgb(22 36 74 / .96) !important;
  border: 1px solid rgb(120 150 220 / .22) !important;
  box-shadow: 0 6px 20px rgb(0 0 0 / .40) !important;
}

/* 3. The hero panel sat hard against the header. */
body.h26-page .h26 { padding-top: calc(var(--h26-top, 124px) + 22px) !important; }
@media (max-width: 768px) {
  body.h26-page .h26 { padding-top: calc(var(--h26-top, 112px) + 16px) !important; }
}

/* 4-5. Phone bar: country top-left, switch top-right, logo centred below and
        bigger, Log In on the logo's line. The two corner controls are page
        chrome and belong on their own row; the mark owns the row beneath. */
@media (max-width: 768px) {
  body.h26-page .navbar { position: relative; padding-top: 34px !important; }

  body.h26-page .location-dropdown {
    position: absolute !important;
    top: 6px !important; left: 12px !important; right: auto !important;
    margin: 0 !important; z-index: 1400;
  }
  body.h26-page .toggle-switch { top: 8px !important; right: 12px !important; }

  body.h26-page .nav-left {
    width: 100% !important; justify-content: center !important; margin: 0 !important;
  }
  body.h26-page .logo {
    margin: 0 auto !important;
    width: 116px !important; height: 36px !important;
  }
  body.h26-page .btn-outline2-mobile { top: 36px !important; right: 12px !important; }
  body.h26-page .login-dropdown-menu { top: 78px !important; right: 12px !important; }
}
@media (max-width: 420px) {
  body.h26-page .logo { width: 104px !important; height: 32px !important; }
  body.h26-page .btn-outline2-mobile { top: 34px !important; right: 10px !important; padding: 5px 9px !important; }
  body.h26-page .location-dropdown { left: 10px !important; }
  body.h26-page .toggle-switch { right: 10px !important; }
}

/* Log In sits on the mark's baseline rather than floating above it. */
@media (max-width: 768px) {
  body.h26-page .btn-outline2-mobile { top: 41px !important; }
  body.h26-page .login-dropdown-menu { top: 82px !important; }
}
@media (max-width: 420px) {
  body.h26-page .btn-outline2-mobile { top: 41px !important; }
}
/* The drawer is navigation now, so its rows are links and want a pointer. */
.h26-side-row { text-decoration: none; }
.h26-side-row:hover { background: rgb(0 66 255 / .08); color: var(--vypa-blue); }


/* The hero subtitle was competing with the headline rather than supporting it.
   Roughly half the weight on the page: smaller, tighter, and a touch dimmer. */
.h26 .h26-slide .h26-sub,
.h26-heroslide .h26-sub {
  font-size: clamp(12.5px, 1.05vw, 15px) !important;
  line-height: 1.45 !important;
  max-width: 44ch;
  opacity: .88;
}
@media (max-width: 768px) {
  .h26 .h26-slide .h26-sub,
  .h26-heroslide .h26-sub { font-size: 12.5px !important; }
}

/* A little more air between the two corner controls and the logo line - they
   were reading as one crowded block rather than two rows. */
@media (max-width: 768px) {
  body.h26-page .location-dropdown { top: 3px !important; }
  body.h26-page .toggle-switch { top: 5px !important; }
  body.h26-page .navbar { padding-top: 42px !important; }
  body.h26-page .btn-outline2-mobile { top: 50px !important; }
  body.h26-page .login-dropdown-menu { top: 92px !important; }
}
@media (max-width: 420px) {
  body.h26-page .navbar { padding-top: 40px !important; }
  body.h26-page .btn-outline2-mobile { top: 47px !important; }
}

/* The headline carries the page, so it gets the weight; the subtitle sits
   further below it rather than crowding the last line. */
.h26 .h26-screen h1 { font-size: clamp(30px, 5.7vw, 70px) !important; }
.h26 .h26-slide .h26-sub,
.h26-heroslide .h26-sub { margin-top: 20px !important; }
@media (max-width: 768px) {
  .h26 .h26-screen h1 { font-size: clamp(28px, 8.4vw, 42px) !important; }
  .h26 .h26-slide .h26-sub,
  .h26-heroslide .h26-sub { margin-top: 16px !important; }
}

/* ==========================================================================
   Abstract line work on the 2026 surface
   ==========================================================================
   main.css paints the line work and the site's dark backdrop on <body>, but
   .h26 sets `background: var(--h-page)` - an opaque #070A12 that is bluer and
   blacker than the #1e1e1e grey every other page uses, and it buried both.
   Dropping the paint entirely is better than restating it: the homepage then
   shows the same backdrop and the same lines as /host, from one declaration,
   and there is no second copy to keep in step. --h-page still drives light
   mode, which is unchanged. */
body.dark-mode .h26 { background: transparent !important; }

/* ==========================================================================
   Hero: air above the headline, and above the page's top corners
   ==========================================================================
   The Samsung badge sat directly on top of "Give your brand more visibility",
   so the two read as one block. The badge keeps its size and gains a gap. */
.h26 .h26-newsflag { margin-bottom: 30px !important; }
/* Line 852 sets the panel's padding with !important, so this has to carry it
   too - a longhand without it loses to the shorthand whatever the specificity.
   Only the first slide moves; the video panel keeps its own padding. */
.h26 .h26-heroslide:first-child .h26-screen { padding-top: clamp(28px, 4vw, 52px) !important; }

/* The country capsule and the theme switch were almost touching the top of the
   window. Both move down together: the capsule rides the bar's padding, the
   switch is positioned, so each needs its own nudge to stay level. */
body.h26-page .navbar { padding-top: 22px; }
@media (min-width: 769px) {
  body.h26-page .toggle-switch { top: 26px !important; }
}
@media (max-width: 768px) {
  .h26 .h26-newsflag { margin-bottom: 24px !important; }
  .h26 .h26-heroslide:first-child .h26-screen { padding-top: 30px !important; }
  /* On phones neither corner control sits in the flow - both are absolutely
     positioned in the bar's own corners - so the bar's padding cannot move
     them and each needs the same 9px by hand. The logo line, Log In and its
     menu step down by that same 9px, so the two rows keep the gap they had
     and only the distance to the top of the window changes. */
  body.h26-page .location-dropdown { top: 12px !important; }
  body.h26-page .toggle-switch { top: 14px !important; }
  body.h26-page .navbar { padding-top: 51px !important; }
  body.h26-page .btn-outline2-mobile { top: 50px !important; }
  body.h26-page .login-dropdown-menu { top: 101px !important; }
}
@media (max-width: 420px) {
  body.h26-page .navbar { padding-top: 49px !important; }
  body.h26-page .btn-outline2-mobile { top: 47px !important; }
}

/* ==========================================================================
   Carets go white in dark mode
   ==========================================================================
   The flag capsule's caret and Log In's both stayed VYPA blue when the page
   went dark, which is the weakest contrast pair in the bar - blue on near
   black. Each now matches the stroke of the capsule it sits in, and in dark
   mode that stroke is white.

   The long `.navbar .buttons .btn-outline.desktop-login-btn` form is repeated
   because the lemon rule above uses it; a shorter selector here would lose to
   it however late it came in the file. */
body.dark-mode.h26-page .location-btn .dropdown-icon,
body.dark-mode.h26-page .btn-outline2-mobile .login-arrow,
body.dark-mode.h26-page .desktop-login-btn .desktop-login-arrow,
body.dark-mode.h26-page .navbar .buttons .btn-outline.desktop-login-btn i,
body.dark-mode.h26-page .navbar .buttons .btn-outline.desktop-login-btn .desktop-login-arrow,
body.dark-mode.h26-page .desktop-login-btn i { color: #ffffff !important; }

/* Open is the one moment the caret should announce itself, so it keeps the
   lemon. Specificity has to clear the white rule directly above, not just the
   rules before it. */
body.dark-mode.h26-page .navbar .buttons .btn-outline.desktop-login-btn.h26-login-open i,
body.dark-mode.h26-page .navbar .buttons .btn-outline.desktop-login-btn.h26-login-open .desktop-login-arrow,
body.dark-mode.h26-page .desktop-login-btn.h26-login-open i,
body.dark-mode.h26-page .desktop-login-btn.h26-login-open .desktop-login-arrow,
body.dark-mode.h26-page .btn-outline2-mobile.h26-login-open .login-arrow { color: #B6F23A !important; }

/* ==========================================================================
   The slider dots are an indicator, not a plinth
   ==========================================================================
   They were sitting at exactly 0px below the panel - measured, not guessed -
   so the lozenges read as a stand bolted to the bottom of the TV rather than
   as "there is another slide this way". Lifting them off the panel is the
   whole fix; they also take a little room underneath so they sit in their own
   space instead of belonging to whatever comes next.

   Both need !important: .h26-dots { margin-top: 0 !important } further up
   pins them to the panel, and an ordinary declaration loses to it whatever
   its specificity or position in the file. */
.h26-dots { margin-top: 26px !important; margin-bottom: 10px !important; }
@media (max-width: 768px) {
  .h26-dots { margin-top: 20px !important; margin-bottom: 8px !important; }
}

/* ==========================================================================
   Log In sits below the logo, as it does on a blog post
   ==========================================================================
   Measured on the blog header, which is the arrangement that reads right:
   Log In's top edge lands 4px above the logo's bottom, so the capsule hangs
   under the mark rather than beside it.

   The homepage had drifted to -34px, because the bar's padding moved the logo
   down while Log In, being absolutely positioned, stayed where it was. The two
   do not move together, so every change to one needs the other by hand.

   The logo is 32px below 420px and 36px above it, so its baseline differs by
   breakpoint and Log In needs a different top at each. The bar also takes more
   padding underneath: at the old 10px the capsule would have finished 7px into
   the ticker. js/home-2026.js measures the header and republishes --h26-top,
   so the hero follows the taller bar on its own. */
@media (max-width: 768px) {
  body.h26-page .navbar { padding-bottom: 25px !important; }
  body.h26-page .btn-outline2-mobile { top: 83px !important; }
  body.h26-page .login-dropdown-menu { top: 134px !important; }
}
@media (max-width: 420px) {
  body.h26-page .btn-outline2-mobile { top: 77px !important; }
  body.h26-page .login-dropdown-menu { top: 128px !important; }
}

/* ==========================================================================
   Close the gap between the corner row and the mark
   ==========================================================================
   The flag and the switch finished 16px above the logo at 375px and 14px at
   600px, which read as two separate bands rather than one bar. Eight pixels
   come out of the bar's top padding.

   Only the padding changes: the corner controls are pinned to the top of the
   bar and keep the headroom they were given, while the logo, Log In and its
   menu all rise by the same 8px. Log In is absolutely positioned, so it does
   not follow the logo on its own - it has to be moved by hand, again. */
@media (max-width: 768px) {
  body.h26-page .navbar { padding-top: 43px !important; }
  body.h26-page .btn-outline2-mobile { top: 75px !important; }
  body.h26-page .login-dropdown-menu { top: 126px !important; }
}
@media (max-width: 420px) {
  body.h26-page .navbar { padding-top: 41px !important; }
  body.h26-page .btn-outline2-mobile { top: 69px !important; }
  body.h26-page .login-dropdown-menu { top: 120px !important; }
}

/* ==========================================================================
   No blue glow on the hero panel in dark mode
   ==========================================================================
   The glow exists to lift a bright panel off a white page. On a dark page
   there is nothing to lift it from, so it stopped reading as depth and
   started reading as a blue haze around the frame. The inset hairline stays:
   that is the bezel's edge, and without it the panel loses its outline
   against the backdrop. Light mode keeps the glow. */
body.dark-mode .h26 .h26-tv {
  box-shadow: inset 0 0 0 1px var(--h-bezel-edge) !important;
}

/* ==========================================================================
   About and Contact: clear the header like everything else
   ==========================================================================
   Both heroes pad themselves a fixed distance from the top - 150px on About,
   120px on Contact - decided when the bar was shorter. The 2026 bar measures
   155px on a phone, so the breadcrumb was sitting 5px and 35px *underneath*
   the glass, hidden. Contact was worse on desktop, where its 80px put the
   trail 53px under a 133px header.

   Every other page derives this from --hdr-h, which js/home-2026.js now sets
   from the real header, so these two join them. 28px of air, the same figure
   navmenu.css gives the breadcrumb heroes.

   Scoped to the width where the heroes stack. Above it they lay out in a row
   and centre their content against a 50-60vh min-height, so added padding
   does not move the trail by the amount added - it also grows the box, and
   the centring hands most of that back as space above - measured at about
   79px on these two. About already clears by 96px at 1280, so it is left
   alone up there; Contact does not clear at all, and takes the floor at
   every width. */
@media (max-width: 900px) {
  body.h26-page .about-hero,
  body.h26-page .contact-hero {
    padding-top: calc(var(--hdr-h, 155px) + 28px) !important;
  }
}
@media (min-width: 901px) {
  body.h26-page .contact-hero {
    padding-top: calc(var(--hdr-h, 133px) + 28px) !important;
  }
}

/* ==========================================================================
   The watermark stays in frame on phones
   ==========================================================================
   Measured: the clip is 1280x720 and the panel on a 375px phone is 301x350,
   so `cover` renders it 622px wide and throws away 160px off each side -
   just under half the picture. The VYPA mark in the clip spans 55% of the
   frame's width while that window shows only 48% of it, so the logo cannot
   fit however it is positioned. object-position would only choose which half
   of the mark gets cut.

   So the video stops being cropped: it keeps its own 16:9 box, pinned to the
   top of the panel at full width, and the caption sits in the band beneath it
   rather than on top of it - which also stops white text landing on a bright
   part of the picture. The panel's own dark ground fills the rest, so there
   is no letterbox, only a video above a caption.

   Phones only. At 1280 the panel is 2.73:1 and the crop is vertical, 108px
   top and bottom, which the mark clears comfortably. */
@media (max-width: 768px) {
  .h26-screen--video .h26-hero-video {
    inset: 0 0 auto 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: contain !important;
    object-position: center !important;
  }
}