/*
 * desktop.css — shared styles for the /desktop product pages.
 *
 * Palette is lifted verbatim from index.html rather than re-picked, so the
 * desktop products read as part of Forge and not as a bolt-on. Only the
 * pieces these four pages actually need are here; the marketing homepage
 * keeps its own larger stylesheet.
 */

:root {
  --bg: #08080c;
  --bg-soft: #11111a;
  --ink: #ffffff;
  --ink-soft: #bfc0cc;
  --ink-dim: #7b7d8c;
  --orange: #ff6b35;
  --orange-hi: #ff8a4c;
  --orange-warm: #ffa869;
  --deep-red: #aa231c;
  --green: #4fbf73;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --maxw: 1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---- nav / footer (shared markup with the homepage) ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8, 8, 12, 0.86);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; letter-spacing: 0.14em; font-size: 15px;
  color: var(--ink); text-decoration: none;
}
.brand-mark { width: 20px; height: 26px; display: block; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--ink-soft); text-decoration: none; font-size: 14px; font-weight: 500; }
.nav-links a:hover { color: var(--ink); }

footer { border-top: 1px solid var(--border); margin-top: 80px; padding: 48px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; }
.foot-col h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-dim); margin: 0 0 14px;
}
.foot-col a { display: block; color: var(--ink-soft); text-decoration: none; font-size: 13.5px; margin-bottom: 9px; }
.foot-col a:hover { color: var(--ink); }
@media (max-width: 820px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ---- buttons ---- */
.cta, .cta-ghost {
  display: inline-block; font: inherit; font-size: 15px; font-weight: 650;
  padding: 12px 24px; border-radius: 10px; text-decoration: none;
  cursor: pointer; border: 0; transition: transform .15s ease, background .15s ease;
}
.cta {
  background: linear-gradient(135deg, var(--orange-hi), var(--orange));
  color: #fff;
}
.cta:hover { transform: translateY(-2px); }
.cta-ghost {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-strong);
  color: var(--ink);
}
.cta-ghost:hover { background: rgba(255, 255, 255, 0.08); }
.cta[disabled], .cta-ghost[disabled] { opacity: .5; cursor: default; transform: none; }
.cta-sm { padding: 9px 16px; font-size: 14px; }

/* ---- type ---- */
h1 { font-size: clamp(34px, 5vw, 54px); line-height: 1.08; letter-spacing: -1.4px; margin: 0 0 18px; }
h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; letter-spacing: -.7px; margin: 0 0 14px; }
h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -.2px; }
.lede { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink-soft); max-width: 620px; margin: 0 0 28px; }
p { color: var(--ink-soft); }
.dim { color: var(--ink-dim); font-size: 13.5px; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange); margin: 0 0 14px;
}

section { padding: 72px 0; }
section.tight { padding: 44px 0; }

/* ---- cards ---- */
.card {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 16px; padding: 26px;
}
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---- pricing ---- */
.price-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
/* Two-card variant, used while check-in calls are a waitlist rather than a
   product. Capped and centred so the pair does not stretch into two very wide
   panels on a desktop monitor. */
.price-row.two { grid-template-columns: repeat(2, 1fr); max-width: 740px; margin: 0 auto; }
@media (max-width: 900px) { .price-row, .price-row.two { grid-template-columns: 1fr; } }
/* The plan cards use flex-column so the CTA sits at the bottom of each card.
   The waitlist form takes that CTA slot, so it needs the same auto top margin
   or the two cards' buttons stop lining up. */
.plan form { margin-top: auto; }
.plan form button { cursor: pointer; font-family: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- button loading state ----
   The checkout endpoint calls Stripe, and on a cold Cloud Function that round
   trip has been measured at up to 3.8 seconds. Previously the button just
   swapped its label to "Opening checkout…" and then sat there, which reads as
   a broken button precisely at the moment someone has decided to pay. */
.is-loading { opacity: .75; pointer-events: none; cursor: progress; }
.btn-spinner {
  display: inline-block; width: 13px; height: 13px; margin-right: 8px;
  vertical-align: -2px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: btn-spin .7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 2.4s; }
}

/* ---- guarantee ---- */
.guarantee {
  max-width: 740px; margin: 22px auto 0; padding: 18px 22px;
  border: 1px solid rgba(255, 107, 53, .35); border-radius: 14px;
  background: rgba(255, 107, 53, .06);
  display: flex; gap: 14px; align-items: flex-start;
}
.guarantee svg { flex: 0 0 22px; margin-top: 2px; }
.guarantee p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.guarantee p + p { margin-top: 8px; }
.plan { display: flex; flex-direction: column; }
.plan.featured { border-color: rgba(255, 107, 53, .5); box-shadow: 0 0 0 1px rgba(255,107,53,.18); }
.plan .tag {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--orange);
  background: rgba(255, 107, 53, .12); padding: 5px 10px; border-radius: 99px; margin-bottom: 14px;
}
.amount { font-size: 38px; font-weight: 800; letter-spacing: -1.5px; margin: 6px 0 2px; }
.amount small { font-size: 15px; font-weight: 500; color: var(--ink-dim); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 18px 0 24px; }
.plan li { font-size: 14.5px; color: var(--ink-soft); padding-left: 22px; position: relative; margin-bottom: 9px; }
.plan li::before { content: "—"; position: absolute; left: 0; color: var(--orange); }
.plan .cta, .plan .cta-ghost { margin-top: auto; text-align: center; }

/* ---- forms ---- */
label { display: block; font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 16px 0 6px; }
input[type=text], input[type=email], input[type=tel], input[type=password], select {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 15px;
  background: rgba(0, 0, 0, .35); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: 9px;
}
input:focus, select:focus { outline: 2px solid rgba(255, 107, 53, .55); outline-offset: 1px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.checkrow { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 6px; }
.checkrow input { margin-top: 4px; flex: 0 0 auto; width: 16px; height: 16px; accent-color: var(--orange); }
.checkrow label { margin: 0; font-weight: 400; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; }
.daybtns { display: flex; gap: 6px; flex-wrap: wrap; }
.daybtn {
  font: inherit; font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 8px;
  background: rgba(255,255,255,.04); border: 1px solid var(--border-strong);
  color: var(--ink-dim); cursor: pointer;
}
.daybtn[aria-pressed=true] { background: rgba(255,107,53,.16); border-color: rgba(255,107,53,.5); color: var(--orange-warm); }

.msg { font-size: 14px; margin-top: 14px; line-height: 1.6; }
.msg.ok { color: var(--green); }
.msg.err { color: var(--orange-hi); }

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 24px; font-weight: 700; letter-spacing: .12em;
  background: rgba(0,0,0,.4); border: 1px dashed var(--border-strong);
  border-radius: 10px; padding: 16px 18px; text-align: center; color: var(--orange-warm);
}

.notice {
  border: 1px solid var(--border); border-left: 3px solid var(--orange);
  background: rgba(255,107,53,.05); border-radius: 0 10px 10px 0;
  padding: 16px 18px; margin: 22px 0;
}
.notice p { margin: 0; font-size: 14px; }
.notice p + p { margin-top: 10px; }

.hide { display: none !important; }
.center { text-align: center; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}