/* Lenspire Atelier — final visual layer. Presentation only: markup and application wiring stay untouched. */
:root {
  --atelier-paper: #f5f1ea;
  --atelier-surface: #fffdf9;
  --atelier-surface-strong: #fff;
  --atelier-ink: #27231f;
  --atelier-muted: #756e65;
  --atelier-line: #e2dbd1;
  --atelier-line-strong: #ccc2b4;
  --atelier-shadow: 0 18px 46px rgb(50 39 27 / 8%);
  --atelier-shadow-small: 0 8px 22px rgb(50 39 27 / 6%);
  --atelier-radius: 18px;
  --atelier-radius-lg: 28px;
  --atelier-accent: var(--theme-accent, #d4af37);
  --atelier-accent-deep: var(--theme-accent-strong, #a77e16);
  --atelier-accent-soft: var(--theme-accent-soft, #fbf3d8);
  --atelier-accent-rgb: var(--theme-accent-rgb, 212, 175, 55);
  --atelier-link: #5c3685;
}

/* Public sign-up lives in the studio shell while using the marketing header.
   Keep that hybrid page deliberately dark, including its legacy form controls. */
html[data-theme="dark"] .studio-app.access-app .lp-nav {
  border-color: var(--atelier-line) !important;
  background: rgb(32 29 25 / 89%) !important;
  box-shadow: 0 12px 32px rgb(0 0 0 / 20%);
}
html[data-theme="dark"] .studio-app.access-app .lp-links {
  border-color: var(--atelier-line) !important;
  background: #2a2520 !important;
}
html[data-theme="dark"] .studio-app.access-app :is(.lp-links a, .lp-actions > a:not(.lp-start)) {
  color: #e6ddd3 !important;
}
html[data-theme="dark"] .studio-app.access-app .lp-links a:hover {
  color: #fff8ef !important;
  background: #393129 !important;
}
html[data-theme="dark"] .studio-app.access-app .access-card {
  background: #211e1b !important;
  border-color: var(--atelier-line) !important;
}
html[data-theme="dark"] .studio-app.access-app .access-card::after {
  border-color: #4a4137 !important;
}
html[data-theme="dark"] .studio-app.access-app .access-card :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  border-color: #51483f !important;
  background: #2b2722 !important;
  color: #f7f2e9 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%) !important;
}
html[data-theme="dark"] .studio-app.access-app .access-card :is(input, select, textarea)::placeholder {
  color: #c0b4a6 !important;
  opacity: 1;
}
html[data-theme="dark"] .studio-app.access-app .access-card :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  border-color: var(--atelier-accent) !important;
  outline-color: rgba(var(--atelier-accent-rgb), .26) !important;
}
html[data-theme="dark"] .studio-app.access-app .access-legal-consent {
  color: #c7bdb1 !important;
}

/* Login uses a separate legacy form. Match its controls to the dark account flow. */
html[data-theme="dark"] .login-page .google-button {
  border-color: #51483f !important;
  background: #2b2722 !important;
  color: #f7f2e9 !important;
}
html[data-theme="dark"] .login-page .google-button:hover {
  border-color: var(--atelier-accent) !important;
  background: #393129 !important;
  color: #fff8ef !important;
}
html[data-theme="dark"] .login-page .login-form input {
  border-color: #51483f !important;
  background: #2b2722 !important;
  color: #f7f2e9 !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%) !important;
}
html[data-theme="dark"] .login-page .login-form input::placeholder {
  color: #c0b4a6 !important;
  opacity: 1;
}
html[data-theme="dark"] .login-page .login-form input:focus {
  border-color: var(--atelier-accent) !important;
  outline-color: rgba(var(--atelier-accent-rgb), .26) !important;
}
html[data-theme="dark"] .login-page .login-form input:-webkit-autofill,
html[data-theme="dark"] .login-page .login-form input:-webkit-autofill:hover,
html[data-theme="dark"] .login-page .login-form input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f7f2e9 !important;
  -webkit-box-shadow: 0 0 0 1000px #2b2722 inset !important;
  box-shadow: 0 0 0 1000px #2b2722 inset !important;
  caret-color: #f7f2e9;
}
html[data-theme="dark"] .login-page .login-divider {
  color: #bfb4a7 !important;
}
html[data-theme="dark"] .login-page .login-divider::before,
html[data-theme="dark"] .login-page .login-divider::after {
  background: #4b433a !important;
}

html[data-theme="light"], html:not([data-theme]) { color-scheme: light; }
body { background: var(--atelier-paper); color: var(--atelier-ink); }
body::selection { color: #1e1a15; background: rgba(var(--atelier-accent-rgb), .34); }

/* Global type, interaction, and form language */
:is(h1, h2, h3, h4) { color: var(--atelier-ink); }
:is(button, input, select, textarea) { font-family: inherit; }
:is(input, select, textarea) { border-color: var(--atelier-line); background: var(--atelier-surface-strong); color: var(--atelier-ink); box-shadow: inset 0 1px 0 rgb(255 255 255 / 72%); }
:is(input, select, textarea):hover { border-color: var(--atelier-line-strong); }
:is(input, select, textarea):focus { border-color: var(--atelier-accent); outline: 3px solid rgba(var(--atelier-accent-rgb), .18); }
:is(input, select, textarea)::placeholder { color: #70675e; }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid rgba(var(--atelier-accent-rgb), .34); outline-offset: 3px; }

/* Shared public top bar */
.lenspire-site, .pricing-site, .login-page, .public-legal { background: radial-gradient(circle at 88% -14%, rgba(var(--atelier-accent-rgb), .12), transparent 28rem), var(--atelier-paper); color: var(--atelier-ink); }
.lenspire-site .hx-nav, .lenspire-site .lp-nav, .pricing-site .lp-nav, .login-page .lp-nav, .public-legal .lp-nav {
  width: min(1380px, calc(100vw - 40px)); min-height: 70px; margin: 18px auto; padding: 8px 14px 8px 20px;
  border: 1px solid rgb(226 219 209 / 92%); border-radius: 20px; background: rgb(255 253 249 / 82%); box-shadow: var(--atelier-shadow-small); backdrop-filter: blur(18px);
}
.lenspire-site :is(.hx-links, .lp-links), :is(.pricing-site, .login-page, .public-legal) .lp-links { padding: 4px; border: 1px solid #ece5dc; border-radius: 999px; background: #f5f0e9; }
.lenspire-site :is(.hx-links a, .lp-links a), :is(.pricing-site, .login-page, .public-legal) .lp-links a, .lp-actions > a:not(.lp-start), .hx-account { border-radius: 999px; color: #60584f; font-weight: 700; }
.lenspire-site :is(.hx-links a:hover, .lp-links a:hover), :is(.pricing-site, .login-page, .public-legal) .lp-links a:hover, .lp-actions > a:not(.lp-start):hover, .hx-account:hover { color: var(--atelier-ink); background: var(--atelier-surface); }
.lenspire-site .hx-logout, .lp-actions .lp-start { border: 0; background: linear-gradient(135deg, #302920, #5a4730); box-shadow: 0 9px 18px rgb(47 37 24 / 18%); }
.lenspire-site .hx-logout:hover, .lp-actions .lp-start:hover { background: linear-gradient(135deg, #17140f, #46361f); }

/* Marketing: editorial, image-led surfaces */
.lenspire-site .hx-hero { border-color: var(--atelier-line); border-radius: 34px; background: radial-gradient(circle at 83% 12%, rgba(var(--atelier-accent-rgb), .2), transparent 26%), radial-gradient(circle at 6% 92%, #efe4d3, transparent 28%), var(--atelier-surface); box-shadow: var(--atelier-shadow); }
.lenspire-site .hx-copy h1, .lenspire-site .ls-section-title h2, .lenspire-site .ls-gallery-heading h2, .lenspire-site .ls-how h2 { letter-spacing: -.055em; }
.lenspire-site .hx-copy h1 em, .lenspire-site .hx-copy h1 span { color: var(--atelier-accent-deep); }
.lenspire-site .hx-lede, .lenspire-site .ls-sample-copy p, .lenspire-site .ls-section-title > p, .lenspire-site .ls-gallery-heading > p { color: var(--atelier-muted); }
.lenspire-site .hx-step, .lenspire-site .ls-sample-steps li { border-color: var(--atelier-line); background: #faf7f2; }
.lenspire-site :is(.hx-btn-primary, .ls-primary, .ls-dark-button) { border: 0; background: linear-gradient(135deg, var(--atelier-accent-deep), var(--atelier-accent)); color: #1d1810; box-shadow: 0 10px 20px rgba(var(--atelier-accent-rgb), .25); }
.lenspire-site :is(.hx-btn-primary, .ls-primary, .ls-dark-button):hover { filter: brightness(1.04) saturate(1.08); color: #1d1810; }
.lenspire-site .hx-btn-ghost { border-color: var(--atelier-line-strong); background: var(--atelier-surface); color: var(--atelier-ink); }
.lenspire-site :is(.ls-sample-experience, .ls-how, .ls-workflow-proof, .ls-privacy-trust, .ls-pricing-card, .ls-cta) { border-color: var(--atelier-line); background: var(--atelier-surface); box-shadow: var(--atelier-shadow-small); }
.lenspire-site :is(.ls-audience-grid article, .ls-gallery-cards article, .ls-note-grid article, .ls-capability-grid article, .ls-engagement-grid article, .ls-steps article, .ls-workflow-list article, .ls-privacy-trust li, .ls-faq-list details) { border-color: var(--atelier-line); background: #fbf8f4; box-shadow: none; }
.lenspire-site :is(.ls-audience-grid article, .ls-gallery-cards article, .ls-note-grid article, .ls-capability-grid article, .ls-engagement-grid article) { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
@media (hover: hover) { .lenspire-site :is(.ls-audience-grid article, .ls-gallery-cards article, .ls-note-grid article, .ls-capability-grid article, .ls-engagement-grid article):hover { border-color: rgba(var(--atelier-accent-rgb), .55); box-shadow: var(--atelier-shadow); transform: translateY(-4px); } }
.lenspire-site .ls-social-proof, .lenspire-site .ls-capability-experience { border-color: var(--atelier-line); background: radial-gradient(circle at 94% 5%, rgba(var(--atelier-accent-rgb), .15), transparent 24%), var(--atelier-surface); box-shadow: var(--atelier-shadow); }
.lenspire-site :is(.ls-proof-points li, .ls-studio-stories article, .ls-studio-signature, .ls-event-engagement .ls-engagement-flow) { border-color: var(--atelier-line); background: #fbf8f4; }
.lenspire-site .ls-footer { border-color: var(--atelier-line); }

/* Pricing, legal, and auth are calmer single-purpose pages. */
.pricing-site .pricing-hero { border-color: var(--atelier-line); background: radial-gradient(circle at 85% 12%, rgba(var(--atelier-accent-rgb), .16), transparent 28%), var(--atelier-surface); box-shadow: var(--atelier-shadow); }
.pricing-site .pricing-promise { border-color: #3b3025; background: linear-gradient(145deg, #2c251e, #463721); box-shadow: 0 18px 36px rgb(46 35 21 / 20%); }
.pricing-site .public-plan { border-color: var(--atelier-line); background: var(--atelier-surface); box-shadow: var(--atelier-shadow-small); }
.pricing-site .public-plan.is-featured { border-color: rgba(var(--atelier-accent-rgb), .64); background: linear-gradient(150deg, var(--atelier-accent-soft), var(--atelier-surface) 52%); box-shadow: 0 20px 42px rgba(var(--atelier-accent-rgb), .18); }
.pricing-site .public-plan a, .pricing-site .ls-primary { border: 0; background: linear-gradient(135deg, var(--atelier-accent-deep), var(--atelier-accent)); color: #1d1810; }
.public-legal .legal-shell section { border-color: var(--atelier-line); background: rgb(255 253 249 / 82%); box-shadow: var(--atelier-shadow-small); }
.login-page .login-shell { border-color: var(--atelier-line); box-shadow: var(--atelier-shadow); }
.login-page .login-intro { background: radial-gradient(circle at 25% 82%, rgba(var(--atelier-accent-rgb), .2), transparent 36%), #eee7dc; }
.login-page .login-card { background: var(--atelier-surface); }
.login-page :is(.login-submit, .login-card button[type="submit"]) { border: 0; background: linear-gradient(135deg, var(--atelier-accent-deep), var(--atelier-accent)); color: #1d1810; }

/* Studio shell: quieter navigation, less dashboard-template visual noise. */
body.studio-app { background: radial-gradient(circle at 84% -8%, rgba(var(--atelier-accent-rgb), .13), transparent 26rem), var(--atelier-paper); color: var(--atelier-ink); }
.studio-app .studio-nav { min-height: 74px; margin: 14px auto 0; border: 1px solid rgb(226 219 209 / 92%); border-radius: 18px; background: rgb(255 253 249 / 88%); box-shadow: var(--atelier-shadow-small); backdrop-filter: blur(16px); }
.studio-workspace .studio-nav { width: min(1380px, calc(100vw - 40px)); padding-inline: 20px; }
.studio-app .studio-nav-link, .studio-app .studio-nav-actions > a { color: #665e55; }
.studio-app .studio-nav-link:hover, .studio-app .studio-nav-link.is-active, .studio-app .studio-nav-actions > a:hover { color: var(--atelier-ink); background: var(--atelier-accent-soft); }
.studio-app .studio-nav-link.is-active { box-shadow: inset 0 0 0 1px rgba(var(--atelier-accent-rgb), .28); }
.studio-app .studio-nav-logout { color: #fff !important; background: #302920; }
.studio-app main { width: min(1380px, calc(100vw - 40px)); padding-block: 34px 82px; }
.studio-app footer { width: min(1380px, calc(100vw - 40px)); border-color: var(--atelier-line); color: var(--atelier-muted); }

/* Shared studio headers and cards. */
.studio-app :is(.studio-page-hero, .studio-hero, .event-hero, .event-settings-hero, .account-hero, .platform-hero, .subscription-hero, .guest-find-hero, .guest-results-hero) { border-color: var(--atelier-line); border-radius: var(--atelier-radius-lg); background: radial-gradient(circle at 92% 12%, rgba(var(--atelier-accent-rgb), .18), transparent 26%), var(--atelier-surface); box-shadow: var(--atelier-shadow); }
.studio-app :is(.studio-page-hero, .studio-hero, .event-hero, .event-settings-hero, .account-hero, .platform-hero, .subscription-hero, .guest-find-hero, .guest-results-hero) :is(p, small) { color: var(--atelier-muted); }
.studio-app .eyebrow { color: var(--atelier-accent-deep); letter-spacing: .15em; }
.studio-app :is(.studio-dashboard-card, .studio-kpis > article, .studio-event-card, .event-kpis > article, .event-action, .event-organize-card, .event-settings-card, .event-settings-tool, .account-card, .platform-create-card, .platform-studio-list, .subscription-plan, .access-card, .guest-pin-card, .guest-search-card, .guest-result-card, .event-photo) { border-color: var(--atelier-line); background: var(--atelier-surface); box-shadow: var(--atelier-shadow-small); }
.studio-app :is(.studio-dashboard-card, .event-action, .event-organize-card, .event-settings-card, .event-settings-tool, .account-card, .subscription-plan) { border-radius: var(--atelier-radius); }
.studio-app .studio-dashboard-card { position: relative; overflow: hidden; }
.studio-app .studio-dashboard-card::after { content: ""; position: absolute; inset: auto -30px -56px auto; width: 130px; height: 130px; border: 1px solid rgba(var(--atelier-accent-rgb), .24); border-radius: 50%; pointer-events: none; }
.studio-app :is(.studio-dashboard-icon, .studio-kpi-icon, .event-settings-icon, .account-card-icon, .access-icon, .guest-pin-icon, .checkout-icon) { border: 1px solid rgba(var(--atelier-accent-rgb), .25); background: var(--atelier-accent-soft); color: var(--atelier-accent-deep); }
.studio-app :is(.studio-kpis > article, .event-kpis > article) { min-height: 150px; background: linear-gradient(145deg, #fffdf9, #f7f1e8); }
.studio-app :is(.studio-kpis b, .event-kpis b) { color: var(--atelier-ink); font-size: clamp(32px, 3vw, 44px); }
.studio-app :is(.studio-credit-summary, .event-insights, .event-processing, .event-organize, .event-gallery, .subscription-usage, .subscription-history, .team-workspace, .platform-layout) { border: 1px solid var(--atelier-line); background: var(--atelier-surface); box-shadow: var(--atelier-shadow-small); }
.studio-app .studio-create { border-color: rgba(var(--atelier-accent-rgb), .34); background: linear-gradient(125deg, var(--atelier-accent-soft), var(--atelier-surface) 54%); box-shadow: var(--atelier-shadow); }

/* Form, button, list and data-table system. */
.studio-app :is(.studio-button, form button:not(.event-icon-button):not(.studio-nav-toggle), .access-button-link) { border: 0; background: linear-gradient(135deg, var(--atelier-accent-deep), var(--atelier-accent)); color: #201a10; box-shadow: 0 10px 20px rgba(var(--atelier-accent-rgb), .22); }
.studio-app :is(.studio-button, form button:not(.event-icon-button):not(.studio-nav-toggle), .access-button-link):hover { color: #201a10; filter: brightness(1.04) saturate(1.08); }
.studio-app :is(.event-upload-modes label, .event-upload-album, .event-drop, .event-watermark, .event-upload-progress, .event-inline-form, .event-preferences-form, .event-highlight-form, .event-video-form, .event-album-list li, .event-video-list li, .event-gallery-sort, .event-photo-album, .team-member, .subscription-history-row, .event-guest-leads-table) { border-color: var(--atelier-line); background: #faf7f2; }
.studio-app :is(.event-upload-modes label:has(input:checked), .event-watermark:has(input:checked), .event-highlight-form label:has(input:checked), .event-gallery-filters a[aria-current="page"]) { border-color: rgba(var(--atelier-accent-rgb), .56); background: var(--atelier-accent-soft); }
.studio-app :is(.event-gallery-filters a, .event-organize-heading a, .event-video-list a, .event-guest-url output, .guest-results-link) { color: var(--atelier-accent-deep); }
.studio-app :is(.event-photo-badges > span, .event-access-tags span, .guest-find-points span, .guest-access-points span, .access-points span, .subscription-plan-tag) { border-color: rgba(var(--atelier-accent-rgb), .32); background: var(--atelier-accent-soft); color: var(--atelier-accent-deep); }
.studio-app :is(.event-icon-button, .event-copy-link, .event-settings-link, .event-guest-link, .guest-download-all, .guest-result-actions a, .guest-result-actions button) { border-color: var(--atelier-line-strong); background: var(--atelier-surface); color: var(--atelier-ink); }
.studio-app .event-guest-link, .studio-app .guest-download-all { background: #302920; color: #fff; }
.studio-app :is(.event-icon-button:hover, .event-copy-link:hover, .event-settings-link:hover, .guest-result-actions a:hover, .guest-result-actions button:hover) { border-color: var(--atelier-accent); color: var(--atelier-accent-deep); background: var(--atelier-accent-soft); }
.studio-app :is(.progress-track, .event-upload-progress-track) { background: #e9e1d6; }
.studio-app :is(.progress-fill, .event-upload-progress-track > span) { background: linear-gradient(90deg, var(--atelier-accent-deep), var(--atelier-accent)); }
.studio-app .event-gallery-empty, .studio-app .studio-empty { border: 1px dashed var(--atelier-line-strong); background: #faf7f2; }
.studio-app :is(.success, .error, .event-credit-notice, .studio-credit-warning, .subscription-notice) { border-color: var(--atelier-line); box-shadow: none; }

/* Event control room receives a visual treatment of its own. */
body.studio-app.event-showcase { background: radial-gradient(circle at 88% -8%, rgba(var(--atelier-accent-rgb), .16), transparent 27rem), var(--atelier-paper); }
.event-showcase .event-showcase-nav { width: min(1380px, calc(100vw - 40px)); margin: 14px auto 0; border-color: var(--atelier-line); border-radius: 18px; background: rgb(255 253 249 / 88%); box-shadow: var(--atelier-shadow-small); }
.event-showcase .event-hero-actions { border-color: var(--atelier-line); background: rgb(255 253 249 / 82%); box-shadow: none; }
.event-showcase :is(.event-upload-action, .event-ai-action, .event-qr-action) { background-image: none; background-color: var(--atelier-surface); }
.event-showcase :is(.event-upload-action::before, .event-upload-action::after, .event-ai-action::before, .event-ai-action::after, .event-qr-action::before, .event-qr-action::after) { opacity: .28; }
.event-showcase .event-qr-card { border-color: var(--atelier-line); background: #faf7f2; box-shadow: var(--atelier-shadow-small); }

/* Compact layout scale: one deliberate rhythm across public, studio, event, and guest pages. */
:root { --atelier-page-width: 1200px; --atelier-section-space: clamp(18px, 1.8vw, 24px); --atelier-panel-space: clamp(20px, 2vw, 28px); }
.lenspire-site :is(.hx-nav, .hx-hero), .pricing-site .lp-nav, .login-page .lp-nav, .public-legal .lp-nav { width: min(1120px, calc(100vw - 40px)); }
.lenspire-site > main { width: min(var(--atelier-page-width), calc(100vw - 40px)); margin-inline: auto; padding-block: 10px 48px; }
.lenspire-site > main > :is(section, div) { width: calc(100% - 80px); margin: var(--atelier-section-space) auto !important; }
.lenspire-site :is(.ls-sample-experience, .ls-social-proof, .ls-capability-experience, .ls-gallery-showcase, .ls-how, .ls-workflow-proof, .ls-privacy-trust, .ls-pricing-card, .ls-studio-notes, .ls-faq, .ls-cta) { max-width: none; }
.lenspire-site :is(.ls-sample-experience, .ls-social-proof, .ls-capability-experience, .ls-how, .ls-workflow-proof, .ls-privacy-trust, .ls-pricing-card, .ls-cta) { gap: clamp(20px, 2.5vw, 32px); padding: var(--atelier-panel-space); }
.lenspire-site :is(.ls-audience-grid, .ls-gallery-cards, .ls-note-grid, .ls-capability-grid, .ls-engagement-grid, .ls-steps, .ls-workflow-list) { gap: 16px; }
.lenspire-site .ls-privacy-trust > ul { gap: 10px; }
.lenspire-site .ls-privacy-trust li { min-height: 0; padding: 16px 18px; }
.lenspire-site .ls-faq-list details { margin-bottom: 8px; }
.lenspire-site .ls-pricing { padding: 0 !important; }
.lenspire-site .ls-pricing-card { width: 100% !important; }

.pricing-main { width: min(var(--atelier-page-width), calc(100vw - 40px)); margin-inline: auto; padding-block: 22px 52px; }
.pricing-site :is(.pricing-hero, .public-plan-section, .pricing-note) { margin-block: var(--atelier-section-space) !important; }
.pricing-site .pricing-hero { gap: clamp(22px, 3vw, 36px); padding: var(--atelier-panel-space); }
.pricing-site :is(.public-plan-grid, .subscription-plan-grid) { gap: 16px; }

.public-legal .legal-shell { width: min(960px, calc(100vw - 40px)); margin: 34px auto 52px; }
.public-legal .legal-shell section { margin-bottom: 16px; padding: 24px; }
.login-page .login-stage { padding-block: 26px 46px; }

.studio-workspace .studio-nav, .studio-app main, .studio-app footer, .event-showcase .event-showcase-nav { width: min(var(--atelier-page-width), calc(100vw - 40px)); }
.studio-app main { padding-block: 26px 58px; }
.studio-app main > :is(section, div) { margin-block: 20px !important; }
.studio-app :is(.studio-dashboard-grid, .studio-event-grid, .studio-kpis, .event-kpis, .event-actions-grid, .event-organize-grid, .event-settings-grid, .account-grid, .platform-layout, .subscription-plan-grid, .guest-results-grid) { gap: 16px; }
.studio-app :is(.studio-page-hero, .studio-hero, .event-hero, .event-settings-hero, .account-hero, .platform-hero, .subscription-hero, .guest-find-hero, .guest-results-hero) { padding: var(--atelier-panel-space); }
.studio-app :is(.studio-dashboard-card, .studio-event-card, .event-action, .event-organize-card, .event-settings-card, .event-settings-tool, .account-card, .platform-create-card, .platform-studio-list, .subscription-plan, .access-card, .guest-pin-card, .guest-search-card, .guest-result-card, .event-photo) { min-height: 0; }
.studio-app :is(.studio-kpis > article, .event-kpis > article) { min-height: 124px; }

body:not(.studio-app):not(.lenspire-site):not(.pricing-site):not(.public-legal):not(.login-page) .demo-shell { width: min(1100px, calc(100vw - 40px)); padding-block: 42px 56px; }
body:not(.studio-app):not(.lenspire-site):not(.pricing-site):not(.public-legal):not(.login-page) .demo-stage { margin-top: 32px; }
body:not(.studio-app):not(.lenspire-site):not(.pricing-site):not(.public-legal):not(.login-page) .demo-panel { gap: 36px; min-height: 440px; padding: 42px; }
body:not(.studio-app):not(.lenspire-site):not(.pricing-site):not(.public-legal):not(.login-page) .demo-closing { margin-top: 32px; padding: 32px 38px; }

/* Compact screens retain the same hierarchy rather than merely shrinking desktop. */
@media (max-width: 780px) {
  .lenspire-site .hx-nav, .lenspire-site .lp-nav, .pricing-site .lp-nav, .login-page .lp-nav, .public-legal .lp-nav, .studio-workspace .studio-nav, .studio-app main, .studio-app footer, .event-showcase .event-showcase-nav, .lenspire-site > main, .pricing-main { width: calc(100vw - 24px); }
  .lenspire-site > main { padding-block: 4px 34px; }
  .lenspire-site > main > :is(section, div) { width: 100%; margin-block: 18px !important; }
  .studio-app .studio-nav { margin-top: 10px; border-radius: 15px; }
  .studio-app main { padding-block: 20px 42px; }
  .studio-app main > :is(section, div) { margin-block: 16px !important; }
  .studio-app :is(.studio-page-hero, .studio-hero, .event-hero, .event-settings-hero, .account-hero, .platform-hero, .subscription-hero, .guest-find-hero, .guest-results-hero) { border-radius: 22px; }
  .studio-app :is(.studio-dashboard-grid, .studio-event-grid, .studio-kpis, .event-kpis, .event-actions-grid, .event-organize-grid, .event-settings-grid, .account-grid, .platform-layout, .subscription-plan-grid, .guest-results-grid) { gap: 12px; }
  .lenspire-site .hx-hero { border-radius: 25px; }
}

/* Studio navigation: give active work priority and keep administrative tools deliberate. */
.studio-workspace .studio-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  height: auto;
  min-height: 78px;
  padding: 10px 14px 10px 20px;
}
.studio-workspace .studio-nav .brand { padding-right: 16px; border-right: 1px solid var(--atelier-line); }
.studio-workspace .studio-nav .brand img { width: 148px; height: auto; }
.studio-workspace .studio-nav-meta { min-width: 0; justify-content: flex-start; gap: 5px; margin: 0; }
.studio-workspace .studio-nav-meta > .studio-nav-link,
.studio-workspace .studio-nav-overflow > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #665e55;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.studio-workspace .studio-nav-meta > .studio-nav-link > span,
.studio-workspace .studio-nav-overflow > summary > span { color: var(--atelier-accent-deep); font-size: 14px; }
.studio-workspace .studio-nav-meta > .studio-nav-link:hover,
.studio-workspace .studio-nav-meta > .studio-nav-link.is-active,
.studio-workspace .studio-nav-overflow:hover > summary,
.studio-workspace .studio-nav-overflow[open] > summary,
.studio-workspace .studio-nav-overflow.is-current > summary { border-color: rgba(var(--atelier-accent-rgb), .26); color: var(--atelier-ink); background: var(--atelier-accent-soft); }
.studio-workspace .studio-nav-meta > .studio-nav-link.is-active { box-shadow: none; }
.studio-workspace .studio-nav-overflow { position: relative; }
.studio-workspace .studio-nav-overflow > summary { list-style: none; }
.studio-workspace .studio-nav-overflow > summary::-webkit-details-marker { display: none; }
.studio-workspace .studio-nav-overflow > summary i { color: var(--atelier-muted); font-size: 14px; font-style: normal; transition: transform .18s ease; }
.studio-workspace .studio-nav-overflow[open] > summary i { transform: rotate(180deg); }
.studio-workspace .studio-nav-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  left: 0;
  display: grid;
  min-width: 198px;
  padding: 7px;
  border: 1px solid var(--atelier-line);
  border-radius: 15px;
  background: var(--atelier-surface-strong);
  box-shadow: 0 18px 38px rgb(45 33 20 / 14%);
}
.studio-workspace .studio-nav-platform .studio-nav-menu { right: 0; left: auto; min-width: 220px; }
.studio-workspace .studio-nav-menu a { display: flex; align-items: center; gap: 9px; min-height: 39px; padding: 0 10px; border-radius: 9px; color: #625a51; font-size: 12px; font-weight: 750; text-decoration: none; }
.studio-workspace .studio-nav-menu a > span { width: 15px; color: var(--atelier-accent-deep); text-align: center; font-size: 14px; }
.studio-workspace .studio-nav-menu a:hover,
.studio-workspace .studio-nav-menu a.is-active { color: var(--atelier-ink); background: var(--atelier-accent-soft); }
.studio-workspace .studio-nav-secondary { display: none !important; }
.studio-workspace .studio-nav-actions { justify-content: flex-end; gap: 8px; }
.studio-workspace .studio-nav-welcome { max-width: 190px; padding: 8px 10px; border: 1px solid var(--atelier-line); border-radius: 999px; color: #554d45; background: #f8f4ee; font-size: 11px; font-weight: 750; }
.studio-workspace .studio-nav-actions > a { min-height: 38px; padding: 0 12px; border: 1px solid transparent; border-radius: 11px; color: #5b5046; font-size: 11px; font-weight: 800; }
.studio-workspace .studio-nav-actions > a:hover { border-color: var(--atelier-line); background: var(--atelier-surface); }
.studio-workspace .studio-nav-actions .studio-nav-logout { border: 0; border-radius: 11px; padding-inline: 13px; color: #fff !important; background: linear-gradient(135deg, #302920, #51402b); }
.studio-workspace .studio-nav-actions .studio-nav-logout:hover { color: #fff !important; background: linear-gradient(135deg, #211b14, #43341f); }
.studio-workspace .theme-settings-trigger--header { flex: 0 0 auto; }

@media (max-width: 1120px) and (min-width: 1001px) {
  .studio-workspace .studio-nav { gap: 10px; padding-inline: 14px; }
  .studio-workspace .studio-nav .brand { padding-right: 10px; }
  .studio-workspace .studio-nav .brand img { width: 132px; }
  .studio-workspace .studio-nav-welcome { max-width: 124px; }
  .studio-workspace .studio-nav-actions > a:not(.studio-nav-logout) { display: none; }
}

@media (max-width: 1000px) {
  .studio-workspace .studio-nav { display: flex; min-height: var(--header-h-sm); padding: 0 var(--gutter); }
  .studio-workspace .studio-nav .brand { padding-right: 0; border-right: 0; }
  .studio-workspace .studio-nav .brand img { width: 132px; }
  .studio-workspace .studio-nav-toggle { order: 3; margin: 0 0 0 auto; }
  .studio-workspace .studio-nav-meta { display: grid; }
  .studio-workspace .studio-nav-overflow { display: none; }
  .studio-workspace .studio-nav-secondary { display: inline-flex !important; }
  .studio-workspace .studio-nav-meta > .studio-nav-link { min-height: 0; padding: var(--space-4) var(--space-3); border: 0; border-radius: var(--space-2); }
  .studio-workspace .studio-nav-meta > .studio-nav-link:hover,
  .studio-workspace .studio-nav-meta > .studio-nav-link.is-active { border: 0; box-shadow: none; }
}

@media (max-width: 600px) {
  .studio-workspace .studio-nav .brand img { width: 119px; }
  .studio-workspace .studio-nav-meta > .studio-nav-link { display: inline-flex !important; }
}

/* Darkroom translation of the Atelier system. */
html[data-theme="dark"] {
  --atelier-paper: #161411;
  --atelier-surface: #201d19;
  --atelier-surface-strong: #28231f;
  --atelier-ink: #f5efe7;
  --atelier-muted: #beb4a8;
  --atelier-line: #3d3730;
  --atelier-line-strong: #554c42;
  --atelier-shadow: 0 20px 48px rgb(0 0 0 / 24%);
  --atelier-shadow-small: 0 9px 22px rgb(0 0 0 / 18%);
  --atelier-muted: #d0c5b8;
  --atelier-link: color-mix(in srgb, var(--atelier-accent) 62%, #fff 38%);
}
html[data-theme="dark"] :is(body, .lenspire-site, .pricing-site, .login-page, .public-legal, body.studio-app) { background-color: var(--atelier-paper); color: var(--atelier-ink); }
html[data-theme="dark"] :is(.lenspire-site .hx-nav, .lenspire-site .lp-nav, .pricing-site .lp-nav, .login-page .lp-nav, .public-legal .lp-nav, .studio-app .studio-nav, .event-showcase .event-showcase-nav) { background: rgb(32 29 25 / 89%); border-color: var(--atelier-line); }
html[data-theme="dark"] :is(.lenspire-site .hx-links, .lenspire-site .lp-links, .pricing-site .lp-links, .login-page .lp-links, .public-legal .lp-links) { border-color: var(--atelier-line); background: #2a2520; }
html[data-theme="dark"] :is(.lenspire-site .hx-links a, .lenspire-site .lp-links a, .pricing-site .lp-links a, .login-page .lp-links a, .public-legal .lp-links a, .lp-actions > a:not(.lp-start), .hx-account, .studio-app .studio-nav-link, .studio-app .studio-nav-actions > a) { color: #d9d0c5; }
html[data-theme="dark"] :is(.lenspire-site .hx-hero, .lenspire-site .ls-sample-experience, .lenspire-site .ls-how, .lenspire-site .ls-workflow-proof, .lenspire-site .ls-privacy-trust, .lenspire-site .ls-pricing-card, .lenspire-site .ls-cta, .pricing-site .pricing-hero, .pricing-site .public-plan, .public-legal .legal-shell section, .login-page .login-card, .studio-app .studio-create) { background: radial-gradient(circle at 88% 10%, rgba(var(--atelier-accent-rgb), .12), transparent 27%), var(--atelier-surface); border-color: var(--atelier-line); }
html[data-theme="dark"] .lenspire-site :is(.hx-step, .ls-sample-steps li, .ls-audience-grid article, .ls-gallery-cards article, .ls-note-grid article, .ls-capability-grid article, .ls-engagement-grid article, .ls-steps article, .ls-workflow-list article, .ls-privacy-trust li, .ls-faq-list details, .ls-proof-points li, .ls-studio-stories article, .ls-studio-signature, .ls-event-engagement .ls-engagement-flow) { background: #29241f; border-color: var(--atelier-line); }
html[data-theme="dark"] .login-page .login-intro { background: radial-gradient(circle at 24% 84%, rgba(var(--atelier-accent-rgb), .13), transparent 35%), #27221d; }
html[data-theme="dark"] .studio-app :is(.studio-kpis > article, .event-kpis > article) { background: linear-gradient(145deg, #29241f, #211e1a); }
html[data-theme="dark"] .studio-app :is(.event-upload-modes label, .event-upload-album, .event-drop, .event-watermark, .event-upload-progress, .event-inline-form, .event-preferences-form, .event-highlight-form, .event-video-form, .event-album-list li, .event-video-list li, .event-gallery-sort, .event-photo-album, .team-member, .subscription-history-row, .event-guest-leads-table, .event-gallery-empty, .studio-empty) { background: #29241f; border-color: var(--atelier-line); }
html[data-theme="dark"] :is(input, select, textarea) { background: #29241f; border-color: var(--atelier-line-strong); color: var(--atelier-ink); box-shadow: none; }
html[data-theme="dark"] :is(option) { background: #29241f; color: var(--atelier-ink); }
html[data-theme="dark"] :is(h1, h2, h3, h4, b, strong, label) { color: var(--atelier-ink); }
html[data-theme="dark"] :is(p, small, li, .studio-app .studio-nav-welcome) { color: var(--atelier-muted); }
html[data-theme="dark"] .studio-app .studio-nav-logout { background: var(--atelier-accent); color: #1e1911 !important; }
html[data-theme="dark"] .studio-workspace .studio-nav .brand { border-color: var(--atelier-line); }
html[data-theme="dark"] .studio-workspace .studio-nav-overflow > summary,
html[data-theme="dark"] .studio-workspace .studio-nav-meta > .studio-nav-link { color: #ddd3c7; }
html[data-theme="dark"] .studio-workspace .studio-nav-menu { border-color: var(--atelier-line); background: #29241f; box-shadow: 0 18px 38px rgb(0 0 0 / 28%); }
html[data-theme="dark"] .studio-workspace .studio-nav-menu a { color: #d6ccc0; }
html[data-theme="dark"] .studio-workspace .studio-nav-welcome { border-color: var(--atelier-line); color: #ded3c7; background: #29241f; }

/* Keep the Events workspace cohesive after the dark palette is selected. */
html[data-theme="dark"] .studio-workspace .studio-nav { background: linear-gradient(110deg, rgb(30 27 23 / 96%), rgb(38 32 27 / 93%)); border-color: #443b33; box-shadow: 0 14px 34px rgb(0 0 0 / 25%); }
html[data-theme="dark"] .studio-workspace .studio-nav-meta > .studio-nav-link.is-active,
html[data-theme="dark"] .studio-workspace .studio-nav-overflow.is-current > summary,
html[data-theme="dark"] .studio-workspace .studio-nav-overflow[open] > summary { border-color: rgba(var(--atelier-accent-rgb), .52); color: #fff8f0; background: rgba(var(--atelier-accent-rgb), .2); box-shadow: inset 0 1px 0 rgb(255 255 255 / 8%); }
html[data-theme="dark"] .studio-workspace .studio-nav-meta > .studio-nav-link.is-active > span { color: var(--atelier-accent); }
html[data-theme="dark"] .studio-workspace .studio-nav-actions > a:hover { border-color: rgba(var(--atelier-accent-rgb), .38); background: rgba(var(--atelier-accent-rgb), .12); }
html[data-theme="dark"] .studio-app .studio-create { background: radial-gradient(circle at 88% 12%, rgba(var(--atelier-accent-rgb), .14), transparent 28%), #211e1a; }
html[data-theme="dark"] .studio-app .studio-create-copy { background: radial-gradient(circle at 10% 88%, rgba(var(--atelier-accent-rgb), .16), transparent 38%), #29241f; }
html[data-theme="dark"] .studio-app .studio-create-copy :is(h2, p) { color: var(--atelier-ink); }
html[data-theme="dark"] .studio-app .studio-create-copy p:last-child { color: var(--atelier-muted); }
html[data-theme="dark"] .studio-app .studio-create-form { background: #211e1a; }
html[data-theme="dark"] .studio-app .studio-create-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] .studio-app select,
html[data-theme="dark"] .studio-app textarea { border-color: #4a4239 !important; background: #2b2722 !important; box-shadow: none !important; color: #f7f0e8 !important; }
html[data-theme="dark"] .studio-app .studio-create-form input::placeholder { color: #b7aa9b; }
html[data-theme="dark"] .studio-app .studio-create-form .studio-toggle { border-color: #463e36; background: #29241f; }
html[data-theme="dark"] .studio-app .studio-create-form .studio-toggle :is(b, small) { color: var(--atelier-muted); }
html[data-theme="dark"] .studio-app .studio-create-form .studio-cover-upload { border-color: rgba(var(--atelier-accent-rgb), .46); background: rgb(42 37 32 / 90%); }
html[data-theme="dark"] .studio-app .studio-create-form .studio-cover-upload input[type="file"] { color: #e9ded2; background: transparent; }
html[data-theme="dark"] .studio-app .studio-event-search { border-color: #4a4239; background: #29241f; color: var(--atelier-accent); }
html[data-theme="dark"] .studio-app .studio-event-search input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) { border: 0 !important; background: transparent !important; box-shadow: none !important; color: #f5ece2 !important; }
html[data-theme="dark"] .studio-app .studio-event-search input::placeholder { color: #b9ad9e; }
html[data-theme="dark"] .studio-app .studio-event-meta span { background: #332d27; color: #e3d7ca; }
html[data-theme="dark"] .studio-app .studio-credit-usage { border-color: #40382f; }
html[data-theme="dark"] .studio-app .studio-credit-usage li { border-color: #463e36; background: #29241f; }
html[data-theme="dark"] .studio-app .studio-credit-usage li span { color: #f1e7dc; }
html[data-theme="dark"] .studio-app .studio-credit-usage li b { color: var(--atelier-accent); }
html[data-theme="dark"] .studio-app .event-settings-form input[type="text"],
html[data-theme="dark"] .studio-app .event-settings-form input[type="password"] { border-color: #4a4239 !important; background: #2b2722 !important; box-shadow: none !important; color: #f7f0e8 !important; }
html[data-theme="dark"] .studio-app .event-settings-form input::placeholder { color: #b7aa9b; }
html[data-theme="dark"] .studio-app .event-settings-toggle { border-color: #463e36 !important; background: #29241f !important; }
html[data-theme="dark"] .studio-app .event-settings-toggle :is(b, small),
html[data-theme="dark"] .studio-app .event-settings-check { color: var(--atelier-muted); }
html[data-theme="dark"] .studio-app .event-settings-hero aside { border-color: #4a4239; background: linear-gradient(145deg, #302a25, #25211d) !important; box-shadow: none; }
html[data-theme="dark"] .studio-app .event-settings-hero aside :is(span, b, small) { color: #f1e7dc; }
html[data-theme="dark"] .studio-app .event-settings-tool--ai,
html[data-theme="dark"] .studio-app .event-settings-tool--share,
html[data-theme="dark"] .studio-app .event-settings-card--access { background: #211e1a !important; }
html[data-theme="dark"] .studio-app .event-settings-qr-link { border-color: #4a4239; background: #29241f; color: #f3e8dc; }

/* Wallet's mode indicator belongs to the dark hero, not a light alert card. */
html[data-theme="dark"] .studio-app .subscription-mode,
html[data-theme="dark"] .studio-app .subscription-mode.is-test {
  border-color: #4b433a;
  background: linear-gradient(145deg, #302b25, #25211d) !important;
  box-shadow: none;
}
html[data-theme="dark"] .studio-app .subscription-mode b { color: #f1e7dc; }
html[data-theme="dark"] .studio-app .subscription-mode small { color: #c9bdb0; }

/* Account management must keep its identity card and forms readable in dark mode. */
html[data-theme="dark"] .studio-app .account-hero aside {
  border-color: #4b433a;
  background: linear-gradient(145deg, #302b25, #25211d) !important;
  box-shadow: none;
}
html[data-theme="dark"] .studio-app .account-hero aside span { color: #c9bdb0; }
html[data-theme="dark"] .studio-app .account-hero aside b { color: #f1e7dc; }
html[data-theme="dark"] .studio-app .account-hero aside small { color: #d5a4ed; }
html[data-theme="dark"] .studio-app :is(.account-card input, .team-add-form input) {
  border-color: #4a4239 !important;
  background: #2b2722 !important;
  color: #f7f0e8 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .studio-app .team-add-form,
html[data-theme="dark"] .studio-app .account-google-note {
  border-color: #4a4239;
  background: #29241f;
}
html[data-theme="dark"] .studio-app .team-heading > span {
  background: rgba(var(--atelier-accent-rgb), .16);
  color: #f0cf91;
}
html[data-theme="dark"] .studio-app .account-google-note > span { background: #2b2722; }
html[data-theme="dark"] .studio-app .team-member form button {
  border-color: #754a42;
  background: #332822;
  color: #f2b7ad;
}

/* Events hero dashboard: retain the visual preview without light-mode cards. */
html[data-theme="dark"] .studio-app .studio-events-hero__eyebrow {
  border-color: #55464c;
  background: #302b31;
  color: #d7a8ec;
}
html[data-theme="dark"] .studio-app .studio-events-hero__dashboard-card {
  border-color: #4b433a;
  background: rgb(43 39 34 / 96%);
  box-shadow: 0 24px 55px rgb(0 0 0 / 28%);
}
html[data-theme="dark"] .studio-app .studio-events-hero__card-top strong,
html[data-theme="dark"] .studio-app .studio-events-hero__stat strong,
html[data-theme="dark"] .studio-app .studio-events-hero__floating-card strong { color: #f4ece3; }
html[data-theme="dark"] .studio-app :is(.studio-events-hero__mini-label, .studio-events-hero__stat div > span, .studio-events-hero__progress > div, .studio-events-hero__floating-card small) { color: #c9bdb0; }
html[data-theme="dark"] .studio-app .studio-events-hero__status,
html[data-theme="dark"] .studio-app .studio-events-hero__chips span {
  background: rgba(var(--atelier-accent-rgb), .16);
  color: #e5c7ee;
}
html[data-theme="dark"] .studio-app .studio-events-hero__stat {
  border-color: #4a4239;
  background: #302b25;
}
html[data-theme="dark"] .studio-app :is(.studio-events-hero__stat-icon, .studio-events-hero__float-icon) {
  background: rgba(var(--atelier-accent-rgb), .18);
  color: #e5c7ee;
}
html[data-theme="dark"] .studio-app .studio-events-hero__progress-track { background: #4a4239; }
html[data-theme="dark"] .studio-app .studio-events-hero__floating-card {
  border-color: #4b433a;
  background: rgb(43 39 34 / 97%);
  box-shadow: 0 14px 30px rgb(0 0 0 / 28%);
}

/* Event covers: a couple portrait can be selected once and carried through sharing. */
.studio-app .studio-create-form .studio-cover-upload { grid-column: 1 / -1; padding: 12px; border: 1px dashed rgba(var(--atelier-accent-rgb), .48); border-radius: 12px; background: rgb(255 253 249 / 68%); }
.studio-app .studio-create-form .studio-cover-upload input[type="file"] { height: auto; min-height: 36px; padding: 7px 0 0; border: 0; background: transparent; font-size: 11px; }
.studio-app .studio-event-cover.has-photo { background: #28211c; }
.studio-app .studio-event-cover.has-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.studio-app .studio-event-cover.has-photo::after { z-index: 1; width: 100%; height: 100%; inset: 0; border: 0; border-radius: 0; background: linear-gradient(180deg, transparent 36%, rgb(20 15 11 / 60%)); }
.studio-app .studio-event-cover.has-photo .studio-event-state { z-index: 2; }
.event-cover-settings { grid-template-columns: minmax(0, 1fr) !important; }
.event-cover-settings__card { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(210px, .7fr) minmax(280px, 1fr); align-items: center; gap: 22px; min-height: 0 !important; }
.event-cover-settings__preview { min-height: 180px; overflow: hidden; border: 1px solid var(--atelier-line); border-radius: 14px; background: var(--atelier-accent-soft); }
.event-cover-settings__preview img { width: 100%; height: 180px; object-fit: cover; }
.event-cover-settings__preview > span { display: grid; height: 180px; place-items: center; padding: 20px; color: var(--atelier-muted); font-size: 12px; text-align: center; }
.event-cover-settings__card form { display: grid; gap: 10px; margin: 0; }
.event-cover-settings__card form label { display: grid; gap: 6px; color: var(--atelier-ink); font-size: 11px; font-weight: 750; }
.event-cover-settings__card form :is(select, input[type="file"]) { width: 100%; min-height: 40px; box-sizing: border-box; border-color: var(--atelier-line); background: var(--atelier-surface-strong); }
.event-cover-settings__card form input[type="file"] { padding: 8px; font-size: 11px; }
.event-cover-settings__card form > small { color: var(--atelier-muted); font-size: 10px; line-height: 1.45; }
.event-cover-settings__card form button { margin-top: 2px; }
html[data-theme="dark"] .event-cover-settings__preview { border-color: var(--atelier-line); background: #29241f; }
@media (max-width: 900px) { .event-cover-settings__card { grid-template-columns: 1fr; }.event-cover-settings__preview { max-width: 480px; }.event-cover-settings__card form { max-width: 560px; } }

/* High-intent platform deletion control. It stays visually separate from safe cleanup. */
.platform-studio-list .platform-studios article { position: relative; }
.platform-delete-select { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: 7px; margin-top: -3px; color: #9a3f35; font-size: 11px; font-weight: 750; cursor: pointer; }
.platform-delete-select input { width: 15px; height: 15px; accent-color: #b5483d; }
.platform-cleanup-button { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; margin-top: 13px; padding: 0 14px; border: 1px solid #d4a198; border-radius: 10px; color: #8d342b; background: #fff8f6; font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.platform-cleanup-button:hover { border-color: #b96c60; background: #fff0ec; }
.platform-permanent-delete { display: grid; grid-template-columns: minmax(0, .9fr) minmax(260px, 1.1fr); align-items: end; gap: 14px 18px; margin-top: 18px; padding: 18px; border: 1px solid #e5b8b1; border-radius: 15px; background: #fff4f1; }
.platform-permanent-delete b { display: block; color: #8d342b; font-size: 13px; }
.platform-permanent-delete p { margin: 5px 0 0; color: #865b55; font-size: 11px; line-height: 1.45; }
.platform-permanent-delete label { display: grid; gap: 6px; color: #6e3730; font-size: 11px; font-weight: 750; }
.platform-permanent-delete code { padding: 1px 4px; border-radius: 4px; color: #792b24; background: #ffe5e0; font-size: .94em; }
.platform-permanent-delete input { min-height: 38px; border-color: #d9a69f; }
.platform-permanent-delete__button { grid-column: 1 / -1; display: inline-flex; min-height: 42px; align-items: center; justify-content: center; justify-self: end; min-width: 232px; padding: 0 17px; border: 0; border-radius: 10px; color: #fff; background: #9d3b31; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.platform-permanent-delete__button:hover { background: #7d2d25; }
html[data-theme="dark"] .platform-permanent-delete { border-color: #77413c; background: #30201e; }
html[data-theme="dark"] .platform-permanent-delete :is(b, label) { color: #ffc2b9; }
html[data-theme="dark"] .platform-permanent-delete p { color: #e1aaa1; }
html[data-theme="dark"] .platform-permanent-delete code { color: #ffd4ce; background: #4a2925; }
@media (max-width: 760px) { .platform-permanent-delete { grid-template-columns: 1fr; align-items: stretch; }.platform-permanent-delete__button { justify-self: stretch; width: 100%; } }

/* Ambient canvas: a shared editorial backdrop rather than a flat page fill. */
html[data-theme="light"], html:not([data-theme]) {
  --atelier-canvas: #f5f0e8;
  --atelier-canvas-deep: #e9ddcd;
  --atelier-canvas-ink: 86, 66, 42;
}
body {
  background:
    radial-gradient(ellipse 52rem 30rem at -10% 8%, rgba(var(--atelier-accent-rgb), .14), transparent 68%),
    radial-gradient(ellipse 42rem 28rem at 108% 94%, rgb(149 106 58 / 12%), transparent 70%),
    linear-gradient(135deg, var(--atelier-canvas, #f5f0e8), var(--atelier-paper) 48%, var(--atelier-canvas-deep, #e9ddcd));
  background-attachment: fixed;
}
.lenspire-site, .pricing-site, .login-page, .public-legal {
  isolation: isolate;
  background:
    radial-gradient(ellipse 48rem 34rem at -14% 18%, rgba(var(--atelier-accent-rgb), .17), transparent 68%),
    radial-gradient(ellipse 42rem 32rem at 109% 72%, rgb(135 93 47 / 11%), transparent 70%),
    repeating-linear-gradient(90deg, rgb(var(--atelier-canvas-ink, 86, 66, 42) / .04) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgb(var(--atelier-canvas-ink, 86, 66, 42) / .032) 0 1px, transparent 1px 56px),
    linear-gradient(130deg, var(--atelier-canvas, #f5f0e8), var(--atelier-paper) 46%, var(--atelier-canvas-deep, #e9ddcd));
  background-attachment: fixed;
}
.lenspire-site > main, .pricing-main, .public-legal .legal-shell, .login-page .login-stage { position: relative; }
.lenspire-site > main::before, .pricing-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% -8vw auto;
  height: 28rem;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(var(--atelier-accent-rgb), .075), transparent 68%);
  filter: blur(4px);
}
body.studio-app, body.studio-app.event-showcase {
  background:
    radial-gradient(ellipse 50rem 31rem at 104% -12%, rgba(var(--atelier-accent-rgb), .15), transparent 68%),
    radial-gradient(ellipse 42rem 30rem at -10% 82%, rgb(138 94 48 / 10%), transparent 68%),
    repeating-linear-gradient(90deg, rgb(var(--atelier-canvas-ink, 86, 66, 42) / .025) 0 1px, transparent 1px 60px),
    linear-gradient(145deg, var(--atelier-canvas, #f5f0e8), var(--atelier-paper) 52%, var(--atelier-canvas-deep, #e9ddcd));
  background-attachment: fixed;
}
.studio-app main { position: relative; }
.studio-app main::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7rem -8vw auto auto;
  width: min(42vw, 38rem);
  height: 30rem;
  border: 1px solid rgba(var(--atelier-accent-rgb), .12);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgb(var(--atelier-accent-rgb) / .025), 0 0 0 108px rgb(var(--atelier-accent-rgb) / .017);
  transform: rotate(-18deg);
  pointer-events: none;
}

html[data-theme="dark"] {
  --atelier-canvas: #100f0e;
  --atelier-canvas-deep: #1b1714;
  --atelier-canvas-ink: 238, 219, 190;
}
html[data-theme="dark"] body,
html[data-theme="dark"] :is(.lenspire-site, .pricing-site, .login-page, .public-legal, body.studio-app, body.studio-app.event-showcase) {
  background:
    radial-gradient(ellipse 52rem 32rem at -12% 8%, rgba(var(--atelier-accent-rgb), .24), transparent 67%),
    radial-gradient(ellipse 38rem 28rem at 108% 88%, rgb(186 105 55 / 15%), transparent 68%),
    linear-gradient(118deg, transparent 26%, rgb(var(--atelier-accent-rgb) / .045) 48%, transparent 70%),
    repeating-linear-gradient(90deg, rgb(var(--atelier-canvas-ink) / .048) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(0deg, rgb(var(--atelier-canvas-ink) / .034) 0 1px, transparent 1px 58px),
    linear-gradient(135deg, #100f0e, var(--atelier-paper) 48%, var(--atelier-canvas-deep));
  background-attachment: fixed;
}
html[data-theme="dark"] .lenspire-site > main::before,
html[data-theme="dark"] .pricing-main::before { background: radial-gradient(ellipse at center, rgba(var(--atelier-accent-rgb), .11), transparent 68%); }
html[data-theme="dark"] .studio-app main::before {
  border-color: rgba(var(--atelier-accent-rgb), .2);
  box-shadow: 0 0 0 54px rgb(var(--atelier-accent-rgb) / .035), 0 0 0 108px rgb(var(--atelier-accent-rgb) / .02);
}

@media (max-width: 780px) {
  .lenspire-site, .pricing-site, .login-page, .public-legal, body.studio-app, body.studio-app.event-showcase { background-attachment: scroll; }
  .studio-app main::before { width: 17rem; height: 17rem; inset: 4rem -7rem auto auto; }
}

/* Contrast guardrails: legacy component colours must never override the active theme. */
body :is(p, li, small, td, output, .help-text, .form-hint, .empty-state-copy) { color: var(--atelier-muted); }
body :is(h1, h2, h3, h4, h5, h6, b, strong, summary, th, legend, label) { color: var(--atelier-ink); }
body a:not(.hx-logout):not(.lp-start):not(.studio-nav-logout):not(.studio-button):not(.hx-btn-primary):not(.ls-primary):not(.ls-dark-button):not(.login-submit):not(.access-button-link) { color: var(--atelier-link); }
body :is(input, select, textarea) { color: var(--atelier-ink); }

html[data-theme="light"] {
  --atelier-muted: #625b53;
  --atelier-link: color-mix(in srgb, var(--atelier-accent-deep) 84%, #30241b 16%);
}
html[data-theme="dark"] :is(.lenspire-site, .pricing-site, .login-page, .public-legal, .studio-app) :is(summary, .ls-faq-list details, .ls-footer, .event-gallery-empty, .studio-empty) { color: var(--atelier-ink); }
html[data-theme="dark"] :is(.lenspire-site, .pricing-site, .login-page, .public-legal, .studio-app) :is(p, li, small, td, output, .help-text, .form-hint, .empty-state-copy) { color: var(--atelier-muted); }
html[data-theme="dark"] :is(input, select, textarea)::placeholder { color: #c9bdaf; opacity: 1; }
html[data-theme="dark"] .lenspire-site .ls-faq-list summary { color: var(--atelier-ink) !important; }

/* The gallery showcase ships with a legacy light-only background. */
html[data-theme="dark"] .lenspire-site .ls-gallery-showcase {
  border: 1px solid var(--atelier-line);
  border-radius: var(--atelier-radius-lg);
  background:
    radial-gradient(ellipse at 92% 10%, rgba(var(--atelier-accent-rgb), .16), transparent 42%),
    linear-gradient(145deg, #211e1a, #171513 72%);
  box-shadow: var(--atelier-shadow);
}
html[data-theme="dark"] .lenspire-site .ls-gallery-showcase h2 { color: var(--atelier-ink); }
html[data-theme="dark"] .lenspire-site .ls-gallery-heading > p { color: var(--atelier-muted); }
html[data-theme="dark"] .lenspire-site .ls-gallery-cards :is(h3, p) { color: var(--atelier-ink); }
html[data-theme="dark"] .lenspire-site .ls-gallery-cards p { color: var(--atelier-muted); }

/* The hero phone is deliberately a light guest-facing interface, even in dark mode.
   Keep its content in a self-contained contrast island so global dark text rules
   cannot turn its labels white-on-white. */
html[data-theme="dark"] .lenspire-site .hx-badge {
  border-color: rgb(255 232 190 / 48%);
  background: rgb(255 248 235 / 94%);
  color: #483418 !important;
  box-shadow: 0 5px 14px rgb(0 0 0 / 18%);
}
html[data-theme="dark"] .lenspire-site .hx-badge span { color: var(--atelier-accent-deep); }
html[data-theme="dark"] .lenspire-site :is(.hx-phone, .hx-card) { color: #221d31; }
html[data-theme="dark"] .lenspire-site .hx-phone :is(h2, b, strong),
html[data-theme="dark"] .lenspire-site .hx-card :is(b, strong) { color: #17141f; }
html[data-theme="dark"] .lenspire-site .hx-phone :is(p, small),
html[data-theme="dark"] .lenspire-site .hx-card small { color: #706982; }
html[data-theme="dark"] .lenspire-site .hx-phone :is(.hx-phone-status, .hx-phone-status b, .hx-search-card b span) { color: #423b57; }
html[data-theme="dark"] .lenspire-site .hx-card--match strong { color: #7133c7; }
html[data-theme="dark"] .lenspire-site .hx-card--match em { color: #2867cf; }

/* The animated handset uses a soft pearl-lilac surface in every site theme.
   It is light enough for daylight pages and still feels elevated against the
   dark landing page, without inheriting low-contrast dark-mode colours. */
.lenspire-site .hx-phone,
.lenspire-site .hx-phone :is(h2, p, b, small, span),
.lenspire-site .hx-card { font-family: var(--font-sans); }
.lenspire-site .hx-phone-body h2 { letter-spacing: -.035em; }
.lenspire-site .hx-collage { right: -36px; bottom: 18px; width: 230px; height: 306px; z-index: 1; filter: saturate(1.06) contrast(1.03); }
.lenspire-site .hx-card { z-index: 4; }
.lenspire-site .hx-phone { z-index: 3; }
.lenspire-site .hx-phone {
  background: linear-gradient(160deg, #f6f3ff 0%, #e8e3f4 100%);
  border-color: #cfc6dd;
  box-shadow: inset 0 0 0 4px rgb(255 255 255 / 58%), 0 30px 70px rgb(43 30 67 / 28%);
  color: #231f2a;
}
.lenspire-site .hx-phone-head { border-color: #d9d1e7; }
.lenspire-site .hx-burger i { background: #2d2835; }
.lenspire-site .hx-phone :is(h2, b, strong) { color: #211c27; }
.lenspire-site .hx-phone :is(p, small, .hx-phone-sub, .hx-scan-sub, .hx-phone-stage--results > p, .hx-phone-stage--results > small) { color: #625b70; }
.lenspire-site .hx-phone :is(.hx-phone-status, .hx-phone-status b, .hx-search-card b span) { color: #40384d; }
.lenspire-site .hx-phone .hx-search-card { border-color: #ddd5eb; background: rgb(255 255 255 / 72%); box-shadow: 0 6px 18px rgb(58 43 84 / 12%); }

/* Landing refresh: a shorter, intentional conversion path with one idea per panel. */
.lenspire-site > main {
  display: grid;
  gap: clamp(18px, 2.2vw, 30px);
  padding-block: clamp(22px, 3vw, 38px) 56px;
}
.lenspire-site > main > :is(section, div) {
  width: min(100%, 1100px);
  margin: 0 auto !important;
}
.lenspire-site > main > :is(.ls-social-proof, .ls-gallery-showcase, .ls-how, .ls-workflow-proof, .ls-studio-notes)[hidden] { display: none !important; }
.lenspire-site .ls-sample-experience { grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); align-items: center; }
.lenspire-site .ls-sample-copy h2 { max-width: 13ch; margin-bottom: 16px; }
.lenspire-site .ls-sample-steps { gap: 10px; }
.lenspire-site .ls-sample-steps li { min-height: 0; padding: 16px; }
.lenspire-site .ls-sections.ls-audiences { padding-block: 6px 4px; }
.lenspire-site .ls-section-title { max-width: 660px; }
.lenspire-site .ls-audience-grid article { min-height: 0; }
.lenspire-site .ls-capability-experience { overflow: hidden; }
.lenspire-site .ls-capability-detail { min-height: 0; }
.lenspire-site .ls-privacy-trust { align-items: center; }
.lenspire-site .ls-faq-list details:nth-of-type(n + 6) { display: none; }
.lenspire-site .ls-cta { min-height: 0; }

@media (max-width: 720px) {
  .lenspire-site > main { width: calc(100vw - 24px); gap: 16px; padding-block: 18px 38px; }
  .lenspire-site .ls-sample-experience { grid-template-columns: 1fr; }
  .lenspire-site .ls-sample-copy h2 { max-width: none; }
  .lenspire-site .ls-audience-grid { grid-template-columns: 1fr; }
}

/* Let the marketing story breathe: the hero is the focal card; the remaining
   sections sit openly on the page instead of nesting every idea in a box. */
.lenspire-site > main > :is(.ls-sample-experience, .ls-capability-experience, .ls-privacy-trust, .ls-pricing) {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lenspire-site .ls-pricing-card,
.lenspire-site .ls-cta {
  border-inline: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lenspire-site .ls-pricing-card { border-block: 1px solid var(--atelier-line); }
.lenspire-site .ls-sample-steps li {
  border: 0;
  border-left: 2px solid rgba(var(--atelier-accent-rgb), .62);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lenspire-site .ls-capability-detail {
  border: 0;
  border-left: 1px solid var(--atelier-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lenspire-site .ls-privacy-trust li {
  border: 0;
  border-top: 1px solid var(--atelier-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lenspire-site .ls-faq-list details {
  border: 0;
  border-bottom: 1px solid var(--atelier-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
@media (max-width: 720px) {
  .lenspire-site .ls-capability-detail { border-top: 1px solid var(--atelier-line); border-left: 0; }
}

/* The supporting grids follow the same open rhythm: imagery and typography
   carry the hierarchy, while fine rules only guide the eye. */
.lenspire-site .ls-audience-grid article,
.lenspire-site .ls-capability-grid article,
.lenspire-site .ls-capability-flow,
.lenspire-site .ls-capability-tabs {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lenspire-site .ls-audience-grid article { padding-inline: 0; }
.lenspire-site .ls-audience-grid article:not(:first-child) { border-left: 1px solid var(--atelier-line); padding-left: 18px; }
.lenspire-site .ls-audience-photo { border-radius: 16px; }
.lenspire-site .ls-capability-tabs { display: flex; justify-content: center; gap: 20px; padding: 0 0 12px; }
.lenspire-site .ls-capability-tabs button,
.lenspire-site .ls-capability-tabs button[aria-selected="true"] {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.lenspire-site .ls-capability-tabs button[aria-selected="true"] { border-bottom-color: var(--atelier-accent); }
.lenspire-site .ls-capability-grid article { padding: 0 16px 0 0; }
.lenspire-site .ls-capability-grid article:not(:first-child) { border-left: 1px solid var(--atelier-line); padding-left: 16px; }
.lenspire-site .ls-capability-flow-slides,
.lenspire-site .ls-capability-flow-slide { border: 0; background: transparent; box-shadow: none; }
@media (max-width: 720px) {
  .lenspire-site .ls-audience-grid article:not(:first-child),
  .lenspire-site .ls-capability-grid article:not(:first-child) { border-top: 1px solid var(--atelier-line); border-left: 0; padding: 18px 0 0; }
  .lenspire-site .ls-capability-tabs { justify-content: flex-start; gap: 12px; overflow-x: auto; }
}

/* Some legacy page shells paint their own panel colour. Clear them explicitly
   so the final FAQ and conversion prompt remain part of the open canvas. */
.lenspire-site > main > :is(.ls-sample-experience, .ls-capability-experience, .ls-privacy-trust, .ls-pricing, .ls-faq) {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.lenspire-site .ls-cta {
  border: 0 !important;
  border-block: 1px solid var(--atelier-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Higher-specificity legacy dark rules also painted individual cards. Keep the
   supporting copy open, reserving a surface only for the live workflow visual. */
html[data-theme] .lenspire-site :is(.ls-audience-grid article, .ls-capability-grid article, #key-features .ls-capability-detail, .ls-privacy-trust li) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .lenspire-site .ls-audience-grid article:not(:first-child) { border-left: 1px solid var(--atelier-line) !important; }
html[data-theme] .lenspire-site .ls-capability-grid article:not(:first-child) { border-left: 1px solid var(--atelier-line) !important; }
html[data-theme] .lenspire-site .ls-privacy-trust li { border-top: 1px solid var(--atelier-line) !important; }
html[data-theme] .lenspire-site .ls-faq-list details {
  border: 0 !important;
  border-bottom: 1px solid var(--atelier-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html[data-theme] .lenspire-site .ls-pricing-card {
  border: 0 !important;
  border-block: 1px solid var(--atelier-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 720px) {
  html[data-theme] .lenspire-site :is(.ls-audience-grid article:not(:first-child), .ls-capability-grid article:not(:first-child)) { border-top: 1px solid var(--atelier-line) !important; border-left: 0 !important; }
}
.lenspire-site .hx-phone .hx-bar { background: #d2cadf; }
.lenspire-site .hx-phone .hx-bar i { background: linear-gradient(90deg, #a789d9, #d0bdf1); box-shadow: 0 1px 5px rgb(81 55 125 / 28%); }
.lenspire-site .hx-phone .hx-face-ring { border-color: #b9a3df; filter: drop-shadow(0 1px 2px rgb(57 37 87 / 36%)); }
.lenspire-site .hx-phone .hx-avatar { border-color: #f8f6ff; box-shadow: 0 0 0 2px #d8ccef, 0 10px 26px rgb(58 41 90 / 24%); }
.lenspire-site .hx-phone .hx-avatar::before { background: linear-gradient(90deg, transparent, #e6dcff 20%, #a98bdd 50%, #e6dcff 80%, transparent); box-shadow: 0 -3px 8px rgb(55 35 83 / 24%), 0 3px 10px rgb(78 45 126 / 46%); }
.lenspire-site .hx-phone .hx-avatar::after { background: repeating-linear-gradient(0deg, transparent 0 15px, rgb(255 255 255 / 34%) 15px 16px), repeating-linear-gradient(90deg, transparent 0 15px, rgb(255 255 255 / 26%) 15px 16px); }
.lenspire-site .hx-phone .hx-result-status { background: #ebe5f7; color: #312a38; }
.lenspire-site .hx-phone .hx-result-photos i { border-color: #fff; }
.lenspire-site .hx-phone .hx-result-button { color: #fff; }

/* Reassert the full contrast island after the page-wide dark-mode rules. */
html[data-theme="dark"] .lenspire-site .hx-phone { background: linear-gradient(160deg, #f6f3ff 0%, #e8e3f4 100%); border-color: #cfc6dd; color: #231f2a; }
html[data-theme="dark"] .lenspire-site .hx-phone-head { border-color: #d9d1e7; }
html[data-theme="dark"] .lenspire-site .hx-burger i { background: #2d2835; }
html[data-theme="dark"] .lenspire-site .hx-phone :is(h2, b, strong) { color: #211c27; }
html[data-theme="dark"] .lenspire-site .hx-phone :is(p, small, .hx-phone-sub, .hx-scan-sub, .hx-phone-stage--results > p, .hx-phone-stage--results > small) { color: #625b70; }
html[data-theme="dark"] .lenspire-site .hx-phone :is(.hx-phone-status, .hx-phone-status b, .hx-search-card b span) { color: #40384d; }
html[data-theme="dark"] .lenspire-site .hx-phone .hx-search-card { border-color: #ddd5eb; background: rgb(255 255 255 / 72%); }
html[data-theme="dark"] .lenspire-site .hx-phone .hx-bar { background: #d2cadf; }
html[data-theme="dark"] .lenspire-site .hx-phone .hx-result-status { background: #ebe5f7; color: #312a38; }
/* The handset stays light in dark mode, so retain the dark-on-light brand
   mark inside it instead of inheriting the page-level dark logo swap. */
html[data-theme="dark"] .lenspire-site .hx-phone img[data-theme-logo] { content: url('/static/lenspire-logo-premium.png'); }

/* Use two clear states rather than cross-fading the scan and result panels.
   This prevents a partially transparent, overlapping phone screen mid-cycle. */
.lenspire-site .hx-phone-stage--scan { animation: hx-stage-scan-clear 10s linear infinite; }
.lenspire-site .hx-phone-stage--results { animation: hx-stage-results-clear 10s linear infinite; }
@keyframes hx-stage-scan-clear {
  0%, 47% { opacity: 1; transform: translateY(0); visibility: visible; }
  48%, 94% { opacity: 0; transform: translateY(-4px); visibility: hidden; }
  95%, 100% { opacity: 1; transform: translateY(0); visibility: visible; }
}
@keyframes hx-stage-results-clear {
  0%, 47% { opacity: 0; transform: translateY(5px); visibility: hidden; }
  48%, 94% { opacity: 1; transform: translateY(0); visibility: visible; }
  95%, 100% { opacity: 0; transform: translateY(5px); visibility: hidden; }
}

/* Keep the supplied PNG lockup unframed: no card, backing, or decorative chrome. */
img[data-theme-logo],
img[src*="lenspire-logo-premium"] {
  filter: contrast(1.08) saturate(1.06);
}
html[data-theme="dark"] img[data-theme-logo],
html[data-theme="dark"] img[src*="lenspire-logo-premium"] {
  content: url('/static/brand/lenspire-logo-on-dark.png');
}
.studio-app .app-loader-icon { background-image: url('/static/brand/lenspire-mark.png') !important; }

/* On phones, show the live guest experience before the marketing copy. */
@media (max-width: 640px) {
  .lenspire-site .hx-visual { order: -1; }
}

/* Some high-density phones report a tablet-like CSS width. Remove all
   decorative layers through that range so nothing appears behind the handset. */
@media (max-width: 820px) {
  .lenspire-site :is(.hx-collage, .hx-card) { display: none !important; }
}

/* Phone layout audit: one compact scale for surfaces, cards, media and actions.
   These rules load after the legacy landing styles and deliberately prevent
   individual panels from creating their own competing gutters. */
@media (max-width: 600px) {
  :root { --atelier-panel-space: 18px; --atelier-section-space: 16px; }

  img, svg, video, canvas { max-width: 100%; }
  .lenspire-site :is(.hx-hero, .ls-sample-experience, .ls-social-proof, .ls-capability-experience, .ls-gallery-showcase, .ls-how, .ls-workflow-proof, .ls-privacy-trust, .ls-pricing-card, .ls-studio-notes, .ls-faq, .ls-cta),
  .pricing-site :is(.pricing-hero, .public-plan, .pricing-note),
  .public-legal .legal-shell section,
  .login-page :is(.login-shell, .login-intro, .login-card),
  .studio-app :is(.studio-page-hero, .studio-hero, .event-hero, .event-settings-hero, .account-hero, .platform-hero, .subscription-hero, .guest-find-hero, .guest-results-hero, .studio-dashboard-card, .studio-event-card, .event-action, .event-organize-card, .event-settings-card, .event-settings-tool, .account-card, .platform-create-card, .platform-studio-list, .subscription-plan, .access-card, .guest-pin-card, .guest-search-card, .guest-result-card, .event-photo) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    border-radius: 20px;
  }

  /* Landing: compact, aligned panels and a hero that stays entirely inside the viewport. */
  .lenspire-site > main > :is(section, div) { box-sizing: border-box; width: 100% !important; margin-inline: 0 !important; }
  .lenspire-site :is(.ls-sample-experience, .ls-social-proof, .ls-capability-experience, .ls-gallery-showcase, .ls-how, .ls-workflow-proof, .ls-privacy-trust, .ls-pricing-card, .ls-studio-notes, .ls-faq, .ls-cta) { width: 100% !important; }
  .lenspire-site :is(.ls-sample-experience, .ls-social-proof, .ls-how, .ls-workflow-proof, .ls-privacy-trust, .ls-pricing-card, .ls-cta) { padding: 20px 18px; }
  .lenspire-site :is(.ls-section-title, .ls-gallery-heading, .ls-notes-heading, .ls-faq-heading) { margin-bottom: 20px; }
  .lenspire-site :is(.ls-section-title h2, .ls-gallery-heading h2, .ls-notes-heading h2, .ls-faq-heading h2, .ls-sample-copy h2, .ls-privacy-trust h2, .ls-how h2, .ls-cta h2) { font-size: clamp(30px, 8.8vw, 38px); line-height: 1.04; letter-spacing: -.045em; }
  .lenspire-site :is(.ls-section-title > p, .ls-gallery-heading > p, .ls-notes-heading > p, .ls-faq-heading > p, .ls-sample-copy > p, .ls-privacy-trust > div > p) { font-size: 14px; line-height: 1.6; }
  .lenspire-site :is(.ls-audience-grid article, .ls-gallery-cards article, .ls-note-grid article, .ls-capability-grid article, .ls-engagement-grid article, .ls-steps article, .ls-workflow-list article, .ls-proof-points li, .ls-privacy-trust li) { box-sizing: border-box; min-width: 0; padding: 16px; }
  .lenspire-site :is(.ls-audience-grid, .ls-gallery-cards, .ls-note-grid, .ls-capability-grid, .ls-engagement-grid, .ls-steps, .ls-workflow-list) { gap: 12px; margin-inline: 0; }
  .lenspire-site :is(.ls-audience-photo, .ls-gallery-photo) { height: 168px; }
  .lenspire-site .ls-capability-experience { overflow: clip; padding: 12px; }
  .lenspire-site .ls-kpi-highlights { padding: 12px; }
  .lenspire-site .ls-capability-tabs { margin-bottom: 12px; }
  .lenspire-site .ls-capability-grid article { min-height: 0; padding: 16px; overflow: clip; }
  .lenspire-site .ls-capability-detail { width: 100%; margin: 12px 0 0; padding: 18px 14px; }
  .lenspire-site .ls-capability-flow { width: 100%; margin: 16px 0 0; }
  .lenspire-site .ls-gallery-cards { margin-block: 18px; }
  .lenspire-site .ls-gallery-showcase { padding: 18px; }
  .lenspire-site .ls-how > :is(.ls-kicker, h2) { padding-left: 0; }
  .lenspire-site .ls-steps { width: 100%; margin-top: 20px; }
  .lenspire-site .ls-footer { box-sizing: border-box; width: calc(100vw - 24px); margin-inline: auto; padding: 24px 18px; }

  .lenspire-site .hx-hero { overflow: clip; padding: 14px 18px 0; }
  .lenspire-site .hx-hero-grid { gap: 18px; }
  .lenspire-site .hx-copy { min-width: 0; }
  .lenspire-site .hx-copy h1 { font-size: clamp(33px, 9.2vw, 38px); }
  /* Keep the extended handset unobstructed on mobile. */
  .lenspire-site .hx-collage { display: none; }
  .lenspire-site .hx-cta { grid-template-columns: 1fr; gap: 9px; }
  .lenspire-site :is(.hx-btn-primary, .hx-btn-ghost) { width: 100%; min-width: 0; min-height: 46px; padding-inline: 14px; font-size: 12px; white-space: normal; }
  .lenspire-site .hx-visual { min-height: 0; }
  /* The matched-gallery panel includes an action card below its photo grid.
     Reserve its full height on phones so the card is never clipped mid-cycle. */
  .lenspire-site .hx-phone { width: min(100%, 292px); min-height: 680px; padding: 8px 14px 16px; }
  .lenspire-site .hx-phone-body { min-height: 570px; overflow: visible; padding-top: 8px; }
  .lenspire-site .hx-face { width: clamp(198px, 58vw, 224px); height: clamp(198px, 58vw, 224px); }
  .lenspire-site .hx-search-card { margin-top: 8px; }
  .lenspire-site .hx-features { gap: 12px 8px; margin-top: 12px; padding: 14px 0 18px; }
  .lenspire-site .hx-features b, .lenspire-site .hx-features small { overflow-wrap: anywhere; white-space: normal; }

  /* Public conversion and account pages. */
  .pricing-main { box-sizing: border-box; width: calc(100vw - 24px); padding-block: 18px 36px; overflow: clip; }
  .pricing-site .pricing-hero { margin-top: 8px; padding: 20px 18px; }
  .pricing-site .pricing-hero h1 { font-size: clamp(32px, 9vw, 38px); }
  .pricing-site .pricing-promise { padding: 20px 18px; }
  .pricing-site .public-plan { padding: 20px 18px; }
  .public-legal .legal-shell { width: calc(100vw - 24px); margin-block: 20px 36px; }
  .public-legal .legal-shell section { padding: 20px 18px; }
  .login-page .login-stage { padding: 18px 12px 34px; }
  .login-page .login-stage { box-sizing: border-box; width: 100%; overflow: clip; }
  .login-page .login-shell { box-sizing: border-box; width: 100%; margin-inline: 0; }
  .login-page :is(.login-intro, .login-card) { padding: 22px 18px; }

  /* Signup had a wide decorative pseudo-element and uneven card spacing. */
  .studio-app.access-app main { box-sizing: border-box; width: calc(100vw - 24px); padding: 0 !important; overflow: clip; }
  .studio-app .access-stage { width: 100%; margin: 18px auto 32px; padding: 0; gap: 20px; }
  .studio-app .access-intro { min-width: 0; }
  .studio-app .access-intro h1 { font-size: clamp(34px, 9.5vw, 42px); }
  .studio-app .access-card { width: 100%; padding: 22px 18px; overflow: clip; }
  .studio-app .access-card::after { display: none; }
  .studio-app .access-card form { min-width: 0; margin: 20px 0; }
  .studio-app .access-card :is(input, button) { box-sizing: border-box; width: 100%; }
  .studio-app .access-legal-consent { grid-template-columns: 18px minmax(0, 1fr); min-width: 0; }
  .studio-app .access-card .access-legal-consent input[type="checkbox"] { width: 18px; height: 18px; }
  .studio-app .access-legal-consent > span { min-width: 0; }

  /* Studio pages use stable two-up KPI cards and single-column actions on phones. */
  .studio-app main { width: calc(100vw - 24px); }
  .studio-app :is(.studio-kpis, .event-kpis) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .studio-app :is(.studio-kpis > article, .event-kpis > article) { min-height: 112px; padding: 16px; }
  .studio-app :is(.studio-kpis b, .event-kpis b) { font-size: clamp(26px, 8vw, 34px); }
  .studio-app :is(.studio-dashboard-grid, .studio-event-grid, .event-actions-grid, .event-organize-grid, .event-settings-grid, .account-grid, .platform-layout, .guest-results-grid) { grid-template-columns: 1fr; gap: 12px; }
  .studio-app :is(.studio-dashboard-card, .studio-event-card, .event-action, .event-organize-card, .event-settings-card, .event-settings-tool, .account-card, .platform-create-card, .platform-studio-list, .subscription-plan, .access-card, .guest-pin-card, .guest-search-card, .guest-result-card, .event-photo) { padding: 18px; }
  .studio-app :is(h1, h2) { overflow-wrap: anywhere; }

  /* Guided demo: preserve the experience without desktop-sized whitespace. */
  body:not(.studio-app):not(.lenspire-site):not(.pricing-site):not(.public-legal):not(.login-page) .demo-shell { width: calc(100vw - 24px); padding: 24px 0 38px; }
  body:not(.studio-app):not(.lenspire-site):not(.pricing-site):not(.public-legal):not(.login-page) .demo-stage { margin-top: 20px; border-radius: 20px; }
  body:not(.studio-app):not(.lenspire-site):not(.pricing-site):not(.public-legal):not(.login-page) .demo-panel { grid-template-columns: 1fr; gap: 22px; min-height: 0; padding: 24px 18px; }
  body:not(.studio-app):not(.lenspire-site):not(.pricing-site):not(.public-legal):not(.login-page) :is(.demo-event-art, .demo-phone) { min-height: 260px; padding: 20px; }
  body:not(.studio-app):not(.lenspire-site):not(.pricing-site):not(.public-legal):not(.login-page) .demo-copy h2 { font-size: clamp(30px, 8.5vw, 36px); letter-spacing: -.04em; }
}

/* Replace the old partial-circle ornaments with a quieter editorial corner mark.
   It uses three fine diagonal strokes, so cards feel intentional without a repeated motif. */
.studio-app :is(.studio-dashboard-card, .studio-kpis article, .studio-event-card, .event-action, .guest-pin-card, .access-card)::after,
.lenspire-site :is(.ls-capability-grid article, .ls-engagement-grid article, .ls-capability-flow)::after {
  display: block !important;
  inset: auto 0 0 auto !important;
  width: 86px !important;
  height: 86px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(135deg, transparent 0 43%, rgba(var(--atelier-accent-rgb), .28) 43% 45%, transparent 45% 53%, rgba(var(--atelier-accent-rgb), .18) 53% 55%, transparent 55% 63%, rgba(var(--atelier-accent-rgb), .12) 63% 65%, transparent 65%) !important;
  box-shadow: none !important;
  clip-path: polygon(42% 0, 100% 0, 100% 100%, 0 100%, 0 82%) !important;
  opacity: .9;
  transform: none !important;
  pointer-events: none;
}

/* Larger ring flourishes are removed in favour of the site-wide canvas grid. */
.studio-app main::before,
.studio-app .studio-events-hero::before,
.studio-app .studio-event-cover::after,
.event-showcase::after,
.event-showcase .event-action::before,
body.studio-app.event-showcase .event-hero::before,
body.studio-app.event-showcase .event-hero::after,
.studio-app.guest-app::before,
.studio-app.guest-app::after,
.studio-app.guest-app .guest-find-hero::after,
.lenspire-site .ls-capability-experience::before,
.lenspire-site .ls-studio-signature::before,
.lenspire-site .ls-ai-art::before,
.lenspire-site .ls-ai-art::after,
.lenspire-site .ls-selfie-frame::after {
  display: none !important;
}

@media (max-width: 780px) {
  .studio-app :is(.studio-dashboard-card, .studio-kpis article, .studio-event-card, .event-action, .guest-pin-card, .access-card)::after,
  .lenspire-site :is(.ls-capability-grid article, .ls-engagement-grid article, .ls-capability-flow)::after {
    width: 64px !important;
    height: 64px !important;
  }
}

/* Light-mode contrast guardrails. Open editorial sections must never retain
   the white copy that belonged to their former dark card backgrounds. */
html[data-theme="light"] .lenspire-site #key-features .ls-capability-heading .ls-kicker {
  color: var(--atelier-accent-deep) !important;
}
html[data-theme="light"] .lenspire-site #key-features .ls-capability-heading h2 {
  color: var(--atelier-ink) !important;
}
html[data-theme="light"] .lenspire-site #key-features .ls-capability-heading h2 em {
  background: linear-gradient(90deg, var(--atelier-accent-deep), var(--atelier-accent), #c9786d) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}
html[data-theme="light"] .lenspire-site #key-features :is(.ls-capability-heading > p:last-child, .ls-capability-flow-top, .ls-capability-flow-slide p, .ls-capability-flow-slide small) {
  color: var(--atelier-muted) !important;
}
html[data-theme="light"] .lenspire-site #key-features .ls-capability-flow-slide strong {
  color: var(--atelier-ink) !important;
}
html[data-theme="light"] .lenspire-site .ls-capability-tabs button {
  color: var(--atelier-muted) !important;
}
html[data-theme="light"] .lenspire-site .ls-capability-tabs button[aria-selected="true"] {
  color: var(--atelier-ink) !important;
}
html[data-theme="light"] .lenspire-site :is(.ls-audience-grid article, .ls-capability-grid article, .ls-engagement-grid article) :is(h2, h3, b, strong) {
  color: var(--atelier-ink) !important;
}
html[data-theme="light"] .lenspire-site :is(.ls-audience-grid article, .ls-capability-grid article, .ls-engagement-grid article) :is(p, small) {
  color: var(--atelier-muted) !important;
}
/* Pricing and the closing prompt are deliberately open in the current landing
   layout. Restore editorial ink after their former purple panels were removed. */
html[data-theme="light"] .lenspire-site .ls-pricing-card .ls-kicker,
html[data-theme="light"] .lenspire-site .ls-cta .ls-kicker {
  color: var(--atelier-accent-deep) !important;
}
html[data-theme="light"] .lenspire-site :is(.ls-pricing-card, .ls-cta) h2 {
  color: var(--atelier-ink) !important;
}
html[data-theme="light"] .lenspire-site .ls-pricing-card > div > p {
  color: var(--atelier-muted) !important;
}
html[data-theme="light"] .lenspire-site .ls-pricing-card .ls-text-link {
  color: var(--atelier-accent-deep) !important;
}
html[data-theme="light"] .studio-app main :is(.studio-page-hero, .studio-hero, .event-hero, .event-settings-hero, .account-hero, .platform-hero, .subscription-hero, .studio-dashboard-card, .studio-event-card, .event-action, .event-organize-card, .event-settings-card, .event-settings-tool, .account-card, .platform-create-card, .platform-studio-list, .subscription-plan, .access-card, .guest-pin-card, .guest-search-card, .guest-result-card) :is(h1, h2, h3, h4, b, strong, label) {
  color: var(--atelier-ink) !important;
}
html[data-theme="light"] .studio-app main :is(.studio-page-hero, .studio-hero, .event-hero, .event-settings-hero, .account-hero, .platform-hero, .subscription-hero, .studio-dashboard-card, .studio-event-card, .event-action, .event-organize-card, .event-settings-card, .event-settings-tool, .account-card, .platform-create-card, .platform-studio-list, .subscription-plan, .access-card, .guest-pin-card, .guest-search-card, .guest-result-card) :is(p, small) {
  color: var(--atelier-muted) !important;
}

/* Primary actions inherit the selected accent in light mode instead of
   preserving legacy purple and orange variants from different page versions. */
html[data-theme="light"] :is(.lenspire-site, .pricing-site) :is(.hx-btn-primary, .ls-primary, .ls-dark-button, .ls-audience-grid article a, .public-plan a),
html[data-theme="light"] .login-page .login-submit,
html[data-theme="light"] .studio-app main :is(.studio-button, .access-button-link, .event-action-cta, .event-guest-link, .event-copy-link--wide, .event-message-link, .event-ai-button, .guest-open-camera, .guest-camera-capture, form button:not(.event-icon-button):not(.event-icon-button--danger):not(.password-toggle):not(.studio-nav-toggle)) {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--atelier-accent-deep), var(--atelier-accent)) !important;
  color: #201a10 !important;
  box-shadow: 0 10px 20px rgba(var(--atelier-accent-rgb), .24) !important;
}
html[data-theme="light"] :is(.lenspire-site, .pricing-site) :is(.hx-btn-primary, .ls-primary, .ls-dark-button, .ls-audience-grid article a, .public-plan a):hover,
html[data-theme="light"] .login-page .login-submit:hover,
html[data-theme="light"] .studio-app main :is(.studio-button, .access-button-link, .event-action-cta, .event-guest-link, .event-copy-link--wide, .event-message-link, .event-ai-button, .guest-open-camera, .guest-camera-capture, form button:not(.event-icon-button):not(.event-icon-button--danger):not(.password-toggle):not(.studio-nav-toggle)):hover {
  color: #201a10 !important;
  filter: brightness(1.05) saturate(1.06);
}
html[data-theme="light"][data-accent="violet"] :is(.lenspire-site, .pricing-site) :is(.hx-btn-primary, .ls-primary, .ls-dark-button, .ls-audience-grid article a, .public-plan a),
html[data-theme="light"][data-accent="violet"] .login-page .login-submit,
html[data-theme="light"][data-accent="violet"] .studio-app main :is(.studio-button, .access-button-link, .event-action-cta, .event-guest-link, .event-copy-link--wide, .event-message-link, .event-ai-button, .guest-open-camera, .guest-camera-capture, form button:not(.event-icon-button):not(.event-icon-button--danger):not(.password-toggle):not(.studio-nav-toggle)),
html[data-theme="light"][data-accent="sapphire"] :is(.lenspire-site, .pricing-site) :is(.hx-btn-primary, .ls-primary, .ls-dark-button, .ls-audience-grid article a, .public-plan a),
html[data-theme="light"][data-accent="sapphire"] .login-page .login-submit,
html[data-theme="light"][data-accent="sapphire"] .studio-app main :is(.studio-button, .access-button-link, .event-action-cta, .event-guest-link, .event-copy-link--wide, .event-message-link, .event-ai-button, .guest-open-camera, .guest-camera-capture, form button:not(.event-icon-button):not(.event-icon-button--danger):not(.password-toggle):not(.studio-nav-toggle)) {
  color: #fffdf9 !important;
}

/* Narrow-phone safety pass: keep imagery inside its card and make horizontally
   arranged feature tabs feel like an intentional, touch-friendly rail. */
@media (max-width: 600px) {
  html, body { max-width: 100%; overflow-x: clip; }

  .lenspire-site .ls-audience-grid--four article {
    padding: 0 0 18px !important;
  }
  .lenspire-site .ls-audience-grid--four .ls-audience-photo {
    width: 100%;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .lenspire-site .ls-capability-tabs {
    padding-inline: 2px;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 2px;
    scroll-snap-type: x proximity;
  }
  .lenspire-site .ls-capability-tabs button {
    min-height: 44px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .lenspire-site .hx-nav { gap: 7px; padding-inline: 12px; }
  .lenspire-site .hx-brand img { width: 104px; }
  .lenspire-site .hx-actions { gap: 6px; }
  .lenspire-site .hx-actions .theme-settings-trigger { width: 32px; height: 32px; min-height: 32px; }
  .lenspire-site .hx-logout { padding-inline: 10px; font-size: 12px; }
  .lenspire-site .hx-nav .ls-mobile-toggle { width: 42px; height: 42px; }
}

/* The mobile hero is an open canvas around the handset. Keep the phone sized
   to its completed gallery, without the former fixed-height blank screen. */
@media (max-width: 600px) {
  .lenspire-site .hx-hero {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .lenspire-site .hx-phone {
    min-height: 0 !important;
    padding-bottom: 14px;
    border: 0 !important;
    box-shadow: 0 22px 48px rgb(43 30 67 / 20%) !important;
  }
  .lenspire-site .hx-phone-body {
    min-height: 460px !important;
    padding-bottom: 0;
  }

  /* The site navigation and footer share one quiet, soft surface on phones. */
  .lenspire-site .hx-nav,
  .lenspire-site .ls-footer {
    border: 0 !important;
    background: var(--atelier-surface) !important;
    box-shadow: none !important;
  }
  .lenspire-site .ls-footer { border-radius: 18px 18px 0 0; }
}

/* The landing page should feel open on a phone: one calm surface behind the
   hero, not a stack of floating rounded containers.  Use opaque colours here
   so the mobile navigation and footer visibly match in both themes. */
@media (max-width: 600px) {
  .lenspire-site .hx-nav,
  .lenspire-site .hx-hero,
  .lenspire-site .ls-footer {
    box-sizing: border-box;
    width: 100% !important;
    margin-inline: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  .lenspire-site .hx-nav {
    min-height: 64px;
    padding-inline: 18px;
  }

  .lenspire-site .hx-hero {
    margin-block: 0 !important;
    padding: 16px 18px 22px !important;
  }

  .lenspire-site .ls-footer {
    padding: 28px 18px max(28px, env(safe-area-inset-bottom)) !important;
  }

  .lenspire-site .hx-phone {
    overflow: hidden;
    min-height: 0 !important;
    border: 0 !important;
    box-shadow: 0 18px 42px rgb(43 30 67 / 18%) !important;
  }
}

html[data-theme="light"] .lenspire-site :is(.hx-nav, .hx-hero, .ls-footer) {
  background: var(--atelier-paper) !important;
}

html[data-theme="dark"] .lenspire-site :is(.hx-nav, .hx-hero, .ls-footer) {
  background: var(--atelier-paper) !important;
}

/* Keep the conversion action centered in the compact mobile header while the
   appearance control and menu remain easy to reach at the right edge. */
@media (max-width: 600px) {
  .lenspire-site .hx-nav {
    position: relative;
    gap: 8px;
  }

  .lenspire-site .hx-actions {
    margin-left: auto;
    gap: 8px;
  }

  .lenspire-site .hx-actions .hx-logout {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    min-height: 34px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: none;
  }

  .lenspire-site .hx-actions .theme-settings-trigger,
  .lenspire-site .hx-nav .ls-mobile-toggle {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }
}

/* A phone viewport should read as one continuous canvas.  Clear the legacy
   page-level radial layer as it shows through open sections after the hero. */
@media (max-width: 600px) {
  body.lenspire-site,
  body.lenspire-site > main {
    background-color: var(--atelier-paper) !important;
    background-image: none !important;
  }
}

/* Put the mobile header on a real three-column track.  This makes the central
   action independent of the logo and the two right-side controls. */
@media (max-width: 600px) {
  .lenspire-site .hx-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    padding-inline: 18px;
  }

  .lenspire-site .hx-brand {
    grid-column: 1;
    justify-self: start;
  }

  .lenspire-site .hx-actions { display: contents; }

  .lenspire-site .hx-actions .hx-logout {
    position: static;
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    transform: none;
  }

  .lenspire-site .hx-actions .theme-settings-trigger {
    position: absolute;
    top: 50%;
    right: 64px;
    transform: translateY(-50%);
  }

  .lenspire-site .hx-nav .ls-mobile-toggle {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
}