/* Slideshow AI's plans and sign-up page (README.md beside the site).
   Colours are the app's (products/slideshow-ai/apps/mobile/src/theme.ts),
   light and dark; system fonts only. No inline styles anywhere: the page's
   Content-Security-Policy allows style-src 'self' and nothing else. */

:root {
  --bg: #e6e8ee;
  --surface: #ffffff;
  --surface-2: #f3f4f8;
  --ink: #15171d;
  --ink-2: #565c6b;
  --ink-3: #6f7585;
  --line: #e1e4eb;
  --line-2: #cdd2dc;
  --accent: #f0325c;
  /* The button: the app's pressed accent, so white text passes AA. */
  --accent-button: #d22a4f;
  --accent-button-hover: #bb2345;
  --accent-ink: #ffffff;
  --accent-text: #b81f43;
  --accent-soft: #ffe7ec;
  --good: #0b7f5c;
  --good-soft: #dff2ea;
  --error: #b3261e;
  --error-soft: #fde8e7;
  --shadow: 0 1px 2px rgb(21 23 29 / 5%), 0 10px 28px -14px rgb(21 23 29 / 18%);
  --radius: 20px;
  --radius-sm: 14px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0b0f;
    --surface: #171a21;
    --surface-2: #1f232c;
    --ink: #f1f3f8;
    --ink-2: #a5abbb;
    --ink-3: #8a91a3;
    --line: #2a2f3a;
    --line-2: #384050;
    --accent: #ff4e74;
    --accent-button: #ff4e74;
    --accent-button-hover: #ff6b8b;
    --accent-ink: #1a0a0f;
    --accent-text: #ff7a96;
    --accent-soft: #3a1622;
    --good: #4fc89c;
    --good-soft: #11322a;
    --error: #ff8a80;
    --error-soft: #3b1614;
    --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 10px 28px -14px rgb(0 0 0 / 60%);
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
h1,
h2,
p {
  margin: 0;
}
h1,
h2 {
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
a {
  color: var(--accent-text);
  text-underline-offset: 0.18em;
}
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 40rem) {
  .wrap {
    padding-inline: 2rem;
  }
}

/* Header */
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.brand img {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  flex: none;
}
.by {
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
}
.by:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* Hero */
.hero {
  padding-block: 1rem 1.5rem;
}
@media (min-width: 40rem) {
  .hero {
    padding-block: 3rem 2.5rem;
    text-align: center;
  }
  .hero .lead {
    margin-inline: auto;
  }
}
.hero h1 {
  font-size: clamp(1.875rem, 6vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.lead {
  margin-top: 0.75rem;
  max-width: 38rem;
  color: var(--ink-2);
  font-size: clamp(1rem, 2.4vw, 1.1875rem);
  text-wrap: pretty;
}
.pill {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.3125rem 0.875rem;
  border-radius: 999px;
  background: var(--good-soft);
  color: var(--good);
  font-size: 0.9375rem;
  font-weight: 650;
}

.notice {
  margin-bottom: 1rem;
  padding: 0.875rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px solid var(--line);
  font-weight: 600;
}

/* Plans */
.plans {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.plan-list {
  display: grid;
  gap: 0.75rem;
  min-height: 12rem;
}
@media (min-width: 60rem) {
  .plan-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
  }
}
.plan {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'radio name price'
    'radio allow allow'
    'radio meta meta';
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  align-items: start;
  padding: 1rem;
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.plan:hover {
  border-color: var(--line-2);
}
.plan.is-selected {
  border-color: var(--accent);
}
.plan.is-unavailable {
  opacity: 0.55;
  cursor: not-allowed;
}
.plan:has(.plan-radio:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.plan-radio {
  grid-area: radio;
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 0.125rem 0 0;
  border: 2px solid var(--line-2);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}
.plan-radio:checked {
  border-color: var(--accent);
  background: radial-gradient(circle, var(--accent) 0 5px, var(--surface) 6px);
}
.plan-radio:focus-visible {
  outline: none;
}
.plan-name {
  grid-area: name;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  font-size: 1.125rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.plan-price {
  grid-area: price;
  text-align: right;
  white-space: nowrap;
}
.plan-price strong {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.plan-price span {
  color: var(--ink-2);
  font-size: 0.875rem;
}
.plan-allow {
  grid-area: allow;
  color: var(--ink-2);
  font-size: 0.9375rem;
}
.allow-label {
  display: none;
}
.allow-item {
  display: inline-block;
  white-space: nowrap;
}
.allow-item:not(:last-child)::after {
  content: '·';
  content: '·' / '';
  margin-inline: 0.35em;
}
.allow-usage {
  color: var(--ink);
  font-weight: 700;
}
.usage-note {
  margin: 0.75rem 0 0;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.plan-meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem 0.5rem;
  margin-top: 0.25rem;
  color: var(--ink-3);
  font-size: 0.8125rem;
}
.badge {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge-best {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.badge-save {
  background: var(--good-soft);
  color: var(--good);
}
@media (min-width: 60rem) {
  .plan {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      'radio name'
      'price price'
      'meta meta'
      'allow allow';
    row-gap: 0.5rem;
    padding: 1.25rem;
  }
  .plan-price {
    margin-top: 0.5rem;
    text-align: left;
  }
  .plan-price strong {
    font-size: 2rem;
  }
  .plan-meta {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 0;
  }
  .plan-allow {
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
  }
  .allow-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ink-3);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .allow-item {
    display: block;
    color: var(--ink);
  }
  .allow-item:not(:last-child)::after,
  .allow-suffix {
    display: none;
  }
}

/* The phone's copy of the button, at the bottom of the screen until the
   panel is in view (signup.js). */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 5;
  padding: 0.75rem 16px calc(0.75rem + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px -12px rgb(0 0 0 / 25%);
}
@media (min-width: 60rem) {
  .sticky-cta {
    display: none !important;
  }
}

/* The sign-up panel */
.panel {
  margin-top: 1.25rem;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (min-width: 40rem) {
  .panel {
    max-width: 30rem;
    margin: 2rem auto 0;
    padding: 1.75rem;
  }
}
.panel h2 {
  font-size: 1.25rem;
  font-weight: 750;
}
.panel p + p,
.panel h2 + p {
  margin-top: 0.5rem;
}
.step > * + * {
  margin-top: 0.75rem;
}
.panel label {
  display: block;
  font-weight: 650;
}
.panel input[type='email'],
.panel input[type='text'] {
  display: block;
  width: 100%;
  margin-top: 0.375rem;
  padding: 0.75rem 0.875rem;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--ink);
  background: var(--surface-2);
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
}
.panel input:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.code-input {
  letter-spacing: 0.3em;
  font-variant-numeric: tabular-nums;
}
.muted {
  color: var(--ink-2);
}
.hint {
  color: var(--ink-2);
  font-size: 0.875rem;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
@media (max-width: 26rem) {
  .button {
    padding-inline: 0.875rem;
    font-size: 1rem;
  }
}
.button-primary {
  background: var(--accent-button);
  color: var(--accent-ink);
}
.button-primary:hover {
  background: var(--accent-button-hover);
}
.button-secondary {
  background: var(--surface-2);
  color: var(--ink);
  border: 1.5px solid var(--line-2);
}
.button-secondary:hover {
  border-color: var(--ink-3);
}
.button:disabled,
.button[aria-disabled='true'] {
  opacity: 0.6;
  cursor: progress;
}
.links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
.link-button {
  padding: 0.25rem 0;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--accent-text);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.status {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
}
.status:empty {
  display: none;
}
.status[data-tone='error'] {
  padding: 0.625rem 0.875rem;
  border-radius: 12px;
  background: var(--error-soft);
  color: var(--error);
  font-weight: 600;
}
.trial {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.fine {
  max-width: 40rem;
  margin: 1.75rem auto 0;
  color: var(--ink-3);
  font-size: 0.8125rem;
  text-align: center;
}
.fine p + p {
  margin-top: 0.375rem;
}

/* Footer */
.site-footer {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 0.875rem;
}
.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-block: 1.5rem 2rem;
}

/* welcome.html */
.welcome {
  max-width: 30rem;
  margin: 1.5rem auto 0;
  padding: 2rem 1.25rem;
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
@media (min-width: 40rem) {
  .welcome {
    margin-top: 4rem;
    padding: 2.5rem 2rem;
  }
}
.welcome img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}
.welcome h1 {
  margin-top: 1rem;
  font-size: clamp(1.875rem, 6vw, 2.5rem);
  font-weight: 800;
}
.welcome .lead {
  margin: 0.75rem auto 0;
}
.welcome .button {
  margin-top: 1.5rem;
}
.welcome .hint {
  margin-top: 1rem;
}

/* Paying with bitcoin (Slideshow AI ADR-0021): card is the default path;
   a quiet button under it opens the bitcoin section in place of the card
   button, and "Pay by card instead" folds it back. Shown only while the
   API says bitcoin is open. */
.pay-card > * + * {
  margin-top: 0.75rem;
}
/* The two switches: plain text buttons, quiet but clearly tappable (a
   44 px target, underlined like a link). */
.panel .pay-switch {
  display: block;
  min-height: 2.75rem;
  margin-inline: auto;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  color: var(--accent-text);
  background: none;
  border: 0;
  border-radius: 12px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.panel .pay-switch:hover {
  text-decoration-thickness: 2px;
}
/* Open, the section is the step's only visible child (the card button and
   the switch above it are hidden): no sibling gap above it. */
.step > .pay-bitcoin {
  margin-top: 0;
}
.pay-bitcoin > * + * {
  margin-top: 0.75rem;
}
.pay-bitcoin-title {
  font-size: 1.125rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.pay-bitcoin-title:focus {
  outline: none;
}
.pay-bitcoin-title:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
.pay-bitcoin-title + .muted {
  margin-top: 0.25rem;
}
.pay-bitcoin > .pay-periods {
  margin: 1rem 0 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.pay-periods legend {
  margin-bottom: 0.5rem;
  padding: 0;
  font-weight: 700;
}
.pay-period-list {
  display: grid;
  gap: 0.5rem;
}
.panel .pay-period {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'radio name price'
    'radio line line';
  column-gap: 0.75rem;
  row-gap: 0.125rem;
  align-items: center;
  padding: 0.75rem 0.875rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
}
.panel .pay-period.is-selected {
  border-color: var(--accent);
}
.panel .pay-period:has(.plan-radio:focus-visible) {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.pay-period .plan-radio {
  grid-area: radio;
  align-self: start;
}
.pay-name {
  grid-area: name;
  font-weight: 650;
}
.pay-period-price {
  grid-area: price;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pay-line {
  grid-area: line;
  color: var(--ink-2);
  font-size: 0.875rem;
  font-weight: 400;
}