/* Brightbite — page compositions built only from Nubi tokens (tokens.css + palette.css). Load after illustrations.css. */

/* ═════════ Hero (hero-c adapted): bowed clinic photo, headline card hanging off the lower right ═════════ */
.bb-hero { position: relative; padding: 40px 0 calc(var(--section) + 40px); }
.bb-hero__stage { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; max-width: 1560px; }
.bb-hero__photo { height: clamp(460px, 48vw, 700px); }
.bb-hero__photo img { object-position: 50% 30%; }
.bb-hero__card.v-hc__card { left: auto; right: max(24px, (100% - var(--container)) / 2 + 24px); bottom: -120px; width: 540px; padding: 44px; }
.bb-hero__card .t-h1 { margin: 18px 0 14px; }
.bb-hero__card p { margin-bottom: 28px; max-width: 30em; }
.bb-hero .dd--sun { width: 104px; height: 104px; right: auto; left: 7%; top: auto; bottom: -46px; z-index: 2; }

/* ═════════ What's different: icon grid on white ═════════ */
.bb-diff .v-fc h3 { margin-top: 2px; }

/* ═════════ First visit sticker trail (signature) ═════════ */
.bb-trail { padding-top: calc(var(--section) + var(--curve) / 2); }
.bb-trail__top { display: grid; grid-template-columns: 6fr 5fr; gap: 64px; align-items: center; margin-bottom: 72px; }
.bb-trail__top > * { min-width: 0; }
.bb-trail__top .sec-head { margin-bottom: 0; }
.bb-brave { --il-ratio: 5 / 4; max-width: 500px; justify-self: end; }
.bb-brave__blob { --x: 50%; --y: 52%; --w: 82cqw; }
.bb-brave__pol { --x: 50%; --y: 50%; --w: 52cqw; --rot: 3deg; --z: 2; }
.bb-brave__tape { --x: 50%; --y: 12%; --w: 20cqw; --rot: -6deg; }
.bb-brave__say { --x: 22%; --y: 26%; --rot: -4deg; }
.bb-brave__star { --x: 86%; --y: 52%; --w: 19cqw; --rot: 10deg; }
.bb-brave__dd { --x: 86%; --y: 20%; --w: 11cqw; }

.bb-trail__path { position: relative; }
.bb-trail__line { position: absolute; left: 0; top: 0; width: 100%; height: 150px; fill: none; stroke: rgba(var(--accent-rgb), .35); stroke-width: 2.5; stroke-dasharray: 2 10; stroke-linecap: round; vector-effect: non-scaling-stroke; overflow: visible; }
.bb-trail__line path { vector-effect: non-scaling-stroke; }
.bb-stops { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.bb-stop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.bb-stop:nth-child(even) { padding-top: 56px; }
.bb-stop__badge { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--text); box-shadow: var(--shadow-sticker); margin-bottom: 14px; color: var(--text); transition: transform .5s var(--ease-spring); }
.bb-stop:nth-child(odd) .bb-stop__badge { transform: rotate(-6deg); }
.bb-stop:nth-child(even) .bb-stop__badge { transform: rotate(6deg); }
.bb-stop:hover .bb-stop__badge { transform: rotate(0deg) translateY(-4px); }
.bb-stop__badge svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bb-st--butter { background: var(--butter); } .bb-st--mint { background: var(--mint); } .bb-st--sky { background: var(--sky); }
.bb-st--lilac { background: var(--lilac); } .bb-st--peach { background: var(--peach); }
.bb-stop .t-label { color: var(--muted); }
.bb-stop .t-small { max-width: 15em; }

/* ═════════ Tool glossary: orbit illustration + friendly-name list ═════════ */
.bb-tools { padding-top: calc(var(--section) + var(--curve) / 2); }
.bb-tools__grid { display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: center; }
.bb-tools__grid > * { min-width: 0; }
.bb-orbit { max-width: 540px; }
.bb-orbit__blob { --x: 50%; --y: 50%; --w: 78cqw; }
.bb-orbit .il-s1 { --w: 44cqw; --z: 2; }
.bb-orbit .il-ring { --w: 88cqw; }
.bb-orbit__c1 { --x: 26%; --y: 10%; --rot: -4deg; }
.bb-orbit__c2 { --x: 84%; --y: 28%; --rot: 4deg; }
.bb-orbit__c3 { --x: 80%; --y: 86%; --rot: -3deg; }
.bb-orbit__c4 { --x: 18%; --y: 72%; --rot: 5deg; }
.bb-orbit__tooth { --x: 12%; --y: 34%; --w: 13cqw; --rot: -10deg; }
.bb-tools__txt .sec-head { margin-bottom: 36px; }
.bb-gloss { display: grid; gap: 0; margin: 0; }
.bb-gloss > div { display: grid; grid-template-columns: 15em 1fr; gap: 24px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--line); }
.bb-gloss > div:last-child { border-bottom: 1px solid var(--line); }
.bb-gloss dt { font: 700 22px/1.25 var(--font-display); letter-spacing: -0.01em; color: var(--text); }
.bb-gloss dt small { display: block; margin-top: 4px; font: 700 12px/1.5 var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bb-gloss dd { margin: 0; font: 600 15px/1.5 var(--font); color: var(--text-2); }

/* ═════════ Parents in the room: features-a on mint ═════════ */
.bb-stay { padding-top: calc(var(--section) + var(--curve) / 2); }
.bb-stay .v-fa__text { background: var(--mint); }
.bb-stay .photo img { object-position: 50% 40%; }
.bb-stay .dd--loop { left: calc(50% - 110px); top: auto; bottom: 56px; width: 170px; height: 85px; transform: rotate(-6deg); }

/* ═════════ Insurance checker ═════════ */
.bb-ins { padding-top: calc(var(--section) + var(--curve) / 2); padding-bottom: 0; }
.bb-ins__panel { display: grid; grid-template-columns: 5fr 6fr; gap: 64px; align-items: center; padding: 72px; border-radius: var(--r-lg); background: var(--sky); }
.bb-ins__panel > * { min-width: 0; }
.bb-ins__txt .t-h2 { margin: 18px 0 16px; }
.bb-check { position: relative; }
.bb-check__card { display: grid; gap: 24px; box-shadow: var(--shadow-2); transform: rotate(1.2deg); }
.bb-check__card .input { margin-top: 4px; appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 48px;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23121F37' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 18px center/16px no-repeat; }
.bb-check__out { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--r-sm); background: var(--paper); }
.bb-check__out p { font: 600 15px/1.55 var(--font); color: var(--text-2); }
.bb-check__out b { color: var(--text); }
.bb-check__burst { position: absolute; width: 120px; right: -34px; top: -62px; transform: rotate(10deg); }
.bb-check__burst big { font-size: 34px; }
.bb-check__dd { width: 52px; height: 52px; left: -26px; top: -30px; z-index: 2; }

/* ═════════ Quote (proof-b on lilac) ═════════ */
.bb-quote .v-rb { background: var(--lilac); min-height: 0; display: grid; grid-template-columns: 4fr 7fr; gap: 64px; align-items: center; text-align: left; padding: 64px 72px; }
.bb-quote .v-rb > * { min-width: 0; }
.bb-quote__photo { aspect-ratio: 10 / 11; transform: rotate(-2.5deg); box-shadow: var(--shadow-2); border: 8px solid var(--bg); }
.bb-quote__photo img { object-position: 45% 40%; }
.bb-quote__body { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; position: relative; }
.bb-quote .dd--heart { width: 64px; height: 58px; left: calc(36% - 20px); top: 40px; right: auto; transform: rotate(10deg); opacity: 1; stroke-width: 7; color: var(--pop); }
.bb-quote .rating { position: relative; }
.bb-initial { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--butter); font: 700 16px/1 var(--font-display); color: var(--text); }

/* ═════════ FAQ ═════════ */
.bb-faq { padding-top: calc(var(--section) + var(--curve) / 2); padding-bottom: calc(var(--section) + var(--curve)); }

/* ═════════ Responsive ═════════ */
@media (max-width: 1100px) {
  .bb-stops { grid-template-columns: repeat(3, 1fr); row-gap: 48px; }
  .bb-stop:nth-child(even) { padding-top: 0; }
  .bb-trail__line { display: none; }
  .bb-gloss > div { grid-template-columns: 1fr; gap: 6px; }
}
@media (max-width: 900px) {
  .bb-hero { padding-top: 32px; padding-bottom: var(--section); }
  .bb-hero__stage { width: 100%; }
  .bb-hero__card.v-hc__card { right: auto; bottom: auto; width: auto; margin: -80px var(--gutter) 0; }
  .bb-hero .dd--sun { display: none; }
  .bb-trail__top, .bb-tools__grid, .bb-ins__panel { grid-template-columns: 1fr; gap: 48px; }
  .bb-brave { justify-self: center; width: 100%; }
  .bb-orbit { margin-inline: auto; width: 100%; }
  .bb-stay .dd--loop { left: auto; right: 20px; top: calc(75vw - 60px); bottom: auto; width: 130px; height: 65px; }
  .bb-ins__panel { padding: 48px 32px; }
  .bb-quote .v-rb { grid-template-columns: 1fr; gap: 40px; padding: 48px 32px; }
  .bb-quote__photo { max-width: 360px; }
  .bb-quote .dd--heart { left: auto; right: 24px; top: 24px; }
}
@media (max-width: 560px) {
  .bb-hero__card.v-hc__card { margin-inline: var(--gutter); padding: 24px; }
  .bb-stops { grid-template-columns: 1fr; row-gap: 0; }
  .bb-stop { display: grid; grid-template-columns: 60px 1fr; gap: 4px 16px; text-align: left; align-items: start; padding: 0 0 28px; position: relative; }
  .bb-stop > :not(.bb-stop__badge) { grid-column: 2; }
  .bb-stop__badge { grid-column: 1; grid-row: 1 / span 3; width: 60px; height: 60px; margin: 0; }
  .bb-stop__badge svg { width: 24px; height: 24px; }
  .bb-stop:not(:last-child)::before { content: ""; position: absolute; left: 29px; top: 68px; bottom: 6px; border-left: 2.5px dotted rgba(var(--accent-rgb), .35); }
  .bb-ins__panel { padding: 36px 20px 40px; }
  .bb-check__burst { width: 92px; right: -6px; top: -54px; }
  .bb-check__burst big { font-size: 26px; }
  .bb-check__dd { left: -8px; }
  .bb-check__card { transform: none; }
  .bb-orbit .il-chip { font-size: 12px; }
}
.bb .foot__cols li { font: 600 15px/1.6 var(--font); color: #FFFFFF; }
/* alternate with the tool-words orbit above: the photo moves to the right on desktop (phone stacks photo-first as before) */
@media (min-width: 901px) { .bb-stay__card .photo { order: 2; } }