/* Blukora.
 *
 * Hand-written, no framework, no build step. The site is a handful of pages
 * and the CDN build of Tailwind shipped a compiler to every visitor to do
 * work that belongs in a file like this one.
 *
 * Order: tokens, reset, type, layout, components, page-specific, responsive.
 */

/* --- tokens ------------------------------------------------------------- */

:root {
  --ink:    #020617;
  --panel:  rgba(15, 23, 42, 0.55);
  --raised: #0f172a;
  --line:   #1e293b;
  --line-2: #334155;

  --sky:    #38bdf8;
  --sky-lo: #0ea5e9;
  --mint:   #34d399;

  --paper:  #f8fafc;
  --text:   #cbd5e1;
  --dim:    #94a3b8;
  --faint:  #64748b;
  --ghost:  #475569;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "IBM Plex Mono", "Cascadia Mono", Menlo,
          Consolas, monospace;

  --wrap: 1200px;
  --gut: 1rem;
  --radius: 12px;
  --radius-lg: 18px;
}

/* --- reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* The reset above strips link affordance so nav items and buttons can be
   anchors. Inline links inside body copy need it back: without it an email
   address or a cross-reference is indistinguishable from the text around it. */
.rows p a, .prose a, .lede a, .policy a {
  color: var(--sky);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rows p a:hover, .prose a:hover, .lede a:hover, .policy a:hover { color: var(--paper); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 2px;
}

.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;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- type --------------------------------------------------------------- */

/* Personality from weight and tracking rather than a webfont: no third-party
   request, no layout shift while a face downloads. */
.display {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
  color: var(--paper);
}

h1.display { font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem); }
h2.display { font-size: clamp(1.7rem, 1.2rem + 2.1vw, 2.5rem); }

.lede {
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 34em;
  color: var(--text);
}

.prose { max-width: 38em; }

.label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dim);
}

.small { font-size: 0.9375rem; }
.tiny  { font-size: 0.75rem; }
.muted { color: var(--faint); }
.bright { color: var(--paper); }
.mono { font-family: var(--mono); }

/* --- layout ------------------------------------------------------------- */

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.section {
  padding-block: clamp(3.5rem, 2rem + 6vw, 5rem);
  border-bottom: 1px solid #0b1220;
}

.stack > * + * { margin-top: var(--s, 1rem); }

.cols {
  display: grid;
  gap: 1.5rem;
}

/* Grid and flex children default to min-width:auto and refuse to shrink below
   their longest unbreakable content, which pushes the layout wider than the
   viewport on small screens. Letting them shrink hands overflow back to the
   element that knows how to scroll. */
.cols > *, .row > *, .split > * { min-width: 0; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn--primary { background: var(--sky); color: #020617; }
.btn--primary:hover { background: #7dd3fc; }

.btn--ghost { border: 1px solid var(--line-2); color: var(--paper); }
.btn--ghost:hover { background: rgba(15, 23, 42, 0.6); }

.btn--off {
  border: 1px solid var(--line-2);
  color: var(--faint);
  cursor: default;
}

.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 1rem; height: 1rem; }

/* --- panels ------------------------------------------------------------- */

/* Hairline, no shadow, no hover lift. The terminal is the loud element and
   nothing else competes with it. */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.panel h3 { font-size: 1.125rem; font-weight: 600; color: var(--paper); }

.accent {
  background: rgba(56, 189, 248, 0.05);
  border: 1px solid rgba(56, 189, 248, 0.4);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* --- site chrome -------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(2, 6, 23, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #0b1220;
}

.site-head__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: 64px;
}

.brand { display: flex; align-items: center; gap: 0.625rem; flex-shrink: 0; }
.brand img { height: 36px; width: auto; }
.brand b { display: block; font-size: 0.875rem; color: var(--paper); line-height: 1.2; }
.brand span { display: block; font-size: 0.625rem; color: var(--dim); line-height: 1.2; }

.nav { display: flex; align-items: center; gap: 1.75rem; font-size: 0.8125rem; }
.nav a { color: var(--text); }
.nav a:hover { color: var(--sky); }

.nowrap { white-space: nowrap; }
.site-head__actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  height: 44px; width: 44px;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--paper);
}
.nav-toggle svg { width: 20px; height: 20px; }

.mobile-nav {
  display: none;
  border-top: 1px solid var(--line);
  background: var(--ink);
}
.mobile-nav.open { display: block; }
.mobile-nav nav { padding: 1rem 1.5rem; }
.mobile-nav a { display: block; padding: 0.5rem 0; color: var(--text); }
.mobile-nav a:hover { color: var(--sky); }
.mobile-nav .cta { margin-top: 0.5rem; font-weight: 600; color: var(--sky); }

.site-foot { padding-block: 3rem; }
.site-foot__ends {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #0b1220;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.sep { display: flex; flex-wrap: wrap; align-items: center; font-size: 0.875rem; color: var(--dim); }
.sep > * + *::before {
  content: "";
  display: inline-block;
  width: 1px; height: 10px;
  margin: 0 0.85rem -1px;
  background: var(--line);
}
.sep a:hover { color: var(--sky); }

/* --- hero --------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 2rem + 5vw, 6rem);
  border-bottom: 1px solid #0b1220;
  background:
    radial-gradient(circle at 12% 0%, rgba(56, 189, 248, 0.14), transparent 52%),
    radial-gradient(circle at 100% 100%, rgba(15, 23, 42, 0.96), var(--ink));
}

.checks { display: grid; gap: 0.75rem; max-width: 38em; }
.checks li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.9375rem; }
.checks svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--mint); }

/* --- terminal ----------------------------------------------------------- */

.terminal {
  background: #01030a;
  border: 1px solid rgba(56, 189, 248, 0.38);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.07),
              0 32px 70px -28px rgba(56, 189, 248, 0.3);
}

.terminal__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgba(30, 41, 59, 0.8);
}
.terminal__bar i {
  width: 10px; height: 10px;
  border-radius: 999px;
  background: #334155;
}
.terminal__bar span {
  margin-left: 0.5rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--faint);
}
.terminal pre {
  margin: 0;
  padding: 1.25rem;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.85;
  color: var(--text);
}
.terminal .c { color: var(--faint); }
.terminal .was { color: var(--dim); }
.terminal .now { color: var(--sky); }
.terminal .ok { color: var(--mint); }

/* --- the boundary ------------------------------------------------------- */

/* The security story is one idea: there is a line, and what is yours stays on
   your side of it. Four cards said that four times and said it weakly. One
   rule says it once. The rule is the boundary, so it is the only structural
   device here, and the weight of the type carries which side matters. */

.boundary {
  display: grid;
  gap: 2.5rem;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.boundary__side { min-width: 0; }

.boundary__side h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--faint);
  margin-bottom: 1.25rem;
}

.boundary__side--ours li {
  font-size: 1.0625rem;
  color: var(--dim);
  padding: 0.3rem 0;
}

.boundary__side--yours h3 { color: var(--mint); }
.boundary__side--yours li {
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--paper);
  padding: 0.18rem 0;
}

.boundary__note {
  margin-top: 0.9rem;
  font-size: 0.875rem;
  color: var(--faint);
  max-width: 30em;
}

.facts {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2rem;
}
.facts h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--faint);
  margin-bottom: 0.75rem;
}
.facts p, .facts li { font-size: 0.9375rem; color: var(--text); }
.facts li + li { margin-top: 0.3rem; }

/* --- forms -------------------------------------------------------------- */

.field {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.65rem 0.75rem;
  background: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  color: var(--paper);
}
.field:focus { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--sky); }
.field--mono { font-family: var(--mono); }
textarea.field { resize: vertical; }

.fieldset { display: block; margin-top: 1.25rem; }
.fieldset > span, .fieldset > legend { display: block; font-size: 0.9375rem; color: #e2e8f0; }
.fieldset .hint { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--faint); }

.req::after { content: " *"; color: var(--sky); }

.seg {
  display: flex;
  margin-top: 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
}
.seg button {
  flex: 1 1 0;
  min-height: 44px;
  padding: 0.65rem 0.25rem;
  background: var(--ink);
  color: var(--text);
  font-size: 0.9375rem;
}
.seg button[aria-pressed="true"] {
  background: var(--sky);
  color: #020617;
  font-weight: 600;
}

.check-row { display: flex; gap: 0.75rem; align-items: flex-start; margin-top: 1.25rem; }
.check-row input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }
.check-row b { display: block; font-size: 0.9375rem; font-weight: 400; color: #e2e8f0; }
.check-row span { display: block; font-size: 0.875rem; color: var(--dim); }

/* --- readouts ----------------------------------------------------------- */

.readout { display: grid; gap: 1rem; margin-top: 1.5rem; }
.readout > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.readout dt { font-size: 0.9375rem; color: var(--text); }
.readout dt small { display: block; font-size: 0.75rem; color: var(--faint); }
.readout dd { margin: 0; font-family: var(--mono); font-size: 1.125rem; color: var(--paper); }
.readout .total { padding-top: 1rem; border-top: 1px solid var(--line); }
.readout .total dt { font-weight: 500; color: #f1f5f9; }
.readout .total dd { font-size: 1.5rem; font-weight: 600; color: var(--sky); }
.readout .total--plain dd { color: var(--paper); }

/* --- notices ------------------------------------------------------------ */

.notice {
  margin-top: 1rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  font-size: 0.875rem;
}
.notice--bad { background: rgba(244, 63, 94, 0.08); border: 1px solid rgba(244, 63, 94, 0.35); color: #fda4af; }
.notice--ok  { background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.35); color: #6ee7b7; }
.hidden { display: none !important; }

/* --- responsive --------------------------------------------------------- */

@media (min-width: 640px) {
  :root { --gut: 1.5rem; }
}

@media (min-width: 768px) {
  .cols--3 { grid-template-columns: repeat(3, 1fr); }
  .cols--2 { grid-template-columns: repeat(2, 1fr); }
  .facts { grid-template-columns: repeat(2, 1fr); gap: 3rem; }
}

@media (min-width: 900px) {
  /* The rule between the two sides is the boundary itself, so it only exists
     once there are two sides to divide. */
  .boundary {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 0;
  }
  .boundary__side--ours { padding-right: 3rem; }
  .boundary__side--yours {
    padding-left: 3rem;
    border-left: 1px solid var(--line-2);
  }
}

@media (min-width: 1024px) {
  :root { --gut: 2rem; }
  .mobile-nav, .mobile-nav.open { display: none; }
  .split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 2.5rem;
    align-items: center;
  }
  .split--6 > * { grid-column: span 6; }
  .split__7 { grid-column: span 7; }
  .split__5 { grid-column: span 5; }
  .order-1 { order: 1; }
  .order-2 { order: 2; }
  .calc-grid { grid-template-columns: repeat(2, 1fr); }
  .order-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; }
  .order-grid aside { position: sticky; top: 1.5rem; }
  .nav-desktop { display: flex; }
}

@media (max-width: 1023px) {
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .split--6 > * , .split__7, .split__5 { grid-column: auto; }
}

@media (max-width: 639px) {
  .site-head__actions { display: none; }
}

/* --- section wayfinding ------------------------------------------------- */

/* A number and a name at the head of each section. The page is a sequence of
   arguments and the reader is somewhere in it; this says where. Numbered
   because it is genuinely ordered, not for decoration. */
.eyebrow {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-bottom: 0.9rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.eyebrow b { color: var(--sky); font-weight: 500; }

/* --- label / content rows ----------------------------------------------- */

/* Three facts are not three products. A row with a hairline between reads as
   a list of points; three identical cards read as a pricing table and make
   the eye compare things that are not alternatives. */
.rows { border-top: 1px solid var(--line); }
.rows > div {
  display: grid;
  gap: 0.5rem 2.5rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}
.rows h3 {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sky);
  padding-top: 0.35rem;
}
.rows p { font-size: 1.0625rem; color: #e2e8f0; max-width: 46em; }
.rows .src { margin-top: 0.6rem; font-size: 0.75rem; color: var(--faint); }

@media (min-width: 768px) {
  .rows > div { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
}

/* --- choice cells ------------------------------------------------------- */

/* The number is the thing being chosen, so the number is what is big. */
.cells {
  display: flex;
  margin-top: 0.6rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow: hidden;
}
.cells button {
  position: relative;
  flex: 1 1 0;
  min-height: 72px;
  padding: 0.75rem 0.5rem;
  background: transparent;
  color: var(--dim);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.cells button + button { border-left: 1px solid var(--line-2); }
.cells button small {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.cells button:hover { background: rgba(56, 189, 248, 0.06); color: var(--paper); }
.cells button[aria-pressed="true"] {
  background: var(--sky);
  color: #020617;
}
.cells button[aria-pressed="true"] small { color: rgba(2, 6, 23, 0.65); }

/* --- the live drawing --------------------------------------------------- */

/* The configuration, drawn. A number in a form is a claim; a picture that
   changes when you change the number is the thing itself. */
.diagram {
  background: #01030a;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  min-height: 260px;
}
.diagram svg { width: 100%; height: auto; flex: 1 1 auto; }
.diagram figcaption {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}
.diagram figcaption b { color: var(--paper); font-weight: 500; }