/* ==========================================================================
   GradusIQ — pitch / landing page
   Editorial, transcript-inspired. Hairline rules, no rounded corners,
   two accents: gold (labels, codes, marks) and coral (primary action).
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  --paper:     #F7F7F4;
  --paper-2:   #EFEEE8;
  --ink:       #14171F;
  --navy:      #1B2A4A;
  /* Gold is split by job. --gold is the vibrant mark colour, used only for
     shapes and rules where no contrast minimum applies. Any gold that is
     actually read — eyebrows, course codes, role labels — uses --gold-text,
     which clears 4.5:1 on paper, paper-2, and the white transcript rows.
     (#8A6A12 passes on paper at 4.71:1 but only reaches 4.35:1 on paper-2,
     where the Architecture and Roadmap eyebrows sit; this is two steps
     deeper so every surface passes.) */
  --gold:      #D9A62B;
  --gold-text: #82640F;
  --gold-soft: #F5DFA0;
  --coral:     #E1523F;
  /* Button fill only. #E1523F behind --paper text lands at 3.6:1, under the
     4.5:1 floor for 15px text; this darker step reads as the same coral and
     clears it at 4.6:1. --coral itself stays for the cursor and hairline marks,
     where contrast minimums don't apply. */
  --coral-deep: #C94028;
  --coral-deeper: #AE3520;
  --rule:      #D8D6CC;
  --muted:     #5B5F6B;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --wrap: 1080px;
  --gut: 32px;
}

/* --- Reset ---------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { margin: 0; font-weight: 500; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: inherit; }

img { max-width: 100%; }

/* --- Focus / skip link ---------------------------------------------------- */

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--navy);
  color: var(--paper);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 12px;
  text-decoration: none;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --- Layout --------------------------------------------------------------- */

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

.section { padding: 104px 0; border-top: 1px solid var(--rule); }
.section-tight { padding-top: 88px; }
.section-alt { background: var(--paper-2); }

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

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 20px;
}

h1 {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6vw, 4.15rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: var(--navy);
  max-width: 15ch;
}
h1 em { font-style: italic; font-weight: 400; }

h2 {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  line-height: 1.16;
  color: var(--navy);
  max-width: 20ch;
}

h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}

/* --- Top bar -------------------------------------------------------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(247, 247, 244, 0.9);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--rule);
}

.topbar-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 62px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.13em;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.diamond {
  width: 7px;
  height: 7px;
  background: var(--gold);
  transform: rotate(45deg);
  flex: none;
}

.topnav {
  display: flex;
  gap: 26px;
  margin-left: auto;
}

.topnav a {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.topnav a:hover { color: var(--ink); border-bottom-color: var(--rule); }

.topbar-cta {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--navy);
  text-decoration: none;
  border: 1px solid var(--rule);
  padding: 7px 13px;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.topbar-cta:hover { border-color: var(--navy); background: #fff; }

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

.hero { padding: 108px 0 104px; }

/* Typewriter headline.
   All three phrases are stacked in a single grid cell — the ghosts are laid
   out but not painted, so the cell is always as tall as the tallest phrase at
   the current width. Nothing below the H1 moves as phrases cycle, including
   when a phrase wraps to an extra line on narrow screens. */
.typer { display: grid; }
.typer > * { grid-area: 1 / 1; }
.typer-ghost { visibility: hidden; }

.typer-cursor {
  display: none;
  width: 3px;
  height: 0.74em;
  margin-left: 0.07em;
  background: var(--coral);
  vertical-align: baseline;
  transform: translateY(0.04em);
}

/* The cursor only exists while JS is actually typing. */
.js-typing .typer-cursor {
  display: inline-block;
  animation: typer-blink 1.05s steps(1, end) infinite;
}

@keyframes typer-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .typer-cursor, .js-typing .typer-cursor { display: none; animation: none; }
}

.lede {
  margin-top: 26px;
  max-width: 58ch;
  font-size: 1.1875rem;
  line-height: 1.62;
  color: var(--muted);
}

.hero-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
  margin-top: 38px;
}

.btn {
  display: inline-block;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 13px 26px;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease;
}

.btn-primary {
  background: var(--coral-deep);
  color: var(--paper);
  border-color: var(--coral-deep);
}
.btn-primary:hover {
  background: var(--coral-deeper);
  border-color: var(--coral-deeper);
}

.pilot {
  font-size: 14px;
  color: var(--muted);
}
.check { color: var(--gold-text); font-weight: 700; margin-right: 4px; }

/* --- Transcript panel ----------------------------------------------------- */

.transcript {
  margin-top: 76px;
  background: #fff;
  border: 1px solid var(--rule);
}

.transcript-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.transcript-title {
  font-family: var(--serif);
  font-size: 1.0625rem;
  color: var(--navy);
}

.transcript-meta {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.transcript-row {
  display: grid;
  grid-template-columns: 108px 1fr 1.35fr auto;
  align-items: baseline;
  gap: 22px;
  padding: 20px 26px;
  border-bottom: 1px solid var(--rule);
}
.transcript-row:last-child { border-bottom: 0; }

.t-code {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--gold-text);
  white-space: nowrap;
}

.t-name { font-weight: 600; font-size: 15px; }

.t-desc { font-size: 14.5px; color: var(--muted); }

.t-status {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}

.run {
  display: inline-block;
  border: 1px solid var(--gold-soft);
  background: var(--gold-soft);
  color: #7A5F14;
  padding: 1px 6px;
  margin-right: 8px;
  letter-spacing: 0.08em;
}

/* --- Problem / solution --------------------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 52px;
  border: 1px solid var(--rule);
  background: #fff;
}

.card { padding: 34px 32px; }
.card + .card { border-left: 1px solid var(--rule); }
.card-accent { background: var(--paper); }

.card-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.card-accent .card-label { color: var(--gold-text); }

.card-body { font-size: 15.5px; color: var(--muted); line-height: 1.68; }

/* --- Features (2x2) ------------------------------------------------------- */

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 52px;
  border-top: 1px solid var(--rule);
}

.feature {
  padding: 34px 40px 36px 0;
  border-bottom: 1px solid var(--rule);
}
.feature:nth-child(even) { padding-left: 40px; border-left: 1px solid var(--rule); }

.feature h3 { margin-bottom: 10px; }

.feature p { font-size: 15.5px; color: var(--muted); line-height: 1.68; }

/* Scoped to out-specify `.feature p` above, which would otherwise win on
   font-size and color and flatten the code into body copy. */
.feature .f-code {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.65;
  color: var(--gold-text);
  margin-bottom: 10px;
}

/* --- Architecture --------------------------------------------------------- */

.note {
  max-width: 60ch;
  margin-top: 24px;
  padding-left: 18px;
  border-left: 2px solid var(--gold);
  font-size: 15.5px;
  color: var(--muted);
}

.arch { margin-top: 52px; border-top: 1px solid var(--rule); }

.arch li {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 20px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}

.arch .num {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--gold-text);
  padding-top: 3px;
}

.arch h3 { margin-bottom: 6px; }
.arch p { font-size: 15.5px; color: var(--muted); max-width: 62ch; }

.stack {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 34px;
}

.stack li {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 6px 11px;
}

/* --- Team ----------------------------------------------------------------- */

.team {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 52px;
  border-top: 1px solid var(--rule);
}

.member {
  padding: 30px 26px 30px 0;
  border-bottom: 1px solid var(--rule);
}
.member + .member { padding-left: 26px; border-left: 1px solid var(--rule); }

.member h3 { margin-bottom: 8px; }

.role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 12px;
}

.member p:last-child { font-size: 14.5px; color: var(--muted); line-height: 1.62; }

/* --- Roadmap -------------------------------------------------------------- */

.roadmap { margin-top: 52px; border-top: 1px solid var(--rule); }

.roadmap li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--rule);
}

.phase {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 4px 9px;
  align-self: start;
  justify-self: start;
  white-space: nowrap;
}
.phase-now { color: #7A5F14; border-color: var(--gold-soft); background: var(--gold-soft); }

.roadmap h3 { margin-bottom: 6px; }
.roadmap p { font-size: 15.5px; color: var(--muted); max-width: 62ch; }

/* --- Footer CTA ----------------------------------------------------------- */

.cta {
  padding: 104px 0;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.cta h2 { max-width: 24ch; margin: 0 auto; }

.cta p { margin-top: 20px; font-size: 1.0625rem; color: var(--muted); }
.cta p:last-child { margin-top: 34px; }

/* --- Footer --------------------------------------------------------------- */

.footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 26px 0;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--muted);
}

/* --- Reveal animation ----------------------------------------------------- */

/* Content is hidden only once JS has confirmed it can reveal it again —
   without scripting, .js-reveal is never set and everything renders normally. */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.6, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
  will-change: opacity, transform;
}
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .topnav { display: none; }
  .topbar-cta { margin-left: auto; }

  .team { grid-template-columns: 1fr 1fr; }
  .member { padding-right: 22px; }
  .member + .member { padding-left: 22px; border-left: 1px solid var(--rule); }
  .member:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 720px) {
  :root { --gut: 22px; }

  body { font-size: 16px; }

  .section, .hero, .cta { padding: 68px 0; }

  .hero { padding-top: 72px; }

  .transcript { margin-top: 52px; }

  .transcript-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 20px;
  }
  .t-status { text-align: left; }

  .transcript-head { padding: 16px 20px; }

  .two-col { grid-template-columns: 1fr; }
  .card + .card { border-left: 0; border-top: 1px solid var(--rule); }

  .features { grid-template-columns: 1fr; }
  .feature { padding: 28px 0; }
  .feature:nth-child(even) { padding-left: 0; border-left: 0; }

  .arch li { grid-template-columns: 1fr; gap: 8px; }
  .arch .num { padding-top: 0; }

  .team { grid-template-columns: 1fr; }
  .member { padding: 26px 0; }
  .member + .member { padding-left: 0; border-left: 0; }

  .roadmap li { grid-template-columns: 1fr; gap: 12px; }

  .footer-inner { flex-direction: column; gap: 6px; }
}