/* Designifyy — editorial dark, dithered.
   Type: Bodoni/Didot display (present on macOS) against a grotesque body and a mono eyebrow. */

:root {
  --ink:        #0d0b0a;
  --ink-2:      #14110f;
  --ink-3:      #1c1815;
  --bone:       #ede2d0;
  --bone-dim:   #a99e8d;
  --bone-faint: #6b6357;
  --terracotta: #c9704a;
  --brass:      #b8914a;
  --line:       rgba(237, 226, 208, 0.14);

  --serif: "Bodoni 72", "Didot", "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --mono:  "SF Mono", ui-monospace, Menlo, "Roboto Mono", monospace;

  --wrap: 1180px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--terracotta); color: var(--ink); }

/* ── Dither canvas ─────────────────────────────────────────── */
#dither {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  image-rendering: pixelated;          /* the upscale that sells the effect */
  image-rendering: -moz-crisp-edges;
  opacity: 0;
  transition: opacity 1.6s ease 0.2s;
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 78%);
}
#dither.is-ready { opacity: 0.62; }

.grain {
  position: fixed;
  inset: -50%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 700ms steps(1) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-3%, 2%); }
  50%  { transform: translate(2%, -3%); }
  75%  { transform: translate(-2%, -2%); }
  100% { transform: translate(3%, 1%); }
}

/* ── Layout ────────────────────────────────────────────────── */
main { position: relative; z-index: 2; }
.wrap { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }

.section { padding: clamp(6rem, 13vh, 10rem) 0; position: relative; }
.section--tight { padding-block: clamp(4rem, 8vh, 6rem); }
.section--dark { background: var(--ink-2); border-block: 1px solid var(--line); }
.section--cta { text-align: center; padding-block: clamp(7rem, 16vh, 12rem); }

.grid--2 {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  margin-top: 3rem;
}
@media (min-width: 860px) { .grid--2 { grid-template-columns: 1.15fr 0.85fr; } }

/* ── Type ──────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: 1.4rem;
}

.h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  max-width: 17ch;
}
.h2--xl { font-size: clamp(2.6rem, 8vw, 6rem); max-width: 15ch; margin-inline: auto; }

h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
}

.body { color: var(--bone-dim); max-width: 58ch; }
.body + .body { margin-top: 1.1rem; }
.body--lead { font-size: 1.1rem; margin-top: 1.6rem; max-width: 62ch; }
.body em { color: var(--bone); font-style: italic; font-family: var(--serif); }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  --pad: 0.95rem 1.8rem;
  display: inline-block;
  padding: var(--pad);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--bone);
  border: 1px solid var(--bone);
  border-radius: 2px;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease), transform 0.25s var(--ease);
  will-change: transform;
}
.btn:hover { background: var(--terracotta); border-color: var(--terracotta); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--bone); border-color: var(--line); }
.btn--ghost:hover { background: transparent; border-color: var(--bone); color: var(--bone); }
.btn--sm { --pad: 0.6rem 1.1rem; font-size: 0.68rem; }

/* ── Nav ───────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem clamp(1.5rem, 4vw, 3rem);
  transition: background 0.5s var(--ease), border-color 0.5s var(--ease), padding 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(13, 11, 10, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  padding-block: 0.75rem;
}
.nav__mark {
  font-family: var(--serif);
  font-size: 1.22rem;
  letter-spacing: 0.01em;
  color: var(--bone);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.nav__glyph { color: var(--terracotta); animation: spin 9s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.nav__links { display: none; gap: 2rem; }
@media (min-width: 780px) { .nav__links { display: flex; } }
.nav__links a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bone-dim);
  text-decoration: none;
  position: relative;
  padding-block: 0.3rem;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--terracotta);
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav__links a:hover { color: var(--bone); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ── Hero ──────────────────────────────────────────────────── */
/* ── Scroll stage ──────────────────────────────────────────────
   The stage is tall; the hero inside it is sticky. Scroll distance through the stage maps to the
   video's currentTime, so scrolling down plays forward and scrolling up rewinds. 260vh gives the
   8-second clip about two and a half screens of travel — enough that the scrub feels deliberate
   rather than twitchy, short enough that nobody feels trapped above the fold. */
.stage { position: relative; height: 260svh; }
@media (max-width: 760px) { .stage { height: auto; } }

.hero {
  position: sticky;
  top: 0;
  min-height: 100svh;
  height: 100svh;
  display: flex;
  align-items: center;
  padding: 8rem 0 5rem;
  overflow: hidden;
}
@media (max-width: 760px) { .hero { position: relative; height: auto; } }

.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease);
}
.hero__video.is-ready { opacity: 1; }

/* The type sits on the video, and the video is bright in places the type is not. Without this the
   headline lands on glossy marble and stops being readable — the veil is legibility, not styling. */
/* Legibility scrim, not a curtain.
   The first version opened at `var(--ink) 0%` — fully opaque ink — and stacked a second gradient on
   top of it, so the left half of the frame was solid black and the render underneath was invisible.
   The type needs contrast for roughly the left third; everything past that should be the video. */
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(13, 11, 10, 0.80) 0%,
      rgba(13, 11, 10, 0.55) 32%,
      rgba(13, 11, 10, 0.18) 62%,
      rgba(13, 11, 10, 0.06) 100%),
    linear-gradient(to top, rgba(13, 11, 10, 0.78) 0%, transparent 26%);
}
/* Lets the scrim stay lighter than the type strictly needs. */
.hero__title, .hero__lede, .hero .eyebrow { text-shadow: 0 1px 18px rgba(13, 11, 10, 0.55); }

/* The poster frame sits behind the video element, so a video that never decodes — blocked codec,
   strict media-src, a failed data: URI — degrades to a still of the same shot instead of black. */
.hero { background-size: cover; background-position: center; }
.hero__inner, .hero__scroll { position: relative; z-index: 2; }

/* When the video is running the dithered canvas would show through it and muddy the image. */
body.hero-video-on #dither.is-ready { opacity: 0; }
.hero__inner { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }

.hero__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.9rem, 9vw, 7.2rem);
  line-height: 0.99;
  letter-spacing: -0.025em;
  max-width: 14ch;
  margin-bottom: 2rem;
}
.hero__lede { color: var(--bone-dim); max-width: 54ch; font-size: 1.12rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.6rem; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 6vw, 4.5rem);
  margin-top: 4.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.hero__stats dt {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone-faint);
  margin-bottom: 0.35rem;
}
.hero__stats dd { font-family: var(--serif); font-size: 2.1rem; line-height: 1; }

.hero__scroll {
  position: absolute;
  bottom: 2.2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--bone-faint);
}
.hero__scroll i { width: 1px; height: 46px; background: linear-gradient(var(--bone-faint), transparent); animation: drop 2.1s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(0); transform-origin: top; } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── Ledger ────────────────────────────────────────────────── */
.ledger { list-style: none; border-top: 1px solid var(--line); }
.ledger li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--line);
}
.ledger span { color: var(--bone-dim); font-size: 0.95rem; }
.ledger b {
  font-family: var(--mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 400;
}

/* ── Vastu compass ─────────────────────────────────────────── */
.vastu {
  display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  grid-template-columns: 1fr; align-items: center;
  margin-top: 3.5rem;
}
@media (min-width: 880px) { .vastu { grid-template-columns: 400px 1fr; } }

.compass {
  position: relative;
  aspect-ratio: 1;
  width: min(400px, 100%);
  margin-inline: auto;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: 3px;
  padding: 3px;
  transform: rotate(45deg);
}
.compass__ring {
  position: absolute; inset: -16px;
  border: 1px solid var(--line); border-radius: 50%;
  animation: spin 46s linear infinite;
}
.compass__ring::after {
  content: ""; position: absolute; top: -4px; left: 50%;
  width: 7px; height: 7px; margin-left: -3.5px;
  background: var(--terracotta); border-radius: 50%;
}
.compass__cross { position: absolute; inset: 0; pointer-events: none; }
.compass__cross::before, .compass__cross::after {
  content: ""; position: absolute; background: var(--line);
}
.compass__cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.compass__cross::after  { top: 50%; left: 0; right: 0; height: 1px; }

.zone {
  border: 1px solid var(--line);
  background: rgba(237, 226, 208, 0.015);
  color: var(--bone-faint);
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: background 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
  display: grid; place-items: center;
}
.zone > * { transform: rotate(-45deg); }
.zone span, .zone { transform-origin: center; }
.zone--ne { grid-area: 1 / 2; border-radius: 0 100% 0 0; }
.zone--se { grid-area: 2 / 2; border-radius: 0 0 100% 0; }
.zone--sw { grid-area: 2 / 1; border-radius: 0 0 0 100%; }
.zone--nw { grid-area: 1 / 1; border-radius: 100% 0 0 0; }
.zone:hover, .zone.is-active {
  background: rgba(201, 112, 74, 0.16);
  border-color: var(--terracotta);
  color: var(--bone);
}

.compass__label {
  position: absolute;
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.2em; color: var(--bone-faint);
  transform: rotate(-45deg);
}
.compass__label--n { top: -34px; left: 50%; }
.compass__label--s { bottom: -34px; left: 50%; }
.compass__label--e { right: -34px; top: 50%; }
.compass__label--w { left: -34px; top: 50%; }

.vastu__panel { position: relative; min-height: 210px; }
.vastu__card {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  pointer-events: none;
  border-left: 1px solid var(--terracotta);
  padding-left: 1.7rem;
}
.vastu__card.is-active { opacity: 1; transform: none; pointer-events: auto; }
.vastu__card .eyebrow { color: var(--terracotta); margin-bottom: 0.8rem; }

/* ── Marquee ───────────────────────────────────────────────── */
.marquee { overflow: hidden; margin-top: 2.5rem; padding-block: 1.4rem; border-block: 1px solid var(--line); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee__track { display: flex; align-items: center; gap: 1.9rem; width: max-content; animation: slide 44s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee span { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.7rem); white-space: nowrap; color: var(--bone); }
.marquee i { color: var(--terracotta); font-style: normal; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ── Steps ─────────────────────────────────────────────────── */
.steps { display: grid; gap: 1px; grid-template-columns: 1fr; margin-top: 3.5rem; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 620px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--ink-2); padding: 2.2rem 1.7rem; transition: background 0.45s var(--ease); }
.step:hover { background: var(--ink-3); }
.step__n { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--terracotta); display: block; margin-bottom: 1.6rem; }
.step .body { font-size: 0.94rem; }

/* ── Pricing ───────────────────────────────────────────────── */
.tabs { display: inline-flex; gap: 2px; margin-top: 3rem; padding: 3px; border: 1px solid var(--line); border-radius: 3px; }
.tab {
  background: transparent; border: 0; cursor: pointer;
  padding: 0.65rem 1.3rem;
  font-family: var(--mono); font-size: 0.71rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bone-faint); border-radius: 2px;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.tab.is-active { background: var(--bone); color: var(--ink); }

.plans { display: none; gap: 1px; grid-template-columns: 1fr; margin-top: 2.2rem; background: var(--line); border: 1px solid var(--line); }
.plans.is-active { display: grid; animation: fadeUp 0.6s var(--ease) both; }
@media (min-width: 640px) { .plans { grid-template-columns: 1fr 1fr; } }
/* auto-fit, not a fixed count: the one-time panel is 5 packs today and was 4 yesterday. A
   hard-coded repeat(4) silently orphans the fifth card onto its own row. */
@media (min-width: 1020px) { .plans[data-panel="home"] { grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); } .plans[data-panel="pro"] { grid-template-columns: repeat(3, 1fr); } }

.plan { background: var(--ink); padding: 2.2rem 1.7rem; display: flex; flex-direction: column; position: relative; transition: background 0.45s var(--ease); }
.plan:hover { background: var(--ink-3); }
.plan--feature { background: var(--ink-3); }
.plan__flag {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--terracotta);
}
.plan__price { font-family: var(--serif); font-size: 2.5rem; line-height: 1; margin: 0.4rem 0 1.6rem; }
.plan__price small { font-size: 0.9rem; color: var(--bone-faint); font-family: var(--mono); letter-spacing: 0.06em; }
.plan ul { list-style: none; margin-bottom: 2rem; flex: 1; }
.plan li { color: var(--bone-dim); font-size: 0.93rem; padding: 0.42rem 0 0.42rem 1.2rem; position: relative; }
.plan li::before { content: "—"; position: absolute; left: 0; color: var(--bone-faint); }
.plan li b { color: var(--bone); font-weight: 500; }
.plan .btn { text-align: center; }

.fineprint { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--bone-faint); margin-top: 1.6rem; }

/* ── Signup ────────────────────────────────────────────────── */
.signup { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; margin-top: 2.6rem; }
.signup input {
  background: transparent; border: 1px solid var(--line);
  border-radius: 2px; padding: 0.95rem 1.2rem;
  color: var(--bone); font-family: var(--mono); font-size: 0.82rem;
  min-width: min(320px, 100%);
  transition: border-color 0.4s var(--ease);
}
.signup input::placeholder { color: var(--bone-faint); }
.signup input:focus { outline: none; border-color: var(--terracotta); }
.signup__note { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; color: var(--terracotta); margin-top: 1.1rem; min-height: 1.2em; }

/* ── Footer ────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 2.4rem 0; position: relative; z-index: 2; }
.footer__inner { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bone-faint); }
.footer__dim { color: rgba(107, 99, 87, 0.6); }

/* ── Reveal + split animations ─────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.08s; }
.reveal[data-delay="2"] { transition-delay: 0.16s; }
.reveal[data-delay="3"] { transition-delay: 0.24s; }
.reveal[data-delay="4"] { transition-delay: 0.32s; }
.reveal[data-delay="5"] { transition-delay: 0.40s; }
.reveal[data-delay="6"] { transition-delay: 0.48s; }

/* THE CLIPPED DESCENDER. `overflow: hidden` is what masks the slide-up reveal — each word's inner
   span starts below its box and the box crops it. But `.hero__title` sets `line-height: 0.99`, so
   that box is SHORTER than the em, and it cropped the tail of the "g" in "Designed" on the very
   first word a visitor reads.
   Padding gives the mask room below the baseline; the equal negative margin takes that room back
   out of the layout, so the margin box — which is what `vertical-align: bottom` aligns and what the
   next line sits under — is exactly the height it was. The descender shows, nothing moves. */
.word {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.24em; margin-bottom: -0.24em;
  padding-top: 0.08em;   margin-top: -0.08em;      /* accents and tall ascenders, same trick */
}
.word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 1s var(--ease);
}
.is-in .word > span, .word.is-in > span { transform: none; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .word > span { transform: none; }
  html { scroll-behavior: auto; }
}

/* ── Before / after compare ────────────────────────────────── */
/* PORTRAIT, and centred rather than full-bleed. The comparison photos are phone shots held
   upright — which is how a customer will actually send theirs. A landscape 16/10 frame cropped
   them to a horizontal slice with object-fit:cover, cutting off the ceiling fan at the top and
   the floor at the bottom: precisely the two things the render is meant to prove it kept. */
.ba {
  position: relative; margin: 3rem auto 0; overflow: hidden;
  border: 1px solid var(--line); border-radius: 3px;
  aspect-ratio: 3 / 4; max-width: 480px;
  cursor: ew-resize; user-select: none;
  background: var(--ink);
}
@media (min-width: 760px) { .ba { max-width: 560px; } }
.ba__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;
}
/* The clip holds the BEFORE image and is width-constrained by the handle.
   The inner img is pinned to the figure's width so it doesn't squash as the clip narrows. */
.ba__clip { position: absolute; inset: 0; width: 50%; overflow: hidden; will-change: width; }
.ba__clip .ba__img { width: var(--ba-w, 100vw); max-width: none; }

.ba__handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; margin-left: -1px; background: var(--bone);
  will-change: left; z-index: 3;
}
.ba__handle:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }
.ba__grip {
  position: absolute; top: 50%; left: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: var(--bone);
  display: grid; place-items: center;
  box-shadow: 0 2px 18px rgba(0,0,0,0.5);
}
.ba__grip::before, .ba__grip::after {
  content: ""; position: absolute;
  border: solid var(--ink); border-width: 0 0 2px 2px; width: 8px; height: 8px;
}
.ba__grip::before { transform: rotate(45deg)  translate(4px, -4px); }
.ba__grip::after  { transform: rotate(-135deg) translate(4px, -4px); }

.ba__tag {
  position: absolute; top: 1rem; z-index: 2;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bone); background: rgba(13,11,10,0.62);
  padding: 0.4rem 0.7rem; border-radius: 2px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.ba__tag--l { left: 1rem; }
.ba__tag--r { right: 1rem; }
/* Tracks the figure so the caption sits under the image, not under the full column width. */
.ba__cap {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; line-height: 1.7;
  color: var(--bone-faint); margin: 1rem auto 0; max-width: 480px;
}
@media (min-width: 760px) { .ba__cap { max-width: 560px; } }

/* ── Account, auth dialog, toast ────────────────────────────────────────
   Uses the existing tokens throughout — this is the same page, not a bolted-on widget. */

.account { display: flex; align-items: center; gap: 0.9rem; }
.account__bal {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--bone-faint); white-space: nowrap;
}
.account__out {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 0; color: var(--bone-faint); cursor: pointer;
  border-bottom: 1px solid var(--line); padding: 0 0 2px;
}
.account__out:hover { color: var(--bone); }
.account__out:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; }
@media (max-width: 620px) { .account__bal { display: none; } }

.auth {
  border: 1px solid var(--line); background: var(--ink-3); color: var(--bone);
  padding: clamp(1.8rem, 4vw, 2.6rem); width: min(27rem, calc(100vw - 2rem));
  border-radius: 3px; position: relative;
}
.auth::backdrop { background: rgba(6, 5, 5, 0.82); backdrop-filter: blur(3px); }
.auth__title { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.05; margin: 0.3rem 0 0.6rem; }
.auth__note { font-size: 0.85rem; line-height: 1.6; color: var(--bone-faint); margin: 0 0 1.6rem; }
.auth__label {
  display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--bone-faint); margin: 0 0 0.4rem;
}
.auth__input {
  width: 100%; background: var(--ink); color: var(--bone);
  border: 1px solid var(--line); border-radius: 2px;
  padding: 0.75rem 0.85rem; margin: 0 0 1.1rem; font: inherit; font-size: 0.92rem;
}
.auth__input:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 1px; border-color: transparent; }
.auth__error { color: var(--terracotta); font-size: 0.82rem; line-height: 1.5; margin: 0 0 0.9rem; min-height: 1.2em; }
.auth__submit { width: 100%; justify-content: center; }
.auth__toggle {
  display: block; width: 100%; margin-top: 1rem; background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-faint);
}
.auth__toggle:hover { color: var(--bone); }
.auth__close {
  position: absolute; top: 0.7rem; right: 0.9rem; background: none; border: 0;
  color: var(--bone-faint); font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.4rem;
}
.auth__close:hover { color: var(--bone); }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1.5rem);
  z-index: 200; max-width: min(30rem, calc(100vw - 2rem));
  background: var(--ink-3); color: var(--bone); border: 1px solid var(--line);
  border-left: 2px solid var(--olive, #8a8f6a);
  padding: 0.8rem 1.1rem; border-radius: 2px; font-size: 0.85rem; line-height: 1.5;
  opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast--err { border-left-color: var(--terracotta); }

[aria-busy="true"] { opacity: 0.65; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: opacity 120ms linear; transform: translate(-50%, 0); }
}

/* The all-in figure, under the net price it belongs to. Quiet on purpose — the headline number is
   still the net one the ladder is built on; this removes the arithmetic, it does not shout. */
.plan__gross {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  color: var(--bone-faint); margin: -1.2rem 0 1.6rem;
}
.plan[data-unavailable] { opacity: 0.45; }
.plan[data-unavailable] .plan__price { text-decoration: line-through; }

/* Social sign-in. Rendered only for providers the project has enabled, so this block is empty and
   hidden until one is switched on in the Supabase dashboard. */
.auth__providers { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.3rem; }
.auth__provider {
  width: 100%; padding: 0.78rem 1rem; cursor: pointer;
  background: transparent; color: var(--bone);
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.auth__provider:hover { border-color: var(--bone); background: rgba(237,226,208,0.04); }
.auth__provider:disabled { opacity: 0.5; cursor: default; }
.auth__provider:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.auth__divider {
  display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1.2rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone-faint);
}
.auth__divider::before, .auth__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

/* ── Phone walkthrough ──────────────────────────────────────────────────
   A device frame with a live screen inside it. Deliberately not a screenshot carousel: the point
   is that the flow is short, so it has to be seen moving. */
.phone-row {
  display: grid; gap: clamp(2rem, 5vw, 4rem); margin-top: 3.5rem;
  grid-template-columns: 1fr; align-items: center; justify-items: center;
}
@media (min-width: 860px) { .phone-row { grid-template-columns: auto 1fr; justify-items: start; } }

.phone__frame {
  position: relative; width: 288px; height: 592px;
  border-radius: 42px; padding: 11px;
  background: linear-gradient(160deg, #2a2622, #16130f);
  box-shadow: 0 2px 0 rgba(237,226,208,0.10) inset, 0 40px 80px -30px rgba(0,0,0,0.9),
              0 0 0 1px rgba(237,226,208,0.09);
}
.phone__notch {
  position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
  width: 104px; height: 22px; background: #100e0c;
  border-radius: 0 0 14px 14px; z-index: 3;
}
.ph__screen {
  position: relative; width: 100%; height: 100%; overflow: hidden;
  border-radius: 32px; background: var(--ink-2);
  padding: 2.6rem 1.1rem 1.1rem;
  display: flex; flex-direction: column; gap: 0.85rem;
}

.ph__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bone); padding-bottom: 0.6rem; border-bottom: 1px solid var(--line);
}
.ph__step { color: var(--bone-faint); }

.ph__shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.4rem; }
.ph__shot {
  aspect-ratio: 3/4; border: 1px dashed var(--line); border-radius: 4px;
  display: grid; place-items: center; color: var(--bone-faint);
  font-family: var(--mono); font-size: 0.9rem;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.ph__shot.is-done { border-style: solid; border-color: var(--brass); background: rgba(184,145,74,0.10); }
.ph__tick { color: var(--brass); }
.ph__hint { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--bone-faint); }

.ph__list { list-style: none; display: flex; flex-direction: column; gap: 0.42rem; }
.ph__list li {
  display: flex; justify-content: space-between; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; color: var(--bone-dim);
  padding: 0.42rem 0.55rem; background: rgba(237,226,208,0.03); border-radius: 3px;
  animation: phIn 0.45s var(--ease) both; animation-delay: calc(var(--i) * 60ms);
}
@keyframes phIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ph__tag {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.16rem 0.4rem; border-radius: 2px; white-space: nowrap;
}
.ph__tag--keep { color: #9fb08a; background: rgba(159,176,138,0.14); }
.ph__tag--replace { color: var(--terracotta); background: rgba(201,112,74,0.14); }

.ph__styles { display: flex; flex-direction: column; gap: 0.42rem; }
.ph__style {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; color: var(--bone-dim);
  padding: 0.55rem 0.6rem; border: 1px solid var(--line); border-radius: 3px;
}
.ph__style.is-on { border-color: var(--brass); color: var(--bone); background: rgba(184,145,74,0.09); }
.ph__style span { color: var(--brass); }

.ph__prog { height: 2px; background: var(--line); border-radius: 2px; overflow: hidden; margin: 0.5rem 0 0.2rem; }
.ph__prog__bar { height: 100%; background: var(--brass); transition: width 0.6s var(--ease); }
.ph__log { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; }
.ph__log li {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.06em;
  color: var(--bone-faint); opacity: 0.4; transition: opacity 0.4s var(--ease), color 0.4s var(--ease);
}
.ph__log li::before { content: "· "; }
.ph__log li.is-on { opacity: 1; color: var(--bone-dim); }
.ph__log li.is-on::before { content: "✓ "; color: var(--brass); }

.ph__result { position: relative; flex: 1; border-radius: 5px; overflow: hidden; min-height: 0; }
.ph__result img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph__badge {
  position: absolute; left: 0.55rem; bottom: 0.55rem;
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(13,11,10,0.78); color: var(--bone); padding: 0.2rem 0.45rem; border-radius: 2px;
}
.ph__foot {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-faint);
}
.ph__cta {
  margin-top: auto; text-align: center; padding: 0.62rem;
  background: var(--bone); color: var(--ink); border-radius: 3px;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase;
}
.ph__cta.is-off { background: transparent; color: var(--bone-faint); border: 1px solid var(--line); }
.ph__cta[data-act] { cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.ph__cta[data-act]:hover { background: var(--brass); }

/* ── Interactive screens ────────────────────────────────────────────────
   The frame stopped being a slideshow and became a control surface, so everything inside it is a
   real <button>: hit targets, focus rings and keyboard reach all follow from that. The reset below
   is because `* { margin: 0 }` does not touch a button's inherited font or its UA background. */
/* :where() so the reset carries ZERO specificity. Written as `.ph__screen button` it scored (0,1,1)
   and beat every `.ph__oauth`/`.ph__pack` font-size below it — the buttons silently rendered at the
   17px body size inside a 288px phone. A reset must be the weakest rule in the file, not the
   strongest, or every rule after it needs an !important to undo it. */
:where(.ph__screen button) {
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer;
  text-align: left; -webkit-tap-highlight-color: transparent;
}
.ph__screen button:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

.ph__brand {
  font-family: var(--serif); font-size: 1.5rem; letter-spacing: 0.01em;
  text-align: center; margin-top: 1.6rem;
}
.ph__tagline {
  text-align: center; font-size: 0.68rem; color: var(--bone-dim); margin-top: -0.4rem;
}
.ph__auth { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1.4rem; }
.ph__oauth {
  display: flex; align-items: center; gap: 0.5rem; justify-content: center;
  padding: 0.55rem; border: 1px solid var(--line); border-radius: 3px;
  font-size: 0.66rem; color: var(--bone);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.ph__oauth:hover { border-color: var(--bone-faint); background: rgba(237,226,208,0.04); }
.ph__or {
  display: flex; align-items: center; gap: 0.6rem; margin: 0.2rem 0;
  font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bone-faint);
}
.ph__or::before, .ph__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ph__field {
  padding: 0.5rem 0.6rem; border: 1px solid var(--line); border-radius: 3px;
  font-size: 0.66rem; color: var(--bone-faint);
}
.ph__fine {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.06em; line-height: 1.5;
  color: var(--bone-faint); text-align: center; margin-top: 0.5rem;
}
.ph__link {
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-dim);
}
.ph__link:hover { color: var(--bone); }
.ph__sub {
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--bone-faint);
}
.ph__balance {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.9rem 0; border-bottom: 1px solid var(--line);
}
.ph__balance b { font-family: var(--serif); font-size: 2.6rem; line-height: 1; color: var(--brass); }
.ph__balance span { font-size: 0.7rem; color: var(--bone-dim); }
.ph__balance--sm { padding: 0.4rem 0 0.8rem; }
.ph__balance--sm b { font-size: 1.6rem; }

.ph__empty { font-size: 0.66rem; color: var(--bone-faint); line-height: 1.5; }
.ph__recent {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem;
  border: 1px solid var(--line); border-radius: 4px; cursor: pointer;
}
.ph__recent img { width: 44px; height: 44px; object-fit: cover; border-radius: 3px; }
.ph__recent b { display: block; font-size: 0.7rem; font-weight: 500; }
.ph__recent i {
  font-style: normal; font-family: var(--mono); font-size: 0.52rem;
  letter-spacing: 0.08em; color: var(--bone-faint);
}

.ph__shot { position: relative; overflow: hidden; padding: 0; }
/* The thumbnail is a real photograph of a dim Indian bathroom. At 0.55 it disappeared into the
   frame entirely and the captured tiles read as empty brown squares — the one thing they must not
   look like. Lifted, and the tick gets its own shadow so it survives the brighter ground. */
.ph__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
.ph__shot .ph__tick { text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.ph__shot .ph__tick, .ph__shot .ph__num {
  position: relative; z-index: 1; display: grid; place-items: center; height: 100%;
  font-family: var(--mono); font-size: 0.7rem;
}
.ph__note {
  font-family: var(--mono); font-size: 0.5rem; letter-spacing: 0.05em; line-height: 1.5;
  color: var(--bone-faint);
}
.ph__warn {
  font-size: 0.58rem; line-height: 1.45; color: var(--terracotta);
  border-left: 2px solid var(--terracotta); padding-left: 0.5rem;
}

.ph__style em {
  font-style: normal; font-family: var(--mono); font-size: 0.5rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone-faint); margin-left: auto;
  padding-right: 0.5rem;
}
.ph__style { display: flex; align-items: center; }

.ph__row { display: flex; gap: 0.5rem; }
.ph__row--end { margin-top: auto; }
.ph__ghost {
  flex: 1; text-align: center; padding: 0.5rem;
  border: 1px solid var(--line); border-radius: 3px;
  font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-dim);
}
.ph__ghost:hover { color: var(--bone); border-color: var(--bone-faint); }
.ph__ghost--warn { color: var(--terracotta); }
.ph__ghost--warn:hover { color: var(--terracotta); border-color: var(--terracotta); }

.ph__packs { display: flex; flex-direction: column; gap: 0.5rem; }
.ph__pack {
  display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.5rem;
  padding: 0.6rem 0.7rem; border: 1px solid var(--line); border-radius: 4px;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.ph__pack:hover, .ph__pack.is-on { border-color: var(--brass); background: rgba(184,145,74,0.08); }
.ph__pack.is-best { border-color: rgba(184,145,74,0.5); }
.ph__pack b { font-size: 0.72rem; font-weight: 500; }
.ph__pack i { font-style: normal; font-size: 0.78rem; color: var(--brass); text-align: right; }
.ph__pack i em {
  font-style: normal; font-family: var(--mono); font-size: 0.48rem;
  letter-spacing: 0.08em; color: var(--bone-faint);
}
.ph__pack span {
  grid-column: 1 / -1; font-family: var(--mono); font-size: 0.5rem;
  letter-spacing: 0.06em; color: var(--bone-faint);
}

.phone__ctrls { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.2rem; }
.phone__reset {
  background: none; border: 0; cursor: pointer;
  font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-faint); text-decoration: underline; text-underline-offset: 4px;
}
.phone__reset:hover { color: var(--bone-dim); }

.phone__side { max-width: 34ch; }
.phone__side .eyebrow { margin-bottom: 0.7rem; transition: opacity 0.3s var(--ease); }
/* Ten segments now, one per screen, so they have to share the panel width rather than each claim a
   fixed 26px — a progress rail, not a set of tabs you click. */
.phone__dots { display: flex; gap: 0.35rem; margin: 1.5rem 0 1rem; max-width: 26ch; }
.phone__dots button {
  flex: 1; height: 3px; padding: 0; border: 0; border-radius: 2px;
  background: var(--line); transition: background 0.35s var(--ease);
}
.phone__dots button.is-on { background: var(--brass); }
.phone__dots button:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 4px; }

/* ── Store buttons ──────────────────────────────────────────────────────
   Deliberately NOT the official Apple/Google badge artwork: that is trademarked and comes with
   brand rules, and reproducing it while the app is unpublished would imply availability that does
   not exist. These read as ours, and they say plainly that the app is not out yet. */
.stores { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.store {
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1rem; border: 1px solid var(--line); border-radius: 4px;
  color: var(--bone-dim); text-decoration: none;
  transition: border-color 0.35s var(--ease), color 0.35s var(--ease);
}
.store[aria-disabled="true"] { opacity: 0.62; cursor: default; }
.store:not([aria-disabled="true"]):hover { border-color: var(--bone); color: var(--bone); }
.store span { display: flex; flex-direction: column; line-height: 1.15; }
.store b { font-size: 0.82rem; font-weight: 500; color: var(--bone); }
.store i {
  font-style: normal; font-family: var(--mono); font-size: 0.54rem;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--bone-faint);
}
.stores__note { margin-top: 0.9rem; max-width: 34ch; }

/* ── Legal pages ───────────────────────────────────────────────────────── */
.legal-page { background: var(--ink); }
.legal { padding: 8rem 0 5rem; position: relative; z-index: 2; }
.wrap--narrow { width: min(680px, calc(100% - 3rem)); margin-inline: auto; }
.legal__title {
  font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.06; letter-spacing: -0.015em; margin-bottom: 0.8rem;
}
.legal__meta {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.09em;
  color: var(--bone-faint); margin-bottom: 2.6rem;
}
.legal__notice {
  border-left: 2px solid var(--terracotta); background: rgba(201,112,74,0.07);
  padding: 0.9rem 1.1rem; margin-bottom: 2.4rem;
  font-size: 0.85rem; line-height: 1.6; color: var(--bone-dim);
}
.legal h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.45rem;
  margin: 2.4rem 0 0.7rem; letter-spacing: -0.01em;
}
.legal p, .legal li { color: var(--bone-dim); font-size: 0.95rem; line-height: 1.75; }
.legal p + p { margin-top: 0.9rem; }
.legal ul { margin: 0.8rem 0 0 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.legal a { color: var(--bone); text-decoration: underline; text-underline-offset: 3px; }
.legal b { color: var(--bone); font-weight: 500; }
.foot__legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.foot__legal a {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--bone-faint); text-decoration: none;
}
.foot__legal a:hover { color: var(--bone); }

/* ── FAQ ──────────────────────────────────────────────────────────────
 * <details> rather than JS accordions: open/close, keyboard operation and find-in-page are the
 * platform's job, and — the reason that matters here — a crawler reads the answer text whether or
 * not the item is expanded. A JS accordion that injects answers on click hides them from exactly
 * the engines the FAQ exists to feed. */
.faq { border-top: 1px solid var(--line); margin-top: 3rem; }

.faq__item { border-bottom: 1px solid var(--line); }

.faq__item summary {
  cursor: pointer; list-style: none;
  padding: 1.4rem 2.5rem 1.4rem 0; position: relative;
  transition: color 0.3s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }

/* The heading carries the semantics; summary carries the interaction. Reset the h3's own spacing
   so it sits on the summary's baseline instead of fighting it. */
.faq__item summary h3 {
  display: inline; margin: 0; font-family: var(--serif);
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 400; color: var(--bone);
}
.faq__item summary:hover h3 { color: var(--terracotta); }

.faq__item summary::after {
  content: '+'; position: absolute; right: 0; top: 50%; translate: 0 -50%;
  font-family: var(--mono); font-size: 1.3rem; color: var(--bone-faint);
  transition: rotate 0.3s var(--ease), color 0.3s var(--ease);
}
.faq__item[open] summary::after { content: '+'; rotate: 45deg; color: var(--terracotta); }

.faq__item > .body {
  padding: 0 2.5rem 1.6rem 0; margin: 0;
  max-width: 62ch; color: var(--bone-dim);
}
.faq__item > .body b { color: var(--bone); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  .faq__item summary, .faq__item summary::after { transition: none; }
}