.billing-wrap {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 34px 0 64px;
  color: #17313a;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.billing-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  margin-bottom: 24px;
}

.billing-logo { width: min(310px, 78vw); }
.billing-trial-note { max-width: 620px; margin: 4px 0 0; color: #5c7079 !important; font-size: 15px !important; }
.billing-help-links { align-self: start; display: flex; gap: 12px 20px; padding-top: 8px; }
.billing-help-links a { font-size: 14px; text-decoration-thickness: 1px; text-underline-offset: 4px; }

.billing-purpose {
  margin: 0 0 28px;
  overflow: hidden;
  border: 1px solid #cfe0db;
  border-radius: 22px;
  background: linear-gradient(145deg, #fff 0%, #f2faf7 100%);
  box-shadow: 0 18px 50px rgba(19, 69, 58, .08);
}
.billing-purpose .home-purpose-intro { padding: 30px 32px 24px; }
.billing-purpose .home-purpose-intro h2 {
  max-width: 100%;
  margin: 0 0 12px;
  font-size: clamp(27px, 3.4vw, 38px);
  line-height: 1.13;
  letter-spacing: -.025em;
}
.billing-purpose .home-purpose-intro > p { max-width: 100%; margin: 0; font-size: 16px; line-height: 1.65; }
.billing-purpose .home-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #d8e7e2; }
.billing-purpose .home-benefits article {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 22px 24px;
  border-right: 1px solid #d8e7e2;
  background: rgba(255, 255, 255, .7);
}
.billing-purpose .home-benefits article:last-child { border-right: 0; }
.billing-purpose .benefit-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #176b5a; color: white; font-weight: 800; }
.billing-purpose .home-benefits h3 { margin: 1px 0 5px; font-size: 16px; }
.billing-purpose .home-benefits p { margin: 0; font-size: 13px; line-height: 1.55; }
.billing-purpose .home-privacy-note { margin: 0; padding: 13px 32px; border-top: 1px solid #d8e7e2; background: #edf7f4; font-size: 12px; }

.auth-grid,
.plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 22px 0; }
.auth-grid > .card,
.plan-card,
.account-summary,
.google-link-panel {
  border: 1px solid #d5e3df;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(20, 57, 49, .07);
}
.auth-grid > .card { padding: 28px; }
.auth-grid h2 { margin: 6px 0 22px; font-size: 25px; letter-spacing: -.02em; }
.auth-grid label { margin: 17px 0; }
.auth-grid input,
.auth-grid select { min-height: 48px; border-color: #abc1ba; background: #fff; }
.auth-grid input:focus,
.auth-grid select:focus { outline: 3px solid rgba(23, 107, 90, .15); border-color: #176b5a; }
.auth-grid .check { margin: 19px 0; padding: 14px; align-items: flex-start; line-height: 1.5; }
.auth-grid .error { margin: 8px 0; }

.auth-grid form > button.full,
.google-button-slot {
  width: min(100%, 400px);
  margin-inline: auto;
}
.auth-grid form > button.full { display: block; min-height: 44px; border-radius: 10px; }
.google-auth-block { margin-top: 23px; }
.auth-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; color: #718188; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.auth-divider::before,
.auth-divider::after { content: ""; height: 1px; flex: 1; background: #d8e4e0; }

.google-button-slot {
  position: relative;
  height: 44px;
  min-height: 44px;
  max-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  border: 1px solid #747775;
  border-radius: 10px;
  background: #fff;
  color: #1f1f1f;
}
.google-button-slot::before { content: ""; position: absolute; z-index: 2; left: 15px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); background: url("icons/google-g.svg") center/18px 18px no-repeat; pointer-events: none; }
.google-button-slot::after { content: attr(data-google-label); position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; padding: 0 42px; color: #1f1f1f; font: 600 14px/20px Roboto, Arial, sans-serif; letter-spacing: .1px; white-space: nowrap; pointer-events: none; }
.google-button-slot > div { position: absolute !important; z-index: 3; inset: 0 !important; width: 100% !important; max-width: 400px !important; height: 44px !important; max-height: 44px !important; overflow: hidden !important; opacity: .001; }
.google-button-slot iframe { display: block !important; width: 100% !important; max-width: 400px !important; max-height: 44px !important; }
.google-button-slot [role="button"] {
  width: 100% !important;
  max-width: 400px !important;
  min-height: 40px !important;
  max-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  font-size: 14px !important;
  line-height: 20px !important;
}
.google-button-slot svg,
.google-button-slot img { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; flex: 0 0 18px !important; }
.google-button-disabled { pointer-events: none; opacity: .5; filter: grayscale(.25); }
.google-button-slot:hover { border-color: #1f1f1f; background: #f8faff; box-shadow: 0 1px 2px rgba(60,64,67,.2); }
.google-button-slot:focus-within { outline: 3px solid rgba(66,133,244,.25); outline-offset: 2px; }
.google-auth-block [role="status"] { min-height: 1.4em; margin: 9px auto 0; max-width: 400px; color: #9c342f; font-weight: 650; }

.account-summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 25px 28px; }
.account-summary h2 { margin: 5px 0; overflow-wrap: anywhere; }
.google-link-panel { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 400px); align-items: center; gap: 14px 26px; padding: 24px 28px; }
.google-link-panel h3 { margin: 4px 0; }
.google-link-panel > p { grid-column: 1/-1; margin: 0; }
.google-button-slot.hidden { display: none; }

.plan-card { padding: 26px 28px; }
.plan-card h2 { margin: 7px 0 18px; font-size: 18px; }
.plan-card h2 span { color: #176b5a; font-size: 38px; letter-spacing: -.03em; }
.plan-card ul { margin: 0 0 18px; padding-left: 21px; }
.plan-card li { margin: 9px 0; }
.subscription-banner { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 16px auto 0; max-width: 1160px; padding: 12px 20px; border: 1px solid #edcf95; border-radius: 12px; background: #fff4df; }
.subscription-banner.active-plan { border-color: #bdddd3; background: #edf8f4; }
.subscription-banner p { margin: 0; }
.readonly-mode [data-write-control] { opacity: .55; }
.support-contact { margin-top: 24px; }

@media (max-width: 760px) {
  .billing-wrap { width: 100%; padding: max(22px, env(safe-area-inset-top)) 15px calc(48px + env(safe-area-inset-bottom)); }
  .billing-header { grid-template-columns: 1fr; gap: 12px; }
  .billing-help-links { justify-content: flex-start; padding: 0; }
  .billing-purpose { border-radius: 18px; }
  .billing-purpose .home-purpose-intro { padding: 23px 20px 19px; }
  .billing-purpose .home-purpose-intro h2 { font-size: 27px; }
  .billing-purpose .home-purpose-intro > p { font-size: 15px; }
  .billing-purpose .home-benefits { grid-template-columns: 1fr; }
  .billing-purpose .home-benefits article { padding: 17px 20px; border-right: 0; border-bottom: 1px solid #d8e7e2; }
  .billing-purpose .home-benefits article:last-child { border-bottom: 0; }
  .billing-purpose .home-privacy-note { padding: 14px 20px; }
  .auth-grid,
  .plan-grid { grid-template-columns: 1fr; gap: 16px; }
  .auth-grid > .card,
  .plan-card { padding: 22px 18px; }
  .auth-grid h2 { font-size: 23px; }
  .account-summary,
  .subscription-banner { align-items: stretch; flex-direction: column; }
  .google-link-panel { grid-template-columns: 1fr; padding: 22px 18px; }
  .google-button-slot { width: 100%; }
}

@media (max-width: 390px) {
  .billing-wrap { padding-inline: 11px; }
  .billing-logo { width: min(280px, 82vw); }
  .billing-purpose .home-purpose-intro h2 { font-size: 24px; }
}