/* ============================================================
   Marketing site — white / black / blue redesign.
   Unscoped — applies globally to any page that loads this file.
   ============================================================ */

:root {
  --primary: #2150db;
  /* Logo blue */
  --secondary: #0B0B0F;
  /* Near-black ink */
  --bg: #FFFFFF;
  --bg-soft: #fafaf7;
  /* Subtle off-white for section separators / cards */
  --muted: #6B7280;
  /* Single neutral for borders + soft text */
  --accent: #e94acd;
  /* Logo purple — used sparingly */

  /* Per-tab color for the proof section. Default = brand primary.
     Overridden per-tab by .proof-stat[data-stat="..."] selectors
     below, and per-mode on the viz wrapper. */
  --tab-color: var(--primary);

  /* Font families */
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading: "Gelasio", "Newsreader", Georgia, serif;

  /* Brand sparkle glyph — used as mask-image on ::before pseudo-elements
     across .px-card features, .ix-article h2/ul/quote, etc. Single
     source of truth; bumping the SVG here updates every consumer. */
  --sparkle-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 1.5 C12 8 16 12 22.5 12 C16 12 12 16 12 22.5 C12 16 8 12 1.5 12 C8 12 12 8 12 1.5 Z' fill='black'/></svg>");
}

/* ---------- Base ---------- */
html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--secondary);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings use the serif heading family. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
}

* {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--accent);
  color: #fff;
}

/* ---------- Layout helpers ---------- */
.container-fluid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
}

.wrap {
  padding: 4rem 0;
}

/* ---------- Typography utilities ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
}

.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--primary);
}

.display {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(32px, 5.5vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  font-weight: 500;
  color: var(--secondary);
  margin: 0;
}

h1,
.h1 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 700;
  color: var(--secondary);
  margin: 0;
}

h2,
.h2 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  font-weight: 700;
  color: var(--secondary);
  margin: 0;
}

h3,
.h3 {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(20px, 1.6vw, 22px);
  line-height: 1.3;
  font-weight: 600;
  color: var(--secondary);
  margin: 0;
}

h4 {
  font-size: clamp(17px, 1.3vw, 19px);
  font-weight: 600;
}

h5 {
  font-size: 17px;
  font-weight: 600;
}

h6 {
  font-size: 16px;
  font-weight: 600;
}

p,
body {
  font-size: 16px;
}

.lede {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  color: #374151;
  margin: 14px 0 0;
  max-width: min(52ch, 100%);
}

.serif {
  font-style: italic;
  font-weight: 600;
  color: var(--primary);
}

/* ---------- Accessibility helpers ---------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden,
.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;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Section rhythm ---------- */
.section {
  padding: 88px 0;
}

.section-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: end;
  margin-bottom: 56px;
}

@media (max-width: 900px) {
  .section {
    padding: 64px 0;
  }

  .section-head {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.ascii-sep {
  text-align: center;
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ---------- Universal button — .main-btn (filled) + .fill-btn (outlined modifier) ---------- */
.main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  border: 1px solid var(--secondary);
  background: var(--secondary);
  color: #fff;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
  white-space: nowrap;
  user-select: none;
  min-height: 38px;
}

.main-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
}

.main-btn .arr {
  display: inline-block;
  transition: transform 160ms ease;
}

.main-btn:hover .arr {
  transform: translateX(3px);
}

/* Outlined variant — apply alongside .main-btn (class="main-btn fill-btn") */
.fill-btn {
  background: transparent;
  color: var(--secondary);
  border-color: var(--muted);
}

.fill-btn:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Size + width modifiers */
.main-btn--sm {
  padding: 7px 14px;
  font-size: 13px;
  min-height: 32px;
}

.main-btn--block {
  width: 100%;
}

/* ---------- .promo (top strip) ---------- */
.promo-strip {
  background: var(--secondary);
  color: #fff;
  font-size: 13px;
  text-align: center;
  padding: 10px 16px;
}

.promo-strip a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.promo-strip code {
  background: rgba(255, 255, 255, 0.14);
  padding: 2px 8px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.promo-strip .sparkle {
  color: var(--accent);
}

/* ---------- .nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Default (non-landing pages): soft white tint with frosted glass blur */
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  box-shadow: 0 0 0 transparent;
  /* Only animate cheap properties — background, shadow, border colour,
     plus the GPU-accelerated transform used for scroll-direction hide.
     `backdrop-filter` snaps; animating it would burn paint every frame. */
  transform: translate3d(0, 0, 0);
  will-change: transform;
  transition:
    background 280ms cubic-bezier(0.25, 1, 0.5, 1),
    box-shadow 280ms cubic-bezier(0.25, 1, 0.5, 1),
    border-bottom-color 280ms cubic-bezier(0.25, 1, 0.5, 1),
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hidden state — slides the nav up out of view when the user is
   scrolling DOWN past the threshold. Sliding back in (scrolling up)
   uses the same eased transition for a smooth reveal.
   Applied to both the sticky default nav and the fixed landing nav. */
.nav.is-hidden {
  transform: translate3d(0, -100%, 0);
}

/* Landing-only modifier: fixed at top, fully transparent over hero.
   Inherits the base .nav transition so background/border/shadow fade
   smoothly when toggling is-open or is-scrolled. */
.nav--transparent {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Scrolled state — solid white with soft separator + shadow, smooth fade.
   Applied to both default sticky nav and the landing fixed nav. */
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 8px 24px -16px rgba(11, 11, 15, 0.18);
  border-bottom-color: rgba(11, 11, 15, 0.08);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
}

.nav .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: var(--secondary);
}

.brand-logo {
  height: 48px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  display: block;
}

.nav .brand-mark--img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.nav .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14px;
}

.nav-links a {
  color: #374151;
  padding: 8px 0;
  transition: color 160ms ease;
}

.nav-links a:hover {
  color: var(--primary);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid #ECECEF;
  border-radius: 8px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle__bars {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
}

.nav-toggle__bars span {
  width: 18px;
  height: 2px;
  background: var(--secondary);
  border-radius: 2px;
}

/* Close (X) icon — hidden by default, shown when nav.is-open */
.nav-toggle__close {
  display: none;
  color: var(--secondary);
  line-height: 0;
}

.nav.is-open .nav-toggle__bars {
  display: none;
}

.nav.is-open .nav-toggle__close {
  display: inline-flex;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  /* When the mobile drawer is open, force a solid white nav background
     so the link list panel reads cleanly even on the transparent landing
     variant. */
  .nav.is-open,
  .nav.nav--transparent.is-open {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 1px solid #ECECEF;
  }

  /* Mobile: links + CTA hidden by default, slide down when nav.is-open */
  .nav-links,
  .nav-cta {
    display: none;
  }

  .nav.is-open .nav-inner {
    flex-wrap: wrap;
    padding-bottom: 0;
    position: relative;
  }

  /* When open, pin the toggle (now showing X) to top-right so it stays
     beside the brand instead of getting pushed below the link list. */
  .nav.is-open .nav-toggle {
    position: absolute;
    top: 14px;
    right: 24px;
  }

  /* Solid white panel under the brand row, edge-to-edge */
  .nav.is-open .nav-links,
  .nav.is-open .nav-cta {
    display: flex;
    flex-direction: column;
    width: calc(100% + 48px);
    margin: 0 -24px;
    background: #fff;
    border-top: 1px solid #ECECEF;
    animation: nav-slide-in 240ms cubic-bezier(0.25, 1, 0.5, 1);
  }

  /* Link list: each row a tap target with subtle divider */
  .nav.is-open .nav-links {
    align-items: stretch;
    gap: 0;
    padding: 8px 0;
  }

  .nav.is-open .nav-links a {
    display: flex;
    align-items: center;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--secondary);
    border-bottom: 1px solid #F1F2F6;
    transition: background 160ms ease, color 160ms ease;
  }

  .nav.is-open .nav-links a:last-child {
    border-bottom: 0;
  }

  .nav.is-open .nav-links a:active {
    background: #F5F6F8;
  }

  .nav.is-open .nav-links a:hover {
    color: var(--primary);
  }

  /* CTA row: full-width buttons stacked, generous padding */
  .nav.is-open .nav-cta {
    gap: 10px;
    padding: 16px 24px 22px;
    border-top: 1px solid #F1F2F6;
  }

  .nav.is-open .nav-cta .main-btn {
    width: 100%;
    min-height: 44px;
    font-size: 15px;
  }

  /* Press-down feedback on the hamburger itself */
  .nav-toggle {
    transition: transform 160ms cubic-bezier(0.25, 1, 0.5, 1);
  }

  .nav-toggle:active {
    transform: scale(0.94);
  }

  .nav.is-open .nav-toggle {
    background: #F5F6F8;
    border-color: #ECECEF;
  }
}

/* Slide-down enter — bounded translate so the panel doesn't pop in */
@keyframes nav-slide-in {
  from {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ============================================================
   Hero — Orchid-style atmospheric layout
   - Full-section image background
   - Animated morphing gradient blob (4 GPU-only orbs)
   - Left-side scrim keeps headline readable over both
   ============================================================ */

.hero-orchid {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(48px, 7vw, 96px) 0 clamp(56px, 8vw, 104px);
}

/* Layer 1 — photographic background, sharp + full clarity */
.hero-orchid__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% top;
  z-index: 0;
}

/* ============================================================
   Hero flow line + skeleton chat
   - SVG path: vertical along container's left edge, bends right
     near the bottom, runs horizontally to the chat row
   - Path uses non-scaling-stroke so 1px stays 1px regardless of
     viewBox scaling
   - At path's end: bare chat bubbles, no card, no shadow, just
     thin outline + transparent fill (matches the orb-frame language)
   - Sequence runs once on load via GSAP (see landing.html)
   - Typing dots inside loop forever (life signal)
   ============================================================ */
.hero-orchid__inner {
  position: relative;
}

/* Flow line — anchored to .hero-orchid__inner (the container-fluid).
   Horizontally: starts at the container's left edge (inside padding).
   Vertically: extends UP past the hero into the nav area so the line
   appears to descend from the viewport's top edge through the navbar.
   Uses url(#hero-flow-grad) defined inline in the SVG. */
.hero-flow {
  position: absolute;
  top: -120px;
  /* extend above the hero section into the navbar */
  left: 0;
  width: calc(100% - 16px);
  height: calc(100% + 150px);
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

.hero-flow__path {
  /* `pathLength="1"` + dasharray/dashoffset are set as SVG attrs in HTML
     (not CSS) so the browser respects pathLength normalisation. Without
     this, CSS dasharray is measured in user units and the line appears
     fully drawn at first paint.
     `opacity: 0` hides the path during the JS-load gap so we don't
     flash the fully-drawn line before GSAP picks up the entrance. */
  opacity: 0;
}

/* ---------- Skeleton chat at path's end ----------
   Positioned upper-right so it sits between the face and the shoulder
   (over the soft white-shirt area that has the least photo competition). */
.hero-chat {
  position: absolute;
  /* SVG path ends near hero-bottom at viewBox (700, 570) of 1000×600
     (≈ 95% down). Position widget so its *bottom* sits near the line's
     exit; bubble stack rises upward. */
  left: 68%;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: clamp(240px, 22vw, 300px);
  z-index: 3;
  pointer-events: none;
}

.hero-chat__row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  will-change: transform, opacity;
}

.hero-chat__row--them {
  justify-content: flex-start;
}

.hero-chat__row--me {
  justify-content: flex-end;
}

.hero-chat__row--typing {
  justify-content: flex-start;
}

/* Avatar — bare outline circle, same skeleton language */
.hero-chat__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid rgba(11, 11, 15, 0.12);
  background: rgba(255, 255, 255, 0.7);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hero-chat__avatar--me {
  /* Darker pink (#A1227F) on white meets AA contrast for the user
     icon glyph; border keeps the lighter brand accent feel. */
  border-color: rgba(233, 74, 205, 0.32);
  color: #A1227F;
}

/* Bare skeleton bubble — thin outline only, no fill, no shadow */
.hero-chat__bubble {
  font-family: var(--font-body);
  font-size: 12.5px;
  line-height: 1.4;
  padding: 7px 12px;
  border: 1px solid rgba(11, 11, 15, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  color: var(--secondary);
  max-width: 78%;
}

.hero-chat__row--them .hero-chat__bubble {
  border-bottom-left-radius: 4px;
}

.hero-chat__row--me .hero-chat__bubble {
  border-bottom-right-radius: 4px;
  color: #A1227F;
  border-color: rgba(233, 74, 205, 0.32);
}

/* Typing indicator — same outline language */
.hero-chat__typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 9px 12px;
  border: 1px solid rgba(11, 11, 15, 0.12);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
}

.hero-chat__typing span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(11, 11, 15, 0.5);
  animation: chat-typing-dot 1.2s cubic-bezier(0.77, 0, 0.175, 1) infinite;
  will-change: transform, opacity;
}

.hero-chat__typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.hero-chat__typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-typing-dot {

  0%,
  60%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.45;
  }

  30% {
    transform: translate3d(0, -3px, 0);
    opacity: 1;
  }
}

/* Hero content entrance — content elements start hidden, GSAP reveals them */
.hero-orchid .display,
.hero-orchid .lede,
.hero-orchid .hero-cta-row {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  will-change: transform, opacity;
}

/* Hero image entrance — gentle scale-in from 1.04 to 1.0 */
.hero-orchid__img {
  transform: scale(1.04);
  transform-origin: center center;
  opacity: 0;
  will-change: transform, opacity;
}

/* Mobile + tablet: skip the flow + chat entirely (no horizontal room).
   Content + image still animate-in, just via the simpler reveal path. */
@media (max-width: 900px) {

  .hero-flow,
  .hero-chat {
    display: none;
  }
}

/* Reduced motion: skip all entrances, hold final state.
   Use CSS to FORCE stroke-dashoffset to 0 (overrides the SVG attribute
   when CSS specificity wins) — keeps the line visible for users who
   opted out of motion. */
@media (prefers-reduced-motion: reduce) {
  .hero-flow__path {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
  }

  .hero-chat__row {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-chat__typing span {
    animation: none !important;
    opacity: 0.75;
  }

  .hero-orchid .display,
  .hero-orchid .lede,
  .hero-orchid .hero-cta-row,
  .hero-orchid__img {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Layer 1.5 — left-to-right white scrim over the image so the
   headline always sits on a clean white field, then fades out
   so the photo (and orbs) read on the right. */
.hero-orchid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.95) 25%,
      rgba(255, 255, 255, 0.7) 45%,
      rgba(255, 255, 255, 0.3) 65%,
      rgba(255, 255, 255, 0) 85%);
}

/* Layer 1.6 — film-grain noise overlay over the entire hero.
   Uses an inline SVG turbulence filter as a tiny data-URI so the
   browser tiles it without any HTTP request. `mix-blend-mode:
   overlay` lets the noise sit on top of both image and scrim,
   gently darkening highlights + lifting shadows so the hero gets
   the "premium magazine paper" feel. */
.hero-orchid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

@media (max-width: 768px) {
  .hero-orchid::before {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.5) 0%,
        rgba(255, 255, 255, 0.85) 55%,
        rgba(255, 255, 255, 0.98) 100%);
  }

  .hero-orchid::after {
    opacity: 0.22;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-orchid::after {
    opacity: 0.18;
  }
}

/* ============================================================
   Scattered atmospheric orbs across the right half of the hero.
   No container, no border, no card — pure bokeh dots in brand
   colors drifting independently. Sits above the image (z-1),
   below the text (z-10). Each orb has its own light blur, so
   they read as separate floating elements, not a single mass.
   ============================================================ */
.hero-orbs {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(30px) saturate(140%);
  mix-blend-mode: screen;
  will-change: transform;
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Architectural detail: thin square outline frames matching each
   orb's position + size. Lives as a sibling (not inside) the orb so
   the orb's `filter: blur` doesn't soften the 1px border into nothing.
   Animations are duplicated so the frame drifts in lockstep with its
   orb. */
.hero-orb-frame {
  position: absolute;
  border: 1px solid var(--bg);
  pointer-events: none;
  will-change: transform;
  padding: 3px;
  backdrop-filter: blur(8px);
  animation-timing-function: cubic-bezier(0.77, 0, 0.175, 1);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Each orb + frame size uses clamp(min, vw, max) so it scales smoothly
   between phones (~110-200px) and desktops (~160-340px). Positions stay
   percentage-based so they always sit in the same relative spot. */
.hero-orb-frame--a {
  width: clamp(110px, 16vw, 220px);
  height: clamp(110px, 16vw, 220px);
  top: 8%;
  left: 12%;
  animation-name: orb-drift-a;
  animation-duration: 14s;
}

.hero-orb-frame--b {
  width: clamp(140px, 20vw, 280px);
  height: clamp(140px, 20vw, 280px);
  top: -4%;
  right: 8%;
  animation-name: orb-drift-b;
  animation-duration: 18s;
}

.hero-orb-frame--c {
  width: clamp(170px, 24vw, 340px);
  height: clamp(170px, 24vw, 340px);
  bottom: -8%;
  left: 0%;
  animation-name: orb-drift-c;
  animation-duration: 22s;
}

.hero-orb-frame--d {
  width: clamp(120px, 17vw, 240px);
  height: clamp(120px, 17vw, 240px);
  bottom: 18%;
  right: 18%;
  animation-name: orb-drift-d;
  animation-duration: 16s;
}

.hero-orb-frame--e {
  width: clamp(80px, 11vw, 160px);
  height: clamp(80px, 11vw, 160px);
  top: 38%;
  left: 28%;
  animation-name: orb-drift-e;
  animation-duration: 20s;
}

.hero-orb {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 65%);
}

.hero-orb--a {
  width: clamp(110px, 16vw, 220px);
  height: clamp(110px, 16vw, 220px);
  top: 8%;
  left: 12%;
  animation-name: orb-drift-a;
  animation-duration: 14s;
}

.hero-orb--b {
  width: clamp(140px, 20vw, 280px);
  height: clamp(140px, 20vw, 280px);
  top: -4%;
  right: 8%;
  animation-name: orb-drift-b;
  animation-duration: 18s;
}

.hero-orb--c {
  width: clamp(170px, 24vw, 340px);
  height: clamp(170px, 24vw, 340px);
  bottom: -8%;
  left: 0%;
  animation-name: orb-drift-c;
  animation-duration: 22s;
}

.hero-orb--d {
  width: clamp(120px, 17vw, 240px);
  height: clamp(120px, 17vw, 240px);
  bottom: 18%;
  right: 18%;
  animation-name: orb-drift-d;
  animation-duration: 16s;
}

.hero-orb--e {
  width: clamp(80px, 11vw, 160px);
  height: clamp(80px, 11vw, 160px);
  top: 38%;
  left: 28%;
  animation-name: orb-drift-e;
  animation-duration: 20s;
}

@keyframes orb-drift-a {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(22%, 28%, 0) scale(1.18);
  }
}

@keyframes orb-drift-b {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(-26%, 32%, 0) scale(0.9);
  }
}

@keyframes orb-drift-c {
  0% {
    transform: translate3d(0, 0, 0) scale(1.05);
  }

  100% {
    transform: translate3d(30%, -22%, 0) scale(0.85);
  }
}

@keyframes orb-drift-d {
  0% {
    transform: translate3d(0, 0, 0) scale(0.95);
  }

  100% {
    transform: translate3d(-32%, -18%, 0) scale(1.2);
  }
}

@keyframes orb-drift-e {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  100% {
    transform: translate3d(40%, -30%, 0) scale(1.3);
  }
}

/* Tablet: orbs shift toward the right edge so the content column on
   left stays clean. Width reduced from 60% to 65% (effectively the
   right side of the viewport since image columns stack on mobile). */
@media (max-width: 1024px) {
  .hero-orbs {
    width: 70%;
  }

  .hero-orb {
    filter: blur(24px) saturate(135%);
  }
}

/* Phone: hero stacks single-column. Orbs cover the top half of the
   hero (where the image is dominant) and content sits below. */
@media (max-width: 768px) {
  .hero-orchid {
    padding: 130px 0 150px;
  }

  .hero-orbs {
    width: 100%;
    height: 55%;
    top: 0;
  }

  .hero-orb {
    filter: blur(20px) saturate(130%);
  }
}

@media (prefers-reduced-motion: reduce) {

  .hero-orb,
  .hero-orb-frame {
    animation: none;
  }
}

/* ---------- Inline text link with arrow (Orchid-style secondary CTA) ---------- */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 500;
  color: var(--secondary);
  padding: 6px 4px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.hero-link:hover {
  color: var(--primary);
  border-color: var(--primary);
}

.hero-link span {
  transition: transform 160ms ease;
}

.hero-link:hover span {
  transform: translateX(3px);
}

/* ---------- Proof section atoms ---------- */
/* Inline SVG icon next to each .proof__checks bullet. Color inherits
   currentColor from the parent <li>, so the stroke matches whatever
   text color the list uses (primary brand tone). */
.proof-check__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--primary);
  /* Sit on the text baseline rather than the row's vertical center,
     so the icon visually aligns with the cap-height of the label. */
  transform: translateY(-0.5px);
}

.proof-stat__num {
  font-family: var(--font-heading);
  font-optical-sizing: auto;
  font-size: clamp(36px, 4.5vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--secondary);
}

.hero-display {
  position: relative;
}

.display-tabs {
  display: inline-flex;
  background: #F1F2F6;
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 14px;
  gap: 2px;
}

.display-tab {
  border: 0;
  background: transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--muted);
  border-radius: 7px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.display-tab.active {
  background: #fff;
  color: var(--secondary);
  box-shadow: 0 1px 3px rgba(11, 11, 15, 0.08);
}

.display-panel {
  position: relative;
}

.display-panel[hidden] {
  display: none;
}

/* ---------- .browser-frame ---------- */
.browser-frame {
  background: #fff;
  border: 1px solid #ECECEF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(11, 11, 15, 0.15);
  position: relative;
}

.browser-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #ECECEF;
  background: #FAFAFB;
}

.browser-bar .dots {
  display: inline-flex;
  gap: 6px;
}

.browser-bar .dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #E1E1E5;
}

.browser-url {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--muted);
  background: #fff;
  border: 1px solid #ECECEF;
  border-radius: 6px;
  padding: 4px 12px;
  flex: 1;
  text-align: center;
}

.browser-body {
  position: relative;
  min-height: 380px;
  padding: 28px;
  background: linear-gradient(180deg, #fff, #FAFAFB);
}

.browser-page {
  max-width: 360px;
}

.page-headline {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--secondary);
}

.page-sub {
  margin-top: 10px;
  font-size: 13px;
  color: #374151;
}

.page-stats {
  display: flex;
  gap: 24px;
  margin-top: 22px;
}

.page-stats>div {
  display: flex;
  flex-direction: column;
}

.page-stats .num {
  font-size: 18px;
  font-weight: 700;
  color: var(--primary);
}

.page-stats .lbl {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ---------- .chat-window ---------- */
.chat-window {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 300px;
  max-width: calc(100% - 40px);
  background: #fff;
  border: 1px solid #ECECEF;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px -10px rgba(11, 11, 15, 0.18);
  transition: transform 200ms ease, opacity 200ms ease;
}

.chat-window.hidden {
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
}

.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--primary);
  color: #fff;
}

.chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.chat-who {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  flex: 1;
}

.chat-who .name {
  font-size: 13px;
  font-weight: 600;
}

.chat-who .status {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}

.chat-close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.chat-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.chat-body {
  flex: 1;
  min-height: 180px;
  max-height: 220px;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #FAFAFB;
}

.chat-body .msg {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.4;
  max-width: 85%;
  word-wrap: break-word;
}

.chat-body .msg.them {
  align-self: flex-start;
  background: #fff;
  border: 1px solid #ECECEF;
  color: var(--secondary);
  border-bottom-left-radius: 4px;
}

.chat-body .msg.me {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
}

.typing-bubble {
  display: inline-flex;
  gap: 4px;
}

.typing-bubble span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: chat-typing 1.2s infinite ease-in-out;
}

.typing-bubble span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-bubble span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes chat-typing {

  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }

  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.chat-input {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #ECECEF;
  background: #fff;
}

.chat-input .field {
  flex: 1;
  font-size: 13px;
  color: var(--muted);
  padding: 8px 10px;
  background: #F1F2F6;
  border-radius: 8px;
}

.chat-input .send {
  background: var(--primary);
  color: #fff;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

/* ---------- .chat-launcher ---------- */
.chat-launcher {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 0;
  background: var(--primary);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 12px 24px -6px rgba(46, 75, 255, 0.45);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 160ms ease;
}

.chat-launcher:hover {
  transform: scale(1.06);
}

.chat-launcher.hidden {
  display: none;
}

/* ---------- .code-window ---------- */
.code-window {
  background: #0B0B0F;
  color: #E6E7EB;
  border-radius: 12px;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  box-shadow: 0 30px 60px -30px rgba(11, 11, 15, 0.4);
}

.code-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #1A1A20;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.code-dots {
  display: inline-flex;
  gap: 6px;
}

.code-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.code-body {
  padding: 16px 18px;
  white-space: pre;
  overflow-x: auto;
}

.code-body>div {
  display: block;
}

.code-body .ln {
  display: inline-block;
  width: 28px;
  color: rgba(230, 231, 235, 0.32);
  user-select: none;
  text-align: right;
  margin-right: 14px;
}

.code-body .cm {
  color: #8B8E99;
  font-style: italic;
}

.code-body .tg {
  color: #A5B4FC;
}

.code-body .at {
  color: var(--accent);
}

.code-body .st {
  color: #86EFAC;
}

.code-cursor {
  display: inline-block;
  width: 7px;
  height: 14px;
  background: #fff;
  margin-left: 2px;
  animation: code-blink 1s steps(2) infinite;
  vertical-align: middle;
}

@keyframes code-blink {
  to {
    opacity: 0;
  }
}

.code-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #1A1A20;
  font-size: 11px;
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.code-foot .copy-btn {
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.06em;
  font-size: 11px;
}

/* ---------- Legacy Logos strip (still used by some other templates) ---------- */
.logos {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid #ECECEF;
}

.logos-inner {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
}

.logos .label {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.fauxlogo {
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 20px);
  color: #6B7280;
  letter-spacing: 0.01em;
  white-space: nowrap;
  opacity: 0.7;
  user-select: none;
  -webkit-user-select: none;
  transition: opacity 200ms ease-out, color 200ms ease-out;
}

.fauxlogo.s2 {
  font-style: italic;
  font-weight: 600;
}

.fauxlogo.s3 {
  font-weight: 500;
  letter-spacing: 0.06em;
}

/* ============================================================
   Trusted-by marquee strip
   - Infinite seamless horizontal scroll (track duplicated 2x)
   - GPU-only via transform: translateX
   - Linear easing for constant motion (per Emil framework:
     "marquee" → linear)
   - Edge mask fades logos in/out at viewport edges
   - Pauses on hover (lets visitors read a name)
   - Honors prefers-reduced-motion
   ============================================================ */
/* Outer section: white background, full-bleed.
   Inner frame: bg-soft cream block with subtle vertical edge rules,
   sits inset from the section sides — gives the "framed" panel feel
   from the reference. */

.trust-strip__frame {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(56px, 7vw, 96px) clamp(16px, 4vw, 56px);
  border-left: 1px solid rgba(11, 11, 15, 0.08);
  border-right: 1px solid rgba(11, 11, 15, 0.08);
  position: relative;
}

.trust-strip__label {
  text-align: center;
  font-family: var(--font-body);
  font-size: clamp(14px, 1.1vw, 16px);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #374151;
  margin: 0 0 clamp(28px, 3vw, 40px);
}

.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Edge fade — logos drift in/out instead of clipping abruptly.
     Mask works on alpha, so the cream `bg-soft` behind shows through
     where mask is transparent. */
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0,
      #000 10%,
      #000 90%,
      transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0,
      #000 10%,
      #000 90%,
      transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 36s linear infinite;
  will-change: transform;
}

.marquee__row {
  display: flex;
  align-items: center;
  gap: clamp(40px, 6vw, 72px);
  padding-right: clamp(40px, 6vw, 72px);
  flex-shrink: 0;
}

.marquee .fauxlogo:hover {
  opacity: 1;
  color: var(--secondary);
}

/* Track is duplicated, so a full -50% translate looks like a seamless loop. */
@keyframes marquee-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
    /* Allow horizontal scroll instead so the content stays accessible */
    overflow-x: auto;
  }
}

/* ---------- .how-slide (carousel) ---------- */
.how-slide {
  position: relative;
  background: #FAFAFB;
  border: 1px solid #ECECEF;
  border-radius: 16px;
  padding: 48px;
  overflow: hidden;
}

.how-slide__panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.how-slide__panel[hidden] {
  display: none;
}

@media (max-width: 900px) {
  .how-slide {
    padding: 28px;
  }

  .how-slide__panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

.step-num {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 14px;
}

.how-slide__text h3 {
  font-size: 26px;
  font-weight: 700;
  color: var(--secondary);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.how-slide__text p {
  font-size: 15px;
  color: #374151;
  margin: 0 0 18px;
  line-height: 1.6;
  max-width: 48ch;
}

.how-slide__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.how-slide__bullets li {
  position: relative;
  padding-left: 22px;
  font-size: 14px;
  color: #374151;
}

.how-slide__bullets li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--primary);
  font-weight: 700;
}

.how-slide__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 36px;
}

.how-slide__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #ECECEF;
  background: #fff;
  color: var(--secondary);
  cursor: pointer;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 160ms ease, color 160ms ease;
}

.how-slide__btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.how-slide__dots {
  display: inline-flex;
  gap: 8px;
}

.how-slide__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  background: #D1D5DB;
  cursor: pointer;
  padding: 0;
  transition: background 160ms ease, transform 160ms ease;
}

.how-slide__dot--active {
  background: var(--primary);
  transform: scale(1.25);
}

/* ---------- .mock (step illustrations) ---------- */
.mock {
  background: #fff;
  border: 1px solid #ECECEF;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 40px -20px rgba(11, 11, 15, 0.1);
}

.mock__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #FAFAFB;
  border-bottom: 1px solid #ECECEF;
  font-size: 12px;
  color: var(--muted);
}

.mock__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E1E1E5;
  display: inline-block;
}

.mock__title {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

.mock__body {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mock__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F1F2F6;
}

.mock__row--last {
  border-bottom: 0;
  padding-bottom: 0;
}

.mock__lbl {
  color: var(--muted);
  font-size: 12px;
}

.mock__faint {
  color: var(--muted);
  font-size: 12px;
}

.mock code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: #F1F2F6;
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--secondary);
}

.mock__pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}

.mock__pill--ok {
  background: #DCFCE7;
  color: #15803D;
}

.mock__pill--pending {
  background: #FEF3C7;
  color: #92400E;
}

.mock__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  background: #0B0B0F;
  color: #E6E7EB;
  padding: 14px;
  border-radius: 8px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------- .features grid ---------- */
.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 900px) {
  .features {
    grid-template-columns: 1fr;
  }
}

.feat {
  background: #fff;
  border: 1px solid #ECECEF;
  border-radius: 12px;
  padding: 26px;
  transition: border-color 160ms ease, transform 160ms ease;
}

.feat:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.feat-glyph {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(46, 75, 255, 0.08);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
}

.feat-tag {
  margin-top: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.feat h3 {
  margin: 8px 0 8px;
  font-size: 18px;
  font-weight: 700;
  color: var(--secondary);
}

.feat p {
  margin: 0;
  font-size: 14px;
  color: #374151;
  line-height: 1.55;
}

/* ---------- Pricing ---------- */
.pricing-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}

.cycle-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 36px;
}

.cycle-toggle {
  display: inline-flex;
  background: #F1F2F6;
  padding: 4px;
  border-radius: 999px;
  gap: 2px;
}

.cycle-toggle__btn {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 160ms ease, color 160ms ease;
}

.cycle-toggle__btn.active {
  background: #fff;
  color: var(--secondary);
  box-shadow: 0 1px 3px rgba(11, 11, 15, 0.08);
}

.cycle-toggle__save {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary);
  background: rgba(46, 75, 255, 0.1);
  padding: 2px 8px;
  border-radius: 999px;
}

.plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 1100px) {
  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .plans {
    grid-template-columns: 1fr;
  }
}

.plan {
  position: relative;
  background: #fff;
  border: 1px solid #ECECEF;
  border-radius: 14px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
}

.plan.featured,
.plan--featured {
  border-color: var(--primary);
  border-width: 2px;
  padding: 25px 21px;
}

.plan-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 999px;
}

.plan-name {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}

.plan-price {
  margin: 14px 0 6px;
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--secondary);
}

.plan-price .amount {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.plan-price .per {
  font-size: 13px;
  color: var(--muted);
  margin-left: 4px;
}

.plan-desc {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 18px;
  min-height: 2.4em;
}

.plan-cta {
  margin-bottom: 18px;
}

.plan ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: #374151;
  border-top: 1px solid #F1F2F6;
  padding-top: 16px;
}

.plan ul li {
  position: relative;
  padding-left: 20px;
}

.plan ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.plan-custom .plan-tag {
  background: var(--secondary);
}

.plans-with-custom.is-monthly .cycle-yearly {
  display: none;
}

.plans-with-custom.is-yearly .cycle-monthly {
  display: none;
}

/* ---------- .foot (footer) ---------- */
.foot {
  background: #fff;
  border-top: 1px solid #ECECEF;
  padding: 64px 0 32px;
  margin-top: 80px;
}

.foot-subscribe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  padding-bottom: 40px;
  border-bottom: 1px solid #ECECEF;
  margin-bottom: 40px;
}

@media (max-width: 800px) {
  .foot-subscribe {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.foot-subscribe__title {
  margin: 8px 0 6px;
  font-size: 22px;
  font-weight: 700;
  color: var(--secondary);
}

.foot-subscribe__lede {
  margin: 0;
  font-size: 14px;
  color: #374151;
}

.foot-subscribe__form {
  display: flex;
  gap: 8px;
}

.foot-subscribe__input {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  padding: 12px 14px;
  border: 1px solid #ECECEF;
  border-radius: 8px;
  background: #fff;
  color: var(--secondary);
  min-height: 44px;
}

.foot-subscribe__input:focus {
  outline: 2px solid var(--primary);
  outline-offset: 0;
  border-color: var(--primary);
}

.foot-subscribe__msgs {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.foot-subscribe__msg {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.foot-subscribe__msg--success {
  background: #DCFCE7;
  color: #15803D;
}

.foot-subscribe__msg--error {
  background: #FEE2E2;
  color: #B91C1C;
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 32px;
}

@media (max-width: 900px) {
  .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

.foot-col h4 {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary);
  letter-spacing: 0.04em;
}

.foot-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}

.foot-col ul a {
  color: #374151;
  transition: color 160ms ease;
}

.foot-col ul a:hover {
  color: var(--primary);
}

.foot .brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: var(--secondary);
  margin-bottom: 16px;
}

.foot .brand-mark--img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.foot .brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.foot-contact {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.foot-contact a {
  color: inherit;
}

.foot-contact a:hover {
  color: var(--primary);
}

.foot-tagline {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 32ch;
}

.foot-regions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.foot-bot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid #ECECEF;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

.foot-tag {
  display: inline-flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   Proof section — Stripe-style framed panel
   - bg-soft cream inside a top border
   - 4 stat tabs in a row with vertical separators
   - SVG curves visualization below, GSAP-animated
   - Click a stat → curves morph + accent color shifts
   ============================================================ */
.proof {
  background: var(--bg-soft);
  /* Positioning context for the atmospheric .proof__viz-bg layer
     which now lives as a direct child of .proof. */
  position: relative;
  /* Allow the bloom to bleed downward into the page beneath this
     section. The .proof__frame still clips its own contents. */
  overflow: hidden;
}

.proof__frame {
  max-width: 1400px;
  margin: 0 auto;
  border-left: 1px solid rgba(11, 11, 15, 0.08);
  border-right: 1px solid rgba(11, 11, 15, 0.08);
  padding: clamp(48px, 6vw, 88px) 0 0;
  position: relative;
  overflow: hidden;
}

.proof__head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.proof__title {
  font-family: var(--font-heading);
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
  color: var(--secondary);
}

/* Checks row sitting directly under the heading — small + inline,
   carrying the supporting promises without taking center stage. */
.proof__checks {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(14px, 2vw, 28px);
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.proof__checks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Stats row — buttons styled as tabs, vertical separators between them */
.proof__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgb(255, 255, 255);
  border-bottom: 1px solid rgba(255, 255, 255);
  position: relative;
  z-index: 2;
}

.proof-stat {
  background: transparent;
  border: 0;
  border-left: 1px solid rgba(255, 255, 255);
  text-align: center;
  padding: clamp(28px, 3.5vw, 44px) clamp(8px, 1.5vw, 20px);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: background 240ms cubic-bezier(0.25, 1, 0.5, 1),
    color 240ms cubic-bezier(0.25, 1, 0.5, 1);
  color: var(--muted);
  position: relative;
}

.proof-stat:first-child {
  border-left: 0;
}

.proof-stat:hover {
  background: rgba(11, 11, 15, 0.03);
}

.proof-stat__num {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--muted);
  transition: color 240ms cubic-bezier(0.25, 1, 0.5, 1);
}

.proof-stat__lbl {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--muted);
}

.proof-stat.is-active .proof-stat__num,
.proof-stat.is-active {
  color: var(--secondary);
}

.proof-stat.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  /* Per-tab color — falls back to brand primary if a tab doesn't
     declare its own. Each tab's --tab-color matches the canvas
     illustration color of that mode, so the underline reads as the
     same "thread" as the visualization. */
  background: var(--tab-color, var(--primary));
  transition: background 240ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Per-tab active-underline colors — match the canvas illustration
   palette in landing.html (COLORS table). Full opacity since the
   underline is a 2px crisp accent, not an atmospheric layer.
   These set --tab-color on individual buttons (drives ::after). */
.proof-stat[data-stat="install"] {
  --tab-color: rgb(33, 80, 219);
}

/* brand blue       */
.proof-stat[data-stat="uptime"] {
  --tab-color: rgb(16, 185, 129);
}

/* status-ok green  */
.proof-stat[data-stat="domains"] {
  --tab-color: rgb(155, 95, 215);
}

/* brand purple     */
.proof-stat[data-stat="reply"] {
  --tab-color: rgb(225, 130, 70);
}

/* warm orange      */

/* Same color tokens promoted onto the viz wrapper based on the active
   data-mode, so the rest of the section (gradients, spotlights, etc.)
   can read var(--tab-color) and stay in sync with the active tab. */
.proof__viz[data-mode="install"] {
  --tab-color: rgb(33, 80, 219);
}

.proof__viz[data-mode="uptime"] {
  --tab-color: rgb(16, 185, 129);
}

.proof__viz[data-mode="domains"] {
  --tab-color: rgb(155, 95, 215);
}

.proof__viz[data-mode="reply"] {
  --tab-color: rgb(225, 130, 70);
}

/* Visualization area below stats — taller now (Stripe-scale) with
   gradient washes bleeding beyond the panel for a halo effect. */
.proof__viz {
  position: relative;
  height: clamp(320px, 36vw, 520px);
  /* Bleed slightly past the panel so the gradient halo extends
     beyond the panel's vertical borders */
  margin: 0 -120px;
  /* No overflow:hidden here — let the outer glow extend outward.
     Canvas + bg layer self-clip via their own bounds. */
}

.proof__curves {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  top: 0;
  pointer-events: none;
}

/* Atmospheric gradient bloom — now a direct child of .proof so it can
   span the whole section, not just the viz. Pinned to the bottom of
   the section with extended insets so the bloom escapes downward into
   the page below. Sits behind .proof__frame via z-index. */
.proof__viz-bg {
  position: absolute;
  /* Top-anchored to the stats/checks area, extends past the bottom
     edge of the section so the bloom can bleed into the next section. */
  inset: 30% -220px -260px -220px;
  pointer-events: none;
  z-index: 0;
  /* Default (install): brand-blue bloom at bottom-center. */
  background:
    radial-gradient(28% 22% at 50% 95%, rgba(90, 128, 255, 0.89), transparent 70%),
    radial-gradient(55% 45% at 50% 92%, rgba(96, 125, 255, 0.699), transparent 75%),
    radial-gradient(95% 75% at 50% 100%, rgba(140, 161, 255, 0.658), transparent 80%),
    radial-gradient(50% 50% at 28% 75%, rgba(135, 167, 255, 0.425), transparent 75%),
    radial-gradient(50% 50% at 72% 75%, rgba(84, 144, 255, 0.3), transparent 75%),
    linear-gradient(180deg, var(--bg-soft) 0%, #e2e2fc 55%, #bdd6fb 100%);
  transition: background 800ms cubic-bezier(0.25, 1, 0.5, 1);
  -webkit-mask-image: radial-gradient(100% 90% at 50% 70%, #000 60%, transparent 100%);
  mask-image: radial-gradient(100% 90% at 50% 70%, #000 60%, transparent 100%);
}

/* Per-mode bg variants — the bg is now outside .proof__viz, so we
   key the selector off the active viz mode using :has(). Same hue
   shifts as before, just rewritten for the new DOM structure. */
.proof:has(.proof__viz[data-mode="uptime"]) .proof__viz-bg {
  background:
    radial-gradient(28% 22% at 50% 95%, rgba(110, 245, 200, 0.986), transparent 70%),
    radial-gradient(55% 45% at 50% 92%, rgba(140, 250, 208, 0.6), transparent 75%),
    radial-gradient(95% 75% at 50% 100%, rgba(170, 255, 234, 0.38), transparent 80%),
    radial-gradient(50% 50% at 28% 75%, rgba(130, 240, 189, 0.3), transparent 75%),
    radial-gradient(50% 50% at 72% 75%, rgba(150, 250, 217, 0.3), transparent 75%),
    linear-gradient(180deg, var(--bg-soft) 0%, #eafbf7 55%, #c9f2e1 100%);
}

.proof:has(.proof__viz[data-mode="domains"]) .proof__viz-bg {
  background:
    radial-gradient(28% 22% at 50% 95%, rgba(180, 110, 230, 0.85), transparent 70%),
    radial-gradient(55% 45% at 50% 92%, rgba(195, 135, 235, 0.60), transparent 75%),
    radial-gradient(95% 75% at 50% 100%, rgba(220, 170, 245, 0.38), transparent 80%),
    radial-gradient(50% 50% at 28% 75%, rgba(190, 135, 230, 0.30), transparent 75%),
    radial-gradient(50% 50% at 72% 75%, rgba(210, 160, 240, 0.30), transparent 75%),
    linear-gradient(180deg, var(--bg-soft) 0%, #F4EAFB 55%, #E2C8F4 100%);
}

.proof:has(.proof__viz[data-mode="reply"]) .proof__viz-bg {
  background:
    radial-gradient(28% 22% at 50% 95%, rgba(255, 155, 75, 0.85), transparent 70%),
    radial-gradient(55% 45% at 50% 92%, rgba(255, 175, 100, 0.60), transparent 75%),
    radial-gradient(95% 75% at 50% 100%, rgba(255, 200, 140, 0.38), transparent 80%),
    radial-gradient(50% 50% at 28% 75%, rgba(255, 170, 90, 0.30), transparent 75%),
    radial-gradient(50% 50% at 72% 75%, rgba(255, 185, 110, 0.30), transparent 75%),
    linear-gradient(180deg, var(--bg-soft) 0%, #FCF2DC 55%, #FBDBA2 100%);
}

/* Lift .proof__frame above the bloom so panel content (stats, viz,
   borders) reads cleanly on top of the atmospheric layer. */
.proof__frame {
  position: relative;
  z-index: 1;
}

/* Canvas sits flush inside the viz box at full height — no overflow
   crop now that the box itself is tall enough to contain the work. */
.proof__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  top: 0;
  pointer-events: none;
  display: block;
}

/* (older .proof__checks pill rule removed — checks now sit in .proof__head) */

@media (max-width: 900px) {
  .proof__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .proof-stat:nth-child(3) {
    border-left: 0;
    border-top: 1px solid rgba(11, 11, 15, 0.08);
  }

  .proof-stat:nth-child(4) {
    border-top: 1px solid rgba(11, 11, 15, 0.08);
  }

  .proof__viz {
    margin: 0 -16px;
    height: clamp(240px, 50vw, 360px);
  }

  .proof__checks {
    position: static;
    transform: none;
    margin: 24px auto 32px;
    width: fit-content;
  }
}

/* ════════════════════════════════════════════════════════════════════
   HOW IT WORKS — three canvas illustrations on a dark indigo ground.
   Flat surfaces (no card borders/shadows). Columns separated by
   1px hairline vertical rules. Container is .container-fluid so it
   aligns with the rest of the marketing layout.
   ════════════════════════════════════════════════════════════════════ */

/* ── Section ground (light mode) ──────────────────────────────────── */
.how {
  position: relative;
  overflow: hidden;
  /* White ground with a very subtle tinted gradient — keeps it warm
     and intentional, never flat clinical white. */
  background: var(--bg);
  color: var(--secondary);
}


/* Container framing — 1px hairline borders on the left and right edges
   of the .container-fluid inside .how. Matches the proof section's
   "framed panel" treatment so the marketing layout feels consistent. */
.how>.container-fluid {
  position: relative;
  border-left: 1px solid rgba(11, 11, 15, 0.08);
  border-right: 1px solid rgba(11, 11, 15, 0.08);
  /* Sits above .how__atmos so the borders aren't washed out */
  z-index: 1;
}

/* ── Header — Stripe-style. Bold lead clause + dimmer continuation. ── */
.how__head {
  max-width: 760px;
  margin: 0 0 clamp(12px, 3vw, 24px);
  padding: 4rem 0 2rem;
  position: relative;
  z-index: 1;
}

.eyebrow--on-dark {
  display: inline-block;
  color: var(--primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.how__title {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.32;
  letter-spacing: -0.012em;
  color: rgba(11, 11, 15, 0.55);
  text-transform: uppercase;
  margin: 8px 0;
}

.how__title-lead {
  color: var(--secondary);
  font-weight: 600;
}

.how__title-rest {
  color: rgba(11, 11, 15, 0.55);
  font-weight: 400;
}

.how__lede {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  max-width: 52ch;
  color: rgba(11, 11, 15, 0.55);
  text-transform: uppercase;
  margin: 0;
}

/* ── Three-column grid with hairline dividers ────────────────────── */
.how__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 2rem 0 4rem;
  gap: 0;
}

@media (max-width: 900px) {
  .how__grid {
    grid-template-columns: 1fr;
    border-bottom: 0;
  }
}

/* ── Per-card layout — flat, no borders, no shadows ───────────────── */
.how-card {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.4vw, 20px);
  padding: 12px;
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--how-stagger, 0ms);
}

.how-card:first-child {
  border-left: 0;
}

.how-card.is-in {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .how-card {
    border-left: 0;
    border-top: 1px solid rgba(11, 11, 15, 0.08);
  }

  .how-card:first-child {
    border-top: 0;
  }
}

/* ── Canvas mount — glassmorphism panels with 3px white border.
   Each panel uses one of the three brand colors (blue, accent pink,
   ink near-black) as the dominant gradient hue. The 3px white border
   + soft inset glow + backdrop blur fallback gives the glass effect. */
.how-card__art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 24px;
  overflow: hidden;
  /* 3px white border — the glassmorphism anchor */
  border: 4px solid rgba(255, 255, 255, 0.85);
  /* Layered elevation — colored glow tinted by panel hue + clean shadow */
  box-shadow:
    /* Subtle inner highlight (light catching glass edge) */
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18),
    /* Drop shadow — tinted in JS via panel-specific class */
    0 18px 40px -22px var(--how-shadow, rgba(11, 11, 15, 0.28)),
    0 4px 12px -6px var(--how-shadow, rgba(11, 11, 15, 0.16));
}

.how-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* ── Per-card glassmorphism gradients — brand-only palette.
   Each card claims one of the three brand colors as its identity:
     01 → primary blue   #2150db
     02 → ink near-black #0B0B0F
     03 → accent pink    #e94acd
   Saturated diagonal gradient + frosted highlight + dark vignette
   gives the glass depth. White 3px border is set above. */

/* 01 Workspace — PRIMARY BLUE glassmorphism */
.how-card:has([data-how-canvas="workspace"]) .how-card__art {
  --how-shadow: rgba(33, 80, 219, 0.32);
  background:
    /* Color core — saturated brand blue at full opacity diagonal */
    radial-gradient(110% 95% at 85% 95%, rgba(20, 50, 180, 0.55), transparent 75%),
    linear-gradient(135deg, #5a7af0 0%, #2150db 60%, #1a3fae 100%);
}

/* 02 Domains — ACCENT PINK glassmorphism */
.how-card:has([data-how-canvas="domains"]) .how-card__art {
  --how-shadow: rgba(233, 74, 205, 0.32);
  background:
    radial-gradient(110% 95% at 85% 95%, rgba(180, 30, 145, 0.55), transparent 75%),
    linear-gradient(135deg, #f085df 0%, #e94acd 60%, #b1259a 100%);
}

/* 03 Embed — INK NEAR-BLACK glassmorphism (code = ink) */
.how-card:has([data-how-canvas="embed"]) .how-card__art {
  --how-shadow: rgba(11, 11, 15, 0.42);
  background:
    /* Mid-ink violet tint catches light off the black */
    radial-gradient(110% 95% at 85% 95%, rgba(40, 30, 70, 0.85), transparent 75%),
    linear-gradient(135deg, #2a2840 0%, #16151f 60%, #0B0B0F 100%);
}

/* ── Text content ─────────────────────────────────────────────────── */
/* Title row — large display numeral sits inline with the title text.
   Number is in the heading serif at outsized scale, brand-blue accent
   color, slightly translated so its baseline aligns with the title cap
   height. Creates a typographic rhythm column-to-column. */
.how-card__title {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 1.4vw, 20px);
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--secondary);
  margin: 0;
}

.how-card__num {
  /* Large, lighter-weight display numeral — brand-blue accent */
  font-family: var(--font-heading);
  font-size: clamp(34px, 3.6vw, 48px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(33, 80, 219, 0.55);
  /* Soft glow on light bg is much subtler than on dark */
  text-shadow: 0 1px 18px rgba(33, 80, 219, 0.10);
  flex-shrink: 0;
  transform: translateY(-2px);
  font-variant-numeric: tabular-nums;
  position: relative;
}

/* Thin vertical hairline separator between numeral and title text */
.how-card__num::after {
  content: "";
  position: absolute;
  right: calc(-1 * clamp(7px, 0.7vw, 10px));
  top: 18%;
  bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg,
      rgba(33, 80, 219, 0) 0%,
      rgba(33, 80, 219, 0.30) 50%,
      rgba(33, 80, 219, 0) 100%);
}

.how-card__title-text {
  flex: 1;
}

.how-card__body {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0;
  max-width: 36ch;
}

.how-card__bullets {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  font-size: 14px;
  color: rgba(11, 11, 15, 0.62);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.how-card__bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  /* Subtle baseline transition — bullet brightens on row hover so the
     list feels alive, not just static type. */
  transition: color 200ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* ── Custom bullet — the four-point "sparkle" from the AssistChat
   logo. Implemented with mask-image so it always paints in the
   brand color and stays crisp at any DPR. The SVG is a four-point
   star drawn as a smooth diamond with curved concave sides — same
   silhouette as the logo glyph. */
.how-card__bullets li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: var(--primary);
  /* Sparkle path: 4-point star with curved concave sides */
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 C12 8 16 12 24 12 C16 12 12 16 12 24 C12 16 8 12 0 12 C8 12 12 8 12 0 Z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0 C12 8 16 12 24 12 C16 12 12 16 12 24 C12 16 8 12 0 12 C8 12 12 8 12 0 Z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* A soft glow gives the sparkle dimensional warmth — like the logo */
  filter: drop-shadow(0 0 4px rgba(33, 80, 219, 0.22));
  /* Idle breath — barely perceptible, gives the list a subtle pulse */
  animation: how-bullet-breath 3.6s ease-in-out infinite;
  /* Stagger via CSS variable so each row breathes at a different phase */
  animation-delay: var(--bullet-delay, 0s);
}

.how-card__bullets li:nth-child(1) {
  --bullet-delay: 0s;
}

.how-card__bullets li:nth-child(2) {
  --bullet-delay: 0.6s;
}

.how-card__bullets li:nth-child(3) {
  --bullet-delay: 1.2s;
}

@keyframes how-bullet-breath {

  0%,
  100% {
    opacity: 0.78;
    transform: scale(0.92);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .how-card__bullets li::before {
    animation: none;
  }
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .how-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   FEATURES (.fx) — reference-style staggered glassmorphism grid.
   Soft cream ground with a faint dot grid pattern. Six glass cards in
   a 3×2 layout where the middle column is shifted up to create a
   gentle "brick wave." Each card carries a gradient icon tile + a
   line-icon glyph. Container side rules painted via ::before/::after
   on .container-fluid (no border-left/right used, per spec).
   ════════════════════════════════════════════════════════════════════ */
.fx {
  position: relative;
  overflow: hidden;
  /* Cream ground with very subtle brand-blue tint top-right + faint
     pink tint bottom-left — warm intentional white, never clinical. */
  background: var(--bg-soft);
  padding: clamp(72px, 8vw, 120px) 0 0;
}

/* Dotted grid pattern — uniform 22px spacing, very low contrast.
   Sits behind everything; the cards lift above it visually. */
.fx::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(11, 11, 15, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(90% 80% at 50% 60%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(90% 80% at 50% 60%, #000 30%, transparent 100%);
  opacity: 0.55;
}

/* Container side rules — painted via pseudo-elements on the .fx__wrap
   container (not border-left/right). Each is a 1px column at the
   container's left/right edge, faded out at the top + bottom via a
   vertical gradient so they read as quiet typographic margins. */
.fx__wrap {
  position: relative;
}

/* Container side rule with a curved top entrance.
   Shape: a 1px vertical line runs the full height of the left edge.
   At the very top, it curves smoothly to the right and continues
   horizontally, terminating at the badge's left edge — aligned to the
   badge's vertical center so the curve appears to "feed into" it. */
.fx__wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  /* Width = distance from container left edge to the badge's left edge.
     The badge sits at padding-left clamp(8px, 2vw, 16px) of .fx__head,
     so the curve ends at that x-position. */
  width: clamp(120px, 12vw, 200px);
  pointer-events: none;
  /* SVG viewBox 200×800 — stretched to fill the box.
     Path 1 (curve + horizontal stub, 18% opacity):
       M 1 36   start at the top of the curve, x=1 (left edge), y=36
       Q 1 16, 26 16   quadratic curve up + right, landing at y=16
       L 200 16   horizontal line to the right edge of the box (badge edge)
     The horizontal y=16 aligns with the badge's vertical center.
     Path 2 (vertical line below the curve, 10% opacity):
       M 1 36 L 1 800   straight down to the bottom of the container. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 800' preserveAspectRatio='none' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 1 36 Q 1 16 26 16 L 200 16' opacity='0.1'/><path d='M 1 36 L 1 800' opacity='0.1'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 3px -8px;
}

/* ── Header — chip + title + lede + CTA row, left-aligned ───────── */
.fx__head {
  max-width: 680px;
  margin: 0 0 clamp(56px, 6vw, 96px);
  position: relative;
  z-index: 1;
  padding-left: clamp(8px, 2vw, 16px);
}

.fx__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(11, 11, 15, 0.78);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(11, 11, 15, 0.08);
  border-radius: 999px;
  box-shadow: 0 2px 10px -4px rgba(11, 11, 15, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.fx__chip-spark {
  color: var(--accent);
  flex-shrink: 0;
}

.fx__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--secondary);
  margin: 22px 0 18px;
  max-width: 18ch;
}

.fx__title-italic {
  color: var(--primary);
}

.fx__lede {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0 0 28px;
  max-width: 58ch;
}

.fx__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── 3×2 grid with brick stagger on middle column ─────────────────── */
.fx__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  padding: 0 clamp(8px, 2vw, 16px) clamp(60px, 9vw, 100px);
}

/* Middle column shifted UP — creates the wave (brick) pattern.
   Applied with translateY on transform so it stays GPU-accelerated. */
.fx__grid>.fx-card:nth-child(2),
.fx__grid>.fx-card:nth-child(5) {
  transform: translateY(-36px);
}

@media (max-width: 980px) {
  .fx__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fx__grid>.fx-card:nth-child(2),
  .fx__grid>.fx-card:nth-child(5) {
    transform: none;
  }
}

@media (max-width: 620px) {
  .fx__grid {
    grid-template-columns: 1fr;
  }
}

/* ── Card — reference-style center-aligned with floating icon "tab".
   Body shows the dotted grid + soft color cells THROUGH the glass.
   Icon protrudes ABOVE the card on a small rounded "tab" notch. */
/* ── Card — TWO zones: illustration banner + content. ──────────────── */
.fx-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(11, 11, 15, 0.04),
    0 2px 2px rgba(33, 50, 120, 0.18);
  transition:
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 320ms cubic-bezier(0.16, 1, 0.3, 1);
  opacity: 0;
  --fx-stagger: 0ms;
  animation: fx-card-in 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--fx-stagger) forwards;
}

.fx-card:hover {
  transform: translateY(-4px);
}

.fx-card:nth-child(2):hover,
.fx-card:nth-child(5):hover {
  transform: translateY(-40px);
}

.fx-card:nth-child(1) {
  --fx-stagger: 0ms;
}

.fx-card:nth-child(2) {
  --fx-stagger: 80ms;
}

.fx-card:nth-child(3) {
  --fx-stagger: 160ms;
}

.fx-card:nth-child(4) {
  --fx-stagger: 240ms;
}

.fx-card:nth-child(5) {
  --fx-stagger: 320ms;
}

.fx-card:nth-child(6) {
  --fx-stagger: 400ms;
}

@keyframes fx-card-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fx__grid>.fx-card:nth-child(2),
.fx__grid>.fx-card:nth-child(5) {
  animation-name: fx-card-in-brick;
}

@keyframes fx-card-in-brick {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(-36px);
  }
}

/* ── TOP zone — illustration banner ────────────────────────────────
   Background: a fine SQUARE TILE grid (small rounded cells tiling the
   whole banner) with a faint warm wash. The grid is drawn with TWO
   layered linear gradients masquerading as a tile pattern. */
.fx-card__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 1.4;
  /* Banner ground — warm-tinted off-white that fades from brighter
     center to slightly cooler edges. Gives the area a soft "stage" feel
     where the icon sits in the lit center. */
  background:
    var(--bg);
  overflow: hidden;
  /* Subtle inset top shadow — gives the impression the banner is recessed
     into the card surface, depth without a heavy border. */
  box-shadow: inset 0 1px 2px rgba(11, 11, 15, 0.04);
}

/* The grid pattern itself lives on a pseudo-element so we can apply a
   radial mask that fades the rules toward the banner edges. Without
   this, the grid would terminate in hard-clipped half-cells.
   Rules use a warm-tinted ink (60,50,70) at low alpha for warmth
   instead of generic neutral grey. Cells are 30×30 — airier than the
   previous 18×18 grid, closer to the reference scale. */
.fx-card__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(60, 50, 70, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(60, 50, 70, 0.05) 0px, transparent 4px);
  background-size: 30px 30px, 30px 30px;
  background-position: -1px -1px, -1px -1px;
  /* Mask: keep rules crisp through the center, fade out toward the
     edges so the grid feels naturally diffused — no hard cell clipping. */
  -webkit-mask-image: radial-gradient(95% 80% at 50% 50%, #000 30%, transparent 100%);
  mask-image: radial-gradient(95% 80% at 50% 50%, #000 30%, transparent 100%);
}

/* ── Colored tile highlights — larger filled cells in the card's hue,
   scattered across the banner. Sized to span 2×2 grid cells (≈36px)
   with soft 6px corner radius — matches the reference where colored
   tiles are clearly visible blocks, not pinpricks. */
.fx-card__deco {
  position: absolute;
  border-radius: 6px;
  background: var(--fx-tile-hue, rgba(33, 80, 219, 0.20));
  pointer-events: none;
}

.fx-card__deco--1 {
  width: 38px;
  height: 38px;
  top: 16%;
  left: 10%;
  opacity: 0.70;
}

.fx-card__deco--2 {
  width: 30px;
  height: 30px;
  top: 22%;
  right: 14%;
  opacity: 0.45;
}

.fx-card__deco--3 {
  width: 26px;
  height: 26px;
  bottom: 18%;
  left: 22%;
  opacity: 0.40;
}

/* Per-card hue for the banner tiles — same family as the icon tile */
.fx-card--blue {
  --fx-tile-hue: rgba(33, 80, 219, 0.32);
}

.fx-card--pink {
  --fx-tile-hue: rgba(233, 74, 205, 0.30);
}

.fx-card--mint {
  --fx-tile-hue: rgba(45, 195, 165, 0.32);
}

.fx-card--violet {
  --fx-tile-hue: rgba(140, 90, 230, 0.30);
}

.fx-card--amber {
  --fx-tile-hue: rgba(240, 165, 70, 0.34);
}

.fx-card--indigo {
  --fx-tile-hue: rgba(70, 90, 200, 0.32);
}

/* ── Icon tile — centered in banner, sits on top of two ghost wings.
   The two wings are full horizontal slabs that sit BEHIND the icon and
   extend OUTWARD from each side. Their inner half is hidden behind the
   icon; only the outer ~half is visible — like two pillows tucked under
   the icon's left and right sides. */
.fx-card__icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
  flex: none;
  /* Create a fresh stacking context so the pseudo-element z-index:-1
     stays scoped INSIDE this icon's own layer. Without this, the wings
     fall behind the entire banner background. With isolation, the
     stacking order inside the icon becomes:
       wings (-1) → colored bg (0) → svg (+1)
     so wings sit visually behind the colored cap, only their outer
     halves visible at each side. */
  isolation: isolate;
  /* Key-cap shadow stack */
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

/* Ghost wings — drawn ENTIRELY outside the icon's footprint so the
   colored cap is never overlapped. Each wing sits to one side of the
   icon, sticks outward, and tilts down-outward. No z-index conflict:
   wings render as siblings in the banner's stacking context, behind
   the icon's positive z-index. */

/* Left wing — RIGHT edge tucks 6px behind the icon's left side, then
   extends OUTWARD to the left. Pivots around its inner-right corner. */
.fx-card__icon::before {
  right: calc(100% - 6px);
  transform-origin: 100% 50%;
  transform: translateY(-50%) rotate(-10deg);
}

/* Right wing — mirror */
.fx-card__icon::after {
  left: calc(100% - 6px);
  transform-origin: 0% 50%;
  transform: translateY(-50%) rotate(10deg);
}

/* SVG glyph — front of the stack, always above wings + cap */
.fx-card__icon svg {
  width: 28px;
  height: 28px;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}

/* ── BOTTOM zone — content area, clean white, centered text ────────── */
.fx-card__content {
  padding: 22px 24px 26px;
  text-align: center;
  background: #fff;
}

/* Per-tile gradient pairs — each picks a brand-coherent two-stop ramp */
.fx-icon--blue {
  --fx-tile-shadow: rgba(33, 80, 219, 0.45);
  background: linear-gradient(135deg, #4f7bff 0%, #2150db 100%);
}

.fx-icon--pink {
  --fx-tile-shadow: rgba(233, 74, 205, 0.42);
  background: linear-gradient(135deg, #ff7ad8 0%, #e94acd 100%);
}

.fx-icon--mint {
  --fx-tile-shadow: rgba(45, 195, 165, 0.40);
  background: linear-gradient(135deg, #67dbb6 0%, #2bb59a 100%);
}

.fx-icon--violet {
  --fx-tile-shadow: rgba(140, 90, 230, 0.42);
  background: linear-gradient(135deg, #a585ff 0%, #7c4be0 100%);
}

.fx-icon--amber {
  --fx-tile-shadow: rgba(240, 165, 70, 0.42);
  background: linear-gradient(135deg, #ffc26e 0%, #f08a3a 100%);
}

.fx-icon--indigo {
  --fx-tile-shadow: rgba(70, 90, 200, 0.42);
  background: linear-gradient(135deg, #6e8aff 0%, #4156c8 100%);
}

/* ── Card text — centered like the reference ──────────────────────── */
.fx-card__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--secondary);
  margin: 0 0 10px;
  /* Sits above the grid pattern background */
  position: relative;
  z-index: 1;
}

.fx-card__body {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.58);
  margin: 0 auto;
  max-width: 28ch;
  /* prevents over-wide lines on big screens */
  position: relative;
  z-index: 1;
}

/* ── Reduced motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-card {
    opacity: 1;
    animation: none;
  }

  .fx__grid>.fx-card:nth-child(2),
  .fx__grid>.fx-card:nth-child(5) {
    transform: translateY(-36px);
  }

  .fx-card:hover {
    transform: none;
  }
}


/* ════════════════════════════════════════════════════════════════════
   PRICING (.px) — reference-styled grid with plus-corner ornaments.
   Soft cream/grey ground + subtle dotted texture. Container side rules
   painted via .container-fluid::before / ::after with a curved top
   entry, mirroring the features-section pattern.
   ════════════════════════════════════════════════════════════════════ */
.px {
  position: relative;
  overflow: hidden;
  background:
    var(--bg);
  padding: clamp(42px, 5vw, 80px) 0 clamp(40px, 5vw, 80px);
}

/* Soft dotted background pattern, masked toward edges. */
.px::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(11, 11, 15, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(90% 80% at 50% 60%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(90% 80% at 50% 60%, #000 30%, transparent 100%);
  opacity: 0.55;
}

/* Container side rules — same curved-top pattern as features. */
.px__wrap {
  position: relative;
}

.px__wrap::before,
.px__wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(120px, 12vw, 200px);
  pointer-events: none;
}

.px__wrap::before {
  left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 800' preserveAspectRatio='none' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 1 36 Q 1 16 26 16 L 200 16' opacity='0.18'/><path d='M 1 36 L 1 800' opacity='0.10'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Right-side mirror */
.px__wrap::after {
  right: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 800' preserveAspectRatio='none' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 199 36 Q 199 16 174 16 L 0 16' opacity='0.18'/><path d='M 199 36 L 199 800' opacity='0.10'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* ── Header ─────────────────────────────────────────────────────── */
.px__head {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 auto clamp(36px, 4vw, 56px);
  max-width: 720px;
  padding: 0 clamp(8px, 2vw, 16px);
}

/* Discount chip — light pill with an inner contrasting "%" badge */
.px__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(11, 11, 15, 0.08);
  box-shadow: 0 2px 10px -4px rgba(11, 11, 15, 0.08);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(11, 11, 15, 0.62);
  text-transform: uppercase;
}

.px__chip-pct {
  background: rgba(11, 11, 15, 0.06);
  color: var(--secondary);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0;
}

.px__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--secondary);
  margin: 18px 0 14px;
}

.px__title-italic {
  color: var(--primary);
}

.px__lede {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0 auto;
  max-width: 56ch;
}

/* ── Toggle — dark segmented control ────────────────────────────── */
.px__toggle {
  display: inline-flex;
  align-items: center;
  margin: 30px auto 0;
  padding: 5px;
  background: rgba(11, 11, 15, 0.05);
  border-radius: 999px;
  border: 1px solid rgba(11, 11, 15, 0.06);
}

.px__toggle-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 9px 22px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: rgba(11, 11, 15, 0.55);
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease;
}

.px__toggle-btn:hover {
  color: rgba(11, 11, 15, 0.85);
}

.px__toggle-btn.is-active {
  background: var(--secondary);
  color: #fff;
}

/* ── Skeleton loader ───────────────────────────────────────────── */
/* Drops into the same .px__grid slot as the real cards when
   plans_list is empty. Pure white surface, faint hairline borders,
   shimmer sweep across each placeholder bar. */
.px__grid--skeleton .px-card--skeleton {
  background: #ffffff;
  pointer-events: none;
}
.sk {
  display: block;
  position: relative;
  overflow: hidden;
  background: rgba(11, 11, 15, 0.06);
  border-radius: 8px;
}
.sk::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: translateX(-100%);
  animation: sk-shimmer 1.4s ease-in-out infinite;
}
@keyframes sk-shimmer {
  100% { transform: translateX(100%); }
}
.sk--pill   { width: 64px; height: 22px; border-radius: 999px; }
.sk--price  { width: 60%;  height: 56px; border-radius: 10px; }
.sk--line   { width: 80%;  height: 12px; border-radius: 6px; }
.sk--line-sm{ width: 55%;  height: 12px; border-radius: 6px; }
.sk--line-md{ width: 65%;  height: 12px; border-radius: 6px; }
.sk--cta    { width: 100%; height: 44px; border-radius: 999px; }
.px-card--skeleton .px-card__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.px-card--skeleton .px-card__features li::before { content: none; }
@media (prefers-reduced-motion: reduce) {
  .sk::after { animation: none; }
}

/* ── Grid ──────────────────────────────────────────────────────── */
/* Column count adapts to how many plans the admin published. The
   data-plan-count attribute is stamped on the grid in
   _pricing_section.html; CSS below drives the layout from it:
     1–3 plans  → that many columns in one row
     4 plans    → 4 in one row (wider container)
     5 plans    → 3 + 2  (first 3 cards on row 1, last 2 on row 2)
     6 plans    → 3 + 3
     7+         → wrap to 4-per-row
   Below 900px everything collapses to a single column. */
/* Flex-wrap pricing grid — cards wrap naturally as the viewport
   narrows. Each card has a ~280px floor + flexes to fill. No
   per-count rules; the browser does the math. */
.px__grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
  max-width: 1320px;
  border-top: 1px solid rgba(11, 11, 15, 0.10);
  border-bottom: 1px solid rgba(11, 11, 15, 0.10);
}
.px__grid > .px-card {
  flex: 1 1 280px;
  min-width: 280px;
  max-width: 360px;
}

@media (max-width: 900px) {
  .px__grid { border-bottom: 0; }
  .px__grid > .px-card { flex-basis: 100%; max-width: 100%; }
}

/* ── Card ──────────────────────────────────────────────────────── */
.px-card {
  position: relative;
  padding: 36px 32px 36px;
  background: transparent;
  border-left: 1px solid rgba(11, 11, 15, 0.10);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.px-card:first-child {
  border-left: 0;
}

/* Plus-sign corner ornaments — at every intersection of the grid.
   Drawn at the FOUR corners of every card via two pseudo-elements +
   two background-image plus glyphs. Implementation: each plus is an
   SVG cross painted via background-image on a tiny absolutely-
   positioned span. We use 4 corners per card via ::before, ::after
   and two extra spans. Simpler: paint plus glyphs on the GRID
   container at intersection points using background-image with
   multiple positions. */
.px__grid::before,
.px__grid::after {
  content: "";
  position: absolute;
  pointer-events: none;
  /* SVG plus sign — 12×12 viewBox */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 6 1 V 11 M 1 6 H 11' opacity='0.30'/></svg>");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  width: 12px;
  height: 12px;
}

/* Top-left + top-right plus */
.px__grid::before {
  top: -7px;
  left: -7px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 6 1 V 11 M 1 6 H 11' opacity='0.30'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 6 1 V 11 M 1 6 H 11' opacity='0.30'/></svg>");
  background-position: 0 0, calc(100% + 0px) 0;
  background-size: 12px 12px, 12px 12px;
  width: 100%;
  height: 12px;
  left: 0;
}

.px__grid::after {
  top: auto;
  bottom: -7px;
  left: 0;
  width: 100%;
  height: 12px;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 6 1 V 11 M 1 6 H 11' opacity='0.30'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 6 1 V 11 M 1 6 H 11' opacity='0.30'/></svg>");
  background-position: 0 0, 100% 0;
  background-size: 12px 12px, 12px 12px;
  background-repeat: no-repeat, no-repeat;
}

/* Middle column intersections — plus signs on each card's top + bottom
   border between columns. We draw via card ::before / ::after. */
.px-card:not(:first-child)::before {
  content: "";
  position: absolute;
  top: -7px;
  left: -6px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 6 1 V 11 M 1 6 H 11' opacity='0.30'/></svg>");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  pointer-events: none;
}

.px-card:not(:first-child)::after {
  content: "";
  position: absolute;
  bottom: -7px;
  left: -6px;
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 6 1 V 11 M 1 6 H 11' opacity='0.30'/></svg>");
  background-repeat: no-repeat;
  background-size: 12px 12px;
  pointer-events: none;
}

/* ── Card top: name pill ──────────────────────────────────────── */
.px-card__top {
  margin-bottom: 4px;
}

.px-card__pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: rgba(11, 11, 15, 0.05);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(11, 11, 15, 0.78);
}

/* ── Price line ──────────────────────────────────────────────── */
.px-card__price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-heading);
  margin: 2px 0;
}

.px-card__amount {
  font-size: clamp(36px, 4.2vw, 52px);
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--secondary);
}

/* Enterprise/Custom "Let's talk" — same baseline as a number price but
   reads as a phrase, so we drop the size a tad and lose the letter-spacing tightening. */
.px-card__amount--talk {
  font-size: clamp(28px, 3.2vw, 38px);
  letter-spacing: -0.01em;
  font-style: italic;
  font-weight: 500;
}

.px-card__pill--custom {
  background: rgba(11, 11, 15, 0.85);
  color: #fff;
}

.px-card__currency {
  font-size: 0.45em;
  font-weight: 500;
  color: rgba(11, 11, 15, 0.55);
  margin-right: 2px;
  vertical-align: super;
}

.px-card__per {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(11, 11, 15, 0.55);
}

/* ── Description ─────────────────────────────────────────────── */
.px-card__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(11, 11, 15, 0.58);
  margin: 0;
  min-height: 38px;
}

/* CTAs now use the shared .main-btn / .fill-btn classes — see those rules
   at the top of the stylesheet. Featured plan = .main-btn (filled),
   others = .main-btn.fill-btn (outlined). */

/* ── Features list ──────────────────────────────────────────── */
.px-card__features {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.px-card__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: rgba(11, 11, 15, 0.72);
}

.px-card__features li::before {
  content: "";
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: var(--accent);
  -webkit-mask-image: var(--sparkle-mask);
  mask-image: var(--sparkle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* ── Empty state ────────────────────────────────────────────── */
.px__empty {
  text-align: center;
  font-size: 15px;
  color: rgba(11, 11, 15, 0.55);
  margin: 60px auto 0;
}

/* ── Cycle toggle — animated price swap ─────────────────────────
   Both monthly + yearly variants live in the DOM. Each pair occupies
   the SAME grid cell so the parent reserves space for the taller of
   them and no layout shift happens during the swap. The inactive one
   slides up + fades out; the incoming one rises from below + fades in. */

/* Big amount — grid-stack the two amount spans so they share one cell.
   Row height is LOCKED to the amount's intrinsic line so layout never
   shifts regardless of which value is currently shown. */
.px-card__price {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: end;
  column-gap: 8px;
  position: relative;
  /* Fixed row height so a 2-digit ($19) vs 3-digit ($190) number can't
     change the price row's height. Matches the amount's font-size clamp. */
  min-height: clamp(36px, 4.2vw, 52px);
  line-height: 1;
}

.px-card__amount.cycle-monthly,
.px-card__amount.cycle-yearly {
  grid-column: 1;
  grid-row: 1;
  /* Each span is its own flex box anchored to the bottom-left of the
     fixed-height row so the baseline never shifts. */
  display: flex;
  align-items: flex-end;
  height: 100%;
  transition:
    opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.px-card__per {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  padding-bottom: 4px;
  /* nudge label to sit just above price baseline */
}

/* INACTIVE amount → faded + slid up */
.px__grid.is-monthly .px-card__amount.cycle-yearly,
.px__grid.is-yearly .px-card__amount.cycle-monthly {
  opacity: 0;
  transform: translateY(-14px);
  pointer-events: none;
}

/* ACTIVE amount → settled */
.px__grid.is-monthly .px-card__amount.cycle-monthly,
.px__grid.is-yearly .px-card__amount.cycle-yearly {
  opacity: 1;
  transform: translateY(0);
}

/* Initial baseline so the first paint matches default .is-monthly */
.px-card__amount.cycle-monthly {
  opacity: 1;
  transform: translateY(0);
}

.px-card__amount.cycle-yearly {
  opacity: 0;
  transform: translateY(14px);
}

/* Per-label (/Month vs /Year) — grid-stack the two inline spans inside
   the per container so they share a single column without overlap. */
.px-card__per {
  display: inline-grid;
  grid-template-columns: max-content;
}

.px-card__per .cycle-monthly,
.px-card__per .cycle-yearly {
  grid-column: 1;
  grid-row: 1;
  transition:
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Description — grid-stack the two text alternatives. Reserve a
   minimum height so a short string (one line) vs a longer one (two
   lines) doesn't shift everything below during the swap. */
.px-card__desc {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 2.6em;
  /* room for ~2 lines at the inherited size */
  align-items: start;
}

.px-card__desc .cycle-monthly,
.px-card__desc .cycle-yearly {
  grid-column: 1;
  grid-row: 1;
  transition:
    opacity 280ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* INACTIVE per + desc → faded + slid up */
.px__grid.is-monthly .px-card__per .cycle-yearly,
.px__grid.is-monthly .px-card__desc .cycle-yearly,
.px__grid.is-yearly .px-card__per .cycle-monthly,
.px__grid.is-yearly .px-card__desc .cycle-monthly {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* ACTIVE per + desc → settled */
.px__grid.is-monthly .px-card__per .cycle-monthly,
.px__grid.is-monthly .px-card__desc .cycle-monthly,
.px__grid.is-yearly .px-card__per .cycle-yearly,
.px__grid.is-yearly .px-card__desc .cycle-yearly {
  opacity: 1;
  transform: translateY(0);
}

/* Initial baseline for first paint */
.px-card__per .cycle-monthly,
.px-card__desc .cycle-monthly {
  opacity: 1;
  transform: translateY(0);
}

.px-card__per .cycle-yearly,
.px-card__desc .cycle-yearly {
  opacity: 0;
  transform: translateY(6px);
}

/* ════════════════════════════════════════════════════════════════════
   FINAL CTA (.cta) — closing pitch. Shares the brand pattern used in
   .fx and .px sections (dotted background, container side rules with
   curved-top entry, soft brand tints) so the page reads cohesively
   end-to-end. Distinctive twist: a stepper chip up top hints "you've
   walked the whole flow" and a large faded sparkle glyph behind the
   buttons closes the visual statement.
   ════════════════════════════════════════════════════════════════════ */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
  padding: clamp(40px, 9vw, 100px) 0;
}

/* Dotted background — same 22px radial grid pattern as the other
   brand sections, masked to fade toward the edges. */
.cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(11, 11, 15, 0.07) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(85% 75% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(85% 75% at 50% 50%, #000 30%, transparent 100%);
  opacity: 0.55;
}

/* Container with curved-top side rules — mirror the .fx + .px pattern.
   Plus-sign corner ornaments at top + bottom of the container so the
   section reads as "framed" without using border properties directly. */
.cta__wrap {
  position: relative;
  text-align: center;
  padding: clamp(48px, 5vw, 80px) 0;
  margin: 0 auto;
}

.cta__wrap::before,
.cta__wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(11, 11, 15, 0) 0%,
      rgba(11, 11, 15, 0.12) 18%,
      rgba(11, 11, 15, 0.12) 82%,
      rgba(11, 11, 15, 0) 100%);
  pointer-events: none;
}

.cta__wrap::before {
  top: 0;
}

.cta__wrap::after {
  bottom: 0;
}

/* Plus-sign corner ornaments — painted as SVG background-images on the
   container's four corners. Same brand mark used in the pricing grid. */
.cta__wrap {
  --cta-plus-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 6 1 V 11 M 1 6 H 11' opacity='0.30'/></svg>");
  background-image:
    var(--cta-plus-svg),
    var(--cta-plus-svg),
    var(--cta-plus-svg),
    var(--cta-plus-svg);
  background-position:
    -6px -6px,
    calc(100% + 6px) -6px,
    -6px calc(100% + 6px),
    calc(100% + 6px) calc(100% + 6px);
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

/* ── Stepper chip — small "01 02 03 → live" sequence summary ────── */
.cta__stepper {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(11, 11, 15, 0.08);
  box-shadow: 0 2px 10px -4px rgba(11, 11, 15, 0.08);
  margin: 0 auto;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(11, 11, 15, 0.62);
}

.cta__step {
  padding: 2px 6px;
  border-radius: 4px;
  background: transparent;
}

.cta__step.is-done {
  color: rgba(11, 11, 15, 0.55);
  text-decoration: line-through;
  text-decoration-color: rgba(11, 11, 15, 0.30);
  text-decoration-thickness: 1px;
}

.cta__step-rule {
  width: 14px;
  height: 1px;
  background: rgba(11, 11, 15, 0.25);
}

.cta__step.is-final {
  color: var(--primary);
  background: rgba(33, 80, 219, 0.10);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

/* ── Title — serif, italic blue accent ─────────────────────────── */
.cta__title {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(32px, 4.6vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--secondary);
  margin: 22px auto 18px;
  max-width: 18ch;
}

.cta__title-italic {
  color: var(--primary);
}

/* ── Lede ──────────────────────────────────────────────────────── */
.cta__lede {
  position: relative;
  z-index: 1;
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0 auto 32px;
  max-width: 56ch;
}

/* ── Actions ───────────────────────────────────────────────────── */
.cta__actions {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ── Sparkle glyph — oversized brand mark behind the buttons, very
   low opacity. Soft visual full-stop for the page, ties back to the
   logo's sparkle / the bullet glyph used in the .fx cards. */
.cta__sparkle {
  position: absolute;
  /* Centered behind the action row */
  left: 50%;
  bottom: clamp(16px, 4vw, 56px);
  transform: translateX(-50%);
  width: clamp(140px, 18vw, 260px);
  height: clamp(140px, 18vw, 260px);
  pointer-events: none;
  z-index: 0;
}

.cta__sparkle path {
  fill: var(--primary);
  opacity: 0.05;
}

/* Reduced motion — no entrance choreography to adjust here yet (none
   added), but if any is later it should fall back to instant. */
@media (prefers-reduced-motion: reduce) {
  .cta__sparkle {
    opacity: 1;
  }
}


/* ════════════════════════════════════════════════════════════════════
   FOOTER (.ft) — matches brand pattern from .fx, .px, .cta sections.
   Dotted background + container side rules with curved-top entries +
   plus ornaments. Single .container-fluid inside, no other wrappers.
   ════════════════════════════════════════════════════════════════════ */
.ft {
  position: relative;
  overflow: hidden;
  background:
    var(--bg);
  padding: 0 0 clamp(28px, 3vw, 40px);
  color: var(--secondary);
  font-family: var(--font-body);
}

/* Dotted background — same as other brand sections, masked toward edges. */
.ft::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(11, 11, 15, 0.2) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(85% 75% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(85% 75% at 50% 50%, #000 30%, transparent 100%);
  opacity: 0.55;
}

/* Container side rules — vertical 1px columns with gradient fade at top
   + bottom. Mirrors the .px / .fx pattern. */
.ft__wrap {
  position: relative;
  z-index: 1;
}

.ft__wrap::before,
.ft__wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
      rgba(11, 11, 15, 0) 0%,
      rgba(11, 11, 15, 0.10) 12%,
      rgba(11, 11, 15, 0.10) 88%,
      rgba(11, 11, 15, 0) 100%);
  pointer-events: none;
}

.ft__wrap::before {
  left: 0;
}

.ft__wrap::after {
  right: 0;
}

/* ── Newsletter row ───────────────────────────────────────────── */
.ft__news {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  gap: clamp(20px, 3vw, 60px);
  align-items: end;
  padding: clamp(28px, 3.5vw, 56px) clamp(16px, 2.4vw, 32px) clamp(28px, 3.5vw, 48px);
}

@media (max-width: 760px) {
  .ft__news {
    grid-template-columns: 1fr;
    gap: 24px;
    align-items: start;
  }
}

.ft__chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 9px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(11, 11, 15, 0.08);
  border-radius: 999px;
  box-shadow: 0 2px 10px -4px rgba(11, 11, 15, 0.08);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(11, 11, 15, 0.78);
  text-transform: uppercase;
}

.ft__chip-spark {
  color: var(--accent);
  flex-shrink: 0;
}

.ft__news-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--secondary);
  margin: 14px 0 10px;
}

.ft__news-title-italic {
  color: var(--primary);
}

.ft__news-lede {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0;
  max-width: 48ch;
}

/* Subscribe form — input + button as a single bonded pill */
.ft__news-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(11, 11, 15, 0.10);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(11, 11, 15, 0.03);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.ft__news-form:focus-within {
  border-color: var(--primary);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 3px rgba(33, 80, 219, 0.12);
}

.ft__news-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  color: var(--secondary);
  padding: 0 12px 0 0;
}

.ft__news-input::placeholder {
  color: rgba(11, 11, 15, 0.42);
}

.ft__news-form .main-btn {
  margin: 0;
  white-space: nowrap;
}

.ft__news-msgs {
  grid-column: 1 / -1;
  margin-top: 8px;
}

.ft__news-msg {
  font-size: 13px;
  padding: 10px 14px;
  border-radius: 8px;
}

.ft__news-msg--success {
  color: #1e6f4a;
  background: rgba(110, 215, 165, 0.18);
  border: 1px solid rgba(110, 215, 165, 0.45);
}

.ft__news-msg--error {
  color: #9a2727;
  background: rgba(255, 110, 110, 0.14);
  border: 1px solid rgba(255, 110, 110, 0.45);
}

/* ── Link columns + brand block ──────────────────────────────── */
.ft__cols {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
  padding: clamp(32px, 4vw, 56px) clamp(16px, 2.4vw, 32px);
  border-bottom: 1px solid rgba(11, 11, 15, 0.08);
}

@media (max-width: 980px) {
  .ft__cols {
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 36px;
  }

  .ft__brand {
    grid-column: 1 / -1;
    max-width: 480px;
  }
}

@media (max-width: 600px) {
  .ft__cols {
    grid-template-columns: 1fr 1fr;
  }
}

.ft__brand {
  display: flex;
  flex-direction: column;
  gap: 54px;
}

.ft__brand .brand-logo {
  width: auto;
  max-width: 140px;
  height: auto;
}

.ft__tagline {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0;
  max-width: 36ch;
}

.ft__contact {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
}

.ft__contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(11, 11, 15, 0.62);
}

.ft__contact svg {
  flex-shrink: 0;
  color: rgba(11, 11, 15, 0.52);
}

.ft__contact a {
  color: inherit;
  transition: color 160ms ease;
}

.ft__contact a:hover {
  color: var(--primary);
}

.ft__regions {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(11, 11, 15, 0.55);
  text-transform: uppercase;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
}

.ft__region {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ft__region-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(80, 180, 130);
  box-shadow: 0 0 0 3px rgba(80, 180, 130, 0.18);
}

/* Link columns */
.ft__col h4.ft__col-title,
.ft__col-title {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.85);
  margin: 0 0 14px;
}

.ft__col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.ft__col li a {
  color: rgba(11, 11, 15, 0.62);
  font-size: 13.5px;
  transition: color 160ms ease;
}

.ft__col li a:hover {
  color: var(--primary);
}

/* ── Bottom bar ──────────────────────────────────────────────── */
.ft__bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px clamp(16px, 2.4vw, 32px) 0;
  font-size: 12.5px;
  color: rgba(11, 11, 15, 0.50);
}

.ft__badges {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

.ft__sep {
  opacity: 0.4;
}


/* ════════════════════════════════════════════════════════════════════
   CONTACT PAGE — three sections:
     .ct-banner  — full-width hero image with brand veil + chip + title
     .ct         — form section (left: copy + channels, right: form)
     .ct-find    — "How to find us" embedded map + address block
   ════════════════════════════════════════════════════════════════════ */

/* ── HERO BANNER (compact, Vale-style) ───────────────────────────── */
.ct-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(260px, 30vw, 360px);
  color: #fff;
  font-family: var(--font-body);
}

.ct-banner__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ct-banner__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.04);
  transition: transform 18s ease-out;
}

.ct-banner:hover .ct-banner__media img {
  transform: scale(1.08);
}

.ct-banner__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 90% at 90% 10%, rgb(233 74 205 / 0%) 0%, transparent 60%), radial-gradient(80% 100% at 0% 100%, rgb(164 4 136) 0%, transparent 55%), linear-gradient(180deg, rgb(11 11 15 / 0%) 0%, #00358591 100%);
}

/* Grid: copy top-left, cue pinned bottom-right (Vale layout). */
.ct-banner__wrap {
  position: relative;
  z-index: 1;
  min-height: inherit;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  align-items: end;
  column-gap: 24px;
  row-gap: 20px;
  padding-top: clamp(56px, 7vw, 88px);
  padding-bottom: clamp(20px, 2.4vw, 32px);
}

.ct-banner__copy {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: end;
  max-width: 720px;
}

.ct-banner__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0 0 10px;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.18);
}

.ct-banner__title-italic {
  color: var(--primary);
}

.ct-banner__lede {
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 58ch;
}

.ct-banner__cue {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  align-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 200ms ease, transform 200ms ease;
}

.ct-banner__cue:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: translateY(-2px);
}

/* ── Shared chip (matches .fx__chip / .ft__chip) ─────────────────── */
.ct-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(11, 11, 15, 0.78);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(11, 11, 15, 0.08);
  border-radius: 999px;
  box-shadow: 0 2px 10px -4px rgba(11, 11, 15, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ct-chip__spark {
  color: var(--accent);
  flex-shrink: 0;
}

/* ── FORM SECTION (.ct) ──────────────────────────────────────────── */
.ct {
  position: relative;
  overflow: hidden;
  background: #fafaf7;
  color: var(--secondary);
  font-family: var(--font-body);
  padding: clamp(56px, 6.5vw, 96px) 0 clamp(64px, 7.5vw, 112px);
}

.ct::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(11, 11, 15, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  opacity: 0.55;
}

.ct__wrap {
  position: relative;
  z-index: 1;
}

.ct__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.ct__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--secondary);
  margin: 16px 0 12px;
  max-width: 14ch;
}

.ct__title-italic {
  color: var(--primary);
}

.ct__lede {
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0 0 22px;
  max-width: 44ch;
}

.ct__channels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.ct-ch {
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  position: relative;
}

.ct-ch+.ct-ch::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(11, 11, 15, 0.10);
}

.ct-ch__icon {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--primary);
}

.ct-ch__value {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--secondary);
  text-decoration: none;
  line-height: 1.4;
  word-break: break-word;
  transition: color 160ms ease;
}

a.ct-ch__value:hover {
  color: var(--primary);
}

.ct-ch__value--plain {
  font-weight: 500;
  color: rgba(11, 11, 15, 0.78);
}

.ct__form {
  display: grid;
  gap: 18px;
  width: 100%;
}

.ct__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ct__field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ct__form .form-input {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(11, 11, 15, 0.20);
  border-radius: 0;
  padding: 14px 2px;
  font: inherit;
  font-size: 15px;
  color: var(--secondary);
  transition: border-color 160ms ease;
}

.ct__form .form-input::placeholder {
  color: rgba(11, 11, 15, 0.42);
}

.ct__form .form-input:hover {
  border-bottom-color: rgba(11, 11, 15, 0.40);
}

.ct__form .form-input:focus,
.ct__form .form-input:focus-visible {
  outline: none;
  border-bottom-color: var(--primary);
}

.ct__form textarea.form-input {
  min-height: 110px;
  resize: vertical;
  line-height: 1.55;
}

.ct__form select.form-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%230B0B0F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 4.5 L6 8 L9.5 4.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 2px center;
  padding-right: 26px;
}

.ct__error {
  font-size: 12.5px;
  color: #b3261e;
  margin: 6px 0 0;
}

.ct__form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

.ct__submit {
  justify-self: start;
}

.ct__consent {
  font-size: 12px;
  color: rgba(11, 11, 15, 0.50);
  margin: 0;
  max-width: 32ch;
  line-height: 1.5;
}

.ct__msg {
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid;
}

.ct__msg--success {
  background: rgba(33, 80, 219, 0.06);
  border-color: rgba(33, 80, 219, 0.20);
  color: var(--primary);
}

.ct__msg--error {
  background: rgba(179, 38, 30, 0.06);
  border-color: rgba(179, 38, 30, 0.22);
  color: #b3261e;
}

/* ── FIND US (.ct-find) ──────────────────────────────────────────── */
.ct-find {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: var(--secondary);
  font-family: var(--font-body);
  padding: clamp(56px, 6.5vw, 96px) 0 clamp(8px, 7.5vw, 24px);
}

.ct-find::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(11, 11, 15, 0.08) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  opacity: 0.45;
}

.ct-find__wrap {
  position: relative;
  z-index: 1;
}

.ct-find__head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(28px, 3vw, 44px);
}

.ct-find__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--secondary);
  margin: 14px 0 0;
}

.ct-find__title-italic {
  color: var(--primary);
}

.ct-find__map {
  position: relative;
  width: 100%;
  aspect-ratio: 21 / 7;
  overflow: hidden;
  border: 1px solid rgba(11, 11, 15, 0.10);
  background: var(--bg);
}

.ct-find__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.92);
}

.ct-find__detail {
  margin-top: clamp(24px, 3vw, 40px);
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr;
  gap: 24px;
  padding: 20px 22px;
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(11, 11, 15, 0.08);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ct-find__addr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ct-find__addr-label {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.50);
}

.ct-find__addr-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
  line-height: 1.5;
  margin: 0;
  word-break: break-word;
}

.ct-find__addr-link {
  text-decoration: none;
  transition: color 160ms ease;
}

.ct-find__addr-link:hover {
  color: var(--primary);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ct__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .ct__title {
    max-width: none;
  }

  .ct-banner__cue {
    align-self: flex-start;
  }

  .ct-find__detail {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ct-find__map {
    aspect-ratio: 16 / 10;
  }
}

@media (max-width: 600px) {
  .ct__field-row {
    grid-template-columns: 1fr;
  }

  .ct__form-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {

  .ct-banner__media img,
  .ct-banner__cue,
  .ct-ch,
  .ct__form .form-input {
    transition: none;
  }

  .ct-banner:hover .ct-banner__media img {
    transform: scale(1.04);
  }
}


/* ════════════════════════════════════════════════════════════════════
   PRICING PAGE EXTRAS — coupons strip + Talk-to-sales section.
   The main grid uses the shared .px / .px-card system from landing.
   ════════════════════════════════════════════════════════════════════ */

/* ── Coupons strip (above the grid) ──────────────────────────────── */
.pxp-offers {
  position: relative;
  background: #fafaf7;
  padding: clamp(40px, 5vw, 64px) 0 clamp(8px, 1vw, 12px);
}

.pxp-offers__wrap {
  display: grid;
  gap: 12px;
}

.pxp-offer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 16px 20px;
  background: #ffffff;
  border: 1px solid rgba(33, 80, 219, 0.18);
  border-radius: 14px;
  box-shadow: 0 12px 28px -20px rgba(33, 80, 219, 0.30);
}

.pxp-offer__badge {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(33, 80, 219, 0.08);
  border: 1px solid rgba(33, 80, 219, 0.18);
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
}

.pxp-offer__body {
  min-width: 0;
}

.pxp-offer__headline {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--secondary);
  line-height: 1.4;
}

.pxp-offer__copy {
  margin: 0;
  font-size: 13px;
  color: rgba(11, 11, 15, 0.62);
  line-height: 1.55;
}

.pxp-offer__code {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 12.5px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(233, 74, 205, 0.10);
  color: var(--accent);
  border: 1px solid rgba(233, 74, 205, 0.22);
}

/* ── Talk-to-sales section ───────────────────────────────────────── */
.pxp-sales {
  position: relative;
  overflow: hidden;
  background: #fafaf7;
  color: var(--secondary);
  font-family: var(--font-body);
  padding: clamp(64px, 7vw, 112px) 0 clamp(80px, 9vw, 128px);
}

.pxp-sales::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(11, 11, 15, 0.10) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  opacity: 0.55;
}

.pxp-sales__wrap {
  position: relative;
  z-index: 1;
}

.pxp-sales__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

.pxp-sales__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--secondary);
  margin: 16px 0 12px;
  max-width: 18ch;
}

.pxp-sales__title-italic {
  color: var(--primary);
}

.pxp-sales__lede {
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.6;
  color: rgba(11, 11, 15, 0.62);
  margin: 0 0 20px;
  max-width: 48ch;
}

.pxp-sales__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.pxp-sales__bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(11, 11, 15, 0.72);
}

.pxp-sales__spark {
  color: var(--accent);
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .pxp-sales__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .pxp-offer {
    grid-template-columns: 1fr;
  }

  .pxp-offer__badge {
    justify-self: start;
  }
}


/* ════════════════════════════════════════════════════════════════════
   INFO PAGES (.ix) — about / customers / docs / privacy / security /
   status / terms. Shared via templates/info/_info_base.html.

   Two stacked sections in the brand pattern:
     .ix-hero  — chip + serif title + lede inside a framed cream panel
                 (container side rules + plus-sign corners)
     .ix-body  — long-form article on cream BG, max-width prose column,
                 styled h2/h3/p/ul/blockquote, brand card grid + cta tile.
   ════════════════════════════════════════════════════════════════════ */
.ix {
  position: relative;
  overflow: hidden;
  background: #fafaf7;
  color: var(--secondary);
  font-family: var(--font-body);
}

.ix::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60% 60% at 12% 0%, rgba(33, 80, 219, 0.05) 0%, transparent 60%),
    radial-gradient(50% 60% at 100% 100%, rgba(233, 74, 205, 0.045) 0%, transparent 60%),
    radial-gradient(rgba(11, 11, 15, 0.08) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  opacity: 0.55;
}

.ix-hero {
  padding: clamp(24px, 3vw, 40px) 0 clamp(16px, 2vw, 28px);
}

.ix-body {
  padding: clamp(16px, 2vw, 28px) 0 clamp(40px, 4.5vw, 64px);
}

/* Container side rules — vertical (left/right) with gradient fade — and
   plus-corner ornaments. Same brand pattern as .cta__wrap, just rotated. */
.ix-hero__wrap,
.ix-body__wrap {
  position: relative;
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 3vw, 40px);
  --ix-plus-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 6 1 V 11 M 1 6 H 11' opacity='0.30'/></svg>");
  background-image: var(--ix-plus-svg), var(--ix-plus-svg), var(--ix-plus-svg), var(--ix-plus-svg);
  background-position:
    -6px -6px,
    calc(100% + 6px) -6px,
    -6px calc(100% + 6px),
    calc(100% + 6px) calc(100% + 6px);
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

.ix-hero__wrap::before,
.ix-hero__wrap::after,
.ix-body__wrap::before,
.ix-body__wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
      rgba(11, 11, 15, 0) 0%,
      rgba(11, 11, 15, 0.12) 18%,
      rgba(11, 11, 15, 0.12) 82%,
      rgba(11, 11, 15, 0) 100%);
  pointer-events: none;
}

.ix-hero__wrap::before,
.ix-body__wrap::before {
  left: clamp(8px, 0vw, 8px);
}

.ix-hero__wrap::after,
.ix-body__wrap::after {
  right: clamp(8px, 0vw, 8px);
}

/* ── Breadcrumb ──────────────────────────────────────────────────── */
.ix-hero__crumbs {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.45);
  margin-bottom: clamp(24px, 3vw, 36px);
}

.ix-hero__crumbs a {
  color: rgba(11, 11, 15, 0.58);
  text-decoration: none;
  transition: color 160ms ease;
}

.ix-hero__crumbs a:hover {
  color: var(--primary);
}

.ix-hero__crumbs span[aria-hidden] {
  margin: 0 10px;
  opacity: 0.5;
}

.ix-hero__crumbs span[aria-current] {
  color: var(--secondary);
}

/* ── Shared chip (matches .ct-chip / .fx__chip) ──────────────────── */
.ix-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(11, 11, 15, 0.78);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(11, 11, 15, 0.08);
  border-radius: 999px;
  box-shadow: 0 2px 10px -4px rgba(11, 11, 15, 0.08);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.ix-chip__spark {
  color: var(--accent);
  flex-shrink: 0;
}

/* ── Hero title + lede ───────────────────────────────────────────── */
.ix-hero__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--secondary);
  margin: 16px 0 14px;
  max-width: 22ch;
}

.ix-hero__title-italic {
  color: var(--primary);
}

.ix-hero__lede {
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0;
  max-width: 56ch;
}

/* ── Article body ────────────────────────────────────────────────── */
.ix-article {
  max-width: 1400px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(11, 11, 15, 0.82);
}

.ix-article h2 {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.014em;
  color: var(--secondary);
  margin: 36px 0 12px;
  padding-left: 22px;
}

.ix-article h2:first-child {
  margin-top: 0;
}

.ix-article h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 12px;
  height: 12px;
  background: var(--accent);
  -webkit-mask-image: var(--sparkle-mask);
  mask-image: var(--sparkle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.ix-article h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--secondary);
  margin: 32px 0 10px;
  letter-spacing: -0.01em;
}

.ix-article p {
  margin: 0 0 18px;
}

.ix-article a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(33, 80, 219, 0.35);
  padding-bottom: 1px;
  transition: border-color 160ms ease;
}

.ix-article a:hover {
  border-bottom-color: var(--primary);
}

.ix-article strong {
  color: var(--secondary);
  font-weight: 600;
}

.ix-article code {
  background: rgba(11, 11, 15, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 13.5px;
}

.ix-article ul,
.ix-article ol {
  margin: 0 0 18px;
  padding-left: 0;
  list-style: none;
}

.ix-article ul li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.ix-article ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 10px;
  background: var(--accent);
  -webkit-mask-image: var(--sparkle-mask);
  mask-image: var(--sparkle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.ix-article ol {
  counter-reset: ix-counter;
}

.ix-article ol li {
  counter-increment: ix-counter;
  position: relative;
  padding-left: 28px;
  margin-bottom: 8px;
}

.ix-article ol li::before {
  content: counter(ix-counter);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: rgba(33, 80, 219, 0.08);
  border: 1px solid rgba(33, 80, 219, 0.18);
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: grid;
  place-items: center;
}

/* ── Belief / value card grid ────────────────────────────────────── */
.ix-card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 8px 0 24px;
}

.ix-card {
  position: relative;
  padding: 22px 22px 20px;
  background: #ffffff;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.ix-card:hover {
  border-color: rgba(33, 80, 219, 0.22);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px -22px rgba(33, 80, 219, 0.30);
}

.ix-card h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--secondary);
  margin: 0 0 8px;
}

.ix-card p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0;
}

/* ── Pull-quote ──────────────────────────────────────────────────── */
.ix-quote {
  position: relative;
  margin: 24px 0;
  padding: 24px 26px 22px 56px;
  background: rgba(33, 80, 219, 0.04);
}

.ix-quote::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 24px;
  width: 18px;
  height: 18px;
  background: var(--accent);
  -webkit-mask-image: var(--sparkle-mask);
  mask-image: var(--sparkle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.ix-quote p {
  margin: 0 0 12px;
  font-family: var(--font-heading);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: var(--secondary);
  letter-spacing: -0.005em;
}

.ix-quote__cite {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.55);
}

/* ── Status page bits — meta line, status list, uptime stats ─────── */
.ix-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(11, 11, 15, 0.55);
  margin: 0 0 28px;
}

.ix-meta__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2f9e6e;
  box-shadow: 0 0 0 3px rgba(47, 158, 110, 0.18);
  animation: ix-pulse 1.8s ease-in-out infinite;
}

@keyframes ix-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 3px rgba(47, 158, 110, 0.18);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(47, 158, 110, 0.06);
  }
}

.ix-status {
  list-style: none;
  margin: 8px 0 24px;
  padding: 0;
}

.ix-status li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(11, 11, 15, 0.06);
}

.ix-article ul.ix-status li,
ul.ix-status li {
  padding-left: 0;
}

.ix-article ul.ix-status li::before,
ul.ix-status li::before {
  content: none;
  display: none;
}

.ix-status li:last-child {
  border-bottom: none;
}

.ix-status__name {
  font-size: 14.5px;
  color: var(--secondary);
  line-height: 1.4;
}

.ix-status__name strong {
  font-weight: 600;
}

.ix-status__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #2f9e6e;
  white-space: nowrap;
}

.ix-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2f9e6e;
}

.ix-uptime {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 8px 0 24px;
  border-top: 1px solid rgba(11, 11, 15, 0.06);
  border-bottom: 1px solid rgba(11, 11, 15, 0.06);
}

.ix-uptime__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  position: relative;
}

.ix-uptime__cell+.ix-uptime__cell::before {
  content: "";
  position: absolute;
  left: 0;
  top: 16px;
  bottom: 16px;
  width: 1px;
  background: rgba(11, 11, 15, 0.06);
}

.ix-uptime__label {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.50);
}

.ix-uptime__value {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--secondary);
  letter-spacing: -0.012em;
}

/* ── Code block + copy button (docs page) ────────────────────────── */
.ix-code {
  position: relative;
  margin: 16px 0 28px;
  background: #1a1d33;
  color: #f3eddb;
  border-radius: 4px;
  overflow: hidden;
}

.ix-code__pre {
  margin: 0;
  padding: 22px 24px;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 14px;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;

}

.ix-code__pre code {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
  border-radius: 0;
}

.ix-code__cm {
  color: rgba(243, 237, 219, 0.45);
}

.ix-code__token {
  color: #f6d785;
}

.ix-code__copy {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 28px;
  height: 28px;
  display: inline-grid;
  place-items: center;
  border: none;
  background: transparent;
  color: rgba(243, 237, 219, 0.65);
  cursor: pointer;
  padding: 0;
  transition: color 160ms ease;
}

.ix-code__copy:hover {
  color: #ffffff;
}

.ix-code__copy:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

.ix-code__copy-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 200ms ease, transform 200ms ease;
}

.ix-code__copy-icon--check {
  transform: scale(0.6);
  opacity: 0;
  color: #4ade80;
}

.ix-code.is-copied .ix-code__copy {
  color: #4ade80;
}

.ix-code.is-copied .ix-code__copy-icon--clipboard {
  opacity: 0;
  transform: scale(0.6);
}

.ix-code.is-copied .ix-code__copy-icon--check {
  opacity: 1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .ix-code__copy-icon {
    transition: none;
  }
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .ix-card-grid {
    grid-template-columns: 1fr;
  }

  .ix-hero__wrap,
  .ix-body__wrap {
    padding: 32px 18px;
  }

  .ix-uptime {
    grid-template-columns: repeat(2, 1fr);
  }

  .ix-uptime__cell:nth-child(3)::before,
  .ix-uptime__cell:nth-child(2n+1)::before {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ix-card {
    transition: none;
  }
}


/* ════════════════════════════════════════════════════════════════════
   AUTH (.auth) — sign-in / password-reset pages. Two-column split:
   left poster (brand poster on cream + dotted), right form card.
   ════════════════════════════════════════════════════════════════════ */
.auth {
  position: relative;
  background: var(--bg);
  color: var(--secondary);
  font-family: var(--font-body);
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: stretch;
}

.auth__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
}

/* ── Left poster ─────────────────────────────────────────────────── */
.auth__poster {
  position: relative;
  overflow: hidden;
  background: #fafaf7;
  padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 56px);
  display: flex;
  align-items: stretch;
}

.auth__poster::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60% 60% at 20% 0%, rgba(33, 80, 219, 0.06) 0%, transparent 60%),
    radial-gradient(50% 60% at 100% 100%, rgba(233, 74, 205, 0.05) 0%, transparent 60%),
    radial-gradient(rgba(11, 11, 15, 0.08) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  mask-image: radial-gradient(90% 90% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 30%, transparent 100%);
  opacity: 0.55;
}

.auth__poster-wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.auth__poster-brand {
  display: inline-flex;
  text-decoration: none;
  color: var(--accent);
  transition: transform 240ms ease;
}

.auth__poster-brand:hover {
  transform: rotate(15deg);
}

.auth__poster-quote {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.018em;
  color: var(--secondary);
  margin: 0;
  max-width: 18ch;
}

.auth__poster-quote-accent {
  color: var(--primary);
}

.auth__poster-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.auth__poster-bullets li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(11, 11, 15, 0.72);
}

.auth__poster-bullets svg {
  color: var(--accent);
  flex-shrink: 0;
}

.auth__poster-foot {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.40);
  margin: 0;
}

/* ── Right form panel ────────────────────────────────────────────── */
.auth__form-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(40px, 5vw, 72px) clamp(24px, 4vw, 56px);
}

.auth__form-card {
  width: 100%;
  max-width: 380px;
}

.auth__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--secondary);
  margin: 0 0 8px;
}

.auth__title-italic {
  color: var(--primary);
}

.auth__lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0 0 28px;
}

.auth__form {
  display: grid;
  gap: 18px;
}

.auth__field {
  display: flex;
  flex-direction: column;
}

.auth__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.auth__label {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.55);
  margin-bottom: 8px;
}

.auth__label-link {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--primary);
  text-decoration: none;
  transition: color 160ms ease;
}

.auth__label-link:hover {
  color: var(--secondary);
}

.auth__form .form-input {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--bg);
  border: 1px solid rgba(11, 11, 15, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14.5px;
  color: var(--secondary);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.auth__form .form-input::placeholder {
  color: rgba(11, 11, 15, 0.38);
}

.auth__form .form-input:hover {
  border-color: rgba(11, 11, 15, 0.22);
}

.auth__form .form-input:focus,
.auth__form .form-input:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(33, 80, 219, 0.12);
}

.auth__error {
  font-size: 12.5px;
  color: #b3261e;
  margin: 6px 0 0;
}

.auth__submit {
  margin-top: 4px;
  justify-content: center;
}

.auth__form .auth__submit {
  width: 100%;
}

.auth__msg {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid;
  margin-bottom: 18px;
}

.auth__msg--error {
  background: rgba(179, 38, 30, 0.06);
  border-color: rgba(179, 38, 30, 0.22);
  color: #b3261e;
}

.auth__msg--success {
  background: rgba(33, 80, 219, 0.06);
  border-color: rgba(33, 80, 219, 0.22);
  color: var(--primary);
}

.auth__msg--warning {
  background: rgba(217, 119, 6, 0.07);
  border-color: rgba(217, 119, 6, 0.22);
  color: #b45309;
}

/* Center variant for done / standalone-CTA cards (no form). */
.auth__form-card--center {
  text-align: center;
}

.auth__form-card--center .auth__lede {
  margin-bottom: 24px;
}

.auth__success-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(33, 80, 219, 0.08);
  border: 1px solid rgba(33, 80, 219, 0.20);
  color: var(--primary);
}

.auth__lede strong {
  color: var(--secondary);
  font-weight: 600;
}

/* Standalone CTA (no surrounding form) — match form-button width/height. */
.auth__submit--standalone {
  display: inline-flex;
  width: 100%;
  justify-content: center;
}

.auth__foot {
  margin: 28px 0 0;
  font-size: 13.5px;
  color: rgba(11, 11, 15, 0.62);
}

.auth__foot a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(33, 80, 219, 0.30);
  padding-bottom: 1px;
  transition: border-color 160ms ease;
}

.auth__foot a:hover {
  border-bottom-color: var(--primary);
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .auth__grid {
    grid-template-columns: 1fr;
  }

  .auth__poster {
    display: none;
  }

  .auth__form-wrap {
    padding: 40px 24px 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth__form .form-input {
    transition: none;
  }
}


/* ════════════════════════════════════════════════════════════════════
   COOKIE CONSENT
     .cc-ask      — tiny bottom-left card on first visit
     .cc-modal    — centered modal for full preferences
     .cc-launcher — floating sparkle pill post-consent
   ════════════════════════════════════════════════════════════════════ */
.cc-btn {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 9px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 200ms ease;
  white-space: nowrap;
  line-height: 1;
}

.cc-btn--primary {
  background: var(--secondary);
  color: #fff;
  border: 1px solid var(--secondary);
}

.cc-btn--primary:hover {
  background: var(--primary);
  border-color: var(--primary);
  transform: translateY(-1px);
}

.cc-btn--ghost {
  background: transparent;
  color: rgba(11, 11, 15, 0.72);
  border: 1px solid rgba(11, 11, 15, 0.14);
}

.cc-btn--ghost:hover {
  color: var(--secondary);
  border-color: rgba(11, 11, 15, 0.32);
  background: rgba(11, 11, 15, 0.03);
}

.cc-btn--text {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(11, 11, 15, 0.62);
  padding: 9px 8px;
}

.cc-btn--text:hover {
  color: var(--primary);
}

.cc-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Ask card (first visit, bottom-left) ─────────────────────────── */
.cc-ask {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 90;
  width: min(360px, calc(100vw - 32px));
  background: #ffffff;
  border: 1px solid rgba(11, 11, 15, 0.08);
  border-radius: 16px;
  padding: 18px 20px 16px;
  box-shadow: 0 24px 56px -28px rgba(11, 11, 15, 0.25),
    0 2px 8px -4px rgba(11, 11, 15, 0.08);
  font-family: var(--font-body);
  color: var(--secondary);
  transform: translateY(16px);
  opacity: 0;
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}

.cc-ask[hidden] {
  display: none;
}

.cc-ask.is-open {
  transform: translateY(0);
  opacity: 1;
}

.cc-ask__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.cc-ask__mark {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  color: var(--accent);
}

.cc-ask__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--secondary);
  margin: 0;
}

.cc-ask__title-italic {
  color: var(--primary);
}

.cc-ask__lede {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0 0 14px;
}

.cc-ask__lede a {
  color: var(--secondary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 11, 15, 0.25);
  padding-bottom: 1px;
  transition: border-color 160ms ease, color 160ms ease;
}

.cc-ask__lede a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.cc-ask__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.cc-ask__actions .cc-btn--primary {
  flex: 1 1 auto;
  min-width: 0;
}

.cc-ask__actions .cc-btn--text {
  margin-left: auto;
}

/* ── Modal (centered, with backdrop) ─────────────────────────────── */
.cc-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  font-family: var(--font-body);
}

.cc-modal[hidden] {
  display: none;
}

.cc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(11, 11, 15, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 240ms ease;
}

.cc-modal.is-open .cc-modal__backdrop {
  opacity: 1;
}

.cc-modal__panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid rgba(11, 11, 15, 0.06);
  border-radius: 20px;
  box-shadow: 0 40px 80px -40px rgba(11, 11, 15, 0.45),
    0 2px 8px -4px rgba(11, 11, 15, 0.08);
  transform: translateY(12px) scale(0.98);
  opacity: 0;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}

.cc-modal.is-open .cc-modal__panel {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.cc-modal__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60% 50% at 0% 0%, rgba(233, 74, 205, 0.05) 0%, transparent 70%),
    radial-gradient(60% 50% at 100% 0%, rgba(33, 80, 219, 0.05) 0%, transparent 70%);
  border-radius: inherit;
  opacity: 0.85;
}

.cc-modal__head {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
  padding: 26px 28px 20px;
}

.cc-modal__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--secondary);
  margin: 0 0 8px;
}

.cc-modal__title-italic {
  color: var(--primary);
}

.cc-modal__glyph {
  display: inline-grid;
  place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}

.cc-modal__lede {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0;
  max-width: 50ch;
}

.cc-modal__lede a {
  color: var(--secondary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 11, 15, 0.25);
  padding-bottom: 1px;
  transition: border-color 160ms ease, color 160ms ease;
}

.cc-modal__lede a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.cc-modal__close {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(11, 11, 15, 0.10);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(11, 11, 15, 0.62);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 160ms ease, color 160ms ease, background 160ms ease;
}

.cc-modal__close:hover {
  color: var(--secondary);
  background: rgba(11, 11, 15, 0.04);
  border-color: rgba(11, 11, 15, 0.22);
}

.cc-modal__close:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Category cards ──────────────────────────────────────────────── */
.cc-cats {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 28px;
  display: grid;
  gap: 8px;
}

.cc-cat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(11, 11, 15, 0.025);
  border: 1px solid rgba(11, 11, 15, 0.06);
  border-radius: 12px;
  transition: border-color 160ms ease, background 160ms ease;
}

.cc-cat:has(input:checked) {
  border-color: rgba(33, 80, 219, 0.18);
  background: rgba(33, 80, 219, 0.025);
}

.cc-cat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cc-cat__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--secondary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.cc-cat__tag {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(33, 80, 219, 0.08);
  padding: 2px 6px;
  border-radius: 4px;
}

.cc-cat__desc {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(11, 11, 15, 0.58);
  margin: 0;
}

/* ── Toggle switch ───────────────────────────────────────────────── */
.cc-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  border-radius: 999px;
  background: rgba(11, 11, 15, 0.16);
  cursor: pointer;
  transition: background 200ms ease;
  flex-shrink: 0;
}

.cc-toggle input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.cc-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(11, 11, 15, 0.20);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.cc-toggle:has(input:checked) {
  background: var(--primary);
}

.cc-toggle:has(input:checked) .cc-toggle__thumb {
  transform: translateX(14px);
}

.cc-toggle:has(input:focus-visible) {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.cc-toggle--locked {
  background: var(--primary);
  opacity: 0.45;
  cursor: not-allowed;
}

.cc-toggle--locked .cc-toggle__thumb {
  transform: translateX(14px);
}

/* ── Modal footer ────────────────────────────────────────────────── */
.cc-modal__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 28px 24px;
  margin-top: 20px;
  border-top: 1px solid rgba(11, 11, 15, 0.06);
}

.cc-modal__foot-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* ── Floating sparkle launcher (post-consent) ────────────────────── */
.cc-launcher {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 80;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  background: #ffffff;
  border: 1px solid rgba(11, 11, 15, 0.10);
  border-radius: 50%;
  box-shadow: 0 8px 24px -16px rgba(11, 11, 15, 0.30);
  cursor: pointer;
  transition: transform 220ms ease, box-shadow 220ms ease;
}

.cc-launcher svg {
  color: var(--accent);
}

.cc-launcher:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -16px rgba(11, 11, 15, 0.35);
}

.cc-launcher:hover svg {
  color: var(--primary);
}

.cc-launcher:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 520px) {
  .cc-ask {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .cc-ask__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cc-ask__actions .cc-btn--primary {
    grid-column: 1 / -1;
  }

  .cc-ask__actions .cc-btn--text {
    margin-left: 0;
    grid-column: 1 / -1;
    justify-self: center;
  }

  .cc-modal__panel {
    max-width: 100%;
  }

  .cc-modal__foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .cc-modal__foot-right {
    flex-direction: column;
    width: 100%;
  }

  .cc-modal__foot-right .cc-btn {
    width: 100%;
  }

  .cc-modal__foot>.cc-btn--ghost {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .cc-ask,
  .cc-modal__backdrop,
  .cc-modal__panel,
  .cc-launcher,
  .cc-launcher svg,
  .cc-toggle,
  .cc-toggle__thumb {
    transition: none;
  }

  .cc-ask,
  .cc-modal__panel {
    transform: none;
    opacity: 1;
  }
}


/* ════════════════════════════════════════════════════════════════════
   SIGNUP WIZARD (.sw) — /signup/details, /signup/review, /signup/done.
   Brand pattern: cream BG + dotted ::before, container side rules with
   vertical fade. Two-column layout (main form + right-side summary).
   Step indicator .sw-steps sits above the columns.
   ════════════════════════════════════════════════════════════════════ */
.sw {
  position: relative;
  overflow: hidden;
  background: #fafaf7;
  color: var(--secondary);
  font-family: var(--font-body);
  padding: clamp(32px, 4vw, 56px) 0 clamp(56px, 7vw, 96px);
}

.sw::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60% 60% at 12% 0%, rgba(33, 80, 219, 0.05) 0%, transparent 60%),
    radial-gradient(50% 60% at 100% 100%, rgba(233, 74, 205, 0.045) 0%, transparent 60%),
    radial-gradient(rgba(11, 11, 15, 0.08) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  opacity: 0.55;
}

/* Container side rules + plus-corner ornaments — matches .cta__wrap. */
.sw__wrap {
  position: relative;
  z-index: 1;
  --sw-plus-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 6 1 V 11 M 1 6 H 11' opacity='0.30'/></svg>");
  background-image: var(--sw-plus-svg), var(--sw-plus-svg), var(--sw-plus-svg), var(--sw-plus-svg);
  background-position:
    22px 0px,
    calc(100% + -22px) 0px,
    22px calc(100% + -22px),
    calc(100% + -22px) calc(100% + 0px);
  background-size: 12px 12px;
  background-repeat: no-repeat;
}

.sw__wrap::before,
.sw__wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
      rgba(11, 11, 15, 0) 0%,
      rgba(11, 11, 15, 0.12) 18%,
      rgba(11, 11, 15, 0.12) 82%,
      rgba(11, 11, 15, 0) 100%);
  pointer-events: none;
}

.sw__wrap::before {
  left: clamp(16px, 2vw, 28px);
}

.sw__wrap::after {
  right: clamp(16px, 2vw, 28px);
}

/* ── Step indicator ──────────────────────────────────────────────── */
.sw-steps {
  margin: 0 auto clamp(28px, 3vw, 44px);
  max-width: 640px;
}

.sw-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.sw-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  text-transform: capitalize;
  color: rgba(11, 11, 15, 0.40);
  transition: color 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sw-step__icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  color: rgba(11, 11, 15, 0.45);
  background: rgba(11, 11, 15, 0.04);
  transition: background 240ms cubic-bezier(0.22, 1, 0.36, 1),
    color 240ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Active — brand-pink ring around an accent-tinted dot.
   Friendly, not radio-button-selected. */
.sw-step.is-active {
  color: var(--secondary);
}

.sw-step.is-active .sw-step__icon {
  background: rgba(233, 74, 205, 0.10);
  color: var(--accent);
  box-shadow: 0 0 0 4px rgba(233, 74, 205, 0.10);
}

/* Done — brand-blue check */
.sw-step.is-done {
  color: var(--primary);
}

.sw-step.is-done .sw-step__icon {
  background: var(--primary);
  color: #fff;
}

.sw-step__check {
  transform-origin: center;
  animation: sw-check-pop 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sw-check-pop {
  0% {
    transform: scale(0.4);
    opacity: 0;
  }

  60% {
    transform: scale(1.1);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.sw-step__rule {
  flex: 0 1 36px;
  height: 1px;
  background: linear-gradient(90deg,
      rgba(11, 11, 15, 0) 0%,
      rgba(11, 11, 15, 0.16) 50%,
      rgba(11, 11, 15, 0) 100%);
}

/* ── Two-column grid ─────────────────────────────────────────────── */
.sw__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  max-width: 980px;
  margin: 0 auto;
}

/* ── Main card — minimal chrome ──────────────────────────────────── */
.sw__card {
  position: relative;
  background: #ffffff;
  border-radius: 4px;
  padding: clamp(14px, 3vw, 26px);
  box-shadow: 0 1px 0 rgba(11, 11, 15, 0.04),
    0 12px 32px -20px rgba(11, 11, 15, 0.14);
}

.sw__card-head {
  margin-bottom: 24px;
}

.sw__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--secondary);
  margin: 0 0 10px;
}

.sw__title-italic {
  color: var(--primary);
}

.sw__lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.62);
  margin: 0;
}

.sw__lede strong {
  color: var(--secondary);
  font-weight: 600;
}

/* ── Form ────────────────────────────────────────────────────────── */
.sw__form {
  display: grid;
  gap: 18px;
}

.sw__field {
  display: flex;
  flex-direction: column;
}

.sw__label {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.55);
  margin-bottom: 8px;
}

.sw__hint {
  font-size: 12px;
  color: rgba(11, 11, 15, 0.50);
  margin: 6px 0 0;
  line-height: 1.5;
}

.sw__error {
  font-size: 12.5px;
  color: #b3261e;
  margin: 6px 0 0;
}

/* Inputs — shared form-input class, brand-blue focus ring */
.sw__form .form-input,
.sw__coupon-row .form-input {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(11, 11, 15, 0.025);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 12px 14px;
  font: inherit;
  font-size: 14.5px;
  color: var(--secondary);
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.sw__form .form-input::placeholder,
.sw__coupon-row .form-input::placeholder {
  color: rgba(11, 11, 15, 0.38);
}

.sw__form .form-input:hover,
.sw__coupon-row .form-input:hover {
  background: rgba(11, 11, 15, 0.045);
}

.sw__form .form-input:focus,
.sw__form .form-input:focus-visible,
.sw__coupon-row .form-input:focus,
.sw__coupon-row .form-input:focus-visible {
  outline: none;
  background: #ffffff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(33, 80, 219, 0.12);
}

.sw__submit {
  margin-top: 8px;
  width: 100%;
  justify-content: center;
  position: relative;
}

/* ── Loading state on primary submit ─────────────────────────────── */
.sw__submit-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity 200ms ease, transform 200ms ease;
}

.sw__submit-spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

[data-sw-submit].is-loading {
  cursor: progress;
}

[data-sw-submit].is-loading .sw__submit-label {
  opacity: 0;
  transform: translateY(-2px);
}

[data-sw-submit].is-loading .sw__submit-spinner {
  opacity: 1;
  animation: sw-spin 720ms linear infinite;
}

@keyframes sw-spin {
  to {
    transform: rotate(360deg);
  }
}

.sw__alt {
  text-align: center;
  font-size: 13.5px;
  color: rgba(11, 11, 15, 0.62);
  margin: 16px 0 0;
}

.sw__alt a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(33, 80, 219, 0.30);
  padding-bottom: 1px;
  transition: border-color 160ms ease;
}

.sw__alt a:hover {
  border-bottom-color: var(--primary);
}

/* ── Messages ────────────────────────────────────────────────────── */
.sw__msg {
  position: relative;
  padding: 12px 14px 12px 18px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  margin-bottom: 18px;
}

.sw__msg::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: currentColor;
  opacity: 0.55;
}

.sw__msg--info {
  background: rgba(33, 80, 219, 0.06);
  border-color: rgba(33, 80, 219, 0.20);
  color: var(--primary);
}

.sw__msg--error {
  background: rgba(179, 38, 30, 0.05);
  border-color: rgba(179, 38, 30, 0.20);
  color: #b3261e;
}

/* ── Review summary block (Confirm and continue) ─────────────────── */
.sw__summary {
  margin: 0 0 22px;
}

.sw__summary-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.55);
  margin: 0 0 12px;
}

.sw__summary-eyebrow svg {
  color: var(--accent);
  flex-shrink: 0;
}

/* Stacked rows with dashed dividers, no tinted box.
   Inline edit link sits at the far right of each row. */
.sw__kv {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.sw__kv-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  column-gap: 20px;
  align-items: baseline;
  padding: 12px 0;
}

.sw__kv-row+.sw__kv-row {
  border-top: 1px dashed rgba(11, 11, 15, 0.10);
}

.sw__kv dt {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.50);
  margin: 0;
}

.sw__kv dd {
  margin: 0;
  font-size: 14.5px;
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  word-break: break-word;
}

.sw__kv-edit {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--primary);
  text-decoration: none;
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    color 160ms ease;
  flex-shrink: 0;
}

.sw__kv-row:hover .sw__kv-edit,
.sw__kv-edit:focus-visible {
  opacity: 1;
  transform: translateX(0);
}

.sw__kv-edit:hover {
  color: var(--secondary);
}

/* Plan row — promoted out of the list, brand-blue accent rail */
.sw__summary-plan {
  position: relative;
  margin-top: 18px;
  padding: 16px 18px 16px 22px;
  background: rgba(33, 80, 219, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sw__summary-plan::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  background: var(--primary);
  border-radius: 0 3px 3px 0;
}

.sw__summary-plan-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sw__summary-plan-label {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.50);
}

.sw__summary-plan-name strong {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.012em;
  color: var(--secondary);
}

.sw__summary-plan-price {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: rgba(11, 11, 15, 0.65);
}

.sw__summary-plan-amount {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--secondary);
}

.sw__summary-plan-cycle {
  font-size: 12px;
  color: rgba(11, 11, 15, 0.55);
}

/* Plan-row "Change" link sits to the far right, always visible
   (no hover-reveal, since it leads off the wizard entirely) */
.sw__summary-plan .sw__kv-edit {
  opacity: 1;
  transform: none;
}

/* ── Collapsible coupon toggle ───────────────────────────────────── */
.sw__coupon-toggle {
  margin: 0 0 18px;
  /* Smooth open/close via grid-template-rows trick on the panel */
}

.sw__coupon-toggle-summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  list-style: none;
  user-select: none;
  padding: 6px 2px;
  border-radius: 6px;
  transition: color 160ms ease;
}

.sw__coupon-toggle-summary::-webkit-details-marker {
  display: none;
}

.sw__coupon-toggle-summary:hover {
  color: var(--secondary);
}

.sw__coupon-toggle-summary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.sw__coupon-toggle-icon {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sw__coupon-toggle[open] .sw__coupon-toggle-icon {
  transform: rotate(180deg);
}

/* Animated panel — fades + slides down on open */
.sw__coupon-panel {
  padding-top: 14px;
  display: grid;
  gap: 12px;
  animation: sw-coupon-down 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes sw-coupon-down {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Applied state — no surrounding box, just a clean inline confirmation */
.sw__coupon-applied-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sw__coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 12px 16px;
  background: rgba(33, 80, 219, 0.05);
  border-radius: 10px;
}

.sw__coupon-code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--secondary);
}

.sw__coupon-code svg {
  color: var(--primary);
}

.sw__coupon-savings {
  font-size: 12.5px;
  color: var(--primary);
  margin-top: 2px;
}

.sw__coupon-remove {
  appearance: none;
  border: 1px solid rgba(11, 11, 15, 0.14);
  background: #ffffff;
  color: rgba(11, 11, 15, 0.62);
  padding: 6px 12px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease;
}

.sw__coupon-remove:hover {
  color: var(--secondary);
  border-color: rgba(11, 11, 15, 0.30);
}

.sw__coupon-available-label {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.55);
  margin: 0 0 10px;
}

.sw__coupon-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sw__coupon-chip-form {
  margin: 0;
}

.sw__coupon-chip {
  appearance: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid rgba(233, 74, 205, 0.30);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  transition: border-color 160ms ease, transform 200ms ease;
}

.sw__coupon-chip:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.sw__coupon-chip-offer {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
}

.sw__coupon-chip-code {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11px;
  color: rgba(11, 11, 15, 0.55);
}

.sw__coupon-form {
  display: grid;
  gap: 8px;
}

.sw__coupon-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;

  .main-btn {
    border-radius: 4px !important;
  }
}

.sw__legal {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(11, 11, 15, 0.55);
  margin: 14px 0 22px;
}

.sw__legal code {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11.5px;
  background: rgba(11, 11, 15, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
}

.sw__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.sw__back {
  background: transparent;
  color: rgba(11, 11, 15, 0.55);
  border: none;
  padding-left: 4px;
  padding-right: 4px;
  transition: color 160ms ease, transform 200ms ease;
}

.sw__back:hover {
  color: var(--primary);
  transform: translateX(-2px);
}

.sw__actions .main-btn.fill-btn {
  transition: transform 200ms ease, box-shadow 200ms ease;
  background-color: var(--primary);
  color: #fff !important;
}

.sw__actions .main-btn.fill-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px rgba(11, 11, 15, 0.35);
}

/* ── Right summary aside — minimal chrome ────────────────────────── */
.sw__side {
  position: sticky;
  top: 72px;
  background: #ffffff;
  border-radius: 4px;
  padding: 24px;
  border: 1px solid var(--accent);
  overflow: hidden;
  isolation: isolate;
}

.sw__side::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60% 50% at 100% 0%, rgba(33, 80, 219, 0.06) 0%, transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(233, 74, 205, 0.05) 0%, transparent 70%);
  opacity: 0.85;
  z-index: -1;
  border-radius: inherit;
}

.sw__side-eyebrow {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.50);
  display: block;
  margin-bottom: 10px;
}

.sw__side-plan {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--secondary);
  margin: 0 0 14px;
}

.sw__side-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(11, 11, 15, 0.08);
}

.sw__side-currency {
  font-size: 18px;
  color: rgba(11, 11, 15, 0.45);
  margin-right: 1px;
}

.sw__side-amount {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 36px;
  letter-spacing: -0.022em;
  color: var(--secondary);
  line-height: 1;
}

.sw__side-cycle {
  font-size: 12.5px;
  color: rgba(11, 11, 15, 0.55);
}

.sw__side-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.sw__side-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: rgba(11, 11, 15, 0.72);
}

.sw__side-list li::before {
  content: "";
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  transform: translateY(1px);
  background: var(--accent);
  -webkit-mask-image: var(--sparkle-mask);
  mask-image: var(--sparkle-mask);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.sw__side-change {
  display: inline-block;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(11, 11, 15, 0.55);
  text-decoration: none;
  transition: color 160ms ease;
}

.sw__side-change:hover {
  color: var(--primary);
}

/* Review-side line items */
.sw__side-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13.5px;
  color: var(--secondary);
  padding: 4px 0;
}

.sw__side-line--muted {
  font-size: 12px;
  color: rgba(11, 11, 15, 0.50);
}

.sw__side-line--discount {
  color: var(--primary);
}

.sw__side-line--total {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(11, 11, 15, 0.08);
  font-size: 14.5px;
}

.sw__side-line--total strong {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 18px;
  color: var(--secondary);
}

.sw__side-hint {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(11, 11, 15, 0.55);
  margin: 16px 0 0;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .sw__grid {
    grid-template-columns: 1fr;
  }

  .sw__side {
    position: static;
  }
}

@media (max-width: 520px) {
  .sw-steps__list {
    gap: 8px;
  }

  .sw-step__rule {
    flex-basis: 16px;
  }

  .sw-step__label {
    display: none;
  }

  .sw__actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .sw__actions .main-btn {
    width: 100%;
    justify-content: center;
  }

  .sw__coupon-row {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sw-step__num,
  .sw__form .form-input,
  .sw__coupon-chip {
    transition: none;
  }
}


/* ════════════════════════════════════════════════════════════════════
   OUTCOME PAGES (.oc) — /pending, /contact/thanks, /blocked, and any
   future end-of-flow / status page. Single centered card on brand
   pattern frame (cream + dotted + vertical side rules + plus corners).
   Icon glyph chooses tone via .oc__icon--brand / --success / --warn.
   ════════════════════════════════════════════════════════════════════ */
.oc {
  position: relative;
  overflow: hidden;
  background: #fafaf7;
  color: var(--secondary);
  font-family: var(--font-body);
  padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 9vw, 120px);
  min-height: calc(100vh - 240px);
  display: flex;
  align-items: center;
}

.oc::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60% 60% at 12% 0%, rgba(33, 80, 219, 0.05) 0%, transparent 60%),
    radial-gradient(50% 60% at 100% 100%, rgba(233, 74, 205, 0.045) 0%, transparent 60%),
    radial-gradient(rgba(11, 11, 15, 0.08) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  -webkit-mask-image: radial-gradient(95% 85% at 50% 50%, #000 35%, transparent 100%);
  opacity: 0.55;
}

.oc__wrap {
  position: relative;
  z-index: 1;
  padding: clamp(20px, 2.4vw, 32px) clamp(20px, 3vw, 40px);
  width: 100%;
}

/* ── Card — brand chrome lives here (vertical rules + plus corners) ─ */
.oc__card {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 4px;
  padding: clamp(32px, 4vw, 48px);
  text-align: center;

  --oc-plus-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23111' stroke-width='1' stroke-linecap='round'><path d='M 6 1 V 11 M 1 6 H 11' opacity='0.30'/></svg>");
  background-image:
    var(--oc-plus-svg),
    var(--oc-plus-svg),
    var(--oc-plus-svg),
    var(--oc-plus-svg),
    linear-gradient(#fff, #fff);
  background-position:
    -4px -4px,
    calc(100% + 4px) -4px,
    -4px calc(100% + 4px),
    calc(100% + 4px) calc(100% + 4px),
    0 0;
  background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 100% 100%;
  background-repeat: no-repeat;
}

.oc__card::before,
.oc__card::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg,
      rgba(11, 11, 15, 0) 0%,
      rgba(11, 11, 15, 0.14) 18%,
      rgba(11, 11, 15, 0.14) 82%,
      rgba(11, 11, 15, 0) 100%);
  pointer-events: none;
}

.oc__card::before {
  left: 0px;
}

.oc__card::after {
  right: 0px;
}

/* ── Icon — tone via state class, pop-in on load ─────────────────── */
.oc__icon {
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 22px;
  animation: oc-icon-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.oc__icon--brand {
  background: rgba(233, 74, 205, 0.10);
  color: var(--accent);
}

.oc__icon--success {
  background: rgba(33, 80, 219, 0.10);
  color: var(--primary);
}

.oc__icon--warn {
  background: rgba(217, 119, 6, 0.10);
  color: #b45309;
}

@keyframes oc-icon-in {
  0% {
    transform: scale(0.6);
    opacity: 0;
  }

  60% {
    transform: scale(1.06);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ── Copy ────────────────────────────────────────────────────────── */
.oc__eyebrow {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(11, 11, 15, 0.50);
  margin: 0 0 12px;
}

.oc__title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--secondary);
  margin: 0 0 14px;
}

.oc__title strong {
  font-weight: 400;
}

.oc__title-italic {
  color: var(--primary);
}

.oc__lede {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(11, 11, 15, 0.62);
  margin: 0 auto 28px;
  max-width: 50ch;
}

.oc__email {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 13px;
  background: rgba(33, 80, 219, 0.06);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
}

.oc__actions {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
}

.oc__actions .main-btn.fill-btn {
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.oc__actions .main-btn.fill-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -12px rgba(11, 11, 15, 0.35);
}

.oc__foot {
  font-size: 12.5px;
  color: rgba(11, 11, 15, 0.55);
  margin: 22px 0 0;
}

.oc__foot a {
  color: var(--secondary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(11, 11, 15, 0.25);
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}

.oc__foot a:hover {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

@media (prefers-reduced-motion: reduce) {
  .oc__icon {
    animation: none;
  }

  .oc__actions .main-btn.fill-btn {
    transition: none;
  }
}