/* ===========================================================================
   AI WILLO — shared stylesheet for the inner pages
   (use cases, how we vet, about, privacy, terms)

   The homepage keeps its own inline stylesheet. The tokens, header, buttons
   and footer here are copied from it value for value, so moving between the
   homepage and an inner page never shifts a pixel.
   =========================================================================== */

:root {
  color-scheme: light;

  --page: #faf7f0;
  --panel: #fffdf8;
  --raised: #ffffff;

  --ink: #16150f;
  --ink-2: #4a463f;
  --muted: #78746d;
  --faint: #a9a49a;

  --line: #e7e0d6;
  --line-2: #f0eae0;

  --green: #58c765;
  --green-mid: #3f8f4f;
  --green-ink: #2c6b39;
  --green-bg: #eaf3ea;
  --green-line: #bcd9c2;

  --amber-bg: #fbf1dc;

  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --r-panel: 16px;
  --r-card: 12px;
  --r-control: 9px;

  --s-section: 72px;
  --s-block: 30px;
  --s-card: 18px;

  --shadow-panel: 0 20px 54px rgba(28, 25, 20, .07);
  --shadow-soft: 0 10px 30px rgba(28, 25, 20, .05);

  --ease: cubic-bezier(0.2, 0, 0, 1);
  --t-state: .15s;
  --t-hover: .3s;
  --t-reveal: .4s;
}

/* ----------------------------------------------------------------- base */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -.025em; line-height: 1.1; }
p { margin: 0; }

.shell { width: min(1160px, calc(100% - 48px)); margin: 0 auto; }

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

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-2);
}

.nav { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark { width: 26px; height: 26px; flex: 0 0 auto; }
.brand-word { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }

.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--muted); transition: color var(--t-hover) var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--ink); }

/* -------------------------------------------------------------- buttons */

.button, .nav-cta {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; border-radius: var(--r-control);
  font: inherit; font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease),
              color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease),
              box-shadow var(--t-hover) var(--ease);
}

.button { gap: 6px; height: 46px; padding: 0 24px; font-size: 15px; background: var(--ink); color: #fff; }
.button:hover { background: #35322b; }
.button.green { background: var(--green-mid); }
.button.green:hover { background: var(--green-ink); }
.button.light { background: transparent; color: var(--ink-2); border-color: var(--line); }
.button.light:hover { background: var(--panel); border-color: #cfc7ba; }

.nav-cta { height: 36px; padding: 0 16px; background: var(--ink); color: #fff; }
.nav-links .nav-cta, .nav-links .nav-cta:hover { color: #fff; }
.nav-links .nav-cta:hover { background: #35322b; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }

.nudge { display: inline-block; transition: transform var(--t-hover) var(--ease); }

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

main > section { padding: var(--s-section) 0; }
main > section.page-hero { padding: 64px 0 36px; }

/* Every section after the page intro is its own floating panel, matching the
   homepage: rounded, a little wider than the text, two alternating tones. */
body { overflow-x: clip; }
main > section:not(.page-hero) {
  position: relative; isolation: isolate;
  margin-block: 22px;
  padding-block: clamp(48px, 6vw, 80px);
}
main > section:not(.page-hero)::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0 calc(-1 * min(56px, (100vw - 100%) / 2 - 8px));
  border-radius: clamp(22px, 2.6vw, 34px);
  background: #fffdf9;
  border: 1px solid rgba(120, 100, 70, .09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 18px 50px -36px rgba(60, 45, 20, .18);
}
main > section:not(.page-hero):nth-of-type(odd)::before { background: #f3eee5; }

.crumbs {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
  font-size: 12.5px; color: var(--muted);
}
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { color: var(--faint); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  font-size: 13px; font-weight: 500; letter-spacing: -.005em; color: var(--ink-2);
}
/* Same chapter marker as the homepage, without the number. */
.eyebrow::before { content: ""; display: block; flex: 0 0 auto; width: 28px; height: 1px; background: var(--green-ink); opacity: .55; }

h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -.03em; max-width: 820px; }
h1 span { color: var(--muted); }

.lede { max-width: 640px; margin-top: 20px; font-size: 17px; line-height: 1.62; color: var(--ink-2); }
.page-hero .actions { margin-top: 28px; }

.meta-line { margin-top: 18px; font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* -------------------------------------------------------- section text */

.section-title { font-size: clamp(26px, 3.1vw, 37px); line-height: 1.12; }
.section-title span { color: var(--muted); }
.section-copy { max-width: 640px; margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink-2); }

.label {
  font-size: 12.5px; font-weight: 500; color: var(--muted);
}

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

.grid { display: grid; gap: 12px; margin-top: var(--s-block); }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  padding: 20px 20px 22px;
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel);
  transition: border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease),
              box-shadow var(--t-hover) var(--ease);
}

.card h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.015em; }
.card p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.card .label + h3 { margin-top: 10px; }
/* A label inside a card stays a small mono caption, not body text. */
.card .label, .card p.label { margin-top: 0; font-size: 11px; line-height: 1.4; color: var(--muted); }
.card .label + p { margin-top: 10px; }
.card ul { margin: 10px 0 0; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.card li + li { margin-top: 4px; }

a.card { display: block; }
a.card .more { display: inline-block; margin-top: 14px; font-size: 13.5px; color: var(--green-ink); }

.card.accent { background: var(--green-bg); border-color: var(--green-line); }

/* Links inside running text look like links. */
.card p a, .card li a, .faq-list p a, .notice a, .lede a {
  color: var(--green-ink); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--green-line);
}
.card p a:hover, .card li a:hover, .faq-list p a:hover, .notice a:hover, .lede a:hover { text-decoration-color: var(--green-ink); }

.num {
  font-size: 12.5px; font-weight: 500; color: var(--green-ink);
}

/* A brief shown as it would arrive: the messy words, then the shape. */
.brief {
  border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--panel);
  overflow: hidden;
}
.brief-said { padding: 20px 22px; border-bottom: 1px solid var(--line-2); }
.brief-said blockquote {
  margin: 10px 0 0; font-size: clamp(17px, 1.9vw, 21px); line-height: 1.45;
  letter-spacing: -.018em; color: var(--ink);
}
.brief-rows { display: grid; }
.brief-row {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px;
  padding: 12px 22px; border-bottom: 1px solid var(--line-2);
  font-size: 14.5px; line-height: 1.55;
}
.brief-row:last-child { border-bottom: 0; }
.brief-row span:first-child { font-family: var(--mono); font-size: 12px; color: var(--muted); padding-top: 2px; }
.brief-row span:last-child { color: var(--ink-2); }
.brief-note { padding: 10px 22px; background: var(--line-2); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* --------------------------------------------------------------- prose */

/* Long-form text: legal pages, about. Narrow measure, generous rhythm. */
.prose { max-width: 720px; }
.prose h2 { margin-top: 44px; font-size: 22px; letter-spacing: -.02em; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 26px; font-size: 16.5px; letter-spacing: -.012em; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.prose p { margin-top: 12px; }
.prose ul, .prose ol { margin: 12px 0 0; padding-left: 20px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--green-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--green-line); }
.prose a:hover { text-decoration-color: var(--green-ink); }
.prose strong { font-weight: 600; color: var(--ink); }

.prose table { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 14px; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; color: var(--ink-2); }
.prose th { font-size: 12.5px; font-weight: 600; color: var(--muted); }

.layout-doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 96px; display: grid; gap: 8px; font-size: 13.5px; }
.toc a { color: var(--muted); transition: color var(--t-hover) var(--ease); }
.toc a:hover { color: var(--ink); }

.notice {
  margin-top: 22px; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel);
  font-size: 14px; line-height: 1.6; color: var(--muted);
}

/* ------------------------------------------------------------ FAQ list */

.faq-list { display: grid; gap: 8px; margin-top: var(--s-block); max-width: 820px; }
.faq-list details {
  padding: 16px 18px;
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel);
  transition: border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease),
              box-shadow var(--t-hover) var(--ease);
}
.faq-list summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  font-size: 15.5px; font-weight: 500; letter-spacing: -.012em;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex: 0 0 auto;
  font-family: var(--mono); font-size: 15px; color: var(--muted);
  transition: transform var(--t-hover) var(--ease);
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ------------------------------------------------------------ CTA band */

.cta-band {
  padding: clamp(28px, 4vw, 46px);
  border: 1px solid var(--line); border-radius: var(--r-panel);
  background: var(--panel); box-shadow: var(--shadow-soft);
  text-align: center;
}
.cta-band h2 { font-size: clamp(26px, 3.2vw, 38px); }
.cta-band p { max-width: 620px; margin: 14px auto 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.cta-band .actions { justify-content: center; margin-top: 24px; }

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

.site-footer { margin-top: 24px; border-top: 1px solid var(--line-2); }
.foot-grid {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 32px; padding: 44px 0 28px;
}
.foot-about p { max-width: 320px; margin-top: 12px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.foot-col h4 {
  font-size: 12.5px; font-weight: 600; color: var(--muted);
}
.foot-col ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.foot-col a { font-size: 13.5px; color: var(--muted); transition: color var(--t-hover) var(--ease); }
.foot-col a:hover { color: var(--ink); }
.foot-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 18px 0 40px; border-top: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--faint);
}

/* --------------------------------------------------------------- motion */

[data-reveal] { opacity: 0; translate: 0 14px; }
[data-reveal="card"] { scale: .985; }
[data-reveal].is-in {
  opacity: 1; translate: 0 0; scale: 1;
  transition: opacity .6s var(--ease), translate .6s var(--ease), scale .6s var(--ease),
              border-color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease),
              box-shadow var(--t-hover) var(--ease);
}

@media (hover: hover) {
  .card:hover, .faq-list details:hover, .brief:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-soft); border-color: #cfc7ba;
  }
  .card.accent:hover { border-color: var(--green-line); }
  .button:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(28, 25, 20, .12); }
  .button:active { transform: translateY(0) scale(.98); box-shadow: none; }
  a:hover > .nudge, a:hover .nudge { transform: translateX(2px); }
}

.brief { transition: transform var(--t-hover) var(--ease), box-shadow var(--t-hover) var(--ease), border-color var(--t-hover) var(--ease); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 940px) {
  :root { --s-section: 52px; }
  .shell { width: calc(100% - 32px); }
  .nav-links a:not(.nav-cta) { display: none; }
  .grid.three, .grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-doc { grid-template-columns: 1fr; gap: 24px; }
  .toc { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-about { grid-column: 1 / -1; }
  main > section.page-hero { padding: 40px 0 24px; }
}

@media (max-width: 560px) {
  .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr; }
  .brief-row { grid-template-columns: 1fr; gap: 2px; }
  .toc { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  [data-reveal], [data-reveal].is-in { opacity: 1; translate: none; scale: none; transition: none; }
  .card:hover, .faq-list details:hover, .brief:hover, .button:hover, .button:active,
  a:hover > .nudge, a:hover .nudge { transform: none; }
}