/* =========================
   VIPN THEME FOUNDATION
   Load this LAST
   ========================= */

/* Theme tokens */
:root{
  --bg: #f6f8fb;
  --surface: #ffffff;
  --surface-2: #f1f5fb;
  --surface2: rgba(15,23,42,.06);
  --text: #0f172a;
  --muted: rgba(15,23,42,.7);
  --border: rgba(15,23,42,.10);
  --shadow: 0 10px 30px rgba(2,8,23,.10);

  --brand: #0b3a6a;     /* your deep blue */
  --brand-2: #062a4c;
  --accent: #f5c400;    /* your gold */
  --link: #0b3a6a;
}

html[data-bs-theme="dark"]{
  --bg: #07111f;
  --surface: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.035);
  --surface2: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.68);
  --border: rgba(255,255,255,.10);
  --shadow: 0 18px 50px rgba(0,0,0,.45);

  --link: rgba(255,255,255,.92);
}

/* Page base */
body{
  background: var(--bg) !important;
  color: var(--text) !important;
  font-family: "Nunito Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

html, body {
  transition: background .25s ease, color .25s ease;
}


a{ color: inherit; }

/* Helpers used throughout templates */
.vipn-on-surface{ color: var(--text) !important; }
.vipn-muted{ color: var(--muted) !important; }
.vipn-mutedlink{
  color: var(--muted) !important;
  text-decoration: none;
}
.vipn-mutedlink:hover{
  color: var(--text) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vipn-titlelink{
  color: var(--text) !important;
  text-decoration: none;
}
.vipn-titlelink:hover{ text-decoration: underline; text-underline-offset: 3px; }

.vipn-surface{
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.vipn-block{ padding: 0; } /* section wrapper */

/* Navbar: glass + border that adapts to theme */
.vipn-navbar{
  /* Glass background (uses your --surface token) */
  background: color-mix(in srgb, var(--surface) 88%, transparent);

  /* Glass blur */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Subtle divider */
  border-bottom: 1px solid var(--border);
}

/* Dark mode: slightly brighter border */
[data-theme="dark"] .vipn-navbar{
  border-bottom-color: rgba(255,255,255,.08);
}

/* Optional fallback if color-mix isn't supported */
@supports not (background: color-mix(in srgb, #000 50%, transparent)){
  .vipn-navbar{
    background: rgba(255,255,255,.85);
  }
  [data-theme="dark"] .vipn-navbar{
    background: rgba(10,15,25,.78);
  }
}

.vipn-logo{
  width: 28px; height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-weight: 900;
  color: var(--text);
}
.vipn-brand-text{
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
}

/* Nav links */
.vipn-link{
  color: var(--muted) !important;
  border-radius: 999px;
  padding: .45rem .75rem !important;
  transition: background .15s ease, color .15s ease;
}

/* Hover */
.vipn-link:hover{
  background: var(--surface2);
  color: var(--text) !important;
}

/* Active */
.vipn-link.active,
.navbar-nav .nav-link.active{
  background: var(--surface2);
  color: var(--text) !important;
  font-weight: 800;
}

/* Dark mode: active can be slightly brighter if you want extra contrast */
[data-bs-theme="dark"] .vipn-link.active,
[data-bs-theme="dark"] .navbar-nav .nav-link.active{
  background: color-mix(in srgb, var(--surface2) 80%, white);
}

.vipn-cta{
  background: var(--accent);
  color: #111 !important;
  border: 0;
  border-radius: 999px;
  padding: .45rem .8rem;
  font-weight: 700;
}
.vipn-cta:hover{ filter: brightness(.95); }
html[data-bs-theme="dark"] .vipn-cta{ box-shadow: 0 10px 25px rgba(0,0,0,.35); }

[data-bs-theme="dark"] .vipn-cta:hover {
  box-shadow: 0 0 12px rgba(245,196,0,.25);
}

.vipn-icon-btn{
  border-radius: 999px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface2) !important;
  color: var(--text) !important;
  width: 40px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* --- Fix: theme toggle icon looks cut off / not centered --- 
.vipn-icon-btn{
  width: 36px;
  height: 36px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  line-height: 1;
}
.vipn-icon-btn svg{
  display: block;
}*/


/* Theme toggle: prevent icon clipping */
.vipn-icon-btn,
button.vipn-icon-btn {
  width: 38px;              /* or 36px */
  height: 38px;
  padding: 0;               /* important */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;           /* important */
  border-radius: 999px;
  overflow: visible;        /* important (if any parent clips) */
}

/* If your button has a border ring/shadow, keep it */
.vipn-icon-btn svg,
#themeToggle svg {
  width: 18px;
  height: 18px;
  display: block;           /* important */
}

/* Make the hamburger visible in dark mode */
html[data-bs-theme="dark"] .navbar-toggler{ border-color: var(--border) !important; }
html[data-bs-theme="dark"] .navbar-toggler-icon{ filter: invert(1) grayscale(1) brightness(2); }

/* Hero */
.vipn-hero{ overflow: hidden; }
.vipn-hero__lead{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  border-radius: 16px 0 0 16px;
}
.vipn-hero__img{ object-fit: cover; }
.vipn-hero__side{
  background: linear-gradient(180deg, color-mix(in oklab, var(--surface), var(--brand) 12%), var(--surface));
}
.vipn-section-title{
  color: var(--muted);
  letter-spacing: .08em;
}

/* Badges */
.vipn-badge{
  display: inline-flex;
  align-items: center;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: color-mix(in oklab, var(--yellow), var(--surface) 70%);
  color: #0b1b36;
  border: 1px solid color-mix(in oklab, var(--yellow), transparent 55%);
}

/* Cards */
.vipn-cardnews{
  transition: transform .12s ease, box-shadow .12s ease;
}
.vipn-cardnews:hover{
  transform: translateY(-2px);
}

/* Widgets (sidebar) */
.vipn-widget{ background: var(--surface); border: 1px solid var(--border); }

.vipn-widget{
  padding: 16px;
}
.vipn-widget__title{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 10px;
}

/* Trending list */
.vipn-trending__item{
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.vipn-trending__item:last-child{ border-bottom: 0; }

/* Inputs 
.vipn-input{
  width: 100%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: .55rem .7rem;
  outline: none;
}
.vipn-input::placeholder{ color: color-mix(in oklab, var(--muted), transparent 25%); }
.vipn-input:focus{
  border-color: color-mix(in oklab, var(--yellow), var(--border) 40%);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--yellow), transparent 80%);
}
.vipn-input--sm{ padding: .45rem .65rem; border-radius: 12px; }

.vipn-btn-cta{
  background: var(--yellow) !important;
  color: #0b1b36 !important;
  border: 0 !important;
}
.vipn-btn-cta:hover{ filter: brightness(.96); }*/

/* Inputs (dark mode) */
[data-theme="dark"] .vipn-input{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}
[data-theme="dark"] .vipn-input::placeholder{
  color: rgba(255,255,255,.50);
}
[data-theme="dark"] .vipn-input:focus{
  outline: none;
  box-shadow: 0 0 0 .2rem rgba(255, 193, 7, .18);
  border-color: rgba(255, 193, 7, .45);
}

/* Slightly brighter muted copy */
[data-theme="dark"] .vipn-muted{
  color: rgba(255,255,255,.72);
}

/* Softer borders on cards/widgets */
[data-theme="dark"] .vipn-surface{
  border: 1px solid rgba(255,255,255,.08);
}


/* Safety: keep Bootstrap stretched-link overlays contained */
.vipn-cardnews,
.vipn-cardnews--compact{
  position: relative;
}

/* Revive ad slot */
.ad-slot-inner{
  background: var(--surface2);
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 10px;
  box-shadow: none;
}

/* Footer */
.vipn-footer{
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}

/* =========================================
   VIPN FIX PACK (light+dark polish)
   Put this at the BOTTOM of vipn-theme.css
   ========================================= */

/* --- Theme tokens for UI elements that were inconsistent --- */
:root[data-theme="light"]{
  --badge-bg: rgba(15, 23, 42, .06);
  --badge-border: rgba(15, 23, 42, .12);
  --badge-text: rgba(15, 23, 42, .92);

  --input-bg: #ffffff;
  --input-border: rgba(15, 23, 42, .14);
  --input-placeholder: rgba(15, 23, 42, .45);

  --ad-bg: rgba(15, 23, 42, .03);
}

:root[data-theme="dark"]{
  --badge-bg: rgba(255, 255, 255, .10);
  --badge-border: rgba(255, 255, 255, .14);
  --badge-text: rgba(255, 255, 255, .92);

  --input-bg: rgba(255, 255, 255, .06);
  --input-border: rgba(255, 255, 255, .16);
  --input-placeholder: rgba(255, 255, 255, .55);

  --ad-bg: rgba(255, 255, 255, .04);
}

/* --- Fix: “whole top becomes one big link” (stretched-link needs a positioned parent) --- */
.vipn-cardnews,
.vipn-cardnews--compact,
.vipn-widget,
.vipn-hero,
.vipn-hero__lead{
  position: relative;
}

/* --- Navbar: keep ONE definition (your duplicates were fighting each other) --- */
.vipn-navbar{
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

/* --- Nav links: remove duplicate conflicting versions and make active consistent --- */
.vipn-link{
  color: var(--muted) !important;
  border-radius: 999px;
  padding: .45rem .75rem !important;
  transition: background .15s ease, color .15s ease;
}
.vipn-link:hover{
  background: var(--surface2);
  color: var(--text) !important;
}
.vipn-link.active{
  background: var(--surface2);
  color: var(--text) !important;
  font-weight: 800;
}

/* --- Fix: pills/badges disappear in dark mode --- */
.vipn-badge{
  display: inline-flex;
  align-items: center;
  padding: .25rem .55rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;

  background: var(--badge-bg);
  border: 1px solid var(--badge-border);
  color: var(--badge-text);
}

/* --- Fix: newsletter input looks wrong in light mode + must span full width --- */
.vipn-input{
  width: 100%;
  display: block;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text);
  border-radius: 12px;
  padding: .55rem .75rem;
  outline: none;
}
.vipn-input--sm{
  border-radius: 10px;
  padding: .45rem .65rem;
  font-size: .92rem;
}
.vipn-input::placeholder{
  color: var(--input-placeholder);
}
.vipn-input:focus{
  border-color: color-mix(in srgb, var(--text) 22%, transparent);
  box-shadow: 0 0 0 .20rem color-mix(in srgb, var(--text) 12%, transparent);
}

/* --- Fix: ad area border/padding looks wrong (esp. light mode) --- */
.ad-slot{
  width: 100%;
}
.ad-slot-inner{
  background: var(--ad-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .5rem;
  overflow: hidden;
  box-shadow: none !important;
}
.ad-slot-inner iframe,
.ad-slot-inner img{
  border: 0 !important;
  display: block;
  width: 100%;
  height: auto;
}

/* Article hero: subtle VIPN gradient while still using vipn-surface */
.vipn-article-hero{
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--brand) 14%, var(--surface)),
    var(--surface)
  );
}

/* Share buttons match theme (light + dark) */
.vipn-share-btn{
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.vipn-share-btn:hover{
  filter: brightness(.98);
}

/* Article text spacing */
.article-content p{
  margin-bottom: 1rem;
}
.article-content a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Related list polish */
.vipn-listgroup .list-group-item{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border) !important;
}
.vipn-listgroup .list-group-item:last-child{
  border-bottom: 0 !important;
}
.vipn-related-link:hover{
  background: color-mix(in srgb, var(--surface2) 55%, transparent) !important;
  border-radius: 12px;
  padding-left: .5rem !important;
  padding-right: .5rem !important;
}

/* =========================
   CRUISE SCHEDULE (CC*) - tokenized for VIPN
   ========================= */

.vipn-cruise .cc-hero{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.vipn-cruise .cc-title{
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}

.vipn-cruise .cc-muted{ color: var(--muted); }
.vipn-cruise .cc-label{ color: var(--muted); }

.vipn-cruise .cc-filters{
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  border: 1px solid var(--border);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Make selects fit theme without hard-coding light/dark */
.vipn-cruise .cc-select{
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-bs-theme="dark"] .vipn-cruise .cc-select{
  background-color: rgba(255,255,255,.06);
}

/* Day header */
.vipn-cruise .cc-day{ margin-top: 18px; }
.vipn-cruise .cc-day-hd{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 12px;
  margin: 16px 0 10px;
}
.vipn-cruise .cc-day-title{ font-weight: 800; color: var(--text); }
.vipn-cruise .cc-day-sub{ color: var(--muted); font-size: .9rem; }

/* Badge styles (uses your VIPN badge variables if present) */
.vipn-cruise .cc-badge{
  display:inline-flex;
  align-items:center;
  gap: .45rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  background: var(--badge-bg, rgba(15,23,42,.06));
  border: 1px solid var(--badge-border, rgba(15,23,42,.12));
  color: var(--badge-text, rgba(15,23,42,.92));
}
.vipn-cruise .cc-badge.today{
  background: color-mix(in srgb, var(--accent) 24%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--text);
}
.vipn-cruise .cc-badge.tomorrow{
  background: color-mix(in srgb, var(--brand) 20%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 28%, var(--border));
  color: var(--text);
}

/* Rows */
.vipn-cruise .cc-row{
  display:grid;
  grid-template-columns: 140px 1fr 170px;
  gap: 14px;
  align-items:center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: none;
  margin-bottom: 10px;
}

.vipn-cruise .cc-time{
  font-weight: 800;
  color: var(--text);
}
.vipn-cruise .cc-time small{
  display:block;
  font-weight: 600;
  color: var(--muted);
  margin-top: 2px;
}

.vipn-cruise .cc-ship .name{
  font-weight: 800;
  color: var(--text);
}
.vipn-cruise .cc-ship .meta{
  color: var(--muted);
  margin-top: 2px;
  font-size: .95rem;
}

.vipn-cruise .cc-pier{
  text-align:right;
  color: var(--text);
  font-weight: 700;
}
.vipn-cruise .cc-pier .sub{
  display:block;
  color: var(--muted);
  font-weight: 600;
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 992px){
  .vipn-cruise .cc-row{
    grid-template-columns: 1fr;
    text-align:left;
  }
  .vipn-cruise .cc-pier{ text-align:left; }
}

/* =========================
   CRUISE SCHEDULE (VIPN)
   Token-based: inherits vipn-theme.css
   ========================= */

.cc-hero{
  border-radius: 18px;
  padding: 22px;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

html[data-bs-theme="dark"] .cc-hero{
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Hero badge */
.cc-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text);
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  border: 1px solid var(--border);
}

.cc-badge.today{
  background: color-mix(in srgb, var(--accent) 28%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

html[data-bs-theme="dark"] .cc-badge.today{
  background: rgba(255, 193, 7, .16);
  border-color: rgba(255, 193, 7, .28);
}

.cc-badge.tomorrow{
  background: color-mix(in srgb, var(--surface) 70%, var(--surface2));
}

.cc-muted{
  color: var(--muted);
  font-size: .95rem;
}

/* Filters card */
.cc-filters{
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow);
}

html[data-bs-theme="dark"] .cc-filters{
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Make labels theme-safe even if template uses text-white-50 */
.cc-filters .form-label{
  color: var(--muted) !important;
}

/* Form controls */
.cc-filters .form-select,
.cc-filters .form-control{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

html[data-bs-theme="dark"] .cc-filters .form-select,
html[data-bs-theme="dark"] .cc-filters .form-control{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.14);
}

.cc-filters .btn-primary{
  border-radius: 12px;
  border: 0;
  background: var(--accent);
  color: #111;
  font-weight: 800;
}

.cc-filters .btn-primary:hover{
  filter: brightness(.96);
}

/* Day group */
.cc-day{
  margin-top: 18px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

html[data-bs-theme="dark"] .cc-day{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

.cc-day-hd{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--surface) 85%, var(--bg));
  border-bottom: 1px solid var(--border);
}

html[data-bs-theme="dark"] .cc-day-hd{
  background: rgba(255,255,255,.03);
  border-bottom-color: rgba(255,255,255,.08);
}

.cc-day-title{
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--text);
}

.cc-day-sub{
  color: var(--muted);
  font-size: .9rem;
}

/* Rows */
.cc-row{
  display: grid;
  grid-template-columns: 110px 1fr 200px;
  gap: 14px;
  padding: 14px 16px;
  align-items: center;
}

.cc-row + .cc-row{
  border-top: 1px solid var(--border);
}

html[data-bs-theme="dark"] .cc-row + .cc-row{
  border-top-color: rgba(255,255,255,.08);
}

.cc-row:hover{
  background: color-mix(in srgb, var(--surface2) 60%, transparent);
}

/* Time column */
.cc-time{
  font-weight: 900;
  letter-spacing: .01em;
  color: var(--text);
}

.cc-time small{
  display: block;
  margin-top: 3px;
  font-weight: 700;
  color: var(--muted);
}

/* Ship column */
.cc-ship .name{
  font-weight: 900;
  color: var(--text);
  line-height: 1.15;
}

.cc-ship .meta{
  margin-top: 4px;
  color: var(--muted);
  font-size: .92rem;
}

/* Pier column */
.cc-pier{
  text-align: right;
  font-weight: 800;
  color: var(--text);
}

.cc-pier .sub{
  display: block;
  margin-top: 4px;
  font-weight: 700;
  color: var(--muted);
  font-size: .9rem;
}

/* Responsive */
@media (max-width: 992px){
  .cc-row{
    grid-template-columns: 110px 1fr;
    grid-template-areas:
      "time ship"
      "pier pier";
  }
  .cc-time{ grid-area: time; }
  .cc-ship{ grid-area: ship; }
  .cc-pier{
    grid-area: pier;
    text-align: left;
    padding-top: 6px;
  }
}

/* Bigger hero title */
.cc-title{
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.05;
  font-size: clamp(1.8rem, 2.2vw + 1.2rem, 3.0rem);
  margin: .6rem 0 .35rem;
}

/* Give each call its own card + spacing */
.cc-day{
  padding: 10px;                 /* space inside the day group */
}

.cc-row{
  margin: 10px 8px;              /* space BETWEEN calls */
  border-radius: 16px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 10px 26px rgba(2,8,23,.08);
}

html[data-bs-theme="dark"] .cc-row{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 46px rgba(0,0,0,.32);
}

/* Remove the “table row divider” behavior since we’re using card spacing now */
.cc-row + .cc-row{
  border-top: 0 !important;
}

/* =========================
   VIPN Advertise Page
   ========================= */

.vipn-ad-page .vipn-ad-hero {
  margin-bottom: 16px;
}

.vipn-ad-hero__inner {
  padding: 22px;
}

@media (min-width: 992px) {
  .vipn-ad-hero__inner { padding: 30px; }
}

.vipn-ad-hero__title {
  margin: 10px 0 6px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
}

.vipn-ad-hero__sub {
  max-width: 70ch;
}

/* Cards grids for this page (uses VIPN cards, just defines columns) */
.vipn-ad-cards3,
.vipn-ad-cards2 {
  display: grid;
  gap: 12px;
}

@media (min-width: 720px) {
  .vipn-ad-cards2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 992px) {
  .vipn-ad-cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vipn-ad-cards2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tier cards */
.vipn-ad-tier__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.vipn-ad-tier__name {
  font-weight: 700;
  font-size: 16px;
}

.vipn-ad-tier__k {
  margin-top: 12px;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.vipn-ad-tier__list {
  margin: 0 0 8px;
  padding-left: 18px;
}

.vipn-ad-tier__desc { margin: 0 0 8px; }

.vipn-ad-tier__note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--vipn-border, rgba(255,255,255,.08));
}

.vipn-ad-tier__callout {
  margin-top: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--vipn-border, rgba(255,255,255,.10));
  background: var(--vipn-soft, rgba(255,255,255,.04));
}

.vipn-ad-tier__calloutTitle {
  font-weight: 700;
  margin-bottom: 2px;
}

/* Comparison “table” */
.vipn-ad-compare {
  padding: 12px;
}

.vipn-ad-compare__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px;
  border-top: 1px solid var(--vipn-border, rgba(255,255,255,.08));
}

.vipn-ad-compare__row:first-child {
  border-top: 0;
}

.vipn-ad-compare__head {
  font-weight: 700;
  border-radius: 14px;
  background: var(--vipn-soft, rgba(255,255,255,.04));
  border: 1px solid var(--vipn-border, rgba(255,255,255,.10));
}

@media (max-width: 720px) {
  .vipn-ad-compare__row {
    grid-template-columns: 1fr;
  }
  .vipn-ad-compare__head { display: none; }
}

/* Add-ons */
.vipn-ad-addon__title {
  font-weight: 700;
  margin-bottom: 8px;
}

.vipn-ad-addon__list,
.vipn-ad-samples {
  margin: 0;
  padding-left: 18px;
}

/* Steps block */
.vipn-ad-steps { padding: 14px; }

.vipn-ad-steps__list {
  margin: 0 0 12px;
  padding-left: 18px;
}

.vipn-ad-steps__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  border-top: 1px solid var(--vipn-border, rgba(255,255,255,.08));
  padding-top: 12px;
}

.vipn-ad-steps__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.vipn-ad-contact__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--vipn-border, rgba(255,255,255,.08));
}

.vipn-ad-contact__row:first-child { border-top: 0; }