/* ==========================================================================
   OurTales — landing page
   --------------------------------------------------------------------------
   The palette, type scale and radii are lifted from the app's own design
   tokens (src/theme/tokens.ts, src/theme/typography.ts) rather than invented
   here, so the page and the product read as one thing: a single crimson
   accent, a warm cream ground, Playfair for headlines,
   Inter for everything else. The wordmark itself is now artwork rather than
   type — see .brand. The four accent colours carry the "many voices" motif
   only, never an affordance.
   ========================================================================== */

/* --------------------------------------------------------------- tokens -- */
:root {
  /* ground + ink */
  --cream:        #FFF9F2;
  --cream-deep:   #FDF2E6;
  --surface:      #FFFFFF;
  --ink:          #191524;
  --ink-deep:     #120F1B;
  --text:         #16161A;
  --muted:        #6E6E78;
  --muted-light:  #7E7789;
  --hairline:     #EAE3DA;
  --hairline-dk:  rgba(255, 255, 255, 0.12);

  /* the single accent */
  --accent:       #F5334B;
  --accent-deep:  #D91E37;
  --accent-soft:  #FBD3DA;
  --accent-wash:  #FFF1F3;

  /* the "many voices" motif — avatars, step markers, pillar icons; never an affordance */
  --violet:       #5D54D6;
  --pink:         #D9799D;
  --amber:        #D8A45D;
  --teal:         #4C9C92;

  /* type */
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* rhythm — 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64, same as the app */
  --gutter: 24px;
  --maxw: 1160px;
  --r-card: 20px;
  --r-btn: 14px;
  --r-pill: 999px;

  --shadow-sm: 0 4px 12px rgba(25, 21, 36, 0.06);
  --shadow-md: 0 8px 28px rgba(25, 21, 36, 0.09);
  --shadow-lg: 0 24px 60px rgba(25, 21, 36, 0.14);
  --shadow-accent: 0 10px 30px rgba(245, 51, 75, 0.28);

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------------------------------------------------------------- reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--ink); color: #fff; padding: 12px 20px;
  border-radius: var(--r-btn); font-weight: 600;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 16px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- layout -- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 104px 0; position: relative; }
.section--tight { padding: 72px 0; }

/* ------------------------------------------------------------ typography -- */
.eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px;
}
.eyebrow--muted { color: var(--muted); }
.eyebrow--light { color: var(--amber); }

.display {
  font-family: var(--serif);
  font-size: clamp(2.65rem, 6.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.h2 {
  font-family: var(--serif);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.h3 { font-size: 1.2rem; line-height: 1.35; letter-spacing: -0.015em; }
.lede { font-size: clamp(1.05rem, 1.9vw, 1.22rem); line-height: 1.65; color: var(--muted); }
.section-head { max-width: 720px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head .lede { margin-top: 20px; }
em.mark { font-style: italic; color: var(--accent); font-family: var(--serif); }

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: var(--r-btn); border: 1.5px solid transparent;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease),
              background-color 0.18s var(--ease), border-color 0.18s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn--accent:hover { background: var(--accent-deep); box-shadow: 0 14px 36px rgba(245, 51, 75, 0.34); }
.btn--ink { background: var(--ink); color: #fff; box-shadow: var(--shadow-md); }
.btn--ink:hover { background: var(--ink-deep); }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--hairline); }
.btn--ghost:hover { border-color: var(--ink); background: rgba(25, 21, 36, 0.03); }
.btn--sm { min-height: 44px; padding: 0 20px; font-size: 14px; }
.btn--lg { min-height: 58px; padding: 0 30px; font-size: 16px; }
/* Ghost button on the dark ground of the final CTA. */
.btn--onink { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.btn--onink:hover { border-color: #fff; background: rgba(255, 255, 255, 0.07); }

/* ---------------------------------------------------------------- header -- */
.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 249, 242, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s var(--ease), background-color 0.25s var(--ease);
}
.header.is-stuck { border-bottom-color: var(--hairline); background: rgba(255, 249, 242, 0.95); }
.header__inner { display: flex; align-items: center; gap: 24px; height: 72px; }
/* The supplied logo is a stacked lockup — book above wordmark — which is
   illegible at header size, so the two halves are separate files and get
   recomposed horizontally here. Heights are set and widths left to the
   intrinsic ratio, so neither half can be squashed. */
.brand { display: flex; align-items: center; gap: 10px; }
.brand__mark { height: 42px; width: auto; flex: none; }
.brand__word { height: 22px; width: auto; flex: none; }
@media (max-width: 420px) {
  .brand__mark { height: 32px; }
  .brand__word { height: 17px; }
}
.nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.nav a { font-size: 14.5px; font-weight: 500; color: var(--muted); transition: color 0.18s var(--ease); }
.nav a:hover { color: var(--text); }
.header__cta { margin-left: 8px; }
@media (max-width: 900px) { .nav { display: none; } .header__cta { margin-left: auto; } }
/* On a narrow phone the full label pushes the button past the viewport, so it
   drops to the verb alone — which is the part that carries the action anyway. */
@media (max-width: 560px) {
  .header__cta-long { display: none; }
  .header__cta { padding: 0 16px; }
}

/* ------------------------------------------------------------------ hero -- */
.hero { position: relative; padding: 76px 0 96px; overflow: hidden; }
.hero__glow {
  position: absolute; inset: -20% -10% auto -10%; height: 780px; pointer-events: none;
  background:
    radial-gradient(46% 42% at 16% 20%, rgba(93, 84, 214, 0.16), transparent 70%),
    radial-gradient(40% 40% at 84% 8%,  rgba(245, 51, 75, 0.14), transparent 70%),
    radial-gradient(44% 44% at 62% 62%, rgba(216, 164, 93, 0.16), transparent 72%);
  filter: blur(6px);
}
.hero__inner {
  position: relative;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center;
}
.hero__copy { max-width: 620px; }
.hero .display { margin-bottom: 24px; }
.hero .lede { max-width: 520px; }

.hero__proof {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  margin-top: 26px; font-size: 13.5px; color: var(--muted);
}
.hero__proof-item { display: inline-flex; align-items: center; gap: 7px; }
.hero__proof-item svg { width: 15px; height: 15px; color: var(--teal); flex: none; }

/* --------------------------------------------------------- capture form -- */
.capture { margin-top: 32px; max-width: 500px; }
.capture__row { display: flex; gap: 10px; }
.capture__field { position: relative; flex: 1; }
.capture input[type="email"] {
  width: 100%; min-height: 54px; padding: 0 18px;
  font-family: var(--sans); font-size: 15.5px; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--hairline);
  border-radius: var(--r-btn); box-shadow: var(--shadow-sm);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.capture input[type="email"]::placeholder { color: var(--muted-light); }
.capture input[type="email"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-wash);
}
.capture input[type="email"][aria-invalid="true"] { border-color: var(--accent); }
.capture .btn { min-height: 54px; }
.capture__note {
  margin-top: 12px; font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 7px;
}
.capture__note svg { width: 14px; height: 14px; flex: none; color: var(--muted-light); }
.capture__error {
  margin-top: 10px; font-size: 13.5px; font-weight: 500; color: var(--accent-deep); display: none;
}
.capture__error.is-visible { display: block; }
.capture__success {
  display: none;
  padding: 22px 24px; border-radius: var(--r-card);
  background: var(--surface); border: 1.5px solid var(--teal); box-shadow: var(--shadow-md);
}
.capture__success.is-visible { display: block; animation: pop 0.4s var(--ease); }
.capture.is-done .capture__form { display: none; }
.capture__success h3 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 8px; }
.capture__success p { font-size: 14.5px; color: var(--muted); }
.capture__success-mark {
  width: 34px; height: 34px; border-radius: 50%; background: var(--teal);
  color: #fff; display: grid; place-items: center; margin-bottom: 14px;
}
.capture__success-mark svg { width: 18px; height: 18px; }
@keyframes pop {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 560px) {
  .capture__row { flex-direction: column; }
  .capture .btn { width: 100%; }
}

/* ------------------------------------------------------------ get the app --
   The download pair. Android is the primary and the iPhone route is visibly
   secondary — two equal buttons would make the visitor choose a platform
   before they have chosen the product. */
.get { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.get--center { justify-content: center; }
.get__meta { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.get__meta a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hairline); }
.get__meta a:hover { color: var(--accent); text-decoration-color: currentColor; }
.get__meta--center { text-align: center; color: rgba(255, 255, 255, 0.6); }
.get__meta--center a { text-decoration-color: rgba(255, 255, 255, 0.3); }
.get__meta--center a:hover { color: #fff; }
@media (max-width: 560px) {
  .get { flex-direction: column; }
  .get .btn { width: 100%; }
}

/* ------------------------------------------------------- install steps --- */
.install { counter-reset: install; }
.install li {
  position: relative; padding: 0 0 30px 62px; counter-increment: install;
}
.install li::before {
  content: counter(install);
  position: absolute; left: 0; top: 0;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--ink); color: #fff;
  font-family: var(--serif); font-size: 18px; font-weight: 700;
  display: grid; place-items: center;
}
/* The rail that ties the three steps together, stopping at the last one. */
.install li::after {
  content: ''; position: absolute; left: 20.5px; top: 50px; bottom: 8px;
  width: 1px; background: var(--hairline);
}
.install li:last-child { padding-bottom: 0; }
.install li:last-child::after { display: none; }
.install h3 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 8px; padding-top: 8px; }
.install p { font-size: 15.5px; color: var(--muted); }
.install b { color: var(--text); font-weight: 600; }

.warnbox {
  margin-top: 16px; padding: 16px 18px; border-radius: 14px;
  background: rgba(216, 164, 93, 0.12); border: 1px solid rgba(216, 164, 93, 0.36);
}
.warnbox__head {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #7A5714; margin-bottom: 8px;
}
.warnbox__head svg { width: 17px; height: 17px; flex: none; }
.warnbox p { font-size: 14px; line-height: 1.6; color: #6B5426; }

/* ------------------------------------------------------------ build facts */
.facts { margin: 24px 0 0; }
.facts > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--hairline);
}
.facts dt { font-size: 13.5px; color: var(--muted); }
.facts dd { margin: 0; font-size: 14px; font-weight: 600; text-align: right; }
.facts dd code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 500; }
.facts__muted { color: var(--muted); font-weight: 400; }

/* ----------------------------------------------------------------- iOS --- */
.ios {
  margin-top: 40px; padding: 34px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); box-shadow: var(--shadow-sm);
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
}
@media (max-width: 860px) { .ios { grid-template-columns: 1fr; gap: 26px; } }

/* --------------------------------------------------------- phone mockup -- */
.hero__art { position: relative; display: grid; place-items: center; min-height: 620px; }

.phone {
  position: relative; width: 320px; padding: 12px;
  background: linear-gradient(160deg, #2A2141, #16121F);
  border-radius: 46px; box-shadow: var(--shadow-lg);
  transform: rotate(-2.2deg);
}
.phone__screen {
  background: var(--surface); border-radius: 34px; overflow: hidden;
  height: 580px; display: flex; flex-direction: column;
}
.phone__notch {
  position: absolute; top: 20px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px; background: #16121F; border-radius: var(--r-pill); z-index: 3;
}
.phone__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 34px 18px 12px; font-size: 11px; color: var(--muted);
}
.phone__body { padding: 4px 16px 16px; overflow: hidden; flex: 1; }

.plate {
  height: 168px; border-radius: 16px; position: relative; overflow: hidden;
  background: linear-gradient(140deg, #5D54D6 0%, #D9799D 52%, #D8A45D 100%);
}
.plate__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A scrim, not decoration: the caption and the counter sit on top of a real
   photograph now, and neither may depend on what the photograph happens to
   look like behind them. */
.plate::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(20, 16, 30, 0.55) 0%, rgba(20, 16, 30, 0) 42%),
    linear-gradient(to bottom, rgba(20, 16, 30, 0.35) 0%, rgba(20, 16, 30, 0) 34%);
}
.plate__tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: rgba(20, 16, 30, 0.62); backdrop-filter: blur(6px);
  color: #fff; font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em;
  padding: 5px 10px; border-radius: var(--r-pill);
}
.plate__count {
  position: absolute; right: 12px; top: 12px; z-index: 2;
  background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 700;
  padding: 5px 10px; border-radius: var(--r-pill);
}

.remark { display: flex; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--hairline); }
.remark:last-child { border-bottom: 0; }
.remark__avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700;
}
.remark__name { font-size: 12.5px; font-weight: 600; }
.remark__text { font-size: 12px; line-height: 1.5; color: var(--muted); }
.chip {
  display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 6px; margin-left: 6px;
  vertical-align: middle;
}
.chip--certain { background: rgba(76, 156, 146, 0.14); color: #35786F; }
.chip--think   { background: rgba(216, 164, 93, 0.18); color: #8A6417; }
.chip--unsure  { background: rgba(110, 110, 120, 0.12); color: var(--muted); }

.wave { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-top: 6px; }
.wave span { width: 3px; border-radius: 2px; background: var(--accent-soft); animation: wave 1.6s var(--ease) infinite; }
.wave span:nth-child(odd) { background: var(--accent); }
@keyframes wave {
  0%, 100% { height: 6px; }
  50%      { height: 18px; }
}

/* floating cards around the phone */
.float {
  position: absolute; background: var(--surface); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 13px 15px; z-index: 4;
  border: 1px solid var(--hairline); animation: bob 6s ease-in-out infinite;
}
.float__label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-light); }
.float__value { font-family: var(--serif); font-size: 1.35rem; line-height: 1.2; margin-top: 2px; }
.float--a { top: 44px; left: -12px; animation-delay: -1s; }
.float--b { bottom: 118px; right: -16px; animation-delay: -3s; }
.float--c { bottom: 34px; left: -22px; display: flex; align-items: center; gap: 10px; animation-delay: -2s; }
.float--c .stack { display: flex; }
.float--c .stack span {
  width: 26px; height: 26px; border-radius: 50%; margin-left: -8px;
  border: 2px solid #fff; display: grid; place-items: center;
  color: #fff; font-size: 10px; font-weight: 700;
}
.float--c .stack span:first-child { margin-left: 0; }
.float--c p { font-size: 12px; font-weight: 600; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}
@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; gap: 56px; }
  .hero__copy { max-width: none; }
  .hero__art { min-height: 0; }
  .float--a { left: 0; }
  .float--b { right: 0; }
  .float--c { left: 0; }
}
@media (max-width: 480px) {
  .phone { width: 100%; max-width: 320px; transform: none; }
  .float--a, .float--b, .float--c { display: none; }
}

/* --------------------------------------------------------------- strip --- */
.marquee {
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  background: rgba(255, 255, 255, 0.5); padding: 22px 0;
}
.marquee__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 14px 40px; font-size: 13px; font-weight: 500; color: var(--muted);
}
.marquee__item { display: inline-flex; align-items: center; gap: 9px; }
.marquee__item svg { width: 16px; height: 16px; flex: none; color: var(--violet); }

/* -------------------------------------------------------------- problem -- */
.problem { background: var(--cream-deep); }
.problem__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.loss {
  background: var(--surface); border-radius: var(--r-card); padding: 30px 28px;
  border: 1px solid var(--hairline); box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
.loss::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--rail, var(--accent));
}
.loss__stat { font-family: var(--serif); font-size: 2.4rem; line-height: 1; letter-spacing: -0.04em; }
.loss h3 { margin: 14px 0 8px; }
.loss p { font-size: 15px; color: var(--muted); }
@media (max-width: 860px) { .problem__grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------------ how -- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 60px; counter-reset: step; }
.step { position: relative; padding-top: 30px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--serif); font-size: 13px; font-weight: 700;
  color: var(--accent); letter-spacing: 0.08em;
}
.step__art {
  height: 190px; border-radius: var(--r-card); margin-bottom: 22px;
  border: 1px solid var(--hairline); background: var(--surface);
  box-shadow: var(--shadow-sm); padding: 18px; overflow: hidden; position: relative;
}
.step h3 { font-family: var(--serif); font-size: 1.35rem; margin-bottom: 10px; }
.step p { font-size: 15.5px; color: var(--muted); }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: 44px; } }

.mini-upload {
  height: 100%; border-radius: 14px; position: relative; overflow: hidden;
  background: linear-gradient(140deg, #4C9C92, #5D54D6); color: #fff; text-align: center;
}
.mini-upload img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mini-link {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  border: 1.5px dashed var(--hairline); border-radius: 12px;
  font-size: 12px; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mini-row { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-size: 12.5px; }
.mini-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 700; flex: none; }
.mini-story { font-size: 12px; line-height: 1.65; color: var(--muted); }
.mini-story b { color: var(--text); font-weight: 600; }
.mini-story .u { background: rgba(216, 164, 93, 0.22); border-radius: 4px; padding: 0 3px; }

/* --------------------------------------------------------------- pillars -- */
.pillars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 60px; }
.pillar {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 34px; box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar--wide { grid-column: span 2; }
.pillar__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; margin-bottom: 20px; }
.pillar__icon svg { width: 22px; height: 22px; }
.pillar h3 { font-family: var(--serif); font-size: 1.4rem; margin-bottom: 10px; }
.pillar p { font-size: 15.5px; color: var(--muted); }
.pillar__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; }
@media (max-width: 860px) {
  .pillars { grid-template-columns: 1fr; }
  .pillar--wide { grid-column: auto; }
  .pillar__inner { grid-template-columns: 1fr; }
}

.circles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.circles span {
  font-size: 12.5px; font-weight: 600; padding: 7px 14px; border-radius: var(--r-pill);
  background: var(--cream-deep); color: var(--muted); border: 1px solid var(--hairline);
}
.circles span:first-child { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------------------------------------------------------------- trust -- */
.trust { background: var(--ink); color: #fff; }
.trust .lede { color: rgba(255, 255, 255, 0.66); }
.trust .h2 { color: #fff; }
.trust__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 60px; align-items: start; }
.claims { border-top: 1px solid var(--hairline-dk); }
.claim { display: grid; grid-template-columns: 22px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--hairline-dk); }
.claim__tick { color: var(--teal); width: 20px; height: 20px; margin-top: 3px; }
.claim h3 { font-size: 15.5px; font-weight: 600; margin-bottom: 5px; }
.claim p { font-size: 14px; color: rgba(255, 255, 255, 0.56); }
.claim code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
  background: rgba(255, 255, 255, 0.08); padding: 2px 6px; border-radius: 5px; color: var(--amber);
}
.trust__badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(76, 156, 146, 0.16); border: 1px solid rgba(76, 156, 146, 0.4);
  border-radius: var(--r-pill); padding: 10px 20px 10px 12px; margin-top: 28px;
}
.trust__badge strong { font-family: var(--serif); font-size: 1.5rem; }
.trust__badge span { font-size: 13px; color: rgba(255, 255, 255, 0.7); line-height: 1.35; }
@media (max-width: 900px) { .trust__grid { grid-template-columns: 1fr; gap: 40px; } }

/* ----------------------------------------------------------------- demo -- */
.demo { background: var(--cream-deep); }
.demo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.story-card {
  background: var(--surface); border-radius: var(--r-card); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
/* Fixed aspect rather than fixed height, so the photograph crops the same way
   at every width instead of squashing on a phone. The cream underneath is what
   shows while it loads. */
.story-card__photo {
  width: 100%; aspect-ratio: 16 / 9; max-height: 264px;
  object-fit: cover; display: block;
  /* The people in this frame sit low and slightly left of centre; a default
     centre crop cuts them off at the bottom when the card goes full width. */
  object-position: 46% 62%;
  background: var(--cream-deep);
}
.story-card__head {
  padding: 20px 24px; border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
}
.story-card__head h3 { font-family: var(--serif); font-size: 1.25rem; }
.story-card__badge {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent-deep); white-space: nowrap;
}
.story-card__body { padding: 22px 24px; }
.story-card__section + .story-card__section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hairline); }
.story-card__label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--muted-light); margin-bottom: 9px;
}
.story-card p { font-size: 14.5px; line-height: 1.7; }
.story-card p + p { margin-top: 10px; }
.attrib { font-size: 12.5px; color: var(--muted); margin-top: 8px; font-style: italic; }
.conflict {
  background: rgba(216, 164, 93, 0.13); border-left: 3px solid var(--amber);
  border-radius: 0 10px 10px 0; padding: 14px 16px; font-size: 14px; line-height: 1.6;
}
.demo__points { margin-top: 28px; }
.demo__points li {
  display: grid; grid-template-columns: 20px 1fr; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--hairline); font-size: 15px;
}
.demo__points li:last-child { border-bottom: 0; }
.demo__points svg { width: 18px; height: 18px; color: var(--accent); margin-top: 3px; }
@media (max-width: 900px) { .demo__grid { grid-template-columns: 1fr; gap: 44px; } }

/* ----------------------------------------------------------------- beta -- */
.beta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.deals { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 860px) { .deals { grid-template-columns: 1fr; } }
.deal { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); padding: 32px; box-shadow: var(--shadow-sm); }
.deal h3 { font-family: var(--serif); font-size: 1.3rem; margin-bottom: 16px; }
.deal li { display: grid; grid-template-columns: 20px 1fr; gap: 13px; padding: 9px 0; font-size: 15px; }
.deal li svg { width: 17px; height: 17px; margin-top: 4px; flex: none; }
.deal--get li svg { color: var(--teal); }
.deal--give li svg { color: var(--violet); }

.slots {
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card);
  padding: 34px; box-shadow: var(--shadow-md); position: sticky; top: 96px;
}
.slots__meta { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
@media (max-width: 900px) {
  .beta__grid { grid-template-columns: 1fr; gap: 36px; }
  .slots { position: static; }
}

/* ------------------------------------------------------------------ faq -- */
.faq__list { max-width: 780px; margin: 48px auto 0; }
.faq details { border-bottom: 1px solid var(--hairline); padding: 4px 0; }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-size: 17px; font-weight: 600; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 11px; height: 11px; margin-top: -7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform 0.22s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq details p { padding: 0 40px 22px 0; font-size: 15.5px; color: var(--muted); }
.faq details p + p { margin-top: -10px; }

/* ------------------------------------------------------------- final CTA -- */
.final { position: relative; overflow: hidden; background: var(--ink); color: #fff; text-align: center; }
.final__glow {
  position: absolute; inset: auto -20% -60% -20%; height: 520px; pointer-events: none;
  background:
    radial-gradient(40% 60% at 30% 40%, rgba(93, 84, 214, 0.42), transparent 70%),
    radial-gradient(40% 60% at 70% 40%, rgba(245, 51, 75, 0.34), transparent 70%);
  filter: blur(10px);
}
.final__inner { position: relative; max-width: 740px; margin: 0 auto; }
.final .h2 { color: #fff; }
.final .lede { color: rgba(255, 255, 255, 0.68); margin-top: 20px; }
.final .capture { margin: 34px auto 0; }
.final .capture input[type="email"] { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.18); color: #fff; box-shadow: none; }
.final .capture input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.42); }
.final .capture input[type="email"]:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(245, 51, 75, 0.22); }
.final .capture__note { color: rgba(255, 255, 255, 0.55); justify-content: center; }
.final .capture__error { color: #FFB3BE; }
.final .capture__success { background: rgba(255, 255, 255, 0.06); }
.final .capture__success p { color: rgba(255, 255, 255, 0.66); }
.final .capture__success h3 { color: #fff; }

/* --------------------------------------------------------- product hunt --
   Product Hunt's own orange is used only inside these components. It is the
   one place on the page allowed a second accent, because a PH ask that is not
   recognisably PH-coloured does not read as a PH ask at all — and it is kept
   out of everything else so the crimson stays the page's only affordance. */
.invitebar {
  background: var(--ink);
  color: #fff;
}
.invitebar[hidden] { display: none; }
.invitebar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 14px;
}
.invitebar__text {
  margin: 0; flex: 1 1 16rem;
  font-size: 15px; font-weight: 500; line-height: 1.45;
}

.phbar {
  background: linear-gradient(90deg, #FF6154, #E8503F);
  color: #fff;
}
.phbar[hidden] { display: none; }
.phbar__inner {
  display: flex; align-items: center; gap: 12px;
  min-height: 46px; padding-top: 6px; padding-bottom: 6px;
}
.phbar__link {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 auto; padding: 4px 8px; border-radius: 10px;
  font-size: 14px; font-weight: 500; line-height: 1.35;
  transition: background-color 0.18s var(--ease);
}
.phbar__link:hover { background: rgba(255, 255, 255, 0.14); }
.phbar__mark { width: 20px; height: 20px; flex: none; }
.phbar__cta { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.phbar__close {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 8px;
  color: rgba(255, 255, 255, 0.75);
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.phbar__close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.phbar__close svg { width: 15px; height: 15px; }
@media (max-width: 560px) {
  .phbar__inner { align-items: flex-start; }
  .phbar__link { margin: 0 auto 0 0; font-size: 13.5px; }
}

/* The small hero signal. */
.ph-badge {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 18px; padding: 7px 14px 7px 10px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-pill); box-shadow: var(--shadow-sm);
  font-size: 13.5px; color: var(--muted);
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease), color 0.18s var(--ease);
}
.ph-badge:hover { border-color: #FF6154; color: var(--text); transform: translateY(-1px); }
.ph-badge svg { width: 20px; height: 20px; flex: none; }
.ph-badge b { color: var(--text); font-weight: 600; }
.ph-badge__arrow { color: #FF6154; font-weight: 700; }

/* The full ask, late in the page. */
.ph { background: var(--cream-deep); }
.ph-card {
  display: grid; grid-template-columns: 1fr 148px;
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--r-card); box-shadow: var(--shadow-md); overflow: hidden;
}
.ph-card__body { padding: 34px; }
.ph-card__head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ph-card__icon { width: 62px; height: 62px; border-radius: 14px; flex: none; }
.ph-card__name { font-family: var(--serif); font-size: 1.6rem; line-height: 1.15; }
.ph-card__tagline { font-size: 15px; color: var(--muted); margin-top: 4px; }
.ph-card__pitch { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 56ch; }
.ph-card__pitch em { color: var(--text); font-style: italic; }
.ph-card__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 26px; }
.ph-card__note { font-size: 13px; color: var(--muted-light); line-height: 1.45; }

.ph-upvote {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 54px; padding: 0 26px 0 20px;
  background: #FF6154; color: #fff; border-radius: var(--r-btn);
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 10px 30px rgba(255, 97, 84, 0.32);
  transition: transform 0.18s var(--ease), background-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.ph-upvote:hover {
  background: #E8503F; transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255, 97, 84, 0.4);
}
/* The caret lifts on hover — the same gesture the button is asking for. */
.ph-upvote__caret { width: 22px; height: 22px; flex: none; transition: transform 0.18s var(--ease); }
.ph-upvote:hover .ph-upvote__caret { transform: translateY(-3px); }

.ph-card__aside {
  background: linear-gradient(160deg, #FF6154, #E8503F);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 24px 16px; color: #fff;
}
.ph-card__logo { width: 44px; height: 44px; }
.ph-card__wordmark {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em; line-height: 1.5; text-align: center;
}
@media (max-width: 720px) {
  .ph-card { grid-template-columns: 1fr; }
  .ph-card__body { padding: 26px; }
  .ph-card__aside { flex-direction: row; padding: 14px; gap: 10px; order: -1; }
  .ph-card__logo { width: 24px; height: 24px; }
  .ph-card__wordmark { letter-spacing: 0.14em; }
  .ph-card__wordmark br { display: none; }
  .ph-upvote { width: 100%; justify-content: center; }
}

/* --------------------------------------------------------------- footer -- */
.footer { background: var(--ink-deep); color: rgba(255, 255, 255, 0.6); padding: 60px 0 40px; font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.footer .brand { margin-bottom: 16px; }
.footer .brand__mark { height: 44px; }
.footer .brand__word { height: 23px; }
.footer p { max-width: 340px; line-height: 1.7; }
.footer h4 { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.footer li { padding: 6px 0; }
.footer a:hover { color: #fff; }
.footer__base {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--hairline-dk);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: 13px; color: rgba(255, 255, 255, 0.58);
}
@media (max-width: 760px) { .footer__grid { grid-template-columns: 1fr; gap: 30px; } }

/* --------------------------------------------------------- sticky mobile -- */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  display: none; gap: 12px; align-items: center;
  background: rgba(25, 21, 36, 0.96); backdrop-filter: blur(10px);
  border-radius: 18px; padding: 12px 14px; box-shadow: var(--shadow-lg);
  transform: translateY(140%); transition: transform 0.35s var(--ease);
}
.dock.is-visible { transform: none; }
.dock p { color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.3; min-width: 0; }
.dock small { display: block; color: rgba(255,255,255,0.55); font-weight: 400; font-size: 11.5px; }
.dock .btn { margin-left: auto; }
@media (max-width: 900px) { .dock { display: flex; } }

/* ------------------------------------------------------------- reveal fx --
   Scoped to `.js`, which an inline script in the head adds. Without it the
   content is simply visible: a scroll-reveal that hides content by default is
   one failed script away from a blank page, and this page's whole job is to
   be readable. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }