/* ═══════════════ TrakTrak shared design system ═══════════════ */
:root{
  --sky:#EAF4FF; --sky-deep:#D6E9FF; --cream:#FFFDF8;
  --ink:#17233A; --ink-soft:#5A6B86;
  --grape:#6C4CE0; --grape-deep:#5638C4;
  --sun:#FFB23E; --coral:#FF6B6B; --mint:#34C77B; --pink:#FF8FB1; --sky-blue:#2AA9C9;
  --card:#FFFFFF; --ring:rgba(108,76,224,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--sky)}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);min-height:100vh;overflow-x:hidden;
  background:radial-gradient(1200px 500px at 80% -100px,#FFE9C7 0%,transparent 60%),
             radial-gradient(900px 500px at 0% 0%,#E7DBFF 0%,transparent 55%),var(--sky)}
body.air{background:radial-gradient(1200px 500px at 80% -100px,#CFEfff 0%,transparent 60%),
             radial-gradient(900px 500px at 0% 0%,#DDF3FF 0%,transparent 55%),#EAF7FF}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
a{color:inherit;text-decoration:none}
.display{font-family:Fraunces,serif}
[hidden]{display:none !important}

/* nav */
nav{display:flex;align-items:center;gap:12px;padding:20px 0}
.logo{font-family:Fraunces,serif;font-weight:700;font-size:24px;letter-spacing:-.02em;display:flex;align-items:center;gap:9px;cursor:pointer}
.logo .dot{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--grape),var(--pink));
  display:grid;place-items:center;color:#fff;font-size:16px;box-shadow:0 6px 16px var(--ring);transform:rotate(-6deg)}
nav .spacer{flex:1}
.navlink{font-weight:600;font-size:15px;color:var(--ink-soft);cursor:pointer;padding:8px 12px;border-radius:10px}
.navlink:hover{color:var(--ink);background:#fff}
.navlink.on{color:var(--grape-deep);background:#fff}
.pill{background:var(--ink);color:#fff;font-weight:700;font-size:15px;padding:11px 20px;border-radius:999px;
  border:none;cursor:pointer;box-shadow:0 8px 20px rgba(23,35,58,.18);transition:transform .15s}
.pill:hover{transform:translateY(-2px)}

/* buttons */
.btn-lg{font-weight:700;font-size:17px;padding:16px 26px;border-radius:16px;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s;display:inline-block}
.btn-lg.primary{background:linear-gradient(135deg,var(--grape),var(--grape-deep));color:#fff;box-shadow:0 12px 28px var(--ring)}
.btn-lg.primary:hover{transform:translateY(-3px);box-shadow:0 18px 36px var(--ring)}
.btn-lg.plain{background:#fff;color:var(--ink)}
.btn-lg.plain:hover{transform:translateY(-3px)}
.btn-lg.air{background:linear-gradient(135deg,var(--sky-blue),#1C86A6);color:#fff;box-shadow:0 12px 28px rgba(42,169,201,.28)}

/* eyebrow + section head */
section.block{padding:52px 0}
.eyebrow{display:inline-block;font-weight:800;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--grape);background:#F0EAFF;padding:6px 14px;border-radius:999px;margin-bottom:16px}
.eyebrow.air{color:#1C86A6;background:#D6F1F9}
h2.sec{font-family:Fraunces,serif;font-weight:700;font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;line-height:1.1}
.sec-sub{font-size:17px;color:var(--ink-soft);margin-top:12px;max-width:34em;line-height:1.55}

/* cards */
.card{background:#fff;border-radius:22px;padding:26px;box-shadow:0 12px 30px rgba(23,35,58,.07)}
.card .ico{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:24px;margin-bottom:16px}
.card h3{font-size:20px;font-weight:700;margin-bottom:8px}
.card p{color:var(--ink-soft);font-size:15px;line-height:1.55}
.i-grape{background:#F0EAFF} .i-sun{background:#FFF1DC} .i-mint{background:#E7F8EF} .i-pink{background:#FFEAF1} .i-sky{background:#D6F1F9}

footer{text-align:center;padding:30px 0 50px;color:var(--ink-soft);font-size:14px;font-weight:600}
footer .logo{justify-content:center;margin-bottom:10px}

/* auth modal */
.modal-bg{position:fixed;inset:0;background:rgba(23,35,58,.5);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;z-index:50}
.modal{background:var(--cream);border-radius:26px;padding:30px;width:min(440px,94vw);max-height:92vh;overflow-y:auto;box-shadow:0 40px 90px rgba(23,35,58,.4)}
.modal h2{font-family:Fraunces,serif;font-weight:700;font-size:26px;margin-bottom:4px}
.modal .msub{color:var(--ink-soft);font-size:15px;margin-bottom:20px}
.tabs{display:grid;grid-template-columns:1fr 1fr;background:#EEE9F8;border-radius:14px;padding:5px;margin-bottom:20px}
.tabs button{background:none;border:none;font-family:inherit;font-weight:700;font-size:15px;padding:11px;border-radius:10px;cursor:pointer;color:var(--ink-soft)}
.tabs button.on{background:#fff;color:var(--grape-deep);box-shadow:0 3px 8px rgba(23,35,58,.08)}
label{display:block;font-weight:700;font-size:13px;color:var(--ink-soft);margin:14px 0 6px}
input,select{width:100%;background:#fff;border:2px solid #E7E1F2;border-radius:13px;font-family:inherit;font-size:16px;color:var(--ink);padding:13px 14px;transition:border-color .15s}
input:focus,select:focus{outline:none;border-color:var(--grape)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.btn{width:100%;margin-top:20px;background:linear-gradient(135deg,var(--grape),var(--grape-deep));color:#fff;border:none;border-radius:14px;font-family:inherit;font-weight:700;font-size:16px;padding:15px;cursor:pointer;transition:transform .15s}
.btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)}
.btn.ghost{background:#fff;color:var(--grape-deep);border:2px solid #E7E1F2}
.btn:disabled{opacity:.5;cursor:wait}
.note{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-top:12px}
.err{color:var(--coral);font-weight:600;font-size:14px;margin-top:12px;min-height:18px}
.ok{color:#1E8E5A;font-weight:600;font-size:14px;margin-top:12px;min-height:18px}
.close{float:right;background:none;border:none;font-size:24px;color:var(--ink-soft);cursor:pointer;line-height:1;margin:-6px -6px 0 0}

/* app shell */
.app-wrap{max-width:560px;margin:0 auto;padding:20px 16px 80px}
.app-head{display:flex;align-items:center;padding:14px 0 20px}
.app-head .spacer{flex:1}
.wallet{display:flex;align-items:center;gap:14px;background:linear-gradient(135deg,var(--grape),var(--grape-deep));color:#fff;border-radius:22px;padding:22px 24px;box-shadow:0 16px 36px var(--ring)}
.wallet .k{font-size:12px;font-weight:700;opacity:.8;text-transform:uppercase;letter-spacing:.06em}
.wallet .v{font-family:Fraunces,serif;font-weight:700;font-size:32px;color:#fff;margin-top:3px}
.wallet .need{margin-left:auto;text-align:right;font-size:13px;font-weight:600;opacity:.85;line-height:1.5}
h2.app-sec{font-family:Fraunces,serif;font-weight:700;font-size:22px;margin:30px 0 14px;display:flex;align-items:center;gap:10px}
.cardbox{background:#fff;border-radius:20px;padding:22px;box-shadow:0 10px 26px rgba(23,35,58,.08);margin-top:4px}
.stub{background:#fff;border-radius:20px;padding:20px 22px;margin-bottom:14px;box-shadow:0 10px 26px rgba(23,35,58,.08)}
.stub .top{display:flex;justify-content:space-between;align-items:baseline}
.stub .route{font-family:Fraunces,serif;font-weight:700;font-size:22px}
.stub .route b{color:var(--grape)}
.stub .date{font-size:13px;color:var(--ink-soft);font-weight:600}
.stub .meta{font-size:13px;color:var(--ink-soft);font-weight:600;margin-top:6px}
.stub .stamp{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:12px;padding:7px 13px;border-radius:999px;margin-top:12px}
.stamp.booked{background:#E7F8EF;color:#1E8E5A} .stamp.pending,.stamp.running{background:#EEEAF6;color:var(--ink-soft)}
.stamp.no_inventory{background:#FFF1DC;color:#B4740A} .stamp.failed{background:#FFEAEA;color:var(--coral)}
.stamp.insufficient_funds{background:#FFEAEA;color:var(--coral)} .stamp.no_portal_account{background:#FFF1DC;color:#B4740A}
.refline{font-size:12px;color:var(--ink-soft);font-weight:600;margin-top:8px}
.schedline{display:flex;align-items:center;gap:10px;background:#F7F5FC;border-radius:14px;padding:13px 15px;margin-bottom:10px;font-size:14px;font-weight:600}
.schedline .x{margin-left:auto;background:none;border:none;color:var(--coral);cursor:pointer;font-weight:700;font-size:13px}
.empty{font-size:14px;color:var(--ink-soft);font-weight:600;padding:8px 2px}
.check-row{display:flex;align-items:center;gap:10px;font-weight:600;font-size:15px;color:var(--ink);margin-top:14px}
.check-row input{width:auto}
.app-foot{text-align:center;margin-top:40px;color:var(--ink-soft);font-size:13px;font-weight:600;line-height:1.7}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE — keep everything inside the viewport.
   The hero highlight spans use white-space:nowrap for the underline
   effect, which overflows narrow phones; they wrap below 600px.
   Page-level <style> blocks load after this file, so the overrides
   here are scoped to a media query and marked important deliberately.
   ═══════════════════════════════════════════════════════════════════ */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, table { max-width: 100%; height: auto; }
/* long unbroken strings (product URLs, tokens) must not push the layout */
body { overflow-wrap: break-word; word-wrap: break-word; }

@media (max-width: 600px) {
  h1.hero-h .hl { white-space: normal !important; }
  .wrap { padding: 0 14px !important; }
  .app-wrap { padding: 16px 14px 70px !important; }

  /* nav: let the links wrap instead of scrolling off */
  nav { flex-wrap: wrap !important; gap: 8px 10px !important; row-gap: 8px; }
  nav .navlink { font-size: 13px !important; }
  nav .spacer { flex-basis: 100%; height: 0; }

  /* hero art shouldn't force width */
  .hero-art { min-height: auto !important; }
  .pcard, .rcard, .ocard, .ticket { width: min(300px, 88vw) !important; transform: none !important; }

  /* headline sizing floor, so a long word can't overflow */
  h1.hero-h { font-size: clamp(28px, 8.5vw, 44px) !important; }
  .sub { font-size: 16px !important; }

  /* cards and grids */
  .cardbox { padding: 18px 16px !important; }
  .calgrid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)) !important; gap: 7px !important; }
  .final { padding: 34px 20px !important; }
  .close-band { padding: 26px 18px !important; }
  .door { padding: 24px 20px !important; min-height: auto !important; }
  .door .big { font-size: 46px !important; }

  /* forms: full width, no side-by-side squeeze */
  .row { grid-template-columns: 1fr !important; }
  input, select, button { max-width: 100% !important; }

  /* watch/list rows wrap rather than stretch */
  .wcard .meta { gap: 8px !important; }
  .srow { flex-wrap: wrap !important; }
  .srow button { margin-left: 0 !important; }
}

@media (max-width: 380px) {
  .calgrid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important; }
  .calday .pr { font-size: 13px !important; }
}