/* KwunjAI marketing site — shared hero patterns (index.html, for-teams.html) */

/* ---------- Fixed header on hero pages: floats transparently over the hero, hero fills the full viewport behind it ---------- */
.hero-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(15, 20, 32, 0.55);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.page-light-preview .hero-header {
  background: rgba(246, 244, 252, 0.75);
  border-bottom: 1px solid rgba(36, 31, 56, 0.08);
}

.nav-pill {
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--color-text);
  border: 1px solid transparent;
  white-space: nowrap;
}

.nav-pill:hover {
  border-color: var(--color-border);
  color: var(--color-text);
}

.nav-pill.active {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.nav-pill.active:hover {
  color: var(--color-bg);
}

.btn-sm {
  padding: 8px 18px;
  font-size: 0.9rem;
}

/* ---------- Generic placeholder blocks (stand in for real images) ---------- */
.hero-bg-placeholder,
.device-placeholder,
.hero-qr-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  background: var(--color-surface-alt);
}

/* ---------- HERO (full-bleed section, image placeholder background) ---------- */
.hero-full {
  position: relative;
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding-top: 96px;
  overflow: hidden;
}

.hero-full-fullscreen {
  min-height: 100vh;
  min-height: 100dvh;
}

.hero-bg-placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 0;
  border: none;
  background:
    linear-gradient(180deg, rgba(15, 20, 32, 0.35) 0%, rgba(15, 20, 32, 0.85) 100%),
    repeating-linear-gradient(45deg, var(--color-surface) 0, var(--color-surface) 40px, var(--color-surface-alt) 40px, var(--color-surface-alt) 80px);
}

.hero-bg-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, rgba(15, 20, 32, 0.65) 0%, rgba(15, 20, 32, 0.55) 45%, rgba(15, 20, 32, 0.75) 100%);
  transition: background 0.3s ease;
}

body.page-light-preview .hero-bg-overlay {
  background: linear-gradient(180deg, rgba(246, 244, 252, 0.55) 0%, rgb(246 244 252 / 11%) 45%, rgb(246 244 252 / 34%) 100%);
}
body.page-light-preview #mode-dashboard {
  background-image: none;
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    left: 0;
    right: 0;
    bottom: -200px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 0.85rem;
  font-weight: 600;
}

.hero-scroll-hint {
  position: absolute;
  z-index: 1;
  left: 32px;
  bottom: 32px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-text);
  font-size: 1.1rem;
}

body.page-light-preview .hero-scroll-hint {
  border-color: rgba(36, 31, 56, 0.3);
}

.hero-content h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0 0 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

.hero-h1-break {
  display: none;
}

.hero-content .subtitle {
  font-size: clamp(1.05rem, 2.5vw, 1.25rem);
  color: #fff;
  margin: 0 0 32px;
  font-weight: 600;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
  max-width: 620px;
}

.hero-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions-bottom {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 40px;
}

.hero-actions-bottom .btn,
.cta-actions-frosted .btn {
  background: rgba(24, 26, 34, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.hero-actions-bottom .btn:hover,
.cta-actions-frosted .btn:hover {
  background: rgba(34, 37, 48, 0.35);
  border-color: rgba(255, 255, 255, 0.36);
  color: #fff;
  transform: translateY(-2px);
}

body.page-light-preview .hero-actions-bottom .btn,
body.page-light-preview .cta-actions-frosted .btn {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(36, 31, 56, 0.18);
  color: #241f38;
  box-shadow: 0 8px 24px rgba(36, 31, 56, 0.15);
}

body.page-light-preview .hero-actions-bottom .btn:hover,
body.page-light-preview .cta-actions-frosted .btn:hover {
  background: rgba(255, 255, 255, 0.75);
  border-color: rgba(36, 31, 56, 0.32);
  color: #241f38;
}

.hero-qr-placeholder {
  position: absolute;
  z-index: 1;
  right: 32px;
  bottom: 32px;
  flex-direction: column;
  gap: 6px;
  width: 110px;
  height: 110px;
  padding: 10px;
}

.hero-qr-placeholder em {
  font-style: normal;
  font-size: 0.7rem;
}

/* ---------- Logo strip ---------- */
.logo-strip {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
  padding: 24px 0;
  background: var(--color-bg);
}

.logo-strip-track {
  display: flex;
  gap: 48px;
  width: max-content;
  animation: logo-scroll 24s linear infinite;
}

.logo-strip-track img {
  height: 100px;
  width: 200px;
  max-width: 140px;
  object-fit: contain;
  border-radius: 8px;
  background: transparent;
  padding: 4px 10px;
  flex-shrink: 0;
  /* filter: brightness(0) invert(1);
  opacity: 0.7; */
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Split feature (text left / media right) ---------- */
.split-feature {
  position: relative;
  z-index: 1;
  height: 100vh;
  height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  transition: background-color 0.3s ease, color 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 64px 6vw;
  overflow: hidden;
}

/* GSAP pins each section as position:fixed while its scroll-cycle plays;
   without a stacking order, quick up/down scrolling can leave two sections
   fixed at once and they render on top of each other. Ordering by DOM
   position keeps the later section always above the earlier one so only
   one is ever visibly on top, matching scroll direction. */
#mode-dashboard {
  z-index: 2;
}

.split-feature-heading {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.split-feature-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}

.split-feature-modes {
  position: relative;
  flex: 1;
  min-height: 0;
}

.split-feature-mode {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
}

.split-feature-text {
  position: relative;
  max-width: 460px;
  min-height: 420px;
}

.split-feature-checklist {
  max-width: none;
  margin: 20px 0 0;
  font-size: 0.85rem;
}

.split-feature-checklist li {
  padding: 8px 0 8px 26px;
}

.split-feature-panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease;
}

.split-feature-panel.active {
  opacity: 1;
  visibility: visible;
}

.eyebrow {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.split-feature-text h2 {
  text-align: left;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  margin: 0 0 16px;
}

.split-feature-text p {
  color: var(--color-text-muted);
  max-width: 450px;
}

.split-feature-media {
  position: relative;
  display: flex;
  justify-content: center;
  width: min(400px, 80vw);
  aspect-ratio: 1024 / 1536;
  margin: 0 auto;
}

.split-feature-glow {
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle at 50% 45%, rgba(79, 124, 255, 0.5) 0%, rgba(34, 211, 168, 0.28) 40%, transparent 68%);
  filter: blur(45px);
  pointer-events: none;
}

.device-placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  opacity: 0;
}

/* Opacity is driven directly by the scroll-scrubbed GSAP timeline in
   js/main.js (a continuous crossfade tied to scroll position) rather than
   a CSS transition triggered by this class — a time-based transition would
   fight a value that's already changing every scroll frame, causing the
   fade to lag behind the scroll gesture instead of tracking it smoothly.
   .active is kept only as the no-JS fallback. */
.device-placeholder.active {
  opacity: 1;
}

.device-placeholder.has-image {
  border: none;
  padding: 0;
  background: none;
}

.device-placeholder.has-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-mask-image: radial-gradient(ellipse 68% 62% at 50% 45%, #000 55%, transparent 93%);
  mask-image: radial-gradient(ellipse 68% 62% at 50% 45%, #000 55%, transparent 93%);
}

.split-feature-nav {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1;
}

.split-feature-nav .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}

.split-feature-nav .dot.active {
  background: var(--color-accent);
}

section.section.pricing-section {
    background-image: linear-gradient(#fafafa00, #090909e3), url(/img/BG_26.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

body.page-light-preview section#pricing {
    background-image: linear-gradient(#ffffff47, #ffffffe3);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* ---------- Dashboard mode: browser-window mockup ---------- */
#mode-dashboard {
  background: var(--color-bg);
  background-image: linear-gradient(var(--color-bg-overlay), var(--color-bg-overlay)), url(/img/BG_25.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

#mode-dashboard .split-feature-mode {
  grid-template-columns: minmax(0, 480px) 1fr;
}

#mode-dashboard .split-feature-glow {
  inset: 10%;
  background: radial-gradient(circle at 50% 45%, rgba(110, 225, 195, 0.55) 0%, rgba(150, 120, 255, 0.35) 40%, transparent 60%);
  filter: blur(35px);
}

#mode-dashboard .split-feature-media {
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  max-width: 1180px;
  max-height: 100%;
  aspect-ratio: auto;
  gap: 16px;
  margin: 0 0 0 auto;
}

.browser-mockup-nav {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.browser-mockup-nav .dot {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.browser-mockup-nav .dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.browser-mockup-nav .dot.active::before {
  background: var(--color-accent);
  transform: scale(1.2);
}

/* .browser-mockup-nav .dot.active {
  background: var(--color-accent);
} */

.browser-mockup-screen {
  position: relative;
  width: 100%;
  max-height: calc(100% - 34px);
  aspect-ratio: 1536 / 1024;
  min-height: 0;
  flex: 1;
}

.browser-mockup-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
}

/* See .device-placeholder above — opacity is scroll-scrubbed via GSAP. */
.browser-mockup-img.active {
  opacity: 1;
}


/* Below 900px, text and media stack into two full-width rows instead of
   side-by-side columns, but the section stays pinned and scroll-cycled just
   like desktop (matches the mouse-scroll behavior). To keep that pinned
   fixed-height box from either clipping the media or leaving a dead gap:
   the text panel switches with a plain display:none/block swap (so its box
   is always exactly as tall as whichever panel is active, no reserved
   min-height guess), and the media is a flex:1 item sized by aspect-ratio
   off whatever vertical space is left — it shrinks on panels with more text
   instead of overflowing. */
@media (max-width: 900px) {
  .split-feature {
    text-align: center;
    padding: 72px 24px 12px;
  }

  .split-feature-modes {
    position: relative;
  }

  .split-feature-mode {
    display: flex;
    flex-direction: column;
    align-items: center;
    grid-template-columns: unset;
    /* The desktop rule's 40px gap (grid-column spacing) was silently
       carrying over into this flex-column layout too, stacking on top of
       each child's own margin-top and making the real space between text,
       media, and the dot nav much bigger than any of the sizing math
       elsewhere accounted for. Spacing here comes from each child's own
       margin only. */
    gap: 0;
  }

  .split-feature-text {
    position: static;
    max-width: 100%;
    min-height: 0;
    flex: 0 0 auto;
  }

  /* Desktop's heading size (clamp up to 2.4rem) and default spacing were
     tuned for a wide text column beside the media — stacked on mobile
     they made the tallest panel's text alone eat most of the pinned
     viewport, leaving little room for the phone/dashboard image below.
     Tightened here so both the text and the image below it fit comfortably. */
  .split-feature-text h2,
  .split-feature-text p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .eyebrow {
    margin-bottom: 8px;
  }

  .split-feature-text h2 {
    font-size: clamp(1.4rem, 6vw, 1.8rem);
    margin-bottom: 8px;
  }

  .split-feature-text p {
    margin: 0 auto 8px;
    font-size: 0.92rem;
  }

  /* The checklist is the biggest single contributor to a panel's text
     height (only 2 of the 4 panels per section have one, but it makes
     those two noticeably taller) — tightened well past the rest of the
     text block so those panels don't need a shorter phone/dashboard image
     just to still fit under the pinned section's fixed height. */
  .split-feature-checklist {
    margin-top: 4px;
  }

  /* .split-feature's own text-align:center (below) cascades onto these
     list items too, but the checkmark is pinned to a fixed left position
     — centering the text next to it made each line start a different
     distance from its checkmark, since line length varies. Left-aligning
     just the checklist keeps every line starting at the same spot next
     to its tick, instead of looking staggered against it. */
  .split-feature-checklist li {
    padding: 4px 0 4px 26px;
    line-height: 1.35;
    text-align: left;
  }

  .split-feature-panel {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
  }

  .split-feature-panel.active {
    display: block;
  }

  /* A fixed width here kept clipping on real devices: Safari's URL bar
     doesn't always collapse before the pinned section is measured, so the
     actually-available height is shorter than any fixed px/vw guess (even
     ones verified against a shorter simulated viewport) can safely assume.
     flex:1 instead sizes the phone off whatever vertical space the current
     panel's text really leaves — guaranteed to fit no matter how short the
     real viewport turns out to be — capped by max-width so it doesn't grow
     oversized on the shorter (checklist-free) panels. */
  .split-feature-media {
    flex: 1;
    min-height: 0;
    width: auto;
    max-width: min(280px, 68vw);
    aspect-ratio: 1024 / 1536;
    margin: 16px auto 0;
  }

  /* The radial-gradient mask (desktop-only vignette that blends the phone
     mockup's top/bottom edges into the background) fades out a large chunk
     of the image once it's the only thing in its own row on mobile — show
     the phone in full instead. */
  .device-placeholder.has-image img {
    -webkit-mask-image: none;
    mask-image: none;
  }

  #mode-dashboard .split-feature-media {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: unset;
    justify-content: center;
    align-items: center;
    margin: 16px auto 0;
  }

  /* Unlike the linebot phone (portrait, so more vertical room lets it scale
     up), this is a landscape screenshot on a narrow column — width is always
     the binding constraint, so letting it flex-grow taller just stretched
     the box past the image's own aspect ratio, leaving dead space *inside*
     the box. Sized directly off width instead; .split-feature-media's
     justify-content:center centers it in whatever room the panel leaves. */
  #mode-dashboard .browser-mockup-screen {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    max-height: 100%;
  }

  .split-feature-nav {
    display: flex;
    position: static;
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    transform: none;
    flex: 0 0 auto;
  }

}

@media (max-width: 640px) {
  .nav-actions .nav-pill {
    display: none;
  }

  .hero-full {
    padding-top: 80px;
  }

  .hero-qr-placeholder {
    display: none;
  }

  /* The heading's natural wrap could strand a short last word ("คิด") on
     its own line — awkward on its own, and worse wherever the looping
     background video happens to be brightest right behind it. This manual
     break keeps it to two balanced lines. Desktop is unaffected: it has
     enough width that the default wrap already reads fine, and forcing
     this break there left an oddly short first line. */
  .hero-h1-break {
    display: block;
  }

  /* A visible backdrop box behind the text read as an unwanted frame, so
     contrast comes from the text itself instead: several stacked shadows
     (tight ones for a solid dark outline, a wider one for glow) hold up
     against a bright moment in the looping video without needing any
     background shape behind them. */
  .hero-content h1 {
    text-shadow:
      0 0 2px rgba(0, 0, 0, 0.9),
      0 0 6px rgba(0, 0, 0, 0.85),
      0 0 18px rgba(0, 0, 0, 0.75),
      0 2px 20px rgba(0, 0, 0, 0.6);
  }

  .hero-content .subtitle {
    text-shadow:
      0 0 2px rgba(0, 0, 0, 0.9),
      0 0 5px rgba(0, 0, 0, 0.85),
      0 0 14px rgba(0, 0, 0, 0.7);
  }
}

/* ---------- Pricing (home page teaser) ---------- */
.pricing-toggle {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 28px auto 40px;
  padding: 4px;
  width: fit-content;
  border-radius: 999px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
}

.pricing-toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  font-family: 'IBM Plex Sans Thai';
}

.pricing-toggle-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.pricing-toggle-label {
  white-space: nowrap;
}

.pricing-save-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #0f1420;
  font-size: 0.7rem;
  font-weight: 800;
  white-space: nowrap;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  align-items: stretch;
}

.pricing-card {
  position: relative;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
}

.pricing-card.featured {
  background: linear-gradient(160deg, var(--color-primary), var(--color-primary-dark));
  border-color: transparent;
}

.pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--color-accent);
  color: #0f1420;
  font-size: 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}

.pricing-card-name {
  font-weight: 800;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
}

.pricing-card.featured .pricing-card-name {
  color: #fff;
}

.pricing-card-desc {
  margin: 8px 0 20px;
  min-height: 60px;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.pricing-card.featured .pricing-card-desc {
  color: rgba(255, 255, 255, 0.85);
}

.pricing-card-price {
  min-height: 56px;
}

.price-annual {
  display: none;
}

.pricing-grid.show-annual .price-monthly {
  display: none;
}

.pricing-grid.show-annual .price-annual {
  display: block;
}

.price-strike {
  display: block;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-size: 0.8rem;
  opacity: 0.7;
}

.pricing-card.featured .price-strike {
  color: rgba(255, 255, 255, 0.65);
}

.price-main {
  font-size: 1.7rem;
  font-weight: 800;
}

.price-unit {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-left: 2px;
}

.pricing-card.featured .price-unit {
  color: rgba(255, 255, 255, 0.75);
}

.price-note {
  display: block;
  margin-top: 4px;
  color: var(--color-accent);
  font-size: 0.75rem;
  font-weight: 700;
}

.pricing-card.featured .price-note {
  color: #fff;
}

.pricing-card-cap {
  margin: 16px 0;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

.pricing-card.featured .pricing-card-cap {
  border-bottom-color: rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.85);
}

.pricing-card-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.85rem;
}

.pricing-card-features li {
  position: relative;
  padding-left: 24px;
}

.pricing-card-features li.yes::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

.pricing-card-features li.no {
  color: var(--color-text-muted);
  opacity: 0.5;
}

.pricing-card-features li.no::before {
  content: "✕";
  position: absolute;
  left: 0;
}

.pricing-card.featured .pricing-card-features li.yes::before {
  color: #fff;
}

.pricing-card.featured .pricing-card-features li {
  color: #fff;
}

.pricing-footnote {
  margin-top: 28px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

@media (max-width: 1100px) {
  .pricing-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

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

  .pricing-toggle {
    width: 100%;
  }

  .pricing-toggle-btn {
    flex: 1;
    flex-wrap: wrap;
    justify-content: center;
    padding: 10px 8px;
  }

  .pricing-save-badge {
    font-size: 0.62rem;
    padding: 2px 6px;
  }
}

/* ---------- Horizontal scroll cards (pinned section, mouse-wheel driven) ---------- */
.hcards-section {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 0;
  background-image:
    radial-gradient(circle, rgba(216, 70, 200, 0.42), transparent 70%),
    radial-gradient(circle, rgba(79, 124, 255, 0.4), transparent 70%),
    radial-gradient(circle, rgba(34, 211, 168, 0.32), transparent 70%),
    radial-gradient(circle, rgba(168, 85, 247, 0.36), transparent 70%);
  background-repeat:repeat-y;
  background-size: 55% 55%, 50% 50%, 55% 55%, 60% 60%;
  background-position: 10% 15%, 88% 10%, 15% 88%, 85% 85%;
}

.hcards-heading {
  margin-bottom: 56px;
}

.hcards-track {
  overflow: hidden;
  width: 100%;
}

.hcards-row {
  display: flex;
  align-items: stretch;
  gap: 24px;
  width: max-content;
  padding: 4px 0 4px max(24px, calc((100vw - 1120px) / 2));
}

.hcard {
  position: relative;
  flex: 0 0 auto;
  width: min(360px, 68vw);
  aspect-ratio: 576 / 594;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 20px;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  background:
    var(--hcard-bg, linear-gradient(160deg, var(--color-surface-alt), var(--color-surface)))
    center / cover no-repeat;
  isolation: isolate;
}

.hcard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.hcard--top::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.53) 0%, rgba(0, 0, 0, 0) 60%);
}

.hcard > * {
  position: relative;
  z-index: 1;
}

.hcard .icon {
  font-size: 2.6rem;
  margin-bottom: 18px;
}

.hcard h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #fff;
}

.hcard p {
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

/* Card 1: top pill label + centered caption */
.hcard--top {
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding-top: 20px;
}

.hcard-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  padding: 8px 10px 8px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  white-space: nowrap;
}

.hcard-pill-text {
  font-size: 0.8rem;
  font-weight: 600;
  color: #333;
}

.hcard-pill-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hcard-center-text {
  margin-top: auto;
  margin-bottom: 22px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.65;
  text-align: center;
  color: #fff;
}

/* Card 2: bottom blurred bar with badge */
.hcard--footer {
  padding: 22px 0 0;
}

.hcard--footer h3 {
  margin: 0 20px 0;
  font-size: 1.55rem;
}

.hcard-footer-bar {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(20, 20, 22, 0.4);
  backdrop-filter: blur(10px);
  padding: 16px 18px;
}

.hcard-footer-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: #fff;
}

.hcard-footer-sub {
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 2px;
}

.hcard .hcard-badge {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.hcard-chips {
  display: flex;
  gap: 9px;
  margin-bottom: 0;
}

.hcard-chip {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.hcard-chip--accent {
  background: #e8407a;
}

.hcard-chip--line {
  background: #06c755;
}

.hcards-cta {
  text-align: center;
  margin-top: 56px;
}
@media (min-width: 1270px) and (max-width: 1340px) {
  .hcards-section {
    height: auto;
    padding: 56px 0;
  }

  .hcards-row {
    padding-left: 24px;
  }

  .hcard {
    width: min(280px, 74vw);
    padding: 20px 20px;
  }

  .hcard--top,
  .hcard--footer {
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 900px) {
  .hcards-section {
    height: auto;
    padding: 56px 0;
  }

  /* No JS pin/translate below 900px (see js/main.js) — swipe natively. */
  .hcards-track {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  .hcards-row {
    padding-left: 24px;
  }

  .hcard {
    width: min(280px, 74vw);
    padding: 20px 20px;
    scroll-snap-align: start;
  }

  .hcard--top,
  .hcard--footer {
    padding-left: 0;
    padding-right: 0;
  }
}