/* GENERATED by tools/rewrite-mirror.py: grove.tax homepage styles. */
/* ─────────────────────────────────────────────────────────────
   Grove Design System — Colors & Type
   Source of truth: Brand-Design-Guidelines (Figma) + Communication
   guidelines. Two product surfaces share these tokens:
     - Preparer experience (NEPA Tax Associates / professional tax)
     - Client experience (clients of preparer firms)
   ───────────────────────────────────────────────────────────── */

/* ── Fonts ──────────────────────────────────────────────────── */
/* GT Sectra + GT Sectra Display are vendored under /fonts and loaded
   by relative URL — CSS resolves url(...) against THIS stylesheet's
   location, so this works no matter how deep the consumer page is.
   Geist + Geist Mono come from Google Fonts. */
@font-face { font-family: "Geist"; src: url("fonts/Geist-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("fonts/Geist-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("fonts/GeistMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

@font-face { font-family: "GT Sectra"; src: url("fonts/GT-Sectra-Book.ttf") format("truetype"); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Sectra"; src: url("fonts/GT-Sectra-Book-Italic.ttf") format("truetype"); font-weight: 350; font-style: italic; font-display: swap; }
@font-face { font-family: "GT Sectra"; src: url("fonts/GT-Sectra-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Sectra"; src: url("fonts/GT-Sectra-Regular-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "GT Sectra"; src: url("fonts/GT-Sectra-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Sectra"; src: url("fonts/GT-Sectra-Medium-Italic.ttf") format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "GT Sectra"; src: url("fonts/GT-Sectra-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Sectra"; src: url("fonts/GT-Sectra-Bold-Italic.ttf") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }

@font-face { font-family: "GT Sectra Display"; src: url("fonts/GT-Sectra-Display-Light.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Sectra Display"; src: url("fonts/GT-Sectra-Display-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Sectra Display"; src: url("fonts/GT-Sectra-Display-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Sectra Display"; src: url("fonts/GT-Sectra-Display-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "GT Sectra Display"; src: url("fonts/GT-Sectra-Display-Super.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  /* ── Brand color scale: "Forest Steps" — 0 to 10
     Anchored at three named hues; intermediate steps interpolate. */
  --grove-0:    #FFFFFF;  /* Trusted Paper      */
  --grove-05:   #F2F6F1;
  --grove-1:    #E4ECDF;
  --grove-15:   #D5E0D0;
  --grove-2:    #AECBAC;  /* Clear Understory   */
  --grove-3:    #8DB39B;
  --grove-4:    #6B9C89;
  --grove-5:    #4A7F73;
  --grove-6:    #2E695B;
  --grove-7:    #1E5B4B;
  --grove-8:    #014437;  /* Deep Canopy        */
  --grove-85:   #013228;
  --grove-9:    #01211B;
  --grove-95:   #01110E;
  --grove-10:   #0A0A0A;

  /* ── Surface (background) tokens ───────────────────────────── */
  --bg-app:        #F6F5F1;  /* warm paper — preparer canvas      */
  --bg-elev:       #FFFFFF;  /* cards, panels                     */
  --bg-subtle:     #EFEFEF;  /* deep app shell                    */
  --bg-canopy:     var(--grove-8);    /* dark sections, top-nav   */
  --bg-canopy-hi:  #1E5B4B;           /* nav hover, pressed       */
  --bg-understory: var(--grove-2);    /* feature panels, hero     */
  --bg-understory-hi: #C0D1BE;        /* hover on understory      */

  /* ── Foreground (text/icon) tokens ─────────────────────────── */
  --fg-1:        #01110E;  /* primary text on light              */
  --fg-2:        #212121;  /* near-primary                       */
  --fg-3:        #525252;  /* secondary                          */
  --fg-4:        #737373;  /* tertiary, captions                 */
  --fg-5:        #A3A3A3;  /* disabled                           */
  --fg-on-canopy:    #FFFFFF;
  --fg-on-canopy-2:  #C2C2C2;
  --fg-on-understory: var(--grove-8);

  /* ── Borders & dividers ────────────────────────────────────── */
  --border-1:    #E5E5E5;
  --border-2:    #DDDDDD;
  --border-3:    #EFEFEF;
  --border-canopy: #1E5B4B;

  /* ── Semantic / state colors (paired bg/fg) ────────────────── */
  --warn-bg:    #FEF3C7;  --warn-fg:    #B45309;
  --info-bg:    #DBEAFE;  --info-fg:    #1D4ED8;
  --success-bg: #D1FAE5;  --success-fg: #047857;
  --danger-bg:  #FEE2E2;  --danger-fg:  #B91C1C;

  /* ── Type families ─────────────────────────────────────────── */
  --ff-serif:        "GT Sectra", "Source Serif 4", Georgia, serif;
  --ff-display:      "GT Sectra Display", "GT Sectra", Georgia, serif;
  --ff-sans:         "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ff-mono:         "Geist Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Type scale (semantic) ─────────────────────────────────── */
  /* Display — for marketing & section openers, GT Sectra Display */
  --t-display-1:  900 clamp(72px, 12vw, 216px) / 1.0   var(--ff-display);
  --t-display-2:  300 clamp(56px,  9vw, 148px) / 1.05  var(--ff-display);
  --t-hero:       400 clamp(40px,  6vw,  96px) / 1.05  var(--ff-serif);

  /* Editorial / serif — UI section heads, page titles */
  --t-h1:         500 36px / 1.1   var(--ff-serif);
  --t-h2:         500 28px / 1.1   var(--ff-serif);
  --t-h3:         500 24px / 1.15  var(--ff-serif);
  --t-h4:         500 20px / 1.25  var(--ff-serif);
  --t-quote:      400 italic 24px / 1.3 var(--ff-serif);

  /* UI / sans — body, controls */
  --t-body:       400 16px / 1.55  var(--ff-sans);
  --t-body-lg:    400 17px / 1.6   var(--ff-sans);
  --t-body-sm:    400 14px / 1.5   var(--ff-sans);
  --t-label:      500 15px / 1.25  var(--ff-sans);
  --t-label-sm:   500 13px / 1.2   var(--ff-sans);
  --t-button:     500 15px / 1.0   var(--ff-sans);
  --t-caption:    400 13px / 1.4   var(--ff-sans);

  /* Mono — eyebrows, code, system labels (UPPERCASE convention) */
  --t-eyebrow:    600 11px / 1.1 var(--ff-mono);
  --t-mono:       400 13px / 1.4 var(--ff-mono);

  /* ── Spacing scale (4-pt grid) ─────────────────────────────── */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 48px;
  --sp-10: 64px;
  --sp-11: 80px;
  --sp-12: 120px;

  /* ── Radii — Grove favors very tight rounding (2-4px) ───────── */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-pill: 999px;

  /* ── Shadows — soft, paper-like elevation ──────────────────── */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.04), 0 1px 0 rgba(0,0,0,0.02);
  --shadow-2: 0 2px 4px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-3: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-canopy: 0 12px 40px rgba(1,68,55,0.18);

  /* ── Motion ────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.3, 0, 0.1, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ── Convenience: typographic primitives ─────────────────────── */
.gv-display-1 { font: var(--t-display-1); letter-spacing: -0.02em; }
.gv-display-2 { font: var(--t-display-2); letter-spacing: -0.01em; }
.gv-hero      { font: var(--t-hero); letter-spacing: -0.01em; }
.gv-h1        { font: var(--t-h1); letter-spacing: -0.005em; color: var(--fg-1); }
.gv-h2        { font: var(--t-h2); letter-spacing: -0.005em; color: var(--fg-1); }
.gv-h3        { font: var(--t-h3); color: var(--fg-1); }
.gv-h4        { font: var(--t-h4); color: var(--fg-1); }
.gv-quote     { font: var(--t-quote); color: var(--fg-1); }
.gv-body      { font: var(--t-body); color: var(--fg-2); }
.gv-body-lg   { font: var(--t-body-lg); color: var(--fg-2); }
.gv-body-sm   { font: var(--t-body-sm); color: var(--fg-3); }
.gv-label     { font: var(--t-label); color: var(--fg-1); }
.gv-caption   { font: var(--t-caption); color: var(--fg-4); }
.gv-mono      { font: var(--t-mono); color: var(--fg-3); }
.gv-eyebrow   { font: var(--t-eyebrow); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; }

/* ─────────── Grove site CSS — shared by index.html + pricing.html ─────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-app);
  color: var(--fg-1);
  font: var(--t-body-lg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--grove-7); }

.g-h1 { font: var(--t-h1); font-size: clamp(36px, 4.5vw, 56px); line-height: 1.05; letter-spacing: -0.012em; margin: 0; color: var(--fg-1); }
.g-h2 { font: var(--t-h2); margin: 0; }
.g-h3 { font: var(--t-h3); margin: 0; }
.g-eyebrow { font: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-3); display: inline-block; }
.g-mono { font: var(--t-mono); color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.08em; font-size: 11px; }

.muted { color: var(--fg-4); }
.lead { font-size: 19px; line-height: 1.55; color: var(--fg-2); }

/* ─────────── Buttons ─────────── */
.g-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font: var(--t-button); letter-spacing: 0.005em;
  padding: 12px 18px; border-radius: var(--r-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.g-btn--sm { padding: 8px 14px; font-size: 14px; }
.g-btn--primary { background: var(--grove-10); color: #fff; }
.g-btn--primary:hover { background: var(--grove-95); }
.g-btn--ghost { background: transparent; color: var(--fg-1); border-color: var(--border-2); }
.g-btn--ghost:hover { background: rgba(0,0,0,0.04); }
.g-btn--ghost--canopy { color: #fff; border-color: rgba(255,255,255,0.4); }
.g-btn--ghost--canopy:hover { background: rgba(255,255,255,0.08); }
.g-btn--paper { background: #fff; color: var(--grove-8); }
.g-btn--paper:hover { background: var(--grove-05); }

/* ─────────── Top nav ─────────── */
.g-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246,245,241,0.72);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: padding var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.g-nav[data-scrolled="true"] {
  background: rgba(246,245,241,0.92);
  border-bottom-color: var(--border-1);
  box-shadow: 0 1px 0 rgba(1,33,27,0.04), 0 8px 24px -16px rgba(1,33,27,0.08);
}
.g-nav__inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: flex-end; gap: 12px;
  padding: 18px 28px;
  position: relative;
  transition: padding var(--dur-base) var(--ease-standard);
}
/* keep the header height constant: shrinking it on scroll fights Chrome scroll anchoring and jitters */
.g-nav { overflow-anchor: none; }

.g-nav__brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.g-nav__brand:hover { opacity: 0.85; }
.g-nav__mark { height: 28px; width: auto; display: block; }
.g-nav__wordmark { height: 20px; width: auto; display: block; }

.g-nav__links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 24px;
}
.g-nav__links > a,
.g-nav__links > .g-nav__item > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  font: 500 15px/1 var(--ff-sans);
  color: var(--fg-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.g-nav__links > a:hover,
.g-nav__links > .g-nav__item > button:hover,
.g-nav__links > .g-nav__item[data-open="true"] > button {
  background: rgba(1,68,55,0.06);
  color: var(--grove-8);
}
.g-nav__links > a[aria-current="page"] {
  color: var(--grove-8);
  font-weight: 500;
}
.g-nav__links > a[aria-current="page"]::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--grove-8);
  margin-right: 2px;
}
.g-nav__caret {
  font-size: 10px;
  margin-left: 2px;
  transition: transform var(--dur-fast) var(--ease-standard);
  color: var(--fg-4);
}
.g-nav__item[data-open="true"] .g-nav__caret { transform: rotate(180deg); }

/* Mega-menu dropdown */
.g-nav__item { }
.g-nav__mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 28px;
  right: 28px;
  transform: translateY(-6px);
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  box-shadow: 0 32px 80px -16px rgba(1,33,27,0.22),
              0 12px 24px -8px rgba(1,33,27,0.10);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.g-nav__item[data-open="true"] .g-nav__mega {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.g-nav__mega::before { display: none; }
.g-nav__mega-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
}

/* Left rail — dark canopy panel showing the workflow */
.g-nav__mega-rail {
  background: var(--grove-9);
  color: #fff;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  overflow: hidden;
}
.g-nav__mega-rail::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at top right, rgba(174,203,172,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.g-nav__mega-rail-eyebrow {
  font: 600 11px/1 var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--grove-2);
  position: relative;
  z-index: 1;
}
.g-nav__mega-rail-title {
  font: var(--t-h3);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}
.g-nav__mega-rail-title em {
  font-style: italic;
  color: var(--grove-2);
}
.g-nav__mega-rail-flow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.g-nav__mega-rail-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 500 13px/1.2 var(--ff-sans);
  color: rgba(255,255,255,0.75);
}
.g-nav__mega-rail-step-num {
  width: 22px; height: 22px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  color: var(--grove-2);
  display: grid;
  place-items: center;
  font: 600 10px/1 var(--ff-mono);
  flex-shrink: 0;
}
.g-nav__mega-rail-arrow {
  margin-left: auto;
  color: rgba(255,255,255,0.3);
  font-size: 12px;
}

/* Right column */
.g-nav__mega-cols {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
}
.g-nav__mega-section-eyebrow {
  font: 600 10px/1 var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-4);
  margin-bottom: 12px;
}
.g-nav__mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  flex: 1;
}
.g-nav__mega-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  padding: 12px 12px 12px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--fg-1);
  align-items: start;
  position: relative;
  transition: background var(--dur-fast) var(--ease-standard);
}
.g-nav__mega-item:hover {
  background: var(--grove-05);
}
.g-nav__mega-item:hover .g-nav__mega-icon {
  background: var(--grove-8);
  color: #fff;
}
.g-nav__mega-item:hover .g-nav__mega-arrow {
  opacity: 1;
  transform: translateX(2px);
  color: var(--grove-8);
}
.g-nav__mega-icon {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: var(--grove-1);
  color: var(--grove-8);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.g-nav__mega-num {
  font: 600 10px/1 var(--ff-mono);
  color: var(--grove-6);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.g-nav__mega-title {
  font: 500 16px/1.25 var(--ff-sans);
  color: var(--grove-9);
  margin: 0 0 4px;
  letter-spacing: -0.005em;
}
.g-nav__mega-desc {
  font: 400 13.5px/1.45 var(--ff-sans);
  color: var(--fg-3);
  margin: 0;
}
.g-nav__mega-arrow {
  font-size: 14px;
  color: var(--fg-5);
  align-self: center;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

.g-nav__mega-foot {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 14px 24px;
  background: var(--bg-app);
  border-top: 1px solid var(--border-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.g-nav__mega-foot-meta {
  font: 400 13.5px/1.4 var(--ff-sans);
  color: var(--fg-3);
}
.g-nav__mega-foot-meta strong {
  color: var(--grove-9);
  font-weight: 500;
  font-family: var(--ff-serif);
}
.g-nav__mega-foot-cta {
  font: 500 14px/1 var(--ff-sans);
  color: var(--grove-8);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  padding: 8px 14px;
  border-radius: 999px;
  transition: background var(--dur-fast) var(--ease-standard);
}
.g-nav__mega-foot-cta:hover {
  background: var(--grove-1);
}
.g-nav__mega-foot-cta i { font-size: 13px; transition: transform var(--dur-fast) var(--ease-standard); }
.g-nav__mega-foot-cta:hover i { transform: translateX(2px); }

.g-nav__cta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.g-nav__cta a { white-space: nowrap; }

/* ─────────── Hero ─────────── */
.hero {
  position: relative; overflow: hidden;
  padding: 96px 28px 72px;
}
.hero__inner {
  max-width: 1100px; margin: 0 auto;
  text-align: center; position: relative; z-index: 2;
}
.hero__eyebrow { margin-bottom: 28px; }
.g-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--grove-8);
  border: 1px solid var(--border-1);
  padding: 6px 14px; border-radius: var(--r-pill);
  font: var(--t-label-sm);
}
.g-pill i { color: var(--grove-7); }
/* Small "Free this summer" tag that pairs with stage eyebrows and mega-nav items.
   White pill works on paper, understory, and canopy (dark) backgrounds. */
.g-launch-tag {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 10px;
  padding: 3px 9px 4px;
  border-radius: 999px;
  background: #fff; color: var(--grove-8);
  border: 1px solid var(--border-1);
  font: 600 9px/1 var(--ff-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  vertical-align: middle;
  white-space: nowrap;
}
.g-launch-tag i { font-size: 10px; color: var(--grove-7); }
/* Hero launch-offer banner — sits above the H1 as the top eyebrow of the hero.
   Dark canopy pill with a bright understory badge keeps the offer visible without
   shouting over the H1's massive type. */
.hero__offer {
  margin: 0 auto 36px; width: fit-content; max-width: 820px;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 10px 18px 10px 10px; border-radius: 999px;
  background: var(--grove-8); color: #fff;
  border: 1px solid var(--grove-8);
  font: 600 14px/1.3 var(--ff-sans); letter-spacing: -0.005em;
  text-decoration: none;
  box-shadow: 0 12px 28px -18px rgba(1,68,55,0.45);
  transition: transform 180ms cubic-bezier(.16,1,.3,1), background 180ms, box-shadow 180ms;
  animation: heroIn 1800ms cubic-bezier(.16,1,.3,1) both;
  animation-delay: 100ms;
}
.hero__offer:hover { background: var(--grove-95); transform: translateY(-1px); box-shadow: 0 16px 32px -18px rgba(1,68,55,0.55); }
.hero__offer-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--grove-2); color: var(--grove-9);
  padding: 6px 12px; border-radius: 999px;
  font: 700 10px/1 var(--ff-mono);
  text-transform: uppercase; letter-spacing: 0.14em;
  white-space: nowrap; flex-shrink: 0;
}
.hero__offer-badge i { font-size: 11px; color: var(--grove-9); }
.hero__offer-text { color: rgba(255,255,255,0.92); }
.hero__offer-text strong { color: #fff; font-weight: 700; }
.hero__offer-cta {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--grove-2); font-weight: 600;
  white-space: nowrap; flex-shrink: 0;
}
.hero__offer-cta i { font-size: 13px; transition: transform 180ms cubic-bezier(.16,1,.3,1); }
.hero__offer:hover .hero__offer-cta i { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) {
  .hero__offer { opacity: 1; transform: none; animation: none; }
}
@media (max-width: 768px) {
  .hero__offer {
    width: 100%; max-width: 520px;
    flex-wrap: wrap; justify-content: center; text-align: center;
    gap: 6px 8px; padding: 10px 14px;
    border-radius: 18px;
    font-size: 12px; line-height: 1.35;
  }
  .hero__offer-badge { font-size: 9px; padding: 4px 9px; }
  .hero__offer-text { flex-basis: 100%; }
  .hero__offer-cta { font-size: 12px; }
}
.hero__title {
  font: var(--t-display-2);
  font-family: var(--ff-display);
  font-weight: 400;
  font-size: clamp(48px, 7.5vw, 108px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--grove-9);
}
.hero__sub {
  font: var(--t-body-lg);
  font-size: 19px;
  color: var(--fg-3);
  max-width: 640px; margin: 0 auto 36px;
  line-height: 1.55;
}
.hero__ctas { display: inline-flex; gap: 12px; }
.hero__credit { margin-top: 72px; }
/* First-load reveal — stagger hero copy in so the page lands with intent */
.hero__title, .hero__sub, .hero__ctas {
  animation: heroIn 1800ms cubic-bezier(.16,1,.3,1) both;
}
.hero__title  { animation-delay:  200ms; }
.hero__sub    { animation-delay:  600ms; }
.hero__ctas   { animation-delay: 1000ms; }
.hero__credit { animation: creditIn 800ms cubic-bezier(.16,1,.3,1) both; animation-delay: 1250ms; }
@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: none; }
}
/* The credit reel sits low in the hero — the shared 28px slide reads as a "bump"
   on load, so it gets a shorter fade with just a hair of lift. */
@keyframes creditIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__title, .hero__sub, .hero__ctas, .hero__credit {
    opacity: 1; transform: none; animation: none;
  }
}
/* Marquee container — fades at the edges so logos enter/exit instead of popping */
.hero__credit-marquee {
  overflow: hidden;
  margin-top: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
/* Track holds two identical rows; -50% translate slides exactly one row width */
.hero__credit-track {
  display: flex; width: max-content;
  animation: credit-scroll 28s linear infinite;
}
.hero__credit-marquee:hover .hero__credit-track { animation-play-state: paused; }
.hero__credit-row {
  display: flex; align-items: center;
  gap: 56px; padding-right: 56px;
  flex-shrink: 0;
}
@keyframes credit-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Reduced motion: no scroll. Drop the clip and edge fade and wrap the row so
   every logo stays visible instead of being cropped off-screen by the overflow. */
@media (prefers-reduced-motion: reduce) {
  .hero__credit-marquee { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .hero__credit-track { animation: none; width: 100%; }
  .hero__credit-row { flex-wrap: wrap; justify-content: center; row-gap: 14px; padding-right: 0; width: 100%; }
  .hero__credit-row[aria-hidden="true"] { display: none; }
}
.credit-logo {
  height: 22px; width: auto; display: inline-block;
  /* grayscale keeps each logo's internal detail (vs brightness(0), which flattens
     marks like Griner's monogram to a solid blob); brightness pulls the lighter
     logos down so they stay visible and the row reads as one weight. */
  filter: grayscale(1) brightness(0.45);
  opacity: 0.85;
  transition: filter 220ms ease, opacity 220ms ease;
  flex-shrink: 0;
}
.credit-logo:hover { filter: none; opacity: 1; }
.credit-logo--tr { height: 24px; }
/* ATOMS uses a heavy bold wordmark — shrink so its visual weight matches the rest */
.credit-logo--atoms { height: 16px; }
.hero__motif {
  position: absolute; inset: auto 0 -1px 0;
  height: 280px; opacity: 0.10; pointer-events: none;
}
.hero__motif svg { width: 100%; height: 100%; }

/* ─────────── App preview ─────────── */
.preview { padding: 0 28px 96px; }
.preview__frame {
  max-width: 1200px; margin: 0 auto;
  background: #fff; border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  border: 1px solid var(--border-1);
  overflow: hidden;
}
.preview__chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-bottom: 1px solid var(--border-1);
  background: var(--bg-app);
}
.preview__chrome-mac { display: inline-flex; align-items: center; gap: 8px; }
.preview__chrome-mac .dot { width: 10px; height: 10px; border-radius: 50%; background: #E5E5E5; }
.preview__chrome-mac .dot:nth-child(1) { background: #FCA5A5; }
.preview__chrome-mac .dot:nth-child(2) { background: #FCD34D; }
.preview__chrome-mac .dot:nth-child(3) { background: #86EFAC; }
.preview__url { font: var(--t-mono); font-size: 11px; color: var(--fg-4); margin-left: 12px; flex: 1; }
.preview__chrome-win {
  display: none; align-items: stretch;
  margin: -10px -14px -10px auto;
  align-self: stretch;
}
.preview__chrome-win .win-ctrl {
  width: 44px; background: transparent; border: 0; padding: 0; cursor: default;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--fg-2);
  transition: background 120ms ease, color 120ms ease;
}
.preview__chrome-win .win-ctrl__icon {
  position: relative;
  width: 10px;
  height: 10px;
}
.preview__chrome-win .win-ctrl--min .win-ctrl__icon::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 6px;
  border-top: 1px solid currentColor;
}
.preview__chrome-win .win-ctrl--max .win-ctrl__icon {
  border: 1px solid currentColor;
}
.preview__chrome-win .win-ctrl--close .win-ctrl__icon::before,
.preview__chrome-win .win-ctrl--close .win-ctrl__icon::after {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 5px;
  border-top: 1px solid currentColor;
}
.preview__chrome-win .win-ctrl--close .win-ctrl__icon::before { transform: rotate(45deg); }
.preview__chrome-win .win-ctrl--close .win-ctrl__icon::after { transform: rotate(-45deg); }
.preview__chrome-win .win-ctrl:hover { background: rgba(0,0,0,0.05); }
.preview__chrome-win .win-ctrl--close:hover { background: #E81123; color: #fff; }
:root[data-os="win"] .preview__chrome-mac { display: none; }
:root[data-os="win"] .preview__chrome-win { display: inline-flex; }
:root[data-os="win"] .preview__url { margin-left: 0; }
.preview__body { display: grid; grid-template-columns: 240px 1fr; min-height: 540px; }

/* Caption under the preview — fades out once the user clicks any tab */
.preview__hint {
  max-width: 1200px; margin: 18px auto 0;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 13px; color: var(--fg-4);
  transition: opacity .3s ease;
}
.preview__hint i { color: var(--grove-7); font-size: 14px; }
.preview__hint kbd {
  font-family: var(--ff-mono); font-size: 11px;
  padding: 2px 6px; border-radius: 4px;
  background: var(--bg-app); color: var(--fg-3);
  border: 1px solid var(--border-1);
}
.preview__hint--hidden { opacity: 0; pointer-events: none; }

.pv-side {
  border-right: 1px solid var(--border-1);
  background: #fff; padding: 16px;
  display: flex; flex-direction: column; gap: 18px;
}
.pv-side__brand { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--border-1); }
.pv-side__brand img {
  width: 22px;
  height: 35px;
  object-fit: contain;
  flex: 0 0 22px;
}
.pv-side__firm { font: var(--t-h4); font-size: 15px; color: var(--grove-8); }
.pv-side__sub { font: var(--t-caption); color: var(--fg-4); }
.pv-side__group ul { list-style: none; margin: 8px 0 0; padding: 0; }
.pv-side__group li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  font: var(--t-body); color: var(--fg-2); font-size: 13px;
  cursor: pointer;
}
.pv-side__group li:hover { background: var(--grove-05); }
.pv-side__group li.active { background: var(--grove-1); color: var(--grove-9); font-weight: 500; }
.pv-side__group li .av {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--grove-2); color: var(--grove-9);
  font-size: 10px; font-weight: 600;
  display: grid; place-items: center;
}
.pv-side__group li .meta { margin-left: auto; font-size: 11px; color: var(--fg-4); }

.pv-main { padding: 22px 26px; display: flex; flex-direction: column; gap: 18px; }
.pv-main__head { display: flex; align-items: end; justify-content: space-between; }
.pv-main__head-actions { display: flex; gap: 8px; align-items: center; }
.g-status {
  display: inline-flex; align-items: center; gap: 6px;
  font: var(--t-label-sm); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: var(--r-xs);
}
.g-status--warn { background: var(--warn-bg); color: var(--warn-fg); }
.g-status--ok { background: var(--success-bg); color: var(--success-fg); }
.g-status--info { background: var(--info-bg); color: var(--info-fg); }

.pv-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border-1); position: relative; }
.pv-tabs a { padding: 10px 0; font: var(--t-label); font-size: 13px; color: var(--fg-4); cursor: pointer; border-bottom: 2px solid transparent; position: relative; }
.pv-tabs a.active { color: var(--grove-8); border-bottom-color: var(--grove-8); }
/* Auto-advance progress underline — sits on top of the static border on the active tab */
.pv-tabs a.active::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  height: 2px; width: var(--p, 0%);
  background: var(--grove-9);
  pointer-events: none;
}
.pv-tabs[data-paused="true"] a.active::after { display: none; }
/* Soft pulse on the next-up tab — shows the UI is alive without a moving cursor.
   Uses ::before so it stacks below the active tab's progress bar (::after). */
.pv-tabs a[data-next-up]::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 1px;
  background: var(--grove-8);
  pointer-events: none;
  animation: pv-tab-pulse 1800ms ease-in-out infinite;
}
@keyframes pv-tab-pulse {
  0%, 100% { opacity: 0.18; }
  50%      { opacity: 0.65; }
}
.pv-tabs[data-paused="true"] a[data-next-up]::before { display: none; }
@media (prefers-reduced-motion: reduce) {
  .pv-tabs a[data-next-up]::before { display: none; }
}

.pv-checklist { border: 1px solid var(--border-1); border-radius: var(--r-sm); overflow: hidden; }
.pv-checklist__row {
  display: grid; grid-template-columns: 2fr 1fr 1fr 80px;
  align-items: center; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--border-3);
  font-size: 13px;
}
.pv-checklist__row:first-of-type { border-top: 0; }
.pv-checklist__row span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.pv-checklist__row i { color: var(--fg-4); }
.pv-checklist__head { background: var(--bg-app); font: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-3); padding: 8px 14px; }
.pv-checklist__group { background: var(--grove-05); padding: 6px 14px; font: var(--t-eyebrow); color: var(--grove-8); text-transform: uppercase; letter-spacing: 0.1em; border-top: 1px solid var(--border-3); }

/* ─────────── Tab panels ─────────── */
.pv-panel { display: none; animation: pvFade .25s ease; }
.pv-panel.active { display: block; }
.pv-tabs a { transition: color .15s ease, border-color .15s ease; }
.pv-tabs a:hover { color: var(--fg-2); }
@keyframes pvFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Workpapers */
.pv-wp { display: grid; grid-template-columns: 1fr 1.1fr; gap: 16px; }
.pv-wp__list { display: flex; flex-direction: column; gap: 8px; }
.pv-wp__item {
  display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--border-1); border-radius: var(--r-sm);
  background: #fff; font-size: 13px;
}
.pv-wp__item i { font-size: 20px; color: var(--grove-7); }
.pv-wp__item--ghost { border-style: dashed; background: transparent; color: var(--fg-4); }
.pv-wp__item--ghost i { color: var(--fg-4); }
.pv-wp__name { font-weight: 500; color: var(--fg-1); }
.pv-wp__meta { font-size: 11px; color: var(--fg-4); margin-top: 2px; }
.pv-wp__preview { border: 1px solid var(--border-1); border-radius: var(--r-sm); background: var(--bg-app); display: flex; flex-direction: column; }
.pv-wp__preview-head { padding: 10px 14px; border-bottom: 1px solid var(--border-1); display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.pv-wp__preview-head i { color: var(--grove-7); margin-right: 6px; }
.pv-wp__page { padding: 14px 16px; font-size: 12px; display: flex; flex-direction: column; gap: 6px; }
.pv-wp__page-row { display: flex; justify-content: space-between; gap: 12px; }
.pv-wp__page-row mark { background: oklch(0.94 0.05 95); color: var(--fg-1); padding: 1px 6px; border-radius: 3px; font-weight: 500; }
.pv-wp__page-divider { height: 1px; background: var(--border-1); margin: 4px 0; }

/* Questionnaire */
.pv-q { display: flex; flex-direction: column; gap: 10px; }
.pv-q__progress { display: flex; align-items: center; gap: 12px; padding: 4px 0 8px; font-size: 12px; }
.pv-q__bar { flex: 1; height: 6px; background: var(--bg-app); border-radius: 3px; overflow: hidden; }
.pv-q__fill { height: 100%; background: var(--grove-7); border-radius: 3px; transition: width .4s ease; }
.pv-q__item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-1); border-radius: var(--r-sm); background: #fff; }
.pv-q__item > i { font-size: 20px; color: var(--fg-4); margin-top: 1px; }
.pv-q__item--done > i { color: var(--ok-fg); }
.pv-q__item--active { border-color: var(--grove-7); background: var(--grove-05); }
.pv-q__item--active > i { color: var(--grove-8); }
.pv-q__q { font-size: 13px; font-weight: 500; color: var(--fg-1); }
.pv-q__a { font-size: 12px; color: var(--fg-3); margin-top: 4px; }
.pv-q__chips { display: flex; gap: 6px; margin-top: 8px; }
.pv-q__chip { padding: 4px 12px; border: 1px solid var(--border-2); border-radius: 999px; font-size: 12px; background: #fff; cursor: pointer; }
.pv-q__chip--on { background: var(--grove-8); color: #fff; border-color: var(--grove-8); }
.pv-q__hint { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 11px; color: var(--grove-8); background: oklch(0.94 0.04 145); padding: 6px 10px; border-radius: 4px; }
.pv-q__hint i { color: var(--grove-8); }

/* Prior year */
.pv-py { display: flex; flex-direction: column; gap: 14px; }
.pv-py__head { display: flex; justify-content: space-between; align-items: end; }
.pv-py__title { font: var(--t-h3); font-family: var(--ff-serif); font-weight: 500; margin-top: 4px; }
.pv-py__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pv-py__cell { padding: 14px; border: 1px solid var(--border-1); border-radius: var(--r-sm); background: #fff; }
.pv-py__cell .muted { font-size: 11px; }
.pv-py__num { font: var(--t-h2); font-family: var(--ff-display); font-weight: 400; font-size: 28px; color: var(--fg-1); margin: 4px 0 6px; letter-spacing: -0.01em; }
.pv-py__delta { font-size: 11px; display: inline-flex; align-items: center; gap: 3px; color: var(--fg-3); }
.pv-py__delta--up { color: var(--grove-8); }
.pv-py__notes { display: flex; flex-direction: column; gap: 6px; }
.pv-py__note { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 10px 14px; border: 1px solid var(--border-1); border-radius: var(--r-sm); background: var(--bg-app); font-size: 12px; }
.pv-py__note i { color: var(--grove-7); font-size: 16px; margin-top: 1px; }
.pv-py__note strong { color: var(--fg-1); font-weight: 500; }

/* Delivery */
.pv-del { display: flex; flex-direction: column; position: relative; }
.pv-del__step { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 10px 0; position: relative; }
.pv-del__step:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 32px; bottom: -10px; width: 2px;
  background: var(--border-2);
}
.pv-del__step--done:not(:last-child)::before { background: var(--grove-7); }
.pv-del__dot {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border-2);
  background: #fff; display: grid; place-items: center; font-size: 14px; color: var(--fg-4);
  position: relative; z-index: 1;
}
.pv-del__step--done .pv-del__dot { background: var(--grove-7); border-color: var(--grove-7); color: #fff; }
.pv-del__step--active .pv-del__dot { background: #fff; border-color: var(--grove-8); color: var(--grove-8); }
.pv-del__title { font-size: 13px; font-weight: 500; color: var(--fg-1); margin-top: 4px; }
.pv-del__step .muted { font-size: 11px; margin-top: 2px; }
.pv-del__actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ─────────── Trusted-by firms (hero reel) ─────────── */
/* Firm wordmarks stand in for firms with no usable logo file. They ride in the
   hero marquee next to .credit-logo images, set in Grove's own display serif. */
.firms__wordmark {
  font-family: var(--ff-display);
  font-weight: 500; font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--fg-2);
  white-space: nowrap; flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 220ms ease, color 220ms ease;
}
/* Image logos reveal full color on hover; wordmarks have no color to reveal,
   so they warm to Grove green — the same "comes alive" cue. */
.firms__wordmark:hover { opacity: 1; color: var(--grove-7); }
/* Customer logos carry the hero — run them a touch larger than the team-credit row */
.hero__credit-track--firms .credit-logo { height: 26px; }
/* 14-firm reel runs wider than the 8-logo team row — slow the scroll so the pace matches */
.hero__credit-track--firms { animation-duration: 50s; }

/* ─────────── Stats ─────────── */
.stats { background: #fff; border-block: 1px solid var(--border-1); padding: 80px 28px; }
.stats__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 56px; }
.stats__num { font: var(--t-display-2); font-family: var(--ff-display); font-weight: 300; font-size: 96px; line-height: 1; color: var(--grove-8); letter-spacing: -0.03em; }
.stats article h3 { font: var(--t-h3); margin: 8px 0 12px; }
.stats article p { color: var(--fg-3); font-size: 17px; line-height: 1.55; max-width: 36ch; }

/* ─────────── Feature sections ─────────── */
.feature { padding: 120px 28px; }
.feature__inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 5fr 6fr; gap: 80px; align-items: center;
  min-width: 0;
}
.feature__inner--reverse > .feature__copy { order: 2; }
.feature__copy,
.feature__art { min-width: 0; }
.feature__copy h2 { margin: 14px 0 18px; }
.feature__copy .lead { margin-bottom: 16px; }
.feature__copy p { color: var(--fg-3); font-size: 16px; line-height: 1.6; }
.feature__bullets { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; }
.feature__bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--fg-2); }
.feature__bullets li i { color: var(--grove-6); margin-top: 2px; }
.feature__mobile-ctas { display: none; }

.feature--paper { background: var(--bg-app); }
.feature--understory { background: var(--grove-1); }
.feature--understory .g-eyebrow,
.feature--understory .feature__copy p,
.feature--understory .feature__copy .lead { color: var(--grove-8); opacity: 0.8; }
.feature--understory .g-h1 { color: var(--grove-9); }

.feature--canopy { background: var(--grove-8); color: #fff; position: relative; overflow: hidden; }
.feature--canopy::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 32px);
  pointer-events: none;
}
.feature--canopy .g-h1 { color: #fff; }
.feature--canopy .g-eyebrow { color: var(--grove-2); }
.feature--canopy .feature__copy p,
.feature--canopy .feature__copy .lead { color: rgba(255,255,255,0.78); }
.feature__bullets--canopy li { color: rgba(255,255,255,0.9); }
.feature__bullets--canopy li i { color: var(--grove-2); }

.feat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 32px; margin-top: 28px; }
.feat-grid h4 { font: var(--t-h4); margin: 0 0 4px; }
.feat-grid p { font-size: 16px; color: var(--fg-3); margin: 0; line-height: 1.55; }

.feature__more {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 28px; padding: 10px 16px 10px 18px;
  font: var(--t-button); font-size: 14px;
  color: var(--grove-8);
  background: rgba(1,68,55,0.06);
  border-radius: 999px;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.feature__more:hover { background: rgba(1,68,55,0.12); color: var(--grove-9); }
.feature__more i { font-size: 13px; transition: transform var(--dur-fast) var(--ease-standard); }
.feature__more:hover i { transform: translateX(2px); }
.feature--canopy .feature__more { background: rgba(255,255,255,0.08); color: #fff; }
.feature--canopy .feature__more:hover { background: rgba(255,255,255,0.16); color: var(--grove-2); }
.feature--understory .feature__more { background: rgba(255,255,255,0.6); }
.feature--understory .feature__more:hover { background: #fff; }

/* Old-way / New-way callout */
.callout-kill {
  margin: 28px 0 24px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
.callout-kill__strike,
.callout-kill__win {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 22px;
}
.callout-kill__strike {
  background: rgba(0,0,0,0.02);
}
.callout-kill__strike .callout-kill__line {
  text-decoration: line-through;
  text-decoration-color: rgba(0,0,0,0.45);
  text-decoration-thickness: 1.5px;
  color: var(--fg-3);
}
.callout-kill__divider {
  height: 1px;
  background: var(--border-1);
  margin: 0;
}
.callout-kill__icon {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.06);
  color: var(--fg-3);
  font-size: 16px;
  margin-top: 1px;
}
.callout-kill__icon--win {
  background: var(--grove-1);
  color: var(--grove-8);
  font-size: 18px;
}
.callout-kill__label {
  display: block;
  font: 600 11px/1 var(--ff-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-4);
  margin-bottom: 6px;
}
.callout-kill__label--win { color: var(--grove-7); }
.callout-kill__line {
  display: block;
  font: 500 16px/1.45 var(--ff-sans);
  color: var(--fg-1);
}
.callout-kill__line strong { color: var(--grove-8); font-weight: 600; }
@media (max-width: 720px) {
  .callout-kill__strike, .callout-kill__win { padding: 14px 16px; }
  .callout-kill__line { font-size: 15px; }
}

/* ─────────── Mocks ─────────── */
.mock {
  background: #fff; border: 1px solid var(--border-1);
  border-radius: var(--r-md); padding: 22px;
  box-shadow: var(--shadow-3);
  max-width: 100%;
}
.feature--canopy .mock { border-color: rgba(255,255,255,0.1); }
.mock--phone {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex; justify-content: center;
}
.mock--phone .mock-phone {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px -20px rgba(0,0,0,0.55),
    0 60px 120px -40px rgba(0,0,0,0.45);
}
.mock__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.mock__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mock__card { background: var(--bg-app); border: 1px solid var(--border-1); border-radius: var(--r-sm); padding: 14px; }
.mock__card--span { grid-column: span 2; background: #fff; }
.mock__big { font: var(--t-h2); font-size: 30px; color: var(--grove-9); margin: 6px 0 4px; letter-spacing: -0.01em; }
.mock__big.up, .up { color: var(--success-fg); font-size: 12px; font-weight: 500; }
.mock__list { list-style: none; padding: 0; margin: 8px 0 0; }
.mock__list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--border-3); font-size: 13px; color: var(--fg-2); }
.mock__list li:first-child { border-top: 0; }
.mock__list li i { color: var(--grove-6); }
.mock__list li .r { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--fg-3); }

.mock-phone {
  background: #fafafa; border-radius: 44px;
  border: 10px solid #0a0a0a;
  width: 360px; margin: 0 auto;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,0.06) inset,
    0 30px 60px -20px rgba(0,0,0,0.55),
    0 60px 120px -40px rgba(0,0,0,0.45);
  position: relative;
  font-family: var(--ff-sans);
}
.mock-phone__notch {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px; background: #0a0a0a; border-radius: 999px; z-index: 2;
}
.mock-phone__top {
  display: flex; justify-content: space-between; padding: 14px 26px 6px;
  font-size: 13px; font-weight: 600; color: var(--fg-1);
  position: relative; z-index: 1;
}
.mock-phone__top-icons { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; }
.mock-phone__head { padding: 18px 20px 16px; background: #fff; }
.mock-phone__head-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.mock-phone__avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--grove-7), var(--grove-9));
  color: #fff; font-weight: 600; font-size: 14px;
  display: grid; place-items: center;
}
.mock-phone__greeting { font-size: 14px; font-weight: 600; color: var(--fg-1); line-height: 1.2; }
.mock-phone__sub { font-size: 11px; color: var(--fg-4); margin-top: 2px; }
.mock-phone__bell { margin-left: auto; font-size: 20px; color: var(--fg-3); }
.mock-phone__title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: 26px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--grove-9); margin: 0 0 14px; text-wrap: balance;
}
.mock-phone__progress-row { display: flex; align-items: center; gap: 10px; }
.mock-phone__bar { flex: 1; height: 6px; background: var(--grove-1); border-radius: 999px; overflow: hidden; }
.mock-phone__bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--grove-6), var(--grove-8));
}
.mock-phone__pct { font-size: 12px; font-weight: 600; color: var(--grove-8); font-variant-numeric: tabular-nums; }
.mock-phone__stats {
  display: flex; gap: 14px; margin-top: 12px;
  font-size: 11px; color: var(--fg-3);
}
.mock-phone__stats span { display: inline-flex; align-items: center; gap: 4px; }
.mock-phone__stats i { color: var(--grove-7); font-size: 13px; }
.mock-phone__section {
  font-family: var(--ff-sans); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 10px; font-weight: 600; color: var(--fg-4);
  padding: 16px 20px 8px; background: #fafafa;
}
.mock-phone__list { list-style: none; padding: 0; margin: 0; background: #fff; }
.mock-phone__list li {
  display: grid; grid-template-columns: 36px 1fr auto;
  align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--border-3);
  font-size: 13px; color: var(--fg-2);
}
.mock-phone__list li:last-child { border-bottom: 0; }
.mock-phone__ico {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--bg-app); display: grid; place-items: center;
  color: var(--fg-3); font-size: 16px;
}
.mock-phone__ico--active { background: var(--grove-05); color: var(--grove-8); }
.mock-phone__ico--done { background: oklch(0.92 0.08 145); color: var(--grove-8); }
.mock-phone__row-body { min-width: 0; }
.mock-phone__row-title { font-size: 13px; font-weight: 500; color: var(--fg-1); line-height: 1.3; }
.mock-phone__row-meta { font-size: 11px; color: var(--fg-4); margin-top: 2px; }
.mock-phone__list li.active { background: linear-gradient(180deg, var(--grove-05), #fff); }
.mock-phone__list li.active .mock-phone__row-title { color: var(--grove-9); font-weight: 600; }
.mock-phone__list li.active .cta {
  background: var(--grove-8); color: #fff; border: 0;
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 500; cursor: pointer;
}
.mock-phone__list li.done .mock-phone__row-title { color: var(--fg-3); }
.mock-phone__caret { color: var(--fg-4); font-size: 16px; }
.mock-phone__bottombar {
  background: #0a0a0a; color: rgba(255,255,255,0.7);
  font-size: 10px; text-align: center;
  padding: 10px 20px 16px;
  display: flex; justify-content: center; align-items: center; gap: 6px;
}
.mock-phone__bottombar i { color: var(--grove-4); }

.mock-wp__bar { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--border-1); }
.mock-wp__tree { list-style: none; padding: 0; margin: 12px 0 0; }
.mock-wp__tree li { display: flex; align-items: center; gap: 10px; padding: 8px 0 8px 4px; font-size: 14px; color: var(--fg-2); }
.mock-wp__tree li.file { padding-left: 28px; color: var(--fg-3); border-bottom: 1px solid var(--border-3); }
.mock-wp__tree li.folder { font-weight: 500; color: var(--grove-9); }
.mock-wp__tree li.folder i { color: var(--grove-6); }
.mock-wp__tree li .tick { margin-left: auto; color: var(--success-fg); font-weight: 700; }
.mock-wp__tree li .flag { margin-left: auto; color: var(--warn-fg); background: var(--warn-bg); width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.mock-wp__tree li.flagged { background: rgba(254,243,199,0.4); }

/* ── Workpapers: animated annotation demo ────────────────────── */
.wp-stage { position: relative; overflow: hidden; min-height: 560px; display: flex; flex-direction: column; }
.wp-stage .mock-wp__bar { flex: 0 0 auto; }
.wp-stage .wp-tree { flex: 1 1 auto; }
.wp-stage .wp-tree {
  animation: wpTreeCycle 12s ease-in-out infinite;
}
.wp-stage .wp-tree__target {
  position: relative;
  border-radius: 6px;
  transition: background 0.25s ease;
  animation: wpTargetCycle 12s ease-in-out infinite;
}
@keyframes wpTreeCycle {
  0%, 22%   { opacity: 1; transform: translateX(0); }
  28%, 92%  { opacity: 0; transform: translateX(-12px); pointer-events: none; }
  98%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes wpTargetCycle {
  0%, 14%   { background: transparent; }
  16%, 24%  { background: rgba(140, 175, 120, 0.18); }
  26%, 100% { background: transparent; }
}

.wp-doc {
  position: absolute;
  inset: 56px 24px 24px;        /* below the bar, fills rest of mock */
  background: var(--bg-elev);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  animation: wpDocCycle 12s ease-in-out infinite;
}
@keyframes wpDocCycle {
  0%, 24%   { opacity: 0; transform: translateY(8px); }
  30%, 90%  { opacity: 1; transform: translateY(0); }
  96%, 100% { opacity: 0; transform: translateY(8px); }
}

.wp-doc__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-1);
}
.wp-doc__back {
  background: none; border: 0; color: var(--fg-3);
  font: 500 12px var(--ff-mono); letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 4px; padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
}
.wp-doc__back:hover { background: var(--bg-subtle); color: var(--grove-9); }
.wp-doc__title {
  flex: 1;
  font: 500 13px/1 var(--ff-mono);
  color: var(--grove-9);
  letter-spacing: 0.01em;
}
.wp-doc__tools { display: flex; gap: 4px; }
.wp-doc__tool {
  width: 26px; height: 26px;
  border-radius: 5px; border: 1px solid var(--border-1);
  background: var(--bg-elev);
  display: grid; place-items: center;
  color: var(--fg-3); cursor: pointer;
  font-size: 13px;
  transition: all 0.2s;
}
.wp-doc__tool[data-tool="tick"] { animation: wpToolFlash 12s ease-in-out infinite; }
.wp-doc__tool[data-tool="hl"]   { animation: wpToolFlash 12s ease-in-out infinite; animation-delay: 1.4s; }
.wp-doc__tool[data-tool="note"] { animation: wpToolFlash 12s ease-in-out infinite; animation-delay: 2.8s; }
@keyframes wpToolFlash {
  0%, 36%   { background: var(--bg-elev); border-color: var(--border-1); color: var(--fg-3); }
  38%, 44%  { background: var(--grove-2); border-color: var(--grove-5); color: var(--grove-9); transform: scale(1.05); }
  48%, 100% { background: var(--bg-elev); border-color: var(--border-1); color: var(--fg-3); transform: scale(1); }
}

.wp-doc__page {
  flex: 1; padding: 20px 22px 24px;
  background:
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(0,0,0,0.025) 26px 27px),
    var(--bg-app);
  position: relative;
  overflow: hidden;
}
.wp-doc__form-title {
  font: 500 12px var(--ff-mono);
  color: var(--grove-9);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-1);
  margin-bottom: 14px;
}
.wp-doc__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.wp-doc__cell {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--border-1);
  border-radius: 5px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 64px;
}
.wp-doc__cell--full { grid-column: 1 / -1; }
.wp-doc__label {
  font: 500 10px var(--ff-mono);
  color: var(--fg-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.wp-doc__val {
  font-family: var(--ff-mono);
  font-size: 15px;
  color: var(--grove-9);
  font-feature-settings: 'tnum';
}

/* ── Annotations on the page ─────────────────────────────────── */
.wp-anno { position: absolute; }

/* Tick mark — green check */
.wp-anno--tick {
  top: 6px; right: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success-fg);
  display: grid; place-items: center;
  font-size: 11px;
  opacity: 0;
  transform: scale(0.4) rotate(-20deg);
  animation: wpTickIn 12s ease-in-out infinite;
}
@keyframes wpTickIn {
  0%, 38%    { opacity: 0; transform: scale(0.4) rotate(-20deg); }
  44%, 90%   { opacity: 1; transform: scale(1) rotate(0); }
  96%, 100%  { opacity: 0; transform: scale(0.4) rotate(-20deg); }
}

/* Highlight — yellow swipe */
.wp-anno--hl {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(252, 211, 77, 0.55), rgba(252, 211, 77, 0.55));
  border-radius: 3px;
  mix-blend-mode: multiply;
  transform-origin: left center;
  transform: scaleX(0);
  animation: wpHlIn 12s ease-in-out infinite;
}
@keyframes wpHlIn {
  0%, 50%    { transform: scaleX(0); }
  56%, 90%   { transform: scaleX(1); }
  96%, 100%  { transform: scaleX(0); }
}

/* Sticky note */
.wp-anno--note {
  position: absolute;
  bottom: 18px; right: 20px;
  width: 230px;
  padding: 12px 14px;
  background: #FFF8C5;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  transform: translateY(8px) rotate(1.5deg);
  opacity: 0;
  animation: wpNoteIn 12s ease-in-out infinite;
}
@keyframes wpNoteIn {
  0%, 64%    { opacity: 0; transform: translateY(8px) rotate(1.5deg); }
  70%, 90%   { opacity: 1; transform: translateY(0) rotate(1.5deg); }
  96%, 100%  { opacity: 0; transform: translateY(8px) rotate(1.5deg); }
}
.wp-anno__note-head {
  display: flex; align-items: center; gap: 6px;
  font: 500 10px var(--ff-mono);
  color: rgba(0,0,0,0.55);
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.wp-anno__avatar {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--grove-7);
  color: #fff;
  display: grid; place-items: center;
  font: 700 8px var(--ff-mono);
  letter-spacing: 0;
}
.wp-anno__note-body {
  font: 500 12px/1.4 var(--ff-serif);
  color: rgba(0,0,0,0.78);
  overflow: hidden;
  white-space: normal;
  animation: wpNoteType 12s steps(80, end) infinite;
}
@keyframes wpNoteType {
  0%, 70%    { max-height: 0; }
  78%, 92%   { max-height: 80px; }
  98%, 100%  { max-height: 0; }
}

/* Cursor — moves between hotspots */
.wp-cursor {
  position: absolute;
  width: 14px; height: 18px;
  pointer-events: none;
  z-index: 5;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
  animation: wpCursor 12s ease-in-out infinite;
}
.wp-cursor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #1a1a1a;
  clip-path: polygon(7% 0, 7% 78%, 32% 59%, 50% 100%, 65% 93%, 48% 55%, 93% 55%);
}
.wp-cursor::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(0 0, 0 92%, 29% 70%, 47% 100%, 77% 87%, 62% 62%, 100% 62%, 100% 49%, 15% 49%, 15% 14%, 77% 49%, 100% 49%, 0 0, 7% 0, 93% 55%, 48% 55%, 65% 93%, 50% 100%, 32% 59%, 7% 78%);
}
@keyframes wpCursor {
  /* phase 0: hover the file row */
  0%   { left: 60px;  top: 78px; opacity: 0; }
  4%   { left: 60px;  top: 78px; opacity: 1; }
  18%  { left: 70px;  top: 80px; opacity: 1; transform: scale(1); }
  22%  { left: 70px;  top: 80px; opacity: 1; transform: scale(0.85); }
  /* phase 1: tick tool, then box */
  32%  { left: 540px; top: 78px; opacity: 1; transform: scale(1); }
  36%  { left: 540px; top: 78px; transform: scale(0.85); }
  44%  { left: 320px; top: 178px; transform: scale(1); }
  46%  { left: 320px; top: 178px; transform: scale(0.85); }
  /* phase 2: highlight */
  56%  { left: 320px; top: 290px; }
  58%  { left: 320px; top: 290px; transform: scale(0.85); }
  /* phase 3: note */
  70%  { left: 600px; top: 78px; transform: scale(1); }
  72%  { left: 600px; top: 78px; transform: scale(0.85); }
  88%  { left: 700px; top: 460px; opacity: 1; transform: scale(1); }
  94%  { left: 400px; top: 380px; opacity: 0; }
  100% { left: 60px;  top: 78px; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-stage .wp-tree, .wp-stage .wp-tree__target,
  .wp-doc, .wp-doc__tool, .wp-anno--tick, .wp-anno--hl,
  .wp-anno--note, .wp-anno__note-body, .wp-cursor { animation: none; }
  .wp-doc { display: none; }
}

/* ── Prepare & Review: drafted return mock ──────────────────── */
.mock--prep {
  padding: 0;
  overflow: hidden;
  display: block;
  min-height: 0;
  background: #fff;
  position: relative;
}
.prep-pane {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.prep-return {
  background: var(--bg-app);
  position: relative;
}
.prep-body {
  flex: 1;
  display: block;
  min-height: 0;
}
.prep-docs {
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  background: #fff;
  border-bottom: 1px solid var(--border-1);
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
}
.prep-doc {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 6px;
  flex-shrink: 0;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.prep-doc:hover { background: var(--grove-05); }
.prep-doc__icon {
  width: 18px;
  height: 22px;
  background: var(--bg-app);
  border: 1px solid var(--border-2);
  border-radius: 3px;
  display: grid;
  place-items: center;
  color: var(--fg-4);
  font-size: 11px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.prep-doc__name {
  font: 600 11px/1 var(--ff-mono);
  color: var(--grove-9);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.prep-doc__sub { display: none; }
.prep-doc__state {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-2);
  transition: background 200ms ease, box-shadow 200ms ease;
  flex-shrink: 0;
  margin-left: 2px;
}
.prep-doc.is-active {
  background: var(--grove-1);
  border-color: var(--grove-3);
}
.prep-doc.is-active .prep-doc__icon {
  background: var(--grove-8);
  border-color: var(--grove-8);
  color: #fff;
}
.prep-doc.is-active .prep-doc__icon::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grove-2);
  box-shadow: 0 0 6px var(--grove-3);
  animation: prepScan 1.4s ease-in-out infinite;
}
@keyframes prepScan {
  0%   { top: 0%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.prep-doc.is-active .prep-doc__state {
  background: var(--success-fg);
  box-shadow: 0 0 0 0 rgba(38,138,91,0.5);
  animation: prepPulse 1.6s ease-out infinite;
}
.prep-doc.is-done .prep-doc__icon {
  background: var(--grove-1);
  border-color: var(--grove-3);
  color: var(--success-fg);
}
.prep-doc.is-done .prep-doc__state { background: var(--success-fg); }
.prep-doc.is-active::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 1px;
  height: 8px;
  background: linear-gradient(180deg, var(--grove-7), transparent);
}
.prep-return__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid var(--border-1);
}
.prep-return__head .form-num {
  font: 600 11px/1 var(--ff-mono);
  letter-spacing: 0.06em;
  color: var(--grove-8);
  background: var(--grove-1);
  padding: 4px 8px;
  border-radius: 4px;
}
.prep-return__head .form-name {
  font: 500 13px/1.3 var(--ff-sans);
  color: var(--grove-9);
  letter-spacing: -0.005em;
}
.prep-return__head .prep-pill {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 11px/1 var(--ff-mono);
  letter-spacing: 0.04em;
  color: var(--grove-8);
  background: var(--grove-05);
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--border-2);
}
.prep-pill .prep-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success-fg);
  box-shadow: 0 0 0 0 rgba(38, 138, 91, 0.5);
  animation: prepPulse 1.8s ease-out infinite;
}
@keyframes prepPulse {
  0% { box-shadow: 0 0 0 0 rgba(38,138,91,0.5); }
  70% { box-shadow: 0 0 0 6px rgba(38,138,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(38,138,91,0); }
}
.prep-table {
  flex: 1;
  padding: 4px 14px 14px;
  display: flex;
  flex-direction: column;
  font: 400 13px/1.3 var(--ff-sans);
  position: relative;
}
.prep-table__cols,
.prep-row {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) 78px 78px;
  align-items: center;
  gap: 10px;
}
.prep-table__cols {
  padding: 10px 8px;
  font: 600 10px/1 var(--ff-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-4);
  border-bottom: 1px solid var(--border-2);
}
.prep-table__cols .num-col { text-align: right; }
.prep-row {
  padding: 11px 8px;
  border-bottom: 1px solid var(--border-3);
  position: relative;
  transition: background 200ms ease;
}
.prep-row .line {
  font: 600 11px/1 var(--ff-mono);
  color: var(--fg-4);
  letter-spacing: 0.02em;
}
.prep-row .label {
  color: var(--grove-9);
  font-size: 13px;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prep-row .num {
  text-align: right;
  font: 500 13px/1 var(--ff-mono);
  color: var(--grove-9);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  transition: color 240ms ease;
}
.prep-row .num--prior { color: var(--fg-4); font-weight: 400; }
.prep-row[data-row]:not(.is-total) .num:not(.num--prior) { color: var(--fg-4); }
.prep-row.is-filling .num:not(.num--prior) { color: var(--grove-7); }
.prep-row.is-filled .num:not(.num--prior) { color: var(--grove-9); font-weight: 600; }
.prep-row.is-active { background: rgba(180, 211, 184, 0.18); }
.prep-row.is-active::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  animation: prepRowSweep 1.3s ease-in-out;
  pointer-events: none;
}
@keyframes prepRowSweep {
  from { background-position: -50% 0; }
  to   { background-position: 150% 0; }
}
.prep-spark {
  position: absolute;
  left: -1px;
  top: 50%;
  width: 3px;
  height: 0;
  background: var(--grove-7);
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
  transition: height 240ms ease;
}
.prep-row.is-active .prep-spark,
.prep-row.is-filled .prep-spark { height: 70%; }
.prep-row.is-filled .prep-spark { background: var(--success-fg); }
.prep-row.is-total {
  border-bottom: none;
  border-top: 1.5px solid var(--grove-9);
  margin-top: 4px;
  padding-top: 14px;
}
.prep-row.is-total .label { font-weight: 600; }
.prep-row.is-total .num {
  font-weight: 600;
  font-size: 15px;
  color: var(--grove-9);
}
.prep-row.is-total.is-bumping .num:not(.num--prior) {
  animation: prepBump 0.6s ease;
  color: var(--success-fg);
}
@keyframes prepBump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.prep-callout {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-12%, 4px) scale(0.96);
  z-index: 3;
  background: #fff;
  border: 1px solid var(--border-2);
  box-shadow: 0 8px 24px -10px rgba(1,33,27,0.18), 0 1px 0 rgba(1,33,27,0.04);
  border-radius: 6px;
  padding: 8px 10px;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.prep-callout::before {
  content: '';
  position: absolute;
  left: 18px;
  top: -5px;
  width: 9px;
  height: 9px;
  background: #fff;
  border-left: 1px solid var(--border-2);
  border-top: 1px solid var(--border-2);
  transform: rotate(45deg);
}
.prep-callout.is-shown {
  opacity: 1;
  transform: translate(-12%, 4px) scale(1);
}
.prep-callout__head {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 600 11px/1 var(--ff-sans);
  letter-spacing: 0.01em;
}
.prep-callout__body {
  font: 400 11.5px/1.4 var(--ff-sans);
  color: var(--fg-3);
}
.prep-callout--warn .prep-callout__head,
.prep-callout--warn .prep-callout__head i { color: var(--warn-fg); }
.prep-callout--ok .prep-callout__head,
.prep-callout--ok .prep-callout__head i { color: var(--success-fg); }
.prep-pill [data-prep-status] {
  display: inline-block;
  min-width: 100px;
  transition: opacity 180ms ease;
}
.prep-pill.is-swap [data-prep-status] { opacity: 0; }
.prep-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--grove-1);
  border-top: 1px solid var(--border-2);
  position: relative;
}
.prep-foot__l { display: flex; flex-direction: column; }
.prep-foot__refund {
  font: 500 11px/1 var(--ff-mono);
  color: var(--grove-8);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prep-foot__amount {
  font-family: var(--ff-serif);
  font-size: 22px;
  color: var(--grove-9);
  letter-spacing: -0.01em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transition: color 240ms ease;
}
.prep-foot.is-bumping .prep-foot__amount {
  color: var(--success-fg);
  animation: prepBump 0.6s ease;
}
.prep-foot__delta {
  margin-left: auto;
  font: 500 12px/1 var(--ff-mono);
  color: var(--success-fg);
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 240ms ease;
}
.prep-foot__delta.is-shown { opacity: 1; }
.prep-toast {
  position: absolute;
  right: 14px;
  top: 70px;
  max-width: 320px;
  background: var(--grove-9);
  color: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 16px 40px -12px rgba(1,33,27,0.5);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition: opacity 280ms ease, transform 280ms ease;
  pointer-events: none;
  z-index: 4;
}
.prep-toast.is-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.prep-toast__icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--grove-7);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.prep-toast__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.prep-toast__title {
  font: 500 13px/1.2 var(--ff-sans);
  letter-spacing: -0.005em;
}
.prep-toast__sub {
  font: 400 11px/1.3 var(--ff-sans);
  color: rgba(255,255,255,0.65);
}
.prep-toast__amt {
  font: 500 14px/1 var(--ff-mono);
  color: var(--grove-2);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
  .mock--prep,
  .prep-pane,
  .prep-return { width: 100%; max-width: 100%; min-width: 0; }
  .prep-return__head { padding: 10px 12px; gap: 8px; }
  .prep-return__head { align-items: flex-start; flex-wrap: wrap; }
  .prep-return__head .form-name { font-size: 12px; }
  .prep-return__head .prep-pill { margin-left: 0; width: 100%; }
  .prep-docs { padding: 8px 10px; gap: 6px; max-width: 100%; }
  .prep-doc { padding: 5px 8px 5px 5px; }
  .prep-doc__name { font-size: 10px; }
  .prep-table { padding: 4px 8px 10px; overflow: hidden; }
  .prep-table__cols,
  .prep-row { grid-template-columns: 22px minmax(0,1fr) minmax(54px, auto); gap: 6px; }
  .prep-table__cols { padding: 9px 4px; }
  .prep-row { padding: 10px 4px; }
  .prep-row .label {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 12px;
    line-height: 1.25;
  }
  .prep-row .num { font-size: 12px; }
  .prep-table__cols .num-col:last-child,
  .prep-row .num--prior { display: none; }
  .prep-callout { left: 32px; right: 8px; width: auto; transform: translate(0, 4px) scale(0.96); }
  .prep-callout.is-shown { transform: translate(0, 4px) scale(1); }
  .prep-foot { padding: 10px 12px; }
  .prep-toast { left: 12px; right: 12px; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .prep-row,
  .prep-pill .prep-pulse,
  .prep-doc.is-active .prep-doc__icon::after,
  .prep-row.is-active::before,
  .prep-doc.is-active .prep-doc__state { animation: none; opacity: 1; }
}

.mock--chat {
  position: relative;
  padding: 0;
  background: var(--grove-9);
  border-color: rgba(255,255,255,0.08);
  height: 540px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%);
  flex-shrink: 0;
  z-index: 3;
}
.chat-header__brand { display: flex; align-items: center; gap: 10px; }
.chat-header__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grove-7);
  color: var(--grove-2);
  display: grid;
  place-items: center;
  font-size: 16px;
}
.chat-header__title {
  font: 500 14px/1.2 var(--ff-sans);
  color: #fff;
}
.chat-header__sub {
  font: 400 11px/1.2 var(--ff-mono);
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.chat-header__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74,222,128,0.7);
  animation: chatDot 2s ease-in-out infinite;
}
@keyframes chatDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(74,222,128,0); }
}
.chat-header__progress {
  font: 500 11px/1 var(--ff-mono);
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
  padding: 4px 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}

.chat-scroll {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  padding: 18px 22px;
  overflow: hidden;
  position: relative;
}
.chat-scroll .bubble {
  opacity: 0;
  transform: translateY(8px);
  animation: bubbleIn 0.32s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes bubbleIn {
  to { opacity: 1; transform: translateY(0); }
}
.chat-fade {
  position: absolute;
  left: 0; right: 0;
  pointer-events: none;
  z-index: 2;
}
.chat-fade--top {
  top: 60px;
  height: 40px;
  background: linear-gradient(to bottom, var(--grove-9) 0%, rgba(1,33,27,0) 100%);
}

.chat-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
  flex-shrink: 0;
  z-index: 3;
  position: relative;
}
.chat-input__placeholder {
  flex: 1;
  font: 400 14px/1.4 var(--ff-sans);
  color: rgba(255,255,255,0.85);
  min-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-input__placeholder.is-empty { color: rgba(255,255,255,0.35); }
.chat-input__caret {
  width: 1.5px;
  height: 16px;
  background: var(--grove-2);
  animation: caretBlink 1s steps(2, end) infinite;
  flex-shrink: 0;
}
@keyframes caretBlink { 50% { opacity: 0; } }
.chat-input__send {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--grove-2);
  color: var(--grove-9);
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 13px;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  flex-shrink: 0;
}
.chat-input.is-ready .chat-input__send { background: #fff; }
.chat-input__send:hover { background: #fff; transform: scale(1.04); }

@media (prefers-reduced-motion: reduce) {
  .chat-scroll .bubble { animation: none; opacity: 1; transform: none; }
  .chat-input__caret { animation: none; }
  .chat-header__dot { animation: none; }
}
.bubble { max-width: 80%; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; }
.bubble.bot { background: rgba(255,255,255,0.07); color: #fff; align-self: flex-start; border-bottom-left-radius: 4px; }
.bubble.bot strong { color: var(--grove-2); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }
.bubble.user { background: var(--grove-2); color: var(--grove-9); align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble.bot--typing { display: flex; gap: 4px; padding: 14px; }
.bubble.bot--typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--grove-2); animation: blink 1.2s infinite; }
.bubble.bot--typing span:nth-child(2) { animation-delay: 0.2s; }
.bubble.bot--typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,80%,100% { opacity: 0.25; } 40% { opacity: 1; } }

.mock--delivery .mock-delivery__video {
  position: relative;
  aspect-ratio: 16/10;
  background: radial-gradient(ellipse at 30% 20%, #0a3a30 0%, var(--grove-9) 60%, #000 100%);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Stage area = visual frame of the recorded video */
.mdv-stage {
  position: relative;
  flex: 1;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mdv-screen {
  width: 78%;
  background: var(--bg-app);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.mdv-screen__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--grove-9);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mdv-screen__head .g-eyebrow { flex: 1; font-size: 9px; }
.mdv-screen__dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.25); }
.mdv-screen__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.mdv-bar {
  height: 8px;
  background: var(--grove-1);
  border-radius: 999px;
  overflow: hidden;
}
.mdv-bar span { display: block; height: 72%; width: 72%; background: var(--grove-7); border-radius: 999px; height: 100%; transform-origin: left center; animation: mdvGrow 4s ease-in-out infinite alternate; }
.mdv-bar--alt span { background: var(--grove-3); animation-delay: 0.6s; width: 48%; }
@keyframes mdvGrow {
  0%   { transform: scaleX(0.3); }
  100% { transform: scaleX(1); }
}
.mdv-figs {
  display: flex;
  gap: 18px;
  margin-top: 4px;
  font-family: var(--ff-serif);
}
.mdv-figs > div { display: flex; flex-direction: column; gap: 2px; }
.mdv-figs .g-eyebrow { font-size: 9px; color: var(--fg-4); }
.mdv-figs strong { font-size: 22px; font-weight: 500; color: var(--grove-9); letter-spacing: -0.01em; }
.mdv-figs .mdv-pos { color: var(--success-fg); }

/* Host (preparer) inset — bottom-right */
.mdv-host {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: 96px;
  height: 96px;
  border-radius: 6px;
  background: linear-gradient(135deg, #d6b48a 0%, #b89065 60%, #8a6a48 100%);
  border: 2px solid rgba(255,255,255,0.85);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.mdv-host__avatar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--grove-5), var(--grove-7));
  background-size: cover;
  background-position: 42% 30%;
  display: grid;
  place-items: center;
  font-family: var(--ff-display);
  font-size: 44px;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.mdv-host__name {
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.4);
  color: #fff;
  font: var(--t-label-sm);
  padding: 3px 6px;
  text-align: left;
}
.mdv-host__live {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  font: 600 9px/1 var(--ff-mono);
  color: #fff;
  background: rgba(0,0,0,0.45);
  padding: 3px 5px;
  border-radius: 2px;
  letter-spacing: 0.08em;
}
.mdv-host__rec {
  width: 6px; height: 6px; border-radius: 50%;
  background: #ff4f4f;
  animation: mdvBlink 1.4s ease-in-out infinite;
}
@keyframes mdvBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}

/* Player chrome */
.mdv-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(8px);
}
.mdv-chrome .play {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--grove-9);
  display: grid; place-items: center;
  border: 0;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}
.mdv-time { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mdv-progress {
  height: 3px;
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  overflow: hidden;
}
.mdv-progress__fill {
  height: 100%;
  width: 0%;
  background: var(--grove-2);
  border-radius: 999px;
  animation: mdvProgress 16s linear infinite;
}
@keyframes mdvProgress {
  0%   { width: 0%; }
  100% { width: 100%; }
}
.mdv-stamp {
  font: 500 10px/1 var(--ff-mono);
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.04em;
}
.mdv-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 18px;
}
.mdv-wave span {
  display: block;
  width: 2px;
  background: var(--grove-2);
  border-radius: 999px;
  animation: mdvWave 0.9s ease-in-out infinite alternate;
}
.mdv-wave span:nth-child(1) { height: 30%; animation-delay: 0.0s; }
.mdv-wave span:nth-child(2) { height: 70%; animation-delay: 0.1s; }
.mdv-wave span:nth-child(3) { height: 50%; animation-delay: 0.2s; }
.mdv-wave span:nth-child(4) { height: 90%; animation-delay: 0.3s; }
.mdv-wave span:nth-child(5) { height: 40%; animation-delay: 0.4s; }
.mdv-wave span:nth-child(6) { height: 80%; animation-delay: 0.5s; }
.mdv-wave span:nth-child(7) { height: 55%; animation-delay: 0.6s; }
.mdv-wave span:nth-child(8) { height: 35%; animation-delay: 0.7s; }
@keyframes mdvWave {
  from { transform: scaleY(0.4); }
  to   { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mdv-bar span, .mdv-progress__fill, .mdv-wave span, .mdv-host__rec { animation: none; }
}
.mock-delivery__video .cap { position: absolute; bottom: 56px; left: 16px; color: rgba(255,255,255,0.7); font-size: 11px; z-index: 1; }
.mock-delivery__rows { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 14px; }
.mock-delivery__rows .row { background: var(--bg-app); border-radius: var(--r-sm); padding: 12px; }
.mock-delivery__rows .big { display: block; font: var(--t-h2); font-size: 24px; color: var(--grove-9); margin-top: 4px; letter-spacing: -0.01em; }
.mock-delivery__sign { margin-top: 12px; padding: 12px 14px; background: var(--grove-1); border-radius: var(--r-sm); display: flex; justify-content: space-between; align-items: center; }

/* ─────────── CTA strip + final ─────────── */
.cta-strip { padding: 80px 28px; background: var(--bg-app); border-top: 1px solid var(--border-1); }
.cta-strip__inner { max-width: 800px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.cta-strip h2 { margin: 0; }
.cta-strip p { color: var(--fg-3); margin: 0 0 12px; }

.final { background: #020b0a; color: #fff; position: relative; overflow: hidden; padding: 168px 28px 148px; isolation: isolate; min-height: 620px; display: grid; align-items: center; }
.final__inner { max-width: 900px; margin: 0 auto; text-align: center; position: relative; z-index: 3; }
.final__title { font: var(--t-display-2); font-family: var(--ff-display); font-weight: 300; font-size: clamp(48px, 7vw, 96px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 36px; color: #fff; text-shadow: 0 24px 70px rgba(0,0,0,0.62), 0 2px 22px rgba(186,232,196,0.12); }
.final__ctas { display: inline-flex; gap: 12px; }

.final__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
  background: linear-gradient(180deg,
    #020908 0%,
    #06231f 28%,
    #0b3a31 58%,
    #071815 100%);
}

.final__sky,
.final__halo,
.final__horizon,
.final__grid,
.final__grain,
.final__aurora,
.final__workflow,
.final__glints,
.final__vignette {
  position: absolute;
  inset: 0;
}

.final__sky {
  background:
    radial-gradient(ellipse 78% 52% at 50% 63%, rgba(254,212,139,0.19) 0%, rgba(126,207,171,0.13) 35%, transparent 72%),
    radial-gradient(ellipse 60% 40% at 23% 16%, rgba(102,165,154,0.20) 0%, transparent 64%),
    radial-gradient(ellipse 48% 34% at 81% 20%, rgba(219,133,106,0.14) 0%, transparent 66%);
  opacity: 0.95;
}

.final__halo {
  background:
    radial-gradient(circle at 50% 62%, rgba(255,237,180,0.66) 0 6%, rgba(238,171,109,0.34) 14%, rgba(92,177,143,0.18) 27%, transparent 46%),
    radial-gradient(circle at 50% 62%, rgba(255,245,210,0.16) 0 12%, transparent 24%);
  filter: blur(0.4px);
  animation: finalHaloBreath 13s ease-in-out infinite;
  will-change: transform, opacity;
}

.final__horizon {
  top: auto;
  height: 62%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(156,214,177,0.08) 32%, rgba(242,182,112,0.16) 55%, rgba(7,19,16,0.76) 100%),
    radial-gradient(ellipse 78% 52% at 50% 82%, rgba(248,213,153,0.22) 0%, rgba(96,175,143,0.12) 36%, transparent 72%);
  animation: finalHazeDrift 10s ease-in-out infinite;
  will-change: transform, opacity;
}

.final__aurora {
  opacity: 0.48;
  mix-blend-mode: screen;
  filter: blur(18px) saturate(1.08);
}
.final__aurora span {
  position: absolute;
  width: 38vw;
  min-width: 360px;
  height: 210px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(135,224,183,0.36), rgba(246,183,121,0.20), transparent);
  transform: rotate(var(--r)) translate3d(var(--x), var(--y), 0);
  animation: finalAurora 18s ease-in-out infinite;
  will-change: transform, opacity;
}
.final__aurora span:nth-child(1) { --r: -9deg; --x: 7vw; --y: 10vh; --r2: 3deg; --x2: -3vw; --y2: 12vh; left: 8%; top: 8%; animation-delay: -4s; }
.final__aurora span:nth-child(2) { --r: 7deg; --x: -5vw; --y: 7vh; --r2: -2deg; --x2: 2vw; --y2: 9vh; right: 4%; top: 18%; opacity: 0.74; animation-delay: -11s; }

.final__grid {
  background-image:
    linear-gradient(rgba(206,238,199,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(206,238,199,0.04) 1px, transparent 1px);
  background-size: 96px 96px, 96px 96px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 42%, transparent 86%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 42%, transparent 86%);
  transform: perspective(800px) rotateX(58deg) translateY(22%);
  transform-origin: 50% 100%;
  opacity: 0.55;
  animation: finalGridGlide 16s linear infinite;
}

.final__rays {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 1700px;
  height: 1700px;
  margin-left: -850px;
  background:
    conic-gradient(
      from -14deg,
      transparent 0deg,
      rgba(255, 223, 163, 0.16) 5deg,
      transparent 11deg,
      transparent 30deg,
      rgba(149, 223, 178, 0.12) 35deg,
      transparent 42deg,
      transparent 68deg,
      rgba(255, 219, 157, 0.13) 74deg,
      transparent 83deg,
      transparent 112deg,
      rgba(222, 127, 104, 0.08) 119deg,
      transparent 128deg,
      transparent 152deg,
      rgba(189, 235, 192, 0.11) 160deg,
      transparent 168deg,
      transparent 360deg
    );
  mask-image: radial-gradient(circle at center, transparent 10%, #000 23%, #000 52%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle at center, transparent 10%, #000 23%, #000 52%, transparent 74%);
  animation: finalRayRotate 72s linear infinite, finalRayPulse 13s ease-in-out infinite;
  mix-blend-mode: screen;
  will-change: transform, opacity;
}
@keyframes finalRayRotate { to { transform: rotate(360deg); } }
@keyframes finalRayPulse {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.72; }
}

.final__workflow {
  z-index: 2;
  transform-style: preserve-3d;
  perspective: 1200px;
}
.final__sheet {
  position: absolute;
  width: clamp(118px, 15vw, 205px);
  aspect-ratio: 1.24 / 1;
  border: 1px solid rgba(205,241,213,0.26);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(247,255,239,0.15), rgba(114,185,155,0.07)),
    radial-gradient(circle at 22% 18%, rgba(255,230,171,0.18), transparent 28%);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.22);
  backdrop-filter: blur(7px);
  opacity: 0.76;
  transform: translate3d(0,0,0) rotate(var(--r)) skewY(var(--skew));
  animation: finalSheetFloat 12s ease-in-out infinite;
  will-change: transform, opacity;
}
.final__sheet::before,
.final__sheet::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  border-radius: 999px;
}
.final__sheet::before {
  top: 22%;
  height: 7px;
  background: rgba(244,225,160,0.36);
  box-shadow: 0 18px 0 rgba(198,236,202,0.18), 0 36px 0 rgba(198,236,202,0.13), 0 54px 0 rgba(255,255,255,0.09);
}
.final__sheet::after {
  bottom: 18%;
  width: 28%;
  height: 8px;
  background: rgba(126,224,175,0.35);
  box-shadow: 48px 0 0 rgba(255,196,131,0.22);
}
.final__sheet--1 { --r: -9deg; --skew: -2deg; --r2: 5deg; --skew2: 1deg; left: 12%; top: 28%; animation-delay: -2s; }
.final__sheet--2 { --r: 8deg; --skew: 1deg; --r2: -4deg; --skew2: -1deg; right: 11%; top: 31%; animation-delay: -7s; opacity: 0.62; }
.final__sheet--3 { --r: -4deg; --skew: -1deg; --r2: 2deg; --skew2: 1deg; left: 63%; top: 59%; width: clamp(92px, 10vw, 150px); animation-delay: -4s; opacity: 0.46; }
.final__thread {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 36%;
  height: 34%;
}
.final__thread::before,
.final__thread::after {
  content: "";
  position: absolute;
  inset: 18% 0;
  border-top: 2px dashed rgba(255,218,156,0.32);
  border-radius: 50%;
  filter: drop-shadow(0 0 12px rgba(255,196,122,0.24));
  animation: finalThreadFlow 18s linear infinite;
}
.final__thread::after {
  inset: 36% 2% 0;
  border-color: rgba(139,226,185,0.30);
  transform: rotate(6deg);
  animation-duration: 22s;
  animation-direction: reverse;
}

.final__grove {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 50%;
  z-index: 2;
}
.final__grove::before,
.final__grove::after {
  content: "";
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 82%;
  transform-origin: 50% 100%;
  animation: finalGroveSway 10s ease-in-out infinite;
  will-change: transform;
}
.final__grove::before {
  opacity: 0.92;
  background:
    radial-gradient(ellipse at 9% 86%, #010606 0 8%, transparent 8.4%),
    radial-gradient(ellipse at 22% 82%, #010606 0 11%, transparent 11.4%),
    radial-gradient(ellipse at 39% 88%, #010606 0 12%, transparent 12.4%),
    radial-gradient(ellipse at 58% 84%, #010606 0 13%, transparent 13.4%),
    radial-gradient(ellipse at 78% 88%, #010606 0 12%, transparent 12.4%),
    radial-gradient(ellipse at 94% 86%, #010606 0 10%, transparent 10.4%),
    linear-gradient(to top, #010606 0 34%, transparent 34%);
  animation-duration: 8.5s;
}
.final__grove::after {
  bottom: 14%;
  height: 24%;
  border-top: 18px solid rgba(213,235,205,0.13);
  border-radius: 50%;
  filter: blur(8px);
  animation: finalMistSlide 14s ease-in-out infinite;
}
@keyframes finalGroveSway {
  0%, 100% { transform: skewX(0deg); }
  50%      { transform: skewX(0.55deg); }
}

.final__glints {
  z-index: 2;
}
.final__glints span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(246,237,190,0.82);
  box-shadow: 0 0 18px rgba(255,224,157,0.76), 0 0 34px rgba(111,223,169,0.35);
  opacity: 0;
  animation: finalGlint 8s ease-in-out infinite;
  will-change: transform, opacity;
}
.final__glints span:nth-child(1) { left: 18%; top: 38%; animation-delay: -1s; }
.final__glints span:nth-child(2) { left: 35%; top: 24%; animation-delay: -5s; }
.final__glints span:nth-child(3) { left: 58%; top: 36%; animation-delay: -3s; }
.final__glints span:nth-child(4) { left: 76%; top: 27%; animation-delay: -6s; }
.final__glints span:nth-child(5) { left: 82%; top: 54%; animation-delay: -2s; }

.final__grain {
  z-index: 3;
  opacity: 0.28;
  mix-blend-mode: soft-light;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,0.16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 30%, rgba(255,255,255,0.10) 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 80%, rgba(255,255,255,0.12) 0 1px, transparent 1.5px);
  background-size: 37px 41px, 53px 59px, 71px 67px;
}

.final__vignette {
  z-index: 3;
  background: radial-gradient(ellipse 80% 60% at 50% 35%,
    transparent 0%,
    rgba(0, 0, 0, 0.06) 44%,
    rgba(0, 0, 0, 0.52) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 32%, rgba(0,0,0,0.36) 100%);
  pointer-events: none;
}

@keyframes finalHaloBreath {
  0%, 100% { transform: translateY(3%) scale(0.96); opacity: 0.72; }
  48%      { transform: translateY(-1%) scale(1.04); opacity: 1; }
}
@keyframes finalHazeDrift {
  0%, 100% { opacity: 0.72; transform: translateY(0) scale(1); }
  50%      { opacity: 1; transform: translateY(-2%) scale(1.04); }
}
@keyframes finalAurora {
  0%, 100% { opacity: 0.36; transform: rotate(var(--r)) translate3d(var(--x), var(--y), 0) scaleX(0.96); }
  50%      { opacity: 0.74; transform: rotate(var(--r2)) translate3d(var(--x2), var(--y2), 0) scaleX(1.08); }
}
@keyframes finalGridGlide {
  to { background-position: 0 96px, 96px 0; }
}
@keyframes finalSheetFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--r)) skewY(var(--skew)); opacity: 0.54; }
  50%      { transform: translate3d(0, -18px, 34px) rotate(var(--r2)) skewY(var(--skew2)); opacity: 0.82; }
}
@keyframes finalThreadFlow {
  to { stroke-dashoffset: -168; }
}
@keyframes finalMistSlide {
  0%, 100% { transform: translateX(-2%); opacity: 0.55; }
  50%      { transform: translateX(2%); opacity: 0.9; }
}
@keyframes finalGlint {
  0%, 100% { opacity: 0; transform: translate3d(0, 22px, 0) scale(0.6); }
  18%, 68% { opacity: 0.92; }
  50%      { transform: translate3d(12vw, -26px, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .final__halo, .final__rays, .final__horizon, .final__aurora span, .final__grid, .final__sheet, .final__thread::before, .final__thread::after, .final__grove::before, .final__grove::after, .final__glints span { animation: none; }
  .final__halo { transform: translateY(0) scale(1); opacity: 0.92; }
  .final__rays { opacity: 0.5; }
  .final__glints { display: none; }
}

/* ─────────── Footer ─────────── */
.feature[id], .feature__anchor { scroll-margin-top: 80px; }
.feature__anchor { display: block; position: relative; top: -16px; }
.g-foot { background: var(--bg-app); padding: 64px 28px 32px; border-top: 1px solid var(--border-1); }
.g-foot__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.g-foot__brand { display: flex; gap: 14px; align-items: flex-start; }
.g-foot__mark { height: 36px; width: auto; display: block; }
.g-foot__wordmark { height: 24px; width: auto; display: block; margin-bottom: 6px; }

.g-foot__sub { font-size: 14px; color: var(--fg-4); max-width: 28ch; margin-top: 4px; line-height: 1.5; }
.g-foot__cols { display: grid; grid-template-columns: repeat(3,1fr); gap: 32px; }
.g-foot__cols a { display: block; padding: 6px 0; font-size: 15px; color: var(--fg-3); }
.g-foot__cols a:hover { color: var(--grove-8); }
.g-foot__cols .g-eyebrow { margin-bottom: 8px; }
.g-foot__rule { max-width: 1200px; margin: 32px auto 0; padding-top: 20px; border-top: 1px solid var(--border-1); display: flex; justify-content: space-between; }

/* ─────────── Pricing page ─────────── */
.p-hero { padding: 96px 28px 48px; text-align: center; }
.p-hero__inner { max-width: 880px; margin: 0 auto; }
.p-hero h1 { font: var(--t-display-2); font-family: var(--ff-display); font-weight: 300; font-size: clamp(48px, 7vw, 96px); line-height: 1.02; letter-spacing: -0.025em; margin: 18px 0 24px; color: var(--grove-9); }
.p-hero p { font-size: 19px; color: var(--fg-3); max-width: 600px; margin: 0 auto; line-height: 1.55; }

.p-cards { padding: 0 28px 96px; }
.p-cards__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.p-card { background: #fff; border: 1px solid var(--border-1); border-radius: var(--r-md); padding: 32px; display: flex; flex-direction: column; gap: 18px; }
.p-card--feature { background: var(--grove-8); color: #fff; border-color: var(--grove-8); position: relative; overflow: hidden; }
.p-card--feature::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 28px);
  pointer-events: none;
}
.p-card--feature .g-eyebrow { color: var(--grove-2); }
.p-card--feature h3 { color: #fff; }
.p-card--feature .p-card__price-num { color: #fff; }
.p-card--feature .p-card__bullets li { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.1); }
.p-card--feature .p-card__bullets li i { color: var(--grove-2); }
.p-card--feature > * { position: relative; z-index: 1; }

.p-card__avail { display: inline-flex; align-items: center; gap: 8px; font: var(--t-eyebrow); text-transform: uppercase; letter-spacing: 0.12em; color: var(--grove-7); }
.p-card--feature .p-card__avail { color: var(--grove-2); }
.p-card__avail--soon { color: var(--fg-4); }
.p-card__avail .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.p-card h3 { font: var(--t-h1); font-size: 36px; margin: 0; letter-spacing: -0.01em; color: var(--grove-9); }
.p-card__price { display: flex; align-items: baseline; gap: 6px; }
.p-card__price-num { font: var(--t-h1); font-family: var(--ff-display); font-weight: 300; font-size: 44px; color: var(--grove-9); letter-spacing: -0.02em; }
.p-card__price-unit { font-size: 14px; color: var(--fg-4); }
.p-card__price--soon { font: var(--t-h4); color: var(--fg-4); font-style: italic; }

.p-card__lede { font-size: 15px; line-height: 1.55; margin: 0; color: var(--fg-3); }
.p-card--feature .p-card__lede { color: rgba(255,255,255,0.75); }
.p-card__bullets { list-style: none; padding: 0; margin: 0; flex: 1; }
.p-card__bullets li { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border-3); font-size: 14px; color: var(--fg-2); }
.p-card__bullets li:first-child { border-top: 0; }
.p-card__bullets li i { color: var(--grove-6); margin-top: 2px; flex-shrink: 0; }

.p-card__cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border: 1px solid var(--grove-8); color: var(--grove-8); font: var(--t-button); border-radius: var(--r-sm); }
.p-card--feature .p-card__cta { background: #fff; color: var(--grove-8); border-color: #fff; }
.p-card__cta:hover { background: var(--grove-8); color: #fff; }
.p-card--feature .p-card__cta:hover { background: var(--grove-2); color: var(--grove-9); border-color: var(--grove-2); }

.p-bundle { max-width: 1200px; margin: 0 auto 96px; padding: 0 28px; }
.p-bundle__inner {
  background: var(--grove-1); border-radius: var(--r-md); padding: 28px 32px;
  display: flex; align-items: center; gap: 24px;
  border: 1px solid var(--grove-2);
}
.p-bundle__icon { width: 48px; height: 48px; background: var(--grove-8); color: var(--grove-2); border-radius: var(--r-sm); display: grid; place-items: center; font-size: 22px; flex-shrink: 0; }
.p-bundle__title { font: var(--t-h3); color: var(--grove-9); margin: 0 0 4px; }
.p-bundle__sub { font-size: 14px; color: var(--grove-8); margin: 0; }
.p-bundle__price { margin-left: auto; text-align: right; }
.p-bundle__price-num { font: var(--t-h1); font-family: var(--ff-display); font-weight: 300; font-size: 36px; color: var(--grove-9); letter-spacing: -0.02em; }
.p-bundle__price-strike { color: var(--fg-4); text-decoration: line-through; margin-right: 8px; font-size: 16px; }

/* ─────────── Stage detail (Collect / Prepare / Deliver) ─────────── */
.stage { padding: 120px 28px; }
.stage--paper { background: var(--bg-app); }
.stage--canopy { background: var(--grove-8); color: #fff; position: relative; overflow: hidden; }
.stage--canopy::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 28px); pointer-events: none; }
.stage--canopy .g-h1 { color: #fff; }
.stage--canopy .g-eyebrow { color: var(--grove-2); }
.stage--canopy .lead, .stage--canopy p { color: rgba(255,255,255,0.78); }
.stage--understory { background: var(--grove-1); }
.stage__inner { max-width: 1200px; margin: 0 auto; position: relative; }
.stage__head { max-width: 720px; margin-bottom: 56px; }
.stage__head h2 { margin: 14px 0 18px; }
.stage__head .lead { margin: 0; font-size: 18px; color: var(--fg-3); }

.stage__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border-1); border: 1px solid var(--border-1); border-radius: var(--r-md); overflow: hidden; }
.stage--canopy .stage__grid { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.1); }
.stage--understory .stage__grid { background: var(--grove-2); border-color: var(--grove-2); }
.stage__cell { background: #fff; padding: 28px; }
.stage--canopy .stage__cell { background: var(--grove-9); }
.stage--understory .stage__cell { background: var(--grove-05); }
.stage__cell-icon { width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--grove-1); color: var(--grove-8); display: grid; place-items: center; font-size: 18px; margin-bottom: 16px; }
.stage--canopy .stage__cell-icon { background: rgba(174,203,172,0.15); color: var(--grove-2); }
.stage__cell h4 { font: var(--t-h4); margin: 0 0 8px; color: var(--grove-9); }
.stage--canopy .stage__cell h4 { color: #fff; }
.stage__cell p { font-size: 14px; color: var(--fg-3); margin: 0; line-height: 1.55; }
.stage--canopy .stage__cell p { color: rgba(255,255,255,0.7); }

/* ─────────── Whats next ─────────── */
.next { padding: 120px 28px; background: #fff; }
.next__inner { max-width: 1200px; margin: 0 auto; }
.next__head { text-align: center; margin-bottom: 64px; }
.next__steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 56px; }
.next__step { text-align: left; }
.next__num { font: var(--t-display-2); font-family: var(--ff-display); font-weight: 300; font-size: 80px; line-height: 1; color: var(--grove-2); letter-spacing: -0.03em; margin-bottom: 16px; }
.next__step h3 { font: var(--t-h3); margin: 0 0 10px; color: var(--grove-9); }
.next__step p { font-size: 15px; color: var(--fg-3); margin: 0; line-height: 1.55; }

/* ─────────── Testimonials ─────────── */
.tests { padding: 120px 28px; background: var(--grove-1); }
.tests__inner { max-width: 1200px; margin: 0 auto; }
.tests__head { text-align: center; margin-bottom: 56px; }
.tests__head h2 { margin: 14px 0 0; }
.tests__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.tests__card { background: #fff; padding: 32px; border-radius: var(--r-md); border: 1px solid rgba(1,68,55,0.08); display: flex; flex-direction: column; gap: 18px; }
.tests__quote { font: var(--t-quote); font-size: 18px; line-height: 1.45; color: var(--grove-9); margin: 0; font-style: italic; }
.tests__author { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border-1); }
.tests__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--grove-2); color: var(--grove-9); display: grid; place-items: center; font-weight: 600; font-size: 14px; }
.tests__name { font-weight: 500; color: var(--grove-9); font-size: 15px; }
.tests__role { font-size: 13px; color: var(--fg-4); }

/* ─────────── FAQ ─────────── */
.faq { padding: 120px 28px; background: var(--bg-app); }
.faq__inner { max-width: 880px; margin: 0 auto; }
.faq__head { text-align: center; margin-bottom: 48px; }
.faq__list { border-top: 1px solid var(--border-1); }
.faq__item { border-bottom: 1px solid var(--border-1); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font: var(--t-h4); font-size: 18px; color: var(--grove-9);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; font: var(--t-h2); color: var(--grove-7); transition: transform var(--dur-base) var(--ease-standard); }
.faq__item[open] summary::after { content: "−"; }
.faq__item p { padding: 0 4px 22px; color: var(--fg-3); font-size: 15px; line-height: 1.6; margin: 0; max-width: 70ch; }

/* ─────────── responsive ─────────── */
@media (max-width: 1100px) {
  .feature__inner { grid-template-columns: 1fr; gap: 48px; }
  .feature__inner--reverse > .feature__copy { order: 0; }
  .stats__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
  .p-cards__inner, .tests__grid, .next__steps { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 980px) {
  .g-nav { position: relative; top: auto; }
  .g-nav__links { display: none; }
  .g-nav__inner { padding: 12px 20px; gap: 12px; }
  .hero { padding: 56px 20px 34px; }
  .hero__title { font-size: clamp(40px, 9vw, 72px) !important; }
  .hero__title br { display: none; }
  .hero__sub { font-size: 16px; }
  .hero__credit { margin-top: 46px; }
  .hero__title, .hero__sub, .hero__ctas, .hero__credit {
    animation-duration: 700ms;
    animation-delay: 80ms;
  }
  .preview { padding: 0 16px 64px; overflow: hidden; }
  .preview__frame { border-radius: 10px; }
  .preview__chrome { padding: 9px 10px; gap: 7px; }
  .preview__url { margin-left: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .preview__frame,
  .preview__body,
  .pv-main,
  .pv-panel,
  .pv-checklist,
  .pv-wp,
  .pv-q,
  .pv-py,
  .pv-del { min-width: 0; max-width: 100%; }
  .preview__body { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .pv-side { display: none; }
  .pv-main { padding: 18px; }
  .pv-main__head { flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; width: 100%; }
  .pv-main__head-actions { flex-wrap: wrap; width: 100%; min-width: 0; }
  .pv-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    gap: 18px;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .pv-tabs::-webkit-scrollbar { display: none; }
  .pv-tabs a { flex: 0 0 auto; }
  .pv-checklist__row { grid-template-columns: minmax(0, 1.6fr) minmax(64px, 1fr) minmax(82px, 1fr); }
  .pv-checklist__row > span { min-width: 0; }
  .pv-checklist__row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .pv-checklist__row > span:nth-child(4) { display: none; }
  .pv-checklist__head > span:nth-child(4) { display: none; }
  .pv-wp { grid-template-columns: minmax(0, 1fr); }
  .pv-wp__item { grid-template-columns: 24px minmax(0, 1fr) auto; }
  .pv-wp__name,
  .pv-wp__meta,
  .pv-wp__preview-head span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pv-wp__preview-head { gap: 10px; }
  .pv-wp__preview-head span { min-width: 0; }
  .pv-py__grid { grid-template-columns: repeat(2, 1fr); }
  .pv-py__head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pv-py__head .g-btn { width: 100%; justify-content: center; }
  .stats { padding: 56px 20px; }
  .stats__inner { grid-template-columns: 1fr; gap: 40px; }
  .stats__num { font-size: 72px; }
  .feature { padding: 72px 20px; }
  .feature__mobile-ctas { display: flex; gap: 10px; margin-top: 28px; }
  .feature__mobile-ctas .g-btn { flex: 1; justify-content: center; min-width: 0; }
  .feat-grid { grid-template-columns: 1fr; gap: 20px; }
  .mock__grid { grid-template-columns: 1fr; }
  .mock__card--span { grid-column: span 1; }
  .mock-delivery__rows { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .mock-delivery__rows .big { font-size: 18px; }
  .p-hero { padding: 72px 20px 40px; }
  .p-cards { padding: 0 20px 64px; }
  .p-bundle { padding: 0 20px; margin-bottom: 64px; }
  .p-bundle__inner { flex-direction: column; align-items: flex-start; gap: 16px; padding: 22px; }
  .p-bundle__price { margin-left: 0; text-align: left; }
  .stage { padding: 72px 20px; }
  .stage__head { margin-bottom: 36px; }
  .stage__grid { grid-template-columns: 1fr; }
  .next { padding: 72px 20px; }
  .next__steps { gap: 36px; }
  .tests { padding: 72px 20px; }
  .faq { padding: 72px 20px; }
  .final { padding: 80px 20px; }
  .cta-strip { padding: 56px 20px; }
  .g-foot { padding: 48px 20px 24px; }
  .g-foot__inner { grid-template-columns: 1fr; gap: 32px; }
  .g-foot__cols { grid-template-columns: repeat(2,1fr); gap: 24px; }
  .g-foot__rule { flex-direction: column; gap: 8px; align-items: flex-start; }
}
@media (max-width: 480px) {
  .hero__ctas, .final__ctas { flex-direction: column; width: 100%; }
  .hero__ctas .g-btn, .final__ctas .g-btn { width: 100%; justify-content: center; }
  .feature__mobile-ctas { flex-direction: column; }
  .feature__mobile-ctas .g-btn { width: 100%; }
  .hero__credit { margin-top: 38px; }
  .hero__credit-marquee { margin-inline: -4px; }
  .hero__credit-row { gap: 34px; padding-right: 34px; }
  .hero__credit-logos { gap: 16px 20px; }
  .credit-logo { height: 22px; }
  .preview { padding-inline: 12px; }
  .pv-main { padding: 16px 14px 18px; }
  .pv-main__head-actions .g-status { flex: 0 0 100%; width: 100%; justify-content: center; }
  .pv-main__head-actions .g-btn { flex: 0 0 100%; width: 100%; justify-content: center; }
  .pv-tabs { gap: 16px; }
  .pv-tabs a { font-size: 12px; padding-block: 9px; }
  .pv-checklist__row { grid-template-columns: minmax(0, 1fr) minmax(82px, auto); gap: 8px; padding: 10px; }
  .pv-checklist__row > span:nth-child(2) { display: none; }
  .pv-checklist__head > span:nth-child(2) { display: none; }
  .pv-wp__item { grid-template-columns: 22px minmax(0, 1fr); }
  .pv-wp__item .g-status { grid-column: 2; width: max-content; max-width: 100%; }
  .pv-q__chips,
  .pv-del__actions { flex-wrap: wrap; }
  .pv-py__grid { grid-template-columns: minmax(0, 1fr); }
  .preview__chrome .preview__url { font-size: 9px; }
  .mock-phone { width: 100%; max-width: 320px; }
  .mock-delivery__rows { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
  .g-nav__inner { padding-inline: 16px; }
  .g-nav__wordmark { display: none; }
  .g-nav__cta .g-btn { padding-inline: 14px; }
}