.handoff{--handoff:#2A6FC4;display:grid;grid-gap:16px;gap:16px;padding:18px;border-radius:var(--radius-lg);background:radial-gradient(120% 90% at 0 0,color-mix(in srgb,var(--handoff) 14%,transparent),transparent 60%),color-mix(in srgb,var(--handoff) 5%,var(--surface));border:1px solid color-mix(in srgb,var(--handoff) 28%,var(--line));box-shadow:0 1px 0 var(--edge) inset}:root[data-theme=dark] .handoff{--handoff:#7FB8FF}@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .handoff{--handoff:#7FB8FF}}.handoff__head{display:flex;align-items:center;gap:14px}.handoff__avatar{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;color:var(--surface);background:linear-gradient(140deg,color-mix(in srgb,var(--handoff) 70%,#fff),var(--handoff));box-shadow:0 6px 16px -6px color-mix(in srgb,var(--handoff) 70%,transparent)}.handoff__online{position:absolute;right:-3px;bottom:-3px;width:13px;height:13px;border-radius:50%;background:var(--success);border:2.5px solid var(--surface)}.handoff__online:after{content:"";position:absolute;inset:-2.5px;border-radius:50%;border:2px solid var(--success);opacity:0;animation:handoff-pulse 2.4s ease-out infinite}@keyframes handoff-pulse{0%{transform:scale(1);opacity:.7}70%,to{transform:scale(2.1);opacity:0}}.handoff__titles{display:grid;grid-gap:2px;gap:2px;min-width:0}.handoff__titles strong{font-size:18px;letter-spacing:-.01em;line-height:1.25;color:var(--ink)}.handoff__titles span{font-size:14px;color:var(--muted)}.handoff__steps{list-style:none;margin:0;padding:0;display:grid;grid-gap:10px;gap:10px}.handoff__step{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--muted)}.handoff__mark{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:700;color:var(--muted);background:color-mix(in srgb,var(--ink) 6%,transparent)}.handoff__step--done{color:var(--ink)}.handoff__step--done .handoff__mark{color:var(--accent-ink);background:var(--success)}.handoff__step--now{color:var(--ink);font-weight:600}.handoff__step--now .handoff__mark{color:var(--surface);background:var(--handoff);box-shadow:0 0 0 4px color-mix(in srgb,var(--handoff) 18%,transparent)}.handoff__cta{gap:10px}.handoff__fallback{margin:0;font-size:14.5px;color:var(--ink)}.handoff__note{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted)}@media (max-width:520px){.handoff{padding:16px;gap:14px}.handoff__titles strong{font-size:17px}}@media (prefers-reduced-motion:reduce){.handoff__online:after{animation:none}}.recs{display:grid;grid-gap:14px;gap:14px;padding:20px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid color-mix(in srgb,var(--line) 90%,transparent);box-shadow:var(--shadow-sm),inset 0 1px 0 var(--edge)}@media (prefers-reduced-motion:no-preference){.recs{animation:fade-up .5s cubic-bezier(.2,.8,.2,1) .3s both}}.recs__head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}.recs__titles{display:grid;grid-gap:2px;gap:2px;min-width:0}.recs__eyebrow{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}.recs__title{margin:0;font-size:20px;line-height:1.2;letter-spacing:-.02em}.recs__all{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:32px;font-size:14px;font-weight:600;color:var(--accent);text-decoration:none}.recs__all:hover{color:var(--accent-hover)}.recs__all:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}.recs__promo{margin:0;display:flex;align-items:flex-start;gap:8px;line-height:1.4;padding:8px 12px;border-radius:var(--radius-sm);font-size:13.5px;color:var(--ink);background:color-mix(in srgb,var(--accent) 9%,transparent);border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent)}.recs__promo .icon{flex:none;margin-top:1px;color:var(--accent)}.recs__promo strong{font-family:var(--font-mono),monospace;letter-spacing:.03em;overflow-wrap:anywhere}.recs__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-gap:10px;gap:10px}.rec,.recs__grid>li{display:flex;min-width:0}.rec{--svc:var(--accent);flex:1 1;flex-direction:column;gap:10px;padding:14px;border-radius:var(--radius);color:var(--ink);text-decoration:none;background:radial-gradient(12rem 7rem at 100% 0,color-mix(in srgb,var(--svc) 12%,transparent),transparent 70%),color-mix(in srgb,var(--surface-2) 55%,var(--surface));border:1px solid color-mix(in srgb,var(--svc) 18%,var(--line));transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}.rec:hover{border-color:color-mix(in srgb,var(--svc) 55%,var(--line));box-shadow:var(--shadow);transform:translateY(-2px)}.rec:focus-visible{outline:2px solid var(--svc);outline-offset:2px}.rec__icon{width:38px;height:38px;flex:none;display:grid;place-items:center;overflow:hidden;border-radius:11px;font-weight:700;color:#fff;background:var(--svc);box-shadow:0 6px 14px -8px color-mix(in srgb,var(--svc) 80%,transparent)}.rec__icon:has(>img.app-icon){background:none;box-shadow:0 6px 14px -7px rgb(0 0 0/.55)}.rec__icon img{display:block;width:100%;height:100%;object-fit:contain}.rec__text{display:grid;grid-gap:2px;gap:2px;min-width:0}.rec__name,.rec__plan{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rec__name{font-size:15px;font-weight:600;letter-spacing:-.01em}.rec__plan{font-size:13px;color:var(--muted)}.rec__foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px}.rec__price{font-size:16px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}.rec__go{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:50%;color:var(--svc);background:color-mix(in srgb,var(--svc) 14%,transparent);transition:transform .15s ease,background .15s ease,color .15s ease}.rec:hover .rec__go{transform:translateX(2px);color:#fff;background:var(--svc)}.rec--vpn{--svc:#3B82F6;color:#F2F6FF;background:radial-gradient(12rem 8rem at 100% 0,rgb(96 165 250/.35),transparent 70%),linear-gradient(150deg,#13254A,#0B1630);border-color:rgb(96 165 250/.35)}.rec--vpn .rec__plan{color:rgb(226 236 255/.72)}.rec--vpn .rec__go{color:#fff;background:rgb(255 255 255/.14)}.rec--vpn:hover{border-color:rgb(147 197 253/.7)}@media (max-width:420px){.recs{padding:16px;gap:12px}.rec,.recs__grid{gap:8px}.rec{padding:12px}.rec__name{font-size:14.5px}.rec__price{font-size:15px}}@media (prefers-reduced-motion:reduce){.rec,.rec__go{transition:none}.rec:hover{transform:none}}