/* ============================================================
   4BIGHA — SIGN-UP, PREMIUM PASS   (6 Sep 2026)

   The page was doing everything at once: a four-stop gradient
   animating under a floating stat row, boxes inside boxes, and
   eight competing surfaces at the same brightness. Nothing led.

   This layer does three things. It gives the page one light
   source instead of a moving gradient. It puts a real contrast
   ladder on the surfaces — background, panel, card, action — so
   the eye lands on the choice. And it stops everything that
   moves for no reason.

   Loaded after the page's own <style>, so it only overrides.
   ============================================================ */

:root{
  --sg-ink:#0B0518;
  --sg-violet:#5B2FB0;
  --sg-violet-lt:#7A4FD6;
  --sg-gold:#E9C86A;
  --sg-gold-2:#FFDE8A;
  --sg-line:rgba(255,255,255,.09);
  --sg-line-2:rgba(255,255,255,.055);
  --sg-dim:#A9A2C4;
  --sg-dim-2:#7E769A;
  --sg-ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 1. one light source, and it stops moving ---------- */
body{
  background:#0B0518 !important;
  animation:none !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.aurora{
  animation:none !important;
  filter:blur(90px) !important;
  opacity:.85;
  background:
    radial-gradient(58% 46% at 14% 8%,  rgba(122,79,214,.46), transparent 68%),
    radial-gradient(46% 40% at 88% 14%, rgba(233,200,106,.13), transparent 66%),
    radial-gradient(64% 52% at 74% 96%, rgba(74,32,150,.42), transparent 70%) !important;
}
.grid{
  opacity:.5 !important;
  background-size:78px 78px !important;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) !important;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
}
/* a floor, so the page has a bottom instead of fading into nothing */
.background::after{
  content:""; position:absolute; inset:auto 0 0 0; height:46%;
  background:linear-gradient(to top, rgba(6,2,16,.92), transparent);
  pointer-events:none;
}

/* ---------- 2. header ---------- */
header{ padding:20px clamp(20px,4vw,56px) !important; }
.logo img{ height:34px !important; }
.header-right a{ color:var(--sg-dim) !important; font-size:13.5px !important; }
.login-btn{
  padding:11px 24px !important; border-radius:11px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  font-weight:600 !important; font-size:13.5px !important;
  transition:.24s var(--sg-ease) !important;
}
.login-btn:hover{
  background:rgba(255,255,255,.1) !important;
  border-color:rgba(255,255,255,.26) !important;
  transform:none !important;
}

/* ---------- 3. the headline gets the room ---------- */
.container{ width:min(1400px,92%) !important; column-gap:clamp(28px,5vw,84px) !important; }

.eyebrow{
  padding:7px 14px 7px 12px !important; gap:9px; align-items:center;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  font-size:11px !important; letter-spacing:.14em !important; text-transform:uppercase;
  font-weight:600 !important; color:#DCD3F2 !important; margin-bottom:22px !important;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--sg-gold); box-shadow:0 0 12px 2px rgba(233,200,106,.7);
}

.hero h1{
  font-size:clamp(34px,4.1vw,58px) !important;
  line-height:1.02 !important;
  letter-spacing:-.032em !important;
  font-weight:800 !important;
  margin-bottom:20px !important;
  animation:none !important;
}
.hero h1 span{
  background:linear-gradient(103deg,#FFE9AF 6%,var(--sg-gold-2) 34%,var(--sg-gold) 78%) !important;
  -webkit-background-clip:text !important; background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}
.hero p{
  font-size:15.5px !important; line-height:1.68 !important;
  color:var(--sg-dim) !important; max-width:50ch;
}

/* Feature rows were four filled boxes shouting at the headline.
   Quiet them into a list you read, not a grid you scan. */
.hero-features{ gap:9px !important; margin-top:26px !important; }
.feature{
  background:transparent !important;
  border:1px solid var(--sg-line-2) !important;
  border-radius:13px !important;
  padding:13px 15px !important;
  font-size:13.5px !important; font-weight:500 !important;
  color:#E8E4F5 !important;
  transition:.24s var(--sg-ease) !important;
}
.feature:hover{
  background:rgba(255,255,255,.04) !important;
  border-color:rgba(255,255,255,.14) !important;
  transform:translateY(-2px) !important;
}
.icon{
  width:34px !important; height:34px !important; border-radius:10px !important;
  background:rgba(233,200,106,.1) !important;
  border:1px solid rgba(233,200,106,.2);
  color:var(--sg-gold) !important;
}

/* Stats: numbers, not floating cards. */
.stats{ gap:0 !important; margin-top:30px !important; border-top:1px solid var(--sg-line-2); padding-top:22px; }
.stat{
  background:transparent !important; border:none !important;
  border-right:1px solid var(--sg-line-2) !important;
  border-radius:0 !important; padding:2px 22px !important;
  text-align:left !important; animation:none !important; backdrop-filter:none !important;
}
.stat:first-child{ padding-left:0 !important; }
.stat:last-child{ border-right:none !important; }
.stat h2{
  font-size:29px !important; font-weight:800 !important;
  letter-spacing:-.03em !important; color:#fff !important; margin:0 0 4px !important;
}
.stat span{
  font-size:10.5px !important; letter-spacing:.16em !important;
  text-transform:uppercase; color:var(--sg-dim-2) !important; font-weight:600 !important;
}

/* ---------- 4. the card is the product ---------- */
.glass-card{
  max-width:600px !important;
  padding:30px 32px 28px !important;
  border-radius:24px !important;
  background:linear-gradient(168deg, rgba(30,17,60,.82), rgba(14,7,32,.88)) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  backdrop-filter:blur(34px) saturate(120%) !important;
  box-shadow:
    0 2px 0 rgba(255,255,255,.06) inset,
    0 60px 120px -40px rgba(0,0,0,.85),
    0 0 0 1px rgba(0,0,0,.35) !important;
}
.glass-card::before{ opacity:.5 !important; }
.glass-card h2{
  font-size:24px !important; letter-spacing:-.025em !important;
  font-weight:800 !important; margin-bottom:6px !important;
}
.glass-card .csub{ color:var(--sg-dim) !important; font-size:13.5px !important; margin-bottom:22px !important; }

/* Stepper: a rail, not three medallions. */
.stepper{ margin-bottom:24px !important; }
.step{ gap:9px !important; font-size:10px !important; letter-spacing:.14em !important;
       text-transform:uppercase; font-weight:700 !important; color:var(--sg-dim-2) !important; }
.step span{
  width:26px !important; height:26px !important; border-radius:50% !important;
  font-size:12px !important; font-weight:700 !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  color:var(--sg-dim) !important;
  transition:.28s var(--sg-ease) !important;
}
.step.active{ color:#fff !important; }
.step.active span{
  background:var(--sg-gold) !important; color:#241038 !important;
  border-color:transparent !important;
  box-shadow:0 0 0 5px rgba(233,200,106,.14) !important;
}
.line{ height:1px !important; background:rgba(255,255,255,.11) !important; margin:0 14px 18px !important; }

.navrow{ margin-bottom:6px; }
.ministep{
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color:var(--sg-dim) !important; border-radius:9px !important;
  font-size:12px !important; font-weight:600 !important; padding:7px 13px !important;
  transition:.22s var(--sg-ease) !important;
}
.ministep:hover{ background:rgba(255,255,255,.09) !important; color:#fff !important; }

/* ---------- 5. choosing who you are ---------- */
.community-grid{ gap:12px !important; margin:2px 0 4px !important; }
.community{
  align-items:flex-start !important;
  gap:13px !important; padding:16px 15px !important; border-radius:15px !important;
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  font-size:14.5px !important; font-weight:700 !important;
  transition:.26s var(--sg-ease) !important;
  position:relative; overflow:hidden;
}
.community::after{
  content:""; position:absolute; inset:0; border-radius:15px; pointer-events:none;
  background:radial-gradient(120% 100% at 50% 0%, rgba(255,255,255,.07), transparent 60%);
  opacity:0; transition:.26s var(--sg-ease);
}
.community:hover{
  background:rgba(255,255,255,.07) !important;
  border-color:rgba(255,255,255,.2) !important;
  transform:translateY(-3px) !important;
  box-shadow:0 22px 40px -26px rgba(0,0,0,.9) !important;
}
.community:hover::after{ opacity:1; }
.community .ci{
  width:36px !important; height:36px !important; border-radius:11px !important;
  background:linear-gradient(150deg, rgba(122,79,214,.5), rgba(122,79,214,.16)) !important;
  border:1px solid rgba(255,255,255,.12);
  transition:.26s var(--sg-ease) !important;
}
.community small{
  color:var(--sg-dim-2) !important; font-weight:500 !important;
  font-size:12px !important; line-height:1.45 !important; display:block; margin-top:3px;
}
.community.active{
  background:linear-gradient(150deg, rgba(233,200,106,.14), rgba(233,200,106,.05)) !important;
  border-color:rgba(233,200,106,.55) !important;
  box-shadow:0 0 0 1px rgba(233,200,106,.3), 0 26px 46px -28px rgba(233,200,106,.35) !important;
  transform:none !important;
}
.community.active .ci{
  background:linear-gradient(150deg,var(--sg-gold-2),var(--sg-gold)) !important;
  border-color:transparent !important; color:#2A1147 !important;
}
.community.active small{ color:#D9CFA8 !important; }

/* ---------- 6. plans ---------- */
.dashpreview{
  background:rgba(255,255,255,.032) !important;
  border:1px solid var(--sg-line-2) !important;
  border-radius:15px !important; padding:16px 17px !important; margin-bottom:16px !important;
}
.dashpreview .dpt{
  font-size:10px !important; letter-spacing:.16em !important; font-weight:700 !important;
  color:var(--sg-gold) !important;
}
.dashpreview li{ color:#DCD6EE !important; font-size:12.5px !important; line-height:1.55 !important; }

.pricing{ gap:12px !important; margin-top:6px !important; }
.plan{
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:17px !important;
  padding:20px 16px 16px !important;
  transition:.26s var(--sg-ease) !important;
}
.plan:hover{
  background:rgba(255,255,255,.065) !important;
  border-color:rgba(255,255,255,.2) !important;
  transform:translateY(-4px) !important;
  box-shadow:0 30px 54px -32px rgba(0,0,0,.95) !important;
}
.plan.featured{
  border:1px solid rgba(233,200,106,.6) !important;
  background:linear-gradient(170deg, rgba(233,200,106,.11), rgba(255,255,255,.035) 62%) !important;
  box-shadow:0 0 0 1px rgba(233,200,106,.22), 0 34px 60px -34px rgba(233,200,106,.4) !important;
}
.plan-name{
  font-size:10.5px !important; letter-spacing:.16em !important; text-transform:uppercase;
  font-weight:700 !important; color:var(--sg-dim-2) !important;
}
.plan.featured .plan-name{ color:var(--sg-gold) !important; }
.price{
  font-size:30px !important; font-weight:800 !important;
  letter-spacing:-.035em !important; color:#fff !important;
  margin:9px 0 14px !important; line-height:1.05 !important;
}
.price small{
  font-size:11.5px !important; font-weight:600 !important;
  color:var(--sg-dim-2) !important; letter-spacing:.02em !important;
}
.plan li{ font-size:12.5px !important; color:#DCD6EE !important; line-height:1.5 !important; }
.badge{
  top:-9px !important; right:auto !important; left:50% !important;
  transform:translateX(-50%) !important;
  padding:5px 12px !important; font-size:9px !important;
  letter-spacing:.13em !important; text-transform:uppercase;
  background:linear-gradient(135deg,var(--sg-gold-2),var(--sg-gold)) !important;
  box-shadow:0 8px 18px -8px rgba(233,200,106,.9) !important;
  white-space:nowrap;
}
.plan .pbtn{
  padding:12px !important; border-radius:11px !important;
  font-size:12.5px !important; letter-spacing:.01em !important;
  background:linear-gradient(135deg,var(--sg-gold-2),var(--sg-gold)) !important;
  color:#26123F !important;
  box-shadow:0 14px 26px -14px rgba(233,200,106,.8) !important;
  transition:.22s var(--sg-ease) !important;
}
.plan:not(.featured) .pbtn{
  background:rgba(255,255,255,.08) !important; color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important; box-shadow:none !important;
}
.plan:not(.featured):hover .pbtn{
  background:rgba(255,255,255,.15) !important; border-color:rgba(255,255,255,.3) !important;
}
.plan .pbtn:hover{ transform:translateY(-1px) !important; }

/* ---------- 7. account + login forms ---------- */
.selpill{
  background:rgba(255,255,255,.05) !important;
  border:1px solid var(--sg-line) !important; border-radius:12px !important;
}
.gbtn{
  padding:12px !important; border-radius:12px !important;
  background:#fff !important; color:#1B1130 !important; font-weight:700 !important;
  border:none !important; transition:.22s var(--sg-ease) !important;
}
.gbtn:hover{ transform:translateY(-1px) !important; box-shadow:0 16px 30px -16px rgba(0,0,0,.9) !important; }
.divider{ color:var(--sg-dim-2) !important; font-size:11px !important; letter-spacing:.12em !important; text-transform:uppercase; }
.flabel{
  font-size:10px !important; letter-spacing:.14em !important; text-transform:uppercase;
  font-weight:700 !important; color:var(--sg-dim-2) !important;
}
.input{
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.11) !important;
  border-radius:12px !important; padding:13px 15px !important;
  font-size:14.5px !important; color:#fff !important;
  transition:.2s var(--sg-ease) !important;
}
.input::placeholder{ color:#6E6689 !important; }
.input:focus{
  border-color:rgba(233,200,106,.6) !important;
  background:rgba(255,255,255,.07) !important;
  box-shadow:0 0 0 4px rgba(233,200,106,.12) !important;
}
.atab{
  border-radius:10px !important; font-size:12.5px !important; font-weight:600 !important;
  color:var(--sg-dim) !important; transition:.2s var(--sg-ease) !important;
}
.atab.on{ background:rgba(255,255,255,.11) !important; color:#fff !important; }
.cta{
  padding:14px !important; border-radius:12px !important;
  font-size:14px !important; font-weight:700 !important; letter-spacing:.01em !important;
  background:linear-gradient(135deg,var(--sg-gold-2),var(--sg-gold)) !important;
  color:#26123F !important;
  box-shadow:0 18px 34px -18px rgba(233,200,106,.85) !important;
  transition:.22s var(--sg-ease) !important;
}
.cta:hover{ transform:translateY(-2px) !important; }
.login-text{ color:var(--sg-dim-2) !important; font-size:13px !important; }
.login-text a{ color:var(--sg-gold) !important; font-weight:700 !important; }
.frow a{ color:var(--sg-gold) !important; }

/* ---------- 8. no motion without meaning ---------- */
.cursor-glow{ display:none !important; }
.stat, .glass-card, .feature{ animation:none !important; }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }

/* ---------- 9. small screens ---------- */
@media(max-width:1080px){
  .stats{ flex-wrap:wrap; }
  .stat{ padding:2px 16px !important; }
  .glass-card{ padding:24px 22px !important; }
  .hero h1{ font-size:clamp(30px,6vw,42px) !important; }
}

/* ============================================================
   PASS 2 — calmer surfaces, one accent, real vertical balance
   Reference direction: the page should read as two columns of
   quiet type with a single lifted panel, not eight lit boxes.
   ============================================================ */

/* The page was top-heavy with a dead third at the bottom. */
.container{
  align-content:center !important;
  align-items:center !important;
  padding-bottom:0 !important;
  row-gap:34px !important;
}
.hero-top{ align-self:end; }
.hero-bottom{ align-self:start; }

/* Features: rows you read, not boxes you count. */
.hero-features{
  display:grid !important; grid-template-columns:1fr 1fr;
  gap:20px 34px !important; margin-top:34px !important;
}
.feature{
  background:transparent !important; border:none !important;
  padding:0 !important; border-radius:0 !important;
  align-items:center; gap:13px !important;
  color:#EDEAF7 !important; font-weight:600 !important; font-size:14px !important;
}
.feature:hover{ background:transparent !important; transform:none !important; }
.feature:hover .icon{ border-color:rgba(233,200,106,.45) !important; background:rgba(233,200,106,.16) !important; }
.icon{
  width:36px !important; height:36px !important; border-radius:11px !important;
  background:rgba(255,255,255,.05) !important;
  border:1px solid rgba(255,255,255,.1) !important;
  color:var(--sg-gold) !important;
  transition:.24s var(--sg-ease) !important;
}

/* Hairline above the stats only — no other rules on the left. */
.stats{ margin-top:34px !important; padding-top:24px !important; }

/* Community tiles: same height, more air, quieter idle state. */
.community-grid{ gap:13px !important; }
.community{
  min-height:82px; align-items:center !important;
  background:rgba(255,255,255,.028) !important;
  border-color:rgba(255,255,255,.07) !important;
}
.community .ci{
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.1) !important;
  color:#CFC6EA !important;
}
.community:hover .ci{ color:#fff !important; }

/* Selected: a gold hairline and a gold icon. Nothing else changes. */
.community.active{
  background:rgba(233,200,106,.07) !important;
  border-color:rgba(233,200,106,.5) !important;
  box-shadow:0 0 0 1px rgba(233,200,106,.18) !important;
}
.community.active .ci{
  background:var(--sg-gold) !important; color:#241038 !important;
}

/* The panel sits closer to the page, not floating above it. */
.glass-card{
  background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025)) !important;
  border-color:rgba(255,255,255,.1) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 48px 100px -46px rgba(0,0,0,.9) !important;
}

/* Headline: one accent, no second gradient competing with the CTA. */
.hero h1 span{
  background:none !important;
  -webkit-text-fill-color:var(--sg-gold) !important;
  color:var(--sg-gold) !important;
}

/* The support bubble was the brightest thing on a dark page. */
.wa-fab{ opacity:.85; transform:scale(.92); transform-origin:100% 100%; }
.wa-fab:hover{ opacity:1; }

@media(max-width:900px){
  .hero-features{ grid-template-columns:1fr !important; gap:16px !important; }
}

/* ============================================================
   PASS 3 — proportion
   The panel changes height at every step (community is short,
   account is tall), so on a wide screen it left a dead band under
   it and the two columns stopped balancing. One stable floor for
   the panel, the composition centred, and the breakpoints matched
   to where the page actually switches to a single column (1080px)
   instead of the 861px an earlier fix guessed at.
   ============================================================ */

/* Undo the older scroll-inside-the-column fix everywhere: the panel
   now manages its own height, so the column does not need a mask. */
@media (min-width:861px){
  .right{
    align-items:center !important;
    justify-content:center;
    max-height:none !important;
    overflow:visible !important;
    -webkit-mask-image:none !important; mask-image:none !important;
    padding:0 !important;
  }
}

/* Two columns — balance them. */
@media (min-width:1081px){
  .container{
    align-content:center !important;
    align-items:center !important;
    padding-top:0 !important; padding-bottom:0 !important;
  }
  .glass-card{
    min-height:min(552px, 74vh);
    max-height:88vh;
    display:flex; flex-direction:column;
  }
  /* the visible step fills the panel and scrolls inside it, so the
     panel never jumps in height under the person */
  .glass-card .panel.on{
    flex:1 1 auto; min-height:0; overflow-y:auto;
    overscroll-behavior:contain; scrollbar-gutter:stable;
    padding-right:4px;
  }
  .hero-top{ align-self:end !important; }
  .hero-bottom{ align-self:start !important; }
}

/* One column — stack from the top and let the page scroll. Nothing
   is stretched to fill a height it does not have. */
@media (max-width:1080px){
  body{ height:auto !important; overflow-y:auto !important; }
  .container{
    align-content:start !important;
    padding:14px 0 60px !important;
    row-gap:32px !important;
  }
  .glass-card{ max-width:100% !important; min-height:0 !important; max-height:none !important; }
  .right{ align-items:stretch !important; }
  .hero h1{ font-size:clamp(30px,5.6vw,44px) !important; }
  .hero-features{ grid-template-columns:1fr 1fr !important; }
  .stats{ justify-content:flex-start !important; }
  .stat{ padding:2px 18px !important; }
  .stat:first-child{ padding-left:0 !important; }
}

@media (max-width:640px){
  .hero-features{ grid-template-columns:1fr !important; }
  .community-grid{ grid-template-columns:1fr !important; }
  .pricing{ grid-template-columns:1fr !important; }
  .stats{ flex-direction:row !important; flex-wrap:wrap; gap:18px 0 !important; }
  .stat{ flex:0 0 50% !important; border-right:none !important; padding:2px 0 !important; }
  .glass-card{ padding:22px 18px !important; border-radius:20px !important; }
  .stat h2{ font-size:24px !important; }
}

/* The POPULAR ribbon sits above the card edge, so the card must not
   clip it — and the row needs the headroom to show it. */
.pricing{ padding-top:12px !important; }
.plan{ overflow:visible !important; }
.plan::after{ border-radius:17px !important; }
.plan-name{ white-space:nowrap; }
.badge{ top:-10px !important; }

/* ============================================================
   TYPE — one family set, the same one the rest of 4Bigha uses
   Every other page runs Plus Jakarta Sans for display, DM Sans
   for text and Jost for the small caps labels. This page was the
   only one on Inter, which is why it read as a different product.
   ============================================================ */
:root{
  --sg-display:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --sg-text:'DM Sans', system-ui, -apple-system, sans-serif;
  --sg-label:'Jost', system-ui, -apple-system, sans-serif;
}

body, .container, .glass-card, .panel,
p, span, div, li, label, small, a{ font-family:var(--sg-text); }

/* display */
.hero h1, .glass-card h2, .price, .stat h2,
.plan .pbtn, .cta, .gbtn, .login-btn, .community, .feature{
  font-family:var(--sg-display) !important;
}
.hero h1, .glass-card h2, .price, .stat h2{ font-weight:800 !important; }

/* small caps labels */
.eyebrow, .plan-name, .flabel, .step, .stat span,
.dashpreview .dpt, .badge, .divider, .atab{
  font-family:var(--sg-label) !important;
  font-weight:600 !important;
}
.badge, .plan-name, .eyebrow{ font-weight:700 !important; }

/* text */
.hero p, .glass-card .csub, .community small, .plan li,
.dashpreview li, .input, .login-text, .header-right a, .authmsg, .chk, .frow{
  font-family:var(--sg-text) !important;
}
.input{ font-weight:500 !important; }

/* Density: three plan cards in one column need tighter type so the
   CTA is on screen with the price, not a scroll away. */
.plan{ padding:18px 13px 14px !important; }
.plan li{ font-size:12px !important; line-height:1.45 !important; margin-bottom:6px !important; }
.plan ul{ margin-bottom:12px !important; }
.price{ font-size:27px !important; margin:8px 0 10px !important; }
.plan .pbtn{ font-size:11.5px !important; padding:11px 8px !important; line-height:1.3 !important; }
.dashpreview{ padding:13px 15px !important; margin-bottom:13px !important; }
.dashpreview li{ font-size:12px !important; }
.glass-card{ padding:26px 26px 22px !important; }
@media (min-width:1081px){ .glass-card{ max-height:90vh; } }