/* ════════════════════════════════════════════════════════════
   Sipps — pre-launch marketing site
   Design tokens mirror the app's design system exactly.
   ════════════════════════════════════════════════════════════ */

:root{
  --parchment:   #F8F1E6;
  --parchment2:  #EFE4D2;
  --parchment3:  #E4D5BF;
  --terracotta:  #B34E38;
  --terra-light: #EAC5B8;
  --sage:        #5B9E6A;
  --sage-light:  #C0DFC6;
  --gold:        #9C7032;
  --gold-light:  #E4CE9E;
  --ink:         #271610;
  --ink2:        #3C2016;
  --muted:       #8A6848;
  --muted2:      #B89070;
  --dark:        #1A0E06;
  --dark2:       #221408;
  --dark3:       #2E1A0A;
  --dark-cream:  #F5E8D0;
  --dark-muted:  rgba(245,232,208,.42);

  --br:   rgba(39,22,16,.09);
  --br2:  rgba(39,22,16,.05);
  --dbr:  rgba(245,232,208,.10);
  --dbr2: rgba(245,232,208,.18);

  --serif: 'Playfair Display', Georgia, serif;
  --sans:  'DM Sans', system-ui, -apple-system, sans-serif;

  --radius:   18px;
  --radius-lg: 26px;
  --shadow:    0 22px 60px rgba(39,22,16,.13), 0 5px 16px rgba(39,22,16,.07);
  --shadow-sm: 0 6px 20px rgba(39,22,16,.10);
  --ease:      cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);
  background:var(--parchment);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.wrap{max-width:1140px;margin:0 auto;padding:0 24px;}

/* ── shared type ── */
.eyebrow,.section-eyebrow{
  font-family:var(--sans);
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--terracotta);
}
.section-eyebrow{color:var(--muted);margin-bottom:14px;display:inline-block;}
.section-eyebrow.light{color:var(--terra-light);}
.section-eyebrow.center{display:block;text-align:center;}

.section-title{
  font-family:var(--serif);
  font-size:clamp(30px,5vw,52px);
  font-weight:700;line-height:1.08;letter-spacing:-.02em;
  color:var(--ink2);margin-bottom:18px;
}
.section-title em{font-style:italic;color:var(--terracotta);}
.section-title.light{color:var(--dark-cream);}
.section-title.light em{color:var(--terra-light);}

/* ── buttons ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sans);font-weight:600;font-size:16px;
  padding:15px 28px;border-radius:100px;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  white-space:nowrap;
}
.btn-primary{
  background:var(--terracotta);color:#fff;
  box-shadow:0 10px 24px rgba(179,78,56,.30), 0 2px 6px rgba(179,78,56,.25);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(179,78,56,.38);}
.btn-primary:active{transform:translateY(0);}
.btn-sm{padding:10px 20px;font-size:14px;}

/* live dot */
.dot-live{
  display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--sage);margin-right:7px;position:relative;top:0;
  box-shadow:0 0 0 0 rgba(91,158,106,.55);
  animation:pulse 2.4s infinite var(--ease);
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(91,158,106,.5);}
  70%{box-shadow:0 0 0 8px rgba(91,158,106,0);}
  100%{box-shadow:0 0 0 0 rgba(91,158,106,0);}
}

/* ════════════════ NAV ════════════════ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), padding .35s var(--ease);
  padding:18px 0;
}
.nav.scrolled{
  background:rgba(248,241,230,.85);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  box-shadow:0 1px 0 var(--br2), 0 6px 20px rgba(39,22,16,.05);
  padding:12px 0;
}
.nav-inner{
  max-width:1140px;margin:0 auto;padding:0 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.nav-logo{display:flex;align-items:center;gap:9px;color:var(--terracotta);}
.nav-word{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--ink2);letter-spacing:-.01em;}
.steam-mark{color:var(--terracotta);display:inline-flex;}
.nav-links{display:flex;gap:30px;}
.nav-links a{font-size:15px;color:var(--ink);font-weight:500;opacity:.78;transition:opacity .2s;}
.nav-links a:hover{opacity:1;color:var(--terracotta);}
.nav-cta{box-shadow:0 6px 16px rgba(179,78,56,.25);}

/* animated steam in the logo cup */
.steam .s1,.steam .s2{stroke-dasharray:6;animation:steamFloat 2.8s ease-in-out infinite;}
.steam .s2{animation-delay:.7s;}
@keyframes steamFloat{
  0%{opacity:0;transform:translateY(2px);}
  40%{opacity:.9;}
  100%{opacity:0;transform:translateY(-3px);}
}

/* ════════════════ HERO ════════════════ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
  padding:140px 24px 90px;
  overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--parchment) 0%, var(--parchment2) 70%, var(--parchment3) 100%);
}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.mesh{position:absolute;inset:-10% -10% -10% -10%;width:120%;height:120%;filter:blur(8px);opacity:.9;}
.blob{transform-origin:center;}
.b1{animation:floatBlob 18s ease-in-out infinite;}
.b2{animation:floatBlob 22s ease-in-out infinite reverse;}
.b3{animation:floatBlob 26s ease-in-out infinite;}
@keyframes floatBlob{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(30px,-26px) scale(1.08);}
  66%{transform:translate(-24px,22px) scale(.95);}
}

/* drifting mini poll cards in the hero bg */
.drift{
  position:absolute;
  background:rgba(255,255,255,.72);
  border:1px solid var(--br);
  border-radius:14px;padding:11px 14px;
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(4px);
  width:190px;text-align:left;
  opacity:0;
}
.drift-q{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--ink2);display:block;margin-bottom:8px;line-height:1.35;}
.drift-bar{display:block;height:6px;border-radius:100px;background:rgba(39,22,16,.08);overflow:hidden;}
.drift-bar i{display:block;height:100%;width:var(--w);background:var(--terracotta);border-radius:100px;}
.drift-bar.sage i{background:var(--sage);}
.d1{top:18%;left:6%;animation:driftFloat 14s ease-in-out infinite;}
.d2{top:62%;left:8%;animation:driftFloat 17s ease-in-out infinite 1.2s;}
.d3{top:26%;right:5%;animation:driftFloat 16s ease-in-out infinite .6s;}
@keyframes driftFloat{
  0%{opacity:0;transform:translateY(20px) rotate(-3deg);}
  12%,80%{opacity:.92;}
  40%{transform:translateY(-14px) rotate(2deg);}
  100%{opacity:0;transform:translateY(-24px) rotate(-2deg);}
}

.hero-content{position:relative;z-index:2;max-width:760px;}
.hero .eyebrow{
  display:inline-block;
  background:rgba(179,78,56,.10);
  border:1px solid rgba(179,78,56,.2);
  color:var(--terracotta);
  padding:7px 16px;border-radius:100px;margin-bottom:26px;
  font-size:11.5px;
}
.hero-title{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:24px;}
.logo-word{
  font-family:var(--serif);font-weight:800;
  font-size:clamp(64px,13vw,128px);line-height:.9;
  color:var(--ink2);letter-spacing:-.03em;
}
.hero-sub{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(22px,4.4vw,40px);line-height:1.18;
  letter-spacing:-.01em;color:var(--ink2);
}
.hero-sub em{font-style:italic;color:var(--terracotta);}
.hero-hook{
  font-size:clamp(16px,2.2vw,19px);color:var(--muted);
  max-width:540px;margin:0 auto 34px;line-height:1.65;
}

.hero-form{
  display:flex;gap:10px;max-width:480px;margin:0 auto 18px;
  background:#fff;padding:7px;border-radius:100px;
  box-shadow:var(--shadow);border:1px solid var(--br);
}
.hero-input{
  flex:1;border:none;background:transparent;outline:none;
  font-family:var(--sans);font-size:16px;color:var(--ink);
  padding:0 8px 0 18px;min-width:0;
}
.hero-input::placeholder{color:var(--muted2);}
.hero-form .btn{flex-shrink:0;padding:14px 24px;}

.hero-trust{font-size:14px;color:var(--muted);}
.hero-trust strong{color:var(--ink2);font-weight:700;}

.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  width:26px;height:42px;border:2px solid rgba(138,104,72,.4);
  border-radius:100px;z-index:2;display:flex;justify-content:center;padding-top:8px;
}
.scroll-cue span{width:4px;height:8px;border-radius:100px;background:var(--terracotta);animation:scrollDot 1.8s infinite var(--ease);}
@keyframes scrollDot{0%{opacity:0;transform:translateY(-3px);}40%{opacity:1;}80%,100%{opacity:0;transform:translateY(12px);}}

/* ════════════════ PITCH ════════════════ */
.pitch{padding:110px 0;background:var(--parchment);}
.pitch .section-eyebrow,.pitch .section-title{text-align:center;display:block;}
.pitch .section-title{margin:0 auto 52px;max-width:680px;}
.cards{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.vcard{
  background:#fff;border:1px solid var(--br);border-radius:var(--radius-lg);
  padding:32px 26px;box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.vcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.vcard-icon{
  width:54px;height:54px;border-radius:16px;
  background:var(--parchment2);
  display:flex;align-items:center;justify-content:center;
  font-size:26px;margin-bottom:20px;
}
.vcard h3{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--ink2);margin-bottom:10px;letter-spacing:-.01em;}
.vcard p{font-size:14.5px;color:var(--muted);line-height:1.65;}

/* ════════════════ THE TEA (dark) ════════════════ */
.tea{
  position:relative;background:var(--dark);color:var(--dark-cream);
  padding:120px 0;overflow:hidden;
}
.tea-glow{
  position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:780px;height:780px;border-radius:50%;
  background:radial-gradient(circle, rgba(179,78,56,.22), transparent 62%);
  pointer-events:none;animation:glowPulse 8s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{opacity:.7;}50%{opacity:1;}}
.tea-wrap{position:relative;z-index:2;text-align:center;max-width:560px;}
.tea-lead{font-size:17px;color:var(--dark-muted);max-width:440px;margin:0 auto 40px;line-height:1.6;}

.tea-card{
  background:linear-gradient(180deg,var(--dark2),var(--dark3));
  border:1px solid var(--dbr2);border-radius:var(--radius-lg);
  padding:24px 22px;text-align:left;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(245,232,208,.04);
  max-width:440px;margin:0 auto;
}
.tea-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.tea-cat{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--terra-light);font-weight:600;}
.tea-live{font-size:12px;color:var(--dark-muted);display:flex;align-items:center;}
.tea-q{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:21px;line-height:1.4;color:var(--dark-cream);
  margin-bottom:22px;min-height:58px;
}
.tea-options{display:flex;flex-direction:column;gap:12px;}
.tea-opt{
  position:relative;display:grid;
  grid-template-columns:auto 1fr auto;align-items:center;gap:12px;
  padding:16px 18px;border-radius:16px;
  border:1.5px solid var(--dbr2);background:rgba(245,232,208,.03);
  color:var(--dark-cream);text-align:left;overflow:hidden;
  transition:border-color .25s var(--ease), background .25s var(--ease), transform .2s var(--ease);
}
.tea-opt:hover{transform:translateY(-2px);border-color:rgba(245,232,208,.35);}
.tea-opt.a:hover{border-color:var(--terracotta);}
.tea-opt.b:hover{border-color:var(--sage);}
.tea-opt-emoji{font-size:24px;z-index:2;}
.tea-opt-label{font-size:15px;font-weight:600;z-index:2;font-family:var(--serif);}
.tea-opt-pct{font-size:15px;font-weight:700;z-index:2;opacity:0;transition:opacity .4s .3s var(--ease);font-variant-numeric:tabular-nums;}
/* the result fill bar — sits behind the label */
.tea-opt-bar{position:absolute;left:0;top:0;bottom:0;width:100%;z-index:1;display:block;}
.tea-opt-bar i{
  display:block;height:100%;width:0;
  background:rgba(179,78,56,.28);
  border-right:2px solid var(--terracotta);
  transition:width 1.1s var(--ease);
}
.tea-opt-bar.sage i{background:rgba(91,158,106,.28);border-right-color:var(--sage);}

/* voted state */
.tea-card[data-state="voted"] .tea-opt-pct{opacity:1;}
.tea-card[data-state="voted"] .tea-opt{cursor:default;}
.tea-opt.chosen{border-color:var(--gold-light);box-shadow:0 0 0 1px rgba(228,206,158,.4);}

.tea-hint{text-align:center;font-size:12px;letter-spacing:.06em;color:rgba(245,232,208,.28);margin-top:16px;}
.tea-card[data-state="voted"] .tea-hint{display:none;}

.tea-verdict{margin-top:18px;text-align:center;animation:fadeUp .6s var(--ease) both;}
.verdict-pill{
  display:inline-block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:600;color:var(--gold-light);
  background:rgba(156,112,50,.22);border:1px solid rgba(156,112,50,.4);
  padding:5px 14px;border-radius:100px;margin-bottom:12px;
}
#verdict-text{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--dark-cream);line-height:1.45;margin-bottom:16px;}
.tea-replay{
  font-size:13px;font-weight:600;color:var(--terra-light);
  border:1px solid var(--dbr2);padding:9px 18px;border-radius:100px;
  transition:background .2s,border-color .2s;
}
.tea-replay:hover{background:rgba(245,232,208,.06);border-color:rgba(245,232,208,.35);}

.tea-foot{margin-top:38px;font-size:15px;color:var(--dark-muted);}

/* ════════════════ VOUCHED ════════════════ */
.vouched{padding:120px 0;background:var(--parchment2);}
.vouched-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.vouched-body{font-size:16px;color:var(--muted);line-height:1.7;margin-bottom:16px;max-width:480px;}
.vouched-body strong{color:var(--ink2);font-weight:700;}
.vouched-perks{list-style:none;margin:8px 0 30px;}
.vouched-perks li{
  display:flex;align-items:center;gap:12px;
  font-size:15.5px;color:var(--ink);font-weight:500;
  padding:11px 0;border-bottom:1px solid var(--br2);
}
.vouched-perks li span{font-size:18px;}

.vouched-viz{text-align:center;}
.constellation{width:100%;max-width:360px;margin:0 auto;}
.constellation .nd{fill:var(--terra-light);stroke:var(--terracotta);stroke-width:1.5;}
.constellation .nd.core{fill:var(--terracotta);stroke:var(--gold);stroke-width:2;}
.constellation .nd.sm{fill:#fff;}
.core-label{font-family:var(--sans);font-size:11px;font-weight:600;fill:#fff;letter-spacing:.04em;}
.viz-caption{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);margin-top:18px;}

/* animated constellation: links draw in, nodes breathe */
.constellation .ln{stroke-dasharray:260;stroke-dashoffset:260;animation:drawLink 2.4s var(--ease) forwards;}
.constellation .ln:nth-child(2){animation-delay:.15s;}
.constellation .ln:nth-child(3){animation-delay:.3s;}
.constellation .ln:nth-child(4){animation-delay:.45s;}
.constellation .ln:nth-child(5){animation-delay:.6s;}
.constellation .ln:nth-child(6){animation-delay:.75s;}
.constellation .ln:nth-child(7){animation-delay:.9s;}
.constellation .ln:nth-child(8){animation-delay:1.05s;}
@keyframes drawLink{to{stroke-dashoffset:0;}}
.constellation .nd{transform-origin:center;transform-box:fill-box;animation:nodeBreath 4s ease-in-out infinite;}
.constellation .nd:nth-child(odd){animation-delay:.8s;}
.constellation .nd.core{animation:coreBreath 3.5s ease-in-out infinite;}
@keyframes nodeBreath{0%,100%{transform:scale(1);}50%{transform:scale(1.14);}}
@keyframes coreBreath{0%,100%{transform:scale(1);}50%{transform:scale(1.08);}}

/* ════════════════ STORY ════════════════ */
.story{padding:120px 0;background:var(--parchment);}
.story-wrap{max-width:720px;margin:0 auto;text-align:center;}
.story-quote{margin:8px 0 28px;}
.story-quote p{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:clamp(28px,5vw,46px);line-height:1.2;color:var(--ink2);
  letter-spacing:-.01em;
}
.story-body{max-width:600px;margin:0 auto;}
.story-body p{font-size:17px;color:var(--ink);line-height:1.8;margin-bottom:20px;opacity:.9;}
.story-body em{font-style:italic;color:var(--terracotta);}
.story-sign{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted);margin-top:14px;}

/* ════════════════ JOIN / WAITLIST ════════════════ */
.join{padding:40px 0 120px;background:var(--parchment);}
.join-wrap{max-width:680px;margin:0 auto;}
.join-card{
  background:linear-gradient(180deg,#fff,var(--parchment));
  border:1px solid var(--br);border-radius:var(--radius-lg);
  padding:clamp(32px,5vw,56px);box-shadow:var(--shadow);
  text-align:center;position:relative;overflow:hidden;
}
.join-card::before{
  content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;
  background:radial-gradient(circle,rgba(228,206,158,.5),transparent 70%);
  pointer-events:none;
}
.join-title{font-family:var(--serif);font-size:clamp(28px,5vw,44px);font-weight:700;color:var(--ink2);line-height:1.1;letter-spacing:-.02em;margin:6px 0 14px;}
.join-title em{font-style:italic;color:var(--terracotta);}
.join-sub{font-size:16px;color:var(--muted);max-width:440px;margin:0 auto 28px;line-height:1.6;}

.waitlist-form{max-width:440px;margin:0 auto;}
.field{display:flex;gap:10px;background:#fff;padding:7px;border-radius:100px;box-shadow:var(--shadow-sm);border:1px solid var(--br);}
.wl-input{flex:1;border:none;background:transparent;outline:none;font-family:var(--sans);font-size:16px;padding:0 8px 0 18px;color:var(--ink);min-width:0;}
.wl-input::placeholder{color:var(--muted2);}
.wl-btn{flex-shrink:0;padding:14px 22px;}
.field.invalid{border-color:var(--terracotta);box-shadow:0 0 0 3px rgba(179,78,56,.12);}
.wl-error{color:var(--terracotta);font-size:13.5px;font-weight:500;margin-top:12px;min-height:18px;text-align:left;padding-left:18px;}
.wl-fineprint{font-size:13px;color:var(--muted2);margin-top:14px;}

/* success state */
.join-success-state{position:relative;z-index:2;}
.success-burst{font-size:40px;margin-bottom:8px;animation:burst .7s var(--ease) both;}
@keyframes burst{0%{transform:scale(.3);opacity:0;}60%{transform:scale(1.2);}100%{transform:scale(1);opacity:1;}}
.success-eyebrow{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--sage);margin-bottom:10px;}
.position-line{color:var(--terracotta);font-style:normal;}

.referral-box{
  background:var(--parchment2);border:1px solid var(--br);
  border-radius:var(--radius);padding:24px 22px;margin-top:8px;text-align:left;
}
.ref-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px;}
.ref-link-row{display:flex;gap:8px;margin-bottom:16px;}
.ref-link{
  flex:1;border:1px solid var(--br);background:#fff;border-radius:100px;
  padding:13px 18px;font-family:var(--sans);font-size:14px;color:var(--ink2);
  outline:none;min-width:0;text-overflow:ellipsis;
}
.ref-link:focus{border-color:var(--terracotta);}
.btn-copy{
  background:var(--ink2);color:#fff;border-radius:100px;
  padding:13px 22px;font-weight:600;font-size:14px;flex-shrink:0;
  transition:background .2s,transform .2s;
}
.btn-copy:hover{background:var(--terracotta);transform:translateY(-1px);}
.btn-copy.done{background:var(--sage);}

.share-row{display:flex;gap:9px;margin-bottom:20px;}
.share-btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:13.5px;font-weight:600;color:var(--ink2);
  background:#fff;border:1px solid var(--br);border-radius:12px;
  padding:12px 6px;transition:transform .2s var(--ease),border-color .2s,background .2s;
}
.share-btn:hover{transform:translateY(-2px);}
.share-btn.wa:hover{border-color:var(--sage);background:var(--sage-light);}
.share-btn.ig:hover{border-color:var(--terracotta);background:var(--terra-light);}
.share-btn.native:hover{border-color:var(--gold);background:var(--gold-light);}

.ref-stats{display:flex;gap:14px;}
.ref-stat{
  flex:1;background:#fff;border:1px solid var(--br);border-radius:14px;
  padding:16px;text-align:center;
}
.ref-stat strong{display:block;font-family:var(--serif);font-size:30px;font-weight:700;color:var(--terracotta);line-height:1;margin-bottom:6px;}
.ref-stat span{font-size:12px;color:var(--muted);line-height:1.4;}

.copied-toast{margin-top:16px;font-size:14px;font-weight:600;color:var(--sage);}

/* ════════════════ FAQ ════════════════ */
.faq{padding:30px 0 110px;background:var(--parchment);}
.faq .section-eyebrow,.faq .section-title{text-align:center;display:block;}
.faq .section-title{margin:0 auto 44px;}
.faq-list{max-width:740px;margin:0 auto;}
.faq-item{
  background:#fff;border:1px solid var(--br);border-radius:var(--radius);
  margin-bottom:14px;overflow:hidden;transition:box-shadow .25s;
}
.faq-item[open]{box-shadow:var(--shadow-sm);}
.faq-item summary{
  list-style:none;cursor:pointer;
  font-family:var(--serif);font-size:19px;font-weight:600;color:var(--ink2);
  padding:22px 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-family:var(--sans);font-size:24px;font-weight:400;color:var(--terracotta);transition:transform .3s var(--ease);flex-shrink:0;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{padding:0 26px 24px;font-size:15.5px;color:var(--muted);line-height:1.7;max-width:620px;}

/* ════════════════ FOOTER ════════════════ */
.footer{background:var(--dark);color:var(--dark-cream);padding:70px 0 36px;}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr;gap:48px;padding-bottom:44px;border-bottom:1px solid var(--dbr);}
.footer-word{font-family:var(--serif);font-weight:700;font-size:34px;color:var(--dark-cream);letter-spacing:-.01em;}
.footer-tag{font-family:var(--serif);font-style:italic;font-size:16px;color:var(--dark-muted);margin:12px 0 18px;max-width:340px;line-height:1.5;}
.footer-langs{font-size:12.5px;color:rgba(245,232,208,.3);letter-spacing:.02em;}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.footer-col-h{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--terra-light);font-weight:600;margin-bottom:14px;}
.footer-col a{display:block;font-size:14.5px;color:var(--dark-muted);margin-bottom:10px;transition:color .2s;}
.footer-col a:hover{color:var(--dark-cream);}
.footer-base{display:flex;justify-content:space-between;align-items:center;padding-top:28px;font-size:13px;color:rgba(245,232,208,.3);gap:16px;flex-wrap:wrap;}

/* ════════════════ SCROLL REVEAL ════════════════ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease) var(--d,0s), transform .8s var(--ease) var(--d,0s);}
.reveal.in{opacity:1;transform:none;}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

/* ════════════════ RESPONSIVE ════════════════ */
@media (max-width:980px){
  .cards{grid-template-columns:repeat(2,1fr);}
  .vouched-grid{grid-template-columns:1fr;gap:40px;}
  .vouched-viz{order:-1;}
  .nav-links{display:none;}
}
@media (max-width:640px){
  .wrap{padding:0 18px;}
  .hero{padding:120px 18px 80px;min-height:auto;}
  .hero-form,.field{flex-direction:column;background:transparent;box-shadow:none;border:none;padding:0;gap:12px;}
  .hero-input,.wl-input{background:#fff;border:1px solid var(--br);border-radius:100px;padding:15px 20px;box-shadow:var(--shadow-sm);width:100%;}
  .hero-form .btn,.wl-btn{width:100%;padding:15px;}
  .pitch,.tea,.vouched,.story{padding:80px 0;}
  .cards{grid-template-columns:1fr;}
  .drift{display:none;} /* keep mobile hero clean & fast */
  .share-row{flex-wrap:wrap;}
  .share-btn{flex:1 1 30%;}
  .footer-inner{grid-template-columns:1fr;gap:32px;}
  .footer-cols{grid-template-columns:repeat(3,1fr);}
  .wl-error{padding-left:6px;}
}

/* ════════════════ REDUCED MOTION ════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{opacity:1;transform:none;}
  .drift{opacity:.85;}
  .constellation .ln{stroke-dashoffset:0;}
  .tea-opt-pct{opacity:1;}
}

/* ════════════════ STORE BADGES ════════════════ */
.store-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:18px;}
.store-badge{display:inline-flex;align-items:center;gap:9px;padding:8px 15px;border-radius:13px;
  background:var(--ink2);color:var(--parchment);text-decoration:none;
  transition:transform .2s var(--ease),opacity .2s var(--ease);}
.store-badge:hover{transform:translateY(-2px);opacity:.92;}
.store-ico{color:var(--parchment);flex:none;}
.store-txt{display:flex;flex-direction:column;line-height:1.08;font-family:var(--sans);font-weight:700;font-size:14px;}
.store-txt small{font-weight:500;font-size:9.5px;opacity:.82;letter-spacing:.02em;}

/* ════════════════ PHOTO THIS-OR-THAT ════════════════ */
.tea-opt-photo{width:46px;height:46px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  z-index:2;overflow:hidden;background:rgba(245,232,208,.06);border:1px solid var(--dbr2);}
.tea-opt-photo svg{width:80%;height:80%;}
.tea-card.has-photo .tea-q{margin-bottom:14px;}

/* ════════════════ YOUR CIRCLE (community) ════════════════ */
.circle{background:var(--parchment);padding:96px 0;}
.circle-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
.circle-body{font-size:17px;color:var(--ink);line-height:1.7;margin:18px 0;}
.circle-list{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:13px;}
.circle-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink2);font-weight:500;line-height:1.45;}
.circle-foot{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:16.5px;}
.circle-viz{display:flex;flex-direction:column;gap:12px;padding:8px 0;}
.bubble{max-width:82%;padding:12px 16px;border-radius:18px;font-size:14.5px;line-height:1.42;
  box-shadow:var(--shadow-sm);font-family:var(--sans);}
.bubble-l{align-self:flex-start;background:#fff;color:var(--ink);border-bottom-left-radius:6px;}
.bubble-r{align-self:flex-end;background:var(--terra-light);color:var(--ink2);border-bottom-right-radius:6px;}
.bubble-r.sage{background:var(--sage-light);}
.bubble.small{font-size:13px;opacity:.92;}

/* ════════════════ FOOTER STORES ════════════════ */
.footer-stores{font-size:13px;color:var(--dark-cream);opacity:.72;margin:0 0 12px;}

/* honest referral note (replaces the fake live counter) */
.ref-note{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);text-align:center;}

/* double-opt-in reminder on the success screen */
.confirm-note{margin:6px auto 14px;max-width:360px;text-align:center;font-size:13.5px;line-height:1.5;
  font-weight:600;color:var(--ink2);background:var(--sage-light);border-radius:12px;padding:10px 14px;}

@media (max-width:760px){
  .circle-grid{grid-template-columns:1fr;gap:36px;}
  .circle{padding:72px 0;}
}