/* ============================================================
   LINKINBIO.CSS
   Layout, shapes, spacing, animations.
   Colors & fonts come from theme tokens set by linkinbio-app.js.
   ============================================================ */

/* ── Reset & base ────────────────────────────────────────── */

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--lb-font-body, 'DM Sans', system-ui, sans-serif);
  background:  var(--lb-color-bg, #ffffff);
  color:       var(--lb-color-text, #111111);
  line-height: 1.6;
  min-height:  100vh;
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { max-width: 100%; height: auto; display: block; }
button     { cursor: pointer; border: none; background: none; font-family: inherit; }
a          { text-decoration: none; color: inherit; }
ul, ol     { list-style: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ── Page wrapper ────────────────────────────────────────── */

#lb-page {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
  /* Hidden until the wipe reveal fires — prevents any flash */
  visibility:     hidden;
}

#lb-page.lb-entrance {
  visibility: visible;
}

/* ── Container (narrow centered column) ─────────────────── */

.lb-container {
  width:     100%;
  max-width: 520px;
  margin:    0 auto;
  padding:   0 1.25rem 4rem;
}

/* ════════════════════════════════════════════════════════════
   LOADING SCREEN
   ════════════════════════════════════════════════════════════ */

#lb-loader {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  background:      #000;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             28px;
  transition:      opacity 0.25s ease;
}

#lb-loader.hide {
  opacity:        0;
  pointer-events: none;
}

#lb-loader-logo {
  width:      72px;
  height:     72px;
  object-fit: contain;
  display:    block;
}

#lb-loader-bar-track {
  width:         180px;
  height:        2px;
  background:    rgba(255,255,255,0.15);
  border-radius: 999px;
  overflow:      hidden;
}

#lb-loader-bar {
  height:        100%;
  width:         0%;
  background:    #ffffff;
  border-radius: 999px;
  transition:    width 2.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════
   WIPE CURTAIN
   ════════════════════════════════════════════════════════════ */

#lb-wipe {
  position:   fixed;
  inset:      0;
  z-index:    9998;
  background: #000;
  transform:  translateY(0%);
  transition: transform 0.7s cubic-bezier(0.76, 0, 0.24, 1);
}

#lb-wipe.revealed {
  transform: translateY(-100%);
}

/* ════════════════════════════════════════════════════════════
   ENTRANCE ANIMATIONS
   ════════════════════════════════════════════════════════════ */

@keyframes lb-fadeUp {
  from {
    opacity:   0;
    transform: translateY(22px);
    filter:    blur(4px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
    filter:    blur(0);
  }
}

@keyframes lb-fadeScale {
  from {
    opacity:   0;
    transform: scale(0.88);
    filter:    blur(6px);
  }
  to {
    opacity:   1;
    transform: scale(1);
    filter:    blur(0);
  }
}

@keyframes lb-expandWidth {
  from {
    transform: scaleX(0);
    opacity:   0;
  }
  to {
    transform: scaleX(1);
    opacity:   1;
  }
}

/* ── Fade-in (scroll-triggered blocks) ──────────────────── */

.fade-in {
  opacity:    0;
  transform:  translateY(18px);
  filter:     blur(3px);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.visible {
  opacity:   1;
  transform: none;
  filter:    none;
}

/* ── Profile entrance (class added by JS after wipe) ─────── */

.lb-entrance .lb-avatar {
  opacity:    0;
  animation:  lb-fadeScale 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s forwards;
}

.lb-entrance .lb-name {
  opacity:    0;
  animation:  lb-fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.22s forwards;
}

.lb-entrance .lb-bio {
  opacity:    0;
  animation:  lb-fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.34s forwards;
}

.lb-entrance .lb-social-icon:nth-child(1) {
  opacity:    0;
  animation:  lb-fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.46s forwards;
}
.lb-entrance .lb-social-icon:nth-child(2) {
  opacity:    0;
  animation:  lb-fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.54s forwards;
}
.lb-entrance .lb-social-icon:nth-child(3) {
  opacity:    0;
  animation:  lb-fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.62s forwards;
}
.lb-entrance .lb-social-icon:nth-child(4) {
  opacity:    0;
  animation:  lb-fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.70s forwards;
}
.lb-entrance .lb-social-icon:nth-child(5) {
  opacity:    0;
  animation:  lb-fadeUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.78s forwards;
}

.lb-entrance .lb-divider {
  opacity:          0;
  transform-origin: center;
  animation:        lb-expandWidth 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.88s forwards;
}

/* ════════════════════════════════════════════════════════════
   PROFILE HEADER
   ════════════════════════════════════════════════════════════ */

.lb-profile {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        2.5rem 0 1.75rem;
  gap:            0.5rem;
}

.lb-avatar {
  width:         110px;
  height:        110px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid var(--lb-color-border, #e8e8e8);
  margin-bottom: 0.75rem;
  box-shadow:    0 2px 12px var(--lb-color-shadow, rgba(0,0,0,0.06));
}

.lb-name {
  font-family:   var(--lb-font-heading, 'DM Serif Display', serif);
  font-size:     1.5rem;
  font-weight:   600;
  letter-spacing: -0.02em;
  color:         var(--lb-color-text, #111);
  line-height:   1.2;
}

.lb-handle {
  font-size:  0.82rem;
  color:      var(--lb-color-text-muted, #999);
  letter-spacing: 0.01em;
}

.lb-bio {
  font-size:   0.9rem;
  color:       var(--lb-color-text-mid, #444);
  max-width:   340px;
  line-height: 1.6;
  margin-top:  0.25rem;
}

.lb-social-row {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  margin-top:  0.75rem;
  flex-wrap:   wrap;
  justify-content: center;
}

.lb-social-icon {
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       36px;
  height:      36px;
  border-radius: 50%;
  border:      1px solid var(--lb-color-border, #e8e8e8);
  color:       var(--lb-color-text-mid, #444);
  transition:  color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.lb-social-icon:hover {
  color:        var(--lb-color-accent, #111);
  border-color: var(--lb-color-accent, #111);
  transform:    translateY(-2px);
}
.lb-social-icon svg {
  width:  17px;
  height: 17px;
}

/* ════════════════════════════════════════════════════════════
   BLOCKS — SHARED
   ════════════════════════════════════════════════════════════ */

#lb-blocks {
  display:        flex;
  flex-direction: column;
  gap:            0.85rem;
}

/* Arrow icon — SVG chevron used across button variants */
.lb-btn-arrow {
  display:     flex;
  align-items: center;
  margin-left: auto;
  opacity:     0.3;
  flex-shrink: 0;
  transition:  opacity 0.18s ease, transform 0.18s ease;
  color:       var(--lb-color-text, #111);
}

/* ════════════════════════════════════════════════════════════
   BLOCK: DIVIDER LABEL
   ════════════════════════════════════════════════════════════ */

.lb-divider {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  margin:      0.6rem 0 0.2rem;
}
.lb-divider::before,
.lb-divider::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--lb-color-border, #e8e8e8);
}
.lb-divider span {
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--lb-color-text-muted, #999);
  white-space:    nowrap;
}

/* ════════════════════════════════════════════════════════════
   BLOCK: BUTTON (plain)
   ════════════════════════════════════════════════════════════ */

.lb-btn {
  display:         flex;
  align-items:     center;
  gap:             0.75rem;
  width:           100%;
  padding:         1.05rem 1.2rem;
  background:      var(--lb-color-bg-card, #fff);
  border:          1px solid var(--lb-color-border, #e8e8e8);
  border-radius:   var(--lb-radius, 10px);
  box-shadow:      0 1px 4px rgba(0,0,0,0.06);
  color:           var(--lb-color-text, #111);
  font-size:       0.9rem;
  font-weight:     500;
  transition:      box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  cursor:          pointer;
}
.lb-btn:hover {
  border-color: var(--lb-color-accent, #111);
  box-shadow:   0 4px 14px rgba(0,0,0,0.1);
  transform:    translateY(-1px);
}
.lb-btn:hover .lb-btn-arrow {
  opacity:   1;
  transform: translateX(2px);
}

.lb-btn-label {
  flex: 1;
}

/* ════════════════════════════════════════════════════════════
   BLOCK: BUTTON — small thumbnail
   ════════════════════════════════════════════════════════════ */

.lb-btn--thumb {
  padding: 0.7rem 1.2rem 0.7rem 0.7rem;
}

.lb-btn-thumb {
  width:         46px;
  height:        46px;
  object-fit:    cover;
  border-radius: calc(var(--lb-radius, 10px) - 2px);
  flex-shrink:   0;
}

/* ════════════════════════════════════════════════════════════
   BLOCK: LANDSCAPE CARD (full-width image top, text bottom)
   ════════════════════════════════════════════════════════════ */

.lb-landscape-card {
  display:         block;
  background:      var(--lb-color-bg-card, #fff);
  border:          1px solid var(--lb-color-border, #e0e0e0);
  border-radius:   var(--lb-radius, 10px);
  overflow:        hidden;
  box-shadow:      0 2px 12px rgba(0,0,0,0.07);
  text-decoration: none;
  color:           var(--lb-color-text, #111);
  transition:      box-shadow 0.2s ease, transform 0.2s ease;
}
.lb-landscape-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  transform:  translateY(-2px);
}

/* Full-bleed image — no padding, fills top of card */
.lb-landscape-card-img {
  width:        100%;
  aspect-ratio: 16 / 7;
  overflow:     hidden;
  display:      block;
}
.lb-landscape-card-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

/* Text footer */
.lb-landscape-card-body {
  display:        flex;
  flex-direction: column;
  gap:            0.25rem;
  padding:        0.9rem 1.1rem 1rem;
  border-top:     1px solid var(--lb-color-border, #e0e0e0);
}

.lb-landscape-card-title {
  font-size:      0.95rem;
  font-weight:    700;
  color:          var(--lb-color-text, #111);
  line-height:    1.3;
  letter-spacing: -0.01em;
}

.lb-landscape-card-desc {
  font-size:   0.8rem;
  font-weight: 400;
  color:       var(--lb-color-text-muted, #999);
  line-height: 1.5;
}

/* ════════════════════════════════════════════════════════════
   BLOCK: HORIZONTAL FEATURE CARD (split-pane)
   ════════════════════════════════════════════════════════════ */

.lb-feature-card {
  display:       flex;
  align-items:   stretch;
  background:    var(--lb-color-bg-card, #fff);
  border:        1px solid var(--lb-color-border, #e0e0e0);
  border-radius: var(--lb-radius, 10px);
  overflow:      hidden;
  box-shadow:    0 2px 12px rgba(0,0,0,0.07);
  text-decoration: none;
  color:         var(--lb-color-text, #111);
  transition:    box-shadow 0.2s ease, transform 0.2s ease;
  min-height:    100px;
}
.lb-feature-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.12);
  transform:  translateY(-2px);
}

/* Left: square flush image */
.lb-feature-card-img {
  flex-shrink: 0;
  width:       110px;
  position:    relative;
  overflow:    hidden;
}
.lb-feature-card-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}

.lb-badge {
  position:       absolute;
  top:            0.6rem;
  left:           0.6rem;
  background:     var(--lb-color-accent, #111);
  color:          #fff;
  font-size:      0.6rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding:        0.2rem 0.55rem;
  border-radius:  var(--lb-radius-pill, 999px);
}

/* Right: text block */
.lb-feature-card-body {
  flex:           1;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  padding:        1rem 1.1rem;
  gap:            0.3rem;
}

.lb-feature-card-title {
  font-size:   0.95rem;
  font-weight: 700;
  color:       var(--lb-color-text, #111);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.lb-feature-card-desc {
  font-size:   0.8rem;
  font-weight: 400;
  color:       var(--lb-color-text-muted, #999);
  line-height: 1.5;
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* ════════════════════════════════════════════════════════════
   BLOCK: CAROUSEL (vertical portrait cards, peek, auto-advance)
   ════════════════════════════════════════════════════════════ */

.lb-carousel {
  display:        flex;
  flex-direction: column;
  gap:            0.75rem;
}

.lb-carousel-track {
  display:                    flex;
  gap:                        0.75rem;
  overflow-x:                 auto;
  scroll-snap-type:           x mandatory;
  scroll-behavior:            smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width:            none;
  padding:                    0.25rem 0 0.25rem;
  /* Show peek of next card */
  padding-right:              2rem;
  cursor:                     grab;
}
.lb-carousel-track:active  { cursor: grabbing; }
.lb-carousel-track::-webkit-scrollbar { display: none; }

/* Each card: ~78% wide so next card peeks */
.lb-carousel-card {
  flex:              0 0 78%;
  scroll-snap-align: start;
  display:           flex;
  flex-direction:    column;
  background:        #ffffff;
  border-radius:     var(--lb-radius, 10px);
  overflow:          hidden;
  box-shadow:        0 2px 12px rgba(0,0,0,0.08);
  text-decoration:   none;
  color:             inherit;
  transition:        box-shadow 0.2s ease, transform 0.2s ease;
}
.lb-carousel-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.13);
  transform:  translateY(-2px);
}

/* 16:9 image area, minimal padding, pure white background */
.lb-carousel-card-img {
  background:      #ffffff;
  padding:         0.4rem 0.4rem 0;
  aspect-ratio:    16 / 9;
  display:         flex;
  align-items:     center;
  justify-content: center;
  overflow:        hidden;
}
.lb-carousel-card-img img {
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: calc(var(--lb-radius, 10px) - 2px);
  display:       block;
}

.lb-carousel-card-footer {
  padding:        0.65rem 0.9rem 0.8rem;
  display:        flex;
  flex-direction: column;
  gap:            0.1rem;
  text-align:     center;
}

.lb-carousel-card-title {
  font-size:   0.85rem;
  font-weight: 600;
  color:       var(--lb-color-text, #111);
  line-height: 1.3;
}

.lb-carousel-card-desc {
  font-size:   0.73rem;
  color:       var(--lb-color-text-muted, #999);
  line-height: 1.4;
}

/* Footer row: arrows + dots */
.lb-carousel-footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             0.75rem;
}

.lb-carousel-arr {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  background:      var(--lb-color-bg-card, #fff);
  border:          1px solid var(--lb-color-border, #e0e0e0);
  color:           var(--lb-color-text, #111);
  flex-shrink:     0;
  box-shadow:      0 1px 4px rgba(0,0,0,0.07);
  transition:      background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.lb-carousel-arr:hover {
  background:  var(--lb-color-accent, #111);
  color:       #fff;
  border-color: var(--lb-color-accent, #111);
  transform:   scale(1.08);
  box-shadow:  0 3px 10px rgba(0,0,0,0.15);
}

.lb-carousel-dots {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             0.4rem;
}
.lb-carousel-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--lb-color-border, #e0e0e0);
  border:        none;
  cursor:        pointer;
  padding:       0;
  transition:    background 0.18s ease, transform 0.18s ease;
}
.lb-carousel-dot.active {
  background: var(--lb-color-accent, #111);
  transform:  scale(1.35);
}

/* ════════════════════════════════════════════════════════════
   BLOCK: DROPDOWN BUTTON
   ════════════════════════════════════════════════════════════ */

.lb-dropdown {
  display:        flex;
  flex-direction: column;
}

.lb-dropdown-trigger {
  /* inherits .lb-btn styles */
  width: 100%;
  text-align: left;
}

.lb-dropdown-chevron {
  margin-left: auto;
  flex-shrink: 0;
  color:       var(--lb-color-text-muted, #999);
  transition:  transform 0.25s ease;
  display:     flex;
  align-items: center;
}
.lb-dropdown.open .lb-dropdown-chevron {
  transform: rotate(180deg);
}

.lb-dropdown-menu {
  display:       flex;
  flex-direction: column;
  gap:           2px;
  max-height:    0;
  overflow:      hidden;
  transition:    max-height 0.28s ease, opacity 0.2s ease, margin-top 0.2s ease;
  opacity:       0;
  margin-top:    0;
}
.lb-dropdown.open .lb-dropdown-menu {
  max-height: 400px;
  opacity:    1;
  margin-top: 0.35rem;
}

.lb-dropdown-item {
  display:       block;
  padding:       0.75rem 1.25rem;
  background:    var(--lb-color-bg-alt, #ebebeb);
  border:        1px solid var(--lb-color-border, #e8e8e8);
  border-radius: calc(var(--lb-radius, 10px) - 2px);
  font-size:     0.875rem;
  color:         var(--lb-color-text-mid, #444);
  transition:    background 0.15s ease, color 0.15s ease;
}
.lb-dropdown-item:hover {
  background: var(--lb-color-border, #e8e8e8);
  color:      var(--lb-color-text, #111);
}

/* ════════════════════════════════════════════════════════════
   BLOCK: BUTTON GROUP (titled section)
   ════════════════════════════════════════════════════════════ */

.lb-group {
  display:        flex;
  flex-direction: column;
  gap:            0.65rem;
}

.lb-group-title {
  text-align:     center;
  font-size:      1.25rem;
  font-weight:    700;
  letter-spacing: -0.02em;
  color:          var(--lb-color-text, #111);
  padding:        0.5rem 0 0.1rem;
}

.lb-group-buttons {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

/* ════════════════════════════════════════════════════════════
   BLOCK: VIDEO EMBED
   ════════════════════════════════════════════════════════════ */

.lb-embed {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.lb-embed-label {
  font-size:  0.82rem;
  color:      var(--lb-color-text-muted, #999);
  font-weight: 500;
}

.lb-yt-facade {
  position:      relative;
  border-radius: var(--lb-radius, 10px);
  overflow:      hidden;
  cursor:        pointer;
  aspect-ratio:  16 / 9;
  border:        1px solid var(--lb-color-border, #e8e8e8);
  box-shadow:    0 1px 6px var(--lb-color-shadow, rgba(0,0,0,0.06));
}
.lb-yt-facade img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  display:    block;
}
.lb-yt-facade:hover img {
  transform: none;
}
.lb-yt-play {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.lb-yt-play svg {
  width:      56px;
  height:     40px;
  filter:     drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  transition: transform 0.18s ease;
}
.lb-yt-facade:hover .lb-yt-play svg {
  transform: scale(1.08);
}
.lb-yt-iframe {
  width:         100%;
  aspect-ratio:  16 / 9;
  border:        none;
  border-radius: var(--lb-radius, 10px);
  display:       block;
}

/* ════════════════════════════════════════════════════════════
   BLOCK: TEXT BLOCK
   ════════════════════════════════════════════════════════════ */

.lb-text {
  padding:       1rem 1.25rem;
  background:    var(--lb-color-bg-alt, #ebebeb);
  border:        1px solid var(--lb-color-border, #e8e8e8);
  border-radius: var(--lb-radius, 10px);
}
.lb-text p {
  font-size:   0.9rem;
  color:       var(--lb-color-text-mid, #444);
  line-height: 1.65;
}

/* ════════════════════════════════════════════════════════════
   BLOCK: SHOUTOUTS
   ════════════════════════════════════════════════════════════ */

.lb-shoutouts {
  padding:       1rem 1.25rem;
  background:    var(--lb-color-bg-card, #fff);
  border:        1px solid var(--lb-color-border, #e8e8e8);
  border-radius: var(--lb-radius, 10px);
  box-shadow:    0 1px 6px var(--lb-color-shadow, rgba(0,0,0,0.06));
}

.lb-shoutouts-label {
  font-size:      0.7rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--lb-color-text-muted, #999);
  margin-bottom:  0.75rem;
}

.lb-shoutouts-row {
  display:         flex;
  align-items:     flex-start;
  gap:             1rem;
  overflow-x:      auto;
  scrollbar-width: none;
  padding-bottom:  0.25rem;
}
.lb-shoutouts-row::-webkit-scrollbar { display: none; }

.lb-shoutout-item {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            0.4rem;
  flex-shrink:    0;
  transition:     transform 0.18s ease;
}
.lb-shoutout-item:hover {
  transform: translateY(-2px);
}
.lb-shoutout-item img {
  width:         52px;
  height:        52px;
  border-radius: 50%;
  object-fit:    cover;
  border:        2px solid var(--lb-color-border, #e8e8e8);
}
.lb-shoutout-item span {
  font-size:  0.72rem;
  color:      var(--lb-color-text-mid, #444);
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════════
   BLOCK: EMAIL CAPTURE
   ════════════════════════════════════════════════════════════ */

.lb-email {
  padding:       1.5rem 1.25rem;
  background:    var(--lb-color-bg-card, #fff);
  border:        1px solid var(--lb-color-border, #e8e8e8);
  border-radius: var(--lb-radius, 10px);
  box-shadow:    0 1px 6px var(--lb-color-shadow, rgba(0,0,0,0.06));
}

.lb-email-heading {
  font-family:   var(--lb-font-heading, serif);
  font-size:     1.15rem;
  font-weight:   600;
  letter-spacing: -0.01em;
  color:         var(--lb-color-text, #111);
  margin-bottom: 0.3rem;
}

.lb-email-sub {
  font-size:     0.84rem;
  color:         var(--lb-color-text-muted, #999);
  margin-bottom: 1rem;
  line-height:   1.55;
}

.lb-email-form {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
}

.lb-email-fields {
  display:        flex;
  flex-direction: column;
  gap:            0.4rem;
}

.lb-email-input {
  width:         100%;
  padding:       0.7rem 1rem;
  border:        1px solid var(--lb-color-border, #e8e8e8);
  border-radius: calc(var(--lb-radius, 10px) - 2px);
  font-size:     0.875rem;
  color:         var(--lb-color-text, #111);
  background:    var(--lb-color-bg-alt, #ebebeb);
  outline:       none;
  transition:    border-color 0.18s ease, box-shadow 0.18s ease;
}
.lb-email-input:focus {
  border-color: var(--lb-color-accent, #111);
  box-shadow:   0 0 0 3px rgba(0,0,0,0.06);
  background:   var(--lb-color-bg, #fff);
}
.lb-email-input::placeholder {
  color: var(--lb-color-text-muted, #999);
}

.lb-email-submit {
  width:         100%;
  padding:       0.8rem 1rem;
  background:    var(--lb-color-accent, #111);
  color:         var(--lb-color-bg, #fff);
  border:        none;
  border-radius: calc(var(--lb-radius, 10px) - 2px);
  font-size:     0.9rem;
  font-weight:   600;
  cursor:        pointer;
  transition:    background 0.18s ease, transform 0.18s ease;
  margin-top:    0.15rem;
}
.lb-email-submit:hover {
  background: var(--lb-color-accent-hover, #333);
  transform:  translateY(-1px);
}
.lb-email-submit:active {
  transform: translateY(0);
}

.lb-email-list-label {
  display:     flex;
  align-items: center;
  gap:         0.35rem;
  font-size:   0.75rem;
  color:       var(--lb-color-text-muted, #999);
  margin-top:  0.15rem;
}
.lb-email-list-label svg {
  color:      #22c55e;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════ */

.lb-footer {
  text-align:    center;
  padding:       1.5rem 0 2rem;
  margin-top:    0.5rem;
  border-top:    1px solid var(--lb-color-border, #e8e8e8);
}
.lb-footer p {
  font-size: 0.75rem;
  color:     var(--lb-color-text-muted, #999);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */

@media (max-width: 540px) {
  .lb-container {
    padding: 0 1rem 2.5rem;
  }
  .lb-name {
    font-size: 1.35rem;
  }
  .lb-grid {
    gap: 2px;
  }
  .lb-email {
    padding: 1.25rem 1rem;
  }
}