/* ============================================================
   CodebyCarter — polish.css
   The "an expert coder had fun" pass: refined typography,
   custom scrollbars, grain texture on dark stages, focus
   states, reduced-motion respect, print stylesheet.
   ============================================================ */

/* ---------- Refined typography ---------- */
html{
  font-feature-settings:"kern","liga","calt";
  -webkit-font-feature-settings:"kern","liga","calt";
  text-rendering:optimizeLegibility;
  scroll-padding-top:96px;
}
.hero-h1,.section-title,.footer-shout,.finale-h,.lab-magic-h{
  text-rendering:geometricPrecision;
  font-feature-settings:"kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
/* Tabular numerals on every price-y / count-y figure */
.tier-price,.roi-result-number,.roi-label-value,.tint-quote-v,.tint-row-value,
.spots .num,.hero-stat .num,.lab-svc-price,.lab-product-price,.lab-listing-price,
.lab-price-amt,.lab-sale-price,.lab-callbtn-num,.lab-google-meta,
[data-count],#elapsed,#year{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum","kern";
}

/* ---------- Custom scrollbar (site-wide) ---------- */
html{scrollbar-width:thin;scrollbar-color:rgba(168,85,247,.45) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,rgba(168,85,247,.55),rgba(236,72,153,.45));
  border-radius:99px;border:2px solid transparent;background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(168,85,247,.85),rgba(236,72,153,.65));
  background-clip:padding-box;
}

/* ---------- Subtle grain on dark stages ---------- */
.stage-slate,.stage-midnight,.stage-neon,.stage-chaos,.stage-signature{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-blend-mode:overlay;
}

/* ---------- Focus states (accessibility) ---------- */
:focus-visible{outline:2px solid #EC4899;outline-offset:4px;border-radius:6px}
button:focus-visible,a:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible{
  outline:2px solid #EC4899;outline-offset:3px;
}

/* ---------- Selection polish ---------- */
::selection{background:#EC4899;color:#FAFAF7;text-shadow:none}
.hero-h1::selection,.section-title::selection,.finale-h::selection,
.footer-shout::selection,.lab-mock-h::selection{
  background:#A855F7;color:#FAFAF7;-webkit-text-fill-color:#FAFAF7;
}

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .marquee-track,.end-marquee-track,.hero-rotator .stack,
  .btn-grad,.btn-mega,.tier.is-featured::before,.spots .num,
  .stage-neon::before{animation:none !important}
  .lc-cursor{animation:none !important;opacity:.6}
}

/* ---------- Print stylesheet ---------- */
@media print{
  body{background:#fff !important;color:#000 !important;cursor:auto !important}
  .cursor,.cursor-trail,.progress,.to-top,.vibe-btn,.party,.spark,.click-spark,
  .chaos-canvas,.scroll-cue,.egg-toast,.hero-orb,.hero-rule,
  .lab-stage,.lab-extras,.lab-controls,.lab-magic,
  .demo-card,.doodle-wrap,.lc-controls,
  .end-marquee,.marquee,
  #faq summary .faq-icon,.flow-bridge{display:none !important}
  .nav{position:static !important;background:none !important;border:0 !important;padding:0 !important}
  section{padding:18pt 0 !important;page-break-inside:avoid;break-inside:avoid}
  .section-title,.hero-h1,.finale-h,.footer-shout{
    color:#000 !important;background:none !important;
    -webkit-text-fill-color:#000 !important;
  }
  .ital{font-style:italic !important;color:#000 !important;background:none !important;-webkit-text-fill-color:#000 !important}
  .tier,.step,.svc,.faq-item{break-inside:avoid;border:1px solid #ccc !important}
  a::after{content:" (" attr(href) ")";font-size:9pt;color:#666}
}

/* ---------- Tiny detail: dotted underline on inline note links ---------- */
.faq-body a,.footer-meta a{
  text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-position:0 100%;background-repeat:no-repeat;
  opacity:.85;transition:opacity .25s ease;
}
.faq-body a:hover,.footer-meta a:hover{opacity:1}

/* ---------- Inline "this is just an example" note inside demo cards ---------- */
.demo-note{
  padding:14px 22px;
  background:rgba(168,85,247,.06);
  border-top:1px solid rgba(168,85,247,.18);
  font-size:13px;color:#A0A0B0;line-height:1.55;
  font-family:inherit;
}
.demo-note b{color:#F5F5F7;font-weight:600}
.demo-note em{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg,#A855F7,#EC4899);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- Subtle border-color reactive to vibe ---------- */
.demo-card:hover{border-color:rgba(168,85,247,.25);transition:border-color .35s ease}