/* Anchor reset — matches _generateClassicCSS in previewRenderer.js + staticSiteGenerator.js. */
a { color: inherit; text-decoration: none; }

:root {
  --primary-color: #3B82F6;
  --secondary-color: #10B981;
  --text-color: #1F2937;
  --bg-color: #FFFFFF;
  --background: 0 0% 100%;
  --foreground: 215 28% 17%;
  --primary: 217 91% 60%;
  --primary-foreground: 217 10% 4%;
  --secondary: 160 84% 39%;
  --secondary-foreground: 160 10% 4%;
  --card: 0 0% 98%;
  --card-foreground: 215 28% 17%;
  --muted: 0 0% 94%;
  --muted-foreground: 215 10% 45%;
  --accent: 217 25% 95%;
  --accent-foreground: 215 28% 17%;
  --border: 0 0% 90%;
  --input: 0 0% 85%;
  --ring: 217 91% 60%;
  --radius: 0.5rem;
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* ── shadcn Component Classes (scoped for specificity) ──── */

/* Honeypot field — see staticSiteGenerator.js for full rationale.
   Lives at the top of the shadcn CSS bundle so it applies wherever the
   shadcn contact-form section is rendered (deployed site, builder iframe
   preview, / preview). MUST be display:none, not off-screen positioning:
   browsers + password managers autofill positioned inputs and the server
   middleware silently drops the submission as "bot detected." */
.hp-field {
  display: none;
}

/* Section spacing & base */
[class^="shadcn-"] {
  padding: 5rem 0;
}

/* Global text wrapping for all shadcn sections */
[class^="shadcn-"] h1,
[class^="shadcn-"] h2,
[class^="shadcn-"] h3,
[class^="shadcn-"] h4,
[class^="shadcn-"] h5,
[class^="shadcn-"] h6,
[class^="shadcn-"] p,
[class^="shadcn-"] li,
[class^="shadcn-"] .subtitle,
[class^="shadcn-"] .description {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Card */
[class*="shadcn-"] .sc-card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
[class*="shadcn-"] .sc-card:hover {
  box-shadow: var(--shadow);
}

/* Buttons */
[class*="shadcn-"] .sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--radius);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.625rem 1.25rem;
  min-height: 48px;
  cursor: pointer;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
[class*="shadcn-"] .sc-btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
[class*="shadcn-"] .sc-btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
[class*="shadcn-"] .sc-btn-primary:hover {
  opacity: 0.9;
}
[class*="shadcn-"] .sc-btn-outline {
  background: transparent;
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
[class*="shadcn-"] .sc-btn-outline:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
[class*="shadcn-"] .sc-btn-ghost {
  background: transparent;
  color: hsl(var(--foreground));
}
[class*="shadcn-"] .sc-btn-ghost:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
[class*="shadcn-"] .sc-btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
[class*="shadcn-"] .sc-btn-secondary:hover {
  opacity: 0.9;
}
[class*="shadcn-"] .sc-btn-lg {
  padding: 0.75rem 2rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Badge */
[class*="shadcn-"] .sc-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
[class*="shadcn-"] .sc-badge-outline {
  background: transparent;
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}
[class*="shadcn-"] .sc-badge-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

/* Input / Textarea */
[class*="shadcn-"] .sc-input,
[class*="shadcn-"] .sc-textarea {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  min-height: 48px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
[class*="shadcn-"] .sc-input:focus,
[class*="shadcn-"] .sc-textarea:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
[class*="shadcn-"] .sc-input::placeholder,
[class*="shadcn-"] .sc-textarea::placeholder {
  color: hsl(var(--muted-foreground));
}
[class*="shadcn-"] .sc-textarea {
  min-height: 80px;
  resize: vertical;
}
[class*="shadcn-"] .sc-select {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--input));
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  min-height: 48px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}
[class*="shadcn-"] .sc-select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* Separator */
[class*="shadcn-"] .sc-separator {
  border: none;
  height: 1px;
  background: hsl(var(--border));
  margin: 1.5rem 0;
}

/* Layout utilities */
[class*="shadcn-"] .sc-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
[class*="shadcn-"] .sc-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
[class*="shadcn-"] .sc-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
[class*="shadcn-"] .sc-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
@media (max-width: 768px) {
  [class*="shadcn-"] .sc-grid-2,
  [class*="shadcn-"] .sc-grid-3,
  [class*="shadcn-"] .sc-grid-4 {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  [class*="shadcn-"] .sc-grid-3,
  [class*="shadcn-"] .sc-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Avatar */
[class*="shadcn-"] .sc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  overflow: hidden;
  border: 2px solid hsl(var(--border));
}
[class*="shadcn-"] .sc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Section-Specific shadcn Overrides ─────────────────── */
/* These use .shadcn-{type} selectors for [0,2,0]+ specificity
   to override classic .section-{type} rules. */

/* Hero */
.shadcn-hero .hero-content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.shadcn-hero .hero-content h1 {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.1;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-hero .hero-content p {
  color: hsl(var(--muted-foreground));
  font-size: 1.125rem;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-hero .cta-btn {
  border-radius: var(--radius);
  font-weight: 500;
  letter-spacing: 0;
  box-shadow: var(--shadow-sm);
}

/* Features */
.shadcn-features .feature-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2rem 1.5rem;
  text-align: left;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
  min-width: 0;
}
.shadcn-features .feature-item:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.shadcn-features .feature-icon {
  width: 48px;
  height: 48px;
  background: hsl(var(--primary) / 0.1);
  border-radius: calc(var(--radius) - 2px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  color: hsl(var(--primary));
}
.shadcn-features .feature-item h3 {
  font-weight: 600;
  font-size: 1.125rem;
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-features .feature-item p {
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Pricing */
.shadcn-pricing .pricing-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
  transform: none;
}
.shadcn-pricing .pricing-item:hover {
  box-shadow: var(--shadow);
  transform: none;
}
.shadcn-pricing .pricing-item.highlighted {
  border-color: hsl(var(--primary));
  box-shadow: var(--shadow);
  position: relative;
  transform: none;
}
.shadcn-pricing .pricing-grid {
  max-width: 1000px;
  margin: 0 auto;
}
.shadcn-pricing .pricing-name {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-pricing .pricing-price {
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}
.shadcn-pricing .pricing-period {
  font-size: 1rem;
  color: hsl(var(--muted-foreground));
  font-weight: normal;
}
.shadcn-pricing .pricing-features {
  list-style: none;
  text-align: left;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}
.shadcn-pricing .pricing-features li {
  padding: 0.5rem 0;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-pricing .pricing-features li:last-child {
  border-bottom: none;
}
.shadcn-pricing .pricing-features li::before {
  display: none;
}
.shadcn-pricing .sc-btn {
  margin-top: auto;
  align-self: stretch;
  text-align: center;
}

/* Testimonials */
.shadcn-testimonials .testimonial-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  transition: box-shadow 0.2s;
}
.shadcn-testimonials .testimonial-item:hover {
  box-shadow: var(--shadow);
  transform: none;
}
.shadcn-testimonials .testimonial-quote {
  font-style: normal;
  color: hsl(var(--card-foreground));
  line-height: 1.7;
  font-size: 0.9375rem;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-testimonials .testimonial-name,
.shadcn-testimonials .testimonial-role {
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-testimonials .testimonial-avatar {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  border: 2px solid hsl(var(--border));
}

/* Contact Form — let the base .sc-input + .sc-textarea rules at the top of
   the stylesheet handle padding/height so contact + contactForm + gated
   forms all share a single canonical input. Constrain the form block to a
   comfortable reading width so inputs don't stretch full-bleed on desktop. */
.shadcn-contact .contact-form,
.shadcn-contactForm .contact-form {
  max-width: 38rem;
  margin-inline: auto;
}
.shadcn-contactForm button[type="submit"] {
  width: 100%;
  border-radius: var(--radius);
  font-weight: 500;
  box-shadow: var(--shadow-sm);
}

/* About */
.shadcn-about .about-image {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  box-shadow: var(--shadow);
}
.shadcn-about .about-image img {
  border-radius: var(--radius);
}
.shadcn-about .about-image .animation-display video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.shadcn-about .about-image .animation-display {
  aspect-ratio: 16/9;
}
.shadcn-about .about-image video {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Services */
.shadcn-services .service-item {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 2rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  overflow: hidden;
  min-width: 0;
}
.shadcn-services .service-item h3,
.shadcn-services .service-item .description {
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-services .service-item:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* FAQ — pure-shadcn pattern. Card-bordered items, real chevron icon
   (no pseudo-element plus/minus), accent stripe ::before only when open.
   Source: lite-bedrockexpress backend/services/shadcn/cssGenerator.js
   :540–660. Replaces the editorial-boutique cream-backdrop variant that
   was hard to read against any non-cream theme.

   Heading + subtitle spacing must live HERE (not in _generateClassicCSS)
   so the / route preview gets the same vertical rhythm the deployed
   site + builder iframe get. The / preview only loads
   generateComponentCSS() through /api/preview/styles.css; it doesn't
   load the classic block. Without these rules the H2 fell back to
   browser default margins and the gap between "Frequently Asked
   Questions" and the question list looked wrong. */
.shadcn-faq h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  text-align: center;
  margin: 0 auto 0.5rem;
  max-width: 768px;
}
.shadcn-faq .subtitle {
  text-align: center;
  margin: 0 auto 2.5rem;
  max-width: 560px;
  font-size: 1rem;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
}
/* When there's no subtitle, the H2's tiny 0.5rem margin alone is too
   tight against the question list. Push the list down so the rhythm
   matches the with-subtitle layout. */
.shadcn-faq h2 + .faq-list {
  margin-top: 2rem;
}
.shadcn-faq .faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  max-width: 768px;
  margin: 0 auto;
}
.shadcn-faq .faq-item {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s ease,
              box-shadow 0.18s ease,
              background 0.18s ease;
}
.shadcn-faq .faq-item:hover {
  border-color: hsl(var(--primary) / 0.40);
}
.shadcn-faq .faq-item.open {
  border-color: hsl(var(--primary) / 0.55);
  box-shadow: 0 8px 24px -16px hsl(var(--primary) / 0.35);
}
/* Brand accent stripe on the active item — subtle but distinctive,
   reads as "this answer is the focus right now". */
.shadcn-faq .faq-item.open::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.875rem;
  bottom: 0.875rem;
  width: 3px;
  background: linear-gradient(180deg, hsl(var(--primary)) 0%, hsl(var(--primary) / 0.55) 100%);
  border-radius: 0 2px 2px 0;
}
[dir="rtl"] .shadcn-faq .faq-item.open::before {
  left: auto;
  right: 0;
  border-radius: 2px 0 0 2px;
}
.shadcn-faq .faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.125rem 1.375rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: hsl(var(--card-foreground));
  min-height: 56px;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: color 0.18s ease;
}
.shadcn-faq .faq-question:hover {
  color: hsl(var(--primary));
}
.shadcn-faq .faq-question:focus-visible {
  outline: 2px solid hsl(var(--primary) / 0.5);
  outline-offset: -2px;
}
/* Pill-shaped chevron button. Sits inside the question on the trailing
   edge. Rotates 180° on open and recolors to primary so the active
   item reads instantly. */
.shadcn-faq .faq-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.72rem;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.18s ease,
              color 0.18s ease;
}
.shadcn-faq .faq-question:hover .faq-icon {
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary));
}
.shadcn-faq .faq-item.open .faq-icon {
  transform: rotate(180deg);
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
/* Smooth height reveal. max-height transitions to a generous ceiling
   so longer answers stay fluid. */
.shadcn-faq .faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.375rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.95rem;
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: break-word;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              padding 0.32s ease;
}
.shadcn-faq .faq-item.open .faq-answer {
  max-height: 600px;
  padding: 0 1.375rem 1.25rem;
}
.shadcn-faq .faq-answer p {
  margin: 0;
}
.shadcn-faq .faq-answer p + p {
  margin-top: 0.75rem;
}

/* Events */
.shadcn-events .events-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.shadcn-events .event-item {
  display: flex;
  gap: 1.25rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s, transform 0.2s;
}
.shadcn-events .event-item:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.shadcn-events .event-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  height: 64px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: var(--radius);
  flex-shrink: 0;
}
.shadcn-events .event-month {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.shadcn-events .event-day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.shadcn-events .event-details h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-events .event-time,
.shadcn-events .event-location {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  margin: 0.25rem 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-events .event-time i,
.shadcn-events .event-location i,
.shadcn-events .event-time svg,
.shadcn-events .event-location svg {
  margin-inline-end: 0.4rem;
  width: 14px;
}
.shadcn-events .event-description {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.6;
  margin: 0.5rem 0 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-events .event-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: hsl(var(--primary));
}
.shadcn-events .event-link:hover {
  text-decoration: underline;
}
.shadcn-events .event-date-text {
  font-size: 0.85rem;
  color: hsl(var(--muted-foreground));
  margin: 0.25rem 0;
}
.shadcn-events .event-item { position: relative; }
.shadcn-events .event-remove-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  opacity: 0;
  transition: opacity 0.2s;
}
.shadcn-events .event-item:hover .event-remove-btn { opacity: 1; }
.shadcn-events .event-remove-btn:hover { background: rgba(239, 68, 68, 0.2); }
.shadcn-events .event-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 1rem auto 0;
  padding: 0.5rem 1.5rem;
  background: transparent;
  border: 2px dashed hsl(var(--border));
  border-radius: 0.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.shadcn-events .event-add-btn:hover {
  border-color: hsl(var(--primary, 220 90% 56%));
  color: hsl(var(--primary, 220 90% 56%));
}

/* Events layout: cards — grid with prominent date headers */
.shadcn-events.layout-cards .events-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}
.shadcn-events.layout-cards .event-item {
  flex-direction: column;
  border-radius: 0.75rem;
  overflow: hidden;
  border: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
}
.shadcn-events.layout-cards .event-item:hover {
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}
.shadcn-events.layout-cards .event-date-badge {
  width: 100%;
  height: auto;
  min-width: unset;
  padding: 1rem;
  flex-direction: row;
  gap: 0.75rem;
  border-radius: 0;
  font-size: 1rem;
}
.shadcn-events.layout-cards .event-details {
  padding: 1rem;
}
.shadcn-events.layout-cards .event-details h3 {
  font-size: 1.2rem;
}

/* Events layout: timeline — vertical line with dots */
.shadcn-events.layout-timeline .events-list {
  position: relative;
  padding-inline-start: 3rem;
  gap: 0;
}
.shadcn-events.layout-timeline .events-list::before {
  content: '';
  position: absolute;
  inset-inline-start: 23px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: hsl(var(--primary, 220 90% 56%));
  border-radius: 3px;
  opacity: 0.3;
}
.shadcn-events.layout-timeline .event-item {
  position: relative;
  border: none;
  border-radius: 0;
  padding: 1.25rem 1.25rem 1.25rem 0;
  border-bottom: 1px solid hsl(var(--border));
}
.shadcn-events.layout-timeline .event-item:last-child {
  border-bottom: none;
}
.shadcn-events.layout-timeline .event-item:hover {
  box-shadow: none;
  transform: none;
  background: hsl(var(--muted) / 0.3);
}
.shadcn-events.layout-timeline .event-item::before {
  content: '';
  position: absolute;
  inset-inline-start: -2.35rem;
  top: 1.6rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: hsl(var(--primary, 220 90% 56%));
  border: 3px solid hsl(var(--background, 0 0% 100%));
  z-index: 1;
}
.shadcn-events.layout-timeline .event-date-badge {
  display: none;
}
.shadcn-events.layout-timeline .event-date-text {
  font-weight: 600;
  color: hsl(var(--primary, 220 90% 56%));
  font-size: 0.9rem;
}
.shadcn-events.layout-timeline .event-details h3 {
  font-size: 1.15rem;
}

@media (max-width: 768px) {
  .shadcn-events .event-item { flex-direction: column; }
  .shadcn-events .event-date-badge {
    flex-direction: row;
    width: 100%;
    height: auto;
    padding: 0.5rem 0.75rem;
    gap: 0.5rem;
  }
  .shadcn-events.layout-cards .events-list {
    grid-template-columns: 1fr;
  }
}

/* Team */
.shadcn-team .team-member {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  text-align: center;
  overflow: hidden;
  min-width: 0;
}
.shadcn-team .team-member h3,
.shadcn-team .team-member .role,
.shadcn-team .team-member .bio {
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-team .team-member-photo {
  width: 150px;
  height: 150px;
  flex-shrink: 0;
  margin: 0 auto 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shadcn-team .team-photo {
  width: 150px;
  height: 150px;
  border-radius: 9999px;
  border: 3px solid hsl(var(--border));
  object-fit: cover;
}

/* Gallery */
.shadcn-gallery .gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  transition: box-shadow 0.2s ease;
}
.shadcn-gallery .gallery-item:hover {
  box-shadow: var(--shadow);
}
.shadcn-gallery .gallery-item img {
  border-radius: var(--radius);
}
.shadcn-gallery .gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Story */
.shadcn-story .story-block {
  border-radius: var(--radius);
  overflow: hidden;
}
.shadcn-story .story-image img {
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
}

/* Footer */
.shadcn-footer {
  background: hsl(var(--card));
}
.shadcn-footer.layout-centered {
  text-align: center;
}
.shadcn-footer.layout-centered .footer-links {
  justify-content: center;
}
.shadcn-footer.layout-simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.shadcn-footer.layout-simple .footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.shadcn-footer.layout-simple .footer-copyright {
  margin: 0;
}
.shadcn-footer.layout-minimal .footer-links {
  display: none;
}
.shadcn-footer.layout-minimal .footer-logo-img {
  display: none;
}

/* Social Links */
.shadcn-socialLinks .social-link {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.shadcn-socialLinks .social-link:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--accent));
}

/* Gated Resource */
.shadcn-gated_resource .gated-resource-container {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.5rem;
}

/* Media Section — single image/video, no text */
.shadcn-media {
  padding: 3rem 2rem;
}
.shadcn-media .media-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.shadcn-media .media-visual {
  max-width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
}
.shadcn-media .media-visual img,
.shadcn-media .media-visual picture img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.shadcn-media .media-visual video {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius);
}
.shadcn-media .media-visual iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: var(--radius);
}
.shadcn-media .media-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-radius: var(--radius);
  gap: 0.75rem;
  font-size: 1rem;
}
.shadcn-media .media-placeholder i {
  font-size: 2rem;
  opacity: 0.5;
}
.shadcn-media.layout-full {
  padding: 0;
}
.shadcn-media.layout-full .media-container {
  max-width: none;
}
.shadcn-media.layout-full .media-visual,
.shadcn-media.layout-full .media-visual img,
.shadcn-media.layout-full .media-visual picture img,
.shadcn-media.layout-full .media-visual video {
  border-radius: 0;
}
.shadcn-media .media-caption {
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.9rem;
  margin-top: 0.75rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.shadcn-media .media-linked {
  display: block;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.2s;
}
.shadcn-media .media-linked:hover {
  opacity: 0.9;
}
.shadcn-media .gallery-item-lightbox {
  cursor: pointer;
}

/* CTA Section */
.shadcn-cta {
  padding: 4rem 2rem;
}
.shadcn-cta .cta-container {
  max-width: 900px;
  margin: 0 auto;
}
.shadcn-cta h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-cta .cta-description {
  font-size: 1.125rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1.5rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-cta .cta-buttons {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.shadcn-cta .cta-image {
  flex-shrink: 0;
}
.shadcn-cta .cta-image img,
.shadcn-cta .cta-image picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}


/* ── Layout Variant CSS ─────────────────────────────── */

/* === Hero Variants === */

/* Minimal: gradient only, no media — hide image/animation/video */
.shadcn-hero.layout-minimal .hero-bg-img,
.shadcn-hero.layout-minimal .hero-bg-animation,
.shadcn-hero.layout-minimal .hero-bg-video,
.shadcn-hero.layout-minimal > picture,
.shadcn-hero.layout-minimal .hero-overlay {
  display: none !important;
}
/* Restore gradient even when has-bg-image sets background: transparent */
.shadcn-hero.layout-minimal.has-bg-image {
  background: linear-gradient(135deg, var(--hero-grad-start, hsl(var(--primary))), var(--hero-grad-end, hsl(var(--secondary, var(--primary))))) !important;
}

/* Split-right: text on left half, image visible on right half */
.shadcn-hero.layout-split-right .hero-content,
.shadcn-hero.layout-split-left .hero-content {
  text-align: left;
  max-width: 50%;
  margin-left: 0;
  margin-right: auto;
  padding: 0 2rem;
}
.shadcn-hero.layout-split-right .hero-content h1,
.shadcn-hero.layout-split-left .hero-content h1 {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
.shadcn-hero.layout-split-right .hero-content p,
.shadcn-hero.layout-split-left .hero-content p {
  margin-left: 0;
  margin-right: 0;
  max-width: none;
}
/* Overlay covers only text side, leaving image visible */
.shadcn-hero.layout-split-right .hero-overlay {
  right: 50%;
}
.shadcn-hero.layout-split-left .hero-overlay {
  left: 50%;
}

/* Split-left: text on right half, image visible on left half */
.shadcn-hero.layout-split-left .hero-content {
  margin-left: auto;
  margin-right: 0;
}

@media (max-width: 768px) {
  /* Mobile: stack vertically — image visible on one half, text on the other */
  .shadcn-hero.layout-split-right,
  .shadcn-hero.layout-split-left {
    display: flex;
    flex-direction: column;
    min-height: auto;
    padding: 0;
  }
  /* Image region: show the background image in a visible block */
  .shadcn-hero.layout-split-right .hero-bg-img,
  .shadcn-hero.layout-split-left .hero-bg-img,
  .shadcn-hero.layout-split-right .hero-bg-animation,
  .shadcn-hero.layout-split-left .hero-bg-animation {
    position: relative;
    height: 250px;
    width: 100%;
    flex-shrink: 0;
  }
  /* Hide overlay on mobile split — image is fully visible in its own block */
  .shadcn-hero.layout-split-right .hero-overlay,
  .shadcn-hero.layout-split-left .hero-overlay {
    position: relative;
    height: 0;
    left: 0;
    right: 0;
  }
  /* Text content fills remaining space with gradient background for contrast */
  .shadcn-hero.layout-split-right .hero-content,
  .shadcn-hero.layout-split-left .hero-content {
    position: relative;
    max-width: 100%;
    text-align: center;
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    z-index: 1;
    background: linear-gradient(135deg, var(--hero-grad-start, hsl(var(--primary))), var(--hero-grad-end, hsl(var(--secondary, var(--primary)))));
  }
  /* split-left: image on bottom (was on left = before text) */
  .shadcn-hero.layout-split-left {
    flex-direction: column-reverse;
  }
}

/* === Features Variants === */

/* List layout — vertical stack with horizontal icon+text rows */
.shadcn-features.layout-list .features-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}
.shadcn-features.layout-list .feature-item {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: flex-start;
  text-align: left;
}
.shadcn-features.layout-list .feature-icon {
  flex-shrink: 0;
}
.shadcn-features.layout-list .feature-text {
  flex: 1;
  min-width: 0;
}
.shadcn-features.layout-list .feature-item h3,
.shadcn-features.layout-list .feature-item p {
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-features.layout-list .feature-item h3 {
  margin-bottom: 0.25rem;
}

/* Icon-top layout — centered, transparent */
.shadcn-features.layout-icon-top .feature-item {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
}
.shadcn-features.layout-icon-top .feature-icon {
  margin: 0 auto 1rem;
}

/* Minimal layout — borderless with bottom border */
.shadcn-features.layout-minimal .feature-item {
  background: transparent;
  border: none;
  box-shadow: none;
  border-bottom: 1px solid hsl(var(--border));
  border-radius: 0;
  padding: 1.5rem 0;
}
.shadcn-features.layout-minimal .feature-item:hover {
  transform: none;
  box-shadow: none;
}
.shadcn-features.layout-minimal .feature-item:last-child {
  border-bottom: none;
}

/* Tablet: stack list-layout items vertically on medium screens */
@media (max-width: 640px) {
  .shadcn-features.layout-list .feature-item {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* === Pricing Variants === */

/* Comparison layout — connected cards, shared borders, no gaps, highlighted column pops */
.shadcn-pricing.layout-comparison .pricing-grid {
  gap: 0;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}
.shadcn-pricing.layout-comparison .pricing-item {
  border-radius: 0;
  border: none;
  border-right: 1px solid hsl(var(--border));
  box-shadow: none;
  transform: none;
  transition: none;
}
.shadcn-pricing.layout-comparison .pricing-item:hover {
  transform: none;
  box-shadow: none;
}
.shadcn-pricing.layout-comparison .pricing-item:last-child {
  border-right: none;
}
.shadcn-pricing.layout-comparison .pricing-item.highlighted {
  background: hsl(var(--accent));
  transform: none;
  box-shadow: none;
  border-color: hsl(var(--border));
}
@media (max-width: 768px) {
  .shadcn-pricing.layout-comparison .pricing-item {
    border-right: none;
    border-bottom: 1px solid hsl(var(--border));
  }
  .shadcn-pricing.layout-comparison .pricing-item:last-child {
    border-bottom: none;
  }
}

/* Minimal pricing — flat list, no cards, consistent alignment */
.shadcn-pricing.layout-minimal .pricing-grid {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
  gap: 0;
}
.shadcn-pricing.layout-minimal .pricing-item {
  background: transparent;
  border: none;
  box-shadow: none;
  border-bottom: 1px solid hsl(var(--border));
  border-radius: 0;
  padding: 2rem 0;
  transform: none;
  transition: none;
  text-align: left;
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  gap: 0.5rem 1.5rem;
  align-items: center;
}
.shadcn-pricing.layout-minimal .pricing-item:hover {
  transform: none;
  box-shadow: none;
}
.shadcn-pricing.layout-minimal .pricing-item:last-child {
  border-bottom: none;
}
.shadcn-pricing.layout-minimal .pricing-item.highlighted {
  border-color: hsl(var(--border));
  box-shadow: none;
  transform: none;
  background: transparent;
}
.shadcn-pricing.layout-minimal .sc-badge {
  display: none;
}
.shadcn-pricing.layout-minimal .pricing-name {
  font-size: 1.25rem;
  grid-column: 1;
  grid-row: 1;
}
.shadcn-pricing.layout-minimal .pricing-price {
  font-size: 1.5rem;
  grid-column: 2;
  grid-row: 1 / -1;
  white-space: nowrap;
}
.shadcn-pricing.layout-minimal .pricing-features {
  grid-column: 1;
  grid-row: 2;
  margin-bottom: 0;
}
.shadcn-pricing.layout-minimal .pricing-features li {
  border-bottom: none;
  padding: 0.25rem 0;
}
.shadcn-pricing.layout-minimal .sc-btn {
  grid-column: 3;
  grid-row: 1 / -1;
  white-space: nowrap;
  align-self: center;
}
.shadcn-pricing.layout-minimal .pricing-item-image {
  display: none;
}
@media (max-width: 768px) {
  .shadcn-pricing.layout-minimal .pricing-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 0.75rem;
  }
  .shadcn-pricing.layout-minimal .pricing-name,
  .shadcn-pricing.layout-minimal .pricing-price,
  .shadcn-pricing.layout-minimal .pricing-features,
  .shadcn-pricing.layout-minimal .sc-btn {
    grid-column: 1;
    grid-row: auto;
  }
}

/* === Testimonials Variants === */

/* Quote layout — large single quote style */
.shadcn-testimonials.layout-quote .testimonials-grid {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 720px;
  margin: 0 auto;
}
.shadcn-testimonials.layout-quote .testimonial-item {
  background: transparent;
  border: none;
  box-shadow: none;
  text-align: center;
  padding: 2rem 0;
}
.shadcn-testimonials.layout-quote .testimonial-quote {
  font-size: 1.25rem;
  line-height: 1.8;
  font-style: italic;
}
.shadcn-testimonials.layout-quote .testimonial-author-info {
  justify-content: center;
}

/* Minimal testimonials */
.shadcn-testimonials.layout-minimal .testimonial-item {
  background: transparent;
  border: none;
  box-shadow: none;
  border-bottom: 1px solid hsl(var(--border));
  border-radius: 0;
  padding: 1.5rem 0;
}
.shadcn-testimonials.layout-minimal .testimonial-item:hover {
  transform: none;
  box-shadow: none;
}
.shadcn-testimonials.layout-minimal .testimonial-item:last-child {
  border-bottom: none;
}

/* === FAQ Variants === */

/* Cards layout — all answers visible in a grid, no toggle */
.shadcn-faq.layout-cards .faq-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.shadcn-faq.layout-cards .faq-item::before { display: none; }
.shadcn-faq.layout-cards .faq-answer {
  max-height: none;
  overflow: visible;
  opacity: 1;
  padding: 0 1.5rem 1.4rem;
}
.shadcn-faq.layout-cards .faq-answer p {
  padding-top: 1rem;
}
.shadcn-faq.layout-cards .faq-icon { display: none; }
.shadcn-faq.layout-cards .faq-question {
  cursor: default;
  font-size: 1rem;
  padding: 1.4rem 1.5rem 0.5rem;
  grid-template-columns: auto 1fr;
}
.shadcn-faq.layout-cards .faq-item {
  background: hsl(var(--card));
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .shadcn-faq.layout-cards .faq-list {
    grid-template-columns: 1fr;
  }
}

/* Simple layout — flat, all visible, no borders */
.shadcn-faq.layout-simple .faq-list {
  gap: 0;
}
.shadcn-faq.layout-simple .faq-item::before { display: none; }
.shadcn-faq.layout-simple .faq-answer {
  max-height: none;
  overflow: visible;
  opacity: 1;
  padding: 0 0 1.5rem calc(1.6rem + 1.1rem);
  color: hsl(var(--muted-foreground));
  line-height: 1.7;
}
.shadcn-faq.layout-simple .faq-answer p {
  border-top: none;
  padding-top: 0;
}
.shadcn-faq.layout-simple .faq-icon { display: none; }
.shadcn-faq.layout-simple .faq-question {
  cursor: default;
  background: transparent;
  padding: 1.4rem 0 0.5rem;
  font-weight: 600;
  grid-template-columns: auto 1fr;
}
.shadcn-faq.layout-simple .faq-item {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 0;
  background: transparent;
  box-shadow: none;
}
.shadcn-faq.layout-simple .faq-item:last-child {
  border-bottom: none;
}

/* === Contact Form Variants === */

/* Inline layout — full-width clean form, centered */
.shadcn-contactForm.layout-inline .contactForm-container {
  display: block;
  max-width: 640px;
  margin: 0 auto;
}
.shadcn-contactForm.layout-inline .contactForm-content {
  text-align: center;
  margin-bottom: 2rem;
}
.shadcn-contactForm.layout-inline .contactForm-info {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
/* Newsletter-style inline form row — email + button on one line, aligned bottoms. */
.shadcn-contactForm.layout-inline .contact-form {
  max-width: 32rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
}
.shadcn-contactForm.layout-inline .contact-form .form-field {
  flex: 1 1 16rem;
  min-width: 0;
}
.shadcn-contactForm.layout-inline .contact-form button[type="submit"] {
  width: auto;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Split layout — prominent side-by-side with info card. Inside the right
   column the form already fills its grid track, so let the contact-form
   wrapper expand to its column width here (overrides the global 38rem cap). */
.shadcn-contactForm.layout-split .contactForm-container {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 3rem;
  align-items: start;
}
.shadcn-contactForm.layout-split .contactForm-content {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 2rem;
}
.shadcn-contactForm.layout-split .contact-form {
  max-width: 100%;
}
@media (max-width: 768px) {
  .shadcn-contactForm.layout-split .contactForm-container {
    grid-template-columns: 1fr;
  }
}

/* === Services Variants === */

/* List layout — vertical stack with horizontal icon+text rows */
.shadcn-services.layout-list .services-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto;
}
.shadcn-services.layout-list .service-item {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: flex-start;
  text-align: left;
}
.shadcn-services.layout-list .service-icon {
  flex-shrink: 0;
}
.shadcn-services.layout-list .service-item h3,
.shadcn-services.layout-list .service-item p,
.shadcn-services.layout-list .service-item .description {
  overflow-wrap: break-word;
  word-break: break-word;
}
.shadcn-services.layout-list .service-item h3 {
  margin-bottom: 0.25rem;
}

/* Minimal services — borderless with bottom dividers */
.shadcn-services.layout-minimal .service-item {
  background: transparent;
  border: none;
  box-shadow: none;
  border-bottom: 1px solid hsl(var(--border));
  border-radius: 0;
  padding: 1.5rem 0;
}
.shadcn-services.layout-minimal .service-item:last-child {
  border-bottom: none;
}
.shadcn-services.layout-minimal .service-item:hover {
  transform: none;
  box-shadow: none;
}

/* Tablet: stack list-layout service items vertically on medium screens */
@media (max-width: 640px) {
  .shadcn-services.layout-list .service-item {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* === About Variants === */

/* Centered layout — text above image, centered, no side-by-side */
.shadcn-about.layout-centered .about-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  gap: 1.5rem;
}
.shadcn-about.layout-centered .about-content {
  margin-bottom: 0;
}
.shadcn-about.layout-centered .about-content h2 {
  text-align: center;
  margin-bottom: 0.75rem;
}
.shadcn-about.layout-centered .about-text {
  text-align: center;
}
.shadcn-about.layout-centered .about-text:empty {
  display: none;
}
.shadcn-about.layout-centered .about-image {
  max-width: 100%;
  width: 100%;
  margin-bottom: 1rem;
}

/* Minimal about — text only, no image, clean centered prose */
.shadcn-about.layout-minimal .about-container {
  display: block;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}
.shadcn-about.layout-minimal .about-image {
  display: none;
}
.shadcn-about.layout-minimal .about-content h2 {
  text-align: center;
  margin-bottom: 1.5rem;
}
.shadcn-about.layout-minimal .about-text {
  text-align: center;
  line-height: 1.8;
  color: hsl(var(--muted-foreground));
}

/* === Gallery Variants === */

/* Masonry layout — varied row heights with CSS columns */
.shadcn-gallery.layout-masonry .gallery-grid {
  display: block;
  column-count: 3;
  column-gap: 1rem;
}
.shadcn-gallery.layout-masonry .gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
}
@media (max-width: 768px) {
  .shadcn-gallery.layout-masonry .gallery-grid {
    column-count: 2;
  }
}

/* Minimal gallery — no borders, no rounded corners, tight gap */
.shadcn-gallery.layout-minimal .gallery-item {
  border: none;
  border-radius: 0;
}
.shadcn-gallery.layout-minimal .gallery-item img {
  border-radius: 0;
}
.shadcn-gallery.layout-minimal .gallery-item video {
  border-radius: 0;
}
.shadcn-gallery.layout-minimal .gallery-item:hover {
  box-shadow: none;
}

/* Scroll layout — CSS animated horizontal marquee */
.shadcn-gallery.layout-scroll {
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
}
.shadcn-gallery.layout-scroll .gallery-grid {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 1rem;
  max-width: none;
  width: max-content;
  margin: 0;
  animation: galleryScroll var(--scroll-duration, 35s) linear infinite;
  will-change: transform;
}
.shadcn-gallery.layout-scroll .gallery-grid:hover {
  animation-play-state: paused;
}
@keyframes galleryScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.shadcn-gallery.layout-scroll .gallery-item {
  flex: 0 0 280px;
  min-width: 280px;
  height: 220px;
  aspect-ratio: auto;
}
.shadcn-gallery.layout-scroll .gallery-item picture {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
}
.shadcn-gallery.layout-scroll .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.shadcn-gallery.layout-scroll .gallery-item video {
  width: auto;
  height: 100%;
  object-fit: contain;
  border-radius: var(--radius);
}
.shadcn-gallery.layout-scroll .gallery-item:has(video) {
  flex: 0 0 auto;
  min-width: auto;
}
.shadcn-gallery.layout-scroll.scroll-large .gallery-item {
  height: 480px;
  flex: 0 0 auto;
  min-width: auto;
}
.shadcn-gallery.layout-scroll.scroll-large .gallery-item img {
  width: auto;
  height: 100%;
  object-fit: contain;
}
@media (max-width: 768px) {
  .shadcn-gallery.layout-scroll .gallery-item {
    flex: 0 0 75vw;
    min-width: 75vw;
    height: 200px;
  }
  .shadcn-gallery.layout-scroll.scroll-large .gallery-item {
    height: 60vh;
    flex: 0 0 auto;
    min-width: auto;
  }
}
/* Scroll-layout galleries are a pure visual marquee: the grid uses
   width:max-content + translateX(-50%) for an infinite loop, which requires
   the grid box to be LEFT-anchored in its parent. Forcing LTR on the whole
   scroll section (not just .gallery-grid) ensures the grid's inline-start
   is the left edge — otherwise RTL box flow anchors the oversized grid to
   the right and translateX slides it entirely off the viewport. */
html[dir="rtl"] .shadcn-gallery.layout-scroll,
html[dir="rtl"] .shadcn-gallery.layout-scroll .gallery-grid {
  direction: ltr;
}

/* === Team Variants === */

/* List layout — horizontal rows with photo, name, role side by side */
.shadcn-team.layout-list .team-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 700px;
  margin: 0 auto;
}
.shadcn-team.layout-list .team-member {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  align-items: center;
  text-align: left;
}
.shadcn-team.layout-list .team-member-photo,
.shadcn-team.layout-list .team-photo {
  flex-shrink: 0;
  margin: 0;
}
.shadcn-team.layout-list .team-member-content {
  flex: 1;
  min-width: 0;
}
.shadcn-team.layout-list .team-member-content h3,
.shadcn-team.layout-list .team-member-content .role,
.shadcn-team.layout-list .team-member-content .bio {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Minimal team — no cards, clean dividers */
.shadcn-team.layout-minimal .team-member {
  background: transparent;
  border: none;
  box-shadow: none;
  border-bottom: 1px solid hsl(var(--border));
  border-radius: 0;
  padding: 1.5rem 0;
}
.shadcn-team.layout-minimal .team-member:hover {
  transform: none;
  box-shadow: none;
}
.shadcn-team.layout-minimal .team-member:last-child {
  border-bottom: none;
}

/* Tablet: stack list-layout team members vertically on medium screens */
@media (max-width: 640px) {
  .shadcn-team.layout-list .team-member {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  .shadcn-team.layout-list .team-photo,
  .shadcn-team.layout-list .team-member-photo {
    margin: 0 auto;
  }
}

/* === Gated Resource Variants === */

/* Card layout — centered card with stacked preview above form */
.shadcn-gated_resource.layout-card .gated-resource-container {
  display: flex;
  flex-direction: column;
  max-width: 520px;
  margin: 0 auto;
  gap: 2rem;
}
.shadcn-gated_resource.layout-card .gated-resource-content {
  order: 2;
}
.shadcn-gated_resource.layout-card .gated-resource-preview {
  order: 1;
  max-height: 280px;
}
.shadcn-gated_resource.layout-card .gated-resource-content h2,
.shadcn-gated_resource.layout-card .gated-resource-content .description {
  text-align: center;
}

/* Minimal layout — centered form, no preview, clean look */
.shadcn-gated_resource.layout-minimal .gated-resource-container {
  display: block;
  max-width: 480px;
  margin: 0 auto;
}
.shadcn-gated_resource.layout-minimal .gated-resource-preview {
  display: none;
}
.shadcn-gated_resource.layout-minimal .gated-resource-content h2 {
  text-align: center;
}
.shadcn-gated_resource.layout-minimal .gated-resource-content .description {
  text-align: center;
}
.shadcn-gated_resource.layout-minimal {
  background: transparent;
}

/* === CTA Variants === */

/* Banner layout (default) — full-width colored band, centered text */
.shadcn-cta.layout-banner {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.shadcn-cta.layout-banner h2 {
  color: hsl(var(--primary-foreground));
}
.shadcn-cta.layout-banner .cta-description {
  color: hsl(var(--primary-foreground));
  opacity: 0.9;
}
.shadcn-cta.layout-banner .cta-container {
  text-align: center;
}
.shadcn-cta.layout-banner .cta-buttons {
  justify-content: center;
}
.shadcn-cta.layout-banner .sc-btn-primary {
  background: hsl(var(--primary-foreground));
  color: hsl(var(--primary));
}
.shadcn-cta.layout-banner .sc-btn-outline {
  background: transparent;
  color: hsl(var(--primary-foreground));
  border: 2px solid hsl(var(--primary-foreground));
}
.shadcn-cta.layout-banner .sc-btn-outline:hover {
  background: hsla(var(--primary-foreground) / 0.15);
}
.shadcn-cta.layout-banner .sc-btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

/* Centered layout — centered card with subtle border */
.shadcn-cta.layout-centered .cta-container {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 3rem;
  text-align: center;
  max-width: 640px;
}
.shadcn-cta.layout-centered .cta-buttons {
  justify-content: center;
}

/* Split layout — text left, image right */
.shadcn-cta.layout-split .cta-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
}
.shadcn-cta.layout-split .cta-image {
  min-height: 280px;
  border-radius: var(--radius);
  overflow: hidden;
  background: hsl(var(--muted));
}
@media (max-width: 768px) {
  .shadcn-cta.layout-split .cta-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .shadcn-cta.layout-split .cta-image {
    min-height: 200px;
  }
}

/* Minimal layout — simple inline text + button, no background */
.shadcn-cta.layout-minimal {
  background: transparent;
  padding: 2.5rem 2rem;
}
.shadcn-cta.layout-minimal .cta-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.shadcn-cta.layout-minimal .cta-content > *:not(.cta-buttons) {
  flex: 1;
}
.shadcn-cta.layout-minimal h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.shadcn-cta.layout-minimal .cta-description {
  margin-bottom: 0;
  font-size: 1rem;
}
.shadcn-cta.layout-minimal .cta-buttons {
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .shadcn-cta.layout-minimal .cta-content {
    flex-direction: column;
    text-align: center;
  }
  .shadcn-cta.layout-minimal .cta-buttons {
    justify-content: center;
  }
}

/* CTA button style variants — need !important to override has-bg-image .cta-btn rules */
.shadcn-hero .cta-btn.sc-btn-outline {
  background: transparent !important;
  color: white !important;
  border: 2px solid rgba(255, 255, 255, 0.7) !important;
}
.shadcn-hero .cta-btn.sc-btn-outline:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: white !important;
}
.shadcn-hero .cta-btn.sc-btn-secondary {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--secondary-foreground)) !important;
  border-color: hsl(var(--secondary)) !important;
}
/* Pricing CTA variants */
.shadcn-pricing .sc-btn.sc-btn-outline {
  background: transparent;
  color: hsl(var(--foreground));
  border: 2px solid hsl(var(--border));
}
.shadcn-pricing .sc-btn.sc-btn-outline:hover {
  background: hsl(var(--accent));
}
.shadcn-pricing .sc-btn.sc-btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

/* === Contact Variants === */
/* Default 'split' (info + form side-by-side, reflowing to one column on
   mobile) is the layout most contact sections want. The contact submit button
   reuses the base .sc-btn-primary / .sc-btn-outline / .sc-btn-secondary
   classes via the ctaStyle field — no extra rule needed here. */
.shadcn-contact.layout-split .contact-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.shadcn-contact.layout-split .contact-form { margin-inline: 0; }
@media (max-width: 768px) {
  .shadcn-contact.layout-split .contact-body { grid-template-columns: 1fr; }
}

/* stacked — info and form in a single full-width column. */
.shadcn-contact.layout-stacked .contact-body {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* card — wrap the body in an elevated shadcn card. */
.shadcn-contact.layout-card .contact-body {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.shadcn-contact.layout-card .contact-form { margin-inline: 0; }
@media (max-width: 768px) {
  .shadcn-contact.layout-card .contact-body { grid-template-columns: 1fr; }
}

/* minimal — contact info only; the form is removed from the flow. */
.shadcn-contact.layout-minimal .contact-form { display: none; }

/* === Media Variants === */
/* Default 'contained' (max-width 900px, centered) is the base .shadcn-media
   rules; 'full' (edge-to-edge) is already defined above. 'centered' narrows
   the frame to a focused reading width and explicitly centers the visual. */
.shadcn-media.layout-centered .media-container { max-width: 640px; }
.shadcn-media.layout-centered .media-visual {
  margin-inline: auto;
}
.shadcn-media.layout-centered .media-visual img,
.shadcn-media.layout-centered .media-visual picture img,
.shadcn-media.layout-centered .media-visual video {
  margin-inline: auto;
}
.shadcn-media.layout-centered .media-caption { max-width: 640px; }

/* === Video Variants === */
/* Default 'contained' (max-width 960px, centered) is the base .section-video
   look; 'full' goes edge-to-edge (no padding, full-bleed wrapper) and 'centered'
   narrows the embed to a focused reading width. */
.shadcn-video.layout-full { padding-left: 0; padding-right: 0; }
.shadcn-video.layout-full .video-container { max-width: none; }
.shadcn-video.layout-full .video-wrapper { border-radius: 0; }
.shadcn-video.layout-centered .video-container { max-width: 640px; }

/* === Motion Animation Variants === */
/* Default 'contained' (max-width 1100px, centered) is the base
   .section-motion-animation look; 'full' goes edge-to-edge and 'centered'
   narrows the two-column frame to a focused width. */
.shadcn-motion_animation.layout-full { padding-left: 0; padding-right: 0; }
.shadcn-motion_animation.layout-full .motion-anim-container { max-width: none; }
.shadcn-motion_animation.layout-centered .motion-anim-container { max-width: 760px; }

/* ===== Customers Include + As Seen In (social proof) ===== */
.section-customers-include, .section-as-seen-in { padding: 4rem 2rem; text-align: center; }
.section-customers-include h2, .section-as-seen-in h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.5rem; }
.section-customers-include .subtitle, .section-as-seen-in .subtitle { color: var(--text-muted, #6b7280); margin: 0 auto 2.5rem; font-size: 1rem; max-width: 600px; }
.ci-grid { display: grid; grid-template-columns: repeat(var(--ci-cols, 4), minmax(0, 1fr)); gap: 2rem 2.5rem; align-items: center; max-width: 1100px; margin: 0 auto; }
.ci-grid.cols-2 { --ci-cols: 2; } .ci-grid.cols-3 { --ci-cols: 3; } .ci-grid.cols-4 { --ci-cols: 4; } .ci-grid.cols-5 { --ci-cols: 5; } .ci-grid.cols-6 { --ci-cols: 6; }
.ci-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.55rem; text-decoration: none; color: inherit; min-height: 64px; }
.ci-logo { display: flex; align-items: center; justify-content: center; height: 54px; }
.ci-logo img { max-height: 54px; max-width: 100%; width: auto; object-fit: contain; }
.ci-wordmark { font-size: 1.15rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2; }
.ci-name { font-size: 0.8rem; color: var(--text-muted, #6b7280); font-weight: 500; }
.asi-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.4rem 2.5rem; max-width: 1100px; margin: 0 auto; }
.asi-item { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; }
.asi-logo { display: inline-flex; align-items: center; height: 32px; }
.asi-logo img { max-height: 32px; max-width: 170px; width: auto; object-fit: contain; }
.asi-wordmark { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.01em; }
.asi-name { font-size: 0.85rem; color: var(--text-muted, #6b7280); }
/* Monochrome -> color on hover/reveal (full color on touch devices) */
.ci-logo img, .asi-logo img, .ci-wordmark, .asi-wordmark { filter: grayscale(1); opacity: 0.6; transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease; }
.ci-item:hover .ci-logo img, .asi-item:hover .asi-logo img, .ci-item:hover .ci-wordmark, .asi-item:hover .asi-wordmark { filter: grayscale(0); opacity: 1; transform: scale(1.04); }
@media (hover: none) { .ci-logo img, .asi-logo img, .ci-wordmark, .asi-wordmark { filter: none; opacity: 1; } }
/* Customers — wall variant (bordered cells) */
.section-customers-include.layout-wall .ci-grid { gap: 0; border: 1px solid var(--border-color, #e5e7eb); border-radius: 14px; overflow: hidden; }
.section-customers-include.layout-wall .ci-item { border: 1px solid var(--border-color, #e5e7eb); margin: -0.5px; padding: 1.85rem 1rem; min-height: 116px; }
/* Customers — minimal variant (logos only, centered row) */
.section-customers-include.layout-minimal .ci-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 2.5rem 3rem; }
.section-customers-include.layout-minimal .ci-name { display: none; }
/* As seen in — cards variant */
.section-as-seen-in.layout-cards .asi-grid { display: grid; grid-template-columns: repeat(var(--asi-cols, 4), minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; }
.asi-grid.cols-2 { --asi-cols: 2; } .asi-grid.cols-3 { --asi-cols: 3; } .asi-grid.cols-4 { --asi-cols: 4; } .asi-grid.cols-5 { --asi-cols: 5; } .asi-grid.cols-6 { --asi-cols: 6; }
.section-as-seen-in.layout-cards .asi-item { flex-direction: column; justify-content: center; gap: 0.7rem; padding: 1.6rem 1rem; border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; transition: box-shadow 0.25s ease, transform 0.25s ease; }
.section-as-seen-in.layout-cards .asi-item:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.08); transform: translateY(-2px); }
/* As seen in — list variant */
.section-as-seen-in.layout-list .asi-grid { flex-direction: column; flex-wrap: nowrap; align-items: stretch; max-width: 640px; gap: 0; }
.section-as-seen-in.layout-list .asi-item { justify-content: space-between; padding: 1rem 0.5rem; border-bottom: 1px solid var(--border-color, #e5e7eb); }
/* Marquee variant (customers + as seen in) — auto-scroll loop */
.section-customers-include.layout-marquee, .section-as-seen-in.layout-marquee { overflow: hidden; }
.section-customers-include.layout-marquee .ci-grid, .section-as-seen-in.layout-marquee .asi-grid { display: flex; flex-wrap: nowrap; width: max-content; gap: 3.5rem; justify-content: flex-start; animation: ci-marquee 32s linear infinite; }
.section-customers-include.layout-marquee .ci-item, .section-as-seen-in.layout-marquee .asi-item { flex: 0 0 auto; }
.section-customers-include.layout-marquee:hover .ci-grid, .section-as-seen-in.layout-marquee:hover .asi-grid { animation-play-state: paused; }
@keyframes ci-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
html[dir="rtl"] .section-customers-include.layout-marquee .ci-grid, html[dir="rtl"] .section-as-seen-in.layout-marquee .asi-grid { animation-direction: reverse; }
@media (max-width: 768px) {
  .section-customers-include, .section-as-seen-in { padding: 3rem 1rem; }
  .ci-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .section-as-seen-in.layout-cards .asi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}