/* ThornBloom — Wedding Website Landing Pages
 * Hub page (.wedding-website-hub-page): midnight palette, portal cards
 * Per-theme pages (.wedding-website-page): realm tokens, tbc- sections
 * Created 2026-05-14 by website-manager agent.
 */

/* ═══════════════════════════════════════════════
   HUB PAGE — MIDNIGHT PALETTE
   ═══════════════════════════════════════════════ */

.wedding-website-hub-page {
  --hub-bg: #070A14;
  --hub-cream: #E8E1D5;
  --hub-gold: #C9A87C;
  --hub-gold-bright: #DDBE94;
  --hub-border: rgba(184, 179, 168, 0.15);
  --hub-muted: #5A6580;
  --hub-taupe: #B8B3A8;
  --hub-primary: #0E1426;
  --hub-secondary: #161E35;
  --ef-metallic: #D1B28C;
  --dr-metallic: #C4956A;
  --dr-cream: #E5DDD2;
  background: var(--hub-bg);
  color: var(--hub-taupe);
}

.hub-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .hub-container { padding: 0 40px; }
}

/* Hub Hero */
.wedding-website-hub-page .hub-hero {
  text-align: center;
  padding: 100px 0 80px;
}
@media (min-width: 768px) {
  .wedding-website-hub-page .hub-hero { padding: 140px 0 80px; }
}
.wedding-website-hub-page .hub-hero__eyebrow {
  font-family: var(--tb-font-heading);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--hub-gold);
  margin-bottom: 24px;
  opacity: 0.8;
}
.wedding-website-hub-page .hub-hero__title {
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  color: var(--hub-cream);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}
.wedding-website-hub-page .hub-hero__subtitle {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--hub-cream);
  opacity: 0.6;
  max-width: 520px;
  margin: 0 auto 16px;
  line-height: 1.5;
}
.wedding-website-hub-page .hub-hero__price {
  font-family: var(--tb-font-body);
  font-size: 1rem;
  color: var(--hub-gold);
  opacity: 0.7;
  letter-spacing: 0.04em;
}
.wedding-website-hub-page .hub-hero__divider {
  width: 80px;
  height: 1px;
  background: var(--hub-gold);
  opacity: 0.35;
  margin: 40px auto 0;
}

/* Portal Cards */
.wedding-website-hub-page .hub-portals {
  padding: 80px 0 120px;
}
.hub-portals__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .hub-portals__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}
.wedding-website-hub-page .portal-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 480px;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (min-width: 768px) {
  .wedding-website-hub-page .portal-card { min-height: 560px; }
}
.wedding-website-hub-page .portal-card:hover {
  transform: translateY(-4px);
}
.wedding-website-hub-page .portal-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.wedding-website-hub-page .portal-card:hover .portal-card__bg {
  transform: scale(1.06);
}
.portal-card--ef .portal-card__bg {
  background-color: #1A2F25;
}
.portal-card--dr .portal-card__bg {
  background-color: #351E28;
}
.wedding-website-hub-page .portal-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 40%, rgba(0,0,0,0.08) 70%, transparent 100%);
  pointer-events: none;
}
.wedding-website-hub-page .portal-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
  pointer-events: none;
}
.portal-card--ef:hover::after {
  border-color: rgba(209, 178, 140, 0.35);
  box-shadow: inset 0 0 30px rgba(209, 178, 140, 0.05);
}
.portal-card--dr:hover::after {
  border-color: rgba(196, 149, 106, 0.35);
  box-shadow: inset 0 0 30px rgba(196, 149, 106, 0.05);
}
.wedding-website-hub-page .portal-card__content {
  position: relative;
  z-index: 2;
  padding: 40px 28px;
}
@media (min-width: 768px) {
  .wedding-website-hub-page .portal-card__content { padding: 48px 36px; }
}
.wedding-website-hub-page .portal-card__name {
  font-family: var(--tb-font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hub-cream);
  margin-bottom: 10px;
}
.portal-card--dr .portal-card__name {
  color: var(--dr-cream);
  font-family: var(--tb-font-display-romance);
}
.wedding-website-hub-page .portal-card__mood {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--hub-cream);
  opacity: 0.7;
  line-height: 1.5;
  margin-bottom: 24px;
}
.portal-card--dr .portal-card__mood {
  color: var(--dr-cream);
}
.wedding-website-hub-page .portal-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--tb-font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 2px;
  border: 1px solid;
  background: transparent;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  min-height: 44px;
}
.portal-card--ef .portal-card__cta {
  color: var(--ef-metallic);
  border-color: rgba(209, 178, 140, 0.4);
}
.portal-card--ef .portal-card__cta:hover {
  background: var(--ef-metallic);
  color: #1A2F25;
  border-color: var(--ef-metallic);
}
.portal-card--dr .portal-card__cta {
  color: var(--dr-metallic);
  border-color: rgba(196, 149, 106, 0.4);
  font-family: var(--tb-font-display-romance);
}
.portal-card--dr .portal-card__cta:hover {
  background: var(--dr-metallic);
  color: #1A1015;
  border-color: var(--dr-metallic);
}

/* Upcoming Realms */
.wedding-website-hub-page .hub-upcoming {
  text-align: center;
  padding: 0 0 80px;
  border-top: 1px solid var(--hub-border);
  padding-top: 60px;
}
.wedding-website-hub-page .hub-upcoming__label {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--hub-muted);
  margin-bottom: 24px;
}
.hub-upcoming__realms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 28px;
  max-width: 600px;
  margin: 0 auto;
}
.hub-upcoming__realm {
  font-family: var(--tb-font-heading);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--hub-muted);
  opacity: 0.45;
  padding: 6px 0;
}

/* Trust Strip */
.wedding-website-hub-page .hub-trust {
  padding: 40px 0 60px;
  border-top: 1px solid var(--hub-border);
}
.hub-trust__strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 36px;
}
.wedding-website-hub-page .hub-trust span,
.hub-trust__strip span {
  font-family: var(--tb-font-heading);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--hub-gold);
  opacity: 0.4;
  white-space: nowrap;
}


/* ═══════════════════════════════════════════════
   PER-THEME PAGES — REALM TOKENS
   ═══════════════════════════════════════════════ */

.wedding-website-page {
  background: var(--realm-bg);
  color: var(--realm-cream);
}

.wedding-website-page .tbc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.wedding-website-page .tbc-container--narrow {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
.wedding-website-page .tbc-container--wide {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .wedding-website-page .tbc-container,
  .wedding-website-page .tbc-container--narrow,
  .wedding-website-page .tbc-container--wide { padding: 0 40px; }
}

/* Ornament */
.wedding-website-page .tbc-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 28px;
}
.wedding-website-page .tbc-ornament::before,
.wedding-website-page .tbc-ornament::after {
  content: '';
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--realm-metallic);
  opacity: 0.35;
}
.wedding-website-page .tbc-ornament span {
  font-family: var(--tb-font-body);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--realm-metallic);
  white-space: nowrap;
}

/* Section headings */
.wedding-website-page .tbc-section-title {
  font-family: var(--tb-font-display);
  font-weight: 600;
  color: var(--realm-cream);
  line-height: 1.12;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.wedding-website-page .tbc-section-title em {
  font-style: italic;
  color: var(--realm-metallic);
}
.wedding-website-page .tbc-section-subtitle {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--realm-muted);
  line-height: 1.6;
  margin-top: 16px;
}

/* Buttons */
.wedding-website-page .tbc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--tb-font-heading);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  padding: 16px 36px;
  min-height: 48px;
  cursor: pointer;
  transition: all 0.25s ease;
  border: 1px solid transparent;
}
.wedding-website-page .tbc-btn--primary {
  background: var(--realm-metallic);
  color: var(--realm-bg);
  border-color: var(--realm-metallic);
}
.wedding-website-page .tbc-btn--primary:hover {
  background: var(--realm-metallic-bright);
  border-color: var(--realm-metallic-bright);
  transform: translateY(-1px);
}
body.realm-dark-romance .wedding-website-page .tbc-btn--primary {
  background: var(--realm-primary);
  color: var(--realm-metallic);
  border-color: var(--realm-primary);
}
body.realm-dark-romance .wedding-website-page .tbc-btn--primary:hover {
  background: #6E2022;
  border-color: #6E2022;
  color: var(--realm-metallic-bright);
}
.wedding-website-page .tbc-btn--ghost {
  background: transparent;
  color: var(--realm-metallic);
  border-color: var(--realm-border-strong, rgba(209, 178, 140, 0.45));
}
.wedding-website-page .tbc-btn--ghost:hover {
  background: rgba(209, 178, 140, 0.08);
  border-color: var(--realm-metallic);
}
.wedding-website-page .tbc-btn--text {
  background: none;
  border: none;
  color: var(--realm-metallic);
  font-family: var(--tb-font-body);
  font-size: 14px;
  font-style: italic;
  letter-spacing: 0.05em;
  text-transform: none;
  padding: 8px 0;
  min-height: auto;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: rgba(209, 178, 140, 0.4);
}
.wedding-website-page .tbc-btn--text:hover {
  text-decoration-color: var(--realm-metallic);
}

/* Hero */
.wedding-website-page .tbc-hero {
  position: relative;
  min-height: auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 60px 0 48px;
  background: var(--realm-bg);
}
@media (min-width: 768px) {
  .wedding-website-page .tbc-hero { min-height: auto; padding: 80px 0 60px; }
}
.wedding-website-page .tbc-hero__bg {
  position: absolute;
  inset: 0;
  opacity: 0.35;
}
body.realm-enchanted-forest .wedding-website-page .tbc-hero__bg {
  background: linear-gradient(160deg, #1A2F25 0%, #142a1e 30%, #0c100e 100%);
}
body.realm-dark-romance .wedding-website-page .tbc-hero__bg {
  background: linear-gradient(160deg, #5C1A1B 0%, #351E28 30%, #1A1015 100%);
}
body.realm-dark-romance .wedding-website-page .tbc-hero::after {
  content: '';
  position: absolute;
  inset: 24px;
  border: 1px solid rgba(196, 149, 106, 0.07);
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}
@media (min-width: 768px) {
  body.realm-dark-romance .wedding-website-page .tbc-hero::after { inset: 48px; }
}

.wedding-website-page .tbc-hero__inner {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .wedding-website-page .tbc-hero__inner {
    grid-template-columns: 45fr 55fr;
    gap: 56px;
    padding: 0 40px;
  }
}
.wedding-website-page .tbc-hero__copy { order: 2; }
@media (min-width: 768px) {
  .wedding-website-page .tbc-hero__copy { order: 1; }
}
.wedding-website-page .tbc-hero__breadcrumb {
  font-family: var(--tb-font-body);
  font-size: 12px;
  color: var(--realm-muted);
  margin-bottom: 24px;
  letter-spacing: 0.02em;
}
.wedding-website-page .tbc-hero__breadcrumb a {
  color: var(--realm-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wedding-website-page .tbc-hero__breadcrumb a:hover { color: var(--realm-metallic); }
.wedding-website-page .tbc-hero__breadcrumb .sep { margin: 0 8px; opacity: 0.5; }
.wedding-website-page .tbc-hero__eyebrow {
  display: block;
  font-family: var(--tb-font-body);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--realm-metallic);
  margin-bottom: 20px;
  font-weight: 600;
}
.wedding-website-page .tbc-hero__title {
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--realm-cream);
  line-height: 1.1;
  margin-bottom: 20px;
}
.wedding-website-page .tbc-hero__title em {
  font-style: italic;
  color: var(--realm-metallic);
}
.wedding-website-page .tbc-hero__body {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: var(--realm-taupe);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 440px;
}
.wedding-website-page .tbc-hero__speed {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--realm-metallic);
  margin: 0 0 20px;
  letter-spacing: 0.01em;
}
.wedding-website-page .tbc-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.wedding-website-page .tbc-hero__media { order: 1; position: relative; }
@media (min-width: 768px) {
  .wedding-website-page .tbc-hero__media { order: 2; margin-right: -40px; }
}
.wedding-website-page .tbc-hero__screenshot {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.15));
  border-radius: 6px;
  overflow: hidden;
}
.wedding-website-page .tbc-hero__screenshot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wedding-website-page .tbc-hero__realm-bar {
  padding: 14px 0;
  text-align: center;
  border-top: 1px solid rgba(209, 178, 140, 0.08);
  border-bottom: 1px solid rgba(209, 178, 140, 0.08);
}
body.realm-enchanted-forest .wedding-website-page .tbc-hero__realm-bar {
  background: var(--realm-primary);
}
body.realm-dark-romance .wedding-website-page .tbc-hero__realm-bar {
  background: var(--realm-secondary);
}
.wedding-website-page .tbc-hero__realm-bar span {
  font-family: var(--tb-font-body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--realm-metallic);
  opacity: 0.7;
}

/* Fireflies (EF only) */
.wedding-website-page .tbc-fireflies {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.wedding-website-page .tbc-fireflies .fly {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--realm-metallic);
  opacity: 0;
  animation: ww-fly var(--dur, 6s) var(--delay, 0s) ease-in-out infinite;
}
@keyframes ww-fly {
  0%, 100% { opacity: 0; transform: translate(0,0) scale(1); }
  25% { opacity: 0.6; }
  50% { opacity: 0.25; transform: translate(var(--dx, 20px), var(--dy, -30px)) scale(1.3); }
  75% { opacity: 0.5; }
}
@media (prefers-reduced-motion: reduce) {
  .wedding-website-page .tbc-fireflies .fly { animation: none; opacity: 0.25; }
}

/* Manifesto */
.wedding-website-page .tbc-manifesto {
  padding: 100px 0;
  text-align: center;
}
@media (min-width: 768px) { .wedding-website-page .tbc-manifesto { padding: 120px 0; } }
.wedding-website-page .tbc-manifesto__headline {
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--realm-cream);
  line-height: 1.2;
  margin-bottom: 20px;
}
.wedding-website-page .tbc-manifesto__headline em {
  font-style: italic;
  color: var(--realm-metallic);
}
.wedding-website-page .tbc-manifesto__body {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: clamp(1rem, 2vw, 1.1rem);
  color: var(--realm-muted);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 40px;
}
.wedding-website-page .tbc-manifesto__traits {
  list-style: none;
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
}
.wedding-website-page .tbc-manifesto__traits li {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--realm-cream);
  padding: 18px 0;
  border-bottom: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.1));
  line-height: 1.5;
}
.wedding-website-page .tbc-manifesto__traits li:first-child {
  border-top: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.1));
}
.wedding-website-page .tbc-manifesto__traits .leaf {
  color: var(--realm-metallic);
  margin-right: 10px;
  font-style: normal;
}
.wedding-website-page .tbc-manifesto__closing {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--realm-metallic);
  margin-top: 36px;
  opacity: 0.8;
}

/* Features */
.wedding-website-page .tbc-features { padding: 100px 0; }
@media (min-width: 768px) { .wedding-website-page .tbc-features { padding: 120px 0; } }
.wedding-website-page .tbc-features__header { text-align: center; margin-bottom: 72px; }
.wedding-website-page .tbc-feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 72px;
}
.wedding-website-page .tbc-feature-row:last-child { margin-bottom: 0; }
@media (min-width: 768px) {
  .wedding-website-page .tbc-feature-row {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-bottom: 96px;
  }
  .wedding-website-page .tbc-feature-row--reverse .tbc-feature-row__media { order: 2; }
  .wedding-website-page .tbc-feature-row--reverse .tbc-feature-row__text { order: 1; }
}
.wedding-website-page .tbc-feature-row__media {
  aspect-ratio: 16 / 10;
  border: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.15));
  border-radius: 4px;
  overflow: hidden;
}
.wedding-website-page .tbc-feature-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.wedding-website-page .tbc-feature-row__text h3 {
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.5vw, 1.7rem);
  color: var(--realm-cream);
  margin-bottom: 14px;
  line-height: 1.15;
}
.wedding-website-page .tbc-feature-row__text h3 em {
  font-style: italic;
  color: var(--realm-metallic);
}
.wedding-website-page .tbc-feature-row__text p {
  font-family: var(--tb-font-body);
  font-size: 1rem;
  color: var(--realm-taupe);
  line-height: 1.7;
}

/* How It Works */
.wedding-website-page .tbc-how { padding: 100px 0; }
@media (min-width: 768px) { .wedding-website-page .tbc-how { padding: 120px 0; } }
.wedding-website-page .tbc-how__header { text-align: center; margin-bottom: 64px; }
.wedding-website-page .tbc-how__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 860px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .wedding-website-page .tbc-how__steps {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
    max-width: 100%;
  }
}
.wedding-website-page .tbc-step { text-align: center; position: relative; }
@media (min-width: 768px) {
  .wedding-website-page .tbc-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 36px;
    right: -16px;
    width: 32px;
    height: 1px;
    background: var(--realm-border-metallic, rgba(209, 178, 140, 0.25));
  }
}
.wedding-website-page .tbc-step__num {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.25));
  border-radius: 50%;
  font-family: var(--tb-font-display);
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--realm-metallic);
}
.wedding-website-page .tbc-step h3 {
  font-family: var(--tb-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--realm-cream);
  margin-bottom: 8px;
}
.wedding-website-page .tbc-step p {
  font-family: var(--tb-font-body);
  font-size: 0.95rem;
  color: var(--realm-taupe);
  line-height: 1.6;
}

/* Pricing */
.wedding-website-page .tbc-pricing { padding: 100px 0; }
@media (min-width: 768px) { .wedding-website-page .tbc-pricing { padding: 120px 0; } }
.wedding-website-page .tbc-pricing__header { text-align: center; margin-bottom: 56px; }
.wedding-website-page .tbc-pricing__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
}
/* C5d 2026-09-11: three cards cannot fit at 768 (the grid ran to 862 to 883px), so the grid
   stays one centred column below 1024px and goes three-up from 1024px. Same breakpoints as the
   Obsidian Vow LP. Desktop is unchanged. */
@media (min-width: 768px) and (max-width: 1023px) {
  .wedding-website-page .tbc-pricing__grid { max-width: 560px; }
}
@media (min-width: 1024px) {
  .wedding-website-page .tbc-pricing__grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
}
.wedding-website-page .tbc-price-card {
  border: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.2));
  border-radius: 4px;
  padding: 48px 36px;
  position: relative;
}
body.realm-enchanted-forest .wedding-website-page .tbc-price-card { background: rgba(26, 47, 37, 0.12); }
body.realm-dark-romance .wedding-website-page .tbc-price-card { background: rgba(53, 30, 40, 0.15); }
.wedding-website-page .tbc-price-card--featured { border-color: var(--realm-metallic); }
body.realm-enchanted-forest .wedding-website-page .tbc-price-card--featured { background: rgba(26, 47, 37, 0.2); }
body.realm-dark-romance .wedding-website-page .tbc-price-card--featured { background: rgba(53, 30, 40, 0.25); }
.wedding-website-page .tbc-price-card--coming-soon { opacity: 0.55; pointer-events: none; }
.wedding-website-page .tbc-price-card__coming-soon-label {
  font-family: var(--tb-font-heading);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--realm-muted);
  text-align: center;
  padding: 14px 0;
}
.wedding-website-page .tbc-price-card__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--realm-metallic);
  color: var(--realm-bg);
  font-family: var(--tb-font-heading);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 18px;
  border-radius: 2px;
  white-space: nowrap;
}
.wedding-website-page .tbc-price-card__name {
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--realm-cream);
  margin-bottom: 8px;
  text-align: center;
}
.wedding-website-page .tbc-price-card__price { text-align: center; margin-bottom: 8px; }
.wedding-website-page .tbc-price-card__price strong {
  font-family: var(--tb-font-display);
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--realm-metallic);
}
.wedding-website-page .tbc-price-card__term {
  text-align: center;
  font-size: 0.85rem;
  color: var(--realm-muted);
  margin-bottom: 28px;
  font-style: italic;
}
.wedding-website-page .tbc-price-card__list {
  list-style: none;
  margin-bottom: 32px;
  padding: 0;
}
.wedding-website-page .tbc-price-card__list li {
  font-size: 0.95rem;
  color: var(--realm-taupe);
  padding: 8px 0 8px 20px;
  border-bottom: 1px solid rgba(209, 178, 140, 0.06);
  position: relative;
  line-height: 1.5;
}
.wedding-website-page .tbc-price-card__list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--realm-metallic);
  font-size: 0.85rem;
}
.wedding-website-page .tbc-price-card__cta { text-align: center; }

/* Interest signup embedded in the coming-soon Grand Wedding Suite card (2026-09-10).
   The card wrapper carries pointer-events:none via .tbc-price-card--coming-soon
   above -- re-enable it here so the live MailerLite form can actually be used. */
.wedding-website-page .tbc-price-card--coming-soon .tbc-interest,
.wedding-website-page .tbc-price-card--coming-soon .tbc-interest * {
  pointer-events: auto;
}
.wedding-website-page .tbc-interest {
  width: 100%;
  margin-top: 4px;
}
.wedding-website-page .tbc-interest-prompt {
  font-family: var(--tb-font-heading);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--realm-metallic);
  margin: 0 0 10px;
  line-height: 1.5;
  text-align: center;
}
.wedding-website-page .tbc-interest-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  border: 0;
}
.wedding-website-page .tbc-interest-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  background: var(--realm-bg);
  border: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.25));
  outline: none;
  padding: 11px 14px;
  font-family: var(--tb-font-body);
  font-size: 14px;
  font-style: italic;
  color: var(--realm-cream);
}
.wedding-website-page .tbc-interest-input::placeholder { color: var(--realm-taupe); }
.wedding-website-page .tbc-interest-input:focus { border-color: var(--realm-metallic); }
.wedding-website-page .tbc-interest-submit {
  width: 100%;
  background: var(--realm-metallic);
  color: var(--realm-bg);
  border: none;
  padding: 11px 16px;
  cursor: pointer;
  font-family: var(--tb-font-heading);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s ease;
}
.wedding-website-page .tbc-interest-submit:hover { background: var(--realm-metallic-bright); }
.wedding-website-page .tbc-interest-submit:disabled { opacity: 0.7; cursor: default; }
.wedding-website-page .tbc-interest-form .tb-ml-form__msg {
  font-family: var(--tb-font-body);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}
.wedding-website-page .tbc-interest-form .tb-ml-form__msg:empty { display: none; }
.wedding-website-page .tbc-price-card .tb-ml-form__success {
  font-family: var(--tb-font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--realm-cream);
  line-height: 1.6;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--realm-metallic);
  background: rgba(209, 178, 140, 0.1);
  text-align: center;
}
.wedding-website-page .tbc-interest-disclaimer {
  display: block;
  margin-top: 8px;
  font-family: var(--tb-font-body);
  font-size: 11px;
  font-style: italic;
  color: var(--realm-taupe);
  text-align: center;
}
.wedding-website-page .tbc-pricing__crosssell { text-align: center; margin-top: 48px; }
.wedding-website-page .tbc-pricing__crosssell p {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: 1rem;
  color: var(--realm-muted);
  margin-bottom: 12px;
}

/* FAQ */
.wedding-website-page .tbc-faq-section { padding: 100px 0; }
@media (min-width: 768px) { .wedding-website-page .tbc-faq-section { padding: 120px 0; } }
.wedding-website-page .tbc-faq-section__header { text-align: center; margin-bottom: 56px; }
.wedding-website-page .tbc-faq-list { max-width: 760px; margin: 0 auto; }
.wedding-website-page .tbc-faq-item {
  border-bottom: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.1));
}
.wedding-website-page .tbc-faq-item__q {
  width: 100%;
  background: none;
  border: none;
  font-family: var(--tb-font-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--realm-cream);
  text-align: left;
  padding: 24px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  transition: color 0.2s ease;
}
.wedding-website-page .tbc-faq-item__q:hover { color: var(--realm-metallic); }
.wedding-website-page .tbc-faq-item__q::after {
  content: '+';
  font-family: var(--tb-font-body);
  font-size: 1.3rem;
  color: var(--realm-metallic);
  opacity: 0.5;
  flex-shrink: 0;
}
.wedding-website-page .tbc-faq-item.is-open .tbc-faq-item__q::after { content: '\2212'; }
.wedding-website-page .tbc-faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.wedding-website-page .tbc-faq-item.is-open .tbc-faq-item__a {
  max-height: 400px;
  padding-bottom: 24px;
}
.wedding-website-page .tbc-faq-item__a p {
  font-size: 0.95rem;
  color: var(--realm-taupe);
  line-height: 1.7;
}

/* Final CTA */
.wedding-website-page .tbc-final-cta { padding: 100px 0 120px; text-align: center; }
@media (min-width: 768px) { .wedding-website-page .tbc-final-cta { padding: 120px 0 140px; } }
.wedding-website-page .tbc-final-cta__headline {
  font-family: var(--tb-font-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  color: var(--realm-cream);
  line-height: 1.15;
  margin-bottom: 16px;
}
.wedding-website-page .tbc-final-cta__headline em {
  font-style: italic;
  color: var(--realm-metallic);
}
.wedding-website-page .tbc-final-cta__sub {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--realm-taupe);
  margin-bottom: 36px;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.wedding-website-page .tbc-final-cta__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 32px;
}
.wedding-website-page .tbc-final-cta__trust span {
  font-family: var(--tb-font-body);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--realm-metallic);
  opacity: 0.5;
}

/* Sticky CTA bar — full-width bottom bar, all devices */
.wedding-website-page .tbc-sticky {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9990;
  background: rgba(12, 16, 14, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(209, 178, 140, 0.2);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.4);
  padding: 16px 24px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
body.realm-dark-romance .wedding-website-page .tbc-sticky {
  background: rgba(26, 16, 21, 0.97);
  border-top-color: rgba(196, 149, 106, 0.2);
}
.wedding-website-page .tbc-sticky.is-visible { transform: translateY(0); }
.wedding-website-page .tbc-sticky.is-hidden { transform: translateY(100%) !important; }

.wedding-website-page .tbc-sticky__info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.wedding-website-page .tbc-sticky__price {
  font-family: var(--tb-font-body);
  font-size: 0.8rem;
  color: var(--realm-taupe);
  line-height: 1.3;
}
.wedding-website-page .tbc-sticky__price strong {
  display: block;
  font-family: var(--tb-font-display);
  font-size: 1.3rem;
  color: var(--realm-cream);
  font-weight: 600;
}
.wedding-website-page .tbc-sticky__spots {
  font-family: var(--tb-font-body);
  color: var(--realm-metallic);
  opacity: 0.85;
  white-space: nowrap;
}
.wedding-website-page .tbc-sticky .tbc-btn {
  font-size: 0.9rem;
  padding: 14px 32px;
  min-height: 48px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* Mobile: stack and make button full-width */
@media (max-width: 767px) {
  .wedding-website-page .tbc-sticky {
    flex-direction: column;
    padding: 16px 20px 20px;
    gap: 10px;
  }
  .wedding-website-page .tbc-sticky__info {
    width: 100%;
    justify-content: space-between;
  }
  .wedding-website-page .tbc-sticky .tbc-btn {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    padding: 16px 24px;
    min-height: 52px;
  }
}

/* Desktop: single row */
@media (min-width: 768px) {
  .wedding-website-page .tbc-sticky {
    padding: 18px 40px;
    gap: 24px;
  }
  .wedding-website-page .tbc-sticky__price strong {
    font-size: 1.4rem;
  }
  .wedding-website-page .tbc-sticky .tbc-btn {
    padding: 16px 40px;
    font-size: 1rem;
  }
}


/* --- Homepage wedding website section --- */
.tbh-wedding-website {
  padding: 100px 0;
  background: var(--tb-midnight-deep);
  border-top: 1px solid var(--tb-border-gold);
  border-bottom: 1px solid var(--tb-border-gold);
}
.tbh-ww-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 768px) {
  .tbh-ww-inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    padding: 0 40px;
  }
}
.tbh-ww-media {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--tb-border-gold);
}
.tbh-ww-media img { width: 100%; height: 100%; object-fit: cover; }
.tbh-ww-body {
  font-family: var(--tb-font-body);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--tb-taupe);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 480px;
}
.tbh-ww-price {
  font-family: var(--tb-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--tb-gold);
  margin-bottom: 8px;
}
.tbh-ww-price-sub {
  font-family: var(--tb-font-body);
  font-size: 0.9rem;
  color: var(--tb-steel);
  font-style: italic;
  margin-bottom: 28px;
}
.tbh-ww-ctas { display: flex; flex-wrap: wrap; gap: 16px; }

/* --- Collection page wedding website section --- */
.tbc-wedding-website-section {
  padding: 100px 0;
  border-top: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.22));
  border-bottom: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.22));
}
.tbc-ww-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}
@media (min-width: 768px) {
  .tbc-ww-inner {
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    padding: 0 40px;
  }
}
.tbc-ww-media {
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.15));
}
.tbc-ww-media img { width: 100%; height: 100%; object-fit: cover; }
.tbc-ww-price {
  font-family: var(--tb-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--realm-metallic);
  margin-bottom: 8px;
}
.tbc-ww-price-sub {
  font-family: var(--tb-font-body);
  font-size: 0.9rem;
  color: var(--realm-taupe, #C4BCB1);
  font-style: normal;
  margin-bottom: 28px;
}
.tbc-ww-body {
  font-family: var(--tb-font-body);
  font-style: normal;
  font-size: 1.05rem;
  color: var(--realm-taupe);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 480px;
}
.tbc-ww-ctas { display: flex; flex-wrap: wrap; gap: 16px; }
/* 2026-09-24: FlyingPress lazy render puts contain-intrinsic-size on .tbc-ww-copy (one value, so it
   also sets a 332px intrinsic WIDTH). min-width:0 lets the 1fr track shrink below it on phones. */
.tbc-ww-inner > * { min-width: 0; }

/* Accessibility */
.wedding-website-page *:focus-visible,
.wedding-website-hub-page *:focus-visible {
  outline: 2px solid var(--realm-metallic, #C9A87C);
  outline-offset: 4px;
}
.wedding-website-page .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); border: 0;
}

/* ═══════════════════════════════════════════════
   ALTERNATING SECTION BACKGROUNDS — VISUAL RHYTHM
   dark → dark → medium → light → dark → medium → dark
   Added 2026-05-14 to match collection page depth pattern.
   ═══════════════════════════════════════════════ */

/* 1. Hero — keep as-is (has its own gradient bg) */
/* 2. Manifesto — realm-bg (darkest, same as body = no change) */
.wedding-website-page .tbc-manifesto {
  background: var(--realm-bg);
}

/* 3. Features — medium lighter block */
.wedding-website-page .tbc-features {
  background: var(--realm-primary);
}

/* 4. How It Works — lightest block (most contrast) */
.wedding-website-page .tbc-how {
  background: var(--realm-secondary);
}

/* 5. Pricing — back to dark */
.wedding-website-page .tbc-pricing {
  background: var(--realm-bg);
}

/* 6. FAQ — medium lighter block again */
.wedding-website-page .tbc-faq-section {
  background: var(--realm-primary);
}

/* 7. Final CTA — back to dark */
.wedding-website-page .tbc-final-cta {
  background: var(--realm-bg);
}

/* --- Dark Romance override ---
   DR --realm-primary is Oxblood (#5C1A1B) — too saturated for full section bg.
   Use --realm-secondary (Plum Noir #351E28) for the "medium" blocks instead,
   matching how the DR collection page handles its alternating sections. */
body.realm-dark-romance .wedding-website-page .tbc-features {
  background: var(--realm-secondary);
}
body.realm-dark-romance .wedding-website-page .tbc-faq-section {
  background: var(--realm-secondary);
}

/* DR "How It Works" — solid plum noir, no metallic blend.
   Matches features/faq; pricing section (--realm-bg) creates separation. */
body.realm-dark-romance .wedding-website-page .tbc-how {
  background: var(--realm-secondary);  /* #351E28 — no metallic blend */
}

/* --- Wedding website .tb-display heading color fix (2026-05-16) --- */

/* Homepage: cream heading, gold italic */
.tbh-wedding-website .tb-display {
  color: var(--tb-cream, #ECE4D5);
}
.tbh-wedding-website .tb-display em {
  color: var(--tb-gold, #D1B28C);
}

/* Collection pages: realm-cream heading, realm-metallic italic */
.tbc-wedding-website-section .tb-display {
  color: var(--realm-cream, #ECE4D5);
}
.tbc-wedding-website-section .tb-display em {
  color: var(--realm-metallic, #D1B28C);
}
/* ═══════════════════════════════
   MOBILE HERO: action zone first, phone last
   Rewritten 2026-09-14 (website-manager, from website-designer SPEC)
   Order: badge, eyebrow, H1, sub-headline, supporting line, price + badge,
   CTAs, speed caption, phone video. Price and both CTAs now sit above the
   fold at 375x812; the phone video was previously order 5 and pushed them
   below it.
   ═══════════════════════════════ */
@media (max-width: 767px) {
  /* Hero: normal flow, column layout */
  .wedding-website-page .tbc-hero {
    position: relative;
    min-height: auto;
    padding: 20px 0 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /* Hero inner: flex column, items stacked */
  .wedding-website-page .tbc-hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    gap: 0;
    min-height: auto;
    height: auto;
  }

  /* Unwrap __copy so its children participate in __inner flex order */
  .wedding-website-page .tbc-hero__copy {
    display: contents;
  }

  /* 1. Founders badge */
  .wedding-website-page .tbc-founders-badge {
    order: 1;
    font-size: 0.74rem;
    padding: 5px 12px;
    margin-bottom: 6px;
    letter-spacing: 0.05em;
    align-self: center;
  }

  /* 2. Eyebrow */
  .wedding-website-page .tbc-hero__eyebrow {
    order: 2;
    margin-bottom: 6px;
    font-size: 11px;
    letter-spacing: 0.14em;
    text-align: center;
    width: 100%;
  }

  /* 3. Title */
  .wedding-website-page .tbc-hero__title {
    order: 3;
    font-size: clamp(1.3rem, 5vw, 1.65rem);
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
  }

  /* 4. Sub-headline */
  .wedding-website-page .tbc-hero__sub {
    order: 4;
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--tb-font-heading);
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.35;
    color: var(--realm-cream);
    margin: 0 0 6px;
  }

  /* 5. Supporting line */
  .wedding-website-page .tbc-hero__sub-note {
    order: 5;
    display: block;
    width: 100%;
    text-align: center;
    font-family: var(--tb-font-body);
    font-style: italic;
    font-size: 0.92rem;
    color: var(--realm-taupe);
    margin: 0 0 14px;
  }

  /* Hide body paragraph on mobile */
  .wedding-website-page .tbc-hero__body {
    display: none;
    order: 6;
  }

  /* Hide breadcrumb on mobile */
  .wedding-website-page .tbc-hero__breadcrumb { display: none; order: 0; }

  /* 6. Price block */
  .wedding-website-page .tbc-hero__price-inline {
    order: 6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 14px;
    text-align: center;
    width: 100%;
  }
  .wedding-website-page .tbc-hero__price-amount {
    font-size: 2.1rem;
    font-family: var(--tb-font-display);
    font-weight: 600;
    color: var(--realm-cream);
    line-height: 1;
  }
  .wedding-website-page .tbc-hero__price-badge {
    display: inline-block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--realm-metallic);
    border: 1px solid var(--realm-metallic);
    border-radius: 2px;
    padding: 4px 10px;
    margin-top: 2px;
  }
  .wedding-website-page .tbc-hero__price-detail {
    font-size: 0.82rem;
    color: var(--realm-taupe);
  }

  /* 7. CTAs: stacked, full width */
  .wedding-website-page .tbc-hero__ctas {
    order: 7;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
    padding: 0;
    width: 100%;
    max-width: 340px;
  }
  .wedding-website-page .tbc-hero__ctas .tbc-btn {
    font-size: 11px;
    padding: 12px 16px;
    width: 100%;
    text-align: center;
    min-width: 0;
  }

  /* === HIGH-CONTRAST "See Live Demo" BUTTON === */
  .wedding-website-page .tbc-hero__ctas .tbc-btn--ghost {
    background: #ECE4D5;
    color: #0C100E;
    border-color: #ECE4D5;
    font-weight: 700;
  }
  .wedding-website-page .tbc-hero__ctas .tbc-btn--ghost:hover,
  .wedding-website-page .tbc-hero__ctas .tbc-btn--ghost:active {
    background: #E8E1D5;
    border-color: #E8E1D5;
    color: #0C100E;
  }

  /* Hero CTA sizing modifier. Scoped so the sitewide .tbc-btn is untouched.
     Declared after the two rules above so the sizing wins on equal weight. */
  .wedding-website-page .tbc-hero__ctas .tbc-btn.tbc-btn--hero-primary {
    width: 100%;
    text-align: center;
    min-width: 0;
  }
  .wedding-website-page .tbc-hero__ctas .tbc-btn--hero-primary.tbc-btn--primary {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 18px 20px;
    min-height: 56px;
  }
  .wedding-website-page .tbc-hero__ctas .tbc-btn--hero-primary.tbc-btn--ghost {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 15px 20px;
    min-height: 50px;
  }

  /* 8. Speed caption, under the CTAs */
  .wedding-website-page .tbc-hero__speed {
    order: 8;
    font-size: 0.78rem;
    color: var(--realm-taupe);
    text-align: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 4px;
  }

  /* 9. Phone video, last and smaller */
  .wedding-website-page .tbc-hero__media {
    order: 9;
    position: relative;
    inset: auto;
    z-index: auto;
    width: 62%;
    max-width: 260px;
    flex-shrink: 0;
    margin: 14px auto 0;
  }
  .wedding-website-page .tbc-hero__screenshot {
    display: block !important;
    position: relative;
    inset: auto;
    aspect-ratio: auto;
    border: 1px solid var(--realm-border-metallic, rgba(209, 178, 140, 0.2));
    border-radius: 8px;
    overflow: hidden;
  }
  .wedding-website-page .tbc-hero__screenshot img {
    display: block !important;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* Remove the old background-scrim overlay */
  .wedding-website-page .tbc-hero__media::after {
    display: none;
  }

  /* Tighten manifesto top padding on mobile */
  .wedding-website-page .tbc-manifesto {
    padding-top: 48px;
  }

  /* Reduce realm bar spacing */
  .wedding-website-page .tbc-hero__realm-bar {
    padding: 10px 0;
  }
}

/* ═══════════════════════════════════════════════
   2026-06-09 — MOBILE ABOVE-FOLD SPEED (LCP/FCP)
   Keep the gradient floor for instant first paint.
   Image is now visible but small (not the LCP element).
   Mobile-only (max-width:767px); desktop hero unchanged.
   ═══════════════════════════════════════════════ */
@media (max-width: 767px) {
  body.realm-enchanted-forest .wedding-website-page .tbc-hero { background: #0C100E; }
  body.realm-dark-romance   .wedding-website-page .tbc-hero { background: #1A1015; }

  .wedding-website-page .tbc-hero__bg { opacity: 0.6; z-index: 0; }
  body.realm-enchanted-forest .wedding-website-page .tbc-hero__bg {
    background: linear-gradient(165deg, #182C20 0%, #122418 38%, #0C100E 100%);
  }
  body.realm-dark-romance .wedding-website-page .tbc-hero__bg {
    background: linear-gradient(165deg, #5C1A1B 0%, #351E28 42%, #1A1015 100%);
  }
}

/* ═══════════════════════════════
   2026-09-14, hero sub-headline + supporting line, desktop type
   The two new lines sit in their natural DOM position between the H1 and
   the body paragraph at this breakpoint, so only type styling is needed.
   ═══════════════════════════════ */
@media (min-width: 768px) {
  .wedding-website-page .tbc-hero__sub {
    font-family: var(--tb-font-heading);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--realm-cream);
    margin: 0 0 10px;
    max-width: 560px;
  }
  .wedding-website-page .tbc-hero__sub-note {
    font-family: var(--tb-font-body);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--realm-taupe);
    margin: 0 0 20px;
    max-width: 560px;
  }
  .wedding-website-page .tbc-hero__price-badge {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--realm-metallic);
    border: 1px solid var(--realm-metallic);
    border-radius: 2px;
    padding: 5px 12px;
    margin-left: 12px;
  }
}

/* Obsidian Vow only: --realm-taupe is documented in tokens.css as eyebrow and
   fine-print ink, never a paragraph (4.06:1 on Smoke Black). The supporting
   line is a sentence, so OV uses --realm-muted (6.34:1) instead. */
body.realm-obsidian-vow .wedding-website-page .tbc-hero__sub-note {
  color: var(--realm-muted);
}

/* 2026-10-12 LIVE: Obsidian Vow wedding website page blocks, ported from staging2. */
/* --- Obsidian Vow override ---
   OV --realm-primary (#4D5057 Gunmetal Steel) is IDENTICAL to the old,
   pre-2026-09-06 value of --realm-metallic, using it as a full section
   background reads as a flat mid-grey wash and collides with metallic-colored
   accent text/icons sitting on top of it (the invisible-em-word defect).
   Use --realm-secondary (Charcoal Shadow #141518) for the "medium" blocks
   instead, matching the Dark Romance override above. Fix 2026-09-06. */
body.realm-obsidian-vow .wedding-website-page .tbc-features {
  background: var(--realm-secondary);
}
body.realm-obsidian-vow .wedding-website-page .tbc-faq-section {
  background: var(--realm-secondary);
}

/* --- Obsidian Vow typography override (2026-09-06, Italiana switch) ---
   Italiana ships exactly ONE weight -- 400, confirmed against the 7 registered
   @font-face rules in template-wedding-website-ov.php. Every rule below
   inherited a shared font-weight:600 from the MC template this page was
   cloned from; requesting 600 against a single-weight @font-face risks the
   browser's synthetic-bold fallback, so every OV heading gets 400 explicitly.
   Buttons/short labels use Jost 300 with the LOCKED OV tracking value
   (feedback_brand_fonts: "Italiana + Jost 300 (0.44em tracking)"); .tbc-btn
   uses the range's lower bound (0.3em) since its text runs longer ("Get the
   Website →") and reads worse fully expanded to 0.44em.
   --tb-font-heading itself is left untouched at the token level: it is a
   shared cross-realm variable also read by header/nav/hub-page chrome
   outside .wedding-website-page, and OV's own tokens.css block never set it
   (falls through to :root's ivypresto-display) -- overriding it globally
   here would silently reskin that chrome too. Naming Jost directly on the
   specific LP elements below fixes only this page's own content, per the
   mission's "site chrome stays as is" rule (.tbc-founders-bar excluded on
   purpose -- that is the sticky founders bar the rule names). */
body.realm-obsidian-vow .wedding-website-page .tbc-section-title,
body.realm-obsidian-vow .wedding-website-page .tbc-hero__title,
body.realm-obsidian-vow .wedding-website-page .tbc-manifesto__headline,
body.realm-obsidian-vow .wedding-website-page .tbc-feature-row__text h3,
body.realm-obsidian-vow .wedding-website-page .tbc-step__num,
body.realm-obsidian-vow .wedding-website-page .tbc-step h3,
body.realm-obsidian-vow .wedding-website-page .tbc-price-card__name,
body.realm-obsidian-vow .wedding-website-page .tbc-price-card__price strong,
body.realm-obsidian-vow .wedding-website-page .tbc-faq-item__q,
body.realm-obsidian-vow .wedding-website-page .tbc-final-cta__headline,
body.realm-obsidian-vow .wedding-website-page .tbc-sticky__price strong {
  font-weight: 400;
}
body.realm-obsidian-vow .wedding-website-page .tbc-btn {
  font-family: 'Jost', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  letter-spacing: 0.3em;
}
body.realm-obsidian-vow .wedding-website-page .tbc-price-card__coming-soon-label,
body.realm-obsidian-vow .wedding-website-page .tbc-price-card__badge {
  font-family: 'Jost', -apple-system, 'Segoe UI', sans-serif;
  font-weight: 300;
  letter-spacing: 0.44em;
}

/* --- Obsidian Vow wedding-website LP containment, 2026-09-09 -------------
 * The shared body.realm-obsidian-vow token block was corrected on 2026-09-09 to the
 * website-designer SPEC §2 contract, where --realm-taupe (#6f7178, 4.06:1) is an
 * EYEBROW/fine-print token and --realm-secondary is the deep band (#0e0f12).
 * This LP (page 1777, template-wedding-website-ov.php) predates that contract and
 * consumes --realm-taupe as its BODY-COPY colour (.tbc-feature-row__text p) and
 * --realm-secondary as the Features/FAQ surface. Re-assert the two values this page
 * was measured against on 2026-09-06 (body copy 11.14:1) rather than regress it. */
body.realm-obsidian-vow .wedding-website-page {
  --realm-taupe: #C9CACD;
  --realm-secondary: #141518;
}