/* FreeApply website. Same tokens as the local dashboard (agent/web/index.html): dark, purple and green. */
:root {
  --bg: #06050c; --bg2: #0c0918; --panel: rgba(22, 15, 42, .72); --panel2: rgba(30, 20, 58, .6);
  --line: rgba(168, 85, 247, .22); --line2: rgba(168, 85, 247, .42);
  --purple: #a855f7; --violet: #7c3aed; --green: #34f5a0; --green2: #16c784; --amber: #fbbf24;
  --text: #ece8ff; --muted: #9a91bd; --dim: #6b6390;
  --mono: ui-monospace, "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --sans: "Segoe UI Variable", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  --r: 14px; --max: 1180px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sans); }
body {
  min-height: 100vh; overflow-x: hidden;
  background:
    linear-gradient(rgba(168, 85, 247, .045) 1px, transparent 1px) 0 0 / 100% 32px,
    linear-gradient(90deg, rgba(168, 85, 247, .045) 1px, transparent 1px) 0 0 / 32px 100%,
    var(--bg);
}
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
img, video { max-width: 100%; display: block; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); letter-spacing: -.01em; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
code, pre, kbd { font-family: var(--mono); }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
.muted { color: var(--muted); }
.mono { font-family: var(--mono); }
.grad {
  background: linear-gradient(90deg, #d8b4fe, var(--green)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.eyebrow { font: 600 .78rem var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--green); margin-bottom: .8em; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 8px; z-index: 50; background: var(--bg2); padding: 6px 10px; }

/* header */
.top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(12px); background: rgba(6, 5, 12, .66); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 18px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 0 22px rgba(168, 85, 247, .55); }
.brand b { font-size: 1.15rem; letter-spacing: .12em; font-weight: 800; }
.brand small { display: block; font: 10px var(--mono); color: var(--muted); letter-spacing: .14em; margin-top: -3px; }
.top nav { margin-left: auto; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.top nav a { color: var(--muted); padding: 8px 10px; border-radius: 8px; font-size: .92rem; }
.top nav a:hover, .top nav a[aria-current] { color: var(--text); background: var(--panel2); text-decoration: none; }
@media (max-width: 720px) { .top nav a.opt { display: none; } }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line2); color: var(--text);
  background: linear-gradient(180deg, rgba(124, 58, 237, .38), rgba(124, 58, 237, .15));
  padding: 12px 20px; border-radius: 12px; font-weight: 600; cursor: pointer; transition: box-shadow .15s, border-color .15s;
}
.btn:hover { text-decoration: none; border-color: var(--purple); box-shadow: 0 0 22px rgba(168, 85, 247, .4); }
.btn.green { background: linear-gradient(180deg, rgba(52, 245, 160, .32), rgba(22, 199, 132, .14)); border-color: rgba(52, 245, 160, .55); }
.btn.green:hover { box-shadow: 0 0 22px rgba(52, 245, 160, .4); }
.btn.small { padding: 7px 12px; font-size: .88rem; border-radius: 9px; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.spaced { margin-top: 24px; }

/* hero: stock mountain time-lapse graded purple/green in CSS */
.hero { position: relative; min-height: min(92vh, 880px); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero .media, .hero .tint, .hero .scan { position: absolute; inset: 0; }
.hero .media { background: #06050c url("media/peak-poster.jpg") center 60% / cover no-repeat; }
.hero video, .hero .media { filter: saturate(.55) contrast(1.12) brightness(.82); }
.hero video { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero .tint {
  background:
    radial-gradient(60% 50% at 50% 62%, rgba(52, 245, 160, .22), transparent 70%),
    linear-gradient(180deg, rgba(124, 58, 237, .55), rgba(76, 29, 149, .35) 45%, rgba(6, 5, 12, .2) 70%);
  mix-blend-mode: color;
}
.hero .scan {
  background:
    linear-gradient(rgba(168, 85, 247, .07) 1px, transparent 1px) 0 0 / 100% 4px,
    linear-gradient(180deg, rgba(6, 5, 12, .55), transparent 35%, transparent 60%, var(--bg) 100%),
    radial-gradient(80% 60% at 20% 40%, rgba(6, 5, 12, .55), transparent 70%);
}
.hero .wrap { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 80px; }
.hero h1 { font-size: clamp(2.4rem, 6.4vw, 4.6rem); letter-spacing: -.02em; max-width: 14ch; text-shadow: 0 0 40px rgba(124, 58, 237, .45); }
.hero .lede { font-size: clamp(1.05rem, 1.8vw, 1.3rem); color: #d9d3f5; max-width: 40ch; margin-bottom: 1.6em; }
.hero .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.chip { font: 12px var(--mono); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(12, 9, 24, .6); color: var(--muted); }
.chip.ok { color: var(--green); border-color: rgba(52, 245, 160, .45); }
.chip.live { color: var(--text); border-color: rgba(52, 245, 160, .55); display: inline-flex; align-items: center; gap: 7px; }
.chip.live b { color: var(--green); font-weight: 700; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52, 245, 160, .6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 7px rgba(52, 245, 160, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 245, 160, 0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } }

/* sections */
section.band { padding: 88px 0; position: relative; }
section.band.alt { background: linear-gradient(180deg, transparent, rgba(124, 58, 237, .07), transparent); }
.intro { max-width: 62ch; margin-bottom: 40px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03);
}
.card h3 { display: flex; align-items: center; gap: 10px; }
a.card { display: block; color: var(--text); transition: border-color .15s, box-shadow .15s; }
a.card:hover { text-decoration: none; border-color: var(--line2); box-shadow: 0 0 22px rgba(168, 85, 247, .25); }
.card p:last-child { margin-bottom: 0; }
.ico {
  width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center; font: 700 .9rem var(--mono);
  background: linear-gradient(135deg, rgba(124, 58, 237, .5), rgba(22, 199, 132, .35)); border: 1px solid var(--line2); color: var(--text);
}

/* how it works: photo beside steps */
.split { display: grid; gap: 40px; grid-template-columns: 1.05fr 1fr; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.photo { position: relative; border-radius: 18px; overflow: hidden; border: 1px solid var(--line2); box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 40px rgba(124, 58, 237, .25); }
.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 40%, rgba(6, 5, 12, .7)); }
.photo figcaption { position: absolute; left: 16px; bottom: 14px; z-index: 1; font: 12px var(--mono); color: var(--muted); }
ol.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 14px; }
ol.steps li { counter-increment: s; position: relative; padding: 16px 18px 16px 64px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
ol.steps li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: 16px; top: 16px; font: 700 1rem var(--mono); color: var(--green);
  text-shadow: 0 0 12px rgba(52, 245, 160, .5);
}
ol.steps b { display: block; margin-bottom: 2px; }

/* tech band with the graded circuit photo */
.tech { background: linear-gradient(90deg, rgba(6, 5, 12, .94), rgba(6, 5, 12, .72)), url("media/circuit.webp") center / cover no-repeat; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* apps */
.apps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.app { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); }
.app b { font-size: 1rem; }
.app span { font-size: .85rem; color: var(--muted); }
.app.ready { border-color: rgba(52, 245, 160, .4); }
.app.later { opacity: .7; border-style: dashed; }
.tag { align-self: flex-start; font: 11px var(--mono); padding: 2px 8px; border-radius: 999px; margin-top: 6px; border: 1px solid var(--line2); color: var(--muted); }
.tag.ok { color: var(--green); border-color: rgba(52, 245, 160, .45); }

/* commands */
.cmd { position: relative; display: flex; align-items: stretch; border: 1px solid var(--line2); border-radius: 12px; background: #0a0814; overflow: hidden; margin: 10px 0 18px; }
.cmd pre { margin: 0; padding: 14px 16px; overflow-x: auto; flex: 1; min-width: 0; font-size: .9rem; color: #d8ffe9; white-space: pre; }
.cmd button { border: 0; border-left: 1px solid var(--line2); background: var(--panel2); color: var(--muted); padding: 0 16px; cursor: pointer; font: 600 .8rem var(--sans); }
.cmd button:hover { color: var(--text); }
.cmd button.done { color: var(--green); }
.os { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.os > div, .prose, .tablewrap { min-width: 0; }
@media (max-width: 420px) { .os { grid-template-columns: 1fr; } }
.os > .mine { order: -1; }
.os > .mine h3::after { content: " · your system"; color: var(--green); font: 12px var(--mono); }

/* page header for inner pages */
.pagehead { padding: 72px 0 40px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.pagehead.circuit { background: linear-gradient(180deg, rgba(6, 5, 12, .55), var(--bg)), url("media/circuit.webp") center / cover no-repeat; }
.pagehead.peak { background: linear-gradient(180deg, rgba(76, 29, 149, .45), var(--bg)), url("media/peak-poster.jpg") center 65% / cover no-repeat; }
.pagehead h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.pagehead p { max-width: 60ch; color: #d9d3f5; }
.toc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.toc a { font: 13px var(--mono); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(12, 9, 24, .7); color: var(--text); }
.prose { max-width: 820px; }
.prose h2 { margin-top: 1.8em; font-size: 1.5rem; }
.prose h3 { margin-top: 1.4em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose code { background: var(--panel2); padding: 1px 6px; border-radius: 6px; font-size: .9em; }
.note { border-left: 3px solid var(--green); background: rgba(52, 245, 160, .06); padding: 12px 16px; border-radius: 0 10px 10px 0; margin: 16px 0; }
.note.warn { border-color: var(--amber); background: rgba(251, 191, 36, .06); }

/* downloads */
table.files { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.files th, table.files td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.files th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel); }
.hash { font: 12px var(--mono); color: var(--muted); word-break: break-all; }

/* comparison table (alternatives page) */
table.compare { width: 100%; border-collapse: collapse; font-size: .92rem; min-width: 720px; }
table.compare th, table.compare td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.compare thead th { color: var(--muted); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
table.compare tbody th { color: var(--muted); font-weight: 600; width: 16%; }
table.compare .us { background: rgba(52, 245, 160, .06); }

/* changelog */
.release + .release { border-top: 1px solid var(--line); margin-top: 2.4em; }
.release h2 span { font-size: .9rem; margin-left: 10px; font-weight: 400; }

/* legal documents (rendered from the dashboard's copy) */
.legal h1 { font-size: clamp(1.8rem, 4vw, 2.4rem); }
.legal .meta { color: var(--muted); font-family: var(--mono); font-size: .85rem; }
.legal table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; margin: 1em 0; }
.legal th, .legal td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }

/* ad slots (Google AdSense): hidden until a publisher ID is set; height reserved so the page never jumps */
[hidden] { display: none !important; }
.adrow { padding-top: 8px; padding-bottom: 40px; }
.adrow:has(> .ad[hidden]) { display: none; }
.ad { max-width: 970px; margin: 0 auto; padding: 8px 12px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(12, 9, 24, .5); }
.ad-label { display: block; font: 10px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.ad ins { display: block; min-height: 90px; }
@media (max-width: 720px) { .ad ins { min-height: 250px; } }
.ad.preview ins { display: grid; place-items: center; border: 1px dashed var(--line2); border-radius: 8px; }
.ad.preview ins::after { content: "Ad space · responsive · 728×90 desktop, 300×250 phone"; font: 12px var(--mono); color: var(--dim); }

/* donate */
.give { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); margin: 8px 0 28px; }
.give .card { display: flex; flex-direction: column; gap: 6px; }
.give .card .btn { align-self: flex-start; margin-top: 10px; }
.give .fee { font: 12px var(--mono); color: var(--green); }

/* footer */
footer.site { border-top: 1px solid var(--line); padding: 40px 0 56px; color: var(--muted); font-size: .9rem; }
footer.site .wrap { display: grid; gap: 24px; grid-template-columns: 1.6fr 1fr 1fr 1fr; }
@media (max-width: 900px) { footer.site .wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { footer.site .wrap { grid-template-columns: 1fr; } }
footer.site b { color: var(--text); display: block; margin-bottom: 8px; }
footer.site ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
footer.site a { color: var(--muted); } footer.site a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero video { display: none; }
}