/* the public pages (home, login, prices, about, terms): a plain deep-teal background, no photo, so the text stands out.
   Used together with site.css (it overrides the body background and the top bar). */
:root { --pub-text:#e3f3f6; }
body { background:linear-gradient(170deg,#0a3440 0%,#0d4a58 38%,#0a3a46 70%,#072a34 100%) fixed; }
body::before { display:none; }
.hidden { display:none !important; }

.navrow { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
a.btn.main, a.main { text-decoration:none; }
a.btn.main { color:var(--btn-ink); font-weight:800; border:0; background:var(--btn); padding:12px 28px; box-shadow:0 6px 22px rgba(255,94,98,.45); }
button.main.watch, a.main.watch { background:linear-gradient(135deg,#ffe27a,#ffc83d); box-shadow:0 6px 22px rgba(255,200,61,.4); }

/* sections */
.sec { padding:34px 22px; }
.sec.alt { background:rgba(0,0,0,.16); }
.sec .in { max-width:1100px; margin:0 auto; }
.sec h2 { margin:0 0 18px; font-size:clamp(22px,3vw,30px); text-align:center; }
.sec h2::after { content:""; display:block; width:54px; height:4px; border-radius:4px; margin:8px auto 0; background:var(--btn); }
.lead { font-size:clamp(18px,2.6vw,24px); line-height:1.7; color:var(--pub-text); text-align:center; margin:4px 0 22px; }
.heroB { text-align:center; padding:34px 20px 22px; max-width:820px; margin:0 auto; }
.btns { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.grid { display:grid; gap:14px; }
.g3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .g3 { grid-template-columns:1fr; } }
.card { background:rgba(255,255,255,.09); border:1px solid var(--card-line); border-radius:16px; padding:14px 16px; }
.step .n { width:40px; height:40px; border-radius:50%; background:var(--btn); color:var(--btn-ink); font-weight:800; font-size:20px; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.step h3, .ben h3 { margin:0 0 4px; font-size:19px; color:var(--a1); }
.step p, .ben p { margin:0; color:var(--pub-text); font-size:15px; }
.ben .ic { font-size:26px; line-height:1; margin-bottom:6px; }
.cta { text-align:center; padding:30px 20px 44px; }
.cta h2 { margin:0 0 14px; font-size:clamp(22px,3vw,30px); }
.note { font-size:14px; color:var(--muted); text-align:center; }

/* the launch offer */
.launchBox { display:flex; gap:14px; align-items:center; max-width:820px; margin:8px auto 0; background:linear-gradient(135deg,rgba(255,226,122,.22),rgba(255,138,91,.22)); border:1px solid var(--a1); border-radius:18px; padding:14px 18px; text-align:right; }
.launchBox .ic { font-size:34px; line-height:1; }
.launchBox h3 { margin:0 0 2px; font-size:20px; color:var(--a1); }
.launchBox p { margin:3px 0; font-size:15.5px; }
.launchBox p b { color:var(--a1); }
.launchBox .contact { margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,226,122,.45); }
.launchBox .contact b { font-size:17px; direction:ltr; unicode-bidi:embed; }

/* questions */
.faq details { background:rgba(255,255,255,.09); border:1px solid var(--card-line); border-radius:14px; padding:10px 16px; margin-bottom:8px; }
.faq summary { cursor:pointer; font-weight:700; }
.faq p { margin:8px 0 2px; color:var(--pub-text); font-size:15px; }
.faq a { color:var(--a1); }

/* the sign-in page */
.box.authbox { margin:34px auto 50px; }
@media (min-width:1000px){ .box.authbox { margin-right:auto; } }

/* prices */
.pkgs { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:980px; margin:0 auto; align-items:stretch; }
@media (max-width:820px){ .pkgs { grid-template-columns:1fr; } }
.pkg { position:relative; background:rgba(255,255,255,.09); border:1px solid var(--card-line); border-radius:22px; padding:22px 20px; text-align:center; display:flex; flex-direction:column; }
.pkg.best { border:2px solid var(--a1); background:rgba(255,226,122,.12); }
.pkg .badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--btn); color:var(--btn-ink); font-weight:800; font-size:13px; padding:3px 14px; border-radius:99px; white-space:nowrap; }
.pkg h3 { margin:0; font-size:22px; color:var(--a1); }
.pkg .size { color:var(--pub-text); margin:4px 0 12px; min-height:48px; }
.pkg .price { font-size:46px; font-weight:900; line-height:1; }
.pkg .price small { font-size:20px; font-weight:700; }
.pkg .per { color:var(--muted); font-size:14px; margin:6px 0 14px; }
.pkg ul { list-style:none; padding:0; margin:0 0 16px; text-align:right; color:var(--pub-text); font-size:15px; flex:1; }
.pkg li { padding:4px 0; }
.pkg li::before { content:"✓"; color:var(--a1); font-weight:900; margin-inline-end:8px; }
.pricenote { max-width:820px; margin:18px auto 0; text-align:center; color:var(--muted); font-size:14.5px; }

/* about / terms */
.textpage { max-width:820px; margin:0 auto; padding:30px 22px 50px; }
.textpage h1 { text-align:center; margin:0 0 14px; }
.textpage h3 { color:var(--a1); margin:18px 0 4px; }
.textpage p, .textpage li { color:var(--pub-text); }
.draft { background:rgba(255,226,122,.16); border:1px dashed var(--a1); border-radius:12px; padding:8px 14px; font-size:14px; margin-bottom:14px; }

/* the 30-second video, full size */
.promo { position:fixed; inset:0; z-index:30; background:rgba(0,0,0,.92); display:flex; align-items:center; justify-content:center; padding:56px 12px 12px; }
.promo video { max-width:100%; max-height:100%; width:auto; height:100%; border-radius:12px; background:#000; }
.promo button { position:absolute; top:10px; left:12px; }

/* the volleyballs beside the text of the home page (wide windows only) */
.heroZone { position:relative; }
.heroZone > .heroB, .heroZone > .sec, .heroZone > .box { position:relative; z-index:1; }
.ball { position:absolute; transform:translate(-50%,-50%); filter:drop-shadow(0 12px 18px rgba(0,0,0,.45)); pointer-events:none; z-index:0; animation:ballfloat 7s ease-in-out infinite; }
@keyframes ballfloat { 0%,100% { margin-top:0; } 50% { margin-top:-12px; } }
@media (max-width:1099px){ .ball { display:none; } }
@media (prefers-reduced-motion:reduce){ .ball { animation:none; } }

/* the phone and WhatsApp icons inside the "contact to buy" buttons */
.buy { font-family:Arial,"Segoe UI",sans-serif; font-weight:700; font-size:19px; }
.buy svg { width:22px; height:22px; vertical-align:middle; }
.buy svg:first-child { margin-inline-end:16px; }
.buy svg:last-child { margin-inline-start:16px; }