.mobile-app-nav{display:none}

/* Mobile-first polish for the static public site.
   Desktop styles stay intact; this layer makes the pages feel like a compact app. */

@media (max-width:760px){
  :root{
    --mobile-pad:18px;
    --mobile-card:16px;
    --mobile-dock-h:70px;
  }

  html{scroll-padding-top:88px}
  body{
    font-size:14.5px;
    line-height:1.5;
    padding-bottom:calc(var(--mobile-dock-h) + 28px + env(safe-area-inset-bottom,0px));
  }
  body::before{
    background:
      radial-gradient(ellipse 80% 36% at 50% -10%, rgba(212,255,58,.07), transparent 62%),
      radial-gradient(ellipse 80% 52% at 50% 100%, rgba(139,215,255,.035), transparent 72%),
      linear-gradient(180deg, rgba(10,11,9,1), rgba(7,8,6,1));
  }
  body::after{opacity:.42}
  .bg-dots{background-size:34px 34px;opacity:.7}

  .container,
  .container-narrow{
    width:100%;
    max-width:none!important;
    padding-left:var(--mobile-pad)!important;
    padding-right:var(--mobile-pad)!important;
  }

  main{
    padding-top:86px!important;
    overflow:hidden;
  }

  /* Compact top app bar */
  .header{
    top:10px!important;
    width:calc(100% - 20px)!important;
    max-width:none!important;
    overflow:visible!important;
  }
  .header-inner{
    display:flex!important;
    grid-template-columns:none!important;
    align-items:center!important;
    justify-content:space-between!important;
    min-height:56px;
    padding:7px 84px 7px 10px!important;
    gap:8px!important;
    border-radius:18px!important;
    overflow:visible!important;
    background:linear-gradient(180deg,rgba(14,16,11,.82),rgba(7,8,6,.74))!important;
    border-color:rgba(244,237,224,.11)!important;
    box-shadow:0 18px 52px -26px rgba(0,0,0,.85), inset 0 1px 0 rgba(244,237,224,.045)!important;
    backdrop-filter:blur(22px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(22px) saturate(145%)!important;
  }
  .header .logo{
    flex:0 1 auto!important;
    max-width:100%!important;
    min-height:44px!important;
    min-width:0!important;
    gap:7px!important;
    font-size:22px!important;
    padding:0 4px!important;
    overflow:hidden!important;
  }
  .header .logo-mark-test{
    width:31px!important;
    height:29px!important;
  }
  .header .logo-mark-test img{width:31px!important}
  .header .logo-text{max-width:84px;overflow:hidden;text-overflow:ellipsis}
  .nav{display:none!important}
  .header .cta{
    flex:0 0 auto!important;
    width:68px!important;
    max-width:68px!important;
    margin-left:auto!important;
    justify-self:auto!important;
    align-self:center!important;
    position:absolute!important;
    right:10px!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    height:38px!important;
    min-width:68px!important;
    min-height:38px!important;
    display:inline-flex!important;
    justify-content:center!important;
    align-items:center!important;
    padding:0 12px!important;
    border-radius:999px!important;
    background:var(--lime)!important;
    color:#0a0b09!important;
    font-size:0!important;
    box-shadow:0 0 0 1px rgba(212,255,58,.28), 0 10px 30px -14px rgba(212,255,58,.82)!important;
  }
  .header .cta:hover{
    transform:translateY(-50%)!important;
  }
  .header .cta::before{
    content:'Beta';
    font-size:13px;
    font-weight:820;
    line-height:1;
    letter-spacing:-.01em;
  }
  .header .cta .arr{display:none!important}

  /* App-like bottom navigation injected by shared.js */
  .mobile-app-nav{
    position:fixed;
    left:10px;
    right:10px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    z-index:90;
    height:62px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
    gap:4px;
    padding:6px;
    border:1px solid rgba(244,237,224,.12);
    border-radius:22px;
    background:linear-gradient(180deg,rgba(15,17,12,.88),rgba(7,8,6,.82));
    box-shadow:0 20px 70px -26px rgba(0,0,0,.95), inset 0 1px 0 rgba(244,237,224,.05);
    backdrop-filter:blur(24px) saturate(150%);
    -webkit-backdrop-filter:blur(24px) saturate(150%);
  }
  .mobile-app-nav a{
    min-width:0;
    height:52px;
    display:grid;
    place-items:center;
    align-content:center;
    gap:3px;
    color:rgba(244,237,224,.56);
    text-decoration:none;
    border-radius:16px;
    font-size:10.5px;
    font-weight:720;
    letter-spacing:-.01em;
    transition:background .24s ease,color .24s ease,transform .24s var(--easing);
  }
  .mobile-app-nav a::before{
    content:attr(data-icon);
    width:21px;
    height:21px;
    display:grid;
    place-items:center;
    color:currentColor;
    font-size:15px;
    line-height:1;
  }
  .mobile-app-nav a.active{
    color:#d4ff3a;
    background:rgba(212,255,58,.12);
  }
  .mobile-app-nav a:active{transform:scale(.96)}

  /* Global section rhythm */
  .section-tag{
    margin-bottom:11px!important;
    font-size:10px!important;
    letter-spacing:.105em!important;
  }
  .page-head,
  .hero,
  .beta-hero,
  .protocol-hero{
    padding-top:14px!important;
    margin-bottom:28px!important;
  }
  .page-head{
    padding-bottom:28px!important;
    border-bottom:0!important;
  }
  .page-head h1,
  .hero-h1,
  .hero-headline,
  .protocol-copy h1,
  .beta-hero h1{
    font-size:clamp(34px,10.4vw,42px)!important;
    line-height:.98!important;
    letter-spacing:-.045em!important;
    text-wrap:balance;
    margin-bottom:14px!important;
  }
  .page-head .lede,
  .hero-desc,
  .hero-sub,
  .protocol-copy .lede,
  .beta-hero .lede,
  .section-desc{
    font-size:15px!important;
    line-height:1.52!important;
    max-width:34ch!important;
  }
  .section-h2,
  .page-section-head h2,
  .protocol-head h2,
  .refuse-head h2,
  .arc-head h2,
  .team-head h2,
  .v-head h2,
  .faq-head h2,
  .flow-head h2,
  .sm-head h2{
    font-size:clamp(27px,8vw,34px)!important;
    line-height:1.02!important;
    letter-spacing:-.036em!important;
    text-wrap:balance;
  }
  .page-section,
  .manifesto,
  .why,
  .timeline,
  .team,
  .values,
  .finale,
  section.faq-section,
  .flow-section,
  .arch,
  .vault-sec,
  .fees-sec,
  .fn-sec,
  .sm-sec,
  .flow-sec,
  .problem-sec,
  .integrations-sec{
    padding-top:34px!important;
    padding-bottom:44px!important;
    border-bottom:1px solid rgba(244,237,224,.055)!important;
  }
  .page-section-head,
  .why-head,
  .team-head,
  .v-head,
  .faq-head,
  .flow-head,
  .sm-head{
    margin-bottom:20px!important;
    gap:10px!important;
    text-align:left!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
  }

  /* Cards and lists */
  .mf-card,
  .why-card,
  .member,
  .finale-card,
  .faq-item,
  .join-card,
  .beta-rail,
  .flow-step,
  .perk,
  .invariant,
  .integration,
  .lc-state,
  .contract-item,
  .bounty-card,
  .contact-card,
  .arch-card,
  .vault-card,
  .fee-card,
  .fn-card,
  .sm-state,
  .flow-card,
  .refuse-card,
  .protocol-step,
  .layer-card,
  .state-card,
  .rail-card{
    border-radius:var(--mobile-card)!important;
    padding:18px!important;
    background:rgba(13,14,11,.42)!important;
    border-color:rgba(244,237,224,.095)!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
  }
  .why-grid,
  .team-grid,
  .v-list,
  .invariants,
  .integrations,
  .bounty-grid,
  .contract-list,
  .arch-grid,
  .vault-grid,
  .fee-grid,
  .fn-grid,
  .sm-list,
  .flow-steps,
  .refuse-grid,
  .protocol-steps,
  .flow-steps,
  .perks,
  .beta-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .btn,
  .btn-code,
  .header-cta,
  .copy-ref,
  .cl-copy,
  .flow-tab,
  .fn-tab,
  .cat-tab,
  .role-pill{
    min-height:44px!important;
  }
  .btn,
  .btn-code{
    width:100%;
    justify-content:center;
    padding:12px 16px!important;
    border-radius:15px!important;
  }

  /* Decorative/technical visuals: keep the message, reduce the weight */
  .hero-illu,
  .why-illu,
  .member-illu,
  .protocol-machine,
  .arc-map,
  .finale-illu,
  .protocol-visual,
  .hero-visual,
  .arch-visual,
  .flow-card > svg,
  .sm-graph,
  .fee-visual,
  .state-graph{
    display:none!important;
  }

  /* Landing */
  .route-home .hero,
  body:has(.settlement-core-hero) .hero{
    min-height:auto!important;
    width:100%!important;
    margin:0!important;
    padding:12px 0 30px!important;
  }
  .hero-scene{
    min-height:210px!important;
    aspect-ratio:1.45/1!important;
    border-radius:20px!important;
    margin:0 0 14px!important;
  }
  .hero-scene > svg.settlement-core-hero{
    width:102%!important;
    height:102%!important;
  }
  .hero-actions{
    flex-direction:column!important;
    align-items:stretch!important;
    max-width:100%!important;
  }
  .signature-badges{display:none!important}
  .protocol-layout,
  .arc-layout,
  .finale-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
  .protocol-copy,
  .refuse-head,
  .arc-head,
  .finale-text{
    text-align:left!important;
  }
  .protocol-step{min-height:0!important}
  .route-home .protocol-section,
  .route-home .refuse-section,
  .route-home .arc-section,
  .route-home .finale-section{
    padding-top:34px!important;
    padding-bottom:40px!important;
  }
  .route-home .protocol-section{
    margin-top:0!important;
  }
  .route-home .protocol-head,
  .route-home .refuse-head,
  .route-home .arc-head{
    margin-bottom:18px!important;
  }
  .route-home .protocol-head .sub,
  .route-home .arc-head .sub{
    max-width:34ch!important;
    margin-left:0!important;
    margin-right:0!important;
  }
  .route-home .protocol-head h2 .hand{
    display:block!important;
    width:max-content!important;
    max-width:100%!important;
    margin-top:4px!important;
  }
  .route-home .protocol-copy{
    display:none!important;
  }
  .route-home .protocol-steps,
  .route-home .refuse-grid{
    display:flex!important;
    grid-template-columns:none!important;
    gap:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    margin-left:calc(var(--mobile-pad) * -1)!important;
    margin-right:calc(var(--mobile-pad) * -1)!important;
    padding:0 var(--mobile-pad) 6px!important;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .route-home .protocol-steps::-webkit-scrollbar,
  .route-home .refuse-grid::-webkit-scrollbar{
    display:none;
  }
  .route-home .protocol-step,
  .route-home .refuse-card{
    flex:0 0 min(82vw,330px)!important;
    scroll-snap-align:start;
    min-height:0!important;
  }
  .route-home .step-visual{
    aspect-ratio:2.85 / 1!important;
    margin-bottom:12px!important;
  }
  .route-home .arc-map{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:14px!important;
  }
  .route-home .arc-map-copy{
    padding:0!important;
  }
  .route-home .arc-map-copy h3{
    max-width:14ch!important;
    font-size:clamp(25px,7.4vw,32px)!important;
    margin-bottom:12px!important;
  }
  .route-home .arc-map-copy p{
    max-width:35ch!important;
    font-size:14px!important;
    line-height:1.48!important;
  }
  .route-home .arc-proof{
    width:100%!important;
    margin-top:14px!important;
    padding:11px!important;
    border-radius:15px!important;
  }
  .route-home .arc-proof-steps{
    gap:5px!important;
  }
  .route-home .arc-proof-steps i{
    padding:5px 7px!important;
    font-size:8.5px!important;
  }
  .protocol-step h3,
  .refuse-card h3,
  .why-card h3{
    font-size:19px!important;
    line-height:1.12!important;
  }

  /* About */
  .hero-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:16px!important;
  }
  .hero-meta{
    gap:7px!important;
  }
  .hm-item{
    padding:7px 9px!important;
    font-size:9.5px!important;
  }
  .mf-text{
    font-size:18px!important;
    line-height:1.34!important;
    margin-bottom:14px!important;
  }
  .route-about .mf-card .mf-text:nth-of-type(3),
  .route-about .member-bio{
    display:none!important;
  }
  .tl-list{
    gap:10px!important;
  }
  .tl-item{
    padding-left:16px!important;
    padding-bottom:18px!important;
  }
  .member{
    display:grid!important;
    grid-template-columns:1fr!important;
    min-height:0!important;
  }
  .member-bio,
  .v-info span{
    font-size:13.5px!important;
    line-height:1.45!important;
  }
  .finale-cta{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  /* FAQ */
  .search-wrap{padding:0 0 12px!important}
  .search-box{
    min-height:54px!important;
    border-radius:17px!important;
  }
  .search-box input{
    min-height:52px!important;
    font-size:15px!important;
  }
  .cat-tabs,
  .fn-tabs,
  .flow-tabs,
  .protocol-pills,
  .role-pills{
    display:flex!important;
    gap:8px!important;
    overflow-x:auto!important;
    padding:0 0 8px!important;
    margin-left:calc(var(--mobile-pad) * -1)!important;
    margin-right:calc(var(--mobile-pad) * -1)!important;
    padding-left:var(--mobile-pad)!important;
    padding-right:var(--mobile-pad)!important;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .cat-tabs::-webkit-scrollbar,
  .fn-tabs::-webkit-scrollbar,
  .flow-tabs::-webkit-scrollbar,
  .protocol-pills::-webkit-scrollbar,
  .role-pills::-webkit-scrollbar{display:none}
  .cat-tab,
  .fn-tab,
  .flow-tab,
  .protocol-pill,
  .role-pill{
    flex:0 0 auto!important;
    scroll-snap-align:start;
    border-radius:14px!important;
    padding:10px 13px!important;
    font-size:11px!important;
  }
  .faq-q{
    min-height:58px!important;
    padding:16px!important;
    font-size:15px!important;
  }
  .faq-plus{
    width:30px!important;
    height:30px!important;
  }
  .faq-a-inner{
    padding:0 16px 18px!important;
    font-size:14px!important;
  }
  .route-faq .faq-section.hidden{
    display:none!important;
  }

  /* Protocol + security */
  .protocol-hero{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .invariant .code,
  .code-block,
  .audit-table,
  .contract-list,
  .bounty-grid,
  .contact-card,
  .fn-card code{
    font-size:11px!important;
  }
  .code-block pre{
    font-size:11px!important;
    line-height:1.5!important;
    padding:14px!important;
  }
  .audit-table{
    display:grid!important;
    gap:10px!important;
    border:0!important;
    background:transparent!important;
  }
  .audit-row,
  .contract-item{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:8px!important;
    padding:16px!important;
    border:1px solid rgba(244,237,224,.095)!important;
    border-radius:16px!important;
    background:rgba(13,14,11,.42)!important;
  }
  .cl-copy{
    width:100%!important;
    justify-content:center!important;
  }
  .at-link{
    min-height:44px!important;
    display:inline-flex!important;
    align-items:center!important;
  }

  /* Architecture: technical page becomes a compact reading path */
  .architecture-page .hero,
  .architecture-page .arch,
  .architecture-page .vault-sec,
  .architecture-page .fees-sec,
  .architecture-page .fn-sec,
  .architecture-page .sm-sec,
  .architecture-page .flow-sec{
    padding-top:30px!important;
    padding-bottom:38px!important;
  }
  .architecture-page .safe-sec,
  .architecture-page .roles-sec,
  .architecture-page .fs-sec,
  .architecture-page .flow-sec{
    display:none!important;
  }
  .arch-card,
  .vault-card,
  .fee-card,
  .fn-card,
  .sm-state{
    min-height:0!important;
  }
  .fn-grid .fn-card:nth-child(n+5),
  .sm-list .sm-state:nth-child(n+6),
  .flow-panel .fs:nth-child(n+4){
    display:none!important;
  }
  .architecture-page .fee-rows .fee-row:nth-child(n+3),
  .architecture-page .fee-modes,
  .architecture-page .gasless-card,
  .architecture-page .gasless-illu,
  .architecture-page .safe-illu,
  .architecture-page .fs-illu{
    display:none!important;
  }
  .architecture-page .fee-example,
  .architecture-page .gasless-card{
    padding:18px!important;
    border-radius:16px!important;
  }
  .fn-grid::after{
    content:'More contract functions are best reviewed on desktop.';
    display:block;
    padding:14px 16px;
    border:1px dashed rgba(244,237,224,.12);
    border-radius:16px;
    color:rgba(244,237,224,.48);
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
  }
  .fn-head-row,
  .fee-row,
  .vault-row{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:7px!important;
  }
  .fn-sig,
  .sm-name{
    word-break:break-word!important;
    overflow-wrap:anywhere!important;
  }
  .architecture-page .summary-quotes .sq:nth-child(n+5){
    display:none!important;
  }
  .architecture-page .summary-card{
    padding:18px!important;
    border-radius:16px!important;
  }

  /* Protocol page: lifecycle becomes a compact status list */
  .route-protocole .lifecycle{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .route-protocole .lifecycle::before{display:none!important}
  .route-protocole .lc-state{
    display:grid!important;
    grid-template-columns:44px minmax(0,1fr)!important;
    grid-template-areas:
      "pip title"
      "pip copy"!important;
    column-gap:13px!important;
    row-gap:3px!important;
    align-items:start!important;
    text-align:left!important;
    padding:15px!important;
    min-height:0!important;
  }
  .route-protocole .lc-pip{
    grid-area:pip!important;
    width:40px!important;
    height:40px!important;
    margin:0!important;
    align-self:start!important;
    font-size:10px!important;
  }
  .route-protocole .lc-state h4{
    grid-area:title!important;
    margin:0 0 4px!important;
    font-size:16px!important;
    line-height:1.12!important;
  }
  .route-protocole .lc-state p{
    grid-area:copy!important;
    font-size:13px!important;
    line-height:1.42!important;
    max-width:none!important;
    margin:0!important;
    color:rgba(244,237,224,.68)!important;
  }
  .route-protocole .lc-state .mono{display:none!important}

  .route-protocole .invariant .code{
    display:none!important;
  }
  .route-protocole .code-block{
    margin-left:calc(var(--mobile-pad) * -1)!important;
    margin-right:calc(var(--mobile-pad) * -1)!important;
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
  }
  .route-protocole .cb-head{
    gap:10px!important;
  }
  .route-protocole .cb-head span:first-child{
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  .route-protocole .page-section:last-of-type .reveal{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  /* Beta */
  .beta-hero{
    text-align:left!important;
    min-height:0!important;
  }
  .join-card{
    order:1;
  }
  .beta-rail{
    order:2;
    min-height:0!important;
  }
  .pass-card,
  .pass-visual{
    transform:none!important;
    min-height:0!important;
  }
  .join-form{
    display:grid!important;
    gap:12px!important;
  }
  .field-row,
  .field-group{
    gap:7px!important;
  }
  input,
  select,
  textarea{
    min-height:48px!important;
    font-size:16px!important;
    border-radius:14px!important;
  }
  .role-pills{
    margin:0!important;
    padding:0 0 8px!important;
  }
  .flow-steps{
    display:grid!important;
    grid-template-columns:1fr!important;
  }

  /* Footer becomes quiet because bottom dock handles navigation */
  .footer{
    padding:18px 0 calc(132px + env(safe-area-inset-bottom,0px))!important;
    background:linear-gradient(90deg,transparent,rgba(244,237,224,.06),rgba(212,255,58,.08),rgba(244,237,224,.06),transparent) top/100% 1px no-repeat!important;
    scroll-margin-bottom:calc(var(--mobile-dock-h) + 40px)!important;
  }
  .footer-row{
    display:grid!important;
    gap:8px!important;
    justify-items:start!important;
    text-align:left!important;
  }
  .footer-signature{
    min-width:0!important;
    width:100%!important;
    justify-content:flex-start!important;
  }
  .footer-logo{
    min-height:44px!important;
    display:inline-flex!important;
    align-items:center!important;
    font-size:19px!important;
  }
  .footer-copy{
    max-width:260px!important;
    text-align:left!important;
    border-left:0!important;
    padding-left:0!important;
  }
  .footer-copy strong{font-size:16px!important}
  .footer-copy span{display:none!important}
  .footer-links{
    display:none!important;
    overflow-x:auto!important;
    width:100%!important;
    justify-content:flex-start!important;
    gap:6px!important;
    padding-bottom:6px!important;
  }
  .footer-links::-webkit-scrollbar{display:none}
  .footer-links a{
    min-height:42px!important;
    flex:0 0 auto!important;
    display:inline-flex!important;
    align-items:center!important;
    border:1px solid rgba(244,237,224,.08)!important;
    border-radius:999px!important;
    padding:8px 11px!important;
    font-size:11.5px!important;
  }
}

@media (max-width:380px){
  :root{--mobile-pad:15px}
  .header .logo-text{display:none}
  .header .cta{height:37px!important;min-width:64px!important;min-height:37px!important;padding:0 12px!important}
  .mobile-app-nav{left:7px;right:7px}
  .mobile-app-nav a{font-size:10px}
}