:root {
  --ink: #120F1C;
  --signal: #FF6B3D;
  --paper: #F7F4EE;
  --muted: #9A93B0;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px;
}

.hero {
  text-align: center;
  padding: 112px 0 64px;
}

.mark {
  border-radius: 22%;
  margin-bottom: 24px;
}

.hero h1 {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.tagline {
  color: var(--muted);
  font-size: 18px;
  margin: 0 0 32px;
}

.cta {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 999px;
  border: 1px solid var(--signal);
  color: var(--signal);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  opacity: 0.85;
  cursor: default;
}

/* The primary slot. Filled, unlike the outlined .cta it builds on, so it reads
   as the one thing to do on the page. Which link occupies it is decided by
   body[data-store-live] below, not by this rule. */
.cta-primary, body[data-store-live="false"] .cta-testflight, body[data-store-live="true"] .cta-store {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink);
  opacity: 1;
  cursor: pointer;
  padding: 14px 32px;
  font-size: 16px;
}

.cta-primary:hover,
body[data-store-live="false"] .cta-testflight:hover,
body[data-store-live="true"] .cta-store:hover {
  background: transparent;
  color: var(--signal);
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.actions-note {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.trial-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* Secondary: separated from the primary action and set a step quieter. */
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(247, 244, 238, 0.12);
}

.trial-form-label {
  color: var(--muted);
  font-size: 14px;
}

.trial-form-row {
  display: flex;
  gap: 10px;
}

.trial-form-input {
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(247, 244, 238, 0.24);
  background: transparent;
  color: var(--paper);
  font-size: 15px;
  min-width: 220px;
}

.trial-form-input::placeholder {
  color: var(--muted);
}

.trial-form-input:focus {
  outline: none;
  border-color: var(--signal);
}

.trial-form-submit {
  opacity: 1;
  cursor: pointer;
  background: transparent;
  font-family: inherit;
}

.trial-form-submit:hover {
  background: var(--signal);
  color: var(--ink);
}

.trial-form-note {
  min-height: 18px;
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

.pitch {
  padding: 8px 0 56px;
  font-size: 19px;
  line-height: 1.6;
  color: var(--paper);
}

.features {
  display: grid;
  gap: 40px;
  padding: 0 0 96px;
  border-top: 1px solid rgba(247, 244, 238, 0.12);
  padding-top: 56px;
}

.feature h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--signal);
}

.feature p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
  font-size: 16px;
}

footer {
  text-align: center;
  padding: 40px 0 80px;
  border-top: 1px solid rgba(247, 244, 238, 0.12);
}

footer .wordmark {
  opacity: 0.7;
  margin-bottom: 12px;
}

footer p {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   Launch state. One attribute on <body> decides whether this is a pre-launch
   page or a live store page; both sets of markup are present and the wrong one
   is removed from the document rather than merely dimmed. display:none keeps it
   out of the accessibility tree too, so a screen reader never announces a
   "coming soon" line and a buy button at the same time.
   --------------------------------------------------------------------------- */

/* Pre-launch: no App Store link exists yet, so do not render one. */
body[data-store-live="false"] .cta-store,
body[data-store-live="false"] .footer-live {
  display: none;
}

/* Live: the store is the point of the page. The beta CTA, the "email me when
   it ships" form and the beta footer line all stop being true. */
body[data-store-live="true"] .store-soon,
body[data-store-live="true"] .trial-form,
body[data-store-live="true"] .footer-prelaunch {
  display: none;
}

/* Demoted, not deleted: TestFlight stays reachable for existing testers, as a
   quiet line under the buy button rather than a second competing button. */
body[data-store-live="true"] .cta-testflight {
  border-color: transparent;
  padding: 4px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  cursor: pointer;
  opacity: 1;
}

body[data-store-live="true"] .cta-testflight:hover {
  color: var(--signal);
}

/* The pre-launch stand-in for the buy button. Not a link, so it is styled as
   the statement of fact it is. */
.store-soon {
  color: var(--signal);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
}

.footer-index {
  margin-top: 10px;
}

.footer-index a {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 147, 176, 0.4);
}

.footer-index a:hover {
  color: var(--signal);
  border-bottom-color: var(--signal);
}