/* ============================================================
   NeuroRoute — Mobile landing edition.

   Not a squeezed desktop page: a deliberately curated narrative
   for a phone. One idea per screen, oversized numerals as the
   visual anchor, swipe rails instead of collapsed grids,
   progressive disclosure for depth, and a thumb-zone CTA.

   Content is a SUBSET chosen for conversion, in the order a
   skeptical engineer/buyer actually needs it:
     hook -> proof -> problem -> fix -> their number -> risk
     -> trust -> how easy -> price -> depth -> ask

   Deliberately dropped on mobile (unusable or low-yield at
   phone width): the 23x6 competitor matrix, the interactive
   task demo, the 8-card enterprise grid and the 6-card "more"
   grid (both folded into one disclosure list so nothing is
   lost), and the desktop principles band (redundant with the
   security section).

   Globals used: React, Icon, LogoMark, CloudWorxMark, go, DATA
   ============================================================ */

const {useState:useStateM, useEffect:useEffectM} = React;

/* ---------- sales contact ----------
   Self-serve signup is closed for now, so every conversion CTA opens the lead
   form (lead-form.jsx) instead of the Google login. The mailto stays only as a
   fallback if that script somehow failed to load. */
function mSales(){
  if(typeof window.openLeadForm === 'function'){ window.openLeadForm(); return; }
  window.location.href = 'mailto:CloudSales@sislinfotech.com?subject=NeuroRoute - Sales enquiry';
}

/* ---------- scroll reveal ---------- */
function useReveal(){
  useEffectM(function(){
    var nodes = document.querySelectorAll('.mrv');
    if(!('IntersectionObserver' in window)){
      nodes.forEach(function(n){ n.classList.add('in'); });
      return;
    }
    var io = new IntersectionObserver(function(entries){
      entries.forEach(function(e){
        if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); }
      });
    },{rootMargin:'0px 0px -8% 0px', threshold:0.06});
    nodes.forEach(function(n){ io.observe(n); });
    return function(){ io.disconnect(); };
  },[]);
}

/* reveal wrapper — i staggers the delay */
function Rv(props){
  var d = (props.i||0) * 70;
  return <div className={'mrv '+(props.className||'')} style={Object.assign({transitionDelay:d+'ms'}, props.style||{})}>{props.children}</div>;
}

/* section shell: eyebrow + headline + optional lede */
function MSec(props){
  return (
    <section id={props.id} className={'m-sec '+(props.className||'')}>
      {props.eyebrow && <Rv><div className="m-eyebrow" style={props.eyebrowColor?{color:props.eyebrowColor}:null}>{props.eyebrow}</div></Rv>}
      {props.title && <Rv i={1}><h2 className="display m-h2">{props.title}</h2></Rv>}
      {props.lede && <Rv i={2}><p className="m-lede">{props.lede}</p></Rv>}
      {props.children}
    </section>
  );
}

function mScroll(id){
  var el = document.getElementById(id);
  if(el) window.scrollTo({top: el.getBoundingClientRect().top + window.scrollY - 58, behavior:'smooth'});
}

/* ============================================================
   HERO — the live routing card. Cycles real request archetypes
   through the router and shows the actual cost delta. This is
   the whole pitch in one glance, which is what a phone needs.
   ============================================================ */
function MRouteCard(){
  var M = (window.DATA && window.DATA.MODELS) || [];
  var by = function(id, fb){ return M.find(function(m){ return m.id===id; }) || fb; };
  var flag = by('claude-opus-4-8', {name:'Claude Opus 4.8', out:25.0, q:98});

  var cases = [
    {q:'Summarize this support ticket', task:'summarization',
     m:by('vertex-gemini-3.5-flash',{name:'Gemini 3.5 Flash',out:0.30,q:90}), c:'#22d3ee'},
    {q:'Classify this email as spam or not', task:'classification',
     m:by('vertex-gemini-3.1-flash-lite',{name:'Gemini 3.1 Flash-Lite',out:0.15,q:80}), c:'#f59e0b'},
    {q:'Refactor this auth middleware', task:'code',
     m:by('claude-sonnet-4-6',{name:'Claude Sonnet 4.6',out:15.0,q:95}), c:'#e24fd6'},
    {q:'Extract the line items from this invoice', task:'extraction',
     m:by('gpt-4o-mini',{name:'GPT-4o-mini',out:0.60,q:81}), c:'#8b5cf6'},
  ];

  var pair = useStateM(0);
  var i = pair[0], set = pair[1];
  useEffectM(function(){
    var id = setInterval(function(){ set(function(p){ return (p+1)%cases.length; }); }, 3000);
    return function(){ clearInterval(id); };
  },[]);

  var c = cases[i];
  var save = flag.out && c.m.out ? Math.round((1 - c.m.out/flag.out)*100) : 0;

  return (
    <div className="mrc">
      <div className="mrc-step">
        <div className="mrc-lbl mono">YOUR REQUEST</div>
        <div className="mrc-q" key={'q'+i}>{c.q}</div>
      </div>

      <div className="mrc-flow"><span/><span/><span/></div>

      <div className="mrc-router">
        <div className="mrc-router-ic"><Icon name="route" size={16}/></div>
        <div className="mrc-router-t">
          <b>NeuroRoute</b>
          <div className="mrc-lbl mono">classify &middot; route</div>
        </div>
        <div className="mrc-task mono" key={'t'+i} style={{color:c.c, background:c.c+'22'}}>{c.task}</div>
      </div>

      <div className="mrc-flow"><span/><span/><span/></div>

      <div className="mrc-pick" key={'p'+i} style={{borderColor:c.c+'6b'}}>
        <div className="mrc-pick-top">
          <span className="mrc-dot" style={{background:c.c}}/>
          <b>{c.m.name}</b>
          <span className="mrc-qi mono">q{c.m.q}</span>
        </div>
        <div className="mrc-pick-cost">
          <div>
            <div className="mrc-lbl mono">ROUTED</div>
            <div className="mono mrc-price">${(c.m.out||0).toFixed(2)}<em>/1M out</em></div>
          </div>
          <div>
            <div className="mrc-lbl mono">FLAGSHIP</div>
            <div className="mono mrc-price strike">${(flag.out||0).toFixed(2)}</div>
          </div>
          <div className="mrc-save">&minus;{save}%</div>
        </div>
      </div>

      <div className="mrc-dots">
        {cases.map(function(x,n){
          return <span key={n} className={n===i?'on':''} onClick={function(){ set(n); }}/>;
        })}
      </div>
    </div>
  );
}

function MHero(){
  return (
    <header className="m-hero">
      <div className="m-aurora"><span/><span/><span/></div>
      <div className="m-hero-in">
        <Rv><div className="m-chip"><span className="m-chip-new">NEW</span> Fusion routing + agent run budgets</div></Rv>
        <Rv i={1}><h1 className="display m-h1">Stop paying flagship rates for <span className="route-text">every request.</span></h1></Rv>
        <Rv i={2}><p className="m-hero-sub">NeuroRoute routes each call to the cheapest model that still clears your quality bar. One endpoint. Same code. <b>60&ndash;80% off the bill.</b></p></Rv>
        <Rv i={3}>
          <div className="m-hero-cta">
            <button className="btn btn-grad m-btn-xl" onClick={mSales}><Icon name="send" size={16}/>Contact NeuroRoute Sales Team</button>
            <button className="m-link-btn" onClick={function(){ mScroll('m-roi'); }}>Calculate my savings<Icon name="arrowdown" size={14}/></button>
          </div>
        </Rv>
        <Rv i={4}>
          <div className="m-trust">
            <span><Icon name="checkcircle" size={13}/>OpenAI-compatible</span>
            <span><Icon name="checkcircle" size={13}/>BYOK</span>
            <span><Icon name="checkcircle" size={13}/>Zero-retention</span>
          </div>
        </Rv>
        <Rv i={5}><MRouteCard/></Rv>
      </div>
    </header>
  );
}

/* ---------- proof rail ---------- */
function MProof(){
  var s = [
    ['up to 80%','cut in AI spend','#10b981'],
    ['30+','models, one API','#22d3ee'],
    ['4-tier','hard $ spend caps','#e24fd6'],
    ['~0ms','routing overhead','#f59e0b'],
  ];
  return (
    <div className="m-proof">
      {s.map(function(x,i){
        return (
          <Rv key={i} i={i} className="m-proof-cell">
            <div className="display m-proof-v" style={{color:x[2]}}>{x[0]}</div>
            <div className="m-proof-l">{x[1]}</div>
          </Rv>
        );
      })}
    </div>
  );
}

/* ---------- the problem — one number, not three cards ---------- */
function MProblem(){
  var leaks = [
    ['The default-to-flagship trap','Someone wires the strongest model as the default to be safe. Now a yes/no classification bills at flagship rates.'],
    ['Tokens you never see','Retries, oversized system prompts re-sent every call, verbose RAG context, runaway agent loops.'],
    ['No line-item truth','The provider invoice is one number. You cannot see which team, key, or feature burned it.'],
  ];
  return (
    <MSec id="m-problem" eyebrow="THE PROBLEM" eyebrowColor="var(--magenta)"
      title={<span>Your AI bill compounds <span className="route-text">while you are not looking.</span></span>}>
      <Rv i={3}>
        <div className="m-bignum">
          <div className="display m-bignum-v route-text">10&ndash;50&times;</div>
          <p>what teams typically overpay on the majority of their traffic &mdash; spend that buys <b>no extra quality</b>, because most requests never needed the flagship.</p>
        </div>
      </Rv>
      <div className="m-list">
        {leaks.map(function(l,i){
          return (
            <Rv key={l[0]} i={i} className="m-leak">
              <div className="m-leak-n mono">0{i+1}</div>
              <div><b>{l[0]}</b><p>{l[1]}</p></div>
            </Rv>
          );
        })}
      </div>
    </MSec>
  );
}

/* ---------- the fix — price ladder, not a 4-col table ---------- */
function MLadder(){
  var M = (window.DATA && window.DATA.MODELS) || [];
  var by = function(id, fb){ return M.find(function(m){ return m.id===id; }) || fb; };
  var flag = by('claude-opus-4-8',{name:'Claude Opus 4.8',out:25.0,q:98});
  var mid  = by('vertex-gemini-3.5-flash',{name:'Gemini 3.5 Flash',out:0.30,q:90});
  var rows = [
    {l:'Flagship default', m:flag, hot:true, c:'#e24fd6'},
    {l:'Balanced pick', m:by('claude-sonnet-4-6',{name:'Claude Sonnet 4.6',out:15.0,q:95}), c:'#3b82f6'},
    {l:'Fast + capable', m:mid, c:'#22d3ee'},
    {l:'Cheapest that clears the bar', m:by('vertex-gemini-3.1-flash-lite',{name:'Gemini 3.1 Flash-Lite',out:0.15,q:80}), c:'#10b981'},
  ].filter(function(r){ return r.m && r.m.out; });
  var mult = function(r){ return flag.out && r.m.out ? Math.round(flag.out/r.m.out) : 1; };

  return (
    <MSec id="m-fix" eyebrow="THE FIX" eyebrowColor="var(--green)"
      title={<span>Same answer. <span className="route-text">A fraction of the price.</span></span>}
      lede="A cheaper model is not a worse answer. For most tasks it is the same answer for cents on the dollar.">
      <div className="m-ladder">
        {rows.map(function(r,i){
          return (
            <Rv key={r.m.id||r.l} i={i} className={'m-rung'+(r.hot?' hot':'')}>
              <div className="m-rung-top">
                <b>{r.m.name}</b>
                {r.hot ? <span className="m-rung-base mono">baseline</span>
                       : <span className="m-rung-mult route-text">{mult(r)}&times; cheaper</span>}
              </div>
              <div className="m-rung-l">{r.l}</div>
              <div className="m-rung-bar">
                <div className="m-rung-q"><span style={{width:(r.m.q||0)+'%', background:r.c}}/></div>
                <span className="mono m-rung-qv">q{r.m.q}</span>
                <span className="mono m-rung-p">${(r.m.out||0).toFixed(2)}</span>
              </div>
            </Rv>
          );
        })}
      </div>
      <Rv i={5}><p className="m-foot">A quality index of 90 vs 98 is imperceptible on a summary or a classification &mdash; but it is the difference between <b className="route-text">${(flag.out||0).toFixed(2)}</b> and <b className="route-text">${(mid.out||0).toFixed(2)}</b> per million output tokens.</p></Rv>
    </MSec>
  );
}

/* ---------- ROI — their own number ---------- */
function MROI(){
  var pair = useStateM(4000);
  var spend = pair[0], set = pair[1];
  var fmt = function(n){ return '$'+Math.round(n).toLocaleString(); };
  var save = spend*0.66, bill = spend-save, yr = save*12;
  var p = ((spend-100)/(50000-100))*100;
  return (
    <MSec id="m-roi" eyebrow="ROI CALCULATOR" title={<span>See what <span className="route-text">you would save.</span></span>}>
      <Rv i={3}>
        <div className="m-roi">
          <div className="m-roi-hd">
            <span>Monthly AI spend</span>
            <span className="display mono m-roi-in">{fmt(spend)}</span>
          </div>
          <input className="range m-range" type="range" min="100" max="50000" step="100" value={spend}
            style={{'--p':p+'%'}} onChange={function(e){ set(+e.target.value); }}/>
          <div className="m-roi-ends mono"><span>$100</span><span>$50,000</span></div>
          <div className="m-roi-out">
            <div className="m-roi-hero">
              <div className="display route-text m-roi-hero-v">{fmt(save)}</div>
              <div className="m-roi-hero-l">saved every month</div>
            </div>
            <div className="m-roi-sub">
              <div><b className="mono">{fmt(bill)}</b><span>your new bill</span></div>
              <div><b className="mono" style={{color:'var(--green)'}}>{fmt(yr)}</b><span>per year</span></div>
            </div>
          </div>
          <div className="m-roi-note">Based on 66% average savings across mixed task workloads.</div>
        </div>
      </Rv>
    </MSec>
  );
}

/* ---------- blast radius — the most visceral argument ---------- */
function MSpend(){
  var tiers = [
    ['Per agent run','cyan','Cap a whole multi-step agent loop with one header.'],
    ['Per key','blue','Each app, env, or teammate gets its own daily and monthly cap.'],
    ['Per organization','purple','A hard ceiling across everything you run.'],
    ['Platform-wide','magenta','A global guardrail behind all of it.'],
  ];
  return (
    <MSec id="m-spend" eyebrow="SPEND CONTROL" eyebrowColor="var(--blue)"
      title={<span>A leaked key should not cost you <span className="route-text">a million dollars.</span></span>}
      lede="Modern models spend faster than any human notices. NeuroRoute caps the blast radius before it happens.">
      <Rv i={3}>
        <div className="m-breach">
          <div className="m-breach-col bad">
            <div className="m-breach-h"><Icon name="alert" size={15}/>Without quotas</div>
            <p>Key leaks at 2am. An attacker hammers the most expensive model all night. You find out from the invoice, days later.</p>
          </div>
          <div className="m-breach-col good">
            <div className="m-breach-h"><Icon name="shield" size={15}/>With NeuroRoute</div>
            <p>Same leak hits its <b>$50 daily cap</b> in minutes. Every further request is rejected at the door. The rest of the org never notices.</p>
          </div>
        </div>
      </Rv>
      <div className="m-tiers">
        {tiers.map(function(t,i){
          return (
            <Rv key={t[0]} i={i} className="m-tier">
              <span className="m-tier-dot" style={{background:'var(--'+t[1]+')'}}/>
              <div><b>{t[0]}</b><p>{t[2]}</p></div>
            </Rv>
          );
        })}
      </div>
    </MSec>
  );
}

/* ---------- drop-in proof ---------- */
function MDropIn(){
  var strats = ['cheapest','fastest','best-quality','balanced','task-aware','cascade','fusion'];
  return (
    <MSec id="m-dropin" eyebrow="ONE ENDPOINT"
      title={<span>Change one line. <span className="route-text">Keep everything else.</span></span>}
      lede="Point your OpenAI base URL at NeuroRoute. Same SDKs, streaming, tools and multimodal.">
      <Rv i={3}>
        <div className="m-code">
          <div className="m-code-blk">
            <div className="m-code-cm"># before</div>
            <div className="m-code-ln"><b>api.openai.com</b>/v1/chat/...</div>
            <div className="m-code-cost bad">$0.0366 <em>/ request</em></div>
          </div>
          <div className="m-code-div"><span>swap the host</span></div>
          <div className="m-code-blk">
            <div className="m-code-cm"># after</div>
            <div className="m-code-ln"><b className="route-text">neuroroute.ai</b>/v1/chat/...</div>
            <div className="m-code-cost good">$0.0112 <em>/ request &middot; 69% saved</em></div>
          </div>
        </div>
      </Rv>
      <Rv i={4}>
        <div className="m-strats">
          <div className="m-strats-h mono">7 ROUTING STRATEGIES</div>
          <div className="m-strats-row">
            {strats.map(function(s){
              return <span key={s} className={'m-strat'+(s==='fusion'?' hot':'')}>{s}</span>;
            })}
          </div>
          <p>Set it per key or per request. <b>Fusion</b> fans the prompt to the top models in parallel and an independent judge returns the best answer verbatim &mdash; never a merged or hallucinated one.</p>
        </div>
      </Rv>
    </MSec>
  );
}

/* ---------- reusable disclosure ---------- */
function MAccordion(props){
  var pair = useStateM(false);
  var open = pair[0], set = pair[1];
  return (
    <div className={'m-acc'+(open?' open':'')}>
      <button className="m-acc-hd" onClick={function(){ set(!open); }} aria-expanded={open}>
        <span>{props.label}</span>
        <Icon name="chevdown" size={17} className="m-acc-chev"/>
      </button>
      {open && (
        <div className="m-acc-body">
          {props.items.map(function(it,i){
            return <div key={i} className="m-acc-item"><b>{it[0]}</b><p>{it[1]}</p></div>;
          })}
        </div>
      )}
    </div>
  );
}

/* ---------- trust ---------- */
function MSecurity(){
  var head = [
    ['shield','magenta','Zero retention, provable','Zero-retention modes store nothing at all. Every response carries an X-Data-Retention header proving the posture it was served under.'],
    ['lock','green','A kill switch you hold','Retained content is sealed with per-org AES-256-GCM keys. Bring your own KMS key: revoke our access and your data, including backups, is unreadable instantly.'],
    ['trash','blue','Erase it. Prove it.','One-click right-to-be-forgotten with a 7-day cancelable grace, crypto-shredded keys, and a completion certificate. Full GDPR export any time.'],
  ];
  var more = [
    ['Your provider keys, sealed','BYOK keys live envelope-encrypted in a managed secret store, never exposed in logs, the UI, exports, or to other tenants.'],
    ['PII never leaves by accident','Checksum-validated detectors (Luhn, Verhoeff) scan every request before routing, so invoice numbers do not trip false alarms. Per-org policy decides: keep on self-hosted, block, or allow.'],
    ['Signed, scoped, audited','HMAC request signing, ECDSA JWT sessions, OAuth 2.1 for agent tooling, role-based access control, org-scoped queries down to the SQL, and metadata-only logs.'],
  ];
  return (
    <MSec id="m-security" eyebrow="SECURITY & PRIVACY" eyebrowColor="var(--amber)"
      title={<span>Your keys. Your data. <span className="route-text">Locked down.</span></span>}
      lede="A gateway in front of every AI call only makes sense if the gateway is the most trustworthy thing in the path.">
      <div className="m-list">
        {head.map(function(h,i){
          return (
            <Rv key={h[2]} i={i} className="m-sec-card">
              <div className="m-sec-ic" style={{background:'var(--'+h[1]+'-t)',color:'var(--'+h[1]+')'}}><Icon name={h[0]} size={19}/></div>
              <div><b>{h[2]}</b><p>{h[3]}</p></div>
            </Rv>
          );
        })}
      </div>
      <Rv i={3}><MAccordion label="More on security" items={more}/></Rv>
    </MSec>
  );
}

/* ---------- pricing swipe rail ---------- */
function MPricing(){
  var rate = function(v){ return '$'+v.toFixed(2); };
  var T = [
    {n:'Basic', base:99, inr:0.20, outr:0.40, tag:'Start routing and cut the bill from day one.',
     f:['Smart routing, 6 strategies','11+ providers, one API','Per-request savings proof','Daily and monthly budget caps','GDPR export (JSON)']},
    {n:'Standard', base:119, inr:0.30, outr:0.50, tag:'For teams running AI in production.',
     f:['Everything in Basic','Context compression, ~40% fewer input tokens','Team workspaces + RBAC','PII detection and routing policy','Server-side memory']},
    {n:'Premium', base:149, inr:0.40, outr:0.70, pop:true, tag:'The full optimization and governance stack.',
     f:['Everything in Standard','Semantic + exact-match caching','Bring your own keys (BYOK)','Fusion and learned routing','MCP server (OAuth 2.1)','Encryption at rest + audit log']},
    {n:'Enterprise', custom:true, tag:'For large orgs, security and procurement.',
     f:['Everything in Premium','SSO (OIDC and SAML)','Customer-managed keys (CMEK)','OpenTelemetry export','Dedicated support + SLA']},
  ];
  return (
    <MSec id="m-pricing" eyebrow="PRICING" title={<span>Simple, transparent <span className="route-text">tier pricing.</span></span>}
      lede="A flat monthly platform fee plus a metered per-million-token rate. Never a percentage of your savings.">
      <Rv i={3}>
        <div className="m-rail">
          {T.map(function(t){
            return (
              <div key={t.n} className={'m-price'+(t.pop?' pop':'')}>
                {t.pop && <span className="m-price-flag">POPULAR</span>}
                <div className="m-price-n">{t.n}</div>
                {t.custom
                  ? <div className="m-price-v"><b className="route-text">Custom</b><span>talk to sales</span></div>
                  : <div className="m-price-v"><b className="mono">${t.base}</b><span>/mo base</span>
                      <div className="m-price-rate mono">{rate(t.inr)} / 1M in &middot; {rate(t.outr)} / 1M out</div>
                    </div>}
                <p className="m-price-tag">{t.tag}</p>
                <button className={'btn btn-block '+(t.pop?'btn-grad':'btn-ghost')} onClick={mSales}>
                  Contact Sales Team
                </button>
                <ul className="m-price-f">
                  {t.f.map(function(x,i){ return <li key={i}><Icon name="check" size={13}/>{x}</li>; })}
                </ul>
              </div>
            );
          })}
        </div>
      </Rv>
      <Rv i={4}><div className="m-swipe mono"><Icon name="chevron" size={13}/>swipe to compare tiers</div></Rv>
      <Rv i={5}><p className="m-foot">Provider cost is billed separately &mdash; paid directly to providers under BYOK, or passed through at cost under managed keys. The rate above is the NeuroRoute platform charge only.</p></Rv>
    </MSec>
  );
}

/* ---------- depth, folded away ---------- */
function MDepth(){
  var savers = [
    ['Semantic + prompt caching','Repeated and near-duplicate prompts return from cache; supported providers cache your system prefix for up to ~90% off repeated input tokens.'],
    ['Token compression','Whitespace, JSON, dedup, log truncation, RAG dedup and ML compression strip redundancy before the request is billed. Typically ~40% off long prose.'],
    ['Native MCP server','Use NeuroRoute directly from Claude, IDEs and agents over the Model Context Protocol, with OAuth 2.1 click-to-connect.'],
    ['Self-hosted option','Route sensitive or high-volume workloads to your own vLLM models on your own hardware, through the same API.'],
    ['Explainable routing','Paste a request ID into the Routing Explorer to see which models were considered and why one won.'],
    ['Learns your workload','Thumbs up and down feedback tunes routing to your definition of quality, not a generic benchmark.'],
  ];
  var platform = [
    ['Guardrails, in and out','A configurable rule pipeline screens prompts and responses: PII redaction, banned content, custom webhook checks. Per-org and per-key, fail-closed.'],
    ['Full request-log observability','Search every request by model, cost, status, or your own metadata tags. Stream traces to your APM over OpenTelemetry.'],
    ['SSO, workspaces and roles','Generic OIDC single sign-on, workspaces per team, granular roles, and scoped service keys limited to exactly what they need.'],
    ['Bring any model','Register any OpenAI-compatible endpoint, use Azure OpenAI, tap DeepInfra with automatic OpenRouter failover, or point at your own vLLM.'],
    ['Config-as-code routing','Version your routing policy like code: model pins or weighted A/B splits, matched on request metadata, rolled back without a redeploy.'],
    ['Automation and alerts','Scheduled usage exports, HMAC-signed event webhooks, and spend alerts over email or webhook.'],
    ['Eval framework','Benchmark models and strategies against your own prompt suites for quality, cost and latency per case, before you promote a change.'],
    ['Model catalog + auto-decommission','A weekly sync discovers new models. Anything unreachable for 48 hours is flagged for decommission. Nothing is ever hard-deleted.'],
  ];
  return (
    <MSec id="m-depth" eyebrow="AND MORE"
      title={<span>Every lever that moves the <span className="route-text">bill and the risk.</span></span>}
      lede="All of it shipped and live today.">
      <Rv i={3}><MAccordion label="Cost and routing levers" items={savers}/></Rv>
      <Rv i={4}><MAccordion label="Enterprise and governance" items={platform}/></Rv>
    </MSec>
  );
}

/* ---------- FAQ ---------- */
function MFaq(){
  var qs = [
    ['Do I have to change my code?','No. Point your OpenAI base URL at NeuroRoute and keep the same SDK, request format, streaming, tools and multimodal payloads. One line.'],
    ['How is this priced?','A flat monthly platform fee plus a transparent per-million-token rate. Never a percentage of your savings. Provider cost is separate: paid directly under BYOK, or passed through at cost.'],
    ['Can I keep my own provider keys?','Yes. Bring your own keys and pay providers directly at published rates. Your keys are envelope-encrypted and never exposed back to anyone.'],
    ['Do you store my prompts?','Only if you choose to. Zero-retention modes store nothing, and every response carries a header proving which posture served it. If you retain, it is encrypted under a key you can revoke.'],
    ['What if a cheaper model gives a worse answer?','You set the quality bar and routing never goes below it. Cascade escalates automatically on a failed or empty response, and feedback tunes future routing to your standard.'],
  ];
  var pair = useStateM(-1);
  var open = pair[0], set = pair[1];
  return (
    <MSec id="m-faq" title="Questions, answered.">
      <div className="m-faq">
        {qs.map(function(q,i){
          return (
            <Rv key={i} i={i} className={'m-q'+(open===i?' open':'')}>
              <button className="m-q-hd" onClick={function(){ set(open===i?-1:i); }} aria-expanded={open===i}>
                <span>{q[0]}</span><Icon name="chevdown" size={16} className="m-q-chev"/>
              </button>
              {open===i && <div className="m-q-body"><p>{q[1]}</p></div>}
            </Rv>
          );
        })}
      </div>
    </MSec>
  );
}

/* ---------- nav ---------- */
function MNav(){
  var pair = useStateM(false);
  var open = pair[0], set = pair[1];
  var links = [
    ['Cut the bill','m-fix'],
    ['Spend control','m-spend'],
    ['Security','m-security'],
    ['Pricing','m-pricing'],
  ];
  useEffectM(function(){
    document.body.style.overflow = open ? 'hidden' : '';
    return function(){ document.body.style.overflow = ''; };
  },[open]);
  /* Release the scroll lock here rather than waiting on the effect above: that
     cleanup is async, and scrollTo is a no-op while body overflow is hidden. */
  var jump = function(id){
    set(false);
    document.body.style.overflow = '';
    mScroll(id);
  };
  return (
    <nav className="m-nav">
      <div className="m-nav-in">
        <div className="m-nav-brand">
          <LogoMark size={32}/>
          <span className="display">NeuroRoute</span>
        </div>
        <div className="m-nav-r">
          <button className="btn btn-grad btn-sm" onClick={function(){ go('login'); }}>Login</button>
          <button className="m-burger" onClick={function(){ set(!open); }} aria-label="Menu" aria-expanded={open}>
            <Icon name={open?'x':'menu'} size={20}/>
          </button>
        </div>
      </div>
      {open && (
        <div className="m-sheet">
          {links.map(function(l){
            return <button key={l[1]} onClick={function(){ jump(l[1]); }}>{l[0]}<Icon name="arrowright" size={15}/></button>;
          })}
          <button onClick={function(){ set(false); go('resources'); }}>Resources<Icon name="arrowright" size={15}/></button>
          <button className="m-sheet-cta btn btn-grad" onClick={function(){ set(false); mSales(); }}><Icon name="send" size={15}/>Contact NeuroRoute Sales Team</button>
          <div className="m-sheet-foot"><CloudWorxMark height={22} variant="full"/></div>
        </div>
      )}
    </nav>
  );
}

/* ---------- sticky thumb-zone CTA ---------- */
function MDock(){
  var pair = useStateM(false);
  var on = pair[0], set = pair[1];
  useEffectM(function(){
    var h = function(){ set(window.scrollY > 620); };
    window.addEventListener('scroll', h, {passive:true});
    h();
    return function(){ window.removeEventListener('scroll', h); };
  },[]);
  return (
    <div className={'m-dock'+(on?' on':'')}>
      <div className="m-dock-in">
        <div className="m-dock-t"><b>Cut your AI bill 60&ndash;80%</b><span>Talk to our team</span></div>
        <button className="btn btn-grad" onClick={mSales}>Contact Sales<Icon name="arrowright" size={15}/></button>
      </div>
    </div>
  );
}

/* ============================================================
   PAGE
   ============================================================ */
function MobileLanding(){
  useReveal();
  return (
    <div className="mlp">
      <MobileStyles/>
      {window.LeadForm && <window.LeadForm/>}
      <MNav/>
      <MHero/>
      <MProof/>
      <MProblem/>
      <MLadder/>
      <MROI/>
      <MSpend/>
      <MDropIn/>
      <MSecurity/>
      <MPricing/>
      <MDepth/>
      <MFaq/>

      <section className="m-cta">
        <div className="m-aurora"><span/><span/></div>
        <Rv><h2 className="display">Take back control of your AI bill.</h2></Rv>
        <Rv i={1}><p>One endpoint, every model, hard spend limits, and proof on every request.</p></Rv>
        <Rv i={2}><button className="btn btn-grad m-btn-xl" onClick={mSales}><Icon name="send" size={16}/>Contact NeuroRoute Sales Team</button></Rv>
      </section>

      <footer className="m-footer">
        <div className="m-foot-brand"><LogoMark size={34}/><div><div className="display">NeuroRoute</div><CloudWorxMark height={22} variant="full"/></div></div>
        <div className="m-foot-links">
          <a>Docs</a><a>Status</a>
          <a onClick={function(){ go('privacy'); }} style={{cursor:'pointer'}}>Privacy</a>
          <a onClick={function(){ go('terms'); }} style={{cursor:'pointer'}}>Terms</a>
          <a onClick={function(){ go('code'); }} style={{cursor:'pointer'}}>Code of Conduct</a>
          <a href="mailto:raman@sislinfotech.com">Contact</a>
        </div>
        <div className="m-foot-c">&copy; 2026 SISL CloudWorx. All rights reserved.</div>
      </footer>

      <MDock/>
    </div>
  );
}

function MobileStyles(){
  return <style>{`
/* ============ mobile landing ============ */
.mlp{background:var(--bg-0);overflow-x:hidden}
.mlp *{-webkit-tap-highlight-color:transparent}

/* reveal */
.mrv{opacity:0;transform:translateY(16px);transition:opacity .62s cubic-bezier(.22,.7,.28,1),transform .62s cubic-bezier(.22,.7,.28,1)}
.mrv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.mrv{opacity:1;transform:none;transition:none}}

/* ---- nav ---- */
.m-nav{position:sticky;top:0;z-index:70;background:rgba(7,8,13,.86);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.m-nav-in{display:flex;align-items:center;justify-content:space-between;padding:10px 16px}
.m-nav-brand{display:flex;align-items:center;gap:9px}
.m-nav-brand .display{font-size:17px;font-weight:700;letter-spacing:-.01em}
.m-nav-r{display:flex;align-items:center;gap:8px}
.m-burger{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--line-2);border-radius:11px;
  background:var(--bg-2);color:var(--tx-0)}
/* body scroll is locked while open, so the sheet itself must scroll —
   otherwise the CTA is unreachable on a short (landscape) viewport */
.m-sheet{border-top:1px solid var(--line);background:var(--bg-1);padding:10px 16px 18px;display:flex;flex-direction:column;gap:2px;
  max-height:calc(100vh - 58px);overflow-y:auto;-webkit-overflow-scrolling:touch;animation:mSheet .22s ease}
@keyframes mSheet{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.m-sheet>button:not(.btn){display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;
  color:var(--tx-0);font-family:var(--font-ui);font-size:16px;font-weight:600;padding:15px 2px;border-bottom:1px solid var(--line);text-align:left}
.m-sheet>button:not(.btn) .ico{color:var(--tx-3)}
.m-sheet-cta{margin-top:16px;width:100%;padding:14px;font-size:15.5px}
.m-sheet-foot{margin-top:18px;display:flex;justify-content:center;opacity:.6}

/* ---- shared section rhythm ---- */
.m-sec{padding:64px 18px 8px;max-width:560px;margin:0 auto}
.m-eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-2);margin-bottom:12px}
.m-h1{font-size:clamp(31px,8.6vw,42px);font-weight:700;line-height:1.06;letter-spacing:-.025em;margin:0}
.m-h2{font-size:clamp(25px,6.8vw,32px);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin:0}
.m-lede{color:var(--tx-1);font-size:15px;line-height:1.62;margin:14px 0 0}
.m-foot{color:var(--tx-2);font-size:12.5px;line-height:1.65;margin:18px 0 0}
.m-list{display:flex;flex-direction:column;gap:10px;margin-top:22px}

/* ---- hero ---- */
.m-hero{position:relative;overflow:hidden;padding:40px 18px 10px}
.m-hero-in{position:relative;z-index:2;max-width:560px;margin:0 auto}
.m-aurora{position:absolute;inset:0;z-index:0;filter:blur(58px);opacity:.7;pointer-events:none}
.m-aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen}
.m-aurora span:nth-child(1){width:330px;height:330px;background:radial-gradient(circle,#3b82f6,transparent 66%);top:-120px;left:-110px}
.m-aurora span:nth-child(2){width:310px;height:310px;background:radial-gradient(circle,#e24fd6,transparent 66%);top:-80px;right:-110px}
.m-aurora span:nth-child(3){width:280px;height:280px;background:radial-gradient(circle,#f59e0b,transparent 70%);top:300px;left:30%}

.m-chip{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--tx-1);
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:99px;padding:5px 12px 5px 5px;margin-bottom:20px}
.m-chip-new{background:var(--grad-brand);color:#fff;font-family:var(--font-mono);font-size:9.5px;font-weight:700;
  letter-spacing:.08em;padding:3px 8px;border-radius:99px}
.m-hero-sub{color:var(--tx-1);font-size:16px;line-height:1.62;margin:18px 0 0}
.m-hero-sub b{color:var(--tx-0)}
.m-hero-cta{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin-top:26px}
.m-btn-xl{width:100%;padding:16px 22px;font-size:16px;border-radius:14px}
.m-link-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:none;border:none;
  color:var(--tx-1);font-family:var(--font-ui);font-size:14.5px;font-weight:600;padding:6px}
.m-trust{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:20px;font-size:12.5px;color:var(--tx-2)}
.m-trust span{display:inline-flex;align-items:center;gap:6px}
.m-trust .ico{color:var(--green)}

/* ---- hero route card ---- */
.mrc{margin-top:32px;background:linear-gradient(180deg,rgba(17,20,31,.92),rgba(11,13,21,.92));
  border:1px solid var(--line-2);border-radius:20px;padding:16px;box-shadow:0 30px 70px -34px rgba(0,0,0,.95)}
.mrc-lbl{font-size:9px;letter-spacing:.16em;color:var(--tx-3);text-transform:uppercase}
.mrc-step .mrc-q{font-size:14.5px;font-weight:600;color:var(--tx-0);margin-top:6px;animation:mFade .45s ease}
@keyframes mFade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.mrc-flow{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0}
.mrc-flow span{width:2px;height:5px;border-radius:2px;background:var(--line-strong);animation:mPulse 1.4s ease-in-out infinite}
.mrc-flow span:nth-child(2){animation-delay:.16s}
.mrc-flow span:nth-child(3){animation-delay:.32s}
@keyframes mPulse{0%,100%{opacity:.25}50%{opacity:1}}
.mrc-router{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid rgba(139,92,246,.34);
  border-radius:13px;background:rgba(139,92,246,.09)}
.mrc-router-ic{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:9px;
  background:var(--purple-t);color:var(--purple)}
.mrc-router-t{min-width:0;overflow:hidden}
.mrc-router b{font-size:13.5px;display:block;line-height:1.25}
.mrc-router .mrc-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrc-task{margin-left:auto;flex:none;font-size:10px;font-weight:600;padding:4px 9px;border-radius:99px;white-space:nowrap;animation:mFade .45s ease}
.mrc-pick{border:1px solid var(--line-2);border-radius:14px;padding:13px;background:var(--bg-2);animation:mFade .45s ease}
.mrc-pick-top{display:flex;align-items:center;gap:8px}
.mrc-pick-top b{font-size:14px}
.mrc-dot{width:8px;height:8px;border-radius:50%;flex:none}
.mrc-qi{margin-left:auto;font-size:10.5px;color:var(--tx-2)}
.mrc-pick-cost{display:grid;grid-template-columns:auto auto 1fr;gap:14px;align-items:end;margin-top:13px;
  padding-top:12px;border-top:1px solid var(--line)}
.mrc-price{font-size:14.5px;font-weight:600;margin-top:3px;white-space:nowrap}
.mrc-price em{font-size:9.5px;font-style:normal;color:var(--tx-3);margin-left:3px}
.mrc-price.strike{color:var(--tx-3);text-decoration:line-through;text-decoration-color:rgba(255,128,149,.7)}
.mrc-save{justify-self:end;font-family:var(--font-mono);font-size:15px;font-weight:700;color:#43d6a3}
.mrc-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
.mrc-dots span{width:6px;height:6px;border-radius:50%;background:var(--line-strong);transition:.2s}
.mrc-dots span.on{width:18px;border-radius:99px;background:var(--grad-route)}

/* ---- proof rail ---- */
.m-proof{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin:44px 0 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.m-proof-cell{background:var(--bg-0);padding:20px 16px;text-align:center}
.m-proof-v{font-size:clamp(22px,6.4vw,27px);font-weight:700;letter-spacing:-.02em;line-height:1}
.m-proof-l{font-size:11.5px;color:var(--tx-2);margin-top:6px;line-height:1.4}

/* ---- big number ---- */
.m-bignum{margin-top:26px;padding:22px 20px;border:1px solid var(--line-2);border-radius:18px;
  background:radial-gradient(120% 120% at 0% 0%,rgba(226,79,214,.12),transparent 58%),var(--bg-2)}
.m-bignum-v{font-size:clamp(46px,14vw,64px);font-weight:700;letter-spacing:-.035em;line-height:.94}
.m-bignum p{color:var(--tx-1);font-size:14px;line-height:1.6;margin:12px 0 0}
.m-bignum b{color:var(--tx-0)}

.m-leak{display:flex;gap:14px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.m-leak-n{font-size:12px;color:var(--tx-3);flex:none;padding-top:2px}
.m-leak b{font-size:14.5px;display:block}
.m-leak p{color:var(--tx-2);font-size:13px;line-height:1.6;margin:5px 0 0}

/* ---- price ladder ---- */
.m-ladder{display:flex;flex-direction:column;gap:9px;margin-top:26px}
.m-rung{padding:15px 16px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.m-rung.hot{border-color:rgba(226,79,214,.34);background:linear-gradient(90deg,rgba(226,79,214,.09),var(--bg-2))}
.m-rung-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.m-rung-top b{font-size:15px}
.m-rung-mult{font-family:var(--font-mono);font-size:12.5px;font-weight:700;white-space:nowrap}
.m-rung-base{font-size:11px;color:var(--tx-3);white-space:nowrap}
.m-rung-l{font-size:11.5px;color:var(--tx-3);margin-top:3px}
.m-rung-bar{display:flex;align-items:center;gap:9px;margin-top:11px}
.m-rung-q{flex:1;height:5px;border-radius:5px;background:var(--bg-3);overflow:hidden}
.m-rung-q span{display:block;height:100%;border-radius:5px}
.m-rung-qv{font-size:10.5px;color:var(--tx-2);flex:none}
.m-rung-p{font-size:12.5px;font-weight:600;color:var(--tx-0);flex:none;min-width:52px;text-align:right}

/* ---- ROI ---- */
.m-roi{margin-top:26px;padding:20px 18px;border:1px solid var(--line-2);border-radius:18px;background:var(--bg-2)}
.m-roi-hd{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.m-roi-hd>span:first-child{font-size:13px;color:var(--tx-2)}
.m-roi-in{font-size:24px;font-weight:700;color:var(--tx-0)}
.m-range{height:8px}
.m-range::-webkit-slider-thumb{width:26px;height:26px}
.m-roi-ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--tx-3);margin-top:9px}
.m-roi-out{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.m-roi-hero{text-align:center}
.m-roi-hero-v{font-size:clamp(40px,12.5vw,54px);font-weight:700;letter-spacing:-.03em;line-height:1}
.m-roi-hero-l{font-size:12.5px;color:var(--tx-2);margin-top:7px}
.m-roi-sub{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);margin-top:20px;
  border-radius:12px;overflow:hidden}
.m-roi-sub>div{background:var(--bg-2);padding:14px 10px;text-align:center}
.m-roi-sub b{display:block;font-size:17px;font-weight:600}
.m-roi-sub span{display:block;font-size:11px;color:var(--tx-3);margin-top:4px}
.m-roi-note{font-size:11px;color:var(--tx-3);text-align:center;margin-top:16px}

/* ---- breach ---- */
.m-breach{margin-top:26px;border:1px solid var(--line-2);border-radius:18px;overflow:hidden}
.m-breach-col{padding:18px}
.m-breach-col.bad{background:rgba(255,128,149,.055);border-bottom:1px solid var(--line)}
.m-breach-col.good{background:rgba(67,214,163,.055)}
.m-breach-h{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;margin-bottom:8px}
.m-breach-col.bad .m-breach-h{color:#ff8095}
.m-breach-col.good .m-breach-h{color:#43d6a3}
.m-breach-col p{color:var(--tx-1);font-size:13.5px;line-height:1.6;margin:0}
.m-breach-col b{color:var(--tx-0)}

.m-tiers{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.m-tier{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);
  border-radius:13px;background:var(--bg-2)}
.m-tier-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px}
.m-tier b{font-size:14px;display:block}
.m-tier p{color:var(--tx-2);font-size:12.5px;line-height:1.55;margin:3px 0 0}

/* ---- drop-in code ---- */
.m-code{margin-top:26px;border:1px solid var(--line-2);border-radius:18px;background:var(--bg-inset);overflow:hidden}
.m-code-blk{padding:16px 18px}
.m-code-cm{font-family:var(--font-mono);font-size:11px;color:var(--tx-3);margin-bottom:7px}
.m-code-ln{font-family:var(--font-mono);font-size:12.5px;color:var(--tx-1);word-break:break-all;line-height:1.55}
.m-code-ln b{color:var(--tx-0)}
.m-code-cost{font-family:var(--font-mono);font-size:16px;font-weight:700;margin-top:9px}
.m-code-cost em{font-size:10.5px;font-style:normal;font-weight:500;color:var(--tx-3)}
.m-code-cost.bad{color:#ff8095}
.m-code-cost.good{color:#43d6a3}
.m-code-div{text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:var(--bg-2);padding:7px}
.m-code-div span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3)}

.m-strats{margin-top:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--bg-2)}
.m-strats-h{font-size:9.5px;letter-spacing:.18em;color:var(--tx-3);margin-bottom:12px}
.m-strats-row{display:flex;flex-wrap:wrap;gap:7px}
.m-strat{font-family:var(--font-mono);font-size:11.5px;color:var(--tx-1);background:var(--bg-3);
  border:1px solid var(--line);border-radius:8px;padding:5px 9px}
.m-strat.hot{background:var(--grad-brand);border-color:transparent;color:#fff;font-weight:600}
.m-strats p{color:var(--tx-2);font-size:12.5px;line-height:1.6;margin:14px 0 0}
.m-strats b{color:var(--tx-0)}

/* ---- security cards ---- */
.m-sec-card{display:flex;gap:14px;padding:17px;border:1px solid var(--line);border-radius:15px;background:var(--bg-2)}
.m-sec-ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px}
.m-sec-card b{font-size:15px;display:block}
.m-sec-card p{color:var(--tx-2);font-size:13px;line-height:1.6;margin:5px 0 0}

/* ---- accordion ---- */
.m-acc{margin-top:12px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg-2);overflow:hidden}
.m-acc-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:16px;
  background:none;border:none;color:var(--tx-0);font-family:var(--font-ui);font-size:14.5px;font-weight:600;text-align:left}
.m-acc-chev{color:var(--tx-2);flex:none;transition:.2s}
.m-acc.open .m-acc-chev{transform:rotate(180deg)}
.m-acc-body{padding:0 16px 6px;animation:mFade .24s ease}
.m-acc-item{padding:14px 0;border-top:1px solid var(--line)}
.m-acc-item b{font-size:13.5px;display:block}
.m-acc-item p{color:var(--tx-2);font-size:12.5px;line-height:1.6;margin:4px 0 0}

/* ---- pricing rail ---- */
.m-rail{display:flex;gap:12px;margin:26px -18px 0;padding:14px 18px 18px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.m-rail::-webkit-scrollbar{display:none}
.m-price{flex:0 0 268px;scroll-snap-align:center;position:relative;display:flex;flex-direction:column;
  padding:22px 18px;border:1px solid var(--line-2);border-radius:18px;background:var(--bg-2)}
.m-price.pop{border-color:rgba(226,79,214,.5);box-shadow:0 22px 54px -28px rgba(226,79,214,.5)}
.m-price-flag{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--grad-brand);color:#fff;
  font-family:var(--font-mono);font-size:9.5px;font-weight:700;letter-spacing:.1em;padding:4px 11px;border-radius:99px;white-space:nowrap}
.m-price-n{font-family:var(--font-display);font-size:17px;font-weight:700}
.m-price-v{margin-top:12px}
.m-price-v>b{font-size:30px;font-weight:700;letter-spacing:-.02em}
.m-price-v>span{font-size:12.5px;color:var(--tx-2);margin-left:5px}
.m-price-rate{font-size:10.5px;color:var(--tx-3);margin-top:6px}
.m-price-tag{color:var(--tx-2);font-size:12.5px;line-height:1.55;margin:14px 0 16px;min-height:38px}
.m-price-f{list-style:none;padding:16px 0 0;margin:18px 0 0;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:9px}
.m-price-f li{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--tx-1);line-height:1.45}
.m-price-f .ico{color:var(--green);flex:none;margin-top:2px}
.m-swipe{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-3)}
.m-swipe .ico{transform:rotate(180deg)}

/* ---- FAQ ---- */
.m-faq{margin-top:22px;border-top:1px solid var(--line)}
.m-q{border-bottom:1px solid var(--line)}
.m-q-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:17px 2px;
  background:none;border:none;color:var(--tx-0);font-family:var(--font-ui);font-size:14.5px;font-weight:600;text-align:left}
.m-q-chev{color:var(--tx-2);flex:none;transition:.2s}
.m-q.open .m-q-chev{transform:rotate(180deg)}
.m-q-body{padding:0 2px 17px;animation:mFade .22s ease}
.m-q-body p{color:var(--tx-1);font-size:13.5px;line-height:1.65;margin:0}

/* ---- CTA ---- */
.m-cta{position:relative;overflow:hidden;text-align:center;margin:64px 14px 0;padding:48px 22px;
  border:1px solid var(--line-2);border-radius:22px;background:var(--bg-2)}
.m-cta h2{position:relative;font-size:clamp(25px,7vw,31px);font-weight:700;letter-spacing:-.02em;line-height:1.14;margin:0}
.m-cta p{position:relative;color:var(--tx-1);font-size:14.5px;line-height:1.6;margin:14px 0 26px}
.m-cta .m-btn-xl{position:relative}

/* ---- footer ---- */
.m-footer{padding:44px 18px 132px;border-top:1px solid var(--line);margin-top:56px}
.m-foot-brand{display:flex;align-items:center;gap:12px}
.m-foot-brand .display{font-size:16px;font-weight:700;margin-bottom:4px}
.m-foot-links{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:24px;font-size:13px;color:var(--tx-1)}
.m-foot-c{font-size:11.5px;color:var(--tx-3);margin-top:22px}

/* ---- sticky dock ---- */
.m-dock{position:fixed;left:0;right:0;bottom:0;z-index:75;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(7,8,13,.9);backdrop-filter:blur(18px);border-top:1px solid var(--line-2);
  transform:translateY(120%);transition:transform .32s cubic-bezier(.22,.7,.28,1)}
.m-dock.on{transform:none}
.m-dock-in{display:flex;align-items:center;gap:12px;max-width:560px;margin:0 auto}
.m-dock-t{flex:1;min-width:0}
.m-dock-t b{display:block;font-size:14px;line-height:1.2}
.m-dock-t span{display:block;font-size:11px;color:var(--tx-3);margin-top:2px}
.m-dock .btn{flex:none;padding:12px 16px;font-size:14px;border-radius:12px}

/* very small phones */
@media(max-width:360px){
  .m-sec{padding-left:14px;padding-right:14px}
  .m-rail{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .mrc-pick-cost{grid-template-columns:auto 1fr;gap:10px}
  .mrc-save{grid-column:2;justify-self:end}
  /* 320px cannot fit name + sublabel + task pill on one line: drop the sublabel
     and wrap the pill below, so neither the name nor the pill is ever clipped */
  .mrc-router{flex-wrap:wrap}
  .mrc-router .mrc-lbl{display:none}
  .mrc-task{margin-top:4px}
  .m-price{flex-basis:245px}
  .m-dock-t span{display:none}
}
`}</style>;
}

window.MobileLanding = MobileLanding;