:root {
  
  --clauseiq-bg:            #F7F5F2;
  --clauseiq-card:          #FFFFFF;
  --clauseiq-text:          #17191B;
  --clauseiq-text-2:        #5F6468;
  --clauseiq-text-3:        #6F6A64;
  --clauseiq-text-4:        #B0ACA8;
  --clauseiq-border:        #DDD7CF;
  --clauseiq-border-2:      #E4E0DA;

  
  --clauseiq-accent:        #7A5842;
  --clauseiq-accent-press:  #654836;
  --clauseiq-accent-surface:#EFE7E0;
  --clauseiq-accent-ghost:  #FBF5F0;

  
  --clauseiq-obsidian:      #111315;
  --clauseiq-cream:         #F4F0E8;
  --clauseiq-copper-light:  #C4946E;

  
  --clauseiq-high:          #B83030;
  --clauseiq-high-bg:       #FDEAEA;
  --clauseiq-med:           #A56A1F;
  --clauseiq-med-bg:        #FEF3E6;
  --clauseiq-clear:         #4F6B57;
  --clauseiq-clear-accent:  #4A8A50;
  --clauseiq-clear-bg:      #EDF5EF;

  
  --clauseiq-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Inter", system-ui, sans-serif;
  --clauseiq-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Inter", system-ui, sans-serif;

  --clauseiq-text-body:      17px;
  --clauseiq-text-secondary: 15px;
  --clauseiq-text-label:     13px;
  --clauseiq-text-caption:   12px;
  --clauseiq-text-micro:     11px;

  --clauseiq-text-wordmark-md: 20px;
  --clauseiq-text-headline:    26px;
  --clauseiq-text-title:       20px;
  --clauseiq-text-subtitle:    18px;

  --clauseiq-w-regular:  400;
  --clauseiq-w-semibold: 600;
  --clauseiq-w-bold:     700;
  --clauseiq-w-black:    900;

  --clauseiq-lh-tight:  1.25;
  --clauseiq-lh-snug:   1.40;
  --clauseiq-lh-normal: 1.47;

  --clauseiq-ls-wordmark-md: -1px;
  --clauseiq-ls-wordmark-lg: -2px;
  --clauseiq-ls-micro:       0.5px;

  
  --clauseiq-radius-sm:   4px;
  --clauseiq-radius-md:   8px;
  --clauseiq-radius-lg:   10px;
  --clauseiq-radius-xl:   12px;
  --clauseiq-radius-2xl:  14px;
  --clauseiq-radius-3xl:  16px;

  
  --clauseiq-s-1:  4px;
  --clauseiq-s-2:  8px;
  --clauseiq-s-3:  10px;
  --clauseiq-s-4:  12px;
  --clauseiq-s-5:  14px;
  --clauseiq-s-6:  16px;
  --clauseiq-s-7:  18px;
  --clauseiq-s-8:  20px;
  --clauseiq-s-10: 24px;
  --clauseiq-s-12: 28px;
  --clauseiq-s-14: 32px;

  
  --clauseiq-border-hairline: 0.5px;
  --clauseiq-border-thin:     1px;
  --clauseiq-border-med:      1.5px;
  --clauseiq-border-accent:   2px;
  --clauseiq-border-risk:     3px;

  
  --clauseiq-ease-out:   cubic-bezier(0.33, 1, 0.68, 1);
  --clauseiq-dur-fast:   100ms;
  --clauseiq-dur-normal: 250ms;
}


* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--clauseiq-bg);
  color: var(--clauseiq-text);
  font-family: var(--clauseiq-font-sans);
  font-size: var(--clauseiq-text-body);
  line-height: var(--clauseiq-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p, li {
  font-size: var(--clauseiq-text-body);
  font-weight: var(--clauseiq-w-regular);
  line-height: var(--clauseiq-lh-normal);
  color: var(--clauseiq-text);
  margin: 0 0 var(--clauseiq-s-5);
}

a { color: var(--clauseiq-accent); text-decoration: none; }
a:hover { color: var(--clauseiq-accent-press); text-decoration: underline; }

strong { font-weight: var(--clauseiq-w-semibold); }

::selection { background: var(--clauseiq-accent-surface); color: var(--clauseiq-text); }


.clauseiq-wordmark {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--clauseiq-font-display);
  font-weight: var(--clauseiq-w-black);
  color: var(--clauseiq-text);
  letter-spacing: var(--clauseiq-ls-wordmark-lg);
  line-height: 1;
  text-decoration: none;
}
.clauseiq-wordmark:hover { text-decoration: none; color: var(--clauseiq-text); }
.clauseiq-wordmark__bang {
  display: inline-block;
  transform: rotate(-15deg);
  transform-origin: bottom left;
  color: var(--clauseiq-accent);
  margin-left: 5px;
  letter-spacing: 0;
}
.clauseiq-wordmark--md { font-size: var(--clauseiq-text-wordmark-md); letter-spacing: var(--clauseiq-ls-wordmark-md); }
.clauseiq-wordmark--md .clauseiq-wordmark__bang { margin-left: 3px; }


header.site-header {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--clauseiq-s-8) var(--clauseiq-s-10);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--clauseiq-border-hairline) solid var(--clauseiq-border);
}
header.site-header .back {
  font-size: var(--clauseiq-text-secondary);
  color: var(--clauseiq-text-2);
  font-weight: var(--clauseiq-w-regular);
}
header.site-header .back:hover { color: var(--clauseiq-text); text-decoration: none; }
header.site-header .back::before { content: "‹ "; color: var(--clauseiq-text-3); }

footer.site-footer {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--clauseiq-s-10);
  border-top: var(--clauseiq-border-hairline) solid var(--clauseiq-border);
}
footer.site-footer .ft-links {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--clauseiq-s-4);
  display: flex;
  gap: var(--clauseiq-s-8);
  flex-wrap: wrap;
}
footer.site-footer .ft-links li { margin: 0; }
footer.site-footer .ft-links a {
  color: var(--clauseiq-text-2);
  font-size: var(--clauseiq-text-secondary);
}
footer.site-footer .ft-links a:hover { color: var(--clauseiq-text); text-decoration: none; }
footer.site-footer .ft-copy {
  font-size: var(--clauseiq-text-caption);
  color: var(--clauseiq-text-3);
  margin: 0;
}


main.article {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--clauseiq-s-14) var(--clauseiq-s-10) 64px;
}

main.index {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--clauseiq-s-14) var(--clauseiq-s-10) 64px;
}


nav.crumbs {
  font-size: var(--clauseiq-text-caption);
  color: var(--clauseiq-text-3);
  margin-bottom: var(--clauseiq-s-6);
}
nav.crumbs a { color: var(--clauseiq-text-3); }
nav.crumbs a:hover { color: var(--clauseiq-text-2); text-decoration: none; }


main.article h1 {
  font-size: clamp(26px, 4vw, 34px);
  font-family: var(--clauseiq-font-display);
  font-weight: var(--clauseiq-w-semibold);
  line-height: var(--clauseiq-lh-tight);
  letter-spacing: -0.3px;
  color: var(--clauseiq-text);
  margin: 0 0 var(--clauseiq-s-4);
}

main.article p.lede {
  font-size: var(--clauseiq-text-subtitle);
  color: var(--clauseiq-text-2);
  line-height: var(--clauseiq-lh-snug);
  margin: 0 0 var(--clauseiq-s-4);
}

main.article p.meta {
  font-size: var(--clauseiq-text-caption);
  color: var(--clauseiq-text-3);
  margin: 0 0 var(--clauseiq-s-10);
}

main.article h2 {
  font-size: var(--clauseiq-text-title);
  font-weight: var(--clauseiq-w-semibold);
  line-height: var(--clauseiq-lh-snug);
  color: var(--clauseiq-text);
  margin: var(--clauseiq-s-14) 0 var(--clauseiq-s-4);
  letter-spacing: -0.2px;
}

main.article h3 {
  font-size: var(--clauseiq-text-subtitle);
  font-weight: var(--clauseiq-w-semibold);
  line-height: var(--clauseiq-lh-snug);
  color: var(--clauseiq-text);
  margin: var(--clauseiq-s-10) 0 var(--clauseiq-s-2);
}


main.article h3.flag-heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--clauseiq-s-3);
  margin: var(--clauseiq-s-12) 0 var(--clauseiq-s-3);
  padding-top: var(--clauseiq-s-4);
  border-top: var(--clauseiq-border-hairline) solid var(--clauseiq-border-2);
}
main.article h3.flag-heading:first-of-type { border-top: none; padding-top: 0; }

.flag-badge {
  display: inline-block;
  font-family: var(--clauseiq-font-sans);
  font-size: var(--clauseiq-text-micro);
  font-weight: var(--clauseiq-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--clauseiq-ls-micro);
  background: var(--clauseiq-high-bg);
  color: var(--clauseiq-high);
  padding: 3px var(--clauseiq-s-2);
  border-radius: var(--clauseiq-radius-sm);
  line-height: 1;
  white-space: nowrap;
}


.audience {
  background: var(--clauseiq-card);
  border: var(--clauseiq-border-hairline) solid var(--clauseiq-border);
  border-radius: var(--clauseiq-radius-2xl);
  padding: var(--clauseiq-s-6) var(--clauseiq-s-7);
  margin: 0 0 var(--clauseiq-s-12);
}
.audience p {
  margin: var(--clauseiq-s-2) 0;
  font-size: var(--clauseiq-text-secondary);
  color: var(--clauseiq-text);
  line-height: var(--clauseiq-lh-snug);
}
.audience p:first-child { margin-top: 0; }
.audience p:last-child  { margin-bottom: 0; }
.audience strong { color: var(--clauseiq-text); font-weight: var(--clauseiq-w-semibold); }


nav.toc {
  background: var(--clauseiq-card);
  border: var(--clauseiq-border-hairline) solid var(--clauseiq-border);
  border-radius: var(--clauseiq-radius-2xl);
  padding: var(--clauseiq-s-6) var(--clauseiq-s-8);
  margin: 0 0 var(--clauseiq-s-14);
}
nav.toc h2 {
  font-size: var(--clauseiq-text-micro);
  font-weight: var(--clauseiq-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--clauseiq-ls-micro);
  color: var(--clauseiq-text-3);
  margin: 0 0 var(--clauseiq-s-4);
  line-height: 1;
}
nav.toc ol {
  margin: 0;
  padding-left: var(--clauseiq-s-8);
  font-size: var(--clauseiq-text-secondary);
}
nav.toc li {
  margin: var(--clauseiq-s-2) 0;
  color: var(--clauseiq-text);
  padding-left: var(--clauseiq-s-1);
}
nav.toc li::marker { color: var(--clauseiq-text-3); }
nav.toc a { color: var(--clauseiq-text); }
nav.toc a:hover { color: var(--clauseiq-accent); text-decoration: none; }


main.article ul:not(.checks):not(.ft-links) {
  margin: 0 0 var(--clauseiq-s-5);
  padding-left: var(--clauseiq-s-8);
}
main.article ul:not(.checks):not(.ft-links) li { margin-bottom: var(--clauseiq-s-2); }


ul.checks {
  background: var(--clauseiq-card);
  border: var(--clauseiq-border-hairline) solid var(--clauseiq-border);
  border-radius: var(--clauseiq-radius-2xl);
  padding: var(--clauseiq-s-7) var(--clauseiq-s-8);
  margin: var(--clauseiq-s-6) 0;
  list-style: none;
}
ul.checks li {
  font-size: var(--clauseiq-text-body);
  color: var(--clauseiq-text);
  padding-left: var(--clauseiq-s-7);
  position: relative;
  margin-bottom: var(--clauseiq-s-5);
  line-height: var(--clauseiq-lh-snug);
}
ul.checks li::before {
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--clauseiq-accent);
  font-weight: var(--clauseiq-w-bold);
  font-size: var(--clauseiq-text-body);
}
ul.checks li:last-child { margin-bottom: 0; }


.callout {
  background: var(--clauseiq-accent-ghost);
  border: var(--clauseiq-border-hairline) solid var(--clauseiq-accent-surface);
  border-left: var(--clauseiq-border-risk) solid var(--clauseiq-accent);
  border-radius: 0 var(--clauseiq-radius-xl) var(--clauseiq-radius-xl) 0;
  padding: var(--clauseiq-s-5) var(--clauseiq-s-7);
  margin: var(--clauseiq-s-6) 0;
  font-size: var(--clauseiq-text-secondary);
  color: var(--clauseiq-text);
}
.callout p { margin: 0; font-size: var(--clauseiq-text-secondary); }
.callout strong { color: var(--clauseiq-text); }


.caveat {
  background: var(--clauseiq-med-bg);
  border-left: var(--clauseiq-border-risk) solid var(--clauseiq-med);
  border-radius: 0 var(--clauseiq-radius-xl) var(--clauseiq-radius-xl) 0;
  padding: var(--clauseiq-s-5) var(--clauseiq-s-7);
  margin: var(--clauseiq-s-6) 0;
  font-size: var(--clauseiq-text-secondary);
  color: var(--clauseiq-text);
}
.caveat p { margin: 0; font-size: var(--clauseiq-text-secondary); }
.caveat strong { color: var(--clauseiq-med); font-weight: var(--clauseiq-w-semibold); }


aside.cta {
  background: var(--clauseiq-accent-ghost);
  border: var(--clauseiq-border-hairline) solid var(--clauseiq-accent-surface);
  border-radius: var(--clauseiq-radius-3xl);
  padding: var(--clauseiq-s-10) var(--clauseiq-s-12);
  margin: var(--clauseiq-s-14) 0;
}
aside.cta h2 {
  font-size: var(--clauseiq-text-title);
  margin: 0 0 var(--clauseiq-s-2);
  color: var(--clauseiq-text);
  letter-spacing: -0.2px;
}
aside.cta p {
  color: var(--clauseiq-text-2);
  font-size: var(--clauseiq-text-secondary);
  margin: 0 0 var(--clauseiq-s-6);
  line-height: var(--clauseiq-lh-snug);
}

a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  background: var(--clauseiq-accent);
  color: #FFFFFF;
  padding: 0 var(--clauseiq-s-10);
  border-radius: var(--clauseiq-radius-2xl);
  font-weight: var(--clauseiq-w-semibold);
  font-size: var(--clauseiq-text-body);
  text-decoration: none;
  transition: background var(--clauseiq-dur-fast) var(--clauseiq-ease-out);
}
a.btn:hover {
  background: var(--clauseiq-accent-press);
  color: #FFFFFF;
  text-decoration: none;
}


main.article section.faq { margin: var(--clauseiq-s-14) 0; }
main.article section.faq h2 { margin-bottom: var(--clauseiq-s-6); }
main.article section.faq h3 {
  font-size: var(--clauseiq-text-body);
  font-weight: var(--clauseiq-w-semibold);
  color: var(--clauseiq-text);
  margin: var(--clauseiq-s-10) 0 var(--clauseiq-s-2);
}
main.article section.faq p {
  font-size: var(--clauseiq-text-body);
  color: var(--clauseiq-text);
  margin-bottom: 0;
  line-height: var(--clauseiq-lh-normal);
}


section.related {
  border-top: var(--clauseiq-border-hairline) solid var(--clauseiq-border);
  padding-top: var(--clauseiq-s-12);
  margin-top: var(--clauseiq-s-14);
}
section.related h2 { margin-bottom: var(--clauseiq-s-6); }
section.related ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--clauseiq-s-4);
}
section.related li { margin: 0; }
section.related li a {
  display: block;
  padding: var(--clauseiq-s-5) var(--clauseiq-s-6);
  background: var(--clauseiq-card);
  border: var(--clauseiq-border-hairline) solid var(--clauseiq-border);
  border-radius: var(--clauseiq-radius-xl);
  color: var(--clauseiq-text);
  font-size: var(--clauseiq-text-secondary);
  font-weight: var(--clauseiq-w-regular);
  text-decoration: none;
  transition: border-color var(--clauseiq-dur-fast) var(--clauseiq-ease-out);
}
section.related li a:hover {
  border-color: var(--clauseiq-accent);
  color: var(--clauseiq-text);
  text-decoration: none;
}


.disclaimer {
  font-size: var(--clauseiq-text-caption);
  color: var(--clauseiq-text-3);
  border-top: var(--clauseiq-border-hairline) solid var(--clauseiq-border);
  padding-top: var(--clauseiq-s-8);
  margin-top: var(--clauseiq-s-10);
  line-height: var(--clauseiq-lh-snug);
}


.index-hero {
  margin: 0 0 var(--clauseiq-s-14);
}
.index-hero h1 {
  font-size: clamp(32px, 5vw, 44px);
  font-family: var(--clauseiq-font-display);
  font-weight: var(--clauseiq-w-semibold);
  line-height: var(--clauseiq-lh-tight);
  letter-spacing: -0.5px;
  color: var(--clauseiq-text);
  margin: 0 0 var(--clauseiq-s-5);
}
.index-hero p.hero-lede {
  font-size: var(--clauseiq-text-subtitle);
  color: var(--clauseiq-text-2);
  line-height: var(--clauseiq-lh-snug);
  max-width: 620px;
  margin: 0;
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--clauseiq-s-6);
  margin: var(--clauseiq-s-10) 0;
}

.index-card {
  display: flex;
  flex-direction: column;
  background: var(--clauseiq-card);
  border: var(--clauseiq-border-hairline) solid var(--clauseiq-border);
  border-radius: var(--clauseiq-radius-2xl);
  padding: var(--clauseiq-s-8) var(--clauseiq-s-8) var(--clauseiq-s-7);
  color: var(--clauseiq-text);
  text-decoration: none;
  transition: border-color var(--clauseiq-dur-fast) var(--clauseiq-ease-out);
}
.index-card:hover {
  border-color: var(--clauseiq-accent);
  text-decoration: none;
  color: var(--clauseiq-text);
}

.index-card .card-kicker {
  font-size: var(--clauseiq-text-micro);
  font-weight: var(--clauseiq-w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--clauseiq-ls-micro);
  color: var(--clauseiq-accent);
  margin-bottom: var(--clauseiq-s-3);
}
.index-card .card-title {
  font-family: var(--clauseiq-font-display);
  font-size: var(--clauseiq-text-title);
  font-weight: var(--clauseiq-w-semibold);
  line-height: var(--clauseiq-lh-snug);
  color: var(--clauseiq-text);
  margin: 0 0 var(--clauseiq-s-3);
  letter-spacing: -0.2px;
}
.index-card .card-preview {
  font-size: var(--clauseiq-text-secondary);
  color: var(--clauseiq-text-2);
  line-height: var(--clauseiq-lh-snug);
  margin: 0 0 var(--clauseiq-s-6);
  flex-grow: 1;
}
.index-card .card-meta {
  font-size: var(--clauseiq-text-caption);
  color: var(--clauseiq-text-3);
}
.index-card .card-meta::after {
  content: " →";
  color: var(--clauseiq-accent);
  margin-left: var(--clauseiq-s-1);
  font-weight: var(--clauseiq-w-semibold);
}

.index-cta {
  background: var(--clauseiq-accent-ghost);
  border: var(--clauseiq-border-hairline) solid var(--clauseiq-accent-surface);
  border-radius: var(--clauseiq-radius-3xl);
  padding: var(--clauseiq-s-12);
  margin: var(--clauseiq-s-14) 0 0;
}
.index-cta h2 {
  font-size: var(--clauseiq-text-title);
  font-weight: var(--clauseiq-w-semibold);
  margin: 0 0 var(--clauseiq-s-2);
  color: var(--clauseiq-text);
  letter-spacing: -0.2px;
}
.index-cta p {
  font-size: var(--clauseiq-text-secondary);
  color: var(--clauseiq-text-2);
  margin: 0 0 var(--clauseiq-s-6);
  line-height: var(--clauseiq-lh-snug);
}


@media (max-width: 600px) {
  header.site-header,
  main.article,
  main.index,
  footer.site-footer {
    padding-left: var(--clauseiq-s-6);
    padding-right: var(--clauseiq-s-6);
  }
  main.article { padding-top: var(--clauseiq-s-10); padding-bottom: 48px; }
  main.article h1 { font-size: 26px; }
  .index-hero h1 { font-size: 28px; }
  main.article h2 { font-size: 19px; margin-top: var(--clauseiq-s-12); }
  main.article h3 { font-size: 17px; }
  main.article h3.flag-heading { gap: var(--clauseiq-s-2); }
  aside.cta { padding: var(--clauseiq-s-8); }
  .index-cta { padding: var(--clauseiq-s-8); }
}