/* Bilipoa captive portal.
   Written by hand rather than pulled from the app bundle: this loads on a
   phone that is allowed to reach exactly one host, so every byte is inline and
   there is nothing to block on. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
 background:var(--hp-bg);color:var(--hp-text);-webkit-font-smoothing:antialiased}

/* Ambient wash behind everything. Fixed so it does not scroll away. */
.hs-bg{position:fixed;inset:0;z-index:0;pointer-events:none;
 background:
  radial-gradient(760px 420px at 12% -8%,rgba(236,72,153,.20),transparent 62%),
  radial-gradient(720px 460px at 90% 6%,rgba(99,102,241,.22),transparent 64%),
  radial-gradient(900px 700px at 50% 108%,rgba(56,189,248,.10),transparent 70%)}

.hs-shell{position:relative;z-index:1;max-width:520px;margin:0 auto;padding:18px 16px 40px}

/* --- Surfaces ------------------------------------------------------- */
.hs-panel{background:color-mix(in srgb, var(--hp-card) 86%, transparent);border:1px solid rgba(148,163,184,.16);
 border-radius:var(--hp-radius);padding:22px 18px;backdrop-filter:blur(12px)}
.hs-tile{display:block;width:100%;text-align:left;background:rgba(15,23,42,.72);
 border:1px solid rgba(148,163,184,.18);border-radius:14px;padding:14px;color:inherit;
 font:inherit;cursor:pointer;transition:border-color .15s,background .15s}
.hs-tile:active{background:rgba(30,41,59,.9)}

/* --- Brand ---------------------------------------------------------- */
.hs-brand{text-align:center;font-size:1.72rem;font-weight:800;letter-spacing:-.02em;margin:4px 0 10px;
 background:var(--hp-gradient);
 -webkit-background-clip:text;background-clip:text;color:transparent;word-break:break-word}
.hs-welcome{text-align:center;font-size:1.02rem;font-weight:700;color:var(--hp-primary);margin:0 0 4px}
.hs-sub{text-align:center;font-size:.9rem;color:#94a3b8;margin:0 0 18px}

/* --- Help card ------------------------------------------------------ */
.hs-help{text-align:center;background:rgba(15,23,42,.7);border:1px solid rgba(148,163,184,.14);
 border-radius:14px;padding:14px;margin-bottom:16px}
.hs-help strong{display:block;color:var(--hp-primary);font-size:.95rem;margin-bottom:4px}
.hs-help a{color:var(--hp-primary);font-weight:700;font-size:1.02rem;text-decoration:underline}

/* --- Buttons -------------------------------------------------------- */
.hs-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
 padding:15px 16px;border:0;border-radius:13px;font:inherit;font-size:.95rem;font-weight:800;
 letter-spacing:.06em;text-transform:uppercase;color:#fff;cursor:pointer;text-decoration:none;
 background:var(--hp-gradient);
 box-shadow:0 10px 26px rgba(0,0,0,.35)}
.hs-btn:active{transform:translateY(1px)}
.hs-btn[disabled]{opacity:.55;cursor:default;box-shadow:none}
.hs-btn-sm{width:auto;padding:9px 18px;font-size:.8rem;letter-spacing:.04em;border-radius:10px;
 background:#1d4ed8;box-shadow:none}
.hs-btn-outline{width:auto;padding:8px 20px;font-size:.82rem;font-weight:700;letter-spacing:.02em;
 text-transform:none;color:#60a5fa;background:transparent;border:1px solid rgba(96,165,250,.55);
 border-radius:9px;box-shadow:none}

/* --- Free trial ----------------------------------------------------- */
.hs-trial{display:flex;align-items:center;gap:12px;background:rgba(15,23,42,.72);
 border:1px solid rgba(59,130,246,.35);border-radius:14px;padding:13px 14px;margin:14px 0}
.hs-trial-body{flex:1;min-width:0}
.hs-trial-title{display:flex;align-items:center;gap:7px;font-weight:700;font-size:.95rem}
.hs-trial-note{font-size:.8rem;color:#94a3b8;margin-top:2px}
.hs-chip{font-size:.6rem;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:5px;
 color:#065f46;background:#34d399}

/* --- Section heading ------------------------------------------------ */
.hs-rule{display:flex;align-items:center;gap:12px;margin:22px 0 14px;
 font-size:.72rem;font-weight:700;letter-spacing:.16em;color:#64748b}
.hs-rule::before,.hs-rule::after{content:"";flex:1;height:1px;background:rgba(148,163,184,.18)}

/* --- Plan rows ------------------------------------------------------ */
.hs-plan{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:10px;
 background:rgba(15,23,42,.66);border:1px solid rgba(244,63,94,.45);border-radius:12px;
 /* The blue edge is what makes the list read as a stack of tickets. */
 border-left:3px solid #3b82f6}
.hs-plan-body{flex:1;min-width:0}
.hs-plan-name{font-weight:700;font-size:1rem;line-height:1.25}
.hs-plan-price{font-size:.88rem;color:#94a3b8;margin-top:3px}
.hs-plan-price b{color:var(--hp-primary);font-weight:800}

/* --- Modal ---------------------------------------------------------- */
.hs-scrim{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;
 padding:16px;background:rgba(2,6,23,.72);backdrop-filter:blur(3px)}
.hs-modal{width:100%;max-width:490px;max-height:86vh;overflow-y:auto;
 background:rgba(19,26,44,.97);border:1px solid rgba(148,163,184,.18);border-radius:20px;
 padding:20px 18px;box-shadow:0 -18px 60px rgba(2,6,23,.7)}
.hs-modal-head{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.hs-modal-title{flex:1;font-size:1.02rem;font-weight:800;letter-spacing:.01em;text-transform:uppercase;
 background:var(--hp-gradient);
 -webkit-background-clip:text;background-clip:text;color:transparent}
.hs-back,.hs-x{display:flex;align-items:center;justify-content:center;flex:none;border:0;
 background:transparent;color:#94a3b8;font-size:1.25rem;line-height:1;cursor:pointer;padding:4px}
.hs-back{gap:7px;font-size:.9rem;color:#60a5fa;font-weight:600}
.hs-back span{display:flex;align-items:center;justify-content:center;width:26px;height:26px;
 border-radius:50%;background:rgba(52,211,153,.14);color:#34d399;font-size:.85rem}

/* --- Method chooser ------------------------------------------------- */
.hs-method{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.hs-method-body{flex:1;min-width:0}
/* These are spans so the whole tile can be one <button>; without an explicit
   block they run together on one line. */
.hs-method-title{display:block;font-weight:700;font-size:.95rem}
.hs-method-note{display:block;font-size:.8rem;color:#94a3b8;margin-top:2px;line-height:1.35}
.hs-ico{display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:38px;
 border-radius:10px;background:rgba(59,130,246,.16);color:#60a5fa;font-size:1.05rem}
.hs-caret{flex:none;color:#475569;font-size:1.1rem}

/* --- Forms ---------------------------------------------------------- */
.hs-label{display:block;font-size:.86rem;font-weight:600;color:#cbd5e1;margin:0 0 7px}
.hs-input{position:relative;display:flex;align-items:center;margin-bottom:14px}
.hs-input i{position:absolute;left:13px;color:#64748b;font-size:.95rem;pointer-events:none}
.hs-input input{width:100%;padding:15px 14px 15px 40px;font-size:1rem;font-family:inherit;
 color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:11px;outline:none}
.hs-input input:focus{border-color:var(--hp-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--hp-accent) 25%, transparent)}
.hs-input input::placeholder{color:#94a3b8}

.hs-hint{margin:14px 0 0;padding:13px;font-size:.84rem;line-height:1.45;color:#94a3b8;
 background:rgba(15,23,42,.7);border:1px solid rgba(148,163,184,.14);border-radius:11px}
.hs-alert{margin:0 0 14px;padding:12px 13px;font-size:.86rem;line-height:1.4;color:#fecaca;
 background:rgba(190,18,60,.18);border:1px solid rgba(244,63,94,.4);border-radius:11px}

/* --- Selected package summary --------------------------------------- */
.hs-summary{display:flex;align-items:center;gap:12px;padding:14px;margin-bottom:18px;
 background:rgba(15,23,42,.72);border:1px solid rgba(148,163,184,.16);border-radius:13px}
.hs-summary-body{flex:1;min-width:0}
.hs-summary-cap{display:block;font-size:.66rem;font-weight:700;letter-spacing:.12em;color:#64748b}
.hs-summary-name{display:block;font-weight:700;font-size:1.02rem;margin-top:2px}
.hs-summary-dur{display:block;font-size:.82rem;color:#94a3b8}
.hs-summary-amt{text-align:right;flex:none}
.hs-summary-amt small{display:block;font-size:.62rem;letter-spacing:.1em;color:#64748b}
.hs-summary-amt b{font-size:1.5rem;font-weight:800;color:var(--hp-primary)}
.hs-summary .hs-ico{width:44px;height:44px;border-radius:12px;font-size:1.2rem;
 background:rgba(244,63,94,.16);color:#fb7185}

/* --- Waiting / success ---------------------------------------------- */
.hs-center{text-align:center;padding:8px 0}
.hs-spinner{width:44px;height:44px;margin:0 auto 16px;border-radius:50%;
 border:3px solid rgba(148,163,184,.22);border-top-color:var(--hp-accent);animation:hs-spin .8s linear infinite}
@keyframes hs-spin{to{transform:rotate(360deg)}}
.hs-tick{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:flex;
 align-items:center;justify-content:center;font-size:1.7rem;color:#34d399;background:rgba(52,211,153,.16)}

.hs-foot{margin:26px 0 0;text-align:center;font-size:.74rem;color:#475569}
/* The platform credit is the only link down here, so it earns the accent.
   The host is already in the walled garden, so it opens before a customer
   has paid for anything. */
.hs-foot a{color:var(--hp-primary);font-weight:700;text-decoration:none}

/* Icons are drawn as text so nothing has to be fetched. */
.hs-glyph{font-style:normal;font-weight:700}

/* A trial already spent on this device: still shown, visibly done. */
.hs-trial.is-spent{opacity:.62;border-color:rgba(148,163,184,.22)}
.hs-trial-spent{flex:none;padding:6px 14px;border:1px solid rgba(148,163,184,.3);border-radius:9px;
 color:#94a3b8;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}