:root {
  --paper:#f3f5fa;
  --ink:#151c30;
  --muted:#59657d;
  --line:#d1d9eb;
  --lime:#d2dcff;
  --green:#3854e8;
  --white:#fff;
  --radius:22px;
  --section-space:76px;
  --section-space-mobile:52px
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:28px
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:4px
}
button,a,input,summary {
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:3px solid #426a2e;
  outline-offset:5px
}
.wrap {
  width:min(1160px,calc(100% - 64px));
  margin:auto
}
.skip {
  position:absolute;
  top:-100px;
  background:var(--ink);
  color:white;
  padding:12px
}
.skip:focus {
  top:0;
  z-index:10
}
.preview-bar {
  font:12px/1.4 system-ui;
  text-align:center;
  background:#e5e9f2;
  padding:8px 20px;
  color:#535c4c
}
header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  min-height:96px;
  border-bottom:1px solid var(--line)
}
.wordmark {
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  font-size:14px;
  font-weight:650
}
.logo {
  display:inline-flex;
  gap:3px;
  align-items:flex-end;
  width:28px;
  height:27px
}
.logo i {
  display:block;
  width:7px;
  background:var(--green);
  border-radius:2px;
  height:18px
}
.logo i:nth-child(2) {
  height:27px
}
.logo i:nth-child(3) {
  height:22px
}
nav {
  display:flex;
  gap:28px;
  align-items:center;
  font-size:14px
}
nav a {
  text-decoration:none
}
nav a:hover {
  text-decoration:underline
}
.nav-pill {
  border:1px solid var(--line);
  padding:8px 16px;
  border-radius:30px
}
.hero {
  padding:48px 0 var(--section-space);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:72px;
  align-items:center
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  font-weight:700;
  letter-spacing:1.8px;
  text-transform:uppercase;
  color:var(--green);
  margin:0 0 24px
}
.dot {
  width:7px;
  height:7px;
  background:#739d42;
  border-radius:50%
}
h1,h2,h3,p {
  margin-top:0
}
h1 {
  font-size:clamp(44px,4.8vw,64px);
  line-height:1.06;
  font-weight:550;
  letter-spacing:-3.3px;
  margin-bottom:25px
}
h1 em {
  font-family:Georgia,serif;
  font-weight:400;
  color:var(--green)
}
.hero>div:first-child {
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:none
}
.lead {
  color:var(--muted);
  font-size:18px;
  max-width:470px;
  line-height:1.65;
  margin-bottom:28px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:14px 23px;
  border-radius:9px;
  background:var(--ink);
  color:white;
  text-decoration:none;
  font:600 14px/1.4 system-ui;
  border:1px solid var(--ink);
  cursor:pointer;
  min-height:49px
}
.button:hover {
  background:var(--green)
}
.button:disabled {
  cursor:default;
  background:#e1e6f0;
  color:#747a6e;
  border-color:#d1d9e8
}
.button.light {
  background:var(--lime);
  color:var(--ink);
  border-color:var(--lime)
}
.button.light:disabled {
  background:#d2dcff;
  color:#67765b;
  border-color:#d2dcff
}
.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center
}
.fine {
  font-size:12px;
  color:var(--muted);
  margin-top:12px
}
.fine a {
  font-weight:600
}
.visual {
  position:relative;
  background:#e8edff;
  border-radius:26px;
  padding:18px;
  min-width:0;
  width:100%;
  max-width:none;
  margin-left:0
}
.visual-tag {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:10px;
  letter-spacing:1.4px;
  font-weight:600;
  margin-bottom:17px;
  color:#6c7892
}
.browser {
  background:white;
  border:1px solid #c8d1e2;
  border-radius:13px;
  box-shadow:0 20px 45px #2b352512;
  overflow:hidden
}
.chrome {
  display:flex;
  gap:5px;
  align-items:center;
  background:#fafbfe;
  border-bottom:1px solid #e2e6da;
  padding:12px
}
.chrome i {
  width:5px;
  height:5px;
  background:#b4bfd4;
  border-radius:50%
}
.chrome span {
  font:10px system-ui;
  color:#66738e;
  margin:auto
}
.mock-site {
  padding:18px 18px 24px;
  background:#fafbfe;
  position:relative
}
.mock-nav {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  font-weight:600;
  color:#3e4a65;
  margin-bottom:27px
}
.mock-site h3 {
  font:27px/1.07 Georgia,serif;
  max-width:190px;
  letter-spacing:-1px;
  margin-bottom:12px
}
.mock-site p {
  font:10px/1.6 system-ui;
  color:#707b91;
  max-width:200px
}
.mock-button {
  display:inline-block;
  background:#b35b45;
  color:white;
  padding:9px 15px;
  border-radius:7px;
  font-size:9px;
  border:1px solid #b2c0df;
  outline:2px dashed #5d75df;
  outline-offset:5px
}
.mock-leaf {
  position:absolute;
  right:30px;
  top:63px;
  width:79px;
  height:114px;
  border-radius:100% 0 100% 0;
  background:#b5c2e6;
  transform:rotate(15deg)
}
.mock-leaf:after {
  content:'';
  position:absolute;
  width:1px;
  height:108px;
  left:40px;
  top:6px;
  background:#667ac2;
  transform:rotate(32deg)
}
.measurement {
  position:relative;
  margin:-10px 0 0;
  padding:14px;
  background:var(--white);
  border:1px solid #c8d1e2;
  border-radius:12px;
  box-shadow:0 12px 30px #1d2b580d
}
.measure-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  font-weight:600;
  margin-bottom:15px
}
.status {
  font-size:9px;
  color:var(--green);
  background:#e3eaff;
  padding:3px 7px;
  border-radius:20px
}
.swatches {
  display:flex;
  gap:6px;
  margin-bottom:12px
}
.swatches span {
  height:24px;
  flex:1;
  border-radius:4px;
  background:#b35b45
}
.swatches span:nth-child(2) {
  background:#b5c2e6
}
.swatches span:nth-child(3) {
  background:#fafbfe;
  border:1px solid #eceadf
}
.swatches span:nth-child(4) {
  background:#222720
}
.measure-values {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.measure-values code {
  font:10px ui-monospace,monospace;
  padding:5px 7px;
  border:1px solid #e1e6d9;
  border-radius:4px
}
.brief-strip {
  font-size:11px;
  display:flex;
  justify-content:space-between;
  background:#e3eaff;
  margin:12px -14px -14px;
  padding:10px 14px;
  border-radius:0 0 12px 12px;
  color:#9d5d4b
}
.compat {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:23px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  color:var(--muted);
  font-size:12px
}
.compat strong {
  font-weight:550;
  color:var(--ink);
  font-size:17px;
  letter-spacing:-.5px
}
.section {
  padding:var(--section-space) 0
}
.section-title {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:50px;
  margin-bottom:35px
}
.section-title p {
  max-width:340px;
  color:var(--muted);
  font-size:15px;
  margin-bottom:4px
}
h2 {
  font-size:clamp(30px,3.6vw,46px);
  font-weight:550;
  letter-spacing:-1.7px;
  line-height:1.15;
  margin-bottom:0
}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.step {
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px
}
.number {
  font:12px ui-monospace,monospace;
  color:#73809a;
  display:block;
  margin-bottom:40px
}
.step h3 {
  font-size:19px;
  font-weight:600;
  letter-spacing:-.5px;
  margin-bottom:10px
}
.step p {
  font-size:14px;
  color:var(--muted);
  margin:0
}
.code-section {
  background:#151d35;
  color:#f7f2eb;
  border-radius:28px;
  padding:var(--section-space);
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:55px;
  align-items:center
}
.code-section .eyebrow {
  color:#aebcf0;
  margin-bottom:18px
}
.code-section h2 {
  margin-bottom:22px
}
.code-section p {
  font-size:15px;
  color:#bdc8e5
}
.code-demo {
  display:grid;
  gap:10px
}
.reference-row {
  padding:17px 18px;
  border:1px solid #51634f;
  border-radius:10px;
  background:#ffffff06;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px
}
.reference-row span {
  font-size:11px;
  color:#bcc7df
}
.reference-row b {
  font-weight:500
}
.code-result {
  padding:19px;
  border-radius:10px;
  background:var(--lime);
  color:#151d35;
  font-size:13px;
  display:flex;
  justify-content:space-between
}
.code-demo small {
  font-size:10px;
  color:#b8c5e3;
  text-align:right
}
.pricing {
  max-width:900px;
  margin:auto
}
.center {
  text-align:center
}
.center .eyebrow {
  justify-content:center
}
.center p {
  color:var(--muted);
  margin:20px auto 32px
}
.plans {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  text-align:left
}
.plan {
  padding:34px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:#fafbfe
}
.plan.paid {
  background:#e3eaff;
  border-color:#d8c7b8
}
.plan-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:25px
}
.plan h3 {
  font-size:20px;
  font-weight:600;
  margin:0
}
.tag {
  font-size:10px;
  letter-spacing:.5px;
  border:1px solid #adb9dc;
  border-radius:20px;
  padding:3px 10px
}
.price {
  font-size:48px;
  line-height:1;
  letter-spacing:-2px
}
.price span {
  font-size:13px;
  letter-spacing:0;
  color:var(--muted);
  margin-left:8px
}
.plan ul {
  list-style:none;
  padding:22px 0;
  margin:20px 0;
  border-top:1px solid var(--line);
  min-height:240px
}
.plan li {
  font-size:14px;
  padding:7px 0 7px 23px;
  position:relative
}
.plan li:before {
  content:'✓';
  position:absolute;
  left:0;
  color:#5268c8
}
.plan .button {
  width:100%
}
.privacy-callout {
  display:flex;
  justify-content:space-between;
  gap:36px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:32px 0;
  align-items:center
}
.privacy-callout h3 {
  font-size:22px;
  letter-spacing:-.7px;
  margin-bottom:6px;
  font-weight:550
}
.privacy-callout p {
  max-width:650px;
  color:var(--muted);
  font-size:14px;
  margin:0
}
.faq {
  display:grid;
  grid-template-columns:.7fr 1fr;
  gap:90px
}
.faq details {
  border-bottom:1px solid var(--line);
  padding:19px 0
}
.faq summary {
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:16px;
  font-weight:550
}
.faq summary:after {
  content:'+';
  color:#73866a
}
.faq details[open] summary:after {
  content:'−'
}
.faq details p {
  font-size:14px;
  color:var(--muted);
  margin:15px 0 3px
}
footer {
  border-top:1px solid var(--line);
  padding:30px 0 40px;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:12px;
  color:var(--muted)
}
footer .links {
  display:flex;
  gap:22px;
  flex-wrap:wrap
}
.legal-top {
  padding:var(--section-space) 0 32px;
  border-bottom:1px solid var(--line)
}
.legal-top h1 {
  font-size:54px;
  letter-spacing:-2px
}
.legal-top p {
  max-width:650px;
  color:var(--muted)
}
.legal-grid {
  display:grid;
  grid-template-columns:230px 1fr;
  gap:65px;
  padding:var(--section-space) 0 84px
}
.legal-nav {
  align-self:start;
  position:sticky;
  top:30px;
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:13px
}
.legal-nav a {
  color:var(--muted);
  text-decoration:none
}
.legal-content {
  max-width:740px
}
.legal-content section {
  margin-bottom:35px
}
.legal-content h2 {
  font-size:23px;
  letter-spacing:-.5px;
  margin-bottom:14px
}
.legal-content p,.legal-content li {
  font-size:15px;
  color:#586051
}
.legal-content li {
  margin-bottom:9px
}
.legal-content table {
  width:100%;
  border-collapse:collapse;
  font-size:13px
}
.legal-content th,.legal-content td {
  text-align:left;
  vertical-align:top;
  padding:13px 10px;
  border-bottom:1px solid var(--line)
}
.pending {
  background:#f0edda;
  color:#6b654b;
  padding:12px 15px;
  border-radius:8px;
  font-size:13px
}
.legal-content .pending {
  color:#6b654b
}
.legal-content a {
  overflow-wrap:anywhere
}
.legal-content td {
  overflow-wrap:anywhere
}
.legal-content ul {
  padding-left:20px
}
@media(max-width:950px) {
  .hero {
  gap:30px
}
h1 {
  letter-spacing:-2px
}
.code-section {
  padding:35px;
  gap:30px
}
.step {
  padding:23px
}
.legal-grid {
  gap:35px;
  grid-template-columns:180px 1fr
}

}
@media(max-width:720px) {
  .wrap {
  width:calc(100% - 36px)
}
header {
  min-height:80px;
  gap:12px;
  flex-wrap:wrap;
  padding:18px 0
}
nav {
  gap:17px;
  font-size:12px
}
.wordmark {
  font-size:12px
}
.nav-pill {
  padding:6px 10px
}
.hero {
  grid-template-columns:1fr;
  padding:45px 0;
  gap:35px
}
.hero>div:first-child {
  padding:30px 24px
}
h1 {
  font-size:49px
}
.lead {
  font-size:16px
}
.visual {
  max-width:520px;
  width:100%;
  margin:auto
}
.compat {
  flex-wrap:wrap;
  justify-content:center
}
.compat>span {
  width:100%;
  text-align:center
}
.section {
  padding:var(--section-space-mobile) 0
}
.section-title {
  display:block
}
.section-title p {
  margin-top:18px
}
.steps,.plans {
  grid-template-columns:1fr
}
.number {
  margin-bottom:20px
}
.code-section {
  grid-template-columns:1fr;
  padding:var(--section-space-mobile);
  gap:25px
}
.plan ul {
  min-height:0
}
.faq {
  grid-template-columns:1fr;
  gap:20px
}
.privacy-callout {
  display:block
}
.privacy-callout>a {
  display:inline-block;
  margin-top:15px;
  font-size:13px
}
footer {
  flex-direction:column;
  gap:15px
}
.legal-grid {
  grid-template-columns:1fr;
  gap:28px
}
.legal-nav {
  position:static;
  border-bottom:1px solid var(--line);
  padding-bottom:22px
}
.legal-top h1 {
  font-size:42px
}
.legal-content th,.legal-content td {
  padding:10px 5px
}
.mock-leaf {
  right:20px
}
.section-title h2 br {
  display:none
}

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

}
/* Technical blueprint hero */
.blueprint-hero {
  gap:72px
}
.hero-copy {
  min-width:0
}
.blueprint {
  position:relative;
  background:#e8edff;
  border:1px solid #d6def8;
  border-radius:24px;
  padding:22px;
  min-width:0;
  width:100%;
  max-width:none
}
.blueprint-head {
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin:0 2px 16px;
  color:#53658e;
  font:600 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:1.5px
}
.audit-window {
  background:#fff;
  border:1px solid #cbd5ef;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 18px 42px #1c2d7112
}
.audit-bar {
  height:42px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 14px;
  border-bottom:1px solid #d8e0ef;
  color:#687593
}
.audit-bar code {
  font:11px ui-monospace,SFMono-Regular,Menlo,monospace;
  margin:auto
}
.window-dots {
  display:flex;
  gap:5px
}
.window-dots i {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#aeb9d3
}
.audit-status {
  font:600 9px system-ui;
  color:#415bd0;
  background:#e3eaff;
  border:1px solid #cbd6f2;
  border-radius:20px;
  padding:4px 7px
}
.audit-body {
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:330px
}
.sample-ui {
  position:relative;
  padding:28px 25px 30px;
  background:#fafbfe;
  overflow:hidden
}
.sample-nav {
  display:flex;
  justify-content:space-between;
  color:#44516d;
  font-size:9px
}
.sample-nav b {
  letter-spacing:.5px
}
.sample-rule {
  height:1px;
  background:#dfe5f1;
  margin:19px 0 32px
}
.sample-kicker {
  font:600 9px/1.4 system-ui;
  color:#4b64d1;
  letter-spacing:1.3px
}
.sample-ui h3 {
  font:32px/1.03 Georgia,serif;
  letter-spacing:-1px;
  color:#182033;
  margin:13px 0 13px
}
.sample-ui p {
  font-size:11px;
  line-height:1.5;
  color:#738096;
  max-width:190px
}
.sample-cta {
  display:inline-block;
  margin-top:16px;
  padding:9px 14px;
  border-radius:7px;
  background:#b35b45;
  color:#fff;
  font-size:10px;
  font-weight:600
}
.token-panel {
  padding:24px 20px;
  border-left:1px solid #d8e0ef;
  background:#f2f5ff
}
.token-heading {
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding-bottom:18px;
  color:#303d60;
  font:600 10px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:1px
}
.token-count {
  color:#7483a8;
  font-size:9px
}
.token-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:17px 0;
  border-top:1px solid #d8e0ef
}
.token-name {
  color:#66738e;
  font:9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace
}
.token-row b {
  color:#263451;
  font:600 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  text-align:right
}
.color-row b {
  display:flex;
  align-items:center;
  gap:6px
}
.color-row b i {
  display:inline-block;
  width:12px;
  height:12px;
  border-radius:3px;
  background:#b35b45
}
.audit-footer {
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:13px 16px;
  background:#e3eaff;
  color:#4d63b4;
  font:600 9px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.5px
}
@media(max-width:720px) {
  .blueprint-hero {
  gap:35px
}
.blueprint {
  padding:16px
}
.audit-body {
  grid-template-columns:1fr
}
.token-panel {
  border-left:0;
  border-top:1px solid #d8e0ef
}
.audit-footer {
  font-size:8px
}

}
.button.light:hover {
  background:#b9c7ff;
  color:var(--ink);
  border-color:#b9c7ff
}
/* Pricing buttons are static;
  only the Pro plan uses the terracotta accent. */
.plans .button:hover {
  background:var(--ink);
  color:#fff;
  border-color:var(--ink)
}
.plans .paid .button.light,.plans .paid .button.light:hover {
  background:var(--green);
  color:#fff;
  border-color:var(--green)
}
/* Unified site-wide color system */
body {
  background:var(--paper);
  color:var(--ink)
}
a {
  color:var(--ink)
}
header,footer,.compat,.privacy-callout,.faq details {
  border-color:var(--line)
}
.wordmark,nav a {
  color:var(--ink)
}
.nav-pill {
  border-color:var(--line)
}
.eyebrow,.number {
  color:var(--green)
}
.dot {
  background:var(--green)
}
h1 em {
  color:var(--green)
}
.lead,.section-title p,.step p,.fine,.privacy-callout p,.faq details p {
  color:var(--muted)
}
.button {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff
}
.button:hover {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}
.button.light {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}
.button.light:hover {
  background:#2944c8;
  border-color:#2944c8;
  color:#fff
}
.compat {
  color:var(--muted)
}
.compat strong {
  color:var(--ink)
}
.step {
  border-color:var(--line);
  background:#fff
}
.code-section {
  background:#151d35;
  color:#f6f8ff
}
.code-section .eyebrow {
  color:#aebcf0
}
.code-section p {
  color:#c0c9dd
}
.reference-row {
  border-color:#3e4c70;
  background:#ffffff08
}
.reference-row span {
  color:#b2bfdc
}
.code-result {
  background:var(--lime);
  color:var(--ink)
}
.code-demo small {
  color:#b2bfdc
}
.plan {
  border-color:var(--line);
  background:#fff
}
.plan.paid {
  background:#e8edff;
  border-color:#bcc7df
}
.tag {
  border-color:#b5c2e6
}
.price span {
  color:var(--muted)
}
.plan li:before {
  color:var(--green)
}
.privacy-callout h3,.privacy-callout>a,.faq summary,footer {
  color:var(--ink)
}
footer {
  color:var(--muted)
}
footer .links a {
  color:var(--ink)
}
/* Final blue palette */
:root {
  --paper:#f6f8fc;
  --ink:#172033;
  --muted:#5d6980;
  --line:#d8dfec;
  --lime:#dce5ff;
  --green:#3b56d6
}
body {
  background:var(--paper);
  color:var(--ink)
}
header,footer,.compat,.privacy-callout,.faq details {
  border-color:var(--line)
}
.wordmark,nav a,a {
  color:var(--ink)
}
.eyebrow,.number,.dot,h1 em {
  color:var(--green)
}
.dot {
  background:var(--green)
}
.lead,.section-title p,.step p,.fine,.privacy-callout p,.faq details p {
  color:var(--muted)
}
.button {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff
}
.button:hover {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}
.button.light,.plans .paid .button.light {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}
.button.light:hover,.plans .paid .button.light:hover {
  background:#2e47b8;
  border-color:#2e47b8;
  color:#fff
}
.compat {
  color:var(--muted)
}
.compat strong {
  color:var(--ink)
}
.step,.plan {
  border-color:var(--line);
  background:#fff
}
.plan.paid {
  background:#eaf0ff;
  border-color:#bfcbed
}
.code-section {
  background:#17244a;
  color:#f6f8fc
}
.code-section .eyebrow {
  color:#b9c7ff
}
.code-section p {
  color:#c3cce2
}
.reference-row {
  border-color:#43547f;
  background:#ffffff08
}
.reference-row span,.code-demo small {
  color:#b8c4df
}
.code-result {
  background:var(--lime);
  color:var(--ink)
}
.tag {
  border-color:#b9c7ec
}
.price span {
  color:var(--muted)
}
.plan li:before {
  color:var(--green)
}
.privacy-callout h3,.privacy-callout>a,.faq summary,footer,.links a {
  color:var(--ink)
}
footer {
  color:var(--muted)
}
.blueprint {
  background:#eaf0ff;
  border-color:#cbd6ef
}
.blueprint-head {
  color:#5a6a98
}
.audit-window {
  border-color:#c3cfea
}
.audit-bar {
  border-color:#dce3f0;
  color:#65728d
}
.audit-status {
  color:#405bc9;
  background:#e3eaff;
  border-color:#cbd6f4
}
.audit-body,.token-panel {
  border-color:#dce3f0
}
.sample-ui {
  background:#fbfcff
}
.sample-nav {
  color:#455372
}
.sample-rule {
  background:#e0e6f1
}
.sample-kicker {
  color:#4b63d1
}
.sample-ui h3 {
  color:var(--ink)
}
.sample-ui p {
  color:#707d96
}
.sample-cta {
  background:var(--green)
}
.token-panel {
  background:#f2f5ff
}
.token-heading {
  color:#34436e
}
.token-count {
  color:#7180a5
}
.token-row {
  border-color:#dce3f0
}
.token-name {
  color:#73809b
}
.token-row b {
  color:#263451
}
.color-row b i {
  background:var(--green)
}
.audit-footer {
  background:#e3eaff;
  color:#4b63c7
}
/* Readability pass: darker text across the page */
:root {
  --ink:#111827;
  --muted:#4f5d75
}
body {
  color:#111827
}
h1,h2,h3,.wordmark,nav a,.compat strong,.faq summary,.privacy-callout h3,footer .links a {
  color:#111827
}
.lead,.section-title p,.step p,.privacy-callout p,.faq details p {
  color:#4f5d75
}
.fine,footer {
  color:#5d6980
}
.compat {
  color:#5d6980
}
.token-name,.token-count,.blueprint-head,.audit-bar,.sample-ui p {
  color:#5f6d84
}
/* Contrast correction for the dark Pro section */
.code-section h2 {
  color:#f6f8fc
}
.code-section .button.light {
  background:var(--green);
  color:#fff;
  border-color:var(--green)
}
.code-section .button.light:hover {
  background:#2e47b8;
  color:#fff;
  border-color:#2e47b8
}
/* Final homepage pass */
:root {
  --paper:#f6f8fc;
  --ink:#111827;
  --muted:#46546d;
  --line:#d5deed;
  --lime:#dce5ff;
  --green:#3854e8;
  --radius:22px
}
* {
  box-sizing:border-box
}
body {
  background:var(--paper);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif
}
header {
  min-height:88px;
  border-color:var(--line)
}
.wordmark {
  font-weight:700;
  letter-spacing:-.2px
}
nav {
  color:var(--ink)
}
nav a {
  color:var(--ink);
  font-weight:500
}
.nav-pill {
  border-color:#c8d2e5
}
.hero {
  padding:48px 0 76px
}
.hero>div:first-child {
  padding:0
}
.eyebrow {
  color:var(--green);
  font-weight:800;
  letter-spacing:2px
}
.dot {
  background:var(--green)
}
h1 {
  color:var(--ink);
  font-weight:650;
  letter-spacing:-3px
}
h1 em {
  color:var(--green)
}
.lead {
  color:#46546d;
  font-size:18px;
  line-height:1.58
}
.fine {
  color:#586781;
  font-size:12px
}
.button {
  background:var(--ink);
  border-color:var(--ink);
  color:#fff
}
.button:hover {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}
.button.light,.plans .paid .button.light,.code-section .button.light {
  background:var(--green);
  border-color:var(--green);
  color:#fff
}
.button.light:hover,.plans .paid .button.light:hover,.code-section .button.light:hover {
  background:#2d46bd;
  border-color:#2d46bd;
  color:#fff
}
.blueprint {
  background:#e9efff;
  border-color:#c5d1ec
}
.blueprint-head {
  color:#52658f
}
.audit-window {
  border-color:#c2cee8;
  box-shadow:0 18px 42px #263d8a12
}
.audit-bar {
  border-color:#d9e1ef;
  color:#53627d
}
.audit-status {
  color:#3854c4;
  background:#dfe7ff;
  border-color:#c5d1f5
}
.sample-ui {
  background:#fcfdff
}
.sample-nav {
  color:#3b4a68
}
.sample-rule {
  background:#dce4f0
}
.sample-kicker {
  color:#3f59cf
}
.sample-ui h3 {
  color:#111827
}
.sample-ui p {
  color:#52617a
}
.sample-cta {
  background:#3854e8
}
.token-panel {
  background:#f2f5ff;
  border-color:#d9e1ef
}
.token-heading {
  color:#304168
}
.token-count,.token-name {
  color:#657493
}
.token-row {
  border-color:#d9e1ef
}
.token-row b {
  color:#253453
}
.color-row b i {
  background:#3854e8
}
.audit-footer {
  background:#dfe7ff;
  color:#425ac0
}
.compat {
  color:#5a6880;
  border-color:var(--line)
}
.compat strong {
  color:#111827
}
.section {
  padding:76px 0
}
.section-title p {
  color:#46546d
}
.step {
  background:#fff;
  border-color:var(--line)
}
.step h3 {
  color:#111827
}
.step p {
  color:#46546d
}
.number {
  color:#3854e8
}
.code-section {
  background:#17244a;
  color:#f6f8fc;
  border-radius:26px;
  padding:76px
}
.code-section h2 {
  color:#f6f8fc
}
.code-section .eyebrow {
  color:#b9c7ff
}
.code-section p {
  color:#d0d8eb
}
.reference-row {
  border-color:#445783;
  background:#ffffff08
}
.reference-row span,.code-demo small {
  color:#bcc8e1
}
.code-result {
  background:#dce5ff;
  color:#111827
}
.pricing h2,.pricing>p {
  color:#111827
}
.pricing>p {
  color:#46546d
}
.plan {
  background:#fff;
  border-color:var(--line)
}
.plan.paid {
  background:#e9efff;
  border-color:#bdc9e4
}
.plan h3,.plan li {
  color:#111827
}
.plan li:before {
  color:#3854e8
}
.tag {
  border-color:#b9c7e5;
  color:#53627d
}
.plans .button:hover {
  background:#111827;
  border-color:#111827;
  color:#fff
}
.plans .paid .button.light,.plans .paid .button.light:hover {
  background:#3854e8;
  border-color:#3854e8;
  color:#fff
}
.privacy-callout {
  border-color:var(--line)
}
.privacy-callout h3 {
  color:#111827
}
.privacy-callout p {
  color:#46546d
}
.privacy-callout>a {
  color:#111827
}
.faq h2 {
  color:#111827
}
.faq summary {
  color:#111827
}
.faq details {
  border-color:var(--line)
}
.faq details p {
  color:#46546d
}
footer {
  border-color:var(--line);
  color:#5d6a82
}
footer .links a {
  color:#111827
}
@media(max-width:720px) {
  .code-section {
  padding:52px 28px
}
.section {
  padding:52px 0
}
.hero {
  padding:45px 0 52px
}

}
.pricing-note {
  margin:20px auto 0!important;
  line-height:1.7
}
.pricing-note span {
  padding:0 8px;
  color:#9aa6bc
}

/* Terms and Privacy: single-column layout */
.legal-grid {
  display: block;
}

.legal-grid > .legal-content {
  width: 100%;
  max-width: 860px;
}

/* Standalone 404; external CSS also works under the Cloudflare CSP. */
.error-page { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:64px 0; }
.error-code { font-size:clamp(88px,16vw,160px); line-height:1; font-weight:800; letter-spacing:-.07em; color:#3854e8; margin:0 0 24px; }
.error-page h1 { font-size:clamp(32px,5vw,52px); margin:0 0 16px; }
.error-page>p:not(.error-code) { max-width:480px; color:#334155; margin:0 0 28px; }
/* Keep provider names readable in the privacy table. */
.legal-content th:first-child,.legal-content td:first-child { width:110px; white-space:nowrap; overflow-wrap:normal; }