/* ============================================================
   PREMIUM POLISH LAYER
   Purely additive/enhancing overrides on top of the existing
   design system — no structural, content, or behavioral changes.
   Loaded last so it can refine tokens, depth, and micro-interactions.
   ============================================================ */

:root{
  --shadow: 0 1px 2px rgba(8,24,28,.05), 0 2px 8px rgba(8,24,28,.05), 0 24px 56px rgba(8,24,28,.12);
  --shadow-lift: 0 1px 2px rgba(8,24,28,.06), 0 30px 70px rgba(8,24,28,.16);
  --ease-premium: cubic-bezier(.19,1,.22,1);
}

html{ scroll-behavior:smooth; }

body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{ background:rgba(11,143,125,.22); color:#0a2620; }

/* Slim, premium scrollbar (progressive enhancement, no layout impact) */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:rgba(11,143,125,.25); border-radius:999px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:rgba(11,143,125,.45); background-clip:padding-box; }

a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
  border-radius:6px;
}

/* ── Brand mark: subtle gradient shimmer on the accent letters ── */
.lp-logo span,
h1 span[style*="color:#0f9988"],
h1 span[style*="color: #0f9988"]{
  background:linear-gradient(120deg,#0b8f7d 0%,#2dd66f 55%,#0b8f7d 100%);
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

/* ── Nav: glassier, slightly more premium chrome ── */
.lp-nav{
  background:rgba(237,240,242,.72);
  box-shadow:0 1px 0 rgba(17,33,38,.04);
}
/* Nav type scale was disproportionately small next to the hero's large
   type — bring it up to a size that reads as confident, not cramped,
   while keeping the header clearly subordinate to the hero.
   Scoped to min-width so it never overrides the existing mobile nav
   tuning in coach.css (which shrinks these same properties below 680px). */
@media (min-width:681px){
  .lp-nav-inner{ padding:18px 0; }
  .lp-logo{ font-size:23px; }
  .lp-nav-links a{ font-size:15px; }
  .lp-nav-cta{
    font-size:14px;
    padding:12px 22px;
  }
}
.lp-nav-cta{
  background:linear-gradient(135deg,#152b30,#0a1214);
  box-shadow:0 10px 24px rgba(8,24,28,.22);
  transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium);
}
.lp-nav-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px rgba(8,24,28,.3);
}
.lp-nav-cta:active{ transform:translateY(0); }

/* ── Primary CTAs: richer gradient + confident lift on hover ── */
.btn-primary,
.modal-btn,
.tc-btn,
.chm-btn,
.lp-footer-download-btn{
  background:linear-gradient(135deg,#31de86 0%,#19c474 55%,#0fa564 100%);
  transition:transform .28s var(--ease-premium), box-shadow .28s var(--ease-premium), filter .2s ease;
}
.btn-primary:hover,
.modal-btn:hover,
.tc-btn:hover,
.chm-btn:hover,
.lp-footer-download-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.03);
  box-shadow:0 20px 40px rgba(15,165,100,.32);
}
.btn-primary:active,
.modal-btn:active,
.tc-btn:active,
.chm-btn:active{
  transform:translateY(0);
  filter:brightness(.98);
}

.lp-btn-white{
  transition:transform .28s var(--ease-premium), box-shadow .28s var(--ease-premium);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.lp-btn-white:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 42px rgba(0,0,0,.24);
}
.lp-btn-ghost{
  transition:transform .28s var(--ease-premium), background .2s ease, border-color .2s ease;
}
.lp-btn-ghost:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.75);
}

/* ── Secondary interactive surfaces: consistent, smoother lift ── */
.segmented button,
.tab,
.sort-btn,
.lp-persona-card,
.fab,
.download-float{
  transition:transform .25s var(--ease-premium), box-shadow .25s var(--ease-premium), background .2s ease, border-color .2s ease;
}

/* ── Panels: deeper, softer ambient shadow for a more premium sense of depth ── */
.panel,
.lp-challenge{
  box-shadow:var(--shadow);
}

.lp-persona,
.lp-step4,
.lp-trust-card,
.lp-problem-card{
  transition:transform .3s var(--ease-premium), box-shadow .3s var(--ease-premium), border-color .3s ease;
}
.lp-step4:hover,
.lp-trust-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 44px rgba(8,24,28,.08);
  border-color:#cfe6e0;
}

/* ── Stat callouts: a touch more presence ── */
.stat{
  transition:transform .25s var(--ease-premium), box-shadow .25s var(--ease-premium);
}
.stat:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 32px rgba(8,24,28,.08);
}

/* ── Phone mock: slightly richer ambient glow to feel like a hero product shot ── */
.phone{
  transition:transform .5s var(--ease-premium);
}

/* ── Extra breathing room between final-CTA buttons and the social proof line ── */
.lp-final-cta .lp-dl-social{
  margin-top:28px;
  display:block;
}

/* ── Download social proof, dark-on-light variant (used in hero) ── */
.lp-dl-social--dark{
  color:var(--muted,#6f7d84);
}
.lp-dl-social--dark strong{ color:var(--ink,#112126); }

/* ── Headline polish ── */
.lp-h2, h1{
  text-wrap:balance;
}

/* ============================================================
   DEEPER PREMIUM PASS
   Richer atmosphere, tighter type rhythm, more considered depth.
   Still purely additive — no selectors removed, no markup required.
   ============================================================ */

body{
  background:
    radial-gradient(1100px 620px at 8% -8%, rgba(11,143,125,.14), transparent 60%),
    radial-gradient(900px 560px at 96% 4%, rgba(45,214,111,.13), transparent 55%),
    radial-gradient(700px 500px at 50% 115%, rgba(11,143,125,.08), transparent 60%),
    linear-gradient(180deg,#eef2f3 0%,#e6ecee 55%,#e2e9eb 100%);
  background-attachment:fixed;
}

/* Fine grain texture for a more tactile, printed feel */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.02 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.lp-nav, .wrap, .lp-section, .lp-section-narrow, footer{ position:relative; z-index:1; }

/* ── Type balance: real weights instead of browser-synthesized bold,
   and tabular figures wherever a number is the focal point ── */
h1, h2, h3, .lp-h2, .lp-logo, .eyebrow, .lp-kicker,
.tc-diff-cell-val, .chm-mini-badge, .lp-nav-cta, .btn, .modal-btn{
  font-weight:600;
}
h1{ font-weight:700; }
.lp-h2, .stat strong, .score .big{ font-weight:700; }

.stat strong, .score .big, [data-dl-count], .tc-diff-cell-val, .chm-mini-badge{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

body, .lead, .lp-lead, p{
  font-weight:400;
  line-height:1.65;
}

/* ── Tighter, more confident type rhythm ── */
.lp-logo{ letter-spacing:-.02em; }
h1{ letter-spacing:-.045em; }
.lp-h2{ letter-spacing:-.025em; }
.eyebrow{ letter-spacing:.16em; }
.lead, .lp-lead{ letter-spacing:-.005em; }

/* ── Hero panel: quiet gradient edge + more air ── */
.sidebar.panel{
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82)) padding-box,
    linear-gradient(160deg, rgba(11,143,125,.35), rgba(45,214,111,.08) 40%, rgba(17,33,38,.06)) border-box;
  border:1px solid transparent;
}

.stat{
  background:linear-gradient(180deg,#ffffff,#f7fbfa);
  border-color:rgba(11,143,125,.14);
}
.stat strong{
  font-family:"Space Grotesk",sans-serif;
  letter-spacing:-.02em;
}

.segmented button.active{
  box-shadow:0 14px 30px rgba(11,143,125,.28);
}

.score{
  background:linear-gradient(180deg,#f8fbfa,#eef7f4);
  border-color:rgba(11,143,125,.16);
}
.score .big{ font-family:"Space Grotesk",sans-serif; letter-spacing:-.02em; }

/* ── Section rhythm: a hairline divider between major sections instead of hard edges ── */
.lp-section + .lp-section,
.lp-section-narrow + .lp-section-narrow,
.lp-section + .lp-section-narrow,
.lp-section-narrow + .lp-section{
  border-top:1px solid rgba(17,33,38,.06);
}

/* ── Kicker chip: subtle inner glow ── */
.lp-kicker, .eyebrow{
  box-shadow:inset 0 0 0 1px rgba(11,143,125,.1);
}

/* ── Persona / trust cards: crisper edge, softer float ── */
.lp-persona{
  box-shadow:0 24px 60px rgba(8,24,28,.08), 0 2px 6px rgba(8,24,28,.04);
}

/* ── Phone mockup: ambient glow so it reads as the hero product shot ── */
.demo-phone-wrap, .phone-frame, .phone{
  filter:drop-shadow(0 30px 60px rgba(8,24,28,.22));
}

/* ── Footer: quieter, editorial tone ── */
.lp-footer-rich{
  background:linear-gradient(180deg,#0d2126,#0a1a1e);
}

/* ============================================================
   SCROLL REVEAL (paired with assets/js/scroll-reveal.js)
   Only takes effect once JS confirms it's running (html.js-reveal),
   so content never disappears if JavaScript fails to load.
   ============================================================ */
.js-reveal .reveal-on-scroll{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease-premium), transform .8s var(--ease-premium);
  will-change:opacity, transform;
}
.js-reveal .reveal-on-scroll.is-visible{
  opacity:1;
  transform:none;
}

/* ============================================================
   HERO VISUAL CENTERPIECE
   Soft, slow-moving gradient blobs behind the demo panels give the
   hero a sense of depth and motion without competing with content.
   ============================================================ */
.wrap{ position:relative; isolation:isolate; }
.wrap::before, .wrap::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(80px);
  z-index:-1;
  pointer-events:none;
  animation:premiumFloat 16s ease-in-out infinite;
}
.wrap::before{
  width:380px; height:380px;
  background:radial-gradient(circle, rgba(45,214,111,.32), transparent 70%);
  top:-120px; left:-100px;
}
.wrap::after{
  width:340px; height:340px;
  background:radial-gradient(circle, rgba(11,143,125,.28), transparent 70%);
  top:60px; right:-110px;
  animation-delay:-8s;
}
@keyframes premiumFloat{
  0%, 100%{ transform:translate(0,0); }
  50%{ transform:translate(18px,-26px); }
}
@media (max-width:900px){
  .wrap::before, .wrap::after{ display:none; }
}

/* ============================================================
   MOBILE POLISH
   Small refinements on top of the site's existing responsive rules —
   comfortable tap targets and tidier spacing at narrow widths.
   ============================================================ */
@media (max-width:680px){
  .lp-nav-cta{ min-height:38px; }
  h1{ line-height:1.02; }
  .lp-final-cta{ padding-left:24px; padding-right:24px; }
  .sidebar.panel{ border-radius:24px; }
}
@media (max-width:420px){
  .stat-row{ grid-template-columns:1fr 1fr; gap:10px; }
  .stat{ padding:14px; }
  .stat strong{ font-size:24px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .js-reveal .reveal-on-scroll{ opacity:1; transform:none; }
}