/* ==========================================================================
   TapRemark — Stylesheet (V2)
   Mobile-first. No libraries.
   Structure:
     1. Variables + reset
     2. Typography + shared elements
     3. Buttons
     4. Header + navigation
     5. Hero + animated tap scene
     6. (removed — product visuals are owner-supplied images now)
     7. Problem section
     8. How it works
     9. What customers can share
    10. Management view (management-system preview)
    11. Two products
    12. Customization
    13. Who each product is for
    14. FAQ
    15. Request form
    16. Final CTA + footer
    17. Reveal motion (JS-gated; base styles are the complete final state)
    18. Desktop breakpoints
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables + reset
   -------------------------------------------------------------------------- */
:root {
  --bg: #FAF8F3;
  --bg-alt: #F2EEE4;
  --surface: #FFFFFF;
  --ink: #232823;
  --ink-soft: #59605A;
  --green: #1E6B4F;
  --green-dark: #17553F;
  --green-tint: #E4EFE7;
  --dark: #1F2B24;
  --cream: #FAF8F3;
  --line: #E4DECE;
  --bad: #A33A2E;
  --bad-tint: #F7E7E3;
  --idea: #8A6A1F;
  --idea-tint: #F6EED9;

  --font-display: "Bricolage Grotesque", "Segoe UI", Arial, sans-serif;
  --font-body: "Figtree", "Segoe UI", Arial, sans-serif;

  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  --shadow-soft: 0 8px 30px rgba(35, 40, 35, 0.08);
  --shadow-lift: 0 14px 40px rgba(35, 40, 35, 0.12);

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: 3.25rem;

  --container: 1180px;
  --header-h: 72px;

  --loop: 14s;           /* hero tap-demo loop length */
  --ease: cubic-bezier(0.33, 0.9, 0.35, 1);
}

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

html {
  scroll-padding-top: calc(var(--header-h) + 12px);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   2. Typography + shared elements
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
  /* keeps headings off ragged one-word last lines where supported;
     ignored elsewhere, so nothing depends on it */
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.05rem, 4.6vw, 3.1rem);
  font-weight: 700;
  max-width: 17ch;
}

h2 {
  font-size: clamp(1.55rem, 3.6vw, 2.2rem);
  font-weight: 700;
}

/* keep section headings to a comfortable measure without affecting the
   centered headings (final CTA, "who it's for"), which set their own */
.section-head h2,
.manage-intro h2,
.share-copy h2 {
  max-width: 22ch;
}

h3 {
  font-size: 1.15rem;
  font-weight: 600;
}

p {
  margin: 0 0 var(--space-2);
}

a {
  color: var(--green);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

.container {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
}

.section {
  padding-block: clamp(2.75rem, 6vw, 4.25rem);
}

.section-alt {
  background: var(--bg-alt);
}

.section-head {
  max-width: 660px;
  margin-bottom: var(--space-4);
}

.section-head p {
  color: var(--ink-soft);
}

.eyebrow {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--green);
  background: var(--green-tint);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.85rem;
  margin: 0 0 var(--space-2);
}

.lede {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 32em;
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--ink);
  color: var(--cream);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  text-align: center;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.8rem 1.6rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease,
    border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-primary {
  background: var(--green);
  color: #FFFFFF;
}

.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.btn-ghost:hover {
  border-color: var(--green);
  color: var(--green);
}

.btn-light {
  background: var(--cream);
  color: var(--dark);
}

.btn-light:hover {
  background: #FFFFFF;
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .btn:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   4. Header + navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 248, 243, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 4px 18px rgba(35, 40, 35, 0.06);
}

/* min-height (not height) so the no-JS fallback, where the nav links
   wrap inside the header, grows the header instead of spilling links
   over the hero.
   The header height is deliberately CONSTANT while scrolling: any
   mid-scroll header height change (even without a transition) makes
   Safari/WebKit abort smooth anchor scrolling partway. The scrolled
   state keeps its border + shadow cue, which costs no layout. */
.header-inner {
  width: min(var(--container), 100% - 2.5rem);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: var(--header-h);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.wordmark strong {
  color: var(--green);
  font-weight: 700;
}

.wordmark-icon {
  width: 30px;
  height: 30px;
}

/* Menu toggle: only shown when JS is available (it needs JS to work) */
.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  min-height: 44px;
  padding: 0.45rem 1rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}

.nav-toggle-box {
  position: relative;
  width: 18px;
  height: 12px;
}

.nav-toggle-line,
.nav-toggle-box::before,
.nav-toggle-box::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle-line {
  top: 5px;
}

.nav-toggle-box::before {
  top: 0;
}

.nav-toggle-box::after {
  bottom: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-line {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-box::before {
  transform: translateY(5px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-box::after {
  transform: translateY(-5px) rotate(-45deg);
}

.nav-list {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nav-link {
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 0.3rem 0;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.nav-link:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

/* Scroll-spy: script.js marks the section currently in view. Colour is
   backed by the underline, so the cue is not colour-only. */
.nav-link[aria-current="true"] {
  color: var(--green);
  font-weight: 600;
  border-bottom-color: var(--green);
}

/* Mobile: JS turns the nav into a contained dropdown panel anchored
   below the sticky header (closed by default; the .js class only exists
   once script.js runs). Without JS the links simply wrap inside the
   growing header — readable, never overlapping the hero. */
@media (max-width: 879px) {
  .js .nav-toggle {
    display: inline-flex;
  }

  .js .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    background: var(--bg);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(35, 40, 35, 0.16);
    padding: var(--space-1) var(--space-3) var(--space-3);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  }

  .js.nav-open .site-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
  }

  .js .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .js .nav-link {
    display: block;
    font-size: 1.15rem;
    font-family: var(--font-display);
    font-weight: 600;
    padding: 0.85rem 0.2rem;
    border-bottom: 1px solid var(--line);
  }

  /* "Request TapRemark" stays inside the panel, full width at the end */
  .js .nav-cta-item {
    margin-top: var(--space-2);
  }

  .js .nav-cta {
    display: block;
    width: 100%;
  }

  /* keep the page from scrolling behind the open panel */
  .js.nav-open {
    overflow: hidden;
  }

  /* Without JS the nav simply flows in the header; keep it wrappable */
  .nav-list {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
}

@media (max-width: 879px) and (prefers-reduced-motion: reduce) {
  .js .site-nav {
    transition: none;
    transform: translateY(0);
  }
}

/* --------------------------------------------------------------------------
   5. Hero + animated tap scene
   Static base state = story complete (feedback page open, confirmation
   shown). The .anim class layers the looping demonstration on top.
   -------------------------------------------------------------------------- */
.hero {
  padding-block: clamp(2rem, 4.5vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  background:
    radial-gradient(52rem 26rem at 85% 0%, rgba(228, 239, 231, 0.7), transparent 60%),
    var(--bg);
}

.hero-grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}

/* Grid items default to min-width: auto, so the animated scene's
   intrinsic width was widening the single mobile column and pushing the
   headline past the clipped edge of .hero at 320px. Allowing the items
   to shrink keeps the copy inside the container; the scene is sized to
   fit separately below. */
.hero-grid > * {
  min-width: 0;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block: var(--space-3) var(--space-2);
}

.trust-line {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
}

.hero-scene {
  position: relative;
}

.scene {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0.6rem, 3vw, 1.6rem);
  padding: var(--space-3) var(--space-2) 2.5rem;
  min-height: 340px;
}

/* Warm blurred light + soft tableware silhouettes for restaurant context */
.scene-glow {
  position: absolute;
  top: -10%;
  left: 8%;
  width: 55%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 210, 160, 0.55), transparent 70%);
  filter: blur(10px);
}

/* Wood tabletop: lighter top surface, plank seams, darker front edge */
.scene-table {
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: 0;
  height: 2.75rem;
  border-radius: 4px 4px 7px 7px;
  background:
    repeating-linear-gradient(90deg, rgba(94, 66, 40, 0.09) 0 2px, transparent 2px 88px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #D4B189 0%, #C6A075 52%, #9A744C 56%, #82603C 100%);
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.35),
    inset 0 -3px 5px rgba(48, 32, 18, 0.25),
    0 10px 22px rgba(60, 42, 25, 0.22);
}

/* ---- Google Review Stand scene (hero) ----
   The printed insert is Adrien's supplied artwork inside a CSS acrylic
   stand. A free-floating animated phone taps the insert's NFC circle,
   flips 180°, and shows an illustrative review screen. Static base state =
   review screen already facing the visitor; .anim layers the loop on top. */

.gr-stand {
  position: relative;
  z-index: 2;
  width: clamp(180px, 42vw, 226px);
}

.gr-acrylic {
  position: relative;
  padding: 7px 7px 9px;
  border-radius: 10px 10px 4px 4px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.9), rgba(238, 244, 250, 0.6) 55%, rgba(255, 255, 255, 0.8));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(34, 48, 89, 0.08),
    var(--shadow-lift);
}

/* Exact printed insert: the owner's supplied artwork, undistorted.
   aspect-ratio matches the asset's intrinsic 1024x1536 (2:3). */
.gr-insert {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: 5px;
}

/* acrylic glare streak over the insert */
.gr-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 32%, rgba(255, 255, 255, 0.34) 43%, rgba(255, 255, 255, 0.07) 51%, transparent 60%);
}

.gr-foot {
  width: 72%;
  height: 12px;
  margin: -1px auto 0;
  border-radius: 0 0 5px 5px;
  background: linear-gradient(180deg, rgba(222, 230, 240, 0.95), rgba(178, 189, 205, 0.9));
  box-shadow: 0 8px 14px rgba(35, 40, 35, 0.18);
}

/* Animated floating phone.
   14s timeline: ~1s initial pause → ~2.5s approach+tap → ~1.5s pull-back
   and flip → ~1.1s pop → ~5.9s enlarged hold (longest stage) → ~2s fade
   reset and pause. */
.gr-phone-wrap {
  position: relative;
  z-index: 3;
  margin-bottom: 0.6rem;
  perspective: 900px;
  --travel-x: 96px;   /* entry/exit offset */
  --tap-x: -52px;     /* contact offset toward the printed NFC circle */
  --rest-x: 14px;     /* hold position while the screen is shown */
  --pop: 1.2;         /* featured-reveal scale after the flip (mobile) */
}

.anim .gr-phone-wrap {
  animation: gr-move var(--loop) var(--ease) infinite both;
}

@keyframes gr-move {
  0%, 7% {
    transform: translate(var(--travel-x), -14px) rotate(7deg);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  18% {
    transform: translate(var(--tap-x), 8px) rotate(-6deg);
    opacity: 1;
  }
  20% {
    transform: translate(calc(var(--tap-x) + 9px), 6px) rotate(-5deg);
  }
  23% {
    transform: translate(calc(var(--tap-x) + 2px), 8px) rotate(-6deg);
  }
  32%, 86% {
    transform: translate(var(--rest-x), 0) rotate(0deg);
    opacity: 1;
  }
  93%, 100% {
    transform: translate(var(--travel-x), -14px) rotate(7deg);
    opacity: 0;
  }
}

.gr-phone {
  position: relative;
  width: clamp(126px, 29vw, 152px);
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
  /* grow upward from the tabletop so the phone stays grounded */
  transform-origin: 50% 100%;
  /* static/complete state: screen facing the visitor at the featured size */
  transform: rotateY(180deg) scale(var(--pop));
}

.anim .gr-phone {
  animation: gr-flip var(--loop) var(--ease) infinite both;
}

@keyframes gr-flip {
  0%, 26% {
    transform: rotateY(0deg) scale(1);
  }
  36% {
    transform: rotateY(180deg) scale(1);
  }
  /* post-flip pop: one overshoot, then the enlarged featured hold */
  40% {
    transform: rotateY(180deg) scale(calc(var(--pop) + 0.07));
  }
  44%, 86% {
    transform: rotateY(180deg) scale(var(--pop));
  }
  /* completes the turn and returns to base size while faded out */
  100% {
    transform: rotateY(360deg) scale(1);
  }
}

.gr-face {
  position: absolute;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.gr-face-back {
  inset: 0;
}

.gr-face-back svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Soft grounding shadow so the free-floating phone reads as intentional;
   it widens in sync with the post-flip scale so the enlarged phone stays
   grounded */
.gr-phone-wrap::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -0.85rem;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(48, 34, 20, 0.3), transparent 78%);
  transform: scaleX(var(--pop));
}

.anim .gr-phone-wrap::after {
  animation: gr-shadow var(--loop) var(--ease) infinite both;
}

@keyframes gr-shadow {
  0%, 36% {
    transform: scaleX(1);
  }
  40% {
    transform: scaleX(calc(var(--pop) + 0.07));
  }
  44%, 86% {
    transform: scaleX(var(--pop));
  }
  100% {
    transform: scaleX(1);
  }
}

/* Front face matches the phone body drawn in the back-face SVG
   (rect x34 y10 w132 h242 in a 200x300 viewBox, horizontally centered) */
.gr-face-front {
  left: 17%;
  top: 3.3%;
  width: 66%;
  height: 80.7%;
  transform: rotateY(180deg);
  background: #FFFFFF;
  border: 4px solid #223059;
  border-radius: 18px;
  overflow: hidden;
}

.gr-screen {
  padding: 0.55rem 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.gr-screen-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.63rem;
  line-height: 1.15;
  color: #223059;
  margin: 0;
  white-space: nowrap;
}

.gr-screen-sub {
  font-size: 0.54rem;
  line-height: 1.25;
  color: var(--ink-soft);
  margin: 0 0 0.35rem;
}

.gr-screen-stars {
  display: flex;
  gap: 2px;
  font-size: 0.9rem;
  line-height: 1;
  color: #E8A712;
  margin-bottom: 0.4rem;
}

.gr-screen-stars .dim {
  color: #D9DEE8;
}

.gr-screen-msg {
  font-size: 0.55rem;
  line-height: 1.35;
  color: var(--ink-soft);
  background: #F6F8FC;
  border: 1px solid #E1E7F0;
  border-radius: 7px;
  padding: 0.4rem 0.45rem;
  margin: 0 0 0.4rem;
}

.gr-screen-btn {
  margin-top: auto;
  font-size: 0.56rem;
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
  background: #2E6BE6;
  border-radius: var(--radius-pill);
  padding: 0.34rem;
}

/* Smaller phone at mobile widths → smaller screen type, wrapping title,
   tightened spacing so "Send review" always fits on the screen */
@media (max-width: 879px) {
  .gr-screen {
    padding: 0.45rem 0.45rem 0.6rem;
  }

  .gr-screen-msg {
    font-size: 0.48rem;
    padding: 0.32rem 0.38rem;
    margin-bottom: 0.25rem;
  }

  .gr-screen-sub {
    margin-bottom: 0.2rem;
  }

  .gr-screen-stars {
    margin-bottom: 0.3rem;
  }


  .gr-screen-title {
    font-size: 0.55rem;
    white-space: normal;
  }

  .gr-screen-sub {
    font-size: 0.48rem;
    white-space: normal;
  }

  .gr-screen-stars {
    font-size: 0.76rem;
  }

  .gr-screen-btn {
    font-size: 0.46rem;
    padding-inline: 0.1rem;
    white-space: nowrap;
  }
}

.fb-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  margin: 0;
}

.fb-sub {
  font-size: 0.62rem;
  color: var(--ink-soft);
  margin: 0 0 0.45rem;
}

.fb-stars {
  display: flex;
  gap: 2px;
  font-size: 0.9rem;
  color: var(--green);
  margin-bottom: 0.5rem;
}

.fb-stars .dim {
  color: var(--line);
}

.fb-lines {
  display: grid;
  gap: 5px;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
}

.fb-lines span {
  height: 5px;
  border-radius: 3px;
  background: var(--line);
}

.fb-lines .short {
  width: 55%;
}

.fb-send {
  font-size: 0.64rem;
  font-weight: 700;
  text-align: center;
  color: #FFFFFF;
  background: var(--green);
  border-radius: var(--radius-pill);
  padding: 0.42rem;
}

/* Smallest phones only: the stand + phone pair is 348px wide at its
   normal minimums, which does not fit a 320px screen. The two elements
   are scaled down together (ratio kept at ~1.42:1) and the scene's side
   padding is dropped so the composition, the tap position, and the
   timeline all stay as designed — just smaller. Nothing about the
   animation itself changes. */
@media (max-width: 379px) {
  .scene {
    padding-inline: 0;
    gap: 0.4rem;
  }

  .gr-stand {
    width: clamp(148px, 46vw, 226px);
  }

  .gr-phone {
    width: clamp(104px, 32vw, 152px);
  }

  /* the screen shrinks with the phone, so its type has to follow or
     "Send review" drops off the bottom of the mock screen */
  .gr-screen {
    padding: 0.35rem 0.35rem 0.45rem;
  }

  .gr-screen-title {
    font-size: 0.46rem;
  }

  .gr-screen-sub {
    font-size: 0.4rem;
    margin-bottom: 0.15rem;
  }

  .gr-screen-stars {
    font-size: 0.62rem;
    margin-bottom: 0.2rem;
  }

  .gr-screen-msg {
    font-size: 0.4rem;
    padding: 0.25rem 0.3rem;
    margin-bottom: 0.2rem;
  }

  .gr-screen-btn {
    font-size: 0.4rem;
    padding: 0.26rem 0.1rem;
  }
}

/* Pause the hero loop while the tab is hidden (class set by script.js) */
.page-hidden .scene,
.page-hidden .scene * {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   7. Problem section
   -------------------------------------------------------------------------- */
.problem-list {
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.problem-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.85rem 1.05rem;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(35, 40, 35, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

@media (hover: hover) {
  .problem-item:hover {
    transform: translateY(-2px);
    border-color: rgba(30, 107, 79, 0.35);
    box-shadow: var(--shadow-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem-item:hover {
    transform: none;
  }
}

.problem-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--green-tint);
  color: var(--green);
}

.problem-icon svg {
  width: 22px;
  height: 22px;
}

.problem-close {
  max-width: 620px;
  margin: var(--space-3) 0 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.problem-close em {
  font-style: normal;
  color: var(--green);
}

/* --------------------------------------------------------------------------
   8. How it works
   -------------------------------------------------------------------------- */
.steps {
  list-style: none;
  position: relative;
  display: grid;
  gap: var(--space-4);
  padding-left: 3.2rem;
}

/* dashed track + solid progress line (draws in when the section enters) */
.steps::before,
.steps::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 1.5rem;
  bottom: 1.5rem;
}

.steps::before {
  border-left: 2px dashed var(--green);
  opacity: 0.25;
}

.steps::after {
  width: 2px;
  background: var(--green);
  transform-origin: top;
}

.anim .steps::after {
  transform: scaleY(0);
  transition: transform 1.1s var(--ease) 0.15s;
}

.anim .steps.is-visible::after {
  transform: scaleY(1);
}

.step {
  position: relative;
}

.step-num {
  position: absolute;
  left: -3.2rem;
  top: 0;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--green);
  color: #FFFFFF;
  font-family: var(--font-display);
  font-weight: 700;
  z-index: 1;
}

/* The number carries the sequence; the glyph carries the story —
   physical product → customer phone → the page that opens. */
.step-glyph {
  display: grid;
  place-items: center;
  width: 56px;
  height: 44px;
  margin-bottom: 0.7rem;
  border-radius: 12px;
  background: var(--green-tint);
  color: var(--green);
}

.step-glyph svg {
  width: 32px;
  height: 24px;
}

.anim .step .step-num,
.anim .step .step-glyph {
  transition: transform 0.45s var(--ease), opacity 0.45s ease;
  transform: scale(0.86);
  opacity: 0;
}

.anim .step.is-visible .step-num,
.anim .step.is-visible .step-glyph {
  transform: none;
  opacity: 1;
}

.anim .step.is-visible .step-glyph {
  transition-delay: 0.09s;
}

.step h3 {
  margin-bottom: 0.3rem;
}

.step p {
  color: var(--ink-soft);
  margin: 0;
  max-width: 30em;
}

/* --------------------------------------------------------------------------
   9. What customers can share
   -------------------------------------------------------------------------- */
.share-grid {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.share-lede {
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}

.share-group {
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
  margin-bottom: var(--space-3);
}

.share-group h3 {
  font-size: 0.85rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.8rem;
}

.share-items {
  list-style: none;
  display: grid;
  gap: 0.75rem 1.2rem;
}

.share-items li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-weight: 500;
  line-height: 1.3;
}

.share-items em {
  display: block;
  font-style: normal;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.share-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--green-tint);
  color: var(--green);
}

.share-icon svg {
  width: 20px;
  height: 20px;
}

.share-items-4,
.share-items-6 {
  grid-template-columns: repeat(2, 1fr);
}

/* Very small phones: longer category labels need a single column */
@media (max-width: 419px) {
  .share-items-6 {
    grid-template-columns: 1fr;
  }
}

.share-assurance {
  list-style: none;
  border-left: 3px solid var(--green);
  background: var(--green-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.9rem 1.1rem;
  display: grid;
  gap: 0.4rem;
}

.share-assurance li {
  position: relative;
  padding-left: 1.5rem;
  font-weight: 500;
  font-size: 0.98rem;
}

.share-assurance li::before {
  content: "";
  position: absolute;
  left: 0.15em;
  top: 0.4em;
  width: 0.55em;
  height: 0.3em;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* Large phone preview (decorative) */
.share-phone-wrap {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
}

/* Modern smartphone silhouette: fixed ~9:18.5 portrait ratio, slim even
   bezel all round, rounded screen, subtle earpiece + camera cues. The
   screen is a flex column so the message box and send button stretch to
   fill the taller shape naturally. */
.phone-lg {
  width: min(264px, 74vw);
  aspect-ratio: 9 / 18.5;
  display: flex;
  background: var(--ink);
  border-radius: 34px;
  padding: 8px;
  box-shadow: var(--shadow-lift);
}

.phone-lg-screen {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-radius: 27px;
  padding: 2.4rem 0.95rem 1.1rem;
  overflow: hidden;
}

/* earpiece slit + camera dot, kept subtle */
.phone-lg-screen::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 6px;
  border-radius: 3px;
  background: rgba(35, 40, 35, 0.18);
}

.phone-lg-screen::after {
  content: "";
  position: absolute;
  top: 10px;
  left: calc(50% + 32px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(35, 40, 35, 0.22);
}

/* let the message area grow with the taller screen (bars stay at the
   top so it reads as a roomy text box) and pin the button to the bottom */
.phone-lg .fb-lines {
  flex: 1;
  align-content: start;
  min-height: 42px;
}

.phone-lg .fb-send {
  margin-top: auto;
}

.phone-lg .fb-title {
  font-size: 1rem;
}

.phone-lg .fb-sub {
  font-size: 0.75rem;
  margin-bottom: 0.6rem;
}

.phone-lg .fb-stars {
  font-size: 1.15rem;
}

/* Small field captions inside the phone preview, so the mock reads like a
   real form rather than a stack of unlabeled boxes */
.fb-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.25rem;
}

.fb-label span {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

.fb-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 0.55rem;
}

.fb-choice {
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  background: #FFFFFF;
}

/* Employee picker: deliberately a SELECT, not a free-text box — the real
   feedback page offers the restaurant's own configured staff list */
.fb-select {
  position: relative;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 1.6rem 0.45rem 0.55rem;
  margin-bottom: 0.5rem;
}

.fb-select i {
  position: absolute;
  right: 0.6rem;
  top: 50%;
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid var(--ink-soft);
  border-bottom: 2px solid var(--ink-soft);
  transform: translateY(-70%) rotate(45deg);
}

.fb-choice-on {
  background: var(--green);
  border-color: var(--green);
  color: #FFFFFF;
}

.fb-field {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.5rem;
}

.fb-field-light {
  color: var(--ink-soft);
  font-weight: 500;
}

.phone-lg .fb-send {
  font-size: 0.8rem;
  padding: 0.55rem;
}

.share-caption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  max-width: 26em;
  margin: 0;
}

/* --------------------------------------------------------------------------
   10. Management view — TapRemark management system PREVIEW
   Everything in here draws an illustration of the managed system. It is
   not a live product surface, and it deliberately does not imitate Google
   Sheets chrome. Sample data is labeled in the markup, not only in CSS.
   -------------------------------------------------------------------------- */
.manage-head {
  display: grid;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.manage-intro h2 {
  margin-bottom: var(--space-2);
}

.manage-lede {
  color: var(--ink-soft);
  max-width: 46ch;
  margin: 0;
}

.manage-values {
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.manage-values li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-weight: 600;
}

.value-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--green);
}

.value-icon svg {
  width: 20px;
  height: 20px;
}

.dashboard {
  margin: 0;
}

.dashboard-ui {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
}

.dash-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.8rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #FFFFFF, #FBFAF6);
}

.dash-title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.dash-brandmark {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
}

.dash-brandmark svg {
  width: 100%;
  height: 100%;
}

.dash-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
}

/* The demo badge is a warning label, so it is deliberately the one warm
   accent in the whole panel */
.dash-demo-badge {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--idea);
  background: var(--idea-tint);
  border: 1px solid rgba(138, 106, 31, 0.28);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.6rem;
}

.dash-sample-note {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0;
}

/* ---- Area tabs (JS only; without JS every area is simply shown) ---- */
.dash-tabs {
  display: none;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.65rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.js .dash-tabs {
  display: flex;
}

.dash-tab {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.36rem 0.85rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.dash-tab:hover {
  border-color: var(--green);
  color: var(--green-dark);
}

.dash-tab.dash-tab-on {
  background: var(--green);
  border-color: var(--green);
  color: #FFFFFF;
}

.dash-panel {
  padding: 1rem 1.1rem 1.2rem;
}

.dash-panel:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: -3px;
  border-radius: 0;
}

/* Without JS the five areas stack, so they need a divider. With JS only
   one is on screen at a time and the divider would be wrong. */
.dash-panel + .dash-panel {
  border-top: 1px solid var(--line);
}

.js .dash-panel + .dash-panel {
  border-top: none;
}

.anim .dash-panel.is-in {
  animation: faq-open 0.28s ease;
}

.dash-panel-title {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
}

/* With JS the tab already names the area, so the heading only needs to
   remain for assistive technology */
.js .dash-panel-title {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.dash-range {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 0.85rem;
  max-width: 60ch;
}

/* ---- Summary cards ---- */
.stat-row {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: var(--space-3);
}

.stat {
  display: grid;
  align-content: start;
  gap: 0.2rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.75rem;
}

.stat-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.05;
}

.stat-value i {
  font-style: normal;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Five cards in a two-column grid leave one alone on the last row;
   spanning it reads as deliberate rather than left over. */
@media (max-width: 879px) {
  .stat-row .stat:last-child {
    grid-column: 1 / -1;
  }
}

.stat-good { border-left-color: var(--green); }
.stat-bad { border-left-color: var(--bad); }
.stat-open { border-left-color: var(--idea); }

.dash-split {
  display: grid;
  gap: var(--space-3);
}

.dash-block-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.65rem;
}

/* ---- Horizontal bars ---- */
.dash-bar {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.dash-bar i {
  display: block;
  height: 8px;
  width: var(--w, 40%);
  border-radius: 4px;
  background: linear-gradient(90deg, var(--green), #3D8B6C);
}

.dash-bar i.bar-bad {
  background: linear-gradient(90deg, var(--bad), #C4685A);
}

.dash-bar i.bar-idea {
  background: linear-gradient(90deg, var(--idea), #B7943F);
}

.dash-bar b {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* Bars and columns grow once, when the panel first scrolls into view */
.anim .dashboard .dash-bar i {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s var(--ease) 0.15s;
}

.anim .dashboard.is-visible .dash-bar i {
  transform: none;
}

/* ---- Latest-feedback mini list ---- */
.mini-feed {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.mini-feed li {
  display: grid;
  justify-items: start;
  gap: 0.3rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.7rem;
}

.mini-feed p {
  font-size: 0.86rem;
  margin: 0;
}

/* ---- Tag + status pills (text carries the meaning, not colour alone) ---- */
.dash-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
}

.dash-tag-bad {
  color: var(--bad);
  background: var(--bad-tint);
}

.dash-tag-good {
  color: var(--green-dark);
  background: var(--green-tint);
}

.dash-tag-idea {
  color: var(--idea);
  background: var(--idea-tint);
}

.mstatus {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 6px;
  padding: 0.18rem 0.5rem;
}

.mstatus-new { color: var(--bad); background: var(--bad-tint); }
.mstatus-progress { color: var(--idea); background: var(--idea-tint); }
.mstatus-contacted { color: #1F4C7A; background: #E3EDF7; }
.mstatus-done { color: var(--green-dark); background: var(--green-tint); }

/* ---- Record rows.
   Phone: each record is a labeled card. Desktop: the same records become
   aligned columns under a header row. The layout changes; the content
   does not, and the per-cell labels stay available to screen readers at
   every width. ---- */
.mrow-head {
  display: none;
}

.mrows {
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.mrow {
  display: grid;
  gap: 0.35rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
}

.mcell {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 500;
}

.mlabel {
  flex: none;
  width: 94px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.mcell-name {
  font-weight: 600;
}

.mnone {
  color: var(--ink-soft);
}

.mstars {
  color: var(--green);
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.mstars i {
  font-style: normal;
  color: var(--line);
}

/* ---- Trend chart ---- */
.chart {
  margin: 0;
}

.chart-plot {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  height: 128px;
}

.chart-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 0.3rem;
  height: 100%;
}

.chart-col i {
  display: block;
  width: 100%;
  max-width: 28px;
  height: var(--h, 50%);
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(180deg, #4E9A79, var(--green));
}

.chart-col-now i {
  background: linear-gradient(180deg, var(--green), var(--green-dark));
}

.chart-col b {
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--ink-soft);
}

.anim .dashboard .chart-col i {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.65s var(--ease);
}

.anim .dashboard.is-visible .chart-col i {
  transform: none;
}

.anim .dashboard.is-visible .chart-col:nth-child(1) i { transition-delay: 0.05s; }
.anim .dashboard.is-visible .chart-col:nth-child(2) i { transition-delay: 0.11s; }
.anim .dashboard.is-visible .chart-col:nth-child(3) i { transition-delay: 0.17s; }
.anim .dashboard.is-visible .chart-col:nth-child(4) i { transition-delay: 0.23s; }
.anim .dashboard.is-visible .chart-col:nth-child(5) i { transition-delay: 0.29s; }
.anim .dashboard.is-visible .chart-col:nth-child(6) i { transition-delay: 0.35s; }
.anim .dashboard.is-visible .chart-col:nth-child(7) i { transition-delay: 0.41s; }
.anim .dashboard.is-visible .chart-col:nth-child(8) i { transition-delay: 0.47s; }

.chart-note {
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin: 0.6rem 0 0;
}

.dashboard-caption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: 0.7rem;
  max-width: 70ch;
}

/* --------------------------------------------------------------------------
   11. Two products
   -------------------------------------------------------------------------- */
.products {
  background:
    radial-gradient(40rem 22rem at 10% 100%, rgba(228, 239, 231, 0.55), transparent 65%),
    var(--bg);
}

.product-grid {
  display: grid;
  gap: var(--space-3);
  align-items: stretch;
}

.product {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-soft);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .product:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lift);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product:hover {
    transform: none;
  }
}

.product-primary {
  border-color: rgba(30, 107, 79, 0.4);
  box-shadow: 0 0 0 1px rgba(30, 107, 79, 0.25), var(--shadow-soft);
}

.product-badge {
  align-self: flex-start;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--green);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  margin: 0 0 var(--space-2);
}

.product-badge-alt {
  color: var(--ink);
  background: var(--bg-alt);
}

/* Product photo (owner-supplied artwork), one per product card.
   Both products share the same fixed 5:4 slot; object-fit: contain
   preserves each image's ratio undistorted and uncropped. */
.product-photo {
  aspect-ratio: 5 / 4;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-3);
  background: #F4F4F4; /* matches the card artwork's backdrop */
}

.product-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* the portrait Google Review Stand photo sits on an off-white backdrop */
.product-photo-portrait {
  background: #F7F6F3;
}

/* ---- Private Feedback System product preview ----
   Replaces the former product photograph, and then the flow diagram that
   briefly stood in for it (both owner decisions, 2026-08-09). This is one
   phone at product scale showing the private feedback page, so the card
   reads as a product preview rather than a technical diagram.

   It deliberately reuses .phone-lg and every .fb-* screen part from the
   "What customers can share" section — only sizing is redeclared here.
   The share-section preview is width-driven; this one is height-driven so
   the phone fills the fixed 5:4 media slot and stays the same visual
   weight as the portrait Google Review Stand photograph beside it. */
.product-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.7rem, 2.4vw, 1.1rem);
  border-color: rgba(30, 107, 79, 0.22);
  background:
    radial-gradient(16rem 14rem at 50% 42%, rgba(228, 239, 231, 0.95), transparent 72%),
    linear-gradient(180deg, #FFFFFF, #F8FBF9);
  /* A 5:4 frame is only tall enough for a portrait phone once the card is
     wide. Below the two-wide desktop layout this frame goes portrait so
     the interface stays at a usable size. The Google Review Stand keeps
     the shared 5:4 frame at every width — see the breakpoint below, where
     the two frames match again side by side. */
  aspect-ratio: 4 / 5;
}

@media (min-width: 1100px) {
  .product-preview {
    aspect-ratio: 5 / 4;
  }
}

/* While the private-feedback frame is the taller of the two, the cards
   are top-aligned so the Google Review Stand card ends at its own natural
   height instead of being stretched into a block of empty space above its
   button. Its frame, photo, copy and features are untouched. */
@media (max-width: 1099px) {
  .product-grid {
    align-items: start;
  }
}

/* Height-driven variant of the shared phone shell. The ratio is a little
   squarer than the share-section preview so the screen is wide enough for
   the feedback-type chips to read at this size.

   The body is a thin edge rather than the share-section's chunky bezel:
   at product-card scale a thick dark frame read as a black card sitting
   behind a white screen (owner note, 2026-08-09). The screen now runs
   almost edge to edge and the phone is the only object in the frame. */
.phone-card {
  width: auto;
  height: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16.6;
  /* Deliberately fixed units. The container units below size the phone's
     CONTENTS against the phone; the phone's own edge cannot use them,
     because an element's container units resolve against an ancestor
     container rather than itself — in cqh this padding silently became a
     slice of viewport height, which is what made the edge read as a thick
     black card. A thin fixed edge is correct across the whole 143px–267px
     width range this phone occupies. */
  padding: 3px;
  border-radius: 20px;
}

.phone-card .phone-lg-screen {
  border-radius: 17px;
  padding: 0.72rem 0.62rem 0.6rem;
}

/* No earpiece slit or camera dot here — at this size they only added a
   dead dark band across the top of the screen. */
.phone-card .phone-lg-screen::before,
.phone-card .phone-lg-screen::after {
  content: none;
}

.phone-card .fb-title { font-size: 0.8rem; }

.phone-card .fb-sub {
  font-size: 0.6rem;
  margin-bottom: 0.4rem;
}

.phone-card .fb-stars {
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
}

.phone-card .fb-label {
  font-size: 0.5rem;
  margin-bottom: 0.18rem;
}

.phone-card .fb-choice-row {
  gap: 3px;
  margin-bottom: 0.42rem;
}

.phone-card .fb-choice {
  font-size: 0.53rem;
  padding: 0.18rem 0.4rem;
}

.phone-card .fb-lines {
  min-height: 28px;
  padding: 0.4rem;
  margin-bottom: 0.42rem;
}

.phone-card .fb-select,
.phone-card .fb-field {
  font-size: 0.58rem;
  padding: 0.34rem 0.45rem;
  margin-bottom: 0.42rem;
}

.phone-card .fb-select {
  padding-right: 1.2rem;
}

.phone-card .fb-send {
  font-size: 0.62rem;
  padding: 0.42rem;
}

/* The rem sizes above are tuned for the phone at its full desktop height
   (380px) and are the fallback. Where container units are supported, the
   whole mock is re-expressed as a proportion of the phone's own height,
   so it scales like a picture instead of overflowing its screen as the
   card narrows. 1cqh = 1% of 380px = 3.8px at the design size, which is
   why every value below is simply the design pixel value ÷ 3.8. */
@supports (height: 1cqh) {
  .phone-card {
    container-type: size;
  }

  /* Only the phone's CONTENTS are re-expressed here — see the note on
     .phone-card above for why its own padding and radius stay fixed. */
  .phone-card .phone-lg-screen {
    padding: 3cqh 2.6cqh 2.5cqh;
  }

  .phone-card .fb-title { font-size: 3.35cqh; }

  .phone-card .fb-sub {
    font-size: 2.5cqh;
    margin-bottom: 1.7cqh;
  }

  .phone-card .fb-stars {
    font-size: 3.85cqh;
    gap: 0.53cqh;
    margin-bottom: 1.7cqh;
  }

  .phone-card .fb-label {
    font-size: 2.1cqh;
    margin-bottom: 0.75cqh;
  }

  .phone-card .fb-choice-row {
    gap: 0.8cqh;
    margin-bottom: 1.75cqh;
  }

  .phone-card .fb-choice {
    font-size: 2.25cqh;
    padding: 0.75cqh 1.7cqh;
  }

  .phone-card .fb-lines {
    min-height: 7.4cqh;
    gap: 1.3cqh;
    padding: 1.7cqh;
    margin-bottom: 1.75cqh;
    border-radius: 2.1cqh;
  }

  .phone-card .fb-lines span {
    height: 1.3cqh;
    border-radius: 0.8cqh;
  }

  .phone-card .fb-select,
  .phone-card .fb-field {
    font-size: 2.45cqh;
    padding: 1.4cqh 1.9cqh;
    margin-bottom: 1.75cqh;
    border-radius: 2.1cqh;
  }

  .phone-card .fb-select {
    padding-right: 5cqh;
  }

  .phone-card .fb-select i {
    right: 2.5cqh;
    width: 1.75cqh;
    height: 1.75cqh;
  }

  .phone-card .fb-send {
    font-size: 2.6cqh;
    padding: 1.75cqh;
  }
}

.product h3 {
  font-size: 1.35rem;
  margin-bottom: 0.4rem;
}

.product-lede {
  color: var(--ink-soft);
  margin-bottom: var(--space-2);
}

.product-features {
  list-style: none;
  display: grid;
  gap: 0.45rem;
  margin-bottom: var(--space-3);
}

.product-features li {
  position: relative;
  padding-left: 1.7rem;
  font-weight: 500;
  font-size: 0.98rem;
}

.product-features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: var(--green-tint);
}

.product-features li::after {
  content: "";
  position: absolute;
  left: 0.26em;
  top: 0.52em;
  width: 0.44em;
  height: 0.24em;
  border-left: 2px solid var(--green);
  border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* full-width below large desktop so neither CTA wraps and both line up */
.product-cta {
  margin-top: auto;
  align-self: stretch;
  padding-inline: 1rem;
}

@media (min-width: 1024px) {
  .product-cta {
    align-self: flex-start;
    padding-inline: 1.6rem;
  }
}

.pricing-note {
  color: var(--ink-soft);
  text-align: center;
  margin: var(--space-3) 0 0;
}

/* --------------------------------------------------------------------------
   12. Customization
   -------------------------------------------------------------------------- */
.customize-grid {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.customize-stage {
  position: relative;
}

.stage-inner {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--space-3) 0 0.5rem;
  max-width: 500px;
  margin-inline: auto;
}

/* Sample TapRemark card artwork (owner-supplied image) annotated by the
   callouts. The anchor has a FIXED width wherever the floating diagram
   renders (>= 720px), so the pixel-positioned callout connectors stay
   attached to the exact card features at every viewport width. */
.stage-anchor {
  position: relative;
  width: min(376px, 88vw);
}

.stage-card {
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-lift);
}

.stage-card img {
  display: block;
  width: 100%;
  height: auto;
}

/* Callout labels with connector lines pointing at the mockup */
.callout {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink);
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.28rem 0.6rem;
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
}

.callout::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

.callout::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  border-radius: 1px;
  background: rgba(35, 40, 35, 0.32);
}

/* left-side callouts: line leaves the right edge onto the card */
.co-1::after,
.co-3::after,
.co-5::after {
  left: 100%;
}

/* right-side callouts: line leaves the left edge onto the card */
.co-2::after,
.co-4::after {
  right: 100%;
}

/* Pixel positions are relative to the fixed 376px anchor, tuned so each
   connector ends directly beside its feature on the printed card:
   logo square (y 58), wordmark (y 58), headline (y 135), NFC circle
   (y 144), star row (y 217). */
.co-1 { top: 45px; right: calc(100% - 40px); }
.co-1::after { width: 76px; }

.co-2 { top: 45px; left: calc(100% - 62px); }
.co-2::after { width: 70px; }

.co-3 { top: 122px; right: calc(100% - 24px); }
.co-3::after { width: 18px; }

.co-4 { top: 131px; left: calc(100% - 44px); }
.co-4::after { width: 16px; }

.co-5 { top: 204px; right: calc(100% - 34px); }
.co-5::after { width: 20px; }

.stage-caption {
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-align: center;
  margin: var(--space-2) 0 0;
}

/* "Your setup" panel */
.setup-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3);
}

.setup-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin: 0 0 var(--space-2);
}

.setup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}

.setup-label {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.setup-value {
  font-weight: 600;
  font-size: 0.95rem;
  text-align: right;
}

/* small logo thumbnail matching the sample card's printed logo */
.setup-logo {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
}

.setup-logo svg {
  width: 100%;
  height: 100%;
}

.setup-swatches {
  display: flex;
  gap: 0.35rem;
}

.setup-swatches i {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1px solid rgba(35, 40, 35, 0.12);
}

.sw-1 { background: var(--green); }
.sw-2 { background: var(--cream); }
.sw-3 { background: var(--ink); }

.setup-thumb {
  display: grid;
  gap: 3px;
  width: 46px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 6px;
}

.setup-thumb i {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
}

.setup-thumb .thumb-btn {
  background: var(--green);
  width: 70%;
}

.setup-process {
  font-size: 0.95rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
  margin: 0.4rem 0 0;
}

/* --------------------------------------------------------------------------
   13. Who each product is for
   The two products do not have the same reach, so the section is split
   rather than presented as one undifferentiated list of industries.
   -------------------------------------------------------------------------- */
.ideal {
  text-align: center;
  background:
    linear-gradient(rgba(250, 248, 243, 0.92), rgba(250, 248, 243, 0.92)),
    repeating-linear-gradient(0deg, transparent 0 46px, rgba(35, 40, 35, 0.05) 46px 47px),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(35, 40, 35, 0.05) 46px 47px),
    var(--bg);
}

.ideal .container {
  max-width: 1000px;
}

.ideal h2 {
  max-width: 24ch;
  margin-inline: auto;
}

.ideal-lede {
  color: var(--ink-soft);
  max-width: 56ch;
  margin: 0 auto var(--space-4);
}

.fit-grid {
  display: grid;
  gap: var(--space-3);
  text-align: left;
}

.fit-card {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #FFFFFF, #FBFAF6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3);
}

.fit-card-primary {
  border-color: rgba(30, 107, 79, 0.4);
  box-shadow: 0 0 0 1px rgba(30, 107, 79, 0.22), var(--shadow-soft);
}

.fit-badge {
  align-self: flex-start;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--green);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  margin: 0 0 0.7rem;
}

.fit-badge-alt {
  color: var(--ink);
  background: var(--bg-alt);
}

.fit-note {
  font-weight: 600;
  margin: 0 0 var(--space-2);
}

.fit-list {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin-bottom: var(--space-3);
}

.fit-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.45rem 0.9rem;
  box-shadow: 0 3px 10px rgba(35, 40, 35, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .fit-list li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fit-list li:hover {
    transform: none;
  }
}

.ideal-icon {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--green);
}

.ideal-icon svg {
  width: 20px;
  height: 20px;
}

.fit-foot {
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
  margin: auto 0 0;
}

@media (min-width: 560px) {
  .fit-list-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 880px) {
  /* The two cards hold genuinely different amounts of content, so they
     are top-aligned rather than stretched to a shared height — stretching
     would leave a large hole under the single restaurant pill. */
  .fit-grid {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   14. FAQ
   -------------------------------------------------------------------------- */
.faq-container {
  max-width: 780px;
}

.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 0.7rem;
  overflow: hidden;
}

.faq-item h3 {
  margin: 0;
}

.faq-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  padding: 1rem 1.3rem;
  cursor: pointer;
}

.faq-icon {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: var(--green);
  border-radius: 2px;
  transition: transform 0.25s ease;
}

.faq-icon::before {
  left: 0;
  top: 7px;
  width: 16px;
  height: 2px;
}

.faq-icon::after {
  left: 7px;
  top: 0;
  width: 2px;
  height: 16px;
}

.faq-trigger[aria-expanded="true"] .faq-icon::after {
  transform: rotate(90deg);
}

.faq-panel {
  padding: 0 1.3rem 1rem;
  color: var(--ink-soft);
}

.faq-panel p {
  margin: 0;
}

/* Collapsed only when JS is present (content stays readable without JS) */
.js .faq-panel {
  display: none;
}

.js .faq-item.open .faq-panel {
  display: block;
}

.anim .faq-item.open .faq-panel {
  animation: faq-open 0.3s ease;
}

@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   15. Request form
   -------------------------------------------------------------------------- */
.request-container {
  max-width: 760px;
}

.request-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow-soft);
}

.form-grid {
  display: grid;
  gap: var(--space-2) var(--space-3);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field label {
  font-weight: 600;
  font-size: 0.95rem;
}

.req {
  color: var(--green);
}

.optional {
  font-weight: 400;
  color: var(--ink-soft);
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  width: 100%;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 1px;
}

.field input.field-invalid,
.field select.field-invalid,
.field textarea.field-invalid {
  border-color: var(--bad);
}

.field textarea {
  resize: vertical;
  min-height: 80px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 500;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--green);
}

.consent-check {
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
}

/* Honeypot: removed from view but present for bots */
.hp-field {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  color: var(--bad);
  font-weight: 600;
  margin-top: var(--space-2);
}

.btn-submit {
  margin-top: var(--space-3);
  width: 100%;
  border: none;
}

.form-success {
  background: var(--green-tint);
  border: 1px solid var(--green);
  border-radius: var(--radius);
  padding: var(--space-3);
  margin-top: var(--space-2);
}

.form-success h3 {
  color: var(--green);
  margin-bottom: 0.3rem;
}

.form-success p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   16. Final CTA + footer
   -------------------------------------------------------------------------- */
.final-cta {
  background:
    radial-gradient(30rem 16rem at 80% 0%, rgba(30, 107, 79, 0.35), transparent 70%),
    var(--dark);
  color: var(--cream);
  text-align: center;
}

.final-cta .container {
  max-width: 620px;
}

.final-cta h2 {
  color: #FFFFFF;
}

.final-cta p {
  color: rgba(250, 248, 243, 0.8);
  margin-bottom: var(--space-3);
}

.site-footer {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  padding-block: var(--space-4) var(--space-3);
}

.footer-grid {
  display: grid;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}

.footer-wordmark {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.footer-wordmark strong {
  color: var(--green);
  font-weight: 700;
}

.footer-brand p:last-child {
  color: var(--ink-soft);
  font-size: 0.95rem;
  max-width: 32em;
  margin: 0;
}

.footer-nav ul {
  list-style: none;
  display: grid;
  gap: 0.5rem;
}

.footer-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}

.footer-nav a:hover {
  color: var(--green);
  text-decoration: underline;
}

.footer-bottom {
  display: grid;
  gap: 0.4rem;
  padding-top: var(--space-2);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.footer-bottom p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   17. Reveal motion (JS-gated)
   Base styles above are the complete final state. The .anim class is added
   by script.js only when prefers-reduced-motion allows it; without JS or
   with reduced motion nothing is hidden.
   -------------------------------------------------------------------------- */
.anim .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.anim .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.anim .reveal:nth-child(2) { transition-delay: 0.07s; }
.anim .reveal:nth-child(3) { transition-delay: 0.14s; }
.anim .reveal:nth-child(4) { transition-delay: 0.21s; }
.anim .reveal:nth-child(5) { transition-delay: 0.28s; }
.anim .reveal:nth-child(6) { transition-delay: 0.35s; }
.anim .reveal:nth-child(7) { transition-delay: 0.42s; }

/* --------------------------------------------------------------------------
   18. Desktop breakpoints
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  .problem-list {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid {
    grid-template-columns: 1fr 1fr;
  }

  .field-full {
    grid-column: 1 / -1;
  }

  .btn-submit {
    width: auto;
    justify-self: start;
  }

  .share-items-6 {
    grid-template-columns: repeat(3, 1fr);
  }

  .share-items-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 880px) {
  .hero-grid {
    grid-template-columns: 1fr 1.05fr;
    gap: var(--space-5);
  }

  .scene {
    min-height: 420px;
    gap: 1.1rem;
  }

  .gr-stand {
    width: 240px;
  }

  .gr-phone {
    width: 160px;
  }

  .gr-phone-wrap {
    --travel-x: 130px;
    --tap-x: -80px;
    --rest-x: 34px;
    --pop: 1.45;
  }

  .problem-list {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Steps become a horizontal flow with a drawing connector line */
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    padding-left: 0;
    padding-top: 3.6rem;
  }

  .steps::before,
  .steps::after {
    left: 8%;
    right: 8%;
    top: 1.25rem;
    bottom: auto;
  }

  .steps::before {
    border-left: none;
    border-top: 2px dashed var(--green);
  }

  .steps::after {
    width: auto;
    height: 2px;
    transform-origin: left;
  }

  .anim .steps::after {
    transform: scaleX(0);
  }

  .anim .steps.is-visible::after {
    transform: scaleX(1);
  }

  .step-num {
    left: 0;
    top: -3.6rem;
  }

  .share-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-5);
    align-items: center;
  }

  .manage-head {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .manage-head h2 {
    margin: 0 0 var(--space-2);
  }

  .stat-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .dash-split {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
  }

  /* Records switch from labeled cards to aligned columns. The per-cell
     labels stay in the accessibility tree; only their pixels go away. */
  .mrow-head {
    display: grid;
    align-items: end;
    gap: 0.8rem;
    padding: 0 0.8rem 0.5rem;
    margin-bottom: 0.55rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }

  .mrow-head,
  .mrows .mrow {
    grid-template-columns: 176px 96px minmax(0, 1fr) 152px 118px;
  }

  .mrow-head-emp,
  .mrows-emp .mrow {
    grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr));
  }

  .mrow-head-fu,
  .mrows-fu .mrow {
    grid-template-columns: minmax(0, 1.6fr) 148px 118px 120px;
  }

  .mrow {
    align-items: center;
    gap: 0.8rem;
  }

  .mcell {
    display: block;
  }

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

  /* equal columns so both product cards and media frames match */
  .product-grid {
    gap: var(--space-4);
  }

  .footer-grid {
    grid-template-columns: 1.5fr 1fr;
  }

  .footer-bottom {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }
}

/* Narrow screens: the labels no longer have room to float beside the
   card, so they flow as a clearly grouped chip row beneath it */
@media (max-width: 719px) {
  .stage-inner {
    display: block;
    text-align: center;
  }

  .stage-anchor {
    width: auto;
  }

  .stage-card {
    width: min(376px, 88vw);
    margin: 0 auto var(--space-2);
  }

  .callout {
    position: static;
    margin: 0.3rem 0.15rem 0;
  }

  .callout::after {
    display: none;
  }
}

/* Two-column customization layout only where the annotated card plus
   its side labels genuinely fit next to the setup panel */
@media (min-width: 1100px) {
  .customize-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-4);
    align-items: center;
  }
}