/* The front page (/, Cms\View\HomeView). Mobile first: every rule
   below is the phone layout, and the two media queries at the end only widen
   it. Colours, type and buttons come from styles.css's tokens, so it reads as
   the same site. */

.h2 { overflow-x: clip; }
/* width/height attributes reserve space against layout shift; CSS decides the
   drawn shape, so the attribute height must not win over aspect-ratio. */
.h2 img { height: auto; max-width: 100%; }
/* The stories page's cards on a campaign page (tales block, look: grid) keep their 4:3 crop, or the picture covers the title. */
.h2 .library-tile-image img { height: 100%; }
.h2-wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.h2 h1, .h2 h2, .h2 h3 { font-family: var(--display); letter-spacing: -.015em; color: var(--ink); }
.h2 h2 { font-size: clamp(26px, 6.4vw, 38px); line-height: 1.12; margin: 0 0 10px; }
.h2 h3 { font-size: 18px; line-height: 1.25; margin: 0 0 4px; }
.h2 p { line-height: 1.6; }
.h2 .eyebrow { margin-bottom: 12px; }
.h2-lead { color: var(--ink-soft); font-size: 16px; margin: 0 0 20px; max-width: 58ch; }
.h2-more { margin: 20px 0 0; text-align: center; }
.h2-section { padding: 44px 0; }
.h2-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--plum); font-weight: 700; text-decoration: none;
}
.h2-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.h2 .btn-ghost { text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
.h2 a:focus-visible, .h2 button:focus-visible, .h2 [tabindex]:focus-visible, .h2-sticky a:focus-visible {
  outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 12px;
}

/* The one call to action: full-width on a phone so it is an easy thumb
   target, never smaller than 52px tall. */
.h2-cta {
  justify-content: center; text-decoration: none; min-height: 52px;
  padding: 14px 28px; font-size: 17px;
}

/* ------------------------------------------------------------------ hero */
.h2-hero { padding: 20px 0 8px; }
.h2-hero-grid { display: grid; gap: 26px; }
.h2-hero-copy { text-align: center; }
.h2-hero h1 { font-size: clamp(31px, 8.6vw, 54px); line-height: 1.06; margin: 0 0 12px; }
.h2-sub { color: var(--ink-soft); font-size: 17px; margin: 0 auto 20px; max-width: 34ch; }
.h2-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.h2-actions .h2-link { justify-content: center; }
.h2-note { margin: 4px 0 0; font-size: 14px; color: var(--ink-soft); }

/* Photo -> page. The page is the hero image; the polaroid overlaps its
   corner so the eye reads left-to-right "this photo, this page". */
.h2-proof { position: relative; margin: 0 auto; width: min(100%, 360px); padding: 0 0 0 18px; }
.h2-proof-page {
  margin-left: auto; width: 78%; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg); aspect-ratio: 2 / 3; background: var(--cream-2);
}
.h2-proof-page img { display: block; width: 100%; height: 100%; object-fit: cover; }
.h2-proof-photo {
  position: absolute; left: 0; bottom: 34px; width: 42%;
  background: #fff; padding: 7px 7px 6px; border-radius: 6px;
  box-shadow: var(--shadow-md); transform: rotate(-5deg);
}
.h2-proof-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3px; }
.h2-proof-photo span { display: block; text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-soft); padding-top: 4px; }
.h2-proof-arrow { position: absolute; left: 12%; bottom: 47%; color: var(--coral); transform: rotate(-20deg); }
.h2-proof-arrow svg { width: 44px; height: 44px; stroke-width: 2.2; }
.h2-proof figcaption { text-align: center; margin-top: 12px; font-size: 14px; color: var(--ink-soft); font-weight: 600; }

/* ----------------------------------------------------------------- steps */
.h2-steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; }
.h2-steps li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px;
}
.h2-steps p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.h2-step-num {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--plum); color: #fff; font-weight: 700; font-family: var(--display);
}

/* ----------------------------------------------------------------- rails */
.h2-rail { position: relative; margin: 0 -20px; }
.h2-rail-track {
  list-style: none; margin: 0; padding: 4px 20px 14px;
  display: grid; grid-auto-flow: column; gap: 14px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.h2-rail-track::-webkit-scrollbar { display: none; }
.h2-rail-track > li { scroll-snap-align: start; }
.h2-rail-book .h2-rail-track { grid-auto-columns: 78%; }
.h2-rail-tales .h2-rail-track { grid-auto-columns: 44%; }
.h2-rail-btn { display: none; }

/* A light shadow only: the track scrolls, so it clips anything wider. */
.h2-slide figure { margin: 0; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); height: 100%; }
.h2-slide img { display: block; width: 100%; aspect-ratio: 2 / 3; object-fit: cover; background: var(--cream-2); }
.h2-slide figcaption { padding: 12px 14px 16px; font-size: 15px; line-height: 1.5; }
.h2-slide-num { display: block; font-size: 12px; font-weight: 700; color: var(--plum); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }

.h2-tale { display: block; text-decoration: none; color: inherit; }
.h2-tale img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 14px; box-shadow: var(--shadow-sm); background: var(--cream-2); }
.h2-tale-title { display: block; font-weight: 700; margin-top: 8px; line-height: 1.3; }
.h2-tale-tag { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--ink-soft); line-height: 1.4; }

/* ------------------------------------------------------------------ cast */
.h2-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.h2-chips li { background: #fff; border: 1.5px solid var(--border); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; color: var(--plum); }

/* -------------------------------------------------------------- features */
.h2-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.h2-features li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.h2-features li:last-child { border-bottom: 0; }
.h2-features p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.h2-icon { flex: 0 0 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(107, 74, 143, .1); color: var(--plum); }

/* ----------------------------------------------------------------- price */
.h2-card { background: var(--paper); border: 1px solid var(--border); border-radius: 24px; padding: 24px 20px; box-shadow: var(--shadow-sm); }
.h2-price-from { font-size: 18px; font-weight: 700; margin: 0 0 12px; }
.h2-free { display: flex; gap: 10px; align-items: center; background: #fff4e6; color: #8a4b12; border-radius: 12px; padding: 10px 12px; margin: 0 0 16px; font-weight: 700; }
.h2-free svg { flex: 0 0 auto; }
.h2-packs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.h2-packs li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: 14px; background: #fff; }
.h2-packs li.is-featured { border-color: var(--coral); }
.h2-pack-credits { font-weight: 700; }
.h2-pack-credits em { font-style: normal; font-size: 12px; background: var(--coral); color: #fff; border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; }
.h2-pack-price { font-weight: 700; color: var(--plum); white-space: nowrap; }
.h2-pack-price small { color: #1d7a5c; font-weight: 700; margin-left: 4px; }
.h2-fine { margin: 14px 0 0; font-size: 14px; color: var(--ink-soft); }

/* ----------------------------------------------------------------- trust */
.h2-trust ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.h2-trust li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.h2-trust li svg { flex: 0 0 28px; height: 28px; padding: 4px; border-radius: 50%; background: var(--mint); color: #134b3c; stroke-width: 2.4; }

/* ------------------------------------------------------------------- faq */
.h2-faq .faq-list { margin-top: 16px; }
.h2-faq summary { min-height: 44px; display: flex; align-items: center; }

/* ----------------------------------------------------------------- final */
.h2-final { padding: 12px 16px 56px; }
.h2-final .h2-wrap {
  text-align: center; background: linear-gradient(160deg, var(--plum), var(--plum-dark));
  color: #fff; border-radius: 28px; padding: 36px 22px; max-width: 1040px;
}
.h2-final h2 { color: #fff; }
.h2-final p { color: rgba(255, 255, 255, .86); margin: 0 0 22px; }
.h2-final .h2-cta { width: 100%; max-width: 360px; }

/* ---------------------------------------------------------------- sticky */
.h2-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(253, 248, 241, .94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(60, 40, 80, .1);
  transform: translateY(110%); transition: transform .22s ease;
}
.h2-sticky.is-shown { transform: none; }
.h2-sticky .h2-cta { flex: 1; padding: 12px 18px; min-height: 48px; }
.h2-sticky-note { flex: 0 1 auto; font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1.3; max-width: 9.5em; }
/* The floating store picker (account.css) lives in the same corner; it
   steps up above the bar rather than covering its button. */
/* The bar must never sit over the footer's last links. */
.front-page { padding-bottom: 76px; }

@media (prefers-reduced-motion: reduce) {
  .h2-sticky { transition: none; }
  .h2-rail-track { scroll-behavior: auto; }
}

/* ------------------------------------------------------ larger phones up */
@media (min-width: 560px) {
  .h2-actions { flex-direction: row; justify-content: center; align-items: center; gap: 18px; }
  .h2-rail-book .h2-rail-track { grid-auto-columns: 46%; }
  .h2-rail-tales .h2-rail-track { grid-auto-columns: 30%; }
  .h2-features { grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .h2-features li:nth-last-child(2) { border-bottom: 0; }
}

/* ------------------------------------------------------------ desktop */
@media (min-width: 900px) {
  .h2-section { padding: 64px 0; }
  .h2-hero { padding: 48px 0 24px; }
  .h2-hero-grid { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; }
  .h2-hero-copy { text-align: left; }
  .h2-sub { margin-left: 0; }
  .h2-actions { justify-content: flex-start; }
  .h2-proof { width: 420px; }
  .h2-steps { grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .h2-steps li { flex-direction: column; padding: 22px; }
  .h2-rail { margin: 0; }
  .h2-rail-track { padding: 4px 2px 14px; scroll-padding: 0; }
  .h2-rail-book .h2-rail-track { grid-auto-columns: calc((100% - 42px) / 4); }
  .h2-rail-tales .h2-rail-track { grid-auto-columns: calc((100% - 56px) / 5); }
  .h2-rail-btn {
    display: grid; place-items: center; position: absolute; top: 38%; z-index: 2;
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--border);
    background: #fff; color: var(--plum); box-shadow: var(--shadow-md); cursor: pointer;
  }
  .h2-rail-btn.is-prev { left: -22px; }
  .h2-rail-btn.is-next { right: -22px; }
  .h2-rail-btn[disabled] { opacity: 0; pointer-events: none; }
  .h2-cast .h2-wrap, .h2-trust .h2-wrap { text-align: center; }
  .h2-cast .h2-lead { margin-left: auto; margin-right: auto; }
  .h2-chips { justify-content: center; }
  .h2-trust ul { grid-template-columns: repeat(3, 1fr); text-align: left; }
  .h2-features { grid-template-columns: repeat(3, 1fr); }
  .h2-features li { border-bottom: 0; }
  .h2-price .h2-card { max-width: 640px; margin: 0 auto; padding: 32px; }
  .h2-faq .h2-wrap { max-width: 760px; }
  .h2-final .h2-wrap { padding: 56px 32px; }
  /* A pointer device has the header and the hero's own button; the bar is a
     phone affordance. */
  .h2-sticky { display: none; }
  .front-page { padding-bottom: 0; }
}

@media (hover: none) {
  .h2-rail-btn { display: none !important; }
}