/* RO11 LOGIC — permanent warm-light premium palette. */
:root {
  color-scheme: only light;
  --ro11-paper: #f0eee5;
  --ro11-card: #faf9f3;
  --ro11-card-raised: #fffdf7;
  --ro11-ink: #203a32;
  --ro11-ink-soft: #53675e;
  --ro11-muted: #78847b;
  --ro11-line: #d7d8cb;
  --ro11-terra: #bd4e37;
  --ro11-terra-deep: #a53e2c;
  --ro11-action: #203a32;
  --ro11-action-text: #f4f0e5;
  --bg-primary: #f0eee5;
  --bg-secondary: #e8e8dc;
  --text-primary: #203a32;
  --text-secondary: #53675e;
  --text-muted: #78847b;
  --container-bg: #faf9f3;
  --input-bg: #fffdf7;
  --input-border: #d7d8cb;
  --border-color: #d7d8cb;
  --button-bg: #203a32;
  --button-hover: #29473d;
  --accent-color: #bd4e37;
  --accent-hover: #a53e2c;
  --shadow-color: rgba(32, 58, 50, .09);
  --glass-bg: rgba(250, 249, 243, .82);
  --glass-border: rgba(32, 58, 50, .12);
}

html, body {
  color-scheme: only light !important;
  background: var(--ro11-paper) !important;
  color: var(--ro11-ink) !important;
}
body, #root, #root > div:first-child[style*="height: 100vh"] {
  background-color: var(--ro11-paper) !important;
  color: var(--ro11-ink) !important;
  font-family: 'DM Sans', sans-serif !important;
}
body :is(.journal-container,.fasting-container,.weightbite-container,.deepsearch-container,.login-container) {
  color: var(--ro11-ink) !important;
  background: var(--ro11-paper) !important;
  font-family: 'DM Sans', sans-serif !important;
}
button, input, textarea, select { font-family: 'DM Sans', sans-serif !important; }
input, textarea, select {
  color: var(--ro11-ink) !important;
  background-color: var(--ro11-card-raised) !important;
  border-color: var(--ro11-line) !important;
}
input::placeholder, textarea::placeholder { color: var(--ro11-muted) !important; opacity: 1; }
select option { color: var(--ro11-ink); background: var(--ro11-card); }
label { color: var(--ro11-ink-soft) !important; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(189,78,55,.62) !important;
  outline-offset: 3px;
}
* { scrollbar-color: var(--ro11-line) var(--ro11-paper); }
::-webkit-scrollbar-thumb { background: var(--ro11-line) !important; }
::-webkit-scrollbar-track { background: var(--ro11-paper) !important; }

.ro11-menu-page {
  --ro11-paper: #f0eee5 !important;
  --ro11-card: #faf9f3 !important;
  --ro11-ink: #203a32 !important;
  --ro11-ink-soft: #53675e !important;
  --ro11-line: #d7d8cb !important;
  --ro11-red: #bd4e37 !important;
  color: var(--ro11-ink) !important;
  background:
    radial-gradient(ellipse at 82% 7%, rgba(207,197,159,.22), transparent 33%),
    var(--ro11-paper) !important;
}
.ro11-menu-page::before {
  border-color: rgba(32,58,50,.08) !important;
  box-shadow: 0 0 0 34px rgba(32,58,50,.022), 0 0 0 78px rgba(32,58,50,.018) !important;
}
.ro11-brand-mark {
  color: #f0eee5 !important; background: #203a32 !important;
}
.ro11-brand-copy h1, .ro11-action-label, .ro11-profile-name { color: #203a32 !important; }
.ro11-brand-copy p, .ro11-profile-status, .ro11-profile-trigger > svg,
.ro11-action-arrow { color: #78847b !important; }
.ro11-profile-trigger {
  color: #203a32 !important; background: rgba(250,249,243,.86) !important;
  border-color: #d7d8cb !important;
}
.ro11-profile-trigger:hover, .ro11-profile-trigger[aria-expanded="true"] {
  background: #fffdf7 !important; border-color: #a9b3a5 !important;
}
.ro11-profile-avatar { color: #f0eee5 !important; background: #bd4e37 !important; }
.ro11-profile-dropdown {
  color: #203a32 !important; background: #fbfaf4 !important; border-color: #d7d8cb !important;
  box-shadow: 0 18px 48px rgba(32,58,50,.16) !important;
}
.ro11-profile-action { color: #203a32 !important; }
.ro11-profile-action:hover { background: #eeefe6 !important; }
.ro11-profile-action--signout { color: #bd4e37 !important; }
.ro11-profile-divider, .ro11-menu-page .dropdown-user-info { background: #d7d8cb !important; border-color: #d7d8cb !important; }
.ro11-action-card {
  color: #203a32 !important; background: #faf9f3 !important; border-color: #e1e1d7 !important;
  box-shadow: 0 4px 12px rgba(36,50,40,.035) !important;
}
.ro11-action-card:hover {
  border-color: #aeb9aa !important; box-shadow: 0 13px 28px rgba(36,50,40,.09) !important;
}
.ro11-action-icon {
  color: #203a32 !important; background: #edf0e7 !important; border-color: #e3e7dc !important;
}
.ro11-action-card:hover .ro11-action-icon { color: #fffaf0 !important; background: #203a32 !important; }
.ro11-action-arrow { border-color: #e1e4da !important; }
#mat-time-btn {
  color: #203a32 !important;
  background: #a3bb9e !important;
  border-color: #91aa8c !important;
}
#mat-time-btn .ro11-action-label,
#mat-time-btn .ro11-action-subtitle,
#mat-time-btn .ro11-action-icon,
#mat-time-btn .ro11-action-arrow {
  color: #203a32 !important;
  opacity: 1;
}
#mat-time-btn .ro11-action-icon {
  background: rgba(32,58,50,.08) !important;
  border-color: rgba(32,58,50,.18) !important;
}
#mat-time-btn .ro11-action-arrow {
  border-color: rgba(32,58,50,.24) !important;
}
.ro11-action-card--primary {
  color: #f4f0e5 !important; background: #203a32 !important; border-color: #203a32 !important;
  box-shadow: 0 10px 28px rgba(32,58,50,.15) !important;
}
.ro11-action-card--primary .ro11-action-label,
.ro11-action-card--primary .ro11-action-icon,
.ro11-action-card--primary .ro11-action-arrow { color: #f4f0e5 !important; }
.ro11-action-card--primary .ro11-action-icon { background: rgba(244,240,229,.1) !important; border-color: rgba(244,240,229,.18) !important; }
.ro11-action-card--primary .ro11-action-arrow { border-color: rgba(244,240,229,.24) !important; }
.ro11-action-card--primary::after {
  border-color: rgba(244,240,229,.12) !important;
  box-shadow: 0 0 0 22px rgba(244,240,229,.035), 0 0 0 47px rgba(244,240,229,.025) !important;
}
.ro11-action-card--primary:hover {
  background: #29473d !important; border-color: #29473d !important;
}
.ro11-action-card--recommendation {
  color: #fff8eb !important; background: #bd4e37 !important; border-color: #bd4e37 !important;
  box-shadow: 0 8px 22px rgba(153,62,43,.13) !important;
}
.ro11-action-card--recommendation .ro11-action-icon,
.ro11-action-card--recommendation .ro11-action-label,
.ro11-action-card--recommendation .ro11-action-arrow,
.ro11-action-card--recommendation .ro11-beta { color: #fff8eb !important; }
.ro11-action-card--recommendation .ro11-action-icon { background: rgba(255,248,235,.12) !important; border-color: rgba(255,248,235,.22) !important; }
.ro11-action-card--recommendation .ro11-action-arrow { border-color: rgba(255,248,235,.35) !important; }
.ro11-action-card--recommendation::after {
  border-color: rgba(255,248,235,.17) !important;
  box-shadow: 0 0 0 20px rgba(255,248,235,.045), 0 0 0 44px rgba(255,248,235,.03) !important;
}
.ro11-action-card--recommendation:hover {
  background: #a94532 !important; border-color: #a94532 !important;
}
.ro11-beta { border-color: rgba(255,248,235,.46) !important; }

/* Journal and WeightBite keep evergreen hero headers from premium.css. */
.journal-container, .weightbite-container { background: var(--ro11-paper) !important; }
.journal-container > header, .weightbite-container > header {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(189,78,55,.2), transparent 35%),
    #203a32 !important;
  color: #f4f0e5 !important;
}
.journal-container > header h1, .weightbite-container > header h1,
.journal-container .page-title, .weightbite-container .page-title {
  color: #f4f0e5 !important; -webkit-text-fill-color: #f4f0e5 !important;
  background: none !important; background-image: none !important;
  font-family: 'Barlow Condensed',sans-serif !important;
}
.journal-container .journal-form-card, .weightbite-container .weight-form-card,
.journal-container .journal-main > div[style*="background:"],
.weightbite-container .weightbite-main > div[style*="background:"],
.weightbite-container .weightbite-main > section {
  background: var(--ro11-card) !important; border-color: var(--ro11-line) !important;
  box-shadow: 0 5px 18px rgba(32,58,50,.045) !important;
}
.journal-container #exertion-level, .journal-container #muscle-soreness-level {
  background: #eeefe7 !important; border-color: var(--ro11-line) !important;
}
.journal-container .exertion-btn, .journal-container .soreness-btn,
.journal-inline-edit .edit-effort-btn, .journal-inline-edit .edit-soreness-btn {
  color: var(--ro11-ink) !important; background: var(--ro11-card) !important; border-color: var(--ro11-line) !important;
}
.journal-container .exertion-btn[data-selected="true"], .journal-container .soreness-btn[data-selected="true"],
.journal-container .exertion-btn.selected, .journal-container .soreness-btn.selected,
.journal-inline-edit .edit-effort-btn[data-selected="true"],
.journal-inline-edit .edit-soreness-btn[data-selected="true"] {
  color: #203a32 !important; background: rgba(189,78,55,.12) !important; border-color: var(--ro11-terra) !important;
}
.journal-container .journal-entry, .weightbite-container .weight-record,
.weightbite-container .food-record, .weightbite-container .water-record {
  color: var(--ro11-ink) !important; background: var(--ro11-card) !important; border-color: var(--ro11-line) !important;
  box-shadow: 0 4px 15px rgba(32,58,50,.04) !important;
}
.journal-container .journal-notes { color: var(--ro11-ink-soft) !important; background: var(--ro11-card-raised) !important; border-color: var(--ro11-line) !important; }
.journal-container .journal-empty-state, .weightbite-container .empty-state {
  color: var(--ro11-ink-soft) !important; background: var(--ro11-card) !important; border-color: var(--ro11-line) !important;
}
.empty-state-icon { color: var(--ro11-terra) !important; }
.journal-inline-edit .edit-effort-btn[data-selected="true"],
.journal-inline-edit .edit-soreness-btn[data-selected="true"] { background: rgba(189,78,55,.12) !important; }
.journal-inline-edit .save-edit-btn,
.journal-container button[type="submit"], .weightbite-container button[type="submit"],
#start-fasting-btn, #stop-fasting-btn {
  color: var(--ro11-action-text) !important; background: var(--ro11-action) !important;
  border-color: var(--ro11-action) !important;
}
.journal-inline-edit .cancel-edit-btn {
  color: var(--ro11-ink-soft) !important; background: var(--ro11-card-raised) !important; border-color: var(--ro11-line) !important;
}
.journal-entry button[onclick*="editJournalInline"],
.weightbite-container .weight-record button[onclick*="edit"],
.weightbite-container .food-record button[onclick*="edit"],
.weightbite-container .water-record button[onclick*="edit"] {
  color: var(--ro11-action-text) !important; background: var(--ro11-action) !important;
}
.journal-entry button[onclick*="deleteJournal"],
.weightbite-container .weight-record button[onclick*="delete"],
.weightbite-container .food-record button[onclick*="delete"],
.weightbite-container .water-record button[onclick*="delete"] {
  color: #fff8eb !important; background: var(--ro11-terra) !important;
}
.weightbite-container .futuristic-toggle-container {
  background: #e4e7dc !important; border-color: var(--ro11-line) !important; box-shadow: none !important;
}
.weightbite-container .toggle-slider { background: var(--ro11-action) !important; box-shadow: none !important; }
.weightbite-container .toggle-glow, .weightbite-container .toggle-particles { display: none !important; }
.weightbite-container .unit-toggle { color: var(--ro11-ink-soft) !important; text-shadow: none !important; }
.futuristic-toggle-container:has(.toggle-slider[style*="left: 6px"]) #unit-lbs,
.futuristic-toggle-container:has(.toggle-slider[style*="left: calc"]) #unit-kg {
  color: var(--ro11-action-text) !important;
}

/* Fasting header remains in the evergreen brand; content follows warm surfaces. */
.fasting-container { background: var(--ro11-paper) !important; color: var(--ro11-ink) !important; }
.fasting-container > header, .fasting-container .fasting-hero {
  background: #203a32 !important; color: #f4f0e5 !important;
}
.fasting-container main, .fasting-container .fasting-main { color: var(--ro11-ink) !important; }
.fasting-container #fasting-timer,
.fasting-container main > div[style*="background:"] {
  color: var(--ro11-ink) !important; background: var(--ro11-card) !important;
  border-color: var(--ro11-line) !important; box-shadow: 0 5px 20px rgba(32,58,50,.05) !important;
}
.fasting-container .fasting-empty-state { background: var(--ro11-card) !important; border-color: var(--ro11-line) !important; }
.fasting-container #timer-display { color: var(--ro11-ink) !important; font-family: 'Barlow Condensed',sans-serif !important; }
.fasting-container .goal-btn {
  color: var(--ro11-ink) !important; background: var(--ro11-card-raised) !important; border-color: var(--ro11-line) !important;
}
.fasting-container .goal-btn.selected {
  color: var(--ro11-action-text) !important; background: var(--ro11-action) !important; border-color: var(--ro11-action) !important;
}
.fasting-container #progress-ring { stroke: var(--ro11-terra) !important; }

/* Research surfaces and the pinned query composer. */
.deepsearch-container { background: var(--ro11-paper) !important; color: var(--ro11-ink) !important; }
.deepsearch-container .grok-header {
  background: rgba(240,238,229,.96) !important; border-color: var(--ro11-line) !important;
}
.deepsearch-container .grok-header > div,
.deepsearch-container .grok-header span { color: var(--ro11-ink) !important; text-shadow: none !important; }
.deepsearch-container #welcome-section > div:first-child {
  color: var(--ro11-ink) !important; -webkit-text-fill-color: var(--ro11-ink) !important;
  background: none !important; text-shadow: none !important; font-family: 'Barlow Condensed',sans-serif !important;
}
.deepsearch-container .quick-card, .deepsearch-container #sub-categories {
  color: var(--ro11-ink) !important; background: var(--ro11-card) !important; border-color: var(--ro11-line) !important;
}
.deepsearch-container .quick-card > div:first-child,
.deepsearch-container .research-category-icon,
.deepsearch-container #results-section a { color: var(--ro11-terra) !important; }
.deepsearch-container .quick-card > div:last-child,
.deepsearch-container #sub-category-title { color: var(--ro11-ink-soft) !important; }
.deepsearch-container .grok-search-container > div {
  background: var(--ro11-card) !important; border-color: var(--ro11-line) !important;
  box-shadow: 0 12px 30px rgba(32,58,50,.14) !important;
}
.deepsearch-container #search-input {
  color: var(--ro11-ink) !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.deepsearch-container #search-btn { color: var(--ro11-action-text) !important; background: var(--ro11-action) !important; }
.deepsearch-container #results-section { color: var(--ro11-ink) !important; }
.deepsearch-container #results-section h1, .deepsearch-container #results-section h2,
.deepsearch-container #results-section h3 { color: var(--ro11-ink) !important; font-family: 'Barlow Condensed',sans-serif !important; }
.deepsearch-container #results-section h3 { border-color: var(--ro11-line) !important; }
.deepsearch-container #results-section .grok-results > div:nth-child(1),
.deepsearch-container #results-section .grok-results > div:nth-child(2),
.deepsearch-container #results-section .grok-results > div:last-child,
.deepsearch-container #results-section .grok-results a {
  color: var(--ro11-ink) !important; background: var(--ro11-card) !important; border-color: var(--ro11-line) !important;
}
.deepsearch-container #results-section .grok-results a div { color: var(--ro11-ink-soft) !important; }
.deepsearch-container #results-section .grok-results a div:first-child { color: var(--ro11-terra) !important; }
.deepsearch-container #results-section .followup-btn {
  color: var(--ro11-ink) !important; background: #e9ebe2 !important; border-color: var(--ro11-line) !important;
}
.deepsearch-container #loading-indicator { color: var(--ro11-ink-soft) !important; }

.login-container.login-page {
  background:
    radial-gradient(ellipse at 8% 16%, rgba(189,78,55,.11), transparent 28%),
    radial-gradient(ellipse at 90% 88%, rgba(32,58,50,.08), transparent 32%),
    var(--ro11-paper) !important;
}
.login-panel, .login-card {
  color: var(--ro11-ink) !important; background: var(--ro11-card) !important;
  border-color: var(--ro11-line) !important; box-shadow: 0 20px 55px rgba(32,58,50,.1) !important;
}
.login-brand-title, .login-card h1 { color: var(--ro11-ink) !important; font-family: 'Barlow Condensed',sans-serif !important; }
.login-tagline { color: var(--ro11-ink-soft) !important; }
.login-panel button:not(#toggle-password), .login-card button:not(#toggle-password) {
  color: var(--ro11-action-text) !important; background: var(--ro11-action) !important;
}
.login-panel #traditional-login-btn, .login-panel #traditional-login-btn.login-action {
  color: #f4f0e5 !important; background: var(--ro11-terra) !important;
}
.login-panel #traditional-login-btn:hover { background: var(--ro11-terra-deep) !important; }
.login-panel #gmail-login-btn, .login-card #gmail-login-btn {
  color: var(--ro11-ink) !important; background: var(--ro11-card-raised) !important; border-color: var(--ro11-line) !important;
}
.login-panel input:focus { border-color: var(--ro11-terra) !important; box-shadow: 0 0 0 3px rgba(189,78,55,.12) !important; }
.login-divider span { background: var(--ro11-card) !important; }
.login-panel > div:last-child a { color: var(--ro11-terra) !important; }
#error-container > div { color: #943f31 !important; background: #f8e9e3 !important; border-color: #e6bdb0 !important; }
#success-container > div { color: #29473d !important; background: #e6eee6 !important; border-color: #c3d3c4 !important; }

/* Preserve warm surfaces in overlays. */
.terms-modal-overlay { background: rgba(19,32,27,.68) !important; }
.terms-modal-content, .terms-modal-content > div:first-child,
.terms-modal-content > div:last-child, .terms-modal-content .terms-modal-header,
.terms-modal-content .terms-modal-footer {
  color: var(--ro11-ink) !important; background: var(--ro11-card) !important; border-color: var(--ro11-line) !important;
}
.terms-modal-content { box-shadow: 0 25px 75px rgba(17,33,26,.28) !important; }
.terms-modal-content .terms-modal-body, .terms-modal-content p,
.terms-modal-content div:nth-child(2) { color: var(--ro11-ink-soft) !important; }
.terms-modal-content h2, .terms-modal-content h3 { color: var(--ro11-ink) !important; font-family: 'Barlow Condensed',sans-serif !important; }
.terms-modal-content > div:last-child button:first-child,
.terms-modal-content .terms-modal-cancel {
  color: var(--ro11-ink-soft) !important; border-color: var(--ro11-line) !important; background: transparent !important;
}
.terms-modal-content > div:last-child button:last-child,
.terms-modal-content .terms-modal-accept {
  color: var(--ro11-action-text) !important; background: var(--ro11-action) !important;
}
.onboarding-tooltip {
  color: var(--ro11-ink) !important; background: var(--ro11-card) !important;
  border-color: var(--ro11-line) !important; box-shadow: 0 20px 60px rgba(17,33,26,.3) !important;
}
.onboarding-tooltip .onboarding-title { color: var(--ro11-terra) !important; font-family: 'Barlow Condensed',sans-serif !important; }
.onboarding-tooltip .onboarding-copy { color: var(--ro11-ink-soft) !important; }
.onboarding-tooltip > div:last-child button:last-child, .onboarding-tooltip .onboarding-next {
  color: var(--ro11-action-text) !important; background: var(--ro11-action) !important;
}
.onboarding-tooltip > div:last-child button:first-child, .onboarding-tooltip .onboarding-skip {
  color: var(--ro11-ink-soft) !important; background: transparent !important; border-color: var(--ro11-line) !important;
}
body > div[style*="position: fixed"][style*="top: 20px"] {
  color: #fff8eb !important; background: var(--ro11-terra) !important;
  box-shadow: 0 4px 20px rgba(32,58,50,.18) !important;
  font-family: 'DM Sans',sans-serif !important;
  letter-spacing: 0 !important; text-transform: none !important;
}

/* R11 Ring lockups use one crisp, portable mark across every page. */
.ro11-brand-mark {
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
}
.ro11-brand-mark .ro11-ring-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.ro11-page-wordmark {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  max-width: calc(100vw - 112px);
  min-width: 0;
  white-space: nowrap;
}
.ro11-page-logo {
  display: block;
  flex: 0 0 auto;
  width: clamp(34px, 7vw, 46px);
  height: clamp(34px, 7vw, 46px);
  object-fit: contain;
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(15,37,30,.12);
}
.ro11-page-wordmark > span { min-width: 0; }
.fasting-brand-copy {
  max-width: calc(100vw - 112px);
  color: #f4f0e5 !important;
  text-shadow: none !important;
}
.fasting-brand-copy .fasting-logo-line {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px;
  white-space: nowrap;
  font-size: clamp(1.2rem, 3vw, 1.6rem) !important;
  letter-spacing: .1em !important;
}
.fasting-logo-line > span {
  color: #f4f0e5 !important;
  -webkit-text-fill-color: #f4f0e5 !important;
  background: none !important;
}
.fasting-logo-line .ro11-page-logo {
  width: clamp(34px, 7vw, 46px);
  height: clamp(34px, 7vw, 46px);
}
.login-mark .login-ring-logo {
  display: block;
  width: min(100%, 420px);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.journal-brand-row .ro11-page-wordmark,
.weightbite-brand-row .ro11-page-wordmark {
  font-size: clamp(1rem, 2.8vw, 1.35rem) !important;
}
.deepsearch-container .grok-header .deepsearch-wordmark {
  color: var(--ro11-ink) !important;
  font-size: clamp(.92rem, 3.8vw, 1.35rem) !important;
}
.deepsearch-wordmark .ro11-page-logo {
  width: clamp(34px, 8vw, 42px);
  height: clamp(34px, 8vw, 42px);
}
@media (max-width: 480px) {
  .ro11-page-wordmark { gap: 6px !important; max-width: calc(100vw - 96px); }
  .ro11-page-logo, .fasting-logo-line .ro11-page-logo { width: 32px; height: 32px; }
  .journal-brand-row .ro11-page-wordmark,
  .weightbite-brand-row .ro11-page-wordmark {
    font-size: clamp(.84rem, 4vw, 1.1rem) !important;
    transform: translateX(17px);
  }
  .fasting-brand-copy { max-width: calc(100vw - 96px); transform: translateX(16px); }
  .fasting-brand-copy .fasting-logo-line { font-size: clamp(.9rem, 4vw, 1.1rem) !important; }
  .deepsearch-container .grok-header { gap: 8px; }
  .deepsearch-wordmark { gap: 5px !important; }
}

/* Login-only Round 11 story lockup, set beneath the ring at every breakpoint. */
.login-visual {
  grid-template-rows: auto 1fr auto auto !important;
}
.login-brand-story {
  width: min(100%, 390px);
  margin: 2px auto 0;
  text-align: center;
}
.login-brand-story h2 {
  margin: 0 0 5px;
  color: var(--ro11-ink) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .015em;
  line-height: 1;
}
.login-brand-story p {
  max-width: 390px;
  margin: 0 auto;
  color: var(--ro11-ink-soft) !important;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .005em;
}
@media (max-width: 767px) {
  .login-container.login-page .login-visual {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: 100%;
    min-height: 0;
    text-align: center;
  }
  .login-container.login-page .login-visual-kicker {
    align-self: center;
    width: 100%;
  }
  .login-container.login-page .login-mark {
    width: clamp(64px, 19vw, 78px) !important;
    height: auto;
    flex: 0 0 auto;
  }
  .login-container.login-page .login-brand-story {
    width: min(100%, 290px);
    margin-top: 0;
  }
  .login-container.login-page .login-brand-story h2 {
    margin-bottom: 4px;
    font-size: clamp(22px, 6.5vw, 26px);
  }
  .login-container.login-page .login-brand-story p {
    width: 100%;
    max-width: 290px;
    font-size: 12.5px;
    line-height: 1.5;
  }
}