/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --bg:          #F5F0E8;
  --surface:     #FAF7F2;
  --surface2:    #FFFFFF;
  --border:      #DDD5C8;
  --divider:     #EAE4DA;
  --text:        #1C1A16;
  --muted:       #6B6560;
  --faint:       #B0A89E;

  --teal:        #0A5F6B;
  --teal-hover:  #084F59;
  --teal-light:  #E0F0F2;
  --orange:      #D4603A;
  --orange-hover:#BC4E2A;
  --green:       #437A22;
  --green-bg:    #EBF5E3;
  --out:         #8B7355;
  --out-bg:      #F0EDE8;

  --r-pill: 9999px;
  --r-lg:   1rem;
  --r-xl:   1.5rem;

  --shadow-sm: 0 1px 4px rgba(28,26,22,.07);
  --shadow-md: 0 4px 20px rgba(28,26,22,.10);
  --shadow-lg: 0 12px 48px rgba(28,26,22,.14);

  --content:    1100px;
  --narrow:     620px;
  --narrow-mid: 800px;
  --ease: 180ms cubic-bezier(.16,1,.3,1);

  --f-display: 'Boska', Georgia, serif;
  --f-body:    'Satoshi', Inter, sans-serif;

  /* nav height — used for scroll-margin */
  --nav-h: 56px;
}

[data-theme="dark"] {
  --bg:       #141210; --surface:  #1A1816; --surface2: #211F1C;
  --border:   #302D28; --divider:  #252320;
  --text:     #E8E3DC; --muted:    #8A837A; --faint:    #564F48;
  --teal:        #4FA8B5; --teal-hover: #3D909C; --teal-light: #1C3236;
  --orange:      #E87A55; --orange-hover: #D5653E;
  --green:       #6DAA45; --green-bg: #1E2E18;
  --out:         #8B7355; --out-bg:   #282420;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.28);
  --shadow-md: 0 4px 20px rgba(0,0,0,.38);
  --shadow-lg: 0 12px 48px rgba(0,0,0,.5);
}

/* ── RESET ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px)}
body{font-family:var(--f-body);font-size:clamp(1rem,.95rem + .25vw,1.125rem);color:var(--text);background:var(--bg);line-height:1.65;min-height:100dvh}
h1,h2,h3{font-family:var(--f-display);line-height:1.15;text-wrap:balance}
p,li{text-wrap:pretty;max-width:68ch}
a{color:inherit;text-decoration:none;transition:color var(--ease)}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
input{font:inherit;color:inherit}
img,svg{display:block;max-width:100%}
::selection{background:var(--teal-light);color:var(--text)}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ── LAYOUT ──────────────────────────────────────────────── */
.container{width:100%;max-width:var(--content);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
.container.narrow{max-width:var(--narrow)}
.narrow-mid{max-width:var(--narrow-mid)}
section[id]{scroll-margin-top:calc(var(--nav-h) + 8px)}
.section-light{padding:clamp(4rem,8vw,7rem) 0;background:var(--bg)}
.section-alt  {padding:clamp(4rem,8vw,7rem) 0;background:var(--surface);border-top:1px solid var(--divider);border-bottom:1px solid var(--divider)}
.section-dark {padding:clamp(4rem,8vw,7rem) 0;background:linear-gradient(160deg,#0A4A54,#0A5F6B)}

/* ── PILL BUTTONS ─────────────────────────────────────────── */
.btn-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.6rem 1.4rem;border-radius:var(--r-pill);
  font-size:.88rem;font-weight:700;font-family:var(--f-body);
  border:none;cursor:pointer;white-space:nowrap;
  transition:background var(--ease),transform var(--ease),box-shadow var(--ease),opacity var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn-pill.btn-lg{padding:.82rem 2rem;font-size:.98rem}
.btn-pill:hover{transform:translateY(-1px)}
.btn-pill:active{transform:translateY(0);opacity:.9}
.btn-pill.full{width:100%}

.btn-orange  {background:var(--orange);color:#fff}
.btn-orange:hover{background:var(--orange-hover);box-shadow:var(--shadow-md)}
.btn-teal    {background:var(--teal);color:#fff}
.btn-teal:hover{background:var(--teal-hover);box-shadow:var(--shadow-md)}
.btn-glass{background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.25);color:#fff}
.btn-glass:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.42)}
.btn-follow-pill{background:var(--teal-light);color:var(--teal);border:1.5px solid var(--teal);padding:.28rem .8rem;font-size:.75rem}
.btn-follow-pill:hover{background:var(--teal);color:#fff}
.btn-following-pill{background:var(--green-bg);color:var(--green);border:1.5px solid var(--green);padding:.28rem .8rem;font-size:.75rem}

/* ── NAV ─────────────────────────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:100;height:var(--nav-h);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--divider);
  transition:box-shadow var(--ease);
}
.nav.scrolled{box-shadow:var(--shadow-sm)}
/* shrink logo text after scroll */
.nav.scrolled .logo-text{opacity:0;width:0;overflow:hidden;margin-left:0}
.nav-inner{
  max-width:var(--content);margin:0 auto;
  padding:0 clamp(1rem,4vw,2rem);
  height:100%;display:flex;align-items:center;gap:1.5rem;
}
.logo{display:flex;align-items:center;gap:.45rem;flex-shrink:0;color:var(--text)}
.brand-logo{display:block;width:158px;height:48px;object-fit:contain;border-radius:.25rem}
.brand-logo-footer{width:138px;height:44px}
.logo-text{font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:-.01em;transition:opacity var(--ease),width .3s,margin var(--ease)}
.nav-links{display:flex;gap:1.75rem;margin-left:.25rem}
.nav-links a{font-size:.85rem;color:var(--muted);font-weight:500;transition:color var(--ease)}
.nav-links a:hover{color:var(--text)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.btn-nav{background:var(--orange);color:#fff;padding:.38rem .95rem;border-radius:var(--r-pill);font-size:.78rem;font-weight:700;transition:background var(--ease),transform var(--ease);white-space:nowrap;flex-shrink:0}
.btn-nav:hover{background:var(--orange-hover);transform:translateY(-1px)}
.btn-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--r-pill);border:1.5px solid var(--border);color:var(--muted);background:transparent;transition:border-color var(--ease),color var(--ease);flex-shrink:0}
.btn-icon:hover{border-color:var(--muted);color:var(--text)}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{position:relative;background:linear-gradient(160deg,#0A4A54 0%,#0A5F6B 55%,#1A7A6E 100%);overflow:hidden;padding-top:clamp(3rem,6vw,5.5rem)}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 55% 45% at 82% 18%,rgba(212,96,58,.22) 0%,transparent 58%),radial-gradient(ellipse 35% 55% at 5% 92%,rgba(255,255,255,.04) 0%,transparent 50%)}
.hero-inner{position:relative;z-index:2;padding-bottom:1.5rem}
.hero-tag{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.9);font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.32rem .85rem;border-radius:var(--r-pill);margin-bottom:1.5rem}
.dot{width:6px;height:6px;background:#5EDBA5;border-radius:50%;animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}
.hero-heading{font-size:clamp(3rem,6.5vw,6.5rem);font-family:var(--f-display);font-weight:500;color:#fff;line-height:1.06;letter-spacing:-.025em;margin-bottom:1.1rem}
.hero-sub{font-size:clamp(.95rem,1.4vw,1.15rem);color:rgba(255,255,255,.74);max-width:58ch;line-height:1.7;margin-bottom:1.75rem}
.hero-ctas{display:flex;gap:.7rem;flex-wrap:wrap;margin-bottom:1.5rem}
.hero-pills{display:flex;gap:.45rem;flex-wrap:wrap}
.info-pill{background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);font-size:.72rem;font-weight:600;padding:.28rem .75rem;border-radius:var(--r-pill)}

/* ── MARKET CARD ─────────────────────────────────────────── */
.card-wrap{position:relative;z-index:2;padding-top:1.5rem}
.market-card{background:var(--surface2);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:var(--shadow-lg);overflow:hidden;max-width:760px;margin:0 auto;width:100%}
.card-header{padding:1.1rem 1.5rem .9rem;border-bottom:1px solid var(--divider);background:var(--surface)}
.card-meta{display:flex;align-items:center;gap:.65rem;margin-bottom:.35rem}
.live-badge{display:inline-flex;align-items:center;gap:.3rem;background:var(--green-bg);color:var(--green);font-size:.68rem;font-weight:700;padding:.18rem .55rem;border-radius:var(--r-pill)}
.live-dot{width:5px;height:5px;background:var(--green);border-radius:50%;animation:blink 1.5s ease-in-out infinite}
.card-date{font-size:.72rem;color:var(--muted)}
.card-title{font-family:var(--f-display);font-size:1.3rem;font-weight:600;color:var(--text)}
.card-helper{font-size:.72rem;color:var(--muted);max-width:none;margin-top:.12rem}
.card-definition{font-size:.72rem;color:var(--faint);max-width:48rem;margin-top:.15rem}
.vendor-list{padding:.6rem .85rem;display:flex;flex-direction:column;gap:.35rem}
.vendor-row{display:flex;align-items:center;gap:.65rem;padding:.6rem .8rem;border-radius:.55rem;background:var(--surface);border:1px solid var(--divider);transition:background var(--ease)}
.vendor-row.out{opacity:.5}
.v-avatar{width:36px;height:36px;border-radius:.45rem;display:flex;align-items:center;justify-content:center;font-size:1.15rem;flex-shrink:0}
.v-info{flex:1;min-width:0}
.v-name{display:block;font-size:.85rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-sub{display:block;font-size:.73rem;color:var(--muted);margin-top:1px}
.out-chip{flex-shrink:0;font-size:.7rem;font-weight:700;color:var(--out);background:var(--out-bg);padding:.18rem .6rem;border-radius:var(--r-pill);white-space:nowrap}
.card-footer{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.5rem;border-top:1px solid var(--divider);background:var(--surface)}
.card-updated{font-size:.7rem;color:var(--faint)}
.card-all{font-size:.82rem;color:var(--teal);font-weight:700}
.card-all:hover{color:var(--teal-hover)}
.sms-capture{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;border-top:1px solid var(--divider);background:var(--surface2)}
.sms-capture-copy{display:flex;flex-direction:column;gap:.12rem;min-width:0}
.sms-capture-copy strong{font-size:.86rem;color:var(--text)}
.sms-capture-copy span{font-size:.72rem;color:var(--muted);line-height:1.45}
.sms-capture-copy .sms-terms{font-size:.66rem;color:var(--faint)}
.sms-signup{display:flex;align-items:center;gap:.4rem;flex:0 0 310px}
.sms-signup .form-input{padding:.48rem .95rem;font-size:.8rem}
.sms-signup .btn-pill{padding:.5rem 1rem;font-size:.8rem}
.form-trap{display:none}

/* ── SECTION LABELS ─────────────────────────────────────── */
.section-tag{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--teal);margin-bottom:.9rem;font-family:var(--f-body)}
.section-tag.light{color:rgba(255,255,255,.6)}
.section-heading{font-size:clamp(1.65rem,3.2vw,2.6rem);font-family:var(--f-display);font-weight:500;color:var(--text);margin-bottom:1.1rem;line-height:1.2}
.section-heading.light{color:#fff}
.section-body{font-size:.97rem;color:var(--muted);line-height:1.72;margin-bottom:.7rem}
.section-header-center{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:3rem}

/* ── PROBLEM CARDS ───────────────────────────────────────── */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem;
  margin-top: 1.75rem;
}
.problem-item {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 1.35rem;
}
.problem-item strong {
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: .45rem;
}
.problem-item p {
  font-size: .84rem;
  line-height: 1.62;
  color: var(--muted);
  max-width: none;
}

/* ── HOW IT WORKS ─────────────────────────────────────────── */
.steps{display:flex;align-items:flex-start;gap:.9rem}
.step{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.75rem 1.5rem}
.step-num{font-family:var(--f-display);font-size:1.35rem;font-weight:700;color:var(--teal-light);margin-bottom:.85rem;line-height:1;display:block}
[data-theme="dark"] .step-num{color:var(--teal)}
.step-title{font-family:var(--f-display);font-size:1.05rem;font-weight:600;color:var(--text);margin-bottom:.5rem}
.step-body{font-size:.87rem;color:var(--muted);line-height:1.65;max-width:none}
.step-arrow{font-size:1.1rem;color:var(--faint);padding-top:3.5rem;flex-shrink:0}

/* ── SPLIT ───────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.feat-list{list-style:none;display:flex;flex-direction:column;gap:1.1rem;margin-bottom:1.75rem}
.feat-list li{display:flex;gap:.8rem;align-items:flex-start}
.feat-icon{font-size:1.05rem;flex-shrink:0;margin-top:2px}
.feat-list strong{display:block;font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:2px}
.feat-list p{font-size:.85rem;color:var(--muted);max-width:none;line-height:1.6}
.form-label{font-size:.85rem;font-weight:700;color:var(--text);display:block;margin-bottom:.6rem}
.form-row{display:flex;gap:.38rem}
.form-input{flex:1;background:var(--surface2);border:1.5px solid var(--border);border-radius:var(--r-pill);padding:.6rem 1.15rem;font-size:.88rem;color:var(--text);outline:none;transition:border-color var(--ease),box-shadow var(--ease)}
.form-input:focus{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-light)}
.form-input::placeholder{color:var(--faint)}
.form-note{font-size:.72rem;color:var(--faint);margin-top:.55rem}
.light-note{color:rgba(255,255,255,.38)}

/* notification stack */
.notifs{display:flex;flex-direction:column;gap:.55rem}
.notif{display:flex;align-items:flex-start;gap:.7rem;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-xl);padding:.85rem 1rem;box-shadow:var(--shadow-sm);transition:transform .25s ease,box-shadow .25s ease}
.notif:hover{transform:translateX(-3px);box-shadow:var(--shadow-md)}
.n1{transform:translateX(0)}.n2{transform:translateX(10px)}.n3{transform:translateX(20px)}
.notif-ico{font-size:1.25rem;flex-shrink:0}
.notif-body{display:flex;flex-direction:column;gap:1px}
.notif-body strong{font-size:.82rem;color:var(--text)}
.notif-body span{font-size:.75rem;color:var(--muted)}
.notif-time{color:var(--faint)!important}

/* ── VENDOR COMPACT ─────────────────────────────────────── */
.compact-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center}
.compact-body{font-size:.97rem;color:var(--muted);line-height:1.72;margin-bottom:1.25rem;max-width:48ch}
.check-list{list-style:none;display:flex;flex-direction:column;gap:.6rem;margin-bottom:2rem}
.check-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.87rem;color:var(--muted);max-width:none}
.chk{color:var(--green);font-weight:700;flex-shrink:0;margin-top:1px}
.vendor-note-block {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.vendor-note-block p {
  font-size: .88rem;
  color: var(--muted);
  max-width: 28rem;
}
.vend-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-md)}
.vc-top{display:flex;align-items:center;gap:.8rem;padding:1.1rem 1.2rem;border-bottom:1px solid var(--divider);background:var(--surface);flex-wrap:wrap}
.vc-ico{font-size:1.85rem;flex-shrink:0}
.vc-meta{flex:1}
.vc-meta strong{display:block;font-size:.97rem;font-weight:700;color:var(--text)}
.vc-meta span{font-size:.75rem;color:var(--muted)}
.vc-here{background:var(--green-bg);color:var(--green);font-size:.7rem;font-weight:700;padding:.18rem .6rem;border-radius:var(--r-pill);white-space:nowrap}
.vc-drop{padding:1rem 1.2rem;font-size:.85rem;color:var(--muted);line-height:1.65;border-bottom:1px solid var(--divider);max-width:none}
.vc-bottom{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.2rem}
.vc-subs{font-size:.8rem;color:var(--muted)}
.vc-subs strong{color:var(--text);font-size:1.1rem;font-family:var(--f-display)}

/* ── WAITLIST ────────────────────────────────────────────── */
.waitlist-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.waitlist-sub{font-size:.92rem;color:rgba(255,255,255,.68);line-height:1.68;max-width:38ch;margin-top:.2rem}
.waitlist-form{background:var(--surface2);border-radius:var(--r-xl);padding:1.75rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:var(--shadow-lg)}
.form-group{display:flex;flex-direction:column;gap:.35rem}
.form-group label{font-size:.82rem;font-weight:700;color:var(--text)}
.waitlist-form .form-input{border-radius:.6rem}

/* ── MARKET SECTION ──────────────────────────────────────── */
.market-ctas{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap;margin-top:1.75rem}
.market-note{font-size:.8rem;color:var(--muted)}
.pilot-intake{margin-top:1.75rem;max-width:680px}
.pilot-intake .form-row{align-items:center}
.pilot-intake .form-input{min-width:0}
.pilot-intake .btn-pill{flex-shrink:0}

/* ── FOOTER ─────────────────────────────────────────────── */
.footer{background:var(--surface);border-top:1px solid var(--divider);padding:3rem 0 1.75rem}
.footer-inner{display:flex;justify-content:space-between;gap:2.5rem;margin-bottom:2rem;flex-wrap:wrap}
.footer-brand{display:flex;flex-direction:column;gap:.55rem}
.footer-tag{font-size:.82rem;color:var(--muted);max-width:28ch}
.footer-loc{font-size:.72rem;color:var(--faint)}
.footer-cols{display:flex;gap:2.5rem}
.footer-col{display:flex;flex-direction:column;gap:.55rem}
.col-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin-bottom:.2rem}
.footer-col a{font-size:.82rem;color:var(--muted);transition:color var(--ease)}
.footer-col a:hover{color:var(--teal)}
.footer-bottom{display:flex;justify-content:space-between;padding-top:1.25rem;border-top:1px solid var(--divider);font-size:.72rem;color:var(--faint);flex-wrap:wrap;gap:.4rem}

/* ── FADE-UP ANIMATIONS ──────────────────────────────────── */
.fade-up{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.fade-up.visible{opacity:1;transform:translateY(0)}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:900px){
  .split,.compact-split,.waitlist-wrap{grid-template-columns:1fr;gap:2.25rem}
  .problem-grid{grid-template-columns:1fr}
  .steps{flex-direction:column;gap:.9rem}
  .step-arrow{transform:rotate(90deg);align-self:center;padding-top:0}
  .n2,.n3{transform:translateX(0)}
  .notif:hover{transform:none}
  .sms-capture{align-items:stretch;flex-direction:column}
  .sms-signup{flex:1 1 auto}
  .pilot-intake .form-row{align-items:stretch;flex-direction:column}
  .pilot-intake .btn-pill{width:100%}
}
@media(max-width:640px){
  .nav-links{display:none}
  .hero-heading{font-size:clamp(2.5rem,10vw,3.75rem)}
  .section-heading{font-size:clamp(1.55rem,5.5vw,2.3rem)}
  .hero-ctas{flex-direction:column;align-items:flex-start}
  .btn-pill.btn-glass{align-self:flex-start}
  .form-row{flex-direction:column}
  .form-row .btn-pill{width:100%}
  .sms-signup{flex-direction:column;align-items:stretch}
  .sms-signup .btn-pill{width:100%}
  .footer-cols{gap:1.75rem}
  .waitlist-form{padding:1.25rem}
}

/* split-body — intro paragraph in shopper section */
.split-body{font-size:.97rem;color:var(--muted);line-height:1.72;margin-bottom:1.5rem;max-width:52ch}

/* ── SMS ALERT BUTTON ────────────────────────────────────── */
/* replaces generic "Follow" pill — communicates text alert action */
.btn-sms-alert {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  padding: .3rem .85rem .3rem .7rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--teal);
  background: var(--teal-light);
  color: var(--teal);
  font-size: .75rem;
  font-weight: 700;
  font-family: var(--f-body);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn-sms-alert:hover {
  background: var(--teal);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(10,95,107,.22);
}
.btn-sms-alert:active { transform: translateY(0); }

.sms-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.sms-label {
  line-height: 1;
}

/* "Alerts on" — active/subscribed state */
.btn-sms-on {
  background: var(--green-bg);
  border-color: var(--green);
  color: var(--green);
}
.btn-sms-on:hover {
  background: var(--green-bg);
  color: var(--green);
  border-color: var(--green);
  transform: none;
  box-shadow: none;
  cursor: default;
}

/* larger variant for vendor profile card */
.btn-sms-lg {
  padding: .42rem 1.1rem .42rem .9rem;
  font-size: .82rem;
  gap: .45rem;
}
.btn-sms-lg .sms-icon svg { width: 15px; height: 15px; }

/* hero meta line — plain text, no bubbles, sits above CTAs */
.hero-meta {
  font-size: .8rem;
  color: rgba(255,255,255,.55);
  font-weight: 500;
  letter-spacing: .01em;
  margin-bottom: 1.5rem;
  max-width: none;
}

/* single column — used when visual column is removed */
.split-single { max-width: 620px; }

.compact-single { max-width: 620px; }

/* ── EARLY ACCESS SIGNUP BLOCK ───────────────────────────── */
.early-access-block {
  margin-top: 1.75rem;
  padding: 1.5rem 1.75rem;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.early-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: .5rem;
  max-width: none;
}
.early-heading {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 500;
  color: var(--text);
  line-height: 1.25;
  margin-bottom: .65rem;
}
.early-sub {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1.1rem;
  max-width: 48ch;
}

/* ── HERO TOP ROW — tag + CTAs inline ───────────────────── */
.hero-top-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 1.5rem;
}
.hero-top-ctas {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}
.btn-pill.btn-sm {
  padding: .38rem 1rem;
  font-size: .78rem;
}

/* ── CARD HEADER ACTION BUTTONS ─────────────────────────── */
.btn-card-action {
  padding: .22rem .7rem .22rem .55rem;
  font-size: .7rem;
  gap: .3rem;
}
.btn-card-action .sms-icon svg { width: 11px; height: 11px; }

.btn-card-vendor {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1.5px solid var(--border);
  color: var(--muted);
  font-size: .7rem;
  font-weight: 700;
  font-family: var(--f-body);
  padding: .22rem .7rem;
  border-radius: var(--r-pill);
  transition: border-color var(--ease), color var(--ease), background var(--ease);
  white-space: nowrap;
  text-decoration: none;
}
.btn-card-vendor:hover {
  border-color: var(--teal);
  color: var(--teal);
  background: var(--teal-light);
}

/* card meta row spacing */
.card-meta { gap: .5rem; flex-wrap: wrap; }

/* hero CTAs back in hero */
.hero-ctas { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.5rem; }