:root {
  --ink: #112526;
  --ink-soft: #3a4c4d;
  --paper: #edf0e8;
  --line: #c8d0c6;
  --signal: #c9e93a;
  --muted: #789092;
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
main { overflow: hidden; }
.hero {
  position: relative;
  min-height: 59vh;
  padding: 2rem clamp(1.25rem, 6vw, 7rem) 4.5rem;
  color: #f4f6ef;
  background: var(--ink);
}
.topline, footer, .tool { display: flex; align-items: center; }
.topline { justify-content: space-between; gap: 1rem; position: relative; z-index: 1; }
.brand { color: inherit; font-size: .88rem; font-weight: 800; letter-spacing: .16em; text-decoration: none; }
.brand span { color: var(--signal); }
.status { color: #c9d1cb; display: inline-flex; gap: .55rem; align-items: center; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.status i { width: .55rem; height: .55rem; border-radius: 50%; background: var(--signal); }
.hero-copy { position: relative; z-index: 1; max-width: 48rem; margin-top: clamp(5rem, 15vh, 10rem); }
.eyebrow { margin: 0 0 1rem; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.hero .eyebrow { color: var(--signal); }
h1, h2 { margin: 0; font-weight: 500; letter-spacing: -.045em; text-wrap: balance; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(3.3rem, 8vw, 7rem); line-height: .93; }
.intro { max-width: 31rem; margin: 2rem 0 0; color: #c9d1cb; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55; }
.route-line { position: absolute; right: -4rem; bottom: 1.5rem; width: min(52vw, 50rem); height: 10rem; border-top: 1px solid rgba(201,233,58,.55); border-right: 1px solid rgba(201,233,58,.55); transform: skewY(-17deg); }
.route-line span { position: absolute; width: .55rem; height: .55rem; background: var(--signal); border-radius: 50%; }
.route-line span:nth-child(1) { left: 0; top: -.3rem; }
.route-line span:nth-child(2) { right: 0; top: -.3rem; }
.route-line span:nth-child(3) { right: -.3rem; bottom: -.3rem; }
.tools { padding: clamp(4rem, 8vw, 8rem) clamp(1.25rem, 6vw, 7rem); }
.section-heading { display: grid; grid-template-columns: minmax(7rem, .4fr) 1fr; gap: 2rem; max-width: 70rem; margin-bottom: 2rem; }
.section-heading .eyebrow { margin-top: .6rem; }
h2 { max-width: 43rem; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1; }
.tool-list { border-top: 1px solid var(--line); max-width: 70rem; }
.tool { min-height: 10.5rem; gap: clamp(1.2rem, 3vw, 3.2rem); padding: 1.6rem .15rem; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background .16s ease, padding .16s ease; }
a.tool:hover, a.tool:focus-visible { background: #dfe5d8; padding-inline: 1rem; outline: none; }
.tool-number { align-self: flex-start; padding-top: .25rem; color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: .76rem; }
.tool-content { display: grid; gap: .65rem; max-width: 44rem; }
.tool strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.55rem, 3vw, 2.35rem); font-weight: 500; letter-spacing: -.035em; }
.tool-content > span { color: var(--ink-soft); font-size: .98rem; line-height: 1.5; }
.arrow, .coming-label { margin-left: auto; }
.arrow { color: var(--ink); font-size: 1.8rem; transition: transform .16s ease; }
a.tool:hover .arrow { transform: translate(.2rem, -.2rem); }
em, .coming-label { color: #6f7c4a; font-family: "Avenir Next", Avenir, sans-serif; font-size: .65rem; font-style: normal; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; white-space: nowrap; }
.tool--coming { opacity: .72; }
.coming-label { color: var(--muted); font-family: ui-monospace, Consolas, monospace; font-size: .67rem; }
footer { justify-content: space-between; gap: 1rem; padding: 1.5rem clamp(1.25rem, 6vw, 7rem); background: #dce2d8; color: var(--ink-soft); font-size: .75rem; letter-spacing: .04em; }
footer span:first-child { color: var(--ink); font-weight: 800; letter-spacing: .12em; }
@media (max-width: 640px) {
  .hero { min-height: 33rem; padding-bottom: 3rem; }
  .status { font-size: .62rem; }
  .hero-copy { margin-top: 7rem; }
  .route-line { width: 72vw; bottom: 1rem; }
  .section-heading { display: block; }
  .tool { align-items: flex-start; min-height: auto; }
  .tool-number { flex: 0 0 1.7rem; }
  .arrow { align-self: center; }
  .coming-label { display: none; }
  footer { display: grid; line-height: 1.45; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }