/* ==========================================================================
   PortraitKart — landing page only.
   Inherits every token from styles.css §2–§4 without change.
   Differs on one thing: motion. This page gets the whole budget.
   ========================================================================== */

/* The 1120px container in the supporting-pages spec exists to protect a 68ch
   reading column. This page is a sales page, not a document — at 1440 and up
   that width strands 300-400px of empty paper down each side. Wider here only;
   the policy pages keep 1120 and keep their measure. */
:root { --container: 1320px; }

/* Sections and rhythm ---------------------------------------------------- */

/* Grid and flex children default to min-width:auto, so a wide child (the
   timing table) refuses to shrink and pushes the page sideways. */
.split > *, .timing-grid > *, .work-grid > *, .price-grid > *, .steps > *,
.hero-grid > *, .delivered-top > * { min-width: 0; }

/* styles.css gives <main> 48/64px of top padding for the POLICY pages, which
   open with a .page-head and need it. This page opens with the hero, which
   brings its own — so the two stacked and put 128px of blank paper above the
   headline. Sections own their vertical rhythm here; main owns none of it. */
main { padding-top: 0; }

.lp-section { padding-block: var(--s-8); }
.lp-section--deep { background: var(--paper-deep); border-block: 1px solid var(--paper-edge); }

.lp-section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--s-4);
}

.lp-lede { max-width: 62ch; color: var(--graphite-700); }
.lp-lede + .lp-lede { margin-top: var(--s-4); }

@media (min-width: 768px) { .lp-section { padding-block: var(--s-9); } }

/* Header — 64px, sticky, with the one-page section menu ------------------- */

.vh {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.lp-header {
  height: 64px;
  display: flex;
  align-items: center;
  background: var(--paper);
  border-bottom: 1px solid var(--paper-edge);
  /* Sticky because the menu it now carries has to survive the first scroll. */
  position: sticky;
  top: 0;
  z-index: 60;                 /* above the sticky drawing in §4 */
}
.lp-header .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); width: 100%;
}
.lp-header-end { display: flex; align-items: center; gap: var(--s-2); }

/* Anchors must clear the sticky bar, or every jump lands with the heading
   tucked underneath it. */
.hero, .lp-section { scroll-margin-top: 72px; }

/* --- the menu itself --- */

.lp-nav ul { display: flex; align-items: center; gap: var(--s-1); }
.lp-nav a {
  display: block;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--graphite-700);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease-out, background-color 120ms ease-out;
}
.lp-nav a:hover { color: var(--graphite-900); background: var(--paper-deep); }
/* The section you are actually looking at, set by the observer in landing.js.
   A weight change alone would reflow the row as you scroll, so the mark is the
   underline; weight stays put. */
.lp-nav a.is-current {
  color: var(--graphite-900);
  box-shadow: inset 0 -2px 0 var(--graphite-900);
}

.nav-toggle {
  display: none;                /* desktop: the links are already visible */
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: none; border: 1px solid var(--paper-edge);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--paper-deep); }
.nav-bars, .nav-bars::before, .nav-bars::after {
  display: block; width: 18px; height: 2px;
  background: var(--graphite-900); border-radius: 2px;
  transition: transform 160ms ease-out, opacity 120ms ease-out;
}
.nav-bars { position: relative; }
.nav-bars::before, .nav-bars::after { content: ''; position: absolute; left: 0; }
.nav-bars::before { top: -6px; }
.nav-bars::after { top: 6px; }
/* Bars fold into a cross while the panel is open. */
[aria-expanded="true"] .nav-bars { background: transparent; }
[aria-expanded="true"] .nav-bars::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav-bars::after { transform: translateY(-6px) rotate(-45deg); }

/* Below 940px six labels stop fitting beside the wordmark and the phone, so the
   nav becomes a panel that drops out of the bar. */
@media (max-width: 939px) {
  .nav-toggle { display: flex; }
  .lp-nav {
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--paper-edge);
    display: none;
  }
  .lp-nav.is-open { display: block; }
  .lp-nav ul {
    display: block;
    max-width: var(--container, 1320px);
    margin-inline: auto;
    padding: var(--s-2) var(--s-5) var(--s-4);
  }
  .lp-nav li + li { border-top: 1px solid var(--paper-edge); }
  .lp-nav a {
    padding: var(--s-3) 0;
    min-height: 44px;           /* thumb target */
    display: flex; align-items: center;
    border-radius: 0;
    font-size: 1rem;
  }
  .lp-nav a:hover { background: none; }
  .lp-nav a.is-current { box-shadow: none; font-weight: 600; }
}

/* The number is the credibility signal, but on a narrow phone it cannot share
   64px with a wordmark and a menu button. Icon stays, digits go — the tel:
   link is untouched either way. */
@media (max-width: 479px) {
  .lp-phone-num { display: none; }
  .lp-phone { min-width: 44px; justify-content: center; }
}

/* No JS: the panel can never be opened, so show the links inline and let them
   wrap under the bar rather than stranding a dead button. */
html:not(.js) .nav-toggle { display: none; }
html:not(.js) .lp-nav { position: static; display: block; border: 0; }
html:not(.js) .lp-nav ul { display: flex; flex-wrap: wrap; padding: 0; }
html:not(.js) .lp-nav li + li { border-top: 0; }
html:not(.js) .lp-nav a { padding: var(--s-2) var(--s-3); min-height: 0; }
.lp-phone {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px;
  font-size: 0.9375rem; font-weight: 500;
  color: var(--graphite-900); text-decoration: none;
}
.lp-phone:hover { text-decoration: underline; text-underline-offset: 3px; }
.lp-phone .icon { width: 16px; height: 16px; fill: var(--graphite-500); }

/* Hero ------------------------------------------------------------------- */

.hero { padding-block: var(--s-5) var(--s-8); }

/* `center` floated the copy down the middle of a column made tall by a square
   image — 127px of it on a 1440 screen, all of it above the headline. Starting
   both columns together puts the headline back at the top of the page, which
   is where the one thing the visitor must read belongs. */
.hero-grid { display: grid; gap: var(--s-6); align-items: start; }

.hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--graphite-900);
  margin-bottom: var(--s-3);
  text-wrap: balance;
}
.hero .byline {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--graphite-500);
  margin-bottom: var(--s-5);
}
.hero .sub { max-width: 46ch; margin-bottom: var(--s-6); }

.hero-trust {
  display: flex; align-items: center; gap: var(--s-3);
  margin-top: var(--s-5);
  font-size: 0.9375rem;
  color: var(--graphite-500);
  max-width: 44ch;
}
/* The flex child is the <picture>, not the <img> inside it — size both or the
   picture shrinks and takes the avatar down with it. */
.hero-trust picture { flex: none; display: block; width: 44px; height: 44px; }
.hero-trust .avatar {
  width: 44px; height: 44px; flex: none;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--paper-edge);
  background: var(--paper-deep);
}

.hero-visual { position: relative; }
.hero-visual img, .hero-visual video {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-md);
  background: var(--paper-deep);
}
.hero-visual video { position: absolute; inset: 0; height: 100%; object-fit: cover; opacity: 0; transition: opacity 400ms ease-out; }
.hero-visual video.is-ready { opacity: 1; }
.hero-caption { margin-top: var(--s-3); font-size: 0.875rem; color: var(--graphite-500); }

@media (min-width: 1024px) {
  .hero { padding-block: var(--s-6) var(--s-9); }
  .hero-grid { grid-template-columns: 48fr 52fr; gap: var(--s-8); }
}

/* Mobile order: headline → visual → subhead → button → trust line.
   Everything down to the button must fit one 375x812 screen, so the hero
   tightens its own margins here and the visual takes a 5:4 crop of the
   square composite — it loses the white margin, not the drawing. */
@media (max-width: 1023px) {
  .hero { padding-block: var(--s-4) var(--s-7); }
  /* align-items:center from the desktop grid would centre every auto-width
     flex item on the cross axis once this becomes a column. */
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .hero .hero-cta .btn { width: fit-content; white-space: nowrap; }
  .hero-copy { display: contents; }
  .hero h1 { order: 1; }
  .hero .byline { order: 2; margin-bottom: var(--s-3); }
  .hero-visual { order: 3; margin-block: var(--s-1) var(--s-4); }
  .hero-visual img { aspect-ratio: 5 / 4; object-fit: cover; object-position: center; }
  .hero-caption { display: none; }
  .hero .sub { order: 4; margin-bottom: var(--s-4); }
  .hero .hero-cta { order: 5; }
  .hero-trust { order: 6; margin-top: var(--s-4); }
}

/* Who draws it ------------------------------------------------------------ */

.split { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 40fr 60fr; gap: var(--s-8); } }
.split img, .split .shot-pending { border-radius: var(--r-md); }
.split h3 { margin-bottom: var(--s-3); }

.artist-shot { margin: 0; }
.artist-shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-md);
  background: var(--paper-deep);
}
.artist-shot figcaption { margin-top: var(--s-2); }

/* Self-hosted clip — 16:9 box so nothing shifts while it loads. */
.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-md);
  background: var(--paper-deep);
}
.video-frame video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* The timelapses are shot vertically — 4:5 keeps the hand, the pencil and the
   paper in frame without the column becoming a tower. */
.video-frame--tall { aspect-ratio: 4 / 5; }
@media (min-width: 700px) {
  .work .video-frame--tall { max-width: 360px; }
}

/* Three timelapses side by side — the page's proof-of-hand row. */
.timelapse-row {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  margin-top: var(--s-6);
}
.timelapse-row figure { margin: 0; }
.timelapse-row figcaption { margin-top: var(--s-2); }

@media (min-width: 700px) {
  .timelapse-row { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
}

.timelapse-note { margin-top: var(--s-4); max-width: 68ch; }

/* Sound is opt-in, so the control has to be visible on top of the video.
   Dark-on-light for contrast against any frame, matching the paper palette. */
.sound-toggle {
  position: absolute;
  left: var(--s-3);
  bottom: var(--s-3);
  min-height: 36px;
  padding: var(--s-2) var(--s-4);
  background: rgba(250, 248, 244, .92);
  color: var(--graphite-900);
  border: 1px solid rgba(23, 22, 26, .12);
  border-radius: var(--r-pill);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background-color 150ms ease-out;
}
.sound-toggle:hover { background: var(--paper); }
.sound-toggle:active { transform: scale(.99); transition-duration: 90ms; }

@media (pointer: coarse), (hover: none) {
  .sound-toggle { min-height: 44px; }
}

/* Missing-asset placeholder — deliberately visible ------------------------ */

.shot-pending {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2);
  aspect-ratio: 1 / 1;
  padding: var(--s-5);
  text-align: center;
  background: #F6ECD8;
  border: 1px dashed var(--warn);
  border-radius: var(--r-md);
  color: var(--warn);
}
.shot-pending .eyebrow { color: var(--warn); }
.shot-pending p { font-size: 0.9375rem; margin: 0; max-width: 26ch; }
.shot-pending--wide { aspect-ratio: 16 / 9; max-width: 720px; }

/* Section 4 — the signature moment: the drawing draws itself -------------- */

.signature-track { position: relative; }
.signature-stage {
  position: relative;
  aspect-ratio: 3 / 4;          /* the drawings are sheets of paper, not squares */
  max-width: 460px;
  margin-inline: auto;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
}
.signature-stage > * {
  position: absolute; inset: 0;
  margin: 0;
  border: 0; border-radius: 0;
}
/* object-fit does not apply to <picture>; the inner <img> does the work */
.signature-stage img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.signature-frame { opacity: 0; }
.signature-frame:first-child { opacity: 1; }

.signature-progress {
  display: flex; gap: var(--s-2);
  max-width: 620px; margin: var(--s-4) auto 0;
}
.signature-progress span {
  flex: 1; height: 3px; background: var(--paper-edge); border-radius: 999px;
}
.signature-progress span.is-on { background: var(--graphite-900); }
.signature-label {
  max-width: 620px; margin: var(--s-3) auto 0;
  text-align: center;
}

/* The scroll-draw needs the track to be TALLER than the viewport — the JS maps
   (track height − viewport height) to progress. Keeping this desktop-only left
   mobile with a negative span, so progress pinned at 0 and the drawing never
   filled in. It runs at every width now. */
.signature-track { min-height: 200vh; }
/* On phones `vh` is the LARGE viewport (URL bar hidden) while innerHeight is
   whatever the bar is doing right now, so the JS span drifts. `dvh` tracks the
   live viewport and keeps the two in agreement. */
@supports (height: 100dvh) { .signature-track { min-height: 200dvh; } }
.signature-sticky {
  position: sticky;
  /* Clears the 64px sticky header, which would otherwise cover the top of the
     drawing for the whole time the block is pinned. */
  top: calc(64px + var(--s-3));
  padding-block: var(--s-4);
}

@media (min-width: 900px) {
  /* Was 240vh, which made one crossfade 14% of the entire page — the drawing
     had filled in long before the track ran out. 160vh lands it on time. */
  .signature-track { min-height: 160vh; }
  .signature-sticky { top: calc(64px + var(--s-4)); padding-block: var(--s-5); }
  /* Height-driven, not width-driven. At 460px wide a 3:4 sheet is 613px tall,
     and on a ~700px laptop viewport the top of the drawing scrolled out of
     frame while the block was still pinned. */
  .signature-stage { height: min(62vh, 560px); width: auto; max-width: 100%; }
}

/* Reduced motion, and the no-JS fallback: three frames side by side */
.signature-static { display: none; }

/* Without JS nothing fills in, so show the static strip instead of a blank outline */
html:not(.js) .signature-stage,
html:not(.js) .signature-progress,
html:not(.js) .signature-label { display: none; }
html:not(.js) .signature-static {
  display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr);
}
html:not(.js) .signature-static figure { margin: 0; }
html:not(.js) .signature-static img {
  display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover;
  border: 1px solid var(--paper-edge); border-radius: var(--r-md);
}
html:not(.js) .signature-static figcaption { margin-top: var(--s-2); text-align: center; }

/* Tabs — What we draw ----------------------------------------------------- */

.tablist {
  display: flex; flex-wrap: wrap; gap: var(--s-2);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--paper-edge);
  padding-bottom: var(--s-3);
}
.tablist button {
  min-height: 44px;
  padding: var(--s-2) var(--s-4);
  background: transparent;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-sm);
  font-family: inherit; font-size: 0.9375rem; font-weight: 500;
  color: var(--graphite-700);
  cursor: pointer;
  transition: background-color 150ms ease-out, color 150ms ease-out, border-color 150ms ease-out;
}
.tablist button:hover { background: var(--paper-deep); color: var(--graphite-900); }
.tablist button[aria-selected="true"] {
  background: var(--graphite-900); border-color: var(--graphite-900); color: var(--paper);
}

.tabpanel[hidden] { display: none; }
.tabpanel { animation: tab-in 200ms ease-out both; }
@keyframes tab-in { from { opacity: 0; } to { opacity: 1; } }

.tab-price {
  font-size: 0.9375rem;
  color: var(--graphite-500);
  margin-bottom: var(--s-5);
}
.tab-price strong { font-size: 1.0625rem; }

.work-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 700px) { .work-grid { grid-template-columns: repeat(2, 1fr); } }

.work figure { margin: 0; }
.work img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-md);
  background: var(--paper-deep);
}
.work figcaption { margin-top: var(--s-2); font-size: 0.875rem; color: var(--graphite-500); }

.tab-note { margin-top: var(--s-5); font-size: 0.9375rem; color: var(--graphite-500); max-width: 60ch; }

/* How it works — steps ---------------------------------------------------- */

.steps { display: grid; gap: var(--s-5); grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step { border-top: 1px solid var(--graphite-900); padding-top: var(--s-4); }
.step .num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem; font-weight: 600;
  color: var(--graphite-300);
  display: block; margin-bottom: var(--s-2);
}
.step h3 { margin-bottom: var(--s-2); }
.step p { font-size: 1rem; color: var(--graphite-700); margin: 0; }

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

.price-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 900px) { .price-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); align-items: start; } }

.price-card {
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-md);
  padding: var(--s-5);
  display: flex; flex-direction: column;
}
.lp-section--deep .price-card { background: var(--paper); }
.price-card--featured { border: 2px solid var(--graphite-900); }

.price-card .size {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem; font-weight: 600; color: var(--graphite-900);
}
.price-card .dims { font-size: 0.875rem; color: var(--graphite-500); margin-bottom: var(--s-4); }
.price-card .tag {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: var(--s-3);
  padding: 2px var(--s-2);
  background: var(--graphite-900); color: var(--paper);
  border-radius: var(--r-sm);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
}
.price-card .tag-spacer { height: 24px; margin-bottom: var(--s-3); }

.price-rows { margin-bottom: var(--s-5); }
.price-rows div {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-2) 0;
  border-bottom: 1px solid var(--paper-edge);
  font-size: 1rem;
}
.price-rows div:last-child { border-bottom: 0; }
.price-rows dt { color: var(--graphite-500); }
.price-rows dd { margin: 0; font-weight: 600; color: var(--graphite-900); }

.price-card .btn { margin-top: auto; }

.price-notes { margin-top: var(--s-6); display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .price-notes { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } }
.price-notes p { max-width: 52ch; font-size: 1rem; margin: 0; }

/* It actually arrives ------------------------------------------------------ */

/* Two up on a phone, three on a wide screen. Six square tiles: the photos are
   the evidence, so they get the width the text does not. */
.delivered-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, 1fr); margin-top: var(--s-6); }
@media (min-width: 760px) { .delivered-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); } }
.delivered-grid img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-md);
}
.delivered-top { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin-bottom: var(--s-6); }
@media (min-width: 900px) { .delivered-top { grid-template-columns: 300px 1fr; align-items: center; } }

/* WhatsApp review crops. Dark screenshots on a paper page, so each sits in its
   own card with a hairline — reads as evidence pinned to the page rather than
   as a design element that lost its way. */

/* Multi-column rather than grid: the messages are wildly different heights —
   two lines to twelve — and a grid would leave a ragged gap under every short
   one. Columns pack them tight, with no JS and no fixed row heights. */
.reviews {
  columns: 1;
  column-gap: var(--s-4);
  margin-top: var(--s-6);
}
@media (min-width: 640px) { .reviews { columns: 2; column-gap: var(--s-5); } }
@media (min-width: 980px) { .reviews { columns: 3; } }

.review-shot {
  margin: 0 0 var(--s-4);
  break-inside: avoid;      /* never split a message across two columns */
  -webkit-column-break-inside: avoid;
}
@media (min-width: 640px) { .review-shot { margin-bottom: var(--s-5); } }
.review-shot img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--paper-edge);
  border-radius: var(--r-md);
  background: #111014;
}

/* Customer quotes — verbatim, never a full chat thread (spec §9) ----------- */

.quote-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; margin-top: var(--s-6); }
@media (min-width: 800px) { .quote-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-7); } }

.quote { margin: 0; }
.quote p {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--graphite-900);
  margin: 0 0 var(--s-3);
  text-wrap: balance;
}
.quote cite {
  font-style: normal;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--graphite-500);
}

/* Timing ------------------------------------------------------------------ */

.timing-grid { display: grid; gap: var(--s-6); }
@media (min-width: 900px) { .timing-grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; } }

/* FAQ --------------------------------------------------------------------- */

.faq { max-width: 68ch; border-top: 1px solid var(--paper-edge); }
.faq-item { border-bottom: 1px solid var(--paper-edge); }
.faq-q {
  width: 100%;
  min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) 0;
  background: none; border: 0;
  font-family: inherit; font-size: 1.0625rem; font-weight: 600; text-align: left;
  color: var(--graphite-900);
  cursor: pointer;
}
.faq-q .chev {
  flex: none; width: 16px; height: 16px;
  border-right: 2px solid var(--graphite-500);
  border-bottom: 2px solid var(--graphite-500);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 240ms ease-out;
}
/* The button lives inside its <h3> for heading semantics, so it is not a
   sibling of the answer — the open state rides on .faq-item instead. */
.faq-item.is-open .chev { transform: rotate(-135deg) translate(-4px, -4px); }

.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms ease-out; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: var(--s-4); margin: 0; max-width: 62ch; }
.faq-a p + p { padding-top: var(--s-3); }

/* Last ask ----------------------------------------------------------------- */

.last-ask { text-align: center; padding-block: var(--s-9); }
.last-ask h2 { max-width: 20ch; margin-inline: auto; text-wrap: balance; }
.last-ask p { margin-bottom: var(--s-6); color: var(--graphite-500); }

/* Sticky WhatsApp pill ----------------------------------------------------- */

.pill {
  position: fixed;
  right: var(--s-5);
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 56px;
  padding: 0 var(--s-5);
  background: var(--wa);
  color: var(--graphite-900);
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 1rem; text-decoration: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out, visibility 200ms ease-out, background-color 150ms ease-out;
}
.pill.is-visible { opacity: 1; visibility: visible; transform: none; }
.pill:hover { background: var(--wa-press); }
.pill:active { transform: scale(.99); transition-duration: 90ms; }
.pill .icon { width: 22px; height: 22px; fill: currentColor; }

.pill .label-short { display: none; }
@media (max-width: 420px) {
  .pill { padding: 0 var(--s-4); }
  .pill .label-long { display: none; }
  .pill .label-short { display: inline; }
}

/* Section entrance motion --------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(24px); }
.js .reveal { transition: opacity 500ms ease-out, transform 500ms ease-out; transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }

/* Hero load sequence — rise 16px + fade, 400ms, 60ms stagger */
.js .hero-anim { opacity: 0; transform: translateY(16px); }
.js .hero-anim.is-in {
  opacity: 1; transform: none;
  transition: opacity 400ms cubic-bezier(.16,1,.3,1), transform 400ms cubic-bezier(.16,1,.3,1);
  transition-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .js .reveal, .js .hero-anim { opacity: 1 !important; transform: none !important; }
  .signature-track { min-height: 0 !important; }
  .signature-sticky { position: static !important; }
  /* Nothing fills in here, so the instruction to scroll must go too. */
  .signature-stage, .signature-progress, .signature-label { display: none !important; }
  .signature-static { display: grid !important; gap: var(--s-4); grid-template-columns: repeat(3, 1fr); }
  .signature-static figure { margin: 0; }
  .signature-static img {
    display: block; width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover;
    border: 1px solid var(--paper-edge); border-radius: var(--r-md);
  }
  .signature-static figcaption { margin-top: var(--s-2); text-align: center; }
  .hero-visual video { display: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}