/* hero-b · take B, "Your brand breathes". The headline is the stage: real HTML words the pixel stands on, and a slot
   (براندك · your brand) the visitor can fill with their own brand's name. Every rule is scoped to [data-part="hero-b"]. */
[data-part="hero-b"] { min-height: calc(100svh - var(--hd)); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(84px, 9vw, 150px) clamp(48px, 6vw, 96px); overflow: clip; }
[data-part="hero-b"] .hb-h1 { font-size: clamp(60px, 10.4vw, 176px); line-height: 1.24; margin-bottom: clamp(28px, 3.4vw, 56px); text-wrap: balance; }
html[lang="en"] [data-part="hero-b"] .hb-h1 { font-size: clamp(50px, 8.6vw, 148px); line-height: 1.02; letter-spacing: -.045em; }
[data-part="hero-b"] .hb-w { display: inline-block; }
[data-part="hero-b"] .hb-slot { white-space: nowrap; unicode-bidi: isolate; }
[data-part="hero-b"] .hb-br { display: none; }

[data-part="hero-b"] .hb-row { align-items: end; row-gap: 40px; }
[data-part="hero-b"] .hb-copy { grid-column: 1 / span 6; }
[data-part="hero-b"] .hb-lede { margin-bottom: clamp(24px, 2.6vw, 36px); color: var(--ink-2); text-wrap: pretty; }
[data-part="hero-b"] .hb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* Try it on your own brand (needs the script) */
[data-part="hero-b"] .hb-try { grid-column: 8 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
[data-part="hero-b"] .hb-try label { font-size: 15px; line-height: 1.4; color: var(--ink-2); }
[data-part="hero-b"] .hb-field { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid rgba(234, 220, 195, .34); padding-bottom: 8px; transition: border-color .2s ease; }
[data-part="hero-b"] .hb-field:focus-within { border-bottom-color: var(--sand); }
[data-part="hero-b"] .hb-field input { flex: 1; min-width: 0; height: 48px; border: 0; background: transparent; color: var(--sand); font: 600 22px/1.2 var(--f-ar); outline: none; padding: 0; }
html[lang="en"] [data-part="hero-b"] .hb-field input { font-family: var(--f-en); letter-spacing: -.01em; }
[data-part="hero-b"] .hb-field input::placeholder { color: rgba(234, 220, 195, .4); }
[data-part="hero-b"] .hb-field .btn { min-height: 46px; padding: 0 20px; font-size: 16px; white-space: nowrap; flex: none; }
[data-part="hero-b"] .hb-note { min-height: 1.5em; color: var(--ink-2); }
html:not(.js) [data-part="hero-b"] .hb-try { display: none; }

[data-part="hero-b"] .hb-cv { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; display: none; }
[data-part="hero-b"].hb-playing .hb-cv { display: block; }
/* the pixel at rest is a plain, crisp element; the canvas only draws it while it moves */
[data-part="hero-b"] .hb-px { position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 18.5%; background: var(--wadi); z-index: 2; display: none; pointer-events: none; }
[data-part="hero-b"].hb-rest .hb-px { display: block; }
[data-part="hero-b"] .hb-poke { position: absolute; left: 0; top: 0; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22%; background: transparent; cursor: pointer; z-index: 4; display: none; overflow: hidden; }
[data-part="hero-b"] .hb-poke > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-part="hero-b"].hb-rest.hb-live .hb-poke { display: block; }

@media (max-width: 899px) {
  [data-part="hero-b"] { justify-content: flex-start; padding-block: clamp(64px, 17vw, 96px) 44px; }
  [data-part="hero-b"] .hb-br { display: inline; }
  [data-part="hero-b"] .hb-h1 { font-size: clamp(54px, 18.5vw, 104px); line-height: 1.22; }
  html[lang="en"] [data-part="hero-b"] .hb-h1 { font-size: clamp(46px, 14.6vw, 92px); line-height: 1.04; }
  [data-part="hero-b"] .g12 { grid-template-columns: minmax(0, 1fr); }
  [data-part="hero-b"] .g12 > * { grid-column: 1 / -1; }
}
@media (max-width: 380px) {
  [data-part="hero-b"] .hb-field .btn { padding: 0 14px; font-size: 15px; }
  [data-part="hero-b"] .hb-field input { font-size: 19px; }
}