/* Ace Academy CRM - "Campus" design: navy top bar, blue accent, squared cards, task-first dashboard. */
:root{--navy:#0e1a36;--navy2:#182a52;--blue:#3358f4;--blue-d:#2442d0;--blue-l:#eaf0ff;--accent:#ff7a1a;--ink:#101a33;--mut:#667391;--line:#e1e6f0;--bg:#f4f6fb;--card:#fff;--ok:#12a150;--bad:#e5383b;--warn:#f59f00;--r:12px;
--sh:0 1px 2px rgba(16,26,51,.05);--sh2:0 12px 32px rgba(14,26,54,.18)}
*{box-sizing:border-box}html,body{margin:0}
body{font:14px/1.55 "Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
::selection{background:#c9d6ff}
a{color:var(--blue-d);text-decoration:none}a:hover{text-decoration:underline}
h1{font-size:26px;line-height:1.15;margin:0;letter-spacing:-.6px;font-weight:800}h2{font-size:13px;margin:0 0 14px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--mut)}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#fff;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(51,88,244,.18)}
textarea{min-height:84px;resize:vertical}label{display:block;font-size:12px;font-weight:700;color:var(--mut);margin:12px 0 5px}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--blue)}
.num,.strip b,.kpi b{font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 15px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;font-weight:700;transition:all .15s;white-space:nowrap}
.btn:hover{border-color:#b9c3dc;background:#f8faff;text-decoration:none}
.btn.pri{background:var(--blue);border-color:var(--blue);color:#fff}.btn.pri:hover{background:var(--blue-d);border-color:var(--blue-d)}
.btn.red{color:var(--bad)}.btn.red:hover{background:#fff5f5;border-color:#f3b6b8}.btn.sm{padding:4px 10px;font-size:12px;border-radius:7px}.btn.wa{background:#1fa855;border-color:#1fa855;color:#fff}.btn.wa:hover{background:#188c46}.btn[disabled]{opacity:.5;pointer-events:none}
.btn.block{width:100%}

/* top bar */
.topbar{position:sticky;top:0;z-index:40;height:62px;display:flex;align-items:center;gap:22px;padding:0 24px;background:var(--navy);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.tlogo{background:#fff;border-radius:9px;padding:5px 12px;display:flex;align-items:center;flex:0 0 auto}.tlogo img{height:32px;display:block}
.tnav{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.tnav a{position:relative;display:flex;align-items:center;gap:8px;padding:9px 13px;border-radius:8px;color:#b6c2e0;font-weight:700;white-space:nowrap;transition:all .15s}
.tnav a svg,.tabbar a svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tnav a:hover{color:#fff;background:rgba(255,255,255,.08);text-decoration:none}.tnav a.on{color:#fff;background:rgba(255,255,255,.13)}
.tnav a.on:after{content:"";position:absolute;left:12px;right:12px;bottom:-11px;height:3px;border-radius:3px 3px 0 0;background:var(--accent)}
.tright{display:flex;gap:8px;align-items:center;flex:0 0 auto}
.tbtn{position:relative;width:38px;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s}
.tbtn:hover{background:rgba(255,255,255,.14)}.tbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tbtn .av{box-shadow:none;width:30px;height:30px}
.dotc[hidden]{display:none}
.dotc{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--navy)}
.page{max-width:1380px;margin:0 auto;padding:26px 24px 70px}
.pop{position:fixed;z-index:70;min-width:250px;max-width:340px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh2);padding:6px;animation:rise .15s}
.pop .ph0{padding:10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px}.pop a,.pop button.pi{display:flex;gap:10px;align-items:center;width:100%;padding:9px 12px;border-radius:8px;color:var(--ink);font-weight:600;background:none;border:0;cursor:pointer;text-align:left}
.pop a:hover,.pop button.pi:hover{background:var(--bg);text-decoration:none}.pop .mut2{padding:14px;color:var(--mut);text-align:center}
.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;height:62px;background:#fff;border-top:1px solid var(--line);z-index:45;padding:0 6px calc(env(safe-area-inset-bottom) / 2)}
.tabbar a,.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--mut);font-size:11px;font-weight:700;background:none;border:0;cursor:pointer;text-decoration:none}
.tabbar a svg,.tabbar button svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tabbar a.on{color:var(--blue)}

/* page header */
.ph{display:flex;gap:16px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;margin-bottom:20px}
.ph .sub{margin:5px 0 0;color:var(--mut)}.ph .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.ph .acts select{width:auto}
.av{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:12px;flex:0 0 auto}
.av.sm{width:22px;height:22px;font-size:9px;border-radius:6px}.av.lg{width:76px;height:76px;font-size:26px;border-radius:18px}

/* filters */
.dbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.seg{display:inline-flex;background:#e8ecf5;border-radius:10px;padding:3px;flex-wrap:wrap}
.seg button{border:0;background:transparent;padding:6px 14px;border-radius:8px;font-weight:700;cursor:pointer;color:#53618a;transition:all .15s}
.seg button:hover{color:var(--ink)}.seg button.on{background:#fff;color:var(--blue-d);box-shadow:0 1px 3px rgba(16,26,51,.14)}
.drange{display:flex;gap:8px;align-items:center;color:var(--mut)}.drange input{width:auto;padding:6px 10px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;align-items:center}
.filters .grow{flex:1;min-width:220px}.filters select{width:auto;min-width:140px}
.search{padding-left:38px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23667391' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 13px center}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}.row>*{flex:0 0 auto;width:auto}.grow{flex:1!important}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:var(--sh)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.cols2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;align-items:start}
.busy{opacity:.5;pointer-events:none;transition:opacity .15s}

/* dashboard */
.strip{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;box-shadow:var(--sh);overflow:hidden}
.strip .cell{padding:18px 22px;border-right:1px solid var(--line);position:relative}.strip .cell:last-child{border-right:0}
.strip .cell:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c,var(--blue))}
.strip span{display:block;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;color:var(--mut)}.strip b{display:block;font-size:34px;font-weight:800;line-height:1.15;margin-top:4px}.strip small{color:var(--mut)}
.dg{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start}.dg>div>.card:last-child{margin-bottom:16px}
.dg2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}.dg2 .card{margin-bottom:16px}
.card .ch{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}.card .ch h2{margin:0}
.ctabs{display:inline-flex;gap:4px;background:#e8ecf5;border-radius:9px;padding:3px}.ctabs button{border:0;background:transparent;border-radius:7px;padding:5px 11px;font-weight:700;font-size:12px;cursor:pointer;color:#53618a;display:flex;gap:6px;align-items:center}
.ctabs button.on{background:#fff;color:var(--blue-d);box-shadow:0 1px 3px rgba(16,26,51,.14)}.ctabs b{background:var(--blue);color:#fff;border-radius:9px;padding:0 6px;font-size:11px;line-height:17px}.ctabs b.z{background:#b9c3dc}.ctabs b.hot{background:var(--bad)}
.frow{display:flex;align-items:center;gap:12px;padding:11px 8px;border-top:1px solid var(--line);color:var(--ink);border-radius:8px;transition:background .12s}.frow:first-child{border-top:0}
.frow:hover{background:var(--blue-l);text-decoration:none}.frow .fi{flex:1;min-width:0}.frow .fi b{display:block}.frow .fi span{color:var(--mut);font-size:12px}.fdue{font-size:12px;font-weight:700;color:var(--mut);white-space:nowrap}.fdue.late{color:var(--bad)}
.brow{display:grid;grid-template-columns:130px 1fr 40px;gap:12px;align-items:center;padding:7px 0}.brow>span{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.brow b{text-align:right}
.btrack{height:10px;background:#eef1f8;border-radius:6px;overflow:hidden}.btrack i{display:block;height:100%;border-radius:6px;background:var(--c,var(--blue));min-width:3px}
a.brow{color:var(--ink)}a.brow:hover{text-decoration:none;background:var(--blue-l);border-radius:8px}
.spark{width:100%;height:170px;display:block}.axis{display:flex;justify-content:space-between;font-size:11px;color:var(--mut);margin-top:6px}

/* tables */
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:11px;color:var(--mut);font-weight:800;white-space:nowrap;text-transform:uppercase;letter-spacing:.6px;background:#f8f9fd}
table tr:last-child td{border-bottom:0}tr.click{cursor:pointer;transition:background .12s}tr.click:hover{background:var(--blue-l)}
tr.click td:first-child{box-shadow:inset 3px 0 0 var(--c,transparent)}
.tw{overflow-x:auto;border-radius:10px}.num{text-align:right}
.bar{height:8px;border-radius:5px;background:var(--bc,var(--blue));min-width:3px}
.pill{display:inline-block;padding:1px 8px;border-radius:6px;font-size:12px;font-weight:800;background:#eef1f8}.pill.g{background:#dcf5e7;color:#0b6b36}
.badge{display:inline-block;padding:2px 9px;border-radius:6px;font-size:11px;font-weight:800;color:#fff;background:#888;line-height:1.6;letter-spacing:.2px}
.s-Facebook{background:#1877f2}.s-Instagram{background:linear-gradient(45deg,#f09433,#dc2743,#bc1888)}.s-Google{background:#ea4335}.s-Website{background:#0f9d8a}.s-WhatsApp{background:#1fa855}.s-LinkedIn{background:#0a66c2}.s-Referral{background:#8b5cf6}.s-Manual{background:#6b7280}.s-Other{background:#9ca3af}
.st{background:#eee;color:var(--ink)}

/* pipeline board */
.board{display:grid;grid-template-columns:repeat(var(--n,6),minmax(210px,1fr));gap:12px;overflow-x:auto;padding-bottom:12px;align-items:start;scroll-snap-type:x proximity}
.col{background:#e9edf6;border-radius:12px;padding:8px;max-height:calc(100vh - 270px);min-height:220px;overflow-y:auto;scroll-snap-align:start;scrollbar-width:thin}
.col.over{background:var(--blue-l);outline:2px dashed var(--blue)}
.col h3{margin:0 0 8px;font-size:12px;display:flex;align-items:center;gap:8px;position:sticky;top:-8px;background:inherit;padding:8px 6px;z-index:1;text-transform:uppercase;letter-spacing:.6px;font-weight:800;color:#3a486b}
.col h3:before{content:"";width:9px;height:9px;border-radius:3px;background:var(--c)}.col h3 i{font-style:normal;margin-left:auto;background:#fff;color:var(--ink);border-radius:6px;padding:0 8px;font-size:12px;line-height:20px;letter-spacing:0}
.col .none{color:#8d99b6;text-align:center;padding:26px 6px;font-size:12px}
.lc{background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;margin-bottom:8px;cursor:grab;box-shadow:var(--sh);transition:transform .12s,box-shadow .12s,border-color .12s}
.lc:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(16,26,51,.12);border-color:#c5cee6}.lc:active{cursor:grabbing}
.lc .lt{display:flex;align-items:center;gap:8px}.lc .lt b{flex:1;min-width:0;line-height:1.25}.lc .lsub{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.lc .lm{display:flex;gap:5px;align-items:center;margin:9px 0 2px;flex-wrap:wrap}.lc .lwho{display:flex;gap:6px;align-items:center;margin-top:8px;color:var(--mut);font-size:12px;font-weight:600}
.lc .note{margin-top:8px;font-size:12px;color:#44527a;background:#f4f6fb;border-radius:7px;padding:5px 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:2px 8px;border-radius:6px;background:#eef1f8;color:#44527a;text-decoration:none}
.chip.late{background:#fde8e8;color:var(--bad)}.chip.wa{background:#dcf5e7;color:#0b6b36}.chip:hover{text-decoration:none}
.late{color:var(--bad)!important;font-weight:700}.mut{color:var(--mut)}

/* lead page */
.lp{display:grid;grid-template-columns:330px minmax(0,1fr);gap:18px;align-items:start}
.lp-side{position:sticky;top:82px}.lp-side .card{margin-bottom:14px}
.lp-id{display:flex;gap:14px;align-items:center;margin-bottom:14px}.lp-id h1{font-size:21px}.lp-id .mut{margin:2px 0 6px}
.lp-act{display:grid;gap:8px;margin-bottom:6px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:10px 12px;margin:0}.kv dt{color:var(--mut);font-weight:700;font-size:12px;padding-top:2px}.kv dd{margin:0;word-break:break-word}
.chev{display:flex;overflow-x:auto;padding:4px 0 6px;scrollbar-width:none;margin-bottom:16px}
.chev button{flex:1 0 auto;min-width:120px;border:0;cursor:pointer;font-weight:800;font-size:13px;padding:13px 20px 13px 28px;margin-right:-10px;color:#51608a;background:#e1e7f4;clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%,15px 50%);transition:all .15s}
.chev button:first-child{clip-path:polygon(0 0,calc(100% - 15px) 0,100% 50%,calc(100% - 15px) 100%,0 100%);padding-left:20px;border-radius:10px 0 0 10px}
.chev button:hover:not(.on){background:#d3dcf0;color:var(--ink)}.chev button.done{background:#cfdafc;color:var(--blue-d)}
.chev button.on{background:var(--c);color:#fff;cursor:default}
.tabs{display:flex;gap:2px;margin-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs button{padding:10px 16px;border:0;background:none;font-weight:800;color:var(--mut);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}.tabs button:hover{color:var(--ink)}.tabs button.on{color:var(--blue-d);border-bottom-color:var(--blue)}
.qa{border-top:1px solid var(--line);padding:12px 0}.qa:first-of-type{border-top:0;padding-top:0}.qa .q{font-size:12px;font-weight:700;color:var(--mut)}.qa .a{font-size:15px;margin-top:2px;font-weight:600}
.tl{border-left:2px solid #d7def0;margin-left:5px;padding-left:20px}.tl>div{margin-bottom:18px;position:relative}.tl>div:before{content:"";position:absolute;left:-27px;top:4px;width:12px;height:12px;border-radius:4px;background:var(--blue);border:2px solid #fff;box-shadow:0 0 0 1px var(--blue)}
.tl .sys:before{background:#b6c0d9;box-shadow:0 0 0 1px #b6c0d9}.tl .meta{font-size:12px;color:var(--mut);margin-bottom:3px}
.composer{border:1px solid var(--line);border-radius:12px;padding:12px;background:#fbfcff;margin-bottom:20px}.composer textarea{border:0;background:transparent;min-height:72px;padding:4px}.composer textarea:focus{box-shadow:none}
.composer .cb{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:10px;margin-top:6px}.composer .cb label{margin:0}.composer .cb input{width:auto}

/* empty + skeleton */
.empty{color:var(--mut);padding:34px 20px;text-align:center}.empty .ei{width:52px;height:52px;border-radius:14px;background:var(--blue-l);color:var(--blue-d);display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.empty .ei svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.empty b{color:var(--ink);display:block}.empty p{margin:4px 0 0}
.sk{height:84px;border-radius:var(--r);margin-bottom:14px;background:linear-gradient(90deg,#e8ecf5 25%,#f4f6fb 37%,#e8ecf5 63%);background-size:400% 100%;animation:shim 1.3s infinite}
@keyframes shim{0%{background-position:100% 0}100%{background-position:0 0}}
.pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin-top:12px}

/* overlays */
.ov{position:fixed;inset:0;background:rgba(14,26,54,.55);display:flex;align-items:center;justify-content:center;z-index:60;padding:14px;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.modal{background:#fff;border-radius:16px;padding:24px;width:100%;max-width:480px;max-height:92vh;overflow:auto;box-shadow:var(--sh2);animation:rise .18s}.modal.wide{max-width:640px}
.modal h2{font-size:17px;text-transform:none;letter-spacing:-.2px;color:var(--ink);margin-bottom:12px}
@keyframes rise{from{transform:translateY(8px);opacity:0}}
.modal .acts{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;align-items:center}
#toast div{background:var(--navy);color:#fff;padding:11px 18px;border-radius:10px;margin-top:8px;box-shadow:var(--sh2);animation:rise .2s;max-width:90vw;font-weight:600}#toast .err{background:var(--bad)}
.banner{background:#fff8e6;border:1px solid #ffe08a;border-radius:12px;padding:11px 15px;margin-bottom:16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* pipelines (tabs + manage) */
.ptabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;align-items:center;border-bottom:1px solid var(--line)}
.ptabs button{padding:10px 18px;border:0;background:none;font-weight:800;cursor:pointer;color:var(--mut);border-bottom:3px solid transparent;margin-bottom:-1px}
.ptabs button:hover{color:var(--ink)}.ptabs button.on{color:var(--blue-d);border-bottom-color:var(--blue)}.ptab-new{padding:10px 12px;font-weight:700;color:var(--mut)}
.mph{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap}.mph .acts{display:flex;gap:8px;flex-wrap:wrap}
.dot{display:inline-block;width:12px;height:12px;border-radius:4px}
.shc{border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:12px;background:#fbfcff}
.nw{white-space:nowrap}

/* login */
.lgx{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:20px;background:radial-gradient(900px 480px at 15% -10%,#26448c 0,transparent 60%),radial-gradient(800px 460px at 100% 105%,#46307f 0,transparent 55%),var(--navy)}
.lgc{width:min(420px,100%);background:#fff;border-radius:18px;padding:34px 32px 30px;box-shadow:0 30px 80px rgba(0,0,0,.4)}
.lgc img{width:250px;max-width:80%;display:block;margin:0 auto 22px}.lgc h1{font-size:22px;text-align:center}.lgc .sub{color:var(--mut);text-align:center;margin:6px 0 18px}
.lgc .btn{width:100%;margin-top:18px;padding:11px}.lgf{color:#9fb0d8;font-size:12px;text-align:center}.lgf b{color:#fff}

@media(max-width:1100px){.dg,.dg2,.cols2{grid-template-columns:1fr}.lp{grid-template-columns:1fr}.lp-side{position:static}}
@media(max-width:860px){.topbar{padding:0 14px;gap:12px}.tnav{display:none}.tright{margin-left:auto}.tabbar{display:flex}.page{padding:16px 14px 90px}
 .grid2{grid-template-columns:1fr}.strip{grid-template-columns:1fr 1fr}.strip .cell:nth-child(2){border-right:0}.strip .cell:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .board{grid-template-columns:repeat(var(--n,6),265px)}.col{max-height:none}.kv{grid-template-columns:100px 1fr}.brow{grid-template-columns:100px 1fr 34px}}
.dg>div,.dg2>div,.cols2>div,.lp>section{min-width:0}
@media(max-width:860px){.frow{flex-wrap:wrap;row-gap:4px}.frow .fi{flex:1 1 60%}.frow .fdue{flex:1 0 100%;padding-left:46px}.ctabs{max-width:100%;overflow-x:auto}.card .ch{align-items:flex-start}}
@media(max-width:480px){.seg button{padding:6px 9px;font-size:12px}h1{font-size:22px}.card{padding:16px}.strip b{font-size:28px}.strip .cell{padding:14px 16px}}