/* AirOva guided flow — scoped under #tripFlow. Hybrid palette: blue base + indigo accent. */
#tripFlow{
  --f-indigo:#4F46E5;--f-indigo7:#4338CA;--f-violet:#6D28D9;
  --f-grad:linear-gradient(135deg,#6D28D9 0%,#4F46E5 60%,#4338CA 100%);
  --f-ink:#0B1220;--f-slate:#475569;--f-slate4:#94A3B8;--f-line:#E2E8F0;--f-bg:#F6F7FB;
  --f-ease:cubic-bezier(.22,1,.36,1);
  position:fixed;inset:0;z-index:1200;background:var(--f-bg);display:none;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  font-family:inherit;color:var(--f-ink);
}
#tripFlow.on{display:block}
#tripFlow .fwrap{max-width:900px;margin:0 auto;padding:14px 16px 132px}
#tripFlow .ftop{display:flex;align-items:center;gap:10px;position:sticky;top:0;background:var(--f-bg);
  padding:8px 0 6px;z-index:5}
#tripFlow .fback,#tripFlow .fclose{border:0;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.08);
  border-radius:12px;height:38px;padding:0 12px;cursor:pointer;color:var(--f-slate);font-size:14px;font-weight:600}
#tripFlow .fclose{width:38px;padding:0;margin-left:auto;font-size:16px}
#tripFlow .fbrand{display:flex;align-items:center;gap:8px;font-weight:800}
#tripFlow .fbrand .d{width:20px;height:20px;border-radius:6px;background:var(--f-grad)}
/* stepper */
#tripFlow .fsteps{display:flex;gap:6px;margin:8px 0 16px}
#tripFlow .fsteps i{height:6px;flex:1;border-radius:999px;background:var(--f-line);transition:.4s var(--f-ease)}
#tripFlow .fsteps i.on{background:var(--f-indigo)}
#tripFlow h2{font-size:24px;font-weight:800;margin:6px 0 2px}
#tripFlow .fsub{color:var(--f-slate4);font-size:14px;margin:0 0 16px}
#tripFlow .fq{font-weight:700;margin:20px 0 10px}
/* segmented */
#tripFlow .fseg{display:flex;gap:6px;background:#EEF0F6;border-radius:16px;padding:5px;max-width:460px}
#tripFlow .fseg button{flex:1;border:0;background:transparent;padding:11px 8px;border-radius:12px;
  font-weight:600;color:var(--f-slate4);cursor:pointer;font-size:14px;transition:.2s var(--f-ease)}
#tripFlow .fseg button[aria-pressed=true]{background:#fff;color:var(--f-ink);box-shadow:0 1px 2px rgba(16,24,40,.1)}
/* slider */
#tripFlow .fslabel{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;max-width:460px}
#tripFlow .fslabel b{font-size:20px}
#tripFlow input[type=range]{width:100%;max-width:460px;accent-color:var(--f-indigo);height:34px}
#tripFlow .fticks{display:flex;justify-content:space-between;max-width:460px;color:var(--f-slate4);font-size:11px;margin-top:-4px}
/* usage cards */
#tripFlow .fusage{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;max-width:520px}
#tripFlow .fu{border:2px solid var(--f-line);border-radius:18px;background:#fff;padding:14px 10px;cursor:pointer;text-align:center;transition:.2s var(--f-ease)}
#tripFlow .fu:hover{border-color:#c7cbff}
#tripFlow .fu[aria-pressed=true]{border-color:var(--f-indigo);background:#F5F3FF;transform:translateY(-2px)}
#tripFlow .fu .e{font-size:22px}
#tripFlow .fu .t{font-weight:800;margin:4px 0 2px}
#tripFlow .fu .d{font-size:11px;color:var(--f-slate4);line-height:1.3}
/* CTA */
#tripFlow .fcta{height:52px;width:100%;max-width:460px;border:0;border-radius:16px;background:var(--f-indigo);
  color:#fff;font-weight:700;font-size:16px;cursor:pointer;margin-top:22px;transition:.15s var(--f-ease)}
#tripFlow .fcta:hover{background:var(--f-indigo7)}
#tripFlow .fcta:active{transform:scale(.985)}
#tripFlow .fghost{background:transparent;border:0;color:var(--f-indigo);font-weight:700;cursor:pointer;width:100%;padding:14px;font-size:15px}
/* screens */
#tripFlow .fscreen{display:none;animation:fin .32s var(--f-ease)}
#tripFlow .fscreen.on{display:block}
@keyframes fin{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
/* hero */
#tripFlow .fhero{position:relative;overflow:hidden;border-radius:26px;padding:22px;color:#fff;background:var(--f-grad);
  box-shadow:0 24px 60px -24px rgba(79,70,229,.55);max-width:520px;margin:0 auto;animation:fhin .45s var(--f-ease)}
@keyframes fhin{from{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:none}}
#tripFlow .fhero .glass{position:absolute;inset:0;background:radial-gradient(120% 80% at 80% 0%,rgba(255,255,255,.18),transparent 60%)}
#tripFlow .fhero>*{position:relative}
#tripFlow .fhero .b{display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,.16);
  padding:7px 12px;border-radius:999px;font-size:13px;font-weight:700}
#tripFlow .fhero .big{font-size:60px;font-weight:800;line-height:1;margin:14px 0 2px;font-variant-numeric:tabular-nums}
#tripFlow .fhero .meta{opacity:.92;font-size:14px}
#tripFlow .fhero .pf{margin:12px 0;font-size:14px;opacity:.96}
#tripFlow .fhero .chips{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
#tripFlow .fhero .chips span{background:rgba(255,255,255,.14);padding:8px 10px;border-radius:12px;font-size:12px;font-weight:600}
#tripFlow .fhero .price{display:flex;align-items:baseline;gap:10px;margin:14px 0 6px}
#tripFlow .fhero .price b{font-size:34px}
#tripFlow .fhero .price s{opacity:.85;text-decoration:none;font-size:13px}
#tripFlow .fbuyw{height:52px;width:100%;border:0;border-radius:16px;background:#fff;color:var(--f-indigo);
  font-weight:800;font-size:16px;cursor:pointer;margin-top:6px}
#tripFlow .fproof{text-align:center;color:var(--f-slate4);font-size:13px;margin:14px 0 4px}
/* rich App-Store cards */
#tripFlow .fcards{display:grid;gap:14px;margin-top:10px}
@media(min-width:760px){#tripFlow .fcards{grid-template-columns:1fr 1fr 1fr}}
#tripFlow .fpc{border-radius:24px;background:#fff;padding:18px;box-shadow:0 1px 2px rgba(16,24,40,.06);
  border:1px solid var(--f-line);transition:.2s var(--f-ease);display:flex;flex-direction:column}
#tripFlow .fpc:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(16,24,40,.28)}
#tripFlow .fpc.rec{border-color:#C7D2FE;box-shadow:0 18px 44px -26px rgba(79,70,229,.5)}
#tripFlow .fpill{display:inline-block;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800;align-self:flex-start}
#tripFlow .fpill.pop{background:#DCFCE7;color:#15803D}
#tripFlow .fpill.val{background:#DBEAFE;color:#1D4ED8}
#tripFlow .fpill.unl{background:#FEF3C7;color:#B45309}
#tripFlow .fpill.rec{background:#EEF2FF;color:#4F46E5}
#tripFlow .fpc .data{font-size:34px;font-weight:800;margin:8px 0 0;font-variant-numeric:tabular-nums;line-height:1}
#tripFlow .fpc .days{color:var(--f-slate4);font-size:14px;margin-top:4px}
#tripFlow .fpc .pf{color:var(--f-slate);font-size:13px;margin:8px 0 12px}
#tripFlow .fpc .pf b{color:var(--f-ink)}
#tripFlow .fpc ul{list-style:none;margin:0 0 8px;padding:0;color:var(--f-slate);font-size:13px}
#tripFlow .fpc li{display:flex;gap:8px;align-items:center;margin:6px 0}
#tripFlow .fpc li .c{color:#16A34A;font-weight:900}
#tripFlow .fpc .apps{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 12px}
#tripFlow .fpc .apps span{font-size:12px;background:#F1F5F9;color:var(--f-slate);border-radius:8px;padding:4px 8px;font-weight:600}
#tripFlow .fpc .prow{display:flex;align-items:baseline;justify-content:space-between;margin:auto 0 2px;padding-top:8px}
#tripFlow .fpc .prow b{font-size:26px}
#tripFlow .fpc .prow s{color:var(--f-slate4);text-decoration:none;font-size:13px}
#tripFlow .fpc .ppg{color:var(--f-slate4);font-size:12px;margin-top:2px}
#tripFlow .fbuy{height:46px;width:100%;border:0;border-radius:14px;background:var(--f-indigo);color:#fff;
  font-weight:700;cursor:pointer;margin-top:10px;transition:.15s var(--f-ease)}
#tripFlow .fbuy:active{transform:scale(.98)}
#tripFlow .fbuy.ghost{background:#EEF2FF;color:var(--f-indigo)}
/* all-plans sheet */
#tripFlow .fscrim{position:fixed;inset:0;background:rgba(11,18,32,.45);opacity:0;pointer-events:none;transition:.25s;z-index:1210}
#tripFlow .fscrim.on{opacity:1;pointer-events:auto}
#tripFlow .fsheet{position:fixed;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;background:#fff;
  border-radius:24px 24px 0 0;padding:12px 16px 26px;transform:translateY(100%);transition:transform .32s var(--f-ease);
  z-index:1211;max-height:84vh;overflow:auto}
#tripFlow .fsheet.on{transform:none}
#tripFlow .fgrab{width:44px;height:5px;border-radius:999px;background:#E2E8F0;margin:2px auto 12px}
#tripFlow .fsh-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
#tripFlow .fsh-h b{font-size:18px}
#tripFlow .ffilters{display:flex;gap:6px;overflow:auto;padding-bottom:8px;margin-bottom:6px}
#tripFlow .ffilters button{border:1px solid var(--f-line);background:#fff;border-radius:999px;padding:7px 12px;
  font-size:13px;font-weight:600;color:var(--f-slate);cursor:pointer;white-space:nowrap}
#tripFlow .ffilters button[aria-pressed=true]{background:var(--f-indigo);color:#fff;border-color:var(--f-indigo)}
#tripFlow .frow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;
  border:1px solid var(--f-line);border-radius:16px;margin-bottom:8px}
#tripFlow .frow .l b{font-size:16px}#tripFlow .frow .l small{color:var(--f-slate4);display:block;font-size:12px}
#tripFlow .frow .rt{text-align:right}
#tripFlow .frow .rt b{font-weight:800;display:block;margin-bottom:4px}
#tripFlow .frow .buy2{border:0;background:var(--f-indigo);color:#fff;border-radius:12px;padding:9px 14px;font-weight:700;cursor:pointer}
/* sticky buy bar */
#fStick{position:fixed;left:0;right:0;bottom:0;max-width:640px;margin:0 auto;background:#fff;
  border-top:1px solid var(--f-line);padding:12px 16px;display:flex;align-items:center;gap:12px;
  box-shadow:0 -8px 24px -16px rgba(0,0,0,.25);transform:translateY(120%);transition:transform .32s var(--f-ease);z-index:1205}
#fStick.on{transform:none}
#fStick .flag{font-size:22px}
#fStick .info{flex:1;min-width:0}
#fStick .info b{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#fStick .info small{color:#94A3B8;font-size:12px}
#fStick .pr{font-weight:800;font-size:18px;margin-right:2px}
#fStick .go{border:0;background:linear-gradient(135deg,#6D28D9,#4338CA);color:#fff;font-weight:800;border-radius:14px;padding:12px 16px;cursor:pointer}
/* recommending overlay */
#fOver{position:fixed;inset:0;background:var(--f-bg,#F6F7FB);display:none;align-items:center;justify-content:center;flex-direction:column;z-index:1220}
#fOver.on{display:flex}
#fOver .pulse{width:74px;height:74px;border-radius:22px;background:linear-gradient(135deg,#6D28D9,#4338CA);animation:fpulse 1s cubic-bezier(.22,1,.36,1) infinite}
@keyframes fpulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.12);opacity:1}}
#fOver p{margin-top:18px;font-weight:700;color:#475569}
@media(prefers-reduced-motion:reduce){#tripFlow *,#fOver *,#fStick{animation:none!important;transition:none!important}}
