/* =====================================================================
   Cherished Memorials: shared styles, v17 ("Bevel / cloudlight")
   Source: DESIGN-17-source.md + BRIEF-v17.md (the brief wins on content).
   Light only. Paper White canvas, Ink headlines, Body Gray copy,
   Cloud Card surfaces, one Hero Sky field, Charcoal pills.
   The plaque render is the only dark, dimensional object on any page.

   COMPONENT CLASSES (use these on every page)
   Layout ....... .wrap (container)  .section  .section-head [.center]  .stack
                  .split  .cards-2  .cards-3  .cards-4  .center-col
   Type ......... .display (hero 80)  h2/.h2 (display 64)  h3/.h3 (card 40)
                  .h4 (label 24)  .lead (body, gray)  .body-sm  .small  .muted
                  .eyebrow  .trust (proof line)  .tnum
   Nav .......... .site-header > .navbar > .wordmark .nav-pills .nav-cta .menu-btn
                  #drawer.nav-drawer (opened by site.js)  .skip-link
   Buttons ...... .btn + .btn-primary / .btn-dark (Charcoal pill, same thing)
                  .btn-pill (soft Cloud Card pill)  .btn-link (text)  .btn-lg  .btn-block
   Hero ......... .hero-sky > .hero-inner (rounded sky field, centred)
                  .hero-actions  .band-sky (the one optional closing band)
                  .hero (plain page heading, no sky)
   Product ...... .render > .plaque + .stake (floating plaque shot)
                  .render-sm  .plaque (+ JS classes t-side t-oval t-words slate sans etch)
   Surfaces ..... .card (Cloud Feature Card, no border, no shadow)  .card-lg
                  .panel (Paper White surface for use on the sky / on cards)
                  .tag (soft chip label)
   Selectable ... .pills (radio pills)  .pills.tiles (radio cards)  .chips/.chip
                  .template-card  .size-card  .steps (tab cards)
                  selected state = 2px Ink ring, everywhere
   Forms ........ .field  label/.flabel  inputs/select/textarea  .row-2  .error
                  .toggle-row/.toggle  .check  .drop  input[type=range]
   Media ........ .photo-slot (4:5 placeholder)  .media-strip > .media-tile
                  .film-frame (video slot)
   Placeholder .. .ph  (dashed Body Gray outline + automatic "To add:" label)
   FAQ .......... .faq > details > summary + .answer  .cat  .faq-tools  .faq-meta  .empty
   Create page .. .progress  .builder  .preview-col  .window  .window-bar  .stage
                  .stage-caption  .draft-bar  .step  .step-title  .summary  .notice
                  .photo-tools  .helper  .hide-m  .sticky-bar (mobile order bar)
   Footer ....... .site-footer  .footer-grid  .footer-group  .footer-base
   Motion ....... .reveal  .kinetic  (all off under prefers-reduced-motion)

   RETIRED in v17 (still harmless if left in old markup):
   .spectrum (hidden)  .band-lime/.band-white (now plain white)  .h-light (= h2)
   .window/.stage are kept for the Create page preview only.
   ===================================================================== */

:root {
  color-scheme: light;

  /* Colours (DESIGN 17 names). Health-metric colours and Signal Gold are
     deliberately not defined: the brief rejects them. */
  --color-paper-white: #ffffff;
  --color-charcoal: #1f2025;
  --color-ink: #222326;
  --color-cloud-card: #ebf0f8;
  --color-body-gray: #747679;
  --color-hero-sky: #d2e5ff;
  --gradient-hero-sky: linear-gradient(#d2e5ff, #fff9ee);

  /* Derived (accessibility): Body Gray is only 4.0:1 on Cloud Card and the sky,
     so small copy on those surfaces uses this slightly deeper gray (5.4:1). */
  --color-body-gray-deep: #5f6165;
  --color-line: rgba(34, 35, 38, .12);       /* hairline dividers in lists/tables */
  --color-cloud-hover: #dfe6f1;              /* soft pill hover */
  --color-charcoal-hover: #34353b;           /* charcoal pill hover */

  /* Fonts. Inter stands in for SF Pro. Playfair is ONLY for plaque lettering. */
  --font-apple-system-blinkmacsystemfont-inter-segoe-ui-sans-serif: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-sans: var(--font-apple-system-blinkmacsystemfont-inter-segoe-ui-sans-serif);
  --font-plaque: "Playfair Display", Georgia, "Times New Roman", serif;

  /* Type scale */
  --text-caption: 12px;      --leading-caption: 1.1;
  --text-nav: 16px;          --leading-nav: 1.4;
  --text-brand-nav: 18px;    --leading-brand-nav: 1.4;   --tracking-brand-nav: 0.162px;
  --text-body: 24px;         --leading-body: 1.3;
  --text-section-label: 24px; --leading-section-label: 0.9; --tracking-section-label: -0.24px;
  --text-card-heading: 40px; --leading-card-heading: 1;  --tracking-card-heading: -1.2px;
  --text-display: 64px;      --leading-display: 1;       --tracking-display: -1.92px;
  --text-hero-display: 80px; --leading-hero-display: 1;  --tracking-hero-display: -2.4px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Spacing */
  --spacing-unit: 8px;
  --spacing-8: 8px;   --spacing-16: 16px; --spacing-24: 24px; --spacing-32: 32px;
  --spacing-40: 40px; --spacing-48: 48px; --spacing-80: 80px; --spacing-96: 96px; --spacing-160: 160px;
  --section-gap: 80px;
  --card-padding: 32px;
  --element-gap: 16px;

  /* Radius (named radii given single valid values) */
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-3xl-2: 32px;
  --radius-full: 128px;
  --radius-full-2: 9999px;
  --radius-cards: 24px;
  --radius-pills: 9999px;
  --radius-images: 16px;
  --radius-buttons: 128px;
  --radius-navigation: 32px;

  /* Shadows: md = floating imagery only (plaque, photos). md-2 = nav capsule
     and sticky mobile bar only. Never on cards. */
  --shadow-md: rgba(0, 0, 0, 0.25) 0px 0px 16px -8px;
  --shadow-md-2: rgba(0, 0, 0, 0.15) 0px 2px 16px 0px;

  /* Surfaces */
  --surface-paper-white: #ffffff;
  --surface-cloud-card: #ebf0f8;
  --surface-charcoal: #1f2025;

  /* Product (inside the plaque only) */
  --stone: #1f2025;          /* = Charcoal: the granite */
  --engrave: #ecebe8;        /* engraved lettering */

  /* Page */
  --wrap: 1200px;
  --gutter: 20px;
  --nav-space: 72px;         /* header height: hero field tucks under the capsule */
  --body-size: 18px;
  --ease: .2s ease;
}
@media (min-width: 640px) { :root { --body-size: 24px; --gutter: 32px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--color-paper-white); color: var(--color-ink);
  font-family: var(--font-sans); font-weight: 400;
  font-size: var(--body-size); line-height: 1.4;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
@media (min-width: 640px) { body { line-height: var(--leading-body); } }
img, video, canvas { max-width: 100%; display: block; }
a { color: var(--color-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: var(--color-hero-sky); }
:focus-visible { outline: 2px solid var(--color-ink); outline-offset: 3px; }
button { font-family: inherit; }

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--color-charcoal); color: var(--color-cloud-card);
  border-radius: var(--radius-full); padding: 10px 20px; font-size: 16px; text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; text-wrap: balance; color: var(--color-ink); }
p { margin: 0; }
.display, h1 {
  font-weight: 600; letter-spacing: -0.03em; line-height: var(--leading-hero-display);
  font-size: clamp(42px, 10vw, var(--text-hero-display));
}
h2, .h2, .h-light {
  font-weight: 600; letter-spacing: -0.03em; line-height: var(--leading-display);
  font-size: clamp(34px, 7vw, var(--text-display));
}
h3, .h3 {
  font-weight: 600; letter-spacing: -0.03em; line-height: var(--leading-card-heading);
  font-size: clamp(26px, 4.2vw, var(--text-card-heading));
}
.h4 {
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.1;
  font-size: clamp(20px, 2.6vw, var(--text-section-label));
}
.eyebrow {
  display: block; font-size: 16px; line-height: var(--leading-nav); font-weight: 500;
  color: var(--color-body-gray); letter-spacing: 0;
}
.lead { font-size: var(--body-size); color: var(--color-body-gray); max-width: 40ch; }
.body-sm { font-size: 16px; line-height: 1.5; color: var(--color-body-gray); }
@media (min-width: 640px) { .body-sm { font-size: 18px; } }
.small { font-size: 14px; line-height: 1.45; }
.muted { color: var(--color-body-gray); }
.trust { font-size: 14px; line-height: 1.4; color: var(--color-body-gray-deep); }
.tnum { font-variant-numeric: tabular-nums; }
/* Copy on Cloud Card or the sky uses the deeper gray for contrast */
.card .body-sm, .card .muted, .card .lead, .step .muted, .step .body-sm,
.hero-sky .lead, .hero-sky .muted, .hero-sky .eyebrow, .band-sky .lead, .band-sky .body-sm,
.faq .answer, .photo-slot, .steps .body-sm, .tiles small { color: var(--color-body-gray-deep); }

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 9vw, var(--section-gap)); }
.section-head { display: grid; gap: var(--element-gap); margin-bottom: clamp(32px, 5vw, 48px); max-width: 820px; }
.section-head.center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head.center .lead, .section-head.center .body-sm { margin-inline: auto; }
.stack { display: grid; gap: 20px; align-content: start; }
.center-col { max-width: 820px; margin-inline: auto; }
.split { display: grid; grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.cards-2, .cards-3, .cards-4 { display: grid; gap: var(--element-gap); grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) { .cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* retired v16 bands: kept harmless */
.band-lime, .band-white { background: transparent; }
.spectrum { display: none; }

/* ---------- Placeholder marker (obvious to Gus, remove before launch) ----------
   Write only the missing thing inside: <span class="ph">ABN</span>
   The "To add:" label is added automatically. */
.ph {
  display: inline; color: var(--color-ink); background: var(--color-paper-white);
  border: 1.5px dashed var(--color-body-gray); border-radius: 8px;
  padding: 1px 8px; font-size: .9em; line-height: 1.5; font-weight: 400; letter-spacing: 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.ph::before { content: "To add: "; font-weight: 600; color: var(--color-body-gray-deep); }

/* ---------- Buttons: Charcoal pill (primary) + soft Cloud pill ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 16px/1.4 var(--font-sans); letter-spacing: 0; text-decoration: none; text-align: center;
  cursor: pointer; border: 0; border-radius: var(--radius-buttons);
  padding: 10px 20px; min-height: 44px;
  transition: background var(--ease), color var(--ease), opacity var(--ease);
}
.btn-primary, .btn-dark { background: var(--color-charcoal); color: var(--color-cloud-card); }
.btn-primary:hover, .btn-dark:hover { background: var(--color-charcoal-hover); }
.btn-pill { background: var(--color-cloud-card); color: var(--color-ink); }
.btn-pill:hover { background: var(--color-cloud-hover); }
.card .btn-pill, .step .btn-pill, .panel .btn-pill { background: var(--color-paper-white); }
.card .btn-pill:hover, .step .btn-pill:hover { background: var(--color-paper-white); box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.btn-link { background: transparent; color: var(--color-ink); padding-inline: 8px; }
.btn-link:hover { text-decoration: underline; }
.btn-lg { min-height: 52px; padding: 14px 28px; font-size: 18px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

.tag {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  background: var(--color-cloud-card); color: var(--color-ink);
  border-radius: var(--radius-full-2); padding: 6px 14px;
  font-size: 14px; line-height: 1.3; font-weight: 500; letter-spacing: 0;
}
.card .tag, .step .tag, .hero-sky .tag { background: var(--color-paper-white); }

/* ---------- Floating capsule nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 30;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
}
.navbar {
  position: relative; max-width: 1080px; margin: 0 auto; min-height: 56px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-radius: var(--radius-navigation); box-shadow: var(--shadow-md-2);
  padding: 6px 6px 6px 24px;
}
.wordmark {
  font-size: var(--text-brand-nav); line-height: var(--leading-brand-nav); font-weight: 500;
  letter-spacing: var(--tracking-brand-nav); color: var(--color-ink);
  text-decoration: none; white-space: nowrap; font-family: var(--font-sans);
}
.nav-pills { display: flex; gap: 4px; }
.nav-pills a {
  text-decoration: none; color: var(--color-body-gray); font-size: var(--text-nav); font-weight: 500;
  line-height: var(--leading-nav); padding: 10px 14px; border-radius: var(--radius-full-2);
  transition: color var(--ease), background var(--ease);
}
.nav-pills a:hover { color: var(--color-ink); }
.nav-pills a[aria-current="page"] { color: var(--color-ink); background: var(--color-cloud-card); }
.nav-cta { min-height: 44px; }
.menu-btn { display: none; }
.btn.menu-btn { background: var(--color-charcoal); color: var(--color-cloud-card); }
.nav-drawer { display: none; }
@media (max-width: 860px) {
  .navbar { padding-left: 20px; }
  .nav-pills, .navbar .nav-cta { display: none; }
  .btn.menu-btn { display: inline-flex; min-width: 84px; }
  .nav-drawer.open {
    display: grid; position: absolute; left: 12px; right: 12px; top: calc(100% - 2px);
    max-width: 1080px; margin: 0 auto;
    background: var(--color-paper-white); border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-md-2); padding: 8px 20px 20px;
  }
  .nav-drawer a:not(.btn) {
    padding: 14px 0; text-decoration: none; color: var(--color-ink);
    font-size: 18px; font-weight: 500; border-bottom: 1px solid var(--color-line);
  }
  .nav-drawer a[aria-current="page"] { color: var(--color-body-gray); }
  .nav-drawer .btn { margin-top: 16px; min-height: 52px; font-size: 18px; }
}

/* ---------- Hero Sky field (hero only) ---------- */
.hero-sky {
  margin: calc(-1 * var(--nav-space)) 8px 0;
  border-radius: var(--radius-3xl-2);
  background: var(--gradient-hero-sky);
  padding: calc(var(--nav-space) + clamp(40px, 8vw, 80px)) var(--gutter) clamp(40px, 7vw, 80px);
}
.hero-inner {
  max-width: 960px; margin: 0 auto;
  display: grid; justify-items: center; text-align: center; gap: var(--element-gap);
}
.hero-inner .display { max-width: 14ch; }
.hero-inner .lead { max-width: 36ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.hero-inner .hero-actions { justify-content: center; margin-top: 8px; }
/* Plain page heading (no sky) for inner pages */
.hero { padding-block: clamp(40px, 7vw, 80px) clamp(24px, 4vw, 40px); }
/* The one optional closing band */
.band-sky {
  margin: 0 8px; border-radius: var(--radius-3xl-2); background: var(--gradient-hero-sky);
  padding: clamp(56px, 9vw, 96px) var(--gutter); text-align: center;
}
.band-sky .section-head { margin-bottom: 0; }

/* ---------- Product render: the floating plaque ---------- */
.render { position: relative; width: min(100%, 520px); margin: 0 auto; padding-bottom: 14px; }
.render::after { /* soft contact shadow where the stake meets the ground */
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 46%; height: 14px;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0));
  pointer-events: none;
}
.render-sm { width: min(100%, 360px); }
.hero-inner .render { margin-top: clamp(24px, 5vw, 48px); }
.render-caption { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------- Plaque (the customer's engraving: Playfair or Inter inside only) ---------- */
.plaque {
  --w: 100%;
  width: var(--w); max-width: 100%; margin: 0 auto; position: relative;
  container-type: inline-size; border-radius: 4px; color: var(--engrave);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(150deg, #36373c 0%, var(--stone) 55%, #17181c 100%);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .08);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
.plaque.slate {
  border-radius: 2px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .35' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, #474d53 0%, #33383d 60%, #3d4247 100%);
}
.stake { width: 3%; min-width: 6px; height: 56px; margin: 0 auto; background: linear-gradient(90deg, #8e8a84, #cfcac2 50%, #8e8a84); }
.plaque-inner {
  position: absolute; inset: 0; padding: 6cqw 7cqw;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.6cqw;
}
.p-photo {
  width: 30cqw; aspect-ratio: 4 / 5; border-radius: 3cqw; overflow: hidden; flex: none; position: relative;
  background: #3a3a3d; display: flex; align-items: center; justify-content: center;
}
.p-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none;
  filter: grayscale(1) contrast(1.15) brightness(1.08); mix-blend-mode: screen; opacity: .92;
}
.p-photo svg { width: 55%; opacity: .45; }
.p-text { display: flex; flex-direction: column; gap: 1.2cqw; align-items: center; min-width: 0; }
.p-name { font-family: var(--font-plaque); font-weight: 500; font-size: 5.6cqw; line-height: 1.12; letter-spacing: .01em; overflow-wrap: anywhere; }
.p-dates { font-family: var(--font-plaque); font-size: 3.4cqw; letter-spacing: .06em; opacity: .9; }
.p-words { font-family: var(--font-plaque); font-style: italic; font-size: 3.6cqw; opacity: .92; }
.p-orn { width: 9cqw; opacity: .7; display: none; }
.plaque.sans .p-name, .plaque.sans .p-dates, .plaque.sans .p-words { font-family: var(--font-sans); font-style: normal; letter-spacing: .01em; }
.plaque.sans .p-name { font-weight: 500; font-size: 5.2cqw; }
.plaque.t-side .plaque-inner { flex-direction: row; gap: 5cqw; text-align: left; }
.plaque.t-side .p-photo { width: 34cqw; }
.plaque.t-side .p-text { align-items: flex-start; flex: 1; }
.plaque.t-side .p-name { font-size: 6cqw; }
.plaque.t-oval .p-photo { border-radius: 50%; width: 26cqw; aspect-ratio: 3 / 4; }
.plaque.t-oval::before { content: ""; position: absolute; inset: 3.2cqw; border: 1px solid rgba(236, 235, 232, .45); pointer-events: none; }
.plaque.t-words .p-photo { display: none; }
.plaque.t-words .p-orn { display: block; }
.plaque.t-words .p-name { font-size: 7.6cqw; }
.plaque.t-words .p-dates { font-size: 4.2cqw; }
.plaque.t-words .p-words { font-size: 4.6cqw; }
.p-name, .p-dates, .p-words { transition: opacity .35s ease, letter-spacing .35s ease; }
/* Engraving: each new letter glows, then settles into the stone (letters are spans from CM.engrave) */
.p-name .ch { white-space: pre; }
.p-name .ch.in { animation: engrave .55s cubic-bezier(0, 0, .2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes engrave {
  0%   { opacity: 0; filter: blur(3px); text-shadow: 0 0 10px rgba(255, 255, 255, .95); }
  60%  { opacity: 1; filter: blur(0); text-shadow: 0 0 6px rgba(255, 255, 255, .5); }
  100% { opacity: 1; filter: none; text-shadow: none; }
}

/* ---------- Surfaces ---------- */
/* Cloud Feature Card: #ebf0f8, 24px radius, 32px padding, no border, no shadow */
.card {
  background: var(--color-cloud-card); border: 0; box-shadow: none;
  border-radius: var(--radius-cards); padding: clamp(24px, 4vw, var(--card-padding));
  display: grid; gap: var(--element-gap); align-content: start; text-align: left; color: var(--color-ink);
}
.card-lg { border-radius: var(--radius-3xl-2); padding: clamp(24px, 5vw, 48px); }
/* Paper White surface for use on the sky or inside a card */
.panel { background: var(--color-paper-white); border-radius: var(--radius-3xl); padding: clamp(20px, 4vw, 32px); display: grid; gap: var(--element-gap); text-align: left; }

/* ---------- Selectable things: radio pills, radio cards, chips ----------
   Unselected = soft fill. Selected = white + 2px Ink ring. Same rule everywhere. */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pills label { position: relative; display: block; }
.pills input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.pills label > span {
  display: flex; flex-direction: column; justify-content: center; height: 100%; min-height: 44px;
  background: var(--color-cloud-card); color: var(--color-ink); border-radius: var(--radius-full-2);
  padding: 10px 18px; font-size: 16px; line-height: 1.3; font-weight: 500; cursor: pointer;
  transition: background var(--ease), box-shadow var(--ease);
}
.pills span small { font-size: 14px; font-weight: 400; }
.pills label:hover span { background: var(--color-cloud-hover); }
.pills input:checked + span { background: var(--color-paper-white); box-shadow: inset 0 0 0 2px var(--color-ink); }
.pills input:focus-visible + span { outline: 2px solid var(--color-ink); outline-offset: 3px; }
/* inside a Cloud card or a step: unselected become white */
.card .pills label > span, .step .pills label > span { background: var(--color-paper-white); }
.card .pills label:hover span, .step .pills label:hover span { box-shadow: inset 0 0 0 1px var(--color-body-gray); }
.card .pills input:checked + span, .step .pills input:checked + span { box-shadow: inset 0 0 0 2px var(--color-ink); }
/* Radio cards */
.pills.tiles { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); }
.pills.tiles span { border-radius: var(--radius-2xl); padding: 16px 18px; gap: 2px; align-items: flex-start; text-align: left; }
.pills.tiles strong { font-weight: 600; }
@media (max-width: 480px) { .pills.tiles.n4 { --n: 2 !important; } .pills.tiles.n3 { --n: 1 !important; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: 500 15px/1.2 var(--font-sans); color: var(--color-ink); background: var(--color-cloud-card); border: 0;
  border-radius: var(--radius-full-2); padding: 10px 16px; min-height: 40px; cursor: pointer;
  transition: background var(--ease), box-shadow var(--ease);
}
.chip:hover { background: var(--color-cloud-hover); }
.chip[aria-pressed="true"] { background: var(--color-paper-white); box-shadow: inset 0 0 0 2px var(--color-ink); }
.card .chip, .step .chip { background: var(--color-paper-white); }

/* ---------- Toggles ---------- */
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--color-line); cursor: pointer; font-size: 18px; }
.toggle-row:last-child { border-bottom: 1px solid var(--color-line); }
.toggle-row .t-label { display: grid; gap: 2px; }
.toggle { position: relative; flex: none; width: 48px; height: 28px; }
.toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.toggle i { position: absolute; inset: 0; border-radius: var(--radius-full-2); background: rgba(116, 118, 121, .45); transition: background var(--ease); pointer-events: none; }
.toggle i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--color-paper-white); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s cubic-bezier(.4, 0, .2, 1); }
.toggle input:checked + i { background: var(--color-ink); }
.toggle input:checked + i::after { transform: translateX(20px); }
.toggle input:focus-visible + i { outline: 2px solid var(--color-ink); outline-offset: 3px; }

/* ---------- Form fields ---------- */
.field { display: grid; gap: 8px; }
.field > label, .field > .flabel, .flabel { font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--color-ink); letter-spacing: 0; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="search"], input[type="number"], select, textarea {
  width: 100%; font: 400 18px/1.4 var(--font-sans); color: var(--color-ink);
  background: var(--color-cloud-card); border: 1px solid transparent; border-radius: var(--radius-2xl);
  padding: 12px 16px; min-height: 52px; appearance: none; -webkit-appearance: none;
  transition: border-color var(--ease), background var(--ease);
}
select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23222326' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; }
.card input[type="text"], .card input[type="email"], .card input[type="tel"], .card input[type="date"], .card input[type="search"], .card select, .card textarea,
.step input[type="text"], .step input[type="email"], .step input[type="tel"], .step input[type="date"], .step input[type="search"], .step select, .step textarea { background-color: var(--color-paper-white); }
input:hover, select:hover, textarea:hover { border-color: var(--color-body-gray); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--color-ink); }
input::placeholder, textarea::placeholder { color: var(--color-body-gray); }
textarea { min-height: 150px; resize: vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border: 2px solid var(--color-ink); }
.error { font-size: 15px; line-height: 1.4; color: var(--color-ink); font-weight: 500; }
.error::before { content: "! "; font-weight: 600; }
input[type="range"] { width: 100%; accent-color: var(--color-ink); min-height: 32px; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .row-2 { grid-template-columns: 1fr; } }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 17px; line-height: 1.4; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--color-ink); flex: none; }

/* ---------- Lists ---------- */
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 14px 0; border-top: 1px solid var(--color-line); }
.list li:last-child { border-bottom: 1px solid var(--color-line); }

/* ---------- How it works: step tab cards ---------- */
.steps { display: grid; gap: var(--element-gap); grid-template-columns: 1fr; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.steps button {
  appearance: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: grid; gap: 12px; align-content: start;
  background: var(--color-cloud-card); border-radius: var(--radius-cards);
  padding: clamp(24px, 4vw, var(--card-padding));
  transition: box-shadow var(--ease), background var(--ease);
}
.steps button:hover { background: var(--color-cloud-hover); }
.steps button[aria-selected="true"] { background: var(--color-cloud-card); box-shadow: inset 0 0 0 2px var(--color-ink); }
.step-num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--color-paper-white);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.steps .h3 { font-size: clamp(24px, 2.8vw, 32px); }
.step-visual { margin-top: clamp(32px, 5vw, 48px); }
.step-panel { display: grid; gap: 24px; align-items: center; }
.step-panel[hidden] { display: none; }
@media (min-width: 860px) { .step-panel.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.step-panel .list { max-width: 680px; }

/* ---------- Sizes: to-scale size cards ---------- */
.size-card {
  --px: 5px;
  appearance: none; border: 0; font: inherit; color: inherit; cursor: pointer; text-align: center;
  background: var(--color-cloud-card); border-radius: var(--radius-cards);
  padding: clamp(24px, 4vw, var(--card-padding)); display: grid; gap: 8px; justify-items: center;
  transition: box-shadow var(--ease), background var(--ease);
}
@media (min-width: 900px) { .size-card { --px: 6px; } }
.size-card:hover { background: var(--color-cloud-hover); }
.size-card[aria-pressed="true"] { background: var(--color-cloud-card); box-shadow: inset 0 0 0 2px var(--color-ink); }
.scale-area { height: calc(30 * var(--px) + 28px); display: flex; flex-direction: column; justify-content: flex-end; align-items: center; margin-bottom: 16px; width: 100%; }
.scale-stone {
  width: calc(var(--cm-w) * var(--px)); height: calc(var(--cm-h) * var(--px)); max-width: 100%;
  background: rgba(116, 118, 121, .35); border-radius: 3px; transition: background var(--ease);
}
.scale-stake { width: 3px; height: 28px; background: rgba(116, 118, 121, .5); }
.size-card[aria-pressed="true"] .scale-stone { background: var(--color-charcoal); }
.size-card[aria-pressed="true"] .scale-stake { background: #a29d95; }
.price-note { font-size: 15px; font-weight: 500; color: var(--color-body-gray-deep); }
.scale-hand { font-size: 14px; color: var(--color-body-gray); text-align: center; margin-top: 16px; }
.size-detail {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px;
  margin-top: 32px; text-align: center;
}
.size-detail .detail-text { display: grid; gap: 4px; justify-items: center; }
/* legacy (v16) size box, still styled in case old markup remains */
.scale-box { --px: 6px; background: var(--color-cloud-card); border-radius: var(--radius-cards); padding: 32px 24px 20px; overflow: hidden; }
.scale-row { display: flex; align-items: flex-end; justify-content: center; gap: 6%; }
.scale-row.cards-3 { display: grid; align-items: stretch; gap: var(--element-gap); }
.scale-item { appearance: none; font: inherit; color: inherit; }
.scale-name { margin-top: 8px; font-size: 16px; font-weight: 500; }

/* ---------- Templates ---------- */
.template-card { cursor: pointer; font: inherit; border: 0; transition: box-shadow var(--ease), background var(--ease); }
.template-card:hover { background: var(--color-cloud-hover); }
.template-card[aria-pressed="true"] { background: var(--color-cloud-card); box-shadow: inset 0 0 0 2px var(--color-ink); }
.template-card .mini { display: block; padding: 16px 10% 0; }
.template-card .mini > span { display: block; } /* spans, not divs: a <button> may only hold inline content */
.template-card .mini .stake { height: 20px; }
.template-card .h3 { font-size: clamp(22px, 2.4vw, 28px); }
.template-card .btn { justify-self: start; }

/* ---------- Photo placeholder slot + media strip ---------- */
.photo-slot {
  position: relative; aspect-ratio: 4 / 5; max-width: 100%;
  background: var(--color-cloud-card); border-radius: var(--radius-images);
  outline: 1.5px dashed rgba(116, 118, 121, .6); outline-offset: -12px;
  display: grid; place-items: center; align-content: center; gap: 12px; text-align: center;
  padding: 32px 28px; font-size: 15px; line-height: 1.45;
}
.photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.photo-slot:has(img) { outline: 0; box-shadow: var(--shadow-md); }
.media-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 72vw); gap: var(--element-gap);
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 8px var(--gutter) 16px; margin-inline: calc(-1 * var(--gutter));
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent 100%);
}
.media-tile { margin: 0; scroll-snap-align: center; display: grid; gap: 10px; }
.media-tile figcaption { font-size: 14px; color: var(--color-body-gray); line-height: 1.4; }
@media (min-width: 900px) {
  .media-strip { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; -webkit-mask-image: none; mask-image: none; }
}

/* ---------- Film: the video slot ---------- */
.film-frame {
  position: relative; border-radius: var(--radius-3xl); overflow: hidden; background: var(--color-cloud-card);
  aspect-ratio: 16 / 9; isolation: isolate;
}
.motion { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .1; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--color-charcoal); z-index: 2; box-shadow: var(--shadow-md); }
.film-overlay { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; gap: 20px; padding: clamp(24px, 5vw, 56px); z-index: 1; }
.film-title { font-size: clamp(40px, 8vw, var(--text-hero-display)); min-height: 1em; }
.film-note { font-size: 14px; color: var(--color-body-gray-deep); max-width: 46ch; }
.film-close { position: absolute; top: 16px; right: 16px; z-index: 3; }
.play-icon { width: 0; height: 0; border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent currentColor; display: inline-block; }
.kinetic { display: inline-block; transition: opacity .4s ease, filter .4s ease; }
.kinetic.out { opacity: 0; filter: blur(6px); }
@media (max-width: 760px) { .film-frame { aspect-ratio: 4 / 5; } }

/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: 8px; }
.faq details { background: var(--color-cloud-card); border-radius: var(--radius-cards); padding: 0 24px; }
.faq summary {
  list-style: none; cursor: pointer; position: relative; display: grid; gap: 4px;
  padding: 20px 44px 20px 0; font-size: 18px; line-height: 1.35; font-weight: 500; color: var(--color-ink);
}
@media (min-width: 640px) { .faq summary { font-size: 20px; } }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%; background: var(--color-paper-white);
  display: grid; place-items: center; font-size: 22px; font-weight: 400; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq summary:focus-visible { outline-offset: 6px; border-radius: 8px; }
.faq .answer { padding: 0 0 22px; max-width: 64ch; font-size: 17px; line-height: 1.55; }
.faq .cat { font-size: 13px; font-weight: 500; color: var(--color-body-gray-deep); display: block; }
.faq-tools { display: grid; gap: 16px; margin-bottom: 24px; }
.faq-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 15px; color: var(--color-body-gray); }
.empty { background: var(--color-cloud-card); border-radius: var(--radius-cards); padding: clamp(24px, 4vw, 32px); display: grid; gap: 12px; justify-items: start; }
mark { background: transparent; color: inherit; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Create page ---------- */
.progress { overflow-x: auto; margin-top: 24px; padding: 4px 2px; }
.progress ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; min-width: max-content; }
.progress a {
  display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 6px 16px 6px 6px; min-height: 44px;
  border-radius: var(--radius-full-2); background: var(--color-cloud-card); font-size: 15px; font-weight: 500;
  transition: background var(--ease);
}
.progress a:hover { background: var(--color-cloud-hover); }
.progress .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--color-paper-white); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.progress li.done .dot { background: var(--color-ink); color: var(--color-paper-white); }
.builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; padding-block: 32px 80px; }
.preview-col { position: sticky; top: calc(var(--nav-space) + 8px); display: grid; gap: 12px; }
/* The Create page preview counts as that page's hero field */
.window { background: transparent; border-radius: var(--radius-3xl-2); overflow: hidden; }
.window-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 0; background: var(--color-hero-sky); }
.stage {
  background: var(--gradient-hero-sky);
  padding: 40px 24px 24px; display: flex; flex-direction: column; justify-content: flex-end; min-height: 400px;
}
.window-bar + .stage { background: linear-gradient(var(--color-hero-sky), #fff9ee); }
.stage .ground { display: none; }
.stage-caption { font-size: 14px; color: var(--color-body-gray-deep); padding: 12px 20px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #fff9ee; }
.draft-bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; font-size: 14px; color: var(--color-body-gray); }
.step { background: var(--color-cloud-card); border-radius: var(--radius-cards); padding: clamp(24px, 4vw, var(--card-padding)); display: grid; gap: 20px; scroll-margin-top: calc(var(--nav-space) + 24px); margin-bottom: var(--element-gap); }
.step-title { display: grid; gap: 8px; }
.step-title .eyebrow { color: var(--color-body-gray-deep); }
.drop {
  border: 1.5px dashed var(--color-body-gray); border-radius: var(--radius-2xl); padding: 28px 20px; text-align: center;
  display: grid; gap: 6px; justify-items: center; cursor: pointer; position: relative; font-size: 17px;
  transition: background var(--ease), border-color var(--ease);
}
.drop.drag, .drop:hover { background: var(--color-paper-white); border-color: var(--color-ink); }
.drop:focus-within { outline: 2px solid var(--color-ink); outline-offset: 3px; }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-tools { display: grid; gap: 14px; }
.summary dl { display: grid; grid-template-columns: auto 1fr; margin: 0; font-size: 17px; }
.summary dt, .summary dd { padding: 12px 0; border-top: 1px solid var(--color-line); margin: 0; }
.summary dt { color: var(--color-body-gray-deep); padding-right: 16px; }
.summary dd { text-align: right; overflow-wrap: anywhere; }
.notice { background: var(--color-paper-white); border-radius: var(--radius-2xl); padding: 20px; font-size: 17px; }
.helper summary { display: inline-flex; cursor: pointer; list-style: none; }
.helper summary::-webkit-details-marker { display: none; }
.helper[open] summary { box-shadow: inset 0 0 0 2px var(--color-ink); }
/* Sticky mobile order bar (the only other place the md-2 shadow is allowed) */
.sticky-bar {
  position: sticky; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 20;
  background: var(--color-paper-white); border-radius: var(--radius-3xl); box-shadow: var(--shadow-md-2);
  padding: 10px 10px 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
@media (min-width: 901px) { .sticky-bar { position: static; box-shadow: none; } }
@media (max-width: 900px) {
  .builder { grid-template-columns: 1fr; gap: 0; padding-top: 16px; }
  .preview-col { top: calc(var(--nav-space) - 4px); z-index: 10; margin-bottom: var(--element-gap); }
  .preview-col .window { border-radius: var(--radius-3xl); }
  .preview-col .stage { min-height: 0; padding: 16px 16px 8px; }
  .preview-col .plaque { --w: var(--w-m) !important; }
  .preview-col .stake { height: 22px; }
  .preview-col .stage-caption { padding: 8px 14px; font-size: 13px; }
  .hide-m { display: none !important; }
}

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- Footer link groups ---------- */
.site-footer { padding-block: clamp(64px, 10vw, 120px) 32px; background: var(--color-paper-white); }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } }
.site-footer .eyebrow, .footer-group h2 { font-size: 14px; font-weight: 500; color: var(--color-body-gray); letter-spacing: 0; line-height: 1.4; }
.site-footer p { font-size: 16px; line-height: 1.5; color: var(--color-body-gray); max-width: 36ch; }
.site-footer ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 16px; font-size: 18px; line-height: var(--leading-brand-nav); font-weight: 500; }
.site-footer ul li.muted { font-weight: 400; font-size: 16px; }
.site-footer a { text-decoration: none; color: var(--color-ink); overflow-wrap: anywhere; }
.site-footer a:hover { text-decoration: underline; }
.footer-base {
  margin-top: 56px; padding-top: 20px; border-top: 1px solid var(--color-line);
  font-size: 14px; line-height: 1.6; color: var(--color-body-gray); display: flex; flex-wrap: wrap; gap: 4px 12px;
}
.footer-base a { font-weight: 400; color: var(--color-body-gray); }

/* ---------- Reveal on scroll (visible without JS; JS adds the ease-in) ---------- */
.reveal { transition: opacity .7s cubic-bezier(.4, 0, .2, 1), transform .7s cubic-bezier(.4, 0, .2, 1); }
.reveal.pending { opacity: 0; transform: translateY(18px); }

/* ---------- Motion pack (14-10-26). All of it switches off under reduced motion ---------- */
/* 1. Clouds drifting slowly across the hero sky (hero only, behind the content) */
.hero-sky { position: relative; overflow: hidden; isolation: isolate; }
.hero-sky::before, .hero-sky::after {
  content: ""; position: absolute; inset: -10% -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)) 8% 14% / 34% 13% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0)) 62% 8% / 28% 10% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)) 88% 30% / 30% 11% no-repeat;
  filter: blur(4px);
  animation: drift 80s ease-in-out infinite alternate;
}
.hero-sky::after {
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0)) 30% 32% / 26% 9% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)) 76% 52% / 22% 8% no-repeat;
  animation-duration: 120s; animation-direction: alternate-reverse; opacity: .8;
}
@keyframes drift { from { transform: translateX(-7%); } to { transform: translateX(7%); } }

/* 2. The hero plaque floats gently, tilts toward the mouse and catches the light */
.hero-inner .render .plaque, .hero-inner .render .stake { animation: float 7s ease-in-out infinite; }
.hero-inner .render::after { animation: float-shadow 7s ease-in-out infinite; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
@keyframes float-shadow { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .7; scale: .9; } }
.hero-inner .render .plaque {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, 0, 0, 1), width .35s cubic-bezier(.4, 0, .2, 1), aspect-ratio .35s cubic-bezier(.4, 0, .2, 1);
}
.hero-inner .render .plaque::after { /* light sheen that follows the mouse */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--gx, 30%) var(--gy, 20%), rgba(255, 255, 255, .13), rgba(255, 255, 255, 0) 50%);
  transition: background .3s ease;
}

/* 3. Size changes resize the plaque smoothly everywhere */
.plaque { transition: width .35s cubic-bezier(.4, 0, .2, 1), aspect-ratio .35s cubic-bezier(.4, 0, .2, 1); }

/* 4. Panels slide in instead of snapping (how-it-works steps) */
.step-panel:not([hidden]) { animation: panel-in .26s cubic-bezier(0, 0, .2, 1); }
@keyframes panel-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

/* 5. Press feedback on buttons, pills and cards */
.btn, .template-card, .scale-item, .pills span, .chip { transition-property: background, color, opacity, box-shadow, scale; transition-duration: .12s; }
.btn:active, .template-card:active, .scale-item:active, .pills label:active span, .chip:active { scale: .98; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal.pending { opacity: 1; transform: none; }
}