/* Visual islands for the marketing homepage. Semantic tokens only. */
.island{padding-bottom:var(--gap-section)}
.island h2{margin-bottom:var(--space-3)}
.badge{display:inline-flex;align-items:center;min-height:28px;padding:0 var(--space-3);border-radius:var(--radius-pill);background:var(--color-accent-soft);color:var(--color-accent-text);font:700 var(--text-small) var(--font-heading);letter-spacing:.02em}

/* Gentle CTA pulse — paused on hover/focus so existing lift still wins */
@keyframes byb-cta-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.035);opacity:.88}
}
.btn--accent{animation:byb-cta-pulse 3.2s var(--ease-soft) infinite}
.btn--accent:hover,.btn--accent:focus-visible{animation-play-state:paused}
.btn--accent[disabled],.btn--accent[aria-disabled="true"]{animation:none}

/* ---------- How it works ---------- */
.how{scroll-margin-top:88px}
.how-desktop{display:grid;grid-template-columns:2fr 3fr;gap:var(--space-6);align-items:stretch;padding:var(--space-2) 0 var(--space-6)}
.how-list{display:flex;flex-direction:column;gap:var(--space-2);list-style:none;margin:0;padding:0}
.how-list__btn{appearance:none;-webkit-appearance:none;display:grid;grid-template-columns:auto 1fr;gap:var(--space-3);align-items:center;width:100%;min-height:48px;margin:0;padding:var(--space-4);text-align:left;cursor:pointer;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.how-list__btn:hover{border-color:var(--color-primary)}
.how-list__btn:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.how-list__btn.is-active,.how-list__btn[aria-selected="true"]{background:var(--color-primary-soft);border-color:var(--color-primary);box-shadow:inset 4px 0 0 var(--color-primary),var(--shadow-card)}
.how-list__num{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:1.75rem;height:1.75rem;border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-primary);font:800 var(--text-small) var(--font-heading);letter-spacing:.04em}
.how-list__btn.is-active .how-list__num,.how-list__btn[aria-selected="true"] .how-list__num{background:var(--color-primary);color:var(--color-on-primary)}
.how-list li:last-child .how-list__num{color:var(--color-accent-text)}
.how-list li:last-child .how-list__btn.is-active .how-list__num,.how-list li:last-child .how-list__btn[aria-selected="true"] .how-list__num{background:var(--color-accent);color:var(--color-on-accent)}
.how-list__copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.how-list__label{font:700 var(--text-body)/1.25 var(--font-heading);color:var(--color-text);white-space:normal;overflow:visible}
.how-list__meta{display:block;color:var(--color-text-muted);font-size:var(--text-small);line-height:1.35;white-space:normal;overflow:visible}
.how-list__sub{color:var(--color-text-muted);font-size:var(--text-small);line-height:1.35}
.how-detail{display:grid;place-items:center;min-height:100%;padding:var(--space-7) var(--space-6);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);text-align:center}
.how-panel{display:none;flex-direction:column;align-items:center;gap:var(--space-4);width:100%;max-width:28rem}
.how-panel.is-active{display:flex}
.how-panel[hidden]{display:none}
.how-panel__mascot{width:min(280px,100%);aspect-ratio:1;border-radius:var(--radius-lg);background:var(--color-surface-alt);display:grid;place-items:center;overflow:visible}
.how-panel__art{width:86%;height:auto;display:block}
.how-panel__heading{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);width:100%}
.how-panel__label{font:700 var(--size-xl)/1.25 var(--font-heading);margin:0;color:var(--color-text);white-space:normal;overflow:visible}
.how-panel__meta{display:block;margin:0;color:var(--color-text-muted);font-size:var(--text-small);line-height:1.35;white-space:normal;overflow:visible}
.how-panel__sub{margin:0;color:var(--color-text-muted);font-size:var(--text-body);line-height:var(--leading-body)}
.how-carousel{display:none;padding:var(--space-2) 0 var(--space-6)}
.how-viewport{width:100%}
.how-strip{display:flex;flex-direction:row;flex-wrap:nowrap;list-style:none;margin:0;padding:0}
.how-step{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6) var(--space-5);text-align:center}
.how-step__mascot{width:148px;height:148px;border-radius:var(--radius-lg);background:var(--color-surface-alt);display:grid;place-items:center;overflow:visible;flex:none}
.how-step__art{width:128px;height:128px;display:block}
.how-step__copy{min-width:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-align:center}
.how-step__num{display:inline-flex;align-items:center;justify-content:center;min-width:2.25rem;height:2.25rem;padding:0 var(--space-2);border-radius:var(--radius-pill);background:var(--color-primary-soft);color:var(--color-primary);font:800 var(--text-body) var(--font-heading);letter-spacing:.04em}
.how-step:last-child .how-step__num{background:var(--color-accent-soft);color:var(--color-accent-text)}
.how-step__label{font:700 var(--size-xl)/1.25 var(--font-heading);margin:0;color:var(--color-text);white-space:normal;overflow:visible}
.how-step__meta{display:block;margin:0;color:var(--color-text-muted);font-size:var(--text-small);line-height:1.35;white-space:normal;overflow:visible}
.how-step__sub{margin:0;color:var(--color-text-muted);font-size:var(--text-body);line-height:var(--leading-body)}
.how-controls{display:none;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-4)}
.how-move{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:48px;min-height:48px;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-primary);font:700 var(--text-small) var(--font-heading);line-height:1;cursor:pointer;box-shadow:var(--shadow-card)}
.how-move:hover{border-color:var(--color-primary);box-shadow:var(--shadow-card-hover)}
.how-move:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}
.how-status{margin:0;min-width:8ch;text-align:center;color:var(--color-text-muted);font:700 var(--text-small) var(--font-heading)}

/* ---------- Mock chat ---------- */
.see-it__intro{display:flex;flex-direction:column;gap:var(--space-4);margin-bottom:var(--space-5)}
.chat-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2)}
.chat-move{appearance:none;-webkit-appearance:none;min-width:48px;min-height:48px;padding:0;border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-primary);font:800 var(--size-xl) var(--font-heading);line-height:1;cursor:pointer}
.chat-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}
.chat-tab{appearance:none;-webkit-appearance:none;min-height:48px;padding:0 var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface);color:var(--color-text-muted);font:700 var(--text-small) var(--font-heading);cursor:pointer}
.chat-tab[aria-selected="true"]{background:var(--color-primary-soft);color:var(--color-primary);border-color:transparent}
.chat-stage{display:grid;justify-items:center}
.phone{position:relative;width:min(100%,380px);background:var(--color-surface);border:1px solid var(--color-border);border-radius:28px;box-shadow:var(--shadow-cta);overflow:hidden}
.phone[hidden],.msg[hidden],.msg [hidden]{display:none !important}
.phone__badge{position:absolute;top:var(--space-3);right:var(--space-3);z-index:2}
.phone__bar{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-5) var(--space-5) var(--space-4);background:var(--color-surface-alt);border-bottom:1px solid var(--color-border)}
.phone__avatar{width:40px;height:40px;border-radius:50%;background:var(--color-surface);box-shadow:var(--shadow-card)}
.phone__who{display:flex;flex-direction:column;line-height:1.2}
.phone__who strong{font:700 var(--text-body) var(--font-heading)}
.phone__who span{color:var(--color-text-muted);font-size:var(--text-small)}
.phone__log{display:flex;flex-direction:column;gap:var(--space-3);min-height:260px;padding:var(--space-5);background:var(--color-bg)}
.msg{max-width:92%;padding:var(--space-3) var(--space-4);border-radius:18px;box-shadow:var(--shadow-card)}
.msg p{margin:0}
.msg--client{align-self:flex-end;background:var(--color-primary);color:var(--color-on-primary);border-bottom-right-radius:6px}
.msg--bot{align-self:flex-start;display:flex;gap:var(--space-2);align-items:flex-end;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-bottom-left-radius:6px;max-width:100%}
.msg__face{width:28px;height:28px;flex:none;border-radius:50%}
.msg--bot > div{flex:1;min-width:0}
.msg__from{display:block;font:700 var(--text-small) var(--font-heading);color:var(--color-primary);margin-bottom:var(--space-1)}
.digest{list-style:none;margin:var(--space-3) 0 0;padding:var(--space-3);display:grid;gap:var(--space-2);background:var(--color-surface-alt);border-radius:var(--radius-md)}
.digest li{display:flex;align-items:baseline;gap:var(--space-3);font-size:var(--text-small);color:var(--color-text-muted)}
.digest strong{font:800 var(--text-h3) var(--font-heading);color:var(--color-primary);min-width:1.4ch}
.msg__meta{margin:var(--space-3) 0 0;display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;color:var(--color-text-muted);font-size:var(--text-small)}
.msg__link{appearance:none;-webkit-appearance:none;min-height:48px;padding:0;border:0;background:none;color:var(--color-primary);font:700 var(--text-small) var(--font-heading);text-decoration:underline;cursor:pointer}
.msg.is-typing [data-type]::after{content:"▍";margin-left:2px;opacity:.55}
.phone__hint{margin:var(--space-4) 0 0;text-align:center;color:var(--color-text-muted);font-size:var(--text-small)}

/* ---------- Who it's for ---------- */
.who-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--gap-stack);list-style:none;margin:0;padding:0}
.who-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:var(--pad-card);box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:var(--space-3)}
.who-card__art{width:72px;height:72px}
.who-card h3{margin:0}
.who-card p{margin:0;color:var(--color-text-muted)}
.support-note{margin:var(--space-6) 0 0;color:var(--color-text-muted);max-width:52ch}

/* Slim feature cards sit under the islands */
.features--slim .card p{font-size:var(--text-small)}

.site-footer ul{flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  .btn--accent{animation:none}
  .how-strip,.how-strip.is-instant,.how-viewport{transition:none}
  .msg.is-typing [data-type]::after{content:none}
}
@media (max-width:760px){
  .how{overflow-x:hidden;overflow-x:clip}
  .how-desktop{display:none}
  .how-carousel{display:block;max-width:none}
  .how-viewport{overflow:hidden;overflow-x:clip;touch-action:pan-y;user-select:none;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:height var(--dur-base) var(--ease-soft)}
  .how-strip{align-items:flex-start;width:100%;overflow:visible;transition:transform var(--dur-base) var(--ease-soft)}
  .how-strip.is-instant{transition:none}
  .how-step{flex:0 0 100%;width:100%;max-width:100%}
  .how-controls{display:flex}
  .see-it__intro{align-items:flex-start}
}