/* ===== Cuetick home: compact phone layout (max-width 720px) ===== */ @media (max-width:720px){ /* overall rhythm */ section#packages,section#referral,section#security,section#roadmap,section#faq{padding-top:34px!important;padding-bottom:34px!important} #mechanism .hw-h,#packages h2,#security h2,#roadmap h2,#faq h2,#ai-flow .af-title h2,#referral h2,#start-now h2{font-size:25px!important;line-height:1.14!important;letter-spacing:-.02em!important} #mechanism .hw-sub,#packages .lede,#security .lede,#roadmap .lede,#ai-flow .lede,#referral .rf-lede{font-size:14.5px!important;line-height:1.5!important;margin-top:8px!important} #mechanism .hw-k,#packages .kicker,#security .kicker,#roadmap .kicker{margin-bottom:6px!important} /* How your system works */ #mechanism .hw-video{max-height:150px!important;min-height:0!important} #hxw .hx-tl{margin-top:18px!important} #hxw .hx-row{grid-template-columns:40px minmax(0,1fr)!important;gap:10px!important;padding-bottom:24px!important} #hxw .hx-dot{width:40px!important;height:40px!important;font-size:16px!important;border-width:2px!important} #hxw .hx-copy{padding-top:2px!important} #hxw .hx-copy h3{font-size:18px!important} #hxw .hx-copy p{font-size:13.5px!important;margin-top:6px!important;line-height:1.5!important} #hxw .hx-chip{margin-top:8px!important;padding:5px 10px!important;font-size:12px!important} #hxw .hx-call{display:none!important} #hxw .hx-in{padding:8px 12px 12px!important} #hxw .hx-bar{padding:8px 12px!important} #hxw .hx-pool,#hxw .hx-kv{padding:5px 0!important} #hxw .hx-chart{height:54px!important} #hxw .hx-mw{margin-top:2px!important} /* AI flow: fix the stacked step cards overlapping */ #ai-flow .af-stage{gap:12px!important} #ai-flow .af-cards{height:auto!important;margin-top:22px!important;gap:10px!important} #ai-flow .af-card,#ai-flow .af-card.left,#ai-flow .af-card.right,#ai-flow .af-card.mid{flex:0 0 auto!important;height:auto!important;min-height:0!important;padding:16px 16px 18px!important;transform:none!important} #ai-flow .af-card.mid{order:1!important}#ai-flow .af-card.left{order:2!important}#ai-flow .af-card.right{order:3!important} #ai-flow .af-card h3{margin-top:12px!important;font-size:18px!important} #ai-flow .af-card p{margin-top:8px!important;font-size:13.5px!important;line-height:1.5!important} /* Packages */ #packages .pk2-grid{gap:14px!important} #packages .pk2{padding:16px!important} #packages .pk2 li{padding:3px 0!important;font-size:13.5px!important} #packages .pk2-calc{padding:12px!important} #packages .pk2-out{gap:8px!important} #packages .pkx-note{padding:12px!important;font-size:13px!important} /* Referral */ #referral .rf-card{padding:18px!important} #referral .rf-copy h2{margin-bottom:8px!important} #referral .rf-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:14px!important} #referral .rf-stats>*{padding:10px 12px!important;min-width:0!important} #referral .rf-stats>*:last-child{grid-column:1/-1!important} #referral .rf-visual{padding:12px!important;margin-top:14px!important} #referral .rk-bars{gap:6px!important} /* Ecosystem console */ #security .e-grid{padding:12px!important;row-gap:10px!important} #security .e-card{padding:11px 12px!important} #security .e-card p{font-size:12.5px!important;line-height:1.45!important} #security .e-core-h{padding:10px 12px!important} #security .e-json{padding:10px 12px!important;font-size:11.5px!important;line-height:1.55!important} #security .e-term{display:none!important} #security .e-bar{padding:9px 12px!important} /* Roadmap */ #roadmap .rm-legend{margin-top:14px!important} #roadmap .rm-card{padding:16px!important} #roadmap .rm-visual{display:none!important} #roadmap .rmc-list .item{padding:9px 10px!important} /* FAQ */ #faq .faq-q{padding:13px 16px!important;font-size:15px!important} #faq .faq-item{margin-bottom:8px!important} /* sections removed on phones */ section#mechanism,section#ai-flow{display:none!important} /* header: logo on the left, language + menu together on the right */ .nav-wrap{padding-left:12px!important;padding-right:12px!important} .nav-pill{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;min-height:58px!important;padding:8px 8px 8px 14px!important} .nav-pill .logo{margin-right:auto!important;flex:0 1 auto!important} .nav-pill .nav-act{margin-left:auto!important;gap:8px!important;flex:none!important} .nav-pill .ct-lang{margin:0!important} .nav-pill .ct-lb{height:42px!important;min-width:64px!important;border-radius:14px!important;padding:0 12px!important} .nav-pill .nav-menu{width:42px!important;height:42px!important;border-radius:14px!important;margin:0!important;flex:none!important} /* closing call to action: full width card, one-line buttons */ #start-now .wrap{padding-left:0!important;padding-right:0!important} #start-now .endc{width:100%!important;max-width:none!important;box-sizing:border-box!important;padding:26px 20px 24px!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:18px!important} #start-now .endc>div:first-child{flex:none!important;width:100%!important} #start-now .endc h2{font-size:28px!important} #start-now .endc-a{width:100%!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:12px!important;margin:0!important} #start-now .endc-a .btn{width:100%!important;justify-content:center!important;text-align:center!important;white-space:nowrap!important;padding:16px 20px!important;min-height:54px!important;font-size:16px!important} #start-now .endc-a a:not(.btn){display:block!important;text-align:center!important;white-space:nowrap!important;font-size:14.5px!important} /* footer */ footer{padding:26px 0 18px!important} footer .foot-ring{display:none!important} footer .foot-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px 12px!important} footer .foot-grid>div:first-child{grid-column:1/-1!important} footer .foot-logo{font-size:24px!important} footer .foot-desc{font-size:13px!important;line-height:1.5!important;margin:8px 0 12px!important;max-width:none!important} footer .foot-soc a{width:36px!important;height:36px!important;border-radius:11px!important} footer .foot-col h5{font-size:12px!important;margin:0 0 6px!important} footer .foot-col a{font-size:13px!important;padding:4px 0!important;display:block!important} footer .foot-bottom{margin-top:16px!important;padding-top:12px!important;padding-bottom:56px!important;font-size:11.5px!important;gap:4px!important} }