/* ReelDM Premium UI — shared presentation layer
   Midnight Creator Studio: precise, calm, international, and product-led. */

:root {
  --bg: #000000;
  --bg-2: #030304;
  --bg-3: #09090b;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-hover: rgba(255, 255, 255, 0.09);
  --card: rgba(17, 17, 21, 0.78);
  --card-hover: rgba(23, 23, 29, 0.9);
  --fg: #f5f5f7;
  --fg-2: #e8e8ed;
  --muted: #a1a1aa;
  --subtle: #73737c;
  --border: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.055);
  --border-strong: rgba(255, 255, 255, 0.2);
  --primary: #0a84ff;
  --primary-hover: #2997ff;
  --primary-soft: rgba(10, 132, 255, 0.14);
  --primary-glow: rgba(10, 132, 255, 0.24);
  --accent-cyan: #64d2ff;
  --accent-green: #30d158;
  --accent-orange: #ff9f0a;
  --accent-red: #ff453a;
  --radius-2xl: 28px;
  --radius-xl: 22px;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.34);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, 0.48);
  --shadow-xl: 0 40px 110px rgba(0, 0, 0, 0.64);
  --ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
  --premium-ring: 0 0 0 4px rgba(10, 132, 255, 0.18);
}

html { color-scheme: dark; }

body {
  background: #000000 !important;
  color: var(--fg);
  letter-spacing: -0.011em;
}

.bg-grid {
  opacity: 0.2;
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black, transparent 64%);
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 64%);
}

.orb-1 {
  width: min(900px, 90vw);
  height: min(900px, 90vw);
  opacity: 0.2;
  background: conic-gradient(from 210deg, rgba(10,132,255,.22), rgba(175,82,222,.11), rgba(255,55,95,.08), rgba(10,132,255,.22));
  filter: blur(130px);
}

::selection { background: rgba(10, 132, 255, 0.34); color: #fff; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none !important;
  box-shadow: var(--premium-ring) !important;
}

/* Navigation */
.navbar-fixed,
.pro-topbar,
.studio-header {
  background: rgba(0, 0, 0, 0.78) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.085) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  box-shadow: 0 1px 0 rgba(0,0,0,.45), 0 12px 32px rgba(0,0,0,.16) !important;
}

.navbar-fixed { height: 66px; }
.navbar-inner { max-width: 1240px; }

.brand { font-weight: 720; letter-spacing: -0.035em; }
.brand-icon {
  border-radius: 10px !important;
  background: linear-gradient(145deg, #fff, #dfe7f2) !important;
  box-shadow: inset 0 1px 0 #fff, 0 6px 20px rgba(10,132,255,.18) !important;
}

.nav-links li a { font-size: 14px; font-weight: 540; }

/* Buttons */
.btn,
.btn-save-primary,
.btn-connect-meta,
#new-automation-btn {
  min-height: 42px;
  border-radius: 999px !important;
  font-weight: 650 !important;
  letter-spacing: -0.012em;
  transition: transform .24s var(--ease-apple), background .2s ease, border-color .2s ease, box-shadow .24s ease !important;
}

.btn-primary,
.btn-save-primary,
#new-automation-btn {
  color: #fff !important;
  background: linear-gradient(180deg, #168cff, #0071e3) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 8px 24px rgba(0,113,227,.24) !important;
}

.btn-primary:hover,
.btn-save-primary:hover,
#new-automation-btn:hover {
  color: #fff !important;
  background: linear-gradient(180deg, #2997ff, #0a84ff) !important;
  border-color: rgba(255,255,255,.26) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 12px 32px rgba(10,132,255,.32) !important;
  transform: translateY(-1px) !important;
}

.btn:active,
.btn-save-primary:active,
#new-automation-btn:active { transform: scale(.975) !important; }

.btn-secondary,
.btn-ghost,
.btn-glass,
.back-link,
.btn-signout,
.btn-cancel {
  color: var(--fg) !important;
  background: rgba(255,255,255,.065) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
}

.btn-secondary:hover,
.btn-ghost:hover,
.btn-glass:hover,
.back-link:hover,
.btn-signout:hover,
.btn-cancel:hover {
  background: rgba(255,255,255,.105) !important;
  border-color: rgba(255,255,255,.2) !important;
}

/* Marketing */
.hero {
  max-width: 1320px;
  min-height: 0;
  margin: 0 auto;
  padding: clamp(118px, 12vw, 164px) 24px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hero-copy { display: flex; flex-direction: column; align-items: center; }

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 27px;
  color: #a9a9b2;
  font-size: 13px;
  font-weight: 560;
  letter-spacing: .01em;
}

.hero-instagram-mark {
  width: 28px;
  height: 28px;
  margin-right: 1px;
  object-fit: contain;
}

.hero-kicker-mark {
  width: 17px;
  height: 17px;
  border-radius: 5px;
  background: linear-gradient(145deg, #2997ff, #7d5cff 56%, #ff4d8d);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 0 20px rgba(41,151,255,.3);
  position: relative;
}

.hero-kicker-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 7px white;
}

.hero::before {
  content: "";
  position: absolute;
  width: min(760px, 78vw);
  aspect-ratio: 1.8;
  top: 82px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(10,132,255,.18), rgba(175,82,222,.06) 44%, transparent 72%);
  filter: blur(28px);
  pointer-events: none;
}

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

.hero-badge,
.pill-step,
.linear-status-pill {
  color: #c7e2ff !important;
  background: rgba(10,132,255,.1) !important;
  border: 1px solid rgba(100,210,255,.2) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.section-label {
  padding: 0 !important;
  color: #7c8ea6 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-size: 10px !important;
  font-weight: 720 !important;
  letter-spacing: .105em !important;
}

.section-label svg { display: none !important; }

.hero-headline {
  max-width: 1020px;
  font-size: clamp(3.35rem, 7.2vw, 7rem) !important;
  font-weight: 760 !important;
  line-height: .94 !important;
  letter-spacing: -.072em !important;
  text-wrap: balance;
}

.hero-headline .highlight {
  color: transparent !important;
  background: linear-gradient(92deg, #f5f5f7 0%, #a8d8ff 42%, #c4b5fd 76%, #f5f5f7 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
}

.hero-sub {
  max-width: 710px;
  margin-top: 28px;
  color: #b4b4bd !important;
  font-size: clamp(1.08rem, 1.8vw, 1.34rem) !important;
  line-height: 1.52 !important;
  text-wrap: balance;
}

.hero-ctas { margin-top: 34px; gap: 12px; }
.hero-ctas .btn { min-height: 52px; padding-inline: 26px; font-size: 15px; }
.hero-assurance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 24px;
  color: #777781;
  font-size: 12px;
  font-weight: 520;
}

.hero-assurance span { display: inline-flex; align-items: center; gap: 8px; }
.hero-assurance span::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #585862;
}

.product-stage {
  width: 100%;
  margin-top: 82px;
  border: 1px solid rgba(255,255,255,.115);
  border-radius: 26px;
  background: linear-gradient(150deg, rgba(23,23,29,.94), rgba(9,9,13,.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.075), 0 50px 120px rgba(0,0,0,.54), 0 0 0 1px rgba(0,0,0,.5);
  overflow: hidden;
  text-align: left;
  position: relative;
}

.product-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0, rgba(41,151,255,.09), transparent 43%);
  pointer-events: none;
}

.product-stage-bar {
  min-height: 58px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,.075);
  background: rgba(255,255,255,.018);
}

.product-stage-brand { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 650; color: #e9e9ed; }
.product-stage-logo { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: white; color: black; }
.product-stage-path { color: #73737c; font-weight: 480; }
.product-stage-status { display: flex; align-items: center; gap: 7px; color: #9fa0a9; font-size: 12px; }
.product-stage-status span { width: 6px; height: 6px; border-radius: 50%; background: #30d158; box-shadow: 0 0 10px rgba(48,209,88,.5); }

.product-flow {
  padding: 52px 42px;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 46px minmax(190px, .8fr) 46px minmax(0, 1.1fr);
  align-items: stretch;
  position: relative;
}

.flow-card {
  min-width: 0;
  min-height: 210px;
  padding: 20px;
  border-radius: 17px;
  border: 1px solid rgba(255,255,255,.095);
  background: rgba(255,255,255,.035);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 16px 40px rgba(0,0,0,.22);
}

.flow-card-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #73737c;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: .095em;
  text-transform: uppercase;
}

.flow-instagram-mark { width: 18px; height: 18px; object-fit: contain; }

.comment-profile { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; margin-top: 22px; }
.comment-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(145deg, #ff375f, #af52de 56%, #0a84ff); color: white; font-size: 13px; font-weight: 720; }
.comment-profile strong, .comment-profile span { display: block; }
.comment-profile strong { color: #f0f0f3; font-size: 13px; line-height: 1.25; }
.comment-profile span, .comment-profile time { color: #6f6f78; font-size: 11px; }
.comment-message { margin-top: 17px; padding: 13px 14px; border-radius: 12px; background: rgba(255,255,255,.05); color: #b8b8c0; font-size: 13px; line-height: 1.5; }
.comment-message strong { color: #fff; }

.flow-connector { display: flex; align-items: center; color: #5c5c66; }
.flow-connector span { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(255,255,255,.07), rgba(10,132,255,.55)); }
.flow-connector svg { margin-left: -1px; color: #0a84ff; }

.flow-rule { text-align: center; display: flex; flex-direction: column; align-items: center; }
.flow-rule .flow-card-label { align-self: flex-start; }
.rule-icon { width: 43px; height: 43px; margin-top: 18px; display: grid; place-items: center; border-radius: 13px; color: #90c9ff; background: rgba(10,132,255,.12); border: 1px solid rgba(41,151,255,.22); }
.flow-rule > strong { margin-top: 12px; color: #efeff2; font-size: 13px; }
.rule-line { margin-top: 8px; color: #74747e; font-size: 11px; }
.rule-line + .rule-line { margin-top: 3px; }
.rule-line b { color: #bdbdc5; }

.flow-message-head { display: flex; align-items: center; justify-content: space-between; }
.delivered-state { color: #63d77f; font-size: 10px; font-weight: 650; }
.dm-bubble { margin: 24px 0 12px auto; max-width: 92%; padding: 13px 14px; border-radius: 16px 16px 4px 16px; background: linear-gradient(145deg, #1b79ed, #0a84ff); color: white; font-size: 12px; line-height: 1.5; box-shadow: 0 8px 22px rgba(0,113,227,.2); }
.flow-message button { width: 92%; margin-left: 8%; min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.055); color: #c9c9d0; font: inherit; font-size: 11px; }

.product-stage-footer { min-height: 80px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.07); background: rgba(0,0,0,.13); }
.product-stage-footer > div { display: flex; align-items: center; justify-content: center; gap: 10px; }
.product-stage-footer > div + div { border-left: 1px solid rgba(255,255,255,.07); }
.product-stage-footer strong { color: #efeff2; font-size: 15px; letter-spacing: -.02em; }
.product-stage-footer span { color: #6f6f78; font-size: 11px; }

.use-cases-premium { padding-top: 96px !important; }
.use-case-intro { display: grid; grid-template-columns: .7fr 1.35fr 1fr; gap: 48px; align-items: start; margin-bottom: 64px; }
.use-case-intro > span { padding-top: 10px; color: #777781; font-size: 12px; font-weight: 620; letter-spacing: .02em; }
.use-case-intro .section-title { margin: 0; font-size: clamp(2.3rem, 4.2vw, 4.2rem) !important; }
.use-case-intro .section-subtitle { margin: 10px 0 0; font-size: 15px !important; }
.use-case-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(255,255,255,.1); }
.use-case-item { min-height: 220px; padding: 32px 28px 34px 0; display: grid; grid-template-columns: 48px 1fr auto; gap: 20px; align-items: start; border-bottom: 1px solid rgba(255,255,255,.1); transition: background .25s ease; }
.use-case-item:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.1); }
.use-case-item:nth-child(even) { padding-left: 28px; }
.use-case-item:hover { background: linear-gradient(90deg, rgba(10,132,255,.045), transparent); }
.use-case-index { color: #55555e; font-size: 11px; font-variant-numeric: tabular-nums; }
.use-case-item h3 { margin: -3px 0 12px; color: #f0f0f3; font-size: 25px; font-weight: 650; letter-spacing: -.035em; }
.use-case-item p { max-width: 400px; margin: 0; color: #878790; font-size: 14px; line-height: 1.65; }
.use-case-keyword { color: #777781; font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .05em; }

.trust-ribbon {
  margin-top: 32px !important;
  padding: 10px 14px !important;
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important;
}

.section { padding-block: clamp(84px, 9vw, 132px); }
.container { max-width: 1200px; }
.section-title {
  font-size: clamp(2.45rem, 5vw, 4.7rem) !important;
  font-weight: 730 !important;
  line-height: 1.02 !important;
  letter-spacing: -.058em !important;
  text-wrap: balance;
}
.section-subtitle { color: #a1a1aa !important; font-size: 17px !important; text-wrap: balance; }

.glass-card,
.pricing-card,
.faq-item,
.sim-controls-card,
.step-card,
.clean-select-card,
.connect-card,
.auth-feature-item,
.apple-auth-card,
.pro-stat-card,
.creator-account-card,
.plan-card-hig,
.pro-modal-box {
  background: linear-gradient(145deg, rgba(16,16,19,.9), rgba(6,6,8,.96)) !important;
  border: 1px solid rgba(255,255,255,.095) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 22px 60px rgba(0,0,0,.22) !important;
}

.glass-card,
.pricing-card,
.step-card,
.clean-select-card,
.pro-stat-card { border-radius: 20px !important; }

.glass-card:hover,
.pricing-card:hover,
.clean-select-card:hover,
.pro-stat-card:hover {
  border-color: rgba(255,255,255,.18) !important;
  background: linear-gradient(145deg, rgba(21,21,25,.94), rgba(8,8,11,.98)) !important;
  transform: translateY(-2px) !important;
}

.pricing-card.featured,
.clean-select-card.active {
  border-color: rgba(41,151,255,.54) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 24px 70px rgba(0,113,227,.12), 0 0 0 1px rgba(10,132,255,.08) !important;
}

.phone-mockup,
.iphone-frame {
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 38px 100px rgba(0,0,0,.72) !important;
}

.compare-table,
.full-compare-table,
.pro-table { font-variant-numeric: tabular-nums; }

.faq-item { border-radius: 18px !important; }
.faq-item.open .faq-icon { background: var(--primary) !important; border-color: var(--primary) !important; color: white !important; }

.feature-icon,
.feature-icon-primary,
.feature-icon-orange,
.feature-icon-cyan,
.feature-icon-green,
.nav-icon-badge,
.badge-cyan,
.badge-mint,
.badge-ig,
.badge-slate {
  color: #b9c9dc !important;
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.1) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.feature-card .feature-icon { display: none !important; }

.feature-card .badge,
.feature-card .badge-primary,
.feature-card .badge-green,
.feature-card .badge-orange {
  display: none !important;
}

.feature-title { font-size: clamp(1.05rem, 1.6vw, 1.34rem) !important; letter-spacing: -.025em !important; }
.feature-desc { color: #8b8b94 !important; line-height: 1.65 !important; }
.feature-card::before { display: none !important; }

.principles-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 1120px;
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.principles-grid article {
  min-height: 238px;
  padding: 34px 30px 38px;
  border-right: 1px solid rgba(255,255,255,.1);
}

.principles-grid article:last-child { border-right: 0; }
.principles-grid span { color: #66666f; font-size: 11px; letter-spacing: .13em; }
.principles-grid h3 { margin: 58px 0 12px; color: #f5f5f7; font-size: 19px; letter-spacing: -.025em; }
.principles-grid p { margin: 0; color: #8b8b94; font-size: 14px; line-height: 1.65; }

@media (max-width: 900px) {
  .principles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles-grid article:nth-child(2) { border-right: 0; }
  .principles-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); }
}

@media (max-width: 560px) {
  .principles-grid { grid-template-columns: 1fr; }
  .principles-grid article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .principles-grid article:last-child { border-bottom: 0; }
  .principles-grid h3 { margin-top: 28px; }
}

/* Canonical Instagram brand mark */
.official-ig-badge,
.nav-icon-badge.badge-ig,
.card-icon-box.card-icon-ig {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.official-ig-badge svg,
.nav-icon-badge.badge-ig svg,
.card-icon-box.card-icon-ig svg { display: none !important; }

.official-ig-badge img,
.nav-icon-badge.badge-ig img,
.card-icon-box.card-icon-ig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pro-nav-item:hover .nav-icon-badge.badge-ig,
.pro-nav-item.active .nav-icon-badge.badge-ig,
.clean-select-card:hover .card-icon-ig,
.clean-select-card.active .card-icon-ig,
.official-ig-badge:hover {
  border: 0 !important;
  box-shadow: none !important;
  transform: scale(1.04) !important;
}

.ig-hero-icon {
  width: 104px !important;
  height: 104px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.ig-hero-icon img { display: block; width: 100%; height: 100%; }
.instagram-button-mark { width: 31px; height: 31px; flex: 0 0 31px; }

.instagram-inline-mark {
  display: inline-block;
  width: 15px;
  height: 15px;
  object-fit: contain;
  vertical-align: middle;
}

.instagram-app-avatar {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}

.instagram-app-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.step-instagram-mark { width: 54px; height: 54px; object-fit: contain; }
.instagram-footer-mark { width: 18px; height: 18px; object-fit: contain; }
.instagram-status-mark { width: 20px; height: 20px; object-fit: contain; flex: 0 0 20px; }

/* Editorial setup timeline: less dashboard grid, more product story */
#steps-grid {
  gap: 0 !important;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

#steps-grid .glass-card {
  min-height: 260px;
  position: relative;
  padding: 34px 28px 38px !important;
  text-align: left !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 1px solid rgba(255,255,255,.1) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#steps-grid .glass-card:last-child { border-right: 0 !important; }
#steps-grid .glass-card:hover { transform: none !important; background: rgba(255,255,255,.025) !important; }
#steps-grid .glass-card > div:first-child { margin: 52px 0 26px !important; }
#steps-grid .glass-card::before {
  position: absolute;
  top: 30px;
  left: 28px;
  color: #5e5e67;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .12em;
}
#steps-grid .glass-card:nth-child(1)::before { content: "01"; }
#steps-grid .glass-card:nth-child(2)::before { content: "02"; }
#steps-grid .glass-card:nth-child(3)::before { content: "03"; }
#steps-grid .glass-card:nth-child(4)::before { content: "04"; }
#steps-grid .glass-card h3 { font-size: 17px !important; letter-spacing: -.025em; }
#steps-grid .glass-card p { font-size: 14px !important; line-height: 1.65 !important; }

/* Auth + onboarding */
.auth-left {
  background:
    radial-gradient(circle at 80% 18%, rgba(10,132,255,.1), transparent 34%),
    #000000 !important;
}
.auth-left-orb,
.auth-left-orb-2,
.auth-right::before { display: none !important; }
.auth-form-box { max-width: 460px !important; }
.auth-tab.active { background: rgba(255,255,255,.1) !important; }
.google-auth-btn { border-radius: 999px !important; min-height: 48px; }

.form-field,
.pro-text-input,
.dash-search-box,
.reels-search-input,
.pro-modal-body input,
.pro-modal-body textarea,
.pro-modal-body select {
  color: var(--fg) !important;
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
}

.form-field:focus,
.pro-text-input:focus,
.dash-search-box:focus-within,
.reels-search-input:focus,
.pro-modal-body input:focus,
.pro-modal-body textarea:focus,
.pro-modal-body select:focus {
  border-color: #0a84ff !important;
  box-shadow: var(--premium-ring) !important;
}

.btn-connect-meta {
  background: linear-gradient(180deg, #168cff, #0071e3) !important;
  box-shadow: 0 10px 28px rgba(0,113,227,.25) !important;
}

/* Product surfaces */
.studio-container { max-width: 1480px !important; }
.pro-layout { gap: 22px !important; }
.pro-sidebar {
  background: rgba(12,12,16,.72) !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045), 0 20px 60px rgba(0,0,0,.18);
}

.pro-nav-item { min-height: 44px; border-radius: 12px !important; }
.pro-nav-item.active {
  color: #fff !important;
  background: rgba(10,132,255,.14) !important;
  box-shadow: inset 3px 0 0 #0a84ff !important;
}

.pro-stat-card { padding: 20px !important; }
.pro-table th { background: rgba(255,255,255,.025) !important; color: #898992 !important; }
.pro-table tr:hover td { background: rgba(10,132,255,.035) !important; }

.seg-tabs,
.apple-segmented-control,
.analytics-period-bar {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
}

.seg-tab.active,
.segmented-option.active,
.analytics-period-btn.active {
  color: #fff !important;
  background: rgba(255,255,255,.13) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 2px 8px rgba(0,0,0,.24) !important;
}

.studio-layout { max-width: 1440px !important; gap: 42px !important; }
.step-card { padding: 26px !important; }
.step-number {
  color: #fff !important;
  background: linear-gradient(180deg, #168cff, #0071e3) !important;
  border-color: rgba(255,255,255,.2) !important;
  box-shadow: 0 6px 18px rgba(0,113,227,.22);
}
.preview-card-container {
  border-radius: 24px !important;
  background: rgba(12,12,16,.76) !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* Legal and support pages */
.legal-shell,
.legal-card,
.contact-card {
  background: rgba(17,17,21,.76) !important;
  border-color: rgba(255,255,255,.09) !important;
  border-radius: 22px !important;
}

/* Responsive polish */
@media (max-width: 992px) {
  .hero { min-height: auto; padding-top: 112px; }
  .hero-headline { letter-spacing: -.062em !important; }
  .pro-sidebar { border-radius: 16px !important; }
  .product-flow { grid-template-columns: 1fr 34px 1fr; }
  .product-flow .flow-rule { display: none; }
  .product-flow .flow-connector:nth-of-type(2) { display: none; }
  .use-case-intro { grid-template-columns: 1fr; gap: 18px; }
  #steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #steps-grid .glass-card:nth-child(2) { border-right: 0 !important; }
  #steps-grid .glass-card:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1) !important; }
}

@media (max-width: 700px) {
  .navbar-fixed { height: 60px; }
  .hero { padding: 96px 18px 76px; }
  .hero-headline { font-size: clamp(3rem, 14vw, 4.7rem) !important; line-height: .97 !important; }
  .hero-sub { font-size: 1.03rem !important; }
  .hero-ctas { width: 100%; }
  .hero-ctas .btn { width: 100%; max-width: 360px; }
  .hero-assurance { gap: 11px 18px; flex-wrap: wrap; }
  .product-stage { margin-top: 54px; border-radius: 20px; }
  .product-stage-path { display: none; }
  .product-flow { padding: 22px 16px; display: flex; flex-direction: column; gap: 10px; }
  .flow-card { min-height: auto; }
  .flow-connector { height: 28px; justify-content: center; transform: rotate(90deg); }
  .flow-connector span { max-width: 22px; flex: 0 0 22px; }
  .product-stage-footer { min-height: 72px; }
  .product-stage-footer > div { flex-direction: column; gap: 1px; text-align: center; }
  .product-stage-footer span { font-size: 9px; }
  .use-case-grid { grid-template-columns: 1fr; }
  .use-case-item, .use-case-item:nth-child(even) { min-height: 190px; padding: 26px 8px; grid-template-columns: 34px 1fr; }
  .use-case-item:nth-child(odd) { border-right: 0; }
  .use-case-keyword { grid-column: 2; }
  .trust-ribbon { border-radius: 18px !important; }
  .section { padding: 76px 18px; }
  .section-title { font-size: clamp(2.3rem, 11vw, 3.3rem) !important; }
  .glass-card, .pricing-card, .step-card { border-radius: 18px !important; }
  .studio-header { padding-inline: 16px !important; }
}

@media (max-width: 580px) {
  #steps-grid { grid-template-columns: 1fr !important; }
  #steps-grid .glass-card {
    min-height: 0;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.1) !important;
  }
  #steps-grid .glass-card:last-child { border-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --border: rgba(255,255,255,.23); --muted: #c3c3cb; }
}