/* Values are defined once in design-tokens.css, loaded before this stylesheet. */
html { font-family: var(--font-family); font-size: 100%; font-synthesis: none; line-height: 1.55; color: var(--color-text); background: var(--color-bg); }
* { box-sizing: border-box; }
body { margin: 0; font-size: var(--text-base); }
a { color: inherit; text-decoration: none; }
/* Keep every link usable as a touch target, including short labels and inline legal links. */
a:where([href]) { display: inline-flex; align-items: center; min-width: var(--control-height); min-height: var(--control-height); max-width: 100%; vertical-align: middle; }
button, summary, [role="button"], [role="tab"] { min-width: var(--control-height); min-height: var(--control-height); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
h1 { font-size: var(--text-3xl); line-height: 1.15; letter-spacing: var(--tracking-heading); font-weight: 700; margin-bottom: var(--space-4); }
h2 { font-size: var(--text-xl); line-height: 1.3; letter-spacing: -.025em; font-weight: 700; }
h3 { font-size: var(--text-lg); line-height: 1.35; letter-spacing: -.02em; font-weight: 600; }
h4, h5, h6 { font-size: var(--text-base); font-weight: 600; }
p { color: var(--color-text-muted); }
small, sub, sup { font-size: var(--text-xs); }
pre, code, kbd, samp { font-family: var(--font-family); font-size: var(--text-sm); }
hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--space-8) 0; }
img, video, iframe, canvas, svg { max-width: 100%; }
[hidden] { display: none !important; }

/* Three button variants, including links styled as actions. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: 0 var(--button-padding-x); border: 1px solid transparent; border-radius: var(--radius-md); font-family: var(--font-family); font-size: var(--text-sm); font-weight: 600; line-height: 1.5; text-align: center; vertical-align: middle; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-accent-hover); color: var(--color-on-accent-hover); border-color: var(--color-accent-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-secondary { background: var(--color-surface); color: var(--color-primary-800); border-color: var(--color-border); }
.btn-secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-mint-100); border-color: var(--color-primary-600); }
.btn-ghost { padding-inline: var(--space-2); background: transparent; color: var(--color-primary-600); border-color: transparent; box-shadow: none; }
.btn-ghost:hover:not(:disabled):not([aria-disabled="true"]) { color: var(--color-primary-800); text-decoration: underline; text-underline-offset: var(--space-1); }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-bg); color: var(--color-text-muted); border-color: var(--color-border); box-shadow: none; transform: none; cursor: not-allowed; }
.btn-secondary[aria-pressed="true"], .btn-secondary.is-active { background: var(--color-mint-100); color: var(--color-primary-800); border-color: var(--color-primary-600); }
.full-width { width: 100%; }
.ui-icon { display: inline-block; width: var(--icon-size); height: var(--icon-size); flex: 0 0 auto; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: var(--icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.feature-icon .ui-icon, .empty-icon .ui-icon, .stage-symbol .ui-icon { width: var(--icon-card-size); height: var(--icon-card-size); }
.text-link { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary-600); font-size: var(--text-sm); font-weight: 600; }
.back-link { margin-bottom: var(--space-6); }

/* Shared shell and navigation. */
.app-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); min-height: 100vh; }
.app-shell h1 { font-size: var(--text-2xl); }
.sidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: var(--space-8) var(--space-4) var(--space-6); background: var(--color-primary-900); color: var(--color-on-dark); }
.brand { display: flex; align-items: center; gap: var(--space-3); margin: 0 var(--space-2) var(--space-8); font-size: var(--text-xl); font-weight: 700; letter-spacing: -.04em; }
.brand small { display: block; color: var(--color-on-dark); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; }
.brand-symbol { display:block;flex:0 0 40px;width:40px;height:40px; }
.user-avatar { position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 var(--avatar-size,32px);width:var(--avatar-size,32px);height:var(--avatar-size,32px);border-radius:50%;overflow:hidden;background:var(--avatar-color,var(--color-primary-800));color:var(--color-surface);font-size:var(--text-xs);font-weight:700;vertical-align:middle; }
.user-avatar img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.person-with-avatar { display:inline-flex;align-items:center;gap:var(--space-2);min-width:0; }
.profile-form { max-width:720px; }
.profile-photo-current { display:flex;gap:var(--space-4);align-items:center;margin-bottom:var(--space-4); }
.profile-form>label,.background-manager>label { display:block;margin:var(--space-4) 0 var(--space-2);font-size:var(--text-sm);font-weight:600; }
.background-manager-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:var(--space-4); }
.background-manager-grid article { display:grid;gap:var(--space-3);min-width:0; }
.background-manager-grid img { width:100%;height:180px;object-fit:cover;border-radius:var(--radius-md); }
.task-name>.user-avatar { margin-right:var(--space-2); }
.brand-mark { flex-shrink: 0; padding: 0 var(--space-3) var(--space-1); border-radius: var(--radius-md); background: var(--color-mint-300); color: var(--color-primary-900); font-size: var(--text-2xl); font-weight: 800; letter-spacing: -.17em; }
.brand-mark span { padding-right: var(--space-1); }
.workspace-label { display: flex; align-items: center; gap: var(--space-3); margin: 0 var(--space-1) var(--space-8); padding: var(--space-3); border: 1px solid var(--color-dark-border); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.workspace-label small, .account-link small { display: block; color: var(--color-on-dark); font-size: var(--text-xs); }
.workspace-icon { display: grid; place-items: center; width: var(--space-8); height: var(--space-8); flex-shrink: 0; border-radius: var(--radius-sm); background: var(--color-dark-hover); font-weight: 600; }
.nav-heading { margin: var(--space-3) var(--space-3); color: var(--color-mint-300); font-size: var(--text-xs); font-weight: 600; letter-spacing: .08em; }
.primary-nav { scroll-padding: var(--space-2); }
.primary-nav a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); margin: var(--space-1) 0; padding: var(--space-3); border-radius: var(--radius-sm); color: var(--color-on-dark); font-size: var(--text-sm); }
.primary-nav a:hover { background: var(--color-dark-hover); color: var(--color-surface); }
.primary-nav a.active { background: var(--color-dark-hover); color: var(--color-surface); box-shadow: inset 3px 0 var(--color-mint-300); }
.primary-nav a.mobile-account { display: none; }
.nav-icon { display: inline-flex; align-items: center; flex: 0 0 var(--icon-size); }
.sidebar-note { margin: auto var(--space-2) 0; padding-top: var(--space-12); }
.sidebar-note .eyebrow { color: var(--color-mint-300); }
.sidebar-note p { color: var(--color-on-dark); font-size: var(--text-base); margin: var(--space-2) 0; }
.version { color: var(--color-on-dark); font-size: var(--text-xs); }
.account-link { display: flex; align-items: center; gap: var(--space-3); border-top: 1px solid var(--color-dark-border); margin-top: var(--space-6); padding: var(--space-6) var(--space-1) 0; font-size: var(--text-sm); }
.account-link > :last-child { margin-left: auto; }
.avatar { display: grid; place-items: center; flex-shrink: 0; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round); background: var(--color-dark-hover); }
.main-shell { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; padding: var(--space-2) var(--space-8); border-bottom: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--text-xs); }
.topbar-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--space-4); }
.topbar-actions > a { display: inline-flex; align-items: center; gap: var(--space-2); }
.status-dot { display: inline-block; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-round); background: var(--color-primary-600); margin-right: var(--space-2); }
.global-language { display: inline-flex; align-items: center; gap: var(--space-1); }
.global-language .btn { min-width: var(--control-height); padding-inline: var(--space-2); font-size: var(--text-xs); }
main { flex: 1; width: 100%; max-width: 1550px; margin: 0 auto; padding: var(--space-8); min-width: 0; overflow-wrap: anywhere; }
/* Blazor focuses headings after navigation; these are not interactive controls. */
h1[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }
.page-footer { display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) var(--space-8); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-xs); }
.skip-link { position: fixed; top: -100px; left: var(--space-3); padding: var(--space-3); background: var(--color-surface); color: var(--color-text); z-index: 100; }
.skip-link:focus { top: var(--space-3); }
.skip-link:not(:focus) { clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; padding: 0; white-space: nowrap; }
#blazor-error-ui { display: none; position: fixed; bottom: 0; width: 100%; z-index: 1000; background: var(--color-warning-bg); padding: var(--space-4); border-top: 1px solid var(--color-warning); }
#blazor-error-ui a { text-decoration: underline; }

/* Common page components. */
.page-heading { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-8); }
.page-heading > div:first-child { flex: 1 1 22rem; min-width: 0; }
.eyebrow { margin-bottom: var(--space-3); color: var(--color-primary-600); font-size: var(--text-xs); font-weight: 700; letter-spacing: .1em; }
.page-description { max-width: 700px; margin-bottom: 0; font-size: var(--text-base); }
.heading-action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.section-heading, .work-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.section-heading h2 { margin: 0; }
.muted, .small-text { color: var(--color-text-muted); font-size: var(--text-xs); }
.error-text { color: var(--color-danger); }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.feature-card, .surface { min-width: 0; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.feature-card { position: relative; display: flex; flex-direction: column; transition: border-color .16s ease, box-shadow .16s ease; }
.feature-card:hover { border-color: var(--color-primary-600); box-shadow: var(--shadow-md); }
.feature-icon { display: inline-grid; place-items: center; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-md); margin-bottom: var(--space-6); }
.mint { background: var(--color-mint-100); color: var(--color-primary-600); }
.sand { background: var(--color-warning-bg); color: var(--color-warning); }
.lilac { background: var(--color-lilac-bg); color: var(--color-lilac); }
.feature-card > .pill { position: absolute; right: var(--space-6); top: var(--space-6); }
.feature-card h3 { margin-bottom: var(--space-3); }
.feature-card p { font-size: var(--text-sm); margin-bottom: var(--space-6); }
.feature-card .text-link { margin-top: auto; justify-content: space-between; }
.card-grid .feature-card > h2 { margin-top: var(--space-8); overflow-wrap: anywhere; }
.pill { display: inline-block; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-round); color: var(--color-text-muted); background: var(--color-bg); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; }
.pill-success, .pill-light { background: var(--color-mint-100); color: var(--color-primary-800); }
.notice { margin-top: var(--space-6); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-warning-bg); font-size: var(--text-sm); }
.notice p { margin: var(--space-1) 0 0; }
.notice strong { font-weight: 600; }
.split-notice { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-8); }
.split-notice .btn { flex-shrink: 0; }
.info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin: var(--space-6) 0; }
.surface > .pill { margin-bottom: var(--space-4); }
.empty-state { text-align: center; padding: var(--space-16) var(--space-6); margin-top: var(--space-6); background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); }
.empty-icon { display: grid; place-items: center; width: var(--space-16); height: var(--space-16); margin: 0 auto var(--space-6); border-radius: var(--radius-lg); background: var(--color-mint-100); color: var(--color-primary-600); }
.empty-state p { max-width: 540px; margin: 0 auto var(--space-6); }
.empty-inline { margin: var(--space-6) 0; padding: var(--space-6); border: 1px dashed var(--color-border); border-radius: var(--radius-sm); }
.tab-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); overflow-x: visible; padding: var(--space-1); margin-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); }
.tab-nav a { display: inline-flex; align-items: center; min-height: var(--control-height); padding: var(--space-3) var(--space-1); border-bottom: 2px solid transparent; color: var(--color-text-muted); font-size: var(--text-sm); white-space: normal; }
.tab-nav a.active, .tab-nav a[aria-current="page"] { color: var(--color-primary-600); border-bottom-color: var(--color-primary-600); font-weight: 600; }
.tab-button { flex-shrink: 0; }
.check-list { padding-left: var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); margin-bottom: 0; }
.check-list li { margin: var(--space-3) 0; padding-left: var(--space-1); }
.status-list { margin-bottom: 0; font-size: var(--text-sm); }
.status-list > div { display: flex; justify-content: space-between; gap: var(--space-6); padding: var(--space-4) 0; border-top: 1px solid var(--color-border); }
.status-list dd { margin: 0; color: var(--color-text-muted); text-align: right; }
.status-list dt { font-weight: 600; }
.capacity-panel { margin-top: var(--space-6); padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-mint-100); display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-8); align-items: center; }
.capacity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.capacity-grid strong { display: block; font-size: var(--text-2xl); font-weight: 700; color: var(--color-primary-800); }
.capacity-grid span { display: block; color: var(--color-text-muted); font-size: var(--text-sm); }

/* Forms, account and lists. */
.form-panel { max-width: 700px; margin-bottom: var(--space-6); }
form { max-width: 620px; }
label { display: block; font-weight: 600; margin: var(--space-4) 0 var(--space-2); font-size: var(--text-sm); }
input, textarea, select { display: block; width: 100%; max-width: 100%; min-width: 0; min-height: var(--control-height); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font-size: var(--text-base); }
textarea { min-height: var(--space-24); resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 20px; min-height: 20px; accent-color: var(--color-primary-600); }
input::file-selector-button { min-height: var(--control-height); margin-right: var(--space-3); padding: 0 var(--button-padding-x); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-primary-800); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
form .btn { margin-top: var(--space-4); }
.validation-errors, .validation-message { color: var(--color-danger); font-size: var(--text-sm); }
input.invalid, textarea.invalid { border-color: var(--color-danger); }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); font-size: var(--text-sm); }
.record-list { padding: 0; list-style: none; margin: var(--space-6) 0 0; }
.record-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.record-list li > div { min-width: 0; }
.record-list h2, .record-list h3 { margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.record-list p { margin: var(--space-1) 0; font-size: var(--text-sm); }
.preserve-text { white-space: pre-wrap; overflow-wrap: anywhere; }
pre, code { max-width: 100%; overflow-wrap: anywhere; }
table { max-width: 100%; }
.surface:has(table), .form-panel:has(table), .table-scroll { overflow-x: auto; overscroll-behavior-inline: contain; }
.surface:has(table) table, .form-panel:has(table) table, .table-scroll table { min-width: 36rem; }

/* Conference preview and the DOM owned exclusively by livekit-interop.js. */
.conference-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); }
.conference-stage { display: flex; flex-direction: column; min-height: 490px; border-radius: var(--radius-md); background: var(--color-primary-900); color: var(--color-on-dark); }
.stage-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-dark-border); font-size: var(--text-sm); }
.stage-badge, .stage-note { display: inline-block; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-dark-border); border-radius: var(--radius-sm); color: var(--color-on-dark); font-size: var(--text-xs); }
.stage-empty { text-align: center; margin: auto; padding: var(--space-12) var(--space-6); }
.stage-symbol { display: inline-block; color: var(--color-mint-300); margin-bottom: var(--space-4); }
.stage-empty p { color: var(--color-on-dark); }
.stage-note { background: var(--color-dark-hover); }
.stage-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); padding: var(--space-6); border-top: 1px solid var(--color-dark-border); }
.conference-aside { padding: var(--space-6); }
.conference-aside p { font-size: var(--text-sm); }
.browser-result:not(:empty) { margin-top: var(--space-4); }
.live-conference { display: grid; gap: var(--space-6); }
.media-header h2 { overflow-wrap: anywhere; }
.media-header .pill { margin-right: var(--space-2); }
.media-prejoin { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(260px, 1fr); gap: var(--space-8); }
.media-preview { background: var(--color-primary-900); color: var(--color-on-dark); aspect-ratio: 16/9; display: grid; place-items: center; border-radius: var(--radius-md); overflow: hidden; align-self: start; }
.media-preview p { color: inherit; }
.media-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.media-device-fields { display: grid; gap: var(--space-3); min-width: 0; }
.media-device-fields label, .media-share-selector label { display: grid; gap: var(--space-1); font-weight: 600; }
.media-device-fields .media-check { display: flex; align-items: center; gap: var(--space-3); font-weight: 400; }
.media-check { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-height); }
.media-check input { margin: 0; }
.media-device-fields meter { width: 100%; height: var(--space-4); }
.media-call { padding: var(--space-4); }
.media-toolbar-wrap { position: sticky; top: var(--space-2); z-index: 5; display: flex; justify-content: center; }
.media-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); width: fit-content; max-width: 100%; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); }
.media-control { min-width: var(--control-height); }
.media-control.is-muted { border-color: var(--color-danger); color: var(--color-danger); }
.media-toolbar-spacer { width: 1px; height: var(--space-8); background: var(--color-border); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--space-3); }
.media-tile { background: var(--color-primary-800); color: var(--color-on-dark); border: 2px solid transparent; border-radius: var(--radius-md); overflow: hidden; min-width: 0; }
.media-tile.is-speaking { border-color: var(--color-mint-300); }
.media-video-slot { position: relative; aspect-ratio: 16/9; display: grid; place-items: center; background: var(--color-primary-900); }
.media-video-slot video { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.media-local-video { transform: scaleX(-1); }
.media-avatar { display: grid; place-items: center; width: var(--space-16); height: var(--space-16); margin: 0; border-radius: var(--radius-round); background: var(--color-dark-hover); color: var(--color-on-dark); font-size: var(--text-xl); }
.media-name { color: var(--color-surface); margin: var(--space-3) var(--space-3) var(--space-1); font-size: var(--text-base); overflow-wrap: anywhere; }
.media-participant-state { color: var(--color-on-dark); margin: 0 var(--space-3) var(--space-3); font-size: var(--text-sm); }
.media-screen-stage { background: var(--color-primary-900); border-radius: var(--radius-md); margin: var(--space-3) 0; max-height: 65vh; }
.media-screen-stage video { display: block; width: 100%; max-height: 65vh; object-fit: contain; }
.media-share-selector { max-width: 34rem; }
.media-roster { display: grid; gap: var(--space-1); padding-left: var(--space-6); overflow-wrap: anywhere; font-size: var(--text-sm); }
.media-speaking .record-list .btn { flex-shrink: 0; }

/* Persistent collaboration and work tracking. */
.collaboration-workspace { min-width: 0; }
.connection-note { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-3) 0 var(--space-6); }
.chat-messages { display: grid; gap: var(--space-4); list-style: none; padding: 0; margin: var(--space-6) 0; }
.chat-messages li { min-width: 0; border-left: 3px solid var(--color-mint-300); padding: var(--space-4); background: var(--color-bg); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.chat-message-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); align-items: baseline; }
.chat-message-meta strong { overflow-wrap: anywhere; }
.chat-message-meta time { color: var(--color-text-muted); font-size: var(--text-xs); }
.chat-messages p { margin: var(--space-2) 0 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.chat-panel textarea { min-height: 7rem; }
.chat-composer-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); }
.file-upload { display: grid; gap: var(--space-3); border: 1px dashed var(--color-primary-600); background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-4); margin: var(--space-6) 0; }
.file-upload .btn { justify-self: start; }
.file-upload progress { width: 100%; accent-color: var(--color-primary-600); height: var(--space-4); }
.file-list h3, .file-list p, .file-upload p { overflow-wrap: anywhere; }
.file-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.work-space { display: grid; gap: var(--space-6); min-width: 0; }
.work-space fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.work-space details { margin: var(--space-4) 0; }
.work-space summary { cursor: pointer; font-weight: 600; }
.work-space .work-check { min-height: var(--control-height); display: flex; gap: var(--space-3); align-items: flex-start; margin: var(--space-4) 0; }
.work-check input { flex: 0 0 auto; margin-top: var(--space-1); }
.work-list h2, .work-list h3, .work-space p { overflow-wrap: anywhere; }
.work-list .btn { flex-shrink: 0; }
.overdue { color: var(--color-danger); background: var(--color-danger-bg); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); }
.conflict-panel { border: 2px solid var(--color-warning); }
.assistant-source, .assistant-task { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.assistant-source .preserve-text, .assistant-task textarea { overflow-wrap: anywhere; }

/* Home: the same tokens and buttons, with a larger editorial heading. */
.home-experience > .page-heading h1 { max-width: 900px; font-size: var(--text-hero); overflow-wrap: normal; word-break: normal; hyphens: none; }
.welcome-panel { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: var(--space-8); padding: var(--space-12); margin-bottom: var(--space-12); border-radius: var(--radius-lg); background: linear-gradient(128deg, var(--color-primary-800), var(--color-primary-900)); color: var(--color-on-dark); box-shadow: var(--shadow-md); }
.welcome-copy .pill-light { background: var(--color-dark-hover); border-color: var(--color-dark-border); color: var(--color-mint-300); }
.welcome-copy h2 { margin: var(--space-6) 0 var(--space-4); color: var(--color-surface); font-size: var(--text-3xl); line-height: 1.15; }
.welcome-copy p { color: var(--color-on-dark); margin-bottom: var(--space-6); }
.journey { display: grid; gap: var(--space-3); min-width: 0; }
.journey > a { display: flex; align-items: center; gap: var(--space-3); min-height: 72px; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-primary-800); font-size: var(--text-base); font-weight: 600; box-shadow: var(--shadow-sm); }
.journey > a:hover { background: var(--color-mint-100); }
.journey > a > span:nth-child(2) { min-width: 0; }
.journey > a > :last-child { margin-left: auto; color: var(--color-primary-600); }
.journey small { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 400; }
.journey-number { display: grid; place-items: center; flex-shrink: 0; width: var(--space-8); height: var(--space-8); border-radius: var(--radius-round); background: var(--color-mint-100); color: var(--color-primary-800); font-size: var(--text-xs); font-weight: 700; }
.home-experience > .card-grid .feature-card { min-height: 250px; }
.home-experience > .notice { border-left: 4px solid var(--color-accent); }

/* Responsive layout changes never shrink the type below the token scale. */
.app-topbar { justify-content: flex-end; }
.marketing-shell { min-height: 100vh; display: flex; flex-direction: column; }
.marketing-header { position: fixed; z-index: 40; inset: 0 0 auto; height: var(--marketing-header-height); background: var(--color-header-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; }
.marketing-header.has-scrolled { border-bottom-color: var(--color-border); }
.marketing-header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); max-width: 1400px; height: 100%; margin: auto; padding-inline: var(--space-8); }
.marketing-brand { margin: 0; color: var(--color-primary-900); font-size: var(--text-xl); white-space: nowrap; }
.marketing-brand .brand-mark { font-size: var(--text-xl); }
.marketing-desktop-nav, .marketing-desktop-actions { display: flex; align-items: center; gap: var(--space-6); font-size: var(--text-sm); }
.marketing-desktop-nav a, .marketing-login { display: inline-flex; align-items: center; min-height: var(--control-height); }
.marketing-desktop-nav a:hover, .marketing-login:hover, .marketing-footer a:hover { color: var(--color-primary-600); text-decoration: underline; text-underline-offset: var(--space-1); }
.marketing-desktop-actions { gap: var(--space-4); }
.compact-language { display: inline-flex; align-items: center; gap: var(--space-1); }
.compact-language .btn { min-width: var(--control-height); padding-inline: var(--space-1); font-size: var(--text-sm); color: var(--color-text-muted); }
.compact-language .btn[aria-pressed="true"] { color: var(--color-primary-800); text-decoration: underline; text-underline-offset: var(--space-1); }
.marketing-menu-toggle { display: none; }
.marketing-content { max-width: 1280px; padding: calc(var(--marketing-header-height) + var(--space-12)) var(--space-8) var(--space-12); }
.marketing-footer { width: 100%; margin-top: auto; padding: var(--space-12) var(--space-8) var(--space-6); background: var(--color-primary-900); color: var(--color-on-dark); font-size: var(--text-sm); }
.marketing-footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.5fr; gap: var(--space-8); max-width: 1216px; margin-inline: auto; }
.marketing-footer-grid > * { min-width: 0; }
.marketing-footer-grid > nav { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.marketing-footer h2 { margin: 0 0 var(--space-2); color: var(--color-surface); font-size: var(--text-base); }
.marketing-footer a, .marketing-footer p, .marketing-footer .compact-language .btn { color: var(--color-on-dark); font-size: var(--text-sm); }
.marketing-footer .brand { color: var(--color-surface); font-size: var(--text-xl); }
.marketing-footer a:hover, .marketing-footer .compact-language .btn:hover { color: var(--color-surface); text-decoration: underline; text-underline-offset: var(--space-1); }
.marketing-footer .compact-language .btn[aria-pressed="true"] { color: var(--color-surface); }
.marketing-footer-bottom { max-width: 1216px; margin: var(--space-8) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--color-dark-border); }
@media (max-width: 767px) { .marketing-footer-grid { grid-template-columns: minmax(0, 1fr); } }
.marketing-mobile-menu { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: var(--space-6); border: 0; background: var(--color-surface); color: var(--color-text); overflow-x: hidden; overflow-y: auto; }
.marketing-mobile-menu::backdrop { background: var(--color-surface); }
.marketing-mobile-menu[open] { display: flex; flex-direction: column; gap: var(--space-8); }
.marketing-mobile-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.marketing-mobile-links { display: grid; gap: var(--space-4); }
.marketing-mobile-links a { display: flex; align-items: center; min-height: var(--control-height); padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--text-xl); font-weight: 600; }
.marketing-mobile-actions { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); margin-top: auto; }
.marketing-mobile-actions .compact-language { justify-content: flex-start; }
html.marketing-menu-open { overflow: hidden; }
.marketing-section { margin-block: var(--space-16); scroll-margin-top: calc(var(--marketing-header-height) + var(--space-8)); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-6); }
.hero-note { margin-top: var(--space-3); }
.public-home > .page-heading { margin-bottom: var(--space-12); }
.public-home .welcome-panel { padding: var(--space-8); }
.public-journey { display: grid; gap: var(--space-6); list-style: none; padding: 0; margin: 0; }
.public-journey li { display: flex; align-items: flex-start; gap: var(--space-4); }
.public-journey p { color: var(--color-on-dark); font-size: var(--text-sm); margin: var(--space-1) 0 0; }
.public-faq { border-top: 1px solid var(--color-border); }
.public-faq details { padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.public-faq summary { cursor: pointer; font-size: var(--text-lg); font-weight: 600; }
.public-faq p { max-width: 850px; margin: var(--space-4) 0 0; }
.public-final-cta { padding: var(--space-12); border-radius: var(--radius-lg); background: var(--color-mint-100); text-align: center; }
@media (min-width: 768px) and (max-width: 1100px) {
    .marketing-header-inner { gap: var(--space-3); padding-inline: var(--space-4); }
    .marketing-desktop-nav, .marketing-desktop-actions { gap: var(--space-3); }
    .marketing-brand { font-size: var(--text-lg); }
    .marketing-desktop-actions .btn-primary { padding-inline: var(--space-3); }
}
@media (min-width: 1101px) {
    .marketing-header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .marketing-desktop-actions { justify-self: end; }
}
@media (max-width: 767px) {
    .marketing-header { height: 72px; }
    .marketing-header-inner { padding-inline: var(--space-4); }
    .marketing-desktop-nav, .marketing-desktop-actions { display: none; }
    .marketing-menu-toggle { display: inline-flex; }
    .marketing-content { padding: calc(72px + var(--space-8)) var(--space-4) var(--space-8); }
    .marketing-footer { flex-wrap: wrap; padding-inline: var(--space-4); }
    .marketing-section { margin-block: var(--space-12); }
    .marketing-mobile-menu { padding: var(--space-4); }
    .public-final-cta { padding: var(--space-8) var(--space-4); }
}
@media (min-width: 1600px) { main { padding-top: var(--space-12); } }
@media (max-width: 1200px) {
    .conference-layout { grid-template-columns: minmax(0, 1fr); }
    .split-notice { flex-direction: column; gap: var(--space-4); }
    .welcome-panel { grid-template-columns: minmax(0, 1fr); padding: var(--space-8); }
    .journey { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .info-grid, .capacity-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
    .app-shell { display: block; }
    .sidebar { position: sticky; z-index: 30; top: 0; height: auto; padding: var(--space-3) var(--space-4) var(--space-2); overflow: visible; }
    .brand { margin: 0 0 var(--space-2); font-size: var(--text-xl); }
    .brand-mark { font-size: var(--text-xl); }
    .workspace-label, .sidebar-note, .nav-heading, .account-link { display: none; }
    .primary-nav { display: flex; gap: var(--space-1); overflow-x: auto; padding: var(--space-1); overscroll-behavior-inline: contain; scrollbar-width: thin; }
    .primary-nav a { flex: 0 0 auto; margin: 0; padding: var(--space-2) var(--space-3); }
    .primary-nav a.mobile-account { display: flex; }
    .primary-nav a.active { box-shadow: inset 0 -3px var(--color-mint-300); }
    .topbar { padding: var(--space-2) var(--space-6); }
    main { padding: var(--space-8) var(--space-6); }
    .page-footer { padding: var(--space-4) var(--space-6); }
    .media-prejoin { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    h1 { font-size: var(--text-2xl); }
    .sidebar { padding-inline: var(--space-3); }
    .topbar { padding: var(--space-2) var(--space-4); flex-wrap: wrap; }
    .topbar-actions { width: 100%; justify-content: space-between; gap: var(--space-2); }
    main { padding: var(--space-6) var(--space-4); }
    .page-footer { padding: var(--space-4); flex-direction: column; gap: var(--space-2); }
    .page-heading { gap: var(--space-4); margin-bottom: var(--space-6); }
    .heading-action { width: 100%; }
    .heading-action .btn { flex: 1 1 auto; }
    .card-grid, .info-grid, .capacity-grid, .journey { grid-template-columns: minmax(0, 1fr); }
    .feature-card, .surface { padding: var(--space-4); }
    .feature-card > .pill { right: var(--space-4); top: var(--space-4); }
    .status-list > div { display: grid; gap: var(--space-1); }
    .status-list dd { text-align: left; }
    .record-list li { flex-direction: column; align-items: stretch; gap: var(--space-3); }
    .capacity-panel { padding: var(--space-6); }
    .capacity-grid > div { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
    .tab-nav { gap: var(--space-4); }
    .pagination { gap: var(--space-2); }
    .chat-composer-footer { align-items: stretch; flex-direction: column; }
    .file-actions { justify-content: flex-start; }
    .media-grid { grid-template-columns: minmax(0, 1fr); }
    .media-toolbar { width: 100%; }
    .media-control { flex: 1 1 auto; }
    .media-toolbar-spacer { display: none; }
    .conference-stage { min-height: min(68vh, 450px); }
    .stage-controls, .stage-top { padding: var(--space-4); }
    form, .form-panel { max-width: none; }
    .form-panel form { width: 100%; }
    .notice { padding: var(--space-4); }
    .welcome-panel { padding: var(--space-6); }
    .welcome-copy h2 { font-size: var(--text-2xl); }
    .empty-state { padding: var(--space-8) var(--space-4); }
}
@media (max-width: 380px) {
    .brand small { display: none; }
    main { padding-inline: var(--space-3); }
    .primary-nav a { padding-inline: var(--space-2); }
}
/* Placed after component rules so inputs and buttons retain a keyboard focus ring. */
:is(a[href], button, input, textarea, select, summary, [tabindex]:not([tabindex="-1"]), [contenteditable="true"], [role="button"]):focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); box-shadow: var(--shadow-focus) !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Public landing page: all values share the application's design tokens. */
.marketing-shell:has(.landing-page) { background: var(--color-surface); }
.landing-page { color: var(--color-text); }
.landing-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-8) 0 var(--space-12); background: radial-gradient(ellipse at 85% 35%, var(--color-mint-100), var(--color-surface) 72%); }
.landing-hero-copy { min-width: 0; }
.landing-badge { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-round); background: var(--color-mint-100); color: var(--color-primary-800); font-size: var(--text-xs); font-weight: 600; }
.landing-hero h1 { max-width: 14ch; margin: var(--space-6) 0; font-size: var(--text-hero); font-weight: 800; line-height: 1.05; letter-spacing: var(--tracking-hero); color: var(--color-primary-900); overflow-wrap: normal; word-break: normal; hyphens: none; }
.landing-subtitle { max-width: 580px; font-size: var(--text-lg); line-height: 1.6; margin-bottom: var(--space-6); }
.landing-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.landing-reassurance { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: 0; margin: var(--space-6) 0 0; list-style: none; font-size: var(--text-xs); color: var(--color-text-muted); }
.landing-reassurance li { display: inline-flex; align-items: center; gap: var(--space-1); }
.landing-reassurance .ui-icon { width: 16px; height: 16px; color: var(--color-primary-600); }
.landing-mockup { min-width: 0; margin: 0; }
.mock-window { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); transform: perspective(1200px) rotateY(-6deg); transform-origin: center right; }
.mock-browser-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--color-border); background: var(--color-bg); font-size: var(--text-xs); color: var(--color-text-muted); }
.mock-browser-bar > .ui-icon { width: 16px; height: 16px; }
.mock-browser-dots { display: flex; gap: var(--space-1); flex-shrink: 0; }
.mock-browser-dots i { width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--color-mint-300); }
.mock-browser-dots i:first-child { background: var(--color-accent); }
.mock-browser-dots i:last-child { background: var(--color-primary-600); }
.mock-workspace { display: grid; grid-template-columns: 64px minmax(0, 1fr); }
.mock-sidebar { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-1); background: var(--color-primary-900); color: var(--color-on-dark); }
.mock-sidebar > span { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: 100%; padding-block: var(--space-2); font-size: var(--text-xs); }
.mock-sidebar > .mock-mini-brand { width: 32px; height: 32px; padding: 0; justify-content: center; margin-bottom: var(--space-2); border-radius: var(--radius-sm); color: var(--color-primary-900); background: var(--color-mint-300); font-size: var(--text-lg); font-weight: 800; letter-spacing: -.1em; }
.mock-sidebar .mock-mini-active { border-radius: var(--radius-sm); background: var(--color-dark-hover); }
.mock-sidebar .ui-icon { width: 18px; height: 18px; }
.mock-room { min-width: 0; padding: var(--space-4); }
.mock-room-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.mock-room-heading > div { display: grid; gap: var(--space-1); }
.mock-room-heading strong { font-size: var(--text-sm); }
.mock-eyebrow { color: var(--color-text-muted); font-size: var(--text-xs); }
.mock-count { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-primary-600); font-size: var(--text-xs); }
.mock-count .ui-icon { width: 16px; height: 16px; }
.mock-video-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.mock-video-tile { display: grid; place-items: center; position: relative; aspect-ratio: 1.4; border-radius: var(--radius-sm); min-width: 0; }
.mock-video-mint { background: var(--color-mint-100); color: var(--color-primary-800); }
.mock-video-coral { background: var(--color-accent-soft); color: var(--color-on-accent); }
.mock-video-lilac { background: var(--color-lilac-bg); color: var(--color-lilac); }
.mock-video-forest { background: var(--color-primary-800); color: var(--color-on-dark); }
.mock-avatar { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-round); background: var(--color-surface); font-size: var(--text-base); font-weight: 700; }
.mock-video-forest .mock-avatar { background: var(--color-primary-600); color: var(--color-surface); }
.mock-person { position: absolute; bottom: var(--space-2); left: var(--space-2); font-size: var(--text-xs); }
.mock-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-3); }
.mock-panel { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); min-width: 0; }
.mock-panel h3 { display: flex; align-items: center; gap: var(--space-1); margin: 0 0 var(--space-3); font-size: var(--text-xs); letter-spacing: 0; }
.mock-panel .ui-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-primary-600); }
.mock-decisions { display: grid; gap: var(--space-3); padding: 0; margin: 0; list-style: none; }
.mock-decisions li { display: flex; align-items: flex-start; gap: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
.mock-task + .mock-task { border-top: 1px solid var(--color-border); padding-top: var(--space-2); margin-top: var(--space-2); }
.mock-task strong { display: block; font-size: var(--text-xs); font-weight: 600; }
.mock-task > span { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
.mock-task b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--radius-round); background: var(--color-mint-100); color: var(--color-primary-800); font-weight: 600; }
.mock-task em { font-style: normal; margin-left: auto; }
.landing-mockup figcaption { display: flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); margin-top: var(--space-4); }
.landing-mockup figcaption .ui-icon { width: 16px; height: 16px; }
.landing-proof { margin-top: var(--space-6); padding-block: var(--space-8); border-block: 1px solid var(--color-border); text-align: center; }
.landing-proof h2 { max-width: 700px; margin: 0 auto var(--space-6); font-size: var(--text-base); font-weight: 500; line-height: 1.55; color: var(--color-text-muted); letter-spacing: 0; }
.landing-proof ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-6) var(--space-12); list-style: none; padding: 0; margin: 0; }
.landing-proof li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--color-primary-800); }
.landing-proof .ui-icon { width: 24px; height: 24px; }
.landing-section { margin-block: var(--space-24); scroll-margin-top: calc(var(--marketing-header-height) + var(--space-8)); }
.landing-section-heading { max-width: 760px; margin: 0 auto var(--space-12); text-align: center; }
.landing-section-heading h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-heading); }
.landing-section-heading > p:last-child { font-size: var(--text-base); margin-bottom: 0; }
.landing-cycle { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-6); position: relative; padding: 0; margin: 0; list-style: none; }
.landing-cycle::before { content: ""; position: absolute; top: 32px; left: 10%; right: 10%; height: 1px; background: var(--color-border); }
.landing-cycle li { position: relative; text-align: center; min-width: 0; }
.landing-cycle-icon { display: grid; place-items: center; position: relative; width: 64px; height: 64px; margin: 0 auto var(--space-6); background: var(--color-mint-100); border: 8px solid var(--color-surface); outline: 1px solid var(--color-border); border-radius: var(--radius-round); color: var(--color-primary-600); }
.landing-cycle-icon .ui-icon { width: 24px; height: 24px; }
.landing-cycle h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.landing-cycle p { font-size: var(--text-base); margin: 0; }
.landing-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.landing-feature { padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); transition: transform 180ms ease, box-shadow 180ms ease; }
.landing-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.landing-feature-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-6); border-radius: var(--radius-md); background: var(--color-mint-100); color: var(--color-primary-600); }
.landing-feature-icon .ui-icon { width: 24px; height: 24px; }
.landing-feature h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.landing-feature p { font-size: var(--text-base); margin: 0; }
.landing-continuity { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: var(--space-12); position: relative; isolation: isolate; overflow: hidden; padding: var(--space-16); border-radius: var(--radius-lg); background: var(--color-primary-900); color: var(--color-on-dark); }
.landing-continuity .eyebrow { color: var(--color-mint-300); }
.landing-continuity h2 { color: var(--color-surface); font-size: var(--text-3xl); line-height: 1.1; letter-spacing: var(--tracking-heading); }
.landing-continuity p:not(.eyebrow) { max-width: 600px; margin-bottom: var(--space-8); color: var(--color-on-dark); font-size: var(--text-base); }
.landing-orbit { position: absolute; z-index: -1; width: 480px; height: 480px; right: -96px; border: 1px solid var(--color-mint-300); border-radius: var(--radius-round); opacity: .12; pointer-events: none; }
.landing-orbit-one { top: -160px; }
.landing-orbit-two { bottom: -200px; right: 64px; }
.landing-continuity-note { display: grid; justify-items: center; gap: var(--space-6); padding: var(--space-8); border: 1px solid var(--color-dark-border); border-radius: var(--radius-lg); background: var(--color-primary-800); color: var(--color-on-dark); text-align: center; font-size: var(--text-xl); font-weight: 600; }
.landing-continuity-note .ui-icon { width: 48px; height: 48px; color: var(--color-mint-300); }
.landing-pricing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.landing-price-card { padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.landing-price-free { background: var(--color-mint-100); border-color: var(--color-mint-300); }
.landing-price-card h3 { font-size: var(--text-lg); }
.landing-price { display: grid; gap: var(--space-2); margin-block: var(--space-6); color: var(--color-text); }
.landing-price strong { font-size: var(--text-3xl); font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.landing-price > span { color: var(--color-text-muted); font-size: var(--text-sm); }
.landing-price-card > p:last-child { font-size: var(--text-base); margin-bottom: 0; }
.landing-section-action { margin-top: var(--space-6); text-align: center; }
.landing-faq { max-width: 920px; margin-inline: auto; }
.landing-faq-list { border-top: 1px solid var(--color-border); }
.landing-faq details { border-bottom: 1px solid var(--color-border); }
.landing-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); list-style: none; cursor: pointer; font-size: var(--text-lg); font-weight: 600; }
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary .ui-icon { color: var(--color-primary-600); }
.landing-faq details[open] summary .ui-icon { transform: rotate(45deg); }
.landing-faq details > div { padding-bottom: var(--space-6); }
.landing-faq p { margin: 0; font-size: var(--text-base); }
.landing-faq-limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); list-style: none; padding: var(--space-4) 0; margin: 0; font-size: var(--text-base); color: var(--color-text-muted); }
.landing-faq-limits strong { color: var(--color-primary-800); }
.landing-final-cta { padding: var(--space-16) var(--space-8); border-radius: var(--radius-lg); background: var(--color-accent-soft); text-align: center; }
.landing-final-cta .landing-badge { margin-bottom: var(--space-6); background: var(--color-surface); border-color: var(--color-border); }
.landing-final-cta h2 { max-width: 700px; margin-inline: auto; font-size: var(--text-2xl); }
.landing-final-cta p { font-size: var(--text-base); margin-bottom: var(--space-6); }
.landing-page [data-reveal] { transition: opacity 400ms ease, transform 400ms ease; }
.landing-page .reveal-pending { opacity: 0; transform: translateY(var(--space-3)); }
@media (max-width: 1023px) {
    .landing-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
    .landing-hero-copy { max-width: 760px; }
    .landing-hero h1 { max-width: 18ch; }
    .landing-mockup { width: 100%; max-width: 620px; margin-inline: auto; }
    .mock-window { transform: none; }
    .landing-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .landing-continuity { padding: var(--space-12); gap: var(--space-8); }
    .landing-continuity h2 { font-size: var(--text-2xl); }
    .landing-continuity-note { font-size: var(--text-lg); }
}
@media (max-width: 767px) {
    .landing-hero { padding-top: var(--space-4); gap: var(--space-8); }
    .landing-hero h1 { max-width: none; }
    .landing-hero-actions { flex-direction: column; align-items: stretch; }
    .landing-reassurance { font-size: var(--text-xs); gap: var(--space-2) var(--space-3); }
    .mock-room { padding: var(--space-3); }
    .mock-avatar { width: 32px; height: 32px; font-size: var(--text-sm); }
    .mock-person { bottom: var(--space-1); }
    .mock-panel { padding: var(--space-2); }
    .landing-proof ul { gap: var(--space-6); }
    .landing-section { margin-block: var(--space-16); }
    .landing-section-heading { margin-bottom: var(--space-8); text-align: left; }
    .landing-cycle { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
    .landing-cycle::before { inset: 32px auto 32px 32px; width: 1px; height: auto; }
    .landing-cycle li { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: var(--space-6); text-align: left; }
    .landing-cycle-icon { margin: 0; }
    .landing-features, .landing-pricing { grid-template-columns: minmax(0, 1fr); }
    .landing-feature, .landing-price-card { padding: var(--space-6); }
    .landing-continuity { grid-template-columns: minmax(0, 1fr); padding: var(--space-8) var(--space-6); }
    .landing-continuity-note { display: none; }
    .landing-continuity .btn { width: 100%; }
    .landing-faq-limits { grid-template-columns: minmax(0, 1fr); }
    .landing-final-cta { padding: var(--space-12) var(--space-6); }
    .landing-final-cta .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .landing-page [data-reveal] { transition: none; opacity: 1; transform: none; }
    .landing-feature:hover { transform: none; }
}

/* Public pricing: independent of application billing controls. */
.pricing-page { padding-top: var(--space-8); }
.pricing-heading { max-width: 880px; margin: 0 auto var(--space-16); text-align: center; }
.pricing-heading h1 { margin: var(--space-6) 0; font-size: var(--text-3xl); font-weight: 800; line-height: 1.15; letter-spacing: var(--tracking-heading); }
.pricing-heading > p { margin: 0; font-size: var(--text-lg); }
.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.pricing-card { position: relative; min-width: 0; padding: var(--space-8) var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.pricing-card-featured { border: 2px solid var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.pricing-recommended { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: var(--space-1) var(--space-3); border-radius: var(--radius-round); background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
.pricing-card h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); font-weight: 700; letter-spacing: -.02em; }
.pricing-audience { min-height: 48px; margin: 0; font-size: var(--text-sm); }
.pricing-amount { display: grid; gap: var(--space-2); margin: var(--space-6) 0; }
.pricing-amount strong { color: var(--color-primary-900); font-size: var(--text-3xl); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.pricing-amount > span { color: var(--color-text-muted); font-size: var(--text-sm); }
.pricing-card > .btn { width: 100%; min-height: 64px; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); text-align: center; }
.pricing-benefits { display: grid; gap: var(--space-4); list-style: none; margin: var(--space-8) 0 0; padding: 0; }
.pricing-benefits li { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); }
.pricing-benefits .ui-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--color-primary-600); }
.pricing-benefits strong { font-weight: 700; color: var(--color-text); }
.pricing-event { display: flex; align-items: center; gap: var(--space-6); margin-top: var(--space-8); padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-mint-100); }
.pricing-event-icon { display: grid; place-items: center; flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-primary-600); }
.pricing-event-icon .ui-icon { width: 24px; height: 24px; }
.pricing-event > div { flex: 1; min-width: 0; }
.pricing-event h2 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.pricing-event p { margin: 0; font-size: var(--text-base); }
.pricing-event > .btn { flex-shrink: 0; }
.pricing-faq { margin-block: var(--space-24) var(--space-12); }
.pricing-faq p + p { margin-top: var(--space-3); }
.pricing-legal { max-width: 1000px; margin: 0 auto; color: var(--color-text-muted); font-size: var(--text-xs); text-align: center; }

/* Public account forms. The room illustration is shared with the home page. */
.account-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--space-12); align-items: start; padding-block: var(--space-6); }
.account-form-column { min-width: 0; padding-block: var(--space-6); }
.account-form-shell { max-width: 440px; margin-inline: auto; }
.account-form-shell h1 { margin: 0 0 var(--space-4); font-size: var(--text-2xl); font-weight: 800; letter-spacing: var(--tracking-heading); line-height: 1.2; }
.account-intro { font-size: var(--text-base); margin-bottom: var(--space-8); }
.account-segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-1); background: var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-8); }
.account-segments [role="tab"] { min-width: 0; min-height: var(--control-height); padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.account-segments [aria-selected="true"] { background: var(--color-surface); box-shadow: var(--shadow-sm); color: var(--color-primary-800); }
.account-segments [role="tab"]:disabled { cursor: wait; }
.account-form-panel h2, .account-profile h2 { font-size: var(--text-lg); font-weight: 700; margin-bottom: var(--space-6); }
.account-form-panel form { display: block; }
.account-field { margin-bottom: var(--space-6); }
.account-field label { display: block; margin-bottom: var(--space-2); color: var(--color-text); font-size: var(--text-sm); font-weight: 600; }
.account-field input { display: block; width: 100%; min-width: 0; height: 48px; padding: 0 var(--space-4); margin: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font-size: var(--text-base); }
.account-field input:focus { border-color: var(--color-primary-600); box-shadow: var(--shadow-input-focus); }
.account-field input[aria-invalid="true"] { border-color: var(--color-danger); }
.account-password { position: relative; }
.account-password input { padding-right: var(--space-16); }
.account-password-toggle.btn { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; min-height: 44px; margin: 0; padding: 0; border-radius: var(--radius-sm); color: var(--color-text-muted); }
.account-field-error { display: none; grid-template-columns: 16px minmax(0, 1fr); gap: var(--space-1) var(--space-2); margin-top: var(--space-2); color: var(--color-danger); font-size: var(--text-sm); }
.account-field-error:has(.validation-message) { display: grid; }
.account-field-error > .ui-icon { width: 16px; height: 16px; margin-top: 2px; grid-column: 1; }
.account-field-error > .validation-message { grid-column: 2; }
.account-password-rules { display: grid; gap: var(--space-2); list-style: none; padding: 0; margin: 0 0 var(--space-6); color: var(--color-text-muted); font-size: var(--text-xs); }
.account-password-rules li { display: flex; align-items: center; gap: var(--space-2); }
.account-password-rules .ui-icon { width: 16px; height: 16px; flex-shrink: 0; }
.account-password-rules .rule-met { color: var(--color-primary-600); }
.account-form-panel .account-submit { width: 100%; margin-top: 0; }
.account-legal { margin: var(--space-4) 0 0; font-size: var(--text-xs); line-height: 1.7; }
.account-legal a { text-decoration: underline; text-underline-offset: 2px; }
.account-legal a[href] { color: var(--color-primary-600); }
.account-legal a[aria-disabled="true"] { cursor: default; }
.marketing-footer-links { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.legal-page { max-width: 720px; margin: 0 auto; padding-block: var(--space-8); }
.legal-heading h1 { font-size: var(--text-3xl); font-weight: 800; }
.legal-heading > p:not(.eyebrow) { font-size: var(--text-base); line-height: 1.7; }
.legal-draft { font-size: var(--text-base); line-height: 1.7; }
.legal-placeholder { color: var(--color-danger); overflow-wrap: anywhere; }
.legal-navigation { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); padding-block: var(--space-6); border-block: 1px solid var(--color-border); margin-block: var(--space-8); font-size: var(--text-sm); }
.legal-navigation a { padding-block: var(--space-2); color: var(--color-primary-600); }
.legal-navigation a[aria-current="page"] { font-weight: 700; text-decoration: underline; text-underline-offset: var(--space-1); }
.legal-content section { margin-block: var(--space-8); scroll-margin-top: calc(var(--marketing-header-height) + var(--space-6)); }
.legal-content h2, .legal-contact h2 { font-size: var(--text-xl); }
.legal-content p, .legal-content li { font-size: var(--text-base); line-height: 1.7; }
.legal-content ul { display: grid; gap: var(--space-3); padding-left: var(--space-6); color: var(--color-text-muted); }
.legal-content a { color: var(--color-primary-600); text-decoration: underline; text-underline-offset: var(--space-1); }
.legal-contact { padding: var(--space-8); background: var(--color-mint-100); border-radius: var(--radius-lg); margin-top: var(--space-12); }
.legal-contact p { font-size: var(--text-base); }
@media (max-width: 767px) {
    .legal-page { padding-top: var(--space-4); }
    .legal-heading h1 { font-size: var(--text-2xl); overflow-wrap: anywhere; }
    .legal-contact { padding: var(--space-6); }
    .legal-contact .btn { max-width: 100%; overflow-wrap: anywhere; }
}
.account-recovery { text-align: right; margin: calc(-1 * var(--space-2)) 0 var(--space-6); font-size: var(--text-sm); }
.account-resend { font-size: var(--text-xs); text-align: center; margin: var(--space-6) 0 0; }
.account-form-error { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2); margin-top: var(--space-6); color: var(--color-danger); }
.account-form-error > .ui-icon { flex-shrink: 0; }
.account-form-error > span { flex: 1; min-width: 0; }
.account-profile > .btn { margin: var(--space-2) var(--space-2) 0 0; }
.account-benefits { min-width: 0; overflow: hidden; padding: var(--space-8); border-radius: var(--radius-lg); background: var(--color-primary-900); color: var(--color-on-dark); }
.account-benefits > .eyebrow { color: var(--color-mint-300); }
.account-benefits > h2 { font-size: var(--text-2xl); font-weight: 800; line-height: 1.15; letter-spacing: var(--tracking-heading); color: var(--color-surface); }
.account-benefits > ul { display: grid; gap: var(--space-4); margin: var(--space-6) 0 var(--space-8); padding: 0; list-style: none; font-size: var(--text-sm); }
.account-benefits > ul li { display: flex; align-items: center; gap: var(--space-3); }
.account-benefits > ul .ui-icon { color: var(--color-mint-300); flex-shrink: 0; }
.account-benefits .mock-window { transform: none; color: var(--color-text); }
.account-benefits .mock-room { padding: var(--space-3); }
.account-benefits .mock-panel { padding: var(--space-2); }
.account-benefits .mock-video-tile { aspect-ratio: 1.8; }
.account-benefits .landing-mockup figcaption { color: var(--color-mint-300); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 1023px) {
    .account-page { grid-template-columns: minmax(0, 1fr); padding-top: 0; }
    .account-form-column { padding-block: var(--space-4); }
    .account-benefits { display: none; }
}
@media (max-width: 1199px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } }
@media (max-width: 767px) {
    .pricing-page { padding-top: var(--space-4); }
    .pricing-heading { margin-bottom: var(--space-12); }
    .pricing-heading h1 { font-size: var(--text-2xl); }
    .pricing-grid { grid-template-columns: minmax(0, 1fr); }
    .pricing-card { padding: var(--space-8) var(--space-6); }
    .pricing-card-featured { transform: none; }
    .pricing-audience { min-height: 0; }
    .pricing-event { flex-direction: column; align-items: flex-start; padding: var(--space-6); }
    .pricing-event > .btn { width: 100%; }
    .pricing-faq { margin-top: var(--space-16); }
}

/* Workspace shell and internal pages. */
.app-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); }
.app-shell .sidebar { display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; height: 100dvh; padding: var(--space-6) var(--space-4); overflow-y: auto; }
.app-sidebar-brand { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; margin-bottom: var(--space-8); }
.app-shell .brand { margin: 0 var(--space-2); font-size: var(--text-lg); }
.app-shell .brand-mark { display: grid; place-items: center; position: relative; width: 40px; height: 40px; padding: 0; font-size: var(--text-xl); }
.app-shell .brand-mark > span { position: absolute; left: 21px; padding: 0; }
.app-shell .primary-nav { display: block; overflow: visible; padding: 0; }
.app-shell .primary-nav a { position: relative; margin: var(--space-1) 0; padding: var(--space-3); min-height: 48px; font-size: var(--text-sm); }
.app-shell .primary-nav a.active { background: var(--color-nav-active); color: var(--color-surface); font-weight: 600; box-shadow: inset 3px 0 var(--color-mint-300); }
.app-shell .primary-nav .ui-icon { width: 20px; height: 20px; flex-shrink: 0; }
.app-shell .nav-heading { display: block; font-size: var(--text-xs); letter-spacing: .08em; margin: var(--space-6) var(--space-3) var(--space-3); }
.workspace-account { position: relative; margin-top: auto; padding-top: var(--space-8); flex-shrink: 0; color: var(--color-on-dark); font-size: var(--text-sm); }
.workspace-account summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); border-top: 1px solid var(--color-dark-border); cursor: pointer; list-style: none; }
.workspace-account summary::-webkit-details-marker { display: none; }
.workspace-avatar { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-round); background: var(--color-mint-300); color: var(--color-primary-900); font-weight: 700; font-size: var(--text-sm); }
.workspace-account-copy { flex: 1; min-width: 0; }
.workspace-account-copy strong, .workspace-account-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-account-copy strong { font-size: var(--text-sm); font-weight: 600; }
.workspace-account-copy small { color: var(--color-on-dark); font-size: var(--text-xs); }
.workspace-account summary > .ui-icon { flex-shrink: 0; width: 16px; height: 16px; }
.workspace-account-dropdown { position: absolute; bottom: calc(100% - var(--space-6)); left: 0; right: 0; z-index: 40; padding: var(--space-2); border: 1px solid var(--color-dark-border); border-radius: var(--radius-md); background: var(--color-primary-800); box-shadow: var(--shadow-md); }
.workspace-account-dropdown > a, .workspace-account-dropdown > .btn { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-on-dark); text-align: left; justify-content: flex-start; }
.workspace-account-dropdown > a:hover, .workspace-account-dropdown > .btn:hover:not(:disabled) { background: var(--color-nav-active); color: var(--color-surface); }
.workspace-account-dropdown p { margin: var(--space-2); color: var(--color-danger-on-dark); font-size: var(--text-xs); }
.app-shell .app-topbar { position: sticky; top: 0; z-index: 25; height: 64px; min-height: 64px; max-height: 64px; padding: var(--space-2) var(--space-8); flex-wrap: nowrap; justify-content: space-between; }
.app-topbar-start { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.app-topbar-caption { font-size: var(--text-sm); }
.app-topbar .compact-language .btn { min-width: var(--control-height); min-height: 44px; padding-inline: var(--space-2); font-size: var(--text-sm); }
.app-sidebar-collapse, .app-menu-open, .app-menu-close, .app-menu-backdrop, .app-mobile-brand { display: none; }
.app-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); }
.app-breadcrumb a { color: var(--color-primary-600); }
.app-breadcrumb .ui-icon { width: 16px; height: 16px; }
.app-shell .page-heading h1 { font-size: var(--text-2xl); line-height: 1.2; }
.app-shell .page-heading p:not(.eyebrow) { font-size: var(--text-base); color: var(--color-text-muted); }
.app-shell .page-heading { align-items: center; }
.workspace-filter-bar { display: flex; align-items: flex-start; gap: var(--space-3); }
.workspace-segments { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); margin-bottom: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-border); }
.workspace-segments button { min-height: 44px; padding: var(--space-2) var(--space-4); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; }
.workspace-segments [aria-pressed="true"] { background: var(--color-surface); color: var(--color-primary-800); box-shadow: var(--shadow-sm); }
.workspace-tooltip { position: relative; display: inline-flex; }
.workspace-tooltip > .btn { color: var(--color-text-muted); }
.workspace-tooltip [role="tooltip"] { position: absolute; left: 0; top: 100%; z-index: 30; width: 260px; max-width: calc(100vw - 48px); padding: var(--space-3); border-radius: var(--radius-sm); background: var(--color-primary-900); color: var(--color-on-dark); font-size: var(--text-xs); box-shadow: var(--shadow-md); visibility: hidden; opacity: 0; }
.workspace-tooltip:hover [role="tooltip"], .workspace-tooltip:focus-within [role="tooltip"] { visibility: visible; opacity: 1; }
.room-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.room-card { display: flex; flex-direction: column; min-width: 0; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.room-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.room-card-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-md); background: var(--color-mint-100); color: var(--color-primary-600); }
.room-card-icon .ui-icon { width: 24px; height: 24px; }
.room-card h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); overflow-wrap: anywhere; }
.room-description { font-size: var(--text-sm); margin: 0 0 var(--space-6); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.room-members { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: auto; font-size: var(--text-sm); color: var(--color-text-muted); }
.member-stack { display: inline-flex; }
.member-stack > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-round); background: var(--color-mint-100); border: 2px solid var(--color-surface); margin-left: -8px; color: var(--color-primary-800); font-size: var(--text-xs); font-weight: 700; }
.member-stack > span:first-child { margin-left: 0; }
.member-stack > span:nth-child(2) { background: var(--color-lilac-bg); color: var(--color-lilac); }
.member-stack > span:nth-child(3) { background: var(--color-accent-soft); color: var(--color-on-accent); }
.room-last-session { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-xs); margin: var(--space-4) 0 var(--space-6); }
.room-last-session .ui-icon { width: 16px; height: 16px; flex-shrink: 0; }
.workspace-load-error { display: flex; align-items: flex-start; gap: var(--space-3); }
.workspace-load-error > .ui-icon { color: var(--color-danger); flex-shrink: 0; }
.workspace-load-error h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.workspace-load-error .btn { margin-top: var(--space-4); }
.skeleton { position: relative; overflow: hidden; background: var(--color-skeleton); border-radius: var(--radius-sm); }
.skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--color-surface), transparent); animation: workspace-shimmer 1.5s ease-in-out infinite; }
.skeleton-card { min-height: 280px; gap: var(--space-4); }
.skeleton-icon { width: 48px; height: 48px; }
.skeleton-title { width: 70%; height: 24px; margin-top: var(--space-2); }
.skeleton-line { width: 100%; height: 16px; }
.skeleton-short { width: 55%; }
.skeleton-button { margin-top: auto; width: 100%; height: 44px; }
@keyframes workspace-shimmer { to { transform: translateX(100%); } }
.task-table-container { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.task-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: var(--text-sm); }
.task-table th { text-align: left; padding: var(--space-4); font-weight: 600; color: var(--color-text-muted); background: var(--color-bg); }
.task-table th:nth-child(1) { width: 30%; }
.task-table th:nth-child(2) { width: 20%; }
.task-table th:nth-child(3) { width: 17%; }
.task-table th:nth-child(4) { width: 19%; }
.task-table th:nth-child(5) { width: 14%; }
.task-table td { padding: var(--space-4); border-top: 1px solid var(--color-border); vertical-align: middle; overflow-wrap: anywhere; }
.task-name a { font-weight: 600; color: var(--color-text); }
.task-name a:hover { color: var(--color-primary-600); text-decoration: underline; }
.task-status { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); border-radius: var(--radius-round); font-size: var(--text-xs); font-weight: 600; background: var(--color-bg); color: var(--color-text-muted); }
.task-status::before { content: ""; display: inline-block; width: 6px; height: 6px; flex-shrink: 0; border-radius: var(--radius-round); background: currentColor; }
.task-status[data-status="2"] { background: var(--color-lilac-bg); color: var(--color-lilac); }
.task-status[data-status="3"] { background: var(--color-mint-100); color: var(--color-primary-800); }
.task-status[data-status="4"] { background: var(--color-warning-bg); color: var(--color-warning); }
.task-overdue { color: var(--color-danger); }
.task-overdue-label { display: block; font-size: var(--text-xs); font-weight: 600; }
.task-action .btn { padding-inline: var(--space-2); }
.task-mobile-label { display: none; }
.session-timeline { position: relative; padding: 0; margin: var(--space-8) 0; list-style: none; }
.session-timeline::before { content: ""; position: absolute; top: 16px; bottom: 16px; left: 15px; width: 2px; background: var(--color-border); }
.session-timeline > li { position: relative; display: grid; grid-template-columns: 32px 110px minmax(0, 1fr); gap: var(--space-4); align-items: start; padding-bottom: var(--space-8); }
.session-timeline > li:last-child { padding-bottom: 0; }
.timeline-marker { display: grid; place-items: center; position: relative; width: 32px; height: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-round); background: var(--color-mint-100); color: var(--color-primary-600); }
.timeline-marker .ui-icon { width: 16px; height: 16px; }
.timeline-date { padding-top: var(--space-1); font-size: var(--text-sm); }
.timeline-date strong, .timeline-date time > span { display: block; }
.timeline-date time > span { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-xs); }
.timeline-card { min-width: 0; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sm); }
.timeline-card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.timeline-card h2 { font-size: var(--text-lg); margin: var(--space-2) 0 0; }
.timeline-room { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--text-sm); }
.timeline-room .ui-icon { width: 16px; height: 16px; flex-shrink: 0; }
.timeline-statistics { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); padding: 0; margin: var(--space-6) 0 var(--space-3); list-style: none; font-size: var(--text-sm); color: var(--color-text-muted); }
.timeline-statistics li { display: flex; align-items: center; gap: var(--space-2); }
.timeline-statistics .ui-icon { width: 18px; height: 18px; flex-shrink: 0; }
@media (max-width: 1250px) { .room-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 768px) and (max-width: 1100px) {
    .app-shell { grid-template-columns: 80px minmax(0, 1fr); }
    .app-shell.sidebar-expanded { grid-template-columns: 272px minmax(0, 1fr); }
    .app-shell:not(.sidebar-expanded) .sidebar { padding-inline: var(--space-2); }
    .app-shell:not(.sidebar-expanded) .sidebar-label, .app-shell:not(.sidebar-expanded) .nav-heading, .app-shell:not(.sidebar-expanded) .workspace-account summary > .ui-icon { display: none; }
    .app-shell:not(.sidebar-expanded) .brand { margin-inline: auto; }
    .app-shell:not(.sidebar-expanded) .app-sidebar-brand, .app-shell:not(.sidebar-expanded) .primary-nav a, .app-shell:not(.sidebar-expanded) .workspace-account summary { justify-content: center; }
    .app-shell:not(.sidebar-expanded) .workspace-account-dropdown { position: fixed; left: 80px; bottom: var(--space-6); right: auto; width: 220px; }
    .app-sidebar-collapse { display: inline-flex; }
}
@media (max-width: 767px) {
    .app-shell { display: block; }
    .app-shell .sidebar { position: fixed; z-index: 70; top: 0; left: 0; bottom: 0; width: min(320px, calc(100vw - 48px)); transform: translateX(-105%); visibility: hidden; transition: transform 200ms ease, visibility 200ms; }
    .app-menu-visible { overflow: hidden; }
    .app-menu-visible .app-shell .sidebar { transform: none; visibility: visible; }
    .app-menu-visible .app-menu-backdrop { display: block; position: fixed; inset: 0; z-index: 60; padding: 0; border: 0; background: var(--color-overlay); }
    .app-menu-open, .app-menu-close { display: inline-flex; padding-inline: var(--space-2); }
    .app-menu-close { color: var(--color-on-dark); }
    .app-shell .app-topbar { padding-inline: var(--space-4); }
    .app-topbar-start { gap: var(--space-2); }
    .app-topbar-caption { display: none; }
    .app-mobile-brand { display: block; font-size: var(--text-lg); font-weight: 800; color: var(--color-primary-900); letter-spacing: -.04em; }
    .app-shell main { padding: var(--space-6) var(--space-4); }
    .app-breadcrumb { margin-bottom: var(--space-4); }
    .app-shell .page-heading > div:first-child { flex-basis: 100%; }
    .room-cards { grid-template-columns: minmax(0, 1fr); }
    .workspace-tooltip [role="tooltip"] { left: auto; right: 0; }
    .task-table-container { background: transparent; border: 0; }
    .task-table, .task-table tbody { display: block; }
    .task-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .task-table tbody > tr { display: block; margin-bottom: var(--space-4); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
    .task-table td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border: 0; }
    .task-table .task-name { padding-bottom: var(--space-4); margin-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); font-size: var(--text-base); }
    .task-mobile-label { display: inline; flex-shrink: 0; font-size: var(--text-xs); font-weight: 500; color: var(--color-text-muted); }
    .task-action > .btn { width: 100%; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-primary-800); }
    .session-timeline > li { grid-template-columns: 32px minmax(0, 1fr); gap: var(--space-3); }
    .timeline-date { grid-column: 2; }
    .timeline-date time { display: flex; align-items: baseline; gap: var(--space-3); }
    .timeline-card { grid-column: 2; padding: var(--space-4); }
    .timeline-card-heading { flex-wrap: wrap; }
    .timeline-statistics { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; transform: none; } }
/* Public guides and the isolated, static demonstration use the shared tokens. */
.public-guide { max-width: 1120px; margin-inline: auto; padding: var(--space-12) var(--space-6); overflow-wrap: anywhere; }
.public-guide-heading { max-width: 720px; margin-bottom: var(--space-8); }
.public-guide h1 { font-size: var(--text-2xl); line-height: 1.15; }
.public-guide h2 { font-size: var(--text-xl); }
.public-guide h3 { font-size: var(--text-lg); }
.public-guide p, .public-guide li { font-size: var(--text-base); line-height: 1.7; }
.demo-navigation { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-4); margin-bottom: var(--space-8); background: var(--color-mint-100); border-radius: var(--radius-md); }
.demo-navigation a { gap: var(--space-2); color: var(--color-primary-800); }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
.demo-panel { min-width: 0; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.demo-panel h2, .demo-records h3 { display: flex; align-items: center; gap: var(--space-2); }
.demo-panel h2 .ui-icon { width: 24px; height: 24px; flex-shrink: 0; }
.demo-context, .demo-records p { color: var(--color-text-muted); }
.demo-messages, .demo-records { padding: 0; margin: 0; list-style: none; }
.demo-messages li { display: flex; gap: var(--space-3); padding-block: var(--space-4); }
.demo-messages li > div { min-width: 0; }
.demo-messages h3 { margin: 0; font-size: var(--text-base); }
.demo-messages h3 span { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 400; }
.demo-avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; color: var(--color-primary-900); background: var(--color-mint-100); font-size: var(--text-sm); font-weight: 700; }
.demo-avatar-secondary { background: var(--color-accent-soft); }
.demo-records li { padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
.demo-records li:last-child { border-bottom: 0; }
.demo-records blockquote { margin: var(--space-3) 0; padding-left: var(--space-4); border-left: 3px solid var(--color-mint-300); color: var(--color-text-muted); }
.demo-status { display: inline-flex; padding: var(--space-1) var(--space-3); color: var(--color-primary-800); background: var(--color-mint-100); border-radius: var(--radius-sm); font-size: var(--text-sm); }
.public-guide-cta { margin-top: var(--space-8); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-accent-soft); }
.public-guide-cta .btn { margin: var(--space-2) var(--space-2) var(--space-2) 0; white-space: normal; text-align: center; }
.help-page { max-width: 820px; }
.help-page > section { margin-block: var(--space-8); }
.help-page ol { padding-left: var(--space-6); }
.help-page li { margin-bottom: var(--space-3); }
.public-guide section[id] { scroll-margin-top: var(--space-24); }
.pricing-quote { color: var(--color-primary-800); font-size: var(--text-sm); font-weight: 600; }
.pricing-example { font-size: var(--text-sm); color: var(--color-text-muted); }
.pricing-event-conditions { display: block; font-weight: 600; }
@media (max-width: 767px) {
    .public-guide { padding: var(--space-8) var(--space-4); }
    .demo-grid { grid-template-columns: minmax(0, 1fr); }
    .demo-panel { padding: var(--space-4); }
}

/* Shared public pricing, readable tracking, and a compact room demonstration. */
.plan-price { display: grid; gap: var(--space-2); margin-block: var(--space-6); }
.plan-price strong { display: block; white-space: nowrap; font-size: var(--text-3xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--tracking-heading); color: var(--color-primary-900); }
.plan-price > span { color: var(--color-text-muted); font-size: var(--text-sm); }
.landing-price-card { display: flex; flex-direction: column; align-items: flex-start; }
.landing-price-card > .btn { margin-top: auto; }
.landing-price-card > p:not(.plan-price) { margin-bottom: var(--space-6); }
.feature-coming-soon { display: inline-flex; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--color-mint-100); color: var(--color-primary-800); font-size: var(--text-xs); font-weight: 600; }
.demo-page .public-guide-heading { max-width: none; }
.demo-room-shell { display: grid; grid-template-columns: 64px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-md); }
.demo-room-rail { display: flex; flex-direction: column; gap: var(--space-6); align-items: center; padding-block: var(--space-6); background: var(--color-primary-900); color: var(--color-on-dark); }
.demo-room-rail .demo-avatar { width: 40px; height: 40px; flex-basis: 40px; }
.demo-room-workspace { min-width: 0; }
.demo-room-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-6); border-bottom: 1px solid var(--color-border); }
.demo-room-toolbar p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); }
.demo-room-members { display: flex; gap: var(--space-2); align-items: center; }
.demo-page .demo-navigation { gap: var(--space-2); border-radius: 0; margin: 0; padding: var(--space-3) var(--space-6); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.demo-navigation [role=tab] { padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border-bottom: 3px solid transparent; }
.demo-navigation [aria-selected=true] { color: var(--color-primary-900); background: var(--color-mint-100); border-bottom-color: var(--color-primary-600); font-weight: 700; }
.demo-page .demo-grid { display: block; min-height: 480px; }
.demo-page .demo-panel { padding: var(--space-6); border: 0; border-radius: 0; box-shadow: none; }
.demo-page .demo-panel[hidden] { display: none; }
.contact-page { max-width: 720px; }
.contact-page form { display: flex; flex-direction: column; gap: var(--space-3); }
.contact-page label { font-size: var(--text-sm); font-weight: 600; }
.contact-page input { min-height: 48px; }
.contact-page textarea { resize: vertical; }
.contact-page .contact-privacy, .contact-page .contact-direct { font-size: var(--text-sm); }
.contact-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
/* Keep the German navigation comfortable on tablets with three language options. */
@media (min-width: 768px) and (max-width: 1100px) {
    html[lang="de"] .marketing-desktop-nav, html[lang="de"] .marketing-desktop-actions { display: none; }
    html[lang="de"] .marketing-menu-toggle { display: inline-flex; }
}
@media (max-width: 639px) {
    .mock-sidebar { display: none; }
    .mock-workspace { grid-template-columns: minmax(0, 1fr); }
    .mock-panels { grid-template-columns: minmax(0, 1fr); }
    .demo-room-shell { grid-template-columns: minmax(0, 1fr); }
    .demo-room-rail { display: none; }
    .demo-room-toolbar, .demo-page .demo-navigation, .demo-page .demo-panel { padding: var(--space-4); }
}

/* Shared image imports: the native file selector is visually hidden, never removed from accessibility. */
.upload-zone{box-sizing:border-box;min-width:0;max-width:100%;padding:var(--space-6);margin-block:16px;border:2px dashed var(--color-border);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:flex-start;gap:12px;overflow-wrap:anywhere;}
.upload-zone:focus-within,.upload-zone.is-dragging{outline:2px solid var(--color-accent);outline-offset:2px;border-color:var(--color-primary-600);}
.upload-zone p{margin:0;max-width:100%;}.upload-zone .btn{max-width:100%;white-space:normal;min-height:44px;}
.upload-zone-preview{width:min(100%,420px);max-height:280px;object-fit:contain;border-radius:var(--radius-md);}
.upload-zone-portrait .upload-zone-preview{width:180px;height:180px;object-fit:cover;aspect-ratio:1;}
.upload-zone progress{width:100%;height:12px;accent-color:var(--color-primary-600);}
.upload-zone [hidden]{display:none!important;}.upload-zone .error-text:empty,.upload-zone [role=status]:empty{display:none;}
.profile-photo-current{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-bottom:24px;}.profile-photo-current p{margin-block:8px;}
.profile-form{min-width:0;}.profile-form input:not([type=file]){box-sizing:border-box;max-width:100%;}.profile-form form{margin-top:24px;}
.call-effects-panel .upload-zone{background:var(--call-surface);color:var(--call-text);border-color:var(--call-border);}
.call-effects-panel .upload-zone .small-text{color:var(--call-text-muted);}
@media(max-width:639px){.upload-zone{padding:16px;}.profile-photo-current{gap:16px;}.background-manager-grid{grid-template-columns:1fr;}}

.public-meeting-join { width: min(100%, 620px); margin: var(--space-8) auto; }
.public-meeting-join input { min-width: 0; width: 100%; }
.public-meeting-join #join-feedback { margin-top: var(--space-4); }
.public-meeting-join #join-feedback:empty { margin: 0; }
.public-meeting-join .notice { overflow-wrap: anywhere; }
@media (min-width: 768px) and (max-width: 1250px) {
    .marketing-desktop-nav, .marketing-desktop-actions { display: none; }
    .marketing-menu-toggle { display: inline-flex; }
    .marketing-header-inner { display: flex; }
}
@media (min-width: 1251px) {
    .marketing-header-inner { grid-template-columns: auto auto auto; gap: var(--space-4); }
    .marketing-desktop-actions { gap: var(--space-3); }
}

@media (max-width: 1023px) { .account-benefits.account-free-offer { display: block; } }
.account-free-offer > p { color: inherit; overflow-wrap: anywhere; }

.meeting-waiting { width: min(100%, 680px); margin: 2rem auto; padding: clamp(1rem, 4vw, 2rem); overflow-wrap: anywhere; }
.meeting-waiting form { margin-top: 1.5rem; }
.waiting-preview { aspect-ratio: 16/9; position: relative; background: var(--color-primary-900); border-radius: var(--radius-lg); overflow: hidden; margin-block: 1rem; }
.waiting-preview video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.waiting-preview p { position: absolute; bottom: 0; padding: .5rem; color: white; background: #0009; margin: 0; }
.call-waiting-list { margin-block: 1rem; padding: .75rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.call-waiting-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding-block: .5rem; }
.call-waiting-row > span { flex: 1 1 120px; overflow-wrap: anywhere; }

/* Private beta: shared form and surface styles, bounded responsive cards. */
.beta-banner{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.35rem 1rem;padding:.5rem 1rem;background:#e9f3ee;color:#163b31;font-size:.875rem;text-align:center}.beta-banner a{text-decoration:underline;font-weight:600}
.beta-public{max-width:720px;margin:2rem auto;padding:clamp(1rem,4vw,2rem);width:calc(100% - 2rem)}
.beta-form form{display:grid;gap:.65rem}.beta-form label{font-weight:600}.beta-form input:not([type=checkbox]),.beta-form select,.beta-form textarea,.beta-filters input,.beta-filters select{width:100%;max-width:100%;min-width:0;padding:.7rem;border:1px solid var(--border,#cbd8d2);border-radius:8px;background:var(--surface,#fff);color:inherit;font:inherit}.beta-check{display:flex;align-items:flex-start;gap:.65rem;font-weight:400!important}.beta-check input{flex:0 0 auto;width:1.15rem;height:1.15rem;margin-top:.15rem}.beta-form .btn{margin-top:.5rem;justify-self:start}.beta-admin{max-width:1400px;margin:auto}.beta-admin>.surface{padding:1.25rem;margin:1rem 0}.beta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem;margin:1rem 0}.beta-card{padding:1rem;border:1px solid var(--border,#cbd8d2);border-radius:12px;min-width:0;overflow-wrap:anywhere}.beta-card h3{font-size:1rem}.beta-card .btn{margin:.3rem .3rem .3rem 0}.beta-card dl{display:grid;grid-template-columns:1fr 1fr;gap:.35rem}.beta-card dd{margin:0}.beta-card small{display:block}.beta-filters,.beta-limits{display:flex!important;flex-wrap:wrap;gap:1rem!important}.beta-filters label,.beta-limits label{flex:1 1 180px;min-width:0}.beta-limits .btn{align-self:end}.beta-admin input[type=file]{max-width:100%}.beta-form :focus-visible,.beta-banner a:focus-visible,.beta-admin :focus-visible{outline:3px solid #26745c;outline-offset:3px}
@media(max-width:600px){.beta-banner{font-size:.8rem}.beta-public{margin:1rem auto}.beta-admin>.surface{padding:1rem}.beta-limits{display:grid!important}.beta-form .btn{max-width:100%;white-space:normal}}

.beta-feedback-dialog{border:1px solid #cbd8d2;border-radius:16px;width:min(760px,calc(100% - 2rem));max-height:90dvh;overflow:auto;padding:1rem;background:var(--surface,#fff);color:var(--text,#173e32)}.beta-feedback-dialog::backdrop{background:rgba(10,35,28,.55)}.beta-feedback-dialog .beta-public{width:100%;margin:0;border:0;box-shadow:none}

.beta-public,.beta-form{min-width:0;overflow-wrap:anywhere}

/* In beta, keep the announcement in normal flow above the sticky public header. */
.marketing-shell:has(> .beta-banner) .marketing-header{position:sticky;top:0}
.marketing-shell:has(> .beta-banner) .marketing-content{padding-block-start:var(--space-12)}
@media(max-width:700px){.marketing-shell:has(> .beta-banner) .marketing-content{padding-block-start:var(--space-8)}}