/* Plans & evaluations — Citron Intelligence, presentation only.
   Private-pilot access and payments are server-owned. Scope every treatment
   to the signed-in billing route; no checkout or account mutations. */

#app .billing-redesign {
  min-width:0;
}
#app .billing-redesign > .pagehead {
  margin-bottom: 25px;
}
#app .billing-access-summary {
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:23px 26px 21px;
  border:1px solid #41494D;
  border-radius:12px;
  background:#24282B;
  box-shadow:none;
}
#app .billing-access-top {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:start;
  column-gap:16px;
  row-gap:12px;
}
#app .billing-access-symbol {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:10px;
  background:#343C36;
  color:#D7E45B;
}
#app .billing-redesign .billing-icon {
  display:block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  color:inherit;
  fill:none;
  stroke:currentColor;
  overflow:visible;
  pointer-events:none;
}
#app .billing-redesign .billing-icon--feature {
  width:24px;
  height:24px;
  flex-basis:24px;
}
#app .billing-redesign .billing-icon--action {
  width:18px;
  height:18px;
  flex-basis:18px;
}
#app .billing-access-body {
  min-width:0;
}
#app .billing-access-eyebrow {
  display:block;
  margin-bottom:6px;
  font-size:10px;
  line-height:1.5;
  font-weight:700;
  letter-spacing:.11em;
  color:#AEB7B7;
}
#app .billing-access-body h2 {
  margin:0 0 5px;
  font-size:19px;
  line-height:1.3;
  letter-spacing:-.025em;
  color:#EEEDE8;
}
#app .billing-access-body p {
  margin:0;
  max-width:680px;
  font-size:13px;
  line-height:1.6;
  color:#C5CACA;
}
#app .billing-access-status {
  align-self:center;
  padding:6px 9px;
  border:1px solid #505A5B;
  border-radius:5px;
  color:#C9D0D0;
  font-size:11px;
  line-height:1.4;
  font-weight:600;
  white-space:nowrap;
}
#app .billing-access-summary[data-billing-access="available"] .billing-access-status {
  color:#D7E45B;
  border-color:#77814D;
}
#app .billing-access-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin-top:19px;
}
#app .billing-access-actions .billing-action {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:46px;
  max-width:100%;
  box-sizing:border-box;
  font-weight:600;
  font-size:13px;
  line-height:1.4;
  text-align:center;
  text-decoration:none;
  white-space:normal;
}
#app .billing-access-actions .billing-action--primary {
  padding:10px 18px;
  border:1px solid #D7E45B;
  border-radius:999px;
  background:#D7E45B;
  color:#1C1E21;
  -webkit-text-fill-color:#1C1E21;
}
#app .billing-access-actions .billing-action--primary:is(:hover,:focus-visible) {
  background:#E4EF80;
  border-color:#E4EF80;
  box-shadow:none;
  color:#1C1E21;
  -webkit-text-fill-color:#1C1E21;
}
#app .billing-access-actions .billing-action--secondary {
  padding:10px 17px;
  border:1px solid #687276;
  border-radius:999px;
  background:#262B2E;
  color:#EEEDE8;
  -webkit-text-fill-color:#EEEDE8;
  box-shadow:none;
}
#app .billing-access-actions .billing-action--secondary:hover {
  background:#32383B;
  border-color:#A1AAAD;
}
#app .billing-access-actions .billing-action--tertiary {
  padding:10px 7px;
  border:0;
  background:transparent;
  color:#C4CDCD;
  -webkit-text-fill-color:#C4CDCD;
  font-weight:500;
}
#app .billing-access-actions .billing-action--tertiary:hover {
  color:#EEEDE8;
  -webkit-text-fill-color:#EEEDE8;
  text-decoration:underline;
  text-underline-offset:4px;
}
#app .billing-access-actions .billing-action:focus-visible {
  outline:2px solid #D7E45B;
  outline-offset:3px;
}
#app .billing-access-footnote {
  margin:15px 0 0;
  color:#A3ACAE;
  font-size:11px;
  line-height:1.6;
}
#app .billing-redesign .packaging-options {
  margin-top:35px;
}
#app .billing-redesign .packaging-options > h2 {
  margin:0 0 7px;
  font-size:23px;
  line-height:1.35;
  letter-spacing:-.025em;
}
#app .billing-redesign .packaging-options > p {
  margin:0 0 20px;
  font-size:13px;
  line-height:1.6;
  color:#B7BFC0;
}
#app .billing-redesign .packaging-grid {
  gap:16px;
}
#app .billing-redesign .packaging-grid .billing-plan-card {
  min-width:0;
  padding:19px 20px 20px;
  border:1px solid #41494D;
  border-radius:10px;
  background:#23272A;
  box-shadow:none;
}
#app .billing-redesign .packaging-grid .billing-plan-card--free {
  border-color:#A5B35A;
  box-shadow:inset 0 2px 0 #D7E45B;
}
#app .billing-redesign .packaging-grid .billing-plan-card--starter,
#app .billing-redesign .packaging-grid .billing-plan-card--pro {
  background:#222629;
}
#app .billing-redesign .packaging-grid .pill {
  display:inline-block;
  align-self:flex-start;
  margin-bottom:15px;
  background:transparent;
  border:0;
  padding:0;
  color:#AEB7B7;
  font-size:10px;
  line-height:1.5;
  letter-spacing:.055em;
  font-weight:700;
  text-transform:uppercase;
}
#app .billing-redesign .packaging-grid .billing-plan-card--free .pill {
  color:#D7E45B;
}
#app .billing-plan-title {
  display:flex;
  align-items:center;
  gap:11px;
  min-height:28px;
}
#app .billing-plan-title h2 {
  margin:0;
  font-size:19px;
  line-height:1.3;
}
#app .billing-plan-card--free .billing-icon--feature {
  color:#D7E45B;
}
#app .billing-plan-card--starter .billing-icon--feature,
#app .billing-plan-card--pro .billing-icon--feature {
  color:#A3AEB0;
}
#app .billing-redesign .packaging-grid .usage-price {
  margin:16px 0 21px;
  font-size:31px;
  line-height:1.1;
  letter-spacing:-.05em;
}
#app .billing-redesign .packaging-grid .usage-price .fine {
  margin-top:5px;
  color:#9FA8AA;
  letter-spacing:0;
}
#app .billing-redesign .packaging-grid .planlist {
  margin:0 0 20px;
  line-height:1.65;
  color:#D1D6D6;
  font-size:12px;
}
#app .billing-redesign .packaging-grid .planlist li {
  margin-bottom:6px;
}
#app .billing-redesign .packaging-grid .billing-plan-card > .fine {
  margin:0;
  color:#A8B0B2;
  line-height:1.55;
  font-size:11px;
}
@media(max-width:850px) {
  #app .billing-access-top {
    grid-template-columns:44px minmax(0,1fr);
  }
  #app .billing-access-status {
    grid-column:2;
    justify-self:start;
  }
}
@media(max-width:600px) {
  #app .billing-access-summary {
    padding:19px 17px;
  }
  #app .billing-access-top {
    column-gap:12px;
  }
  #app .billing-access-body h2 {
    font-size:18px;
  }
  #app .billing-access-actions {
    align-items:stretch;
    gap:8px;
  }
  #app .billing-access-actions .billing-action--primary,
  #app .billing-access-actions .billing-action--secondary {
    flex:1 1 100%;
    min-height:48px;
  }
  #app .billing-access-actions .billing-action--tertiary {
    justify-content:flex-start;
  }
  #app .billing-redesign .packaging-grid .billing-plan-card {
    padding:18px;
  }
}
@media(prefers-reduced-motion:reduce) {
  #app .billing-access-actions .billing-action { transition:none; }
}
