/* SOCIUS liquid-glass direction — live site override */

:root{
  --glass-light:rgba(255,255,255,.26);
  --glass-mid:rgba(255,255,255,.14);
  --glass-dark:rgba(16,15,14,.24);
  --glass-border:rgba(255,255,255,.30);
  --glass-shadow:0 22px 55px rgba(36,28,23,.11);
}

/* Give the warm site backgrounds a softer, diffused-light feel. */
.preview-hero,
.preview-system,
.preview-editorial,
.preview-routine,
.simple,
.product-page,
.base-page{
  position:relative;
  isolation:isolate;
}

.preview-hero:after,
.preview-system:after,
.preview-editorial:after,
.preview-routine:after,
.simple:after,
.product-page:after,
.base-page:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(circle at 14% 18%,rgba(255,255,255,.42),transparent 25%),
    radial-gradient(circle at 86% 72%,rgba(255,255,255,.24),transparent 22%);
  filter:blur(2px);
}

/* Product hero becomes a subtle glass display case instead of a flat image field. */
.preview-stage,
.product-visual,
.product-hero-media{
  border:1px solid rgba(255,255,255,.30)!important;
  border-radius:34px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.06))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.48),var(--glass-shadow)!important;
  -webkit-backdrop-filter:blur(12px) saturate(125%)!important;
  backdrop-filter:blur(12px) saturate(125%)!important;
}

/* Base 3 rows — glass slabs with enough opacity to remain readable. */
.preview-rows{border-top:0!important;display:grid!important;gap:10px!important}
.preview-rows button{
  border:1px solid rgba(255,255,255,.31)!important;
  border-radius:22px!important;
  padding:20px 18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(255,255,255,.09))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52),0 12px 30px rgba(47,38,32,.06)!important;
  -webkit-backdrop-filter:blur(14px) saturate(120%)!important;
  backdrop-filter:blur(14px) saturate(120%)!important;
}
.preview-rows button:hover{
  padding-left:24px!important;
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.60),0 18px 36px rgba(47,38,32,.09)!important;
}

/* Editorial imagery feels like product photography viewed through glass. */
.preview-shot,
.visual-world-card,
.idea-card,
.influence-stat{
  border:1px solid rgba(255,255,255,.28)!important;
  border-radius:28px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.42),0 20px 46px rgba(40,31,25,.09)!important;
  overflow:hidden;
}
.preview-shot:after,
.visual-world-card:after,
.idea-card:after,
.influence-stat:after{
  content:"";
  position:absolute;
  inset:-35% -30%;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 34%,rgba(255,255,255,.22) 47%,transparent 58%);
  transform:translateX(-55%);
  opacity:.55;
}
.preview-shot:hover:after,
.visual-world-card:hover:after,
.idea-card:hover:after{transform:translateX(55%);transition:transform .9s ease}

.preview-shot span,
.visual-world-card small,
.status{
  -webkit-backdrop-filter:blur(14px)!important;
  backdrop-filter:blur(14px)!important;
}

/* Dark statement and community areas get smoked glass rather than flat black. */
.preview-statement .wrap,
.preview-community .cloud,
.build-stage{
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:34px!important;
  background:
    radial-gradient(circle at 22% 18%,rgba(255,255,255,.09),transparent 28%),
    radial-gradient(circle at 82% 70%,rgba(255,255,255,.05),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.018))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 28px 60px rgba(0,0,0,.20)!important;
  -webkit-backdrop-filter:blur(16px) saturate(125%)!important;
  backdrop-filter:blur(16px) saturate(125%)!important;
}
.preview-statement .wrap{padding:34px 38px!important}

/* Build With Us bubbles: translucent, dimensional glass orbs. */
.bubble,
.preview-community .bubble{
  border:1px solid rgba(255,255,255,.25)!important;
  background:
    radial-gradient(circle at 29% 20%,rgba(255,255,255,.34),rgba(255,255,255,.12) 33%,rgba(255,255,255,.035) 68%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 0 55px rgba(255,255,255,.05),
    0 22px 48px rgba(0,0,0,.22)!important;
  -webkit-backdrop-filter:blur(15px) saturate(130%)!important;
  backdrop-filter:blur(15px) saturate(130%)!important;
}
.bubble:hover{
  border-color:rgba(255,255,255,.42)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 0 65px rgba(255,255,255,.08),0 28px 58px rgba(0,0,0,.26)!important;
}

/* Request rows / account lists become slim glass strips rather than plain dividers. */
.request-row,
.account-list>button,
.account-list>div{
  border:1px solid rgba(255,255,255,.24)!important;
  border-radius:18px!important;
  margin:8px 0!important;
  padding:16px 18px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.06))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 9px 24px rgba(43,35,29,.05)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
}

/* All major overlays use frosted glass. */
.overlay{
  background:rgba(21,18,16,.32)!important;
  -webkit-backdrop-filter:blur(16px) saturate(115%)!important;
  backdrop-filter:blur(16px) saturate(115%)!important;
}
.modal,
.drawer,
.newsletter-card{
  border:1px solid rgba(255,255,255,.36)!important;
  background:linear-gradient(180deg,rgba(248,244,238,.86),rgba(238,231,221,.72))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 32px 90px rgba(24,18,14,.23)!important;
  -webkit-backdrop-filter:blur(28px) saturate(120%)!important;
  backdrop-filter:blur(28px) saturate(120%)!important;
}
.modal{border-radius:30px!important}
.newsletter-card{border-radius:30px!important}

.form-row input,
.form-row textarea,
.newsletter-form input{
  background:rgba(255,255,255,.34)!important;
  border:1px solid rgba(255,255,255,.48)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
  -webkit-backdrop-filter:blur(12px)!important;
  backdrop-filter:blur(12px)!important;
}

/* Buttons become restrained glass controls, while primary CTAs stay dark and clear. */
.pill,
.vote,
.icon,
.auth-tabs button{
  background:rgba(255,255,255,.15)!important;
  border-color:rgba(255,255,255,.34)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34)!important;
  -webkit-backdrop-filter:blur(10px)!important;
  backdrop-filter:blur(10px)!important;
}
.pill-dark,
.checkout{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 24px rgba(0,0,0,.13)!important;
}

/* Frosted cookie bar instead of a nearly opaque slab. */
.cookie-bar{
  background:rgba(18,17,15,.70)!important;
  border:1px solid rgba(255,255,255,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 22px 60px rgba(0,0,0,.24)!important;
  -webkit-backdrop-filter:blur(22px) saturate(135%)!important;
  backdrop-filter:blur(22px) saturate(135%)!important;
}

/* Keep mobile clean — glass, but not cramped. */
@media(max-width:700px){
  .preview-stage{border-radius:26px!important;padding:10px!important}
  .preview-rows button{border-radius:18px!important;padding:18px 14px!important}
  .modal,.newsletter-card{border-radius:24px!important}
  .build-stage,.preview-community .cloud{border-radius:26px!important}
  .request-row,.account-list>button,.account-list>div{border-radius:16px!important;padding:14px!important}
}