/* ==========================================================================
   TITANOM.AI — APPLICATION FUNNEL
   Funnel-only components, built on the locked base tokens.
   Nothing here overrides the brand. It adds: interface frames, the demo-data
   badge, the real-results grid, the audit/offer block and the sticky mobile CTA.
   ========================================================================== */

/* ============ CONTINUOUS PAGE BACKGROUND (flow between sections) ============
   The design system paints every section as an opaque ink slab, which reads as
   flat stacked blocks. Here we lay one continuous ambient field behind the whole
   page and let the sections go transparent, so the background flows unbroken from
   the hero to the footer, with soft teal glows drifting down it. */
body{
  background:
    radial-gradient(62% 34% at 82% 6%, rgba(107,155,155,.12), transparent 60%),
    radial-gradient(58% 34% at 10% 34%, rgba(107,155,155,.08), transparent 62%),
    radial-gradient(64% 40% at 88% 62%, rgba(239,210,74,.045), transparent 60%),
    radial-gradient(58% 36% at 14% 88%, rgba(107,155,155,.075), transparent 62%),
    linear-gradient(180deg, #05100f 0%, #060a0a 42%, #050d0c 72%, #04100e 100%),
    var(--ink-0);
  background-attachment:fixed;
}
/* Sections stop painting their own slab, so the ambient shows through unbroken.
   A faint alternating corner glow gives each section its own pocket of light
   and makes the eye flow down the page. */
main > section{background:transparent;overflow:visible}
main > section:nth-of-type(even){background:radial-gradient(52% 42% at 90% 1%, rgba(107,155,155,.06), transparent 66%)}
main > section:nth-of-type(odd){background:radial-gradient(50% 40% at 8% 99%, rgba(107,155,155,.05), transparent 66%)}
/* A soft hairline of light at each seam, so sections meet rather than butt. */
main > section::after{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(72%,780px);height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(143,198,198,.22),transparent)
}

/* ============ TIGHTER RHYTHM + SMOOTHER FLOW BETWEEN SECTIONS ============ */
.sec{padding:94px 0}
.sec-tight{padding:66px 0}
.sec-head{margin-bottom:50px}
.brainmap{padding-top:74px}
.proof-note{margin-top:26px}
@media(max-width:560px){
  .sec{padding:64px 0}
  .sec-head{margin-bottom:38px}
}

/* Bright-yellow caption sitting beneath the hero dashboard graphic */
.shot-kicker{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(13px,1.15vw,16px);letter-spacing:.12em;text-transform:uppercase;
  color:#FFE427;text-shadow:0 0 22px rgba(255,228,39,.32);
  margin:22px 0 0;line-height:1.35;text-align:center
}

/* ============ HERO (two-column, real interface on the right) ============ */
.fhero .hero-in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:0 32px;width:100%
}
.fhero .hero-copy{max-width:620px;text-align:left}
/* On desktop, cap the headline so the primary CTA and the interface sit above
   the fold on a standard laptop. Mobile keeps the larger design-system size. */
@media(min-width:961px){
  .fhero h1{font-size:clamp(2.4rem,4.2vw,3.8rem);line-height:1.05}
  .fhero .hero-sub{font-size:1.02rem}
}
.fhero-shot{position:relative}
.fhero-shot .shot{transform:perspective(1700px) rotateY(-9deg) rotateX(3deg)}
.trust-strip{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px;
  font-size:.92rem;color:var(--muted)
}
.stars{color:var(--gold);letter-spacing:2px;font-size:1rem}
.takeaway-line{
  margin-top:20px;padding:16px 18px;border:1px solid var(--line-2);border-radius:12px;
  background:linear-gradient(180deg,rgba(107,155,155,.08),rgba(107,155,155,.02));
  font-size:.98rem;color:var(--mist)
}
.takeaway-line b{color:var(--teal-bright);font-family:var(--font-display);font-weight:700}

/* ============ INTERFACE SHOT FRAME ============ */
.shot{
  position:relative;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  background:var(--ink-1);box-shadow:0 50px 130px -50px rgba(0,0,0,.95),0 0 0 1px rgba(143,198,198,.04)
}
.shot-bar{
  display:flex;align-items:center;gap:8px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:var(--ink-2)
}
.shot-bar i{width:10px;height:10px;border-radius:50%;background:var(--line-2);flex:none}
.shot-bar .addr{
  margin-left:14px;font-family:var(--font-display);font-size:12px;color:var(--muted-2);
  letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.shot>img{width:100%;display:block}
.shot-tag{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  font-family:var(--font-display);font-size:12.5px;color:var(--muted);letter-spacing:.02em
}
.shot-tag b{color:var(--teal-bright);font-weight:600}

/* demo-data badge — sits on any product screen */
.demo-badge{
  position:absolute;top:14px;right:14px;z-index:4;
  font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);background:rgba(8,9,9,.74);border:1px solid var(--line-2);
  padding:6px 11px;border-radius:100px;backdrop-filter:blur(6px)
}

/* interface gallery */
.shots{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:12px}
.shots .wide{grid-column:1 / -1}

/* ============ REAL RESULTS GRID ============ */
.proof-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.proof{
  position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line-2);
  background:var(--ink-1);transition:transform .55s var(--ease),border-color .5s,box-shadow .5s
}
.proof img{width:100%;display:block}
.proof:hover{transform:translateY(-6px);border-color:var(--teal);box-shadow:0 30px 80px -40px rgba(0,0,0,.9)}
.proof.lead{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.proof.lead img{height:100%;object-fit:cover}
.proof.lead .lead-copy{padding:44px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.proof.lead .lead-copy .eyebrow{margin-bottom:4px}
.proof.lead h3{font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.05}
.proof.lead p{color:var(--muted);font-size:1rem}
.proof-note{margin-top:30px;text-align:center;font-size:.9rem;color:var(--muted)}

/* ============ AUDIT / OFFER BLOCK ============ */
.offer{
  position:relative;border:1px solid var(--line-2);border-radius:22px;overflow:hidden;
  background:linear-gradient(180deg,var(--ink-2),var(--ink-0));
  display:grid;grid-template-columns:1fr 1fr;gap:0
}
.offer-copy{padding:52px 48px}
.offer-copy h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-bottom:18px}
.offer-list{list-style:none;margin:26px 0 0;display:flex;flex-direction:column;gap:15px}
.offer-list li{position:relative;padding-left:32px;color:var(--mist);font-size:1rem}
.offer-list li::before{
  content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:50%;
  background:var(--teal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat
}
.offer-gift{
  margin-top:28px;padding:20px 22px;border-radius:14px;
  border:1px solid rgba(239,210,74,.28);background:linear-gradient(180deg,rgba(239,210,74,.08),rgba(239,210,74,.02))
}
.offer-gift .g-lbl{font-family:var(--font-display);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.offer-gift p{color:var(--mist);font-size:.98rem}
.offer-form{
  padding:52px 48px;border-left:1px solid var(--line);
  background:var(--ink-1);display:flex;flex-direction:column;justify-content:center
}
.offer-form h3{font-size:1.4rem;margin-bottom:6px}
.offer-form .sub{color:var(--muted);font-size:.95rem;margin-bottom:24px}
.embed-slot{
  min-height:380px;border:1px dashed var(--line-2);border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  text-align:center;padding:30px;color:var(--muted-2)
}
.embed-slot .es-t{font-family:var(--font-display);font-weight:600;color:var(--mist);font-size:1rem}
.embed-slot form{width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}
.embed-slot input{
  width:100%;padding:14px 16px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--ink-0);color:var(--mist);font-family:var(--font-body);font-size:.95rem
}
.embed-slot input:focus{border-color:var(--teal)}
.embed-slot input:focus-visible{outline:2px solid var(--teal-bright);outline-offset:2px}
.scarcity{margin-top:20px;font-size:.86rem;color:var(--muted);text-align:center}
.reassure{margin-top:10px;font-size:.86rem;color:var(--teal-bright);text-align:center}

/* ============ MEET BEN ============ */
.ben{display:grid;grid-template-columns:.82fr 1.18fr;gap:56px;align-items:center}
.ben-photo{position:relative}
.ben-photo img{width:100%;border-radius:18px;display:block}
.ben-photo::after{
  content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 -120px 90px -60px var(--ink-0)
}
.ben-copy p{color:var(--muted);margin-top:16px;font-size:1.04rem}
.ben-copy p .th{color:var(--teal-bright)}
.pillars{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.pillar{
  flex:1 1 220px;border:1px solid var(--line-2);border-radius:12px;padding:20px 22px;background:var(--ink-1)
}
.pillar h3{font-family:var(--font-display);font-size:1.05rem;color:var(--white);margin-bottom:6px}
.pillar p{margin-top:0;font-size:.92rem;color:var(--muted)}

/* ============ FOUNDER VIDEO ============ */
.video-block{max-width:960px;margin:0 auto}
.vframe{
  position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;
  border:1px solid var(--line-2);
  background:radial-gradient(120% 120% at 50% 0%, #12201e 0%, var(--ink-1) 55%, var(--ink-0) 100%);
  box-shadow:0 50px 130px -50px rgba(0,0,0,.92)
}
.vframe iframe,.vframe video,.vframe .wistia_embed{position:absolute;inset:0;width:100%;height:100%;border:0}
.vposter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;padding:24px}
.vplay{
  width:88px;height:88px;border-radius:50%;background:var(--teal);display:grid;place-items:center;
  box-shadow:0 0 0 12px rgba(107,155,155,.12),0 18px 50px -12px var(--teal-glow);
  transition:transform .4s var(--ease)
}
.vplay svg{width:30px;height:30px;margin-left:4px;fill:var(--ink)}
.vframe:hover .vplay{transform:scale(1.06)}
.vposter .vlabel,.vposter .vsub{display:block;width:100%;margin:0 auto;text-align:center}
.vposter .vlabel{font-family:var(--font-display);font-weight:600;color:var(--mist);font-size:1.05rem}
.vposter .vsub{font-size:.9rem;color:var(--muted)}

/* ============ GUESSING vs TITANCODEOS COMPARISON ============ */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.compare .col{border:1px solid var(--line-2);border-radius:18px;padding:34px 32px;background:var(--ink-1)}
.compare .col.new{border-color:rgba(107,155,155,.4);background:linear-gradient(180deg,rgba(107,155,155,.07),rgba(107,155,155,.01))}
.compare .col h3{font-family:var(--font-display);font-size:1.25rem;margin-bottom:6px}
.compare .col .ceyebrow{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px;display:block}
.compare .old .ceyebrow{color:var(--muted-2)}
.compare .new .ceyebrow{color:var(--teal-bright)}
.compare ul{list-style:none;display:flex;flex-direction:column;gap:13px;margin-top:20px}
.compare li{position:relative;padding-left:30px;color:var(--mist);font-size:.98rem}
.compare .old li{color:var(--muted)}
.compare li::before{position:absolute;left:0;top:-1px;font-family:var(--font-display);font-weight:800}
.compare .old li::before{content:"\00d7";color:#c96a5a;font-size:1.25rem;line-height:1}
.compare .new li::before{content:"";top:3px;width:18px;height:18px;border-radius:50%;background:var(--teal);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/13px no-repeat}

/* ============ WHO THIS IS NOT FOR ============ */
.notfor{
  margin-top:34px;border:1px solid var(--line-2);border-radius:16px;padding:30px 32px;
  background:var(--ink-1)
}
.notfor h3{font-family:var(--font-display);font-size:1.15rem;color:var(--white);margin-bottom:16px}
.notfor ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 30px}
.notfor li{position:relative;padding-left:28px;color:var(--muted);font-size:.96rem}
.notfor li::before{content:"\00d7";position:absolute;left:0;top:-2px;color:#c96a5a;font-family:var(--font-display);font-weight:800;font-size:1.2rem}

/* ============ OWNERSHIP GUARANTEE ============ */
.guarantee{
  display:flex;align-items:flex-start;gap:16px;margin-top:24px;padding:20px 22px;border-radius:14px;
  border:1px solid rgba(107,155,155,.28);background:linear-gradient(180deg,rgba(107,155,155,.07),rgba(107,155,155,.01))
}
.guarantee .gi{flex:none;width:38px;height:38px;border-radius:10px;background:rgba(107,155,155,.16);display:grid;place-items:center}
.guarantee .gi svg{width:20px;height:20px;stroke:var(--teal-bright);fill:none}
.guarantee p{font-size:.96rem;color:var(--mist)}
.guarantee b{color:var(--teal-bright);font-family:var(--font-display)}

/* ============ AI INTELLIGENCE MAP MOCK (tangible takeaway) ============ */
.map-mock{margin-top:18px;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;background:var(--ink-0)}
.map-mock .mm-top{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--ink-2)}
.map-mock .mm-top i{width:7px;height:7px;border-radius:50%;background:var(--line-2)}
.map-mock .mm-top span{margin-left:8px;font-family:var(--font-display);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.map-mock .mm-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--line)}
.map-mock .mm-row:last-child{border-bottom:none}
.map-mock .mm-k{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.02em;color:var(--teal-bright);white-space:nowrap}
.map-mock .mm-bar{flex:1;height:7px;border-radius:4px;background:linear-gradient(90deg,var(--teal),rgba(107,155,155,.15))}
.map-mock .mm-bar.b2{background:linear-gradient(90deg,var(--gold),rgba(239,210,74,.12))}
.map-mock .mm-bar.b3{background:linear-gradient(90deg,var(--teal-bright),rgba(143,198,198,.12));max-width:70%}

@media(max-width:640px){
  .compare{grid-template-columns:1fr}
  .notfor ul{grid-template-columns:1fr}
}

/* ===== QA fixes (post-audit) ===== */
/* Founder-video poster stays tidy on small screens (no caption overlap) */
@media(max-width:560px){
  .vplay{width:58px;height:58px}
  .vplay svg{width:20px;height:20px}
  .vposter{gap:9px;padding:14px}
  .vposter .vlabel{font-size:.92rem}
  .vposter .vsub{font-size:.78rem}
}
/* Clear the fixed mobile Book bar so it never sits over the footer */
@media(max-width:720px){ footer{padding-bottom:104px} }
/* Anchor jumps land clear of the fixed nav */
main>section,main>header{scroll-margin-top:88px}

/* ============ STICKY MOBILE CTA ============ */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:8000;display:none;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  background:rgba(8,9,9,.9);backdrop-filter:blur(14px);border-top:1px solid var(--line)
}
.mcta .btn{width:100%;justify-content:center}

/* ============ RESPONSIVE ============ */
@media(max-width:960px){
  .fhero .hero-in{grid-template-columns:1fr;gap:40px}
  .fhero-shot .shot{transform:none}
  .fhero-shot{max-width:560px}
  .offer{grid-template-columns:1fr}
  .offer-form{border-left:none;border-top:1px solid var(--line)}
  .proof-grid{grid-template-columns:repeat(2,1fr)}
  .proof.lead{grid-column:span 2}
  .ben{grid-template-columns:1fr;gap:34px}
  .ben-photo{max-width:420px}
}
@media(max-width:720px){
  .mcta{display:block}
  main{padding-bottom:0}
  .shots{grid-template-columns:1fr}
  .offer-copy,.offer-form{padding:34px 24px}
}
@media(max-width:560px){
  .proof-grid{grid-template-columns:1fr}
  .proof.lead{grid-column:span 1;grid-template-columns:1fr}
  .fhero .hero-in{padding:0 22px}
}

/* ============ INTERACTIVE MOTHERBOARD (live demo, system section) ============
   The Motherboard shot is not a screenshot: it is a built panel so the charts
   animate on scroll and HawkAI shows a real "chat with your data" exchange.
   Everything sits inside the standard .shot browser frame and carries a
   Demo-data badge, since these numbers are illustrative. */
.mb-app{display:grid;grid-template-columns:212px 1fr}
.mb-main{padding:20px 22px 10px;display:flex;flex-direction:column;gap:20px;min-width:0;background:linear-gradient(180deg,var(--ink-1),var(--ink-0))}
/* left tool sidebar — the full operating system nav */
.mb-side{border-right:1px solid var(--line);padding:16px 12px;background:var(--ink-0);display:flex;flex-direction:column;gap:1px}
.mb-ws{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:11px;margin-bottom:10px}
.mb-ws-ic{width:30px;height:30px;flex:none;border-radius:9px;color:var(--ink-0);display:grid;place-items:center;
  background:linear-gradient(150deg,var(--teal-bright),var(--teal));font-family:var(--font-exp);font-weight:800;font-size:14px}
.mb-ws-t b{display:block;font-family:var(--font-display);font-weight:700;color:var(--white);font-size:.9rem;line-height:1.2}
.mb-ws-t em{display:block;font-style:normal;font-size:10.5px;color:var(--muted-2)}
.mb-navg{font-family:var(--font-display);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted-2);margin:13px 8px 5px}
.mb-nav{display:flex;align-items:center;gap:10px;padding:6px 9px;border-radius:8px;font-size:12px;color:var(--muted);font-family:var(--font-display);cursor:default}
.mb-nav i{width:15px;height:15px;flex:none;border-radius:5px;background:rgba(237,241,241,.07);border:1px solid var(--line)}
.mb-nav.active{background:linear-gradient(90deg,rgba(107,155,155,.20),transparent);color:var(--white);font-weight:600;box-shadow:inset 2px 0 0 var(--teal-bright)}
.mb-nav.active i{background:linear-gradient(150deg,var(--teal-bright),var(--teal));border-color:transparent}
/* financial overview strip */
.mb-fin{border-top:1px solid var(--line);padding-top:16px;margin-top:auto}
.mb-fin-h{font-family:var(--font-display);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:12px}
.mb-fin-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.mb-fin-row .fl{display:block;font-size:11px;color:var(--muted);letter-spacing:.03em}
.mb-fin-row .fv{display:block;font-family:var(--font-exp);font-weight:800;font-size:1.5rem;color:var(--white);margin-top:6px;font-variant-numeric:tabular-nums}
.mb-fin-row .fv.exp{color:#E8894B}

/* --- HawkAI chat, pinned at the top --- */
.mb-chat{border:1px solid var(--line-2);border-radius:14px;padding:18px 18px 14px;
  background:linear-gradient(180deg,rgba(107,155,155,.07),transparent 62%),var(--ink-1)}
.mb-chat-head{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.mb-ai-dot{width:28px;height:28px;border-radius:8px;flex:none;position:relative;
  background:linear-gradient(150deg,var(--teal-bright),var(--teal));box-shadow:0 0 16px var(--teal-glow)}
.mb-ai-dot::after{content:"\2726";position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-0);font-size:14px}
.mb-ai-name{font-family:var(--font-display);font-weight:700;color:var(--white);font-size:.98rem}
.mb-ai-sub{font-family:var(--font-display);font-size:11.5px;color:var(--muted-2);letter-spacing:.02em}
.mb-thread{display:flex;flex-direction:column;gap:12px}
.mb-msg{max-width:84%;padding:12px 15px;border-radius:14px;font-size:.95rem;line-height:1.5}
.mb-msg.user{align-self:flex-end;background:var(--ink-3);border:1px solid var(--line-2);color:var(--mist);border-bottom-right-radius:5px}
.mb-msg.ai{align-self:flex-start;min-height:22px;color:var(--mist);border-bottom-left-radius:5px;
  background:linear-gradient(180deg,rgba(107,155,155,.15),rgba(107,155,155,.05));border:1px solid rgba(143,198,198,.30)}
.mb-msg.ai b{color:var(--white);font-weight:600}
.mb-msg.ai b.yh{color:var(--gold)}
.mb-answer{opacity:0}
.mb-msg.ai.answered .mb-answer{opacity:1;transition:opacity .55s var(--ease)}
.mb-typing{display:inline-flex;gap:5px;align-items:center;height:15px}
.mb-typing i{width:7px;height:7px;border-radius:50%;background:var(--teal-bright);opacity:.4;animation:mbType 1.1s infinite}
.mb-typing i:nth-child(2){animation-delay:.18s}
.mb-typing i:nth-child(3){animation-delay:.36s}
.mb-msg.ai.answered .mb-typing{display:none}
@keyframes mbType{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.mb-input{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;
  padding:11px 14px;border:1px solid var(--line);border-radius:11px;background:var(--ink-0)}
.mb-input span{font-size:.9rem;color:var(--muted-2)}
.mb-send{width:30px;height:30px;flex:none;border:none;border-radius:8px;background:var(--gold);
  color:var(--ink-0);font-size:12px;display:grid;place-items:center;cursor:default}

/* --- live stat tiles --- */
.mb-tiles .tile{padding:18px}
.mb-tiles .tile .tv{font-size:1.95rem}
.mb-tiles .tile .tl{margin-top:8px}
.mb-tiles .tile .tsub{margin-top:8px}
.mb-up{color:var(--teal-bright);font-weight:600}
.mb-flat{color:var(--muted-2);font-weight:600}

/* --- charts row --- */
.mb-charts{display:grid;grid-template-columns:1.55fr 1fr;gap:18px}
.mb-charts .chartcard{padding:22px}
.mb-charts .chart-head{margin-bottom:14px}
.mb-charts .chart-head h3{font-size:1.02rem;margin-bottom:5px}
.mb-charts .chart-head p{font-size:.82rem}
.mb-line{width:100%;height:auto;display:block;overflow:visible}
.mb-line .area{fill:url(#mbFill);opacity:0;transition:opacity 1.3s ease .35s}
.mb-line .ln{fill:none;stroke:var(--teal-bright);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.9s var(--ease)}
.mb-line .dotp{fill:#fff;opacity:0;transition:opacity .5s ease 1.7s;filter:drop-shadow(0 0 6px var(--teal-glow))}
.mb-live.in .mb-line .area{opacity:1}
.mb-live.in .mb-line .ln{stroke-dashoffset:0}
.mb-live.in .mb-line .dotp{opacity:1}
.mb-line-axis{display:flex;justify-content:space-between;margin-top:10px;
  font-family:var(--font-display);font-size:10.5px;color:var(--muted-2)}
.mb-gaugecard{display:flex;flex-direction:column}
.mb-gauge-note{margin-top:auto;padding-top:12px;text-align:center;font-family:var(--font-display);
  font-size:11px;letter-spacing:.03em;color:var(--gold)}

@media(prefers-reduced-motion:reduce){
  .mb-line .ln,.mb-line .area,.mb-line .dotp,.mb-msg.ai.answered .mb-answer{transition:none}
  .mb-typing i{animation:none}
}
@media(max-width:820px){
  .mb-charts{grid-template-columns:1fr}
  .mb-msg{max-width:93%}
}
@media(max-width:760px){
  .mb-app{grid-template-columns:1fr}
  .mb-side{display:none}
  .mb-fin-row{grid-template-columns:1fr}
}

/* ============ THE APPLICATION FLOW ============
   Three steps across the page: application, discovery call, clear next steps.
   Replaced the offer block on 1 Sep 2026, so this is now the only thing that
   section says.

   Built on the palette tokens ONLY, no literals, so light.html picks it up
   through its token remap and the split test keeps differing in theme alone.

   The rail is drawn on .fstep rather than on the node, because it has to cross
   the grid gap into the next column - a pseudo-element on the 54px node cannot
   reach that far without hardcoding the gap twice. Last step never draws one.  */
.flow{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:28px;margin:0;padding:0
}
.fstep{position:relative;padding-right:6px}
.fstep::after{
  content:"";position:absolute;left:68px;right:-28px;top:27px;height:1px;
  background:linear-gradient(90deg,var(--line-2),var(--line));
  pointer-events:none
}
.fstep:last-child::after{display:none}

.fnode{display:flex;align-items:center;margin-bottom:24px}
.fico{
  flex:none;width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--teal-bright);background:var(--ink-2);
  border:1px solid var(--line-2);
  box-shadow:0 0 34px -14px var(--teal-glow)
}
.fico svg{width:23px;height:23px}

.flab{
  display:block;font-family:var(--font-display);font-size:.68rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--teal-bright);
  margin-bottom:10px
}
.fstep h3{font-size:1.32rem;margin-bottom:12px}
.fstep p{font-size:.95rem;color:var(--muted);max-width:34ch}

/* Stacked, the rail turns vertical and runs down the left under the node.
   top clears the 54px node, bottom stops short of the next one. */
@media(max-width:860px){
  .flow{grid-template-columns:1fr;gap:0}
  .fstep{padding:0 0 34px}
  .fstep:last-child{padding-bottom:0}
  .fstep::after{
    left:26px;right:auto;top:66px;bottom:14px;height:auto;width:1px;
    background:linear-gradient(180deg,var(--line-2),var(--line))
  }
  .fnode{margin-bottom:18px}
  .fstep p{max-width:none}
}

/* The CTA under the flow. .hero-actions centres by default, which is right in
   the hero and wrong here - everything in this section is left aligned, so a
   centred button reads as a stray. Stacked, it goes full width instead. */
.flow + .hero-actions{justify-content:flex-start}
@media(max-width:520px){ .flow + .hero-actions .btn{width:100%} }