@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/fonts/public-sans-latin.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/instrument-sans-latin.woff2) format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 500 600; font-display: swap; src: url(/fonts/source-serif-4-latin.woff2) format("woff2"); }

:root {
  --green: #0e4a47;
  --green-deep: #0a3533;
  --ink: #15211f;
  --muted: #4f5e5b;
  --paper: #f6f7f5;
  --rule: #d6dcd8;
  --manila: #ead8a4;
  --manila-edge: #cdb779;
  --highlight: #f4dc63;
  --gold: #c8a45a;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Public Sans", system-ui, sans-serif;
  --measure: 34rem;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  font: 400 1rem/1.6 var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--green); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem .75rem; z-index: 10; }

/* Header */
.site-header {
  max-width: 80rem; margin: 0 auto; padding: 1.5rem 1.5rem 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--green); font: 600 1.4rem/1 "Instrument Sans", var(--sans); letter-spacing: -.03em; }
.brand-mark { width: 2.35rem; height: 1.35rem; margin-top: .1rem; }
.site-header nav { display: flex; gap: 1.5rem; }
.site-header nav a { color: var(--ink); text-decoration: none; font-size: .9rem; }
.site-header nav a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }

/* Hero */
.hero {
  max-width: 80rem; margin: 0 auto; padding: 3.5rem 1.5rem 4.5rem;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; align-items: start;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--green-deep); margin: 0; }
h1 { font-size: clamp(2.3rem, 3.9vw, 3.4rem); line-height: 1.08; letter-spacing: -.015em; max-width: 17ch; }
.lead { font-size: 1.125rem; line-height: 1.6; color: var(--muted); max-width: var(--measure); margin: 1.5rem 0 2rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.button {
  display: inline-block; padding: .75rem 1.25rem; border-radius: 8px; font-size: .95rem;
  background: var(--green); color: #fff; text-decoration: none; font-weight: 600;
}
.button:hover { background: var(--green-deep); }
.text-link { font-weight: 500; text-underline-offset: 4px; }
.launch { margin: 2.5rem 0 0; color: var(--muted); font-size: .95rem; }

/* Demo: story becomes a case summary */
.demo { margin: .5rem 0 0; }
.story {
  margin: 0; padding: 1.4rem 1.5rem; background: #fff; border: 1px solid var(--rule);
  border-radius: 14px 14px 14px 4px; font-size: .97rem; line-height: 1.7;
}
.story p { margin: 0; }
.story mark {
  color: inherit; padding: 0 .1em; border-radius: 2px;
  background: linear-gradient(to right, var(--highlight), var(--highlight)) no-repeat 0 85% / 100% 55%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.connector { display: block; width: 1.5rem; height: 2.5rem; margin: .5rem auto; color: var(--muted); }

.folder { position: relative; margin-top: 1.4rem; padding: 1.4rem 1.5rem 1.2rem; background: var(--manila); border: 1px solid var(--manila-edge); border-radius: 0 10px 10px 10px; }
.folder-tab {
  position: absolute; top: -1.9rem; left: -1px; margin: 0; padding: .35rem 1rem .5rem;
  background: var(--manila); border: 1px solid var(--manila-edge); border-bottom: 0; border-radius: 8px 8px 0 0;
  font: 600 .9rem var(--serif); color: var(--green-deep);
}
.folder dl { margin: 0; }
.folder dl > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid rgba(110, 90, 30, .2); }
.folder dt { font-size: .9rem; color: #6a5a2a; }
.folder dd { margin: 0; font-weight: 500; font-size: .95rem; }
.matched { margin: 1rem 0 0; font-size: .95rem; color: var(--green-deep); font-weight: 500; }
.demo figcaption { margin-top: .9rem; font-size: .85rem; color: var(--muted); }

@media (prefers-reduced-motion: no-preference) {
  .story mark { animation: mark .5s ease-out both; animation-delay: calc(.5s + var(--i) * .7s); }
  .folder dl > div, .matched { animation: fill .45s ease-out both; animation-delay: calc(.75s + var(--i) * .7s); }
  .js .demo:not(.play) mark, .js .demo:not(.play) .folder dl > div, .js .demo:not(.play) .matched { animation-play-state: paused; }
  @keyframes mark { from { background-size: 0% 55%; } to { background-size: 100% 55%; } }
  @keyframes fill { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

.s0 { --i: 0; } .s1 { --i: 1; } .s2 { --i: 2; } .s3 { --i: 3; } .s4 { --i: 4; } .s5 { --i: 5; } .s6 { --i: 6; }

/* Steps */
.steps { max-width: 80rem; margin: 0 auto; padding: 4rem 1.5rem; border-top: 1px solid var(--rule); }
.steps h2 { font-size: 2rem; }
.steps ol { list-style: none; counter-reset: step; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem; }
.steps li { counter-increment: step; }
.steps li::before { content: counter(step); display: block; font: 600 2.4rem/1 var(--serif); color: var(--gold); margin-bottom: 1rem; }
.steps h3 { font-size: 1.25rem; margin-bottom: .5rem; }
.steps p { margin: 0; color: var(--muted); }

/* For professionals */
.pros { background: var(--green); color: #e4efec; }
.pros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; padding: 4.5rem max(1.5rem, calc((100vw - 77rem) / 2)); }
.pros h2 { color: #fff; font-size: 2rem; margin-bottom: 1.25rem; }
.pros p { max-width: var(--measure); margin: 0 0 1rem; }
.pros h3 { color: #fff; font-size: 1.25rem; margin-bottom: 1rem; }
.pros ul { margin: 0; padding: 0; list-style: none; }
.pros li { padding: .8rem 0; border-top: 1px solid rgba(255, 255, 255, .18); }
.pros li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .18); }
.button-light { margin-top: 1rem; background: var(--gold); color: var(--green-deep); }
.button-light:hover { background: #d8b86e; }

/* About */
.about { max-width: 80rem; margin: 0 auto; padding: 4.5rem 1.5rem 4rem; }
.about h2 { font-size: 2rem; margin-bottom: 1.5rem; }
.about p { max-width: 40rem; margin: 0 0 1rem; }
.about .about-note { margin: 2rem 0; padding-left: 1.25rem; border-left: 3px solid var(--gold); font: 500 1.2rem/1.6 var(--serif); color: var(--green-deep); }
.about .contact { margin: 0; color: var(--muted); }

/* Note and footer */
.note { max-width: 80rem; margin: 0 auto; padding: 3.5rem 1.5rem; }
.note p { max-width: 44rem; margin: 0; font: 500 1.2rem/1.6 var(--serif); color: var(--green-deep); }
.site-footer {
  max-width: 80rem; margin: 0 auto; padding: 1.5rem 1.5rem 2.5rem; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; font-size: .9rem; color: var(--muted);
}
.site-footer p { margin: 0; }
.site-footer nav { display: flex; gap: 1.5rem; }

/* Early access */
.waitlist { max-width: 80rem; margin: 0 auto; padding: 4.5rem 1.5rem 5rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); gap: 4rem; align-items: start; }
.waitlist h1 { max-width: 12ch; }
.waitlist-card { background: #fff; border: 1px solid var(--rule); border-radius: 14px; padding: 2rem; }
.waitlist-form fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; }
.waitlist-form legend, .field-label { display: block; font-weight: 600; margin-bottom: .6rem; }
.choice { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; border: 1px solid var(--rule); border-radius: 8px; margin-bottom: .5rem; cursor: pointer; }
.choice:has(input:checked) { border-color: var(--green); background: #eef4f2; }
.choice input { accent-color: var(--green); width: 1.1rem; height: 1.1rem; margin: 0; }
.field { width: 100%; font: inherit; padding: .8rem .9rem; border: 1px solid #b9c3be; border-radius: 8px; background: #fff; color: var(--ink); }
.field:focus { outline: 3px solid var(--gold); outline-offset: 1px; border-color: var(--green); }
.has-error .field { border-color: #a3341f; }
.form-message { min-height: 1.5rem; margin: .5rem 0 1rem; font-size: .95rem; color: #a3341f; }
.waitlist-form .button { width: 100%; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.waitlist-form .button:disabled { opacity: .7; cursor: wait; }
.fine-print { margin: 1rem 0 0; font-size: .85rem; color: var(--muted); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.waitlist-done { text-align: left; }
.waitlist-done:focus { outline: none; }
.done-mark { width: 3rem; height: 3rem; margin-bottom: 1rem; }
.waitlist-done h1, .waitlist-done h2 { font-size: 1.8rem; margin-bottom: .75rem; max-width: none; }
.waitlist-done p { margin: 0 0 1.5rem; color: var(--muted); }
.waitlist-done strong { color: var(--ink); font-weight: 600; word-break: break-all; }
@media (prefers-reduced-motion: no-preference) {
  .waitlist-done:not([hidden]) .done-mark { animation: pop .35s ease-out both; }
  @keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* Privacy page */
.policy { max-width: 44rem; margin: 0 auto; padding: 3.5rem 1.5rem 4rem; }
.policy h1 { font-size: clamp(2rem, 4vw, 2.6rem); max-width: none; }
.policy h2 { font-size: 1.35rem; margin: 2.2rem 0 .6rem; }
.policy p, .policy li { color: var(--ink); }
.policy .updated { color: var(--muted); margin-top: .75rem; }

/* Smaller screens */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; gap: 3rem; padding-top: 3rem; }
  .steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pros, .waitlist { grid-template-columns: 1fr; gap: 2.5rem; }
}
@media (max-width: 560px) {
  body { font-size: 1rem; }
  .site-header nav a:first-child { display: none; }
  .hero { padding: 2.5rem 1rem 3.5rem; }
  .story, .folder { padding-left: 1.1rem; padding-right: 1.1rem; }
  .folder dl > div { grid-template-columns: 5.2rem 1fr; gap: .75rem; }
  .steps { padding: 3.5rem 1rem; }
  .steps ol { grid-template-columns: 1fr; gap: 2rem; }
  .pros { padding: 3.5rem 1rem; }
  .note { padding: 3rem 1rem; }
  .about { padding: 3.5rem 1rem 3rem; }
  .policy { padding: 2.5rem 1rem 3rem; }
  .waitlist { padding: 2.5rem 1rem 3.5rem; }
  .waitlist-card { padding: 1.5rem 1.25rem; }
  .site-header, .site-footer { padding-left: 1rem; padding-right: 1rem; }
}