/* Shared accessibility and navigation improvements; loaded after page styles. */
:root{--secondary:#59595f}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.skip-link{position:fixed;top:8px;left:8px;z-index:10;padding:10px 16px;background:#fff;color:var(--accent);transform:translateY(-150%)}
.skip-link:focus{transform:none}
main:focus{outline:none}
.signup{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;text-align:left;width:100%}
.signup .field-label{font-size:14px;font-weight:600;margin-top:4px}
.signup input,.signup select{width:100%;min-width:0;border:1px solid #76767c;font-size:16px;color:var(--label)}
.signup input::placeholder{color:#626269}
.signup .btn{min-width:180px;margin-top:6px}
.signup :disabled{cursor:wait}
.signup .form-notice{font-size:13px;line-height:1.5;margin:6px 0 0;max-width:none;grid-column:1/-1}
.signup-error:empty{display:none}
.thanks{display:block}.thanks:empty{margin:0}
.cta :is(input,select,button,a,.thanks):focus-visible{outline:3px solid white;outline-offset:4px}
.cta .form-notice a{color:white;text-decoration:underline}
.paid{display:block;width:fit-content;font:600 12px/1.4 'IBM Plex Sans',sans-serif;color:var(--accent);background:#f7e8ec;padding:3px 8px;border-radius:6px;margin-top:6px}
#pricing .btn{margin-top:24px}
.phone video{display:block!important}.phone .still{display:none!important}
.phone .small{background:white;border-radius:12px;padding:12px}
.site-footer{max-width:960px;margin:auto;padding:28px 20px;display:flex;flex-wrap:wrap;gap:16px;font-size:14px}
.site-footer a{color:var(--secondary)}
.sample-cta{background:var(--accent);color:white;padding:24px;border-radius:20px}
.sample-cta .btn{display:inline-flex;padding:12px 18px;border-radius:12px;background:white;color:var(--accent);font-weight:600;text-decoration:none}
.sample-cta a:focus-visible{outline-color:white}
.choices,.shots{scrollbar-width:thin;padding-bottom:12px}.choices::-webkit-scrollbar,.shots::-webkit-scrollbar{display:block;height:8px}
summary .chev{color:#626269}
.related{margin:32px 0}
.hero h1{overflow-wrap:normal}
@media(max-width:760px){nav .btn{display:inline-flex;min-height:44px;padding:0 12px;font-size:14px}nav{gap:12px;flex-wrap:wrap}.hero .grid{min-width:0}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

.video-start{display:block;margin:10px auto;padding:12px 18px;border:0;border-radius:12px;background:white;color:var(--accent);font:600 16px 'IBM Plex Sans',system-ui,sans-serif;cursor:pointer}

/* A small shared interaction vocabulary, keeping the app's existing palette. */
:root{--control-radius:14px;--card-radius:22px;--control-height:50px;--ease-out:cubic-bezier(.2,.7,.3,1)}
.btn,.video-start,.signup input,.signup select{box-sizing:border-box;min-height:var(--control-height);border-radius:var(--control-radius)}
.btn,.sample-cta .btn,.video-start{justify-content:center;align-items:center;white-space:normal;text-align:center;line-height:1.35;padding:12px 20px;max-width:100%;transition:background-color 150ms ease,box-shadow 150ms ease,transform 150ms var(--ease-out)}
.app-card,.price,.sample-cta{border-radius:var(--card-radius)}
.signup input,.signup select{transition:border-color 150ms ease,box-shadow 150ms ease;padding-block:12px}
.signup input:focus,.signup select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.signup input[aria-invalid=true]{border-color:#B42318}
.signup .btn{position:relative;gap:10px;min-width:0}
.signup .btn[aria-disabled=true]{cursor:wait;opacity:.8}
.signup[aria-busy=true] .btn::before{content:"";width:14px;height:14px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:waiting 750ms linear infinite}
.thanks:not(:empty){padding:20px;border:1px solid currentColor;border-radius:var(--control-radius);line-height:1.6;animation:arrive 220ms var(--ease-out) both}
.signup-error:not(:empty){line-height:1.5;padding:12px 0;margin:0}
.tabs label{min-height:44px;display:flex;align-items:center;justify-content:center;padding:10px 8px;box-sizing:border-box;transition:background-color 150ms ease,box-shadow 150ms ease}
.tabs input:focus-visible+label{outline:3px solid var(--accent);outline-offset:3px}
.step{min-height:44px;padding-block:14px;cursor:pointer;border-radius:8px;transition:background-color 160ms ease}
.step:has(input:checked){background:var(--accent-soft)}
.step input:focus-visible{outline-offset:4px}
.bar i{transition:width 200ms var(--ease-out)}
summary{min-height:44px;box-sizing:border-box}
details.more summary{padding-block:12px}
.panel{animation:arrive 180ms var(--ease-out)}
footer a,.top a,nav .links a{display:inline-flex;align-items:center;min-height:44px;padding-block:4px;box-sizing:border-box}
footer .legal-links{display:flex;align-items:center;flex-wrap:wrap;column-gap:8px}
h1,h2,h3{text-wrap:balance}p{overflow-wrap:break-word}
.cardhead{gap:10px;line-height:1.35}.cardhead svg{flex:none;width:30px;height:30px;box-sizing:border-box}
:is(.hero .grid,.feature,.shot,.price,.signup)>*{min-width:0}
@media(hover:hover){.btn:hover,.video-start:hover{box-shadow:0 4px 12px rgba(60,10,20,.14);transform:translateY(-1px)}.step:hover{background:var(--accent-soft)}a:hover{text-decoration-thickness:2px;text-underline-offset:3px}}
.btn:active,.video-start:active{transform:translateY(1px);box-shadow:none}
.btn[aria-disabled=true]{transform:none;box-shadow:none}
@keyframes waiting{to{transform:rotate(360deg)}}
@keyframes arrive{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.btn:hover,.btn:active,.video-start:hover,.video-start:active{transform:none}}

.feature-heading{display:flex;align-items:baseline;gap:8px;text-wrap:initial}
.feature-heading>span{min-width:0}
.feature-heading .paid{display:inline-flex;flex:none;white-space:nowrap;margin:0;align-self:baseline}