/* Ol-ga — public site
   ------------------------------------------------------------------
   Identity is taken from the mark: monoline geometric, built on a
   circle. The page is ink and paper. The only two colours are the
   product's own signals, and they keep their locked meanings:
     amber #F2A93B  verification / outcome  — marker use only on light
     green #16A34A  live / match            — ink ground only
   Nothing else on this site is allowed to be coloured.
   ------------------------------------------------------------------ */

:root {
  /* ink & paper */
  --fg:        #14110F;
  --fg-2:      #45403A;
  --fg-3:      #6E665E;
  --bg:        #F4F1EC;
  --bg-2:      #EFEBE4;
  --surface:   #FAF8F4;
  --field:     #FFFFFF;
  --line:      #E3DDD4;
  --line-soft: #EDE8E0;

  /* locked product signals */
  --amber:     #F2A93B;
  --green:     #16A34A;

  /* controls */
  --btn-bg:    #14110F;
  --btn-fg:    #F4F1EC;
  --btn-bg-h:  #241F1A;
  --ring:      rgba(20, 17, 15, .10);

  --display: "Outfit", "Century Gothic", system-ui, sans-serif;
  --body:    "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter:  clamp(20px, 5vw, 68px);
  --maxw:    1160px;
  --measure: 62ch;
  --section: clamp(64px, 9vw, 132px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fg:        #F1EDE7;
    --fg-2:      #B4ABA1;
    --fg-3:      #9A9188;
    --bg:        #14110F;
    --bg-2:      #1A1613;
    --surface:   #1D1916;
    --field:     #1F1A16;
    --line:      #332C26;
    --line-soft: #272119;
    --btn-bg:    #F1EDE7;
    --btn-fg:    #14110F;
    --btn-bg-h:  #FFFFFF;
    --ring:      rgba(241, 237, 231, .12);
    --ink-panel: #1F1A16;
    --ink-panel-line: #332C26;
  }
}

:root[data-theme="dark"] {
  --fg:        #F1EDE7;
  --fg-2:      #B4ABA1;
  --fg-3:      #9A9188;
  --bg:        #14110F;
  --bg-2:      #1A1613;
  --surface:   #1D1916;
  --field:     #1F1A16;
  --line:      #332C26;
  --line-soft: #272119;
  --btn-bg:    #F1EDE7;
  --btn-fg:    #14110F;
  --btn-bg-h:  #FFFFFF;
  --ring:      rgba(241, 237, 231, .12);
  --ink-panel: #1F1A16;
  --ink-panel-line: #332C26;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[id] { scroll-margin-top: 24px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
::selection { background: var(--fg); color: var(--bg); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }

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

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.band { border-top: 1px solid var(--line); }
.band-quiet { background: var(--bg-2); }
.section { padding-block: var(--section); }

.stack { display: flex; flex-direction: column; }
.stack-sm { gap: 14px; }
.stack-md { gap: 22px; }
.stack-lg { gap: clamp(32px, 5vw, 56px); }

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -.03em;
  text-wrap: balance;
  margin: 0;
  color: var(--fg);
}
h1 { font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.02; letter-spacing: -.038em; }
h2 { font-size: clamp(1.68rem, 3.4vw, 2.4rem); line-height: 1.08; }
h3 { font-size: 1.18rem; line-height: 1.28; letter-spacing: -.02em; }

p { margin: 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1.5px solid var(--fg);
  background: radial-gradient(circle at center, var(--fg) 0 2.2px, transparent 2.4px);
}

.lede {
  font-size: clamp(1.06rem, 1.7vw, 1.25rem);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 46ch;
}
.body { color: var(--fg-2); max-width: var(--measure); }
.small { font-size: 14px; color: var(--fg-3); }

.pull {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  line-height: 1.2;
  letter-spacing: -.028em;
  max-width: 20ch;
  color: var(--fg);
}

/* ---------- wordmark ---------- */

.wordmark {
  display: block;
  width: 92px;
  aspect-ratio: 2164 / 951;
  background: currentColor;
  color: var(--fg);
  -webkit-mask: url("wordmark.svg") no-repeat center / contain;
          mask: url("wordmark.svg") no-repeat center / contain;
  text-decoration: none;
}
.wordmark span {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.footer .wordmark { width: 104px; }

/* ---------- header ---------- */

.masthead { border-bottom: 1px solid var(--line); background: var(--bg); }
.masthead-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 18px;
  flex-wrap: wrap;
}
.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.6vw, 28px);
  font-size: 14.5px;
  font-weight: 500;
  flex-wrap: wrap;
}
.nav a { text-decoration: none; color: var(--fg-2); padding-block: 9px; }
.nav a:hover { color: var(--fg); }
.nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -1px 0 var(--fg); }

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

.hero { position: relative; overflow: hidden; padding-block: clamp(60px, 10vw, 128px) clamp(48px, 7vw, 96px); }
.hero-grid { position: relative; display: grid; gap: clamp(24px, 3.4vw, 36px); max-width: 720px; }
.hero h1 { max-width: 15ch; }

.ring-field {
  position: absolute;
  right: clamp(-320px, -18vw, -140px);
  top: 50%;
  translate: 0 -50%;
  width: clamp(420px, 46vw, 660px);
  aspect-ratio: 1;
  max-width: 100%;
  pointer-events: none;
  color: var(--fg);
}
.ring-field circle { transform-origin: 100px 100px; }
.ring-field .r { animation: ring-in 900ms cubic-bezier(.2, .7, .2, 1) both; }
.ring-field .r:nth-of-type(2) { animation-delay: 120ms; }
.ring-field .r:nth-of-type(3) { animation-delay: 240ms; }
.ring-field .r:nth-of-type(4) { animation-delay: 360ms; }
.ring-field .pt { animation: pt-in 500ms ease-out both; animation-delay: 620ms; }
.ring-field .pt-far { animation-delay: 980ms; }

@keyframes ring-in { from { scale: .93; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes pt-in   { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 1000px) {
  .ring-field { right: auto; left: 50%; translate: -50% -50%; width: min(780px, 122vw); opacity: .5; }
}
@media (max-width: 560px) {
  .ring-field { opacity: .42; }
}

/* ---------- buttons, fields ---------- */

.btn {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1;
  border: 1px solid var(--btn-bg);
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: 15px 26px;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  transition: background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.btn:hover { background: var(--btn-bg-h); border-color: var(--btn-bg-h); box-shadow: 0 0 0 4px var(--ring); }

.btn-ghost {
  background: transparent;
  color: var(--fg);
  border-color: var(--line);
}
.btn-ghost:hover { background: transparent; color: var(--fg); border-color: var(--fg); box-shadow: 0 0 0 4px var(--ring); }

.btn-sm { padding: 10px 18px; font-size: 14px; }

.link {
  display: inline-block;
  padding-block: 3px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: border-color .16s ease;
}
.link:hover { border-color: var(--fg); }

.form { display: grid; gap: 14px; max-width: 560px; container-type: inline-size; }
.form-row { display: grid; gap: 14px; }
/* Split on the width of the form itself, not the window — the form sits in a
   narrow column on tablets, where a two-up row would clip its placeholders. */
@container (min-width: 460px) {
  .form-row-2 { grid-template-columns: 1fr 1fr; }
}
@supports not (container-type: inline-size) {
  @media (min-width: 1020px) {
    .form-row-2 { grid-template-columns: 1fr 1fr; }
  }
}

/* the single-field hero form: flex, so it pairs up whenever there is room */
.form-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.form-inline .field { flex: 1 1 240px; min-width: 0; max-width: 330px; }
.form-inline .btn { flex: 0 0 auto; }
.form-inline .form-status,
.form-inline .form-note { flex: 1 1 100%; }

.field { display: grid; gap: 7px; position: relative; }
.field.is-select::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: 21px;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--fg-3);
  border-bottom: 1.5px solid var(--fg-3);
  rotate: 45deg;
  pointer-events: none;
}
.field label {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.field input,
.field select,
.field textarea {
  font-family: var(--body);
  font-size: 16px;
  color: var(--fg);
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 14px 20px;
  width: 100%;
  min-width: 0;
}
.field select { appearance: none; padding-right: 44px; background-image: none; }
.field textarea { min-height: 116px; resize: vertical; border-radius: 22px; }
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-3); opacity: .85; }
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--fg); box-shadow: 0 0 0 4px var(--ring); }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }

.form-note { font-size: 13px; color: var(--fg-3); max-width: 52ch; grid-column: 1 / -1; }

.form-status {
  grid-column: 1 / -1;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.55;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  color: var(--fg-2);
}
.form-status[data-state="ok"] { border-color: var(--amber); color: var(--fg); }
.form-status a { color: inherit; }

/* ---------- outcome list — amber marker, the one licensed use ---------- */

.outcomes { list-style: none; margin: 0; padding: 0; display: grid; }
.outcomes li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 16px;
  align-items: start;
  padding-block: 20px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--fg-2);
  max-width: 68ch;
}
.outcomes li:first-child { border-top: 1px solid var(--line-soft); }
.outcomes li::before { content: ""; margin-top: .66em; width: 22px; height: 3px; border-radius: 2px; background: var(--amber); }

/* ---------- ring list ---------- */

.rings { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rings li {
  display: grid;
  grid-template-columns: 15px 1fr;
  gap: 14px;
  align-items: start;
  color: var(--fg-2);
  max-width: 62ch;
}
.rings li::before {
  content: "";
  margin-top: .48em;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1.5px solid var(--fg);
}

/* ---------- the line we hold ---------- */

.nevers { list-style: none; margin: 0; padding: 0; display: grid; }
.nevers li { padding-block: 22px; border-top: 1px solid var(--line-soft); display: grid; gap: 6px; }
.nevers li:last-child { border-bottom: 1px solid var(--line-soft); }
.nevers b { font-family: var(--display); font-weight: 500; font-size: 1.05rem; letter-spacing: -.02em; color: var(--fg); }
.nevers span { color: var(--fg-3); font-size: 15px; max-width: 54ch; }

/* ---------- path cards ---------- */

.paths { display: grid; gap: clamp(16px, 2vw, 22px); }
@media (min-width: 820px) { .paths { grid-template-columns: 1fr 1fr; } }

.path {
  display: grid;
  gap: 14px;
  align-content: start;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: clamp(26px, 3.2vw, 38px);
  text-decoration: none;
  background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.path:hover { border-color: var(--fg); box-shadow: 0 0 0 4px var(--ring); }
.path .arrow { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg); }

/* ---------- steps ---------- */

.steps { display: grid; gap: clamp(20px, 2.6vw, 30px); }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.step .n { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }

/* ---------- columns ---------- */

.cols { display: grid; gap: clamp(28px, 3.6vw, 52px); }
@media (min-width: 860px) { .cols-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 920px) { .cols-2 { grid-template-columns: 1fr 1.1fr; } }
.col { display: grid; gap: 10px; align-content: start; }

/* ---------- live signal — green, ink ground only ---------- */

.ink-panel {
  background: var(--ink-panel, #14110F);
  border: 1px solid var(--ink-panel-line, transparent);
  color: #F1EDE7;
  border-radius: 30px;
  padding: clamp(26px, 4vw, 48px);
  display: grid;
  gap: 20px;
}
.ink-panel h2, .ink-panel h3 { color: #F1EDE7; }
.ink-panel .body, .ink-panel p { color: #B4ABA1; }
.ink-panel .eyebrow { color: #9A9188; }
.ink-panel .eyebrow::before { border-color: #F1EDE7; background: radial-gradient(circle at center, #F1EDE7 0 2.2px, transparent 2.4px); }
.ink-panel :focus-visible { outline-color: #F1EDE7; }

.live-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #B4ABA1;
}
.live-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

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

.footer { border-top: 1px solid var(--line); padding-block: 52px 0; }
.footer-in { display: grid; gap: 32px; padding-bottom: 44px; }
@media (min-width: 820px) { .footer-in { grid-template-columns: 1.5fr 1fr 1fr; } }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  align-items: baseline;
  justify-content: space-between;
  padding-block: 22px 40px;
  border-top: 1px solid var(--line-soft);
}
.footer-base p { font-size: 13px; color: var(--fg-3); }
.legal-links { display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 13px; }
.legal-links a { color: var(--fg-3); text-decoration: none; padding-block: 5px; }
.legal-links a:hover { color: var(--fg); }
.footer a { color: var(--fg-2); text-decoration: none; }
.footer a:hover { color: var(--fg); }
.footer .links { display: grid; gap: 4px; font-size: 15px; align-content: start; justify-items: start; }
.footer .links a { padding-block: 5px; }
.footer .label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.legal { font-size: 13.5px; color: var(--fg-3); max-width: 46ch; }

/* ---------- prose (privacy, terms, delete) ---------- */

.prose { max-width: 66ch; display: grid; gap: 20px; }
.prose h2 { font-size: 1.28rem; margin-top: 20px; }
.prose h3 { font-size: 1.02rem; margin-top: 8px; }
.prose p, .prose li { color: var(--fg-2); font-size: 16.5px; }
.prose ul, .prose ol { margin: 0; padding-left: 22px; display: grid; gap: 9px; }
.prose strong { color: var(--fg); font-weight: 600; }

/* ---------- conversion card ---------- */

.form.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: clamp(20px, 2.6vw, 28px);
  gap: 16px;
}
.form.card .form-note { margin-top: 2px; }
.card-label {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
  grid-column: 1 / -1;
}
.card-label::before {
  content: ""; flex: none;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--fg);
}
.form.card .btn { width: 100%; }
.form-inline.card .btn { width: auto; }
.form-inline .card-label { flex: 1 1 100%; }

/* validation — no new colour: the field goes ink, the message is ink */
.field-error {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  color: var(--fg);
  margin-top: 2px;
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"] {
  border-color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--fg);
}

/* ---------- founders ---------- */

.people { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 760px) { .people { grid-template-columns: 1fr 1fr; } }
.person { display: grid; gap: 18px; align-content: start; }
.person img {
  width: 100%;
  max-width: 320px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 24px;
  border: 1px solid var(--line);
  display: block;
}
.person .role {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--fg-3);
}

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

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }

/* ---------- misc ---------- */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 12px; top: 12px; z-index: 10;
  background: var(--fg); color: var(--bg);
  padding: 10px 16px; border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; }
  .ring-field .r, .ring-field .pt { animation: none; opacity: 1; scale: 1; }
  * { transition-duration: .01ms !important; }
}