/* ============================================================
   Obelisk — marketing site
   Palette is the overlay's own (apps/desktop/src/renderer/src/overlay/theme.ts):
   near-black panel, a single gold accent, warm off-white text.
   ============================================================ */

:root {
  --bg:        #04060b;
  --bg-2:      #080b13;
  --panel:     #0e111a;
  --panel-2:   #131826;
  --line:      rgba(255, 255, 255, 0.10);
  --line-2:    rgba(255, 255, 255, 0.16);
  --gold:      #d9a441;
  --gold-hi:   #f0c069;
  --text:      #eceae2;
  --dim:       rgba(236, 234, 226, 0.62);
  --dimmer:    rgba(236, 234, 226, 0.40);
  --good:      #4ade80;
  --bad:       #f87171;

  --display: 'Barlow Condensed', 'Bahnschrift', 'DIN Alternate', 'Segoe UI', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --wrap: 1120px;
  --r: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Replaced media defaults.
   `height: auto` is the load-bearing declaration, not a tidy-up: an <img> that
   carries width/height ATTRIBUTES (which every image here does, so the browser
   can reserve its box before the file arrives) renders at that literal pixel
   height unless CSS releases it. Constrain the width with max-width alone and
   the picture keeps its 1350px height while its width shrinks to the column —
   which is exactly how an image ends up stretched. Declaring it once, on the
   element rather than on a class, means no future image can reintroduce the
   bug by not matching some selector. */
img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Browsers indent <figure> by 40px on both sides by default; every figure here
   sets its own spacing. */
figure { margin: 0; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.wrap.narrow { max-width: 780px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: #000; padding: 10px 16px; font-weight: 600;
}
.skip:focus { left: 8px; top: 8px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------------- Type ---------------- */

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: 0.01em; margin: 0; }

h1 {
  font-size: clamp(2.9rem, 7.2vw, 5.4rem);
  line-height: 0.98;
  text-transform: uppercase;
  margin: 0 0 22px;
}
h1 em {
  font-style: normal;
  color: var(--gold);
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.04;
  text-transform: uppercase;
  margin-bottom: 14px;
}

h3 { font-size: 1.32rem; line-height: 1.2; letter-spacing: 0.015em; }

.eyebrow {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--gold);
  margin: 0 0 18px;
}

.lede { font-size: 1.15rem; color: var(--dim); max-width: 640px; margin: 0 0 34px; }
.sub  { color: var(--dim); font-size: 1.06rem; max-width: 660px; margin: 0 0 46px; }

code { font-family: var(--mono); font-size: 0.9em; color: var(--gold); }

/* ---------------- Nav ---------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(4, 6, 11, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 28px; height: 64px; }

.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: 1.42rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--text);
}
.brand img { border-radius: 5px; }

.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a {
  color: var(--dim); font-size: 0.93rem; font-weight: 500;
  border-bottom: 1px solid transparent; padding-bottom: 2px;
}
.nav-links a:hover { color: var(--text); border-bottom-color: var(--gold); }

@media (max-width: 860px) { .nav-links { display: none; } .nav-inner { gap: 16px; } .btn-sm { margin-left: auto; } }

/* ---------------- Buttons ---------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--gold); color: #16110a;
  font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--gold);
  border-radius: var(--r);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:hover {
  background: var(--gold-hi); color: #16110a;
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(217, 164, 65, 0.24);
}
.btn-sm { padding: 8px 17px; font-size: 0.93rem; }
.btn-lg { padding: 14px 30px; font-size: 1.16rem; }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255,255,255,0.06); color: var(--text); border-color: var(--gold); box-shadow: none; }

/* ---------------- Hero ---------------- */

.hero {
  position: relative;
  padding: clamp(64px, 10vw, 118px) 0 0;
  background:
    radial-gradient(1100px 520px at 50% -10%, rgba(217, 164, 65, 0.12), transparent 66%),
    radial-gradient(760px 420px at 84% 8%, rgba(74, 110, 205, 0.10), transparent 68%),
    var(--bg);
}

.cta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 16px; }

.cta-meta {
  font-size: 0.9rem; color: var(--dimmer); margin: 0;
  font-variant-numeric: tabular-nums;
}

/* --- the screenshots --- */

.shot { margin: 54px 0 0; }

/* Each figure states the shape of its own picture, so the browser reserves the
   right box before the file loads and the page does not jump. `object-fit`
   never crops anything at the declared ratios — it is there so that a future
   swapped-in capture at a slightly different size is trimmed rather than
   squashed, which is the failure that is actually hard to notice. */
.shot img,
.barshot img {
  width: 100%;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  object-fit: cover;
  background: var(--panel);
}

/* 3840x2160 down to 2400x1350 and 1200x675 — every step exactly 16:9. */
.shot img { aspect-ratio: 16 / 9; }

/* The bar crop, 2950x268, and its variant at exactly half that. */
.barshot img { aspect-ratio: 1475 / 134; }

.shot figcaption,
.barshot figcaption {
  text-align: center; color: var(--dimmer); font-size: 0.86rem; margin-top: 14px;
}

/* The bar close-up is a wide, short strip, so it wants a tighter frame than
   the hero's full-screen capture. */
.barshot { margin: 0 0 40px; }
.barshot img { border-radius: 8px; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45); }
.barshot figcaption { margin-top: 12px; }

/* ---------------- Trust strip ---------------- */

.strip-trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
  margin-top: clamp(48px, 7vw, 86px);
}
.trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px 30px; padding-top: 26px; padding-bottom: 26px;
}
.trust-grid div { display: flex; flex-direction: column; }
.trust-grid b {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: 0.05em; font-size: 1.06rem; color: var(--gold);
}
.trust-grid span { font-size: 0.88rem; color: var(--dim); }
@media (max-width: 760px) { .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; } }

/* ---------------- Sections ---------------- */

.sec { padding: clamp(64px, 9vw, 108px) 0; }
.sec.alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 18px;
}
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 820px) { .two { grid-template-columns: 1fr; } }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px 24px 26px;
  transition: border-color .18s ease, transform .18s ease;
}
.card:hover { border-color: var(--line-2); transform: translateY(-2px); }
.card h3 { color: var(--text); margin-bottom: 9px; }
.card p { margin: 0; color: var(--dim); font-size: 0.96rem; }
.card.tall { display: flex; flex-direction: column; padding: 28px; }
.card.tall p { margin-bottom: 16px; }

.tag {
  display: inline-block; align-self: flex-start;
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.13em;
  font-size: 0.73rem; font-weight: 600; color: var(--gold);
  background: rgba(217, 164, 65, 0.12);
  border: 1px solid rgba(217, 164, 65, 0.28);
  border-radius: 100px; padding: 3px 11px; margin-bottom: 14px;
}

.card ul { margin: auto 0 0; padding: 0; list-style: none; }
.card li {
  font-size: 0.92rem; color: var(--dim);
  padding: 7px 0 7px 22px; position: relative;
  border-top: 1px solid var(--line);
}
.card li::before {
  content: '';
  position: absolute; left: 3px; top: 15px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); opacity: .8;
}

.card pre {
  background: #05070c; border: 1px solid var(--line);
  border-radius: 7px; padding: 11px 13px; margin: 0 0 16px;
  overflow-x: auto;
}
.card pre code { color: var(--gold-hi); font-size: 0.88rem; }

/* ---------------- Steps ---------------- */

.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 30px; }
.steps li {
  counter-increment: s;
  position: relative; padding: 18px 0 18px 62px;
  border-top: 1px solid var(--line);
  color: var(--dim);
}
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before {
  content: counter(s);
  position: absolute; left: 0; top: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(217, 164, 65, 0.36);
  background: rgba(217, 164, 65, 0.10);
  font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--gold);
}
.steps b { color: var(--text); font-weight: 600; }

.note {
  background: var(--panel); border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 16px 20px; color: var(--dim); font-size: 0.94rem; margin: 0;
}
.note b { color: var(--text); }

/* ---------------- Safety ---------------- */

.safety { display: grid; gap: 2px; margin-bottom: 32px; }
.sitem {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 22px 24px;
}
.sitem h3 { color: var(--gold); font-size: 1.18rem; margin-bottom: 7px; }
.sitem p { margin: 0; color: var(--dim); font-size: 0.96rem; }

.disclaimer { font-size: 0.84rem; color: var(--dimmer); line-height: 1.6; margin: 0; }

/* ---------------- Download ---------------- */

.download { background: var(--bg-2); border-top: 1px solid var(--line); }

.dl-grid { display: grid; gap: 14px; margin-bottom: 26px; }

.dl {
  display: flex; flex-direction: column; gap: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  padding: 20px 22px;
  color: var(--text);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.dl:hover {
  border-color: var(--gold); background: #171d2d;
  color: var(--text); transform: translateY(-2px);
}
.dl-kind {
  font-family: var(--display); text-transform: uppercase; letter-spacing: 0.1em;
  font-size: 0.82rem; font-weight: 600; color: var(--gold);
  display: flex; align-items: center; gap: 9px;
}
.dl-kind b {
  font-family: var(--body); text-transform: none; letter-spacing: 0;
  font-size: 0.68rem; font-weight: 600; color: #16110a;
  background: var(--gold); border-radius: 100px; padding: 1px 8px;
}
.dl-name { font-size: 1.1rem; font-weight: 600; word-break: break-all; }
.dl-meta { font-size: 0.86rem; color: var(--dim); }

/* ---------------- FAQ ---------------- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 18px 34px 18px 0; position: relative;
  font-weight: 600; font-size: 1.03rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 1.5rem; color: var(--gold); line-height: 1;
}
.faq details[open] summary::after { content: '\2212'; }
.faq summary:hover { color: var(--gold); }
.faq p { margin: 0 0 20px; color: var(--dim); font-size: 0.96rem; max-width: 64ch; }

/* ---------------- Closer + footer ---------------- */

.closer {
  text-align: center;
  padding: clamp(70px, 9vw, 110px) 0;
  background:
    radial-gradient(760px 320px at 50% 120%, rgba(217, 164, 65, 0.14), transparent 68%),
    var(--bg);
  border-top: 1px solid var(--line);
}
.closer h2 { margin-bottom: 26px; }
.closer .cta-meta { margin-top: 16px; }

.foot { border-top: 1px solid var(--line); background: var(--bg-2); padding: 34px 0; }
.foot-inner { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 30px; }
.foot-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--display); font-size: 1.2rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
}
.foot-brand img { border-radius: 4px; }
.foot-links { display: flex; gap: 22px; }
.foot-links a { color: var(--dim); font-size: 0.9rem; }
.foot-links a:hover { color: var(--gold); }
.foot-legal {
  flex: 1 1 100%; margin: 0; font-size: 0.79rem; color: var(--dimmer); line-height: 1.6;
}