/* Shared controls: static website markup and React use these same classes. */
:root{--ono-h1-max:68px;--ono-h2-max:48px;--ui-radius:8px;--ui-control:36px;--ui-focus:var(--accent);--ui-hover:color-mix(in srgb,var(--accent) 90%,var(--ink))}
.ui-button,.button{display:inline-flex;align-items:center;justify-content:center;flex:none;gap:8px;white-space:nowrap;border:1px solid transparent;border-radius:var(--ui-radius);font:500 14px/20px Switzer,sans-serif;text-decoration:none;cursor:pointer;outline-offset:2px;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.ui-button{min-height:var(--ui-control);padding:7px 16px;background:var(--accent);color:var(--white);box-shadow:0 1px 2px rgba(17,17,17,.05)}
.ui-button svg,.button svg{pointer-events:none;flex-shrink:0;display:block}
.ui-button:hover{background:var(--ui-hover)}
.ui-button--ink{background:var(--ink);color:var(--white)}
.ui-button--ink:hover{background:var(--body)}
.ui-button:focus-visible,.button:focus-visible,.ui-toggle:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.ui-button:disabled,.ui-button[aria-disabled=true],.button:disabled{pointer-events:none;opacity:.5;cursor:default}
.ui-button--destructive{background:var(--ink);color:var(--white)}
.ui-button--destructive:hover{background:var(--body)}
.ui-button--outline{border-color:var(--line);background:var(--white);color:var(--ink)}
.ui-button--outline:hover{background:color-mix(in srgb,var(--line) 30%,var(--white));border-color:color-mix(in srgb,var(--body) 30%,var(--line))}
.ui-button--outline-blue{border-color:color-mix(in srgb,var(--accent) 32%,var(--white));background:transparent;color:var(--accent)}
.ui-button--outline-blue:hover{background:linear-gradient(115deg,rgba(163,207,255,.22),rgba(163,207,255,.06));border-color:var(--accent)}
.ui-button--secondary{background:color-mix(in srgb,var(--line) 30%,var(--white));color:var(--ink)}
.ui-button--secondary:hover{background:color-mix(in srgb,var(--line) 60%,var(--white))}
.ui-button--ghost,.ui-button--link{background:transparent;color:var(--ink);box-shadow:none}
.ui-button--ghost:hover{background:color-mix(in srgb,var(--line) 30%,var(--white))}
.ui-button--link{color:var(--accent);text-underline-offset:4px}
.ui-button--link:hover{background:transparent;text-decoration:underline}
.ui-button--sm,.button.ui-button--sm{min-height:32px;padding:5px 12px;font-size:12px;line-height:20px}
.ui-button--lg{min-height:40px;padding:9px 32px}
.ui-button--xl{min-height:48px;padding:12px 20px}
.ui-button--icon{width:36px;min-height:36px;padding:0}
.ui-button-arrow{opacity:.6;transition:transform .18s ease;margin-inline-start:0;margin-inline-end:-4px}
.ui-button:hover .ui-button-arrow,.button:hover .ui-button-arrow{transform:translateX(2px)}
.ui-split{display:inline-flex;align-items:stretch;border-radius:var(--ui-radius);box-shadow:0 1px 2px rgba(17,17,17,.05)}
.ui-split>.ui-button{border-radius:0;box-shadow:none}
.ui-split>.ui-button:first-child{border-start-start-radius:var(--ui-radius);border-end-start-radius:var(--ui-radius)}
.ui-split>.ui-button:last-child{border-start-end-radius:var(--ui-radius);border-end-end-radius:var(--ui-radius);margin-inline-start:-1px}
.ui-split>.ui-button:focus-visible{position:relative;z-index:1}
.ui-toggle{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:8px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--body);font:500 14px/20px Switzer,sans-serif;transition:background .18s,color .18s,border-color .18s}
.ui-toggle:hover{background:color-mix(in srgb,var(--line) 30%,var(--white));color:var(--ink)}
.ui-toggle--outline{border-color:var(--line)}
.ui-toggle[data-state=on]{background:linear-gradient(115deg,rgba(163,207,255,.3),rgba(163,207,255,.08));color:var(--accent);border-color:color-mix(in srgb,var(--accent) 30%,var(--line))}
.ui-toggle:disabled{pointer-events:none;opacity:.5}
.ui-toggle--sm{min-height:36px;padding:6px 10px}
.ui-toggle--lg{min-height:44px;padding:10px 20px}
/* Keep approved marketing button proportions while sharing the control finish. */
.button.primary{background:var(--accent);color:var(--white);border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 2px rgba(17,17,17,.05)}
.button.primary:hover{background:var(--ui-hover)}
.button.primary.primary-ink{background:var(--ink);border-color:var(--ink)}
.button.primary.primary-ink:hover{background:var(--body);border-color:var(--body)}
.button.secondary{background:var(--white);color:var(--ink);border-color:var(--line);border-radius:8px;box-shadow:0 1px 2px rgba(17,17,17,.05)}
.home-page .button{gap:8px}
.ui-badge{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:32px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font:400 12px/18px Inter,sans-serif;box-shadow:0 1px 2px rgba(17,17,17,.04);white-space:nowrap;vertical-align:top}
.ui-badge-dot{flex:none;width:4px;height:4px;border-radius:50%;background:var(--accent)}
.ui-badge--glass{background:rgba(255,255,255,.65);border-color:rgba(17,17,17,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
@media(prefers-reduced-motion:reduce){.ui-button,.button,.ui-button-arrow,.ui-toggle{transition:none}.ui-button:hover .ui-button-arrow,.button:hover .ui-button-arrow{transform:none}}