/* Kanvo on phones, every page (2026-10-23, v3): the desktop look at phone size. Dark sticky header and menu,
   lime-dot buttons, dark footer. Loaded only under 760px, after skin.css or v2.css. Homepage-only phone styles are in m.css. */
:root{--mist:#F6F9F7;--line:#E2EAE5;--grey:#4F6057;--soft-dark:#A9BDB2;--m:20px}
body{font-size:16px;line-height:1.5}
.cursor{display:none}

/* header: the dark field, sticky and compact */
.bar{position:sticky;top:0;z-index:30;background:var(--field,#0F2A1F);color:#fff;padding:10px var(--m);gap:10px}
.wordmark{color:#fff;font-size:20px}
.bar-acts .btn{height:36px;padding:0 14px;font-size:14px;background:var(--lime,#B9EC6E);color:var(--ink,#0E1C15)}
.bar-acts .btn::before{background:var(--ink,#0E1C15)}
.mmenu nav a{font-size:22px;padding:13px 0;box-shadow:0 1px 0 rgba(255,255,255,.08)}

/* buttons: lime dot, phone height */
.btn{height:46px;padding:0 20px;font-size:15px;gap:8px}
.btn::before{width:8px;height:8px}

/* footer: dark, the big wordmark */
.foot{padding:44px var(--m) 28px}
.foot-mark{font-size:22vw}
.foot-cols{margin-top:28px;gap:24px 16px}
.foot-cols h3{font-size:13px}
.foot-cols a{font-size:14.5px;padding:6px 0}
.foot-last{margin-top:28px;font-size:13px}
.foot-last .btn{display:none}

/* the closing band: the lime card */
.final{border-radius:28px;padding:36px 22px;text-align:left}
.final .cta{justify-content:flex-start}

/* phones: pricing comparison shows one plan at a time; vs tables stack per row */
.cmp{padding:14px 14px 8px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cmp-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;background:var(--field,#0F2A1F);padding:4px;border-radius:999px;margin-bottom:6px}
.cmp-pick button{height:38px;border:0;border-radius:999px;background:transparent;font:inherit;font-weight:700;font-size:14.5px;color:var(--soft-dark);cursor:pointer}
.cmp-pick button[aria-selected="true"]{background:var(--lime,#B9EC6E);color:var(--ink,#0E1C15)}
.cmp[data-show="free"] [data-p]:not([data-p="free"]),.cmp[data-show="pro"] [data-p]:not([data-p="pro"]),.cmp[data-show="max"] [data-p]:not([data-p="max"]){display:none}
.cmp-t thead{display:none}
.cmp-t td[data-p]{background:none;text-align:right;font-size:14px}
.cmp-t tbody th{font-size:14.5px;padding:12px 8px 12px 0}
.cmp-t tr.grp th{padding-top:20px}
.vs-wrap{padding:4px 16px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);overflow:visible}
.vs-t{min-width:0}
.vs-t thead{display:none}
.vs-t,.vs-t tbody,.vs-t tr,.vs-t th,.vs-t td{display:block;width:auto}
.vs-t tbody tr{padding:14px 0}
.vs-t tbody tr+tr{border-top:1px solid #EDF2EF}
.vs-t tbody tr+tr>*{border-top:0}
.vs-t tbody th{padding:0 0 8px;width:auto;font-size:15px}
.vs-t td{padding:8px 12px;border-radius:10px;font-size:14.5px}
.vs-t td::before{content:attr(data-l);display:block;font-size:12px;font-weight:700;color:var(--grey);margin-bottom:2px}
.vs-t td:nth-of-type(1){background:#EEF8DC}
.vs-t td+td{margin-top:6px;background:var(--mist)}
.fit,.pc,.pick,.vs-card,.ct,.sec-i,.cl{border-radius:20px;padding:20px}
.cl{grid-template-columns:1fr;gap:6px}
.fit h3,.vs-card h2,.ct h2,.pc h2{font-size:19px}

/* audit fixes (2026-10-24): finger-sized targets on phones (44px) without changing the look */
.bar-acts .btn{position:relative}
.bar-acts .btn::after{content:"";position:absolute;inset:-4px -2px}
.menu-b{width:40px;height:40px;position:relative}
.menu-b::after{content:"";position:absolute;inset:-2px}
.foot-cols a{display:flex;align-items:center;min-height:44px;padding:0}
.link-plain{display:inline-flex;align-items:center;min-height:44px}
