/* Navy Mirage on the landing page: the colours, shapes and type of the sign-in pages.
   Loaded after the page's own styles, which keep the layout. The cursor reveal chart (.reveal-chart) is untouched.
   Palette: #141E30 (deep) to #35577D (light), pale blue-white for text and the main button. */
:root, html[data-m="dark"] {
  --navy: #141E30;
  --steel: #35577D;
  --mist: #DCE6F2;
  --hair: rgba(200, 218, 240, .38);
  --hair-soft: rgba(200, 218, 240, .16);
  --well: rgba(10, 16, 28, .42);
  --well-shadow: inset 3px 4px 10px rgba(5, 9, 18, .45);
  --card: linear-gradient(150deg, #1B2A44 0%, #162238 60%, #141E30 100%);
  --pill: linear-gradient(100deg, #223654, #35577D);
  --lift: 14px 20px 44px rgba(7, 12, 22, .5), inset 0 1px 0 rgba(255, 255, 255, .07);

  /* the page's own variables, re-pointed */
  --night: #141E30; --deck: #18263D; --deck2: #1D2E49; --rule: #2C4263; --ink: #DCE6F2; --mute: #9DB0C9;
  --blue: #B4CBE8; --blue-ink: #141E30; --gold: #DCE6F2; --amber: #B4CBE8; --long: #8FD6B8; --short: #F2909C;
  --shadow: 14px 20px 44px rgba(7, 12, 22, .5);
}

html { background: #141E30; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: linear-gradient(135deg, #111A2A 0%, #141E30 22%, #24395A 62%, #35577D 100%) fixed;
}
/* faceted shard backdrop (drawn by /static/auth-glass.js), kept quiet so long text stays easy to read */
#shards { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; opacity: .55; }
.ambient { display: none; }
:focus-visible { outline-color: var(--mist); }

/* ============ type: light, wide-spaced capitals for headings; Inter for reading ============ */
h1, h2 { font-family: "Jost", "Inter", sans-serif; font-weight: 300; text-transform: uppercase; text-wrap: balance; }
h1 { font-size: clamp(27px, 3.1vw, 42px); line-height: 1.32; letter-spacing: .16em; max-width: 21ch; font-weight: 700; }
h2 { font-size: clamp(22px, 2.5vw, 34px); line-height: 1.36; letter-spacing: .14em; max-width: 27ch; }
h3 { font-weight: 600; letter-spacing: 0; }
.grad, html[data-m="light"] .grad { background-image: linear-gradient(100deg, #FFFFFF 0%, #A9C6EA 100%); font-weight: 400; }
h1 .grad { font-weight: 700; }
.lead { font-size: 17.5px; line-height: 1.7; }
.hero .lead { font-size: 17px; }
.lead b, details p b, .dash-list b, .slides .cap b, .ticket .rule b { font-weight: 600; }
/* a thin rule under each section heading, as under the sign-in headline */
section h2::after { content: ""; display: block; width: 64px; height: 1px; margin-top: 22px; background: linear-gradient(90deg, var(--mist), transparent); }
section + section { border-top-color: var(--hair-soft); }

/* ============ buttons: pills ============ */
.btn { border-radius: 10px; font-weight: 600; font-size: 15px; padding: 0 26px; transition: transform .2s, box-shadow .2s, background-color .15s, border-color .15s, color .15s; }
.hero .btn { border-radius: 10px; }
.nav .btn { border-radius: 10px; }
.btn-main { color: var(--navy); background: linear-gradient(180deg, #F3F7FC, #C3D2E4); box-shadow: 8px 12px 26px rgba(7, 12, 22, .5), inset 0 1px 0 #fff; }
.btn-main:hover { background: linear-gradient(180deg, #FFFFFF, #D2DEEC); transform: translateY(-2px); box-shadow: 10px 16px 30px rgba(7, 12, 22, .55), inset 0 1px 0 #fff; }
.btn-line { background: transparent; border-color: var(--hair); color: var(--mist); }
.btn-line:hover { background: rgba(200, 218, 240, .08); border-color: var(--mist); color: #fff; }
.icon-btn, .round, .slides .nav-btn { border-radius: 50%; border-color: var(--hair-soft); }
.round:hover, .slides .nav-btn:hover { border-color: var(--mist); color: #fff; }

/* ============ nav ============ */
.nav { background: rgba(20, 30, 48, .82); border-bottom-color: var(--hair-soft); }
.brand { font-weight: 600; }
.nav .links a { font-weight: 500; border-radius: 10px; padding: 8px 14px; }
.nav .links a::after { display: none; }
.nav .links a[aria-current="true"] { color: #fff; background: var(--pill); box-shadow: inset 0 0 0 1px var(--hair), 4px 6px 14px rgba(7, 12, 22, .4); }
.mob { background: #162238; border-bottom-color: var(--hair-soft); }
.mob a { border-bottom-color: var(--hair-soft); font-weight: 500; }
.mob a[aria-current="true"] { color: #fff; }

/* ============ surfaces: large rounded slabs with the thin light outline ============ */
.ticket, .rack, .calc, .cmpwrap, .cform, .slides .viewport, .follow {
  background: var(--card); border: 1px solid var(--hair-soft); box-shadow: var(--lift);
}
.ticket { border-radius: 20px; }
.hero .ticket { border-radius: 10px; }
.ticket.master { border-color: var(--hair); }
.ticket.master.pulse { box-shadow: 0 0 0 2px rgba(220, 230, 242, .55), var(--lift); }
.rack, .calc, .cmpwrap, .cform, .slides .viewport { border-radius: 28px; }
.ticket .state { border-color: var(--hair-soft); }
.ticket .lots, .mode output, .plans-table .pprice, .cmp caption { font-family: "Jost", "Inter", sans-serif; font-weight: 400; letter-spacing: .01em; }
.wire { stroke: rgba(200, 218, 240, .22); }

.steps { border-top: 1px solid var(--hair); }
.steps li::before { font-family: "Jost", "Inter", sans-serif; font-weight: 300; font-size: 30px; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--mist); }
.steps li:not(:last-child)::after { border-top: 1px solid var(--hair); border-right: 1px solid var(--hair); top: -5.5px; }
.steps code, .map code { padding: 1px 7px; border-radius: 999px; background: var(--well); border: 1px solid var(--hair-soft); font-size: 12.5px; }
.follow { gap: 0; border-radius: 24px; background: var(--card); }
.follow div { background: none; border-left: 1px solid var(--hair-soft); }
.follow div:first-child { border-left: 0; }

.facts div { border-left: 1px solid var(--hair-soft); }
.facts div.key { border-left-color: var(--mist); }
.slot { border-radius: 16px; background: var(--well); border-color: var(--hair-soft); box-shadow: var(--well-shadow); }
.slot.other { box-shadow: none; }
.slot .n { font-weight: 600; }
.slot .ip { color: var(--mist); }

.plat-groups h3 { border-bottom-color: var(--hair-soft); font-weight: 500; }
.plats li { border-bottom-color: var(--hair-soft); }
.plats b { font-weight: 600; }

/* ============ form fields: inset pills ============ */
.calc form { border-right-color: var(--hair-soft); }
.calc label, .cform label { font-weight: 500; }
.calc input, .stepper input, .cform input, .cform select, .cform textarea {
  background: var(--well); border: 1px solid var(--hair-soft); border-radius: 999px; box-shadow: var(--well-shadow); padding-left: 18px; padding-right: 18px;
}
.cform textarea { border-radius: 20px; padding-top: 14px; }
.calc input:focus, .stepper input:focus, .cform input:focus, .cform select:focus, .cform textarea:focus {
  border-color: var(--hair); box-shadow: var(--well-shadow), 0 0 0 4px rgba(200, 218, 240, .10);
}
.mode { border-bottom-color: var(--hair-soft); }
.mode output { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; -webkit-text-fill-color: #fff; font-size: 30px; }
.mode output small { -webkit-text-fill-color: var(--mute); font-family: "Inter", sans-serif; }
.stepper { border-radius: 999px; border-color: var(--hair-soft); background: var(--well); }
.stepper input { border-radius: 0; box-shadow: none; background: none; border-left-color: var(--hair-soft); border-right-color: var(--hair-soft); padding: 0 4px; }
.stepper button:hover:not(:disabled) { color: #fff; }

/* ============ dashboard slideshow, reviews ============ */
.dots button { background: rgba(200, 218, 240, .22); }
.dots button[aria-current="true"] { background: var(--mist); }
.dash-list li::before { background: var(--mist); height: 1px; width: 10px; }
.rv-card { background: var(--card); border: 1px solid var(--hair-soft); border-radius: 28px; box-shadow: var(--lift); }
.rv-card::before { display: none; }
.rv-card blockquote { font-weight: 400; }
.rv-card blockquote::before { font-family: "Jost", serif; font-weight: 300; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--mist); opacity: .7; }
.rv-card .by { border-top-color: var(--hair-soft); }
.rv-card .av { background: var(--pill); color: #fff; font-weight: 500; box-shadow: inset 0 0 0 1px var(--hair); }
.rv-card .who b { font-weight: 600; }
.stars { color: var(--mist); }

/* ============ pricing ============ */
.cycle { border-radius: 12px; background: var(--well); border-color: var(--hair-soft); }
.cycle button { border-radius: 10px; font-weight: 500; }
.cycle button[aria-pressed="true"] { background: var(--pill); color: #fff; box-shadow: inset 0 0 0 1px var(--hair), 4px 6px 14px rgba(7, 12, 22, .45); }
.cmp th, .cmp td { border-bottom-color: var(--hair-soft); }
.cmp thead th, .plans-table .pname { font-weight: 600; }
.cmp thead th.hl { color: #fff; }
.cmp td.hl, .cmp th.hl { background: rgba(200, 218, 240, .07); }
.cmp tbody th { font-weight: 500; }
.plans-table thead th { border-bottom: 1px solid var(--hair); }
.plans-table .pprice { font-size: 30px; }
.plans-table .pprice small { font-family: "Inter", sans-serif; font-weight: 500; }
.plans-table th.feat, .plans-table tbody th, .plans-table tfoot th { background: #18263D; }
.plans-table .ent { background: rgba(200, 218, 240, .05); }
.no { background: rgba(200, 218, 240, .22); }

/* ============ faq, contact, footer ============ */
details, details:first-of-type { border-color: var(--hair-soft); }
summary { font-weight: 500; font-size: 17.5px; }
summary::after { border-right-width: 1px; border-bottom-width: 1px; border-color: var(--mist); }
.direct, .direct a { border-color: var(--hair-soft); }
.direct a { font-weight: 500; }
.direct a:hover { color: #fff; }
.cform h3 { font-family: "Jost", "Inter", sans-serif; font-weight: 400; font-size: 22px; letter-spacing: .04em; }
footer { background: rgba(17, 26, 42, .86); border-top-color: var(--hair-soft); }

/* ============ balance: single-column sections are centred; text uses the width it has ============ */
section > .wrap > h2, section > .wrap > .lead, #dashboard h2, #dashboard .lead { margin-left: auto; margin-right: auto; text-align: center; }
section > .wrap > h2::after, #dashboard h2::after { margin-left: auto; margin-right: auto; background: linear-gradient(90deg, transparent, var(--mist), transparent); width: 96px; }
section > .wrap > h2 { max-width: 34ch; }
section > .wrap > .lead { max-width: 78ch; }
#pricing .wrap { text-align: center; }
#pricing .cmpwrap, #pricing .plan-note { text-align: left; }
.map { justify-content: center; }
.faq { max-width: none; }
details p { max-width: none; }
.plan-note { max-width: none; }
footer .risk { max-width: none; }
footer .wrap { justify-content: space-between; }

/* pricing: the table is wider than the text column, so every plan is visible without scrolling sideways */
#pricing .cmpwrap { --w: min(1400px, calc(100vw - 48px)); width: var(--w); margin-left: calc(50% - var(--w) / 2); }
.plans-table { min-width: 1060px; }
.plans-table th.feat { width: 170px; }
.plans-table thead th { padding-left: 8px; padding-right: 8px; }
.plans-table .pprice { font-size: 27px; white-space: nowrap; }
.plans-table .pprice small { font-size: 12px; }
.plans-table thead th.ent .pprice { font-size: 22px; }
.cmp th, .cmp td { padding-left: 10px; padding-right: 10px; }

@media (max-width: 1060px) {
  .steps { border-top: 0; }
  .steps li { border-top: 1px solid var(--hair); }
  .calc form { border-bottom-color: var(--hair-soft); }
}
@media (max-width: 760px) {
  h1 { letter-spacing: .1em; font-size: 25px; }
  #pricing .cmpwrap { --w: calc(100vw - 32px); }
  h2 { letter-spacing: .09em; font-size: 21px; }
  .follow div { border-left: 0; border-top: 1px solid var(--hair-soft); }
  .follow div:first-child { border-top: 0; }
  .rack, .calc, .cmpwrap, .cform, .slides .viewport, .rv-card { border-radius: 22px; }
}