/* ============================================================
   CompBase polish layer — depth, motion, rhythm.
   Loaded AFTER each page's inline styles; references brand
   tokens (--teal, --coral, fonts) and never redefines them.
   Remove the <link> to fully revert a page.
   ============================================================ */

:root {
  /* two-layer shadow scale: ambient + contact */
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05), 0 1px 6px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 2px 4px rgba(28, 25, 23, 0.05), 0 10px 28px rgba(28, 25, 23, 0.07);
  --shadow-lg: 0 4px 8px rgba(28, 25, 23, 0.06), 0 20px 48px rgba(28, 25, 23, 0.10);
  --shadow-dark-md: 0 2px 4px rgba(0, 0, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.35);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- depth: light-surface cards ---------- */
.who-card,
.feature-card,
.pain-card,
.side-card,
.price-card,
.included-card,
.expect-item,
.tool-card,
.persona-card,
.number-block,
.cred-item {
  box-shadow: var(--shadow-sm);
}

.who-card:hover,
.feature-card:hover,
.price-card:hover,
.tool-card:hover,
.persona-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.who-card, .feature-card, .price-card, .tool-card, .persona-card {
  transition: box-shadow 0.22s var(--ease-out), transform 0.22s var(--ease-out),
    border-color 0.22s var(--ease-out);
}

/* form panel gets the big treatment it already implies */
.demo-form-wrapper { box-shadow: var(--shadow-lg); }

/* ---------- depth: dark-surface panels ---------- */
.stats-bar,
.mock-window,
.trade-card,
.settle-card,
.board-card,
.dark-card {
  box-shadow: var(--shadow-dark-md);
  position: relative;
}

/* faint top-edge highlight makes dark panels read dimensional */
.stats-bar::after,
.trade-card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  pointer-events: none;
}

/* ---------- motion: buttons ---------- */
.btn-coral, .btn-white, .btn-ghost, .nav-cta, .form-submit,
.btn-primary, .who-card-link, .brief-cta-btn {
  transition: transform 0.16s var(--ease-out), box-shadow 0.16s var(--ease-out),
    background 0.16s var(--ease-out), border-color 0.16s var(--ease-out),
    color 0.16s var(--ease-out);
}
.btn-coral:hover, .form-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(232, 114, 90, 0.35);
}
.btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.btn-coral:active, .btn-white:active, .form-submit:active {
  transform: translateY(0);
  transition-duration: 0.06s;
}

/* ---------- motion: nav underline ---------- */
.nav-links a:not(.nav-cta) {
  position: relative;
}
.nav-links a:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 2px;
  background: currentColor;
  opacity: 0.8;
  transition: right 0.22s var(--ease-out);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after { right: 0; }

/* ---------- motion: reveal easing + stagger ---------- */
.fade-up {
  transform: translateY(20px);
  transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out);
}
.fade-up.delay-1 { transition-delay: 0.07s; }
.fade-up.delay-2 { transition-delay: 0.14s; }
.fade-up.delay-3 { transition-delay: 0.21s; }

/* ---------- typography & rhythm ---------- */
h1, h2,
.hero-title, .problem-title, .who-title, .cta-title,
.sect-title, .demo-title, .section-title, .feat-title {
  letter-spacing: -0.02em;
}
.hero-title { line-height: 1.08; }

/* uniform section rhythm (pages vary 80–140px today) */
section[class] { scroll-margin-top: 72px; }

/* focus visibility without changing brand colors */
a:focus-visible, button:focus-visible, .form-input:focus-visible,
.form-select:focus-visible, .form-textarea:focus-visible {
  outline: 2px solid var(--teal-light, #14B8A6);
  outline-offset: 2px;
}

/* ---------- KPI count-up (numbers hidden until js sets them) ---------- */
[data-countup] { font-variant-numeric: tabular-nums; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .fade-up { opacity: 1; transform: none; }
}

/* ---------- hero entrance (one-time, on load) ---------- */
@keyframes polish-rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge, .hero-title, .hero-subtitle, .hero-ctas, .hero-mockup-wrapper,
.demo-eyebrow, .demo-title, .demo-desc {
  animation: polish-rise 0.6s var(--ease-out) backwards;
}
.hero-title, .demo-title { animation-delay: 0.08s; }
.hero-subtitle, .demo-desc { animation-delay: 0.16s; }
.hero-ctas { animation-delay: 0.24s; }
.hero-mockup-wrapper { animation-delay: 0.34s; animation-duration: 0.7s; }

/* ---------- data-grid texture on dark hero/cta surfaces ---------- */
.hero, .section-cta {
  background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
}

/* ---------- accessibility: contrast + skip link ---------- */
/* warm-gray muted text on dark surfaces was 3.6-3.9:1; #8A847E passes AA
   (5.06:1 on --dark, 4.64:1 on --dark-card) while staying in-family */
.settle-detail, .mock-label, .trade-detail, .demo-trust-text, .expect-text,
.stat-label, .moat-label, .number-label,
.who-sub-dark, .rank-meta, .hero .mock-sub {
  color: #8A847E;
}
/* .cta-note sits on the teal band where warm gray never passed; use the
   white-alpha treatment its sibling .cta-sub already uses */
.section-cta .cta-note, .cta-note { color: rgba(255, 255, 255, 0.78); }
/* placeholder gray on white was 2.41:1; brand --muted passes (4.59:1) */
.form-input::placeholder, .form-textarea::placeholder { color: #78716C; opacity: 0.85; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 10px 18px;
  background: var(--teal, #0F766E);
  color: #fff;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  .hero-badge, .hero-title, .hero-subtitle, .hero-ctas, .hero-mockup-wrapper,
  .demo-eyebrow, .demo-title, .demo-desc { animation: none; }
}

/* ---------- hero mockup comes alive ---------- */
/* benchmark bars grow in (scaleX animates regardless of inline width) */
.mock-table .bar-f, .rank-bar-fill {
  transform-origin: left center;
  animation: polish-bar-grow 0.9s var(--ease-out) 1.1s backwards;
}
@keyframes polish-bar-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* table rows stagger in after the window lands */
.mock-table tbody tr {
  animation: polish-rise 0.45s var(--ease-out) backwards;
}
.mock-table tbody tr:nth-child(1)  { animation-delay: 0.75s; }
.mock-table tbody tr:nth-child(2)  { animation-delay: 0.81s; }
.mock-table tbody tr:nth-child(3)  { animation-delay: 0.87s; }
.mock-table tbody tr:nth-child(4)  { animation-delay: 0.93s; }
.mock-table tbody tr:nth-child(5)  { animation-delay: 0.99s; }
.mock-table tbody tr:nth-child(6)  { animation-delay: 1.05s; }
.mock-table tbody tr:nth-child(7)  { animation-delay: 1.11s; }
.mock-table tbody tr:nth-child(8)  { animation-delay: 1.17s; }
.mock-table tbody tr:nth-child(9)  { animation-delay: 1.23s; }
.mock-table tbody tr:nth-child(10) { animation-delay: 1.29s; }
.mock-table tbody tr:nth-child(11) { animation-delay: 1.35s; }
.mock-table tbody tr:nth-child(12) { animation-delay: 1.41s; }
/* the YOU row gets a one-time highlight sweep once rows have landed */
.mock-table .hl-row { position: relative; }
.mock-table .hl-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(20, 184, 166, 0.18) 50%, transparent 80%);
  background-size: 250% 100%;
  animation: polish-sweep 1.4s ease-in-out 2.1s backwards;
  background-position: 200% 0;
  pointer-events: none;
}
@keyframes polish-sweep {
  from { background-position: 200% 0; }
  to   { background-position: -50% 0; }
}

/* ---------- live-data badge: radar pulse ring ---------- */
.hero-badge-dot {
  position: relative;
  animation: none;
}
.hero-badge-dot::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--teal-light, #14B8A6);
  animation: polish-radar 2.2s ease-out infinite;
}
@keyframes polish-radar {
  0%   { transform: scale(1); opacity: 0.9; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ---------- nav shadow once scrolled ---------- */
.nav { transition: box-shadow 0.25s var(--ease-out); }
.nav.scrolled { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 8px 24px rgba(0, 0, 0, 0.16); }

@media (prefers-reduced-motion: reduce) {
  .mock-table .bar-f, .rank-bar-fill, .mock-table tbody tr,
  .mock-table .hl-row::after, .hero-badge-dot::after { animation: none; }
}

/* ---------- PROTOTYPE (item 7): angled section dividers ----------
   Dark band and teal CTA get gently slanted edges. Negative top margin
   overlaps the previous section so the notch reveals ITS background.
   Remove this block to revert. */
.section-sides {
  margin-top: -36px;
  clip-path: polygon(0 36px, 100% 0, 100% calc(100% - 36px), 0 100%);
  padding-top: 132px;
  padding-bottom: 132px;
}
.who { margin-top: -36px; padding-top: 136px; }
.section-cta {
  margin-top: -36px;
  clip-path: polygon(0 0, 100% 36px, 100% 100%, 0 100%);
  padding-top: 136px;
}
@media (max-width: 768px) {
  .section-sides { margin-top: -20px; clip-path: polygon(0 20px, 100% 0, 100% calc(100% - 20px), 0 100%); padding-top: 110px; padding-bottom: 110px; }
  .who { margin-top: -20px; padding-top: 110px; }
  .section-cta { margin-top: -20px; clip-path: polygon(0 0, 100% 20px, 100% 100%, 0 100%); padding-top: 110px; }
}

/* ---------- demo form: tighter corners ---------- */
.demo-form-wrapper { border-radius: 10px; }
.demo-form-wrapper::before { border-radius: 11px; }

/* ---------- lifecycle ribbon: glyphs inherited near-black text on the
   dark counsel theme (its --teal-muted is dark); set explicit color ---------- */
.lc-dot { color: var(--teal-light, #14B8A6); }

/* hero mockup scroll depth — transform-origin keeps the tilt pivoting at top */
.hero-mockup-wrapper.scroll-depth{transform-origin:center top;will-change:transform,opacity;transition:transform 0.12s linear,opacity 0.12s linear}

/* ---------- deep charcoal + brand-glow surface (reusable) ----------
   The atmosphere used in the hero animation + clips: #0C0A09 charcoal,
   a faint 26px dot grid, a teal glow (top-right) and a soft coral glow
   (bottom-left). Add `.bg-deep` to any full-bleed section. Content wrapped
   in .container / .container-narrow is lifted above the glows. */
.bg-deep{position:relative;overflow:hidden;background-color:#0C0A09;
  background-image:radial-gradient(rgba(255,255,255,0.035) 1px,transparent 1px);background-size:26px 26px}
.bg-deep::before{content:"";position:absolute;top:-130px;right:-120px;width:520px;height:520px;max-width:90%;
  background:radial-gradient(circle,rgba(15,118,110,0.16) 0%,transparent 70%);pointer-events:none}
.bg-deep::after{content:"";position:absolute;bottom:-150px;left:-120px;width:480px;height:480px;max-width:90%;
  background:radial-gradient(circle,rgba(232,114,90,0.06) 0%,transparent 70%);pointer-events:none}
.bg-deep > .container,.bg-deep > .container-narrow{position:relative;z-index:1}