/* ============================================================================
   MagicYard — "The Marked-Up Proof"

   The product removes one specific indignity: seeing something wrong and
   having to write a ticket about it. So the visual language is the desk of
   someone correcting a printed page — proof marks, margin notes, the circled
   word, and the stamp that says it passed.

   ── The colour rule, and why ────────────────────────────────────────────────
   The visitor here is not the designer. It is the person who owns the
   repository, deciding whether to let an agent touch it. Their dominant
   emotion at the button is risk assessment, and this audience has one very
   strong learned association: red-orange means a failing check, a deleted
   line, a destructive-action button. Painting "Connect a repository" in it
   argues against the sentence next to it.

   So colour carries meaning here, and only meaning:

     paper / ink   persuasion and every primary action. Neutral, maximum
                   contrast, nothing to be afraid of. The confident button.
     --pen         the markup: the problem, the annotation, the thing being
                   pointed at, and the brand mark itself. Never on a control
                   that asks for trust.
     --seal        the resolution: merged, passing, live, "with MagicYard".
                   The one colour a developer reads as *this worked* without
                   being told.

   The comparison section is the test — squint at it and the story should
   still read: the old way in red pen, the new way stamped through.
   ========================================================================= */

:root {
  /* Ink. Warm-cast near-blacks — newsprint under a lamp, not a slate dashboard. */
  --ink-900: #0c0a09;
  --ink-850: #100e0c;
  --ink-800: #16130f;
  --ink-700: #1e1a15;
  --ink-600: #2a251e;
  --rule:    #332c23;

  /* Paper. Warm whites, never pure #fff — pure white on warm ink reads clinical. */
  --paper:     #f7f2e8;
  --paper-dim: #b9b0a1;
  --paper-mute:#8a8175;

  /* The pen. Marks the problem. Used sparingly — a proof mark that is
     everywhere marks nothing. 5.88:1 on ink, so it never carries body text. */
  --pen:       #ff4a1c;
  --pen-soft:  #ff764d;
  --pen-wash:  rgba(255, 74, 28, 0.12);

  /* The seal. Warm sage, deliberately yellow-shifted away from the cyan-green
     every database company already owns. 10.95:1 on ink — it can carry text. */
  --seal:      #9dcf7a;
  --seal-soft: #b9dfa0;
  --seal-wash: rgba(157, 207, 122, 0.12);

  --serif: "Instrument Serif", "Newsreader", Georgia, serif;
  --sans:  "Instrument Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Paper grain. Subtle enough to feel rather than see. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--pen); color: var(--ink-900); }

/* ------------------------------------------------------------ the scene --- */

/* Fixed, full-viewport, behind everything. The solid assembles as you scroll,
   so it has to persist across sections rather than live inside one. */
#scene {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  /* Not offset. The solid places itself in 3D — high and right while scattered,
     centred once it resolves — which a CSS translate cannot do per scroll
     position without fighting the scene's own composition. */
  opacity: 1;
}
@media (max-width: 940px) {
  /* On a phone the form would sit under the text and make it unreadable. It
     becomes atmosphere instead of subject. */
  #scene { translate: 0 0; opacity: 0.4; }
}

/* A vignette so type never has to compete with a bright vertex. Radial rather
   than a flat scrim — a flat one dims the whole scene to protect one corner. */
.scene-veil {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    /* Behind the headline. */
    radial-gradient(120% 90% at 12% 40%, var(--ink-900) 0%, color-mix(in oklab, var(--ink-900) 82%, transparent) 34%, transparent 62%),
    /* And behind the mockup — it is the hero's proof, and a vertex crossing it
       costs more than the vertex is worth. Softer than the headline's, so the
       form still reads through the corner around it. */
    radial-gradient(58% 46% at 74% 66%, color-mix(in oklab, var(--ink-900) 88%, transparent) 0%, transparent 70%),
    linear-gradient(to bottom, transparent 60%, var(--ink-900) 96%);
}

/* Everything readable rides above both. */
.nav, .wrap, footer, section, header { position: relative; z-index: 2; }

a { color: inherit; text-decoration: none; }

/* Neutral, not vermillion. A red ring around a field you are typing into reads
   as a validation error, which is the last thing an API-key input should say. */
:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 3px;
  border-radius: 2px;
}

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

h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; margin: 0; }

.display {
  font-size: clamp(2.75rem, 7.2vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.05; }
.h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; }

.lede {
  font-size: clamp(1.1rem, 1.7vw, 1.35rem);
  line-height: 1.55;
  color: var(--paper-dim);
  max-width: 46ch;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Demoted from vermillion. Five section labels in pen was five proof marks
     on pages that had nothing wrong with them. */
  color: var(--paper-mute);
}

.mono { font-family: var(--mono); font-size: 0.86em; }

em.pen { font-style: normal; color: var(--pen); }

/* ------------------------------------------------------------- skeleton --- */

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

section { position: relative; padding-block: clamp(5rem, 12vw, 9rem); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* --------------------------------------------------------------- navbar --- */

.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem;
  padding: 1rem var(--gutter);
  background: color-mix(in oklab, var(--ink-900) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.nav[data-scrolled="true"] { border-bottom-color: var(--rule); }

.brand { display: inline-flex; align-items: baseline; gap: 0.55rem; font-family: var(--serif); font-size: 1.3rem; }
.brand-mark {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--pen);
  box-shadow: 0 0 0 4px var(--pen-wash);
  translate: 0 -1px;
}

.nav-links { display: flex; gap: 1.75rem; align-items: center; }
/* :not(.btn) matters. `.nav-links a` outspecifies `.btn-primary`, so without it
   the nav's Get started renders paper-dim on paper — about 1.5:1, which is to
   say invisible. This rule was only ever meant for the plain nav links. */
.nav-links a:not(.btn) { font-size: 0.92rem; color: var(--paper-dim); transition: color 0.2s; }
.nav-links a:not(.btn):hover { color: var(--paper); }

@media (max-width: 720px) { .nav-links .hide-sm { display: none; } }

/* --------------------------------------------------------------- button --- */

.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--sans); font-size: 0.95rem; font-weight: 500;
  padding: 0.72rem 1.35rem;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s var(--ease), background 0.2s, border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

/* Paper on ink: 17.7:1, against 5.9:1 for the vermillion fill it replaces. The
   most important control on the page was also the hardest to read on it. */
.btn-primary { background: var(--paper); color: var(--ink-900); font-weight: 600; }
.btn-primary:hover { background: #fff; }

.btn-ghost { border-color: var(--rule); color: var(--paper); background: transparent; }
.btn-ghost:hover { border-color: var(--paper-mute); background: var(--ink-800); }

.btn-lg { padding: 0.95rem 1.75rem; font-size: 1.02rem; }

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

.hero { padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(3rem, 7vw, 5rem); }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  /* Centred, not bottom-aligned. `end` looked right in the abstract and put the
     mockup 660px down a 720px viewport — the one thing a visitor most needs to
     see was below the fold on a laptop. */
  align-items: center;
}
@media (max-width: 940px) { .hero-grid { grid-template-columns: 1fr; align-items: start; } }

/* The signature: a proof-circle that draws itself around one word. */
.circled { position: relative; display: inline-block; padding-inline: 0.12em; }
.circled svg {
  position: absolute; inset: -34% -14%;
  width: 128%; height: 168%;
  overflow: visible; pointer-events: none;
}
.circled path {
  fill: none; stroke: var(--pen); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: var(--len, 760); stroke-dashoffset: var(--len, 760);
  animation: draw 1.05s var(--ease) 0.75s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Margin note, as on a printed proof. */
.margin-note {
  position: relative;
  font-family: var(--mono); font-size: 0.78rem; line-height: 1.5;
  color: var(--pen);
  padding-left: 1.1rem;
  margin-top: 1.4rem;
  opacity: 0;
  animation: fade-up 0.7s var(--ease) 1.7s forwards;
}
.margin-note::before {
  content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em;
  width: 2px; background: var(--pen);
}

@keyframes fade-up { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

.hero h1 { margin-bottom: 1.6rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.25rem; }

.hero-meta {
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem;
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 0.74rem; color: var(--paper-mute);
}
.hero-meta b { color: var(--paper); font-weight: 500; }

/* ------------------------------------------------------- browser mockup --- */

.frame {
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--ink-850);
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.85), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.frame-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-bottom: 1px solid var(--rule);
  background: var(--ink-800);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-600); }
.frame-url {
  flex: 1; margin-left: 0.5rem;
  font-family: var(--mono); font-size: 0.68rem; color: var(--paper-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.frame-body { padding: 1.6rem 1.4rem 2.6rem; position: relative; min-height: 260px; }

/* The fake page inside the mockup */
.mock-h { font-family: var(--serif); font-size: 1.6rem; margin-bottom: 0.4rem; }
.mock-p { color: var(--paper-mute); font-size: 0.86rem; max-width: 34ch; }
.mock-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; margin-top: 1.4rem; }
.mock-card { border: 1px solid var(--rule); border-radius: 3px; padding: 0.75rem 0.6rem; }
.mock-card b { display: block; font-size: 0.78rem; }
.mock-card span { font-family: var(--mono); font-size: 0.68rem; color: var(--paper-mute); }
.mock-card.targeted { border-color: var(--pen); box-shadow: 0 0 0 3px var(--pen-wash); }

/* The floating toolbar, as OpenMagic renders it */
.toolbar {
  position: absolute; left: 1.4rem; right: 1.4rem; bottom: 1rem;
  background: #17151b; border: 1px solid #2b2833; border-radius: 8px;
  padding: 0.5rem 0.6rem;
  display: flex; align-items: center; gap: 0.5rem;
  box-shadow: 0 18px 40px -12px rgba(0,0,0,0.8);
}
.toolbar-badge { font-size: 0.7rem; font-weight: 600; color: #c9b8ff; white-space: nowrap; }
.toolbar-input {
  flex: 1; font-family: var(--sans); font-size: 0.74rem;
  color: var(--paper-mute);
  border: 1px solid #2b2833; border-radius: 5px;
  padding: 0.34rem 0.55rem;
  overflow: hidden; white-space: nowrap;
}
.toolbar-send { width: 22px; height: 22px; border-radius: 5px; background: var(--pen); flex: none; }

.caret { display: inline-block; width: 1px; height: 0.95em; background: var(--pen); translate: 0 2px; animation: blink 1.05s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* -------------------------------------------------------------- the gap --- */

.gap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: 3rem; }
@media (max-width: 860px) { .gap-grid { grid-template-columns: 1fr; } }

.column-label {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-mute); padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule); margin-bottom: 1.3rem;
}
/* This pair is the whole colour argument in two lines. Before, "With MagicYard"
   was vermillion and "Today" was grey — the outcome we are selling wore the
   colour of a failing check, and the problem wore nothing at all. */
.column-label.now { color: var(--pen); }
.column-label.after { color: var(--seal); }

.step-list { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.step-list li {
  counter-increment: s;
  display: grid; grid-template-columns: 1.9rem 1fr; gap: 0.9rem;
  padding: 0.72rem 0;
  font-size: 0.95rem;
  border-bottom: 1px dashed color-mix(in oklab, var(--rule) 70%, transparent);
}
.step-list li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: 0.7rem; color: var(--paper-mute); padding-top: 0.28em;
}
.step-list.after li::before { color: var(--seal); }
/* The waiting is the product's actual subject, so the pen marks it. */
.step-list .wait { color: var(--pen-soft); font-style: italic; }

.tally {
  margin-top: 1.4rem; font-family: var(--mono); font-size: 0.76rem; color: var(--paper-mute);
}
.tally b { color: var(--paper); }
.tally.win b { color: var(--seal); }

/* ----------------------------------------------------------------- how --- */

.how { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); margin-top: 3.2rem; }
@media (max-width: 860px) { .how { grid-template-columns: 1fr; } }

.how-card { border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.how-num { font-family: var(--mono); font-size: 0.72rem; color: var(--paper-mute); margin-bottom: 0.9rem; }
.how-card h3 { margin-bottom: 0.55rem; }
.how-card p { color: var(--paper-dim); font-size: 0.95rem; margin: 0; }

/* --------------------------------------------------------------- audience */

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 3rem; }
@media (max-width: 860px) { .two-up { grid-template-columns: 1fr; } }
.two-up > div { background: var(--ink-900); padding: clamp(1.5rem, 3vw, 2.4rem); }
.two-up h3 { margin-bottom: 0.75rem; }
.two-up p { color: var(--paper-dim); font-size: 0.95rem; }
.two-up ul { list-style: none; padding: 0; margin: 1.2rem 0 0; font-size: 0.9rem; }
.two-up li { padding: 0.4rem 0 0.4rem 1.3rem; position: relative; color: var(--paper-dim); }
.two-up li::before { content: "→"; position: absolute; left: 0; color: var(--paper-mute); font-size: 0.85em; }
/* The owner's column is four safety guarantees — the most trust-critical copy
   on the page. Those get the seal; her capabilities stay neutral. */
.two-up .assure li::before { content: "✓"; color: var(--seal); }

/* ------------------------------------------------------------------- cta --- */

.cta { text-align: center; }
.cta .display { max-width: 16ch; margin-inline: auto; }
.cta .lede { margin-inline: auto; margin-top: 1.4rem; }
.cta-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.4rem; }

/* ---------------------------------------------------------------- footer --- */

footer { border-top: 1px solid var(--rule); padding-block: 3rem; }
.foot-grid { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; align-items: baseline; }
.foot-note { font-family: var(--mono); font-size: 0.72rem; color: var(--paper-mute); max-width: 52ch; }

/* -------------------------------------------------------------- reveal --- */

[data-reveal] { opacity: 0; translate: 0 18px; transition: opacity 0.7s var(--ease), translate 0.7s var(--ease); }
[data-reveal].shown { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; translate: none; }
  .circled path { stroke-dashoffset: 0; }
  .margin-note { opacity: 1; }
}