/* =========================================================================
   Kitavia — Landing Page Styles
   HTML5 / CSS3 / Vanilla JS · No frameworks · No build step
   Sections:
     1.  Design tokens (:root)
     2.  Reset & base
     3.  Layout helpers
     4.  Buttons & badges
     5.  Navigation
     6.  Hero
     7.  Brand differentiation
     8.  Stats strip
     9.  Features (bento)
     10. How it works
     11. Manifesto (no social pressure)
     12. Use cases
     13. Final CTA
     14. Footer
     15. Image placeholders (controlled fallback)
     16. Scroll reveal
     17. Responsive
     18. Reduced motion
   ========================================================================= */

/* ============================ 1. DESIGN TOKENS ========================== */
:root {
  /* Warm brand palette */
  --walnut-950: #2d1b12;
  --walnut-900: #3a2418;
  --walnut-800: #4a2e1e;
  --walnut-700: #65402a;
  --amberwood-600: #b9673b;
  --amberwood-500: #c87a44;
  --amberwood-400: #db9563;
  --cream-50: #fffaf3;
  --cream-100: #f8efe3;
  --cream-200: #eddfcf;
  --sand-300: #d8c2a9;
  --text-primary: #33251d;
  --text-secondary: #725f52;
  --white: #ffffff;

  /* Typography */
  --font-body: "Nunito", "Avenir Next", "Segoe UI", Arial, sans-serif;

  /* Radii */
  --r-card-lg: 28px;
  --r-card-sm: 20px;
  --r-btn: 16px;
  --r-pill: 999px;

  /* Soft, warm shadows (never hard black) */
  --shadow-sm: 0 2px 8px rgba(74, 46, 30, 0.08);
  --shadow-md: 0 10px 30px rgba(74, 46, 30, 0.10);
  --shadow-lg: 0 24px 60px rgba(45, 27, 18, 0.16);

  /* Spacing rhythm */
  --section-py: clamp(64px, 9vw, 120px);
  --container: 1220px;
  --gutter: clamp(20px, 5vw, 48px);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ============================ 2. RESET & BASE =========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-primary);
  background-color: var(--cream-50);
  /* Very light paper feel + soft warm light — sand/cream tones only */
  background-image:
    radial-gradient(1100px 620px at 85% -8%, rgba(216, 194, 169, 0.35), transparent 60%),
    radial-gradient(900px 520px at -10% 8%, rgba(237, 223, 207, 0.5), transparent 55%);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0 0 0.4em;
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

p {
  margin: 0 0 1em;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg {
  max-width: 100%;
  display: block;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Accessible skip link */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 1000;
  background: var(--walnut-900);
  color: var(--cream-50);
  padding: 12px 20px;
  border-radius: 0 0 var(--r-btn) 0;
}
.skip-link:focus {
  left: 0;
}

/* Visible, warm focus style */
:focus-visible {
  outline: 3px solid var(--amberwood-500);
  outline-offset: 3px;
  border-radius: 6px;
}

.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;
}

/* ============================ 3. LAYOUT HELPERS ========================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-py);
}

.section__head {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(36px, 5vw, 60px);
}

.eyebrow {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amberwood-600);
  background: var(--cream-200);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: 18px;
}

h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); max-width: 800px; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }

.lead {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  color: var(--text-secondary);
  max-width: 640px;
}
.section__head .lead { margin-inline: auto; }

/* ============================ 4. BUTTONS & BADGES ====================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--r-btn);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
    background-color 0.2s var(--ease);
}

.btn--primary {
  background: var(--amberwood-600);
  color: var(--cream-50);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--amberwood-500); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: var(--white);
  color: var(--walnut-900);
  box-shadow: inset 0 0 0 1.5px var(--cream-200), var(--shadow-sm);
}
.btn--ghost:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--sand-300), var(--shadow-md); }
.btn--ghost:active { transform: translateY(0); }

/* Store badge links */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.store-badge {
  display: inline-flex;
  border-radius: 12px;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: var(--shadow-sm);
}
.store-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.store-badge img { height: 56px; width: auto; }

/* ============================ 5. NAVIGATION ============================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
}

/* Sticky/scrolled state — warm translucent cream + subtle blur + hairline */
.nav.is-scrolled {
  background: rgba(255, 250, 243, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(216, 194, 169, 0.6), var(--shadow-sm);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  color: var(--walnut-900);
}
.brand__mark { width: 34px; height: 34px; flex: none; }

.nav__links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav__links a:not(.btn) {
  padding: 9px 14px;
  border-radius: var(--r-btn);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--text-secondary);
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.nav__links a:not(.btn):hover { color: var(--walnut-900); background: var(--cream-100); }
.nav__cta { margin-left: 8px; }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  background: var(--cream-100);
  border-radius: 12px;
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--walnut-900);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle span { position: relative; }
.nav__toggle span::before { position: absolute; top: -6px; }
.nav__toggle span::after { position: absolute; top: 6px; }
/* Toggle → X */
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

/* ============================ 6. HERO ================================= */
.hero {
  position: relative;
  padding-block: clamp(48px, 7vw, 92px) var(--section-py);
  overflow: hidden;
}
/* Decorative ambient shapes — sand/cream tones only (no amberwood glow) */
.hero__ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero__ambient::before,
.hero__ambient::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
}
.hero__ambient::before {
  width: 460px; height: 460px;
  top: -140px; right: -80px;
  background: radial-gradient(circle, rgba(216, 194, 169, 0.55), transparent 70%);
}
.hero__ambient::after {
  width: 380px; height: 380px;
  bottom: -120px; left: -100px;
  background: radial-gradient(circle, rgba(237, 223, 207, 0.7), transparent 70%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(32px, 5vw, 64px);
}

.hero__title .accent {
  display: block;
  color: var(--amberwood-600);
}
.hero__desc {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: var(--text-secondary);
  max-width: 560px;
  margin-bottom: 28px;
}
.hero__actions { margin-bottom: 20px; }

/* Quiet, supportive trust line */
.trust-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  font-weight: 600;
}
.trust-line .dot { color: var(--sand-300); }

/* Device-aware helper button */
.smart-open {
  margin-top: 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--amberwood-600);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.smart-open:hover { border-bottom-color: var(--amberwood-400); }

/* Phone frame around real screenshot */
.hero__media { position: relative; }
.phone {
  position: relative;
  width: min(340px, 82%);
  margin-inline: auto;
  border-radius: 42px;
  padding: 12px;
  background: linear-gradient(160deg, var(--walnut-800), var(--walnut-950));
  box-shadow: var(--shadow-lg);
}
.phone::before {
  content: "";
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  width: 108px; height: 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 250, 243, 0.28);
}
.phone__screen {
  border-radius: 32px;
  overflow: hidden;
  background: var(--cream-100);
  aspect-ratio: 9 / 19;
}
.phone__screen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* thin decorative shelf line under phone */
.hero__shelf {
  width: min(360px, 88%);
  height: 14px;
  margin: -6px auto 0;
  border-radius: var(--r-pill);
  background: linear-gradient(var(--sand-300), var(--cream-200));
  box-shadow: var(--shadow-sm);
}

/* ============================ 7. BRAND DIFFERENTIATION ================= */
.differ__head { max-width: 760px; }
.differ__sub {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 800;
  color: var(--amberwood-600);
  margin-top: 18px;
}
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 3vw, 28px);
  margin-top: clamp(36px, 5vw, 52px);
}
.compare__card {
  border-radius: var(--r-card-lg);
  padding: clamp(24px, 3vw, 36px);
}
.compare__card--plain {
  background: var(--white);
  box-shadow: inset 0 0 0 1.5px var(--cream-200);
  color: var(--text-secondary);
}
.compare__card--plain h3 { color: var(--text-secondary); }
.compare__card--kitavia {
  background: linear-gradient(165deg, var(--walnut-800), var(--walnut-950));
  color: var(--cream-100);
  box-shadow: var(--shadow-lg);
}
.compare__card--kitavia h3 { color: var(--cream-50); }
.compare__list li {
  display: flex;
  gap: 12px;
  padding: 9px 0;
  align-items: flex-start;
}
.compare__list .ic { flex: none; margin-top: 2px; }
.compare__card--plain .ic { color: var(--sand-300); }
.compare__card--kitavia .ic { color: var(--amberwood-400); }

/* ============================ 8. STATS STRIP ========================== */
.stats {
  background: var(--cream-100);
  border-block: 1px solid var(--cream-200);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 4vw, 40px);
  text-align: center;
}
.stat__value {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--walnut-900);
  letter-spacing: -0.02em;
}
.stat__label {
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.98rem;
}
.stat + .stat { border-left: 1px solid var(--cream-200); }

/* ============================ 9. FEATURES (BENTO) ===================== */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.feature {
  position: relative;
  background: var(--white);
  border-radius: var(--r-card-lg);
  padding: clamp(22px, 2.6vw, 34px);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.feature__icon {
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--cream-100);
  color: var(--amberwood-600);
  flex: none;
}
.feature__body { flex: 1; }
.feature__text { color: var(--text-secondary); margin-bottom: 0; }
.feature__note {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 10px;
}

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tag {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--walnut-800);
  background: var(--cream-100);
  padding: 6px 12px;
  border-radius: var(--r-pill);
}

.feature__media {
  margin-top: auto;
}

/* Bento spans (desktop). DOM order already matches visual order:
   Row 1: shelf (4) + add (2)
   Row 2: lists (2) + status (2) + stats (2)  ← trio of full phone screens
   Row 3: catalog (3) + journal (3)
   Row 4: share (6, two-column) */
.feature--shelf   { grid-column: span 4; }
.feature--add     { grid-column: span 2; }
.feature--lists   { grid-column: span 2; }
.feature--status  { grid-column: span 2; }
.feature--stats   { grid-column: span 2; }
.feature--catalog { grid-column: span 3; }
.feature--journal { grid-column: span 3; }
.feature--share   { grid-column: span 6; }

/* Featured shelf card — media prominent */
.feature--shelf,
.feature--share {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  background: linear-gradient(160deg, var(--cream-100), var(--white));
}
.feature--shelf .feature__body,
.feature--share .feature__body { align-self: center; }

/* Big calm number inside catalog card */
.mega-number {
  font-size: clamp(2.4rem, 4vw, 3.2rem);
  font-weight: 800;
  color: var(--amberwood-600);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ============================ 10. HOW IT WORKS ======================== */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 28px);
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--white);
  border-radius: var(--r-card-lg);
  padding: clamp(26px, 3vw, 38px);
  box-shadow: var(--shadow-sm);
}
.step__num {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--amberwood-600);
  color: var(--cream-50);
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 18px;
}
.step__text { color: var(--text-secondary); margin-bottom: 0; }
/* Thin connecting line between steps (desktop) */
.step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: clamp(52px, 5.6vw, 65px);
  right: calc(-1 * clamp(18px, 3vw, 28px) / 2 - 1px);
  width: clamp(18px, 3vw, 28px);
  height: 2px;
  background: var(--sand-300);
}

/* ============================ 11. MANIFESTO ========================== */
.manifesto {
  background: linear-gradient(165deg, var(--walnut-800), var(--walnut-950));
  color: var(--cream-100);
  border-radius: 0;
}
.manifesto .eyebrow { background: rgba(255, 250, 243, 0.12); color: var(--amberwood-400); }
.manifesto h2 { color: var(--cream-50); max-width: 640px; }
.manifesto__text {
  color: var(--cream-200);
  max-width: 640px;
  font-size: 1.1rem;
}
.manifesto__list {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}
.manifesto__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(255, 250, 243, 0.06);
  border: 1px solid rgba(216, 194, 169, 0.18);
  border-radius: var(--r-pill);
  font-weight: 700;
}
.manifesto__list .ic { color: var(--amberwood-400); }

/* ============================ 12. USE CASES ========================== */
.usecases {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.usecase {
  background: var(--white);
  border-radius: var(--r-card-sm);
  padding: clamp(22px, 2.6vw, 30px);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.usecase:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.usecase__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--cream-100);
  color: var(--amberwood-600);
  margin-bottom: 16px;
}
.usecase h3 { font-size: 1.1rem; }
.usecase p { color: var(--text-secondary); margin-bottom: 0; font-size: 0.98rem; }

/* ============================ 13. FINAL CTA ========================== */
.final-cta { position: relative; overflow: hidden; }
.cta-card {
  position: relative;
  background: linear-gradient(160deg, var(--amberwood-600), var(--walnut-800));
  color: var(--cream-50);
  border-radius: var(--r-card-lg);
  padding: clamp(36px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* ambient decoration — sand/cream, not amberwood */
.cta-card::after {
  content: "";
  position: absolute;
  width: 420px; height: 420px;
  top: -160px; right: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(237, 223, 207, 0.28), transparent 70%);
  pointer-events: none;
}
.cta-card__body { position: relative; z-index: 1; }
.cta-card h2 { color: var(--cream-50); max-width: 520px; }
.cta-card__text { color: var(--cream-100); max-width: 500px; font-size: 1.08rem; }
.cta-card__note { font-size: 0.9rem; color: rgba(255, 250, 243, 0.82); margin-top: 14px; margin-bottom: 0; }
.cta-card__media { position: relative; z-index: 1; }
.cta-card .phone { width: min(280px, 90%); }
.cta-card .store-badge { box-shadow: var(--shadow-md); }

/* ============================ 14. FOOTER ============================= */
.footer {
  background: var(--walnut-950);
  color: var(--cream-200);
  padding-block: clamp(48px, 6vw, 76px) 36px;
}
.footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: 44px;
}
.footer .brand { color: var(--cream-50); }
.footer__about { color: var(--sand-300); max-width: 320px; margin-top: 16px; font-size: 0.98rem; }
.footer__badges { margin-top: 22px; }
.footer__badges .store-badge img { height: 48px; }
.footer h4 {
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amberwood-400);
  margin-bottom: 14px;
}
.footer__links li { margin-bottom: 10px; }
.footer__links a {
  color: var(--cream-200);
  font-weight: 600;
  transition: color 0.2s var(--ease);
}
.footer__links a:hover { color: var(--cream-50); }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding-top: 26px;
  border-top: 1px solid rgba(216, 194, 169, 0.16);
  font-size: 0.9rem;
  color: var(--sand-300);
}
/* ============================ 15. IMAGE PLACEHOLDERS ================= */
/* Controlled fallback: img sits above placeholder; JS hides img on error,
   revealing the placeholder underneath. Placeholders never look like a
   real app screen. */
.imgwrap {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 28px 20px;
  min-height: 100%;
  background:
    repeating-linear-gradient(-45deg, transparent 0 14px, rgba(216, 194, 169, 0.10) 14px 15px),
    linear-gradient(160deg, var(--cream-100), var(--cream-200));
  color: var(--text-secondary);
  border-radius: inherit;
}
.placeholder__icon { color: var(--amberwood-600); opacity: 0.85; }
.placeholder__file {
  font-weight: 800;
  color: var(--walnut-800);
  font-size: 0.95rem;
  word-break: break-all;
}
.placeholder__hint { font-size: 0.85rem; max-width: 240px; margin: 0; }

/* When img is present it covers the placeholder; when it fails, we add
   .is-broken to hide it. */
.imgwrap img { position: relative; z-index: 1; }
.imgwrap img.is-broken { display: none; }
/* Placeholder fills the wrap behind the image */
.imgwrap .placeholder {
  position: absolute;
  inset: 0;
  z-index: 0;
}
/* Phone screen placeholder needs the wrap to fill height */
.phone__screen .imgwrap { height: 100%; }

/* Cover-fit screenshots: image fills the fixed-aspect wrap, cropping to top
   so each capture shows its header/first content instead of empty space.
   Only used where a landscape/near-square frame genuinely needs cropping. */
.imgwrap.is-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
/* Framed look for in-card screenshots */
.feature__media .imgwrap {
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--cream-200);
  background: var(--cream-100);
}

/* Full, uncropped phone screenshots — the whole screen stays legible, no
   part of the UI is cut off. Image keeps its natural aspect ratio and is
   capped to a comfortable width inside its card. */
.feature__media.is-full {
  display: flex;
  justify-content: center;
  padding-top: 8px;
  /* Center in whatever free space is left in the card, instead of the
     base .feature__media bottom-anchor — screenshots here vary in height,
     so bottom-anchoring alone can leave an odd gap above a shorter image. */
  margin-top: auto;
  margin-bottom: auto;
}
.feature__media.is-full .imgwrap {
  width: 100%;
  max-width: 230px;
  border-radius: 18px;
  overflow: hidden;
}
.feature__media.is-full .imgwrap img {
  display: block;
  width: 100%;
  height: auto;
}
/* Wider variant for cards with more horizontal room (e.g. two-column share card) */
.feature__media.is-full.is-wide .imgwrap { max-width: 280px; }

/* "Add a book" methods triptych */
.addmethods {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: auto;
}
.addmethods .imgwrap { box-shadow: var(--shadow-sm); border: 1px solid var(--cream-200); }

/* ============================ 16. SCROLL REVEAL ===================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================ 17. RESPONSIVE ======================== */
@media (max-width: 1023px) {
  /* Pairs match DOM order: shelf alone, then add+lists, status+stats,
     catalog+journal, share alone (base span 6). */
  .feature--shelf   { grid-column: span 6; }
  .feature--add     { grid-column: span 3; }
  .feature--lists   { grid-column: span 3; }
  .feature--status  { grid-column: span 3; }
  .feature--stats   { grid-column: span 3; }
  .feature--catalog { grid-column: span 3; }
  .feature--journal { grid-column: span 3; }
  .usecases { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Nav → hamburger */
  .nav__toggle { display: inline-flex; }
  .nav__links {
    position: absolute;
    top: calc(100% + 8px);
    right: var(--gutter);
    left: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: rgba(255, 250, 243, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid var(--cream-200);
    border-radius: var(--r-card-sm);
    padding: 14px;
    box-shadow: var(--shadow-lg);
    /* Hidden state — collapsed */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease),
      visibility 0.25s var(--ease);
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__links a:not(.btn) { padding: 12px 14px; font-size: 1.05rem; }
  .nav__cta { margin-left: 0; margin-top: 6px; }
  .nav__cta .btn { width: 100%; }
}

@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: 2; }
  .hero__copy { order: 1; }
  .compare { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .step:not(:last-child)::after { display: none; }
  .cta-card { grid-template-columns: 1fr; text-align: center; }
  .cta-card h2, .cta-card__text { margin-inline: auto; }
  .cta-card .store-badges { justify-content: center; }
  .cta-card__media { order: -1; }
  .feature--shelf, .feature--share { grid-template-columns: 1fr; }
  .feature--share .feature__media { order: -1; }
  .footer__top { grid-template-columns: 1fr 1fr; }
  .footer__brandcol { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .stats__grid { grid-template-columns: 1fr; gap: 24px; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--cream-200); padding-top: 24px; }
  .usecases { grid-template-columns: 1fr; }
  .feature--add, .feature--lists, .feature--status,
  .feature--stats, .feature--catalog, .feature--journal { grid-column: span 6; }
  .store-badges { justify-content: flex-start; }
  .footer__top { grid-template-columns: 1fr; }
  .hero__actions .store-badges { flex-direction: column; }
  .hero__actions .store-badge { width: 100%; }
  .hero__actions .store-badge img { width: 100%; height: auto; }
}

/* ============================ 18. REDUCED MOTION ==================== */
@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;
  }
  .reveal { opacity: 1; transform: none; }
}