/* Clinic-owner account and billing surfaces. Uses the site tokens so light,
   dark and responsive behavior stay native to LogBlues.com. */

.account-shell { min-height:66vh; }
.account-intro { padding:78px 0 72px; }
.account-intro-grid {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);
  gap:64px; align-items:center;
}
.account-intro .lead, .billing-help .lead {
  margin:24px 0 0; max-width:62ch; font-size:clamp(18px,2vw,21px); color:var(--ink-2);
}
.account-trustline { display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px; }
.account-trustline span {
  display:inline-flex; align-items:center; gap:9px; color:var(--ink-3); font-size:14px;
}
.account-trustline span::before {
  content:""; width:7px; height:7px; border-radius:50%; background:var(--good);
}
.account-card, .account-plan-card {
  background:var(--surface); border:1px solid var(--grid); border-radius:18px;
  padding:28px; box-shadow:var(--shadow);
}
.account-card h2 { font-size:25px; }
.account-card-icon {
  display:grid; place-items:center; width:42px; height:42px; margin-bottom:22px;
  border-radius:12px; color:var(--leaf); background:color-mix(in srgb,var(--leaf) 10%,transparent);
  font-size:22px; font-weight:700;
}
.account-login-card p { font-size:15px; color:var(--ink-3); }
.account-primary, .account-secondary {
  display:inline-flex; align-items:center; justify-content:center; min-height:46px;
  padding:11px 18px; border-radius:11px; cursor:pointer; font:inherit;
  font-size:15px; font-weight:650; transition:transform .14s ease,filter .14s ease,border-color .14s ease;
}
.account-primary { color:#fff; background:var(--accent); border:1px solid var(--accent); }
.account-secondary { color:var(--ink); background:var(--surface); border:1px solid var(--grid); }
.account-primary:hover, .account-secondary:hover { transform:translateY(-1px); filter:brightness(1.04); }
.account-primary:focus-visible, .account-secondary:focus-visible {
  outline:2px solid var(--accent); outline-offset:3px;
}
.account-primary:disabled, .account-secondary:disabled { opacity:.55; cursor:wait; transform:none; }
.account-login-card .account-primary { width:100%; margin-top:12px; }
.account-help-row {
  display:flex; justify-content:space-between; gap:16px; margin-top:22px; padding-top:18px;
  border-top:1px solid var(--grid); font-size:14px;
}
.account-feature-band { padding:28px 0; background:var(--raised); }
.account-feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.account-feature-grid article { display:grid; gap:2px; }
.account-feature-grid strong { color:var(--ink); font-size:15px; }
.account-feature-grid span { color:var(--ink-3); font-size:13.5px; }

.account-dashboard-head { padding:58px 0 38px; border-bottom:1px solid var(--border); }
.account-dashboard-head h1 { font-size:clamp(34px,4.8vw,48px); }
.account-title-row { display:flex; justify-content:space-between; align-items:end; gap:24px; }
.account-owner-line { margin:15px 0 0; color:var(--ink-3); }
.account-dashboard { padding-top:38px; padding-bottom:72px; }
.account-loading-card, .account-empty-card { max-width:650px; margin:0 auto; text-align:center; }
.account-loading-card { display:flex; align-items:center; justify-content:center; gap:14px; }
.account-spinner {
  width:22px; height:22px; border:2px solid var(--grid); border-top-color:var(--accent);
  border-radius:50%; animation:account-spin .8s linear infinite;
}
@keyframes account-spin { to { transform:rotate(360deg); } }

.account-status {
  display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:22px;
  padding:20px 22px; border:1px solid color-mix(in srgb,var(--good) 28%,var(--grid));
  border-radius:15px; background:color-mix(in srgb,var(--good) 6%,var(--surface));
}
.account-status > div { display:grid; grid-template-columns:auto 1fr; column-gap:11px; align-items:center; }
.account-status-dot { grid-row:1/3; width:9px; height:9px; border-radius:50%; background:var(--good); }
.account-status strong { color:var(--ink); }
.account-status p { margin:1px 0 0; font-size:14px; color:var(--ink-3); }
.account-status[data-state="grace"] {
  border-color:rgba(180,113,8,.3); background:rgba(180,113,8,.07);
}
.account-status[data-state="grace"] .account-status-dot { background:#b47108; }
.account-status[data-state="blocked"] {
  border-color:rgba(177,54,63,.3); background:rgba(177,54,63,.07);
}
.account-status[data-state="blocked"] .account-status-dot { background:#b1363f; }
.account-status[data-state="inactive"] {
  border-color:var(--grid); background:var(--raised);
}
.account-status[data-state="inactive"] .account-status-dot { background:var(--ink-3); }

.account-grid-main { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.account-label {
  margin:0 0 10px; color:var(--ink-3); font-size:11.5px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
}
.account-plan-line { display:flex; align-items:baseline; justify-content:space-between; gap:18px; }
.account-plan-line strong { color:var(--ink); font-size:15px; }
.account-facts { margin:24px 0 0; }
.account-facts div { display:flex; justify-content:space-between; gap:18px; padding:11px 0; border-top:1px solid var(--grid); }
.account-facts dt { color:var(--ink-3); font-size:14px; }
.account-facts dd { margin:0; color:var(--ink); font-size:14px; text-align:right; }
.account-muted { color:var(--ink-3); font-size:14.5px; }

.account-plans { margin-top:46px; }
.account-section-heading { display:flex; justify-content:space-between; align-items:end; gap:36px; margin-bottom:20px; }
.account-section-heading p:last-child { max-width:48ch; color:var(--ink-3); font-size:14.5px; }
.account-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; align-items:stretch; }
.account-plan-card { display:flex; flex-direction:column; }
.account-plan-card h3 { margin:0 0 10px; font-size:32px; }
.account-plan-card h3 span { font-size:14px; color:var(--ink-3); font-weight:500; }
.account-plan-card p:not(.account-label) { flex:1; color:var(--ink-3); font-size:14px; }
.account-enterprise-link { display:inline-block; margin-top:14px; color:var(--leaf); font-size:13px; font-weight:700; }
.account-plan-card.featured { border-color:color-mix(in srgb,var(--leaf) 42%,var(--grid)); box-shadow:var(--shadow-lift); }
.account-plan-card { position:relative; }
.account-plan-card.is-current {
  border-color:var(--leaf); box-shadow:0 0 0 2px color-mix(in srgb,var(--leaf) 20%,transparent),var(--shadow-lift);
}
.account-plan-card.is-current::before {
  content:"Current plan"; position:absolute; right:18px; top:18px; padding:5px 9px;
  border-radius:999px; color:var(--leaf); background:color-mix(in srgb,var(--leaf) 13%,var(--surface));
  font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
}
.account-plan-card [data-choose-plan]:disabled {
  opacity:1; cursor:default; color:var(--leaf); border-color:color-mix(in srgb,var(--leaf) 48%,var(--grid));
  background:color-mix(in srgb,var(--leaf) 10%,var(--surface));
}
.account-actions-row { display:flex; align-items:center; gap:24px; margin-top:22px; }
.account-support { display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); gap:28px; margin-top:22px; }
.account-support form { display:grid; gap:10px; align-content:start; }
.account-support label { color:var(--ink); font-size:14px; font-weight:650; }
.account-support select {
  width:100%; min-height:46px; padding:10px 38px 10px 12px; border:1px solid var(--grid);
  border-radius:11px; color:var(--ink); background:var(--surface); font:inherit; font-size:14px;
}
.account-support select:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.account-support-result { grid-column:1/-1; min-height:1.5em; margin:0; color:var(--ink-3); font-size:14px; }
.account-support-cases { grid-column:1/-1; padding-top:18px; border-top:1px solid var(--grid); }
.account-support-cases ul { display:grid; gap:8px; margin:12px 0 0; padding:0; list-style:none; }
.account-support-cases li { display:flex; justify-content:space-between; gap:18px; color:var(--ink-3); font-size:13.5px; }
.account-support-cases li strong { color:var(--ink); }
.account-failsafes { margin-top:52px; }
.account-failsafe-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr); gap:18px; }
.account-failsafe-title { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.account-failsafe-grid h3, .account-issue-card h3 { margin:0; font-size:22px; }
.account-readiness { width:max-content; padding:6px 9px; border:1px solid color-mix(in srgb,#ba7a16 45%,var(--grid)); border-radius:999px; color:#9a620d; background:color-mix(in srgb,#ba7a16 10%,var(--surface)); font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.account-guide { margin:20px 0; padding:15px 17px; border:1px solid var(--grid); border-radius:12px; background:var(--raised); }
.account-guide summary { color:var(--ink); font-size:14px; font-weight:750; cursor:pointer; }
.account-guide ol { display:grid; gap:10px; margin:15px 0; padding-left:22px; color:var(--ink-3); font-size:13.5px; line-height:1.55; }
.account-guide p { margin:0; color:var(--ink-3); font-size:13.5px; line-height:1.55; }
.account-clean-list { display:grid; gap:9px; margin:19px 0 24px; padding-left:19px; color:var(--ink-3); font-size:13.5px; }
.account-enterprise-card { display:flex; flex-direction:column; }
.account-enterprise-card .account-secondary { margin-top:auto; }
.account-issue-card { display:grid; grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr); gap:30px; margin-top:18px; }
.account-issue-card form { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; }
.account-issue-card label { color:var(--ink); font-size:13px; font-weight:700; }
.account-issue-card label[for="issue-error"], .account-issue-card label[for="issue-steps"], .account-issue-card label[for="issue-screenshot"],
.account-issue-card textarea, .account-issue-card input[type="file"], .account-confirm, .account-issue-card button { grid-column:1/-1; }
.account-issue-card select, .account-issue-card textarea, .account-issue-card input[type="file"] { width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--grid); border-radius:10px; color:var(--ink); background:var(--surface); font:inherit; font-size:13px; }
.account-issue-card textarea { resize:vertical; }
.account-issue-card input[type="file"] { padding:9px; color:var(--ink-3); }
.account-confirm { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--grid); border-radius:10px; background:var(--raised); color:var(--ink-3)!important; font-weight:500!important; line-height:1.45; }
.account-confirm input { margin-top:3px; }
.account-issue-card .account-support-result { align-self:end; }
.account-feedback { min-height:1.5em; margin-top:16px; font-size:14px; color:var(--ink-3); }
.account-feedback.is-error { color:#a8343d; }
.account-create-button, .account-demo-button { width:100%; margin-top:10px; }
.account-demo-note { margin:10px 0 0; color:var(--ink-3); font-size:12px; line-height:1.5; }
.account-demo-modal-open { overflow:hidden; }
.account-demo-portal {
  position:fixed; z-index:100; left:50%; top:50%; width:min(900px,calc(100vw - 32px));
  max-height:calc(100vh - 32px); overflow:auto; transform:translate(-50%,-50%);
  margin:0; border-color:color-mix(in srgb,var(--leaf) 38%,var(--grid));
  box-shadow:0 0 0 100vmax rgba(6,12,24,.58),0 26px 70px rgba(6,12,24,.28);
}
.account-demo-portal-head { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.account-demo-portal-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; }
.account-demo-portal-grid article { display:grid; gap:7px; padding:16px; border:1px solid var(--grid); border-radius:12px; background:var(--raised); }
.account-demo-portal-grid span, .account-demo-portal-grid small { color:var(--ink-3); font-size:12px; }
.account-demo-invoice { display:grid; grid-template-columns:.8fr 1.5fr .6fr .5fr auto; align-items:center; gap:14px; margin-top:18px; padding:15px 0; border-top:1px solid var(--grid); border-bottom:1px solid var(--grid); font-size:13px; }
.account-demo-invoice em { width:max-content; padding:5px 8px; border-radius:999px; background:color-mix(in srgb,var(--leaf) 10%,transparent); color:var(--leaf); font-style:normal; font-weight:700; }
.account-demo-invoice button { border:0; background:transparent; color:var(--leaf); font-weight:700; cursor:pointer; }
.account-link-button { text-decoration:none; }
.account-link-button:hover { text-decoration:none; }

.billing-help-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(290px,.65fr); gap:20px; padding-top:42px; padding-bottom:76px; align-items:start; }
.billing-steps { list-style:none; padding:0; margin:0 0 28px; }
.billing-steps li { display:grid; grid-template-columns:38px 1fr; gap:16px; padding:18px 0; border-top:1px solid var(--grid); }
.billing-steps li:first-child { border-top:0; padding-top:0; }
.billing-steps li > span {
  display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
  color:var(--leaf); background:color-mix(in srgb,var(--leaf) 10%,transparent); font-weight:700;
}
.billing-steps h2 { font-size:20px; margin:2px 0 5px; }
.billing-steps p { color:var(--ink-3); font-size:14.5px; }
.billing-continuity { position:sticky; top:88px; }
.billing-continuity > h2 { margin-bottom:20px; }
.billing-recovery-visual { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.billing-recovery-step {
  display:grid; justify-items:center; gap:9px; min-height:126px; padding:18px 10px 14px;
  border:1px solid var(--grid); border-radius:14px; background:var(--raised);
  color:var(--ink); font-size:13px; font-weight:700; text-align:center;
}
.billing-recovery-icon {
  display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  color:var(--leaf); background:color-mix(in srgb,var(--leaf) 10%,transparent);
}
.billing-recovery-icon svg { width:32px; height:32px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.billing-policy-summary {
  display:grid; grid-template-columns:minmax(220px,.8fr) minmax(300px,1.25fr) minmax(220px,.75fr);
  gap:34px; align-items:start; margin-bottom:76px; padding-top:30px; padding-bottom:30px;
  border-top:1px solid var(--grid); border-bottom:1px solid var(--grid);
}
.billing-policy-summary h2 { max-width:360px; margin-bottom:0; font-size:22px; }
.billing-policy-copy { display:grid; gap:10px; }
.billing-policy-copy p { margin:0; color:var(--ink-3); font-size:13.5px; line-height:1.6; }
.billing-no-call { padding-left:24px; border-left:1px solid var(--grid); }
.billing-no-call strong { display:block; margin-bottom:5px; }
.billing-no-call p { margin:0; color:var(--ink-3); font-size:13.5px; line-height:1.55; }

@media (max-width:860px) {
  .account-intro-grid, .billing-help-grid, .account-support, .account-failsafe-grid, .account-issue-card, .billing-policy-summary { grid-template-columns:1fr; }
  .account-intro-grid { gap:34px; }
  .account-plan-grid { grid-template-columns:1fr; }
  .billing-continuity { position:static; }
  .billing-no-call { padding-left:0; padding-top:18px; border-left:0; border-top:1px solid var(--grid); }
}
@media (max-width:700px) {
  .account-intro { padding:54px 0; }
  .account-feature-grid, .account-grid-main { grid-template-columns:1fr; }
  .account-title-row, .account-section-heading, .account-status { align-items:flex-start; flex-direction:column; }
  .account-signout { align-self:flex-start; }
  .account-plan-line { display:block; }
  .account-actions-row { align-items:flex-start; flex-direction:column; }
  .account-card, .account-plan-card { padding:22px; }
  .account-demo-portal-head { display:grid; }
  .account-demo-portal-grid { grid-template-columns:1fr; }
  .account-demo-invoice { grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion:reduce) {
  .account-primary, .account-secondary { transition:none; }
  .account-spinner { animation:none; border-top-color:var(--grid); }
}