/*
  indggo.com — shared stylesheet

  Developed by Bill Dunning using an AI coding partner through interactive interrogation and direction. No code enters this file until it has been read, understood, and approved by the author; AI output is never committed unreviewed.
*/

/* ---------- Fonts (self-hosted; no third-party requests) ---------- */

@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-standard-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/assets/fonts/newsreader-latin-standard-italic.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens (from the Indggo main logo palette) ---------- */

:root {
  --navy: #334786;
  --indigo: #516399;
  --slate: #5E8694;
  --seal: #8266A1;
  --ink: #1F2945;
  --ink-soft: #4A5572;
  --muted: #69738D;
  --paper: #F5F7FA;
  --paper-deep: #E9EDF4;
  --rule: #D3DAE6;
  --white: #FFFFFF;

  --serif: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Public Sans", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --step-0: 1.125rem;   /* 18px body */
  --step-1: 1.375rem;   /* 22px */
  --step-2: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
  --step-3: clamp(2rem, 1.5rem + 2vw, 2.875rem);
  --step-4: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);

  --wrap: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --band: clamp(4rem, 9vw, 7.5rem);
  --radius: 6px;

  color-scheme: light;
}

/* ---------- Base ---------- */

*, *::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: var(--step-0);
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: var(--step-4); font-weight: 450; letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }

p { margin: 0 0 1.1em; text-wrap: pretty; }

a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--seal); }

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

.skip {
  position: absolute; left: 1rem; top: -3rem;
  background: var(--navy); color: var(--white); padding: 0.5rem 1rem; z-index: 10;
}
.skip:focus { top: 1rem; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 42rem; }

/* ---------- Header ---------- */

.site-header { border-bottom: 1px solid var(--rule); background: var(--paper); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.brand img { width: 112px; }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav a { font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.nav a:hover { color: var(--navy); text-decoration: underline; }
.nav a.nav-cta {
  color: var(--navy); border: 1.5px solid var(--navy);
  padding: 0.35rem 0.9rem; border-radius: var(--radius);
}
.nav a.nav-cta:hover { background: var(--navy); color: var(--white); text-decoration: none; }

/* ---------- Buttons ---------- */

.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.btn {
  display: inline-block; font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding: 0.8rem 1.4rem; border-radius: var(--radius); text-decoration: none;
  border: 1.5px solid transparent;
}
.btn-primary { background: var(--navy); color: var(--white); }
.btn-primary:hover { background: var(--seal); color: var(--white); }
.btn-quiet { color: var(--navy); border-color: var(--rule); background: var(--white); }
.btn-quiet:hover { border-color: var(--navy); color: var(--navy); }
.btn-inverse { background: var(--white); color: var(--navy); }
.btn-inverse:hover { background: var(--paper-deep); color: var(--navy); }

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

.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3.5rem, 8vw, 6.5rem); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.hero h1 { max-width: 18ch; }
.lede { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 34rem; }
.hero-seal { justify-self: center; width: min(100%, 26rem); }
#seal { width: 100%; height: auto; overflow: visible; }

/* ---------- Bands ---------- */

.band { padding: var(--band) 0; border-top: 1px solid var(--rule); }

.band-problem { background: var(--paper); }
.band-approach { background: var(--white); }
.band-extend { background: var(--white); }
.band-problem .emphasis {
  font-family: var(--serif); font-size: var(--step-2); line-height: 1.3;
  color: var(--ink); margin: 1.4em 0;
}
.band-problem .payoff { font-family: var(--serif); font-size: var(--step-1); color: var(--ink-soft); margin: 0; }
dfn { font-style: italic; color: var(--seal); }

.ladder { list-style: none; margin: 2.5rem 0 0; padding: 0; font-family: var(--serif); max-width: 40rem; }
.ladder li { font-size: var(--step-2); line-height: 1.25; padding: 0.9rem 0; border-top: 1px solid var(--rule); }
.ladder li.rejected { color: var(--muted); }
.ladder li.rejected span {
  text-decoration: line-through; text-decoration-color: var(--seal);
  text-decoration-thickness: 2px;
}
.ladder li.chosen { color: var(--navy); font-weight: 500; border-bottom: 1px solid var(--rule); }

.band-emp { background: var(--paper); }
.emp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.proofs { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.proofs li {
  font-family: var(--serif); font-size: var(--step-1); color: var(--ink);
  padding: 0.55rem 0 0.55rem 2rem; position: relative;
}
.proofs li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #9A82B8, var(--seal) 60%, #6A5288);
}
.capabilities { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.capabilities div { border-top: 2px solid var(--navy); padding: 1rem 0 1.75rem; }
.capabilities dt { font-weight: 650; color: var(--navy); margin-bottom: 0.35rem; line-height: 1.3; }
.capabilities dd { margin: 0; color: var(--ink-soft); font-size: 1rem; }

.extend-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.list-heading { font-family: var(--sans); font-size: 1rem; font-weight: 650; color: var(--ink-soft); margin-bottom: 0.75rem; }
.sessions { list-style: none; margin: 0; padding: 0; }
.sessions li {
  font-family: var(--serif); font-size: var(--step-2); color: var(--navy);
  padding: 0.6rem 0; border-top: 1px solid var(--rule);
}
.sessions li:last-child { border-bottom: 1px solid var(--rule); }

.band-partners { background: var(--navy); color: var(--white); border-top: 0; }
.partners-inner { max-width: 48rem; }
.band-partners h2 { color: var(--white); }
.band-partners p { font-size: var(--step-1); color: #DDE3F0; max-width: 36rem; }

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

.site-footer { background: var(--paper-deep); padding: 3rem 0 2.5rem; font-size: 0.95rem; color: var(--ink-soft); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 3rem; }
.footer-id img { width: 96px; margin-bottom: 1rem; }
.footer-id p { margin-bottom: 0.5rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer-links a { color: var(--ink-soft); }
.footer-links a:hover { color: var(--navy); }
.fine { grid-column: 1 / -1; font-size: 0.85rem; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 1.25rem; margin: 0; }

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

@media (max-width: 52rem) {
  .hero-grid, .emp-grid, .extend-grid { grid-template-columns: 1fr; }
  .hero-seal { order: -1; width: min(60%, 15rem); }
  .hero h1 { max-width: none; }
  .capabilities { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 36rem) {
  .header-inner { flex-direction: column; align-items: flex-start; }
  .nav { gap: 0.5rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Document pages (privacy, terms, support, docs) ---------- */

.page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--rule); }
.page-head h1 { font-size: var(--step-3); margin-bottom: 0.4em; }
.page-head .meta { color: var(--muted); font-size: 0.95rem; margin: 0; }
.page-head .intro { font-size: var(--step-1); line-height: 1.5; color: var(--ink-soft); max-width: 40rem; margin: 0.75rem 0 0; }

.doc { background: var(--white); padding: clamp(2rem, 5vw, 3.5rem) 0 var(--band); }
.doc-grid { display: grid; grid-template-columns: 14rem minmax(0, 42rem); gap: clamp(2rem, 5vw, 4rem); align-items: start; }

.toc { position: sticky; top: 1.5rem; font-size: 0.95rem; }
.toc h2 { font-family: var(--sans); font-size: 0.95rem; font-weight: 650; color: var(--ink-soft); margin-bottom: 0.6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--rule); }
.toc li a { display: block; padding: 0.3rem 0 0.3rem 0.9rem; color: var(--ink-soft); text-decoration: none; line-height: 1.35; }
.toc li a:hover { color: var(--navy); text-decoration: underline; }

.doc-body { font-size: 1.0625rem; }
.doc-body section { scroll-margin-top: 1.5rem; }
.doc-body section + section { margin-top: 2.75rem; }
.doc-body h2 { font-size: var(--step-2); margin-bottom: 0.5em; }
.doc-body h3 { font-family: var(--sans); font-size: 1.0625rem; font-weight: 650; color: var(--ink); margin: 1.6em 0 0.4em; }
.doc-body ul, .doc-body ol { padding-left: 1.3rem; margin: 0 0 1.1em; }
.doc-body li { margin-bottom: 0.45em; }
.doc-body li::marker { color: var(--indigo); }
.doc-body .steps li { padding-left: 0.3rem; }
.doc-body .callout { border-left: 3px solid var(--seal); background: var(--paper); padding: 1rem 1.25rem; margin: 0 0 1.25em; }
.doc-body .callout p:last-child { margin-bottom: 0; }

/* Tables in documentation pages (docs/zoom Troubleshooting). The wrapper scrolls
   sideways on narrow screens so the page itself never does. */
.doc-body { min-width: 0; } /* lets the grid column shrink so .table-scroll can scroll */
.table-scroll { overflow-x: auto; margin: 0 0 1.25em; }
.doc-body table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: 0.95em; }
.doc-body th, .doc-body td { text-align: left; vertical-align: top; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--rule); }
.doc-body thead th { font-family: var(--sans); font-weight: 650; color: var(--ink); border-bottom: 2px solid var(--navy); }
.doc-body strong { font-weight: 650; }

.contact-card { border-top: 2px solid var(--navy); padding-top: 1rem; margin-bottom: 1.5rem; }
.contact-card a { font-size: var(--step-1); font-weight: 600; }

.nav a[aria-current="page"] { color: var(--navy); text-decoration: underline; text-decoration-thickness: 2px; }

/* Draft placeholders. Every one carries the grep-able token TODO-CONFIRM.
   Pre-publish check: no page ships while any TODO-CONFIRM remains. */
mark.todo {
  background: #FFF1A8; color: #3A3000; padding: 0.1em 0.3em;
  outline: 1px dashed #B39200; border-radius: 2px;
  font-family: var(--sans); font-size: 0.95em;
}

@media (max-width: 52rem) {
  .doc-grid { grid-template-columns: 1fr; }
  .toc { position: static; }
}

/* ---------- Indggo Relay section ---------- */

.band-relay { background: var(--white); }
.relay-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.relay-copy { max-width: 38rem; }

.flow { list-style: none; counter-reset: flow; margin: 1.75rem 0; padding: 0; }
.flow li {
  counter-increment: flow; position: relative;
  padding: 0.85rem 0 0.85rem 2.75rem; border-top: 1px solid var(--rule);
}
.flow li:last-child { border-bottom: 1px solid var(--rule); }
.flow li::before {
  content: counter(flow); position: absolute; left: 0; top: 0.8rem;
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 1.05rem; color: var(--white); background: var(--navy);
}
.integrations { color: var(--ink-soft); }

/* Schematic of the Relay layout: an illustration, not a screenshot. */
.relay-figure { margin: 0; }
.rf-frame {
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 0.75rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px; padding: 0.75rem;
}
.rf-pane { background: var(--white); border: 1px solid var(--rule); border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 18rem; }
.rf-call { align-items: center; justify-content: center; border-top: 3px solid var(--navy); }
.rf-record { border-top: 3px solid var(--slate); }
.rf-dot { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--paper-deep); }
.rf-line { display: block; height: 0.55rem; border-radius: 3px; background: var(--paper-deep); }
.rf-line.strong { height: 0.75rem; background: #C9D1E0; }
.rf-call .rf-line { align-self: center; }
.w40 { width: 40%; } .w60 { width: 60%; } .w70 { width: 70%; }
.rf-keys { display: grid; grid-template-columns: repeat(3, 1.6rem); gap: 0.55rem; margin-top: 0.5rem; }
.rf-keys i { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--paper-deep); }
.rf-hang { width: 2rem; height: 2rem; border-radius: 50%; background: var(--seal); margin-top: 0.4rem; }
.rf-kv { display: flex; justify-content: space-between; gap: 1rem; }
.rf-kv i { width: 28%; height: 0.45rem; border-radius: 3px; background: var(--paper-deep); }
.rf-kv b { width: 42%; height: 0.45rem; border-radius: 3px; background: #D6DCE8; }
.rf-card { display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--rule); border-radius: 6px; padding: 0.7rem; margin-top: 0.3rem; }
.relay-figure figcaption { display: grid; grid-template-columns: 1fr 1.1fr; gap: 0.75rem; padding: 0.6rem 0.75rem 0; font-size: 0.9rem; color: var(--ink-soft); }

@media (max-width: 52rem) {
  .relay-grid { grid-template-columns: 1fr; }
}