/* V2 Builder Theme — pixel-perfect modules */

:root {
  --v2-bg: #ffffff;
  --v2-bg-rgb: 255,255,255;
  --v2-bg-card: #f7f7f8;
  --v2-text: #0a0a0a;
  --v2-text-rgb: 10,10,10;
  --v2-muted: rgba(10,10,10,0.55);
  --v2-border: rgba(0,0,0,0.10);
  --v2-accent: var(--ghost-accent-color, #64748b);
  --v2-accent-rgb: 100,116,139;
  --v2-display: 'Inter', system-ui, sans-serif;
  --v2-body: 'Inter', system-ui, sans-serif;
  --v2-radius: 4px;
  --v2-btn-radius: 0px;
  --v2-btn-bg: var(--ghost-accent-color, #64748b);
  --v2-btn-color: #ffffff;
  --v2-btn-border: none;
  --v2-image-radius: 0px;
  --v2-spacing-scale: 1;
  --v2-content-max-width: 1280px;
  --v2-gutter: clamp(16px, 4vw, 40px);
  --v2-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.08);
  --v2-canvas-color: #ececef;
  --v2-canvas-inset: 32px;
  --v2-canvas-radius: 12px;
  --v2-canvas-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06);
  --v2-img-overlay-color: #6366f1;
  --v2-img-overlay-opacity: 0.30;
  --v2-img-overlay-blend: multiply;
  --v2-tag-radius: 999px;
  font-size: 18px;
  --v2-header-h: 68px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Anchor-link scroll behavior. Two pieces working together:
   1. scroll-padding-top tells the browser to offset the scroll target by the
      sticky header height, so clicking /#features lands the section BELOW
      the header rather than behind it.
   2. scroll-behavior:smooth animates the scroll instead of jump-snapping.
      Wrapped in a prefers-reduced-motion guard so users who disable motion
      get an instant jump (accessibility — smooth scroll can be nauseating).
      IMPORTANT: no backtick characters in this comment — the entire CSS
      string is a JS template literal delimited by backticks. */
html {
  scroll-padding-top: var(--v2-header-h, 68px);
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--v2-body);
  color: var(--v2-text);
  background: var(--v2-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* Full-bleed sections (.kg-width-full) use width:100vw, which includes the
     scrollbar width and can produce a 1-15px sliver of horizontal scroll.
     Clip it here. clip (NOT hidden) does not create a scroll container, so
     position:sticky headers keep working. */
  overflow-x: clip;
}
img { max-width: 100%; display: block; }

/* Shape & spacing base classes — modules opt into these for buttons/cards so
   the global Shape & spacing settings (radius, button shape, density,
   container width) flow through without each module repeating its own rules.
   — .v2-btn         primary CTA, uses --v2-btn-* triple (bg/color/border/radius)
   — .v2-btn--ghost  secondary CTA, transparent w/ text-color border
   — .v2-card        any elevated/bordered card surface
   — .v2-container   page-width wrapper, respects --v2-content-max-width */
.v2-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; font-weight: 600; font-size: 0.95rem;
  background: var(--v2-btn-bg, var(--v2-accent));
  color: var(--v2-btn-color, #fff);
  border: var(--v2-btn-border, none);
  border-radius: var(--v2-btn-radius, 8px);
  text-decoration: none; cursor: pointer; line-height: 1;
  transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
}
.v2-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.v2-btn--ghost {
  background: transparent; color: var(--v2-text);
  border: 1px solid var(--v2-border);
}
.v2-card {
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 12px);
}
.v2-container {
  max-width: var(--v2-content-max-width, 1080px);
  margin: 0 auto; padding-left: 24px; padding-right: 24px;
}

/* ── Per-section spacing ──────────────────────────────────────────────────────
   Every module on the page is wrapped in a .v2-section div (see renderModule
   in theme-zip.ts), carrying a .v2-section--<spacing> class from the
   per-instance ModuleInstance.spacing field.

   The rules target the wrapper's CHILD -- the module's own outer element --
   and override its padding-block outright, rather than padding the wrapper.
   This is the difference between being able to REDUCE a section's height and
   only ever being able to grow it: modules ship with their own vertical
   padding (.v2-pricing { padding: 96px 40px }), so wrapper padding could never
   bring a section below that floor. That's why 'flush' used to leave a large
   gap despite its name.

   'auto' is the default and emits NO rule, so a module's designed padding
   stands untouched. That matters for heroes, which size themselves with
   min-height and centring rather than padding -- forcing a padding value on
   them would fight their layout. */
.v2-section { padding-block: 0; }
.v2-section--flush    > * { padding-block: 0 !important; }
.v2-section--tight    > * { padding-block: 32px !important; }
.v2-section--normal   > * { padding-block: 64px !important; }
.v2-section--relaxed  > * { padding-block: 96px !important; }
.v2-section--spacious > * { padding-block: 140px !important; }
/* Legacy values from canvases saved before the scale was reworked. */
.v2-section--compact     > * { padding-block: 32px !important; }
.v2-section--comfortable > * { padding-block: 64px !important; }
@media (max-width: 768px) {
  .v2-section--relaxed  > * { padding-block: 64px !important; }
  .v2-section--spacious > * { padding-block: 88px !important; }
}
/* Section gap (margin between sections) */
.v2-section--gap-none    { margin-bottom: 0; }
.v2-section--gap-small   { margin-bottom: 16px; }
.v2-section--gap-medium  { margin-bottom: 40px; }
.v2-section--gap-large   { margin-bottom: 72px; }

/* ── Post + page styles ──────────────────────────────────────────────── */
.v2-post, .v2-page { padding: calc(80px * var(--v2-spacing-scale, 1)) 40px; }
.v2-post__inner, .v2-page__inner { max-width: min(720px, var(--v2-content-max-width, 720px)); margin: 0 auto; }
.v2-post__tag {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--v2-accent); margin-bottom: 14px;
}
.v2-post__title, .v2-page__title {
  font-family: var(--v2-display);
  font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 800;
  letter-spacing: -0.035em; line-height: 1.05; margin: 0 0 20px;
}
.v2-post__excerpt { font-size: 1.15rem; opacity: 0.6; margin: 0 0 28px; line-height: 1.6; }
.v2-post__meta {
  display: flex; gap: 16px; font-size: 0.85rem; opacity: 0.4; margin-bottom: 40px;
}
.v2-post__image, .v2-page__image {
  margin: 0 0 40px; border-radius: var(--v2-radius, 12px); width: 100%; height: auto;
}
.v2-post__content, .v2-page__content { font-size: 1.05rem; line-height: 1.8; }
.v2-post__content p, .v2-page__content p { margin: 0 0 1.4em; }
.v2-post__content h2, .v2-post__content h3 {
  font-family: var(--v2-display); margin: 2.5em 0 0.6em;
  letter-spacing: -0.02em; font-weight: 700;
}
.v2-post__content a, .v2-page__content a { color: var(--v2-accent); }
.v2-post__content img { border-radius: var(--v2-radius, 12px); margin: 2em 0; }
.v2-post__content blockquote {
  border-left: 2px solid var(--v2-accent); padding-left: 24px;
  margin: 2em 0; font-style: italic; opacity: 0.7;
}

/* Ghost required classes */
.kg-width-wide { max-width: 1040px; margin-left: auto; margin-right: auto; }
.kg-width-full {
  max-width: none; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); width: 100vw;
}
.kg-width-wide img, .kg-width-full img { width: 100%; height: auto; }

/* ── Blog archive (index.hbs) + baseline post-card styles ─────────────── */
.v2-archive { padding: calc(80px * var(--v2-spacing-scale, 1)) 40px; }
.v2-archive__inner { max-width: var(--v2-content-max-width, 1280px); margin: 0 auto; }
.v2-archive__head { margin-bottom: 40px; }
.v2-archive__title {
  font-family: var(--v2-display); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; letter-spacing: -0.03em; margin: 0; color: var(--v2-text);
}
/* Tag / author archive lead-in header (tag.hbs, author.hbs) */
.v2-archive__taxhead {
  max-width: var(--v2-content-max-width, 1280px);
  margin: 0 auto;
  padding: calc(60px * var(--v2-spacing-scale, 1)) 0 0;
}
/* Wrap taxhead in section with side padding so max-width isn't reduced by padding */
.v2-archive__taxwrap {
  padding: 0 40px;
}
.v2-archive__taxlabel {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--v2-accent); margin: 0 0 8px;
}
.v2-archive__taxtitle {
  font-family: var(--v2-display); font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800; letter-spacing: -0.03em; margin: 0; color: var(--v2-text);
}
.v2-archive__taxdesc { font-size: 1.05rem; opacity: 0.6; margin: 12px 0 0; max-width: 640px; line-height: 1.6; }
@media (max-width: 600px) { .v2-archive__taxwrap { padding: 0 20px; } .v2-archive__taxhead { padding: 44px 0 0; } }
.v2-archive__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .v2-archive__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .v2-archive { padding: 56px 20px; } .v2-archive__grid { grid-template-columns: 1fr; } }

/* Baseline card styles — shared by the archive and the Post Feed module so the
   archive looks right even when no Post Feed module is on the canvas. The Post
   Feed module ships layout variants (list/scroll) on top of these. */
.v2-posts__card {
  display: flex; flex-direction: column; text-decoration: none;
  color: var(--v2-text); background: var(--v2-bg-alt, rgba(127,127,127,0.04));
  border: 1px solid var(--v2-border); border-radius: var(--v2-radius, 14px); overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.v2-posts__card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--v2-accent) 40%, var(--v2-border));
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}
.v2-posts__media { aspect-ratio: 16 / 9; overflow: hidden; background: rgba(127,127,127,0.1); }
.v2-posts__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-posts__img--placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v2-accent) 18%, transparent), transparent);
}
.v2-posts__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.v2-posts__tag {
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--v2-accent);
}
.v2-posts__title {
  font-family: var(--v2-display); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.3; margin: 0; color: var(--v2-text);
}
.v2-posts__excerpt { font-size: 0.9rem; line-height: 1.55; opacity: 0.6; margin: 0; }
.v2-posts__meta {
  display: flex; gap: 12px; font-size: 0.78rem; opacity: 0.45; margin-top: auto; padding-top: 6px;
}
.v2-posts__empty { opacity: 0.5; font-size: 0.95rem; padding: 20px 0; }

/* Pagination */
.pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 48px; }
.pagination a, .pagination .page-number {
  color: var(--v2-text); opacity: 0.7; text-decoration: none; font-size: 0.9rem;
}
.pagination a:hover { opacity: 1; color: var(--v2-accent); }

/* ── 404 / not-found (default, when no 404 modules are designed) ───────── */
.v2-404 {
  min-height: 60vh; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 80px 24px;
}
.v2-404__inner { max-width: 480px; }
.v2-404__code {
  font-family: var(--v2-display); font-size: clamp(5rem, 14vw, 8rem);
  font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin: 0 0 8px;
  color: var(--v2-text); opacity: 0.15;
}
.v2-404__msg { font-size: 1.1rem; opacity: 0.55; margin: 0 0 24px; color: var(--v2-text); }
.v2-404__home { color: var(--v2-accent); text-decoration: none; font-weight: 600; }
.v2-404__home:hover { opacity: 0.8; }


/* ═══════════════════════════════════════════════════════════════════════
   header-clean -- minimal, airy, no-border header
   ═══════════════════════════════════════════════════════════════════════ */
.v2-hdr {
  position: relative;
  z-index: 100;
  background: var(--v2-bg);
}
/* Floating: becomes sticky with frosted-glass backdrop, a top gap + side
   inset so the page background shows around the bar. Non-floating gets a
   solid background — translucency only makes sense when scrolling over
   content beneath the bar. */
.v2-hdr--sticky { position: sticky; top: 0; z-index: 100; }
.v2-hdr--bordered { border-bottom: 1px solid var(--v2-border); }
.v2-hdr--floating {
  position: sticky;
  top: 16px;
  padding-inline: 24px;
  background: rgba(var(--v2-bg-rgb, 255,255,255), 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}
.v2-hdr__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v2-hdr__brand {
  text-decoration: none;
  display: flex;
  align-items: center;
}
.v2-hdr__logo {
  display: block;
  height: 36px;
  max-width: 220px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
.v2-hdr__wordmark {
  font-family: var(--v2-display);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--v2-text);
  letter-spacing: -0.02em;
}
.v2-hdr__nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.v2-hdr__nav-list,
.v2-hdr .nav {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-hdr__nav-item,
.v2-hdr .nav li {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.v2-hdr__link,
.v2-hdr .nav a,
.v2-hdr .nav li a,
.v2-hdr__nav-list a {
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in srgb, var(--v2-text) 60%, transparent);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.01em;
}
.v2-hdr__link:hover,
.v2-hdr .nav a:hover,
.v2-hdr .nav li a:hover,
.v2-hdr__nav-list a:hover {
  color: var(--v2-text);
  text-decoration: none;
}
.v2-hdr .nav li.nav-current a,
.v2-hdr:not(.has-dropdowns) .v2-hdr__nav-item.nav-current .v2-hdr__link {
  color: var(--v2-text);
  font-weight: 600;
}
.v2-hdr .nav li.nav-current a[href="#"],
.v2-hdr .nav li.nav-current a[href$="/#"],
.v2-hdr .nav li.nav-current .v2-hdr__dropdown a {
  color: inherit; font-weight: inherit;
}

/* Secondary navigation — bolder weight, acts as action links */
.v2-hdr__nav-list--secondary {
  gap: 20px;
  margin-left: 8px;
  padding-left: 20px;
  border-left: 1px solid var(--v2-border);
}
.v2-hdr__nav-list--secondary a {
  color: var(--v2-text) !important;
  font-weight: 600;
  opacity: 1;
}
.v2-hdr__cta {
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: var(--v2-accent);
  padding: 8px 20px;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.v2-hdr__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--v2-accent) 35%, transparent);
}
.v2-hdr__cta-outline {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--v2-text);
  background: transparent;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--v2-text) 25%, transparent);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.v2-hdr__cta-outline:hover {
  border-color: var(--v2-text);
  background: color-mix(in srgb, var(--v2-text) 6%, transparent);
}
.v2-hdr__cta-text {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--v2-text);
  text-decoration: none;
  padding: 8px 4px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.v2-hdr__cta-text:hover { opacity: 1; }
.v2-hdr__search {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  border: none; background: transparent;
  color: var(--v2-text); opacity: 0.5;
  cursor: pointer; padding: 0;
  transition: opacity 0.15s, background 0.15s;
}
.v2-hdr__search:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--v2-text) 8%, transparent);
}
/* -- Dropdown submenu ─────────────────────────────────────────────── */
.v2-hdr__nav-item.v2-hdr__item--has-dropdown { position: relative; }
.v2-hdr__link--parent { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.v2-hdr__chevron { flex-shrink: 0; transition: transform 0.2s; margin-left: 2px; }
.v2-hdr__item--has-dropdown:hover .v2-hdr__chevron,
.v2-hdr__item--has-dropdown:focus-within .v2-hdr__chevron { transform: rotate(180deg); }
.v2-hdr__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 200px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.06);
  z-index: 200;
  overflow: hidden;
}
.v2-hdr__dropdown::before {
  content: '';
  position: absolute;
  top: -14px;
  left: -12px;
  right: -12px;
  height: 16px;
}
.v2-hdr__nav-list:hover .v2-hdr__item--has-dropdown:not(:hover) .v2-hdr__dropdown {
  display: none;
}
.v2-hdr__item--has-dropdown:hover .v2-hdr__dropdown,
.v2-hdr__item--has-dropdown:focus-within .v2-hdr__dropdown {
  display: block;
}
.v2-hdr__dropdown-item { list-style: none; margin: 0; padding: 0; }
.v2-hdr__dropdown-link {
  display: block;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--v2-text);
  text-decoration: none;
  opacity: 0.7;
  border-radius: 0;
  white-space: nowrap;
  transition: background 0.1s, opacity 0.1s;
}
.v2-hdr__dropdown-link:hover {
  background: rgba(var(--v2-text-rgb, 0,0,0), 0.05);
  opacity: 1;
}
@media (max-width: 640px) {
  .v2-hdr__inner    { padding: 16px 20px; }
  .v2-hdr--sticky { position: sticky; top: 0; z-index: 100; }
.v2-hdr--bordered { border-bottom: 1px solid var(--v2-border); }
.v2-hdr--floating { padding-inline: 12px; top: 10px; }
}

/* ── Hamburger button — hidden on desktop, shown on mobile ───────────────── */
.v2-hdr__burger {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; flex-shrink: 0;
  background: transparent; border: none; cursor: pointer;
  color: var(--v2-text); border-radius: 10px;
  transition: background 0.15s;
}
.v2-hdr__burger:hover { background: color-mix(in srgb, var(--v2-text) 8%, transparent); }
.v2-hdr__burger svg { display: block; }

/* ── Mobile: collapse the inline nav into a toggleable panel ─────────────────
   At ≤768px the full nav row (links + CTAs + search) no longer fits beside the
   brand, so we hide it behind the hamburger and drop it as a full-width panel
   below the bar. main.js toggles .js-nav-open on the <header>. With JS off the
   panel simply stays closed — no overflow, graceful degradation. */
@media (max-width: 768px) {
  .v2-hdr__burger { display: inline-flex; }
  .v2-hdr__nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 6px;
    padding: 12px 20px 20px;
    background: var(--v2-bg);
    border-top: 1px solid var(--v2-border);
    box-shadow: 0 12px 28px rgba(0,0,0,0.14);
    z-index: 200;
  }
  .v2-hdr.js-nav-open .v2-hdr__nav { display: flex; }
  /* .v2-hdr__nav scope raises specificity above the inline <style> the deployed
     header ships (which pins the list to a centered 28px-gap row). */
  .v2-hdr__nav .v2-hdr__nav-list,
  .v2-hdr .nav {
    flex-direction: column; align-items: flex-start; gap: 2px; width: 100%;
  }
  .v2-hdr__nav .v2-hdr__nav-item,
  .v2-hdr .nav li { width: 100%; }
  .v2-hdr__link,
  .v2-hdr .nav a,
  .v2-hdr__nav-list a { display: block; width: 100%; padding: 10px 0; font-size: 0.95rem; }
  .v2-hdr__cta,
  .v2-hdr__cta-outline { display: block; width: 100%; text-align: center; margin-top: 6px; }
  .v2-hdr__cta-text { display: block; width: 100%; padding: 10px 0; }
  .v2-hdr__search { align-self: flex-start; margin-top: 4px; }
  /* Submenus render inline (expanded) inside the panel — hover doesn't work on
     touch. Higher specificity (.v2-hdr__nav scope) beats the inline <style>
     display:none the deployed header ships. */
  .v2-hdr__nav .v2-hdr__dropdown {
    position: static; display: block;
    min-width: 0; padding: 0 0 4px 12px;
    background: transparent; border: none; box-shadow: none;
  }
  .v2-hdr__nav .v2-hdr__dropdown::before { display: none; }
}


/* hero-vertical */
.v2-hero-vt { background: var(--v2-bg); overflow: hidden; }
.v2-hero-vt__image {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: rgba(127,127,127,0.08);
  border-radius: var(--v2-image-radius, var(--v2-radius, 0));
}
.v2-hero-vt__img {
  width: 100%; height: 100%; display: block;
  object-fit: cover;
}
.v2-hero-vt__img-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v2-accent) 18%, transparent), transparent);
}
/* Image heights: how much of the image is shown vertically (full-width band,
   object-fit: cover crops the rest). Uses --v2-vhu (viewport-height unit):
   the builder preview pins it to a fixed reference (self-sizing iframes make
   real dvh self-referential); deployed themes fall back to true 1dvh. */
.v2-hero-vt--ih-third .v2-hero-vt__image { height: calc(var(--v2-vhu, 1dvh) * 33); min-height: 300px; }
.v2-hero-vt--ih-half  .v2-hero-vt__image { height: calc(var(--v2-vhu, 1dvh) * 50); min-height: 400px; }
.v2-hero-vt--ih-three-quarter .v2-hero-vt__image { height: calc(var(--v2-vhu, 1dvh) * 75); min-height: 480px; }
.v2-hero-vt--ih-full  .v2-hero-vt__image { height: calc(var(--v2-vhu, 1dvh) * 100 - var(--v2-header-h, 68px)); min-height: 560px; }
/* Auto height: image determines height, but constrained widths need aspect ratio */
.v2-hero-vt--ih-auto .v2-hero-vt__img { height: auto; object-fit: contain; }
.v2-hero-vt--ih-auto .v2-hero-vt__img-placeholder { aspect-ratio: 16 / 9; height: auto; }
.v2-hero-vt__content-wrap {
  background: var(--v2-bg);
  padding: 80px 80px;
  position: relative;
  z-index: 1;
}
.v2-hero-vt__content {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
}
.v2-hero-vt__badge {
  display: inline-flex;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--v2-accent);
  background: color-mix(in srgb, var(--v2-accent) 12%, transparent);
  padding: 6px 14px;
  border-radius: 999px;
}
.v2-hero-vt__h1 {
  font-family: var(--v2-display);
  font-size: clamp(2.25rem, 4.5vw, 3.75rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 0;
  color: var(--v2-text);
}
.v2-hero-vt__sub {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--v2-text);
  opacity: 0.55;
  margin: 8px 0 0;
  max-width: 560px;
}
.v2-hero-vt__actions {
  display: flex;
  gap: 16px;
  padding-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.v2-hero-vt__btn-primary {
  display: inline-flex;
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: 600;
  background: var(--v2-accent);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.v2-hero-vt__btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--v2-accent) 30%, transparent);
}
.v2-hero-vt__btn-outline {
  display: inline-flex;
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: 600;
  background: transparent;
  color: var(--v2-text);
  border: 1.5px solid var(--v2-border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.2s;
}
.v2-hero-vt__btn-outline:hover { border-color: var(--v2-accent); color: var(--v2-accent); }

/* Social proof */
.v2-hero-vt__proof {
  font-size: 0.875rem; color: var(--v2-text); opacity: 0.45;
  margin: 8px 0 0;
}

/* Image below content */
.v2-hero-vt--img-below { display: flex; flex-direction: column; }
.v2-hero-vt--img-below .v2-hero-vt__content-wrap { order: -1; }

/* Image width variants — constrain + center + round corners */
.v2-hero-vt--iw-wide .v2-hero-vt__image,
.v2-hero-vt--iw-medium .v2-hero-vt__image,
.v2-hero-vt--iw-narrow .v2-hero-vt__image {
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--v2-image-radius, var(--v2-radius, 16px));
}
.v2-hero-vt--iw-wide .v2-hero-vt__image   { max-width: 1200px; }
.v2-hero-vt--iw-medium .v2-hero-vt__image  { max-width: 960px; }
.v2-hero-vt--iw-narrow .v2-hero-vt__image  { max-width: 720px; }
.v2-hero-vt--iw-wide .v2-hero-vt__img,
.v2-hero-vt--iw-medium .v2-hero-vt__img,
.v2-hero-vt--iw-narrow .v2-hero-vt__img {
  border-radius: 0;
}

/* ── Edge fade — gradient overlay on the image container ────────────── */
.v2-hero-vt[class*="v2-hero-vt--fade-"] .v2-hero-vt__image::after {
  content: ''; position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
}
/* Fade colour */
.v2-hero-vt--fadeclr-auto  { --fade-color: var(--v2-bg, #fff); }
.v2-hero-vt--fadeclr-black { --fade-color: #000; }
.v2-hero-vt--fadeclr-white { --fade-color: #fff; }
/* Fade coverage */
.v2-hero-vt--fadecov-subtle { --fade-stop: 25%; }
.v2-hero-vt--fadecov-medium { --fade-stop: 50%; }
.v2-hero-vt--fadecov-strong { --fade-stop: 75%; }
/* Fade directions — full-height eased gradients, very gradual buildup */
.v2-hero-vt--fade-bottom .v2-hero-vt__image::after {
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--fade-color) 2%, transparent) 20%,
    color-mix(in srgb, var(--fade-color) 6%, transparent) 40%,
    color-mix(in srgb, var(--fade-color) 16%, transparent) 60%,
    color-mix(in srgb, var(--fade-color) 38%, transparent) 75%,
    color-mix(in srgb, var(--fade-color) 65%, transparent) 88%,
    var(--fade-color) 100%);
}
.v2-hero-vt--fade-top .v2-hero-vt__image::after {
  background: linear-gradient(to top,
    transparent 0%,
    color-mix(in srgb, var(--fade-color) 2%, transparent) 20%,
    color-mix(in srgb, var(--fade-color) 6%, transparent) 40%,
    color-mix(in srgb, var(--fade-color) 16%, transparent) 60%,
    color-mix(in srgb, var(--fade-color) 38%, transparent) 75%,
    color-mix(in srgb, var(--fade-color) 65%, transparent) 88%,
    var(--fade-color) 100%);
}
.v2-hero-vt--fade-edges .v2-hero-vt__image::after {
  background:
    linear-gradient(to bottom, var(--fade-color) 0%, color-mix(in srgb, var(--fade-color) 20%, transparent) 8%, transparent 30%),
    linear-gradient(to top,    var(--fade-color) 0%, color-mix(in srgb, var(--fade-color) 20%, transparent) 8%, transparent 30%);
}

@media (max-width: 768px) {
  .v2-hero-vt__content-wrap { padding: 48px 24px; }
  .v2-hero-vt--ih-third .v2-hero-vt__image { height: 240px; min-height: 0; }
  .v2-hero-vt--ih-half  .v2-hero-vt__image { height: 300px; min-height: 0; }
  .v2-hero-vt--ih-three-quarter .v2-hero-vt__image { height: 360px; min-height: 0; }
  .v2-hero-vt--ih-full  .v2-hero-vt__image { height: 400px; min-height: 0; }
  .v2-hero-vt__actions { flex-direction: column; align-items: center; }
}

/* image fit/focus — object-fit for <img>, background-size for bg elements */
.v2-fit-img { width: 100%; height: 100%; }
.v2-fit-img.v2-fit--fill    { object-fit: cover; }
.v2-fit-img.v2-fit--fit     { object-fit: contain; }
.v2-fit-img.v2-fit--stretch { object-fit: fill; }
.v2-fit-bg.v2-fit--fill     { background-size: cover; }
.v2-fit-bg.v2-fit--fit      { background-size: contain; background-repeat: no-repeat; }
.v2-fit-bg.v2-fit--stretch  { background-size: 100% 100%; }
.v2-fit--fill.v2-focus--center, .v2-fit--fit.v2-focus--center,
.v2-focus--center { object-position: center center; background-position: center center; }
.v2-focus--top    { object-position: center top;    background-position: center top; }
.v2-focus--bottom { object-position: center bottom; background-position: center bottom; }
.v2-focus--left   { object-position: left center;   background-position: left center; }
.v2-focus--right  { object-position: right center;  background-position: right center; }
.v2-focus--top-left     { object-position: left top;     background-position: left top; }
.v2-focus--top-right    { object-position: right top;    background-position: right top; }
.v2-focus--bottom-left  { object-position: left bottom;  background-position: left bottom; }
.v2-focus--bottom-right { object-position: right bottom; background-position: right bottom; }



.v2-hiw { background: var(--v2-bg); padding: 80px 24px; }
.v2-hiw__inner { max-width: 1100px; margin: 0 auto; }
.v2-hiw__header { margin-bottom: 56px; }
.v2-hiw__header--center { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 56px; }
.v2-hiw__header--left { text-align: left; }
.v2-hiw__label { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--v2-accent); margin-bottom: 12px; }
.v2-hiw__h2 { font-family: var(--v2-display); font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; color: var(--v2-text); margin: 0 0 12px; }
.v2-hiw__sub { font-size: 1rem; line-height: 1.6; color: var(--v2-text); opacity: 0.5; margin: 0; }
.v2-hiw__steps { position: relative; }
.v2-hiw--horizontal .v2-hiw__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.v2-hiw--vertical .v2-hiw__steps { display: flex; flex-direction: column; gap: 32px; max-width: 560px; }
.v2-hiw--zigzag .v2-hiw__steps { display: flex; flex-direction: column; gap: 48px; }
.v2-hiw--zigzag .v2-hiw__step:nth-child(even) { align-self: flex-end; text-align: right; }
.v2-hiw__step { text-align: center; }
.v2-hiw--vertical .v2-hiw__step { text-align: left; display: flex; gap: 20px; align-items: flex-start; }
.v2-hiw--zigzag .v2-hiw__step { max-width: 480px; text-align: left; }
.v2-hiw__num { width: 48px; height: 48px; border-radius: 50%; background: color-mix(in srgb, var(--v2-accent) 10%, transparent); color: var(--v2-accent); font-family: var(--v2-display); font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; flex-shrink: 0; }
.v2-hiw--vertical .v2-hiw__num { margin: 0; }
.v2-hiw__step-title { font-family: var(--v2-display); font-size: 1.125rem; font-weight: 700; color: var(--v2-text); margin: 0 0 8px; }
.v2-hiw__step-desc { font-size: 0.9375rem; line-height: 1.6; color: var(--v2-text); opacity: 0.55; margin: 0; }
/* Connector line for horizontal */
.v2-hiw--horizontal .v2-hiw__step { position: relative; }
.v2-hiw--horizontal .v2-hiw__step:not(:last-child)::after { content: ''; position: absolute; top: 24px; left: calc(50% + 32px); width: calc(100% - 64px); height: 1px; background: var(--v2-border); }
@media (max-width: 768px) {
  .v2-hiw { padding: 56px 20px; }
  .v2-hiw--horizontal .v2-hiw__steps { grid-template-columns: 1fr; }
  .v2-hiw--horizontal .v2-hiw__step::after { display: none; }
  .v2-hiw--zigzag .v2-hiw__step:nth-child(even) { align-self: flex-start; text-align: left; }
}


/* ═══════════════════════════════════════════════════════════════════════
   features-tabs — tabbed screenshot showcase
   ═══════════════════════════════════════════════════════════════════════ */
.v2-ftabs { padding: 96px 40px; background: var(--v2-bg); }
.v2-ftabs__inner { max-width: 1100px; margin: 0 auto; }

/* ── Header ──────────────────────────────────────────────────────────── */
.v2-ftabs__header {
  display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 14px;
  margin-bottom: 40px;
}
.v2-ftabs__badge {
  display: inline-flex; font-size: 0.8125rem; font-weight: 600;
  color: var(--v2-accent);
  background: color-mix(in srgb, var(--v2-accent) 12%, transparent);
  padding: 5px 14px; border-radius: 999px;
}
.v2-ftabs__h2 {
  font-family: var(--v2-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.03em;
  color: var(--v2-text); margin: 0;
}
.v2-ftabs__h2--sm { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
.v2-ftabs__h2--md { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.v2-ftabs__h2--lg { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }
.v2-ftabs__h2--xl { font-size: clamp(2.25rem, 5vw, 3.75rem); }
.v2-ftabs__sub {
  font-size: 1.0625rem; line-height: 1.65;
  color: var(--v2-text); opacity: 0.55;
  margin: 0; max-width: 560px;
}

/* ── Tab row ─────────────────────────────────────────────────────────── */
.v2-ftabs__tabs {
  display: flex; justify-content: center;
  margin-bottom: 32px;
}
.v2-ftabs__tab-row {
  display: inline-flex; gap: 4px;
  padding: 4px;
  border-radius: 12px;
}
.v2-ftabs__btn {
  padding: 10px 22px;
  font-size: 0.9rem; font-weight: 600;
  font-family: inherit;
  border: none; cursor: pointer;
  border-radius: 8px;
  color: var(--v2-text); opacity: 0.55;
  background: transparent;
  transition: all 0.18s;
  white-space: nowrap;
}
.v2-ftabs__btn:hover { opacity: 0.85; }
.v2-ftabs__btn--active { opacity: 1; }

/* ── Tab style: pills ────────────────────────────────────────────────── */
.v2-ftabs--pills .v2-ftabs__tab-row {
  background: color-mix(in srgb, var(--v2-text) 5%, transparent);
}
.v2-ftabs--pills .v2-ftabs__btn--active {
  background: var(--v2-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
}

/* ── Tab style: underline ────────────────────────────────────────────── */
.v2-ftabs--underline .v2-ftabs__tab-row {
  border-radius: 0;
  border-bottom: 2px solid var(--v2-border);
  gap: 0; padding: 0;
}
.v2-ftabs--underline .v2-ftabs__btn {
  border-radius: 0;
  padding: 10px 24px;
  margin-bottom: -2px;
  border-bottom: 2px solid transparent;
}
.v2-ftabs--underline .v2-ftabs__btn--active {
  border-bottom-color: var(--v2-accent);
  color: var(--v2-accent);
}

/* ── Tab style: bordered ─────────────────────────────────────────────── */
.v2-ftabs--bordered .v2-ftabs__tab-row {
  border: 1px solid var(--v2-border);
}
.v2-ftabs--bordered .v2-ftabs__btn {
  border-radius: 8px;
}
.v2-ftabs--bordered .v2-ftabs__btn--active {
  background: var(--v2-accent);
  color: #fff;
}

/* ── Panels ──────────────────────────────────────────────────────────── */
.v2-ftabs__panels {
  position: relative;
  max-width: 900px; margin: 0 auto;
}
.v2-ftabs__panels--narrow { max-width: 640px; }
.v2-ftabs__panels--medium { max-width: 780px; }
.v2-ftabs__panels--wide   { max-width: 900px; }
.v2-ftabs__panels--full   { max-width: none; }
.v2-ftabs__panel {
  display: none;
  flex-direction: column; align-items: center; gap: 16px;
}
.v2-ftabs__panel--active { display: flex; }
.v2-ftabs__img {
  width: 100%; height: auto; display: block;
  border-radius: var(--v2-image-radius, var(--v2-radius, 12px));
  border: 1px solid var(--v2-border);
}
.v2-ftabs__img--soft {
  box-shadow: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
}
.v2-ftabs__img--strong {
  box-shadow: 0 20px 60px rgba(0,0,0,0.1), 0 4px 16px rgba(0,0,0,0.06);
}
.v2-ftabs__img--placeholder {
  width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--v2-image-radius, var(--v2-radius, 12px));
  border: 1px dashed var(--v2-border);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--v2-accent) 8%, var(--v2-bg-card)) 0%,
    var(--v2-bg-card) 70%);
}
.v2-ftabs__desc {
  font-size: 1rem; line-height: 1.6;
  color: var(--v2-text); opacity: 0.55;
  margin: 0; text-align: center; max-width: 560px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .v2-ftabs { padding: 64px 20px; }
  .v2-ftabs__tab-row { flex-wrap: wrap; justify-content: center; }
  .v2-ftabs__btn { padding: 8px 16px; font-size: 0.8125rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   custom-html — freeform HTML block
   ═══════════════════════════════════════════════════════════════════════ */

.v2-custom {
  background: var(--v2-bg);
  /* Horizontal padding is provided by the global gutter override (palette.ts
     outerSectionGutterSelectors). No hardcoded padding-inline here so the
     custom section aligns with every other section at every viewport width. */
}

/* Contained variant: inner div respects the theme's container width */
.v2-custom__inner {
  max-width: var(--v2-content-max-width, 1080px);
  margin-inline: auto;
  /* No extra horizontal padding — gutter is on the outer .v2-custom */
  width: 100%;
}

/* Full-width variant: content reaches the edges */
.v2-custom--full {
  /* No inner wrapper — user HTML can reach viewport edges */
}
.v2-custom--full .v2-custom__inner {
  max-width: 100%;
}

/* Placeholder shown in the builder when no HTML is entered yet */
.v2-custom__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 120px;
  padding: 32px;
  border: 2px dashed var(--v2-border);
  border-radius: var(--v2-radius, 12px);
  color: var(--v2-text);
  text-align: center;
}
.v2-custom__placeholder p {
  margin: 0;
  font-size: 0.9375rem;
  opacity: 0.4;
}


/* ═══════════════════════════════════════════════════════════════════════
   posts-feed — all layout variants
   ═══════════════════════════════════════════════════════════════════════ */
.v2-posts { padding: 80px 40px; background: var(--v2-bg); }
.v2-posts__inner { max-width: var(--v2-content-max-width, 1280px); margin: 0 auto; }
.v2-posts__heading {
  font-family: var(--v2-display); font-size: clamp(1.6rem, 3.5vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.03em; color: var(--v2-text); margin: 0 0 8px;
}
.v2-posts__subhead { font-size: 1.05rem; color: var(--v2-text); opacity: 0.55; margin: 0 0 36px; }
.v2-posts__heading ~ .v2-posts__track,
.v2-posts__subhead ~ .v2-posts__track { margin-top: 36px; }

/* ── Base card ───────────────────────────────────────────────────────── */
.v2-posts__card {
  display: flex; flex-direction: column; text-decoration: none;
  color: var(--v2-text); background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 14px);
  overflow: hidden;
  box-shadow: var(--v2-shadow, none);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.v2-posts__card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--v2-accent) 40%, var(--v2-border));
}
.v2-posts__media {
  position: relative;
  aspect-ratio: 16 / 9; overflow: hidden;
  background: rgba(127,127,127,0.1);
}
.v2-posts__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-posts__img--placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, color-mix(in srgb, var(--v2-accent) 18%, transparent), transparent);
}
.v2-posts__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.v2-posts__title {
  font-family: var(--v2-display); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -0.01em; line-height: 1.3; margin: 0; color: var(--v2-text);
}
.v2-posts__excerpt { font-size: 0.9rem; line-height: 1.55; opacity: 0.6; margin: 0; }
.v2-posts__meta {
  display: flex; gap: 12px; font-size: 0.78rem; opacity: 0.45; margin-top: auto; padding-top: 6px;
  flex-wrap: wrap;
}
.v2-posts__empty { opacity: 0.5; font-size: 0.95rem; padding: 20px 0; }

/* Archive pagination (rendered by {{pagination}} on index/tag/author) */
.v2-posts__pagination { margin-top: 48px; }
.v2-posts__pagination .pagination {
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.v2-posts__pagination a, .v2-posts__pagination .page-number {
  color: var(--v2-text); opacity: 0.7; text-decoration: none; font-size: 0.9rem;
}
.v2-posts__pagination a:hover { opacity: 1; color: var(--v2-accent); }

/* ── Tags wrapper ────────────────────────────────────────────────────────
   Multi-tag mode renders 2+ chips in a flex row. Single-tag mode also goes
   through the wrap, so the layout & spacing rules are identical regardless
   of count. The wrap is the thing CSS sizes/positions; individual chips
   inside it stay simple inline-flex pills. */
.v2-posts__tags-wrap {
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
  margin: 0;
}
/* Empty wraps shouldn't reserve space (matters when the user picks 'none'
   for tagDisplay but the wrap div was rendered as a placeholder). */
.v2-posts__tags-wrap:empty { display: none; }
/* On-image wrap is absolute-positioned over the feature image so multiple
   pills stack from top-left without overlapping or pushing the image. */
.v2-posts__tags-wrap--on-image {
  position: absolute; top: 10px; left: 10px;
  z-index: 1;
  max-width: calc(100% - 20px);
}
/* text-above / text-below tag chips use display: block individually but
   the wrap puts them inline-row so multiple labels separate cleanly. */
.v2-posts__tags-wrap > .v2-posts__tag--text-above,
.v2-posts__tags-wrap > .v2-posts__tag--text-below {
  display: inline-flex;
}
/* Visual separator dot between multiple text-style tags */
.v2-posts__tags-wrap > .v2-posts__tag--text-above + .v2-posts__tag--text-above::before,
.v2-posts__tags-wrap > .v2-posts__tag--text-below + .v2-posts__tag--text-below::before {
  content: "·";
  margin-right: 6px;
  opacity: 0.4;
}

/* ── Tag display variants ────────────────────────────────────────────── */

/* pill-on-image: badge overlaid on the image — positioning lives on the
   wrap so it can hold multiple pills stacking horizontally; the chip itself
   only needs the visual pill styling. */
.v2-posts__tag--pill-on-image {
  display: inline-flex;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: #fff;
  background: var(--tag-color, var(--v2-accent));
  padding: 3px 10px; border-radius: 999px;
}

/* pill-below: accent-tinted pill just above the title (inside .body) */
.v2-posts__tag--pill-below {
  display: inline-flex; align-self: flex-start;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--tag-color, var(--v2-accent));
  background: color-mix(in srgb, var(--tag-color, var(--v2-accent)) 12%, transparent);
  padding: 3px 10px; border-radius: 999px;
}

/* text-above: small muted uppercase label above the title */
.v2-posts__tag--text-above {
  display: block;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--tag-color, var(--v2-accent)); opacity: 0.85;
}

/* text-below: same as above but sits below the title */
.v2-posts__tag--text-below {
  display: block;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--tag-color, var(--v2-text)); opacity: 0.45;
}

/* light variant for overlay cards */
.v2-posts__tag--light {
  display: inline-flex;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.75);
  padding: 3px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.12);
}

/* ── Paid/members badge ──────────────────────────────────────────────── */
/* Icon sized in 1em so it always matches the badge text's font-size exactly
   -- same convention as .v2-posts__tag-icon svg for special tags, rather
   than a hardcoded pixel size that could drift from the surrounding text.
   Solid fill (not a tinted/translucent background) using --v2-accent --
   the site's Ghost Admin → Brand → Accent color -- so the badge reads as
   a clear, high-contrast "Premium" marker matching Ghost's own accent. */
.v2-posts__lock-icon { display: block; position: relative; top: 1px; flex-shrink: 0; width: 1em; height: 1em; }
.v2-posts__paid {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 2px;
}
.v2-posts__paid--icon {
  color: var(--v2-accent);
}
.v2-posts__paid--pill {
  color: #fff;
  background: var(--v2-accent);
  padding: 3px 10px; border-radius: 999px;
}
.v2-posts__paid--text {
  color: var(--v2-accent);
}
.v2-posts__paid-wrap--image {
  position: absolute; top: 10px; right: 10px;
  z-index: 1;
}

/* ── Overlay card ────────────────────────────────────────────────────── */
.v2-posts__card--overlay {
  position: relative; overflow: hidden;
  background-color: #111; background-size: cover; background-position: center;
  border: none; min-height: 320px;
  display: flex; flex-direction: column; justify-content: flex-end;
  text-decoration: none; color: #fff;
  transition: transform 0.2s;
}
.v2-posts__card--overlay:hover { transform: scale(1.01); }
.v2-posts__overlay-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.35) 50%, transparent 100%);
  pointer-events: none;
}
.v2-posts__overlay-body {
  position: relative; z-index: 1;
  padding: 28px; display: flex; flex-direction: column; gap: 8px;
}
.v2-posts__title--light { color: #fff; font-size: 1.35rem; }
.v2-posts__excerpt--light { color: rgba(255,255,255,0.7); opacity: 1; font-size: 0.9rem; }
.v2-posts__meta--light  { color: rgba(255,255,255,0.6); opacity: 1; }

/* ── Compact card ────────────────────────────────────────────────────── */
.v2-posts__card--compact {
  display: flex; flex-direction: row; align-items: center;
  border: none; border-radius: 0; background: transparent; box-shadow: none;
  border-bottom: 1px solid var(--v2-border);
  padding: 16px 0; transition: opacity 0.15s;
}
.v2-posts__card--compact:first-child { border-top: 1px solid var(--v2-border); }
.v2-posts__card--compact:hover { opacity: 0.75; transform: none; border-color: var(--v2-border); }
.v2-posts__compact-body { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.v2-posts__card--compact .v2-posts__title { font-size: 1rem; }

/* ══════════════════════════════════════════════════════════════════════
   LAYOUT TRACKS
   ══════════════════════════════════════════════════════════════════════ */

/* ── Grid ─────────────────────────────────────────────────────────────── */
.v2-posts--grid .v2-posts__track { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.v2-posts--grid[data-cols="2"] .v2-posts__track { grid-template-columns: repeat(2, 1fr); }
.v2-posts--grid[data-cols="3"] .v2-posts__track { grid-template-columns: repeat(3, 1fr); }
.v2-posts--grid[data-cols="4"] .v2-posts__track { grid-template-columns: repeat(4, 1fr); }

/* ── List ─────────────────────────────────────────────────────────────── */
.v2-posts--list .v2-posts__track { display: flex; flex-direction: column; gap: 20px; }
.v2-posts--list .v2-posts__card  { flex-direction: row; align-items: stretch; }
.v2-posts--list .v2-posts__media { flex: 0 0 38%; aspect-ratio: auto; min-height: 160px; }
.v2-posts--list .v2-posts__body  { justify-content: center; }
.v2-posts--list .v2-posts__title { font-size: 1.35rem; }

/* ── List compact ─────────────────────────────────────────────────────── */
.v2-posts--list-compact .v2-posts__track { display: flex; flex-direction: column; }

/* ── Horizontal scroll ────────────────────────────────────────────────── */
.v2-posts--scroll .v2-posts__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 12px; -webkit-overflow-scrolling: touch;
}
.v2-posts--scroll .v2-posts__card { flex: 0 0 300px; scroll-snap-align: start; }
.v2-posts--scroll .v2-posts__track::-webkit-scrollbar { height: 6px; }
.v2-posts--scroll .v2-posts__track::-webkit-scrollbar-thumb {
  background: var(--v2-border); border-radius: 999px;
}

/* ── Bento 3: 2 featured cards on top + a 3- or 4-up grid below ───────
   The first two posts render as big overlay "featured" cards sharing the
   top row (each half-width, landscape). Every remaining post is a normal
   landscape card flowing 3-up (default) or 4-up via [data-cols]. A 12-col
   base grid keeps every card a clean landscape rectangle instead of
   forcing companions into squished wide slivers beside one tall card. */
.v2-posts--bento-3 .v2-posts__track {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px;
}
/* Featured pair — 2-up (6 of 12 cols each) */
.v2-posts--bento-3 .v2-posts__card--bento-feat { grid-column: span 6; aspect-ratio: 16 / 10; min-height: 0; }
.v2-posts--bento-3 .v2-posts__card--bento-feat .v2-posts__title--light { font-size: 1.5rem; }
/* Body cards — 3-up (default) */
.v2-posts--bento-3 .v2-posts__track > .v2-posts__card:not(.v2-posts__card--bento-feat) { grid-column: span 4; }
/* Body cards — 4-up */
.v2-posts--bento-3[data-cols="4"] .v2-posts__track > .v2-posts__card:not(.v2-posts__card--bento-feat) { grid-column: span 3; }

/* ── Bento 4: 1 full-width hero + 3 below ────────────────────────────── */
.v2-posts--bento-4 .v2-posts__track {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.v2-posts__card--bento-hero { grid-column: 1 / -1; aspect-ratio: 2 / 1; min-height: 0; }
.v2-posts__card--bento-hero .v2-posts__title--light { font-size: 1.75rem; }

/* ── Bento 5: 1 full-width hero + a 2×2 landscape grid below ──────────── */
.v2-posts--bento-5 .v2-posts__track {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.v2-posts--bento-5 .v2-posts__card--bento-hero { grid-column: 1 / -1; }
.v2-posts--bento-5 .v2-posts__card--bento-hero .v2-posts__title--light { font-size: 1.5rem; }

/* ── Magazine ─────────────────────────────────────────────────────────── */
.v2-posts--magazine .v2-posts__track {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.v2-posts__card--magazine-lead { grid-column: 1 / -1; aspect-ratio: 2.5 / 1; min-height: 0; border-radius: var(--v2-radius, 14px); }
.v2-posts__card--magazine-lead .v2-posts__title--light { font-size: 1.75rem; }
.v2-posts--magazine .v2-posts__card--compact {
  padding: 20px 16px; border-radius: var(--v2-radius, 10px);
  background: var(--v2-bg-card); border: 1px solid var(--v2-border);
  transition: border-color 0.15s;
}
.v2-posts--magazine .v2-posts__card--compact:hover {
  opacity: 1; border-color: color-mix(in srgb, var(--v2-accent) 40%, var(--v2-border));
}

/* ── Masonry ──────────────────────────────────────────────────────────── */
.v2-posts--masonry .v2-posts__track { columns: 3; column-gap: 24px; }
.v2-posts--masonry .v2-posts__card { break-inside: avoid; margin-bottom: 24px; display: inline-flex; width: 100%; }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .v2-posts--grid .v2-posts__track,
  .v2-posts--grid[data-cols="3"] .v2-posts__track,
  .v2-posts--grid[data-cols="4"] .v2-posts__track { grid-template-columns: repeat(2, 1fr); }
  /* Bento 3 — featured pair stays 2-up; body cards collapse to 2-up too */
  .v2-posts--bento-3 .v2-posts__card--bento-feat,
  .v2-posts--bento-3 .v2-posts__track > .v2-posts__card:not(.v2-posts__card--bento-feat),
  .v2-posts--bento-3[data-cols="4"] .v2-posts__track > .v2-posts__card:not(.v2-posts__card--bento-feat) { grid-column: span 6; }
  .v2-posts--bento-4 .v2-posts__track { grid-template-columns: repeat(2, 1fr); }
  .v2-posts__card--bento-hero { aspect-ratio: 2 / 1; min-height: 0; }
  .v2-posts--magazine .v2-posts__track { grid-template-columns: repeat(2, 1fr); }
  .v2-posts--masonry .v2-posts__track { columns: 2; }
}
@media (max-width: 600px) {
  .v2-posts { padding: 56px 20px; }
  .v2-posts--grid .v2-posts__track,
  .v2-posts--grid[data-cols="2"] .v2-posts__track,
  .v2-posts--grid[data-cols="3"] .v2-posts__track,
  .v2-posts--grid[data-cols="4"] .v2-posts__track { grid-template-columns: 1fr; }
  .v2-posts--list .v2-posts__card  { flex-direction: column; }
  .v2-posts--list .v2-posts__media { flex: auto; aspect-ratio: 16 / 9; }
  .v2-posts--scroll .v2-posts__card { flex: 0 0 260px; }
  /* Bento 3/4/5 — single-column stack; featured/hero keep a landscape crop */
  .v2-posts--bento-3 .v2-posts__track { grid-template-columns: 1fr; }
  .v2-posts--bento-3 .v2-posts__card--bento-feat,
  .v2-posts--bento-3 .v2-posts__track > .v2-posts__card:not(.v2-posts__card--bento-feat),
  .v2-posts--bento-3[data-cols="4"] .v2-posts__track > .v2-posts__card:not(.v2-posts__card--bento-feat) { grid-column: 1 / -1; }
  .v2-posts--bento-3 .v2-posts__card--bento-feat { aspect-ratio: 16 / 9; }
  .v2-posts--bento-4 .v2-posts__track { grid-template-columns: 1fr; }
  .v2-posts--bento-5 .v2-posts__track { grid-template-columns: 1fr; }
  .v2-posts--magazine .v2-posts__track { grid-template-columns: 1fr; }
  .v2-posts--magazine .v2-posts__card--compact:nth-child(n+4) { display: none; }
  .v2-posts--masonry .v2-posts__track { columns: 1; }
}

/* ── Special tag badges ────────────────────────────────────────────────── */
/* Special tags inherit .v2-posts__tag pill/text styling. These rules add
   the icon element, size modifiers, and positioned wrappers. */
.v2-posts__tag--special { gap: 4px; }
/* font-size reads --icon-scale, set inline per-badge by specialTagBadgeHbs/
   specialTagBadgePreview from the user's "Tag N icon size" setting. Falls
   back to 0.85em (the old fixed value) for any icon usage that doesn't set
   the variable, e.g. the paid-badge lock icon. */
.v2-posts__tag-icon {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--icon-scale, 0.85em); line-height: 1; flex-shrink: 0;
}
.v2-posts__tag-icon svg { width: 1em; height: 1em; }
/* When the badge only contains an icon (no text), ensure a usable tap target
   and visible icon size. The :only-child selector fires when the icon span is
   the sole child of the badge — i.e. display='icon' mode. */
.v2-posts__tag-icon:only-child {
  font-size: var(--icon-scale, 1.1em);
}
/* Icon-only badges: equal padding so they’re square, not a wide pill */
.v2-posts__tag--special:has(.v2-posts__tag-icon:only-child) {
  padding: 5px 6px;
  min-width: 26px; min-height: 26px;
  justify-content: center;
}
/* Size modifiers — bump icon-only minimum so the badge doesn't collapse */
.v2-posts__tag--special-sm { font-size: 0.6rem; padding: 2px 7px; }
.v2-posts__tag--special-sm .v2-posts__tag-icon:only-child { font-size: max(var(--icon-scale, 1em), 0.85rem); }
.v2-posts__tag--special-lg { font-size: 0.85rem; padding: 5px 14px; }
/* Wrap — positioned container for special tags */
.v2-posts__stag-wrap {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  z-index: 2;
}
.v2-posts__stag-wrap:empty { display: none; }
/* Image overlay positions */
.v2-posts__stag-wrap--top-left {
  position: absolute; top: 10px; left: 10px;
}
.v2-posts__stag-wrap--top-right {
  position: absolute; top: 10px; right: 10px;
}
/* Body positions */
.v2-posts__stag-wrap--above-title,
.v2-posts__stag-wrap--below-title {
  position: relative;
}
/* Fallback for image positions on no-image cards */
.v2-posts__body > .v2-posts__stag-wrap--top-left,
.v2-posts__body > .v2-posts__stag-wrap--top-right {
  position: relative; top: auto; left: auto; right: auto;
}


/* comparison-table */
.v2-comp {
  background: var(--v2-bg);
  padding: 80px 24px;
}
.v2-comp__header {
  max-width: 600px;
  margin: 0 auto 48px;
  text-align: center;
}
.v2-comp__label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--v2-accent);
  margin-bottom: 12px;
}
.v2-comp__h2 {
  font-family: var(--v2-display);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--v2-text);
  margin: 0 0 12px;
}
.v2-comp__sub {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--v2-text);
  opacity: 0.55;
  margin: 0;
}
.v2-comp__table-wrap {
  max-width: 800px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.v2-comp__table {
  width: 100%;
  border-collapse: collapse;
}
.v2-comp__table--multi { max-width: 960px; }
.v2-comp__th {
  padding: 16px 20px;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
  border-bottom: 2px solid var(--v2-border);
  color: var(--v2-text);
}
.v2-comp__th--feature {
  text-align: left;
  width: 40%;
}
.v2-comp__th--brand {
  background: color-mix(in srgb, var(--v2-accent) 8%, transparent);
  color: var(--v2-accent);
  border-radius: 12px 12px 0 0;
  padding-top: 14px;
}
.v2-comp__badge {
  display: block;
  width: fit-content;
  margin: 0 auto 8px;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  background: var(--v2-accent);
  color: #fff;
  padding: 2px 10px;
  border-radius: 999px;
}
.v2-comp__brand-name {
  display: block;
}
.v2-comp__row {
  transition: background 0.15s;
}
.v2-comp__row:hover {
  background: color-mix(in srgb, var(--v2-text) 3%, transparent);
}
.v2-comp__td {
  padding: 14px 20px;
  text-align: center;
  border-bottom: 1px solid var(--v2-border);
  font-size: 0.875rem;
  color: var(--v2-text);
}
.v2-comp__td--feature {
  text-align: left;
  font-weight: 500;
}
.v2-comp__td--brand {
  background: color-mix(in srgb, var(--v2-accent) 4%, transparent);
}
.v2-comp__icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}
.v2-comp__icon--yes { color: var(--v2-accent); }
.v2-comp__icon--no  { color: var(--v2-text); opacity: 0.2; }
.v2-comp__text-val  { font-size: 0.8125rem; opacity: 0.7; }

@media (max-width: 640px) {
  .v2-comp__th, .v2-comp__td { padding: 10px 12px; font-size: 0.8125rem; }
  .v2-comp__th--feature, .v2-comp__td--feature { width: 35%; }
  .v2-comp__badge { font-size: 0.5625rem; padding: 1px 8px; margin-bottom: 6px; }
}


/* cta-band */
.v2-ctaband--plain  { padding: 96px 40px; background: var(--v2-bg); }
.v2-ctaband--card,
.v2-ctaband--filled { padding: 40px 40px; background: var(--v2-bg); }

.v2-ctaband__inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center;
  justify-content: space-between; gap: 40px;
  flex-wrap: wrap;
}
.v2-ctaband--card .v2-ctaband__inner {
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 16px);
  padding: 40px 48px;
}
.v2-ctaband--filled .v2-ctaband__inner {
  background: var(--v2-accent);
  border-radius: var(--v2-radius, 16px);
  padding: 40px 48px;
}
.v2-ctaband--filled .v2-ctaband__heading { color: #fff; }
.v2-ctaband--filled .v2-ctaband__sub     { color: rgba(255,255,255,0.75); }
.v2-ctaband--filled .v2-ctaband__btn-primary {
  background: #fff; color: var(--v2-accent);
}
.v2-ctaband--filled .v2-ctaband__btn-ghost {
  color: #fff; border-color: rgba(255,255,255,0.45);
}
.v2-ctaband--filled .v2-ctaband__btn-ghost:hover {
  background: rgba(255,255,255,0.12); border-color: #fff;
}

.v2-ctaband__text { flex: 1; min-width: 0; }
.v2-ctaband__badge {
  display: inline-flex; align-items: center;
  font-size: 0.75rem; font-weight: 700;
  color: var(--v2-accent);
  background: color-mix(in srgb, var(--v2-accent) 12%, transparent);
  padding: 4px 12px; border-radius: 999px;
  letter-spacing: 0.02em; margin-bottom: 12px;
}
.v2-ctaband--filled .v2-ctaband__badge {
  background: rgba(255,255,255,0.18); color: #fff;
}
.v2-ctaband__heading {
  font-family: var(--v2-display);
  font-size: clamp(1.35rem, 2.5vw, 1.875rem);
  font-weight: 800; letter-spacing: -0.025em;
  color: var(--v2-text); margin: 0;
}
.v2-ctaband__heading--sm { font-size: clamp(1.05rem, 2vw, 1.375rem); }
.v2-ctaband__heading--md { font-size: clamp(1.35rem, 2.8vw, 1.875rem); }
.v2-ctaband__heading--lg { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.v2-ctaband__heading--xl { font-size: clamp(2.25rem, 4.5vw, 3.25rem); }
.v2-ctaband__sub {
  font-size: 0.9375rem; color: var(--v2-text);
  opacity: 0.55; margin: 8px 0 0; line-height: 1.55;
}
.v2-ctaband__actions {
  display: flex; align-items: center; gap: 12px; flex-shrink: 0; flex-wrap: wrap;
}
.v2-ctaband__btn-primary {
  display: inline-flex; align-items: center;
  padding: 11px 24px; font-size: 0.9rem; font-weight: 600;
  background: var(--v2-accent); color: #fff;
  border-radius: var(--v2-btn-radius, 8px);
  text-decoration: none; white-space: nowrap;
  transition: transform 0.18s, box-shadow 0.18s;
}
.v2-ctaband__btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--v2-accent) 30%, transparent);
}
.v2-ctaband__btn-ghost {
  display: inline-flex; align-items: center;
  padding: 10px 22px; font-size: 0.9rem; font-weight: 600;
  background: transparent; color: var(--v2-text);
  border: 1.5px solid var(--v2-border);
  border-radius: var(--v2-btn-radius, 8px);
  text-decoration: none; white-space: nowrap;
  transition: border-color 0.18s, color 0.18s;
}
.v2-ctaband__btn-ghost:hover { border-color: var(--v2-accent); color: var(--v2-accent); }

@media (max-width: 640px) {
  .v2-ctaband--plain,
  .v2-ctaband--card,
  .v2-ctaband--filled { padding-inline: 20px; }
  .v2-ctaband--card .v2-ctaband__inner,
  .v2-ctaband--filled .v2-ctaband__inner { padding: 28px 24px; }
  .v2-ctaband__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   contact-form — enquiry form section
   ═══════════════════════════════════════════════════════════════════════ */

.v2-form { padding: 96px 40px; background: var(--v2-bg); }
.v2-form__inner { max-width: 1280px; margin: 0 auto; }

/* ── Section header (centered/minimal) ───────────────────────────────── */
.v2-form__header {
  display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px;
}
.v2-form--center .v2-form__header { align-items: center; text-align: center; }
.v2-form--left   .v2-form__header { align-items: flex-start; text-align: left; }

.v2-form__badge {
  display: inline-flex; font-size: 0.8125rem; font-weight: 600;
  color: var(--v2-accent);
  background: color-mix(in srgb, var(--v2-accent) 12%, transparent);
  padding: 5px 14px; border-radius: 999px; letter-spacing: 0.01em;
}
.v2-form__heading {
  font-family: var(--v2-display);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 800; letter-spacing: -0.03em;
  color: var(--v2-text); margin: 0;
}
.v2-form__subhead {
  font-size: 1.0625rem; line-height: 1.65;
  color: var(--v2-text); opacity: 0.55; margin: 0; max-width: 540px;
}
.v2-form--center .v2-form__subhead { margin-inline: auto; }

/* ── Centered / minimal: form in a constrained column ────────────────── */
.v2-form--centered .v2-form__wrap,
.v2-form--minimal  .v2-form__wrap {
  max-width: 600px; margin-inline: auto;
}

/* ── Split layout ────────────────────────────────────────────────────── */
.v2-form--split .v2-form__inner {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: 80px; align-items: start;
}
.v2-form__lead {
  display: flex; flex-direction: column; gap: 20px;
}
.v2-form__lead .v2-form__heading { margin: 0; }
.v2-form__lead .v2-form__subhead { opacity: 0.55; }

/* Contact details block */
.v2-form__info {
  display: flex; flex-direction: column; gap: 16px; margin-top: 8px;
}
.v2-form__info-item {
  display: flex; align-items: flex-start; gap: 14px;
}
.v2-form__info-icon {
  font-size: var(--v2-icon-size, 1.25rem); color: var(--v2-accent);
  margin-top: 1px; flex-shrink: 0;
}
.v2-form__info-label {
  font-size: 0.8125rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--v2-text); opacity: 0.4;
  margin: 0 0 2px;
}
.v2-form__info-value {
  font-size: 0.9375rem; color: var(--v2-text); margin: 0;
}
/* Auto-linked email and phone values. Inherit the surrounding colour rather
   than taking the accent: a contact block where three of the values are
   suddenly link-coloured reads as a menu, not as details. */
.v2-form__info-link {
  color: inherit; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  transition: border-color 0.15s;
}
.v2-form__info-link:hover {
  border-bottom-color: currentColor;
}

/* Centered and minimal layouts put the details BELOW the form, so they run as
   a horizontal row rather than the vertical stack used in the split lead. */
.v2-form--centered .v2-form__info,
.v2-form--minimal  .v2-form__info {
  flex-direction: row; flex-wrap: wrap;
  gap: 16px 40px; margin-top: 48px;
}
.v2-form--centered.v2-form--center .v2-form__info,
.v2-form--minimal.v2-form--center  .v2-form__info { justify-content: center; }
.v2-form--centered.v2-form--left .v2-form__info,
.v2-form--minimal.v2-form--left  .v2-form__info {
  justify-content: flex-start;
  max-width: 600px; margin-inline: auto;
}

/* ── Form ────────────────────────────────────────────────────────────── */
.v2-form__form {
  display: flex; flex-direction: column; gap: 20px;
}
.v2-form__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}

/* ── Fields ──────────────────────────────────────────────────────────── */
.v2-form__field {
  display: flex; flex-direction: column; gap: 6px;
}
.v2-form__label {
  font-size: 0.875rem; font-weight: 600;
  color: var(--v2-text);
}
.v2-form__optional {
  font-weight: 400; opacity: 0.45;
}
.v2-form__input,
.v2-form__textarea {
  width: 100%; padding: 11px 14px;
  font-size: 0.9375rem; font-family: inherit;
  color: var(--v2-text);
  background: var(--v2-bg-card);
  border: 1.5px solid var(--v2-border);
  border-radius: var(--v2-radius, 10px);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
  resize: vertical;
}
.v2-form__input::placeholder,
.v2-form__textarea::placeholder { color: var(--v2-text); opacity: 0.3; }
.v2-form__input:focus,
.v2-form__textarea:focus {
  border-color: var(--v2-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v2-accent) 18%, transparent);
}

/* ── Submit button ───────────────────────────────────────────────────── */
.v2-form__btn {
  align-self: flex-start;
  padding: 13px 28px;
  font-size: 0.9375rem; font-weight: 700; font-family: inherit;
  border-radius: var(--v2-radius, 10px);
  cursor: pointer; border: 2px solid var(--v2-accent);
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.v2-form__btn--filled {
  background: var(--v2-accent); color: #fff;
}
.v2-form__btn--filled:hover { opacity: 0.88; }

.v2-form__btn--outline {
  background: transparent; color: var(--v2-accent);
}
.v2-form__btn--outline:hover {
  background: color-mix(in srgb, var(--v2-accent) 8%, transparent);
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .v2-form--split .v2-form__inner { grid-template-columns: 1fr; gap: 48px; }
  .v2-form__lead { position: static; }
}
@media (max-width: 640px) {
  .v2-form { padding: 64px 20px; }
  .v2-form__row { grid-template-columns: 1fr; }
  .v2-form__btn { width: 100%; text-align: center; }
  /* Back to a stack on narrow screens — three details side by side wrap into
     an unreadable jumble well before this width. */
  .v2-form--centered .v2-form__info,
  .v2-form--minimal  .v2-form__info { flex-direction: column; gap: 16px; }
}


.v2-ftr { border-top: 1px solid var(--v2-border); padding: 64px 40px 32px; background: var(--v2-bg); }
.v2-ftr__inner { max-width: 1100px; margin: 0 auto; }
.v2-ftr__grid {
  display: grid;
  gap: 56px;
  margin-bottom: 48px;
}
/* Two-column layout (socials toggle OFF): brand takes most of the row,
   secondary nav alongside. */
.v2-ftr__grid--2col { grid-template-columns: 2fr 1fr; }
/* Three-column layout (socials toggle ON): brand + nav + socials. With up to
   nine icons in the socials column, give it slightly more room than the nav
   column so a five-or-more-icon row doesn't wrap awkwardly. */
.v2-ftr__grid--3col { grid-template-columns: 2fr 1fr 1.4fr; }

.v2-ftr__brand { display: flex; flex-direction: column; gap: 16px; }
.v2-ftr__logo {
  display: block;
  height: 32px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
.v2-ftr__wordmark { font-family: var(--v2-display); font-size: 1.1rem; font-weight: 700; color: var(--v2-text); }
.v2-ftr__desc { font-size: 0.9rem; line-height: 1.6; color: var(--v2-text); opacity: 0.5; margin: 0; max-width: 300px; }
.v2-ftr__col-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--v2-text); opacity: 0.4; margin: 0 0 18px; }
.v2-ftr__col-links { display: flex; flex-direction: column; gap: 12px; }
.v2-ftr__col-links a { font-size: 0.875rem; color: var(--v2-text); opacity: 0.65; text-decoration: none; transition: opacity 0.2s; }
.v2-ftr__col-links a:hover { opacity: 1; }

/* Socials column: icon row. Each icon is a 36px hit area with the SVG sized
   18px inside, so the touch target is comfortable but the icon stays small.
   With up to 9 icons possible, flex-wrap lets them spill onto a second row
   on narrower columns rather than overflowing. */
.v2-ftr__socials { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-ftr__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 8px;
  color: var(--v2-text); opacity: 0.65;
  text-decoration: none;
  border: 1px solid var(--v2-border);
  background: transparent;
  transition: opacity 0.2s, color 0.2s, border-color 0.2s, background 0.2s;
}
.v2-ftr__social:hover {
  opacity: 1;
  color: var(--v2-accent);
  border-color: color-mix(in srgb, var(--v2-accent) 40%, var(--v2-border));
  background: color-mix(in srgb, var(--v2-accent) 8%, transparent);
}
.v2-ftr__social svg { width: 18px; height: 18px; display: block; fill: currentColor; }

/* Collapse the socials column entirely when the user has no accounts set in
   Ghost. {{#social_accounts @site}} simply yields nothing in that case, so
   .v2-ftr__socials ends up truly empty (no whitespace text node either, as
   long as we keep the iteration helper inline with no surrounding spaces).
   The :has(:empty) combo collapses the surrounding column so the grid track
   disappears. :has() is supported in all modern browsers (Chromium 105+,
   Safari 15.4+, Firefox 121+); on older browsers the worst case is an empty
   Follow header, a cosmetic degradation rather than a functional break. */
.v2-ftr__col--socials:has(.v2-ftr__socials:empty) { display: none; }

.v2-ftr__newsletter { margin-top: 8px; }
.v2-ftr__nl-heading { font-size: 0.8rem; font-weight: 600; color: var(--v2-text); opacity: 0.7; margin: 0 0 10px; }
.v2-ftr__nl-form { display: flex; gap: 6px; max-width: 280px; }
.v2-ftr__nl-input { flex: 1; padding: 9px 14px; font-size: 0.8125rem; border: 1px solid var(--v2-border); border-radius: 8px; background: transparent; color: var(--v2-text); font-family: inherit; outline: none; }
.v2-ftr__nl-input:focus { border-color: var(--v2-accent); }
.v2-ftr__nl-btn {
  padding: 9px 18px;
  font-size: 0.8125rem; font-weight: 600; font-family: inherit;
  border: var(--v2-btn-border, none);
  border-radius: var(--v2-btn-radius, 8px);
  background: var(--v2-btn-bg, var(--v2-accent));
  color: var(--v2-btn-color, #fff);
  cursor: pointer; white-space: nowrap;
  transition: opacity 0.15s, transform 0.15s;
}
.v2-ftr__nl-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.v2-ftr__bottom { padding-top: 24px; border-top: 1px solid var(--v2-border); }
.v2-ftr__copy { font-size: 0.775rem; color: var(--v2-text); opacity: 0.35; }
@media (max-width: 768px) {
  .v2-ftr { padding: 48px 20px 24px; }
  .v2-ftr__grid--2col,
  .v2-ftr__grid--3col { grid-template-columns: 1fr; gap: 36px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   posts-filter-bar — taxonomy filter chips (real Ghost tag/author links)
   ═══════════════════════════════════════════════════════════════════════ */
.v2-filter { padding: 28px 40px; background: var(--v2-bg); }
.v2-filter__inner { max-width: var(--v2-content-max-width, 1280px); margin: 0 auto; }
.v2-filter__heading {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--v2-text); opacity: 0.45; margin: 0 0 14px;
}
.v2-filter__bar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.v2-filter--center .v2-filter__bar { justify-content: center; }
.v2-filter--center .v2-filter__heading { text-align: center; }

/* Horizontal scroll on small screens instead of wrapping into many rows */
@media (max-width: 600px) {
  .v2-filter { padding: 20px 20px; }
  .v2-filter__bar {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 4px;
  }
  .v2-filter__bar::-webkit-scrollbar { display: none; }
  .v2-filter__chip { flex-shrink: 0; }
}

.v2-filter__chip {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; color: var(--v2-text); white-space: nowrap;
  font-size: 0.9rem; font-weight: 500; line-height: 1;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.v2-filter__count {
  font-size: 0.72rem; font-weight: 600; opacity: 0.5;
}

/* ── Pills ───────────────────────────────────────────────────────────── */
.v2-filter--pills .v2-filter__chip {
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--v2-border); background: var(--v2-bg-card);
}
.v2-filter--pills .v2-filter__chip:hover {
  border-color: color-mix(in srgb, var(--v2-accent) 50%, var(--v2-border));
  color: var(--v2-accent);
}
.v2-filter--pills .v2-filter__chip.is-active,
.v2-filter--pills .v2-filter__chip.nav-current {
  background: var(--v2-accent); color: #fff; border-color: var(--v2-accent);
}
.v2-filter--pills .v2-filter__chip.is-active .v2-filter__count,
.v2-filter--pills .v2-filter__chip.nav-current .v2-filter__count { opacity: 0.8; }

/* ── Underline ───────────────────────────────────────────────────────── */
.v2-filter--underline .v2-filter__chip {
  padding: 8px 2px; border-bottom: 2px solid transparent; opacity: 0.6;
}
.v2-filter--underline .v2-filter__chip:hover { opacity: 1; }
.v2-filter--underline .v2-filter__chip.is-active,
.v2-filter--underline .v2-filter__chip.nav-current {
  opacity: 1; color: var(--v2-accent); border-bottom-color: var(--v2-accent);
}

/* ── Plain text ──────────────────────────────────────────────────────── */
.v2-filter--text .v2-filter__bar { gap: 20px; }
.v2-filter--text .v2-filter__chip { opacity: 0.55; padding: 4px 0; }
.v2-filter--text .v2-filter__chip:hover { opacity: 1; }
.v2-filter--text .v2-filter__chip.is-active,
.v2-filter--text .v2-filter__chip.nav-current { opacity: 1; color: var(--v2-accent); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════════════
   post-header — all variants
   ═══════════════════════════════════════════════════════════════════════ */
.v2-ph { background: var(--v2-bg); }
.v2-ph__inner { max-width: var(--v2-content-max-width, 1080px); margin: 0 auto; padding: 40px 40px 40px; }
.v2-ph__inner--centered { text-align: center; display: flex; flex-direction: column; align-items: center; }

.v2-ph__tag {
  display: inline-flex; font-size: 0.75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--v2-accent); text-decoration: none; margin-bottom: 16px;
}
.v2-ph__tag:hover { opacity: 0.75; }

.v2-ph__title {
  font-family: var(--v2-display);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.1;
  color: var(--v2-text); margin: 0 0 20px; max-width: 800px;
}
.v2-ph__inner--centered .v2-ph__title { margin-inline: auto; }

.v2-ph__excerpt {
  font-size: 1.125rem; line-height: 1.65;
  color: var(--v2-text); opacity: 0.6;
  margin: 0 0 24px; max-width: 640px;
}
.v2-ph__inner--centered .v2-ph__excerpt { margin-inline: auto; }

.v2-ph__meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  font-size: 0.875rem; color: var(--v2-text); opacity: 0.5;
}
.v2-ph__inner--centered .v2-ph__meta { justify-content: center; }
.v2-ph__author {
  display: flex; align-items: center; gap: 8px;
  color: inherit; text-decoration: none; opacity: 0.7; font-weight: 500;
}
.v2-ph__author:hover { opacity: 1; }
.v2-ph__author-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.v2-ph__author-placeholder {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: color-mix(in srgb, var(--v2-accent) 20%, transparent);
}
.v2-ph__date, .v2-ph__reading { font-size: 0.875rem; }

/* ── Cover image (shared) ──────────────────────────────────────────── */
.v2-ph__cover-img {
  display: block; width: 100%; height: auto; max-height: 520px;
  object-fit: cover;
}
/* Shared placeholder for preview */
.v2-ph__cover-placeholder {
  width: 100%; height: 100%;
  min-height: 300px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--v2-accent) 12%, var(--v2-bg-card)),
    color-mix(in srgb, var(--v2-accent) 5%, var(--v2-bg-card)));
  border: 1px dashed var(--v2-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--v2-text);
}

/* ── Variant: Centered ─────────────────────────────────────────────── */
.v2-ph--centered .v2-ph__cover-wrap {
  max-width: var(--v2-content-max-width, 1080px); margin: 0 auto;
  padding: 0 40px 40px; overflow: hidden;
}
.v2-ph--centered .v2-ph__cover-wrap .v2-ph__cover-img { border-radius: var(--v2-radius, 12px); }
.v2-ph--centered .v2-ph__cover-wrap .v2-ph__cover-placeholder { border-radius: var(--v2-radius, 12px); min-height: 380px; }

/* ── Variant: Left / Side-by-side ─────────────────────────────────── */
.v2-ph--left .v2-ph__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 40px 40px;
}
.v2-ph--left .v2-ph__cover-side { overflow: hidden; border-radius: var(--v2-radius, 12px); }
.v2-ph--left .v2-ph__cover-side .v2-ph__cover-img { border-radius: var(--v2-radius, 12px); max-height: 460px; }
.v2-ph--left .v2-ph__cover-side .v2-ph__cover-placeholder { border-radius: var(--v2-radius, 12px); min-height: 360px; }

/* ── Variant: Cover Overlay ────────────────────────────────────────── */
.v2-ph--overlay .v2-ph__hero-wrap {
  position: relative; min-height: 380px; overflow: hidden;
  display: flex; align-items: flex-end;
}
.v2-ph--overlay .v2-ph__hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
.v2-ph__hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 55%, transparent 100%);
}
.v2-ph__hero-gradient--preview {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--v2-accent) 60%, #0a0a14),
    color-mix(in srgb, var(--v2-accent) 25%, #0a0a14));
}
.v2-ph--overlay .v2-ph__hero-content {
  position: relative; z-index: 1;
  max-width: var(--v2-content-max-width, 1080px);
  margin: 0 auto; padding: 48px 40px; width: 100%;
}
.v2-ph--overlay .v2-ph__title { color: #fff; max-width: 720px; }
.v2-ph--overlay .v2-ph__excerpt { color: rgba(255,255,255,0.7); }
.v2-ph--overlay .v2-ph__meta { color: rgba(255,255,255,0.6); opacity: 1; }
.v2-ph--overlay .v2-ph__author { color: rgba(255,255,255,0.75); }
.v2-ph--overlay .v2-ph__tag {
  color: #fff; background: rgba(255,255,255,0.18);
  padding: 4px 12px; border-radius: 999px;
}

/* ── Variant: Cover Above ──────────────────────────────────────────── */
.v2-ph--above .v2-ph__cover-full {
  width: 100%; overflow: hidden; max-height: 460px;
}
.v2-ph--above .v2-ph__cover-full .v2-ph__cover-img { max-height: 460px; border-radius: 0; }
.v2-ph--above .v2-ph__cover-full .v2-ph__cover-placeholder { min-height: 360px; border-radius: 0; border: none; }
.v2-ph--above .v2-ph__inner { padding-top: 48px; }

/* ── Variant: Magazine ─────────────────────────────────────────────── */
.v2-ph--magazine .v2-ph__mag-wrap {
  display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 480px;
}
.v2-ph--magazine .v2-ph__mag-text {
  padding: 56px 48px 56px 40px; display: flex; flex-direction: column;
  justify-content: flex-end; background: var(--v2-bg);
  border-right: 1px solid var(--v2-border);
}
.v2-ph--magazine .v2-ph__title { font-size: clamp(2.2rem, 4.5vw, 4rem); max-width: 100%; }
.v2-ph--magazine .v2-ph__mag-image { overflow: hidden; position: relative; }
.v2-ph--magazine .v2-ph__mag-image .v2-ph__cover-img { height: 100%; object-fit: cover; }
.v2-ph--magazine .v2-ph__mag-image .v2-ph__cover-placeholder {
  height: 100%; min-height: 480px; border-radius: 0; border: none; border-left: 1px dashed var(--v2-border);
  background: color-mix(in srgb, var(--v2-accent) 8%, var(--v2-bg-card));
}
.v2-ph--magazine .v2-ph__tag {
  background: color-mix(in srgb, var(--v2-accent) 12%, transparent);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 20px;
}

@media (max-width: 900px) {
  .v2-ph--left .v2-ph__inner { grid-template-columns: 1fr; gap: 32px; }
  .v2-ph--magazine .v2-ph__mag-wrap { grid-template-columns: 1fr; }
  .v2-ph--magazine .v2-ph__mag-image { display: none; }
  .v2-ph__inner { padding: 40px 20px 32px; }
  .v2-ph--centered .v2-ph__cover-wrap { padding: 0 20px 32px; }
  .v2-ph--overlay .v2-ph__hero-content { padding: 32px 20px; }
  .v2-ph--overlay .v2-ph__hero-wrap { min-height: 280px; }
  .v2-ph--above .v2-ph__inner { padding: 32px 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   article-body
   ═══════════════════════════════════════════════════════════════════════ */

.v2-article { background: var(--v2-bg); }
.v2-article__body { margin: 0 auto; padding: 24px 40px 80px; font-family: var(--v2-body); color: var(--v2-text); line-height: 1.8; }

.v2-article--narrow  .v2-article__body { max-width: 680px; }
.v2-article--default .v2-article__body { max-width: 760px; }
.v2-article--wide    .v2-article__body { max-width: 900px; }

.v2-article--justify .v2-article__body p,
.v2-article--justify .v2-article__body li {
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

/* Sidebar layout: both columns get their own top padding via article__body.
   The TOC column also needs matching top padding so it aligns with the text. */
.v2-article--has-sidebar {
  display: grid; gap: 0 60px; align-items: start;
  max-width: 1200px; margin: 0 auto; padding: 0 40px;
}
.v2-article--has-sidebar .v2-article__body { padding-left: 0; padding-right: 0; }
.v2-toc--aside,
.v2-toc--aside-pinned { margin-top: 24px; }
.v2-article--sidebar-right { grid-template-columns: 1fr 260px; }
.v2-article--sidebar-left  { grid-template-columns: 260px 1fr; }
.v2-article--has-sidebar .v2-article__body { max-width: 100%; margin: 0; }
.v2-article--sidebar-right .v2-toc--aside { grid-column: 2; grid-row: 1; }
.v2-article--sidebar-right .v2-article__body  { grid-column: 1; grid-row: 1; }
.v2-article--sidebar-left  .v2-toc--aside  { grid-column: 1; grid-row: 1; }
.v2-article--sidebar-left  .v2-article__body  { grid-column: 2; grid-row: 1; }
/* In sidebar mode the article body fills its grid column — width variants are not needed */
/* Collapse grid below 900px — sidebar stacks above article on mobile */
@media (max-width: 900px) {
  .v2-article--has-sidebar { display: block; padding: 0; }
  .v2-article--has-sidebar .v2-article__body { padding-left: 40px; padding-right: 40px; }
  .v2-toc--aside { position: static !important; max-height: none !important; margin-bottom: 32px; margin-left: 40px; margin-right: 40px; }
}
@media (max-width: 600px) {
  .v2-article--has-sidebar .v2-article__body { padding-left: 20px; padding-right: 20px; }
  .v2-toc--aside { margin-left: 20px; margin-right: 20px; }
}

/* ── Typography ───────────────────────────────────────────────────── */
.v2-article__body p { margin: 0 0 1.5em; }
.v2-article__body h2, .v2-article__body h3, .v2-article__body h4 {
  font-family: var(--v2-display); font-weight: 700; letter-spacing: -0.02em;
  color: var(--v2-text); margin: 2.5em 0 0.75em; line-height: 1.25;
}
/* The first heading in {{content}} (e.g. "Summary") shouldn't carry its
   own 2.5em top margin on top of .v2-article__body's own padding-top --
   that stacked spacing pushed the article noticeably lower than the TOC
   sidebar, which only has its own (smaller) margin-top with nothing else
   adding to it. Zeroing this makes both columns start flush at the same
   height, governed purely by .v2-article__body's padding-top. */
.v2-article__body > h2:first-child,
.v2-article__body > h3:first-child,
.v2-article__body > h4:first-child {
  margin-top: 0;
}
.v2-article__body h2 { font-size: 1.65em; }
.v2-article__body h3 { font-size: 1.3em; }
.v2-article__body h4 { font-size: 1.1em; }
.v2-article__body a  { color: var(--v2-accent); text-decoration: underline; text-underline-offset: 3px; }
.v2-article__body a:hover { opacity: 0.8; }
.v2-article__body strong { font-weight: 700; }
.v2-article__body em { font-style: italic; }
.v2-article__body hr { border: none; border-top: 2px solid var(--v2-border); margin: 3em 0; }
.v2-article__body blockquote {
  border-left: 3px solid var(--v2-accent); padding: 4px 0 4px 24px;
  margin: 2em 0; font-style: italic; color: var(--v2-text); opacity: 0.7;
}
.v2-article__body ul, .v2-article__body ol { padding-left: 1.5em; margin: 0 0 1.5em; }
.v2-article__body li { margin-bottom: 0.5em; }
.v2-article__body img { width: 100%; height: auto; display: block; border-radius: var(--v2-radius, 10px); margin: 2em 0; }
.v2-article__body pre {
  background: var(--v2-bg-card); border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 8px); padding: 20px; overflow-x: auto;
  font-size: 0.875em; line-height: 1.6; margin: 2em 0;
}
.v2-article__body code { font-family: 'JetBrains Mono', 'Fira Code', Consolas, monospace; font-size: 0.875em; }
.v2-article__body :not(pre) > code { background: var(--v2-bg-card); border: 1px solid var(--v2-border); border-radius: 5px; padding: 2px 6px; }

/* Ghost Koenig embed cards — make videos fill container width.
   Ghost's own docs are explicit that .kg-embed-card ships with NO default
   sizing CSS from Ghost itself (unlike bookmark/gallery/audio/video cards,
   which get auto-injected styles via cards.min.css) -- themes are required
   to supply this, and Ghost's real markup is exactly:
     <figure class="kg-card kg-embed-card"><iframe ...></iframe></figure>
   -- no extra wrapper div. Ghost's own recommended pattern is the classic
   "fluid-width-video-wrapper" trick: the CONTAINER gets padding-top as a
   percentage to create the aspect-ratio box via padding, and the iframe is
   taken OUT of normal flow via position:absolute + inset 0 to fill it.
   Since Ghost provides no extra wrapper element, .kg-embed-card itself
   plays that role here. This is deliberately NOT the modern aspect-ratio
   property -- aspect-ratio interacts unreliably with the raw HTML
   width="" height="" attributes that Ghost's oEmbed-generated YouTube/
   Vimeo iframe ships with (computed from the embed's original pixel size
   at insertion time), which was producing a squashed iframe despite
   width:100% !important. Taking the iframe out of flow entirely sidesteps
   that interaction completely, matching Ghost's own reference implementation. */
.v2-article__body .kg-embed-card {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
  margin: 2em 0;
  border-radius: var(--v2-radius, 10px);
}
.v2-article__body .kg-embed-card iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0;
}
.v2-article__body .kg-video-card {
  margin: 2em 0;
}
.v2-article__body .kg-video-card video,
.v2-article__body .kg-video-card .kg-video-container {
  width: 100%;
}
.v2-article__body .kg-video-card video {
  display: block;
  border-radius: var(--v2-radius, 10px);
}
/* Ghost audio card */
.v2-article__body .kg-audio-card {
  margin: 2em 0;
  width: 100%;
}

/* Ghost bookmark card -- the rich link-preview card Ghost generates when a
   plain URL is pasted into the editor (e.g. a YouTube link, an article link).
   This is DIFFERENT from .kg-embed-card -- it has its own markup
   (kg-bookmark-container > kg-bookmark-content + kg-bookmark-thumbnail) and
   without explicit rules it was falling back to the generic
   '.v2-article__body img' width:100% rule above, which stretched the
   thumbnail to the full card width with no height constraint -- producing
   the "wide but squashed" look. Modelled on Ghost's own Casper reference
   implementation, restyled with this theme's tokens. */
.v2-article__body .kg-bookmark-card {
  width: 100%;
  position: relative;
  margin: 2em 0;
}
.v2-article__body .kg-bookmark-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  color: currentColor;
  font-family: inherit;
  text-decoration: none;
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 10px);
  overflow: hidden;
  background: var(--v2-bg-card);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.v2-article__body .kg-bookmark-container:hover {
  text-decoration: none;
  border-color: var(--v2-accent);
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}
.v2-article__body .kg-bookmark-content {
  flex-basis: 0;
  flex-grow: 999;
  min-width: 50%;
  padding: 20px;
  order: 1;
}
.v2-article__body .kg-bookmark-title {
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--v2-text);
  margin: 0;
}
.v2-article__body .kg-bookmark-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0.5em 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--v2-text);
  opacity: 0.6;
}
.v2-article__body .kg-bookmark-metadata {
  display: flex;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0.75em;
  font-size: 0.8125rem;
  color: var(--v2-text);
  opacity: 0.55;
}
.v2-article__body .kg-bookmark-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: text-bottom;
  margin-right: 0.5em;
  border-radius: 3px;
  flex-shrink: 0;
}
.v2-article__body .kg-bookmark-publisher::before {
  content: '•';
  margin: 0 0.5em;
}
/* Thumbnail column -- the part that was rendering wide+short. flex-basis
   gives it a real target width, and the nested img gets object-fit:cover
   with a fixed min-height instead of inheriting the generic
   '.v2-article__body img' width:100%/height:auto rule. */
.v2-article__body .kg-bookmark-thumbnail {
  display: flex;
  flex-basis: 24rem;
  flex-grow: 1;
  position: relative;
  min-height: 160px;
}
.v2-article__body .kg-bookmark-thumbnail img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  position: absolute;
  inset: 0;
}
@media (max-width: 600px) {
  .v2-article__body .kg-bookmark-container { flex-direction: column; }
  .v2-article__body .kg-bookmark-thumbnail { flex-basis: auto; height: 200px; min-height: 0; }
}

.v2-article__body .kg-width-wide  { max-width: calc(100% + 160px); margin-left: -80px; margin-right: -80px; }
.v2-article__body .kg-width-full  { max-width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }
.v2-article__body h2[id], .v2-article__body h3[id], .v2-article__body h4[id] {
  scroll-margin-top: calc(var(--v2-header-h, 0px) + 20px);
}

/* ── Magazine variant ─────────────────────────────────────────────── */
.v2-article--magazine .v2-article__body h2 { border-left: 4px solid var(--v2-accent); padding-left: 16px; }
.v2-article--magazine .v2-article__body blockquote {
  background: color-mix(in srgb, var(--v2-accent) 6%, var(--v2-bg-card));
  border-left: 4px solid var(--v2-accent); border-radius: 0 var(--v2-radius, 8px) var(--v2-radius, 8px) 0;
  padding: 16px 20px; opacity: 1;
}

/* ── Minimal variant ──────────────────────────────────────────────── */
.v2-article--minimal .v2-article__body { line-height: 1.7; }
.v2-article--minimal .v2-article__body h2,
.v2-article--minimal .v2-article__body h3 { font-weight: 600; letter-spacing: 0; }
.v2-article--minimal .v2-article__body blockquote {
  border-left: none; padding: 0; margin: 1.5em 0;
  font-size: 1.25em; font-style: normal; font-weight: 600; opacity: 0.65; text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS  (BrightThemes pattern)
   ═══════════════════════════════════════════════════════════════════════ */

/* Hidden until JS adds is-rendered (tocbot found enough headings).
   Content hidden until is-active (open state). */
.v2-toc { display: none; font-family: var(--v2-body); font-size: 1rem; }
.v2-toc.is-rendered { display: block; }

/* ── Header ───────────────────────────────────────────────────────── */
.v2-toc__header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.v2-toc.is-active .v2-toc__header { border-bottom-color: var(--v2-border); }
.v2-toc__icon { display: flex; align-items: center; color: var(--v2-accent); opacity: 0.8; flex-shrink: 0; }
.v2-toc__label { flex: 1; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: var(--v2-text); opacity: 0.45; }
.v2-toc__toggle { display: flex; align-items: center; background: none; border: none; cursor: pointer; color: var(--v2-text); opacity: 0.35; padding: 0; transition: opacity 0.15s, transform 0.2s; }
.v2-toc__toggle:hover { opacity: 0.6; }
.v2-toc.is-active .v2-toc__toggle { transform: rotate(180deg); opacity: 0.6; }

/* ── Content ──────────────────────────────────────────────────────── */
.v2-toc__content { display: none; padding: 8px 16px 14px; max-height: 65vh; overflow-y: auto; scrollbar-width: thin; }
.v2-toc.is-active .v2-toc__content { display: block; }

/* ── Tocbot list ──────────────────────────────────────────────────── */
.v2-toc .toc-list { list-style: none; padding: 0; margin: 0; }
.v2-toc .toc-list .toc-list { padding-left: 10px; border-left: 1px solid var(--v2-border); margin: 2px 0 2px 4px; }
.v2-toc .toc-list-item { line-height: 1.2; }
.v2-toc .toc-link {
  display: block; font-size: 0.9375rem; line-height: 1.5;
  color: var(--v2-text); opacity: 0.55; text-decoration: none;
  padding: 4px 0;
  transition: opacity 0.15s, color 0.15s;
}
.v2-toc .toc-list .toc-list .toc-link { font-size: 0.875rem; opacity: 0.4; }
.v2-toc .toc-link:hover { opacity: 0.85; }
.v2-toc .is-active-link { opacity: 1; color: var(--v2-accent); font-weight: 600; }

/* ── Theme: card (default) ────────────────────────────────────────── */
.v2-toc { background: var(--v2-bg-card); border: 1px solid var(--v2-border); }

/* ── Theme: plain ─────────────────────────────────────────────────── */
.v2-toc--plain { background: transparent; border: none; }
.v2-toc--plain .v2-toc__label { opacity: 0.3; }
.v2-toc--plain .v2-toc__header { border-bottom-color: var(--v2-border) !important; }

/* ── Theme: accent ────────────────────────────────────────────────── */
.v2-toc--accent { background: color-mix(in srgb, var(--v2-accent) 5%, var(--v2-bg-card)); border: none; }
.v2-toc--accent .v2-toc__header { border-left: 3px solid var(--v2-accent); padding-left: 13px; }
.v2-toc--accent.is-active .v2-toc__header { border-bottom-color: color-mix(in srgb, var(--v2-accent) 25%, transparent); }
.v2-toc--accent .v2-toc__content { border-left: 3px solid color-mix(in srgb, var(--v2-accent) 25%, transparent); padding-left: 13px; }
.v2-toc--accent .v2-toc__icon { opacity: 1; }
.v2-toc--accent .v2-toc__label { color: var(--v2-accent); opacity: 0.8; }

/* ── Inline: full-width above article ─────────────────────────────── */
.v2-toc:not(.v2-toc--aside) {
  max-width: 760px; margin: 0 auto 32px;
}
.v2-article--narrow  .v2-toc:not(.v2-toc--aside) { max-width: 680px; }
.v2-article--wide    .v2-toc:not(.v2-toc--aside) { max-width: 900px; }

/* ── Sidebar sticky: follows scroll ──────────────────────────────── */
.v2-toc--aside {
  align-self: start;
  position: sticky;
  top: calc(var(--v2-header-h, 0px) + 24px);
  max-height: calc(100vh - var(--v2-header-h, 0px) - 48px);
  overflow-y: auto;
}
.v2-toc--aside .v2-toc__content { max-height: none; }

/* ── Sidebar pinned: stays beside first paragraph ─────────────────── */
/* No sticky — TOC sits statically at the top of its column.
   The article scrolls past it freely. Editorial feel. */
.v2-toc--aside-pinned {
  position: static;
  align-self: start;
}

/* Responsive */
@media (max-width: 768px) {
  .v2-article__body { padding: 20px 20px 56px; }
  .v2-toc--aside, .v2-toc--aside-pinned { margin-top: 40px; }
  .v2-article__body .kg-width-wide { max-width: 100%; margin-left: 0; margin-right: 0; }
}


/* ═══════════════════════════════════════════════════════════════════════
   author-bio — all variants
   ═══════════════════════════════════════════════════════════════════════ */
.v2-bio { padding: 0 40px 64px; background: var(--v2-bg); }
.v2-bio__inner { max-width: 760px; margin: 0 auto; }
.v2-bio__avatar {
  width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0; object-fit: cover;
  display: block;
}
.v2-bio__avatar--initials {
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--v2-accent) 15%, transparent);
  color: var(--v2-accent); font-weight: 800; font-size: 1.25rem;
}
.v2-bio__label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--v2-text); opacity: 0.4;
  margin: 0 0 4px;
}
.v2-bio__name {
  display: block; font-size: 1rem; font-weight: 700;
  color: var(--v2-text); text-decoration: none; margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.v2-bio__name:hover { color: var(--v2-accent); }
.v2-bio__text {
  font-size: 0.9rem; line-height: 1.65;
  color: var(--v2-text); opacity: 0.6; margin: 0 0 10px;
}
.v2-bio__link {
  font-size: 0.875rem; font-weight: 600;
  color: var(--v2-accent); text-decoration: none;
}
.v2-bio__link:hover { opacity: 0.75; }
.v2-bio__postcount {
  font-size: 0.8rem; font-weight: 600;
  color: var(--v2-text); opacity: 0.35;
  margin: 6px 0 0;
}

/* ── Variant: Card ─────────────────────────────────────────────────── */
.v2-bio--card .v2-bio__inner {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 14px);
  padding: 28px;
}
.v2-bio--card .v2-bio__content { flex: 1; }

/* ── Variant: Inline ───────────────────────────────────────────────── */
.v2-bio--inline .v2-bio__inner {
  display: flex; gap: 20px; align-items: flex-start;
  padding-top: 32px;
  border-top: 1px solid var(--v2-border);
}
.v2-bio--inline .v2-bio__content { flex: 1; }

/* ── Variant: Large ────────────────────────────────────────────────── */
.v2-bio--large .v2-bio__inner {
  display: flex; gap: 28px; align-items: flex-start;
  background: var(--v2-bg-card);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius, 14px);
  padding: 36px;
}
.v2-bio--large .v2-bio__avatar {
  width: 88px; height: 88px; font-size: 1.8rem;
}
.v2-bio--large .v2-bio__avatar--initials { font-size: 1.8rem; }
.v2-bio--large .v2-bio__content { flex: 1; }
.v2-bio--large .v2-bio__name { font-size: 1.2rem; margin-bottom: 6px; }
.v2-bio--large .v2-bio__text { font-size: 0.9625rem; opacity: 0.65; }

/* ── Variant: Stacked (centred) ────────────────────────────────────── */
.v2-bio--stacked .v2-bio__inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: 40px;
  border-top: 1px solid var(--v2-border);
}
.v2-bio--stacked .v2-bio__avatar { width: 72px; height: 72px; margin-bottom: 16px; }
.v2-bio--stacked .v2-bio__avatar--initials { font-size: 1.5rem; }
.v2-bio--stacked .v2-bio__label { display: none; }
.v2-bio--stacked .v2-bio__name { font-size: 1.1rem; }
.v2-bio--stacked .v2-bio__text { max-width: 520px; }
.v2-bio--stacked .v2-bio__footer { display: flex; gap: 16px; align-items: center; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
  .v2-bio { padding: 0 20px 48px; }
  .v2-bio--large .v2-bio__inner { flex-direction: column; }
}



/* ── Global Shape & spacing overrides (Tier 1) ─────────────────────
   See globalShapeOverridesCss() in palette.ts for rationale. */
.v2-hero-grad__btn-primary, .v2-hero-ct__btn-primary, .v2-hero-vt__btn-primary, .v2-hero-hz__btn-primary, .v2-hdr__cta, .v2-cta__btn {
  background: var(--v2-btn-bg, var(--v2-accent)) !important;
  color: var(--v2-btn-color, #fff) !important;
  border: var(--v2-btn-border, none) !important;
  border-radius: var(--v2-btn-radius, 8px) !important;
}
.v2-hero-grad__btn-ghost, .v2-hero-ct__btn-outline, .v2-hero-vt__btn-outline, .v2-hero-hz__btn-outline, .v2-hero-grad__btn-secondary, .v2-hdr__cta-outline {
  border-radius: var(--v2-btn-radius, 8px) !important;
}

/* ── Equal-width button pairs ──────────────────────────────────────
   A primary and secondary CTA side by side look accidental when their widths
   are driven by label length -- "Get started" next to "See how it works" reads
   as two unrelated controls rather than a considered pair. Matching both to
   the wider one fixes that.

   Every module wraps its CTAs in an element named <something>__actions (the
   convention holds across all 59 occurrences), so one attribute selector
   covers the lot.

   inline-grid + grid-auto-columns:1fr is what does the work: the container
   shrink-wraps to its content, and 1fr makes both tracks equal to the wider
   item. flex cannot express this -- flex:1 would stretch the pair to fill the
   whole row instead of matching each other.

   Being inline-level also preserves alignment for free. The parent text column
   already centres or left-aligns its children via align-items, and an
   inline-grid child obeys that exactly as the previous flex container did.

   Scoped deliberately:
     - exactly two children, so single CTAs and three-button rows are untouched
     - headers and navbars excluded; their __actions holds a utility cluster
       (sign-in link, CTA, burger) rather than a matched pair */
[class*="__actions"]:not([class*="v2-hdr"]):not([class*="v2-nb"]):has(> :nth-child(2)):not(:has(> :nth-child(3))) {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: stretch;
}
/* Modules stack their CTAs on narrow screens via flex-direction, which grid
   ignores. Restate the intent so stacked buttons still match each other. */
@media (max-width: 768px) {
  [class*="__actions"]:not([class*="v2-hdr"]):not([class*="v2-nb"]):has(> :nth-child(2)):not(:has(> :nth-child(3))) {
    grid-auto-flow: row;
  }
}
/* The buttons themselves must fill their track rather than shrink-wrap. */
[class*="__actions"]:not([class*="v2-hdr"]):not([class*="v2-nb"]):has(> :nth-child(2)):not(:has(> :nth-child(3))) > * {
  width: 100%;
  justify-content: center;
  text-align: center;
}
.v2-posts__card {
  border-radius: var(--v2-radius, 12px) !important;
}
.v2-posts__img, .v2-post__image, .v2-page__image, .v2-hero-hz__img, .v2-hero-hz__img-placeholder {
  border-radius: var(--v2-image-radius, var(--v2-radius, 12px)) !important;
  overflow: hidden;
}
.v2-posts__card {
  box-shadow: var(--v2-shadow, none) !important;
}
.v2-posts__card:hover {
  box-shadow: var(--v2-shadow, none) !important;
}
.v2-hdr__inner, .v2-hero-grad__inner, .v2-hero-grad__split-row, .v2-hero-hz__inner, .v2-hero-ct__content, .v2-hero-vt__content, .v2-hero-dk__inner, .v2-hero-st__inner, .v2-hero-ss__inner, .v2-hero-ol__inner, .v2-hero-fc__inner, .v2-hero-m__inner, .v2-bento__inner, .v2-fcards__inner, .v2-fgrid__inner, .v2-fsplit__inner, .v2-fsteps__inner, .v2-falt__inner, .v2-showcase__inner, .v2-team__inner, .v2-faq__inner, .v2-pricing__inner, .v2-cgrid__inner, .v2-steps__inner, .v2-logos__inner, .v2-stats__inner, .v2-tfeat__inner, .v2-tgrid__inner, .v2-cta__inner, .v2-cta-band__inner, .v2-cta-cert__inner, .v2-cta-nl__inner, .v2-cta-stmt__inner, .v2-cta-img__inner, .v2-cta-proof__inner, .v2-media__inner, .v2-contact__inner, .v2-video__inner, .v2-mapmod__inner, .v2-posts__inner, .v2-ftr__inner, .v2-archive__inner, .v2-custom__inner {
  /* margin:0 auto keeps the constrained inner centered when the container
     setting is narrower than the section's full bleed. The !important is
     defensive against each module's own __inner having a hardcoded value. */
  max-width: var(--v2-content-max-width, 1100px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.v2-hdr, .v2-hero-grad, .v2-hero-hz, .v2-hero-ct, .v2-hero-vt__content-wrap, .v2-hero-dk, .v2-hero-st, .v2-hero-ss, .v2-hero-ol__inner, .v2-hero-fc, .v2-hero-m, .v2-bento, .v2-fcards, .v2-fgrid, .v2-fsplit, .v2-fsteps, .v2-falt, .v2-showcase, .v2-team, .v2-faq, .v2-pricing, .v2-cgrid, .v2-steps, .v2-logos, .v2-stats, .v2-tfeat, .v2-tgrid, .v2-cta, .v2-media, .v2-contact, .v2-mapmod, .v2-posts, .v2-ftr, .v2-archive, .v2-custom {
  /* Unified horizontal page gutter. See outerSectionGutterSelectors comment
     above for rationale and why padding-inline (not padding-left/right). */
  padding-inline: var(--v2-gutter, clamp(16px, 4vw, 40px)) !important;
}
.v2-hdr__inner, .v2-hero-grad__inner, .v2-hero-grad__split-text, .v2-hero-ct__body, .v2-hero-hz__content, .v2-hero-hz__media {
  /* Kill the per-module hardcoded horizontal padding that was making heroes'
     content edges sit further from the viewport than other sections. The
     outer gutter is now the single source of horizontal layout truth. */
  padding-inline: 0 !important;
}
.v2-hero-grad__split-row {
  /* Split layout: text and media used to be separated by the 48px horizontal
     padding inside __split-text. Now that's killed, so we restore the
     separation via a flex column-gap on the row itself. 64px reads as a
     deliberate gutter without dominating the cells. */
  column-gap: 64px;
}

/* ── Tag chip design (global Tier-1 override) ────────────────────────────────
   All post-card tag variants are overridden here so the Design → Tags
   settings (shape + fill style) flow through without touching every
   individual module's CSS.

   --tag-color is an optional per-tag inline custom property set by HBS
   when Ghost has a color assigned to the tag (accent_color field).
   Falls back to --v2-accent when absent, so tags without an assigned
   color still follow the theme accent.

   For 'solid' fill the text is always #fff for contrast; for 'tint' and
   'outline' the text inherits the tag's own color (or the theme accent). */
.v2-posts__tag--pill-below, .v2-posts__tag--pill-on-image, .v2-posts__tag--light {
  border-radius: var(--v2-tag-radius, 999px) !important;
  background: color-mix(in srgb, var(--tag-color, var(--v2-accent)) 14%, transparent) !important;
  color: var(--tag-color, var(--v2-accent)) !important;
  border: none !important;
}

/* ── Canvas mode (Tier 1) ──────────────────────────────────────────────
   Floating-page effect: body gets a coloured background ("the desk")
   and a padded inset, while the top-level header and footer pick up
   rounded outer corners so the column of sections reads as one unified
   floating card. Scoped to .v2-canvas-on on body so the rules ONLY
   apply when the user has flipped the toggle in Spacing & layout →
   Page canvas — off by default leaves every existing theme visually
   unaffected.

   The header's sticky positioning is forced to static here. A sticky
   header doesn't compose with a floating page: on scroll the sticky
   header would overhang into the canvas inset area, breaking the
   "page resting on a desk" illusion. Print/document-style layouts that
   look like floating pages conventionally have a top-of-document
   header that scrolls away anyway, so this is the expected behaviour.

   overflow:hidden is required on the rounded elements so each section's
   own edge-to-edge background gets clipped to the rounded silhouette;
   without it the rounded corners would show the section's background
   square-edged past the rounded outline.

   The :not(:has(...)) fallbacks handle the rare case where the user
   removed the header or footer from the canvas — main then picks up
   whichever rounding is missing. The builder seeds both by default so
   this is a corner case, but it's free to support. :has() is supported
   in Chromium 105+, Safari 15.4+, Firefox 121+; on older engines the
   fallback simply doesn't apply (graceful degradation: that edge of the
   page renders square-cornered, the canvas effect still works). */
body.v2-canvas-on {
  background: var(--v2-canvas-color) !important;
  padding: var(--v2-canvas-inset) !important;
  min-height: 100vh;
  position: relative;
}
/* Drop shadow under the floating page. A pseudo-element sized to match
   body's padding box (= the page area) carries the shadow, so all
   three page elements (header / main / footer) get a SINGLE continuous
   shadow around the unified page silhouette rather than three separate
   shadows stacked. The pseudo has no fill of its own — only its shadow
   shows — and sits at z-index 0 so the actual page content (z-index 1
   below) paints over it. pointer-events:none so the shadow layer
   doesn't intercept clicks on the page content beneath it. */
body.v2-canvas-on::before {
  content: '';
  position: absolute;
  inset: var(--v2-canvas-inset);
  border-radius: var(--v2-canvas-radius, 12px);
  box-shadow: var(--v2-canvas-shadow, none);
  pointer-events: none;
  z-index: 0;
}
/* Page-area elements sit above the shadow pseudo AND get the page bg as a
   continuous fallback. The bg is the critical fix for visible canvas-color
   leaks: every module (including header and footer) is wrapped in a
   .v2-section div by renderModule, and that wrapper has no background of
   its own — so any gap (per-section padding-block from compact / comfortable
   / spacious spacing, gaps between sibling page elements, places where a
   module doesn't fully paint its box) would otherwise reveal the canvas
   color from body behind. Giving the wrappers and main the page bg makes
   those gaps render as page-coloured, keeping the canvas color visible
   ONLY in the inset area around the page — which is the whole point.

   position:relative also doubles as the override for the header's
   normally-sticky positioning (relative defeats sticky just as static does),
   so we don't need the separate 'position: static' rule we had before.
   NOTE: no backticks in this comment — the entire CSS string is a JS
   template literal delimited by backticks, so an embedded backtick would
   prematurely close it. */
body.v2-canvas-on > .v2-section,
body.v2-canvas-on > main {
  position: relative !important;
  z-index: 1;
  background: var(--v2-bg);
}
/* Top rounded corners on the header wrapper. We target the .v2-section that
   CONTAINS .v2-hdr (via :has) rather than the bare .v2-hdr, because
   renderModule wraps every module in .v2-section — .v2-hdr is never a
   direct child of body. */
body.v2-canvas-on > .v2-section:has(> .v2-hdr) {
  border-top-left-radius: var(--v2-canvas-radius, 12px);
  border-top-right-radius: var(--v2-canvas-radius, 12px);
  overflow: hidden;
}
body.v2-canvas-on > .v2-section:has(> .v2-ftr) {
  border-bottom-left-radius: var(--v2-canvas-radius, 12px);
  border-bottom-right-radius: var(--v2-canvas-radius, 12px);
  overflow: hidden;
}
/* No header on canvas? Main picks up the top rounding. Mirror-image of
   the header rule, also accounting for the .v2-section wrapping. */
body.v2-canvas-on:not(:has(> .v2-section > .v2-hdr)) > main {
  border-top-left-radius: var(--v2-canvas-radius, 12px);
  border-top-right-radius: var(--v2-canvas-radius, 12px);
  overflow: hidden;
}
/* No footer on canvas? Main picks up the bottom rounding. */
body.v2-canvas-on:not(:has(> .v2-section > .v2-ftr)) > main {
  border-bottom-left-radius: var(--v2-canvas-radius, 12px);
  border-bottom-right-radius: var(--v2-canvas-radius, 12px);
  overflow: hidden;
}


/* ── Text highlight style (Tier 1) ─────────────────────────────────────
   Controls how <u> elements render inside section text. Users type
   __text__ in a field, which becomes <u>text</u>. The highlight style
   then overrides the default underline with the chosen visual treatment.
   Applies to all module text containers for global consistency. */

.v2-hero-grad u, .v2-hero-ct u, .v2-hero-vt u, .v2-hero-hz u, .v2-hero-ol u, .v2-hero-dk u, .v2-hero-st u, .v2-hero-ss u, .v2-hero-fc u, .v2-hero-m u, .v2-hero-su u, .v2-cs u, .v2-falt u, .v2-fcards u, .v2-fgrid u, .v2-fsplit u, .v2-showcase u, .v2-fsteps u, .v2-ftabs u, .v2-ctaband u, .v2-ctac u, .v2-ctanl u, .v2-cta-proof u, .v2-cta-stmt u, .v2-cta-img u, .v2-thc u, .v2-tho u, .v2-logos u, .v2-stats u, .v2-tfeat u, .v2-tgrid u, .v2-cgrid u {
  text-decoration-color: transparent;
  font-weight: inherit;
  background: color-mix(in srgb, var(--v2-accent) 20%, transparent);
  padding: 0.02em 0.1em;
  margin: 0 0.05em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}