/* Shotspa — calm, warm, native, light only. Served under /shotspa, so every asset path
   in the HTML is absolute (/shotspa/...). */

/* The headline face. Self-hosted, so the page makes no request to Google —
   it says "private by design" and should behave like it. Fraunces at its
   soft setting: a warm serif with a little play in it, like the icon. */
@font-face {
  font-family: "Fraunces";
  src: url("/shotspa/fonts/fraunces-600-soft-latin.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --peach-wash: #fbeee6;
  --bg: #f7f4ef;
  --bg-raised: #fffdf9;
  --bg-sunk: #efe9e0;
  --text: #22201c;
  --text-soft: #6b655c;
  --line: #e4ddd2;
  /* From the icon. Its coral (#db6a54) is too light to carry white text,
     so the accent is the same hue a step deeper (5.1:1 on white). */
  --accent: #b84c38;
  --accent-soft: #fbe3d8;
  /* The cucumber: small touches only, never a second accent. */
  --cucumber: #2e7d32;
  --cucumber-soft: #e6f2d8;
  --accent-text: #ffffff;
  --shadow: 0 1px 2px rgb(34 32 28 / 0.06), 0 12px 32px -12px rgb(34 32 28 / 0.18);
  --radius: 14px;
  --page: 1040px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 3px; }

/* No lone last word ("spa / day.") at any width. */
h1, h2, h3, .look-end-title { text-wrap: balance; }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 20px; }

/* --- Nav --------------------------------------------------------------- */

.nav {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 18px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: block;
}

.nav a:not(.brand) {
  color: var(--text-soft);
  font-size: 15px;
  text-decoration: none;
}

.nav a:not(.brand):hover { color: var(--text); }
.nav a.nav-buy {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  font-size: 14px;
}
.nav a.nav-buy:hover { color: var(--accent-text); background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
@media (max-width: 640px) {
  .nav a:not(.brand):not(.nav-buy) { display: none; }
}

/* --- Buttons ----------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: transform 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgb(34 32 28 / 0.35); }
.button:active { transform: translateY(1px); box-shadow: none; }

.button-primary { background: var(--accent); color: var(--accent-text); }
.button-primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }

.button-quiet {
  background: var(--bg-raised);
  color: var(--text);
  border: 1px solid var(--line);
}
.button-quiet:hover { border-color: var(--text-soft); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.fine { color: var(--text-soft); font-size: 14px; margin: 14px 0 0; }

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

.hero { padding: 56px 0 24px; text-align: center; }

.hero h1 {
  margin: 0 auto;
  max-width: 13ch;
  font-family: var(--display);
  font-size: clamp(44px, 7.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 600;
}

.hero .lede {
  max-width: 34rem;
  margin: 20px auto 30px;
  color: var(--text-soft);
  font-size: clamp(17px, 2.2vw, 20px);
}

.hero .actions { justify-content: center; }

/* --- Before and after, under your own hand ---------------------------- */
/* Two stills of the same canvas, the raw one clipped to the left of the
   divider. The range input covers the picture, so it is draggable anywhere,
   by keyboard too, and it needs no script beyond writing --pos. */

.compare {
  position: relative;
  margin: 40px auto 0;
  max-width: 780px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-sunk);
  --pos: 50%;
  touch-action: pan-y;
}
.compare img { display: block; width: 100%; height: auto; }
.compare-before {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(34 32 28 / 0.12);
  pointer-events: none;
}
.compare-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322201c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E")
    center / 20px no-repeat;
  box-shadow: 0 2px 10px rgb(34 32 28 / 0.25);
}
.compare-label {
  position: absolute;
  top: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: rgb(255 253 249 / 0.88);
  color: var(--text);
  pointer-events: none;
  backdrop-filter: blur(6px);
}
.compare-label.before { left: 14px; }
.compare-label.after { right: 14px; }
.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.compare-range:focus-visible + .compare-handle::after { outline: 3px solid var(--accent); outline-offset: 2px; }
.compare-caption { color: var(--text-soft); font-size: 14px; margin: 14px 0 48px; text-align: center; }

@media (max-width: 560px) {
  .compare-label { top: 8px; padding: 2px 8px; font-size: 11px; }
  .compare-label.before { left: 8px; }
  .compare-label.after { right: 8px; }
  .compare-handle::after { width: 32px; height: 32px; margin: -16px 0 0 -16px; background-size: 16px; }
}

/* --- Hero demo: the product, told in motion ---------------------------- */
/* One 10 s loop: raw → backdrop → corners & shadow → 3D tilt → reset.
   Only transform and opacity animate, so it stays smooth on any Mac. */

.demo { margin: 48px auto 8px; max-width: 780px; }

.demo-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  perspective: 1600px;
}

.demo-backdrop {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  background:
    radial-gradient(60% 70% at 18% 20%, #f8cdb9 0%, transparent 70%),
    radial-gradient(55% 65% at 85% 25%, #f6dcc4 0%, transparent 70%),
    radial-gradient(70% 80% at 60% 95%, #e3efd2 0%, transparent 70%),
    #f3ede4;
  opacity: 0;
  animation: demo-backdrop 10s ease-in-out infinite;
}

.demo-shot {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: #fbfaf7;
  border: 1px solid #e2dcd2;
  border-radius: 3px;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation: demo-shot 10s cubic-bezier(.6, 0, .25, 1) infinite;
}

/* The shadow is its own layer so only its opacity animates. */
.demo-shot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    0 1px 0 rgb(255 255 255 / 0.9) inset,
    0 3px 8px rgb(34 32 28 / 0.14),
    0 22px 40px -10px rgb(34 32 28 / 0.32),
    0 60px 90px -30px rgb(184 76 56 / 0.35);
  opacity: 0;
  animation: demo-shadow 10s ease-in-out infinite;
  z-index: -1;
}

.demo-bar { display: flex; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #ece6dc; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.demo-bar i { width: 11px; height: 11px; border-radius: 50%; background: #e4ddd2; }
.demo-bar i:nth-child(1) { background: #f0a39a; }
.demo-bar i:nth-child(2) { background: #f2cf8f; }
.demo-bar i:nth-child(3) { background: #a9d4a2; }

.demo-body {
  flex: 1;
  display: flex;
  min-height: 0;
  /* The mock app is taller than a phone-width stage: clip it to the shot,
     round corners included, instead of spilling over the steps below. */
  overflow: hidden;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
.demo-side { width: 22%; padding: 16px 12px; border-right: 1px solid #ece6dc; display: grid; gap: 10px; align-content: start; }
/* The mock app is colourful, like the screens further down the page: what
   the animation dresses up should look worth dressing up. */
.demo-side b { height: 9px; border-radius: 5px; background: #ebe5db; }
.demo-side b:first-child { background: linear-gradient(90deg, #7b5cff, #b46cff); }
.demo-main { flex: 1; padding: 20px 24px; display: grid; gap: 11px; align-content: start; }
.demo-main span { height: 10px; border-radius: 5px; background: #ebe5db; }
.demo-main span:first-child { height: 14px; background: #2b2740; }
.demo-main .tint { background: linear-gradient(90deg, #ff5f8f, #ffb35c); }
.w40 { width: 40%; } .w55 { width: 55%; } .w60 { width: 60%; }
.w75 { width: 75%; } .w85 { width: 85%; } .w90 { width: 90%; }
.demo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px; }
.demo-cards em { aspect-ratio: 4 / 3; border-radius: 8px; }
.demo-cards em:nth-child(1) { background: linear-gradient(135deg, #6a3df5, #b03df5 50%, #ff5f8f); }
.demo-cards em:nth-child(2) { background: linear-gradient(135deg, #00d2ff, #3a47d5); }
.demo-cards em:nth-child(3) { background: radial-gradient(circle at 35% 35%, #ffd36e 0 22%, transparent 23%), linear-gradient(135deg, #ff8a3d, #ff5f6d); }

.demo-steps {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.demo-steps li {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 13px;
  animation: 10s ease-in-out infinite;
}
.demo-steps .s1 { animation-name: step-1; }
.demo-steps .s2 { animation-name: step-2; }
.demo-steps .s3 { animation-name: step-3; }
.demo-steps .s4 { animation-name: step-4; }

@keyframes demo-backdrop {
  0%, 14% { opacity: 0; }
  24%, 86% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

@keyframes demo-shot {
  0%, 14% { transform: scale(1); border-radius: 3px; }
  26%, 34% { transform: scale(.8); border-radius: 3px; }
  44%, 54% { transform: translateY(-10px) scale(.83); border-radius: 22px; }
  66%, 84% { transform: translateY(-6px) scale(.8) rotateX(10deg) rotateY(-18deg) rotateZ(2deg); border-radius: 22px; }
  96%, 100% { transform: scale(1); border-radius: 3px; }
}

@keyframes demo-shadow {
  0%, 36% { opacity: 0; }
  44%, 86% { opacity: 1; }
  96%, 100% { opacity: 0; }
}

@keyframes step-1 {
  0%, 14% { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
  20%, 94% { color: var(--text-soft); background: transparent; border-color: var(--line); }
  100% { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
}
@keyframes step-2 {
  0%, 18% { color: var(--text-soft); background: transparent; border-color: var(--line); }
  24%, 36% { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
  42%, 100% { color: var(--text-soft); background: transparent; border-color: var(--line); }
}
@keyframes step-3 {
  0%, 40% { color: var(--text-soft); background: transparent; border-color: var(--line); }
  46%, 58% { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
  64%, 100% { color: var(--text-soft); background: transparent; border-color: var(--line); }
}
@keyframes step-4 {
  0%, 62% { color: var(--text-soft); background: transparent; border-color: var(--line); }
  68%, 86% { color: var(--accent-text); background: var(--accent); border-color: var(--accent); }
  92%, 100% { color: var(--text-soft); background: transparent; border-color: var(--line); }
}

@media (max-width: 560px) {
  .demo-stage { aspect-ratio: 4 / 3; }
  .demo-side { display: none; }
  .demo-main { padding: 14px; gap: 8px; }
}

/* --- The new middle of the page ---------------------------------------- */

.section-head h2, .row-copy h3, .closing h2, .price { font-family: var(--display); font-weight: 600; letter-spacing: -0.02em; }
.section-head.centred { margin-left: auto; margin-right: auto; text-align: center; }

/* A warm band the full width of the window, from inside the page column. */
.band {
  background: var(--peach-wash);
  box-shadow: 0 0 0 100vmax var(--peach-wash);
  clip-path: inset(0 -100vmax);
}

/* The icon's crop marks: two corners, top-left and bottom-right. */
.crop-marks { position: relative; }
.crop-marks::before, .crop-marks::after {
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  border: 3px solid var(--accent);
  opacity: 0.55;
  pointer-events: none;
}
.crop-marks::before { top: -14px; left: -14px; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.crop-marks::after { bottom: -14px; right: -14px; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }

.proof { padding-top: 24px; }
.compare-wrap { max-width: 780px; margin: 0 auto; }
.proof .compare { margin-top: 0; }

ol.steps { list-style: none; padding: 0; margin: 0; }

/* --- Looks: one at a time, with every name --------------------------- */

.look-viewer { max-width: 720px; margin: 0 auto; }
.look-stage, .frame-stage {
  display: grid;
  /* One column that may shrink below the pictures' own width; `auto` would
     keep 1200 px images wider than a phone and crop their right side. */
  grid-template-columns: minmax(0, 1fr);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 70px -34px rgb(34 32 28 / 0.45);
}
/* Every picture sits in the same cell, so the stage keeps its height and
   only the visible one fades in. */
.look-stage img, .frame-stage img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 380ms ease, transform 520ms cubic-bezier(.2, .8, .2, 1);
}
/* A look arrives with a small pop, the way a new look lands in the app. */
.look-stage img { transform: scale(0.96); }
.look-stage img.on { transform: none; }
/* The end card sits in the same cell as the looks and fades the same way. */
.look-end {
  grid-area: 1 / 1;
  /* Above the looks: they are transformed, so they would paint over the
     card and take its clicks even while invisible. */
  position: relative;
  z-index: 1;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  text-align: center;
  background: linear-gradient(135deg, #fbe9dc, #f3c7b4 55%, #dbe8d4);
  color: #22201c;
  opacity: 0;
  visibility: hidden;
  transition: opacity 380ms ease, visibility 0s 380ms;
}
.look-end.on { opacity: 1; visibility: visible; transition: opacity 380ms ease; }
.look-end-title { margin: 0; font-size: clamp(22px, 4vw, 32px); font-weight: 700; letter-spacing: -0.01em; }
.look-end-text { margin: 0; max-width: 34ch; color: #5a554d; }
.look-end .actions { justify-content: center; margin-top: 6px; }
.at-end .look-caption, .at-end .look-hint { visibility: hidden; }
.look-end-hint { margin: 0; font-size: 14px; color: #5a554d; }
/* Frames cross-fade in place: the shot holds still, so the only thing
   that changes is the frame. */
.frame-names { margin-top: 14px; justify-content: center; }

/* A name over a picture: the tilt says which angle it is showing. */
.row-media.tilt { position: relative; }
.media-chip {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.82);
  color: #22201c;
  font-size: 13px;
  font-weight: 600;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.media-chip.swap { animation: name-in 420ms cubic-bezier(.2, .8, .2, 1); }

/* The keycap beside the look's name presses when the look changes. */
.look-key {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 7px;
  font-size: 13px;
  vertical-align: 3px;
  box-shadow: 0 2px 0 var(--line);
}
.look-key.pressed { animation: key-press 360ms ease; }
@keyframes key-press {
  0% { transform: none; box-shadow: 0 2px 0 var(--line); }
  30% { transform: translateY(2px); box-shadow: 0 0 0 var(--line); background: var(--accent-soft); }
  100% { transform: none; box-shadow: 0 2px 0 var(--line); }
}
[data-look-name] { display: inline-block; }
[data-look-name].swap { animation: name-in 420ms cubic-bezier(.2, .8, .2, 1); }
@keyframes name-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Focus changes over with the scroll; the dim fades rather than snaps. */
.row-media.focus .row-b { transition: opacity 700ms ease; }
.look-stage img { aspect-ratio: 4 / 3; }
.look-stage img.on, .frame-stage img.on { opacity: 1; }
.look-names, .frame-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 18px;
}
.look-names button, .frame-names button {
  font: inherit;
  font-size: 14px;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--text-soft);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}
.look-names button:hover, .frame-names button:hover { color: var(--text); border-color: var(--text-soft); }
.look-names button[aria-pressed="true"], .frame-names button[aria-pressed="true"] {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.look-caption { margin: 18px 0 0; text-align: center; color: var(--text-soft); font-size: 16px; }
.look-caption strong { color: var(--text); font-family: var(--display); font-weight: 600; font-size: 19px; }
.look-hint { margin: 8px 0 0; text-align: center; color: var(--text-soft); font-size: 14px; }
.look-grid figure, .frames figure, .range-grid figure { margin: 0; }
.look-grid img, .frames img, .range-grid img, .row-media img, .app-frame img, .app-frame video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}
.look-grid figcaption, .frames figcaption {
  margin-top: 8px;
  color: var(--text-soft);
  font-size: 14px;
  text-align: center;
}

.rows { display: grid; gap: 88px; }
.row {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
}
.row.flip .row-media { order: 2; }
/* Each feature is shown, not told: the picture takes most of the row. */
.rows .row { grid-template-columns: 1.5fr 0.75fr; }
.rows .row.flip { grid-template-columns: 0.75fr 1.5fr; }
.row-copy h3 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.1; }
.row-copy p { margin: 0; color: var(--text-soft); font-size: 17px; }
.row-copy .row-hint { margin-top: 14px; font-size: 14px; color: var(--accent); }
.on-touch { display: none; }
@media (hover: none) {
  .on-hover { display: none; }
  .on-touch { display: inline; }
}

/* Two pictures in one place; hover — or a tap — shows the second. */
.row-media[data-toggle] { position: relative; cursor: pointer; }
.row-media[data-toggle] .row-b {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 500ms ease;
}
.row-media[data-toggle]:hover .row-b,
.row-media[data-toggle].on .row-b { opacity: 1; }
.row-media.focus { border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -34px rgb(34 32 28 / 0.45); }

.frame-stage img { aspect-ratio: 7 / 5; }

.row-media.tilt video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 30px 70px -34px rgb(34 32 28 / 0.45);
}

/* Runs off both edges: there is more where these came from. */
.row-wide { display: grid; gap: 28px; }
.row-copy.centred { max-width: 36rem; margin: 0 auto; text-align: center; }
.palette-strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.palette-strip img { display: block; height: 104px; width: auto; max-width: none; margin: 0 auto; transform: translateX(-4%); }
@media (max-width: 560px) { .palette-strip img { height: 72px; } }

.range-grid {
  display: grid;
  grid-template-columns: 0.62fr 1fr;
  grid-template-rows: auto auto;
  gap: 18px;
  align-items: start;
}
.range-grid .range-tall { grid-row: span 2; }
/* The raw grab in the corner: what went in, beside what came out. */
.range-grid figure { position: relative; }
.range-grid figcaption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 30%;
  max-width: 160px;
}
.range-grid .range-tall figcaption { width: 34%; }
.range-grid figcaption img {
  display: block;
  width: 100%;
  border-radius: 8px;
  border: 3px solid #fff;
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.5);
}
.range-grid figcaption span {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.85);
  color: #22201c;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* A real window capture: macOS drew its shadow and rounded its corners, so
   the page adds neither. */
.app-frame { margin: 0 auto; max-width: 960px; }
.app-frame img, .app-frame video { border-radius: 0; }
/* The keys, under the bar they work. Each label hangs below its button
   (`--at` is the button's centre across the picture). */
.app-frame { position: relative; }
.app-keys { position: relative; height: 34px; margin-top: -6%; }
.app-keys span {
  position: absolute;
  left: var(--at);
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-soft);
}
.app-keys span::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  height: 22px;
  border-left: 1.5px solid var(--line);
}
/* Below 900 px the labels hung under their buttons collide: list them. */
@media (max-width: 900px) {
  .app-keys { height: auto; margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; }
  .app-keys span { position: static; transform: none; }
  .app-keys span::before { display: none; }
}

.closing {
  margin: 32px 0 56px;
  padding: 72px 24px;
  text-align: center;
  border-radius: 28px;
  background:
    radial-gradient(60% 80% at 20% 0%, #f8cdb9 0%, transparent 70%),
    radial-gradient(60% 80% at 90% 100%, #e3efd2 0%, transparent 70%),
    var(--peach-wash);
}
.closing-icon { display: block; margin: 0 auto 18px; border-radius: 22px; }
.closing h2 { margin: 0 auto 10px; max-width: 18ch; font-size: clamp(30px, 4.4vw, 46px); line-height: 1.08; }
.closing p { margin: 0 0 26px; color: var(--text-soft); font-size: 18px; }
.closing .actions { justify-content: center; }

@media (max-width: 820px) {
  .row, .row.flip, .rows .row, .rows .row.flip { grid-template-columns: 1fr; gap: 28px; }
  .row.flip .row-media { order: 0; }
  .rows { gap: 64px; }
}
@media (max-width: 560px) {
  .range-grid { grid-template-columns: 1fr; gap: 32px; }
  .range-grid .range-tall { grid-row: auto; max-width: 70%; justify-self: center; }
  /* Too small to read as a corner inset on a phone: the raw grab sits
     under the result instead, big enough to see what went in. */
  .range-grid figcaption,
  .range-grid .range-tall figcaption {
    position: static;
    width: auto;
    max-width: none;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
  }
  .range-grid figcaption img { width: 55%; border-width: 2px; }
  .range-grid .range-tall figcaption img { width: 45%; }
  .range-grid figcaption span { margin-top: 0; background: var(--bg-raised); border: 1px solid var(--line); font-size: 13px; }
  .crop-marks::before, .crop-marks::after { width: 22px; height: 22px; }
}

/* --- Scroll reveal ----------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.revealed { opacity: 1; transform: none; }

/* --- Reduced motion: a still, finished shot ---------------------------- */

@media (prefers-reduced-motion: reduce) {
  .demo-backdrop, .demo-shot, .demo-shot::before, .demo-steps li { animation: none; }
  .demo-backdrop { opacity: 1; }
  .demo-shot { transform: translateY(-6px) scale(.8) rotateX(10deg) rotateY(-18deg) rotateZ(2deg); border-radius: 22px; }
  .demo-shot::before { opacity: 1; }
  .button { transition: none; }
  .look-stage img, .frame-stage img { transform: none; }
}

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

section { padding: 64px 0; }

.section-head { max-width: 36rem; margin-bottom: 32px; }

.section-head h2 {
  margin: 0 0 10px;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.section-head p { margin: 0; color: var(--text-soft); }

.eyebrow {
  display: inline-block;
  margin-bottom: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Steps */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  counter-reset: step;
}

.step {
  padding: 22px;
  border-radius: var(--radius);
  background: var(--bg-raised);
  border: 1px solid var(--line);
}

.step::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--cucumber-soft);
  color: var(--cucumber);
  font-weight: 700;
  font-size: 14px;
}

.step h3 { margin: 0 0 6px; font-size: 18px; }
.step p { margin: 0; color: var(--text-soft); font-size: 15px; }

kbd {
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  background: var(--bg-raised);
  font-family: inherit;
  font-size: 0.9em;
}

/* Features */

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 32px;
}

.feature h3 { margin: 0 0 6px; font-size: 18px; letter-spacing: -0.01em; }
.feature p { margin: 0; color: var(--text-soft); font-size: 15px; }

@media (max-width: 860px) {
  .steps, .features { grid-template-columns: 1fr 1fr; }
  /* Three steps in two columns: the last takes the whole row, not half. */
  .step:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .steps, .features { grid-template-columns: 1fr; }
}

/* Pricing */

.price-card {
  max-width: 460px;
  margin: 0 auto;
  padding: 32px;
  border-radius: 22px;
  background: var(--bg-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  text-align: center;
}

.price { margin: 6px 0 2px; font-size: 56px; font-weight: 700; letter-spacing: -0.04em; }
.price-note { margin: 0 0 22px; color: var(--text-soft); }
/* The regular price beside the launch one: real, struck through, quieter. */
.price-was { font-size: 0.45em; font-weight: 500; color: var(--text-soft); letter-spacing: -0.01em; vertical-align: 0.35em; }

.launch-left {
  display: inline-block;
  margin: -8px 0 22px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
}

.includes {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
  text-align: left;
}

.includes li {
  padding: 9px 0 9px 28px;
  border-top: 1px solid var(--line);
  position: relative;
  font-size: 15px;
}

.includes li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: var(--cucumber);
  font-weight: 700;
}

.price-card .actions { justify-content: center; }

/* FAQ */

.faq { max-width: 720px; }

.faq details {
  border-top: 1px solid var(--line);
  padding: 4px 0;
  overflow: hidden;
}

.faq summary {
  cursor: pointer;
  padding: 14px 0;
  font-weight: 600;
  list-style: none;
  /* The + stays beside the question when the question wraps. */
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-soft); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 16px; color: var(--text-soft); }

/* --- Simple pages (thanks, comparison) --------------------------------- */

.page { max-width: 680px; padding: 56px 0 72px; }
.page h1 { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 5vw, 50px); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 16px; }
.page .lede { color: var(--text-soft); font-size: 19px; margin: 0 0 32px; }
.page h2 { font-size: 22px; line-height: 1.25; margin: 40px 0 10px; letter-spacing: -0.015em; }
.page p, .page li { color: var(--text-soft); }
.page ol { padding-left: 22px; }
.page li { margin: 6px 0; }
.page strong { color: var(--text); }

.callout {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--text);
}

/* --- Footer ------------------------------------------------------------ */

.footer {
  padding: 36px 0 48px;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.footer a { color: var(--text-soft); }
.footer .spacer { margin-right: auto; }