/* Polish layer on top of app.css (+ funnel.css).
   Look: Pareto Talent (paretotalent.com) — dark surfaces, emerald/teal gradients, frosted glass,
   ambient orbs, grain, rounded corners, Plus Jakarta Sans + DM Sans.
   Motion: shopify.design — expo/quint easing, word-by-word headline rise, staggered scroll reveal,
   clip-path media reveal, spring hover, press, header slide-in, pulse dot, scroll progress.
   Progressive: content is visible without JS; all motion is off under reduced motion. */

:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring: linear(0, 0.008 1%, 0.032 2%, 0.13 4.4%, 0.26 6.6%, 0.681 13%, 0.891 17.1%, 0.968 19.1%, 1.028 21.2%, 1.073 23.2%, 1.103 25.2%, 1.114 26.8%, 1.12 29.9%, 1.115 31.4%, 1.098 34.4%, 1.042 41.6%, 1.017 45.4%, 0.998 49.5%, 0.988 53.9%, 0.986 60.4%, 1.001 80.9%, 1);
  --reveal-duration: 0.9s;
  --reveal-distance: 28px;
  --reveal-stagger: 70ms;
  --reveal-max-index: 8;
  --r: var(--radius-lg);
  --r-lg: var(--radius-xl);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 20px 50px -24px rgba(0, 0, 0, 0.6);
  --shadow-card-hover: 0 32px 80px rgba(0, 0, 0, 0.4), 0 0 60px rgba(16, 185, 129, 0.05);
  --grad-green: linear-gradient(135deg, var(--green), var(--green-light), var(--teal));
}

/* ---------- Canvas: deep background, ambient orbs, grain ---------- */
html { background: var(--bg-deep); scroll-padding-top: 104px; }
body { background: transparent; position: relative; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(700px 700px at calc(100% + 100px) -100px, rgba(16, 185, 129, 0.10), transparent 60%),
    radial-gradient(520px 520px at -120px 70%, rgba(99, 102, 241, 0.08), transparent 60%),
    radial-gradient(460px 460px at 80% calc(100% + 60px), rgba(20, 184, 166, 0.07), transparent 60%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
}
@media (max-width: 768px) { body::after { display: none; } }
main, .foot, footer { position: relative; z-index: 1; }

/* ---------- Type ---------- */
h1 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
h2 { font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
h3 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.015em; }
p, li { text-wrap: pretty; }
.lede { color: var(--text-secondary); }
.lp-hero h1 { font-size: clamp(44px, 6.5vw, 80px); line-height: 1.02; letter-spacing: -0.04em; margin-bottom: 20px; }
.lp-hero .sub { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; color: var(--text-primary); margin: 0 0 16px; }
.section h2 { font-size: clamp(30px, 3.8vw, 46px); margin-bottom: 20px; }
.final h2 { font-size: clamp(34px, 5vw, 58px); }
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section + .section { border-top: 1px solid var(--border-glass); }
.accent, .x-accent { background: linear-gradient(90deg, var(--green), var(--green-bright), var(--green-light), var(--green)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); letter-spacing: 0.14em; font-size: 12px; font-weight: 700; color: var(--green-light); }
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 8px var(--green); flex: none; }
a { color: var(--green-light); }
:focus-visible { outline: 2px solid var(--green-light); outline-offset: 3px; }

/* ---------- Nav bar: Pareto floating glass pill ---------- */
.demo-bar {
  position: sticky; top: 12px; z-index: 50;
  max-width: 1040px; margin: 12px auto 0; padding: 10px 14px 10px 18px;
  display: flex; align-items: center; justify-content: flex-start; gap: 14px;
  background: rgba(5, 10, 14, 0.65); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 100px;
  -webkit-backdrop-filter: blur(32px) saturate(1.8); backdrop-filter: blur(32px) saturate(1.8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 40px -20px rgba(0, 0, 0, 0.8);
  font-size: 13px; color: var(--text-secondary); line-height: 1.4;
}
@media (max-width: 1064px) { .demo-bar { margin-left: 12px; margin-right: 12px; } }
@media (max-width: 640px) { .demo-bar { border-radius: var(--radius-lg); padding: 10px 14px; flex-wrap: wrap; row-gap: 6px; } }
.x-logo { display: inline-flex; flex: none; }
.x-logo img { height: 36px; width: auto; display: block; }
.x-bar-note { display: inline-flex; align-items: center; gap: 8px; }
.x-bar-note::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 8px var(--green); flex: none; }

/* ---------- Glass surfaces ---------- */
.card, .how li, .x-card, .panel, .preview, .summary dl div, .next, .gap-box, .x-prose, .carry {
  background-color: var(--bg-card);
  border: 1px solid var(--border-glass);
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--shadow-card);
  position: relative;
}
.card::before, .x-card::before, .panel::before, .preview::before, .x-prose::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0.5;
  background: conic-gradient(from 180deg, rgba(16, 185, 129, 0.15), transparent 25% 75%, rgba(16, 185, 129, 0.10));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box exclude, linear-gradient(#fff 0 0);
}
.card, .how li, .x-card { padding: 26px; }
.panel { padding: clamp(20px, 4vw, 40px); }
.preview { padding: 14px; }
.preview img { border-radius: var(--radius-md); border-color: var(--border-glass); }
.card p, .x-desc { color: var(--text-secondary); }
.gap-box { border-style: dashed; border-color: var(--border-glass-strong); color: var(--text-secondary); }
.summary dl div, .next { border-radius: var(--radius-md); }
.next-high { border-color: rgba(16, 185, 129, 0.45); box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.2), 0 0 60px rgba(16, 185, 129, 0.06); }
.cap-note, .warn, .demo-note, .delivery { background: var(--green-subtle); border-left-color: var(--green); color: var(--text-secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.how li::before { display: grid; margin-bottom: 16px; background: var(--grad-green); color: var(--bg-deep); }
.ticks li::before { color: var(--green-light); }

/* ---------- Controls ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[inputmode] {
  background: var(--bg-surface); border-color: var(--border-glass-strong); color: var(--text-primary); border-radius: var(--radius-md);
}
input:focus-visible { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px var(--green-muted), 0 0 20px rgba(16, 185, 129, 0.15); }
.task-opt, .ease label, .choices label, .slots-days label, .slots-times label, .chips li {
  background: var(--bg-card); border-color: var(--border-glass-strong); border-radius: var(--radius-md); color: var(--text-primary);
}
.task-opt:has(input:checked), .ease label:has(input:checked), .choices label:has(input:checked), .slots-days label:has(input:checked), .slots-times label:has(input:checked) {
  background: var(--green-muted); border-color: var(--green); box-shadow: inset 0 0 0 1px var(--green), 0 0 24px rgba(16, 185, 129, 0.08);
}
.steps li { border-top-color: var(--border-glass-strong); color: var(--text-muted); }
.steps li[aria-current="step"], .steps li.done { color: var(--text-primary); }
.rank th, .rank td, .task-row, .carry td, .carry th, .fixtures-table th, .fixtures-table td { border-color: var(--border-glass); }

/* ---------- Buttons: Pareto gradient, Shopify motion ---------- */
.btn { border-radius: var(--radius-md); font-family: var(--font-head); font-weight: 800; letter-spacing: -0.01em; padding: 0 26px; }
.btn-lg { padding: 0 40px; min-height: 58px; font-size: 16px; }
.btn-primary {
  background: linear-gradient(180deg, var(--green-light) 0%, var(--green) 100%); color: var(--bg-deep); text-shadow: 0 1px rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 -2px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(16, 185, 129, 0.35), 0 8px 20px rgba(16, 185, 129, 0.2);
}
.btn-primary:hover { filter: none; }
.btn-ghost { background: transparent; color: var(--green-light); border: 1px solid rgba(16, 185, 129, 0.5); }
a[data-cta]::after { content: "→"; display: inline-block; margin-left: 10px; }
.mock-flag { display: inline-flex; align-items: center; gap: 8px; color: var(--green-light); border-color: rgba(16, 185, 129, 0.45); background: var(--green-subtle); }
.mock-flag::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--green); box-shadow: 0 0 8px var(--green); }
.route-banner, .confirm-box { background: var(--green-muted); color: var(--green-bright); border: 1px solid rgba(16, 185, 129, 0.3); border-radius: var(--radius-md); }

/* ---------- Long-form links ---------- */
.x-prose a, .x-list a {
  color: var(--green-light); text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}

/* ---------- Scroll progress ---------- */
.x-progress { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--grad-green); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; box-shadow: 0 0 12px var(--green-glow); }

/* =================================================================
   Motion (shopify.design). Only without a reduced-motion preference.
   ================================================================= */
@media (prefers-reduced-motion: no-preference) {

  /* Nav slides in; status dots pulse. */
  .demo-bar { animation: x-header-in 0.8s var(--ease-out-expo) both; }
  @keyframes x-header-in { from { opacity: 0; transform: translateY(-140%); } to { opacity: 1; transform: none; } }
  .x-bar-note::before, .mock-flag::before, .eyebrow::before { animation: x-pulse 2s ease-in-out infinite; }
  @keyframes x-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

  /* Labels fade up. */
  .eyebrow { animation: x-label-in 0.8s var(--ease-out-expo) 0.15s both; }
  @keyframes x-label-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* Headline words rise out of their own masks. */
  .x-split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.1em; margin-bottom: -0.1em; }
  .x-split .wi { display: inline-block; transform: translateY(110%); animation: x-rise 1.2s var(--ease-in-out-quint) calc(0.2s + var(--wi, 0) * 55ms) forwards; }
  @keyframes x-rise { to { transform: none; } }
  /* Gradient words keep their gradient after splitting, then shimmer slowly. */
  .accent .wi, .x-accent .wi {
    background: linear-gradient(90deg, var(--green), var(--green-bright), var(--green-light), var(--green)); background-size: 200% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
    animation: x-rise 1.2s var(--ease-in-out-quint) calc(0.2s + var(--wi, 0) * 55ms) forwards, x-shimmer 4s linear 1.6s infinite;
  }
  .accent, .x-accent { animation: x-shimmer 4s linear infinite; }
  @keyframes x-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

  /* Scroll reveal with stagger. */
  .x-motion [data-reveal-item] {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
      opacity var(--reveal-duration) var(--ease-out-expo) calc(min(var(--i, 0), var(--reveal-max-index)) * var(--reveal-stagger)),
      transform var(--reveal-duration) var(--ease-out-expo) calc(min(var(--i, 0), var(--reveal-max-index)) * var(--reveal-stagger));
  }
  .x-motion [data-reveal-item][data-revealed] { opacity: 1; transform: none; }

  /* Media opens from an inset clip; image settles from a slight zoom. */
  .x-motion [data-reveal-media] { clip-path: inset(10% round 32px); transition: clip-path 1.3s var(--ease-out-expo), transform 0.65s var(--ease-spring), box-shadow 0.65s var(--ease-spring); }
  .x-motion [data-reveal-media] img { transform: scale(1.08); transition: transform 1.6s var(--ease-out-expo); }
  .x-motion [data-reveal-media][data-revealed] { clip-path: inset(0 round var(--r-lg)); }
  .x-motion [data-reveal-media][data-revealed] img { transform: none; }

  /* Glass cards: spring lift, brighter border, soft green glow. */
  .card, .how li, .x-card, .summary dl div {
    transition: transform 0.65s var(--ease-spring), box-shadow 0.65s var(--ease-spring), border-color 0.5s var(--ease-out-expo), background-color 0.5s var(--ease-out-expo);
  }
  .x-motion [data-reveal-item].card, .x-motion [data-reveal-item].x-card, .x-motion .how li[data-reveal-item] {
    transition:
      opacity var(--reveal-duration) var(--ease-out-expo) calc(min(var(--i, 0), var(--reveal-max-index)) * var(--reveal-stagger)),
      transform var(--reveal-duration) var(--ease-out-expo) calc(min(var(--i, 0), var(--reveal-max-index)) * var(--reveal-stagger)),
      box-shadow 0.65s var(--ease-spring), border-color 0.5s, background-color 0.5s;
  }
  .x-motion [data-revealed].card, .x-motion [data-revealed].x-card, .x-motion .how li[data-revealed] {
    transition: transform 0.65s var(--ease-spring), box-shadow 0.65s var(--ease-spring), border-color 0.5s, background-color 0.5s, opacity 0.4s;
  }
  .card::before, .x-card::before { transition: opacity 0.6s; }
  @media (hover: hover) {
    .card:hover, .how li:hover, .x-card:hover, .summary dl div:hover {
      transform: translateY(-4px) scale(1.015); border-color: var(--border-glass-hover); background-color: var(--bg-card-hover); box-shadow: var(--shadow-card-hover);
    }
    .card:hover::before, .x-card:hover::before { opacity: 1; }
    .preview:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: var(--shadow-card-hover); }
  }

  /* Step numbers pop in, then send out one pulse ring. */
  .x-motion .how li::before { transform: scale(0.4); opacity: 0; transition: transform 0.6s var(--ease-out-back) 0.25s, opacity 0.3s 0.25s; }
  .x-motion .how li[data-revealed]::before { transform: none; opacity: 1; animation: x-ring 1.6s var(--ease-out-expo) 0.6s 1; }
  @keyframes x-ring { from { box-shadow: 0 0 0 0 var(--green-glow); } to { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); } }

  /* Buttons: spring lift + glow on hover, press on click, arrow nudge; hero CTA breathes. */
  .btn { transition: transform 0.5s var(--ease-spring), box-shadow 0.5s var(--ease-spring), background-color 0.2s, border-color 0.2s, color 0.2s; }
  @media (hover: hover) {
    .btn:not(.is-disabled):hover { transform: translateY(-3px) scale(1.02); }
    .btn-primary:not(.is-disabled):hover { box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 -2px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(16, 185, 129, 0.5), 0 8px 20px rgba(16, 185, 129, 0.35), 0 16px 40px rgba(16, 185, 129, 0.2), 0 0 80px rgba(16, 185, 129, 0.08); }
    .btn-ghost:not(.is-disabled):hover { background: var(--green-muted); }
    a[data-cta]:hover::after { animation: x-nudge 0.9s var(--ease-out-quint) infinite; }
  }
  .btn:not(.is-disabled):active { transform: scale(0.97); transition-duration: 0.12s; }
  @keyframes x-nudge { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }
  .lp-hero .btn-primary { animation: x-cta 3s ease-in-out 2s infinite; }
  .lp-hero .btn-primary:hover { animation: none; }
  @keyframes x-cta {
    0%, 100% { box-shadow: inset 0 1px rgba(255,255,255,.3), inset 0 -2px rgba(0,0,0,.15), 0 0 0 1px rgba(16,185,129,.35), 0 8px 20px rgba(16,185,129,.2); }
    50% { box-shadow: inset 0 1px rgba(255,255,255,.3), inset 0 -2px rgba(0,0,0,.15), 0 0 0 1px rgba(16,185,129,.55), 0 8px 28px rgba(16,185,129,.4), 0 0 60px rgba(16,185,129,.12); }
  }

  /* Choice tiles respond to selection. */
  .task-opt, .ease label, .choices label, .slots-days label, .slots-times label {
    transition: border-color 0.25s, background-color 0.25s, box-shadow 0.25s, transform 0.4s var(--ease-spring);
  }
  .task-opt:active, .ease label:active, .choices label:active, .slots-days label:active, .slots-times label:active { transform: scale(0.98); }
  .task-opt input:checked, .ease input:checked, .choices input:checked, .slots-days input:checked, .slots-times input:checked { animation: x-pop 0.45s var(--ease-out-back); }
  @keyframes x-pop { from { transform: scale(0.6); } to { transform: none; } }

  /* Step bar fills as the founder moves through the app. */
  .steps li { position: relative; }
  .steps li::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 4px; background: var(--grad-green); box-shadow: 0 0 10px var(--green-glow); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s var(--ease-out-expo); }
  .steps li[aria-current="step"]::after, .steps li.done::after { transform: none; }

  /* Panels rise, then their contents follow in sequence. */
  .panel:not([hidden]) { animation: x-panel 0.7s var(--ease-out-expo) both; }
  .panel:not([hidden]) > * { animation: x-label-in 0.7s var(--ease-out-expo) both; }
  .panel:not([hidden]) > :nth-child(2) { animation-delay: 60ms; }
  .panel:not([hidden]) > :nth-child(3) { animation-delay: 120ms; }
  .panel:not([hidden]) > :nth-child(4) { animation-delay: 180ms; }
  .panel:not([hidden]) > :nth-child(5) { animation-delay: 240ms; }
  .panel:not([hidden]) > :nth-child(n+6) { animation-delay: 300ms; }
  @keyframes x-panel { from { opacity: 0; transform: translateY(16px) scale(0.99); } to { opacity: 1; transform: none; } }

  .route-banner:not(:empty), .confirm-box:not(:empty) { animation: x-label-in 0.6s var(--ease-out-expo) both; }

  /* Underline draws out on hover for long-form links. */
  .x-prose a, .x-list a { transition: background-size 0.45s var(--ease-out-quint); }
  @media (hover: hover) { .x-prose a:hover, .x-list a:hover { background-size: 0 1px; background-position: 100% 100%; } }

  /* Ambient orbs drift very slowly. */
  body::before { animation: x-drift 24s ease-in-out infinite alternate; }
  @keyframes x-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-2%, 3%, 0); } }

  @supports (animation-timeline: scroll()) {
    .x-progress { animation: x-progress linear both; animation-timeline: scroll(root); }
    @keyframes x-progress { to { transform: scaleX(1); } }
  }
}

@media print {
  [data-reveal-item], [data-reveal-media], [data-reveal-media] img, .x-split .wi { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .x-progress, .demo-bar, body::before, body::after { display: none !important; }
}