/* Shared visual refinements for the Optivise website and Launch Pad. */
.company-page, .access-page, .admin-body, .planner-page, .owner-page {
  --ui-navy: #182747;
  --ui-muted: #52617a;
  --ui-line: #d9e2f0;
  --ui-focus: #0084c4;
  --ui-radius: 12px;
}
:where(.company-page, .access-page, .admin-body, .planner-page, .owner-page) :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}

/* Give the account note its own line and the navigation a separate grid track. */
.company-page .site-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  height: auto;
  min-height: 104px;
  gap: clamp(16px, 2vw, 34px);
  padding: 16px clamp(22px, 4vw, 76px);
}
.company-page .site-header .company-logo { width: clamp(165px, 14vw, 220px); }
.company-page .site-header nav {
  display: flex;
  width: auto;
  min-width: 0;
  justify-content: center;
  gap: clamp(14px, 1.7vw, 30px);
  padding: 0;
  border: 0;
  font-size: 13px;
}
.company-page .site-header nav a { white-space: nowrap; }
.company-page .site-header .header-actions { width: auto; flex-wrap: nowrap; align-items: start; gap: 14px; }
.company-page .site-header .language-switcher { margin-top: 2px; }
.company-page .site-header .nav-login {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.4;
  border-radius: 6px;
}
.company-page .site-header .nav-login span { margin-inline-start: 8px; }
.company-page .site-header .nav-account {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 248px;
  max-width: 100%;
  gap: 6px;
}
.company-page .nav-account-note {
  margin: 0;
  color: var(--ui-muted);
  font-size: 11px;
  line-height: 1.55;
  text-align: right;
  overflow-wrap: anywhere;
}

.company-page :is(.hero-copy, .hero-visual, .product-copy, .product-preview, .application-form, .service-card) { min-width: 0; }
.company-page :is(.hero-visual, .service-card, .product-preview, .application-form) { border-radius: var(--ui-radius); }
.company-page .service-card { display: flex; flex-direction: column; }
.company-page .service-card ul { margin-top: auto; padding-top: 16px; }
.company-page .service-card > p { margin-bottom: 18px; }
.company-page :is(.hero-actions, .product-actions, .site-footer > div) { flex-wrap: wrap; }
.company-page .product-actions { row-gap: 12px; }
.company-page .form-heading { align-items: baseline; gap: 8px 16px; flex-wrap: wrap; }
.company-page .apply-steps strong a { color: #1d2088; text-decoration: underline; text-underline-offset: .2em; }
.company-page .faq-list summary { gap: 14px; }
.company-page .faq-list summary span { flex-shrink: 0; }

.access-page .access-main { margin-block: clamp(28px, 6vw, 64px) 64px; }
.access-page .access-main h1 { line-height: 1.22; margin-bottom: 18px; }
.access-page .access-card {
  border-radius: var(--ui-radius);
  box-shadow: 0 12px 30px #1a355c09;
  padding: clamp(20px, 5vw, 34px);
}
.access-page .access-card h2 { font-size: clamp(21px, 4vw, 26px); margin: 4px 0 18px; line-height: 1.35; }
.access-page .account-options { gap: 6px 16px; align-items: center; }
.access-page #account-guest .account-options { border-bottom: 1px solid var(--ui-line); padding-bottom: 10px; margin-bottom: 20px; }
.access-page #account-guest .account-options a { display: inline-flex; min-height: 36px; align-items: center; font-size: 14px; }
.access-page .account-options a[aria-current="page"] { text-underline-offset: 4px; }
.access-page .access-card .access-footer { margin-bottom: 0; }
.access-page .access-card p { overflow-wrap: anywhere; }

.planner-page .planner-grid > *, .planner-page .field-row > *, .planner-page .top-meta { min-width: 0; }
.planner-page .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.planner-page .field-row.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.planner-page:lang(en-SG) .field-row.thirds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.planner-page .cloud-notice { align-items: center; gap: 12px 20px; border-radius: var(--ui-radius); }
.planner-page .cloud-notice #signed-user { overflow-wrap: anywhere; }
.planner-page .scenario-tab { white-space: nowrap; }
.planner-page .card { border-radius: var(--ui-radius); }
.planner-page .history-actions select { min-width: 0; }
.planner-page .table-scroll { max-width: 100%; overscroll-behavior-inline: contain; }
.planner-page .field-help-text { width: min(16rem, 65vw); }

.owner-page { background: #f3f6fc; color: var(--ui-navy); }
.owner-page .owner-card { display: flex; flex-direction: column; min-width: 0; }
.owner-page .owner-card strong { margin-top: auto; padding-top: 16px; }
.admin-body .admin-topbar, .admin-body .admin-card-heading { flex-wrap: wrap; }
.admin-body .admin-main > *, .admin-body .admin-card-heading > * { min-width: 0; }
.admin-body .app-filters { flex-wrap: wrap; }
.admin-body .app-filters > * { max-width: 100%; }
.admin-body .table-scroll { max-width: 100%; overscroll-behavior-inline: contain; }
.admin-body .card { border-radius: var(--ui-radius); }
.admin-body .dialog-actions { gap: 8px; }
.admin-body :is(.admin-detail, .page-heading, .admin-info) { overflow-wrap: anywhere; }

@media (max-width: 1150px) {
  .company-page .site-header { grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 10px; }
  .company-page .site-header nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; border-top: 1px solid var(--ui-line); }
}
@media (max-width: 620px) {
  .company-page .site-header { grid-template-columns: minmax(0, 1fr); padding: 14px 20px 8px; }
  .company-page .site-header .wordmark { display: flex; justify-content: flex-start; }
  .company-page .site-header .company-logo { width: 168px; }
  .company-page .site-header .header-actions { justify-content: space-between; width: 100%; gap: 10px; }
  .company-page .site-header .nav-account { width: min(240px, 61vw); }
  .company-page .site-header nav { grid-row: 3; justify-content: space-between; gap: 8px; font-size: 12px; }
  .company-page:lang(en-SG) .site-header nav { font-size: 11px; }
  .planner-page .topbar { height: auto; min-height: 58px; flex-wrap: wrap; padding-block: 10px; }
  .planner-page .cloud-notice { flex-wrap: wrap; align-items: flex-start; }
  .planner-page .cloud-actions { flex-direction: row; flex-wrap: wrap; gap: 8px 12px; }
  .planner-page .scenario-toolbar { gap: 8px; }
  .planner-page .field-row.thirds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-body .admin-card-heading { padding: 16px; }
  .admin-body .admin-info { padding: 14px 16px; }
}
@media (max-width: 360px) {
  .company-page .site-header nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 10px; }
  .company-page .site-header nav a { padding-block: 8px; }
  .planner-page .field-row { gap: 8px; }
}


@media (max-width: 780px) {
  .company-page .hero-lead br { display: initial; }
}

.access-page .account-options a { color: #1d2088; }
.admin-body .lead-list-card > :is(#lead-note, #lead-error, #lead-records, .dialog-actions) { margin-inline: clamp(16px, 3vw, 24px); }
.admin-body .lead-list-card #lead-note { color: var(--ui-muted); line-height: 1.65; }
.admin-body .lead-list-card > .dialog-actions { flex-wrap: wrap; align-items: center; padding-block: 14px 18px; }

@media (max-width: 780px) {
  .planner-page .page-heading { flex-wrap: wrap; }
  .planner-page .export-button {
    width: auto;
    height: auto;
    min-height: 40px;
    margin-top: 0;
    padding: 8px 12px;
    font-size: 12px;
    gap: 8px;
  }
  .planner-page .export-button::after { content: none; }
}