/* Bevel-style homepage: real app screens in phones, floating HTML cards, parallax */
@font-face { font-family:"Outfit"; src:url("../fonts/Outfit-Variable.woff2") format("woff2"); font-weight:100 900; font-display:swap; }
.bv { --green:#08563B; --lime:#D4FF00; --ink:#111413; --muted:#5F6A65; --line:#E6EAE7; color:var(--ink); font:400 17px/1.5 "Outfit", var(--ui); }
.bv *, .bv *::before { box-sizing:border-box; }
.bv h1, .bv h2, .bv h3 { margin:0; font-family:var(--display); font-weight:500; letter-spacing:-.02em; line-height:1.02; color:var(--ink); }
.bv p { margin:0; }
.bv img { display:block; max-width:100%; }
.bv-hero h1 { padding-top:20px; }

.bv-wrap { width:min(1400px, calc(100% - 32px)); margin:0 auto; }


/* Phone */
.bv-phone { position:relative; width:300px; aspect-ratio:603/1311; border-radius:50px; padding:9px; background:linear-gradient(145deg,#3a3f3d,#121413); box-shadow:0 40px 80px -30px rgba(6,42,30,.45), inset 0 0 0 1px rgba(255,255,255,.12); }
.bv-phone img { width:100%; height:100%; object-fit:cover; object-position:top; border-radius:41px; }

/* Floating app cards (real HTML) */
.bv-float { position:absolute; z-index:3; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.9); border-radius:23px; box-shadow:0 24px 50px -24px rgba(6,42,30,.4); padding:16px 18px; font-family:"Outfit"; }
.bv-float small { display:block; color:var(--muted); font-size:13px; }
.bv-float b { font-weight:500; }
.bv-chip { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; font-weight:500; font-size:15px; }
.bv-sticker { width:64px; filter:drop-shadow(0 4px 4px rgba(0,0,0,.18)); }

/* Hero */
.bv-hero { position:relative; min-height:100vh; padding:130px 0 0; text-align:center; overflow:hidden; background:radial-gradient(70% 45% at 50% 100%, #E6FF8A 0%, rgba(207,253,229,.9) 35%, rgba(255,255,255,0) 75%), #fff; }
.bv-hero h1 { font-size:clamp(46px, 7vw, 104px); }
.bv-hero p { margin:20px auto 0; max-width:30ch; font-size:clamp(18px,1.6vw,22px); color:var(--muted); }
.bv-hero .bv-btn { display:inline-block; margin-top:28px; padding:16px 28px; border-radius:999px; background:var(--green); color:#fff; font-weight:500; text-decoration:none; }
.bv-hero-stage { position:relative; width:min(760px,100%); height:560px; margin:56px auto 0; }
.bv-hero-stage .bv-phone { position:absolute; left:50%; translate:-50% 0; top:0; width:310px; }
.bv-hero .bv-q { left:2%; top:90px; width:250px; text-align:left; background:var(--green); color:#fff; border-color:var(--green); }
.bv-hero .bv-q small { color:var(--lime); letter-spacing:.08em; text-transform:uppercase; font-weight:500; font-size:12px; }
.bv-hero .bv-q p { margin:8px 0 0; color:#fff; font-size:20px; line-height:1.3; max-width:none; }
.bv-hero .bv-q mark { background:var(--lime); color:var(--green); border-radius:8px; padding:0 .2em; }
.bv-hero .bv-who { right:1%; top:230px; display:flex; align-items:center; gap:12px; text-align:left; }
.bv-hero .bv-who img { width:44px; height:44px; border-radius:50%; object-fit:cover; border:2.5px solid #fff; box-shadow:0 0 0 2px var(--lime); }
.bv-hero .bv-s1 { position:absolute; z-index:4; right:16%; top:60px; rotate:8deg; }
.bv-hero .bv-s2 { position:absolute; z-index:4; left:18%; top:380px; rotate:-10deg; }

/* Section heads */
.bv-sec { padding:clamp(72px,9vw,140px) 0 0; }
.bv-sec-head { text-align:center; max-width:760px; margin:0 auto 48px; }
.bv-sec-head h2 { font-size:clamp(38px,5vw,72px); }
.bv-sec-head p { margin-top:16px; color:var(--muted); font-size:clamp(17px,1.4vw,20px); }

/* Three feature cards */
.bv-trio { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.bv-feat { position:relative; height:720px; overflow:hidden; border-radius:36px; padding:44px 40px 0; background:linear-gradient(180deg,#EEF3F0 0%,#F4F8F5 100%); }
.bv-feat:nth-child(1) { background:linear-gradient(180deg,#F1FFD0 0%,#F8FFE9 100%); }
.bv-feat:nth-child(2) { background:linear-gradient(180deg,#E9FBF1 0%,#F3FDF8 100%); }
.bv-feat:nth-child(3) { background:linear-gradient(180deg,#EEF2F7 0%,#F6F8FB 100%); }
.bv-feat h3 { font-size:clamp(36px,3vw,48px); }
.bv-feat p { margin-top:14px; color:var(--muted); font-size:clamp(18px,1.5vw,22px); line-height:1.35; max-width:22ch; }
.bv-feat .bv-phone { position:absolute; left:50%; translate:-50% 0; top:330px; width:290px; }
.bv-feat .bv-float { z-index:4; }
.bv-f1 .bv-float { left:22px; top:560px; display:flex; align-items:center; gap:10px; }
.bv-f1 .bv-float i { width:22px; height:22px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--green); }
.bv-f2 .bv-float { right:18px; top:470px; display:grid; gap:8px; }
.bv-f2 .bv-float span { display:flex; align-items:center; gap:10px; font-weight:500; }
.bv-f2 .bv-float img { width:50px; }
.bv-f3 .bv-float { left:20px; right:20px; top:590px; display:flex; gap:12px; padding:0; background:none; border:0; box-shadow:none; backdrop-filter:none; }
.bv-f3 .bv-float > div { flex:1; background:rgba(255,255,255,.95); border-radius:20px; padding:14px 16px; box-shadow:0 24px 50px -24px rgba(6,42,30,.4); }
.bv-f3 .bv-float b { display:block; font-size:28px; } .bv-f3 .bv-float em { font-style:normal; color:var(--green); font-size:14px; font-weight:500; }

/* Wide panel with orbiting avatars */
.bv-panel { position:relative; overflow:hidden; border-radius:36px; display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:720px; background:linear-gradient(120deg,#EAF7F0 0%,#E6F7FF 100%); }
.bv-panel .bv-stage { position:relative; height:720px; }
.bv-panel .bv-phone { position:absolute; left:50%; translate:-50% 0; top:90px; width:300px; }
.bv-panel .bv-copy { position:relative; padding:0 clamp(24px,6vw,96px); }
.bv-panel h2 { font-size:clamp(40px,5vw,76px); }
.bv-panel .bv-copy p { margin-top:18px; color:var(--muted); font-size:clamp(18px,1.6vw,22px); max-width:26ch; }
.bv-panel .bv-follow { left:58%; top:470px; display:flex; align-items:center; gap:12px; }
.bv-panel .bv-follow img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.bv-panel .bv-follow .bv-chip { background:var(--green); color:#fff; padding:8px 16px; font-size:14px; }

/* Photo collage */
.bv-collage { display:grid; grid-template-columns:repeat(7,1fr); gap:18px; align-items:center; }
.bv-collage .bv-col { display:grid; gap:18px; }
.bv-collage img { width:100%; object-fit:cover; border-radius:999px; }
.bv-collage .bv-tall img { aspect-ratio:1/2.4; } .bv-collage .bv-short img { aspect-ratio:1/1.35; border-radius:60px; }
.bv-collage .bv-col:nth-child(even) { translate:0 60px; }
.bv-closing { text-align:center; padding:96px 0 140px; }
.bv-closing h2 { font-size:clamp(40px,6vw,88px); }

@media(max-width:900px) {
 .bv-hero-stage { height:500px; } .bv-hero-stage .bv-phone { width:250px; }
 .bv-hero .bv-q { left:0; top:300px; width:200px; } .bv-hero .bv-q p { font-size:16px; }
 .bv-hero .bv-who { right:0; top:120px; padding:10px 12px; } .bv-hero .bv-who small { display:none; }
 .bv-hero .bv-s1 { right:4%; top:20px; } .bv-hero .bv-s2 { left:6%; top:20px; }
 .bv-trio { grid-template-columns:1fr; }
 .bv-feat { height:640px; } .bv-feat .bv-phone { top:280px; width:260px; }
 .bv-f1 .bv-float { top:480px; } .bv-f2 .bv-float { top:400px; } .bv-f3 .bv-float { top:500px; }
 .bv-panel { grid-template-columns:1fr; } .bv-panel .bv-copy { order:-1; padding:56px 24px 0; }
 .bv-panel .bv-stage { height:620px; } .bv-panel .bv-phone { width:250px; top:40px; }
 .bv-panel .bv-follow { left:auto; right:10px; top:430px; }
 .bv-collage { grid-template-columns:repeat(3,1fr); } .bv-collage .bv-col:nth-child(n+4) { display:none; }
}

/* Brand palette: green #08563B, lime #D4FF00, pink #FF8FC0, mint #9BD9B5, red #FF4F3D, white */
.bv { --ink:#08563B; --muted:rgba(8,86,59,.85); }
.bv-feat h3, .bv-feat p { color:#08563B; }
.bv-feat p { opacity:1; }
.bv-feat:nth-child(1) { background:#D4FF00; }
.bv-feat:nth-child(2) { background:#FF8FC0; }
.bv-feat:nth-child(3) { background:#9BD9B5; }
.bv-panel { background:#ECEEEA; }
.bv-panel h2 { color:#111413; } .bv-panel .bv-copy p { color:#4F5552; }
.bv-panel .bv-follow .bv-chip { background:#D4FF00; color:#08563B; }
.bv-f1 .bv-float i { border-top-color:#08563B; }
.bv-f3 .bv-float em { color:#08563B; }
.bv-closing h2 span { color:#FF4F3D; }

/* Real device frame (Apple product bezel, 1350x2760; screen 1206x2622 at 72,69). The frame is a
   15 KB transparent webp drawn over the screenshot, so no extra layout or filters per frame. */
.bv-phone { padding:0; background:none; aspect-ratio:1350/2760; border-radius:15% / 7.3%; box-shadow:0 40px 80px -34px rgba(8,86,59,.5); }
.bv-phone img { position:absolute; left:5.333%; top:2.5%; width:89.333%; height:95%; border-radius:5.2% / 2.4%; }
.bv-phone::after { content:""; position:absolute; inset:0; background:url("../img/device/phone-frame.webp") center/100% 100% no-repeat; pointer-events:none; }


/* Floating cards are solid: nothing from the phone screen shows through them */
.bv-float { background:#fff; border-color:#fff; backdrop-filter:none; }
.bv-f3 .bv-float > div { background:#fff; }
.bv-f1 .bv-float { top:480px; }

/* Feeds: two cards */
.bv-duo { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-bottom:24px; }
.bv-duo .bv-feat p { max-width:30ch; }
.bv-feat.bv-friends { background:#08563B; } .bv-feat.bv-friends :is(h3,p) { color:#fff; } .bv-feat.bv-friends p { opacity:.85; }
.bv-feat.bv-world { background:#9BD9B5; }
.bv-duo .bv-float { top:520px; right:20px; display:flex; align-items:center; gap:12px; }
.bv-duo .bv-float span img { width:54px; }

/* Features: own colours, so the row doesn't read as the How it works cards */




@media(max-width:900px) {
 .bv-f1 .bv-float { top:380px; }
 .bv-duo { grid-template-columns:1fr; }
 .bv-duo .bv-float { top:440px; right:12px; }

}
.bv-features .bv-sec-head { max-width:980px; }

@media(min-width:901px) { .bv-panel .bv-follow small { white-space:nowrap; } }

/* Find your people: followed state instead of a lime button */
.bv-panel .bv-follow .bv-chip.bv-check { flex:none; display:grid; place-items:center; width:36px; height:36px; padding:0; border-radius:50%; }
.bv-panel .bv-follow .bv-check svg { width:18px; height:18px; }


/* Feature tiles: calm gray card, white live UI inside */
.bv-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.bv-tile { display:flex; flex-direction:column; min-height:500px; padding:32px; border-radius:32px; background:#ECEEEA; }
.bv-tile h3 { font-size:clamp(26px,2.2vw,32px); }
.bv-tile p { margin:12px 0 28px; color:#4F5552; font-size:18px; line-height:1.4; }
.bv-ui { margin-top:auto; min-height:250px; padding:22px; border-radius:22px; background:#fff; box-shadow:0 20px 40px -32px rgba(6,42,30,.5); }
.bv-ui small { display:block; color:var(--muted); font-size:14px; }
.bv-ui strong { font-family:var(--display); font-weight:500; color:var(--ink); }

.bv-ui-row { display:flex; align-items:center; gap:10px; padding:8px 0; }
.bv-ui-row i { flex:none; width:30px; height:30px; border-radius:50%; background:#E2E6E2; }
.bv-ui-row b { flex:1; height:9px; border-radius:9px; background:#DDF1E5; }
.bv-ui-row em { flex:none; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--green); color:#fff; font:500 12px/1 var(--ui); }
.bv-ui-done { margin-top:14px; padding-top:16px; border-top:1px solid var(--line); text-align:center; }
.bv-ui-done strong { display:block; font-size:19px; }

.bv-ui-num strong { display:block; font-size:92px; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--green); }
.bv-ui-week { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:24px; }
.bv-ui-week span { display:grid; place-items:center; aspect-ratio:1; border-radius:50%; background:var(--green); color:#fff; font:500 12px/1 var(--ui); }

.bv-ui-widget { display:flex; flex-direction:column; background:var(--green); }
.bv-ui-widget small { color:var(--lime); font-weight:500; }
.bv-ui-widget strong { margin-top:14px; min-height:2.3em; color:#fff; font-size:30px; line-height:1.14; }
.bv-ui-go { align-self:flex-start; margin-top:auto; padding:10px 18px; border-radius:999px; background:var(--lime); color:#08563B; font:500 15px/1 var(--display); }

.bv-ui-react { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; place-items:center; align-content:center; }
.bv-ui-react img { width:64px; height:64px; }

.bv-ui-seg { position:relative; display:grid; grid-template-columns:repeat(3,1fr); padding:4px; border-radius:999px; background:#EAF5EE; font:500 14px/1 var(--display); text-align:center; }
.bv-ui-seg i { position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px) / 3); border-radius:999px; background:var(--green); transform:translateX(100%); }
.bv-ui-seg span { position:relative; padding:12px 0; color:var(--muted); }
.bv-ui-seg span:nth-of-type(2) { color:#fff; }
.bv-ui-line { height:11px; margin-top:26px; border-radius:11px; background:#E9EDE9; }
.bv-ui-line + .bv-ui-line { margin-top:12px; }
.bv-short-line { width:62%; }

.bv-ui-cal small { margin-bottom:14px; font:500 18px/1 var(--display); color:var(--ink); }
.bv-ui-days { display:grid; grid-template-columns:repeat(7,1fr); gap:7px; }
.bv-ui-days i { aspect-ratio:1; border-radius:50%; background:var(--green); }
.bv-ui-days i.off { background:#EAF5EE; }
.bv-ui-days i.today { background:var(--lime); box-shadow:inset 0 0 0 2px var(--green); }

/* Motion: only when JS marks the element ready; otherwise everything shows in its final state */
.bv-ready .bv-ui-row, .bv-ready .bv-ui-done, .bv-ready .bv-ui-go, .bv-ready .bv-ui-line { opacity:0; transform:translateY(8px); }
.bv-ready .bv-ui-week span, .bv-ready .bv-ui-days i:not(.off) { background:#EAF5EE; color:var(--muted); }
.bv-ready .bv-ui-react img { opacity:0; transform:scale(.4) rotate(-14deg); }
.bv-ready .bv-ui-seg i { transform:translateX(0); }
.bv-ready .bv-ui-seg span:nth-of-type(1) { color:#fff; }
.bv-ready .bv-ui-seg span:nth-of-type(2) { color:var(--muted); }
.bv-ui-row, .bv-ui-done, .bv-ui-go, .bv-ui-line { transition:opacity .35s ease-out var(--d,0s), transform .35s ease-out var(--d,0s); }
.bv-ui-week span, .bv-ui-days i { transition:background-color .25s ease-out var(--d,0s), color .25s ease-out var(--d,0s); }
.bv-ui-react img { transition:opacity .25s ease-out var(--d,0s), transform .45s cubic-bezier(.34,1.56,.64,1) var(--d,0s); }
.bv-ui-seg i { transition:transform .4s cubic-bezier(.2,.8,.2,1) .7s; }
.bv-ui-seg span { transition:color .2s ease-out .75s; }

@media (max-width:1000px) { .bv-tiles { grid-template-columns:repeat(2,1fr); } }
@media (max-width:700px) {
  .bv-tiles { grid-template-columns:1fr; }
  .bv-tile { min-height:0; padding:24px; border-radius:26px; }
}

/* Pains and tiles: polish */
.bv-ui-react img { width:84px; height:84px; }
.bv-ui-who { display:flex; flex-direction:column; }
.bv-ui-answer { margin-top:auto; padding:18px; border-radius:18px; background:#EAF5EE; }
.bv-ui-answer strong { display:block; margin-top:8px; font-size:22px; line-height:1.2; }
.bv-ui-answer { transition:opacity .35s ease-out var(--d,0s), transform .35s ease-out var(--d,0s); }
.bv-ready .bv-ui-answer { opacity:0; transform:translateY(8px); }

/* How it works and Feeds: phone closer to the text */
.bv-feat { height:680px; }
.bv-feat .bv-phone { top:240px; width:300px; }
.bv-f1 .bv-float { left:auto; right:14px; top:336px; }
.bv-f2 .bv-float { top:380px; }
.bv-f3 .bv-float { top:500px; }
.bv-duo .bv-float { top:430px; }
@media(max-width:900px) {
  .bv-feat { height:620px; }
  .bv-feat .bv-phone { top:200px; width:260px; }
  .bv-f1 .bv-float { left:auto; right:8px; top:270px; }
  .bv-f2 .bv-float { top:310px; }
  .bv-f3 .bv-float { top:410px; }
  .bv-duo .bv-feat .bv-phone { top:240px; }
  .bv-duo .bv-float { top:340px; }
}

/* Floating cards come alive, once. Individual scale and opacity leave the GSAP parallax transform alone. */
.bv-feat .bv-float { transition:opacity .3s ease-out .3s, scale .5s cubic-bezier(.34,1.56,.64,1) .3s; }
.bv-feat .bv-float.bv-ready { opacity:0; scale:.8; }
.bv-f2 .bv-float span, .bv-f3 .bv-float > div { transition:opacity .3s ease-out calc(.3s + var(--d,0s)), translate .4s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--d,0s)); }
.bv-f2 .bv-float.bv-ready span, .bv-f3 .bv-float.bv-ready > div { opacity:0; translate:0 10px; }
.bv-sticker { transition:scale .55s cubic-bezier(.34,1.56,.64,1) .55s, rotate .55s cubic-bezier(.34,1.56,.64,1) .55s; }
.bv-float.bv-ready .bv-sticker { scale:.3; rotate:-16deg; }
.bv-f1 .bv-float b, .bv-f2 .bv-float b, .bv-f3 .bv-float b, .bv-duo .bv-float b { font-variant-numeric:tabular-nums; }

/* Audience card: the final look is a green check; the spinner only plays after JS marks it played */
.bv-f1 .bv-float i { position:relative; flex:none; background:#08563B; border-color:#08563B; }
.bv-f1 .bv-float i::after { content:""; position:absolute; left:4px; top:1px; width:5px; height:9px; border:solid #fff; border-width:0 2px 2px 0; rotate:45deg; }
.bv-f1 .bv-float.bv-played i { animation:bvSave 1.4s linear .3s backwards; }
.bv-f1 .bv-float.bv-played i::after { animation:bvSaved 1.4s linear .3s backwards; }
@keyframes bvSaved { 0%, 85% { opacity:0; } 100% { opacity:1; } }

/* Pains: pink panel, white cards, red strike, stickers */
.bv-pain-panel { padding:clamp(48px,6vw,88px) clamp(20px,4vw,64px) clamp(56px,6vw,96px); border-radius:36px; background:#FF8FC0; text-align:center; }
.bv-pain-panel h2 { font-size:clamp(36px,5vw,72px); }
.bv-pain-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:1160px; margin:clamp(36px,4vw,56px) auto 0; text-align:left; }
.bv-pain { position:relative; padding:30px 112px 34px 32px; border-radius:28px; background:#fff; rotate:var(--tilt,0deg); box-shadow:0 26px 50px -30px rgba(8,86,59,.55); transition:opacity .35s ease-out var(--d,0s), translate .55s cubic-bezier(.2,.8,.2,1) var(--d,0s), rotate .3s ease-out; }
.bv-pain:hover { rotate:0deg; }
.bv-pain s { text-decoration:none; color:var(--muted); font-size:clamp(16px,1.3vw,18px); line-height:1.35; background:linear-gradient(#FF4F3D,#FF4F3D) 0 58%/100% 2.5px no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone; transition:background-size .5s ease-out calc(var(--d,0s) + .35s); }
.bv-pain p { margin-top:16px; color:#08563B; font:500 clamp(23px,2.2vw,32px)/1.14 var(--display); letter-spacing:-.015em; }
.bv-pain img { position:absolute; right:18px; top:18px; width:84px; height:84px; rotate:8deg; transition:opacity .2s ease-out calc(var(--d,0s) + .75s), scale .5s cubic-bezier(.34,1.56,.64,1) calc(var(--d,0s) + .75s); }
.bv-pain.bv-ready { opacity:0; translate:0 36px; }
.bv-pain.bv-ready s { background-size:0 2.5px; }
.bv-pain.bv-ready img { opacity:0; scale:.3; }
@media(max-width:800px) {
  .bv-pain-grid { grid-template-columns:1fr; gap:16px; }
  .bv-pain { padding:22px 84px 26px 22px; }
  .bv-pain img { right:10px; top:10px; width:66px; height:66px; }
}

/* Feature tiles: brand colours only */
.bv-tile p, .bv-panel .bv-copy p { color:var(--muted); }
.bv-tile h3, .bv-panel h2 { color:#08563B; }
.bv-ui small { color:var(--muted); }
.bv-ui-row img { flex:none; width:32px; height:32px; border-radius:50%; object-fit:cover; }
.bv-ui-row em, .bv-panel .bv-follow .bv-chip.bv-check { background:#D4FF00; color:#08563B; }
.bv-ui-row em svg, .bv-check svg { display:block; fill:none; stroke:#08563B; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.bv-ui-row em svg { width:14px; height:14px; }
.bv-ui-week span { background:#D4FF00; color:#08563B; }
.bv-ui-days i { background:#9BD9B5; }
.bv-ui-days i.today { background:#D4FF00; box-shadow:inset 0 0 0 3px #08563B; }
.bv-ui-react { grid-template-columns:repeat(3,1fr); gap:10px; }
.bv-ui-react img { width:min(100%,88px); height:auto; aspect-ratio:1; }
.bv-ui-seg span:nth-of-type(2) { color:#D4FF00; }
.bv-ready .bv-ui-seg span:nth-of-type(1) { color:#D4FF00; }

/* Audience card: same lime check, in the empty space beside the logo */
.bv-f1 .bv-float i { background:#D4FF00; border-color:#D4FF00; }
.bv-f1 .bv-float i::after { border-color:#08563B; }
@keyframes bvSave { 0% { rotate:0deg; background:transparent; border-color:#DDF1E5; border-top-color:#08563B; } 85% { rotate:720deg; background:transparent; border-color:#DDF1E5; border-top-color:#08563B; } 100% { rotate:720deg; background:#D4FF00; border-color:#D4FF00; } }

/* Final signup: lime panel, people and reactions around a changing question */
.edition.aerium-light .footer-signup.bv-join { position:relative; overflow:hidden; gap:24px; margin-top:clamp(32px,4vw,56px); padding:clamp(72px,8vw,120px) 24px; border-radius:36px; background:#D4FF00; }
.edition.aerium-light .footer-signup.bv-join::after { display:none; }
.edition.aerium-light .footer-signup.bv-join h2 { position:relative; z-index:2; max-width:none; font:500 clamp(38px,4.4vw,68px)/1.04 var(--display); letter-spacing:-.03em; color:#08563B; }
.bv-join-q { position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:4px 8px; margin:0; padding:10px 18px; border-radius:22px; background:#08563B; color:#fff; font:500 15px/1.3 var(--display); }
.bv-join-q b { color:#D4FF00; font-weight:500; }
.bv-join-q span { transition:opacity .25s ease-out; }
.edition.aerium-light .bv-join .signup { position:relative; z-index:2; }
.edition.aerium-light .bv-join .signup-row { border:0; background:#fff; box-shadow:0 22px 44px -26px rgba(8,86,59,.6); }
.edition.aerium-light .bv-join .btn { background:#08563B; color:#D4FF00; }
.edition.aerium-light .bv-join .btn:hover { filter:brightness(1.18); color:#D4FF00; }
.edition.aerium-light .bv-join .signup-note, .edition.aerium-light .bv-join .signup-note a { color:#08563B; }
.edition.aerium-light .bv-join .signup-msg { color:#08563B; }
.bv-pop { position:absolute; z-index:1; rotate:var(--r,0deg); transition:opacity .25s ease-out var(--d,0s), scale .55s cubic-bezier(.34,1.56,.64,1) var(--d,0s); }
.bv-pop.bv-face { width:96px; height:96px; padding:6px; border-radius:50%; background:#fff; box-shadow:0 18px 36px -20px rgba(8,86,59,.6); }
.bv-pop.bv-face img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.bv-pop.bv-stick { width:92px; height:92px; }
.bv-ready .bv-pop { opacity:0; scale:.3; }
.bv-played .bv-pop { animation:bvBob 5s ease-in-out calc(var(--d,0s) + .6s) infinite alternate; }
@keyframes bvBob { from { translate:0 0; } to { translate:0 -14px; } }
.bv-p1 { left:6%; top:14%; } .bv-p2 { left:7%; top:45%; } .bv-p3 { left:5%; bottom:12%; }
.bv-p4 { right:6%; top:12%; } .bv-p5 { right:7%; top:44%; } .bv-p6 { right:5%; bottom:12%; }
@media(max-width:1100px) { .bv-p2, .bv-p5 { display:none; } .bv-pop.bv-face { width:76px; height:76px; } .bv-pop.bv-stick { width:72px; height:72px; } .bv-p1, .bv-p4 { top:5%; } .bv-p3, .bv-p6 { bottom:4%; } }
@media(max-width:700px) {
  .edition.aerium-light .footer-signup.bv-join { padding:104px 20px 104px; border-radius:28px; }
  .edition.aerium-light .footer-signup.bv-join h2 { font-size:36px; }
  .bv-p1 { left:8%; top:18px; } .bv-p4 { right:8%; top:18px; } .bv-p3 { left:8%; bottom:14px; } .bv-p6 { right:8%; bottom:14px; }
  .bv-pop.bv-face { width:68px; height:68px; } .bv-pop.bv-stick { width:66px; height:66px; }
}
.bv-ui.bv-ui-widget small { color:#D4FF00; }
.bv-ui.bv-ui-cal small { color:#08563B; }

/* A rectangular box shadow left a dark band with hard edges beside clipped phones */
.bv-feat .bv-phone, .bv-panel .bv-phone { box-shadow:none; }
.bv-f1 .bv-float { padding:10px 14px; }

/* Text on lime, pink and mint panels is near black */
.bv-f1 :is(h3,p), .bv-f2 :is(h3,p), .bv-f3 :is(h3,p), .bv-feat.bv-world :is(h3,p), .bv-pain-panel h2 { color:#111413; }
.edition.aerium-light .footer-signup.bv-join h2, .edition.aerium-light .bv-join .signup-note, .edition.aerium-light .bv-join .signup-note a, .edition.aerium-light .bv-join .signup-msg { color:#111413; }

/* Find your people: white scene, faces orbit the phone */
.bv-panel { background:#fff; min-height:720px; }
.bv-panel .bv-phone { z-index:2; }
.bv-panel .bv-follow { z-index:4; transition:opacity .2s ease-out, scale .2s ease-out; }
.bv-panel .bv-follow.is-swapping { opacity:0; scale:.96; }
.bv-orbiter { position:absolute; z-index:1; left:0; top:0; display:block; width:var(--size,56px); height:var(--size,56px); padding:3px; border-radius:50%; background:#fff; box-shadow:0 10px 24px -14px rgba(8,86,59,.4); will-change:transform; visibility:hidden; }
@media(min-width:901px) { .bv-panel .bv-phone { width:310px; top:44px; } .bv-panel .bv-follow { left:62%; } }
.bv-orbit-stage.is-ready .bv-orbiter { visibility:visible; }
.bv-orbiter img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
@media(max-width:600px) { .bv-panel .bv-stage { overflow:hidden; height:560px; } .bv-panel .bv-phone { width:220px; top:58px; } .bv-panel .bv-follow { top:370px; } .bv-orbiter { width:calc(var(--size,56px) * .8); height:calc(var(--size,56px) * .8); } }
.bv-panel .bv-follow { width:max-content; }
@media(max-width:900px) { .bv-panel .bv-follow { max-width:calc(100% - 20px); } }

/* Calm direction (founder chose it over colour panels): one light tile colour, two-tone headings, bigger phones. Lime stays for buttons and the signup panel. */
.bv-calm-head { display:flex; align-items:flex-end; justify-content:space-between; gap:40px; max-width:none !important; margin-bottom:56px; text-align:left; }
.bv-calm-head h2, .bv-pain-panel h2 { max-width:22em; font-size:clamp(38px,4.4vw,64px); line-height:1.06; letter-spacing:-.025em; }
.bv-calm-btn { flex:none; padding:15px 24px; border-radius:999px; background:#D4FF00; font:500 16px/1 var(--display); text-decoration:none; }
.bv-feat, .bv-feat:nth-child(n), .bv-feat.bv-friends, .bv-feat.bv-world { background:#F4F5F2; }
.bv-trio, .bv-duo { gap:16px; } .bv-duo { margin-bottom:16px; }
.bv-feat { height:680px; padding:32px 32px 0; border-radius:24px; }
.bv-feat h3 { font-size:26px; line-height:1.15; letter-spacing:-.01em; }
.bv-feat p, .bv-duo .bv-feat p { margin-top:8px; max-width:24em; font-size:18px; line-height:1.4; opacity:1; }
.bv-feat .bv-phone { top:164px; width:340px; box-shadow:none; }
.bv-duo .bv-feat .bv-phone { top:164px; }
.bv-tile { border-radius:24px; background:#F4F5F2; }
.bv-pain-panel { padding:0; border-radius:0; background:none; text-align:left; }
.bv-pain-grid { max-width:none; gap:16px; margin-top:56px; }
.bv-pain { rotate:0deg; border-radius:24px; background:#F4F5F2; box-shadow:none; }
.bv-pain:hover { rotate:0deg; }
@media(max-width:900px) {
  .bv-calm-head { display:block; margin-bottom:32px; }
  .bv-calm-btn { display:inline-block; margin-top:24px; }
  .bv-feat, .bv-duo .bv-feat { height:600px; padding:24px 24px 0; }
  .bv-feat .bv-phone, .bv-duo .bv-feat .bv-phone { top:150px; width:300px; }
  .bv-pain-grid { margin-top:32px; }
}