/*
 * style.css — the Perch website.
 *
 * Built on top of the app's own design system (css/tokens.css), so every colour,
 * radius, shadow and typeface here is the one the app ships with rather than a
 * near-enough match. Nothing is hard-coded that tokens.css already names.
 *
 * Mobile-first. Three breakpoints: 768px (tablet, two columns) and 1025px
 * (desktop, full split layouts and three-column grids).
 */

/* ------------------------------------------------------------------------- *
 * 1. Undoing the app shell
 *
 * tokens.css is written for a frameless Electron window: transparent, exactly
 * viewport-sized, never scrolling, and with text selection off because dragging
 * inside a pet's window should move the window rather than select its label.
 * All four are wrong for a web page, so they are reversed here rather than by
 * editing the file — tokens.css stays byte-identical to the app's copy.
 * ------------------------------------------------------------------------- */

html {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  /* Sticky header + a little breathing room, for anchor jumps. */
  scroll-padding-top: 88px;
  background: var(--color-bg);
}

body {
  height: auto;
  overflow: visible;
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 17px;
  line-height: 1.6;
  user-select: text;
  -webkit-user-select: text;
  cursor: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

img, video, canvas { max-width: 100%; }
img { height: auto; }

/* ------------------------------------------------------------------------- *
 * 2. Type scale and shared furniture
 * ------------------------------------------------------------------------- */

h1, h2, h3 { text-wrap: balance; }

h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(2.35rem, 7vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.85rem, 4.6vw, 2.6rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-3);
}

h3 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.3rem;
  line-height: 1.22;
  margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent-700); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--color-accent-600); }

em { font-style: italic; }

.container {
  width: 100%;
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: 56px; position: relative; }
.section-tint { background: color-mix(in srgb, var(--color-surface) 62%, var(--color-bg)); }

.section-head { max-width: 62ch; margin-bottom: var(--space-8); }
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 700;
}
.skip-link:focus { left: 0; }

/* Buttons extend tokens.css's `.btn`, which already carries the pill shape,
   the heading face and the primary/secondary fills. */
.btn { transition: transform 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease; }
.btn-lg { font-size: 15.5px; padding: 13px 26px; }
.btn-xl { font-size: 17px; padding: 16px 34px; }
.btn-primary { box-shadow: var(--shadow-sm); }
.btn:hover:not(:disabled) { transform: scale(1.02); box-shadow: var(--shadow-md); }
.btn:active:not(:disabled) { transform: scale(0.99); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover:not(:disabled) { transform: none; }
}

/* ------------------------------------------------------------------------- *
 * 3. Header
 * ------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--color-divider);
  box-shadow: 0 1px 12px color-mix(in srgb, #2e2b25 7%, transparent);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 68px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--color-text);
}
.brand-mark { display: block; border-radius: 10px; }
.brand-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}

.site-nav { display: flex; align-items: center; }

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
}
.nav-list a:not(.btn) {
  display: inline-block;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  text-decoration: none;
}
.nav-list a:not(.btn):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.nav-cta { margin-left: var(--space-2); }

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded='true'] .nav-toggle-bar:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle-bar:last-child { transform: translateY(-3.5px) rotate(-45deg); }

@media (max-width: 767px) {
  .nav-toggle { display: flex; }
  .nav-list {
    position: absolute;
    inset: 68px 12px auto 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: var(--space-2);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav-list.is-open { display: flex; }
  .nav-list a:not(.btn) { padding: 12px 14px; border-radius: var(--radius-sm); }
  .nav-cta { margin: var(--space-1) 0 0; }
}

/* ------------------------------------------------------------------------- *
 * 4. Hero
 * ------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding-top: 40px;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-bg) 92%, transparent),
      color-mix(in srgb, var(--color-bg) 70%, transparent) 60%,
      var(--color-bg)
    ),
    var(--color-bg);
}

@media (min-width: 768px) {
  /* The generated backdrop: a real desk, with its left half deliberately empty
     cream wall so the headline has somewhere to sit. */
  .hero {
    background:
      linear-gradient(
        100deg,
        var(--color-bg) 0%,
        color-mix(in srgb, var(--color-bg) 86%, transparent) 46%,
        color-mix(in srgb, var(--color-bg) 30%, transparent) 72%,
        color-mix(in srgb, var(--color-bg) 55%, transparent) 100%
      ),
      url('../assets/images/bg-hero.jpg') center right / cover no-repeat,
      var(--color-bg);
  }
}

.hero-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  padding-block: 24px 40px;
}

.hero-copy { max-width: 62ch; }
.hero-tagline {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-accent-700);
  margin: 0 0 var(--space-4);
}
.hero-body { font-size: 1.09rem; max-width: 54ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.hero-note {
  margin-top: var(--space-3);
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

/* The trailer, framed as a screen. */
.screen { margin: 0; }
.screen-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
  border: 1px solid color-mix(in srgb, #2e2b25 8%, transparent);
}
@media (min-width: 1025px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); }
}

/* --- the live strip --- */

/* Its own band, opaque rather than a wash over the hero photograph. Letting the
   desk show through put a second, photographic shelf edge a few pixels from the
   drawn one the pet actually stands on, which read as a seam. */
.strip {
  position: relative;
  margin-top: var(--space-6);
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg);
}
.strip-canvas {
  display: block;
  width: 100%;
  height: 168px;
  /* The pet is the interactive element; the canvas itself should not look
     like a text field when focused, but must still show focus. */
  outline-offset: -3px;
}
.strip-canvas:focus-visible { outline: 2px solid var(--color-accent); }

.strip-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 20px var(--space-4);
  font-size: 13.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  text-align: center;
}
.strip-hint-quiet { font-weight: 400; opacity: 0.8; }
.strip-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--color-accent-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent-2) 26%, transparent);
}

/* ------------------------------------------------------------------------- *
 * 5. Feature cards
 * ------------------------------------------------------------------------- */

.cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

.card-feature {
  padding: var(--space-6);
  border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface);
  border: 1px solid transparent;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.card-feature:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: color-mix(in srgb, var(--color-accent) 26%, transparent);
}
.card-feature p {
  margin: 0;
  font-size: 16px;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
}

.card-icon {
  display: block;
  width: 46px;
  height: 46px;
  margin-bottom: var(--space-3);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-accent) 16%, transparent);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}
/* Inline SVG glyphs, tinted with the accent. Kept as data URIs so the page
   still has no external requests. */
.card-icon[data-glyph='pet'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c491a' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M7 4v6'/%3E%3Cpath d='M17 4v6'/%3E%3Ccircle cx='12' cy='14' r='6'/%3E%3C/svg%3E");
}
.card-icon[data-glyph='coats'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c491a' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='9' cy='9' r='5'/%3E%3Ccircle cx='15' cy='15' r='5'/%3E%3C/svg%3E");
}
.card-icon[data-glyph='room'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c491a' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M3 10l9-7 9 7v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z'/%3E%3Cpath d='M9 21v-6h6v6'/%3E%3C/svg%3E");
}
.card-icon[data-glyph='wardrobe'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c491a' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 20V6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14'/%3E%3Cpath d='M12 4v16'/%3E%3Cpath d='M9 11h.01'/%3E%3Cpath d='M15 11h.01'/%3E%3C/svg%3E");
}
.card-icon[data-glyph='play'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c491a' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='7' cy='16' r='4'/%3E%3Ccircle cx='17' cy='16' r='4'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
.card-icon[data-glyph='alive'] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c491a' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M3 12h4l2-5 3 10 2-5h7'/%3E%3C/svg%3E");
}

@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1025px) { .cards { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------------------- *
 * 5b. The scroll-driven sequence
 *
 * A tall track with a sticky viewport inside it. Scrolling the track scrubs the
 * pet's day; the height of the track is how much scrolling that takes.
 * ------------------------------------------------------------------------- */

.story { position: relative; background: var(--color-bg); }
.story-track { height: 360vh; }

.story-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  overflow: hidden;
}

.story-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

/* The pet needs the full width to walk across, and a fixed height so the ledge
   sits in the same place at every viewport size. */
.story-canvas {
  display: block;
  width: 100%;
  height: min(46vh, 320px);
}

.story-caption {
  margin: 0;
  min-height: 2.6em;
  max-width: 22ch;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.5rem, 4.2vw, 2.2rem);
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.story-caption.is-swapping {
  opacity: 0;
  transform: translateY(6px);
}

.story-rail {
  list-style: none;
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
}
.story-rail li {
  width: 30px;
  height: 3px;
  border-radius: 999px;
  background: var(--color-neutral-300);
  transition: background-color 0.3s ease;
}
.story-rail li.is-done { background: var(--color-accent); }

/* No pinning, no scrubbing: one settled frame and the caption it starts on. */
@media (prefers-reduced-motion: reduce) {
  .story-track { height: auto; }
  .story-stage {
    position: static;
    height: auto;
    padding-block: 56px;
  }
  .story-eyebrow { display: none; }
}

/* ------------------------------------------------------------------------- *
 * 6. Carousel
 * ------------------------------------------------------------------------- */

.carousel { position: relative; margin-top: var(--space-6); }

.carousel-viewport { overflow: hidden; }

.carousel-track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .carousel-track { transition: none; }
}

.slide {
  flex: 0 0 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Slides all take the height of the tallest one, so that moving between them
     never shifts the page. Centring keeps the short ones from sitting up in the
     corner of the space that reserves. */
  justify-content: center;
  gap: var(--space-4);
  padding-inline: 20px;
}

.slide-art {
  width: 100%;
  max-width: 640px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4);
  border-radius: calc(var(--radius-lg) * 1.15);
  background: linear-gradient(
    180deg,
    var(--color-accent-100),
    color-mix(in srgb, var(--color-accent-200) 55%, var(--color-accent-100))
  );
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.slide-art-wide { max-width: 900px; }

/* A real screenshot rather than a drawn scene: it brings its own background, so
   the gradient panel and the padding around it only get in the way. */
.slide-art-shot { padding: 0; background: none; box-shadow: none; }
.slide-shot {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-lg) * 1.15);
  box-shadow: var(--shadow-md);
}

.scene-canvas {
  display: block;
  width: 100%;
  height: clamp(190px, 34vw, 280px);
}
.slide-art-wide .scene-canvas { height: clamp(160px, 24vw, 230px); }

.slide-text { text-align: center; max-width: 52ch; }
.slide-text h3 { margin-bottom: 4px; }
.slide-text p {
  margin: 0;
  font-size: 15.5px;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}

.carousel-btn {
  position: absolute;
  top: clamp(90px, 16vw, 140px);
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  color: var(--color-text);
}
.carousel-btn:hover { background: var(--color-bg); box-shadow: var(--shadow-md); }
.carousel-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.carousel-prev { left: 12px; }
.carousel-next { right: 12px; }
@media (min-width: 768px) { .carousel-btn { display: flex; } }

.carousel-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.carousel-dots { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; }
.carousel-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-neutral-400);
  cursor: pointer;
  transition: width 0.2s ease, background-color 0.2s ease;
}
.carousel-dots button[aria-selected='true'] { width: 26px; background: var(--color-accent); }

.carousel-play {
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  background: transparent;
  padding: 5px 14px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  cursor: pointer;
}
.carousel-play:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }

/* ------------------------------------------------------------------------- *
 * 7. Split sections (wardrobe, room)
 * ------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1025px) {
  .split { grid-template-columns: 1.05fr 0.95fr; gap: 64px; }
  .split-reverse .split-copy { order: 1; }
  .split-reverse .split-art { order: 2; }
}

.split-copy { max-width: 60ch; }
.split-copy p { color: color-mix(in srgb, var(--color-text) 76%, transparent); }
/* --- the dressing room --- */

.dressing-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-6);
  border-radius: calc(var(--radius-lg) * 1.15);
  background: linear-gradient(
    180deg,
    var(--color-accent-100),
    color-mix(in srgb, var(--color-accent-200) 60%, var(--color-accent-100))
  );
  box-shadow: var(--shadow-sm);
}
.dressing-pet { display: block; width: 100%; max-width: 320px; height: 260px; }

.coats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; margin: 0; padding: 0; }
.coat {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.coat:hover { transform: scale(1.12); }
.coat[aria-pressed='true'] {
  border-color: var(--color-text);
  transform: scale(1.12);
}

/* --- the wardrobe squares --- */

.wardrobe {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: var(--space-2);
  margin: var(--space-4) 0;
  padding: 0;
}
.wardrobe-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 10px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  cursor: pointer;
  font: inherit;
  color: var(--color-text);
  transition: transform 0.14s ease, background-color 0.14s ease, border-color 0.14s ease;
}
.wardrobe-item:hover { transform: translateY(-2px); background: var(--color-accent-100); }
.wardrobe-item[aria-pressed='true'] {
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 46%, transparent);
}
.wardrobe-item canvas { display: block; }
.wardrobe-name { font-size: 12px; font-weight: 600; }

/* --- the room --- */

.room-holder {
  position: relative;
  width: 100%;
  /* The room is authored at exactly 620×352, the size of the design's own
     scene box; it is scaled to fit by script.js. */
  aspect-ratio: 620 / 352;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) * 1.15);
  box-shadow: var(--shadow-md);
}
.room-scene {
  position: absolute;
  top: 0;
  left: 0;
  width: 620px;
  height: 352px;
  transform-origin: top left;
}
/* The app's `.scene` sets its own radius; inside a holder that already clips,
   it should fill the corner instead. */
.room-holder .room-scene { border-radius: 0; }

/* In the room deep-dive the perch labels are the point — they name the five
   places. In the carousel the room is a glance, so they only add noise. */
/* A real windowsill behind the drawn one, well back behind a cream scrim so the
   room stays the thing you look at. */
#room {
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-surface) 97%, transparent),
      color-mix(in srgb, var(--color-surface) 93%, transparent)
    ),
    url('../assets/images/bg-room.jpg') center / cover no-repeat;
}

.perch-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.perch-list li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 16px;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
}
.perch-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--color-accent-2);
}
.perch-list span { font-weight: 700; color: var(--color-text); }

/* ------------------------------------------------------------------------- *
 * 8. Activities
 * ------------------------------------------------------------------------- */

.duo { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .duo { grid-template-columns: repeat(2, 1fr); gap: var(--space-8); } }

.activity {
  padding: var(--space-6);
  border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface);
}
.activity-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, var(--color-accent-100), color-mix(in srgb, var(--color-accent-200) 55%, var(--color-accent-100)));
  overflow: hidden;
}
.activity-art .scene-canvas { height: clamp(180px, 26vw, 240px); }
.activity p { font-size: 16px; color: color-mix(in srgb, var(--color-text) 74%, transparent); }
.activity-meta {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-accent-700);
}

/* ------------------------------------------------------------------------- *
 * 9. Personality
 * ------------------------------------------------------------------------- */

.personality { color: var(--color-neutral-100); overflow: hidden; }
.personality-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      100deg,
      rgba(32, 30, 29, 0.93) 0%,
      rgba(32, 30, 29, 0.86) 52%,
      rgba(32, 30, 29, 0.62) 100%
    ),
    url('../assets/images/bg-personality.jpg') center / cover no-repeat;
}
.personality-inner {
  position: relative;
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 1025px) {
  .personality-inner { grid-template-columns: 0.8fr 1.2fr; gap: 64px; }
}

.personality h2 { color: var(--color-neutral-100); }
.personality p { color: color-mix(in srgb, var(--color-neutral-100) 82%, transparent); }
.personality em { color: var(--color-accent-300); font-style: normal; font-weight: 700; }
.personality-lead {
  font-size: 1.22rem;
  line-height: 1.5;
  color: var(--color-neutral-100) !important;
}

.personality-art {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-4);
  border-radius: calc(var(--radius-lg) * 1.15);
  background: color-mix(in srgb, var(--color-bg) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-neutral-100) 14%, transparent);
}
.closeup-canvas { display: block; width: 100%; max-width: 320px; height: 280px; }
/* ------------------------------------------------------------------------- *
 * 10. FAQ
 * ------------------------------------------------------------------------- */

.faq-grid { display: grid; gap: var(--space-3); }
@media (min-width: 1025px) {
  .faq-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3) var(--space-6); align-items: start; }
}

.faq-item {
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.04rem;
  line-height: 1.25;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }

.chev {
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--color-accent-700);
  border-bottom: 2px solid var(--color-accent-700);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.3s ease;
}
.faq-item[open] .chev { transform: rotate(-135deg) translateY(-2px); }

.faq-body {
  padding: 0 var(--space-4) var(--space-4);
  font-size: 15.5px;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
}
/* Height is animated by script.js via a wrapper it measures; the fallback for
   no-JS is simply an instant open, which <details> gives for free. */
.faq-item .faq-body { overflow: hidden; }

/* ------------------------------------------------------------------------- *
 * 11. Download
 * ------------------------------------------------------------------------- */

.download { overflow: hidden; text-align: center; }
.download-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-bg) 88%, transparent),
      color-mix(in srgb, var(--color-bg) 62%, transparent)
    ),
    url('../assets/images/bg-cta.jpg') center / cover no-repeat;
}
.download-inner { position: relative; max-width: 62ch; }
.download-mark { display: block; margin: 0 auto var(--space-4); border-radius: 22px; box-shadow: var(--shadow-md); }
.download-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
}

.trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Separated by space alone. An interpunct between items has to be a pseudo
     element, and a wrapped line then starts with a dangling one. */
  gap: 6px var(--space-6);
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-weight: 600;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}
/* ------------------------------------------------------------------------- *
 * 12. Footer
 * ------------------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-8) var(--space-6);
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
}

.footer-grid { display: grid; gap: var(--space-6); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer-tag {
  margin: var(--space-3) 0 0;
  font-size: 15px;
  max-width: 34ch;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.footer-nav h2, .footer-contact h2 {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 var(--space-2);
}
.footer-nav ul, .footer-contact ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li, .footer-contact li { margin-bottom: 6px; }
.footer-nav a, .footer-contact a {
  font-size: 15px;
  color: color-mix(in srgb, var(--color-text) 76%, transparent);
  text-decoration: none;
}
.footer-nav a:hover, .footer-contact a:hover { color: var(--color-text); text-decoration: underline; }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-8);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-divider);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 52%, transparent);
}
.footer-base p { margin: 0; }

/* ------------------------------------------------------------------------- *
 * 13. Scroll reveal
 * ------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}
/* If scripting is off, nothing should stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }

/* ------------------------------------------------------------------------- *
 * 14. Larger screens: section rhythm
 * ------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .container { padding-inline: 40px; }
  .section { padding-block: 88px; }
  .slide { padding-inline: 40px; }
}

@media (min-width: 1025px) {
  .container { padding-inline: 64px; }
  .section { padding-block: 112px; }
  .hero { padding-top: 56px; }
  .strip-canvas { height: 190px; }
}