/* ============================================
   Timeline Scan: /funeral-photo-slideshow/
   (WEBSITE_CLARITY_PLAN.md section 16)

   Every picture on this page is a real Family Library screen, taken from the
   demo library by dashboard/e2e/demo/funeral-shots.spec.ts. The page only
   frames them: a browser window for the slideshow, cards for the rest, and a
   few gold markers and rings placed over them by percentage. When a re-shoot
   moves a control, that spec prints the new percentages.

   Uses the shared .xp-head / .xp-keys / .xp-marker / .xp-gpa pieces from
   export-pages.css; everything here is the page's own.
   ============================================ */

/* ── Hero: the slideshow playing, inside the first fold ──────────────── */

.fsl-hero .hero__subtitle {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}

.fsl-hero .hero__buttons {
  margin-top: 1.4rem;
}

.fsl-show {
  max-width: 540px;
  margin: 1.6rem auto 0;
}

/* A browser window, the same one the Family Library page draws: a title bar
   with three dots, then the screen. */
.fsl-screen {
  --win-dot: #D8CDBC;
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-warm);
  box-shadow:
    0 0 0 1px var(--border),
    0 22px 44px -22px rgba(61, 43, 31, 0.5),
    0 6px 14px -6px rgba(61, 43, 31, 0.16);
}

[data-theme="dark"] .fsl-screen {
  --win-dot: #4A423B;
  box-shadow:
    0 0 0 1px var(--border),
    0 22px 44px -20px rgba(0, 0, 0, 0.7),
    0 6px 14px -6px rgba(0, 0, 0, 0.45);
}

.fsl-screen__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 11px;
  border-bottom: 1px solid var(--border);
}

.fsl-screen__bar span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--win-dot);
}

.fsl-screen img {
  display: block;
  width: 100%;
  height: auto;
  background: #0d0c0b;
}

/* The order it plays in: the same family's prints, oldest on the left, the
   one on the screen ringed. A page figure, not part of the player. */
.fsl-years {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 0.9rem 0 0;
  padding: 0;
}

.fsl-years li {
  margin: 0;
  text-align: center;
}

.fsl-years img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid var(--card-bg);
  box-shadow: var(--shadow-md);
  opacity: 0.86;
}

.fsl-years span {
  display: block;
  margin-top: 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.fsl-years__now img {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-md);
}

.fsl-years__now span {
  color: var(--accent);
}

/* "Demo family. Every photo is computer-generated." */
.fsl-note {
  margin: 0.6rem 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-muted);
}

/* Desktop: copy left, the slideshow right, so it shares the first screen
   with the CTA there too. The phone keeps headline, picture, CTA. */
@media (min-width: 880px) {
  .fsl-hero {
    padding-top: 3rem;
  }

  .fsl-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(340px, 500px);
    grid-template-areas:
      "tagline show"
      "h1 show"
      "byline show"
      "subtitle show"
      "buttons show"
      "trust show";
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-content: center;
    align-items: center;
    max-width: 1060px;
    margin: 0 auto;
    text-align: left;
  }

  .fsl-hero__grid > .hero__tagline { grid-area: tagline; }
  .fsl-hero__grid > h1 { grid-area: h1; margin-left: 0; margin-right: 0; max-width: none; }
  .fsl-hero__grid > .byline { grid-area: byline; }
  .fsl-hero__grid > .hero__subtitle { grid-area: subtitle; margin-left: 0; margin-right: 0; max-width: none; }
  .fsl-hero__grid > .fsl-show { grid-area: show; margin: 0; width: 100%; max-width: none; }
  .fsl-hero__grid > .hero__buttons { grid-area: buttons; justify-content: flex-start; }
  .fsl-hero__grid > .hero__trust { grid-area: trust; justify-content: flex-start; }
}

/* Phone fold budget: the picture and the primary CTA share the first
   screen (tests/funeral-slideshow.spec.mjs pins it at 390 by 844). */
@media (max-width: 640px) {
  .fsl-hero { padding-top: 1.3rem; }
  .fsl-hero .byline { display: none; }
  .fsl-hero .hero__tagline { font-size: 0.66rem; letter-spacing: 0.14em; margin-bottom: 0.35rem; }
  .fsl-hero h1 { margin-top: 0.4rem; margin-bottom: 0.7rem; }
  .fsl-hero .hero__subtitle { margin-bottom: 0.8rem; }
  .fsl-show { margin-top: 0.9rem; }
  .fsl-screen__bar { height: 16px; padding: 0 8px; gap: 5px; }
  .fsl-screen__bar span { width: 6px; height: 6px; }
  .fsl-years { gap: 5px; margin-top: 0.6rem; }
  .fsl-years span { font-size: 0.66rem; margin-top: 0.15rem; }
  .fsl-note { margin-top: 0.35rem; font-size: 0.72rem; }
  .fsl-hero .hero__buttons { margin-top: 0.9rem; }
}

/* ── How it works: three real screens, one step each ─────────────────── */

.fsl-steps {
  list-style: none;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 3rem;
}

.fsl-step {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
}

.fsl-step:nth-child(even) .fsl-step__shot {
  order: 2;
}

.fsl-shotframe {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #FAF2E7;
  box-shadow: 0 0 0 1px var(--border), var(--shadow-lg);
}

.fsl-shotframe img {
  display: block;
  width: 100%;
  height: auto;
}

.fsl-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFDF8;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
}

.fsl-step__kicker {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fsl-step__title {
  margin: 0 0 0.45rem;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
}

.fsl-step__line {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

/* A ring around the one control a step is about. Gold on any theme, since
   the screens themselves are always the light app. */
.fsl-ring {
  position: absolute;
  border: 3px solid #B8860B;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.22);
  pointer-events: none;
  animation: fsl-ring-pulse 2.4s ease-in-out 3;
}

@keyframes fsl-ring-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(184, 134, 11, 0.22); }
  50% { box-shadow: 0 0 0 9px rgba(184, 134, 11, 0.08); }
}

@media (prefers-reduced-motion: reduce) {
  .fsl-ring { animation: none; }
}

@media (max-width: 760px) {
  .fsl-steps { gap: 2.4rem; }
  .fsl-step { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .fsl-step:nth-child(even) .fsl-step__shot { order: 0; }
  .fsl-step__title { font-size: 1.35rem; }
  .fsl-ring { border-width: 2px; box-shadow: 0 0 0 3px rgba(184, 134, 11, 0.22); }
}

/* Then, for the service: the three finishes, each a door to its section. */
.fsl-fork {
  max-width: 980px;
  margin: 3.4rem auto 0;
}

.fsl-fork__lead {
  margin: 0 0 1rem;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.fsl-fork__options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.fsl-fork__options .xp-flow__option {
  height: 100%;
}

@media (max-width: 860px) {
  .fsl-fork__options { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; }
}

/* ── Option 1: the player, numbered ──────────────────────────────────── */

.fsl-player-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #0d0c0b;
  box-shadow: 0 0 0 1px var(--border), var(--shadow-lg);
}

.fsl-player-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* A numbered marker over the screenshot, centred on the point it names.
   The shared .xp-marker draws the gold disc; this only places it. */
.fsl-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  font-size: 0.74rem;
  box-shadow: 0 0 0 2px #FFFDF8, 0 2px 8px rgba(0, 0, 0, 0.45);
  cursor: pointer;
}

.fsl-pin.is-linked {
  transform: translate(-50%, -50%) scale(1.35);
}

@media (max-width: 560px) {
  .fsl-pin { width: 20px; height: 20px; font-size: 0.66rem; }
}

/* Or play only some of them: an album, or one person. */
.fsl-choose {
  max-width: 960px;
  margin: 3.4rem auto 0;
}

.fsl-choose__title {
  margin: 0 0 1.4rem;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
}

.fsl-choose__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
}

.fsl-choose__card {
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.1rem 1.3rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-md);
}

.fsl-choose__card .fsl-shotframe {
  margin-bottom: 1rem;
  box-shadow: 0 0 0 1px var(--border-light);
}

.fsl-choose__name {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.fsl-choose__card p {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

@media (max-width: 760px) {
  .fsl-choose__grid { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; }
}

/* ── Option 2: the download, and what to do with it ──────────────────── */

.fsl-handoff {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: center;
  max-width: 960px;
  margin: 0 auto;
}

.fsl-handoff__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
  counter-reset: fsl-handoff;
}

.fsl-handoff__steps li {
  position: relative;
  padding-left: 2.6rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-secondary);
  counter-increment: fsl-handoff;
}

.fsl-handoff__steps li::before {
  content: counter(fsl-handoff);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--accent-light);
  border: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}

.fsl-handoff__steps strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text-primary);
}

.fsl-handoff__more {
  max-width: 640px;
  margin: 1.8rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--text-secondary);
}

@media (max-width: 760px) {
  .fsl-handoff { grid-template-columns: minmax(0, 1fr); }
}

/* ── Family far away ─────────────────────────────────────────────────── */

.fsl-family .fsl-shotframe {
  max-width: 520px;
  justify-self: center;
}

.fsl-family .fix-dates-feature-list {
  margin-top: 1.3rem;
}

/* ── Guide pass (2026-10-01, WEBSITE_GUIDES_PLAN.md) ─────────────────────
   The guide kit (css/guide-kit.css, loaded after this file) draws the
   example frame, the tick chips, the icon points, the fold and the tip.
   These rules only place this page's own pieces. Tokens only, so the dark
   theme follows. */

/* Labels that printed at 11 to 13px: hold them to the 14px floor. The hero
   keeps its own phone sizes (its fold budget is pinned by the spec). */
.fsl-step__kicker,
.fsl-fork__lead,
p.xp-option-label,
.fix-dates-kicker,
.xp-attribution {
  font-size: 0.85rem;
}

.fsl-fork .xp-flow__option-tag {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
}

.fsl-fork .xp-flow__sub {
  font-size: 0.85rem;
  text-wrap: balance;
}

/* The hero's year labels and demo note printed at 11 to 13px. */
.fsl-years span,
.fsl-note {
  font-size: 0.85rem;
}

/* No lone last word in the small print, the links line or a question. */
.xp-attribution,
.fsl-handoff__more,
.faq__question {
  text-wrap: pretty;
}

/* The worked example: one sum, the numbers set large. It reads aloud as
   "60 photos times 5 seconds equals 5 minutes". The kit loads after this
   file, so the width needs the compound selector to win. */
.gk-example.fsl-formula {
  max-width: 680px;
}

.fsl-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.8rem;
  margin: 0;
}

.fsl-sum__term {
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  min-width: 6.6rem;
  padding: 0.8rem 1rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  font-family: var(--font-ui);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-secondary);
}

.fsl-sum__term b {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}

.fsl-sum__term--total {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow), var(--shadow-sm);
}

.fsl-sum__op {
  font-family: var(--font-display);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--text-muted);
}

/* The formula as a small two-column table. Two short columns fit a phone
   as a table, so it never needs the stacked-card layout. */
.fsl-table {
  width: 100%;
  max-width: 680px;
  margin: 2.25rem auto 0;
  border: 1px solid var(--border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  font-size: 1rem;
  text-align: left;
}

.fsl-table caption {
  padding: 0 0 0.6rem;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.fsl-table th,
.fsl-table td {
  padding: 0.8rem 1.1rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
  line-height: 1.5;
}

.fsl-table tbody tr:last-child > * {
  border-bottom: 0;
}

.fsl-table thead th {
  background: var(--bg-accent);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}

.fsl-table tbody th {
  width: 42%;
  background: var(--bg-accent);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-primary);
}

.fsl-table td {
  color: var(--text-secondary);
}

.fsl-table td strong {
  color: var(--text-primary);
}

#slideshow-guide .xp-table-note {
  max-width: 680px;
}

/* Made for a hard week: two cards, one stop (they were two sections). */
.fsl-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  max-width: 960px;
  margin: 0 auto;
  text-align: left;
}

.fsl-duo__card {
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  padding: 1.5rem 1.6rem 1.6rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--card-bg);
  box-shadow: var(--shadow-md);
}

.fsl-duo__title {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.3;
  text-wrap: balance;
}

.fsl-duo__card > p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* Inside a card the kit's centring auto margins let the list size to its
   longest line and run past the card on a phone: one full-width column. */
.fsl-duo .gk-points {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
  margin: 0;
}

@media (max-width: 760px) {
  .fsl-duo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 520px;
  }
}

/* Phone hero labels at the 14px floor. The tagline keeps one line by
   dropping its side rules and some tracking, so the CTA stays inside the
   844px fold the spec pins. */
@media (max-width: 640px) {
  .fsl-hero .hero__tagline { font-size: 0.85rem; letter-spacing: 0.06em; }
  .fsl-hero .hero__tagline::before,
  .fsl-hero .hero__tagline::after { display: none; }
  .fsl-hero .hero__trust { font-size: 0.85rem; }
  .fsl-years span,
  .fsl-note { font-size: 0.85rem; }
}

@media (max-width: 480px) {
  .fsl-sum { gap: 0.4rem 0.3rem; }
  .fsl-sum__term { min-width: 0; padding: 0.6rem 0.55rem 0.55rem; font-size: 0.85rem; }
  .fsl-sum__term b { font-size: 1.8rem; }
  .fsl-sum__op { font-size: 1.45rem; }
  .fsl-table th,
  .fsl-table td { padding: 0.7rem 0.8rem; }
  .fsl-duo__card { padding: 1.2rem 1.1rem 1.3rem; }
  .fsl-duo__title { font-size: 1.18rem; }
}