/* ---------------------------------------------------------------
   Prompt Librarian — promo site
   Tokens sourced from DESIGN.md (extracted from the shipping app icon)
--------------------------------------------------------------- */

:root {
  --ink-navy:      oklch(20.9% 0.082 289.6);
  --ink-navy-deep: oklch(14%   0.06  289.6);
  --paper-cream:   oklch(95.9% 0.032 97.3);
  --spine-teal:    oklch(78.3% 0.092 203.4);
  --tab-orange:    oklch(75.9% 0.149 65.9);
  --warm-gray:     oklch(82.0% 0.023 101.4);
  --warm-gray-dim: oklch(62%   0.02  101.4);
  --ink-muted-oncream: oklch(20.9% 0.082 289.6 / 0.62); /* muted ink for text on the cream card: warm-gray-dim fails 4.5:1 there */

  /* Alpha variants derived from the two base surfaces, so nothing re-types
     their channel values by hand. */
  --ink-navy-82: oklch(from var(--ink-navy) l c h / 0.82);
  --ink-navy-65: oklch(from var(--ink-navy) l c h / 0.65);
  --ink-navy-08: oklch(from var(--ink-navy) l c h / 0.08);
  --overlay-faint:    oklch(100% 0 0 / 0.08);
  --overlay-hairline:  oklch(100% 0 0 / 0.1);
  --spine-teal-35: oklch(from var(--spine-teal) l c h / 0.35);
  --spine-teal-40: oklch(from var(--spine-teal) l c h / 0.4);

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --shadow-card-rest: 0 24px 60px -20px oklch(10% 0.04 289.6 / 0.55);
  --shadow-card-lift: 0 32px 80px -18px oklch(10% 0.04 289.6 / 0.65);

  --container: 1180px;
}

/* Reset ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, dt, figure { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
code { font-family: var(--font-mono); }

/* Base ------------------------------------------------------------ */

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

.text-wrap-balance { text-wrap: balance; }
.text-wrap-pretty { text-wrap: pretty; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper-cream);
  color: var(--ink-navy);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 10;
}
.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 2px solid var(--spine-teal);
  outline-offset: 3px;
}

/* Buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background-color 0.25s var(--ease-out-quart), transform 0.25s var(--ease-out-quart);
}

.btn--primary {
  background: var(--paper-cream);
  color: var(--ink-navy);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--spine-teal);
  transform: translateY(-2px);
}
.btn--primary:active {
  transform: translateY(0);
}
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn[aria-disabled="true"]:hover,
.btn[aria-disabled="true"]:focus-visible {
  background: var(--paper-cream);
  transform: none;
}
.btn--large {
  padding: 18px 36px;
  font-size: 1.0625rem;
}
.btn__icon { flex-shrink: 0; }

/* Section scaffolding -------------------------------------------- */

section {
  padding-inline: max(24px, env(safe-area-inset-left));
}

.section-heading {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--paper-cream);
  max-width: 20ch;
  text-wrap: balance;
}
.section-heading--on-dark { color: var(--ink-navy-deep); }

/* Hero -------------------------------------------------------------- */

.hero {
  padding-top: clamp(64px, 10vw, 112px);
  padding-bottom: var(--space-xl);
}

.hero__inner {
  max-width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: center;
}

.wordmark {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--warm-gray-dim);
  margin-bottom: var(--space-md);
}

.hero__heading {
  font-family: var(--font-display);
  font-weight: 480;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--paper-cream);
  max-width: 14ch;
}

.hero__sub {
  margin-top: var(--space-md);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--warm-gray);
  max-width: 42ch;
}

.hero__actions {
  margin-top: var(--space-lg);
}

.hero__requirement {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--warm-gray-dim);
}

/* Hero card stage ----------------------------------------------------- */

.hero__stage {
  display: flex;
  justify-content: center;
  perspective: 1400px;
}

.card {
  position: relative;
  width: min(420px, 100%);
  background: var(--paper-cream);
  color: var(--ink-navy);
  border: 3px solid var(--ink-navy);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-rest);
  transform: rotate(-2deg);
  transition: transform 0.4s var(--ease-out-quart), box-shadow 0.4s var(--ease-out-quart);
}
.card:hover {
  transform: rotate(-0.5deg) translateY(-4px);
  box-shadow: var(--shadow-card-lift);
}

.card__tab {
  position: absolute;
  top: -22px;
  left: 44px;
  width: 88px;
  height: 34px;
  background: var(--tab-orange);
  border: 3px solid var(--ink-navy);
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}

.card__spine {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: 10px;
  background: var(--spine-teal);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.card__body {
  padding: 34px 30px 30px 40px;
}

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.card__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.card__fav { color: var(--tab-orange); flex-shrink: 0; }

.card__tags {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.chip {
  font-size: 0.75rem;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ink-navy);
  color: var(--paper-cream);
}

.card__snippet {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  white-space: pre-wrap;
  color: var(--ink-navy);
}
.card__snippet .tok-h {
  color: var(--ink-muted-oncream);
  font-weight: 500;
}
.var {
  display: inline-block;
  font-weight: 600;
  font-style: normal;
  color: var(--ink-navy);
  background: var(--spine-teal-35);
  border-radius: 4px;
  padding: 0 4px;
  transition: background-color 0.5s var(--ease-out-quart), color 0.5s var(--ease-out-quart);
}
.var.is-filled {
  background: var(--spine-teal);
}

.card__wizard {
  margin-top: 22px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted-oncream);
}
.step {
  padding: 5px 11px;
  border-radius: 999px;
  background: transparent;
  transition: background-color 0.4s var(--ease-out-quart), color 0.4s var(--ease-out-quart);
}
.step--active {
  background: var(--ink-navy);
  color: var(--paper-cream);
}
.step-arrow { opacity: 0.7; } /* decorative separator; deliberately dimmer than step labels, not just a leftover alpha stack */

/* Statement ----------------------------------------------------------- */

.statement {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-xl);
  text-align: center;
}
.statement__text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.4;
  color: var(--warm-gray);
}
.statement__answer {
  margin-top: var(--space-md);
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(1.5rem, 3vw, 2.125rem);
  line-height: 1.4;
  color: var(--paper-cream);
  text-wrap: balance;
}

/* Features -------------------------------------------------------------- */

.features {
  max-width: var(--container);
  margin-inline: auto;
  padding-block: var(--space-xl);
}

.feature-list {
  margin-top: var(--space-lg);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px 56px;
}

.feature--wide { grid-column: 1 / -1; }

.feature dt {
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.005em;
  color: var(--paper-cream);
}
.feature dd {
  margin-top: 8px;
  color: var(--warm-gray);
  max-width: 52ch;
  line-height: 1.6;
}
.feature dd code {
  background: var(--overlay-faint);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.875em;
  color: var(--spine-teal);
}

/* Ownership ------------------------------------------------------------- */

.ownership {
  background: var(--paper-cream);
  color: var(--ink-navy);
  border-radius: var(--radius-lg);
  max-width: var(--container);
  margin: var(--space-xl) auto;
  padding: var(--space-lg) var(--space-md);
}

.ownership__inner {
  max-width: 640px;
  text-align: left;
}

.ownership__text {
  margin-top: var(--space-md);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink-navy-82);
}
.ownership__text code {
  background: var(--ink-navy-08);
  padding: 1px 6px;
  border-radius: 4px;
}

.ownership__facts {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: flex-start;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.ownership__facts li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.fact-num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
}
.ownership__facts li span:last-child {
  font-size: 0.8125rem;
  color: var(--ink-navy-65);
}

/* Final CTA --------------------------------------------------------------- */

.cta {
  max-width: 760px;
  margin-inline: auto;
  padding-block: var(--space-xl);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta__heading {
  font-family: var(--font-display);
  font-weight: 480;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: var(--space-md);
  text-wrap: balance;
}

.cta__note {
  margin-top: var(--space-sm);
  font-size: 0.8125rem;
  color: var(--warm-gray-dim);
}

/* Footer -------------------------------------------------------------------- */

.site-footer {
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-lg) 24px var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  font-size: 0.8125rem;
  color: var(--warm-gray-dim);
  border-top: 1px solid var(--overlay-hairline);
}

.support-box {
  background: var(--spine-teal);
  color: var(--ink-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-align: center;
}

.support-box__title {
  font-family: var(--font-display);
  font-weight: 550;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.support-box__text {
  margin-top: var(--space-sm);
  margin-inline: auto;
  max-width: 46ch;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-navy-82);
}

.support-box__email {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--space-md);
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  background: var(--ink-navy);
  color: var(--paper-cream);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.25s var(--ease-out-quart);
}
.support-box__email svg {
  flex-shrink: 0;
}
.support-box__email:hover,
.support-box__email:focus-visible {
  transform: translateY(-2px);
}


.site-footer__bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer__links {
  display: flex;
  gap: 24px;
}
.site-footer__links a {
  display: inline-block;
  padding-block: 6px;
  text-decoration: underline;
  text-decoration-color: var(--spine-teal-40);
  text-underline-offset: 3px;
  color: var(--spine-teal);
  transition: color 0.2s, text-decoration-color 0.2s;
}
.site-footer__links a:hover,
.site-footer__links a:focus-visible {
  color: var(--paper-cream);
  text-decoration-color: currentColor;
}

/* Scroll reveal ------------------------------------------------------------- */

/* Visible by default. JS arms the hidden starting state only once it can
   also guarantee a reveal (observer + fallback timer), so content never
   depends on a class toggle firing to become visible. */
[data-reveal] {
  opacity: 1;
  transform: none;
}
[data-reveal].reveal-armed {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease-out-quart), transform 0.7s var(--ease-out-quart);
}
[data-reveal].reveal-armed.is-visible {
  opacity: 1;
  transform: none;
}

#heroCard.reveal-armed {
  opacity: 0;
  transform: rotate(-6deg) translateY(36px) scale(0.96);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
#heroCard.reveal-armed.is-visible {
  opacity: 1;
  transform: rotate(-2deg);
}

/* Responsive ------------------------------------------------------------------ */

@media (max-width: 860px) {
  .hero__inner {
    grid-template-columns: 1fr;
  }
  .hero__stage { order: -1; }
  .hero__heading { max-width: none; }
  .hero__sub { max-width: none; }

  .feature-list {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .ownership__facts {
    gap: var(--space-md);
  }

  .site-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .card__body { padding: 30px 22px 24px 32px; }
  /* The card's rotate(-2deg) tilt needs room on either side to avoid
     causing horizontal overflow; below 480px there isn't any, so the
     card rests flat instead of losing the tilt's point (it's decorative,
     not load-bearing for the metaphor). */
  .card,
  .card:hover,
  #heroCard.reveal-armed.is-visible {
    transform: none;
  }
}