/* Pocketly marketing site.

   White page, red accent, coffee shades for everything in between — the
   palette a café sees when it looks down at the counter. Replaces the cream
   "Mercato" theme the first draft borrowed from the pitch deck.

   Its own stylesheet, separate from style.css: that one dresses the product
   (consumer pass pages, scanner, merchant portal) and shares none of these
   constraints. A marketing change must never be able to restyle a pass.

   Light-only by design — white *is* the brand here — so say so, and keep the
   UA from dark-ifying the controls. */

:root {
  color-scheme: light;

  --white: #ffffff;
  --paper: #fbf8f5;
  --crema: #f7f0e9;
  --latte: #e7d8c9;
  --mocha: #b58463;
  --coffee: #7b5540;
  --espresso: #4a3428;
  --bean: #241a14;
  --red: #d6402e;
  --red-deep: #b22e1e;

  --ink-soft: rgba(36, 26, 20, 0.64);
  --ink-faint: rgba(36, 26, 20, 0.38);
  --rule: rgba(36, 26, 20, 0.12);

  --font-display: "Fraunces", Georgia, serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow: 5px 5px 0 var(--bean);
  --shadow-sm: 3px 3px 0 var(--bean);
  --shadow-soft: 0 1px 2px rgba(36, 26, 20, 0.06), 0 8px 24px rgba(36, 26, 20, 0.07);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --max: 74rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.6;
  color: var(--bean);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Fraunces carries an optical-size axis (9..144). Display sizes want it high
   — tight and high-contrast. Anything at body scale wants it low, or short
   headings set so tightly they read as one long word. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.02;
}
h1, h2 { letter-spacing: -0.02em; font-variation-settings: "opsz" 120; }
h3, h4 { letter-spacing: -0.005em; line-height: 1.15; font-variation-settings: "opsz" 28; }

em {
  font-style: italic;
  font-variation-settings: "opsz" 100;
  /* The italic's right sidebearing is tight enough that the next word
     touches it; buy back the gap the roman would have had. */
  padding-right: 0.06em;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--mocha); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

/* --- shared bits -------------------------------------------------------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--coffee);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.eyebrow::before {
  content: "";
  width: 1.9rem;
  height: 2px;
  background: var(--red);
  flex: none;
}

.section-head { max-width: 46rem; }
.section-head h2 {
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem);
  margin-top: 1.1rem;
}
.section-head h2 em { color: var(--red); }
.section-head p { margin-top: 1.1rem; color: var(--ink-soft); max-width: 38rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border: 2px solid var(--bean);
  border-radius: 999px;
  background: var(--white);
  color: var(--bean);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--bean); }
.btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--bean); }
.btn--primary { background: var(--red); color: var(--white); }
.btn--ghost { background: transparent; box-shadow: none; }
.btn--ghost:hover { background: var(--crema); box-shadow: var(--shadow-sm); }
.btn--sm { font-size: 0.8rem; padding: 0.6rem 1.1rem; }
.btn--block { display: flex; width: 100%; }
.btn .arrow { transition: transform 0.25s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* --- header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.5rem; height: 4.25rem; }

.wordmark {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 30;
  margin-right: auto;
}
.wordmark .mark {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 0.6rem;
  background: var(--red);
  color: var(--white);
  flex: none;
}
.wordmark .mark svg { width: 1.1rem; height: 1.1rem; }

.site-nav { display: flex; align-items: center; gap: 1.6rem; }
.site-nav a { font-size: 0.82rem; text-decoration: none; color: var(--ink-soft); transition: color 0.2s; }
.site-nav a:hover { color: var(--bean); }
.site-nav .btn { color: var(--white); }
.site-nav .btn:hover { color: var(--white); }

@media (max-width: 62rem) { .site-nav .nav-link { display: none; } }

/* --- hero --------------------------------------------------------------- */

.hero { padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(3rem, 6vw, 5rem); }
.hero .wrap {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.hero h1 { font-size: clamp(2.7rem, 1.4rem + 6vw, 5.4rem); margin-top: 1.4rem; text-wrap: balance; }
.hero h1 em { color: var(--red); display: block; }
.hero .lede {
  margin-top: 1.6rem;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  color: var(--ink-soft);
  max-width: 32rem;
}
.hero .lede strong { color: var(--bean); font-weight: 500; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.2rem; }
.hero-note {
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.hero-note span { display: flex; align-items: center; gap: 0.45rem; }
.hero-note span::before { content: "✓"; color: var(--coffee); font-weight: 500; }

@media (max-width: 62rem) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
}

/* --- the wallet pass mock ----------------------------------------------- */

.hero-visual { display: grid; place-items: center; }

.phone {
  position: relative;
  width: min(19rem, 78vw);
  padding: 0.7rem;
  border: 2px solid var(--bean);
  border-radius: 2.2rem;
  background: var(--bean);
  box-shadow: var(--shadow);
  rotate: -1.6deg;
}
.phone::before {
  content: "";
  position: absolute;
  top: 0.95rem;
  left: 50%;
  translate: -50% 0;
  width: 4.2rem;
  height: 0.32rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.28);
}
.phone-screen { border-radius: 1.7rem; background: var(--white); padding: 2rem 0.85rem 0.9rem; overflow: hidden; }

.pass { border: 2px solid var(--bean); border-radius: 0.9rem; background: var(--crema); overflow: hidden; }
.pass-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 2px solid var(--bean);
  background: var(--red);
  color: var(--white);
}
.pass-logo {
  display: grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--white);
  color: var(--red);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8rem;
  flex: none;
}
.pass-name { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; line-height: 1.1; font-variation-settings: "opsz" 24; }
.pass-sub { font-size: 0.62rem; opacity: 0.85; letter-spacing: 0.04em; }
.pass-body { padding: 0.9rem 0.8rem 1rem; }
.pass-label { font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.pass-reward { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-top: 0.15rem; font-variation-settings: "opsz" 24; }

.stamp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.42rem; margin: 0.9rem 0 0.7rem; }
.stamp {
  aspect-ratio: 1;
  border: 2px solid var(--bean);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  color: transparent;
  background: var(--white);
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.stamp.is-filled { background: var(--red); color: var(--white); }

.pass-count {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.68rem;
  color: var(--ink-soft);
  padding-top: 0.55rem;
  border-top: 1px dashed var(--ink-faint);
}
.pass-count b { font-family: var(--font-display); font-size: 0.95rem; color: var(--bean); }

.wallet-chips { display: flex; gap: 0.4rem; margin-top: 0.85rem; }
.chip {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  font-size: 0.6rem;
  padding: 0.45rem 0.3rem;
  border: 2px solid var(--bean);
  border-radius: 0.5rem;
  background: var(--bean);
  color: var(--white);
}
.chip svg { width: 0.85em; height: 0.85em; flex: none; }

.pop {
  position: absolute;
  right: -1.4rem;
  top: 38%;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--coffee);
  opacity: 0;
  pointer-events: none;
}
.pop.is-on { animation: pop 1.1s var(--ease); }
@keyframes pop {
  0% { opacity: 0; transform: translateY(0.6rem) scale(0.8); }
  25% { opacity: 1; transform: translateY(-0.2rem) scale(1); }
  100% { opacity: 0; transform: translateY(-2.4rem) scale(1); }
}

/* --- how it works: two separate journeys -------------------------------- */

.how { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--rule); }

.journey {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 2px solid var(--bean);
  border-radius: 1.4rem;
  background: var(--white);
  box-shadow: var(--shadow-soft);
  /* Each journey owns one accent, so the reader can tell at a glance which
     of the two stories they are in. */
  --accent: var(--red);
}
.journey--merchant { background: var(--crema); --accent: var(--coffee); }

.journey-head {
  display: flex;
  align-items: baseline;
  gap: 1rem 1.4rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.journey-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "opsz" 30;
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  color: var(--accent);
}
.journey-head p { font-size: 0.85rem; color: var(--ink-soft); }

.journey-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1.8rem;
}

/* Each step is its own card. Laid out as bare rows first, the info button
   sat at the far edge of its cell and read as belonging to the next step. */
.jstep {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  padding: 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 1rem;
}
.journey--customer .jstep { background: var(--paper); }
.journey--merchant .jstep { background: var(--white); }

.jstep-top { display: flex; align-items: center; gap: 0.6rem; }
.jstep-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }

.jstep-num {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8rem;
  font-variation-settings: "opsz" 24;
}
.jstep-icon {
  display: grid;
  place-items: center;
  width: 2.7rem;
  height: 2.7rem;
  border: 2px solid var(--bean);
  border-radius: 0.8rem;
  background: var(--white);
  color: var(--accent);
}
.jstep-icon svg { width: 1.4rem; height: 1.4rem; }
.jstep h3 { font-size: 1.02rem; }

@media (max-width: 60rem) { .journey-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .journey-steps { grid-template-columns: 1fr; } }

/* --- the info disclosure ------------------------------------------------ */

.info {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  border: 1.5px solid var(--ink-faint);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.info:hover { background: var(--bean); border-color: var(--bean); color: var(--white); }

.info-panel {
  /* The UA centres a popover with `inset: 0; margin: auto`, but the `*` reset
     above zeroes the margin — author styles beat the UA sheet — and the panel
     lands in the top-left corner. Put it back. */
  margin: auto;
  max-width: min(24rem, calc(100vw - 2.5rem));
  border: 2px solid var(--bean);
  border-radius: 1rem;
  background: var(--white);
  color: var(--bean);
  padding: 1.5rem 1.5rem 1.2rem;
  box-shadow: var(--shadow);
  font-family: var(--font-mono);
  text-align: left;
}
.info-panel__who { font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); }
.info-panel__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: "opsz" 28;
  font-size: 1.15rem;
  line-height: 1.15;
  margin: 0.35rem 0 0.6rem;
}
.info-panel p:last-of-type { color: var(--ink-soft); font-size: 0.88rem; }
.info-panel::backdrop { background: rgba(36, 26, 20, 0.5); }
.info-close {
  margin-top: 1.1rem;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--bean);
  border-radius: 999px;
  background: var(--crema);
  color: var(--bean);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  cursor: pointer;
}
.info-close:hover { background: var(--bean); color: var(--white); }

/* Without popover support the panel is just a div and would render inline in
   the middle of a journey. Hide it — the titles carry the section. */
@supports not selector(:popover-open) {
  .info-panel, .info { display: none; }
}

/* --- paper vs pocket ---------------------------------------------------- */

.versus { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--rule); background: var(--paper); }
.versus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
.stat {
  border: 2px solid var(--bean);
  border-radius: 1rem;
  background: var(--white);
  padding: 1.6rem 1.4rem;
  box-shadow: var(--shadow-sm);
}
.stat .n {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 1.7rem + 2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 120;
  color: var(--red);
}
.stat p { margin-top: 0.7rem; font-size: 0.85rem; color: var(--ink-soft); }
.stat p strong { color: var(--bean); font-weight: 500; }
.stat--good .n { color: var(--coffee); }

.versus-note {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 44rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding-left: 1rem;
  border-left: 2px solid var(--mocha);
}

/* --- feature row -------------------------------------------------------- */

.why { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--rule); }
.why-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(2.2rem, 4vw, 3.2rem);
}
/* Stepped by hand rather than auto-fit: with four items, any track size that
   fits three across leaves the fourth stranded on its own row. */
@media (min-width: 40rem) { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 66rem) { .why-grid { grid-template-columns: repeat(4, 1fr); } }
.feat { padding: 1.3rem 0 1.9rem; border-top: 2px solid var(--bean); }
.feat .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--red);
}
.feat h3 { font-size: 1.25rem; margin: 0.6rem 0; }
.feat p { font-size: 0.9rem; color: var(--ink-soft); }
.feat p strong { color: var(--bean); font-weight: 500; }

/* --- pricing ------------------------------------------------------------ */

.pricing-hero { padding: clamp(3rem, 6vw, 5rem) 0 clamp(3rem, 6vw, 5rem); }
.pricing-hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.pricing-hero h1 { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 4.4rem); margin-top: 1.2rem; text-wrap: balance; }
.pricing-hero h1 em { color: var(--red); }
.pricing-hero .lede { margin-top: 1.5rem; color: var(--ink-soft); max-width: 32rem; }
.pricing-hero .lede strong { color: var(--bean); font-weight: 500; }

@media (max-width: 62rem) { .pricing-hero .wrap { grid-template-columns: 1fr; } }

.plan {
  border: 2px solid var(--bean);
  border-radius: 1.4rem;
  background: var(--white);
  box-shadow: var(--shadow);
  padding: clamp(1.6rem, 3vw, 2.2rem);
}
.plan-head { padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }
.plan-tag {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
  background: var(--red);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.plan-price {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "opsz" 120;
  font-size: clamp(3rem, 2.2rem + 3vw, 4.4rem);
  line-height: 1;
  margin-top: 0.9rem;
  letter-spacing: -0.01em;
}
.plan-price span { color: var(--coffee); font-size: 0.62em; margin-right: 0.1em; }
.plan-price small { font-family: var(--font-mono); font-size: 0.9rem; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.plan-note { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.4rem; }
.plan-list { list-style: none; margin: 1.3rem 0 1.6rem; display: grid; gap: 0.6rem; }
.plan-list li { display: flex; gap: 0.6rem; font-size: 0.85rem; color: var(--ink-soft); }
.plan-list li::before { content: "✓"; color: var(--coffee); flex: none; }
.plan-fineprint { margin-top: 1rem; font-size: 0.75rem; color: var(--ink-faint); }

.faq { padding: clamp(3.5rem, 7vw, 6rem) 0; border-top: 1px solid var(--rule); background: var(--paper); }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(1.5rem, 3vw, 2.75rem);
  margin-top: clamp(2.2rem, 4vw, 3rem);
}
@media (min-width: 48rem) { .faq-grid { grid-template-columns: repeat(2, 1fr); } }
.faq-item { padding: 1.3rem 0 1.8rem; border-top: 2px solid var(--bean); }
.faq-item h3 { font-size: 1.15rem; margin-bottom: 0.55rem; }
.faq-item p { font-size: 0.88rem; color: var(--ink-soft); }

/* --- EU trust strip ----------------------------------------------------- */

.eu { padding: clamp(3rem, 6vw, 5rem) 0; border-top: 1px solid var(--rule); background: var(--crema); }
.eu .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.eu-lead h2 { font-size: clamp(1.8rem, 1.3rem + 2.2vw, 2.9rem); margin-top: 1rem; }
.eu-lead h2 em { color: var(--coffee); }
.eu-lead p:last-child { margin-top: 1rem; color: var(--ink-soft); font-size: 0.9rem; max-width: 34rem; }

.eu-badges { display: flex; flex-wrap: wrap; gap: 1.6rem; justify-content: center; }
.eu-badge { position: relative; width: 8.5rem; display: grid; place-items: center; text-align: center; }
.eu-badge svg { width: 100%; height: auto; color: #f0b429; }
.eu-badge__text {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  font-size: 0.62rem;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bean);
}
.eu-badge__text b { display: block; font-size: 0.72rem; letter-spacing: 0.06em; }

@media (max-width: 62rem) {
  .eu .wrap { grid-template-columns: 1fr; }
  .eu-badges { justify-content: flex-start; }
}

/* --- closing CTA -------------------------------------------------------- */

.close { padding: clamp(4rem, 8vw, 6.5rem) 0; border-top: 1px solid var(--rule); background: var(--bean); color: var(--white); }
.close h2 { font-size: clamp(2.3rem, 1.4rem + 4.2vw, 4.4rem); max-width: 20ch; }
.close h2 em { color: var(--mocha); }
.close .eyebrow { color: rgba(255, 255, 255, 0.62); }
.close .eyebrow::before { background: var(--red); }
.close p { margin-top: 1.4rem; max-width: 36rem; color: rgba(255, 255, 255, 0.74); }
.close-cta { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.4rem; }
.close .btn { border-color: var(--white); }
.close .btn--primary { background: var(--red); color: var(--white); box-shadow: 3px 3px 0 var(--white); }
.close .btn--primary:hover { box-shadow: 5px 5px 0 var(--white); }
.close .btn--ghost { color: var(--white); }
.close .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); box-shadow: none; }

/* Two-up, not auto-fit: four items across three tracks strands the fourth
   on a row of its own and leaves a large hole in the dark panel. */
.checklist {
  list-style: none;
  margin-top: 2.8rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
@media (min-width: 48rem) { .checklist { grid-template-columns: repeat(2, 1fr); } }
.checklist li { display: flex; gap: 0.7rem; font-size: 0.84rem; color: rgba(255, 255, 255, 0.74); }
.checklist li::before { content: "✓"; color: var(--mocha); flex: none; }
.checklist strong { color: var(--white); font-weight: 500; }

/* --- footer ------------------------------------------------------------- */

.site-footer { background: var(--bean); color: rgba(255, 255, 255, 0.6); padding: clamp(2.5rem, 5vw, 4rem) 0 2rem; }
.site-footer .wrap {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 2rem;
  align-items: start;
}
.site-footer .wordmark { color: var(--white); font-size: 1.1rem; margin-right: 0; }
.footer-brand p { margin-top: 0.8rem; font-size: 0.8rem; max-width: 18rem; }
.footer-nav { display: grid; gap: 0.5rem; align-content: start; }
.footer-nav__head { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); }
.footer-nav a { font-size: 0.8rem; text-decoration: none; }
.footer-nav a:hover { color: var(--white); }

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 52rem) {
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

/* --- scroll reveal ------------------------------------------------------ */

.reveal { opacity: 0; transform: translateY(1.4rem); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .pop.is-on { animation: none; }
  .btn, .btn .arrow { transition: none; }
}