/* ==========================================================================
   OVELO TV — design system
   Near-black foundation, a single strong red, square-shouldered surfaces.
   One typeface (Inter) at heavy weights and tight tracking, mixed case.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:            #040405;
  --bg-2:          #08080a;
  --bg-3:          #0d0d0f;
  --surface:       #101012;
  --surface-2:     #17171a;
  --line:          rgba(255, 150, 140, .14);
  --line-strong:   rgba(255, 150, 140, .28);

  /* Brand */
  --blue:          #d40f1f;
  --blue-600:      #a80a16;
  --blue-300:      #ff7a7a;
  --violet:        #ff2b3d;
  --cyan:          #ff8a8a;
  --glow:          rgba(225, 29, 46, .40);

  /* Ink */
  --ink:           #f7f4f3;
  --ink-2:         #cfc6c4;
  --ink-3:         #9a9291;

  /* Feedback */
  --wa:            #25d366;
  --wa-600:        #1eb455;
  --amber:         #ff4a3a;

  /* Shape */
  --r-sm:  4px;
  --r:     8px;
  --r-lg:  12px;
  --r-xl:  16px;

  --shadow:     0 18px 44px -22px rgba(3, 3, 4, .9);
  --shadow-lg:  0 40px 90px -40px rgba(3, 3, 4, 1);

  --container: 1200px;
  --gut: clamp(1rem, 4vw, 2rem);

  --f-head: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Ambient background — pure CSS, no image requests */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(56rem 40rem at 78% -8%, rgba(212, 15, 31, .18), transparent 62%),
    radial-gradient(48rem 34rem at 6% 4%, rgba(255, 43, 61, .13), transparent 60%),
    radial-gradient(70rem 50rem at 50% 108%, rgba(212, 15, 31, .10), transparent 65%);
}

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-300); text-decoration: none; }
a:hover { color: #ffb3ab; }
p a, li a, .prose a, td a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(255, 154, 144, .45); }
p a:hover, li a:hover, .prose a:hover { text-decoration-color: currentColor; }
/* Navigation, cards and buttons are never underlined */
.head-nav a, .mobile-menu a, .fcol a, .crumbs a, .toc a, .related a, .chips a,
.linkcard, .devtile, .post, .btn, .brand, .wa-float, .skip, .addon a,
.post-meta a, .article-meta a { text-decoration: none; }
.fcol a:hover, .crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--f-head); line-height: 1.15; margin: 0 0 .6em; letter-spacing: -.02em; font-weight: 700; }
h1 { font-size: clamp(2.05rem, 1.35rem + 3.1vw, 3.65rem); font-weight: 800; letter-spacing: -.033em; }
h2 { font-size: clamp(1.6rem, 1.15rem + 1.85vw, 2.5rem); }
h3 { font-size: clamp(1.12rem, 1rem + .5vw, 1.35rem); }
h4 { font-size: 1.03rem; }
p  { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.2em; padding-left: 1.25em; }
li { margin: .42em 0; }
strong { color: #fff; font-weight: 650; }
small { font-size: .86rem; }

::selection { background: rgba(212, 15, 31, .38); color: #fff; }
:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 12px 0; font-weight: 600;
}
.skip:focus { left: 0; color: #fff; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gut); }
.container-narrow { width: 100%; max-width: 820px; margin-inline: auto; padding-inline: var(--gut); }
.muted { color: var(--ink-3); }
.center { text-align: center; }

/* --- Icons ---------------------------------------------------------------- */
.ico { width: 22px; height: 22px; flex: 0 0 auto; display: inline-block; vertical-align: -.18em; }
.ico-wa { width: 20px; height: 20px; }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--f-body); font-weight: 600; font-size: .975rem; line-height: 1;
  padding: .95rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none !important; white-space: nowrap;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-block { width: 100%; }
.btn-sm { padding: .68rem 1.1rem; font-size: .9rem; }

.btn-primary {
  background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 130%);
  color: #fff;
  box-shadow: 0 12px 30px -12px var(--glow), inset 0 1px 0 rgba(255,255,255,.22);
}
.btn-primary:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 40px -14px var(--glow), inset 0 1px 0 rgba(255,255,255,.3); }

.btn-ghost {
  background: rgba(255,255,255,.045); color: var(--ink); border-color: var(--line-strong);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover { color: #fff; background: rgba(255,255,255,.09); border-color: var(--blue-300); transform: translateY(-2px); }

.btn-wa {
  background: var(--wa); color: #06240f; font-weight: 700;
  box-shadow: 0 12px 28px -14px rgba(37, 211, 102, .6);
}
.btn-wa:hover { background: var(--wa-600); color: #04200d; transform: translateY(-2px); }
.btn-wa .ico { color: #06240f; }

/* --- Header --------------------------------------------------------------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8, 8, 11, .72);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease;
}
.site-head.scrolled { border-bottom-color: var(--line); background: rgba(8, 8, 11, .92); }
.head-inner { display: flex; align-items: center; gap: 1.1rem; min-height: 72px; }

.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); flex: 0 0 auto; }
.brand:hover { color: #fff; }
.brand img { width: 38px; height: 38px; }
.brand-txt { font-family: var(--f-head); font-weight: 800; font-size: 1.02rem; letter-spacing: .01em; line-height: 1; }
.brand-txt b { font-weight: 800; }
.brand-txt em {
  font-style: normal;
  background: linear-gradient(120deg, var(--blue-300), var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.head-nav { margin-left: auto; }
.head-nav ul { display: flex; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.head-nav a {
  display: block; padding: .55rem .78rem; border-radius: 999px;
  color: var(--ink-2); font-size: .92rem; font-weight: 500;
  transition: color .16s ease, background .16s ease;
}
.head-nav a:hover { color: #fff; background: rgba(255,255,255,.06); }
.head-nav a.is-active { color: #fff; background: rgba(212,15,31,.16); }

.head-cta { display: flex; align-items: center; gap: .55rem; }
@media (max-width: 1080px) { .head-nav { display: none; } .head-cta { margin-left: auto; } }
/* On narrow phones the header WhatsApp button becomes icon-only so the
   menu button always fits. The floating button still carries the label. */
@media (max-width: 480px) {
  .head-cta .btn-wa { padding: .68rem; border-radius: 50%; }
  .head-cta .btn-wa span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .brand-txt { font-size: .92rem; }
  .head-inner { gap: .6rem; }
}
@media (max-width: 340px) { .brand img { width: 32px; height: 32px; } .brand-txt { font-size: .82rem; } }

.burger {
  display: none; width: 44px; height: 44px; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-strong);
  cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span { display: block; width: 19px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 1080px) { .burger { display: flex; } }

.mobile-menu {
  position: fixed; inset: 72px 0 0; z-index: 55;
  background: rgba(8, 8, 11, .985);
  backdrop-filter: blur(18px);
  padding: 1.4rem var(--gut) 3rem;
  overflow-y: auto; overscroll-behavior: contain;
}
.mobile-menu[hidden] { display: none !important; }
.mobile-menu ul { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.mobile-menu li { margin: 0; }
.mobile-menu nav a {
  display: flex; align-items: center; justify-content: space-between;
  padding: .95rem .25rem; color: var(--ink); font-size: 1.06rem; font-weight: 600;
  border-bottom: 1px solid var(--line); font-family: var(--f-head);
}
.mobile-menu nav a.is-active { color: var(--blue-300); }
.mm-actions { display: grid; gap: .7rem; }
.mm-actions .btn { width: 100%; }
body.menu-open { overflow: hidden; }

/* --- Breadcrumbs ---------------------------------------------------------- */
.crumbs { padding: 1rem 0 0; font-size: .84rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; color: var(--ink-3); }
.crumbs li { margin: 0; display: flex; align-items: center; gap: .4rem; }
.crumbs li + li::before { content: "/"; color: rgba(255,150,140,.32); }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--blue-300); }
.crumbs [aria-current] { color: var(--ink-2); }

/* --- Sections ------------------------------------------------------------- */
.sec { padding: clamp(3.4rem, 6vw, 6rem) 0; position: relative; }
.sec-tight { padding: clamp(2.4rem, 4vw, 3.6rem) 0; }
.sec-alt { background: linear-gradient(180deg, rgba(20,14,16,.55), rgba(14,11,14,.2)); border-block: 1px solid var(--line); }

.sec-head { max-width: 760px; margin: 0 0 clamp(2rem, 3.5vw, 3.2rem); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2, .sec-head h1 { margin-bottom: .5rem; }
.kicker {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--blue-300); margin: 0 0 .85rem;
  padding: .34rem .8rem; border-radius: 999px;
  background: rgba(212,15,31,.11); border: 1px solid rgba(212,15,31,.25);
}
.lead { font-size: clamp(1rem, .95rem + .28vw, 1.14rem); color: var(--ink-2); margin: 0; }
.sec-head.center .lead { margin-inline: auto; }

/* --- Hero ----------------------------------------------------------------- */
.hero { padding: clamp(2.6rem, 5vw, 5rem) 0 clamp(3rem, 5vw, 5rem); position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.06fr .94fr; gap: clamp(2rem, 4vw, 3.6rem); align-items: center; }
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; gap: 2.4rem; } }

.hero h1 { margin-bottom: 1rem; }
.hero h1 .hl {
  background: linear-gradient(110deg, var(--blue-300) 5%, var(--cyan) 55%, var(--violet) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-lead { font-size: clamp(1.02rem, .96rem + .38vw, 1.2rem); color: var(--ink-2); max-width: 56ch; margin-bottom: 1.7rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.6rem; }

.chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.chips li {
  display: inline-flex; align-items: center; gap: .45rem; margin: 0;
  font-size: .855rem; font-weight: 550; color: var(--ink-2);
  padding: .46rem .85rem; border-radius: 999px;
  background: rgba(255,255,255,.045); border: 1px solid var(--line);
}
.chips .ico { width: 15px; height: 15px; color: var(--cyan); stroke-width: 2.4; }

.hero-devices { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; color: var(--ink-3); font-size: .82rem; }
.hero-devices .dv { display: inline-flex; align-items: center; gap: .4rem; }
.hero-devices .ico { width: 17px; height: 17px; }

/* Hero visual */
.hero-vis { position: relative; }
.hero-vis::after {
  content: ""; position: absolute; inset: 8% -6% -12% -6%; z-index: -1;
  background: radial-gradient(60% 55% at 50% 45%, var(--glow), transparent 72%);
  filter: blur(16px);
}
.hero-vis img { width: 100%; border-radius: var(--r-xl); }

/* --- Trust bar ------------------------------------------------------------ */
.trustbar { border-block: 1px solid var(--line); background: rgba(14,11,14,.6); }
.trustbar .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; padding: 1.5rem 0; }
.trustbar .tb { display: flex; align-items: flex-start; gap: .7rem; }
.trustbar .ico { color: var(--blue-300); margin-top: 2px; }
.trustbar b { display: block; font-family: var(--f-head); font-size: .96rem; color: #fff; line-height: 1.3; }
.trustbar span { font-size: .84rem; color: var(--ink-3); line-height: 1.5; }
@media (max-width: 860px) { .trustbar .row { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
@media (max-width: 420px) { .trustbar .row { grid-template-columns: 1fr; } }

/* --- Grids & cards -------------------------------------------------------- */
.grid { display: grid; gap: clamp(.9rem, 1.6vw, 1.35rem); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: linear-gradient(160deg, rgba(22,17,19,.72), rgba(14,12,14,.6));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2vw, 1.75rem);
  box-shadow: var(--shadow);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: .45rem; color: #fff; }
.card p { margin: 0; color: var(--ink-2); font-size: .945rem; }
.card p + p { margin-top: .7rem; }
.card-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 1rem;
  background: linear-gradient(140deg, rgba(212,15,31,.24), rgba(255,43,61,.16));
  border: 1px solid rgba(255,154,144,.24); color: var(--blue-300);
}
.card-ico .ico { width: 22px; height: 22px; }

/* Link cards */
.linkcard {
  display: flex; flex-direction: column; gap: .35rem;
  background: linear-gradient(160deg, rgba(22,17,19,.6), rgba(14,12,14,.5));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.15rem 1.25rem; color: var(--ink);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.linkcard:hover { transform: translateY(-3px); border-color: var(--blue); color: #fff; background: linear-gradient(160deg, rgba(38,15,19,.75), rgba(18,13,15,.6)); }
.linkcard h3 { font-size: 1.03rem; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.linkcard h3 .ico { width: 18px; height: 18px; color: var(--blue-300); opacity: .75; transition: transform .2s ease; }
.linkcard:hover h3 .ico { transform: translateX(3px); opacity: 1; }
.linkcard p { margin: 0; font-size: .89rem; color: var(--ink-3); line-height: 1.6; }

/* --- Device grid ---------------------------------------------------------- */
.devgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
@media (max-width: 900px) { .devgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .devgrid { grid-template-columns: repeat(2, 1fr); } }
.devtile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .6rem;
  padding: 1.4rem .8rem; border-radius: var(--r);
  background: rgba(255,255,255,.035); border: 1px solid var(--line); color: var(--ink);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.devtile:hover { transform: translateY(-4px); border-color: var(--blue); background: rgba(212,15,31,.1); color: #fff; }
.devtile img { width: 44px; height: 44px; }
.devtile b { font-size: .9rem; font-weight: 600; font-family: var(--f-head); line-height: 1.3; }
.devtile span { font-size: .76rem; color: var(--ink-3); }
.devtile.static { cursor: default; }
.devtile.static:hover { transform: none; border-color: var(--line); background: rgba(255,255,255,.035); }

/* --- Steps ---------------------------------------------------------------- */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 1rem; }
.steps li {
  counter-increment: s; position: relative; margin: 0;
  padding: 1.25rem 1.35rem 1.25rem 4rem;
  background: rgba(255,255,255,.032); border: 1px solid var(--line); border-radius: var(--r);
}
.steps li::before {
  content: counter(s); position: absolute; left: 1.25rem; top: 1.2rem;
  width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px;
  font-family: var(--f-head); font-weight: 700; font-size: .95rem; color: #fff;
  background: linear-gradient(140deg, var(--blue), var(--violet));
  box-shadow: 0 8px 20px -10px var(--glow);
}
.steps h3 { font-size: 1.02rem; margin: 0 0 .35rem; }
.steps p { margin: 0; color: var(--ink-2); font-size: .945rem; }

/* --- Pricing -------------------------------------------------------------- */
.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; align-items: stretch; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

.plan {
  position: relative; display: flex; flex-direction: column;
  background: linear-gradient(170deg, rgba(24,18,20,.85), rgba(13,11,13,.75));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.7rem 1.5rem 1.6rem; box-shadow: var(--shadow);
  transition: transform .22s ease, border-color .22s ease;
}
.plan:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.plan.featured {
  border-color: rgba(212,15,31,.55);
  background: linear-gradient(170deg, rgba(40,16,20,.9), rgba(18,13,15,.8));
  box-shadow: 0 30px 70px -34px var(--glow), var(--shadow);
}
.plan-tag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .38rem .95rem; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff;
  box-shadow: 0 10px 24px -12px var(--glow);
}
.plan h2, .plan h3 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .2rem; letter-spacing: -.02em; }
.plan .dur { font-size: .85rem; color: var(--ink-3); margin: 0 0 1.1rem; }
.plan .price {
  font-family: var(--f-head); font-weight: 800; font-size: clamp(1.55rem, 1.25rem + 1vw, 2.05rem);
  color: #fff; line-height: 1.15; margin: 0 0 .3rem;
  overflow-wrap: anywhere; hyphens: none;
}
.plan .price-sub { font-size: .82rem; color: var(--ink-3); margin: 0 0 1.3rem; }
.plan ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .58rem; }
.plan li { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: .91rem; color: var(--ink-2); line-height: 1.55; }
.plan li .ico { width: 17px; height: 17px; color: var(--wa); margin-top: 3px; stroke-width: 2.6; }
.plan .btn { margin-top: auto; }
.plan .note { font-size: .8rem; color: var(--ink-3); margin: .85rem 0 0; text-align: center; }

.addons { margin-top: 1.6rem; display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
.addon {
  display: inline-flex; align-items: baseline; gap: .5rem; font-size: .88rem;
  padding: .6rem 1.05rem; border-radius: 999px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--ink-2);
}
.addon b { color: #fff; font-family: var(--f-head); }

/* --- Comparison table ----------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: rgba(14,11,14,.6); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 540px; font-size: .92rem; }
caption { text-align: left; padding: 1rem 1.15rem .2rem; color: var(--ink-3); font-size: .84rem; }
th, td { padding: .85rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: rgba(212,15,31,.1); color: #fff; font-family: var(--f-head); font-weight: 650; font-size: .87rem; white-space: nowrap; }
tbody th { color: #fff; font-weight: 600; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td, tbody tr:hover th { background: rgba(255,255,255,.022); }
td { color: var(--ink-2); }

/* --- FAQ ------------------------------------------------------------------ */
.faq { display: grid; gap: .7rem; max-width: 860px; margin-inline: auto; }
.faq-item {
  background: rgba(255,255,255,.032); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden; transition: border-color .2s ease, background .2s ease;
}
.faq-item[open] { border-color: var(--line-strong); background: rgba(212,15,31,.06); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.3rem; cursor: pointer; list-style: none;
  font-family: var(--f-head); font-weight: 600; font-size: 1rem; color: #fff;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--blue-300); }
.faq-mark { position: relative; width: 16px; height: 16px; flex: 0 0 auto; }
.faq-mark::before, .faq-mark::after {
  content: ""; position: absolute; background: var(--blue-300); border-radius: 2px;
  transition: transform .22s ease, opacity .22s ease;
}
.faq-mark::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-mark::after  { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item[open] .faq-mark::after { transform: rotate(90deg); opacity: 0; }
.faq-body { padding: 0 1.3rem 1.25rem; color: var(--ink-2); font-size: .945rem; }
.faq-body p:last-child, .faq-body ul:last-child { margin-bottom: 0; }

/* --- Callouts ------------------------------------------------------------- */
.callout {
  border-radius: var(--r); padding: 1.1rem 1.3rem; margin: 1.6rem 0;
  border: 1px solid var(--line-strong); background: rgba(212,15,31,.08);
  border-left: 3px solid var(--blue);
}
.callout p { margin: 0; color: var(--ink-2); font-size: .945rem; }
.callout-warn { background: rgba(255,74,58,.08); border-color: rgba(255,74,58,.3); border-left-color: var(--amber); }
.callout-ok { background: rgba(37,211,102,.08); border-color: rgba(37,211,102,.28); border-left-color: var(--wa); }

/* --- CTA band ------------------------------------------------------------- */
.sec-cta { padding-block: clamp(2.4rem, 4vw, 3.6rem); }
.cta-band {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.6rem; padding: clamp(1.8rem, 3.4vw, 2.9rem);
  border-radius: var(--r-xl); border: 1px solid rgba(255,154,144,.24);
  background:
    radial-gradient(90% 160% at 88% 0%, rgba(255,43,61,.24), transparent 62%),
    linear-gradient(135deg, rgba(34,13,17,.92), rgba(15,11,13,.9));
  box-shadow: var(--shadow-lg);
}
.cta-copy { flex: 1 1 380px; }
.cta-copy h2 { font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.95rem); margin-bottom: .45rem; }
.cta-copy p { margin: 0; color: var(--ink-2); max-width: 60ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
@media (max-width: 560px) { .cta-actions { width: 100%; } .cta-actions .btn { flex: 1 1 100%; } }

/* --- Prose (articles & long-form) ---------------------------------------- */
.prose { max-width: 74ch; }
.prose.wide { max-width: 100%; }
.prose > h2 { margin-top: 2.4rem; }
.prose > h3 { margin-top: 1.9rem; color: #fff; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose p, .prose li { color: var(--ink-2); }
.prose ul, .prose ol { margin-bottom: 1.3rem; }
.prose li::marker { color: var(--blue-300); }
.prose .table-wrap { margin: 1.6rem 0; }
.prose blockquote {
  margin: 1.6rem 0; padding: .3rem 0 .3rem 1.3rem;
  border-left: 3px solid var(--blue); color: var(--ink-2); font-style: normal;
}

.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.6rem, 3.5vw, 3.2rem); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }

.panel {
  background: linear-gradient(165deg, rgba(22,17,19,.66), rgba(14,12,14,.55));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.35rem, 2.2vw, 1.9rem); box-shadow: var(--shadow);
}
.panel h3 { margin-top: 0; }
.panel > *:last-child { margin-bottom: 0; }
.panel.sticky { position: sticky; top: 96px; }
@media (max-width: 900px) { .panel.sticky { position: static; } }

.checklist { list-style: none; padding: 0; display: grid; gap: .6rem; }
.checklist li { display: flex; gap: .65rem; align-items: flex-start; margin: 0; font-size: .93rem; color: var(--ink-2); }
.checklist li .ico { width: 17px; height: 17px; color: var(--wa); margin-top: 3px; flex: 0 0 auto; stroke-width: 2.6; }

/* --- Blog ----------------------------------------------------------------- */
.postgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 980px) { .postgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .postgrid { grid-template-columns: 1fr; } }
.post {
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, rgba(22,17,19,.62), rgba(14,12,14,.52));
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  color: var(--ink); transition: transform .22s ease, border-color .22s ease;
}
.post:hover { transform: translateY(-4px); border-color: var(--blue); color: var(--ink); }
.post-thumb { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; background: var(--bg-3); border-bottom: 1px solid var(--line); }
.post-body { padding: 1.25rem 1.35rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.post-cat { font-size: .71rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-300); margin: 0 0 .5rem; }
.post h2, .post h3 { font-size: 1.08rem; font-weight: 700; margin: 0 0 .5rem; line-height: 1.35; letter-spacing: -.015em; }
.post p { font-size: .89rem; color: var(--ink-3); margin: 0 0 1rem; line-height: 1.6; }
.post-meta { margin-top: auto; font-size: .78rem; color: var(--ink-3); display: flex; gap: .5rem; align-items: center; }

.article-head { padding: clamp(2rem, 4vw, 3.2rem) 0 1.5rem; }
.article-head h1 { max-width: 24ch; }
.article-head .lead { max-width: 72ch; }
.article-meta {
  display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center;
  font-size: .85rem; color: var(--ink-3); margin-top: 1.1rem;
  padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.article-meta .ico { width: 15px; height: 15px; vertical-align: -.2em; margin-right: .35rem; }
.article-meta span { display: inline-flex; align-items: center; white-space: nowrap; }
.related a .ico { width: 15px; height: 15px; color: var(--blue-300); flex: 0 0 auto; }
.toc { background: rgba(255,255,255,.032); border: 1px solid var(--line); border-radius: var(--r); padding: 1.15rem 1.35rem; margin: 0 0 2rem; }
.toc h2 { font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 .7rem; font-weight: 700; }
.toc ol { margin: 0; padding-left: 1.1em; }
.toc li { margin: .3rem 0; font-size: .92rem; }

.author-box {
  display: flex; gap: 1rem; align-items: flex-start; margin-top: 2.6rem;
  padding: 1.3rem 1.4rem; border-radius: var(--r); border: 1px solid var(--line);
  background: rgba(255,255,255,.032);
}
.author-box .av {
  width: 46px; height: 46px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--blue), var(--violet)); color: #fff;
  font-family: var(--f-head); font-weight: 800; font-size: .95rem;
}
.author-box h2 { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; }
.author-box p { margin: 0; font-size: .88rem; color: var(--ink-3); }

.related { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.related h2 { font-size: 1.15rem; }
.related ul { list-style: none; padding: 0; display: grid; gap: .55rem; }
.related li { margin: 0; }
.related a { display: inline-flex; gap: .5rem; align-items: baseline; font-size: .95rem; }

/* --- Footer --------------------------------------------------------------- */
.site-foot { border-top: 1px solid var(--line); background: rgba(8,8,11,.7); margin-top: clamp(2rem, 4vw, 4rem); padding: clamp(2.6rem, 4vw, 4rem) 0 2rem; font-size: .9rem; }
.foot-top { display: grid; grid-template-columns: minmax(260px, 1fr) 2.35fr; gap: clamp(1.8rem, 3.5vw, 3.4rem); }
@media (max-width: 900px) { .foot-top { grid-template-columns: 1fr; } }
.fbrand p { color: var(--ink-3); font-size: .87rem; line-height: 1.65; margin-top: 1rem; }
.fbrand .foot-wa { color: var(--ink-2); }
.fbrand .foot-wa strong { display: inline-block; margin-bottom: .2rem; }
.fbrand .foot-wa a { font-family: var(--f-head); font-size: 1.02rem; color: var(--wa); text-decoration: none; }
.fbrand .foot-wa a:hover { text-decoration: underline; }
.fbrand .muted { font-size: .8rem; }

.fnav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem; }
@media (max-width: 1080px) { .fnav { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .fnav { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }
.fcol h2 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin: 0 0 .8rem; font-weight: 700; }
.fcol ul { list-style: none; padding: 0; margin: 0; }
.fcol li { margin: .42rem 0; }
.fcol a { color: var(--ink-3); font-size: .865rem; text-decoration: none; }
.fcol a:hover { color: var(--blue-300); }

.foot-bottom { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.foot-bottom p { color: var(--ink-3); font-size: .8rem; margin: 0 0 .8rem; }
.foot-bottom .disclaimer { font-size: .765rem; line-height: 1.65; color: #9a8f8d; max-width: 105ch; }
.foot-bottom a { color: #9a9291; text-decoration: underline; }

/* --- Floating WhatsApp ---------------------------------------------------- */
.wa-float {
  position: fixed; right: clamp(.85rem, 2.5vw, 1.6rem); bottom: clamp(.85rem, 2.5vw, 1.6rem);
  z-index: 70; display: inline-flex; align-items: center; gap: .5rem;
  padding: .82rem 1.15rem; border-radius: 999px;
  background: var(--wa); color: #06240f; font-weight: 700; font-size: .92rem;
  box-shadow: 0 16px 36px -14px rgba(37,211,102,.65), 0 0 0 6px rgba(37,211,102,.12);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover { transform: translateY(-3px) scale(1.02); color: #04200d; box-shadow: 0 22px 46px -16px rgba(37,211,102,.75), 0 0 0 8px rgba(37,211,102,.16); }
.wa-float .ico { width: 22px; height: 22px; color: #06240f; }
@media (max-width: 620px) {
  .wa-float { padding: .78rem; border-radius: 50%; }
  .wa-float-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* --- Checkout ------------------------------------------------------------- */
.checkout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 3vw, 2.6rem); align-items: start; }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } }
.choice { display: grid; gap: .7rem; margin-bottom: 1.6rem; }
.choice > label {
  display: flex; gap: .85rem; align-items: flex-start; cursor: pointer;
  padding: 1rem 1.15rem; border-radius: var(--r); border: 1px solid var(--line);
  background: rgba(255,255,255,.032); transition: border-color .18s ease, background .18s ease;
}
.choice > label:hover { border-color: var(--line-strong); }
.choice input { margin: 4px 0 0; accent-color: var(--blue); width: 18px; height: 18px; flex: 0 0 auto; }
.choice input:checked ~ .ch-txt b { color: var(--blue-300); }
.choice > label:has(input:checked) { border-color: var(--blue); background: rgba(212,15,31,.11); }
.ch-txt b { display: block; font-family: var(--f-head); font-size: 1rem; color: #fff; }
.ch-txt span { font-size: .85rem; color: var(--ink-3); }
.fieldset { border: 0; padding: 0; margin: 0 0 1.6rem; }
.fieldset legend { font-family: var(--f-head); font-weight: 700; font-size: 1.05rem; color: #fff; padding: 0; margin-bottom: .9rem; }
.summary-row { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.summary-row:last-of-type { border-bottom: 0; }
.summary-row span:first-child { color: var(--ink-3); }
.summary-row span:last-child { color: #fff; font-weight: 600; text-align: right; }

/* --- Utility -------------------------------------------------------------- */
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.stack > * + * { margin-top: 1.1rem; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Reveal-on-scroll (progressive enhancement; content visible without JS) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   v2 — cinematic hero, brand strip, richer pricing cards, screens stepper
   ========================================================================== */

/* --- Brand lockup --------------------------------------------------------- */
.brand img { width: 42px; height: 42px; }
.brand-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1; }
.brand-txt b {
  font-size: 1.16rem; font-weight: 800; letter-spacing: -.02em;
  background: linear-gradient(100deg, #fff 20%, var(--blue-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.brand-txt .bt-row {
  display: flex; align-items: center; gap: .34rem;
  font-size: .625rem; font-weight: 600; letter-spacing: .3em; color: var(--ink-3);
}
.brand-txt em {
  font-style: normal; letter-spacing: .12em; font-weight: 800; font-size: .6rem;
  padding: .16rem .34rem; border-radius: 5px; color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--violet));
}

/* --- Cinematic hero ------------------------------------------------------- */
.hero-cine { padding: clamp(3rem, 7vw, 6.5rem) 0 clamp(2.6rem, 5vw, 4.5rem); text-align: center; isolation: isolate; }
.hero-inner { position: relative; z-index: 2; max-width: 940px; }

.hero-bg { position: absolute; inset: -1px 0 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg > span { position: absolute; inset: 0; display: block; }
/* screen-glow spill across the top */
.hb-screen {
  background:
    radial-gradient(120% 78% at 50% -18%, rgba(255,138,138,.20), transparent 58%),
    radial-gradient(90% 60% at 50% -6%, rgba(212,15,31,.24), transparent 62%);
}
/* slatted wall, fading in from the left like a dim room */
.hb-slats {
  background: repeating-linear-gradient(90deg,
    rgba(255,150,140,.075) 0 2px, transparent 2px 26px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 46%);
  mask-image: linear-gradient(90deg, #000 0%, transparent 46%);
  opacity: .8;
}
/* soft floor pool of light */
.hb-floor {
  background: radial-gradient(60% 42% at 50% 108%, rgba(255,43,61,.20), transparent 70%);
}
.hb-grid {
  background-image:
    linear-gradient(rgba(255,150,140,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,150,140,.05) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 78%);
}

.badge {
  display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1.5rem;
  padding: .42rem .95rem .42rem .8rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--blue-300); background: rgba(212,15,31,.10);
  border: 1px solid rgba(212,15,31,.30);
}
.badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(255,138,138,.16);
}

.hero-cine h1 { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.3rem; }
.h1-brand {
  font-size: clamp(2rem, 1.2rem + 3.4vw, 3.6rem); line-height: 1;
  background: linear-gradient(100deg, var(--cyan) 0%, var(--blue) 45%, var(--violet) 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h1-main { font-size: clamp(1.8rem, 1.05rem + 3.1vw, 3.25rem); line-height: 1.08; color: #fff; }
.hero-cine .hero-lead {
  max-width: 62ch; margin: 0 auto 2rem; color: var(--ink-2);
  font-size: clamp(1rem, .95rem + .35vw, 1.14rem);
}
.hero-cine .hero-actions { justify-content: center; margin-bottom: 2.6rem; }
.hero-cine .hero-actions .btn { padding: 1rem 1.6rem; }
@media (max-width: 520px) {
  .hero-cine .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-cine .hero-actions .btn { width: 100%; }
}

.chips-hero { justify-content: center; margin: 2.2rem 0 0; }

/* --- Logo strips (brands + payments) -------------------------------------- */
.logo-strip { margin: 0 auto; max-width: 940px; }
.strip-label {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 1rem;
}
.strip-label .ico { width: 15px; height: 15px; color: var(--blue-300); }

.logo-row, .pay-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem;
}
.logo-tile, .pay-tile {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 84px; height: 46px; padding: 0 .95rem; border-radius: 12px;
  background: rgba(255,255,255,.045); border: 1px solid var(--line);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.logo-tile:hover, .pay-tile:hover {
  border-color: var(--line-strong); background: rgba(255,255,255,.08); transform: translateY(-2px);
}
/* Monochrome brand SVGs (e.g. Simple Icons ship black) are flipped to white.
   Add class="keep-colour" to an <img> to opt a full-colour logo out. */
.logo-tile img, .pay-tile img {
  max-height: 22px; width: auto; opacity: .82;
  filter: brightness(0) invert(1);
  transition: opacity .2s ease;
}
.logo-tile:hover img, .pay-tile:hover img { opacity: 1; }
.logo-tile img.keep-colour, .pay-tile img.keep-colour { filter: none; opacity: 1; }
.logo-tile.is-text span, .pay-tile.is-text span {
  font-family: var(--f-head); font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.logo-tile:hover.is-text span { color: #fff; }
@media (max-width: 520px) {
  .logo-tile, .pay-tile { min-width: 68px; height: 40px; padding: 0 .7rem; }
  .logo-tile.is-text span, .pay-tile.is-text span { font-size: .68rem; letter-spacing: .07em; }
}

.strip-more { margin: 1.4rem 0 0; font-size: .88rem; }
.strip-more a { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-3); }
.strip-more a:hover { color: var(--blue-300); }
.strip-more .ico { width: 15px; height: 15px; }

/* --- Payments ------------------------------------------------------------- */
.pay-strip { margin-top: clamp(2.4rem, 4vw, 3.4rem); text-align: center; }
.pay-note {
  max-width: 60ch; margin: 1.2rem auto 0; font-size: .86rem; color: var(--ink-3); line-height: 1.65;
}

/* --- Devices -------------------------------------------------------------- */
.dev-sep {
  height: 1px; max-width: 940px; margin: clamp(2rem, 3.5vw, 3rem) auto;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.devtile { position: relative; padding: 1.6rem 1rem 1.4rem; overflow: hidden; }
.devtile::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(80% 70% at 50% 0%, rgba(212,15,31,.22), transparent 70%);
}
.devtile:hover::before { opacity: 1; }
.devtile > * { position: relative; }
.dt-ico {
  display: grid; place-items: center; width: 62px; height: 62px; border-radius: 16px;
  background: linear-gradient(150deg, rgba(212,15,31,.16), rgba(255,43,61,.10));
  border: 1px solid rgba(255,154,144,.20); margin-bottom: .3rem;
  transition: border-color .25s ease;
}
.devtile:hover .dt-ico { border-color: rgba(255,154,144,.5); }
.dt-sub { font-size: .74rem; color: var(--ink-3); }
.dt-go {
  display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem;
  font-size: .74rem; font-weight: 600; color: var(--blue-300);
  opacity: 0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease;
}
.dt-go .ico { width: 13px; height: 13px; }
.devtile:hover .dt-go { opacity: 1; transform: none; }
@media (hover: none) { .dt-go { opacity: .75; transform: none; } }

/* --- Pricing cards, v2 ---------------------------------------------------- */
.pricing { gap: 1.4rem; }
.plan { padding: 2rem 1.6rem 1.7rem; overflow: hidden; }
.plan::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 160px; pointer-events: none;
  background: radial-gradient(90% 100% at 50% 0%, rgba(212,15,31,.14), transparent 72%);
}
.plan.featured::before { background: radial-gradient(90% 100% at 50% 0%, rgba(255,43,61,.24), transparent 72%); }
.plan > * { position: relative; }

.plan-tier {
  font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--blue-300); margin: 0 0 .35rem;
}
.plan.featured .plan-tier {
  background: linear-gradient(100deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

.plan .price {
  display: flex; align-items: flex-start; gap: .12rem; margin: .55rem 0 .3rem;
  font-family: var(--f-head); font-weight: 800; color: #fff; line-height: 1;
}
.plan .price .cur { font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); margin-top: .28em; color: var(--blue-300); }
.plan .price .whole { font-size: clamp(2.6rem, 2rem + 2.2vw, 3.6rem); letter-spacing: -.035em; }
.plan .price .cents { font-size: clamp(1.1rem, .95rem + .5vw, 1.4rem); margin-top: .3em; }
.plan.featured .price .whole {
  background: linear-gradient(100deg, #fff 30%, var(--blue-300));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.plan .price-raw {
  font-family: var(--f-head); font-weight: 800; color: #fff; line-height: 1.15;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); margin: .55rem 0 .3rem;
  overflow-wrap: anywhere;
}
.plan-term { font-size: .82rem; color: var(--ink-3); margin: 0 0 1.1rem; }

.plan-bonus {
  display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 1.2rem;
  padding: .7rem .9rem; border-radius: 12px; font-size: .86rem; color: var(--ink-2);
  background: rgba(212,15,31,.10); border: 1px solid rgba(212,15,31,.26);
}
.plan-bonus .ico { width: 16px; height: 16px; color: var(--cyan); margin-top: 2px; stroke-width: 2.6; }
.plan-bonus strong, .plan-bonus b { color: var(--blue-300); }

/* --- Screens stepper ------------------------------------------------------ */
.screens { margin: 0 0 1.4rem; }
.st-label {
  font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .5rem; text-align: center;
}
.st-label:empty { display: none; }
.stepper {
  display: grid; grid-template-columns: 46px 1fr 46px; align-items: center;
  border-radius: 14px; border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.035); overflow: hidden;
}
.plan.featured .stepper { border-color: rgba(255,154,144,.45); background: rgba(212,15,31,.10); }
.st-btn {
  height: 56px; border: 0; background: transparent; cursor: pointer;
  color: var(--ink); font-size: 1.35rem; line-height: 1; font-family: var(--f-body);
  transition: background .18s ease, color .18s ease;
}
.st-btn:hover:not(:disabled) { background: rgba(255,255,255,.07); color: var(--blue-300); }
.st-btn:disabled { opacity: .28; cursor: not-allowed; }
.st-val { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.st-val .st-n { font-family: var(--f-head); font-size: 1.25rem; font-weight: 700; color: #fff; line-height: 1; }
.st-val .st-unit { font-size: .6rem; letter-spacing: .18em; color: var(--ink-3); }
.st-note { margin: .7rem 0 0; text-align: center; font-size: .8rem; color: var(--ink-3); }
.st-note b { color: var(--blue-300); font-weight: 700; }
.st-note:has(b:empty) { display: none; }

.choice-stepper .stepper { max-width: 260px; }
.choice-stepper .screens { margin-bottom: 0; }

.plan-feats { margin-bottom: 1.6rem; }
.plan .btn-block { margin-top: auto; }

/* --- Section spacing tweaks ---------------------------------------------- */
.sec-cta + .site-foot { margin-top: 0; }

/* --- v2 fixes ------------------------------------------------------------- */
/* .plan > * lifts content above the card glow, but must not flatten the badge */
.plan > .plan-tag {
  position: absolute; display: inline-flex; align-items: center;
  top: -13px; left: 50%; transform: translateX(-50%); width: auto;
}
.plan { overflow: visible; }
.plan::before { border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* the install link under the brand strip is navigation, not prose */
.strip-more a { text-decoration: none; }
.strip-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* balance the brand strip so it wraps evenly rather than 8 + 4 */
.logo-row { max-width: 820px; margin-inline: auto; }

/* Device tiles: keep the setup-guide cue visible so the tile is not bottom-empty */
.dt-go { opacity: .6; transform: none; }
.devtile:hover .dt-go { opacity: 1; }
.devtile { padding: 1.5rem 1rem 1.25rem; gap: .5rem; }

/* ==========================================================================
   v3 — four-tier pricing with a wide Exclusive card, WhatsApp chat widget
   ========================================================================== */

/* --- Wide (Exclusive) plan card ------------------------------------------ */
.plan-wide {
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: minmax(250px, .95fr) minmax(320px, 1.7fr) minmax(200px, .7fr);
  gap: clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
  padding: 2.2rem clamp(1.5rem, 3vw, 2.4rem) 2rem;
  border-color: rgba(255, 154, 144, .38);
  background:
    radial-gradient(70% 130% at 12% 0%, rgba(255, 43, 61, .20), transparent 62%),
    linear-gradient(150deg, rgba(34, 14, 17, .82), rgba(14, 12, 14, .78));
}
.plan-wide::before { display: none; }
@media (max-width: 980px) { .plan-wide { grid-template-columns: 1fr 1fr; } .plan-wide .pw-cta { grid-column: 1 / -1; } }
@media (max-width: 700px) { .plan-wide { grid-template-columns: 1fr; } }

.plan-tag-corner {
  position: absolute; top: -14px; left: clamp(1.5rem, 3vw, 2.4rem);
  transform: none; display: inline-flex; align-items: center; gap: .35rem;
  background: linear-gradient(135deg, var(--cyan), var(--blue) 60%, var(--violet));
}
.plan-tag-corner .ico { width: 13px; height: 13px; }
.plan-wide > .plan-tag { left: clamp(1.5rem, 3vw, 2.4rem); transform: none; }

.plan-wide .pw-price > *:last-child { margin-bottom: 0; }
.plan-wide .pw-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(1rem, 2.5vw, 2rem); }
@media (max-width: 700px) { .plan-wide .pw-feats { grid-template-columns: 1fr; } }
.plan-wide .plan-feats { margin-bottom: 0; }
.plan-wide .pw-cta { align-self: center; }
.plan-wide .pw-cta .btn { margin-top: 0; }
.plan-wide .note { margin-top: .9rem; }
.plan-wide .screens { margin-bottom: 0; }
.plan-wide h3, .plan-wide h2 { margin-bottom: .1rem; }

/* --- WhatsApp chat widget ------------------------------------------------- */
.wa-widget {
  position: fixed; z-index: 80;
  right: clamp(.85rem, 2.5vw, 1.6rem);
  bottom: clamp(.85rem, 2.5vw, 1.6rem);
  display: flex; flex-direction: column; align-items: flex-end; gap: .7rem;
}
.wa-widget .wa-float { position: static; }

.wa-badge {
  position: absolute; top: -5px; right: -4px;
  min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  background: #ff2b3d; color: #fff; font-size: .68rem; font-weight: 700;
  border: 2px solid var(--bg); line-height: 1;
}
.wa-widget.is-open .wa-badge { display: none; }

.wa-panel {
  width: min(330px, calc(100vw - 2rem));
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(20, 14, 16, .98), rgba(12, 10, 12, .98));
  border: 1px solid var(--line-strong);
  box-shadow: 0 30px 70px -26px rgba(3, 3, 4, .95);
  backdrop-filter: blur(14px);
  animation: waIn .24s cubic-bezier(.2, .9, .3, 1.1) both;
}
.wa-panel[hidden] { display: none !important; }
@keyframes waIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .wa-panel { animation: none; } }

.wa-head {
  display: flex; align-items: center; gap: .7rem; padding: .95rem 1rem;
  background: linear-gradient(135deg, #128c4a, #0e6c39);
}
.wa-av {
  width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.16); color: #fff;
}
.wa-av .ico { width: 22px; height: 22px; }
.wa-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wa-who b { color: #fff; font-family: var(--f-head); font-size: .95rem; }
.wa-who span { color: rgba(255,255,255,.75); font-size: .78rem; }
.wa-close {
  margin-left: auto; width: 28px; height: 28px; flex: 0 0 auto; border: 0; cursor: pointer;
  border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
  font-size: 1.15rem; line-height: 1; display: grid; place-items: center;
  transition: background .18s ease;
}
.wa-close:hover { background: rgba(255,255,255,.28); }

.wa-body {
  padding: 1.1rem 1rem;
  background:
    radial-gradient(60% 50% at 20% 0%, rgba(212,15,31,.10), transparent 70%),
    rgba(8, 8, 11, .5);
}
.wa-bubble {
  position: relative; padding: .9rem 1rem .8rem; border-radius: 4px 14px 14px 14px;
  background: rgba(255,255,255,.055); border: 1px solid var(--line);
}
.wa-bubble p { margin: 0 0 .5rem; font-size: .89rem; color: var(--ink-2); line-height: 1.6; }
.wa-bubble p:last-of-type { margin-bottom: .3rem; }
.wa-bubble strong { color: #fff; }
.wa-status {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; color: var(--ink-3);
}
.wa-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wa);
  box-shadow: 0 0 0 3px rgba(37,211,102,.18);
}

.wa-foot { padding: .3rem 1rem 1.1rem; }
.wa-foot .btn { padding: .85rem 1.1rem; }
.wa-foot p {
  margin: .8rem 0 0; text-align: center; font-size: .76rem; color: var(--ink-3); line-height: 1.5;
}
.wa-foot p b { color: var(--ink-2); font-weight: 600; }

@media (max-width: 620px) {
  .wa-widget .wa-float { padding: .78rem; border-radius: 50%; }
  .wa-panel { width: calc(100vw - 1.7rem); }
}

/* --- v3 fixes ------------------------------------------------------------- */
/* The featured price used a clipped gradient that rendered as a vertical fade.
   A solid accent colour reads better and matches the reference. */
.plan.featured .price .whole {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--cyan);
}
.plan.featured .price .cur, .plan.featured .price .cents { color: var(--cyan); }

/* Keep the screens control aligned across cards when a tier has no bonus banner */
/* Same box as a real bonus banner, just invisible — keeps the rows aligned */
.plan-bonus-spacer { visibility: hidden; }
@media (max-width: 900px) { .plan-bonus-spacer { display: none; } }
.plan-wide .plan-bonus-spacer { display: none; }

/* Per-screen price and its discount note sit on separate lines */
.st-note { line-height: 1.5; }
.st-note .st-discount { display: block; font-size: .75rem; opacity: .85; }

/* --- Brand compatibility grid (v4) --------------------------------------- */
.brandgrid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem;
  max-width: 1120px; margin-inline: auto;
}
@media (max-width: 1080px) { .brandgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .brandgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 460px)  { .brandgrid { grid-template-columns: repeat(2, 1fr); } }

.brandtile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
  padding: 1.5rem .8rem 1.3rem; border-radius: var(--r);
  background: rgba(255,255,255,.035); border: 1px solid var(--line); color: var(--ink);
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.brandtile::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease;
  background: radial-gradient(80% 70% at 50% 0%, rgba(212,15,31,.20), transparent 70%);
}
.brandtile:hover { transform: translateY(-4px); border-color: var(--blue); color: #fff; }
.brandtile:hover::before { opacity: 1; }
.brandtile > * { position: relative; }

.bt-logo {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px;
  margin-bottom: .55rem;
  background: linear-gradient(150deg, rgba(212,15,31,.14), rgba(255,43,61,.09));
  border: 1px solid rgba(255,154,144,.18);
  transition: border-color .25s ease, background .25s ease;
}
.brandtile:hover .bt-logo {
  border-color: rgba(255,154,144,.55);
  background: linear-gradient(150deg, rgba(212,15,31,.26), rgba(255,43,61,.16));
}
/* Simple Icons ship solid black glyphs — flip them to white for a dark UI */
.bt-logo img { width: 30px; height: 30px; filter: brightness(0) invert(1); opacity: .88; transition: opacity .25s ease; }
.brandtile:hover .bt-logo img { opacity: 1; }
.bt-logo img.keep-colour { filter: none; opacity: 1; }
/* Text stand-in where no openly-licensed logo exists */
.bt-word {
  font-family: var(--f-head); font-size: .68rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); line-height: 1.1; padding: 0 .2rem;
}
.brandtile:hover .bt-word { color: #fff; }

.brandtile b { font-size: .95rem; font-weight: 650; font-family: var(--f-head); line-height: 1.25; }
.bt-sub { font-size: .74rem; color: var(--ink-3); line-height: 1.35; }

.brand-note {
  max-width: 68ch; margin: clamp(1.8rem, 3vw, 2.6rem) auto 0;
  text-align: center; font-size: .82rem; line-height: 1.7; color: var(--ink-3);
}

/* Wordmark logos (Samsung, Sony) read small when height-capped — give the
   hero strip a little more room and contrast */
.logo-tile { min-width: 92px; }
.logo-tile img, .pay-tile img { max-height: 25px; opacity: .9; }

/* --- Hero photograph (v5) ------------------------------------------------- */
/* Sits behind the coded backdrop layers. The veil above it is what keeps the
   headline readable — the photo is bright on the right-hand side. */
.hb-photo {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
}
@media (max-width: 900px) {
  .hb-photo {
    opacity: .72;
  }
}
/* A soft scrim sits behind the text column only, so the room stays visible at
   the edges while the headline keeps its contrast. */
.hb-veil {
  background:
    radial-gradient(44% 52% at 50% 40%, rgba(8,8,11,.86) 0%, rgba(8,8,11,.58) 55%, rgba(8,8,11,0) 100%),
    linear-gradient(180deg, rgba(8,8,11,.62) 0%, rgba(8,8,11,.14) 24%, rgba(8,8,11,.48) 74%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, rgba(8,8,11,.15) 17%, rgba(8,8,11,.15) 83%, var(--bg) 100%);
}
/* The coded layers stay, dialled back so they read as atmosphere over the photo */
.hero-cine .hb-slats { display: none; }
.hero-cine .hb-screen { opacity: .55; }
.hero-cine .hb-floor { opacity: .5; }
.hero-cine .hb-grid { opacity: .35; }
/* A touch more weight behind the type now that there is a photo underneath */
.hero-cine .h1-main, .hero-cine .h1-brand { text-shadow: 0 2px 24px rgba(3,3,4,.55); }
.hero-cine .hero-lead { text-shadow: 0 1px 14px rgba(3,3,4,.6); color: #d8cfcd; }

/* --- Compact order modal (v5) -------------------------------------------- */
.modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none !important; }
.modal-scrim { position: absolute; inset: 0; background: rgba(3, 6, 18, .74); backdrop-filter: blur(6px); }

.modal-card {
  position: relative; width: min(400px, 100%); max-height: calc(100vh - 2rem); overflow-y: auto;
  padding: 1.7rem 1.5rem 1.5rem; border-radius: var(--r-lg);
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(212,15,31,.16), transparent 68%),
    linear-gradient(175deg, rgba(24,18,20,.98), rgba(12,10,12,.98));
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px -30px rgba(3,3,4,1);
  animation: omIn .22s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes omIn { from { opacity: 0; transform: translateY(16px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .modal-card { animation: none; } }

.modal-card .kicker { margin-bottom: .5rem; }
.modal-card h2 { font-size: 1.35rem; margin-bottom: 1.1rem; }
.modal-x {
  position: absolute; top: .9rem; right: .9rem; width: 30px; height: 30px; z-index: 2;
  border: 1px solid var(--line); border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.06); color: var(--ink-2); font-size: 1.2rem; line-height: 1;
  display: grid; place-items: center; transition: background .18s ease, color .18s ease;
}
.modal-x:hover { background: rgba(255,255,255,.14); color: #fff; }

.om-plan {
  display: grid; gap: .18rem; padding: .95rem 1.05rem; margin-bottom: 1.2rem;
  border-radius: 14px; background: rgba(212,15,31,.10); border: 1px solid rgba(212,15,31,.28);
}
.om-name { font-family: var(--f-head); font-weight: 700; font-size: 1.02rem; color: #fff; }
.om-price { font-family: var(--f-head); font-weight: 800; font-size: 1.6rem; color: var(--cyan); line-height: 1.1; }
.om-term { font-size: .8rem; color: var(--ink-3); }
.om-bonus { font-size: .8rem; color: var(--blue-300); font-weight: 600; margin-top: .2rem; }
.om-bonus[hidden] { display: none; }

.om-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .5rem;
}
.om-label label { cursor: pointer; }
.modal .screens { margin-bottom: 1.2rem; }
.modal .stepper { max-width: 100%; }

.om-select {
  width: 100%; margin-bottom: 1.3rem; padding: .85rem 1rem; border-radius: 12px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); color: var(--ink);
  font-family: var(--f-body); font-size: .94rem; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--blue-300) 50%),
                    linear-gradient(135deg, var(--blue-300) 50%, transparent 50%);
  background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.om-select:focus { border-color: var(--blue); outline: none; }
.om-select option { background: #17171b; color: var(--ink); }

.om-note { font-size: .78rem; color: var(--ink-3); line-height: 1.6; margin: .9rem 0 0; text-align: center; }
.om-alt { margin: .7rem 0 0; text-align: center; font-size: .8rem; }
.om-alt a { color: var(--ink-3); }
.om-alt a:hover { color: var(--blue-300); }

@media (max-width: 420px) { .modal-card { padding: 1.4rem 1.15rem 1.25rem; } }

/* --- Hero photo on phones: frame the room, not the empty left wall -------- */
@media (max-width: 900px) { .hb-photo { background-position: 58% center; } }

/* ==========================================================================
   v6 — full checkout pop-up, launch promotion, payment marks
   ========================================================================== */

/* Card marks are wider than brand glyphs and need more room */
.pay-tile { min-width: 104px; height: 52px; }
.pay-tile img { max-height: 30px; opacity: .92; }

/* --- Checkout pop-up ------------------------------------------------------ */
.modal-checkout { width: min(440px, 100%); padding-bottom: 1.3rem; }
.modal-checkout .om-label { margin-top: 1.15rem; }
.modal-checkout .om-label:first-of-type { margin-top: 0; }

.om-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: .45rem; }
@media (max-width: 400px) { .om-plans { grid-template-columns: repeat(2, 1fr); } }
.om-planbtn {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .7rem .3rem .65rem; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: var(--ink-2); font-family: var(--f-body);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.om-planbtn:hover { border-color: var(--line-strong); color: #fff; }
.om-planbtn.is-on {
  border-color: var(--blue); background: rgba(212,15,31,.16); color: #fff;
  box-shadow: 0 6px 18px -10px var(--glow);
}
.opb-tier { font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.opb-price { font-family: var(--f-head); font-weight: 800; font-size: 1rem; color: #fff; }
.om-planbtn.is-on .opb-price { color: var(--cyan); }
.opb-term { font-size: .62rem; opacity: .65; }

.om-screens { display: grid; grid-template-columns: repeat(6, 1fr); gap: .4rem; }
.om-screen {
  height: 44px; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--line);
  color: var(--ink-2); font-family: var(--f-head); font-weight: 700; font-size: .98rem;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.om-screen:hover:not(:disabled) { border-color: var(--line-strong); color: #fff; }
.om-screen.is-on {
  border-color: var(--blue); color: #fff;
  background: linear-gradient(140deg, var(--blue), var(--violet));
  box-shadow: 0 8px 20px -10px var(--glow);
}
.om-screen:disabled { opacity: .3; cursor: not-allowed; }

.om-hint { font-size: .76rem; color: var(--ink-3); line-height: 1.55; margin: .6rem 0 0; }

.om-summary {
  margin: 1.2rem 0 0; padding: 1rem 1.1rem; border-radius: 14px;
  background: rgba(212,15,31,.09); border: 1px solid rgba(212,15,31,.26);
}
.om-row { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .32rem 0; font-size: .88rem; }
.om-row span { color: var(--ink-3); }
.om-row b { color: #fff; font-weight: 600; text-align: right; }
.om-total { margin-top: .55rem; padding-top: .7rem; border-top: 1px solid rgba(255,154,144,.24); }
.om-total span { color: var(--ink-2); font-size: .95rem; }
.om-total b { font-family: var(--f-head); font-weight: 800; font-size: 1.45rem; color: var(--cyan); }

.om-input {
  width: 100%; padding: .8rem .95rem; border-radius: 12px;
  background: rgba(255,255,255,.045); border: 1px solid var(--line-strong);
  color: var(--ink); font-family: var(--f-body); font-size: .94rem;
}
.om-input::placeholder { color: #8b8280; }
.om-input:focus { outline: none; border-color: var(--blue); background: rgba(212,15,31,.08); }

.om-phone { display: grid; grid-template-columns: 108px 1fr; gap: .5rem; }
.om-cc {
  padding: .8rem .6rem; border-radius: 12px; cursor: pointer;
  background: rgba(255,255,255,.045); border: 1px solid var(--line-strong);
  color: var(--ink); font-family: var(--f-body); font-size: .94rem;
}
.om-cc:focus { outline: none; border-color: var(--blue); }
.om-cc option, .om-select option { background: #17171b; color: var(--ink); }

.om-error {
  margin: .9rem 0 0; padding: .7rem .9rem; border-radius: 11px; font-size: .85rem;
  color: #ffd3d3; background: rgba(255,74,58,.12); border: 1px solid rgba(255,74,58,.34);
}
.om-error[hidden] { display: none; }

.om-cta { margin-top: 1.2rem; padding: 1rem 1.2rem; }
.om-secure {
  display: flex; gap: .55rem; align-items: flex-start;
  margin: .9rem 0 0; font-size: .76rem; line-height: 1.6; color: var(--ink-3);
}
.om-secure .ico { width: 15px; height: 15px; color: var(--wa); flex: 0 0 auto; margin-top: 2px; }
.om-cancel {
  display: block; width: 100%; margin: .7rem 0 0; padding: .5rem; border: 0; cursor: pointer;
  background: none; color: var(--ink-3); font-family: var(--f-body); font-size: .84rem;
}
.om-cancel:hover { color: var(--ink-2); text-decoration: underline; }

.om-promo-flag {
  margin: 0 0 1rem; padding: .65rem .9rem; border-radius: 11px; font-size: .82rem; font-weight: 600;
  color: #ffe4e2; background: rgba(37,211,102,.13); border: 1px solid rgba(37,211,102,.34);
}
.om-promo-flag[hidden] { display: none; }

/* --- Launch promotion ----------------------------------------------------- */
.promo-card { width: min(400px, 100%); text-align: center; padding: 2rem 1.6rem 1.5rem; }
.promo-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .9rem;
  padding: .34rem .85rem; border-radius: 999px;
  font-size: .68rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #06240f; background: linear-gradient(135deg, var(--cyan), var(--wa));
}
.promo-eyebrow .ico { width: 13px; height: 13px; }
.promo-card h2 { font-size: 1.5rem; margin-bottom: .8rem; }
.promo-price { display: flex; align-items: baseline; justify-content: center; gap: .6rem; margin: 0 0 1rem; }
.promo-now { font-family: var(--f-head); font-weight: 800; font-size: 2.8rem; line-height: 1; color: var(--cyan); }
.promo-was { font-size: 1.05rem; color: var(--ink-3); text-decoration: line-through; }
.promo-body { font-size: .93rem; color: var(--ink-2); line-height: 1.65; margin: 0 0 1.5rem; }

/* ==========================================================================
   v7 — connections row, full country picker, WhatsApp buttons retired
   ========================================================================== */

/* --- Connections row (replaces the six screen buttons) -------------------- */
.om-conn {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin: 0; padding: 1rem 1.15rem; border-radius: 16px;
  background: rgba(255,255,255,.035); border: 1px solid var(--line-strong);
}
.om-conn-txt { min-width: 0; }
.om-conn-txt b {
  display: block; font-family: var(--f-head); font-weight: 700;
  font-size: 1.05rem; color: #fff; line-height: 1.25;
}
.om-conn-txt span { display: block; font-size: .8rem; color: var(--ink-3); line-height: 1.5; margin-top: .18rem; }
.om-conn-step { display: flex; align-items: center; gap: .55rem; flex: 0 0 auto; }
.om-cbtn {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; padding: 0;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-strong);
  color: var(--ink); font-size: 1.25rem; line-height: 1; font-family: var(--f-body);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.om-cbtn:hover:not(:disabled) { border-color: var(--blue); color: #fff; background: rgba(212,15,31,.16); }
.om-cbtn:disabled { opacity: .28; cursor: not-allowed; }
.om-cn {
  min-width: 2ch; text-align: center;
  font-family: var(--f-head); font-weight: 800; font-size: 1.35rem; color: var(--cyan);
}
@media (max-width: 420px) {
  .om-conn { padding: .85rem .95rem; }
  .om-conn-txt b { font-size: .98rem; }
  .om-cbtn { width: 38px; height: 38px; }
}

/* --- Country picker ------------------------------------------------------- */
.om-ccwrap { position: relative; }
.om-ccbtn {
  width: 100%; height: 100%; min-height: 46px; cursor: pointer;
  display: flex; align-items: center; gap: .38rem; padding: .55rem .6rem;
  border-radius: 12px; background: rgba(255,255,255,.045);
  border: 1px solid var(--line-strong); color: var(--ink);
  font-family: var(--f-body); font-size: .94rem; line-height: 1;
  transition: border-color .16s ease, background .16s ease;
}
.om-ccbtn:hover { border-color: var(--blue); }
.om-ccbtn[aria-expanded="true"] { border-color: var(--blue); background: rgba(212,15,31,.1); }
.om-ccf { font-size: 1.15rem; line-height: 1; }
.om-ccd { font-weight: 600; letter-spacing: -.01em; }
.om-ccx {
  margin-left: auto; width: 0; height: 0; flex: 0 0 auto;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ink-3);
}

.om-ccpanel {
  position: absolute; z-index: 5; top: calc(100% + .4rem); left: 0;
  width: min(304px, 78vw); padding: .5rem;
  border-radius: 14px; border: 1px solid var(--line-strong);
  background: #131316; box-shadow: var(--shadow-lg);
}
.om-ccpanel[hidden] { display: none; }
.om-ccsearch {
  width: 100%; padding: .55rem .7rem; margin-bottom: .4rem; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  color: var(--ink); font-family: var(--f-body); font-size: .88rem;
}
.om-ccsearch::placeholder { color: #8b8280; }
.om-ccsearch:focus { outline: none; border-color: var(--blue); }
.om-cclist {
  list-style: none; margin: 0; padding: 0;
  max-height: 254px; overflow-y: auto; overscroll-behavior: contain;
}
.om-ccopt {
  display: flex; align-items: center; gap: .55rem; margin: 0;
  padding: .5rem .55rem; border-radius: 9px; cursor: pointer; font-size: .88rem;
}
.om-ccopt b { flex: 1 1 auto; font-weight: 500; color: var(--ink-2); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-ccopt i { font-style: normal; color: var(--ink-3); font-size: .84rem; flex: 0 0 auto; }
.om-ccopt:hover, .om-ccopt.is-cursor { background: rgba(255,255,255,.07); }
.om-ccopt:hover b, .om-ccopt.is-cursor b { color: #fff; }
.om-ccopt.is-on { background: rgba(212,15,31,.18); }
.om-ccopt.is-on b { color: #fff; }
.om-ccopt.is-on i { color: var(--blue-300); }
.om-ccopt[hidden] { display: none; }
.om-ccnone { margin: .5rem .55rem; font-size: .84rem; color: var(--ink-3); }

/* The phone row keeps the code control narrow; the picker panel is what grows */
.om-phone { grid-template-columns: 112px 1fr; align-items: stretch; }

/* --- Header without the WhatsApp button ----------------------------------- */
/* The chat widget in the corner is the only WhatsApp entry point now, so the
   header keeps just the menu button on small screens. */
.head-cta:empty { display: none; }

/* The hero photograph is now cropped so the family sits in the middle of the
   frame; a touch below centre vertically keeps their heads clear of the crop. */
.hb-photo { background-position: center 58%; }
@media (max-width: 900px) { .hb-photo { background-position: center 58%; } }
/* the search reorders matches, so the list needs to be a flex column */
.om-cclist { display: flex; flex-direction: column; }

/* ==========================================================================
   v8 — deeper backdrop, animated open/close, offer card takes the details
   ========================================================================== */

/* --- Backdrop ------------------------------------------------------------- */
/* The page behind a modal is pushed well back: a near-opaque wash, a stronger
   blur and a slight desaturation, so nothing competes with the card. */
.modal-scrim {
  background: radial-gradient(120% 90% at 50% 40%, rgba(3,6,18,.78), rgba(2,4,12,.94));
  backdrop-filter: blur(14px) saturate(.72);
  -webkit-backdrop-filter: blur(14px) saturate(.72);
  opacity: 0;
  transition: opacity .24s ease;
}
.modal.is-open .modal-scrim { opacity: 1; }

/* --- Open / close transition ---------------------------------------------- */
/* The card animates in from slightly small and low, and reverses on close.
   The keyframe version is dropped so one mechanism owns both directions. */
.modal-card {
  animation: none;
  opacity: 0;
  transform: translateY(14px) scale(.965);
  transition: opacity .24s ease, transform .26s cubic-bezier(.2,.9,.3,1.06);
  will-change: opacity, transform;
}
.modal.is-open .modal-card { opacity: 1; transform: none; }
.modal-card { box-shadow: 0 50px 120px -30px rgba(0,0,0,.92), 0 0 0 1px rgba(255,154,144,.10); }

@media (prefers-reduced-motion: reduce) {
  .modal-scrim, .modal-card { transition: none; }
  .modal-card { opacity: 1; transform: none; }
  .modal-scrim { opacity: 1; }
}

/* --- The offer card now collects the order -------------------------------- */
.promo-card { width: min(420px, 100%); }
.promo-body { margin-bottom: 1.2rem; }
.promo-form { text-align: left; }
.promo-form .om-label { margin-top: .9rem; }
.promo-form .om-label:first-child { margin-top: 0; }
.promo-cta { margin-top: 1.2rem; }
.promo-card .om-secure { margin-top: .9rem; text-align: left; }
.promo-card .om-error { text-align: left; }
/* the offer's own picker opens upwards on short screens rather than off-card */
.promo-card .om-ccpanel { width: min(288px, 74vw); }

/* --- Order buttons are the site's blue, not WhatsApp green ---------------- */
/* The chat widget keeps the green button; completing an order is a primary
   action, so it takes the primary treatment. */
.om-cta, .promo-cta { padding: 1.05rem 1.4rem; font-size: 1rem; }
.om-cta .ico, .promo-cta .ico { width: 17px; height: 17px; transition: transform .18s ease; }
.om-cta:hover .ico, .promo-cta:hover .ico { transform: translateX(3px); }

/* --- The offer card's fields get room to breathe ------------------------- */
/* The blocks were sitting on top of one another; each field now reads as its
   own step, with a rule separating the offer copy from the form. */
.promo-card { padding: 2.1rem 1.7rem 1.6rem; }
.promo-body { margin-bottom: 1.7rem; }
.promo-form { padding-top: 1.5rem; border-top: 1px solid var(--line); }
/* the label stays tight to its own field; the space goes between fields */
.promo-form .om-label { margin: 1.35rem 0 .45rem; }
.promo-form .om-label:first-child { margin-top: 0; }
.promo-form .om-input, .promo-form .om-phone { margin: 0; }
.promo-cta { margin-top: 1.5rem; }
.promo-card .om-error { margin-top: 1.1rem; }
.promo-card .om-secure { margin-top: 1.1rem; }
.promo-card .om-cancel { margin-top: 1rem; }

/* ==========================================================================
   v9 — plan chooser and connections row, dressed up
   ========================================================================== */

.om-plans { gap: .5rem; }

.om-planbtn {
  position: relative; overflow: hidden; isolation: isolate;
  gap: .12rem; padding: .95rem .35rem .8rem;
  border-radius: 14px; border-color: rgba(255,150,140,.18);
  background: linear-gradient(170deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  transition: transform .18s ease, border-color .18s ease,
              background .18s ease, color .18s ease, box-shadow .22s ease;
}
/* a soft sheen across the top of every card */
.om-planbtn::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 60%; z-index: -1;
  background: radial-gradient(90% 100% at 50% 0%, rgba(255,154,144,.18), transparent 72%);
  opacity: 0; transition: opacity .22s ease;
}
.om-planbtn:hover { transform: translateY(-2px); border-color: var(--line-strong); color: #fff; }
.om-planbtn:hover::before { opacity: .7; }

.om-planbtn.is-on {
  color: #fff; transform: translateY(-2px);
  border-color: transparent;
  background:
    linear-gradient(170deg, rgba(40,16,20,.96), rgba(18,13,15,.96)) padding-box,
    linear-gradient(150deg, var(--cyan), var(--blue) 55%, var(--violet)) border-box;
  border: 1px solid transparent;
  box-shadow: 0 14px 30px -14px var(--glow), inset 0 1px 0 rgba(255,255,255,.14);
}
.om-planbtn.is-on::before { opacity: 1; }

.opb-tier { font-size: .6rem; letter-spacing: .14em; opacity: .72; }
.om-planbtn.is-on .opb-tier {
  opacity: 1;
  background: linear-gradient(100deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.opb-price {
  font-family: var(--f-head); font-weight: 800; font-size: 1.32rem;
  letter-spacing: -.03em; line-height: 1.1; display: inline-flex; align-items: baseline;
}
.opb-cur { font-size: .78rem; font-weight: 700; margin-right: .06em; color: var(--blue-300); }
.opb-cents { font-size: .74rem; font-weight: 700; opacity: .8; }
.om-planbtn.is-on .opb-price { color: #fff; }
.om-planbtn.is-on .opb-cur { color: var(--cyan); }
.opb-term { font-size: .63rem; opacity: .6; letter-spacing: .01em; }

/* the featured tier carries a small flag, and the chosen one a tick */
.opb-pop {
  position: absolute; top: 0; right: 0;
  font-size: .5rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #06240f; padding: .16rem .42rem .18rem;
  border-radius: 0 13px 0 8px;
  background: linear-gradient(135deg, var(--cyan), var(--blue-300));
}
.om-planbtn.is-on .opb-pop { opacity: 0; }
.opb-tick {
  position: absolute; top: .38rem; right: .38rem;
  width: 17px; height: 17px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--cyan), var(--blue));
  opacity: 0; transform: scale(.5);
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.9,.3,1.4);
}
.opb-tick .ico { width: 11px; height: 11px; color: #0b0b0e; stroke-width: 3.4; }
.om-planbtn.is-on .opb-tick { opacity: 1; transform: none; }

@media (max-width: 400px) {
  .om-planbtn { padding: .8rem .3rem .7rem; }
  .opb-price { font-size: 1.18rem; }
}

/* --- Connections row ------------------------------------------------------ */
.om-conn {
  gap: .9rem; padding: 1.05rem 1.15rem; margin-top: .9rem;
  border-radius: 18px; border-color: rgba(255,154,144,.24);
  background:
    radial-gradient(80% 160% at 8% 0%, rgba(255,138,138,.12), transparent 60%),
    linear-gradient(150deg, rgba(32,13,16,.86), rgba(14,12,14,.8));
}
.om-conn-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: linear-gradient(150deg, rgba(212,15,31,.28), rgba(255,43,61,.16));
  border: 1px solid rgba(255,154,144,.26); color: var(--blue-300);
}
.om-conn-ico .ico { width: 19px; height: 19px; }
.om-conn-txt { flex: 1 1 auto; }
.om-conn-txt span { color: var(--ink-3); font-size: .78rem; }

.om-conn-step {
  gap: .25rem; padding: .28rem; border-radius: 999px;
  background: rgba(8,8,11,.5); border: 1px solid var(--line);
}
.om-cbtn {
  width: 38px; height: 38px; border-color: transparent;
  background: rgba(255,255,255,.06); color: var(--ink-2); font-size: 1.15rem;
}
.om-cbtn:hover:not(:disabled) {
  background: linear-gradient(140deg, var(--blue), var(--violet));
  border-color: transparent; color: #fff;
  box-shadow: 0 8px 18px -9px var(--glow);
}
.om-cn {
  min-width: 2.2ch; font-size: 1.3rem;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

@media (max-width: 420px) {
  .om-conn { gap: .7rem; padding: .9rem; }
  .om-conn-ico { width: 34px; height: 34px; border-radius: 10px; }
  .om-conn-ico .ico { width: 16px; height: 16px; }
  .om-cbtn { width: 34px; height: 34px; }
}
/* the bonus reads as its own badge rather than wrapping the Length row */
.om-bonus {
  display: inline-flex; align-items: center; gap: .4rem; margin: .5rem 0 .2rem;
  padding: .34rem .7rem; border-radius: 999px;
  font-size: .76rem; font-weight: 600; color: var(--cyan);
  background: rgba(255,138,138,.12); border: 1px solid rgba(255,138,138,.28);
}
.om-bonus::before { content: "✦"; font-size: .68rem; opacity: .9; }
.om-bonus[hidden] { display: none; }


/* ==========================================================================
   Supa Legacy — hero without a photograph
   ========================================================================== */
.hb-photo { display: none; }
.hb-veil {
  background:
    radial-gradient(46% 54% at 50% 38%, rgba(8,8,11,.72) 0%, rgba(8,8,11,.35) 55%, rgba(8,8,11,0) 100%),
    linear-gradient(180deg, rgba(8,8,11,.55) 0%, rgba(8,8,11,.08) 26%, rgba(8,8,11,.42) 76%, var(--bg) 100%);
}
.hero-cine .hb-slats { display: block; opacity: .55; }
.hero-cine .hb-screen { opacity: .85; }
.hero-cine .hb-floor { opacity: .8; }
.hero-cine .hb-grid { opacity: .5; }
/* a soft magenta bloom behind the headline, in place of the photograph */
.hero-cine::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38rem 26rem at 50% 18%, rgba(255,43,61,.16), transparent 68%),
    radial-gradient(46rem 30rem at 82% 4%, rgba(212,15,31,.20), transparent 66%);
}
.hero-cine .hero-inner { position: relative; z-index: 2; }

/* ==========================================================================
   Supa Legacy — its own visual language
   Squarer shapes, left accent rules, underlined navigation, a horizontal step
   timeline and stacked pricing rows. Deliberately not the sister site's look.
   ========================================================================== */

:root {
  --r-sm:  4px;
  --r:     8px;
  --r-lg:  12px;
  --r-xl:  16px;
}

/* --- Type: tighter, flatter, more editorial ------------------------------ */
h1, h2, h3, h4 { letter-spacing: -.035em; }
h2 { font-weight: 800; }
.kicker {
  border-radius: 0; border: 0; border-left: 3px solid var(--violet);
  background: none; padding: 0 0 0 .7rem; letter-spacing: .22em;
  color: var(--ink-2); font-size: .68rem;
}
.sec-head { max-width: 62ch; }
.sec-head.center { text-align: left; margin-inline: 0; }
.sec-head.center .lead { margin-inline: 0; }

/* --- Buttons: squared, not pills ----------------------------------------- */
.btn { border-radius: 8px; font-weight: 700; letter-spacing: -.01em; }
.btn-primary {
  background: linear-gradient(100deg, var(--blue) 0%, var(--violet) 100%);
  box-shadow: 0 10px 26px -14px var(--glow);
}
.btn-ghost { border-radius: 8px; }

/* --- Header: underline, not pill ----------------------------------------- */
.head-nav a { border-radius: 0; padding: .55rem .1rem; margin: 0 .55rem; position: relative; }
.head-nav a:hover { background: none; }
.head-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--blue));
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.head-nav a:hover::after, .head-nav a.is-active::after { transform: scaleX(1); }
.head-nav a.is-active { background: none; color: #fff; }

/* --- Cards: a left rule instead of a glow -------------------------------- */
.card, .linkcard, .panel {
  border-radius: var(--r); border-left: 2px solid rgba(255,43,61,.45);
  background: linear-gradient(100deg, rgba(34,11,15,.55), rgba(14,12,16,.45));
}
.card:hover, .linkcard:hover { transform: translateY(-2px); border-left-color: var(--violet); }
.card-ico { border-radius: 8px; }

/* --- Split hero ---------------------------------------------------------- */
.hero-split { padding: clamp(2.6rem, 5vw, 4.6rem) 0 clamp(2rem, 4vw, 3.4rem); text-align: left; }
.hero-cols {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start;
  position: relative; z-index: 2;
}
@media (max-width: 940px) { .hero-cols { grid-template-columns: 1fr; } }
.hero-split h1 { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.hero-split .h1-brand { font-size: clamp(1.5rem, 1rem + 2vw, 2.1rem); letter-spacing: -.02em; }
.hero-split .h1-main { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.1rem); line-height: 1.06; }
.hero-split .hero-lead { margin: 0 0 1.8rem; max-width: 54ch; }
.hero-split .hero-actions { justify-content: flex-start; margin-bottom: 1.6rem; }
.hero-split .chips-hero { justify-content: flex-start; margin: 0; }
.hero-split .logo-strip { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.hero-split .strip-label { justify-content: flex-start; }
.hero-split .logo-row { justify-content: flex-start; margin-inline: 0; }
.hero-split .strip-more { text-align: left; }

/* the router panel beside the headline */
.hero-panel {
  border: 1px solid var(--line-strong); border-left: 2px solid var(--violet);
  border-radius: var(--r); padding: 1.1rem 1.2rem 1.2rem;
  background: linear-gradient(160deg, rgba(34,11,15,.7), rgba(11,10,13,.75));
  box-shadow: var(--shadow);
}
.hp-kicker {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan);
}
.hp-kicker .ico { width: 14px; height: 14px; }
.hp-router { list-style: none; margin: 0; padding: 0; }
.hp-router li { margin: 0; border-top: 1px solid var(--line); }
.hp-router li:first-child { border-top: 0; }
.hp-router a {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .2rem .8rem; padding: .8rem .2rem; color: var(--ink);
}
.hp-router b { font-family: var(--f-head); font-weight: 700; font-size: .95rem; line-height: 1.3; }
.hp-router span { grid-column: 1; font-size: .8rem; color: var(--ink-3); line-height: 1.45; }
.hp-router .ico { grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--ink-3); transition: transform .18s ease, color .18s ease; }
.hp-router a:hover { color: #fff; }
.hp-router a:hover .ico { transform: translateX(3px); color: var(--cyan); }

/* --- The numbered "what people mean" list -------------------------------- */
.means { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: m; }
.mean {
  display: grid; grid-template-columns: 3.4rem 1fr; gap: 0 1.2rem; margin: 0;
  padding: 1.3rem 0; border-top: 1px solid var(--line);
}
.mean:first-child { border-top: 0; padding-top: 0; }
.mean-n {
  font-family: var(--f-head); font-weight: 800; font-size: 1.5rem; line-height: 1;
  background: linear-gradient(140deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mean-body h3 { font-size: 1.1rem; margin: 0 0 .35rem; }
.mean-body p { margin: 0 0 .5rem; color: var(--ink-2); font-size: .95rem; }
.mean-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; }
.mean-link .ico { width: 14px; height: 14px; transition: transform .18s ease; }
.mean-link:hover .ico { transform: translateX(3px); }
@media (max-width: 560px) { .mean { grid-template-columns: 2.4rem 1fr; gap: 0 .8rem; } }

/* --- Steps: a horizontal timeline ---------------------------------------- */
.steps { grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.steps li {
  padding: 2.6rem 1.2rem 0 0; background: none; border: 0; border-radius: 0;
  border-top: 2px solid var(--line-strong); position: relative;
}
.steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: -1px; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; font-size: .85rem;
  background: linear-gradient(140deg, var(--blue), var(--violet));
  box-shadow: 0 0 0 6px var(--bg);
}
.steps li h3 { font-size: 1rem; }
.steps li p { font-size: .9rem; }

/* --- Pricing: stacked rows, not three equal columns ---------------------- */
.pricing { grid-template-columns: 1fr; gap: .9rem; }
.plan {
  display: grid; grid-template-columns: minmax(190px, .8fr) minmax(210px, .8fr) 1.4fr minmax(190px, .7fr);
  gap: 0 clamp(1rem, 2.5vw, 2.2rem); align-items: center;
  padding: 1.5rem clamp(1.1rem, 2.4vw, 1.8rem);
  border-radius: var(--r); border-left: 2px solid rgba(255,43,61,.4);
}
.plan:hover { transform: none; border-left-color: var(--violet); }
.plan.featured { border-left-color: var(--cyan); }
.plan > .plan-tag {
  position: static; transform: none; align-self: start; justify-self: start;
  grid-column: 1; margin-bottom: .5rem; border-radius: 4px;
}
.plan .plan-tier { margin-bottom: .1rem; }
.plan h2, .plan h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.plan .price { margin: 0; }
.plan .price .whole { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); }
.plan-term { margin: .15rem 0 0; }
.plan-bonus { margin: .6rem 0 0; grid-column: 2; }
.plan-bonus-spacer { display: none; }
.plan .screens { grid-column: 2; margin: .7rem 0 0; }
.plan-feats { margin: 0; grid-column: 3; grid-row: 1 / span 6; align-self: center;
  columns: 2; column-gap: 1.4rem; }
.plan-feats li { break-inside: avoid; }
.plan .btn-block { grid-column: 4; grid-row: 1 / span 6; align-self: center; margin: 0; }
.plan .note { grid-column: 4; grid-row: 7; margin: .5rem 0 0; text-align: left; }
.plan::before { display: none; }

@media (max-width: 1020px) {
  .plan { grid-template-columns: 1fr 1fr; }
  .plan-feats { grid-column: 1 / -1; grid-row: auto; margin-top: 1.1rem; }
  .plan .btn-block { grid-column: 1 / -1; grid-row: auto; margin-top: 1.1rem; }
  .plan .note { grid-column: 1 / -1; grid-row: auto; text-align: center; }
}
@media (max-width: 620px) {
  .plan { grid-template-columns: 1fr; }
  .plan-bonus, .plan .screens { grid-column: 1; }
  .plan-feats { columns: 1; }
}

/* the wide Exclusive card sits in the same rhythm */
.plan-wide { grid-template-columns: minmax(220px, .9fr) 1.6fr minmax(200px, .7fr); margin-top: .9rem; }
.plan-wide > .plan-tag { grid-column: 1; }

/* --- Device tiles: rows with a rule -------------------------------------- */
.devgrid { grid-template-columns: repeat(2, 1fr); gap: 0 clamp(1.2rem, 3vw, 2.4rem); }
@media (max-width: 720px) { .devgrid { grid-template-columns: 1fr; } }
.devtile {
  flex-direction: row; align-items: center; text-align: left; gap: .9rem;
  padding: 1rem .2rem; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; background: none;
}
.devtile:hover { transform: none; background: none; border-top-color: var(--line-strong); }
.devtile::before { display: none; }
.dt-ico { width: 42px; height: 42px; border-radius: 8px; margin: 0; flex: 0 0 auto; }
.dt-ico img { width: 26px; height: 26px; }
.devtile b { flex: 1 1 auto; font-size: .95rem; }
.dt-sub { color: var(--ink-3); font-size: .78rem; }
.dt-go { margin: 0; opacity: 0; }
.devtile:hover .dt-go { opacity: 1; }

/* --- Tables: rules rather than a panel ----------------------------------- */
.table-wrap { border: 0; border-top: 2px solid var(--line-strong); border-radius: 0; background: none; }
thead th { background: none; color: var(--cyan); border-bottom: 1px solid var(--line-strong); }
caption { padding-left: 0; }

/* --- FAQ: flat rows ------------------------------------------------------ */
.faq-item { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.faq-item[open] { background: none; }
.faq-item summary { padding: 1.05rem .2rem; }
.faq-body { padding: 0 .2rem 1.15rem; }
.faq { gap: 0; }

/* --- CTA band: a rule, not a rounded slab -------------------------------- */
.cta-band {
  border-radius: var(--r); border: 0; border-left: 3px solid var(--violet);
  background: linear-gradient(100deg, rgba(34,11,15,.8), rgba(11,10,13,.5));
}

/* --- Footer + modal corners follow the same rule ------------------------- */
.modal-card { border-radius: var(--r-lg); }
.om-planbtn, .om-conn, .om-summary, .om-input, .om-ccbtn, .om-ccpanel { border-radius: 8px; }
.om-cbtn { border-radius: 8px; }
.om-conn-step { border-radius: 10px; }
.wa-float, .wa-panel { border-radius: 12px; }
.badge { border-radius: 6px; }
.chips li { border-radius: 6px; }
.logo-tile, .pay-tile { border-radius: 8px; }

/* --- router panel: explicit grid placement, no underlines ---------------- */
.hp-router a { grid-template-columns: 1fr 18px; text-align: left; text-decoration: none; }
.hp-router b { grid-column: 1; grid-row: 1; }
.hp-router span { grid-column: 1; grid-row: 2; }
.hp-router .ico { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.hp-router a, .mean-link, .strip-more a, .dt-go { text-decoration: none; }
.hp-router a:hover, .mean-link:hover { text-decoration: none; }

/* --- Pricing rows: explicit placement so every row lines up -------------- */
.plan {
  position: relative;
  grid-template-columns: minmax(180px, .75fr) minmax(200px, .75fr) 1.5fr minmax(170px, .6fr);
  grid-template-rows: auto auto auto auto;
  align-items: start;
}
.plan > .plan-tag {
  position: absolute; top: .8rem; right: 1rem; margin: 0;
  grid-column: auto; grid-row: auto;
}
.plan .plan-tier   { grid-column: 1; grid-row: 1; }
.plan h2, .plan h3 { grid-column: 1; grid-row: 2; }
.plan .price,
.plan .price-raw   { grid-column: 1; grid-row: 3; }
.plan .plan-term   { grid-column: 1; grid-row: 4; }
.plan .plan-bonus  { grid-column: 2; grid-row: 1 / 3; align-self: start; margin: 0; }
.plan .screens     { grid-column: 2; grid-row: 3 / 5; align-self: start; margin: 0; }
.plan .plan-feats  { grid-column: 3; grid-row: 1 / 5; align-self: center;
                     display: block; columns: 2; column-gap: 1.5rem; margin: 0; }
.plan .plan-feats li { display: flex; break-inside: avoid; margin: 0 0 .5rem; }
.plan .btn-block   { grid-column: 4; grid-row: 1 / 4; align-self: center; margin: 0; }
.plan .note        { grid-column: 4; grid-row: 4; margin: .4rem 0 0; text-align: center; }

/* the wide Exclusive card keeps its own three-column shape */
.plan-wide { grid-template-columns: minmax(220px, .9fr) 1.6fr minmax(190px, .65fr); grid-template-rows: auto; }
.plan-wide .pw-price { grid-column: 1; grid-row: 1; }
.plan-wide .pw-feats { grid-column: 2; grid-row: 1; }
.plan-wide .pw-cta   { grid-column: 3; grid-row: 1; align-self: center; }
.plan-wide .pw-feats .plan-feats { display: grid; columns: auto; grid-column: auto; grid-row: auto; }

@media (max-width: 1020px) {
  .plan { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .plan .plan-tier, .plan h2, .plan h3, .plan .price, .plan .price-raw,
  .plan .plan-term { grid-column: 1; grid-row: auto; }
  .plan .plan-bonus, .plan .screens { grid-column: 2; grid-row: auto; }
  .plan .plan-feats { grid-column: 1 / -1; grid-row: auto; margin-top: 1.2rem; }
  .plan .btn-block { grid-column: 1 / -1; grid-row: auto; margin-top: 1.1rem; }
  .plan .note { grid-column: 1 / -1; grid-row: auto; }
  .plan-wide { grid-template-columns: 1fr 1fr; }
  .plan-wide .pw-feats { grid-column: 1 / -1; }
  .plan-wide .pw-cta { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .plan { grid-template-columns: 1fr; }
  .plan .plan-bonus, .plan .screens { grid-column: 1; }
  .plan .plan-feats { columns: 1; }
  .plan > .plan-tag { position: static; margin-bottom: .6rem; }
}

/* --- Pricing rows, final: four blocks per row ---------------------------- */
.plan {
  grid-template-columns: minmax(180px, .8fr) minmax(210px, .8fr) 1.5fr minmax(170px, .6fr);
  grid-template-rows: auto;
  align-items: center;
}
.plan > * { grid-column: auto; grid-row: auto; }
.plan-id, .plan-opts, .plan-act { display: block; }
.plan-id .plan-tier { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .15rem; }
.plan-id > .plan-tag,
.plan-tier .plan-tag {
  position: static; transform: none; display: inline-flex;
  padding: .2rem .5rem; border-radius: 4px; font-size: .58rem; letter-spacing: .1em;
}
.plan-id h2, .plan-id h3 { margin: 0 0 .45rem; }
.plan-id .price, .plan-id .price-raw { margin: 0 0 .2rem; }
.plan-id .plan-term { margin: 0; }
.plan-opts .plan-bonus { margin: 0 0 .8rem; }
.plan-opts .screens { margin: 0; }
.plan .plan-feats {
  display: block; columns: 2; column-gap: 1.5rem; margin: 0;
}
.plan .plan-feats li { display: flex; break-inside: avoid; margin: 0 0 .5rem; }
.plan-act .btn-block { margin: 0; }
.plan-act .note { margin: .55rem 0 0; text-align: center; }

@media (max-width: 1020px) {
  .plan { grid-template-columns: 1fr 1fr; align-items: start; }
  .plan .plan-feats, .plan-act { grid-column: 1 / -1; margin-top: 1.2rem; }
}
@media (max-width: 620px) {
  .plan { grid-template-columns: 1fr; }
  .plan-opts { margin-top: 1rem; }
  .plan .plan-feats { columns: 1; }
}
/* the base rule already increments the step counter; do not double it */
.steps li::before { counter-increment: none; }

/* --- the router band, now under the hero -------------------------------- */
.router-band {
  border: 1px solid var(--line-strong); border-left: 2px solid var(--violet);
  border-radius: var(--r); padding: 1.1rem clamp(1rem, 2.4vw, 1.6rem) 1.2rem;
  background: linear-gradient(100deg, rgba(34,11,15,.6), rgba(11,10,13,.5));
}
.hp-router-wide { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 1.4rem; }
.hp-router-wide li { border-top: 0; border-left: 1px solid var(--line); padding-left: 1.1rem; }
.hp-router-wide li:first-child { border-left: 0; padding-left: 0; }
.hp-router-wide a { grid-template-columns: 1fr; padding: .2rem 0; }
.hp-router-wide .ico { grid-column: 1; grid-row: 3; justify-self: start; margin-top: .4rem; }
@media (max-width: 1080px) {
  .hp-router-wide { grid-template-columns: repeat(2, 1fr); gap: .2rem 1.4rem; }
  .hp-router-wide li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .hp-router-wide li:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 620px) { .hp-router-wide { grid-template-columns: 1fr; }
  .hp-router-wide li:nth-child(2) { border-top: 1px solid var(--line); } }

/* the six "why us" points sit in two columns */
.means-2 { grid-template-columns: 1fr 1fr; column-gap: clamp(1.6rem, 4vw, 3.2rem); }
@media (max-width: 860px) { .means-2 { grid-template-columns: 1fr; } }
.means-2 .mean:nth-child(2) { border-top: 0; padding-top: 0; }
@media (max-width: 860px) { .means-2 .mean:nth-child(2) { border-top: 1px solid var(--line); padding-top: 1.3rem; } }

/* the centred hero keeps its own alignment inside this left-aligned system */
.hero-cine .sec-head, .hero-cine .hero-inner { text-align: center; }
.hero-cine .hero-actions, .hero-cine .chips-hero { justify-content: center; }
.hero-cine .hero-lead { margin-inline: auto; }

/* --- Compatibility grid in this site's flatter language ------------------ */
.brandgrid { gap: 0; grid-template-columns: repeat(6, 1fr); }
@media (max-width: 980px) { .brandgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .brandgrid { grid-template-columns: repeat(2, 1fr); } }
.brandtile {
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; padding: 1.2rem .6rem 1.1rem; gap: .45rem;
}
.brandtile:hover { transform: none; background: rgba(255,255,255,.03); border-top-color: var(--violet); }
.bt-logo { border-radius: 8px; }
.brand-note { margin-top: 1.4rem; }

/* ==========================================================================
   Pricing, v3 — four columns in the reference's shape, in our palette
   ========================================================================== */
.pricing { grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; }
@media (max-width: 1080px) { .pricing { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pricing { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

.plan {
  display: flex; flex-direction: column; position: relative;
  padding: 1.9rem 1.4rem 1.5rem; border-radius: var(--r-lg);
  border: 1px solid var(--line); border-left: 1px solid var(--line);
  background: linear-gradient(175deg, rgba(34,11,15,.5), rgba(12,11,14,.5));
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.plan:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.plan.featured {
  border-color: rgba(255,43,61,.55);
  background: linear-gradient(175deg, rgba(42,12,16,.75), rgba(14,12,16,.7));
  box-shadow: 0 26px 60px -32px var(--glow);
}
.plan.best { border-color: rgba(255,138,138,.45); }

/* the badge sits astride the top edge */
.plan-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .34rem .8rem; border-radius: 999px;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #1a0406;
}
.plan-badge .ico { width: 12px; height: 12px; }
.plan-badge-pop { background: linear-gradient(135deg, var(--violet), var(--blue)); color: #fff; }
.plan-badge-val { background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #1a0406; }

.plan h2, .plan h3 {
  font-size: 1.3rem; margin: 0 0 .25rem; color: #fff; letter-spacing: -.03em;
}
.plan .plan-term {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin: 0 0 .9rem; font-size: .85rem; color: var(--ink-3);
}
.plan-free {
  color: var(--cyan); font-weight: 700; font-size: .8rem;
}
.plan .price { margin: 0 0 .15rem; align-items: baseline; }
.plan .price .cur { font-size: 1.15rem; margin-top: 0; }
.plan .price .whole { font-size: clamp(2.2rem, 1.9rem + 1vw, 2.8rem); }
.plan .price .cents { font-size: 1.1rem; margin-top: 0; }
.plan-permonth { font-size: .8rem; color: var(--ink-3); margin: 0 0 1.1rem; }

/* the connection stepper, boxed like the reference */
.plan .screens { margin: 0 0 1.2rem; }
.plan .st-label { display: none; }
.plan .stepper {
  grid-template-columns: 44px 1fr 44px; border-radius: 10px;
  background: rgba(255,255,255,.04); border-color: var(--line);
}
.plan .st-btn { height: 48px; }
.plan .st-val { flex-direction: row; align-items: baseline; gap: .35rem; }
.plan .st-val .st-n { font-size: 1.1rem; }
.plan .st-val .st-unit { font-size: .68rem; letter-spacing: .08em; text-transform: lowercase; }
.plan .st-note { font-size: .74rem; margin-top: .55rem; }

.plan .plan-feats {
  display: grid; gap: .55rem; margin: 0 0 1.4rem; padding: 0; list-style: none;
  flex: 1 1 auto;
}
.plan .plan-feats li { display: flex; gap: .55rem; font-size: .88rem; color: var(--ink-2); margin: 0; }
.plan .plan-feats .ico { color: var(--cyan); }

.plan .btn-block { margin: 0; }
.plan .btn-ghost { border-color: var(--line-strong); }
.plan .plan-cta-alt {
  background: linear-gradient(120deg, var(--cyan), var(--violet)); color: #1a0406;
}
.plan .plan-cta-alt:hover { color: #1a0406; }
.plan .note { display: none; }

/* the wide-card rules from the row layout no longer apply */
.plan-wide { display: none; }
.plan-id, .plan-opts, .plan-act { display: contents; }
/* keep the term row a constant height so all four prices sit on one line */
.plan .plan-term { min-height: 2.9em; align-content: flex-start; }
@media (max-width: 620px) { .plan .plan-term { min-height: 0; } }

/* ==========================================================================
   Hero, dressed up — an abstract interface, a grain wash and slow blooms
   ========================================================================== */

/* two slow blooms behind the headline, plus a fine grain so the flat purple
   does not read as an empty gradient */
.hero-cine::before {
  content: ""; position: absolute; inset: -10% -10% 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(28rem 20rem at 22% 18%, rgba(255,43,61,.20), transparent 70%),
    radial-gradient(34rem 24rem at 78% 8%, rgba(212,15,31,.26), transparent 72%);
  filter: blur(6px);
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .hero-cine::before { animation: none; } }

.hero-cine .hb-grid { opacity: .34; }
.hero-cine .hero-inner { padding-bottom: .5rem; }
.hero-cine .chips-hero { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }

/* --- the abstract interface ---------------------------------------------- */
.hero-art { position: relative; max-width: 760px; margin: 0 auto; perspective: 1200px; }
.ha-screen {
  position: relative; z-index: 2; text-align: left;
  padding: .9rem .9rem 1rem; border-radius: 14px 14px 6px 6px;
  border: 1px solid rgba(255,150,140,.28);
  background: linear-gradient(170deg, rgba(44,14,18,.92), rgba(8,6,7,.94));
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
  transform: rotateX(9deg); transform-origin: top center;
}
.ha-bar { display: flex; gap: .32rem; margin-bottom: .8rem; }
.ha-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.16); }
.ha-bar span:first-child { background: var(--violet); }

.ha-rail { display: flex; gap: .5rem; margin-bottom: .8rem; flex-wrap: wrap; }
.ha-rail b, .ha-rail i {
  font-style: normal; font-family: var(--f-head); font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; padding: .3rem .65rem; border-radius: 999px;
  color: var(--ink-3); background: rgba(255,255,255,.05);
}
.ha-rail b {
  color: #fff; background: linear-gradient(120deg, var(--blue), var(--violet));
  box-shadow: 0 8px 18px -10px var(--glow);
}

.ha-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin-bottom: .7rem; }
.ha-tiles span {
  display: block; aspect-ratio: 3 / 4; border-radius: 8px;
  border: 1px solid rgba(255,150,140,.16);
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
}
.ha-tiles .t1 { background: linear-gradient(160deg, rgba(255,43,61,.5), rgba(212,15,31,.16)); }
.ha-tiles .t3 { background: linear-gradient(160deg, rgba(255,138,138,.42), rgba(212,15,31,.14)); }
.ha-tiles .t5 { background: linear-gradient(160deg, rgba(212,15,31,.46), rgba(255,43,61,.14)); }

.ha-epg { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr .9fr; gap: .4rem; }
.ha-epg span {
  height: 22px; border-radius: 5px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,150,140,.12);
}
.ha-epg span:first-child { background: rgba(255,43,61,.22); border-color: rgba(255,43,61,.3); }

/* the light the screen throws onto the "floor" */
.ha-glow {
  position: absolute; left: 8%; right: 8%; bottom: -46px; height: 120px; z-index: 1;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255,43,61,.34), transparent 72%);
  filter: blur(22px);
}
@media (max-width: 620px) {
  .ha-tiles { grid-template-columns: repeat(4, 1fr); }
  .ha-tiles .t5, .ha-tiles .t6 { display: none; }
  .ha-epg { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .ha-epg span:last-child { display: none; }
}

/* --- the honest fact strip ----------------------------------------------- */
.hero-facts {
  list-style: none; margin: clamp(3.4rem, 6vw, 4.6rem) 0 0; padding: 1.3rem 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  border-top: 1px solid var(--line);
}
.hero-facts li { margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.hero-facts b {
  font-family: var(--f-head); font-weight: 800; font-size: 1.9rem; line-height: 1;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-facts span { font-size: .78rem; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 620px) { .hero-facts { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }

/* --- a little polish elsewhere ------------------------------------------- */
.card:hover, .linkcard:hover, .plan:hover { box-shadow: 0 24px 50px -30px var(--glow); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent);
  pointer-events: none;
}
.sec-alt { border-block-color: rgba(255,150,140,.16); }
.sec-head h2 { position: relative; }
/* the fact strip already closes the hero; the notice follows it tightly */
.hero-cine + .sec-tight { padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.hero-facts li { align-items: center; text-align: center; }

/* ==========================================================================
   Hero photograph
   Family in a dark living room, screen light on their faces. Centred, and the
   veil above it keeps the headline readable over the bright television.
   Files: assets/img/photos/ovelo-tv-hero{,-sm}.{webp,jpg}
   ========================================================================== */
.hb-photo {
  display: block;
  background-image: url("/assets/img/photos/ovelo-tv-hero.jpg");
  background-image: image-set(
    url("/assets/img/photos/ovelo-tv-hero.webp") type("image/webp"),
    url("/assets/img/photos/ovelo-tv-hero.jpg")  type("image/jpeg"));
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 1;
}
@media (max-width: 900px) {
  .hb-photo {
    background-image: url("/assets/img/photos/ovelo-tv-hero-sm.jpg");
    background-image: image-set(
      url("/assets/img/photos/ovelo-tv-hero-sm.webp") type("image/webp"),
      url("/assets/img/photos/ovelo-tv-hero-sm.jpg")  type("image/jpeg"));
    background-position: 62% center;
  }
}
.hb-veil {
  background:
    radial-gradient(46% 54% at 50% 38%, rgba(8,8,11,.72) 0%, rgba(8,8,11,.35) 55%, rgba(8,8,11,0) 100%),
    linear-gradient(180deg, rgba(8,8,11,.55) 0%, rgba(8,8,11,.08) 26%, rgba(8,8,11,.42) 76%, var(--bg) 100%);
}
.hero-cine .hb-slats { display: block; opacity: .55; }
.hero-cine .hb-screen { opacity: .85; }
.hero-cine .hb-floor { opacity: .8; }
.hero-cine .hb-grid { opacity: .5; }
/* a soft magenta bloom behind the headline, in place of the photograph */
.hero-cine::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38rem 26rem at 50% 18%, rgba(255,43,61,.16), transparent 68%),
    radial-gradient(46rem 30rem at 82% 4%, rgba(212,15,31,.20), transparent 66%);
}
.hero-cine .hero-inner { position: relative; z-index: 2; }

/* ==========================================================================
   Supa Legacy — its own visual language
   Squarer shapes, left accent rules, underlined navigation, a horizontal step
   timeline and stacked pricing rows. Deliberately not the sister site's look.
   ========================================================================== */

:root {
  --r-sm:  4px;
  --r:     8px;
  --r-lg:  12px;
  --r-xl:  16px;
}

/* --- Type: tighter, flatter, more editorial ------------------------------ */
h1, h2, h3, h4 { letter-spacing: -.035em; }
h2 { font-weight: 800; }
.kicker {
  border-radius: 0; border: 0; border-left: 3px solid var(--violet);
  background: none; padding: 0 0 0 .7rem; letter-spacing: .22em;
  color: var(--ink-2); font-size: .68rem;
}
.sec-head { max-width: 62ch; }
.sec-head.center { text-align: left; margin-inline: 0; }
.sec-head.center .lead { margin-inline: 0; }

/* --- Buttons: squared, not pills ----------------------------------------- */
.btn { border-radius: 8px; font-weight: 700; letter-spacing: -.01em; }
.btn-primary {
  background: linear-gradient(100deg, var(--blue) 0%, var(--violet) 100%);
  box-shadow: 0 10px 26px -14px var(--glow);
}
.btn-ghost { border-radius: 8px; }

/* --- Header: underline, not pill ----------------------------------------- */
.head-nav a { border-radius: 0; padding: .55rem .1rem; margin: 0 .55rem; position: relative; }
.head-nav a:hover { background: none; }
.head-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: linear-gradient(90deg, var(--violet), var(--blue));
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.head-nav a:hover::after, .head-nav a.is-active::after { transform: scaleX(1); }
.head-nav a.is-active { background: none; color: #fff; }

/* --- Cards: a left rule instead of a glow -------------------------------- */
.card, .linkcard, .panel {
  border-radius: var(--r); border-left: 2px solid rgba(255,43,61,.45);
  background: linear-gradient(100deg, rgba(34,11,15,.55), rgba(14,12,16,.45));
}
.card:hover, .linkcard:hover { transform: translateY(-2px); border-left-color: var(--violet); }
.card-ico { border-radius: 8px; }

/* --- Split hero ---------------------------------------------------------- */
.hero-split { padding: clamp(2.6rem, 5vw, 4.6rem) 0 clamp(2rem, 4vw, 3.4rem); text-align: left; }
.hero-cols {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.8rem, 4vw, 3.4rem); align-items: start;
  position: relative; z-index: 2;
}
@media (max-width: 940px) { .hero-cols { grid-template-columns: 1fr; } }
.hero-split h1 { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1rem; }
.hero-split .h1-brand { font-size: clamp(1.5rem, 1rem + 2vw, 2.1rem); letter-spacing: -.02em; }
.hero-split .h1-main { font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.1rem); line-height: 1.06; }
.hero-split .hero-lead { margin: 0 0 1.8rem; max-width: 54ch; }
.hero-split .hero-actions { justify-content: flex-start; margin-bottom: 1.6rem; }
.hero-split .chips-hero { justify-content: flex-start; margin: 0; }
.hero-split .logo-strip { margin-top: clamp(2.4rem, 4vw, 3.4rem); }
.hero-split .strip-label { justify-content: flex-start; }
.hero-split .logo-row { justify-content: flex-start; margin-inline: 0; }
.hero-split .strip-more { text-align: left; }

/* the router panel beside the headline */
.hero-panel {
  border: 1px solid var(--line-strong); border-left: 2px solid var(--violet);
  border-radius: var(--r); padding: 1.1rem 1.2rem 1.2rem;
  background: linear-gradient(160deg, rgba(34,11,15,.7), rgba(11,10,13,.75));
  box-shadow: var(--shadow);
}
.hp-kicker {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem;
  font-size: .68rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--cyan);
}
.hp-kicker .ico { width: 14px; height: 14px; }
.hp-router { list-style: none; margin: 0; padding: 0; }
.hp-router li { margin: 0; border-top: 1px solid var(--line); }
.hp-router li:first-child { border-top: 0; }
.hp-router a {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: .2rem .8rem; padding: .8rem .2rem; color: var(--ink);
}
.hp-router b { font-family: var(--f-head); font-weight: 700; font-size: .95rem; line-height: 1.3; }
.hp-router span { grid-column: 1; font-size: .8rem; color: var(--ink-3); line-height: 1.45; }
.hp-router .ico { grid-row: 1 / span 2; width: 16px; height: 16px; color: var(--ink-3); transition: transform .18s ease, color .18s ease; }
.hp-router a:hover { color: #fff; }
.hp-router a:hover .ico { transform: translateX(3px); color: var(--cyan); }

/* --- The numbered "what people mean" list -------------------------------- */
.means { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: m; }
.mean {
  display: grid; grid-template-columns: 3.4rem 1fr; gap: 0 1.2rem; margin: 0;
  padding: 1.3rem 0; border-top: 1px solid var(--line);
}
.mean:first-child { border-top: 0; padding-top: 0; }
.mean-n {
  font-family: var(--f-head); font-weight: 800; font-size: 1.5rem; line-height: 1;
  background: linear-gradient(140deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mean-body h3 { font-size: 1.1rem; margin: 0 0 .35rem; }
.mean-body p { margin: 0 0 .5rem; color: var(--ink-2); font-size: .95rem; }
.mean-link { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 600; }
.mean-link .ico { width: 14px; height: 14px; transition: transform .18s ease; }
.mean-link:hover .ico { transform: translateX(3px); }
@media (max-width: 560px) { .mean { grid-template-columns: 2.4rem 1fr; gap: 0 .8rem; } }

/* --- Steps: a horizontal timeline ---------------------------------------- */
.steps { grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: s; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }
.steps li {
  padding: 2.6rem 1.2rem 0 0; background: none; border: 0; border-radius: 0;
  border-top: 2px solid var(--line-strong); position: relative;
}
.steps li::before {
  counter-increment: s; content: counter(s);
  position: absolute; left: 0; top: -1px; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; font-size: .85rem;
  background: linear-gradient(140deg, var(--blue), var(--violet));
  box-shadow: 0 0 0 6px var(--bg);
}
.steps li h3 { font-size: 1rem; }
.steps li p { font-size: .9rem; }

/* --- Pricing: stacked rows, not three equal columns ---------------------- */
.pricing { grid-template-columns: 1fr; gap: .9rem; }
.plan {
  display: grid; grid-template-columns: minmax(190px, .8fr) minmax(210px, .8fr) 1.4fr minmax(190px, .7fr);
  gap: 0 clamp(1rem, 2.5vw, 2.2rem); align-items: center;
  padding: 1.5rem clamp(1.1rem, 2.4vw, 1.8rem);
  border-radius: var(--r); border-left: 2px solid rgba(255,43,61,.4);
}
.plan:hover { transform: none; border-left-color: var(--violet); }
.plan.featured { border-left-color: var(--cyan); }
.plan > .plan-tag {
  position: static; transform: none; align-self: start; justify-self: start;
  grid-column: 1; margin-bottom: .5rem; border-radius: 4px;
}
.plan .plan-tier { margin-bottom: .1rem; }
.plan h2, .plan h3 { font-size: 1.15rem; margin-bottom: .3rem; }
.plan .price { margin: 0; }
.plan .price .whole { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); }
.plan-term { margin: .15rem 0 0; }
.plan-bonus { margin: .6rem 0 0; grid-column: 2; }
.plan-bonus-spacer { display: none; }
.plan .screens { grid-column: 2; margin: .7rem 0 0; }
.plan-feats { margin: 0; grid-column: 3; grid-row: 1 / span 6; align-self: center;
  columns: 2; column-gap: 1.4rem; }
.plan-feats li { break-inside: avoid; }
.plan .btn-block { grid-column: 4; grid-row: 1 / span 6; align-self: center; margin: 0; }
.plan .note { grid-column: 4; grid-row: 7; margin: .5rem 0 0; text-align: left; }
.plan::before { display: none; }

@media (max-width: 1020px) {
  .plan { grid-template-columns: 1fr 1fr; }
  .plan-feats { grid-column: 1 / -1; grid-row: auto; margin-top: 1.1rem; }
  .plan .btn-block { grid-column: 1 / -1; grid-row: auto; margin-top: 1.1rem; }
  .plan .note { grid-column: 1 / -1; grid-row: auto; text-align: center; }
}
@media (max-width: 620px) {
  .plan { grid-template-columns: 1fr; }
  .plan-bonus, .plan .screens { grid-column: 1; }
  .plan-feats { columns: 1; }
}

/* the wide Exclusive card sits in the same rhythm */
.plan-wide { grid-template-columns: minmax(220px, .9fr) 1.6fr minmax(200px, .7fr); margin-top: .9rem; }
.plan-wide > .plan-tag { grid-column: 1; }

/* --- Device tiles: rows with a rule -------------------------------------- */
.devgrid { grid-template-columns: repeat(2, 1fr); gap: 0 clamp(1.2rem, 3vw, 2.4rem); }
@media (max-width: 720px) { .devgrid { grid-template-columns: 1fr; } }
.devtile {
  flex-direction: row; align-items: center; text-align: left; gap: .9rem;
  padding: 1rem .2rem; border: 0; border-top: 1px solid var(--line);
  border-radius: 0; background: none;
}
.devtile:hover { transform: none; background: none; border-top-color: var(--line-strong); }
.devtile::before { display: none; }
.dt-ico { width: 42px; height: 42px; border-radius: 8px; margin: 0; flex: 0 0 auto; }
.dt-ico img { width: 26px; height: 26px; }
.devtile b { flex: 1 1 auto; font-size: .95rem; }
.dt-sub { color: var(--ink-3); font-size: .78rem; }
.dt-go { margin: 0; opacity: 0; }
.devtile:hover .dt-go { opacity: 1; }

/* --- Tables: rules rather than a panel ----------------------------------- */
.table-wrap { border: 0; border-top: 2px solid var(--line-strong); border-radius: 0; background: none; }
thead th { background: none; color: var(--cyan); border-bottom: 1px solid var(--line-strong); }
caption { padding-left: 0; }

/* --- FAQ: flat rows ------------------------------------------------------ */
.faq-item { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.faq-item[open] { background: none; }
.faq-item summary { padding: 1.05rem .2rem; }
.faq-body { padding: 0 .2rem 1.15rem; }
.faq { gap: 0; }

/* --- CTA band: a rule, not a rounded slab -------------------------------- */
.cta-band {
  border-radius: var(--r); border: 0; border-left: 3px solid var(--violet);
  background: linear-gradient(100deg, rgba(34,11,15,.8), rgba(11,10,13,.5));
}

/* --- Footer + modal corners follow the same rule ------------------------- */
.modal-card { border-radius: var(--r-lg); }
.om-planbtn, .om-conn, .om-summary, .om-input, .om-ccbtn, .om-ccpanel { border-radius: 8px; }
.om-cbtn { border-radius: 8px; }
.om-conn-step { border-radius: 10px; }
.wa-float, .wa-panel { border-radius: 12px; }
.badge { border-radius: 6px; }
.chips li { border-radius: 6px; }
.logo-tile, .pay-tile { border-radius: 8px; }

/* --- router panel: explicit grid placement, no underlines ---------------- */
.hp-router a { grid-template-columns: 1fr 18px; text-align: left; text-decoration: none; }
.hp-router b { grid-column: 1; grid-row: 1; }
.hp-router span { grid-column: 1; grid-row: 2; }
.hp-router .ico { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
.hp-router a, .mean-link, .strip-more a, .dt-go { text-decoration: none; }
.hp-router a:hover, .mean-link:hover { text-decoration: none; }

/* --- Pricing rows: explicit placement so every row lines up -------------- */
.plan {
  position: relative;
  grid-template-columns: minmax(180px, .75fr) minmax(200px, .75fr) 1.5fr minmax(170px, .6fr);
  grid-template-rows: auto auto auto auto;
  align-items: start;
}
.plan > .plan-tag {
  position: absolute; top: .8rem; right: 1rem; margin: 0;
  grid-column: auto; grid-row: auto;
}
.plan .plan-tier   { grid-column: 1; grid-row: 1; }
.plan h2, .plan h3 { grid-column: 1; grid-row: 2; }
.plan .price,
.plan .price-raw   { grid-column: 1; grid-row: 3; }
.plan .plan-term   { grid-column: 1; grid-row: 4; }
.plan .plan-bonus  { grid-column: 2; grid-row: 1 / 3; align-self: start; margin: 0; }
.plan .screens     { grid-column: 2; grid-row: 3 / 5; align-self: start; margin: 0; }
.plan .plan-feats  { grid-column: 3; grid-row: 1 / 5; align-self: center;
                     display: block; columns: 2; column-gap: 1.5rem; margin: 0; }
.plan .plan-feats li { display: flex; break-inside: avoid; margin: 0 0 .5rem; }
.plan .btn-block   { grid-column: 4; grid-row: 1 / 4; align-self: center; margin: 0; }
.plan .note        { grid-column: 4; grid-row: 4; margin: .4rem 0 0; text-align: center; }

/* the wide Exclusive card keeps its own three-column shape */
.plan-wide { grid-template-columns: minmax(220px, .9fr) 1.6fr minmax(190px, .65fr); grid-template-rows: auto; }
.plan-wide .pw-price { grid-column: 1; grid-row: 1; }
.plan-wide .pw-feats { grid-column: 2; grid-row: 1; }
.plan-wide .pw-cta   { grid-column: 3; grid-row: 1; align-self: center; }
.plan-wide .pw-feats .plan-feats { display: grid; columns: auto; grid-column: auto; grid-row: auto; }

@media (max-width: 1020px) {
  .plan { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .plan .plan-tier, .plan h2, .plan h3, .plan .price, .plan .price-raw,
  .plan .plan-term { grid-column: 1; grid-row: auto; }
  .plan .plan-bonus, .plan .screens { grid-column: 2; grid-row: auto; }
  .plan .plan-feats { grid-column: 1 / -1; grid-row: auto; margin-top: 1.2rem; }
  .plan .btn-block { grid-column: 1 / -1; grid-row: auto; margin-top: 1.1rem; }
  .plan .note { grid-column: 1 / -1; grid-row: auto; }
  .plan-wide { grid-template-columns: 1fr 1fr; }
  .plan-wide .pw-feats { grid-column: 1 / -1; }
  .plan-wide .pw-cta { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .plan { grid-template-columns: 1fr; }
  .plan .plan-bonus, .plan .screens { grid-column: 1; }
  .plan .plan-feats { columns: 1; }
  .plan > .plan-tag { position: static; margin-bottom: .6rem; }
}

/* --- Pricing rows, final: four blocks per row ---------------------------- */
.plan {
  grid-template-columns: minmax(180px, .8fr) minmax(210px, .8fr) 1.5fr minmax(170px, .6fr);
  grid-template-rows: auto;
  align-items: center;
}
.plan > * { grid-column: auto; grid-row: auto; }
.plan-id, .plan-opts, .plan-act { display: block; }
.plan-id .plan-tier { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; margin-bottom: .15rem; }
.plan-id > .plan-tag,
.plan-tier .plan-tag {
  position: static; transform: none; display: inline-flex;
  padding: .2rem .5rem; border-radius: 4px; font-size: .58rem; letter-spacing: .1em;
}
.plan-id h2, .plan-id h3 { margin: 0 0 .45rem; }
.plan-id .price, .plan-id .price-raw { margin: 0 0 .2rem; }
.plan-id .plan-term { margin: 0; }
.plan-opts .plan-bonus { margin: 0 0 .8rem; }
.plan-opts .screens { margin: 0; }
.plan .plan-feats {
  display: block; columns: 2; column-gap: 1.5rem; margin: 0;
}
.plan .plan-feats li { display: flex; break-inside: avoid; margin: 0 0 .5rem; }
.plan-act .btn-block { margin: 0; }
.plan-act .note { margin: .55rem 0 0; text-align: center; }

@media (max-width: 1020px) {
  .plan { grid-template-columns: 1fr 1fr; align-items: start; }
  .plan .plan-feats, .plan-act { grid-column: 1 / -1; margin-top: 1.2rem; }
}
@media (max-width: 620px) {
  .plan { grid-template-columns: 1fr; }
  .plan-opts { margin-top: 1rem; }
  .plan .plan-feats { columns: 1; }
}
/* the base rule already increments the step counter; do not double it */
.steps li::before { counter-increment: none; }

/* --- the router band, now under the hero -------------------------------- */
.router-band {
  border: 1px solid var(--line-strong); border-left: 2px solid var(--violet);
  border-radius: var(--r); padding: 1.1rem clamp(1rem, 2.4vw, 1.6rem) 1.2rem;
  background: linear-gradient(100deg, rgba(34,11,15,.6), rgba(11,10,13,.5));
}
.hp-router-wide { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0 1.4rem; }
.hp-router-wide li { border-top: 0; border-left: 1px solid var(--line); padding-left: 1.1rem; }
.hp-router-wide li:first-child { border-left: 0; padding-left: 0; }
.hp-router-wide a { grid-template-columns: 1fr; padding: .2rem 0; }
.hp-router-wide .ico { grid-column: 1; grid-row: 3; justify-self: start; margin-top: .4rem; }
@media (max-width: 1080px) {
  .hp-router-wide { grid-template-columns: repeat(2, 1fr); gap: .2rem 1.4rem; }
  .hp-router-wide li { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .hp-router-wide li:nth-child(-n+2) { border-top: 0; }
}
@media (max-width: 620px) { .hp-router-wide { grid-template-columns: 1fr; }
  .hp-router-wide li:nth-child(2) { border-top: 1px solid var(--line); } }

/* the six "why us" points sit in two columns */
.means-2 { grid-template-columns: 1fr 1fr; column-gap: clamp(1.6rem, 4vw, 3.2rem); }
@media (max-width: 860px) { .means-2 { grid-template-columns: 1fr; } }
.means-2 .mean:nth-child(2) { border-top: 0; padding-top: 0; }
@media (max-width: 860px) { .means-2 .mean:nth-child(2) { border-top: 1px solid var(--line); padding-top: 1.3rem; } }

/* the centred hero keeps its own alignment inside this left-aligned system */
.hero-cine .sec-head, .hero-cine .hero-inner { text-align: center; }
.hero-cine .hero-actions, .hero-cine .chips-hero { justify-content: center; }
.hero-cine .hero-lead { margin-inline: auto; }

/* --- Compatibility grid in this site's flatter language ------------------ */
.brandgrid { gap: 0; grid-template-columns: repeat(6, 1fr); }
@media (max-width: 980px) { .brandgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .brandgrid { grid-template-columns: repeat(2, 1fr); } }
.brandtile {
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: none; padding: 1.2rem .6rem 1.1rem; gap: .45rem;
}
.brandtile:hover { transform: none; background: rgba(255,255,255,.03); border-top-color: var(--violet); }
.bt-logo { border-radius: 8px; }
.brand-note { margin-top: 1.4rem; }

/* ==========================================================================
   Pricing, v3 — four columns in the reference's shape, in our palette
   ========================================================================== */
.pricing { grid-template-columns: repeat(4, 1fr); gap: 1rem; align-items: stretch; }
@media (max-width: 1080px) { .pricing { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .pricing { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

.plan {
  display: flex; flex-direction: column; position: relative;
  padding: 1.9rem 1.4rem 1.5rem; border-radius: var(--r-lg);
  border: 1px solid var(--line); border-left: 1px solid var(--line);
  background: linear-gradient(175deg, rgba(34,11,15,.5), rgba(12,11,14,.5));
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.plan:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.plan.featured {
  border-color: rgba(255,43,61,.55);
  background: linear-gradient(175deg, rgba(42,12,16,.75), rgba(14,12,16,.7));
  box-shadow: 0 26px 60px -32px var(--glow);
}
.plan.best { border-color: rgba(255,138,138,.45); }

/* the badge sits astride the top edge */
.plan-badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .34rem .8rem; border-radius: 999px;
  font-size: .62rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #1a0406;
}
.plan-badge .ico { width: 12px; height: 12px; }
.plan-badge-pop { background: linear-gradient(135deg, var(--violet), var(--blue)); color: #fff; }
.plan-badge-val { background: linear-gradient(135deg, var(--cyan), var(--violet)); color: #1a0406; }

.plan h2, .plan h3 {
  font-size: 1.3rem; margin: 0 0 .25rem; color: #fff; letter-spacing: -.03em;
}
.plan .plan-term {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin: 0 0 .9rem; font-size: .85rem; color: var(--ink-3);
}
.plan-free {
  color: var(--cyan); font-weight: 700; font-size: .8rem;
}
.plan .price { margin: 0 0 .15rem; align-items: baseline; }
.plan .price .cur { font-size: 1.15rem; margin-top: 0; }
.plan .price .whole { font-size: clamp(2.2rem, 1.9rem + 1vw, 2.8rem); }
.plan .price .cents { font-size: 1.1rem; margin-top: 0; }
.plan-permonth { font-size: .8rem; color: var(--ink-3); margin: 0 0 1.1rem; }

/* the connection stepper, boxed like the reference */
.plan .screens { margin: 0 0 1.2rem; }
.plan .st-label { display: none; }
.plan .stepper {
  grid-template-columns: 44px 1fr 44px; border-radius: 10px;
  background: rgba(255,255,255,.04); border-color: var(--line);
}
.plan .st-btn { height: 48px; }
.plan .st-val { flex-direction: row; align-items: baseline; gap: .35rem; }
.plan .st-val .st-n { font-size: 1.1rem; }
.plan .st-val .st-unit { font-size: .68rem; letter-spacing: .08em; text-transform: lowercase; }
.plan .st-note { font-size: .74rem; margin-top: .55rem; }

.plan .plan-feats {
  display: grid; gap: .55rem; margin: 0 0 1.4rem; padding: 0; list-style: none;
  flex: 1 1 auto;
}
.plan .plan-feats li { display: flex; gap: .55rem; font-size: .88rem; color: var(--ink-2); margin: 0; }
.plan .plan-feats .ico { color: var(--cyan); }

.plan .btn-block { margin: 0; }
.plan .btn-ghost { border-color: var(--line-strong); }
.plan .plan-cta-alt {
  background: linear-gradient(120deg, var(--cyan), var(--violet)); color: #1a0406;
}
.plan .plan-cta-alt:hover { color: #1a0406; }
.plan .note { display: none; }

/* the wide-card rules from the row layout no longer apply */
.plan-wide { display: none; }
.plan-id, .plan-opts, .plan-act { display: contents; }
/* keep the term row a constant height so all four prices sit on one line */
.plan .plan-term { min-height: 2.9em; align-content: flex-start; }
@media (max-width: 620px) { .plan .plan-term { min-height: 0; } }

/* ==========================================================================
   Hero, dressed up — an abstract interface, a grain wash and slow blooms
   ========================================================================== */

/* two slow blooms behind the headline, plus a fine grain so the flat purple
   does not read as an empty gradient */
.hero-cine::before {
  content: ""; position: absolute; inset: -10% -10% 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(28rem 20rem at 22% 18%, rgba(255,43,61,.20), transparent 70%),
    radial-gradient(34rem 24rem at 78% 8%, rgba(212,15,31,.26), transparent 72%);
  filter: blur(6px);
  animation: heroDrift 22s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) { .hero-cine::before { animation: none; } }

.hero-cine .hb-grid { opacity: .34; }
.hero-cine .hero-inner { padding-bottom: .5rem; }
.hero-cine .chips-hero { margin-bottom: clamp(2.4rem, 5vw, 3.6rem); }

/* --- the abstract interface ---------------------------------------------- */
.hero-art { position: relative; max-width: 760px; margin: 0 auto; perspective: 1200px; }
.ha-screen {
  position: relative; z-index: 2; text-align: left;
  padding: .9rem .9rem 1rem; border-radius: 14px 14px 6px 6px;
  border: 1px solid rgba(255,150,140,.28);
  background: linear-gradient(170deg, rgba(44,14,18,.92), rgba(8,6,7,.94));
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.08);
  transform: rotateX(9deg); transform-origin: top center;
}
.ha-bar { display: flex; gap: .32rem; margin-bottom: .8rem; }
.ha-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.16); }
.ha-bar span:first-child { background: var(--violet); }

.ha-rail { display: flex; gap: .5rem; margin-bottom: .8rem; flex-wrap: wrap; }
.ha-rail b, .ha-rail i {
  font-style: normal; font-family: var(--f-head); font-size: .68rem; font-weight: 700;
  letter-spacing: .06em; padding: .3rem .65rem; border-radius: 999px;
  color: var(--ink-3); background: rgba(255,255,255,.05);
}
.ha-rail b {
  color: #fff; background: linear-gradient(120deg, var(--blue), var(--violet));
  box-shadow: 0 8px 18px -10px var(--glow);
}

.ha-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; margin-bottom: .7rem; }
.ha-tiles span {
  display: block; aspect-ratio: 3 / 4; border-radius: 8px;
  border: 1px solid rgba(255,150,140,.16);
  background: linear-gradient(160deg, rgba(255,255,255,.11), rgba(255,255,255,.03));
}
.ha-tiles .t1 { background: linear-gradient(160deg, rgba(255,43,61,.5), rgba(212,15,31,.16)); }
.ha-tiles .t3 { background: linear-gradient(160deg, rgba(255,138,138,.42), rgba(212,15,31,.14)); }
.ha-tiles .t5 { background: linear-gradient(160deg, rgba(212,15,31,.46), rgba(255,43,61,.14)); }

.ha-epg { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr .9fr; gap: .4rem; }
.ha-epg span {
  height: 22px; border-radius: 5px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,150,140,.12);
}
.ha-epg span:first-child { background: rgba(255,43,61,.22); border-color: rgba(255,43,61,.3); }

/* the light the screen throws onto the "floor" */
.ha-glow {
  position: absolute; left: 8%; right: 8%; bottom: -46px; height: 120px; z-index: 1;
  background: radial-gradient(60% 100% at 50% 0%, rgba(255,43,61,.34), transparent 72%);
  filter: blur(22px);
}
@media (max-width: 620px) {
  .ha-tiles { grid-template-columns: repeat(4, 1fr); }
  .ha-tiles .t5, .ha-tiles .t6 { display: none; }
  .ha-epg { grid-template-columns: 1.4fr 1fr 1.2fr; }
  .ha-epg span:last-child { display: none; }
}

/* --- the honest fact strip ----------------------------------------------- */
.hero-facts {
  list-style: none; margin: clamp(3.4rem, 6vw, 4.6rem) 0 0; padding: 1.3rem 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  border-top: 1px solid var(--line);
}
.hero-facts li { margin: 0; display: flex; flex-direction: column; gap: .1rem; }
.hero-facts b {
  font-family: var(--f-head); font-weight: 800; font-size: 1.9rem; line-height: 1;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-facts span { font-size: .78rem; color: var(--ink-3); line-height: 1.4; }
@media (max-width: 620px) { .hero-facts { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }

/* --- a little polish elsewhere ------------------------------------------- */
.card:hover, .linkcard:hover, .plan:hover { box-shadow: 0 24px 50px -30px var(--glow); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after {
  content: ""; position: absolute; inset: 0 0 auto; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent);
  pointer-events: none;
}
.sec-alt { border-block-color: rgba(255,150,140,.16); }
.sec-head h2 { position: relative; }
/* the fact strip already closes the hero; the notice follows it tightly */
.hero-cine + .sec-tight { padding-top: clamp(1.6rem, 3vw, 2.4rem); }
.hero-facts li { align-items: center; text-align: center; }

/* ==========================================================================
   Hero photograph slot — currently EMPTY
   No photograph ships with this build, so this layer paints nothing and the
   coded backdrop carries the hero on its own. To switch a photograph on, drop
   these files into site/assets/img/photos/ and uncomment the block below:
       ovelo-tv-hero.webp / .jpg        (about 2100 x 900, the wider the better)
       ovelo-tv-hero-sm.webp / .jpg     (half size, for phones)

   .hb-photo {
     display: block;
     background-image: image-set(
       url("/assets/img/photos/ovelo-tv-hero.webp") type("image/webp"),
       url("/assets/img/photos/ovelo-tv-hero.jpg")  type("image/jpeg"));
     background-position: center 62%;
     background-size: cover;
     background-repeat: no-repeat;
     opacity: .92;
   }
   @media (max-width: 900px) {
     .hb-photo {
       background-image: image-set(
         url("/assets/img/photos/ovelo-tv-hero-sm.webp") type("image/webp"),
         url("/assets/img/photos/ovelo-tv-hero-sm.jpg")  type("image/jpeg"));
       background-position: 42% 62%;
       opacity: .8;
     }
   }
   ========================================================================== */
.hb-photo { display: none; }

/* the veil keeps the headline readable over whatever the photograph is */
.hb-veil {
  background:
    radial-gradient(48% 54% at 50% 34%, rgba(8,8,11,.8) 0%, rgba(8,8,11,.42) 60%, rgba(8,8,11,0) 100%),
    linear-gradient(180deg, rgba(8,8,11,.66) 0%, rgba(8,8,11,.16) 26%, rgba(8,8,11,.5) 76%, var(--bg) 100%),
    linear-gradient(90deg, var(--bg) 0%, rgba(8,8,11,.18) 18%, rgba(8,8,11,.18) 82%, var(--bg) 100%);
}
/* the photograph already carries the palette, so the coded layers step back */
.hero-cine .hb-screen { opacity: .22; }
.hero-cine .hb-floor  { opacity: .22; }
.hero-cine .hb-grid   { opacity: .16; }
.hero-cine .chips-hero { margin-bottom: clamp(1.6rem, 3vw, 2.2rem); }

/* ==========================================================================
   v2 — frosted fact strip and step cards
   Both use a blurred, rounded panel. backdrop-filter is progressive: browsers
   without it simply get the flat translucent background underneath.
   ========================================================================== */

/* --- Hero fact strip ------------------------------------------------------ */
.hero-facts {
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  padding: 0;
  border-top: 0;
  gap: clamp(.6rem, 1.4vw, 1rem);
}
.hero-facts li {
  padding: 1.15rem .9rem 1.05rem;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(165deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 18px 40px -28px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.hero-facts li:hover {
  transform: translateY(-3px);
  border-color: rgba(255,43,61,.42);
  box-shadow: 0 26px 50px -28px var(--glow), inset 0 1px 0 rgba(255,255,255,.2);
}
.hero-facts b { font-size: clamp(1.55rem, 3.2vw, 2.1rem); letter-spacing: -.02em; }
.hero-facts span { font-size: .76rem; color: var(--ink-2); letter-spacing: .01em; }
@media (max-width: 620px) {
  .hero-facts li { padding: .95rem .7rem .9rem; border-radius: 15px; }
}

/* --- Ordering steps ------------------------------------------------------- */
.steps { gap: clamp(.7rem, 1.6vw, 1.1rem); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.steps li {
  padding: 3.5rem 1.25rem 1.5rem;
  border: 1px solid rgba(255,255,255,.09);
  border-top: 1px solid rgba(255,255,255,.09);
  border-radius: 18px;
  background: linear-gradient(168deg, rgba(255,255,255,.075), rgba(255,255,255,.022));
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 20px 44px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.12);
  overflow: hidden;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
/* a hairline of colour along the top edge, brightest at the left */
.steps li::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--violet), rgba(212,15,31,.35) 60%, transparent);
  opacity: .8;
}
.steps li::before {
  counter-increment: none;
  position: absolute; left: 1.25rem; top: 1.15rem; transform: none;
  width: 30px; height: 30px; border-radius: 10px;
  font-size: .82rem; font-weight: 800; color: #fff;
  box-shadow: 0 10px 22px -12px var(--glow);
}
.steps li:hover {
  transform: translateY(-4px);
  border-color: rgba(255,43,61,.4);
  box-shadow: 0 30px 56px -30px var(--glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.steps li h3 { margin: 0 0 .4rem; font-size: 1.02rem; letter-spacing: -.01em; }
.steps li p { color: var(--ink-2); }
.steps li a { text-decoration-color: rgba(255,150,140,.5); }
@media (max-width: 520px) { .steps li { padding: 3.3rem 1.05rem 1.3rem; } }

/* three stat cards, then a small device strip closing the hero */
.hero-facts-3 { grid-template-columns: repeat(3, 1fr); max-width: 780px; margin-inline: auto; }
@media (max-width: 620px) { .hero-facts-3 { grid-template-columns: 1fr; } }

.hero-devices { margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.hero-devices .strip-label { margin-bottom: .7rem; font-size: .64rem; letter-spacing: .19em; }
.hero-devices .logo-row { gap: .4rem; }
.hero-devices .logo-tile {
  min-width: 0; height: 32px; padding: 0 .7rem; border-radius: 9px;
  border-color: rgba(255,255,255,.1);
  background: linear-gradient(165deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.hero-devices .logo-tile img { max-height: 15px; }
.hero-devices .logo-tile.is-text span { font-size: .64rem; letter-spacing: .08em; }
@media (max-width: 520px) {
  .hero-devices .logo-tile { height: 28px; padding: 0 .55rem; }
  .hero-devices .logo-tile.is-text span { font-size: .58rem; letter-spacing: .05em; }
}

/* The brand SVGs (Simple Icons / Bootstrap Icons) carry a viewBox but no
   width or height, so `width:auto` collapses them to zero inside a flex tile.
   They are all square, so give them an explicit box. */
.logo-tile img { width: 20px; height: 20px; max-height: none; object-fit: contain; }
.bt-logo img { width: 30px; height: 30px; object-fit: contain; }
.hero-devices .logo-tile img { width: 16px; height: 16px; }

/* ==========================================================================
   v3 — pricing columns reworked: left-aligned, one price line, boxed stepper
   ========================================================================== */
.pricing { gap: clamp(.9rem, 1.6vw, 1.4rem); align-items: stretch; }

.plan {
  text-align: left;
  align-items: stretch;          /* an older rule centred every child */
  --plan-stretch: 1;
  padding: 2.4rem 1.5rem 1.6rem;
  border-radius: 22px;
  border-left-width: 1px;
  background: linear-gradient(172deg, rgba(255,255,255,.062), rgba(255,255,255,.018));
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 26px 56px -34px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.1);
}
.plan.featured, .plan.best { border-color: rgba(255,43,61,.38); }

/* badge centred on the top edge */
.plan-badge {
  left: 50%; right: auto; transform: translate(-50%, -50%);
  border-radius: 999px; padding: .34rem .8rem; white-space: nowrap;
}

.plan > h3 { text-align: left; font-size: 1.5rem; margin: 0 0 .15rem; letter-spacing: -.02em; }
.plan-term {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .45rem;
  margin: 0 0 1rem; font-size: .88rem; color: var(--ink-3);
}
.plan-free { color: #ff8a8a; font-weight: 700; font-size: .84rem; }

/* price and its term suffix on one baseline */
.plan-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; }
.plan-price-row .price { margin: 0; justify-content: flex-start; }
.plan .price .whole { font-size: clamp(2.5rem, 4.6vw, 3.1rem); }
.plan .price .cur   { font-size: 1.15rem; align-self: flex-start; margin-top: .35rem; }
.plan .price .cents { font-size: 1.35rem; }
.price-per { font-size: .88rem; color: var(--ink-3); }
.plan-permonth { margin: .3rem 0 0; font-size: .8rem; color: var(--ink-3); text-align: left; }

/* the connections box: full width, a soft square control at each end */
.plan .screens { margin: 1.15rem 0 0; }
.plan .st-label { display: none; }
.plan .stepper {
  width: 100%; justify-content: space-between;
  padding: .45rem; border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
}
.plan .st-btn {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(255,43,61,.14); border: 1px solid rgba(255,43,61,.22);
  color: #fff; font-size: 1.15rem; line-height: 1;
}
.plan .st-btn:hover { background: rgba(255,43,61,.28); }
.plan .st-val { display: flex; align-items: baseline; gap: .34rem; }
.plan .st-n { font-size: 1.05rem; }
.plan .st-unit { font-size: .66rem; letter-spacing: .12em; color: var(--ink-3); }
.plan .st-note {
  margin: .6rem 0 0; font-size: .74rem; color: var(--ink-3); text-align: left; line-height: 1.5;
}
.plan .st-note b { color: var(--cyan); }
.plan .st-discount { display: block; }

/* features */
.plan-feats { margin: 1.15rem 0 1.4rem; display: grid; gap: .5rem; }
.plan-feats li { align-items: flex-start; font-size: .86rem; color: var(--ink-2); }
.plan-feats .ico { margin-top: .18rem; flex: none; }

/* CTA pinned to the bottom of every column, whatever the list length */
.plan-cta { margin-top: auto; border-radius: 999px; padding-block: .8rem; font-size: .92rem; }
@media (max-width: 900px) { .plan { padding: 2.4rem 1.3rem 1.5rem; } }

/* older grid-era rules pinned individual children with align-self; undo that */
.plan > * { align-self: stretch; }
.plan .screens, .plan .plan-feats, .plan .btn-block { align-self: stretch; }
/* every column reserves the bonus line so the price rows sit on one baseline */
.plan .plan-term { min-height: 4.1em; align-content: flex-start; margin-bottom: .5rem; }
.plan .plan-free { flex-basis: 100%; }
.plan .st-note { margin-bottom: .2rem; }
@media (max-width: 620px) { .plan .plan-term { min-height: 0; } }

/* keep the columns compact: one line per feature, tighter rhythm */
.plan { padding: 2.2rem 1.3rem 1.4rem; }
.plan .plan-feats { margin: 1rem 0 1.2rem; gap: .42rem; }
.plan .plan-feats li { font-size: .845rem; line-height: 1.35; }
.plan .st-note { font-size: .72rem; line-height: 1.45; }
.plan .stepper { padding: .38rem; }
.plan .st-btn { width: 34px; height: 34px; }

/* ==========================================================================
   v4 — checkout page
   ========================================================================== */
.checkout { grid-template-columns: 1.15fr .85fr; gap: clamp(1.6rem, 3vw, 3rem); }
.co-main > h1 { margin-bottom: .6rem; }
.co-main > .lead { max-width: 56ch; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }

/* each step is a frosted block, numbered like the ordering steps */
.co-step {
  margin: 0 0 clamp(1rem, 2vw, 1.4rem);
  padding: 1.3rem clamp(1rem, 2vw, 1.4rem) 1.35rem;
  border: 1px solid rgba(255,255,255,.09); border-radius: 18px;
  background: linear-gradient(168deg, rgba(255,255,255,.062), rgba(255,255,255,.018));
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 20px 44px -32px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1);
}
.co-step-h {
  display: flex; align-items: center; gap: .6rem; margin: 0 0 1rem;
  font-family: var(--f-head); font-weight: 700; font-size: 1.02rem; color: #fff;
}
.co-num {
  width: 26px; height: 26px; flex: none; display: grid; place-items: center;
  border-radius: 8px; font-size: .78rem; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, var(--blue), var(--violet));
  box-shadow: 0 8px 18px -10px var(--glow);
}

/* plan choices: two columns of selectable tiles, the radio itself hidden */
.choice-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; margin-bottom: 0; }
@media (max-width: 520px) { .choice-grid { grid-template-columns: 1fr; } }
.choice-grid > label {
  position: relative; display: block; padding: .95rem 1rem;
  border-radius: 14px; border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
}
.choice-grid input { position: absolute; opacity: 0; pointer-events: none; }
.choice-grid .ch-txt { display: block; }
.choice-grid .ch-txt b { font-size: 1.02rem; margin-bottom: .1rem; }
.ch-term { display: block; font-size: .76rem; color: var(--ink-3); }
.ch-price {
  display: block; margin-top: .45rem; font-family: var(--f-head);
  font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em;
  background: linear-gradient(120deg, var(--cyan), var(--violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ch-mark {
  position: absolute; top: .8rem; right: .85rem;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; opacity: 0; transform: scale(.7);
  background: linear-gradient(140deg, var(--blue), var(--violet));
  transition: opacity .18s ease, transform .18s ease;
}
.ch-mark .ico { width: 12px; height: 12px; color: #fff; }
.choice-grid > label:hover { border-color: rgba(255,43,61,.35); background: rgba(255,255,255,.06); }
.choice-grid > label:has(input:checked) {
  border-color: var(--violet); background: rgba(255,43,61,.1);
  box-shadow: 0 0 0 1px rgba(255,43,61,.4), 0 18px 40px -28px var(--glow);
}
.choice-grid > label:has(input:checked) .ch-mark { opacity: 1; transform: scale(1); }
/* keyboard users still get a visible ring */
.choice-grid input:focus-visible ~ .ch-txt { outline: 2px solid var(--cyan); outline-offset: 6px; }

.choice-stepper .stepper { width: 100%; max-width: none; padding: .38rem; border-radius: 14px; }
.choice-stepper .st-btn { width: 40px; height: 40px; border-radius: 10px; background: rgba(255,43,61,.14); }
.choice-stepper .st-val { flex-direction: row; align-items: baseline; gap: .35rem; }
.co-hint { margin: .85rem 0 0; font-size: .84rem; color: var(--ink-2); line-height: 1.6; }

.co-list { margin: 0; padding: 0; list-style: none; counter-reset: n; display: grid; gap: .6rem; }
.co-list li {
  position: relative; margin: 0; padding-left: 1.5rem;
  font-size: .875rem; color: var(--ink-2); line-height: 1.55;
}
.co-list li::before {
  content: ""; position: absolute; left: .3rem; top: .55em;
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(140deg, var(--blue), var(--violet));
}
.co-list b { color: #fff; font-weight: 700; }

/* the order panel follows you down the page on a wide screen */
.co-panel {
  position: sticky; top: 92px;
  border-radius: 20px; padding: 1.6rem clamp(1.1rem, 2vw, 1.5rem) 1.4rem;
  border: 1px solid rgba(255,43,61,.28);
  background: linear-gradient(172deg, rgba(42,12,16,.6), rgba(12,11,14,.55));
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 30px 66px -36px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.12);
}
.co-panel h2 { font-size: 1.3rem; margin: 0 0 1.1rem; }
.co-panel .summary-row { font-size: .9rem; padding: .7rem 0; }
.co-panel-note { margin: 1.1rem 0 1.1rem; font-size: .84rem; color: var(--ink-2); line-height: 1.6; }
.co-panel .btn-block { border-radius: 999px; padding-block: .85rem; }
.co-assure { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.co-assure li {
  display: flex; gap: .5rem; margin: 0;
  font-size: .78rem; color: var(--ink-3); line-height: 1.5;
}
.co-assure .ico { width: 14px; height: 14px; flex: none; margin-top: .15rem; color: var(--cyan); }
@media (max-width: 900px) { .co-panel { position: static; } }
.choice-stepper .stepper { grid-template-columns: 40px 1fr 40px; }
.choice-stepper .st-val { justify-content: center; }

/* ==========================================================================
   v5 — feature cards and callouts in the frosted house style
   ========================================================================== */
.card {
  position: relative; overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background: linear-gradient(168deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 22px 46px -32px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.11);
}
/* a colour hairline along the top edge, brightening on hover */
.card::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, var(--violet), rgba(212,15,31,.35) 60%, transparent);
  opacity: .55; transition: opacity .22s ease;
}
.card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,43,61,.4);
  box-shadow: 0 34px 60px -32px var(--glow), inset 0 1px 0 rgba(255,255,255,.18);
}
.card:hover::before { opacity: 1; }
.card h3 { font-size: 1.08rem; letter-spacing: -.01em; }
.card p { font-size: .9rem; line-height: 1.62; }

/* the icon becomes a filled gradient tile that lifts with the card */
.card-ico {
  width: 42px; height: 42px; border-radius: 12px; margin-bottom: .95rem;
  background: linear-gradient(140deg, var(--blue), var(--violet));
  border: 0; color: #fff;
  box-shadow: 0 12px 26px -14px var(--glow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card-ico .ico { width: 20px; height: 20px; }
.card:hover .card-ico { transform: translateY(-2px) scale(1.06); box-shadow: 0 16px 32px -14px var(--glow); }

/* callouts: same frosted panel, accent bar kept */
.callout {
  border-radius: 16px; padding: 1.15rem 1.35rem;
  border: 1px solid rgba(255,255,255,.1); border-left: 3px solid var(--violet);
  background: linear-gradient(120deg, rgba(255,43,61,.09), rgba(255,255,255,.025));
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
  box-shadow: 0 18px 40px -32px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.08);
}
.callout p { font-size: .92rem; line-height: 1.65; }
.callout-warn {
  border-left-color: var(--amber);
  background: linear-gradient(120deg, rgba(255,74,58,.1), rgba(255,255,255,.025));
}
.callout-ok {
  border-left-color: var(--wa);
  background: linear-gradient(120deg, rgba(37,211,102,.1), rgba(255,255,255,.025));
}

/* ==========================================================================
   OVELO TV — theme layer
   Square shoulders, a condensed caps display face, and one red that does all
   the work. This block deliberately overrides the softer, rounder treatments
   inherited from the generator so the site reads as its own thing.
   ========================================================================== */

/* --- Type ---------------------------------------------------------------- */
h1, h2, h3, h4, .brand-txt b, .price, .plan-term, .st-n {
  font-family: var(--f-head);
}
h1, h2 {
  text-transform: uppercase;
  letter-spacing: -.005em;
  font-weight: 600;
  line-height: 1.04;
}
h1 { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); }
/* h3 stays in the body face: condensed caps are unreadable at card size */
h3, h4 { font-family: var(--f-body); font-weight: 700; text-transform: none; letter-spacing: -.01em; }
.kicker, .hp-kicker, .strip-label, .sec-head .kicker {
  font-family: var(--f-head); font-weight: 600; letter-spacing: .26em;
}
.brand-txt b { text-transform: uppercase; font-weight: 600; letter-spacing: .02em; font-size: 1.24rem; }
.brand-txt .bt-row { letter-spacing: .36em; }

/* --- Shape: corners come off almost everything --------------------------- */
.card, .steps li, .co-step, .hero-facts li, .plan, .callout, .linkcard,
.panel, .co-panel, .modal, .brandtile, .devtile, .choice-grid > label,
.logo-tile, .pay-tile, .stepper, .plan .st-btn, .hero-devices .logo-tile {
  border-radius: 4px;
}
.btn, .plan-cta, .co-panel .btn-block, .choice-stepper .st-btn, .plan-badge,
.hero-facts li, .chips li, .badge { border-radius: 3px; }
.plan-badge { border-radius: 2px; letter-spacing: .18em; }
.card-ico, .co-num { border-radius: 3px; }

/* --- Surfaces: flatter, with a red rule instead of a glow ---------------- */
.card, .steps li, .co-step, .hero-facts li {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-color: rgba(255,255,255,.1);
  box-shadow: none;
}
.card::before, .steps li::after {
  height: 3px;
  background: var(--blue);
  opacity: 1;
}
.card:hover, .steps li:hover, .hero-facts li:hover, .co-step:hover {
  transform: none;
  border-color: rgba(255,43,61,.5);
  background: linear-gradient(180deg, rgba(255,43,61,.09), rgba(255,255,255,.02));
  box-shadow: none;
}
.card:hover .card-ico { transform: none; }
.card-ico { background: var(--blue); box-shadow: none; }

/* --- Buttons: solid red, no gloss ---------------------------------------- */
.btn-primary {
  background: var(--blue);
  border: 1px solid var(--blue);
  text-transform: uppercase;
  font-family: var(--f-head);
  font-weight: 600;
  letter-spacing: .1em;
}
.btn-primary::after { display: none; }
.btn-primary:hover { background: var(--violet); border-color: var(--violet); }
.btn-ghost {
  text-transform: uppercase; font-family: var(--f-head); font-weight: 600; letter-spacing: .1em;
  border-color: rgba(255,255,255,.2);
}
.btn-ghost:hover { border-color: var(--blue); color: #fff; }

/* --- Pricing: the accent moves to a full-width red cap ------------------- */
.plan { border-color: rgba(255,255,255,.1); }
.plan::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: rgba(255,255,255,.12);
}
.plan.featured::after, .plan.best::after { background: var(--blue); }
.plan.featured { border-color: rgba(255,43,61,.45); }
.plan .price .cur { color: var(--blue); }
.plan .price .whole, .plan .price .cents, .ch-price, .hero-facts b {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #fff;
}
.hero-facts b { color: var(--violet); }
.ch-price { color: var(--violet); }
.plan .st-note b, .plan-feats .ico, .co-assure .ico { color: var(--violet); }
.plan .st-btn { background: rgba(255,43,61,.16); border-color: rgba(255,43,61,.3); }
.plan .st-btn:hover { background: var(--blue); }

/* --- Numbered eyebrows get a red bar rather than a thin line ------------- */
.sec-head .kicker::before, .kicker::before { background: var(--blue); width: 3px; }

/* --- Hero: scan lines and a single red sweep, no purple blooms ----------- */
.hero-cine .hb-screen, .hero-cine .hb-floor {
  background: radial-gradient(60% 50% at 50% 0%, rgba(212,15,31,.3), transparent 70%);
  opacity: .5;
}
.hero-cine .hb-grid {
  background-image: repeating-linear-gradient(
    to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 4px);
  opacity: .5;
}
.hero-cine::before { background: none; }
.h1-brand {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: var(--violet);
}
.h1-main { color: #fff; }

/* --- Header: a hairline of red under the bar ---------------------------- */
.site-head { border-bottom: 1px solid rgba(255,255,255,.08); }
.site-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--blue), rgba(212,15,31,.15) 45%, transparent);
}
.nav a { text-transform: uppercase; font-family: var(--f-head); letter-spacing: .1em; font-weight: 500; }
.nav a::after { background: var(--blue); }

/* --- Callouts: a solid red bar, no tint gradient ------------------------ */
.callout {
  background: rgba(255,255,255,.035);
  border-left: 3px solid var(--blue);
  box-shadow: none;
}
.callout-warn { border-left-color: var(--amber); background: rgba(255,74,58,.07); }
.callout-ok { border-left-color: var(--wa); background: rgba(37,211,102,.07); }

/* --- Section dividers --------------------------------------------------- */
.sec-alt { background: rgba(255,255,255,.018); border-block-color: rgba(255,255,255,.07); }

/* badges and the best-value CTA: solid fills, legible text */
.plan-badge-pop { background: var(--blue); color: #fff; }
.plan-badge-val { background: var(--cyan); color: #1a0406; }
.plan .plan-cta-alt {
  background: var(--cyan); border-color: var(--cyan); color: #1a0406;
}
.plan .plan-cta-alt:hover { background: #ff9d9d; border-color: #ff9d9d; color: #1a0406; }
.plan.best::after { background: var(--cyan); }
.plan.best { border-color: rgba(255,138,138,.45); }

/* No hero photograph ships with this build, so the photo layer stays off and
   the coded backdrop carries the hero on its own. Drop
   ovelo-tv-hero.{webp,jpg} (and the -sm pair) into assets/img/photos/ and
   delete this rule to switch the photograph on. */
.hb-photo { display: none; }
.hb-veil {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(212,15,31,.22), transparent 72%),
    linear-gradient(180deg, rgba(8,8,11,.5) 0%, rgba(8,8,11,.1) 30%, var(--bg) 100%);
}

/* the wordmark: solid white name, red suffix — no gradient */
.brand-txt b {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #fff;
}
.brand-txt .bt-row { color: var(--violet); }

/* ==========================================================================
   v2 — type and shape reset to match the reference look
   One typeface, heavy weights, mixed case, tight tracking. Corners come back
   a little so buttons and cards read as modern rather than industrial.
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--f-head);
  text-transform: none;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}
h1 { font-size: clamp(2.4rem, 1.2rem + 4.4vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.1rem); }
h3 { font-size: 1.12rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
h4 { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.hero-cine h1 { letter-spacing: -.04em; }
.h1-brand { font-size: .42em; font-weight: 700; letter-spacing: -.01em; display: block; margin-bottom: .5rem; }
.hero-lead { font-size: clamp(1.02rem, .95rem + .3vw, 1.2rem); color: var(--ink-2); }

/* eyebrows and nav go back to a normal letterfit */
.kicker, .hp-kicker, .strip-label, .rail-label {
  font-family: var(--f-body); font-weight: 700; letter-spacing: .16em;
}
.nav a { font-family: var(--f-body); letter-spacing: 0; text-transform: none; font-weight: 500; font-size: .975rem; }
.brand-txt b { font-family: var(--f-head); font-weight: 800; letter-spacing: -.03em; text-transform: none; font-size: 1.3rem; }
.brand-txt .bt-row { letter-spacing: .1em; font-weight: 700; }
.btn, .btn-primary, .btn-ghost {
  font-family: var(--f-body); text-transform: none; letter-spacing: -.01em;
  font-weight: 600; font-size: 1rem;
}

/* corners: soft again, but nowhere near the sister site's 22px */
:root { --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 18px; }
.card, .steps li, .co-step, .plan, .callout, .linkcard, .panel, .co-panel,
.modal, .brandtile, .devtile, .choice-grid > label, .logo-tile, .pay-tile,
.stepper, .rail-card { border-radius: 12px; }
.btn, .plan-cta, .co-panel .btn-block, .plan .st-btn, .choice-stepper .st-btn { border-radius: 10px; }
.btn { padding: .85rem 1.5rem; }
.plan-badge { border-radius: 999px; letter-spacing: .04em; text-transform: none; font-weight: 700; }
.card-ico, .co-num { border-radius: 10px; }
.chips li, .badge { border-radius: 999px; }

/* the hero stat row: plain numbers, no boxes — as in the reference */
.hero-facts, .hero-facts-3 {
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  gap: clamp(1.8rem, 5vw, 4.5rem);
  max-width: none;
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
}
.hero-facts li {
  background: none; border: 0; box-shadow: none; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.hero-facts li:hover { background: none; border: 0; transform: none; }
.hero-facts b {
  font-family: var(--f-head); font-weight: 800; letter-spacing: -.04em;
  font-size: clamp(1.9rem, 1.2rem + 2vw, 3rem); color: var(--violet);
}
.hero-facts span { font-size: .875rem; color: var(--ink-3); }
@media (max-width: 620px) { .hero-facts, .hero-facts-3 { grid-template-columns: repeat(2, auto); } }

/* ==========================================================================
   Poster rails — the "what people are watching" block
   ========================================================================== */
.rail-label {
  margin: clamp(1.6rem, 3vw, 2.2rem) 0 .8rem;
  font-size: .7rem; text-transform: uppercase; color: var(--ink-3);
}
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: 171px;
  gap: .9rem; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding-bottom: .7rem;
  scrollbar-width: thin; scrollbar-color: rgba(255,43,61,.5) transparent;
}
.rail::-webkit-scrollbar { height: 8px; }
.rail::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 99px; }
.rail::-webkit-scrollbar-thumb { background: rgba(255,43,61,.5); border-radius: 99px; }
.rail-card {
  scroll-snap-align: start; display: block; color: var(--ink);
  text-decoration: none; transition: transform .2s ease;
}
.rail-card:hover { transform: translateY(-4px); }
.rc-art {
  display: block; overflow: hidden; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  aspect-ratio: 2 / 3;
}
.rc-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rail-card:hover .rc-art { border-color: rgba(255,43,61,.55); }
.rc-meta { display: block; padding: .55rem .1rem 0; }
.rc-meta b { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.rc-sub { display: block; margin-top: .15rem; font-size: .76rem; color: var(--ink-3); }
.rc-score { color: var(--violet); font-weight: 700; }
.rail-credit {
  margin: 1.4rem 0 0; font-size: .76rem; color: var(--ink-3); line-height: 1.6;
  max-width: 70ch;
}

/* ==========================================================================
   v3 — pricing columns in the reference layout
   Tier + term chip, one big two-tone price, a bordered connections box with
   the label left and the controls right, tick list, full-width button.
   ========================================================================== */
.pricing { grid-template-columns: repeat(4, 1fr); gap: clamp(.9rem, 1.6vw, 1.4rem); }
@media (max-width: 1180px) { .pricing { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .pricing { grid-template-columns: 1fr; max-width: 430px; margin-inline: auto; } }

.plan {
  text-align: left; align-items: stretch;
  padding: 2.1rem 1.5rem 1.6rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.09);
}
.plan.featured {
  border-color: rgba(255,43,61,.5);
  background: linear-gradient(180deg, rgba(255,43,61,.07), rgba(255,255,255,.015));
}
.plan::after { display: none; }          /* the top rule goes; the pill is enough */

/* tier name and the term chip beside it */
.plan h2, .plan h3 {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: 0 0 .1rem; font-size: 1.45rem; font-weight: 800; letter-spacing: -.035em;
}
.plan-chip {
  font-family: var(--f-body); font-size: .62rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .26rem .5rem; border-radius: 5px;
  color: var(--violet); background: rgba(255,43,61,.14);
  border: 1px solid rgba(255,43,61,.28);
}
.plan-free {
  margin: .35rem 0 0; font-size: .8rem; font-weight: 700; color: #ff8a8a;
  flex-basis: auto;
}

/* one big price, nothing beside it */
.plan .price {
  margin: .9rem 0 .2rem; justify-content: flex-start; align-items: baseline;
}
.plan .price .cur {
  font-size: clamp(1.5rem, 1.2rem + .9vw, 2.1rem); margin-top: 0;
  color: #fff; font-weight: 800; letter-spacing: -.03em;
}
.plan .price .whole {
  font-size: clamp(2.6rem, 1.9rem + 2.4vw, 3.6rem); color: #fff;
  font-weight: 800; letter-spacing: -.05em;
}
.plan .price .cents {
  font-size: clamp(1.1rem, .95rem + .5vw, 1.5rem); color: var(--ink-3);
  font-weight: 700; letter-spacing: -.02em; margin-top: 0;
}
.plan .plan-permonth {
  margin: 0 0 1.15rem; font-size: .82rem; color: var(--ink-3); text-align: left;
}

/* the connections box: label left, controls right, note underneath */
.plan .screens {
  margin: 0 0 1.2rem; padding: .85rem .9rem .8rem;
  border: 1px solid rgba(255,255,255,.09); border-radius: 12px;
  background: rgba(255,255,255,.03);
}
.plan .st-label {
  display: block; float: left; margin: .55rem 0 0;
  font-family: var(--f-body); font-size: .92rem; font-weight: 600;
  letter-spacing: -.01em; text-transform: none; color: #fff;
}
.plan .stepper {
  float: right; width: auto; display: inline-flex; align-items: center; gap: .35rem;
  padding: 0; border: 0; background: none; border-radius: 0;
}
.plan .st-btn {
  width: 32px; height: 32px; border-radius: 8px; font-size: 1.05rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  color: #fff;
}
.plan .st-btn:hover { background: var(--blue); border-color: var(--blue); }
.plan .st-btn:disabled { opacity: .35; }
.plan .st-val { min-width: 26px; justify-content: center; }
.plan .st-n { font-size: 1.02rem; font-weight: 700; color: var(--violet); }
.plan .st-unit { display: none; }
.plan .st-note {
  clear: both; margin: .75rem 0 0; padding-top: .7rem;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: .76rem; color: var(--ink-3); line-height: 1.5; text-align: left;
}
.plan .st-note b { color: var(--violet); }
.plan .st-discount { display: block; }

/* tick list and button */
.plan .plan-feats { margin: 0 0 1.3rem; gap: .55rem; }
.plan .plan-feats li { font-size: .875rem; color: var(--ink-2); line-height: 1.4; }
.plan .plan-feats .ico { color: var(--violet); width: 15px; height: 15px; margin-top: .16rem; }
.plan .plan-cta {
  margin-top: auto; border-radius: 10px; padding-block: .9rem;
  font-size: .975rem; font-weight: 600;
}
.plan .btn-ghost {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #fff;
}
.plan .btn-ghost:hover { background: var(--blue); border-color: var(--blue); }

/* the pill badge sits astride the top edge, centred */
.plan-badge {
  top: 0; left: 50%; transform: translate(-50%, -50%);
  padding: .34rem .85rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .04em; text-transform: none;
}

/* every column reserves the bonus line, so prices and connection boxes across
   the row sit on the same baselines whether a plan has a bonus or not */
.plan-free { min-height: 1.25em; }
.plan h2, .plan h3 { min-height: 2.1rem; }
.plan .plan-free:empty { display: block; }

/* all four prices in white, including the featured column */
.plan.featured .price .whole, .plan.featured .price .cur,
.plan.best .price .whole, .plan.best .price .cur { color: #fff; }
.plan.featured .price .cents, .plan.best .price .cents { color: var(--ink-3); }

/* one button treatment across the row, as in the reference */
.plan .plan-cta, .plan .btn-ghost, .plan .plan-cta-alt {
  background: var(--blue); border: 1px solid var(--blue); color: #fff;
}
.plan .plan-cta:hover, .plan .btn-ghost:hover, .plan .plan-cta-alt:hover {
  background: var(--violet); border-color: var(--violet); color: #fff;
}

/* Perfect row alignment across the row of columns: the cards share the grid's
   rows via subgrid, so heading, bonus line, price, connections box, tick list
   and button all sit on the same baselines regardless of text length.
   Browsers without subgrid keep the ordinary flex column. */
@supports (grid-template-rows: subgrid) {
  .pricing { grid-template-rows: auto auto auto auto auto 1fr auto; }
  .plan {
    display: grid;
    /* an older rule gave .plan four explicit columns; the card needs exactly
       one, or every child is squeezed into a 180px track */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    grid-row: span 7;
    row-gap: 0;
  }
  /* old grid-era rules pinned children to explicit columns/rows; clear them
     or the subgrid places everything in the wrong order */
  .plan > h2, .plan > h3, .plan > .plan-free, .plan > .price, .plan > .price-raw,
  .plan > .plan-permonth, .plan > .screens, .plan > .plan-feats,
  .plan > .plan-cta, .plan > .btn-block, .plan > .note {
    grid-column: 1; grid-row: auto;
  }
  .plan > h2, .plan > h3 { min-height: 0; align-content: start; }
  .plan .plan-free { min-height: 0; align-content: start; }
  .plan .plan-feats { align-content: start; }
  .plan .plan-cta { margin-top: 0; align-self: end; }
}

/* 1fr tracks take their minimum from the item's min-content, and an old
   `columns: 2` on the tick list made that minimum enormous — which blew the
   four columns out past the container. Pin both. */
.pricing > .plan, .plan > * { min-width: 0; }
.plan .plan-feats { display: grid; column-count: auto; columns: auto; }
.plan .st-note, .plan .plan-feats li { overflow-wrap: break-word; }

/* tier name and chip on one line even in the narrowest column */
.plan h2, .plan h3 { font-size: clamp(1.15rem, .95rem + .5vw, 1.45rem); gap: .45rem; }
.plan-chip { font-size: .58rem; padding: .24rem .42rem; letter-spacing: .07em; white-space: nowrap; }
.plan .plan-permonth { white-space: nowrap; }

/* ==========================================================================
   v4 — the pricing row spreads wider than the rest of the page, and the
   connections control gets a proper treatment
   ========================================================================== */

/* A wider container just for the pricing row, so four columns get room to
   breathe on a large screen instead of huddling inside the 1200px measure. */
.container-wide { max-width: 1640px; }
.container-wide .sec-head { max-width: 1640px; }

/* --- the connections control -------------------------------------------- */
.plan .screens {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .2rem .9rem;
  margin: 0 0 1.25rem;
  padding: .95rem 1rem .9rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,43,61,.12), transparent 60%),
    rgba(255,255,255,.032);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.plan .st-label {
  grid-column: 1; float: none; margin: 0;
  font-family: var(--f-body); font-size: .66rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--ink-3);
}
/* the stepper is a pill on a dark inset track */
.plan .stepper {
  grid-column: 2; float: none; width: auto;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.5);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.plan .screens:hover .stepper {
  border-color: rgba(255,43,61,.45);
  box-shadow: 0 0 0 3px rgba(255,43,61,.1);
}
.plan .st-btn {
  width: 30px; height: 30px; border-radius: 999px; font-size: 1.05rem;
  background: rgba(255,255,255,.07); border: 1px solid transparent; color: #fff;
  display: grid; place-items: center; line-height: 1;
  transition: background .18s ease, color .18s ease;
}
.plan .st-btn:hover:not(:disabled) { background: var(--blue); color: #fff; }
.plan .st-btn:disabled { opacity: .3; }
.plan .st-val { min-width: 30px; justify-content: center; }
.plan .st-n {
  font-family: var(--f-head); font-size: 1.05rem; font-weight: 800;
  letter-spacing: -.02em; color: #fff;
}
/* the note sits on its own row, with a red marker rather than a rule */
.plan .st-note {
  grid-column: 1 / -1; clear: none;
  margin: .7rem 0 0; padding: .6rem 0 0;
  border-top: 1px solid rgba(255,255,255,.07);
  font-size: .76rem; line-height: 1.5; color: var(--ink-3); text-align: left;
}
.plan .st-note b { color: var(--violet); font-weight: 700; }
.plan .st-discount { display: block; margin-top: .1rem; }
.plan .st-discount::before {
  content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%;
  background: var(--violet); vertical-align: middle; margin-right: .4rem; opacity: .7;
}

/* with more width the tier name and its chip always fit on one line */
.plan h2, .plan h3 { font-size: clamp(1.2rem, 1rem + .55vw, 1.55rem); }
.plan-chip { font-size: .6rem; padding: .26rem .46rem; }
.plan .st-label { text-align: left; }

/* With a photograph behind it the hero needs a heavier veil and the coded
   layers step almost all the way back, or the headline fights the television. */
.hb-veil {
  background:
    linear-gradient(180deg, rgba(8,8,11,.82) 0%, rgba(8,8,11,.42) 30%, rgba(8,8,11,.5) 64%, var(--bg) 100%),
    radial-gradient(58% 54% at 50% 38%, rgba(8,8,11,.62) 0%, rgba(8,8,11,.2) 64%, rgba(8,8,11,0) 100%),
    linear-gradient(90deg, rgba(8,8,11,.7) 0%, rgba(8,8,11,.06) 28%, rgba(8,8,11,.06) 72%, rgba(8,8,11,.7) 100%);
}
.hero-cine .hb-screen, .hero-cine .hb-floor { opacity: .1; }
.hero-cine .hb-grid { opacity: .18; }
/* a little more weight behind the type now there is a picture underneath */
.hero-cine h1, .hero-cine .h1-main { text-shadow: 0 2px 30px rgba(3,3,4,.8); }
.hero-cine .hero-lead { text-shadow: 0 1px 18px rgba(3,3,4,.85); }

/* ==========================================================================
   v5 — the brand line in the hero
   The name is set as a display piece: heavy caps, a red-to-orange gradient
   across the letters, a blurred copy of itself behind for the glow, and a
   short rule either side. The gradient is clipped to the text, so a browser
   that cannot do background-clip falls back to solid red — never invisible.
   ========================================================================== */
.hero-cine h1 { display: block; }

.h1-brand {
  position: relative;
  display: inline-flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.1rem);
  margin: 0 auto clamp(.7rem, 1.6vw, 1.1rem);
  font-family: var(--f-head);
  font-size: clamp(1.5rem, .9rem + 1.9vw, 2.6rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1;
  color: var(--violet);                       /* fallback if clipping fails */
}
/* the short rules */
.h1-brand::before, .h1-brand::after {
  content: ""; display: block; height: 2px; width: clamp(20px, 5vw, 54px);
  background: linear-gradient(90deg, transparent, var(--blue));
  flex: 0 0 auto;
}
.h1-brand::after { background: linear-gradient(270deg, transparent, var(--blue)); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .h1-brand {
    background: linear-gradient(96deg, var(--cyan) 0%, var(--violet) 42%, var(--blue) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    background-clip: text;
  }
  /* ::before/::after are separate boxes, so the rules keep their solid fill */
  .h1-brand::before, .h1-brand::after { -webkit-text-fill-color: initial; }
}
.hero-cine h1 .h1-brand { filter: drop-shadow(0 0 26px rgba(255,43,61,.42)); }

/* the main headline gets a touch more presence over the photograph */
.h1-main {
  display: block;
  font-weight: 800;
  letter-spacing: -.042em;
  line-height: 1.02;
  color: #fff;
}
.hero-cine .hero-lead {
  max-width: 62ch; margin-inline: auto;
  color: #e4dcda;
}

/* ==========================================================================
   v6 — the poster line: one continuous row that scrolls by itself
   The track carries the list twice and slides exactly half its width, so the
   loop is seamless. Bigger cards than before: 220px instead of 171px.
   ========================================================================== */
.rail-wrap {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  /* the line runs to both screen edges, fading out rather than stopping dead */
  margin-inline: calc(var(--gut) * -1);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.rail-marquee { overflow: hidden; }
.rail-track {
  display: flex;
  width: max-content;
  gap: 1.1rem;
  /* no padding on the track: translating by exactly -50% only lines the loop
     up if both halves are identical, and padding would offset the seam */
  /* about 2.6s per card keeps it slow enough to read the titles */
  animation: rail-slide calc(var(--rail-count, 24) * 2.6s) linear infinite;
  will-change: transform;
}
@keyframes rail-slide {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
/* pause on hover, and whenever a card inside takes keyboard focus */
.rail-wrap:hover .rail-track,
.rail-track:focus-within { animation-play-state: paused; }

.rail-card {
  flex: 0 0 220px; display: block; color: var(--ink); text-decoration: none;
  transition: transform .22s ease;
}
.rail-card:hover { transform: translateY(-6px); }
.rc-art {
  display: block; overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04);
  aspect-ratio: 2 / 3; box-shadow: 0 22px 44px -26px rgba(0,0,0,.95);
}
.rc-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rail-card:hover .rc-art {
  border-color: rgba(255,43,61,.6);
  box-shadow: 0 26px 50px -24px rgba(255,43,61,.35);
}
.rc-meta { display: block; padding: .65rem .15rem 0; }
.rc-meta b { display: block; font-size: .95rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.rc-sub { display: block; margin-top: .2rem; font-size: .8rem; color: var(--ink-3); }
.rc-score { color: var(--violet); font-weight: 700; }
.rail-credit { margin: 1.5rem 0 0; font-size: .76rem; color: var(--ink-3); line-height: 1.6; max-width: 74ch; }

@media (max-width: 640px) {
  .rail-card { flex-basis: 150px; }
  .rc-meta b { font-size: .86rem; }
}
/* someone who asked for less motion gets a line they scroll themselves */
@media (prefers-reduced-motion: reduce) {
  .rail-track { animation: none; }
  .rail-marquee { overflow-x: auto; }
}

/* the wide container is for the poster line, not for prose: keep the section's
   heading and lead at a readable measure */
.container-wide .sec-head { max-width: 78ch; }
.container-wide .sec-head p { max-width: 78ch; }

/* ==========================================================================
   v7 — header: logo left, nav centred, one red button right
   Plus the notice strip above it. The strip says what is true about this site
   rather than warning people off "unofficial" copies — this IS the
   independent one, and claiming otherwise is the thing we must never do.
   ========================================================================== */
/* the bar itself: three zones, the nav taking the middle */
.head-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.2rem;
  min-height: 78px;
}
.head-nav { justify-self: center; }
.head-nav ul { gap: clamp(.6rem, 1.6vw, 1.5rem); }
.head-cta { justify-self: end; }
.head-start {
  padding: .68rem 1.4rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
}
/* the underline marker under the current page stays, it reads well here */
.nav a { padding-block: .4rem; }
@media (max-width: 980px) {
  .head-inner { grid-template-columns: auto 1fr; }
  .head-start { display: none; }        /* it lives in the mobile menu instead */
}
.mm-actions { display: grid; gap: .6rem; }

/* The notice strip scrolls away while the header stays put, so the mobile
   menu's fixed offset has to clear whatever the header's bottom edge is at
   the moment it opens. A JS-free way: measure it with a variable the header
   sets, falling back to the header height alone. */
.mobile-menu { inset: var(--head-bottom, 78px) 0 0; }

/* ==========================================================================
   v8 — official device logos in the tiles, and a bigger poster line
   ========================================================================== */

/* Manufacturer marks ship monochrome (Simple Icons are black), so they are
   flipped to white to read on the dark tile. Add class="keep-colour" to an
   img to opt a full-colour logo out of the flip. */
.dt-logo {
  width: 30px; height: 30px; object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .9;
  transition: opacity .2s ease;
}
.dt-logo.keep-colour { filter: none; opacity: 1; }
.devtile:hover .dt-logo { opacity: 1; }
.dt-ico img { width: 30px; height: 30px; }
.brand-note {
  margin: 1.4rem 0 0; font-size: .76rem; color: var(--ink-3);
  line-height: 1.6; max-width: 86ch;
}

/* --- bigger posters ------------------------------------------------------ */
.rail-card { flex-basis: 290px; }
.rc-art { border-radius: 14px; }
.rc-meta { padding-top: .8rem; }
.rc-meta b { font-size: 1.05rem; }
.rc-sub { font-size: .84rem; }
/* wider cards travel further, so the lap gets longer to keep the same pace */
.rail-track { animation-duration: calc(var(--rail-count, 24) * 3.4s); }
@media (max-width: 900px) { .rail-card { flex-basis: 210px; } }
@media (max-width: 640px) { .rail-card { flex-basis: 165px; } .rc-meta b { font-size: .9rem; } }

/* ==========================================================================
   v9 — the ordering steps, restyled
   A faint connector runs behind the row; each card carries a large ghost
   numeral, a solid red chip, and a red underline that grows on hover.
   ========================================================================== */
.steps {
  position: relative;
  gap: clamp(.8rem, 1.6vw, 1.3rem);
}
/* the connector: a hairline across the row, level with the number chips */
.steps::before {
  content: "";
  position: absolute; left: 1.6rem; right: 1.6rem; top: 2.55rem;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(255,43,61,.5), rgba(255,43,61,.16) 50%, rgba(255,43,61,.5));
  z-index: 0;
}
@media (max-width: 900px) { .steps::before { display: none; } }

.steps li {
  position: relative; z-index: 1; overflow: hidden;
  padding: 3.6rem 1.4rem 1.9rem;
  border: 1px solid rgba(255,255,255,.075);
  border-radius: 14px;
  background: linear-gradient(178deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.012) 45%, transparent 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: none;
  transition: border-color .24s ease, background .24s ease, transform .24s ease;
}
/* the ghost numeral, bottom-right, barely there */
.steps li::marker { content: none; }
.steps li > h3::after {
  content: attr(data-num);
  position: absolute; right: .5rem; bottom: -1.7rem;
  font-family: var(--f-head); font-weight: 900; font-size: 5.4rem; line-height: 1;
  letter-spacing: -.06em; color: rgba(255,43,61,.055);
  pointer-events: none;
}
/* the chip */
.steps li::before {
  left: 1.4rem; top: 1.35rem;
  width: 34px; height: 34px; border-radius: 10px;
  font-size: .9rem; font-weight: 800; color: #fff;
  background: var(--blue);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 0 0 5px var(--bg), 0 10px 24px -12px var(--glow);
}
/* the growing underline replaces the old full-width top rule */
.steps li::after {
  left: 1.4rem; right: 1.4rem; top: auto; bottom: 0;
  height: 2px; width: auto;
  background: linear-gradient(90deg, var(--violet), rgba(255,43,61,0));
  transform: scaleX(.18); transform-origin: left;
  transition: transform .3s ease;
  opacity: 1;
}
.steps li:hover {
  transform: translateY(-4px);
  border-color: rgba(255,43,61,.4);
  background: linear-gradient(178deg, rgba(255,43,61,.08) 0%, rgba(255,255,255,.015) 55%, transparent 100%);
}
.steps li:hover::after { transform: scaleX(1); }
.steps li h3 { margin: 0 0 .5rem; font-size: 1.05rem; letter-spacing: -.02em; }
.steps li p { color: var(--ink-2); font-size: .9rem; line-height: 1.62; }
.steps li a { color: var(--blue-300); }
@media (max-width: 520px) { .steps li { padding: 3.4rem 1.15rem 1.3rem; } }