:root {
  --sos-primary-teal: #0E6B57;
  --sos-sage: #E6F1E4;
  --sos-cream: #FAF8F2;
  --sos-surface: #FFFFFF;
  --sos-ink: #1F2A26;
  --sos-text-gray: #4A4A4A;
  --sos-text-secondary: #8A8A85;
  --sos-border: #E8E5DD;
  --sos-success-green: #1F8A5A;
  --sos-destructive-red: #C75146;
  --sos-coral: #E9876B;
  --sos-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sos-radius-card: 16px;
  --sos-shadow-chrome: 0 6px 18px rgba(31, 42, 38, 0.14);
}

* { box-sizing: border-box; }

html { background: var(--sos-cream); }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--sos-ink);
  background: linear-gradient(180deg, var(--sos-primary-teal) 0 330px, var(--sos-cream) 330px 100%);
  font-family: var(--sos-font);
  -webkit-font-smoothing: antialiased;
}

.page-shell { width: min(100%, 720px); margin: 0 auto; padding-bottom: max(24px, env(safe-area-inset-bottom)); }

.hero { color: var(--sos-surface); padding: max(22px, env(safe-area-inset-top)) 20px 42px; text-align: center; }

.brand { display: inline-flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; }

.brand-mark {
  display: grid; place-items: center; width: 33px; height: 33px; border: 1.5px solid rgba(255,255,255,.72);
  border-radius: 50%; font-size: 9px; font-weight: 800; letter-spacing: .4px;
}

.eyebrow { margin: 36px 0 9px; color: var(--sos-sage); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
h1 { max-width: 520px; margin: 0 auto; font-size: clamp(31px, 9vw, 44px); line-height: 1.08; letter-spacing: -.8px; }
.price-line { min-height: 24px; margin: 14px 0 0; color: rgba(255,255,255,.86); font-size: 17px; line-height: 24px; letter-spacing: -.3px; }

.checkout-card {
  position: relative; min-height: 510px; margin: -20px 12px 0; padding: 8px; overflow: hidden;
  background: var(--sos-surface); border: 1px solid var(--sos-border); border-radius: 20px; box-shadow: var(--sos-shadow-chrome);
}

.checkout-container { min-width: 0; min-height: 450px; }
.trust-banner { position: relative; z-index: 3; display: block; width: 100%; height: auto; border-radius: 14px; background: #F8F5E5; margin-bottom: 8px; }
.hero-banner { max-width: 420px; margin: 0 auto 20px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
/* Checkout page: the trust banner IS the hero. A short teal band crosses
   behind the banner card; the offer line sits below on cream in dark ink. */
.checkout-page { background: linear-gradient(180deg, var(--sos-primary-teal) 0 170px, var(--sos-cream) 170px 100%); }
.checkout-page .hero { color: var(--sos-ink); padding-bottom: 24px; }
.checkout-page h1 { color: var(--sos-primary-teal); font-size: clamp(25px, 6.6vw, 33px); }
.checkout-page .price-line { color: var(--sos-text-gray); }
.brand-logo { width: 30px; height: 30px; border-radius: 8px; display: block; }
.loading { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; justify-items: center; background: var(--sos-surface); color: var(--sos-text-gray); }
.loading[hidden] { display: none; }
.spinner { width: 30px; height: 30px; border: 3px solid var(--sos-sage); border-top-color: var(--sos-primary-teal); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.state-panel { min-height: 494px; padding: 48px 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.state-panel[hidden] { display: none; }
.state-icon { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 22px; border-radius: 50%; font-size: 38px; font-weight: 700; }
.success-icon { color: var(--sos-success-green); background: var(--sos-sage); }
.error-icon { color: var(--sos-destructive-red); background: color-mix(in srgb, var(--sos-coral) 16%, white); }
.state-panel h2 { max-width: 470px; margin: 0; font-size: 26px; line-height: 1.18; letter-spacing: -.45px; }
.state-panel p { margin: 12px 0 26px; color: var(--sos-text-gray); font-size: 16px; line-height: 23px; }
.primary-button { width: 100%; min-height: 52px; padding: 15px 20px; border: 0; border-radius: 999px; color: white; background: var(--sos-primary-teal); font: 600 17px/20px var(--sos-font); text-decoration: none; cursor: pointer; }
.primary-button:focus-visible, a:focus-visible { outline: 3px solid var(--sos-coral); outline-offset: 3px; }
.primary-button:disabled { opacity: .65; cursor: wait; }

.manage-shell { width: min(100%, 680px); }
.manage-hero { padding-bottom: 48px; }
.manage-card {
  position: relative; min-height: 360px; margin: -20px 12px 0; padding: 18px;
  background: var(--sos-surface); border: 1px solid var(--sos-border); border-radius: 20px; box-shadow: var(--sos-shadow-chrome);
}
.manage-loading { min-height: 358px; border-radius: 20px; }
.compact-state { min-height: 322px; padding-top: 30px; padding-bottom: 30px; }
.neutral-icon { color: var(--sos-primary-teal); background: var(--sos-sage); font-family: Georgia, serif; font-size: 34px; }
.subscription-card { padding: 20px 2px; }
.subscription-card + .subscription-card { border-top: 1px solid var(--sos-border); }
.subscription-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.subscription-heading h2 { margin: 0; font-size: 23px; line-height: 1.2; letter-spacing: -.35px; }
.status-chip { flex: 0 0 auto; padding: 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-active, .status-trialing { color: var(--sos-primary-teal); background: var(--sos-sage); }
.status-past_due { color: #8A3A33; background: color-mix(in srgb, var(--sos-coral) 18%, white); }
.subscription-card dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 18px; margin: 22px 0; padding: 17px 0; border-block: 1px solid var(--sos-border); }
.subscription-card dt { color: var(--sos-text-secondary); }
.subscription-card dd { margin: 0; color: var(--sos-ink); font-weight: 600; text-align: right; }
.subscription-actions { display: grid; gap: 11px; }
.secondary-button, .text-button { border: 0; font-family: var(--sos-font); cursor: pointer; }
.secondary-button { min-height: 48px; padding: 12px 18px; border: 1px solid var(--sos-border); border-radius: 999px; color: var(--sos-text-gray); background: var(--sos-surface); font-size: 16px; font-weight: 600; }
.text-button { margin: 3px auto 0; padding: 8px; color: var(--sos-text-secondary); background: transparent; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; }
.secondary-button:focus-visible, .text-button:focus-visible { outline: 3px solid var(--sos-coral); outline-offset: 3px; }
.retention-panel, .cancel-instructions { padding: 18px; border-radius: var(--sos-radius-card); background: var(--sos-sage); text-align: center; }
.retention-panel h3 { margin: 0; font-size: 20px; line-height: 1.25; }
.retention-panel > p, .cancel-instructions p { margin: 9px 0 16px; color: var(--sos-text-gray); font-size: 15px; line-height: 22px; }
.cancel-instructions { margin-top: 6px; background: var(--sos-cream); }
.offer-success { margin: 2px 0; color: var(--sos-success-green); font-weight: 700; line-height: 22px; text-align: center; }
.inline-error { margin: 0; color: var(--sos-destructive-red); font-size: 14px; text-align: center; }

.trust { padding: 22px 20px 0; color: var(--sos-text-secondary); text-align: center; font-size: 13px; line-height: 20px; }
.trust p { margin: 0 0 5px; }
.trust nav { display: flex; justify-content: center; gap: 8px; }
.trust a { color: var(--sos-primary-teal); text-underline-offset: 3px; }

@media (min-width: 640px) {
  body { background: linear-gradient(180deg, var(--sos-primary-teal) 0 370px, var(--sos-cream) 370px 100%); }
  .hero { padding-top: 34px; padding-bottom: 56px; }
  .checkout-card { margin: -28px 20px 0; padding: 18px; }
  .manage-card { margin: -28px 20px 0; padding: 26px; }
}

@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 1.8s; } }