@import url('./hearo-design-tokens.css');
/* Marketing surfaces use the approved workspace's tokens, at landing-page scale. */
:root{--page:#f7f7fa;--surface:var(--ui-surface);--muted:var(--ui-secondary);--copper:var(--ui-focus);--radius:var(--ui-control-radius);--shadow:0 4px 20px rgb(0 0 0 / .04)}
body{font-family:var(--ui-font);color:var(--ui-label)}
.site-header{background:var(--ui-glass);border-color:var(--ui-separator)}
.brand.hearo-app-brand{font-family:var(--ui-font);font-weight:700;letter-spacing:-.045em;color:var(--ui-label)}
.hearo-app-mark{background:var(--ui-accent);border-color:#66666a;box-shadow:0 1px 3px #0002}
.button{min-height:44px;border-radius:var(--ui-control-radius);transition:background-color 160ms,transform 160ms;box-shadow:none}
.button-dark,.button-copper{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-on-accent);box-shadow:var(--ui-control-shadow)}
.button-dark:hover,.button-copper:hover{background:#414145;box-shadow:var(--ui-control-shadow);transform:none}
.button:active{transform:scale(.98)}
.button-quiet{color:var(--ui-secondary)}
.button-quiet:hover{background:var(--ui-fill);transform:none}
.button-small{min-height:44px}
.explorer-controls,.mapping-tabs{border:0;background:var(--ui-fill);padding:4px;gap:4px;border-radius:12px}
.explorer-tab,.mapping-tab{min-height:44px;border-radius:8px;color:var(--ui-secondary);font-weight:500}
.explorer-tab.is-active,.mapping-tab.is-active,.mapping-tab.is-active:hover{background:var(--ui-surface);color:var(--ui-label);box-shadow:var(--ui-control-shadow)}
.explorer-panel,.mapping-stage{border-color:var(--ui-separator);box-shadow:var(--shadow)}
.panel-chrome{border-color:var(--ui-separator);color:var(--ui-secondary)}
.panel-chrome a{min-height:44px;color:var(--ui-label)}
.mapping-call,.mapping-draft{border-color:var(--ui-separator);background:var(--ui-surface);box-shadow:none;border-radius:var(--ui-card-radius)}
.mapping-card-head{border-color:var(--ui-separator)}
.mapping-identity strong,.mapping-draft-title strong{color:var(--ui-label)}
.mapping-identity small,.mapping-draft-title small,.mapping-field-label{color:var(--ui-secondary)}
.mapping-avatar{background:var(--ui-fill);color:var(--ui-label);box-shadow:none}
.mapping-file-symbol{background:var(--ui-group);color:var(--ui-secondary);border-color:var(--ui-separator);border-radius:10px;box-shadow:none}
.mapping-count{background:var(--ui-fill);color:var(--ui-secondary);border-color:transparent;box-shadow:none}
.mapping-count:before{background:var(--ui-secondary);box-shadow:none}
.mapping-count.is-ready{background:var(--ui-success-fill);color:var(--ui-success);border-color:transparent;box-shadow:none}
.mapping-field{background:var(--ui-group);border-color:var(--ui-separator);border-radius:var(--ui-control-radius);min-height:40px}
.mapping-field.is-filled{background:var(--ui-surface);border-color:var(--ui-field-border)}
.mapping-field.is-filled .mapping-field-value{color:var(--ui-label)}
.mapping-field.is-current{border-color:var(--ui-focus);box-shadow:0 0 0 2px rgb(87 120 166 / .16);transform:none}
.mapping-field.is-question{background:var(--ui-warning-fill);border-color:var(--ui-warning-line)}
.mapping-field.is-question .mapping-field-value{color:var(--ui-warning)}
.mapping-line.is-active{background:var(--ui-group);color:var(--ui-label)}
.mapping-line.is-active .speaker{background:var(--ui-fill);color:var(--ui-label)}
.mapping-line mark.is-mapped{background:var(--ui-group);border-color:var(--ui-separator);color:var(--ui-label)}
.mapping-line.is-active mark.is-source{background:var(--ui-fill);border-color:var(--ui-field-border);color:var(--ui-label);box-shadow:none}
.mapping-wave-bars.has-source i,.mapping-time-dot{background:var(--ui-secondary);box-shadow:none}
.mapping-panels:after{background:var(--ui-secondary);box-shadow:none}
.mapping-draft-bottom button{min-height:44px;height:auto;border-radius:var(--ui-control-radius);background:var(--ui-fill);color:var(--ui-secondary);border-color:transparent;box-shadow:none}
.mapping-draft-bottom button.is-enabled{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-on-accent);box-shadow:var(--ui-control-shadow)}
.mapping-draft-bottom button:focus-visible{outline-color:var(--ui-focus)}
.connections-logo-grid{gap:16px}
.connections-logo-link{justify-content:flex-start;gap:12px;padding:20px 24px;min-height:88px;background:var(--ui-surface);border:1px solid var(--ui-separator);border-radius:var(--ui-card-radius);box-shadow:none}
.connections-logo-link .brand-tile{width:40px;height:40px;background:#fff;border:1px solid #e5e5ea;border-radius:10px;box-shadow:none;flex:none}
.connections-product-name{color:var(--ui-label);font-size:14px;font-weight:600}
.connections-copy p,.connections-availability{color:var(--ui-secondary)}
.closing-surface{background:var(--ui-surface);border-color:var(--ui-separator);color:var(--ui-label);box-shadow:none}
.closing-surface p{color:var(--ui-secondary)}
.demo-welcome{background:var(--page)}
.welcome-description,.welcome-note,.welcome-back{color:var(--ui-secondary)}
.welcome-enter{min-height:60px;border-radius:14px;border:1px solid var(--ui-accent);background:var(--ui-accent);color:var(--ui-on-accent);box-shadow:var(--ui-control-shadow);transition:background 160ms,transform 160ms}
.welcome-enter:before{display:none}
.welcome-arrow{background:transparent;border:0}
.welcome-enter:hover{background:#414145;transform:none;box-shadow:var(--ui-control-shadow)}
.welcome-enter:active{transform:scale(.98);box-shadow:none}
.welcome-enter:focus-visible{outline-color:var(--ui-focus)}
@media(max-width:600px){.connections-logo-grid{gap:12px}.connections-logo-link{padding:16px 12px;gap:10px}.connections-product-name{font-size:12px}.panel-chrome{height:44px}.mapping-field{min-height:40px}}
@media(prefers-contrast:more){.connections-logo-link,.mapping-call,.mapping-draft,.explorer-panel{border-color:var(--ui-secondary)}}
@media(prefers-reduced-transparency:reduce){.site-header{background:var(--page);backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.button:active,.welcome-enter:active{transform:none}}
.mapping-source-time,.mapping-source-time.is-ended{background:var(--ui-group);border-color:var(--ui-separator);color:var(--ui-secondary)}
.mapping-time-dot{animation-name:approved-time-breathe}
@keyframes approved-time-breathe{50%{opacity:.48}}
.mapping-draft.is-working{box-shadow:var(--shadow)}
.mapping-call.is-finished{background:var(--ui-group)}

/* Blue identifies the conversation; green identifies captured draft details. */
.mapping-demo{--mapping-accent:#2264c5;--mapping-tint:#edf4ff;--mapping-line:#aecaf0}
.mapping-avatar{background:var(--mapping-tint);color:var(--mapping-accent)}
.mapping-wave-bars.has-source i,.mapping-demo[data-phase="mapping"] .mapping-time-dot{background:var(--mapping-accent)}
.mapping-demo[data-phase="mapping"] .mapping-source-time{background:var(--mapping-tint);border-color:var(--mapping-line);color:var(--mapping-accent)}
.mapping-count:not(.is-ready){background:var(--ui-success-fill);color:var(--ui-success)}
.mapping-count:not(.is-ready):before{background:var(--ui-success)}
.mapping-demo[data-phase="mapping"] .mapping-panels:after{background:var(--mapping-accent);box-shadow:0 0 0 3px rgb(34 100 197 / .12)}
.mapping-field.is-filled{background:var(--ui-success-fill);border-color:var(--ui-success-line)}
.mapping-field.is-current{background:#e0f0e5;border-color:var(--ui-success);box-shadow:0 0 0 2px rgb(36 114 66 / .12)}
.mapping-line.is-active .speaker{background:var(--mapping-tint);color:var(--mapping-accent)}
.mapping-line.is-active mark.is-source{background:#dceaff;border-color:var(--mapping-line);color:#174b96}
.mapping-draft-bottom button.is-success{background:var(--ui-success-fill);border-color:var(--ui-success-line);color:var(--ui-success);box-shadow:none}

.mapping-draft .mapping-file-symbol{background:var(--ui-success-fill);border-color:var(--ui-success-line);color:var(--ui-success)}
.mapping-draft-bottom button.is-enabled:not(.is-success){background:var(--ui-success);border-color:var(--ui-success);color:#fff}
/* Mobile navigation stays reachable, and product previews use a readable viewport. */
.mobile-menu-toggle{display:none}
.brand.hearo-app-brand,.machine-link{min-height:44px}
@media(max-width:740px){.navigation{gap:12px}.nav-links{gap:16px;margin-right:0}.nav-links a{font-size:12px}}
@media(max-width:600px){
 .navigation{position:relative;gap:10px}
 .navigation>.brand{margin-right:auto}
 .navigation>.button{order:1;padding-inline:12px;gap:8px}
 .mobile-menu-toggle{order:2;display:grid;place-items:center;width:44px;height:44px;flex:none;background:transparent;color:var(--ui-label);border:1px solid var(--ui-separator);border-radius:10px}
 .navigation .nav-links{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);margin:0;padding:8px;background:var(--ui-surface);border:1px solid var(--ui-separator);border-radius:14px;box-shadow:0 12px 30px #0002}
 .navigation.menu-open .nav-links{display:grid;gap:0}
 .navigation .nav-links a{display:flex;align-items:center;min-height:44px;padding:10px 14px;font-size:14px;border-radius:8px}
 .navigation .nav-links a:hover{background:var(--ui-group)}
 .hero-actions .button-quiet{min-height:44px}
}
@media(max-width:779px){.panel-screen{aspect-ratio:auto;height:640px}}
@media(max-width:600px){.panel-screen{height:600px}.explorer-tab{font-size:12px}.panel-chrome{gap:6px}.chrome-dots{display:none}}
@media(max-height:500px) and (max-width:950px){.site-header .navigation{height:60px}.panel-screen{height:520px}}

@media(max-width:700px){
 html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
 .panel-screen{aspect-ratio:auto;min-height:240px;height:540px;overflow:hidden}
 .panel-chrome{font-size:11px;height:44px;padding-inline:12px}
 .explorer-controls{margin-bottom:16px}
 .explorer-tab{font-size:11px;padding:10px 6px;line-height:1.3;min-height:44px}
 .panel-caption{font-size:12px;line-height:1.5;max-width:340px;margin:14px auto 0}
 .closing-surface{padding:24px;border-radius:18px}
 .closing-surface h2{font-size:28px;line-height:1.15}
 .closing-surface p{font-size:14px;line-height:1.6;margin-top:16px}
 .closing-action{margin-top:22px}
 .closing-action .button{width:100%}
 footer.container{flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:16px;min-height:88px}
 footer.container .brand{font-size:23px;flex:none}
 footer.container>span{width:auto;margin:0;font-size:10px;white-space:nowrap}
}