/* B1G IPTV UK — custom site styles.
 *
 * The palette is taken from the design already embedded in the site's own
 * page content (the `.b1g` blocks), so the generated chrome and the
 * hand-built page sections read as one design rather than two.
 */

:root {
  --bg: #0a0a0f;
  --surface: #16161f;
  --surface-2: #1d1d28;
  --border: #2b2b38;
  --text: #f5f5f7;
  --text-dim: #a3a3b0;
  --red: #e63946;
  --red-dark: #b32530;
  --gold: #ffd60a;

  --content: 1180px;
  --narrow: 760px;
  --pad: clamp(1rem, 4vw, 2rem);
  --radius: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

img, video { max-width: 100%; height: auto; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: var(--pad); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: #000; padding: .75rem 1.25rem; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 10, 15, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.header-inner { display: flex; align-items: center; gap: 1rem; min-height: 68px; }

.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--text); font-size: 1.05rem; }
.brand:hover { text-decoration: none; }
.brand img { height: 38px; width: auto; }
.brand span { white-space: nowrap; }

.nav-toggle, .nav-toggle-label { display: none; }

.nav { margin-left: auto; }
.nav > ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.nav a {
  display: block; padding: .5rem .7rem; border-radius: 6px;
  color: var(--text-dim); font-size: .9rem; font-weight: 600;
  text-align: left;
}
.nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--gold); }

.nav a.active { color: var(--text); }

.nav .cta > a {
  background: var(--red); color: #fff; padding: .55rem 1rem;
}
.nav .cta > a:hover { background: var(--red-dark); color: #fff; }

/* Dropdown. Opened on hover and on :focus-within, so it is reachable by
   keyboard without any JavaScript. */
.nav .has-sub { position: relative; }
.nav .has-sub > a { display: flex; align-items: center; gap: .3rem; }
.nav .chev { transition: transform .18s ease; }
.nav .has-sub:hover > a .chev,
.nav .has-sub:focus-within > a .chev { transform: rotate(180deg); }

.nav .submenu {
  position: absolute; top: 100%; left: 0; z-index: 120;
  min-width: 264px; margin: 0; padding: .4rem;
  list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  display: flex; flex-direction: column; align-items: stretch; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav .has-sub:hover > .submenu,
.nav .has-sub:focus-within > .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
/* Keeps the pointer inside the item while crossing the gap to the panel. */
.nav .has-sub::after {
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px;
}
.nav .submenu a {
  padding: .6rem .75rem; border-radius: 6px; font-weight: 500;
  color: var(--text-dim); white-space: nowrap;
}
.nav .submenu a:hover { background: var(--surface-2); color: var(--text); }
.nav .submenu a[aria-current="page"] { color: var(--gold); background: var(--surface-2); }

@media (max-width: 1080px) {
  .nav-toggle-label {
    display: flex; align-items: center; justify-content: center;
    margin-left: auto; width: 44px; height: 44px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  }
  .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
    display: block; width: 20px; height: 2px; background: var(--text); position: relative;
  }
  .nav-toggle-label span::before { content: ""; position: absolute; top: -6px; }
  .nav-toggle-label span::after  { content: ""; position: absolute; top: 6px; }

  .nav {
    display: none; margin: 0;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--border);
    max-height: 75vh; overflow-y: auto;
  }
  .nav-toggle:checked ~ .nav { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding: .5rem var(--pad) 1rem; }
  .nav a { padding: .8rem .4rem; border-bottom: 1px solid var(--border); border-radius: 0; }
  .nav .cta > a { margin-top: .75rem; border-radius: 6px; text-align: center; border-bottom: 0; }

  /* No hover on touch, so the sub-items are simply listed under the parent. */
  .nav .has-sub::after { content: none; }
  .nav .has-sub > a .chev { display: none; }
  .nav .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    min-width: 0; margin: 0; padding: 0 0 0 .9rem;
    background: none; border: 0; border-left: 2px solid var(--border);
    border-radius: 0; box-shadow: none;
  }
  .nav .submenu a { padding: .7rem .4rem; font-size: .86rem; white-space: normal; }
}

/* ------------------------------------------------------------------ hero */

.hero { padding: clamp(3rem, 9vw, 6rem) 0 clamp(2rem, 6vw, 4rem); text-align: center; }
.hero h1 {
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.1; margin: 0 0 1rem;
  letter-spacing: -.02em; font-weight: 800;
}
.hero h1 .accent { color: var(--red); }
.hero p.lede { font-size: clamp(1.02rem, 2.4vw, 1.2rem); color: var(--text-dim); max-width: 62ch; margin: 0 auto 2rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }
.btn {
  display: inline-block; padding: .85rem 1.6rem; border-radius: 8px;
  font-weight: 700; font-size: .98rem; border: 1px solid transparent;
}
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); color: #fff; text-decoration: none; }
.btn-ghost { border-color: var(--border); color: var(--text); background: var(--surface); }
.btn-ghost:hover { border-color: var(--text-dim); color: var(--text); text-decoration: none; }

/* ----------------------------------------------------------------- cards */

.section { padding: clamp(2.5rem, 7vw, 4.5rem) 0; }
.section-head { margin-bottom: 2rem; }
.section-head h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 .4rem; letter-spacing: -.01em; }
.section-head p { color: var(--text-dim); margin: 0; }

.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.card {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--red); transform: translateY(-3px); }
.card-thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-body { padding: 1.1rem 1.15rem 1.35rem; display: flex; flex-direction: column; flex: 1; }
.card h3 { margin: 0 0 .5rem; font-size: 1.05rem; line-height: 1.35; }
.card h3 a { color: var(--text); }
.card h3 a:hover { color: var(--red); text-decoration: none; }
.card p { margin: 0 0 1rem; color: var(--text-dim); font-size: .92rem; flex: 1; }

.meta { font-size: .8rem; color: var(--text-dim); display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.tag {
  display: inline-block; padding: .2rem .55rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  color: var(--gold);
}
.tag:hover { text-decoration: none; border-color: var(--gold); }

/* --------------------------------------------------------------- article */

.article-header { padding: clamp(2rem, 6vw, 3.5rem) 0 1.5rem; }
.article-header .wrap { max-width: var(--narrow); }
.article-header h1 { font-size: clamp(1.75rem, 5vw, 2.7rem); line-height: 1.15; margin: .75rem 0 .9rem; letter-spacing: -.02em; }

.crumbs { font-size: .82rem; color: var(--text-dim); }
.crumbs a { color: var(--text-dim); }
.crumbs a:hover { color: var(--red); }

.feature-img { margin: 0 0 2rem; }
.feature-img img { width: 100%; border-radius: var(--radius); border: 1px solid var(--border); }

/* Pages that carry their own `.b1g` design run edge to edge: their sections
   are built to span the viewport and centre an inner wrap themselves, so any
   outer max-width here would just letterbox them. */
.page-bleed { width: 100%; }
.page-bleed > * { max-width: 100%; }

.crumb-bar {
  padding: 1rem 0 .25rem;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
}
.crumb-bar .wrap { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* Post/page body. The site's own embedded `.b1g` blocks load after this
   stylesheet, so their rules deliberately win where they overlap. */
.prose { max-width: var(--narrow); margin-inline: auto; }
.prose > * { margin-block: 0 1.15rem; }
.prose h2 { font-size: clamp(1.35rem, 3.6vw, 1.85rem); margin: 2.4rem 0 .9rem; line-height: 1.25; letter-spacing: -.01em; }
.prose h3 { font-size: clamp(1.12rem, 3vw, 1.35rem); margin: 1.9rem 0 .7rem; line-height: 1.3; }
.prose h4 { font-size: 1.05rem; margin: 1.5rem 0 .6rem; }
.prose h2, .prose h3, .prose h4 { scroll-margin-top: 90px; }
.prose p { color: #dcdce4; }
.prose strong { color: var(--text); font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.35rem; color: #dcdce4; }
.prose li { margin-bottom: .5rem; }
.prose li::marker { color: var(--red); }
.prose img { border-radius: var(--radius); border: 1px solid var(--border); display: block; margin-inline: auto; }
.prose figure { margin: 1.75rem 0; }
.prose figcaption { font-size: .84rem; color: var(--text-dim); text-align: center; margin-top: .6rem; }
.prose blockquote {
  margin: 1.75rem 0; padding: .85rem 1.25rem;
  border-left: 3px solid var(--red); background: var(--surface); border-radius: 0 8px 8px 0;
  color: var(--text-dim); font-style: italic;
}
.prose code {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px;
  padding: .12em .4em; font-size: .9em;
}
.prose pre { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem; overflow-x: auto; }
.prose pre code { background: none; border: 0; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

/* Tables scroll inside their own box rather than widening the page. */
.table-scroll { overflow-x: auto; margin: 1.75rem 0; border: 1px solid var(--border); border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.prose th, .prose td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--border); }
.prose thead th { background: var(--surface-2); color: var(--text); font-weight: 700; white-space: nowrap; }
.prose tbody tr:last-child td { border-bottom: 0; }

/* Kadence icon lists appear in a handful of posts; render them as plain lists. */
.prose .kt-svg-icon-list-items { list-style: none; padding-left: 0; }
.prose .kt-svg-icon-list-item-wrap { display: flex; gap: .6rem; align-items: flex-start; }
.prose .kb-svg-icon-wrap { color: var(--red); flex-shrink: 0; margin-top: .3rem; }

/* --------------------------------------------------------- contact block */

.contact-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(1.25rem, 4vw, 2rem); margin: 2rem 0;
}
.contact-card h2 { margin-top: 0; }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.contact-list a { font-weight: 600; }
.contact-list .label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }

/* ---------------------------------------------------------------- footer */

.site-footer { background: var(--surface); border-top: 1px solid var(--border); padding: 3rem 0 1.5rem; margin-top: 4rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.footer-grid h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 0 0 .9rem; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .55rem; }
.footer-grid a { color: var(--text-dim); font-size: .92rem; }
.footer-grid a:hover { color: var(--red); }
.footer-about p { color: var(--text-dim); font-size: .92rem; margin: 0 0 1rem; }
.footer-bottom {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between;
  font-size: .84rem; color: var(--text-dim);
}

/* -------------------------------------------------------------- 404/misc */

.center-page { text-align: center; padding: clamp(4rem, 14vh, 8rem) 0; }
.center-page h1 { font-size: clamp(2.5rem, 9vw, 4.5rem); margin: 0 0 .5rem; color: var(--red); }
.center-page p { color: var(--text-dim); max-width: 46ch; margin: 0 auto 2rem; }

.pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 2.5rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: .55rem .95rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-dim); font-size: .9rem; font-weight: 600;
}
.pagination a:hover { border-color: var(--red); color: var(--text); text-decoration: none; }
.pagination .current { background: var(--red); border-color: var(--red); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------- promo popup
   Rebuilt from the WordPress Custom HTML widget. Tokens are the site's own, so
   it cannot drift from the rest of the design the way the widget's hard-coded
   colours did. `hidden` keeps it out of the page until the script opens it, so
   with JavaScript off it never appears rather than sitting on top of the site. */
.promo[hidden] { display: none; }
.promo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(4, 4, 8, .72);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  overflow-y: auto;
}
.promo-box {
  width: 100%;
  max-width: 400px;
  background: var(--surface, #16161f);
  border: 1px solid var(--border, #2b2b38);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
  animation: promo-in .22s ease-out both;
}
@keyframes promo-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .promo-box { animation: none; } }

.promo-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.promo-close:hover { background: rgba(255, 255, 255, .2); }
.promo-close:focus-visible { outline: 2px solid var(--red, #e63946); outline-offset: 2px; }

.promo-head {
  text-align: center;
  padding: 1.5rem 1.25rem 1.1rem;
  background: linear-gradient(160deg, rgba(230, 57, 70, .22), rgba(230, 57, 70, 0));
  border-bottom: 1px solid var(--border, #2b2b38);
}
.promo-badge {
  display: inline-block;
  background: var(--red, #e63946);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
}
.promo-logo { display: block; margin: .9rem auto .6rem; border-radius: 12px; }
.promo-sub { margin: 0; font-size: 13px; color: var(--text-dim, #a3a3b0); }

.promo-body { padding: 1.25rem; text-align: center; }
.promo-kicker { margin: 0; font-size: 13px; color: var(--text-dim, #a3a3b0); }
.promo-price { margin: .1rem 0 .9rem; }
.promo-amount { font-size: 44px; font-weight: 800; color: var(--text, #f5f5f7); line-height: 1; }
.promo-per { font-size: 15px; color: var(--text-dim, #a3a3b0); font-weight: 700; }

.promo-feats {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  justify-content: center;
  font-size: 12.5px;
  color: var(--text-dim, #a3a3b0);
}
.promo-feats li::before { content: "\2713"; color: var(--gold, #ffd60a); font-weight: 800; margin-right: .35rem; }

.promo-timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .65rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border, #2b2b38);
  border-radius: 10px;
  background: var(--surface2, #1d1d28);
  color: var(--red, #e63946);
}
.promo-timer-label { font-size: 12px; color: var(--text-dim, #a3a3b0); text-transform: uppercase; letter-spacing: .05em; }
.promo-clock { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

.promo-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  padding: .85rem 1rem;
  border-radius: 10px;
  background: #25d366;
  color: #06301a;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
}
.promo-cta:hover { background: #1fb457; color: #06301a; text-decoration: none; }
.promo-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.promo-note { margin: .7rem 0 0; font-size: 12px; color: var(--text-dim, #a3a3b0); }

@media (max-width: 400px) {
  .promo-amount { font-size: 38px; }
  .promo-box { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════ core page template
   The ten core pages are generated from structured copy rather than from
   WordPress markup, so their styling lives here instead of being repeated
   inline on every page. Tokens are the site's own, so these pages sit in the
   same visual family as the articles. */

.core { display: block; }

/* ── hero ── */
.ce-hero {
  padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.25rem, 5vw, 3.5rem);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(10, 10, 15, .55), rgba(10, 10, 15, .95)),
    url('/media/2025/11/B1G-Intro-Backgroud.jpg') center / cover no-repeat;
  border-bottom: 1px solid var(--border);
}
.ce-hero h1 {
  margin: 0 auto .9rem;
  max-width: 20ch;
  font-size: clamp(1.8rem, 4.4vw, 2.9rem);
  line-height: 1.15;
}
.ce-lead {
  margin: 0 auto;
  max-width: 62ch;
  color: #e4e4ea;
  font-size: clamp(1rem, 1.6vw, 1.1rem);
}
.ce-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 1.75rem;
}

/* ── direct answer: the paragraph most likely to be quoted ── */
.ce-answer {
  position: relative;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  max-width: 74ch;
  padding: 1.4rem 1.5rem 1.5rem;
  background: linear-gradient(180deg, rgba(230, 57, 70, .1), rgba(230, 57, 70, .03));
  border: 1px solid rgba(230, 57, 70, .35);
  border-left: 4px solid var(--red);
  border-radius: 12px;
}
.ce-answer-label {
  margin: 0 0 .45rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.ce-answer-text {
  margin: 0;
  font-size: clamp(1.02rem, 1.7vw, 1.16rem);
  line-height: 1.6;
  color: var(--text);
}

/* ── body ── */
.ce-body { padding: clamp(2rem, 4vw, 3rem) 0 1rem; max-width: 820px; }
.ce-body h2 {
  margin: 2.4rem 0 .8rem;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.25;
}
.ce-body h2:first-child { margin-top: 0; }
.ce-body p { margin: 0 0 1rem; color: var(--text-dim); }
.ce-eyebrow {
  margin: 2.4rem 0 .35rem;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--red);
}
.ce-eyebrow + h2 { margin-top: 0; }
.ce-method {
  margin: 1.8rem 0 .6rem;
  font-size: 1.05rem;
  color: var(--text);
}

/* numbered procedure */
.ce-steps { counter-reset: ce-step; list-style: none; margin: 0 0 1.5rem; padding: 0; }
.ce-steps li {
  counter-increment: ce-step;
  position: relative;
  padding: .7rem 0 .7rem 2.9rem;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
.ce-steps li:last-child { border-bottom: 0; }
.ce-steps li::before {
  content: counter(ce-step);
  position: absolute;
  left: 0;
  top: .55rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: .78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* feature / benefit grid */
.ce-features {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .6rem;
}
.ce-features li {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem .9rem .7rem 2.2rem;
  position: relative;
  font-size: .93rem;
  color: var(--text-dim);
}
.ce-features li::before {
  content: "\2713";
  position: absolute;
  left: .85rem;
  color: var(--gold);
  font-weight: 800;
}

/* ── pricing ── */
.ce-pricing { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--surface); border-block: 1px solid var(--border); }
.ce-pricing h2 { text-align: center; margin: 0 0 .6rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.ce-section-lead { text-align: center; color: var(--text-dim); max-width: 60ch; margin: 0 auto 1.9rem; }
.ce-pricing .ce-eyebrow { text-align: center; margin-top: 0; }
.ce-price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.ce-price-table th, .ce-price-table td {
  padding: 1rem .85rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.ce-price-table thead th {
  background: var(--red);
  color: #fff;
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ce-price-table thead th:first-child { text-align: left; }
.ce-price-table tbody th {
  text-align: left;
  color: var(--text-dim);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ce-price-table tbody tr:last-child th,
.ce-price-table tbody tr:last-child td { border-bottom: 0; }
.ce-price-table tr.is-best { background: rgba(230, 57, 70, .09); }
.ce-best {
  display: inline-block;
  margin-left: .4rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  background: var(--gold);
  color: #241d00;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .04em;
  vertical-align: middle;
}
.ce-price { display: block; font-size: 1.3rem; font-weight: 800; margin-bottom: .45rem; color: var(--text); }
.ce-buy {
  display: inline-block;
  padding: .3rem .95rem;
  border: 1px solid var(--red);
  border-radius: 999px;
  color: var(--red);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.ce-buy:hover { background: var(--red); color: #fff; text-decoration: none; }
.ce-price-notes {
  list-style: none;
  padding: 0;
  margin: 1.7rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.4rem;
  justify-content: center;
  color: var(--text-dim);
  font-size: .85rem;
}
.ce-price-notes li::before { content: "\2713"; color: var(--gold); font-weight: 800; margin-right: .4rem; }

/* ── in practice ── */
.ce-practice {
  max-width: 820px;
  margin: clamp(2rem, 4vw, 3rem) auto 0;
  padding: 1.4rem 1.5rem;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.ce-practice h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.ce-practice p { margin: 0; color: var(--text-dim); }

/* ── FAQ ── */
.ce-faq-wrap { padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.5rem, 3vw, 2.5rem); }
.ce-faq-wrap h2 { text-align: center; margin: 0 0 1.8rem; font-size: clamp(1.5rem, 3vw, 2.1rem); }
.ce-faq-wrap .ce-eyebrow { text-align: center; margin-top: 0; }
.ce-faq { max-width: 800px; margin: 0 auto; }
.ce-faq details {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: .7rem;
  overflow: hidden;
}
.ce-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 1rem 1.2rem;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.ce-faq summary::-webkit-details-marker { display: none; }
.ce-faq summary::after { content: "+"; color: var(--red); font-size: 1.3rem; font-weight: 800; line-height: 1; }
.ce-faq details[open] summary::after { content: "\2212"; }
.ce-faq summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.ce-faq-a { padding: 0 1.2rem 1.1rem; color: var(--text-dim); }

/* ── foot: next step + help ── */
.ce-foot { padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); background: var(--surface); border-top: 1px solid var(--border); }
.ce-foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.ce-related, .ce-help {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
}
.ce-foot h2 { margin: 0 0 .7rem; font-size: 1.1rem; }
.ce-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ce-related a { font-weight: 600; }
.ce-help p { margin: 0 0 .9rem; color: var(--text-dim); font-size: .93rem; }
.ce-contact { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ce-contact li { display: flex; gap: .75rem; align-items: baseline; }
.ce-contact span {
  min-width: 5.5rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
}
@media (max-width: 720px) {
  .ce-foot-grid { grid-template-columns: 1fr; }
}

/* ── stat strip ── */
.ce-stats {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .75rem;
  text-align: center;
}
.ce-stats li {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem .75rem;
}
.ce-stats strong { display: block; font-size: 1.45rem; color: var(--gold); line-height: 1.1; }
.ce-stats span { display: block; margin-top: .3rem; font-size: .82rem; color: var(--text-dim); }

/* ── content cards ── */
.ce-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin: 0 0 1.75rem;
}
.ce-cards article {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.25rem 1.3rem;
}
.ce-cards h3 { margin: 0 0 .45rem; font-size: 1.02rem; color: var(--red); }
.ce-cards p { margin: 0; color: var(--text-dim); font-size: .93rem; }
.ce-badge {
  display: inline-block;
  margin-top: .75rem !important;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: rgba(255, 214, 10, .12);
  border: 1px solid var(--gold);
  color: var(--gold) !important;
  font-weight: 800;
  font-size: .82rem !important;
}