/* ============================================================
   Vetdost - the features page, the pricing add-ons and the
   savings estimate

   Each feature has a layout of its own, drawn as a small likeness
   of the real screen: the phone call, the record with its margin
   notes, the week, the bill, the inbox. Built from the same
   tokens as site.css. Loaded by the features, pricing and home
   pages only.
   ============================================================ */

/* ---------- the feature blocks ---------- */
/* Thirteen sections: the list wraps rather than scrolling off the left. */
@media (min-width:701px){.toc .wrap{flex-wrap:wrap;overflow:visible;row-gap:8px}}
.fx{scroll-margin-top:84px}

.fx-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.fx.flip .fx-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.fx.flip .fx-copy{order:2}
.fx-wide .fx-copy{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 70px;align-items:end;margin-bottom:54px}
.fx-wide .fx-copy > p{margin-top:0}
.fx-tags{display:flex;flex-wrap:wrap;gap:8px}
.fx-tag{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--char-2);color:var(--muted-d)}
.fx-tag.ai{background:var(--lime);color:var(--ink)}
.fx-tag.add{background:#fff;color:var(--ink)}
.fx-tag.new{box-shadow:inset 0 0 0 1px var(--lime);background:transparent;color:var(--lime)}
.fx h2{font-size:clamp(2.2rem,1.1rem + 2.8vw,3.8rem);letter-spacing:-.05em;margin-top:20px}
.fx-copy > p{font-size:18px;line-height:1.6;color:var(--muted-d);margin-top:20px;max-width:34em}
.fx-points{margin-top:30px;border-top:1px solid var(--line-d)}
.fx-points li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:14px 0;border-bottom:1px solid var(--line-d);font-size:15.5px;line-height:1.5;color:var(--on-d-2)}
.fx-points li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--lime);margin-top:7px}
.fx-points b{color:#fff;font-weight:700}
.fx-gain{margin-top:26px;display:flex;gap:14px;align-items:center;padding:16px 18px;border-radius:18px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line-d);font-size:14.5px;color:var(--on-d-2);max-width:34em}
.fx-gain b{display:block;font-size:22px;letter-spacing:-.03em;color:var(--lime);white-space:nowrap}
.fx-vis{position:relative;min-width:0}
.mock{background:#fff;color:var(--ink);border-radius:28px;box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.mock small{color:var(--muted)}

/* ---------- 1. the phone ---------- */
.ph-wrap{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:24px;align-items:center}
.ph{border-radius:48px;background:#050505;padding:12px;box-shadow:inset 0 0 0 2px #2A2C2A,0 50px 90px -40px rgba(0,0,0,.9)}
.ph-scr{border-radius:38px;background:var(--char);padding:22px 16px 18px;min-height:560px;display:flex;flex-direction:column}
.ph-notch{width:96px;height:24px;border-radius:999px;background:#050505;margin:-8px auto 16px}
.ph-top{text-align:center}
.ph-top b{display:block;font-size:17px;letter-spacing:-.02em}
.ph-top span{font-size:12.5px;color:var(--lime);font-weight:700}
.ph-caller{display:flex;gap:10px;align-items:center;margin:16px 0 14px;padding:10px 12px;border-radius:16px;background:var(--char-2)}
.ph-caller .av{width:34px;height:34px;border-radius:50%;background:var(--lime);color:var(--ink);display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.ph-caller b{display:block;font-size:13.5px}
.ph-caller small{font-size:12px;color:var(--muted-d)}
.bubs{display:flex;flex-direction:column;gap:8px;flex:1}
.bub{max-width:86%;padding:9px 12px;border-radius:16px;font-size:13px;line-height:1.4}
.bub.a{align-self:flex-start;background:var(--char-3);color:var(--on-d-2);border-bottom-left-radius:5px}
.bub.c{align-self:flex-end;background:var(--lime);color:var(--ink);font-weight:600;border-bottom-right-radius:5px}
.ph-done{align-self:center;margin-top:6px;padding:8px 14px;border-radius:999px;background:#fff;color:var(--ink);font-size:12.5px;font-weight:800}
.ph-keys{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.ph-keys span{height:38px;border-radius:12px;background:var(--char-2);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--muted-d)}
.ph-keys span:first-child{background:#3A1512;color:#FF9A8F}
.js .ph.rv .bub,.js .ph.rv .ph-done{opacity:0;transform:translateY(8px)}
.js .ph.rv.in .bub,.js .ph.rv.in .ph-done{animation:bubIn .5s var(--ease) forwards;animation-delay:calc(.35s + var(--i) * .75s)}
@keyframes bubIn{to{opacity:1;transform:none}}
.ph-side{display:grid;gap:12px}
.ph-card{border-radius:22px;padding:18px 18px 16px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line-d)}
.ph-card .q{font-size:13px;color:var(--muted-d)}
.ph-card p{font-size:15px;font-weight:700;margin-top:6px;letter-spacing:-.01em}
.ph-card .to{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:700}
.ph-card .to i{width:8px;height:8px;border-radius:50%;background:currentColor}
.ph-card.red .to{color:#FF8A7E}
.ph-card.lime .to{color:var(--lime)}
.ph-card.grey .to{color:var(--muted-d)}

/* ---------- 2. the record, with margin notes ---------- */
.rec-vis{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.sheet{padding:22px 24px 24px}
.sheet-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.recd{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:999px;background:#FDECEA;color:#B42318;font-size:12px;font-weight:800}
.recd i{width:8px;height:8px;border-radius:50%;background:#D23B3B;animation:recPulse 1.4s ease-in-out infinite}
@keyframes recPulse{50%{opacity:.25}}
.wave{display:flex;align-items:center;gap:3px;height:26px}
.wave i{width:3px;border-radius:3px;background:var(--ink);opacity:.75;height:30%;animation:wave 1.1s ease-in-out infinite;animation-delay:calc(var(--n) * -.13s)}
@keyframes wave{50%{height:100%}}
.sheet-top .who{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600}
.soap{margin-top:6px}
.soap > div{display:grid;grid-template-columns:30px 1fr;gap:10px;padding:13px 0;border-bottom:1px dashed var(--line)}
.soap > div:last-child{border-bottom:0}
.soap b{width:26px;height:26px;border-radius:8px;background:var(--mist);display:grid;place-items:center;font-size:12px}
.soap p{font-size:14.5px;line-height:1.55}
.soap mark{background:#FDE7D9;color:inherit;padding:1px 3px;border-radius:4px;box-shadow:inset 0 -2px 0 #E8875B}
.soap mark.g{background:var(--lime-soft);box-shadow:inset 0 -2px 0 #9DBA2A}
.notes{display:grid;gap:12px;padding-top:18px}
.note-c{border-radius:18px;padding:14px 16px;background:#fff;color:var(--ink);border-left:5px solid var(--line);font-size:13.5px;line-height:1.45;box-shadow:0 20px 40px -24px rgba(0,0,0,.6)}
.note-c b{display:block;font-size:14px}
.note-c span{color:var(--muted)}
.note-c.hi{border-left-color:#D23B3B;rotate:-1.2deg}
.note-c.md{border-left-color:#E0A21B;rotate:.8deg}
.note-c.ok{border-left-color:#9DBA2A;background:var(--lime-soft)}
.note-c em{display:block;margin-top:6px;font-style:normal;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ---------- 3. the week ---------- */
.wk{padding:18px;overflow-x:auto}
.wk-in{display:grid;grid-template-columns:58px repeat(5,minmax(120px,1fr));grid-template-rows:auto repeat(8,44px);gap:6px;min-width:700px}
.wk-d{font-size:13px;font-weight:800;padding:4px 6px 8px;border-bottom:1px solid var(--line)}
.wk-d small{display:block;font-weight:600}
.wk-t{font-size:11.5px;color:var(--muted);font-weight:700;padding-top:2px}
.ap{border-radius:12px;padding:7px 10px;background:var(--mist);font-size:12.5px;line-height:1.3;overflow:hidden;min-width:0}
.ap b{display:block;font-size:12.5px}
.ap span{color:var(--muted);font-size:11.5px}
.ap.on{background:var(--lime)}
.ap.on span{color:#3D4A16}
.ap.ph{background:var(--ink);color:#fff}
.ap.ph span{color:var(--muted-d)}
.ap.free{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);background-image:repeating-linear-gradient(45deg,transparent 0 6px,rgba(17,19,18,.05) 6px 12px)}
.wk-key{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--muted-d)}
.wk-key span{display:inline-flex;align-items:center;gap:8px}
.wk-key i{width:14px;height:14px;border-radius:5px;background:var(--mist)}
.wk-key i.on{background:var(--lime)}
.wk-key i.ph{background:#fff;box-shadow:inset 0 0 0 4px var(--ink)}
.wk-key i.free{background:transparent;box-shadow:inset 0 0 0 1.5px #fff}

/* ---------- 4. the bill and the reminder ladder ---------- */
.money-vis{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px;align-items:center}
.rcpt{padding:24px 24px 30px;border-radius:24px 24px 6px 6px;position:relative;-webkit-mask:radial-gradient(circle 9px at 50% 100%,transparent 98%,#000) 0 0/22px 100% repeat-x;mask:radial-gradient(circle 9px at 50% 100%,transparent 98%,#000) bottom/22px 100% repeat-x}
.rcpt-h b{display:block;font-size:17px;letter-spacing:-.02em}
.rcpt-h span{font-size:13px;color:var(--muted)}
.rcpt ul{margin-top:16px;border-top:1px dashed var(--line)}
.rcpt li{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line);font-size:14px}
.rcpt li b{font-variant-numeric:tabular-nums}
.rcpt li.found{margin:4px -10px;padding:11px 10px;border-radius:12px;background:var(--lime);border-bottom:0}
.rcpt li.found small{display:block;font-size:11.5px;color:#3D4A16;font-weight:700}
.rcpt-t{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:12px}
.rcpt-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:8px}
.rcpt-total b{font-size:30px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ladder{display:grid;gap:10px;counter-reset:none}
.ladder li{display:grid;grid-template-columns:44px 1fr;gap:4px 12px;align-items:center;padding:14px 16px;border-radius:20px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line-d)}
.ladder li:nth-child(2){margin-left:22px}
.ladder li:nth-child(3){margin-left:44px}
.ladder i{grid-row:span 2;width:44px;height:44px;border-radius:14px;background:var(--char-2);color:var(--lime);display:grid;place-items:center;font-style:normal;font-weight:800}
.ladder li:nth-child(3) i{background:var(--lime);color:var(--ink)}
.ladder b{font-size:15px}
.ladder span{font-size:13px;color:var(--muted-d)}
.ladder-cap{font-size:13px;color:var(--muted-d);margin:0 0 4px 4px}

/* ---------- 5. the inbox ---------- */
.inbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);overflow:hidden}
.ib-list{border-right:1px solid var(--line)}
.ib-list li{padding:14px 18px;border-bottom:1px solid var(--line);display:grid;gap:3px}
.ib-list li:last-child{border-bottom:0}
.ib-list li.sel{background:var(--mist)}
.ib-list li b{font-size:14px}
.ib-list li small{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip{justify-self:start;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:var(--mist);color:var(--muted)}
.ib-list li.sel .chip{background:#fff}
.chip.red{background:#FDECEA;color:#B42318}
.ib-thread{padding:18px;display:flex;flex-direction:column;gap:10px;background:#FAFAF8}
.ib-who{font-size:13px;font-weight:800;padding-bottom:10px;border-bottom:1px solid var(--line)}
.ib-who small{font-weight:600}
.m{max-width:88%;padding:10px 13px;border-radius:16px;font-size:13.5px;line-height:1.45}
.m.in{align-self:flex-start;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.m.draft{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px}
.m.draft small{display:block;color:var(--lime);font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.ib-act{display:flex;gap:8px;justify-content:flex-end;margin-top:auto}
.ib-act span{height:34px;padding:0 14px;border-radius:999px;display:grid;place-items:center;font-size:12.5px;font-weight:800;box-shadow:inset 0 0 0 1px var(--line)}
.ib-act span:first-child{background:var(--lime);box-shadow:none}
.urgent-pop{margin-top:14px;display:flex;gap:12px;align-items:center;padding:14px 16px;border-radius:18px;background:#3A1512;color:#FFD9D4;font-size:14px}
.urgent-pop b{color:#fff}
.urgent-pop i{width:10px;height:10px;border-radius:50%;background:#FF6B5E;flex:none;animation:recPulse 1.2s ease-in-out infinite}

/* ---------- 6. after the visit ---------- */
.after-vis{position:relative;min-height:480px}
.mail{position:relative;z-index:2;width:min(100%,460px);padding:0;overflow:hidden;rotate:-1.5deg}
.mail-h{padding:16px 20px;background:var(--mist);font-size:12.5px;display:grid;gap:3px}
.mail-h b{font-size:15px}
.mail-b{padding:18px 20px 22px;font-size:14px;line-height:1.6}
.mail-b p + p{margin-top:10px}
.mail-b .foot-n{font-size:12.5px;color:var(--muted)}
.mail-stamp{position:absolute;right:16px;top:14px;padding:5px 10px;border-radius:999px;background:var(--lime);font-size:11px;font-weight:800}
.review{position:absolute;z-index:1;right:0;bottom:0;width:min(78%,380px);padding:18px 20px;rotate:2deg;background:var(--char);color:#fff;box-shadow:inset 0 0 0 1px var(--line-d),0 40px 80px -40px rgba(0,0,0,.9)}
.review .stars{color:var(--lime);letter-spacing:2px;font-size:15px}
.review q{display:block;font-size:13.5px;color:var(--on-d-2);margin-top:6px}
.review .rep{margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--char-2);font-size:13px;color:var(--on-d-2)}
.review .rep small{display:block;color:var(--lime);font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}

/* ---------- 7. recalls, ranked ---------- */
.recall{padding:22px}
.recall-h{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.recall-h b{font-size:40px;letter-spacing:-.05em;line-height:1}
.recall-h span{font-size:13px;color:var(--muted);max-width:18ch;text-align:right}
.recall ol{margin-top:6px}
.recall li{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.recall li:last-child{border-bottom:0}
.recall li > i{font-style:normal;font-size:12px;font-weight:800;color:var(--muted)}
.recall li b{font-size:14px}
.recall li small{display:block;font-size:12px}
.recall .bar{height:6px;border-radius:999px;background:var(--mist);margin-top:7px;overflow:hidden}
.recall .bar i{display:block;height:100%;border-radius:inherit;background:var(--ink);width:var(--w)}
.recall .due{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:999px;background:var(--mist)}
.recall .due.late{background:#FDECEA;color:#B42318}

/* ---------- 8. the hospital sheet ---------- */
.hs{padding:20px;overflow-x:auto}
.hs-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.hs-top b{font-size:16px}
.dose{display:inline-flex;gap:8px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.dose em{font-style:normal;color:var(--lime)}
.hs table{width:100%;min-width:560px;border-collapse:separate;border-spacing:4px;font-size:12.5px}
.hs th{font-weight:700;color:var(--muted);font-size:11.5px;text-align:center}
.hs th:first-child,.hs td:first-child{text-align:left;font-weight:700;color:var(--ink);font-size:12.5px;white-space:nowrap;padding-right:8px}
.hs td{height:34px;border-radius:9px;background:var(--mist);text-align:center}
.hs td.done{background:var(--lime)}
.hs td.done::after{content:"\2713";font-weight:800}
.hs td.due{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.hs td.late{background:#FDECEA;box-shadow:inset 0 0 0 1.5px #D23B3B}
.hs td.late::after{content:"!";color:#B42318;font-weight:800}

/* ---------- 9. the register and the claim ---------- */
.comp-vis{display:grid;gap:16px}
.ledger{padding:20px;overflow-x:auto}
.ledger-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.ledger-h b{font-size:16px}
.ledger table{width:100%;min-width:520px;border-collapse:collapse;font-size:12.5px}
.ledger th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:6px 8px}
.ledger td{padding:9px 8px;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.ledger td.n{text-align:right;font-weight:800}
.ledger tr.cor td{background:#FFF7E6}
.ledger tr.cor td:nth-child(2){font-weight:700}
.claim{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;border-radius:22px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line-d)}
.claim b{display:block;font-size:15px}
.claim small{font-size:12.5px;color:var(--muted-d)}
.track{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800}
.track span{padding:6px 10px;border-radius:999px;background:var(--char-2);color:var(--muted-d)}
.track span.on{background:var(--lime);color:var(--ink)}
.track i{width:14px;height:2px;background:var(--char-3)}

/* ---------- 10. the shelf ---------- */
.shelf{padding:22px}
.shelf-row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.shelf-row:last-of-type{border-bottom:0}
.shelf-row b{font-size:14px}
.shelf-row small{display:block;font-size:12px}
.lvl{position:relative;height:12px;border-radius:999px;background:var(--mist)}
.lvl i{position:absolute;left:0;top:0;bottom:0;border-radius:inherit;background:var(--ink);width:var(--w)}
.lvl.low i{background:#D23B3B}
.lvl::after{content:"";position:absolute;top:-4px;bottom:-4px;left:var(--re);width:2px;background:#E0A21B}
.shelf-row .st{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:999px;background:var(--mist);white-space:nowrap}
.shelf-row .st.low{background:#FDECEA;color:#B42318}
.order{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:var(--lime-soft);font-size:13.5px;flex-wrap:wrap}
.order b{font-size:14px}
.order span{height:34px;padding:0 14px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:12.5px;font-weight:800}

/* ---------- 11 and 12. the portal and the website ---------- */
.owners{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:22px;align-items:end}
.mini-ph{border-radius:38px;background:#050505;padding:9px;box-shadow:inset 0 0 0 2px #2A2C2A}
.mini-ph .in{border-radius:30px;background:var(--mist);color:var(--ink);padding:18px 14px;min-height:430px}
.mini-ph h4{font-size:16px;letter-spacing:-.02em;margin:6px 4px 12px}
.pet{border-radius:18px;background:#fff;padding:12px;margin-bottom:10px;display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center}
.pet .pic{width:42px;height:42px;border-radius:14px;background:var(--lime);display:grid;place-items:center;font-weight:800}
.pet b{font-size:14px;display:block}
.pet small{font-size:12px}
.vac{display:inline-block;margin-top:4px;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--lime-soft);color:#3D5A00}
.vac.due{background:#FFF1D6;color:#8A5A0E}
.req{border-radius:16px;background:var(--ink);color:#fff;padding:12px;font-size:12.5px}
.req small{color:var(--muted-d);display:block}
.browser{overflow:hidden}
.br-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--mist)}
.br-bar i{width:10px;height:10px;border-radius:50%;background:#D9DAD5}
.br-bar span{margin-left:10px;flex:1;height:28px;border-radius:999px;background:#fff;display:flex;align-items:center;padding:0 14px;font-size:12px;color:var(--muted)}
.br-body{padding:22px}
.br-body h4{font-size:22px;letter-spacing:-.035em}
.br-body p{font-size:13.5px;color:var(--muted);margin-top:4px}
.svc{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.svc span{padding:8px 12px;border-radius:12px;background:var(--mist);font-size:12.5px;font-weight:700}
.svc span.on{background:var(--ink);color:#fff}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.slots span{height:40px;border-radius:12px;display:grid;place-items:center;font-size:13px;font-weight:800;box-shadow:inset 0 0 0 1px var(--line)}
.slots span.x{color:#C4C6C2;text-decoration:line-through;box-shadow:none;background:var(--mist)}
.slots span.on{background:var(--lime);box-shadow:none}
.br-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.br-foot b{height:40px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px}

/* ---------- 13. moving in ---------- */
.move{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;position:relative}
.mv{position:relative;border-radius:24px;padding:22px 20px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line-d);min-height:230px;display:flex;flex-direction:column}
.mv:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;width:12px;height:2px;background:var(--lime)}
.mv .k{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--lime)}
.mv h4{font-size:19px;letter-spacing:-.03em;margin-top:10px}
.mv p{font-size:14px;color:var(--muted-d);margin-top:8px}
.mv .file{margin-top:auto;padding-top:16px;display:grid;gap:6px}
.mv .file span{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:7px 10px;border-radius:10px;background:var(--char-2);font-variant-numeric:tabular-nums}
.mv .file span b{color:var(--lime)}
.mv.last{background:var(--lime);color:var(--ink);box-shadow:none}
.mv.last .k{color:var(--ink)}
.mv.last p{color:#3D4A16}
.mv.last .file span{background:rgba(255,255,255,.55)}
.mv.last .file span b{color:var(--ink)}

/* ---------- 14. the rest, as a mosaic ---------- */
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(150px,auto);gap:12px}
.tile{border-radius:24px;padding:22px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line-d);display:flex;flex-direction:column;min-width:0}
.tile h4{font-size:18px;letter-spacing:-.03em}
.tile p{font-size:14px;color:var(--muted-d);margin-top:8px}
.tile .big{font-size:42px;font-weight:700;letter-spacing:-.05em;line-height:1;margin-top:auto;padding-top:16px;color:var(--lime);font-variant-numeric:tabular-nums}
.tile.w2{grid-column:span 2}
.tile.h2{grid-row:span 2}
.tile.lime{background:var(--lime);color:var(--ink);box-shadow:none}
.tile.lime p{color:#3D4A16}
.tile.white{background:#fff;color:var(--ink);box-shadow:none}
.tile.white p{color:var(--muted)}
.meter{margin-top:auto;padding-top:18px}
.meter .bar{height:14px;border-radius:999px;background:var(--char-2);overflow:hidden}
.meter .bar i{display:block;height:100%;width:62%;border-radius:inherit;background:var(--lime)}
.meter div:last-child{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted-d);margin-top:8px}
.sig{margin-top:auto;padding-top:16px;font-family:var(--serif);font-style:italic;font-size:26px;color:var(--ink);border-bottom:1.5px solid var(--ink);padding-bottom:4px;align-self:flex-start}

/* ---------- the AI strip on the home page ---------- */
.auto{padding:130px 0;border-top:1px solid var(--line-d)}
.auto-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 70px;align-items:end;margin-bottom:50px}
.auto-h h2{font-size:clamp(2.2rem,1.1rem + 2.8vw,3.8rem);letter-spacing:-.05em;margin-top:16px}
.auto-h p{font-size:18px;color:var(--muted-d);max-width:34em}
.auto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.au{position:relative;border-radius:26px;padding:24px;background:var(--char);box-shadow:inset 0 0 0 1px var(--line-d);display:flex;flex-direction:column;min-height:250px;transition:background .25s,transform .35s var(--ease)}
.au:hover{background:var(--char-2);transform:translateY(-3px)}
.au.lead-card{grid-row:span 2;background:var(--lime);color:var(--ink);box-shadow:none}
.au.lead-card:hover{background:#DDF76A}
.au .k{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-d)}
.au.lead-card .k{color:#3D4A16}
.au h3{font-size:24px;letter-spacing:-.035em;margin-top:12px}
.au.lead-card h3{font-size:clamp(1.8rem,1rem + 1.6vw,2.6rem)}
.au p{font-size:15px;color:var(--muted-d);margin-top:10px}
.au.lead-card p{color:#3D4A16;font-size:16.5px}
.au .go{margin-top:auto;padding-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800}
.au .go svg{width:15px;height:15px;transition:transform .3s var(--ease)}
.au:hover .go svg{transform:translateX(3px)}
.au .lines{margin-top:18px;display:grid;gap:8px}
.au .lines span{padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.55);font-size:13.5px;font-weight:700}
.au .lines span:nth-child(2){margin-left:24px;background:var(--ink);color:#fff}
.au .lines span:nth-child(3){margin-left:48px}

/* ---------- pricing: per vet, with or without the AI ----------
   Flat surfaces, thin lines, one accent. The page answers one
   question at a time: what would it cost us, what do we get, and
   is it worth it. */
.pr-hero{padding:60px 0 90px}
.pr-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:60px;align-items:center}
.pr-hero h1{font-size:clamp(2.6rem,1.2rem + 4vw,4.8rem);letter-spacing:-.055em;line-height:1.02;margin-top:20px}
.pr-hero .lead{margin-top:22px;max-width:30em}
.pr-hero ul{margin-top:28px;display:grid;gap:10px}
.pr-hero li{display:flex;gap:12px;align-items:baseline;font-size:16px;color:var(--on-d-2)}
.pr-hero li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--lime);flex:none;transform:translateY(-3px)}

/* the price builder */
.build{border-radius:28px;background:#fff;color:var(--ink);padding:28px}
.build h2{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--muted)}
.vets{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
.vets-n{display:flex;align-items:center;gap:14px}
.vets-n button{width:48px;height:48px;border-radius:14px;border:1px solid var(--line);font-size:22px;font-weight:600;color:var(--ink);transition:background .15s,border-color .15s;touch-action:manipulation}
.vets-n button:hover{border-color:var(--ink)}
.vets-n button:active{background:var(--mist)}
.vets-n output{min-width:2ch;text-align:center;font-size:40px;font-weight:700;letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.vets-n span{font-size:15px;color:var(--muted);font-weight:600}
.crowd{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;max-width:150px}
.crowd i{width:14px;height:14px;border-radius:50%;background:var(--ink);transition:transform .2s var(--ease)}
.crowd i.more{width:auto;height:14px;border-radius:7px;padding:0 5px;background:none;font-style:normal;font-size:11px;font-weight:700;color:var(--muted);line-height:14px}
.ai-switch{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);cursor:pointer}
.ai-switch b{display:block;font-size:16px;letter-spacing:-.01em}
.ai-switch small{font-size:13.5px;color:var(--muted)}
.ai-switch input{position:absolute;opacity:0;pointer-events:none}
.sw{width:52px;height:30px;border-radius:999px;background:#D9DAD5;position:relative;flex:none;transition:background .2s}
.sw::after{content:"";position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s var(--ease)}
.ai-switch input:checked + .sw{background:var(--ink)}
.ai-switch input:checked + .sw::after{transform:translateX(22px)}
.ai-switch input:focus-visible + .sw{outline:2px solid var(--ink);outline-offset:3px}
.total{margin-top:22px}
.total b{display:block;font-size:clamp(3rem,2rem + 3vw,4.2rem);font-weight:700;letter-spacing:-.065em;line-height:1;font-variant-numeric:tabular-nums}
.total b small{font-size:16px;font-weight:600;letter-spacing:0;color:var(--muted);margin-left:6px}
.total p{font-size:14.5px;color:var(--muted);margin-top:10px}
.total p b{display:inline;font-size:inherit;letter-spacing:0;color:var(--ink)}
.build .btn{margin-top:22px}

/* the two plans, and the group option */
.tiers2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tier{border-radius:28px;padding:32px;background:#fff;color:var(--ink);display:flex;flex-direction:column;min-width:0;border:1px solid transparent}
.tier.pick{background:var(--char);color:#fff;border-color:var(--line-d)}
.tier-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.tier-h h3{font-size:24px;letter-spacing:-.035em}
.tier-h span{font-size:13px;font-weight:700;color:var(--muted)}
.tier.pick .tier-h span{color:var(--lime)}
.tier .say{font-size:15.5px;color:var(--muted);margin-top:6px}
.tier.pick .say{color:var(--muted-d)}
.tier .amt{display:flex;align-items:baseline;gap:8px;margin-top:26px}
.tier .amt b{font-size:60px;font-weight:700;letter-spacing:-.065em;line-height:1;font-variant-numeric:tabular-nums}
.tier .amt span{font-size:15px;color:var(--muted);font-weight:600;line-height:1.3}
.tier.pick .amt span{color:var(--muted-d)}
.tier ul{margin:26px 0 30px;border-top:1px solid var(--line)}
.tier.pick ul{border-top-color:var(--line-d)}
.tier li{padding:12px 0;border-bottom:1px solid var(--line);font-size:15px;display:flex;gap:12px;align-items:baseline}
.tier.pick li{border-bottom-color:var(--line-d);color:var(--on-d-2)}
.tier li::before{content:"";width:12px;height:7px;flex:none;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg) translateY(-3px);color:var(--ink)}
.tier.pick li::before{color:var(--lime)}
.tier li.from{font-weight:700;color:inherit}
.tier li.from::before{display:none}
.tier .btn{margin-top:auto}
.tier:not(.pick) .btn-secondary{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.tier:not(.pick) .btn-secondary:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.groups{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-radius:24px;padding:22px 28px;border:1px solid var(--line-d)}
.groups b{font-size:18px;letter-spacing:-.02em}
.groups p{font-size:14.5px;color:var(--muted-d);margin-top:4px}
.groups a{font-weight:700;font-size:15px;border-bottom:1.5px solid currentColor;padding-bottom:2px;white-space:nowrap}

/* what every plan includes, and the small print, plainly */
.inc{margin-top:70px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:40px;padding-top:40px;border-top:1px solid var(--line-d)}
.inc h3{font-size:26px;letter-spacing:-.04em;line-height:1.15}
.inc h3 + p{font-size:15px;color:var(--muted-d);margin-top:10px}
.inc ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.inc li{padding:14px 0;border-bottom:1px solid var(--line-d);font-size:15.5px;color:var(--on-d-2)}
.inc li b{color:#fff;font-weight:700}

/* ---------- the savings calculator: a paragraph with blanks ----------
   The practice writes its own numbers into a sentence and taps the
   words to change the plan; the answer is written back beside it. */
.madlib{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:56px;align-items:start}
.ml-text{font-size:clamp(1.45rem,1rem + 1.5vw,2.25rem);line-height:1.6;letter-spacing:-.03em;font-weight:600;color:var(--ink)}
.ml-text input{font:inherit;color:inherit;font-weight:800;background:transparent;border:0;border-radius:0;padding:0 .12em;margin:0 .05em;min-width:1.6ch;text-align:center;box-shadow:inset 0 -.16em 0 var(--lime);-moz-appearance:textfield;appearance:textfield;transition:box-shadow .15s,background .15s}
.ml-text input::-webkit-outer-spin-button,.ml-text input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ml-text input:hover{box-shadow:inset 0 -.32em 0 var(--lime)}
.ml-text input:focus{outline:none;background:var(--lime);border-radius:.2em;box-shadow:none}
.ml-text button{font:inherit;color:inherit;font-weight:800;padding:0;border-bottom:.08em dashed currentColor;line-height:1.2;cursor:pointer}
.ml-text button:hover{color:#3F6A00}
.ml-text button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.ml-hint{margin-top:18px;font-size:14px;color:var(--muted);display:flex;gap:18px;flex-wrap:wrap;align-items:center}
.ml-hint i{font-style:normal;display:inline-block;width:20px;height:4px;background:var(--lime);vertical-align:middle;margin-right:6px}
.ml-hint u{text-decoration:none;border-bottom:1.5px dashed var(--ink);margin-right:6px}
.ml-more{margin-top:26px;border-top:1px solid var(--line);padding-top:16px}
.ml-more summary{cursor:pointer;list-style:none;font-size:15px;font-weight:700;display:flex;gap:10px;align-items:center}
.ml-more summary::-webkit-details-marker{display:none}
.ml-more summary::after{content:"+";font-size:20px;line-height:1;color:var(--muted)}
.ml-more[open] summary::after{content:"\2212"}
.ml-more .ml-text{font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);font-weight:500;line-height:1.75;margin-top:14px;color:#2C2E2C}
.ml-more button[data-reset]{margin-top:12px;font-size:14px;font-weight:700;border-bottom:1.5px solid currentColor}

.ml-answer{position:sticky;top:100px;border-radius:28px;background:var(--ink);color:#fff;padding:32px}
.ml-answer > small{display:block;font-size:14px;color:var(--muted-d);font-weight:600}
.ml-big{display:block;margin-top:6px;font-size:clamp(3.2rem,2rem + 3.6vw,5.2rem);font-weight:700;letter-spacing:-.07em;line-height:1;color:var(--lime);font-variant-numeric:tabular-nums}
.ml-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:26px;border-top:1px solid var(--line-d)}
.ml-facts div{padding:16px 12px 0 0}
.ml-facts div + div{padding-left:14px;border-left:1px solid var(--line-d)}
.ml-facts b{display:block;font-size:clamp(1.6rem,1.2rem + 1vw,2.2rem);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
.ml-facts span{display:block;font-size:13px;color:var(--muted-d);margin-top:4px;line-height:1.35}
.ml-facts .off b,.ml-facts .off span{color:#4A4D4A}
.ml-cost{margin-top:26px;font-size:15px;line-height:1.55;color:var(--on-d-2)}
.ml-net{margin-top:14px;padding-top:16px;border-top:1px solid var(--line-d);display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ml-net span{font-size:15px;font-weight:700}
.ml-net span small{display:block;font-size:13px;font-weight:500;color:var(--muted-d)}
.ml-net b{font-size:clamp(1.8rem,1.4rem + 1vw,2.4rem);letter-spacing:-.05em;font-variant-numeric:tabular-nums}
[data-tone="down"] .ml-net b{color:#FF9A8F}
.ml-act{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}
.ml-act a{height:46px;padding:0 20px;border-radius:999px;display:inline-grid;place-items:center;font-size:14px;font-weight:700;background:#fff;color:var(--ink)}
.ml-act a.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.ml-fine{margin-top:14px;font-size:12.5px;color:var(--muted-d)}
/* on the home page, on dark */
.madlib.dark .ml-text{color:#fff}
.madlib.dark .ml-text button:hover{color:var(--lime)}
.madlib.dark .ml-text input:focus{color:var(--ink)}
.madlib.dark .ml-hint{color:var(--muted-d)}
.madlib.dark .ml-hint u{border-bottom-color:#fff}
.madlib.dark .ml-answer{background:var(--char);box-shadow:inset 0 0 0 1px var(--line-d)}
@media (max-width:1100px){
  .madlib{grid-template-columns:1fr;gap:34px}
  .ml-answer{position:static}
}
@media (max-width:700px){
  .ml-answer{padding:24px;border-radius:24px}
  .ml-facts div + div{padding-left:10px}
}

/* small screens */
@media (max-width:1100px){
  .pr-hero .wrap{grid-template-columns:1fr;gap:40px}
  .inc{grid-template-columns:1fr;gap:20px}
}
@media (max-width:700px){
  .pr-hero{padding:30px 0 60px}
  .build{padding:22px;border-radius:24px}
  .vets-n button{width:44px;height:44px}
  .crowd{max-width:110px}
  .tiers2{grid-template-columns:1fr}
  .tier{padding:24px;border-radius:24px}
  .tier .amt b{font-size:52px}
  .groups{padding:20px}
  .inc{margin-top:50px}
  .inc ul{grid-template-columns:1fr}
}


/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .fx-grid,.fx.flip .fx-grid{grid-template-columns:1fr;gap:44px}
  .fx.flip .fx-copy{order:0}
  .fx-wide .fx-copy{grid-template-columns:1fr}
  .move{grid-template-columns:1fr 1fr}
  .mv:not(:last-child)::after{display:none}
  .mosaic{grid-template-columns:1fr 1fr}
  .auto-h{grid-template-columns:1fr}
  .auto-grid{grid-template-columns:1fr 1fr}
  .au.lead-card{grid-column:1 / -1;grid-row:auto}
}
@media (max-width:700px){
  .ph-wrap,.rec-vis,.money-vis,.owners{grid-template-columns:1fr}
  .ph{max-width:340px;margin:0 auto}
  .inbox{grid-template-columns:1fr}
  .ib-list{border-right:0;border-bottom:1px solid var(--line)}
  .after-vis{min-height:0;display:grid;gap:16px}
  .review{position:relative;width:100%;rotate:none}
  .mail{rotate:none}
  .ladder li:nth-child(2),.ladder li:nth-child(3){margin-left:0}
  .move,.mosaic,.auto-grid{grid-template-columns:1fr}
  .tile.w2{grid-column:auto}
  .tile.h2{grid-row:auto}
  .mini-ph{max-width:280px;margin:0 auto}
  .slots{grid-template-columns:repeat(2,1fr)}
  .shelf-row{grid-template-columns:1fr auto}
  .shelf-row .lvl{grid-column:1 / -1;grid-row:2}
}
@media (prefers-reduced-motion:reduce){
  .js .ph.rv .bub,.js .ph.rv .ph-done{opacity:1!important;transform:none!important}
}
.tile.lime .big{color:var(--ink)}

/* ---------- colour: the features page in all three of our tones ----------
   Every feature is its own rounded panel, lime, light or dark in
   turn, with clear space between them, so no two run together. */
.fx{position:relative;overflow:hidden;margin:0 16px 28px;border-radius:44px;border-top:0;padding:110px 0}
.fx-first{padding-top:110px;margin-top:6px}
.fx[data-n]::before{content:attr(data-n);position:absolute;right:clamp(20px,4vw,56px);top:clamp(20px,3vw,40px);font-family:var(--serif);font-style:italic;font-size:clamp(4.5rem,3rem + 5vw,9rem);line-height:.8;letter-spacing:-.06em;pointer-events:none}
.fx > .wrap{position:relative}
.fx.tone-dark{background:var(--char);box-shadow:inset 0 0 0 1px var(--line-d)}
.fx.tone-light{background:var(--mist);color:var(--ink)}
.fx.tone-lime{background:var(--lime);color:var(--ink)}
.fx.tone-dark[data-n]::before{color:var(--char-3)}
.fx.tone-light[data-n]::before{color:#E0E1DC}
.fx.tone-lime[data-n]::before{color:rgba(17,19,18,.1)}
.tone-dark .mock{box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.tone-dark .ph-card,.tone-dark .ladder li,.tone-dark .claim,.tone-dark .mv:not(.last),.tone-dark .tile:not(.lime):not(.white),.tone-dark .fx-gain,.tone-dark .review{background:var(--char-2)}
.tone-light .fx-copy > p{color:var(--muted)}
.tone-lime .fx-copy > p{color:#3D4A16}
.tone-light .fx-points,.tone-lime .fx-points{border-top-color:rgba(17,19,18,.12)}
.tone-light .fx-points li,.tone-lime .fx-points li{color:#2C2E2C;border-bottom-color:rgba(17,19,18,.12)}
.tone-light .fx-points b,.tone-lime .fx-points b{color:var(--ink)}
.tone-light .fx-points li::before{box-shadow:0 0 0 1.5px var(--ink)}
.tone-lime .fx-points li::before{background:var(--ink)}
.tone-light .fx-tag,.tone-lime .fx-tag{background:#fff;color:var(--ink)}
.tone-lime .fx-tag.ai,.tone-lime .fx-tag.add{background:var(--ink);color:var(--lime)}
.tone-light .fx-tag.new,.tone-lime .fx-tag.new{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.tone-light .fx-gain,.tone-lime .fx-gain{background:var(--ink);color:var(--on-d-2);box-shadow:none}
.tone-light .ladder-cap,.tone-lime .ladder-cap{color:var(--muted)}
.tone-lime .mv.last{background:#fff}
.tone-lime .mv.last p{color:var(--muted)}
.tone-light .mock,.tone-lime .mock{box-shadow:0 30px 60px -36px rgba(17,19,18,.45)}
.tone-light .wk-key,.tone-lime .wk-key{color:var(--muted)}
.tone-lime h2 .it{color:var(--ink)}
.fx.tone-dark h2 .it{color:var(--lime)}
.tone-light h2 .it{background:linear-gradient(transparent 68%,var(--lime) 68%,var(--lime) 92%,transparent 92%)}
@media (max-width:1100px){.fx{padding:90px 0}}
@media (max-width:700px){
  .fx{margin:0 8px 12px;border-radius:30px;padding:72px 0}
  .fx-first{padding-top:72px}
  .fx[data-n]::before{font-size:4rem;top:16px}
}
/* Dark pieces keep light text whatever panel they sit on. */
.ph,.ph-card,.ladder li,.claim,.mv:not(.last),.tile:not(.lime):not(.white),.review,.fx-gain{color:#fff}
.mv.last{color:var(--ink)}
.seg button:disabled{opacity:.35;cursor:not-allowed}
.light .groups{border-color:var(--line);color:var(--ink)}
.light .groups p{color:var(--muted)}