/* ==========================================================================
   DATSpeed homepage (v2)
   ========================================================================== */

/* ───────── hero ───────── */
.hero{padding:clamp(60px,7vw,100px) 0 0;text-align:center}
.hero .h1{margin-top:0}
.hero .lead{max-width:690px;margin-top:30px}
.cta{display:flex;align-items:center;justify-content:center;gap:34px;margin-top:38px;flex-wrap:wrap}
.hero .win{margin-bottom:0}

/* ───────── statement ───────── */
.stm{padding:clamp(88px,11vw,170px) 0}
.stm p{margin:0 auto;max-width:1060px;text-align:center;font-size:clamp(28px,3.9vw,56px);line-height:1.12;letter-spacing:-0.04em;font-weight:650;color:var(--ink);text-wrap:balance}
.stm p span{color:#a1a1a6}

/* ───────── stages (dark product stage inside any section) ───────── */
.stage{background:var(--stage);border-radius:32px;padding:clamp(20px,4.4vw,56px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);position:relative}
.dk .stage{background:#1d1d1f}
.stage-note{margin:18px 4px 0;font-size:14px;line-height:1.55;color:#a1a1a6;letter-spacing:-0.006em}

/* ───────── chapter: email ───────── */
.rowcard{background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.55);color:var(--ink);overflow:hidden}
.rc{display:grid;grid-template-columns:104px 140px 140px 50px 172px minmax(0,1fr);column-gap:16px;align-items:center;padding:0 30px}
.rc-h{height:46px;background:#f6f6f8;border-bottom:1px solid #e7e7eb;font-size:12.5px;font-weight:600;color:var(--gray);letter-spacing:-0.004em}
.rc-r{height:108px;font-size:16px;letter-spacing:-0.012em}
.rc-r b{font-weight:600;letter-spacing:-0.02em;font-size:17px}
.rc-r small{display:block;margin-top:3px;font-size:13px;color:var(--gray);font-weight:500}
.cgb{font-style:normal;display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;border-radius:7px;font-size:14px;font-weight:700;background:#dcfce7;color:#15803d;border:1px solid #86efac}
.cgb.y{background:#fef9c3;color:#a16207;border-color:#fde047}
.cgb.r{background:#fee2e2;color:#991b1b;border-color:#fca5a5}
.blue{color:#1a5fd1;font-weight:500}
.ct{display:flex;align-items:center;gap:8px;min-width:0;position:relative}
.ct .em{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sq{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:11px;border:1.5px solid #6c3bff;color:#6c3bff;background:transparent}
.sq svg{width:20px;height:20px}
.sq.hot{box-shadow:0 0 0 6px rgba(108,59,255,.16)}
.sq.ok{border-color:#22c55e;background:rgba(34,197,94,.15);color:#22c55e}
.sq .dot{position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 2px #fff}
.stage .sq .dot{box-shadow:0 0 0 2px #1d1d1f}
.rowcard .sq .dot{box-shadow:0 0 0 2px #fff}
.cur{position:absolute;right:-6px;bottom:-20px;width:26px;height:26px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
.mail-g{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;margin-top:20px}
.mail{background:#fff;border-radius:18px;padding:26px 28px 28px;color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.4)}
.mrow{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid #ececf0;font-size:15px;letter-spacing:-0.01em}
.mrow span{width:58px;flex:none;color:var(--mist);font-weight:500}
.mrow b{font-weight:600}
.mbody{margin-top:18px;font-size:15.5px;line-height:1.55;letter-spacing:-0.011em;color:var(--ink2)}
.mbody p{margin:0 0 12px}
.sts{background:#2a2a2d;border-radius:18px;padding:12px 28px;display:flex;flex-direction:column;justify-content:center}
.st{display:flex;align-items:center;gap:20px;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.09)}
.st:last-child{border-bottom:0}
.st b{display:block;font-size:17px;font-weight:600;letter-spacing:-0.02em;color:#f5f5f7}
.st p{margin:4px 0 0;font-size:15px;line-height:1.42;letter-spacing:-0.01em;color:#a1a1a6}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;margin-top:clamp(48px,6vw,80px)}
.cols3 h4{margin:0 0 10px;font-size:21px;font-weight:650;letter-spacing:-0.03em}
.cols3 .ci{width:30px;height:30px;color:var(--vio-l);margin-bottom:18px}
.fg .cols3 .ci,.wh .cols3 .ci{color:var(--vio)}

/* multi-account sub-chapter (inside the email section) */
.sub{margin-top:clamp(72px,9vw,128px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,88px);align-items:center}
.sub .h3{font-size:clamp(30px,3.4vw,46px);letter-spacing:-0.045em;line-height:1.04;font-weight:700;text-wrap:balance}
.sub .p{margin-top:18px;font-size:18px}
.chk{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:14px}
.chk li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.4;letter-spacing:-0.012em;color:var(--ink2)}
.chk svg{width:20px;height:20px;flex:none;margin-top:1px;color:var(--vio)}
.dk .chk li{color:#d1d1d6}
.dk .chk svg{color:var(--vio-l)}
.shot-card{display:block;width:100%;border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.madm{margin-top:clamp(36px,4.4vw,56px);background:#1d1d1f;border-radius:28px;padding:clamp(22px,3.6vw,44px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.ma-demo{max-width:760px;margin:0 auto;background:#1a1a1a;border-radius:12px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.ma-demo-tabs{display:flex}
.ma-demo-tab{flex:1;padding:11px 16px;background:#e5e5e7;transition:background .3s;cursor:pointer;border:0;text-align:left;font:inherit;color:inherit}
.ma-demo-tab.active{background:#fff}
.ma-demo-tab:not(.active):hover{background:#d8d8dc}
.ma-demo-loc{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#111827;letter-spacing:-0.005em}
.ma-demo-loc+.ma-demo-loc{margin-top:3px}
.ma-demo-loc i{width:7px;height:7px;border-radius:50%;border:1.5px solid #6b7280;flex:none}
.ma-demo-loc i.f{background:#6b7280}
.ma-demo-tab-icons{display:flex;align-items:center;gap:10px;padding:0 14px;background:#e5e5e7;color:#9ca3af;font-size:14px;transition:background .3s}
.ma-demo-tab-icons svg{width:14px;height:14px}
.ma-demo-tab-icons.active{background:#fff}
.ma-demo-bar-track{position:relative;height:38px;background:#fff}
.ma-demo-slider{position:absolute;top:0;left:0;width:50%;height:100%;background:#fafafa;border-top:1px solid #e8eaed;display:flex;align-items:stretch;transition:left .35s cubic-bezier(.4,0,.2,1)}
.ma-demo-accent{width:3px;background:var(--vio);flex:none}
.ma-demo-field{display:flex;align-items:center;padding:0 12px;white-space:nowrap;transition:background .15s;cursor:pointer;border:0;background:transparent;font:inherit;min-width:0}
.ma-demo-field:hover{background:rgba(124,58,237,.07)}
.ma-demo-field+.ma-demo-field{border-left:1px solid #e8eaed}
.ma-demo-star{display:inline-flex;color:#f59e0b}
.ma-demo-star svg{width:13px;height:13px;fill:currentColor;stroke:none}
.ma-demo-val{font-size:12.5px;color:#374151;font-weight:500;margin-left:6px;overflow:hidden;text-overflow:ellipsis}
.ma-demo-chev{width:12px;height:12px;margin-left:7px;color:#9ca3af;flex:none}
.madm .stage-note{text-align:center;margin-top:20px}

/* ───────── chapter: route ───────── */
.route{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(40px,7vw,104px);align-items:center}
.mapstage{background:var(--fog);border-radius:32px;padding:clamp(24px,4vw,56px);display:flex;justify-content:center}
.mapstage img{display:block;width:100%;max-width:440px;height:auto;border-radius:16px;box-shadow:var(--e3),0 0 0 1px rgba(0,0,0,.06)}
.spec{margin:0;padding:0;list-style:none}
.spec li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line)}
.spec li:first-child{border-top:1px solid var(--line)}
.spec span{font-size:19px;color:var(--gray);letter-spacing:-0.014em}
.spec b{font-size:clamp(28px,3.2vw,44px);font-weight:650;letter-spacing:-0.045em;font-variant-numeric:tabular-nums}
.spec li.sp{border-bottom:0;padding:10px 0;border-top:0}
.route .chk{margin-top:36px}

/* ───────── chapter: credit ───────── */
.cc-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cc{background:#1d1d1f;border-radius:28px;padding:34px 36px 36px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.cc-h{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;letter-spacing:-0.022em;color:#f5f5f7}
.cc-h svg{width:22px;height:22px;color:var(--vio-l)}
.cc-t{display:grid;grid-template-columns:1fr 1.25fr;margin-top:28px;border-top:1px solid rgba(255,255,255,.1)}
.cc-w{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.cc-w .dom{margin-top:6px}
.cc-w .ok-pill{margin-top:0;flex:none}
.cc-c{padding:26px 18px 0 0;min-width:0;min-height:112px}
.cc-c+.cc-c{padding-left:22px;border-left:1px solid rgba(255,255,255,.1)}
.k{font-size:13.5px;color:#86868b;font-weight:500;letter-spacing:-0.006em}
.vb{margin-top:12px;font-size:60px;line-height:1;font-weight:700;letter-spacing:-0.05em;color:#4ade80}
.vm{margin-top:12px;font-size:36px;line-height:1;font-weight:650;letter-spacing:-0.045em;color:#f5f5f7;font-variant-numeric:tabular-nums}
.vm.ap{color:#4ade80;font-size:34px;display:flex;align-items:center;gap:12px}
.vm small{font-size:16px;font-weight:500;letter-spacing:-0.01em;color:#a1a1a6;margin-left:6px}
.ok-pill{display:inline-flex;align-items:center;gap:6px;margin-top:12px;height:28px;padding:0 11px;border-radius:999px;background:rgba(74,222,128,.14);color:#4ade80;font-size:13px;font-weight:600}
.ok-pill svg{width:14px;height:14px}
.dom{margin-top:12px;font-size:16px;font-weight:600;letter-spacing:-0.012em;color:#f5f5f7;word-break:break-all}
.scale{display:flex;align-items:center;justify-content:center;gap:clamp(14px,3vw,36px);margin-top:clamp(40px,5vw,64px);flex-wrap:wrap}
.sch{display:flex;gap:10px}
.sch .cgb{width:56px;height:52px;border-radius:14px;font-size:24px}
.scale p{margin:0;font-size:19px;letter-spacing:-0.016em;color:#a1a1a6;max-width:430px;line-height:1.38}
.fn{margin:32px auto 0;max-width:760px;text-align:center;font-size:14px;line-height:1.5;color:#86868b;letter-spacing:-0.005em}
.real{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:clamp(44px,5vw,72px)}
.real figure{margin:0}
.real img{display:block;width:100%;height:auto;border-radius:14px;background:#fff}
.real figcaption{margin-top:12px;font-size:14px;line-height:1.4;color:#a1a1a6;letter-spacing:-0.008em}
.real figcaption b{display:block;color:#f5f5f7;font-weight:600;font-size:15px;margin-bottom:1px}
.real-h{margin:clamp(44px,5vw,72px) 0 0;text-align:center;font-size:21px;font-weight:650;letter-spacing:-0.03em;color:#f5f5f7}
.real-h+.real{margin-top:26px}

/* ───────── chapter: filters (interactive) ───────── */
.nfd-tabs{display:inline-flex;max-width:100%;overflow-x:auto;gap:2px;background:#2c2c2e;border-radius:12px;padding:4px;margin-bottom:16px;scrollbar-width:none}
.nfd-tabs::-webkit-scrollbar{display:none}
.nfd-tab{appearance:none;border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600;letter-spacing:-0.01em;color:#a1a1a6;background:transparent;padding:9px 18px;border-radius:9px;white-space:nowrap;transition:color .15s,background .15s}
.nfd-tab:hover{color:#fff}
.nfd-tab.on{background:#fff;color:var(--ink)}
.nfd-panel{background:#fff;border-radius:18px;padding:20px 22px 22px;color:#334155;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.nfd-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.nfd-pill{display:inline-flex;align-items:center;gap:7px;background:var(--vio-s);color:#5b21b6;box-shadow:inset 0 0 0 1px #c4b5fd;font-size:14px;font-weight:700;padding:7px 14px;border-radius:999px}
.nfd-badge{background:var(--vio);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;line-height:18px;text-align:center;border-radius:999px;padding:0 5px}
.nfd-badge.zero{display:none}
.nfd-seg{margin-left:auto;display:inline-flex;background:#efeff2;border-radius:10px;padding:3px;gap:2px}
.nfd-seg button{appearance:none;border:0;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink2);background:transparent;padding:7px 14px;border-radius:8px;transition:background .15s,color .15s}
.nfd-seg button.on{background:var(--vio-s);color:#5b21b6;box-shadow:inset 0 0 0 1px #c4b5fd}
.nfd-fields{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.nfd-field label{display:block;font-size:12px;font-weight:600;color:#64748b;margin-bottom:6px;letter-spacing:-0.002em}
.nfd-field input{width:100%;font:inherit;font-size:15px;color:#0f172a;background:#fff;border:1px solid #e3e3e8;border-radius:10px;padding:9px 11px;outline:none;transition:border-color .15s,box-shadow .15s;font-variant-numeric:tabular-nums}
.nfd-field input:focus{border-color:var(--vio);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
.nfd-field input::placeholder{color:#a0a7b4}
.nfd-reset{appearance:none;border:0;background:none;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;color:var(--vio-d);padding:0;margin-top:14px}
.nfd-reset:hover{text-decoration:underline;text-underline-offset:3px}
.nfd-table{margin-top:16px;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);color:var(--ink)}
.nfd-cols,.nfd-row{display:grid;grid-template-columns:1.7fr .7fr .8fr .7fr .8fr;gap:12px;align-items:center;padding:0 26px}
.nfd-cols{height:42px;background:#f6f6f8;border-bottom:1px solid #e7e7eb;font-size:12.5px;font-weight:600;color:var(--gray)}
.nfd-row{min-height:54px;border-bottom:1px solid #efeff3;font-size:15px;letter-spacing:-0.01em;max-height:80px;overflow:hidden;transition:opacity .25s ease,max-height .3s ease,min-height .3s ease,background .2s}
.nfd-row:last-child{border-bottom:0}
.nfd-route{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nfd-route span{color:var(--gray);font-weight:400}
.nfd-num{font-size:15px;color:var(--ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.nfd-rate{color:var(--ink);font-weight:600}
.nfd-row.match{background:#ebf8f1}
.nfd-row.dim{opacity:.34}
.nfd-row.hidden{opacity:0;max-height:0;min-height:0;border-bottom:0;pointer-events:none}
.nfd-status{margin:16px 4px 0;font-size:14px;color:var(--muted);letter-spacing:-0.006em;min-height:21px}

.cdm-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(36px,6vw,88px);align-items:center;margin-top:clamp(64px,8vw,112px)}
.cdm-wrap .h3{font-size:clamp(30px,3.4vw,46px);letter-spacing:-0.045em;line-height:1.04;font-weight:700;text-wrap:balance}
.cdm-wrap .p{margin-top:18px;font-size:18px}
.cdm-bar{background:#fff;border-radius:18px 18px 0 0;padding:14px 18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-bottom:1px solid #e7e7eb}
.demo-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:8px;border:1px solid #e3e3e8;color:#6b7280;font-size:12px;font-weight:600;letter-spacing:.01em;background:#fff}
.demo-btn svg{width:11px;height:11px}
.demo-chip{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 12px;border-radius:8px;border:1px solid #d1d5db;background:#fff;color:#374151;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .15s,background .15s,color .15s;user-select:none}
.demo-chip input{accent-color:var(--vio);width:14px;height:14px;margin:0;cursor:pointer}
.demo-chip.active{border-color:var(--vio);background:#f6f3ff;color:#5b21b6}
.demo-chip:focus-within{outline:2px solid var(--vio);outline-offset:2px}
.filter-rows{background:#fff;border-radius:0 0 18px 18px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.4);color:var(--ink)}
.filter-row-item{display:flex;align-items:center;gap:14px;padding:0 20px;min-height:52px;border-bottom:1px solid #efeff3;font-size:14.5px;letter-spacing:-0.008em;transition:opacity .25s ease,max-height .3s ease,min-height .3s ease,padding .3s ease;overflow:hidden;max-height:80px}
.filter-row-item:last-child{border-bottom:0}
.filter-row-item.hidden{opacity:0;max-height:0;min-height:0;border-bottom:0;pointer-events:none}
.frow-flag{flex:none;width:28px;height:22px;border-radius:6px;background:#f1f1f4;color:var(--gray);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.frow-origin{font-weight:600;min-width:128px}
.frow-dest{color:var(--ink2);min-width:130px}
.frow-miles{color:var(--ink2);min-width:64px;font-variant-numeric:tabular-nums}
.frow-co{color:var(--gray);font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frow-badge{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:6px;flex:none;letter-spacing:.03em}
.frow-badge:empty{display:none}
.frow-badge-dup{color:#5b21b6;background:var(--vio-s)}
.frow-badge-ca{color:#1d4ed8;background:#dbeafe}
.frow-badge-mx{color:#15803d;background:#dcfce7}
.filter-status{margin:16px 4px 0;font-size:14px;color:var(--muted);letter-spacing:-0.006em;min-height:21px}

/* ───────── chapter: profit calculator (interactive) ───────── */
.pro{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,6vw,88px);align-items:center}
.pro .p{margin-top:20px;font-size:18px}
.pro .chk{margin-top:30px}
.pcd-wrap{display:flex;flex-direction:column;gap:16px}
.pcd-loads{display:flex;gap:8px;flex-wrap:wrap}
.pcd-load{appearance:none;cursor:pointer;font:inherit;font-size:14px;font-weight:600;letter-spacing:-0.01em;color:#a1a1a6;background:#2c2c2e;border:0;border-radius:12px;padding:10px 14px;text-align:left;line-height:1.3;transition:color .15s,background .15s}
.pcd-load small{display:block;font-weight:500;font-size:12.5px;opacity:.85;margin-top:1px}
.pcd-load:hover{color:#fff}
.pcd-load.on{color:var(--ink);background:#fff}
.pcd-card{background:#fff;border-radius:20px;padding:22px 24px 24px;color:#0f172a;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.pcd-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:10px}
.pcd-cap{font-size:13.5px;font-weight:600;color:var(--gray)}
.pcd-dh{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500;color:#334155;cursor:pointer;user-select:none}
.pcd-dh em{font-style:normal;color:#94a3b8;font-weight:600}
.pcd-sw{position:relative;width:38px;height:22px;border-radius:999px;background:#d0d3da;transition:background .14s;flex:none;border:0;padding:0;cursor:pointer}
.pcd-sw i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(15,23,42,.3);transition:left .14s}
.pcd-sw.on{background:var(--vio)}
.pcd-sw.on i{left:18px}
.pcd-main{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pcd-net-l{display:block;font-size:12.5px;font-weight:600;color:var(--mist);margin-bottom:6px}
.pcd-net{display:block;font-size:clamp(40px,4.4vw,54px);line-height:1;font-weight:700;letter-spacing:-0.05em;font-variant-numeric:tabular-nums;transition:color .2s}
.pcd-pill{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font-size:13.5px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s}
.pcd-bar{position:relative;display:flex;height:10px;border-radius:999px;overflow:hidden;background:#f1f1f4;margin-bottom:10px}
.pcd-bar i{display:block;height:100%;transition:width .25s ease,background .2s}
.pcd-leg{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px;color:var(--gray);margin-bottom:20px;font-variant-numeric:tabular-nums}
.pcd-leg b.v{color:var(--ink);font-weight:600}
.pcd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:14px}
.pcd-grid label,.pcd-pay label{display:block;font-size:11.5px;font-weight:600;color:var(--mist);margin-bottom:5px;white-space:nowrap}
.pcd-card input{width:100%;height:42px;border:1px solid #e3e3e8;border-radius:12px;padding:0 12px;font:inherit;font-size:17px;font-weight:600;letter-spacing:-0.015em;color:#0f172a;background:#fff;outline:0;font-variant-numeric:tabular-nums;transition:border-color .14s,box-shadow .14s}
.pcd-card input:focus{border-color:var(--vio);box-shadow:0 0 0 3px rgba(124,58,237,.18)}
.pcd-pay{display:flex;align-items:flex-end;gap:10px}
.pcd-pay .seg{flex:1;min-width:0}
.pcd-seg{display:flex;background:#efeff2;border-radius:11px;padding:3px}
.pcd-seg button{flex:1;appearance:none;border:0;font:inherit;font-size:13.5px;font-weight:600;padding:9px 0;border-radius:9px;cursor:pointer;background:transparent;color:var(--gray);white-space:nowrap}
.pcd-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.14)}
.pcd-pay .val{width:108px;flex:none}
.pcd-note{margin:2px 4px 0;font-size:14px;color:#a1a1a6;line-height:1.55;letter-spacing:-0.006em}

/* ───────── bento (quiet small tiles) ───────── */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.t{background:#fff;border-radius:28px;padding:clamp(26px,3.4vw,44px);box-shadow:var(--e1);position:relative;overflow:hidden;display:flex;flex-direction:column}
.b4{grid-column:span 4}
.t .p{margin-top:12px;max-width:440px}
.tag{display:inline-flex;align-self:flex-start;height:26px;align-items:center;padding:0 11px;border-radius:999px;background:var(--vio-s);color:var(--vio-d);font-size:12.5px;font-weight:600;letter-spacing:-0.004em;margin-bottom:16px}
.vig{margin-top:auto;padding-top:30px;display:flex;justify-content:center}
.ring{position:relative;width:176px;height:176px}
.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring b{font-size:46px;font-weight:700;letter-spacing:-0.05em;line-height:1}
.ring span{margin-top:6px;font-size:13.5px;color:var(--gray);font-weight:500}
@media (prefers-reduced-motion:no-preference){.ring .arc{animation:arc 30s linear infinite}}
@keyframes arc{from{stroke-dashoffset:490.1}to{stroke-dashoffset:0}}
.keys{display:grid;gap:10px;width:100%;margin-top:auto;padding-top:28px}
.kr{display:flex;align-items:center;gap:16px;padding:3px 0;border-radius:12px;transition:background .2s}
.kg{display:flex;gap:6px;width:92px;flex:none}
.key{min-width:42px;height:42px;padding:0 10px;border-radius:10px;background:linear-gradient(#fff,#f4f4f7);border:1px solid #d6d6dc;box-shadow:0 2px 0 #cdcdd4,0 6px 10px rgba(0,0,0,.05);display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:var(--ink);transition:transform .12s,box-shadow .12s,background .2s,border-color .2s,color .2s}
.key svg{width:17px;height:17px}
.kr span{font-size:16px;letter-spacing:-0.012em;color:var(--ink2);transition:color .2s}
.kr.lit .key{transform:translateY(2px);background:var(--vio-s);border-color:#c4b5fd;color:#5b21b6;box-shadow:0 0 0 1px #c4b5fd,0 0 0 5px rgba(124,58,237,.12)}
.kr.lit span{color:var(--ink)}
.clip{width:100%;display:grid;gap:14px}
.cbtn{display:flex;align-items:center;justify-content:center;gap:9px;height:46px;border-radius:12px;border:1px solid #d9ccfb;background:#fff;color:var(--vio-d);font-size:15px;font-weight:600;letter-spacing:-0.01em}
.cbtn svg{width:18px;height:18px}
.paste{background:var(--fog);border-radius:14px;padding:16px 18px;font-size:14px;line-height:1.55;color:var(--ink2);letter-spacing:-0.008em}
.paste b{color:var(--ink);font-weight:600}

/* ───────── before / after viewer ───────── */
.ba-ctl{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:clamp(36px,4.4vw,56px)}
.pseg,.sseg{display:inline-flex;background:#2c2c2e;border-radius:12px;padding:4px;gap:2px}
.pseg button,.sseg button{appearance:none;border:0;cursor:pointer;font:inherit;font-size:15px;font-weight:600;letter-spacing:-0.01em;color:#a1a1a6;background:transparent;padding:10px 22px;border-radius:9px;transition:color .15s,background .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:8px}
.pseg button:hover,.sseg button:hover{color:#fff}
.pseg button.active-before,.pseg button.active-after,.sseg button.on{background:#fff;color:var(--ink)}
.pseg button.active-after{background:var(--vio);color:#fff}
.pseg button svg{width:16px;height:16px}
.sseg button{font-size:13.5px;padding:7px 16px}
.ba-dark-wrap{display:none}
.ba-dark-wrap.show{display:inline-flex}
.ba-win{width:min(1180px,calc(100% - 80px));margin:28px auto 0}
.ba-win .addr{min-width:min(320px,52%)}
.ba-ext{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:600;color:var(--gray);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.dkw .ba-ext{color:#a1a1a6}
.ba-ext.on{color:var(--vio-d)}
.dkw .ba-ext.on{color:var(--vio-l)}
.ba-ext svg{width:14px;height:14px}
.ba-screens{display:grid;background:#f2f2f4}
.ba-screen{grid-area:1/1;display:none}
.ba-screen.visible{display:block;animation:baIn .35s ease}
@keyframes baIn{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ba-screen.visible{animation:none}}
.ba-subtabs{display:flex;justify-content:center;margin-top:24px}
.ba-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px;margin-top:clamp(44px,5vw,72px)}
.ba-feat.hidden{display:none}
.ba-feat svg{width:28px;height:28px;color:var(--mist);margin-bottom:16px}
.ba-feat.is-after svg{color:var(--vio-l)}
.ba-feat h4{margin:0 0 8px;font-size:19px;font-weight:650;letter-spacing:-0.028em;color:#f5f5f7}
.ba-feat p{margin:0;font-size:15.5px;line-height:1.5;letter-spacing:-0.01em;color:#a1a1a6}
.ba-feats.is-before .ba-feat h4{color:#d1d1d6}

/* ───────── setup + popup ───────── */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:clamp(48px,6vw,84px)}
.steps .n{font-size:clamp(72px,8vw,112px);line-height:.9;font-weight:700;letter-spacing:-0.06em;color:#d2d2d7}
.steps h4{margin:26px 0 10px;font-size:25px;font-weight:650;letter-spacing:-0.035em}
.logos{display:flex;gap:14px;margin-top:22px}
.logos img{width:34px;height:34px;display:block}
.pop{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(36px,7vw,100px);align-items:center}
.pop .p{margin-top:20px;font-size:18px}
.pop .chk{margin-top:30px}
.pop .chk small{display:block;margin-top:2px;font-size:13.5px;color:#b45309;font-weight:500}
.pop-stage{position:relative;background:var(--stage);border-radius:32px;padding:clamp(34px,5vw,64px) clamp(24px,4vw,56px);display:flex;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.pop-stage img{display:block;width:100%;max-width:360px;height:auto;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.1)}
.fbadge{position:absolute;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-radius:999px;background:rgba(44,44,46,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:#f5f5f7;font-size:13px;font-weight:600;letter-spacing:-0.006em;box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.1);white-space:nowrap}
.fbadge.tr{top:22px;right:18px}
.fbadge.bl{bottom:22px;left:18px}
.fbadge i{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.2)}
.fbadge svg{width:14px;height:14px;fill:var(--vio-l)}

/* ───────── all features ───────── */
.fgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.fc{background:var(--fog);border-radius:24px;padding:28px 28px 26px;display:flex;flex-direction:column;align-items:flex-start}
.fc i{width:46px;height:46px;border-radius:14px;background:#fff;color:var(--vio);display:flex;align-items:center;justify-content:center;box-shadow:var(--e1);margin-bottom:20px}
.fc i svg{width:23px;height:23px}
.fc h3{margin:0;font-size:20px;line-height:1.2;font-weight:650;letter-spacing:-0.03em}
.fc p{margin:10px 0 0;font-size:15.5px;line-height:1.5;letter-spacing:-0.01em;color:var(--gray)}
.fc .ft{margin-top:auto;padding-top:18px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fc .ft span{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:#fff;color:var(--ink2);font-size:12.5px;font-weight:600;letter-spacing:-0.004em;box-shadow:inset 0 0 0 1px #e3e3e8}
.fc .ft span.new{background:var(--vio);color:#fff;box-shadow:none}

/* ───────── pricing ───────── */
.pcard{position:relative;margin:clamp(44px,6vw,76px) auto 0;width:min(940px,100%);background:#fff;border-radius:36px;box-shadow:var(--e2),0 0 0 1px rgba(0,0,0,.04);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);overflow:hidden;text-align:left}
.rd{position:absolute;opacity:0;pointer-events:none}
.pc-l{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;align-items:flex-start;border-right:1px solid #ececf0}
.pc-r{padding:clamp(28px,4vw,48px);background:#fbfbfd}
.plan-seg{display:inline-flex;background:#efeff2;border-radius:12px;padding:4px}
.plan-seg label{cursor:pointer;padding:9px 20px;border-radius:9px;font-size:15px;font-weight:600;color:var(--gray);letter-spacing:-0.01em;transition:background .2s}
#pl-m:checked ~ .pc-l .plan-seg label[for="pl-m"],#pl-a:checked ~ .pc-l .plan-seg label[for="pl-a"]{background:#fff;color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.14)}
#pl-m:focus-visible ~ .pc-l .plan-seg label[for="pl-m"],#pl-a:focus-visible ~ .pc-l .plan-seg label[for="pl-a"]{outline:2px solid var(--vio);outline-offset:2px}
.pa{display:none}
#pl-a:checked ~ .pc-l .pa{display:block}
#pl-a:checked ~ .pc-l .pm{display:none}
.price{display:flex;align-items:baseline;gap:6px;margin-top:34px}
.price strong{font-size:clamp(84px,9vw,124px);line-height:.88;font-weight:700;letter-spacing:-0.065em;font-variant-numeric:tabular-nums}
.price span{font-size:21px;font-weight:500;color:var(--gray);letter-spacing:-0.02em}
.psub{margin:16px 0 0;font-size:16px;line-height:1.45;color:var(--gray);letter-spacing:-0.01em}
.save{display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;background:var(--vio-s);color:var(--vio-d);font-size:13.5px;font-weight:600;margin-top:14px}
.pc-l .btn{margin-top:30px;width:100%}
.pc-l .fine{margin-top:14px}
.pc-r h4{margin:0 0 22px;font-size:17px;font-weight:650;letter-spacing:-0.02em}
.inc{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.inc li{display:flex;gap:13px;align-items:flex-start;font-size:17px;line-height:1.35;letter-spacing:-0.013em;color:var(--ink)}
.inc svg{width:22px;height:22px;flex:none;color:var(--vio)}
.pnote{margin:26px 0 0;font-size:13.5px;line-height:1.5;color:var(--gray);letter-spacing:-0.005em}
.teamlink{margin-top:34px;text-align:center;font-size:17px;color:var(--gray);letter-spacing:-0.012em}
.teamlink a{color:var(--vio-d);font-weight:500}
.teamlink a:hover{text-decoration:underline;text-underline-offset:4px}

/* ───────── team ───────── */
.team{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(40px,7vw,96px);align-items:center}
.tiers{margin:34px 0 0;padding:0;list-style:none}
.tiers li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:17px 0;border-bottom:1px solid var(--line);font-size:19px;letter-spacing:-0.015em}
.tiers li:first-child{border-top:1px solid var(--line)}
.tiers b{font-size:26px;font-weight:650;letter-spacing:-0.04em;font-variant-numeric:tabular-nums}
.tiers small{font-size:15px;color:var(--gray);font-weight:500;margin-left:4px}
.team .chk{margin-top:30px}
.team-stage{background:#151826;border-radius:28px;padding:0;overflow:hidden;box-shadow:var(--e3)}
.team-stage img{display:block;width:100%;height:auto}

/* ───────── reviews ───────── */
.revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px;margin-top:clamp(48px,6vw,84px)}
.rv{border-top:1px solid var(--line);padding-top:30px;margin:0}
.stars{display:flex;gap:4px;color:var(--vio)}
.stars svg{width:20px;height:20px;fill:currentColor;stroke:none}
.rv blockquote{margin:22px 0 0;font-size:22px;line-height:1.38;letter-spacing:-0.024em;color:var(--ink);font-weight:500}
.rv b{display:block;margin-top:24px;font-size:16px;font-weight:600;letter-spacing:-0.012em}
.rv small{display:block;margin-top:2px;font-size:14px;color:var(--gray)}

/* ───────── faq ───────── */
.faq{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(36px,7vw,100px);align-items:start}
.faq .h2{font-size:clamp(38px,4.2vw,58px)}
.faq-l{position:sticky;top:calc(96px + var(--ban))}
.faq-l .p a{color:var(--vio-d);font-weight:500}
.faq-l .p a:hover{text-decoration:underline;text-underline-offset:3px}
.fq-grp{margin:56px 0 4px;font-size:15px;font-weight:600;color:var(--gray);letter-spacing:-0.01em}
.fq-grp:first-child{margin-top:0}
.fq{border-bottom:1px solid var(--line)}
.fq-grp+.fq{border-top:1px solid var(--line)}
.fq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;font-size:clamp(18px,1.7vw,22px);font-weight:600;letter-spacing:-0.028em;line-height:1.25}
.fq summary::-webkit-details-marker{display:none}
.fq summary svg{width:22px;height:22px;flex:none;color:var(--gray)}
.fq .mn{display:none}
.fq[open] .mn{display:block}
.fq[open] .pl{display:none}
.fq .a{margin:0 0 26px;max-width:660px;font-size:17px;line-height:1.55;letter-spacing:-0.011em;color:var(--gray)}
.fq .a a{color:var(--vio-d);text-decoration:underline;text-underline-offset:3px}
.fq .a code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;background:var(--fog);padding:2px 6px;border-radius:6px;color:var(--ink)}
.fq summary:focus-visible{outline:2px solid var(--vio);outline-offset:4px;border-radius:6px}

/* ───────── final cta ───────── */
.final{padding:clamp(100px,13vw,190px) 0;text-align:center}
.final .cta{margin-top:44px}
.works{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:34px;font-size:15px;color:#86868b;letter-spacing:-0.006em;flex-wrap:wrap}
.works img{width:24px;height:24px;display:block}

.cols3.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.ba-hint{display:none}

/* ───────── responsive ───────── */
@media (max-width:1100px){
  .rc{grid-template-columns:96px 128px 128px 46px 156px minmax(0,1fr);column-gap:12px;padding:0 20px}
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nfd-fields{grid-template-columns:repeat(3,1fr)}
  .ba-feats{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ba-win{width:calc(100% - 40px)}
  .cols3,.cols3.c2,.steps,.revs{grid-template-columns:1fr;gap:36px}
  .route,.team,.faq,.cc-g,.mail-g,.pcard,.sub,.cdm-wrap,.pro,.pop{grid-template-columns:1fr}
  .faq-l{position:static}
  .pc-l{border-right:0;border-bottom:1px solid #ececf0}
  .bento .b4{grid-column:span 12}
  .rc-h{display:none}
  .rc{grid-template-columns:minmax(0,1fr) auto;column-gap:14px;padding:0 18px}
  .rc-r{height:auto;padding:18px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 12px}
  .rc .age,.rc .c-pick,.rc .c-co{display:none}
  .rc .c-rate{grid-column:1;grid-row:1}
  .rc .c-rts{grid-column:2;grid-row:1;justify-self:end}
  .rc .c-o{grid-column:1;grid-row:2}
  .rc .c-d{grid-column:2;grid-row:2;text-align:right}
  .rc .ct{grid-column:1 / span 2;grid-row:3}
  .vb{font-size:48px}.vm{font-size:30px}
  .final .cta,.hero .cta{gap:22px}
  .hero .shot{aspect-ratio:1/1}
  .hero .shot img{width:200%;max-width:none;margin-left:-72%}
  .cc{padding:28px 24px 30px}
  .cc-c{min-height:0;padding:22px 8px 0 0}
  .cc-c+.cc-c{padding-left:16px}
  .vm.ap{font-size:24px;gap:8px}
  .vm{font-size:28px}
  .cc-w{flex-wrap:wrap}
  .dom{font-size:15px}
  .ct .em{font-size:14px}
  .mrow{flex-wrap:wrap;gap:4px 14px}
  .real{grid-template-columns:1fr;gap:28px}
  .nfd-fields{grid-template-columns:repeat(2,1fr)}
  .nfd-seg{margin-left:0;width:100%}
  .nfd-seg button{flex:1}
  .nfd-cols,.nfd-row{grid-template-columns:minmax(0,1.5fr) auto auto auto;padding:0 16px;gap:10px}
  .nfd-num{font-size:13px}
  .nfd-route{white-space:normal;line-height:1.25;font-size:14px}
  .nfd-route span{display:block;font-size:12.5px}
  .nfd-row{max-height:90px;padding-top:9px;padding-bottom:9px}
  .nfd-cols span:nth-child(5),.nfd-row>:nth-child(5){display:none}
  .pcd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .frow-dest{min-width:0}
  .frow-miles{min-width:0}
  .frow-co{display:none}
  .frow-origin{min-width:0}
  .ba-feats{gap:30px}
}
@media (max-width:640px){
  .fgrid{grid-template-columns:1fr}
  .ba-feats{grid-template-columns:1fr}
  .pseg button{padding:10px 14px;font-size:14px}
  .ba-ext{display:none}
  .addr{min-width:0;width:60%}
  .ba-win .addr{min-width:0}
  .t{padding:26px 22px}
  .stage{border-radius:24px}
  .fbadge.tr{top:14px;right:12px}
  .fbadge.bl{bottom:14px;left:12px}
  .pcd-card{padding:18px 16px 20px}
  .pcd-net{font-size:38px}
  .filter-row-item{gap:10px;padding:0 14px}
}

/* ───────── mobile polish ───────── */
@media (max-width:900px){
  .ba-screens{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none}
  .ba-screens::-webkit-scrollbar{display:none}
  .ba-screen img{width:max(100%,980px);max-width:none}
  .ba-hint{display:block;margin:14px 20px 0;text-align:center;font-size:13px;color:#86868b;letter-spacing:-0.004em}
}
@media (max-width:640px){
  .nfd-tabs{display:flex;width:100%}
  .nfd-tab{flex:1 1 0;min-width:0;padding:9px 6px;font-size:12.5px;line-height:1.25;white-space:normal;text-align:center}
  .fc{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:14px;align-items:center;padding:22px 20px 20px}
  .fc i{width:42px;height:42px;margin-bottom:0}
  .fc p,.fc .ft{grid-column:1 / -1}
  .fc p{margin-top:14px}
  .filter-row-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:1px;align-items:center;min-height:58px;padding:0 14px}
  .frow-flag{grid-row:1 / 3}
  .frow-origin{grid-column:2;grid-row:1;min-width:0;white-space:nowrap}
  .frow-dest{grid-column:2;grid-row:2;min-width:0;white-space:nowrap;font-size:13px;color:var(--gray)}
  .frow-miles{grid-column:3;grid-row:1;min-width:0;text-align:right;white-space:nowrap}
  .frow-badge{grid-column:3;grid-row:2;justify-self:end}
  .filter-row-item.hidden{padding-top:0;padding-bottom:0}
}