/* CoachRocks marketing site — base + interactions.
   Converted from the Claude Design template; layout lives inline in the HTML,
   this file holds globals, hover states, the scroll-reveal, marquee + FAQ. */

body {
  margin: 0;
  font-family: 'Instrument Sans', 'Helvetica Neue', sans-serif;
  color: #17151f;
  background: #fffdfa;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: #5b2be0; text-decoration: none; }
a:hover { color: #4520b0; }

img, video { max-width: 100%; }

/* mobile / desktop show-hide */
.m-only { display: none !important; }
@media (min-width: 768px) {
  .row-vr { grid-template-columns: 1fr 1.4fr !important; }
  .row-vl { grid-template-columns: 1.4fr 1fr !important; }
}
@media (max-width: 767px) {
  .m-first { order: -1; }
  .m-only { display: flex !important; }
  .d-only { display: none !important; }
}

/* Gradient CTA buttons — hover lift (was style-hover in the DC template).
   Base visuals stay inline per-button so each keeps its exact size/shadow. */
.btn-primary { transition: transform .15s ease, box-shadow .15s ease; }
.btn-primary:hover { color: #fff; transform: translateY(-2px); }

/* Scroll reveal — IntersectionObserver adds .is-visible (cross-browser;
   replaces the Chromium-only animation-timeline: view()). No-JS shows content. */
.reveal { opacity: 1; }
html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
html.js .reveal.is-visible { opacity: 1; transform: none; }

/* Floating blobs + logo marquee */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: marquee 30s linear infinite;
}
.marquee-set { display: flex; align-items: center; gap: clamp(40px, 5vw, 72px); padding-right: clamp(40px, 5vw, 72px); flex-shrink: 0; }
.marquee-set img { flex-shrink: 0; }
.marquee-mask:hover .marquee-track { animation-play-state: paused; }

/* FAQ accordion */
.faq-q { -webkit-tap-highlight-color: transparent; }
.faq-a[hidden] { display: none; }

/* Sticky mobile CTA — slides away when the footer is in view */
.sticky-cta { transition: transform .3s ease; }
.sticky-cta.is-hidden { transform: translateY(140%); }

/* Pricing card buttons */
.btn-light { transition: transform .15s ease, box-shadow .15s ease; }
.btn-light:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(20,10,40,0.18); }
.btn-outline { transition: background .15s ease, transform .15s ease, border-color .15s ease; }
.btn-outline:hover { transform: translateY(-2px); background: rgba(109,62,242,0.06); border-color: rgba(109,62,242,0.5); }

/* Green circle checkmark (pricing) */
.chk { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: #22c55e; color: #fff; font-size: 11.5px; font-weight: 800; line-height: 1; flex-shrink: 0; }
.chk::before { content: "\2713"; }
.chk-sm { width: 18px; height: 18px; font-size: 10.5px; }

/* Pricing comparison table */
.cmp-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 460px; }
.cmp th, .cmp td { padding: 13px 16px; text-align: left; border-bottom: 1px solid rgba(23,21,31,0.07); }
.cmp thead th { font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a8494; font-weight: 700; }
.cmp .col-v { text-align: center; width: 128px; color: #3d3a49; white-space: nowrap; }
.cmp thead .col-v.pro { color: #6d3ef2; }
.cmp .sec td { background: #f4f0ff; color: #6d3ef2; font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }
.cmp .feat { color: #3d3a49; }
.cmp .dash { color: #c4c0cc; }
/* Mobile (<=600px): the 3-column table would force horizontal scroll, which is
   unusable on phones. Restructure into a stack of feature cards — each feature shows
   its Free and Pro value side-by-side in labeled boxes, so both plans stay comparable
   at a glance with zero horizontal scroll. Pure CSS: the "Free"/"Pro" labels are
   injected by column position (nth-of-type), so the table markup is unchanged and
   the desktop table is untouched. */
@media (max-width: 600px) {
  .cmp-wrap { border: none; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .cmp { min-width: 0; }
  .cmp thead { display: none; }
  .cmp tbody, .cmp tr, .cmp td { display: block; }
  .cmp td { border: none; padding: 0; width: auto; text-align: left; white-space: normal; }

  .cmp tbody tr.sec { margin: 20px 0 10px; }
  .cmp tbody tr.sec td { background: none; color: #6d3ef2; font-weight: 700; font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; }

  .cmp tbody tr:not(.sec) {
    display: grid; grid-template-columns: 1fr 1fr; gap: 9px 10px;
    background: #fff; border: 1px solid rgba(23,21,31,0.07); border-radius: 12px;
    padding: 13px 14px; margin-bottom: 10px; box-shadow: 0 4px 12px rgba(40,20,90,0.04);
  }
  .cmp tbody tr:not(.sec) td.feat { grid-column: 1 / -1; font-weight: 700; color: #17151f; font-size: 15px; }
  .cmp tbody tr:not(.sec) td.col-v {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    background: #f8f6fc; border-radius: 9px; padding: 9px 11px; font-size: 15px; color: #3d3a49; text-align: center;
  }
  .cmp tbody tr:not(.sec) td:nth-of-type(3).col-v { background: #f3ecfb; }
  .cmp tbody tr:not(.sec) td:nth-of-type(2)::before { content: "Free"; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8a8494; }
  .cmp tbody tr:not(.sec) td:nth-of-type(3)::before { content: "Pro"; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #6d3ef2; }
}

/* Collapsible comparison disclosure (native <details>) — collapsed by default, all widths. */
.cmp-disclosure { width: 100%; }
.cmp-disclosure > summary { list-style: none; cursor: pointer; width: fit-content; margin: 0 auto; display: flex; align-items: center; gap: 8px; color: #6d3ef2; font-weight: 600; font-size: 15.5px; padding: 10px 20px; border-radius: 999px; border: 1.5px solid rgba(109,62,242,0.28); background: #fff; -webkit-tap-highlight-color: transparent; transition: background .15s ease; }
.cmp-disclosure > summary::-webkit-details-marker { display: none; }
.cmp-disclosure > summary::marker { content: ""; }
.cmp-disclosure > summary:hover { background: rgba(109,62,242,0.06); }
.cmp-caret { font-size: 12px; line-height: 1; transition: transform .2s ease; }
.cmp-disclosure[open] > summary .cmp-caret { transform: rotate(180deg); }

/* Hero video — cap height on short desktop viewports so the caption clears the fold. */
@media (min-width: 768px) and (max-height: 820px) {
  .hero-video { max-height: 62vh; object-fit: cover; object-position: center; }
}

/* ── Mobile feature mini-mocks (shown < 768px in place of product-recording videos).
   Feature videos carry data-src (no src) so their .mp4 never downloads on phones;
   main.js sets src only at >=768px. The hero video keeps a real src and plays on mobile. */
.feat-mock { display: none; }
@media (max-width: 767px) {
  .feat-video { display: none !important; }
  .feat-mock { display: block !important; }
}
.mock {
  position: relative;
  background: #fff;
  border: 1px solid rgba(23,21,31,0.06);
  border-radius: 18px;
  padding: 18px;
  max-width: 400px;
  margin: 0 auto;
  box-shadow: 0 16px 40px rgba(40,20,90,0.13), 7px 9px 0 -1px #e8ddfa;
}
.mock-chip { display: inline-flex; align-items: center; background: #f4f0ff; color: #5b2be0; border-radius: 999px; padding: 8px 13px; font-size: 15px; font-weight: 600; }

/* Hero self-writing note card — note lines fade/slide in, chips stamp in (main.js drives it).
   Default (no .anim) is the finished state, so no-JS and reduced-motion show it complete. */
html.js .hero-note.anim .nl { opacity: 0; transform: translateY(8px); transition: opacity .5s ease, transform .5s ease; }
html.js .hero-note.anim .nl.in { opacity: 1; transform: none; }
html.js .hero-note.anim .nc { opacity: 0; transform: scale(.8); transition: opacity .4s ease, transform .45s cubic-bezier(0.34, 1.56, 0.64, 1); }
html.js .hero-note.anim .nc.in { opacity: 1; transform: none; }

/* ── Motion system ───────────────────────────────────────────────────────────
   Scroll-in reveals: main.js adds .on to an .io container, then staggers its .st
   children (adds .in). transform + opacity only; plays once, then settles. */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .78; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: .45; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes floatSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes sheen { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(320%) skewX(-18deg); } }

html.js .io .st { opacity: 0; transform: translateY(12px); will-change: transform, opacity; }
html.js .io .st.pop { transform: scale(.82); }
html.js .io .st.left { transform: translateX(-14px); }
html.js .io .st.in { opacity: 1; transform: none; transition: opacity .34s ease-out, transform .4s ease-out; }
html.js .io .st.pop.in { transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }

/* Sequential row reveal for grouped illustrations (mock cards, roster) */
html.js .io.seq > * { opacity: 0; transform: translateY(12px); will-change: transform, opacity; }
html.js .io.seq.on > * { opacity: 1; transform: none; transition: opacity .34s ease-out, transform .4s ease-out; }
html.js .io.seq.on > *:nth-child(2) { transition-delay: .11s; }
html.js .io.seq.on > *:nth-child(3) { transition-delay: .22s; }
html.js .io.seq.on > *:nth-child(4) { transition-delay: .33s; }
html.js .io.seq.on > *:nth-child(5) { transition-delay: .44s; }
html.js .io.seq.on > *:nth-child(6) { transition-delay: .55s; }
html.js .io.seq.on > *:nth-child(7) { transition-delay: .66s; }

/* Continuous motions (kept within budget: only floaters/sparkles/glow move at rest). */
.hero-glow { animation: breathe 7s ease-in-out infinite; }
.bobber { will-change: transform; }
.mem-spark { animation: twinkle 4s ease-in-out infinite; }
.cred-spark { animation: twinkle 5s ease-in-out infinite; }
.mem-video { animation: floatSlow 6.5s ease-in-out infinite; }
@media (max-width: 767px) { .hero-accent { transform: scale(0.85); } }

/* Hero note typing cursor (main.js toggles .typing during the type-in). */
.type-cursor { display: none; width: 2px; height: 17px; margin-left: 3px; background: #6d3ef2; border-radius: 1px; vertical-align: -3px; }
html.js .hero-note.anim.typing .type-cursor { display: inline-block; animation: blink 1s step-end infinite; }

/* Capstone roster (desktop): lands from flat into its -1.5deg tilt on scroll-in.
   Base state = final look, so no-JS / reduced-motion just show it tilted. */
.tilt-in { transform: rotate(-1.5deg); }
html.js .io .tilt-in { opacity: 0; transform: rotate(0deg) translateY(16px); box-shadow: 0 12px 30px rgba(40,20,90,0.12); }
html.js .io.on .tilt-in { opacity: 1; transform: rotate(-1.5deg); box-shadow: 0 32px 72px rgba(40,20,90,0.22); transition: opacity .4s ease-out, transform .55s ease-out, box-shadow .55s ease-out; }

/* CTA sheen sweep on hover only — no idle animation on buttons. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; inset: 0; width: 45%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); transform: translateX(-160%) skewX(-18deg); pointer-events: none; }
.btn-primary:hover::after { animation: sheen .7s ease-out; }

/* Transformation "Breakthrough" badge — centered scale-pop reveal that keeps its
   translateX(-50%) centering (the generic .st transform would knock it off-center). */
html.js .io .st.ctr { transform: translateX(-50%) scale(.82); }
html.js .io .st.ctr.in { transform: translateX(-50%); transition: opacity .34s ease-out, transform .45s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Desktop feature-video chip rail ─────────────────────────────────────────
   A horizontal row of chips UNDER each feature video (one per real on-screen
   section, in order). Chips pop in on scroll (.st), then main.js lights the active
   chip = the last chip whose data-at fraction <= currentTime/duration — per-chip
   fractions, because the clips' sections are uneven. Fraction-based, so it stays
   synced every loop. Hidden on phones (lives inside .feat-video, display:none < 768px). */
.feat-card { background: #fff; border-radius: 18px; padding: 10px; box-shadow: 0 16px 44px rgba(40,20,90,0.1); }
.chip-rail { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; }
.rc { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; line-height: 1.2; color: #6f6a7d; background: #fff; border: 1px solid rgba(23,21,31,0.09); border-radius: 999px; padding: 7px 12px; }
.rc .ic { font-size: 14px; line-height: 1; flex-shrink: 0; }
html.js .io .rc.on { color: #fff; background: linear-gradient(135deg, #8a5cf6, #5b2be0); border-color: transparent; transform: scale(1.05) !important; box-shadow: 0 8px 18px rgba(91,43,224,0.26); transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1), background .3s ease, color .3s ease, box-shadow .3s ease; }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  html.js .hero-note.anim .nl, html.js .hero-note.anim .nc { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .io .st, html.js .io.seq > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  html.js .io .st.ctr { transform: translateX(-50%) !important; }
  html.js .io .rc.on { transform: none !important; }
  html.js .io .tilt-in { opacity: 1 !important; transform: rotate(-1.5deg) !important; box-shadow: 0 32px 72px rgba(40,20,90,0.22) !important; transition: none !important; }
  html.js .hero-note.anim.typing .type-cursor { display: none; animation: none; }
  .marquee-track { animation: none; }
  .blob, .mem-spark, .cred-spark, .hero-glow, .bobber, .mem-video, .plat-badge { animation: none !important; }
  .hero-accent > * { animation: none !important; }
  .btn-primary::after { display: none; }
  .btn-primary { transition: none; }
}