/* styles.css — FinTok "Talk → Ship" landing page recreation.
   Base rules + keyframes copied verbatim from the design-tool export's
   <helmet><style> block. Rules referencing design-tool chrome attributes
   ([data-omelette-chrome], [data-om-starter]) were removed — they targeted
   the export tool's own UI, not this page. Hover classes at the bottom are
   new: they replace the export's style-hover="..." attributes, which have
   no standalone-HTML equivalent. */

body{margin:0;background:#FFFFFF;font-family:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#17255A;text-decoration:none}
a:hover{color:#1B7A46}

.fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fx-layer{position:absolute;inset:0;will-change:transform;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.fx-l1{transform:translate3d(calc(var(--px,0) * 10px),calc(var(--py,0) * 8px),0)}
.fx-l2{transform:translate3d(calc(var(--px,0) * 18px),calc(var(--py,0) * 14px),0)}
.fx-a1{animation:fxA 19s ease-in-out infinite}
.fx-a2{animation:fxB 23s ease-in-out infinite}
.fx-a3{animation:fxC 16s ease-in-out infinite}
.fx-a4{animation:fxD 21s ease-in-out infinite}
.fx-grid{animation:fxGrid 24s linear infinite}
.fx-rows{animation:fxRow 18s ease-in-out infinite}
.fx-sweep{animation:fxSweep 14s ease-in-out infinite}
.fx-fill{animation:fxFill 16s ease-in-out infinite}
.fx-tick{animation:fxTick 16s ease-in-out infinite}
.fx-draw path{animation:fxDraw 18s ease-in-out infinite}
.fx-draw2 path{animation:fxDraw 18s ease-in-out 6s infinite}
@keyframes fxA{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-13px,9px,0)}}
@keyframes fxB{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(11px,-12px,0)}}
@keyframes fxC{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(-8px,-14px,0)}}
@keyframes fxD{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(9px,13px,0)}}
@keyframes fxGrid{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-160px,-160px,0)}}
@keyframes fxRow{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes fxSweep{0%{transform:translateX(-130%)}45%{transform:translateX(130%)}100%{transform:translateX(130%)}}
@keyframes fxFill{0%{width:6%}42%{width:72%}72%{width:72%}100%{width:6%}}
@keyframes fxTick{0%,38%{opacity:0}52%{opacity:1}86%{opacity:1}100%{opacity:0}}
@keyframes fxDraw{0%{stroke-dashoffset:520;opacity:0}14%{opacity:.6}62%{stroke-dashoffset:0;opacity:.55}84%{opacity:0}100%{stroke-dashoffset:0;opacity:0}}
@media (max-width:1240px){.fx-min{display:none}}
@media (max-width:1080px){.fx-l1 > div{display:none}}
@media (max-width:1080px){.fx-plat{opacity:.32 !important}}
@media (max-width:880px){.fx-layer{transform:none !important}}
@media (prefers-reduced-motion:reduce){.fx-a1,.fx-a2,.fx-a3,.fx-a4,.fx-grid,.fx-rows,.fx-sweep,.fx-fill,.fx-tick,.fx-draw path,.fx-draw2 path{animation:none !important}.fx-layer{transition:none}}
.v-float{animation:vFloat 26s ease-in-out infinite}
@keyframes vFloat{0%,100%{transform:translate3d(0,0,0)}34%{transform:translate3d(-8px,-6px,0)}67%{transform:translate3d(7px,5px,0)}}
@media (prefers-reduced-motion:reduce){.v-float{animation:none !important}}
.rv{opacity:0;transform:translateY(20px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.is-in .rv{opacity:1;transform:none}
.rv-1{transition-delay:.04s}.rv-2{transition-delay:.14s}.rv-3{transition-delay:.24s}.rv-4{transition-delay:.36s}.rv-5{transition-delay:.5s}
.fm-underline{transform:scaleX(0);transform-origin:0 50%;transition:transform 1s cubic-bezier(.2,.7,.2,1) .55s}
.is-in .fm-underline{transform:scaleX(1)}
.fm-cta{position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.2,.7,.2,1),background .25s ease}
.fm-cta:hover{transform:translateY(-2px)}
.is-in .fm-cta{animation:fmPulse 3s ease-out 1.1s infinite}
.is-in .fm-sheen{animation:fmSheen 4.4s ease-in-out 1.6s infinite}
@keyframes fmPulse{0%{box-shadow:0 0 0 0 rgba(27,122,70,.42),0 14px 34px -20px rgba(15,26,68,.7)}62%{box-shadow:0 0 0 18px rgba(27,122,70,0),0 14px 34px -20px rgba(15,26,68,.7)}100%{box-shadow:0 0 0 0 rgba(27,122,70,0),0 14px 34px -20px rgba(15,26,68,.7)}}
@keyframes fmSheen{0%{transform:translateX(-140%) skewX(-18deg)}42%{transform:translateX(240%) skewX(-18deg)}100%{transform:translateX(240%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1 !important;transform:none !important;transition:none}.fm-underline{transform:scaleX(1) !important;transition:none}.is-in .fm-cta,.is-in .fm-sheen{animation:none !important}}
@keyframes tsPulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes tsDrift{from{background-position:0 0}to{background-position:0 -28px}}

/* ---- hover rules, converted from the export's style-hover="..." attributes ---- */
/* .btn-cta-navy: hero primary CTA, founding-section CTA, final start-section CTA
   — all three used style-hover="background:#0F1A44" */
.btn-cta-navy:hover{background:#0F1A44}
/* .btn-cta-outline: hero secondary CTA ("Watch the walkthrough")
   — the export's hover was the paper color, invisible on the white canvas; ink instead */
.btn-cta-outline:hover{border-color:#17255A}
/* .link-cta-green: the four mid-page section links (climb/lesson/build/coach)
   — style-hover="border-bottom-color:#1F7A4C" */
.link-cta-green:hover{border-bottom-color:#1F7A4C}
/* .cta-fade-70: pricing Free-card CTA — style-hover="opacity:.7" */
.cta-fade-70:hover{opacity:.7}
/* .cta-fade-85: pricing Pro-card CTA — style-hover="opacity:.85" */
.cta-fade-85:hover{opacity:.85}
/* .link-cta-ladder: final start-section "See the five levels" link
   — style-hover="border-bottom-color:#1B7A46" (distinct from .link-cta-green) */
.link-cta-ladder:hover{border-bottom-color:#1B7A46}

/* ============================================================
   MOBILE RESPONSIVE LAYER
   Everything below only fires under a max-width query. Desktop
   (>=881px) must render pixel-identical to the rules above —
   never add an unscoped rule below this line.

   Markup carries a handful of new classes added purely so these
   queries have something stable to hang onto (the rest of the
   page is styled with inline styles from the design-tool export,
   which these overrides beat with !important):
     .hero-inner        hero's inner content wrapper (#top)
     .feat-copy          copy column in #climb/#lesson/#build/#coach
     .feat-demo           demo-frame column in the same four sections
     .ladder-intro         #ladder section intro paragraph
     .ladder-panel          #ladder-interactive's sticky right column
     .ladder-panel-body      padding block inside the navy ladder panel
     .ladder-panel-grid       "WHAT YOU DO / WHAT YOU LEAVE WITH" grid
     .pricing-cards      #pricing's Free/Pro card grid
     .price-figure         Free card's price figure (Pro's is #pro-price)
     .pro-feature-grid    Pro card's two-column feature list
   ============================================================ */

@media (max-width: 880px) {

  /* hero #top */
  .hero-inner{padding:96px 24px 72px !important}
  #top h1{font-size:44px !important;line-height:1.06 !important}
  #top p{font-size:17px !important}
  #top .btn-cta-navy,
  #top .btn-cta-outline{padding:16px 26px !important;font-size:15.5px !important}

  /* feature sections: #climb #lesson #build #coach */
  #climb,#lesson,#build,#coach{padding:56px 20px !important}
  #climb > div,#lesson > div,#build > div,#coach > div{
    grid-template-columns:1fr !important;
    gap:40px !important;
  }
  .feat-copy{max-width:100% !important;justify-self:start !important;order:-1 !important;min-width:0 !important}
  .feat-demo{max-width:100% !important;padding:10px !important;min-width:0 !important;box-sizing:border-box !important}

  /* #ladder */
  #ladder{padding:56px 20px !important}
  #ladder h2{font-size:32px !important;line-height:1.1 !important}
  .ladder-intro{max-width:100% !important}
  #ladder-interactive{grid-template-columns:1fr !important;gap:32px !important}
  .ladder-panel{position:static !important}
  .ladder-panel-body{padding:28px 22px !important}
  #ladder-ghost-num{font-size:64px !important}
  #ladder-name{font-size:28px !important}

  /* #pricing */
  #pricing{padding:56px 20px !important}
  #pricing h2{font-size:32px !important;line-height:1.1 !important}
  .pricing-cards{grid-template-columns:1fr !important;gap:20px !important}
  .price-figure,#pro-price{font-size:44px !important}

  /* #founding */
  #founding{padding:64px 20px !important}
  #founding h2{font-size:32px !important;line-height:1.1 !important}
  #founding .rv-3{font-size:16px !important}
  .fm-cta{padding:17px 26px !important;font-size:16px !important}

  /* #how */
  #how{padding:48px 20px !important}
  #how > div{grid-template-columns:1fr !important;gap:28px !important}

  /* #start */
  #start{padding:64px 20px 72px !important}
  #start h2{font-size:34px !important;line-height:1.05 !important}

  /* footer */
  footer{padding:20px !important}
}

@media (max-width: 640px) {
  .pro-feature-grid{grid-template-columns:1fr !important}
}

@media (max-width: 560px) {
  #top h1{font-size:38px !important}
  .fx-l1,.fx-l2{display:none !important}
  .ladder-panel-grid{grid-template-columns:1fr !important}
}

/* Sandbox entry: once the walkthrough film ends and holds its last frame, the
   card in the frame becomes the door to the first lesson. The hotspot tracks
   the card's position in the 16:9 composition; the hint chip fades in after a
   beat; clicking zooms into the card and hands off to the live sandbox. */
#sandbox-enter{position:absolute;left:26%;top:20%;width:48%;height:66%;z-index:3;display:none;border-radius:14px;cursor:pointer;transition:box-shadow .3s ease}
#walkthrough.sb-armed #sandbox-enter{display:block}
#sandbox-enter:hover #sandbox-cta,#sandbox-enter:focus-visible #sandbox-cta{box-shadow:0 0 0 2px rgba(27,122,70,.45),0 18px 40px -22px rgba(15,26,68,.55)}
#sandbox-enter:focus-visible{outline:none}
#sandbox-cta{position:absolute;left:50%;top:74%;transform:translate(-50%,18px);display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:999px;background:#17255A;color:#FFFFFF;font:600 15.5px/1 'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;white-space:nowrap;box-shadow:0 18px 40px -22px rgba(15,26,68,.55);opacity:0;transition:opacity 1.1s cubic-bezier(.22,.61,.36,1),transform 1.1s cubic-bezier(.22,.61,.36,1),background .2s ease}
.sb-armed #sandbox-cta{opacity:1;transform:translate(-50%,0)}
#sandbox-enter:hover #sandbox-cta{background:#0F1A44}
@media (max-width:880px){#sandbox-cta{padding:11px 20px;font-size:13.5px;top:72%}}
#sandbox-fade{position:absolute;inset:0;z-index:4;background:#FFFFFF;opacity:0;pointer-events:none;transition:opacity .4s ease .3s}
.sb-zoom video{animation:none !important;transform:scale(2.3) translateZ(0) !important;transform-origin:50% 44% !important;transition:transform .75s cubic-bezier(.55,0,.35,1) !important}
.sb-zoom #sandbox-fade{opacity:1}
.sb-zoom #sandbox-cta{opacity:0;transition:opacity .2s ease}
@media (prefers-reduced-motion:reduce){.sb-zoom video{transition:none !important;transform:none !important}}

/* Take-home file band: email capture in the page's own language. New elements
   only — nothing here touches the pre-existing desktop rendering. */
#th-email:focus{outline:none;border-color:#1B7A46}
#th-email.th-invalid{border-color:#C96442}
#th-email::placeholder{color:rgba(23,37,90,.38)}
@media (max-width:880px){
  #takehome{padding:56px 20px !important}
  #takehome > div{grid-template-columns:1fr !important;gap:36px !important}
  #takehome h2{font-size:30px !important;line-height:1.12 !important}
  #takehome .feat-copy{max-width:100% !important}
  #takehome .th-col{justify-self:stretch !important;max-width:100% !important}
  .th-ghost-card{display:none}
}

/* Footer link columns */
.footer-col{display:flex;flex-direction:column;gap:16px}
.footer-head{font:500 11px/1 ui-monospace,'SF Mono',Menlo,Consolas,monospace;letter-spacing:.14em;color:rgba(255,255,255,.55);margin-bottom:4px}
.footer-col a{font:400 15.5px/1.4 'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;color:rgba(255,255,255,.85)}
.footer-col a:hover{color:#FFFFFF}

@media (max-width:880px){
  .footer-grid{grid-template-columns:1fr 1fr !important;gap:36px 24px !important}
  .footer-grid > div:first-child{grid-column:1 / -1}
  footer{padding:56px 20px 0 !important}
}

/* Phone-size refinements (2026-08-03): the navy ladder panel's kicker bar
   collides at 390px — the right meta drops out on phones; and the 16:9 film is
   a 219px sliver at phone width, so the walkthrough crops to 4:3 and lets
   object-fit:cover fill the taller frame. */
@media (max-width:640px){
  #ladder-kicker-right{display:none}
  #walkthrough > div{aspect-ratio:4/3 !important}
}