/* 08 · start-b (take B): one question at a time, along a filmstrip, ending on the brief as a film slate.
   Scoped to [data-part="start-b"]. */
[data-part="start-b"] {
  --sb-s: 20px;
  --sb-field: rgba(234, 220, 195, .075);
  --sb-line: rgba(234, 220, 195, .3);
  --sb-soft: rgba(234, 220, 195, .16);
  --sb-bar: 30px;                 /* the slate's clapstick */
  --sb-padx: 24px;                /* how far the clapstick's canvas reaches past the slate's sides */
}
[data-part="start-b"] .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-part="start-b"] .sb-col { max-width: 840px; margin-inline: auto; }
[data-part="start-b"] .sb-head { display: grid; gap: 18px; margin-bottom: clamp(40px, 4.4vw, 60px); }
[data-part="start-b"] .sb-lede { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.6; color: var(--ink-2); max-width: 30em; }
html[lang="en"] [data-part="start-b"] .sb-lede { line-height: 1.45; }

/* ---------- the filmstrip: progress, and a way back to any answer ---------- */
[data-part="start-b"] .sb-strip { position: relative; background: var(--night); border-radius: 8px; padding: 0 12px; }
[data-part="start-b"] .sb-holes { height: 14px; background: repeating-linear-gradient(90deg, transparent 0 7px, rgba(234, 220, 195, .17) 7px 15px, transparent 15px 22px) 0 50% / 100% 6px no-repeat; }
[data-part="start-b"] .sb-frames { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
[data-part="start-b"] .sb-fr { position: relative; width: 100%; height: 50px; padding: 0; border: 0; border-radius: 4px; background: rgba(234, 220, 195, .06); color: rgba(234, 220, 195, .45); cursor: pointer; display: block; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
[data-part="start-b"] .sb-fr .num { position: absolute; top: 5px; inset-inline-start: 7px; font-size: 11px; line-height: 1; }
[data-part="start-b"] .sb-fr svg { position: absolute; top: 5px; inset-inline-start: 6px; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
[data-part="start-b"] .sb-fr.done { background: rgba(234, 220, 195, .15); color: rgba(234, 220, 195, .8); }
[data-part="start-b"] .sb-fr[aria-current="step"] { box-shadow: inset 0 0 0 2px var(--sand); color: var(--sand); background: rgba(234, 220, 195, .1); }
[data-part="start-b"] .sb-fr:disabled { cursor: default; }
[data-part="start-b"] .sb-fr:not(:disabled):hover { background: rgba(234, 220, 195, .2); }
[data-part="start-b"] .sb-fr:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

/* ---------- a question ---------- */
[data-part="start-b"] .sb-step { margin: 0; padding: 44px 0 0; border: 0; min-width: 0; }
[data-part="start-b"] .sb-q { display: block; float: left; width: 100%; padding: 0; margin: 0 0 26px; font: 700 clamp(32px, 3.6vw, 50px)/1.3 var(--f-ar); outline: none; }
html[lang="en"] [data-part="start-b"] .sb-q { font: 700 clamp(31px, 3.4vw, 48px)/1.08 var(--f-en); letter-spacing: -.028em; }
[data-part="start-b"] .sb-q + * { clear: both; }
[data-part="start-b"] .sb-qn { display: block; margin-bottom: 10px; font-size: 14px; color: var(--ink-2); letter-spacing: 0; }
[data-part="start-b"] .sb-q .w { display: inline-block; }

[data-part="start-b"] .sb-big { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
[data-part="start-b"] .sb-pick { position: relative; display: grid; align-content: start; gap: 8px; padding: 22px 22px 24px; min-height: 150px; border-radius: 14px; background: var(--sb-field); box-shadow: inset 0 0 0 1.5px var(--sb-soft); cursor: pointer; transition: background-color .18s ease, color .18s ease, box-shadow .18s ease; }
[data-part="start-b"] .sb-pick:hover { background: rgba(234, 220, 195, .12); }
[data-part="start-b"] .sb-pick input, [data-part="start-b"] .sb-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
[data-part="start-b"] .sb-pick:has(input:checked) { background: var(--sand); color: var(--date); box-shadow: none; }
[data-part="start-b"] .sb-pick:has(input:focus-visible) { outline: 2px solid var(--sand); outline-offset: 3px; }
[data-part="start-b"] .sb-pn { font: 700 28px/1.3 var(--f-ar); }
html[lang="en"] [data-part="start-b"] .sb-pn { font: 700 27px/1.1 var(--f-en); letter-spacing: -.02em; }
[data-part="start-b"] .sb-ps { font-size: 15.5px; line-height: 1.5; opacity: .78; }
html[lang="en"] [data-part="start-b"] .sb-ps { line-height: 1.4; }

[data-part="start-b"] .sb-chips { display: flex; flex-wrap: wrap; gap: 10px; }
[data-part="start-b"] .sb-chip { position: relative; display: block; }
[data-part="start-b"] .sb-chip > span { display: inline-flex; align-items: center; min-height: 54px; padding: 0 22px; border-radius: 999px; background: var(--sb-field); box-shadow: inset 0 0 0 1.5px var(--sb-soft); font-size: 18px; line-height: 1.2; transition: background-color .18s ease, color .18s ease; }
[data-part="start-b"] .sb-chip:hover > span { background: rgba(234, 220, 195, .12); }
[data-part="start-b"] .sb-chip input:checked + span { background: var(--sand); color: var(--date); box-shadow: none; }
[data-part="start-b"] .sb-chip input:focus-visible + span { outline: 2px solid var(--sand); outline-offset: 3px; }

[data-part="start-b"] .sb-fields { display: grid; gap: 24px; }
[data-part="start-b"] .sb-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; }
[data-part="start-b"] .sb-f { display: grid; gap: 10px; align-content: start; min-width: 0; }
[data-part="start-b"] .sb-l { font-size: 15.5px; line-height: 1.4; font-weight: 600; color: var(--ink-2); }
[data-part="start-b"] .sb-o { font-weight: 400; font-size: 14px; }
[data-part="start-b"] .sb-in { display: block; width: 100%; height: 60px; margin: 0; padding: 0 18px; font: 400 19px/1.3 var(--f-ar); color: var(--sand); background: var(--sb-field); border: 0; border-bottom: 2px solid var(--sb-line); border-radius: 10px 10px 3px 3px; transition: background-color .2s ease, border-color .2s ease; -webkit-appearance: none; appearance: none; }
html[lang="en"] [data-part="start-b"] .sb-in, [data-part="start-b"] .sb-in[dir="ltr"] { font-family: var(--f-en); }
[data-part="start-b"] .sb-in::placeholder { color: rgba(234, 220, 195, .38); }
[data-part="start-b"] .sb-in:focus { outline: none; background: rgba(234, 220, 195, .13); border-bottom-color: var(--sand); }
[data-part="start-b"] .sb-in:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }
[data-part="start-b"] .sb-ta { height: auto; min-height: 124px; padding: 16px 18px; line-height: 1.55; resize: vertical; }
[data-part="start-b"] .bad .sb-in, [data-part="start-b"] .sb-in[aria-invalid="true"] { border-bottom: 3px solid var(--sand); }
[data-part="start-b"] .sb-err { display: flex; align-items: flex-start; gap: 9px; font-size: 15.5px; line-height: 1.45; font-weight: 600; color: var(--sand); }
[data-part="start-b"] .sb-step > .sb-err { margin-top: 14px; }
[data-part="start-b"] .sb-err::before { content: "!"; flex: none; display: grid; place-items: center; width: 19px; height: 19px; margin-top: 1px; border-radius: 4px; background: var(--sand); color: var(--date); font: 700 13px/1 var(--f-en); }
[data-part="start-b"] .sb-err[hidden] { display: none; }
[data-part="start-b"] .sb-err [data-k] { display: none; }
[data-part="start-b"] .sb-err[data-k="empty"] [data-k="empty"], [data-part="start-b"] .sb-err[data-k="bad"] [data-k="bad"] { display: inline; }

/* ---------- the slate: the brief, as the first frame of the take ---------- */
[data-part="start-b"] .sb-last .sb-q { margin-bottom: 18px; }
[data-part="start-b"] .sb-slate { position: relative; max-width: 640px; margin: 104px 0 0; padding-top: calc(var(--sb-bar) * 2); }
[data-part="start-b"] .sb-stick { position: absolute; left: calc(-1 * var(--sb-padx)); top: -120px; width: calc(100% + 2 * var(--sb-padx)); height: calc(120px + var(--sb-bar) * 2 + 2px); max-width: none; pointer-events: none; }
[data-part="start-b"] .sl-body { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--night); color: var(--sand); border-radius: 0 0 12px 12px; transform-origin: 50% 0; }
[data-part="start-b"] .sl-c { min-width: 0; padding: 14px 18px 16px; border-top: 1px solid rgba(234, 220, 195, .16); border-inline-start: 1px solid rgba(234, 220, 195, .16); overflow-wrap: anywhere; }
[data-part="start-b"] .sl-c:nth-child(3n + 2), [data-part="start-b"] .sl-prod, [data-part="start-b"] .sl-note { border-inline-start: 0; }
[data-part="start-b"] .sl-prod { grid-column: 1 / -1; padding-top: 18px; padding-inline-end: 72px; border-top: 0; }
[data-part="start-b"] .sl-from { grid-column: span 2; }
[data-part="start-b"] .sl-c:nth-child(5) { border-inline-start: 0; }
[data-part="start-b"] .sl-note { grid-column: 1 / -1; }
[data-part="start-b"] .sl-k { display: block; margin-bottom: 4px; font-size: 13px; line-height: 1.3; color: rgba(234, 220, 195, .58); }
[data-part="start-b"] .sl-k .en { font: 500 11px/1.3 var(--f-num); text-transform: uppercase; letter-spacing: .1em; }
[data-part="start-b"] .sl-v { display: block; font: 700 21px/1.35 var(--f-ar); }
html[lang="en"] [data-part="start-b"] .sl-v { font: 650 20px/1.2 var(--f-en); letter-spacing: -.01em; }
[data-part="start-b"] .sl-prod .sl-v { font-size: clamp(28px, 3.2vw, 40px); }
[data-part="start-b"] .sl-take .sl-v { font: 500 26px/1.1 var(--f-num); }
[data-part="start-b"] .sl-sub { display: block; margin-top: 2px; font: 400 15px/1.4 var(--f-en); color: rgba(234, 220, 195, .7); }
[data-part="start-b"] .sl-sub:empty { display: none; }
html[dir="rtl"] [data-part="start-b"] .sl-sub { text-align: right; }
[data-part="start-b"] .sl-nv { font: 400 17px/1.55 var(--f-ar); white-space: pre-line; }
html[lang="en"] [data-part="start-b"] .sl-nv { font: 400 17px/1.45 var(--f-en); letter-spacing: 0; }
[data-part="start-b"] .sl-v.empty { color: rgba(234, 220, 195, .4); font-weight: 400; }
[data-part="start-b"] .sl-mark { position: absolute; top: 18px; inset-inline-end: 18px; width: 36px; height: 36px; color: rgba(234, 220, 195, .55); }
[data-part="start-b"] .sb-edit { margin-top: 14px; font-size: 15px; color: var(--ink-2); }
[data-part="start-b"].sent .sb-edit { display: none; }

/* ---------- moving on ---------- */
[data-part="start-b"] .sb-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
[data-part="start-b"] .sb-nav { display: flex; align-items: center; gap: 14px 18px; margin-top: 34px; }
[data-part="start-b"] .sb-back { display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 12px; margin-inline-start: -12px; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font-size: 17px; cursor: pointer; }
[data-part="start-b"] .sb-back:hover { color: var(--sand); background: rgba(234, 220, 195, .06); }
[data-part="start-b"] .sb-back svg, [data-part="start-b"] .sb-next svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] [data-part="start-b"] .sb-back svg, html[dir="rtl"] [data-part="start-b"] .sb-next svg { transform: scaleX(-1); }
[data-part="start-b"] .sb-fine { flex: 1; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
[data-part="start-b"] .sb-next, [data-part="start-b"] .sb-send { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; padding: 0 30px; margin-inline-start: auto; border: 0; border-radius: 999px; background: var(--sand); color: var(--date); font: 650 18px/1 var(--f-ar); cursor: pointer; transition: transform .18s var(--ease); }
html[lang="en"] [data-part="start-b"] .sb-next, html[lang="en"] [data-part="start-b"] .sb-send { font-family: var(--f-en); }
[data-part="start-b"] .sb-next:hover, [data-part="start-b"] .sb-send:hover { transform: translateY(-2px); }
[data-part="start-b"] .sb-next:focus-visible, [data-part="start-b"] .sb-send:focus-visible { outline: 2px solid var(--sand); outline-offset: 4px; }
[data-part="start-b"] .sb-send { min-width: 180px; min-height: 62px; padding: 0 46px; font-size: 20px; }
[data-part="start-b"] .sb-lab { display: none; }
[data-part="start-b"] .sb-next[data-mode="next"] [data-lab="next"], [data-part="start-b"] .sb-next[data-mode="skip"] [data-lab="skip"],
[data-part="start-b"] .sb-next[data-mode="review"] [data-lab="review"], [data-part="start-b"] .sb-next[data-mode="return"] [data-lab="return"] { display: inline; }
[data-part="start-b"] .sb-wait, [data-part="start-b"] .sending .sb-go { display: none; }
[data-part="start-b"] .sending .sb-wait { display: inline; }
[data-part="start-b"] .sb-send.sending { cursor: progress; }
[data-part="start-b"] .sb-fail { margin-top: 16px; font-size: 16px; line-height: 1.5; font-weight: 600; }
[data-part="start-b"] .sb-fail[hidden] { display: none; }

/* ---------- with the script: one question at a time ---------- */
[data-part="start-b"].sb-live .sb-step:not(.on) { display: none; }
[data-part="start-b"].sb-live .sb-fine { visibility: hidden; }
[data-part="start-b"].sb-live .at-slate .sb-fine { visibility: visible; }
[data-part="start-b"].sb-live .sb-send, [data-part="start-b"].sb-live .at-slate .sb-next { display: none; }
[data-part="start-b"].sb-live .at-slate .sb-send { display: inline-flex; }
[data-part="start-b"].sb-live .sb-back[hidden] { display: inline-flex; visibility: hidden; }
[data-part="start-b"].sb-live .sb-step.on.enter { animation: sb-enter .34s var(--ease) both; }
[data-part="start-b"].sb-live .sb-step.on.enter .sb-q .w { animation: sb-word .4s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes sb-enter { from { opacity: 0; transform: translateX(var(--sb-dx, 28px)); } to { opacity: 1; transform: none; } }
@keyframes sb-word { from { opacity: 0; transform: translateY(.35em); } to { opacity: 1; transform: none; } }
[data-part="start-b"].sent .sb-nav { display: none; }
/* without the script: a plain form, every question in a row, and Send at the end */
html:not(.js) [data-part="start-b"] .sb-strip, html:not(.js) [data-part="start-b"] .sb-back, html:not(.js) [data-part="start-b"] .sb-next, html:not(.js) [data-part="start-b"] .sb-last { display: none; }
html:not(.js) [data-part="start-b"] .sb-q { font-size: clamp(24px, 2.4vw, 32px); }

/* ---------- thank you ---------- */
[data-part="start-b"] .sb-thanks { display: grid; gap: 12px; margin-top: 30px; outline: none; }
[data-part="start-b"] .sb-thanks[hidden] { display: none; }
[data-part="start-b"] .sb-th-h { font: 700 clamp(44px, 5.4vw, 80px)/1.25 var(--f-ar); }
html[lang="en"] [data-part="start-b"] .sb-th-h { font: 800 clamp(44px, 5.2vw, 76px)/1.02 var(--f-en); letter-spacing: -.04em; }
[data-part="start-b"] .sb-stop { display: inline-block; width: calc(var(--sb-s) + .16em); height: 0; }
[data-part="start-b"] .sb-th-p { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; }
[data-part="start-b"] .sb-th-p bdi { font-family: var(--f-en); }

[data-part="start-b"] .sb-alt { list-style: none; margin: clamp(56px, 6vw, 88px) 0 0; padding: 22px 0 0; border-top: 1px solid var(--sb-soft); display: flex; flex-wrap: wrap; gap: 10px 32px; font-size: 16px; line-height: 1.5; }
[data-part="start-b"] .sb-k { color: var(--ink-2); margin-inline-end: .35em; }
[data-part="start-b"] .sb-dm { color: var(--ink-2); flex-basis: 100%; }
[data-part="start-b"] .sb-dm a { color: var(--sand); }

/* the pixel: crisp in the page at rest, drawn on the canvas while it moves */
[data-part="start-b"] .sb-px { position: absolute; left: 0; top: 0; z-index: 5; width: var(--sb-s); height: var(--sb-s); border-radius: 18.5%; background: var(--wadi); pointer-events: none; visibility: hidden; transform-origin: 50% 100%; }
[data-part="start-b"] .sb-px.on { visibility: visible; }
[data-part="start-b"] .sb-cv { position: fixed; left: 0; top: 0; width: 100%; height: 100%; max-width: none; z-index: 6; pointer-events: none; display: none; }
[data-part="start-b"] .sb-cv.on { display: block; }

@media (max-width: 899px) {
  [data-part="start-b"] { --sb-s: 16px; --sb-bar: 24px; --sb-padx: 6px; }
  [data-part="start-b"] .sb-slate { margin-top: 86px; }
  [data-part="start-b"] .sb-strip { padding: 0 8px; }
  [data-part="start-b"] .sb-frames { gap: 4px; }
  [data-part="start-b"] .sb-fr { height: 42px; }
  [data-part="start-b"] .sb-fr .num { top: 4px; inset-inline-start: 5px; font-size: 10px; }
  [data-part="start-b"] .sb-step { padding-top: 34px; }
  [data-part="start-b"] .sb-q { margin: 0 0 22px; }
  [data-part="start-b"] .sb-big { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  [data-part="start-b"] .sb-pick { min-height: 0; padding: 16px 18px 18px; gap: 4px; }
  [data-part="start-b"] .sb-pn { font-size: 24px; }
  [data-part="start-b"] .sb-ps { font-size: 15px; }
  [data-part="start-b"] .sb-chips { gap: 8px; }
  [data-part="start-b"] .sb-chip > span { font-size: 17px; padding: 0 18px; }
  [data-part="start-b"] .sb-two { grid-template-columns: minmax(0, 1fr); }
  [data-part="start-b"] .sl-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-part="start-b"] .sl-c { padding: 12px 14px 14px; border-inline-start: 0 !important; }
  [data-part="start-b"] .sl-c:nth-child(2n + 3) { border-inline-start: 1px solid rgba(234, 220, 195, .16) !important; }
  [data-part="start-b"] .sl-c.sl-from, [data-part="start-b"] .sl-c.sl-note { grid-column: 1 / -1; border-inline-start: 0 !important; }
  [data-part="start-b"] .sl-prod { padding-inline-end: 60px; }
  [data-part="start-b"] .sl-v { font-size: 18px; }
  [data-part="start-b"] .sl-mark { width: 30px; height: 30px; top: 14px; inset-inline-end: 14px; }
  [data-part="start-b"] .sb-nav { flex-wrap: wrap; }
  [data-part="start-b"] .sb-next { min-width: 150px; }
  [data-part="start-b"] .at-slate .sb-send { width: 100%; order: -1; margin: 0; }
  [data-part="start-b"] .at-slate .sb-fine { flex-basis: 100%; order: 3; }
}