/* ============================================================
   website-v19 / audit.css — Revenue Blind Spot audit (v2 rebuild)
   Lane D. Standalone page: no site css chain. Ported from
   RBS-Export-Pack/site/Desktop.dc.html (source of truth), with
   v19 asset paths (/website-v19/bg-starfield.jpg, fonts.css).
   Breakpoint 760px (phone 390). All motion honors
   prefers-reduced-motion.
   ============================================================ */

body.rbs-audit{margin:0;background:#05080F}
body.rbs-audit a{color:#A3ACBD}
body.rbs-audit a:hover{color:#EEF1F6}
body.rbs-audit :focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}

.app{background-color:#070B14;background-image:radial-gradient(ellipse 70% 80% at 50% 50%,rgba(7,11,20,.95) 0%,rgba(7,11,20,.86) 60%,rgba(7,11,20,.5) 100%),url(/website-v19/bg-starfield.jpg);background-size:100% 100%,cover;background-repeat:no-repeat;outline:none}
#app.rbs-audit-root,#app{position:relative;width:100%;height:100vh;height:100dvh;min-height:560px;overflow:hidden;display:flex;flex-direction:column;font-family:'Geist','Helvetica Neue',Helvetica,sans-serif;color:#EEF1F6}
#app:focus{outline:none}

/* ---- top bar ---- */
.top{flex:none;height:96px;margin:0 52px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.14)}
.brand{display:flex;align-items:center;gap:16px}
.brand img{height:32px;width:auto;display:block}
.brand span{font-size:14px;letter-spacing:.32em;font-weight:500;color:#DDE2EA}
.brand .short{display:none}
.save{background:none;border:none;padding:0;font:inherit;font-size:15px;text-decoration:none;color:#DDE2EA;cursor:pointer}
.save:hover{color:#FFFFFF}
.save .short{display:none}

/* ---- stage ---- */
.stage{flex:1;min-height:0;overflow-y:auto;display:flex;align-items:center;justify-content:center;padding:32px 52px;box-sizing:border-box}
.cols{width:100%;max-width:1240px;display:grid;grid-template-columns:minmax(0,1fr) 1px minmax(0,1.3fr);column-gap:56px;align-items:center}
.ask{display:flex;flex-direction:column;align-items:flex-start}
.q{margin:0;font-size:46px;line-height:1.12;font-weight:700;letter-spacing:-.02em;color:#FFFFFF;max-width:520px}
.rule{align-self:stretch;background:rgba(255,255,255,.14)}
.meme{position:relative;margin:32px 0 0;width:340px;max-width:100%;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.meme img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.meme figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.8) 100%);color:#FFFFFF;font-size:16px;line-height:1.3;font-weight:600;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.help{margin:16px 0 0;font-size:18px;line-height:1.45;color:#A3ACBD;max-width:480px}
.q.long{font-size:36px}

/* ---- answer rows ---- */
.answers{display:flex;flex-direction:column}
.opt{display:grid;grid-template-columns:44px minmax(0,1fr) 26px;align-items:center;column-gap:22px;width:100%;min-height:62px;padding:8px 18px;box-sizing:border-box;background:transparent;border:1px solid transparent;border-bottom-color:rgba(255,255,255,.10);border-radius:0;color:#EEF1F6;font:inherit;font-size:20px;line-height:1.3;text-align:left;cursor:pointer;transition:background .15s,border-color .15s}
.opt:first-child{border-top-color:rgba(255,255,255,.10)}
.opt:hover{background:rgba(255,255,255,.04)}
.opt:focus-visible{outline:2px solid #FFFFFF;outline-offset:2px}
.opt .num{width:44px;height:44px;box-sizing:border-box;border:1px solid rgba(255,255,255,.3);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:500;color:#EEF1F6}
.opt.on{background:rgba(229,56,79,.16);border-color:#E5384F;border-radius:10px;box-shadow:inset 4px 0 0 #E5384F}
.opt.on .num{border-color:#E5384F;color:#F0576B}
.opt.long{font-size:17px;line-height:1.35;padding-top:10px;padding-bottom:10px}
.opt .mark{display:block}
.keys{margin:18px 18px 0 0;align-self:flex-end;font-size:15px;color:#8F98AA}

/* ---- exact number ---- */
.exact{margin-top:14px;padding:0 18px}
.exact-link{min-height:44px;background:none;border:none;padding:6px 0;font:inherit;font-size:16px;color:#C9D0DC;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.exact-link:hover{color:#FFFFFF}
.exact-link:focus-visible,.exact-go:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.exact-lbl{display:block;margin-bottom:8px;font-size:15px;color:#C9D0DC}
.exact-in{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.exact-in .pre{font-size:20px;color:#C9D0DC}
.exact-in input{width:180px;height:48px;box-sizing:border-box;border-radius:8px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06);color:#FFFFFF;font:inherit;font-size:20px;padding:0 14px}
.exact-in input:focus{outline:2px solid #E5384F;outline-offset:1px}
.exact-go{height:48px;padding:0 22px;border:none;border-radius:999px;background:#D62F45;color:#FFFFFF;font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.exact-go:hover{background:#C2263B}
.exact-go:disabled{opacity:.45;cursor:default}
.exact-err{margin:8px 0 0;font-size:14px;color:#FF8A99}

/* ---- footer ---- */
.foot{flex:none;height:104px;margin:0 52px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:40px}
.foot-left{display:flex;align-items:center;gap:18px;justify-self:start}
.foot .save{height:44px;display:flex;align-items:center;gap:12px;background:none;border:none;padding:0 6px;font:inherit;font-size:19px;color:#EEF1F6;cursor:pointer}
.foot .save:hover{color:#FFFFFF}
.back{justify-self:start;height:44px;display:flex;align-items:center;gap:12px;background:none;border:none;padding:0 6px;font:inherit;font-size:19px;color:#EEF1F6;cursor:pointer}
.back:hover{color:#FFFFFF}
.back:focus-visible,.go-cta:focus-visible,.save:focus-visible{outline:2px solid #FFFFFF;outline-offset:3px}
.back.hide{visibility:hidden}
.track{position:relative;height:4px;border-radius:4px;background:rgba(255,255,255,.14)}
.fill{position:absolute;left:0;top:0;height:4px;border-radius:4px;background:#E5384F;transition:width .55s cubic-bezier(.2,.7,.2,1)}
.ship{position:absolute;top:-14px;width:28px;height:28px;transition:left .55s cubic-bezier(.2,.7,.2,1)}
.ship svg{display:block}
.count{justify-self:end;font-size:22px;font-variant-numeric:tabular-nums;color:#EEF1F6}
.count .sl{color:#6F7A8E;margin:0 4px}

/* ---- question enter ---- */
@keyframes qinA{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes qinB{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.enterA{animation:qinA .36s cubic-bezier(.2,.7,.2,1) both}
.enterB{animation:qinB .36s cubic-bezier(.2,.7,.2,1) both}

/* ---- welcome veil + dialog ---- */
.veil{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;background:rgba(5,8,15,.55);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);transition:background .45s .25s,backdrop-filter .45s .25s,-webkit-backdrop-filter .45s .25s}
.hello{width:600px;max-width:100%;min-height:50%;box-sizing:border-box;padding:56px 40px 48px;border-radius:22px;background:rgba(13,19,34,.94);border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 80px rgba(0,0,0,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:background .35s .2s,border-color .35s .2s,box-shadow .35s .2s}
.hello:focus{outline:none}
.hello h2{margin:0;font-size:60px;line-height:1;font-weight:800;letter-spacing:-.03em;color:#FFFFFF}
.hello p{margin:16px 0 0;font-size:22px;color:#C9D0DC}
.hello p.intro{margin:14px auto 0;max-width:420px;font-size:16px;line-height:1.5;color:#A3ACBD}
.rkt{margin-top:44px;display:flex;flex-direction:column;align-items:center;background:none;border:none;padding:10px 18px;cursor:pointer}
.rkt:focus-visible{outline:2px solid #FFFFFF;outline-offset:4px;border-radius:14px}
.rkt-craft{display:block;width:54px;height:98px;animation:rktBob 1.1s ease-in-out infinite}
.rkt-craft svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes rktBob{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-5px) rotate(-2deg)}50%{transform:translateY(-9px) rotate(0)}75%{transform:translateY(-5px) rotate(2deg)}}
.rkt-flame{transform-box:fill-box;transform-origin:50% 0;animation:rktFlick .09s linear infinite alternate}
@keyframes rktFlick{from{transform:scaleY(.75);opacity:.8}to{transform:scaleY(1.2);opacity:1}}
.rkt-pad{display:block;width:84px;height:3px;margin-top:6px;border-radius:2px;background:rgba(255,255,255,.35)}
.rkt:hover .rkt-craft{animation-duration:.55s}
.rkt.go .rkt-craft{animation:rktGo .7s cubic-bezier(.55,0,.85,.35) forwards}
@keyframes rktGo{0%{transform:translateY(0)}12%{transform:translateY(6px)}100%{transform:translateY(-110vh)}}
.veil.out{background:rgba(5,8,15,0);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}
.veil.out .hello{background:rgba(13,19,34,0);border-color:rgba(255,255,255,0);box-shadow:none}
.veil.out .hello h2,.veil.out .hello p,.veil.out .rkt-pad{opacity:0}

/* ---- finale ---- */
.done{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;text-align:center}
@keyframes spin{to{transform:rotate(360deg)}}
.orbit{animation:spin 3.4s linear infinite;transform-origin:100px 100px}
.areas{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.areas li{display:flex;align-items:center;gap:10px;font-size:17px;color:#C9D0DC}
.areas svg{flex:none}
.go-cta{margin-top:36px;display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 32px;border:none;border-radius:999px;background:#D62F45;color:#FFFFFF;font:inherit;font-size:18px;font-weight:600;cursor:pointer}
.go-cta:hover{background:#C2263B}

/* ---- live results (in-shell roadmap) ---- */
.res{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.rbs-missing{margin:auto;max-width:560px;padding:32px 24px;text-align:center}
.rbs-missing p{margin:0 0 8px;font-size:17px;line-height:1.5;color:#C9D0DC}
.rbs-missing .detail{font-size:13px;color:#8F98AA}
.rbs-missing button{margin-top:18px;height:48px;padding:0 26px;border:none;border-radius:999px;background:#D62F45;color:#FFFFFF;font:inherit;font-size:16px;font-weight:600;cursor:pointer}

/* ---- phone ---- */
@media (max-width:760px){
.top{height:64px;margin:0 20px}
.brand{gap:10px}
.brand img{height:24px}
.brand span{font-size:12px;letter-spacing:.24em}
.brand .long{display:none}
.brand .short{display:inline}
.save .long{display:none}
.save .short{display:inline}
.stage{align-items:flex-start;padding:24px 20px 16px}
.cols{display:flex;flex-direction:column;align-items:stretch}
.rule{display:none}
.q{font-size:27px;line-height:1.2;max-width:none}
.q.long{font-size:23px}
.help{font-size:15px;margin-top:10px}
.opt.long{font-size:15px}
.exact{padding:0 12px}
.exact-in input{width:150px}
.hello p.intro{font-size:15px}
.meme{margin-top:16px;width:220px}
.meme figcaption{font-size:14px;padding:24px 10px 9px}
.answers{margin-top:22px}
.opt{grid-template-columns:34px minmax(0,1fr) 22px;column-gap:14px;min-height:52px;padding:6px 12px;font-size:17px}
.opt .num{width:34px;height:34px;font-size:15px;border-radius:7px}
.opt svg.mark{width:22px;height:22px}
.keys{display:none}
.foot{height:76px;margin:0 20px;grid-template-columns:auto minmax(0,1fr) auto;column-gap:18px}
.back{font-size:16px;gap:8px;padding:0 2px}
.count{font-size:17px}
.hello{min-height:50%;padding:44px 24px 36px}
.hello:focus{outline:none}
.hello h2{font-size:46px}
.hello p{font-size:19px}
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion:reduce){
.enterA,.enterB,.rkt-craft,.rkt-flame,.orbit,.rkt.go .rkt-craft{animation:none!important}
.fill,.ship,.veil,.hello{transition:none!important}
}

/* Squared buttons (2026-10-06, canonical-button directive): 4px corners.
   This file loads LAST on its page, so the radius override lives here. */
.go-cta,
.rbs-missing button {
  border-radius: 4px;
}

/* ==================================================================
   2026-10-06 (user directive): shrink the quiz so it fits better and
   remove the padding above and below it. Desktop-scoped; mobile keeps
   its own (already smaller) values but loses the vertical padding too.
   ================================================================== */
@media (min-width: 761px) {
  #app.rbs-audit-root,#app { height: auto; min-height: 0; }
  .stage { flex: none; padding: 0 52px; }
  .q { font-size: 38px; }
  .opt { min-height: 52px; padding: 6px 16px; font-size: 18px; }
  .opt .num { width: 38px; height: 38px; font-size: 16px; }
}
@media (max-width: 760px) {
  .stage { padding: 0 20px; }
}

/* ==================================================================
   2026-10-10 (user directive): the quiz's bottom bar (.foot) must sit on the
   bottom edge of the viewport at every size, even when the question is short.
   The site header (.nav) is in flow above #app, so the app height is the
   viewport minus the header. Nav CSS height: 69px at <=700px (68px min-height
   + 1px border) and 85px above (84px + 1px). Body is zoomed 0.82 at >=701px and
   html is zoomed at >=1600px, so vh is divided by the zoom factor (same method
   as the homepage hero). Desktop uses min-height, not height, so a long results
   page still grows the page instead of clipping.
   ================================================================== */
@media (max-width: 700px) {
  #app.rbs-audit-root,#app { height: calc(100dvh - 69px); }
}
@media (min-width: 701px) and (max-width: 760px) {
  #app.rbs-audit-root,#app { height: calc(100vh / 0.82 - 85px); }
}
@media (min-width: 761px) {
  #app.rbs-audit-root,#app { min-height: calc(100vh / 0.82 - 85px); }
  .foot { margin-top: auto; }
}
@media (min-width: 1600px) {
  #app.rbs-audit-root,#app { min-height: calc(100vh * 1600px / 100vw / 0.82 - 85px); }
}

/* 2026-10-10: on desktop the site-wide SOS Agent pill sits bottom-left (about 168 CSS px
   wide at the body zoom). Pinning the bar to the bottom put "Save and exit" under it,
   so the bar's left group starts 200 CSS px in. Mobile keeps its 52px margin: the mobile
   pill is a small orb that does not reach the label. */
@media (min-width: 701px) {
  .foot { margin-left: 200px; }
}

/* 2026-10-10 (user directive): 75px of space above the question on desktop. */
@media (min-width: 761px) {
  .stage { padding-top: 75px; }
}