/* bolha.com · kako deluje — compact screenshot + mobile */
:root{
  --bh-blue:#1E88C7;
  --bh-blue-dark:#1776ad;
  --bh-pink:#ed0080;
  --bh-ink:#3c3c3b;
  --bh-muted:#777;
  --bh-line:#e8e8e8;
  --bh-zebra:#f7f7f7;
  --bh-bg:#f2f2f2;
  --bh-green:#2e9e5b;
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:14px}
body.bh-how-page{
  margin:0;
  font-family:"Open Sans","Segoe UI",Arial,Helvetica,sans-serif;
  color:var(--bh-ink);
  background:var(--bh-bg);
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  padding-bottom:0;
}

.an-headerbar{height:3px;background:var(--bh-pink)}
.an-headerwrap{background:#fff;border-bottom:1px solid var(--bh-line)}
.an-headermid{
  max-width:980px;margin:0 auto;padding:8px 14px;
  display:flex;align-items:center;gap:12px;min-height:52px;
}
.an-logo{display:block;line-height:0}
.an-logo img{
  height:44px;width:auto;max-width:min(220px,62vw);display:block;object-fit:contain;
  filter:contrast(1.08) saturate(1.06);
}
.bh-how-backlink{
  margin-left:auto;font-size:11px;font-weight:700;color:var(--bh-blue);
  text-decoration:none;border:1px solid var(--bh-blue);padding:5px 10px;border-radius:4px;
  white-space:nowrap;
}
.bh-how-backlink:hover{background:#eaf5fb}

.bh-how-wrap{max-width:980px;margin:0 auto;padding:8px 14px 20px}
.bh-how-crumb{
  font-size:12px;color:var(--bh-pink);font-weight:700;margin:0 0 8px;
}
.bh-how-crumb a{color:var(--bh-pink);text-decoration:none}
.bh-how-crumb span{color:#ccc;margin:0 5px;font-weight:600}

/* —— HERO —— */
.bh-how-hero{
  background:#fff;border:1px solid var(--bh-line);border-radius:4px;overflow:hidden;
  border-top:3px solid var(--bh-pink);margin-bottom:10px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.bh-how-hero-inner{
  padding:12px 14px;
  display:grid;gap:12px;align-items:stretch;
}
.bh-how-eyebrow{
  margin:0 0 4px;font-size:10px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--bh-muted);
}
.bh-how-h1{
  margin:0 0 6px;font-size:18px;font-weight:800;line-height:1.22;color:var(--bh-pink);
  letter-spacing:-.01em;
}
.bh-how-lead{margin:0;font-size:13px;line-height:1.45;color:#555;max-width:54ch}
.bh-how-pills{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.bh-how-pill{
  font-size:10px;font-weight:700;padding:3px 8px;border-radius:4px;
  border:1px solid #f3b8d4;color:var(--bh-pink);background:#fff5fa;
}

.bh-how-buyer{
  display:flex;gap:10px;align-items:flex-start;
  margin:0;padding:10px 12px;border-radius:4px;
  border:1px solid #b7e0c4;background:#f4fbf6;
}
.bh-how-buyer-av{
  width:40px;height:40px;border-radius:7px;flex-shrink:0;
  background:var(--bh-pink);color:#fff;font-weight:800;font-size:13px;
  display:flex;align-items:center;justify-content:center;
}
.bh-how-buyer-label{
  font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--bh-pink);margin:0 0 1px;
}
.bh-how-buyer-name{font-size:14px;font-weight:800;color:var(--bh-ink);margin:0 0 4px}
.bh-how-buyer-meta{margin:0;padding:0;list-style:none}
.bh-how-buyer-meta li{
  display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  color:var(--bh-green);margin:0 0 2px;
}
.bh-how-buyer-meta li.is-muted{color:#666}

/* —— SECTIONS —— */
.bh-how-sec{
  background:#fff;border:1px solid var(--bh-line);border-radius:4px;
  margin-bottom:10px;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.bh-how-sec-hdr{
  padding:8px 12px;border-bottom:1px solid var(--bh-line);background:#fafafa;
  font-size:13px;font-weight:800;color:var(--bh-ink);
}
.bh-how-sec-body{padding:10px 12px}
.bh-how-sec--trust{margin-bottom:0}

/* —— STEPS —— */
.bh-how-steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:8px;
}
.bh-how-step{
  position:relative;display:grid;
  grid-template-columns:22px 26px 1fr;
  gap:6px 8px;align-items:start;
  padding:10px;border:1px solid #e4e4e4;border-radius:4px;background:#fff;
}
.bh-how-step-ico{
  width:26px;height:26px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  color:var(--bh-pink);background:#fff5fa;border:1px solid #f3b8d4;
  font-size:12px;
}
.bh-how-num{
  width:22px;height:22px;border-radius:999px;
  background:var(--bh-pink);color:#fff;font-size:11px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.bh-how-step > p{margin:0;grid-column:1 / -1;font-size:12px;line-height:1.35;color:#444}
.bh-how-step .bh-how-num{grid-column:1;grid-row:1}
.bh-how-step .bh-how-step-ico{grid-column:2;grid-row:1}
.bh-how-step > p{grid-column:3;grid-row:1}
.bh-how-step strong{color:var(--bh-pink);font-weight:800}
.bh-how-step--pay{border-color:#f0d78c;background:#fffdf6}
.bh-how-step-note{
  margin:8px 0 0;padding:8px 10px;border-radius:4px;
  background:#fff8e6;border:1px solid #f0d78c;
  font-size:12px;line-height:1.4;color:#5c4a1a;
}
.bh-how-step-note strong{color:#856404}
.bh-how-step-note em{font-style:normal;font-weight:800;color:var(--bh-pink)}

/* —— WARN —— */
.bh-how-warn{
  margin:0;padding:10px 12px;border-radius:4px;
  background:#fff8e6;border:1px solid #f0d78c;
  box-shadow:0 1px 2px rgba(133,100,4,.06);
}
.bh-how-warn-head{
  display:flex;align-items:center;gap:7px;margin:0 0 8px;
  color:#856404;
}
.bh-how-warn-head i{font-size:14px}
.bh-how-warn-head h2{margin:0;font-size:13px;font-weight:800;line-height:1.25}
.bh-how-warn-list{
  margin:0;padding:0 0 0 16px;font-size:12px;line-height:1.4;color:#5c4a1a;
  columns:1;
}
.bh-how-warn-list li{margin:0 0 5px;break-inside:avoid}
.bh-how-warn-list li:last-child{margin-bottom:0}
.bh-how-warn-list strong{color:#3c3c3b}
.bh-how-warn-foot{
  margin:8px 0 0;padding-top:8px;border-top:1px solid #f0d78c;
  font-size:11px;color:#856404;
}
.bh-how-warn-foot a{color:var(--bh-blue);font-weight:700;text-decoration:none}
.bh-how-warn-foot a:hover{text-decoration:underline}

.bh-how-mid{display:grid;gap:10px;margin:0 0 10px}
.bh-how-mid-side{display:grid;gap:10px;min-width:0}
.bh-how-trust-grid{display:grid;gap:8px;margin:0}
.bh-how-trust-card{
  background:#fff;border:1px solid var(--bh-line);border-radius:4px;padding:10px 12px;
  font-size:12px;line-height:1.4;color:#555;
}
.bh-how-trust-card i{color:var(--bh-green);margin-bottom:4px;display:inline-block;font-size:13px}
.bh-how-trust-card strong{color:var(--bh-ink)}

.bh-how-trust p{margin:0 0 5px;font-size:12px;line-height:1.4;color:#444}
.bh-how-trust p:last-child{margin-bottom:0}
.bh-how-trust-note{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--bh-line);
  font-size:11px;line-height:1.4;color:var(--bh-muted);
}
.bh-how-trust-note strong{color:var(--bh-pink)}

.bh-how-bottom{display:grid;gap:10px;margin:0 0 10px}

/* —— FAQ —— */
.bh-how-faq details{
  border:1px solid var(--bh-line);border-radius:4px;margin-bottom:6px;overflow:hidden;
}
.bh-how-faq details:last-child{margin-bottom:0}
.bh-how-faq summary{
  list-style:none;cursor:pointer;padding:8px 10px;font-size:12px;font-weight:700;
  display:flex;justify-content:space-between;gap:8px;align-items:center;
}
.bh-how-faq summary::-webkit-details-marker{display:none}
.bh-how-faq summary:hover{background:#fff5fa}
.bh-how-faq-peek{font-size:11px;font-weight:700;color:var(--bh-blue);white-space:nowrap}
.bh-how-faq details[open] .bh-how-faq-peek{display:none}
.bh-how-faq p{margin:0;padding:0 10px 10px;font-size:12px;line-height:1.45;color:#555}

.bh-how-do{
  margin:0 0 10px;padding:10px 12px;border:1px dashed #cfd8dc;border-radius:4px;background:#f7fbfe;
  font-size:12px;line-height:1.45;color:#444;
}
.bh-how-do strong{color:var(--bh-blue)}
.bh-how-cta--inline{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  padding:0;text-align:left;
}
.bh-how-cta-btn{
  display:inline-block;background:var(--bh-blue);color:#fff!important;text-decoration:none!important;
  font-size:13px;font-weight:800;padding:10px 16px;border-radius:4px;
  box-shadow:0 2px 0 var(--bh-blue-dark);
}
.bh-how-cta-btn:hover{background:var(--bh-blue-dark)}
.bh-how-help{margin:0;font-size:11px;color:var(--bh-muted)}
.bh-how-help a{color:var(--bh-blue);font-weight:700;text-decoration:none}
.bh-how-help a:hover{text-decoration:underline}

.bh-how-foot{
  margin:0;padding:8px 4px;text-align:center;font-size:11px;color:var(--bh-muted);
}
.bh-how-foot a{color:var(--bh-blue);text-decoration:none;font-weight:600}

.bh-how-footer{
  margin-top:4px;padding:10px 12px;background:#fff;border:1px solid var(--bh-line);
  border-radius:4px;font-size:11px;color:var(--bh-muted);
}
.bh-how-footer-row{
  display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:space-between;align-items:center;
}
.bh-how-footer-links{display:flex;flex-wrap:wrap;gap:8px 12px}
.bh-how-footer-links a{color:var(--bh-blue);font-weight:700;text-decoration:none}
.bh-how-footer-links a:hover{text-decoration:underline}
.bh-how-footer-legal{
  margin:8px 0 0;padding-top:8px;border-top:1px solid var(--bh-line);
  font-size:10px;line-height:1.45;color:#888;max-width:70ch;
}

/* sticky CTA — mobile only */
.bh-how-sticky{display:none}

/* ========== DESKTOP: screenshot-friendly grouping ========== */
@media(min-width:880px){
  .bh-how-hero-inner{
    grid-template-columns:1.35fr .9fr;
    gap:14px;align-items:center;
  }
  .bh-how-h1{font-size:19px}
  .bh-how-steps--grid4{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
  }
  .bh-how-steps--grid5{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:8px;
  }
  .bh-how-step{
    grid-template-columns:22px 26px 1fr;
    align-items:start;
  }
  .bh-how-step .bh-how-num{grid-column:1;grid-row:1}
  .bh-how-step .bh-how-step-ico{display:flex;grid-column:2;grid-row:1}
  .bh-how-step > p{grid-column:3;grid-row:1;align-self:center}
  .bh-how-mid{
    grid-template-columns:1.15fr .95fr;
    gap:10px;align-items:start;
  }
  .bh-how-warn-list{columns:2;column-gap:14px}
  .bh-how-trust-grid{grid-template-columns:1fr 1fr}
  .bh-how-bottom{
    grid-template-columns:1.2fr .9fr;
    gap:10px;align-items:start;
  }
  .bh-how-sec--faq,
  .bh-how-sec--do{margin-bottom:0}
  .bh-how-sticky{display:none!important}
}

/* tablet */
@media(min-width:640px) and (max-width:879px){
  .bh-how-steps--grid4{grid-template-columns:1fr 1fr}
  .bh-how-steps--grid5{grid-template-columns:1fr 1fr}
  .bh-how-trust-grid{grid-template-columns:1fr 1fr}
}

/* ========== MOBILE polish ========== */
@media(max-width:639px){
  body.bh-how-page{padding-bottom:72px}
  .bh-how-h1{font-size:16px}
  .an-logo img{height:40px}
  .an-headermid{padding:8px 10px;min-height:48px}
  .bh-how-wrap{padding:6px 10px 16px}
  .bh-how-backlink{padding:4px 8px;font-size:10px}
  .bh-how-crumb{font-size:11px;margin-bottom:6px}
  .bh-how-faq-peek{display:none}
  .bh-how-hero-inner{padding:10px}
  .bh-how-buyer{padding:8px 10px}
  /* compact horizontal-ish step rhythm */
  .bh-how-step{
    grid-template-columns:22px 1fr;
    padding:8px 10px;
  }
  .bh-how-step .bh-how-step-ico{display:none}
  .bh-how-step > p{grid-column:2;grid-row:1;font-size:12px}
  .bh-how-warn-list{font-size:11.5px}
  .bh-how-sec--do .bh-how-cta--inline{display:none} /* CTA goes to sticky */
  .bh-how-sticky{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.94);border-top:1px solid var(--bh-line);
    box-shadow:0 -4px 16px rgba(0,0,0,.06);
    backdrop-filter:blur(8px);
  }
  .bh-how-sticky .bh-how-cta-btn{
    width:100%;text-align:center;padding:12px 16px;font-size:14px;
  }
}

.bh-how-sec--platform{
  max-width:980px;margin:0 auto 10px;padding:0 14px;
}
.bh-how-sec--platform .bh-how-sec-body{
  background:#f0f8ff;border:1px solid #c5e3f6;border-radius:6px;padding:14px 16px;
  font-size:13px;line-height:1.5;color:#444;
}
.bh-how-sec--consent .bh-how-consent-check{
  display:flex;gap:10px;align-items:flex-start;margin:14px 0;
  font-size:13px;line-height:1.45;color:#444;cursor:pointer;
}
.bh-how-sec--consent .bh-how-consent-check input{margin-top:3px;flex-shrink:0}
.bh-how-consent-done{
  display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:12px 14px;
  background:#f4fbf6;border:1px solid #b7e0c4;border-radius:6px;
  font-size:13px;line-height:1.45;color:#1b5e20;font-weight:700;
}
.bh-how-consent-done i{color:#2e9e5b;margin-top:2px}