/* Responsive and accessibility fixes from browser QA at 320–1440 px.
   Loaded last, so the approved stylesheets above stay exactly as supplied
   and every change to the design is in this one file. */

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:12px;top:-80px;z-index:100;background:#fc8a01;color:#142a3a;padding:12px 18px;border-radius:6px;font-weight:650;font-size:14px}
.skip-link:focus{top:12px}
main:focus{outline:none}
.feature-band:focus{outline:none}

/* Focus: cyan reads on navy, not on the light bands, so light surfaces get the accent blue. */
:root:not([data-theme=dark]) main :focus-visible,:root:not([data-theme=dark]) dialog :focus-visible{outline-color:#075a94}
.hero :focus-visible,.plan-section :focus-visible,.proof-section :focus-visible,dialog .product-window :focus-visible,.site-header :focus-visible,.site-footer :focus-visible{outline-color:#79d8ff}
.cta-band :focus-visible{outline-color:#0b2337}

/* Bigger hit areas without moving anything: an invisible box around small links and icon buttons. */
.text-link,.sign-in,.site-header nav a,.site-footer a,.theme-switch,.menu-toggle,.close-modal{position:relative}
.text-link::after,.sign-in::after,.site-header nav a::after,.site-footer a::after{content:"";position:absolute;inset:-11px -6px}
.theme-switch::after,.menu-toggle::after,.close-modal::after{content:"";position:absolute;inset:-6px}
.theme-switch::after{inset:-8px}
/* The hero preview is a scaled picture with live controls; on desktop their tap areas grow into the gaps around them. */
#hero-demo button{position:relative}
#hero-demo .fin-area-tabs button::after,#hero-demo .fin-tabs button::after{content:"";position:absolute;inset:-8px -6px}
#hero-demo .fin-actions button::after,#hero-demo .fin-table-toolbar button::after,#hero-demo .fin-account button::after,#hero-demo .fin-table button::after,#hero-demo .fin-expand::after,#hero-demo .app-button::after,#hero-demo .app-warning button::after,#hero-demo .app-suggestion-actions button::after{content:"";position:absolute;inset:-3px -2px}
#hero-demo .app-sidebar button::after{content:"";position:absolute;inset:-2px 0}
#hero-demo .fin-table button::after{inset:-5px -3px}
.theme-switch,.close-modal{display:inline-flex;align-items:center;justify-content:center}
.menu-toggle{align-items:center;justify-content:center}

/* Header and the phone menu. The menu hangs from the header wherever it ends, and carries the
   two calls to action the narrow header has no room for. */
.site-header{position:relative;z-index:30}
.site-header nav .nav-menu-only{display:none}
@media(max-width:820px){
  .menu-toggle{display:inline-flex;width:40px;height:40px;border-radius:6px}
  .site-header nav.open{top:100%;flex-direction:column;flex-wrap:nowrap;gap:0;padding:6px 22px 20px;max-height:calc(100vh - 90px);max-height:calc(100dvh - 90px);overflow-y:auto;box-shadow:0 18px 30px #00101c66}
  .site-header nav.open a{display:flex;align-items:center;min-height:48px;font-size:16px;color:#e4eef5;border-bottom:1px solid #2b4a60}
  .site-header nav.open a::after{inset:0}
  .site-header nav.open a.active{color:#fff;border-bottom-color:#79d8ff}
  .site-header nav.open .nav-menu-only{display:flex}
  .site-header nav.open .nav-menu-demo{justify-content:center;gap:10px;margin-top:16px;border:0;border-radius:6px;background:#fc8a01;color:#142a3a;font-weight:650}
}

/* Hero: the ticket sat on top of the "FICTIONAL DEMO" label. Above it on desktop, in the flow on phones. */
@media(min-width:821px){.hero-v2 .floating-ticket{top:-64px}}
@media(max-width:820px){.hero-v2 .floating-ticket{position:relative;top:auto;right:auto;margin:0 4px 16px auto;width:max-content;max-width:calc(100% - 8px)}}

.window-cover{display:none}
@media(max-width:820px){
  #hero-demo .product-window{position:relative}
  #hero-demo .window-cover{display:flex;position:absolute;inset:0;z-index:3;align-items:flex-end;justify-content:flex-end;padding:12px;background:transparent;border:0;border-radius:inherit;cursor:pointer}
  #hero-demo .window-cover span{display:inline-flex;gap:8px;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;background:#79d8ff;color:#102b3d;font-size:13px;font-weight:650;box-shadow:0 8px 20px #00101c55}
  #hero-demo .window-cover:focus-visible{outline-offset:-3px}
}

/* "Sound familiar?": on a phone the three notes overlapped far enough to hide their text. */
@media(max-width:600px){
  .paper-stack{height:auto;display:flex;flex-direction:column;max-width:380px;padding:8px 4px}
  .paper-stack .loose-note{position:relative;top:auto;right:auto;left:auto;width:88%}
  .paper-stack .note-one{align-self:flex-start}
  .paper-stack .note-two{align-self:flex-end;margin-top:-12px}
  .paper-stack .note-three{align-self:flex-start;margin-top:-12px}
  .paper-stack .stack-answer{position:relative;right:auto;bottom:auto;align-self:flex-end;margin-top:22px}
}

/* Demo dialog: the close button stays in view while the demo scrolls, the page behind it stays put,
   and the controls are big enough to tap. */
html:has(#demo-dialog[open]){overflow:hidden}
#demo-dialog{overscroll-behavior:contain}
.modal-bar{position:sticky;top:-24px;z-index:6;background:var(--bg);margin:-24px -24px 20px;padding:24px 24px 14px}
@media(max-width:600px){.modal-bar{top:-16px;margin:-16px -16px 14px;padding:16px 16px 12px}}
#modal-demo .preview-tabs button{min-height:40px}
#modal-demo .fin-area-tabs button,#modal-demo .fin-tabs button{padding:8px 2px;min-height:32px}
#modal-demo .fin-actions button,#modal-demo .fin-table-toolbar button,#modal-demo .fin-account button,#modal-demo .fin-expand,#modal-demo .app-button,#modal-demo .app-suggestion-actions button,#modal-demo .app-sidebar button,#modal-demo .app-warning button{min-height:32px}
#modal-demo .fin-table button{min-height:30px;min-width:44px}
@media(max-width:820px),(pointer:coarse){
  #modal-demo .preview-tabs button,#modal-demo .fin-area-tabs button,#modal-demo .fin-tabs button,#modal-demo .fin-actions button,#modal-demo .fin-table-toolbar button,#modal-demo .fin-account button,#modal-demo .fin-expand,#modal-demo .app-button,#modal-demo .app-suggestion-actions button,#modal-demo .app-warning button{min-height:44px}
  #modal-demo .fin-table button{min-height:40px}
}
/* The money tiles: at phone width the figures ran out of their boxes. */
@media(max-width:600px){
  #modal-demo .fin-metric{padding:10px}
  #modal-demo .fin-metric .fin-icon{display:none!important}
  #modal-demo .fin-metric strong{font-size:16px}
}
@media(max-width:340px){#modal-demo .fin-metrics{grid-template-columns:1fr}}

/* Footer links: on desktop the invisible box above is enough; on touch widths they become full-height rows. */
@media(max-width:820px){.footer-top>div{gap:0}.footer-top>div a{display:inline-flex;align-items:center;min-height:44px}.footer-bottom a{display:inline-flex;align-items:center;min-height:40px;padding:0 6px;margin-left:14px}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* Contrast (axe): the header and footer tags inside the demo screens are layout, not page landmarks
   (role="none" in app.js); these colours are the ones that fell below 4.5:1. */
.loose-note>span{opacity:.86}
:root[data-theme=dark] .problem-section .eyebrow{color:#e8ad62}
:root[data-theme=dark] .stack-answer{color:#8fdcff}
:root[data-theme=dark] .contact-benefits span{color:#075a94}

/* Privacy and Terms: .container's padding shorthand removed the space under the intro band. */
.container.legal-content{padding-top:50px;padding-bottom:80px}
@media(max-width:600px){.container.legal-content{padding-top:36px;padding-bottom:56px}}
/* At 320 px the volume select cut its own placeholder short. */
@media(max-width:400px){.contact-form{padding:26px 20px}}
@media(max-width:360px){.container.contact-grid{padding:0 16px}.contact-form{padding:24px 14px}}