/* Shared product surface: public pages, business workspace and founder console.
   Keep this last in the cascade. Functional visibility and role gates live elsewhere. */
@font-face{font-family:Manrope;src:url('/saas/fonts/manrope-latin-wght-normal.woff2') format('woff2');font-style:normal;font-weight:200 800;font-display:swap}
:root{--sp-canvas:#090b10;--sp-surface:#11151c;--sp-elevated:#181e27;--sp-border:#2c3441;--sp-text:#f3f4f7;--sp-muted:#adb5c3;--sp-accent:#e2bd72;--sp-on-accent:#1b160c;--sp-focus:#f1ce87;--sp-radius:16px;--sp-control-radius:10px;--sp-space:16px;--sp-ease:cubic-bezier(.2,.8,.2,1);--font-ui:Manrope,'Segoe UI',system-ui,sans-serif}
html[data-theme="light"]{--sp-canvas:#f5f6f8;--sp-surface:#fff;--sp-elevated:#edf0f5;--sp-border:#cbd1db;--sp-text:#1a202c;--sp-muted:#535e70;--sp-accent:#805b17;--sp-on-accent:#fff;--sp-focus:#805b17}
html{scroll-padding-top:96px}
body{font-family:var(--font-ui);color:var(--sp-text);background-color:var(--sp-canvas)}
button,input,select,textarea{font-family:inherit}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
:is(button,a,input,textarea,select,summary):focus-visible{outline:2px solid var(--sp-focus)!important;outline-offset:3px}
:is(input,textarea,select){max-width:100%}
:is(input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),select,textarea){font-size:max(16px,1em);border-radius:var(--sp-control-radius)}
:is(button,.primary-button,.secondary-button,.button-link){touch-action:manipulation}
:is(button,.primary-button,.secondary-button,.button-link):disabled{cursor:not-allowed;transform:none;opacity:.55}
:is(.panel,.metric-card,.feature-card,.auth-form-card,.login-card){border-radius:var(--sp-radius)}
:is(.panel,.metric-card,.feature-card){min-width:0}
:is(.table-wrap,.table-scroll){max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
:is(.panel-head,.header-actions,.dialog-actions,.form-actions){flex-wrap:wrap;gap:12px}
:is(.panel-head,.header-actions,.dialog-actions,.form-actions)>*{min-width:0}
:is(.app-main,#app>main){min-width:0}
:is(.app-main,#app>main) h1{font-family:var(--font-ui)!important;font-size:clamp(1.6rem,2.8vw,2.25rem);font-weight:700;letter-spacing:-.035em}
:is(.app-main,#app>main) :is(.panel,.stats>div){box-shadow:0 4px 20px #00000012!important}
:is(.app-main,#app>main) :is(.muted,.page-description){color:var(--sp-muted)}
.sp-skip-link{position:fixed;top:12px;left:12px;z-index:10000;padding:12px 18px;border-radius:10px;background:var(--sp-accent);color:var(--sp-on-accent);font-weight:700;transform:translateY(-160%)}
.sp-skip-link:focus{transform:translateY(0)}
/* Dialogs stay inside the visual viewport at zoom and on small screens. */
html body dialog{box-sizing:border-box;inset:0;width:min(640px,calc(100% - 32px));min-width:0;max-width:calc(100% - 32px);height:fit-content;min-height:0;max-height:calc(100dvh - 32px);margin:auto;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border:1px solid var(--sp-border);border-radius:20px;background:var(--sp-surface);color:var(--sp-text);box-shadow:0 24px 100px #0008}
html body dialog.sp-dialog-wide{width:min(1000px,calc(100% - 32px))}
dialog::backdrop{background:#03060bbf;backdrop-filter:blur(5px)}
dialog :is(form,.modal-body,.dialog-body,.dialog-card){min-width:0;max-width:100%}
dialog :is(h1,h2,h3,p,label,small,code,pre){overflow-wrap:anywhere}
dialog pre{white-space:pre-wrap}
dialog :is(.dialog-actions,.form-actions,.modal-actions){display:flex;flex-wrap:wrap;gap:10px}
/* One access screen, clear business/founder context, fewer competing surfaces. */
.auth-page .auth-layout{min-height:100dvh;grid-template-columns:minmax(0,1fr) minmax(420px,1fr)}
.auth-page .auth-story{padding:clamp(28px,5vw,72px);background:radial-gradient(ellipse at 0 0,#e2bd7212,transparent 65%),var(--sp-canvas)}
.auth-page .auth-story-copy h1{font-family:var(--font-ui);font-size:clamp(2.6rem,4.5vw,4.25rem);font-weight:700;letter-spacing:-.055em;line-height:1.08}
.auth-page .auth-story-copy>p{max-width:46ch;color:var(--sp-muted)}
.auth-page .auth-proof-grid{gap:18px}
.auth-page .auth-proof-grid>div{padding:0 0 0 14px;border:0;border-left:2px solid #e2bd7240;border-radius:0;background:none}
.auth-page .auth-proof-grid small{color:var(--sp-muted);line-height:1.6}
.auth-page .auth-form-side{padding:40px clamp(20px,4vw,64px);background:var(--sp-surface);border-left:1px solid var(--sp-border)}
.auth-page .auth-form-card{width:100%;max-width:500px;padding-bottom:48px}
.auth-page .auth-title h2{font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.035em}
.auth-page .auth-title p{color:var(--sp-muted)}
.auth-page .form-section-card{padding:0;border:0;background:none;box-shadow:none}
.auth-page .signin-switch{border-radius:12px;padding:4px;background:var(--sp-canvas)}
.auth-page .signin-switch button{min-height:44px}
.auth-page .signin-switch button.active{background:var(--sp-accent);color:var(--sp-on-accent);box-shadow:0 2px 8px #0002}
.auth-page .mfa-field{background:transparent;padding:14px;border-style:dashed}
.auth-page .security-baseline{border-top:1px solid var(--sp-border);padding-top:16px;gap:8px}
.auth-page .auth-story-foot{color:var(--sp-muted)}
.pw-eye{min-width:40px;min-height:40px}
/* Founder console uses the same type, surfaces and control hierarchy. */
body.sp-operator{--bg:var(--sp-canvas);--panel:var(--sp-surface);--panel2:var(--sp-elevated);--text:var(--sp-text);--muted:var(--sp-muted);--line:var(--sp-border);--brand:var(--sp-accent);background:var(--sp-canvas)}
.sp-operator #app>aside{background:var(--sp-canvas)!important;padding:24px 16px;border-color:var(--sp-border)!important;z-index:40;overflow:hidden;height:100dvh}
.sp-operator #app>aside>:not(nav){flex-shrink:0}
.sp-operator #app>aside .brand{padding:0;gap:12px}
.sp-operator #app>aside .brand strong{font-size:15px;line-height:1.4}
.sp-operator #app>aside .brand span{font-size:12px;color:var(--sp-muted)}
.sp-operator #app>aside nav{display:grid;align-content:start;gap:4px;min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain}
.sp-operator .nav{display:flex;align-items:center;gap:10px;min-height:44px;white-space:normal;font-weight:600;text-align:left;box-shadow:none!important}
.sp-operator .sp-nav-icon{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sp-operator .nav.active{background:#e2bd7212!important;border-color:#e2bd7240!important;color:var(--sp-accent)!important}
.sp-nav-group{margin:20px 10px 5px;color:var(--sp-muted);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase}
.sp-nav-filter{width:100%;margin:20px 0 4px;min-height:44px}
.sp-operator #app>main>header{background:var(--sp-canvas);border-color:var(--sp-border);backdrop-filter:none}
.sp-operator .header-actions button:hover{color:var(--sp-on-accent)!important}
.sp-operator .header-actions .secondary:hover{color:var(--sp-accent)!important}
.sp-operator .stats{gap:16px}
.sp-operator .stats>div{padding:20px;background:var(--sp-surface);border:1px solid var(--sp-border);border-radius:16px}
.sp-office-menu{display:none}
.sp-office-scrim{display:none}
/* Motion describes interaction. No continuous movement behind business data. */
@media(prefers-reduced-motion:no-preference){
  :is(.nav-item,.nav,.primary-button,.secondary-button){transition:background-color 160ms var(--sp-ease),border-color 160ms var(--sp-ease),color 160ms var(--sp-ease),transform 160ms var(--sp-ease)}
  :is(.nav-item,.nav):hover svg{transform:translateX(2px)}
  .sp-logo-host:hover .sp-logo{animation:sp-mark-arrive 450ms var(--sp-ease) both}
  .feature-card:hover .ai-ico{animation:sp-mark-arrive 350ms var(--sp-ease) both}
  @keyframes sp-mark-arrive{0%{transform:scale(.94) rotate(-4deg)}70%{transform:scale(1.04) rotate(2deg)}100%{transform:scale(1) rotate(0)}}
}
@media(max-width:900px){
  .auth-page .auth-layout{grid-template-columns:minmax(0,1fr)}
  .auth-page .auth-story{padding:28px 24px;min-height:0}
  .auth-page .auth-story-copy{margin:32px 0 20px}
  .auth-page .auth-story-copy h1{font-size:clamp(2.1rem,7vw,3rem)}
  .auth-page .auth-proof-grid,.auth-page .auth-story-foot{display:none!important}
  .auth-page .auth-form-side{border-left:0;border-top:1px solid var(--sp-border);padding:28px 24px 88px}
  .auth-page .auth-form-card{max-width:560px;margin:auto}
  .sp-operator #app{grid-template-columns:minmax(0,1fr)}
  .sp-operator #app>aside{position:fixed;inset:0 auto 0 0;width:min(300px,calc(100vw - 52px));height:100dvh;z-index:160;visibility:hidden;transform:translateX(-100%)}
  .sp-operator.sp-office-nav-open #app>aside{visibility:visible;transform:translateX(0)}
  .sp-operator #app>aside #logout{position:static;margin-top:24px;width:100%}
  .sp-operator #app>aside .primary-workspace-link{display:block}
  .sp-office-menu{display:inline-flex;align-items:center;gap:8px;min-height:44px}
  .sp-office-scrim{position:fixed;inset:0;z-index:159;border:0;border-radius:0;background:#0009}
  .sp-office-nav-open .sp-office-scrim{display:block}
  .sp-operator #app>main{padding:20px}
  .sp-operator .header-actions{display:flex!important}
  .sp-operator .header-actions>*{width:auto!important;flex:1 1 auto!important;white-space:normal!important}
}
@media(max-width:520px){
  html body dialog{width:calc(100% - 20px);max-width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:20px;border-radius:16px}
  dialog :is(.two-col,.field-pair,.field-triple,.form-grid){grid-template-columns:minmax(0,1fr)}
  .auth-page .auth-form-top{gap:12px;flex-wrap:wrap}
  .auth-page .auth-story .brand{font-size:13px}
  .auth-page .auth-story-copy{margin-bottom:0}
  .auth-page .auth-story-copy>p{margin-bottom:0}
  .sp-operator .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Flowstate-inspired depth and motion, rendered with the existing palette.
   No WebGL, video, fonts, animation libraries or remote assets are added. */
.sp-motion-target{transform-origin:center;transform-box:fill-box}
.sp-motion-enabled .sp-motion-visible:is(.sp-logo,.ai-ico){animation:sp-live-icon 6s ease-in-out infinite}
.sp-motion-enabled .sp-motion-visible:is(.sp-nav-icon,.nav-step svg){animation:sp-icon-breathe 5s ease-in-out infinite}
.sp-motion-enabled .sp-motion-visible.integration-logo{animation:sp-icon-breathe 6s ease-in-out infinite}
.sp-page-hidden *,.sp-page-hidden *::before,.sp-page-hidden *::after{animation-play-state:paused!important}
html:not(.sp-motion-enabled) :is(.sv-icon svg,.gx-live i,.sc-launch-icon),html:not(.sp-motion-enabled) .pulse-dot::after{animation:none!important}
.sp-motion-enabled.sp-view-arriving .view:not([hidden])>.page-heading{animation:sp-view-enter 280ms var(--sp-ease) both}
.auth-page .auth-story,.hero{isolation:isolate}
.hero{position:relative}
.hero::before{content:"";position:absolute;inset:2% 5%;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at 70% 35%,var(--brand-soft),transparent 65%);opacity:.7}
.auth-page .auth-story::after{content:"";position:absolute;inset:8% -10%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 30% 35%,var(--brand-soft),transparent 65%);opacity:.75;transform:rotate(-8deg)}
.sp-motion-enabled .auth-story.sp-motion-visible::after,.sp-motion-enabled .hero.sp-motion-visible::before{animation:sp-fluid-drift 16s ease-in-out infinite alternate}
.sp-page-hidden .auth-story::after,.sp-page-hidden .hero::before{animation-play-state:paused!important}
:is(.feature-card,.metric-card,.integration-card,.office-premium-cards article){position:relative}
@media(hover:hover) and (pointer:fine){
  :is(.feature-card,.metric-card,.integration-card,.office-premium-cards article):hover{translate:0 -2px}
  :is(.primary-button,.secondary-button,.nav-item,.nav):active{scale:.985}
}
:is(.feature-card,.metric-card,.integration-card,.office-premium-cards article){transition:translate 180ms var(--sp-ease),border-color 180ms var(--sp-ease)}
.integration-card.self-service .integration-manager-actions{gap:10px}
#self-service-integration-grid .integration-card.self-service{grid-template-areas:none;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto auto;align-content:start;align-items:start}
#self-service-integration-grid .integration-card.self-service>.integration-logo{grid-area:auto;grid-column:1;grid-row:1}
#self-service-integration-grid .integration-card.self-service>div:not(.integration-manager):not(.integration-requirements-inline){grid-area:auto;grid-column:2;grid-row:1;min-width:0}
#self-service-integration-grid .integration-card.self-service>[data-connect-provider]{grid-area:auto;grid-column:1/-1;grid-row:2;justify-self:start;margin-top:2px}
#self-service-integration-grid .integration-card.self-service>.integration-requirements-inline{grid-area:auto;grid-column:1/-1;grid-row:3;width:100%;min-width:0;overflow-wrap:anywhere}
#self-service-integration-grid .integration-card.self-service.has-integration-manager>.integration-manager{grid-area:auto;grid-column:1/-1;grid-row:2}
#self-service-integration-grid+.focus-pagination{position:relative;z-index:1;min-height:56px}
.sp-operator #app>main>.view{scroll-margin-top:110px}
@keyframes sp-live-icon{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-2px) rotate(3deg)}}
@keyframes sp-icon-breathe{0%,100%{opacity:1}50%{opacity:.65}}
@keyframes sp-fluid-drift{from{transform:translate3d(-2%,-1%,0) rotate(-8deg)}to{transform:translate3d(3%,3%,0) rotate(7deg)}}
@keyframes sp-view-enter{from{opacity:.25;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.sp-motion-target,.auth-story::after,.view>.page-heading{animation:none!important}.feature-card:hover,.metric-card:hover,.integration-card:hover{translate:none}}

/* Shared semantic surfaces keep chat, invitation and operator controls legible in either mode. */
:is(.copilot-panel,.office-copilot section,.gds-support-panel,.team-join,.onboard-head,.onboard-shell .card){background:var(--sp-surface);color:var(--sp-text);border-color:var(--sp-border)}
:is(.copilot-panel,.office-copilot section,.spai-v16,.gds-support-panel,.team-join,.onboard-shell) :is(input:not([type=checkbox]),textarea,select){background:var(--sp-canvas);color:var(--sp-text);border-color:var(--sp-border)}
:is(.copilot-panel,.office-copilot section,.spai-v16,.gds-support-panel) :is(header,.copilot-message.ai,.office-copilot-log article,.spai-bubble){background:var(--sp-elevated);color:var(--sp-text);border-color:var(--sp-border)}
:is(.copilot-panel,.office-copilot section,.spai-v16,.gds-support-panel) :is(button:not([type=submit]),small,.copilot-suggestions button){color:var(--sp-text)}
:is(.copilot-panel,.office-copilot section,.spai-v16,.gds-support-panel) button:not([type=submit]){background:var(--sp-elevated);border-color:var(--sp-border)}
html[data-theme="light"] :is(.page-heading,.panel,.metric-card,.onboard-shell) :is(h1,h2,h3,h4,label){color:var(--sp-text)}
html[data-theme="light"] :is(.icon-button,.context-ai-help,.text-button,.secondary-button,.office-context-help){color:var(--sp-text);background:var(--sp-elevated);border-color:var(--sp-border)}
html[data-theme="light"] :is(.copilot-launch,.office-copilot-launch,.gds-support-launch){background:var(--sp-surface);color:var(--sp-text);border-color:var(--sp-border)}
html[data-theme="light"] :is(.spai-memory-bar,.spai-status,.spai-task-label,.onboard-shell .muted,.onboard-head p){color:var(--sp-muted);background:var(--sp-surface)}
html[data-theme="light"] .onboard-shell :is(.item,.notice){background:var(--sp-elevated);color:var(--sp-text);border-color:var(--sp-border)}

html[data-theme="light"] #org-role-side{color:var(--sp-accent);border-color:var(--sp-border)}
@media(max-width:480px){
 .copilot-panel>header{flex-wrap:wrap;gap:12px}
 .copilot-panel>header>div:first-child{min-width:0;flex:1 1 100%}
 .copilot-panel>header>div:last-child{width:100%;justify-content:flex-end;flex-wrap:wrap}
 .copilot-panel>header select{min-width:92px;min-height:40px}
}

.topbar-actions>[aria-label="Notifications"]{display:inline-flex!important}
.notification-preferences{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px;border:1px solid var(--sp-border);border-radius:12px;background:var(--sp-elevated)}
.notification-preferences label{display:flex;align-items:center;gap:6px;font-size:12px}.notification-preferences input{width:auto}
.notification-preferences button,.notification-tabs button{border:1px solid var(--sp-border);border-radius:9px;padding:8px 10px;background:var(--sp-surface);color:var(--sp-text);min-height:40px}
.notification-tabs{display:flex;gap:8px}.delivery-activity{display:grid;gap:10px;max-height:55dvh;overflow:auto}
html body .platform-notice-dialog{background:var(--sp-surface);color:var(--sp-text)}
.platform-notice-dialog .platform-notice-item{background:var(--sp-elevated);color:var(--sp-text);border-color:var(--sp-border)}
.platform-notice-dialog :is(p,small){color:var(--sp-muted)}

body:has(.sc-panel:not([hidden])) .gds-live-toasts{top:10px!important;bottom:auto;right:10px;width:min(300px,calc(100vw - 20px))}.staff-availability-form button{background:var(--sc-gold);color:var(--sc-ink);border:1px solid var(--sc-gold-line);font-weight:700}

/* Content-led layouts: compact sections without viewport-sized empty rows. */
body .hero,html.has-stage .stage-pane>.hero{min-height:0;height:auto;gap:clamp(20px,3vw,40px);padding:28px clamp(18px,4vw,56px);align-items:center}
body .guide-shell,html.has-stage .guide-shell{min-height:0;height:auto;max-height:none;margin:0;width:100%}
body .guide-card,html.has-stage .guide-card{height:440px;min-height:0;max-height:none;border-radius:18px}
body .guide-card>header{padding:12px 16px;gap:10px;flex-wrap:wrap}
body .guide-card .chat-log{min-height:120px;max-height:none;padding:16px;flex:1}
body .hero-actions{margin:20px 0 14px;gap:10px}
body .hero-lead{line-height:1.65}
html.has-stage main{height:auto;min-height:0;overflow:visible;padding-bottom:68px}
html.has-stage .stage-pane{height:auto;min-height:0;overflow:visible}
html.has-stage .stage-pane::after{height:0}
body .signal-bar{margin-block:0;padding-block:18px}
body .superpro-newsletter{width:calc(100% - 36px);max-width:1180px;margin:18px auto;padding:18px 20px;gap:18px;border-radius:16px;background:radial-gradient(ellipse at top left,#e2bd7210,transparent 65%),var(--sp-surface)}
body .superpro-newsletter h2{font-family:var(--font-ui);font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.3;margin:5px 0 8px;max-width:34ch}
body .superpro-newsletter p{margin:6px 0;font-size:12px;line-height:1.5}
body .superpro-newsletter form{gap:8px;align-items:start}
body .superpro-newsletter :is(input,button){min-height:42px;padding:9px 12px;border-radius:9px}
body .superpro-newsletter .newsletter-consent{font-size:12px;line-height:1.4;gap:8px}
body .superpro-newsletter .newsletter-consent input{min-height:0;padding:0;flex:none}
body .superpro-newsletter form>small{grid-column:1/-1;line-height:1.4}
body #product-newsletter-message:empty{display:none}
body .superpro-newsletter .newsletter-secondary{font-size:12px}
body .content-wrap{padding:20px clamp(16px,2.5vw,32px) 24px}
body .page-heading{margin-bottom:16px;gap:12px}
body :is(.two-column-layout,.two-col,.form-grid,.stats,.metric-grid){gap:14px}
body :is(.panel,.metric-card){padding:18px}
body :is(.panel-head,.form-section-head){margin-bottom:14px}
body :is(.focus-navigation,.focus-pagination){padding:9px 12px;gap:8px;margin-bottom:12px}
body .sp-global-trust-footer{margin-top:16px;padding-block:14px;gap:12px}
body :is(.plan-card,.pricing-card){min-height:0;padding:18px;gap:8px;border-radius:14px;background:radial-gradient(ellipse at top left,#e2bd720b,transparent 65%),var(--sp-surface)}
body :is(.plan-card.featured,.pricing-card.featured){border-color:var(--sp-accent);box-shadow:inset 0 1px #e2bd7228,0 10px 24px #0002}
body :is(.plans-grid,.pricing-grid){gap:12px;margin-bottom:14px}
body :is(.plan-card,.pricing-card) :is(h2,h3){font-family:var(--font-ui);font-size:clamp(1.6rem,2.5vw,2rem);margin:4px 0}
body :is(.plan-card,.pricing-card) p{margin:0 0 8px;font-size:13px;line-height:1.5}
body :is(.plan-card,.pricing-card) ul{margin:4px 0 12px;gap:6px}
body :is(.plan-card,.pricing-card) li{font-size:12px;line-height:1.45}
body .trial-hero{padding:16px 18px;gap:12px;margin-bottom:14px}
body .trial-hero h2{font-size:20px;margin:3px 0}
body .trial-count strong{font-size:36px;line-height:1.1}
body .sidebar-trial-card{padding:10px 12px;margin-block:8px;min-height:0}
body .plans-section{padding-block:20px}
body .plans-head{margin-bottom:16px}
.sp-operator #app>main{padding-bottom:20px}
.sp-operator :is(.sub-breakdowns,.sub-stats,.sub-grid){gap:12px}
.sp-operator :is(.sub-manage,.sub-breakdowns>.panel){padding:14px}
@media(max-width:1100px){body .hero{grid-template-columns:1fr;gap:22px}.hero-copy{max-width:760px}body .guide-shell{max-width:760px;justify-self:start}}
@media(max-width:700px){
 body .hero{padding:24px 18px 20px;gap:20px}
 body .hero h1{font-size:clamp(2.15rem,8vw,3rem);margin:14px 0}
 body .guide-card{height:390px}
 body .guide-card .chat-log{padding:12px}
 body .superpro-newsletter{grid-template-columns:1fr;padding:16px;gap:12px;margin-block:14px}
 body .superpro-newsletter form{grid-template-columns:1fr 1fr}
 body .superpro-newsletter form>input[name=email]{grid-column:1/-1}
 body .superpro-newsletter :is(input,button){grid-column:auto;min-width:0}
 body .superpro-newsletter .newsletter-consent{grid-column:1/-1}
 body .superpro-newsletter button{font-size:12px}
 body .content-wrap{padding:14px 12px 20px}
 body :is(.panel,.metric-card,.plan-card,.pricing-card){padding:14px}
 body .trial-hero{grid-template-columns:1fr auto;gap:10px}
 body .trial-progress{grid-column:1/-1}
 body .trial-count strong{font-size:32px}
 .auth-page .auth-form-side{padding:22px 20px 40px}
 .auth-page .auth-form-card{padding-bottom:12px}
}
body .guide-shell{padding-bottom:0}
body .guide-shell .floating-proof{display:none!important}
body .guide-shell .voice-capability{position:static;inset:auto;width:100%;margin:10px 0 0;padding:8px 12px;min-height:0}
body .app-shell,body .app-main,.sp-operator #app{min-height:0}
body .app-footer{padding:12px clamp(12px,2.5vw,32px);gap:10px}
body .content-wrap>.view{min-height:0}
body .gx-board{margin-block:12px}
body .gx-grid{gap:12px}
body .gx-tile{padding:14px;min-height:0}
.sp-operator .sub-row td{padding-block:10px}
@media(max-width:1100px){body main .hero{gap:20px}}
/* Keep the composer visible while chat history scrolls inside the card. */
body .guide-card{height:440px}
body .guide-card>header{flex-shrink:0}
body .guide-card .chat-log{min-height:80px;flex:1 1 0;overflow:auto}
body .guide-card .quick-prompts{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;padding:8px 12px;flex-shrink:0;scrollbar-width:thin}
body .guide-card .quick-prompts button{flex:none;white-space:nowrap;min-height:40px;padding:8px 12px}
body .guide-card .chat-composer{flex-shrink:0;margin:0 12px 8px;padding:8px;min-height:60px}
body .guide-card .voice-status{flex-shrink:0;padding:4px 12px 10px!important;font-size:11px}
html.has-stage main{padding-bottom:0}
html.has-stage body{padding-bottom:72px}
body .superpro-newsletter button[type=submit]{background:linear-gradient(135deg,#f0d28a,#c99a43);color:#1b160c;border:1px solid #e2bd72;font-weight:700}
@media(max-width:700px){
 body .guide-card{height:440px}
 body .guide-card>header{padding:10px 12px}
 body .guide-card .guide-identity{flex:1 1 100%}
 body .guide-card .guide-actions{display:flex;justify-content:flex-end;gap:6px;flex-wrap:nowrap;width:100%}
 body .guide-card .guide-actions select{min-width:0;max-width:120px;font-size:13px}
 body .guide-card .guide-actions button{width:36px;min-width:36px}
 body .trust-strip{gap:6px 12px;padding-right:0}
}

/* Dialogs shrink to their contents instead of stretching between top/bottom insets. */
html body dialog{padding:20px;border-radius:16px;background:radial-gradient(ellipse at top left,#e2bd7209,transparent 65%),var(--sp-surface);border-color:var(--sp-border)}
html body dialog>form{padding:0}
html body dialog :is(h1,h2){margin:0 0 10px;line-height:1.3}
html body dialog p{margin:8px 0;line-height:1.5}
html body dialog .dialog-actions{margin-top:14px;gap:8px}
html body dialog :is(.modal-body,.dialog-body,.dialog-card){min-height:0;height:auto}
html body dialog :is(.release-card,.tour-step){padding:0}
html body dialog.legal-modal{width:min(520px,calc(100% - 24px))}
html body dialog.legal-modal .legal-agree{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:1.5;margin-top:12px}
html body dialog.legal-modal .legal-agree input{width:16px;height:16px;min-height:0;flex:none;margin-top:3px}
html body dialog [role=alert]:empty{display:none}
@media(max-width:480px){html body dialog{padding:18px}.legal-modal .dialog-actions button{flex:1;min-height:44px}}
@media(min-width:901px){
 .sp-operator #app>aside{position:fixed;left:0;top:0;width:268px}
 .sp-operator #app>main{grid-column:2}
 .sp-operator>.sp-global-trust-footer{margin-left:268px}
}
@media(max-width:900px){.auth-page .auth-layout,.auth-page .auth-form-side{min-height:0}}
body .app-footer{margin-bottom:0}

/* Compact account controls and individual business permissions. */
html body .topbar-actions #logout{display:inline-flex!important;visibility:visible!important;align-items:center;min-height:36px;padding:7px 12px;white-space:nowrap}
.sp-platform-menu{position:relative;font-size:12px}.sp-platform-menu summary{cursor:pointer}.sp-platform-menu[open]>a{position:absolute;z-index:30;right:0;top:100%;min-width:150px;padding:12px;background:var(--panel,#15191f);border:1px solid #bfa15b66;border-radius:10px}
.sp-access-dialog{width:min(760px,calc(100vw - 24px));height:auto!important;min-height:0!important;max-height:85dvh;overflow:auto;padding:20px;border:1px solid #bfa15b55;border-radius:18px;background:var(--panel,#111820);color:var(--text,#eee)}
.sp-access-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px}.sp-access-dialog h2{margin:0;font-size:20px}.sp-access-dialog p{font-size:13px;line-height:1.5}.sp-access-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:12px 0}.sp-access-grid fieldset{border:1px solid #bfa15b44;border-radius:10px;padding:10px;min-width:0}.sp-access-grid legend{font-size:12px}.sp-access-grid label{display:inline-flex;align-items:center;gap:5px;margin:4px 10px 4px 0;font-size:12px}.sp-access-grid input[type=checkbox]{width:16px!important;height:16px!important;min-height:0!important;margin:0}.sp-access-log article{border-bottom:1px solid #8884;padding:10px 0}.sp-access-log small{overflow-wrap:anywhere}
/* Shared original gold atmosphere: two compositor layers, no video or WebGL. */
.sp-cinematic-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}.sp-cinematic-backdrop:before,.sp-cinematic-backdrop:after{content:"";position:absolute;inset:-15%;background:radial-gradient(ellipse at 85% 15%,#c29b3820,transparent 45%),radial-gradient(ellipse at 10% 80%,#3d738218,transparent 45%);will-change:auto}.sp-cinematic-backdrop:after{background:repeating-linear-gradient(120deg,transparent 0 120px,#bd9c3910 121px,transparent 122px);opacity:.35}body{isolation:isolate}.sp-motion-enabled:not(.sp-page-hidden) .sp-cinematic-backdrop:before{animation:sp-atmosphere 24s ease-in-out infinite alternate}.sp-motion-enabled:not(.sp-page-hidden) .sp-cinematic-backdrop:after{animation:sp-atmosphere 32s ease-in-out infinite alternate-reverse}@keyframes sp-atmosphere{to{transform:translate3d(-3%,2%,0) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){.sp-cinematic-backdrop:before,.sp-cinematic-backdrop:after{animation:none!important}}

/* Auto height plus inset:0 stretches absolutely positioned dialogs. Use intrinsic size. */
html body dialog.sp-access-dialog{width:min(1000px,calc(100% - 24px));height:fit-content!important;block-size:fit-content!important;min-height:0!important;max-height:calc(100dvh - 24px);padding:18px}
html body .sp-access-dialog #staff-access-form{height:auto;min-height:0;margin:0;padding:0}
html body .sp-access-dialog .sp-access-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}
html body .sp-access-dialog header button{border:1px solid var(--sp-border);background:var(--sp-elevated);color:var(--sp-text);border-radius:9px;min-height:36px;padding:6px 12px}
html body .sp-access-dialog fieldset{background:linear-gradient(135deg,#e2bd7208,transparent 70%);border-color:var(--sp-border)}
html body .sp-access-dialog legend{line-height:1.4;color:var(--sp-text)}
html body .sp-access-dialog #staff-access-note:empty{display:none}
@media(max-width:600px){html body .sp-access-dialog .sp-access-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}html body .sp-access-dialog fieldset{padding:8px}html body .sp-access-dialog legend{font-size:11px}html body .sp-access-dialog label{font-size:11px}html body .sp-access-dialog .sp-access-grid label{gap:4px;margin-right:6px}html body .sp-access-dialog header h2{font-size:17px}}

/* One restrained card treatment across business and founder workspaces. */
:is(.app-main,#app>main) :is(.panel,.row-card,.metric-card,.finance-kpi,.bill-card,.stats>div,.office-premium-cards article){position:relative;min-width:0;background-image:radial-gradient(ellipse at top left,#e2bd7209,transparent 65%);box-shadow:inset 0 1px #ffffff09,0 5px 20px #00000012!important;border-radius:14px;will-change:auto;transition:border-color 180ms ease,box-shadow 180ms ease}
:is(.app-main,#app>main) :is(.panel,.row-card,.metric-card,.finance-kpi,.bill-card):focus-within{border-color:color-mix(in srgb,var(--sp-accent) 50%,var(--sp-border))}
@media(hover:hover){:is(.app-main,#app>main) :is(.panel,.row-card,.metric-card,.finance-kpi,.bill-card,.stats>div,.office-premium-cards article):hover{border-color:color-mix(in srgb,var(--sp-accent) 38%,var(--sp-border));box-shadow:inset 0 1px #ffffff0c,0 8px 24px #0000001c!important}}
/* Provider cards use normal-flow content, including every nested manager block. */
html body #self-service-integration-grid{align-items:start;gap:12px}
html body #self-service-integration-grid .integration-card{height:auto;min-height:0;padding:16px;align-self:start;overflow-wrap:anywhere;border-color:var(--sp-border);background:linear-gradient(145deg,#e2bd7208,transparent 65%),var(--sp-surface);box-shadow:inset 0 1px #ffffff08,0 6px 18px #0001}
html body #self-service-integration-grid .integration-manager{grid-area:auto!important;grid-column:1/-1!important;grid-row:2!important;display:flex;flex-direction:column;gap:12px;padding-top:12px;margin:0;align-self:start}
html body #self-service-integration-grid .integration-manager div{grid-area:auto!important;min-width:0;position:static}
html body #self-service-integration-grid .integration-manager-actions{display:flex;flex-flow:row wrap;align-items:center;gap:8px}
html body #self-service-integration-grid .integration-resource-picker{display:grid;gap:8px}
html body #self-service-integration-grid .integration-resource-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;max-height:220px;overflow:auto}
html body #self-service-integration-grid .integration-resource-list label{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:10px;border:1px solid var(--sp-border);background:var(--sp-elevated);border-radius:10px;cursor:pointer}
html body #self-service-integration-grid input[data-im-resource]{position:static;flex:0 0 17px;width:17px;height:17px;min-width:17px;min-height:17px;margin:2px 0 0;padding:0;accent-color:var(--sp-accent)}
html body #self-service-integration-grid .integration-resource-list label>span{display:grid;gap:3px;min-width:0}
html body #self-service-integration-grid .integration-resource-picker>[data-im-save]{justify-self:start;margin:0}
html body #self-service-integration-grid :is(.integration-manager-status,.integration-resource-list small){color:var(--sp-muted);line-height:1.5}
html body .bill-grid{align-items:start;gap:12px}html body .bill-grid .bill-card{height:auto;min-height:0;padding:16px;align-self:start}html body .bill-head{gap:8px;flex-wrap:wrap}html body .bill-card .dialog-actions{justify-content:flex-start;margin-top:12px}
html body #finance-view .finance-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
html body #finance-view .finance-kpi{padding:14px;gap:5px}
html body #finance-view .fin-pane[data-fin-pane=overview]>.two-column-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:12px}
html body #finance-view .fin-trend{height:150px}html body #finance-view #fin-breakdown{gap:6px}html body #finance-view #fin-breakdown .row-card{padding:10px 12px}
@media(max-width:600px){html body #finance-view .finance-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}html body #finance-view .fin-pane[data-fin-pane=overview]>.two-column-layout{grid-template-columns:minmax(0,1fr)}html body #self-service-integration-grid .integration-card{padding:12px}}
@media(prefers-reduced-motion:reduce){:is(.app-main,#app>main) :is(.panel,.row-card,.metric-card,.finance-kpi,.bill-card,.stats>div){transition:none!important}}

/* Setup and usage tiles follow the same surface and focus treatment. */
:is(.setup-step,.setup-item,.setup-task,.industry-browser-card,.plan-use-row,.plan-block){border-radius:12px;transition:border-color 180ms ease,box-shadow 180ms ease}
.plan-use-row{padding:9px 10px;border:1px solid var(--sp-border);background:linear-gradient(120deg,#e2bd7206,transparent 70%)}
@media(hover:hover){:is(.setup-step,.setup-item,.setup-task,.industry-browser-card,.plan-use-row):hover{border-color:#e2bd725c;box-shadow:inset 0 1px #ffffff08,0 6px 16px #0001}}
.migration-help{display:grid;justify-items:start;gap:7px;margin-top:12px}.migration-help button{white-space:normal;text-align:left}.migration-help small{color:var(--sp-muted);line-height:1.5}
@media(prefers-reduced-motion:reduce){:is(.setup-step,.setup-item,.setup-task,.industry-browser-card,.plan-use-row,.plan-block){transition:none!important}}
/* Organise print reports as a row, with a full-width backup workspace below. */
html body #exports-view .export-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:12px}
html body #exports-view .export-grid>.panel{padding:18px;gap:10px;margin:0}
html body #exports-view .export-grid h2{margin:0;font-size:16px}html body #exports-view .export-grid p{margin:0 0 4px;font-size:12px;line-height:1.6}
html body #exports-view .export-backup{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-items:start}
html body #exports-view .export-backup>:is(.panel-kicker,h2,p){grid-column:1}
html body #exports-view .export-backup>#export-backup{grid-column:2;grid-row:1/3;align-self:center;justify-self:start}
html body #exports-view .export-backup>.export-csv{grid-column:2;grid-row:3/5;display:flex;flex-wrap:wrap;gap:8px}
html body #exports-view .export-backup>#export-feedback{grid-column:1/-1}
html body .setup-list>li{min-width:0;border-radius:12px;background:linear-gradient(135deg,#e2bd7208,transparent 65%),var(--sp-surface);box-shadow:inset 0 1px #ffffff09,0 4px 12px #0001;transition:border-color 180ms ease,box-shadow 180ms ease}
@media(hover:hover){html body .setup-list>li:hover{border-color:#e2bd725c;box-shadow:inset 0 1px #ffffff0c,0 6px 16px #0002}}
@media(max-width:640px){html body #exports-view .export-grid{grid-template-columns:minmax(0,1fr)}html body #exports-view .export-backup{grid-template-columns:minmax(0,1fr)}html body #exports-view .export-backup>*{grid-column:1!important;grid-row:auto!important}html body #exports-view .export-backup>#export-backup{justify-self:stretch}}
#workspace-context .ctx-sub{font-size:12px;color:var(--sp-muted);line-height:1.3}#workspace-context .ctx-designation{font-size:11px;color:var(--sp-accent);line-height:1.3}
#workspace-context .sp-founder-shortcut{font-size:11px;color:var(--sp-accent);text-decoration:none;padding:5px 8px;border:1px solid #e2bd723f;border-radius:8px;justify-self:start}
#workspace-context .sp-founder-shortcut:hover,#workspace-context .sp-founder-shortcut:focus-visible{background:#e2bd7210;border-color:var(--sp-accent)}

.sp-card-icon{width:26px;height:26px;padding:4px;border:1px solid #e2bd7238;border-radius:8px;fill:none;stroke:var(--sp-accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;background:#e2bd7209}
.sp-motion-enabled .sp-motion-visible.sp-card-icon{animation:sp-icon-breathe 6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.sp-card-icon{animation:none!important}}

.sp-operator .stat .sp-card-icon{position:absolute;top:16px;right:14px}.sp-operator .stat{padding-right:52px!important}

/* Visible shared depth for job/workspace cards, with equivalent touch feedback. */
html body :is(#workspace,#app) .sp-surface-card{border-top:2px solid #e2bd7260;border-left-color:#e2bd7230;background-image:radial-gradient(ellipse at top left,#e2bd7217,transparent 58%);box-shadow:inset 0 1px #ffffff0b,0 8px 24px #00000028!important;transition:translate 180ms ease,border-color 180ms ease,box-shadow 180ms ease}
.sp-section-icon{display:inline-block;vertical-align:middle;margin-right:9px;flex:none}
@media(hover:hover) and (pointer:fine){html body :is(#workspace,#app) .sp-surface-card:hover{translate:0 -3px;border-color:#e2bd7280;box-shadow:inset 0 1px #ffffff12,0 0 0 1px #e2bd7228,0 14px 34px #00000040!important}}
html body :is(#workspace,#app) .sp-surface-card:focus-within{border-color:var(--sp-accent);box-shadow:inset 0 1px #ffffff12,0 0 0 1px #e2bd7240,0 10px 28px #00000030!important}
@media(hover:none){html body :is(#workspace,#app) .sp-surface-card:active{border-color:var(--sp-accent);background-image:radial-gradient(ellipse at top left,#e2bd7230,transparent 70%)}}
.sp-motion-enabled .sp-motion-visible:is(.signin-feature-icon svg,.sp-section-icon){animation:sp-icon-breathe 5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){html body :is(#workspace,#app) .sp-surface-card{transition:none!important;translate:none!important}.sp-section-icon,.signin-feature-icon svg{animation:none!important}}
/* Founder authentication uses the same compact surfaces, without viewport-height columns. */
body.auth-page[data-auth-page=operator]{min-height:100svh;display:grid;align-items:center;padding:24px}
body[data-auth-page=operator] .auth-layout{width:min(100%,1100px);margin:auto;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
body[data-auth-page=operator] .auth-story{min-height:0;padding:28px;border:1px solid var(--sp-border);border-radius:20px;align-self:start}
body[data-auth-page=operator] .auth-story-copy{margin:28px 0 0}
body[data-auth-page=operator] .auth-story-copy h1{font-size:clamp(30px,4vw,48px)}
body[data-auth-page=operator] .auth-form-side{min-height:0;padding:28px;border:1px solid var(--sp-border);border-radius:20px;overflow:visible}
body[data-auth-page=operator] .auth-form-card{padding:0;max-width:none}
@media(max-width:900px),(max-aspect-ratio:3/4){body[data-auth-page=operator] .auth-layout{max-width:780px;grid-template-columns:minmax(0,1fr)}body[data-auth-page=operator] .auth-story-copy{margin:16px 0 0}body[data-auth-page=operator] .auth-story-copy h1{margin:10px 0}}