/* Smart Choice — "Estudio": white, quiet, photos first (after apple.com's rhythm) */

/* Geist (SIL Open Font License), latin subset, self-hosted */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #ffffff;
  --field: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #5d5d62;
  --rule: #d2d2d7;
  --accent: #9a5b13;
  --accent-tint: #f6ecdf;
  --glow: 242, 180, 80;

  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Few steps, like a product page: hero, section, tagline, body, small */
  --step-display: clamp(2.75rem, 1.1rem + 5.4vw, 5.5rem);
  --step-headline: clamp(2.125rem, 1.2rem + 3vw, 4rem);
  --step-tagline: clamp(1.25rem, 1.05rem + 0.7vw, 1.75rem);
  --step-body: 1.0625rem;
  --step-small: 0.8125rem;

  --gutter: clamp(16px, 4vw, 48px);
  --max: 1280px;
  --section: clamp(88px, 4rem + 6vw, 160px);
  --radius: 22px;

  --shadow-soft: 0 2px 6px rgba(0, 0, 0, 0.04), 0 18px 40px -18px rgba(0, 0, 0, 0.18);
  --shadow-lift: 0 4px 10px rgba(0, 0, 0, 0.05), 0 30px 60px -22px rgba(0, 0, 0, 0.28);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 48px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

/* The light and the lifted cards spill past the edges; clip here (clip keeps the stage sticky) */
main { overflow-x: clip; }

img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, dl, dd, ol, ul, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--accent-tint); }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
}
.skip:focus { top: 8px; }

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

/* Type */

.display,
.headline {
  font-weight: 600;
  text-wrap: balance;
}

.display {
  font-size: var(--step-display);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.headline {
  font-size: var(--step-headline);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.subhead {
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.tagline {
  font-size: var(--step-tagline);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.statement {
  font-size: var(--step-tagline);
  font-weight: 600;
  line-height: 1.25;
  color: var(--accent);
}

.fineprint {
  margin-top: 24px;
  font-size: var(--step-small);
  color: var(--ink-2);
}

/* Buttons: pills, one fill; secondary actions are text links */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 11px 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }

.btn-small { position: relative; min-height: 34px; padding: 6px 15px; font-size: 0.875rem; }

.btn-outline {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink); /* taste-skill-ignore: the outline of a secondary button */
}

.btn-quiet { background: #e8e8ed; color: var(--ink); }

/* Touch: small buttons keep their look but get a 46px hit area */
@media (pointer: coarse) {
  .btn-small::after,
  .demo-toggle::after {
    content: "";
    position: absolute;
    inset: -6px -4px;
  }
}

.more {
  color: var(--accent);
  font-size: 1.0625rem;
  text-decoration: none;
}
.more span[aria-hidden] {
  display: inline-block;
  transition: transform 200ms var(--ease-out);
}

/* Hover only where there is a pointer that hovers; taps don't leave it stuck */
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #3a3a3c; }
  .btn-outline:hover { background: var(--ink); color: #fff; }
  .btn-quiet:hover { background: #dcdce1; }
  .more:hover { text-decoration: underline; text-underline-offset: 4px; }
  .more:hover span[aria-hidden] { transform: translateX(3px); }
}

/* Navigation: a thin white bar */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  transition: box-shadow 200ms var(--ease-out);
}
.nav.is-scrolled { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); } /* taste-skill-ignore: sticky bar */

.nav-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  height: var(--nav-h);
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wordmark {
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  margin-right: auto;
}

.nav-links { display: none; gap: 28px; font-size: 0.8125rem; }
.nav-links a {
  text-decoration: none;
  color: var(--ink-2);
  transition: color 160ms var(--ease-out);
}
.nav-links a:hover { color: var(--ink); }

@media (min-width: 720px) {
  .nav-links { display: flex; }
}

/* Phones: the section links get their own row under the bar */
@media (max-width: 719px) {
  :root:has(.nav-links) { --nav-h: 88px; }
  .nav-inner:has(.nav-links) {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: 48px 40px;
    align-items: center;
    height: auto;
    gap: 0 16px;
  }
  .nav-inner:has(.nav-links) .btn { grid-area: 1 / 2; }
  .nav nav { grid-area: 2 / 1 / 3 / -1; }
  .nav-links {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-inline: -10px;
    font-size: 0.875rem;
  }
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding-inline: 10px;
  }
}

/* ------------------------------------------------------------------
   Stage (hero)
   Phones, tablets, no JS and reduced motion: copy, then the photo as a
   card that settles flat as it scrolls in.
   Large screens: the stage pins, the card straightens and grows to fill
   the screen (driven by --p, 0 → 1, set from main.js).
   ------------------------------------------------------------------ */

.stage {
  --p: 1;
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(40px, 7vw, 96px));
  padding-bottom: clamp(24px, 4vw, 48px);
}

.stage-copy { text-align: center; }
.stage-copy .display { max-width: 14ch; margin-inline: auto; }
.stage-copy .tagline { max-width: 32ch; margin: 18px auto 0; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 28px;
  margin: 28px 0 clamp(40px, 6vw, 72px);
}

.stage-card {
  perspective: 1200px;
  padding-inline: var(--gutter);
}

.stage-card .ba-frame {
  max-width: var(--max);
  margin-inline: auto;
  transform-origin: 50% 100%;
}

.stage-card .ba { box-shadow: var(--shadow-lift); } /* taste-skill-ignore: the card floats */

@media (max-width: 599px) {
  .stage-card { padding-inline: 12px; }
}

/* Card tilt on phones and tablets: small, scroll-linked */
.js .stage-card .ba-frame {
  transform: rotateX(calc((1 - var(--p)) * 12deg)) scale(calc(0.95 + 0.05 * var(--p)));
}

/* The pinned stage on large screens */
@media (min-width: 900px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  .js .stage {
    height: 250svh;
    padding: 0;
  }

  .js .stage-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
  }

  .js .stage-copy {
    position: relative;
    z-index: 1;
    padding-top: calc(var(--nav-h) + clamp(28px, 6svh, 64px));
    transform: translateY(calc(var(--p) * -16svh));
    /* Gone before the rising photo reaches it */
    opacity: calc(1 - var(--p) * 3.4);
  }

  .js .hero-actions { margin-bottom: 0; }

  .js .stage-card {
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 0;
    perspective: 1600px;
    pointer-events: none;
  }

  .js .stage-card .ba-frame {
    width: 100%;
    max-width: none;
    height: 100%;
    transform-origin: 50% 50%;
    transform:
      translateY(calc((1 - var(--p)) * 32svh))
      scale(calc(0.56 + 0.44 * var(--p)))
      rotateX(calc((1 - var(--p)) * 22deg));
    pointer-events: auto;
  }

  .js .stage-card .ba {
    height: 100%;
    aspect-ratio: auto;
    border-radius: calc((1 - var(--p)) * 28px);
  }

  .js .stage-card .ba-frame::before { opacity: calc(1 - var(--p)); }

  /* Below the bar when the photo fills the screen */
  .js .stage .ba-wide .ba-tag { top: calc(var(--nav-h) * var(--p) + 20px); }

  /* The labels and the handle keep their real size while the card is small */
  .js .stage .ba-tag,
  .js .stage .ba-handle { scale: calc(1 / (0.56 + 0.44 * var(--p))); }
  .js .stage .ba-tag-before { transform-origin: 0 0; }
  .js .stage .ba-tag-after { transform-origin: 100% 0; }
}

/* Load: the headline arrives word by word, the card rises (under 1s) */
/* Word order for the stagger (here, not in style="" attributes, so the CSP needs no 'unsafe-inline') */
.display .w:nth-child(1) { --i: 0; }
.display .w:nth-child(2) { --i: 1; }
.display .w:nth-child(3) { --i: 2; }
.display .w:nth-child(4) { --i: 3; }
.display .w:nth-child(5) { --i: 4; }
.display .w:nth-child(6) { --i: 5; }
@media (prefers-reduced-motion: no-preference) {
  .js .display .w {
    display: inline-block;
    animation: word-in 640ms var(--ease-out) both;
    animation-delay: calc(var(--i) * 60ms + 60ms);
  }
  .js .stage-copy .tagline,
  .js .hero-actions { animation: rise-in 700ms var(--ease-out) 380ms both; }
  .js .stage-card { animation: card-in 1000ms var(--ease-out) 200ms both; }
}

@keyframes word-in {
  from { opacity: 0; transform: translateY(0.3em); }
}
@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
}
/* No opacity here: the photo is the page's largest paint */
@keyframes card-in {
  from { translate: 0 56px; }
}

/* ------------------------------------------------------------------
   Before / after slider
   ------------------------------------------------------------------ */

.ba-frame {
  --pos: 50;
  position: relative;
}

/* Warm light from the edited side, behind the photo, never over it */
.ba-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -10%;
  bottom: -12%;
  left: calc(var(--pos) * 1% - 4%);
  right: -12%;
  background: radial-gradient(closest-side, rgba(var(--glow), calc(0.10 + (100 - var(--pos)) * 0.0022)), rgba(var(--glow), 0)); /* taste-skill-ignore: light, not decoration */
  pointer-events: none;
}

.ba {
  position: relative;
  overflow: hidden;
  background: var(--field);
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
  cursor: ew-resize;
}

.ba img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.ba-wide { aspect-ratio: 3 / 2; border-radius: 18px; }
.ba-tall { aspect-ratio: 716 / 1086; border-radius: var(--radius); }

@media (min-width: 600px) {
  .ba-wide { border-radius: 28px; }
}

.ba-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0);
}

.ba-divider {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform: translateX(calc(var(--pos) * 1%));
}

.ba-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); /* taste-skill-ignore: keeps the line visible on bright photos */
}

.ba-handle {
  position: absolute;
  top: 50%;
  left: calc(var(--pos) * 1%);
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); /* taste-skill-ignore: the handle floats over the photo */
  touch-action: none;
  cursor: ew-resize;
  transition: transform 160ms var(--ease-out);
}

.ba-handle::before,
.ba-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 8px;
  border: solid var(--ink);
  border-width: 0 0 2px 2px;
}
.ba-handle::before { left: 12px; transform: translateY(-50%) rotate(45deg); }
.ba-handle::after { right: 12px; transform: translateY(-50%) rotate(-135deg); }

.ba.is-dragging .ba-handle { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) {
  .ba:hover:not(.is-dragging) .ba-handle { transform: scale(1.06); }
}

.ba-handle:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 50%;
}

.ba-tag {
  position: absolute;
  top: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  pointer-events: none;
  transition: opacity 200ms var(--ease-out);
}
.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; }
.ba-tag.is-hidden { opacity: 0; }

@media (min-width: 900px) {
  .ba-wide .ba-tag { top: 20px; }
  .ba-wide .ba-tag-before { left: 20px; }
  .ba-wide .ba-tag-after { right: 20px; }
}

.room {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 48px 18px 16px;
  color: #fff;
  font-weight: 500;
  font-size: 1.0625rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* taste-skill-ignore: neutral scrim under text on a photo */
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Sections
   ------------------------------------------------------------------ */

.section { padding-block: var(--section); }
.band { background: var(--field); }

/* Headline left, a short aside on the same line (stacks on phones) */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: clamp(36px, 4.5vw, 64px);
}
.section-head .headline { max-width: 16ch; }
.section-aside { color: var(--ink-2); font-size: 1.0625rem; }

/* Surfaces: white on grey, grey on white */
.tile {
  background: var(--bg);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
}
.section:not(.band) .tile { background: var(--field); }

/* Gallery: panels with depth */

.gallery {
  display: grid;
  gap: clamp(24px, 3vw, 32px);
}

@media (min-width: 800px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

.panel { perspective: 1000px; }

.panel .ba { box-shadow: var(--shadow-soft); } /* taste-skill-ignore: floating panels, asked for */

.panel .ba-frame,
.tilt {
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  transform: perspective(1000px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 600ms var(--ease-out), box-shadow 300ms var(--ease-out);
}
.panel .ba-frame.is-tilting,
.tilt.is-tilting { transition: transform 120ms linear, box-shadow 300ms var(--ease-out); }

/* What we do */

.what-head { max-width: 760px; margin-bottom: clamp(36px, 4.5vw, 64px); }
.what-head .headline { margin-bottom: 24px; }
.what-sub { margin-top: 10px; color: var(--ink-2); font-size: 1.1875rem; max-width: 40ch; }

/* Four qualities as open columns on a hairline, not boxes */
.what-grid {
  display: grid;
  gap: 28px 40px;
}
.section .what-grid .tile {
  padding: 20px 0 0;
  border-radius: 0;
  background: none;
  border-top: 1px solid var(--rule);
}
.what-grid dt { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.015em; }
.what-grid dd { margin-top: 6px; color: var(--ink-2); max-width: 30ch; }

@media (min-width: 640px) {
  .what-grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  .what-grid { grid-template-columns: repeat(4, 1fr); }
}

.video-tile {
  display: grid;
  gap: 12px;
  margin-top: clamp(48px, 6vw, 80px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--radius);
  background: var(--field);
}
/* A sub-heading under the section's headline, not a second headline */
.video-tile .subhead { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; }
.video-tile p { max-width: 52ch; font-size: 1.1875rem; line-height: 1.5; color: var(--ink-2); }

@media (min-width: 900px) {
  .video-tile { grid-template-columns: 1fr 1.6fr; gap: 48px; align-items: baseline; }
}

/* Steps: a real sequence, so numbered, on a hairline instead of boxes */

.steps { display: grid; gap: 36px 40px; counter-reset: step; }
.steps .tile {
  counter-increment: step;
  padding: 20px 0 0;
  border-radius: 0;
  background: none;
  border-top: 1px solid var(--rule);
}
.steps .tile::before {
  content: counter(step);
  display: block;
  margin-bottom: 18px;
  font-size: clamp(2.75rem, 2rem + 2vw, 3.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
}
.steps p { margin-top: 8px; color: var(--ink-2); max-width: 32ch; }

@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------------
   Pricing
   ------------------------------------------------------------------ */

.pricing-head { align-items: center; }

/* Segmented switch */
.seg {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  border-radius: 999px;
  background: #e8e8ed;
}
.seg::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--bg);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); /* taste-skill-ignore: the switch's thumb */
  transition: transform 320ms var(--ease-out);
}
.seg:has(input[value="video"]:checked)::before { transform: translateX(100%); }
.seg label { position: relative; z-index: 1; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: block;
  min-height: 40px;
  padding: 9px 20px;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-2);
  border-radius: 999px;
  white-space: nowrap;
  transition: color 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.seg label:active span { transform: scale(0.97); }
.seg input:checked + span { color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Without :has() support both groups simply show */
#pricing:has(input[value="photos"]:checked) [data-group="video"],
#pricing:has(input[value="video"]:checked) [data-group="photos"] { display: none; }

.price-group {
  display: grid;
  gap: 16px;
  align-items: stretch;
}

@media (min-width: 640px) {
  .price-group { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px) {
  [data-group="photos"] { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 760px) {
  .price-group-video {
    grid-template-columns: 1fr 1.12fr;
    max-width: 920px;
    margin-inline: auto;
    align-items: center;
    padding-block: 16px;
  }
}

.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--radius);
  background: var(--field);
}

.price-qty {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}
.qty {
  display: block;
  font-size: clamp(3.5rem, 2.6rem + 2.6vw, 5rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin-bottom: 4px;
}

.price {
  margin-top: 18px;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.includes {
  display: grid;
  gap: 8px;
  margin: 20px 0 28px;
  font-size: 0.9375rem;
  color: var(--ink-2);
  flex: 1;
}
.includes li { position: relative; padding-left: 22px; }
.includes li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.42em;
  width: 10px;
  height: 6px;
  border: solid var(--accent);
  border-width: 0 0 2px 2px;
  transform: rotate(-45deg);
}

/* The best value: white, lifted, framed in the accent, a little larger */
.price-card-best {
  --lift: -10px;
  background: var(--bg);
  box-shadow: inset 0 0 0 2px var(--accent), var(--shadow-lift); /* taste-skill-ignore: the lifted card */
  padding: clamp(28px, 3.2vw, 44px);
}
.price-card-best .qty { font-size: clamp(4rem, 2.8rem + 3.4vw, 6.25rem); }
.price-card-best .price { font-size: 2.125rem; }
.best-tag {
  position: absolute;
  top: clamp(20px, 2.4vw, 28px);
  right: clamp(20px, 2.4vw, 28px);
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0;
}

@media (max-width: 759px) {
  .price-card-best { order: -1; }
}

/* Cards arrive softly when the switch changes */
@media (prefers-reduced-motion: no-preference) {
  .js .price-group .price-card { animation: card-swap 520ms var(--ease-out) both; }
  .js .price-group .price-card:nth-child(2) { animation-delay: 60ms; }
  .js .price-group .price-card:nth-child(3) { animation-delay: 120ms; }
  .js .price-group .price-card:nth-child(4) { animation-delay: 180ms; }
}
@keyframes card-swap {
  from { opacity: 0; translate: 0 18px; scale: 0.97; }
}

.video-only {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  max-width: 920px;
  margin: 24px auto 0;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--field);
}
.video-only-title { font-size: 1.0625rem; font-weight: 600; }
.video-only p:not(.video-only-price) { color: var(--ink-2); font-size: 0.9375rem; }
.video-only-price { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }

#pricing .fineprint { text-align: center; }

.monthly {
  display: grid;
  gap: 16px;
  max-width: 920px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  text-align: center;
  justify-items: center;
}
.monthly > p { font-size: var(--step-tagline); line-height: 1.35; letter-spacing: -0.015em; max-width: 40ch; }

.email-link {
  color: var(--accent);
  font-weight: 500;
  overflow-wrap: anywhere;
  text-decoration: none;
}
.email-link:hover { text-decoration: underline; text-underline-offset: 4px; }

.copy-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: inherit; gap: 8px 12px; }
.monthly .copy-row { justify-content: center; }
.copy-status { font-size: var(--step-small); color: var(--ink-2); min-height: 1.4em; }

/* Managers */

.managers { display: grid; gap: 32px; }
.managers-body { display: grid; gap: 14px; justify-items: start; max-width: 520px; }

@media (min-width: 900px) {
  .managers { grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .managers-body { justify-self: end; }
}

/* FAQ */

.faq { display: grid; gap: 24px; }

@media (min-width: 900px) {
  .faq { grid-template-columns: 5fr 7fr; gap: 64px; }
}

.faq-list { display: grid; gap: 8px; }
.faq-list details {
  background: var(--field);
  border-radius: 16px;
  padding-inline: clamp(18px, 2vw, 28px);
}

.faq-list summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
  transition: opacity 160ms var(--ease-out);
}
.faq-list summary:active { opacity: 0.6; }
.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::before,
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--ink);
  transition: transform 220ms var(--ease-out);
}
.faq-list summary::after { transform: rotate(90deg); }
.faq-list details[open] summary::after { transform: rotate(0deg); }

.faq-list details p { padding-bottom: 22px; max-width: 60ch; color: var(--ink-2); }

/* ------------------------------------------------------------------
   Contact form
   ------------------------------------------------------------------ */

.contact-grid { display: grid; gap: 40px; align-items: start; }
.contact-intro .tagline { margin-top: 16px; color: var(--ink-2); max-width: 26ch; }

@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 5fr 7fr; gap: 64px; }
  .contact-intro { position: sticky; top: calc(var(--nav-h) + 48px); }
}

.form { display: grid; gap: 22px; }
.hp { display: none; }

.field { display: grid; gap: 8px; min-width: 0; }
.field-row { display: grid; gap: 22px; }
@media (min-width: 600px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

.form label,
.form legend { font-size: 0.9375rem; font-weight: 500; }
.req { color: var(--accent); }

.form input[type="text"],
.form input[type="email"],
.form textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 15px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem; /* 16px+ so iOS doesn't zoom */
  transition: border-color 160ms var(--ease-out);
}
.form textarea { resize: vertical; min-height: 110px; }
.form input::placeholder { color: #6e6e73; }
@media (hover: hover) and (pointer: fine) {
  .form input:hover, .form textarea:hover { border-color: #aeaeb2; }
}
.form input:focus-visible, .form textarea:focus-visible {
  outline: 3px solid rgba(154, 91, 19, 0.35);
  outline-offset: 0;
  border-color: var(--accent);
}
.form [aria-invalid="true"] { border-color: #c4291c; }

.hint { font-size: 0.875rem; color: var(--ink-2); }
.error { font-size: 0.9375rem; color: #b42318; }

.no-listing {
  display: grid;
  gap: 10px;
  margin-top: -6px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--field);
  font-size: 0.9375rem;
}
.no-listing .copy-row { justify-content: flex-start; }

/* Radio choices as pills */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices legend { width: 100%; margin-bottom: 8px; padding: 0; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--field);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.choice:active span { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  .choice:hover span { background: #e8e8ed; }
}
.choice input:checked + span { background: var(--ink); color: #fff; }
.choice input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  cursor: pointer;
}
.check input {
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--ink);
  cursor: pointer;
}

.btn-submit { justify-self: start; min-width: 190px; }
.form-note { font-size: 0.875rem; color: var(--ink-2); }

/* Footer */

.footer {
  background: var(--field);
  padding-block: 48px 40px;
  font-size: var(--step-small);
  color: var(--ink-2);
  box-shadow: 0 -1px 0 var(--rule); /* taste-skill-ignore: footer edge */
}
.footer-name {
  color: var(--ink);
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.footer a { color: var(--ink-2); }

/* Thanks page */

.thanks {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 120px);
  display: grid;
  align-items: center;
  text-align: center;
  padding-block: calc(var(--nav-h) + 64px) 96px;
  overflow: hidden;
}
.thanks::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 55%;
  width: 90vw;
  height: 60vw;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(var(--glow), 0.22), rgba(var(--glow), 0)); /* taste-skill-ignore: light, not decoration */
  pointer-events: none;
}
.thanks-lead {
  margin: 16px auto 0;
  font-size: var(--step-headline);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.03em;
  max-width: 16ch;
  text-wrap: balance;
}
.thanks-note { margin: 24px auto 32px; max-width: 44ch; color: var(--ink-2); }

/* Privacy page: one readable column */
.legal { padding-block: calc(var(--nav-h) + 48px) 96px; }
.legal .wrap { max-width: 68ch; }
.legal-date { margin-top: 8px; color: var(--ink-2); font-size: 0.875rem; }
.legal h2 { margin-top: 40px; }
.legal p, .legal ul { margin-top: 12px; color: var(--ink-2); line-height: 1.6; }
.legal ul { padding-left: 1.25em; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal strong { color: var(--ink); }

/* ------------------------------------------------------------------
   Scroll entrances with a little depth (only when JS runs)
   ------------------------------------------------------------------ */

.js .reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.965);
  transition: opacity 800ms var(--ease-out), transform 900ms var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js .reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 759px) {
  .js .reveal { transform: translateY(22px) scale(0.985); transition-duration: 600ms, 700ms; }
}

/* Reduced motion: flat and still */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: opacity 300ms linear; }
  .js .stage-card .ba-frame, .panel .ba-frame, .tilt { transform: none !important; transition: none; }
  .seg::before, .btn, .ba-handle, .faq-list summary::after, .more span[aria-hidden] { transition: none; }
  .btn:active, .choice:active span, .seg label:active span { transform: none; }
  .more:hover span[aria-hidden] { transform: none; }
}

/* ------------------------------------------------------------------
   Surfaces on grey bands
   ------------------------------------------------------------------ */

.band .price-card,
.band .video-only,
.band .faq-list details { background: var(--bg); }

/* The form sits on a grey tile in a white section */
#contact .no-listing,
#contact .choice span { background: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  #contact .choice:hover span { background: #ececf0; }
}
#contact .choice input:checked + span { background: var(--ink); }

#best-package { scroll-margin-top: calc(var(--nav-h) + 48px); }

/* ------------------------------------------------------------------
   Walkthrough videos
   ------------------------------------------------------------------ */

.video-head { text-align: center; }
.video-title { max-width: 15ch; margin: 18px auto 0; }
.video-head .tagline { max-width: 34ch; margin: 18px auto 0; color: var(--ink-2); }
.video-head .hero-actions { margin-bottom: 0; }

.rec-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0;
}

.demo {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 20px;
  margin: clamp(48px, 6vw, 80px) 0 clamp(48px, 6vw, 80px);
}

/* Daylight behind the phone */
.demo::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 45%;
  width: min(900px, 120vw);
  height: min(700px, 110vw);
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(var(--glow), 0.26), rgba(var(--glow), 0)); /* taste-skill-ignore: light, not decoration */
  pointer-events: none;
}

.phone {
  position: relative;
  width: clamp(240px, 24vw, 330px);
  padding: 10px;
  border-radius: 48px;
  background: var(--ink);
  box-shadow: var(--shadow-lift); /* taste-skill-ignore: the device floats */
}

.phone-screen {
  position: relative;
  aspect-ratio: 9 / 18;
  overflow: hidden;
  border-radius: 38px;
  background: #000;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.slide:first-child { opacity: 1; }

/* Slide order and Ken Burns start/end offsets (kept in CSS for the CSP) */
.phone-screen .slide:nth-child(1) { --i: 0; }
.phone-screen .slide:nth-child(2) { --i: 1; --x0: -2%; --y0: 2%; --x1: 3%; --y1: -3%; }
.phone-screen .slide:nth-child(3) { --i: 2; --x0: 3%; --y0: -2%; --x1: -3%; --y1: 2%; }
.phone-screen .slide:nth-child(4) { --i: 3; --x0: 0%; --y0: 3%; --x1: 0%; --y1: -3%; }

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06) translate(var(--x0, 0%), var(--y0, 0%));
}

/* The landscape photo pans from one side of the room to the other */
.slide-pan img {
  width: auto;
  max-width: none;
  height: 100%;
  object-fit: fill;
  transform: translateX(-4%);
}

.slide-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 56px 20px 26px;
  color: #fff;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); /* taste-skill-ignore: neutral scrim under text on a photo */
}

.demo-toggle {
  position: absolute;
  top: 26px;
  right: 26px;
  z-index: 2;
  min-height: 32px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}
.demo-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.demo-caption { font-size: 0.9375rem; color: var(--ink-2); }

/* Ken Burns: four photos, 4 s each, crossfading; only while on screen */
@media (prefers-reduced-motion: no-preference) {
  .phone-screen.is-playing .slide {
    animation: slide-show 16s linear infinite;
    animation-delay: calc(var(--i) * 4s);
    animation-fill-mode: backwards;
  }
  .phone-screen.is-playing .slide img {
    animation: ken-burns 16s linear infinite;
    animation-delay: calc(var(--i) * 4s);
    animation-fill-mode: backwards;
  }
  .phone-screen.is-playing .slide-pan img { animation-name: ken-burns-pan; }
  .phone-screen.is-paused .slide,
  .phone-screen.is-paused .slide img { animation-play-state: paused; }
}

@keyframes slide-show {
  0% { opacity: 0; }
  4% { opacity: 1; }
  25% { opacity: 1; }
  29% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes ken-burns {
  0% { transform: scale(1.06) translate(var(--x0, 0%), var(--y0, 0%)); }
  29%, 100% { transform: scale(1.18) translate(var(--x1, 0%), var(--y1, 0%)); }
}
@keyframes ken-burns-pan {
  0% { transform: translateX(-4%); }
  29%, 100% { transform: translateX(-60%); }
}

/* The phone and what it does for guests, side by side: the benefits read as
   notes beside the demo, not as another row of cards */
.video-stage {
  display: grid;
  margin-block: clamp(48px, 6vw, 80px);
  gap: 40px;
}
.video-stage .demo { margin: 0; }

.video-benefits { display: grid; }
.section .video-benefits .tile {
  padding: 22px 0;
  border-radius: 0;
  background: none;
  border-top: 1px solid var(--rule);
}
.video-benefits .tile:last-child { border-bottom: 1px solid var(--rule); }
.video-benefits p { margin-top: 6px; color: var(--ink-2); max-width: 38ch; }

@media (min-width: 900px) {
  .video-stage {
    grid-template-columns: auto minmax(0, 420px);
    justify-content: center;
    align-items: center;
    column-gap: clamp(64px, 8vw, 120px);
  }
  .video-benefits .subhead { font-size: 1.5rem; }
}

.video-how {
  display: grid;
  gap: 8px 48px;
  margin-top: 16px;
}
.video-how .includes { margin: 8px 0 0; font-size: 1.0625rem; }

/* One column, read top to bottom */
@media (min-width: 800px) {
  .video-how { grid-template-columns: 1fr 2fr; align-items: start; }
  .video-how .includes { margin: 0; gap: 12px; }
}

/* Copy details */
.stage-copy .hero-actions { margin-bottom: 16px; }
.cta-note { margin-bottom: clamp(40px, 6vw, 72px); font-size: 0.875rem; color: var(--ink-2); }
@media (prefers-reduced-motion: no-preference) {
  .js .stage .cta-note { animation: rise-in 700ms var(--ease-out) 420ms both; }
}
.opt { font-weight: 400; color: var(--ink-2); }

/* Pricing: per-photo price and who it suits */
.unit { margin-top: 2px; font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fit { margin-top: 12px; font-size: 0.9375rem; font-weight: 500; }
.fit + .includes { margin-top: 14px; }

/* Lenis smooth scroll (desktop only): it scrolls, not the browser */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

/* WCAG 2.4.11: the fixed bar never hides what has keyboard focus */
:focus { scroll-margin-top: calc(var(--nav-h) + 24px); scroll-margin-bottom: 24px; }