/* Blue Decoy public site.
   Tokens are the export's oklch palette, unchanged. */

/* Self-hosted. No external font requests: the site ships a
   default-src 'self' CSP and a privacy vendor should not be
   calling Google on page load. */
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxKsv4Rn.woff2") format("woff2");
  font-weight: 500 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo Black";
  src: url("/assets/fonts/HTxqL289NzCGg4MzN6KJ7eW6CYyF_jzx13E.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Libre Franklin";
  src: url("/assets/fonts/jizDREVItHgc8qDIbSTKq4XkRiUf2zcZiVbJ.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/i7dPIFZifjKcF5UAWdDRYEF8RXi4EwQ.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("/assets/fonts/i7dMIFZifjKcF5UAWdDRaPpZUFWaHi6WZ3Q.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg-deep:      oklch(0.13 0.025 265);
  --bg:           oklch(0.16 0.03 265);
  --bg-alt:       oklch(0.14 0.026 265);
  --surface:      oklch(0.17 0.03 265);
  --border:       oklch(0.26 0.03 265);
  --border-bold:  oklch(0.28 0.03 265);

  --text:         oklch(0.95 0.01 250);
  --text-muted:   oklch(0.72 0.01 260);
  --text-dim:     oklch(0.6 0.02 260);

  --amber:        oklch(0.78 0.16 72);
  --amber-ink:    oklch(0.2 0.03 60);
  --blue:         oklch(0.72 0.17 235);
  --indigo:       oklch(0.62 0.2 255);
  --green:        oklch(0.72 0.14 150);

  --sans:  "Libre Franklin", system-ui, sans-serif;
  --display: "Archivo", system-ui, sans-serif;
  --black: "Archivo Black", "Archivo", system-ui, sans-serif;
  --mono:  "Space Mono", ui-monospace, monospace;

  --shell: 1200px;
  --gutter: 40px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}

a { color: var(--blue); text-decoration: none; }
a:hover { color: oklch(0.82 0.13 235); }
::selection { background: var(--amber); color: var(--amber-ink); }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.btn {
  display: inline-block;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 24px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.btn--primary { background: var(--amber); color: var(--amber-ink); }
.btn--ghost { border-color: oklch(0.4 0.03 265); color: oklch(0.9 0.01 260); }

/* Headings and section labels. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 20px;
}
h1 { font-family: var(--black); }
h3 { font-size: 20px; margin-bottom: 10px; }
p { line-height: 1.6; color: var(--text-muted); margin: 0 0 16px; }
strong { color: var(--text); }

.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 16px;
}

/* Header and nav. */
header {
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--gutter);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
}
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
}
.brand__blue  { color: var(--amber); }
.brand__decoy { color: var(--indigo); }
.nav__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a { color: var(--text-muted); font-weight: 500; }
.nav__links a:hover { color: var(--text); }

/* Hero. */
.hero { padding: 96px 0 64px; }
.hero h1 {
  font-size: clamp(46px, 6vw, 82px);
  margin-bottom: 24px;
}
.hero .lede {
  font-size: 20px;
  max-width: 640px;
  color: var(--text-muted);
}
.hero__cta {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 32px 0 24px;
}
.kicker {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text-dim);
  margin: 0;
}


/* Sections. */
main section { padding: 64px 0; border-top: 1px solid var(--border); }
/* Balanced wrapping so a long heading breaks into even lines rather than
   stranding its last word. Browsers without text-wrap: balance wrap as
   before. */
main section h2 { font-size: clamp(28px, 3.4vw, 40px); text-wrap: balance; }
#contact, #early-access { border-top: none; padding: 0; }

/* Capture list: a real <ul>, laid out as a responsive grid without a
   breakpoint doing the collapsing work. */
.capture__heading {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 40px 0 16px;
}
.capture-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
}
.capture-list li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  color: var(--text-muted);
  line-height: 1.5;
}
.proof-line {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 24px;
  margin-bottom: 0;
}
.proof-line em { font-style: normal; }

/* Deployment: two columns that collapse to one without a breakpoint. */
.deployment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
  margin: 32px 0;
}
.deployment-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
}
.section__cta { margin: 32px 0 0; }

/* Agents: closing product taxonomy. */
.taxonomy {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--text);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0 0;
}

/* The enterprise page's pointer to the product for individuals. */
.personal-pointer__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 24px 0 0;
}
.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid var(--border-bold);
  border-radius: 999px;
  padding: 6px 14px;
}

/* /personal: a calm, plain register. No eyebrow labels or movement
   headings, one continuous read separated by whitespace. */
.nav--simple { flex-wrap: wrap; row-gap: 12px; }
.nav__actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.copy {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.7;
}
/* Quiet signposts, not a dashboard: sentence case, body typeface, well
   under the homepage's large clamp() section headings. */
.section-heading {
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text);
  margin: 0 0 16px;
}
/* A list in a letter: default markers, no cards or borders. */
.copy-list {
  max-width: 640px;
  font-size: 18px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0 0 16px;
  padding-left: 22px;
}
.copy-list li { margin-bottom: 4px; }

/* Contact / early access: the site's one interactive path. */
.contact-section { padding: 64px var(--gutter) 96px; }
.contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 520px;
  margin-top: 32px;
}
.contact label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  color: var(--text-muted);
}
/* Enterprise register: clipped and technical, like the eyebrow labels. */
#contact .contact label {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.contact input,
.contact textarea {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
}
.contact input:focus,
.contact textarea:focus {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}
.contact textarea {
  min-height: 120px;
  resize: vertical;
}
.contact button { align-self: flex-start; }

/* Spam trap: CSS-hidden, never type="hidden". A hidden input type is a
   signal bots use to skip a field, which defeats the mechanism. */
.hp {
  position: absolute;
  left: -9999px;
  margin: 0;
}

/* Footer. */
footer { background: var(--bg-deep); border-top: 1px solid var(--border); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
  padding: 56px var(--gutter) 32px;
}
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}
.footer__heading {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 12px;
}
.footer__col ul { list-style: none; margin: 0; padding: 0; }
.footer__col li { margin-bottom: 8px; }
.footer__col a { color: var(--text-muted); }
.footer__col a:hover { color: var(--text); }
.footer__legal {
  padding: 0 var(--gutter) 32px;
  color: var(--text-dim);
  font-size: 13px;
}
.footer__legal p { color: inherit; margin: 0; }

@media (max-width: 900px) {
  :root { --gutter: 28px; }
  .hero h1 { font-size: clamp(40px, 9vw, 62px); }
  .nav__links { gap: 20px; }
}

@media (max-width: 600px) {
  :root { --gutter: 20px; }
  .nav { flex-wrap: wrap; row-gap: 14px; }
  .nav__links { order: 3; width: 100%; justify-content: space-between; }
  .hero h1 { font-size: clamp(34px, 11vw, 46px); }
  .hero__cta { display: flex; flex-direction: column; align-items: stretch; }
  .btn { text-align: center; }
}

/* Email capture. Short on purpose: one required field and a few optional
   ones, because every extra field is a reason to close the tab. Each page
   presets the product it is for, so there is nothing to tick. */
.field { display: block; margin-bottom: 20px; }

/* One line under each form, read at the moment the reader decides whether
   to type. The full statement is a page of its own; this is the promise. */
.form-note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 52ch;
}

/* The encrypted route sits under the form rather than beside it: it is for
   the minority with something sensitive, and should not compete with the
   one field everyone else needs. */
.encrypted {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 52ch;
}

/* /personal rhythm.
   Seven identical heading-plus-paragraph blocks in a narrow left column read
   as a list rather than a page, and left half the canvas empty seven times
   over. Three fixes, which compound: a two-column block that uses the width,
   grouping into movements so dividers mark ideas rather than paragraphs, and
   one statement set large so the eye has somewhere to land. */
.movement { border-top: 1px solid var(--border); padding: 72px 0; }

.block {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 48px;
  align-items: start;
}
.block + .block { margin-top: 56px; }
.block__body > :first-child { margin-top: 0; }
.block__body > :last-child { margin-bottom: 0; }

/* The heading column is narrow, so the heading sits smaller here than it
   would at full width and reads as a label for the passage beside it. */
.block .section-heading { margin: 0; font-size: 19px; line-height: 1.35; }

/* The page's one moment of emphasis, and the only section with no heading:
   the sentence is the heading. */
.movement--statement { text-align: left; }
.statement {
  margin: 0 0 20px;
  max-width: 18ch;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(30px, 4.4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
}
.statement__body { max-width: 58ch; }

@media (max-width: 800px) {
  .movement { padding: 52px 0; }
  .block { grid-template-columns: 1fr; gap: 14px; }
  .block + .block { margin-top: 40px; }
  .statement { max-width: none; }
}

/* /personal headline.
   Archivo Black is a single weight with no italic file, so nothing inside it
   can be emphasised: the browser would shear the glyphs into a fake oblique,
   which is ugly at 46px and up. Dropping to the variable face at 600 leaves
   room to push one word to 900, which is the emphasis the sentence needs.
   "else" is the whole hook: it means somebody besides you. */
.hero h1 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.hero h1 em {
  font-style: normal;
  font-weight: 900;
  color: var(--amber);
}

/* Controlled line breaks, not <br>. A hard break is right at desktop widths
   and wrong on a phone, where it strands two words on a line. These become
   inline below 700px and the headline wraps naturally again. */
.hero h1 .line { display: block; }
@media (max-width: 700px) {
  .hero h1 .line { display: inline; }
}

/* Colour carries the argument. Detect and Track are the sequence, so they
   take the brand blue; Disrupt is the payoff and keeps the amber, which is
   the accent used for every call to action on the site. Three amber words
   was legible but said everything is equally important, which is not the
   claim being made. /personal's single emphasis stays amber: one word alone
   is emphasis, not a scheme. */
.hero h1 em.step { color: var(--indigo); }