:root {
  --unlock-accent: #6eb8eb;
  --unlock-accent-soft: rgba(110, 184, 235, 0.18);
  --unlock-bg: #f6f7fb;
  --unlock-surface: #ffffff;
  --unlock-text: #11151a;
  --unlock-muted: #5b6573;
  --unlock-subtle: #8b95a3;
  --unlock-border: #e3e7ee;
  --unlock-border-strong: #ccd3dd;
  --unlock-tier-bg: #f3f4f8;
  --unlock-radius: 0.75rem;
  --unlock-font-display: ui-serif, Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* The `hidden` attribute is toggled from JS to gate UI until it's ready (badge,
   form, branding). A class with an explicit `display` outranks the UA
   `[hidden] { display: none }` rule, so without this guard hidden elements
   (e.g. the "test mode" badge) leak through. Keep this winning. */
[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--unlock-bg);
  color: var(--unlock-text);
  -webkit-font-smoothing: antialiased;
}

.unlock {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.unlock__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 26rem;
  min-height: 100%;
  background: var(--unlock-surface);
  border-radius: 1rem;
  padding: 1.5rem 1.25rem 1.25rem;
  box-shadow: 0 10px 30px rgba(20, 30, 50, 0.06);
}

.unlock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  min-height: 1.5rem;
}

.unlock__test-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.375rem;
  border-radius: 999px;
  border: 1px solid var(--unlock-border-strong);
  background: var(--unlock-tier-bg);
  color: var(--unlock-muted);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  white-space: nowrap;
}

.unlock__brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.unlock__brand-logo {
  display: block;
  width: auto;
  height: 1.5rem;
  max-width: 8rem;
  object-fit: contain;
}

.unlock__brand-name {
  font-family: var(--unlock-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--unlock-text);
}

.unlock__brand-name:empty { display: none; }

.unlock--has-logo .unlock__brand-name {
  display: none !important;
}

.unlock__status {
  margin: 0 0 0.75rem;
  font-size: 0.9375rem;
  color: var(--unlock-muted);
}

.unlock--ready .unlock__status,
.unlock--error .unlock__status[hidden] { display: none; }

.unlock--error .unlock__status {
  color: #b3261e;
}

/* Loading state — until the page is ready (or errored) hold back the branded
   chrome and content, and show a single centered spinner so nothing renders
   piecemeal while branding loads. */
.unlock:not(.unlock--ready):not(.unlock--error) .unlock__inner {
  align-items: center;
  justify-content: center;
}

.unlock:not(.unlock--ready):not(.unlock--error) .unlock__head {
  opacity: 0;
}

.unlock:not(.unlock--ready):not(.unlock--error) .unlock__status {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.875rem;
}

.unlock:not(.unlock--ready):not(.unlock--error) .unlock__status::before {
  content: "";
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 2px solid var(--unlock-border);
  border-top-color: var(--unlock-accent);
  animation: unlock-spin 0.7s linear infinite;
}

.unlock__head {
  transition: opacity 0.25s ease;
}

.unlock--ready .unlock__inner,
.unlock--error .unlock__inner {
  animation: unlock-fade-in 0.25s ease both;
}

@keyframes unlock-spin {
  to { transform: rotate(360deg); }
}

@keyframes unlock-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .unlock:not(.unlock--ready):not(.unlock--error) .unlock__status::before {
    animation: none;
  }
  .unlock--ready .unlock__inner,
  .unlock--error .unlock__inner {
    animation: none;
  }
}

.unlock__tagline {
  margin: 0 0 1rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--unlock-muted);
}

.unlock__tagline strong {
  color: var(--unlock-text);
  font-weight: 600;
}

/* Features */

.unlock__features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 1rem;
  background: var(--unlock-tier-bg);
  border: 1px solid var(--unlock-border);
  border-radius: 0.625rem;
}

.unlock__features-tier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.875rem;
}

.unlock__features-tier--free {
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--unlock-border);
}

.feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.875rem;
  line-height: 1.35;
}

.feature__status {
  position: relative;
  display: flex;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.feature__status-icon {
  position: absolute;
  inset: 0;
  display: flex;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    color 0.22s ease;
}

.feature__status-icon svg {
  width: 100%;
  height: 100%;
}

.feature__status-icon--unlock {
  opacity: 0;
  transform: scale(0.75);
}

.feature__label {
  min-width: 0;
  transition: color 0.22s ease, font-weight 0.22s ease;
}

.feature--included .feature__status { color: var(--unlock-text); }
.feature--included .feature__label {
  font-weight: 600;
  color: var(--unlock-text);
}

.feature--locked .feature__status { color: var(--unlock-subtle); }
.feature--locked .feature__label { color: var(--unlock-muted); }

/* Preview unlock — locked rows visually unlock when the user hovers/focuses
   the CTA button, or when the .unlock--preview class is set (auto-preview). */

.unlock--preview .feature--locked,
.unlock:has(.unlock__cta button:hover) .feature--locked,
.unlock:has(.unlock__cta button:focus-visible) .feature--locked {
  --feature-unlock-delay: 0s;
}

.unlock--preview .unlock__features-tier--pro .feature--locked:nth-child(2),
.unlock:has(.unlock__cta button:hover) .unlock__features-tier--pro .feature--locked:nth-child(2),
.unlock:has(.unlock__cta button:focus-visible) .unlock__features-tier--pro .feature--locked:nth-child(2) {
  --feature-unlock-delay: 0.03s;
}

.unlock--preview .unlock__features-tier--pro .feature--locked:nth-child(3),
.unlock:has(.unlock__cta button:hover) .unlock__features-tier--pro .feature--locked:nth-child(3),
.unlock:has(.unlock__cta button:focus-visible) .unlock__features-tier--pro .feature--locked:nth-child(3) {
  --feature-unlock-delay: 0.06s;
}

.unlock--preview .unlock__features-tier--pro .feature--locked:nth-child(4),
.unlock:has(.unlock__cta button:hover) .unlock__features-tier--pro .feature--locked:nth-child(4),
.unlock:has(.unlock__cta button:focus-visible) .unlock__features-tier--pro .feature--locked:nth-child(4) {
  --feature-unlock-delay: 0.09s;
}

.unlock--preview .unlock__features-tier--pro .feature--locked:nth-child(5),
.unlock:has(.unlock__cta button:hover) .unlock__features-tier--pro .feature--locked:nth-child(5),
.unlock:has(.unlock__cta button:focus-visible) .unlock__features-tier--pro .feature--locked:nth-child(5) {
  --feature-unlock-delay: 0.12s;
}

.unlock--preview .unlock__features-tier--pro .feature--locked:nth-child(6),
.unlock:has(.unlock__cta button:hover) .unlock__features-tier--pro .feature--locked:nth-child(6),
.unlock:has(.unlock__cta button:focus-visible) .unlock__features-tier--pro .feature--locked:nth-child(6) {
  --feature-unlock-delay: 0.15s;
}

.unlock--preview .feature--locked .feature__status-icon--lock,
.unlock:has(.unlock__cta button:hover) .feature--locked .feature__status-icon--lock,
.unlock:has(.unlock__cta button:focus-visible) .feature--locked .feature__status-icon--lock {
  opacity: 0;
  transform: scale(0.75);
  transition-delay: var(--feature-unlock-delay, 0s);
}

.unlock--preview .feature--locked .feature__status-icon--unlock,
.unlock:has(.unlock__cta button:hover) .feature--locked .feature__status-icon--unlock,
.unlock:has(.unlock__cta button:focus-visible) .feature--locked .feature__status-icon--unlock {
  opacity: 1;
  transform: scale(1);
  color: var(--unlock-text);
  transition-delay: var(--feature-unlock-delay, 0s);
}

.unlock--preview .feature--locked .feature__label,
.unlock:has(.unlock__cta button:hover) .feature--locked .feature__label,
.unlock:has(.unlock__cta button:focus-visible) .feature--locked .feature__label {
  color: var(--unlock-text);
  font-weight: 500;
  transition-delay: var(--feature-unlock-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .feature__status-icon,
  .feature__label {
    transition: none;
  }
}

/* Identity: the known/entered email. Editing it and finishing (blur/Enter)
   re-checks entitlement and switches between the owned panel below and the
   plan picker — there's no separate manual "restore" action. */

.unlock__identity {
  margin-bottom: 1rem;
}

.unlock__identity-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.unlock__identity-row input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--unlock-border);
  border-radius: 0.5rem;
  font: inherit;
  background: #fff;
  color: var(--unlock-text);
}

.unlock__identity-row input[type="email"]:focus {
  outline: none;
  border-color: var(--unlock-accent);
  box-shadow: 0 0 0 3px var(--unlock-accent-soft);
}

.unlock__identity-row input[type="email"]:read-only {
  background: var(--unlock-tier-bg);
  color: var(--unlock-muted);
  cursor: default;
}

.unlock__identity-row input[type="email"]:read-only:focus {
  box-shadow: none;
  border-color: var(--unlock-border);
}

.unlock__identity-row .unlock-email-edit {
  flex-shrink: 0;
  padding: 0.625rem 0.75rem;
  border: 1px solid var(--unlock-border);
  border-radius: 0.5rem;
  background: transparent;
  color: var(--unlock-accent);
  font: inherit;
  font-weight: 600;
  font-size: 0.8125rem;
  cursor: pointer;
}

.unlock__identity-row .unlock-email-edit:hover {
  background: var(--unlock-accent-soft);
}

.unlock__restore-status {
  margin: 0.625rem 0 0;
  font-size: 0.8125rem;
  color: var(--unlock-muted);
}

.unlock__restore-status--error {
  color: #b3261e;
}

.unlock__restore-status--success {
  color: #0f6e56;
}

/* Shown instead of the plan picker + CTA once a known email is auto-detected
   as an existing customer. */

.unlock__owned {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--unlock-border);
  border-radius: var(--unlock-radius);
  background: var(--unlock-tier-bg);
  text-align: center;
}

.unlock__owned-lead {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: var(--unlock-text);
}

.unlock__owned-submit {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--unlock-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.unlock__owned-submit:disabled {
  opacity: 0.75;
  cursor: wait;
}

/* Plan picker */

.unlock__plans {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.unlock__plans-heading {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--unlock-subtle);
}

.unlock__plans-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.9375rem 1rem;
  border: 1.5px solid var(--unlock-border);
  border-radius: 0.625rem;
  background: var(--unlock-surface);
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition:
    transform 120ms ease,
    border-color 120ms ease,
    background 120ms ease,
    box-shadow 120ms ease;
}

.plan-card:hover {
  transform: translateY(-1px);
  border-color: var(--unlock-border-strong);
}

.plan-card:focus-visible {
  outline: none;
  border-color: var(--unlock-accent);
  box-shadow: 0 0 0 3px var(--unlock-accent-soft);
}

.plan-card--selected {
  border-color: var(--unlock-accent);
  border-width: 2px;
  padding: calc(0.9375rem - 0.5px) calc(1rem - 0.5px);
  background: linear-gradient(
    180deg,
    var(--unlock-accent-soft) 0%,
    var(--unlock-surface) 55%
  );
  box-shadow: 0 0 0 3px var(--unlock-accent-soft);
}

.unlock--multi-plan.unlock--plan-selected .plan-card:not(.plan-card--selected) {
  border-color: var(--unlock-border);
  background: var(--unlock-surface);
}

.plan-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
}

.plan-card__badge {
  flex-shrink: 0;
  background: var(--unlock-accent);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.plan-card__name {
  font-size: 0.9375rem;
  font-weight: 600;
}

.plan-card__price {
  font-family: var(--unlock-font-display);
  font-size: 1.0625rem;
  font-weight: 500;
  margin-top: 0.125rem;
  letter-spacing: -0.02em;
}

.plan-card__value {
  margin-top: 0.25rem;
  color: var(--unlock-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
}

.plan-card__selected-label {
  display: none;
  position: absolute;
  right: 1rem;
  bottom: 0.9375rem;
  color: var(--unlock-accent);
  font-size: 0.6875rem;
  font-weight: 700;
}

.plan-card--selected .plan-card__selected-label {
  display: block;
}

.plan-card--selected .plan-card__value {
  max-width: calc(100% - 4.5rem);
}

@media (max-width: 24rem) {
  .plan-card__header {
    align-items: flex-start;
  }

  .plan-card__badge {
    max-width: 65%;
    white-space: normal;
    text-align: right;
  }
}

/* CTA */

.unlock__cta {
  margin-top: auto;
  padding-top: 0.5rem;
}

.unlock__cta--loading #payhook-button button {
  opacity: 0.85;
  cursor: wait;
}

/* Sits directly above the plans, so the discount is read before a plan is
   picked rather than discovered on the Stripe page. */
.unlock__promo {
  margin: 0 0 0.875rem;
  padding: 0.5rem 0.75rem;
  border: 1px dashed var(--unlock-accent, #6eb8eb);
  border-radius: 8px;
  background: var(--unlock-accent-soft, rgba(110, 184, 235, 0.18));
  color: var(--unlock-text, #11151a);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
}

.unlock__footnote {
  margin: 0.625rem 0 0;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--unlock-subtle);
}

.unlock__cobrand {
  margin: 0.75rem 0 0;
  text-align: center;
  font-size: 0.6875rem;
  color: var(--unlock-subtle);
}

.unlock__cobrand a {
  color: inherit;
  text-decoration: underline;
}

.site-footer {
  padding: 1rem 1rem 1.5rem;
  text-align: center;
}

.site-footer__copy {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1.45;
  color: var(--unlock-subtle);
}

.site-footer__legal {
  font-size: 0.625rem;
  color: rgba(91, 101, 115, 0.75);
}

/* Unlock button overrides — uses the configured accent color. */

/* The unlock-button widget renders its own email input + Edit control, but
   this page already has one canonical email field (the identity block near
   the top) that it's mounted with — hide the widget's copy so there's only
   ever one email field on the page. */
#payhook-button .unlock-email-field {
  display: none;
}

#payhook-button button {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 0;
  border-radius: 0.5rem;
  background: var(--unlock-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  opacity: 1;
  transition: opacity 120ms ease, background 120ms ease;
}

#payhook-button button:not(:disabled) {
  background: var(--unlock-accent);
  color: #fff;
}

#payhook-button button:disabled {
  opacity: 0.75;
  cursor: wait;
}

@media (prefers-reduced-motion: reduce) {
  .plan-card { transition: none; }
}


/*# sourceMappingURL=index.css.map*/