:root {
  --paper: #F1EDE3;
  --paper-raised: #FBF9F4;
  --ink: #1B2A4A;
  --ink-soft: #5C6570;
  --rule: #D8D1C2;

  --font-header: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17140F;
    --paper-raised: #1F1B14;
    --ink: #EAE3D4;
    --ink-soft: #A79E8C;
    --rule: #332D22;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-header);
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.rule {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Header */

.site-header {
  padding: 28px 0;
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 900px;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  color: var(--ink);
  flex-shrink: 0;
}

.brand-word {
  font-family: var(--font-header);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* Buttons */

.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  padding: 13px 24px;
  border-radius: 3px;
  border: 1px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.btn:hover {
  opacity: 0.82;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 10px 18px;
  font-size: 14px;
}

/* Hero */

.hero {
  padding: 72px 0 88px;
}

.hero-inner {
  max-width: 640px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 20px;
}

.hero h1 {
  font-size: 44px;
  line-height: 1.18;
  margin-bottom: 24px;
}

.hero-sub {
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 560px;
  margin-bottom: 36px;
}

.hero-cta {
  display: flex;
  gap: 16px;
}

/* About */

.about {
  padding: 80px 0;
}

.about-inner {
  max-width: 680px;
}

.about h2 {
  font-size: 30px;
  line-height: 1.28;
  margin-bottom: 28px;
}

.about p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Features */

.features {
  padding: 80px 0;
}

.features .wrap {
  max-width: 920px;
}

.feature-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.feature {
  display: grid;
  grid-template-columns: 48px 1fr;
  grid-template-areas:
    "index body"
    "index media";
  column-gap: 20px;
  row-gap: 24px;
}

.feature-index {
  grid-area: index;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  padding-top: 4px;
}

.feature-body {
  grid-area: body;
}

.feature h3 {
  font-size: 21px;
  line-height: 1.35;
}

.feature p {
  margin-top: 8px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
  max-width: 520px;
}

.feature-media {
  grid-area: media;
  /* Safety net: even if a child image were ever sized larger than
     intended, it can never visually escape this grid cell into the
     text column next to it. */
  overflow: hidden;
}

@media (min-width: 800px) {
  .feature {
    grid-template-columns: 48px 1fr 280px;
    grid-template-areas: "index body media";
    align-items: center;
    column-gap: 28px;
  }

  .feature-media {
    align-self: center;
  }
}

/* Feature screenshots + scroll-reveal */

.shot {
  position: relative;
  line-height: 0;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--paper-raised);
}

.shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* The authenticity stamp is a small transparent badge, not a screenshot
   — no card frame behind it, and capped well below the other three
   screenshots' display size (source is ~360px native, recaptured at the
   StampBadge component's "lg" size — still not huge, so this stays
   comfortably inside native resolution rather than upscaling). */
.shot--badge {
  border: none;
  border-radius: 0;
  background: transparent;
  max-width: 140px;
  overflow: hidden;
}

/* Belt-and-suspenders: cap the image itself, not just its container, so
   it can't render larger than intended even if the container's own
   sizing were ever bypassed. Keeps the base .shot img rule's
   width: 100% (so the box sizes immediately from the 140px max-width
   above, without waiting on the image to load) and adds an explicit
   aspect-ratio matching the source file — that's what keeps the full
   circle visible undistorted instead of collapsing to 0 height before
   load or relying on the image finishing to know its own shape. */
.shot--badge img {
  max-width: 140px;
  max-height: 146px;
  aspect-ratio: 361 / 374;
}

@media (prefers-reduced-motion: no-preference) {
  .shot img {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 500ms ease-out, transform 500ms ease-out;
  }

  .shot.is-visible img {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Status pages (upgrade, checkout success/cancel) */

.status-page {
  min-height: calc(100vh - 340px);
  display: flex;
  align-items: center;
  padding: 64px 0;
}

.status-card {
  max-width: 440px;
  margin: 0 auto;
  padding: 40px 36px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper-raised);
  text-align: center;
}

.status-card .eyebrow {
  margin-bottom: 16px;
}

.status-card h1 {
  font-size: 28px;
  line-height: 1.3;
  margin-bottom: 16px;
}

.status-card p:not(.eyebrow) {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
}

.status-card .btn {
  margin-top: 24px;
}

.state-message {
  font-size: 17px;
  color: var(--ink-soft);
  margin: 0;
}

#retry-btn {
  margin-top: 20px;
}

@media (prefers-reduced-motion: no-preference) {
  .state-message--loading {
    animation: state-pulse 1.6s ease-in-out infinite;
  }
}

@keyframes state-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Closing */

.closing {
  padding: 84px 0 96px;
}

.closing-inner {
  max-width: 620px;
}

.closing h2 {
  font-size: 30px;
  line-height: 1.28;
  margin-bottom: 20px;
}

.closing > .closing-inner > p {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 40px;
}

/* Waitlist form */

.waitlist-form {
  display: flex;
  gap: 12px;
  max-width: 440px;
}

.waitlist-form input[type="email"] {
  flex: 1;
  font-family: var(--font-body);
  font-size: 16px;
  padding: 13px 16px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper-raised);
  color: var(--ink);
}

.waitlist-form input[type="email"]::placeholder {
  color: var(--ink-soft);
}

.waitlist-form input[type="email"]:focus {
  outline: none;
  border-color: var(--ink);
}

.waitlist-form .btn {
  white-space: nowrap;
}

.form-status {
  margin-top: 16px;
  font-size: 14px;
  color: var(--ink-soft);
  min-height: 20px;
}

.form-status.is-success {
  color: var(--ink);
}

.form-status.is-error {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* Footer */

.site-footer {
  padding: 48px 0 64px;
  border-top: 1px solid var(--rule);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-lockup {
  opacity: 0.85;
}

.footer-lockup .brand-word {
  font-size: 16px;
}

.disclaimer {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 560px;
}

.copyright {
  font-size: 13px;
  color: var(--ink-soft);
}

/* Responsive */

@media (max-width: 600px) {
  .hero {
    padding: 48px 0 64px;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero-sub {
    font-size: 16px;
  }

  .about, .features, .closing {
    padding: 56px 0;
  }

  .about h2, .closing h2 {
    font-size: 25px;
  }

  .waitlist-form {
    flex-direction: column;
    max-width: 100%;
  }

  .feature-media {
    max-width: 340px;
  }
}