/* ==================================================================
   Beta counter (founder approved Oct 28, 2026).
   Home page (index.html, <html data-beta="2snap">):
     desktop >=1024 with a mouse: a full-screen second page with the stats; one scroll snaps to it (beta-snap.js).
     phones, iPad and windows under 1024: slim top bar that links to beta.html.
   beta.html: the same full-screen panel (.hgb-page).
   Footer "Beta" link: desktop only (hidden under 1024px and on touch tablets).
   stats.js fills the numbers from /api/stats; with no stats only the beta text shows.
   ================================================================== */
.hgb{display:none;--hgb-ink:#151517;--hgb-mute:#6E6E73;--hgb-line:#ECECEE;--hgb-soft:#F6F6F7;--hgb-track:#E6E6EA}
.hgb [hidden]{display:none!important}
.hgb.is-loading [data-hg-num]{visibility:hidden}
.hgb b{font-weight:600;font-variant-numeric:tabular-nums}

/* shared meter (same build as the approved login Meter cards) */
.hgb-meter{height:10px;border-radius:10px;background:var(--hgb-track);overflow:hidden}
.hgb-meter i{display:block;width:0;height:100%;border-radius:10px;background:var(--pink);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.hgb-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);flex:none}
.hgb-eyebrow{font:700 12px/1 var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}
.hgb-ml{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:600 18px/1 var(--body);color:var(--ink)}
.hgb-ml em{font-style:normal;font-weight:500;color:var(--hgb-mute);font-variant-numeric:tabular-nums}
.hgb-upd{font:400 13px/1.4 var(--body);color:#8E8E93}
.hgb-upd:empty{display:none}
.hgb-sep{margin:0 .6em;color:#C7C7CC}

/* 1) Slim top bar across the site */
.hgb1{border-bottom:1px solid var(--hgb-line);background:#fff}
.hgb1-in{height:40px;display:flex;align-items:center;justify-content:center;gap:18px;font:500 14px/1 var(--body);color:var(--hgb-ink)}
.hgb1-beta{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.hgb1-goal,.hgb1-msg{color:var(--hgb-mute)}
.hgb1-goal b,.hgb1-msg b{color:var(--ink)}
.hgb1 .hgb-meter{width:120px;height:6px}
.hgb1-goal::before,.hgb1-msg::before{content:"";display:inline-block;width:1px;height:14px;margin-right:18px;vertical-align:-2px;background:var(--hgb-line)}
.hgb1-msg::before{display:none}
@media (max-width:760px){
  .hgb1-in{height:36px;gap:10px;font-size:13px;padding-inline:16px}
  .hgb1-msg{display:none}
  .hgb1-goal::before{margin-right:10px}
  .hgb1 .hgb-meter{width:56px;height:5px}
}

/* 2) Section below the hero: big numbers + meter */
.hgb2{padding:clamp(72px,8vw,120px) 0 clamp(96px,9vw,140px);border-top:1px solid var(--hgb-line)}
.hgb2-h{margin-top:20px;max-width:14em;font:900 clamp(44px,5.2vw,76px)/1 var(--display);letter-spacing:-.045em;color:var(--ink);text-wrap:balance}
.hgb2-h span{color:var(--pink)}
.hgb2-sub{margin-top:22px;max-width:34em;font:400 clamp(19px,1.6vw,23px)/1.45 var(--body);color:var(--hgb-ink)}
.hgb2-grid{margin-top:clamp(48px,5vw,72px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hgb-line)}
.hgb2-n{padding:32px 32px 0 0}
.hgb2-n + .hgb2-n{padding-left:32px;border-left:1px solid var(--hgb-line)}
.hgb2-n b{display:block;font:900 clamp(56px,6.4vw,96px)/1 var(--display);letter-spacing:-.05em;color:var(--ink)}
.hgb2-n span{display:block;margin-top:14px;font:500 18px/1.3 var(--body);color:var(--hgb-mute)}
.hgb2-m{margin-top:clamp(48px,5vw,64px)}
.hgb2 .hgb-meter{margin-top:14px;height:12px}
.hgb2 .hgb-upd{margin-top:14px}
@media (max-width:760px){
  .hgb2{padding:56px 0 64px}
  .hgb2-h{font-size:40px;margin-top:16px}
  .hgb2-sub{font-size:18px;margin-top:16px}
  .hgb2-grid{grid-template-columns:1fr 1fr;margin-top:36px}
  .hgb2-n{padding:22px 16px 22px 0}
  .hgb2-n + .hgb2-n{padding-left:16px}
  .hgb2-n:nth-child(3){grid-column:1 / -1;padding-left:0;border-left:0;border-top:1px solid var(--hgb-line)}
  .hgb2-n b{font-size:44px}
  .hgb2-n span{margin-top:8px;font-size:15px}
  .hgb2-m{margin-top:20px}
  .hgb-ml{font-size:16px}
}


@media (prefers-reduced-motion:reduce){.hgb-meter i{transition:none}}

/* ==================================================================
   ?beta=2snap (founder combo, Oct 28 2026)
   Desktop (>=1024, mouse): option 2 as a full-screen second page. One scroll snaps to it, one scroll up snaps back.
   Phones, iPad, and windows under 1024: option 1 top bar only, which links to beta.html.
   beta.html reuses the same full-screen panel (.hgb-page).
   ================================================================== */
.hgb-chev{display:none;width:7px;height:12px;flex:none;color:#AEAEB2}
.hgb-foot-beta{display:none}
html[data-beta="2snap"] .hgb-foot-beta,.beta-page .hgb-foot-beta{display:inline}
.beta-page .hgb-foot-beta{color:var(--ink)!important}

/* phones, iPad, narrow windows: top bar (option 1), tappable, opens beta.html */
html[data-beta="2snap"] .hgb1{display:block}
html[data-beta="2snap"] .hgb2{display:none}
a.hgb1-in{color:inherit}
html[data-beta="2snap"] .hgb-chev{display:block}
a.hgb1-in:hover .hgb1-beta{color:var(--pink)}
@media (min-width:761px){html[data-beta="2snap"]:not([data-tmenu]) .hero{min-height:calc(100vh - var(--nav-h) - 41px)}}
@media (max-width:760px){
  html[data-beta="2snap"]{--m-nav:calc(64px + 37px)}
  html[data-beta="2snap"] .nav{height:64px}
  html[data-beta="2snap"] .hero{height:calc(100vh - 101px);height:calc(100svh - 101px)}
}
/* iPad portrait: give the bar's 41px back by shrinking the phone and hero */
@media (min-width:761px) and (orientation:portrait){
  html[data-beta="2snap"][data-tmenu] .hero{height:calc(100vh - var(--t-nav) - 41px);height:calc(100svh - var(--t-nav) - 41px)}
  html[data-beta="2snap"][data-tmenu] .phone-slot{height:calc(var(--t-ph) - 41px);width:calc((var(--t-ph) - 41px) * 414 / 874)}
}
/* iPad landscape (desktop split layout): same, the hero just gets 41px shorter */
@media (min-width:761px) and (orientation:landscape){
  html[data-beta="2snap"][data-tmenu] .hero{min-height:calc(100vh - var(--nav-h) - 41px)}
}

/* desktop: full-page snap */
@media (min-width:1024px){
  html[data-beta="2snap"]:not([data-tmenu]) .hgb1{display:none}
  html[data-beta="2snap"]:not([data-tmenu]) .hgb2{display:flex}
  html[data-beta="2snap"]:not([data-tmenu]) .hero{min-height:calc(100vh - var(--nav-h));min-height:calc(100dvh - var(--nav-h))}
  html[data-beta="2snap"]:not([data-tmenu]){scroll-snap-type:y mandatory}
  html[data-beta="2snap"]:not([data-tmenu]) .nav,
  html[data-beta="2snap"]:not([data-tmenu]) .hgb2{scroll-snap-align:start;scroll-snap-stop:always}
  html[data-beta="2snap"]:not([data-tmenu]) .hgb2{height:100vh;height:100dvh;border-top:0}
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){html[data-beta="2snap"]:not([data-tmenu]){scroll-behavior:smooth}}

/* the full-screen panel (desktop snap panel + beta.html) */
.hgb-page{display:flex}
@media (min-width:1024px){
  html[data-beta="2snap"] .hgb2,.hgb-page{flex-direction:column;justify-content:center;padding:0 0 64px;
    --pv:min(1vh,1dvh)}
  html[data-beta="2snap"] .hgb2 > .wrap,.hgb-page > .wrap{width:100%}
  html[data-beta="2snap"] .hgb-eyebrow,.hgb-page .hgb-eyebrow{font-size:14px}
  html[data-beta="2snap"] .hgb2-h,.hgb-page .hgb2-h{margin-top:min(2.6vh,24px);max-width:none;font-size:min(6.6vw,10.4vh,124px);line-height:.96;letter-spacing:-.05em}
  html[data-beta="2snap"] .hgb2-sub,.hgb-page .hgb2-sub{margin-top:min(2.6vh,26px);font-size:min(1.9vw,3vh,28px);max-width:36em}
  html[data-beta="2snap"] .hgb2-grid,.hgb-page .hgb2-grid{margin-top:min(6vh,64px)}
  html[data-beta="2snap"] .hgb2-n,.hgb-page .hgb2-n{padding-top:min(3.6vh,40px)}
  html[data-beta="2snap"] .hgb2-n b,.hgb-page .hgb2-n b{font-size:min(8.4vw,14vh,150px)}
  html[data-beta="2snap"] .hgb2-n span,.hgb-page .hgb2-n span{margin-top:min(1.8vh,18px);font-size:min(1.5vw,2.4vh,22px)}
  html[data-beta="2snap"] .hgb2-m,.hgb-page .hgb2-m{margin-top:min(6vh,64px)}
  html[data-beta="2snap"] .hgb-ml,.hgb-page .hgb-ml{font-size:min(1.5vw,2.4vh,22px)}
  html[data-beta="2snap"] .hgb2 .hgb-meter,.hgb-page .hgb-meter{height:14px;margin-top:16px}
  html[data-beta="2snap"] .hgb2 .hgb-upd,.hgb-page .hgb-upd{font-size:14px}
  /* no numbers: heading + line only, a touch larger so it still reads as a full page */
  html[data-beta="2snap"] .hgb2.is-off .hgb2-sub,.hgb-page.is-off .hgb2-sub{font-size:min(2.2vw,3.4vh,32px)}
}

/* beta.html: header, a full-screen panel, footer, all in one screen */
.beta-page{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.beta-page > main{flex:1;display:flex}
.beta-page .hgb-page{flex:1;border-top:0}
@media (max-width:760px){
  .beta-page{min-height:100svh}
  .beta-page .hgb-page{flex-direction:column;justify-content:center;padding:20px 0 28px}
  .beta-page .hgb2-h{font-size:clamp(40px,12vw,52px);margin-top:14px}
  .beta-page .hgb2-sub{font-size:18px}
  .beta-page .hgb2-grid{margin-top:32px}
  .beta-page .hgb2-n b{font-size:clamp(44px,13vw,56px)}
}
html .links .m-menu-legal .hgb-foot-beta{display:none}
html[data-beta="2snap"] .links .m-menu-legal .hgb-foot-beta,.beta-page .links .m-menu-legal .hgb-foot-beta{display:inline}
@media (min-width:1024px){html[data-beta="2snap"]:not([data-tmenu]) .hgb2{position:relative;z-index:2;background:var(--bg,#fff)}}
@media (min-width:1024px){html[data-beta="2snap"]:not([data-tmenu]) .site-foot{z-index:3}}
/* Founder, Oct 28: on phones, iPad and the top-bar breakpoint there is no Beta link in the menu or footer.
   The only way to beta.html there is tapping the top bar. Desktop footer keeps its Beta link. */
@media (max-width:1023px){html .hgb-foot-beta,html .links .m-menu-legal .hgb-foot-beta{display:none!important}}
html[data-tmenu] .hgb-foot-beta,html[data-tmenu] .links .m-menu-legal .hgb-foot-beta{display:none!important}
/* beta.html between phone and desktop (iPad portrait): keep the panel centered too */
.beta-page .hgb-page{flex-direction:column;justify-content:center}
.beta-page .hgb-page > .wrap{width:100%}

/* other pages (no data-beta): footer Beta link on desktop only */
@media (min-width:1024px){html:not([data-tmenu]) .site-foot .hgb-foot-beta{display:inline}}

/* Founder, Oct 28: beta.html on iPad and touch tablets (portrait and landscape) uses the phone arrangement:
   heading, line, friends + messages side by side, to go below, then the meter. Scaled up from the phone
   sizes (390 wide) by --u for display type and spacing and --t for small text. Desktop keeps 3 across. */
@media (min-width:761px){
  html[data-tmenu] .beta-page .hgb-page{--u:min(.22vw,.15vh);--t:max(1px,min(.15vw,.115vh));padding:calc(20 * var(--u)) 0 calc(28 * var(--u))}
  html[data-tmenu] .beta-page .hgb-page .hgb-eyebrow{font-size:calc(13 * var(--t))}
  html[data-tmenu] .beta-page .hgb-page .hgb2-h{margin-top:calc(14 * var(--u));max-width:9em;font-size:calc(46.8 * var(--u));line-height:1;letter-spacing:-.045em}
  html[data-tmenu] .beta-page .hgb-page .hgb2-sub{margin-top:calc(16 * var(--u));max-width:34em;font-size:calc(18 * var(--t))}
  html[data-tmenu] .beta-page .hgb-page.is-off .hgb2-sub{font-size:calc(18 * var(--t))}
  html[data-tmenu] .beta-page .hgb-page .hgb2-grid{grid-template-columns:1fr 1fr;margin-top:calc(32 * var(--u))}
  html[data-tmenu] .beta-page .hgb-page .hgb2-n{padding:calc(22 * var(--u)) calc(16 * var(--u)) calc(22 * var(--u)) 0}
  html[data-tmenu] .beta-page .hgb-page .hgb2-n + .hgb2-n{padding-left:calc(16 * var(--u))}
  html[data-tmenu] .beta-page .hgb-page .hgb2-n:nth-child(3){grid-column:1 / -1;padding-left:0;border-left:0;border-top:1px solid var(--hgb-line)}
  html[data-tmenu] .beta-page .hgb-page .hgb2-n b{font-size:calc(50.7 * var(--u))}
  html[data-tmenu] .beta-page .hgb-page .hgb2-n span{margin-top:calc(8 * var(--u));font-size:calc(15 * var(--t))}
  html[data-tmenu] .beta-page .hgb-page .hgb2-m{margin-top:calc(20 * var(--u))}
  html[data-tmenu] .beta-page .hgb-page .hgb-ml{font-size:calc(16 * var(--t))}
  html[data-tmenu] .beta-page .hgb-page .hgb-meter{height:calc(12 * var(--t));margin-top:calc(14 * var(--u))}
  html[data-tmenu] .beta-page .hgb-page .hgb-upd{margin-top:calc(14 * var(--u));font-size:calc(13 * var(--t))}
}
@media (min-width:761px) and (orientation:landscape){html[data-tmenu] .beta-page .hgb-page{--u:min(.22vw,.13vh)}}