.login-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.login-story {
  background: #203e36;
  color: #faf7ef;
  padding: 70px 12%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-story h1 {
  font:
    clamp(40px, 5vw, 68px)/1.1 "Cormorant Garamond",
    Georgia;
  margin: 25px 0;
}
.login-story p {
  color: #c4d0bd;
  line-height: 1.9;
  font-size: 14px;
}
.login-story .eyebrow {
  color: #baa879;
}
.login-art {
  font: 90px "Cormorant Garamond";
  color: #cbb880;
  border: 1px solid #cbb88070;
  border-radius: 160px 160px 0 0;
  padding: 65px 30px;
  max-width: 250px;
  text-align: center;
  margin: 30px 0 50px;
}
.login-panel {
  padding: 80px max(30px, 12%);
  align-self: center;
}
.login-panel .brand {
  text-decoration: none;
  display: block;
  margin-bottom: 18px;
}
.login-panel h2 {
  font: 43px "Cormorant Garamond";
  margin: 28px 0 12px;
}
.login-panel button {
  width: 100%;
  padding: 15px;
}
.login-owner {
  border-top: 1px solid var(--line);
  padding: 20px 0;
  margin-top: 30px;
  font-size: 12px;
}
.portal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 24px 36px;
  background: white;
  border-bottom: 1px solid var(--line);
}
.account-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.account-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 23px;
}
.account-card h3 {
  font: 28px "Cormorant Garamond";
  margin: 0 0 8px;
}
.status-active {
  background: #e5efdc;
  color: #486738;
}
.status-expired,
.status-pending {
  background: #fff1d6;
  color: #926a2e;
}
.status-suspended {
  background: #fae8e3;
  color: #a04436;
}
.billing-strip {
  margin: 0;
  padding: 12px 32px;
  background: #eef1e7;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 15px;
  justify-content: space-between;
  font-size: 12px;
}
.billing-strip.expired {
  background: #fff0df;
}
.portal-modal {
  max-width: 690px;
}
.feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 12px;
}
.feature-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.history-table {
  font-size: 12px;
}
.history-table th,
.history-table td {
  padding: 12px;
}
.metric-large {
  font: 50px "Cormorant Garamond";
  margin: 12px 0;
}
.notice code {
  font-size: 12px;
}
.safe-note {
  color: #856b36;
  font-size: 12px;
  line-height: 1.7;
}
.feature-locked {
  opacity: 0.5;
}
.retention-note {
  font-size: 12px;
  color: #73806d;
  line-height: 1.8;
}
.account-summary {
  max-width: 800px;
  margin: auto;
}
.accounts-empty {
  background: white;
  padding: 50px;
  text-align: center;
  border: 1px dashed #b9c5b0;
  border-radius: 12px;
}
.result {
  font-size: 13px;
  line-height: 1.8;
  color: #9d4940;
}
@media (max-width: 1000px) {
  .account-grid {
    grid-template-columns: 1fr 1fr;
  }
  .login-story {
    padding: 60px 10%;
  }
}
@media (max-width: 650px) {
  .login-layout {
    display: block;
  }
  .login-story {
    display: none;
  }
  .login-panel {
    padding: 55px 26px;
  }
  .portal-header {
    padding: 20px;
    flex-wrap: wrap;
  }
  .account-grid {
    grid-template-columns: 1fr;
  }
  .billing-strip {
    padding: 12px 20px;
    flex-wrap: wrap;
  }
  .feature-grid {
    grid-template-columns: 1fr;
  }
  .portal-modal {
    padding: 20px;
  }
}

.login-layout { grid-template-columns: repeat(2,minmax(0,1fr)); }
.login-panel,.login-story,.account-card,.account-summary { min-width: 0; overflow-wrap: anywhere; }
.account-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,290px),1fr)); }
.portal-header { flex-wrap: wrap; }
.account-card .actions button { flex: 1 1 125px; }
.feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.feature-grid label { align-items: flex-start; overflow-wrap: anywhere; }
.feature-grid input { flex: 0 0 17px; }
@media(max-width: 850px) { .login-panel { padding: 48px 28px; } .login-story { padding: 48px 28px; } }
@media(max-width: 650px) {
  .feature-grid { grid-template-columns: minmax(0,1fr); }
  .portal-header > .actions { width: 100%; }
  .portal-header .actions > * { flex: 1 1 auto; text-align: center; }
  .accounts-empty { padding: 30px 20px; }
}

/* Keep sign-out easy to find and tap in every authenticated portal. */
.logout-button, .portal-header #logout { min-height:44px; padding:10px 18px; border:1px solid #9a5144; background:#fff4f0; color:#79392d; font-weight:600; white-space:nowrap; flex:0 0 auto; }
.logout-button:hover, .portal-header #logout:hover { background:#f8e4dc; }
.logout-button:focus-visible, .portal-header #logout:focus-visible { outline:3px solid #9a5144; outline-offset:3px; }