html, body{max-width:100%; overflow-x:hidden}
html, body { overflow-anchor: none; scroll-behavior: auto; }
:root{
  --bg: #f6f2ea;
  --bg2: #eee7dc;
  --card: #ffffff;
  --text: #101214;
  --muted: #6f747a;
  --dark: #0f1011;
  --dark2:#141518;
  --line: rgba(255,255,255,.12);
  --gold: #c7a46a;
  --gold2:#b89257;
  --shadow: 0 10px 30px rgba(16,18,20,.08);
  --shadow2: 0 18px 50px rgba(0,0,0,.28);
  --radius: 16px;
  --radius2: 20px;
  --max: 1160px;
}

*{box-sizing:border-box}
html,html, body{width:100%; max-width:100%; overflow-x:hidden}
body{height:100%}
#app{overflow-x:hidden}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}

a{color:inherit; text-decoration:none}
button,input,select,textarea{font-family:inherit}

/* layout */
.container{max-width:var(--max); margin:0 auto; padding:0 22px}

/* top bar */
.topbar{
  background:var(--dark);
  color:rgba(255,255,255,.85);
  font-size:12px;
  min-height:34px;
  display:flex;
  align-items:center;
}
.topbar .topbarInner{display:flex; justify-content:flex-end; gap:18px; align-items:center; flex-wrap:wrap; min-width:0}
.topbar .item{display:flex; gap:8px; align-items:center; min-width:0; overflow-wrap:anywhere}
.topbar .item span{min-width:0; overflow-wrap:anywhere; word-break:break-word}
.topbar .item svg{width:14px; height:14px; color:rgba(255,255,255,.85)}

/* header */
.header{
  background:#fff;
  position:sticky;
  top:0;
  z-index:40;
  border-bottom:1px solid rgba(16,18,20,.06);
}
.nav{
  height:74px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:12px}
.brandMark{
  width:36px; height:36px;
  border-radius:999px;
  background:var(--dark);
  display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.brandMark img{width:18px; height:18px; object-fit:contain}
.brandText{display:flex; flex-direction:column; line-height:1.05}
.brandText .name{font-weight:700; font-size:15px}
.brandText .sub{font-size:12px; color:var(--gold); font-weight:600; margin-top:3px}

.navLinks{display:flex; align-items:center; gap:20px}
.navLinks a{
  font-size:14px;
  color:#222;
  padding:10px 4px;
  position:relative;
}
.navLinks a.active{color:var(--gold)}
.navLinks a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--gold);
  border-radius:999px;
}

.ctaBtn{
  display:inline-flex;
  gap:10px;
  align-items:center;
  background:var(--gold);
  color:#fff;
  border:none;
  padding:10px 16px;
  border-radius:10px;
  font-weight:700;
  font-size:13px;
  box-shadow:0 10px 24px rgba(199,164,106,.26);
  cursor:pointer;
}
.ctaBtn:hover{background:var(--gold2)}

/* hero */
.hero{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background: #111;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.46) 55%, rgba(0,0,0,.28) 100%);
  z-index:1;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:url('./assets/hero.jpg') center/cover no-repeat;
  filter: contrast(1.05) brightness(.85);
  z-index:0;
}
.heroInner{position:relative; z-index:2; width:100%}
.heroContent{max-width:860px; margin:0 auto; text-align:center; padding:70px 0 40px}

.heroLogo{
  width:min(520px, 92%);
  margin:0 auto;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.45));
  opacity:.96;
}

.heroTitle{
  margin:22px 0 10px;
  font-size:52px;
  line-height:1.05;
  color:#fff;
  font-weight:800;
}
.heroTitle .gold{color:var(--gold)}
.heroSub{
  margin:0 auto;
  max-width:720px;
  color:rgba(255,255,255,.72);
  font-size:14px;
  line-height:1.6;
}

.heroActions{
  display:flex;
  gap:14px;
  justify-content:center;
  align-items:center;
  margin-top:22px;
  flex-wrap:wrap;
}
.btnPrimary{
  display:inline-flex;
  gap:10px;
  align-items:center;
  background:var(--gold);
  color:#fff;
  border:none;
  padding:12px 18px;
  border-radius:10px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
}
.btnPrimary:hover{background:var(--gold2)}
.btnGhost{
  display:inline-flex;
  gap:10px;
  align-items:center;
  background:rgba(0,0,0,.18);
  color:#fff;
  border:1px solid rgba(255,255,255,.18);
  padding:12px 18px;
  border-radius:10px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  backdrop-filter: blur(6px);
}
.btnGhost:hover{border-color:rgba(255,255,255,.28)}

.heroBadges{
  margin-top:18px;
  display:flex;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.68);
  font-size:12px;
}
.badge{
  display:flex;
  align-items:center;
  gap:8px;
}
.badge svg{width:14px; height:14px; color:var(--gold)}

/* section titles */
.section{padding:64px 0}
.section h2{margin:0; font-size:34px; text-align:center; font-weight:800}
.section p.lead{margin:10px auto 0; text-align:center; max-width:720px; color:var(--muted); font-size:12px; line-height:1.6}

/* service teaser */
.cards4{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.card{
  background:var(--card);
  border-radius:var(--radius);
  padding:18px 18px 16px;
  box-shadow:var(--shadow);
  border:1px solid rgba(16,18,20,.06);
}
.card .icon{
  width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:10px;
  background:rgba(199,164,106,.14);
  color:var(--gold);
}

/* "V" / Mark icon (white background + centered) */
.vIcon{display:grid; place-items:center}
.vIconBg{
  width:22px; height:22px;
  border-radius:999px;
  background:#fff;
  display:grid; place-items:center;
}
.vIconImg{width:16px; height:16px; display:block; object-fit:contain}
.card h3{margin:10px 0 6px; font-size:13px; font-weight:800}
.card p{margin:0; color:var(--muted); font-size:12px; line-height:1.55}

.linkCenter{margin-top:18px; text-align:center}
.smallLink{font-size:12px; color:var(--gold); font-weight:700; display:inline-flex; gap:8px; align-items:center}
.smallLink svg{width:14px; height:14px}

/* steps overlay section */
.sectionDark{
  position:relative;
  padding:74px 0 78px;
  color:#fff;
  overflow:hidden;
  background:var(--dark);
}
.sectionDark::after{
  content:"";
  position:absolute; inset:0;
  background:url('./assets/hero.jpg') center/cover no-repeat;
  filter: brightness(.55) contrast(1.05);
  z-index:0;
}
.sectionDark::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.60), rgba(0,0,0,.72));
  z-index:1;
}
.sectionDark .container{position:relative; z-index:2}
.sectionDark h2{color:#fff}
.sectionDark p.lead{color:rgba(255,255,255,.68)}

.stepsRow{
  margin-top:34px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}
.stepCard{
  background:rgba(18,18,19,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:18px 18px;
  box-shadow:var(--shadow2);
  backdrop-filter: blur(6px);
}
.stepTop{display:flex; align-items:center; gap:12px}
.stepNum{font-weight:900; font-size:18px; color:var(--gold)}
.stepTitle{font-weight:800; font-size:13px}
.stepText{margin:10px 0 0; font-size:12px; color:rgba(255,255,255,.72); line-height:1.55}

.centerCta{margin-top:26px; text-align:center}

/* testimonials */
.testimonials{padding:70px 0 68px; position:relative; color:#fff; overflow:hidden; background:var(--dark)}
.testimonials::after{content:""; position:absolute; inset:0; background:url('./assets/hero.jpg') center/cover no-repeat; filter: brightness(.36) contrast(1.05); z-index:0}
.testimonials::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.8)); z-index:1}
.testimonials .container{position:relative; z-index:2}

.starsRow{display:flex; justify-content:center; align-items:center; gap:10px; margin-top:10px; color:rgba(255,255,255,.75); font-size:12px}
.stars{display:inline-flex; gap:3px; color:var(--gold)}
.stars svg{width:16px; height:16px}

.trustLink{
  display:flex;
  justify-content:center;
  align-items:center;
  margin:4px auto 0;
  color:rgba(255,255,255,.78);
  font-size:12px;
  text-decoration:none;
}
.trustLink:hover{color:#fff; text-decoration:underline; text-decoration-color:rgba(199,164,106,.55)}

.reviewGrid{margin-top:26px; display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.review{
  background:rgba(26,26,28,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:16px;
  backdrop-filter: blur(6px);
}
.reviewHead{display:flex; align-items:center; gap:10px}
.avatar{width:34px; height:34px; border-radius:999px; background:rgba(255,255,255,.12); display:grid; place-items:center; font-weight:800}
.reviewName{font-weight:800; font-size:12px}
.reviewText{margin:10px 0 0; font-size:12px; color:rgba(255,255,255,.78); line-height:1.55}

/* bottom cta bar */
.bottomBarWrap{padding:0 0 58px; background:var(--bg)}
.bottomBar{
  max-width:var(--max);
  margin:0 auto;
  background:var(--dark);
  border-radius:14px;
  color:#fff;
  padding:18px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  box-shadow:var(--shadow2);
}
.bottomBar .left h3{margin:0; font-size:18px; font-weight:900}
.bottomBar .left p{margin:6px 0 0; font-size:12px; color:rgba(255,255,255,.70)}
.bottomActions{display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.btnCall{
  display:inline-flex; gap:10px; align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:800;
  font-size:13px;
}
.btnCall:hover{border-color:rgba(255,255,255,.18)}


.btnWhats{
  display:inline-flex; gap:10px; align-items:center;
  background:rgba(199,164,106,.16);
  border:1px solid rgba(199,164,106,.35);
  color:#fff;
  padding:10px 14px;
  border-radius:10px;
  font-weight:900;
  font-size:13px;
}
.btnWhats svg{width:14px; height:14px}
.btnWhats:hover{border-color:rgba(199,164,106,.55)}

/* footer */
.footer{background:var(--dark); color:rgba(255,255,255,.78); padding:46px 0 18px}
.footerTop{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:26px; padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.08)}
.footer h4{margin:0 0 10px; font-size:13px; color:var(--gold); font-weight:900}
.footer p{margin:0; font-size:12px; line-height:1.6; color:rgba(255,255,255,.72)}
.footer a{color:rgba(255,255,255,.76)}
.footer a:hover{color:#fff}
.footerList{display:flex; flex-direction:column; gap:10px; font-size:12px}
.footerBottom{padding-top:14px; display:flex; justify-content:center; font-size:11px; color:rgba(255,255,255,.45)}

/* page hero (inner pages) */
.pageHero{
  background:linear-gradient(180deg, #1a1b1e, #101114);
  color:#fff;
  padding:64px 0 52px;
}
.pageHero h1{margin:0; text-align:center; font-size:48px; font-weight:900}
.pageHero h1 .gold{color:var(--gold)}
.pageHero p{margin:10px auto 0; text-align:center; max-width:720px; font-size:13px; color:rgba(255,255,255,.68); line-height:1.6}

/* Leistungen cards */
.cards3{
  margin-top:-22px;
  padding-top:0;
}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px}
.serviceCard .bullets{margin:12px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px}
.serviceCard .bullets li{display:flex; gap:10px; align-items:flex-start; color:var(--muted); font-size:12px; line-height:1.45}
.serviceCard .bullets svg{
  width:18px; height:18px;
  color:var(--gold);
  background:#fff;
  border-radius:999px;
  padding:3px;
  box-sizing:border-box;
  margin-top:0;
  flex:0 0 18px;
}

/* Ablauf list */
.timelineWrap{background:var(--bg2); padding:58px 0}
.timelineTitle{font-size:26px; text-align:center; font-weight:900; margin:0}
.timeline{max-width:820px; margin:26px auto 0; display:flex; flex-direction:column; gap:12px}
.tItem{background:#fff; border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); display:flex; gap:12px; align-items:flex-start; border:1px solid rgba(16,18,20,.06)}
.tNum{width:26px; height:26px; border-radius:999px; background:#111; color:#fff; display:grid; place-items:center; font-size:12px; font-weight:900; flex:0 0 auto}
.tBody h4{margin:1px 0 4px; font-size:13px; font-weight:900}
.tBody p{margin:0; font-size:12px; color:var(--muted); line-height:1.55}

.note{
  max-width:880px;
  margin:26px auto 0;
  background: #fff4e7;
  border:1px solid rgba(230,145,56,.35);
  border-radius:12px;
  padding:14px 16px;
  color:#8a4c1a;
  box-shadow:0 10px 26px rgba(16,18,20,.06);
}
.note h4{margin:0 0 8px; font-size:13px; font-weight:900; display:flex; gap:10px; align-items:center}
.note ul{margin:0; padding-left:16px; font-size:12px; line-height:1.6}

/* simple centered CTA */
.centerCtaBlock{padding:60px 0 66px}
.centerCtaBlock h2{font-size:30px}

/* contact cards */
.contactGrid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:30px}
.contactCard{padding:26px 20px; text-align:center}
.contactCard .big{font-weight:900; margin-top:10px; font-size:13px}
.contactCard .help{margin:10px 0 0; font-size:12px; color:var(--muted); line-height:1.55}

.pillRow{display:flex; justify-content:center; gap:34px; margin-top:26px; color:var(--muted); font-size:12px; flex-wrap:wrap}
.pill{display:flex; gap:10px; align-items:center}
.pill svg{width:18px; height:18px; color:var(--gold)}
.pill b{color:#222}

/* faq */
.faqWrap{padding:54px 0}
.faqTitle{margin:0; text-align:center; font-size:30px; font-weight:900}
.faqList{max-width:820px; margin:26px auto 0; display:flex; flex-direction:column; gap:14px}
.faq{
  background:#fff;
  border-radius:12px;
  padding:14px 16px;
  border:1px solid rgba(16,18,20,.06);
  box-shadow:var(--shadow);
}
.faq summary{cursor:pointer; font-weight:900; font-size:13px}
.faq p{margin:10px 0 0; font-size:12px; color:var(--muted); line-height:1.6}

/* contact page banner */
.banner{
  max-width:980px;
  margin:10px auto 0;
  background:linear-gradient(180deg, #1a1b1e, #101114);
  border-radius:18px;
  padding:26px 22px;
  color:#fff;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  box-shadow:var(--shadow2);
}
.banner h3{margin:0; font-size:18px; font-weight:900}
.banner p{margin:6px 0 0; font-size:12px; color:rgba(255,255,255,.68)}

/* form */
.formWrap{padding:44px 0 66px; overflow-x:hidden}
.stepsTrack{max-width:920px; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; gap:10px; padding:0 6px}
.stepBubble{
  width:28px; height:28px; border-radius:999px;
  display:grid; place-items:center;
  font-size:12px;
  font-weight:900;
  background:#d7d9dd;
  color:#fff;
}
.stepBubble.active{background:var(--gold)}
.stepBubble.done{background:#111}
.stepLine{flex:1; height:2px; background:#d7d9dd; min-width:28px; max-width:160px}
.stepLine.done{background:#111}
.stepLabelRow{max-width:920px; margin:8px auto 0; display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; font-size:12px; color:#8a8f96}
.stepLabelRow span{justify-self:center}
.stepLabelRow span.active{color:#2c2f33; font-weight:800}

.formCard{max-width:920px; margin:18px auto 0; background:#fff; border-radius:18px; padding:26px; box-shadow:var(--shadow); border:1px solid rgba(16,18,20,.06)}
.formCard h3{margin:0 0 18px; font-size:20px; font-weight:900}

.field{margin-top:14px}
.label{font-weight:800; font-size:12px}
.req{color:var(--gold); font-weight:900}
.control{margin-top:8px}
.input, .select, .textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(16,18,20,.10);
  background:#fbfbfc;
  padding:12px 12px;
  font-size:13px;
  outline:none;
}
.textarea{min-height:110px; resize:vertical}

.pills{display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:10px}
.pillBtn{
  border-radius:12px;
  border:1px solid rgba(16,18,20,.12);
  background:#fff;
  padding:12px 10px;
  font-weight:800;
  font-size:12px;
  color:#141618;
  outline:none;
  -webkit-tap-highlight-color: transparent;
  cursor:pointer;
}
.pillBtn:hover{border-color:rgba(16,18,20,.20)}
.pillBtn:focus-visible{box-shadow:0 0 0 3px rgba(199,164,106,.18)}
.pillBtn.active{
  border-color:rgba(199,164,106,.75);
  color:var(--gold);
  background:rgba(199,164,106,.06);
  box-shadow:0 0 0 3px rgba(199,164,106,.14)
}

/* anchors for scrollIntoView with sticky header */
.scrollAnchor{scroll-margin-top:110px}
.toast{scroll-margin-top:110px}

.inline2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.checkboxGrid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px}
.check{
  display:flex; gap:10px; align-items:flex-start;
  border:1px solid rgba(16,18,20,.08);
  background:#fff;
  border-radius:12px;
  padding:10px 10px;
}
.check input{margin-top:2px}
.check b{font-size:12px}
.check span{font-size:12px; color:var(--muted); line-height:1.45}

.formActions{display:flex; justify-content:space-between; margin-top:22px; gap:12px; flex-wrap:wrap}
.btnSecondary{
  display:inline-flex;
  gap:10px;
  align-items:center;
  background:#fff;
  border:1px solid rgba(16,18,20,.12);
  color:#222;
  padding:12px 16px;
  border-radius:10px;
  font-weight:900;
  font-size:13px;
  cursor:pointer;
}
.btnSecondary:hover{border-color:rgba(16,18,20,.18)}

.toast{
  max-width:920px;
  margin:18px auto 0;
  background:#eafff2;
  border:1px solid rgba(25,165,92,.22);
  color:#1d6a40;
  padding:12px 14px;
  border-radius:12px;
  font-size:12px;
}



/* small WhatsApp helper inside form */
.whatsHint{
  margin-top:14px;
  padding:14px 14px;
  border-radius:14px;
  background:rgba(199,164,106,.10);
  border:1px solid rgba(199,164,106,.22);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.whatsHintTitle{font-weight:900; color:#2b2f35; font-size:13px}
.whatsHintText{color:#555b63; font-size:12px; margin-top:3px}
.btnWhatsInline{
  display:inline-flex;
  gap:10px;
  align-items:center;
  background:var(--dark);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  font-weight:900;
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  white-space:nowrap;
}
.btnWhatsInline:hover{border-color:rgba(255,255,255,.22)}
.btnWhatsInline svg{width:14px; height:14px}

/* photo preview */
.photoPreview{
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.photoThumb{
  border-radius:12px;
  overflow:hidden;
  border:1px solid rgba(16,18,20,.10);
  background:#fff;
  aspect-ratio: 1 / 1;
}
.photoThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* loading state */
.btnPrimary.isLoading{
  opacity:.75;
  pointer-events:none;
}
/* responsive */
@media (max-width: 980px){
  .cards4{grid-template-columns:repeat(2,1fr)}
  .stepsRow{grid-template-columns:repeat(2,1fr)}
  .reviewGrid{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
  .contactGrid{grid-template-columns:1fr}
  .footerTop{grid-template-columns:1fr}
  .inline2{grid-template-columns:1fr}
  .pills{grid-template-columns:1fr}
  .stepLine{flex:1; height:2px; background:#d7d9dd; min-width:28px; max-width:160px}
  .photoPreview{grid-template-columns:repeat(3,1fr)}
}

@media (max-width: 720px){
  .container{padding:0 16px}
  .topbar{display:flex}
  .topbar .topbarInner{justify-content:center; gap:14px}
  .navLinks{display:none}
  .hero{min-height:520px}
  .heroTitle{font-size:clamp(30px, 8vw, 40px)}
  .pageHero h1{font-size:clamp(30px, 8vw, 40px)}
  .bottomBar{flex-direction:column; align-items:flex-start}
  .banner{flex-direction:column; align-items:flex-start}
  .stepsRow{grid-template-columns:1fr}
  .photoPreview{grid-template-columns:repeat(2,1fr)}
}

@media (max-width: 360px){
  .topbar .item span{display:none}

  .heroContent{padding:58px 0 34px}
  .heroSub{font-size:13px}
}


/* Turnstile captcha */
.captchaWrap{margin-top:14px; display:flex; flex-direction:column; gap:10px;}
.captchaRow{display:flex; align-items:center; justify-content:center; width:100%; overflow:visible}
.captchaHint{font-size:12px; color:#6f747a; line-height:1.55; margin-top:6px}
.captchaHint a{color:inherit; text-decoration:underline; text-underline-offset:3px}
.captchaError{background:rgba(199,170,106,0.12); border:1px solid rgba(199,170,106,0.35); color:#1a1a1a; padding:10px 12px; border-radius:12px; font-size:13px}
@media (max-width: 420px){
  .stepLine{max-width:80px}
}
@media (max-width: 360px){
  .stepLine{max-width:60px}
}

#turnstileHolder{display:flex; justify-content:center; width:100%; max-width:100%; overflow:hidden}
#turnstileHolder > div{max-width:100%}

/* --- Form: harden against horizontal overflow on Step 2/3 --- */
.formWrap .container{overflow-x:hidden}
.formCard{max-width:920px}
.formCard *{min-width:0}

/* Step 2 (checkbox cards) should be shrinkable and wrap safely */
.checkboxGrid{grid-template-columns:repeat(2, minmax(0, 1fr))}
.check{min-width:0}
.check b,.check span{overflow-wrap:anywhere; word-break:break-word}

/* On small screens we use 1 column to avoid any edge overflow */
@media (max-width: 720px){
  .checkboxGrid{grid-template-columns:1fr}
}

/* Step 3 Turnstile: keep inside card on all screens */
.captchaWrap{max-width:100%; overflow:hidden}
.captchaRow{display:flex; align-items:center; justify-content:center; width:100%; overflow:visible}
#turnstileHolder{display:flex; justify-content:center; width:100%; max-width:100%; overflow:hidden}
#turnstileHolder iframe{max-width:100%}


@media (max-width:360px){#turnstileHolder{display:flex; justify-content:center; width:100%; max-width:100%; overflow:hidden}}


/* Turnstile responsive scale (prevents oversized widget on phones) */
#turnstileHolder > div{transform-origin:center top}
@media (max-width: 520px){
  #turnstileHolder > div{transform:scale(0.92)}
}
@media (max-width: 420px){
  #turnstileHolder > div{transform:scale(0.88)}
}
@media (max-width: 360px){
  #turnstileHolder > div{transform:scale(0.84)}
}



/* button icon sizing (prevents oversized SVGs on mobile) */
.btnPrimary svg, .btnSecondary svg, .btnGhost svg, .btnWhatsInline svg{
  width:14px;
  height:14px;
  flex:0 0 auto;
}
.btnPrimary svg, .btnGhost svg{color:rgba(255,255,255,.9)}
.btnSecondary svg{color:#222}

@media (max-width:520px){
  .formActions{justify-content:flex-start}
}


/* checkbox bigger (minimal change) */
.formCard input[type="checkbox"]{
  width:18px;
  height:18px;
  accent-color: var(--gold);
}
@supports (-webkit-touch-callout: none){
  /* iOS Safari: visual size fix */
  .formCard input[type="checkbox"]{ transform: scale(1.15); transform-origin:left top; }
}


/* === Mobile overflow hardening (Form Step 2/3) === */
html, body{max-width:100%; overflow-x:hidden}
#app{overflow-x:hidden}
.formWrap{overflow-x:hidden}
.formWrap .container{overflow-x:hidden}
.formCard{max-width:920px; width:100%; box-sizing:border-box}
.formCard *{min-width:0}

/* Step 2 grids must be shrinkable */
.checkboxGrid{grid-template-columns:repeat(2, minmax(0, 1fr))}
@media (max-width: 720px){
  .checkboxGrid{grid-template-columns:1fr}
}

/* Checkbox size (bigger, no other changes) */
.formCard input[type="checkbox"]{
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
  accent-color: var(--gold);
}
@supports (-webkit-touch-callout: none){
  .formCard input[type="checkbox"]{ transform: scale(1.2); transform-origin:left top; }
}

/* Turnstile: keep inside screen + landscape feel */
.captchaWrap{max-width:100%; overflow:hidden}
.captchaRow{display:flex; justify-content:center; width:100%; overflow:hidden}

/* create a landscape “slot” look (centered) */
#turnstileHolder{display:flex; justify-content:center; width:100%; max-width:100%; overflow:hidden}
#turnstileHolder > div{
  max-width:100%;
}
#turnstileHolder iframe{
  max-width:100%;
}

/* If Turnstile returns a larger challenge, scale it down without creating horizontal scroll */
@media (max-width: 520px){
  #turnstileHolder > div{transform:scale(0.92); transform-origin:center top}
}
@media (max-width: 420px){
  #turnstileHolder > div{transform:scale(0.88); transform-origin:center top}
}
@media (max-width: 360px){
  #turnstileHolder > div{transform:scale(0.84); transform-origin:center top}
}

.captchaAutoNote{font-size:11px; color:#8a8f96; margin-top:6px; text-align:center}


/* iOS input zoom fix (prevents Safari from zooming the form on focus) */
@supports (-webkit-touch-callout: none){
  .input, .select, .textarea{
    font-size:16px;
    padding:11px 12px; /* keep visual height similar */
  }
}


/* checkbox size fix (bigger, consistent) */
.formCard input[type="checkbox"]{
  width:20px;
  height:20px;
  min-width:20px;
  min-height:20px;
  accent-color: var(--gold);
}
@supports (-webkit-touch-callout: none){
  .formCard input[type="checkbox"]{ transform:scale(1.1); transform-origin:left top; }
}


/* Turnstile fit (landscape, no overflow) */
#turnstileHolder > div{transform-origin:center top}
@media (max-width: 420px){
  #turnstileHolder > div{transform:scale(0.92)}
}
@media (max-width: 360px){
  #turnstileHolder > div{transform:scale(0.88)}
}
@media (max-width: 330px){
  #turnstileHolder > div{transform:scale(0.84)}
}

@media (max-width:360px){.formCard{padding:18px}}

@media (max-width:330px){.formCard{padding:16px}}

.bannerBtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}

/* Partner logos */
.partnerLogoWrap{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:14px 12px;
  border-radius:16px;
  background:#111;
  border:1px solid rgba(255,255,255,.06);
  margin-bottom:12px;
}
.partnerLogo{height:46px; width:auto; max-width:100%; object-fit:contain; opacity:0.98}
.partnerBtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
@media (max-width:520px){.partnerLogo{height:42px}}