/* beta.css — onboarding page for the bloomnow beta (TestFlight / Google Play) */

.bn-beta-hero{
  background:linear-gradient(180deg,#fdf6ef 0%,#ffffff 100%);
  padding:64px 0 32px;
  text-align:center;
}
.bn-beta-hero h1{
  font-family:"Bauhaus Bugler","Inter",system-ui,sans-serif;
  font-size:clamp(30px,5vw,44px);
  line-height:1.08;
  color:#7d0845;
  margin:0 0 14px;
}
.bn-beta-hero .bn-sub{
  font-size:clamp(17px,2.4vw,20px);
  color:#4b4b55;
  max-width:560px;
  margin:0 auto;
}

/* platform toggle */
.bn-beta-toggle{
  display:inline-flex;
  gap:6px;
  padding:6px;
  margin:28px auto 0;
  background:#f4efe9;
  border-radius:14px;
}
.bn-beta-toggle button{
  border:0;
  background:transparent;
  cursor:pointer;
  font-family:"Inter",system-ui,sans-serif;
  font-size:15px;
  font-weight:600;
  color:#6b7280;
  padding:10px 22px;
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background .15s,color .15s,box-shadow .15s;
}
.bn-beta-toggle button svg{width:18px;height:18px;display:block}
.bn-beta-toggle button.is-active{
  background:#fff;
  color:#7d0845;
  box-shadow:0 2px 8px rgba(125,8,69,.12);
}

/* panels */
.bn-beta-panels{
  max-width:620px;
  margin:0 auto;
  padding:8px 0 8px;
}
.bn-beta-panel{display:none}
.bn-beta-panel.is-active{display:block}

.bn-beta-card{
  background:#fff;
  border:1px solid #ece7df;
  border-radius:20px;
  box-shadow:0 10px 30px rgba(125,8,69,.06);
  padding:30px 28px;
  margin-top:24px;
  text-align:left;
}
.bn-beta-card h2{
  font-size:21px;
  color:#1f2328;
  margin:0 0 4px;
  display:flex;
  align-items:center;
  gap:10px;
}
.bn-beta-card h2 svg{width:24px;height:24px;color:#7d0845}
.bn-beta-card .bn-beta-lead{
  color:#6b7280;
  font-size:14px;
  margin:0 0 22px;
}

/* numbered steps */
.bn-beta-steps{
  list-style:none;
  counter-reset:step;
  margin:0 0 24px;
  padding:0;
}
.bn-beta-steps li{
  counter-increment:step;
  position:relative;
  padding:0 0 18px 46px;
  color:#3a4047;
  font-size:15px;
  line-height:1.5;
}
.bn-beta-steps li:last-child{padding-bottom:0}
.bn-beta-steps li::before{
  content:counter(step);
  position:absolute;
  left:0;
  top:-2px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:#7d0845;
  color:#fff;
  font-weight:600;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.bn-beta-steps li::after{
  content:"";
  position:absolute;
  left:14px;
  top:30px;
  bottom:6px;
  width:2px;
  background:#f0e8e2;
}
.bn-beta-steps li:last-child::after{display:none}
.bn-beta-steps strong{color:#1f2328}

/* CTA button */
.bn-beta-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  background:#7d0845;
  color:#fff;
  font-family:"Inter",system-ui,sans-serif;
  font-size:16px;
  font-weight:600;
  padding:15px 20px;
  border-radius:12px;
  text-decoration:none;
  transition:background .15s,transform .15s;
}
.bn-beta-cta:hover{background:#5e2240;transform:translateY(-1px)}
.bn-beta-cta svg{width:20px;height:20px}
.bn-beta-cta.is-disabled{
  background:#d8cfc8;
  pointer-events:none;
  cursor:default;
}
/* secondary CTA (e.g. "TestFlight installieren"): outlined, still prominent */
.bn-beta-cta-secondary{
  background:#fff;
  color:#7d0845;
  border:1.5px solid #7d0845;
}
.bn-beta-cta-secondary:hover{background:#fdf2f7}
/* spacing when two CTAs are stacked */
.bn-beta-cta + .bn-beta-cta{margin-top:12px}

.bn-beta-linkhint{
  font-size:12.5px;
  color:#9aa0a6;
  margin:12px 0 0;
  word-break:break-all;
  text-align:center;
}
.bn-beta-note{
  margin:18px 0 0;
  padding:13px 15px;
  background:#fdf6ef;
  border-radius:10px;
  font-size:13.5px;
  color:#6b5b54;
  line-height:1.5;
}

/* desktop hint: QR bridge to the phone (best PC experience) */
.bn-beta-desktop{
  max-width:620px;
  margin:0 auto 8px;
  padding:20px 22px;
  background:#fff7ed;
  border:1px solid #fde7c8;
  border-radius:16px;
  display:flex;
  align-items:center;
  gap:20px;
  text-align:left;
}
.bn-beta-desktop.is-hidden{display:none}
.bn-beta-qr{
  flex:0 0 auto;
  width:120px;
  height:120px;
  border-radius:12px;
  background:#fff;
  padding:8px;
  border:1px solid #f0e3cf;
}
.bn-beta-desktop-text{font-size:14.5px;line-height:1.5;color:#7a5b1e}
.bn-beta-desktop-text strong{color:#5e2240}

/* help / feedback */
.bn-beta-help{text-align:center;padding:36px 0 8px}
.bn-beta-help h2{font-size:18px;color:#1f2328;margin:0 0 8px}
.bn-beta-help p{color:#6b7280;font-size:14.5px;margin:0 auto;max-width:520px;line-height:1.55}
.bn-beta-help a{color:#7d0845;font-weight:600}

/* "add my Google address" form inside the Android card */
.bn-beta-form{
  margin:18px 0 0;
  padding:18px 18px 20px;
  background:#faf5f8;
  border:1px solid #f0dde8;
  border-radius:12px;
}
.bn-beta-form h3{
  margin:0 0 6px;
  font-size:15.5px;
  color:#1f2328;
}
.bn-beta-form-intro{
  margin:0 0 14px;
  font-size:13.5px;
  line-height:1.5;
  color:#6b5b54;
}
.bn-beta-form label{
  display:block;
  font-size:13px;
  font-weight:600;
  color:#3a4047;
  margin:0 0 5px;
}
.bn-beta-form input[type="email"]{
  width:100%;
  box-sizing:border-box;
  font-family:"Inter",system-ui,sans-serif;
  font-size:15px;
  color:#1f2328;
  background:#fff;
  border:1px solid #e0d4cd;
  border-radius:10px;
  padding:11px 13px;
  margin:0 0 13px;
}
.bn-beta-form input[type="email"]:focus{
  outline:none;
  border-color:#7d0845;
  box-shadow:0 0 0 3px rgba(125,8,69,.12);
}
/* honeypot: hidden from real users, catches bots */
.bn-beta-form .bn-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
}
.bn-beta-form .bn-beta-cta{margin-top:4px}
.bn-beta-formmsg{
  margin:12px 0 0;
  font-size:13.5px;
  line-height:1.5;
  text-align:center;
}
.bn-beta-formmsg.is-ok{color:#2f7d32}
.bn-beta-formmsg.is-error{color:#b3261e}

@media (max-width:600px){
  .bn-beta-hero{padding:44px 0 24px}
  .bn-beta-card{padding:24px 20px;border-radius:16px}
  .bn-beta-toggle button{padding:9px 16px;font-size:14px}
  .bn-beta-desktop{flex-direction:column;text-align:center}
}

/* Dark mode (only the beta pages link this stylesheet, so these overrides are
   scoped to /beta and /en/beta). Mirrors the dark email: dark surfaces, light
   text, lighter pink for the burgundy accents so they stay legible. */
@media (prefers-color-scheme: dark){
  body{background:#161214;color:#e7e1de}
  .bn-floatnav{background:rgba(22,18,20,.85);border-bottom-color:rgba(255,255,255,.08)}
  .bn-floatnav-link{color:#cbbfbd}
  .bn-floatnav-logo span{color:#FFB000}
  .bn-beta-hero{background:linear-gradient(180deg,#1d1417 0%,#161214 100%)}
  .bn-beta-hero h1{color:#ef83b1}
  .bn-beta-hero .bn-sub{color:#cbbfbd}
  .bn-beta-toggle{background:#241d20}
  .bn-beta-toggle button{color:#a59c98}
  .bn-beta-toggle button.is-active{background:#34292d;color:#ef83b1;box-shadow:none}
  .bn-beta-card{background:#211c1f;border-color:#352d31;box-shadow:none}
  .bn-beta-card h2{color:#ffffff}
  .bn-beta-card h2 svg{color:#ef83b1}
  .bn-beta-cta-secondary{background:transparent;color:#ef83b1;border-color:#ef83b1}
  .bn-beta-cta-secondary:hover{background:#34292d}
  .bn-beta-card .bn-beta-lead{color:#a59c98}
  .bn-beta-steps li{color:#d8d2cf}
  .bn-beta-steps li strong{color:#ffffff}
  .bn-beta-steps li::after{background:#352d31}
  .bn-beta-note{background:#2a2326;color:#cbbfb9}
  .bn-beta-form{background:#251c20;border-color:#3d2c34}
  .bn-beta-form h3{color:#ffffff}
  .bn-beta-form-intro{color:#cbbfb9}
  .bn-beta-form label{color:#d8d2cf}
  .bn-beta-form input[type="email"]{background:#1b1518;border-color:#3d2c34;color:#f1ece9}
  .bn-beta-form input[type="email"]:focus{border-color:#ef83b1;box-shadow:0 0 0 3px rgba(239,131,177,.18)}
  .bn-beta-formmsg.is-ok{color:#7fd083}
  .bn-beta-formmsg.is-error{color:#f0938a}
  .bn-beta-linkhint{color:#8c8581}
  .bn-beta-desktop{background:#2a2018;border-color:#4a3a22}
  .bn-beta-desktop-text{color:#e7cfa6}
  .bn-beta-desktop-text strong{color:#ffd9a0}
  .bn-beta-help h2{color:#ffffff}
  .bn-beta-help p{color:#a59c98}
  .bn-beta-help a{color:#ef83b1}
  .bn-footer{background:#161214;color:#a59c98}
  .bn-footer a{color:#cbbfbd}
}