/* /css/showcase.css */
/* ==========================================================================
   INSTALL SHOWCASE — Horizontal, responsive, production-ready
   Works with the markup in index.html (#installShowcase & #installShowcaseRail)
   ========================================================================== */

   :root {
    /* Theme-aware tokens (fall back to your site's variables where available) */
    --showcase-border: var(--clr-border, #e5e7eb);
    --showcase-surface: var(--clr-bg, #ffffff);
    --showcase-radius: var(--radius-lg, 14px);
    --showcase-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.06));
    --showcase-gap: 0.75rem;
    --showcase-rail-pad: .25rem;
    --tile-width: clamp(160px, 22vw, 260px);
  }
  
  /* Section spacing */
  .install-showcase__header { margin-bottom: .5rem; }
  
  /* Viewport containing the horizontal rail & arrows */
  .install-showcase__viewport {
    position: relative;
    isolation: isolate;
    padding-inline: 0; /* arrows hug the edges */
    overflow: hidden;  /* hide vertical overflow and edge-fade overlays */
  }
  
  /* Subtle edge fades to indicate more content */
  .install-showcase__viewport::before,
  .install-showcase__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(to right, var(--showcase-surface), transparent);
    opacity: .9;
  }
  .install-showcase__viewport::before { left: 0; }
  .install-showcase__viewport::after  {
    right: 0;
    transform: scaleX(-1);
  }
  
  /* Horizontal rail */
  .install-showcase__rail {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;             /* single horizontal line */
    align-items: stretch;
    gap: var(--showcase-gap);
    overflow-x: auto;              /* scroll horizontally */
    overflow-y: hidden;            /* prevent vertical stacking */
    padding: var(--showcase-rail-pad);
    margin: 0;
    scroll-snap-type: x proximity; /* snap near tiles */
    scroll-padding-inline: var(--showcase-rail-pad);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    white-space: normal;           /* ensure flex wins even if overridden elsewhere */
  }
  
  /* Safety: force children to be horizontal items even if other CSS leaks in */
  .install-showcase__rail > * {
    flex: 0 0 auto;
  }
  
  /* Optional prettier scrollbar (WebKit) */
  .install-showcase__rail::-webkit-scrollbar { height: 8px; }
  .install-showcase__rail::-webkit-scrollbar-track { background: transparent; }
  .install-showcase__rail::-webkit-scrollbar-thumb {
    background: rgba(125,125,125,.35);
    border-radius: 999px;
  }
  
  /* Tiles */
  .install-showcase__item {
    position: relative;
    flex: 0 0 var(--tile-width);
    inline-size: var(--tile-width);
    aspect-ratio: 3 / 2;
    border: 1px solid var(--showcase-border);
    border-radius: var(--showcase-radius);
    background: var(--showcase-surface);
    box-shadow: var(--showcase-shadow);
    overflow: hidden;
    scroll-snap-align: start;
    will-change: transform;
  }
  @media (hover:hover) {
    .install-showcase__item:hover { transform: translateY(-1px); }
  }
  
  /* Images */
  .install-showcase__img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: opacity .35s ease;
    user-select: none;
    -webkit-user-drag: none;
  }
  
  /* Fade during swaps */
  .install-showcase__item.is-fading .install-showcase__img { opacity: .15; }
  
  /* Caption chip */
  .install-showcase__cap {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    padding: .2rem .55rem;
    font-size: .75rem;
    line-height: 1.1;
    border-radius: 999px;
    background: rgba(255,255,255,.65);
    background: color-mix(in oklab, var(--showcase-surface), transparent 45%);
    border: 1px solid var(--showcase-border);
    backdrop-filter: blur(4px);
    pointer-events: none;
  }
  
  /* Nav buttons — compact, low-ink */
  .rail-nav {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--showcase-border);
    background: rgba(255,255,255,.7);
    background: color-mix(in oklab, var(--showcase-surface), transparent 15%);
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.06));
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 2; /* above fades */
  }
  .rail-nav i { font-size: .9rem; opacity: .85; }
  .rail-nav--prev { left: 2px; }
  .rail-nav--next { right: 2px; }
  
  @media (hover:hover) {
    .rail-nav:hover {
      background: color-mix(in oklab, var(--showcase-surface), transparent 5%);
    }
  }
  .rail-nav[disabled] {
    opacity: .35;
    cursor: default;
  }
  
  /* Drag-to-scroll cursor hint (JS toggles .is-dragging) */
  .install-showcase__rail.is-dragging { cursor: grabbing; }
  
  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .install-showcase__img { transition: none; }
  }
  
  /* Compact on very small screens */
  @media (max-width: 480px) {
    :root { --tile-width: clamp(140px, 48vw, 220px); }
  }
  

  /* ==========================================================================
   BRAND INTRO — Text-only band
   Clean, theme-aware, full-width with safe edge padding.
   ========================================================================== */

.brand-intro {
  /* use site tokens; stay subtle */
  --bi-bg: var(--clr-bg, #ffffff);
  --bi-fg: var(--clr-fg, #111827);
  --bi-border: var(--clr-border, #e5e7eb);
  --bi-surface: var(--clr-surface, #ffffff);
  --bi-radius: var(--radius-lg, 16px);

  position: relative;
  width: 100%;
  color: var(--bi-fg);
  background: var(--bi-bg);
  padding-block: clamp(1.75rem, 0.5vw, 3rem);
  /* soft separators so it feels integrated */
  border-top: 1px solid color-mix(in oklab, var(--bi-border), transparent 20%);
  border-bottom: 1px solid color-mix(in oklab, var(--bi-border), transparent 20%);
}

.brand-intro__wrap {
  /* container sizing without depending on .container */
  max-width: min(1200px, 94vw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 0.5vw, 1.5rem);
}

.brand-intro__text {
  /* quiet card-like surface with accent rail for hierarchy */
  background: color-mix(in oklab, var(--bi-surface), transparent 0%);
  border: 1px solid color-mix(in oklab, var(--bi-border), transparent 0%);
  border-radius: var(--bi-radius);
  padding: clamp(1rem, 3vw, 1.25rem) clamp(1rem, 3.2vw, 1.4rem);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,.045));
  position: relative;
}

.brand-intro__text::before {
  /* slim accent stripe */
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-top-left-radius: var(--bi-radius);
  border-bottom-left-radius: var(--bi-radius);
  background: color-mix(in oklab, #2563eb, var(--bi-fg) 70%);
  opacity: .28; /* subtle */
}

.brand-intro__title {
  font: 800 clamp(1.25rem, 2.1vw, 1.85rem)/1.2 Inter, system-ui, sans-serif;
  margin: 0 0 .4rem;
  letter-spacing: .005em;
  font-weight: 800;
  font-size: 2.25rem;
}

.brand-intro__lede {
  margin: 0 0 .75rem;
  font-size: clamp(1rem, 1.08rem + .2vw, 1.15rem);
  line-height: 1.6;
  opacity: .95;
}

.brand-intro p {
  margin: 0 0 .85rem;
  line-height: 1.68;
}

@media (max-width: 720px) {
  .brand-intro__text {
    box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.04));
  }
}

/* Make ONLY the showcase container wider while keeping page gutters */
.container.install-showcase {
  max-width: min(1440px, 98vw); /* was likely ~1200px */
  width: max-content;
}


/* ==============================================================
   Lightbox — premium, responsive, accessible
   ============================================================== */
   .lb[hidden] { display: none !important; }

   .lb {
     position: fixed;
     inset: 0;
     z-index: 9999;
     display: grid;
     place-items: center;
     background: color-mix(in oklab, #000, transparent 20%);
     backdrop-filter: blur(2px);
   }
   
   .lb__scrim {
     position: absolute;
     inset: 0;
     background: color-mix(in oklab, #000, transparent 35%);
     border: 0;
     margin: 0;
     padding: 0;
   }
   
   .lb__frame {
     position: relative;
     width: min(96vw, 1400px);
     height: min(92vh, 92svh);
     margin: 0;
     background: var(--showcase-surface, #fff);
     border-radius: clamp(12px, 1.6vw, 16px);
     box-shadow: 0 20px 60px rgba(0,0,0,.28);
     overflow: hidden;
   }
   
   .lb__stage {
     position: absolute;
     inset: 0 0 48px 0; /* leave room for chrome */
     background: color-mix(in oklab, var(--showcase-surface, #fff), #000 3%);
     overflow: hidden;
     touch-action: none;           /* enables pinch/drag */
     cursor: grab;
   }
   .lb__stage:active { cursor: grabbing; }
   
   .lb__img {
     position: absolute;
     top: 50%; left: 50%;
     max-width: none;              /* we manage sizing with transforms */
     will-change: transform;
     transform: translate(-50%, -50%) scale(1);
     transform-origin: 50% 50%;
     user-select: none;
     -webkit-user-drag: none;
   }
   
   .lb__cap {
     position: absolute;
     left: 0; right: 0; bottom: 0;
     min-height: 48px;
     padding: .6rem .9rem;
     font-size: .925rem;
     line-height: 1.35;
     color: color-mix(in oklab, #000, var(--showcase-surface, #fff) 20%);
     background: linear-gradient(to top,
       color-mix(in oklab, var(--showcase-surface, #fff), #000 6%) 0%,
       color-mix(in oklab, var(--showcase-surface, #fff), transparent 100%) 100%);
     border-top: 1px solid color-mix(in oklab, var(--showcase-border, #e5e7eb), transparent 20%);
   }
   
   .lb__chrome {
     position: absolute;
     left: .5rem; right: .5rem;
     top: .5rem;
     display: flex;
     gap: .35rem;
     align-items: center;
     pointer-events: auto;
   }
   
   .lb__btn {
     appearance: none;
     border: 1px solid color-mix(in oklab, var(--showcase-border, #e5e7eb), transparent 10%);
     background: color-mix(in oklab, var(--showcase-surface, #fff), transparent 10%);
     box-shadow: var(--shadow-sm, 0 4px 12px rgba(0,0,0,.08));
     color: inherit;
     height: 36px;
     padding: 0 .7rem;
     border-radius: 999px;
     display: grid;
     place-items: center;
     cursor: pointer;
   }
   .lb__btn--icon { width: 36px; padding: 0; }
   .lb__btn:focus-visible { outline: 2px solid color-mix(in oklab, #2563eb, #000 40%); outline-offset: 2px; }
   
   .lb__spacer { flex: 1 1 auto; }
   
   @media (max-width: 600px) {
     .lb__frame { width: 100vw; height: 100svh; border-radius: 0; }
     .lb__chrome { left: .35rem; right: .35rem; }
   }
   
   /* Make tiles feel clickable for enlargement */
   .install-showcase__item { cursor: zoom-in; }
   .install-showcase__item[role="button"]:focus-visible {
     outline: 2px solid color-mix(in oklab, #2563eb, #000 40%);
     outline-offset: 2px;
   }
   

   /* ===== Brand Intro 2.0 — elegant, information-site feel ================== */
.brand-intro {
  --bi-bg: var(--ui-surface-2, color-mix(in oklab, var(--clr-bg), #f6f8fb 20%));
  --bi-surface: var(--ui-surface, #fff);
  --bi-text: var(--ui-text, var(--clr-text));
  --bi-muted: var(--ui-text-muted, #6b7280);
  --bi-border: var(--ui-border, var(--clr-border));
  --bi-primary: var(--ui-primary, var(--clr-primary));
  --bi-accent: var(--ui-accent, var(--clr-secondary));
  --bi-radius: var(--radius-lg, 1rem);

  background:
    radial-gradient(1200px 260px at -10% -20%, color-mix(in oklab, var(--bi-primary) 10%, transparent), transparent 55%),
    radial-gradient(900px 220px at 110% -15%, color-mix(in oklab, var(--bi-accent) 10%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bi-bg), var(--ui-bg, var(--clr-bg)));
  border-block: 1px solid color-mix(in oklab, var(--bi-border), transparent 35%);
  padding-block: clamp(1.8rem, 3.2vw, 3rem);
  color: var(--bi-text);
}

.brand-intro__wrap {
  max-width: min(1200px, 94vw);
  margin-inline: auto;
  padding-inline: clamp(1rem, 2.5vw, 1.25rem);
}

.brand-intro__kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: color-mix(in oklab, var(--bi-text) 70%, transparent);
  background: color-mix(in oklab, var(--bi-primary) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--bi-primary) 25%, var(--bi-border));
  padding: .25rem .6rem;
  border-radius: 999px;
  margin-bottom: .6rem;
}

.brand-intro__title {
  font: 800 clamp(1.4rem, 2.6vw, 2rem)/1.15 Inter, system-ui, sans-serif;
  margin: 0;
  letter-spacing: .005em;
}

.brand-intro__subtitle {
  margin-top: .45rem;
  color: var(--bi-muted);
  font-size: clamp(.98rem, 1rem + .2vw, 1.05rem);
  max-width: 68ch;
}

.brand-intro__divider {
  height: 2px;
  width: clamp(120px, 20vw, 220px);
  margin: .9rem 0 1.1rem 0;
  background: linear-gradient(90deg, var(--bi-primary), color-mix(in oklab, var(--bi-accent) 65%, var(--bi-primary)));
  border-radius: 999px;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--bi-primary) 30%, transparent);
}

.brand-intro__panel {
  background: var(--bi-surface);
  border: 1px solid var(--bi-border);
  border-radius: var(--bi-radius);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.08));
  padding: clamp(1rem, 2.2vw, 1.4rem);
}

.brand-intro__grid {
  display: grid;
  grid-template-columns: 1.4fr .95fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
}
@media (max-width: 920px) { .brand-intro__grid { grid-template-columns: 1fr; } }

.brand-intro__col p,
.brand-intro__lede {
  margin: 0 0 .85rem;
  line-height: 1.68;
}
.brand-intro__lede {
  font-size: clamp(1rem, 1.05rem + .2vw, 1.15rem);
  color: var(--bi-text);
  opacity: .98;
}

.brand-intro__aside {
  display: grid;
  gap: .85rem;
}

.bi-aside__card {
  border: 1px solid var(--bi-border);
  border-radius: .9rem;
  padding: .8rem .9rem;
  background: color-mix(in oklab, var(--bi-surface), transparent 0%);
  box-shadow: var(--shadow-xs, 0 1px 3px rgba(0,0,0,.08));
}

.bi-list {
  display: grid;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.bi-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem .65rem;
  align-items: start;
}
.bi-list i { color: var(--bi-primary); opacity: .9; margin-top: .15rem; }

.bi-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: .6rem;
}
.bi-stat {
  text-align: center;
  border: 1px solid var(--bi-border);
  border-radius: .8rem;
  padding: .55rem .4rem;
  background: color-mix(in oklab, var(--bi-surface), transparent 0%);
}
.bi-stat strong {
  display: block;
  font-size: clamp(1rem, 1.15rem + .2vw, 1.25rem);
  line-height: 1.1;
}
.bi-stat span { color: var(--bi-muted); font-size: .85rem; }

.brand-intro__cta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.brand-intro__trust {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  align-items: center;
  color: var(--bi-muted);
  font-size: .9rem;
}
.brand-intro__trust .chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  border: 1px dashed var(--bi-border);
  background: color-mix(in oklab, var(--bi-surface), transparent 0%);
}

/* Dark-theme tune */
:root[data-theme="dark"] .brand-intro__panel,
:root[data-theme="dark"] .bi-aside__card,
:root[data-theme="dark"] .bi-stat,
:root[data-theme="dark"] .brand-intro__trust .chip {
  background: var(--ui-surface, #0f172a);
  border-color: var(--ui-border, #1e293b);
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}


/* ===== Brand Intro — Title underline that matches text width ===== */
.brand-intro__wrap {
  text-align: center;
}

.brand-intro__title {
  /* keep the heading’s box sized to its text so the underline
     is only as wide as the text block itself */
  display: inline-block;
  position: relative;
  margin: 0;                 /* let spacing be handled below */
  padding-bottom: .4rem;     /* room for the underline */
  line-height: 1.15;
}

/* Draw the underline as a pseudo-element so it follows the text width */
.brand-intro__title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;                  /* spans the exact inline width of the text */
  bottom: 0;
  height: 2px;
  /* subtle, professional line that respects light/dark theme tokens */
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--ui-text, var(--clr-text)) 14%, transparent),
    color-mix(in srgb, var(--ui-text, var(--clr-text)) 14%, transparent)
  );
  border-radius: 1px;
  opacity: .9;
}

/* Space between the title and the panel below */
.brand-intro__wrap .brand-intro__panel {
  margin-top: 1rem;
}

/* Hide the old standalone divider (kept in DOM for safety/no HTML edits) */
.brand-intro__divider { display: none !important; }

/* Responsive polish */
@media (max-width: 640px) {
  .brand-intro__title { padding-bottom: .35rem; }
  .brand-intro__wrap .brand-intro__panel { margin-top: .8rem; }
}

/* APPEND to /css/showcase.css — subtle shadow that appears to "drop" from the hero onto Brand Intro */
.brand-intro::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -22px;                 /* lifts shadow to sit just under the hero */
  height: 22px;
  pointer-events: none;
  /* Soft vertical fade down */
  background:
    radial-gradient(120% 22px at 50% 0,
      rgba(0,0,0,.20),
      rgba(0,0,0,0) 70%);
  /* Feather the left/right edges so it feels natural, not like a hard bar */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  opacity: .9;
}

/* Slightly stronger in dark theme for the same perceived contrast */
:root[data-theme="dark"] .brand-intro::before {
  background:
    radial-gradient(120% 22px at 50% 0,
      rgba(0,0,0,.45),
      rgba(0,0,0,0) 75%);
  opacity: .92;
}

/* FURTHER APPEND — add a soft inner-top shadow that falls *into* Brand Intro */
.brand-intro {
  /* gentle downward fade inside the section */
  box-shadow:
    inset 0 20px 30px -18px rgba(0,0,0,.16),
    inset 0 1px 0 0 color-mix(in oklab, var(--bi-border, #e5e7eb), transparent 50%);
}

:root[data-theme="dark"] .brand-intro {
  box-shadow:
    inset 0 24px 36px -20px rgba(0,0,0,.55),
    inset 0 1px 0 0 color-mix(in oklab, var(--bi-border, #1e293b), transparent 35%);
}


/* ============================
   Brand Intro — Blue/Green polish
   Pulls from core.css palette:
   --clr-primary (blue) / --clr-secondary (green)
============================ */

/* Section accent band & subtle gradient glow using core tokens */
.brand-intro.brand-intro--pro {
  --bi-primary: var(--clr-primary);
  --bi-accent:  var(--clr-secondary);
  background:
    radial-gradient(1200px 260px at -10% -20%, color-mix(in oklab, var(--bi-primary) 10%, transparent), transparent 55%),
    radial-gradient(900px 220px at 110% -15%, color-mix(in oklab, var(--bi-accent) 10%, transparent), transparent 55%),
    linear-gradient(180deg, var(--ui-bg, var(--clr-bg)), var(--ui-bg, var(--clr-bg)));
  border-block: 1px solid color-mix(in oklab, var(--ui-border, var(--clr-border)), transparent 35%);
}

/* Title: tasteful blue→green gradient text, with fallback */
.brand-intro__title--gradient {
  background-image: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  /* keep the existing underline from earlier rules; just strengthen it slightly */
}
.brand-intro__title--gradient::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--clr-primary) 55%, transparent),
    color-mix(in srgb, var(--clr-secondary) 55%, transparent)
  );
  opacity: .9;
}

/* Panel: faint top gradient-border to echo the headline */
.brand-intro__panel {
  position: relative;
  border-radius: var(--bi-radius, 1rem);
  overflow: clip;
}
.brand-intro__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
  opacity: .28;
  pointer-events: none;
}




/* Subtle divider below title that mirrors the palette (keeps your original DOM) */
.brand-intro__divider {
  display: block !important;
  height: 2px;
  width: clamp(120px, 20vw, 220px);
  margin: .9rem auto 1.1rem auto;
  background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
  border-radius: 999px;
  box-shadow: 0 1px 6px color-mix(in srgb, var(--clr-primary) 25%, transparent);
}



/* Motion-respect: turn off fancy paints if user prefers reduce */
@media (prefers-reduced-motion: reduce) {
  .brand-intro__panel::before { transition: none !important; }
}


/* ===== Managed Service Takeover (Brand Intro v3) ========================= */
.brand-intro--takeover .brand-intro__subtitle strong { font-weight: 800; }
.brand-intro--takeover .brand-intro__cta { margin-top: .75rem; gap: .6rem; }
.brand-intro--takeover .btn--ghost {
  background: var(--ui-surface, #fff);
  color: var(--ui-text, var(--clr-text));
  border: 1px solid var(--ui-border, var(--clr-border));
}

/* Checklist spacing refinement */
.checklist { margin-top: .65rem; }
.checklist li + li { margin-top: .35rem; }
.checklist i { color: var(--ui-primary, var(--clr-primary)); }

/* Plan card (right rail) */
.plan-card {
  display: grid;
  gap: .7rem;
  border-radius: var(--radius-lg, 1rem);
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.08));
}
.plan-card__head h3 {
  font-size: clamp(1.15rem, 1.1rem + .6vw, 1.45rem);
  margin: 0;
  letter-spacing: .01em;
}
.plan-card__sub {
  color: var(--ui-text-muted, #6b7280);
  margin-top: .15rem;
  font-size: .95rem;
}
.plan-card__points {
  list-style: none;
  margin: .2rem 0 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.plan-card__points li {
  display: flex; align-items: center; gap: .5rem;
}
.plan-card__points i { color: var(--ui-primary, var(--clr-primary)); }

/* Lead form */
.lead-form { display: grid; gap: .5rem; }
.lead-form input,
.lead-form select {
  border: 1px solid var(--ui-border, var(--clr-border));
  background: var(--ui-surface, #fff);
  color: var(--ui-text, var(--clr-text));
  padding: .55rem .7rem;
  border-radius: .65rem;
}
.lead-form .btn--block { width: 100%; }
.lead-form .lead-note {
  color: var(--ui-text-muted, #6b7280);
  display: block;
  margin-top: .15rem;
  font-size: .85rem;
}

/* Persona helper */
.persona-switch { display: grid; gap: .5rem; }
.persona-switch__row { display: flex; flex-wrap: wrap; gap: .35rem; }
.persona-switch .pill {
  background: color-mix(in oklab, var(--ui-primary) 10%, var(--ui-surface));
  color: var(--ui-primary);
  border: 1px solid color-mix(in oklab, var(--ui-primary) 25%, var(--ui-border));
}
.persona-switch .micro { color: var(--ui-text-muted); font-size: .92rem; }

/* CTA chips/trust */
.brand-intro__trust { margin-top: .65rem; }

/* Dark theme harmony */
:root[data-theme="dark"] .plan-card,
:root[data-theme="dark"] .persona-switch {
  background: var(--ui-surface, #0f172a);
  border-color: var(--ui-border, #1e293b);
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .lead-form input,
:root[data-theme="dark"] .lead-form select {
  background: var(--ui-surface, #0f172a);
  border-color: var(--ui-border, #1e293b);
}

/* Responsive niceties */
@media (max-width: 920px) {
  .brand-intro--takeover .brand-intro__cta { justify-content: center; }
  .plan-card { order: -1; } /* show the offer first on mobile */
}
/* =============================================================
   Brand-Intro polish specific to the new layout
   (APPEND-ONLY; builds on your existing Brand-Intro rules)
============================================================= */

/* “How it works” steps */
.howitworks {
  list-style: none; padding: 0; margin: .6rem 0 1rem;
  display: grid; gap: .55rem;
}
.howitworks li { display: grid; grid-template-columns: auto 1fr; gap: .6rem; align-items: start; }
.howitworks .step {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 999px;
  font: 700 0.95rem/1 Inter, system-ui, sans-serif;
  color: #fff; background: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary));
  box-shadow: 0 3px 10px rgba(0,0,0,.18);
}

/* Tighten title spacing & keep underline behavior from your rules */
.brand-intro__title { margin-top: .1rem; }

/* Improve plan card spacing on small screens */
@media (max-width: 920px) {
  .brand-intro__aside .plan-card { order: -1; }
}

/* Micro text utility */
.micro { font-size: .9rem; color: var(--ui-text-muted, #6b7280); }

.brand-intro__subtitle {
  display: inline-block; 
  margin: .5rem auto 0;
  text-align: center; 
  max-width: 68ch; 
  text-wrap: balance; 
  }
  @supports not (text-wrap: balance) {
  .brand-intro__subtitle { hyphens: auto; }
  }/* ===== Persona tabs (Brand Intro) ===== */
.persona-tabs {
  display: grid; grid-auto-flow: column; gap: .4rem; margin: .6rem 0 .8rem;
}
.persona-tab {
  appearance: none; border: 1px solid var(--bi-border); background: var(--bi-surface);
  color: var(--bi-text); padding: .45rem .7rem; border-radius: .65rem; cursor: pointer;
  font-weight: 600; display: inline-flex; align-items: center; gap: .45rem;
}
.persona-tab.is-active {
  border-color: color-mix(in oklab, var(--bi-primary) 40%, var(--bi-border));
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.persona-panel { margin-top: .25rem; }
.persona-panel[hidden] { display: none !important; }

/* Simple tab interactivity (no extra JS required): click toggles panels */
.brand-intro__panel .persona-tabs .persona-tab { position: relative; }
.brand-intro__panel .persona-tabs .persona-tab:focus-visible {
  outline: 2px solid color-mix(in oklab, var(--bi-primary), #000 35%); outline-offset: 2px;
}

/* ===== Service Ribbon (Web/CRM/Software) ===== */
.service-ribbon { display: grid; gap: .55rem; }
.service-ribbon__head {
  display: inline-flex; align-items: center; gap: .5rem; font-weight: 800;
  letter-spacing: .01em;
}
.service-ribbon__list {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem;
}
.service-ribbon__list li { display: flex; align-items: center; gap: .5rem; }
.service-ribbon__list i { color: var(--bi-primary); opacity: .9; }

/* Buttons row normalization */
.cta-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* ===== Accessibility niceties ===== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ===== Micro refinements ===== */
.brand-intro__subtitle em { font-style: normal; opacity: .95; }
.brand-intro__subtitle strong { font-weight: 800; }

/* ===== Small screens ===== */
@media (max-width: 920px) {
  .persona-tabs { grid-auto-flow: row; }
}

/* ===== Brand Intro — Advisory variant (authoritative + personable) ===== */
.brand-intro--advisory .brand-intro__wrap { max-width: 1120px; }
.brand-intro--advisory .brand-intro__title { letter-spacing: .005em; }

/* Pillars grid */
.pillars {
  display: grid;
  gap: .9rem;
}
.pillar {
  border: 1px solid var(--bi-border);
  border-radius: .9rem;
  padding: .8rem .9rem;
  background: color-mix(in oklab, var(--bi-surface), transparent 0%);
}
.pillar__head {
  display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem;
}
.pillar__head h3 {
  margin: 0; font: 700 1.05rem/1.2 Inter, system-ui, sans-serif;
}
.pillar__list {
  margin: 0; padding-left: 1.1rem;
}
.pillar__list li { margin: .25rem 0; }

/* Make icons subtle, business-like */
.brand-intro--advisory i { color: color-mix(in oklab, var(--bi-text) 75%, var(--bi-primary)); opacity: .9; }

/* Ribbon list */
.micro-points { padding-top: .6rem; }
.service-ribbon__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.service-ribbon__list li { display: flex; align-items: center; gap: .5rem; }

/* Form clarity */
.brand-intro--advisory .lead-form input,
.brand-intro--advisory .lead-form select { font-size: .98rem; }

/* Responsive nicety: tighten vertical rhythm on small screens */
@media (max-width: 920px) {
  .pillars { gap: .7rem; }
}

/* ===================== APPEND to /css/showcase.css (Brand-Intro CTA redesign) ===================== */

/* Takeover variant that biases gaze to the right-rail CTA */
.brand-intro--cta .brand-intro__panel {
  position: relative;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--bi-surface), transparent 0%), color-mix(in oklab, var(--bi-surface), transparent 0%));
}
.brand-intro--cta .brand-intro__grid { align-items: stretch; }

/* Consult card */
.consult-cta {
  display: grid;
  gap: .7rem;
  border: 1px solid var(--bi-border);
  border-radius: .95rem;
  padding: .9rem .95rem;
  background:
    radial-gradient(120% 140% at 110% -10%, color-mix(in oklab, var(--bi-accent) 8%, transparent) 0%, transparent 55%),
    radial-gradient(120% 140% at -10% -20%, color-mix(in oklab, var(--bi-primary) 10%, transparent) 0%, transparent 60%),
    color-mix(in oklab, var(--bi-surface), transparent 0%);
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(0,0,0,.08));
  overflow: clip;
}
.consult-cta__head h3 {
  margin: 0;
  font: 800 clamp(1.1rem, 1rem + .6vw, 1.45rem)/1.2 Inter, system-ui, sans-serif;
  letter-spacing: .01em;
}
.consult-cta__sub { margin: .2rem 0 0; color: var(--bi-muted); font-size: .95rem; }

.consult-cta__points {
  list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .4rem;
}
.consult-cta__points li { display: flex; align-items: center; gap: .5rem; }
.consult-cta__points i { color: var(--bi-primary); }

/* High-salience CTA button */
.btn--xl {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.05rem;
  font: 800 1rem/1 Inter, system-ui, sans-serif;
  border-radius: .8rem;
  position: relative;
  isolation: isolate;
}
.consult-btn {
  position: relative;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--bi-primary) 25%, transparent);
  transform: translateZ(0); /* enable compositor */
}
.consult-btn i { opacity: .95; }

/* Attention ring (soft, premium — motion-respecting) */
.btn-ring {
  position: absolute; inset: -6px; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(120% 120% at 50% 50%, color-mix(in oklab, var(--bi-primary) 28%, transparent) 0%, transparent 70%);
  opacity: .0;
  filter: blur(10px);
}
@media (prefers-reduced-motion: no-preference) {
  .consult-btn:hover .btn-ring,
  .consult-btn:focus-visible .btn-ring { animation: btnGlow 1.8s ease-in-out alternate infinite; }
  @keyframes btnGlow {
    0%   { opacity: .18; transform: scale(1); }
    100% { opacity: .35; transform: scale(1.03); }
  }
}

/* Micro copy below CTA */
.consult-cta__micro {
  margin: .15rem 0 0;
  font-size: .85rem;
  color: var(--bi-muted);
  display: inline-flex; align-items: center; gap: .35rem;
}

/* Small-network theory: quick “loop in” chips to spread within small teams */
.micro-network {
  display: flex; flex-wrap: wrap; gap: .4rem .45rem; align-items: center;
  margin-top: .15rem;
}
.micro-network__label { font-size: .9rem; color: var(--bi-muted); }
.micro-network .chip {
  padding: .2rem .55rem; border-radius: 999px; border: 1px dashed var(--bi-border);
  background: color-mix(in oklab, var(--bi-surface), transparent 0%);
  font-weight: 600;
}
.micro-network .chip i { color: var(--bi-primary); }

/* Right-rail stats look cohesive with the card */
.consult-stats { margin-top: .25rem; }
.consult-stats .bi-stat strong { font-weight: 800; }

/* Dark theme polish */
:root[data-theme="dark"] .consult-cta {
  background:
    radial-gradient(120% 140% at 110% -10%, color-mix(in oklab, var(--bi-accent) 12%, transparent) 0%, transparent 55%),
    radial-gradient(120% 140% at -10% -20%, color-mix(in oklab, var(--bi-primary) 14%, transparent) 0%, transparent 60%),
    var(--ui-surface, #0f172a);
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
:root[data-theme="dark"] .consult-btn {
  box-shadow: 0 8px 26px color-mix(in oklab, var(--bi-primary) 40%, transparent);
}

/* Mobile emphasis: surface the CTA first */
@media (max-width: 920px) {
  .brand-intro__aside .consult-cta { order: -1; }
  .btn--xl { width: 100%; }
}

/* === APPEND: Pillar headings use the title gradient, reversed === */
/* Title uses: linear-gradient(90deg, var(--clr-primary), var(--clr-secondary))
   Reverse it for the three pillar <h3> labels. */
   .brand-intro--advisory .pillar__head h3 {
    background-image: linear-gradient(90deg, var(--clr-secondary), var(--clr-primary));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    /* keep businesslike weight + tighten rendering */
    font-weight: 800;
    letter-spacing: .005em;
  }
  
  /* Optional: make the accompanying icons harmonize softly (very subtle) */
  .brand-intro--advisory .pillar__head i {
    background-image: linear-gradient(90deg, color-mix(in oklab, var(--clr-secondary) 80%, transparent),
                                           color-mix(in oklab, var(--clr-primary) 80%, transparent));
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    opacity: .9;
  }
  
  /* Fallback for older browsers without background-clip:text */
  @supports not (-webkit-background-clip: text) {
    .brand-intro--advisory .pillar__head h3,
    .brand-intro--advisory .pillar__head i {
      color: var(--ui-text, var(--clr-text));
    }
  }

  /* === APPEND: Make “Free Consultation” pop (solid, no gradients) === */
.consult-cta__head h3 {
  /* typographic presence */
  font: 900 clamp(1.2rem, 1rem + 1vw, 1.55rem)/1.1 Inter, system-ui, sans-serif;
  letter-spacing: .01em;

  /* solid, brand-tinted chip (NO gradient) */
  display: inline-block;
  position: relative;
  padding: .5rem 1rem .55rem 1.25rem;
  color: var(--ui-text, var(--clr-text));
  background: color-mix(in oklab, var(--clr-primary) 8%, var(--bi-surface));
  border: 2px solid color-mix(in oklab, var(--clr-primary) 55%, var(--bi-border));
  border-radius: .8rem;

  /* crisp emphasis without looking “salesy” */
  box-shadow:
    0 1px 0 rgba(0,0,0,.04),
    0 10px 24px color-mix(in oklab, var(--clr-primary) 18%, transparent),
    inset 0 -3px 0 color-mix(in oklab, var(--clr-primary) 35%, transparent);
}

/* Primary solid accent bar on the left (no gradient) */
.consult-cta__head h3::before {
  content: "";
  position: absolute;
  left: .6rem;
  top: .45rem;
  bottom: .45rem;
  width: 6px;
  border-radius: 999px;
  background: var(--clr-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--bi-surface), transparent 0%);
}

/* Discreet “No cost” badge to reinforce value (can remove if undesired) */
.consult-cta__head h3::after {
  content: "No cost";
  position: absolute;
  right: .4rem;
  top: -0.65rem;
  font: 700 .72rem/1 Inter, system-ui, sans-serif;
  color: color-mix(in oklab, var(--clr-primary) 80%, #000);
  background: color-mix(in oklab, var(--bi-surface), var(--clr-primary) 12%);
  border: 1px solid color-mix(in oklab, var(--clr-primary) 45%, var(--bi-border));
  padding: .18rem .45rem;
  border-radius: .5rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* Subtle attention pulse on focus/hover (motion-respecting) */
@media (prefers-reduced-motion: no-preference) {
  .consult-cta__head h3:focus-visible,
  .consult-cta__head h3:hover {
    box-shadow:
      0 1px 0 rgba(0,0,0,.04),
      0 12px 28px color-mix(in oklab, var(--clr-primary) 24%, transparent),
      inset 0 -3px 0 color-mix(in oklab, var(--clr-primary) 45%, transparent);
  }
}

/* Dark theme tuning */
:root[data-theme="dark"] .consult-cta__head h3 {
  background: color-mix(in oklab, var(--ui-surface, #0f172a), var(--clr-primary) 16%);
  border-color: color-mix(in oklab, var(--clr-primary) 55%, var(--ui-border, #1e293b));
  box-shadow:
    0 1px 0 rgba(0,0,0,.45),
    0 12px 28px color-mix(in oklab, var(--clr-primary) 35%, transparent),
    inset 0 -3px 0 color-mix(in oklab, var(--clr-primary) 45%, transparent);
}
:root[data-theme="dark"] .consult-cta__head h3::after {
  color: color-mix(in oklab, var(--clr-primary) 85%, #fff);
  background: color-mix(in oklab, var(--ui-surface, #0f172a), var(--clr-primary) 24%);
  border-color: color-mix(in oklab, var(--clr-primary) 55%, var(--ui-border, #1e293b));
}